feat(css-components): Add theme for fab.

OnsenUI · Nov 6, 2015 · f1332de · f1332de
1 parent cf6558b
commit f1332de
Show file tree

Hide file tree

Showing 9 changed files with 67 additions and 23 deletions.
diff --git a/css-components/components-src/stylus/blue-basic-theme.styl b/css-components/components-src/stylus/blue-basic-theme.styl
@@ -57,5 +57,7 @@ $material-progress-bar-secondary-color = #80cbc4
 $material-progress-bar-background-color = #e0e0e0
 $material-progress-circle-primary-color = #009688
 $material-progress-circle-secondary-color = #80cbc4
+$fab-text-color = #fafafa
+$fab-background-color = #009688
 
 @import 'components'
diff --git a/css-components/components-src/stylus/blue-theme.styl b/css-components/components-src/stylus/blue-theme.styl
@@ -57,5 +57,7 @@ $material-progress-bar-secondary-color = #80cbc4
 $material-progress-bar-background-color = #e0e0e0
 $material-progress-circle-primary-color = #009688
 $material-progress-circle-secondary-color = #80cbc4
+$fab-text-color = #fafafa
+$fab-background-color = #009688
 
 @import 'components'
diff --git a/css-components/components-src/stylus/components/.fab.styl.swp b/css-components/components-src/stylus/components/.fab.styl.swp
diff --git a/css-components/components-src/stylus/components/fab.styl b/css-components/components-src/stylus/components/fab.styl
@@ -7,8 +7,8 @@ var-fab-height = 56px
 var-fab-mini-width = 40px
 var-fab-mini-height = 40px
 
-var-fab-background-color = $highlight-color
-var-fab-color = white
+var-fab-background-color = $fab-background-color
+var-fab-color = $fab-text-color
 
 /*! topdoc
   name: Fab
@@ -18,8 +18,8 @@ var-fab-color = white
     :disabled: Disabled state
     :focus: Focused
   markup:
-    <button class="fab">+</button>
-    <button class="fab" disabled>+</button>
+    <button class="fab"><i class="zmdi zmdi-car"></i></button>
+    <button class="fab" disabled><i class="zmdi zmdi-car"></i></button>
 */
 
 fab--disabled()
@@ -37,24 +37,27 @@ fab()
   width var-fab-width
   height var-fab-height
   text-decoration none
-  font-size var-font-size
+  font-size 25px
   line-height var-fab-height
   letter-spacing var-letter-spacing
   color var-fab-color
   vertical-align middle
   text-align center
-  background-color alpha(var-fab-background-color, 1)
+  background-color var-fab-background-color
   border 0px solid currentColor
   border-radius 50%
   shadow-2()
   transition all 0.2s ease-in-out
+  display inline-flex
+  justify-content center
+  align-content center
 
 fab--focus()
   outline 0
 
 fab--active()
   shadow-4()
-  background-color alpha(var-fab-background-color, 1)
+  background-color var-fab-background-color
   transition all 0.2s ease
 
 .fab
@@ -68,7 +71,7 @@ fab--active()
 
 .fab:focus
   fab--focus()
-  
+
 .fab__icon
   position relative
   overflow hidden
@@ -83,52 +86,50 @@ fab--active()
 .fab:disabled,
 .fab[disabled]
   fab--disabled()
-
 
 .fab--top__right
   top 20px
   bottom auto
   right 20px
   left auto
   position fixed
-  
+
 .fab--bottom__right
   top auto
   bottom 20px
   right 20px
   left auto
   position fixed
-  
+
 .fab--top__left
   top 20px
   bottom auto
   right auto
   left 20px
   position fixed
-  
+
 .fab--bottom__left
   top auto
   bottom 20px
   right auto
   left 20px
   position fixed
-  
+
 .fab--top__center
   top 20px
   bottom auto
   margin-left -28px
   left 50%
   right auto
   position fixed
-  
+
 .fab--bottom__center
   top auto
   bottom 20px
   margin-left -28px
   left 50%
   right auto
   position fixed
-
 
 /*! topdoc
   name: Fab Mini
@@ -138,15 +139,14 @@ fab--active()
     :disabled: Disabled state
     :focus: Focused
   markup:
-    <button class="fab fab--mini">+</button>
-    <button class="fab fab--mini" disabled>+</button>
+    <button class="fab fab--mini"><i class="zmdi zmdi-plus"></i></button>
+    <button class="fab fab--mini" disabled><i class="zmdi zmdi-plus"></i></button>
 */
 
 .fab--mini
   width var-fab-mini-width
   height var-fab-mini-height
   line-height var-fab-mini-height
-
 
 .fab--mini
   .fab__icon

diff --git a/css-components/components-src/stylus/dark-theme.styl b/css-components/components-src/stylus/dark-theme.styl
@@ -57,5 +57,7 @@ $material-progress-bar-secondary-color = #80cbc4
 $material-progress-bar-background-color = #333333
 $material-progress-circle-primary-color = #009688
 $material-progress-circle-secondary-color = #80cbc4
+$fab-text-color = #fafafa
+$fab-background-color = #80cbc4
 
 @import 'components'
diff --git a/css-components/components-src/stylus/purple-theme.styl b/css-components/components-src/stylus/purple-theme.styl
@@ -57,5 +57,7 @@ $material-progress-bar-secondary-color = #80cbc4
 $material-progress-bar-background-color = #e0e0e0
 $material-progress-circle-primary-color = #009688
 $material-progress-circle-secondary-color = #80cbc4
+$fab-text-color = #fafafa
+$fab-background-color = #009688
 
 @import 'components'
diff --git a/css-components/components-src/stylus/sunshine-theme.styl b/css-components/components-src/stylus/sunshine-theme.styl
@@ -57,5 +57,7 @@ $material-progress-bar-secondary-color = #80cbc4
 $material-progress-bar-background-color = #e0e0e0
 $material-progress-circle-primary-color = #009688
 $material-progress-circle-secondary-color = #80cbc4
+$fab-text-color = #fafafa
+$fab-background-color = #009688
 
 @import 'components'
diff --git a/css-components/www/scripts/viewmodels/simpleColorCustomizer.js b/css-components/www/scripts/viewmodels/simpleColorCustomizer.js
@@ -370,6 +370,21 @@ angular.module('app').factory('SimpleColorCustomizer', function(ColorCustomizer)
       ]
     },
 
+    {
+      name: 'Floating Action Button',
+      items: [
+        {
+          name: 'fab-text-color',
+          displayName: 'Text Color'
+        },
+        {
+          name: 'fab-background-color',
+          displayName: 'Background Color'
+        }
+
+      ]
+    },
+
     {
       name: 'Other',
       items: [

diff --git a/css-components/www/theme.js b/css-components/www/theme.js
@@ -107,7 +107,11 @@
         'material-progress-bar-secondary-color': '#80cbc4',
         'material-progress-bar-background-color': '#e0e0e0',
         'material-progress-circle-primary-color': '#009688',
-        'material-progress-circle-secondary-color': '#80cbc4'
+        'material-progress-circle-secondary-color': '#80cbc4',
+
+        // Floating Action Button
+        'fab-text-color': '#fafafa',
+        'fab-background-color': '#009688'
       }
     },
 
@@ -213,8 +217,11 @@
         'material-progress-bar-secondary-color': '#80cbc4',
         'material-progress-bar-background-color': '#e0e0e0',
         'material-progress-circle-primary-color': '#009688',
-        'material-progress-circle-secondary-color': '#80cbc4'
+        'material-progress-circle-secondary-color': '#80cbc4',
 
+        // Floating Action Button
+        'fab-text-color': '#fafafa',
+        'fab-background-color': '#009688'
       }
     },
 
@@ -320,7 +327,11 @@
         'material-progress-bar-secondary-color': '#80cbc4',
         'material-progress-bar-background-color': '#333333',
         'material-progress-circle-primary-color': '#009688',
-        'material-progress-circle-secondary-color': '#80cbc4'
+        'material-progress-circle-secondary-color': '#80cbc4',
+
+        // Floating Action Button
+        'fab-text-color': '#fafafa',
+        'fab-background-color': '#80cbc4'
       }
     },
     {
@@ -425,7 +436,11 @@
         'material-progress-bar-secondary-color': '#80cbc4',
         'material-progress-bar-background-color': '#e0e0e0',
         'material-progress-circle-primary-color': '#009688',
-        'material-progress-circle-secondary-color': '#80cbc4'
+        'material-progress-circle-secondary-color': '#80cbc4',
+
+        // Floating Action Button
+        'fab-text-color': '#fafafa',
+        'fab-background-color': '#009688'
       }
     },
 
@@ -531,7 +546,11 @@
         'material-progress-bar-secondary-color': '#80cbc4',
         'material-progress-bar-background-color': '#e0e0e0',
         'material-progress-circle-primary-color': '#009688',
-        'material-progress-circle-secondary-color': '#80cbc4'
+        'material-progress-circle-secondary-color': '#80cbc4',
+
+        // Floating Action Button
+        'fab-text-color': '#fafafa',
+        'fab-background-color': '#009688'
       }
     }
   ];