[gnome-themes-standard/wip/sass] entry work - added entry drawing function - modified _shadows helper function to deal with 'none



commit 02a1f54dbb76624e5caf99ddbe4a82f262d546f6
Author: Lapo Calamandrei <calamandrei gmail com>
Date:   Tue May 27 20:49:21 2014 +0200

    entry work
      - added entry drawing function
      - modified _shadows helper function to deal with 'none'
      - rewrote the entry section to use the new function

 themes/Adwaita/gtk-3.0/_common.scss           |   79 +++++++-----------------
 themes/Adwaita/gtk-3.0/_drawing.scss          |   59 +++++++++++++++++--
 themes/Adwaita/gtk-3.0/gtk-contained-dark.css |   61 ++++++++++++-------
 themes/Adwaita/gtk-3.0/gtk-contained.css      |   59 ++++++++++++-------
 4 files changed, 154 insertions(+), 104 deletions(-)
---
diff --git a/themes/Adwaita/gtk-3.0/_common.scss b/themes/Adwaita/gtk-3.0/_common.scss
index 48ff3c0..e262488 100644
--- a/themes/Adwaita/gtk-3.0/_common.scss
+++ b/themes/Adwaita/gtk-3.0/_common.scss
@@ -154,49 +154,17 @@ GtkGrid:insensitive {
 
 .entry {
   padding: 4px;
-  color: $fg_color;
   border-radius: 3px;
   transition: all 200ms ease-out;
-  border: 1px solid $borders_color;
-  background-image: linear-gradient(to bottom,
-                                      darken($base_color,3%) 0%,
-                                      $base_color 90%
-                                      );
-
-  $_entry_shade: mix(black, $base_color, 50%);
-
-  box-shadow: inset 0 2px 2px -2px $_entry_shade,
-              0 1px $borders_edge;
-
-  background-color: transparent; // this needs to be 'transparent'
-                                 // if we need a flat bg, let's abuse a gradient
-
-  &:insensitive {
-    color: $insensitive_fg_color;
-    background-image: linear-gradient(to bottom, $bg_color);
-    box-shadow: 0 1px $borders_edge;
-  }
-  &:focus {
-    border-color: $selected_bg_color;
-    box-shadow: inset 0 2px 2px -2px $_entry_shade,
-                inset 0 0 2px 1px mix($selected_bg_color, $base_color, 20%), // focus indicator
-                0 1px $borders_edge;
-  }
-  &:selected, &:backdrop:selected {
-    color: $selected_fg_color;
+  @include entry(normal);
+  &:focus { @include entry(focus); }
+  &:insensitive { @include entry(insensitive); }
+  &:backdrop { @include entry(backdrop); }
+  &:backdrop:insensitive { @include entry(backdrop-insensitive); }
+  &:selected, &backdrop:selected {
     background-color: $selected_bg_color;
+    color: $selected_fg_color;
   }
-  &:backdrop {
-    color: $backdrop_fg_color;
-    border-color: $backdrop_borders_color;
-    background-image: linear-gradient(to bottom, $backdrop_base_color);
-    box-shadow: 0 1px transparentize($borders_edge,1); // not to flicker on transitions
-  }
-  &:backdrop:insensitive {
-    color: $backdrop_insensitive_color;
-    background-image: linear-gradient(to bottom, $backdrop_bg_color);
-  }
-
   &.progressbar {
     margin: 1px;
     border-radius: 0;
@@ -206,17 +174,16 @@ GtkGrid:insensitive {
     background-image: none;
     box-shadow: none;
   }
-}
-
-.linked .entry {
-  &:first-child {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    border-right-width: 0;
-  }
-  &:last-child {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
+  .linked & {
+    &:first-child {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+      border-right-width: 0;
+    }
+    &:last-child {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
   }
 }
 
@@ -294,7 +261,7 @@ GtkGrid:insensitive {
       border-right-width: 1px;
     }
   }
-  
+
   // headerbar buttons
   .header-bar & {
     &.text-button {
@@ -305,7 +272,7 @@ GtkGrid:insensitive {
       padding: 8px;
     }
   }
-  
+
   .primary-toolbar & { icon-shadow: none; } // tango icons don't need added shadows
 }
 
@@ -535,7 +502,7 @@ GtkComboBox {
  **************/
 
 column-header {
-  .button, 
+  .button,
   .button:hover,
   .button:active,
   .button:backdrop {
@@ -756,7 +723,7 @@ GtkSwitch {
       &:backdrop { include trough($flat:true, $c:darken($bg_color, 10%));}
       &:backdrop:insensitive { include trough($flat:true, $c:$bg_color);}
     }
-    &.slider { 
+    &.slider {
       border-radius: 3px;
       @include button(normal, $noedge:true);
       &:active { border: 1px solid darken($selected_bg_color, 20%); }
@@ -797,10 +764,10 @@ GtkScrolledWindow {
   border-radius: 7px 7px 0 0;
   /* lamefun trick to get rounded borders regardless of CSD use */
   border-width: 0px;
-  
+
   // this needs to be transparent
   // see bug #722563
-  $_wm_border: if($variant=='light', transparentize(black, 0.8), transparentize(black, 0.4)); 
+  $_wm_border: if($variant=='light', transparentize(black, 0.8), transparentize(black, 0.4));
   box-shadow: 0 2px 10px 4px transparentize(black, 0.9),
               0 0 0 1px $_wm_border;
 
diff --git a/themes/Adwaita/gtk-3.0/_drawing.scss b/themes/Adwaita/gtk-3.0/_drawing.scss
index 7244548..115791d 100644
--- a/themes/Adwaita/gtk-3.0/_drawing.scss
+++ b/themes/Adwaita/gtk-3.0/_drawing.scss
@@ -5,16 +5,65 @@
 $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
                                              //most widgets, FIXME 1px
 
- mixin _shadows($shadow1, $shadow2:false, $shadow3:false, $shadow4:false) {
+ mixin _shadows($shadow1, $shadow2:none, $shadow3:none, $shadow4:none) {
 //
 // Helper function to stack up to 4 box-shadows;
 //
-  @if $shadow2 {box-shadow: $shadow1, $shadow2;}
-  @else if $shadow3 {box-shadow: $shadow1, $shadow2, $shadow3;}
-  @else if $shadow4 {box-shadow: $shadow1, $shadow2, $shadow3, shadow4;}
+  @if $shadow2!=none {box-shadow: $shadow1, $shadow2;}
+  @else if $shadow3!=none {box-shadow: $shadow1, $shadow2, $shadow3;}
+  @else if $shadow4!=none {box-shadow: $shadow1, $shadow2, $shadow3, shadow4;}
   @else { box-shadow: $shadow1; }
 }
 
+// entries
+
+ mixin entry($t, $noedge:false) {
+//
+// Entries drawing function
+//
+// $t: entry type
+// $noedge: set to true not to draw the bottom edge hilight
+//
+// possible $t values:
+// normal, focus, insensitive, backdrop, backdrop-insensitive;
+//
+  background-color: transparent;
+  border-style: solid;
+  border-width: 1px;
+  background-image: linear-gradient(to bottom,
+                                    darken($base_color,3%),
+                                    $base_color 90%);
+  $_entry_edge: $widget_edge;
+  @if $noedge { $_entry_edge: none; }
+
+  @if $t==normal {
+    border-color: $borders_color;
+    @include _shadows(inset 0 2px 2px -2px mix(black, $base_color, 50%),
+                      $_entry_edge);
+  }
+  @if $t==focus {
+    border-color: $selected_bg_color;
+    @include _shadows(inset 0 2px 2px -2px mix(black, $base_color, 50%),
+                      inset 0 0 2px 1px mix($selected_bg_color,$base_color,20%),
+                      $_entry_edge);
+  }
+  @if $t==insensitive {
+    color: $insensitive_fg_color;
+    border-color: $borders_color;
+    background-image: linear-gradient(to bottom, $insensitive_bg_color);
+    @include _shadows($_entry_edge);
+  }
+  @if $t==backdrop {
+    color: $backdrop_fg_color;
+    background-image: linear-gradient(to bottom, $backdrop_base_color);
+    box-shadow: 0 1px transparentize(white,1);
+  }
+  @if $t==backdrop-insensitive {
+    color: $backdrop_insensitive_color;
+    background-image: linear-gradient(to bottom, $backdrop_bg_color);
+    box-shadow: 0 1px transparentize(white,1);
+  }
+}
 
 // buttons
 
@@ -53,7 +102,7 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
 // $t:  button type,
 // $c:  base button color for colored* types
 // $tc: optional text color for colored* types
-// $noedge: set to true not to draw the bottom hilight
+// $noedge: set to true not to draw the bottom edge hilight
 //
 // possible $t values:
 // normal, hover, active, insensitive, insensitive-active,
diff --git a/themes/Adwaita/gtk-3.0/gtk-contained-dark.css b/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
index 6be6be5..ce8e440 100644
--- a/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
+++ b/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
@@ -112,31 +112,49 @@ GtkGrid:insensitive {
  ****************/
 .entry {
   padding: 4px;
-  color: #eeeeec;
   border-radius: 3px;
   transition: all 200ms ease-out;
-  border: 1px solid #1c1f1f;
-  background-image: linear-gradient(to bottom, #2b2b2b 0%, #333333 90%);
-  box-shadow: inset 0 2px 2px -2px #191919, 0 1px rgba(238, 238, 236, 0.1);
-  background-color: transparent; }
+  background-color: transparent;
+  border-style: solid;
+  border-width: 1px;
+  background-image: linear-gradient(to bottom, #2b2b2b, #333333 90%);
+  border-color: #1c1f1f;
+  box-shadow: inset 0 2px 2px -2px #191919, 0 1px rgba(238, 238, 236, 0.1); }
+  .entry:focus {
+    background-color: transparent;
+    border-style: solid;
+    border-width: 1px;
+    background-image: linear-gradient(to bottom, #2b2b2b, #333333 90%);
+    border-color: #2a76c6;
+    box-shadow: inset 0 2px 2px -2px #191919, inset 0 0 2px 1px #314050; }
   .entry:insensitive {
+    background-color: transparent;
+    border-style: solid;
+    border-width: 1px;
+    background-image: linear-gradient(to bottom, #2b2b2b, #333333 90%);
     color: white;
+    border-color: #1c1f1f;
     background-image: linear-gradient(to bottom, #393f3f);
     box-shadow: 0 1px rgba(238, 238, 236, 0.1); }
-  .entry:focus {
-    border-color: #2a76c6;
-    box-shadow: inset 0 2px 2px -2px #191919, inset 0 0 2px 1px #314050, 0 1px rgba(238, 238, 236, 0.1); }
-  .entry:selected, .entry:backdrop:selected {
-    color: white;
-    background-color: #2a76c6; }
   .entry:backdrop {
+    background-color: transparent;
+    border-style: solid;
+    border-width: 1px;
+    background-image: linear-gradient(to bottom, #2b2b2b, #333333 90%);
     color: #eeeeec;
-    border-color: #1c1f1f;
     background-image: linear-gradient(to bottom, #262626);
-    box-shadow: 0 1px rgba(238, 238, 236, 0); }
+    box-shadow: 0 1px rgba(255, 255, 255, 0); }
   .entry:backdrop:insensitive {
+    background-color: transparent;
+    border-style: solid;
+    border-width: 1px;
+    background-image: linear-gradient(to bottom, #2b2b2b, #333333 90%);
     color: white;
-    background-image: linear-gradient(to bottom, #393f3f); }
+    background-image: linear-gradient(to bottom, #393f3f);
+    box-shadow: 0 1px rgba(255, 255, 255, 0); }
+  .entry:selected, .entrybackdrop:selected {
+    background-color: #2a76c6;
+    color: white; }
   .entry.progressbar {
     margin: 1px;
     border-radius: 0;
@@ -145,14 +163,13 @@ GtkGrid:insensitive {
     border-style: solid;
     background-image: none;
     box-shadow: none; }
-
-.linked .entry:first-child {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  border-right-width: 0; }
-.linked .entry:last-child {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0; }
+  .linked .entry:first-child {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    border-right-width: 0; }
+  .linked .entry:last-child {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0; }
 
 /***********
  * Buttons *
diff --git a/themes/Adwaita/gtk-3.0/gtk-contained.css b/themes/Adwaita/gtk-3.0/gtk-contained.css
index bea7f7d..4bc1709 100644
--- a/themes/Adwaita/gtk-3.0/gtk-contained.css
+++ b/themes/Adwaita/gtk-3.0/gtk-contained.css
@@ -112,31 +112,49 @@ GtkGrid:insensitive {
  ****************/
 .entry {
   padding: 4px;
-  color: #2e3436;
   border-radius: 3px;
   transition: all 200ms ease-out;
-  border: 1px solid #a1a1a1;
-  background-image: linear-gradient(to bottom, #f7f7f7 0%, white 90%);
-  box-shadow: inset 0 2px 2px -2px #7f7f7f, 0 1px white;
-  background-color: transparent; }
+  background-color: transparent;
+  border-style: solid;
+  border-width: 1px;
+  background-image: linear-gradient(to bottom, #f7f7f7, white 90%);
+  border-color: #a1a1a1;
+  box-shadow: inset 0 2px 2px -2px #7f7f7f, 0 1px white; }
+  .entry:focus {
+    background-color: transparent;
+    border-style: solid;
+    border-width: 1px;
+    background-image: linear-gradient(to bottom, #f7f7f7, white 90%);
+    border-color: #4a90d9;
+    box-shadow: inset 0 2px 2px -2px #7f7f7f, inset 0 0 2px 1px #dae8f7; }
   .entry:insensitive {
+    background-color: transparent;
+    border-style: solid;
+    border-width: 1px;
+    background-image: linear-gradient(to bottom, #f7f7f7, white 90%);
     color: #748489;
+    border-color: #a1a1a1;
     background-image: linear-gradient(to bottom, #ededed);
     box-shadow: 0 1px white; }
-  .entry:focus {
-    border-color: #4a90d9;
-    box-shadow: inset 0 2px 2px -2px #7f7f7f, inset 0 0 2px 1px #dae8f7, 0 1px white; }
-  .entry:selected, .entry:backdrop:selected {
-    color: white;
-    background-color: #4a90d9; }
   .entry:backdrop {
+    background-color: transparent;
+    border-style: solid;
+    border-width: 1px;
+    background-image: linear-gradient(to bottom, #f7f7f7, white 90%);
     color: #454f52;
-    border-color: #a1a1a1;
     background-image: linear-gradient(to bottom, #fcfcfc);
     box-shadow: 0 1px rgba(255, 255, 255, 0); }
   .entry:backdrop:insensitive {
+    background-color: transparent;
+    border-style: solid;
+    border-width: 1px;
+    background-image: linear-gradient(to bottom, #f7f7f7, white 90%);
     color: #c7c7c7;
-    background-image: linear-gradient(to bottom, #ededed); }
+    background-image: linear-gradient(to bottom, #ededed);
+    box-shadow: 0 1px rgba(255, 255, 255, 0); }
+  .entry:selected, .entrybackdrop:selected {
+    background-color: #4a90d9;
+    color: white; }
   .entry.progressbar {
     margin: 1px;
     border-radius: 0;
@@ -145,14 +163,13 @@ GtkGrid:insensitive {
     border-style: solid;
     background-image: none;
     box-shadow: none; }
-
-.linked .entry:first-child {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  border-right-width: 0; }
-.linked .entry:last-child {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0; }
+  .linked .entry:first-child {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    border-right-width: 0; }
+  .linked .entry:last-child {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0; }
 
 /***********
  * Buttons *


[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]