diff options
| author | ivarlovlie <git@ivarlovlie.no> | 2022-06-01 22:10:32 +0200 |
|---|---|---|
| committer | ivarlovlie <git@ivarlovlie.no> | 2022-06-01 22:10:32 +0200 |
| commit | a640703f2da8815dc26ad1600a6f206be1624379 (patch) | |
| tree | dbda195fb5783d16487e557e06471cf848b75427 /apps/web-shared/src/styles | |
| download | greatoffice-a640703f2da8815dc26ad1600a6f206be1624379.tar.xz greatoffice-a640703f2da8815dc26ad1600a6f206be1624379.zip | |
feat: Initial after clean slate
Diffstat (limited to 'apps/web-shared/src/styles')
47 files changed, 5836 insertions, 0 deletions
diff --git a/apps/web-shared/src/styles/_base.scss b/apps/web-shared/src/styles/_base.scss new file mode 100644 index 0000000..414b440 --- /dev/null +++ b/apps/web-shared/src/styles/_base.scss @@ -0,0 +1,48 @@ +// -------------------------------- + +// 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 new file mode 100644 index 0000000..9f71937 --- /dev/null +++ b/apps/web-shared/src/styles/base/_accessibility.scss @@ -0,0 +1,17 @@ +.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 new file mode 100644 index 0000000..a7f1eda --- /dev/null +++ b/apps/web-shared/src/styles/base/_breakpoints.scss @@ -0,0 +1,15 @@ +$breakpoints: ( + xs: 32rem, // ~512px + sm: 48rem, // ~768px + md: 64rem, // ~1024px + lg: 80rem, // ~1280px + xl: 90rem // ~1440px +) !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 new file mode 100644 index 0000000..2a7ff34 --- /dev/null +++ b/apps/web-shared/src/styles/base/_buttons.scss @@ -0,0 +1,24 @@ +// 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 new file mode 100644 index 0000000..f061d9a --- /dev/null +++ b/apps/web-shared/src/styles/base/_colors.scss @@ -0,0 +1,6 @@ +// 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 new file mode 100644 index 0000000..faffddd --- /dev/null +++ b/apps/web-shared/src/styles/base/_forms.scss @@ -0,0 +1,22 @@ +// 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 new file mode 100644 index 0000000..bd8b6c9 --- /dev/null +++ b/apps/web-shared/src/styles/base/_grid-layout.scss @@ -0,0 +1,261 @@ +@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 new file mode 100644 index 0000000..1674a7c --- /dev/null +++ b/apps/web-shared/src/styles/base/_icons.scss @@ -0,0 +1,62 @@ +// 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 new file mode 100644 index 0000000..8fe82f6 --- /dev/null +++ b/apps/web-shared/src/styles/base/_mixins.scss @@ -0,0 +1,151 @@ +@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 new file mode 100644 index 0000000..5ba4534 --- /dev/null +++ b/apps/web-shared/src/styles/base/_reset.scss @@ -0,0 +1,83 @@ +*, *::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 new file mode 100644 index 0000000..dae02fe --- /dev/null +++ b/apps/web-shared/src/styles/base/_shared-styles.scss @@ -0,0 +1,34 @@ +// 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 new file mode 100644 index 0000000..24e6645 --- /dev/null +++ b/apps/web-shared/src/styles/base/_spacing.scss @@ -0,0 +1,20 @@ +// 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 new file mode 100644 index 0000000..85b974a --- /dev/null +++ b/apps/web-shared/src/styles/base/_typography.scss @@ -0,0 +1,185 @@ +// 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 new file mode 100644 index 0000000..d688e1c --- /dev/null +++ b/apps/web-shared/src/styles/base/_util.scss @@ -0,0 +1,1738 @@ +@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 new file mode 100644 index 0000000..ab6a516 --- /dev/null +++ b/apps/web-shared/src/styles/base/_visibility.scss @@ -0,0 +1,23 @@ +: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 new file mode 100644 index 0000000..5af9ff3 --- /dev/null +++ b/apps/web-shared/src/styles/base/_z-index.scss @@ -0,0 +1,6 @@ +: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/alert.scss b/apps/web-shared/src/styles/components/alert.scss new file mode 100644 index 0000000..9d9008d --- /dev/null +++ b/apps/web-shared/src/styles/components/alert.scss @@ -0,0 +1,69 @@ +@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/autocomplete.scss b/apps/web-shared/src/styles/components/autocomplete.scss new file mode 100644 index 0000000..cde3632 --- /dev/null +++ b/apps/web-shared/src/styles/components/autocomplete.scss @@ -0,0 +1,76 @@ +@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-md); + 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/btn-states.scss b/apps/web-shared/src/styles/components/btn-states.scss new file mode 100644 index 0000000..a2fc6c5 --- /dev/null +++ b/apps/web-shared/src/styles/components/btn-states.scss @@ -0,0 +1,51 @@ +@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 new file mode 100644 index 0000000..1bb93db --- /dev/null +++ b/apps/web-shared/src/styles/components/chip.scss @@ -0,0 +1,117 @@ +@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 new file mode 100644 index 0000000..5116d39 --- /dev/null +++ b/apps/web-shared/src/styles/components/circle-loader.scss @@ -0,0 +1,315 @@ +@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 new file mode 100644 index 0000000..5722ee0 --- /dev/null +++ b/apps/web-shared/src/styles/components/custom-checkbox.scss @@ -0,0 +1,131 @@ +@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 new file mode 100644 index 0000000..9cd3b5e --- /dev/null +++ b/apps/web-shared/src/styles/components/custom-select.scss @@ -0,0 +1,158 @@ +@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 new file mode 100644 index 0000000..b4c122d --- /dev/null +++ b/apps/web-shared/src/styles/components/details.scss @@ -0,0 +1,57 @@ +@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 new file mode 100644 index 0000000..c5ded33 --- /dev/null +++ b/apps/web-shared/src/styles/components/dropdown.scss @@ -0,0 +1,98 @@ +@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 new file mode 100644 index 0000000..cc9f9a3 --- /dev/null +++ b/apps/web-shared/src/styles/components/form-validator.scss @@ -0,0 +1,18 @@ +@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 new file mode 100644 index 0000000..f239c62 --- /dev/null +++ b/apps/web-shared/src/styles/components/interactive-table.scss @@ -0,0 +1,156 @@ +@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/list.scss b/apps/web-shared/src/styles/components/list.scss new file mode 100644 index 0000000..df600a3 --- /dev/null +++ b/apps/web-shared/src/styles/components/list.scss @@ -0,0 +1,195 @@ +@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 new file mode 100644 index 0000000..3f70fbe --- /dev/null +++ b/apps/web-shared/src/styles/components/menu-bar.scss @@ -0,0 +1,139 @@ +@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 new file mode 100644 index 0000000..8e211a5 --- /dev/null +++ b/apps/web-shared/src/styles/components/menu.scss @@ -0,0 +1,81 @@ +@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 new file mode 100644 index 0000000..1beec76 --- /dev/null +++ b/apps/web-shared/src/styles/components/modal.scss @@ -0,0 +1,105 @@ +@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 new file mode 100644 index 0000000..0a09210 --- /dev/null +++ b/apps/web-shared/src/styles/components/pagination.scss @@ -0,0 +1,77 @@ +@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 new file mode 100644 index 0000000..7f423a0 --- /dev/null +++ b/apps/web-shared/src/styles/components/popover.scss @@ -0,0 +1,38 @@ +@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 new file mode 100644 index 0000000..1e803e7 --- /dev/null +++ b/apps/web-shared/src/styles/components/pre-header.scss @@ -0,0 +1,46 @@ +@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 new file mode 100644 index 0000000..c4009f9 --- /dev/null +++ b/apps/web-shared/src/styles/components/radios-checkboxes.scss @@ -0,0 +1,134 @@ +@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/select-autocomplete.scss b/apps/web-shared/src/styles/components/select-autocomplete.scss new file mode 100644 index 0000000..78a0fb0 --- /dev/null +++ b/apps/web-shared/src/styles/components/select-autocomplete.scss @@ -0,0 +1,173 @@ +@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 { + 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 { + 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 { + 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/tabbed-navigation.scss b/apps/web-shared/src/styles/components/tabbed-navigation.scss new file mode 100644 index 0000000..4090fca --- /dev/null +++ b/apps/web-shared/src/styles/components/tabbed-navigation.scss @@ -0,0 +1,133 @@ +@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 new file mode 100644 index 0000000..af8207f --- /dev/null +++ b/apps/web-shared/src/styles/components/table.scss @@ -0,0 +1,147 @@ +@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 new file mode 100644 index 0000000..1b5c1d5 --- /dev/null +++ b/apps/web-shared/src/styles/components/user-menu.scss @@ -0,0 +1,81 @@ +@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/custom-style/_buttons.scss b/apps/web-shared/src/styles/custom-style/_buttons.scss new file mode 100644 index 0000000..e396f8d --- /dev/null +++ b/apps/web-shared/src/styles/custom-style/_buttons.scss @@ -0,0 +1,111 @@ +@use '../base' as *; + +// -------------------------------- + +// (START) Global editor code https://codyhouse.co/ds/globals/buttons + +// -------------------------------- + +:root { + --btn-font-size: 1em; + --btn-padding-x: var(--space-xxs); + --btn-padding-y: var(--space-xxxs); + --btn-radius: var(--radius-sm); +} + +.btn { + background: var(--color-bg-dark); + color: var(--color-contrast-higher); + cursor: pointer; + text-decoration: none; + line-height: 1.2; + @include fontSmooth; + will-change: transform; + + &:focus { + box-shadow: 0px 0px 0px 2px alpha(var(--color-contrast-higher), 0.15); + outline: none; + } +} + +.btn--link { + @include reset; + color: inherit; + cursor: pointer; + text-decoration: none; + + &:hover { + color: var(--color-primary); + } +} + +// themes +.btn--primary { + background: var(--color-primary); + color: var(--color-white); + box-shadow: inset 0px 1px 0px alpha(var(--color-white), 0.15), var(--shadow-xs); + + &:hover { + background: var(--color-primary-light); + box-shadow: inset 0px 1px 0px alpha(var(--color-white), 0.15), var(--shadow-sm); + } + + &:focus { + box-shadow: inset 0px 1px 0px alpha(var(--color-white), 0.15), 0px 0px 0px 2px alpha(var(--color-primary), 0.2); + } +} + +.btn--subtle { + background: var(--color-bg-light); + color: var(--color-contrast-higher); + box-shadow: inset 0px 0px 0px 1px var(--color-contrast-lower), var(--shadow-xs); + + &:hover { + background: var(--color-bg-lighter); + box-shadow: inset 0px 0px 0px 1px var(--color-contrast-lower), var(--shadow-sm); + } + + &:focus { + box-shadow: inset 0px 0px 0px 1px var(--color-contrast-lower), 0px 0px 0px 2px alpha(var(--color-contrast-higher), 0.05); + } +} + +.btn--accent { + background: var(--color-accent); + color: var(--color-white); + box-shadow: inset 0px 1px 0px alpha(var(--color-white), 0.15), var(--shadow-xs); + + &:hover { + background: var(--color-accent-light); + box-shadow: inset 0px 1px 0px alpha(var(--color-white), 0.15), var(--shadow-sm); + } + + &:focus { + box-shadow: inset 0px 1px 0px alpha(var(--color-white), 0.15), 0px 0px 0px 2px alpha(var(--color-accent), 0.2); + } +} + +// feedback +.btn--disabled, .btn[disabled], .btn[readonly] { + opacity: 0.6; + cursor: not-allowed; +} + +// size +.btn--sm { + font-size: 0.8em; +} + +.btn--md { + font-size: 1.2em; +} + +.btn--lg { + font-size: 1.4em; +} + +// -------------------------------- + +// (END) Global editor code + +// -------------------------------- diff --git a/apps/web-shared/src/styles/custom-style/_colors.scss b/apps/web-shared/src/styles/custom-style/_colors.scss new file mode 100644 index 0000000..76d3fa6 --- /dev/null +++ b/apps/web-shared/src/styles/custom-style/_colors.scss @@ -0,0 +1,119 @@ +@use '../base' as *; + +// -------------------------------- + +// (START) Global editor code https://codyhouse.co/ds/globals/colors + +// -------------------------------- + +:root, [data-theme="default"] { + // main + @include defineColorHSL(--color-primary-darker, 250, 84%, 38%); + @include defineColorHSL(--color-primary-dark, 250, 84%, 46%); + @include defineColorHSL(--color-primary, 250, 84%, 54%); + @include defineColorHSL(--color-primary-light, 250, 84%, 60%); + @include defineColorHSL(--color-primary-lighter, 250, 84%, 67%); + + @include defineColorHSL(--color-accent-darker, 342, 89%, 38%); + @include defineColorHSL(--color-accent-dark, 342, 89%, 43%); + @include defineColorHSL(--color-accent, 342, 89%, 48%); + @include defineColorHSL(--color-accent-light, 342, 89%, 56%); + @include defineColorHSL(--color-accent-lighter, 342, 89%, 62%); + + @include defineColorHSL(--color-black, 204, 28%, 7%); + @include defineColorHSL(--color-white, 0, 0%, 100%); + + // feedback + @include defineColorHSL(--color-warning-darker, 46, 100%, 47%); + @include defineColorHSL(--color-warning-dark, 46, 100%, 50%); + @include defineColorHSL(--color-warning, 46, 100%, 61%); + @include defineColorHSL(--color-warning-light, 46, 100%, 71%); + @include defineColorHSL(--color-warning-lighter, 46, 100%, 80%); + + @include defineColorHSL(--color-success-darker, 122, 50%, 47%); + @include defineColorHSL(--color-success-dark, 122, 50%, 52%); + @include defineColorHSL(--color-success, 122, 50%, 60%); + @include defineColorHSL(--color-success-light, 122, 50%, 69%); + @include defineColorHSL(--color-success-lighter, 122, 50%, 76%); + + @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, 210, 4%, 89%); + @include defineColorHSL(--color-bg-dark, 180, 3%, 94%); + @include defineColorHSL(--color-bg, 210, 17%, 98%); + @include defineColorHSL(--color-bg-light, 180, 3%, 100%); + @include defineColorHSL(--color-bg-lighter, 210, 4%, 100%); + + // color contrasts + @include defineColorHSL(--color-contrast-lower, 180, 1%, 84%); + @include defineColorHSL(--color-contrast-low, 210, 2%, 64%); + @include defineColorHSL(--color-contrast-medium, 204, 2%, 46%); + @include defineColorHSL(--color-contrast-high, 210, 7%, 21%); + @include defineColorHSL(--color-contrast-higher, 204, 28%, 7%); +} + +[data-theme="dark"] { + // main + @include defineColorHSL(--color-primary-darker, 250, 93%, 57%); + @include defineColorHSL(--color-primary-dark, 250, 93%, 61%); + @include defineColorHSL(--color-primary, 250, 93%, 65%); + @include defineColorHSL(--color-primary-light, 250, 93%, 69%); + @include defineColorHSL(--color-primary-lighter, 250, 93%, 72%); + + @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, 204, 28%, 7%); + @include defineColorHSL(--color-white, 0, 0%, 100%); + + // feedback + @include defineColorHSL(--color-warning-darker, 46, 100%, 47%); + @include defineColorHSL(--color-warning-dark, 46, 100%, 50%); + @include defineColorHSL(--color-warning, 46, 100%, 61%); + @include defineColorHSL(--color-warning-light, 46, 100%, 71%); + @include defineColorHSL(--color-warning-lighter, 46, 100%, 80%); + + @include defineColorHSL(--color-success-darker, 122, 50%, 47%); + @include defineColorHSL(--color-success-dark, 122, 50%, 52%); + @include defineColorHSL(--color-success, 122, 50%, 60%); + @include defineColorHSL(--color-success-light, 122, 50%, 69%); + @include defineColorHSL(--color-success-lighter, 122, 50%, 76%); + + @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, 204, 15%, 6%); + @include defineColorHSL(--color-bg-dark, 203, 18%, 9%); + @include defineColorHSL(--color-bg, 203, 24%, 13%); + @include defineColorHSL(--color-bg-light, 203, 18%, 17%); + @include defineColorHSL(--color-bg-lighter, 204, 15%, 20%); + + // color contrasts + @include defineColorHSL(--color-contrast-lower, 208, 12%, 24%); + @include defineColorHSL(--color-contrast-low, 208, 6%, 40%); + @include defineColorHSL(--color-contrast-medium, 213, 5%, 56%); + @include defineColorHSL(--color-contrast-high, 223, 8%, 82%); + @include defineColorHSL(--color-contrast-higher, 240, 100%, 99%); + + // font rendering + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +// -------------------------------- + +// (END) Global editor code + +// -------------------------------- diff --git a/apps/web-shared/src/styles/custom-style/_forms.scss b/apps/web-shared/src/styles/custom-style/_forms.scss new file mode 100644 index 0000000..0048941 --- /dev/null +++ b/apps/web-shared/src/styles/custom-style/_forms.scss @@ -0,0 +1,56 @@ +@use '../base' as *; + +// -------------------------------- + +// (START) Global editor code https://codyhouse.co/ds/globals/forms + +// -------------------------------- + +:root { + --form-control-font-size: 1em; + --form-control-padding-x: var(--space-xs); + --form-control-padding-y: var(--space-xxs); + --form-control-radius: var(--radius-sm); +} + +.form-control { + background: var(--color-bg-dark); + line-height: 1.2; + box-shadow: inset 0 0 0 1px var(--color-contrast-lower); + + &::placeholder { + opacity: 1; + color: var(--color-contrast-low); + } + + &: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--disabled, .form-control[disabled], .form-control[readonly] { + opacity: 0.5; + cursor: not-allowed; +} + +.form-control[aria-invalid="true"], .form-control.form-control--error { + box-shadow: inset 0 0 0 1px alpha(var(--color-contrast-lower), 0), 0px 0px 0px 2px var(--color-error); + + &:focus { + box-shadow: inset 0 0 0 1px alpha(var(--color-contrast-lower), 0), 0px 0px 0px 2px var(--color-error), var(--shadow-sm); + } +} + +.form-legend { +} + +.form-label { +} + +// -------------------------------- + +// (END) Global editor code + +// -------------------------------- diff --git a/apps/web-shared/src/styles/custom-style/_icons.scss b/apps/web-shared/src/styles/custom-style/_icons.scss new file mode 100644 index 0000000..a9fcb46 --- /dev/null +++ b/apps/web-shared/src/styles/custom-style/_icons.scss @@ -0,0 +1,19 @@ +@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 new file mode 100644 index 0000000..e9a32b8 --- /dev/null +++ b/apps/web-shared/src/styles/custom-style/_shared-styles.scss @@ -0,0 +1,59 @@ +@use '../base' as *; + +:root { + --radius: 0.25em; // border radius base size + --radius-sm: calc(var(--radius) / 2); + --radius-md: var(--radius); + --radius-lg: calc(var(--radius) * 2); + --shadow-xs: 0; + --shadow-sm: 0; + --shadow-md: 0; + --shadow-lg: 0; + --shadow-xl: 0; +} + +// -------------------------------- + +// (START) Global editor code https://codyhouse.co/ds/globals/shared-styles + +// -------------------------------- + +.hover\:reduce-opacity { + opacity: 1; + + &:hover { + opacity: 0.8; + } +} + +.hover\:scale { + + &:hover { + transform: scale(1.1); + } +} + +.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 + +// -------------------------------- diff --git a/apps/web-shared/src/styles/custom-style/_spacing.scss b/apps/web-shared/src/styles/custom-style/_spacing.scss new file mode 100644 index 0000000..56cd451 --- /dev/null +++ b/apps/web-shared/src/styles/custom-style/_spacing.scss @@ -0,0 +1,49 @@ +@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-sm); + } + +@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 + +// -------------------------------- diff --git a/apps/web-shared/src/styles/custom-style/_typography.scss b/apps/web-shared/src/styles/custom-style/_typography.scss new file mode 100644 index 0000000..d0bb431 --- /dev/null +++ b/apps/web-shared/src/styles/custom-style/_typography.scss @@ -0,0 +1,92 @@ +@use '../base' as *; + +// -------------------------------- + +// (START) Global editor code https://codyhouse.co/ds/globals/typography + +// -------------------------------- + +:root { + // font family + //--font-primary: Inter, system-ui, sans-serif; + font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; + + // font size + --text-base-size: 1.25rem; // body font-size + --text-scale-ratio: 1.1; // multiplier used to generate the type scale values 👇 + + // line-height + --body-line-height: 1.2; + --heading-line-height: 1.34; + + // 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: var(--text-base-size); +} + +:root, * { + --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 { + --text-unit: 1em; + --space-unit: 1em; + --line-height-multiplier: 1; + --text-space-y-multiplier: 1; + + 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 +} diff --git a/apps/web-shared/src/styles/custom-style/_util.scss b/apps/web-shared/src/styles/custom-style/_util.scss new file mode 100644 index 0000000..5677630 --- /dev/null +++ b/apps/web-shared/src/styles/custom-style/_util.scss @@ -0,0 +1,41 @@ +@use '../base' as *; + +// -------------------------------- + +// How to create custom utility classes 👇 + +// -------------------------------- + +.border-none { + border: none !important; +} + +@each $breakpoint, $value in $breakpoints { + @include breakpoint(#{$breakpoint}) { + .border-none\@#{$breakpoint} { + border: none !important; + } + } +} + +.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; + } +} |