[gnome-shell/wip/sass: 31/52] theme: calendar widget visual cleanup

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

commit 83f56cbaebc17f7c71677b7a515283c6da3c01d9
Author: Jakub Steiner <jimmac gmail com>
Date:   Wed Feb 4 13:03:46 2015 +0100

    theme: calendar widget visual cleanup
    
    - clean up visual noise
    - some typos in selectors & properties I missed
    - misused opacify instead of transparentize

 data/theme/_common.scss                  |   39 ++++++++++++++++++++----------
 data/theme/gnome-shell-high-contrast.css |   29 ++++++++++++----------
 data/theme/gnome-shell.css               |   29 ++++++++++++----------
 3 files changed, 58 insertions(+), 39 deletions(-)
---
diff --git a/data/theme/_common.scss b/data/theme/_common.scss
index 2451a93..8bb67da 100644
--- a/data/theme/_common.scss
+++ b/data/theme/_common.scss
@@ -693,7 +693,10 @@ StScrollBar {
   .screencast-indicator { color: $warning_color; }
 }
   // calendar popover
-  .calendar { padding: .4em 1.75em .8em 1.75em; }
+  .calendar {
+    padding: .4em 1.75em .8em 1.75em;
+    margin-bottom: 2em;
+  }
 
     .datemenu-date-label { //topmost date label
       padding: .4em 1.7em;
@@ -721,7 +724,7 @@ StScrollBar {
       background-color: transparent;
       width: 32px;
       background-position: center;
-      boder-radius: 4px;
+      border-radius: 4px;
       &:hover, &:focus { background-color: transparentize($fg_color,0.95); }
       &:active { background-color: transparentize($bg_color,0.95); }
     }
@@ -739,35 +742,45 @@ StScrollBar {
       font-size: 80%;
       text-align: center;
       width: 2.4em; height: 2.4em;
+      padding: 0.1em;
+      margin: 2px;
       &:hover,&:focus { background-color: lighten($bg_color,5%); }
-      &:active { color: lighten($fg_color,5%); background-color: darken($bg_color,5%);}
+      &:active {
+        color: lighten($fg_color,5%);
+        background-color: $selected_bg_color;
+        border-color: transparent; //avoid jumparound due to today
+      }
       &.calendar-day-heading {  //day of week heading
         color: darken($fg_color,40%); 
         margin-top: 1em;
-        font-size: 90%;
+        font-size: 70%;
       }
     }
       .calendar-day { //border collapse hack - see calendar.js
-        border: 1px solid $borders_color;
-        border-top-width: 0; border-left-width: 0;
+        border-width: 0;
       }
       .calendar-day-top { border-top-width: 1px; }
       .calendar-day-left { border-left-width: 1px; }
-      .calendar-work-day {}
-      .calendar-nonwork-day { background-color: darken($bg_color, 2%); color: darken($fg_color,5%); }
+      .calendar-work-day {
+        border-radius: 1.4em;
+      }
+      .calendar-nonwork-day {
+        background-color: darken($bg_color, 2%);
+        color: darken($fg_color,5%);
+      }
       .calendar-today {
         font-weight: bold;
-        color: lighten($fg_color,10%);
-        border-bottom-width: 2px;
-        border-bottom-color: $selected_bg_color; //FIXME sadly can't have a color per side.
+        //color: lighten($fg_color,10%);
+        //background-color: darken($bg_color,5%);
+        border: 1px solid transparentize($borders_color,0.5);
       }
       .calendar-day-with-events {
         color: white;
         font-weight: bold;
       }
       .calendar-other-month-day {
-        color: opacify($fg_color,0.5);
-        background-color: opacify($bg_color,0.5);
+        color: transparentize($fg_color,0.7);
+        background-color: transparentize($bg_color,0.7);
         opacity: 0.5;
       }
 
diff --git a/data/theme/gnome-shell-high-contrast.css b/data/theme/gnome-shell-high-contrast.css
index be6f6aa..607f8da 100644
--- a/data/theme/gnome-shell-high-contrast.css
+++ b/data/theme/gnome-shell-high-contrast.css
@@ -864,7 +864,8 @@ StScrollBar {
     color: #f57900; }
 
 .calendar {
-  padding: .4em 1.75em .8em 1.75em; }
+  padding: .4em 1.75em .8em 1.75em;
+  margin-bottom: 2em; }
 
 .datemenu-date-label {
   padding: .4em 1.7em;
@@ -888,7 +889,7 @@ StScrollBar {
   background-color: transparent;
   width: 32px;
   background-position: center;
-  boder-radius: 4px; }
+  border-radius: 4px; }
   .pager-button:hover, .pager-button:focus {
     background-color: rgba(255, 255, 255, 0.05); }
   .pager-button:active {
@@ -908,21 +909,22 @@ StScrollBar {
   font-size: 80%;
   text-align: center;
   width: 2.4em;
-  height: 2.4em; }
+  height: 2.4em;
+  padding: 0.1em;
+  margin: 2px; }
   .calendar-day-base:hover, .calendar-day-base:focus {
     background-color: #0d0d0d; }
   .calendar-day-base:active {
     color: white;
-    background-color: black; }
+    background-color: #215d9c;
+    border-color: transparent; }
   .calendar-day-base.calendar-day-heading {
     color: #999999;
     margin-top: 1em;
-    font-size: 90%; }
+    font-size: 70%; }
 
 .calendar-day {
-  border: 1px solid black;
-  border-top-width: 0;
-  border-left-width: 0; }
+  border-width: 0; }
 
 .calendar-day-top {
   border-top-width: 1px; }
@@ -930,23 +932,24 @@ StScrollBar {
 .calendar-day-left {
   border-left-width: 1px; }
 
+.calendar-work-day {
+  border-radius: 1.4em; }
+
 .calendar-nonwork-day {
   background-color: black;
   color: #f2f2f2; }
 
 .calendar-today {
   font-weight: bold;
-  color: white;
-  border-bottom-width: 2px;
-  border-bottom-color: #215d9c; }
+  border: 1px solid rgba(0, 0, 0, 0.5); }
 
 .calendar-day-with-events {
   color: white;
   font-weight: bold; }
 
 .calendar-other-month-day {
-  color: white;
-  background-color: black;
+  color: rgba(255, 255, 255, 0.3);
+  background-color: rgba(0, 0, 0, 0.3);
   opacity: 0.5; }
 
 .events-table {
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 95e5178..872a074 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -864,7 +864,8 @@ StScrollBar {
     color: #f57900; }
 
 .calendar {
-  padding: .4em 1.75em .8em 1.75em; }
+  padding: .4em 1.75em .8em 1.75em;
+  margin-bottom: 2em; }
 
 .datemenu-date-label {
   padding: .4em 1.7em;
@@ -888,7 +889,7 @@ StScrollBar {
   background-color: transparent;
   width: 32px;
   background-position: center;
-  boder-radius: 4px; }
+  border-radius: 4px; }
   .pager-button:hover, .pager-button:focus {
     background-color: rgba(238, 238, 236, 0.05); }
   .pager-button:active {
@@ -908,21 +909,22 @@ StScrollBar {
   font-size: 80%;
   text-align: center;
   width: 2.4em;
-  height: 2.4em; }
+  height: 2.4em;
+  padding: 0.1em;
+  margin: 2px; }
   .calendar-day-base:hover, .calendar-day-base:focus {
     background-color: #454c4c; }
   .calendar-day-base:active {
     color: #fafaf9;
-    background-color: #2d3232; }
+    background-color: #215d9c;
+    border-color: transparent; }
   .calendar-day-base.calendar-day-heading {
     color: #8e8e80;
     margin-top: 1em;
-    font-size: 90%; }
+    font-size: 70%; }
 
 .calendar-day {
-  border: 1px solid #1c1f1f;
-  border-top-width: 0;
-  border-left-width: 0; }
+  border-width: 0; }
 
 .calendar-day-top {
   border-top-width: 1px; }
@@ -930,23 +932,24 @@ StScrollBar {
 .calendar-day-left {
   border-left-width: 1px; }
 
+.calendar-work-day {
+  border-radius: 1.4em; }
+
 .calendar-nonwork-day {
   background-color: #343a3a;
   color: #e2e2df; }
 
 .calendar-today {
   font-weight: bold;
-  color: white;
-  border-bottom-width: 2px;
-  border-bottom-color: #215d9c; }
+  border: 1px solid rgba(28, 31, 31, 0.5); }
 
 .calendar-day-with-events {
   color: white;
   font-weight: bold; }
 
 .calendar-other-month-day {
-  color: #eeeeec;
-  background-color: #393f3f;
+  color: rgba(238, 238, 236, 0.3);
+  background-color: rgba(57, 63, 63, 0.3);
   opacity: 0.5; }
 
 .events-table {