From ccedbacb7d7e957f2879b2e6aa1926f74a6d7df5 Mon Sep 17 00:00:00 2001 From: BryceLTaylor Date: Wed, 9 Feb 2022 12:48:13 -0500 Subject: [PATCH] Update .scss files to fix deprecated syntax hsl and hsla now require a % for the saturation and lightness values division is now handled with the function math.div() rather than a slash This removes many deprecation warnings --- src/_colors.scss | 78 +++++++++---------- src/_frameless.scss | 30 +++---- src/components/card/card.scss | 4 +- src/components/carousel/carousel.scss | 2 +- src/components/dropdown-banner/banner.scss | 10 +-- src/components/dropdown/dropdown.scss | 2 +- .../extension-landing/extension-landing.scss | 4 +- src/components/forms/validation-message.scss | 4 +- src/components/info-button/info-button.scss | 2 +- src/components/modal/base/modal.scss | 6 +- src/components/tooltip/tooltip.scss | 4 +- .../annual-report/2020/annual-report.scss | 14 ++-- src/views/developers/developers.scss | 6 +- src/views/download/download.scss | 4 +- src/views/parents/parents.scss | 2 +- .../studio/modals/studio-report-modal.scss | 2 +- .../studio/modals/user-projects-modal.scss | 6 +- src/views/teachers/landing/landing.scss | 2 +- 18 files changed, 93 insertions(+), 89 deletions(-) diff --git a/src/_colors.scss b/src/_colors.scss index 21366d562..867d0da79 100644 --- a/src/_colors.scss +++ b/src/_colors.scss @@ -1,70 +1,70 @@ /* UI Primary Colors */ -$ui-blue: hsla(215, 100, 65, 1); // #4C97FF Motion Primary -$ui-blue-dark: hsla(215, 65, 55, 1); // #3373CC Motion Secondary -$ui-blue-10percent: hsla(215, 100, 65, .1); -$ui-blue-25percent: hsla(215, 100, 65, .25); +$ui-blue: hsla(215, 100%, 65%, 1); // #4C97FF Motion Primary +$ui-blue-dark: hsla(215, 65%, 55%, 1); // #3373CC Motion Secondary +$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-high-contrast: hsla(30, 100, 55, 1); // #FFAB19 Control Primary -$ui-orange-10percent: hsla(35, 90, 55, .1); -$ui-orange-25percent: hsla(35, 90, 55, .25); -$ui-orange-90percent: hsla(38, 100, 55, .9); +$ui-orange: hsla(38, 100%, 55%, 1); // #FFAB19 Control Primary +$ui-orange-high-contrast: hsla(30, 100%, 55%, 1); // #FFAB19 Control Primary +$ui-orange-10percent: hsla(35, 90%, 55%, .1); +$ui-orange-25percent: hsla(35, 90%, 55%, .25); +$ui-orange-90percent: hsla(38, 100%, 55%, .9); -$ui-dark-orange: hsla(30, 100, 55, 1); // ##FF8C1A Variables Primary +$ui-dark-orange: hsla(30, 100%, 55%, 1); // ##FF8C1A Variables Primary $ui-red: hsla(20, 100%, 55%, 1); /* #FF661A */ $ui-red-25percent: hsla(20, 100%, 55%, .25); $ui-green-35percent: rgba(126, 225, 195, .35); -$ui-light-gray: hsla(0, 0, 98, 1); //#FAFAFA -$ui-gray: hsla(0, 0, 95, 1); //#F2F2F2 -$ui-dark-gray: hsla(0, 0, 70, 1); //#B3B3B3 +$ui-light-gray: hsla(0, 0%, 98%, 1); //#FAFAFA +$ui-gray: hsla(0, 0%, 95%, 1); //#F2F2F2 +$ui-dark-gray: hsla(0, 0%, 70%, 1); //#B3B3B3 -$background-color: hsla(0, 0, 99, 1); //#FDFDFD +$background-color: hsla(0, 0%, 99%, 1); //#FDFDFD -$motion-blue-3: hsla(215, 60, 50, 1);//#3373CC +$motion-blue-3: hsla(215, 60%, 50%, 1);//#3373CC /* UI Secondary Colors */ /* 3.0 colors */ /* Using www naming convention for now, should be consistent with gui */ -$ui-aqua: hsla(163, 85, 40, 1); // #0FBD8C Extension Primary -$ui-aqua-dark: hsla(163, 85, 30, 1); // #0B8E69 Extension Aqua 3 -$ui-purple: hsla(260, 100, 70, 1); // #9966FF Looks Primary -$ui-purple-dark: hsla(260, 60, 60, 1); // #774DCB Looks Secondary +$ui-aqua: hsla(163, 85%, 40%, 1); // #0FBD8C Extension Primary +$ui-aqua-dark: hsla(163, 85%, 30%, 1); // #0B8E69 Extension Aqua 3 +$ui-purple: hsla(260, 100%, 70%, 1); // #9966FF Looks Primary +$ui-purple-dark: hsla(260, 60%, 60%, 1); // #774DCB Looks Secondary $ui-magenta: hsla(300, 53%, 60%, 1); /* #CF63CF Sounds Primary */ -$ui-yellow: hsla(45, 100, 50, 1); // #FFBF00 Events Primary -$ui-coral: hsla(350, 100, 70, 1); // #FF6680 More Blocks Primary -$ui-coral-dark: hsla(350, 100, 60, 1); // #FF3355 More Blocks tertiary +$ui-yellow: hsla(45, 100%, 50%, 1); // #FFBF00 Events Primary +$ui-coral: hsla(350, 100%, 70%, 1); // #FF6680 More Blocks Primary +$ui-coral-dark: hsla(350, 100%, 60%, 1); // #FF3355 More Blocks tertiary $ui-white: hsla(0, 100%, 100%, 1); //#FFF $ui-white-15percent: hsla(0, 100%, 100%, .15); //#FFF -$ui-light-primary: hsl(215, 100, 95); -$ui-light-primary-transparent: hsla(215, 100, 95, 0); +$ui-light-primary: hsl(215, 100%, 95%); +$ui-light-primary-transparent: hsla(215, 100%, 95%, 0); -$ui-border: hsla(0, 0, 85, 1); //#D9D9D9 +$ui-border: hsla(0, 0%, 85%, 1); //#D9D9D9 /* modals */ -$ui-mint-green: hsl(163, 69, 44); -$ui-light-mint: hsl(163, 53, 67); +$ui-mint-green: hsl(163, 69%, 44%); +$ui-light-mint: hsl(163, 53%, 67%); /* Overlay UI Gray Colors */ -$active-gray: hsla(0, 0, 0, .1); -$active-dark-gray: hsla(0, 0, 0, .2); -$box-shadow-gray: hsla(0, 0, 0, .25); -$box-shadow-light-gray: hsla(0, 0, 0, .15); -$overlay-gray: hsla(0, 0, 0, .75); +$active-gray: hsla(0, 0%, 0%, .1); +$active-dark-gray: hsla(0, 0%, 0%, .2); +$box-shadow-gray: hsla(0, 0%, 0%, .25); +$box-shadow-light-gray: hsla(0, 0%, 0%, .15); +$overlay-gray: hsla(0, 0%, 0%, .75); $transparent-light-blue: rgba(229, 240, 254, 0); /* 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-gray-60percent: hsla(225, 15, 40, .6); -$type-white: hsla(0, 100, 100, 1); //#FFF +$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-gray-60percent: hsla(225, 15%, 40%, .6); +$type-white: hsla(0, 100%, 100%, 1); //#FFF $link-blue: $ui-blue; /* Down Deep */ -$dd-darkblue: hsla(195, 72.4, 17.1, 1); -$dd-medium-blue: hsla(195, 72.4, 42, .65); \ No newline at end of file +$dd-darkblue: hsla(195, 72.4%, 17.1%, 1); +$dd-medium-blue: hsla(195, 72.4%, 42%, .65); diff --git a/src/_frameless.scss b/src/_frameless.scss index c5d1d1a1d..947ed21d4 100644 --- a/src/_frameless.scss +++ b/src/_frameless.scss @@ -9,8 +9,10 @@ // Configuration // +@use "sass:math"; + $font-size: 16px; // Your base font-size in pixels -$em: $font-size / 1em; // Shorthand for outputting ems +$em: math.div($font-size, 1em); // Shorthand for outputting ems $column: 60px; // The column-width of your grid in pixels $gutter: 20px; // The gutter-width of your grid in pixels @@ -21,18 +23,18 @@ $gutter: 20px; // The gutter-width of your grid in pixels // Column-widths in variables, in ems // -$cols1: ( 1 * ($column + $gutter) - $gutter) / $em; -$cols2: ( 2 * ($column + $gutter) - $gutter) / $em; -$cols3: ( 3 * ($column + $gutter) - $gutter) / $em; -$cols4: ( 4 * ($column + $gutter) - $gutter) / $em; -$cols5: ( 5 * ($column + $gutter) - $gutter) / $em; -$cols6: ( 6 * ($column + $gutter) - $gutter) / $em; -$cols7: ( 7 * ($column + $gutter) - $gutter) / $em; -$cols8: ( 8 * ($column + $gutter) - $gutter) / $em; -$cols9: ( 9 * ($column + $gutter) - $gutter) / $em; -$cols10: (10 * ($column + $gutter) - $gutter) / $em; -$cols11: (11 * ($column + $gutter) - $gutter) / $em; -$cols12: (12 * ($column + $gutter) - $gutter) / $em; +$cols1: math.div( 1 * ($column + $gutter) - $gutter, $em); +$cols2: math.div( 2 * ($column + $gutter) - $gutter, $em); +$cols3: math.div( 3 * ($column + $gutter) - $gutter, $em); +$cols4: math.div( 4 * ($column + $gutter) - $gutter, $em); +$cols5: math.div( 5 * ($column + $gutter) - $gutter, $em); +$cols6: math.div( 6 * ($column + $gutter) - $gutter, $em); +$cols7: math.div( 7 * ($column + $gutter) - $gutter, $em); +$cols8: math.div( 8 * ($column + $gutter) - $gutter, $em); +$cols9: math.div( 9 * ($column + $gutter) - $gutter, $em); +$cols10: math.div(10 * ($column + $gutter) - $gutter, $em); +$cols11: math.div(11 * ($column + $gutter) - $gutter, $em); +$cols12: math.div(12 * ($column + $gutter) - $gutter, $em); $desktop: 942px; $tabletPortrait: 768px; @@ -69,7 +71,7 @@ $medium-height: "only screen and (min-height : #{$mobile}) and (max-height : #{$ // @mixin width ($cols: 1) { - width: ($cols * ($column + $gutter) - $gutter) / $em; + width: math.div($cols * ($column + $gutter) - $gutter, $em); } //4 columns diff --git a/src/components/card/card.scss b/src/components/card/card.scss index 74ea9746e..96dfb824d 100644 --- a/src/components/card/card.scss +++ b/src/components/card/card.scss @@ -1,8 +1,10 @@ +@use "sass:math"; + @import "../../colors"; @import "../../frameless"; .card { - border-radius: 8px / $em; + border-radius: math.div(8px, $em); box-shadow: 0 0 0 .125rem $active-gray; background-color: $ui-white; diff --git a/src/components/carousel/carousel.scss b/src/components/carousel/carousel.scss index b8fbcdbf4..e6c596ac6 100644 --- a/src/components/carousel/carousel.scss +++ b/src/components/carousel/carousel.scss @@ -14,7 +14,7 @@ .slick-next, .slick-prev { - margin-top: -$icon-size / 2; + margin-top: -$icon-size * 0.5; width: $icon-size; height: $icon-size; diff --git a/src/components/dropdown-banner/banner.scss b/src/components/dropdown-banner/banner.scss index a52d2cbfc..c5094eae0 100644 --- a/src/components/dropdown-banner/banner.scss +++ b/src/components/dropdown-banner/banner.scss @@ -24,14 +24,14 @@ $navigation-height: 50px; .close { float: right; - margin-top: $navigation-height / 4; - border-radius: $navigation-height / 4; + margin-top: $navigation-height * 0.25; + border-radius: $navigation-height * 0.25; background-color: $box-shadow-gray; - width: $navigation-height / 2; - height: $navigation-height / 2; + width: $navigation-height * 0.5; + height: $navigation-height * 0.5; text-decoration: none; text-shadow: none; - line-height: $navigation-height / 2; + line-height: $navigation-height * 0.5; color: $ui-white; font-weight: normal; } diff --git a/src/components/dropdown/dropdown.scss b/src/components/dropdown/dropdown.scss index 02b691f83..5ac55e87d 100644 --- a/src/components/dropdown/dropdown.scss +++ b/src/components/dropdown/dropdown.scss @@ -73,7 +73,7 @@ &:before { display: block; position: absolute; - top: -$arrow-border-width / 2; + top: -$arrow-border-width * 0.5; right: 10%; transform: rotate(45deg); diff --git a/src/components/extension-landing/extension-landing.scss b/src/components/extension-landing/extension-landing.scss index 2c550f79b..f4f4fbfcf 100644 --- a/src/components/extension-landing/extension-landing.scss +++ b/src/components/extension-landing/extension-landing.scss @@ -1,3 +1,5 @@ +@use "sass:math"; + @import "../../colors"; @import "../../frameless"; @@ -294,7 +296,7 @@ ul, ol { &.indented { - padding-left: $cols1 + (20px / $em); + padding-left: $cols1 + math.div(20px, $em); } } } diff --git a/src/components/forms/validation-message.scss b/src/components/forms/validation-message.scss index 3a217ed99..0a5620f91 100644 --- a/src/components/forms/validation-message.scss +++ b/src/components/forms/validation-message.scss @@ -24,7 +24,7 @@ display: block; position: absolute; top: 1rem; - left: -$arrow-border-width / 2; + left: -$arrow-border-width * 0.5; transform: rotate(45deg); @@ -50,7 +50,7 @@ &:before { left: unset; - right: -$arrow-border-width / 2; + right: -$arrow-border-width * 0.5; border-top: 1px solid $active-gray; border-right: 1px solid $active-gray; border-bottom: none; diff --git a/src/components/info-button/info-button.scss b/src/components/info-button/info-button.scss index 2e9e3e4f4..0723f8e55 100644 --- a/src/components/info-button/info-button.scss +++ b/src/components/info-button/info-button.scss @@ -40,7 +40,7 @@ display: block; position: absolute; top: 1rem; - left: -$arrow-border-width / 2; + left: -$arrow-border-width * 0.5; transform: rotate(45deg); diff --git a/src/components/modal/base/modal.scss b/src/components/modal/base/modal.scss index bd71751e1..0918ea343 100644 --- a/src/components/modal/base/modal.scss +++ b/src/components/modal/base/modal.scss @@ -46,8 +46,8 @@ $modal-close-size: 1rem; .modal-content-close { position: absolute; - top: $modal-close-size / 2; - right: $modal-close-size / 2; + top: $modal-close-size * 0.5; + right: $modal-close-size * 0.5; border-radius: $modal-close-size; background-color: $active-dark-gray; cursor: pointer; @@ -58,7 +58,7 @@ $modal-close-size: 1rem; } .modal-content-close-img { - padding-top: $modal-close-size / 2; + padding-top: $modal-close-size * 0.5; } /* Close button, Submit button, etc. */ diff --git a/src/components/tooltip/tooltip.scss b/src/components/tooltip/tooltip.scss index 76dc2ad81..55ef06313 100644 --- a/src/components/tooltip/tooltip.scss +++ b/src/components/tooltip/tooltip.scss @@ -22,7 +22,7 @@ transform: translate(-2.75rem, 2rem); visibility: hidden; z-index: 1; - margin-top: $arrow-border-width / 2; + margin-top: $arrow-border-width * 0.5; border: 1px solid $active-gray; border-radius: 5px; background-color: $ui-blue; @@ -34,7 +34,7 @@ &:before { display: block; position: absolute; - top: -$arrow-border-width / 2; + top: -$arrow-border-width * 0.5; left: $arrow-border-width; transform: rotate(45deg); diff --git a/src/views/annual-report/2020/annual-report.scss b/src/views/annual-report/2020/annual-report.scss index fec122ad7..a217b6cf9 100644 --- a/src/views/annual-report/2020/annual-report.scss +++ b/src/views/annual-report/2020/annual-report.scss @@ -8,7 +8,7 @@ $masthead-breakpoint: "only screen and (max-width : 960px)"; $masthead-breakpoint-wave: "only screen and (max-width : 1060px)"; $timeline-breakpoint: "only screen and (max-width : 1030px)"; -$ui-purple-dark: hsla(260, 55, 55, 1); +$ui-purple-dark: hsla(260, 55%, 55%, 1); // $motion-blue-3 #3373CC .adaptation .button{ @@ -240,7 +240,7 @@ a, a:link, a:visited, a:active{ max-width: 300px; } } - + .founders-signature{ display: flex; .mitch-photo { @@ -1137,7 +1137,7 @@ img.comment-viz{ } @media #{$intermediate} { - max-width: 620px; + max-width: 620px; } } .images{ @@ -1183,7 +1183,7 @@ img.comment-viz{ } } .bubble{ - margin-left: 0px; + margin-left: 0px; color: $ui-white; font-weight: bold; @media #{$intermediate-and-smaller} { @@ -1236,7 +1236,7 @@ img.comment-viz{ max-width: 600px; width: 100%; margin: 80px auto 0; - + h4{ margin-top: 56px; } @@ -1454,7 +1454,7 @@ img.comment-viz{ margin: 20px auto; } } - + .initiatives-adaptation, .initiatives-community { .world{ max-width: 600px; @@ -1943,7 +1943,7 @@ img.comment-viz{ display: flex; flex-direction: column; text-align: left; - + @media #{$intermediate} { max-width: 620px; } diff --git a/src/views/developers/developers.scss b/src/views/developers/developers.scss index b598c8501..ab814f7cd 100644 --- a/src/views/developers/developers.scss +++ b/src/views/developers/developers.scss @@ -32,7 +32,7 @@ $developer-spot: $ui-aqua; } .band { - $band-color: hsla(360, 100, 100, .15); + $band-color: hsla(360, 100%, 100%, .15); margin-top: 2rem; background-color: $band-color; @@ -240,7 +240,3 @@ $developer-spot: $ui-aqua; } } } - - - - diff --git a/src/views/download/download.scss b/src/views/download/download.scss index bd238de64..5c5a64225 100644 --- a/src/views/download/download.scss +++ b/src/views/download/download.scss @@ -1,3 +1,5 @@ +@use "sass:math"; + @import "../../colors"; @import "../../frameless"; @@ -56,7 +58,7 @@ .download-info { padding-right: $cols1; - max-width: $cols7 + ($gutter / $em); + max-width: $cols7 + math.div($gutter, $em); align-items: flex-start; .download-copy { diff --git a/src/views/parents/parents.scss b/src/views/parents/parents.scss index d194657c9..efd06db2d 100644 --- a/src/views/parents/parents.scss +++ b/src/views/parents/parents.scss @@ -67,7 +67,7 @@ $story-width: $cols3; } .band { - $band-color: hsla(360, 100, 100, .15); + $band-color: hsla(360, 100%, 100%, .15); margin-top: 2rem; background-color: $band-color; diff --git a/src/views/studio/modals/studio-report-modal.scss b/src/views/studio/modals/studio-report-modal.scss index b68d8f2a6..bf0b5dd8b 100644 --- a/src/views/studio/modals/studio-report-modal.scss +++ b/src/views/studio/modals/studio-report-modal.scss @@ -85,7 +85,7 @@ } .studio-report-selected { - background: hsla(215, 100, 65, .15); + background: hsla(215, 100%, 65%, .15); } .studio-report-header-selected { diff --git a/src/views/studio/modals/user-projects-modal.scss b/src/views/studio/modals/user-projects-modal.scss index 31bb9d2cf..e077e5c90 100644 --- a/src/views/studio/modals/user-projects-modal.scss +++ b/src/views/studio/modals/user-projects-modal.scss @@ -20,8 +20,8 @@ background: white; border: 1px solid rgba(0, 0, 0, 0.15); color: #575e75; - &.active { - background: $ui-blue; + &.active { + background: $ui-blue; color: white; } &:active { @@ -60,7 +60,7 @@ } .studio-projects-empty-text { - color: hsla(215, 100, 65, .75); + color: hsla(215, 100%, 65%, .75); max-width: 325px; text-align: center; line-height: 1.5rem; diff --git a/src/views/teachers/landing/landing.scss b/src/views/teachers/landing/landing.scss index 4cb3467e6..7e9e30656 100644 --- a/src/views/teachers/landing/landing.scss +++ b/src/views/teachers/landing/landing.scss @@ -68,7 +68,7 @@ $story-width: $cols3; } .band { - $band-color: hsla(360, 100, 100, .15); + $band-color: hsla(360, 100%, 100%, .15); margin-top: 2rem; background-color: $band-color;