visual tweaks: nicer shadows, improve datepickers layout

asannou · Aug 9, 2015 · bc8bde7 · bc8bde7
1 parent 1253489
commit bc8bde7
Show file tree

Hide file tree

Showing 19 changed files with 87 additions and 24 deletions.
diff --git a/README.md b/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):
 

diff --git a/plugins/redmine_backlogs/jquery/jquery-ui.css b/plugins/redmine_backlogs/jquery/jquery-ui.css
diff --git a/plugins/redmine_backlogs/jquery/jquery.multiselect.css b/plugins/redmine_backlogs/jquery/jquery.multiselect.css
diff --git a/plugins/redmine_backlogs/jquery/jquery.qtip.css b/plugins/redmine_backlogs/jquery/jquery.qtip.css
diff --git a/plugins/redmine_backlogs/master_backlog.css b/plugins/redmine_backlogs/master_backlog.css
diff --git a/plugins/redmine_backlogs/taskboard.css b/plugins/redmine_backlogs/taskboard.css
diff --git a/src/sass/_mixins.scss b/src/sass/_mixins.scss
@@ -13,3 +13,4 @@
 
 @import "mixins/issues";
 @import "mixins/link-variant";
+@import "mixins/shadows";
diff --git a/src/sass/_variables.scss b/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;

diff --git a/src/sass/components/_elements.scss b/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;
 

diff --git a/src/sass/components/_gantt.scss b/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" {

diff --git a/src/sass/components/_icons.scss b/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;
 

diff --git a/src/sass/components/_jquery-ui.scss b/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;
-    box-shadow: $panel-shadow;
+    padding: .3em .6em .6em;
+    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;
+        }
+    }
 }
diff --git a/src/sass/mixins/_shadows.scss b/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;
+}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -13,3 +13,4 @@

		@import "mixins/issues";
		@import "mixins/link-variant";
		@import "mixins/shadows";