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

223 lines
5.8 KiB
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;
}
}
}