Initial Vite Commit

app/javascript/dashboard/assets/scss/_date-picker.scss

@@ -1,4 +1,4 @@
-@import '~vue2-datepicker/scss/index';
+@import 'vue2-datepicker/scss/index';
 
 .date-picker {
   &.no-margin {

app/javascript/dashboard/assets/scss/_formulate.scss

@@ -1,4 +1,4 @@
-@import '~dashboard/assets/scss/variables';
+@import 'dashboard/assets/scss/variables';
 
 .formulate-input {
   .formulate-input-errors {

app/javascript/dashboard/assets/scss/_foundation-settings.scss

@@ -41,7 +41,7 @@
 //  36. Tooltip
 //  37. Top Bar
 
-@import '~foundation-sites/scss/util/util';
+@import 'foundation-sites/scss/util/util';
 // 1. Global
 // ---------
 
@@ -51,11 +51,13 @@ $contrast-warnings: false;
 $global-font-size: 16px;
 $global-width: 100%;
 $global-lineheight: 1.5;
-$foundation-palette: (primary: $color-woot,
+$foundation-palette: (
+  primary: $color-woot,
   secondary: #5d7592,
   success: #44ce4b,
   warning: #ffc532,
-  alert: #ff382d);
+  alert: #ff382d
+);
 $light-gray: #c0ccda;
 $medium-gray: #8492a6;
 $dark-gray: $color-gray;
@@ -64,15 +66,15 @@ $white: #fff;
 $body-background: $white;
 $body-font-color: $color-body;
 $body-font-family: 'PlusJakarta',
--apple-system,
-system-ui,
-BlinkMacSystemFont,
-"Segoe UI",
-Roboto,
-"Helvetica Neue",
-Tahoma,
-Arial,
-sans-serif;
+  -apple-system,
+  system-ui,
+  BlinkMacSystemFont,
+  "Segoe UI",
+  Roboto,
+  "Helvetica Neue",
+  Tahoma,
+  Arial,
+  sans-serif;
 $body-antialiased: true;
 $global-margin: $space-small;
 $global-padding: $space-small;
@@ -88,7 +90,8 @@ $print-transparent-backgrounds: true;
 // 2. Breakpoints
 // --------------
 
-$breakpoints: (small: 0,
+$breakpoints: (
+  small: 0,
   medium: 640px,
   large: 1024px,
   xlarge: 1200px,
@@ -96,15 +99,19 @@ $breakpoints: (small: 0,
   xxxlarge: 1600px,
 );
 $print-breakpoint: large;
-$breakpoint-classes: (small medium large);
+$breakpoint-classes: (
+  small medium large
+);
 
 // 3. The Grid
 // -----------
 
 $grid-row-width: $global-width;
 $grid-column-count: 12;
-$grid-column-gutter: (small: $zero,
-  medium: $zero);
+$grid-column-gutter: (
+  small: $zero,
+  medium: $zero
+);
 $grid-column-align-edge: true;
 $block-grid-max: 8;
 
@@ -118,7 +125,8 @@ $font-family-monospace: $body-font-family;
 $header-color: $color-heading;
 $header-lineheight: 1.4;
 $header-margin-bottom: 0.3125rem;
-$header-styles: (small: ("h1": ("font-size": 24),
+$header-styles: (
+  small: ("h1": ("font-size": 24),
     "h2": ("font-size": 20),
     "h3": ("font-size": 19),
     "h4": ("font-size": 18),
@@ -129,7 +137,8 @@ $header-styles: (small: ("h1": ("font-size": 24),
     "h3": ("font-size": 31),
     "h4": ("font-size": 25),
     "h5": ("font-size": 20),
-    "h6": ("font-size": 16)));
+    "h6": ("font-size": 16))
+);
 $header-text-rendering: optimizeLegibility;
 $small-font-size: 80%;
 $header-small-font-color: $medium-gray;
@@ -249,16 +258,18 @@ $button-background-hover: scale-color($button-background, $lightness: -15%);
 $button-color: $white;
 $button-color-alt: $white;
 $button-radius: var(--border-radius-normal);
-$button-sizes: (tiny: var(--font-size-micro),
+$button-sizes: (
+  tiny: var(--font-size-micro),
   small: var(--font-size-mini),
   default: var(--font-size-small),
-  large: var(--font-size-medium));
+  large: var(--font-size-medium)
+);
 $button-palette: $foundation-palette;
 $button-opacity-disabled: 0.4;
 $button-background-hover-lightness: -20%;
 $button-hollow-hover-lightness: -50%;
 $button-transition: background-color 0.25s ease-out,
-color 0.25s ease-out;
+  color 0.25s ease-out;
 
 // 12. Button Group
 // ----------------
@@ -298,12 +309,18 @@ $card-margin: $global-margin;
 // ----------------
 
 $closebutton-position: right top;
-$closebutton-offset-horizontal: (small: 0.66rem,
-  medium: 1rem);
-$closebutton-offset-vertical: (small: 0.33em,
-  medium: 0.5rem);
-$closebutton-size: (small: 1.5em,
-  medium: 2em);
+$closebutton-offset-horizontal: (
+  small: 0.66rem,
+  medium: 1rem
+);
+$closebutton-offset-vertical: (
+  small: 0.33em,
+  medium: 0.5rem
+);
+$closebutton-size: (
+  small: 1.5em,
+  medium: 2em
+);
 $closebutton-lineheight: 1;
 $closebutton-color: $dark-gray;
 $closebutton-color-hover: $black;
@@ -326,9 +343,11 @@ $dropdown-border: 1px solid $medium-gray;
 $dropdown-font-size: 0.625rem;
 $dropdown-width: 300px;
 $dropdown-radius: $global-radius;
-$dropdown-sizes: (tiny: 100px,
+$dropdown-sizes: (
+  tiny: 100px,
   small: 200px,
-  large: 400px);
+  large: 400px
+);
 
 // 18. Dropdown Menu
 // -----------------
@@ -423,10 +442,12 @@ $meter-fill-bad: $alert-color;
 // 24. Off-canvas
 // --------------
 
-$offcanvas-sizes: (small: 14.375,
+$offcanvas-sizes: (
+  small: 14.375,
   medium: 14.375,
 );
-$offcanvas-vertical-sizes: (small: 14.375,
+$offcanvas-vertical-sizes: (
+  small: 14.375,
   medium: 14.375,
 );
 $offcanvas-background: $light-gray;
@@ -486,8 +507,10 @@ $progress-radius: $global-radius;
 // --------------------
 
 $responsive-embed-margin-bottom: rem-calc(16);
-$responsive-embed-ratios: (default: 4 by 3,
-  widescreen: 16 by 9);
+$responsive-embed-ratios: (
+  default: 4 by 3,
+  widescreen: 16 by 9
+);
 
 // 29. Reveal
 // ----------
@@ -541,7 +564,7 @@ $table-padding: rem-calc(8 10 10);
 $table-hover-scale: 2%;
 $table-row-hover: darken($table-background, $table-hover-scale);
 $table-row-stripe-hover: darken($table-background,
-  $table-color-scale + $table-hover-scale);
+    $table-color-scale + $table-hover-scale);
 $table-is-striped: false;
 $table-striped-background: smart-scale($table-background, $table-color-scale);
 $table-stripe: even;

app/javascript/dashboard/assets/scss/_mixins.scss

@@ -1,5 +1,5 @@
-@import '~dashboard/assets/scss/variables';
-@import '~widget/assets/scss/mixins';
+@import 'dashboard/assets/scss/variables';
+@import 'widget/assets/scss/mixins';
 
 $spinner-before-border-color: rgba(255, 255, 255, 0.7);
 

app/javascript/dashboard/assets/scss/_woot.scss

@@ -69,7 +69,7 @@
 
 @import 'plugins/multiselect';
 @import 'plugins/dropdown';
-@import '~shared/assets/stylesheets/ionicons';
+@import 'shared/assets/stylesheets/ionicons';
 @import 'utility-helpers';
 
 .tooltip {

app/javascript/dashboard/assets/scss/storybook.scss

@@ -10,7 +10,7 @@
 @import 'variables';
 
 @import 'vue-multiselect/dist/vue-multiselect.min.css';
-@import '~shared/assets/stylesheets/ionicons';
+@import 'shared/assets/stylesheets/ionicons';
 
 @import 'mixins';
 @import 'foundation-settings';