[gnome-themes-standard/wip/sass] entry work - added entry drawing function - modified _shadows helper function to deal with 'none
- From: Lapo Calamandrei <lapo src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-themes-standard/wip/sass] entry work - added entry drawing function - modified _shadows helper function to deal with 'none
- Date: Tue, 27 May 2014 19:29:19 +0000 (UTC)
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]