GNOME.org
 

[gtk+] Adwaita: simplify buttons drawing function

commit 17b679c86670d22229b851fc2ce3def6e0b6dea0
Author: Lapo Calamandrei <calamandrei gmail com>
Date:   Thu Jul 10 11:55:51 2014 +0200

    Adwaita: simplify buttons drawing function

 gtk/resources/theme/Adwaita/_drawing.scss          |   60 +++++++-------------
 gtk/resources/theme/Adwaita/gtk-contained-dark.css |   32 +++++-----
 gtk/resources/theme/Adwaita/gtk-contained.css      |   32 +++++-----
 3 files changed, 53 insertions(+), 71 deletions(-)
---
diff --git a/gtk/resources/theme/Adwaita/_drawing.scss b/gtk/resources/theme/Adwaita/_drawing.scss
index fb327ac..99cbbfd 100644
--- a/gtk/resources/theme/Adwaita/_drawing.scss
+++ b/gtk/resources/theme/Adwaita/_drawing.scss
@@ -151,10 +151,8 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
     @else { border-color: $borders_color; }
 
     @include _button_text_shadow($tc,$c);
-    @if $noedge { box-shadow: inset 0 1px $_top_hilight; }
-    @else {
-      @include _shadows(inset 0 1px $_top_hilight, $widget_edge);
-    }
+    $_outsets: if($noedge, none, $widget_edge);
+    @include _shadows(inset 0 1px $_top_hilight, $_outsets);
   }
 
   @else if $t==hover {
@@ -170,10 +168,8 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
                                       $c);
 
     @include _button_text_shadow($tc,lighten($c,4%));
-    @if $noedge { box-shadow: inset 0 1px $_top_hilight; }
-    @else {
-      @include _shadows(inset 0 1px $_top_hilight, $widget_edge);
-    }
+    $_outsets: if($noedge, none, $widget_edge);
+    @include _shadows(inset 0 1px $_top_hilight, $_outsets);
   }
 
   @else if $t==active {
@@ -195,13 +191,8 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
                                         darken($c,5%) 3%);
     }
     @include _button_text_shadow($tc,darken($c,10%));
-    @if $noedge {
-      box-shadow: inset 0 2px 3px -1px transparentize(black,0.7);
-    }
-    @else {
-      @include _shadows(inset 0 2px 3px -1px transparentize(black,0.7),
-                        $widget_edge);
-    }
+    $_outsets: if($noedge, none, $widget_edge);
+    @include _shadows(inset 0 2px 3px -1px transparentize(black,0.7),$_outsets);
   }
   @else if $t==insensitive {
   //
@@ -212,15 +203,10 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
     background-image: linear-gradient(to bottom, $insensitive_bg_color);
     text-shadow: none;
     icon-shadow: none;
-    @if $noedge {
-      // white with 0 alpha to avoid an ugly transition, since no color means
-      // black with 0 alpha
-      box-shadow: inset 0 1px transparentize(white,1);
-    }
-    @else {
-      @include _shadows(inset 0 1px transparentize(white,1),
-                        $widget_edge);
-    }
+    $_outsets: if($noedge, none, $widget_edge);
+    // white with 0 alpha to avoid an ugly transition, since no color means
+    // black with 0 alpha
+    @include _shadows(inset 0 1px transparentize(white,1), $_outsets);
   }
   @else if $t==insensitive-active {
   //
@@ -231,15 +217,10 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
     background-image: linear-gradient(to bottom,
                         mix($insensitive_borders_color,
                             $insensitive_bg_color, 10%));
-    @if $noedge {
-      // white with 0 alpha to avoid an ugly transition, since no color means
-      // black with 0 alpha
-      box-shadow: inset 0 1px transparentize(white,1);
-    }
-    @else {
-      @include _shadows(inset 0 1px transparentize(white,1),
-                        $widget_edge);
-    }
+    $_outsets: if($noedge, none, $widget_edge);
+    // white with 0 alpha to avoid an ugly transition, since no color means
+    // black with 0 alpha
+    @include _shadows(inset 0 1px transparentize(white,1), $_outsets);
   }
 
   @else if $t==backdrop {
@@ -253,7 +234,7 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
     text-shadow: none;
     icon-shadow: none;
     @include _shadows(inset 0 1px transparentize(white,1),
-                      0 1px transparentize(white,1));
+                            0 1px transparentize(white,1));
   }
 
   @else if $t==backdrop-active {
@@ -264,8 +245,8 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
     border-color: $backdrop_borders_color;
     background-image: linear-gradient(to bottom,
                         mix($backdrop_borders_color,$backdrop_bg_color, 35%));
-    @include _shadows(inset 0 1px transparentize(white,1),
-                      0 1px transparentize(white,1));
+    box-shadow: inset 0 1px transparentize(white,1),
+                0 1px transparentize(white,1);
   }
 
   @else if $t==backdrop-insensitive {
@@ -275,7 +256,8 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
     color: $backdrop_insensitive_color;
     border-color: $backdrop_borders_color;
     background-image: linear-gradient(to bottom, $backdrop_bg_color);
-    box-shadow: inset 0 1px transparentize(white,1);
+    box-shadow: inset 0 1px transparentize(white,1),
+                0 1px transparentize(white,1);
   }
 
   @else if $t==backdrop-insensitive-active {
@@ -286,8 +268,8 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
     border-color: $backdrop_borders_color;
     background-image: linear-gradient(to bottom,
                         mix($backdrop_borders_color,$backdrop_bg_color, 8%));
-    @include _shadows(inset 0 1px transparentize(white,1),
-                      0 1px transparentize(white,1));
+    box-shadow: inset 0 1px transparentize(white,1),
+                0 1px transparentize(white,1);
   }
   
   @else if $t==osd {
diff --git a/gtk/resources/theme/Adwaita/gtk-contained-dark.css 
b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
index 173c5c4..65bd59e 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
@@ -108,14 +108,14 @@
   border: 1px solid #215d9c;
   background-color: rgba(33, 93, 156, 0.2); }
 
+.overshoot {
+  background-color: rgba(33, 93, 156, 0.2); }
+
 .dim-label, .titlebar .subtitle,
 .header-bar .subtitle {
   opacity: 0.55;
   text-shadow: none; }
 
-.overshoot {
-  background-color: rgba(33, 93, 156, 0.2); }
-
 /*********************
  * Spinner Animation *
  *********************/
@@ -299,7 +299,7 @@
       color: #454c4c;
       border-color: #1e2222;
       background-image: linear-gradient(to bottom, #393f3f);
-      box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
     .button:backdrop:insensitive:active, .button.flat:backdrop:insensitive:active {
       border-style: solid;
       color: #454c4c;
@@ -411,7 +411,7 @@
         color: #454c4c;
         border-color: #1e2222;
         background-image: linear-gradient(to bottom, #393f3f);
-        box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
     .button.suggested-action:insensitive {
       border-style: solid;
       color: #939695;
@@ -458,7 +458,7 @@
         color: #454c4c;
         border-color: #1e2222;
         background-image: linear-gradient(to bottom, #393f3f);
-        box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
     .button.destructive-action:insensitive {
       border-style: solid;
       color: #939695;
@@ -535,7 +535,7 @@
     color: #454c4c;
     border-color: #1e2222;
     background-image: linear-gradient(to bottom, #393f3f);
-    box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
   .inline-toolbar GtkToolButton > .button:backdrop:insensitive:active {
     border-style: solid;
     color: #454c4c;
@@ -750,7 +750,7 @@ GtkColorButton.button {
     color: #454c4c;
     border-color: #1e2222;
     background-image: linear-gradient(to bottom, #393f3f);
-    box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
   .spinbutton.vertical.entry {
     border-radius: 0; }
   .spinbutton.vertical .button:first-child, .spinbutton.vertical .button:first-child:active, 
.spinbutton.vertical .button:first-child:hover, .spinbutton.vertical .button:first-child:insensitive, 
.spinbutton.vertical .button:first-child:backdrop {
@@ -932,7 +932,7 @@ GtkComboBox {
         color: #454c4c;
         border-color: #1e2222;
         background-image: linear-gradient(to bottom, #393f3f);
-        box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
       .titlebar.selection-mode .button.suggested-action,
       .header-bar.selection-mode .button.suggested-action {
         border-style: solid;
@@ -990,7 +990,7 @@ GtkComboBox {
           color: #454c4c;
           border-color: #1e2222;
           background-image: linear-gradient(to bottom, #393f3f);
-          box-shadow: inset 0 1px rgba(255, 255, 255, 0);
+          box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0);
           border-color: #0f2b48; }
     .titlebar.selection-mode .selection-menu, .titlebar.selection-mode .selection-menu:backdrop,
     .header-bar.selection-mode .selection-menu,
@@ -1548,7 +1548,7 @@ GtkSwitch {
         color: #454c4c;
         border-color: #1e2222;
         background-image: linear-gradient(to bottom, #393f3f);
-        box-shadow: inset 0 1px rgba(255, 255, 255, 0);
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0);
         border-color: #454c4c; }
 
 /*************************
@@ -1937,7 +1937,7 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
       color: #454c4c;
       border-color: #1e2222;
       background-image: linear-gradient(to bottom, #393f3f);
-      box-shadow: inset 0 1px rgba(255, 255, 255, 0);
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0);
       border-color: #454c4c; }
     .scale.slider:active,
     .scale.scale-has-marks-above.scale-has-marks-below.slider:active,
@@ -2505,7 +2505,7 @@ GtkCalendar {
       color: #454c4c;
       border-color: #1e2222;
       background-image: linear-gradient(to bottom, #393f3f);
-      box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
     .message-dialog.csd .dialog-action-area .button.suggested-action {
       border-style: solid;
       border-width: 1px;
@@ -2544,7 +2544,7 @@ GtkCalendar {
           color: #454c4c;
           border-color: #1e2222;
           background-image: linear-gradient(to bottom, #393f3f);
-          box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+          box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
       .message-dialog.csd .dialog-action-area .button.suggested-action:insensitive {
         border-style: solid;
         color: #939695;
@@ -2591,7 +2591,7 @@ GtkCalendar {
           color: #454c4c;
           border-color: #1e2222;
           background-image: linear-gradient(to bottom, #393f3f);
-          box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+          box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
       .message-dialog.csd .dialog-action-area .button.destructive-action:insensitive {
         border-style: solid;
         color: #939695;
@@ -2733,7 +2733,7 @@ GtkInfoBar {
       color: #454c4c;
       border-color: #1e2222;
       background-image: linear-gradient(to bottom, #393f3f);
-      box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
 
 /************
  * Tooltips *
diff --git a/gtk/resources/theme/Adwaita/gtk-contained.css b/gtk/resources/theme/Adwaita/gtk-contained.css
index bf25d7f..e3f67c5 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained.css
@@ -108,14 +108,14 @@
   border: 1px solid #4a90d9;
   background-color: rgba(74, 144, 217, 0.2); }
 
+.overshoot {
+  background-color: rgba(74, 144, 217, 0.2); }
+
 .dim-label, .titlebar .subtitle,
 .header-bar .subtitle {
   opacity: 0.55;
   text-shadow: none; }
 
-.overshoot {
-  background-color: rgba(74, 144, 217, 0.2); }
-
 /*********************
  * Spinner Animation *
  *********************/
@@ -291,7 +291,7 @@
       color: #c7c7c7;
       border-color: #a8a8a8;
       background-image: linear-gradient(to bottom, #ededed);
-      box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
     .button:backdrop:insensitive:active, .button.flat:backdrop:insensitive:active {
       border-style: solid;
       color: #c7c7c7;
@@ -403,7 +403,7 @@
         color: #c7c7c7;
         border-color: #a8a8a8;
         background-image: linear-gradient(to bottom, #ededed);
-        box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
     .button.suggested-action:insensitive {
       border-style: solid;
       color: #8d9091;
@@ -450,7 +450,7 @@
         color: #c7c7c7;
         border-color: #a8a8a8;
         background-image: linear-gradient(to bottom, #ededed);
-        box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
     .button.destructive-action:insensitive {
       border-style: solid;
       color: #8d9091;
@@ -527,7 +527,7 @@
     color: #c7c7c7;
     border-color: #a8a8a8;
     background-image: linear-gradient(to bottom, #ededed);
-    box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
   .inline-toolbar GtkToolButton > .button:backdrop:insensitive:active {
     border-style: solid;
     color: #c7c7c7;
@@ -742,7 +742,7 @@ GtkColorButton.button {
     color: #c7c7c7;
     border-color: #a8a8a8;
     background-image: linear-gradient(to bottom, #ededed);
-    box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
   .spinbutton.vertical.entry {
     border-radius: 0; }
   .spinbutton.vertical .button:first-child, .spinbutton.vertical .button:first-child:active, 
.spinbutton.vertical .button:first-child:hover, .spinbutton.vertical .button:first-child:insensitive, 
.spinbutton.vertical .button:first-child:backdrop {
@@ -924,7 +924,7 @@ GtkComboBox {
         color: #c7c7c7;
         border-color: #a8a8a8;
         background-image: linear-gradient(to bottom, #ededed);
-        box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
       .titlebar.selection-mode .button.suggested-action,
       .header-bar.selection-mode .button.suggested-action {
         border-style: solid;
@@ -982,7 +982,7 @@ GtkComboBox {
           color: #c7c7c7;
           border-color: #a8a8a8;
           background-image: linear-gradient(to bottom, #ededed);
-          box-shadow: inset 0 1px rgba(255, 255, 255, 0);
+          box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0);
           border-color: #184472; }
     .titlebar.selection-mode .selection-menu, .titlebar.selection-mode .selection-menu:backdrop,
     .header-bar.selection-mode .selection-menu,
@@ -1541,7 +1541,7 @@ GtkSwitch {
         color: #c7c7c7;
         border-color: #a8a8a8;
         background-image: linear-gradient(to bottom, #ededed);
-        box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
 
 /*************************
  * Check and Radio items *
@@ -1929,7 +1929,7 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
       color: #c7c7c7;
       border-color: #a8a8a8;
       background-image: linear-gradient(to bottom, #ededed);
-      box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
     .scale.slider:active,
     .scale.scale-has-marks-above.scale-has-marks-below.slider:active,
     .scale.vertical.scale-has-marks-above.scale-has-marks-below.slider:active {
@@ -2497,7 +2497,7 @@ GtkCalendar {
       color: #c7c7c7;
       border-color: #a8a8a8;
       background-image: linear-gradient(to bottom, #ededed);
-      box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
     .message-dialog.csd .dialog-action-area .button.suggested-action {
       border-style: solid;
       border-width: 1px;
@@ -2536,7 +2536,7 @@ GtkCalendar {
           color: #c7c7c7;
           border-color: #a8a8a8;
           background-image: linear-gradient(to bottom, #ededed);
-          box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+          box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
       .message-dialog.csd .dialog-action-area .button.suggested-action:insensitive {
         border-style: solid;
         color: #8d9091;
@@ -2583,7 +2583,7 @@ GtkCalendar {
           color: #c7c7c7;
           border-color: #a8a8a8;
           background-image: linear-gradient(to bottom, #ededed);
-          box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+          box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
       .message-dialog.csd .dialog-action-area .button.destructive-action:insensitive {
         border-style: solid;
         color: #8d9091;
@@ -2725,7 +2725,7 @@ GtkInfoBar {
       color: #c7c7c7;
       border-color: #a8a8a8;
       background-image: linear-gradient(to bottom, #ededed);
-      box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
 
 /************
  * Tooltips *
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]