From 4949c613e78becb70af422e4d919aa32697a5b04 Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Fri, 19 Feb 2016 11:06:17 +0100 Subject: sync with master --- common/gtk-3.0/3.20/sass/_common.scss | 294 ++++++++++------------------------ 1 file changed, 86 insertions(+), 208 deletions(-) (limited to 'common/gtk-3.0/3.20/sass/_common.scss') diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index 393f206..05b7bf9 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -271,6 +271,12 @@ entry { &:focus { @include entry(osd-focus); } &:disabled { @include entry(osd-insensitive); } } + + .linked:not(.vertical) > &, + .linked:not(.vertical) > &:focus { @extend %linked; } + + .linked.vertical > &, + .linked.vertical > &:focus { @extend %linked_vertical; } } // @@ -388,6 +394,9 @@ button { &:active, &:checked { @include button(osd-active); } } } + .osd .linked:not(.vertical):not(.path-bar) > &:hover:not(:checked):not(:active):not(:only-child), + .osd .linked:not(.vertical):not(.path-bar) > &:hover:not(:checked):not(:active) + &:not(:checked):not(:active) { box-shadow: none; } + // Suggested and Destructive Action buttons @each $b_type, $b_color in (suggested-action, $suggested_color), (destructive-action, $destructive_color) { @@ -493,7 +502,6 @@ button { .linked:not(.vertical) > &:active, .linked:not(.vertical) > &:checked { @extend %linked; - @extend %linked_button; } .linked.vertical > &, @@ -501,7 +509,6 @@ button { .linked.vertical > &:active, .linked.vertical > &:checked { @extend %linked_vertical; - @extend %linked_vertical_button; } } @@ -527,131 +534,73 @@ toolbar.inline-toolbar toolbutton { } // Some crazy linking stuff +@mixin linking_rules($a:0.7, $var:$variant, $vert:'false', $entry_rules:'true', $button_rules:'true', + $e_border:$entry_border, $b_border:$button_border) { -// horizontal -.linked:not(.vertical):not(.pathbar) { - > entry { @extend %linked; } - - - > entry + entry { border-left-color: transparentize($entry_border, 0.7); } - - > entry.error + entry, - > entry + entry.error { border-left-color: if($variant=='light', $error_color, transparentize($entry_border, 0.7)); } - - > entry.warning + entry, - > entry + entry.warning { border-left-color: if($variant=='light', $warning_color, transparentize($entry_border, 0.7)); } - - > entry.error + entry.warning { border-left-color: if($variant=='light', $error_color, transparentize($entry_border, 0.7));} + $_border: if($vert=='false', left, top); + @if $entry_rules=='true' { + > entry + entry { border-#{$_border}-color: transparentize($e_border, $a); } - > entry + entry:focus:not(:last-child), - > entry + entry:focus:last-child { border-left-color: if($variant=='light', $selected_bg_color, $entry_border); } - - > entry + entry.warning:focus:not(:last-child), - > entry + entry.warning:focus:last-child { border-left-color: if($variant=='light', $warning_color, $entry_border); } - - > entry + entry.error:focus:not(:last-child), - > entry + entry.error:focus:last-child { border-left-color: if($variant=='light', $error_color, $entry_border); } - + > entry.error + entry, + > entry + entry.error { border-#{$_border}-color: if($var=='light', $error_color, transparentize($e_border, $a)); } - > entry + button, - > entry + button:hover, - > entry + button:active, - > entry + button:checked, - > entry + button:disabled { border-left-style: solid; } + > entry.warning + entry, + > entry + entry.warning { border-#{$_border}-color: if($var=='light', $warning_color, transparentize($e_border, $a)); } + > entry.error + entry.warning { border-#{$_border}-color: if($var=='light', $error_color, transparentize($e_border, $a));} - > entry:focus:not(:only-child) + entry, - > entry:focus:not(:only-child) + button, - > entry:focus:not(:only-child) + combobox > button.combo { border-left-color: if($variant=='light', $selected_bg_color, $entry_border); } + @each $e_type, $e_color in ('',$selected_bg_color), + ('.warning', $warning_color), + ('.error', $error_color) { - > entry.warning:focus:not(:only-child) + entry, - > entry.warning:focus:not(:only-child) + button, - > entry.warning:focus:not(:only-child) + combobox > button.combo { border-left-color: if($variant=='light', $warning_color, $entry_border); } + > entry + entry#{$e_type}:focus:not(:last-child), + > entry + entry#{$e_type}:focus:last-child { border-#{$_border}-color: if($var=='light', $e_color, $e_border); } - > entry.error:focus:not(:only-child) + entry, - > entry.error:focus:not(:only-child) + button, - > entry.error:focus:not(:only-child) + combobox > button.combo { border-left-color: if($variant=='light', $error_color, $entry_border); } + > entry#{$e_type}:focus:not(:only-child) { + + entry, + + button, + + combobox > button.combo { border-#{$_border}-color: if($var=='light', $e_color, $e_border); } + } + } + > button:checked + entry { border-#{$_border}-color: if($var=='light', $selected_bg_color, $e_border); } + } + @if $button_rules=='true' { + > button + button { border-#{$_border}-style: none; } + > button:hover:not(:checked):not(:active):not(:only-child), + > button:hover:not(:checked):not(:active) + button:not(:checked):not(:active) { box-shadow: inset if($vert=='false', 1px 0, 0 1px) $b_border; } - > button:hover:not(:checked):not(:active):not(:only-child), - > button:hover:not(:checked):not(:active) + button:not(:checked):not(:active) { box-shadow: -1px 0 $button_border; } - > button:first-child:hover:not(:checked):not(:active) { box-shadow: none; } - > button:checked + button:not(:checked):not(:active):hover { box-shadow: none; } - > button:checked + entry { border-left-color: if($variant=='light', $selected_bg_color, $entry_border); } - > entry + button:not(:checked):not(:active):not(:only-child):hover { box-shadow: none; } + > button:first-child:hover:not(:checked):not(:active), + > button:checked + button:not(:checked):not(:active):hover, + > entry + button:not(:checked):not(:active):not(:only-child):hover { box-shadow: none; } + } } -// special case for path-bars -.linked:not(.vertical).path-bar { +// special case, because path-bars are bugged +@mixin pathbar_linking_rules($sep_color:if($variant=='light', transparentize($button_border, 0.6), transparentize($button_border, 0.5))) { -$_linked_separator_color: if($variant=='light', transparentize($button_border, 0.6), transparentize($button_border, 0.5)); + > button + button { border-left-style: none; } - > button:hover:not(:checked):not(:active):not(:only-child) { + > button:hover:not(:checked):not(:active):not(:only-child) { - &:hover { - box-shadow: inset 1px 0 $_linked_separator_color, - inset -1px 0 $_linked_separator_color; + &:hover { + box-shadow: inset 1px 0 $sep_color, + inset -1px 0 $sep_color; + } + &:first-child:hover { box-shadow: inset -1px 0 $sep_color; } + &:last-child:hover { box-shadow: inset 1px 0 $sep_color; } } - &:first-child:hover { box-shadow: inset -1px 0 $_linked_separator_color; } - &:last-child:hover { box-shadow: inset 1px 0 $_linked_separator_color; } - } } -// vertical -.linked.vertical { - > entry { @extend %linked_vertical; } - - - > entry + entry { border-top-color: transparentize($entry_border, 0.7); } - - > entry.error + entry, - > entry + entry.error { border-top-color: if($variant=='light', $error_color, transparentize($entry_border, 0.7)); } - - > entry.warning + entry, - > entry + entry.warning { border-top-color: if($variant=='light', $warning_color, transparentize($entry_border, 0.7)); } - - > entry.error + entry.warning { border-top-color: if($variant=='light', $error_color, transparentize($entry_border, 0.7));} - - - > entry + entry:focus:not(:last-child), - > entry + entry:focus:last-child { border-top-color: if($variant=='light', $selected_bg_color, $entry_border); } - - > entry + entry.warning:focus:not(:last-child), - > entry + entry.warning:focus:last-child { border-top-color: if($variant=='light', $warning_color, $entry_border); } - - > entry + entry.error:focus:not(:last-child), - > entry + entry.error:focus:last-child { border-top-color: if($variant=='light', $error_color, $entry_border); } - - - > entry + button, - > entry + button:hover, - > entry + button:active, - > entry + button:checked, - > entry + button:disabled { border-top-style: solid; } - - - > entry:focus:not(:only-child) + entry, - > entry:focus:not(:only-child) + button, - > entry:focus:not(:only-child) + combobox > button.combo { border-top-color: if($variant=='light', $selected_bg_color, $entry_border); } - - > entry.warning:focus:not(:only-child) + entry, - > entry.warning:focus:not(:only-child) + button, - > entry.warning:focus:not(:only-child) + combobox > button.combo { border-top-color: if($variant=='light', $warning_color, $entry_border); } - - > entry.error:focus:not(:only-child) + entry, - > entry.error:focus:not(:only-child) + button, - > entry.error:focus:not(:only-child) + combobox > button.combo { border-top-color: if($variant=='light', $error_color, $entry_border); } - - - > button:hover:not(:checked):not(:active):not(:only-child), - > button:hover:not(:checked):not(:active) + button:not(:checked):not(:active) { box-shadow: 0 -1px $button_border; } - > button:first-child:hover:not(:checked):not(:active) { box-shadow: none; } - > button:checked + button:not(:checked):not(:active):hover { box-shadow: none; } - > button:checked + entry { border-top-color: if($variant=='light', $selected_bg_color, $entry_border); } - > entry + button:not(:checked):not(:active):hover { box-shadow: none; } +// Apply the rules defined above +.linked:not(.vertical) { + &:not(.path-bar) { @include linking_rules(); } + &.path-bar { @include pathbar_linking_rules(); } } +.linked.vertical { @include linking_rules($vert:'true'); } + %linked_middle { border-radius: 0; border-right-style: none; @@ -696,16 +645,6 @@ $_linked_separator_color: if($variant=='light', transparentize($button_border, 0 } } -%linked_button { - border-left-style: none; - &:first-child { border-left-style: solid; } -} - -%linked_vertical_button { - border-top-style: none; - &:first-child { border-top-style: solid; } -} - %undecorated_button { border-color: transparent; background-color: transparent; @@ -1229,6 +1168,8 @@ headerbar { } // Linking stuff + + // Reset buttons .linked:not(.vertical):not(.path-bar) > button, .linked:not(.vertical):not(.path-bar) > button:hover, .linked:not(.vertical):not(.path-bar) > button:active, @@ -1236,89 +1177,35 @@ headerbar { .linked:not(.vertical):not(.path-bar) > button:disabled { border-radius: 3px; border-style: solid; - } - .linked:not(.vertical):not(.path-bar) > button:hover:not(:checked):not(:active):not(:only-child), - .linked:not(.vertical):not(.path-bar) > button:hover:not(:checked):not(:active) + button:not(:checked):not(:active), - .linked:not(.vertical).path-bar > button:hover:not(:checked):not(:active):not(:only-child), - .linked:not(.vertical).path-bar > button:hover:not(:checked):not(:active) + button:not(:checked):not(:active) { box-shadow: none; } - - // special case for path-bars and stack-switchers - .linked:not(.vertical):not(.path-bar).stack-switcher > button, - .linked:not(.vertical).path-bar > button { - - @include button(header-hover); - - &:hover { background-color: lighten($header_button_bg, 15%); } - &:active, &:checked { @include button(header-active); } - &:disabled { color: transparentize($header_fg, 0.4); } - } - - .linked:not(.vertical):not(.path-bar).stack-switcher > button, - .linked:not(.vertical).path-bar > button, - .linked:not(.vertical):not(.path-bar).stack-switcher > button:hover, - .linked:not(.vertical).path-bar > button:hover, - .linked:not(.vertical):not(.path-bar).stack-switcher > button:active, - .linked:not(.vertical).path-bar > button:active, - .linked:not(.vertical):not(.path-bar).stack-switcher > button:checked, - .linked:not(.vertical).path-bar > button:checked, - .linked:not(.vertical):not(.path-bar).stack-switcher > button:disabled, - .linked:not(.vertical).path-bar > button:disabled { - @extend %linked; - @extend %linked_button; + .linked:not(.vertical):not(.path-bar), .linked:not(.vertical).path-bar { + > button:hover:not(:checked):not(:active):not(:only-child), + > button:hover:not(:checked):not(:active) + button:not(:checked):not(:active) { box-shadow: none; } } - .linked:not(.vertical).path-bar, - .linked:not(.vertical):not(.path-bar).stack-switcher { + // special case for path-bars and stack-switchers + .linked:not(.vertical):not(.path-bar).stack-switcher, + .linked:not(.vertical).path-bar { - $_linked_separator_color: $header_button_border; + > button { + @include button(header-hover); - > button:hover:not(:checked):not(:active):not(:only-child) { + &:hover { background-color: lighten($header_button_bg, 15%); } + &:active, &:checked { @include button(header-active); } + &:disabled { color: transparentize($header_fg, 0.4); } - &:hover { - box-shadow: inset 1px 0 $_linked_separator_color, - inset -1px 0 $_linked_separator_color; - } - &:first-child:hover { box-shadow: inset -1px 0 $_linked_separator_color; } - &:last-child:hover { box-shadow: inset 1px 0 $_linked_separator_color; } + &, &:hover, &:active, &:checked, &:disabled { @extend %linked; } } - } - - .linked:not(.vertical):not(.pathbar) { - - > entry + entry { border-left-color: transparentize($header_entry_border, 0.5); } - - > entry.error + entry, - > entry + entry.error { border-left-color: if($variant=='light', $error_color, transparentize($header_entry_border, 0.5)); } - - > entry.warning + entry, - > entry + entry.warning { border-left-color: if($variant=='light', $warning_color, transparentize($header_entry_border, 0.5)); } - - > entry.error + entry.warning { border-left-color: if($variant=='light', $error_color, transparentize($header_entry_border, 0.5));} - - - > entry + entry:focus:not(:last-child), - > entry + entry:focus:last-child { border-left-color: if($darker=='false' and $variant=='light', $selected_bg_color, $header_entry_border); } - - > entry + entry.warning:focus:not(:last-child), - > entry + entry.warning:focus:last-child { border-left-color: if($variant=='light', $warning_color, $header_entry_border); } - - > entry + entry.error:focus:not(:last-child), - > entry + entry.error:focus:last-child { border-left-color: if($variant=='light', $error_color, $header_entry_border); } - - - > entry:focus:not(:only-child) + entry, - > entry:focus:not(:only-child) + button, - > entry:focus:not(:only-child) + combobox > button.combo { border-left-color: if($darker=='false' and $variant=='light', $selected_bg_color, $header_entry_border); } - - > entry.warning:focus:not(:only-child) + entry, - > entry.warning:focus:not(:only-child) + button, - > entry.warning:focus:not(:only-child) + combobox > button.combo { border-left-color: if($variant=='light', $warning_color, $header_entry_border); } - - > entry.error:focus:not(:only-child) + entry, - > entry.error:focus:not(:only-child) + button, - > entry.error:focus:not(:only-child) + button.combo > button.combo { border-left-color: if($variant=='light', $error_color, $header_entry_border); } + @include pathbar_linking_rules($sep_color:$header_button_border); + } + // use linking rules for entries only + .linked:not(.vertical):not(.path-bar) { + @include linking_rules( $a:0.5, + $var:if($variant=='light' and $darker=='false', 'light', 'dark'), + $button_rules:'false', + $e_border:$header_entry_border, + $b_border:$header_button_border ); } // Headerbar Suggested and Destructive Action buttons @@ -3028,9 +2915,7 @@ headerbar, &:active, &:checked { @include button(header-active); } - &.close, &.maximize, &.minimize { - color: transparent; background-color: transparent; background-position: center; @@ -3039,21 +2924,14 @@ headerbar, &:backdrop { opacity: 1; } } + // Load png assets for each button + @each $k in ('close','maximize', 'minimize') { + @each $l, $m in ('',''), (':backdrop','-backdrop'), (':hover','-hover'), (':active','-active') { - &.close { background-image: -gtk-scaled(url('assets/titlebutton-close#{$darker_asset_suffix}.png'),url('assets/titlebutton-close#{$darker_asset_suffix}@2.png')); } - &.close:backdrop { background-image: -gtk-scaled(url('assets/titlebutton-close-backdrop#{$darker_asset_suffix}.png'),url('assets/titlebutton-close-backdrop#{$darker_asset_suffix}@2.png')); } - &.close:hover { background-image: -gtk-scaled(url('assets/titlebutton-close-hover#{$darker_asset_suffix}.png'),url('assets/titlebutton-close-hover#{$darker_asset_suffix}@2.png')); } - &.close:active { background-image: -gtk-scaled(url('assets/titlebutton-close-active#{$darker_asset_suffix}.png'),url('assets/titlebutton-close-active#{$darker_asset_suffix}@2.png')); } - - &.maximize { background-image: -gtk-scaled(url('assets/titlebutton-max#{$darker_asset_suffix}.png'),url('assets/titlebutton-max#{$darker_asset_suffix}@2.png')); } - &.maximize:backdrop { background-image: -gtk-scaled(url('assets/titlebutton-max-backdrop#{$darker_asset_suffix}.png'),url('assets/titlebutton-max-backdrop#{$darker_asset_suffix}@2.png')); } - &.maximize:hover { background-image: -gtk-scaled(url('assets/titlebutton-max-hover#{$darker_asset_suffix}.png'),url('assets/titlebutton-max-hover#{$darker_asset_suffix}@2.png')); } - &.maximize:active { background-image: -gtk-scaled(url('assets/titlebutton-max-active#{$darker_asset_suffix}.png'),url('assets/titlebutton-max-active#{$darker_asset_suffix}@2.png')); } - - &.minimize { background-image: -gtk-scaled(url('assets/titlebutton-min#{$darker_asset_suffix}.png'),url('assets/titlebutton-min#{$darker_asset_suffix}@2.png')); } - &.minimize:backdrop { background-image: -gtk-scaled(url('assets/titlebutton-min-backdrop#{$darker_asset_suffix}.png'),url('assets/titlebutton-min-backdrop#{$darker_asset_suffix}@2.png')); } - &.minimize:hover { background-image: -gtk-scaled(url('assets/titlebutton-min-hover#{$darker_asset_suffix}.png'),url('assets/titlebutton-min-hover#{$darker_asset_suffix}@2.png')); } - &.minimize:active { background-image: -gtk-scaled(url('assets/titlebutton-min-active#{$darker_asset_suffix}.png'),url('assets/titlebutton-min-active#{$darker_asset_suffix}@2.png')); } + &.#{$k}#{$l} { background-image: -gtk-scaled(url('assets/titlebutton-#{$k}#{$m}#{$darker_asset_suffix}.png'), + url('assets/titlebutton-#{$k}#{$m}#{$darker_asset_suffix}@2.png')); } + } + } } } -- cgit v1.2.3