From a5454b82555dfce4b6eae5ea338ef0ba7fa5a507 Mon Sep 17 00:00:00 2001 From: Collin Beczak Date: Tue, 25 Aug 2026 16:31:00 -0500 Subject: [PATCH] fix deprecated scss imports --- .../ActivityTimeline/ActivityTimeline.scss | 6 +- src/components/AdminPane/AdminPane.scss | 98 +++++++------- .../CalendarHeatmap/CalendarHeatmap.scss | 11 +- .../ChallengeDashboard.scss | 43 ++++--- .../Manage/InspectTask/InspectTask.scss | 2 +- .../ProjectDashboard/ProjectDashboard.scss | 39 +++--- .../Manage/ProjectList/ProjectList.scss | 16 +-- .../ProjectsDashboard/ProjectsDashboard.scss | 10 +- src/components/BusySpinner/BusySpinner.scss | 9 +- .../ChallengeFilterSubnav.scss | 48 +++---- .../ChallengeResultItem.scss | 56 ++++---- .../ChallengeResultList.scss | 22 ++-- .../ChallengeProgress/ChallengeProgress.scss | 4 +- .../CommentCountBadge/CommentCountBadge.scss | 12 +- .../ConfirmAction/ConfirmAction.scss | 8 +- .../CongratulateModal/CongratulateModal.scss | 20 +-- .../CountrySelector/CountrySelector.scss | 10 +- .../RJSFFormFieldAdapter.scss | 60 ++++----- .../EnhancedMap/MapPane/MapPane.scss | 55 ++++---- src/components/InsetMap/InsetMap.scss | 6 +- .../InspectTaskControls.scss | 2 +- .../KeywordAutosuggestInput.scss | 9 +- .../LoadMoreButton/LoadMoreButton.scss | 5 +- .../MobileNotSupported.scss | 16 +-- src/components/Navbar/Navbar.scss | 44 +++---- .../OSMElementTags/OSMElementTags.scss | 6 +- .../PastDurationSelector.scss | 10 +- .../PublicWidgetGrid/PublicWidgetGrid.scss | 14 +- .../ReviewTaskControls.scss | 2 +- .../ReviewTaskPane/ReviewTaskPane.scss | 6 +- src/components/SearchBox/SearchBox.scss | 14 +- src/components/ShareLink/ShareLink.scss | 13 +- src/components/SignInButton/SignInButton.scss | 8 +- .../TaskClusterMap/TaskClusterMap.scss | 4 +- .../ActiveTaskControls.scss | 34 ++--- .../TaskCompletionStep.scss | 8 +- .../KeyboardShortcutList.scss | 6 +- .../MobileTaskDetails/MobileTaskDetails.scss | 27 ++-- .../TaskLocationMap/TaskLocationMap.scss | 4 +- .../TaskRandomnessControl.scss | 4 +- .../TaskStatusIndicator.scss | 28 ++-- src/components/WidgetGrid/WidgetGrid.scss | 14 +- .../WidgetWorkspace/WidgetWorkspace.scss | 6 +- src/index.scss | 10 +- src/mixins.scss | 22 ++-- src/pages/Leaderboard/LeaderboardMap.scss | 4 +- src/theme.scss | 120 +++++++++--------- 47 files changed, 497 insertions(+), 478 deletions(-) diff --git a/src/components/ActivityTimeline/ActivityTimeline.scss b/src/components/ActivityTimeline/ActivityTimeline.scss index 06648f3f3..d7c655ed8 100644 --- a/src/components/ActivityTimeline/ActivityTimeline.scss +++ b/src/components/ActivityTimeline/ActivityTimeline.scss @@ -1,7 +1,7 @@ -@import '../../variables.scss'; +@use '../../variables.scss'; $markerColor: #F7BB59; -$markerTextColor: $white; +$markerTextColor: variables.$white; $headingColor: $markerColor; $badgeColor: #F2EFE9; $badgeTextColor: #737373; @@ -49,7 +49,7 @@ $badgeTextColor: #737373; margin-top: 20px; .challenge-name { - font-weight: $weight-light; + font-weight: variables.$weight-light; margin-bottom: 5px; } } diff --git a/src/components/AdminPane/AdminPane.scss b/src/components/AdminPane/AdminPane.scss index 6c0c48112..9d1318125 100644 --- a/src/components/AdminPane/AdminPane.scss +++ b/src/components/AdminPane/AdminPane.scss @@ -1,4 +1,4 @@ -@import '../../variables.scss'; +@use '../../variables.scss'; .admin { display: flex; @@ -14,26 +14,26 @@ } h1 { - font-size: $size-2; - font-weight: $title-weight; - color: $title-color; + font-size: variables.$size-2; + font-weight: variables.$title-weight; + color: variables.$title-color; } h3.subtitle { - color: $primary; - font-weight: $weight-normal; + color: variables.$primary; + font-weight: variables.$weight-normal; } .search-box { - border: 2px solid $grey-lighter-more; - border-radius: $radius-medium; + border: 2px solid variables.$grey-lighter-more; + border-radius: variables.$radius-medium; max-width: 320px; .control-wrapper svg { - fill: $grey-light; + fill: variables.$grey-light; input::placeholder { - color: $grey-light; + color: variables.$grey-light; } } } @@ -48,21 +48,21 @@ svg.icon { height: 18px; width: auto; - fill: $grey-lightest; + fill: variables.$grey-lightest; vertical-align: middle; } } .tabs { ul { - border-bottom: 2px solid $grey-lightest-less; + border-bottom: 2px solid variables.$grey-lightest-less; li { a { - font-size: $size-5; - color: $green; - font-weight: $weight-light; - letter-spacing: $letter-spacing-medium; + font-size: variables.$size-5; + color: variables.$green; + font-weight: variables.$weight-light; + letter-spacing: variables.$letter-spacing-medium; padding: 10px 0px 12px 0px; margin: 0px 13px; border-bottom: none; @@ -72,9 +72,9 @@ margin-bottom: -2px; a { - font-weight: $weight-semibold; - color: $green; - border-bottom: 3px solid $green; + font-weight: variables.$weight-semibold; + color: variables.$green; + border-bottom: 3px solid variables.$green; padding-bottom: 11px; } } @@ -108,8 +108,8 @@ flex-wrap: wrap; h3 { - font-size: $size-3; - color: $subtitle-color; + font-size: variables.$size-3; + color: variables.$subtitle-color; display: flex; justify-content: flex-start; @@ -123,9 +123,9 @@ nav.breadcrumb { overflow: visible; - font-size: $size-5; + font-size: variables.$size-5; margin-bottom: 0; - color: $white; + color: variables.$white; margin-bottom: 0.5em; ul { @@ -139,7 +139,7 @@ li a { display: inline; - color: $white; + color: variables.$white; line-height: 16px; overflow: hidden; text-overflow: ellipsis; @@ -151,7 +151,7 @@ } li.is-active:not(.nav-title) a { - color: $yellow; + color: variables.$yellow; .busy-spinner { margin-left: 10px; @@ -159,11 +159,11 @@ } li + li:before { - color: $white; + color: variables.$white; } @media(max-width: 1000px) { - font-size: $size-6; + font-size: variables.$size-6; padding-top: 0.5em; } @@ -186,14 +186,14 @@ } .status-label { - font-weight: $weight-light; - color: $grey; - font-size: $size-6-plus; + font-weight: variables.$weight-light; + color: variables.$grey; + font-size: variables.$size-6-plus; } .status-value { - color: $grey; - font-size: $size-6-plus; + color: variables.$grey; + font-size: variables.$size-6-plus; } .start-challenge-control { @@ -202,7 +202,7 @@ } &__controls.columns { - font-size: $size-5; + font-size: variables.$size-5; display: flex; justify-content: flex-end; align-items: center; @@ -220,21 +220,21 @@ } &:hover { - color: $white; + color: variables.$white; .basic-dropdown-indicator { - border-color: $white; + border-color: variables.$white; } } } svg { fill: #91F3A2; - height: $size-5; + height: variables.$size-5; width: auto; &:hover { - fill: $white; + fill: variables.$white; } } @@ -262,7 +262,7 @@ } &__managed-item-list { - font-size: $size-5; + font-size: variables.$size-5; svg.icon { height: 18px; @@ -294,11 +294,11 @@ svg.icon { height: 24px; width: auto; - fill: $green-light; + fill: variables.$green-light; vertical-align: middle; &.enabled { - fill: $green; + fill: variables.$green; } } } @@ -309,12 +309,12 @@ svg.icon { height: 18px; width: auto; - fill: $grey-lightest; + fill: variables.$grey-lightest; vertical-align: middle; transform: rotate(10deg); &.enabled { - fill: $blue; + fill: variables.$blue; } } } @@ -325,11 +325,11 @@ svg.icon { height: 18px; width: auto; - fill: $grey-lightest; + fill: variables.$grey-lightest; vertical-align: middle; &.enabled { - fill: $blue; + fill: variables.$blue; } } } @@ -343,22 +343,22 @@ } .column.controls { - color: $grey-light; + color: variables.$grey-light; svg { - fill: $grey-light; + fill: variables.$grey-light; &:hover { - fill: $grey-darkest; + fill: variables.$grey-darkest; } } a, a:link, a:visited, a:active { - color: $grey-light; + color: variables.$grey-light; } a:hover { - color: $grey-darkest; + color: variables.$grey-darkest; } } } diff --git a/src/components/AdminPane/Manage/CalendarHeatmap/CalendarHeatmap.scss b/src/components/AdminPane/Manage/CalendarHeatmap/CalendarHeatmap.scss index 872f89bf5..44737f807 100644 --- a/src/components/AdminPane/Manage/CalendarHeatmap/CalendarHeatmap.scss +++ b/src/components/AdminPane/Manage/CalendarHeatmap/CalendarHeatmap.scss @@ -1,13 +1,14 @@ -@import '../../../../variables.scss'; +@use "sass:list"; +@use '../../../../variables.scss'; .calendar-heatmap { $calendar-bucket-colors: ( - $chart-blue-light, $chart-green, $chart-brown, - $chart-yellow, $chart-orange, $chart-red + variables.$chart-blue-light, variables.$chart-green, variables.$chart-brown, + variables.$chart-yellow, variables.$chart-orange, variables.$chart-red ); - @for $i from 1 through length($calendar-bucket-colors) { - .color-bucket-#{$i - 1} { fill: nth($calendar-bucket-colors, $i); } + @for $i from 1 through list.length($calendar-bucket-colors) { + .color-bucket-#{$i - 1} { fill: list.nth($calendar-bucket-colors, $i); } } .color-empty { diff --git a/src/components/AdminPane/Manage/ChallengeDashboard/ChallengeDashboard.scss b/src/components/AdminPane/Manage/ChallengeDashboard/ChallengeDashboard.scss index ed7b3400b..75c7a7ef1 100644 --- a/src/components/AdminPane/Manage/ChallengeDashboard/ChallengeDashboard.scss +++ b/src/components/AdminPane/Manage/ChallengeDashboard/ChallengeDashboard.scss @@ -1,4 +1,5 @@ -@import '../../../../mixins.scss'; +@use '../../../../mixins.scss'; +@use "../../../../variables"; .admin__manage.challenge-dashboard { section { @@ -23,14 +24,14 @@ } .status-label { - font-weight: $weight-light; - color: $grey; - font-size: $size-6-plus; + font-weight: variables.$weight-light; + color: variables.$grey; + font-size: variables.$size-6-plus; } .status-value { - color: $grey; - font-size: $size-6-plus; + color: variables.$grey; + font-size: variables.$size-6-plus; } .challenge-keywords { @@ -75,51 +76,51 @@ .filter-option.status-filter .field { &.created { label::before, label::after { - background-color: $status-created-color !important; + background-color: variables.$status-created-color !important; } } &.fixed { label::before, label::after { - background-color: $status-fixed-color !important; + background-color: variables.$status-fixed-color !important; } } &.falsePositive { label::before, label::after { - background-color: $status-falsePositive-color !important; + background-color: variables.$status-falsePositive-color !important; } } &.skipped { label::before, label::after { - background-color: $status-skipped-color !important; + background-color: variables.$status-skipped-color !important; } label::after { - border-color: $grey-darkest !important; + border-color: variables.$grey-darkest !important; } } &.deleted { label::before, label::after { - background-color: $status-deleted-color !important; + background-color: variables.$status-deleted-color !important; } label::after { - border-color: $grey-darkest !important; + border-color: variables.$grey-darkest !important; } } &.alreadyFixed { label::before, label::after { - background-color: $status-alreadyFixed-color !important; + background-color: variables.$status-alreadyFixed-color !important; } } &.tooHard { label::before, label::after { - background-color: $status-tooHard-color !important; + background-color: variables.$status-tooHard-color !important; } } } @@ -127,13 +128,13 @@ .filter-option.priority-filter .field { &.low, &.medium, &.high { label::before, label::after { - background-color: $grey-lightest !important; + background-color: variables.$grey-lightest !important; } label::after { border: none; transform: none; - color: $green; + color: variables.$green; font-size: 10px; left: 7px; top: 4px; @@ -170,8 +171,8 @@ padding: 0px 20px 5px 10px; margin-bottom: 10px; margin-right: 10px; - background-color: $grey-lightest; - border-radius: $radius-medium; + background-color: variables.$grey-lightest; + border-radius: variables.$radius-medium; .dropdown { height: 1.25em; @@ -194,8 +195,8 @@ fill: white; &:hover { - color: $black; - fill: $black; + color: variables.$black; + fill: variables.$black; } } } diff --git a/src/components/AdminPane/Manage/InspectTask/InspectTask.scss b/src/components/AdminPane/Manage/InspectTask/InspectTask.scss index 4167e77d4..8146845d4 100644 --- a/src/components/AdminPane/Manage/InspectTask/InspectTask.scss +++ b/src/components/AdminPane/Manage/InspectTask/InspectTask.scss @@ -1,4 +1,4 @@ -@import '../../../../variables.scss'; +@use '../../../../variables.scss'; .admin__manage.inspect-task { .task-pane { diff --git a/src/components/AdminPane/Manage/ProjectDashboard/ProjectDashboard.scss b/src/components/AdminPane/Manage/ProjectDashboard/ProjectDashboard.scss index 2a4823dfb..d23adacb9 100644 --- a/src/components/AdminPane/Manage/ProjectDashboard/ProjectDashboard.scss +++ b/src/components/AdminPane/Manage/ProjectDashboard/ProjectDashboard.scss @@ -1,4 +1,5 @@ -@import '../../../../mixins.scss'; +@use '../../../../mixins.scss'; +@use "../../../../variables"; .admin__manage.project-dashboard { .admin__manage__primary-content { @@ -27,14 +28,14 @@ } .status-label { - font-weight: $weight-light; - color: $grey; - font-size: $size-6-plus; + font-weight: variables.$weight-light; + color: variables.$grey; + font-size: variables.$size-6-plus; } .status-value { - color: $grey; - font-size: $size-6-plus; + color: variables.$grey; + font-size: variables.$size-6-plus; } .challenge-keywords { @@ -79,51 +80,51 @@ .filter-option.status-filter .field { &.created { label::before, label::after { - background-color: $status-created-color !important; + background-color: variables.$status-created-color !important; } } &.fixed { label::before, label::after { - background-color: $status-fixed-color !important; + background-color: variables.$status-fixed-color !important; } } &.falsePositive { label::before, label::after { - background-color: $status-falsePositive-color !important; + background-color: variables.$status-falsePositive-color !important; } } &.skipped { label::before, label::after { - background-color: $status-skipped-color !important; + background-color: variables.$status-skipped-color !important; } label::after { - border-color: $grey-darkest !important; + border-color: variables.$grey-darkest !important; } } &.deleted { label::before, label::after { - background-color: $status-deleted-color !important; + background-color: variables.$status-deleted-color !important; } label::after { - border-color: $grey-darkest !important; + border-color: variables.$grey-darkest !important; } } &.alreadyFixed { label::before, label::after { - background-color: $status-alreadyFixed-color !important; + background-color: variables.$status-alreadyFixed-color !important; } } &.tooHard { label::before, label::after { - background-color: $status-tooHard-color !important; + background-color: variables.$status-tooHard-color !important; } } } @@ -131,13 +132,13 @@ .filter-option.priority-filter .field { &.low, &.medium, &.high { label::before, label::after { - background-color: $grey-lightest !important; + background-color: variables.$grey-lightest !important; } label::after { border: none; transform: none; - color: $green; + color: variables.$green; font-size: 10px; left: 7px; top: 4px; @@ -174,8 +175,8 @@ padding: 0px 20px 5px 10px; margin-bottom: 10px; margin-right: 10px; - background-color: $grey-lightest; - border-radius: $radius-medium; + background-color: variables.$grey-lightest; + border-radius: variables.$radius-medium; .dropdown { height: 1.25em; diff --git a/src/components/AdminPane/Manage/ProjectList/ProjectList.scss b/src/components/AdminPane/Manage/ProjectList/ProjectList.scss index 11495e99d..345414edc 100644 --- a/src/components/AdminPane/Manage/ProjectList/ProjectList.scss +++ b/src/components/AdminPane/Manage/ProjectList/ProjectList.scss @@ -1,7 +1,7 @@ -@import '../../../../variables.scss'; +@use '../../../../variables.scss'; .admin__manage__managed-item-list.project-list { - font-size: $size-5; + font-size: variables.$size-5; margin: 0px 20px 0 0; display: flex; flex-wrap: wrap; @@ -17,14 +17,14 @@ } .project-list__heading { - color: $green; + color: variables.$green; margin-top: 40px; padding-bottom: 20px; margin-bottom: 20px; - border-bottom: 2px solid $grey-lightest-less; + border-bottom: 2px solid variables.$grey-lightest-less; h2 { - font-weight: $weight-semibold; + font-weight: variables.$weight-semibold; } } @@ -39,8 +39,8 @@ } .column.edit-control { - font-size: $size-7; - font-weight: $weight-normal; + font-size: variables.$size-7; + font-weight: variables.$weight-normal; } .project-list-item { @@ -51,7 +51,7 @@ } &__project-name { - color: $primary + color: variables.$primary } } diff --git a/src/components/AdminPane/Manage/ProjectsDashboard/ProjectsDashboard.scss b/src/components/AdminPane/Manage/ProjectsDashboard/ProjectsDashboard.scss index b118d2f20..cae884931 100644 --- a/src/components/AdminPane/Manage/ProjectsDashboard/ProjectsDashboard.scss +++ b/src/components/AdminPane/Manage/ProjectsDashboard/ProjectsDashboard.scss @@ -1,4 +1,4 @@ -@import '../../../../variables.scss'; +@use '../../../../variables.scss'; .admin__manage.projects-dashboard { &__dashboard-controls { @@ -9,10 +9,10 @@ .projects-dashboard__no-projects { margin: 40px 15px 15px 15px; padding: 15px; - color: $primary; - background-color: $white; - font-size: $size-5; - border-radius: $radius-medium; + color: variables.$primary; + background-color: variables.$white; + font-size: variables.$size-5; + border-radius: variables.$radius-medium; text-align: center; } diff --git a/src/components/BusySpinner/BusySpinner.scss b/src/components/BusySpinner/BusySpinner.scss index 1092c7eea..28922493e 100644 --- a/src/components/BusySpinner/BusySpinner.scss +++ b/src/components/BusySpinner/BusySpinner.scss @@ -1,4 +1,5 @@ -@import '../../theme.scss'; +@use '../../theme.scss'; +@use "../../variables"; .busy-spinner { &.inline { @@ -28,13 +29,13 @@ border-width: 6px; } &.color-light { - border-top-color: $green-neon; + border-top-color: variables.$green-neon; } &.color-dark { - border-top-color: $green; + border-top-color: variables.$green; } &.color-grey { - border-top-color: $grey; + border-top-color: variables.$grey; } } } diff --git a/src/components/ChallengePane/ChallengeFilterSubnav/ChallengeFilterSubnav.scss b/src/components/ChallengePane/ChallengeFilterSubnav/ChallengeFilterSubnav.scss index 772d37fd6..39f9adf9c 100644 --- a/src/components/ChallengePane/ChallengeFilterSubnav/ChallengeFilterSubnav.scss +++ b/src/components/ChallengePane/ChallengeFilterSubnav/ChallengeFilterSubnav.scss @@ -1,15 +1,17 @@ -@import '../../../theme.scss'; +@use '../../../theme.scss'; +@use "../../../mixins"; +@use "../../../variables"; .challenge-filter-subnav.navbar.sub-nav { - $mobile-break: $app-mobile-break; - z-index: $layer-subnav; - height: $subnav-height; - background-color: $white; - border-bottom: 2px solid $grey-lighter; + $mobile-break: variables.$app-mobile-break; + z-index: variables.$layer-subnav; + height: variables.$subnav-height; + background-color: variables.$white; + border-bottom: 2px solid variables.$grey-lighter; @media(max-width: $mobile-break) { - height: $mobile-subnav-height; - min-height: $mobile-subnav-height; + height: variables.$mobile-subnav-height; + min-height: variables.$mobile-subnav-height; } .navbar-brand { @@ -17,16 +19,16 @@ } .navbar-link { - color: $blue; + color: variables.$blue; } .nav-dropdown { - z-index: $layer-subnav; + z-index: variables.$layer-subnav; .navbar-dropdown { padding-top: 0; padding-bottom: 0; - border-radius: 0 0 $radius-medium $radius-medium; + border-radius: 0 0 variables.$radius-medium variables.$radius-medium; .navbar-item { padding-left: 20px; @@ -38,32 +40,32 @@ display: flex; flex-direction: column; align-items: flex-start; - border-right: 2px solid $grey-lightest; + border-right: 2px solid variables.$grey-lightest; &:after { - @include dropdown-arrow(); + @include mixins.dropdown-arrow(); margin-top: 6px; margin-right: 10px; } label { text-transform: uppercase; - font-size: $size-8; - font-weight: $weight-medium; - letter-spacing: $letter-spacing-medium; + font-size: variables.$size-8; + font-weight: variables.$weight-medium; + letter-spacing: variables.$letter-spacing-medium; margin: 7px 0px 5px 0px; } .default-value, .placeholder, .current-value { - color: $grey-light; + color: variables.$grey-light; min-width: 135px; margin-right: 20px; } } .navbar-item { - color: $grey; - border-top: 1px solid $grey-light; + color: variables.$grey; + border-top: 1px solid variables.$grey-light; padding-top: 15px; padding-bottom: 15px; @@ -97,8 +99,8 @@ .search-box { .search-box__search-field { .control-wrapper .control input.input { - font-size: $size-6; - border-bottom: 1px solid $grey-lighter; + font-size: variables.$size-6; + border-bottom: 1px solid variables.$grey-lighter; border-radius: 0; padding: 0; height: 1.5em; @@ -114,7 +116,7 @@ max-width: 80vw; padding: 0px 10px; .search-box__search-field { - font-size: $size-6; + font-size: variables.$size-6; svg { height: 18px; @@ -131,7 +133,7 @@ flex: 1 1 240px; input { - font-size: $size-6; + font-size: variables.$size-6; } } } diff --git a/src/components/ChallengePane/ChallengeResultItem/ChallengeResultItem.scss b/src/components/ChallengePane/ChallengeResultItem/ChallengeResultItem.scss index a38d2ab07..51eea288f 100644 --- a/src/components/ChallengePane/ChallengeResultItem/ChallengeResultItem.scss +++ b/src/components/ChallengePane/ChallengeResultItem/ChallengeResultItem.scss @@ -1,17 +1,19 @@ -@import '../../../theme.scss'; +@use '../../../theme.scss'; +@use "../../../mixins"; +@use "../../../variables"; .challenge-list__item.card { width: 100%; border: none; box-shadow: none; margin-top: 20px; - border-radius: $radius-medium; + border-radius: variables.$radius-medium; .challenge-list__item--featured-indicator { - background-color: $grey-light; - border-radius: $radius-medium 0 $radius-medium 0; - color: $white; - font-size: $size-9; + background-color: variables.$grey-light; + border-radius: variables.$radius-medium 0 variables.$radius-medium 0; + color: variables.$white; + font-size: variables.$size-9; display: inline-block; padding: 1px 5px; position: absolute; @@ -32,13 +34,13 @@ &.saved { svg { - fill: $coral; + fill: variables.$coral; } } &.virtual { svg { - fill: $coral; + fill: variables.$coral; } } } @@ -50,20 +52,20 @@ } .challenge-list__item__name { - font-size: $size-5; + font-size: variables.$size-5; } .challenge-list__item__project-name { margin-left: 23px; - font-size: $size-8; + font-size: variables.$size-8; min-height: 1em; - color: $grey-light; + color: variables.$grey-light; } .challenge-list__item__field-label { text-transform: uppercase; - font-weight: $weight-medium; - letter-spacing: $letter-spacing-little; + font-weight: variables.$weight-medium; + letter-spacing: variables.$letter-spacing-little; margin-right: 0.5em; &:after { @@ -73,8 +75,8 @@ .challenge-list__item__blurb { margin: 15px 0 20px 0px; - @include constrained-text-content(); - @include markdown-content(); + @include mixins.constrained-text-content(); + @include mixins.markdown-content(); max-height: 200px; overflow-y: auto; padding-right: 10px; @@ -82,7 +84,7 @@ .challenge-list__item__task-progress { margin-bottom: 20px; - font-size: $size-8; + font-size: variables.$size-8; } .challenge-list__item__controls { @@ -95,19 +97,19 @@ } button.start-challenge { - @include invert-on-hover($green, $white); + @include mixins.invert-on-hover(variables.$green, variables.$white); } button.save-challenge-toggle { - @include invert-on-hover($grey, $white); + @include mixins.invert-on-hover(variables.$grey, variables.$white); } .card-header { - background-color: $white; - color: $blue; - font-weight: $weight-normal; + background-color: variables.$white; + color: variables.$blue; + font-weight: variables.$weight-normal; padding: 1rem; - border-radius: $radius-medium; + border-radius: variables.$radius-medium; justify-content: space-between; align-items: flex-start; @@ -115,7 +117,7 @@ align-items: flex-end; .icon { - @include dropdown-arrow(); + @include mixins.dropdown-arrow(); } } @@ -125,8 +127,8 @@ } .card-content { - color: $grey; - font-size: $size-7; + color: variables.$grey; + font-size: variables.$size-7; max-height: 0; transition: max-height 0.25s, padding 0.25s; padding: 0 2.5rem; @@ -144,9 +146,9 @@ } .card-header { - border-radius: $radius-medium $radius-medium 0 0; + border-radius: variables.$radius-medium variables.$radius-medium 0 0; box-shadow: none; - border-bottom: 2px solid $grey-lightest-more; + border-bottom: 2px solid variables.$grey-lightest-more; .icon { margin-top: 5px; diff --git a/src/components/ChallengePane/ChallengeResultList/ChallengeResultList.scss b/src/components/ChallengePane/ChallengeResultList/ChallengeResultList.scss index 2d4fdc7ba..b83897b6a 100644 --- a/src/components/ChallengePane/ChallengeResultList/ChallengeResultList.scss +++ b/src/components/ChallengePane/ChallengeResultList/ChallengeResultList.scss @@ -1,10 +1,10 @@ -@import '../../../variables.scss'; +@use '../../../variables.scss'; .challenge-result-list { &__heading { padding: 20px; margin: 0 0 30px 0; - border-bottom: 2px solid $grey-lighter-more; + border-bottom: 2px solid variables.$grey-lighter-more; &.level:not(:last-child) { margin-bottom: 30px; @@ -12,9 +12,9 @@ } h2.title { - color: $green; - font-weight: $weight-normal; - font-size: $size-3; + color: variables.$green; + font-weight: variables.$weight-normal; + font-size: variables.$size-3; margin-bottom: 0; margin-right: 1em; white-space: nowrap; @@ -31,17 +31,17 @@ .button.challenge-result-list__clear-filters-control { padding-top: 3px; - color: $grey; + color: variables.$grey; svg { - fill: $grey; + fill: variables.$grey; } &:hover { - color: $grey-darkest; + color: variables.$grey-darkest; svg { - fill: $grey-darkest; + fill: variables.$grey-darkest; } } } @@ -60,8 +60,8 @@ &.no-results { display: flex; justify-content: flex-start; - color: $grey; - font-weight: $weight-semibold; + color: variables.$grey; + font-weight: variables.$weight-semibold; .busy-spinner { margin-left: 10px; diff --git a/src/components/ChallengeProgress/ChallengeProgress.scss b/src/components/ChallengeProgress/ChallengeProgress.scss index 0cc50ed91..9b37ce837 100644 --- a/src/components/ChallengeProgress/ChallengeProgress.scss +++ b/src/components/ChallengeProgress/ChallengeProgress.scss @@ -1,8 +1,8 @@ -@import '../../variables.scss'; +@use '../../variables.scss'; .challenge-task-progress { // margin-bottom: 30px; - font-size: $size-9; + font-size: variables.$size-9; height: 55px; position: relative; diff --git a/src/components/CommentList/CommentCountBadge/CommentCountBadge.scss b/src/components/CommentList/CommentCountBadge/CommentCountBadge.scss index 9c3961f9f..7b74166e2 100644 --- a/src/components/CommentList/CommentCountBadge/CommentCountBadge.scss +++ b/src/components/CommentList/CommentCountBadge/CommentCountBadge.scss @@ -1,4 +1,4 @@ -@import '../../../variables.scss'; +@use '../../../variables.scss'; .comment-count-badge { display: inline-block; @@ -10,20 +10,20 @@ svg { height: 19px; width: auto; - fill: $grey; + fill: variables.$grey; } } .badge.is-badge-outlined[data-badge]::after { - font-size: $size-9; + font-size: variables.$size-9; padding: 0.25rem; - color: $white; - background-color: $coral; + color: variables.$white; + background-color: variables.$coral; border: none; left: calc(100% - ( 1.2rem / 2 ) - 1px) // move slightly to the left } .badge.is-badge-outlined.is-empty[data-badge]::after { - background-color: $grey-light; + background-color: variables.$grey-light; } } diff --git a/src/components/ConfirmAction/ConfirmAction.scss b/src/components/ConfirmAction/ConfirmAction.scss index 790f21a6f..e1a9d9d93 100644 --- a/src/components/ConfirmAction/ConfirmAction.scss +++ b/src/components/ConfirmAction/ConfirmAction.scss @@ -1,16 +1,16 @@ -@import '../../variables.scss'; +@use '../../variables.scss'; .confirm-action { display: inline-flex; justify-content: flex-start; .message .message-body { - background-color: $white; + background-color: variables.$white; } &__prompt { - color: $grey-dark; - font-size: $size-5; + color: variables.$grey-dark; + font-size: variables.$size-5; } &__controls { diff --git a/src/components/CongratulateModal/CongratulateModal.scss b/src/components/CongratulateModal/CongratulateModal.scss index 4669cf05d..6d95bf028 100644 --- a/src/components/CongratulateModal/CongratulateModal.scss +++ b/src/components/CongratulateModal/CongratulateModal.scss @@ -1,10 +1,10 @@ -@import '../../variables.scss'; +@use '../../variables.scss'; .congratulate-modal { .modal-content { padding: 15px; min-height: 200px; - border-radius: $radius-medium; + border-radius: variables.$radius-medium; overflow: visible; display: flex; flex-direction: column; @@ -17,12 +17,12 @@ display: flex; justify-content: center; align-items: center; - font-size: $size-5; - color: $green; + font-size: variables.$size-5; + color: variables.$green; h2 { - font-size: $size-3; - font-weight: $weight-bold; + font-size: variables.$size-3; + font-weight: variables.$weight-bold; margin-top: 8px; } } @@ -34,7 +34,7 @@ align-items: center; &__trophy { - fill: $yellow; + fill: variables.$yellow; width: 48px; height: auto; } @@ -42,8 +42,8 @@ &__dismiss-control.button.is-outlined { margin-top: 40px; - font-size: $size-6; - font-weight: $weight-normal; + font-size: variables.$size-6; + font-weight: variables.$weight-normal; padding: 0px 30px; height: 40px; width: 200px; @@ -59,7 +59,7 @@ right: 15px; svg { - fill: $grey-light; + fill: variables.$grey-light; height: 20px; width: 20px; } diff --git a/src/components/CountrySelector/CountrySelector.scss b/src/components/CountrySelector/CountrySelector.scss index cf8666fe4..8b8ea19cc 100644 --- a/src/components/CountrySelector/CountrySelector.scss +++ b/src/components/CountrySelector/CountrySelector.scss @@ -1,4 +1,6 @@ -@import '../../theme.scss'; +@use '../../theme.scss'; +@use "../../mixins"; +@use "../../variables"; .country-selector { margin: 2px 20px 0px -60px; @@ -7,8 +9,8 @@ line-height: 24px; .button.is-outlined { - @include invert-on-hover($grey-light, $white); - font-weight: $weight-normal; + @include mixins.invert-on-hover(variables.$grey-light, variables.$white); + font-weight: variables.$weight-normal; .dropdown-indicator { height: 10px; @@ -21,6 +23,6 @@ } .dropdown-item { - font-weight: $weight-normal; + font-weight: variables.$weight-normal; } } diff --git a/src/components/Custom/RJSFFormFieldAdapter/RJSFFormFieldAdapter.scss b/src/components/Custom/RJSFFormFieldAdapter/RJSFFormFieldAdapter.scss index ca0abf5e2..855e819f2 100644 --- a/src/components/Custom/RJSFFormFieldAdapter/RJSFFormFieldAdapter.scss +++ b/src/components/Custom/RJSFFormFieldAdapter/RJSFFormFieldAdapter.scss @@ -1,4 +1,6 @@ -@import '../../../theme.scss'; +@use '../../../theme.scss'; +@use "../../../mixins"; +@use "../../../variables"; .form { .array-item-remove::after { @@ -64,7 +66,7 @@ form.rjsf { border: none; fieldset { - border: 1px solid $grey-lightest; + border: 1px solid variables.$grey-lightest; padding: 25px; legend { @@ -84,13 +86,13 @@ form.rjsf { // Negative top margin to reduce the top fieldset padding, which we want in // the event there isn't a root description. margin: 40px 0 45px 36px; // left-align with fieldset legend - color: $grey; - background-color: $grey-lightest-more; + color: variables.$grey; + background-color: variables.$grey-lightest-more; padding: 15px; - border-radius: $radius-medium; + border-radius: variables.$radius-medium; h1, h2, h3, h4, h5 { - font-weight: $weight-bold; + font-weight: variables.$weight-bold; margin-bottom: 1em; } @@ -178,17 +180,17 @@ form.rjsf { } .markdown-preview { - border: 2px solid $grey-lightest-more; - border-radius: $radius-medium; + border: 2px solid variables.$grey-lightest-more; + border-radius: variables.$radius-medium; padding: 10px; min-width: 350px; width: 350px; height: 200px; - color: $grey; - font-size: $size-7; + color: variables.$grey; + font-size: variables.$size-7; line-height: 24px; - @include constrained-text-content(); - @include markdown-content(); + @include mixins.constrained-text-content(); + @include mixins.markdown-content(); overflow-y: auto; } } @@ -200,7 +202,7 @@ form.rjsf { } label .required { - color: $danger; + color: variables.$danger; margin-left: 0.25em; } @@ -217,7 +219,7 @@ form.rjsf { } input.form-control { - @include basic-form-element-styling(); + @include mixins.basic-form-element-styling(); } .select, .select:not(.is-multiple) { @@ -229,7 +231,7 @@ form.rjsf { } .select:not(.is-multiple)::after { - border-color: $grey-light-less; + border-color: variables.$grey-light-less; border-width: 1.5px; width: 0.4em; height: 0.4em; @@ -237,7 +239,7 @@ form.rjsf { } textarea.form-control { - @include basic-form-element-styling(); + @include mixins.basic-form-element-styling(); } .control .checkbox { @@ -270,9 +272,9 @@ form.rjsf { } .dropzone { - background-color: $grey-lightest; - border: 1px solid $grey-light; - border-radius: $radius-medium; + background-color: variables.$grey-lightest; + border: 1px solid variables.$grey-light; + border-radius: variables.$radius-medium; padding: 15px; text-align: center; max-width: 400px; @@ -283,27 +285,27 @@ form.rjsf { } &.active { - border-color: $green; + border-color: variables.$green; } } .react-tagsinput { - @include basic-form-element-styling(); + @include mixins.basic-form-element-styling(); .react-tagsinput-tag { font-family: inherit; - font-size: $size-7; - background-color: $grey-lightest; - color: $grey; + font-size: variables.$size-7; + background-color: variables.$grey-lightest; + color: variables.$grey; border: none; - border-radius: $radius-medium; + border-radius: variables.$radius-medium; margin: 5px; padding: 2px 5px 2px 10px; } .react-tagsinput-remove { font-family: inherit; - color: $grey-darkest; + color: variables.$grey-darkest; &:before { margin-left: 5px; } @@ -317,14 +319,14 @@ form.rjsf { } .help { - font-size: $size-7; + font-size: variables.$size-7; flex-basis: 50%; margin-left: 1em; } .errors { - font-size: $size-8; - color: $danger; + font-size: variables.$size-8; + color: variables.$danger; } } diff --git a/src/components/EnhancedMap/MapPane/MapPane.scss b/src/components/EnhancedMap/MapPane/MapPane.scss index e3e6f4ff8..416501c4b 100644 --- a/src/components/EnhancedMap/MapPane/MapPane.scss +++ b/src/components/EnhancedMap/MapPane/MapPane.scss @@ -1,4 +1,5 @@ -@import '../../../mixins.scss'; +@use '../../../mixins.scss'; +@use "../../../variables"; .map-pane { position: relative; @@ -17,7 +18,7 @@ -webkit-backface-visibility: hidden; .leaflet-pane { - z-index: $layer-map; + z-index: variables.$layer-map; &.leaflet-marker-pane.animated { @keyframes marker-bounce { @@ -43,12 +44,12 @@ .leaflet-top.leaflet-right, .leaflet-top.leaflet-left, .leaflet-bottom.leaflet-right, .leaflet-bottom.leaflet-left { -webkit-transform: translate3d(0,0,0); // hack to get Safari to honor z-index - z-index: $layer-map-control; + z-index: variables.$layer-map-control; .leaflet-control, .leaflet-bar { - z-index: $layer-map-control; + z-index: variables.$layer-map-control; top: 40px; // swap zoom with layer toggle for mobile - border-radius: $radius-medium-less; + border-radius: variables.$radius-medium-less; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .2); margin-right: .5rem; @@ -79,7 +80,7 @@ } &:not(.leaflet-disabled) { - color: $white; + color: variables.$white; } &:first-child { @@ -96,14 +97,14 @@ .leaflet-control-attribution.leaflet-control { top: 0; - z-index: $layer-map-control; - font-size: $size-8; - color: $grey; + z-index: variables.$layer-map-control; + font-size: variables.$size-8; + color: variables.$grey; background-color: transparent; a { - font-size: $size-8; - color: $grey; + font-size: variables.$size-8; + color: variables.$grey; } } @@ -120,7 +121,7 @@ } .leaflet-popup-content-wrapper { - border-radius: $radius-medium; + border-radius: variables.$radius-medium; .leaflet-popup-content { width: 350px; @@ -130,22 +131,22 @@ h3 { text-align: center; color: #23395B; // tailwind blue - font-size: $size-6; - font-weight: $weight-medium; + font-size: variables.$size-6; + font-weight: variables.$weight-medium; padding: 12px 19px 12px 19px; margin-bottom: 12px; - border-bottom: 2px solid $grey-lightest-more; + border-bottom: 2px solid variables.$grey-lightest-more; } .marker-popup-content__links { text-align: center; - font-size: $size-7; + font-size: variables.$size-7; margin: 12px; } .feature-properties { - color: $grey; - font-size: $size-7; + color: variables.$grey; + font-size: variables.$size-7; margin: 19px 0px; max-height: 70vh; overflow-y: auto; @@ -156,26 +157,26 @@ } .name { - font-weight: $weight-medium; + font-weight: variables.$weight-medium; padding: 5px 0.5em 5px 0px; border: none; position: relative; .not-linked { - color: $grey; + color: variables.$grey; padding-left: 19px; } a, a:link, a:active, a:visited { - color: $grey; + color: variables.$grey; padding-left: 19px; &:hover { &:before { content: '?'; font-size: 10px; - color: $white; - background-color: $grey-light; + color: variables.$white; + background-color: variables.$grey-light; border-radius: 50%; padding: 0px 4px; position: absolute; @@ -187,7 +188,7 @@ } .value { - @include constrained-text-content; + @include mixins.constrained-text-content; hyphens: initial; padding: 5px 19px 5px 0px; border: none; @@ -199,12 +200,12 @@ } .busy-spinner:not(.mr-static) { - @include busy-spinner-color($grey); - @include busy-spinner-size(30px); + @include mixins.busy-spinner-color(variables.$grey); + @include mixins.busy-spinner-size(30px); position: absolute; top: calc(50% - 15px); left: calc(50% - 15px); - z-index: $layer-map + $intralayer-bump; + z-index: variables.$layer-map + variables.$intralayer-bump; } } diff --git a/src/components/InsetMap/InsetMap.scss b/src/components/InsetMap/InsetMap.scss index 221245ef2..40c08961f 100644 --- a/src/components/InsetMap/InsetMap.scss +++ b/src/components/InsetMap/InsetMap.scss @@ -1,18 +1,18 @@ -@import '../../variables.scss'; +@use '../../variables.scss'; .inset-map { height: 100%; .leaflet-container { height: 100%; - border-radius: $radius-medium; + border-radius: variables.$radius-medium; border: none; -webkit-transform: translate3d(0, 0, 0); box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .2); -webkit-backface-visibility: hidden; .leaflet-pane { - z-index: $intralayer-bump; + z-index: variables.$intralayer-bump; } } } diff --git a/src/components/InspectTaskControls/InspectTaskControls.scss b/src/components/InspectTaskControls/InspectTaskControls.scss index 655abf177..5f7ecabd7 100644 --- a/src/components/InspectTaskControls/InspectTaskControls.scss +++ b/src/components/InspectTaskControls/InspectTaskControls.scss @@ -1,4 +1,4 @@ -@import '../../variables.scss'; +@use '../../variables.scss'; .inspect-task-controls { &__control-block { diff --git a/src/components/KeywordAutosuggestInput/KeywordAutosuggestInput.scss b/src/components/KeywordAutosuggestInput/KeywordAutosuggestInput.scss index 3ca891fd2..435df21c9 100644 --- a/src/components/KeywordAutosuggestInput/KeywordAutosuggestInput.scss +++ b/src/components/KeywordAutosuggestInput/KeywordAutosuggestInput.scss @@ -1,14 +1,15 @@ -@import '../../mixins.scss'; +@use '../../mixins.scss'; +@use "../../variables"; .keyword-autosuggest-input { - @include basic-form-element-styling(); + @include mixins.basic-form-element-styling(); > span { // wrapper around react-tagsinput display: flex; } .react-tagsinput-tag { - @include tag(); + @include mixins.tag(); display: inline-flex; } @@ -25,7 +26,7 @@ .dropdown-content { .new-keyword { padding-bottom: 11px; - border-bottom: 2px solid $grey-lightest; + border-bottom: 2px solid variables.$grey-lightest; margin-bottom: 5px; font-style: italic; } diff --git a/src/components/LoadMoreButton/LoadMoreButton.scss b/src/components/LoadMoreButton/LoadMoreButton.scss index 3306caa7a..6438ab0fd 100644 --- a/src/components/LoadMoreButton/LoadMoreButton.scss +++ b/src/components/LoadMoreButton/LoadMoreButton.scss @@ -1,5 +1,6 @@ -@import '../../mixins.scss'; +@use '../../mixins.scss'; +@use "../../variables"; button.load-more-button { - @include invert-on-hover($green, $white); + @include mixins.invert-on-hover(variables.$green, variables.$white); } diff --git a/src/components/MobileNotSupported/MobileNotSupported.scss b/src/components/MobileNotSupported/MobileNotSupported.scss index 2ddb88cf7..c3b301774 100644 --- a/src/components/MobileNotSupported/MobileNotSupported.scss +++ b/src/components/MobileNotSupported/MobileNotSupported.scss @@ -1,10 +1,10 @@ -@import '../../variables.scss'; +@use '../../variables.scss'; .mobile-not-supported { padding: 30px 20px; max-width: 100%; - background-color: $app-background; - min-height: $mobile-full-screen-pane; + background-color: variables.$app-background; + min-height: variables.$mobile-full-screen-pane; &__header { display: flex; @@ -14,7 +14,7 @@ svg { width: 80px; height: 80px; - fill: $grey-dark; + fill: variables.$grey-dark; margin-right: 20px; } @@ -23,7 +23,7 @@ } } - @media(max-width: $app-mobile-break) { + @media(max-width: variables.$app-mobile-break) { .mobile-not-supported__header { margin: 0; padding: 5px; @@ -34,12 +34,12 @@ } h1.title { - font-size: $size-7; - font-weight: $weight-semibold; + font-size: variables.$size-7; + font-weight: variables.$weight-semibold; } .mobile-not-supported__message { - font-size: $size-8; + font-size: variables.$size-8; } } } diff --git a/src/components/Navbar/Navbar.scss b/src/components/Navbar/Navbar.scss index cbc82be05..6029308aa 100644 --- a/src/components/Navbar/Navbar.scss +++ b/src/components/Navbar/Navbar.scss @@ -1,17 +1,17 @@ -@import '../../variables.scss'; +@use '../../variables.scss'; .navbar.top-nav { - height: $navbar-height; + height: variables.$navbar-height; position: relative; - z-index: $layer-topnav; + z-index: variables.$layer-topnav; - @media(max-width: $app-mobile-break) { - height: $mobile-navbar-height; - min-height: $mobile-navbar-height; + @media(max-width: variables.$app-mobile-break) { + height: variables.$mobile-navbar-height; + min-height: variables.$mobile-navbar-height; .navbar-brand { - height: $mobile-navbar-height; - min-height: $mobile-navbar-height; + height: variables.$mobile-navbar-height; + min-height: variables.$mobile-navbar-height; } } @@ -27,14 +27,14 @@ height: 2.25rem; width: auto; margin-right: 10px; - fill: $navbar-item-color; + fill: variables.$navbar-item-color; } } } .navbar-menu { .navbar-item { - font-weight: $weight-normal; + font-weight: variables.$weight-normal; .item-text { padding: 7px 5px 5px 5px; @@ -42,14 +42,14 @@ transition: border-color .25s ease-in-out; &:hover { - border-color: rgba($navbar-item-color, 0.5); + border-color: rgba(variables.$navbar-item-color, 0.5); } &.is-active { - border-color: $navbar-item-color; + border-color: variables.$navbar-item-color; &:hover { - border-color: $navbar-item-color; + border-color: variables.$navbar-item-color; } } } @@ -61,13 +61,13 @@ &.is-active { position: relative; - z-index: $layer-dropdown; + z-index: variables.$layer-dropdown; .navbar-item .item-text { - color: $primary; + color: variables.$primary; &:hover { - border-color: $primary; + border-color: variables.$primary; } } } @@ -86,10 +86,10 @@ top: 23px; svg { - fill: $navbar-item-color; + fill: variables.$navbar-item-color; } - @media(max-width: $app-mobile-break) { + @media(max-width: variables.$app-mobile-break) { top: 19px; } } @@ -100,13 +100,13 @@ width: 24px; svg { - fill: $grey-dark; + fill: variables.$grey-dark; } } /* General sidebar styles */ .bm-menu { - background-color: $grey-lightest-more; + background-color: variables.$grey-lightest-more; padding: 2.5em 1.5em 0; font-size: 1.15em; } @@ -123,7 +123,7 @@ padding-top: 0; .navbar-item { - color: $green; + color: variables.$green; } .navbar__account-nav-item__avatar { @@ -139,7 +139,7 @@ /* Styling of overlay */ .bm-overlay { - background: $modal-background-background-color; + background: variables.$modal-background-background-color; left: 0; } } diff --git a/src/components/OSMElementTags/OSMElementTags.scss b/src/components/OSMElementTags/OSMElementTags.scss index 01cd1216d..1b2e3c77e 100644 --- a/src/components/OSMElementTags/OSMElementTags.scss +++ b/src/components/OSMElementTags/OSMElementTags.scss @@ -1,4 +1,4 @@ -@import '../../variables.scss'; +@use '../../variables.scss'; dl.tag-list { display: grid; @@ -8,10 +8,10 @@ dl.tag-list { dt { font-family: monospace; - font-weight: $weight-bold; + font-weight: variables.$weight-bold; } dd { - font-size: $size-7; + font-size: variables.$size-7; } } diff --git a/src/components/PastDurationSelector/PastDurationSelector.scss b/src/components/PastDurationSelector/PastDurationSelector.scss index f118c8e7f..2fd869b3c 100644 --- a/src/components/PastDurationSelector/PastDurationSelector.scss +++ b/src/components/PastDurationSelector/PastDurationSelector.scss @@ -1,12 +1,14 @@ -@import '../../theme.scss'; +@use '../../theme.scss'; +@use "../../mixins"; +@use "../../variables"; .past-duration-selector { .dropdown-trigger { line-height: 24px; .button.is-outlined { - @include invert-on-hover($grey-light, $white); - font-weight: $weight-normal; + @include mixins.invert-on-hover(variables.$grey-light, variables.$white); + font-weight: variables.$weight-normal; .dropdown-indicator { height: 10px; @@ -19,6 +21,6 @@ } .dropdown-item { - font-weight: $weight-normal; + font-weight: variables.$weight-normal; } } diff --git a/src/components/PublicWidgetGrid/PublicWidgetGrid.scss b/src/components/PublicWidgetGrid/PublicWidgetGrid.scss index 58b42e778..aad56aff6 100644 --- a/src/components/PublicWidgetGrid/PublicWidgetGrid.scss +++ b/src/components/PublicWidgetGrid/PublicWidgetGrid.scss @@ -1,4 +1,4 @@ -@import '../../variables.scss'; +@use '../../variables.scss'; .widget-grid { &__controls { @@ -27,7 +27,7 @@ flex-direction: column; &--bordered-top { - border-top: 1px solid $grey-lighter-more; + border-top: 1px solid variables.$grey-lighter-more; padding-top: 30px; } @@ -38,7 +38,7 @@ max-width: 18px; height: auto; margin-right: 12px; - fill: $grey-darkest; + fill: variables.$grey-darkest; } &__remove-control { @@ -47,7 +47,7 @@ max-width: 18px; height: auto; margin-right: 12px; - fill: $danger; + fill: variables.$danger; } &__header { @@ -66,7 +66,7 @@ flex-shrink: 0; .subtitle { - font-weight: $weight-normal; + font-weight: variables.$weight-normal; margin: 0; } } @@ -92,10 +92,10 @@ margin-left: 20px; width: 20px; height: 20px; - fill: $grey-lightest; + fill: variables.$grey-lightest; &:hover { - fill: $grey-dark; + fill: variables.$grey-dark; } } diff --git a/src/components/ReviewTaskControls/ReviewTaskControls.scss b/src/components/ReviewTaskControls/ReviewTaskControls.scss index cc1646abd..f5a101100 100644 --- a/src/components/ReviewTaskControls/ReviewTaskControls.scss +++ b/src/components/ReviewTaskControls/ReviewTaskControls.scss @@ -1,4 +1,4 @@ -@import '../../variables.scss'; +@use '../../variables.scss'; .review-task-controls { &__control-block { diff --git a/src/components/ReviewTaskPane/ReviewTaskPane.scss b/src/components/ReviewTaskPane/ReviewTaskPane.scss index 7f55c8bd6..d3cf1b9d7 100644 --- a/src/components/ReviewTaskPane/ReviewTaskPane.scss +++ b/src/components/ReviewTaskPane/ReviewTaskPane.scss @@ -1,4 +1,4 @@ -@import '../../variables.scss'; +@use '../../variables.scss'; .task-pane { position: relative; @@ -10,8 +10,8 @@ &__title .subtitle { text-transform: uppercase; - font-size: $size-6; - font-weight: $weight-semibold; + font-size: variables.$size-6; + font-weight: variables.$weight-semibold; } } } diff --git a/src/components/SearchBox/SearchBox.scss b/src/components/SearchBox/SearchBox.scss index b9cf9148b..0e55b3678 100644 --- a/src/components/SearchBox/SearchBox.scss +++ b/src/components/SearchBox/SearchBox.scss @@ -1,4 +1,4 @@ -@import '../../variables.scss'; +@use '../../variables.scss'; .search-box, .navbar-item.search-box { width: 100%; @@ -21,7 +21,7 @@ svg { flex: 0 0 20px; - fill: $grey-light; + fill: variables.$grey-light; height: 20px; width: auto; margin-left: 20px; @@ -34,11 +34,11 @@ background-color: transparent; border: none; box-shadow: none; - color: $grey-light; - font-weight: $weight-light; + color: variables.$grey-light; + font-weight: variables.$weight-light; &::placeholder { - color: $grey-light; + color: variables.$grey-light; } } } @@ -50,14 +50,14 @@ button.search-box--done-button { svg { - fill: rgba($primary, 0.8); + fill: rgba(variables.$primary, 0.8); height: 20px; } &:enabled:hover, &:enabled:focus { svg { - fill: $primary; + fill: variables.$primary; } } } diff --git a/src/components/ShareLink/ShareLink.scss b/src/components/ShareLink/ShareLink.scss index f06927566..953c950e5 100644 --- a/src/components/ShareLink/ShareLink.scss +++ b/src/components/ShareLink/ShareLink.scss @@ -1,11 +1,12 @@ -@import '../../mixins.scss'; +@use '../../mixins.scss'; +@use "../../variables"; .share-link.dropdown { position: static; // allow content to float above sidebar .dropdown-trigger { svg { - fill: $grey-lighter; + fill: variables.$grey-lighter; height: 15px; width: auto; } @@ -23,8 +24,8 @@ left: 25px; .dropdown-content { - font-size: $size-7; - color: $grey; + font-size: variables.$size-7; + color: variables.$grey; padding: 5px 10px 5px 15px; display: flex; justify-content: flex-start; @@ -35,9 +36,9 @@ } .share-link__copy-button { - @include invert-on-hover($green, $white); + @include mixins.invert-on-hover(variables.$green, variables.$white); margin-left: 10px; - font-size: $size-7; + font-size: variables.$size-7; padding: 0px 10px 0px 5px; svg { diff --git a/src/components/SignInButton/SignInButton.scss b/src/components/SignInButton/SignInButton.scss index c9774b48f..ca8679e97 100644 --- a/src/components/SignInButton/SignInButton.scss +++ b/src/components/SignInButton/SignInButton.scss @@ -1,10 +1,10 @@ -@import '../../variables.scss'; -@import '../../mixins.scss'; +@use '../../variables.scss'; +@use '../../mixins.scss'; .button.signin-button { - @include invert-on-hover($primary, $white); + @include mixins.invert-on-hover(variables.$primary, variables.$white); &.white-on-green { - @include invert-on-hover($white, $green); + @include mixins.invert-on-hover(variables.$white, variables.$green); } } diff --git a/src/components/TaskClusterMap/TaskClusterMap.scss b/src/components/TaskClusterMap/TaskClusterMap.scss index 8184ba1f7..44a62112b 100644 --- a/src/components/TaskClusterMap/TaskClusterMap.scss +++ b/src/components/TaskClusterMap/TaskClusterMap.scss @@ -1,4 +1,4 @@ -@import "../../variables.scss"; +@use "../../variables.scss"; /** * Mixin to set the colors for map clusters. Three colors are required: the @@ -58,7 +58,7 @@ } .greyscale-cluster { - @include colored-cluster($grey-dark-less, $grey-light-less, $grey-darkest); + @include colored-cluster(variables.$grey-dark-less, variables.$grey-light-less, variables.$grey-darkest); } .multicolor-cluster { diff --git a/src/components/TaskPane/ActiveTaskDetails/ActiveTaskControls/ActiveTaskControls.scss b/src/components/TaskPane/ActiveTaskDetails/ActiveTaskControls/ActiveTaskControls.scss index de4d04e38..b30fedd6a 100644 --- a/src/components/TaskPane/ActiveTaskDetails/ActiveTaskControls/ActiveTaskControls.scss +++ b/src/components/TaskPane/ActiveTaskDetails/ActiveTaskControls/ActiveTaskControls.scss @@ -1,4 +1,4 @@ -@import '../../../../variables.scss'; +@use '../../../../variables.scss'; .active-task-controls { &__control-block { @@ -17,8 +17,8 @@ } button.button.large-and-wide { - color: $primary; - font-weight: $weight-normal; + color: variables.$primary; + font-weight: variables.$weight-normal; &.false-positive-control, &.skip-control { flex: 1; @@ -28,7 +28,7 @@ height: 20px; width: auto; margin-right: 10px; - fill: $primary; + fill: variables.$primary; } } @@ -46,15 +46,15 @@ } &__additional-controls { - border: 2px solid $grey-lightest-more; + border: 2px solid variables.$grey-lightest-more; border-radius: 4px; padding: 10px 0px; .collapsible-section__heading { justify-content: center; - color: $grey-light-less; - font-size: $size-6; - font-weight: $weight-medium; + color: variables.$grey-light-less; + font-size: variables.$size-6; + font-weight: variables.$weight-medium; transition: color 0.25s; .has-svg-icon { @@ -63,29 +63,29 @@ svg { height: 20px; - fill: $grey-light-less; + fill: variables.$grey-light-less; transition: fill 0.25s; } } &:hover { - color: $primary; + color: variables.$primary; svg { - fill: $primary; + fill: variables.$primary; } } } &.is-expanded { .collapsible-section__heading { - border-bottom: 2px solid $grey-lightest-more; + border-bottom: 2px solid variables.$grey-lightest-more; margin-bottom: 20px; padding-bottom: 10px; - color: $primary; + color: variables.$primary; svg { - fill: $primary; + fill: variables.$primary; } } @@ -113,7 +113,7 @@ width: auto; margin-left: 0px; margin-right: 0px; - fill: $default-icon-color; + fill: variables.$default-icon-color; } .active-task-controls__task-comment { @@ -133,12 +133,12 @@ height: 1.5em; svg { - fill: $grey-light-less; + fill: variables.$grey-light-less; } &:hover, &:enabled:focus { svg { - fill: $nearly-black; + fill: variables.$nearly-black; } } } diff --git a/src/components/TaskPane/ActiveTaskDetails/ActiveTaskControls/TaskCompletionStep/TaskCompletionStep.scss b/src/components/TaskPane/ActiveTaskDetails/ActiveTaskControls/TaskCompletionStep/TaskCompletionStep.scss index d0d800bf7..70f961f84 100644 --- a/src/components/TaskPane/ActiveTaskDetails/ActiveTaskControls/TaskCompletionStep/TaskCompletionStep.scss +++ b/src/components/TaskPane/ActiveTaskDetails/ActiveTaskControls/TaskCompletionStep/TaskCompletionStep.scss @@ -1,4 +1,4 @@ -@import '../../../../../variables.scss'; +@use '../../../../../variables.scss'; .task-edit-controls { &__control-block { @@ -25,8 +25,8 @@ width: 100%; font-size: 16px; padding: 5px; - border: 2px solid $grey; - border-radius: $radius-medium; + border: 2px solid variables.$grey; + border-radius: variables.$radius-medium; } } @@ -48,7 +48,7 @@ width: auto; margin-left: 0px; margin-right: 0px; - fill: $default-icon-color; + fill: variables.$default-icon-color; } .task-edit-controls__task-comment { diff --git a/src/components/TaskPane/ActiveTaskDetails/KeyboardShortcutReference/KeyboardShortcutList.scss b/src/components/TaskPane/ActiveTaskDetails/KeyboardShortcutReference/KeyboardShortcutList.scss index 1629d0326..e4b6e5304 100644 --- a/src/components/TaskPane/ActiveTaskDetails/KeyboardShortcutReference/KeyboardShortcutList.scss +++ b/src/components/TaskPane/ActiveTaskDetails/KeyboardShortcutReference/KeyboardShortcutList.scss @@ -1,4 +1,4 @@ -@import '../../../../variables.scss'; +@use '../../../../variables.scss'; .keyboard-shortcut-list { display: grid; @@ -11,11 +11,11 @@ min-width: 30px; margin-right: 15px; font-family: monospace; - font-weight: $weight-bold; + font-weight: variables.$weight-bold; } dd { - font-size: $size-7; + font-size: variables.$size-7; } } } diff --git a/src/components/TaskPane/MobileTaskDetails/MobileTaskDetails.scss b/src/components/TaskPane/MobileTaskDetails/MobileTaskDetails.scss index 420ba0ae1..e3dcfbb6e 100644 --- a/src/components/TaskPane/MobileTaskDetails/MobileTaskDetails.scss +++ b/src/components/TaskPane/MobileTaskDetails/MobileTaskDetails.scss @@ -1,18 +1,19 @@ -@import '../../../mixins.scss'; +@use '../../../mixins.scss'; +@use "../../../variables"; .mobile-task-details { - $inactive-icon-color: $grey-darkest; - $active-icon-color: $primary; + $inactive-icon-color: variables.$grey-darkest; + $active-icon-color: variables.$primary; position: absolute; bottom: 0; left: 0; - z-index: $layer-top; + z-index: variables.$layer-top; width: 100vw; - background-color: rgba($grey-lightest-more, 0.95); + background-color: rgba(variables.$grey-lightest-more, 0.95); &__active-pane { padding: 15px; - height: calc(100vh - #{5 * $mobile-navbar-height}); + height: calc(100vh - #{5 * variables.$mobile-navbar-height}); overflow-y: auto; transition: height 0.3s cubic-bezier(0.19, 1, 0.22, 1); // easings.net/#easeOutExpo @@ -33,7 +34,7 @@ display: flex; justify-content: space-between; padding: 7px 10px; - height: $mobile-navbar-height; + height: variables.$mobile-navbar-height; &__control { padding: 13px 10px 5px 10px; @@ -66,19 +67,19 @@ } .place-description { - font-size: $size-8; + font-size: variables.$size-8; margin-top: 1em; } .task-lat-lon { - font-size: $size-8; + font-size: variables.$size-8; margin-top: 0.5em; } &__description { margin-top: 20px; - @include constrained-text-content(); - @include markdown-content(); + @include mixins.constrained-text-content(); + @include mixins.markdown-content(); } } @@ -92,11 +93,11 @@ &__comments { .comment-list { &__comment--content { - background-color: $white; + background-color: variables.$white; } .with-triangle-border::before { - border-bottom-color: $white; + border-bottom-color: variables.$white; } } } diff --git a/src/components/TaskPane/TaskLocationMap/TaskLocationMap.scss b/src/components/TaskPane/TaskLocationMap/TaskLocationMap.scss index da90c677c..c38fd2661 100644 --- a/src/components/TaskPane/TaskLocationMap/TaskLocationMap.scss +++ b/src/components/TaskPane/TaskLocationMap/TaskLocationMap.scss @@ -1,4 +1,4 @@ -@import '../../../variables.scss'; +@use '../../../variables.scss'; .task-location-map { position: relative; @@ -18,7 +18,7 @@ right: -15px; height:90px; width: 90px; - z-index: $intralayer-bump; + z-index: variables.$intralayer-bump; .leaflet-container { height: 100%; diff --git a/src/components/TaskPane/TaskRandomnessControl/TaskRandomnessControl.scss b/src/components/TaskPane/TaskRandomnessControl/TaskRandomnessControl.scss index 2d09c820c..d6a555838 100644 --- a/src/components/TaskPane/TaskRandomnessControl/TaskRandomnessControl.scss +++ b/src/components/TaskPane/TaskRandomnessControl/TaskRandomnessControl.scss @@ -1,4 +1,4 @@ -@import '../../../variables.scss'; +@use '../../../variables.scss'; .task-randomness-control { margin: 15px 0px; @@ -15,7 +15,7 @@ &__prompt { margin-right: 0.5em; - font-size: $size-5; + font-size: variables.$size-5; } &__options { diff --git a/src/components/TaskStatusIndicator/TaskStatusIndicator.scss b/src/components/TaskStatusIndicator/TaskStatusIndicator.scss index d79269b0a..644ad7375 100644 --- a/src/components/TaskStatusIndicator/TaskStatusIndicator.scss +++ b/src/components/TaskStatusIndicator/TaskStatusIndicator.scss @@ -1,4 +1,4 @@ -@import '../../variables.scss'; +@use '../../variables.scss'; .active-task-details .task-status { margin: 25px 0; @@ -6,9 +6,9 @@ box-sizing: border-box; .active-task-details--sub-heading { - background-color: $blue; - color: $white; - border-radius: $radius-medium $radius-medium 0 0; + background-color: variables.$blue; + color: variables.$white; + border-radius: variables.$radius-medium variables.$radius-medium 0 0; padding: 10px 15px; margin-bottom: 0; } @@ -16,35 +16,35 @@ svg { height: 18px; width: auto; - fill: $grey-dark; + fill: variables.$grey-dark; margin-right: 7px; vertical-align: text-top; } .task-status__prompt { - font-weight: $weight-medium; + font-weight: variables.$weight-medium; } .task-status__label { width: 100%; display: flex; justify-content: space-between; - border: 2px solid rgba($blue, 0.33); - border-radius: 0 0 $radius-medium $radius-medium; + border: 2px solid rgba(variables.$blue, 0.33); + border-radius: 0 0 variables.$radius-medium variables.$radius-medium; border-top: none; padding: 10px 15px; - font-weight: $weight-semibold; - color: $grey; + font-weight: variables.$weight-semibold; + color: variables.$grey; } .task-status__view-changeset-link { - font-weight: $weight-normal; - font-size: $size-7; + font-weight: variables.$weight-normal; + font-size: variables.$size-7; } &.icon-only { .control-icon svg { - fill: $yellow; + fill: variables.$yellow; } } } @@ -56,5 +56,5 @@ } .popout-content__body .task-status__label { - color: $grey; + color: variables.$grey; } diff --git a/src/components/WidgetGrid/WidgetGrid.scss b/src/components/WidgetGrid/WidgetGrid.scss index bcd74175f..49fdee48e 100644 --- a/src/components/WidgetGrid/WidgetGrid.scss +++ b/src/components/WidgetGrid/WidgetGrid.scss @@ -1,4 +1,4 @@ -@import '../../variables.scss'; +@use '../../variables.scss'; .widget-grid-side-panel { width: 100%; @@ -274,7 +274,7 @@ } &--bordered-top { - border-top: 1px solid $grey-lighter-more; + border-top: 1px solid variables.$grey-lighter-more; padding-top: 30px; } @@ -285,7 +285,7 @@ max-width: 18px; height: auto; margin-right: 12px; - fill: $grey-darkest; + fill: variables.$grey-darkest; } &__remove-control { @@ -294,7 +294,7 @@ max-width: 18px; height: auto; margin-right: 12px; - fill: $danger; + fill: variables.$danger; } &__header { @@ -313,7 +313,7 @@ flex-shrink: 0; .subtitle { - font-weight: $weight-normal; + font-weight: variables.$weight-normal; margin: 0; } } @@ -340,10 +340,10 @@ margin-left: 20px; width: 20px; height: 20px; - fill: $grey-lightest; + fill: variables.$grey-lightest; &:hover { - fill: $grey-dark; + fill: variables.$grey-dark; } } diff --git a/src/components/WidgetWorkspace/WidgetWorkspace.scss b/src/components/WidgetWorkspace/WidgetWorkspace.scss index 81e76b1f1..8c67743aa 100644 --- a/src/components/WidgetWorkspace/WidgetWorkspace.scss +++ b/src/components/WidgetWorkspace/WidgetWorkspace.scss @@ -1,11 +1,11 @@ -@import '../../variables.scss'; +@use '../../variables.scss'; .widget-workspace { position: relative; - background-color: $white; + background-color: variables.$white; &__tab-row { - background-color: $white; + background-color: variables.$white; display: flex; justify-content: space-between; diff --git a/src/index.scss b/src/index.scss index 129d6ee8f..0a4450264 100644 --- a/src/index.scss +++ b/src/index.scss @@ -1,4 +1,4 @@ -@import './variables.scss'; +@use 'variables.scss'; @tailwind base; @tailwind components; @@ -13,15 +13,15 @@ body { display: flex; align-items: center; height: 100vh; - background-color: $green; - color: $white; + background-color: variables.$green; + color: variables.$white; svg { - fill: $white; + fill: variables.$white; } h1.title { - color: $white; + color: variables.$white; } &__content { diff --git a/src/mixins.scss b/src/mixins.scss index d9e31a006..eb90afc42 100644 --- a/src/mixins.scss +++ b/src/mixins.scss @@ -1,4 +1,4 @@ -@import './variables.scss'; +@use 'variables.scss'; // Buttons @mixin button-color($foreground-color, $background-color) { @@ -115,39 +115,39 @@ } @mixin basic-form-element-styling() { - border-color: $form-element-border-color; + border-color: variables.$form-element-border-color; border-width: 2px; border-style: solid; box-shadow: none; - border-radius: $radius-medium; - color: $grey; + border-radius: variables.$radius-medium; + color: variables.$grey; &:hover, &:focus { outline: none; - border-color: $grey-light; + border-color: variables.$grey-light; box-shadow: none; } &[readonly], &[readonly]:hover, &[readonly]:focus { outline: none; - border-color: $form-element-border-color; + border-color: variables.$form-element-border-color; box-shadow: none; } } @mixin tag() { font-family: inherit; - font-size: $size-7; - background-color: $grey-lightest; - color: $grey; + font-size: variables.$size-7; + background-color: variables.$grey-lightest; + color: variables.$grey; border: none; - border-radius: $radius-medium; + border-radius: variables.$radius-medium; margin: 5px; padding: 2px 5px 2px 10px; .react-tagsinput-remove { font-family: inherit; - color: $grey-darkest; + color: variables.$grey-darkest; &:before { margin-left: 5px; diff --git a/src/pages/Leaderboard/LeaderboardMap.scss b/src/pages/Leaderboard/LeaderboardMap.scss index d71080bf4..5be6831f6 100644 --- a/src/pages/Leaderboard/LeaderboardMap.scss +++ b/src/pages/Leaderboard/LeaderboardMap.scss @@ -1,11 +1,11 @@ -@import '../../variables.scss'; +@use '../../variables.scss'; .leaderboard-map { .leaflet-container { height: 350px; .leaflet-pane { - z-index: $intralayer-bump; + z-index: variables.$intralayer-bump; } } } diff --git a/src/theme.scss b/src/theme.scss index 4b4609a98..9faa07e36 100644 --- a/src/theme.scss +++ b/src/theme.scss @@ -1,5 +1,5 @@ -@import './variables.scss'; -@import './mixins.scss'; +@use 'variables.scss'; +@use 'mixins.scss'; $desktop: 50px; $tablet: 40px; @@ -15,7 +15,7 @@ $tablet: 40px; align-items: center; svg { - fill: $subtitle-color; + fill: variables.$subtitle-color; height: 1em; width: auto; margin-left: 1em; @@ -31,19 +31,19 @@ $tablet: 40px; } .modal.is-active { - z-index: $layer-modal; + z-index: variables.$layer-modal; } .full-screen-height { - height: calc(100vh - #{$navbar-height} - #{$subnav-height}); + height: calc(100vh - #{variables.$navbar-height} - #{variables.$subnav-height}); &.no-subnav { - height: calc(100vh - #{$navbar-height}); + height: calc(100vh - #{variables.$navbar-height}); } - @media (max-width: $app-mobile-break) { + @media (max-width: variables.$app-mobile-break) { height: calc( - 100vh - #{$mobile-navbar-height} - #{$mobile-subnav-height} - #{$mobile-address-bar-height} + 100vh - #{variables.$mobile-navbar-height} - #{variables.$mobile-subnav-height} - #{variables.$mobile-address-bar-height} ); } } @@ -51,11 +51,11 @@ $tablet: 40px; .task .full-screen-height { // no subnav in task mode or about pane .leaflet-container { - height: calc(100vh - #{$navbar-height}); + height: calc(100vh - #{variables.$navbar-height}); - @media (max-width: $app-mobile-break) { + @media (max-width: variables.$app-mobile-break) { height: calc( - 100vh - #{$mobile-navbar-height} - #{$mobile-address-bar-height} + 100vh - #{variables.$mobile-navbar-height} - #{variables.$mobile-address-bar-height} ); } } @@ -65,11 +65,11 @@ $tablet: 40px; // presence or absence of navbar and subnav. .full-screen-map { .leaflet-container { - height: calc(100vh - #{$navbar-height}); + height: calc(100vh - #{variables.$navbar-height}); - @media (max-width: $app-mobile-break) { + @media (max-width: variables.$app-mobile-break) { height: calc( - 100vh - #{$mobile-navbar-height} - #{$mobile-address-bar-height} + 100vh - #{variables.$mobile-navbar-height} - #{variables.$mobile-address-bar-height} ); } } @@ -78,11 +78,11 @@ $tablet: 40px; &.about { // no subnav in task mode or about pane .leaflet-container { - height: calc(100vh - #{$navbar-height}); + height: calc(100vh - #{variables.$navbar-height}); - @media (max-width: $app-mobile-break) { + @media (max-width: variables.$app-mobile-break) { height: calc( - 100vh - #{$mobile-navbar-height} - #{$mobile-address-bar-height} + 100vh - #{variables.$mobile-navbar-height} - #{variables.$mobile-address-bar-height} ); } } @@ -94,11 +94,11 @@ $tablet: 40px; .menu-wrapper { position: fixed; left: 65px; - z-index: $layer-popout; + z-index: variables.$layer-popout; .dropdown-menu { padding-top: 0; - box-shadow: 0px 2px 6px 0px $box-shadow-color; + box-shadow: 0px 2px 6px 0px variables.$box-shadow-color; } } } @@ -124,20 +124,20 @@ $tablet: 40px; .button.is-outlined { border-radius: 20px; border: 2px solid; - font-size: $size-6; - font-weight: $weight-medium; + font-size: variables.$size-6; + font-weight: variables.$weight-medium; padding: 0px 30px; height: 30px; &.is-small { border-radius: 20px; - font-size: $size-8; + font-size: variables.$size-8; padding: 0px 30px; } &.is-big { - font-size: $size-5; - font-weight: $weight-normal; + font-size: variables.$size-5; + font-weight: variables.$weight-normal; border-radius: 30px; padding: 0px 40px; } @@ -155,19 +155,19 @@ $tablet: 40px; &.is-danger { svg { - fill: $danger; + fill: variables.$danger; } } } svg.icon.is-danger { - fill: $danger; + fill: variables.$danger; } } .button.large-and-wide { svg { - fill: $green; + fill: variables.$green; } height: auto; @@ -175,10 +175,10 @@ $tablet: 40px; line-height: 1; //width: 140px; //height: 75px; - background-color: $grey-lightest-more; - font-size: $size-6; - font-weight: $weight-medium; - color: $green; + background-color: variables.$grey-lightest-more; + font-size: variables.$size-6; + font-weight: variables.$weight-medium; + color: variables.$green; border: none; display: flex; justify-content: center; @@ -186,8 +186,8 @@ $tablet: 40px; &:hover, &:enabled:focus { - box-shadow: 0px 2px 4px 0px $box-shadow-color; - color: $green; + box-shadow: 0px 2px 4px 0px variables.$box-shadow-color; + color: variables.$green; } .control-icon svg { @@ -210,22 +210,22 @@ $tablet: 40px; padding: 0px 6px; .control-icon svg { - fill: $green; + fill: variables.$green; height: 20px; width: auto; transition: fill 0.3s; &.is-primary { - fill: $primary; + fill: variables.$primary; } &.is-danger { - fill: $danger; + fill: variables.$danger; } } &.is-active .control-icon svg { - fill: $black; + fill: variables.$black; } &.is-small .control-icon svg { @@ -238,7 +238,7 @@ $tablet: 40px; &:hover { .control-icon svg { - fill: $black; + fill: variables.$black; } } } @@ -252,13 +252,13 @@ $tablet: 40px; &.is-primary { svg { - fill: $primary; + fill: variables.$primary; } &:enabled:hover, &:enabled:focus { svg { - fill: $primary-invert; + fill: variables.$primary-invert; } } } @@ -271,24 +271,24 @@ $tablet: 40px; } .button.is-primary { - @include invert-on-hover($primary, $white); + @include mixins.invert-on-hover(variables.$primary, variables.$white); } .button.is-secondary { - @include invert-on-hover($grey, $white); + @include mixins.invert-on-hover(variables.$grey, variables.$white); } .button.is-green { - @include invert-on-hover($green, $white); + @include mixins.invert-on-hover(variables.$green, variables.$white); } .button.is-danger { - @include invert-on-hover($danger, $white); + @include mixins.invert-on-hover(variables.$danger, variables.$white); } .button.is-primary.is-loading { &:enabled:focus:after { - border-color: transparent transparent $primary-invert $primary-invert !important; + border-color: transparent transparent variables.$primary-invert variables.$primary-invert !important; } } @@ -303,7 +303,7 @@ $tablet: 40px; } a.is-danger { - color: $danger; + color: variables.$danger; } .full-width { @@ -343,7 +343,7 @@ img.is-circular { height: 1em; .icon { - @include dropdown-arrow(); + @include mixins.dropdown-arrow(); position: static; } } @@ -365,36 +365,36 @@ img.is-circular { } code { - color: $coral; + color: variables.$coral; background-color: transparent; padding: 0; - font-family: $family-sans-serif; + font-family: variables.$family-sans-serif; font-size: inherit; } .button.is-primary.is-outlined { - background-color: $white; + background-color: variables.$white; } .pane-loading { display: flex; align-items: center; - font-size: $size-1; - height: calc(100vh - #{$navbar-height}); + font-size: variables.$size-1; + height: calc(100vh - #{variables.$navbar-height}); - @media (max-width: $app-mobile-break) { + @media (max-width: variables.$app-mobile-break) { height: calc( - 100vh - #{$mobile-navbar-height} - #{$mobile-address-bar-height} + 100vh - #{variables.$mobile-navbar-height} - #{variables.$mobile-address-bar-height} ); } } html { - background-color: $app-background; + background-color: variables.$app-background; // In case page doesn't fill screen on some devices - @media (max-width: $app-mobile-break) { - background-color: $grey-darkest; + @media (max-width: variables.$app-mobile-break) { + background-color: variables.$grey-darkest; } } @@ -461,11 +461,11 @@ a { } input:checked + .slider { - background-color: $green-neon; + background-color: variables.$green-neon; } input:focus + .slider { - box-shadow: 0 0 1px $green-neon; + box-shadow: 0 0 1px variables.$green-neon; } input:checked + .slider:before { @@ -495,7 +495,7 @@ a { width: 14px; left: 4px; bottom: 3px; - background-color: $white; + background-color: variables.$white; -webkit-transition: .4s; transition: .4s; }