mabox-themes/Mabox-superdesk/gtk-3.20/scss/widgets/_notebook.scss

150 lines
4.0 KiB
SCSS
Raw Normal View History

2018-12-18 23:18:38 +01:00
@import "button";
/**********
! Notebook
***********/
@include exports("notebook") {
notebook {
padding: 0;
&.frame {
border: 1px solid $borders_color;
> header {
// ugly hack to hide the borders around the header
margin: -1px;
&.top { margin-bottom: 0; }
&.bottom { margin-top: 0; }
&.left { margin-right: 0; }
&.right { margin-left: 0; }
&.top, &.bottom { padding-left: 0; padding-right: 0; }
&.left, &.right { padding-top: 0; padding-bottom: 0; }
}
}
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
background-color: $bg_color;
}
> header {
padding: 2px;
background-color: $bg_color;
&.top { box-shadow: inset 0 -1px $borders_color; }
&.bottom { box-shadow: inset 0 1px $borders_color; }
&.right { box-shadow: inset 1px 0 $borders_color; }
&.left { box-shadow: inset -1px 0 $borders_color; }
@each $_pos, $_bpos in (top, bottom), (bottom, top), (right, left), (left, right) {
// sizing and borders
&.#{$_pos} {
padding-#{$_bpos}: 0;
> tabs > tab {
padding: 2px 10px;
min-width: 20px;
min-height: 20px;
outline-offset: -4px;
border: 1px solid transparent;
border-#{$_bpos}: none;
border-#{$_pos}-width: 3px;
&:checked {
border-#{$_pos}-color: $selected_bg_color;
}
// tab overlap
+ tab {
@if $_pos==top or $_pos==bottom { margin-left: -1px; }
@else { margin-top: -1px; }
}
// tab border radius
@if $_pos==top { border-radius: 1px 1px 0 0; }
@else if $_pos==bottom { border-radius: 0 0 1px 1px; }
@else if $_pos==left { border-radius: 1px 0 0 1px; }
@else if $_pos==right { border-radius: 0 1px 1px 0; }
}
}
}
// overflow arrows
&.top, &.bottom {
> tabs > arrow.up {
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
&:last-child { margin-left: 2px; }
}
> tabs > arrow.down {
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
&:first-child { margin-right: 2px; }
}
}
&.left, &.right {
> tabs > arrow.up {
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
&:last-child { margin-top: 2px; }
}
> tabs > arrow.down {
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
&:first-child { margin-bottom: 2px; }
}
}
> tabs > arrow {
@extend %close_button;
color: $insensitive_fg_color;
&:hover { color: mix($fg_color, $insensitive_fg_color, 0.5); }
&:active { color: $fg_color; }
&:disabled { color: alpha($insensitive_fg_color,0.3); }
}
// tab colors
&.top > tabs > tab:hover:not(:checked) { box-shadow: inset 0 -1px $borders_color; }
&.bottom > tabs > tab:hover:not(:checked) { box-shadow: inset 0 1px $borders_color; }
&.left > tabs > tab:hover:not(:checked) { box-shadow: inset -1px 0 $borders_color; }
&.right > tabs > tab:hover:not(:checked) { box-shadow: inset 1px 0 $borders_color; }
> tabs > tab {
color: alpha($fg_color, 0.8);
background-color: alpha(mix($bg_color, $fg_color, .1), 0.7);
&:hover:not(:checked) {
color: mix($fg_color, $insensitive_fg_color, 0.5);
background-color: transparentize($base_color, 0.5);
border-color: $borders_color;
}
&:checked {
border-color: $borders_color;
color: $fg_color;
background-color: $bg_color;
}
// close button
button.flat {
min-height: 22px;
min-width: 16px;
padding: 0;
color: mix($bg_color, $fg_color, 0.35);
&:hover {
@extend %undecorated_button;
color: lighten(red, 15%);
}
&:active, &:active:hover {
@extend %undecorated_button;
color: $selected_bg_color;
}
}
}
}
}
}