From 1384fa0f40a7a75d72b1bbbf1645173cc00008ee Mon Sep 17 00:00:00 2001 From: MiroslavDionisiev Date: Thu, 23 Jan 2025 11:29:42 +0200 Subject: [PATCH 1/2] chore: address sass deprecation warning --- src/_colors.scss | 3 +- src/components/adminpanel/adminpanel.scss | 12 +- src/components/box/box.scss | 35 +- src/components/card/card.scss | 18 +- src/components/cards-modal/cards-modal.scss | 24 +- src/components/carousel/carousel.scss | 2 +- src/components/comment/comment.scss | 12 +- .../commenting-status/commenting-status.scss | 6 +- .../community-guidelines.scss | 14 +- src/components/crashmessage/crashmessage.scss | 10 +- src/components/deck/deck.scss | 6 +- src/components/dropdown-banner/banner.scss | 14 +- src/components/dropdown/dropdown.scss | 22 +- .../extension-landing/extension-landing.scss | 54 +-- src/components/flex-row/flex-row.scss | 8 +- src/components/footer/conference/footer.scss | 22 +- src/components/footer/container/footer.scss | 6 +- src/components/footer/www/footer.scss | 4 +- .../formik-forms/formik-checkbox.scss | 8 +- src/components/formik-forms/formik-input.scss | 18 +- .../formik-forms/formik-radio-button.scss | 18 +- .../formik-forms/formik-select.scss | 6 +- src/components/forms/button.scss | 16 +- src/components/forms/charcount.scss | 6 +- src/components/forms/checkbox.scss | 12 +- src/components/forms/general-error.scss | 8 +- src/components/forms/inplace-input.scss | 28 +- src/components/forms/input.scss | 16 +- src/components/forms/phone-input.scss | 14 +- src/components/forms/radio-group.scss | 10 +- src/components/forms/select.scss | 18 +- src/components/forms/textarea.scss | 12 +- src/components/forms/toggle-slider.scss | 8 +- src/components/forms/validation-message.scss | 30 +- src/components/grid/grid.scss | 24 +- src/components/info-button/info-button.scss | 18 +- .../informationpage/informationpage.scss | 30 +- .../install-scratch/install-scratch.scss | 14 +- src/components/intro/intro.scss | 26 +- src/components/join-flow/join-flow-step.scss | 12 +- src/components/join-flow/join-flow-steps.scss | 32 +- .../join-flow/next-step-button.scss | 10 +- src/components/journeys/common-journey.scss | 16 +- .../editor-journey/editor-journey.scss | 18 +- .../languagechooser/languagechooser.scss | 2 +- src/components/login/login.scss | 12 +- src/components/masonrygrid/masonrygrid.scss | 14 +- src/components/microworld/microworld.scss | 18 +- .../modal-navigation/modal-navigation.scss | 10 +- src/components/modal/addtostudio/modal.scss | 42 +- .../modal/base/modal-inner-content.scss | 4 +- src/components/modal/base/modal-title.scss | 4 +- src/components/modal/base/modal.scss | 35 +- src/components/modal/comments/modal.scss | 12 +- .../modal/email-confirmation/modal.scss | 4 +- src/components/modal/iframe/modal.scss | 2 +- src/components/modal/join/modal.scss | 12 +- src/components/modal/mute/modal.scss | 12 +- src/components/modal/report/modal.scss | 26 +- src/components/modal/social/modal.scss | 20 +- src/components/modal/ttt/modal.scss | 10 +- .../navigation/base/navigation.scss | 14 +- .../conference/2016/navigation.scss | 14 +- .../conference/2017/navigation.scss | 10 +- .../conference/2018/navigation.scss | 14 +- .../conference/2019/navigation.scss | 10 +- .../conference/2021/navigation.scss | 14 +- src/components/navigation/www/accountnav.scss | 16 +- src/components/navigation/www/navigation.scss | 28 +- .../nestedcarousel/nestedcarousel.scss | 4 +- src/components/news/news.scss | 10 +- .../not-available/not-available.scss | 2 +- src/components/os-chooser/os-chooser.scss | 10 +- src/components/page/conference/page.scss | 22 +- .../page/www/donor-recognition.scss | 22 +- src/components/people-grid/people-grid.scss | 6 +- .../privacy-banner/privacy-banner.scss | 12 +- .../projects-carousel/projects-carousel.scss | 14 +- src/components/registration/registration.scss | 4 +- src/components/registration/steps.scss | 26 +- src/components/slide/slide.scss | 8 +- .../social-message/social-message.scss | 16 +- .../stepnavigation/stepnavigation.scss | 10 +- src/components/steps/steps.scss | 6 +- .../subnavigation/subnavigation.scss | 14 +- src/components/tabs/tabs.scss | 28 +- src/components/tag/tag.scss | 6 +- .../teacher-banner/teacher-banner.scss | 12 +- .../text-and-media-snippet.scss | 26 +- src/components/thumbnail/thumbnail.scss | 6 +- .../thumbnailcolumn/thumbnailcolumn.scss | 10 +- .../timeline-card/timeline-card.scss | 15 +- src/components/title-banner/title-banner.scss | 12 +- .../title-banner/warning-banner.scss | 4 +- src/components/tooltip/tooltip.scss | 22 +- src/components/ttt-tile/ttt-tile.scss | 20 +- src/components/video/video.scss | 6 +- src/components/welcome/welcome.scss | 8 +- .../youtube-video-button.scss | 8 +- .../youtube-video-modal.scss | 6 +- src/main.scss | 38 +- src/views/about/about.scss | 16 +- .../annual-report/2019/annual-report.scss | 398 ++++++++--------- .../annual-report/2020/annual-report.scss | 363 +++++++-------- .../2020/country-blurb/country-blurb.scss | 6 +- .../annual-report/2021/annual-report.scss | 422 +++++++++--------- .../2021/video-youtube/video-youtube.scss | 6 +- .../become-a-scratcher.scss | 48 +- src/views/boost/boost.scss | 6 +- src/views/camp/camp.scss | 30 +- src/views/components/components.scss | 54 +-- .../conference/2016/details/details.scss | 10 +- src/views/conference/2016/expect/expect.scss | 32 +- src/views/conference/2016/index/index.scss | 22 +- src/views/conference/2016/plan/plan.scss | 24 +- .../conference/2016/schedule/schedule.scss | 30 +- src/views/conference/2017/index/index.scss | 26 +- .../conference/2018/details/details.scss | 10 +- src/views/conference/2018/expect/expect.scss | 32 +- src/views/conference/2018/index/index.scss | 24 +- src/views/conference/2018/plan/plan.scss | 24 +- .../conference/2018/schedule/schedule.scss | 30 +- src/views/conference/2019/index/index.scss | 30 +- src/views/conference/2021/index/index.scss | 18 +- src/views/cookies/cookies.scss | 6 +- src/views/credits/credits.scss | 2 +- src/views/developers/developers.scss | 44 +- src/views/download/download.scss | 28 +- src/views/download/scratch-link/download.scss | 4 +- src/views/download/scratch2/download.scss | 32 +- src/views/ev3/ev3.scss | 4 +- src/views/explore/explore.scss | 66 +-- src/views/gdxfor/gdxfor.scss | 6 +- src/views/guidelines/guidelines.scss | 18 +- src/views/ideas/ideas.scss | 44 +- src/views/join/join.scss | 4 +- src/views/messages/messages.scss | 38 +- src/views/microbit/microbit.scss | 6 +- src/views/parents/parents.scss | 48 +- src/views/preview/banner.scss | 18 +- src/views/preview/comment/comment.scss | 34 +- src/views/preview/extension-chip.scss | 14 +- src/views/preview/mod-info.scss | 6 +- src/views/preview/preview.scss | 70 +-- src/views/preview/stats.scss | 6 +- src/views/preview/subactions.scss | 20 +- src/views/preview/unsupported-browser.scss | 22 +- src/views/scratch_1.4/scratch_1.4.scss | 26 +- src/views/search/search.scss | 66 +-- src/views/splash/donate/donate-banner.scss | 16 +- .../splash/features/features-banner.scss | 34 +- src/views/splash/hoc/hoc-banner.scss | 40 +- src/views/splash/splash.scss | 22 +- .../starter-projects/starter-projects.scss | 16 +- .../studentcompleteregistration.scss | 10 +- .../studentregistration.scss | 10 +- .../studio/modals/manager-limit-modal.scss | 4 +- src/views/studio/modals/promote-modal.scss | 10 +- .../studio/modals/studio-report-modal.scss | 21 +- .../studio/modals/transfer-host-modal.scss | 35 +- .../studio/modals/user-projects-modal.scss | 33 +- src/views/studio/studio.scss | 84 ++-- .../teacherregistration.scss | 10 +- src/views/teachers/landing/landing.scss | 84 ++-- .../teacherwaitingroom.scss | 6 +- src/views/wedo2-legacy/wedo2.scss | 46 +- src/views/wedo2/wedo2.scss | 4 +- webpack.config.js | 9 +- 168 files changed, 2136 insertions(+), 2123 deletions(-) diff --git a/src/_colors.scss b/src/_colors.scss index 212c9092d25..8c3683dacc6 100644 --- a/src/_colors.scss +++ b/src/_colors.scss @@ -1,3 +1,4 @@ +@use "sass:color"; /* UI Primary Colors */ $ui-blue: hsla(215, 100%, 65%, 1); // #4C97FF Motion Primary $ui-blue-dark: hsla(215, 65%, 55%, 1); // #3373CC Motion Secondary @@ -33,7 +34,7 @@ $ui-cyan-blue: hsla(194, 73%, 36%, 1); //#19809F /* 3.0 colors */ /* Using www naming convention for now, should be consistent with gui */ $ui-aqua: hsla(144, 45%, 36%, 1); -$ui-aqua-dark: darken($ui-aqua, 10%); +$ui-aqua-dark: color.adjust($ui-aqua, $lightness: -10%); $ui-purple-light: hsla(260, 100%, 88%, 1); // #DACEF3 $ui-purple: hsla(260, 100%, 70%, 1); // #9966FF Looks Primary $ui-purple-dark: hsla(260, 60%, 60%, 1); // #855CD6 Looks Secondary diff --git a/src/components/adminpanel/adminpanel.scss b/src/components/adminpanel/adminpanel.scss index d576f7be137..1c13a4ffda1 100644 --- a/src/components/adminpanel/adminpanel.scss +++ b/src/components/adminpanel/adminpanel.scss @@ -1,13 +1,13 @@ -@import "../../colors"; +@use "../../colors"; .admin-panel { position: fixed; top: 0; left: 0; z-index: 99; - border: 1px solid $ui-gray; - box-shadow: 0 2px 5px $box-shadow-gray; - background-color: $ui-gray; + border: 1px solid colors.$ui-gray; + box-shadow: 0 2px 5px colors.$box-shadow-gray; + background-color: colors.$ui-gray; padding: 1rem; width: 230px; height: 100%; @@ -33,8 +33,8 @@ padding: .5rem 1rem; &.inprogress { - background-color: $ui-dark-gray; - color: $type-gray; + background-color: colors.$ui-dark-gray; + color: colors.$type-gray; } } } diff --git a/src/components/box/box.scss b/src/components/box/box.scss index bc981dd94a4..09800cd809b 100644 --- a/src/components/box/box.scss +++ b/src/components/box/box.scss @@ -1,16 +1,18 @@ -@import "../../colors"; -@import "../../frameless"; +@use "../../colors"; +@use "../../frameless"; -$base-bg: $ui-white; +$base-bg: colors.$ui-white; .box { display: inline-block; - border: 1px solid $ui-border; + border: 1px solid colors.$ui-border; border-radius: 10px 10px 0 0; + background-color: colors.$ui-white; + width: 100%; //4 columns - @media #{$small} { - width: $cols4; + @media #{frameless.$small} { + width: frameless.$cols4; .box-header { h4, @@ -22,8 +24,8 @@ $base-bg: $ui-white; } //6 columns - @media #{$medium} { - width: $cols6; + @media #{frameless.$medium} { + width: frameless.$cols6; .box-header { h4, @@ -35,8 +37,8 @@ $base-bg: $ui-white; } //8 columns - @media #{$intermediate} { - width: $cols8; + @media #{frameless.$intermediate} { + width: frameless.$cols8; .box-header { h4, @@ -48,8 +50,8 @@ $base-bg: $ui-white; } //12 columns - @media #{$big} { - width: $cols12; + @media #{frameless.$big} { + width: frameless.$cols12; .box-header { h4, @@ -60,17 +62,14 @@ $base-bg: $ui-white; } } - background-color: $ui-white; - width: 100%; - .box-header { display: block; clear: both; margin: 0; - border-top: 1px solid $ui-white; - border-bottom: 1px solid $ui-border; + border-top: 1px solid colors.$ui-white; + border-bottom: 1px solid colors.$ui-border; border-radius: 10px 10px 0 0; - background-color: $ui-gray; + background-color: colors.$ui-gray; padding: 8px 20px; height: 20px; diff --git a/src/components/card/card.scss b/src/components/card/card.scss index 9f8c48ff2b4..0c05790fe0b 100644 --- a/src/components/card/card.scss +++ b/src/components/card/card.scss @@ -1,12 +1,12 @@ @use "sass:math"; -@import "../../colors"; -@import "../../frameless"; +@use "../../colors"; +@use "../../frameless"; .card { - border-radius: math.div(8px, $em); - box-shadow: 0 0 0 .125rem $active-gray; - background-color: $ui-white; + border-radius: math.div(8px, frameless.$em); + box-shadow: 0 0 0 .125rem colors.$active-gray; + background-color: colors.$ui-white; .card-button { display: block; @@ -14,7 +14,7 @@ border-top-left-radius: 0; border-top-right-radius: 0; box-shadow: none; - background-color: $ui-aqua; + background-color: colors.$ui-aqua; width: 23.75rem; height: 4rem; @@ -35,7 +35,7 @@ &.has-error { .input { - border: 1px solid $ui-red-dark; + border: 1px solid colors.$ui-red-dark; } } @@ -46,7 +46,7 @@ } } -@media #{$small} { +@media #{frameless.$small} { .card { width: 22.5rem; @@ -60,7 +60,7 @@ } } -@media #{$medium-and-smaller} { +@media #{frameless.$medium-and-smaller} { .card { .input { width: 90%; diff --git a/src/components/cards-modal/cards-modal.scss b/src/components/cards-modal/cards-modal.scss index a0249421912..ea5b6d24fa0 100644 --- a/src/components/cards-modal/cards-modal.scss +++ b/src/components/cards-modal/cards-modal.scss @@ -1,5 +1,5 @@ -@import "../../colors"; -@import "../../frameless"; +@use "../../colors"; +@use "../../frameless"; .cards-modal-overlay { display: flex; @@ -13,7 +13,7 @@ left: 0; z-index: 510; - background-color: $box-shadow-light-gray; + background-color: colors.$box-shadow-light-gray; border-color: unset; } @@ -25,7 +25,7 @@ border-radius: 8px; width: 656px; - box-shadow: 0 0 0 4px $ui-blue-25percent; + box-shadow: 0 0 0 4px colors.$ui-blue-25percent; &:focus { outline: none; @@ -38,14 +38,14 @@ align-items: center; padding: 10px; - background-color: $ui-blue; + background-color: colors.$ui-blue; border-radius: 8px 8px 0 0; .cards-title { font-size: 1rem; font-weight: 700; line-height: 1.25rem; - color: $ui-white; + color: colors.$ui-white; margin-left: auto; margin-right: auto; } @@ -60,7 +60,7 @@ text-align: center; vertical-align: middle; - color: $header-gray; + color: colors.$header-gray; font-size: 1.5rem; font-weight: 700; line-height: 2rem; @@ -103,7 +103,7 @@ } .card + .card { - border-top: 1px solid $box-shadow-light-gray; + border-top: 1px solid colors.$box-shadow-light-gray; } } } @@ -128,12 +128,12 @@ width: 8px; height: 8px; background-color: transparent; - border: 2px solid $ui-blue; + border: 2px solid colors.$ui-blue; } .active{ - background-color: $ui-blue; - box-shadow: 0 0 0 4px $ui-blue-25percent; + background-color: colors.$ui-blue; + box-shadow: 0 0 0 4px colors.$ui-blue-25percent; } } } @@ -143,7 +143,7 @@ border: none; } -@media only screen and (max-width: $mobileIntermediate) { +@media only screen and (max-width: frameless.$mobileIntermediate) { .cards-modal-container { width: 100%; } diff --git a/src/components/carousel/carousel.scss b/src/components/carousel/carousel.scss index e6c596ac68a..75bc4c80035 100644 --- a/src/components/carousel/carousel.scss +++ b/src/components/carousel/carousel.scss @@ -1,4 +1,4 @@ -@import "../../colors"; +@use "../../colors"; .carousel { $icon-size: 40px; diff --git a/src/components/comment/comment.scss b/src/components/comment/comment.scss index 765436a32f7..a5790f8c711 100644 --- a/src/components/comment/comment.scss +++ b/src/components/comment/comment.scss @@ -1,8 +1,8 @@ -@import "../../colors"; +@use "../../colors"; .comment-text { position: relative; - border: 1px solid $ui-border; + border: 1px solid colors.$ui-border; border-radius: 0 5px 5px 5px; padding: 1rem; } @@ -12,8 +12,8 @@ position: absolute; top: -1px; left: -13px; - border-bottom: 12px solid $ui-border; - border-left: 13px solid $ui-border; + border-bottom: 12px solid colors.$ui-border; + border-left: 13px solid colors.$ui-border; border-radius: 0 0 0 13px; width: 0; content: ""; @@ -24,8 +24,8 @@ position: absolute; top: 0; left: -12px; - border-bottom: 10px solid $ui-white; - border-left: 12px solid $ui-white; + border-bottom: 10px solid colors.$ui-white; + border-left: 12px solid colors.$ui-white; border-radius: 0 0 0 12px; width: 0; content: ""; diff --git a/src/components/commenting-status/commenting-status.scss b/src/components/commenting-status/commenting-status.scss index 1a5e47b1479..11e0cfdde3c 100644 --- a/src/components/commenting-status/commenting-status.scss +++ b/src/components/commenting-status/commenting-status.scss @@ -1,11 +1,11 @@ -@import "../../colors"; +@use "../../colors"; .commenting-status { - border: 1px solid $ui-blue-10percent; + border: 1px solid colors.$ui-blue-10percent; border-radius: 8px; padding: 1.75rem 3rem 2rem; margin: .5rem 0 2rem; - background-color: $ui-blue-10percent; + background-color: colors.$ui-blue-10percent; text-align: center; box-sizing: border-box; diff --git a/src/components/community-guidelines/community-guidelines.scss b/src/components/community-guidelines/community-guidelines.scss index 93512b21782..b83e1e4521e 100644 --- a/src/components/community-guidelines/community-guidelines.scss +++ b/src/components/community-guidelines/community-guidelines.scss @@ -1,5 +1,5 @@ -@import "../../colors"; -@import "../../frameless"; +@use "../../colors"; +@use "../../frameless"; .col{ display: flex; @@ -29,7 +29,7 @@ max-width: 1000px; padding: auto; margin: auto; - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { flex-direction: column; } } @@ -40,14 +40,14 @@ flex: 4; justify-content: center; align-items: center; - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { flex: 12; order: 1; align-items: flex-end; } img{ - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { width: 300px; height: 300px; } @@ -65,7 +65,7 @@ align-items: flex-start; flex-direction: column; padding: 40px; - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { flex: 12; order: 2; padding-top: 0px; @@ -82,7 +82,7 @@ height: 65px; top: 172px; left: 149px; - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { width: 60px !important; height: 60px !important; top: 140.5px; diff --git a/src/components/crashmessage/crashmessage.scss b/src/components/crashmessage/crashmessage.scss index 5466d61aaf0..3ae223d5e90 100644 --- a/src/components/crashmessage/crashmessage.scss +++ b/src/components/crashmessage/crashmessage.scss @@ -1,12 +1,12 @@ +@use "../../colors"; +@use "../../frameless"; + .crash-container { - @import "../../colors"; - @import "../../frameless"; - margin: 3rem auto; - border: 1px solid $ui-border; + border: 1px solid colors.$ui-border; border-radius: 10px; - background-color: $background-color; + background-color: colors.$background-color; width: 60%; overflow: hidden; text-align: center; diff --git a/src/components/deck/deck.scss b/src/components/deck/deck.scss index e06d880a8b3..b142d0fadc8 100644 --- a/src/components/deck/deck.scss +++ b/src/components/deck/deck.scss @@ -1,7 +1,7 @@ -@import "../../colors"; -@import "../../frameless"; +@use "../../colors"; +@use "../../frameless"; -@include responsive-layout (".deck", ".slide"); +@include frameless.responsive-layout (".deck", ".slide"); .deck { min-height: 100vh; diff --git a/src/components/dropdown-banner/banner.scss b/src/components/dropdown-banner/banner.scss index c2d13f25a9f..273f3c59e4e 100644 --- a/src/components/dropdown-banner/banner.scss +++ b/src/components/dropdown-banner/banner.scss @@ -1,4 +1,4 @@ -@import "../../colors"; +@use "../../colors"; $navigation-height: 50px; @@ -6,8 +6,8 @@ $navigation-height: 50px; position: sticky; top: $navigation-height; z-index: 9; - box-shadow: 0 1px 1px $ui-dark-gray; - background-color: $ui-orange; + box-shadow: 0 1px 1px colors.$ui-dark-gray; + background-color: colors.$ui-orange; width: 100%; overflow: hidden; text-align: center; @@ -15,7 +15,7 @@ $navigation-height: 50px; &, a { - color: $ui-white; + color: colors.$ui-white; } a { @@ -26,17 +26,17 @@ $navigation-height: 50px; float: right; margin-top: $navigation-height * 0.25; border-radius: $navigation-height * 0.25; - background-color: $box-shadow-gray; + background-color: colors.$box-shadow-gray; width: $navigation-height * 0.5; height: $navigation-height * 0.5; text-decoration: none; text-shadow: none; line-height: $navigation-height * 0.5; - color: $ui-white; + color: colors.$ui-white; font-weight: normal; } &.warning { - background-color: $ui-red-dark; + background-color: colors.$ui-red-dark; } } diff --git a/src/components/dropdown/dropdown.scss b/src/components/dropdown/dropdown.scss index 44175075989..226bdd814f8 100644 --- a/src/components/dropdown/dropdown.scss +++ b/src/components/dropdown/dropdown.scss @@ -1,18 +1,18 @@ -@import "../../colors"; -@import "../../frameless"; +@use "../../colors"; +@use "../../frameless"; .dropdown { display: none; position: absolute; right: 0; - border: 1px solid $active-gray; + border: 1px solid colors.$active-gray; border-radius: 0 0 5px 5px; - background-color: $ui-purple-dark; + background-color: colors.$ui-purple-dark; padding: 10px; min-width: 9rem; max-width: 16.25rem; overflow: visible; - color: $type-white; + color: colors.$type-white; font-size: .8125rem; font-weight: normal; @@ -30,7 +30,7 @@ &:visited, &:active { background-color: transparent; - color: $type-white; + color: colors.$type-white; } } @@ -51,7 +51,7 @@ &.divider { margin-top: 10px; - border-top: 1px solid $active-gray; + border-top: 1px solid colors.$active-gray; } a { @@ -59,7 +59,7 @@ padding: 0 10px; &:hover { - background-color: $active-gray; + background-color: colors.$active-gray; text-decoration: none; } } @@ -79,11 +79,11 @@ transform: rotate(45deg); - border-top: 1px solid $active-gray; - border-left: 1px solid $active-gray; + border-top: 1px solid colors.$active-gray; + border-left: 1px solid colors.$active-gray; border-radius: 5px; - background-color: $ui-purple-dark; + background-color: colors.$ui-purple-dark; width: $arrow-border-width; height: $arrow-border-width; diff --git a/src/components/extension-landing/extension-landing.scss b/src/components/extension-landing/extension-landing.scss index 7d2f45d4f50..72004705347 100644 --- a/src/components/extension-landing/extension-landing.scss +++ b/src/components/extension-landing/extension-landing.scss @@ -1,7 +1,7 @@ @use "sass:math"; -@import "../../colors"; -@import "../../frameless"; +@use "../../colors"; +@use "../../frameless"; #view { padding: 0; @@ -37,7 +37,7 @@ html { margin: 4rem 0; border-width: 1px 0 0 0; border-style: solid; - border-color: $ui-border; + border-color: colors.$ui-border; width: 100%; } @@ -63,15 +63,15 @@ html { } .screenshot { - border: 1px solid $ui-border; + border: 1px solid colors.$ui-border; border-radius: .5rem; } .tip-box { margin-top: 4rem; - border: 1px solid $ui-blue-25percent; + border: 1px solid colors.$ui-blue-25percent; border-radius: 1rem; - background-color: $ui-blue-10percent; + background-color: colors.$ui-blue-10percent; padding: 2rem 3rem; width: 100%; box-sizing: border-box; @@ -87,7 +87,7 @@ html { .extension-header { background-size: cover; - color: $ui-white; + color: colors.$ui-white; .inner { justify-content: space-between; @@ -103,14 +103,14 @@ html { .extension-copy { padding-right: 3.75em; - max-width: $cols7; + max-width: frameless.$cols7; align-items: flex-start; justify-content: start; h1, h2 { display: flex; margin-bottom: 2rem; - color: $ui-white; + color: colors.$ui-white; width: 100%; img { @@ -124,13 +124,13 @@ html { } a { - border-bottom: 1px solid $ui-white; - color: $ui-white; + border-bottom: 1px solid colors.$ui-white; + color: colors.$ui-white; } } .video-player { - border: .25rem solid $ui-white-15percent; + border: .25rem solid colors.$ui-white-15percent; border-radius: .75rem; height: 180px; overflow: hidden; @@ -141,8 +141,8 @@ html { margin-top: auto; img { - max-width: $cols5; - max-height: $cols3; + max-width: frameless.$cols5; + max-height: frameless.$cols3; } } @@ -201,7 +201,7 @@ html { .horizontal-divider:after { display: inline-block; position: relative; - background-color: $ui-dark-gray; + background-color: colors.$ui-dark-gray; width: 50%; height: 1px; vertical-align: middle; @@ -242,9 +242,9 @@ html { .project-card { margin: 0 1.5rem; - border: 1px solid $ui-border; + border: 1px solid colors.$ui-border; border-radius: .5rem; - background-color: $ui-white; + background-color: colors.$ui-white; overflow: hidden; flex-basis: 0; flex-grow: 1; @@ -270,22 +270,22 @@ html { gap: 3em; // 1 column - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { grid-template-columns: 1fr; } } .hardware-card { - border: 1px solid $ui-border; + border: 1px solid colors.$ui-border; border-radius: .5rem; - background-color: $ui-white; + background-color: colors.$ui-white; overflow: hidden; flex-basis: 0; flex-grow: 1; } .hardware-card-image { - background-color: $ui-blue-10percent; + background-color: colors.$ui-blue-10percent; padding: 1rem 0 1rem; img { @@ -312,7 +312,7 @@ html { p { margin-bottom: 1.25rem; margin-left: 0; - max-width: $cols8; + max-width: frameless.$cols8; text-align: left; } @@ -322,12 +322,12 @@ html { } ul { - max-width: $cols8; + max-width: frameless.$cols8; } section { ul { - max-width: $cols8; + max-width: frameless.$cols8; } .nav-spacer { @@ -342,16 +342,16 @@ html { ul, ol { &.indented { - padding-left: $cols1 + math.div(20px, $em); + padding-left: frameless.$cols1 + math.div(20px, frameless.$em); } } } .blue { - background-color: $ui-blue-10percent; + background-color: colors.$ui-blue-10percent; } .inner { - max-width: $cols12; + max-width: frameless.$cols12; } } diff --git a/src/components/flex-row/flex-row.scss b/src/components/flex-row/flex-row.scss index eff8370e34e..24d24ca7fe6 100644 --- a/src/components/flex-row/flex-row.scss +++ b/src/components/flex-row/flex-row.scss @@ -1,4 +1,4 @@ -@import "../../frameless"; +@use "../../frameless"; .flex-row { display: flex; @@ -16,16 +16,16 @@ align-items: flex-start; .short { - width: $cols3; + width: frameless.$cols3; } .long { - width: $cols8; + width: frameless.$cols8; text-align: left; } } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { flex-direction: column; &.uneven { diff --git a/src/components/footer/conference/footer.scss b/src/components/footer/conference/footer.scss index b246fe3efa2..6b80710be0b 100644 --- a/src/components/footer/conference/footer.scss +++ b/src/components/footer/conference/footer.scss @@ -1,5 +1,5 @@ -@import "../../../colors"; -@import "../../../frameless"; +@use "../../../colors"; +@use "../../../frameless"; #footer { .inner { @@ -13,7 +13,7 @@ .collaborators { margin-top: 20px; - border-bottom: 2px solid $ui-border; + border-bottom: 2px solid colors.$ui-border; width: 100%; ul { @@ -51,13 +51,13 @@ justify-content: space-between; align-items: flex-start; - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { align-items: center; } } .family { - width: $cols6; + width: frameless.$cols6; .flex-row { justify-content: space-between; @@ -74,7 +74,7 @@ } .media { - width: $cols4; + width: frameless.$cols4; text-align: center; .contact-us { @@ -88,13 +88,13 @@ li { margin-right: 10px; border-radius: 20px; - background-color: $ui-blue; + background-color: colors.$ui-blue; padding: 5px; width: 20px; height: 20px; &:hover { - background-color: $ui-orange; + background-color: colors.$ui-orange; } img { @@ -103,7 +103,7 @@ } } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { text-align: center; .family { @@ -122,7 +122,7 @@ } } - @media #{$intermediate} { + @media #{frameless.$intermediate} { ul { li { margin-left: 0; @@ -155,7 +155,7 @@ justify-content: space-between; .family { - width: $cols6; + width: frameless.$cols6; } .media { diff --git a/src/components/footer/container/footer.scss b/src/components/footer/container/footer.scss index de5d0f15999..d612d16b544 100644 --- a/src/components/footer/container/footer.scss +++ b/src/components/footer/container/footer.scss @@ -1,9 +1,9 @@ -@import "../../../colors"; +@use "../../../colors"; #footer { display: block; - background-color: $ui-gray; + background-color: colors.$ui-gray; padding: 10px 0; - color: $type-gray; + color: colors.$type-gray; font-size: .85rem; } diff --git a/src/components/footer/www/footer.scss b/src/components/footer/www/footer.scss index f3a56732e27..2e09cb1b843 100644 --- a/src/components/footer/www/footer.scss +++ b/src/components/footer/www/footer.scss @@ -1,5 +1,5 @@ -@import "../../../colors"; -@import "../../../frameless"; +@use "../../../colors"; +@use "../../../frameless"; #footer { .lists { diff --git a/src/components/formik-forms/formik-checkbox.scss b/src/components/formik-forms/formik-checkbox.scss index 0c0e56302fd..2aa67243157 100644 --- a/src/components/formik-forms/formik-checkbox.scss +++ b/src/components/formik-forms/formik-checkbox.scss @@ -1,10 +1,10 @@ -@import "../../colors"; +@use "../../colors"; input[type="checkbox"].formik-checkbox { display: block; float: left; margin-right: .625rem; - border: 1px solid $active-dark-gray; + border: 1px solid colors.$active-dark-gray; border-radius: 3px; width: 1.25rem; height: 1.25rem; @@ -13,11 +13,11 @@ input[type="checkbox"].formik-checkbox { &:focus { transition: all .25s ease; outline: none; - box-shadow: 0 0 0 .25rem $ui-blue-25percent; + box-shadow: 0 0 0 .25rem colors.$ui-blue-25percent; } &:checked { - background-color: $ui-blue; + background-color: colors.$ui-blue; text-align: center; text-indent: .125rem; line-height: 1.25rem; diff --git a/src/components/formik-forms/formik-input.scss b/src/components/formik-forms/formik-input.scss index 49f5fa6b30e..d90fba38552 100644 --- a/src/components/formik-forms/formik-input.scss +++ b/src/components/formik-forms/formik-input.scss @@ -1,34 +1,34 @@ -@import "../../colors"; +@use "../../colors"; .formik-input { height: 2.75rem; border-radius: .5rem; - background-color: $ui-white; + background-color: colors.$ui-white; margin-bottom: .5rem; transition: all .5s ease, font-size 0s; - border: 1px solid $active-dark-gray; + border: 1px solid colors.$active-dark-gray; padding: 0 1rem; - color: $type-gray; + color: colors.$type-gray; font-size: .875rem; &:focus { - box-shadow: 0 0 0 .25rem $ui-purple-25percent; + box-shadow: 0 0 0 .25rem colors.$ui-purple-25percent; outline: none; - border: 1px solid $ui-purple-dark; + border: 1px solid colors.$ui-purple-dark; transition: all .5s ease, font-size 0s; } &.fail { - border: 1px solid $ui-red-dark; + border: 1px solid colors.$ui-red-dark; &:focus { - box-shadow: 0 0 0 .25rem $ui-red-25percent; + box-shadow: 0 0 0 .25rem colors.$ui-red-25percent; outline: none; } } &::placeholder { font-style: italic; - color: $type-gray-60percent; + color: colors.$type-gray-60percent; } } diff --git a/src/components/formik-forms/formik-radio-button.scss b/src/components/formik-forms/formik-radio-button.scss index 14db86c680a..cc44176fdee 100644 --- a/src/components/formik-forms/formik-radio-button.scss +++ b/src/components/formik-forms/formik-radio-button.scss @@ -1,4 +1,4 @@ -@import "../../colors"; +@use "../../colors"; .formik-radio-label { margin-left: 1rem; @@ -6,13 +6,13 @@ input[type="radio"].formik-radio-button { margin-top: 1px; - border: 1px solid $box-shadow-light-gray; + border: 1px solid colors.$box-shadow-light-gray; border-radius: 50%; width: 1rem; min-width: 1rem; /* necessary to prevent width from being too small in 'other' case */ height: 1rem; appearance: none; - background-color: $ui-white; + background-color: colors.$ui-white; &:checked, &:focus { @@ -21,15 +21,15 @@ input[type="radio"].formik-radio-button { &:checked { transition: all .25s ease; - box-shadow: 0 0 0 2px $ui-blue-25percent; - border: 1px solid $ui-blue; - background-color: $ui-white; + box-shadow: 0 0 0 2px colors.$ui-blue-25percent; + border: 1px solid colors.$ui-blue; + background-color: colors.$ui-white; &:after { display: block; transform: translate(.125rem, .125rem); border-radius: 50%; - background-color: $ui-blue; + background-color: colors.$ui-blue; width: .625rem; height: .625rem; content: ""; @@ -42,10 +42,10 @@ input.formik-radio-input, .formik-radio-input input { width: 100%; margin-bottom: 0; border-radius: .5rem; - background-color: $ui-white; + background-color: colors.$ui-white; &:focus { - box-shadow: 0 0 0 .25rem $ui-blue-25percent; + box-shadow: 0 0 0 .25rem colors.$ui-blue-25percent; } } diff --git a/src/components/formik-forms/formik-select.scss b/src/components/formik-forms/formik-select.scss index e5a675e8280..f4dda0cc9ad 100644 --- a/src/components/formik-forms/formik-select.scss +++ b/src/components/formik-forms/formik-select.scss @@ -1,11 +1,11 @@ -@import "../../colors"; +@use "../../colors"; .select { .fail { - border: 1px solid $ui-purple-dark; + border: 1px solid colors.$ui-purple-dark; &:focus { - box-shadow: 0 0 0 .25rem $ui-orange-25percent; + box-shadow: 0 0 0 .25rem colors.$ui-orange-25percent; outline: none; } } diff --git a/src/components/forms/button.scss b/src/components/forms/button.scss index aaf71b7e7cb..c03cd0517a5 100644 --- a/src/components/forms/button.scss +++ b/src/components/forms/button.scss @@ -1,18 +1,18 @@ -@import "../../colors"; +@use "../../colors"; -$base-bg: $ui-white; -$fail-bg: $ui-orange; -$pass-bg: $ui-aqua; +$base-bg: colors.$ui-white; +$fail-bg: colors.$ui-orange; +$pass-bg: colors.$ui-aqua; .button { display: inline-block; margin: .5em 0; border: 0; border-radius: .5rem; - background-color: $ui-purple-dark; + background-color: colors.$ui-purple-dark; cursor: pointer; padding: 1em 1.25em; - color: $type-white; + color: colors.$type-white; font-size: .8rem; font-weight: bold; @@ -24,7 +24,7 @@ $pass-bg: $ui-aqua; /* DATA BUTTON STATES */ &.white { background-color: $base-bg; - color: $ui-purple-dark; + color: colors.$ui-purple-dark; } &.pass { @@ -65,7 +65,7 @@ $pass-bg: $ui-aqua; top: 0.5rem; right: 0.5rem; border-radius: 1rem; - background-color: $active-gray; + background-color: colors.$active-gray; cursor: pointer; width: 2rem; height: 2rem; diff --git a/src/components/forms/charcount.scss b/src/components/forms/charcount.scss index 05d1a4beefc..e6bfa1457ca 100644 --- a/src/components/forms/charcount.scss +++ b/src/components/forms/charcount.scss @@ -1,11 +1,11 @@ -@import "../../colors"; +@use "../../colors"; .char-count { letter-spacing: 1px; - color: $type-gray-75percent; + color: colors.$type-gray-75percent; font-weight: 500; &.overmax { - color: $ui-orange; + color: colors.$ui-orange; } } diff --git a/src/components/forms/checkbox.scss b/src/components/forms/checkbox.scss index 393ee86deb1..8f8927a8c7b 100644 --- a/src/components/forms/checkbox.scss +++ b/src/components/forms/checkbox.scss @@ -1,5 +1,5 @@ -@import "../../colors"; -@import "../../frameless"; +@use "../../colors"; +@use "../../frameless"; .row { .checkbox { @@ -12,7 +12,7 @@ display: block; float: left; margin-right: 1rem; - border: 1px solid $active-dark-gray; + border: 1px solid colors.$active-dark-gray; border-radius: 3px; width: 1.25rem; height: 1.25rem; @@ -22,18 +22,18 @@ &:focus { transition: all .5s ease; outline: none; - box-shadow: 0 0 0 .25rem $active-dark-gray; + box-shadow: 0 0 0 .25rem colors.$active-dark-gray; } &:checked { - background-color: $ui-blue; + background-color: colors.$ui-blue; text-align: center; text-indent: .125rem; line-height: 1.25rem; font-size: .75rem; &:after { - color: $type-white; + color: colors.$type-white; content: "\2714"; } } diff --git a/src/components/forms/general-error.scss b/src/components/forms/general-error.scss index c5da01c49d9..eafacae872f 100644 --- a/src/components/forms/general-error.scss +++ b/src/components/forms/general-error.scss @@ -1,9 +1,9 @@ -@import "../../colors"; +@use "../../colors"; .general-error { - border: 1px solid $active-gray; + border: 1px solid colors.$active-gray; border-radius: 4px; - background-color: $ui-orange; + background-color: colors.$ui-orange; padding: 1rem; - color: $type-white; + color: colors.$type-white; } diff --git a/src/components/forms/inplace-input.scss b/src/components/forms/inplace-input.scss index 0dd9ffe4062..53e9a80ae3a 100644 --- a/src/components/forms/inplace-input.scss +++ b/src/components/forms/inplace-input.scss @@ -1,28 +1,28 @@ -@import "../../colors"; -@import "../../frameless"; +@use "../../colors"; +@use "../../frameless"; .inplace-input { transition: all .5s ease; - border: 2px dashed $ui-blue-25percent; + border: 2px dashed colors.$ui-blue-25percent; border-radius: 8px; background-color: transparent; padding: 0 1rem; width: calc(100% - 2.25rem); - color: $type-gray; + color: colors.$type-gray; &:focus { transition: all .5s ease; outline: none; - border: 2px solid $ui-purple-dark; - box-shadow: 0 0 0 4px $ui-purple-25percent; + border: 2px solid colors.$ui-purple-dark; + box-shadow: 0 0 0 4px colors.$ui-purple-25percent; } &.fail { - border: 1px solid $ui-red-dark; + border: 1px solid colors.$ui-red-dark; } &.pass { - border: 1px solid $active-dark-gray; + border: 1px solid colors.$active-dark-gray; } /* IE10/11-specific style resets */ @@ -37,13 +37,13 @@ .inplace-textarea { transition: all .2s ease; - border: 2px dashed $ui-blue-25percent; + border: 2px dashed colors.$ui-blue-25percent; border-radius: 8px; - background-color: $ui-light-gray; + background-color: colors.$ui-light-gray; padding: .75rem 1rem; width: 100%; line-height: 1.75em; - color: $type-gray; + color: colors.$type-gray; font-size: 1rem; box-sizing: border-box; resize: none; @@ -51,12 +51,12 @@ &:focus { transition: all .2s ease; outline: none; - border: 2px solid $ui-purple-dark; - box-shadow: 0 0 0 4px $ui-purple-25percent; + border: 2px solid colors.$ui-purple-dark; + box-shadow: 0 0 0 4px colors.$ui-purple-25percent; } &.fail { - border: 1px solid $ui-red-dark; + border: 1px solid colors.$ui-red-dark; } &::placeholder { diff --git a/src/components/forms/input.scss b/src/components/forms/input.scss index 3a2edd57809..85ea00e31bf 100644 --- a/src/components/forms/input.scss +++ b/src/components/forms/input.scss @@ -1,7 +1,7 @@ -@import "../../colors"; -@import "../../frameless"; +@use "../../colors"; +@use "../../frameless"; -$base-bg: $ui-light-gray; +$base-bg: colors.$ui-light-gray; .row { label { @@ -12,26 +12,26 @@ $base-bg: $ui-light-gray; .input { transition: all .5s ease; margin-bottom: .75rem; - border: 1px solid $active-gray; + border: 1px solid colors.$active-gray; border-radius: 5px; background-color: $base-bg; padding: 0 1rem; height: 3rem; - color: $type-gray; + color: colors.$type-gray; font-size: .875rem; &:focus { transition: all .5s ease; outline: none; - border: 1px solid $ui-purple-dark; + border: 1px solid colors.$ui-purple-dark; } &.fail { - border: 1px solid $ui-red-dark; + border: 1px solid colors.$ui-red-dark; } &.pass { - border: 1px solid $ui-aqua; + border: 1px solid colors.$ui-aqua; } /* IE10/11-specific style resets */ diff --git a/src/components/forms/phone-input.scss b/src/components/forms/phone-input.scss index 2b2f52acc5a..29cf9c14872 100644 --- a/src/components/forms/phone-input.scss +++ b/src/components/forms/phone-input.scss @@ -1,4 +1,4 @@ -@import "../../colors"; +@use "../../colors"; .input-group { width: 100%; @@ -10,34 +10,34 @@ input { &[type=tel] { - background-color: $ui-light-gray; + background-color: colors.$ui-light-gray; height: 3rem; &:focus { outline: none; - border-color: $ui-purple-dark; + border-color: colors.$ui-purple-dark; } } } .flag-dropdown { - background-color: $ui-light-gray; + background-color: colors.$ui-light-gray; height: 3rem; .selected-flag { - background-color: $ui-light-gray; + background-color: colors.$ui-light-gray; height: 100%; &:hover, &:focus, &:active { - background-color: $active-gray; + background-color: colors.$active-gray; } } .country-list { top: 3rem; - background-color: $ui-light-gray; + background-color: colors.$ui-light-gray; } } } diff --git a/src/components/forms/radio-group.scss b/src/components/forms/radio-group.scss index dbb4626e2a4..4a757d58fbb 100644 --- a/src/components/forms/radio-group.scss +++ b/src/components/forms/radio-group.scss @@ -1,4 +1,4 @@ -@import "../../colors"; +@use "../../colors"; .row { .radio { @@ -14,7 +14,7 @@ input { &[type="radio"] { margin-top: 1px; - border: 1px solid $active-gray; + border: 1px solid colors.$active-gray; border-radius: 50%; width: .875rem; height: .875rem; @@ -27,14 +27,14 @@ &:checked { transition: all .25s ease; - box-shadow: 0 0 0 .25rem $active-gray; - background-color: $ui-blue; + box-shadow: 0 0 0 .25rem colors.$active-gray; + background-color: colors.$ui-blue; &:after { display: block; transform: translate(.25rem, .25rem); border-radius: 50%; - background-color: $ui-white; + background-color: colors.$ui-white; width: .25rem; height: .25rem; content: ""; diff --git a/src/components/forms/select.scss b/src/components/forms/select.scss index 795c0a58d74..18e0b91a0f3 100644 --- a/src/components/forms/select.scss +++ b/src/components/forms/select.scss @@ -1,5 +1,5 @@ -@import "../../colors"; -@import "../../frameless"; +@use "../../colors"; +@use "../../frameless"; .select { label { @@ -9,14 +9,14 @@ select { transition: border .5s ease; margin-bottom: .75rem; - border: 1px solid $active-gray; + border: 1px solid colors.$active-gray; border-radius: 5px; - background: $ui-light-gray url("/svgs/forms/caret.svg") no-repeat right center; + background: colors.$ui-light-gray url("/svgs/forms/caret.svg") no-repeat right center; padding-right: 4rem; padding-left: 1rem; width: 100%; height: 3rem; - color: $type-gray; + color: colors.$type-gray; font-size: .875rem; appearance: none; -webkit-appearance: none; /* added to fix dropdown appearance on safari */ @@ -33,21 +33,21 @@ &:focus { outline: none; - border: 1px solid $ui-purple-dark; + border: 1px solid colors.$ui-purple-dark; } &:-moz-focusring { - text-shadow: 0 0 0 $type-gray; + text-shadow: 0 0 0 colors.$type-gray; color: transparent; } &:focus, &:hover { - background: $ui-light-gray url("/svgs/forms/caret-hover.svg") no-repeat right center; + background: colors.$ui-light-gray url("/svgs/forms/caret-hover.svg") no-repeat right center; } > option { - background-color: $ui-white; + background-color: colors.$ui-white; width: 100%; } } diff --git a/src/components/forms/textarea.scss b/src/components/forms/textarea.scss index 1dba2f381ad..99ae8ee5531 100644 --- a/src/components/forms/textarea.scss +++ b/src/components/forms/textarea.scss @@ -1,26 +1,26 @@ -@import "../../colors"; +@use "../../colors"; .textarea { transition: all 1s ease; margin-bottom: .75rem; - border: 1px solid $active-gray; + border: 1px solid colors.$active-gray; border-radius: 5px; - background-color: $ui-light-gray; + background-color: colors.$ui-light-gray; padding: .75rem 1rem; width: 100%; min-height: 15rem; line-height: 1.75em; - color: $type-gray; + color: colors.$type-gray; font-size: .875rem; &:focus { transition: all 1s ease; outline: none; - border: 1px solid $ui-purple-dark; + border: 1px solid colors.$ui-purple-dark; } &.fail { - border: 1px solid $ui-red-dark; + border: 1px solid colors.$ui-red-dark; } &::placeholder { diff --git a/src/components/forms/toggle-slider.scss b/src/components/forms/toggle-slider.scss index 2704b8141ad..6cda8d24a52 100644 --- a/src/components/forms/toggle-slider.scss +++ b/src/components/forms/toggle-slider.scss @@ -1,4 +1,4 @@ -@import "../../colors"; +@use "../../colors"; .toggle-switch { position: relative; @@ -22,7 +22,7 @@ left: 0; right: 0; bottom: 0; - background-color: $ui-dark-gray; + background-color: colors.$ui-dark-gray; border-radius: 12px; transition: .4s; } @@ -34,13 +34,13 @@ width: 18px; left: 3px; bottom: 3px; - background-color: $ui-white; + background-color: colors.$ui-white; border-radius: 50%; transition: .4s; } .toggle-switch input:checked + .slider { - background-color: $ui-aqua; + background-color: colors.$ui-aqua; } .toggle-switch input:checked + .slider:before { diff --git a/src/components/forms/validation-message.scss b/src/components/forms/validation-message.scss index d0500662214..ad04305a4cc 100644 --- a/src/components/forms/validation-message.scss +++ b/src/components/forms/validation-message.scss @@ -1,5 +1,5 @@ -@import "../../colors"; -@import "../../frameless"; +@use "../../colors"; +@use "../../frameless"; .validation-message { $arrow-border-width: 1rem; @@ -9,14 +9,14 @@ left: 0; transform: translate(16rem, 0); margin-left: $arrow-border-width; - border: 1px solid $active-gray; + border: 1px solid colors.$active-gray; border-radius: 5px; - background-color: $ui-red-dark; + background-color: colors.$ui-red-dark; padding: 1rem; max-width: 18.75rem; min-height: 1rem; overflow: visible; - color: $type-white; + color: colors.$type-white; z-index: 1; font-weight: 500; @@ -28,11 +28,11 @@ transform: rotate(45deg); - border-bottom: 1px solid $active-gray; - border-left: 1px solid $active-gray; + border-bottom: 1px solid colors.$active-gray; + border-left: 1px solid colors.$active-gray; border-radius: 5px; - background-color: $ui-red-dark; + background-color: colors.$ui-red-dark; width: $arrow-border-width; height: $arrow-border-width; @@ -51,14 +51,14 @@ &:before { left: unset; right: -$arrow-border-width * 0.5; - border-top: 1px solid $active-gray; - border-right: 1px solid $active-gray; + border-top: 1px solid colors.$active-gray; + border-right: 1px solid colors.$active-gray; border-bottom: none; border-left: none; } } -@media #{$intermediate-and-smaller} { +@media #{frameless.$intermediate-and-smaller} { .validation-message { position: relative; transform: none; @@ -73,18 +73,18 @@ } .validation-error { - background-color: $ui-red-dark; + background-color: colors.$ui-red-dark; &:before { - background-color: $ui-red-dark; + background-color: colors.$ui-red-dark; } } .validation-info { - background-color: $ui-blue-dark; + background-color: colors.$ui-blue-dark; box-shadow: 0 0 4px 2px rgba(0, 0, 0, .15); &:before { - background-color: $ui-blue-dark; + background-color: colors.$ui-blue-dark; } } diff --git a/src/components/grid/grid.scss b/src/components/grid/grid.scss index 00c09138bdd..9c76a126e1c 100644 --- a/src/components/grid/grid.scss +++ b/src/components/grid/grid.scss @@ -1,5 +1,5 @@ -@import "../../frameless"; -@import "../../colors"; +@use "../../frameless"; +@use "../../colors"; .grid { display: inline-block; @@ -14,15 +14,15 @@ .flex-row { margin: 0 auto; padding: 12px 0; - width: $cols12; + width: frameless.$cols12; justify-content: flex-start; } .thumbnail { margin: 7px; border-radius: 4px; - box-shadow: 0 0 0 1px $active-gray; - background-color: $ui-white; + box-shadow: 0 0 0 1px colors.$active-gray; + background-color: colors.$ui-white; padding-bottom: 4px; width: $thumbnail-width; @@ -56,7 +56,7 @@ text-align: left; .thumbnail-creator a { - color: $type-gray; + color: colors.$type-gray; } } } @@ -105,23 +105,23 @@ } //4 columns - @media #{$small} { + @media #{frameless.$small} { .flex-row { - width: $cols4; + width: frameless.$cols4; } } //6 columns - @media #{$medium} { + @media #{frameless.$medium} { .flex-row { - width: $cols6; + width: frameless.$cols6; } } // 8 columns - @media #{$intermediate} { + @media #{frameless.$intermediate} { .flex-row { - width: $cols9; + width: frameless.$cols9; } } } diff --git a/src/components/info-button/info-button.scss b/src/components/info-button/info-button.scss index fa95aab234d..73fd0a22921 100644 --- a/src/components/info-button/info-button.scss +++ b/src/components/info-button/info-button.scss @@ -1,5 +1,5 @@ -@import "../../colors"; -@import "../../frameless"; +@use "../../colors"; +@use "../../frameless"; .info-button { position: relative; @@ -23,13 +23,13 @@ width: 16.5rem; min-height: 1rem; margin-left: $arrow-border-width; - border: 1px solid $active-gray; + border: 1px solid colors.$active-gray; border-radius: 5px; box-shadow: 0 0 4px 2px rgba(0, 0, 0, .15); padding: .75rem; overflow: visible; - background-color: $ui-blue-dark; - color: $type-white; + background-color: colors.$ui-blue-dark; + color: colors.$type-white; line-height: 1.25rem; text-align: left; font-size: .875rem; @@ -44,11 +44,11 @@ transform: rotate(45deg); - border-bottom: 1px solid $active-gray; - border-left: 1px solid $active-gray; + border-bottom: 1px solid colors.$active-gray; + border-left: 1px solid colors.$active-gray; border-radius: 5px; - background-color: $ui-blue-dark; + background-color: colors.$ui-blue-dark; width: $arrow-border-width; height: $arrow-border-width; @@ -56,7 +56,7 @@ } } -@media #{$intermediate-and-smaller} { +@media #{frameless.$intermediate-and-smaller} { .info-button-message { position: absolute; transform: none; diff --git a/src/components/informationpage/informationpage.scss b/src/components/informationpage/informationpage.scss index bedb49d6f94..3dd9bf52747 100644 --- a/src/components/informationpage/informationpage.scss +++ b/src/components/informationpage/informationpage.scss @@ -1,38 +1,38 @@ +@use "../../colors"; +@use "../../frameless"; + #view { padding: 0; } .information-page { - @import "../../colors"; - @import "../../frameless"; - .title-banner { &.masthead { - background-color: $ui-purple-dark; + background-color: colors.$ui-purple-dark; padding-bottom: .5rem; h1 { margin: 0 0 1rem 0; text-align: left; - color: $ui-white; + color: colors.$ui-white; } p { margin: 0; - width: $cols6; + width: frameless.$cols6; text-align: left; - color: $ui-white; + color: colors.$ui-white; a { - border-bottom: 1px solid $ui-white; - color: $ui-white; + border-bottom: 1px solid colors.$ui-white; + color: colors.$ui-white; } } } &.faq-banner { margin-bottom: 0; - background-color: $ui-gray; + background-color: colors.$ui-gray; } } @@ -41,7 +41,7 @@ nav { float: right; - border-left: 1px solid $ui-border; + border-left: 1px solid colors.$ui-border; width: 30%; ol { @@ -61,7 +61,7 @@ p { margin-bottom: 1.25rem; margin-left: 0; - max-width: $cols8; + max-width: frameless.$cols8; text-align: left; } @@ -74,20 +74,20 @@ dd { margin-bottom: 1.25rem; margin-left: 0; - max-width: $cols8; + max-width: frameless.$cols8; text-align: left; } } ul { - max-width: $cols8; + max-width: frameless.$cols8; } section { margin-bottom: 3rem; ul { - max-width: $cols8; + max-width: frameless.$cols8; } .nav-spacer { diff --git a/src/components/install-scratch/install-scratch.scss b/src/components/install-scratch/install-scratch.scss index 953b93d5a1b..34265d8b79c 100644 --- a/src/components/install-scratch/install-scratch.scss +++ b/src/components/install-scratch/install-scratch.scss @@ -1,5 +1,5 @@ -@import "../../colors"; -@import "../../frameless"; +@use "../../colors"; +@use "../../frameless"; #view { padding: 0; @@ -24,7 +24,7 @@ .horizontal-divider:after { display: inline-block; position: relative; - background-color: $ui-dark-gray; + background-color: colors.$ui-dark-gray; width: 50%; height: 1px; vertical-align: middle; @@ -60,10 +60,10 @@ margin: .5em 0; border: 0; border-radius: 8px; - background-color: $ui-blue; + background-color: colors.$ui-blue; cursor: pointer; padding: 1rem 2rem; - color: $ui-white; + color: colors.$ui-white; font-size: 1rem; } @@ -81,7 +81,7 @@ .download-image { width: 100%; - max-width: $cols6; + max-width: frameless.$cols6; img { max-width: 100%; @@ -90,6 +90,6 @@ } .blue { - background-color: $ui-blue-10percent; + background-color: colors.$ui-blue-10percent; } } diff --git a/src/components/intro/intro.scss b/src/components/intro/intro.scss index d0b08a4c1bc..78bbaf7beaa 100644 --- a/src/components/intro/intro.scss +++ b/src/components/intro/intro.scss @@ -1,5 +1,5 @@ -@import "../../colors"; -@import "../../frameless"; +@use "../../colors"; +@use "../../frameless"; .intro-banner { display: flex; @@ -7,12 +7,12 @@ position: relative; padding: 0; justify-content: space-between; - background-color: $ui-white; + background-color: colors.$ui-white; .intro-container { min-height: 24rem; justify-content: space-between; - background-color: $ui-purple-dark; + background-color: colors.$ui-purple-dark; background-size: 624px 325px; background-repeat: no-repeat; background-position: right; @@ -51,7 +51,7 @@ border-radius: 4px; background-color: rgba(0,0,0,0.15); box-shadow: 0 0 0 4px rgba(0,0,0,0.15); - color: $ui-white; + color: colors.$ui-white; padding: .625rem .75rem; font-size: 1rem; } @@ -73,14 +73,14 @@ .intro-header { margin-bottom: .75rem; font-size: 2rem; - color: $ui-white; + color: colors.$ui-white; line-height: 1.5em; } .intro-button { border-radius: 4px; - background-color: $ui-white; - color: $ui-purple-dark; + background-color: colors.$ui-white; + color: colors.$ui-purple-dark; padding: .625rem .75rem; font-size: 1rem; margin-right: .75rem; @@ -114,7 +114,7 @@ .intro-subnav { justify-content: center; - background-color: $ui-blue-10percent; + background-color: colors.$ui-blue-10percent; .subnav-button { margin: .625rem .5rem; @@ -125,7 +125,7 @@ } $rowLayoutMin: 900px; -$tabletPortrait: 768px; +frameless.$tabletPortrait: 768px; $tabletLandscape: 1024px; // $desktop: 942px; // $tablet: 640px; (should be renamed) @@ -140,7 +140,7 @@ $tabletLandscape: 1024px; } } -@media only screen and (min-width: $mobile) and (max-width: $rowLayoutMin - 1) { +@media only screen and (min-width: frameless.$mobile) and (max-width: $rowLayoutMin - 1) { .intro-banner { justify-content: flex-start; @@ -177,7 +177,7 @@ $tabletLandscape: 1024px; } } -@media #{$medium-and-smaller} { +@media #{frameless.$medium-and-smaller} { .intro-buttons, .intro-subnav { flex-direction: row; // override flexrow default @@ -185,7 +185,7 @@ $tabletLandscape: 1024px; } -@media only screen and (max-width: $mobile - 1) { +@media only screen and (max-width: frameless.$mobile - 1) { .intro-banner { .intro-container { background-image: none; diff --git a/src/components/join-flow/join-flow-step.scss b/src/components/join-flow/join-flow-step.scss index 2eecdea6abf..c82349de6d4 100644 --- a/src/components/join-flow/join-flow-step.scss +++ b/src/components/join-flow/join-flow-step.scss @@ -1,5 +1,5 @@ -@import "../../colors"; -@import "../../frameless"; +@use "../../colors"; +@use "../../frameless"; .join-flow-outer-content { /* hopefully this lets text expand the height of the modal, if need be */ @@ -20,7 +20,7 @@ } .join-flow-title { - color: $type-gray; + color: colors.$type-gray; font-size: 1.875rem; } @@ -43,7 +43,7 @@ border-top-right-radius: 1rem; /* match the small window setting for modal as a whole */ - @media #{$small}, #{$small-height} { + @media #{frameless.$small}, #{frameless.$small-height} { border-top-left-radius: 0rem; border-top-right-radius: 0rem; } @@ -56,11 +56,11 @@ .join-flow-footer-message { width: 100%; padding: 0.875rem 1.5rem; - background-color: $ui-blue-25percent; + background-color: colors.$ui-blue-25percent; font-size: .75rem; font-weight: 500; text-align: center; - color: $ui-blue; + color: colors.$ui-blue; } .join-flow-footer-message a { diff --git a/src/components/join-flow/join-flow-steps.scss b/src/components/join-flow/join-flow-steps.scss index 5703f776002..8d72b987ea7 100644 --- a/src/components/join-flow/join-flow-steps.scss +++ b/src/components/join-flow/join-flow-steps.scss @@ -1,15 +1,15 @@ -@import "../../colors"; -@import "../../frameless"; +@use "../../colors"; +@use "../../frameless"; .join-flow-input { width: 100%; height: 2.75rem; border-radius: .5rem; - background-color: $ui-white; + background-color: colors.$ui-white; margin-bottom: .5rem; &:focus { - box-shadow: 0 0 0 .25rem $ui-purple-25percent; + box-shadow: 0 0 0 .25rem colors.$ui-purple-25percent; } } @@ -51,7 +51,7 @@ transform: translate(9.375rem, 0); } -@media #{$intermediate-and-smaller} { +@media #{frameless.$intermediate-and-smaller} { .validation-full-width-input { transform: unset; margin-bottom: .75rem; @@ -82,7 +82,7 @@ margin-bottom: 0; // override default for select padding-right: 3.25rem; background-color: white; - border-color: $box-shadow-light-gray; + border-color: colors.$box-shadow-light-gray; font-size: 1rem; font-weight: 500; } @@ -91,7 +91,7 @@ margin-right: .5rem; width: 9.125rem; - @media #{$small} { + @media #{frameless.$small} { width: 8.25rem; } } @@ -99,7 +99,7 @@ .select .join-flow-select-year { width: 9.125rem; - @media #{$small} { + @media #{frameless.$small} { width: 8.25rem; } } @@ -110,7 +110,7 @@ } .country-step-image { - background-color: $ui-purple; + background-color: colors.$ui-purple; } .join-flow-password-section { @@ -123,14 +123,14 @@ } .birthdate-step-image { - background-color: $ui-magenta; + background-color: colors.$ui-magenta; } .join-flow-privacy-message { margin: .5rem auto 1rem; font-size: .75rem; font-weight: 500; - color: $type-gray-60percent; + color: colors.$type-gray-60percent; text-align: center; } @@ -185,7 +185,7 @@ } .email-step-image { - background-color: $dd-medium-blue; + background-color: colors.$dd-medium-blue; } .join-flow-gender-description { @@ -207,14 +207,14 @@ } .welcome-step-image { - background-color: $ui-yellow; + background-color: colors.$ui-yellow; } .gender-radio-row { transition: all .125s ease; width: 97%; min-height: 2.85rem; - background-color: $ui-gray; + background-color: colors.$ui-gray; border-radius: .5rem; margin: 0 auto 0.375rem; padding-left: 0.8125rem; @@ -223,12 +223,12 @@ } .gender-radio-row:hover { - background-color: $ui-blue-10percent; + background-color: colors.$ui-blue-10percent; } .gender-radio-row-selected, .gender-radio-row-selected:hover { transition: all .125s ease; - background-color: $ui-blue-25percent; + background-color: colors.$ui-blue-25percent; } .join-flow-next-button-arrow { diff --git a/src/components/join-flow/next-step-button.scss b/src/components/join-flow/next-step-button.scss index daecb4e39ea..c51a7cf8fb5 100644 --- a/src/components/join-flow/next-step-button.scss +++ b/src/components/join-flow/next-step-button.scss @@ -1,5 +1,5 @@ -@import "../../colors"; -@import "../../frameless"; +@use "../../colors"; +@use "../../frameless"; .modal-flush-bottom-button { margin: 0; @@ -8,15 +8,15 @@ border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem; height: 5.1875rem; - background-color: $ui-purple-dark; + background-color: colors.$ui-purple-dark; &:hover { transition: background-color .25s ease; - background-color: $ui-purple-darker; + background-color: colors.$ui-purple-darker; } /* match the small window setting for modal as a whole */ - @media #{$small}, #{$small-height} { + @media #{frameless.$small}, #{frameless.$small-height} { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } diff --git a/src/components/journeys/common-journey.scss b/src/components/journeys/common-journey.scss index 3b87c2bb95a..7f81b24bed9 100644 --- a/src/components/journeys/common-journey.scss +++ b/src/components/journeys/common-journey.scss @@ -1,4 +1,4 @@ -@import "../../colors"; +@use "../../colors"; .driver-popover.tutorials-highlight, .driver-popover.project-journey { @@ -6,7 +6,7 @@ flex-direction: row-reverse; justify-content: space-between; align-items: center; - background-color: $ui-purple-dark; + background-color: colors.$ui-purple-dark; padding: 0.5rem; .driver-popover-close-btn { @@ -16,7 +16,7 @@ position: relative; height: 2.5rem; width: 2.5rem; - color: $type-white; + color: colors.$type-white; .close-btn-img { height: 1.25rem; @@ -25,23 +25,23 @@ } .driver-popover-arrow-side-left.driver-popover-arrow { - border-left-color: $ui-purple-dark;; + border-left-color: colors.$ui-purple-dark;; } .driver-popover-arrow-side-right.driver-popover-arrow { - border-right-color: $ui-purple-dark;; + border-right-color: colors.$ui-purple-dark;; } .driver-popover-arrow-side-top.driver-popover-arrow { - border-top-color: $ui-purple-dark;; + border-top-color: colors.$ui-purple-dark;; } .driver-popover-arrow-side-bottom.driver-popover-arrow { - border-bottom-color: $ui-purple-dark;; + border-bottom-color: colors.$ui-purple-dark;; } .driver-popover-description { - color: $ui-white; + color: colors.$ui-white; font-size: 1rem; font-weight: 700; font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif; diff --git a/src/components/journeys/editor-journey/editor-journey.scss b/src/components/journeys/editor-journey/editor-journey.scss index 6ecb5ba1215..14faef7d392 100644 --- a/src/components/journeys/editor-journey/editor-journey.scss +++ b/src/components/journeys/editor-journey/editor-journey.scss @@ -1,5 +1,5 @@ -@import "../../../colors"; -@import "../../../frameless"; +@use "../../../colors"; +@use "../../../frameless"; .driver-popover.gui-journey { max-width: unset; @@ -17,8 +17,8 @@ width: 2.5rem; border-radius: 50%; margin: 0.5rem; - color: $type-white; - background-color: $ui-aqua-dark; + color: colors.$type-white; + background-color: colors.$ui-aqua-dark; .close-btn-img { height: 1.25rem; @@ -32,9 +32,9 @@ font-weight: 700; font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif; text-align: center; - color: $type-white; + color: colors.$type-white; margin: 0; - background-color: $ui-aqua; + background-color: colors.$ui-aqua; border-radius: 15px 15px 0 0; } @@ -49,8 +49,8 @@ font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif; font-weight: 400; text-align: center; - color: $type-gray; - background-color: $ui-light-primary; + color: colors.$type-gray; + background-color: colors.$ui-light-primary; } .description-wrapper { @@ -65,7 +65,7 @@ gap: 1rem; img { - height: $cols2; + height: frameless.$cols2; } } } diff --git a/src/components/languagechooser/languagechooser.scss b/src/components/languagechooser/languagechooser.scss index 204e4398027..ec12f38ad39 100644 --- a/src/components/languagechooser/languagechooser.scss +++ b/src/components/languagechooser/languagechooser.scss @@ -1,4 +1,4 @@ -@import "../../frameless"; +@use "../../frameless"; .language-chooser { .select { diff --git a/src/components/login/login.scss b/src/components/login/login.scss index 7ddd4a317bd..1a3502e0774 100644 --- a/src/components/login/login.scss +++ b/src/components/login/login.scss @@ -1,11 +1,11 @@ -@import "../../colors"; +@use "../../colors"; .login { padding: 10px; width: 200px; line-height: 1.5rem; white-space: normal; // override any parent, such as in gui, who sets nowrap - color: $type-white; + color: colors.$type-white; font-size: .8125rem; .button { @@ -45,12 +45,12 @@ a { margin: auto 0; - color: $ui-white; + color: colors.$ui-white; &:link, &:visited, &:active { - color: $ui-white; + color: colors.$ui-white; } &:hover { @@ -59,9 +59,9 @@ } .error { - border: 1px solid $active-dark-gray; + border: 1px solid colors.$active-dark-gray; border-radius: 5px; - background-color: $ui-orange; + background-color: colors.$ui-orange; padding: .75em 1em; } } diff --git a/src/components/masonrygrid/masonrygrid.scss b/src/components/masonrygrid/masonrygrid.scss index f1e670c501c..36f026cdf29 100644 --- a/src/components/masonrygrid/masonrygrid.scss +++ b/src/components/masonrygrid/masonrygrid.scss @@ -1,22 +1,22 @@ -@import "../../frameless"; +@use "../../frameless"; .masonry { - column-gap: $gutter; - column-width: $cols4; + column-gap: frameless.$gutter; + column-width: frameless.$cols4; padding-bottom: 1rem; -webkit-perspective: 1; } // column-count required for Firefox, IE and Edge //4 columns -@media #{$small} { +@media #{frameless.$small} { .masonry { column-count: 1; } } //6 columns -@media #{$medium} { +@media #{frameless.$medium} { .masonry { column-count: 1; } @@ -24,14 +24,14 @@ //8 columns -@media #{$intermediate} { +@media #{frameless.$intermediate} { .masonry { column-count: 2; } } // 12 columns -@media #{$big} { +@media #{frameless.$big} { .masonry { column-count: 3; } diff --git a/src/components/microworld/microworld.scss b/src/components/microworld/microworld.scss index 399ee141a35..790da6f27b7 100644 --- a/src/components/microworld/microworld.scss +++ b/src/components/microworld/microworld.scss @@ -1,7 +1,7 @@ -@import "../../colors"; -@import "../../frameless"; +@use "../../colors"; +@use "../../frameless"; -$base-bg: $ui-white; +$base-bg: colors.$ui-white; #view { background-color: $base-bg; @@ -26,7 +26,7 @@ $base-bg: $ui-white; margin: 0 auto; padding: 5px 10%; text-align: center; - color: $type-gray; + color: colors.$type-gray; } .top-banner, @@ -40,7 +40,7 @@ $base-bg: $ui-white; margin: 0 auto; padding: 5px 10%; text-align: center; - color: $type-gray; + color: colors.$type-gray; } } @@ -62,7 +62,7 @@ $base-bg: $ui-white; position: relative; margin: 10px; border-radius: 7px; - background-color: $active-gray; + background-color: colors.$active-gray; padding: 2px; max-width: 290px; } @@ -79,9 +79,9 @@ $base-bg: $ui-white; top: calc(50% - 25px); left: calc(50% - 35px); opacity: .8; - border: 5px solid $ui-border; + border: 5px solid colors.$ui-border; border-radius: 20px; - background-color: $type-gray; + background-color: colors.$type-gray; width: 70px; height: 50px; @@ -101,7 +101,7 @@ $base-bg: $ui-white; border: solid transparent; border-width: 18px; border-color: $play-arrow; - border-left-color: $ui-white; + border-left-color: colors.$ui-white; width: 0; height: 0; content: " "; diff --git a/src/components/modal-navigation/modal-navigation.scss b/src/components/modal-navigation/modal-navigation.scss index 503423fa662..4291b847854 100644 --- a/src/components/modal-navigation/modal-navigation.scss +++ b/src/components/modal-navigation/modal-navigation.scss @@ -1,5 +1,5 @@ -@import "../../colors"; -@import "../../frameless"; +@use "../../colors"; +@use "../../frameless"; .navigation-button{ display: flex; @@ -9,13 +9,13 @@ .left-arrow{ padding-right: 4px; - @media #{$small} { + @media #{frameless.$small} { padding: 0px; } } .right-arrow{ padding-left: 4px; - @media #{$small} { + @media #{frameless.$small} { padding: 0px; } } @@ -58,7 +58,7 @@ } .navText{ - @media #{$small} { + @media #{frameless.$small} { display: none; } } diff --git a/src/components/modal/addtostudio/modal.scss b/src/components/modal/addtostudio/modal.scss index 18a7368ff3b..353f691f93d 100644 --- a/src/components/modal/addtostudio/modal.scss +++ b/src/components/modal/addtostudio/modal.scss @@ -1,5 +1,5 @@ -@import "../../../colors"; -@import "../../../frameless"; +@use "../../../colors"; +@use "../../../frameless"; .mod-addToStudio { min-height: 15rem; @@ -10,7 +10,7 @@ overflow: hidden; - @media #{$small}, #{$small-height} { + @media #{frameless.$small}, #{frameless.$small-height} { overflow: hidden; height: 100%; max-height: 100%; @@ -18,8 +18,8 @@ } .addToStudio-modal-header { - box-shadow: inset 0 -1px 0 0 $ui-blue-dark; - background-color: $ui-blue; + box-shadow: inset 0 -1px 0 0 colors.$ui-blue-dark; + background-color: colors.$ui-blue; } .addToStudio-modal-content { @@ -31,7 +31,7 @@ .studio-list-outer-scrollbox { position: relative; - background-color: $ui-blue-10percent; + background-color: colors.$ui-blue-10percent; flex: 1; height: calc(100% - 5rem); /* Firefox requires min-height:0: #3775 */ @@ -51,7 +51,7 @@ &::-webkit-scrollbar-thumb { border-radius: 4px; - background-color: $active-dark-gray; + background-color: colors.$active-dark-gray; height: 92px; } @@ -83,8 +83,8 @@ are not obscured by gradient overlay */ bottom: 0; left: 0; background: linear-gradient( - $transparent-light-blue, - $ui-light-primary + colors.$transparent-light-blue, + colors.$ui-light-primary ); height: 32px; pointer-events: none; /* pass clicks through to buttons underneath */ @@ -96,7 +96,7 @@ are not obscured by gradient overlay */ transition: all .5s; margin: .21875rem; border-radius: .5rem; - background-color: $ui-white; + background-color: colors.$ui-white; cursor: pointer; padding: 0; width: 48%; @@ -104,7 +104,7 @@ are not obscured by gradient overlay */ justify-content: space-between; align-items: center; - @media #{$small} { + @media #{frameless.$small} { min-width: 98%; flex-shrink: 1; } @@ -123,21 +123,21 @@ are not obscured by gradient overlay */ } .studio-selector-button-selected { - background-color: $ui-mint-green; - color: $ui-white; + background-color: colors.$ui-mint-green; + color: colors.$ui-white; } .studio-selector-button-waiting { - background-color: $ui-light-mint; - color: $ui-white; + background-color: colors.$ui-light-mint; + color: colors.$ui-white; } .studio-selector-button-text-selected { - color: $ui-white; + color: colors.$ui-white; } .studio-selector-button-text-unselected { - color: $type-gray; + color: colors.$type-gray; } .studio-selector-button-enabled { @@ -155,20 +155,20 @@ are not obscured by gradient overlay */ padding: .0625rem .075rem; width: 1.5rem; height: 1.5rem; - color: $ui-white; + color: colors.$ui-white; box-sizing: border-box; } .studio-status-icon-unselected { - background-color: $ui-purple-dark; + background-color: colors.$ui-purple-dark; } .submit-button { - background-color: $ui-purple-dark; + background-color: colors.$ui-purple-dark; } .submit-button-waiting { - background-color: $ui-purple-dark; + background-color: colors.$ui-purple-dark; } .studio-status-icon-plus-img, diff --git a/src/components/modal/base/modal-inner-content.scss b/src/components/modal/base/modal-inner-content.scss index a144de3fdc5..2d13a2db820 100644 --- a/src/components/modal/base/modal-inner-content.scss +++ b/src/components/modal/base/modal-inner-content.scss @@ -1,5 +1,5 @@ -@import "../../../colors"; -@import "../../../frameless"; +@use "../../../colors"; +@use "../../../frameless"; .modal-inner-content { box-sizing: border-box; diff --git a/src/components/modal/base/modal-title.scss b/src/components/modal/base/modal-title.scss index fcfd9c86839..2e14dc56118 100644 --- a/src/components/modal/base/modal-title.scss +++ b/src/components/modal/base/modal-title.scss @@ -1,9 +1,9 @@ -@import "../../../colors"; +@use "../../../colors"; .modal-title { box-sizing: border-box; text-align: center; - color: $type-white; + color: colors.$type-white; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1rem; font-weight: bold; diff --git a/src/components/modal/base/modal.scss b/src/components/modal/base/modal.scss index 0918ea343c3..5e766618808 100644 --- a/src/components/modal/base/modal.scss +++ b/src/components/modal/base/modal.scss @@ -1,5 +1,6 @@ -@import "../../../colors"; -@import "../../../frameless"; +@use "sass:color"; +@use "../../../colors"; +@use "../../../frameless"; .overflow-hidden { /* to avoid double scroll bars this @@ -11,8 +12,8 @@ position: relative; margin: 3.75rem auto; border-radius: 1rem; - box-shadow: 0 0 0 4px $ui-white-15percent; - background-color: $ui-white; + box-shadow: 0 0 0 4px colors.$ui-white-15percent; + background-color: colors.$ui-white; padding: 0; width: 48.75rem; @@ -20,13 +21,13 @@ outline: none; } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { margin-top: 0; width: 100%; overflow: auto; } - @media #{$small}, #{$small-height} { + @media #{frameless.$small}, #{frameless.$small-height} { border-radius: 0; box-shadow: none; height: 100%; @@ -40,7 +41,7 @@ bottom: 0; left: 0; z-index: 510; - background-color: transparentize($ui-blue, .3); + background-color: color.adjust(colors.$ui-blue, $alpha: -.3); } $modal-close-size: 1rem; @@ -49,7 +50,7 @@ $modal-close-size: 1rem; top: $modal-close-size * 0.5; right: $modal-close-size * 0.5; border-radius: $modal-close-size; - background-color: $active-dark-gray; + background-color: colors.$active-dark-gray; cursor: pointer; width: $modal-close-size * 2; height: $modal-close-size * 2; @@ -70,7 +71,7 @@ $modal-close-size: 1rem; align-items: flex-start; flex-wrap: nowrap; - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { justify-content: center !important; //overwriting flex row properties flex-direction: row !important; } @@ -98,7 +99,7 @@ row to appear to contain overflow. */ } .action-button.close-button { - border: 1px solid $active-gray; + border: 1px solid colors.$active-gray; } .action-button-text { @@ -106,19 +107,19 @@ row to appear to contain overflow. */ } .action-button.disabled { - background-color: $active-dark-gray; + background-color: colors.$active-dark-gray; } .error-text { display: block; - border: 1px solid $active-gray; + border: 1px solid colors.$active-gray; border-radius: 5px; - background-color: $ui-orange; + background-color: colors.$ui-orange; padding: 1rem; min-height: 1rem; overflow: visible; - color: $type-white; + color: colors.$type-white; } .modal-sizes * { @@ -132,11 +133,11 @@ row to appear to contain overflow. */ max-width: 36.25rem; /* 580px; */ user-select: none; - @media #{$medium}, #{$medium-height} { + @media #{frameless.$medium}, #{frameless.$medium-height} { margin: 40px auto; } - @media #{$small}, #{$small-height} { + @media #{frameless.$small}, #{frameless.$small-height} { margin: 0 auto; width: auto; } @@ -146,7 +147,7 @@ row to appear to contain overflow. */ width: 100%; height: 3rem; - @media #{$small}, #{$small-height} { + @media #{frameless.$small}, #{frameless.$small-height} { border-radius: 0; } } diff --git a/src/components/modal/comments/modal.scss b/src/components/modal/comments/modal.scss index 00514c7ca76..e484989d329 100644 --- a/src/components/modal/comments/modal.scss +++ b/src/components/modal/comments/modal.scss @@ -1,7 +1,7 @@ -@import "../../../colors"; -@import "../../../frameless"; +@use "../../../colors"; +@use "../../../frameless"; -$medium-and-small: "screen and (max-width : #{$mobileIntermediate}-1)"; +$medium-and-small: "screen and (max-width : #{frameless.$mobileIntermediate}-1)"; .mod-report * { box-sizing: border-box; @@ -17,8 +17,8 @@ $medium-and-small: "screen and (max-width : #{$mobileIntermediate}-1)"; .report-modal-header { border-radius: 1rem 1rem 0 0; - box-shadow: inset 0 -1px 0 0 $ui-red-dark; - background-color: $ui-red-dark; + box-shadow: inset 0 -1px 0 0 colors.$ui-red-dark; + background-color: colors.$ui-red-dark; padding-top: .75rem; width: 100%; height: 3rem; @@ -27,7 +27,7 @@ $medium-and-small: "screen and (max-width : #{$mobileIntermediate}-1)"; .report-content-label { text-align: center; - color: $type-white; + color: colors.$type-white; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1rem; font-weight: bold; diff --git a/src/components/modal/email-confirmation/modal.scss b/src/components/modal/email-confirmation/modal.scss index 546c59b5778..040529e764f 100644 --- a/src/components/modal/email-confirmation/modal.scss +++ b/src/components/modal/email-confirmation/modal.scss @@ -1,5 +1,5 @@ -@import "../../../colors"; -@import "../../../frameless"; +@use "../../../colors"; +@use "../../../frameless"; .email-confirmation-modal{ diff --git a/src/components/modal/iframe/modal.scss b/src/components/modal/iframe/modal.scss index 8c2a43a03c1..dc72b783b6d 100644 --- a/src/components/modal/iframe/modal.scss +++ b/src/components/modal/iframe/modal.scss @@ -1,4 +1,4 @@ -@import "../../../frameless"; +@use "../../../frameless"; .modal-content-iframe { border: 0; diff --git a/src/components/modal/join/modal.scss b/src/components/modal/join/modal.scss index 416cc1400a0..4bb0b57fb12 100644 --- a/src/components/modal/join/modal.scss +++ b/src/components/modal/join/modal.scss @@ -1,32 +1,32 @@ -@import "../../../colors"; -@import "../../../frameless"; +@use "../../../colors"; +@use "../../../frameless"; /* unusually for a modal, the join flow modal cares about the screen around it being clickable, because of the standalone join view. */ .mod-join { width: 27.4375rem; - @media #{$small} { + @media #{frameless.$small} { width: auto; } } /* enable vertical scrolling when modal showing, if page is short */ .modal-overlay { - @media #{$small-height}, #{$medium-height} { + @media #{frameless.$small-height}, #{frameless.$medium-height} { overflow: auto; } } .modal-content { - @media #{$small}, #{$small-height} { + @media #{frameless.$small}, #{frameless.$small-height} { height: unset; } } /* lower the modal slightly to accomodate Scratch logo above it */ .modal-sizes { - @media #{$small}, #{$small-height}, #{$medium}, #{$medium-height} { + @media #{frameless.$small}, #{frameless.$small-height}, #{frameless.$medium}, #{frameless.$medium-height} { margin: 3.5rem auto; } } diff --git a/src/components/modal/mute/modal.scss b/src/components/modal/mute/modal.scss index a50a1c8b2bb..7043dfada5a 100644 --- a/src/components/modal/mute/modal.scss +++ b/src/components/modal/mute/modal.scss @@ -1,12 +1,12 @@ -@import "../../../colors"; -@import "../../../frameless"; +@use "../../../colors"; +@use "../../../frameless"; .modal-mute { width: 30rem; .mute-modal-header { - box-shadow: inset 0 -1px 0 0 $ui-mint-green; - background-color: $ui-mint-green; + box-shadow: inset 0 -1px 0 0 colors.$ui-mint-green; + background-color: colors.$ui-mint-green; border-radius: 1rem 1rem 0 0; } .mute-step { @@ -43,7 +43,7 @@ width: 129px; } .nav-divider { - border-top: 1px solid $ui-blue-25percent; + border-top: 1px solid colors.$ui-blue-25percent; } .mute-nav { display:flex; @@ -64,7 +64,7 @@ } .close-button { - background-color: $ui-dark-gray; + background-color: colors.$ui-dark-gray; } } diff --git a/src/components/modal/report/modal.scss b/src/components/modal/report/modal.scss index a433a6ec384..f215ab938eb 100644 --- a/src/components/modal/report/modal.scss +++ b/src/components/modal/report/modal.scss @@ -1,10 +1,10 @@ -@import "../../../colors"; -@import "../../../frameless"; +@use "../../../colors"; +@use "../../../frameless"; .report-modal-header { - box-shadow: inset 0 -1px 0 0 $ui-coral-dark; - background-color: $ui-coral; + box-shadow: inset 0 -1px 0 0 colors.$ui-coral-dark; + background-color: colors.$ui-coral; } .report-modal-content { @@ -32,16 +32,16 @@ z-index: 1; margin-top: $arrow-border-width; - border: 1px solid $active-gray; + border: 1px solid colors.$active-gray; border-radius: 5px; - background-color: $ui-orange; + background-color: colors.$ui-orange; padding: 1rem; min-width: 12rem; min-height: 1rem; overflow: visible; - color: $type-white; + color: colors.$type-white; - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { position: relative; margin-top: calc($arrow-border-width / 2); max-width: 100%; @@ -56,17 +56,17 @@ transform: rotate(135deg); - border-bottom: 1px solid $active-gray; - border-left: 1px solid $active-gray; + border-bottom: 1px solid colors.$active-gray; + border-left: 1px solid colors.$active-gray; border-radius: 5px; - background-color: $ui-orange; + background-color: colors.$ui-orange; width: $arrow-border-width; height: $arrow-border-width; content: ""; - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { display: none; } } @@ -84,7 +84,7 @@ .form-group.has-error { .textarea, select { margin: 0; - border: 1px solid $ui-orange; + border: 1px solid colors.$ui-orange; } margin-bottom: 1rem; } diff --git a/src/components/modal/social/modal.scss b/src/components/modal/social/modal.scss index 229b9660f35..cac9d1a5339 100644 --- a/src/components/modal/social/modal.scss +++ b/src/components/modal/social/modal.scss @@ -1,5 +1,5 @@ -@import "../../../colors"; -@import "../../../frameless"; +@use "../../../colors"; +@use "../../../frameless"; .mod-social { min-height: 15rem; @@ -9,8 +9,8 @@ .social-modal-header { border-radius: 1rem 1rem 0 0; - box-shadow: inset 0 -1px 0 0 $ui-blue-dark; - background-color: $ui-blue; + box-shadow: inset 0 -1px 0 0 colors.$ui-blue-dark; + background-color: colors.$ui-blue; } .social-modal-content { @@ -57,7 +57,7 @@ } .social-label-result { - color: $type-gray-75percent; + color: colors.$type-gray-75percent; transition: opacity 100ms linear; } @@ -95,10 +95,10 @@ .social-form { transition: all .2s ease; - border: 2px solid $box-shadow-light-gray; + border: 2px solid colors.$box-shadow-light-gray; border-radius: 8px; - background-color: $ui-blue-10percent; - color: $type-gray; + background-color: colors.$ui-blue-10percent; + color: colors.$type-gray; padding: .75rem .875rem; line-height: 1.25rem; font-size: .875rem; @@ -110,8 +110,8 @@ &:focus { transition: all .2s ease; outline: none; - border: 2px solid $ui-purple-dark; - box-shadow: 0 0 0 4px $ui-purple-25percent; + border: 2px solid colors.$ui-purple-dark; + box-shadow: 0 0 0 4px colors.$ui-purple-25percent; } &.social-textarea { diff --git a/src/components/modal/ttt/modal.scss b/src/components/modal/ttt/modal.scss index c1e37e8e697..6c6300d0221 100644 --- a/src/components/modal/ttt/modal.scss +++ b/src/components/modal/ttt/modal.scss @@ -1,12 +1,12 @@ -@import "../../../colors"; -@import "../../../frameless"; +@use "../../../colors"; +@use "../../../frameless"; .mod-ttt { overflow: hidden; } .ttt-modal-header { - background-color: $ui-blue; + background-color: colors.$ui-blue; height: 3rem; } @@ -28,7 +28,7 @@ .ttt-content-chunk + .ttt-content-chunk { margin-top: 1rem; - border-top: 1px solid $ui-border; + border-top: 1px solid colors.$ui-border; padding-top: 1rem; } @@ -42,7 +42,7 @@ a.ttt-try-tutorial-button { align-items: center; & > span { - color: $type-white; + color: colors.$type-white; } & > img { margin-right: .5rem; diff --git a/src/components/navigation/base/navigation.scss b/src/components/navigation/base/navigation.scss index 482402f180f..c777af0f7b4 100644 --- a/src/components/navigation/base/navigation.scss +++ b/src/components/navigation/base/navigation.scss @@ -1,4 +1,4 @@ -@import "../../../colors"; +@use "../../../colors"; #navigation { display: block; @@ -6,10 +6,10 @@ top: 0; left: 0; z-index: 10; - border-bottom: 1px solid $active-gray; + border-bottom: 1px solid colors.$active-gray; - box-shadow: 0 0 3px $box-shadow-gray; - background-color: $ui-purple-dark; + box-shadow: 0 0 3px colors.$box-shadow-gray; + background-color: colors.$ui-purple-dark; // Temporary removal of staging styling for testing purposes // &.staging { @@ -61,7 +61,7 @@ a { &:hover { - background-color: $active-gray; + background-color: colors.$active-gray; } } } @@ -83,12 +83,12 @@ text-decoration: none; white-space: nowrap; - color: $type-white; + color: colors.$type-white; font-size: .85rem; font-weight: bold; &:hover { - background-color: $active-gray; + background-color: colors.$active-gray; } } } diff --git a/src/components/navigation/conference/2016/navigation.scss b/src/components/navigation/conference/2016/navigation.scss index 13c74c539cc..d407e6458ab 100644 --- a/src/components/navigation/conference/2016/navigation.scss +++ b/src/components/navigation/conference/2016/navigation.scss @@ -1,5 +1,5 @@ -@import "../../../../colors"; -@import "../../../../frameless"; +@use "../../../../colors"; +@use "../../../../frameless"; #navigation { .ul.mod-2016, @@ -16,7 +16,7 @@ .link { margin-top: 0; margin-right: 10px; - color: $type-white; + color: colors.$type-white; } .logo-a { @@ -27,7 +27,7 @@ .logo-a-image { margin-right: 10px; - border-right: 2px solid $active-gray; + border-right: 2px solid colors.$active-gray; padding-right: 10px; width: 80px; } @@ -35,12 +35,12 @@ .logo-a-title { text-decoration: none; white-space: nowrap; - color: $type-white; + color: colors.$type-white; font-size: .85rem; font-weight: bold; } - @media #{$small} { + @media #{frameless.$small} { .li-right-ul.mod-2016 { flex-flow: row nowrap; } @@ -55,7 +55,7 @@ } } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { height: 100px; .ul.mod-2016 { diff --git a/src/components/navigation/conference/2017/navigation.scss b/src/components/navigation/conference/2017/navigation.scss index b77b1ed8c9b..d47813ad7b4 100644 --- a/src/components/navigation/conference/2017/navigation.scss +++ b/src/components/navigation/conference/2017/navigation.scss @@ -1,5 +1,5 @@ -@import "../../../../colors"; -@import "../../../../frameless"; +@use "../../../../colors"; +@use "../../../../frameless"; #navigation { .ul.mod-2017 { @@ -13,7 +13,7 @@ .li-left.mod-2017 { margin-top: 0; margin-right: 10px; - color: $type-white; + color: colors.$type-white; } .logo-a { @@ -24,7 +24,7 @@ .logo-a-image { margin-right: 10px; - border-right: 2px solid $active-gray; + border-right: 2px solid colors.$active-gray; padding-right: 10px; width: 80px; } @@ -32,7 +32,7 @@ .logo-a-title { text-decoration: none; white-space: nowrap; - color: $type-white; + color: colors.$type-white; font-size: .85rem; font-weight: bold; } diff --git a/src/components/navigation/conference/2018/navigation.scss b/src/components/navigation/conference/2018/navigation.scss index 6e36aaab65d..cdef5fbb4c2 100644 --- a/src/components/navigation/conference/2018/navigation.scss +++ b/src/components/navigation/conference/2018/navigation.scss @@ -1,5 +1,5 @@ -@import "../../../../colors"; -@import "../../../../frameless"; +@use "../../../../colors"; +@use "../../../../frameless"; #navigation { .ul.mod-2018, @@ -21,7 +21,7 @@ .link { margin-top: 0; margin-right: 10px; - color: $type-white; + color: colors.$type-white; } .logo-a { @@ -32,7 +32,7 @@ .logo-a-image { margin-right: 10px; - border-right: 2px solid $active-gray; + border-right: 2px solid colors.$active-gray; padding-right: 10px; width: 80px; } @@ -40,12 +40,12 @@ .logo-a-title { text-decoration: none; white-space: nowrap; - color: $type-white; + color: colors.$type-white; font-size: .85rem; font-weight: bold; } - @media #{$small} { + @media #{frameless.$small} { .li-right-ul.mod-2018 { flex-flow: row nowrap; } @@ -60,7 +60,7 @@ } } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { height: 100px; .ul.mod-2018 { diff --git a/src/components/navigation/conference/2019/navigation.scss b/src/components/navigation/conference/2019/navigation.scss index b039e87731e..a19c6f2b44d 100644 --- a/src/components/navigation/conference/2019/navigation.scss +++ b/src/components/navigation/conference/2019/navigation.scss @@ -1,5 +1,5 @@ -@import "../../../../colors"; -@import "../../../../frameless"; +@use "../../../../colors"; +@use "../../../../frameless"; #navigation { .ul.mod-2019 { @@ -13,7 +13,7 @@ .li-left.mod-2019 { margin-top: 0; margin-right: 10px; - color: $type-white; + color: colors.$type-white; } .logo-a { @@ -24,7 +24,7 @@ .logo-a-image { margin-right: 10px; - border-right: 2px solid $active-gray; + border-right: 2px solid colors.$active-gray; padding-right: 10px; width: 80px; } @@ -32,7 +32,7 @@ .logo-a-title { text-decoration: none; white-space: nowrap; - color: $type-white; + color: colors.$type-white; font-size: .85rem; font-weight: bold; } diff --git a/src/components/navigation/conference/2021/navigation.scss b/src/components/navigation/conference/2021/navigation.scss index 2fc783e3ed4..943711d7001 100644 --- a/src/components/navigation/conference/2021/navigation.scss +++ b/src/components/navigation/conference/2021/navigation.scss @@ -1,5 +1,5 @@ -@import "../../../../colors"; -@import "../../../../frameless"; +@use "../../../../colors"; +@use "../../../../frameless"; #navigation { .ul.mod-2021, @@ -19,7 +19,7 @@ .link { margin-top: 0; margin-right: 10px; - color: $type-white; + color: colors.$type-white; } .logo-a { @@ -30,7 +30,7 @@ .logo-a-image { margin-right: 10px; - border-right: 2px solid $active-gray; + border-right: 2px solid colors.$active-gray; padding-right: 10px; width: 80px; } @@ -38,12 +38,12 @@ .logo-a-title { text-decoration: none; white-space: nowrap; - color: $type-white; + color: colors.$type-white; font-size: .85rem; font-weight: bold; } - @media #{$small} { + @media #{frameless.$small} { .link { margin: 0; padding: 0; @@ -54,7 +54,7 @@ } } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { height: 65px; .ul.mod-2021 { diff --git a/src/components/navigation/www/accountnav.scss b/src/components/navigation/www/accountnav.scss index e4bc297109b..d36fe7f23a5 100644 --- a/src/components/navigation/www/accountnav.scss +++ b/src/components/navigation/www/accountnav.scss @@ -1,5 +1,5 @@ -@import "../../../colors"; -@import "../../../frameless"; +@use "../../../colors"; +@use "../../../frameless"; .account-nav { .user-info { @@ -11,7 +11,7 @@ text-decoration: none; text-overflow: ellipsis; white-space: nowrap; - color: $type-white; + color: colors.$type-white; font-size: .8125rem; font-weight: normal; @@ -24,11 +24,11 @@ } &:hover { - background-color: $active-gray; + background-color: colors.$active-gray; } &.open { - background-color: $active-gray; + background-color: colors.$active-gray; } &:after { @@ -56,7 +56,7 @@ } //4 columns -@media #{$small} { +@media #{frameless.$small} { .account-nav { margin-left: 0; @@ -74,7 +74,7 @@ //6 columns -@media #{$medium} { +@media #{frameless.$medium} { .account-nav { margin-left: 0; @@ -91,7 +91,7 @@ } //8 columns -@media #{$intermediate} { +@media #{frameless.$intermediate} { .account-nav { margin-left: 0; } diff --git a/src/components/navigation/www/navigation.scss b/src/components/navigation/www/navigation.scss index 48a05732e95..ec6562e8f2c 100644 --- a/src/components/navigation/www/navigation.scss +++ b/src/components/navigation/www/navigation.scss @@ -1,5 +1,5 @@ -@import "../../../colors"; -@import "../../../frameless"; +@use "../../../colors"; +@use "../../../frameless"; #navigation { // Temporary removal of staging styling for testing purposes @@ -42,7 +42,7 @@ &.search { margin: 0 20px; border-right: 0; - color: $type-white; + color: colors.$type-white; flex-grow: 3; .ie9 & { @@ -65,7 +65,7 @@ margin-top: 5px; outline: none; border: 0; - background-color: $active-gray; + background-color: colors.$active-gray; height: 14px; &[type=text] { @@ -75,7 +75,7 @@ padding-left: 40px; width: calc(100% - 50px); height: 40px; - color: $type-white; + color: colors.$type-white; font-size: .85em; &::placeholder { @@ -85,7 +85,7 @@ &:focus { transition: .15s ease background-color; - background-color: $active-dark-gray; + background-color: colors.$active-dark-gray; } .ie9 & { @@ -148,11 +148,11 @@ top: .5rem; right: .25rem; border-radius: 1rem; - background-color: $ui-orange; + background-color: colors.$ui-orange; padding: 0 .25rem; text-indent: 0; line-height: 1rem; - color: $type-white; + color: colors.$type-white; font-size: .7rem; font-weight: bold; } @@ -167,9 +167,9 @@ } //4 columns -@media #{$small} { +@media #{frameless.$small} { #navigation .inner { - width: $cols4; + width: frameless.$cols4; > ul > li { &.login-item { @@ -191,9 +191,9 @@ //6 columns -@media #{$medium} { +@media #{frameless.$medium} { #navigation .inner { - width: $cols6; + width: frameless.$cols6; > ul > li { &.login-item { @@ -213,9 +213,9 @@ } //8 columns -@media #{$intermediate} { +@media #{frameless.$intermediate} { #navigation .inner { - width: $cols8; + width: frameless.$cols8; > ul > li { &.login-item { diff --git a/src/components/nestedcarousel/nestedcarousel.scss b/src/components/nestedcarousel/nestedcarousel.scss index 138e42d6b82..97787181c7e 100644 --- a/src/components/nestedcarousel/nestedcarousel.scss +++ b/src/components/nestedcarousel/nestedcarousel.scss @@ -1,5 +1,5 @@ -@import "../../colors"; -@import "../carousel/carousel.scss"; +@use "../../colors"; +@use "../carousel/carousel.scss"; .nestedcarousel { /* Overrides carousel's settings for extra padding */ diff --git a/src/components/news/news.scss b/src/components/news/news.scss index 8798d383978..e03bf66fc96 100644 --- a/src/components/news/news.scss +++ b/src/components/news/news.scss @@ -1,4 +1,4 @@ -@import "../../colors"; +@use "../../colors"; .news { ul { @@ -35,7 +35,7 @@ h4 { display: block; - color: $link-purple; + color: colors.$link-purple; font-size: .85rem; } @@ -45,13 +45,13 @@ padding: 0; line-height: normal; - color: $type-gray; + color: colors.$type-gray; font-size: .85rem; } &:nth-child(even) { - border-top: 1px solid $ui-border; - border-bottom: 1px solid $ui-border; + border-top: 1px solid colors.$ui-border; + border-bottom: 1px solid colors.$ui-border; } } } diff --git a/src/components/not-available/not-available.scss b/src/components/not-available/not-available.scss index 4049a5d5d93..afc3686979e 100644 --- a/src/components/not-available/not-available.scss +++ b/src/components/not-available/not-available.scss @@ -1,4 +1,4 @@ -@import "../../colors"; +@use "../../colors"; .not-available-image { padding: 5rem 0 2rem; diff --git a/src/components/os-chooser/os-chooser.scss b/src/components/os-chooser/os-chooser.scss index 5f69aebbcdb..ddd8560ac89 100644 --- a/src/components/os-chooser/os-chooser.scss +++ b/src/components/os-chooser/os-chooser.scss @@ -1,12 +1,12 @@ -@import "../../colors"; +@use "../../colors"; .os-chooser { display: flex; position: sticky; top: 50px; z-index: 9; - box-shadow: 0 0 3px $box-shadow-gray; - background-color: $ui-white; + box-shadow: 0 0 3px colors.$box-shadow-gray; + background-color: colors.$ui-white; padding: 0; height: 5rem; @@ -23,7 +23,7 @@ display: flex; margin-right: 1rem; border-radius: 1.6rem; - background-color: $active-gray; + background-color: colors.$active-gray; padding: .5rem 1.1rem; align-items: center; box-sizing: border-box; @@ -34,7 +34,7 @@ } &.active { - background-color: $ui-purple-dark; + background-color: colors.$ui-purple-dark; } } } diff --git a/src/components/page/conference/page.scss b/src/components/page/conference/page.scss index e164d2eb2e5..a6b39a00c7f 100644 --- a/src/components/page/conference/page.scss +++ b/src/components/page/conference/page.scss @@ -1,24 +1,24 @@ -@import "../../../colors"; -@import "../../../frameless"; +@use "../../../colors"; +@use "../../../frameless"; #navigation { h1 { font-size: 4.5rem; } - @media #{$small} { + @media #{frameless.$small} { h1 { font-size: 2.5rem; } } - @media #{$medium} { + @media #{frameless.$medium} { h1 { font-size: 3rem; } } - @media #{$intermediate} { + @media #{frameless.$intermediate} { h1 { font-size: 3.5rem; } @@ -52,14 +52,14 @@ } } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { margin-top: 50px; } } .title-banner.mod-conference { margin-bottom: 0; - background-color: $ui-blue; + background-color: colors.$ui-blue; padding: 2rem 0; h1, @@ -68,7 +68,7 @@ margin: 0 auto; padding: 5px 0; text-align: center; - color: $type-white; + color: colors.$type-white; } h1 { @@ -79,7 +79,7 @@ font-size: 4rem; } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { h1, .title-banner-h1.mod-2017 { font-size: 2.5rem; @@ -96,7 +96,7 @@ width: 125px; } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { img { transform: translate(0, 5px); width: 85px; @@ -108,7 +108,7 @@ section { padding: 64px 0; } -@media #{$small} { +@media #{frameless.$small} { #view { width: 100%; min-width: 100%; diff --git a/src/components/page/www/donor-recognition.scss b/src/components/page/www/donor-recognition.scss index 99e5bb87b55..1606b3e3c4f 100644 --- a/src/components/page/www/donor-recognition.scss +++ b/src/components/page/www/donor-recognition.scss @@ -1,38 +1,38 @@ -@import "../../../colors"; -@import "../../../frameless"; +@use "../../../colors"; +@use "../../../frameless"; #donor { - color: $type-gray; + color: colors.$type-gray; font-size: .875rem; line-height: 1.5em; - background-color: $ui-gray; + background-color: colors.$ui-gray; padding-bottom: 2.5rem; padding-top: 1rem; #donor-text { text-align: center; - width: $cols12; + width: frameless.$cols12; margin: 0 auto; } } -@media only screen and (min-width: $tabletPortrait) and (max-width: $desktop) { +@media only screen and (min-width: frameless.$tabletPortrait) and (max-width: frameless.$desktop) { #donor { #donor-text { - width: $cols11; + width: frameless.$cols11; } } } -@media only screen and (min-width: $mobile) and (max-width: $tabletPortrait) { +@media only screen and (min-width: frameless.$mobile) and (max-width: frameless.$tabletPortrait) { #donor { #donor-text { - width: $cols6; + width: frameless.$cols6; } } } -@media only screen and (max-width: $mobile) { +@media only screen and (max-width: frameless.$mobile) { #donor { #donor-text { - width: $cols4; + width: frameless.$cols4; } } } diff --git a/src/components/people-grid/people-grid.scss b/src/components/people-grid/people-grid.scss index 9caf660522c..a9e2b394429 100644 --- a/src/components/people-grid/people-grid.scss +++ b/src/components/people-grid/people-grid.scss @@ -1,5 +1,5 @@ -@import "../../colors"; -@import "../../frameless"; +@use "../../colors"; +@use "../../frameless"; .avatar-grid { display: flex; @@ -23,7 +23,7 @@ $img-border: rgba(0, 0, 0, .05); border: 2px solid $img-border; border-radius: 8px; - background-color: $ui-white; + background-color: colors.$ui-white; width: 80px; height: 80px; } diff --git a/src/components/privacy-banner/privacy-banner.scss b/src/components/privacy-banner/privacy-banner.scss index 96fc26a859e..8fc043d2974 100644 --- a/src/components/privacy-banner/privacy-banner.scss +++ b/src/components/privacy-banner/privacy-banner.scss @@ -1,5 +1,5 @@ -@import "../../colors"; -@import "../../frameless"; +@use "../../colors"; +@use "../../frameless"; .privacy-aside { position: sticky; @@ -8,7 +8,7 @@ .privacy-banner { display: flex; z-index: 8; - background-color: $ui-purple-darker; + background-color: colors.$ui-purple-darker; padding: 0; overflow: hidden; align-items: center; @@ -36,7 +36,7 @@ .privacy-banner-text { text-align: left; - color: $ui-white; + color: colors.$ui-white; font-size: 1rem; font-weight: bold; margin-right: 1rem; @@ -50,12 +50,12 @@ } a { - color: $ui-white; + color: colors.$ui-white; text-decoration: underline; } } -@media only screen and (max-width: $mobileIntermediate) { +@media only screen and (max-width: frameless.$mobileIntermediate) { .privacy-banner .privacy-banner-container .privacy-banner-centered { flex-wrap: wrap; } diff --git a/src/components/projects-carousel/projects-carousel.scss b/src/components/projects-carousel/projects-carousel.scss index 8320830102f..c47df77b8e4 100644 --- a/src/components/projects-carousel/projects-carousel.scss +++ b/src/components/projects-carousel/projects-carousel.scss @@ -1,12 +1,12 @@ -@import "../../colors"; +@use "../../colors"; .projects-carousel { .header { - background-color: $ui-magenta-dark; + background-color: colors.$ui-magenta-dark; padding: 0.75rem 1.25rem; border-radius: 8px 8px 0 0; - color: $ui-white; + color: colors.$ui-white; font-size: 1.25rem; font-weight: 700; line-height: 1.75rem; @@ -15,7 +15,7 @@ .content { $icon-size: 40px; - background-color: $ui-magenta-dark-15percent; + background-color: colors.$ui-magenta-dark-15percent; border-radius: 0 0 8px 8px; .slick-next, @@ -52,7 +52,7 @@ justify-content: space-evenly; .thumbnail { - background-color: $ui-white; + background-color: colors.$ui-white; border-radius: 8px; .thumbnail-image { @@ -71,7 +71,7 @@ line-height: 1.5rem; a { - color: $ui-strong-blue; + color: colors.$ui-strong-blue; } .thumbnail-creator { @@ -79,7 +79,7 @@ line-height: 1.25rem; a { - color: $header-gray; + color: colors.$header-gray; } } } diff --git a/src/components/registration/registration.scss b/src/components/registration/registration.scss index 3fa63771504..ba36cf24dd1 100644 --- a/src/components/registration/registration.scss +++ b/src/components/registration/registration.scss @@ -1,4 +1,4 @@ -@import "../../frameless"; +@use "../../frameless"; .modal-content.mod-registration { width: 38.125rem; @@ -18,7 +18,7 @@ min-height: 500px; } -@media #{$intermediate-and-smaller} { +@media #{frameless.$intermediate-and-smaller} { .modal-content.mod-registration { width: 100%; overflow: scroll; diff --git a/src/components/registration/steps.scss b/src/components/registration/steps.scss index 31f816a21b3..b6a391f8498 100644 --- a/src/components/registration/steps.scss +++ b/src/components/registration/steps.scss @@ -1,5 +1,5 @@ -@import "../../colors"; -@import "../../frameless"; +@use "../../colors"; +@use "../../frameless"; .registration-step { .demographics-checkbox-is-robot { @@ -9,7 +9,7 @@ .invite-avatar { display: block; margin: 0 auto 1rem auto; - border: 2px solid $ui-white; + border: 2px solid colors.$ui-white; border-radius: 8px; } @@ -41,7 +41,7 @@ .help-text { margin: .25rem 0; text-align: left; - color: $ui-dark-gray; + color: colors.$ui-dark-gray; } .description.wide { @@ -50,13 +50,13 @@ .underline-link { text-decoration: underline; - color: $ui-white; + color: colors.$ui-white; font-weight: inherit; } .bold-link { font-weight: bold; - color: $type-gray; + color: colors.$type-gray; } &.class-invite-step { @@ -64,7 +64,7 @@ > p a { text-decoration: underline; - color: $ui-white; + color: colors.$ui-white; font-weight: inherit; } } @@ -107,7 +107,7 @@ &:focus { transition: all .5s ease; - border: 1px solid $ui-blue; + border: 1px solid colors.$ui-blue; } } @@ -134,8 +134,8 @@ .info-box{ display: block; margin: 0 -4rem 0 -4rem; - background-color: rgba($ui-blue, 0.15); - color: $ui-blue; + background-color: rgba(colors.$ui-blue, 0.15); + color: colors.$ui-blue; padding: 1rem; text-align: center; font-size: 12px; @@ -167,7 +167,7 @@ &.has-error { .textarea { - border: 1px solid $ui-orange; + border: 1px solid colors.$ui-orange; } } } @@ -204,7 +204,7 @@ } } -@media #{$small} { +@media #{frameless.$small} { .registration-step { &.demographics-step { .radio { @@ -223,7 +223,7 @@ } } -@media #{$intermediate-and-smaller} { +@media #{frameless.$intermediate-and-smaller} { .registration-step { .form { text-align: left; diff --git a/src/components/slide/slide.scss b/src/components/slide/slide.scss index 54dccab9fe0..1cac0a9cfd1 100644 --- a/src/components/slide/slide.scss +++ b/src/components/slide/slide.scss @@ -1,5 +1,5 @@ -@import "../../frameless"; -@import "../../colors"; +@use "../../frameless"; +@use "../../colors"; .slide { padding: 10px; @@ -7,7 +7,7 @@ > h2, > .description { text-align: center; - color: $type-white; + color: colors.$type-white; } > .description { @@ -25,7 +25,7 @@ } } -@media #{$medium-and-smaller} { +@media #{frameless.$medium-and-smaller} { .slide { padding: 0; } diff --git a/src/components/social-message/social-message.scss b/src/components/social-message/social-message.scss index 24eff2a575e..469956c3f4f 100644 --- a/src/components/social-message/social-message.scss +++ b/src/components/social-message/social-message.scss @@ -1,9 +1,9 @@ -@import "../../colors"; -@import "../../frameless"; +@use "../../colors"; +@use "../../frameless"; .social-message { margin: 0; - border-bottom: 1px solid $ui-border; + border-bottom: 1px solid colors.$ui-border; padding: 1rem; list-style-type: none; } @@ -13,7 +13,7 @@ } .social-message.mod-unread { - background-color: $ui-blue-10percent; + background-color: colors.$ui-blue-10percent; } .social-message.mod-unread .social-message-icon { @@ -38,10 +38,10 @@ } a.social-messages-profile-link { - color: $type-gray; + color: colors.$type-gray; &:hover { - color: $link-purple; + color: colors.$link-purple; } } @@ -53,7 +53,7 @@ a.social-messages-profile-link { margin-left: 1.5rem; } -@media #{$small} { +@media #{frameless.$small} { .social-message { text-align: left; } @@ -67,7 +67,7 @@ a.social-messages-profile-link { } } -@media #{$medium} { +@media #{frameless.$medium} { .social-message { text-align: left; } diff --git a/src/components/stepnavigation/stepnavigation.scss b/src/components/stepnavigation/stepnavigation.scss index 2eb6cfe377f..55d09da7b23 100644 --- a/src/components/stepnavigation/stepnavigation.scss +++ b/src/components/stepnavigation/stepnavigation.scss @@ -1,5 +1,5 @@ -@import "../../colors"; -@import "../../frameless"; +@use "../../colors"; +@use "../../frameless"; .step-navigation { margin: 0; @@ -13,19 +13,19 @@ .indicator { border-radius: .25rem; - background-color: $ui-white; + background-color: colors.$ui-white; width: .5rem; height: .5rem; } &.active { .indicator { - background-color: $ui-aqua; + background-color: colors.$ui-aqua; } } &.selected { - border: 1px solid $ui-white; + border: 1px solid colors.$ui-white; } } } diff --git a/src/components/steps/steps.scss b/src/components/steps/steps.scss index e6d34807f53..6764b226b43 100644 --- a/src/components/steps/steps.scss +++ b/src/components/steps/steps.scss @@ -1,4 +1,4 @@ -@import "../../colors"; +@use "../../colors"; .steps { display: flex; @@ -29,10 +29,10 @@ .step-number { display: inline-flex; border-radius: 2rem; - background-color: $ui-purple-dark; + background-color: colors.$ui-purple-dark; width: 2rem; height: 2rem; - color: $ui-white; + color: colors.$ui-white; justify-content: center; align-items: center; flex-shrink: 0; diff --git a/src/components/subnavigation/subnavigation.scss b/src/components/subnavigation/subnavigation.scss index cd5011ca08e..4ce55378fdc 100644 --- a/src/components/subnavigation/subnavigation.scss +++ b/src/components/subnavigation/subnavigation.scss @@ -1,11 +1,11 @@ -@import "../../colors"; +@use "../../colors"; .sub-nav { display: flex; margin: 0 auto; padding: 5px 0; width: 100%; - color: $type-white; + color: colors.$type-white; font-size: .8rem; font-weight: 500; justify-content: center; @@ -15,23 +15,23 @@ li, button { display: inline-block; margin: 5px; - border: 1px solid $active-gray; + border: 1px solid colors.$active-gray; border-radius: 50px; padding: .75em 1.5em; text-decoration: none; - color: $type-white; + color: colors.$type-white; list-style-type: none; &:hover { transition: background-color .25s ease; border-color: transparent; - background-color: $active-gray; + background-color: colors.$active-gray; } &:active { border: 0 solid transparent; - box-shadow: inset 0 0 5px $box-shadow-gray; - background-color: $active-dark-gray; + box-shadow: inset 0 0 5px colors.$box-shadow-gray; + background-color: colors.$active-dark-gray; padding: calc(.75em + 1px) calc(1.5em + 1px); } diff --git a/src/components/tabs/tabs.scss b/src/components/tabs/tabs.scss index 791e9723fd9..bb2c0ddb671 100644 --- a/src/components/tabs/tabs.scss +++ b/src/components/tabs/tabs.scss @@ -1,16 +1,16 @@ -@import "../../colors"; -@import "../../frameless"; +@use "../../colors"; +@use "../../frameless"; .tab-background { - box-shadow: 0 0 1px $box-shadow-gray; - background-color: $ui-white; + box-shadow: 0 0 1px colors.$box-shadow-gray; + background-color: colors.$ui-white; width: 100%; } .tabs { - background-color: $ui-white; + background-color: colors.$ui-white; padding: 0; - width: $cols12; + width: frameless.$cols12; justify-content: center; } @@ -18,17 +18,17 @@ margin: 0; border: 0; border-radius: 0; - width: $cols2; + width: frameless.$cols2; text-align: center; - color: $header-gray; + color: colors.$header-gray; background-color: transparent; &.active { - border-bottom: 3px solid $ui-aqua; + border-bottom: 3px solid colors.$ui-aqua; &:hover { - border-bottom: 3px solid $ui-aqua; - color: $header-gray; + border-bottom: 3px solid colors.$ui-aqua; + color: colors.$header-gray; } } @@ -38,7 +38,7 @@ } &:hover { - border-bottom: 3px solid $active-dark-gray; + border-bottom: 3px solid colors.$active-dark-gray; } .tab-icon { @@ -49,7 +49,7 @@ } &:hover { - background-color: $ui-white; - color: $header-gray; + background-color: colors.$ui-white; + color: colors.$header-gray; } } diff --git a/src/components/tag/tag.scss b/src/components/tag/tag.scss index 263caa20220..04e1b0c985a 100644 --- a/src/components/tag/tag.scss +++ b/src/components/tag/tag.scss @@ -1,4 +1,4 @@ -@import "../../colors"; +@use "../../colors"; $green: #2B732B; @@ -62,11 +62,11 @@ $green: #2B732B; background-color: rgba(0, 0, 0, 0.15); } &.blue{ - background-color: $motion-blue-3; + background-color: colors.$motion-blue-3; } &.purple{ - background-color: $ui-purple-dark; + background-color: colors.$ui-purple-dark; } &.green{ background-color: $green; diff --git a/src/components/teacher-banner/teacher-banner.scss b/src/components/teacher-banner/teacher-banner.scss index da2609332c9..a40c3b92de4 100644 --- a/src/components/teacher-banner/teacher-banner.scss +++ b/src/components/teacher-banner/teacher-banner.scss @@ -1,8 +1,8 @@ -@import "../../colors"; -@import "../../frameless"; +@use "../../colors"; +@use "../../frameless"; .teacher-banner { - background-color: $ui-purple; + background-color: colors.$ui-purple; min-height: 65px; &.title-banner { @@ -20,7 +20,7 @@ } h3 { - color: $ui-white; + color: colors.$ui-white; } .flex-row { @@ -31,8 +31,8 @@ .button { margin-left: 10px; - background-color: $ui-white; + background-color: colors.$ui-white; padding: 13px 20px; - color: $ui-purple-dark; + color: colors.$ui-purple-dark; } } diff --git a/src/components/text-and-media-snippet/text-and-media-snippet.scss b/src/components/text-and-media-snippet/text-and-media-snippet.scss index 3ea422eabd6..a5285ab670d 100644 --- a/src/components/text-and-media-snippet/text-and-media-snippet.scss +++ b/src/components/text-and-media-snippet/text-and-media-snippet.scss @@ -1,4 +1,4 @@ -@import "../../frameless"; +@use "../../frameless"; .text-and-media-snippet{ display: flex; @@ -22,15 +22,15 @@ max-width: 780px; margin: auto; - @media #{$intermediate} { + @media #{frameless.$intermediate} { max-width: 620px; } - @media #{$medium} { + @media #{frameless.$medium} { max-width: 460px; } - @media #{$small} { + @media #{frameless.$small} { max-width: 300px; } @@ -42,7 +42,7 @@ } } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { text-align: center; margin: 32px auto; @@ -60,15 +60,15 @@ } &.regular, &.reverse { - @media #{$intermediate} { + @media #{frameless.$intermediate} { max-width: 620px; } - @media #{$medium} { + @media #{frameless.$medium} { max-width: 460px; } - @media #{$small} { + @media #{frameless.$small} { max-width: 300px; } @@ -76,19 +76,19 @@ max-width: 400px; width: 100%; - @media #{$intermediate} { + @media #{frameless.$intermediate} { max-width: 620px; } - @media #{$medium} { + @media #{frameless.$medium} { max-width: 460px; } - @media #{$small} { + @media #{frameless.$small} { max-width: 300px; } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { width: 100%; margin-bottom: 20px; } @@ -120,7 +120,7 @@ font-size: 1.125rem; } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { text-align: center; } } diff --git a/src/components/thumbnail/thumbnail.scss b/src/components/thumbnail/thumbnail.scss index e1f1bf79549..f300639e45f 100644 --- a/src/components/thumbnail/thumbnail.scss +++ b/src/components/thumbnail/thumbnail.scss @@ -1,4 +1,4 @@ -@import "../../colors"; +@use "../../colors"; .thumbnail { .thumbnail-image { @@ -6,7 +6,7 @@ img { margin-bottom: 2px; - border: 1px solid $ui-border; + border: 1px solid colors.$ui-border; } } @@ -36,7 +36,7 @@ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - color: $type-gray; + color: colors.$type-gray; font-size: .8462em; a { diff --git a/src/components/thumbnailcolumn/thumbnailcolumn.scss b/src/components/thumbnailcolumn/thumbnailcolumn.scss index ef23bce0614..cdd3b358fd6 100644 --- a/src/components/thumbnailcolumn/thumbnailcolumn.scss +++ b/src/components/thumbnailcolumn/thumbnailcolumn.scss @@ -1,5 +1,5 @@ -@import "../../frameless"; -@import "../../colors"; +@use "../../frameless"; +@use "../../colors"; .thumbnail-column { @@ -21,8 +21,8 @@ .thumbnail-image { margin: 8px auto; border-radius: 4px; - box-shadow: 0 0 0 1px $active-gray; - background-color: $ui-white; + box-shadow: 0 0 0 1px colors.$active-gray; + background-color: colors.$ui-white; width: $thumbnail-inner-width; } @@ -48,7 +48,7 @@ text-align: left; .thumbnail-creator a { - color: $type-gray; + color: colors.$type-gray; } a { diff --git a/src/components/timeline-card/timeline-card.scss b/src/components/timeline-card/timeline-card.scss index 699d364b693..09bffbe1f0c 100644 --- a/src/components/timeline-card/timeline-card.scss +++ b/src/components/timeline-card/timeline-card.scss @@ -1,20 +1,19 @@ -@import "../../colors"; -@import "../../frameless"; +@use "../../colors"; +@use "../../frameless"; $timeline-breakpoint: "only screen and (max-width : 1030px)"; .timeline-card{ max-width: 460px; z-index: 2; - - @media #{$small} { - max-width: 300px; - } - - background-color: $ui-white; + background-color: colors.$ui-white; border-radius: 8px; position: relative; margin-bottom: 30px; + @media #{frameless.$small} { + max-width: 300px; + } + .timeline-content { margin: 15px; text-align: left; diff --git a/src/components/title-banner/title-banner.scss b/src/components/title-banner/title-banner.scss index 52e364b2ad9..f29bc0c8b39 100644 --- a/src/components/title-banner/title-banner.scss +++ b/src/components/title-banner/title-banner.scss @@ -1,10 +1,10 @@ -@import "../../colors"; -@import "../../frameless"; +@use "../../colors"; +@use "../../frameless"; .title-banner { transition: background-image .5s ease, background-color .5s ease; margin-bottom: 40px; - background-color: $ui-aqua; + background-color: colors.$ui-aqua; background-position: center; background-size: cover; padding: 20px 0; @@ -16,7 +16,7 @@ margin: 0 auto; padding: 5px 0; text-align: center; - color: $type-white; + color: colors.$type-white; } .title-banner-p { @@ -29,11 +29,11 @@ } .title-banner.mod-blue-bg { - background-color: $ui-blue; + background-color: colors.$ui-blue; // override link color if background in ui-blue a { - color: $ui-white; + color: colors.$ui-white; } a.mod-underline { diff --git a/src/components/title-banner/warning-banner.scss b/src/components/title-banner/warning-banner.scss index 1029c0b0411..fe32f6a7ca0 100644 --- a/src/components/title-banner/warning-banner.scss +++ b/src/components/title-banner/warning-banner.scss @@ -1,7 +1,7 @@ -@import "../../colors"; +@use "../../colors"; .warning-banner { - background-color: $ui-red; + background-color: colors.$ui-red; margin-bottom: 0; .warning-banner-container { diff --git a/src/components/tooltip/tooltip.scss b/src/components/tooltip/tooltip.scss index f8192df59d6..ace8659315b 100644 --- a/src/components/tooltip/tooltip.scss +++ b/src/components/tooltip/tooltip.scss @@ -1,5 +1,5 @@ -@import "../../colors"; -@import "../../frameless"; +@use "../../colors"; +@use "../../frameless"; .tooltip { .tip { @@ -8,8 +8,8 @@ img { border-radius: 50%; - box-shadow: 0 0 0 .125rem $active-gray; - background-color: $ui-blue; + box-shadow: 0 0 0 .125rem colors.$active-gray; + background-color: colors.$ui-blue; padding: .25rem; width: .75rem; height: .75rem; @@ -23,13 +23,13 @@ visibility: hidden; z-index: 1; margin-top: $arrow-border-width * 0.5; - border: 1px solid $active-gray; + border: 1px solid colors.$active-gray; border-radius: 5px; - background-color: $ui-blue-dark; + background-color: colors.$ui-blue-dark; padding: 1rem; width: 13.75rem; text-align: left; - color: $type-white; + color: colors.$type-white; &:before { display: block; @@ -39,11 +39,11 @@ transform: rotate(45deg); - border-top: 1px solid $active-gray; - border-left: 1px solid $active-gray; + border-top: 1px solid colors.$active-gray; + border-left: 1px solid colors.$active-gray; border-radius: 5px; - background-color: $ui-blue-dark; + background-color: colors.$ui-blue-dark; width: $arrow-border-width; height: $arrow-border-width; @@ -58,7 +58,7 @@ } } -@media #{$intermediate-and-smaller} { +@media #{frameless.$intermediate-and-smaller} { .tooltip { display: block; diff --git a/src/components/ttt-tile/ttt-tile.scss b/src/components/ttt-tile/ttt-tile.scss index a472f689e4d..f4b9877330a 100644 --- a/src/components/ttt-tile/ttt-tile.scss +++ b/src/components/ttt-tile/ttt-tile.scss @@ -1,5 +1,5 @@ -@import "../../colors"; -@import "../../frameless"; +@use "../../colors"; +@use "../../frameless"; .ttt-tile { display: inline-block; @@ -8,9 +8,9 @@ margin-top: 1px; margin-bottom: calc(1.25rem - 1px); border-radius: 1rem; - box-shadow: 0 0 0 1px $active-gray; - background-color: $ui-white; - width: $cols4; + box-shadow: 0 0 0 1px colors.$active-gray; + background-color: colors.$ui-white; + width: frameless.$cols4; text-align: center; min-height: 18.125rem; } @@ -22,7 +22,7 @@ .ttt-tile-image { border-radius: 1rem 1rem 0 0; - background: $ui-blue; + background: colors.$ui-blue; width: 100%; cursor: pointer; } @@ -41,11 +41,11 @@ left: 50%; transform: translate(-50%, 0); text-align: center; - color: $type-white; + color: colors.$type-white; } .mod-ttt-try-button { - border: 1px solid $ui-white; + border: 1px solid colors.$ui-white; background-color: transparent; } @@ -63,9 +63,9 @@ margin: .5em 0; border: 0; border-radius: 1rem; - background-color: $ui-blue; + background-color: colors.$ui-blue; padding: .25rem 1rem; - color: $type-white; + color: colors.$type-white; font-size: .8rem; font-weight: bold; } diff --git a/src/components/video/video.scss b/src/components/video/video.scss index d1da501bbdf..b561a78c0be 100644 --- a/src/components/video/video.scss +++ b/src/components/video/video.scss @@ -1,8 +1,8 @@ -@import "../../colors"; -@import "../../frameless"; +@use "../../colors"; +@use "../../frameless"; .video-player { - border: .25rem solid $box-shadow-light-gray; + border: .25rem solid colors.$box-shadow-light-gray; border-radius: .75rem; height: 225px; overflow: hidden; diff --git a/src/components/welcome/welcome.scss b/src/components/welcome/welcome.scss index 15c358d1062..14410eb6595 100644 --- a/src/components/welcome/welcome.scss +++ b/src/components/welcome/welcome.scss @@ -1,4 +1,4 @@ -@import "../../colors"; +@use "../../colors"; .welcome { .box-content { @@ -16,8 +16,8 @@ font-weight: 500; line-height: 1.125rem; text-align: center; - color: $ui-cyan-blue; - background-color: $ui-light-blue; + color: colors.$ui-cyan-blue; + background-color: colors.$ui-light-blue; padding: 0.625rem 0; } @@ -40,7 +40,7 @@ width: 10rem; height: 13rem; - border: 1px solid $ui-border-light-blue; + border: 1px solid colors.$ui-border-light-blue; border-radius: 20px; text-align: center; diff --git a/src/components/youtube-video-button/youtube-video-button.scss b/src/components/youtube-video-button/youtube-video-button.scss index c1a4036b205..2702c89f4f3 100644 --- a/src/components/youtube-video-button/youtube-video-button.scss +++ b/src/components/youtube-video-button/youtube-video-button.scss @@ -1,4 +1,4 @@ -@import "../../colors"; +@use "../../colors"; .youtbe-video-button { display: flex; @@ -26,8 +26,8 @@ margin: 0.5rem; padding: 0.25rem; border-radius: 4px; - background-color: $overlay-gray; - color: $type-white; + background-color: colors.$overlay-gray; + color: colors.$type-white; font-size: 0.75rem; font-weight: 500; @@ -57,7 +57,7 @@ .video-metadata { margin: 0.5rem 0 0.25rem 0; - color: $ui-dark-gray; + color: colors.$ui-dark-gray; font-size: 0.75rem; font-weight: 500; line-height: 1.125rem; diff --git a/src/components/youtube-video-modal/youtube-video-modal.scss b/src/components/youtube-video-modal/youtube-video-modal.scss index 9557f80b4da..5175cf8e52b 100644 --- a/src/components/youtube-video-modal/youtube-video-modal.scss +++ b/src/components/youtube-video-modal/youtube-video-modal.scss @@ -1,4 +1,4 @@ -@import "../../colors"; +@use "../../colors"; .youtube-video-modal-overlay { display: flex; @@ -12,7 +12,7 @@ left: 0; z-index: 510; - background-color: $box-shadow-light-gray; + background-color: colors.$box-shadow-light-gray; border-color: unset; } @@ -43,7 +43,7 @@ } &.mint-green { - background-color: $ui-mint-green; + background-color: colors.$ui-mint-green; } } diff --git a/src/main.scss b/src/main.scss index 470bc61e27c..c2ec4bac933 100644 --- a/src/main.scss +++ b/src/main.scss @@ -1,14 +1,14 @@ -@import "colors"; -@import "frameless"; +@use "colors"; +@use "frameless"; /* Tags */ html, body { display: block; margin: 0; - background-color: $ui-purple-dark; + background-color: colors.$ui-purple-dark; padding: 0; - color: $type-gray; + color: colors.$type-gray; font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif; } @@ -21,7 +21,7 @@ h4 { border: 0; padding: 0; - color: $header-gray; + color: colors.$header-gray; font-weight: bold; } @@ -68,13 +68,13 @@ p { // padding: 1em 0; margin: 1.5em 0; - border: 1px solid $active-gray; + border: 1px solid colors.$active-gray; border-radius: .5rem; - background-color: $ui-blue-10percent; + background-color: colors.$ui-blue-10percent; padding: 1.25em; &.orange { - background-color: $ui-orange-10percent; + background-color: colors.$ui-orange-10percent; } } @@ -91,34 +91,34 @@ strong { /* Links */ a { cursor: pointer; - color: $ui-purple-dark; + color: colors.$ui-purple-dark; font-weight: bold; &:link, &:visited, &:active { text-decoration: none; - color: $link-purple; + color: colors.$link-purple; } &:hover { text-decoration: none; - color: $ui-purple-darker; + color: colors.$ui-purple-darker; } } /* Classes */ .empty { - border: 1px solid $active-gray; + border: 1px solid colors.$active-gray; border-radius: 5px; - background-color: $ui-blue-10percent; + background-color: colors.$ui-blue-10percent; padding: 10px; text-align: center; line-height: 2rem; - color: $type-gray; + color: colors.$type-gray; h4 { - color: $type-gray; + color: colors.$type-gray; } } @@ -129,7 +129,7 @@ h4, h5, p { line-height: 1.7em; - color: $type-gray; + color: colors.$type-gray; } p { @@ -138,11 +138,11 @@ p { } input { - outline-color: $ui-purple-dark; + outline-color: colors.$ui-purple-dark; } ::selection { - background-color: $ui-blue-25percent; + background-color: colors.$ui-blue-25percent; } ol, @@ -177,7 +177,7 @@ dl { /* NOTE: Margin should match height in navigation.scss */ margin-top: 50px; - background-color: $background-color; + background-color: colors.$background-color; padding: 20px 0; min-width: 100%; min-height: 680px; diff --git a/src/views/about/about.scss b/src/views/about/about.scss index 3c4a8011097..1354347550d 100644 --- a/src/views/about/about.scss +++ b/src/views/about/about.scss @@ -1,4 +1,4 @@ -@import "../../colors"; +@use "../../colors"; .about { .masthead { @@ -24,7 +24,7 @@ &:nth-child(odd) { margin-right: 10px; - border-right: 1px solid $ui-gray; + border-right: 1px solid colors.$ui-gray; padding-right: 10px; } } @@ -41,9 +41,9 @@ .body { position: relative; margin: 20px 0 0; - border: 1px solid $ui-gray; + border: 1px solid colors.$ui-gray; border-radius: 10px; - background: $ui-white; + background: colors.$ui-white; padding: 26px 40px 6px; width: calc(100% - 80px); @@ -69,7 +69,7 @@ img, iframe { display: block; - border: 1px solid $ui-gray; + border: 1px solid colors.$ui-gray; padding: 5px; width: 396px; height: 222px; @@ -79,8 +79,8 @@ .about-button { margin-right: .75rem; - background-color: $ui-purple-dark; - color: $ui-white; + background-color: colors.$ui-purple-dark; + color: colors.$ui-white; font-size: 1rem; img { @@ -90,7 +90,7 @@ } a { - color: $ui-white; + color: colors.$ui-white; } span { diff --git a/src/views/annual-report/2019/annual-report.scss b/src/views/annual-report/2019/annual-report.scss index b20c60b942b..ba216ae50d0 100644 --- a/src/views/annual-report/2019/annual-report.scss +++ b/src/views/annual-report/2019/annual-report.scss @@ -1,10 +1,10 @@ -@import "../../../colors"; -@import "../../../frameless"; +@use "../../../colors"; +@use "../../../frameless"; -$base-bg: $ui-white; +$base-bg: colors.$ui-white; #view { - background-color: $ui-white; + background-color: colors.$ui-white; padding: 0; width: 100%; } @@ -48,9 +48,9 @@ p { margin-top: 1rem; } -@media #{$small} { +@media #{frameless.$small} { .inner { - width: $cols4; + width: frameless.$cols4; } h1 { @@ -68,13 +68,13 @@ p { } .message-section { - background-color: $ui-blue; + background-color: colors.$ui-blue; h1, h2, p { - color: $ui-white; + color: colors.$ui-white; } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { .inner { width: 100%; } @@ -91,7 +91,7 @@ p { font-weight: bold; } - @media #{$big} { + @media #{frameless.$big} { .masthead-content { max-width: 440px; text-align: left; @@ -102,7 +102,7 @@ p { } } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { flex-direction: column; align-items: center; @@ -115,19 +115,19 @@ p { } } - @media #{$intermediate} { + @media #{frameless.$intermediate} { .masthead-content, img { max-width: 620px; } } - @media #{$medium} { + @media #{frameless.$medium} { .masthead-content, img { max-width: 460px; } } - @media #{$small} { + @media #{frameless.$small} { .masthead-content, img { max-width: 300px; } @@ -141,17 +141,17 @@ p { .message-content{ align-items: flex-start; - @media #{$big} { + @media #{frameless.$big} { h2 { max-width: 300px; } } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { align-items: center; } - @media #{$medium-and-intermediate} { + @media #{frameless.$medium-and-intermediate} { text-align: left; h2 { max-width: 460px; @@ -159,7 +159,7 @@ p { } } - @media #{$small} { + @media #{frameless.$small} { p { text-align: left; } @@ -179,11 +179,11 @@ p { margin-right: 20px; } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { flex-direction: column; } - @media #{$medium} { + @media #{frameless.$medium} { max-width: 460px; } @@ -196,11 +196,11 @@ p { max-width: 620px; - @media #{$medium} { + @media #{frameless.$medium} { max-width: 460px; } - @media #{$small} { + @media #{frameless.$small} { max-width: 300px; } } @@ -211,12 +211,12 @@ p { max-width: 620px; - @media #{$medium} { + @media #{frameless.$medium} { max-width: 460px; margin-right: 0px; } - @media #{$small} { + @media #{frameless.$small} { max-width: 300px; margin-right: 0px; } @@ -231,7 +231,7 @@ p { margin-bottom: -140px; } - @media #{$small} { + @media #{frameless.$small} { img { width: 100px; @@ -255,17 +255,17 @@ p { width: 620px; } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { text-align: left; } - @media #{$medium} { + @media #{frameless.$medium} { p { width: 460px; } } - @media #{$small} { + @media #{frameless.$small} { p { width: 300px; } @@ -273,7 +273,7 @@ p { } .mission-section { - background-color: $ui-blue-10percent; + background-color: colors.$ui-blue-10percent; display: flex; flex-direction: column; align-items: center; @@ -283,7 +283,7 @@ p { font-size: 1.25rem; } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { text-align: left; } @@ -300,28 +300,28 @@ p { flex-wrap: wrap; align-items: flex-start; - @media #{$intermediate} { + @media #{frameless.$intermediate} { margin-top: 96px 0 108px 0; } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { justify-content: center; } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { margin-top: 76px; align-items: center; } } .inner, .four-ps { - @media #{$intermediate} { + @media #{frameless.$intermediate} { width: 620px; } - @media #{$medium} { + @media #{frameless.$medium} { width: 460px; } - @media #{$small} { + @media #{frameless.$small} { width: 300px; } } @@ -341,7 +341,7 @@ p { margin-top: 0px; } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { padding: 0; width: 300px; background-position: center; @@ -356,16 +356,16 @@ p { } } - @media #{$intermediate} { + @media #{frameless.$intermediate} { height: 370px; } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { margin-top: 62px; height: 398px; } - @media #{$medium} { + @media #{frameless.$medium} { margin-right: 0; } @@ -383,11 +383,11 @@ p { margin-bottom: 0; } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { text-align: center; } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { margin: 0 auto; p { @@ -397,13 +397,13 @@ p { } } - @media #{$medium} { + @media #{frameless.$medium} { p { margin-top: 12px; } } - @media #{$small} { + @media #{frameless.$small} { p { margin-top: 5px; } @@ -431,11 +431,11 @@ p { margin-top: 112px; margin-right: 0; - @media #{$intermediate} { + @media #{frameless.$intermediate} { margin-top: 96px; } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { margin-top: 0; } } @@ -444,11 +444,11 @@ p { background-image: url("/images/annual-report/mission/Peers Splash.svg"); margin-top: -80px; - @media #{$intermediate} { + @media #{frameless.$intermediate} { margin-top: -72px; } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { margin-top: 0; } } @@ -458,18 +458,18 @@ p { margin-right: 0; margin-top: 32px; - @media #{$intermediate} { + @media #{frameless.$intermediate} { margin-top: 24px; } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { margin-top: 0; } } } .milestones-section { - background-color: $ui-blue-10percent; + background-color: colors.$ui-blue-10percent; padding-bottom: 120px; .inner { @@ -480,7 +480,7 @@ p { } h2, h4 p { - color: $type-gray; + color: colors.$type-gray; } p { @@ -498,7 +498,7 @@ p { margin-right: auto } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { flex-direction: column; .left, .right { @@ -526,7 +526,7 @@ p { max-width: 460px; } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { align-items: center; .milestones-description{ @@ -534,7 +534,7 @@ p { } } - @media #{$small} { + @media #{frameless.$small} { width: 300px; } } @@ -556,18 +556,18 @@ p { object-fit: cover; } - background-color: $ui-white; + background-color: colors.$ui-white; border-radius: 8px; padding: 16px; margin-bottom: 12px; - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { h4, p { text-align: left; } } - @media #{$small} { + @media #{frameless.$small} { img { height: 160px; } @@ -605,11 +605,11 @@ p { align-items: center; } - background-color: $ui-aqua; - color: $ui-white; + background-color: colors.$ui-aqua; + color: colors.$ui-white; h2, h3, h4, p { - color: $ui-white; + color: colors.$ui-white; } .reach-intro { @@ -649,7 +649,7 @@ p { width: 600px; } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { img { max-width: 100%; } @@ -663,9 +663,9 @@ p { .reach-map { width: 100%; - background-color: $ui-white; + background-color: colors.$ui-white; border-radius: 1rem; - color: $type-gray; + color: colors.$type-gray; padding-top: 48px; margin-top: 52px; text-align: center; @@ -676,11 +676,11 @@ p { align-items: center; h3, p { - color: $type-gray; + color: colors.$type-gray; padding: 0 48px; } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { width: 100%; border-radius: 0px; } @@ -698,7 +698,7 @@ p { img { padding: 4px 8px; - @media #{$small} { + @media #{frameless.$small} { width: 240px; } } @@ -742,12 +742,12 @@ p { max-width: 380px; } - @media #{$small} { + @media #{frameless.$small} { margin-bottom: 64px; } } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { .inner { max-width: 620px; } @@ -760,7 +760,7 @@ p { } } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { .reach-translation { text-align: center; justify-content: center; @@ -781,7 +781,7 @@ p { margin-bottom: 16px; } - @media #{$small} { + @media #{frameless.$small} { font-size: 2.75rem; width: 140px; @@ -802,7 +802,7 @@ p { margin-top: -44px; margin-left: 88px; - @media #{$medium} { + @media #{frameless.$medium} { margin-left: 32px; } } @@ -815,7 +815,7 @@ p { display: flex; justify-content: flex-end; - @media #{$medium} { + @media #{frameless.$medium} { margin-right: 12px; } } @@ -823,11 +823,11 @@ p { .reach-scratch-jr { background-color: #0EA57A; - color: $ui-white; + color: colors.$ui-white; padding: 100px 0; h2, h3, h4, p { - color: $ui-white; + color: colors.$ui-white; } .inner { @@ -845,7 +845,7 @@ p { } } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { .inner { max-width: 620px; } @@ -856,7 +856,7 @@ p { } } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { .inner { justify-content: center; } @@ -867,7 +867,7 @@ p { } } - @media #{$small} { + @media #{frameless.$small} { padding: 84px 0 52px 0; } } @@ -895,7 +895,7 @@ p { width: 100%; h4 { - color: $ui-white; + color: colors.$ui-white; word-break: break-word; } @@ -947,7 +947,7 @@ p { } } - @media #{$big} { + @media #{frameless.$big} { .three-pillars { .pillar-splash { width: 244px; @@ -962,7 +962,7 @@ p { } } - @media #{$intermediate} { + @media #{frameless.$intermediate} { .inner { max-width: 620px; } @@ -981,7 +981,7 @@ p { } } - @media #{$medium} { + @media #{frameless.$medium} { .inner { max-width: 460px; } @@ -1010,7 +1010,7 @@ p { } } - @media #{$small} { + @media #{frameless.$small} { .inner { max-width: 300px; } @@ -1045,17 +1045,17 @@ p { padding: 92px 0; &.tools { - background-color: $ui-aqua; + background-color: colors.$ui-aqua; background-position: 50% 0%; } &.community { - background-color: $ui-blue; + background-color: colors.$ui-blue; background-position: 50% 50%; } &.schools { - background-color: $ui-purple; + background-color: colors.$ui-purple; background-position: 50% 100%; } @@ -1064,7 +1064,7 @@ p { text-align: center; h2, p { - color: $ui-white; + color: colors.$ui-white; } p { @@ -1072,11 +1072,11 @@ p { line-height: 2.5rem; } - @media #{$medium} { + @media #{frameless.$medium} { max-width: 460px; } - @media #{$small} { + @media #{frameless.$small} { max-width: 300px; } } @@ -1088,20 +1088,20 @@ p { flex-direction: column; align-items: center; - @media #{$big} { + @media #{frameless.$big} { max-width: 940px; padding: 72px 0; } - @media #{$medium-and-intermediate} { + @media #{frameless.$medium-and-intermediate} { padding-top: 72px; } - @media #{$medium} { + @media #{frameless.$medium} { max-width: 460px; } - @media #{$small} { + @media #{frameless.$small} { max-width: 300px; padding-top: 32px; } @@ -1118,18 +1118,18 @@ p { padding-bottom: 0px; .subsection-tag { - background-color: $ui-purple; + background-color: colors.$ui-purple; } - @media #{$big} { + @media #{frameless.$big} { max-width: 620px; } - @media #{$intermediate} { + @media #{frameless.$intermediate} { max-width: 620px; } - @media #{$small} { + @media #{frameless.$small} { padding-top: 32px; align-items: flex-start; h2 { @@ -1144,7 +1144,7 @@ p { padding-bottom: 0px; position: relative; - @media #{$medium} { + @media #{frameless.$medium} { max-width: 760px; padding-top: 10px; @@ -1164,15 +1164,15 @@ p { width: 380px; margin: 10px; - @media #{$intermediate} { + @media #{frameless.$intermediate} { width: 300px; } - @media #{$medium} { + @media #{frameless.$medium} { width: 220px; } - @media #{$small} { + @media #{frameless.$small} { width: 300px; display: flex; flex-direction: column; @@ -1188,7 +1188,7 @@ p { left: 0px; top: 60px; - @media #{$medium} { + @media #{frameless.$medium} { width: 80px; top: 0px; @@ -1197,7 +1197,7 @@ p { } } - @media #{$small} { + @media #{frameless.$small} { width: 80px; top: 0px; @@ -1212,7 +1212,7 @@ p { right: 0px; bottom: 40px; - @media #{$medium} { + @media #{frameless.$medium} { width: 80px; img { @@ -1220,7 +1220,7 @@ p { } } - @media #{$small} { + @media #{frameless.$small} { width: 80px; img { @@ -1237,20 +1237,20 @@ p { &.bottom { padding-top: 0px; - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { padding-top: 32px; } } - @media #{$intermediate} { + @media #{frameless.$intermediate} { max-width: 620px; } - @media #{$medium} { + @media #{frameless.$medium} { max-width: 460px; } - @media #{$small} { + @media #{frameless.$small} { max-width: 300px; align-items: center; @@ -1261,7 +1261,7 @@ p { } .subsection-tag { - background-color: $ui-purple; + background-color: colors.$ui-purple; margin-bottom: 24px; } @@ -1276,7 +1276,7 @@ p { align-items: flex-start; text-align: left; - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { flex-direction: column; align-items: center; } @@ -1286,19 +1286,19 @@ p { margin-top: 0px; margin-right: 20px; - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { margin: 0px 0px 20px 0px; } - @media #{$intermediate} { + @media #{frameless.$intermediate} { width: 620px; } - @media #{$medium} { + @media #{frameless.$medium} { width: 460px; } - @media #{$small} { + @media #{frameless.$small} { width: 300px; } } @@ -1308,15 +1308,15 @@ p { align-self: center; max-width: 780px; - @media #{$intermediate} { + @media #{frameless.$intermediate} { width: 620px; } - @media #{$medium} { + @media #{frameless.$medium} { width: 460px; } - @media #{$small} { + @media #{frameless.$small} { width: 300px; } @@ -1327,7 +1327,7 @@ p { align-items: flex-start; margin-bottom: 20px; - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { flex-direction: column; align-items: center; margin-bottom: 48px; @@ -1349,7 +1349,7 @@ p { width: 300px; } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { margin-bottom: 32px; } } @@ -1360,7 +1360,7 @@ p { align-items: flex-start; width: 460px; - @media #{$small} { + @media #{frameless.$small} { width: 300px; } @@ -1382,7 +1382,7 @@ p { margin-bottom: 24px; img { - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { width: 460px; } } @@ -1391,7 +1391,7 @@ p { font-size: 0.875rem; line-height: 1.25rem; - @media #{$small} { + @media #{frameless.$small} { width: 300px; } } @@ -1409,12 +1409,12 @@ p { width: 620px; text-align: left; - @media #{$medium} { + @media #{frameless.$medium} { width: 460px; padding: 0px; } - @media #{$small} { + @media #{frameless.$small} { width: 100%; padding: 0px; } @@ -1424,20 +1424,20 @@ p { } .comment-text { - background-color: $ui-purple; + background-color: colors.$ui-purple; opacity: 75%; white-space: pre-line; margin-top: 8px; p { - color: $ui-white; + color: colors.$ui-white; line-height: 40px; font-size: 1.25rem; } } .comment-text, .comment-text::before, .comment-text::after { - border-color: $ui-purple; + border-color: colors.$ui-purple; } .comment-text { padding: 1.75rem; @@ -1454,14 +1454,14 @@ p { margin: 20px 0px; - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { flex-direction: column; } .icon-and-link { display: flex; align-items: center; - margin-right: $cols1; + margin-right: frameless.$cols1; img { margin-right: 5px; @@ -1516,15 +1516,15 @@ p { } .subsection-tag { - background-color: $ui-aqua; + background-color: colors.$ui-aqua; - @media #{$small} { + @media #{frameless.$small} { max-width: 250px; } &.collaborator { - color: $type-gray; - background-color: $ui-blue-10percent; + color: colors.$type-gray; + background-color: colors.$ui-blue-10percent; font-weight: normal; font-size: .75rem; } @@ -1544,13 +1544,13 @@ p { flex-direction: column; align-items: center; - @media #{$intermediate} { + @media #{frameless.$intermediate} { img { max-width: 300px; } } - @media #{$small} { + @media #{frameless.$small} { img { max-width: 300px; } @@ -1624,19 +1624,19 @@ p { img { border-radius: 8px; - @media #{$big} { + @media #{frameless.$big} { width: 180px; height: 100px; } - @media #{$intermediate} { + @media #{frameless.$intermediate} { width: 140px; height: 76px; } - @media #{$medium} { + @media #{frameless.$medium} { width: 220px; height: 120px; } - @media #{$small} { + @media #{frameless.$small} { width: 140px; height: 76px; } @@ -1668,7 +1668,7 @@ p { } } - @media #{$small} { + @media #{frameless.$small} { .subsection-tag { margin-left: -10px; } @@ -1679,26 +1679,26 @@ p { width: 620px; .comment-text { - background-color: $ui-aqua; + background-color: colors.$ui-aqua; white-space: pre-line; margin-top: 8px; p { - color: $ui-white; + color: colors.$ui-white; line-height: 40px; font-size: 1.25rem; } } .comment-text, .comment-text::before, .comment-text::after { - border-color: $ui-aqua; + border-color: colors.$ui-aqua; } .comment-text { padding: 1.75rem; } } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { .tools-LEGO-info, .tools-app-info { h4, p { text-align: left; @@ -1743,7 +1743,7 @@ p { } } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { .inner { max-width: 460px; } @@ -1824,7 +1824,7 @@ p { } } - @media #{$small} { + @media #{frameless.$small} { .tools-abhi-intro { width: 100%; text-align: left; @@ -1857,11 +1857,11 @@ p { background-position: center center; overflow: hidden; - @media #{$intermediate} { + @media #{frameless.$intermediate} { height: 330px; } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { height: 244px; } } @@ -1945,18 +1945,18 @@ p { margin: 24px; .comment-text { - background-color: $ui-blue; + background-color: colors.$ui-blue; white-space: pre-line; margin-top: 8px; p { - color: $ui-white; + color: colors.$ui-white; line-height: 40px; font-size: 1.25rem; } } .comment-text, .comment-text::before, .comment-text::after { - border-color: $ui-blue; + border-color: colors.$ui-blue; } .comment-text { padding: 1.75rem; @@ -1986,7 +1986,7 @@ p { margin-top: 1rem; } - @media #{$small} { + @media #{frameless.$small} { img { width: 300px; } @@ -2019,13 +2019,13 @@ p { } } - @media #{$intermediate} { + @media #{frameless.$intermediate} { .community-moderation, .community-guidelines, .community-engagement { width: 620px; } } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { .inner { max-width: 620px; } @@ -2078,7 +2078,7 @@ p { } } - @media #{$small} { + @media #{frameless.$small} { .inner { overflow: hidden; } @@ -2134,7 +2134,7 @@ p { background-image: url("/images/annual-report/initiatives/Abhi Video Splash.svg"); .button { - background-color: $ui-aqua; + background-color: colors.$ui-aqua; } } @@ -2142,7 +2142,7 @@ p { background-image: url("/images/annual-report/initiatives/schools/CPS Story/CPS Video Splash.svg"); .button { - background-color: $ui-purple; + background-color: colors.$ui-purple; } } } @@ -2154,12 +2154,12 @@ p { padding: 80px 0; } - background-color: $header-gray; + background-color: colors.$header-gray; width: 100%; - color: $ui-white; + color: colors.$ui-white; h2, p { - color: $ui-white; + color: colors.$ui-white; } h2 { @@ -2183,8 +2183,8 @@ p { } .financials-button { - background-color: $ui-white; - color: $ui-blue; + background-color: colors.$ui-white; + color: colors.$ui-blue; padding: 20px; border-radius: 6px; margin: 48px 0 28px 0; @@ -2202,14 +2202,14 @@ p { } } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { .inner { max-width: 620px; padding: 72px 0; } } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { .inner { max-width: 460px; padding: 64px 0; @@ -2220,7 +2220,7 @@ p { } } - @media #{$small} { + @media #{frameless.$small} { .inner { max-width: 300px; width: 100%; @@ -2237,11 +2237,11 @@ p { } .subsection-tag { - color: $ui-white; + color: colors.$ui-white; font-size: 1rem; font-weight: bold; - background-color: $ui-blue; + background-color: colors.$ui-blue; text-align: center; border-radius: 36px; @@ -2251,7 +2251,7 @@ p { } .supporters-section { - background-color: $ui-blue-10percent; + background-color: colors.$ui-blue-10percent; padding: 104px 0 52px 0; .inner { @@ -2291,7 +2291,7 @@ p { } .subsection-tag { - background-color: $ui-orange; + background-color: colors.$ui-orange; } .supporters-subsection { @@ -2337,7 +2337,7 @@ p { } .comment-text { - background-color: $ui-white; + background-color: colors.$ui-white; text-align: left; padding: 20px; @@ -2354,7 +2354,7 @@ p { hr { border: 0; height: 0; - border-top: 1px solid $box-shadow-light-gray; + border-top: 1px solid colors.$box-shadow-light-gray; margin-bottom: 2rem; } @@ -2373,7 +2373,7 @@ p { } } } - @media #{$big} { + @media #{frameless.$big} { .ds-info { flex-direction: column; text-align: center; @@ -2382,7 +2382,7 @@ p { } } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { .inner { max-width: 620px; } @@ -2422,7 +2422,7 @@ p { } } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { .supporters-subsection { margin: 0; } @@ -2444,7 +2444,7 @@ p { } } - @media #{$small} { + @media #{frameless.$small} { .supporters-subsection { width: 100% } @@ -2461,7 +2461,7 @@ p { } .leadership-section { - background-color: $ui-blue-10percent; + background-color: colors.$ui-blue-10percent; .inner { padding: 76px 0; @@ -2496,7 +2496,7 @@ p { .avatar-item { img { - background-color: $ui-blue-10percent; + background-color: colors.$ui-blue-10percent; } .avatar-text { @@ -2522,7 +2522,7 @@ p { } .donate-section { - background-color: $ui-aqua; + background-color: colors.$ui-aqua; .donate-info { justify-content: center; @@ -2534,14 +2534,14 @@ p { height: 300px; } - @media #{$intermediate} { + @media #{frameless.$intermediate} { img { width: 220px; height: 220px; } } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { align-items: center; } } @@ -2550,21 +2550,21 @@ p { margin-left: 20px; h2, p { - color: $ui-white; + color: colors.$ui-white; } width: 460px; - @media #{$intermediate} { + @media #{frameless.$intermediate} { text-align: left; } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { margin-left: 0px; text-align: center; } - @media #{$small} { + @media #{frameless.$small} { width: 300px; } @@ -2572,8 +2572,8 @@ p { } .donate-button { - background-color: $ui-white; - color: $ui-blue; + background-color: colors.$ui-white; + color: colors.$ui-blue; height: 66px; width: 176px; padding: 0px; @@ -2586,7 +2586,7 @@ p { line-height: 29px; a { - color: $ui-blue; + color: colors.$ui-blue; } span { @@ -2599,13 +2599,13 @@ p { position: fixed; top: 50px; z-index: 9; - box-shadow: 0 0 3px $box-shadow-gray; - background-color: $ui-blue-dark; + box-shadow: 0 0 3px colors.$box-shadow-gray; + background-color: colors.$ui-blue-dark; padding: 0; width: 100%; height: 58px; - color: $type-white; + color: colors.$type-white; font-size: .85rem; font-weight: bold; @@ -2616,11 +2616,11 @@ p { a { text-decoration: none; white-space: nowrap; - color: $type-white; + color: colors.$type-white; font-size: .85rem; &.selectedItem, &:hover { - border-bottom: 1px solid $ui-white; + border-bottom: 1px solid colors.$ui-white; } } @@ -2632,7 +2632,7 @@ p { height: 58px; p { - color: $ui-white; + color: colors.$ui-white; font-weight: bold; } @@ -2656,11 +2656,11 @@ p { hr { border: 0; height: 0; - border-top: 1px solid $box-shadow-light-gray; + border-top: 1px solid colors.$box-shadow-light-gray; margin-top: 0; } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { height: auto; .flex-row { @@ -2673,12 +2673,12 @@ p { a { padding: 10px; margin: 5px 10px 5px 0px; - border: 1px solid $box-shadow-light-gray; + border: 1px solid colors.$box-shadow-light-gray; border-radius: 4px; &.selectedItem, &:hover { - border-bottom: 1px solid $box-shadow-light-gray; - background-color: $box-shadow-light-gray; + border-bottom: 1px solid colors.$box-shadow-light-gray; + background-color: colors.$box-shadow-light-gray; } } } diff --git a/src/views/annual-report/2020/annual-report.scss b/src/views/annual-report/2020/annual-report.scss index a217b6cf93d..a5c8b1d9d14 100644 --- a/src/views/annual-report/2020/annual-report.scss +++ b/src/views/annual-report/2020/annual-report.scss @@ -1,14 +1,15 @@ -@import "../../../colors"; -@import "../../../frameless"; +@use "sass:color"; +@use "../../../colors"; +@use "../../../frameless"; -$base-bg: $ui-white; +$base-bg: colors.$ui-white; $annual-report-aqua: #088763; $annual-report-teal: #297EA4; $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); +colors.$ui-purple-dark: hsla(260, 55%, 55%, 1); // $motion-blue-3 #3373CC .adaptation .button{ @@ -16,11 +17,11 @@ $ui-purple-dark: hsla(260, 55%, 55%, 1); } .connectivity .button{ - background-color: $ui-purple-dark; + background-color: colors.$ui-purple-dark; } #view { - background-color: $ui-white; + background-color: colors.$ui-white; padding: 0; width: 100%; } @@ -63,7 +64,7 @@ p a { a, a:link, a:visited, a:active{ cursor: pointer; - color: $motion-blue-3; + color: colors.$motion-blue-3; } .bold { @@ -77,9 +78,9 @@ a, a:link, a:visited, a:active{ margin-top: 1rem; } -@media #{$small} { +@media #{frameless.$small} { .inner { - width: $cols4; + width: frameless.$cols4; } h1 { @@ -94,7 +95,7 @@ a, a:link, a:visited, a:active{ background-color: $annual-report-teal; h1, h2, p { - color: $ui-white; + color: colors.$ui-white; } @media #{$masthead-breakpoint} { @@ -116,7 +117,7 @@ a, a:link, a:visited, a:active{ font-weight: bold; } - @media #{$big} { + @media #{frameless.$big} { .masthead-content { max-width: 500px; text-align: left; @@ -144,19 +145,19 @@ a, a:link, a:visited, a:active{ } } - @media #{$intermediate} { + @media #{frameless.$intermediate} { .masthead-content, img { max-width: 620px; } } - @media #{$medium} { + @media #{frameless.$medium} { .masthead-content, img { max-width: 460px; } } - @media #{$small} { + @media #{frameless.$small} { .masthead-content, img { max-width: 300px; } @@ -173,17 +174,17 @@ a, a:link, a:visited, a:active{ .message-content{ align-items: flex-start; - @media #{$big} { + @media #{frameless.$big} { h2 { max-width: 300px; } } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { align-items: center; } - @media #{$medium-and-intermediate} { + @media #{frameless.$medium-and-intermediate} { text-align: left; h2 { max-width: 460px; @@ -191,7 +192,7 @@ a, a:link, a:visited, a:active{ } } - @media #{$small} { + @media #{frameless.$small} { p { text-align: left; } @@ -211,7 +212,7 @@ a, a:link, a:visited, a:active{ margin-right: 20px; } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { flex-direction: column; img { max-width: 275px; @@ -219,7 +220,7 @@ a, a:link, a:visited, a:active{ } } - @media #{$medium} { + @media #{frameless.$medium} { max-width: 460px; } @@ -232,11 +233,11 @@ a, a:link, a:visited, a:active{ max-width: 620px; - @media #{$medium} { + @media #{frameless.$medium} { max-width: 460px; } - @media #{$small} { + @media #{frameless.$small} { max-width: 300px; } } @@ -264,7 +265,7 @@ a, a:link, a:visited, a:active{ margin-bottom: -140px; } - @media #{$small} { + @media #{frameless.$small} { img { width: 100px; @@ -274,7 +275,7 @@ a, a:link, a:visited, a:active{ } .mission-section { - background-color: $ui-blue-10percent; + background-color: colors.$ui-blue-10percent; display: flex; flex-direction: column; align-items: center; @@ -285,7 +286,7 @@ a, a:link, a:visited, a:active{ margin-top: 5px; } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { text-align: left; } @@ -306,28 +307,28 @@ a, a:link, a:visited, a:active{ flex-wrap: wrap; align-items: flex-start; - @media #{$intermediate} { + @media #{frameless.$intermediate} { margin-top: 96px 0 108px 0; } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { justify-content: center; } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { margin-top: 76px; align-items: center; } } .inner, .four-ps { - @media #{$intermediate} { + @media #{frameless.$intermediate} { width: 620px; } - @media #{$medium} { + @media #{frameless.$medium} { width: 460px; } - @media #{$small} { + @media #{frameless.$small} { width: 300px; } } @@ -347,7 +348,7 @@ a, a:link, a:visited, a:active{ margin-top: 0px; } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { padding: 0; width: 300px; background-position: center; @@ -362,16 +363,16 @@ a, a:link, a:visited, a:active{ } } - @media #{$intermediate} { + @media #{frameless.$intermediate} { height: 370px; } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { margin-top: 62px; height: 398px; } - @media #{$medium} { + @media #{frameless.$medium} { margin-right: 0; } @@ -389,11 +390,11 @@ a, a:link, a:visited, a:active{ margin-bottom: 0; } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { text-align: center; } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { margin: 0 auto; p { @@ -403,13 +404,13 @@ a, a:link, a:visited, a:active{ } } - @media #{$medium} { + @media #{frameless.$medium} { p { margin-top: 12px; } } - @media #{$small} { + @media #{frameless.$small} { p { margin-top: 5px; } @@ -437,11 +438,11 @@ a, a:link, a:visited, a:active{ margin-top: 112px; margin-right: 0; - @media #{$intermediate} { + @media #{frameless.$intermediate} { margin-top: 96px; } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { margin-top: 0; } } @@ -450,11 +451,11 @@ a, a:link, a:visited, a:active{ background-image: url("/images/annual-report/2020/mission-vision/Peers-Splash-Background.svg"); margin-top: -80px; - @media #{$intermediate} { + @media #{frameless.$intermediate} { margin-top: -72px; } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { margin-top: 0; } } @@ -464,11 +465,11 @@ a, a:link, a:visited, a:active{ margin-right: 0; margin-top: 32px; - @media #{$intermediate} { + @media #{frameless.$intermediate} { margin-top: 24px; } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { margin-top: 0; } } @@ -509,10 +510,10 @@ a, a:link, a:visited, a:active{ } background-color: $annual-report-teal; - color: $ui-white; + color: colors.$ui-white; h2, h3, h4, p { - color: $ui-white; + color: colors.$ui-white; } .reach-intro { @@ -553,7 +554,7 @@ a, a:link, a:visited, a:active{ width: 600px; } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { img { max-width: 100%; } @@ -567,9 +568,9 @@ a, a:link, a:visited, a:active{ .reach-map { width: 100%; - background-color: $ui-white; + background-color: colors.$ui-white; border-radius: 1rem; - color: $type-gray; + color: colors.$type-gray; padding-top: 48px; margin-top: 52px; text-align: center; @@ -580,11 +581,11 @@ a, a:link, a:visited, a:active{ align-items: center; h3, p { - color: $type-gray; + color: colors.$type-gray; padding: 0 48px; } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { width: 100%; border-radius: 0px; } @@ -595,7 +596,7 @@ a, a:link, a:visited, a:active{ border-radius: 25px; margin: 0 8px 3px; background: linear-gradient(90deg, rgba(46,142,184,0.05) 0%, rgba(46,142,184,1) 100%); - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { width: 300px; } } @@ -613,7 +614,7 @@ a, a:link, a:visited, a:active{ img { padding: 4px 8px; - @media #{$small} { + @media #{frameless.$small} { width: 240px; } } @@ -658,18 +659,18 @@ a, a:link, a:visited, a:active{ margin-top: 10px; img{ margin-right: 6px; - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { max-width: 30px; } } } - @media #{$small} { + @media #{frameless.$small} { margin-bottom: 64px; } } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { .inner { max-width: 620px; } @@ -688,7 +689,7 @@ a, a:link, a:visited, a:active{ } .bubble { - background-color: darken($annual-report-teal, 10%); + background-color: color.adjust($annual-report-teal, $lightness: -10%); border-radius: 50px; padding: 8px 36px; font-size: 1rem; @@ -704,7 +705,7 @@ a, a:link, a:visited, a:active{ } &.increase{ &.dark{ - background-color: darken($annual-report-teal, 15%); + background-color: color.adjust($annual-report-teal, $lightness: -15%); .million{ font-size: 1rem; margin: 0 3px; @@ -752,11 +753,11 @@ a, a:link, a:visited, a:active{ } &.connectivity{ - background-color: $ui-purple-dark; + background-color: colors.$ui-purple-dark; } &.community{ - background-color: $motion-blue-3; + background-color: colors.$motion-blue-3; } &.adaptation{ background-color: $annual-report-aqua; @@ -777,15 +778,15 @@ a, a:link, a:visited, a:active{ } &.increase{ - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { margin: -355px 0 0 187px; } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { margin: -315px 0 0 180px; } } - @media #{$small} { + @media #{frameless.$small} { font-size: 2.75rem; width: 300px; @@ -804,7 +805,7 @@ a, a:link, a:visited, a:active{ } img.comment-viz{ - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { max-width: 100%; width: 100%; } @@ -816,7 +817,7 @@ img.comment-viz{ margin-top: -44px; margin-left: 88px; - @media #{$medium} { + @media #{frameless.$medium} { margin-left: 32px; } } @@ -829,19 +830,19 @@ img.comment-viz{ display: flex; justify-content: flex-end; - @media #{$medium} { + @media #{frameless.$medium} { margin-right: 12px; } } } .reach-scratch-jr { - background-color: darken($annual-report-teal, 10%); - color: $ui-white; + background-color: color.adjust($annual-report-teal, $lightness: -10%); + color: colors.$ui-white; padding: 100px 0; h2, h3, h4, p { - color: $ui-white; + color: colors.$ui-white; } .inner { @@ -860,14 +861,14 @@ img.comment-viz{ } .increase-bubble { - background-color: darken($annual-report-teal, 15%); + background-color: color.adjust($annual-report-teal, $lightness: -15%); border-radius: 50px; padding: 8px 16px; font-size: 1rem; margin: 15px auto; } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { .inner { max-width: 620px; } @@ -878,7 +879,7 @@ img.comment-viz{ } } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { .inner { justify-content: center; } @@ -889,7 +890,7 @@ img.comment-viz{ } } - @media #{$small} { + @media #{frameless.$small} { padding: 84px 0 52px 0; } } @@ -920,7 +921,7 @@ img.comment-viz{ background-repeat: no-repeat; h4 { - color: $ui-white; + color: colors.$ui-white; word-break: break-word; } @@ -946,14 +947,14 @@ img.comment-viz{ h4{ color: black; } - @media #{$intermediate} { + @media #{frameless.$intermediate} { margin-top: 16px; } } } } - @media #{$big} { + @media #{frameless.$big} { .three-pillars { .pillar-splash { width: 244px; @@ -968,7 +969,7 @@ img.comment-viz{ } } - @media #{$intermediate} { + @media #{frameless.$intermediate} { .inner { max-width: 620px; } @@ -987,7 +988,7 @@ img.comment-viz{ } } - @media #{$medium} { + @media #{frameless.$medium} { .inner { max-width: 460px; } @@ -1016,7 +1017,7 @@ img.comment-viz{ } } - @media #{$small} { + @media #{frameless.$small} { .inner { max-width: 300px; } @@ -1051,18 +1052,18 @@ img.comment-viz{ padding: 92px 0; &.connectivity { - background-color: $ui-purple-dark; + background-color: colors.$ui-purple-dark; background-position: 50% 100%; } &.adaptation { - background-color: $ui-aqua-dark; + background-color: colors.$ui-aqua-dark; background-position: 50% 0%; margin: 70px 0; } &.community { - background-color: $motion-blue-3; + background-color: colors.$motion-blue-3; background-position: 50% 50%; } @@ -1071,7 +1072,7 @@ img.comment-viz{ text-align: center; h2, p { - color: $ui-white; + color: colors.$ui-white; } p { @@ -1079,15 +1080,15 @@ img.comment-viz{ line-height: 2.5rem; } - @media #{$intermediate} { + @media #{frameless.$intermediate} { max-width: 620px; } - @media #{$medium} { + @media #{frameless.$medium} { max-width: 460px; } - @media #{$small} { + @media #{frameless.$small} { max-width: 300px; } } @@ -1121,12 +1122,12 @@ img.comment-viz{ margin: 20px 0px; - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { flex-direction: column-reverse; } } } - @media #{$intermediate} { + @media #{frameless.$intermediate} { flex-direction: column; } .text{ @@ -1136,14 +1137,14 @@ img.comment-viz{ line-height: 2.5rem; } - @media #{$intermediate} { + @media #{frameless.$intermediate} { max-width: 620px; } } .images{ .flex-row{ max-width: 500px; - @media #{$intermediate} { + @media #{frameless.$intermediate} { justify-content: space-around; } } @@ -1173,7 +1174,7 @@ img.comment-viz{ line-height: 4.375rem; } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { margin: 0 0; } p { @@ -1184,27 +1185,27 @@ img.comment-viz{ } .bubble{ margin-left: 0px; - color: $ui-white; + color: colors.$ui-white; font-weight: bold; - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { margin-left: auto; } &.spotlight{ margin-left: 50px; - @media #{$intermediate-and-smaller}{ + @media #{frameless.$intermediate-and-smaller}{ margin: auto; } &.india{ margin: 0 0 20px; - @media #{$intermediate-and-smaller}{ + @media #{frameless.$intermediate-and-smaller}{ margin: 0 auto 20px; } } } &.inverted{ - border: 2.5px solid $ui-purple-dark; - background-color: $ui-white; - color: $ui-purple-dark; + border: 2.5px solid colors.$ui-purple-dark; + background-color: colors.$ui-white; + color: colors.$ui-purple-dark; span{ &:before{ background: url("/images/annual-report/2020/Symbols-UI/Arrow_up_purple.svg"); @@ -1214,7 +1215,7 @@ img.comment-viz{ &.snapshot{ &.bump{ margin-left: 45px; - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { margin-left: auto; } } @@ -1241,7 +1242,7 @@ img.comment-viz{ margin-top: 56px; } - @media #{$small} { + @media #{frameless.$small} { h4 { margin-top: 35px; } @@ -1263,24 +1264,24 @@ img.comment-viz{ line-height: 3rem; } } - @media #{$big} { + @media #{frameless.$big} { max-width: 940px; padding: 72px 0; } - @media #{$medium-and-intermediate} { + @media #{frameless.$medium-and-intermediate} { padding-top: 72px; } - @media #{$intermediate} { + @media #{frameless.$intermediate} { max-width: 620px; } - @media #{$medium} { + @media #{frameless.$medium} { max-width: 460px; } - @media #{$small} { + @media #{frameless.$small} { max-width: 300px; padding-top: 32px; } @@ -1296,7 +1297,7 @@ img.comment-viz{ width: 100%; img{ width: 100%; - @media #{$intermediate-and-smaller}{ + @media #{frameless.$intermediate-and-smaller}{ margin-bottom: -40px; } } @@ -1307,7 +1308,7 @@ img.comment-viz{ max-width: 940px; width: 100%; text-align: left; - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { flex-direction: column; align-items: center; justify-content: center; @@ -1345,7 +1346,7 @@ img.comment-viz{ } } - @media #{$intermediate} { + @media #{frameless.$intermediate} { max-width: 620px; } } @@ -1370,13 +1371,13 @@ img.comment-viz{ } .year-in-review{ - background-color: $ui-blue-10percent; + background-color: colors.$ui-blue-10percent; position: relative; padding: 80px 0; display: flex; flex-direction: column; overflow-x: hidden; - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { padding: 80px 15px; } .upper-wave{ @@ -1459,7 +1460,7 @@ img.comment-viz{ .world{ max-width: 600px; margin: 50px auto; - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { width: calc(100% - 30px); padding: 0 15px; } @@ -1469,7 +1470,7 @@ img.comment-viz{ text-align: left; margin: 50px 0 0; - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { text-align: center; } } @@ -1480,7 +1481,7 @@ img.comment-viz{ display: flex; justify-content: space-between; margin-top: -400px; - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { display: none; } } @@ -1491,7 +1492,7 @@ img.comment-viz{ margin-top: -70px; z-index: 1; position: relative; - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { margin-top: 0px; } p{ @@ -1499,7 +1500,7 @@ img.comment-viz{ } } .download{ - color: $ui-white; + color: colors.$ui-white; font-weight: bold; border-radius: 4px; text-align: center; @@ -1511,7 +1512,7 @@ img.comment-viz{ align-items: center; justify-content: space-evenly; &.community{ - background-color: $motion-blue-3; + background-color: colors.$motion-blue-3; } } @@ -1520,7 +1521,7 @@ img.comment-viz{ width: 100%; margin-top: -70px; padding-top: 51.5%; - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { margin-top: -20px; } img{ @@ -1619,7 +1620,7 @@ img.comment-viz{ max-width: 100%; .community-quote { width: 44%; - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { width: 100%; } } @@ -1642,7 +1643,7 @@ img.comment-viz{ } .comment-text { - border: 1px solid $ui-mint-green; + border: 1px solid colors.$ui-mint-green; white-space: pre-line; margin-top: 8px; @@ -1652,24 +1653,24 @@ img.comment-viz{ } } .comment-text, .comment-text::before, .comment-text::after { - border-color: $ui-mint-green; + border-color: colors.$ui-mint-green; } // change colors for quotes in different sections .community.comment-text, .community.comment-text::before, .community.comment-text::after { - border-color: $motion-blue-3; + border-color: colors.$motion-blue-3; } .comment-text::before { - border-color: $ui-mint-green; + border-color: colors.$ui-mint-green; top: -1px; left: -11px; border-bottom-width: 12px; border-left-width: 10px; } .community.comment-text::before { - border-color: $motion-blue-3; + border-color: colors.$motion-blue-3; } .community.comment-text::after, .comment-text::after { - border-color: $ui-white; + border-color: colors.$ui-white; position: absolute; top: 0px; left: -10px; @@ -1682,13 +1683,13 @@ img.comment-viz{ } } - @media #{$intermediate} { + @media #{frameless.$intermediate} { .community-moderation, .community-guidelines, .community-engagement { width: 620px; } } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { .inner { max-width: 620px; } @@ -1719,7 +1720,7 @@ img.comment-viz{ } } - @media #{$small} { + @media #{frameless.$small} { .inner { overflow: hidden; } @@ -1750,11 +1751,11 @@ img.comment-viz{ display: flex; justify-content: center; margin-bottom: 72px; - @media #{$medium}{ + @media #{frameless.$medium}{ height: 400px; margin-bottom: 0px; } - @media #{$small}{ + @media #{frameless.$small}{ height: 300px; margin-bottom: 0px; } @@ -1776,11 +1777,11 @@ img.comment-viz{ align-items: center; justify-content: center; - @media #{$medium}{ + @media #{frameless.$medium}{ height: 400px; } - @media #{$small}{ + @media #{frameless.$small}{ height: 300px; } @@ -1812,11 +1813,11 @@ img.comment-viz{ width: 100%; max-width: 900px; margin: -50px auto 0; - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { margin-top: 0px; flex-direction: column; } - @media #{$small}{ + @media #{frameless.$small}{ background-size: auto; } .tweets{ @@ -1826,7 +1827,7 @@ img.comment-viz{ margin: auto; justify-content: space-around; align-items:flex-start; - @media #{$small} { + @media #{frameless.$small} { flex-direction: column; justify-content: center; align-items: center; @@ -1843,26 +1844,26 @@ img.comment-viz{ } .directors-message { + background-color: colors.$header-gray; + width: 100%; + color: colors.$ui-white; + .inner { max-width: 900px; padding: 80px 0; - @media #{$intermediate}{ + @media #{frameless.$intermediate}{ max-width: 640px; } - @media #{$medium}{ + @media #{frameless.$medium}{ max-width: 500px; } - @media #{$small}{ + @media #{frameless.$small}{ max-width: 300px; } } - background-color: $header-gray; - width: 100%; - color: $ui-white; - h2, p { - color: $ui-white; + color: colors.$ui-white; } h2 { @@ -1873,7 +1874,7 @@ img.comment-viz{ .pull-quote{ font-size: 1.5rem; line-height: 2.5rem; - @media #{$small}{ + @media #{frameless.$small}{ font-size: 24px; } &:before{ @@ -1885,7 +1886,7 @@ img.comment-viz{ background-repeat: no-repeat; margin-bottom: -60px; margin-left: -20px; - @media #{$intermediate-and-smaller}{ + @media #{frameless.$intermediate-and-smaller}{ margin-bottom: -75px; } } @@ -1894,7 +1895,7 @@ img.comment-viz{ .flex-content{ display: flex; justify-content: space-between; - @media #{$big}{ + @media #{frameless.$big}{ .header{ max-width: 300px; } @@ -1902,7 +1903,7 @@ img.comment-viz{ .text{ width: 60%; } - @media #{$intermediate-and-smaller}{ + @media #{frameless.$intermediate-and-smaller}{ flex-direction: column; .header, .text{ width: 100%; @@ -1922,10 +1923,10 @@ img.comment-viz{ margin-right: 15px; } h5{ - color: $ui-white; + color: colors.$ui-white; margin-bottom: 0px; text-align: left; - @media #{$small}{ + @media #{frameless.$small}{ margin-top: 0px; } } @@ -1944,15 +1945,15 @@ img.comment-viz{ flex-direction: column; text-align: left; - @media #{$intermediate} { + @media #{frameless.$intermediate} { max-width: 620px; } - @media #{$medium} { + @media #{frameless.$medium} { max-width: 460px; } - @media #{$small} { + @media #{frameless.$small} { max-width: 300px; } @@ -2027,7 +2028,7 @@ img.comment-viz{ } .subsection-tag { - background-color: $ui-orange; + background-color: colors.$ui-orange; } .supporters-subsection { @@ -2054,7 +2055,7 @@ img.comment-viz{ .comment-text { - background-color: $ui-white; + background-color: colors.$ui-white; text-align: left; padding: 20px; @@ -2071,7 +2072,7 @@ img.comment-viz{ hr { border: 0; height: 0; - border-top: 1px solid $box-shadow-light-gray; + border-top: 1px solid colors.$box-shadow-light-gray; margin-bottom: 2rem; } @@ -2090,7 +2091,7 @@ img.comment-viz{ } } } - @media #{$big} { + @media #{frameless.$big} { .ds-info { flex-direction: column; text-align: center; @@ -2099,7 +2100,7 @@ img.comment-viz{ } } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { .inner { max-width: 620px; } @@ -2134,7 +2135,7 @@ img.comment-viz{ } } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { .supporters-subsection { margin: 0; } @@ -2156,7 +2157,7 @@ img.comment-viz{ } } - @media #{$small} { + @media #{frameless.$small} { .supporters-subsection { width: 100% } @@ -2226,7 +2227,7 @@ img.comment-viz{ .avatar-item { img { - background-color: $ui-blue-10percent; + background-color: colors.$ui-blue-10percent; } .avatar-text { @@ -2271,14 +2272,14 @@ img.comment-viz{ height: 300px; } - @media #{$intermediate} { + @media #{frameless.$intermediate} { img { width: 220px; height: 220px; } } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { align-items: center; } } @@ -2287,21 +2288,21 @@ img.comment-viz{ margin-left: 20px; h2, p { - color: $ui-white; + color: colors.$ui-white; } width: 460px; - @media #{$intermediate} { + @media #{frameless.$intermediate} { text-align: left; } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { margin-left: 0px; text-align: center; } - @media #{$small} { + @media #{frameless.$small} { width: 300px; } @@ -2309,8 +2310,8 @@ img.comment-viz{ } .donate-button { - background-color: $ui-white; - color: $motion-blue-3; + background-color: colors.$ui-white; + color: colors.$motion-blue-3; height: 66px; width: 176px; padding: 0px; @@ -2323,7 +2324,7 @@ img.comment-viz{ line-height: 2rem; a { - color: $motion-blue-3; + color: colors.$motion-blue-3; } span { @@ -2336,13 +2337,13 @@ img.comment-viz{ position: fixed; top: 50px; z-index: 9; - box-shadow: 0 0 3px $box-shadow-gray; + box-shadow: 0 0 3px colors.$box-shadow-gray; background-color: $annual-report-teal; padding: 0; width: 100%; height: 58px; - color: $type-white; + color: colors.$type-white; font-size: .85rem; font-weight: bold; @@ -2353,11 +2354,11 @@ img.comment-viz{ a { text-decoration: none; white-space: nowrap; - color: $type-white; + color: colors.$type-white; font-size: .85rem; &.selectedItem, &:hover { - border-bottom: 1px solid $ui-white; + border-bottom: 1px solid colors.$ui-white; } } @@ -2369,7 +2370,7 @@ img.comment-viz{ height: 58px; p { - color: $ui-white; + color: colors.$ui-white; font-weight: bold; } @@ -2393,11 +2394,11 @@ img.comment-viz{ hr { border: 0; height: 0; - border-top: 1px solid $box-shadow-light-gray; + border-top: 1px solid colors.$box-shadow-light-gray; margin-top: 0; } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { height: auto; .flex-row { @@ -2410,12 +2411,12 @@ img.comment-viz{ a { padding: 10px; margin: 5px 10px 5px 0px; - border: 1px solid $box-shadow-light-gray; + border: 1px solid colors.$box-shadow-light-gray; border-radius: 4px; &.selectedItem, &:hover { - border-bottom: 1px solid $box-shadow-light-gray; - background-color: $box-shadow-light-gray; + border-bottom: 1px solid colors.$box-shadow-light-gray; + background-color: colors.$box-shadow-light-gray; } } } @@ -2430,7 +2431,7 @@ img.comment-viz{ .flex-row { justify-content: center; - @media #{$medium} { + @media #{frameless.$medium} { flex-direction: row; .thumbnail { @@ -2446,7 +2447,7 @@ img.comment-viz{ } .regular.between{ - @media #{$medium-and-smaller}{ + @media #{frameless.$medium-and-smaller}{ margin-top: 0px; } } diff --git a/src/views/annual-report/2020/country-blurb/country-blurb.scss b/src/views/annual-report/2020/country-blurb/country-blurb.scss index 62455d2eedb..18e5f6c3342 100644 --- a/src/views/annual-report/2020/country-blurb/country-blurb.scss +++ b/src/views/annual-report/2020/country-blurb/country-blurb.scss @@ -1,4 +1,4 @@ -@import "../../../../frameless"; +@use "../../../../frameless"; .country-blurb{ display: flex; @@ -10,12 +10,12 @@ &.reverse { flex-direction: row-reverse; - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { flex-direction: column-reverse; } } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { // If we want to support both image on top and image on bottom, // we can use the regular & reverse classNames flex-direction: column-reverse; diff --git a/src/views/annual-report/2021/annual-report.scss b/src/views/annual-report/2021/annual-report.scss index 3e485d34a8b..a355e05a2df 100644 --- a/src/views/annual-report/2021/annual-report.scss +++ b/src/views/annual-report/2021/annual-report.scss @@ -1,13 +1,14 @@ -@import "../../../colors"; -@import "../../../frameless"; +@use "sass:color"; +@use "../../../colors"; +@use "../../../frameless"; -$base-bg: $ui-white; +$base-bg: colors.$ui-white; $annual-report-aqua: #088763; $annual-report-green: #2B732B; $annual-report-teal: #297EA4; $timeline-breakpoint: "only screen and (max-width : 1030px)"; -$ui-purple-dark: hsla(260, 55%, 55%, 1); +colors.$ui-purple-dark: hsla(260, 55%, 55%, 1); body{ background-color: $annual-report-aqua; @@ -17,11 +18,11 @@ body{ background-color: $annual-report-green; } .community .button{ - background-color: $ui-purple-dark; + background-color: colors.$ui-purple-dark; } #view { - background-color: $ui-white; + background-color: colors.$ui-white; padding: 0; width: 100%; overflow: hidden; @@ -42,7 +43,7 @@ h3 { line-height: 2.5rem; &.special{ margin: 50px auto -50px; - @media #{$intermediate-and-smaller}{ + @media #{frameless.$intermediate-and-smaller}{ margin: 50px auto 30px; } } @@ -75,7 +76,7 @@ p a { a, a:link, a:visited, a:active{ cursor: pointer; - color: $ui-purple-dark; + color: colors.$ui-purple-dark; } .bold { @@ -98,7 +99,7 @@ a, a:link, a:visited, a:active{ } } -@media #{$small} { +@media #{frameless.$small} { h1 { font-size: 3.25rem; @@ -112,10 +113,10 @@ a, a:link, a:visited, a:active{ background-color: $annual-report-aqua; h1, h2, p { - color: $ui-white; + color: colors.$ui-white; } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { .inner { width: 100%; } @@ -136,7 +137,7 @@ a, a:link, a:visited, a:active{ font-weight: bold; } - @media #{$big} { + @media #{frameless.$big} { .masthead-content { max-width: 500px; text-align: left; @@ -147,7 +148,7 @@ a, a:link, a:visited, a:active{ } } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { flex-direction: column; align-items: center; @@ -164,19 +165,19 @@ a, a:link, a:visited, a:active{ } } - @media #{$intermediate} { + @media #{frameless.$intermediate} { .masthead-content, img { max-width: 520px; } } - @media #{$medium} { + @media #{frameless.$medium} { .masthead-content, img { max-width: 460px; } } - @media #{$small} { + @media #{frameless.$small} { .masthead-content, img { max-width: 300px; } @@ -190,7 +191,7 @@ a, a:link, a:visited, a:active{ .message-content{ align-items: flex-start; - @media #{$big} { + @media #{frameless.$big} { h2 { max-width: 300px; overflow-wrap: break-word; @@ -203,11 +204,11 @@ a, a:link, a:visited, a:active{ } } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { align-items: center; } - @media #{$medium-and-intermediate} { + @media #{frameless.$medium-and-intermediate} { text-align: left; h2 { max-width: 460px; @@ -215,7 +216,7 @@ a, a:link, a:visited, a:active{ } } - @media #{$small} { + @media #{frameless.$small} { p { text-align: left; } @@ -236,7 +237,7 @@ a, a:link, a:visited, a:active{ margin-right: 20px; } - @media #{$small} { + @media #{frameless.$small} { flex-direction: column; img { max-width: 275px; @@ -244,7 +245,7 @@ a, a:link, a:visited, a:active{ } } - @media #{$medium} { + @media #{frameless.$medium} { max-width: 460px; } @@ -261,11 +262,11 @@ a, a:link, a:visited, a:active{ max-width: 620px; - @media #{$medium} { + @media #{frameless.$medium} { max-width: 460px; } - @media #{$small} { + @media #{frameless.$small} { max-width: 300px; } } @@ -296,7 +297,7 @@ a, a:link, a:visited, a:active{ text-align: left; margin-bottom: 40px; font-weight: bold; - @media #{$small}{ + @media #{frameless.$small}{ font-size: 24px; } &:before{ @@ -308,7 +309,7 @@ a, a:link, a:visited, a:active{ background-repeat: no-repeat; margin-bottom: -60px; margin-left: -20px; - @media #{$intermediate-and-smaller}{ + @media #{frameless.$intermediate-and-smaller}{ margin-bottom: -75px; } } @@ -319,7 +320,7 @@ a, a:link, a:visited, a:active{ background-image: url("/images/annual-report/2021/1_SEC Section/quote (blue).svg"); } - @media #{$medium-and-smaller}{ + @media #{frameless.$medium-and-smaller}{ max-width: 460px; width: 100%; margin-bottom: 15px; @@ -333,7 +334,7 @@ a, a:link, a:visited, a:active{ margin-bottom: -75px; background-image: url("/images/annual-report/2021/2_Access Section/quote (green).svg"); } - @media #{$medium-and-smaller}{ + @media #{frameless.$medium-and-smaller}{ margin-bottom: 15px; } } @@ -373,32 +374,32 @@ a, a:link, a:visited, a:active{ &.right{ text-align: right; margin-bottom: 30px; - @media #{$medium-and-smaller}{ + @media #{frameless.$medium-and-smaller}{ margin-bottom: 40px; } } - @media #{$medium-and-smaller}{ + @media #{frameless.$medium-and-smaller}{ margin-bottom: 40px; } } .mission-section { - background-color: $ui-blue-10percent; + background-color: colors.$ui-blue-10percent; display: flex; flex-direction: column; align-items: center; - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { text-align: left; } .inner { padding-top: 172px; width: 620px; - @media #{$medium} { + @media #{frameless.$medium} { padding-top: 100px; } - @media #{$small} { + @media #{frameless.$small} { padding-top: 80px; } h5{ @@ -420,24 +421,24 @@ a, a:link, a:visited, a:active{ align-items: flex-start; justify-content: space-between; - @media #{$intermediate} { + @media #{frameless.$intermediate} { margin-top: 96px 0 108px 0; } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { margin-top: 10px; align-items: center; } } .inner, .four-ps { - @media #{$intermediate} { + @media #{frameless.$intermediate} { width: 620px; } - @media #{$medium} { + @media #{frameless.$medium} { width: 460px; } - @media #{$small} { + @media #{frameless.$small} { width: 300px; } } @@ -451,15 +452,15 @@ a, a:link, a:visited, a:active{ .inner{ padding-top: 40px; - @media #{$big}{ + @media #{frameless.$big}{ width: 100%; } - @media #{$intermediate}{ + @media #{frameless.$intermediate}{ width: 100%; } } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { padding: 0; background-position: center; display: flex; @@ -482,7 +483,7 @@ a, a:link, a:visited, a:active{ // // height: 398px; // } - @media #{$medium} { + @media #{frameless.$medium} { margin-right: 0; } @@ -515,11 +516,11 @@ a, a:link, a:visited, a:active{ margin-bottom: 0; } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { text-align: center; } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { margin: 0 auto; p { @@ -529,13 +530,13 @@ a, a:link, a:visited, a:active{ } } - @media #{$medium} { + @media #{frameless.$medium} { p { margin-top: 12px; } } - @media #{$small} { + @media #{frameless.$small} { p { margin-top: 5px; } @@ -572,6 +573,9 @@ a, a:link, a:visited, a:active{ } .reach-section { + background-color: $annual-report-aqua; + color: colors.$ui-white; + position: relative; padding-bottom: 60px; .transition-images { @@ -614,7 +618,7 @@ a, a:link, a:visited, a:active{ padding-bottom: 0px; .inner{ max-width: 660px; - @media #{$intermediate} { + @media #{frameless.$intermediate} { .reach-translation{ flex-direction: row; } @@ -628,11 +632,8 @@ a, a:link, a:visited, a:active{ } } - background-color: $annual-report-aqua; - color: $ui-white; - h2, h3, h4, p { - color: $ui-white; + color: colors.$ui-white; } h2{ @@ -648,7 +649,7 @@ a, a:link, a:visited, a:active{ max-width: 620px; margin: auto; - @media #{$small} { + @media #{frameless.$small} { margin: auto 8px; } } @@ -678,7 +679,7 @@ a, a:link, a:visited, a:active{ width: 600px; } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { img { max-width: 100%; } @@ -706,18 +707,18 @@ a, a:link, a:visited, a:active{ margin-top: 10px; img{ margin-right: 6px; - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { max-width: 30px; } } } - @media #{$small} { + @media #{frameless.$small} { margin-bottom: 64px; } } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { .inner { max-width: 620px; } @@ -738,7 +739,7 @@ a, a:link, a:visited, a:active{ .bubble { &.left-align{ margin: 50px 0 20px 0; - @media #{$medium-and-smaller}{ + @media #{frameless.$medium-and-smaller}{ margin: 50px auto 20px auto; } } @@ -761,17 +762,17 @@ a, a:link, a:visited, a:active{ width: 100%; max-width: 840px; margin: auto; - @media #{$intermediate-and-smaller}{ + @media #{frameless.$intermediate-and-smaller}{ width: calc(100% - 30px); text-align: left; } - @media #{$small}{ + @media #{frameless.$small}{ flex-direction: column; } .org-list{ width: 48%; text-align: left; - @media #{$small}{ + @media #{frameless.$small}{ width: 100%; } } @@ -813,7 +814,7 @@ a, a:link, a:visited, a:active{ margin-top: -5px; } - @media #{$small} { + @media #{frameless.$small} { font-size: 2.75rem; width: 300px; @@ -845,7 +846,7 @@ a, a:link, a:visited, a:active{ text-align: left; width: 300px; } - @media #{$big} { + @media #{frameless.$big} { img, p, h3, h4{ margin: 0 80px; } @@ -854,13 +855,13 @@ a, a:link, a:visited, a:active{ .datapoint.world{ margin-top: 68px; - @media #{$medium}{ + @media #{frameless.$medium}{ img, p { margin: 0 0; width: 40%; } } - @media #{$small} { + @media #{frameless.$small} { flex-direction: column; img + p { margin-top: 25px; @@ -874,7 +875,7 @@ a, a:link, a:visited, a:active{ text-align: left; margin-left: 40px; margin-bottom: 10px; - @media #{$big} { + @media #{frameless.$big} { margin: 0 80px; } } @@ -882,14 +883,14 @@ a, a:link, a:visited, a:active{ font-size: 16px; } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { flex-direction: column; margin-top: 75px; } } img.comment-viz{ - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { max-width: 100%; width: 100%; } @@ -901,7 +902,7 @@ img.comment-viz{ margin-top: -44px; margin-left: 88px; - @media #{$medium} { + @media #{frameless.$medium} { margin-left: 32px; } } @@ -914,7 +915,7 @@ img.comment-viz{ display: flex; justify-content: flex-end; - @media #{$medium} { + @media #{frameless.$medium} { margin-right: 12px; } } @@ -922,11 +923,11 @@ img.comment-viz{ .reach-scratch-jr { background-color: $annual-report-aqua; - color: $ui-white; + color: colors.$ui-white; padding: 100px 0; h2, h3, h4, p { - color: $ui-white; + color: colors.$ui-white; } .inner { @@ -945,14 +946,14 @@ img.comment-viz{ } .increase-bubble { - background-color: darken($annual-report-teal, 15%); + background-color: color.adjust($annual-report-teal, $lightness: -15%); border-radius: 50px; padding: 8px 16px; font-size: 1rem; margin: 15px auto; } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { .inner { max-width: 620px; } @@ -963,7 +964,7 @@ img.comment-viz{ } } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { .inner { justify-content: center; } @@ -974,7 +975,7 @@ img.comment-viz{ } } - @media #{$small} { + @media #{frameless.$small} { padding: 84px 0 52px 0; } } @@ -1008,7 +1009,7 @@ img.comment-viz{ // margin-bottom: 60px; h4 { - color: $ui-white; + color: colors.$ui-white; word-break: break-word; } @@ -1026,12 +1027,12 @@ img.comment-viz{ width: 100%; justify-content: space-between; } - @media #{$small} { + @media #{frameless.$small} { height: 66px; } } - @media #{$big} { + @media #{frameless.$big} { .three-pillars { .pillar-splash { width: 228px; @@ -1046,7 +1047,7 @@ img.comment-viz{ } } - @media #{$intermediate} { + @media #{frameless.$intermediate} { .inner { max-width: 620px; } @@ -1068,7 +1069,7 @@ img.comment-viz{ } } - @media #{$medium} { + @media #{frameless.$medium} { .inner { max-width: 460px; } @@ -1091,7 +1092,7 @@ img.comment-viz{ } } - @media #{$small} { + @media #{frameless.$small} { .inner { max-width: 300px; } @@ -1121,7 +1122,7 @@ img.comment-viz{ padding: 92px 25px; &.SEC { - background-color: $motion-blue-3; + background-color: colors.$motion-blue-3; background-position: 50% 100%; } @@ -1132,7 +1133,7 @@ img.comment-viz{ } &.community { - background-color: $ui-purple-dark; + background-color: colors.$ui-purple-dark; background-position: 50% 50%; } @@ -1141,7 +1142,7 @@ img.comment-viz{ text-align: center; h2, p { - color: $ui-white; + color: colors.$ui-white; } p { @@ -1149,15 +1150,15 @@ img.comment-viz{ line-height: 2.5rem; } - @media #{$intermediate} { + @media #{frameless.$intermediate} { max-width: 620px; } - @media #{$medium} { + @media #{frameless.$medium} { max-width: 460px; } - @media #{$small} { + @media #{frameless.$small} { max-width: 300px; } } @@ -1175,7 +1176,7 @@ img.comment-viz{ } &.lab{ - @media #{$small}{ + @media #{frameless.$small}{ width: calc(100% - 50px); margin: auto; .images{ @@ -1183,12 +1184,12 @@ img.comment-viz{ } } &.second{ - @media #{$intermediate} { + @media #{frameless.$intermediate} { .inner .two-wide .text{ max-width: 260px; } } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { .inner .two-wide .text{ max-width: 100%; } @@ -1216,12 +1217,12 @@ img.comment-viz{ margin: 20px 0px; - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { flex-direction: column-reverse; } } } - @media #{$medium} { + @media #{frameless.$medium} { flex-direction: column; } .text{ @@ -1232,14 +1233,14 @@ img.comment-viz{ margin-top: 8px; } - @media #{$intermediate} { + @media #{frameless.$intermediate} { max-width: 620px; } } .images{ .flex-row{ max-width: 500px; - @media #{$intermediate} { + @media #{frameless.$intermediate} { justify-content: space-around; } } @@ -1262,7 +1263,7 @@ img.comment-viz{ line-height: 4.375rem; } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { margin: 0 0; } p { @@ -1285,7 +1286,7 @@ img.comment-viz{ max-width: 550px; text-align: left; padding: 0 15px; - @media #{$small}{ + @media #{frameless.$small}{ width: 100%; } } @@ -1294,7 +1295,7 @@ img.comment-viz{ max-width: 170px; // display: flex; margin-top: -15px; - @media #{$medium-and-smaller}{ + @media #{frameless.$medium-and-smaller}{ max-width: 100%; margin-top: 0px; } @@ -1303,7 +1304,7 @@ img.comment-viz{ text-align: center; font-weight: 500; margin-bottom: 30px; - @media #{$medium-and-smaller}{ + @media #{frameless.$medium-and-smaller}{ margin: 0 20px 50px; } .stat-num{ @@ -1334,14 +1335,14 @@ img.comment-viz{ } .bubble{ margin-left: 0px; - color: $ui-white; + color: colors.$ui-white; font-weight: bold; - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { margin-left: auto; } &.spotlight{ // margin-left: 50px; - @media #{$medium-and-smaller}{ + @media #{frameless.$medium-and-smaller}{ + h4{ text-align: center; margin-top: 15px; @@ -1354,9 +1355,9 @@ img.comment-viz{ } } &.inverted{ - border: 2.5px solid $ui-purple-dark; - background-color: $ui-white; - color: $ui-purple-dark; + border: 2.5px solid colors.$ui-purple-dark; + background-color: colors.$ui-white; + color: colors.$ui-purple-dark; span{ &:before{ background: url("/images/annual-report/2020/Symbols-UI/Arrow_up_purple.svg"); @@ -1366,7 +1367,7 @@ img.comment-viz{ &.snapshot{ &.bump{ margin-left: 45px; - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { margin-left: auto; } } @@ -1403,7 +1404,7 @@ img.comment-viz{ margin-top: 56px; } - @media #{$small} { + @media #{frameless.$small} { h4 { margin-top: 35px; } @@ -1428,33 +1429,33 @@ img.comment-viz{ &.stacked{ margin-top: 0px; padding-top: 0px; - @media #{$medium-and-smaller}{ + @media #{frameless.$medium-and-smaller}{ max-width: 460px; width: 100%; } - @media #{$small}{ + @media #{frameless.$small}{ max-width: calc(100% - 50px); width: 100%; } } - @media #{$big} { + @media #{frameless.$big} { max-width: 840px; padding: 72px 0; } - @media #{$medium-and-intermediate} { + @media #{frameless.$medium-and-intermediate} { padding: 72px 0; } - @media #{$intermediate} { + @media #{frameless.$intermediate} { width: calc(100% - 100px); } - @media #{$medium} { + @media #{frameless.$medium} { max-width: 540px; } - @media #{$small} { + @media #{frameless.$small} { max-width: calc(100% - 50px); margin: auto; padding-top: 32px; @@ -1464,11 +1465,12 @@ img.comment-viz{ .two-wide{ margin: 50px auto 0px; max-width: 840px; + justify-content: space-between; &.scratch-lab-intro { margin: 24px auto 16px; - @media #{$big}{ + @media #{frameless.$big}{ .text { max-width: 380px; } @@ -1478,8 +1480,8 @@ img.comment-viz{ .bubble{ margin: -25px 0 40px; } - justify-content: space-between; - @media #{$medium-and-smaller}{ + + @media #{frameless.$medium-and-smaller}{ .bubble{ margin: -25px auto 30px; } @@ -1496,7 +1498,7 @@ img.comment-viz{ .text{ max-width: 480px; width: 100%; - @media #{$intermediate}{ + @media #{frameless.$intermediate}{ max-width: 230px; text-align: left; } @@ -1515,11 +1517,11 @@ img.comment-viz{ width: 100%; img{ width: 100%; - @media #{$intermediate}{ + @media #{frameless.$intermediate}{ margin-bottom: -40px; } } - @media #{$medium-and-smaller}{ + @media #{frameless.$medium-and-smaller}{ + p { text-align: left; } @@ -1560,7 +1562,7 @@ img.comment-viz{ } } + p { - @media #{$intermediate}{ + @media #{frameless.$intermediate}{ text-align: left; } } @@ -1570,7 +1572,7 @@ img.comment-viz{ max-width: 940px; width: 100%; text-align: left; - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { flex-direction: column; align-items: center; justify-content: center; @@ -1616,7 +1618,7 @@ img.comment-viz{ } } - @media #{$intermediate} { + @media #{frameless.$intermediate} { .text{ max-width: 360px; } @@ -1651,7 +1653,7 @@ img.comment-viz{ justify-content: space-between; height: 145px; align-items: flex-start; - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { margin: 0 auto -251px; height: 119px; } @@ -1661,12 +1663,12 @@ img.comment-viz{ // width: 100%; // } .sparkle-left{ - @media #{$medium-and-smaller}{ + @media #{frameless.$medium-and-smaller}{ margin-left: -40px; } } .sparkle-right{ - @media #{$medium-and-smaller}{ + @media #{frameless.$medium-and-smaller}{ margin-right: -40px; } } @@ -1793,7 +1795,7 @@ img.comment-viz{ .world{ max-width: 700px; margin: 50px auto; - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { width: calc(100% - 30px); padding: 0 15px; } @@ -1808,7 +1810,7 @@ img.comment-viz{ text-align: left; margin: 50px 0 0; - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { text-align: center; } } @@ -1819,7 +1821,7 @@ img.comment-viz{ display: flex; justify-content: space-between; margin-top: -400px; - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { display: none; } } @@ -1830,7 +1832,7 @@ img.comment-viz{ margin-top: -70px; z-index: 1; position: relative; - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { margin-top: 0px; } p{ @@ -1838,7 +1840,7 @@ img.comment-viz{ } } .download{ - color: $ui-white; + color: colors.$ui-white; font-weight: bold; border-radius: 4px; text-align: center; @@ -1850,7 +1852,7 @@ img.comment-viz{ align-items: center; justify-content: space-evenly; &.community{ - background-color: $motion-blue-3; + background-color: colors.$motion-blue-3; } } @@ -1859,7 +1861,7 @@ img.comment-viz{ width: 100%; margin-top: -70px; padding-top: 51.5%; - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { margin-top: -20px; } img{ @@ -1870,7 +1872,7 @@ img.comment-viz{ } } .inner { - @media #{$big}{ + @media #{frameless.$big}{ width: 850px; } &.center{ @@ -1879,7 +1881,7 @@ img.comment-viz{ max-width: 650px; margin: auto; margin-top: 70px; - @media #{$small}{ + @media #{frameless.$small}{ width: calc(100% - 50px); max-width: 300px; margin: auto; @@ -1902,7 +1904,7 @@ img.comment-viz{ line-height: 2.5rem; } } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { width: 100%; &.regular { flex-direction: row; @@ -1911,7 +1913,7 @@ img.comment-viz{ flex-direction: row-reverse; } } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { .half{ width: 100%; @@ -1977,14 +1979,14 @@ img.comment-viz{ .sds-list { justify-content: space-between; margin-top: 15px; - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { max-width: 100%; justify-content: center; } .sds-tile { width: 31%; margin: 0px; - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { width: 200px; margin: 8px; } @@ -2009,7 +2011,7 @@ img.comment-viz{ max-width: 100%; .community-quote { width: 44%; - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { width: 100%; } } @@ -2032,7 +2034,7 @@ img.comment-viz{ } .comment-text { - border: 1px solid $ui-mint-green; + border: 1px solid colors.$ui-mint-green; white-space: pre-line; margin-top: 8px; @@ -2042,24 +2044,24 @@ img.comment-viz{ } } .comment-text, .comment-text::before, .comment-text::after { - border-color: $ui-mint-green; + border-color: colors.$ui-mint-green; } // change colors for quotes in different sections .community.comment-text, .community.comment-text::before, .community.comment-text::after { - border-color: $motion-blue-3; + border-color: colors.$motion-blue-3; } .comment-text::before { - border-color: $ui-mint-green; + border-color: colors.$ui-mint-green; top: -1px; left: -11px; border-bottom-width: 12px; border-left-width: 10px; } .community.comment-text::before { - border-color: $motion-blue-3; + border-color: colors.$motion-blue-3; } .community.comment-text::after, .comment-text::after { - border-color: $ui-white; + border-color: colors.$ui-white; position: absolute; top: 0px; left: -10px; @@ -2072,13 +2074,13 @@ img.comment-viz{ } } - @media #{$intermediate} { + @media #{frameless.$intermediate} { .community-moderation, .community-guidelines, .community-engagement { width: 620px; } } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { .inner { max-width: 620px; } @@ -2109,7 +2111,7 @@ img.comment-viz{ } } - @media #{$small} { + @media #{frameless.$small} { .inner { overflow: hidden; } @@ -2140,11 +2142,11 @@ img.comment-viz{ display: flex; justify-content: center; margin-bottom: 72px; - @media #{$medium}{ + @media #{frameless.$medium}{ height: 400px; margin-bottom: 0px; } - @media #{$small}{ + @media #{frameless.$small}{ height: 300px; margin-bottom: 0px; } @@ -2166,11 +2168,11 @@ img.comment-viz{ align-items: center; justify-content: center; - @media #{$medium}{ + @media #{frameless.$medium}{ height: 400px; } - @media #{$small}{ + @media #{frameless.$small}{ height: 300px; } } @@ -2194,11 +2196,11 @@ img.comment-viz{ width: 100%; max-width: 1000px; margin: 0px auto 0; - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { margin-top: 0px; flex-direction: column; } - @media #{$small}{ + @media #{frameless.$small}{ background-size: auto; } .tweets{ @@ -2212,7 +2214,7 @@ img.comment-viz{ div{ width: 350px; } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { flex-direction: column; justify-content: center; align-items: center; @@ -2221,7 +2223,7 @@ img.comment-viz{ margin: auto; } } - @media #{$small}{ + @media #{frameless.$small}{ div{ width: 300px; } @@ -2276,14 +2278,14 @@ img.comment-viz{ } } - @media #{$intermediate-and-smaller}{ + @media #{frameless.$intermediate-and-smaller}{ justify-content: center; margin: 0px; .framework-tile { margin: 24px; - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { margin: 12px; } } @@ -2291,26 +2293,26 @@ img.comment-viz{ } .founders-message { + background-color: colors.$header-gray; + width: 100%; + color: colors.$ui-white; + .inner { max-width: 900px; padding: 80px 0; - @media #{$intermediate}{ + @media #{frameless.$intermediate}{ max-width: 640px; } - @media #{$medium}{ + @media #{frameless.$medium}{ max-width: 500px; } - @media #{$small}{ + @media #{frameless.$small}{ max-width: 300px; } } - background-color: $header-gray; - width: 100%; - color: $ui-white; - h2, h4, p { - color: $ui-white; + color: colors.$ui-white; } h2 { @@ -2321,7 +2323,7 @@ img.comment-viz{ .flex-content{ display: flex; justify-content: space-between; - @media #{$big}{ + @media #{frameless.$big}{ .header{ max-width: 300px; } @@ -2329,7 +2331,7 @@ img.comment-viz{ .text{ width: 620px; } - @media #{$intermediate-and-smaller}{ + @media #{frameless.$intermediate-and-smaller}{ flex-direction: column; .header, .text{ width: 100%; @@ -2338,7 +2340,7 @@ img.comment-viz{ text-align: left; } } - @media #{$medium-and-smaller}{ + @media #{frameless.$medium-and-smaller}{ width: calc(100% - 50px); margin: auto; } @@ -2353,10 +2355,10 @@ img.comment-viz{ margin-right: 15px; } h5{ - color: $ui-white; + color: colors.$ui-white; margin-bottom: 0px; text-align: left; - @media #{$small}{ + @media #{frameless.$small}{ margin-top: 0px; } } @@ -2368,7 +2370,7 @@ img.comment-viz{ } p.contain-p{ - @media #{$small}{ + @media #{frameless.$small}{ width: calc(100% - 50px); max-width: 300px; margin: auto; @@ -2392,14 +2394,14 @@ p.contain-p{ flex-direction: column; text-align: left; - @media #{$intermediate} { + @media #{frameless.$intermediate} { max-width: 620px; } - @media #{$medium} { + @media #{frameless.$medium} { max-width: 460px; } - @media #{$medium-and-smaller}{ + @media #{frameless.$medium-and-smaller}{ width: calc(100% - 50px); margin: 50px auto; } @@ -2447,16 +2449,16 @@ p.contain-p{ background-position: center; .button { - background-color: $ui-purple-dark; + background-color: colors.$ui-purple-dark; } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { background-image: none; } - @media #{$medium} { + @media #{frameless.$medium} { height: 267px; } - @media #{$small} { + @media #{frameless.$small} { height: 250px; } } @@ -2469,7 +2471,7 @@ p.contain-p{ display: flex; flex-direction: column; align-items: center; - @media #{$medium-and-smaller}{ + @media #{frameless.$medium-and-smaller}{ width: calc(100% - 50px); // margin: 50px auto; } @@ -2511,7 +2513,7 @@ p.contain-p{ } .subsection-tag { - background-color: $ui-orange; + background-color: colors.$ui-orange; } .supporters-subsection { @@ -2538,7 +2540,7 @@ p.contain-p{ .comment-text { - background-color: $ui-white; + background-color: colors.$ui-white; text-align: left; padding: 20px; @@ -2555,7 +2557,7 @@ p.contain-p{ hr { border: 0; height: 0; - border-top: 1px solid $box-shadow-light-gray; + border-top: 1px solid colors.$box-shadow-light-gray; margin-bottom: 2rem; } @@ -2575,7 +2577,7 @@ p.contain-p{ } } } - @media #{$big} { + @media #{frameless.$big} { .ds-info { flex-direction: column; text-align: center; @@ -2584,7 +2586,7 @@ p.contain-p{ } } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { .inner { max-width: 620px; } @@ -2619,7 +2621,7 @@ p.contain-p{ } } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { .supporters-subsection { margin: 0; } @@ -2641,7 +2643,7 @@ p.contain-p{ } } - @media #{$small} { + @media #{frameless.$small} { .supporters-subsection { width: 100% } @@ -2712,7 +2714,7 @@ p.contain-p{ .avatar-item { img { - background-color: $ui-blue-10percent; + background-color: colors.$ui-blue-10percent; } .avatar-text { @@ -2757,14 +2759,14 @@ p.contain-p{ height: 300px; } - @media #{$intermediate} { + @media #{frameless.$intermediate} { img { width: 220px; height: 220px; } } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { align-items: center; } } @@ -2773,21 +2775,21 @@ p.contain-p{ margin-left: 20px; h2, p { - color: $ui-white; + color: colors.$ui-white; } width: 460px; - @media #{$intermediate} { + @media #{frameless.$intermediate} { text-align: left; } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { margin-left: 0px; text-align: center; } - @media #{$small} { + @media #{frameless.$small} { max-width: 300px; width: calc(100% - 50px); margin: auto; @@ -2797,8 +2799,8 @@ p.contain-p{ } .donate-button { - background-color: $ui-white; - color: $motion-blue-3; + background-color: colors.$ui-white; + color: colors.$motion-blue-3; height: 66px; width: 176px; padding: 0px; @@ -2811,7 +2813,7 @@ p.contain-p{ line-height: 2rem; a { - color: $motion-blue-3; + color: colors.$motion-blue-3; } span { @@ -2824,13 +2826,13 @@ p.contain-p{ position: fixed; top: 50px; z-index: 9; - box-shadow: 0 0 3px $box-shadow-gray; + box-shadow: 0 0 3px colors.$box-shadow-gray; background-color: $annual-report-aqua; padding: 0; width: 100%; height: 58px; - color: $type-white; + color: colors.$type-white; font-size: .85rem; font-weight: bold; @@ -2841,11 +2843,11 @@ p.contain-p{ a { text-decoration: none; white-space: nowrap; - color: $type-white; + color: colors.$type-white; font-size: .85rem; &.selectedItem, &:hover { - border-bottom: 1px solid $ui-white; + border-bottom: 1px solid colors.$ui-white; } } @@ -2856,7 +2858,7 @@ p.contain-p{ height: 58px; p { - color: $ui-white; + color: colors.$ui-white; font-weight: bold; } @@ -2880,11 +2882,11 @@ p.contain-p{ hr { border: 0; height: 0; - border-top: 1px solid $box-shadow-light-gray; + border-top: 1px solid colors.$box-shadow-light-gray; margin-top: 0; } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { height: auto; .sectionIndicator{ @@ -2901,12 +2903,12 @@ p.contain-p{ a { padding: 10px; margin: 5px 10px 5px 0px; - border: 1px solid $box-shadow-light-gray; + border: 1px solid colors.$box-shadow-light-gray; border-radius: 4px; &.selectedItem, &:hover { - border-bottom: 1px solid $box-shadow-light-gray; - background-color: $box-shadow-light-gray; + border-bottom: 1px solid colors.$box-shadow-light-gray; + background-color: colors.$box-shadow-light-gray; } } } @@ -2921,7 +2923,7 @@ p.contain-p{ .flex-row { justify-content: center; - @media #{$medium} { + @media #{frameless.$medium} { flex-direction: row; .thumbnail { @@ -2937,7 +2939,7 @@ p.contain-p{ } .regular.between{ - @media #{$medium-and-smaller}{ + @media #{frameless.$medium-and-smaller}{ margin-top: 0px; } } diff --git a/src/views/annual-report/2021/video-youtube/video-youtube.scss b/src/views/annual-report/2021/video-youtube/video-youtube.scss index 881c6a0c9fc..ece076dffd4 100644 --- a/src/views/annual-report/2021/video-youtube/video-youtube.scss +++ b/src/views/annual-report/2021/video-youtube/video-youtube.scss @@ -1,8 +1,8 @@ -@import "../../../../colors"; -@import "../../../../frameless"; +@use "../../../../colors"; +@use "../../../../frameless"; .video-player { - border: .25rem solid $box-shadow-light-gray; + border: .25rem solid colors.$box-shadow-light-gray; border-radius: .75rem; height: 225px; overflow: hidden; diff --git a/src/views/become-a-scratcher/become-a-scratcher.scss b/src/views/become-a-scratcher/become-a-scratcher.scss index 3cf2abba001..b01654a1a46 100644 --- a/src/views/become-a-scratcher/become-a-scratcher.scss +++ b/src/views/become-a-scratcher/become-a-scratcher.scss @@ -1,8 +1,8 @@ -@import "../../colors"; -@import "../../frameless"; +@use "../../colors"; +@use "../../frameless"; html,body{ - background-color: $ui-white !important; + background-color: colors.$ui-white !important; } .col{ @@ -50,7 +50,7 @@ html,body{ align-items: center; margin: 10px 40px; .section{ - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { display: none; } } @@ -66,8 +66,8 @@ html,body{ border-radius: 8px !important; .finish-later-modal-header{ - background-color: $ui-blue; - color: $ui-white; + background-color: colors.$ui-blue; + color: colors.$ui-white; height: 46px; display:flex; justify-content: center; @@ -104,7 +104,7 @@ html,body{ align-items: normal; min-height: 100vh; - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { flex-direction: column; } @@ -113,7 +113,7 @@ html,body{ top: 0px; right: 0px; left: 0px; - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { position: static; flex-direction: row; } @@ -128,7 +128,7 @@ html,body{ padding: 40px; justify-content: space-between; - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { padding-top: 0px; } @@ -154,7 +154,7 @@ html,body{ position:relative; justify-content: center; background-color: #E9F1FC; - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { width: 100vw; order: -1; margin-top: -90px; @@ -239,27 +239,27 @@ html,body{ max-width: 1000px; padding: auto; margin: auto; - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { flex-direction: column; } } button.finish-later{ background-color: rgba(0,0,0,0); - color: $ui-blue; - border: solid 1px $ui-blue; + color: colors.$ui-blue; + border: solid 1px colors.$ui-blue; } button.secondary-finish-later{ background-color: rgba(0,0,0,0); - color: $ui-white; - border: solid 1px $ui-white; + color: colors.$ui-white; + border: solid 1px colors.$ui-white; } button.go-back{ - background-color: $ui-white; - color: $ui-blue; - border: solid 1px $ui-blue; + background-color: colors.$ui-white; + color: colors.$ui-blue; + border: solid 1px colors.$ui-blue; } .image-content{ @@ -268,14 +268,14 @@ html,body{ flex: 4; justify-content: center; align-items: center; - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { flex: 12; order: 1; align-items: flex-end; } img{ - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { width: 300px; height: 300px; } @@ -287,7 +287,7 @@ html,body{ flex: 4; justify-content: center; align-items: center; - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { flex: 12; order: 1; align-items: flex-end; @@ -296,13 +296,13 @@ html,body{ img{ z-index: 100; - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { width: 300px; height: 300px; } } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { background-color: #E9F1FC; } } @@ -316,7 +316,7 @@ html,body{ padding: 40px; display: flex; align-items: flex-start; - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { flex: 12; order: 2; padding-top: 0px; diff --git a/src/views/boost/boost.scss b/src/views/boost/boost.scss index 61889a998f0..175afeefb7b 100644 --- a/src/views/boost/boost.scss +++ b/src/views/boost/boost.scss @@ -1,9 +1,9 @@ -@import "../../colors"; -@import "../../frameless"; +@use "../../colors"; +@use "../../frameless"; .boost { .extension-header { - background-color: $ui-magenta-dark; + background-color: colors.$ui-magenta-dark; background-image: url("/images/boost/boost-pattern.svg"); } } diff --git a/src/views/camp/camp.scss b/src/views/camp/camp.scss index 625ee88c77e..042315869a3 100644 --- a/src/views/camp/camp.scss +++ b/src/views/camp/camp.scss @@ -1,5 +1,5 @@ -@import "../../colors"; -@import "../../frameless"; +@use "../../colors"; +@use "../../frameless"; #view { padding: 0; @@ -20,21 +20,21 @@ } .gradient1 a:hover { text-decoration: underline; - color: $ui-light-gray; + color: colors.$ui-light-gray; } h3 { - border-bottom: 1px solid $ui-border; + border-bottom: 1px solid colors.$ui-border; } .flex-row { &.sidebar-row { align-items: flex-start; .body-copy { - width: $cols5; + width: frameless.$cols5; } .sidebar { - width: $cols5; + width: frameless.$cols5; } } } @@ -42,17 +42,17 @@ h3 { position: relative; h2, h3, p { - color: $ui-white; + color: colors.$ui-white; } } #info { h2, p { - color: $ui-white; + color: colors.$ui-white; } } .info-content { div { - max-width: $cols4; + max-width: frameless.$cols4; text-align: center; } } @@ -79,12 +79,12 @@ h3 { } .gradient1 { position: relative; - background: $ui-blue; /* For browsers that do not support gradients */ - background: -webkit-linear-gradient($ui-blue, $dd-darkblue); /* For Safari 5.1 to 6.0 */ - background: -o-linear-gradient($ui-blue, $dd-darkblue); /* For Opera 11.1 to 12.0 */ - background: -moz-linear-gradient($ui-blue, $dd-darkblue); /* For Firefox 3.6 to 15 */ - background: linear-gradient($ui-blue, $dd-darkblue); + background: colors.$ui-blue; /* For browsers that do not support gradients */ + background: -webkit-linear-gradient(colors.$ui-blue, colors.$dd-darkblue); /* For Safari 5.1 to 6.0 */ + background: -o-linear-gradient(colors.$ui-blue, colors.$dd-darkblue); /* For Opera 11.1 to 12.0 */ + background: -moz-linear-gradient(colors.$ui-blue, colors.$dd-darkblue); /* For Firefox 3.6 to 15 */ + background: linear-gradient(colors.$ui-blue, colors.$dd-darkblue); .intro { - max-width: $cols9; + max-width: frameless.$cols9; } } diff --git a/src/views/components/components.scss b/src/views/components/components.scss index 09608824492..1a1a57d9c1b 100644 --- a/src/views/components/components.scss +++ b/src/views/components/components.scss @@ -1,4 +1,4 @@ -@import "../../colors"; +@use "../../colors"; .components { h1 { @@ -7,9 +7,9 @@ .subnavigation { li { - background-color: $active-gray; + background-color: colors.$active-gray; &.active { - background-color: $ui-purple-dark; + background-color: colors.$ui-purple-dark; } } } @@ -21,7 +21,7 @@ .example-tile { width: 200px; height: 50px; - border: 1px solid $ui-border; + border: 1px solid colors.$ui-border; border-radius: 8px; padding: 10px; display: flex; @@ -50,95 +50,95 @@ .splash-green, .splash-pink, .splash-blue { - color: $ui-white; + color: colors.$ui-white; } .ui-purple-dark { - background-color: $ui-purple-dark; + background-color: colors.$ui-purple-dark; } .ui-blue { - background-color: $ui-blue; + background-color: colors.$ui-blue; } .ui-orange { - background-color: $ui-orange; + background-color: colors.$ui-orange; } .ui-light-gray { - background-color: $ui-light-gray; + background-color: colors.$ui-light-gray; } .ui-gray { - background-color: $ui-gray; + background-color: colors.$ui-gray; } .ui-dark-gray { - background-color: $ui-dark-gray; + background-color: colors.$ui-dark-gray; } .background-color { - background-color: $background-color; + background-color: colors.$background-color; } .ui-aqua { - background-color: $ui-aqua; + background-color: colors.$ui-aqua; } .ui-purple { - background-color: $ui-purple; + background-color: colors.$ui-purple; } .ui-white { - background-color: $ui-white; + background-color: colors.$ui-white; } .ui-border { - background-color: $ui-border; + background-color: colors.$ui-border; } .active-gray { - background-color: $active-gray; + background-color: colors.$active-gray; } .active-dark-gray { - background-color: $active-dark-gray; + background-color: colors.$active-dark-gray; } .box-shadow-gray { - background-color: $box-shadow-gray; + background-color: colors.$box-shadow-gray; } .overlay-gray { - background-color: $overlay-gray; + background-color: colors.$overlay-gray; } .header-gray { - background-color: $header-gray; + background-color: colors.$header-gray; } .type-gray { - background-color: $type-gray; + background-color: colors.$type-gray; } .type-white { - background-color: $type-white; + background-color: colors.$type-white; } .link-purple { - background-color: $link-purple; + background-color: colors.$link-purple; } .splash-green { - background-color: $ui-aqua; + background-color: colors.$ui-aqua; } .splash-pink { - background-color: $ui-purple; + background-color: colors.$ui-purple; } .splash-blue { - background-color: $ui-blue; + background-color: colors.$ui-blue; } } } diff --git a/src/views/conference/2016/details/details.scss b/src/views/conference/2016/details/details.scss index 57ec5949591..6ce45963389 100644 --- a/src/views/conference/2016/details/details.scss +++ b/src/views/conference/2016/details/details.scss @@ -1,17 +1,17 @@ -@import "../../../../frameless"; +@use "../../../../frameless"; #view { - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { margin-top: 100px; } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { text-align: left; } } .details { - width: $cols8; + width: frameless.$cols8; &.inner { margin-top: 2rem; @@ -49,7 +49,7 @@ } //8 columns -@media #{$intermediate-and-smaller} { +@media #{frameless.$intermediate-and-smaller} { .details { width: 100%; } diff --git a/src/views/conference/2016/expect/expect.scss b/src/views/conference/2016/expect/expect.scss index 95338b11ade..34597196bd5 100644 --- a/src/views/conference/2016/expect/expect.scss +++ b/src/views/conference/2016/expect/expect.scss @@ -1,5 +1,5 @@ -@import "../../../../colors"; -@import "../../../../frameless"; +@use "../../../../colors"; +@use "../../../../frameless"; .expect { .flex-row { @@ -7,7 +7,7 @@ justify-content: space-between; .card { - width: $cols4; + width: frameless.$cols4; p { text-align: left; @@ -25,7 +25,7 @@ margin-top: 1.2rem; } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { img { width: 50%; } @@ -37,7 +37,7 @@ } } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { .uneven { flex-direction: column; align-items: center; @@ -46,7 +46,7 @@ } .keynote { - background-color: $ui-purple; + background-color: colors.$ui-purple; padding: 48px 0 64px 0; width: 100%; @@ -54,7 +54,7 @@ h3, b, p { - color: $ui-white; + color: colors.$ui-white; } h2 { @@ -72,7 +72,7 @@ .date { b { border-radius: 20px; - background-color: $ui-orange; + background-color: colors.$ui-orange; padding: 5px 15px; font-size: .85rem; } @@ -80,7 +80,7 @@ margin: 15px 0; } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { .flex-row { flex-direction: column; align-items: center; @@ -119,11 +119,11 @@ } table { - width: $cols4; + width: frameless.$cols4; th { display: flex; - border-bottom: thin solid $ui-border; + border-bottom: thin solid colors.$ui-border; padding: 2.5%; align-items: center; justify-content: flex-start; @@ -139,7 +139,7 @@ td { display: flex; - border-bottom: thin solid $ui-border; + border-bottom: thin solid colors.$ui-border; padding: 2.5%; height: 60px; align-items: center; @@ -156,7 +156,7 @@ } } - @media #{$small} { + @media #{frameless.$small} { .flex-row { table { width: 100%; @@ -164,15 +164,15 @@ } } - @media #{$medium-and-intermediate} { + @media #{frameless.$medium-and-intermediate} { .flex-row { table { - width: $cols6; + width: frameless.$cols6; } } } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { .flex-row { flex-direction: column; align-items: center; diff --git a/src/views/conference/2016/index/index.scss b/src/views/conference/2016/index/index.scss index a2d4b16fa21..8a94853a8db 100644 --- a/src/views/conference/2016/index/index.scss +++ b/src/views/conference/2016/index/index.scss @@ -1,8 +1,8 @@ -@import "../../../../colors"; -@import "../../../../frameless"; +@use "../../../../colors"; +@use "../../../../frameless"; #view { - background-color: $ui-light-gray; + background-color: colors.$ui-light-gray; min-height: initial; } @@ -19,7 +19,7 @@ margin: 0 auto; padding: 5px 0; text-align: center; - color: $type-white; + color: colors.$type-white; } p { @@ -34,21 +34,21 @@ a { text-decoration: underline; - color: $type-white; + color: colors.$type-white; } } a { button { - background-color: $ui-white; - color: $ui-blue; + background-color: colors.$ui-white; + color: colors.$ui-blue; font-size: 1rem; } } } - @media #{$small} { + @media #{frameless.$small} { h3 { display: none; margin-top: 0; @@ -60,7 +60,7 @@ } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { h1 { font-size: 2.5rem; } @@ -85,7 +85,7 @@ max-width: 125px; } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { margin: .5rem; width: 125px; } @@ -93,7 +93,7 @@ } } -@media #{$medium-and-smaller} { +@media #{frameless.$medium-and-smaller} { .index { .flex-row { align-items: center; diff --git a/src/views/conference/2016/plan/plan.scss b/src/views/conference/2016/plan/plan.scss index 1f219b5d966..0e1150cf4a3 100644 --- a/src/views/conference/2016/plan/plan.scss +++ b/src/views/conference/2016/plan/plan.scss @@ -1,9 +1,9 @@ -@import "../../../../colors"; -@import "../../../../frameless"; +@use "../../../../colors"; +@use "../../../../frameless"; .plan { section { - border-bottom: 2px solid $ui-border; + border-bottom: 2px solid colors.$ui-border; &.last { border-bottom: 0; @@ -19,13 +19,13 @@ width: 100%; } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { img { width: 30%; } } - @media #{$intermediate} { + @media #{frameless.$intermediate} { img { width: 70%; } @@ -36,7 +36,7 @@ .lodging { text-align: left; - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { .uneven { .short { display: none; @@ -50,7 +50,7 @@ align-items: center; } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { .flex-row { flex-direction: column-reverse; } @@ -69,13 +69,13 @@ justify-content: flex-start; } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { ul { max-height: 100%; } } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { div { text-align: left; } @@ -95,9 +95,9 @@ .short { margin-top: 64px; - border: 2px solid $ui-border; + border: 2px solid colors.$ui-border; border-radius: 4px; - background-color: $ui-white; + background-color: colors.$ui-white; padding: 16px; text-align: center; @@ -105,7 +105,7 @@ margin: 0; } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { margin-top: 0; } } diff --git a/src/views/conference/2016/schedule/schedule.scss b/src/views/conference/2016/schedule/schedule.scss index 568a3037581..3d18cf45be5 100644 --- a/src/views/conference/2016/schedule/schedule.scss +++ b/src/views/conference/2016/schedule/schedule.scss @@ -1,5 +1,5 @@ -@import "../../../../colors"; -@import "../../../../frameless"; +@use "../../../../colors"; +@use "../../../../frameless"; .schedule { .title-banner { @@ -8,28 +8,28 @@ .sub-nav { z-index: -1; - box-shadow: 0 2px 5px $ui-dark-gray; + box-shadow: 0 2px 5px colors.$ui-dark-gray; padding: 0; li { margin: 0; border: 0; border-top: 4px solid transparent; - border-left: 2px solid $active-gray; + border-left: 2px solid colors.$active-gray; border-radius: 0; padding: .75em 1em; - color: $type-gray; + color: colors.$type-gray; font-size: 1rem; &.last { - border-right: 2px solid $active-gray; + border-right: 2px solid colors.$active-gray; } &:hover, &:active, &.selected { - border-top: 4px solid $ui-orange; - border-left: 2px solid $active-gray; + border-top: 4px solid colors.$ui-orange; + border-left: 2px solid colors.$active-gray; box-shadow: none; background-color: inherit; } @@ -50,14 +50,14 @@ h2 { &.breaking-title { margin: 4rem 0 2rem 0; - border-bottom: 1px solid $ui-dark-gray; + border-bottom: 1px solid colors.$ui-dark-gray; width: 100%; height: 1.7rem; // match the line-height for h2 text-align: center; } span { - background-color: $background-color; + background-color: colors.$background-color; padding: 0 10px; } } @@ -67,19 +67,19 @@ display: block; &:hover { - background-color: $ui-blue-25percent; + background-color: colors.$ui-blue-25percent; } } } .agenda-item { margin: 1rem 0; - border: 1px solid $active-gray; + border: 1px solid colors.$active-gray; border-radius: 5px; padding: 1.25rem 2.25rem; &.no-click { - background-color: $ui-gray; + background-color: colors.$ui-gray; } .flex-row { @@ -102,7 +102,7 @@ } } - @media #{$small} { + @media #{frameless.$small} { .sub-nav { flex-wrap: nowrap; } @@ -124,7 +124,7 @@ } } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { .inner { h2 { &.breaking-title { diff --git a/src/views/conference/2017/index/index.scss b/src/views/conference/2017/index/index.scss index 96a722dbe3c..2924695e7c3 100644 --- a/src/views/conference/2017/index/index.scss +++ b/src/views/conference/2017/index/index.scss @@ -1,5 +1,5 @@ -@import "../../../../colors"; -@import "../../../../frameless"; +@use "../../../../colors"; +@use "../../../../frameless"; .title-banner.mod-conference.mod-2017 { padding-top: 0; @@ -23,18 +23,18 @@ .title-banner-h3.mod-2017 { text-align: left; - color: $type-white; + color: colors.$type-white; } .conf2017-title-band { - background-color: $ui-blue-dark; + background-color: colors.$ui-blue-dark; padding: 1.5rem; text-align: center; - color: $type-white; + color: colors.$type-white; } .conf2017-panel { - border-bottom: 1px solid $ui-border; + border-bottom: 1px solid colors.$ui-border; } .conf2017-panel.mod-last { @@ -48,9 +48,9 @@ .conf2017-panel-flag { margin-right: 6.25rem; - border: 1px solid $ui-border; + border: 1px solid colors.$ui-border; border-radius: 1px; - background-color: $ui-border; + background-color: colors.$ui-border; width: 3.75rem; } @@ -72,14 +72,14 @@ td { .button.mod-2017-panel { display: block; margin: 2rem auto 0; - background-color: $ui-orange; + background-color: colors.$ui-orange; padding: 1rem 0; width: 13.75rem; text-align: center; - color: $type-white; + color: colors.$type-white; } -@media #{$small} { +@media #{frameless.$small} { .index.mod-2017 { text-align: left; } @@ -123,7 +123,7 @@ td { } } -@media #{$medium} { +@media #{frameless.$medium} { .index.mod-2017 { text-align: left; } @@ -159,7 +159,7 @@ td { } } -@media #{$intermediate} { +@media #{frameless.$intermediate} { .index.mod-2017 { text-align: left; } diff --git a/src/views/conference/2018/details/details.scss b/src/views/conference/2018/details/details.scss index 57ec5949591..6ce45963389 100644 --- a/src/views/conference/2018/details/details.scss +++ b/src/views/conference/2018/details/details.scss @@ -1,17 +1,17 @@ -@import "../../../../frameless"; +@use "../../../../frameless"; #view { - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { margin-top: 100px; } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { text-align: left; } } .details { - width: $cols8; + width: frameless.$cols8; &.inner { margin-top: 2rem; @@ -49,7 +49,7 @@ } //8 columns -@media #{$intermediate-and-smaller} { +@media #{frameless.$intermediate-and-smaller} { .details { width: 100%; } diff --git a/src/views/conference/2018/expect/expect.scss b/src/views/conference/2018/expect/expect.scss index f1cb8491981..9564f8d14e5 100644 --- a/src/views/conference/2018/expect/expect.scss +++ b/src/views/conference/2018/expect/expect.scss @@ -1,5 +1,5 @@ -@import "../../../../colors"; -@import "../../../../frameless"; +@use "../../../../colors"; +@use "../../../../frameless"; .expect { .flex-row { @@ -7,7 +7,7 @@ justify-content: space-between; .card { - width: $cols4; + width: frameless.$cols4; p { text-align: left; @@ -25,7 +25,7 @@ margin-top: 1.2rem; } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { img { width: 50%; } @@ -37,7 +37,7 @@ } } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { .uneven { flex-direction: column; align-items: center; @@ -46,7 +46,7 @@ } .keynote { - background-color: $ui-purple; + background-color: colors.$ui-purple; padding: 48px 0 64px 0; width: 100%; @@ -54,7 +54,7 @@ h3, b, p { - color: $ui-white; + color: colors.$ui-white; } h2 { @@ -77,7 +77,7 @@ .date { b { border-radius: 20px; - background-color: $ui-orange; + background-color: colors.$ui-orange; padding: 5px 15px; font-size: .85rem; } @@ -85,7 +85,7 @@ margin: 15px 0; } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { .flex-row { flex-direction: column; align-items: center; @@ -125,11 +125,11 @@ } table { - width: $cols4; + width: frameless.$cols4; th { display: flex; - border-bottom: thin solid $ui-border; + border-bottom: thin solid colors.$ui-border; padding: 2.5%; align-items: center; justify-content: flex-start; @@ -145,7 +145,7 @@ td { display: flex; - border-bottom: thin solid $ui-border; + border-bottom: thin solid colors.$ui-border; padding: 2.5%; height: 60px; align-items: center; @@ -163,7 +163,7 @@ } } - @media #{$small} { + @media #{frameless.$small} { .flex-row { table { width: 100%; @@ -171,15 +171,15 @@ } } - @media #{$medium-and-intermediate} { + @media #{frameless.$medium-and-intermediate} { .flex-row { table { - width: $cols6; + width: frameless.$cols6; } } } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { .flex-row { flex-direction: column; align-items: center; diff --git a/src/views/conference/2018/index/index.scss b/src/views/conference/2018/index/index.scss index 2fb59c052c5..1a90123d211 100644 --- a/src/views/conference/2018/index/index.scss +++ b/src/views/conference/2018/index/index.scss @@ -1,8 +1,8 @@ -@import "../../../../colors"; -@import "../../../../frameless"; +@use "../../../../colors"; +@use "../../../../frameless"; #view { - background-color: $ui-light-gray; + background-color: colors.$ui-light-gray; min-height: initial; } @@ -20,7 +20,7 @@ margin: 0 auto; padding: 5px 0; text-align: center; - color: $type-white; + color: colors.$type-white; } h1 { @@ -30,7 +30,7 @@ h3 { a { text-decoration: underline; - color: $type-white; + color: colors.$type-white; } } @@ -46,21 +46,21 @@ a { text-decoration: underline; - color: $type-white; + color: colors.$type-white; } } a { button { - background-color: $ui-white; - color: $ui-blue; + background-color: colors.$ui-white; + color: colors.$ui-blue; font-size: 1rem; } } } - @media #{$small} { + @media #{frameless.$small} { h3 { display: none; margin-top: 0; @@ -72,7 +72,7 @@ } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { h1 { font-size: 2.5rem; } @@ -97,7 +97,7 @@ max-width: 125px; } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { margin: .5rem; width: 125px; } @@ -105,7 +105,7 @@ } } -@media #{$medium-and-smaller} { +@media #{frameless.$medium-and-smaller} { .index { .flex-row { align-items: center; diff --git a/src/views/conference/2018/plan/plan.scss b/src/views/conference/2018/plan/plan.scss index 1f219b5d966..0e1150cf4a3 100644 --- a/src/views/conference/2018/plan/plan.scss +++ b/src/views/conference/2018/plan/plan.scss @@ -1,9 +1,9 @@ -@import "../../../../colors"; -@import "../../../../frameless"; +@use "../../../../colors"; +@use "../../../../frameless"; .plan { section { - border-bottom: 2px solid $ui-border; + border-bottom: 2px solid colors.$ui-border; &.last { border-bottom: 0; @@ -19,13 +19,13 @@ width: 100%; } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { img { width: 30%; } } - @media #{$intermediate} { + @media #{frameless.$intermediate} { img { width: 70%; } @@ -36,7 +36,7 @@ .lodging { text-align: left; - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { .uneven { .short { display: none; @@ -50,7 +50,7 @@ align-items: center; } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { .flex-row { flex-direction: column-reverse; } @@ -69,13 +69,13 @@ justify-content: flex-start; } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { ul { max-height: 100%; } } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { div { text-align: left; } @@ -95,9 +95,9 @@ .short { margin-top: 64px; - border: 2px solid $ui-border; + border: 2px solid colors.$ui-border; border-radius: 4px; - background-color: $ui-white; + background-color: colors.$ui-white; padding: 16px; text-align: center; @@ -105,7 +105,7 @@ margin: 0; } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { margin-top: 0; } } diff --git a/src/views/conference/2018/schedule/schedule.scss b/src/views/conference/2018/schedule/schedule.scss index 18edbd60b11..3b249756708 100644 --- a/src/views/conference/2018/schedule/schedule.scss +++ b/src/views/conference/2018/schedule/schedule.scss @@ -1,5 +1,5 @@ -@import "../../../../colors"; -@import "../../../../frameless"; +@use "../../../../colors"; +@use "../../../../frameless"; .schedule { .title-banner { @@ -8,28 +8,28 @@ .sub-nav { z-index: -1; - box-shadow: 0 2px 5px $ui-dark-gray; + box-shadow: 0 2px 5px colors.$ui-dark-gray; padding: 0; li { margin: 0; border: 0; border-top: 4px solid transparent; - border-left: 2px solid $active-gray; + border-left: 2px solid colors.$active-gray; border-radius: 0; padding: .75em 1em; - color: $type-gray; + color: colors.$type-gray; font-size: 1rem; &.last { - border-right: 2px solid $active-gray; + border-right: 2px solid colors.$active-gray; } &:hover, &:active, &.selected { - border-top: 4px solid $ui-orange; - border-left: 2px solid $active-gray; + border-top: 4px solid colors.$ui-orange; + border-left: 2px solid colors.$active-gray; box-shadow: none; background-color: inherit; } @@ -50,14 +50,14 @@ h2 { &.breaking-title { margin: 4rem 0 2rem 0; - border-bottom: 1px solid $ui-dark-gray; + border-bottom: 1px solid colors.$ui-dark-gray; width: 100%; height: 1.7rem; // match the line-height for h2 text-align: center; } span { - background-color: $background-color; + background-color: colors.$background-color; padding: 0 10px; } } @@ -67,19 +67,19 @@ display: block; &:hover { - background-color: $ui-blue-10percent; + background-color: colors.$ui-blue-10percent; } } } .agenda-item { margin: 1rem 0; - border: 1px solid $active-gray; + border: 1px solid colors.$active-gray; border-radius: 5px; padding: 1.25rem 2.25rem; &.no-click { - background-color: $ui-gray; + background-color: colors.$ui-gray; } .flex-row { @@ -102,7 +102,7 @@ } } - @media #{$small} { + @media #{frameless.$small} { .sub-nav { flex-wrap: nowrap; } @@ -124,7 +124,7 @@ } } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { .inner { h2 { &.breaking-title { diff --git a/src/views/conference/2019/index/index.scss b/src/views/conference/2019/index/index.scss index c8f4c403dfa..b7eb0a3c8f3 100644 --- a/src/views/conference/2019/index/index.scss +++ b/src/views/conference/2019/index/index.scss @@ -1,5 +1,5 @@ -@import "../../../../colors"; -@import "../../../../frameless"; +@use "../../../../colors"; +@use "../../../../frameless"; h1.title-banner-h1.mod-2019 { position: absolute; @@ -43,7 +43,7 @@ h1.title-banner-h1.mod-2019 { } .conf2019-title-band { - background-color: $ui-blue; + background-color: colors.$ui-blue; text-align: center; } @@ -61,7 +61,7 @@ h1.title-banner-h1.mod-2019 { .conf2019-title-band>h3 { width: 48.75rem; - color: $type-white; + color: colors.$type-white; margin: auto; } @@ -89,12 +89,12 @@ h1.title-banner-h1.mod-2019 { // width: 60%; font-weight: normal; font-size: 1rem; - color: $type-gray; + color: colors.$type-gray; margin: 0 auto 1.6rem; } .conf2019-panel { - border-bottom: 1px solid $ui-border; + border-bottom: 1px solid colors.$ui-border; } .conf2019-panel.mod-last { @@ -109,9 +109,9 @@ h1.title-banner-h1.mod-2019 { .conf2019-panel-flag { margin-right: 6.25rem; - border: 1px solid $ui-border; + border: 1px solid colors.$ui-border; border-radius: 1px; - background-color: $ui-border; + background-color: colors.$ui-border; width: 3.75rem; } @@ -148,16 +148,16 @@ td { } .button.mod-2019-conf-website-button { - background-color: $ui-orange; - color: $type-white; + background-color: colors.$ui-orange; + color: colors.$type-white; } .button.mod-2019-conf-maillist-button { - background-color: $ui-white; - color: $ui-blue-dark; + background-color: colors.$ui-white; + color: colors.$ui-blue-dark; } -@media #{$small} { +@media #{frameless.$small} { .index.mod-2019 { text-align: left; } @@ -230,7 +230,7 @@ td { } } -@media #{$medium} { +@media #{frameless.$medium} { .index.mod-2019 { text-align: left; } @@ -297,7 +297,7 @@ td { } } -@media #{$intermediate} { +@media #{frameless.$intermediate} { .index.mod-2019 { text-align: left; } diff --git a/src/views/conference/2021/index/index.scss b/src/views/conference/2021/index/index.scss index d1871eeb277..52a4136df19 100644 --- a/src/views/conference/2021/index/index.scss +++ b/src/views/conference/2021/index/index.scss @@ -1,5 +1,5 @@ -@import "../../../../colors"; -@import "../../../../frameless"; +@use "../../../../colors"; +@use "../../../../frameless"; .title-banner.mod-conference.mod-2021 { padding-top: 0; @@ -31,11 +31,11 @@ .title-banner-h3.mod-2021 { text-align: center; - color: $type-white; + color: colors.$type-white; } .conf2021-panel { - border-bottom: 1px solid $ui-border; + border-bottom: 1px solid colors.$ui-border; } .conf2021-panel.mod-last { @@ -70,14 +70,14 @@ td { .button.mod-2021-panel { display: block; margin: 2rem auto 0; - background-color: $ui-orange; + background-color: colors.$ui-orange; padding: 1rem 0; width: 13.75rem; text-align: center; - color: $type-white; + color: colors.$type-white; } -@media only screen and (max-width: $mobile - 1) { +@media only screen and (max-width: frameless.$mobile - 1) { .index.mod-2021 { text-align: left; } @@ -113,7 +113,7 @@ td { } } -@media only screen and (min-width: $mobile) and (max-width: $tabletPortrait - 1) { +@media only screen and (min-width: frameless.$mobile) and (max-width: frameless.$tabletPortrait - 1) { .index.mod-2021 { text-align: left; } @@ -145,7 +145,7 @@ td { } } -@media only screen and (min-width: $tabletPortrait) and (max-width: $desktop - 1) { +@media only screen and (min-width: frameless.$tabletPortrait) and (max-width: frameless.$desktop - 1) { .index.mod-2021 { text-align: left; } diff --git a/src/views/cookies/cookies.scss b/src/views/cookies/cookies.scss index 3c4b5ae10e1..379ca92b200 100644 --- a/src/views/cookies/cookies.scss +++ b/src/views/cookies/cookies.scss @@ -1,12 +1,12 @@ -@import "../../colors"; +@use "../../colors"; .cookies-table { - border: 1px solid $ui-border; + border: 1px solid colors.$ui-border; border-collapse: collapse; td, th { padding: .75rem; - border: 1px solid $ui-border; + border: 1px solid colors.$ui-border; text-align: left; } } \ No newline at end of file diff --git a/src/views/credits/credits.scss b/src/views/credits/credits.scss index 5a4d825e32b..62609d7101a 100644 --- a/src/views/credits/credits.scss +++ b/src/views/credits/credits.scss @@ -1,4 +1,4 @@ -@import "../../colors"; +@use "../../colors"; #view { padding: 0; diff --git a/src/views/developers/developers.scss b/src/views/developers/developers.scss index c029609df83..47fde880c55 100644 --- a/src/views/developers/developers.scss +++ b/src/views/developers/developers.scss @@ -1,7 +1,7 @@ -@import "../../colors"; -@import "../../frameless"; +@use "../../colors"; +@use "../../frameless"; -$developer-spot: $ui-aqua; +$developer-spot: colors.$ui-aqua; #view { padding: 0; @@ -16,23 +16,23 @@ $developer-spot: $ui-aqua; h1 { margin: 0 0 2rem 0; text-align: left; - color: $ui-white; + color: colors.$ui-white; } p { margin: 0; - width: $cols6; + width: frameless.$cols6; text-align: left; - color: $ui-white; + color: colors.$ui-white; a { - border-bottom: 1px solid $ui-white; - color: $ui-white; + border-bottom: 1px solid colors.$ui-white; + color: colors.$ui-white; } } .band { - $band-color: $box-shadow-light-gray; + $band-color: colors.$box-shadow-light-gray; margin-top: 2rem; background-color: $band-color; @@ -51,7 +51,7 @@ $developer-spot: $ui-aqua; &.faq-banner { margin-bottom: 0; - background-color: $ui-gray; + background-color: colors.$ui-gray; } } @@ -63,11 +63,11 @@ $developer-spot: $ui-aqua; align-items: flex-start; .body-copy { - width: $cols8; + width: frameless.$cols8; } .sidebar { - width: $cols3; + width: frameless.$cols3; } } @@ -80,7 +80,7 @@ $developer-spot: $ui-aqua; $column-margin: 1rem; margin: $column-margin; - width: calc(#{$cols4} - (#{$column-margin} * 2)); + width: calc(#{frameless.$cols4} - (#{$column-margin} * 2)); p { text-align: left; @@ -93,7 +93,7 @@ $developer-spot: $ui-aqua; margin-bottom: 3rem; p { - max-width: $cols8; + max-width: frameless.$cols8; } } @@ -115,7 +115,7 @@ $developer-spot: $ui-aqua; #donate { h3 { - border-bottom: 1px solid $ui-border; + border-bottom: 1px solid colors.$ui-border; } dl { @@ -131,7 +131,7 @@ $developer-spot: $ui-aqua; } #donate { - border-bottom: 1px solid $ui-border; + border-bottom: 1px solid colors.$ui-border; padding-bottom: 2rem; } @@ -148,13 +148,13 @@ $developer-spot: $ui-aqua; .logo { margin: 10px; - width: $cols2; + width: frameless.$cols2; } } } #faq { - border-bottom: 1px solid $ui-border; + border-bottom: 1px solid colors.$ui-border; padding-bottom: 2rem; h3 { @@ -163,14 +163,14 @@ $developer-spot: $ui-aqua; } p { - color: $type-gray; + color: colors.$type-gray; } } } //4 columns -@media #{$small} { +@media #{frameless.$small} { #view { text-align: left; } @@ -196,7 +196,7 @@ $developer-spot: $ui-aqua; } //6 columns -@media #{$medium} { +@media #{frameless.$medium} { #view { text-align: left; } @@ -216,7 +216,7 @@ $developer-spot: $ui-aqua; } //8 columns -@media #{$intermediate} { +@media #{frameless.$intermediate} { #view { text-align: left; } diff --git a/src/views/download/download.scss b/src/views/download/download.scss index 6efb2cca00e..f7cc5221979 100644 --- a/src/views/download/download.scss +++ b/src/views/download/download.scss @@ -1,7 +1,7 @@ @use "sass:math"; -@import "../../colors"; -@import "../../frameless"; +@use "../../colors"; +@use "../../frameless"; #view { padding: 0; @@ -22,10 +22,10 @@ margin: .5em 0; border: 0; border-radius: 8px; - background-color: $ui-blue; + background-color: colors.$ui-blue; cursor: pointer; padding: 1rem 2rem; - color: $ui-white; + color: colors.$ui-white; font-size: 1rem; } @@ -42,13 +42,13 @@ } .download-header { - background-color: $ui-purple-dark; + background-color: colors.$ui-purple-dark; padding: 4rem 0; - color: $ui-white; + color: colors.$ui-white; .title { - color: $ui-white; + color: colors.$ui-white; } .inner { @@ -57,8 +57,8 @@ } .download-info { - padding-right: $cols1; - max-width: $cols7 + math.div($gutter, $em); + padding-right: frameless.$cols1; + max-width: frameless.$cols7 + math.div(frameless.$gutter, frameless.$em); align-items: flex-start; .download-copy { @@ -68,7 +68,7 @@ .download-title { display: flex; margin-bottom: 2rem; - color: $ui-white; + color: colors.$ui-white; font-size: 2rem; } @@ -112,7 +112,7 @@ .download-image { width: 100%; - max-width: $cols5; + max-width: frameless.$cols5; img { max-width: 100%; @@ -146,14 +146,14 @@ } .blue { - background-color: $ui-blue-10percent; + background-color: colors.$ui-blue-10percent; } .faq { p { margin-bottom: 1.25rem; margin-left: 0; - max-width: $cols8; + max-width: frameless.$cols8; text-align: left; } @@ -168,7 +168,7 @@ p { line-height: normal; - color: $link-purple; + color: colors.$link-purple; font-weight: 600; } diff --git a/src/views/download/scratch-link/download.scss b/src/views/download/scratch-link/download.scss index 72983a1dd84..8fe0fca7028 100644 --- a/src/views/download/scratch-link/download.scss +++ b/src/views/download/scratch-link/download.scss @@ -1,8 +1,8 @@ -@import "../../../colors"; +@use "../../../colors"; .link { .extension-header { - background-color: $ui-purple-dark; + background-color: colors.$ui-purple-dark; .inner { flex-direction: row; diff --git a/src/views/download/scratch2/download.scss b/src/views/download/scratch2/download.scss index 66ee5b07017..6cd8a1d5686 100644 --- a/src/views/download/scratch2/download.scss +++ b/src/views/download/scratch2/download.scss @@ -1,5 +1,5 @@ -@import "../../../colors"; -@import "../../../frameless"; +@use "../../../colors"; +@use "../../../frameless"; #view { padding: 0; @@ -9,29 +9,29 @@ .title-banner { &.masthead { margin-bottom: 0; - background-color: $ui-blue-dark; + background-color: colors.$ui-blue-dark; padding-bottom: 0; h1 { margin: 0 0 2rem 0; text-align: left; - color: $ui-white; + color: colors.$ui-white; } p { margin: 0; text-align: left; - color: $ui-white; + color: colors.$ui-white; a { - border-bottom: 1px solid $ui-white; - color: $ui-white; + border-bottom: 1px solid colors.$ui-white; + color: colors.$ui-white; } } .band { margin-top: 2rem; - background-color: $ui-white-15percent; + background-color: colors.$ui-white-15percent; padding: 1rem 0; } @@ -63,12 +63,12 @@ } .installation { - background-color: $ui-gray; + background-color: colors.$ui-gray; padding: 2rem; } .installation-column { - max-width: $cols4; + max-width: frameless.$cols4; text-align: center; p { @@ -79,9 +79,9 @@ .installation-column-number { margin: 2rem auto; - border: 2px solid $active-gray; + border: 2px solid colors.$active-gray; border-radius: 2rem; - background-color: $ui-blue; + background-color: colors.$ui-blue; width: 3.75rem; height: 3.75rem; } @@ -89,7 +89,7 @@ .installation-column-number-text { text-align: center; line-height: 1.8em; - color: $type-white; + color: colors.$type-white; } .installation-downloads { @@ -108,10 +108,10 @@ } .mod-link { - color: $ui-white; + color: colors.$ui-white; } - @media #{$small} { + @media #{frameless.$small} { .inner { .installation-column { max-width: 100%; @@ -119,7 +119,7 @@ } } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { .three-col-row { flex-direction: column; align-items: center; diff --git a/src/views/ev3/ev3.scss b/src/views/ev3/ev3.scss index 62373c011a5..94e9e9a16d0 100644 --- a/src/views/ev3/ev3.scss +++ b/src/views/ev3/ev3.scss @@ -1,8 +1,8 @@ -@import "../../colors"; +@use "../../colors"; .ev3 { .extension-header { - background-color: $ui-magenta-dark; + background-color: colors.$ui-magenta-dark; background-image: url("/images/ev3/ev3-pattern.svg"); } .headline-icon { diff --git a/src/views/explore/explore.scss b/src/views/explore/explore.scss index d6689fcafaa..237f07d09a5 100644 --- a/src/views/explore/explore.scss +++ b/src/views/explore/explore.scss @@ -1,10 +1,10 @@ -@import "../../colors"; -@import "../../frameless"; +@use "../../colors"; +@use "../../frameless"; -$base-bg: $ui-white; +$base-bg: colors.$ui-white; #view { - background-color: $ui-gray; + background-color: colors.$ui-gray; padding: 0; } @@ -12,24 +12,24 @@ $base-bg: $ui-white; .title-banner { &.masthead { margin-bottom: 0; - background-color: $ui-aqua; + background-color: colors.$ui-aqua; padding: 0; h1 { text-align: center; - color: $ui-white; + color: colors.$ui-white; font-size: 3rem; } p { margin: 0; - width: $cols6; + width: frameless.$cols6; text-align: left; - color: $ui-white; + color: colors.$ui-white; a { - border-bottom: 1px solid $ui-white; - color: $ui-white; + border-bottom: 1px solid colors.$ui-white; + color: colors.$ui-white; } } } @@ -49,7 +49,7 @@ $base-bg: $ui-white; .sort-controls { display: flex; margin: 0 auto; - border-bottom: 1px solid $ui-border; + border-bottom: 1px solid colors.$ui-border; padding: 8px 0; width: 58.75rem; justify-content: space-between; @@ -66,7 +66,7 @@ $base-bg: $ui-white; border: 0; background-color: transparent; height: 32px; - color: $header-gray; + color: colors.$header-gray; &:focus, &:active { @@ -84,14 +84,14 @@ $base-bg: $ui-white; justify-content: flex-start; li { - border: 1px solid $ui-purple-dark; - background-color: $ui-white; - color: $link-purple; + border: 1px solid colors.$ui-purple-dark; + background-color: colors.$ui-white; + color: colors.$link-purple; &.active { opacity: 1; - background-color: $ui-purple-dark; - color: $ui-white; + background-color: colors.$ui-purple-dark; + color: colors.$ui-white; } &:active { @@ -99,17 +99,17 @@ $base-bg: $ui-white; } &:hover { - background-color: $ui-purple-25percent; + background-color: colors.$ui-purple-25percent; } &.active:hover { - background-color: $ui-purple-darker; + background-color: colors.$ui-purple-darker; } } } #projectBox { - background-color: $ui-gray; + background-color: colors.$ui-gray; padding-top: 16px; padding-bottom: 32px; width: 100%; @@ -124,62 +124,62 @@ $base-bg: $ui-white; } //4 columns -@media #{$small} { +@media #{frameless.$small} { .outer { .tabs { - width: $cols4; + width: frameless.$cols4; } .sort-controls { - width: $cols4; + width: frameless.$cols4; } #projectBox { .button { - width: $cols4; + width: frameless.$cols4; } } } } //6 columns -@media #{$medium} { +@media #{frameless.$medium} { .outer { .tabs { - width: $cols6; + width: frameless.$cols6; } .sort-controls { - width: $cols6; + width: frameless.$cols6; } #projectBox { .button { - width: $cols6; + width: frameless.$cols6; } } } } // 8 columns -@media #{$intermediate} { +@media #{frameless.$intermediate} { .outer { .tabs { - width: $cols8; + width: frameless.$cols8; } .sort-controls { - width: $cols8; + width: frameless.$cols8; } #projectBox { .grid { .flex-row { - width: $cols9; + width: frameless.$cols9; } } .button { - width: $cols9; + width: frameless.$cols9; } } } diff --git a/src/views/gdxfor/gdxfor.scss b/src/views/gdxfor/gdxfor.scss index 3b451ff86f0..9093a57ee13 100644 --- a/src/views/gdxfor/gdxfor.scss +++ b/src/views/gdxfor/gdxfor.scss @@ -1,9 +1,9 @@ -@import "../../colors"; -@import "../../frameless"; +@use "../../colors"; +@use "../../frameless"; .gdxfor { .extension-header { - background-color: $ui-blue-dark; + background-color: colors.$ui-blue-dark; background-image: url("/images/gdxfor/gdxfor-pattern.svg"); } } diff --git a/src/views/guidelines/guidelines.scss b/src/views/guidelines/guidelines.scss index 6012cb20edf..9c2ca412400 100644 --- a/src/views/guidelines/guidelines.scss +++ b/src/views/guidelines/guidelines.scss @@ -1,5 +1,5 @@ -@import "../../colors"; -@import "../../frameless"; +@use "../../colors"; +@use "../../frameless"; #view { padding: 0; @@ -11,7 +11,7 @@ flex-direction: column; align-items: center; - background-color: $motion-blue-3; + background-color: colors.$motion-blue-3; background-image: url('/svgs/guidelines/header_sprinkles_left.svg'), url('/svgs/guidelines/header_sprinkles_right.svg'); background-position: left, right; background-repeat: no-repeat; @@ -19,7 +19,7 @@ padding: 6.25rem 0; div { - color: $ui-white; + color: colors.$ui-white; text-align: center; font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif; width: 708px; @@ -49,7 +49,7 @@ margin: 6rem 15% 0 15%; padding-bottom: 6rem; - border-bottom: 1px solid $active-gray; + border-bottom: 1px solid colors.$active-gray; .header3 { font-size: 1.25rem; @@ -76,17 +76,17 @@ font-size: 1.125rem; font-weight: 500; font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif; - color: $header-gray; + color: colors.$header-gray; text-align: start; word-wrap: break-word; - border: 1px solid $box-shadow-light-gray; + border: 1px solid colors.$box-shadow-light-gray; border-radius: 10px; transition: background 0.5s ease-in-out; } a:hover { - background-color: $ui-light-grayish-blue; + background-color: colors.$ui-light-grayish-blue; } } } @@ -125,7 +125,7 @@ } img { - width: $cols4; + width: frameless.$cols4; } a { diff --git a/src/views/ideas/ideas.scss b/src/views/ideas/ideas.scss index 54eb0bc59c8..e61f9e21b4f 100644 --- a/src/views/ideas/ideas.scss +++ b/src/views/ideas/ideas.scss @@ -1,10 +1,10 @@ -@import "../../colors"; -@import "../../frameless"; +@use "../../colors"; +@use "../../frameless"; -$base-bg: $ui-white; +$base-bg: colors.$ui-white; #view { - background-color: $ui-white; + background-color: colors.$ui-white; padding: 0; } @@ -15,7 +15,7 @@ $base-bg: $ui-white; align-items: center; gap: 2rem; padding: 3rem 0; - background-color: $ui-aqua; + background-color: colors.$ui-aqua; .ideas-project { border: none; @@ -32,19 +32,19 @@ $base-bg: $ui-white; font-size: 2rem; font-weight: 700; line-height: 2.5rem; - color: $ui-white; + color: colors.$ui-white; } p { font-size: 1rem; font-weight: 400; line-height: 1.5rem; - color: $ui-white; + color: colors.$ui-white; a { font-weight: 700; text-decoration: underline; - color: $ui-purple-light; + color: colors.$ui-purple-light; } } } @@ -58,7 +58,7 @@ $base-bg: $ui-white; .tips-section { display: grid; - grid-template-columns: repeat(auto-fill, minmax($cols3, auto)); + grid-template-columns: repeat(auto-fill, minmax(frameless.$cols3, auto)); justify-content: space-around; align-items: center; @@ -67,7 +67,7 @@ $base-bg: $ui-white; flex-direction: column; .tips-img { - width: $cols3; + width: frameless.$cols3; height: 10rem; } } @@ -215,11 +215,11 @@ $base-bg: $ui-white; display: flex; justify-content: center; padding: 3rem 0; - background-color: $gray-50; + background-color: colors.$gray-50; } .gray-area { - background-color: $ui-gray; + background-color: colors.$ui-gray; .tips-info-section { padding: 2.5rem 0; @@ -262,7 +262,7 @@ $base-bg: $ui-white; } //4 columns -@media #{$small} { +@media #{frameless.$small} { .banner-wrapper { .ideas-project { display: none; @@ -270,7 +270,7 @@ $base-bg: $ui-white; } .tips-info-body { - max-width: $cols4; + max-width: frameless.$cols4; text-align: center; .button { @@ -280,21 +280,21 @@ $base-bg: $ui-white; } //6 columns -@media #{$medium} { +@media #{frameless.$medium} { .tips-info-body { - max-width: $cols4; + max-width: frameless.$cols4; text-align: center; } } //8 columns -@media #{$intermediate} { +@media #{frameless.$intermediate} { .tips-info-body { - max-width: $cols4; + max-width: frameless.$cols4; } } -@media #{$intermediate-and-smaller}{ +@media #{frameless.$intermediate-and-smaller}{ .physical-ideas { .inner { .physical-ideas-section { @@ -307,7 +307,7 @@ $base-bg: $ui-white; } // 12 columns -@media #{$big} { +@media #{frameless.$big} { .tips-info-section { &.mod-align-top { align-items: flex-start; @@ -315,9 +315,9 @@ $base-bg: $ui-white; } .tips-info-body { - max-width: $cols6; + max-width: frameless.$cols6; &.mod-narrow { - max-width: $cols5; + max-width: frameless.$cols5; } } } diff --git a/src/views/join/join.scss b/src/views/join/join.scss index 673258fc8a6..67374aa581d 100644 --- a/src/views/join/join.scss +++ b/src/views/join/join.scss @@ -1,4 +1,4 @@ -@import "../../frameless"; +@use "../../frameless"; .join { position: absolute; @@ -12,7 +12,7 @@ } } -@media #{$small}, #{$medium}, #{$intermediate} { +@media #{frameless.$small}, #{frameless.$medium}, #{frameless.$intermediate} { .join { left: calc(50% - 38px); } diff --git a/src/views/messages/messages.scss b/src/views/messages/messages.scss index 62422428ef9..9eb6fc388f6 100644 --- a/src/views/messages/messages.scss +++ b/src/views/messages/messages.scss @@ -1,14 +1,14 @@ -@import "../../colors"; -@import "../../frameless"; +@use "../../colors"; +@use "../../frameless"; #view { - background-color: $ui-light-gray; + background-color: colors.$ui-light-gray; padding: 0; } .title-banner.mod-messages { - background-color: $ui-purple-dark; - color: $type-white; + background-color: colors.$ui-purple-dark; + color: colors.$type-white; } .flex-row.mod-messages-title { @@ -21,7 +21,7 @@ } .form-control { - color: $type-gray; + color: colors.$type-gray; } .help-block { @@ -51,16 +51,16 @@ .messages-header-unread { margin-left: 1rem; border-radius: 1rem; - background-color: $ui-red-dark; + background-color: colors.$ui-red-dark; padding: .25rem .5rem; line-height: 1rem; - color: $type-white; + color: colors.$type-white; } .admin-message { - border: 1px solid $active-dark-gray; + border: 1px solid colors.$active-dark-gray; border-radius: 5px; - background-color: $ui-purple-25percent; + background-color: colors.$ui-purple-25percent; padding: 1rem; } @@ -93,10 +93,10 @@ } .messages-social-list { - border: 1px solid $ui-border; + border: 1px solid colors.$ui-border; border-bottom-width: 0; border-radius: 5px; - background-color: $ui-white; + background-color: colors.$ui-white; } .comment-message-info { @@ -105,7 +105,7 @@ } .comment-text { - background-color: $ui-white; + background-color: colors.$ui-white; max-width: 30.25rem; } @@ -133,7 +133,7 @@ word-wrap: break-word; } -@media #{$small} { +@media #{frameless.$small} { .flex-row.admin-message-header, .flex-row.mod-comment-message { flex-direction: row; @@ -144,11 +144,11 @@ } .messages-social-loadmore { - width: $cols4; + width: frameless.$cols4; } } -@media #{$medium} { +@media #{frameless.$medium} { .flex-row.admin-message-header, .flex-row.mod-comment-message { flex-direction: row; @@ -159,16 +159,16 @@ } .messages-social-loadmore { - width: $cols6; + width: frameless.$cols6; } } -@media #{$intermediate} { +@media #{frameless.$intermediate} { .comment-text { max-width: 23.75rem; } .messages-social-loadmore { - width: $cols8; + width: frameless.$cols8; } } diff --git a/src/views/microbit/microbit.scss b/src/views/microbit/microbit.scss index 0eee4bca513..dbab6484dec 100644 --- a/src/views/microbit/microbit.scss +++ b/src/views/microbit/microbit.scss @@ -1,5 +1,5 @@ -@import "../../colors"; -@import "../../frameless"; +@use "../../colors"; +@use "../../frameless"; .microbit { .extension-header { @@ -66,7 +66,7 @@ } } -@media #{$medium-and-smaller} { +@media #{frameless.$medium-and-smaller} { .microbit { .cards-image-column { width: calc(100% - 2rem); diff --git a/src/views/parents/parents.scss b/src/views/parents/parents.scss index 6f94e2c5f38..5b9854c19cf 100644 --- a/src/views/parents/parents.scss +++ b/src/views/parents/parents.scss @@ -1,8 +1,8 @@ -@import "../../colors"; -@import "../../frameless"; +@use "../../colors"; +@use "../../frameless"; -$parents-spot: $ui-blue-dark; -$story-width: $cols3; +$parents-spot: colors.$ui-blue-dark; +$story-width: frameless.$cols3; #view { padding: 0; @@ -28,7 +28,7 @@ $story-width: $cols3; h1 { margin: 0; - color: $ui-white; + color: colors.$ui-white; } @@ -39,24 +39,24 @@ $story-width: $cols3; p { margin: 0; - max-width: $cols6; + max-width: frameless.$cols6; text-align: left; - color: $ui-white; + color: colors.$ui-white; a { - border-bottom: 1px solid $ui-white; - color: $ui-white; + border-bottom: 1px solid colors.$ui-white; + color: colors.$ui-white; } } } .ted-talk { position: relative; - margin-bottom: $gutter; - border: 2px solid $ui-border; + margin-bottom: frameless.$gutter; + border: 2px solid colors.$ui-border; border-radius: 10px; - width: $cols4; - height: $cols4 * .5625; + width: frameless.$cols4; + height: frameless.$cols4 * .5625; overflow: hidden; iframe { @@ -67,7 +67,7 @@ $story-width: $cols3; } .band { - $band-color: $box-shadow-light-gray; + $band-color: colors.$box-shadow-light-gray; margin-top: 2rem; background-color: $band-color; @@ -86,7 +86,7 @@ $story-width: $cols3; &.faq-banner { margin-bottom: 0; - background-color: $ui-gray; + background-color: colors.$ui-gray; } } @@ -94,7 +94,7 @@ $story-width: $cols3; justify-content: space-between; p { - max-width: $cols5; + max-width: frameless.$cols5; } } @@ -115,7 +115,7 @@ $story-width: $cols3; } //4 columns -@media only screen and (max-width: $mobile - 1) { +@media only screen and (max-width: frameless.$mobile - 1) { .title-banner { &.masthead { padding-bottom: 2rem; @@ -150,7 +150,7 @@ $story-width: $cols3; } //6 columns -@media only screen and (min-width: $mobile) and (max-width: $mobileIntermediate - 1) { +@media only screen and (min-width: frameless.$mobile) and (max-width: frameless.$mobileIntermediate - 1) { .flex-row { &.sidebar-row { @@ -179,7 +179,7 @@ $story-width: $cols3; //8 columns -@media only screen and (min-width: $mobileIntermediate) and (max-width: $desktop - 1) { +@media only screen and (min-width: frameless.$mobileIntermediate) and (max-width: frameless.$desktop - 1) { .masthead { h1 { text-align: center; @@ -192,11 +192,11 @@ $story-width: $cols3; .masthead-info { p { - width: $cols4; + width: frameless.$cols4; } iframe { - width: $cols4; + width: frameless.$cols4; box-sizing: border-box; } } @@ -233,7 +233,7 @@ $story-width: $cols3; p { margin: .25em 0; - max-width: $cols8; + max-width: frameless.$cols8; text-align: center; } } @@ -246,12 +246,12 @@ $story-width: $cols3; } #left { - width: $cols4; + width: frameless.$cols4; } } // 12 columns -@media only screen and (min-width: $desktop) { +@media only screen and (min-width: frameless.$desktop) { .masthead { h1 { text-align: left; diff --git a/src/views/preview/banner.scss b/src/views/preview/banner.scss index 478b2e40d4d..c9ea7b4873a 100644 --- a/src/views/preview/banner.scss +++ b/src/views/preview/banner.scss @@ -1,27 +1,27 @@ -@import "../../colors"; +@use "../../colors"; $navigation-height: 50px; .banner-outer { display: flex; - background-color: $ui-orange-25percent; + background-color: colors.$ui-orange-25percent; width: 100%; min-height: 4rem; overflow: hidden; - color: $ui-orange-high-contrast; + color: colors.$ui-orange-high-contrast; font-size: .875rem; font-weight: bold; align-self: center; } .banner-outer.banner-danger { - background-color: $ui-orange-25percent; - color: $ui-orange-high-contrast; + background-color: colors.$ui-orange-25percent; + color: colors.$ui-orange-high-contrast; } .banner-outer.banner-success { - background-color: $ui-green-35percent; - color: $ui-mint-green; + background-color: colors.$ui-green-35percent; + color: colors.$ui-mint-green; } .banner-inner { @@ -40,7 +40,7 @@ $navigation-height: 50px; .banner-button { border-radius: .25rem; - background-color: $ui-orange; + background-color: colors.$ui-orange; padding-top: .6875rem; padding-bottom: .75rem; min-width: 6rem; @@ -51,5 +51,5 @@ $navigation-height: 50px; } .banner-danger .banner-button { - background-color: $ui-red; + background-color: colors.$ui-red; } diff --git a/src/views/preview/comment/comment.scss b/src/views/preview/comment/comment.scss index 5485301b605..21dca093a7d 100644 --- a/src/views/preview/comment/comment.scss +++ b/src/views/preview/comment/comment.scss @@ -1,4 +1,4 @@ -@import "../../../colors"; +@use "../../../colors"; .compose-comment { margin-left: .5rem; @@ -10,13 +10,13 @@ .compose-error-tip { margin-bottom: .5rem; - border: 1px solid $active-gray; + border: 1px solid colors.$active-gray; border-radius: 5px; - background-color: $ui-orange; + background-color: colors.$ui-orange; padding: .25rem; width: 100%; text-align: left; - color: $type-white; + color: colors.$type-white; font-size: .85rem; } } @@ -30,7 +30,7 @@ textarea { &:not(:focus) { - border: 2px solid $active-dark-gray; + border: 2px solid colors.$active-dark-gray; } } } @@ -46,7 +46,7 @@ } .compose-cancel { - background-color: $ui-dark-gray; + background-color: colors.$ui-dark-gray; } .compose-limit { @@ -83,7 +83,7 @@ top: -.5rem; left: -.5rem; border-radius: .5rem; - background: $ui-blue-10percent; + background: colors.$ui-blue-10percent; width: calc(100% + 1rem); height: 100%; content: ""; @@ -179,9 +179,9 @@ .comment-bubble { position: relative; margin-left: .5rem; - border: 1px solid $active-gray; + border: 1px solid colors.$active-gray; border-radius: 0 .5rem .5rem .5rem; - background-color: $ui-white; + background-color: colors.$ui-white; padding: .75rem; width: calc(100% - .5rem); box-sizing: border-box; @@ -194,8 +194,8 @@ border-width: 1px 0 1px 1px; border-style: solid; border-radius: 0 0 0 8px; - border-color: $active-gray transparent $active-gray $active-gray; - background: $ui-white; + border-color: colors.$active-gray transparent colors.$active-gray colors.$active-gray; + background: colors.$ui-white; width: 10px; height: 9px; content: ""; @@ -215,7 +215,7 @@ } &.comment-bubble-markedbyfilter { - $markedbyfilter-outline: $ui-yellow; + $markedbyfilter-outline: colors.$ui-yellow; $markedbyfilter-background: rgb(255, 254, 210); border-color: $markedbyfilter-outline; @@ -243,13 +243,13 @@ justify-content: space-between; .comment-time { - color: $ui-dark-gray; + color: colors.$ui-dark-gray; } .comment-reply { display: inline-flex; cursor: pointer; - color: $link-purple; + color: colors.$link-purple; font-weight: bold; &:after { @@ -280,8 +280,8 @@ position: absolute; bottom: 0; background: linear-gradient( - $ui-light-primary-transparent, - $ui-light-primary + colors.$ui-light-primary-transparent, + colors.$ui-light-primary ); width: 100%; height: 100%; @@ -324,7 +324,7 @@ &:after { display: inline-block; position: relative; - background-color: $active-gray; + background-color: colors.$active-gray; width: 50%; height: 2px; vertical-align: middle; diff --git a/src/views/preview/extension-chip.scss b/src/views/preview/extension-chip.scss index 923c87fb6cc..15478302078 100644 --- a/src/views/preview/extension-chip.scss +++ b/src/views/preview/extension-chip.scss @@ -1,10 +1,10 @@ -@import "../../colors"; +@use "../../colors"; .extension-chip { display: flex; margin: 0 .625rem .625rem 0; border-radius: 5px; - background-color: $ui-blue-25percent; + background-color: colors.$ui-blue-25percent; padding: .625rem; height: 3rem; flex-flow: row; @@ -12,7 +12,7 @@ align-items: center; &.has-status { - background-color: $ui-orange-25percent; + background-color: colors.$ui-orange-25percent; } .extension-icon { @@ -32,10 +32,10 @@ .extension-status { border-radius: 10px; - background-color: $ui-orange; + background-color: colors.$ui-orange; padding: 0 5px; text-align: center; - color: $ui-white; + color: colors.$ui-white; font-size: .675rem; } @@ -43,10 +43,10 @@ display: flex; justify-content: center; border-radius: 10px; - background-color: $ui-blue; + background-color: colors.$ui-blue; padding: 0 5px; text-align: center; - color: $ui-white; + color: colors.$ui-white; font-size: .675rem; font-weight: normal; diff --git a/src/views/preview/mod-info.scss b/src/views/preview/mod-info.scss index ddef8f8cb28..2da3657fbde 100644 --- a/src/views/preview/mod-info.scss +++ b/src/views/preview/mod-info.scss @@ -1,4 +1,4 @@ -@import "../../frameless"; +@use "../../frameless"; .mod-info-container { margin-bottom: .625rem; /* Match the extra padding below extension chips */ @@ -10,7 +10,7 @@ line-height: 2rem; justify-content: flex-start; - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { margin: 0; width: 100%; justify-content: center; @@ -18,7 +18,7 @@ } & > div { - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { padding: 0 1rem; } } diff --git a/src/views/preview/preview.scss b/src/views/preview/preview.scss index 424f73e9fbe..df98f56e1b1 100644 --- a/src/views/preview/preview.scss +++ b/src/views/preview/preview.scss @@ -1,5 +1,5 @@ -@import "../../colors"; -@import "../../frameless"; +@use "../../colors"; +@use "../../frameless"; /* stage size constants */ $player-width: 482px; @@ -39,12 +39,12 @@ $stage-width: 480px; .inner { margin: 0 auto; - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { // subtract page padding max-width: calc(100% - 1rem); } - @media #{$intermediate} { + @media #{frameless.$intermediate} { width: 90%; min-width: 640px; } @@ -110,14 +110,14 @@ $stage-width: 480px; height: calc(3rem - 4px); } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { flex-direction: row; .inplace-input { width: calc(100% - 4rem); } } - @media #{$small} { + @media #{frameless.$small} { margin-right: 0; } } @@ -146,7 +146,7 @@ $stage-width: 480px; font-size: .8rem; flex-grow: 1; - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { // subtract margin and border min-width: calc(100% - 2rem - 4px); } @@ -158,16 +158,16 @@ $stage-width: 480px; position: absolute; z-index: 5; margin-top: $arrow-border-width; - border: 1px solid $active-gray; + border: 1px solid colors.$active-gray; border-radius: 5px; padding: 1rem; max-width: 18.75rem; min-height: 1rem; overflow: visible; - color: $type-white; + color: colors.$type-white; font-size: 1rem; - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { margin-top: calc($arrow-border-width / 2); width: 100%; } @@ -180,8 +180,8 @@ $stage-width: 480px; transform: rotate(135deg); - border-bottom: 1px solid $active-gray; - border-left: 1px solid $active-gray; + border-bottom: 1px solid colors.$active-gray; + border-left: 1px solid colors.$active-gray; border-radius: 5px; width: $arrow-border-width; @@ -189,7 +189,7 @@ $stage-width: 480px; content: ""; - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { display: none; } } @@ -200,7 +200,7 @@ $stage-width: 480px; &.has-error { .inplace-input, .inplace-textarea { - border: 1px solid $ui-orange; + border: 1px solid colors.$ui-orange; } } @@ -230,7 +230,7 @@ $stage-width: 480px; flex: 1; overflow-anchor: none; - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { padding: 0; width: 100%; } @@ -240,9 +240,9 @@ $stage-width: 480px; } .comments-turned-off { - border: 1px solid $ui-blue-25percent; + border: 1px solid colors.$ui-blue-25percent; border-radius: .5rem; - background: $ui-blue-10percent; + background: colors.$ui-blue-10percent; padding: 1.5rem 0; width: 100%; text-align: center; @@ -283,7 +283,7 @@ $stage-width: 480px; } .remix-button { - background-color: $ui-aqua; + background-color: colors.$ui-aqua; &:before { background-image: url("/svgs/project/remix-white.svg"); @@ -343,7 +343,7 @@ $stage-width: 480px; flex-wrap: nowrap; &.force-row { - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { flex-direction: row; } } @@ -353,7 +353,7 @@ $stage-width: 480px; } } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { .preview-row { margin-top: .5rem; align-items: center; @@ -389,13 +389,13 @@ $stage-width: 480px; z-index: 200; } - @media #{$small} { + @media #{frameless.$small} { width: 100%; } } .force-center { - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { align-self: center; } } @@ -409,7 +409,7 @@ $stage-width: 480px; margin-top: .3125rem; overflow: auto; - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { margin-top: .5rem; margin-left: 0; width: 100%; @@ -426,9 +426,9 @@ $stage-width: 480px; .remix-credit { margin-bottom: 1rem; - border: 1px solid $ui-blue-10percent; + border: 1px solid colors.$ui-blue-10percent; border-radius: 8px; - background-color: $ui-blue-10percent; + background-color: colors.$ui-blue-10percent; padding: .75rem; width: calc(100% - 1.5rem - 2px); flex-wrap: nowrap; @@ -440,7 +440,7 @@ $stage-width: 480px; */ min-height: max-content; - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { flex-direction: row; margin-bottom: .5rem; } @@ -476,9 +476,9 @@ $stage-width: 480px; .project-description { margin-bottom: .75rem; - border: 1px solid $ui-blue-10percent; + border: 1px solid colors.$ui-blue-10percent; border-radius: 8px; - background-color: $ui-blue-10percent; + background-color: colors.$ui-blue-10percent; padding: .5rem; width: calc(100% - (1rem + 2px)); overflow: auto; @@ -489,7 +489,7 @@ $stage-width: 480px; flex: 1; overflow-wrap: break-word; - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { text-align: center; } } @@ -514,9 +514,9 @@ $stage-width: 480px; .project-description-edit { display: flex; - border: 1px solid $ui-blue-10percent; + border: 1px solid colors.$ui-blue-10percent; border-radius: 8px; - background-color: $ui-blue-10percent; + background-color: colors.$ui-blue-10percent; padding: .5rem; width: 100%; white-space: pre-line; @@ -593,7 +593,7 @@ $stage-width: 480px; .project-lower-container { margin-top: 1rem; - background-color: $ui-blue-10percent; + background-color: colors.$ui-blue-10percent; padding: 1rem 0; min-height: 6rem; } @@ -611,7 +611,7 @@ $stage-width: 480px; justify-content: flex-start; flex-direction: row; - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { justify-content: center; } @@ -662,7 +662,7 @@ $stage-width: 480px; /* TODO: the following can be transferred to src/components/thumbnailcolumn/thumbnailcolumn.scss after testing */ - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { flex-direction: row; .thumbnail { @@ -671,7 +671,7 @@ $stage-width: 480px; } } - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { margin-top: 1rem; width: 100%; } diff --git a/src/views/preview/stats.scss b/src/views/preview/stats.scss index c33e768c8b1..4150d0f7f48 100644 --- a/src/views/preview/stats.scss +++ b/src/views/preview/stats.scss @@ -1,10 +1,10 @@ -@import "../../frameless"; +@use "../../frameless"; .stats { line-height: 2rem; justify-content: flex-start; - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { margin: 0; width: 100%; justify-content: center; @@ -12,7 +12,7 @@ } & > div { - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { padding: 0 1rem; } } diff --git a/src/views/preview/subactions.scss b/src/views/preview/subactions.scss index c5bc54f52f3..43f9029e2a7 100644 --- a/src/views/preview/subactions.scss +++ b/src/views/preview/subactions.scss @@ -1,12 +1,12 @@ -@import "../../colors"; -@import "../../frameless"; +@use "../../colors"; +@use "../../frameless"; .subactions { justify-content: flex-end; align-items: flex-start; flex: 1; - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { margin-top: 1rem; width: 100%; } @@ -15,10 +15,10 @@ margin-right: .75rem; vertical-align: middle; line-height: 2rem; - color: $type-gray; + color: colors.$type-gray; font-size: .875rem; - @media #{$small} { + @media #{frameless.$small} { margin-top: .5rem; width: 100%; order: 100; @@ -30,7 +30,7 @@ margin: 0; text-align: right; - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { padding: 0; } } @@ -39,7 +39,7 @@ display: flex; margin-top: 0; margin-bottom: 0; - color: $type-white; + color: colors.$type-white; font-size: .8rem; font-weight: 500; justify-content: flex-end; @@ -48,7 +48,7 @@ .action-button { margin: 0 0 0 .5rem; border-radius: 19px; - background-color: $ui-purple-dark; + background-color: colors.$ui-purple-dark; padding: 0 .75rem; height: 2rem; text-decoration: none; @@ -97,14 +97,14 @@ } .subactions, .subactions .action-buttons { - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { margin: 0; justify-content: center; flex-direction: row; } & > div, .action-button { - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { padding: 0 1rem; } } diff --git a/src/views/preview/unsupported-browser.scss b/src/views/preview/unsupported-browser.scss index 870b8cc498c..e425b2d1b8e 100644 --- a/src/views/preview/unsupported-browser.scss +++ b/src/views/preview/unsupported-browser.scss @@ -1,4 +1,4 @@ -@import "../../colors"; +@use "../../colors"; #view { position: relative; @@ -8,7 +8,7 @@ .unsupported-browser { position: absolute; - background-color: $ui-blue; + background-color: colors.$ui-blue; width: 100%; height: 100%; @@ -19,17 +19,17 @@ .content { margin: 100px auto; outline: none; - border: .25rem solid $ui-white-15percent; + border: .25rem solid colors.$ui-white-15percent; border-radius: .5rem; padding: 0; width: 500px; overflow: hidden; - color: $type-gray; + color: colors.$type-gray; user-select: none; } .illustration { - background-color: $ui-blue; + background-color: colors.$ui-blue; background-image: url("/images/unsupported.png"); background-size: cover; width: 100%; @@ -41,7 +41,7 @@ } .body { - background: $ui-white; + background: colors.$ui-white; padding: 1.5rem 2.25rem; text-align: center; } @@ -56,25 +56,25 @@ } .back-button { - border: 1px solid $ui-purple-dark; + border: 1px solid colors.$ui-purple-dark; border-radius: .25rem; - background: $ui-purple-dark; + background: colors.$ui-purple-dark; cursor: pointer; padding: .5rem 2rem; - color: $ui-white; + color: colors.$ui-white; font-size: .875rem; font-weight: bold; } .faq-link-text { margin: 2rem 0 .5rem 0; - color: $type-gray; + color: colors.$type-gray; font-size: .875rem; } .faq-link { text-decoration: none; - color: $link-purple; + color: colors.$link-purple; } } diff --git a/src/views/scratch_1.4/scratch_1.4.scss b/src/views/scratch_1.4/scratch_1.4.scss index 1b88fbce6d1..db6900a09b4 100644 --- a/src/views/scratch_1.4/scratch_1.4.scss +++ b/src/views/scratch_1.4/scratch_1.4.scss @@ -1,5 +1,5 @@ -@import "../../colors"; -@import "../../frameless"; +@use "../../colors"; +@use "../../frameless"; #view { padding: 0; @@ -9,29 +9,29 @@ .title-banner { &.masthead { margin-bottom: 0; - background-color: $ui-blue-dark; + background-color: colors.$ui-blue-dark; padding-bottom: 0; h1 { margin: 0 0 2rem 0; text-align: left; - color: $ui-white; + color: colors.$ui-white; } p { margin: 0; text-align: left; - color: $ui-white; + color: colors.$ui-white; a { - border-bottom: 1px solid $ui-white; - color: $ui-white; + border-bottom: 1px solid colors.$ui-white; + color: colors.$ui-white; } } .band { margin-top: 2rem; - background-color: $ui-white-15percent; + background-color: colors.$ui-white-15percent; padding: 1rem 0; } @@ -63,13 +63,13 @@ } .installation { - background-color: $ui-gray; + background-color: colors.$ui-gray; padding: 2rem; } .installation-column { padding-top: 40px; - max-width: $cols4; + max-width: frameless.$cols4; text-align: center; p { @@ -94,7 +94,7 @@ } .mod-link { - color: $ui-white; + color: colors.$ui-white; } #faqs { @@ -103,7 +103,7 @@ } } - @media #{$small} { + @media #{frameless.$small} { .inner { .installation-column { max-width: 100%; @@ -111,7 +111,7 @@ } } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { .three-col-row { flex-direction: column; align-items: center; diff --git a/src/views/search/search.scss b/src/views/search/search.scss index 358503caf98..625969399fc 100644 --- a/src/views/search/search.scss +++ b/src/views/search/search.scss @@ -1,10 +1,10 @@ -@import "../../colors"; -@import "../../frameless"; +@use "../../colors"; +@use "../../frameless"; -$base-bg: $ui-white; +$base-bg: colors.$ui-white; #view { - background-color: $ui-gray; + background-color: colors.$ui-gray; padding: 0; } @@ -12,24 +12,24 @@ $base-bg: $ui-white; .title-banner { &.masthead { margin-bottom: 0; - background-color: $ui-blue-dark; + background-color: colors.$ui-blue-dark; padding: 0; h1 { text-align: center; - color: $ui-white; + color: colors.$ui-white; font-size: 3rem; } p { margin: 0; - width: $cols6; + width: frameless.$cols6; text-align: left; - color: $ui-white; + color: colors.$ui-white; a { - border-bottom: 1px solid $ui-white; - color: $ui-white; + border-bottom: 1px solid colors.$ui-white; + color: colors.$ui-white; } } } @@ -38,8 +38,8 @@ $base-bg: $ui-white; .search { margin: 0 auto; border-right: 0; - width: $cols6; - color: $type-white; + width: frameless.$cols6; + color: colors.$type-white; .form { margin: 0; @@ -57,7 +57,7 @@ $base-bg: $ui-white; margin-top: 5px; outline: none; border: 0; - background-color: $active-gray; + background-color: colors.$active-gray; height: 14px; &[type=text] { @@ -67,7 +67,7 @@ $base-bg: $ui-white; padding-left: 40px; width: calc(100% - 50px); height: 40px; - color: $type-white; + color: colors.$type-white; font-size: .85em; &::placeholder { @@ -77,7 +77,7 @@ $base-bg: $ui-white; &:focus { transition: .15s ease background-color; - background-color: $active-dark-gray; + background-color: colors.$active-dark-gray; } .ie9 & { @@ -110,7 +110,7 @@ $base-bg: $ui-white; .sort-controls { display: flex; margin: 0 auto; - border-bottom: 1px solid $ui-border; + border-bottom: 1px solid colors.$ui-border; padding: 8px 0; width: 58.75rem; justify-content: space-between; @@ -127,7 +127,7 @@ $base-bg: $ui-white; border: 0; background-color: transparent; height: 32px; - color: $header-gray; + color: colors.$header-gray; &:focus, &:active { @@ -142,14 +142,14 @@ $base-bg: $ui-white; } .tab-background { - box-shadow: 0 0 1px $box-shadow-gray; - background-color: $ui-white; + box-shadow: 0 0 1px colors.$box-shadow-gray; + background-color: colors.$ui-white; width: 100%; } #projectBox { margin-top: 16px; - background-color: $ui-gray; + background-color: colors.$ui-gray; padding-bottom: 32px; width: 100%; overflow-anchor: none; @@ -170,10 +170,10 @@ $base-bg: $ui-white; } //4 columns -@media #{$small} { +@media #{frameless.$small} { .outer { .search { - width: $cols4; + width: frameless.$cols4; .btn-search { left: 40px; @@ -181,16 +181,16 @@ $base-bg: $ui-white; } .tabs { - width: $cols4; + width: frameless.$cols4; } .sort-controls { - width: $cols4; + width: frameless.$cols4; } #projectBox { .button { - width: $cols4; + width: frameless.$cols4; } } } @@ -198,38 +198,38 @@ $base-bg: $ui-white; //6 columns -@media #{$medium} { +@media #{frameless.$medium} { .outer { .tabs { - width: $cols6; + width: frameless.$cols6; } .sort-controls { - width: $cols6; + width: frameless.$cols6; } #projectBox { .button { - width: $cols6; + width: frameless.$cols6; } } } } // 8 columns -@media #{$intermediate} { +@media #{frameless.$intermediate} { .outer { .tabs { - width: $cols8; + width: frameless.$cols8; } .sort-controls { - width: $cols8; + width: frameless.$cols8; } #projectBox { .button { - width: $cols9; + width: frameless.$cols9; } } } diff --git a/src/views/splash/donate/donate-banner.scss b/src/views/splash/donate/donate-banner.scss index 86099a2bb32..39423982c21 100644 --- a/src/views/splash/donate/donate-banner.scss +++ b/src/views/splash/donate/donate-banner.scss @@ -1,5 +1,5 @@ -@import "../../../colors"; -@import "../../../frameless"; +@use "../../../colors"; +@use "../../../frameless"; $tile-height: 244px; @@ -7,7 +7,7 @@ $tile-height: 244px; display: flex; position: sticky; z-index: 8; - background-color: $ui-aqua-dark; + background-color: colors.$ui-aqua-dark; padding: 0; overflow: hidden; align-items: center; @@ -34,7 +34,7 @@ $tile-height: 244px; .donate-text { text-align: left; - color: $ui-white; + color: colors.$ui-white; font-size: 1rem; font-weight: bold; margin-right: 1rem; @@ -44,8 +44,8 @@ $tile-height: 244px; .donate-button { margin: 0 7rem 0 .5rem; border-radius: 1.25rem; - background-color: $ui-white; - color: $ui-aqua-dark; + background-color: colors.$ui-white; + color: colors.$ui-aqua-dark; padding: 0 1.75rem; height: 2.25rem; text-decoration: none; @@ -60,12 +60,12 @@ $tile-height: 244px; top: auto; } a { - color: $ui-white; + color: colors.$ui-white; text-decoration: underline; } } -@media only screen and (max-width: $mobileIntermediate) { +@media only screen and (max-width: frameless.$mobileIntermediate) { .donate-banner .donate-container .donate-central-items { flex-wrap: wrap; } diff --git a/src/views/splash/features/features-banner.scss b/src/views/splash/features/features-banner.scss index c950ecac51a..ea283e02b5b 100644 --- a/src/views/splash/features/features-banner.scss +++ b/src/views/splash/features/features-banner.scss @@ -1,10 +1,10 @@ -@import "../../../colors"; -@import "../../../frameless"; +@use "../../../colors"; +@use "../../../frameless"; .feature-banner { display: flex; position: relative; - background-color: $ui-aqua; + background-color: colors.$ui-aqua; background-image: url("/images/hoc/bg-pattern.png"); background-size: cover; padding: 0; @@ -13,7 +13,7 @@ .feature-container { margin: auto; - width: $desktop; + width: frameless.$desktop; justify-content: flex-start; .feature-title-container { @@ -25,62 +25,62 @@ .feature-banner-images { display: flex; - width: $desktop; + width: frameless.$desktop; justify-content: space-around; margin-bottom: 3rem; } .feature-banner-image { - border: 2px solid $ui-aqua; + border: 2px solid colors.$ui-aqua; border-radius: 16px; - background-color: $ui-white; - width: $cols8; + background-color: colors.$ui-white; + width: frameless.$cols8; height: 280px; overflow: hidden; box-sizing: border-box; justify-content: flex-start; img { - width: $cols8; + width: frameless.$cols8; height: 205px; object-fit: cover; } .feature-image-text { margin: auto auto; - color: $ui-purple-dark; + color: colors.$ui-purple-dark; font-size: 1rem; font-weight: bold; } } .feature-header{ - color: $ui-white; + color: colors.$ui-white; font-size: 2rem; } .feature-learn-more { border-radius: 10px; - background-color: $ui-white; + background-color: colors.$ui-white; padding: .75rem 1rem; - color: $ui-purple-dark; + color: colors.$ui-purple-dark; font-size: .75rem; font-weight: bold; } } -@media only screen and (min-width: $tabletPortrait) and (max-width: $desktop) { +@media only screen and (min-width: frameless.$tabletPortrait) and (max-width: frameless.$desktop) { .feature-banner { .feature-container { - width: $cols8; + width: frameless.$cols8; } .feature-banner-images { - width: $cols8; + width: frameless.$cols8; } .feature-banner-image { - width: $cols8; + width: frameless.$cols8; } } diff --git a/src/views/splash/hoc/hoc-banner.scss b/src/views/splash/hoc/hoc-banner.scss index abc9f590662..c41e147469d 100644 --- a/src/views/splash/hoc/hoc-banner.scss +++ b/src/views/splash/hoc/hoc-banner.scss @@ -1,12 +1,12 @@ -@import "../../../colors"; -@import "../../../frameless"; +@use "../../../colors"; +@use "../../../frameless"; $tile-height: 244px; .hoc-banner { display: flex; position: relative; - background-color: $ui-aqua; + background-color: colors.$ui-aqua; background-image: url("/images/hoc/bg-pattern.png"); background-size: cover; padding: 0; @@ -15,12 +15,12 @@ $tile-height: 244px; justify-content: center; &.mod-middle-banner { - background-color: $ui-magenta; + background-color: colors.$ui-magenta; } .hoc-container { margin: auto; - width: $desktop; + width: frameless.$desktop; height: 25rem; justify-content: flex-start; @@ -33,40 +33,40 @@ $tile-height: 244px; .hoc-banner-images { display: flex; - width: $desktop; + width: frameless.$desktop; justify-content: space-between; } .hoc-banner-image { - border: 2px solid $ui-aqua; + border: 2px solid colors.$ui-aqua; border-radius: 16px; - background-color: $ui-white; - width: $cols4; + background-color: colors.$ui-white; + width: frameless.$cols4; height: $tile-height; overflow: hidden; box-sizing: border-box; justify-content: flex-start; &.mod-middle-image { - border: 2px solid $ui-magenta; + border: 2px solid colors.$ui-magenta; } img { - width: $cols4; - height: $cols4 * 0.553333333; /* images are 600 x 332 for retina */ + width: frameless.$cols4; + height: frameless.$cols4 * 0.553333333; /* images are 600 x 332 for retina */ object-fit: cover; } .hoc-image-text { margin: auto auto; - color: $ui-purple-dark; + color: colors.$ui-purple-dark; font-size: 1rem; font-weight: bold; } } .hoc-header{ - color: $ui-white; + color: colors.$ui-white; } .hoc-header { @@ -75,9 +75,9 @@ $tile-height: 244px; .hoc-more-activities { border-radius: 10px; - background-color: $ui-white; + background-color: colors.$ui-white; padding: .5rem 1rem .75rem 1rem; - color: $ui-purple-dark; + color: colors.$ui-purple-dark; font-size: .75rem; font-weight: bold; @@ -90,21 +90,21 @@ $tile-height: 244px; } } -@media only screen and (min-width: $tabletPortrait) and (max-width: $desktop) { +@media only screen and (min-width: frameless.$tabletPortrait) and (max-width: frameless.$desktop) { .hoc-banner { height: 23.5rem; .hoc-container { bottom: 4rem; - width: $cols8; + width: frameless.$cols8; } .hoc-banner-images { - width: $cols8; + width: frameless.$cols8; } .hoc-banner-image { - width: $cols4; + width: frameless.$cols4; } } diff --git a/src/views/splash/splash.scss b/src/views/splash/splash.scss index 89a54e82799..99bed6905c1 100644 --- a/src/views/splash/splash.scss +++ b/src/views/splash/splash.scss @@ -1,5 +1,5 @@ -@import "../../colors"; -@import "../../frameless"; +@use "../../colors"; +@use "../../frameless"; #view { padding: 0; @@ -58,7 +58,7 @@ dt { margin: 2rem 0 1rem 0; - border-bottom: 1px solid $ui-dark-gray; + border-bottom: 1px solid colors.$ui-dark-gray; font-size: large; font-weight: 700; } @@ -125,19 +125,19 @@ } .social-message-date { - color: $ui-dark-gray; + color: colors.$ui-dark-gray; font-size: .65rem; } //4 columns -@media #{$small} { +@media #{frameless.$small} { .splash { .splash-header { flex-wrap: wrap; justify-content: center; .box { - width: $cols4; + width: frameless.$cols4; } } } @@ -153,14 +153,14 @@ } //6 columns -@media #{$medium} { +@media #{frameless.$medium} { .splash { .splash-header { flex-wrap: wrap; justify-content: center; .box { - width: $cols6; + width: frameless.$cols6; } } } @@ -172,16 +172,16 @@ .modal-content-iframe.mod-confirmation { border-radius: 0; - width: $mobileIntermediate - 1; + width: frameless.$mobileIntermediate - 1; } } //6 columns -@media #{$intermediate} { +@media #{frameless.$intermediate} { .splash { .splash-header { margin: 0 auto; - width: $cols8; + width: frameless.$cols8; } } } diff --git a/src/views/starter-projects/starter-projects.scss b/src/views/starter-projects/starter-projects.scss index 3b1f959e071..ac403ae8883 100644 --- a/src/views/starter-projects/starter-projects.scss +++ b/src/views/starter-projects/starter-projects.scss @@ -1,10 +1,10 @@ -@import "../../colors"; -@import "../../frameless"; +@use "../../colors"; +@use "../../frameless"; -$base-bg: $ui-white; +$base-bg: colors.$ui-white; #view { - background-color: $ui-white; + background-color: colors.$ui-white; padding: 0; } @@ -12,9 +12,9 @@ $base-bg: $ui-white; .page-header { margin-bottom: 3rem; padding: 2rem 0; - background-color: $ui-magenta-dark; + background-color: colors.$ui-magenta-dark; text-align: center; - color: $ui-white; + color: colors.$ui-white; } .paragraph { @@ -47,7 +47,7 @@ $base-bg: $ui-white; gap: 1rem; padding: 1rem 1.5rem; - background-color: $ui-magenta-dark; + background-color: colors.$ui-magenta-dark; border-radius: 50px; font-size: 1.5rem; @@ -64,7 +64,7 @@ $base-bg: $ui-white; align-items: center; gap: 4rem; padding: 4rem 0; - background-color: $ui-gray; + background-color: colors.$ui-gray; img { height: 13.5rem; diff --git a/src/views/studentcompleteregistration/studentcompleteregistration.scss b/src/views/studentcompleteregistration/studentcompleteregistration.scss index 8255cac8713..c8faf65b735 100644 --- a/src/views/studentcompleteregistration/studentcompleteregistration.scss +++ b/src/views/studentcompleteregistration/studentcompleteregistration.scss @@ -1,13 +1,13 @@ -@import "../../colors"; -@import "../../frameless"; +@use "../../colors"; +@use "../../frameless"; -@include responsive-layout (".student-registration", ".slide"); +@include frameless.responsive-layout (".student-registration", ".slide"); html, body { - background-color: $ui-purple-dark + background-color: colors.$ui-purple-dark } .student-complete-registration { - background-color: $ui-purple; + background-color: colors.$ui-purple; } diff --git a/src/views/studentregistration/studentregistration.scss b/src/views/studentregistration/studentregistration.scss index 68918761641..6e9d52c97f5 100644 --- a/src/views/studentregistration/studentregistration.scss +++ b/src/views/studentregistration/studentregistration.scss @@ -1,13 +1,13 @@ -@import "../../colors"; -@import "../../frameless"; +@use "../../colors"; +@use "../../frameless"; -@include responsive-layout (".student-registration", ".slide"); +@include frameless.responsive-layout (".student-registration", ".slide"); html, body { - background-color: $ui-purple-dark + background-color: colors.$ui-purple-dark } .student-registration { - background-color: $ui-purple; + background-color: colors.$ui-purple; } diff --git a/src/views/studio/modals/manager-limit-modal.scss b/src/views/studio/modals/manager-limit-modal.scss index dd994870912..4a6f2e72b01 100644 --- a/src/views/studio/modals/manager-limit-modal.scss +++ b/src/views/studio/modals/manager-limit-modal.scss @@ -1,10 +1,10 @@ -@import "../../../colors"; +@use "../../../colors"; .manager-limit-modal { width: 520px; .manager-limit-title { - background: $ui-blue; + background: colors.$ui-blue; border-top-left-radius: 12px; border-top-right-radius: 12px; padding-top: .75rem; diff --git a/src/views/studio/modals/promote-modal.scss b/src/views/studio/modals/promote-modal.scss index d6d6a508474..6bede2ac9c6 100644 --- a/src/views/studio/modals/promote-modal.scss +++ b/src/views/studio/modals/promote-modal.scss @@ -1,10 +1,10 @@ -@import "../../../colors"; +@use "../../../colors"; .promote-modal { width: 680px; .promote-title { - background: $ui-purple-dark; + background: colors.$ui-purple-dark; border-top-left-radius: 12px; border-top-right-radius: 12px; padding-top: .75rem; @@ -60,8 +60,8 @@ } .cancel-button { - background-color: $ui-white; - color: $ui-purple-dark; - box-shadow: 0px 0px 0 1px $ui-purple-dark; + background-color: colors.$ui-white; + color: colors.$ui-purple-dark; + box-shadow: 0px 0px 0 1px colors.$ui-purple-dark; } } diff --git a/src/views/studio/modals/studio-report-modal.scss b/src/views/studio/modals/studio-report-modal.scss index adfa9ac10b3..3dc1187787e 100644 --- a/src/views/studio/modals/studio-report-modal.scss +++ b/src/views/studio/modals/studio-report-modal.scss @@ -1,10 +1,10 @@ -@import "../../../colors"; -@import "../../../frameless"; +@use "../../../colors"; +@use "../../../frameless"; .studio-report-modal { .studio-report-title { - box-shadow: inset 0 -1px 0 0 $ui-red-dark; - background: $ui-red-dark; + box-shadow: inset 0 -1px 0 0 colors.$ui-red-dark; + background: colors.$ui-red-dark; border-top-left-radius: 12px; border-top-right-radius: 12px; padding-top: .75rem; @@ -21,14 +21,15 @@ display: grid; grid-template-columns: 1fr 1fr 1fr; - @media #{$medium} { /* Keep 3 columns to narrower width since it is in a modal */ + column-gap: 14px; + row-gap: 14px; + + @media #{frameless.$medium} { /* Keep 3 columns to narrower width since it is in a modal */ & { grid-template-columns: 1fr 1fr; } } - @media #{$small} { + @media #{frameless.$small} { & { grid-template-columns: 1fr; } } - column-gap: 14px; - row-gap: 14px; } .button { @@ -36,7 +37,7 @@ } .button:disabled { - background-color: $active-dark-gray; + background-color: colors.$active-dark-gray; } .studio-report-tile { @@ -89,7 +90,7 @@ } .studio-report-header-selected { - background: $ui-blue-25percent; + background: colors.$ui-blue-25percent; } .studio-report-button-row { diff --git a/src/views/studio/modals/transfer-host-modal.scss b/src/views/studio/modals/transfer-host-modal.scss index 219852f3658..beaba94ffc5 100644 --- a/src/views/studio/modals/transfer-host-modal.scss +++ b/src/views/studio/modals/transfer-host-modal.scss @@ -1,9 +1,9 @@ -@import "../../../colors"; -@import "../../../frameless"; +@use "../../../colors"; +@use "../../../frameless"; .transfer-host-modal { .transfer-host-title { - background: $ui-purple-dark; + background: colors.$ui-purple-dark; border-top-left-radius: 12px; border-top-right-radius: 12px; padding-top: .75rem; @@ -76,13 +76,13 @@ } .button:disabled { - background-color: $active-dark-gray; + background-color: colors.$active-dark-gray; } .cancel-button { - background-color: $ui-white; - color: $ui-purple-dark; - box-shadow: 0px 0px 0 1px $ui-purple-dark; + background-color: colors.$ui-white; + color: colors.$ui-purple-dark; + box-shadow: 0px 0px 0 1px colors.$ui-purple-dark; margin-right: 1rem; } @@ -92,26 +92,27 @@ .transfer-selection-heading { padding: 1rem; - background: $ui-blue-10percent; + background: colors.$ui-blue-10percent; } .transfer-selection-scroll-pane { height: 250px; padding-left: 1rem; padding-right: 1rem; - background: $ui-blue-10percent; + background: colors.$ui-blue-10percent; overflow: auto; } .transfer-host-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); - @media #{$intermediate-and-smaller} { - & { grid-template-columns: repeat(2, minmax(0,1fr)); } - } column-gap: 12px; row-gap: 12px; margin-bottom: 1rem; + + @media #{frameless.$intermediate-and-smaller} { + & { grid-template-columns: repeat(2, minmax(0,1fr)); } + } } .transfer-host-name-selected { @@ -127,7 +128,7 @@ } .transfer-host-tile-selected { - background: $ui-aqua; + background: colors.$ui-aqua; } .transfer-password-instruction { @@ -140,7 +141,7 @@ .transfer-password-input { margin-left: 2rem; - border: 1px solid $ui-border; + border: 1px solid colors.$ui-border; border-radius: .5rem; padding: 0.5rem 1rem; font-size: 1.5rem; @@ -168,7 +169,7 @@ } .transfer-outcome { - background: $ui-blue-10percent; + background: colors.$ui-blue-10percent; padding: 2rem 3rem; display: flex; } @@ -178,7 +179,7 @@ } .transfer-outcome-tile { - box-shadow: 0px 3px 5px $box-shadow-light-gray; + box-shadow: 0px 3px 5px colors.$box-shadow-light-gray; } .transfer-outcome-label { @@ -192,7 +193,7 @@ margin: auto 3rem 1rem 3rem; } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { .transfer-password-row { display: inline; height: unset; diff --git a/src/views/studio/modals/user-projects-modal.scss b/src/views/studio/modals/user-projects-modal.scss index c0daba361b8..c564edb7419 100644 --- a/src/views/studio/modals/user-projects-modal.scss +++ b/src/views/studio/modals/user-projects-modal.scss @@ -1,10 +1,10 @@ -@import "../../../colors"; -@import "../../../frameless"; +@use "../../../colors"; +@use "../../../frameless"; .user-projects-modal { .user-projects-modal-title { - box-shadow: inset 0 -1px 0 0 $box-shadow-light-gray; - background-color: $ui-purple-dark; + box-shadow: inset 0 -1px 0 0 colors.$box-shadow-light-gray; + background-color: colors.$ui-purple-dark; border-top-left-radius: 12px; border-top-right-radius: 12px; padding-top: .75rem; @@ -13,7 +13,7 @@ } .user-projects-modal-nav { padding: 6px 12px; - border-bottom: 1px solid $active-gray; + border-bottom: 1px solid colors.$active-gray; width: unset; button { cursor: pointer; @@ -21,7 +21,7 @@ border: 1px solid rgba(0, 0, 0, 0.15); color: #575e75; &.active { - background: $ui-purple-dark; + background: colors.$ui-purple-dark; color: white; } &:active { @@ -29,8 +29,8 @@ } } button:hover { - background: $ui-purple-25percent; - border: 1px solid $ui-purple-10percent; + background: colors.$ui-purple-25percent; + border: 1px solid colors.$ui-purple-10percent; } } .user-projects-modal-content { @@ -39,7 +39,7 @@ height: calc(100vh - 300px); overflow-y: auto; overscroll-behavior: contain; - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { & { height: calc(100vh - 170px); } } } @@ -48,7 +48,7 @@ display: flex; justify-content: flex-end; padding: 6px 12px; - border-top: 1px solid $active-gray; + border-top: 1px solid colors.$active-gray; } .studio-projects-empty { @@ -73,8 +73,8 @@ } .studio-tile-added { - border: 1px solid $ui-purple-dark !important; // Override the tile border set in studio.scss .studio-project-tile - box-shadow: 0 0 0 4px $ui-purple-25percent; + border: 1px solid colors.$ui-purple-dark !important; // Override the tile border set in studio.scss .studio-project-tile + box-shadow: 0 0 0 4px colors.$ui-purple-25percent; } .studio-project-add-remove-image { @@ -113,14 +113,15 @@ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); - @media #{$medium} { /* Keep 3 columns to narrower width since it is in a modal */ + column-gap: 14px; + row-gap: 14px; + + @media #{frameless.$medium} { /* Keep 3 columns to narrower width since it is in a modal */ & { grid-template-columns: repeat(2, minmax(0,1fr)); } } - @media #{$small} { + @media #{frameless.$small} { & { grid-template-columns: repeat(1, minmax(0,1fr)); } } - column-gap: 14px; - row-gap: 14px; .studio-project-bottom { padding: 8px 10px 8px 10px; diff --git a/src/views/studio/studio.scss b/src/views/studio/studio.scss index 301606e2436..64b46eae2ee 100644 --- a/src/views/studio/studio.scss +++ b/src/views/studio/studio.scss @@ -1,5 +1,5 @@ -@import "../../colors"; -@import "../../frameless"; +@use "../../colors"; +@use "../../frameless"; $radius: 8px; @@ -22,7 +22,7 @@ $radius: 8px; } /* WAT Why does everything center at smaller widths??!! */ - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { & { text-align: unset !important; } @@ -37,7 +37,7 @@ $radius: 8px; grid-template-columns: 300px minmax(0, 1fr); /* Stack vertically at medium size and smaller */ - @media #{$medium-and-smaller} { + @media #{frameless.$medium-and-smaller} { & { grid-template-columns: minmax(0, 1fr); } @@ -97,17 +97,17 @@ $radius: 8px; button { font-size: smaller; - background-color: $ui-purple-dark; + background-color: colors.$ui-purple-dark; border: 1px solid transparent; border-radius: 999em; - color: $ui-white; + color: colors.$ui-white; display: flex; align-items: center; padding: 0.25em; padding-right: 0.75em; &:hover { - background-color: $ui-purple-darker; + background-color: colors.$ui-purple-darker; } img { @@ -134,13 +134,13 @@ $radius: 8px; overflow-y: scroll; &.muted-editor { - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { height: 18rem; } } &.uneditable { - background: $ui-blue-10percent; + background: colors.$ui-blue-10percent; padding: 15px 20px; border-color: transparent; border-radius: $radius; @@ -155,7 +155,7 @@ $radius: 8px; line-height: 1.2em; &:not(:focus) { background: transparent; - border: 2px dashed $ui-dark-gray; + border: 2px dashed colors.$ui-dark-gray; border-radius: $radius; } } @@ -166,7 +166,7 @@ $radius: 8px; border-radius: 8px; background: white; box-sizing: border-box; - border: 2px solid $box-shadow-light-gray; + border: 2px solid colors.$box-shadow-light-gray; } .studio-follow-button { @@ -187,7 +187,7 @@ $radius: 8px; } .studio-tab-nav { - border-bottom: 1px solid $active-dark-gray; + border-bottom: 1px solid colors.$active-dark-gray; padding-bottom: 8px; font-size: 14px; margin: 8px; @@ -195,7 +195,7 @@ $radius: 8px; display: flex; align-items: center; background: white; - border: 1px solid $box-shadow-light-gray; + border: 1px solid colors.$box-shadow-light-gray; color: #575e75; padding: 0.75em 1.25em 0.75em 1em; &:active { @@ -212,18 +212,18 @@ $radius: 8px; } } .active > li { - background: $ui-purple-dark; + background: colors.$ui-purple-dark; color: white; img { filter: invert(0); } } a.nav_link:hover > li { - background: $active-gray; - border: 1px solid $active-gray; + background: colors.$active-gray; + border: 1px solid colors.$active-gray; } a.active.nav_link:hover > li { - background: $ui-purple-darker; + background: colors.$ui-purple-darker; color: white; img { filter: invert(0); @@ -240,11 +240,11 @@ $radius: 8px; width: 4.875rem; height: 2rem; - border: 1px solid $ui-purple-dark; + border: 1px solid colors.$ui-purple-dark; border-radius: 1rem; font-weight: bold; - color: $ui-purple-dark; + color: colors.$ui-purple-dark; font-size: 12px; display: flex; justify-content: center; @@ -266,11 +266,11 @@ $radius: 8px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); - @media #{$intermediate-and-smaller} { - & { grid-template-columns: repeat(2, minmax(0,1fr)); } - } column-gap: 20px; row-gap: 20px; + @media #{frameless.$intermediate-and-smaller} { + & { grid-template-columns: repeat(2, minmax(0,1fr)); } + } } .studio-grid-load-more { @@ -283,7 +283,7 @@ $radius: 8px; .studio-project-tile { background: white; border-radius: 8px; - border: 1px solid $ui-border; + border: 1px solid colors.$ui-border; position: relative; margin: 0; padding: 0; @@ -318,7 +318,7 @@ $radius: 8px; min-width: 0; /* Prevents within from expanding beyond bounds */ } .studio-project-title { - color: $link-purple; + color: colors.$link-purple; font-weight: 700; font-size: 14px; white-space: nowrap; @@ -334,7 +334,7 @@ $radius: 8px; text-overflow: ellipsis; } .studio-project-remove { - color: $ui-blue; + color: colors.$ui-blue; background: transparent; border: none; } @@ -344,11 +344,11 @@ $radius: 8px; margin-top: 20px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); - @media #{$intermediate-and-smaller} { - & { grid-template-columns: repeat(2, minmax(0,1fr)); } - } column-gap: 20px; row-gap: 20px; + @media #{frameless.$intermediate-and-smaller} { + & { grid-template-columns: repeat(2, minmax(0,1fr)); } + } } .studio-tabs { @@ -358,7 +358,7 @@ $radius: 8px; .studio-member-tile { background: white; border-radius: 8px; - border: 1px solid $ui-border; + border: 1px solid colors.$ui-border; display: flex; padding: 10px 6px 10px 12px; @@ -380,7 +380,7 @@ $radius: 8px; min-width: 0; /* Prevents within from expanding beyond bounds */ } .studio-member-name { - color: $link-purple; + color: colors.$link-purple; font-weight: 700; font-size: 14px; white-space: nowrap; @@ -410,7 +410,7 @@ $radius: 8px; margin-top: 20px; h3 { - color: $ui-purple-dark; + color: colors.$ui-purple-dark; } .studio-adder-row { @@ -424,7 +424,7 @@ $radius: 8px; transform: none; width: 200px; } - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { & { width: 100%; margin-top: .5rem; @@ -440,7 +440,7 @@ $radius: 8px; input { flex-grow: 1; display: inline-block; - border: 1px solid $ui-border; + border: 1px solid colors.$ui-border; border-radius: .5rem; padding: 1em 1.25em; font-size: .8rem; @@ -454,7 +454,7 @@ $radius: 8px; .studio-adder-vertical-divider { margin: 0 6px; - border: 1px solid $ui-border; + border: 1px solid colors.$ui-border; align-self: stretch; } } @@ -462,10 +462,10 @@ $radius: 8px; .studio-activity { .studio-messages-list { - border: 1px solid $ui-border; + border: 1px solid colors.$ui-border; border-bottom-width: 0; border-radius: 5px; - background-color: $ui-white; + background-color: colors.$ui-white; padding-left: 0px; } .studio-activity-icon { @@ -547,7 +547,7 @@ $radius: 8px; box-sizing: border-box; min-height: 85px; /* So the box doesn't change height after being accepted */ - @media #{$intermediate-and-smaller} { + @media #{frameless.$intermediate-and-smaller} { flex-direction: column; .studio-invitation-msg { margin-top: .5rem; @@ -562,8 +562,8 @@ $radius: 8px; align-items: center; border-radius: 4px; - background: $ui-blue-10percent; - border: 1px solid $ui-blue-25percent; + background: colors.$ui-blue-10percent; + border: 1px solid colors.$ui-blue-25percent; &.studio-info-box-success { background: #CEF2E8; @@ -571,7 +571,7 @@ $radius: 8px; } &.studio-info-box-error { background: #FFF0DF; - border: 1px solid $ui-dark-orange; + border: 1px solid colors.$ui-dark-orange; } .studio-info-close-button { @@ -580,7 +580,7 @@ $radius: 8px; } .studio-thumb-edit-button { - color: $link-purple; + color: colors.$link-purple; font-size: 1rem; font-weight: bold; height: 40px; @@ -649,7 +649,7 @@ $radius: 8px; } .mod-form-error { /* When a field contains a value is causing an error */ - border-color: $ui-orange !important; + border-color: colors.$ui-orange !important; } .studio-curator-mute-box { diff --git a/src/views/teacherregistration/teacherregistration.scss b/src/views/teacherregistration/teacherregistration.scss index ad13f93f52a..1a051b844df 100644 --- a/src/views/teacherregistration/teacherregistration.scss +++ b/src/views/teacherregistration/teacherregistration.scss @@ -1,13 +1,13 @@ -@import "../../colors"; -@import "../../frameless"; +@use "../../colors"; +@use "../../frameless"; -@include responsive-layout (".teacher-registration", ".slide"); +@include frameless.responsive-layout (".teacher-registration", ".slide"); html, body { - background-color: $ui-purple-dark + background-color: colors.$ui-purple-dark } .teacher-registration { - background-color: $ui-purple; + background-color: colors.$ui-purple; } diff --git a/src/views/teachers/landing/landing.scss b/src/views/teachers/landing/landing.scss index 81899b31862..ce7e3168926 100644 --- a/src/views/teachers/landing/landing.scss +++ b/src/views/teachers/landing/landing.scss @@ -1,8 +1,8 @@ -@import "../../../colors"; -@import "../../../frameless"; +@use "../../../colors"; +@use "../../../frameless"; -$teacher-spot: $ui-purple-dark; -$story-width: $cols3; +$teacher-spot: colors.$ui-purple-dark; +$story-width: frameless.$cols3; #view { padding: 0; @@ -29,7 +29,7 @@ $story-width: $cols3; h1 { margin: 0; - color: $ui-white; + color: colors.$ui-white; } @@ -40,24 +40,24 @@ $story-width: $cols3; p { margin: 0; - max-width: $cols6; + max-width: frameless.$cols6; text-align: left; - color: $ui-white; + color: colors.$ui-white; a { - border-bottom: 1px solid $ui-white; - color: $ui-white; + border-bottom: 1px solid colors.$ui-white; + color: colors.$ui-white; } } } .video-player { position: relative; - margin-bottom: $gutter; - border: .25rem solid $ui-white-15percent; + margin-bottom: frameless.$gutter; + border: .25rem solid colors.$ui-white-15percent; border-radius: 10px; - width: $cols4; - height: $cols4 * .5625; + width: frameless.$cols4; + height: frameless.$cols4 * .5625; overflow: hidden; iframe { @@ -68,7 +68,7 @@ $story-width: $cols3; } .band { - $band-color: $box-shadow-light-gray; + $band-color: colors.$box-shadow-light-gray; margin-top: 2rem; background-color: $band-color; @@ -78,7 +78,7 @@ $story-width: $cols3; } .feature { - background-color: $ui-blue-10percent; + background-color: colors.$ui-blue-10percent; margin-bottom: 2.75rem; section#sip { @@ -189,11 +189,11 @@ $story-width: $cols3; p { margin: 0; text-align: left; - color: $ui-white; + color: colors.$ui-white; a { - border-bottom: 1px solid $ui-white; - color: $ui-white; + border-bottom: 1px solid colors.$ui-white; + color: colors.$ui-white; } } @@ -201,12 +201,12 @@ $story-width: $cols3; margin: 0 0 2rem 0; text-align: left; line-height: normal; - color: $ui-white; + color: colors.$ui-white; } .teacher-account-buttons { li { - border: 2px solid $ui-white; + border: 2px solid colors.$ui-white; padding: 16px; font-size: 16px; font-weight: 500; @@ -214,8 +214,8 @@ $story-width: $cols3; } #left { - width: $cols4; - max-width: $cols4; + width: frameless.$cols4; + max-width: frameless.$cols4; text-align: left; @@ -225,17 +225,17 @@ $story-width: $cols3; } img { - width: $cols7; + width: frameless.$cols7; } } } //4 columns -@media #{$small} { - $story-width: $cols4; +@media #{frameless.$small} { + $story-width: frameless.$cols4; .stories { - width: $cols4; + width: frameless.$cols4; } .story { @@ -313,11 +313,11 @@ $story-width: $cols3; } //6 columns -@media #{$medium} { - $story-width: $cols3; +@media #{frameless.$medium} { + $story-width: frameless.$cols3; .stories { - width: $cols6; + width: frameless.$cols6; } .story { @@ -386,11 +386,11 @@ $story-width: $cols3; //8 columns -@media #{$intermediate} { - $story-width: $cols4; +@media #{frameless.$intermediate} { + $story-width: frameless.$cols4; .stories { - width: $cols8; + width: frameless.$cols8; } .story { @@ -409,11 +409,11 @@ $story-width: $cols3; .masthead-info { p { - width: $cols4; + width: frameless.$cols4; } iframe { - width: $cols4; + width: frameless.$cols4; box-sizing: border-box; } } @@ -438,7 +438,7 @@ $story-width: $cols3; .educators { #resources { margin: 0 auto; - width: $cols6; + width: frameless.$cols6; .educator-community { justify-content: center; @@ -446,7 +446,7 @@ $story-width: $cols3; #guides-header { margin: auto; - width: $cols6; + width: frameless.$cols6; text-align: left; } @@ -459,12 +459,12 @@ $story-width: $cols3; } p { - width: $cols4; + width: frameless.$cols4; } img { margin: 0; - width: $cols2; + width: frameless.$cols2; } } } @@ -507,16 +507,16 @@ $story-width: $cols3; } #left { - width: $cols4; + width: frameless.$cols4; } } // 12 columns -@media #{$big} { - $story-width: $cols3; +@media #{frameless.$big} { + $story-width: frameless.$cols3; .stories { - width: $cols12; + width: frameless.$cols12; } .story { diff --git a/src/views/teacherwaitingroom/teacherwaitingroom.scss b/src/views/teacherwaitingroom/teacherwaitingroom.scss index 369356eace2..eb65d4d20a3 100644 --- a/src/views/teacherwaitingroom/teacherwaitingroom.scss +++ b/src/views/teacherwaitingroom/teacherwaitingroom.scss @@ -1,12 +1,12 @@ -@import "../../colors"; +@use "../../colors"; html, body { - background-color: $ui-purple-dark + background-color: colors.$ui-purple-dark } .teacher-waitingroom { - background-color: $ui-purple; + background-color: colors.$ui-purple; .slide { max-width: 38.75rem; diff --git a/src/views/wedo2-legacy/wedo2.scss b/src/views/wedo2-legacy/wedo2.scss index 103ae63bc6c..0014ea83302 100644 --- a/src/views/wedo2-legacy/wedo2.scss +++ b/src/views/wedo2-legacy/wedo2.scss @@ -1,5 +1,5 @@ -@import "../../colors"; -@import "../../frameless"; +@use "../../colors"; +@use "../../frameless"; #view { padding: 0; @@ -30,16 +30,16 @@ .top-banner { margin-bottom: 50px; - background-color: $ui-blue; + background-color: colors.$ui-blue; padding: 50px 0; width: 100%; h2 { - color: $ui-white; + color: colors.$ui-white; } p { - color: $ui-white; + color: colors.$ui-white; } .columns2 { @@ -49,11 +49,11 @@ } .banner-text { - max-width: $cols7; + max-width: frameless.$cols7; } .banner-photo { - max-width: $cols4; + max-width: frameless.$cols4; img { width: 100%; @@ -74,7 +74,7 @@ .column { margin: 15px; - max-width: $cols4; + max-width: frameless.$cols4; img { margin: 0 auto; @@ -93,7 +93,7 @@ } .banner { - background-color: $ui-gray; + background-color: colors.$ui-gray; padding: 10px 0 50px; h3 { @@ -104,7 +104,7 @@ .project-list { display: flex; margin: 0 auto; - max-width: $cols9; + max-width: frameless.$cols9; justify-content: space-between; } @@ -112,20 +112,20 @@ transition: transform .25s ease; margin: 10px; border-radius: 7px; - background-color: $ui-white; - max-width: $cols3; + background-color: colors.$ui-white; + max-width: frameless.$cols3; overflow: hidden; img { - border-bottom: 2px solid $ui-white; + border-bottom: 2px solid colors.$ui-white; width: 100%; } p { display: block; margin: 15px 15px 20px; - color: $ui-blue; + color: colors.$ui-blue; font-weight: 500; } @@ -135,7 +135,7 @@ cursor: pointer; p { - color: $ui-blue-dark; + color: colors.$ui-blue-dark; } } } @@ -145,7 +145,7 @@ .device-card { display: inline-block; margin: 0 10px; - max-width: $cols3; + max-width: frameless.$cols3; img { width: 100%; @@ -156,7 +156,7 @@ // Responsive Behavior //4 columns -@media #{$small} { +@media #{frameless.$small} { .wedo { .inner { margin: 0 auto; @@ -180,13 +180,13 @@ .columns3 .column { display: block; margin: 20px auto; - width: $cols6; + width: frameless.$cols6; } } } //6 columns -@media #{$medium} { +@media #{frameless.$medium} { .wedo { .project-list, .columns3 { @@ -204,13 +204,13 @@ .project-card, .columns3 .column { display: inline-block; - width: $cols6; + width: frameless.$cols6; } } } //8 columns -@media #{$intermediate} { +@media #{frameless.$intermediate} { #view { text-align: center; } @@ -220,13 +220,13 @@ text-align: left; .banner-photo { - max-width: $cols3; + max-width: frameless.$cols3; } } .inner { margin: 0 auto; - width: $mobileIntermediate; + width: frameless.$mobileIntermediate; } } } diff --git a/src/views/wedo2/wedo2.scss b/src/views/wedo2/wedo2.scss index f4343dbb096..2a3aff1c033 100644 --- a/src/views/wedo2/wedo2.scss +++ b/src/views/wedo2/wedo2.scss @@ -1,8 +1,8 @@ -@import "../../colors"; +@use "../../colors"; .wedo2 { .extension-header { - background-color: $ui-magenta-dark; + background-color: colors.$ui-magenta-dark; background-image: url("/images/wedo2/wedo2-pattern.svg"); } } diff --git a/webpack.config.js b/webpack.config.js index 0d8f1078b1f..5c98a901ba8 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -158,7 +158,14 @@ module.exports = { } } }, - 'sass-loader' + { + loader: 'sass-loader', + options: { + sassOptions: { + silenceDeprecations: ['legacy-js-api'] + } + } + } ] }, { From 82911a05f57fef3b2d1b8b2cd10987731b84f9bb Mon Sep 17 00:00:00 2001 From: MiroslavDionisiev Date: Mon, 10 Feb 2025 11:34:54 +0200 Subject: [PATCH 2/2] chore: add commend about silencing the warnings --- webpack.config.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/webpack.config.js b/webpack.config.js index 5c98a901ba8..c6693e819a0 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -160,6 +160,9 @@ module.exports = { }, { loader: 'sass-loader', + // Silencing deprecation warnings for using legacy-js-api + // https://sass-lang.com/documentation/breaking-changes/legacy-js-api/ + // The legacy api will be removed entirely in Dart Sass 2.0.0 options: { sassOptions: { silenceDeprecations: ['legacy-js-api']