scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-25 16:48:10 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Remove Darken and Ligthen SCSS

Browse source 
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)
This commit is contained in:
carljbowman 2018-07-31 14:37:49 -04:00
parent 4b3d6b9e9d
commit 6a8676ea35
11 changed files with 35 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/_colors.scss
View file

@ -5,6 +5,7 @@ $ui-blue-10percent: hsla(215, 100, 65, .1);
$ui-blue-25percent: hsla(215, 100, 65, .25); $ui-blue-25percent: hsla(215, 100, 65, .25);
$ui-orange: hsla(38, 100, 55, 1); // #FFAB19 Control Primary $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-orange-25percent: hsla(35, 90, 55, .25);
$ui-light-gray: hsla(0, 0, 98, 1); //#FAFAFA $ui-light-gray: hsla(0, 0, 98, 1); //#FAFAFA
@ -39,6 +40,7 @@ $overlay-gray: hsla(0, 0, 0, .75);
/* Typography Colors */ /* Typography Colors */
$header-gray: hsla(225, 15, 40, 1); //#575E75 $header-gray: hsla(225, 15, 40, 1); //#575E75
$type-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 $type-white: hsla(0, 100, 100, 1); //#FFF
$link-blue: $ui-blue; $link-blue: $ui-blue;

2
src/components/forms/charcount.scss
View file

@ -2,7 +2,7 @@
.char-count { .char-count {
letter-spacing: 1px; letter-spacing: 1px;
color: lighten($type-gray, 30%); color: $type-gray-75percent;
font-weight: 500; font-weight: 500;
&.overmax { &.overmax {

4
src/components/forms/input.scss
View file

@ -2,7 +2,6 @@
@import "../../frameless"; @import "../../frameless";
$base-bg: $ui-light-gray; $base-bg: $ui-light-gray;
$pass-bg: lighten($ui-aqua, 35%);
.row { .row {
label { label {
@ -32,8 +31,7 @@ $pass-bg: lighten($ui-aqua, 35%);
} }
&.pass { &.pass {
border: 1px solid $active-dark-gray; border: 1px solid $ui-aqua;
background-color: $pass-bg;
} }
/* IE10/11-specific style resets */ /* IE10/11-specific style resets */

2
src/components/social-message/social-message.scss
View file

@ -41,7 +41,7 @@ a.social-messages-profile-link {
color: $type-gray; color: $type-gray;
&:hover { &:hover {
color: darken($type-gray, 10); color: $link-blue;
} }
} }

8
src/components/spinner/spinner.scss
View file

@ -18,13 +18,13 @@
animation: circleFadeDelay 1.2s infinite ease-in-out both; animation: circleFadeDelay 1.2s infinite ease-in-out both;
margin: 0 auto; margin: 0 auto;
border-radius: 100%; border-radius: 100%;
background-color: darken($ui-white, 8%); background-color: $ui-gray;
width: 15%; width: 15%;
height: 15%; height: 15%;
content: ""; content: "";
.white & { .white & {
background-color: $ui-blue-dark background-color: $ui-blue-dark
} }
} }
} }
@ -37,7 +37,7 @@
transform: rotate($rotation); transform: rotate($rotation);
&:before { &:before {
animation-delay: $delay; animation-delay: $delay;
} }
} }
@ -54,5 +54,5 @@
40% { 40% {
opacity: 1; opacity: 1;
} }
} }

2
src/components/ttt-tile/ttt-tile.scss
View file

@ -106,7 +106,7 @@
font-weight: 500; font-weight: 500;
&:hover { &:hover {
background-color: lighten($link-blue, 40%); background-color: $ui-blue-10percent;
} }
} }

4
src/main.scss
View file

@ -74,7 +74,7 @@ p {
padding: 1.25em; padding: 1.25em;
&.orange { &.orange {
background-color: lighten($ui-orange, 30); background-color: $ui-orange-10percent;
} }
} }
@ -138,7 +138,7 @@ p {
} }
::selection { ::selection {
background-color: lighten($ui-blue, 30); background-color: $ui-blue-25percent;
} }
ol, ol,

2
src/views/conference/2016/schedule/schedule.scss
View file

@ -67,7 +67,7 @@
display: block; display: block;
&:hover { &:hover {
background-color: lighten($ui-blue, 40); background-color: $ui-blue-25percent;
} }
} }
} }

2
src/views/conference/2017/index/index.scss
View file

@ -27,7 +27,7 @@
} }
.conf2017-title-band { .conf2017-title-band {
background-color: lighten($ui-blue, 10%); background-color: $ui-blue-10percent;
padding: 1.5rem; padding: 1.5rem;
text-align: center; text-align: center;
color: $type-white; color: $type-white;

4
src/views/messages/messages.scss
View file

@ -54,9 +54,9 @@
} }
.admin-message { .admin-message {
border: 1px solid darken($ui-gray, 10); border: 1px solid $active-dark-gray;
border-radius: 5px; border-radius: 5px;
background-color: lighten($ui-blue, 40); background-color: $ui-blue-25percent;
padding: 1rem; padding: 1rem;
} }

40
src/views/tips/tips.scss
View file

@ -31,25 +31,23 @@ $base-bg: $ui-white;
max-width: calc(100% - 2rem); max-width: calc(100% - 2rem);
} }
$darken-button: rgba(0, 0, 0, .1);
.tips-button { .tips-button {
margin-right: .75rem; margin-right: .75rem;
background-color: $ui-blue; background-color: $ui-blue;
color: $ui-white; color: $ui-white;
font-size: 1rem; font-size: 1rem;
&.getting-started-button { &.getting-started-button {
margin-right: 0; margin-right: 0;
background-color: $darken-button; background-color: $ui-aqua;
} }
img { img {
margin-right: 1rem; margin-right: 1rem;
height: 1.25rem; height: 1.25rem;
vertical-align: middle; vertical-align: middle;
} }
a { a {
color: $ui-white; color: $ui-white;
} }
@ -95,26 +93,26 @@ img.tips-icon {
} }
} }
} }
.ttt-head { .ttt-head {
p { p {
max-width: $cols4; max-width: $cols4;
} }
} }
//put the image first if in 4-column //put the image first if in 4-column
.tips-info-body { .tips-info-body {
max-width: $cols4; max-width: $cols4;
text-align: center; text-align: center;
&.tips-illustration { &.tips-illustration {
order: -1; order: -1;
img { img {
width: $cols4; width: $cols4;
} }
} }
.button { .button {
width: 100%; width: 100%;
} }
@ -131,13 +129,13 @@ img.tips-icon {
} }
} }
} }
.ttt-head { .ttt-head {
p { p {
max-width: $cols6; max-width: $cols6;
} }
} }
.tips-info-body.tips-illustration { .tips-info-body.tips-illustration {
order: -1; order: -1;
img { img {
@ -163,27 +161,27 @@ img.tips-icon {
} }
} }
} }
.ttt-head { .ttt-head {
p { p {
max-width: $cols6; max-width: $cols6;
} }
} }
.tips-info-section { .tips-info-section {
&.mod-align-top { &.mod-align-top {
align-items: flex-start; align-items: flex-start;
} }
} }
.tips-info-body { .tips-info-body {
max-width: $cols4; max-width: $cols4;
} }
.tips-button { .tips-button {
width: 100%; width: 100%;
} }
img.mod-flow-left { img.mod-flow-left {
transform: translate(-1*$cols2); transform: translate(-1*$cols2);
} }
@ -200,19 +198,19 @@ img.tips-icon {
} }
} }
} }
.ttt-head { .ttt-head {
p { p {
max-width: $cols8; max-width: $cols8;
} }
} }
.tips-info-section { .tips-info-section {
&.mod-align-top { &.mod-align-top {
align-items: flex-start; align-items: flex-start;
} }
} }
.tips-info-body { .tips-info-body {
max-width: $cols6; max-width: $cols6;
&.mod-narrow { &.mod-narrow {