From 6a8676ea35c8c29f70a3ef6acde628bfccfc066b Mon Sep 17 00:00:00 2001
From: carljbowman <bowman@media.mit.edu>
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 {