Permalink
Browse files

feature: Vertical ProgressBar supports background-color-sections

  • Loading branch information...
MikeMitterer committed May 4, 2017
1 parent ad4ad7c commit 65cf25363749fdbed959b01b1e2d53ca9b4e5ef6
@@ -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));
}
}
}
@@ -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;
@@ -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; }

0 comments on commit 65cf253

Please sign in to comment.