aboutsummaryrefslogtreecommitdiffstats
path: root/old-apps/web-shared/src/styles/base
diff options
context:
space:
mode:
Diffstat (limited to 'old-apps/web-shared/src/styles/base')
-rw-r--r--old-apps/web-shared/src/styles/base/_accessibility.scss17
-rw-r--r--old-apps/web-shared/src/styles/base/_breakpoints.scss19
-rw-r--r--old-apps/web-shared/src/styles/base/_buttons.scss24
-rw-r--r--old-apps/web-shared/src/styles/base/_colors.scss6
-rw-r--r--old-apps/web-shared/src/styles/base/_forms.scss22
-rw-r--r--old-apps/web-shared/src/styles/base/_grid-layout.scss261
-rw-r--r--old-apps/web-shared/src/styles/base/_icons.scss62
-rw-r--r--old-apps/web-shared/src/styles/base/_mixins.scss151
-rw-r--r--old-apps/web-shared/src/styles/base/_reset.scss83
-rw-r--r--old-apps/web-shared/src/styles/base/_shared-styles.scss34
-rw-r--r--old-apps/web-shared/src/styles/base/_spacing.scss20
-rw-r--r--old-apps/web-shared/src/styles/base/_typography.scss185
-rw-r--r--old-apps/web-shared/src/styles/base/_util.scss1738
-rw-r--r--old-apps/web-shared/src/styles/base/_visibility.scss23
-rw-r--r--old-apps/web-shared/src/styles/base/_z-index.scss6
15 files changed, 0 insertions, 2651 deletions
diff --git a/old-apps/web-shared/src/styles/base/_accessibility.scss b/old-apps/web-shared/src/styles/base/_accessibility.scss
deleted file mode 100644
index 9f71937..0000000
--- a/old-apps/web-shared/src/styles/base/_accessibility.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.sr-only { // content made available only to screen readers
- position: absolute;
- clip: rect(1px, 1px, 1px, 1px);
- clip-path: inset(50%);
- width: 1px;
- height: 1px;
- overflow: hidden;
- padding: 0;
- border: 0;
- white-space: nowrap;
-}
-
-.sr-only-focusable { // focusable, visually hidden element
- &:not(:focus):not(:focus-within){
- @extend .sr-only
- }
-} \ No newline at end of file
diff --git a/old-apps/web-shared/src/styles/base/_breakpoints.scss b/old-apps/web-shared/src/styles/base/_breakpoints.scss
deleted file mode 100644
index 9b61af3..0000000
--- a/old-apps/web-shared/src/styles/base/_breakpoints.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-$breakpoints: (
- xs: "768px",
- sm: "768px",
- md: "1200px",
- lg: "1200px",
- xl: "1600px"
-) !default;
-
-@mixin breakpoint($breakpoint, $logic: false) {
- @if ($logic) {
- @media #{$logic} and (min-width: map-get($map: $breakpoints, $key: $breakpoint)) {
- @content;
- }
- } @else {
- @media (min-width: map-get($map: $breakpoints, $key: $breakpoint)) {
- @content;
- }
- }
-}
diff --git a/old-apps/web-shared/src/styles/base/_buttons.scss b/old-apps/web-shared/src/styles/base/_buttons.scss
deleted file mode 100644
index 2a7ff34..0000000
--- a/old-apps/web-shared/src/styles/base/_buttons.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-// don't modify this file -> edit 📁 custom-style/_buttons.scss to create your custom buttons
-
-.btn { // basic button style
- position: relative;
- display: inline-flex;
- justify-content: center;
- align-items: center;
- white-space: nowrap;
- text-decoration: none;
- font-size: var(--btn-font-size, 1em);
- padding-top: var(--btn-padding-y, 0.5em);
- padding-bottom: var(--btn-padding-y, 0.5em);
- padding-left: var(--btn-padding-x, 0.75em);
- padding-right: var(--btn-padding-x, 0.75em);
- border-radius: var(--btn-radius, 0.25em);
-}
-
-// default size variations
-.btn--sm { font-size: var(--btn-font-size-sm, 0.8em); }
-.btn--md { font-size: var(--btn-font-size-md, 1.2em); }
-.btn--lg { font-size: var(--btn-font-size-lg, 1.4em); }
-
-// button with (only) icon
-.btn--icon { padding: var(--btn-padding-y, 0.5em); } \ No newline at end of file
diff --git a/old-apps/web-shared/src/styles/base/_colors.scss b/old-apps/web-shared/src/styles/base/_colors.scss
deleted file mode 100644
index f061d9a..0000000
--- a/old-apps/web-shared/src/styles/base/_colors.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-// don't modify this file -> edit 📁 custom-style/_colors.scss to create your color palette
-
-[data-theme] {
- background-color: var(--color-bg, hsl(0, 0%, 100%));
- color: var(--color-contrast-high, hsl(210, 7%, 21%));
-} \ No newline at end of file
diff --git a/old-apps/web-shared/src/styles/base/_forms.scss b/old-apps/web-shared/src/styles/base/_forms.scss
deleted file mode 100644
index faffddd..0000000
--- a/old-apps/web-shared/src/styles/base/_forms.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-// don't modify this file -> edit 📁 custom-style/_forms.scss to create your custom form elements
-
-.form-control {
- font-size: var(--form-control-font-size, 1em);
- padding-top: var(--form-control-padding-y, 0.5em);
- padding-bottom: var(--form-control-padding-y, 0.5em);
- padding-left: var(--form-control-padding-x, 0.75em);
- padding-right: var(--form-control-padding-x, 0.75em);
- border-radius: var(--form-control-radius, 0.25em);
-}
-
-.form-legend {
- color: var(--color-contrast-higher, hsl(204, 28%, 7%));
- line-height: var(--heading-line-height, 1.2);
- font-size: var(--text-md, 1.125rem);
- margin-bottom: var(--space-sm);
-}
-
-.form-label {
- display: inline-block;
- font-size: var(--text-sm, 0.75rem);
-}
diff --git a/old-apps/web-shared/src/styles/base/_grid-layout.scss b/old-apps/web-shared/src/styles/base/_grid-layout.scss
deleted file mode 100644
index bd8b6c9..0000000
--- a/old-apps/web-shared/src/styles/base/_grid-layout.scss
+++ /dev/null
@@ -1,261 +0,0 @@
-@use 'mixins' as *;
-@use 'breakpoints' as *;
-
-// --------------------------------
-
-// Container - center content on x-axis
-
-// --------------------------------
-
-.container {
- width: calc(100% - 2*var(--component-padding));
- margin-left: auto;
- margin-right: auto;
-}
-
-// --------------------------------
-
-// Grid System
-
-// --------------------------------
-
-$grid-columns: 12 !default;
-
-.grid, .flex, .inline-flex {
- --gap: 0px;
- --gap-x: var(--gap);
- --gap-y: var(--gap);
- gap: var(--gap-y) var(--gap-x);
-
- > * {
- --sub-gap: 0px;
- --sub-gap-x: var(--sub-gap);
- --sub-gap-y: var(--sub-gap);
- }
-}
-
-.grid {
- --grid-columns: 12;
- display: flex;
- flex-wrap: wrap;
-
- > * {
- flex-basis: 100%;
- max-width: 100%;
- min-width: 0;
- }
-}
-
-/* #region (Safari < 14.1 fallback) */
-@media not all and (min-resolution:.001dpcm) {
- @supports (not(translate: none)) {
- .grid, .flex[class*="gap-"], .inline-flex[class*="gap-"] {
- gap: 0; // reset
- margin-bottom: calc(-1 * var(--gap-y));
- margin-left: calc(-1 * var(--gap-x));
-
- > * {
- margin-bottom: var(--sub-gap-y);
- }
- }
-
- .grid {
- --offset: var(--gap-x);
- --gap-modifier: 0;
- --offset-modifier: 1;
-
- > * {
- margin-left: var(--offset);
- }
- }
-
- .flex[class*="gap-"], .inline-flex[class*="gap-"] {
- > * {
- margin-left: var(--sub-gap-x);
- }
- }
- }
-}
-/* #endregion */
-
-.gap-xxxxs { --gap-x: var(--space-xxxxs); --gap-y: var(--space-xxxxs); > * { --sub-gap-x: var(--space-xxxxs); --sub-gap-y: var(--space-xxxxs); }}
-.gap-xxxs { --gap-x: var(--space-xxxs); --gap-y: var(--space-xxxs); > * { --sub-gap-x: var(--space-xxxs); --sub-gap-y: var(--space-xxxs); }}
-.gap-xxs { --gap-x: var(--space-xxs); --gap-y: var(--space-xxs); > * { --sub-gap-x: var(--space-xxs); --sub-gap-y: var(--space-xxs); }}
-.gap-xs { --gap-x: var(--space-xs); --gap-y: var(--space-xs); > * { --sub-gap-x: var(--space-xs); --sub-gap-y: var(--space-xs); }}
-.gap-sm { --gap-x: var(--space-sm); --gap-y: var(--space-sm); > * { --sub-gap-x: var(--space-sm); --sub-gap-y: var(--space-sm); }}
-.gap-md { --gap-x: var(--space-md); --gap-y: var(--space-md); > * { --sub-gap-x: var(--space-md); --sub-gap-y: var(--space-md); }}
-.gap-lg { --gap-x: var(--space-lg); --gap-y: var(--space-lg); > * { --sub-gap-x: var(--space-lg); --sub-gap-y: var(--space-lg); }}
-.gap-xl { --gap-x: var(--space-xl); --gap-y: var(--space-xl); > * { --sub-gap-x: var(--space-xl); --sub-gap-y: var(--space-xl); }}
-.gap-xxl { --gap-x: var(--space-xxl); --gap-y: var(--space-xxl); > * { --sub-gap-x: var(--space-xxl); --sub-gap-y: var(--space-xxl); }}
-.gap-xxxl { --gap-x: var(--space-xxxl); --gap-y: var(--space-xxxl); > * { --sub-gap-x: var(--space-xxxl); --sub-gap-y: var(--space-xxxl); }}
-.gap-xxxxl { --gap-x: var(--space-xxxxl); --gap-y: var(--space-xxxxl); > * { --sub-gap-x: var(--space-xxxxl); --sub-gap-y: var(--space-xxxxl); }}
-.gap-0 { --gap-x: 0; --gap-y: 0; > * { --sub-gap-x: 0; --sub-gap-y: 0; }}
-
-.gap-x-xxxxs { --gap-x: var(--space-xxxxs); > * { --sub-gap-x: var(--space-xxxxs); }}
-.gap-x-xxxs { --gap-x: var(--space-xxxs); > * { --sub-gap-x: var(--space-xxxs); }}
-.gap-x-xxs { --gap-x: var(--space-xxs); > * { --sub-gap-x: var(--space-xxs); }}
-.gap-x-xs { --gap-x: var(--space-xs); > * { --sub-gap-x: var(--space-xs); }}
-.gap-x-sm { --gap-x: var(--space-sm); > * { --sub-gap-x: var(--space-sm); }}
-.gap-x-md { --gap-x: var(--space-md); > * { --sub-gap-x: var(--space-md); }}
-.gap-x-lg { --gap-x: var(--space-lg); > * { --sub-gap-x: var(--space-lg); }}
-.gap-x-xl { --gap-x: var(--space-xl); > * { --sub-gap-x: var(--space-xl); }}
-.gap-x-xxl { --gap-x: var(--space-xxl); > * { --sub-gap-x: var(--space-xxl); }}
-.gap-x-xxxl { --gap-x: var(--space-xxxl); > * { --sub-gap-x: var(--space-xxxl); }}
-.gap-x-xxxxl { --gap-x: var(--space-xxxxl); > * { --sub-gap-x: var(--space-xxxxl); }}
-.gap-x-0 { --gap-x: 0; > * { --sub-gap-x: 0; }}
-
-.gap-y-xxxxs { --gap-y: var(--space-xxxxs); > * { --sub-gap-y: var(--space-xxxxs); }}
-.gap-y-xxxs { --gap-y: var(--space-xxxs); > * { --sub-gap-y: var(--space-xxxs); }}
-.gap-y-xxs { --gap-y: var(--space-xxs); > * { --sub-gap-y: var(--space-xxs); }}
-.gap-y-xs { --gap-y: var(--space-xs); > * { --sub-gap-y: var(--space-xs); }}
-.gap-y-sm { --gap-y: var(--space-sm); > * { --sub-gap-y: var(--space-sm); }}
-.gap-y-md { --gap-y: var(--space-md); > * { --sub-gap-y: var(--space-md); }}
-.gap-y-lg { --gap-y: var(--space-lg); > * { --sub-gap-y: var(--space-lg); }}
-.gap-y-xl { --gap-y: var(--space-xl); > * { --sub-gap-y: var(--space-xl); }}
-.gap-y-xxl { --gap-y: var(--space-xxl); > * { --sub-gap-y: var(--space-xxl); }}
-.gap-y-xxxl { --gap-y: var(--space-xxxl); > * { --sub-gap-y: var(--space-xxxl); }}
-.gap-y-xxxxl { --gap-y: var(--space-xxxxl); > * { --sub-gap-y: var(--space-xxxxl); }}
-.gap-y-0 { --gap-y: 0; > * { --sub-gap-y: 0; }}
-
-$grid-col-class-list: ''; // list of col-{span} classes
-
-@for $i from 1 through $grid-columns {
- $grid-col-class-list: $grid-col-class-list + ".col-#{$i}";
- @if($i < $grid-columns) {
- $grid-col-class-list: $grid-col-class-list + ', ';
- }
- .grid-col-#{$i} { --grid-columns: #{$i}; } // set number of grid columns
- .col-#{$i} { --span: #{$i}; } // set grid item span
-}
-
-#{$grid-col-class-list} {
- flex-basis: calc(((100% - (var(--grid-columns) - var(--gap-modifier, 1)) * var(--sub-gap-x)) * var(--span) / var(--grid-columns)) + (var(--span) - 1) * var(--sub-gap-x));
- max-width: calc(((100% - (var(--grid-columns) - var(--gap-modifier, 1)) * var(--sub-gap-x)) * var(--span) / var(--grid-columns)) + (var(--span) - 1) * var(--sub-gap-x));
-}
-
-.col { // auto-expanding column
- flex-grow: 1;
- flex-basis: 0;
- max-width: 100%;
-}
-
-.col-content { // column width depends on its content
- flex-grow: 0;
- flex-basis: initial;
- max-width: initial;
-}
-
-// offset
-$grid-offset-class-list: ''; // list of offset-{span} classes
-
-@for $i from 1 through $grid-columns - 1 {
- $grid-offset-class-list: $grid-offset-class-list + ".offset-#{$i}";
- @if($i < $grid-columns) {
- $grid-offset-class-list: $grid-offset-class-list + ', ';
- }
- .offset-#{$i} { --offset: #{$i}; }
-}
-
-#{$grid-offset-class-list} {
- margin-left: calc(((100% - (var(--grid-columns) - var(--gap-modifier, 1)) * var(--sub-gap-x)) * var(--offset) / var(--grid-columns)) + (var(--offset) + var(--offset-modifier, 0)) * var(--sub-gap-x));
-}
-
-// responsive variations
-@each $breakpoint, $value in $breakpoints {
- @include breakpoint(#{$breakpoint}) {
- .gap-xxxxs\@#{$breakpoint} { --gap-x: var(--space-xxxxs); --gap-y: var(--space-xxxxs); > * { --sub-gap-x: var(--space-xxxxs); --sub-gap-y: var(--space-xxxxs); }}
- .gap-xxxs\@#{$breakpoint} { --gap-x: var(--space-xxxs); --gap-y: var(--space-xxxs); > * { --sub-gap-x: var(--space-xxxs); --sub-gap-y: var(--space-xxxs); }}
- .gap-xxs\@#{$breakpoint} { --gap-x: var(--space-xxs); --gap-y: var(--space-xxs); > * { --sub-gap-x: var(--space-xxs); --sub-gap-y: var(--space-xxs); }}
- .gap-xs\@#{$breakpoint} { --gap-x: var(--space-xs); --gap-y: var(--space-xs); > * { --sub-gap-x: var(--space-xs); --sub-gap-y: var(--space-xs); }}
- .gap-sm\@#{$breakpoint} { --gap-x: var(--space-sm); --gap-y: var(--space-sm); > * { --sub-gap-x: var(--space-sm); --sub-gap-y: var(--space-sm); }}
- .gap-md\@#{$breakpoint} { --gap-x: var(--space-md); --gap-y: var(--space-md); > * { --sub-gap-x: var(--space-md); --sub-gap-y: var(--space-md); }}
- .gap-lg\@#{$breakpoint} { --gap-x: var(--space-lg); --gap-y: var(--space-lg); > * { --sub-gap-x: var(--space-lg); --sub-gap-y: var(--space-lg); }}
- .gap-xl\@#{$breakpoint} { --gap-x: var(--space-xl); --gap-y: var(--space-xl); > * { --sub-gap-x: var(--space-xl); --sub-gap-y: var(--space-xl); }}
- .gap-xxl\@#{$breakpoint} { --gap-x: var(--space-xxl); --gap-y: var(--space-xxl); > * { --sub-gap-x: var(--space-xxl); --sub-gap-y: var(--space-xxl); }}
- .gap-xxxl\@#{$breakpoint} { --gap-x: var(--space-xxxl); --gap-y: var(--space-xxxl); > * { --sub-gap-x: var(--space-xxxl); --sub-gap-y: var(--space-xxxl); }}
- .gap-xxxxl\@#{$breakpoint} { --gap-x: var(--space-xxxxl); --gap-y: var(--space-xxxxl); > * { --sub-gap-x: var(--space-xxxxl); --sub-gap-y: var(--space-xxxxl); }}
- .gap-0\@#{$breakpoint} { --gap-x: 0; --gap-y: 0; > * { --sub-gap-x: 0; --sub-gap-y: 0; }}
-
- .gap-x-xxxxs\@#{$breakpoint} { --gap-x: var(--space-xxxxs); > * { --sub-gap-x: var(--space-xxxxs); }}
- .gap-x-xxxs\@#{$breakpoint} { --gap-x: var(--space-xxxs); > * { --sub-gap-x: var(--space-xxxs); }}
- .gap-x-xxs\@#{$breakpoint} { --gap-x: var(--space-xxs); > * { --sub-gap-x: var(--space-xxs); }}
- .gap-x-xs\@#{$breakpoint} { --gap-x: var(--space-xs); > * { --sub-gap-x: var(--space-xs); }}
- .gap-x-sm\@#{$breakpoint} { --gap-x: var(--space-sm); > * { --sub-gap-x: var(--space-sm); }}
- .gap-x-md\@#{$breakpoint} { --gap-x: var(--space-md); > * { --sub-gap-x: var(--space-md); }}
- .gap-x-lg\@#{$breakpoint} { --gap-x: var(--space-lg); > * { --sub-gap-x: var(--space-lg); }}
- .gap-x-xl\@#{$breakpoint} { --gap-x: var(--space-xl); > * { --sub-gap-x: var(--space-xl); }}
- .gap-x-xxl\@#{$breakpoint} { --gap-x: var(--space-xxl); > * { --sub-gap-x: var(--space-xxl); }}
- .gap-x-xxxl\@#{$breakpoint} { --gap-x: var(--space-xxxl); > * { --sub-gap-x: var(--space-xxxl); }}
- .gap-x-xxxxl\@#{$breakpoint} { --gap-x: var(--space-xxxxl); > * { --sub-gap-x: var(--space-xxxxl); }}
- .gap-x-0\@#{$breakpoint} { --gap-x: 0; > * { --sub-gap-x: 0; }}
-
- .gap-y-xxxxs\@#{$breakpoint} { --gap-y: var(--space-xxxxs); > * { --sub-gap-y: var(--space-xxxxs); }}
- .gap-y-xxxs\@#{$breakpoint} { --gap-y: var(--space-xxxs); > * { --sub-gap-y: var(--space-xxxs); }}
- .gap-y-xxs\@#{$breakpoint} { --gap-y: var(--space-xxs); > * { --sub-gap-y: var(--space-xxs); }}
- .gap-y-xs\@#{$breakpoint} { --gap-y: var(--space-xs); > * { --sub-gap-y: var(--space-xs); }}
- .gap-y-sm\@#{$breakpoint} { --gap-y: var(--space-sm); > * { --sub-gap-y: var(--space-sm); }}
- .gap-y-md\@#{$breakpoint} { --gap-y: var(--space-md); > * { --sub-gap-y: var(--space-md); }}
- .gap-y-lg\@#{$breakpoint} { --gap-y: var(--space-lg); > * { --sub-gap-y: var(--space-lg); }}
- .gap-y-xl\@#{$breakpoint} { --gap-y: var(--space-xl); > * { --sub-gap-y: var(--space-xl); }}
- .gap-y-xxl\@#{$breakpoint} { --gap-y: var(--space-xxl); > * { --sub-gap-y: var(--space-xxl); }}
- .gap-y-xxxl\@#{$breakpoint} { --gap-y: var(--space-xxxl); > * { --sub-gap-y: var(--space-xxxl); }}
- .gap-y-xxxxl\@#{$breakpoint} { --gap-y: var(--space-xxxxl); > * { --sub-gap-y: var(--space-xxxxl); }}
- .gap-y-0\@#{$breakpoint} { --gap-y: 0; > * { --sub-gap-y: 0; }}
-
- $grid-col-class-list: ''; // list of col-{span} classes
-
- @for $i from 1 through $grid-columns {
- $grid-col-class-list: $grid-col-class-list + ".col-#{$i}\\@#{$breakpoint}";
- @if($i < $grid-columns) {
- $grid-col-class-list: $grid-col-class-list + ', ';
- }
- .grid-col-#{$i}\@#{$breakpoint} { --grid-columns: #{$i}; } // set number of grid columns
- .col-#{$i}\@#{$breakpoint} { --span: #{$i}; } // set grid item span
- }
-
- #{$grid-col-class-list} {
- flex-basis: calc(((100% - (var(--grid-columns) - var(--gap-modifier, 1)) * var(--sub-gap-x)) * var(--span) / var(--grid-columns)) + (var(--span) - 1) * var(--sub-gap-x));
- max-width: calc(((100% - (var(--grid-columns) - var(--gap-modifier, 1)) * var(--sub-gap-x)) * var(--span) / var(--grid-columns)) + (var(--span) - 1) * var(--sub-gap-x));
- }
-
- .col\@#{$breakpoint} { // auto-expanding column
- flex-grow: 1;
- flex-basis: 0;
- max-width: 100%;
- }
-
- .col-content\@#{$breakpoint} { // column width depends on its content
- flex-grow: 0;
- flex-basis: initial;
- max-width: initial;
- }
-
- // offset
- $grid-offset-class-list: ''; // list of offset-{span} classes
-
- @for $i from 1 through $grid-columns - 1 {
- $grid-offset-class-list: $grid-offset-class-list + ".offset-#{$i}\\@#{$breakpoint}";
- @if($i < $grid-columns) {
- $grid-offset-class-list: $grid-offset-class-list + ', ';
- }
- .offset-#{$i}\@#{$breakpoint} { --offset: #{$i}; }
- }
-
- #{$grid-offset-class-list} {
- margin-left: calc(((100% - (var(--grid-columns) - var(--gap-modifier, 1)) * var(--sub-gap-x)) * var(--offset) / var(--grid-columns)) + (var(--offset) + var(--offset-modifier, 0)) * var(--sub-gap-x));
- }
-
- .offset-0\@#{$breakpoint} {
- margin-left: 0;
- }
-
- @media not all and (min-resolution:.001dpcm) {
- @supports (not(translate: none)) {
- .offset-0\@#{$breakpoint} {
- margin-left: var(--gap-x);
- }
- }
- }
- }
-}
-
diff --git a/old-apps/web-shared/src/styles/base/_icons.scss b/old-apps/web-shared/src/styles/base/_icons.scss
deleted file mode 100644
index 1674a7c..0000000
--- a/old-apps/web-shared/src/styles/base/_icons.scss
+++ /dev/null
@@ -1,62 +0,0 @@
-// don't modify this file -> edit 📁 custom-style/_icons.scss to set your custom icons style
-
-:root {
- // default icon sizes
- --icon-xxxs: 8px;
- --icon-xxs: 12px;
- --icon-xs: 16px;
- --icon-sm: 24px;
- --icon-md: 32px;
- --icon-lg: 48px;
- --icon-xl: 64px;
- --icon-xxl: 96px;
- --icon-xxxl: 128px;
-}
-
-.icon {
- --size: 1em;
- height: var(--size);
- width: var(--size);
- display: inline-block;
- color: inherit;
- fill: currentColor;
- line-height: 1;
- flex-shrink: 0;
- max-width: initial;
-}
-
-// icon size
-.icon--xxxs { --size: var(--icon-xxxs); }
-.icon--xxs { --size: var(--icon-xxs); }
-.icon--xs { --size: var(--icon-xs); }
-.icon--sm { --size: var(--icon-sm); }
-.icon--md { --size: var(--icon-md); }
-.icon--lg { --size: var(--icon-lg); }
-.icon--xl { --size: var(--icon-xl); }
-.icon--xxl { --size: var(--icon-xxl); }
-.icon--xxxl { --size: var(--icon-xxxl); }
-
-.icon--is-spinning { // rotate the icon infinitely
- animation: icon-spin 1s infinite linear;
-}
-
-@keyframes icon-spin {
- 0% {
- transform: rotate(0deg);
- }
- 100% {
- transform: rotate(360deg);
- }
-}
-
-// --------------------------------
-
-// SVG <symbol>
-
-// --------------------------------
-
-// enable icon color corrections
-.icon use {
- color: inherit;
- fill: currentColor;
-} \ No newline at end of file
diff --git a/old-apps/web-shared/src/styles/base/_mixins.scss b/old-apps/web-shared/src/styles/base/_mixins.scss
deleted file mode 100644
index 8fe82f6..0000000
--- a/old-apps/web-shared/src/styles/base/_mixins.scss
+++ /dev/null
@@ -1,151 +0,0 @@
-@use 'sass:math';
-
-// --------------------------------
-
-// Typography
-
-// --------------------------------
-
-// edit font rendering -> tip: use for light text on dark backgrounds
-@mixin fontSmooth {
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-// crop top space on text elements - caused by line height
-@mixin lhCrop($line-height, $capital-letter: 1) {
- &::before {
- content: '';
- display: block;
- height: 0;
- width: 0;
- margin-top: calc((#{$capital-letter} - #{$line-height}) * 0.5em);
- }
-}
-
-// edit text unit on a component level
-@mixin textUnit($text-unit) {
- --text-unit: #{$text-unit};
- font-size: var(--text-unit);
-}
-
-// --------------------------------
-
-// Spacing
-
-// --------------------------------
-
-// edit space unit on a component level
-@mixin spaceUnit($space-unit) {
- --space-unit: #{$space-unit};
-}
-
-// --------------------------------
-
-// Reset
-
-// --------------------------------
-
-// reset user agent style
-@mixin reset {
- background-color: transparent;
- padding: 0;
- border: 0;
- border-radius: 0;
- color: inherit;
- line-height: inherit;
- appearance: none;
-}
-
-// --------------------------------
-
-// Colors
-
-// --------------------------------
-
-// define HSL color variable
-@mixin defineColorHSL($color, $hue, $saturation, $lightness) {
- #{$color}: unquote("hsl(#{$hue}, #{$saturation}, #{$lightness})");#{$color}-h: #{$hue};#{$color}-s: #{$saturation};#{$color}-l: #{$lightness};
-}
-
-// return color with different opacity value
-@function alpha($color, $opacity) {
- $color: str-replace($color, 'var(');
- $color: str-replace($color, ')');
- $color-h: var(#{$color+'-h'});
- $color-s: var(#{$color+'-s'});
- $color-l: var(#{$color+'-l'});
- @return hsla($color-h, $color-s, $color-l, $opacity);
-}
-
-// return color with different lightness value
-@function lightness($color, $lightnessMultiplier) {
- $color: str-replace($color, 'var(');
- $color: str-replace($color, ')');
- $color-h: var(#{$color+'-h'});
- $color-s: var(#{$color+'-s'});
- $color-l: var(#{$color+'-l'});
- @return hsl($color-h, $color-s, calc(#{$color-l} * #{$lightnessMultiplier}));
-}
-
-// modify color HSLA values
-@function adjustHSLA($color, $hueMultiplier: 1, $saturationMultiplier: 1, $lightnessMultiplier: 1, $opacity: 1) {
- $color: str-replace($color, 'var(');
- $color: str-replace($color, ')');
- $color-h: var(#{$color+'-h'});
- $color-s: var(#{$color+'-s'});
- $color-l: var(#{$color+'-l'});
- @return hsla(calc(#{$color-h} * #{$hueMultiplier}), calc(#{$color-s} * #{$saturationMultiplier}), calc(#{$color-l} * #{$lightnessMultiplier}), $opacity);
-}
-
-// replace substring with another string
-// credits: https://css-tricks.com/snippets/sass/str-replace-function/
-@function str-replace($string, $search, $replace: '') {
- $index: str-index($string, $search);
- @if $index {
- @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
- }
- @return $string;
-}
-
-// --------------------------------
-
-// Accessibility
-
-// --------------------------------
-
-// hide - content made available only to screen readers
-@mixin srHide {
- position: absolute;
- clip: rect(1px, 1px, 1px, 1px);
- clip-path: inset(50%);
-}
-
-// show
-@mixin srShow {
- position: static;
- clip: auto;
- clip-path: none;
-}
-
-// --------------------------------
-
-// CSS Triangle
-
-// --------------------------------
-
-@mixin triangle ($direction: up, $width: 12px, $color: red) {
- width: 0;
- height: 0;
- border: $width solid transparent;
-
- @if( $direction == left ) {
- border-right-color: $color;
- } @else if( $direction == right ) {
- border-left-color: $color;
- } @else if( $direction == down ) {
- border-top-color: $color;
- } @else {
- border-bottom-color: $color;
- }
-}
diff --git a/old-apps/web-shared/src/styles/base/_reset.scss b/old-apps/web-shared/src/styles/base/_reset.scss
deleted file mode 100644
index 5ba4534..0000000
--- a/old-apps/web-shared/src/styles/base/_reset.scss
+++ /dev/null
@@ -1,83 +0,0 @@
-*, *::after, *::before {
- box-sizing: inherit;
-}
-
-* {
- font: inherit;
-}
-
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video, hr {
- margin: 0;
- padding: 0;
- border: 0;
-}
-
-html {
- box-sizing: border-box;
-}
-
-body {
- background-color: var(--color-bg, white);
-}
-
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section, main, form legend {
- display: block;
-}
-
-ol, ul, menu {
- list-style: none;
-}
-
-blockquote, q {
- quotes: none;
-}
-
-button, input, textarea, select {
- margin: 0;
-}
-
-.btn, .form-control, .link, .reset { // reset style of buttons + form controls
- background-color: transparent;
- padding: 0;
- border: 0;
- border-radius: 0;
- color: inherit;
- line-height: inherit;
- appearance: none;
-}
-
-select.form-control::-ms-expand {
- display: none; // hide Select default icon on IE
-}
-
-textarea {
- resize: vertical;
- overflow: auto;
- vertical-align: top;
-}
-
-input::-ms-clear {
- display: none; // hide X icon in IE and Edge
-}
-
-table {
- border-collapse: collapse;
- border-spacing: 0;
-}
-
-img, video, svg {
- max-width: 100%;
-} \ No newline at end of file
diff --git a/old-apps/web-shared/src/styles/base/_shared-styles.scss b/old-apps/web-shared/src/styles/base/_shared-styles.scss
deleted file mode 100644
index dae02fe..0000000
--- a/old-apps/web-shared/src/styles/base/_shared-styles.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-// don't modify this file -> edit 📁 custom-style/_shared-style.scss to set your custom shared styles
-
-:root {
- // radius
- --radius-sm: calc(var(--radius, 0.25em)/2);
- --radius-md: var(--radius, 0.25em);
- --radius-lg: calc(var(--radius, 0.25em)*2);
-
- // box shadow
- --shadow-xs: 0 0.1px 0.3px rgba(0, 0, 0, 0.06),
- 0 1px 2px rgba(0, 0, 0, 0.12);
- --shadow-sm: 0 0.3px 0.4px rgba(0, 0, 0, 0.025),
- 0 0.9px 1.5px rgba(0, 0, 0, 0.05),
- 0 3.5px 6px rgba(0, 0, 0, 0.1);
- --shadow-md: 0 0.9px 1.5px rgba(0, 0, 0, 0.03),
- 0 3.1px 5.5px rgba(0, 0, 0, 0.08),
- 0 14px 25px rgba(0, 0, 0, 0.12);
- --shadow-lg: 0 1.2px 1.9px -1px rgba(0, 0, 0, 0.014),
- 0 3.3px 5.3px -1px rgba(0, 0, 0, 0.038),
- 0 8.5px 12.7px -1px rgba(0, 0, 0, 0.085),
- 0 30px 42px -1px rgba(0, 0, 0, 0.15);
- --shadow-xl: 0 1.5px 2.1px -6px rgba(0, 0, 0, 0.012),
- 0 3.6px 5.2px -6px rgba(0, 0, 0, 0.035),
- 0 7.3px 10.6px -6px rgba(0, 0, 0, 0.07),
- 0 16.2px 21.9px -6px rgba(0, 0, 0, 0.117),
- 0 46px 60px -6px rgba(0, 0, 0, 0.2);
-
- // timing functions
- // credits: https://github.com/ai/easings.net
- --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
- --ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
- --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
- --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
-} \ No newline at end of file
diff --git a/old-apps/web-shared/src/styles/base/_spacing.scss b/old-apps/web-shared/src/styles/base/_spacing.scss
deleted file mode 100644
index 24e6645..0000000
--- a/old-apps/web-shared/src/styles/base/_spacing.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-// don't modify this file -> edit 📁 custom-style/_spacing.scss to set your custom spacing scale
-
-:root {
- --space-unit: 1rem;
-}
-
-:root, * {
- --space-xxxxs: calc(0.125 * var(--space-unit));
- --space-xxxs: calc(0.25 * var(--space-unit));
- --space-xxs: calc(0.375 * var(--space-unit));
- --space-xs: calc(0.5 * var(--space-unit));
- --space-sm: calc(0.75 * var(--space-unit));
- --space-md: calc(1.25 * var(--space-unit));
- --space-lg: calc(2 * var(--space-unit));
- --space-xl: calc(3.25 * var(--space-unit));
- --space-xxl: calc(5.25 * var(--space-unit));
- --space-xxxl: calc(8.5 * var(--space-unit));
- --space-xxxxl: calc(13.75 * var(--space-unit));
- --component-padding: var(--space-md);
-}
diff --git a/old-apps/web-shared/src/styles/base/_typography.scss b/old-apps/web-shared/src/styles/base/_typography.scss
deleted file mode 100644
index 85b974a..0000000
--- a/old-apps/web-shared/src/styles/base/_typography.scss
+++ /dev/null
@@ -1,185 +0,0 @@
-// don't modify this file -> edit 📁 custom-style/_typography.scss to set your custom typography
-
-@use 'breakpoints' as *;
-
-:root {
- --heading-line-height: 1.2;
- --body-line-height: 1.4;
-}
-
-body {
- font-size: var(--text-base-size, 1rem);
- font-family: var(--font-primary, sans-serif);
- color: var(--color-contrast-high, hsl(210, 7%, 21%));
- font-weight: var(--body-font-weight, normal);
-}
-
-h1, h2, h3, h4 {
- color: var(--color-contrast-higher, hsl(204, 28%, 7%));
- line-height: var(--heading-line-height, 1.2);
- font-weight: var(--heading-font-weight, 700);
-}
-
-h1 {
- font-size: var(--text-xxl, 2rem);
-}
-
-h2 {
- font-size: var(--text-xl, 1.75rem);
-}
-
-h3 {
- font-size: var(--text-lg, 1.375rem);
-}
-
-h4 {
- font-size: var(--text-md, 1.125rem);
-}
-
-small {
- font-size: var(--text-sm, 0.75rem);
-}
-
-// --------------------------------
-
-// Inline Text
-
-// --------------------------------
-
-a, .link {
- color: var(--color-primary, hsl(250, 84%, 54%));
- text-decoration: underline;
-}
-
-strong {
- font-weight: bold;
-}
-
-s {
- text-decoration: line-through;
-}
-
-u {
- text-decoration: underline;
-}
-
-// --------------------------------
-
-// Text Component - Class used to stylize text blocks
-
-// --------------------------------
-
-.text-component {
- h1, h2, h3, h4 {
- line-height: calc(var(--heading-line-height) * var(--line-height-multiplier, 1));
- margin-bottom: calc(var(--space-unit) * 0.3125 * var(--text-space-y-multiplier, 1));
- }
-
- h2, h3, h4 {
- margin-top: calc(var(--space-unit) * 0.9375 * var(--text-space-y-multiplier, 1));
- }
-
- p, blockquote, ul li, ol li {
- line-height: calc(var(--body-line-height) * var(--line-height-multiplier, 1));
- }
-
- ul, ol, p, blockquote, .text-component__block {
- margin-bottom: calc(var(--space-unit) * 0.9375 * var(--text-space-y-multiplier, 1));
- }
-
- ul, ol {
- list-style-position: inside;
-
- ul, ol {
- padding-left: 1em;
- margin-bottom: 0;
- }
- }
-
- ul {
- list-style-type: disc;
- }
-
- ol {
- list-style-type: decimal;
- }
-
- img {
- display: block;
- margin: 0 auto;
- }
-
- figcaption {
- text-align: center;
- margin-top: calc(var(--space-unit) * 0.5);
- }
-
- em {
- font-style: italic;
- }
-
- hr {
- margin-top: calc(var(--space-unit) * 1.875 * var(--text-space-y-multiplier, 1));
- margin-bottom: calc(var(--space-unit) * 1.875 * var(--text-space-y-multiplier, 1));
- margin-left: auto;
- margin-right: auto;
- }
-
- > *:first-child {
- margin-top: 0;
- }
-
- > *:last-child {
- margin-bottom: 0;
- }
-}
-
-// text block container
-.text-component__block--full-width {
- width: 100vw;
- margin-left: calc(50% - 50vw);
-}
-
-@include breakpoint(sm) {
- .text-component__block--left,
- .text-component__block--right {
- width: 45%;
-
- img {
- width: 100%;
- }
- }
-
- .text-component__block--left {
- float: left;
- margin-right: calc(var(--space-unit) * 0.9375 * var(--text-space-y-multiplier, 1));
- }
-
- .text-component__block--right {
- float: right;
- margin-left: calc(var(--space-unit) * 0.9375 * var(--text-space-y-multiplier, 1));
- }
-}
-
-// outset content
-@include breakpoint(xl) {
- .text-component__block--outset {
- width: calc(100% + 10.5 * var(--space-unit));
-
- img {
- width: 100%;
- }
- }
-
- .text-component__block--outset:not(.text-component__block--right) {
- margin-left: calc(-5.25 * var(--space-unit));
- }
-
- .text-component__block--left, .text-component__block--right {
- width: 50%;
- }
-
- .text-component__block--right.text-component__block--outset {
- margin-right: calc(-5.25 * var(--space-unit));
- }
-} \ No newline at end of file
diff --git a/old-apps/web-shared/src/styles/base/_util.scss b/old-apps/web-shared/src/styles/base/_util.scss
deleted file mode 100644
index c384c2c..0000000
--- a/old-apps/web-shared/src/styles/base/_util.scss
+++ /dev/null
@@ -1,1738 +0,0 @@
-@use 'mixins' as *;
-@use 'breakpoints' as *;
-
-// --------------------------------
-
-// Flexbox
-
-// --------------------------------
-
-.flex { display: flex; }
-.inline-flex { display: inline-flex; }
-.flex-wrap { flex-wrap: wrap; }
-.flex-nowrap { flex-wrap: nowrap; }
-.flex-column { flex-direction: column; }
-.flex-column-reverse { flex-direction: column-reverse; }
-.flex-row { flex-direction: row; }
-.flex-row-reverse { flex-direction: row-reverse; }
-.flex-center { justify-content: center; align-items: center; }
-
-
-// flex items
-.flex-grow { flex-grow: 1; }
-.flex-grow-0 { flex-grow: 0; }
-.flex-shrink { flex-shrink: 1; }
-.flex-shrink-0 { flex-shrink: 0; }
-.flex-basis-0 { flex-basis: 0; }
-
-// --------------------------------
-
-// Justify Content
-
-// --------------------------------
-
-.justify-start { justify-content: flex-start; }
-.justify-end { justify-content: flex-end; }
-.justify-center { justify-content: center; }
-.justify-between { justify-content: space-between; }
-
-// --------------------------------
-
-// Align Items
-
-// --------------------------------
-
-.items-center { align-items: center; }
-.items-start { align-items: flex-start; }
-.items-end { align-items: flex-end; }
-.items-baseline { align-items: baseline; }
-
-// --------------------------------
-
-// Order
-
-// --------------------------------
-
-.order-1 { order: 1; }
-.order-2 { order: 2; }
-.order-3 { order: 3; }
-
-// --------------------------------
-
-// Aspect Ratio
-
-// --------------------------------
-
-[class^="aspect-ratio"], [class*=" aspect-ratio"] {
- --aspect-ratio: calc(16/9);
- position: relative;
- height: 0;
- padding-bottom: calc(100%/(var(--aspect-ratio)));
-
- > * {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
-
- &:not(iframe) {
- object-fit: cover;
- }
- }
-}
-
-.aspect-ratio-16\:9 { --aspect-ratio: calc(16/9); }
-.aspect-ratio-3\:2 { --aspect-ratio: calc(3/2); }
-.aspect-ratio-4\:3 { --aspect-ratio: calc(4/3); }
-.aspect-ratio-5\:4 { --aspect-ratio: calc(5/4); }
-.aspect-ratio-1\:1 { --aspect-ratio: calc(1/1); }
-.aspect-ratio-4\:5 { --aspect-ratio: calc(4/5); }
-.aspect-ratio-3\:4 { --aspect-ratio: calc(3/4); }
-.aspect-ratio-2\:3 { --aspect-ratio: calc(2/3); }
-.aspect-ratio-9\:16 { --aspect-ratio: calc(9/16); }
-
-// --------------------------------
-
-// Display
-
-// --------------------------------
-
-.block { display: block; }
-.inline-block { display: inline-block; }
-.inline { display: inline; }
-.contents { display: contents; }
-.hide { display: none; }
-
-// --------------------------------
-
-// Space unit
-
-// --------------------------------
-
-.space-unit-rem { --space-unit: 1rem; }
-.space-unit-em { --space-unit: 1em; }
-.space-unit-px { --space-unit: 16px; }
-
-// --------------------------------
-
-// Margin
-
-// --------------------------------
-
-.margin-xxxxs { margin: var(--space-xxxxs); }
-.margin-xxxs { margin: var(--space-xxxs); }
-.margin-xxs { margin: var(--space-xxs); }
-.margin-xs { margin: var(--space-xs); }
-.margin-sm { margin: var(--space-sm); }
-.margin-md { margin: var(--space-md); }
-.margin-lg { margin: var(--space-lg); }
-.margin-xl { margin: var(--space-xl); }
-.margin-xxl { margin: var(--space-xxl); }
-.margin-xxxl { margin: var(--space-xxxl); }
-.margin-xxxxl { margin: var(--space-xxxxl); }
-.margin-auto { margin: auto; }
-.margin-0 { margin: 0; }
-
-.margin-top-xxxxs { margin-top: var(--space-xxxxs); }
-.margin-top-xxxs { margin-top: var(--space-xxxs); }
-.margin-top-xxs { margin-top: var(--space-xxs); }
-.margin-top-xs { margin-top: var(--space-xs); }
-.margin-top-sm { margin-top: var(--space-sm); }
-.margin-top-md { margin-top: var(--space-md); }
-.margin-top-lg { margin-top: var(--space-lg); }
-.margin-top-xl { margin-top: var(--space-xl); }
-.margin-top-xxl { margin-top: var(--space-xxl); }
-.margin-top-xxxl { margin-top: var(--space-xxxl); }
-.margin-top-xxxxl { margin-top: var(--space-xxxxl); }
-.margin-top-auto { margin-top: auto; }
-.margin-top-0 { margin-top: 0; }
-
-.margin-bottom-xxxxs { margin-bottom: var(--space-xxxxs); }
-.margin-bottom-xxxs { margin-bottom: var(--space-xxxs); }
-.margin-bottom-xxs { margin-bottom: var(--space-xxs); }
-.margin-bottom-xs { margin-bottom: var(--space-xs); }
-.margin-bottom-sm { margin-bottom: var(--space-sm); }
-.margin-bottom-md { margin-bottom: var(--space-md); }
-.margin-bottom-lg { margin-bottom: var(--space-lg); }
-.margin-bottom-xl { margin-bottom: var(--space-xl); }
-.margin-bottom-xxl { margin-bottom: var(--space-xxl); }
-.margin-bottom-xxxl { margin-bottom: var(--space-xxxl); }
-.margin-bottom-xxxxl { margin-bottom: var(--space-xxxxl); }
-.margin-bottom-auto { margin-bottom: auto; }
-.margin-bottom-0 { margin-bottom: 0; }
-
-.margin-right-xxxxs { margin-right: var(--space-xxxxs); }
-.margin-right-xxxs { margin-right: var(--space-xxxs); }
-.margin-right-xxs { margin-right: var(--space-xxs); }
-.margin-right-xs { margin-right: var(--space-xs); }
-.margin-right-sm { margin-right: var(--space-sm); }
-.margin-right-md { margin-right: var(--space-md); }
-.margin-right-lg { margin-right: var(--space-lg); }
-.margin-right-xl { margin-right: var(--space-xl); }
-.margin-right-xxl { margin-right: var(--space-xxl); }
-.margin-right-xxxl { margin-right: var(--space-xxxl); }
-.margin-right-xxxxl { margin-right: var(--space-xxxxl); }
-.margin-right-auto { margin-right: auto; }
-.margin-right-0 { margin-right: 0; }
-
-.margin-left-xxxxs { margin-left: var(--space-xxxxs); }
-.margin-left-xxxs { margin-left: var(--space-xxxs); }
-.margin-left-xxs { margin-left: var(--space-xxs); }
-.margin-left-xs { margin-left: var(--space-xs); }
-.margin-left-sm { margin-left: var(--space-sm); }
-.margin-left-md { margin-left: var(--space-md); }
-.margin-left-lg { margin-left: var(--space-lg); }
-.margin-left-xl { margin-left: var(--space-xl); }
-.margin-left-xxl { margin-left: var(--space-xxl); }
-.margin-left-xxxl { margin-left: var(--space-xxxl); }
-.margin-left-xxxxl { margin-left: var(--space-xxxxl); }
-.margin-left-auto { margin-left: auto; }
-.margin-left-0 { margin-left: 0; }
-
-.margin-x-xxxxs { margin-left: var(--space-xxxxs); margin-right: var(--space-xxxxs); }
-.margin-x-xxxs { margin-left: var(--space-xxxs); margin-right: var(--space-xxxs); }
-.margin-x-xxs { margin-left: var(--space-xxs); margin-right: var(--space-xxs); }
-.margin-x-xs { margin-left: var(--space-xs); margin-right: var(--space-xs); }
-.margin-x-sm { margin-left: var(--space-sm); margin-right: var(--space-sm); }
-.margin-x-md { margin-left: var(--space-md); margin-right: var(--space-md); }
-.margin-x-lg { margin-left: var(--space-lg); margin-right: var(--space-lg); }
-.margin-x-xl { margin-left: var(--space-xl); margin-right: var(--space-xl); }
-.margin-x-xxl { margin-left: var(--space-xxl); margin-right: var(--space-xxl); }
-.margin-x-xxxl { margin-left: var(--space-xxxl); margin-right: var(--space-xxxl); }
-.margin-x-xxxxl { margin-left: var(--space-xxxxl); margin-right: var(--space-xxxxl); }
-.margin-x-auto { margin-left: auto; margin-right: auto; }
-.margin-x-0 { margin-left: 0; margin-right: 0; }
-
-.margin-y-xxxxs { margin-top: var(--space-xxxxs); margin-bottom: var(--space-xxxxs); }
-.margin-y-xxxs { margin-top: var(--space-xxxs); margin-bottom: var(--space-xxxs); }
-.margin-y-xxs { margin-top: var(--space-xxs); margin-bottom: var(--space-xxs); }
-.margin-y-xs { margin-top: var(--space-xs); margin-bottom: var(--space-xs); }
-.margin-y-sm { margin-top: var(--space-sm); margin-bottom: var(--space-sm); }
-.margin-y-md { margin-top: var(--space-md); margin-bottom: var(--space-md); }
-.margin-y-lg { margin-top: var(--space-lg); margin-bottom: var(--space-lg); }
-.margin-y-xl { margin-top: var(--space-xl); margin-bottom: var(--space-xl); }
-.margin-y-xxl { margin-top: var(--space-xxl); margin-bottom: var(--space-xxl); }
-.margin-y-xxxl { margin-top: var(--space-xxxl); margin-bottom: var(--space-xxxl); }
-.margin-y-xxxxl { margin-top: var(--space-xxxxl); margin-bottom: var(--space-xxxxl); }
-.margin-y-auto { margin-top: auto; margin-bottom: auto; }
-.margin-y-0 { margin-top: 0; margin-bottom: 0; }
-
-// --------------------------------
-
-// Padding
-
-// --------------------------------
-
-.padding-xxxxs { padding: var(--space-xxxxs); }
-.padding-xxxs { padding: var(--space-xxxs); }
-.padding-xxs { padding: var(--space-xxs); }
-.padding-xs { padding: var(--space-xs); }
-.padding-sm { padding: var(--space-sm); }
-.padding-md { padding: var(--space-md); }
-.padding-lg { padding: var(--space-lg); }
-.padding-xl { padding: var(--space-xl); }
-.padding-xxl { padding: var(--space-xxl); }
-.padding-xxxl { padding: var(--space-xxxl); }
-.padding-xxxxl { padding: var(--space-xxxxl); }
-.padding-0 { padding: 0; }
-.padding-component { padding: var(--component-padding); }
-
-.padding-top-xxxxs { padding-top: var(--space-xxxxs); }
-.padding-top-xxxs { padding-top: var(--space-xxxs); }
-.padding-top-xxs { padding-top: var(--space-xxs); }
-.padding-top-xs { padding-top: var(--space-xs); }
-.padding-top-sm { padding-top: var(--space-sm); }
-.padding-top-md { padding-top: var(--space-md); }
-.padding-top-lg { padding-top: var(--space-lg); }
-.padding-top-xl { padding-top: var(--space-xl); }
-.padding-top-xxl { padding-top: var(--space-xxl); }
-.padding-top-xxxl { padding-top: var(--space-xxxl); }
-.padding-top-xxxxl { padding-top: var(--space-xxxxl); }
-.padding-top-0 { padding-top: 0; }
-.padding-top-component { padding-top: var(--component-padding); }
-
-.padding-bottom-xxxxs { padding-bottom: var(--space-xxxxs); }
-.padding-bottom-xxxs { padding-bottom: var(--space-xxxs); }
-.padding-bottom-xxs { padding-bottom: var(--space-xxs); }
-.padding-bottom-xs { padding-bottom: var(--space-xs); }
-.padding-bottom-sm { padding-bottom: var(--space-sm); }
-.padding-bottom-md { padding-bottom: var(--space-md); }
-.padding-bottom-lg { padding-bottom: var(--space-lg); }
-.padding-bottom-xl { padding-bottom: var(--space-xl); }
-.padding-bottom-xxl { padding-bottom: var(--space-xxl); }
-.padding-bottom-xxxl { padding-bottom: var(--space-xxxl); }
-.padding-bottom-xxxxl { padding-bottom: var(--space-xxxxl); }
-.padding-bottom-0 { padding-bottom: 0; }
-.padding-bottom-component { padding-bottom: var(--component-padding); }
-
-.padding-right-xxxxs { padding-right: var(--space-xxxxs); }
-.padding-right-xxxs { padding-right: var(--space-xxxs); }
-.padding-right-xxs { padding-right: var(--space-xxs); }
-.padding-right-xs { padding-right: var(--space-xs); }
-.padding-right-sm { padding-right: var(--space-sm); }
-.padding-right-md { padding-right: var(--space-md); }
-.padding-right-lg { padding-right: var(--space-lg); }
-.padding-right-xl { padding-right: var(--space-xl); }
-.padding-right-xxl { padding-right: var(--space-xxl); }
-.padding-right-xxxl { padding-right: var(--space-xxxl); }
-.padding-right-xxxxl { padding-right: var(--space-xxxxl); }
-.padding-right-0 { padding-right: 0; }
-.padding-right-component { padding-right: var(--component-padding); }
-
-.padding-left-xxxxs { padding-left: var(--space-xxxxs); }
-.padding-left-xxxs { padding-left: var(--space-xxxs); }
-.padding-left-xxs { padding-left: var(--space-xxs); }
-.padding-left-xs { padding-left: var(--space-xs); }
-.padding-left-sm { padding-left: var(--space-sm); }
-.padding-left-md { padding-left: var(--space-md); }
-.padding-left-lg { padding-left: var(--space-lg); }
-.padding-left-xl { padding-left: var(--space-xl); }
-.padding-left-xxl { padding-left: var(--space-xxl); }
-.padding-left-xxxl { padding-left: var(--space-xxxl); }
-.padding-left-xxxxl { padding-left: var(--space-xxxxl); }
-.padding-left-0 { padding-left: 0; }
-.padding-left-component { padding-left: var(--component-padding); }
-
-.padding-x-xxxxs { padding-left: var(--space-xxxxs); padding-right: var(--space-xxxxs); }
-.padding-x-xxxs { padding-left: var(--space-xxxs); padding-right: var(--space-xxxs); }
-.padding-x-xxs { padding-left: var(--space-xxs); padding-right: var(--space-xxs); }
-.padding-x-xs { padding-left: var(--space-xs); padding-right: var(--space-xs); }
-.padding-x-sm { padding-left: var(--space-sm); padding-right: var(--space-sm); }
-.padding-x-md { padding-left: var(--space-md); padding-right: var(--space-md); }
-.padding-x-lg { padding-left: var(--space-lg); padding-right: var(--space-lg); }
-.padding-x-xl { padding-left: var(--space-xl); padding-right: var(--space-xl); }
-.padding-x-xxl { padding-left: var(--space-xxl); padding-right: var(--space-xxl); }
-.padding-x-xxxl { padding-left: var(--space-xxxl); padding-right: var(--space-xxxl); }
-.padding-x-xxxxl { padding-left: var(--space-xxxxl); padding-right: var(--space-xxxxl); }
-.padding-x-0 { padding-left: 0; padding-right: 0; }
-.padding-x-component { padding-left: var(--component-padding); padding-right: var(--component-padding); }
-
-.padding-y-xxxxs { padding-top: var(--space-xxxxs); padding-bottom: var(--space-xxxxs); }
-.padding-y-xxxs { padding-top: var(--space-xxxs); padding-bottom: var(--space-xxxs); }
-.padding-y-xxs { padding-top: var(--space-xxs); padding-bottom: var(--space-xxs); }
-.padding-y-xs { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
-.padding-y-sm { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
-.padding-y-md { padding-top: var(--space-md); padding-bottom: var(--space-md); }
-.padding-y-lg { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
-.padding-y-xl { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
-.padding-y-xxl { padding-top: var(--space-xxl); padding-bottom: var(--space-xxl); }
-.padding-y-xxxl { padding-top: var(--space-xxxl); padding-bottom: var(--space-xxxl); }
-.padding-y-xxxxl { padding-top: var(--space-xxxxl); padding-bottom: var(--space-xxxxl); }
-.padding-y-0 { padding-top: 0; padding-bottom: 0; }
-.padding-y-component { padding-top: var(--component-padding); padding-bottom: var(--component-padding); }
-
-// --------------------------------
-
-// Vertical Align
-
-// --------------------------------
-
-.align-baseline { vertical-align: baseline; }
-.align-top { vertical-align: top; }
-.align-middle { vertical-align: middle; }
-.align-bottom { vertical-align: bottom; }
-
-// --------------------------------
-
-// Typography
-
-// --------------------------------
-
-.truncate, .text-truncate { // truncate text if it exceeds its parent
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-}
-
-.text-replace { // replace text with bg img
- overflow: hidden;
- color: transparent;
- text-indent: 100%;
- white-space: nowrap;
-}
-
-.break-word {
- overflow-wrap: break-word;
- min-width: 0;
-}
-
-// --------------------------------
-
-// Font Size
-
-// --------------------------------
-
-.text-unit-rem, .text-unit-em, .text-unit-px {
- font-size: var(--text-unit);
-}
-
-.text-unit-rem { --text-unit: 1rem; }
-.text-unit-em { --text-unit: 1em; }
-.text-unit-px { --text-unit: 16px; }
-
-.text-xs { font-size: var(--text-xs, 0.6875rem); }
-.text-sm { font-size: var(--text-sm, 0.75rem); }
-.text-base { font-size: var(--text-unit, 1rem); }
-.text-md { font-size: var(--text-md, 1.125rem); }
-.text-lg { font-size: var(--text-lg, 1.375rem); }
-.text-xl { font-size: var(--text-xl, 1.75rem); }
-.text-xxl { font-size: var(--text-xxl, 2rem); }
-.text-xxxl { font-size: var(--text-xxxl, 2.5rem); }
-.text-xxxxl { font-size: var(--text-xxxxl, 3rem); }
-
-// --------------------------------
-
-// Text Transform
-
-// --------------------------------
-
-.text-uppercase { text-transform: uppercase; }
-.text-capitalize { text-transform: capitalize; }
-
-// --------------------------------
-
-// Letter Spacing
-
-// --------------------------------
-
-.letter-spacing-xs { letter-spacing: -0.1em; }
-.letter-spacing-sm { letter-spacing: -0.05em; }
-.letter-spacing-md { letter-spacing: 0.05em; }
-.letter-spacing-lg { letter-spacing: 0.1em; }
-.letter-spacing-xl { letter-spacing: 0.2em; }
-
-// --------------------------------
-
-// Font Weight
-
-// --------------------------------
-
-.font-light { font-weight: 300; }
-.font-normal { font-weight: 400; }
-.font-medium { font-weight: 500; }
-.font-semibold { font-weight: 600; }
-.font-bold, .text-bold { font-weight: 700; }
-
-// --------------------------------
-
-// Font Style
-
-// --------------------------------
-
-.font-italic { font-style: italic; }
-
-// --------------------------------
-
-// Font Smooth
-
-// --------------------------------
-
-.font-smooth {
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-// --------------------------------
-
-// Font Family
-
-// --------------------------------
-
-.font-primary { font-family: var(--font-primary); }
-
-// --------------------------------
-
-// Text Align
-
-// --------------------------------
-
-.text-center { text-align: center; }
-.text-left { text-align: left; }
-.text-right { text-align: right; }
-.text-justify { text-align: justify; }
-
-// --------------------------------
-
-// Text Decoration
-
-// --------------------------------
-
-.text-line-through { text-decoration: line-through; }
-.text-underline { text-decoration: underline; }
-.text-decoration-none { text-decoration: none; }
-
-// --------------------------------
-
-// Text Shadow
-
-// --------------------------------
-
-.text-shadow-xs { text-shadow: 0 1px 1px rgba(#000, 0.15); }
-.text-shadow-sm { text-shadow: 0 1px 2px rgba(#000, 0.25); }
-.text-shadow-md { text-shadow: 0 1px 2px rgba(#000, 0.1), 0 2px 4px rgba(#000, 0.2); }
-.text-shadow-lg { text-shadow: 0 1px 4px rgba(#000, 0.1), 0 2px 8px rgba(#000, 0.15), 0 4px 16px rgba(#000, 0.2); }
-.text-shadow-xl { text-shadow: 0 1px 4px rgba(#000, 0.1), 0 2px 8px rgba(#000, 0.15), 0 4px 16px rgba(#000, 0.2), 0 6px 24px rgba(#000, 0.25); }
-.text-shadow-none { text-shadow: none; }
-
-// --------------------------------
-
-// .text-component vertical spacing
-
-// --------------------------------
-
-.text-space-y-xxs { --text-space-y-multiplier: 0.25 !important; }
-.text-space-y-xs { --text-space-y-multiplier: 0.5 !important; }
-.text-space-y-sm { --text-space-y-multiplier: 0.75 !important; }
-.text-space-y-md { --text-space-y-multiplier: 1.25 !important; }
-.text-space-y-lg { --text-space-y-multiplier: 1.5 !important; }
-.text-space-y-xl { --text-space-y-multiplier: 1.75 !important; }
-.text-space-y-xxl { --text-space-y-multiplier: 2 !important; }
-
-// --------------------------------
-
-// Line Height
-
-// --------------------------------
-
-.line-height-xs {
- --heading-line-height: 1;
- --body-line-height: 1.1;
-
- &:not(.text-component) {
- line-height: 1.1;
- }
-}
-
-.line-height-sm {
- --heading-line-height: 1.1;
- --body-line-height: 1.2;
-
- &:not(.text-component) {
- line-height: 1.2;
- }
-}
-
-.line-height-md {
- --heading-line-height: 1.15;
- --body-line-height: 1.4;
-
- &:not(.text-component) {
- line-height: 1.4;
- }
-}
-
-.line-height-lg {
- --heading-line-height: 1.22;
- --body-line-height: 1.58;
-
- &:not(.text-component) {
- line-height: 1.58;
- }
-}
-
-.line-height-xl {
- --heading-line-height: 1.3;
- --body-line-height: 1.72;
-
- &:not(.text-component) {
- line-height: 1.72;
- }
-}
-
-.line-height-body { line-height: var(--body-line-height); }
-.line-height-heading { line-height: var(--heading-line-height); }
-.line-height-normal { line-height: normal !important; }
-.line-height-1 { line-height: 1 !important; }
-
-// --------------------------------
-
-// White Space
-
-// --------------------------------
-
-.ws-nowrap, .text-nowrap { white-space: nowrap; }
-
-// --------------------------------
-
-// Cursor
-
-// --------------------------------
-
-.cursor-pointer { cursor: pointer; }
-.cursor-default { cursor: default; }
-
-// --------------------------------
-
-// Pointer Events
-
-// --------------------------------
-
-.pointer-events-auto { pointer-events: auto; }
-.pointer-events-none { pointer-events: none; }
-
-// --------------------------------
-
-// User Select
-
-// --------------------------------
-
-.user-select-none { user-select: none; }
-.user-select-all { user-select: all; }
-
-// --------------------------------
-
-// Color
-
-// --------------------------------
-
-[class^="color-"], [class*=" color-"] { --color-o: 1; }
-
-.color-inherit { color: inherit; }
-
-.color-bg-darker { color: alpha(var(--color-bg-darker), var(--color-o, 1)); }
-.color-bg-dark { color: alpha(var(--color-bg-dark), var(--color-o, 1)); }
-.color-bg { color: alpha(var(--color-bg), var(--color-o, 1)); }
-.color-bg-light { color: alpha(var(--color-bg-light), var(--color-o, 1)); }
-.color-bg-lighter { color: alpha(var(--color-bg-lighter), var(--color-o, 1)); }
-
-.color-contrast-lower { color: alpha(var(--color-contrast-lower), var(--color-o, 1)); }
-.color-contrast-low { color: alpha(var(--color-contrast-low), var(--color-o, 1)); }
-.color-contrast-medium { color: alpha(var(--color-contrast-medium), var(--color-o, 1)); }
-.color-contrast-high { color: alpha(var(--color-contrast-high), var(--color-o, 1)); }
-.color-contrast-higher { color: alpha(var(--color-contrast-higher), var(--color-o, 1)); }
-
-.color-primary-darker { color: alpha(var(--color-primary-darker), var(--color-o, 1)); }
-.color-primary-dark { color: alpha(var(--color-primary-dark), var(--color-o, 1)); }
-.color-primary { color: alpha(var(--color-primary), var(--color-o, 1)); }
-.color-primary-light { color: alpha(var(--color-primary-light), var(--color-o, 1)); }
-.color-primary-lighter { color: alpha(var(--color-primary-lighter), var(--color-o, 1)); }
-
-.color-accent-darker { color: alpha(var(--color-accent-darker), var(--color-o, 1)); }
-.color-accent-dark { color: alpha(var(--color-accent-dark), var(--color-o, 1)); }
-.color-accent { color: alpha(var(--color-accent), var(--color-o, 1)); }
-.color-accent-light { color: alpha(var(--color-accent-light), var(--color-o, 1)); }
-.color-accent-lighter { color: alpha(var(--color-accent-lighter), var(--color-o, 1)); }
-
-.color-success-darker { color: alpha(var(--color-success-darker), var(--color-o, 1)); }
-.color-success-dark { color: alpha(var(--color-success-dark), var(--color-o, 1)); }
-.color-success { color: alpha(var(--color-success), var(--color-o, 1)); }
-.color-success-light { color: alpha(var(--color-success-light), var(--color-o, 1)); }
-.color-success-lighter { color: alpha(var(--color-success-lighter), var(--color-o, 1)); }
-
-.color-warning-darker { color: alpha(var(--color-warning-darker), var(--color-o, 1)); }
-.color-warning-dark { color: alpha(var(--color-warning-dark), var(--color-o, 1)); }
-.color-warning { color: alpha(var(--color-warning), var(--color-o, 1)); }
-.color-warning-light { color: alpha(var(--color-warning-light), var(--color-o, 1)); }
-.color-warning-lighter { color: alpha(var(--color-warning-lighter), var(--color-o, 1)); }
-
-.color-error-darker { color: alpha(var(--color-error-darker), var(--color-o, 1)); }
-.color-error-dark { color: alpha(var(--color-error-dark), var(--color-o, 1)); }
-.color-error { color: alpha(var(--color-error), var(--color-o, 1)); }
-.color-error-light { color: alpha(var(--color-error-light), var(--color-o, 1)); }
-.color-error-lighter { color: alpha(var(--color-error-lighter), var(--color-o, 1)); }
-
-.color-white { color: alpha(var(--color-white), var(--color-o, 1)); }
-.color-black { color: alpha(var(--color-black), var(--color-o, 1)); }
-
-.color-opacity-0 { --color-o: 0; }
-.color-opacity-10\% { --color-o: 0.1; }
-.color-opacity-20\% { --color-o: 0.2; }
-.color-opacity-30\% { --color-o: 0.3; }
-.color-opacity-40\% { --color-o: 0.4; }
-.color-opacity-50\% { --color-o: 0.5; }
-.color-opacity-60\% { --color-o: 0.6; }
-.color-opacity-70\% { --color-o: 0.7; }
-.color-opacity-80\% { --color-o: 0.8; }
-.color-opacity-90\% { --color-o: 0.9; }
-
-// --------------------------------
-
-// Gradients
-
-// --------------------------------
-
-[class^="color-gradient"], [class*=" color-gradient"] {
- color: transparent !important;
- background-clip: text;
-}
-
-// --------------------------------
-
-// Width
-
-// --------------------------------
-
-.width-xxxxs { width: var(--size-xxxxs, 0.25rem); }
-.width-xxxs { width: var(--size-xxxs, 0.5rem); }
-.width-xxs { width: var(--size-xxs, 0.75rem); }
-.width-xs { width: var(--size-xs, 1rem); }
-.width-sm { width: var(--size-sm, 1.5rem); }
-.width-md { width: var(--size-md, 2rem); }
-.width-lg { width: var(--size-lg, 3rem); }
-.width-xl { width: var(--size-xl, 4rem); }
-.width-xxl { width: var(--size-xxl, 6rem); }
-.width-xxxl { width: var(--size-xxxl, 8rem); }
-.width-xxxxl { width: var(--size-xxxxl, 16rem); }
-.width-0 { width: 0; }
-.width-10\% { width: 10%; }
-.width-20\% { width: 20%; }
-.width-25\% { width: 25%; }
-.width-30\% { width: 30%; }
-.width-33\% { width: calc(100% / 3); }
-.width-40\% { width: 40%; }
-.width-50\% { width: 50%; }
-.width-60\% { width: 60%; }
-.width-66\% { width: calc(100% / 1.5); }
-.width-70\% { width: 70%; }
-.width-75\% { width: 75%; }
-.width-80\% { width: 80%; }
-.width-90\% { width: 90%; }
-.width-100\% { width: 100%; }
-.width-100vw { width: 100vw; }
-.width-auto { width: auto; }
-.width-fit-content { width: fit-content; }
-.width-max-content { width: max-content; }
-
-// --------------------------------
-
-// Height
-
-// --------------------------------
-
-.height-xxxxs { height: var(--size-xxxxs, 0.25rem); }
-.height-xxxs { height: var(--size-xxxs, 0.5rem); }
-.height-xxs { height: var(--size-xxs, 0.75rem); }
-.height-xs { height: var(--size-xs, 1rem); }
-.height-sm { height: var(--size-sm, 1.5rem); }
-.height-md { height: var(--size-md, 2rem); }
-.height-lg { height: var(--size-lg, 3rem); }
-.height-xl { height: var(--size-xl, 4rem); }
-.height-xxl { height: var(--size-xxl, 6rem); }
-.height-xxxl { height: var(--size-xxxl, 8rem); }
-.height-xxxxl { height: var(--size-xxxxl, 16rem); }
-.height-0 { height: 0; }
-.height-10\% { height: 10%; }
-.height-20\% { height: 20%; }
-.height-25\% { height: 25%; }
-.height-30\% { height: 30%; }
-.height-33\% { height: calc(100% / 3); }
-.height-40\% { height: 40%; }
-.height-50\% { height: 50%; }
-.height-60\% { height: 60%; }
-.height-66\% { height: calc(100% / 1.5); }
-.height-70\% { height: 70%; }
-.height-75\% { height: 75%; }
-.height-80\% { height: 80%; }
-.height-90\% { height: 90%; }
-.height-100\% { height: 100%; }
-.height-100vh { height: 100vh; }
-.height-auto { height: auto; }
-.height-fit-content { height: fit-content; }
-.height-max-content { height: max-content; }
-
-// --------------------------------
-
-// Min-Width
-
-// --------------------------------
-
-.min-width-0 { min-width: 0; }
-.min-width-25\% { min-width: 25%; }
-.min-width-33\% { min-width: calc(100% / 3); }
-.min-width-50\% { min-width: 50%; }
-.min-width-66\% { min-width: calc(100% / 1.5); }
-.min-width-75\% { min-width: 75%; }
-.min-width-100\% { min-width: 100%; }
-.min-width-100vw { min-width: 100vw; }
-.min-width-fit-content { min-width: fit-content; }
-.min-width-max-content { min-width: max-content; }
-
-// --------------------------------
-
-// Min-Height
-
-// --------------------------------
-
-.min-height-100\% { min-height: 100%; }
-.min-height-100vh { min-height: 100vh; }
-.min-height-fit-content { min-height: fit-content; }
-.min-height-max-content { min-height: max-content; }
-
-// --------------------------------
-
-// Max-Width
-
-// --------------------------------
-
-:root {
- --max-width-xxxxs: 20rem; // ~320px
- --max-width-xxxs: 26rem; // ~416px
- --max-width-xxs: 32rem; // ~512px
- --max-width-xs: 38rem; // ~608px
- --max-width-sm: 48rem; // ~768px
- --max-width-md: 64rem; // ~1024px
- --max-width-lg: 80rem; // ~1280px
- --max-width-xl: 90rem; // ~1440px
- --max-width-xxl: 100rem; // ~1600px
- --max-width-xxxl: 120rem; // ~1920px
- --max-width-xxxxl: 150rem; // ~2400px
-}
-
-.max-width-xxxxs { max-width: var(--max-width-xxxxs); }
-.max-width-xxxs { max-width: var(--max-width-xxxs); }
-.max-width-xxs { max-width: var(--max-width-xxs); }
-.max-width-xs { max-width: var(--max-width-xs); }
-.max-width-sm { max-width: var(--max-width-sm); }
-.max-width-md { max-width: var(--max-width-md); }
-.max-width-lg { max-width: var(--max-width-lg); }
-.max-width-xl { max-width: var(--max-width-xl); }
-.max-width-xxl { max-width: var(--max-width-xxl); }
-.max-width-xxxl { max-width: var(--max-width-xxxl); }
-.max-width-xxxxl { max-width: var(--max-width-xxxxl); }
-.max-width-100\% { max-width: 100%; }
-.max-width-none { max-width: none; }
-.max-width-fit-content { max-width: fit-content; }
-.max-width-max-content { max-width: max-content; }
-
-// alt approach - max-width is equal to current breakpoint
-$breakpointsNr: length($breakpoints);
-@each $breakpoint, $value in $breakpoints {
- $i: index($breakpoints, $breakpoint $value);
- @if $i == 1 {
- [class^="max-width-adaptive"], [class*=" max-width-adaptive"] {
- max-width: map-get($map: $breakpoints, $key: #{$breakpoint});
- }
- } @else {
- $classList : '';
- @each $subBreakpoint, $subValue in $breakpoints {
- $j: index($breakpoints, $subBreakpoint $subValue);
- @if $j == $i {
- $classList: '.max-width-adaptive-#{$subBreakpoint}';
- } @else if $j > $i {
- $classList: $classList+', .max-width-adaptive-#{$subBreakpoint}';
- }
- }
- @if $i < $breakpointsNr {
- $classList: $classList+', .max-width-adaptive';
- }
- @include breakpoint(#{$breakpoint}) {
- #{$classList} {
- max-width: map-get($map: $breakpoints, $key: #{$breakpoint});
- }
- }
- }
-}
-
-// --------------------------------
-
-// Max-Height
-
-// --------------------------------
-
-.max-height-100\% { max-height: 100%; }
-.max-height-100vh { max-height: 100vh; }
-
-// --------------------------------
-
-// Box-Shadow
-
-// --------------------------------
-
-.shadow-xs { box-shadow: var(--shadow-xs); }
-.shadow-sm { box-shadow: var(--shadow-sm); }
-.shadow-md { box-shadow: var(--shadow-md); }
-.shadow-lg { box-shadow: var(--shadow-lg); }
-.shadow-xl { box-shadow: var(--shadow-xl); }
-.shadow-none { box-shadow: none; }
-
-:root {
- --inner-glow: inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075);
- --inner-glow-top: inset 0 1px 0.5px hsla(0, 0%, 100%, 0.075);
-}
-
-.inner-glow, .inner-glow-top {
- position: relative;
-
- &::after {
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- border-radius: inherit;
- pointer-events: none;
- }
-}
-
-.inner-glow::after { box-shadow: var(--inner-glow); }
-.inner-glow-top::after { box-shadow: var(--inner-glow-top); }
-
-// --------------------------------
-
-// Position
-
-// --------------------------------
-
-.position-relative { position: relative; }
-.position-absolute { position: absolute; }
-.position-fixed { position: fixed; }
-.position-sticky { position: sticky; }
-
-.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
-
-.top-0 { top: 0; }
-.top-50\% { top: 50%; }
-.top-xxxxs { top: var(--space-xxxxs); }
-.top-xxxs { top: var(--space-xxxs); }
-.top-xxs { top: var(--space-xxs); }
-.top-xs { top: var(--space-xs); }
-.top-sm { top: var(--space-sm); }
-.top-md { top: var(--space-md); }
-.top-lg { top: var(--space-lg); }
-.top-xl { top: var(--space-xl); }
-.top-xxl { top: var(--space-xxl); }
-.top-xxxl { top: var(--space-xxxl); }
-.top-xxxxl { top: var(--space-xxxxl); }
-
-.bottom-0 { bottom: 0; }
-.bottom-unset { bottom: unset; }
-.bottom-50\% { bottom: 50%; }
-.bottom-xxxxs { bottom: var(--space-xxxxs); }
-.bottom-xxxs { bottom: var(--space-xxxs); }
-.bottom-xxs { bottom: var(--space-xxs); }
-.bottom-xs { bottom: var(--space-xs); }
-.bottom-sm { bottom: var(--space-sm); }
-.bottom-md { bottom: var(--space-md); }
-.bottom-lg { bottom: var(--space-lg); }
-.bottom-xl { bottom: var(--space-xl); }
-.bottom-xxl { bottom: var(--space-xxl); }
-.bottom-xxxl { bottom: var(--space-xxxl); }
-.bottom-xxxxl { bottom: var(--space-xxxxl); }
-
-.right-0 { right: 0; }
-.right-50\% { right: 50%; }
-.right-xxxxs { right: var(--space-xxxxs); }
-.right-xxxs { right: var(--space-xxxs); }
-.right-xxs { right: var(--space-xxs); }
-.right-xs { right: var(--space-xs); }
-.right-sm { right: var(--space-sm); }
-.right-md { right: var(--space-md); }
-.right-lg { right: var(--space-lg); }
-.right-xl { right: var(--space-xl); }
-.right-xxl { right: var(--space-xxl); }
-.right-xxxl { right: var(--space-xxxl); }
-.right-xxxxl { right: var(--space-xxxxl); }
-
-.left-0 { left: 0; }
-.left-50\% { left: 50%; }
-.left-xxxxs { left: var(--space-xxxxs); }
-.left-xxxs { left: var(--space-xxxs); }
-.left-xxs { left: var(--space-xxs); }
-.left-xs { left: var(--space-xs); }
-.left-sm { left: var(--space-sm); }
-.left-md { left: var(--space-md); }
-.left-lg { left: var(--space-lg); }
-.left-xl { left: var(--space-xl); }
-.left-xxl { left: var(--space-xxl); }
-.left-xxxl { left: var(--space-xxxl); }
-.left-xxxxl { left: var(--space-xxxxl); }
-
-// --------------------------------
-
-// Z-Index
-
-// --------------------------------
-
-.z-index-header { z-index: var(--z-index-header); }
-.z-index-popover { z-index: var(--z-index-popover); }
-.z-index-fixed-element { z-index: var(--z-index-fixed-element); }
-.z-index-overlay { z-index: var(--z-index-overlay); }
-
-.z-index-1 { z-index: 1; }
-.z-index-2 { z-index: 2; }
-.z-index-3 { z-index: 3; }
-
-// --------------------------------
-
-// Overflow
-
-// --------------------------------
-
-.overflow-hidden { overflow: hidden; }
-.overflow-auto { overflow: auto; }
-.momentum-scrolling { -webkit-overflow-scrolling: touch; }
-
-// overscroll-behavior
-.overscroll-contain { overscroll-behavior: contain; }
-
-// --------------------------------
-
-// Scroll Behavior
-
-// --------------------------------
-
-.scroll-smooth { scroll-behavior: smooth; }
-
-.scroll-padding-xxxxs { scroll-padding: var(--space-xxxxs); }
-.scroll-padding-xxxs { scroll-padding: var(--space-xxxs); }
-.scroll-padding-xxs { scroll-padding: var(--space-xxs); }
-.scroll-padding-xs { scroll-padding: var(--space-xs); }
-.scroll-padding-sm { scroll-padding: var(--space-sm); }
-.scroll-padding-md { scroll-padding: var(--space-md); }
-.scroll-padding-lg { scroll-padding: var(--space-lg); }
-.scroll-padding-xl { scroll-padding: var(--space-xl); }
-.scroll-padding-xxl { scroll-padding: var(--space-xxl); }
-.scroll-padding-xxxl { scroll-padding: var(--space-xxxl); }
-.scroll-padding-xxxxl { scroll-padding: var(--space-xxxxl); }
-
-
-// --------------------------------
-
-// Opacity
-
-// --------------------------------
-
-.opacity-0 { opacity: 0; }
-.opacity-10\% { opacity: 0.1; }
-.opacity-20\% { opacity: 0.2; }
-.opacity-30\% { opacity: 0.3; }
-.opacity-40\% { opacity: 0.4; }
-.opacity-50\% { opacity: 0.5; }
-.opacity-60\% { opacity: 0.6; }
-.opacity-70\% { opacity: 0.7; }
-.opacity-80\% { opacity: 0.8; }
-.opacity-90\% { opacity: 0.9; }
-
-// --------------------------------
-
-// Float
-
-// --------------------------------
-
-.float-left { float: left; }
-.float-right { float: right; }
-
-.clearfix::after {
- content: "";
- display: table;
- clear: both;
-}
-
-// --------------------------------
-
-// Border
-
-// --------------------------------
-
-[class^="border-"], [class*=" border-"] {
- --border-o: 1;
-}
-
-.border { border: var(--border-width, 1px) var(--border-style, solid) alpha(var(--color-contrast-lower), var(--border-o, 1)); }
-.border-top { border-top: var(--border-width, 1px) var(--border-style, solid) alpha(var(--color-contrast-lower), var(--border-o, 1)); }
-.border-bottom { border-bottom: var(--border-width, 1px) var(--border-style, solid) alpha(var(--color-contrast-lower), var(--border-o, 1)); }
-.border-left { border-left: var(--border-width, 1px) var(--border-style, solid) alpha(var(--color-contrast-lower), var(--border-o, 1)); }
-.border-right { border-right: var(--border-width, 1px) var(--border-style, solid) alpha(var(--color-contrast-lower), var(--border-o, 1)); }
-
-.border-2 { --border-width: 2px; }
-.border-3 { --border-width: 3px; }
-.border-4 { --border-width: 4px; }
-.border-dotted { --border-style: dotted; }
-.border-dashed { --border-style: dashed; }
-
-.border-bg-darker { border-color: alpha(var(--color-bg-darker), var(--border-o, 1)); }
-.border-bg-dark { border-color: alpha(var(--color-bg-dark), var(--border-o, 1)); }
-.border-bg { border-color: alpha(var(--color-bg), var(--border-o, 1)); }
-.border-bg-light { border-color: alpha(var(--color-bg-light), var(--border-o, 1)); }
-.border-bg-lighter { border-color: alpha(var(--color-bg-lighter), var(--border-o, 1)); }
-
-.border-contrast-lower { border-color: alpha(var(--color-contrast-lower), var(--border-o, 1)); }
-.border-contrast-low { border-color: alpha(var(--color-contrast-low), var(--border-o, 1)); }
-.border-contrast-medium { border-color: alpha(var(--color-contrast-medium), var(--border-o, 1)); }
-.border-contrast-high { border-color: alpha(var(--color-contrast-high), var(--border-o, 1)); }
-.border-contrast-higher { border-color: alpha(var(--color-contrast-higher), var(--border-o, 1)); }
-
-.border-primary-darker { border-color: alpha(var(--color-primary-darker), var(--border-o, 1)); }
-.border-primary-dark { border-color: alpha(var(--color-primary-dark), var(--border-o, 1)); }
-.border-primary { border-color: alpha(var(--color-primary), var(--border-o, 1)); }
-.border-primary-light { border-color: alpha(var(--color-primary-light), var(--border-o, 1)); }
-.border-primary-lighter { border-color: alpha(var(--color-primary-lighter), var(--border-o, 1)); }
-
-.border-accent-darker { border-color: alpha(var(--color-accent-darker), var(--border-o, 1)); }
-.border-accent-dark { border-color: alpha(var(--color-accent-dark), var(--border-o, 1)); }
-.border-accent { border-color: alpha(var(--color-accent), var(--border-o, 1)); }
-.border-accent-light { border-color: alpha(var(--color-accent-light), var(--border-o, 1)); }
-.border-accent-lighter { border-color: alpha(var(--color-accent-lighter), var(--border-o, 1)); }
-
-.border-success-darker { border-color: alpha(var(--color-success-darker), var(--border-o, 1)); }
-.border-success-dark { border-color: alpha(var(--color-success-dark), var(--border-o, 1)); }
-.border-success { border-color: alpha(var(--color-success), var(--border-o, 1)); }
-.border-success-light { border-color: alpha(var(--color-success-light), var(--border-o, 1)); }
-.border-success-lighter { border-color: alpha(var(--color-success-lighter), var(--border-o, 1)); }
-
-.border-warning-darker { border-color: alpha(var(--color-warning-darker), var(--border-o, 1)); }
-.border-warning-dark { border-color: alpha(var(--color-warning-dark), var(--border-o, 1)); }
-.border-warning { border-color: alpha(var(--color-warning), var(--border-o, 1)); }
-.border-warning-light { border-color: alpha(var(--color-warning-light), var(--border-o, 1)); }
-.border-warning-lighter { border-color: alpha(var(--color-warning-lighter), var(--border-o, 1)); }
-
-.border-error-darker { border-color: alpha(var(--color-error-darker), var(--border-o, 1)); }
-.border-error-dark { border-color: alpha(var(--color-error-dark), var(--border-o, 1)); }
-.border-error { border-color: alpha(var(--color-error), var(--border-o, 1)); }
-.border-error-light { border-color: alpha(var(--color-error-light), var(--border-o, 1)); }
-.border-error-lighter { border-color: alpha(var(--color-error-lighter), var(--border-o, 1)); }
-
-.border-white { border-color: alpha(var(--color-white), var(--border-o, 1)); }
-.border-black { border-color: alpha(var(--color-black), var(--border-o, 1)); }
-
-.border-opacity-0 { --border-o: 0; }
-.border-opacity-10\% { --border-o: 0.1; }
-.border-opacity-20\% { --border-o: 0.2; }
-.border-opacity-30\% { --border-o: 0.3; }
-.border-opacity-40\% { --border-o: 0.4; }
-.border-opacity-50\% { --border-o: 0.5; }
-.border-opacity-60\% { --border-o: 0.6; }
-.border-opacity-70\% { --border-o: 0.7; }
-.border-opacity-80\% { --border-o: 0.8; }
-.border-opacity-90\% { --border-o: 0.9; }
-
-// --------------------------------
-
-// Border Radius
-
-// --------------------------------
-
-.radius-sm { border-radius: var(--radius-sm); }
-.radius-md { border-radius: var(--radius-md); }
-.radius-lg { border-radius: var(--radius-lg); }
-.radius-50\% { border-radius: 50%; }
-.radius-full { border-radius: 50em; }
-.radius-0 { border-radius: 0; }
-.radius-inherit { border-radius: inherit; }
-.radius-top-left-0 { border-top-left-radius: 0; }
-.radius-top-right-0 { border-top-right-radius: 0; }
-.radius-bottom-right-0 { border-bottom-right-radius: 0; }
-.radius-bottom-left-0 { border-bottom-left-radius: 0; }
-
-// --------------------------------
-
-// Background
-
-// --------------------------------
-
-.bg, [class^="bg-"], [class*=" bg-"] { --bg-o: 1; }
-
-.bg-transparent { background-color: transparent; }
-.bg-inherit { background-color: inherit; }
-
-.bg-darker { background-color: alpha(var(--color-bg-darker), var(--bg-o)); }
-.bg-dark { background-color: alpha(var(--color-bg-dark), var(--bg-o)); }
-.bg { background-color: alpha(var(--color-bg), var(--bg-o)); }
-.bg-light { background-color: alpha(var(--color-bg-light), var(--bg-o)); }
-.bg-lighter { background-color: alpha(var(--color-bg-lighter), var(--bg-o)); }
-
-.bg-contrast-lower { background-color: alpha(var(--color-contrast-lower), var(--bg-o, 1)); }
-.bg-contrast-low { background-color: alpha(var(--color-contrast-low), var(--bg-o, 1)); }
-.bg-contrast-medium { background-color: alpha(var(--color-contrast-medium), var(--bg-o, 1)); }
-.bg-contrast-high { background-color: alpha(var(--color-contrast-high), var(--bg-o, 1)); }
-.bg-contrast-higher { background-color: alpha(var(--color-contrast-higher), var(--bg-o, 1)); }
-
-.bg-primary-darker { background-color: alpha(var(--color-primary-darker), var(--bg-o, 1)); }
-.bg-primary-dark { background-color: alpha(var(--color-primary-dark), var(--bg-o, 1)); }
-.bg-primary { background-color: alpha(var(--color-primary), var(--bg-o, 1)); }
-.bg-primary-light { background-color: alpha(var(--color-primary-light), var(--bg-o, 1)); }
-.bg-primary-lighter { background-color: alpha(var(--color-primary-lighter), var(--bg-o, 1)); }
-
-.bg-accent-darker { background-color: alpha(var(--color-accent-darker), var(--bg-o, 1)); }
-.bg-accent-dark { background-color: alpha(var(--color-accent-dark), var(--bg-o, 1)); }
-.bg-accent { background-color: alpha(var(--color-accent), var(--bg-o, 1)); }
-.bg-accent-light { background-color: alpha(var(--color-accent-light), var(--bg-o, 1)); }
-.bg-accent-lighter { background-color: alpha(var(--color-accent-lighter), var(--bg-o, 1)); }
-
-.bg-success-darker { background-color: alpha(var(--color-success-darker), var(--bg-o, 1)); }
-.bg-success-dark { background-color: alpha(var(--color-success-dark), var(--bg-o, 1)); }
-.bg-success { background-color: alpha(var(--color-success), var(--bg-o, 1)); }
-.bg-success-light { background-color: alpha(var(--color-success-light), var(--bg-o, 1)); }
-.bg-success-lighter { background-color: alpha(var(--color-success-lighter), var(--bg-o, 1)); }
-
-.bg-warning-darker { background-color: alpha(var(--color-warning-darker), var(--bg-o, 1)); }
-.bg-warning-dark { background-color: alpha(var(--color-warning-dark), var(--bg-o, 1)); }
-.bg-warning { background-color: alpha(var(--color-warning), var(--bg-o, 1)); }
-.bg-warning-light { background-color: alpha(var(--color-warning-light), var(--bg-o, 1)); }
-.bg-warning-lighter { background-color: alpha(var(--color-warning-lighter), var(--bg-o, 1)); }
-
-.bg-error-darker { background-color: alpha(var(--color-error-darker), var(--bg-o, 1)); }
-.bg-error-dark { background-color: alpha(var(--color-error-dark), var(--bg-o, 1)); }
-.bg-error { background-color: alpha(var(--color-error), var(--bg-o, 1)); }
-.bg-error-light { background-color: alpha(var(--color-error-light), var(--bg-o, 1)); }
-.bg-error-lighter { background-color: alpha(var(--color-error-lighter), var(--bg-o, 1)); }
-
-.bg-white { background-color: alpha(var(--color-white), var(--bg-o, 1)); }
-.bg-black { background-color: alpha(var(--color-black), var(--bg-o, 1)); }
-
-.bg-opacity-0 { --bg-o: 0; }
-.bg-opacity-10\% { --bg-o: 0.1; }
-.bg-opacity-20\% { --bg-o: 0.2; }
-.bg-opacity-30\% { --bg-o: 0.3; }
-.bg-opacity-40\% { --bg-o: 0.4; }
-.bg-opacity-50\% { --bg-o: 0.5; }
-.bg-opacity-60\% { --bg-o: 0.6; }
-.bg-opacity-70\% { --bg-o: 0.7; }
-.bg-opacity-80\% { --bg-o: 0.8; }
-.bg-opacity-90\% { --bg-o: 0.9; }
-
-.bg-center { background-position: center; }
-.bg-top { background-position: center top; }
-.bg-right { background-position: right center; }
-.bg-bottom { background-position: center bottom; }
-.bg-left { background-position: left center; }
-.bg-top-left { background-position: left top; }
-.bg-top-right { background-position: right top; }
-.bg-bottom-left { background-position: left bottom; }
-.bg-bottom-right { background-position: right bottom; }
-
-.bg-cover { background-size: cover; }
-.bg-no-repeat { background-repeat: no-repeat; }
-
-// --------------------------------
-
-// Backdrop Filter
-
-// --------------------------------
-
-.backdrop-blur-10 { backdrop-filter: blur(10px); }
-.backdrop-blur-20 { backdrop-filter: blur(20px); }
-
-// --------------------------------
-
-// Mix-Blend Mode
-
-// --------------------------------
-
-.isolate { isolation: isolate; }
-.blend-multiply { mix-blend-mode: multiply; }
-.blend-overlay { mix-blend-mode: overlay; }
-.blend-difference { mix-blend-mode: difference; }
-
-// --------------------------------
-
-// Object-Fit
-
-// --------------------------------
-
-.object-contain { object-fit: contain; }
-.object-cover { object-fit: cover; }
-
-// --------------------------------
-
-// Perspective
-
-// --------------------------------
-
-.perspective-xs { perspective: 250px; }
-.perspective-sm { perspective: 500px; }
-.perspective-md { perspective: 1000px; }
-.perspective-lg { perspective: 1500px; }
-.perspective-xl { perspective: 3000px; }
-
-// --------------------------------
-
-// Transform
-
-// --------------------------------
-
-[class^="flip"], [class*=" flip"],
-[class^="-rotate"], [class*=" -rotate"],
-[class^="rotate"], [class*=" rotate"],
-[class^="-translate"], [class*=" -translate"],
-[class^="translate"], [class*=" translate"],
-[class^="-scale"], [class*=" -scale"],
-[class^="scale"], [class*=" scale"],
-[class^="-skew"], [class*=" -skew"],
-[class^="skew"], [class*=" skew"] {
- --translate: 0;
- --rotate: 0;
- --skew: 0;
- --scale: 1;
-
- transform: translate3d(var(--translate-x, var(--translate)), var(--translate-y, var(--translate)), var(--translate-z, 0)) rotateX(var(--rotate-x, 0)) rotateY(var(--rotate-y, 0)) rotateZ(var(--rotate-z, var(--rotate))) skewX(var(--skew-x, var(--skew))) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, var(--scale))) scaleY(var(--scale-y, var(--scale)));
-}
-
-.flip { --scale: -1; }
-.flip-x { --scale-x: -1; }
-.flip-y { --scale-y: -1; }
-
-.rotate-90 { --rotate: 90deg; }
-.rotate-180 { --rotate: 180deg; }
-.rotate-270 { --rotate: 270deg; }
-
-.-translate-50\% { --translate: -50%; }
-.-translate-x-50\% { --translate-x: -50%; }
-.-translate-y-50\% { --translate-y: -50%; }
-
-.translate-50\% { --translate: 50%; }
-.translate-x-50\% { --translate-x: 50%; }
-.translate-y-50\% { --translate-y: 50%; }
-
-// --------------------------------
-
-// Transform Origin
-
-// --------------------------------
-
-.origin-center { transform-origin: center; }
-.origin-top { transform-origin: center top; }
-.origin-right { transform-origin: right center; }
-.origin-bottom { transform-origin: center bottom; }
-.origin-left { transform-origin: left center; }
-.origin-top-left { transform-origin: left top; }
-.origin-top-right { transform-origin: right top; }
-.origin-bottom-left { transform-origin: left bottom; }
-.origin-bottom-right { transform-origin: right bottom; }
-
-// --------------------------------
-
-// SVG
-
-// --------------------------------
-
-.fill-current { fill: currentColor; }
-
-.stroke-current { stroke: currentColor; }
-
-.stroke-1 { stroke-width: 1px; }
-.stroke-2 { stroke-width: 2px; }
-.stroke-3 { stroke-width: 3px; }
-.stroke-4 { stroke-width: 4px; }
-
-// --------------------------------
-
-// Visibility
-
-// --------------------------------
-
-.visible { visibility: visible; }
-.invisible { visibility: hidden; }
-
-// --------------------------------
-
-// Responsive Variations
-
-// --------------------------------
-
-@each $breakpoint, $value in $breakpoints {
- @include breakpoint(#{$breakpoint}) {
- // flexbox
- .flex\@#{$breakpoint} { display: flex; }
- .inline-flex\@#{$breakpoint} { display: inline-flex; }
- .flex-wrap\@#{$breakpoint} { flex-wrap: wrap; }
- .flex-nowrap\@#{$breakpoint} { flex-wrap:nowrap; }
- .flex-column\@#{$breakpoint} { flex-direction: column; }
- .flex-column-reverse\@#{$breakpoint} { flex-direction: column-reverse; }
- .flex-row\@#{$breakpoint} { flex-direction: row; }
- .flex-row-reverse\@#{$breakpoint} { flex-direction: row-reverse; }
- .flex-center\@#{$breakpoint} { justify-content: center; align-items: center; }
-
- .flex-grow\@#{$breakpoint} { flex-grow: 1; }
- .flex-grow-0\@#{$breakpoint} { flex-grow: 0; }
- .flex-shrink\@#{$breakpoint} { flex-shrink: 1; }
- .flex-shrink-0\@#{$breakpoint} { flex-shrink: 0; }
- .flex-basis-0\@#{$breakpoint} { flex-basis: 0; }
-
- // justify-content
- .justify-start\@#{$breakpoint} { justify-content: flex-start; }
- .justify-end\@#{$breakpoint} { justify-content: flex-end; }
- .justify-center\@#{$breakpoint} { justify-content: center; }
- .justify-between\@#{$breakpoint} { justify-content: space-between; }
-
- // align-items
- .items-center\@#{$breakpoint} { align-items: center; }
- .items-start\@#{$breakpoint} { align-items: flex-start; }
- .items-end\@#{$breakpoint} { align-items: flex-end; }
- .items-baseline\@#{$breakpoint} { align-items: baseline; }
-
- // order
- .order-1\@#{$breakpoint} { order: 1; }
- .order-2\@#{$breakpoint} { order: 2; }
- .order-3\@#{$breakpoint} { order: 3; }
-
- // display
- .block\@#{$breakpoint} { display: block; }
- .inline-block\@#{$breakpoint} { display: inline-block; }
- .inline\@#{$breakpoint} { display: inline; }
- .contents\@#{$breakpoint} { display: contents; }
- .hide\@#{$breakpoint} { display: none !important; }
-
- // margin
- .margin-xxxxs\@#{$breakpoint} { margin: var(--space-xxxxs); }
- .margin-xxxs\@#{$breakpoint} { margin: var(--space-xxxs); }
- .margin-xxs\@#{$breakpoint} { margin: var(--space-xxs); }
- .margin-xs\@#{$breakpoint} { margin: var(--space-xs); }
- .margin-sm\@#{$breakpoint} { margin: var(--space-sm); }
- .margin-md\@#{$breakpoint} { margin: var(--space-md); }
- .margin-lg\@#{$breakpoint} { margin: var(--space-lg); }
- .margin-xl\@#{$breakpoint} { margin: var(--space-xl); }
- .margin-xxl\@#{$breakpoint} { margin: var(--space-xxl); }
- .margin-xxxl\@#{$breakpoint} { margin: var(--space-xxxl); }
- .margin-xxxxl\@#{$breakpoint} { margin: var(--space-xxxxl); }
- .margin-auto\@#{$breakpoint} { margin: auto; }
- .margin-0\@#{$breakpoint} { margin: 0; }
-
- .margin-top-xxxxs\@#{$breakpoint} { margin-top: var(--space-xxxxs); }
- .margin-top-xxxs\@#{$breakpoint} { margin-top: var(--space-xxxs); }
- .margin-top-xxs\@#{$breakpoint} { margin-top: var(--space-xxs); }
- .margin-top-xs\@#{$breakpoint} { margin-top: var(--space-xs); }
- .margin-top-sm\@#{$breakpoint} { margin-top: var(--space-sm); }
- .margin-top-md\@#{$breakpoint} { margin-top: var(--space-md); }
- .margin-top-lg\@#{$breakpoint} { margin-top: var(--space-lg); }
- .margin-top-xl\@#{$breakpoint} { margin-top: var(--space-xl); }
- .margin-top-xxl\@#{$breakpoint} { margin-top: var(--space-xxl); }
- .margin-top-xxxl\@#{$breakpoint} { margin-top: var(--space-xxxl); }
- .margin-top-xxxxl\@#{$breakpoint} { margin-top: var(--space-xxxxl); }
- .margin-top-auto\@#{$breakpoint} { margin-top: auto; }
- .margin-top-0\@#{$breakpoint} { margin-top: 0; }
-
- .margin-bottom-xxxxs\@#{$breakpoint} { margin-bottom: var(--space-xxxxs); }
- .margin-bottom-xxxs\@#{$breakpoint} { margin-bottom: var(--space-xxxs); }
- .margin-bottom-xxs\@#{$breakpoint} { margin-bottom: var(--space-xxs); }
- .margin-bottom-xs\@#{$breakpoint} { margin-bottom: var(--space-xs); }
- .margin-bottom-sm\@#{$breakpoint} { margin-bottom: var(--space-sm); }
- .margin-bottom-md\@#{$breakpoint} { margin-bottom: var(--space-md); }
- .margin-bottom-lg\@#{$breakpoint} { margin-bottom: var(--space-lg); }
- .margin-bottom-xl\@#{$breakpoint} { margin-bottom: var(--space-xl); }
- .margin-bottom-xxl\@#{$breakpoint} { margin-bottom: var(--space-xxl); }
- .margin-bottom-xxxl\@#{$breakpoint} { margin-bottom: var(--space-xxxl); }
- .margin-bottom-xxxxl\@#{$breakpoint} { margin-bottom: var(--space-xxxxl); }
- .margin-bottom-auto\@#{$breakpoint} { margin-bottom: auto; }
- .margin-bottom-0\@#{$breakpoint} { margin-bottom: 0; }
-
- .margin-right-xxxxs\@#{$breakpoint} { margin-right: var(--space-xxxxs); }
- .margin-right-xxxs\@#{$breakpoint} { margin-right: var(--space-xxxs); }
- .margin-right-xxs\@#{$breakpoint} { margin-right: var(--space-xxs); }
- .margin-right-xs\@#{$breakpoint} { margin-right: var(--space-xs); }
- .margin-right-sm\@#{$breakpoint} { margin-right: var(--space-sm); }
- .margin-right-md\@#{$breakpoint} { margin-right: var(--space-md); }
- .margin-right-lg\@#{$breakpoint} { margin-right: var(--space-lg); }
- .margin-right-xl\@#{$breakpoint} { margin-right: var(--space-xl); }
- .margin-right-xxl\@#{$breakpoint} { margin-right: var(--space-xxl); }
- .margin-right-xxxl\@#{$breakpoint} { margin-right: var(--space-xxxl); }
- .margin-right-xxxxl\@#{$breakpoint} { margin-right: var(--space-xxxxl); }
- .margin-right-auto\@#{$breakpoint} { margin-right: auto; }
- .margin-right-0\@#{$breakpoint} { margin-right: 0; }
-
- .margin-left-xxxxs\@#{$breakpoint} { margin-left: var(--space-xxxxs); }
- .margin-left-xxxs\@#{$breakpoint} { margin-left: var(--space-xxxs); }
- .margin-left-xxs\@#{$breakpoint} { margin-left: var(--space-xxs); }
- .margin-left-xs\@#{$breakpoint} { margin-left: var(--space-xs); }
- .margin-left-sm\@#{$breakpoint} { margin-left: var(--space-sm); }
- .margin-left-md\@#{$breakpoint} { margin-left: var(--space-md); }
- .margin-left-lg\@#{$breakpoint} { margin-left: var(--space-lg); }
- .margin-left-xl\@#{$breakpoint} { margin-left: var(--space-xl); }
- .margin-left-xxl\@#{$breakpoint} { margin-left: var(--space-xxl); }
- .margin-left-xxxl\@#{$breakpoint} { margin-left: var(--space-xxxl); }
- .margin-left-xxxxl\@#{$breakpoint} { margin-left: var(--space-xxxxl); }
- .margin-left-auto\@#{$breakpoint} { margin-left: auto; }
- .margin-left-0\@#{$breakpoint} { margin-left: 0; }
-
- .margin-x-xxxxs\@#{$breakpoint} { margin-left: var(--space-xxxxs); margin-right: var(--space-xxxxs); }
- .margin-x-xxxs\@#{$breakpoint} { margin-left: var(--space-xxxs); margin-right: var(--space-xxxs); }
- .margin-x-xxs\@#{$breakpoint} { margin-left: var(--space-xxs); margin-right: var(--space-xxs); }
- .margin-x-xs\@#{$breakpoint} { margin-left: var(--space-xs); margin-right: var(--space-xs); }
- .margin-x-sm\@#{$breakpoint} { margin-left: var(--space-sm); margin-right: var(--space-sm); }
- .margin-x-md\@#{$breakpoint} { margin-left: var(--space-md); margin-right: var(--space-md); }
- .margin-x-lg\@#{$breakpoint} { margin-left: var(--space-lg); margin-right: var(--space-lg); }
- .margin-x-xl\@#{$breakpoint} { margin-left: var(--space-xl); margin-right: var(--space-xl); }
- .margin-x-xxl\@#{$breakpoint} { margin-left: var(--space-xxl); margin-right: var(--space-xxl); }
- .margin-x-xxxl\@#{$breakpoint} { margin-left: var(--space-xxxl); margin-right: var(--space-xxxl); }
- .margin-x-xxxxl\@#{$breakpoint} { margin-left: var(--space-xxxxl); margin-right: var(--space-xxxxl); }
- .margin-x-auto\@#{$breakpoint} { margin-left: auto; margin-right: auto; }
- .margin-x-0\@#{$breakpoint} { margin-left: 0; margin-right: 0; }
-
- .margin-y-xxxxs\@#{$breakpoint} { margin-top: var(--space-xxxxs); margin-bottom: var(--space-xxxxs); }
- .margin-y-xxxs\@#{$breakpoint} { margin-top: var(--space-xxxs); margin-bottom: var(--space-xxxs); }
- .margin-y-xxs\@#{$breakpoint} { margin-top: var(--space-xxs); margin-bottom: var(--space-xxs); }
- .margin-y-xs\@#{$breakpoint} { margin-top: var(--space-xs); margin-bottom: var(--space-xs); }
- .margin-y-sm\@#{$breakpoint} { margin-top: var(--space-sm); margin-bottom: var(--space-sm); }
- .margin-y-md\@#{$breakpoint} { margin-top: var(--space-md); margin-bottom: var(--space-md); }
- .margin-y-lg\@#{$breakpoint} { margin-top: var(--space-lg); margin-bottom: var(--space-lg); }
- .margin-y-xl\@#{$breakpoint} { margin-top: var(--space-xl); margin-bottom: var(--space-xl); }
- .margin-y-xxl\@#{$breakpoint} { margin-top: var(--space-xxl); margin-bottom: var(--space-xxl); }
- .margin-y-xxxl\@#{$breakpoint} { margin-top: var(--space-xxxl); margin-bottom: var(--space-xxxl); }
- .margin-y-xxxxl\@#{$breakpoint} { margin-top: var(--space-xxxxl); margin-bottom: var(--space-xxxxl); }
- .margin-y-auto\@#{$breakpoint} { margin-top: auto; margin-bottom: auto; }
- .margin-y-0\@#{$breakpoint} { margin-top: 0; margin-bottom: 0; }
-
- // padding
- .padding-xxxxs\@#{$breakpoint} { padding: var(--space-xxxxs); }
- .padding-xxxs\@#{$breakpoint} { padding: var(--space-xxxs); }
- .padding-xxs\@#{$breakpoint} { padding: var(--space-xxs); }
- .padding-xs\@#{$breakpoint} { padding: var(--space-xs); }
- .padding-sm\@#{$breakpoint} { padding: var(--space-sm); }
- .padding-md\@#{$breakpoint} { padding: var(--space-md); }
- .padding-lg\@#{$breakpoint} { padding: var(--space-lg); }
- .padding-xl\@#{$breakpoint} { padding: var(--space-xl); }
- .padding-xxl\@#{$breakpoint} { padding: var(--space-xxl); }
- .padding-xxxl\@#{$breakpoint} { padding: var(--space-xxxl); }
- .padding-xxxxl\@#{$breakpoint} { padding: var(--space-xxxxl); }
- .padding-0\@#{$breakpoint} { padding: 0; }
- .padding-component\@#{$breakpoint} { padding: var(--component-padding); }
-
- .padding-top-xxxxs\@#{$breakpoint} { padding-top: var(--space-xxxxs); }
- .padding-top-xxxs\@#{$breakpoint} { padding-top: var(--space-xxxs); }
- .padding-top-xxs\@#{$breakpoint} { padding-top: var(--space-xxs); }
- .padding-top-xs\@#{$breakpoint} { padding-top: var(--space-xs); }
- .padding-top-sm\@#{$breakpoint} { padding-top: var(--space-sm); }
- .padding-top-md\@#{$breakpoint} { padding-top: var(--space-md); }
- .padding-top-lg\@#{$breakpoint} { padding-top: var(--space-lg); }
- .padding-top-xl\@#{$breakpoint} { padding-top: var(--space-xl); }
- .padding-top-xxl\@#{$breakpoint} { padding-top: var(--space-xxl); }
- .padding-top-xxxl\@#{$breakpoint} { padding-top: var(--space-xxxl); }
- .padding-top-xxxxl\@#{$breakpoint} { padding-top: var(--space-xxxxl); }
- .padding-top-0\@#{$breakpoint} { padding-top: 0; }
- .padding-top-component\@#{$breakpoint} { padding-top: var(--component-padding); }
-
- .padding-bottom-xxxxs\@#{$breakpoint} { padding-bottom: var(--space-xxxxs); }
- .padding-bottom-xxxs\@#{$breakpoint} { padding-bottom: var(--space-xxxs); }
- .padding-bottom-xxs\@#{$breakpoint} { padding-bottom: var(--space-xxs); }
- .padding-bottom-xs\@#{$breakpoint} { padding-bottom: var(--space-xs); }
- .padding-bottom-sm\@#{$breakpoint} { padding-bottom: var(--space-sm); }
- .padding-bottom-md\@#{$breakpoint} { padding-bottom: var(--space-md); }
- .padding-bottom-lg\@#{$breakpoint} { padding-bottom: var(--space-lg); }
- .padding-bottom-xl\@#{$breakpoint} { padding-bottom: var(--space-xl); }
- .padding-bottom-xxl\@#{$breakpoint} { padding-bottom: var(--space-xxl); }
- .padding-bottom-xxxl\@#{$breakpoint} { padding-bottom: var(--space-xxxl); }
- .padding-bottom-xxxxl\@#{$breakpoint} { padding-bottom: var(--space-xxxxl); }
- .padding-bottom-0\@#{$breakpoint} { padding-bottom: 0; }
- .padding-bottom-component\@#{$breakpoint} { padding-bottom: var(--component-padding); }
-
- .padding-right-xxxxs\@#{$breakpoint} { padding-right: var(--space-xxxxs); }
- .padding-right-xxxs\@#{$breakpoint} { padding-right: var(--space-xxxs); }
- .padding-right-xxs\@#{$breakpoint} { padding-right: var(--space-xxs); }
- .padding-right-xs\@#{$breakpoint} { padding-right: var(--space-xs); }
- .padding-right-sm\@#{$breakpoint} { padding-right: var(--space-sm); }
- .padding-right-md\@#{$breakpoint} { padding-right: var(--space-md); }
- .padding-right-lg\@#{$breakpoint} { padding-right: var(--space-lg); }
- .padding-right-xl\@#{$breakpoint} { padding-right: var(--space-xl); }
- .padding-right-xxl\@#{$breakpoint} { padding-right: var(--space-xxl); }
- .padding-right-xxxl\@#{$breakpoint} { padding-right: var(--space-xxxl); }
- .padding-right-xxxxl\@#{$breakpoint} { padding-right: var(--space-xxxxl); }
- .padding-right-0\@#{$breakpoint} { padding-right: 0; }
- .padding-right-component\@#{$breakpoint} { padding-right: var(--component-padding); }
-
- .padding-left-xxxxs\@#{$breakpoint} { padding-left: var(--space-xxxxs); }
- .padding-left-xxxs\@#{$breakpoint} { padding-left: var(--space-xxxs); }
- .padding-left-xxs\@#{$breakpoint} { padding-left: var(--space-xxs); }
- .padding-left-xs\@#{$breakpoint} { padding-left: var(--space-xs); }
- .padding-left-sm\@#{$breakpoint} { padding-left: var(--space-sm); }
- .padding-left-md\@#{$breakpoint} { padding-left: var(--space-md); }
- .padding-left-lg\@#{$breakpoint} { padding-left: var(--space-lg); }
- .padding-left-xl\@#{$breakpoint} { padding-left: var(--space-xl); }
- .padding-left-xxl\@#{$breakpoint} { padding-left: var(--space-xxl); }
- .padding-left-xxxl\@#{$breakpoint} { padding-left: var(--space-xxxl); }
- .padding-left-xxxxl\@#{$breakpoint} { padding-left: var(--space-xxxxl); }
- .padding-left-0\@#{$breakpoint} { padding-left: 0; }
- .padding-left-component\@#{$breakpoint} { padding-left: var(--component-padding); }
-
- .padding-x-xxxxs\@#{$breakpoint} { padding-left: var(--space-xxxxs); padding-right: var(--space-xxxxs); }
- .padding-x-xxxs\@#{$breakpoint} { padding-left: var(--space-xxxs); padding-right: var(--space-xxxs); }
- .padding-x-xxs\@#{$breakpoint} { padding-left: var(--space-xxs); padding-right: var(--space-xxs); }
- .padding-x-xs\@#{$breakpoint} { padding-left: var(--space-xs); padding-right: var(--space-xs); }
- .padding-x-sm\@#{$breakpoint} { padding-left: var(--space-sm); padding-right: var(--space-sm); }
- .padding-x-md\@#{$breakpoint} { padding-left: var(--space-md); padding-right: var(--space-md); }
- .padding-x-lg\@#{$breakpoint} { padding-left: var(--space-lg); padding-right: var(--space-lg); }
- .padding-x-xl\@#{$breakpoint} { padding-left: var(--space-xl); padding-right: var(--space-xl); }
- .padding-x-xxl\@#{$breakpoint} { padding-left: var(--space-xxl); padding-right: var(--space-xxl); }
- .padding-x-xxxl\@#{$breakpoint} { padding-left: var(--space-xxxl); padding-right: var(--space-xxxl); }
- .padding-x-xxxxl\@#{$breakpoint} { padding-left: var(--space-xxxxl); padding-right: var(--space-xxxxl); }
- .padding-x-0\@#{$breakpoint} { padding-left: 0; padding-right: 0; }
- .padding-x-component\@#{$breakpoint} { padding-left: var(--component-padding); padding-right: var(--component-padding); }
-
- .padding-y-xxxxs\@#{$breakpoint} { padding-top: var(--space-xxxxs); padding-bottom: var(--space-xxxxs); }
- .padding-y-xxxs\@#{$breakpoint} { padding-top: var(--space-xxxs); padding-bottom: var(--space-xxxs); }
- .padding-y-xxs\@#{$breakpoint} { padding-top: var(--space-xxs); padding-bottom: var(--space-xxs); }
- .padding-y-xs\@#{$breakpoint} { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
- .padding-y-sm\@#{$breakpoint} { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
- .padding-y-md\@#{$breakpoint} { padding-top: var(--space-md); padding-bottom: var(--space-md); }
- .padding-y-lg\@#{$breakpoint} { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
- .padding-y-xl\@#{$breakpoint} { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
- .padding-y-xxl\@#{$breakpoint} { padding-top: var(--space-xxl); padding-bottom: var(--space-xxl); }
- .padding-y-xxxl\@#{$breakpoint} { padding-top: var(--space-xxxl); padding-bottom: var(--space-xxxl); }
- .padding-y-xxxxl\@#{$breakpoint} { padding-top: var(--space-xxxxl); padding-bottom: var(--space-xxxxl); }
- .padding-y-0\@#{$breakpoint} { padding-top: 0; padding-bottom: 0; }
- .padding-y-component\@#{$breakpoint} { padding-top: var(--component-padding); padding-bottom: var(--component-padding); }
-
- // text-align
- .text-center\@#{$breakpoint} { text-align: center; }
- .text-left\@#{$breakpoint} { text-align: left; }
- .text-right\@#{$breakpoint} { text-align: right; }
- .text-justify\@#{$breakpoint} { text-align: justify; }
-
- // font-size
- .text-xs\@#{$breakpoint} { font-size: var(--text-xs, 0.6875rem); }
- .text-sm\@#{$breakpoint} { font-size: var(--text-sm, 0.75rem); }
- .text-base\@#{$breakpoint} { font-size: var(--text-unit, 1rem); }
- .text-md\@#{$breakpoint} { font-size: var(--text-md, 1.125rem); }
- .text-lg\@#{$breakpoint} { font-size: var(--text-lg, 1.375rem); }
- .text-xl\@#{$breakpoint} { font-size: var(--text-xl, 1.75rem); }
- .text-xxl\@#{$breakpoint} { font-size: var(--text-xxl, 2rem); }
- .text-xxxl\@#{$breakpoint} { font-size: var(--text-xxxl, 2.5rem); }
- .text-xxxxl\@#{$breakpoint} { font-size: var(--text-xxxxl, 3rem); }
-
- // width
- .width-xxxxs\@#{$breakpoint} { width: var(--size-xxxxs, 0.25rem); }
- .width-xxxs\@#{$breakpoint} { width: var(--size-xxxs, 0.5rem); }
- .width-xxs\@#{$breakpoint} { width: var(--size-xxs, 0.75rem); }
- .width-xs\@#{$breakpoint} { width: var(--size-xs, 1rem); }
- .width-sm\@#{$breakpoint} { width: var(--size-sm, 1.5rem); }
- .width-md\@#{$breakpoint} { width: var(--size-md, 2rem); }
- .width-lg\@#{$breakpoint} { width: var(--size-lg, 3rem); }
- .width-xl\@#{$breakpoint} { width: var(--size-xl, 4rem); }
- .width-xxl\@#{$breakpoint} { width: var(--size-xxl, 6rem); }
- .width-xxxl\@#{$breakpoint} { width: var(--size-xxxl, 8rem); }
- .width-xxxxl\@#{$breakpoint} { width: var(--size-xxxxl, 16rem); }
- .width-0\@#{$breakpoint} { width: 0; }
- .width-10\%\@#{$breakpoint} { width: 10%; }
- .width-20\%\@#{$breakpoint} { width: 20%; }
- .width-25\%\@#{$breakpoint} { width: 25%; }
- .width-30\%\@#{$breakpoint} { width: 30%; }
- .width-33\%\@#{$breakpoint} { width: calc(100% / 3); }
- .width-40\%\@#{$breakpoint} { width: 40%; }
- .width-50\%\@#{$breakpoint} { width: 50%; }
- .width-60\%\@#{$breakpoint} { width: 60%; }
- .width-66\%\@#{$breakpoint} { width: calc(100% / 1.5); }
- .width-70\%\@#{$breakpoint} { width: 70%; }
- .width-75\%\@#{$breakpoint} { width: 75%; }
- .width-80\%\@#{$breakpoint} { width: 80%; }
- .width-90\%\@#{$breakpoint} { width: 90%; }
- .width-100\%\@#{$breakpoint} { width: 100%; }
- .width-100vw\@#{$breakpoint} { width: 100vw; }
- .width-auto\@#{$breakpoint} { width: auto; }
-
- // height
- .height-xxxxs\@#{$breakpoint} { height: var(--size-xxxxs, 0.25rem); }
- .height-xxxs\@#{$breakpoint} { height: var(--size-xxxs, 0.5rem); }
- .height-xxs\@#{$breakpoint} { height: var(--size-xxs, 0.75rem); }
- .height-xs\@#{$breakpoint} { height: var(--size-xs, 1rem); }
- .height-sm\@#{$breakpoint} { height: var(--size-sm, 1.5rem); }
- .height-md\@#{$breakpoint} { height: var(--size-md, 2rem); }
- .height-lg\@#{$breakpoint} { height: var(--size-lg, 3rem); }
- .height-xl\@#{$breakpoint} { height: var(--size-xl, 4rem); }
- .height-xxl\@#{$breakpoint} { height: var(--size-xxl, 6rem); }
- .height-xxxl\@#{$breakpoint} { height: var(--size-xxxl, 8rem); }
- .height-xxxxl\@#{$breakpoint} { height: var(--size-xxxxl, 16rem); }
- .height-0\@#{$breakpoint} { height: 0; }
- .height-10\%\@#{$breakpoint} { height: 10%; }
- .height-20\%\@#{$breakpoint} { height: 20%; }
- .height-25\%\@#{$breakpoint} { height: 25%; }
- .height-30\%\@#{$breakpoint} { height: 30%; }
- .height-33\%\@#{$breakpoint} { height: calc(100% / 3); }
- .height-40\%\@#{$breakpoint} { height: 40%; }
- .height-50\%\@#{$breakpoint} { height: 50%; }
- .height-60\%\@#{$breakpoint} { height: 60%; }
- .height-66\%\@#{$breakpoint} { height: calc(100% / 1.5); }
- .height-70\%\@#{$breakpoint} { height: 70%; }
- .height-75\%\@#{$breakpoint} { height: 75%; }
- .height-80\%\@#{$breakpoint} { height: 80%; }
- .height-90\%\@#{$breakpoint} { height: 90%; }
- .height-100\%\@#{$breakpoint} { height: 100%; }
- .height-100vh\@#{$breakpoint} { height: 100vh; }
- .height-auto\@#{$breakpoint} { height: auto; }
-
- // max-width
- .max-width-xxxxs\@#{$breakpoint} { max-width: var(--max-width-xxxxs); }
- .max-width-xxxs\@#{$breakpoint} { max-width: var(--max-width-xxxs); }
- .max-width-xxs\@#{$breakpoint} { max-width: var(--max-width-xxs); }
- .max-width-xs\@#{$breakpoint} { max-width: var(--max-width-xs); }
- .max-width-sm\@#{$breakpoint} { max-width: var(--max-width-sm); }
- .max-width-md\@#{$breakpoint} { max-width: var(--max-width-md); }
- .max-width-lg\@#{$breakpoint} { max-width: var(--max-width-lg); }
- .max-width-xl\@#{$breakpoint} { max-width: var(--max-width-xl); }
- .max-width-xxl\@#{$breakpoint} { max-width: var(--max-width-xxl); }
- .max-width-xxxl\@#{$breakpoint} { max-width: var(--max-width-xxxl); }
- .max-width-xxxxl\@#{$breakpoint} { max-width: var(--max-width-xxxxl); }
- .max-width-100\%\@#{$breakpoint} { max-width: 100%; }
- .max-width-none\@#{$breakpoint} { max-width: none; }
-
- // position
- .position-relative\@#{$breakpoint} { position: relative; }
- .position-absolute\@#{$breakpoint} { position: absolute; }
- .position-fixed\@#{$breakpoint} { position: fixed; }
- .position-sticky\@#{$breakpoint} { position: sticky; }
- .position-static\@#{$breakpoint} { position: static; }
-
- .inset-0\@#{$breakpoint} { top: 0; right: 0; bottom: 0; left: 0; }
-
- .top-0\@#{$breakpoint} { top: 0; }
- .top-50\%\@#{$breakpoint} { top: 50%; }
- .top-xxxxs\@#{$breakpoint} { top: var(--space-xxxxs); }
- .top-xxxs\@#{$breakpoint} { top: var(--space-xxxs); }
- .top-xxs\@#{$breakpoint} { top: var(--space-xxs); }
- .top-xs\@#{$breakpoint} { top: var(--space-xs); }
- .top-sm\@#{$breakpoint} { top: var(--space-sm); }
- .top-md\@#{$breakpoint} { top: var(--space-md); }
- .top-lg\@#{$breakpoint} { top: var(--space-lg); }
- .top-xl\@#{$breakpoint} { top: var(--space-xl); }
- .top-xxl\@#{$breakpoint} { top: var(--space-xxl); }
- .top-xxxl\@#{$breakpoint} { top: var(--space-xxxl); }
- .top-xxxxl\@#{$breakpoint} { top: var(--space-xxxxl); }
-
- .bottom-0\@#{$breakpoint} { bottom: 0; }
- .bottom-unset\@#{$breakpoint} { bottom: unset; }
- .bottom-50\%\@#{$breakpoint} { bottom: 50%; }
- .bottom-xxxxs\@#{$breakpoint} { bottom: var(--space-xxxxs); }
- .bottom-xxxs\@#{$breakpoint} { bottom: var(--space-xxxs); }
- .bottom-xxs\@#{$breakpoint} { bottom: var(--space-xxs); }
- .bottom-xs\@#{$breakpoint} { bottom: var(--space-xs); }
- .bottom-sm\@#{$breakpoint} { bottom: var(--space-sm); }
- .bottom-md\@#{$breakpoint} { bottom: var(--space-md); }
- .bottom-lg\@#{$breakpoint} { bottom: var(--space-lg); }
- .bottom-xl\@#{$breakpoint} { bottom: var(--space-xl); }
- .bottom-xxl\@#{$breakpoint} { bottom: var(--space-xxl); }
- .bottom-xxxl\@#{$breakpoint} { bottom: var(--space-xxxl); }
- .bottom-xxxxl\@#{$breakpoint} { bottom: var(--space-xxxxl); }
-
- .right-0\@#{$breakpoint} { right: 0; }
- .right-50\%\@#{$breakpoint} { right: 50%; }
- .right-xxxxs\@#{$breakpoint} { right: var(--space-xxxxs); }
- .right-xxxs\@#{$breakpoint} { right: var(--space-xxxs); }
- .right-xxs\@#{$breakpoint} { right: var(--space-xxs); }
- .right-xs\@#{$breakpoint} { right: var(--space-xs); }
- .right-sm\@#{$breakpoint} { right: var(--space-sm); }
- .right-md\@#{$breakpoint} { right: var(--space-md); }
- .right-lg\@#{$breakpoint} { right: var(--space-lg); }
- .right-xl\@#{$breakpoint} { right: var(--space-xl); }
- .right-xxl\@#{$breakpoint} { right: var(--space-xxl); }
- .right-xxxl\@#{$breakpoint} { right: var(--space-xxxl); }
- .right-xxxxl\@#{$breakpoint} { right: var(--space-xxxxl); }
-
- .left-0\@#{$breakpoint} { left: 0; }
- .left-50\%\@#{$breakpoint} { left: 50%; }
- .left-xxxxs\@#{$breakpoint} { left: var(--space-xxxxs); }
- .left-xxxs\@#{$breakpoint} { left: var(--space-xxxs); }
- .left-xxs\@#{$breakpoint} { left: var(--space-xxs); }
- .left-xs\@#{$breakpoint} { left: var(--space-xs); }
- .left-sm\@#{$breakpoint} { left: var(--space-sm); }
- .left-md\@#{$breakpoint} { left: var(--space-md); }
- .left-lg\@#{$breakpoint} { left: var(--space-lg); }
- .left-xl\@#{$breakpoint} { left: var(--space-xl); }
- .left-xxl\@#{$breakpoint} { left: var(--space-xxl); }
- .left-xxxl\@#{$breakpoint} { left: var(--space-xxxl); }
- .left-xxxxl\@#{$breakpoint} { left: var(--space-xxxxl); }
-
- // overflow
- .overflow-hidden\@#{$breakpoint} { overflow: hidden; }
- .overflow-auto\@#{$breakpoint} { overflow: auto; }
- .momentum-scrolling\@#{$breakpoint} { -webkit-overflow-scrolling: touch; }
- .overscroll-contain\@#{$breakpoint} { overscroll-behavior: contain; }
-
- // visibility
- .visible\@#{$breakpoint} { visibility: visible; }
- .invisible\@#{$breakpoint} { visibility: hidden; }
- }
-
- @include breakpoint(#{$breakpoint}, "not all") {
- .display\@#{$breakpoint} { display: none !important; }
- }
-}
diff --git a/old-apps/web-shared/src/styles/base/_visibility.scss b/old-apps/web-shared/src/styles/base/_visibility.scss
deleted file mode 100644
index ab6a516..0000000
--- a/old-apps/web-shared/src/styles/base/_visibility.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-:root {
- --display: block;
-}
-
-.is-visible {
- display: var(--display) !important;
-}
-
-.is-hidden {
- display: none !important;
-}
-
-html:not(.js) {
- .no-js\:is-hidden {
- display: none !important;
- }
-}
-
-@media print {
- .print\:is-hidden {
- display: none !important;
- }
-} \ No newline at end of file
diff --git a/old-apps/web-shared/src/styles/base/_z-index.scss b/old-apps/web-shared/src/styles/base/_z-index.scss
deleted file mode 100644
index 5af9ff3..0000000
--- a/old-apps/web-shared/src/styles/base/_z-index.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-:root {
- --z-index-header: 3; // e.g., main header
- --z-index-popover: 5; // e.g., tooltips and dropdown
- --z-index-fixed-element: 10; // e.g., 'back to top' button
- --z-index-overlay: 15; // e.g., modals and dialogs
-} \ No newline at end of file
generated by cgit v1.3 (git 2.53.0) at 2026-04-02 15:33:09 +0200