Fix progress bar gradient direction

This commit is contained in:
EliverLara
2018-10-24 13:12:35 -05:00
parent 5c48832ff6
commit e9638cec45
5 changed files with 17 additions and 6 deletions

View File

@@ -593,3 +593,7 @@ box-shadow: none;
border: none;
box-shadow: none;
}
@mixin scale-highlight($dir) {
background: linear-gradient(to $dir, #fed349, #ff7800);
}

View File

@@ -3311,7 +3311,8 @@ progressbar {
progressbar.horizontal progress {
margin: 0; }
progressbar.vertical progress {
margin: 0; }
margin: 0;
background: linear-gradient(to bottom, #fed349, #ff7800); }
progressbar:backdrop {
box-shadow: none;
transition: 200ms ease-out; }
@@ -3368,6 +3369,8 @@ scale {
scale.vertical trough,
scale.vertical progress {
min-width: 6px; }
scale.vertical highlight {
background: linear-gradient(to bottom, #fed349, #ff7800); }
scale slider {
min-height: 15px;
min-width: 15px;

View File

@@ -3318,7 +3318,8 @@ progressbar {
progressbar.horizontal progress {
margin: 0; }
progressbar.vertical progress {
margin: 0; }
margin: 0;
background: linear-gradient(to bottom, #fed349, #ff7800); }
progressbar:backdrop {
box-shadow: none;
transition: 200ms ease-out; }
@@ -3375,6 +3376,8 @@ scale {
scale.vertical trough,
scale.vertical progress {
min-width: 6px; }
scale.vertical highlight {
background: linear-gradient(to bottom, #fed349, #ff7800); }
scale slider {
min-height: 15px;
min-width: 15px;

View File

@@ -13,8 +13,8 @@ progressbar {
progress { min-width: 6px; }
}
&.horizontal progress { margin: 0; } // the progress node is positioned after the trough border
&.vertical progress { margin: 0; } // this moves it over it.
&.horizontal progress { margin: 0;} // the progress node is positioned after the trough border
&.vertical progress { margin: 0; @include scale-highlight(bottom);} // this moves it over it.
// FIXME: insensitive state missing and some other state should be set probably

View File

@@ -19,7 +19,7 @@
%scale_highlight {
border: none;
background: linear-gradient(to right, #fed349, #ff7800);
@include scale-highlight(right);
border-radius: 3px;
margin: 0;
@@ -54,7 +54,8 @@ scale {
&.vertical {
trough,
progress { min-width: 6px; }
progress { min-width: 6px;}
highlight { @include scale-highlight(bottom); }
}
// the slider is inside the trough, so to have make it bigger there's a negative margin