86 lines
1.7 KiB
SCSS
86 lines
1.7 KiB
SCSS
|
/*****************
|
||
|
|
* Progress bars *
|
||
|
|
*****************/
|
||
|
|
|
||
|
|
.progressbar,
|
||
|
|
progressbar {
|
||
|
|
// sizing
|
||
|
|
&.horizontal {
|
||
|
|
trough,
|
||
|
|
.trough,
|
||
|
|
progress { min-height: 2px; }
|
||
|
|
}
|
||
|
|
|
||
|
|
&.vertical {
|
||
|
|
trough,
|
||
|
|
.trough,
|
||
|
|
progress { min-width: 2px; }
|
||
|
|
}
|
||
|
|
|
||
|
|
&.horizontal progress { margin: 0 -1px; } // the progress node is positioned after the trough border
|
||
|
|
&.vertical progress { margin: -1px 0; } // this moves it over it.
|
||
|
|
|
||
|
|
|
||
|
|
// FIXME: insensitive state missing and some other state should be set probably
|
||
|
|
font-size: smaller;
|
||
|
|
color: transparentize($fg_color, 0.6);
|
||
|
|
|
||
|
|
&:backdrop {
|
||
|
|
box-shadow: none;
|
||
|
|
transition: $backdrop_transition;
|
||
|
|
}
|
||
|
|
|
||
|
|
.trough,
|
||
|
|
trough { @extend %scale_trough; }
|
||
|
|
|
||
|
|
&:backdrop .trough,trough { @extend %scale_trough:backdrop; } // looks like states are not passed to the trough component here
|
||
|
|
|
||
|
|
.progressbar,
|
||
|
|
progress {
|
||
|
|
@extend %scale_highlight;
|
||
|
|
|
||
|
|
border-radius: 1.5px;
|
||
|
|
|
||
|
|
&.left {
|
||
|
|
border-top-left-radius: 2px;
|
||
|
|
border-bottom-left-radius: 2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.right {
|
||
|
|
border-top-right-radius: 2px;
|
||
|
|
border-bottom-right-radius: 2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.top {
|
||
|
|
border-top-right-radius: 2px;
|
||
|
|
border-top-left-radius: 2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.bottom {
|
||
|
|
border-bottom-right-radius: 2px;
|
||
|
|
border-bottom-left-radius: 2px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&:backdrop progress { @extend %scale_highlight:backdrop; } // states not passed here as well
|
||
|
|
|
||
|
|
&.osd { // progressbar.osd used for epiphany page loading progress
|
||
|
|
min-width: 3px;
|
||
|
|
min-height: 3px;
|
||
|
|
background-color: transparent;
|
||
|
|
|
||
|
|
.trough,
|
||
|
|
trough {
|
||
|
|
border-style: none;
|
||
|
|
border-radius: 0;
|
||
|
|
background-color: transparent;
|
||
|
|
box-shadow: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.progress,
|
||
|
|
progress {
|
||
|
|
border-style: none;
|
||
|
|
border-radius: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|