feature: Vertical ProgressBar supports background-color-sections

lib/assets/styles/progress/_mixin.scss

@@ -1,5 +1,26 @@
-@mixin progress_color_indicator() {
-    $colors : ( nth($palette-green,6),nth($palette-orange,6),nth($palette-red,6));
+// ----------------------------------------------------------------------------
+// Copyright (c) 2016, Michael Mitterer (office@mikemitterer.at),
+// IT-Consulting and Development Limited.
+//
+// All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//    http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+// Includes a color-indicator for the section-version of
+// a vertical progressbar
+@mixin progress_3color_indicator() {
+
     %commonStyles {
         transition : background-color 0.2s $animation-curve-default;
     }
@@ -8,7 +29,7 @@
         .mdl-vprogress.mdl-vprogress--progress-#{$i} {
             .mdl-vprogress__section {
                 @extend %commonStyles;
-                background-color : nth($colors, (3));
+                background-color : nth($progress-section-colors, (3));
             }
         }
     }
@@ -17,7 +38,7 @@
         .mdl-vprogress.mdl-vprogress--progress-#{$i} {
             .mdl-vprogress__section {
                 @extend %commonStyles;
-                background-color : nth($colors, (2));
+                background-color : nth($progress-section-colors, (2));
             }
         }
     }
@@ -26,7 +47,7 @@
         .mdl-vprogress.mdl-vprogress--progress-#{$i} {
             .mdl-vprogress__section {
                 @extend %commonStyles;
-                background-color : nth($colors, (1));
+                background-color : nth($progress-section-colors, (1));
             }
         }
     }

lib/assets/styles/progress/_variables.scss

@@ -6,6 +6,7 @@ $progress-image-path: ""; // (orig - in global variables: $image_path: '/images'
 
 $progress-section-indicator: nth($palette-primary,3) !default;
 $progress-section-background: transparent !default;
+$progress-section-colors : ( nth($palette-green,6),nth($palette-orange,6),nth($palette-red,6)) !default;
 
 // Dimensions
 $bar-height: 4px !default;

lib/assets/styles/progress/_vprogress.scss

@@ -113,15 +113,9 @@
     animation-timing-function : linear;
 }
 
-//.mdl-vprogress.mdl-vprogress--indeterminate > .bar3,
-//.mdl-vprogress.mdl-vprogress__indeterminate > .bar3 {
-//  background-image: none;
-//  background-color: $progress-main-color;
-//  animation-name: vindeterminate2;
-//  animation-duration: 2s;
-//  animation-iteration-count: infinite;
-//  animation-timing-function: linear;
-//}
+// You can include this mixin in your application
+// Check out the progress-bar sample - it shows how this can be done
+// @include progress_color_indicator();
 
 @keyframes vindeterminate1 {
     0% {
@@ -138,25 +132,6 @@
     }
 }
 
-//@keyframes vindeterminate2 {
-//  0% {
-//      bottom: 0;
-//      height: 0;
-//  }
-//  50% {
-//      bottom: 0;
-//      height: 0;
-//  }
-//  75% {
-//      bottom: 0;
-//      height: 70%;
-//  }
-//  100% {
-//      bottom: 100%;
-//      height: 0;
-//  }
-//}
-
 @keyframes fadeinout {
     0%, 100% { opacity : 0.3; }
     50% { opacity : 0.7; }