[gnome-shell/wip/sass: 50/88] theme: calendar fixups

[Carlos Soriano Sánchez <csoriano src gnome org>]

commit bb448e6ce7ebe70684f27fdece8817fac42fe23d
Author: Jakub Steiner <jimmac gmail com>
Date:   Wed Jan 14 15:08:44 2015 +0100

    theme: calendar fixups
    
    - pager button
    - day of week
    - top date label
    - FIXME: current date needs non-uniform border colors

 data/theme/_common.scss                  |   54 +++++++++++++++++++-----------
 data/theme/gnome-shell-high-contrast.css |   39 +++++++++++++++++----
 data/theme/gnome-shell.css               |   39 +++++++++++++++++----
 js/ui/calendar.js                        |    4 +-
 4 files changed, 100 insertions(+), 36 deletions(-)
---
diff --git a/data/theme/_common.scss b/data/theme/_common.scss
index 78b8c1d..7f77347 100644
--- a/data/theme/_common.scss
+++ b/data/theme/_common.scss
@@ -526,6 +526,14 @@ StScrollBar {
   // calendar popover
   .calendar { padding: .4em 1.75em .8em 1.75em; }
 
+    .datemenu-date-label { //topmost date label
+      padding: .4em 1.7em;
+      text-align: center;
+      color: $fg_color;
+      font-weight: bold;
+      font-size: 110%;
+    }
+
     .calendar-vertical-separator {
       width: .3em;
       -stipple-width: 1px;
@@ -538,31 +546,37 @@ StScrollBar {
       padding: 8px 0;
       &:focus {}
     }
-    
-    .calendar-change-month-back { //arrow back
-      &:rtl {}
-      &:hover, &:focus {}
-      &:active {}
-    }
-    .calendar-change-month-forward { //arrow foreward
-      &:rtl {}
-      &:hover, &:focus {}
-      &:active {}
-    }
-    .datemenu-date-label {
-      padding: .4em 1.7em;
-      text-align: center;
-      color: darken($fg_color,10%);
-      font-size: 130%;
-      border-radius: 4px;
+
+    .pager-button {
+      color: white;
+      background-color: transparent;
+      width: 32px;
+      background-position: center;
+      boder-radius: 4px;
+      &:hover, &:focus { background-color: transparentize($fg_color,0.95); }
+      &:active { background-color: transparentize($bg_color,0.95); }
     }
-    
+
+      .calendar-change-month-back { //arrow back
+        background-image: url("calendar-arrow-left.svg");
+        &:rtl { background-image: url("calendar-arrow-right.svg"); }
+      }
+      .calendar-change-month-forward { //arrow foreward
+        background-image: url("calendar-arrow-right.svg");
+        &:rtl { background-image: url("calendar-arrow-left.svg"); }
+      }
+
     .calendar-day-base {
       font-size: 80%;
       text-align: center;
       width: 2.4em; height: 2.4em;
       &:hover,&:focus { background-color: lighten($bg_color,5%); }
       &:active { color: lighten($fg_color,5%); background-color: darken($bg_color,5%);}
+      &.calendar-day-heading {  //day of week heading
+        color: darken($fg_color,40%); 
+        margin-top: 1em;
+        font-size: 90%;
+      }
     }
       .calendar-day { //border collapse hack - see calendar.js
         border: 1px solid $borders_color;
@@ -576,7 +590,7 @@ StScrollBar {
         font-weight: bold;
         color: lighten($fg_color,10%);
         border-bottom-width: 2px;
-        border-color: $selected_bg_color; //FIXME sadly can't have a color per side.
+        border-bottom-color: $selected_bg_color; //FIXME sadly can't have a color per side.
       }
       .calendar-day-with-events {
         color: white;
@@ -588,7 +602,7 @@ StScrollBar {
         opacity: 0.5;
       }
 
-    .events-table {
+    .events-table { //right hand side
       width: 15em;
       spacing-columns: 1em;
       padding: 0 1.4em;
diff --git a/data/theme/gnome-shell-high-contrast.css b/data/theme/gnome-shell-high-contrast.css
index 2054cae..8b03015 100644
--- a/data/theme/gnome-shell-high-contrast.css
+++ b/data/theme/gnome-shell-high-contrast.css
@@ -988,6 +988,13 @@ StScrollBar {
 .calendar {
   padding: .4em 1.75em .8em 1.75em; }
 
+.datemenu-date-label {
+  padding: .4em 1.7em;
+  text-align: center;
+  color: #fff;
+  font-weight: bold;
+  font-size: 110%; }
+
 .calendar-vertical-separator {
   width: .3em;
   -stipple-width: 1px;
@@ -998,12 +1005,26 @@ StScrollBar {
   font-weight: bold;
   padding: 8px 0; }
 
-.datemenu-date-label {
-  padding: .4em 1.7em;
-  text-align: center;
-  color: #e6e6e6;
-  font-size: 130%;
-  border-radius: 4px; }
+.pager-button {
+  color: white;
+  background-color: transparent;
+  width: 32px;
+  background-position: center;
+  boder-radius: 4px; }
+  .pager-button:hover, .pager-button:focus {
+    background-color: rgba(255, 255, 255, 0.05); }
+  .pager-button:active {
+    background-color: rgba(0, 0, 0, 0.05); }
+
+.calendar-change-month-back {
+  background-image: url("calendar-arrow-left.svg"); }
+  .calendar-change-month-back:rtl {
+    background-image: url("calendar-arrow-right.svg"); }
+
+.calendar-change-month-forward {
+  background-image: url("calendar-arrow-right.svg"); }
+  .calendar-change-month-forward:rtl {
+    background-image: url("calendar-arrow-left.svg"); }
 
 .calendar-day-base {
   font-size: 80%;
@@ -1015,6 +1036,10 @@ StScrollBar {
   .calendar-day-base:active {
     color: white;
     background-color: black; }
+  .calendar-day-base.calendar-day-heading {
+    color: #999999;
+    margin-top: 1em;
+    font-size: 90%; }
 
 .calendar-day {
   border: 1px solid black;
@@ -1035,7 +1060,7 @@ StScrollBar {
   font-weight: bold;
   color: white;
   border-bottom-width: 2px;
-  border-color: #215d9c; }
+  border-bottom-color: #215d9c; }
 
 .calendar-day-with-events {
   color: white;
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index ed109af..b8e7564 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -985,6 +985,13 @@ StScrollBar {
 .calendar {
   padding: .4em 1.75em .8em 1.75em; }
 
+.datemenu-date-label {
+  padding: .4em 1.7em;
+  text-align: center;
+  color: #eeeeec;
+  font-weight: bold;
+  font-size: 110%; }
+
 .calendar-vertical-separator {
   width: .3em;
   -stipple-width: 1px;
@@ -995,12 +1002,26 @@ StScrollBar {
   font-weight: bold;
   padding: 8px 0; }
 
-.datemenu-date-label {
-  padding: .4em 1.7em;
-  text-align: center;
-  color: #d6d6d1;
-  font-size: 130%;
-  border-radius: 4px; }
+.pager-button {
+  color: white;
+  background-color: transparent;
+  width: 32px;
+  background-position: center;
+  boder-radius: 4px; }
+  .pager-button:hover, .pager-button:focus {
+    background-color: rgba(238, 238, 236, 0.05); }
+  .pager-button:active {
+    background-color: rgba(57, 63, 63, 0.05); }
+
+.calendar-change-month-back {
+  background-image: url("calendar-arrow-left.svg"); }
+  .calendar-change-month-back:rtl {
+    background-image: url("calendar-arrow-right.svg"); }
+
+.calendar-change-month-forward {
+  background-image: url("calendar-arrow-right.svg"); }
+  .calendar-change-month-forward:rtl {
+    background-image: url("calendar-arrow-left.svg"); }
 
 .calendar-day-base {
   font-size: 80%;
@@ -1012,6 +1033,10 @@ StScrollBar {
   .calendar-day-base:active {
     color: #fafaf9;
     background-color: #2d3232; }
+  .calendar-day-base.calendar-day-heading {
+    color: #8e8e80;
+    margin-top: 1em;
+    font-size: 90%; }
 
 .calendar-day {
   border: 1px solid #1c1f1f;
@@ -1032,7 +1057,7 @@ StScrollBar {
   font-weight: bold;
   color: white;
   border-bottom-width: 2px;
-  border-color: #215d9c; }
+  border-bottom-color: #215d9c; }
 
 .calendar-day-with-events {
   color: white;
diff --git a/js/ui/calendar.js b/js/ui/calendar.js
index b778604..1bb98ca 100644
--- a/js/ui/calendar.js
+++ b/js/ui/calendar.js
@@ -456,7 +456,7 @@ const Calendar = new Lang.Class({
         this._topBox = new St.BoxLayout();
         layout.attach(this._topBox, 0, 0, offsetCols + 7, 1);
 
-        this._backButton = new St.Button({ style_class: 'calendar-change-month-back',
+        this._backButton = new St.Button({ style_class: 'calendar-change-month-back pager-button',
                                            accessible_name: _("Previous month"),
                                            can_focus: true });
         this._topBox.add(this._backButton);
@@ -466,7 +466,7 @@ const Calendar = new Lang.Class({
                                          can_focus: true });
         this._topBox.add(this._monthLabel, { expand: true, x_fill: false, x_align: St.Align.MIDDLE });
 
-        this._forwardButton = new St.Button({ style_class: 'calendar-change-month-forward',
+        this._forwardButton = new St.Button({ style_class: 'calendar-change-month-forward pager-button',
                                               accessible_name: _("Next month"),
                                               can_focus: true });
         this._topBox.add(this._forwardButton);