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

@import "button";


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

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

    padding: $spacing;
    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 - 1px;

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

        &.image-button { padding: ($spacing + 1px) ($spacing - 1px) ($spacing + 1px) $spacing; }
    }

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

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

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

        -GtkWidget-window-dragging: true;
    }

    .menubar, menubar { -GtkToolbar-button-relief: normal; }
}

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

        border-style: none;

        &.inline-toolbar {
            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; }
            }
        }
    }

    headerbar {
        @include toolbar($titlebar_bg_color, $titlebar_fg_color);

        border-width: 0 0 1px;
        border-style: solid;

        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; } }
    }

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

    .titlebar {
        @include linear-gradient($titlebar_bg_color);

        border-radius: $roundness $roundness 0 0;
        color: mix($titlebar_fg_color, $titlebar_bg_color, .1);

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

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

        &.default-decoration {
            border: 0;
            box-shadow: none;
        }

        .tiled &, .maximized & { border-radius: 0; }

        .title { font-weight: bold; }

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

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

        button.titlebutton {
            padding: $spacing;
            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;
            }
        }
    }
}