From 372d5efb9fd9dbaf14c5e6692c5433aca9547a2b Mon Sep 17 00:00:00 2001 From: Csaba Jakosa Date: Wed, 18 May 2016 19:07:46 +0200 Subject: [PATCH] GTK 3.20 :: Optimized spinbutton (#454) * * Optimized spinbutton. * * Removed top and left border not used code. * * Fixed: Missing name of pseudo-class. --- gtk-3.20/scss/_functions.scss | 9 ----- gtk-3.20/scss/widgets/_button.scss | 65 ++++++++++++++++++++++-------- gtk-3.20/scss/widgets/_entry.scss | 45 ++------------------- 3 files changed, 52 insertions(+), 67 deletions(-) diff --git a/gtk-3.20/scss/_functions.scss b/gtk-3.20/scss/_functions.scss index 39bd4be..74dc76a 100755 --- a/gtk-3.20/scss/_functions.scss +++ b/gtk-3.20/scss/_functions.scss @@ -93,12 +93,3 @@ $modules: () !default; @return transparentize(black, $_lbg * .8); } } - -// entries -@function entry_focus_border($fc:$selected_bg_color) { - @if $variant == 'light' { - @return $fc; - } @else { - @return if($fc == $selected_bg_color, $selected_borders_color, shade($fc, .65)); - } -} diff --git a/gtk-3.20/scss/widgets/_button.scss b/gtk-3.20/scss/widgets/_button.scss index cd4796c..db849f2 100755 --- a/gtk-3.20/scss/widgets/_button.scss +++ b/gtk-3.20/scss/widgets/_button.scss @@ -379,21 +379,60 @@ &:active, &:checked, &:hover { color: $text_color; } - &:disabled { color: mix($text_color, $base_color, .7); } + &:disabled { color: alpha($insensitive_fg_color, .8); } + + &:backdrop { color: mix($backdrop_base_color, $backdrop_fg_color, .9); } + + &:backdrop:disabled { color: alpha($backdrop_insensitive_color, .8); } } &:not(.vertical) { + @extend %entry; + @include linear-gradient($base_color, to top); + @include border($base_color); + + padding: 0; + + color: $text_color; + caret-color: $text_color; + + &:focus, &:active { border-color: border_focus($borders_color); } + + &:disabled { + @include linear-gradient(shade($base_color, .9), to top); + + color: mix($base_color, $text_color, .5); + } + entry { // reset all the other props since the spinbutton node is styled here + border: 0; border-radius: 0; + box-shadow: none; } button { - @extend %linked_middle; + border-radius: 0; + border-color: alpha($borders_color, .8); + border-style: none none none solid; + background-image: none; + box-shadow: none; - &:first-child { border-radius: $roundness 0 0 $roundness; } + &:dir(rtl) { border-style: none solid none none; } - &:last-child { border-radius: 0 $roundness $roundness 0; } + &:active { box-shadow: inset 0 2px 3px -1px transparentize($black, .8); } + + &:backdrop { border-color: alpha($backdrop_borders_color, .8); } + + &:backdrop:disabled { + border-style: none none none solid; // It is needed or it gets overridden + + &:dir(rtl) { border-style: none solid none none; } + } + + &:dir(rtl):first-child { border-radius: $roundness 0 0 $roundness; } + + &:dir(ltr):last-child { border-radius: 0 $roundness $roundness 0; } } } @@ -404,20 +443,14 @@ } button { - @extend %linked_vertical_entry; - - &:first-child { - border-width: 1px; - border-bottom-width: 0; - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; + &.up { + border-style: solid solid none solid; + border-radius: $roundness $roundness 0 0; } - &:last-child { - border-width: 1px; - border-top-width: 0; - border-top-left-radius: 0; - border-top-right-radius: 0; + &.down { + border-style: none solid solid solid; + border-radius: 0 0 $roundness $roundness; } } } diff --git a/gtk-3.20/scss/widgets/_entry.scss b/gtk-3.20/scss/widgets/_entry.scss index d097a37..cd96ad1 100755 --- a/gtk-3.20/scss/widgets/_entry.scss +++ b/gtk-3.20/scss/widgets/_entry.scss @@ -87,7 +87,6 @@ } %entry { - padding: $spacing; border-width: 1px; border-style: solid; border-radius: $roundness; @@ -124,6 +123,8 @@ @include linear-gradient($bg, to top); @include border($bg); + padding: $spacing; + color: $fg; caret-color: $fg; @@ -141,47 +142,7 @@ @include entry($base_color, $text_color); .linked:not(.vertical) > & { @extend %linked_entry; } - .linked:not(.vertical) > &:focus + &, - .linked:not(.vertical) > &:focus + button, - .linked:not(.vertical) > &:focus + combobox > box > button.combo { border-left-color: entry_focus_border(); } - .linked:not(.vertical) > &:drop(active) + &, - .linked:not(.vertical) > &:drop(active) + button, - .linked:not(.vertical) > &:drop(active) + combobox > box > button.combo { border-left-color: $drop_target_color; } - - - .linked.vertical > & { - @extend %linked_vertical_entry; - - // brighter border between linked entries - &:not(:disabled) + entry:not(:disabled) { - border-top-color: mix($borders_color, $base_color, .3); - - &:backdrop { border-top-color: mix($backdrop_borders_color, $backdrop_base_color, .3); } - } - - // brighter border between linked insensitive entries - &:disabled + entry:disabled { border-top-color: mix($borders_color, $base_color, .3); } - - // color back the top border of a linked focused entry following another entry. - // :not(:only-child) is a specificity bump hack. - + entry:focus:not(:only-child) { border-top-color: entry_focus_border(); } - - + entry:drop(active):not(:only-child) { border-top-color: $drop_target_color; } - - // this takes care of coloring the top border of the focused entry subsequent widget. - // :not(:only-child) is a specificity bump hack. - &:focus:not(:only-child) { - + entry, - + button, - + combobox > box > button.combo { border-top-color: entry_focus_border(); } - } - - &:drop(active):not(:only-child) { - + entry, - + button, - + combobox > box > button.combo { border-top-color: $drop_target_color; } - } - } + .linked.vertical > & { @extend %linked_vertical_entry; } } }