GNOME.org
 

[gtk+/wip/otte/tokenizer: 1/78] theme: Add _solid() function

commit 7a69ea89caf2cd482493623b1c46ef0013184090
Author: Benjamin Otte <otte redhat com>
Date:   Sun Mar 27 19:41:19 2016 +0200

    theme: Add _solid() function
    
    The function creates a solid color image. Currently this is done with
    linear-gradient().

 gtk/theme/Adwaita/_common.scss                   |   28 +++++++-------
 gtk/theme/Adwaita/_drawing.scss                  |   41 ++++++++++++---------
 gtk/theme/Adwaita/gtk-contained-dark.css         |   14 ++++----
 gtk/theme/Adwaita/gtk-contained.css              |   14 ++++----
 gtk/theme/HighContrast/_common.scss              |   12 +++---
 gtk/theme/HighContrast/_drawing.scss             |   11 ++++--
 gtk/theme/HighContrast/gtk-contained-inverse.css |    2 +-
 gtk/theme/HighContrast/gtk-contained.css         |    2 +-
 8 files changed, 67 insertions(+), 57 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 7724ebf..78820e1 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -363,11 +363,11 @@ entry {
     &:not(:disabled) + entry:not(:disabled),
     &:not(:disabled) + %entry:not(:disabled) {
       border-top-color: mix($borders_color, $base_color, 30%);
-      background-image: linear-gradient(to bottom, $base_color);
+      background-image: _solid($base_color);
 
       &:backdrop {
         border-top-color: mix($backdrop_borders_color, $backdrop_base_color, 30%);
-        background-image: linear-gradient(to bottom, $backdrop_base_color);
+        background-image: _solid($backdrop_base_color);
       }
     }
 
@@ -1451,7 +1451,7 @@ headerbar {
     .selection-menu {
       &:backdrop, & {
         border-color: transparentize($selected_bg_color, 1);
-        background-image: linear-gradient(to bottom, transparentize($selected_bg_color, 1));
+        background-image: _solid(transparentize($selected_bg_color, 1));
         box-shadow: none;
         padding-left: 10px;
         padding-right: 10px;
@@ -2411,7 +2411,7 @@ switch {
   border: 1px solid $borders_color;
   border-radius: 3px;
   color: $fg_color;
-  background-image: linear-gradient(to bottom, mix($bg_color, $borders_color, 60%));
+  background-image: _solid(mix($bg_color, $borders_color, 60%));
   text-shadow: 0 1px transparentize(black, 0.9);
 
   &:checked {
@@ -2436,7 +2436,7 @@ switch {
   &:backdrop {
     color: $backdrop_fg_color;
     border-color: $backdrop_borders_color;
-    background-image: linear-gradient(to bottom, $backdrop_dark_fill);
+    background-image: _solid($backdrop_dark_fill);
     box-shadow: none;
     text-shadow: none;
     transition: $backdrop_transition;
@@ -2445,7 +2445,7 @@ switch {
       @if $variant == 'light' { color: $backdrop_bg_color; }
       border-color: if($variant == 'light', $selected_bg_color,
                                             $selected_borders_color);
-      background-image: linear-gradient(to bottom, $selected_bg_color);
+      background-image: _solid($selected_bg_color);
       box-shadow: none;
     }
   }
@@ -3004,7 +3004,7 @@ scale {
     min-width: 0;
 
     trough {
-      background-image: linear-gradient(to top, $borders_color);
+      background-image: _solid($borders_color);
       background-repeat: no-repeat;
     }
 
@@ -3726,7 +3726,7 @@ placessidebar {
     &.sidebar-placeholder-row {
       padding: 0 8px;
       min-height: 2px;
-      background-image: image($drop_target_color);
+      background-image: _solid($drop_target_color);
       background-clip: content-box;
     }
 
@@ -3771,24 +3771,24 @@ paned {
     border-style: none; // just to be sure
     background-color: transparent;
     // workaround, using background istead of a border since the border will get rendered twice (?)
-    background-image: image($borders_color);
+    background-image: _solid($borders_color);
     background-size: 1px 1px;
 
-    &:selected { background-image: image($selected_bg_color); } // FIXME is this needed?
+    &:selected { background-image: _solid($selected_bg_color); } // FIXME is this needed?
 
-    &:backdrop { background-image: image($backdrop_borders_color); }
+    &:backdrop { background-image: _solid($backdrop_borders_color); }
 
     &.wide {
       min-width: 5px;
       min-height: 5px;
       background-color: $bg_color;
-      background-image: image($borders_color), image($borders_color);
+      background-image: _solid($borders_color), _solid($borders_color);
       background-size: 1px 1px, 1px 1px;
 
       &:backdrop {
         background-color: $backdrop_bg_color;
-        background-image: image($backdrop_borders_color),
-                          image($backdrop_borders_color);
+        background-image: _solid($backdrop_borders_color),
+                          _solid($backdrop_borders_color);
       }
     }
   }
diff --git a/gtk/theme/Adwaita/_drawing.scss b/gtk/theme/Adwaita/_drawing.scss
index 206387e..a289e21 100644
--- a/gtk/theme/Adwaita/_drawing.scss
+++ b/gtk/theme/Adwaita/_drawing.scss
@@ -8,6 +8,11 @@
   @else { @return 0 1px $c; }
 }
 
+@function _solid($c) {
+// solid color image
+  @return linear-gradient(to bottom, $c);
+}
+
 @mixin _shadows($shadow1, $shadow2:none, $shadow3:none, $shadow4:none) {
 //
 // Helper function to stack up to 4 box-shadows;
@@ -68,25 +73,25 @@
   @if $t==insensitive {
     color: $insensitive_fg_color;
     border-color: $borders_color;
-    background-image: linear-gradient(to bottom, $insensitive_bg_color);
+    background-image: _solid($insensitive_bg_color);
     box-shadow: $_entry_edge;
   }
   @if $t==backdrop {
     color: $backdrop_text_color;
     border-color: $backdrop_borders_color;
-    background-image: linear-gradient(to bottom, $backdrop_base_color);
+    background-image: _solid($backdrop_base_color);
     box-shadow: $_blank_edge;
   }
   @if $t==backdrop-insensitive {
     color: $backdrop_insensitive_color;
     border-color: $backdrop_borders_color;
-    background-image: linear-gradient(to bottom, $insensitive_bg_color);
+    background-image: _solid($insensitive_bg_color);
     box-shadow: $_blank_edge;
   }
   @if $t==osd {
     color: $osd_text_color;
     border-color: $osd_borders_color;
-    background-image: linear-gradient(to bottom, transparentize(opacify($osd_borders_color, 1), 0.5));
+    background-image: _solid(transparentize(opacify($osd_borders_color, 1), 0.5));
     background-clip: padding-box;
     box-shadow: none;
     text-shadow: 0 1px black;
@@ -95,7 +100,7 @@
   @if $t==osd-focus {
     color: $osd_text_color;
     border-color: $selected_bg_color;
-    background-image: linear-gradient(to bottom, transparentize(opacify($osd_borders_color, 1), 0.5));
+    background-image: _solid(transparentize(opacify($osd_borders_color, 1), 0.5));
     background-clip: padding-box;
     box-shadow: entry_focus_shadow($fc);
     text-shadow: 0 1px black;
@@ -104,7 +109,7 @@
   @if $t==osd-insensitive {
     color: $osd_insensitive_fg_color;
     border-color: $osd_borders_color;
-    background-image: linear-gradient(to bottom, $osd_insensitive_bg_color);
+    background-image: _solid($osd_insensitive_bg_color);
     background-clip: padding-box;
     box-shadow: none;
     text-shadow: none;
@@ -113,7 +118,7 @@
   @if $t==osd-backdrop {
     color: $osd_text_color;
     border-color: $osd_borders_color;
-    background-image: linear-gradient(to bottom, transparentize(opacify($osd_borders_color, 1), 0.5));
+    background-image: _solid(transparentize(opacify($osd_borders_color, 1), 0.5));
     background-clip: padding-box;
     box-shadow: none;
     text-shadow: none;
@@ -297,7 +302,7 @@
 
     border-color: if($c!=$bg_color, _border_color($c),
                                     $insensitive_borders_color);
-    background-image: linear-gradient(to bottom, $_bg);
+    background-image: _solid($_bg);
     text-shadow: none;
     -gtk-icon-shadow: none;
     // white with 0 alpha to avoid an ugly transition, since no color means
@@ -331,7 +336,7 @@
     label, & { color: if($tc!=$fg_color,mix($tc, $_bg, 80%), $backdrop_fg_color); }
 
     border-color: if($c!=$bg_color, $_bc, $backdrop_borders_color);
-    background-image: linear-gradient(to bottom, $_bg);
+    background-image: _solid($_bg);
     text-shadow: none;
     -gtk-icon-shadow: none;
     @include _shadows(inset 0 1px transparentize(white, 1),
@@ -348,7 +353,7 @@
     label, & { color: if($tc!=$fg_color, mix($tc, $_bg, 80%), $backdrop_fg_color); }
 
     border-color: if($c!=$bg_color, $_bc, $backdrop_borders_color);
-    background-image: linear-gradient(to bottom, $_bg);
+    background-image: _solid($_bg);
     @include _shadows(inset 0 1px transparentize(white, 1),
                       $_blank_edge);
   }
@@ -364,7 +369,7 @@
     label, & { color: if($c!=$bg_color, mix($tc, $_bg, 35%), $backdrop_insensitive_color); }
 
     border-color: if($c!=$bg_color, $_bc, $backdrop_borders_color);
-    background-image: linear-gradient(to bottom, $_bg);
+    background-image: _solid($_bg);
     text-shadow: none;
     -gtk-icon-shadow: none;
     // white with 0 alpha to avoid an ugly transition, since no color means
@@ -385,7 +390,7 @@
     label { color: if($c!=$bg_color, mix($tc, $_bg, 35%), $backdrop_insensitive_color); }
 
     border-color: if($c!=$bg_color, $_bc, $backdrop_borders_color);
-    background-image: linear-gradient(to bottom, $_bg);
+    background-image: _solid($_bg);
     @include _shadows(inset 0 1px transparentize(white, 1),
                       $_blank_edge);
   }
@@ -399,7 +404,7 @@
 
     color: $osd_fg_color;
     border-color: $osd_borders_color;
-    background-image: linear-gradient(to bottom, $_bg);
+    background-image: _solid($_bg);
     background-clip: padding-box;
     box-shadow: inset 0 1px transparentize(white, 0.9);
     text-shadow: 0 1px black;
@@ -415,7 +420,7 @@
 
     color: white;
     border-color: $osd_borders_color;
-    background-image: linear-gradient(to bottom, $_bg);
+    background-image: _solid($_bg);
     background-clip: padding-box;
     box-shadow: inset 0 1px transparentize(white, 0.9);
     text-shadow: 0 1px black;
@@ -430,7 +435,7 @@
 
     color: white;
     border-color: $osd_borders_color;
-    background-image: linear-gradient(to bottom, $_bg);
+    background-image: _solid($_bg);
     background-clip: padding-box;
     box-shadow: none;
     text-shadow: none;
@@ -443,7 +448,7 @@
   //
     color: $osd_insensitive_fg_color;
     border-color: $osd_borders_color;
-    background-image: linear-gradient(to bottom, $osd_insensitive_bg_color);
+    background-image: _solid($osd_insensitive_bg_color);
     background-clip: padding-box;
     box-shadow: none;
     text-shadow: none;
@@ -458,7 +463,7 @@
 
     color: $osd_fg_color;
     border-color: $osd_borders_color;
-    background-image: linear-gradient(to bottom, $_bg);
+    background-image: _solid($_bg);
     background-clip: padding-box;
     box-shadow: none;
     text-shadow: none;
@@ -482,7 +487,7 @@
 
 @mixin trough($flat:false, $c:$bg_color, $tc:$fg_color, $noedge:true) {
   color: mix($tc, $bg_color, 80%);
-  @if $flat { background-image: linear-gradient(to bottom, $c); }
+  @if $flat { background-image: _solid($c); }
   @else {
     background-image: linear-gradient(to bottom,
                                       mix(black,$c,15%) 5%,
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index 9a97f03..feb406c 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -3463,7 +3463,7 @@ scale {
     min-height: 0;
     min-width: 0; }
     scale.color trough {
-      background-image: linear-gradient(to top, #1c1f1f);
+      background-image: linear-gradient(to bottom, #1c1f1f);
       background-repeat: no-repeat; }
     scale.color.horizontal {
       padding: 0 0 15px 0; }
@@ -3993,7 +3993,7 @@ placessidebar row {
   placessidebar row.sidebar-placeholder-row {
     padding: 0 8px;
     min-height: 2px;
-    background-image: image(#4e9a06);
+    background-image: linear-gradient(to bottom, #4e9a06);
     background-clip: content-box; }
   placessidebar row.sidebar-new-bookmark-row {
     color: #215d9c; }
@@ -4022,21 +4022,21 @@ paned > separator {
   -gtk-icon-source: none;
   border-style: none;
   background-color: transparent;
-  background-image: image(#1c1f1f);
+  background-image: linear-gradient(to bottom, #1c1f1f);
   background-size: 1px 1px; }
   paned > separator:selected {
-    background-image: image(#215d9c); }
+    background-image: linear-gradient(to bottom, #215d9c); }
   paned > separator:backdrop {
-    background-image: image(#1f2222); }
+    background-image: linear-gradient(to bottom, #1f2222); }
   paned > separator.wide {
     min-width: 5px;
     min-height: 5px;
     background-color: #393f3f;
-    background-image: image(#1c1f1f), image(#1c1f1f);
+    background-image: linear-gradient(to bottom, #1c1f1f), linear-gradient(to bottom, #1c1f1f);
     background-size: 1px 1px, 1px 1px; }
     paned > separator.wide:backdrop {
       background-color: #393f3f;
-      background-image: image(#1f2222), image(#1f2222); }
+      background-image: linear-gradient(to bottom, #1f2222), linear-gradient(to bottom, #1f2222); }
 paned.horizontal > separator {
   background-repeat: repeat-y; }
   paned.horizontal > separator:dir(ltr) {
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index d0fc8a1..7d3d752 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -3492,7 +3492,7 @@ scale {
     min-height: 0;
     min-width: 0; }
     scale.color trough {
-      background-image: linear-gradient(to top, #9d9d99);
+      background-image: linear-gradient(to bottom, #9d9d99);
       background-repeat: no-repeat; }
     scale.color.horizontal {
       padding: 0 0 15px 0; }
@@ -4022,7 +4022,7 @@ placessidebar row {
   placessidebar row.sidebar-placeholder-row {
     padding: 0 8px;
     min-height: 2px;
-    background-image: image(#4e9a06);
+    background-image: linear-gradient(to bottom, #4e9a06);
     background-clip: content-box; }
   placessidebar row.sidebar-new-bookmark-row {
     color: #4a90d9; }
@@ -4051,21 +4051,21 @@ paned > separator {
   -gtk-icon-source: none;
   border-style: none;
   background-color: transparent;
-  background-image: image(#9d9d99);
+  background-image: linear-gradient(to bottom, #9d9d99);
   background-size: 1px 1px; }
   paned > separator:selected {
-    background-image: image(#4a90d9); }
+    background-image: linear-gradient(to bottom, #4a90d9); }
   paned > separator:backdrop {
-    background-image: image(#a5a5a1); }
+    background-image: linear-gradient(to bottom, #a5a5a1); }
   paned > separator.wide {
     min-width: 5px;
     min-height: 5px;
     background-color: #e8e8e7;
-    background-image: image(#9d9d99), image(#9d9d99);
+    background-image: linear-gradient(to bottom, #9d9d99), linear-gradient(to bottom, #9d9d99);
     background-size: 1px 1px, 1px 1px; }
     paned > separator.wide:backdrop {
       background-color: #e8e8e7;
-      background-image: image(#a5a5a1), image(#a5a5a1); }
+      background-image: linear-gradient(to bottom, #a5a5a1), linear-gradient(to bottom, #a5a5a1); }
 paned.horizontal > separator {
   background-repeat: repeat-y; }
   paned.horizontal > separator:dir(ltr) {
diff --git a/gtk/theme/HighContrast/_common.scss b/gtk/theme/HighContrast/_common.scss
index 7eaac03..29f567a 100644
--- a/gtk/theme/HighContrast/_common.scss
+++ b/gtk/theme/HighContrast/_common.scss
@@ -297,11 +297,11 @@ entry {
     &:not(:disabled) + entry:not(:disabled),
     &:not(:disabled) + %entry:not(:disabled) {
       border-top-color: mix($borders_color, $base_color, 30%);
-      background-image: linear-gradient(to bottom, $base_color);
+      background-image: _solid($base_color);
 
       &:backdrop {
         border-top-color: mix($backdrop_borders_color, $backdrop_base_color, 30%);
-        background-image: linear-gradient(to bottom, $backdrop_base_color);
+        background-image: _solid($backdrop_base_color);
       }
     }
 
@@ -2781,7 +2781,7 @@ calendar {
                                 darken($bg_color,2%));
     border-bottom-color: mix($borders_color,$bg_color,50%);
     &:backdrop {
-      background-image: linear-gradient(to bottom, $backdrop_bg_color);
+      background-image: _solid($backdrop_bg_color);
       border-bottom-color: mix($backdrop_borders_color,$backdrop_bg_color,50%);
     }
   }
@@ -2980,7 +2980,7 @@ placessidebar {
     &.sidebar-placeholder-row {
       padding: 0 8px;
       min-height: 2px;
-      background-image: image($fg_color);
+      background-image: _solid($fg_color);
       background-clip: content-box;
     }
 
@@ -3023,9 +3023,9 @@ paned {
   separator {
     min-width: 1px;
     min-height: 1px;
-    background-image: linear-gradient(to bottom, $borders_color);
+    background-image: _solid($borders_color);
     &:backdrop {
-      background-image: linear-gradient(to bottom, $backdrop_borders_color);
+      background-image: _solid($backdrop_borders_color);
     }
   }
    &:dir(ltr).horizontal separator {
diff --git a/gtk/theme/HighContrast/_drawing.scss b/gtk/theme/HighContrast/_drawing.scss
index 8962706..43b2de1 100644
--- a/gtk/theme/HighContrast/_drawing.scss
+++ b/gtk/theme/HighContrast/_drawing.scss
@@ -6,6 +6,11 @@
   @return 0 1px $c;
 }
 
+@function _solid($c) {
+// solid color image
+  @return linear-gradient(to bottom, $c);
+}
+
 @mixin _shadows($shadow1, $shadow2:none, $shadow3:none, $shadow4:none) {
 //
 // Helper function to stack up to 4 box-shadows;
@@ -64,17 +69,17 @@
   @if $t==insensitive {
     color: $insensitive_fg_color;
     border-color: $borders_color;
-    background-image: linear-gradient(to bottom, $insensitive_bg_color);
+    background-image: _solid($insensitive_bg_color);
     @include _shadows($_entry_edge);
   }
   @if $t==backdrop {
     color: $backdrop_fg_color;
-    background-image: linear-gradient(to bottom, $backdrop_base_color);
+    background-image: _solid($backdrop_base_color);
     box-shadow: 0 1px transparentize(white,1);
   }
   @if $t==backdrop-insensitive {
     color: $insensitive_fg_color;
-    background-image: linear-gradient(to bottom, $backdrop_bg_color);
+    background-image: _solid($backdrop_bg_color);
     box-shadow: 0 1px transparentize(white,1);
   }
 }
diff --git a/gtk/theme/HighContrast/gtk-contained-inverse.css 
b/gtk/theme/HighContrast/gtk-contained-inverse.css
index adf2404..a83cd3b 100644
--- a/gtk/theme/HighContrast/gtk-contained-inverse.css
+++ b/gtk/theme/HighContrast/gtk-contained-inverse.css
@@ -3094,7 +3094,7 @@ placessidebar row {
   placessidebar row.sidebar-placeholder-row {
     padding: 0 8px;
     min-height: 2px;
-    background-image: image(#fff);
+    background-image: linear-gradient(to bottom, #fff);
     background-clip: content-box; }
   placessidebar row.sidebar-new-bookmark-row {
     color: #aaa; }
diff --git a/gtk/theme/HighContrast/gtk-contained.css b/gtk/theme/HighContrast/gtk-contained.css
index 7955d1e..bcb8019 100644
--- a/gtk/theme/HighContrast/gtk-contained.css
+++ b/gtk/theme/HighContrast/gtk-contained.css
@@ -3101,7 +3101,7 @@ placessidebar row {
   placessidebar row.sidebar-placeholder-row {
     padding: 0 8px;
     min-height: 2px;
-    background-image: image(#000);
+    background-image: linear-gradient(to bottom, #000);
     background-clip: content-box; }
   placessidebar row.sidebar-new-bookmark-row {
     color: #000; }
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]