262 lines
9.7 KiB
SCSS
262 lines
9.7 KiB
SCSS
@import "button";
|
|
|
|
|
|
/**********
|
|
! Notebook
|
|
***********/
|
|
|
|
@include exports("notebook") {
|
|
|
|
$tab_border_width: 1px;
|
|
$tab_marker_width: 3px;
|
|
$max_single_tab_roundness: 6px;
|
|
$max_tab_bar_roundness: 13px;
|
|
$vertical_tab_spacing: $spacing + if($roundness <= $max_tab_bar_roundness,
|
|
if($roundness > 8px, $roundness, 8px),
|
|
8px
|
|
);
|
|
|
|
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: $spacing;
|
|
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;
|
|
}
|
|
|
|
|
|
// 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, .5); }
|
|
|
|
&:active { color: $fg_color; }
|
|
|
|
&:disabled { color: alpha($insensitive_fg_color, .3); }
|
|
}
|
|
|
|
> tabs > tab {
|
|
@include linear-gradient(alpha(mix($bg_color, $fg_color, .1), .7));
|
|
border-color: mix($borders_color, $insensitive_fg_color, .15);
|
|
color: alpha($fg_color, .8);
|
|
|
|
padding: $spacing $vertical_tab_spacing;
|
|
min-width: 20px;
|
|
min-height: 20px;
|
|
outline-offset: -4px;
|
|
border-width: $tab_border_width;
|
|
border-style: solid;
|
|
|
|
&:hover:not(:checked) {
|
|
//@include linear-gradient(mix($bg_color, $fg_color, .12));
|
|
@include linear-gradient(mix($bg_color, $fg_color, .04));
|
|
color: mix($fg_color, $insensitive_fg_color, .5);
|
|
}
|
|
|
|
&:checked, &:checked:hover {
|
|
background: $bg_color;
|
|
border-color: $borders_color;
|
|
color: $fg_color;
|
|
}
|
|
|
|
// close button
|
|
button.flat {
|
|
min-height: 22px;
|
|
min-width: 22px;
|
|
padding: 0;
|
|
color: mix($bg_color, $fg_color, .35);
|
|
|
|
&:hover {
|
|
@extend %undecorated_button;
|
|
color: lighten($error_color, 15%);
|
|
}
|
|
|
|
&:active, &:active:hover {
|
|
@extend %undecorated_button;
|
|
color: $selected_bg_color;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 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; }
|
|
|
|
@each $_pos, $_bpos in (top, bottom), (bottom, top), (right, left), (left, right) {
|
|
// sizing and borders
|
|
&.#{$_pos} {
|
|
padding-#{$_bpos}: 0;
|
|
|
|
> tabs > tab {
|
|
border-#{$_bpos}: none;
|
|
//border-#{$_pos}-color: $bg_color;
|
|
-gtk-outline-radius: 0;
|
|
|
|
@if $roundness <= $max_single_tab_roundness {
|
|
margin-#{$_pos}: $roundness;
|
|
}
|
|
// tab overlap
|
|
+ tab {
|
|
@if $_pos == top or $_pos == bottom {
|
|
margin-left: -1px;
|
|
} @else {
|
|
margin-top: -1px;
|
|
}
|
|
}
|
|
|
|
// tab border radius
|
|
&:first-child {
|
|
@if $roundness <= $max_tab_bar_roundness {
|
|
@if $_pos == top {
|
|
border-radius: $roundness 0 0;
|
|
-gtk-outline-radius: $roundness 0 0;
|
|
} @else if $_pos == bottom {
|
|
border-radius: 0 0 0 $roundness;
|
|
-gtk-outline-radius: 0 0 0 $roundness;
|
|
} @else if $_pos == left {
|
|
border-radius: $roundness 0 0;
|
|
-gtk-outline-radius: $roundness 0 0;
|
|
} @else if $_pos == right {
|
|
border-radius: 0 $roundness 0 0;
|
|
-gtk-outline-radius: 0 $roundness 0 0;
|
|
}
|
|
} @else {
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
@if $roundness <= $max_tab_bar_roundness {
|
|
@if $_pos == top {
|
|
border-radius: 0 $roundness 0 0;
|
|
-gtk-outline-radius: 0 $roundness 0 0;
|
|
} @else if $_pos == bottom {
|
|
border-radius: 0 0 $roundness;
|
|
-gtk-outline-radius: 0 0 $roundness;
|
|
} @else if $_pos == left {
|
|
border-radius: 0 0 0 $roundness;
|
|
-gtk-outline-radius: 0 0 0 $roundness;
|
|
} @else if $_pos == right {
|
|
border-radius: 0 0 $roundness;
|
|
-gtk-outline-radius: 0 0 $roundness;
|
|
}
|
|
} @else {
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
|
|
&:hover:not(:checked),
|
|
&:checked {
|
|
$compensate_tab_marker_padding: $tab_marker_width - $tab_border_width - if(
|
|
$roundness <= $max_single_tab_roundness, $roundness, 0
|
|
);
|
|
border-#{$_pos}-width: $tab_marker_width;
|
|
border-#{$_pos}-color: $selected_bg_color;
|
|
margin-#{$_pos}: 0;
|
|
|
|
@if $roundness <= $max_single_tab_roundness {
|
|
-gtk-outline-radius: $roundness;
|
|
@if $_pos == top {
|
|
border-radius: $roundness $roundness 0 0;
|
|
} @else if $_pos == bottom {
|
|
border-radius: 0 0 $roundness $roundness;
|
|
} @else if $_pos == left {
|
|
border-radius: $roundness 0 0 $roundness;
|
|
} @else if $_pos == right {
|
|
border-radius: 0 $roundness $roundness 0;
|
|
}
|
|
}
|
|
@if $_pos == top or $_pos == bottom {
|
|
padding-#{$_pos}: if($spacing > $compensate_tab_marker_padding, $spacing, $compensate_tab_marker_padding) - $compensate_tab_marker_padding;
|
|
} @else if $_pos == left or $_pos == right {
|
|
padding-#{$_pos}: if($vertical_tab_spacing > $compensate_tab_marker_padding, $vertical_tab_spacing, $compensate_tab_marker_padding) - $compensate_tab_marker_padding;
|
|
}
|
|
}
|
|
|
|
&:hover:not(:checked) {
|
|
border-#{$_pos}-color: mix($selected_bg_color, mix($bg_color, $fg_color, .2), .66);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
}
|