GNOME.org
 

[gtk+] Adwaita: linked logic surgery

commit f8c1a4fed8450fc03958bb466e51791c2751b4ae
Author: Lapo Calamandrei <calamandrei gmail com>
Date:   Wed Aug 6 13:20:45 2014 +0200

    Adwaita: linked logic surgery

 gtk/resources/theme/Adwaita/_common.scss           |  104 ++++++++------------
 gtk/resources/theme/Adwaita/gtk-contained-dark.css |   65 ++----------
 gtk/resources/theme/Adwaita/gtk-contained.css      |   65 ++----------
 3 files changed, 64 insertions(+), 170 deletions(-)
---
diff --git a/gtk/resources/theme/Adwaita/_common.scss b/gtk/resources/theme/Adwaita/_common.scss
index 6c2809b..d8fb847 100644
--- a/gtk/resources/theme/Adwaita/_common.scss
+++ b/gtk/resources/theme/Adwaita/_common.scss
@@ -209,7 +209,7 @@ GtkLabel {
     box-shadow: none;
     &:backdrop { background-color: transparent; }
   }
-  .linked & {
+  .linked & { //FIXME: use same buttons linking logic and template
     &:first-child {
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
@@ -340,11 +340,23 @@ $_dot_color: if($variant=='light', $selected_bg_color,
     @include button(osd);
     text-shadow: none;
     icon-shadow: none;
-    @extend %linked_buttons;
-    &:hover { @include button(osd-hover); @extend %linked_buttons; }
-    &:active { @include button(osd-active); @extend %linked_buttons; }
-    &:insensitive { @include button(osd-insensitive); @extend %linked_buttons; }
-    &:backdrop { @include button(osd-backdrop); @extend %linked_buttons; }
+    @extend %linked;
+    &:hover {
+      @include button(osd-hover);
+      @extend %linked;
+    }
+    &:active {
+      @include button(osd-active);
+      @extend %linked;
+    }
+    &:insensitive {
+      @include button(osd-insensitive);
+      @extend %linked;
+    }
+    &:backdrop {
+      @include button(osd-backdrop);
+      @extend %linked;
+    }
   }
   // Suggested and Destructive Action buttons
   @each $b_type, $b_color in (suggested-action, $selected_bg_color),
@@ -439,7 +451,7 @@ $_dot_color: if($variant=='light', $selected_bg_color,
   .inline-toolbar &, .inline-toolbar &:backdrop {
     border-radius: 2px;
     border-width: 1px;
-    @extend %linked_buttons;
+    @extend %linked;
   }
 
   .primary-toolbar & { icon-shadow: none; } // tango icons don't need added shadows
@@ -450,12 +462,12 @@ $_dot_color: if($variant=='light', $selected_bg_color,
   .linked &,
   .linked &:hover,
   .linked &:active,
-  .linked &:backdrop { @extend %linked_buttons; }
+  .linked &:backdrop { @extend %linked; }
 
   .linked.vertical &,
   .linked.vertical &:hover,
   .linked.vertical &:active,
-  .linked.vertical &:backdrop { @extend %linked_buttons_vertical; }
+  .linked.vertical &:backdrop { @extend %linked_vertical; }
 
 }
 
@@ -477,34 +489,26 @@ $_dot_color: if($variant=='light', $selected_bg_color,
 .inline-toolbar.toolbar GtkToolButton { // .inline-toolbar.toolbar here for
                                         // higher specificity than the previous
                                         // "button look" selector
-  & > .button.flat {
-    border-radius: 0;
-    border-left-style: none;
-  }
-  &:dir(rtl) > .button.flat {}
-  &:first-child > .button.flat {
-    border-radius: 3px 0 0 3px;
-    border-left-style: solid;
-  }
-  &:last-child > .button.flat {
-    border-radius: 0 3px 3px 0;
-  }
-  &:last-child:dir(rtl) > .button.flat {
-    border-right-style: solid;
-  }
-  &:only-child > .button.flat {
-    border-radius: 3px;
-    border-style: solid;
-  }
+  & > .button.flat { @extend %linked_middle; }
+  &:dir(rtl) > .button.flat { @extend %linked_middle:dir(rtl); }
+  &:first-child > .button.flat { @extend %linked:first-child; }
+  &:last-child > .button.flat { @extend %linked:last-child; }
+  &:last-child:dir(rtl) > .button.flat { @extend %linked:last-child:dir(rtl); }
+  &:only-child > .button.flat { @extend %linked; }
 }
 
-%linked_buttons {
+%linked_middle {
   border-radius: 0;
   border-left-style: none;
   &:dir(rtl) {
+    border-radius: 0; // needed when including %linked_middle:dir(rtl)
     border-right-style: none;
     border-left-style: solid
-  };
+  }
+}
+
+%linked {
+  @extend %linked_middle;
   &:first-child {
     border-radius: 3px 0 0 3px;
     border-left-style: solid;
@@ -519,7 +523,7 @@ $_dot_color: if($variant=='light', $selected_bg_color,
   }
 }
 
-%linked_buttons_vertical{
+%linked_vertical{
   border-left-style: solid;
   border-top-style: none;
   &:first-child {
@@ -744,52 +748,28 @@ GtkComboBox {
     -GtkWidget-horizontal-separator: 0;
     -GtkWidget-vertical-separator: 0;
   }
-  &.combobox-entry .entry {
-    border-radius: 3px 0 0 3px;
-    &:dir(rtl) {
-      border-radius: 0 3px 3px 0;
-    }
-  }
+  &.combobox-entry .entry { @extend %linked; }
   &.combobox-entry .button, &.combobox-entry .button:backdrop {
     // It is needed to specify the backdrop button or it gets overridden
-    border-radius: 0 3px 3px 0;
-    border-left-style: none;
-    &:dir(rtl) {
-      border-radius: 3px 0 0 3px;
-      border-left-style: solid;
-      border-right-style: none;
-    }
+    @extend %linked;
   }
 }
 
-
-//FIXME: we need a better general solution for button linking
-
 .linked > GtkComboBox > .button {
   // the combo is a composite widget so the way we do button linkind doesn't
   // work, special case needed. See
   // https://bugzilla.gnome.org/show_bug.cgi?id=733979
-
-  &:dir(ltr), &:dir(rtl) { // needed to increase specificity
-    border-radius: 0;
-    border-left-style: none;
-  }
-  &:dir(rtl) {
-    border-right-style: none;
-    border-left-style: solid
-  }
+  &:dir(ltr) { @extend %linked_middle; } // specificity bump
+  &:dir(rtl) { @extend %linked_middle:dir(rtl); }
 }
 .linked > GtkComboBox:first-child > .button {
-  border-radius: 3px 0 0 3px;
-  border-left-style: solid;
+  @extend %linked:first-child;
 }
 .linked > GtkComboBox:last-child > .button {
-  border-radius: 0 3px 3px 0;
-  &:dir(rtl) { border-right-style: solid; }
+  @extend %linked:last-child;
 }
 .linked > GtkComboBox:only-child > .button {
-  border-radius: 3px;
-  border-style: solid;
+  @extend %linked:only-child;
 }
 
 /************
diff --git a/gtk/resources/theme/Adwaita/gtk-contained-dark.css 
b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
index bd468d5..09f8169 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
@@ -612,37 +612,25 @@
     background-image: linear-gradient(to bottom, #303434);
     box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
 
-.inline-toolbar.toolbar GtkToolButton > .button.flat, .inline-toolbar GtkToolButton > .button.flat {
+.inline-toolbar GtkToolButton > .button.flat, .inline-toolbar.search-bar GtkToolButton > .button.flat, .osd 
.button, .osd .button:hover, .osd .button:active, .osd .button:insensitive, .osd .button:backdrop, 
.inline-toolbar .button, .inline-toolbar .button:backdrop, .linked .button, .linked .button:hover, .linked 
.button:active, .linked .button:backdrop, .inline-toolbar GtkToolButton:only-child > .button.flat, 
.inline-toolbar.search-bar GtkToolButton:only-child > .button.flat, GtkComboBox.combobox-entry .entry, 
GtkComboBox.combobox-entry .button, GtkComboBox.combobox-entry .button:backdrop, .linked > GtkComboBox > 
.button:dir(ltr) {
   border-radius: 0;
   border-left-style: none; }
-.inline-toolbar.toolbar GtkToolButton:first-child > .button.flat, .inline-toolbar GtkToolButton:first-child 

.button.flat {

+  .inline-toolbar GtkToolButton > .button.flat:dir(rtl), .inline-toolbar GtkToolButton:dir(rtl) > 
.button.flat, .inline-toolbar.search-bar GtkToolButton:dir(rtl) > .button.flat, .osd .button:dir(rtl), 
.inline-toolbar .button:dir(rtl), .linked .button:dir(rtl), .inline-toolbar GtkToolButton:only-child > 
.button.flat:dir(rtl), GtkComboBox.combobox-entry .entry:dir(rtl), GtkComboBox.combobox-entry 
.button:dir(rtl), .linked > GtkComboBox > .button:dir(rtl) {
+    border-radius: 0;
+    border-right-style: none;
+    border-left-style: solid; }
+
+.osd .button:first-child, .inline-toolbar .button:first-child, .linked .button:first-child, .inline-toolbar 
GtkToolButton:first-child > .button.flat, .inline-toolbar.search-bar GtkToolButton:first-child > 
.button.flat, .inline-toolbar GtkToolButton:only-child > .button.flat:first-child, GtkComboBox.combobox-entry 
.entry:first-child, GtkComboBox.combobox-entry .button:first-child, .linked > GtkComboBox:first-child > 
.button {
   border-radius: 3px 0 0 3px;
   border-left-style: solid; }
-.inline-toolbar.toolbar GtkToolButton:last-child > .button.flat, .inline-toolbar GtkToolButton:last-child > 
.button.flat {
+.osd .button:last-child, .inline-toolbar .button:last-child, .linked .button:last-child, .inline-toolbar 
GtkToolButton:last-child > .button.flat, .inline-toolbar.search-bar GtkToolButton:last-child > .button.flat, 
.inline-toolbar GtkToolButton:only-child > .button.flat:last-child, GtkComboBox.combobox-entry 
.entry:last-child, GtkComboBox.combobox-entry .button:last-child, .linked > GtkComboBox:last-child > .button {
   border-radius: 0 3px 3px 0; }
-.inline-toolbar.toolbar GtkToolButton:last-child:dir(rtl) > .button.flat, .inline-toolbar 
GtkToolButton:last-child:dir(rtl) > .button.flat {
-  border-right-style: solid; }
-.inline-toolbar.toolbar GtkToolButton:only-child > .button.flat, .inline-toolbar GtkToolButton:only-child > 
.button.flat {
+  .osd .button:last-child:dir(rtl), .inline-toolbar .button:last-child:dir(rtl), .linked 
.button:last-child:dir(rtl), .inline-toolbar GtkToolButton:last-child > .button.flat:dir(rtl), 
.inline-toolbar GtkToolButton:last-child:dir(rtl) > .button.flat, .inline-toolbar.search-bar 
GtkToolButton:last-child:dir(rtl) > .button.flat, .inline-toolbar GtkToolButton:only-child > 
.button.flat:last-child:dir(rtl), GtkComboBox.combobox-entry .entry:last-child:dir(rtl), 
GtkComboBox.combobox-entry .button:last-child:dir(rtl), .linked > GtkComboBox:last-child > .button:dir(rtl) {
+    border-right-style: solid; }
+.osd .button:only-child, .inline-toolbar .button:only-child, .linked .button:only-child, .inline-toolbar 
GtkToolButton:only-child > .button.flat:only-child, GtkComboBox.combobox-entry .entry:only-child, 
GtkComboBox.combobox-entry .button:only-child, .linked > GtkComboBox:only-child > .button {
   border-radius: 3px;
   border-style: solid; }
 
-.osd .button, .osd .button:hover, .osd .button:active, .osd .button:insensitive, .osd .button:backdrop, 
.inline-toolbar .button, .inline-toolbar .button:backdrop, .linked .button, .linked .button:hover, .linked 
.button:active, .linked .button:backdrop {
-  border-radius: 0;
-  border-left-style: none; }
-  .osd .button:dir(rtl), .inline-toolbar .button:dir(rtl), .linked .button:dir(rtl) {
-    border-right-style: none;
-    border-left-style: solid; }
-  .osd .button:first-child, .inline-toolbar .button:first-child, .linked .button:first-child {
-    border-radius: 3px 0 0 3px;
-    border-left-style: solid; }
-  .osd .button:last-child, .inline-toolbar .button:last-child, .linked .button:last-child {
-    border-radius: 0 3px 3px 0; }
-    .osd .button:last-child:dir(rtl), .inline-toolbar .button:last-child:dir(rtl), .linked 
.button:last-child:dir(rtl) {
-      border-right-style: solid; }
-  .osd .button:only-child, .inline-toolbar .button:only-child, .linked .button:only-child {
-    border-radius: 3px;
-    border-style: solid; }
-
 .linked.vertical .button, .linked.vertical .button:hover, .linked.vertical .button:active, .linked.vertical 
.button:backdrop {
   border-left-style: solid;
   border-top-style: none; }
@@ -869,37 +857,6 @@ GtkComboBox {
     -GtkWidget-wide-separators: true;
     -GtkWidget-horizontal-separator: 0;
     -GtkWidget-vertical-separator: 0; }
-  GtkComboBox.combobox-entry .entry {
-    border-radius: 3px 0 0 3px; }
-    GtkComboBox.combobox-entry .entry:dir(rtl) {
-      border-radius: 0 3px 3px 0; }
-  GtkComboBox.combobox-entry .button, GtkComboBox.combobox-entry .button:backdrop {
-    border-radius: 0 3px 3px 0;
-    border-left-style: none; }
-    GtkComboBox.combobox-entry .button:dir(rtl), GtkComboBox.combobox-entry .button:backdrop:dir(rtl) {
-      border-radius: 3px 0 0 3px;
-      border-left-style: solid;
-      border-right-style: none; }
-
-.linked > GtkComboBox > .button:dir(ltr), .linked > GtkComboBox > .button:dir(rtl) {
-  border-radius: 0;
-  border-left-style: none; }
-.linked > GtkComboBox > .button:dir(rtl) {
-  border-right-style: none;
-  border-left-style: solid; }
-
-.linked > GtkComboBox:first-child > .button {
-  border-radius: 3px 0 0 3px;
-  border-left-style: solid; }
-
-.linked > GtkComboBox:last-child > .button {
-  border-radius: 0 3px 3px 0; }
-  .linked > GtkComboBox:last-child > .button:dir(rtl) {
-    border-right-style: solid; }
-
-.linked > GtkComboBox:only-child > .button {
-  border-radius: 3px;
-  border-style: solid; }
 
 /************
  * Toolbars *
diff --git a/gtk/resources/theme/Adwaita/gtk-contained.css b/gtk/resources/theme/Adwaita/gtk-contained.css
index e6b91b0..31c86d6 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained.css
@@ -604,37 +604,25 @@
     background-image: linear-gradient(to bottom, #ededed);
     box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
 
-.inline-toolbar.toolbar GtkToolButton > .button.flat, .inline-toolbar GtkToolButton > .button.flat {
+.inline-toolbar GtkToolButton > .button.flat, .inline-toolbar.search-bar GtkToolButton > .button.flat, .osd 
.button, .osd .button:hover, .osd .button:active, .osd .button:insensitive, .osd .button:backdrop, 
.inline-toolbar .button, .inline-toolbar .button:backdrop, .linked .button, .linked .button:hover, .linked 
.button:active, .linked .button:backdrop, .inline-toolbar GtkToolButton:only-child > .button.flat, 
.inline-toolbar.search-bar GtkToolButton:only-child > .button.flat, GtkComboBox.combobox-entry .entry, 
GtkComboBox.combobox-entry .button, GtkComboBox.combobox-entry .button:backdrop, .linked > GtkComboBox > 
.button:dir(ltr) {
   border-radius: 0;
   border-left-style: none; }
-.inline-toolbar.toolbar GtkToolButton:first-child > .button.flat, .inline-toolbar GtkToolButton:first-child 

.button.flat {

+  .inline-toolbar GtkToolButton > .button.flat:dir(rtl), .inline-toolbar GtkToolButton:dir(rtl) > 
.button.flat, .inline-toolbar.search-bar GtkToolButton:dir(rtl) > .button.flat, .osd .button:dir(rtl), 
.inline-toolbar .button:dir(rtl), .linked .button:dir(rtl), .inline-toolbar GtkToolButton:only-child > 
.button.flat:dir(rtl), GtkComboBox.combobox-entry .entry:dir(rtl), GtkComboBox.combobox-entry 
.button:dir(rtl), .linked > GtkComboBox > .button:dir(rtl) {
+    border-radius: 0;
+    border-right-style: none;
+    border-left-style: solid; }
+
+.osd .button:first-child, .inline-toolbar .button:first-child, .linked .button:first-child, .inline-toolbar 
GtkToolButton:first-child > .button.flat, .inline-toolbar.search-bar GtkToolButton:first-child > 
.button.flat, .inline-toolbar GtkToolButton:only-child > .button.flat:first-child, GtkComboBox.combobox-entry 
.entry:first-child, GtkComboBox.combobox-entry .button:first-child, .linked > GtkComboBox:first-child > 
.button {
   border-radius: 3px 0 0 3px;
   border-left-style: solid; }
-.inline-toolbar.toolbar GtkToolButton:last-child > .button.flat, .inline-toolbar GtkToolButton:last-child > 
.button.flat {
+.osd .button:last-child, .inline-toolbar .button:last-child, .linked .button:last-child, .inline-toolbar 
GtkToolButton:last-child > .button.flat, .inline-toolbar.search-bar GtkToolButton:last-child > .button.flat, 
.inline-toolbar GtkToolButton:only-child > .button.flat:last-child, GtkComboBox.combobox-entry 
.entry:last-child, GtkComboBox.combobox-entry .button:last-child, .linked > GtkComboBox:last-child > .button {
   border-radius: 0 3px 3px 0; }
-.inline-toolbar.toolbar GtkToolButton:last-child:dir(rtl) > .button.flat, .inline-toolbar 
GtkToolButton:last-child:dir(rtl) > .button.flat {
-  border-right-style: solid; }
-.inline-toolbar.toolbar GtkToolButton:only-child > .button.flat, .inline-toolbar GtkToolButton:only-child > 
.button.flat {
+  .osd .button:last-child:dir(rtl), .inline-toolbar .button:last-child:dir(rtl), .linked 
.button:last-child:dir(rtl), .inline-toolbar GtkToolButton:last-child > .button.flat:dir(rtl), 
.inline-toolbar GtkToolButton:last-child:dir(rtl) > .button.flat, .inline-toolbar.search-bar 
GtkToolButton:last-child:dir(rtl) > .button.flat, .inline-toolbar GtkToolButton:only-child > 
.button.flat:last-child:dir(rtl), GtkComboBox.combobox-entry .entry:last-child:dir(rtl), 
GtkComboBox.combobox-entry .button:last-child:dir(rtl), .linked > GtkComboBox:last-child > .button:dir(rtl) {
+    border-right-style: solid; }
+.osd .button:only-child, .inline-toolbar .button:only-child, .linked .button:only-child, .inline-toolbar 
GtkToolButton:only-child > .button.flat:only-child, GtkComboBox.combobox-entry .entry:only-child, 
GtkComboBox.combobox-entry .button:only-child, .linked > GtkComboBox:only-child > .button {
   border-radius: 3px;
   border-style: solid; }
 
-.osd .button, .osd .button:hover, .osd .button:active, .osd .button:insensitive, .osd .button:backdrop, 
.inline-toolbar .button, .inline-toolbar .button:backdrop, .linked .button, .linked .button:hover, .linked 
.button:active, .linked .button:backdrop {
-  border-radius: 0;
-  border-left-style: none; }
-  .osd .button:dir(rtl), .inline-toolbar .button:dir(rtl), .linked .button:dir(rtl) {
-    border-right-style: none;
-    border-left-style: solid; }
-  .osd .button:first-child, .inline-toolbar .button:first-child, .linked .button:first-child {
-    border-radius: 3px 0 0 3px;
-    border-left-style: solid; }
-  .osd .button:last-child, .inline-toolbar .button:last-child, .linked .button:last-child {
-    border-radius: 0 3px 3px 0; }
-    .osd .button:last-child:dir(rtl), .inline-toolbar .button:last-child:dir(rtl), .linked 
.button:last-child:dir(rtl) {
-      border-right-style: solid; }
-  .osd .button:only-child, .inline-toolbar .button:only-child, .linked .button:only-child {
-    border-radius: 3px;
-    border-style: solid; }
-
 .linked.vertical .button, .linked.vertical .button:hover, .linked.vertical .button:active, .linked.vertical 
.button:backdrop {
   border-left-style: solid;
   border-top-style: none; }
@@ -861,37 +849,6 @@ GtkComboBox {
     -GtkWidget-wide-separators: true;
     -GtkWidget-horizontal-separator: 0;
     -GtkWidget-vertical-separator: 0; }
-  GtkComboBox.combobox-entry .entry {
-    border-radius: 3px 0 0 3px; }
-    GtkComboBox.combobox-entry .entry:dir(rtl) {
-      border-radius: 0 3px 3px 0; }
-  GtkComboBox.combobox-entry .button, GtkComboBox.combobox-entry .button:backdrop {
-    border-radius: 0 3px 3px 0;
-    border-left-style: none; }
-    GtkComboBox.combobox-entry .button:dir(rtl), GtkComboBox.combobox-entry .button:backdrop:dir(rtl) {
-      border-radius: 3px 0 0 3px;
-      border-left-style: solid;
-      border-right-style: none; }
-
-.linked > GtkComboBox > .button:dir(ltr), .linked > GtkComboBox > .button:dir(rtl) {
-  border-radius: 0;
-  border-left-style: none; }
-.linked > GtkComboBox > .button:dir(rtl) {
-  border-right-style: none;
-  border-left-style: solid; }
-
-.linked > GtkComboBox:first-child > .button {
-  border-radius: 3px 0 0 3px;
-  border-left-style: solid; }
-
-.linked > GtkComboBox:last-child > .button {
-  border-radius: 0 3px 3px 0; }
-  .linked > GtkComboBox:last-child > .button:dir(rtl) {
-    border-right-style: solid; }
-
-.linked > GtkComboBox:only-child > .button {
-  border-radius: 3px;
-  border-style: solid; }
 
 /************
  * Toolbars *
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]