kirbylife
/
numix-gtk-theme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Gtk-3.22] Use box-shadow to draw border on Notebook tab 

We were drawing border on both notebook tab
and on widget > box, which results a double border on tab. The situation
worse in case of tiling gtk3 apps like tilix which uses can use horizontal
notebook inside vertical notebook.
pull/663/head
Khurshid Alam 2017-03-13 22:38:18 +05:30
parent f25d7e0435
commit d99f46c888
1 changed files with 109 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

228
src/gtk-3.20/scss/widgets/_notebook.scss
View File

@ -145,28 +145,21 @@
tab { tab {
padding: 0; padding: 0;
border-style: solid;
border-width: 1px; // for reorderable tabs
border-color: transparent; //
background-image: none;
box-shadow: none;
outline: none; outline: none;
> box, > box,
> label, > label,
> widget > box { > widget > box {
padding: $spacing $spacing * 2; // top/bottom | left/right padding: ($spacing + 2px) $spacing * 2; // top/bottom | left/right
border-width: 2px; box-shadow: 1px 1px transparent; //duplicate shadows used for transition?
border-style: solid; transition: box-shadow .2s linear;
border-color: transparent;
transition: border-color .2s linear;
} }
&.reorderable-page { &.reorderable-page {
> box, > box,
> label, > label,
> widget > box { > widget > box {
padding: $spacing $spacing * 2; // top | right | bottom | left padding: ($spacing + 2px) $spacing * 2; // top | right | bottom | left
} }
} }
@ -217,89 +210,29 @@
} }
} }
&.top tab,
&.bottom tab {
&:hover {
&:not(:first-child):not(:last-child):not(:only-child) {
box-shadow: 1px 0 1px shade($base_color, .85), -1px 0 1px shade($base_color, .85);
}
&:last-child:not(:only-child) {
box-shadow: -1px 0 1px shade($base_color, .85);
}
&:first-child:not(:only-child) {
box-shadow: 1px 0 1px shade($base_color, .85);
}
}
&:checked {
&:not(:first-child):not(:last-child):not(:only-child) {
box-shadow: 1px 0 1px shade($base_color, .8), -1px 0 1px shade($base_color, .8);
}
&:last-child:not(:only-child) {
box-shadow: -1px 0 1px shade($base_color, .8);
}
&:first-child:not(:only-child) {
box-shadow: 1px 0 1px shade($base_color, .8);
}
}
}
&.right tab,
&.left tab {
&:hover {
&:not(:first-child):not(:last-child):not(:only-child) {
box-shadow: 0 1px 1px shade($base_color, .85), 0 -1px 1px shade($base_color, .85);
}
&:last-child:not(:only-child) {
box-shadow: 0 -1px 1px shade($base_color, .85);
}
&:first-child:not(:only-child) {
box-shadow: 0 1px 1px shade($base_color, .85);
}
}
&:checked {
&:not(:first-child):not(:last-child):not(:only-child) {
box-shadow: 0 1px 1px shade($base_color, .8), 0 -1px 1px shade($base_color, .8);
}
&:last-child:not(:only-child) {
box-shadow: 0 -1px 1px shade($base_color, .8);
}
&:first-child:not(:only-child) {
box-shadow: 0 1px 1px shade($base_color, .8);
}
}
}
&.top tab { &.top tab {
border-style: solid; box-shadow: inset 0 -1px $borders_color;
border-color: $borders_color; transition: box-shadow .2s ease-out;
border-width: 0;
border-bottom-width: 1px;
transition: border-bottom-color .2s linear;
&:hover { &:hover {
outline: none; outline: none;
&:not(:first-child):not(:last-child):not(:only-child) {
box-shadow: 1px 0 1px shade($base_color, .85), -1px 0 1px shade($base_color, .85), inset 0 -1px $borders_color;
}
&:last-child:not(:only-child) {
box-shadow: -1px 0 1px shade($base_color, .85), inset 0 -1px $borders_color;
}
&:first-child:not(:only-child) {
box-shadow: 1px 0 1px shade($base_color, .85), inset 0 -1px $borders_color;
}
} }
&:checked { &:checked {
border-bottom-color: $selected_bg_color;
outline: none; outline: none;
> box,
> label,
> widget > box {
border-bottom-color: $selected_bg_color;
}
label { label {
margin-bottom: 0; margin-bottom: 0;
color: $selected_bg_color; color: $selected_bg_color;
@ -308,30 +241,46 @@
&:hover { &:hover {
background-color: mix($bg_color, $base_color, .6); background-color: mix($bg_color, $base_color, .6);
} }
&:not(:first-child):not(:last-child):not(:only-child) {
box-shadow: 1px 0 1px shade($base_color, .8), -1px 0 1px shade($base_color, .8), inset 0 -2px $selected_bg_color;
}
&:last-child:not(:only-child) {
box-shadow: -1px 0 1px shade($base_color, .8), inset 0 -2px $selected_bg_color;
}
&:first-child:not(:only-child) {
box-shadow: 1px 0 1px shade($base_color, .8), inset 0 -2px $selected_bg_color;
}
} }
} }
&.right tab { &.right tab {
border-style: solid; box-shadow: inset 1px 0 $borders_color;
border-color: $borders_color; transition: box-shadow .3s ease-out;
border-width: 0;
border-left-width: 1px;
transition: border-left-color .3s ease-out;
&:hover { &:hover {
outline: none; outline: none;
&:not(:first-child):not(:last-child):not(:only-child) {
box-shadow: 0 1px 1px shade($base_color, .85), 0 -1px 1px shade($base_color, .85), inset 1px 0 $borders_color;
}
&:last-child:not(:only-child) {
box-shadow: 0 -1px 1px shade($base_color, .85), inset 1px 0 $borders_color;
}
&:first-child:not(:only-child) {
box-shadow: 0 1px 1px shade($base_color, .85), inset 1px 0 $borders_color;
}
} }
&:checked { &:checked {
border-left-color: $selected_bg_color;
outline: none; outline: none;
> box,
> label,
> widget > box {
border-left-color: $selected_bg_color;
}
label { label {
margin-left: 0; margin-left: 0;
color: $selected_bg_color; color: $selected_bg_color;
@ -340,30 +289,43 @@
&:hover { &:hover {
background-color: mix($bg_color, $base_color, .6); background-color: mix($bg_color, $base_color, .6);
} }
&:not(:first-child):not(:last-child):not(:only-child) {
box-shadow: 0 1px 1px shade($base_color, .8), 0 -1px 1px shade($base_color, .8), inset 2px 0 $selected_bg_color;
}
&:last-child:not(:only-child) {
box-shadow: 0 -1px 1px shade($base_color, .8), inset 2px 0 $selected_bg_color;
}
&:first-child:not(:only-child) {
box-shadow: 0 1px 1px shade($base_color, .8), inset 2px 0 $selected_bg_color;
}
} }
} }
&.bottom tab { &.bottom tab {
border-style: solid; box-shadow: inset 0 1px $borders_color;
border-color: $borders_color; transition: box-shadow .3s ease-out;
border-width: 0;
border-top-width: 1px;
transition: border-top-color .3s ease-out;
&:hover { &:hover {
outline: none; outline: none;
&:not(:first-child):not(:last-child):not(:only-child) {
box-shadow: 1px 0 1px shade($base_color, .85), -1px 0 1px shade($base_color, .85), inset 0 1px $borders_color;
}
&:last-child:not(:only-child) {
box-shadow: -1px 0 1px shade($base_color, .85), inset 0 1px $borders_color;
}
&:first-child:not(:only-child) {
box-shadow: 1px 0 1px shade($base_color, .85), inset 0 1px $borders_color;
}
} }
&:checked { &:checked {
border-top-color: $selected_bg_color;
outline: none; outline: none;
> box,
> label,
> widget > box {
border-top-color: $selected_bg_color;
}
label { label {
margin-top: 0; margin-top: 0;
color: $selected_bg_color; color: $selected_bg_color;
@ -372,30 +334,44 @@
&:hover { &:hover {
background-color: mix($bg_color, $base_color, .6); background-color: mix($bg_color, $base_color, .6);
} }
&:not(:first-child):not(:last-child):not(:only-child) {
box-shadow: 1px 0 1px shade($base_color, .8), -1px 0 1px shade($base_color, .8), inset 0 2px $selected_bg_color;
}
&:last-child:not(:only-child) {
box-shadow: -1px 0 1px shade($base_color, .8), inset 0 2px $selected_bg_color;
}
&:first-child:not(:only-child) {
box-shadow: 1px 0 1px shade($base_color, .8), inset 0 2px $selected_bg_color;
}
} }
} }
&.left tab { &.left tab {
border-style: solid; box-shadow: inset -1px 0 $borders_color;
border-color: $borders_color; transition: box-shadow .3s ease-out;
border-width: 0;
border-right-width: 1px;
transition: border-right-color .3s ease-out;
&:hover { &:hover {
outline: none; outline: none;
&:not(:first-child):not(:last-child):not(:only-child) {
box-shadow: 0 1px 1px shade($base_color, .85), 0 -1px 1px shade($base_color, .85), inset -1px 0 $borders_color;
}
&:last-child:not(:only-child) {
box-shadow: 0 -1px 1px shade($base_color, .85), inset -1px 0 $borders_color;
}
&:first-child:not(:only-child) {
box-shadow: 0 1px 1px shade($base_color, .85), inset -1px 0 $borders_color;
}
} }
&:checked { &:checked {
border-right-color: $selected_bg_color;
outline: none; outline: none;
> box,
> label,
> widget > box {
border-right-color: $selected_bg_color;
}
label { label {
margin-right: 0; margin-right: 0;
color: $selected_bg_color; color: $selected_bg_color;
@ -404,6 +380,18 @@
&:hover { &:hover {
background-color: mix($bg_color, $base_color, .6); background-color: mix($bg_color, $base_color, .6);
} }
&:not(:first-child):not(:last-child):not(:only-child) {
box-shadow: 0 1px 1px shade($base_color, .8), 0 -1px 1px shade($base_color, .8), inset -2px 0 $selected_bg_color;
}
&:last-child:not(:only-child) {
box-shadow: 0 -1px 1px shade($base_color, .8), inset -2px 0 $selected_bg_color;
}
&:first-child:not(:only-child) {
box-shadow: 0 1px 1px shade($base_color, .8), inset -2px 0 $selected_bg_color;
}
} }
} }
} }