Adwaita: correctly style arrows wrt tab position

This commit is contained in:
Lapo Calamandrei 2016-02-15 18:39:50 +01:00
parent bc3b399809
commit d26801c923
3 changed files with 100 additions and 33 deletions

View File

@ -1854,24 +1854,61 @@ notebook {
} }
} }
&.top > tabs > arrow {
@extend %notebook_vert_arrows;
border-top-style: none;
}
&.bottom > tabs > arrow {
@extend %notebook_vert_arrows;
border-bottom-style: none;
}
@at-root %notebook_vert_arrows {
margin-left: -5px;
margin-right: -5px;
padding-left: 4px;
padding-right: 4px;
&.down { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
&.up { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
}
&.left > tabs > arrow {
@extend %notebook_horz_arrows;
border-left-style: none;
}
&.right > tabs > arrow {
@extend %notebook_horz_arrows;
border-right-style: none;
}
@at-root %notebook_horz_arrows {
margin-top: -5px;
margin-bottom: -5px;
padding-top: 4px;
padding-bottom: 4px;
&.down { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
&.up { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
}
> tabs > arrow { > tabs > arrow {
@extend %button_basic; @extend %button_basic;
@extend button.flat; @extend button.flat;
min-height: 16px; min-height: 16px;
min-width: 16px; min-width: 16px;
margin-left: -5px;
margin-right: -5px;
padding-left: 4px;
padding-right: 4px;
border-top-style: none;
border-radius: 0; border-radius: 0;
&:hover:not(:active):not(:backdrop) { &:hover:not(:active):not(:backdrop) {
background-clip: padding-box;
background-image: none; background-image: none;
background-color: transparentize(white, 0.7); background-color: transparentize(white, 0.7);
border-left-color: transparent; border-color: transparent;
border-right-color: transparent;
box-shadow: none; box-shadow: none;
} }
@ -1880,10 +1917,6 @@ notebook {
background-color: transparent; background-color: transparent;
border-color: transparent; border-color: transparent;
} }
&.down { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
&.up { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
} }
tab { tab {

View File

@ -2192,29 +2192,46 @@ notebook > header {
box-shadow: none; } box-shadow: none; }
notebook > header.right > tabs > tab:active { notebook > header.right > tabs > tab:active {
box-shadow: inset 3px 0 #215d9c; } box-shadow: inset 3px 0 #215d9c; }
notebook > header > tabs > arrow { notebook > header.top > tabs > arrow {
min-height: 16px; border-top-style: none; }
min-width: 16px; notebook > header.bottom > tabs > arrow {
border-bottom-style: none; }
notebook > header.top > tabs > arrow, notebook > header.bottom > tabs > arrow {
margin-left: -5px; margin-left: -5px;
margin-right: -5px; margin-right: -5px;
padding-left: 4px; padding-left: 4px;
padding-right: 4px; padding-right: 4px; }
border-top-style: none; notebook > header.top > tabs > arrow.down, notebook > header.bottom > tabs > arrow.down {
-gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
notebook > header.top > tabs > arrow.up, notebook > header.bottom > tabs > arrow.up {
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
notebook > header.left > tabs > arrow {
border-left-style: none; }
notebook > header.right > tabs > arrow {
border-right-style: none; }
notebook > header.left > tabs > arrow, notebook > header.right > tabs > arrow {
margin-top: -5px;
margin-bottom: -5px;
padding-top: 4px;
padding-bottom: 4px; }
notebook > header.left > tabs > arrow.down, notebook > header.right > tabs > arrow.down {
-gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); }
notebook > header.left > tabs > arrow.up, notebook > header.right > tabs > arrow.up {
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
notebook > header > tabs > arrow {
min-height: 16px;
min-width: 16px;
border-radius: 0; } border-radius: 0; }
notebook > header > tabs > arrow:hover:not(:active):not(:backdrop) { notebook > header > tabs > arrow:hover:not(:active):not(:backdrop) {
background-clip: padding-box;
background-image: none; background-image: none;
background-color: rgba(255, 255, 255, 0.3); background-color: rgba(255, 255, 255, 0.3);
border-left-color: transparent; border-color: transparent;
border-right-color: transparent;
box-shadow: none; } box-shadow: none; }
notebook > header > tabs > arrow:disabled { notebook > header > tabs > arrow:disabled {
background-image: none; background-image: none;
background-color: transparent; background-color: transparent;
border-color: transparent; } border-color: transparent; }
notebook > header > tabs > arrow.down {
-gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
notebook > header > tabs > arrow.up {
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
notebook > header tab { notebook > header tab {
font-weight: bold; font-weight: bold;
min-height: 36px; min-height: 36px;

View File

@ -2202,29 +2202,46 @@ notebook > header {
box-shadow: none; } box-shadow: none; }
notebook > header.right > tabs > tab:active { notebook > header.right > tabs > tab:active {
box-shadow: inset 3px 0 #4a90d9; } box-shadow: inset 3px 0 #4a90d9; }
notebook > header > tabs > arrow { notebook > header.top > tabs > arrow {
min-height: 16px; border-top-style: none; }
min-width: 16px; notebook > header.bottom > tabs > arrow {
border-bottom-style: none; }
notebook > header.top > tabs > arrow, notebook > header.bottom > tabs > arrow {
margin-left: -5px; margin-left: -5px;
margin-right: -5px; margin-right: -5px;
padding-left: 4px; padding-left: 4px;
padding-right: 4px; padding-right: 4px; }
border-top-style: none; notebook > header.top > tabs > arrow.down, notebook > header.bottom > tabs > arrow.down {
-gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
notebook > header.top > tabs > arrow.up, notebook > header.bottom > tabs > arrow.up {
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
notebook > header.left > tabs > arrow {
border-left-style: none; }
notebook > header.right > tabs > arrow {
border-right-style: none; }
notebook > header.left > tabs > arrow, notebook > header.right > tabs > arrow {
margin-top: -5px;
margin-bottom: -5px;
padding-top: 4px;
padding-bottom: 4px; }
notebook > header.left > tabs > arrow.down, notebook > header.right > tabs > arrow.down {
-gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); }
notebook > header.left > tabs > arrow.up, notebook > header.right > tabs > arrow.up {
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
notebook > header > tabs > arrow {
min-height: 16px;
min-width: 16px;
border-radius: 0; } border-radius: 0; }
notebook > header > tabs > arrow:hover:not(:active):not(:backdrop) { notebook > header > tabs > arrow:hover:not(:active):not(:backdrop) {
background-clip: padding-box;
background-image: none; background-image: none;
background-color: rgba(255, 255, 255, 0.3); background-color: rgba(255, 255, 255, 0.3);
border-left-color: transparent; border-color: transparent;
border-right-color: transparent;
box-shadow: none; } box-shadow: none; }
notebook > header > tabs > arrow:disabled { notebook > header > tabs > arrow:disabled {
background-image: none; background-image: none;
background-color: transparent; background-color: transparent;
border-color: transparent; } border-color: transparent; }
notebook > header > tabs > arrow.down {
-gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
notebook > header > tabs > arrow.up {
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
notebook > header tab { notebook > header tab {
font-weight: bold; font-weight: bold;
min-height: 36px; min-height: 36px;