visual tweaks: nicer shadows, improve datepickers layout

README.md

@@ -65,6 +65,7 @@ Latest (master):
 * Use flexbox layout by default (can be changed by setting `$flexbox-layout` to `false`)
 * Fixed animation issue when showing sidebar
 * Slightly modified buttons' style
+* Few visual tweaks: nicer shadows, improved datepickers layout
 
 v1.6.0 (2015-06-10):
 

plugins/redmine_backlogs/jquery/jquery.multiselect.css

@@ -1 +1 @@
-.ui-multiselect{padding:2px 0 2px 4px;text-align:left}.ui-multiselect span.ui-icon{float:right}.ui-multiselect-single .ui-multiselect-checkboxes input{position:absolute !important;top:auto !important;left:-9999px}.ui-multiselect-single .ui-multiselect-checkboxes label{padding:5px !important}.ui-multiselect-header{margin-bottom:3px;padding:3px}.ui-multiselect-header ul{font-size:0.92em}.ui-multiselect-header ul li{padding:0 10px 0 0;float:left}.ui-multiselect-header a{text-decoration:none}.ui-multiselect-header a:hover{text-decoration:underline}.ui-multiselect-header span.ui-icon{float:left}.ui-multiselect-header li.ui-multiselect-close{padding-right:0;float:right;text-align:right}.ui-multiselect-menu{display:none;position:absolute;padding:3px;text-align:left;box-shadow:0 1px 2px rgba(0,0,0,0.1),0 3px 8px rgba(0,0,0,0.07);z-index:10000}.ui-multiselect-checkboxes{position:relative;padding-right:2px;overflow-y:scroll}.ui-multiselect-checkboxes input[type="checkbox"]{top:0;margin:3px 0 0 -20px;float:left}.ui-multiselect-checkboxes input[type="checkbox"]:focus{outline:none}.ui-multiselect-checkboxes label{display:block;padding:3px 1px;padding-left:26px;border:1px solid transparent;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ui-multiselect-checkboxes label input{position:relative;top:1px}.ui-multiselect-checkboxes li{clear:both;font-size:0.92em}.ui-multiselect-checkboxes li.ui-multiselect-optgroup-label{margin-bottom:2px;border-bottom:1px solid #ccc;font-weight:bold;text-align:center}.ui-multiselect-checkboxes li.ui-multiselect-optgroup-label a{display:block;margin:1px 0;padding:3px;text-decoration:none}* html .ui-multiselect-checkboxes label{border:0 none}
+.ui-multiselect{padding:2px 0 2px 4px;text-align:left}.ui-multiselect span.ui-icon{float:right}.ui-multiselect-single .ui-multiselect-checkboxes input{position:absolute !important;top:auto !important;left:-9999px}.ui-multiselect-single .ui-multiselect-checkboxes label{padding:5px !important}.ui-multiselect-header{margin-bottom:3px;padding:3px}.ui-multiselect-header ul{font-size:0.92em}.ui-multiselect-header ul li{padding:0 10px 0 0;float:left}.ui-multiselect-header a{text-decoration:none}.ui-multiselect-header a:hover{text-decoration:underline}.ui-multiselect-header span.ui-icon{float:left}.ui-multiselect-header li.ui-multiselect-close{padding-right:0;float:right;text-align:right}.ui-multiselect-menu{display:none;position:absolute;padding:3px;text-align:left;z-index:10000;box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23)}.ui-multiselect-checkboxes{position:relative;padding-right:2px;overflow-y:scroll}.ui-multiselect-checkboxes input[type="checkbox"]{top:0;margin:3px 0 0 -20px;float:left}.ui-multiselect-checkboxes input[type="checkbox"]:focus{outline:none}.ui-multiselect-checkboxes label{display:block;padding:3px 1px;padding-left:26px;border:1px solid transparent;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ui-multiselect-checkboxes label input{position:relative;top:1px}.ui-multiselect-checkboxes li{clear:both;font-size:0.92em}.ui-multiselect-checkboxes li.ui-multiselect-optgroup-label{margin-bottom:2px;border-bottom:1px solid #ccc;font-weight:bold;text-align:center}.ui-multiselect-checkboxes li.ui-multiselect-optgroup-label a{display:block;margin:1px 0;padding:3px;text-decoration:none}* html .ui-multiselect-checkboxes label{border:0 none}

plugins/redmine_backlogs/jquery/jquery.qtip.css

@@ -1 +1 @@
-.qtip{position:absolute;top:-31000px;left:-31000px;width:auto;max-width:500px;outline:none}.ui-tooltip-content{position:relative;padding:10px;border:1px solid #ccc;background-color:#fff;color:#555;font-size:0.92em;text-align:left;word-wrap:break-word;box-shadow:0 2px 2px rgba(0,0,0,0.2);overflow:hidden}.ui-tooltip-tip{border-color:#ccc;background-color:#fff}.ui-tooltip-tip{position:absolute;margin:0 auto;border:0 none;background:transparent;overflow:hidden;z-index:10}
+.qtip{position:absolute;top:-31000px;left:-31000px;width:auto;max-width:500px;outline:none}.ui-tooltip-content{position:relative;padding:10px;border:1px solid #ccc;background-color:#fff;color:#555;font-size:0.92em;text-align:left;word-wrap:break-word;box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);overflow:hidden}.ui-tooltip-tip{border-color:#ccc;background-color:#fff}.ui-tooltip-tip{position:absolute;margin:0 auto;border:0 none;background:transparent;overflow:hidden;z-index:10}

src/sass/_mixins.scss

@@ -13,3 +13,4 @@
 
 @import "mixins/issues";
 @import "mixins/link-variant";
+@import "mixins/shadows";

src/sass/_variables.scss

@@ -439,6 +439,7 @@ $panel-shadow:                  0 1px 2px rgba(#000, .1),
 //
 
 $tooltip-bg:                    #fff !default;
+$tooltip-border-width:          0 !default;
 $tooltip-border:                #ccc !default;
 $tooltip-text:                  $gray-dark !default;
 $tooltip-link:                  $link-color !default;

src/sass/components/_elements.scss

@@ -319,7 +319,7 @@ p.subtitle {
 
     &.ui-sortable-helper {
         background: $body-bg;
-        box-shadow: $panel-shadow;
+        @include nice-shadow(4);
     }
 }
 
@@ -604,7 +604,7 @@ div#version-summary {
     color: $highlight-text;
     font-weight: $font-weight-bold;
     text-align: center;
-    box-shadow: $panel-shadow;
+    @include nice-shadow(3);
     opacity: .9;
     z-index: 100;
 

src/sass/components/_gantt.scss

@@ -145,12 +145,12 @@
         left: 24px;
         width: 270px;
         padding: $padding-base-vertical;
-        border: 1px solid $tooltip-border;
+        border: $tooltip-border-width solid $tooltip-border;
         background-color: $tooltip-bg;
         color: $tooltip-text;
         font-size: $font-size-small;
         text-align: left;
-        box-shadow: 0 2px 2px rgba(0, 0, 0, .2);
+        @include nice-shadow(3);
     }
 
     @if $sidebar-position == "left" {

src/sass/components/_icons.scss

@@ -37,6 +37,13 @@ $icon-danger-hover-color:            darken($brand-danger, 10%);
  * Context menu
  */
 #context-menu {
+    > ul,
+    > ul > li > ul {
+        // scss-lint:disable ImportantRule
+        border: 0 none !important;
+        @include nice-shadow(2);
+    }
+
     a {
         @extend %fa-icon;
 

src/sass/components/_jquery-ui.scss

@@ -129,6 +129,10 @@
     text-decoration: none;
 }
 
+.ui-sortable-helper {
+    @include nice-shadow(4);
+}
+
 
 /**
  * Menu (e.g. autocomplete)
@@ -137,7 +141,7 @@
 .ui-menu {
     padding: 3px;
     border-radius: $panel-border-radius;
-    box-shadow: $panel-shadow;
+    @include nice-shadow(2);
 }
 
 .ui-menu-item {
@@ -167,7 +171,7 @@
     &.ui-widget-content {
         padding: 3px;
         border: 0 none;
-        box-shadow: $panel-shadow;
+        @include nice-shadow(5);
     }
 
     .ui-dialog-content {
@@ -199,10 +203,12 @@ img.ui-datepicker-trigger {
 }
 
 .ui-datepicker {
-    padding: 3px;
+    padding: .3em .6em .6em;
-    box-shadow: $panel-shadow;
+    border: 0 none;
+    @include nice-shadow(3);
 
     .ui-datepicker-header {
+        margin: 0 -.3em;
         padding: .3em;
     }
 
@@ -237,6 +243,7 @@ img.ui-datepicker-trigger {
     }
 
     .ui-datepicker-calendar {
+        margin: 0;
         table-layout: fixed;
 
         .ui-state-default {
@@ -285,4 +292,15 @@ img.ui-datepicker-trigger {
             }
         }
     }
+
+    .ui-datepicker-buttonpane {
+        margin: .6em 0 0;
+        padding: .6em 0 0;
+        @include clearfix;
+
+        button {
+            margin: 0;
+            padding: $btn-padding-vertical $btn-padding-horizontal;
+        }
+    }
 }

src/sass/mixins/_shadows.scss

@@ -0,0 +1,23 @@
+// Some really nice looking shadows
+
+@mixin nice-shadow($depth: 1) {
+    $shadow: none;
+    @if ($depth == 1) {
+        // $shadow: 0 3px 1px -2px rgba(#000, .14), 0 2px 2px 0 rgba(#000, .098), 0 1px 5px 0 rgba(#000, .082);
+        $shadow: 0 1px 3px rgba(#000, .12), 0 1px 2px rgba(#000, .24);
+    } @elseif ($depth == 2) {
+        // $shadow: 0 2px 4px -1px rgba(#000, .14), 0 4px 5px 0 rgba(#000, .098), 0 1px 10px 0 rgba(#000, .082)
+        $shadow: 0 3px 6px rgba(#000, .16), 0 3px 6px rgba(#000, .23);
+    } @elseif ($depth == 3) {
+        // $shadow: 0 3px 5px -1px rgba(#000, .14), 0 6px 10px 0 rgba(#000, .098), 0 1px 18px 0 rgba(#000, .082)
+        $shadow: 0 10px 18px rgba(#000, .19), 0 6px 8px rgba(#000, .23);
+    } @elseif ($depth == 4) {
+        // $shadow: 0 5px 5px -3px rgba(#000, .14), 0 8px 10px 1px rgba(#000, .098), 0 3px 14px 2px rgba(#000, .082)
+        $shadow: 0 14px 28px rgba(#000, .25), 0 10px 10px rgba(#000, .22);
+    } @elseif ($depth == 5) {
+        // $shadow: 0 8px 10px -5px rgba(#000, .14), 0 16px 24px 2px rgba(#000, .098), 0 6px 30px 5px rgba(#000, .082)
+        $shadow: 0 19px 38px rgba(#000, .30), 0 15px 12px rgba(#000, .22);
+    }
+
+    box-shadow: $shadow;
+}

src/sass/plugins/redmine_backlogs/jquery/jquery-ui.scss

@@ -212,6 +212,10 @@
     text-decoration: none;
 }
 
+.ui-sortable-helper {
+    @include nice-shadow(4);
+}
+
 
 /* Interaction Cues
 ----------------------------------*/
@@ -694,6 +698,7 @@
     margin: 0;
     padding: 2px;
     list-style: none;
+    @include nice-shadow(2);
 
     .ui-menu {
         margin-top: -3px;
@@ -1056,15 +1061,16 @@ button.ui-button::-moz-focus-inner {
 
 .ui-datepicker {
     width: 16em;
-    padding: 3px;
+    padding: .3em .6em .6em;
-    border: 1px solid $panel-border;
+    border: 0 none;
     background: $body-bg;
     color: $text-color;
     font-size: $font-size-base;
-    box-shadow: $panel-shadow;
+    @include nice-shadow(3);
 
     .ui-datepicker-header {
         position: relative;
+        margin: 0 -.3em;
         padding: .3em;
         border: 0 none;
         background: $header-bg;
@@ -1189,6 +1195,7 @@ button.ui-button::-moz-focus-inner {
     }
 
     .ui-datepicker-calendar {
+        margin: 0;
         table-layout: fixed;
 
         td {
@@ -1244,8 +1251,13 @@ button.ui-button::-moz-focus-inner {
     }
 
     .ui-datepicker-buttonpane {
+        margin: .6em 0 0;
+        padding: .6em 0 0;
+        @include clearfix;
+
         button {
-            padding: $input-padding-vertical $input-padding-horizontal;
+            margin: 0;
+            padding: $btn-padding-vertical $btn-padding-horizontal;
         }
 
         .ui-state-default {

src/sass/plugins/redmine_backlogs/jquery/jquery.multiselect.scss

@@ -59,8 +59,8 @@
     position: absolute;
     padding: 3px;
     text-align: left;
-    box-shadow: $panel-shadow;
     z-index: 10000;
+    @include nice-shadow(2);
 }
 
 .ui-multiselect-checkboxes {

src/sass/plugins/redmine_backlogs/jquery/jquery.qtip.scss

@@ -18,7 +18,7 @@
     font-size: $font-size-list;
     text-align: left;
     word-wrap: break-word;
-    box-shadow: 0 2px 2px rgba(#000, .2);
+    @include nice-shadow(2);
     overflow: hidden;
 }
 

src/sass/plugins/redmine_backlogs/master_backlog.scss

@@ -167,7 +167,7 @@ $story-sp-input-width:          50px;
         margin: 0 0 ($padding-side / 2);
         border-radius: $border-radius-large $border-radius-large 0 0;
         background-color: $gray-lightest;
-        box-shadow: $panel-shadow;
+        @include nice-shadow(1);
 
         @media screen and (min-width: $screen-md-min) {
             margin: 0 0 $padding-side;
@@ -724,7 +724,7 @@ $story-sp-input-width:          50px;
 
     &.ui-widget-content {
         border: 0 none;
-        box-shadow: 2px 2px 5px #777;
+        @include nice-shadow(5);
     }
 
     .ui-dialog-buttonpane.ui-widget-content {

src/sass/plugins/redmine_backlogs/taskboard.scss

@@ -382,7 +382,7 @@ $swimlane-width:                $issue-width + 2 * ($issue-margin + $issue-paddi
     &.ui-widget-content {
         border: 0 none;
         background: none;
-        box-shadow: 2px 2px 5px #777;
+        @include nice-shadow(5);
     }
 
     .ui-dialog-buttonpane.ui-widget-content {