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

/*****************
 ! Progress bars *
******************/

@include exports("progressbar") {
    progressbar {
        padding: 0;
        border-radius: $roundness;
        font-size: smaller;
        color: alpha($fg_color, .6);
        min-width: 6px;
        min-height: 6px;

        &.osd {
            min-height: 4px;
        }

        trough {
            border: 1px solid alpha(border_normal($bg_color), .5);
            background-color: shade($bg_color, 1.08);
            background-image: none;
        }
    }

    progressbar progress {
        @include linear-gradient($selected_bg_color);

        border-radius: 0;
        box-shadow: none;

        &.left {
            border-top-left-radius: $roundness;
            border-bottom-left-radius: $roundness;
        }

        &.right {
            border-top-right-radius: $roundness;
            border-bottom-right-radius: $roundness;
        }

        &.left.right { box-shadow: none; }

        &.vertical {
            @include linear-gradient($selected_bg_color, to right);

            &.bottom {
                border-bottom-left-radius: $roundness;
                border-bottom-right-radius: $roundness;
            }

            &.top {
                border-top-left-radius: $roundness;
                border-top-right-radius: $roundness;
            }
        }
    }

    levelbar {
        block {
            min-width: 34px;
            min-height: 3px;
        }

        &.vertical block {
            min-width: 3px;
            min-height: 34px;
        }

        &:backdrop { transition: 200ms ease-out; }

        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 { margin-right: 1px; }

        &.vertical.discrete { margin-bottom: 1px; }

        block:not(.empty) {
            @include linear-gradient($selected_bg_color);

            border-color: transparent;
            border-radius: 0;
        }

        block {
            @include linear-gradient($selected_bg_color);

            // FIXME: it would be nice to set make fill blocks bigger, but we'd need
            // :nth-child working on discrete indicators
            border-color: transparent;
            border-radius: 0;

            &.low {
                background-color: $warning_color;
                border-color: transparent;
            }

            &.high {
                background-color: $selected_bg_color;
                border-color: transparent;
            }

            &.full {
                background-color: $success_color;
                border-color: transparent;
            }

            &.empty {
                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(0.25, 0.46, 0.45, 0.94);
        $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; }
        }
        &.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;
        }

        // 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%));

            outline-offset: 2px;
            -gtk-outline-radius: 4.5px;

            border-radius: 2.5px;
            background-color: $_scale_trough_bg;

            &:disabled { background-color: transparentize($_scale_trough_bg, .45); }

            //OSD troughs
            .osd & {
                background-color: lighten($osd_bg, 7%);

                highlight {
                    background-color: $selected_bg_color;
                }
            }

            // Troughs in selected list-rows and infobars
            row:selected &,
            infobar & {
                background-color: transparentize($black, .8);

                highlight {
                    background-color: $selected_fg_color;

                    &:disabled { background-color: mix($selected_fg_color, $selected_bg_color, .55); }
                }

                &:disabled { background-color: transparentize($black, .9); }
            }
        }

        // The colored part of trough
        highlight {
            border-radius: 2.5px;
            background-color: $selected_bg_color;

            &:disabled { background-color: transparentize($selected_bg_color, .45); }
        }

        // 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;
            background-color: transparentize($selected_bg_color, .5);

            &:disabled { background-color: transparent; }
        }

        slider {
            $_slider_border: if($variant == 'light', transparentize(shade($button_border, .25), .5), darken($button_border, 2%));

            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);
                border-color: transparentize($_slider_border, .2);
            }

            // Selected list-row and infobar sliders
            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);
                }
                &:active {
                    background-color: mix($selected_fg_color, $selected_bg_color, .5);
                    border-color: mix($selected_fg_color, $selected_bg_color, .5);
                }
                &:disabled{
                    background-color: mix($selected_fg_color, $selected_bg_color, .55);
                    border-color: mix($selected_fg_color, $selected_bg_color, .55);
                }
            }

            // 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%);
                }
            }
        }

        value { color: alpha(currentColor, .4); }

        marks {
            color: alpha(currentColor, .4);

            @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);
                }
            }
        }
        &.horizontal {
            indicator {
                min-height: $_marks_length;
                min-width: 1px;
            }

            &.fine-tune indicator { min-height: ($_marks_length - 1px); }
        }
        &.vertical {
            indicator {
                min-height: 1px;
                min-width: $_marks_length;
            }

            &.fine-tune indicator { min-width: ($_marks_length - 1px); }
        }
    }
}