fix(fab): colors in speed dial buttons

ionic-team · Sep 26, 2016 · b70614b · b70614b
1 parent 7cf01fb
commit b70614b
Show file tree

Hide file tree

Showing 6 changed files with 177 additions and 93 deletions.
diff --git a/src/components/fab/fab.ios.scss b/src/components/fab/fab.ios.scss
@@ -3,11 +3,40 @@
 // iOS FAB Button
 // --------------------------------------------------
 
-/// @prop - Border radius of the FAB button
-$button-ios-fab-border-radius:                      50% !default;
+/// @prop - Background color of the button
+$fab-ios-background-color:                    color($colors-ios, primary) !default;
 
-.fab-button {
-  border-radius: $button-ios-fab-border-radius;
+/// @prop - Text color of the button
+$fab-ios-text-color:                          color-contrast($colors-ios, $fab-ios-background-color) !default;
+
+/// @prop - Background color of the activated button
+$fab-ios-background-color-activated:          color-shade($fab-ios-background-color) !default;
+
+/// @prop - Background color of the button
+$fab-ios-in-list-background-color:            color($colors-ios, light) !default;
+
+/// @prop - Text color of the button
+$fab-ios-in-list-text-color:                  color-contrast($colors-ios, $fab-ios-in-list-background-color) !default;
+
+/// @prop - Background color of the activated button
+$fab-ios-in-list-background-color-activated:  color-shade($fab-ios-in-list-background-color) !default;
+
+.fab-ios {
+  color: $fab-ios-text-color;
+  background-color: $fab-ios-background-color;
+}
+
+.fab-ios.activated {
+  background-color: $fab-ios-background-color-activated;
+}
+
+.fab-ios.fab-in-list {
+  color: $fab-ios-in-list-text-color;
+  background-color: $fab-ios-in-list-background-color;
+}
+
+.fab-ios.fab-in-list.activated {
+  background-color: $fab-ios-in-list-background-color-activated;
 }
 
 
@@ -20,12 +49,12 @@ $button-ios-fab-border-radius:                      50% !default;
   $background-color-activated: color-shade($background-color);
   $fg-color: $color-contrast;
 
-  .fab-ios-#{$color-name} {
+  .fab-ios.fab-ios-#{$color-name} {
     color: $fg-color;
     background-color: $background-color;
   }
 
-  .fab-ios-#{$color-name}.activated {
+  .fab-ios.fab-ios-#{$color-name}.activated {
     background-color: $background-color-activated;
   }
 }

diff --git a/src/components/fab/fab.md.scss b/src/components/fab/fab.md.scss
@@ -3,31 +3,58 @@
 // Material Design FAB Button
 // --------------------------------------------------
 
-/// @prop - Border radius of the FAB button
-$button-md-fab-border-radius:                   50% !default;
-
 /// @prop - Box shadow of the FAB button
-$button-md-fab-box-shadow:                      0 4px 6px 0 rgba(0, 0, 0, .14), 0 4px 5px rgba(0, 0, 0, .1) !default;
+$fab-md-box-shadow:                         0 4px 6px 0 rgba(0, 0, 0, .14), 0 4px 5px rgba(0, 0, 0, .1) !default;
 
 /// @prop - Box shadow of the activated FAB button
-$button-md-fab-box-shadow-activated:            0 5px 15px 0 rgba(0, 0, 0, .4), 0 4px 7px 0 rgba(0, 0, 0, .1) !default;
+$fab-md-box-shadow-activated:               0 5px 15px 0 rgba(0, 0, 0, .4), 0 4px 7px 0 rgba(0, 0, 0, .1) !default;
+
+/// @prop - Background color of the button
+$fab-md-background-color:                   color($colors-md, primary) !default;
+
+/// @prop - Text color of the button
+$fab-md-text-color:                         color-contrast($colors-md, $fab-md-background-color) !default;
+
+/// @prop - Background color of the activated button
+$fab-md-background-color-activated:         color-shade($fab-md-background-color) !default;
+
+/// @prop - Background color of the button
+$fab-md-in-list-background-color:           color($colors-md, light) !default;
+
+/// @prop - Text color of the button
+$fab-md-in-list-text-color:                 color-contrast($colors-md, $fab-md-in-list-background-color) !default;
+
+/// @prop - Background color of the activated button
+$fab-md-in-list-background-color-activated: color-shade($fab-md-in-list-background-color) !default;
 
 
-.fab-button {
-  border-radius: $button-md-fab-border-radius;
-  box-shadow: $button-md-fab-box-shadow;
+.fab-md {
+  color: $fab-md-text-color;
+  background-color: $fab-md-background-color;
+
+  box-shadow: $fab-md-box-shadow;
 
   transition: box-shadow $button-md-transition-duration $button-md-transition-timing-function,
               background-color $button-md-transition-duration $button-md-transition-timing-function,
               color $button-md-transition-duration $button-md-transition-timing-function;
+}
 
-  &.activated {
-    box-shadow: $button-md-fab-box-shadow-activated;
-  }
+.fab-md.activated {
+  background-color: $fab-md-background-color-activated;
+  box-shadow: $fab-md-box-shadow-activated;
+}
+
+.fab-md.fab-in-list {
+  color: $fab-md-in-list-text-color;
+  background-color: $fab-md-in-list-background-color;
+}
+
+.fab-md.fab-wp.fab-in-list.activated {
+  background-color: $fab-md-in-list-background-color-activated;
 }
 
 
-// Generate iOS FAB colors
+// Generate MD FAB colors
 // --------------------------------------------------
 
 @each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
@@ -36,12 +63,12 @@ $button-md-fab-box-shadow-activated:            0 5px 15px 0 rgba(0, 0, 0, .4),
   $background-color-activated: color-shade($background-color);
   $fg-color: $color-contrast;
 
-  .fab-md-#{$color-name} {
+  .fab-md.fab-md-#{$color-name} {
     color: $fg-color;
     background-color: $background-color;
   }
 
-  .fab-md-#{$color-name}.activated {
+  .fab-md.fab-md-#{$color-name}.activated {
     background-color: $background-color-activated;
   }
 }

diff --git a/src/components/fab/fab.scss b/src/components/fab/fab.scss
@@ -4,34 +4,33 @@
 // --------------------------------------------------
 
 /// @prop - Width and height of the FAB button
-$button-fab-size:            56px !default;
-$button-fab-mini-size:       40px !default;
-$button-fab-content-margin:  10px !default;
-$button-fab-list-margin:     10px !default;
+$fab-size:            56px !default;
+$fab-mini-size:       40px !default;
+$fab-content-margin:  10px !default;
+$fab-list-margin:     10px !default;
 
 
-.fab-button {
+.fab {
+  @include appearance(none);
+
   position: relative;
   z-index: 0;
   display: block;
   overflow: hidden;
 
-  width: $button-fab-size;
-  height: $button-fab-size;
+  width: $fab-size;
+  height: $fab-size;
 
+  border-radius: 50%;
   font-size: 14px;
-  line-height: $button-fab-size;
+  line-height: $fab-size;
   text-align: center;
   text-overflow: ellipsis;
   text-transform: none;
   white-space: nowrap;
-  color: #fff;
-  background-color: #327eff;
   cursor: pointer;
   transition: background-color, opacity 100ms linear;
 
-  -moz-appearance: none;
-  -webkit-appearance: none;
   background-clip: padding-box;
   font-kerning: none;
   user-select: none;
@@ -46,16 +45,16 @@ $button-fab-list-margin:     10px !default;
 // FAB mini
 // --------------------------------------------------
 
-.fab-button[mini] {
-  margin: ($button-fab-size - $button-fab-mini-size) / 2;
+.fab[mini] {
+  margin: ($fab-size - $fab-mini-size) / 2;
 
-  width: $button-fab-mini-size;
-  height: $button-fab-mini-size;
+  width: $fab-mini-size;
+  height: $fab-mini-size;
 
-  line-height: $button-fab-mini-size;
+  line-height: $fab-mini-size;
 
   .fab-close-icon {
-    line-height: $button-fab-mini-size;
+    line-height: $fab-mini-size;
   }
 }
 
@@ -70,37 +69,37 @@ ion-fab {
   &[center] {
     left: 50%;
 
-    margin-left: -$button-fab-size / 2;
+    margin-left: -$fab-size / 2;
   }
 
   &[middle] {
     top: 50%;
 
-    margin-top: -$button-fab-size / 2;
+    margin-top: -$fab-size / 2;
   }
 
   &[top] {
-    top: $button-fab-content-margin;
+    top: $fab-content-margin;
   }
 
   &[right] {
-    right: $button-fab-content-margin;
+    right: $fab-content-margin;
   }
 
   &[bottom] {
-    bottom: $button-fab-content-margin;
+    bottom: $fab-content-margin;
   }
 
   &[left] {
-    left: $button-fab-content-margin;
+    left: $fab-content-margin;
   }
 
   &[top][edge] {
-    top: -$button-fab-size / 2;
+    top: -$fab-size / 2;
   }
 
   &[bottom][edge] {
-    bottom: -$button-fab-size / 2;
+    bottom: -$fab-size / 2;
   }
 }
 
@@ -116,32 +115,30 @@ ion-fab-list {
   flex-direction: column;
   align-items: center;
 
-  margin: $button-fab-size + $button-fab-list-margin 0;
+  margin: $fab-size + $fab-list-margin 0;
 
-  min-width: $button-fab-size;
-  min-height: $button-fab-size;
+  min-width: $fab-size;
+  min-height: $fab-size;
+}
 
-  .fab-button {
-    margin: 8px;
+ion-fab-list .fab-in-list {
+  margin: 8px;
 
-    width: $button-fab-mini-size;
-    height: $button-fab-mini-size;
+  width: $fab-mini-size;
+  height: $fab-mini-size;
 
-    color: #797979;
-    background: #fff;
-    opacity: 0;
-    visibility: hidden;
-    transform: scale(0);
-    transition: all 200ms ease;
-    transition-delay: 10ms;
-    transition-property: transform, opacity;
+  opacity: 0;
+  visibility: hidden;
+  transform: scale(0);
+  transition: all 200ms ease;
+  transition-delay: 10ms;
+  transition-property: transform, opacity;
+}
 
-    &.fab-dial-button-visible {
-      opacity: 1;
-      visibility: visible;
-      transform: scale(1);
-    }
-  }
+ion-fab-list .fab-in-list.show {
+  opacity: 1;
+  visibility: visible;
+  transform: scale(1);
 }
 
 ion-fab-list[side=top] {
@@ -156,15 +153,15 @@ ion-fab-list[side=left] {
 
   flex-direction: row-reverse;
 
-  margin: 0 $button-fab-size + $button-fab-list-margin;
+  margin: 0 $fab-size + $fab-list-margin;
 }
 
 ion-fab-list[side=right] {
   left: 0;
 
   flex-direction: row;
 
-  margin: 0 $button-fab-size + $button-fab-list-margin;
+  margin: 0 $fab-size + $fab-list-margin;
 }
 
 
@@ -181,13 +178,13 @@ ion-fab-list[side=right] {
   right: 0;
   left: 0;
 
-  line-height: $button-fab-size;
+  line-height: $fab-size;
   opacity: 0;
   transform: scale(.4) rotateZ(-45deg);
   transition: all ease-in-out 300ms;
 }
 
-.fab-button .button-inner {
+.fab .button-inner {
   transition: all ease-in-out 300ms;
 }