release v1.7.0

.scss-lint.yml

@@ -1,4 +1,6 @@
-scss_files: "**/*.scss"
+scss_files: "src/sass/**/*.scss"
+
+exclude: 'src/sass/lib/**'
 
 linters:
   BangFormat:
@@ -12,6 +14,9 @@ linters:
   ColorKeyword:
     enabled: true
 
+  ColorVariable:
+    enabled: false
+
   Comment:
     enabled: false
 

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 Grzegorz Rajchman <mrliptontea@griego.pl>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -4,7 +4,7 @@ A free Redmine theme for modern browsers.
 
 ![Screenshot](https://github.com/HolonGlobe/PurpleMine2/raw/master/screenshots/issues-list.png)
 
-Compatible with Redmine 2.5+ and browsers: IE9+, latest Firefox and Google Chrome (others were not tested).
+Compatible with Redmine 2.5+ and browsers: IE10+/Edge, latest Firefox and Google Chrome (others were not tested).
 
 It's written in [SCSS]. It uses [normalize.css] and benefits from some parts of [Bootstrap][bootstrap-sass] like mixins, structure, and stuff.
 
@@ -56,6 +56,23 @@ If you need to customize styles for [Redmine Backlogs][redmine_backlogs] remembe
 
 ## Changelog
 
+v1.7.0 (2015-09-25):
+
+* Added styles for optgroup (Firefox only)
+* Fixed #13: #header was missing clearfix and was breaking the layout is some cases
+* Coloring issue's title instead of link in Gantt diagram for overdue issues
+* Updated npm packages: grunt-sass from 0.18.0 to 1.0.0 and grunt-contrib-uglify 0.7.0 to 0.9.1
+* 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
++ Configurable list borders and highlighting of hovered and even/odd rows
++ Introduce `$pagination-padding-` variables and make pagination buttons' height equal to buttons by default
+* Fixed #16: remove `white-space: nowrap` from external links to prevent breaking the page with flexbox layout
+* Fixed colored trackers in tooltips in Backlogs plugin
+* Fixed broken codebutton modal after making buttons wider
+* Changed the license to MIT
+
 v1.6.0 (2015-06-10):
 
 * Fixed #8: Setting `$top-menu-collapse` to `true` will enable script allowing to toggle if top menu should be collapsed (no wrapping) or expanded (wrapped, with auto height)
@@ -140,10 +157,6 @@ v1.0.0 (2015-02-06):
 
 Initial version
 
-## License
-
-[WTFPL](http://www.wtfpl.net/)
-
 [SCSS]: http://sass-lang.com/
 [normalize.css]: https://github.com/necolas/normalize.css
 [bootstrap-sass]: https://github.com/twbs/bootstrap-sass

package.json

@@ -1,27 +1,26 @@
 {
   "name": "PurpleMine2",
-  "version": "2.0.0",
+  "description": "A free Redmine 2.5+ theme written in SCSS",
-  "description": "A free Redmine 2.5+ theme written in SASS",
   "keywords": [
     "redmine",
     "theme",
     "sass",
     "scss"
   ],
-  "author": "HolonGlobe",
+  "author": "mrliptontea",
   "repository": {
     "type": "git",
-    "url": "git@github.com:HolonGlobe/PurpleMine2.git"
+    "url": "git@github.com:mrliptontea/PurpleMine2.git"
   },
-  "license": "WTFPL",
+  "license": "MIT",
   "bugs": {
-    "url": "https://github.com/HolonGlobe/PurpleMine2/issues"
+    "url": "https://github.com/mrliptontea/PurpleMine2/issues"
   },
-  "homepage": "https://github.com/HolonGlobe/PurpleMine2",
+  "homepage": "https://github.com/mrliptontea/PurpleMine2",
   "devDependencies": {
     "grunt": "^0.4.5",
-    "grunt-contrib-uglify": "^0.7.0",
+    "grunt-contrib-uglify": "^0.9.1",
     "grunt-contrib-watch": "^0.6.1",
-    "grunt-sass": "^0.18.0"
+    "grunt-sass": "^1.0.0"
   }
 }

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:#555555;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/javascripts/modules/SidebarToggler.js

@@ -134,9 +134,12 @@ PurpleMine.SidebarToggler = (function()
     SidebarToggler.prototype.showSidebar = function()
     {
         clearTimeout(this.sidebarHiding);
-        this.$sidebar
+
-                .removeClass("sidebar-hidden", 0)
+        self.$sidebar.removeClass("sidebar-hidden");
-                .removeClass("sidebar-hiding");
+        setTimeout(function sidebarTimeout()
+        {
+            self.$sidebar.removeClass("sidebar-hiding");
+        }, 50);
 
         this.$toggler.removeClass("sidebar-hidden");
         this.sidebarVisible = true;

src/sass/_mixins.scss

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

src/sass/_variables.scss

@@ -7,6 +7,7 @@
 //
 
 $fixed-layout:                  false !default;
+$flexbox-layout:                true !default;
 $sidebar-position:              left !default;
 $color-priorities:              true !default;
 $color-trackers:                true !default;
@@ -130,7 +131,6 @@ $border-radius-small:           2px !default;
 
 $hr-border:                     $gray-light !default;
 $abbr-border-color:             $gray-light !default;
-$blockquote-border-color-fallback: $gray-lighter !default;
 $blockquote-border-color:       rgba(#000, .15) !default;
 
 $component-color:               $gray-dark !default;
@@ -152,9 +152,17 @@ $collapsible-animation-time:    .3s !default;
 $table-cell-padding:            8px !default;
 $table-condensed-cell-padding:  5px !default;
 
+$table-list-header-border:      0 0 2px !default;
+$table-list-item-border:        0 0 1px !default;
+$table-list-color-odd-rows:     true !default;
+$table-list-color-even-rows:    false !default;
+$table-list-highlight-rows:     false !default;
+
 $table-bg:                      transparent !default;
-$table-bg-accent:               rgba(#000, .03) !default;
+$table-accent-factor:           .03 !default;
-$table-bg-hover:                #f1f1f1 !default;
+$table-hover-factor:            .03 !default;
+$table-bg-accent:               rgba(#000, $table-accent-factor) !default;
+$table-bg-hover:                rgba(#000, $table-hover-factor) !default;
 $table-bg-active:               $table-bg-hover !default;
 
 $table-border-color:            darken($body-bg, 13.5%) !default;
@@ -261,6 +269,8 @@ $changeset-deleted-color:       $brand-danger !default;
 //
 
 $btn-font-weight:               normal !default;
+$btn-padding-vertical:          3px !default;
+$btn-padding-horizontal:        12px !default;
 
 $btn-link-color:                $link-color !default;
 $btn-link-bg:                   $body-bg !default;
@@ -272,11 +282,11 @@ $btn-default-border:            $gray-lighter !default;
 
 $btn-primary-color:             #fff !default;
 $btn-primary-bg:                $brand-info !default;
-$btn-primary-border:            darken($btn-primary-bg, 5%) !default;
+$btn-primary-border:            $btn-primary-bg !default;
 
 $btn-success-color:             #fff !default;
 $btn-success-bg:                $brand-success !default;
-$btn-success-border:            darken($btn-success-bg, 5%) !default;
+$btn-success-border:            $btn-success-bg !default;
 
 
 //== Highlights
@@ -303,7 +313,7 @@ $input-border-radius-large:     $border-radius-large !default;
 $input-border-focus:            #51a7e8 !default;
 $input-color-placeholder:       #999 !default;
 
-$input-padding-vertical:        3px !default;
+$input-padding-vertical:        $btn-padding-vertical !default;
 $input-padding-horizontal:      8px !default;
 
 $input-height-base:             ($line-height-computed + ($input-padding-vertical * 2) + 2) !default;
@@ -353,6 +363,9 @@ $main-menu-padding-horizontal:  5px !default;
 //== Pagination
 //
 
+$pagination-padding-vertical:   $btn-padding-vertical !default;
+$pagination-padding-horizontal: 10px !default;
+
 $pagination-color:              $link-color !default;
 $pagination-bg:                 #fff !default;
 $pagination-border:             #ddd !default;
@@ -385,6 +398,7 @@ $tab-active-border:             $tab-border !default;
 $sidebar-width:                 270px !default;
 $sidebar-padding-vertical:      $padding-base-vertical !default;
 $sidebar-padding-horizontal:    $padding-side !default;
+$sidebar-width-computed:        $sidebar-width - ($sidebar-padding-horizontal * 2) - 1px !default;
 $sidebar-link-hover-bg:         $gray-lightest !default;
 $sidebar-link-active-bg:        $body-bg !default;
 $sidebar-link-active-border:    $gray-lighter !default;
@@ -437,6 +451,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/_base.scss

@@ -12,8 +12,8 @@ body {
     background-color: $body-bg;
     color: $text-color;
     font-family: $font-family-base;
-    font-weight: $font-weight-normal;
     font-size: $font-size-base;
+    font-weight: $font-weight-normal;
     line-height: $line-height-base;
 }
 
@@ -137,8 +137,7 @@ abbr[title] {
 blockquote {
     margin: 0 0 $line-height-computed;
     padding: floor($line-height-computed / 4) $padding-large-horizontal;
-    border-left: 4px solid $blockquote-border-color-fallback;
+    border-left: 4px solid $blockquote-border-color;
-    border-left-color: $blockquote-border-color;
 
     >:first-child {
         margin-top: 0;

src/sass/components/_buttons.scss

@@ -8,11 +8,11 @@ button {
     display: inline-block;
     margin-bottom: 0;
     border: 1px solid;
-    cursor: pointer;
     font-weight: $btn-font-weight;
     text-align: center;
     white-space: nowrap;
-    @include button-size($input-padding-vertical, $input-padding-horizontal, $font-size-base, $line-height-base, $border-radius-base);
+    cursor: pointer;
+    @include button-size($btn-padding-vertical, $btn-padding-horizontal, $font-size-base, $line-height-base, $border-radius-base);
     @include user-select(none);
     @include transition(background-color ease-in-out .07s, border-color ease-in-out .07s, box-shadow ease-in-out .07s);
     @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
@@ -37,11 +37,10 @@ button {
 
 
 /**
- * Issue form buttons layout
+ * Form buttons layout
  */
 
-#issue-form,
+form {
-#history .journal form {
     input[type="submit"] {
         margin-right: 5px;
 
@@ -60,17 +59,6 @@ button {
 }
 
 
-/**
- * Project's repository form buttons layout
- */
-
-#repository-form {
-    input[type="submit"] {
-        margin-right: 5px;
-    }
-}
-
-
 /**
  * Repository's 'View differences' button
  */
@@ -79,55 +67,12 @@ form[action*="repository/diff"] {
 }
 
 
-/**
- * New _something_ form buttons layout
- */
-
-#add_attachment_form,
-#new_time_entry,
-#new_project,
-#new_document,
-#new_group,
-#new_user {
-    input[type="submit"] {
-        margin-right: 5px;
-
-        + input {
-            @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
-        }
-    }
-}
-
-
-/**
- * Wiki form buttons layout
- */
-
-#wiki_form {
-    input[type="submit"] {
-        margin-right: 5px;
-    }
-}
-
-
 /**
  * Forum and news message form buttons layout
  */
 
 #message-form,
 #news-form {
-    input[type="submit"] {
-        margin-right: 5px;
-
-        + a {
-            margin-right: 5px;
-        }
-
-        + a + a {
-            margin-left: 5px;
-        }
-    }
-
     #message_sticky,
     #message_locked {
         position: relative;
@@ -143,6 +88,7 @@ form[action*="repository/diff"] {
 
 .query-columns {
     select {
+        // scss-lint:disable ImportantRule
         width: auto !important;
     }
 
@@ -152,6 +98,8 @@ form[action*="repository/diff"] {
         input[type="button"] {
             width: 32px;
             margin-bottom: 4px;
+            padding-right: 1px;
+            padding-left: 1px;
             @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);
         }
     }

src/sass/components/_coderay.scss

@@ -18,6 +18,7 @@
     }
 
     .debug {
+        // scss-lint:disable ImportantRule
         background: #00f !important;
         color: #fff !important;
     }

src/sass/components/_content.scss

@@ -1,5 +1,12 @@
 #main {
+    @if $flexbox-layout {
+        // scss-lint:disable VendorPrefix
+        display: -ms-flexbox;
+        display: -webkit-flex;
+        display: flex;
+    } @else {
         @extend %clearfix;
+    }
 }
 
 
@@ -9,7 +16,17 @@
 
 #content {
     padding: $padding-side;
+
+    @if $flexbox-layout {
+        // scss-lint:disable VendorPrefix
+        $side-space: $sidebar-width + $padding-side * 2;
+        width: calc(100% - #{$side-space});
+        -webkit-flex: 1 1 auto;
+        -ms-flex: 1 1 auto;
+        flex: 1 1 auto;
+    } @else {
         overflow: hidden;
+    }
 }
 
 
@@ -18,39 +35,57 @@
 // --------------------------------------------------
 
 #sidebar {
-    width: $sidebar-width - ($sidebar-padding-horizontal * 2) - 1px;
+    // scss-lint:disable VendorPrefix
     padding: $padding-side $sidebar-padding-horizontal;
-    float: $sidebar-position;
 
-    @media screen and (min-width: 1px) {
+    @if $flexbox-layout {
-        // scss-lint:disable VendorPrefixes
+        -webkit-flex: 0 0 $sidebar-width-computed;
-        $border: $sidebar-link-active-border;
+        -ms-flex: 0 0 $sidebar-width-computed;
-        $body:   $body-bg;
+        flex: 0 0 $sidebar-width-computed;
-
-        padding-bottom: $padding-side * 3;
-        background-image: -webkit-linear-gradient($body 1%, $border 10%, $border 85%, $body);
-        background-image:      -o-linear-gradient($body 1%, $border 10%, $border 85%, $body);
-        background-image:         linear-gradient($body 1%, $border 10%, $border 85%, $body);
-        background-repeat: no-repeat;
-        background-size: 1px 100%;
 
         @if $sidebar-position == "left" {
-            padding-right: $sidebar-padding-horizontal + 1px;
+            -webkit-order: -1;
-            background-position: right 0;
+            -ms-flex-order: -1;
+            order: -1;
+        } @else {
+            -webkit-order: 1;
+            -ms-flex-order: 1;
+            order: 1;
+        }
+    } @else {
+        width: $sidebar-width-computed;
+        float: $sidebar-position;
+    }
+
+    @media screen and (min-width: 1px) {
+        @if not $flexbox-layout {
+            padding-bottom: $padding-side * 3;
+        }
+
+        @if $sidebar-position == "left" {
+            border-right: 1px solid $sidebar-link-active-border;
             box-shadow: inset -9px 0 6px -6px rgba(0, 0, 0, .05);
         } @else {
-            padding-left: $sidebar-padding-horizontal + 1px;
+            border-left: 1px solid $sidebar-link-active-border;
-            background-position: left 0;
             box-shadow: inset 9px 0 6px -6px rgba(0, 0, 0, .05);
         }
     }
 
     .nosidebar & {
-        width: 0;
         margin: 0;
         padding: 0;
+        border: 0 none;
+
+        @if $flexbox-layout {
+            // scss-lint:disable VendorPrefix
+            -webkit-flex: 0 0 auto;
+            -ms-flex: 0 0 auto;
+            flex: 0 0 auto;
+        } @else {
+            width: 0;
             float: none;
         }
+    }
 
     h3 {
         margin-top: $line-height-computed * 1.5;
@@ -117,7 +152,7 @@
 }
 
 #footer {
-    margin: $line-height-computed $padding-side;
+    margin: 0 $padding-side $line-height-computed;
     padding-top: $line-height-computed;
     border-top: 1px solid $gray-lighter;
     color: $gray-light;

src/sass/components/_elements.scss

@@ -24,6 +24,16 @@
     span + span:before {
         content: "/ ";
     }
+
+    .pagination + &,
+    #wiki_add_attachment + & {
+        margin-top: 0;
+        float: right;
+    }
+
+    .pagination + & {
+        margin-top: $pagination-padding-vertical + 1px;
+    }
 }
 
 
@@ -33,8 +43,8 @@
 
 a.collapsible,
 .collapsible > legend {
-    cursor: pointer;
     color: $link-color;
+    cursor: pointer;
     @include user-select(none);
 
     &:hover {
@@ -76,6 +86,7 @@ a.collapsible.collapsed,
         @include transition(max-height $collapsible-animation-time ease-out);
 
         > div {
+            // scss-lint:disable ImportantRule
             display: block !important;
             opacity: 1;
             visibility: visible;
@@ -112,8 +123,8 @@ a.collapsible.collapsed,
 .contextual {
     padding-left: $padding-base-vertical;
     float: right;
-    cursor: default;
     white-space: nowrap;
+    cursor: default;
 
     input,
     select {
@@ -310,6 +321,7 @@ p.subtitle {
     }
 
     &.ui-sortable-placeholder {
+        // scss-lint:disable ImportantRule
         outline: 1px dashed $highlight-border;
         background: $highlight-bg;
         visibility: visible !important;
@@ -317,7 +329,7 @@ p.subtitle {
 
     &.ui-sortable-helper {
         background: $body-bg;
-        box-shadow: $panel-shadow;
+        @include nice-shadow(4);
     }
 }
 
@@ -602,7 +614,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/_forms.scss

@@ -112,12 +112,12 @@ select {
     }
 }
 
+
 /**
  * Browser hacks: unfortunately every browser has different capabilities when it
  * comes to styling <select> and <option> tags.
  */
 
-
 // Mozilla Firefox
 @-moz-document url-prefix() {
     select {
@@ -125,10 +125,16 @@ select {
             padding: 0;
         }
 
-        option {
+        option,
+        optgroup:before {
             padding: $input-padding-vertical $input-padding-horizontal;
             border-bottom: 1px dotted $gray-lighter;
         }
+
+        optgroup > option {
+            padding-right: $input-padding-horizontal * 2;
+            padding-left: $input-padding-horizontal * 2;
+        }
     }
 }
 
@@ -277,8 +283,8 @@ em.info {
             margin-left: 0;
             padding-left: 16px;
             float: none;
-            cursor: pointer;
             text-align: left;
+            cursor: pointer;
 
             > input {
                 margin-top: 0;
@@ -361,6 +367,7 @@ input {
 }
 
 select.bool_cf {
+    // scss-lint:disable ImportantRule
     width: auto !important;
 }
 
@@ -495,6 +502,7 @@ select.bool_cf {
  * inline styles. Don't allow it break the layout
  */
 #all_attributes > p[style] {
+    // scss-lint:disable ImportantRule
     margin-right: 0 !important;
     margin-bottom: 0;
     padding-left: 0;
@@ -517,7 +525,7 @@ select.bool_cf {
         display: block;
     }
 
-    // scss-lint:disable VendorPrefixes
+    // scss-lint:disable VendorPrefix
     #watchers_inputs {
         display: block;
         max-width: 64em;

src/sass/components/_gantt.scss

@@ -115,31 +115,15 @@
     }
 }
 
-.version-behind-schedule a,
+.version-behind-schedule,
-.issue-behind-schedule a {
+.issue-behind-schedule {
     color: $brand-warning;
-
-    @if $color-trackers {
-        &.issue {
-            background-color: $brand-warning;
-            color: $brand-text;
-            font-weight: 700;
-        }
-    }
 }
 
-.version-overdue a,
+.version-overdue,
-.issue-overdue a,
+.issue-overdue,
-.project-overdue a {
+.project-overdue {
     color: $brand-danger;
-
-    @if $color-trackers {
-        &.issue {
-            background-color: $brand-danger;
-            color: $brand-text;
-            font-weight: 700;
-        }
-    }
 }
 
 /**
@@ -161,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;
 
@@ -759,14 +766,15 @@ $icon-danger-hover-color:            darken($brand-danger, 10%);
     div.wiki {
         .external {
             @extend %fa-icon;
-            white-space: nowrap;
 
             &:before {
+                display: inline;
                 margin-right: 3px;
                 font-size: 10px;
                 content: $fa-var-external-link;
             }
         }
+    }
 
     .contextual [href*="edit"] {
         @extend %fa-icon;
@@ -781,7 +789,6 @@ $icon-danger-hover-color:            darken($brand-danger, 10%);
             display: none;
         }
     }
-    }
 
     #attach_files_link {
         @extend %fa-icon;
@@ -912,6 +919,7 @@ $icon-danger-hover-color:            darken($brand-danger, 10%);
         background: url("../../../images/delete.png") no-repeat 1px 50%;
 
         &:hover {
+            // scss-lint:disable ImportantRule
             text-decoration: none !important;
         }
     }

src/sass/components/_issue.scss

@@ -168,10 +168,11 @@ div.attachments {
 
     p {
         margin: 10px 0 0;
-
-        &:first-child {
-            margin-top: 0;
     }
+
+    p:first-child,
+    .contextual + p {
+        margin-top: 0;
     }
 
     img {

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/components/_list.scss

@@ -11,9 +11,16 @@ table.list {
         margin-bottom: 0;
     }
 
+    @if $table-list-highlight-rows {
+        > tbody > tr:hover {
+            background-color: $table-bg-hover;
+        }
+    }
+
     th {
         padding: $table-cell-padding;
-        border-bottom: 2px solid $table-border-color;
+        border: 2px solid $table-border-color;
+        border-width: $table-list-header-border;
         color: $gray;
         vertical-align: bottom;
 
@@ -24,7 +31,8 @@ table.list {
 
     td {
         padding: $table-cell-padding;
-        border-bottom: 1px solid $table-border-color;
+        border: 1px solid $table-border-color;
+        border-width: $table-list-item-border;
         text-align: left;
         vertical-align: top;
 
@@ -207,9 +215,6 @@ tr {
     }
 }
 
-// /* do you */ .even {
-// }
-
 td.center {
     text-align: center;
 }
@@ -352,8 +357,16 @@ tr.entry {
     }
 }
 
-.odd {
+@if $table-list-color-odd-rows {
+    .odd {
         background-color: $table-bg-accent;
+    }
+}
+
+@if $table-list-color-even-rows {
+    .even {
+        background-color: $table-bg-accent;
+    }
 }
 
 
@@ -575,5 +588,6 @@ table.files {
     td.tick,
     td.reorder {
         width: 15%;
+        text-align: center;
     }
 }

src/sass/components/_pagination.scss

@@ -6,7 +6,7 @@
     .next,
     .page {
         display: inline-block;
-        padding: $padding-small-vertical $padding-small-horizontal;
+        padding: $pagination-padding-vertical $pagination-padding-horizontal;
         border: 1px solid $pagination-border;
         border-radius: $border-radius-base;
         background-color: $pagination-bg;
@@ -24,13 +24,19 @@
     .page.current {
         border-color: $pagination-active-border;
         background-color: $pagination-active-bg;
-        cursor: default;
         color: $pagination-active-color;
+        cursor: default;
         z-index: 2;
     }
 
     .items,
     .per-page {
-        margin-left: $padding-small-vertical;
+        display: inline-block;
+        margin: ($pagination-padding-vertical + 1px) 0 ($pagination-padding-vertical + 1px) $pagination-padding-vertical;
     }
 }
+
+p.pagination {
+    margin-bottom: 0;
+    float: left;
+}

src/sass/components/_plugins.scss

@@ -29,6 +29,10 @@
             display: none;
         }
     }
+
+    .burndown_chart {
+        max-width: $sidebar-width-computed;
+    }
 }
 
 
@@ -80,6 +84,12 @@
 // http://www.redminecrm.com/projects/people/
 // --------------------------------------------------
 
+#people_list {
+    table.index {
+        margin-bottom: $line-height-computed;
+    }
+}
+
 #content {
     .person.details {
         margin-bottom: $line-height-computed;
@@ -212,8 +222,6 @@
     }
 
     .buttons {
-        > input {
+        white-space: nowrap;
-            margin-left: .5em;
-        }
     }
 }

src/sass/components/_print.scss

@@ -20,6 +20,7 @@
     }
 
     #content {
+        // scss-lint:disable ImportantRule
         width: 100%;
         margin: 0;
         padding: 0;

src/sass/components/_tabs.scss

@@ -7,20 +7,42 @@
 
     position: relative;
     margin-bottom: $line-height-computed;
-    padding-right: $tabs-buttons-width;
     overflow: hidden;
 
+    @if not $flexbox-layout {
+        padding-right: $tabs-buttons-width;
+    }
+
     > ul {
-        width: 2000px; // stop it from breaking
+        // scss-lint:disable VendorPrefix
         margin: 0;
         padding-left: 0;
         border-bottom: 1px solid $tab-border;
         list-style: none;
+
+        @if $flexbox-layout {
+            display: -ms-flexbox;
+            display: -webkit-flex;
+            display: flex;
+            height: $line-height-computed + $tab-padding-vertical * 2 + 1px;
+            -webkit-flex-wrap: nowrap;
+            -ms-flex-wrap: nowrap;
+            flex-wrap: nowrap;
+        } @else {
+            width: 2000px;
             @extend %clearfix;
+        }
 
         > li {
             margin-bottom: -1px;
+
+            @if $flexbox-layout {
+                -webkit-flex: 0 1 auto;
+                -ms-flex: 0 1 auto;
+                flex: 0 1 auto;
+            } @else {
                 float: left;
+            }
 
             > a {
                 display: block;
@@ -30,6 +52,7 @@
                 border: 1px solid transparent;
                 border-radius: $border-radius-base $border-radius-base 0 0;
                 text-align: center;
+                white-space: nowrap;
 
                 &:hover,
                 &:focus {
@@ -53,11 +76,12 @@
         right: 0;
         width: $tabs-buttons-width;
         padding-left: 5px;
+        border-bottom: 1px solid $tab-border;
         background-color: $body-bg;
 
         > button {
             width: 50%;
-            height: $tab-padding-vertical * 2 + $line-height-computed;
+            height: $tab-padding-vertical * 2 + $line-height-computed + 1px;
             margin: 0;
             padding: 0;
             float: left;

src/sass/components/_top.scss

@@ -139,6 +139,7 @@
     position: relative;
     background-color: $header-bg;
     color: $header-text;
+    @extend %clearfix;
 
     > h1 {
         padding: $header-padding-vertical $header-padding-horizontal;

src/sass/components/_wiki.scss

@@ -128,6 +128,12 @@ div.wiki {
         }
     }
 
+    a {
+        // scss-lint:disable DuplicateProperty
+        word-break: break-all;
+        word-break: break-word;
+    }
+
     p,
     ul,
     ol {
@@ -182,23 +188,19 @@ div.wiki {
     }
 
     code {
-        // scss-lint:disable DuplicateProperty
         padding: .2em .33em;
         border-radius: $border-radius-base;
-        background-color: #f5f5f5; // IE8 fallback
         background-color: rgba(#000, .04);
         font-size: $font-size-small;
     }
 
     pre {
-        // scss-lint:disable DuplicateProperty
         width: auto;
         margin-bottom: 1.15em;
         padding: 4px 8px;
         border: 1px solid #e7e7e7;
         border-radius: $border-radius-base;
         border-color: rgba(#000, .068);
-        background-color: #f7f7f7; // IE8 fallback
         background-color: rgba(#000, .03);
         overflow-x: auto;
         overflow-y: hidden;
@@ -212,6 +214,11 @@ div.wiki {
         }
     }
 
+    img {
+        max-width: 100%;
+        vertical-align: middle;
+    }
+
     .toc {
         margin-bottom: $line-height-computed;
         margin-left: 0;
@@ -279,11 +286,6 @@ div.wiki {
                 }
             }
         }
-
-        img {
-            max-width: 100%;
-            vertical-align: middle;
-        }
     }
 
     .toc-active-prev + .toc {
@@ -308,6 +310,7 @@ h4,
 h5,
 h6 {
     .wiki-anchor {
+        // scss-lint:disable ImportantRule
         display: none;
         position: relative;
         top: -(1em - $font-size-small);
@@ -364,21 +367,16 @@ p.footnote {
     border-top: 1px solid $gray-lighter;
 
     > p {
+        margin-bottom: 0;
         float: left;
     }
 
     #add_attachment_form {
+        padding-top: $line-height-computed;
         clear: left;
     }
 }
 
-.controller-wiki.action-show {
-    .other-formats {
-        margin-top: 0;
-        float: right;
-    }
-}
-
 
 //
 // Custom classes for Bootstrap-like features

src/sass/javascripts/_sidebar-toggler.scss

@@ -9,8 +9,10 @@
     #sidebar {
         @if $fixed-layout {
             opacity: 1;
+            will-change: margin, opacity;
             @include transition(margin .5s, opacity .5s);
         } @else {
+            will-change: margin;
             @include transition(margin .5s);
         }
 

src/sass/lib/font-awesome/_mixins.scss

@@ -1,5 +1,5 @@
 // Mixins
-// scss-lint:disable VendorPrefixes
+// scss-lint:disable VendorPrefix
 // --------------------------
 
 @mixin fa-icon() {

src/sass/mixins/_buttons.scss

@@ -7,33 +7,52 @@
 }
 
 @mixin button-variant($color, $bg, $border) {
-    $focus-bg:      darken($bg, 8%);
+    $correction: 1;
-    $focus-border:  darken($border, 8%);
+    @if hue($bg) > 120 and hue($bg) < 160 or lightness($bg) > 90 {
-    $active-shadow: inset 0 1px 3px rgba(#000, .3);
+        $correction: .5;
+    }
+    $normal-shadow: darken($border, 12% * $correction);
+    $focus-bg:      darken($bg, 12% * $correction);
+    $focus-border:  darken($border, 12% * $correction);
+    $focus-shadow:  darken($focus-border, 12% * $correction);
+    $active-bg:     darken($bg, 12% * $correction);
+    $active-border: darken($border, 15% * $correction);
+    $active-shadow: inset 0 3px 4px -2px $active-border;
 
-    color: $color;
+    @if lightness($bg) > 98 {
-    border-color: $border;
-    background-color: $bg;
-    box-shadow: 0 1px 0 $border;
-
-    @if lightness($bg) > 90 {
         $focus-bg:      darken($bg, 5%);
         $focus-border:  darken($border, 5%);
-        $active-shadow: inset 0 1px 2px rgba(#000, .1);
+        $normal-shadow: none;
+        $focus-shadow:  none;
+    }
+
+    background-color: $bg;
+    color: $color;
+    @if $normal-shadow == "none" {
+        border-color: $border;
+        box-shadow: none;
+    } @else {
+        border-color: $border $border $normal-shadow;
+        box-shadow: 0 1px 0 $normal-shadow;
     }
 
     &:hover,
     &:focus {
-        border-color: $focus-border;
         background-color: $focus-bg;
         color: $color;
-        box-shadow: 0 1px 0 $focus-border;
+        @if $focus-shadow == "none" {
+            border-color: $focus-border;
+            box-shadow: none;
+        } @else {
+            border-color: $focus-border $focus-border $focus-shadow;
+            box-shadow: 0 1px 0 $focus-shadow;
+        }
     }
 
     &:active {
-        border-color: $border;
+        border-color: $active-border;
-        background-color: $bg;
+        background-color: $active-bg;
-        @include translate(0, 1px);
         box-shadow: $active-shadow;
+        @include translate(0, 1px);
     }
 }

src/sass/mixins/_gradients.scss

@@ -1,5 +1,5 @@
 // Gradients
-// scss-lint:disable VendorPrefixes
+// scss-lint:disable VendorPrefix
 
 
 // Horizontal gradient, from left to right

src/sass/mixins/_image.scss

@@ -1,13 +1,14 @@
 // Retina image
 //
+
 @mixin img-retina($file-2x, $width-1x, $height-1x) {
     @media
     only screen and (-webkit-min-device-pixel-ratio: 2),
-    only screen and (   min--moz-device-pixel-ratio: 2),
+    only screen and (min--moz-device-pixel-ratio: 2),
-    only screen and (     -o-min-device-pixel-ratio: 2/1),
+    only screen and (-o-min-device-pixel-ratio: 2/1),
-    only screen and (        min-device-pixel-ratio: 2),
+    only screen and (min-device-pixel-ratio: 2),
-    only screen and (                min-resolution: 192dpi),
+    only screen and (min-resolution: 192dpi),
-    only screen and (                min-resolution: 2dppx) {
+    only screen and (min-resolution: 2dppx) {
         background-image: url("#{$file-2x}");
         background-size: $width-1x $height-1x;
     }

src/sass/mixins/_issues.scss

@@ -16,8 +16,16 @@
             color: darken($color, 10%);
         }
 
+        @if $table-list-color-odd-rows {
             &.odd {
-            background: darken($background, 3%);
+                background: darken($background, $table-accent-factor * 100%);
+            }
+        }
+
+        @if $table-list-color-even-rows {
+            &.even {
+                background: darken($background, $table-accent-factor * 100%);
+            }
         }
 
         td {
@@ -33,6 +41,24 @@
         }
     }
 
+    @if $table-list-highlight-rows {
+        table.list > tbody > tr#{$parent}:hover {
+            background: darken($background, $table-hover-factor * 100%);
+        }
+
+        @if $table-list-color-odd-rows {
+            &.odd {
+                background: darken($background, ($table-accent-factor + $table-hover-factor) * 100%);
+            }
+        }
+
+        @if $table-list-color-even-rows {
+            &.even {
+                background: darken($background, ($table-accent-factor + $table-hover-factor) * 100%);
+            }
+        }
+    }
+
     @if $colored-issue {
         .issue.details#{$parent} {
             color: $color;

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/mixins/_vendor-prefixes.scss

@@ -1,5 +1,5 @@
 // Vendor Prefixes
-// scss-lint:disable VendorPrefixes
+// scss-lint:disable VendorPrefix NameFormat
 //
 // All vendor mixins are deprecated as of v3.2.0 due to the introduction of
 // Autoprefixer in our Gruntfile. They will be removed in v4.

src/sass/plugins/redmine_backlogs/global.scss

@@ -1,7 +1,7 @@
 @import "common";
 
 html {
-    overflow-y: scroll !important;
+    overflow-y: scroll;
     height: 100%;
 }
 
@@ -13,8 +13,8 @@ body {
     background-color: mix($gray-lighter, $header-bg, 70%);
     color: $text-color;
     font-family: $font-family-base;
-    font-weight: $font-weight-normal;
     font-size: $font-size-base;
+    font-weight: $font-weight-normal;
     line-height: $line-height-base;
 }
 
@@ -27,19 +27,19 @@ a {
         color: $link-hover-color;
         text-decoration: $link-hover-decoration;
     }
+}
 
-    &.issue.closed {
+.issue.closed {
     color: $link-color-issue-closed;
     text-decoration: $link-closed-decoration;
-    }
+}
 
-    &.project.closed {
+.project.closed {
     color: $link-color-project-closed;
-    }
+}
 
-    &.user.locked {
+.user.locked {
     color: $link-color-user-locked;
-    }
 }
 
 
@@ -91,10 +91,10 @@ button.ui-multiselect {
     padding: $input-padding-vertical $input-padding-horizontal;
     border: 1px solid $input-border;
     background: $input-bg;
-    cursor: default;
     color: $input-color;
     white-space: nowrap;
     box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075);
+    cursor: default;
     overflow: hidden;
     @include transition(border-color ease-in-out .1s, box-shadow ease-in-out .1s);
     @include box-sizing(border-box);

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

@@ -1,3 +1,4 @@
+// scss-lint:disable ImportantRule
 @import "../common";
 
 /*
@@ -211,6 +212,10 @@
     text-decoration: none;
 }
 
+.ui-sortable-helper {
+    @include nice-shadow(4);
+}
+
 
 /* Interaction Cues
 ----------------------------------*/
@@ -693,6 +698,7 @@
     margin: 0;
     padding: 2px;
     list-style: none;
+    @include nice-shadow(2);
 
     .ui-menu {
         margin-top: -3px;
@@ -725,9 +731,9 @@
     position: relative;
     margin-right: .1em;
     padding: 0;
-    cursor: pointer;
     text-align: center;
     text-decoration: none !important;
+    cursor: pointer;
     overflow: visible;
     zoom: 1;
 }
@@ -893,8 +899,8 @@ button.ui-button::-moz-focus-inner {
             margin: .5em .4em .5em 0;
             padding: .2em .6em .3em;
             float: right;
-            cursor: pointer;
             line-height: 1.4em;
+            cursor: pointer;
             overflow: visible;
         }
     }
@@ -1055,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;
@@ -1188,6 +1195,7 @@ button.ui-button::-moz-focus-inner {
     }
 
     .ui-datepicker-calendar {
+        margin: 0;
         table-layout: fixed;
 
         td {
@@ -1243,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

@@ -1,3 +1,4 @@
+// scss-lint:disable ImportantRule
 @import "../common";
 
 .ui-multiselect {
@@ -58,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

@@ -1,3 +1,4 @@
+// scss-lint:disable ImportantRule
 @import "common";
 
 $header-line-height:            floor($line-height-computed * 1.5);
@@ -166,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;
@@ -309,9 +310,9 @@ $story-sp-input-width:          50px;
             border-right: 1px solid #888;
             border-bottom: 1px solid $header-bg;
             border-radius: ($border-radius-large - 1px) 0 0;
-            cursor: pointer;
             font-size: $font-size-small;
             line-height: $line-height-base;
+            cursor: pointer;
             overflow: visible;
             @include transition(background-color 0s .1s, border-color 0s .1s);
 
@@ -723,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 {
@@ -766,10 +767,10 @@ $story-sp-input-width:          50px;
             display: inline-block;
             margin-bottom: 0;
             border: 1px solid;
-            cursor: pointer;
             font-weight: $btn-font-weight;
             text-align: center;
             white-space: nowrap;
+            cursor: pointer;
             @include button-size($input-padding-vertical, $input-padding-horizontal, $font-size-base, $line-height-base, $border-radius-base);
             @include user-select(none);
             @include transition(background-color ease-in-out .07s, border-color ease-in-out .07s, box-shadow ease-in-out .07s);
@@ -790,12 +791,6 @@ $story-sp-input-width:          50px;
             &:active {
                 text-decoration: none;
             }
-
-            @media screen and (max-width: $screen-md-max) {
-                padding: $input-padding-vertical;
-                font-size: $font-size-small-px;
-                line-height: $line-height-computed;
-            }
         }
     }
 }
@@ -840,6 +835,6 @@ $story-sp-input-width:          50px;
 
 #show_completed_sprints {
     margin-left: $padding-side / 2;
-    cursor: pointer;
     color: $gray-darkest;
+    cursor: pointer;
 }

src/sass/plugins/redmine_backlogs/taskboard.scss

@@ -223,10 +223,10 @@ $swimlane-width:                $issue-width + 2 * ($issue-margin + $issue-paddi
         border: 0 none;
         border-radius: $border-radius-large;
         background-color: $gray-lighter;
-        cursor: move;
         color: $gray-darker;
         font-size: 10px;
         line-height: 1.3;
+        cursor: move;
     }
 
     .placeholder {
@@ -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 {