procode-vs-theme 1.0.7 → 1.0.9

package/src/components/_disabled.scss

@@ -1,8 +1,8 @@
-@use "../base/color" as cl;
-
-*:disabled,
-*[disabled],
-*.k-disabled {
-  background-color: cl.$background-disabled !important;
-  cursor: not-allowed !important;
-}
+@use "../base/color" as cl;
+
+*:disabled,
+*[disabled],
+*.k-disabled {
+  background-color: cl.$background-disabled !important;
+  cursor: not-allowed !important;
+}

package/src/components/_placeholder.scss

@@ -1,46 +1,46 @@
-@use "../base/color" as cl;
-@use "../base/font" as ft;
-@use "../base/mixins/font_size-mx" as mx;
-
-::placeholder {
-  color: cl.$text-placeholder;
-  opacity: 1;
-  @include mx.font-size(ft.$font-size-sm, ft.$line-height-sm);
-}
-
-::-webkit-input-placeholder {
-  color: cl.$text-placeholder;
-  @include mx.font-size(ft.$font-size-sm, ft.$line-height-sm);
-}
-
-:-ms-input-placeholder {
-  color: cl.$text-placeholder;
-  @include mx.font-size(ft.$font-size-sm, ft.$line-height-sm);
-}
-
-.qo-placeholder-xs::placeholder {
-  @include mx.font-size(ft.$font-size-xs, ft.$line-height-xs);
-}
-
-.qo-placeholder-sm::placeholder {
-  @include mx.font-size(ft.$font-size-sm, ft.$line-height-sm);
-}
-
-.qo-placeholder-md::placeholder {
-  @include mx.font-size(ft.$font-size-md, ft.$line-height-md);
-}
-
-.qo-placeholder-italic::placeholder {
-  font-style: italic;
-}
-
-.qo-placeholder-primary::placeholder { color: cl.$text-primary; }
-.qo-placeholder-secondary::placeholder { color: cl.$text-secondary; }
-.qo-placeholder-success::placeholder { color: cl.$text-success; }
-.qo-placeholder-warning::placeholder { color: cl.$text-warning; }
-.qo-placeholder-danger::placeholder { color: cl.$text-danger; }
-.qo-placeholder-info::placeholder { color: cl.$text-info; }
-.qo-placeholder-default::placeholder { color: cl.$text-default; }
-.qo-placeholder-dark::placeholder { color: cl.$text-dark; }
-.qo-placeholder-light::placeholder { color: cl.$text-light; }
-.qo-placeholder-tertiary::placeholder { color: cl.$text-tertiary; }
+@use "../base/color" as cl;
+@use "../base/font" as ft;
+@use "../base/mixins/font_size-mx" as mx;
+
+::placeholder {
+  color: cl.$text-placeholder;
+  opacity: 1;
+  @include mx.font-size(ft.$font-size-sm, ft.$line-height-sm);
+}
+
+::-webkit-input-placeholder {
+  color: cl.$text-placeholder;
+  @include mx.font-size(ft.$font-size-sm, ft.$line-height-sm);
+}
+
+:-ms-input-placeholder {
+  color: cl.$text-placeholder;
+  @include mx.font-size(ft.$font-size-sm, ft.$line-height-sm);
+}
+
+.qo-placeholder-xs::placeholder {
+  @include mx.font-size(ft.$font-size-xs, ft.$line-height-xs);
+}
+
+.qo-placeholder-sm::placeholder {
+  @include mx.font-size(ft.$font-size-sm, ft.$line-height-sm);
+}
+
+.qo-placeholder-md::placeholder {
+  @include mx.font-size(ft.$font-size-md, ft.$line-height-md);
+}
+
+.qo-placeholder-italic::placeholder {
+  font-style: italic;
+}
+
+.qo-placeholder-primary::placeholder { color: cl.$text-primary; }
+.qo-placeholder-secondary::placeholder { color: cl.$text-secondary; }
+.qo-placeholder-success::placeholder { color: cl.$text-success; }
+.qo-placeholder-warning::placeholder { color: cl.$text-warning; }
+.qo-placeholder-danger::placeholder { color: cl.$text-danger; }
+.qo-placeholder-info::placeholder { color: cl.$text-info; }
+.qo-placeholder-default::placeholder { color: cl.$text-default; }
+.qo-placeholder-dark::placeholder { color: cl.$text-dark; }
+.qo-placeholder-light::placeholder { color: cl.$text-light; }
+.qo-placeholder-tertiary::placeholder { color: cl.$text-tertiary; }

package/src/components.ts

@@ -1,23 +1,23 @@
-// VS Theme Components Export
-// Provides access to all component styles
-
-export const buttons = './components/_buttons.scss';
-export const input = './components/_input.scss';
-export const placeholder = './components/_placeholder.scss';
-export const cards = './components/_cards.scss';
-
-// All components combined
-export const allComponents = [
-  buttons,
-  input,
-  placeholder,
-  cards
-];
-
-export default {
-  buttons,
-  input,
-  placeholder,
-  cards,
-  all: allComponents
-};
+// VS Theme Components Export
+// Provides access to all component styles
+
+export const buttons = './components/_buttons.scss';
+export const input = './components/_input.scss';
+export const placeholder = './components/_placeholder.scss';
+export const cards = './components/_cards.scss';
+
+// All components combined
+export const allComponents = [
+  buttons,
+  input,
+  placeholder,
+  cards
+];
+
+export default {
+  buttons,
+  input,
+  placeholder,
+  cards,
+  all: allComponents
+};

package/src/index.scss

@@ -1,71 +1,71 @@
-// Reset
-@forward "./utilities/reset";
-
-// CSS Custom Properties
-@forward "./base/custom-properties";
-
-// Typography
-@forward "./utilities/typography/font";
-@forward "./utilities/typography/color";
-
-// Background
-@forward "./utilities/background-color/index.scss";
-
-// Border
-@forward "./utilities/border/border-color";
-@forward "./utilities/border/border-radius";
-@forward "./utilities/border/border-size";
-
-// Spacing
-@forward "./utilities/spaces/gap";
-@forward "./utilities/spaces/margin";
-@forward "./utilities/spaces/padding";
-
-// Box shadow
-@forward "./utilities/box-shadow/index.scss";
-
-
-// Display
-@forward "./utilities/display";
-
-// Flex
-@forward "./utilities/flex";
-
-// Text
-@forward "./utilities/text";
-
-// Position
-@forward "./utilities/position";
-
-// Overflow
-@forward "./utilities/overflow";
-
-// Opacity
-@forward "./utilities/opacity";
-
-// Cursor
-@forward "./utilities/cursor";
-
-// Sizing (width/height)
-@forward "./utilities/sizing";
-
-// Visibility
-@forward "./utilities/visibility";
-
-// Base variables & mixins
-@forward "./base/mixins/media-query-mx";
-@forward "./base/mixins/breakpoints";
-@forward "./base/border";
-@forward "./base/color";
-@forward "./base/font";
-@forward "./base/space";
-@forward "./base/size";
-
-// Components
-@forward "./components/buttons";
-@forward "./components/input";
-@forward "./components/placeholder";
-@forward "./components/disabled";
-
-// Layout
-@forward "./layout/drawer";
+// Reset
+@forward "./utilities/reset";
+
+// CSS Custom Properties
+@forward "./base/custom-properties";
+
+// Typography
+@forward "./utilities/typography/font";
+@forward "./utilities/typography/color";
+
+// Background
+@forward "./utilities/background-color/index.scss";
+
+// Border
+@forward "./utilities/border/border-color";
+@forward "./utilities/border/border-radius";
+@forward "./utilities/border/border-size";
+
+// Spacing
+@forward "./utilities/spaces/gap";
+@forward "./utilities/spaces/margin";
+@forward "./utilities/spaces/padding";
+
+// Box shadow
+@forward "./utilities/box-shadow/index.scss";
+
+
+// Display
+@forward "./utilities/display";
+
+// Flex
+@forward "./utilities/flex";
+
+// Text
+@forward "./utilities/text";
+
+// Position
+@forward "./utilities/position";
+
+// Overflow
+@forward "./utilities/overflow";
+
+// Opacity
+@forward "./utilities/opacity";
+
+// Cursor
+@forward "./utilities/cursor";
+
+// Sizing (width/height)
+@forward "./utilities/sizing";
+
+// Visibility
+@forward "./utilities/visibility";
+
+// Base variables & mixins
+@forward "./base/mixins/media-query-mx";
+@forward "./base/mixins/breakpoints";
+@forward "./base/border";
+@forward "./base/color";
+@forward "./base/font";
+@forward "./base/space";
+@forward "./base/size";
+
+// Components
+@forward "./components/buttons";
+@forward "./components/input";
+@forward "./components/placeholder";
+@forward "./components/disabled";
+
+// Layout
+@forward "./layout/drawer";

package/src/utilities/_cursor.scss

@@ -1,7 +1,7 @@
-@use "../base/mixins/meta-class" as mc;
-
-$_cursors: auto, default, pointer, wait, text, move, not-allowed, grab, grabbing;
-
-@each $cursor in $_cursors {
-  @include mc.meta("qo-cursor-#{$cursor}", (cursor: $cursor));
-}
+@use "../base/mixins/meta-class" as mc;
+
+$_cursors: auto, default, pointer, wait, text, move, not-allowed, grab, grabbing;
+
+@each $cursor in $_cursors {
+  @include mc.meta("qo-cursor-#{$cursor}", (cursor: $cursor));
+}

package/src/utilities/_display.scss

@@ -1,17 +1,17 @@
-@use "../base/mixins/breakpoints" as bp;
-@use "../base/mixins/meta-class" as mc;
-
-$_displays: none, inline, inline-block, block, flex, inline-flex, grid, inline-grid, table, table-row, table-cell;
-
-@each $display in $_displays {
-  @include mc.meta("qo-d-#{$display}", (display: $display));
-}
-
-// Responsive variants
-@each $bp-name, $bp-value in bp.$breakpoints {
-  @media (min-width: $bp-value) {
-    @each $display in $_displays {
-      @include mc.meta("qo-d-#{$bp-name}-#{$display}", (display: $display));
-    }
-  }
-}
+@use "../base/mixins/breakpoints" as bp;
+@use "../base/mixins/meta-class" as mc;
+
+$_displays: none, inline, inline-block, block, flex, inline-flex, grid, inline-grid, table, table-row, table-cell;
+
+@each $display in $_displays {
+  @include mc.meta("qo-d-#{$display}", (display: $display));
+}
+
+// Responsive variants
+@each $bp-name, $bp-value in bp.$breakpoints {
+  @media (min-width: $bp-value) {
+    @each $display in $_displays {
+      @include mc.meta("qo-d-#{$bp-name}-#{$display}", (display: $display));
+    }
+  }
+}

package/src/utilities/_flex.scss

@@ -1,83 +1,83 @@
-@use "../base/mixins/breakpoints" as bp;
-@use "../base/mixins/meta-class" as mc;
-
-// Direction
-@include mc.meta("qo-flex-row", (flex-direction: row));
-@include mc.meta("qo-flex-column", (flex-direction: column));
-@include mc.meta("qo-flex-row-reverse", (flex-direction: row-reverse));
-@include mc.meta("qo-flex-column-reverse", (flex-direction: column-reverse));
-
-// Wrap
-@include mc.meta("qo-flex-wrap", (flex-wrap: wrap));
-@include mc.meta("qo-flex-nowrap", (flex-wrap: nowrap));
-@include mc.meta("qo-flex-wrap-reverse", (flex-wrap: wrap-reverse));
-
-// Justify content
-@include mc.meta("qo-justify-content-start", (justify-content: flex-start));
-@include mc.meta("qo-justify-content-end", (justify-content: flex-end));
-@include mc.meta("qo-justify-content-center", (justify-content: center));
-@include mc.meta("qo-justify-content-between", (justify-content: space-between));
-@include mc.meta("qo-justify-content-around", (justify-content: space-around));
-@include mc.meta("qo-justify-content-evenly", (justify-content: space-evenly));
-
-// Align items
-@include mc.meta("qo-align-items-start", (align-items: flex-start));
-@include mc.meta("qo-align-items-end", (align-items: flex-end));
-@include mc.meta("qo-align-items-center", (align-items: center));
-@include mc.meta("qo-align-items-baseline", (align-items: baseline));
-@include mc.meta("qo-align-items-stretch", (align-items: stretch));
-
-// Align self
-@include mc.meta("qo-align-self-start", (align-self: flex-start));
-@include mc.meta("qo-align-self-end", (align-self: flex-end));
-@include mc.meta("qo-align-self-center", (align-self: center));
-@include mc.meta("qo-align-self-baseline", (align-self: baseline));
-@include mc.meta("qo-align-self-stretch", (align-self: stretch));
-
-// Align content
-@include mc.meta("qo-align-content-start", (align-content: flex-start));
-@include mc.meta("qo-align-content-end", (align-content: flex-end));
-@include mc.meta("qo-align-content-center", (align-content: center));
-@include mc.meta("qo-align-content-between", (align-content: space-between));
-@include mc.meta("qo-align-content-around", (align-content: space-around));
-@include mc.meta("qo-align-content-stretch", (align-content: stretch));
-
-// Flex grow/shrink/fill
-@include mc.meta("qo-flex-fill", (flex: 1 1 auto));
-@include mc.meta("qo-flex-grow-0", (flex-grow: 0));
-@include mc.meta("qo-flex-grow-1", (flex-grow: 1));
-@include mc.meta("qo-flex-shrink-0", (flex-shrink: 0));
-@include mc.meta("qo-flex-shrink-1", (flex-shrink: 1));
-
-// Order
-@include mc.meta("qo-order-first", (order: -1));
-@include mc.meta("qo-order-0", (order: 0));
-@include mc.meta("qo-order-1", (order: 1));
-@include mc.meta("qo-order-2", (order: 2));
-@include mc.meta("qo-order-3", (order: 3));
-@include mc.meta("qo-order-4", (order: 4));
-@include mc.meta("qo-order-5", (order: 5));
-@include mc.meta("qo-order-last", (order: 6));
-
-// Responsive variants
-@each $bp-name, $bp-value in bp.$breakpoints {
-  @media (min-width: $bp-value) {
-    @include mc.meta("qo-flex-#{$bp-name}-row", (flex-direction: row));
-    @include mc.meta("qo-flex-#{$bp-name}-column", (flex-direction: column));
-    @include mc.meta("qo-flex-#{$bp-name}-row-reverse", (flex-direction: row-reverse));
-    @include mc.meta("qo-flex-#{$bp-name}-column-reverse", (flex-direction: column-reverse));
-    @include mc.meta("qo-flex-#{$bp-name}-wrap", (flex-wrap: wrap));
-    @include mc.meta("qo-flex-#{$bp-name}-nowrap", (flex-wrap: nowrap));
-    @include mc.meta("qo-justify-content-#{$bp-name}-start", (justify-content: flex-start));
-    @include mc.meta("qo-justify-content-#{$bp-name}-end", (justify-content: flex-end));
-    @include mc.meta("qo-justify-content-#{$bp-name}-center", (justify-content: center));
-    @include mc.meta("qo-justify-content-#{$bp-name}-between", (justify-content: space-between));
-    @include mc.meta("qo-justify-content-#{$bp-name}-around", (justify-content: space-around));
-    @include mc.meta("qo-justify-content-#{$bp-name}-evenly", (justify-content: space-evenly));
-    @include mc.meta("qo-align-items-#{$bp-name}-start", (align-items: flex-start));
-    @include mc.meta("qo-align-items-#{$bp-name}-end", (align-items: flex-end));
-    @include mc.meta("qo-align-items-#{$bp-name}-center", (align-items: center));
-    @include mc.meta("qo-align-items-#{$bp-name}-baseline", (align-items: baseline));
-    @include mc.meta("qo-align-items-#{$bp-name}-stretch", (align-items: stretch));
-  }
-}
+@use "../base/mixins/breakpoints" as bp;
+@use "../base/mixins/meta-class" as mc;
+
+// Direction
+@include mc.meta("qo-flex-row", (flex-direction: row));
+@include mc.meta("qo-flex-column", (flex-direction: column));
+@include mc.meta("qo-flex-row-reverse", (flex-direction: row-reverse));
+@include mc.meta("qo-flex-column-reverse", (flex-direction: column-reverse));
+
+// Wrap
+@include mc.meta("qo-flex-wrap", (flex-wrap: wrap));
+@include mc.meta("qo-flex-nowrap", (flex-wrap: nowrap));
+@include mc.meta("qo-flex-wrap-reverse", (flex-wrap: wrap-reverse));
+
+// Justify content
+@include mc.meta("qo-justify-content-start", (justify-content: flex-start));
+@include mc.meta("qo-justify-content-end", (justify-content: flex-end));
+@include mc.meta("qo-justify-content-center", (justify-content: center));
+@include mc.meta("qo-justify-content-between", (justify-content: space-between));
+@include mc.meta("qo-justify-content-around", (justify-content: space-around));
+@include mc.meta("qo-justify-content-evenly", (justify-content: space-evenly));
+
+// Align items
+@include mc.meta("qo-align-items-start", (align-items: flex-start));
+@include mc.meta("qo-align-items-end", (align-items: flex-end));
+@include mc.meta("qo-align-items-center", (align-items: center));
+@include mc.meta("qo-align-items-baseline", (align-items: baseline));
+@include mc.meta("qo-align-items-stretch", (align-items: stretch));
+
+// Align self
+@include mc.meta("qo-align-self-start", (align-self: flex-start));
+@include mc.meta("qo-align-self-end", (align-self: flex-end));
+@include mc.meta("qo-align-self-center", (align-self: center));
+@include mc.meta("qo-align-self-baseline", (align-self: baseline));
+@include mc.meta("qo-align-self-stretch", (align-self: stretch));
+
+// Align content
+@include mc.meta("qo-align-content-start", (align-content: flex-start));
+@include mc.meta("qo-align-content-end", (align-content: flex-end));
+@include mc.meta("qo-align-content-center", (align-content: center));
+@include mc.meta("qo-align-content-between", (align-content: space-between));
+@include mc.meta("qo-align-content-around", (align-content: space-around));
+@include mc.meta("qo-align-content-stretch", (align-content: stretch));
+
+// Flex grow/shrink/fill
+@include mc.meta("qo-flex-fill", (flex: 1 1 auto));
+@include mc.meta("qo-flex-grow-0", (flex-grow: 0));
+@include mc.meta("qo-flex-grow-1", (flex-grow: 1));
+@include mc.meta("qo-flex-shrink-0", (flex-shrink: 0));
+@include mc.meta("qo-flex-shrink-1", (flex-shrink: 1));
+
+// Order
+@include mc.meta("qo-order-first", (order: -1));
+@include mc.meta("qo-order-0", (order: 0));
+@include mc.meta("qo-order-1", (order: 1));
+@include mc.meta("qo-order-2", (order: 2));
+@include mc.meta("qo-order-3", (order: 3));
+@include mc.meta("qo-order-4", (order: 4));
+@include mc.meta("qo-order-5", (order: 5));
+@include mc.meta("qo-order-last", (order: 6));
+
+// Responsive variants
+@each $bp-name, $bp-value in bp.$breakpoints {
+  @media (min-width: $bp-value) {
+    @include mc.meta("qo-flex-#{$bp-name}-row", (flex-direction: row));
+    @include mc.meta("qo-flex-#{$bp-name}-column", (flex-direction: column));
+    @include mc.meta("qo-flex-#{$bp-name}-row-reverse", (flex-direction: row-reverse));
+    @include mc.meta("qo-flex-#{$bp-name}-column-reverse", (flex-direction: column-reverse));
+    @include mc.meta("qo-flex-#{$bp-name}-wrap", (flex-wrap: wrap));
+    @include mc.meta("qo-flex-#{$bp-name}-nowrap", (flex-wrap: nowrap));
+    @include mc.meta("qo-justify-content-#{$bp-name}-start", (justify-content: flex-start));
+    @include mc.meta("qo-justify-content-#{$bp-name}-end", (justify-content: flex-end));
+    @include mc.meta("qo-justify-content-#{$bp-name}-center", (justify-content: center));
+    @include mc.meta("qo-justify-content-#{$bp-name}-between", (justify-content: space-between));
+    @include mc.meta("qo-justify-content-#{$bp-name}-around", (justify-content: space-around));
+    @include mc.meta("qo-justify-content-#{$bp-name}-evenly", (justify-content: space-evenly));
+    @include mc.meta("qo-align-items-#{$bp-name}-start", (align-items: flex-start));
+    @include mc.meta("qo-align-items-#{$bp-name}-end", (align-items: flex-end));
+    @include mc.meta("qo-align-items-#{$bp-name}-center", (align-items: center));
+    @include mc.meta("qo-align-items-#{$bp-name}-baseline", (align-items: baseline));
+    @include mc.meta("qo-align-items-#{$bp-name}-stretch", (align-items: stretch));
+  }
+}

package/src/utilities/_opacity.scss

@@ -1,7 +1,7 @@
-@use "../base/mixins/meta-class" as mc;
-
-$_opacities: (0: 0, 25: 0.25, 50: 0.5, 75: 0.75, 100: 1);
-
-@each $key, $value in $_opacities {
-  @include mc.meta("qo-opacity-#{$key}", (opacity: $value));
-}
+@use "../base/mixins/meta-class" as mc;
+
+$_opacities: (0: 0, 25: 0.25, 50: 0.5, 75: 0.75, 100: 1);
+
+@each $key, $value in $_opacities {
+  @include mc.meta("qo-opacity-#{$key}", (opacity: $value));
+}

package/src/utilities/_overflow.scss

@@ -1,9 +1,9 @@
-@use "../base/mixins/meta-class" as mc;
-
-$_overflow-values: auto, hidden, visible, scroll;
-
-@each $value in $_overflow-values {
-  @include mc.meta("qo-overflow-#{$value}", (overflow: $value));
-  @include mc.meta("qo-overflow-x-#{$value}", (overflow-x: $value));
-  @include mc.meta("qo-overflow-y-#{$value}", (overflow-y: $value));
-}
+@use "../base/mixins/meta-class" as mc;
+
+$_overflow-values: auto, hidden, visible, scroll;
+
+@each $value in $_overflow-values {
+  @include mc.meta("qo-overflow-#{$value}", (overflow: $value));
+  @include mc.meta("qo-overflow-x-#{$value}", (overflow-x: $value));
+  @include mc.meta("qo-overflow-y-#{$value}", (overflow-y: $value));
+}

package/src/utilities/_position.scss

@@ -1,22 +1,22 @@
-@use "../base/mixins/meta-class" as mc;
-
-@include mc.meta("qo-position-static", (position: static));
-@include mc.meta("qo-position-relative", (position: relative));
-@include mc.meta("qo-position-absolute", (position: absolute));
-@include mc.meta("qo-position-fixed", (position: fixed));
-@include mc.meta("qo-position-sticky", (position: sticky));
-
-// Edge positioning
-$_positions: (0: 0, 50: 50%, 100: 100%);
-
-@each $key, $value in $_positions {
-  @include mc.meta("qo-top-#{$key}", (top: $value));
-  @include mc.meta("qo-bottom-#{$key}", (bottom: $value));
-  @include mc.meta("qo-start-#{$key}", (left: $value));
-  @include mc.meta("qo-end-#{$key}", (right: $value));
-}
-
-// Center transform helpers
-@include mc.meta("qo-translate-middle", (transform: translate(-50%, -50%)));
-@include mc.meta("qo-translate-middle-x", (transform: translateX(-50%)));
-@include mc.meta("qo-translate-middle-y", (transform: translateY(-50%)));
+@use "../base/mixins/meta-class" as mc;
+
+@include mc.meta("qo-position-static", (position: static));
+@include mc.meta("qo-position-relative", (position: relative));
+@include mc.meta("qo-position-absolute", (position: absolute));
+@include mc.meta("qo-position-fixed", (position: fixed));
+@include mc.meta("qo-position-sticky", (position: sticky));
+
+// Edge positioning
+$_positions: (0: 0, 50: 50%, 100: 100%);
+
+@each $key, $value in $_positions {
+  @include mc.meta("qo-top-#{$key}", (top: $value));
+  @include mc.meta("qo-bottom-#{$key}", (bottom: $value));
+  @include mc.meta("qo-start-#{$key}", (left: $value));
+  @include mc.meta("qo-end-#{$key}", (right: $value));
+}
+
+// Center transform helpers
+@include mc.meta("qo-translate-middle", (transform: translate(-50%, -50%)));
+@include mc.meta("qo-translate-middle-x", (transform: translateX(-50%)));
+@include mc.meta("qo-translate-middle-y", (transform: translateY(-50%)));

package/src/utilities/_sizing.scss

@@ -1,24 +1,24 @@
-@use "../base/size" as sz;
-@use "../base/mixins/meta-class" as mc;
-
-@each $key, $value in sz.$sizing-values {
-  @include mc.meta("qo-w-#{$key}", (width: $value));
-  @include mc.meta("qo-h-#{$key}", (height: $value));
-}
-
-@each $key, $value in sz.$sizing-values {
-  @include mc.meta("qo-min-w-#{$key}", (min-width: $value));
-  @include mc.meta("qo-min-h-#{$key}", (min-height: $value));
-}
-
-@each $key, $value in sz.$sizing-values {
-  @include mc.meta("qo-max-w-#{$key}", (max-width: $value));
-  @include mc.meta("qo-max-h-#{$key}", (max-height: $value));
-}
-
-@include mc.meta("qo-mw-100", (max-width: 100%));
-@include mc.meta("qo-mh-100", (max-height: 100%));
-@include mc.meta("qo-min-vw-100", (min-width: 100vw));
-@include mc.meta("qo-min-vh-100", (min-height: 100vh));
-@include mc.meta("qo-vw-100", (width: 100vw));
-@include mc.meta("qo-vh-100", (height: 100vh));
+@use "../base/size" as sz;
+@use "../base/mixins/meta-class" as mc;
+
+@each $key, $value in sz.$sizing-values {
+  @include mc.meta("qo-w-#{$key}", (width: $value));
+  @include mc.meta("qo-h-#{$key}", (height: $value));
+}
+
+@each $key, $value in sz.$sizing-values {
+  @include mc.meta("qo-min-w-#{$key}", (min-width: $value));
+  @include mc.meta("qo-min-h-#{$key}", (min-height: $value));
+}
+
+@each $key, $value in sz.$sizing-values {
+  @include mc.meta("qo-max-w-#{$key}", (max-width: $value));
+  @include mc.meta("qo-max-h-#{$key}", (max-height: $value));
+}
+
+@include mc.meta("qo-mw-100", (max-width: 100%));
+@include mc.meta("qo-mh-100", (max-height: 100%));
+@include mc.meta("qo-min-vw-100", (min-width: 100vw));
+@include mc.meta("qo-min-vh-100", (min-height: 100vh));
+@include mc.meta("qo-vw-100", (width: 100vw));
+@include mc.meta("qo-vh-100", (height: 100vh));