From 6a8676ea35c8c29f70a3ef6acde628bfccfc066b Mon Sep 17 00:00:00 2001 From: carljbowman Date: Tue, 31 Jul 2018 14:37:49 -0400 Subject: [PATCH] Remove Darken and Ligthen SCSS Updated all the places in the SCSS where we use Darken and Lighten properties. These properties have been problematic in the past and caused some state issues, e.g. New message(s) hightlight (which was fixed seperately from this issue) --- src/_colors.scss | 2 + src/components/forms/charcount.scss | 2 +- src/components/forms/input.scss | 4 +- .../social-message/social-message.scss | 2 +- src/components/spinner/spinner.scss | 8 ++-- src/components/ttt-tile/ttt-tile.scss | 2 +- src/main.scss | 4 +- .../conference/2016/schedule/schedule.scss | 2 +- src/views/conference/2017/index/index.scss | 2 +- src/views/messages/messages.scss | 4 +- src/views/tips/tips.scss | 40 +++++++++---------- 11 files changed, 35 insertions(+), 37 deletions(-) diff --git a/src/_colors.scss b/src/_colors.scss index 12db9d0be..63b41a69d 100644 --- a/src/_colors.scss +++ b/src/_colors.scss @@ -5,6 +5,7 @@ $ui-blue-10percent: hsla(215, 100, 65, .1); $ui-blue-25percent: hsla(215, 100, 65, .25); $ui-orange: hsla(38, 100, 55, 1); // #FFAB19 Control Primary +$ui-orange-10percent: hsla(35, 90, 55, .1); $ui-orange-25percent: hsla(35, 90, 55, .25); $ui-light-gray: hsla(0, 0, 98, 1); //#FAFAFA @@ -39,6 +40,7 @@ $overlay-gray: hsla(0, 0, 0, .75); /* Typography Colors */ $header-gray: hsla(225, 15, 40, 1); //#575E75 $type-gray: hsla(225, 15, 40, 1); //#575E75 +$type-gray-75percent: hsla(225, 15, 40, .75); $type-white: hsla(0, 100, 100, 1); //#FFF $link-blue: $ui-blue; diff --git a/src/components/forms/charcount.scss b/src/components/forms/charcount.scss index ff5d85e94..05d1a4bee 100644 --- a/src/components/forms/charcount.scss +++ b/src/components/forms/charcount.scss @@ -2,7 +2,7 @@ .char-count { letter-spacing: 1px; - color: lighten($type-gray, 30%); + color: $type-gray-75percent; font-weight: 500; &.overmax { diff --git a/src/components/forms/input.scss b/src/components/forms/input.scss index 214365f28..3fd202c3e 100644 --- a/src/components/forms/input.scss +++ b/src/components/forms/input.scss @@ -2,7 +2,6 @@ @import "../../frameless"; $base-bg: $ui-light-gray; -$pass-bg: lighten($ui-aqua, 35%); .row { label { @@ -32,8 +31,7 @@ $pass-bg: lighten($ui-aqua, 35%); } &.pass { - border: 1px solid $active-dark-gray; - background-color: $pass-bg; + border: 1px solid $ui-aqua; } /* IE10/11-specific style resets */ diff --git a/src/components/social-message/social-message.scss b/src/components/social-message/social-message.scss index b6cdcc871..258fa713e 100644 --- a/src/components/social-message/social-message.scss +++ b/src/components/social-message/social-message.scss @@ -41,7 +41,7 @@ a.social-messages-profile-link { color: $type-gray; &:hover { - color: darken($type-gray, 10); + color: $link-blue; } } diff --git a/src/components/spinner/spinner.scss b/src/components/spinner/spinner.scss index b335718ee..671b3738b 100644 --- a/src/components/spinner/spinner.scss +++ b/src/components/spinner/spinner.scss @@ -18,13 +18,13 @@ animation: circleFadeDelay 1.2s infinite ease-in-out both; margin: 0 auto; border-radius: 100%; - background-color: darken($ui-white, 8%); + background-color: $ui-gray; width: 15%; height: 15%; content: ""; .white & { - background-color: $ui-blue-dark + background-color: $ui-blue-dark } } } @@ -37,7 +37,7 @@ transform: rotate($rotation); &:before { - animation-delay: $delay; + animation-delay: $delay; } } @@ -54,5 +54,5 @@ 40% { opacity: 1; - } + } } diff --git a/src/components/ttt-tile/ttt-tile.scss b/src/components/ttt-tile/ttt-tile.scss index 71bb685aa..148168675 100644 --- a/src/components/ttt-tile/ttt-tile.scss +++ b/src/components/ttt-tile/ttt-tile.scss @@ -106,7 +106,7 @@ font-weight: 500; &:hover { - background-color: lighten($link-blue, 40%); + background-color: $ui-blue-10percent; } } diff --git a/src/main.scss b/src/main.scss index b7c074ec2..5a0f9cb64 100644 --- a/src/main.scss +++ b/src/main.scss @@ -74,7 +74,7 @@ p { padding: 1.25em; &.orange { - background-color: lighten($ui-orange, 30); + background-color: $ui-orange-10percent; } } @@ -138,7 +138,7 @@ p { } ::selection { - background-color: lighten($ui-blue, 30); + background-color: $ui-blue-25percent; } ol, diff --git a/src/views/conference/2016/schedule/schedule.scss b/src/views/conference/2016/schedule/schedule.scss index aa4dc891d..d65a921d0 100644 --- a/src/views/conference/2016/schedule/schedule.scss +++ b/src/views/conference/2016/schedule/schedule.scss @@ -67,7 +67,7 @@ display: block; &:hover { - background-color: lighten($ui-blue, 40); + background-color: $ui-blue-25percent; } } } diff --git a/src/views/conference/2017/index/index.scss b/src/views/conference/2017/index/index.scss index 70695cb25..2d6abd032 100644 --- a/src/views/conference/2017/index/index.scss +++ b/src/views/conference/2017/index/index.scss @@ -27,7 +27,7 @@ } .conf2017-title-band { - background-color: lighten($ui-blue, 10%); + background-color: $ui-blue-10percent; padding: 1.5rem; text-align: center; color: $type-white; diff --git a/src/views/messages/messages.scss b/src/views/messages/messages.scss index a782957e0..f91c679ed 100644 --- a/src/views/messages/messages.scss +++ b/src/views/messages/messages.scss @@ -54,9 +54,9 @@ } .admin-message { - border: 1px solid darken($ui-gray, 10); + border: 1px solid $active-dark-gray; border-radius: 5px; - background-color: lighten($ui-blue, 40); + background-color: $ui-blue-25percent; padding: 1rem; } diff --git a/src/views/tips/tips.scss b/src/views/tips/tips.scss index 4dcbe1419..880c3652c 100644 --- a/src/views/tips/tips.scss +++ b/src/views/tips/tips.scss @@ -31,25 +31,23 @@ $base-bg: $ui-white; max-width: calc(100% - 2rem); } -$darken-button: rgba(0, 0, 0, .1); - .tips-button { margin-right: .75rem; background-color: $ui-blue; color: $ui-white; font-size: 1rem; - + &.getting-started-button { margin-right: 0; - background-color: $darken-button; + background-color: $ui-aqua; } - + img { margin-right: 1rem; height: 1.25rem; vertical-align: middle; } - + a { color: $ui-white; } @@ -95,26 +93,26 @@ img.tips-icon { } } } - + .ttt-head { - + p { max-width: $cols4; } } - + //put the image first if in 4-column .tips-info-body { max-width: $cols4; text-align: center; - + &.tips-illustration { order: -1; img { width: $cols4; } } - + .button { width: 100%; } @@ -131,13 +129,13 @@ img.tips-icon { } } } - + .ttt-head { p { max-width: $cols6; } } - + .tips-info-body.tips-illustration { order: -1; img { @@ -163,27 +161,27 @@ img.tips-icon { } } } - + .ttt-head { p { max-width: $cols6; } } - + .tips-info-section { &.mod-align-top { align-items: flex-start; } } - + .tips-info-body { max-width: $cols4; } - + .tips-button { width: 100%; } - + img.mod-flow-left { transform: translate(-1*$cols2); } @@ -200,19 +198,19 @@ img.tips-icon { } } } - + .ttt-head { p { max-width: $cols8; } } - + .tips-info-section { &.mod-align-top { align-items: flex-start; } } - + .tips-info-body { max-width: $cols6; &.mod-narrow {