numix-gtk-theme/gtk-3.20/scss/widgets/_progress.scss

421 lines
12 KiB
SCSS
Raw Normal View History

2016-04-09 04:30:09 +00:00
/*****************
! Progress bars *
******************/
@include exports("progressbar") {
progressbar {
padding: 0;
border-radius: $roundness;
font-size: smaller;
color: alpha($fg_color, .6);
// sizing
&.horizontal {
trough,
progress { min-height: 6px; }
2016-04-09 04:30:09 +00:00
}
&.vertical {
trough,
progress { min-width: 6px; }
}
&.osd { min-height: 4px; }
2016-04-09 04:30:09 +00:00
trough {
border: 1px solid alpha(border_normal($bg_color), .5);
background-color: shade($bg_color, 1.08);
background-image: none;
border-radius: $roundness;
2016-04-09 04:30:09 +00:00
}
progress {
@include linear-gradient($selected_bg_color);
2016-04-09 04:30:09 +00:00
border-radius: 0;
2016-04-09 04:30:09 +00:00
&.left {
border-top-left-radius: $roundness;
border-bottom-left-radius: $roundness;
}
2016-04-09 04:30:09 +00:00
&.right {
border-top-right-radius: $roundness;
border-bottom-right-radius: $roundness;
}
2016-04-09 04:30:09 +00:00
&.bottom {
border-bottom-left-radius: $roundness;
border-bottom-right-radius: $roundness;
}
2016-04-09 04:30:09 +00:00
&.top {
border-top-left-radius: $roundness;
border-top-right-radius: $roundness;
2016-04-09 04:30:09 +00:00
}
}
2016-05-19 15:38:50 +00:00
&.osd { // progressbar.osd used for epiphany page loading progress
margin: 2px;
min-height: 2px;
min-width: 2px;
trough {
border-style: none;
border-radius: 0;
background-image: none;
background-color: transparent;
}
progress {
border-style: none;
border-radius: 0;
background-color: $selected_bg_color;
background-image: none;
}
}
2016-04-09 04:30:09 +00:00
}
levelbar {
block {
min-width: 34px;
min-height: 3px;
}
2016-04-09 04:30:09 +00:00
&.vertical block {
2016-04-09 04:30:09 +00:00
min-width: 3px;
min-height: 34px;
}
&:backdrop { transition: 200ms ease-out; }
2016-04-09 04:30:09 +00:00
trough {
@include linear-gradient(shade($bg_color, 1.08), to top);
border: 1px solid alpha(border_normal($bg_color), .5);
border-radius: $roundness;
}
&.horizontal.discrete block {
margin: 0 2px;
2016-04-09 04:30:09 +00:00
&:first-child { margin: 0; }
}
&.vertical.discrete block {
margin: 2px 0;
&:first-child { margin: 0; }
2016-04-09 04:30:09 +00:00
}
block {
2016-04-09 04:30:09 +00:00
@include linear-gradient($selected_bg_color);
border-color: transparent;
border-radius: 0;
&.low {
background-color: $warning_color;
2016-04-09 04:30:09 +00:00
border-color: transparent;
}
&.high,
2016-05-16 12:26:17 +00:00
&:not(.empty) {
background-color: $selected_bg_color;
border-color: transparent;
}
&.full {
background-color: $success_color;
2016-04-09 04:30:09 +00:00
border-color: transparent;
}
&.empty {
2016-04-09 04:30:09 +00:00
background-color: transparent;
border-color: transparent;
box-shadow: none;
}
}
}
scale {
$_marks_length: 3px;
$_marks_distance: 1px;
$button_bg: if(hue($bg_color) == 0deg, shade($bg_color, 1.2), $bg_color);
$ease-out-quad: cubic-bezier(.25, .46, .45, .94);
2016-04-09 04:30:09 +00:00
$button_transition: all 200ms $ease-out-quad;
min-height: 10px;
min-width: 10px;
&.horizontal {
padding: 6px 0;
trough { padding: 0 7px; }
highlight, fill { margin: 0 -7px; }
}
2016-04-09 04:30:09 +00:00
&.vertical {
padding: 0 6px;
trough { padding: 7px 0; }
highlight, fill { margin: -7px 0; }
}
// The slider is inside the trough, negative margin to make it bigger
slider {
min-height: 15px;
min-width: 15px;
margin: -7px;
2016-04-09 04:30:09 +00:00
}
// Click-and-hold the slider to activate
&.fine-tune {
&.horizontal {
padding-top: 4px;
padding-bottom: 4px;
min-height: 15px;
}
&.vertical {
padding-left: 4px;
padding-right: 4px;
min-width: 15px;
}
// Make the trough grow in fine-tune mode
slider { margin: -4px; }
fill,
highlight,
trough {
border-radius: 5px;
-gtk-outline-radius: 7px;
}
}
// Trough
trough {
$_scale_trough_bg: if($variant == 'light', shade($bg_color, .8), darken($bg_color, 5%));
2016-04-09 04:30:09 +00:00
outline-offset: 2px;
-gtk-outline-radius: 4.5px;
border-radius: 2.5px;
background-color: $_scale_trough_bg;
2016-04-28 15:38:57 +00:00
&:disabled { background-color: transparentize($_scale_trough_bg, .45); }
2016-04-09 04:30:09 +00:00
//OSD troughs
.osd & {
background-color: lighten($osd_bg, 7%);
highlight { background-color: $selected_bg_color; }
2016-04-09 04:30:09 +00:00
}
// Troughs in selected list-rows and infobars
2016-08-28 13:46:08 +00:00
menuitem:hover &,
2016-04-09 04:30:09 +00:00
row:selected &,
infobar & {
2016-04-28 15:38:57 +00:00
background-color: transparentize($black, .8);
2016-04-09 04:30:09 +00:00
highlight {
background-color: $selected_fg_color;
&:disabled { background-color: mix($selected_fg_color, $selected_bg_color, .55); }
2016-04-09 04:30:09 +00:00
}
2016-04-28 15:38:57 +00:00
&:disabled { background-color: transparentize($black, .9); }
2016-04-09 04:30:09 +00:00
}
}
// The colored part of trough
highlight {
border-radius: 2.5px;
background-color: $selected_bg_color;
2016-04-28 15:38:57 +00:00
&:disabled { background-color: transparentize($selected_bg_color, .45); }
2016-04-09 04:30:09 +00:00
}
// this is another differently styled part of the trough, the most relevant use case is for example
// in media player to indicate how much video stream as been cached
fill {
border-radius: 2.5px;
2016-04-28 15:38:57 +00:00
background-color: transparentize($selected_bg_color, .5);
2016-04-09 04:30:09 +00:00
&:disabled { background-color: transparent; }
}
slider {
2016-04-28 15:38:57 +00:00
$_slider_border: if($variant == 'light', transparentize(shade($button_border, .25), .5), darken($button_border, 2%));
2016-04-09 04:30:09 +00:00
background-color: $button_bg;
border: 1px solid $_slider_border;
border-radius: 100%;
transition: $button_transition;
transition-property: background, border;
&:hover { background-color: lighten($button_bg, 5%); }
&:active {
background-clip: border-box;
background-color: $selected_bg_color;
border-color: $selected_bg_color;
}
&:disabled {
background-color: mix($fg_color, $bg_color, .55);
2016-04-28 15:38:57 +00:00
border-color: transparentize($_slider_border, .2);
2016-04-09 04:30:09 +00:00
}
// Selected list-row and infobar sliders
2016-08-28 13:46:08 +00:00
menuitem:hover &,
2016-04-09 04:30:09 +00:00
row:selected &,
infobar & {
background-clip: border-box;
background-color: $selected_fg_color;
border-color: $selected_fg_color;
&:hover {
background-color: mix($selected_fg_color, $selected_bg_color, .85);
border-color: mix($selected_fg_color, $selected_bg_color, .85);
2016-04-09 04:30:09 +00:00
}
2016-04-09 04:30:09 +00:00
&:active {
background-color: mix($selected_fg_color, $selected_bg_color, .5);
border-color: mix($selected_fg_color, $selected_bg_color, .5);
2016-04-09 04:30:09 +00:00
}
&:disabled {
background-color: mix($selected_fg_color, $selected_bg_color, .55);
border-color: mix($selected_fg_color, $selected_bg_color, .55);
2016-04-09 04:30:09 +00:00
}
}
// OSD sliders
.osd & {
background-clip: border-box;
background-color: $selected_bg_color;
border-color: $selected_bg_color;
&:hover {
background-color: lighten($selected_bg_color, 10%);
border-color: lighten($selected_bg_color, 10%)
}
&:active {
background-color: darken($selected_bg_color, 10%);
border-color: darken($selected_bg_color, 10%);
}
}
}
2016-04-28 15:38:57 +00:00
value { color: alpha(currentColor, .4); }
2016-04-09 04:30:09 +00:00
marks {
2016-04-28 15:38:57 +00:00
color: alpha(currentColor, .4);
2016-04-09 04:30:09 +00:00
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
(bottom, bottom, top),
(top, left, right),
(bottom, right, left) {
&.#{$marks_class} {
margin-#{$marks_margin}: $_marks_distance;
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
}
}
}
&.fine-tune marks {
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
(bottom, bottom, top),
(top, left, right),
(bottom, right, left) {
&.#{$marks_class} {
margin-#{$marks_margin}: ($_marks_distance - 1px);
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 2px);
}
}
}
2016-04-09 04:30:09 +00:00
&.horizontal {
indicator {
min-height: $_marks_length;
min-width: 1px;
}
&.fine-tune indicator { min-height: ($_marks_length - 1px); }
}
2016-04-09 04:30:09 +00:00
&.vertical {
indicator {
min-height: 1px;
min-width: $_marks_length;
}
&.fine-tune indicator { min-width: ($_marks_length - 1px); }
}
&.color {
trough {
padding: 0;
border: 0;
background-image: none;
}
highlight, fill { margin: 0; }
&.horizontal {
padding: 0 0 6px 0;
trough {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
slider {
&:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
margin-bottom: 0;
margin-top: 0;
}
}
}
&.vertical {
&:dir(ltr) {
padding: 0 0 0 6px;
trough {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
slider {
&:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
margin-left: 0;
margin-right: 0;
}
}
}
&:dir(rtl) {
padding: 0 6px 0 0;
trough {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
slider {
&:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
margin-right: 0;
margin-left: 0;
}
}
}
}
}
2016-04-09 04:30:09 +00:00
}
}