From 670129a2cc56efe1630e39bc798d7fe55a661b3b Mon Sep 17 00:00:00 2001 From: Jonathan Barratt Date: Tue, 31 Mar 2015 19:19:31 +0700 Subject: [PATCH 1/2] Replace all color literals with color variables --- app/styles/components/loading-bar.scss | 2 +- app/styles/dependencies/colors.scss | 16 ++++++++++++++++ app/styles/layout/base.scss | 4 ++-- app/styles/layout/elements.scss | 6 +++--- app/styles/layout/invitation.scss | 2 +- app/styles/layout/typography.scss | 2 +- .../modules/admin/admin-functionalities.scss | 2 +- .../modules/admin/admin-membership-table.scss | 2 +- app/styles/modules/admin/admin-roles.scss | 4 ++-- .../modules/admin/admin-submenu-roles.scss | 2 +- app/styles/modules/admin/admin-submenu.scss | 2 +- app/styles/modules/common/projects-nav.scss | 2 +- app/styles/modules/wiki/wiki-nav.scss | 2 +- 13 files changed, 32 insertions(+), 16 deletions(-) diff --git a/app/styles/components/loading-bar.scss b/app/styles/components/loading-bar.scss index 1e68bf04..3cf3e26f 100644 --- a/app/styles/components/loading-bar.scss +++ b/app/styles/components/loading-bar.scss @@ -13,7 +13,7 @@ height: 5px; } - $colors-list: #bbe831 #237400 #e43050 #810061 #618000; + $colors-list: $yellow-pear $green-japanese-laurel $red-amaranth $purple-eggplant $green-olive; @each $current-color in $colors-list { $i: index($colors-list, $current-color) - 1; .item-#{$i} { diff --git a/app/styles/dependencies/colors.scss b/app/styles/dependencies/colors.scss index aeaffb2d..662d23ec 100755 --- a/app/styles/dependencies/colors.scss +++ b/app/styles/dependencies/colors.scss @@ -5,9 +5,21 @@ $blackish: #050505; $grayer: #444; $gray: #555; $gray-light: #b8b8b8; +$gray-tower-gray: #a6b2a7; +$gray-saltpan: #e9f0da; +$gray-silver: #cdcdcd; +$gray46-47: #777; +$gray60: #999; +$gray80: #ccc; +$gray87-88: #ddd; +$gray-mine-shaft: #232323; $whitish: #f5f5f5; $white: #fff; +$green-japanese-laurel: #237400; +$green-olive: #618000; +$green-christi: #74a218; + $green-taiga: #72a114; $fresh-taiga: #9dce0a; $dark-taiga: #879b89; @@ -15,6 +27,10 @@ $dark-taiga: #879b89; $red-light: #ff8282; $red: #f00; +$red-amaranth: #e43050; +$purple-eggplant: #810061; +$yellow-pear: #bbe831; + $postit: #fff8e4; $postit-hover: #f1e8cd; $postit-dark-hover: #cfc29b; diff --git a/app/styles/layout/base.scss b/app/styles/layout/base.scss index cae94352..19a65308 100644 --- a/app/styles/layout/base.scss +++ b/app/styles/layout/base.scss @@ -5,8 +5,8 @@ html { } body { @extend %text; - background: #fff; // fallback - color: #444; + background: $white; // fallback + color: $grayer; min-height: 100%; width: 100%; .master { diff --git a/app/styles/layout/elements.scss b/app/styles/layout/elements.scss index 44f9c1da..1df28c3e 100644 --- a/app/styles/layout/elements.scss +++ b/app/styles/layout/elements.scss @@ -3,17 +3,17 @@ // Blockquotes blockquote, blockquote p { - color: #777; + color: $gray46-47; font-style: italic; line-height: 24px; } blockquote { - border-left: 1px solid #ddd; + border-left: 1px solid $gray87-88; margin: 0 0 20px; padding: 9px 20px 0 19px; cite { @extend %small; - color: #555; + color: $gray; display: block; &:before { content: '\2014 \0020'; diff --git a/app/styles/layout/invitation.scss b/app/styles/layout/invitation.scss index 6f66c900..afa8a95a 100644 --- a/app/styles/layout/invitation.scss +++ b/app/styles/layout/invitation.scss @@ -100,7 +100,7 @@ text-align: center; width: 200px; .form-header { - color: #999; + color: $gray60; } } .register-form { diff --git a/app/styles/layout/typography.scss b/app/styles/layout/typography.scss index bf4bbba9..8ffbcd98 100755 --- a/app/styles/layout/typography.scss +++ b/app/styles/layout/typography.scss @@ -80,7 +80,7 @@ strong { } hr { - border: solid #ddd; + border: solid $gray87-88; border-width: 1px 0 0; clear: both; height: 0; diff --git a/app/styles/modules/admin/admin-functionalities.scss b/app/styles/modules/admin/admin-functionalities.scss index 6f92a677..0e7f55cb 100644 --- a/app/styles/modules/admin/admin-functionalities.scss +++ b/app/styles/modules/admin/admin-functionalities.scss @@ -19,7 +19,7 @@ vertical-align: top; width: 32%; &.active { - background-color: #e9f0da; + background-color: $gray-saltpan; opacity: 1; } .icon { diff --git a/app/styles/modules/admin/admin-membership-table.scss b/app/styles/modules/admin/admin-membership-table.scss index 820a3232..b7926d84 100644 --- a/app/styles/modules/admin/admin-membership-table.scss +++ b/app/styles/modules/admin/admin-membership-table.scss @@ -139,7 +139,7 @@ } input:checked { + div { - background-color: #74a218; + background-color: $green-christi; margin-left: 50%; transition: all .2s linear; } diff --git a/app/styles/modules/admin/admin-roles.scss b/app/styles/modules/admin/admin-roles.scss index daa55c21..8d6eaf2c 100644 --- a/app/styles/modules/admin/admin-roles.scss +++ b/app/styles/modules/admin/admin-roles.scss @@ -88,7 +88,7 @@ } input:checked { + div { - background-color: #74a218; + background-color: $green-christi; margin-left: 50%; transition: all .2s linear; } @@ -104,7 +104,7 @@ input:disabled { cursor: auto; + div { - background-color: #ccc; + background-color: $gray80; } } } diff --git a/app/styles/modules/admin/admin-submenu-roles.scss b/app/styles/modules/admin/admin-submenu-roles.scss index 441df1ab..7f7ddde9 100644 --- a/app/styles/modules/admin/admin-submenu-roles.scss +++ b/app/styles/modules/admin/admin-submenu-roles.scss @@ -6,7 +6,7 @@ li { @extend %larger; @extend %title; - border-bottom: 1px solid #a6b2a7; + border-bottom: 1px solid $gray-tower-gray; text-transform: uppercase; &:last-child { border-bottom: 0; diff --git a/app/styles/modules/admin/admin-submenu.scss b/app/styles/modules/admin/admin-submenu.scss index 5af5f8e5..39124b18 100644 --- a/app/styles/modules/admin/admin-submenu.scss +++ b/app/styles/modules/admin/admin-submenu.scss @@ -6,7 +6,7 @@ li { @extend %larger; @extend %title; - border-bottom: 1px solid #a6b2a7; + border-bottom: 1px solid $gray-tower-gray; text-transform: uppercase; &:last-child { border-bottom: 0; diff --git a/app/styles/modules/common/projects-nav.scss b/app/styles/modules/common/projects-nav.scss index d922ff23..6a435844 100644 --- a/app/styles/modules/common/projects-nav.scss +++ b/app/styles/modules/common/projects-nav.scss @@ -1,5 +1,5 @@ .projects-nav { - background-color: #232323; + background-color: $gray-mine-shaft; display: flex; flex-direction: column; height: 100%; diff --git a/app/styles/modules/wiki/wiki-nav.scss b/app/styles/modules/wiki/wiki-nav.scss index d80724ab..bb1e227a 100644 --- a/app/styles/modules/wiki/wiki-nav.scss +++ b/app/styles/modules/wiki/wiki-nav.scss @@ -2,7 +2,7 @@ li { @extend %large; @extend %title; - border-bottom: 1px solid #cdcdcd; + border-bottom: 1px solid $gray-silver; text-transform: uppercase; &:hover { .icon { From 992f15abe75216b9dff94d25bcdffb1620f5b30f Mon Sep 17 00:00:00 2001 From: Jonathan Barratt Date: Wed, 1 Apr 2015 16:00:14 +0700 Subject: [PATCH 2/2] Disable scss-lint ImportantRule linter only for those blocks which already currently use !important --- app/styles/layout/base.scss | 1 + app/styles/layout/elements.scss | 1 + app/styles/layout/typography.scss | 2 ++ app/styles/modules/backlog/backlog-table.scss | 1 + app/styles/modules/common/related-tasks.scss | 1 + 5 files changed, 6 insertions(+) diff --git a/app/styles/layout/base.scss b/app/styles/layout/base.scss index 19a65308..a98ce08e 100644 --- a/app/styles/layout/base.scss +++ b/app/styles/layout/base.scss @@ -138,6 +138,7 @@ body { } .hidden { + // scss-lint:disable ImportantRule display: none !important; } diff --git a/app/styles/layout/elements.scss b/app/styles/layout/elements.scss index 1df28c3e..8f98716f 100644 --- a/app/styles/layout/elements.scss +++ b/app/styles/layout/elements.scss @@ -53,6 +53,7 @@ sup { //Datepicker .pika-single { + // scss-lint:disable ImportantRule z-index: 999999; .pika-title { color: $grayer; diff --git a/app/styles/layout/typography.scss b/app/styles/layout/typography.scss index 8ffbcd98..bf4f9279 100755 --- a/app/styles/layout/typography.scss +++ b/app/styles/layout/typography.scss @@ -101,6 +101,7 @@ a:visited { // Taiga Icons [data-icon]:before { + // scss-lint:disable ImportantRule content: attr(data-icon); font-family: 'taiga' !important; -moz-osx-font-smoothing: grayscale; @@ -115,6 +116,7 @@ a:visited { [class^='icon-']:before, [class*=' icon-']:before { + // scss-lint:disable ImportantRule font-family: 'taiga' !important; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; diff --git a/app/styles/modules/backlog/backlog-table.scss b/app/styles/modules/backlog/backlog-table.scss index c92e6333..1dc5c5d3 100644 --- a/app/styles/modules/backlog/backlog-table.scss +++ b/app/styles/modules/backlog/backlog-table.scss @@ -189,6 +189,7 @@ transition: background .2s ease-in; } a { + // scss-lint:disable ImportantRule color: $white !important; &:hover { color: $white; diff --git a/app/styles/modules/common/related-tasks.scss b/app/styles/modules/common/related-tasks.scss index aab7266b..aab10288 100644 --- a/app/styles/modules/common/related-tasks.scss +++ b/app/styles/modules/common/related-tasks.scss @@ -136,6 +136,7 @@ background: $red-light; color: $white; a { + // scss-lint:disable ImportantRule color: $white !important; &:hover { color: $white;