150 lines
4.0 KiB
SCSS
150 lines
4.0 KiB
SCSS
@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;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
}
|