[libadwaita/wip/exalm/buttons-v2] stylesheet: Refactor linked styles
- From: Alexander Mikhaylenko <alexm src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [libadwaita/wip/exalm/buttons-v2] stylesheet: Refactor linked styles
- Date: Sun, 23 May 2021 12:34:51 +0000 (UTC)
commit c3c00624812611511a4416f05a4e236d12379f8f
Author: Alexander Mikhaylenko <alexm gnome org>
Date: Sun May 23 16:47:53 2021 +0500
stylesheet: Refactor linked styles
List all the linked widgets in a single variable, avoid duplicating it.
src/stylesheet/widgets/_linked.scss | 144 ++++++++++--------------------------
1 file changed, 39 insertions(+), 105 deletions(-)
---
diff --git a/src/stylesheet/widgets/_linked.scss b/src/stylesheet/widgets/_linked.scss
index 3d94caf8..cc39cdb8 100644
--- a/src/stylesheet/widgets/_linked.scss
+++ b/src/stylesheet/widgets/_linked.scss
@@ -1,3 +1,15 @@
+// .linked > element child
+$_linked_widgets: ("%button", ""),
+ ("button", ""),
+ ("menubutton", "> button"),
+ ("dropdown", "> button"),
+ ("colorbutton", "> button"),
+ ("fontbutton", "> button"),
+ ("combobox", "> box > button.combo"),
+ ("appchooserbutton", "> combobox > box > button.combo"),
+ ("%entry", ""),
+ ("entry", "");
+
%linked_not_left {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
@@ -20,93 +32,27 @@
border-bottom-right-radius: 0;
}
-// 1st/last child are at text start/end
-%linked {
- &:dir(ltr) {
- &:not(:first-child) { @extend %linked_not_left; }
- &:not(:last-child) { @extend %linked_not_right; }
- }
-
- &:dir(rtl) {
- &:not(:first-child) { @extend %linked_not_right; }
- &:not(:last-child) { @extend %linked_not_left; }
- }
-}
-
-%linked_vertical {
- &:not(:first-child) { @extend %linked_not_top; }
-
- &:not(:last-child) { @extend %linked_not_bottom; }
-}
-
-%button,
-button {
- .linked:not(.vertical) > & { @extend %linked; }
-
- .linked.vertical > & { @extend %linked_vertical; }
-}
-
-.linked:not(.vertical) > menubutton,
-.linked:not(.vertical) > dropdown,
-.linked:not(.vertical) > colorbutton,
-.linked:not(.vertical) > fontbutton {
- &:dir(ltr) {
- &:not(:first-child) > button { @extend %linked_not_left; }
- &:not(:last-child) > button { @extend %linked_not_right; }
- }
-
- &:dir(rtl) {
- &:not(:first-child) > button { @extend %linked_not_right; }
- &:not(:last-child) > button { @extend %linked_not_left; }
- }
-}
-
-.linked.vertical > menubutton,
-.linked.vertical > dropdown,
-.linked.vertical > colorbutton,
-.linked.vertical > fontbutton {
- &:not(:first-child) > button { @extend %linked_not_top; }
- &:not(:last-child) > button { @extend %linked_not_bottom; }
-}
-
-// the combo is a composite widget so the way we do button linking doesn't
-// work, special case needed. See
-// https://bugzilla.gnome.org/show_bug.cgi?id=733979
-
-.linked:not(.vertical) > combobox {
- &:dir(ltr) {
- &:not(:first-child) > box > button.combo { @extend %linked_not_left; }
- &:not(:last-child) > box > button.combo { @extend %linked_not_right; }
- }
-
- &:dir(rtl) {
- &:not(:first-child) > box > button.combo { @extend %linked_not_right; }
- &:not(:last-child) > box > button.combo { @extend %linked_not_left; }
- }
-}
-
-.linked.vertical > combobox {
- &:not(:first-child) > box > button.combo { @extend %linked_not_top; }
- &:not(:last-child) > box > button.combo { @extend %linked_not_bottom; }
-}
+@each $widget, $child in $_linked_widgets {
+ .linked:not(.vertical) > {
+ #{$widget}:dir(ltr) {
+ &:not(:first-child) #{$child} { @extend %linked_not_left; }
+ &:not(:last-child) #{$child} { @extend %linked_not_right; }
+ }
-.linked:not(.vertical) > appchooserbutton {
- &:dir(ltr) {
- &:not(:first-child) > combobox > box > button.combo { @extend %linked_not_left; }
- &:not(:last-child) > combobox > box > button.combo { @extend %linked_not_right; }
+ #{$widget}:dir(rtl) {
+ &:not(:first-child) #{$child} { @extend %linked_not_right; }
+ &:not(:last-child) #{$child} { @extend %linked_not_left; }
+ }
}
- &:dir(rtl) {
- &:not(:first-child) > combobox > box > button.combo { @extend %linked_not_right; }
- &:not(:last-child) > combobox > box > button.combo { @extend %linked_not_left; }
+ .linked.vertical {
+ #{$widget} {
+ &:not(:first-child) #{$child} { @extend %linked_not_top; }
+ &:not(:last-child) #{$child} { @extend %linked_not_bottom; }
+ }
}
}
-.linked.vertical > appchooserbutton {
- &:not(:first-child) > combobox > box > button.combo { @extend %linked_not_top; }
- &:not(:last-child) > combobox > box > button.combo { @extend %linked_not_bottom; }
-}
-
dropdown,
combobox {
&.linked {
@@ -119,23 +65,9 @@ combobox {
%entry,
entry {
- // linked entries
- .linked:not(.vertical) > & { @extend %linked; }
-
- .linked:not(.vertical) > &:drop(active) + &,
- .linked:not(.vertical) > &:drop(active) + button,
- .linked:not(.vertical) > &:drop(active) + menubutton > button,
- .linked:not(.vertical) > &:drop(active) + dropdown > button,
- .linked:not(.vertical) > &:drop(active) + colorbutton > button,
- .linked:not(.vertical) > &:drop(active) + fontbutton > button,
- .linked:not(.vertical) > &:drop(active) + appchooserbutton > combobox > box > button.combo,
- .linked:not(.vertical) > &:drop(active) + combobox > box > button.combo { border-left-color:
$drop_target_color; }
-
// Vertically linked entries
// FIXME: take care of "colored" entries
.linked.vertical > & {
- @extend %linked_vertical;
-
// brighter border between linked entries
&:not(:disabled) + entry:not(:disabled),
&:not(:disabled) + %entry:not(:disabled) {
@@ -148,17 +80,19 @@ entry {
+ %entry:drop(active):not(:only-child),
+ entry:drop(active):not(:only-child) { border-top-color: $drop_target_color; }
+ }
+
+ @each $widget, $child in $_linked_widgets {
+ .linked:not(.vertical) > &:drop(active):not(:only-child) + {
+ #{$widget} #{$child} {
+ border-left-color: $drop_target_color;
+ }
+ }
- &:drop(active):not(:only-child) {
- + %entry,
- + entry,
- + button,
- + menubutton > button,
- + dropdown > button,
- + colorbutton > button,
- + fontbutton > button,
- + appchooserbutton > combobox > box > button.combo,
- + combobox > box > button.combo { border-top-color: $drop_target_color; }
+ .linked.vertical > &:drop(active):not(:only-child) + {
+ #{$widget} #{$child} {
+ border-top-color: $drop_target_color;
+ }
}
}
}
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]