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/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;
diff --git a/gtk-3.20/scss/widgets/_button.scss b/gtk-3.20/scss/widgets/_button.scss
index e6e65ab..cd4796c 100755
--- a/gtk-3.20/scss/widgets/_button.scss
+++ b/gtk-3.20/scss/widgets/_button.scss
@@ -367,90 +367,60 @@
min-width: 24px;
@include button(shade($bg_color, 1.2), $fg_color);
- &.linked, .linked & { @include linked_button(shade($bg_color, 1.2)); }
+ .inline-toolbar &,
+ .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 & {
+ 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; }
+ }
+ }
}
}
diff --git a/gtk-3.20/scss/widgets/_toolbar.scss b/gtk-3.20/scss/widgets/_toolbar.scss
index 028f464..52e3812 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;
@@ -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); }
}
}