diff options
Diffstat (limited to 'apps/web-shared/src/styles')
56 files changed, 0 insertions, 6700 deletions
diff --git a/apps/web-shared/src/styles/_base.scss b/apps/web-shared/src/styles/_base.scss deleted file mode 100644 index 414b440..0000000 --- a/apps/web-shared/src/styles/_base.scss +++ /dev/null @@ -1,48 +0,0 @@ -// -------------------------------- - -// Basic Style - Essential CSS rules and utility classes - -// -------------------------------- - -@forward 'base/breakpoints'; -@forward 'base/mixins'; -@forward 'base/grid-layout'; - -@use 'base/reset'; -@use 'base/colors'; -@use 'base/spacing'; -@use 'base/shared-styles'; -@use 'base/typography'; -@use 'base/icons'; -@use 'base/buttons'; -@use 'base/forms'; -@use 'base/z-index'; -@use 'base/visibility'; -@use 'base/accessibility'; -@use 'base/util'; - -pre { - font-family: monospace !important; -} - -*:focus-visible { - outline: 1px auto; -} - -.c-disabled { - cursor: not-allowed !important; - filter: opacity(.45); - pointer-events: none !important; - - &.loading { - cursor: wait !important; - } -} - -button.btn--state-b { - cursor: wait; -} - -button.reset { - cursor: pointer !important; -} diff --git a/apps/web-shared/src/styles/base/_accessibility.scss b/apps/web-shared/src/styles/base/_accessibility.scss deleted file mode 100644 index 9f71937..0000000 --- a/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/apps/web-shared/src/styles/base/_breakpoints.scss b/apps/web-shared/src/styles/base/_breakpoints.scss deleted file mode 100644 index 9b61af3..0000000 --- a/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/apps/web-shared/src/styles/base/_buttons.scss b/apps/web-shared/src/styles/base/_buttons.scss deleted file mode 100644 index 2a7ff34..0000000 --- a/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/apps/web-shared/src/styles/base/_colors.scss b/apps/web-shared/src/styles/base/_colors.scss deleted file mode 100644 index f061d9a..0000000 --- a/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/apps/web-shared/src/styles/base/_forms.scss b/apps/web-shared/src/styles/base/_forms.scss deleted file mode 100644 index faffddd..0000000 --- a/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/apps/web-shared/src/styles/base/_grid-layout.scss b/apps/web-shared/src/styles/base/_grid-layout.scss deleted file mode 100644 index bd8b6c9..0000000 --- a/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/apps/web-shared/src/styles/base/_icons.scss b/apps/web-shared/src/styles/base/_icons.scss deleted file mode 100644 index 1674a7c..0000000 --- a/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/apps/web-shared/src/styles/base/_mixins.scss b/apps/web-shared/src/styles/base/_mixins.scss deleted file mode 100644 index 8fe82f6..0000000 --- a/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/apps/web-shared/src/styles/base/_reset.scss b/apps/web-shared/src/styles/base/_reset.scss deleted file mode 100644 index 5ba4534..0000000 --- a/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/apps/web-shared/src/styles/base/_shared-styles.scss b/apps/web-shared/src/styles/base/_shared-styles.scss deleted file mode 100644 index dae02fe..0000000 --- a/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/apps/web-shared/src/styles/base/_spacing.scss b/apps/web-shared/src/styles/base/_spacing.scss deleted file mode 100644 index 24e6645..0000000 --- a/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/apps/web-shared/src/styles/base/_typography.scss b/apps/web-shared/src/styles/base/_typography.scss deleted file mode 100644 index 85b974a..0000000 --- a/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/apps/web-shared/src/styles/base/_util.scss b/apps/web-shared/src/styles/base/_util.scss deleted file mode 100644 index c384c2c..0000000 --- a/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/apps/web-shared/src/styles/base/_visibility.scss b/apps/web-shared/src/styles/base/_visibility.scss deleted file mode 100644 index ab6a516..0000000 --- a/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/apps/web-shared/src/styles/base/_z-index.scss b/apps/web-shared/src/styles/base/_z-index.scss deleted file mode 100644 index 5af9ff3..0000000 --- a/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 diff --git a/apps/web-shared/src/styles/components/404.scss b/apps/web-shared/src/styles/components/404.scss deleted file mode 100644 index 1a0267a..0000000 --- a/apps/web-shared/src/styles/components/404.scss +++ /dev/null @@ -1,43 +0,0 @@ -@use '../base' as *; - -.fof { -} - -.fof__animation { - svg { - display: block; - max-width: 520px; - margin-left: auto; - margin-right: auto; - } -} - -#i-fof-browser { - transform-origin: 260px 304px; - animation: i-fof-browser 4s infinite; -} - -#i-fof-shadow { - transform-origin: 282px 410px; - animation: i-fof-shadow 4s infinite; -} - -@keyframes i-fof-browser { - 0%, 100% { - transform: translateY(0) scale(1); - } - - 50% { - transform: translateY(-10%) scale(0.9); - } -} - -@keyframes i-fof-shadow { - 0%, 100% { - transform: scale(1); - } - - 50% { - transform: scale(0.8); - } -} diff --git a/apps/web-shared/src/styles/components/adv-custom-select.scss b/apps/web-shared/src/styles/components/adv-custom-select.scss deleted file mode 100644 index bd28247..0000000 --- a/apps/web-shared/src/styles/components/adv-custom-select.scss +++ /dev/null @@ -1,79 +0,0 @@ -@use '../base' as *; -@use 'popover.scss' as *; - -/* -------------------------------- - -File#: _2_adv-custom-select -Title: Advanced Custom Select -Descr: Custom select with advanced structure options -Usage: codyhouse.co/license - --------------------------------- */ - -.adv-select { -} - -.adv-select__control { -} - -.adv-select-popover { - // use rem units - @include spaceUnit(1rem); - @include textUnit(1rem); - - &.popover { // popover component - dependency - --popover-width: 250px; - --popover-control-gap: 4px; // ⚠️ use px units - vertical gap between the popover and its control - --popover-viewport-gap: 20px; // ⚠️ use px units - vertical gap between the popover and the viewport - visible if popover height > viewport height - --popover-transition-duration: 0.2s; - - @include breakpoint(md) { - --popover-width: 320px; - } - } -} - -.adv-select-popover__optgroup:not(:first-of-type) { // custom <optgroup> - padding-top: var(--space-xxs); -} - -.adv-select-popover__optgroup:not(:last-of-type) { - border-bottom: 1px solid alpha(var(--color-contrast-higher), 0.1); - padding-bottom: var(--space-xxs); -} - -.adv-select-popover__check { - display: none; -} - -.adv-select-popover__label { -} - -.adv-select-popover__option { - position: relative; - cursor: pointer; - @include fontSmooth; - transition: .2s; - - &:hover { - background-color: alpha(var(--color-contrast-higher), 0.075); - } - - &:focus { - outline: none; - background-color: alpha(var(--color-primary), 0.15); - } - - &[aria-selected=true] { // selected option - background-color: var(--color-primary); - color: var(--color-white); - - .adv-select-popover__check { - display: block; - } - - &:focus { - box-shadow: inset 0 0 0 2px var(--color-primary-dark); - } - } -} diff --git a/apps/web-shared/src/styles/components/alert.scss b/apps/web-shared/src/styles/components/alert.scss deleted file mode 100644 index 9d9008d..0000000 --- a/apps/web-shared/src/styles/components/alert.scss +++ /dev/null @@ -1,69 +0,0 @@ -@use '../base' as *; - -/* -------------------------------- - -File#: _1_alert -Title: Alert -Descr: Feedback message -Usage: codyhouse.co/license - --------------------------------- */ - -.alert { - background-color: alpha(var(--color-primary), 0.2); - color: var(--color-contrast-higher); - - // hide element - position: absolute; - clip: rect(1px, 1px, 1px, 1px); - clip-path: inset(50%); -} - -.alert__icon { - color: var(--color-primary); -} - -.alert__close-btn { - display: inline-block; - - .icon { - display: block; - } - - &:hover { - opacity: 0.7; - } -} - -// themes -.alert--success { - background-color: alpha(var(--color-success), 0.2); - - .alert__icon { - color: var(--color-success); - } -} - -.alert--error { - background-color: alpha(var(--color-error), 0.2); - - .alert__icon { - color: var(--color-error); - } -} - -.alert--warning { - background-color: alpha(var(--color-warning), 0.2); - - .alert__icon { - color: var(--color-warning); - } -} - -// toggle visibility -.alert--is-visible { - position: static; - clip: auto; - clip-path: none; -} - diff --git a/apps/web-shared/src/styles/components/auto-sized-grid.scss b/apps/web-shared/src/styles/components/auto-sized-grid.scss deleted file mode 100644 index a3b1be5..0000000 --- a/apps/web-shared/src/styles/components/auto-sized-grid.scss +++ /dev/null @@ -1,56 +0,0 @@ -@use '../base' as *; - -/* -------------------------------- - -File#: _1_auto-sized-grid -Title: Auto Sized Grid -Descr: A grid layout based on CSS Grid where the columns are automatically created according to a min-width value -Usage: codyhouse.co/license - --------------------------------- */ - -.grid-auto-xs, .grid-auto-sm, .grid-auto-md, .grid-auto-lg, .grid-auto-xl { - display: grid; - gap: var(--gap-y, 0px) var(--gap-x, 0px); - grid-template-columns: repeat(auto-fit, minmax(var(--col-min-width), 1fr)); // auto add new cols -} - -.grid-auto-xs { - --col-min-width: 8rem; -} - -.grid-auto-sm { - --col-min-width: 10rem; -} - -.grid-auto-md { - --col-min-width: 15rem; -} - -.grid-auto-lg { - --col-min-width: 20rem; -} - -.grid-auto-xl { - --col-min-width: 25rem; -} - -@each $breakpoint, $value in $breakpoints { - @include breakpoint(#{$breakpoint}) { - .grid-auto-xs\@#{$breakpoint} { - --col-min-width: 8rem; - } - .grid-auto-sm\@#{$breakpoint} { - --col-min-width: 10rem; - } - .grid-auto-md\@#{$breakpoint} { - --col-min-width: 15rem; - } - .grid-auto-lg\@#{$breakpoint} { - --col-min-width: 20rem; - } - .grid-auto-xl\@#{$breakpoint} { - --col-min-width: 25rem; - } - } -} diff --git a/apps/web-shared/src/styles/components/autocomplete.scss b/apps/web-shared/src/styles/components/autocomplete.scss deleted file mode 100644 index c20d508..0000000 --- a/apps/web-shared/src/styles/components/autocomplete.scss +++ /dev/null @@ -1,76 +0,0 @@ -@use '../base' as *; -@use 'circle-loader.scss' as *; - -/* -------------------------------- - -File#: _2_autocomplete -Title: Autocomplete -Descr: Autocomplete plugin for input elements -Usage: codyhouse.co/license - --------------------------------- */ - -:root { - --autocomplete-dropdown-vertical-gap: 4px; // gap between input and results list - --autocomplete-dropdown-max-height: 150px; - --autocomplete-dropdown-scrollbar-width: 6px; // custom scrollbar width - webkit browsers -} - -// results dropdown -.autocomplete__results { - position: absolute; - z-index: var(--z-index-popover, 5); - width: 100%; - left: 0; - top: calc(100% + var(--autocomplete-dropdown-vertical-gap)); - background-color: var(--color-bg-light); - box-shadow: var(--inner-glow), var(--shadow-xs); - border-radius: var(--radius-md); - opacity: 0; - visibility: hidden; - overflow: hidden; - - .autocomplete--results-visible & { - opacity: 1; - visibility: visible; - } -} - -.autocomplete__list { - max-height: var(--autocomplete-dropdown-max-height); - overflow: auto; - -webkit-overflow-scrolling: touch; - - // custom scrollbar - &::-webkit-scrollbar { // scrollbar width - width: var(--autocomplete-dropdown-scrollbar-width); - } - - &::-webkit-scrollbar-track { // progress bar - background-color: alpha(var(--color-contrast-higher), 0.08); - border-radius: 0; - } - - &::-webkit-scrollbar-thumb { // handle - background-color: alpha(var(--color-contrast-higher), 0.12); - border-radius: 0; - - &:hover { - background-color: alpha(var(--color-contrast-higher), 0.2); - } - } -} - -// single result item -.autocomplete__item { - cursor: pointer; - - &:hover { - background-color: alpha(var(--color-contrast-higher), 0.075); - } - - &:focus { - outline: none; - background-color: alpha(var(--color-primary), 0.15); - } -} diff --git a/apps/web-shared/src/styles/components/breadcrumbs.scss b/apps/web-shared/src/styles/components/breadcrumbs.scss deleted file mode 100644 index 45bf7c6..0000000 --- a/apps/web-shared/src/styles/components/breadcrumbs.scss +++ /dev/null @@ -1,18 +0,0 @@ -@use '../base' as *; - -/* -------------------------------- - -File#: _1_breadcrumbs -Title: Breadcrumbs -Descr: List of links to help the user move within website structure -Usage: codyhouse.co/license - --------------------------------- */ - -.breadcrumbs {} - -.breadcrumbs__item { - display: inline-block; // flex fallback - display: inline-flex; - align-items: center; -} diff --git a/apps/web-shared/src/styles/components/btn-states.scss b/apps/web-shared/src/styles/components/btn-states.scss deleted file mode 100644 index a2fc6c5..0000000 --- a/apps/web-shared/src/styles/components/btn-states.scss +++ /dev/null @@ -1,51 +0,0 @@ -@use '../base' as *; - -/* -------------------------------- - -File#: _1_btn-states -Title: Buttons states -Descr: Multi-state button elements -Usage: codyhouse.co/license - --------------------------------- */ - -.btn__content-a { - display: inline-flex; -} - -.btn__content-b { - display: none; -} - -.btn__content-a, .btn__content-b { - align-items: center; -} - -.btn--state-b { - .btn__content-a { - display: none; - } - - .btn__content-b { - display: inline-block; // fallback - display: inline-flex; - } -} - -/* preserve button width when switching from state A to state B */ -.btn--preserve-width { - .btn__content-b { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - justify-content: center; - } - - &.btn--state-b .btn__content-a { - display: inline-block; // fallback - display: inline-flex; - visibility: hidden; - } -} diff --git a/apps/web-shared/src/styles/components/chip.scss b/apps/web-shared/src/styles/components/chip.scss deleted file mode 100644 index 1bb93db..0000000 --- a/apps/web-shared/src/styles/components/chip.scss +++ /dev/null @@ -1,117 +0,0 @@ -@use '../base' as *; - -/* -------------------------------- - -File#: _1_chips -Title: Chips -Descr: A list of compact pieces of information -Usage: codyhouse.co/license - --------------------------------- */ - -.chip { - /* reset - in case the class is applied to a <button> or an <a> */ - border: 0; - color: inherit; - line-height: 1; - appearance: none; - - display: inline-flex; - align-items: center; - border-radius: var(--radius-sm); - - background-color: alpha(var(--color-contrast-higher), 0.1); - padding: var(--space-xxxs) 0; -} - -.chip--outline { - background-color: transparent; - box-shadow: inset 0 0 0 1px alpha(var(--color-contrast-higher), 0.25); -} - -.chip--error { - background-color: alpha(var(--color-error), 0.2); - color: var(--color-contrast-higher); -} - -.chip--success { - background-color: alpha(var(--color-success), 0.2); - color: var(--color-contrast-higher); -} - -.chip--warning { - background-color: alpha(var(--color-warning), 0.2); - color: var(--color-contrast-higher); -} - -.chip--interactive { - cursor: pointer; - - &:hover { - background-color: alpha(var(--color-contrast-higher), 0.2); - } - - &:focus { - outline: none; - box-shadow: 0 0 0 3px alpha(var(--color-contrast-higher), 0.3); - } - - &:focus:not(:focus-visible) { - box-shadow: none; - } -} - -.chip__label { - padding: 0 var(--space-xxs); -} - -.chip__img { - display: block; - width: 1.5em; - height: 1.5em; - border-radius: 50%; - object-fit: cover; -} - -.chip__icon-wrapper { - display: flex; - width: 1.5em; - height: 1.5em; - border-radius: 50%; - background-color: alpha(var(--color-contrast-higher), 0.95); - color: var(--color-bg); /* icon color */ - - .icon { - display: block; - margin: auto; - } -} - -.chip__btn { - @include reset; - display: flex; - width: 1em; - height: 1em; - background-color: alpha(var(--color-contrast-higher), 0.2); - border-radius: 50%; - cursor: pointer; - margin-right: 7px; - - .icon { - display: block; - margin: 0 auto; - } - - &:hover { - background-color: alpha(var(--color-contrast-higher), 0.3); - } - - &:focus { - outline: none; - box-shadow: 0 0 0 2px alpha(var(--color-contrast-higher), 0.5); - } - - &:focus:not(:focus-visible) { - box-shadow: none; - } -} diff --git a/apps/web-shared/src/styles/components/circle-loader.scss b/apps/web-shared/src/styles/components/circle-loader.scss deleted file mode 100644 index 5116d39..0000000 --- a/apps/web-shared/src/styles/components/circle-loader.scss +++ /dev/null @@ -1,315 +0,0 @@ -@use '../base' as *; - -/* -------------------------------- - -File#: _1_circle-loader -Title: Circle Loader -Descr: A collection of animated circle loaders -Usage: codyhouse.co/license - --------------------------------- */ - -:root { - // v1 - --circle-loader-v1-size: 48px; - --circle-loader-v1-stroke-width: 4px; - - // v2 - --circle-loader-v2-size: 64px; - --circle-loader-v2-stroke-width: 2; - - // v3 - --circle-loader-v3-size: 64px; - - // v4 - --circle-loader-v4-size: 48px; - - // v5 - --circle-loader-v5-size: 64px; - - // v6 - --circle-loader-v6-size: 48px; -} - -.circle-loader { - position: relative; - display: inline-block; -} - -@supports (animation-name: this) { - .circle-loader__label { - @include srHide; // show label only to screen readers if animations are supported - } -} - -// loader v1 - rotation -@supports (animation-name: this) { - .circle-loader--v1 { - transform: rotate(45deg); - will-change: transform; - animation: circle-loader-1 0.75s infinite var(--ease-in-out); - - .circle-loader__circle { - width: var(--circle-loader-v1-size); // loader width - height: var(--circle-loader-v1-size); // loader height - border-width: var(--circle-loader-v1-stroke-width); // loader stroke width - border-style: solid; - border-color: alpha(var(--color-primary), 0.2); // loader base color - border-radius: 50%; - - &::after { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - border-width: inherit; - border-style: inherit; - border-color: transparent; - border-top-color: var(--color-primary); // loader fill color - border-radius: inherit; - } - } - } -} - -@keyframes circle-loader-1 { - 0% { - transform: rotate(45deg); - } - - 100% { - transform: rotate(405deg); - } -} - -// loader v2 - filling -@supports (animation-name: this) { - .circle-loader--v2 { - will-change: transform; - animation: circle-loader-spinning-main 1.4s infinite linear; - - .circle-loader__svg { - display: block; - width: var(--circle-loader-v2-size); - height: var(--circle-loader-v2-size); - color: var(--color-primary); // loader color - - > * { - stroke-width: var(--circle-loader-v2-stroke-width); // loader stroke width - } - } - - .circle-loader__base { - opacity: 0.2; - } - - .circle-loader__fill { - stroke-linecap: round; // optional - remove if you prefer butt caps - stroke-dashoffset: 0; - stroke-dasharray: 90 120; - transform-origin: 50% 50%; - transform: rotate(45deg); - animation: circle-loader-dash 1.4s infinite; - } - } -} - -@keyframes circle-loader-dash { - 0%, 20% { - stroke-dashoffset: 0; - transform: rotate(0); - } - - 50%, 70% { - stroke-dashoffset: 80; - transform: rotate(270deg); - } - - 100% { - stroke-dashoffset: 0; - transform: rotate(360deg); - } -} - -@keyframes circle-loader-spinning-main { - to { - transform: rotate(360deg); - } -} - -// loader v3 - drop -@supports (animation-name: this) { - .circle-loader--v3 { - width: var(--circle-loader-v3-size); // loader width - height: var(--circle-loader-v3-size); // loader height - - .circle-loader__circle { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - border-radius: 50%; - background-color: var(--color-primary); // loader color - transform: scale(0); - opacity: 0.8; - will-change: transform, opacity; - animation: circle-loader-3 1.2s infinite; - } - - .circle-loader__circle--2nd { - animation-delay: 0.6s; // this should be half the duration of animation - } - } -} - -@keyframes circle-loader-3 { - to { - transform: scale(1); - opacity: 0; - } -} - -// loader v4 - eclipse -@supports (animation-name: this) { - .circle-loader--v4 { - width: var(--circle-loader-v4-size); // loader width - height: var(--circle-loader-v4-size); // loader height - border-radius: 50%; - overflow: hidden; - - .circle-loader__mask, - .circle-loader__circle { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - border-radius: inherit; - } - - .circle-loader__mask { - clip-path: circle(calc(0.5 * var(--circle-loader-v4-size))); // fix iOS issue - it needs to be = half size of loader - } - - .circle-loader__circle--1st { - background-color: var(--color-contrast-low); // loader base color - } - - .circle-loader__circle--2nd { - background-color: var(--color-primary); // loader fill color - will-change: transform; - transform-origin: 50% 100%; - animation: circle-loader-4 1.2s infinite cubic-bezier(.23, .9, .75, .1); - transform: translateX(-100%); - } - } -} - -@keyframes circle-loader-4 { - to { - transform: translateX(100%); - } -} - -// loader v5 - bounce -@supports (animation-name: this) { - .circle-loader--v5 { - font-size: var(--circle-loader-v5-size); // loader size - if you edit this value all elements scale accordingly - width: 1em; - height: 1em; - - .circle-loader__label { - font-size: 1rem; - } - - .circle-loader__ball { - position: absolute; - top: 0; - left: calc(50% - 0.140625em); - width: 0.28125em; - height: 0.28125em; - background-color: var(--color-primary); - border-radius: 50%; - animation: circle-loader-5-ball 0.8s infinite; - } - - .circle-loader__shadow { - position: absolute; - bottom: 0; - left: calc(50% - 0.15625em); - width: 0.3125em; - height: 0.3125em; - background-color: var(--color-contrast-lower); - border-radius: 50%; - transform: scaleY(0.4) scaleX(1.2); - animation: circle-loader-5-shadow 0.8s infinite; - } - } -} - -@keyframes circle-loader-5-ball { - 0% { - transform: translateY(0); - animation-timing-function: cubic-bezier(.61, .12, .85, .4); - } - - 50% { - transform: translateY(0.5625em); - animation-timing-function: cubic-bezier(.12, .59, .46, .95); - } - - 100% { - transform: translateY(0); - } -} - -@keyframes circle-loader-5-shadow { - 0% { - transform: scaleY(0.4) scaleX(1.2); - background-color: var(--color-contrast-lower); - animation-timing-function: cubic-bezier(.61, .12, .85, .4); - } - - 50% { - transform: scaleY(0.2) scaleX(0.6); - background-color: var(--color-contrast-low); - animation-timing-function: cubic-bezier(.12, .59, .46, .95); - } - - 100% { - transform: scaleY(0.4) scaleX(1.2); - background-color: var(--color-contrast-lower); - } -} - -// loader v6 - worm -@supports (animation-name: this) { - .circle-loader--v6 { - .circle-loader__svg { - display: block; - width: var(--circle-loader-v6-size); - height: var(--circle-loader-v6-size); - color: var(--color-primary); // loader color - } - - .circle-loader__fill { - stroke-width: 8px; // loader stroke width - stroke-dashoffset: 35; - stroke-dasharray: 36 36; - animation: circle-loader-6 1.5s infinite; - } - } -} - -@keyframes circle-loader-6 { - 0%, 100% { - stroke-dashoffset: 35; - } - - 50% { - stroke-dashoffset: -35; - } -} diff --git a/apps/web-shared/src/styles/components/custom-checkbox.scss b/apps/web-shared/src/styles/components/custom-checkbox.scss deleted file mode 100644 index 5722ee0..0000000 --- a/apps/web-shared/src/styles/components/custom-checkbox.scss +++ /dev/null @@ -1,131 +0,0 @@ -@use '../base' as *; - -/* -------------------------------- - -File#: _1_custom-checkbox -Title: Custom Checkbox -Descr: Replace the native checkbox button with a custom element (e.g., an icon) -Usage: codyhouse.co/license - --------------------------------- */ - -:root { - --custom-checkbox-size: 20px; - --custom-checkbox-radius: 4px; - --custom-checkbox-border-width: 1px; - --custom-checkbox-marker-size: 18px; -} - -.custom-checkbox { - position: relative; - z-index: 1; - display: inline-block; - font-size: var(--custom-checkbox-size); -} - -.custom-checkbox__input { - position: relative; - /* hide native input */ - margin: 0; - padding: 0; - opacity: 0; - height: 1em; - width: 1em; - display: block; - z-index: 1; -} - -.custom-checkbox__control { - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - z-index: -1; - pointer-events: none; - color: alpha(var(--color-contrast-low), 0.65); /* unchecked color */ - - &::before, &::after { - content: ''; - position: absolute; - } - - &::before { /* focus circle */ - width: 160%; - height: 160%; - background-color: currentColor; - top: 50%; - left: 50%; - transform: translate(-50%, -50%) scale(0); - opacity: 0; - border-radius: 50%; - will-change: transform; - } - - &::after { /* custom checkbox */ - top: 0; - left: 0; - width: 100%; - height: 100%; - - /* custom checkbox style */ - background-color: var(--color-bg); - border-radius: var(--custom-checkbox-radius); - box-shadow: inset 0 0 0 var(--custom-checkbox-border-width) currentColor, var(--shadow-xs); /* border */ - } -} - -.custom-checkbox__input:checked ~ .custom-checkbox__control, -.custom-checkbox__input:indeterminate ~ .custom-checkbox__control { - &::after { - background-color: currentColor; - background-repeat: no-repeat; - background-position: center; - background-size: var(--custom-checkbox-marker-size); - box-shadow: none; - } -} - -.custom-checkbox__input:checked ~ .custom-checkbox__control { - color: var(--color-primary); /* checked color */ - - &::after { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolyline points='2.5 8 6.5 12 13.5 3' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3C/svg%3E"); - } -} - -.custom-checkbox__input:indeterminate ~ .custom-checkbox__control { - &::after { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cline x1='2' y1='8' x2='14' y2='8' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E"); - } -} - -.custom-checkbox__input:active ~ .custom-checkbox__control { - transform: scale(0.9); -} - -.custom-checkbox__input:checked:active ~ .custom-checkbox__control, -.custom-checkbox__input:indeterminate:active ~ .custom-checkbox__control { - transform: scale(1); -} - -.custom-checkbox__input:focus ~ .custom-checkbox__control::before { - opacity: 0.2; - transform: translate(-50%, -50%) scale(1); -} - -/* --icon */ -.custom-checkbox--icon { - --custom-checkbox-size: 32px; - - .custom-checkbox__control::after { - display: none; - } - - .icon { - display: block; - color: inherit; - position: relative; - z-index: 1; - } -} diff --git a/apps/web-shared/src/styles/components/custom-select.scss b/apps/web-shared/src/styles/components/custom-select.scss deleted file mode 100644 index 9cd3b5e..0000000 --- a/apps/web-shared/src/styles/components/custom-select.scss +++ /dev/null @@ -1,158 +0,0 @@ -@use '../base' as *; - -/* -------------------------------- - -File#: _1_custom-select -Title: Custom Select -Descr: Custom Select Control -Usage: codyhouse.co/license - --------------------------------- */ - -:root { - // --default variation only 👇 - --select-icon-size: 16px; - --select-icon-right-margin: var(--space-sm); // icon margin right - --select-text-icon-gap: var(--space-xxxs); // gap between text and icon -} - -.select { - position: relative; -} - -.select__input { - width: 100%; - height: 100%; - padding-right: calc(var(--select-icon-size) + var(--select-icon-right-margin) + var(--select-text-icon-gap)) !important; -} - -.select__icon { - width: var(--select-icon-size); - height: var(--select-icon-size); - pointer-events: none; - position: absolute; - right: var(--select-icon-right-margin); - top: 50%; - transform: translateY(-50%); -} - -// --custom-dropdown -:root { - --select-dropdown-gap: 4px; // distance between select control and custom dropdown -} - -.select__button { // created in JS - custom select control - width: 100%; -} - -.select__button[aria-expanded="true"] { - // custom select control if dropdown = visible -} - -.select__dropdown { // created in JS - custom select dropdown - position: absolute; - left: 0; - top: 100%; - min-width: 200px; - max-height: 1px; // updated in JS - background-color: var(--color-bg-light); - box-shadow: var(--inner-glow), var(--shadow-md); - padding: var(--space-xxxs) 0; - border-radius: var(--radius-md); - z-index: var(--z-index-popover, 5); - margin-top: var(--select-dropdown-gap); - margin-bottom: var(--select-dropdown-gap); - overflow: auto; - - // use rem units - @include spaceUnit(1rem); - @include textUnit(1rem); - - visibility: hidden; - opacity: 0; -} - -.select__dropdown--right { // change dropdown position based on the available space - right: 0; - left: auto; -} - -.select__dropdown--up { - bottom: 100%; - top: auto; -} - -.select__button[aria-expanded="true"] + .select__dropdown { - visibility: visible; - opacity: 1; -} - -// custom <optgroup> list - include all <option>s if no <optgroup> available -.select__list { - list-style: none !important; -} - -.select__list:not(:first-of-type) { - padding-top: var(--space-xxs); -} - -.select__list:not(:last-of-type) { - border-bottom: 1px solid alpha(var(--color-contrast-higher), 0.1); - padding-bottom: var(--space-xxs); -} - -.select__item { // single item inside .select__list - display: flex; - align-items: center; - padding: var(--space-xxs) var(--space-sm); - color: var(--color-contrast-high); - width: 100%; - text-align: left; - // truncate text - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.select__item--optgroup { // custom <optgroup> label - font-size: var(--text-sm); - color: var(--color-contrast-medium); -} - -.select__item--option { // custom <option> label - cursor: pointer; - - &:hover { - background-color: alpha(var(--color-contrast-higher), 0.075); - } - - &:focus { - outline: none; - background-color: alpha(var(--color-primary), 0.15); - } - - &[aria-selected=true] { // selected option - background-color: var(--color-primary); - color: var(--color-white); - position: relative; - @include fontSmooth; - - &::after { // check icon next to the selected language - content: ''; - display: block; - height: 1em; - width: 1em; - margin-left: auto; - background-color: currentColor; - mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolyline stroke-width='2' stroke='%23ffffff' fill='none' stroke-linecap='round' stroke-linejoin='round' points='1,9 5,13 15,3 '/%3E%3C/svg%3E"); - } - - &:focus { - box-shadow: inset 0 0 0 2px var(--color-primary-dark); - } - } -} - -html:not(.js ) .select .icon { // hide icon if JS = disabled - display: none; -} diff --git a/apps/web-shared/src/styles/components/details.scss b/apps/web-shared/src/styles/components/details.scss deleted file mode 100644 index b4c122d..0000000 --- a/apps/web-shared/src/styles/components/details.scss +++ /dev/null @@ -1,57 +0,0 @@ -@use '../base' as *; - -/* -------------------------------- - -File#: _1_details -Title: Details -Descr: A button that toggles the visibility of additional information -Usage: codyhouse.co/license - --------------------------------- */ - -.details {} - -.details__summary { - display: inline-block; - cursor: pointer; - user-select: none; - - &:hover { - color: var(--color-primary); - } - - &:focus { - outline: 2px solid alpha(var(--color-primary), 0.2); - outline-offset: 4px; - } - - .icon { - flex-shrink: 0; - } -} - -// if JS = enabled -.js { - .details__summary { - list-style: none; // remove summary default icon - } - - .details__summary::-webkit-details-marker { - display: none; // remove default icon in webkit browsers - } - - .details__summary[aria-expanded="true"] .icon { - transform: rotate(90deg); // rotate icon when content is visible - } - - .details__content[aria-hidden="true"] { - display: none; - } -} - -// if JS = disabled -html:not(.js) .details__summary { - .icon { - display: none; - } -} diff --git a/apps/web-shared/src/styles/components/dropdown.scss b/apps/web-shared/src/styles/components/dropdown.scss deleted file mode 100644 index c5ded33..0000000 --- a/apps/web-shared/src/styles/components/dropdown.scss +++ /dev/null @@ -1,98 +0,0 @@ -@use '../base' as *; - -/* -------------------------------- - -File#: _2_dropdown -Title: Dropdown -Descr: A hoverable link that toggles the visibility of a dropdown list -Usage: codyhouse.co/license - --------------------------------- */ - -:root { - --dropdown-item-padding: var(--space-xxs) var(--space-sm); -} - -.dropdown { - position: relative; -} - -.dropdown__menu { - border-radius: var(--radius-md); - background-color: var(--color-bg-light); - box-shadow: var(--inner-glow), var(--shadow-sm); - z-index: var(--z-index-popover, 5); - position: absolute; - left: 0; - top: 100%; - opacity: 0; - visibility: hidden; -} - -.dropdown__wrapper { - max-height: 24px; -} - -@media (pointer: fine) { // user has pointing device (e.g., mouse) - .dropdown__wrapper, - .open-dropdown { - &:hover .dropdown__menu, - &:focus .dropdown__menu { - opacity: 1; - visibility: visible; - } - } - - .dropdown__sub-wrapper:hover > .dropdown__menu { - left: 100%; - } -} - -@media not all and (pointer: fine) { - .dropdown__trigger-icon { - display: none; - } -} - -.dropdown__item { - display: block; - text-decoration: none; - color: var(--color-contrast-high); - padding: var(--dropdown-item-padding); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - - &:hover, &.dropdown__item--hover { - background-color: alpha(var(--color-contrast-higher), 0.075); - } -} - -.dropdown__separator { // h line divider - height: 1px; - background-color: var(--color-contrast-lower); - margin: var(--dropdown-item-padding); -} - -.dropdown__sub-wrapper { - position: relative; - - > .dropdown__item { // item w/ right arrow - position: relative; - padding-right: calc(var(--space-sm) + 12px); - - .icon { // right arrow - position: absolute; - display: block; - width: 12px; - height: 12px; - right: var(--space-xxs); - top: calc(50% - 6px); - } - } - - > .dropdown__menu { // sub menu - top: calc(var(--space-xxs) * -1); - box-shadow: var(--inner-glow), var(--shadow-md); - } -} diff --git a/apps/web-shared/src/styles/components/form-validator.scss b/apps/web-shared/src/styles/components/form-validator.scss deleted file mode 100644 index cc9f9a3..0000000 --- a/apps/web-shared/src/styles/components/form-validator.scss +++ /dev/null @@ -1,18 +0,0 @@ -@use '../base' as *; - -/* -------------------------------- - -File#: _1_form-validator -Title: Form Validator -Descr: A plugin to validate form fields -Usage: codyhouse.co/license - --------------------------------- */ - -.form-validate__error-msg { - display: none; // hide error message by default - - .form-validate__input-wrapper--error & { - display: block; // show error message - } -} diff --git a/apps/web-shared/src/styles/components/interactive-table.scss b/apps/web-shared/src/styles/components/interactive-table.scss deleted file mode 100644 index f239c62..0000000 --- a/apps/web-shared/src/styles/components/interactive-table.scss +++ /dev/null @@ -1,156 +0,0 @@ -@use '../base' as *; -@use 'menu.scss' as *; -@use 'menu-bar.scss' as *; - -/* -------------------------------- - -File#: _3_interactive-table -Title: Interactive Table -Descr: Table with the option of sorting data and selecting rows to perform specific actions -Usage: codyhouse.co/license - --------------------------------- */ - -.int-table { - overflow: hidden; - border-bottom: 2px solid var(--color-contrast-lower); -} - -.int-table__inner { - position: relative; - overflow: auto; - - &::-webkit-scrollbar { // custom scrollbar style - height: 8px; - width: 8px; - } - - &::-webkit-scrollbar-track { // progress bar - background-color: var(--color-contrast-lower); - } - - &::-webkit-scrollbar-thumb { // handle - background-color: alpha(var(--color-contrast-higher), 0.9); - border-radius: 50em; - } - - &::-webkit-scrollbar-thumb:hover { - background-color: var(--color-contrast-higher); - } -} - -.int-table__table { - width: 100%; -} - -.int-table__header { - .int-table__cell { - background-color: var(--color-bg); - box-shadow: 0 2px 0 var(--color-contrast-lower); - } -} - -.int-table__body { - .int-table__row { - border-bottom: 1px solid var(--color-contrast-lower); - - &:last-child { - border-bottom: none; - } - } - - .int-table__row--checked { - background-color: alpha(var(--color-primary), 0.1); - border-color: alpha(var(--color-primary), 0.25); - } -} - -.int-table__cell { // standard cell - padding: var(--space-xxxs); -} - -.int-table__cell--th { // header cell - font-weight: 600; -} - -.int-table__cell--sort { // header cell with sorting option - user-select: none; - - &:hover, &:focus-within { - background-color: alpha(var(--color-contrast-higher), 0.075); - } - - &:hover { - cursor: pointer; - } -} - -.int-table__cell--focus { - background-color: alpha(var(--color-primary), 0.15); -} - -.int-table__sort-icon { // sorting icon indicator - .arrow-up, .arrow-down { - fill: alpha(var(--color-contrast-higher), 0.3); - } -} - -.int-table__cell--asc .int-table__sort-icon .arrow-up, -.int-table__cell--desc .int-table__sort-icon .arrow-down { - fill: var(--color-contrast-higher); -} - -.int-table__checkbox { - --custom-checkbox-size: 18px; - --custom-checkbox-marker-size: 16px; - display: block; - width: var(--custom-checkbox-size); - height: var(--custom-checkbox-size); -} - -.int-table__menu-btn { - display: flex; - align-items: center; - justify-content: center; - width: 2em; - cursor: pointer; - - .icon { - display: block; - width: 16px; - height: 16px; - } -} - -// --sticky-header -.int-table--sticky-header { - position: relative; - z-index: 1; - - .int-table__inner { - max-height: 605px; - } - - .int-table__header { - .int-table__cell { - position: sticky; - top: 0; - z-index: 2; - } - } -} - -// actions -.int-table-actions { - .menu-bar { - --menu-bar-button-size: 38px; // size of the menu buttons - --menu-bar-icon-size: 16px; // size of the icons inside the buttons - --menu-bar-horizontal-gap: var(--space-xxxxs); // horizontal gap between buttons - --menu-bar-vertical-gap: 4px; // vertical gap between buttons and labels (tooltips) - --menu-bar-label-size: var(--text-xs); // label font size - } - - .menu-bar__icon { - color: alpha(var(--color-contrast-higher), 0.5); - } -} diff --git a/apps/web-shared/src/styles/components/light-dark-switch.scss b/apps/web-shared/src/styles/components/light-dark-switch.scss deleted file mode 100644 index 23dc03a..0000000 --- a/apps/web-shared/src/styles/components/light-dark-switch.scss +++ /dev/null @@ -1,96 +0,0 @@ -@use '../base' as *; -@use 'popover.scss' as *; -@use 'adv-custom-select.scss' as *; - -/* -------------------------------- - -File#: _3_light-dark-switch -Title: Light/Dark Switch -Descr: Color theme switcher -Usage: codyhouse.co/license - --------------------------------- */ - -.ld-switch {} - -.ld-switch-btn { - position: relative; - width: 24px; - height: 24px; - overflow: hidden; - display: inline-block; - - - &:hover { - cursor: pointer; - opacity: 0.8; - } - - &:focus { - outline: none; - color: var(--color-primary); - } -} - -.ld-switch-btn.popover-control--active { - /* class added to the control button when the dropdown is visible */ - color: var(--color-primary); -} - -.ld-switch-btn__icon-wrapper { - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - display: flex; - justify-content: center; - align-items: center; - opacity: 0; - transform: translateY(100%) rotate(35deg) scale(0.5); -} - -.ld-switch-btn__icon-wrapper--in { - opacity: 1; - transform: translateY(0) rotate(0) scale(1); -} - -.ld-switch-btn__icon-wrapper--out { - opacity: 0; - transform: translateY(-100%) rotate(-35deg) scale(0.5); -} - - -.ld-switch-btn__icon { - margin: auto; - --size: 20px; /* icon size */ -} - -.popover.ld-switch-popover { - --popover-width: 250px; -} - -.ld-switch-popover__option { - user-select: none; - - &:hover { - cursor: pointer; - opacity: 0.85; - } - - &:focus { - outline: none; - - figure { - box-shadow: 0 0 0 1px var(--color-bg-light), 0 0 0 3px var(--color-contrast-higher); - } - } - - &[aria-selected=true] { - color: var(--color-primary); - - figure { - box-shadow: 0 0 0 1px var(--color-bg-light), 0 0 0 3px currentColor; - } - } -} diff --git a/apps/web-shared/src/styles/components/link-card.scss b/apps/web-shared/src/styles/components/link-card.scss deleted file mode 100644 index dad4f98..0000000 --- a/apps/web-shared/src/styles/components/link-card.scss +++ /dev/null @@ -1,56 +0,0 @@ -@use '../base' as *; - -/* -------------------------------- - -File#: _1_link-card -Title: Link Card -Descr: Link card for app UI -Usage: codyhouse.co/license - --------------------------------- */ - -.link-card { - text-decoration: none; - color: inherit; - box-shadow: var(--inner-glow), var(--shadow-xs); - - &:hover { - box-shadow: var(--inner-glow), var(--shadow-sm); - } -} - -.link-card__footer { - position: relative; - overflow: hidden; - height: 60px; - - > * { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; - } - - > *:last-child { - transform: translateY(100%); - opacity: 0; - } -} - -.link-card:hover { - .link-card__footer { - > *:first-child { - transform: translateY(-100%); - opacity: 0; - } - - > *:last-child { - transform: translateY(0); - opacity: 1; - } - } -} diff --git a/apps/web-shared/src/styles/components/list.scss b/apps/web-shared/src/styles/components/list.scss deleted file mode 100644 index df600a3..0000000 --- a/apps/web-shared/src/styles/components/list.scss +++ /dev/null @@ -1,195 +0,0 @@ -@use '../base' as *; - -/* -------------------------------- - -File#: _1_list -Title: List -Descr: Custom list component -Usage: codyhouse.co/license - --------------------------------- */ - -:root { - --list-space-y: 0.375em; // vertical gaps - --list-offset: 1em; // sublist horizontal offset - --list-line-height-multiplier: 1; // line-height multiplier -} - -.list, .text-component .list { - padding-left: 0; - list-style: none; - - ul, ol { - list-style: none; - margin: 0; // reset - margin-top: calc((var(--list-space-y) / 2) * var(--text-space-y-multiplier, 1)); - padding-top: calc((var(--list-space-y) / 2) * var(--text-space-y-multiplier, 1)); - padding-left: var(--list-offset); - } - - li { - padding-bottom: calc((var(--list-space-y) / 2) * var(--text-space-y-multiplier, 1)); - margin-bottom: calc((var(--list-space-y) / 2) * var(--text-space-y-multiplier, 1)); - line-height: calc(var(--body-line-height) * var(--list-line-height-multiplier)); - } - - > li:last-child, ul > li:last-child, ol > li:last-child { - margin-bottom: 0; - } - - &:not(.list--border) > li:last-child, ul > li:last-child, ol > li:last-child { - padding-bottom: 0; - } -} - -/* #region (ul + ol) */ -.list--ul, .text-component .list--ul, -.list--ol, .text-component .list--ol { - --list-offset: calc(var(--list-bullet-size) + var(--list-bullet-margin-right)); - - ul, ol { - padding-left: 0; - } - - li { - @supports (--css: variables) { - padding-left: var(--list-offset) !important; - } - } - - li::before { - display: inline-flex; - justify-content: center; - align-items: center; - vertical-align: middle; - position: relative; - top: -0.1em; - - @supports (--css: variables) { - width: var(--list-bullet-size) !important; - height: var(--list-bullet-size) !important; - margin-left: calc(var(--list-bullet-size) * -1) !important; - left: calc(var(--list-bullet-margin-right) * -1) !important; - } - } -} - -// unordered list -.list--ul, .text-component .list--ul { - --list-bullet-size: 7px; // dot width and height - --list-bullet-margin-right: 12px; // gap between bullet and content - - > li { - padding-left: 19px; // IE fallback - } - - > li::before { // bullet - content: ''; - border-radius: 50%; - color: var(--color-contrast-lower); // bullet color - background-color: currentColor; - - // IE fallback - width: 7px; - height: 7px; - margin-left: -7px; - left: -12px; - // end - IE fallback - } - - ul li::before { - background-color: transparent; - box-shadow: inset 0 0 0 2px currentColor; - } -} - -// ordered list -.list--ol, .text-component .list--ol { - --list-bullet-size: 26px; // ⚠️ use px or rem units - circle width and height - --list-bullet-margin-right: 6px; // ⚠️ use px or rem units - gap between circle and content - --list-bullet-font-size: 14px; // ⚠️ use px or rem units - bullet font size - counter-reset: list-items; - - > li { - counter-increment: list-items; - padding-left: 32px; // IE fallback - } - - ol { - counter-reset: list-items; - } - - > li::before { - content: counter(list-items); - font-size: var(--list-bullet-font-size, 14px); - background-color: var(--color-contrast-lower); - color: var(--color-contrast-high); - line-height: 1; - border-radius: 50%; - - // IE fallback - width: 26px; - height: 26px; - margin-left: -26px; - left: -6px; - // end - IE fallback - } - - ol > li::before { - background-color: transparent; - box-shadow: inset 0 0 0 2px var(--color-contrast-lower); - } -} -/* #endregion */ - -/* #region (border) */ -.list--border, .text-component .list--border { // show border divider among list items - li:not(:last-child) { - border-bottom: 1px solid var(--color-contrast-lower); - } - - ul, ol { - border-top: 1px solid var(--color-contrast-lower); - } -} -/* #endregion */ - -/* #region (icons) */ -.list--icons, .text-component .list--icons { // use icons as bullet points - --list-bullet-size: 24px; - --list-bullet-margin-right: 8px; // gap between icon and text - --list-offset: calc(var(--list-bullet-size) + var(--list-bullet-margin-right)); - - ul, ol { - padding-left: 32px; // IE fallback - - @supports (--css: variables) { - padding-left: var(--list-offset); - } - } -} - -.list__icon { - position: relative; - - // IE fallback - width: 24px; - height: 24px; - margin-right: 8px; - - &:not(.top-0) { - top: calc((1em * var(--body-line-height) - 24px) / 2); - } - // end - IE fallback - - @supports (--css: variables) { - width: var(--list-bullet-size); - height: var(--list-bullet-size); - margin-right: var(--list-bullet-margin-right); - - &:not(.top-0) { - top: calc((1em * var(--body-line-height) * var(--list-line-height-multiplier) - var(--list-bullet-size)) / 2); - } - } -} -/* #endregion */ diff --git a/apps/web-shared/src/styles/components/menu-bar.scss b/apps/web-shared/src/styles/components/menu-bar.scss deleted file mode 100644 index 3f70fbe..0000000 --- a/apps/web-shared/src/styles/components/menu-bar.scss +++ /dev/null @@ -1,139 +0,0 @@ -@use '../base' as *; -@use 'menu.scss' as *; - -/* -------------------------------- - -File#: _2_menu-bar -Title: Menu Bar -Descr: Application menu with a list of common actions that users can perform -Usage: codyhouse.co/license - --------------------------------- */ - -:root { - --menu-bar-button-size: 2.5em; // size of the menu buttons - --menu-bar-icon-size: 1em; // size of the icons inside the buttons - --menu-bar-horizontal-gap: var(--space-xxs); // horizontal gap between buttons - --menu-bar-vertical-gap: 4px; // vertical gap between buttons and labels (tooltips) - --menu-bar-label-size: var(--text-xs); // label font size -} - -.menu-bar { - list-style: none; - display: inline-flex; - align-items: center; -} - -.menu-bar__item { // menu button - position: relative; - display: inline-block; // flex fallback - display: flex; - align-items: center; - justify-content: center; - height: var(--menu-bar-button-size); - width: var(--menu-bar-button-size); - border-radius: 50%; - cursor: pointer; - - &:not(:last-child) { - margin-right: var(--menu-bar-horizontal-gap); - } - - &:hover, - &.menu-control--active { - background-color: alpha(var(--color-contrast-higher), 0.1); - - > .menu-bar__icon { - color: var(--color-contrast-higher); - } - - > .menu-bar__label { // show label - clip: auto; - clip-path: none; - height: auto; - width: auto; - } - } - - &:focus { - outline: none; - background-color: alpha(var(--color-primary), 0.1); - } - - &:active { - background-color: var(--color-contrast-low); - } - - &:focus:active { - background-color: alpha(var(--color-primary), 0.2); - } -} - -.menu-bar__item--trigger { // button used to show hidden actions - visibile only if menu = collapsed - display: none; -} - -.menu-bar__icon { - display: block; - color: var(--color-contrast-high); - font-size: var(--menu-bar-icon-size); // set icon size -} - -.menu-bar__label { // label visible on :hover - // hide - position: absolute; - z-index: var(--z-index-popover, 5); - clip: rect(1px, 1px, 1px, 1px); - clip-path: inset(50%); - width: 1px; - height: 1px; - overflow: hidden; - white-space: nowrap; - // style - top: 100%; - left: 50%; - transform: translateX(-50%) translateY(var(--menu-bar-vertical-gap)); - padding: var(--space-xxs) var(--space-xs); - color: var(--color-bg); - background-color: alpha(var(--color-contrast-higher), 0.95); - border-radius: var(--radius-md); - font-size: var(--menu-bar-label-size); - @include fontSmooth; - pointer-events: none; - user-select: none; -} - -.menu-bar--collapsed { // mobile layout style - .menu-bar__item--hide { // hide buttons - display: none; - } - - .menu-bar__item--trigger { // show submenu trigger - display: inline-block; // flex fallback - display: flex; - } -} - -// detect when the menu needs to switch from the mobile layout to an expanded one - used in JS -.js { - .menu-bar { - opacity: 0; // hide menu bar while it is initialized in JS - - &::before { - display: none; - content: 'collapsed'; - } - } - - .menu-bar--loaded { - opacity: 1; - } - - @each $breakpoint, $value in $breakpoints { - .menu-bar--expanded\@#{$breakpoint}::before { - @include breakpoint(#{$breakpoint}) { - content: 'expanded'; - } - } - } -} diff --git a/apps/web-shared/src/styles/components/menu.scss b/apps/web-shared/src/styles/components/menu.scss deleted file mode 100644 index 8e211a5..0000000 --- a/apps/web-shared/src/styles/components/menu.scss +++ /dev/null @@ -1,81 +0,0 @@ -@use '../base' as *; - -/* -------------------------------- - -File#: _1_menu -Title: Menu -Descr: Application menu that provides access to a set of functionalities -Usage: codyhouse.co/license - --------------------------------- */ - -.menu { - --menu-vertical-gap: 5px; // vertical gap between the Menu element and its control - --menu-item-padding: var(--space-xxxs) var(--space-xs); - list-style: none; - position: fixed; // top/left position set in JS - background-color: var(--color-bg-light); - //padding: var(--space-xxs) 0; - border-radius: var(--radius-md); - z-index: var(--z-index-popover, 5); - user-select: none; - margin-top: var(--menu-vertical-gap); - margin-bottom: var(--menu-vertical-gap); - overflow: auto; - - - // use rem units - @include spaceUnit(1rem); - @include textUnit(1rem); - - visibility: hidden; - opacity: 0; -} - -.menu--is-visible { - visibility: visible; - opacity: 1; -} - -.menu--overlay { - z-index: var(--z-index-overlay, 15); -} - -.menu__content { - display: block; // fallback - display: flex; - align-items: center; - text-decoration: none; // reset link style - padding: var(--menu-item-padding); - color: var(--color-contrast-high); - cursor: pointer; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - - &:hover { - background-color: alpha(var(--color-contrast-higher), 0.075); - } - - &:focus { - outline: none; - background-color: alpha(var(--color-primary), 0.15); - } -} - -.menu__label { - padding: var(--menu-item-padding); - font-size: var(--text-sm); - color: var(--color-contrast-medium); -} - -.menu__separator { - height: 1px; - background-color: var(--color-contrast-lower); - margin: var(--menu-item-padding); -} - -.menu__icon { - color: alpha(var(--color-contrast-higher), 0.5); - margin-right: var(--space-xxs); -} diff --git a/apps/web-shared/src/styles/components/modal.scss b/apps/web-shared/src/styles/components/modal.scss deleted file mode 100644 index 1beec76..0000000 --- a/apps/web-shared/src/styles/components/modal.scss +++ /dev/null @@ -1,105 +0,0 @@ -@use '../base' as *; - -/* -------------------------------- - -File#: _1_modal-window -Title: Modal Window -Descr: A modal dialog used to display critical information -Usage: codyhouse.co/license - --------------------------------- */ - -.modal { - position: fixed; - z-index: var(--z-index-overlay, 15); - width: 100%; - height: 100%; - left: 0; - top: 0; - opacity: 0; - visibility: hidden; - - &:not(.modal--is-visible) { - pointer-events: none; - background-color: transparent; - } -} - -.modal--is-visible { - opacity: 1; - visibility: visible; -} - -// close button -.modal__close-btn { - display: flex; - flex-shrink: 0; - border-radius: 50%; - cursor: pointer; - - .icon { - display: block; - margin: auto; - } -} - -.modal__close-btn--outer { // close button - outside the modal__content - width: 48px; - height: 48px; - position: fixed; - top: var(--space-sm); - right: var(--space-sm); - z-index: var(--z-index-fixed-element, 10); - background-color: alpha(var(--color-black), 0.9); - - .icon { - color: var(--color-white); // icon color - } - - &:hover { - background-color: alpha(var(--color-black), 1); - - .icon { - transform: scale(1.1); - } - } -} - -.modal__close-btn--inner { // close button - inside the modal__content - width: 2em; - height: 2em; - background-color: var(--color-bg-light); - box-shadow: var(--inner-glow), var(--shadow-sm); - - .icon { - color: inherit; // icon color - } - - &:hover { - background-color: var(--color-bg-lighter); - box-shadow: var(--inner-glow), var(--shadow-md); - } -} - -// load content - optional -.modal--is-loading { - .modal__content { - visibility: hidden; - } - - .modal__loader { - display: flex; - } -} - -.modal__loader { // loader icon - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - justify-content: center; - align-items: center; - display: none; - pointer-events: none; -} diff --git a/apps/web-shared/src/styles/components/pagination.scss b/apps/web-shared/src/styles/components/pagination.scss deleted file mode 100644 index 0a09210..0000000 --- a/apps/web-shared/src/styles/components/pagination.scss +++ /dev/null @@ -1,77 +0,0 @@ -@use '../base' as *; - -/* -------------------------------- - -File#: _1_pagination -Title: Pagination -Descr: Component used to navigate through pages of related content -Usage: codyhouse.co/license - --------------------------------- */ - -.pagination {} - -.pagination__list > li { - display: inline-block; // flex fallback -} - -// --split - push first + last item to sides -.pagination--split { - .pagination__list { - width: 100%; - - > *:first-child { - margin-right: auto; - } - - > *:last-child { - margin-left: auto; - } - } -} - -.pagination__item { - display: inline-block; // flex fallback - display: inline-flex; - height: 100%; - align-items: center; - padding: var(--space-xs) calc(1.355 * var(--space-xs)); - - white-space: nowrap; - line-height: 1; - border-radius: var(--radius-md); - - text-decoration: none; - color: var(--color-contrast-high); - @include fontSmooth; - - will-change: transform; - - &:hover:not(.pagination__item--selected):not(.pagination__item--ellipsis) { - background-color: alpha(var(--color-contrast-higher), 0.1); - } -} - -.pagination__item--selected { - background-color: var(--color-contrast-higher); - color: var(--color-bg); - box-shadow: var(--shadow-sm); -} - -.pagination__item--disabled { - opacity: 0.5; - pointer-events: none; -} - -// --jumper -.pagination__jumper { - .form-control { - width: 3em; - margin-right: var(--space-xs); - } - - em { - flex-shrink: 0; - white-space: nowrap; - } -} diff --git a/apps/web-shared/src/styles/components/popover.scss b/apps/web-shared/src/styles/components/popover.scss deleted file mode 100644 index 7f423a0..0000000 --- a/apps/web-shared/src/styles/components/popover.scss +++ /dev/null @@ -1,38 +0,0 @@ -@use '../base'as *; - -/* -------------------------------- - -File#: _1_popover -Title: Popover -Descr: A pop-up box controlled by a trigger element -Usage: codyhouse.co/license - --------------------------------- */ -:root { - --popover-width: 250px; - --popover-control-gap: 4px; // ⚠️ use px units - vertical gap between the popover and its control - --popover-viewport-gap: 20px; // ⚠️ use px units - vertical gap between the popover and the viewport - visible if popover height > viewport height - --popover-transition-duration: 0.2s; -} - -.popover { - position: fixed; // top/left position set in JS - width: var(--popover-width); - z-index: var(--z-index-popover, 5); - margin-top: var(--popover-control-gap); - margin-bottom: var(--popover-control-gap); - overflow: auto; - -webkit-overflow-scrolling: touch; - - visibility: hidden; - opacity: 0; -} - -.popover--is-visible { - visibility: visible; - opacity: 1; -} - -.popover-control--active { - // class added to the trigger when popover is visible -} diff --git a/apps/web-shared/src/styles/components/pre-header.scss b/apps/web-shared/src/styles/components/pre-header.scss deleted file mode 100644 index 1e803e7..0000000 --- a/apps/web-shared/src/styles/components/pre-header.scss +++ /dev/null @@ -1,46 +0,0 @@ -@use '../base' as *; - -/* -------------------------------- - -File#: _1_pre-header -Title: Pre-header -Descr: Pre-header (top) banner -Usage: codyhouse.co/license - --------------------------------- */ - -.pre-header { - display: block; - background-color: var(--color-contrast-higher); - color: var(--color-bg); - @include fontSmooth; -} - -.pre-header--is-hidden { - display: none; -} - -.pre-header__close-btn { - position: absolute; - right: 0; - top: calc(50% - 0.5em); - will-change: transform; - - &:hover { - transform: scale(1.1); - } - - .icon { - display: block; - } -} - -// --link -a.pre-header { - text-decoration: none; - - &:hover { - text-decoration: underline; - background-color: var(--color-contrast-high); - } -} diff --git a/apps/web-shared/src/styles/components/radios-checkboxes.scss b/apps/web-shared/src/styles/components/radios-checkboxes.scss deleted file mode 100644 index c4009f9..0000000 --- a/apps/web-shared/src/styles/components/radios-checkboxes.scss +++ /dev/null @@ -1,134 +0,0 @@ -@use '../base' as *; - -/* -------------------------------- - -File#: _1_radios-checkboxes -Title: Radios and Checkboxes -Descr: Custom radio and checkbox buttons -Usage: codyhouse.co/license - --------------------------------- */ - -:root { - // radios and checkboxes - --checkbox-radio-size: 18px; - --checkbox-radio-gap: var(--space-xxs); // gap between button and label - --checkbox-radio-border-width: 1px; - --checkbox-radio-line-height: var(--body-line-height); - - // radio buttons - --radio-marker-size: 8px; - - // checkboxes - --checkbox-marker-size: 12px; - --checkbox-radius: 4px; -} - -// hide native buttons -.radio, -.checkbox { - position: absolute; - padding: 0; - margin: 0; - margin-top: calc((1em * var(--checkbox-radio-line-height) - var(--checkbox-radio-size)) / 2); - opacity: 0; - height: var(--checkbox-radio-size); - width: var(--checkbox-radio-size); - pointer-events: none; -} - -// label -.radio + label, -.checkbox + label { - display: inline-block; - line-height: var(--checkbox-radio-line-height); - user-select: none; - cursor: pointer; - padding-left: calc(var(--checkbox-radio-size) + var(--checkbox-radio-gap)); -} - -// custom inputs - basic style -.radio + label::before, -.checkbox + label::before { - content: ''; - box-sizing: border-box; - display: inline-block; - position: relative; - vertical-align: middle; - top: -0.1em; - margin-left: calc(-1 * (var(--checkbox-radio-size) + var(--checkbox-radio-gap))); - flex-shrink: 0; - width: var(--checkbox-radio-size); - height: var(--checkbox-radio-size); - background-color: var(--color-bg); - border-width: var(--checkbox-radio-border-width); - border-color: alpha(var(--color-contrast-low), 0.65); - border-style: solid; - box-shadow: var(--shadow-xs); - background-repeat: no-repeat; - background-position: center; - margin-right: var(--checkbox-radio-gap); -} - -// :hover -.radio:not(:checked):not(:focus) + label:hover::before, -.checkbox:not(:checked):not(:focus) + label:hover::before { - border-color: alpha(var(--color-contrast-low), 1); -} - -// radio only style -.radio + label::before { - border-radius: 50%; -} - -// checkbox only style -.checkbox + label::before { - border-radius: var(--checkbox-radius); -} - -// :checked -.radio:checked + label::before, -.checkbox:checked + label::before { - background-color: var(--color-primary); - box-shadow: var(--shadow-xs); - border-color: var(--color-primary); -} - -// radio button icon -.radio:checked + label::before { - background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg class='nc-icon-wrapper' fill='%23ffffff'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23ffffff'%3E%3C/circle%3E%3C/g%3E%3C/svg%3E"); - background-size: var(--radio-marker-size); -} - -// checkbox button icon -.checkbox:checked + label::before { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolyline points='1 6.5 4 9.5 11 2.5' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E"); - background-size: var(--checkbox-marker-size); -} - -// :focus -.radio:checked:active + label::before, -.checkbox:checked:active + label::before, -.radio:focus + label::before, -.checkbox:focus + label::before { - border-color: var(--color-primary); - box-shadow: 0 0 0 3px alpha(var(--color-primary), 0.2); -} - -// --radio--bg, --checkbox--bg -> variation with background color -.radio--bg + label, .checkbox--bg + label { - padding: var(--space-xxxxs) var(--space-xxxs); - padding-left: calc(var(--checkbox-radio-size) + var(--checkbox-radio-gap) + var(--space-xxxs)); - border-radius: var(--radius-md); -} - -.radio--bg + label:hover, .checkbox--bg + label:hover { - background-color: alpha(var(--color-contrast-higher), 0.075); -} - -.radio--bg:active + label, -.checkbox--bg:active + label, -.radio--bg:focus + label, -.checkbox--bg:focus + label { - background-color: alpha(var(--color-primary), 0.1); -} diff --git a/apps/web-shared/src/styles/components/responsive-sidebar.scss b/apps/web-shared/src/styles/components/responsive-sidebar.scss deleted file mode 100644 index 71c86da..0000000 --- a/apps/web-shared/src/styles/components/responsive-sidebar.scss +++ /dev/null @@ -1,139 +0,0 @@ -@use '../base' as *; - -/* -------------------------------- - -File#: _1_responsive-sidebar -Title: Responsive Sidebar -Descr: Responsive sidebar container -Usage: codyhouse.co/license - --------------------------------- */ - -/* mobile version only (--default) 👇 */ -.sidebar:not(.sidebar--static) { - position: fixed; - top: 0; - left: 0; - z-index: var(--z-index-fixed-element, 10); - width: 100%; - height: 100%; - visibility: hidden; - transition: visibility 0s 0.3s; - - &::after { /* overlay layer */ - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: alpha(var(--color-black), 0); - transition: background-color .3s; - z-index: 1; - } - - .sidebar__panel { /* content */ - position: absolute; - top: 0; - left: 0; - z-index: 2; - width: 100%; - max-width: 380px; - height: 100%; - overflow: auto; - -webkit-overflow-scrolling: touch; - background-color: var(--color-bg); - transform: translateX(-100%); - transition: box-shadow 0.3s,transform 0.3s; - } - - &.sidebar--right-on-mobile { - .sidebar__panel { - left: auto; - right: 0; - transform: translateX(100%); - } - } - - &.sidebar--is-visible { - visibility: visible; - transition: none; - - &::after { - background-color: alpha(var(--color-black), 0.85); - } - - .sidebar__panel { - transform: translateX(0); - box-shadow: var(--shadow-md); - } - } -} -/* end mobile version */ - -.sidebar__header { - display: flex; - align-items: center; - justify-content: space-between; - position: sticky; - top: 0; -} - -.sidebar__close-btn { - --size: 32px; - width: var(--size); - height: var(--size); - display: flex; - border-radius: 50%; - background-color: var(--color-bg-light); - box-shadow: var(--inner-glow), var(--shadow-sm); - transition: .2s; - flex-shrink: 0; - - .icon { - display: block; - margin: auto; - } - - &:hover { - background-color: var(--color-bg-lighter); - box-shadow: var(--inner-glow), var(--shadow-md); - } -} - -/* desktop version only (--static) 👇 */ -.sidebar--static { - flex-shrink: 0; - flex-grow: 1; - - .sidebar__header { - display: none; - } -} - -.sidebar--sticky-on-desktop { - position: sticky; - top: var(--space-sm); - max-height: calc(100vh - var(--space-sm)); - overflow: auto; - -webkit-overflow-scrolling: touch; -} -/* end desktop version */ - -.sidebar--loaded { - opacity: 1; -} - - -.sidebar--static::before { - content: 'static'; -} - -@each $breakpoint, $value in $breakpoints { - .sidebar--static\@#{$breakpoint}::before { - content: 'mobile'; - @include breakpoint(#{$breakpoint}) { - content: 'static'; - } - } -}
\ No newline at end of file diff --git a/apps/web-shared/src/styles/components/select-autocomplete.scss b/apps/web-shared/src/styles/components/select-autocomplete.scss deleted file mode 100644 index d5360ff..0000000 --- a/apps/web-shared/src/styles/components/select-autocomplete.scss +++ /dev/null @@ -1,176 +0,0 @@ -@use '../base' as *; -@use 'autocomplete.scss' as *; - -/* -------------------------------- - -File#: _3_select-autocomplete -Title: Select Autocomplete -Descr: Selection dropdown with autocomplete -Usage: codyhouse.co/license - --------------------------------- */ - -.select-auto { - &.autocomplete { - --autocomplete-dropdown-vertical-gap: 4px; // gap between input and results list - --autocomplete-dropdown-max-height: 250px; - --autocomplete-dropdown-scrollbar-width: 6px; // custom scrollbar - webkit browsers - } -} - -// input -.select-auto__input-wrapper { - --input-btn-size: 1.25em; // btn/icon size - --input-btn-icon-size: 16px; // btn/icon size - --input-btn-text-gap: var(--space-xxs); // gap between button/icon and text - - position: relative; - background: var(--color-bg-dark); - line-height: 1.2; - box-shadow: inset 0 0 0 1px var(--color-contrast-lower); - - &.multiple { - display: flex; - flex-direction: row; - flex-flow: wrap; - - .chip { - white-space: nowrap; - margin-right: 1px; - } - - input[type="text"] { - width: auto; - } - - @media (max-width: 756px) { - flex-flow: column !important; - - &.has-selection { - input[type="text"] { - margin-top: 5px; - } - - .chip { - justify-content: space-between; - - .chip__btn { - margin-right: 0 !important;; - } - } - } - } - } - - &::placeholder { - opacity: 1; - color: var(--color-contrast-low); - } - - &:focus-within, - .focus { - background: var(--color-bg); - box-shadow: inset 0 0 0 1px alpha(var(--color-contrast-lower), 0), 0px 0px 0px 1px var(--color-primary); - outline: none; - } - - .form-control { - width: 100%; - height: 100%; - padding-right: calc(var(--form-control-padding-x) + var(--input-btn-size) + var(--input-btn-text-gap)); - } -} - - -.select-auto__input-icon-wrapper { - width: var(--input-btn-size); - height: var(--input-btn-size); - - position: absolute; - bottom: calc(var(--input-btn-size) / 3); - right: var(--form-control-padding-x); - display: flex; - pointer-events: none; - - .icon { - display: block; - margin: auto; - width: var(--input-btn-icon-size, 16px); - height: var(--input-btn-icon-size, 16px); - } -} - -.select-auto__input-btn { - display: none; - justify-content: center; - align-items: center; - width: inherit; - height: inherit; - pointer-events: auto; - cursor: pointer; - color: var(--color-contrast-medium); // icon color - - &:hover { - color: var(--color-contrast-high); - } -} - -.select-auto--selection-done { - .select-auto__input-icon-wrapper > .icon { - display: none; - } - - .select-auto__input-btn { - display: flex; - } -} - -// dropdown -.select-auto__results { - // reset spacing and typography - @include spaceUnit(1rem); - @include textUnit(1rem); -} - -// single result item -.select-auto__option { - position: relative; - cursor: pointer; - - &:hover { - background-color: alpha(var(--color-contrast-higher), 0.05); - } - - &:focus, - &.focus { - outline: none; - background-color: alpha(var(--color-primary), 0.12); - } - - &.select-auto__option--selected { - background-color: var(--color-primary); - color: var(--color-white); - padding-right: calc(1em + var(--space-sm)); - @include fontSmooth; - - &:focus, - .focus { - background-color: var(--color-primary-dark); - } - - &::after { - content: ''; - position: absolute; - right: var(--space-sm); - top: calc(50% - 0.5em); - height: 1em; - width: 1em; - background-color: currentColor; - mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolyline stroke-width='2' stroke='%23ffffff' fill='none' stroke-linecap='round' stroke-linejoin='round' points='1,9 5,13 15,3 '/%3E%3C/svg%3E"); - } - } -} - -.select-auto__group-title, .select-auto__no-results-msg { - outline: none; -} diff --git a/apps/web-shared/src/styles/components/side-navigation-v4.scss b/apps/web-shared/src/styles/components/side-navigation-v4.scss deleted file mode 100644 index c2c13d2..0000000 --- a/apps/web-shared/src/styles/components/side-navigation-v4.scss +++ /dev/null @@ -1,237 +0,0 @@ -@use '../base' as *; -@use 'responsive-sidebar.scss' as *; - -/* -------------------------------- - -File#: _2_side-navigation-v4 -Title: Side Navigation v4 -Descr: Main, side navigation -Usage: codyhouse.co/license - --------------------------------- */ - -.sidenav-v4 { - --sidenav-v4-icon-size: 20px; - --sidenav-v4-icon-margin-right: var(--space-xxs); -} - -.sidenav-v4__item { - position: relative; -} - -.sidenav-v4__link, -.sidenav-v4__sub-link, -.sidenav-v4__separator { - padding: var(--space-sm); -} - -.sidenav-v4__link, .sidenav-v4__sub-link { - display: flex; - align-items: center; - - width: 100%; - border-radius: var(--radius-md); - - text-decoration: none; - color: inherit; - line-height: 1; - font-size: var(--text-md); - - transition: .2s; - - &:hover { - color: var(--color-primary); - background-color: alpha(var(--color-contrast-higher), 0.075); - } - - &[aria-current="page"] { - color: var(--color-primary); - } -} - -.sidenav-v4__sub-link { - position: relative; - color: var(--color-contrast-medium); - - /* dot indicator */ - &::before { - content: ''; - display: block; - --size: 6px; - width: var(--size); - height: var(--size); - background: currentColor; - border-radius: 50%; - margin-left: calc(var(--sidenav-v4-icon-size)/2 - var(--size)/2); - margin-right: calc(var(--sidenav-v4-icon-size)/2 - var(--size)/2 + var(--sidenav-v4-icon-margin-right)); - - opacity: 0; /* visible only if current */ - } - - &[aria-current="page"] { - &::before { /* show dot indicator */ - opacity: 1; - } - } -} - -.sidenav-v4__notification-marker { - margin-left: auto; - background-color: var(--color-accent); - border-radius: var(--radius-md); - - height: 16px; - line-height: 16px; - padding: 0 4px; - color: var(--color-white); - font-size: 12px; - - /* hide - visible only on desktop */ - display: none; -} - -/* label icon */ -.sidenav-v4__icon { - --size: var(--sidenav-v4-icon-size); - margin-right: var(--sidenav-v4-icon-margin-right); -} - -/* arrow icon - visible on mobile if item is expandable */ -.sidenav-v4__arrow-icon { - --size: 20px; - - .icon__group { - will-change: transform; - transform-origin: 50% 50%; - transform: rotate(-90deg); - transition: transform .3s var(--ease-out); - - > * { - transform-origin: 50% 50%; - stroke-dasharray: 20; - stroke-dashoffset: 0; - transform: translateY(0px); - transition: transform .3s, stroke-dashoffset .3s; - transition-timing-function: var(--ease-out); - } - - .sidenav-v4__item--collapsed & { - transform: rotate(0deg); - - > * { - transform: translateY(4px); - } - - > *:first-child { - stroke-dashoffset: 10.15; - } - - > *:last-child { - stroke-dashoffset: 10.15; - } - } - } - - /* hide icon for links - show only for buttons created in JS */ - .sidenav-v4__link--href & { - display: none; - } -} - -/* current item */ -.sidenav-v4__item--current { - .sidenav-v4__sub-list { - display: block; /* show sublist */ - } -} - -/* separator */ -.sidenav-v4__separator { - span { - display: block; - width: var(--sidenav-v4-icon-size); - height: 1px; - background-color: var(--color-contrast-lower); - } -} - -/* mobile only */ -@include breakpoint(md, "not all") { - .sidenav-v4__item--collapsed { - .sidenav-v4__sub-list { - display: none; - } - } - - .sidenav-v4__link--href { - display: none; /* hide link -> show button */ - } -} - -/* desktop */ -@include breakpoint(md) { - .sidenav-v4__sub-list { - display: none; - } - - .sidenav-v4__link, - .sidenav-v4__sub-link, - .sidenav-v4__separator { - padding: var(--space-xs); - } - - .sidenav-v4__link, - .sidenav-v4__sub-link { - font-size: var(--text-sm); - } - - .sidenav-v4__link--btn { - display: none; /* hide button -> show link */ - } - - /* tooltip */ - .sidenav-v4__item:not(.sidenav-v4__item--current) { - .sidenav-v4__sub-list { - width: 220px; - position: absolute; - z-index: var(--z-index-overlay); - left: 100%; - top: 0; - - background-color: var(--color-bg-light); - box-shadow: var(--inner-glow), var(--shadow-md); - border-radius: var(--radius-md); - - overflow: hidden; - } - - .sidenav-v4__sub-link { - border-radius: 0; - color: var(--color-contrast-high); - - &::before { - display: none; /* remove dot indicator */ - } - - &:hover { - color: var(--color-primary); - } - } - - &.sidenav-v4__item--hover, &:focus-within { - .sidenav-v4__sub-list { - display: block; - } - } - - &:hover .sidenav-v4__link { /* highlight main link if tooltip is visible */ - color: var(--color-primary); - background-color: alpha(var(--color-contrast-higher), 0.075); - } - } - - /* notification marker */ - .sidenav-v4__notification-marker { - display: block; - } -}
\ No newline at end of file diff --git a/apps/web-shared/src/styles/components/tabbed-navigation.scss b/apps/web-shared/src/styles/components/tabbed-navigation.scss deleted file mode 100644 index 4090fca..0000000 --- a/apps/web-shared/src/styles/components/tabbed-navigation.scss +++ /dev/null @@ -1,133 +0,0 @@ -@use '../base' as *; - -/* -------------------------------- - -File#: _1_tabbed-navigation-v2 -Title: Tabbed Navigation v2 -Descr: Tabbed (secondary) navigation -Usage: codyhouse.co/license - --------------------------------- */ - -.tabs-nav-v2 { - display: flex; - flex-wrap: wrap; - - .tab-v2 { - display: inline-block; // flexbox fallback - display: inline-flex; - align-items: center; - } -} - -.tabs-nav-v2__item { - display: inline-block; - padding: var(--space-xxs) var(--space-sm); - color: inherit; - white-space: nowrap; - text-decoration: none; -} - -.tabs-nav-v2__item--selected, -.tabs-nav-v2__item[aria-selected="true"] { - color: var(--color-bg); - background-color: var(--color-contrast-higher); -} - -@include breakpoint(md) { - .tabs-nav-v2 { - .tab-v2 { - margin: 0; - } - } - - .tabs-nav-v2__item { - background-color: transparent; - margin: var(--space-xxs) var(--space-sm); - padding: var(--space-xxxs) var(--space-xxs) !important; - border-radius: var(--radius-md); - - &:hover { - background-color: alpha(var(--color-primary), 0.035); - color: var(--color-primary); - } - } - - .tabs-nav-v2__item--selected, - .tabs-nav-v2__item[aria-selected="true"] { - - background-color: alpha(var(--color-primary), 0.075); - color: var(--color-primary); - position: relative; - - &::after { - content: ''; - position: absolute; - bottom: calc(var(--tabs-nav-border-width) * -1); - left: 0; - width: 100%; - height: var(--tabs-nav-border-width); - background-color: var(--color-bg); - } - - &:hover { - background-color: alpha(var(--color-primary), 0.075); - } - } -} - -:root { - --s-tabs-border-bottom-width: 1px; - --s-tabs-selected-item-border-bottom-width: 1px; -} - -.s-tabs { - position: relative; - - &::after { /* gradient - truncate text */ - content: ''; - position: absolute; - right: -1px; - top: 0; - height: calc(100% - var(--s-tabs-border-bottom-width)); - width: 2em; - pointer-events: none; - z-index: 1; - } -} - -.s-tabs__list { - display: flex; - overflow: auto; - -webkit-overflow-scrolling: auto; - - &::after { /* border bottom */ - content: ''; - position: absolute; - width: 100%; - height: var(--s-tabs-border-bottom-width); - left: 0; - bottom: 0; - background-color: var(--color-contrast-lower); - } -} - -.s-tabs__link { - color: var(--color-contrast-medium); - text-decoration: none; - display: inline-block; - padding: var(--space-xs) var(--space-sm); - white-space: nowrap; - border-bottom: var(--s-tabs-selected-item-border-bottom-width) solid transparent; - z-index: 1; - - &:hover:not(.s-tabs__link--current) { - color: var(--color-contrast-high); - } -} - -.s-tabs__link--current { - position: relative; - color: var(--color-primary); - border-bottom-color: var(--color-primary); -} diff --git a/apps/web-shared/src/styles/components/table.scss b/apps/web-shared/src/styles/components/table.scss deleted file mode 100644 index af8207f..0000000 --- a/apps/web-shared/src/styles/components/table.scss +++ /dev/null @@ -1,147 +0,0 @@ -@use '../base'as *; - -/* -------------------------------- - -File#: _1_table -Title: Table -Descr: Data tables used to organize and display information in rows and columns -Usage: codyhouse.co/license - --------------------------------- */ - -// >>> style affecting all (block + expanded) versions 👇 -.table { - position: relative; - z-index: 1; -} - -// <<< end style affecting all versions - -// >>> block version only (mobile) 👇 -.table:not(.table--expanded) { - border-collapse: separate; - border-spacing: 0 var(--space-md); // row gap - margin-top: calc(-2 * var(--space-md)); // set spacing variable = row gap ☝️ - - .table__header { - // hide table header - but keep it accessible to SR - @include srHide; - } - - .table__row { - .table__cell:first-child { - border-radius: var(--radius-md) var(--radius-md) 0 0; - } - - .table__cell:last-child { - border-radius: 0 0 var(--radius-md) var(--radius-md); - - &::after { - // hide border bottom - display: none; - } - } - } - - .table__cell { - position: relative; - display: flex; - justify-content: space-between; - width: 100%; - text-align: right; - padding: var(--space-md); - background-color: var(--color-bg-light); - - &::after { - // border bottom - content: ''; - position: absolute; - bottom: 0; - left: var(--space-md); - width: calc(100% - (2 * var(--space-md))); - height: 1px; - background-color: var(--color-contrast-lower); - } - } - - .table__label { - // inline labels -> visible when table header is hidden - font-weight: bold; - text-align: left; - color: var(--color-contrast-higher); - margin-right: var(--space-md); - } -} - -// <<< end block version - -// >>> expanded version only (desktop) 👇 -> show standard rows and cols -.table--expanded { - border-bottom: 1px solid var(--color-contrast-lower); // table border bottom - - .table__header { - .table__cell { - // header cell style - position: relative; - z-index: 10; - background-color: var(--color-bg); - border-bottom: 1px solid var(--color-contrast-lower); // header border bottom - font-weight: bold; - color: var(--color-contrast-higher); - } - } - - .table__body { - .table__row { - &:nth-child(odd) { - background-color: alpha(var(--color-bg-dark), 0.85); - } - } - } - - .table__cell { - padding: var(--space-xxxs); - } - - .table__label { - // hide inline labels - display: none; - } - - // --header-sticky - .table__header--sticky { - .table__cell { - // header cell style - position: sticky; - top: 0; - } - } -} - -// <<< end expanded version - -.js { - .table { - opacity: 0; // hide table while it is initialized in JS - } - - .table--loaded { - opacity: 1; - } -} - -// detect when the table needs to switch from the mobile layout to an expanded one - used in JS -[class*="table--expanded"]::before { - display: none; -} - -@each $breakpoint, -$value in $breakpoints { - .table--expanded\@#{$breakpoint}::before { - content: 'collapsed'; - - @include breakpoint(#{$breakpoint}) { - content: 'expanded'; - } - } -} diff --git a/apps/web-shared/src/styles/components/user-menu.scss b/apps/web-shared/src/styles/components/user-menu.scss deleted file mode 100644 index 416655f..0000000 --- a/apps/web-shared/src/styles/components/user-menu.scss +++ /dev/null @@ -1,81 +0,0 @@ -@use '../base' as *; -@use 'menu.scss' as *; - -/* -------------------------------- - -File#: _2_user-menu -Title: User Menu -Descr: A menu controlled by the user profile image -Usage: codyhouse.co/license - --------------------------------- */ - -.user-menu-control { - --profile-figure-size: 40px; - - cursor: pointer; - display: inline-flex; - align-items: center; - text-align: left; - - &:hover { - .user-menu-control__img-wrapper { - opacity: 0.8; - } - - .user-menu__meta-title { - color: var(--color-primary); - } - } - - &:focus, &.menu-control--active { - outline: none; - - .user-menu-control__img-wrapper::after { - opacity: 1; - transform: scale(1); - } - } -} - -.user-menu-control__img-wrapper { - width: var(--profile-figure-size); - height: var(--profile-figure-size); - position: relative; - //transition: opacity 0.2s; - - &::after { - content: ''; - position: absolute; - z-index: -1; - left: -4px; - top: -4px; - width: 100%; - height: 100%; - border-radius: inherit; - width: calc(var(--profile-figure-size) + 8px); - height: calc(var(--profile-figure-size) + 8px); - border: 2px solid var(--color-primary); - pointer-events: none; - - opacity: 0; - transform: scale(0.8); - - //transition: all 0.2s; - } -} - -.user-menu-control__img { - display: block; - width: 100%; - object-fit: cover; - border-radius: inherit; -} - -.user-menu__meta { - //max-width: 100px; -} - -.user-menu__meta-title { - //transition: color 0.2s; -} diff --git a/apps/web-shared/src/styles/components/vanilla-responsive-sidebar.scss b/apps/web-shared/src/styles/components/vanilla-responsive-sidebar.scss deleted file mode 100644 index 735cc1e..0000000 --- a/apps/web-shared/src/styles/components/vanilla-responsive-sidebar.scss +++ /dev/null @@ -1,146 +0,0 @@ -@use '../base' as *; - -/* -------------------------------- - -File#: _1_responsive-sidebar -Title: Responsive Sidebar -Descr: Responsive sidebar container -Usage: codyhouse.co/license - --------------------------------- */ - -/* mobile version only (--default) 👇 */ -.sidebar:not(.sidebar--static) { - position: fixed; - top: 0; - left: 0; - z-index: var(--z-index-fixed-element, 10); - width: 100%; - height: 100%; - visibility: hidden; - transition: visibility 0s 0.3s; - - &::after { /* overlay layer */ - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: alpha(var(--color-black), 0); - transition: background-color .3s; - z-index: 1; - } - - .sidebar__panel { /* content */ - position: absolute; - top: 0; - left: 0; - z-index: 2; - width: 100%; - max-width: 380px; - height: 100%; - overflow: auto; - -webkit-overflow-scrolling: touch; - background-color: var(--color-bg); - transform: translateX(-100%); - transition: box-shadow 0.3s, transform 0.3s; - } - - &.sidebar--right-on-mobile { - .sidebar__panel { - left: auto; - right: 0; - transform: translateX(100%); - } - } - - &.sidebar--is-visible { - visibility: visible; - transition: none; - - &::after { - background-color: alpha(var(--color-black), 0.85); - } - - .sidebar__panel { - transform: translateX(0); - box-shadow: var(--shadow-md); - } - } -} - -/* end mobile version */ - -.sidebar__header { - display: flex; - align-items: center; - justify-content: space-between; - position: sticky; - top: 0; -} - -.sidebar__close-btn { - --size: 32px; - width: var(--size); - height: var(--size); - display: flex; - border-radius: 50%; - background-color: var(--color-bg-light); - box-shadow: var(--inner-glow), var(--shadow-sm); - transition: .2s; - flex-shrink: 0; - - .icon { - display: block; - margin: auto; - } - - &:hover { - background-color: var(--color-bg-lighter); - box-shadow: var(--inner-glow), var(--shadow-md); - } -} - -.sidebar__footer { - background-color: var(--color-bg); -} - -/* desktop version only (--static) 👇 */ -.sidebar--static { - flex-shrink: 0; - flex-grow: 1; - width: 100%; - max-width: 320px; - - .sidebar__header { - display: none; - } - - .sidebar__footer { - background-color: var(--color-bg-dark); - } -} - -.sidebar--sticky-on-desktop { - position: sticky; - top: var(--space-sm); - max-height: calc(100vh - var(--space-sm)); - overflow: auto; - -webkit-overflow-scrolling: touch; -} - -/* end desktop version */ - -.sidebar--static::before { - content: 'static'; -} - -@each $breakpoint, $value in $breakpoints { - .sidebar--static\@#{$breakpoint}::before { - content: 'mobile'; - @include breakpoint(#{$breakpoint}) { - content: 'static'; - } - } -} diff --git a/apps/web-shared/src/styles/custom-style/_buttons.scss b/apps/web-shared/src/styles/custom-style/_buttons.scss deleted file mode 100644 index 2145acc..0000000 --- a/apps/web-shared/src/styles/custom-style/_buttons.scss +++ /dev/null @@ -1,89 +0,0 @@ -@use '../base' as *; - -// -------------------------------- - -// (START) Global editor code https://codyhouse.co/ds/globals/buttons - -// -------------------------------- - -:root { - --btn-font-size: 1rem; - --btn-padding-x: var(--space-xs); - --btn-padding-y: var(--space-xxxs); - --btn-radius: 5px; -} - -.btn { - background: var(--color-bg-dark); - color: var(--color-contrast-higher); - cursor: pointer; - font-family: var(--font-primary); - font-weight: 400; - text-decoration: none; - line-height: 0.8; - @include fontSmooth; - outline: none; - - &:hover { - background: var(--color-bg-darker); - } - - &:focus { - outline: 1px solid var(--color-contrast-lower); - } -} - -// themes -.btn--primary { - background: var(--color-primary); - color: var(--color-white); - - &:hover { - background: var(--color-primary-light); - box-shadow: inset 0px 1px 0px alpha(var(--color-white), 0.15), 0px 1px 2px alpha(var(--color-primary-darker), 0.25), 0px 1px 4px alpha(var(--color-primary-darker), 0.1), 0px 3px 6px -2px alpha(var(--color-primary-darker), 0.25); - } -} - -.btn--subtle { - background: var(--color-bg-lighter); - color: var(--color-contrast-higher); - - &:hover { - background: var(--color-bg-light); - } -} - -.btn--accent { - background: var(--color-accent); - color: var(--color-white); - - &:hover { - background: var(--color-accent-light); - box-shadow: inset 0px 1px 0px alpha(var(--color-white), 0.15), 0px 1px 2px alpha(var(--color-accent-darker), 0.25), 0px 1px 4px alpha(var(--color-accent-darker), 0.1), 0px 3px 6px -2px alpha(var(--color-accent-darker), 0.1); - } -} - -// feedback -.btn--disabled, .btn[disabled], .btn[readonly] { - opacity: 0.6; - cursor: not-allowed; -} - -// size -.btn--sm { - font-size: 0.8rem; -} - -.btn--md { - font-size: 1.2rem; -} - -.btn--lg { - font-size: 1.4rem; -} - -// -------------------------------- - -// (END) Global editor code - -// --------------------------------
\ No newline at end of file diff --git a/apps/web-shared/src/styles/custom-style/_colors.scss b/apps/web-shared/src/styles/custom-style/_colors.scss deleted file mode 100644 index 97b620f..0000000 --- a/apps/web-shared/src/styles/custom-style/_colors.scss +++ /dev/null @@ -1,119 +0,0 @@ -@use '../base' as *; - -// -------------------------------- - -// (START) Global editor code https://codyhouse.co/ds/globals/colors - -// -------------------------------- - -:root, [data-theme="default"] { - // main - @include defineColorHSL(--color-primary-darker, 210, 92%, 32%); - @include defineColorHSL(--color-primary-dark, 210, 92%, 38%); - @include defineColorHSL(--color-primary, 210, 92%, 44%); - @include defineColorHSL(--color-primary-light, 210, 92%, 50%); - @include defineColorHSL(--color-primary-lighter, 210, 92%, 56%); - - @include defineColorHSL(--color-accent-darker, 350, 47%, 30%); - @include defineColorHSL(--color-accent-dark, 350, 47%, 36%); - @include defineColorHSL(--color-accent, 350, 47%, 42%); - @include defineColorHSL(--color-accent-light, 350, 47%, 48%); - @include defineColorHSL(--color-accent-lighter, 350, 47%, 54%); - - @include defineColorHSL(--color-black, 0, 0%, 10%); - @include defineColorHSL(--color-white, 0, 0%, 100%); - - // feedback - @include defineColorHSL(--color-warning-darker, 25, 75%, 60%); - @include defineColorHSL(--color-warning-dark, 25, 75%, 66%); - @include defineColorHSL(--color-warning, 25, 75%, 72%); - @include defineColorHSL(--color-warning-light, 25, 75%, 78%); - @include defineColorHSL(--color-warning-lighter, 25, 75%, 84%); - - @include defineColorHSL(--color-success-darker, 143, 45%, 59%); - @include defineColorHSL(--color-success-dark, 143, 45%, 65%); - @include defineColorHSL(--color-success, 143, 45%, 71%); - @include defineColorHSL(--color-success-light, 143, 45%, 77%); - @include defineColorHSL(--color-success-lighter, 143, 45%, 83%); - - @include defineColorHSL(--color-error-darker, 342, 89%, 38%); - @include defineColorHSL(--color-error-dark, 342, 89%, 43%); - @include defineColorHSL(--color-error, 342, 89%, 48%); - @include defineColorHSL(--color-error-light, 342, 89%, 56%); - @include defineColorHSL(--color-error-lighter, 342, 89%, 62%); - - // background - @include defineColorHSL(--color-bg-darker, 240, 2%, 90%); - @include defineColorHSL(--color-bg-dark, 240, 3%, 94%); - @include defineColorHSL(--color-bg, 0, 0%, 100%); - @include defineColorHSL(--color-bg-light, 240, 3%, 100%); - @include defineColorHSL(--color-bg-lighter, 240, 2%, 100%); - - // color contrasts - @include defineColorHSL(--color-contrast-lower, 240, 1%, 85%); - @include defineColorHSL(--color-contrast-low, 240, 2%, 66%); - @include defineColorHSL(--color-contrast-medium, 230, 2%, 48%); - @include defineColorHSL(--color-contrast-high, 223, 6%, 25%); - @include defineColorHSL(--color-contrast-higher, 225, 14%, 11%); -} - -[data-theme="dark"] { - // main - @include defineColorHSL(--color-primary-darker, 250, 100%, 60%); - @include defineColorHSL(--color-primary-dark, 250, 100%, 64%); - @include defineColorHSL(--color-primary, 250, 100%, 69%); - @include defineColorHSL(--color-primary-light, 250, 100%, 72%); - @include defineColorHSL(--color-primary-lighter, 250, 100%, 76%); - - @include defineColorHSL(--color-accent-darker, 342, 92%, 41%); - @include defineColorHSL(--color-accent-dark, 342, 92%, 47%); - @include defineColorHSL(--color-accent, 342, 92%, 54%); - @include defineColorHSL(--color-accent-light, 342, 92%, 60%); - @include defineColorHSL(--color-accent-lighter, 342, 92%, 65%); - - @include defineColorHSL(--color-black, 230, 13%, 9%); - @include defineColorHSL(--color-white, 0, 0%, 100%); - - // feedback - @include defineColorHSL(--color-warning-darker, 35, 79%, 48%); - @include defineColorHSL(--color-warning-dark, 35, 79%, 56%); - @include defineColorHSL(--color-warning, 35, 79%, 66%); - @include defineColorHSL(--color-warning-light, 35, 79%, 74%); - @include defineColorHSL(--color-warning-lighter, 35, 79%, 82%); - - @include defineColorHSL(--color-success-darker, 170, 78%, 26%); - @include defineColorHSL(--color-success-dark, 170, 78%, 31%); - @include defineColorHSL(--color-success, 170, 78%, 36%); - @include defineColorHSL(--color-success-light, 170, 78%, 42%); - @include defineColorHSL(--color-success-lighter, 170, 78%, 47%); - - @include defineColorHSL(--color-error-darker, 342, 92%, 41%); - @include defineColorHSL(--color-error-dark, 342, 92%, 47%); - @include defineColorHSL(--color-error, 342, 92%, 54%); - @include defineColorHSL(--color-error-light, 342, 92%, 60%); - @include defineColorHSL(--color-error-lighter, 342, 92%, 65%); - - // background - @include defineColorHSL(--color-bg-darker, 232, 7%, 8%); - @include defineColorHSL(--color-bg-dark, 233, 8%, 11%); - @include defineColorHSL(--color-bg, 232, 11%, 15%); - @include defineColorHSL(--color-bg-light, 233, 8%, 19%); - @include defineColorHSL(--color-bg-lighter, 232, 7%, 22%); - - // color contrasts - @include defineColorHSL(--color-contrast-lower, 240, 6%, 26%); - @include defineColorHSL(--color-contrast-low, 240, 3%, 41%); - @include defineColorHSL(--color-contrast-medium, 213, 3%, 57%); - @include defineColorHSL(--color-contrast-high, 240, 5%, 82%); - @include defineColorHSL(--color-contrast-higher, 240, 100%, 99%); - - // font rendering - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -// -------------------------------- - -// (END) Global editor code - -// --------------------------------
\ No newline at end of file diff --git a/apps/web-shared/src/styles/custom-style/_forms.scss b/apps/web-shared/src/styles/custom-style/_forms.scss deleted file mode 100644 index 871e405..0000000 --- a/apps/web-shared/src/styles/custom-style/_forms.scss +++ /dev/null @@ -1,58 +0,0 @@ -@use '../base' as *; - -// -------------------------------- - -// (START) Global editor code https://codyhouse.co/ds/globals/forms - -// -------------------------------- - -:root { - --form-control-font-size: 1rem; - --form-control-padding-x: var(--space-xs); - --form-control-padding-y: var(--space-xxs); - --form-control-radius: 3px; -} - -.form-control { - background: var(--color-bg-dark); - cursor: auto; - font-family: var(--font-primary); - font-weight: 400; - line-height: 1; - @include fontSmooth; - outline: 1px solid var(--color-contrast-high); - - &::placeholder { - opacity: 1; - color: var(--color-contrast-low); - } - - &:focus, &:focus-within { - background: var(--color-bg); - box-shadow: inset 0px 0px 0px 1px alpha(var(--color-contrast-lower), 0), 0px 0px 0px 2px var(--color-primary), 0px 1px 3px alpha(var(--color-black), 0.2); - outline: none; - } -} - -.form-control--disabled, .form-control[disabled], .form-control[readonly] { - opacity: 0.3; - cursor: not-allowed; -} - -.form-control[aria-invalid="true"], .form-control.form-control--error { - outline: 1px solid var(--color-error-dark); - - &:focus, &:focus-within { - box-shadow: inset 0px 0px 0px 1px alpha(var(--color-contrast-lower), 0), 0px 0px 0px 2px var(--color-error), 0px 1px 3px var(--color-error); - } -} - -.form-legend {} - -.form-label {} - -// -------------------------------- - -// (END) Global editor code - -// --------------------------------
\ No newline at end of file diff --git a/apps/web-shared/src/styles/custom-style/_icons.scss b/apps/web-shared/src/styles/custom-style/_icons.scss deleted file mode 100644 index a9fcb46..0000000 --- a/apps/web-shared/src/styles/custom-style/_icons.scss +++ /dev/null @@ -1,19 +0,0 @@ -@use '../base' as *; - -:root { - // size - 👇 uncomment to modify 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 { - // 👇 include the font-family declaration here if you are using an icon font - // font-family: 'fontName'; -}
\ No newline at end of file diff --git a/apps/web-shared/src/styles/custom-style/_shared-styles.scss b/apps/web-shared/src/styles/custom-style/_shared-styles.scss deleted file mode 100644 index 313fc69..0000000 --- a/apps/web-shared/src/styles/custom-style/_shared-styles.scss +++ /dev/null @@ -1,70 +0,0 @@ -@use '../base' as *; - -:root { - // radius - --radius: 0.375em; // border radius base size - // 👇 uncomment to modify default radius values - // --radius-sm: calc(var(--radius)/2); - // --radius-md: var(--radius); - // --radius-lg: calc(var(--radius)*2); - - // box shadow - 👇 uncomment to modify default shadow values - // --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); - // --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); -} - -// -------------------------------- - -// (START) Global editor code https://codyhouse.co/ds/globals/shared-styles - -// -------------------------------- - -.hover\:reduce-opacity { - opacity: 1; - - &:hover { - opacity: 0.8; - } -} - -.hover\:elevate { - box-shadow: var(--shadow-sm); - - &:hover { - box-shadow: var(--shadow-md); - } -} - -// text styles -.link-subtle { - color: inherit; - cursor: pointer; - text-decoration: none; - - &:hover { - color: var(--color-primary); - } -} - -// -------------------------------- - -// (END) Global editor code - -// --------------------------------
\ No newline at end of file diff --git a/apps/web-shared/src/styles/custom-style/_spacing.scss b/apps/web-shared/src/styles/custom-style/_spacing.scss deleted file mode 100644 index d78d897..0000000 --- a/apps/web-shared/src/styles/custom-style/_spacing.scss +++ /dev/null @@ -1,49 +0,0 @@ -@use '../base' as *; - -// -------------------------------- - -// (START) Global editor code https://codyhouse.co/ds/globals/spacing - -// -------------------------------- - -// 👇 uncomment to modify default 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); -// } - -@include breakpoint(md) { - :root, * { - --space-xxxxs: calc(0.1875 * var(--space-unit)); - --space-xxxs: calc(0.375 * var(--space-unit)); - --space-xxs: calc(0.5625 * var(--space-unit)); - --space-xs: calc(0.75 * var(--space-unit)); - --space-sm: calc(1.125 * var(--space-unit)); - --space-md: calc(2 * var(--space-unit)); - --space-lg: calc(3.125 * var(--space-unit)); - --space-xl: calc(5.125 * var(--space-unit)); - --space-xxl: calc(8.25 * var(--space-unit)); - --space-xxxl: calc(13.25 * var(--space-unit)); - --space-xxxxl: calc(21.5 * var(--space-unit)); - } -} - -// -------------------------------- - -// (END) Global editor code - -// --------------------------------
\ No newline at end of file diff --git a/apps/web-shared/src/styles/custom-style/_typography.scss b/apps/web-shared/src/styles/custom-style/_typography.scss deleted file mode 100644 index 7fa98c5..0000000 --- a/apps/web-shared/src/styles/custom-style/_typography.scss +++ /dev/null @@ -1,95 +0,0 @@ -@use '../base' as *; - -// -------------------------------- - -// (START) Global editor code https://codyhouse.co/ds/globals/typography - -// -------------------------------- - -:root { - // font family - --font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - - // font size - --text-base-size: 1rem; // body font-size - --text-scale-ratio: 1.2; // multiplier used to generate the type scale values 👇 - - // line-height - --body-line-height: 1; - --heading-line-height: 1; - - // capital letters - used in combo with the lhCrop mixin - --font-primary-capital-letter: 1; - - // unit - don't modify unless you want to change the typography unit (e.g., from Rem to Em units) - --text-unit: var(--text-base-size); // if Em units → --text-unit: 1em; -} - -:root, * { - // type scale - --text-xs: calc((var(--text-unit) / var(--text-scale-ratio)) / var(--text-scale-ratio)); - --text-sm: calc(var(--text-xs) * var(--text-scale-ratio)); - --text-md: calc(var(--text-sm) * var(--text-scale-ratio) * var(--text-scale-ratio)); - --text-lg: calc(var(--text-md) * var(--text-scale-ratio)); - --text-xl: calc(var(--text-lg) * var(--text-scale-ratio)); - --text-xxl: calc(var(--text-xl) * var(--text-scale-ratio)); - --text-xxxl: calc(var(--text-xxl) * var(--text-scale-ratio)); - --text-xxxxl: calc(var(--text-xxxl) * var(--text-scale-ratio)); -} - -body { - font-family: var(--font-primary); -} - -h1, h2, h3, h4 { - font-family: var(--font-primary); - --heading-font-weight: 600; -} - -// font family -.font-primary { font-family: var(--font-primary); } - -// -------------------------------- - -// (END) Global editor code - -// -------------------------------- - -// link style -a, .link {} - -mark { - background-color: alpha(var(--color-accent), 0.2); - color: inherit; -} - -.text-component { - --line-height-multiplier: 1; - --text-space-y-multiplier: 1; - - > * { // use Em units - --text-unit: 1em; - --space-unit: 1em; - } - - blockquote { - padding-left: 1em; - border-left: 4px solid var(--color-contrast-lower); - font-style: italic; - } - - hr { - background: var(--color-contrast-lower); - height: 1px; - } - - figcaption { - font-size: var(--text-sm); - color: var(--color-contrast-low); - } -} - -.article { // e.g., blog posts - --body-line-height: 1.58; // set body line-height - --text-space-y-multiplier: 1.2; // control vertical spacing -}
\ No newline at end of file diff --git a/apps/web-shared/src/styles/custom-style/_util.scss b/apps/web-shared/src/styles/custom-style/_util.scss deleted file mode 100644 index 4b86e73..0000000 --- a/apps/web-shared/src/styles/custom-style/_util.scss +++ /dev/null @@ -1,34 +0,0 @@ -@use '../base' as *; - -.border-none { - border: none !important; -} - -// 👇 (optional) create responsive variations - edit only [my-util-class, property, value] -// @each $breakpoint, $value in $breakpoints { -// @include breakpoint(#{$breakpoint}) { -// .my-util-class\@#{$breakpoint} { -// property: value; -// } -// } -.left-unset { - left: unset !important; -} - -.cursor-wait { - cursor: wait !important; -} - -.bg-error-lighter\@hover { - &:hover, - &:active { - background-color: var(--color-error-lighter) !important; - } -} - -.color-white\@hover { - &:hover, - &:active { - color: var(--color-white) !important; - } -}
\ No newline at end of file |