From 3cb2ee87dabffc7b42b4a716e962ee843e617723 Mon Sep 17 00:00:00 2001 From: Megax Date: Sun, 15 May 2016 13:58:00 +0200 Subject: [PATCH 1/5] * 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; } + } + } } } From 13bab8e34ea706ddb335924e3f19194bea870a80 Mon Sep 17 00:00:00 2001 From: Megax Date: Sun, 15 May 2016 14:19:06 +0200 Subject: [PATCH 2/5] * Fixed nemo linked code. --- gtk-3.20/scss/apps/_nemo.scss | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/gtk-3.20/scss/apps/_nemo.scss b/gtk-3.20/scss/apps/_nemo.scss index cff7f4a..19fcc6c 100644 --- a/gtk-3.20/scss/apps/_nemo.scss +++ b/gtk-3.20/scss/apps/_nemo.scss @@ -30,9 +30,7 @@ @include button($bg_color, $fg_color); } - button.linked, .linked .button { - @include linked_button($bg_color); - } + .linked > button { @include linked_button($bg_color); } combobox button { padding: $spacing - 1px; From a25c350921fa02e407e6b8febf53412d27eace50 Mon Sep 17 00:00:00 2001 From: Megax Date: Sun, 15 May 2016 20:06:17 +0200 Subject: [PATCH 3/5] * Fixed separator. --- gtk-3.20/scss/widgets/_button.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/gtk-3.20/scss/widgets/_button.scss b/gtk-3.20/scss/widgets/_button.scss index 5cc560f..cd4796c 100755 --- a/gtk-3.20/scss/widgets/_button.scss +++ b/gtk-3.20/scss/widgets/_button.scss @@ -367,11 +367,10 @@ min-width: 24px; @include button(shade($bg_color, 1.2), $fg_color); + .inline-toolbar &, .linked > & { @include linked_button(shade($bg_color, 1.2)); } .linked.vertical > & { @include linked_vertical_button(shade($bg_color, 1.2)); } - - .inline-toolbar & { @extend %linked_button; } } spinbutton { From 082329e4c1e7ce8cd47a702eda958f72aef045a0 Mon Sep 17 00:00:00 2001 From: Megax Date: Sun, 15 May 2016 20:56:29 +0200 Subject: [PATCH 4/5] * Toolbar linked fix. --- gtk-3.20/scss/widgets/_toolbar.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gtk-3.20/scss/widgets/_toolbar.scss b/gtk-3.20/scss/widgets/_toolbar.scss index be53207..338b030 100755 --- a/gtk-3.20/scss/widgets/_toolbar.scss +++ b/gtk-3.20/scss/widgets/_toolbar.scss @@ -30,7 +30,7 @@ button { @include button($bg, $fg); } - button.linked, .linked button { @include linked_button($bg); } + .linked > button { @include linked_button($bg); } combobox, button { padding: $spacing - 1px; From 01247caf4a466a48c815d831a0ee65a64d19155a Mon Sep 17 00:00:00 2001 From: Megax Date: Sun, 15 May 2016 21:02:06 +0200 Subject: [PATCH 5/5] * Fixed RB and other inline-toolbar bug. --- gtk-3.20/scss/widgets/_toolbar.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/gtk-3.20/scss/widgets/_toolbar.scss b/gtk-3.20/scss/widgets/_toolbar.scss index 338b030..cf13bca 100755 --- a/gtk-3.20/scss/widgets/_toolbar.scss +++ b/gtk-3.20/scss/widgets/_toolbar.scss @@ -64,6 +64,10 @@ &.inline-toolbar { background-image: none; background-color: transparent; + + button { @include button($toolbar_bg_color, $toolbar_fg_color); } + + .linked > button { @include linked_button($toolbar_bg_color); } } }