fix(buttons): raised button shadows. Fixes angular#1

pborreli · Jul 1, 2014 · 80c7e20 · 80c7e20
1 parent 00f2e9f
commit 80c7e20
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 7 deletions.
diff --git a/src/components/buttons/_buttons.scss b/src/components/buttons/_buttons.scss
@@ -56,6 +56,9 @@
 
   &.material-button-raised {
     background-color: $button-raised-background;
+
+    @extend .material-shadow-bottom-z-1;
+
     &:hover {
       background-color: $button-raised-hover-background;
     }

diff --git a/src/components/buttons/demo1/index.html b/src/components/buttons/demo1/index.html
@@ -49,9 +49,9 @@
     </section>
 
     <section class="margin">
-      <button class="material-button material-button-raised">Button</button>
+      <button class="material-button">Button</button>
       <br>
-      <button class="material-button material-button-raised material-button-colored">Colored</button>
+      <button class="material-button material-button-colored">Colored</button>
       <br>
       <div class="label">flat + focused</div>
     </section>

diff --git a/src/components/card/demo1/index.html b/src/components/card/demo1/index.html
@@ -4,7 +4,7 @@
   <material-content>
 
     <material-card>
-      <img src="/img/washedout.png" class="material-card-image">
+      <img src="/dist/docs/img/washedout.png" class="material-card-image">
       <h2>Paracosm</h2>
       <p>
         The titles of Washed Out's breakthrough song and the first single from Paracosm share the
@@ -13,7 +13,7 @@ <h2>Paracosm</h2>
     </material-card>
 
     <material-card>
-      <img src="/img/washedout.png" class="material-card-image">
+      <img src="/dist/docs/img/washedout.png" class="material-card-image">
       <h2>Paracosm</h2>
       <p>
         The titles of Washed Out's breakthrough song and the first single from Paracosm share the
@@ -22,7 +22,7 @@ <h2>Paracosm</h2>
     </material-card>
 
     <material-card>
-      <img src="/img/washedout.png" class="material-card-image">
+      <img src="/dist/docs/img/washedout.png" class="material-card-image">
       <h2>Paracosm</h2>
       <p>
         The titles of Washed Out's breakthrough song and the first single from Paracosm share the

diff --git a/src/theme/_utils.scss b/src/theme/_utils.scss
@@ -1,6 +1,6 @@
 @mixin theme-bg-and-color($bg, $color) {
-  background-color: $bg;
-  color: $color;
+  background-color: $bg !important;
+  color: $color !important;
 }
 @mixin theme-input-text-and-border($color) {
   &.material-input-has-value, &.material-input-focused {
@@ -50,3 +50,21 @@
 .material-input-group-theme-orange { @include theme-input-text-and-border($theme-orange); }
 .material-input-group-theme-purple { @include theme-input-text-and-border($theme-purple); }
 .material-input-group-theme-red { @include theme-input-text-and-border($theme-red); }
+
+.material-shadow {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  border-radius: inherit;
+  pointer-events: none;
+}
+
+.material-shadow-bottom-z-1 {
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
+}
+
+.material-shadow-animated.material-shadow {
+  transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+}