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

@import "button";


/*********
 ! Toolbar
**********/

@mixin toolbar($bg, $fg) {
    @include linear-gradient($bg);
    @include border($bg);

    color: $fg;

    &:disabled {
        @include linear-gradient(shade($bg, .9));

        color: mix($fg, $bg, .5);
    }

    .title {
        font: bold;
        padding: 0 ($spacing * 2);
    }

    .subtitle {
        font: smaller;
        padding: 0 ($spacing * 2);
    }

    button { @include button($bg, $fg); }

    .linked > button { @include linked_button($bg); }

    combobox, button {
        padding: $spacing;

        &.text-button { padding: $spacing; }

        &.image-button { padding: $spacing; }
    }

    separator {
        &, &:disabled {
            color: shade($bg, ($contrast - .2));
            border-color: currentColor;

            -GtkWidget-window-dragging: true;
        }
    }
}

@mixin inline-toolbar($bg, $fg) {
    background-image: none;
    border-width: 0 1px 1px;
    border-style: solid;
    border-color: $borders_color;
    background-color: mix($borders_color, $bg_color, .7);

    &:backdrop {
        border-color: $backdrop_borders_color;
        background-color: $backdrop_dark_fill;
        transition: 200ms ease-out;
    }

    button { @include button($toolbar_bg_color, $toolbar_fg_color); }

    toolbutton,
    toolbutton:backdrop {
        > button.flat { @extend %linked_middle; }

        &:first-child > button.flat { @extend %linked_button:first-child; }

        &:last-child > button.flat { @extend %linked_button:last-child; }

        &:only-child > button.flat { @extend %linked_button:only-child; }
    }
}

@include exports("toolbar_extends") {
    %toolbar {
        padding: $spacing - 1px;
        border-style: none;

        // toolbar separators
        &.horizontal separator { margin: 0 ($spacing + 2px) 1px; }

        &.vertical separator { margin: ($spacing + 2px) 1px ($spacing + 2px) 0; }
    }

    %headerbar {
        border-width: 0 0 1px;
        border-style: solid;

        // add vertical margins to common widget on the headerbar to avoid them spanning the whole height
        entry,
        spinbutton,
        separator,
        switch,
        button { // Size height
            margin-top: $spacing + 3px;
            margin-bottom: $spacing + 3px;
        }

        switch { // Size height
            margin-top: $spacing + 1px;
            margin-bottom: $spacing + 1px;
        }

        window:not(.tiled):not(.maximized) separator:first-child + &, // tackles the paned container case
        window:not(.tiled):not(.maximized) &:first-child { &:backdrop, & { border-top-left-radius: $roundness; } }

        window:not(.tiled):not(.maximized) &:last-child { &:backdrop, & { border-top-right-radius: $roundness; } }
    }

    %titlebar { // Default headerbar and titlebar code.
        @include toolbar($titlebar_bg_color, $titlebar_fg_color);
        @include linear-gradient($titlebar_bg_color);

        border-radius: $roundness $roundness 0 0;
        color: mix($titlebar_fg_color, $titlebar_bg_color, .1);
        padding: 0 $spacing;
        min-height: 42px;

        &:backdrop {
            @include linear-gradient($titlebar_bg_color);

            color: mix($titlebar_fg_color, $titlebar_bg_color, .6);
            text-shadow: none;
        }

        &.default-decoration { // Default titlebar (old metacity)
            min-height: 24px;
            box-shadow: none;
            border: 0;

            button.titlebutton {
                min-height: 16px;
                min-width: 16px;
                margin: 0;
                padding: 0;
            }
        }

        .tiled &,
        .maximized & { &:backdrop, & { border-radius: 0; } } // squared corners when the window is maximized or tiled

        .title { font-weight: bold; }

        separator.titlebutton { margin-left: $spacing; }

        button.titlebutton + separator.titlebutton {
            margin-left: 0;
            margin-right: $spacing;
        }

        button.titlebutton {
            border: 0;
            background-image: none;
            background-color: transparent;
            color: mix($titlebar_fg_color, $titlebar_bg_color, .1);
            box-shadow: none;

            &:hover, &:hover:focus {
                background-image: none;
                background-color: transparent;
                color: $selected_bg_color;
                box-shadow: none;
            }

            &:active, &:active:hover {
                background-image: none;
                background-color: transparent;
                color: shade($selected_bg_color, .9);
                box-shadow: none;
            }

            &:backdrop {
                background: none;
                color: mix($titlebar_fg_color, $titlebar_bg_color, .6);
                -gtk-icon-shadow: none;
            }
        }
    }
}

@include exports("toolbar") {
    toolbar {
        @include toolbar($toolbar_bg_color, $toolbar_fg_color);

        @extend %toolbar;

        &.inline-toolbar { @include inline-toolbar($toolbar_bg_color, $toolbar_fg_color); }
    }

    headerbar {
        @extend %titlebar;
        @extend %headerbar;
    }

    .titlebar:not(headerbar) {
        window.csd > & {
            // in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
            padding: 0;
            background-color: transparent;
            background-image: none;
            border-style: none;
            border-color: transparent;
            box-shadow: none;
        }

        > separator { background-color: shade($titlebar_bg_color, .88); }  // $borders_color

        @extend %titlebar;
    }

    .background:not(.tiled):not(.maximized) .titlebar {
        &:backdrop, & {
            border-top-left-radius: $roundness;
            border-top-right-radius: $roundness;
        }
    }
}