From 3cb2ee87dabffc7b42b4a716e962ee843e617723 Mon Sep 17 00:00:00 2001 From: Megax Date: Sun, 15 May 2016 13:58:00 +0200 Subject: [PATCH] * Rewirte spinbutton and linked entry, button. Implement inline-toolbar button linked. --- gtk-3.20/scss/_functions.scss | 9 +++ gtk-3.20/scss/widgets/_button.scss | 107 +++++++++++------------------ gtk-3.20/scss/widgets/_entry.scss | 76 ++++++++++++++++++-- 3 files changed, 120 insertions(+), 72 deletions(-) diff --git a/gtk-3.20/scss/_functions.scss b/gtk-3.20/scss/_functions.scss index 74dc76a..39bd4be 100755 --- a/gtk-3.20/scss/_functions.scss +++ b/gtk-3.20/scss/_functions.scss @@ -93,3 +93,12 @@ $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 e6e65ab..5cc560f 100755 --- a/gtk-3.20/scss/widgets/_button.scss +++ b/gtk-3.20/scss/widgets/_button.scss @@ -367,90 +367,61 @@ min-width: 24px; @include button(shade($bg_color, 1.2), $fg_color); - &.linked, .linked & { @include linked_button(shade($bg_color, 1.2)); } + .linked > & { @include linked_button(shade($bg_color, 1.2)); } - &.linked.vertical, .linked.vertical & { @include linked_vertical_button(shade($bg_color, 1.2)); } + .linked.vertical > & { @include linked_vertical_button(shade($bg_color, 1.2)); } - spinbutton & { + .inline-toolbar & { @extend %linked_button; } + } + + spinbutton { + button { color: mix($text_color, $base_color, .4); - padding: $spacing ($spacing * 2); - border: 0; - border-radius: 0; - border-style: none; - background-color: transparent; - background-image: none; - box-shadow: inset 1px 0 shade($base_color, .9); - - &:disabled { - color: mix($text_color, $base_color, .7); - box-shadow: inset 1px 0 shade($base_color, .85); - } &:active, &:checked, &:hover { color: $text_color; } - &:first-child { - border-radius: $roundness 0 0 $roundness; - box-shadow: none; - } - - &:last-child { border-radius: 0 $roundness $roundness 0; } - - &:dir(rtl) { box-shadow: inset -1px 0 shade($base_color, .9); } + &:disabled { color: mix($text_color, $base_color, .7); } } - spinbutton.vertical & { - border: 1px solid shade($bg_color, .8); - border-radius: $roundness; - background-color: shade($bg_color, 1.08); - background-image: none; - color: $fg_color; - box-shadow: none; - - &:hover { - border-color: shade($bg_color, .7); - background-color: shade($bg_color, 1.1); - background-image: none; + &:not(.vertical) { + entry { + // reset all the other props since the spinbutton node is styled here + border-radius: 0; } - &:active, &:checked { - border-color: shade($bg_color, .8); - background-color: shade($bg_color, .95); - background-image: none; - } + button { + @extend %linked_middle; - &:active:hover, &:checked:hover { - border-color: shade($bg_color, .7); - } + &:first-child { border-radius: $roundness 0 0 $roundness; } - &:focus, &:hover:focus, &:active:focus, &:active:hover:focus { border-color: shade($bg_color, .7); } - - &:disabled { - border-color: shade($bg_color, .85); - background-color: shade($bg_color, .9); - background-image: none; - } - - &:first-child { - border-width: 1px; - border-bottom-width: 0; - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; - } - - &:last-child { - border-width: 1px; - border-top-width: 0; - border-top-left-radius: 0; - border-top-right-radius: 0; + &:last-child { border-radius: 0 $roundness $roundness 0; } } } - spinbutton.vertical entry { - border-width: 1px; - border-style: solid; - border-radius: 0; - } + &.vertical { + entry { + // reset all the other props since the spinbutton node is styled here + border-radius: 0; + } + button { + @extend %linked_vertical_entry; + + &:first-child { + border-width: 1px; + border-bottom-width: 0; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + } + + &:last-child { + border-width: 1px; + border-top-width: 0; + border-top-left-radius: 0; + border-top-right-radius: 0; + } + } + } } } diff --git a/gtk-3.20/scss/widgets/_entry.scss b/gtk-3.20/scss/widgets/_entry.scss index 1871af3..aa6526d 100755 --- a/gtk-3.20/scss/widgets/_entry.scss +++ b/gtk-3.20/scss/widgets/_entry.scss @@ -14,6 +14,11 @@ border-right-width: 0; border-bottom-right-radius: 0; border-top-right-radius: 0; + + &:dir(rtl) { + border-left-width: 0; + border-right-width: 1px; + } } &:last-child { @@ -22,10 +27,18 @@ border-left-width: 0; border-bottom-left-radius: 0; border-top-left-radius: 0; + + &:dir(rtl) { + border-left-width: 1px; + border-right-width: 0; + } + } + + &:only-child, &:first-child:only-child { + border-width: 1px; } &:only-child { - border-width: 1px; border-radius: $roundness; } } @@ -39,21 +52,36 @@ &:first-child { border-width: 1px; border-radius: $roundness; + border-top-width: 1px; border-bottom-width: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; + + &:dir(rtl) { + border-top-width: 0; + border-bottom-width: 1px; + } } &:last-child { border-width: 1px; border-radius: $roundness; border-top-width: 0; + border-bottom-width: 1px; border-top-left-radius: 0; border-top-right-radius: 0; + + &:dir(rtl) { + border-top-width: 1px; + border-bottom-width: 0; + } + } + + &:only-child, &:first-child:only-child { + border-width: 1px; } &:only-child { - border-width: 1px; border-radius: $roundness; } } @@ -112,8 +140,48 @@ entry { @include entry($base_color, $text_color); - &.linked, .linked & { @extend %linked_entry; } + .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.vertical, .linked.vertical & { @extend %linked_vertical_entry; } + .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; } + } + } } }