Fix deprecated scss in styls (#150)

Author: colbychaskell

src/components/AmenityListing/AmenityListing.module.scss

@@ -1,12 +1,13 @@
-@import '../../styles/base.scss';
+@use '../../styles/base.scss';
 
 $icon-wrapper-size: 2em;
 
 .amenityListing {
     padding: 0;
     margin: 0;
     list-style-type: none;
-    & > *:not(:last-child) {
+
+    &>*:not(:last-child) {
         margin-bottom: 0.5em;
     }
 }
@@ -24,21 +25,23 @@ $icon-wrapper-size: 2em;
         justify-content: center;
         width: $icon-wrapper-size;
         height: $icon-wrapper-size;
-        border-radius: $icon-wrapper-size / 2;
+        border-radius: calc($icon-wrapper-size / 2);
         background: #bbb;
         box-sizing: border-box;
 
-        @include mobile {
+        @include base.mobile {
             align-self: flex-start;
         }
 
         &:global(.present) {
-            background: $rr-gold;
-            & > :global(.slash) {
+            background: base.$rr-gold;
+
+            &> :global(.slash) {
                 display: none;
             }
         }
-        & > :global(.slash) {
+
+        &> :global(.slash) {
             position: absolute;
             background: white;
             width: 2px;

src/components/AppFrame/AppFrame.module.scss

@@ -1,11 +1,11 @@
-@import '../../styles/base.scss';
+@use '../../styles/base.scss';
 
 .appFrame {
     display: flex;
     flex-direction: column;
     min-height: 100vh;
 
-    @include mobile {
+    @include base.mobile {
         font-size: 15px;
     }
 }
@@ -15,12 +15,12 @@
     align-items: center;
     height: 60px;
     padding: 0 10px;
-    background: $rr-purple-secondary;
+    background: base.$rr-purple-secondary;
     color: white;
     overflow: hidden;
     z-index: 2;
 
-    @include mobile {
+    @include base.mobile {
         flex-direction: column;
         align-items: flex-start;
         padding: 10px;

src/components/Button/Button.module.scss

@@ -1,4 +1,4 @@
-@import '../../styles/base.scss';
+@use '../../styles/base.scss';
 
 .button {
     display: flex;
@@ -11,7 +11,7 @@
     margin: 0; // unset Safari
     cursor: pointer;
     background: whitesmoke;
-    box-shadow: $global-shadow;
+    box-shadow: base.$global-shadow;
     font-size: 0.9em;
     color: #111;
 
@@ -20,7 +20,8 @@
         color: whitesmoke;
         border: 2px solid rgba(white, 0.8);
         padding: 3px 8px;
-        svg > * {
+
+        svg>* {
             stroke: currentColor;
         }
     }
@@ -39,18 +40,18 @@
         padding: 8 16px;
     }
 
-    > .icon {
+    >.icon {
         display: flex;
         padding-right: 0.25em;
     }
 
-    > .rightIcon {
+    >.rightIcon {
         display: flex;
         margin-left: auto;
         padding-left: 0.25em;
     }
 
-    & > * {
+    &>* {
         min-height: 1em;
     }
 }

src/components/DeparturePicker/DeparturePicker.module.scss

@@ -1,13 +1,13 @@
-@import 'styles/base.scss';
+@use 'styles/base.scss';
 
-$top-color: $rr-gold;
-$bottom-color: $rr-purple-secondary;
+$top-color: base.$rr-gold;
+$bottom-color: base.$rr-purple-secondary;
 
 @mixin picker-triangle($color, $size: 8px) {
     position: absolute;
     z-index: 2;
     left: -$size;
-    @include triangle($color, $size);
+    @include base.triangle($color, $size);
 }
 
 .departurePicker {
@@ -17,6 +17,7 @@ $bottom-color: $rr-purple-secondary;
 
     &:not(.disabled):hover {
         cursor: pointer;
+
         .cursor {
             opacity: 1;
         }
@@ -40,7 +41,7 @@ $bottom-color: $rr-purple-secondary;
 .top {
     width: 100%;
     height: 8px;
-    box-shadow: $global-shadow;
+    box-shadow: base.$global-shadow;
     background: $top-color;
     box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
 }
@@ -51,9 +52,10 @@ $bottom-color: $rr-purple-secondary;
     margin-top: 20px;
     background: $bottom-color;
     box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.1);
-    @include mobile {
+
+    @include base.mobile {
         background: $top-color;
-        box-shadow: $global-shadow;
+        box-shadow: base.$global-shadow;
     }
 }
 
@@ -75,6 +77,7 @@ $bottom-color: $rr-purple-secondary;
     position: absolute;
     color: #333;
     user-select: none;
+
     .cursorNeedle {
         position: absolute;
         bottom: 0;
@@ -83,6 +86,7 @@ $bottom-color: $rr-purple-secondary;
         left: -1px;
         background: currentColor;
     }
+
     .cursorTime {
         position: absolute;
         bottom: 0;
@@ -92,12 +96,10 @@ $bottom-color: $rr-purple-secondary;
         z-index: -1;
         font-size: 0.8em;
         white-space: nowrap;
-        background: linear-gradient(
-            90deg,
-            rgba(255, 255, 255, 1) 0%,
-            rgba(255, 255, 255, 1) 90%,
-            rgba(255, 255, 255, 0) 100%
-        );
+        background: linear-gradient(90deg,
+                rgba(255, 255, 255, 1) 0%,
+                rgba(255, 255, 255, 1) 90%,
+                rgba(255, 255, 255, 0) 100%);
     }
 }
 
@@ -131,7 +133,8 @@ $bottom-color: $rr-purple-secondary;
 .bottomTriangle {
     @include picker-triangle($bottom-color);
     bottom: 0;
-    @include mobile {
+
+    @include base.mobile {
         @include picker-triangle($top-color);
     }
 }

src/components/Explorer/Explorer.module.scss

@@ -1,4 +1,4 @@
-@import '../../styles/base.scss';
+@use '../../styles/base.scss';
 
 .explorer {
     display: flex;
@@ -10,11 +10,11 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    color: $rr-purple;
+    color: base.$rr-purple;
 }
 
 .footer {
-    background: $darker-rr-purple;
+    background: base.$darker-rr-purple;
 }
 
 .footerInner {
@@ -32,7 +32,7 @@
         margin-bottom: 40px;
     }
 
-    @include mobile {
+    @include base.mobile {
         width: calc(100% - 40px);
     }
 }

src/components/FrequencyHistogram/FrequencyHistogram.module.scss

@@ -1,4 +1,4 @@
-@import '../../styles/base.scss';
+@use '../../styles/base.scss';
 
 $arrival-width: 25px;
 
@@ -17,11 +17,12 @@ $arrival-width: 25px;
     align-items: center;
     flex-grow: 1;
     border-right: 1px solid #ddd;
+
     &:first-child {
         border-left: 1px solid #ddd;
     }
 
-    :global .time {
+    :global(.time) {
         user-select: none;
         position: absolute;
         bottom: -5px;
@@ -35,18 +36,18 @@ $arrival-width: 25px;
 @mixin arrival {
     width: $arrival-width;
     height: $arrival-width;
-    border-radius: #{$arrival-width / 2};
+    border-radius: calc($arrival-width / 2);
     margin-bottom: 5px;
     box-sizing: border-box;
 }
 
 .arrival {
     @include arrival;
-    background: $rr-purple;
-    border: #{$arrival-width / 4} solid $rr-light;
+    background: base.$rr-purple;
+    border: calc($arrival-width / 4) solid base.$rr-light;
 }
 
 .enhancedArrival {
     @include arrival;
-    background: $rr-purple;
+    background: base.$rr-purple;
 }

src/components/FrequencyTimeline/FrequencyTimeline.module.scss

@@ -1,4 +1,4 @@
-@import '../../styles/base.scss';
+@use '../../styles/base.scss';
 
 $arrival-width: 8px;
 $mobile-arrival-width: 6px;
@@ -38,7 +38,7 @@ $mobile-arrival-width: 6px;
         white-space: nowrap;
         user-select: none;
 
-        @include mobile {
+        @include base.mobile {
             font-size: 10px;
         }
     }
@@ -62,18 +62,18 @@ $mobile-arrival-width: 6px;
     margin-bottom: 5px;
     box-sizing: border-box;
 
-    @include mobile {
+    @include base.mobile {
         width: $mobile-arrival-width;
         height: $mobile-arrival-width;
     }
 }
 
 .baselineArrival {
+    background: base.$rr-light;
     @include arrival;
-    background: $rr-light;
 }
 
 .enhancedArrival {
+    background: base.$rr-purple;
     @include arrival;
-    background: $rr-purple;
 }