fix(css-components): Fix progress styles.

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

Hide file tree

Showing 10 changed files with 131 additions and 14 deletions.
diff --git a/css-components/components-src/stylus/blue-basic-theme.styl b/css-components/components-src/stylus/blue-basic-theme.styl
@@ -52,5 +52,10 @@ $material-alert-dialog-background-color = #fafafa
 $material-alert-dialog-title-color = #212121
 $material-alert-dialog-content-color = #727272
 $material-alert-dialog-button-color = #009688
+$material-progress-bar-primary-color = #009688
+$material-progress-bar-secondary-color = #80cbc4
+$material-progress-bar-background-color = #e0e0e0
+$material-progress-circle-primary-color = #009688
+$material-progress-circle-secondary-color = #80cbc4
 
 @import 'components'
diff --git a/css-components/components-src/stylus/blue-theme.styl b/css-components/components-src/stylus/blue-theme.styl
@@ -48,5 +48,14 @@ $material-text-input-text-color = #212121
 $material-text-input-active-color = #009688
 $material-text-input-inactive-color = #afafaf
 $material-dialog-background-color = #fafafa
+$material-alert-dialog-background-color = #fafafa
+$material-alert-dialog-title-color = #212121
+$material-alert-dialog-content-color = #727272
+$material-alert-dialog-button-color = #009688
+$material-progress-bar-primary-color = #009688
+$material-progress-bar-secondary-color = #80cbc4
+$material-progress-bar-background-color = #e0e0e0
+$material-progress-circle-primary-color = #009688
+$material-progress-circle-secondary-color = #80cbc4
 
 @import 'components'
diff --git a/css-components/components-src/stylus/components/.alert-dialog.styl.swp b/css-components/components-src/stylus/components/.alert-dialog.styl.swp
diff --git a/css-components/components-src/stylus/components/progress-bar.styl b/css-components/components-src/stylus/components/progress-bar.styl
@@ -1,9 +1,9 @@
 // NOTE: You can't use @extend that break component independent and topdoc parsing.
 
 // internal variables
-var-progress-bar-color = alpha($highlight-color, 1)
-var-progress-bar-secondary-color = alpha($second-highlight-color, 1)
-
+var-progress-bar-color = $material-progress-bar-primary-color
+var-progress-bar-secondary-color = $material-progress-bar-secondary-color
+var-progress-bar-background-color = $material-progress-bar-background-color
 
 /*! topdoc
   name: Progress Bar
@@ -13,14 +13,19 @@ var-progress-bar-secondary-color = alpha($second-highlight-color, 1)
       <div class="progress-bar__primary"></div>
       <div class="progress-bar__secondary"></div>
     </div>
+    <br />
+    <div class="progress-bar progress-bar--determinate">
+      <div class="progress-bar__primary" style="width:20%"></div>
+      <div class="progress-bar__secondary" style="width:76%"></div>
+    </div>
 */
 
 .progress-bar
   position relative
   height 4px
   display block
   width 100%
-  background-color #e0e0e0
+  background-color var-progress-bar-background-color
   background-clip padding-box
   margin 0
   overflow hidden

diff --git a/css-components/components-src/stylus/components/progress-circular.styl b/css-components/components-src/stylus/components/progress-circular.styl
@@ -1,9 +1,8 @@
 // NOTE: You can't use @extend that break component independent and topdoc parsing.
 
 // internal variables
-var-progress-bar-color = alpha($highlight-color, 1)
-var-progress-bar-secondary-color = alpha($second-highlight-color, 1)
-
+var-progress-circle-color = $material-progress-circle-primary-color
+var-progress-circle-secondary-color = $material-progress-circle-secondary-color
 
 /*! topdoc
   name: Progress Circle
@@ -12,6 +11,11 @@ var-progress-bar-secondary-color = alpha($second-highlight-color, 1)
     <svg class="progress-circular">
       <circle class="progress-circular__primary" cx="50%" cy="50%" r="40%" fill="none" stroke-width="10%" stroke-miterlimit="10"/>
     </svg>
+    <svg class="progress-circular progress-circular--determinate">
+      <circle class="progress-circular__secondary" cx="50%" cy="50%" r="40%" fill="none" stroke-width="10%" stroke-miterlimit="10" style="stroke-dasharray:140%,251.32%"/>
+      <circle class="progress-circular__primary" cx="50%" cy="50%" r="40%" fill="none" stroke-width="10%" stroke-miterlimit="10" style="stroke-dasharray:100%,251.32%"/>
+    </svg>
+
 */
 
 .progress-circular
@@ -24,7 +28,7 @@ var-progress-bar-secondary-color = alpha($second-highlight-color, 1)
   stroke-dasharray 1,200
   stroke-dashoffset 0
   animation progress__dash 1.5s ease-in-out infinite
-  stroke var-progress-bar-color
+  stroke var-progress-circle-color
   transition all 1s cubic-bezier(0.4, 0, 0.2, 1);
 
 .progress-circular--determinate
@@ -36,7 +40,7 @@ var-progress-bar-secondary-color = alpha($second-highlight-color, 1)
 
 .progress-circular--determinate > .progress-circular__secondary
   animation none
-  stroke #e0e0e0
+  stroke var-progress-circle-secondary-color
 
 @keyframes progress__rotate {
   100% {

diff --git a/css-components/components-src/stylus/dark-theme.styl b/css-components/components-src/stylus/dark-theme.styl
@@ -48,5 +48,14 @@ $material-text-input-text-color = #ffffff
 $material-text-input-active-color = #009688
 $material-text-input-inactive-color = #4c4c4c
 $material-dialog-background-color = #333333
+$material-alert-dialog-background-color = #333333
+$material-alert-dialog-title-color = #ffffff
+$material-alert-dialog-content-color = #afafaf
+$material-alert-dialog-button-color = #80cbc4
+$material-progress-bar-primary-color = #009688
+$material-progress-bar-secondary-color = #80cbc4
+$material-progress-bar-background-color = #333333
+$material-progress-circle-primary-color = #009688
+$material-progress-circle-secondary-color = #80cbc4
 
 @import 'components'
diff --git a/css-components/components-src/stylus/purple-theme.styl b/css-components/components-src/stylus/purple-theme.styl
@@ -48,5 +48,14 @@ $material-text-input-text-color = #212121
 $material-text-input-active-color = #009688
 $material-text-input-inactive-color = #afafaf
 $material-dialog-background-color = #fafafa
+$material-alert-dialog-background-color = #fafafa
+$material-alert-dialog-title-color = #212121
+$material-alert-dialog-content-color = #727272
+$material-alert-dialog-button-color = #009688
+$material-progress-bar-primary-color = #009688
+$material-progress-bar-secondary-color = #80cbc4
+$material-progress-bar-background-color = #e0e0e0
+$material-progress-circle-primary-color = #009688
+$material-progress-circle-secondary-color = #80cbc4
 
 @import 'components'
diff --git a/css-components/components-src/stylus/sunshine-theme.styl b/css-components/components-src/stylus/sunshine-theme.styl
@@ -48,5 +48,14 @@ $material-text-input-text-color = #212121
 $material-text-input-active-color = #009688
 $material-text-input-inactive-color = #afafaf
 $material-dialog-background-color = #fafafa
+$material-alert-dialog-background-color = #fafafa
+$material-alert-dialog-title-color = #212121
+$material-alert-dialog-content-color = #727272
+$material-alert-dialog-button-color = #009688
+$material-progress-bar-primary-color = #009688
+$material-progress-bar-secondary-color = #80cbc4
+$material-progress-bar-background-color = #e0e0e0
+$material-progress-circle-primary-color = #009688
+$material-progress-circle-secondary-color = #80cbc4
 
 @import 'components'
diff --git a/css-components/www/scripts/viewmodels/simpleColorCustomizer.js b/css-components/www/scripts/viewmodels/simpleColorCustomizer.js
@@ -339,6 +339,37 @@ angular.module('app').factory('SimpleColorCustomizer', function(ColorCustomizer)
         }
       ]
     },
+    {
+      name: 'Progress Bar',
+      items: [
+        {
+          name: 'material-progress-bar-background-color',
+          displayName: 'Background Color'
+        },
+        {
+          name: 'material-progress-bar-primary-color',
+          displayName: 'Primary Color'
+        },
+        {
+          name: 'material-progress-bar-secondary-color',
+          displayName: 'Secondary Color'
+        }
+      ]
+    },
+    {
+      name: 'Progress Circle',
+      items: [
+        {
+          name: 'material-progress-circle-primary-color',
+          displayName: 'Primary Color'
+        },
+        {
+          name: 'material-progress-circle-secondary-color',
+          displayName: 'Secondary Color'
+        }
+      ]
+    },
+
     {
       name: 'Other',
       items: [

diff --git a/css-components/www/theme.js b/css-components/www/theme.js
@@ -100,7 +100,14 @@
         'material-alert-dialog-background-color': '#fafafa',
         'material-alert-dialog-title-color': '#212121',
         'material-alert-dialog-content-color': '#727272',
-        'material-alert-dialog-button-color': '#009688'
+        'material-alert-dialog-button-color': '#009688',
+
+        // Material Progress
+        'material-progress-bar-primary-color': '#009688',
+        'material-progress-bar-secondary-color': '#80cbc4',
+        'material-progress-bar-background-color': '#e0e0e0',
+        'material-progress-circle-primary-color': '#009688',
+        'material-progress-circle-secondary-color': '#80cbc4'
       }
     },
 
@@ -199,7 +206,15 @@
         'material-alert-dialog-background-color': '#fafafa',
         'material-alert-dialog-title-color': '#212121',
         'material-alert-dialog-content-color': '#727272',
-        'material-alert-dialog-button-color': '#009688'
+        'material-alert-dialog-button-color': '#009688',
+
+        // Material Progress
+        'material-progress-bar-primary-color': '#009688',
+        'material-progress-bar-secondary-color': '#80cbc4',
+        'material-progress-bar-background-color': '#e0e0e0',
+        'material-progress-circle-primary-color': '#009688',
+        'material-progress-circle-secondary-color': '#80cbc4'
+
       }
     },
 
@@ -298,7 +313,14 @@
         'material-alert-dialog-background-color': '#333333',
         'material-alert-dialog-title-color': '#ffffff',
         'material-alert-dialog-content-color': '#afafaf',
-        'material-alert-dialog-button-color': '#80cbc4'
+        'material-alert-dialog-button-color': '#80cbc4',
+
+        // Material Progress
+        'material-progress-bar-primary-color': '#009688',
+        'material-progress-bar-secondary-color': '#80cbc4',
+        'material-progress-bar-background-color': '#333333',
+        'material-progress-circle-primary-color': '#009688',
+        'material-progress-circle-secondary-color': '#80cbc4'
       }
     },
     {
@@ -396,7 +418,14 @@
         'material-alert-dialog-background-color': '#fafafa',
         'material-alert-dialog-title-color': '#212121',
         'material-alert-dialog-content-color': '#727272',
-        'material-alert-dialog-button-color': '#009688'
+        'material-alert-dialog-button-color': '#009688',
+
+        // Material Progress
+        'material-progress-bar-primary-color': '#009688',
+        'material-progress-bar-secondary-color': '#80cbc4',
+        'material-progress-bar-background-color': '#e0e0e0',
+        'material-progress-circle-primary-color': '#009688',
+        'material-progress-circle-secondary-color': '#80cbc4'
       }
     },
 
@@ -495,7 +524,14 @@
         'material-alert-dialog-background-color': '#fafafa',
         'material-alert-dialog-title-color': '#212121',
         'material-alert-dialog-content-color': '#727272',
-        'material-alert-dialog-button-color': '#009688'
+        'material-alert-dialog-button-color': '#009688',
+
+        // Material Progress
+        'material-progress-bar-primary-color': '#009688',
+        'material-progress-bar-secondary-color': '#80cbc4',
+        'material-progress-bar-background-color': '#e0e0e0',
+        'material-progress-circle-primary-color': '#009688',
+        'material-progress-circle-secondary-color': '#80cbc4'
       }
     }
   ];