├── .gitignore ├── .browserslistrc ├── main ├── assets │ ├── css │ │ ├── base │ │ │ ├── _colors.scss │ │ │ ├── _z-index.scss │ │ │ ├── _accessibility.scss │ │ │ ├── _visibility.scss │ │ │ ├── _breakpoints.scss │ │ │ ├── _spacing.scss │ │ │ ├── _forms.scss │ │ │ ├── _buttons.scss │ │ │ ├── _icons.scss │ │ │ ├── _shared-styles.scss │ │ │ ├── _reset.scss │ │ │ ├── _typography.scss │ │ │ ├── _mixins.scss │ │ │ ├── _grid-layout.scss │ │ │ └── _util.scss │ │ ├── style.scss │ │ ├── _custom-style.scss │ │ ├── custom-style │ │ │ ├── _icons.scss │ │ │ ├── _util.scss │ │ │ ├── _forms.scss │ │ │ ├── _spacing.scss │ │ │ ├── _shared-styles.scss │ │ │ ├── _typography.scss │ │ │ ├── _buttons.scss │ │ │ └── _colors.scss │ │ ├── _base.scss │ │ └── components │ │ │ └── _1_list.scss │ └── js │ │ ├── scripts.min.js │ │ ├── util.js │ │ └── scripts.js └── index.html ├── LICENSE.md ├── package.json ├── README.md └── gulpfile.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.DS_Store 3 | config.php 4 | package-lock.json -------------------------------------------------------------------------------- /.browserslistrc: -------------------------------------------------------------------------------- 1 | >= 0.5% 2 | last 2 major versions 3 | not dead 4 | Chrome >= 60 5 | Firefox >= 60 6 | Firefox ESR 7 | iOS >= 12 8 | Safari >= 12 9 | not Explorer <= 11 -------------------------------------------------------------------------------- /main/assets/css/base/_colors.scss: -------------------------------------------------------------------------------- 1 | // don't modify this file -> edit 📁 custom-style/_colors.scss to create your color palette 2 | 3 | [data-theme] { 4 | background-color: var(--color-bg, hsl(0, 0%, 100%)); 5 | color: var(--color-contrast-high, hsl(210, 7%, 21%)); 6 | } -------------------------------------------------------------------------------- /main/assets/css/base/_z-index.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | --z-index-header: 3; // e.g., main header 3 | --z-index-popover: 5; // e.g., tooltips and dropdown 4 | --z-index-fixed-element: 10; // e.g., 'back to top' button 5 | --z-index-overlay: 15; // e.g., modals and dialogs 6 | } -------------------------------------------------------------------------------- /main/assets/css/style.scss: -------------------------------------------------------------------------------- 1 | @use 'base' as * with ( 2 | $breakpoints: ( 3 | 'xs': 32rem, // ~512px 4 | 'sm': 48rem, // ~768px 5 | 'md': 64rem, // ~1024px 6 | 'lg': 80rem, // ~1280px 7 | 'xl': 90rem // ~1440px 8 | ), 9 | $grid-columns: 12 10 | ); 11 | 12 | @use 'custom-style'; 13 | @use 'components/**/*.scss'; -------------------------------------------------------------------------------- /main/assets/css/_custom-style.scss: -------------------------------------------------------------------------------- 1 | // -------------------------------- 2 | 3 | // Custom Style - Your bespoke style 4 | 5 | // -------------------------------- 6 | 7 | @use 'custom-style/colors'; 8 | @use 'custom-style/spacing'; 9 | @use 'custom-style/shared-styles'; 10 | @use 'custom-style/typography'; 11 | @use 'custom-style/icons'; 12 | @use 'custom-style/buttons'; 13 | @use 'custom-style/forms'; 14 | @use 'custom-style/util'; 15 | 16 | /*! purgecss start ignore */ -------------------------------------------------------------------------------- /main/assets/css/base/_accessibility.scss: -------------------------------------------------------------------------------- 1 | .sr-only { // content made available only to screen readers 2 | position: absolute; 3 | clip: rect(1px, 1px, 1px, 1px); 4 | clip-path: inset(50%); 5 | width: 1px; 6 | height: 1px; 7 | overflow: hidden; 8 | padding: 0; 9 | border: 0; 10 | white-space: nowrap; 11 | } 12 | 13 | .sr-only-focusable { // focusable, visually hidden element 14 | &:not(:focus):not(:focus-within){ 15 | @extend .sr-only 16 | } 17 | } -------------------------------------------------------------------------------- /main/assets/css/base/_visibility.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | --display: block; 3 | } 4 | 5 | .is-visible { 6 | display: var(--display) !important; 7 | } 8 | 9 | .is-hidden { 10 | display: none !important; 11 | } 12 | 13 | html:not(.js) { 14 | .no-js\:is-hidden { 15 | display: none !important; 16 | } 17 | } 18 | 19 | @media print { 20 | .print\:is-hidden { 21 | display: none !important; 22 | } 23 | 24 | .print\:shadow-none { 25 | box-shadow: none; 26 | } 27 | } -------------------------------------------------------------------------------- /main/assets/css/custom-style/_icons.scss: -------------------------------------------------------------------------------- 1 | @use '../base' as *; 2 | 3 | :root { 4 | // size - 👇 uncomment to modify default icon sizes 5 | // --icon-xxxs: 8px; 6 | // --icon-xxs: 12px; 7 | // --icon-xs: 16px; 8 | // --icon-sm: 24px; 9 | // --icon-md: 32px; 10 | // --icon-lg: 48px; 11 | // --icon-xl: 64px; 12 | // --icon-xxl: 96px; 13 | // --icon-xxxl: 128px; 14 | } 15 | 16 | .icon { 17 | // 👇 include the font-family declaration here if you are using an icon font 18 | // font-family: 'fontName'; 19 | } -------------------------------------------------------------------------------- /main/assets/css/base/_breakpoints.scss: -------------------------------------------------------------------------------- 1 | // to edit the breakpoints, check the style.scss file 2 | 3 | $breakpoints: ( 4 | xs: 32rem, // ~512px 5 | sm: 48rem, // ~768px 6 | md: 64rem, // ~1024px 7 | lg: 80rem, // ~1280px 8 | xl: 90rem // ~1440px 9 | ) !default; 10 | 11 | @mixin breakpoint($breakpoint, $logic: false) { 12 | @if( $logic ) { 13 | @media #{$logic} and (min-width: map-get($map: $breakpoints, $key: $breakpoint)) { @content; } 14 | } @else { 15 | @media (min-width: map-get($map: $breakpoints, $key: $breakpoint)) { @content; } 16 | } 17 | } -------------------------------------------------------------------------------- /main/assets/css/_base.scss: -------------------------------------------------------------------------------- 1 | // -------------------------------- 2 | 3 | // Basic Style - Essential CSS rules and utility classes 4 | 5 | // -------------------------------- 6 | 7 | @forward 'base/breakpoints'; 8 | @forward 'base/mixins'; 9 | @forward 'base/grid-layout'; 10 | 11 | @use 'base/reset'; 12 | @use 'base/colors'; 13 | @use 'base/spacing'; 14 | @use 'base/shared-styles'; 15 | @use 'base/typography'; 16 | @use 'base/icons'; 17 | @use 'base/buttons'; 18 | @use 'base/forms'; 19 | @use 'base/z-index'; 20 | @use 'base/visibility'; 21 | @use 'base/accessibility'; 22 | @use 'base/util'; -------------------------------------------------------------------------------- /main/assets/css/custom-style/_util.scss: -------------------------------------------------------------------------------- 1 | @use '../base' as *; 2 | 3 | // -------------------------------- 4 | 5 | // How to create custom utility classes 👇 6 | 7 | // -------------------------------- 8 | 9 | // 👇 your custom utility class 10 | // .my-util-class { 11 | // property: value; 12 | // } 13 | 14 | // 👇 (optional) create responsive variations - edit only [my-util-class, property, value] 15 | // @each $breakpoint, $value in $breakpoints { 16 | // @include breakpoint(#{$breakpoint}) { 17 | // .my-util-class\@#{$breakpoint} { 18 | // property: value; 19 | // } 20 | // } 21 | // } -------------------------------------------------------------------------------- /main/assets/css/base/_spacing.scss: -------------------------------------------------------------------------------- 1 | // don't modify this file -> edit 📁 custom-style/_spacing.scss to set your custom spacing scale 2 | 3 | :root { 4 | --space-unit: 1rem; 5 | } 6 | 7 | :root, * { 8 | --space-xxxxs: calc(0.125 * var(--space-unit)); 9 | --space-xxxs: calc(0.25 * var(--space-unit)); 10 | --space-xxs: calc(0.375 * var(--space-unit)); 11 | --space-xs: calc(0.5 * var(--space-unit)); 12 | --space-sm: calc(0.75 * var(--space-unit)); 13 | --space-md: calc(1.25 * var(--space-unit)); 14 | --space-lg: calc(2 * var(--space-unit)); 15 | --space-xl: calc(3.25 * var(--space-unit)); 16 | --space-xxl: calc(5.25 * var(--space-unit)); 17 | --space-xxxl: calc(8.5 * var(--space-unit)); 18 | --space-xxxxl: calc(13.75 * var(--space-unit)); 19 | --component-padding: var(--space-md); 20 | } -------------------------------------------------------------------------------- /main/assets/css/base/_forms.scss: -------------------------------------------------------------------------------- 1 | // don't modify this file -> edit 📁 custom-style/_forms.scss to create your custom form elements 2 | 3 | .form-control { 4 | font-size: var(--form-control-font-size, 1em); 5 | padding-top: var(--form-control-padding-y, 0.5em); 6 | padding-bottom: var(--form-control-padding-y, 0.5em); 7 | padding-left: var(--form-control-padding-x, 0.75em); 8 | padding-right: var(--form-control-padding-x, 0.75em); 9 | border-radius: var(--form-control-radius, 0.25em); 10 | } 11 | 12 | .form-legend { 13 | color: var(--color-contrast-higher, hsl(204, 28%, 7%)); 14 | line-height: var(--heading-line-height, 1.2); 15 | font-weight: var(--heading-font-weight, 700); 16 | font-size: var(--text-md, 1.125rem); 17 | margin-bottom: var(--space-md); 18 | } 19 | 20 | .form-label { 21 | display: inline-block; 22 | font-size: var(--text-sm, 0.75rem); 23 | } -------------------------------------------------------------------------------- /main/assets/css/base/_buttons.scss: -------------------------------------------------------------------------------- 1 | // don't modify this file -> edit 📁 custom-style/_buttons.scss to create your custom buttons 2 | 3 | .btn { // basic button style 4 | position: relative; 5 | display: inline-flex; 6 | justify-content: center; 7 | align-items: center; 8 | white-space: nowrap; 9 | text-decoration: none; 10 | font-size: var(--btn-font-size, 1em); 11 | padding-top: var(--btn-padding-y, 0.5em); 12 | padding-bottom: var(--btn-padding-y, 0.5em); 13 | padding-left: var(--btn-padding-x, 0.75em); 14 | padding-right: var(--btn-padding-x, 0.75em); 15 | border-radius: var(--btn-radius, 0.25em); 16 | } 17 | 18 | // default size variations 19 | .btn--sm { font-size: var(--btn-font-size-sm, 0.8em); } 20 | .btn--md { font-size: var(--btn-font-size-md, 1.2em); } 21 | .btn--lg { font-size: var(--btn-font-size-lg, 1.4em); } 22 | 23 | // button with (only) icon 24 | .btn--icon { padding: var(--btn-padding-y, 0.5em); } -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014-2021 Amber Creative S.R.L. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "codyhouse-framework", 3 | "version": "3.0.14", 4 | "description": "A lightweight front-end framework for building accessible, bespoke interfaces.", 5 | "main": "index.js", 6 | "keywords": [ 7 | "scss", 8 | "css", 9 | "framework", 10 | "design-system", 11 | "html", 12 | "front-end", 13 | "buttons", 14 | "colors", 15 | "forms", 16 | "grid", 17 | "mixins", 18 | "spacing", 19 | "typography", 20 | "codyhouse" 21 | ], 22 | "scripts": { 23 | "gulp": "gulp", 24 | "test": "echo \"Error: no test specified\" && exit 1" 25 | }, 26 | "author": "Amber Creative Lab ", 27 | "license": "MIT", 28 | "devDependencies": { 29 | "autoprefixer": "^9.4.3", 30 | "browser-sync": "^2.26.3", 31 | "gulp": "^4.0.0", 32 | "gulp-clean-css": "^4.3.0", 33 | "gulp-concat": "^2.6.1", 34 | "gulp-postcss": "^8.0.0", 35 | "gulp-purgecss": "^3.0.0", 36 | "gulp-rename": "^1.4.0", 37 | "gulp-sass": "^5.0.0", 38 | "gulp-sass-glob": "git+https://github.com/CodyHouse/gulp-sass-glob", 39 | "gulp-uglify": "^3.0.2", 40 | "sass": "^1.37.5", 41 | "sass-embedded": "^1.0.0-beta.4" 42 | }, 43 | "homepage": "https://codyhouse.co", 44 | "repository": { 45 | "type": "git", 46 | "url": "git+https://github.com/CodyHouse/codyhouse-framework.git" 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /main/assets/css/base/_icons.scss: -------------------------------------------------------------------------------- 1 | // don't modify this file -> edit 📁 custom-style/_icons.scss to set your custom icons style 2 | 3 | :root { 4 | // default icon sizes 5 | --icon-xxxs: 8px; 6 | --icon-xxs: 12px; 7 | --icon-xs: 16px; 8 | --icon-sm: 24px; 9 | --icon-md: 32px; 10 | --icon-lg: 48px; 11 | --icon-xl: 64px; 12 | --icon-xxl: 96px; 13 | --icon-xxxl: 128px; 14 | } 15 | 16 | .icon { 17 | --size: 1em; 18 | font-size: var(--size); 19 | height: 1em; 20 | width: 1em; 21 | display: inline-block; 22 | color: inherit; 23 | fill: currentColor; 24 | line-height: 1; 25 | flex-shrink: 0; 26 | max-width: initial; 27 | } 28 | 29 | // icon size 30 | .icon--xxxs { --size: var(--icon-xxxs); } 31 | .icon--xxs { --size: var(--icon-xxs); } 32 | .icon--xs { --size: var(--icon-xs); } 33 | .icon--sm { --size: var(--icon-sm); } 34 | .icon--md { --size: var(--icon-md); } 35 | .icon--lg { --size: var(--icon-lg); } 36 | .icon--xl { --size: var(--icon-xl); } 37 | .icon--xxl { --size: var(--icon-xxl); } 38 | .icon--xxxl { --size: var(--icon-xxxl); } 39 | 40 | .icon--is-spinning { // rotate the icon infinitely 41 | animation: icon-spin 1s infinite linear; 42 | } 43 | 44 | @keyframes icon-spin { 45 | 0% { 46 | transform: rotate(0deg); 47 | } 48 | 100% { 49 | transform: rotate(360deg); 50 | } 51 | } 52 | 53 | // -------------------------------- 54 | 55 | // SVG 56 | 57 | // -------------------------------- 58 | 59 | // enable icon color corrections 60 | .icon use { 61 | color: inherit; 62 | fill: currentColor; 63 | } -------------------------------------------------------------------------------- /main/assets/css/custom-style/_forms.scss: -------------------------------------------------------------------------------- 1 | @use '../base' as *; 2 | 3 | // -------------------------------- 4 | 5 | // (START) Global editor code https://codyhouse.co/ds/globals/forms 6 | 7 | // -------------------------------- 8 | 9 | :root { 10 | --form-control-font-size: 1em; 11 | --form-control-padding-x: var(--space-xs); 12 | --form-control-padding-y: var(--space-xxs); 13 | --form-control-radius: var(--radius-md); 14 | } 15 | 16 | .form-control { 17 | background: var(--color-bg-dark); 18 | line-height: 1.2; 19 | box-shadow: inset 0px 0px 0px 1px var(--color-contrast-lower); 20 | transition: all 0.2s ease; 21 | 22 | &::placeholder { 23 | opacity: 1; 24 | color: var(--color-contrast-low); 25 | } 26 | 27 | &:focus, &:focus-within { 28 | background: var(--color-bg); 29 | box-shadow: inset 0 0 0 1px alpha(var(--color-contrast-lower), 0), 30 | 0 0 0 2px var(--color-primary), 31 | var(--shadow-sm); 32 | } 33 | } 34 | 35 | .form-control--disabled, .form-control[disabled], .form-control[readonly] { 36 | opacity: 0.5; 37 | cursor: not-allowed; 38 | } 39 | 40 | .form-control[aria-invalid="true"], .form-control.form-control--error { 41 | box-shadow: inset 0 0 0 1px alpha(var(--color-contrast-lower), 0), 42 | 0 0 0 2px var(--color-error); 43 | 44 | &:focus, &:focus-within { 45 | box-shadow: inset 0 0 0 1px alpha(var(--color-contrast-lower), 0), 46 | 0 0 0 2px var(--color-error), 47 | var(--shadow-sm); 48 | } 49 | } 50 | 51 | .form-legend {} 52 | .form-label {} 53 | 54 | // -------------------------------- 55 | 56 | // (END) Global editor code 57 | 58 | // -------------------------------- -------------------------------------------------------------------------------- /main/assets/css/custom-style/_spacing.scss: -------------------------------------------------------------------------------- 1 | @use '../base' as *; 2 | 3 | // -------------------------------- 4 | 5 | // (START) Global editor code https://codyhouse.co/ds/globals/spacing 6 | 7 | // -------------------------------- 8 | 9 | // 👇 uncomment to modify default spacing scale 10 | // :root { 11 | // --space-unit: 1rem; 12 | // } 13 | 14 | // :root, * { 15 | // --space-xxxxs: calc(0.125 * var(--space-unit)); 16 | // --space-xxxs: calc(0.25 * var(--space-unit)); 17 | // --space-xxs: calc(0.375 * var(--space-unit)); 18 | // --space-xs: calc(0.5 * var(--space-unit)); 19 | // --space-sm: calc(0.75 * var(--space-unit)); 20 | // --space-md: calc(1.25 * var(--space-unit)); 21 | // --space-lg: calc(2 * var(--space-unit)); 22 | // --space-xl: calc(3.25 * var(--space-unit)); 23 | // --space-xxl: calc(5.25 * var(--space-unit)); 24 | // --space-xxxl: calc(8.5 * var(--space-unit)); 25 | // --space-xxxxl: calc(13.75 * var(--space-unit)); 26 | // --component-padding: var(--space-md); 27 | // } 28 | 29 | @include breakpoint(md) { 30 | :root, * { 31 | --space-xxxxs: calc(0.1875 * var(--space-unit)); 32 | --space-xxxs: calc(0.375 * var(--space-unit)); 33 | --space-xxs: calc(0.5625 * var(--space-unit)); 34 | --space-xs: calc(0.75 * var(--space-unit)); 35 | --space-sm: calc(1.125 * var(--space-unit)); 36 | --space-md: calc(2 * var(--space-unit)); 37 | --space-lg: calc(3.125 * var(--space-unit)); 38 | --space-xl: calc(5.125 * var(--space-unit)); 39 | --space-xxl: calc(8.25 * var(--space-unit)); 40 | --space-xxxl: calc(13.25 * var(--space-unit)); 41 | --space-xxxxl: calc(21.5 * var(--space-unit)); 42 | } 43 | } 44 | 45 | // -------------------------------- 46 | 47 | // (END) Global editor code 48 | 49 | // -------------------------------- -------------------------------------------------------------------------------- /main/assets/css/base/_shared-styles.scss: -------------------------------------------------------------------------------- 1 | // don't modify this file -> edit 📁 custom-style/_shared-style.scss to set your custom shared styles 2 | 3 | :root { 4 | // radius 5 | --radius-sm: calc(var(--radius, 0.375em)/2); 6 | --radius-md: var(--radius, 0.375em); 7 | --radius-lg: calc(var(--radius, 0.375em)*2); 8 | 9 | // box shadow 10 | --shadow-ring: 0 0 0 1px hsla(0, 0%, 0%, 0.05); 11 | 12 | --shadow-xs: 0 0 0 1px hsla(0, 0%, 0%, 0.02), 13 | 0 1px 3px -1px hsla(0, 0%, 0%, 0.2); 14 | --shadow-sm: 0 0.3px 0.4px hsla(0, 0%, 0%, 0.02), 15 | 0 0.9px 1.5px hsla(0, 0%, 0%, 0.045), 16 | 0 3.5px 6px hsla(0, 0%, 0%, 0.09); 17 | --shadow-md: 0 0.9px 1.25px hsla(0, 0%, 0%, 0.025), 18 | 0 3px 5px hsla(0, 0%, 0%, 0.05), 19 | 0 12px 20px hsla(0, 0%, 0%, 0.09); 20 | --shadow-lg: 0 1.2px 1.9px -1px hsla(0, 0%, 0%, 0.01), 21 | 0 3px 5px -1px hsla(0, 0%, 0%, 0.015), 22 | 0 8px 15px -1px hsla(0, 0%, 0%, 0.05), 23 | 0 28px 40px -1px hsla(0, 0%, 0%, 0.1); 24 | --shadow-xl: 0 1.5px 2.1px -6px hsla(0, 0%, 0%, 0.009), 25 | 0 3.6px 5.2px -6px hsla(0, 0%, 0%, 0.0115), 26 | 0 7.3px 10.6px -6px hsla(0, 0%, 0%, 0.0125), 27 | 0 16.2px 21.9px -6px hsla(0, 0%, 0%, 0.025), 28 | 0 46px 60px -6px hsla(0, 0%, 0%, 0.15); 29 | 30 | // inner glow visible in dark mode 31 | --inner-glow: inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075); 32 | --inner-glow-top: inset 0 1px 0.5px hsla(0, 0%, 100%, 0.075); 33 | 34 | // timing functions 35 | // credits: https://github.com/ai/easings.net 36 | --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1); 37 | --ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19); 38 | --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1); 39 | --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1); 40 | } -------------------------------------------------------------------------------- /main/assets/css/base/_reset.scss: -------------------------------------------------------------------------------- 1 | *, *::after, *::before { 2 | box-sizing: inherit; 3 | } 4 | 5 | * { 6 | font: inherit; 7 | } 8 | 9 | html, body, div, span, applet, object, iframe, 10 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 11 | a, abbr, acronym, address, big, cite, code, 12 | del, dfn, em, img, ins, kbd, q, s, samp, 13 | small, strike, strong, sub, sup, tt, var, 14 | b, u, i, center, 15 | dl, dt, dd, ol, ul, li, 16 | fieldset, form, label, legend, 17 | table, caption, tbody, tfoot, thead, tr, th, td, 18 | article, aside, canvas, details, embed, 19 | figure, figcaption, footer, header, hgroup, 20 | menu, nav, output, ruby, section, summary, 21 | time, mark, audio, video, hr { 22 | margin: 0; 23 | padding: 0; 24 | border: 0; 25 | } 26 | 27 | html { 28 | box-sizing: border-box; 29 | } 30 | 31 | body { 32 | background-color: var(--color-bg, white); 33 | } 34 | 35 | article, aside, details, figcaption, figure, 36 | footer, header, hgroup, menu, nav, section, main, form legend { 37 | display: block; 38 | } 39 | 40 | ol, ul, menu { 41 | list-style: none; 42 | } 43 | 44 | blockquote, q { 45 | quotes: none; 46 | } 47 | 48 | button, input, textarea, select { 49 | margin: 0; 50 | } 51 | 52 | .btn, .form-control, .link, .reset { // reset style of buttons + form controls 53 | background-color: transparent; 54 | padding: 0; 55 | border: 0; 56 | border-radius: 0; 57 | color: inherit; 58 | line-height: inherit; 59 | appearance: none; 60 | } 61 | 62 | select.form-control::-ms-expand { 63 | display: none; // hide Select default icon on IE 64 | } 65 | 66 | textarea { 67 | resize: vertical; 68 | overflow: auto; 69 | vertical-align: top; 70 | } 71 | 72 | input::-ms-clear { 73 | display: none; // hide X icon in IE and Edge 74 | } 75 | 76 | table { 77 | border-collapse: collapse; 78 | border-spacing: 0; 79 | } 80 | 81 | img, video, svg { 82 | max-width: 100%; 83 | } -------------------------------------------------------------------------------- /main/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Get Started | CodyFrame 9 | 10 | 11 |
12 |
13 |

Get started with CodyFrame

14 | 15 |
    16 |
  1. Import components from the CodyHouse UI Framework. To add a component to your project, create a new SCSS file (e.g., _{index}_{component-name}.scss) inside the "assets/css/components/" folder and paste in it the SCSS of the component. Create a new JS file (e.g., _{index}_{component-name}.js) inside the "assets/js/components/" folder and paste in it the JS of the component. You will find the index value in a comment in the SCSS/JS files of the component.
    2. 17 |
  2. Create your bespoke style (e.g., custom buttons and forms) using the Global Editors. To apply the custom style to your project, copy the SCSS generated by the editor and paste it in the corresponding file in the "main/css/custom-style" folder.
    3. 18 |
  3. Install one of our code editor extensions for HTML/CSS autocompletion.
    4. 19 |
20 | 21 |

Documentation

22 |

For further help, check the documentation.

23 |
24 |
25 | 26 | 27 | -------------------------------------------------------------------------------- /main/assets/css/custom-style/_shared-styles.scss: -------------------------------------------------------------------------------- 1 | @use '../base' as *; 2 | 3 | :root { 4 | // radius 5 | --radius: 0.375em; // border radius base size 6 | // 👇 uncomment to modify default radius values 7 | // --radius-sm: calc(var(--radius)/2); 8 | // --radius-md: var(--radius); 9 | // --radius-lg: calc(var(--radius)*2); 10 | 11 | // box shadow - 👇 uncomment to modify default shadow values 12 | // --shadow-ring: 0 0 0 1px hsla(0, 0%, 0%, 0.05); 13 | // --shadow-xs: 0 0 0 1px hsla(0, 0%, 0%, 0.02), 14 | // 0 1px 3px -1px hsla(0, 0%, 0%, 0.2); 15 | // --shadow-sm: 0 0.3px 0.4px hsla(0, 0%, 0%, 0.02), 16 | // 0 0.9px 1.5px hsla(0, 0%, 0%, 0.045), 17 | // 0 3.5px 6px hsla(0, 0%, 0%, 0.09); 18 | // --shadow-md: 0 0.9px 1.25px hsla(0, 0%, 0%, 0.025), 19 | // 0 3px 5px hsla(0, 0%, 0%, 0.05), 20 | // 0 12px 20px hsla(0, 0%, 0%, 0.09); 21 | // --shadow-lg: 0 1.2px 1.9px -1px hsla(0, 0%, 0%, 0.01), 22 | // 0 3px 5px -1px hsla(0, 0%, 0%, 0.015), 23 | // 0 8px 15px -1px hsla(0, 0%, 0%, 0.05), 24 | // 0 28px 40px -1px hsla(0, 0%, 0%, 0.1); 25 | // --shadow-xl: 0 1.5px 2.1px -6px hsla(0, 0%, 0%, 0.009), 26 | // 0 3.6px 5.2px -6px hsla(0, 0%, 0%, 0.0115), 27 | // 0 7.3px 10.6px -6px hsla(0, 0%, 0%, 0.0125), 28 | // 0 16.2px 21.9px -6px hsla(0, 0%, 0%, 0.025), 29 | // 0 46px 60px -6px hsla(0, 0%, 0%, 0.15); 30 | // --inner-glow: inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075); 31 | // --inner-glow-top: inset 0 1px 0.5px hsla(0, 0%, 100%, 0.075); 32 | } 33 | 34 | // -------------------------------- 35 | 36 | // (START) Global editor code https://codyhouse.co/ds/globals/shared-styles 37 | 38 | // -------------------------------- 39 | 40 | .hover\:reduce-opacity { 41 | opacity: 1; 42 | transition: all 0.3s ease; 43 | 44 | &:hover { 45 | opacity: 0.8; 46 | } 47 | } 48 | 49 | .hover\:scale { 50 | transition: transform 0.3s var(--ease-out-back); 51 | 52 | &:hover { 53 | transform: scale(1.1); 54 | } 55 | } 56 | 57 | .hover\:elevate { 58 | box-shadow: var(--shadow-sm); 59 | transition: all 0.3s ease; 60 | 61 | &:hover { 62 | box-shadow: var(--shadow-md); 63 | } 64 | } 65 | 66 | // text styles 67 | .link-subtle { 68 | color: inherit; 69 | cursor: pointer; 70 | text-decoration: none; 71 | transition: all 0.2s ease; 72 | 73 | &:hover { 74 | color: var(--color-primary); 75 | } 76 | } 77 | 78 | // -------------------------------- 79 | 80 | // (END) Global editor code 81 | 82 | // -------------------------------- -------------------------------------------------------------------------------- /main/assets/css/custom-style/_typography.scss: -------------------------------------------------------------------------------- 1 | @use '../base' as *; 2 | 3 | // -------------------------------- 4 | 5 | // (START) Global editor code https://codyhouse.co/ds/globals/typography 6 | 7 | // -------------------------------- 8 | 9 | :root { 10 | // font family 11 | --font-primary: system-ui, sans-serif; 12 | 13 | // font size 14 | --text-base-size: 1rem; // body font-size 15 | --text-scale-ratio: 1.2; // multiplier used to generate the type scale values 👇 16 | 17 | // line-height 18 | --body-line-height: 1.4; 19 | --heading-line-height: 1.2; 20 | 21 | // capital letters - used in combo with the lhCrop mixin 22 | --font-primary-capital-letter: 1; 23 | 24 | // unit - don't modify unless you want to change the typography unit (e.g., from Rem to Em units) 25 | --text-unit: var(--text-base-size); // if Em units → --text-unit: 1em; 26 | } 27 | 28 | :root, * { 29 | // type scale 30 | --text-xs: calc((var(--text-unit) / var(--text-scale-ratio)) / var(--text-scale-ratio)); 31 | --text-sm: calc(var(--text-xs) * var(--text-scale-ratio)); 32 | --text-md: calc(var(--text-sm) * var(--text-scale-ratio) * var(--text-scale-ratio)); 33 | --text-lg: calc(var(--text-md) * var(--text-scale-ratio)); 34 | --text-xl: calc(var(--text-lg) * var(--text-scale-ratio)); 35 | --text-xxl: calc(var(--text-xl) * var(--text-scale-ratio)); 36 | --text-xxxl: calc(var(--text-xxl) * var(--text-scale-ratio)); 37 | --text-xxxxl: calc(var(--text-xxxl) * var(--text-scale-ratio)); 38 | } 39 | 40 | @include breakpoint(md) { 41 | :root { 42 | --text-base-size: 1.125rem; 43 | --text-scale-ratio: 1.215; 44 | } 45 | } 46 | 47 | h1, h2, h3, h4 { 48 | --heading-font-weight: 700; 49 | } 50 | 51 | // -------------------------------- 52 | 53 | // (END) Global editor code 54 | 55 | // -------------------------------- 56 | 57 | html { 58 | -webkit-font-smoothing: antialiased; 59 | -moz-osx-font-smoothing: grayscale; 60 | } 61 | 62 | .link { 63 | text-decoration: none; 64 | background-image: linear-gradient(to right, currentColor 50%, alpha(var(--color-contrast-higher), 0.15) 50%); 65 | background-size: 200% 1px; 66 | background-repeat: no-repeat; 67 | background-position: 100% 100%; 68 | transition: background-position 0.2s; 69 | 70 | &:hover { 71 | background-position: 0% 100%; 72 | } 73 | } 74 | 75 | mark { 76 | background-color: alpha(var(--color-accent), 0.2); 77 | color: inherit; 78 | } 79 | 80 | .text-component { 81 | --line-height-multiplier: 1; 82 | --text-space-y-multiplier: 1; 83 | 84 | > * { // use Em units 85 | --text-unit: 1em; 86 | --space-unit: 1em; 87 | } 88 | 89 | blockquote { 90 | padding-left: 1em; 91 | border-left: 4px solid var(--color-contrast-lower); 92 | font-style: italic; 93 | } 94 | 95 | hr { 96 | background: var(--color-contrast-lower); 97 | height: 1px; 98 | } 99 | 100 | figcaption { 101 | font-size: var(--text-sm); 102 | color: var(--color-contrast-low); 103 | } 104 | } 105 | 106 | .article { // e.g., blog posts 107 | --body-line-height: 1.58; // set body line-height 108 | --text-space-y-multiplier: 1.2; // control vertical spacing 109 | } -------------------------------------------------------------------------------- /main/assets/js/scripts.min.js: -------------------------------------------------------------------------------- 1 | function Util(){}function resetFocusTabsStyle(){window.dispatchEvent(new CustomEvent("initFocusTabs"))}Util.hasClass=function(t,e){return t.classList.contains(e)},Util.addClass=function(t,e){var n=e.split(" ");t.classList.add(n[0]),1` of your document: 49 | 50 | ```html 51 | 52 | ``` 53 | 54 | The script is used in CSS to check if JavaScript is enabled and apply additional style accordingly. 55 | 56 | ## Gulp 57 | CodyFrame includes a Gulp configuration file. To start a project that runs on Gulp, navigate to the framework folder, and run the following two commands: 58 | 59 | 1) Install the node modules 60 | 61 | ``` 62 | npm install 63 | ``` 64 | 65 | 2) Launch your project on a development server 66 | 67 | ``` 68 | npm run gulp watch 69 | ``` 70 | 71 | ⚠️ **Note:** make sure you have [Npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm), [Node](https://nodejs.org/en/download/), and [Git](https://git-scm.com/) installed. 72 | 73 | 📝 [How to use CodyFrame with Webpack](https://codyhouse.co/ds/docs/framework#webpack) 74 | 75 | ## Component library 76 | 77 | CodyHouse's components are accessible, progressively enhanced, HTML, CSS, JS components that work seamlessly with CodyFrame. 78 | 79 | [Explore the components](https://codyhouse.co/ds/components) 80 | 81 | ## Global Editors 82 | 83 | The Global Editors are visual tools that you can use to create the style of typography elements, color palettes, spacing rules, buttons, and forms. They generate SCSS code compatible with CodyFrame. 84 | 85 | Explore the editors: 86 | 87 | - **Colors** [codyhouse.co/ds/globals/colors](https://codyhouse.co/ds/globals/colors) 88 | - **Typography** [codyhouse.co/ds/globals/typography](https://codyhouse.co/ds/globals/typography) 89 | - **Spacing** [codyhouse.co/ds/globals/spacing](https://codyhouse.co/ds/globals/spacing) 90 | - **Buttons** [codyhouse.co/ds/globals/buttons](https://codyhouse.co/ds/globals/buttons) 91 | - **Forms** [codyhouse.co/ds/globals/forms](https://codyhouse.co/ds/globals/forms) 92 | - **Shared styles** [codyhouse.co/ds/globals/shared-styles](https://codyhouse.co/ds/globals/shared-styles) 93 | 94 | ## Extensions 95 | 96 | Browse our extensions for VSCode, Sublime Text and Atom: 97 | 98 | [codyhouse.co/ds/docs/extensions](https://codyhouse.co/ds/docs/extensions) -------------------------------------------------------------------------------- /main/assets/css/base/_typography.scss: -------------------------------------------------------------------------------- 1 | // don't modify this file -> edit 📁 custom-style/_typography.scss to set your custom typography 2 | 3 | @use 'breakpoints' as *; 4 | 5 | :root { 6 | --heading-line-height: 1.2; 7 | --body-line-height: 1.4; 8 | } 9 | 10 | body { 11 | font-size: var(--text-base-size, 1rem); 12 | font-family: var(--font-primary, sans-serif); 13 | color: var(--color-contrast-high, hsl(210, 7%, 21%)); 14 | font-weight: var(--body-font-weight, normal); 15 | } 16 | 17 | h1, h2, h3, h4 { 18 | color: var(--color-contrast-higher, hsl(204, 28%, 7%)); 19 | line-height: var(--heading-line-height, 1.2); 20 | font-weight: var(--heading-font-weight, 700); 21 | } 22 | 23 | h1 { 24 | font-size: var(--text-xxl, 2rem); 25 | } 26 | 27 | h2 { 28 | font-size: var(--text-xl, 1.75rem); 29 | } 30 | 31 | h3 { 32 | font-size: var(--text-lg, 1.375rem); 33 | } 34 | 35 | h4 { 36 | font-size: var(--text-md, 1.125rem); 37 | } 38 | 39 | small { 40 | font-size: var(--text-sm, 0.75rem); 41 | } 42 | 43 | // -------------------------------- 44 | 45 | // Inline Text 46 | 47 | // -------------------------------- 48 | 49 | a, .link { 50 | color: var(--color-primary, hsl(250, 84%, 54%)); 51 | text-decoration: underline; 52 | } 53 | 54 | strong { 55 | font-weight: bold; 56 | } 57 | 58 | s { 59 | text-decoration: line-through; 60 | } 61 | 62 | u { 63 | text-decoration: underline; 64 | } 65 | 66 | // -------------------------------- 67 | 68 | // Text Component - Class used to stylize text blocks 69 | 70 | // -------------------------------- 71 | 72 | .text-component { 73 | h1, h2, h3, h4 { 74 | line-height: calc(var(--heading-line-height) * var(--line-height-multiplier, 1)); 75 | margin-bottom: calc(var(--space-unit) * 0.3125 * var(--text-space-y-multiplier, 1)); 76 | } 77 | 78 | h2, h3, h4 { 79 | margin-top: calc(var(--space-unit) * 0.9375 * var(--text-space-y-multiplier, 1)); 80 | } 81 | 82 | p, blockquote, ul li, ol li { 83 | line-height: calc(var(--body-line-height) * var(--line-height-multiplier, 1)); 84 | } 85 | 86 | ul, ol, p, blockquote, .text-component__block { 87 | margin-bottom: calc(var(--space-unit) * 0.9375 * var(--text-space-y-multiplier, 1)); 88 | } 89 | 90 | ul, ol { 91 | list-style-position: inside; 92 | 93 | ul, ol { 94 | padding-left: 1em; 95 | margin-bottom: 0; 96 | } 97 | } 98 | 99 | ul { 100 | list-style-type: disc; 101 | } 102 | 103 | ol { 104 | list-style-type: decimal; 105 | } 106 | 107 | img { 108 | display: block; 109 | margin: 0 auto; 110 | } 111 | 112 | figcaption { 113 | text-align: center; 114 | margin-top: calc(var(--space-unit) * 0.5); 115 | } 116 | 117 | em { 118 | font-style: italic; 119 | } 120 | 121 | hr { 122 | margin-top: calc(var(--space-unit) * 1.875 * var(--text-space-y-multiplier, 1)); 123 | margin-bottom: calc(var(--space-unit) * 1.875 * var(--text-space-y-multiplier, 1)); 124 | margin-left: auto; 125 | margin-right: auto; 126 | } 127 | 128 | > *:first-child { 129 | margin-top: 0; 130 | } 131 | 132 | > *:last-child { 133 | margin-bottom: 0; 134 | } 135 | } 136 | 137 | // text block container 138 | .text-component__block--full-width { 139 | width: 100vw; 140 | margin-left: calc(50% - 50vw); 141 | } 142 | 143 | @include breakpoint(sm) { 144 | .text-component__block--left, 145 | .text-component__block--right { 146 | width: 45%; 147 | 148 | img { 149 | width: 100%; 150 | } 151 | } 152 | 153 | .text-component__block--left { 154 | float: left; 155 | margin-right: calc(var(--space-unit) * 0.9375 * var(--text-space-y-multiplier, 1)); 156 | } 157 | 158 | .text-component__block--right { 159 | float: right; 160 | margin-left: calc(var(--space-unit) * 0.9375 * var(--text-space-y-multiplier, 1)); 161 | } 162 | } 163 | 164 | // outset content 165 | @include breakpoint(xl) { 166 | .text-component__block--outset { 167 | width: calc(100% + 10.5 * var(--space-unit)); 168 | 169 | img { 170 | width: 100%; 171 | } 172 | } 173 | 174 | .text-component__block--outset:not(.text-component__block--right) { 175 | margin-left: calc(-5.25 * var(--space-unit)); 176 | } 177 | 178 | .text-component__block--left, .text-component__block--right { 179 | width: 50%; 180 | } 181 | 182 | .text-component__block--right.text-component__block--outset { 183 | margin-right: calc(-5.25 * var(--space-unit)); 184 | } 185 | } -------------------------------------------------------------------------------- /main/assets/css/base/_mixins.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:math'; 2 | 3 | // -------------------------------- 4 | 5 | // Typography 6 | 7 | // -------------------------------- 8 | 9 | // edit font rendering -> tip: use for light text on dark backgrounds 10 | @mixin fontSmooth { 11 | -webkit-font-smoothing: antialiased; 12 | -moz-osx-font-smoothing: grayscale; 13 | } 14 | 15 | // crop top space on text elements - caused by line height 16 | @mixin lhCrop($line-height, $capital-letter: 1) { 17 | &::before { 18 | content: ''; 19 | display: block; 20 | height: 0; 21 | width: 0; 22 | margin-top: calc((#{$capital-letter} - #{$line-height}) * 0.5em); 23 | } 24 | } 25 | 26 | // edit text unit on a component level 27 | @mixin textUnit($text-unit) { 28 | --text-unit: #{$text-unit}; 29 | font-size: var(--text-unit); 30 | } 31 | 32 | // -------------------------------- 33 | 34 | // Spacing 35 | 36 | // -------------------------------- 37 | 38 | // edit space unit on a component level 39 | @mixin spaceUnit($space-unit) { 40 | --space-unit: #{$space-unit}; 41 | } 42 | 43 | // -------------------------------- 44 | 45 | // Reset 46 | 47 | // -------------------------------- 48 | 49 | // reset user agent style 50 | @mixin reset { 51 | background-color: transparent; 52 | padding: 0; 53 | border: 0; 54 | border-radius: 0; 55 | color: inherit; 56 | line-height: inherit; 57 | appearance: none; 58 | } 59 | 60 | // -------------------------------- 61 | 62 | // Colors 63 | 64 | // -------------------------------- 65 | 66 | // define HSL color variable 67 | @mixin defineColorHSL($color, $hue, $saturation, $lightness) { 68 | #{$color}: unquote("hsl(#{$hue}, #{$saturation}, #{$lightness})");#{$color}-h: #{$hue};#{$color}-s: #{$saturation};#{$color}-l: #{$lightness}; 69 | } 70 | 71 | // return color with different opacity value 72 | @function alpha($color, $opacity) { 73 | $color: str-replace($color, 'var('); 74 | $color: str-replace($color, ')'); 75 | $color-h: var(#{$color+'-h'}); 76 | $color-s: var(#{$color+'-s'}); 77 | $color-l: var(#{$color+'-l'}); 78 | @return hsla($color-h, $color-s, $color-l, $opacity); 79 | } 80 | 81 | // return color with different lightness value 82 | @function lightness($color, $lightnessMultiplier) { 83 | $color: str-replace($color, 'var('); 84 | $color: str-replace($color, ')'); 85 | $color-h: var(#{$color+'-h'}); 86 | $color-s: var(#{$color+'-s'}); 87 | $color-l: var(#{$color+'-l'}); 88 | @return hsl($color-h, $color-s, calc(#{$color-l} * #{$lightnessMultiplier})); 89 | } 90 | 91 | // modify color HSLA values 92 | @function adjustHSLA($color, $hueMultiplier: 1, $saturationMultiplier: 1, $lightnessMultiplier: 1, $opacity: 1) { 93 | $color: str-replace($color, 'var('); 94 | $color: str-replace($color, ')'); 95 | $color-h: var(#{$color+'-h'}); 96 | $color-s: var(#{$color+'-s'}); 97 | $color-l: var(#{$color+'-l'}); 98 | @return hsla(calc(#{$color-h} * #{$hueMultiplier}), calc(#{$color-s} * #{$saturationMultiplier}), calc(#{$color-l} * #{$lightnessMultiplier}), $opacity); 99 | } 100 | 101 | // replace substring with another string 102 | // credits: https://css-tricks.com/snippets/sass/str-replace-function/ 103 | @function str-replace($string, $search, $replace: '') { 104 | $index: str-index($string, $search); 105 | @if $index { 106 | @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); 107 | } 108 | @return $string; 109 | } 110 | 111 | // -------------------------------- 112 | 113 | // Accessibility 114 | 115 | // -------------------------------- 116 | 117 | // hide - content made available only to screen readers 118 | @mixin srHide { 119 | position: absolute; 120 | clip: rect(1px, 1px, 1px, 1px); 121 | clip-path: inset(50%); 122 | } 123 | 124 | // show 125 | @mixin srShow { 126 | position: static; 127 | clip: auto; 128 | clip-path: none; 129 | } 130 | 131 | // -------------------------------- 132 | 133 | // CSS Triangle 134 | 135 | // -------------------------------- 136 | 137 | @mixin triangle ($direction: up, $width: 12px, $color: red) { 138 | width: 0; 139 | height: 0; 140 | border: $width solid transparent; 141 | 142 | @if( $direction == left ) { 143 | border-right-color: $color; 144 | } @else if( $direction == right ) { 145 | border-left-color: $color; 146 | } @else if( $direction == down ) { 147 | border-top-color: $color; 148 | } @else { 149 | border-bottom-color: $color; 150 | } 151 | } -------------------------------------------------------------------------------- /main/assets/css/components/_1_list.scss: -------------------------------------------------------------------------------- 1 | @use '../base' as *; 2 | 3 | /* -------------------------------- 4 | 5 | File#: _1_list 6 | Title: List 7 | Descr: Custom list component 8 | Usage: codyhouse.co/license 9 | 10 | -------------------------------- */ 11 | 12 | :root { 13 | --list-space-y: 0.375em; // vertical gaps 14 | --list-offset: 1em; // sublist horizontal offset 15 | --list-line-height-multiplier: 1; // line-height multiplier 16 | } 17 | 18 | .list, .text-component .list { 19 | padding-left: 0; 20 | list-style: none; 21 | 22 | ul, ol { 23 | list-style: none; 24 | margin: 0; // reset 25 | margin-top: calc((var(--list-space-y) / 2) * var(--text-space-y-multiplier, 1)); 26 | padding-top: calc((var(--list-space-y) / 2) * var(--text-space-y-multiplier, 1)); 27 | padding-left: var(--list-offset); 28 | } 29 | 30 | li { 31 | padding-bottom: calc((var(--list-space-y) / 2) * var(--text-space-y-multiplier, 1)); 32 | margin-bottom: calc((var(--list-space-y) / 2) * var(--text-space-y-multiplier, 1)); 33 | line-height: calc(var(--body-line-height) * var(--list-line-height-multiplier)); 34 | } 35 | 36 | > li:last-child, ul > li:last-child, ol > li:last-child { 37 | margin-bottom: 0; 38 | } 39 | 40 | &:not(.list--border) > li:last-child, ul > li:last-child, ol > li:last-child { 41 | padding-bottom: 0; 42 | } 43 | } 44 | 45 | /* #region (ul + ol) */ 46 | .list--ul, .text-component .list--ul, 47 | .list--ol, .text-component .list--ol { 48 | --list-offset: calc(var(--list-bullet-size) + var(--list-bullet-margin-right)); 49 | 50 | ul, ol { 51 | padding-left: 0; 52 | } 53 | 54 | li { 55 | padding-left: var(--list-offset); 56 | } 57 | 58 | li::before { 59 | display: inline-flex; 60 | justify-content: center; 61 | align-items: center; 62 | 63 | width: var(--list-bullet-size); 64 | height: var(--list-bullet-size); 65 | vertical-align: middle; 66 | position: relative; 67 | top: -0.1em; 68 | left: calc(var(--list-bullet-margin-right) * -1); 69 | margin-left: calc(var(--list-bullet-size) * -1); 70 | } 71 | } 72 | 73 | // unordered list 74 | .list--ul, .text-component .list--ul { 75 | --list-bullet-size: 7px; // dot width and height 76 | --list-bullet-margin-right: 12px; // gap between bullet and content 77 | 78 | > li::before { // bullet 79 | content: ''; 80 | border-radius: 50%; 81 | color: alpha(var(--color-contrast-higher), 0.1); // bullet color 82 | background-color: currentColor; 83 | } 84 | 85 | ul li::before { 86 | background-color: transparent; 87 | box-shadow: inset 0 0 0 2px currentColor; 88 | } 89 | } 90 | 91 | // ordered list 92 | .list--ol, .text-component .list--ol { 93 | --list-bullet-size: 26px; // ⚠️ use px or rem units - circle width and height 94 | --list-bullet-margin-right: 6px; // ⚠️ use px or rem units - gap between circle and content 95 | --list-bullet-font-size: 14px; // ⚠️ use px or rem units - bullet font size 96 | counter-reset: list-items; 97 | 98 | > li { 99 | counter-increment: list-items; 100 | } 101 | 102 | ol { 103 | counter-reset: list-items; 104 | } 105 | 106 | > li::before { 107 | content: counter(list-items); 108 | font-size: var(--list-bullet-font-size, 14px); 109 | background-color: alpha(var(--color-contrast-higher), 0.075); 110 | color: var(--color-contrast-higher); 111 | line-height: 1; 112 | border-radius: 50%; 113 | } 114 | 115 | ol > li::before { 116 | background-color: transparent; 117 | box-shadow: inset 0 0 0 2px alpha(var(--color-contrast-higher), 0.075); 118 | } 119 | } 120 | /* #endregion */ 121 | 122 | /* #region (border) */ 123 | .list--border, .text-component .list--border { // show border divider among list items 124 | li:not(:last-child) { 125 | border-bottom: 1px solid var(--color-contrast-lower); 126 | } 127 | 128 | ul, ol { 129 | border-top: 1px solid var(--color-contrast-lower); 130 | } 131 | } 132 | /* #endregion */ 133 | 134 | /* #region (icons) */ 135 | .list--icons, .text-component .list--icons { // use icons as bullet points 136 | --list-bullet-size: 24px; 137 | --list-bullet-margin-right: 8px; // gap between icon and text 138 | --list-offset: calc(var(--list-bullet-size) + var(--list-bullet-margin-right)); 139 | 140 | ul, ol { 141 | padding-left: var(--list-offset); 142 | } 143 | } 144 | 145 | .list__icon { 146 | position: relative; 147 | width: var(--list-bullet-size); 148 | height: var(--list-bullet-size); 149 | margin-right: var(--list-bullet-margin-right); 150 | 151 | &:not(.top-0) { 152 | top: calc((1em * var(--body-line-height) * var(--list-line-height-multiplier) - var(--list-bullet-size)) / 2); 153 | } 154 | } 155 | 156 | /* #endregion */ -------------------------------------------------------------------------------- /main/assets/css/custom-style/_buttons.scss: -------------------------------------------------------------------------------- 1 | @use '../base' as *; 2 | 3 | // -------------------------------- 4 | 5 | // (START) Global editor code https://codyhouse.co/ds/globals/buttons 6 | 7 | // -------------------------------- 8 | 9 | :root { 10 | --btn-font-size: 1em; 11 | --btn-padding-x: var(--space-sm); 12 | --btn-padding-y: var(--space-xxs); 13 | --btn-radius: var(--radius-md); 14 | } 15 | 16 | .btn { 17 | background: var(--color-bg-dark); 18 | color: var(--color-contrast-higher); 19 | cursor: pointer; 20 | text-decoration: none; 21 | line-height: 1.2; 22 | font-weight: 500; 23 | transition: all 0.2s ease; 24 | will-change: transform; 25 | 26 | &:focus-visible { 27 | outline: none; 28 | box-shadow: 0 0 0 2px var(--color-bg), 29 | 0 0 0 4px alpha(var(--color-contrast-higher), 0.15); 30 | } 31 | 32 | &:active { 33 | transform: translateY(2px); 34 | } 35 | } 36 | 37 | // themes 38 | .btn--primary { 39 | background: var(--color-primary); 40 | box-shadow: inset 0 1px 0 alpha(var(--color-white), 0.15), 41 | 0 1px 3px alpha(var(--color-primary-darker), 0.25), 42 | 0 2px 6px alpha(var(--color-primary-darker), 0.1), 43 | 0 6px 10px -2px alpha(var(--color-primary-darker), 0.25); 44 | color: var(--color-white); 45 | 46 | &:hover { 47 | background: var(--color-primary-light); 48 | box-shadow: inset 0 1px 0 alpha(var(--color-white), 0.15), 49 | 0 1px 2px alpha(var(--color-primary-darker), 0.25), 50 | 0 1px 4px alpha(var(--color-primary-darker), 0.1), 51 | 0 3px 6px -2px alpha(var(--color-primary-darker), 0.25); 52 | } 53 | 54 | &:focus-visible { 55 | box-shadow: inset 0 1px 0 alpha(var(--color-white), 0.15), 56 | 0 1px 2px alpha(var(--color-primary-darker), 0.25), 57 | 0 1px 4px alpha(var(--color-primary-darker), 0.1), 58 | 0 3px 6px -2px alpha(var(--color-primary-darker), 0.25), 59 | 0 0 0 2px var(--color-bg), 60 | 0 0 0 4px var(--color-primary); 61 | } 62 | } 63 | 64 | .btn--subtle { 65 | background: var(--color-bg-lighter); 66 | color: var(--color-contrast-higher); 67 | box-shadow: inset 0 1px 0 alpha(var(--color-white), 0.1), 68 | 0 0 0 1px alpha(var(--color-black), 0.02), 69 | 0 0.3px 0.4px alpha(var(--color-black), 0.025), 70 | 0 1px 3px -1px alpha(var(--color-black), 0.2), 71 | 0 3.5px 6px alpha(var(--color-black), 0.12); 72 | 73 | &:hover { 74 | background: var(--color-bg-light); 75 | box-shadow: inset 0 1px 0 alpha(var(--color-white), 0.1), 76 | 0 0 0 1px alpha(var(--color-black), 0.02), 77 | 0 0.1px 0.3px alpha(var(--color-black), 0.06), 78 | 0 1px 2px alpha(var(--color-black), 0.12), 79 | 0 1px 3px -1px alpha(var(--color-black), 0.2); 80 | } 81 | 82 | &:focus-visible { 83 | box-shadow: inset 0 1px 0 alpha(var(--color-white), 0.1), 84 | 0 0 0 1px alpha(var(--color-black), 0.02), 85 | 0 0.3px 0.4px alpha(var(--color-black), 0.025), 86 | 0 1px 3px -1px alpha(var(--color-black), 0.2), 87 | 0 3.5px 6px alpha(var(--color-black), 0.12), 88 | 0 0 0 2px var(--color-bg), 89 | 0 0 0 4px var(--color-contrast-high); 90 | } 91 | } 92 | 93 | .btn--accent { 94 | background: var(--color-accent); 95 | color: var(--color-white); 96 | box-shadow: inset 0 1px 0 alpha(var(--color-white), 0.15), 97 | 0 1px 3px alpha(var(--color-accent-darker), 0.25), 98 | 0 2px 6px alpha(var(--color-accent-darker), 0.1), 99 | 0 6px 10px -2px alpha(var(--color-accent-darker), 0.25); 100 | 101 | &:hover { 102 | background: var(--color-accent-light); 103 | box-shadow: inset 0 1px 0 alpha(var(--color-white), 0.15), 104 | 0 1px 2px alpha(var(--color-accent-darker), 0.25), 105 | 0 1px 4px alpha(var(--color-accent-darker), 0.1), 106 | 0 3px 6px -2px alpha(var(--color-accent-darker), 0.1); 107 | } 108 | 109 | &:focus-visible { 110 | box-shadow: inset 0 1px 0 alpha(var(--color-white), 0.15), 111 | 0 1px 2px alpha(var(--color-accent-darker), 0.25), 112 | 0 1px 4px alpha(var(--color-accent-darker), 0.1), 113 | 0 3px 6px -2px alpha(var(--color-accent-darker), 0.1), 114 | 0 0 0 2px var(--color-bg), 115 | 0 0 0 4px var(--color-accent); 116 | } 117 | } 118 | 119 | // feedback 120 | .btn--disabled, .btn[disabled], .btn[readonly] { 121 | opacity: 0.6; 122 | cursor: not-allowed; 123 | } 124 | 125 | // size 126 | .btn--sm { 127 | font-size: 0.8em; 128 | } 129 | 130 | .btn--md { 131 | font-size: 1.2em; 132 | } 133 | 134 | .btn--lg { 135 | font-size: 1.4em; 136 | } 137 | 138 | // -------------------------------- 139 | 140 | // (END) Global editor code 141 | 142 | // -------------------------------- -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var sass = require('gulp-sass')(require('sass-embedded')); 3 | var sassGlob = require('gulp-sass-glob'); 4 | var browserSync = require('browser-sync').create(); 5 | var postcss = require('gulp-postcss'); 6 | var autoprefixer = require('autoprefixer'); 7 | var concat = require('gulp-concat'); 8 | var rename = require('gulp-rename'); 9 | var uglify = require('gulp-uglify'); 10 | var cleanCSS = require('gulp-clean-css'); 11 | var purgecss = require('gulp-purgecss'); 12 | 13 | // js file paths 14 | var utilJsPath = 'main/assets/js'; // util.js path - you may need to update this if including the framework as external node module 15 | var componentsJsPath = 'main/assets/js/components/*.js'; // component js files 16 | var scriptsJsPath = 'main/assets/js'; //folder for final scripts.js/scripts.min.js files 17 | 18 | // css file paths 19 | var cssFolder = 'main/assets/css'; // folder for final style.css/style-custom-prop-fallbac.css files 20 | var scssFilesPath = 'main/assets/css/**/*.scss'; // scss files to watch 21 | 22 | function reload(done) { 23 | browserSync.reload(); 24 | done(); 25 | } 26 | 27 | /* Gulp watch tasks */ 28 | // This task is used to convert the scss to css and compress it. 29 | gulp.task('sass', function() { 30 | return gulp.src(scssFilesPath) 31 | .pipe(sassGlob({sassModules: true})) 32 | .pipe(sass().on('error', sass.logError)) 33 | .pipe(postcss([autoprefixer()])) 34 | .pipe(gulp.dest(cssFolder)) 35 | .pipe(browserSync.reload({ 36 | stream: true 37 | })) 38 | .pipe(rename('style.min.css')) 39 | .pipe(cleanCSS()) 40 | .pipe(gulp.dest(cssFolder)) 41 | .pipe(browserSync.reload({ 42 | stream: true 43 | })); 44 | }); 45 | // This task is used to combine all js files in a single scripts.min.js. 46 | gulp.task('scripts', function() { 47 | return gulp.src([utilJsPath+'/util.js', componentsJsPath]) 48 | .pipe(concat('scripts.js')) 49 | .pipe(gulp.dest(scriptsJsPath)) 50 | .pipe(browserSync.reload({ 51 | stream: true 52 | })) 53 | .pipe(rename('scripts.min.js')) 54 | .pipe(uglify()) 55 | .pipe(gulp.dest(scriptsJsPath)) 56 | .pipe(browserSync.reload({ 57 | stream: true 58 | })); 59 | }); 60 | // This task is used to reload the project whan changes are made to a html/scss/js file. 61 | gulp.task('browserSync', gulp.series(function (done) { 62 | browserSync.init({ 63 | server: { 64 | baseDir: 'main' 65 | }, 66 | notify: false 67 | }) 68 | done(); 69 | })); 70 | 71 | gulp.task('watch', gulp.series(['browserSync', 'sass', 'scripts'], function () { 72 | gulp.watch('main/*.html', gulp.series(reload)); 73 | gulp.watch('main/assets/css/**/*.scss', gulp.series(['sass'])); 74 | gulp.watch(componentsJsPath, gulp.series(['scripts'])); 75 | })); 76 | 77 | 78 | /* Gulp dist task */ 79 | // create a distribution folder for production 80 | var distFolder = 'dist/'; 81 | var assetsFolder = 'dist/assets/'; 82 | 83 | gulp.task('dist', async function(){ 84 | // remove unused classes from the style.css file with PurgeCSS and copy it to the dist folder 85 | await purgeCSS(); 86 | // minify the scripts.js file and copy it to the dist folder 87 | await minifyJs(); 88 | // copy any additional js files to the dist folder 89 | await moveJS(); 90 | // copy all the assets inside main/assets/img folder to the dist folder 91 | await moveAssets(); 92 | // copy all html files inside main folder to the dist folder 93 | await moveContent(); 94 | console.log('Distribution task completed!') 95 | }); 96 | 97 | function purgeCSS() { 98 | return new Promise(function(resolve, reject) { 99 | var stream = gulp.src(cssFolder+'/style.css') 100 | .pipe(purgecss({ 101 | content: ['main/*.html', scriptsJsPath+'/scripts.js'], 102 | safelist: { 103 | standard: ['.is-hidden', '.is-visible'], 104 | deep: [/class$/], 105 | greedy: [] 106 | }, 107 | defaultExtractor: content => content.match(/[\w-/:%@]+(? 1) Util.addClass(el, classList.slice(1).join(' ')); 13 | }; 14 | 15 | Util.removeClass = function(el, className) { 16 | var classList = className.split(' '); 17 | el.classList.remove(classList[0]); 18 | if (classList.length > 1) Util.removeClass(el, classList.slice(1).join(' ')); 19 | }; 20 | 21 | Util.toggleClass = function(el, className, bool) { 22 | if(bool) Util.addClass(el, className); 23 | else Util.removeClass(el, className); 24 | }; 25 | 26 | Util.setAttributes = function(el, attrs) { 27 | for(var key in attrs) { 28 | el.setAttribute(key, attrs[key]); 29 | } 30 | }; 31 | 32 | /* DOM manipulation */ 33 | Util.getChildrenByClassName = function(el, className) { 34 | var children = el.children, 35 | childrenByClass = []; 36 | for (var i = 0; i < children.length; i++) { 37 | if (Util.hasClass(children[i], className)) childrenByClass.push(children[i]); 38 | } 39 | return childrenByClass; 40 | }; 41 | 42 | Util.is = function(elem, selector) { 43 | if(selector.nodeType){ 44 | return elem === selector; 45 | } 46 | 47 | var qa = (typeof(selector) === 'string' ? document.querySelectorAll(selector) : selector), 48 | length = qa.length; 49 | 50 | while(length--){ 51 | if(qa[length] === elem){ 52 | return true; 53 | } 54 | } 55 | 56 | return false; 57 | }; 58 | 59 | /* Animate height of an element */ 60 | Util.setHeight = function(start, to, element, duration, cb, timeFunction) { 61 | var change = to - start, 62 | currentTime = null; 63 | 64 | var animateHeight = function(timestamp){ 65 | if (!currentTime) currentTime = timestamp; 66 | var progress = timestamp - currentTime; 67 | if(progress > duration) progress = duration; 68 | var val = parseInt((progress/duration)*change + start); 69 | if(timeFunction) { 70 | val = Math[timeFunction](progress, start, to - start, duration); 71 | } 72 | element.style.height = val+"px"; 73 | if(progress < duration) { 74 | window.requestAnimationFrame(animateHeight); 75 | } else { 76 | if(cb) cb(); 77 | } 78 | }; 79 | 80 | //set the height of the element before starting animation -> fix bug on Safari 81 | element.style.height = start+"px"; 82 | window.requestAnimationFrame(animateHeight); 83 | }; 84 | 85 | /* Smooth Scroll */ 86 | Util.scrollTo = function(final, duration, cb, scrollEl) { 87 | var element = scrollEl || window; 88 | var start = element.scrollTop || document.documentElement.scrollTop, 89 | currentTime = null; 90 | 91 | if(!scrollEl) start = window.scrollY || document.documentElement.scrollTop; 92 | 93 | var animateScroll = function(timestamp){ 94 | if (!currentTime) currentTime = timestamp; 95 | var progress = timestamp - currentTime; 96 | if(progress > duration) progress = duration; 97 | var val = Math.easeInOutQuad(progress, start, final-start, duration); 98 | element.scrollTo(0, val); 99 | if(progress < duration) { 100 | window.requestAnimationFrame(animateScroll); 101 | } else { 102 | cb && cb(); 103 | } 104 | }; 105 | 106 | window.requestAnimationFrame(animateScroll); 107 | }; 108 | 109 | /* Move Focus */ 110 | Util.moveFocus = function (element) { 111 | if( !element ) element = document.getElementsByTagName("body")[0]; 112 | element.focus(); 113 | if (document.activeElement !== element) { 114 | element.setAttribute('tabindex','-1'); 115 | element.focus(); 116 | } 117 | }; 118 | 119 | /* Misc */ 120 | 121 | Util.getIndexInArray = function(array, el) { 122 | return Array.prototype.indexOf.call(array, el); 123 | }; 124 | 125 | Util.cssSupports = function(property, value) { 126 | return CSS.supports(property, value); 127 | }; 128 | 129 | // merge a set of user options into plugin defaults 130 | // https://gomakethings.com/vanilla-javascript-version-of-jquery-extend/ 131 | Util.extend = function() { 132 | // Variables 133 | var extended = {}; 134 | var deep = false; 135 | var i = 0; 136 | var length = arguments.length; 137 | 138 | // Check if a deep merge 139 | if ( Object.prototype.toString.call( arguments[0] ) === '[object Boolean]' ) { 140 | deep = arguments[0]; 141 | i++; 142 | } 143 | 144 | // Merge the object into the extended object 145 | var merge = function (obj) { 146 | for ( var prop in obj ) { 147 | if ( Object.prototype.hasOwnProperty.call( obj, prop ) ) { 148 | // If deep merge and property is an object, merge properties 149 | if ( deep && Object.prototype.toString.call(obj[prop]) === '[object Object]' ) { 150 | extended[prop] = extend( true, extended[prop], obj[prop] ); 151 | } else { 152 | extended[prop] = obj[prop]; 153 | } 154 | } 155 | } 156 | }; 157 | 158 | // Loop through each object and conduct a merge 159 | for ( ; i < length; i++ ) { 160 | var obj = arguments[i]; 161 | merge(obj); 162 | } 163 | 164 | return extended; 165 | }; 166 | 167 | // Check if Reduced Motion is enabled 168 | Util.osHasReducedMotion = function() { 169 | if(!window.matchMedia) return false; 170 | var matchMediaObj = window.matchMedia('(prefers-reduced-motion: reduce)'); 171 | if(matchMediaObj) return matchMediaObj.matches; 172 | return false; // return false if not supported 173 | }; 174 | 175 | /* Animation curves */ 176 | Math.easeInOutQuad = function (t, b, c, d) { 177 | t /= d/2; 178 | if (t < 1) return c/2*t*t + b; 179 | t--; 180 | return -c/2 * (t*(t-2) - 1) + b; 181 | }; 182 | 183 | Math.easeInQuart = function (t, b, c, d) { 184 | t /= d; 185 | return c*t*t*t*t + b; 186 | }; 187 | 188 | Math.easeOutQuart = function (t, b, c, d) { 189 | t /= d; 190 | t--; 191 | return -c * (t*t*t*t - 1) + b; 192 | }; 193 | 194 | Math.easeInOutQuart = function (t, b, c, d) { 195 | t /= d/2; 196 | if (t < 1) return c/2*t*t*t*t + b; 197 | t -= 2; 198 | return -c/2 * (t*t*t*t - 2) + b; 199 | }; 200 | 201 | Math.easeOutElastic = function (t, b, c, d) { 202 | var s=1.70158;var p=d*0.7;var a=c; 203 | if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; 204 | if (a < Math.abs(c)) { a=c; var s=p/4; } 205 | else var s = p/(2*Math.PI) * Math.asin (c/a); 206 | return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b; 207 | }; 208 | 209 | 210 | /* JS Utility Classes */ 211 | 212 | // make focus ring visible only for keyboard navigation (i.e., tab key) 213 | (function() { 214 | var focusTab = document.getElementsByClassName('js-tab-focus'), 215 | shouldInit = false, 216 | outlineStyle = false, 217 | eventDetected = false; 218 | 219 | function detectClick() { 220 | if(focusTab.length > 0) { 221 | resetFocusStyle(false); 222 | window.addEventListener('keydown', detectTab); 223 | } 224 | window.removeEventListener('mousedown', detectClick); 225 | outlineStyle = false; 226 | eventDetected = true; 227 | }; 228 | 229 | function detectTab(event) { 230 | if(event.keyCode !== 9) return; 231 | resetFocusStyle(true); 232 | window.removeEventListener('keydown', detectTab); 233 | window.addEventListener('mousedown', detectClick); 234 | outlineStyle = true; 235 | }; 236 | 237 | function resetFocusStyle(bool) { 238 | var outlineStyle = bool ? '' : 'none'; 239 | for(var i = 0; i < focusTab.length; i++) { 240 | focusTab[i].style.setProperty('outline', outlineStyle); 241 | } 242 | }; 243 | 244 | function initFocusTabs() { 245 | if(shouldInit) { 246 | if(eventDetected) resetFocusStyle(outlineStyle); 247 | return; 248 | } 249 | shouldInit = focusTab.length > 0; 250 | window.addEventListener('mousedown', detectClick); 251 | }; 252 | 253 | initFocusTabs(); 254 | window.addEventListener('initFocusTabs', initFocusTabs); 255 | }()); 256 | 257 | function resetFocusTabsStyle() { 258 | window.dispatchEvent(new CustomEvent('initFocusTabs')); 259 | }; -------------------------------------------------------------------------------- /main/assets/js/scripts.js: -------------------------------------------------------------------------------- 1 | // Utility function 2 | function Util () {}; 3 | 4 | /* class manipulation functions */ 5 | Util.hasClass = function(el, className) { 6 | return el.classList.contains(className); 7 | }; 8 | 9 | Util.addClass = function(el, className) { 10 | var classList = className.split(' '); 11 | el.classList.add(classList[0]); 12 | if (classList.length > 1) Util.addClass(el, classList.slice(1).join(' ')); 13 | }; 14 | 15 | Util.removeClass = function(el, className) { 16 | var classList = className.split(' '); 17 | el.classList.remove(classList[0]); 18 | if (classList.length > 1) Util.removeClass(el, classList.slice(1).join(' ')); 19 | }; 20 | 21 | Util.toggleClass = function(el, className, bool) { 22 | if(bool) Util.addClass(el, className); 23 | else Util.removeClass(el, className); 24 | }; 25 | 26 | Util.setAttributes = function(el, attrs) { 27 | for(var key in attrs) { 28 | el.setAttribute(key, attrs[key]); 29 | } 30 | }; 31 | 32 | /* DOM manipulation */ 33 | Util.getChildrenByClassName = function(el, className) { 34 | var children = el.children, 35 | childrenByClass = []; 36 | for (var i = 0; i < children.length; i++) { 37 | if (Util.hasClass(children[i], className)) childrenByClass.push(children[i]); 38 | } 39 | return childrenByClass; 40 | }; 41 | 42 | Util.is = function(elem, selector) { 43 | if(selector.nodeType){ 44 | return elem === selector; 45 | } 46 | 47 | var qa = (typeof(selector) === 'string' ? document.querySelectorAll(selector) : selector), 48 | length = qa.length; 49 | 50 | while(length--){ 51 | if(qa[length] === elem){ 52 | return true; 53 | } 54 | } 55 | 56 | return false; 57 | }; 58 | 59 | /* Animate height of an element */ 60 | Util.setHeight = function(start, to, element, duration, cb, timeFunction) { 61 | var change = to - start, 62 | currentTime = null; 63 | 64 | var animateHeight = function(timestamp){ 65 | if (!currentTime) currentTime = timestamp; 66 | var progress = timestamp - currentTime; 67 | if(progress > duration) progress = duration; 68 | var val = parseInt((progress/duration)*change + start); 69 | if(timeFunction) { 70 | val = Math[timeFunction](progress, start, to - start, duration); 71 | } 72 | element.style.height = val+"px"; 73 | if(progress < duration) { 74 | window.requestAnimationFrame(animateHeight); 75 | } else { 76 | if(cb) cb(); 77 | } 78 | }; 79 | 80 | //set the height of the element before starting animation -> fix bug on Safari 81 | element.style.height = start+"px"; 82 | window.requestAnimationFrame(animateHeight); 83 | }; 84 | 85 | /* Smooth Scroll */ 86 | Util.scrollTo = function(final, duration, cb, scrollEl) { 87 | var element = scrollEl || window; 88 | var start = element.scrollTop || document.documentElement.scrollTop, 89 | currentTime = null; 90 | 91 | if(!scrollEl) start = window.scrollY || document.documentElement.scrollTop; 92 | 93 | var animateScroll = function(timestamp){ 94 | if (!currentTime) currentTime = timestamp; 95 | var progress = timestamp - currentTime; 96 | if(progress > duration) progress = duration; 97 | var val = Math.easeInOutQuad(progress, start, final-start, duration); 98 | element.scrollTo(0, val); 99 | if(progress < duration) { 100 | window.requestAnimationFrame(animateScroll); 101 | } else { 102 | cb && cb(); 103 | } 104 | }; 105 | 106 | window.requestAnimationFrame(animateScroll); 107 | }; 108 | 109 | /* Move Focus */ 110 | Util.moveFocus = function (element) { 111 | if( !element ) element = document.getElementsByTagName("body")[0]; 112 | element.focus(); 113 | if (document.activeElement !== element) { 114 | element.setAttribute('tabindex','-1'); 115 | element.focus(); 116 | } 117 | }; 118 | 119 | /* Misc */ 120 | 121 | Util.getIndexInArray = function(array, el) { 122 | return Array.prototype.indexOf.call(array, el); 123 | }; 124 | 125 | Util.cssSupports = function(property, value) { 126 | return CSS.supports(property, value); 127 | }; 128 | 129 | // merge a set of user options into plugin defaults 130 | // https://gomakethings.com/vanilla-javascript-version-of-jquery-extend/ 131 | Util.extend = function() { 132 | // Variables 133 | var extended = {}; 134 | var deep = false; 135 | var i = 0; 136 | var length = arguments.length; 137 | 138 | // Check if a deep merge 139 | if ( Object.prototype.toString.call( arguments[0] ) === '[object Boolean]' ) { 140 | deep = arguments[0]; 141 | i++; 142 | } 143 | 144 | // Merge the object into the extended object 145 | var merge = function (obj) { 146 | for ( var prop in obj ) { 147 | if ( Object.prototype.hasOwnProperty.call( obj, prop ) ) { 148 | // If deep merge and property is an object, merge properties 149 | if ( deep && Object.prototype.toString.call(obj[prop]) === '[object Object]' ) { 150 | extended[prop] = extend( true, extended[prop], obj[prop] ); 151 | } else { 152 | extended[prop] = obj[prop]; 153 | } 154 | } 155 | } 156 | }; 157 | 158 | // Loop through each object and conduct a merge 159 | for ( ; i < length; i++ ) { 160 | var obj = arguments[i]; 161 | merge(obj); 162 | } 163 | 164 | return extended; 165 | }; 166 | 167 | // Check if Reduced Motion is enabled 168 | Util.osHasReducedMotion = function() { 169 | if(!window.matchMedia) return false; 170 | var matchMediaObj = window.matchMedia('(prefers-reduced-motion: reduce)'); 171 | if(matchMediaObj) return matchMediaObj.matches; 172 | return false; // return false if not supported 173 | }; 174 | 175 | /* Animation curves */ 176 | Math.easeInOutQuad = function (t, b, c, d) { 177 | t /= d/2; 178 | if (t < 1) return c/2*t*t + b; 179 | t--; 180 | return -c/2 * (t*(t-2) - 1) + b; 181 | }; 182 | 183 | Math.easeInQuart = function (t, b, c, d) { 184 | t /= d; 185 | return c*t*t*t*t + b; 186 | }; 187 | 188 | Math.easeOutQuart = function (t, b, c, d) { 189 | t /= d; 190 | t--; 191 | return -c * (t*t*t*t - 1) + b; 192 | }; 193 | 194 | Math.easeInOutQuart = function (t, b, c, d) { 195 | t /= d/2; 196 | if (t < 1) return c/2*t*t*t*t + b; 197 | t -= 2; 198 | return -c/2 * (t*t*t*t - 2) + b; 199 | }; 200 | 201 | Math.easeOutElastic = function (t, b, c, d) { 202 | var s=1.70158;var p=d*0.7;var a=c; 203 | if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; 204 | if (a < Math.abs(c)) { a=c; var s=p/4; } 205 | else var s = p/(2*Math.PI) * Math.asin (c/a); 206 | return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b; 207 | }; 208 | 209 | 210 | /* JS Utility Classes */ 211 | 212 | // make focus ring visible only for keyboard navigation (i.e., tab key) 213 | (function() { 214 | var focusTab = document.getElementsByClassName('js-tab-focus'), 215 | shouldInit = false, 216 | outlineStyle = false, 217 | eventDetected = false; 218 | 219 | function detectClick() { 220 | if(focusTab.length > 0) { 221 | resetFocusStyle(false); 222 | window.addEventListener('keydown', detectTab); 223 | } 224 | window.removeEventListener('mousedown', detectClick); 225 | outlineStyle = false; 226 | eventDetected = true; 227 | }; 228 | 229 | function detectTab(event) { 230 | if(event.keyCode !== 9) return; 231 | resetFocusStyle(true); 232 | window.removeEventListener('keydown', detectTab); 233 | window.addEventListener('mousedown', detectClick); 234 | outlineStyle = true; 235 | }; 236 | 237 | function resetFocusStyle(bool) { 238 | var outlineStyle = bool ? '' : 'none'; 239 | for(var i = 0; i < focusTab.length; i++) { 240 | focusTab[i].style.setProperty('outline', outlineStyle); 241 | } 242 | }; 243 | 244 | function initFocusTabs() { 245 | if(shouldInit) { 246 | if(eventDetected) resetFocusStyle(outlineStyle); 247 | return; 248 | } 249 | shouldInit = focusTab.length > 0; 250 | window.addEventListener('mousedown', detectClick); 251 | }; 252 | 253 | initFocusTabs(); 254 | window.addEventListener('initFocusTabs', initFocusTabs); 255 | }()); 256 | 257 | function resetFocusTabsStyle() { 258 | window.dispatchEvent(new CustomEvent('initFocusTabs')); 259 | }; -------------------------------------------------------------------------------- /main/assets/css/base/_grid-layout.scss: -------------------------------------------------------------------------------- 1 | @use 'mixins' as *; 2 | @use 'breakpoints' as *; 3 | 4 | // -------------------------------- 5 | 6 | // Container - center content on x-axis 7 | 8 | // -------------------------------- 9 | 10 | .container { 11 | width: calc(100% - 2*var(--component-padding)); 12 | margin-left: auto; 13 | margin-right: auto; 14 | } 15 | 16 | // -------------------------------- 17 | 18 | // Grid System 19 | 20 | // -------------------------------- 21 | 22 | $grid-columns: 12 !default; 23 | 24 | .grid, .flex, .inline-flex, 25 | [class^=flex\@], [class*=" flex\@"], 26 | [class^=inline-flex\@], [class*=" inline-flex\@"] { 27 | --gap: 0px; 28 | --gap-x: var(--gap); 29 | --gap-y: var(--gap); 30 | gap: var(--gap-y) var(--gap-x); 31 | 32 | > * { 33 | --sub-gap: 0px; 34 | --sub-gap-x: var(--sub-gap); 35 | --sub-gap-y: var(--sub-gap); 36 | } 37 | } 38 | 39 | .grid { 40 | --grid-columns: #{$grid-columns}; 41 | display: flex; 42 | flex-wrap: wrap; 43 | 44 | > * { 45 | flex-basis: 100%; 46 | max-width: 100%; 47 | min-width: 0; 48 | } 49 | } 50 | 51 | /* #region (Safari < 14.1 fallback) */ 52 | @media not all and (min-resolution:.001dpcm) { 53 | @supports (not(translate: none)) { 54 | .grid, .flex[class*="gap-"], .inline-flex[class*="gap-"] { 55 | gap: 0px; // reset 56 | margin-bottom: calc(-1 * var(--gap-y)); 57 | margin-left: calc(-1 * var(--gap-x)); 58 | 59 | > * { 60 | margin-bottom: var(--sub-gap-y); 61 | } 62 | } 63 | 64 | .grid { 65 | --offset: var(--gap-x); 66 | --gap-modifier: 0; 67 | --offset-modifier: 1; 68 | 69 | > * { 70 | margin-left: var(--offset); 71 | } 72 | } 73 | 74 | .flex[class*="gap-"], .inline-flex[class*="gap-"] { 75 | > * { 76 | margin-left: var(--sub-gap-x); 77 | } 78 | } 79 | } 80 | } 81 | /* #endregion */ 82 | 83 | .gap-xxxxs { --gap-x: var(--space-xxxxs); --gap-y: var(--space-xxxxs); > * { --sub-gap-x: var(--space-xxxxs); --sub-gap-y: var(--space-xxxxs); }} 84 | .gap-xxxs { --gap-x: var(--space-xxxs); --gap-y: var(--space-xxxs); > * { --sub-gap-x: var(--space-xxxs); --sub-gap-y: var(--space-xxxs); }} 85 | .gap-xxs { --gap-x: var(--space-xxs); --gap-y: var(--space-xxs); > * { --sub-gap-x: var(--space-xxs); --sub-gap-y: var(--space-xxs); }} 86 | .gap-xs { --gap-x: var(--space-xs); --gap-y: var(--space-xs); > * { --sub-gap-x: var(--space-xs); --sub-gap-y: var(--space-xs); }} 87 | .gap-sm { --gap-x: var(--space-sm); --gap-y: var(--space-sm); > * { --sub-gap-x: var(--space-sm); --sub-gap-y: var(--space-sm); }} 88 | .gap-md { --gap-x: var(--space-md); --gap-y: var(--space-md); > * { --sub-gap-x: var(--space-md); --sub-gap-y: var(--space-md); }} 89 | .gap-lg { --gap-x: var(--space-lg); --gap-y: var(--space-lg); > * { --sub-gap-x: var(--space-lg); --sub-gap-y: var(--space-lg); }} 90 | .gap-xl { --gap-x: var(--space-xl); --gap-y: var(--space-xl); > * { --sub-gap-x: var(--space-xl); --sub-gap-y: var(--space-xl); }} 91 | .gap-xxl { --gap-x: var(--space-xxl); --gap-y: var(--space-xxl); > * { --sub-gap-x: var(--space-xxl); --sub-gap-y: var(--space-xxl); }} 92 | .gap-xxxl { --gap-x: var(--space-xxxl); --gap-y: var(--space-xxxl); > * { --sub-gap-x: var(--space-xxxl); --sub-gap-y: var(--space-xxxl); }} 93 | .gap-xxxxl { --gap-x: var(--space-xxxxl); --gap-y: var(--space-xxxxl); > * { --sub-gap-x: var(--space-xxxxl); --sub-gap-y: var(--space-xxxxl); }} 94 | .gap-0 { --gap-x: 0px; --gap-y: 0px; > * { --sub-gap-x: 0px; --sub-gap-y: 0px; }} 95 | 96 | .gap-x-xxxxs { --gap-x: var(--space-xxxxs); > * { --sub-gap-x: var(--space-xxxxs); }} 97 | .gap-x-xxxs { --gap-x: var(--space-xxxs); > * { --sub-gap-x: var(--space-xxxs); }} 98 | .gap-x-xxs { --gap-x: var(--space-xxs); > * { --sub-gap-x: var(--space-xxs); }} 99 | .gap-x-xs { --gap-x: var(--space-xs); > * { --sub-gap-x: var(--space-xs); }} 100 | .gap-x-sm { --gap-x: var(--space-sm); > * { --sub-gap-x: var(--space-sm); }} 101 | .gap-x-md { --gap-x: var(--space-md); > * { --sub-gap-x: var(--space-md); }} 102 | .gap-x-lg { --gap-x: var(--space-lg); > * { --sub-gap-x: var(--space-lg); }} 103 | .gap-x-xl { --gap-x: var(--space-xl); > * { --sub-gap-x: var(--space-xl); }} 104 | .gap-x-xxl { --gap-x: var(--space-xxl); > * { --sub-gap-x: var(--space-xxl); }} 105 | .gap-x-xxxl { --gap-x: var(--space-xxxl); > * { --sub-gap-x: var(--space-xxxl); }} 106 | .gap-x-xxxxl { --gap-x: var(--space-xxxxl); > * { --sub-gap-x: var(--space-xxxxl); }} 107 | .gap-x-0 { --gap-x: 0px; > * { --sub-gap-x: 0px; }} 108 | 109 | .gap-y-xxxxs { --gap-y: var(--space-xxxxs); > * { --sub-gap-y: var(--space-xxxxs); }} 110 | .gap-y-xxxs { --gap-y: var(--space-xxxs); > * { --sub-gap-y: var(--space-xxxs); }} 111 | .gap-y-xxs { --gap-y: var(--space-xxs); > * { --sub-gap-y: var(--space-xxs); }} 112 | .gap-y-xs { --gap-y: var(--space-xs); > * { --sub-gap-y: var(--space-xs); }} 113 | .gap-y-sm { --gap-y: var(--space-sm); > * { --sub-gap-y: var(--space-sm); }} 114 | .gap-y-md { --gap-y: var(--space-md); > * { --sub-gap-y: var(--space-md); }} 115 | .gap-y-lg { --gap-y: var(--space-lg); > * { --sub-gap-y: var(--space-lg); }} 116 | .gap-y-xl { --gap-y: var(--space-xl); > * { --sub-gap-y: var(--space-xl); }} 117 | .gap-y-xxl { --gap-y: var(--space-xxl); > * { --sub-gap-y: var(--space-xxl); }} 118 | .gap-y-xxxl { --gap-y: var(--space-xxxl); > * { --sub-gap-y: var(--space-xxxl); }} 119 | .gap-y-xxxxl { --gap-y: var(--space-xxxxl); > * { --sub-gap-y: var(--space-xxxxl); }} 120 | .gap-y-0 { --gap-y: 0px; > * { --sub-gap-y: 0px; }} 121 | 122 | $grid-col-class-list: ''; // list of col-{span} classes 123 | 124 | @for $i from 1 through $grid-columns { 125 | $grid-col-class-list: $grid-col-class-list + ".col-#{$i}"; 126 | @if($i < $grid-columns) { 127 | $grid-col-class-list: $grid-col-class-list + ', '; 128 | } 129 | .grid-col-#{$i} { --grid-columns: #{$i}; } // set number of grid columns 130 | .col-#{$i} { --span: #{$i}; } // set grid item span 131 | } 132 | 133 | #{$grid-col-class-list} { 134 | 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)); 135 | 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)); 136 | } 137 | 138 | .col { // auto-expanding column 139 | flex-grow: 1; 140 | flex-basis: 0; 141 | max-width: 100%; 142 | } 143 | 144 | .col-content { // column width depends on its content 145 | flex-grow: 0; 146 | flex-basis: initial; 147 | max-width: initial; 148 | } 149 | 150 | // offset 151 | $grid-offset-class-list: ''; // list of offset-{span} classes 152 | 153 | @for $i from 1 through $grid-columns - 1 { 154 | $grid-offset-class-list: $grid-offset-class-list + ".offset-#{$i}"; 155 | @if($i < $grid-columns) { 156 | $grid-offset-class-list: $grid-offset-class-list + ', '; 157 | } 158 | .offset-#{$i} { --offset: #{$i}; } 159 | } 160 | 161 | #{$grid-offset-class-list} { 162 | 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)); 163 | } 164 | 165 | // responsive variations 166 | @each $breakpoint, $value in $breakpoints { 167 | @include breakpoint(#{$breakpoint}) { 168 | .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); }} 169 | .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); }} 170 | .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); }} 171 | .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); }} 172 | .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); }} 173 | .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); }} 174 | .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); }} 175 | .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); }} 176 | .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); }} 177 | .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); }} 178 | .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); }} 179 | .gap-0\@#{$breakpoint} { --gap-x: 0px; --gap-y: 0px; > * { --sub-gap-x: 0px; --sub-gap-y: 0px; }} 180 | 181 | .gap-x-xxxxs\@#{$breakpoint} { --gap-x: var(--space-xxxxs); > * { --sub-gap-x: var(--space-xxxxs); }} 182 | .gap-x-xxxs\@#{$breakpoint} { --gap-x: var(--space-xxxs); > * { --sub-gap-x: var(--space-xxxs); }} 183 | .gap-x-xxs\@#{$breakpoint} { --gap-x: var(--space-xxs); > * { --sub-gap-x: var(--space-xxs); }} 184 | .gap-x-xs\@#{$breakpoint} { --gap-x: var(--space-xs); > * { --sub-gap-x: var(--space-xs); }} 185 | .gap-x-sm\@#{$breakpoint} { --gap-x: var(--space-sm); > * { --sub-gap-x: var(--space-sm); }} 186 | .gap-x-md\@#{$breakpoint} { --gap-x: var(--space-md); > * { --sub-gap-x: var(--space-md); }} 187 | .gap-x-lg\@#{$breakpoint} { --gap-x: var(--space-lg); > * { --sub-gap-x: var(--space-lg); }} 188 | .gap-x-xl\@#{$breakpoint} { --gap-x: var(--space-xl); > * { --sub-gap-x: var(--space-xl); }} 189 | .gap-x-xxl\@#{$breakpoint} { --gap-x: var(--space-xxl); > * { --sub-gap-x: var(--space-xxl); }} 190 | .gap-x-xxxl\@#{$breakpoint} { --gap-x: var(--space-xxxl); > * { --sub-gap-x: var(--space-xxxl); }} 191 | .gap-x-xxxxl\@#{$breakpoint} { --gap-x: var(--space-xxxxl); > * { --sub-gap-x: var(--space-xxxxl); }} 192 | .gap-x-0\@#{$breakpoint} { --gap-x: 0px; > * { --sub-gap-x: 0px; }} 193 | 194 | .gap-y-xxxxs\@#{$breakpoint} { --gap-y: var(--space-xxxxs); > * { --sub-gap-y: var(--space-xxxxs); }} 195 | .gap-y-xxxs\@#{$breakpoint} { --gap-y: var(--space-xxxs); > * { --sub-gap-y: var(--space-xxxs); }} 196 | .gap-y-xxs\@#{$breakpoint} { --gap-y: var(--space-xxs); > * { --sub-gap-y: var(--space-xxs); }} 197 | .gap-y-xs\@#{$breakpoint} { --gap-y: var(--space-xs); > * { --sub-gap-y: var(--space-xs); }} 198 | .gap-y-sm\@#{$breakpoint} { --gap-y: var(--space-sm); > * { --sub-gap-y: var(--space-sm); }} 199 | .gap-y-md\@#{$breakpoint} { --gap-y: var(--space-md); > * { --sub-gap-y: var(--space-md); }} 200 | .gap-y-lg\@#{$breakpoint} { --gap-y: var(--space-lg); > * { --sub-gap-y: var(--space-lg); }} 201 | .gap-y-xl\@#{$breakpoint} { --gap-y: var(--space-xl); > * { --sub-gap-y: var(--space-xl); }} 202 | .gap-y-xxl\@#{$breakpoint} { --gap-y: var(--space-xxl); > * { --sub-gap-y: var(--space-xxl); }} 203 | .gap-y-xxxl\@#{$breakpoint} { --gap-y: var(--space-xxxl); > * { --sub-gap-y: var(--space-xxxl); }} 204 | .gap-y-xxxxl\@#{$breakpoint} { --gap-y: var(--space-xxxxl); > * { --sub-gap-y: var(--space-xxxxl); }} 205 | .gap-y-0\@#{$breakpoint} { --gap-y: 0px; > * { --sub-gap-y: 0px; }} 206 | 207 | $grid-col-class-list: ''; // list of col-{span} classes 208 | 209 | @for $i from 1 through $grid-columns { 210 | $grid-col-class-list: $grid-col-class-list + ".col-#{$i}\\@#{$breakpoint}"; 211 | @if($i < $grid-columns) { 212 | $grid-col-class-list: $grid-col-class-list + ', '; 213 | } 214 | .grid-col-#{$i}\@#{$breakpoint} { --grid-columns: #{$i}; } // set number of grid columns 215 | .col-#{$i}\@#{$breakpoint} { --span: #{$i}; } // set grid item span 216 | } 217 | 218 | #{$grid-col-class-list} { 219 | 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)); 220 | 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)); 221 | } 222 | 223 | .col\@#{$breakpoint} { // auto-expanding column 224 | flex-grow: 1; 225 | flex-basis: 0; 226 | max-width: 100%; 227 | } 228 | 229 | .col-content\@#{$breakpoint} { // column width depends on its content 230 | flex-grow: 0; 231 | flex-basis: initial; 232 | max-width: initial; 233 | } 234 | 235 | // offset 236 | $grid-offset-class-list: ''; // list of offset-{span} classes 237 | 238 | @for $i from 1 through $grid-columns - 1 { 239 | $grid-offset-class-list: $grid-offset-class-list + ".offset-#{$i}\\@#{$breakpoint}"; 240 | @if($i < $grid-columns) { 241 | $grid-offset-class-list: $grid-offset-class-list + ', '; 242 | } 243 | .offset-#{$i}\@#{$breakpoint} { --offset: #{$i}; } 244 | } 245 | 246 | #{$grid-offset-class-list} { 247 | 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)); 248 | } 249 | 250 | .offset-0\@#{$breakpoint} { 251 | margin-left: 0; 252 | } 253 | 254 | @media not all and (min-resolution:.001dpcm) { 255 | @supports (not(translate: none)) { 256 | .offset-0\@#{$breakpoint} { 257 | margin-left: var(--gap-x); 258 | } 259 | } 260 | } 261 | } 262 | } -------------------------------------------------------------------------------- /main/assets/css/base/_util.scss: -------------------------------------------------------------------------------- 1 | @use 'mixins' as *; 2 | @use 'breakpoints' as *; 3 | 4 | // -------------------------------- 5 | 6 | // Flexbox 7 | 8 | // -------------------------------- 9 | 10 | .flex { display: flex; } 11 | .inline-flex { display: inline-flex; } 12 | .flex-wrap { flex-wrap: wrap; } 13 | .flex-nowrap { flex-wrap: nowrap; } 14 | .flex-column { flex-direction: column; } 15 | .flex-column-reverse { flex-direction: column-reverse; } 16 | .flex-row { flex-direction: row; } 17 | .flex-row-reverse { flex-direction: row-reverse; } 18 | .flex-center { justify-content: center; align-items: center; } 19 | 20 | // flex items 21 | .flex-grow { flex-grow: 1; } 22 | .flex-grow-0 { flex-grow: 0; } 23 | .flex-shrink { flex-shrink: 1; } 24 | .flex-shrink-0 { flex-shrink: 0; } 25 | .flex-basis-0 { flex-basis: 0; } 26 | 27 | // -------------------------------- 28 | 29 | // Justify Content 30 | 31 | // -------------------------------- 32 | 33 | .justify-start { justify-content: flex-start; } 34 | .justify-end { justify-content: flex-end; } 35 | .justify-center { justify-content: center; } 36 | .justify-between { justify-content: space-between; } 37 | 38 | // -------------------------------- 39 | 40 | // Align Items 41 | 42 | // -------------------------------- 43 | 44 | .items-center { align-items: center; } 45 | .items-start { align-items: flex-start; } 46 | .items-end { align-items: flex-end; } 47 | .items-baseline { align-items: baseline; } 48 | .items-stretch { align-items: stretch; } 49 | 50 | // -------------------------------- 51 | 52 | // Align Content 53 | 54 | // -------------------------------- 55 | 56 | .content-start { align-content: start; } 57 | .content-end { align-content: end; } 58 | .content-center { align-content: center; } 59 | .content-between { align-content: space-between; } 60 | 61 | // -------------------------------- 62 | 63 | // Order 64 | 65 | // -------------------------------- 66 | 67 | .order-1 { order: 1; } 68 | .order-2 { order: 2; } 69 | .order-3 { order: 3; } 70 | 71 | // -------------------------------- 72 | 73 | // Aspect Ratio 74 | 75 | // -------------------------------- 76 | 77 | [class^="aspect-ratio"], [class*=" aspect-ratio"] { 78 | --aspect-ratio: calc(16/9); 79 | position: relative; 80 | height: 0; 81 | padding-bottom: calc(100%/(var(--aspect-ratio))); 82 | 83 | > * { 84 | position: absolute; 85 | top: 0; 86 | left: 0; 87 | width: 100%; 88 | height: 100%; 89 | 90 | &:not(iframe) { 91 | object-fit: cover; 92 | } 93 | } 94 | } 95 | 96 | // broader browser support, class added to the parent element 97 | .aspect-ratio-16\:9 { --aspect-ratio: calc(16/9); } 98 | .aspect-ratio-3\:2 { --aspect-ratio: calc(3/2); } 99 | .aspect-ratio-4\:3 { --aspect-ratio: calc(4/3); } 100 | .aspect-ratio-5\:4 { --aspect-ratio: calc(5/4); } 101 | .aspect-ratio-1\:1 { --aspect-ratio: calc(1/1); } 102 | .aspect-ratio-4\:5 { --aspect-ratio: calc(4/5); } 103 | .aspect-ratio-3\:4 { --aspect-ratio: calc(3/4); } 104 | .aspect-ratio-2\:3 { --aspect-ratio: calc(2/3); } 105 | .aspect-ratio-9\:16 { --aspect-ratio: calc(9/16); } 106 | 107 | // use the aspect-ratio CSS property 108 | .ratio-16\:9 { aspect-ratio: 16/9; } 109 | .ratio-3\:2 { aspect-ratio: 3/2; } 110 | .ratio-4\:3 { aspect-ratio: 4/3; } 111 | .ratio-5\:4 { aspect-ratio: 5/4; } 112 | .ratio-1\:1 { aspect-ratio: 1/1; } 113 | .ratio-4\:5 { aspect-ratio: 4/5; } 114 | .ratio-3\:4 { aspect-ratio: 3/4; } 115 | .ratio-2\:3 { aspect-ratio: 2/3; } 116 | .ratio-9\:16 { aspect-ratio: 9/16; } 117 | 118 | // -------------------------------- 119 | 120 | // Display 121 | 122 | // -------------------------------- 123 | 124 | .block { display: block; } 125 | .inline-block { display: inline-block; } 126 | .inline { display: inline; } 127 | .contents { display: contents; } 128 | .hide { display: none; } 129 | .css-grid { display: grid; } 130 | .css-inline-grid { display: inline-grid; } 131 | 132 | // -------------------------------- 133 | 134 | // Space unit 135 | 136 | // -------------------------------- 137 | 138 | .space-unit-rem { --space-unit: 1rem; } 139 | .space-unit-em { --space-unit: 1em; } 140 | .space-unit-px { --space-unit: 16px; } 141 | 142 | // -------------------------------- 143 | 144 | // Margin 145 | 146 | // -------------------------------- 147 | 148 | .margin-xxxxs { margin: var(--space-xxxxs); } 149 | .margin-xxxs { margin: var(--space-xxxs); } 150 | .margin-xxs { margin: var(--space-xxs); } 151 | .margin-xs { margin: var(--space-xs); } 152 | .margin-sm { margin: var(--space-sm); } 153 | .margin-md { margin: var(--space-md); } 154 | .margin-lg { margin: var(--space-lg); } 155 | .margin-xl { margin: var(--space-xl); } 156 | .margin-xxl { margin: var(--space-xxl); } 157 | .margin-xxxl { margin: var(--space-xxxl); } 158 | .margin-xxxxl { margin: var(--space-xxxxl); } 159 | .margin-auto { margin: auto; } 160 | .margin-0 { margin: 0; } 161 | 162 | .margin-top-xxxxs { margin-top: var(--space-xxxxs); } 163 | .margin-top-xxxs { margin-top: var(--space-xxxs); } 164 | .margin-top-xxs { margin-top: var(--space-xxs); } 165 | .margin-top-xs { margin-top: var(--space-xs); } 166 | .margin-top-sm { margin-top: var(--space-sm); } 167 | .margin-top-md { margin-top: var(--space-md); } 168 | .margin-top-lg { margin-top: var(--space-lg); } 169 | .margin-top-xl { margin-top: var(--space-xl); } 170 | .margin-top-xxl { margin-top: var(--space-xxl); } 171 | .margin-top-xxxl { margin-top: var(--space-xxxl); } 172 | .margin-top-xxxxl { margin-top: var(--space-xxxxl); } 173 | .margin-top-auto { margin-top: auto; } 174 | .margin-top-0 { margin-top: 0; } 175 | 176 | .margin-bottom-xxxxs { margin-bottom: var(--space-xxxxs); } 177 | .margin-bottom-xxxs { margin-bottom: var(--space-xxxs); } 178 | .margin-bottom-xxs { margin-bottom: var(--space-xxs); } 179 | .margin-bottom-xs { margin-bottom: var(--space-xs); } 180 | .margin-bottom-sm { margin-bottom: var(--space-sm); } 181 | .margin-bottom-md { margin-bottom: var(--space-md); } 182 | .margin-bottom-lg { margin-bottom: var(--space-lg); } 183 | .margin-bottom-xl { margin-bottom: var(--space-xl); } 184 | .margin-bottom-xxl { margin-bottom: var(--space-xxl); } 185 | .margin-bottom-xxxl { margin-bottom: var(--space-xxxl); } 186 | .margin-bottom-xxxxl { margin-bottom: var(--space-xxxxl); } 187 | .margin-bottom-auto { margin-bottom: auto; } 188 | .margin-bottom-0 { margin-bottom: 0; } 189 | 190 | .margin-right-xxxxs { margin-right: var(--space-xxxxs); } 191 | .margin-right-xxxs { margin-right: var(--space-xxxs); } 192 | .margin-right-xxs { margin-right: var(--space-xxs); } 193 | .margin-right-xs { margin-right: var(--space-xs); } 194 | .margin-right-sm { margin-right: var(--space-sm); } 195 | .margin-right-md { margin-right: var(--space-md); } 196 | .margin-right-lg { margin-right: var(--space-lg); } 197 | .margin-right-xl { margin-right: var(--space-xl); } 198 | .margin-right-xxl { margin-right: var(--space-xxl); } 199 | .margin-right-xxxl { margin-right: var(--space-xxxl); } 200 | .margin-right-xxxxl { margin-right: var(--space-xxxxl); } 201 | .margin-right-auto { margin-right: auto; } 202 | .margin-right-0 { margin-right: 0; } 203 | 204 | .margin-left-xxxxs { margin-left: var(--space-xxxxs); } 205 | .margin-left-xxxs { margin-left: var(--space-xxxs); } 206 | .margin-left-xxs { margin-left: var(--space-xxs); } 207 | .margin-left-xs { margin-left: var(--space-xs); } 208 | .margin-left-sm { margin-left: var(--space-sm); } 209 | .margin-left-md { margin-left: var(--space-md); } 210 | .margin-left-lg { margin-left: var(--space-lg); } 211 | .margin-left-xl { margin-left: var(--space-xl); } 212 | .margin-left-xxl { margin-left: var(--space-xxl); } 213 | .margin-left-xxxl { margin-left: var(--space-xxxl); } 214 | .margin-left-xxxxl { margin-left: var(--space-xxxxl); } 215 | .margin-left-auto { margin-left: auto; } 216 | .margin-left-0 { margin-left: 0; } 217 | 218 | .margin-x-xxxxs { margin-left: var(--space-xxxxs); margin-right: var(--space-xxxxs); } 219 | .margin-x-xxxs { margin-left: var(--space-xxxs); margin-right: var(--space-xxxs); } 220 | .margin-x-xxs { margin-left: var(--space-xxs); margin-right: var(--space-xxs); } 221 | .margin-x-xs { margin-left: var(--space-xs); margin-right: var(--space-xs); } 222 | .margin-x-sm { margin-left: var(--space-sm); margin-right: var(--space-sm); } 223 | .margin-x-md { margin-left: var(--space-md); margin-right: var(--space-md); } 224 | .margin-x-lg { margin-left: var(--space-lg); margin-right: var(--space-lg); } 225 | .margin-x-xl { margin-left: var(--space-xl); margin-right: var(--space-xl); } 226 | .margin-x-xxl { margin-left: var(--space-xxl); margin-right: var(--space-xxl); } 227 | .margin-x-xxxl { margin-left: var(--space-xxxl); margin-right: var(--space-xxxl); } 228 | .margin-x-xxxxl { margin-left: var(--space-xxxxl); margin-right: var(--space-xxxxl); } 229 | .margin-x-auto { margin-left: auto; margin-right: auto; } 230 | .margin-x-0 { margin-left: 0; margin-right: 0; } 231 | 232 | .margin-y-xxxxs { margin-top: var(--space-xxxxs); margin-bottom: var(--space-xxxxs); } 233 | .margin-y-xxxs { margin-top: var(--space-xxxs); margin-bottom: var(--space-xxxs); } 234 | .margin-y-xxs { margin-top: var(--space-xxs); margin-bottom: var(--space-xxs); } 235 | .margin-y-xs { margin-top: var(--space-xs); margin-bottom: var(--space-xs); } 236 | .margin-y-sm { margin-top: var(--space-sm); margin-bottom: var(--space-sm); } 237 | .margin-y-md { margin-top: var(--space-md); margin-bottom: var(--space-md); } 238 | .margin-y-lg { margin-top: var(--space-lg); margin-bottom: var(--space-lg); } 239 | .margin-y-xl { margin-top: var(--space-xl); margin-bottom: var(--space-xl); } 240 | .margin-y-xxl { margin-top: var(--space-xxl); margin-bottom: var(--space-xxl); } 241 | .margin-y-xxxl { margin-top: var(--space-xxxl); margin-bottom: var(--space-xxxl); } 242 | .margin-y-xxxxl { margin-top: var(--space-xxxxl); margin-bottom: var(--space-xxxxl); } 243 | .margin-y-auto { margin-top: auto; margin-bottom: auto; } 244 | .margin-y-0 { margin-top: 0; margin-bottom: 0; } 245 | 246 | // -------------------------------- 247 | 248 | // Padding 249 | 250 | // -------------------------------- 251 | 252 | .padding-xxxxs { padding: var(--space-xxxxs); } 253 | .padding-xxxs { padding: var(--space-xxxs); } 254 | .padding-xxs { padding: var(--space-xxs); } 255 | .padding-xs { padding: var(--space-xs); } 256 | .padding-sm { padding: var(--space-sm); } 257 | .padding-md { padding: var(--space-md); } 258 | .padding-lg { padding: var(--space-lg); } 259 | .padding-xl { padding: var(--space-xl); } 260 | .padding-xxl { padding: var(--space-xxl); } 261 | .padding-xxxl { padding: var(--space-xxxl); } 262 | .padding-xxxxl { padding: var(--space-xxxxl); } 263 | .padding-0 { padding: 0; } 264 | .padding-component { padding: var(--component-padding); } 265 | 266 | .padding-top-xxxxs { padding-top: var(--space-xxxxs); } 267 | .padding-top-xxxs { padding-top: var(--space-xxxs); } 268 | .padding-top-xxs { padding-top: var(--space-xxs); } 269 | .padding-top-xs { padding-top: var(--space-xs); } 270 | .padding-top-sm { padding-top: var(--space-sm); } 271 | .padding-top-md { padding-top: var(--space-md); } 272 | .padding-top-lg { padding-top: var(--space-lg); } 273 | .padding-top-xl { padding-top: var(--space-xl); } 274 | .padding-top-xxl { padding-top: var(--space-xxl); } 275 | .padding-top-xxxl { padding-top: var(--space-xxxl); } 276 | .padding-top-xxxxl { padding-top: var(--space-xxxxl); } 277 | .padding-top-0 { padding-top: 0; } 278 | .padding-top-component { padding-top: var(--component-padding); } 279 | 280 | .padding-bottom-xxxxs { padding-bottom: var(--space-xxxxs); } 281 | .padding-bottom-xxxs { padding-bottom: var(--space-xxxs); } 282 | .padding-bottom-xxs { padding-bottom: var(--space-xxs); } 283 | .padding-bottom-xs { padding-bottom: var(--space-xs); } 284 | .padding-bottom-sm { padding-bottom: var(--space-sm); } 285 | .padding-bottom-md { padding-bottom: var(--space-md); } 286 | .padding-bottom-lg { padding-bottom: var(--space-lg); } 287 | .padding-bottom-xl { padding-bottom: var(--space-xl); } 288 | .padding-bottom-xxl { padding-bottom: var(--space-xxl); } 289 | .padding-bottom-xxxl { padding-bottom: var(--space-xxxl); } 290 | .padding-bottom-xxxxl { padding-bottom: var(--space-xxxxl); } 291 | .padding-bottom-0 { padding-bottom: 0; } 292 | .padding-bottom-component { padding-bottom: var(--component-padding); } 293 | 294 | .padding-right-xxxxs { padding-right: var(--space-xxxxs); } 295 | .padding-right-xxxs { padding-right: var(--space-xxxs); } 296 | .padding-right-xxs { padding-right: var(--space-xxs); } 297 | .padding-right-xs { padding-right: var(--space-xs); } 298 | .padding-right-sm { padding-right: var(--space-sm); } 299 | .padding-right-md { padding-right: var(--space-md); } 300 | .padding-right-lg { padding-right: var(--space-lg); } 301 | .padding-right-xl { padding-right: var(--space-xl); } 302 | .padding-right-xxl { padding-right: var(--space-xxl); } 303 | .padding-right-xxxl { padding-right: var(--space-xxxl); } 304 | .padding-right-xxxxl { padding-right: var(--space-xxxxl); } 305 | .padding-right-0 { padding-right: 0; } 306 | .padding-right-component { padding-right: var(--component-padding); } 307 | 308 | .padding-left-xxxxs { padding-left: var(--space-xxxxs); } 309 | .padding-left-xxxs { padding-left: var(--space-xxxs); } 310 | .padding-left-xxs { padding-left: var(--space-xxs); } 311 | .padding-left-xs { padding-left: var(--space-xs); } 312 | .padding-left-sm { padding-left: var(--space-sm); } 313 | .padding-left-md { padding-left: var(--space-md); } 314 | .padding-left-lg { padding-left: var(--space-lg); } 315 | .padding-left-xl { padding-left: var(--space-xl); } 316 | .padding-left-xxl { padding-left: var(--space-xxl); } 317 | .padding-left-xxxl { padding-left: var(--space-xxxl); } 318 | .padding-left-xxxxl { padding-left: var(--space-xxxxl); } 319 | .padding-left-0 { padding-left: 0; } 320 | .padding-left-component { padding-left: var(--component-padding); } 321 | 322 | .padding-x-xxxxs { padding-left: var(--space-xxxxs); padding-right: var(--space-xxxxs); } 323 | .padding-x-xxxs { padding-left: var(--space-xxxs); padding-right: var(--space-xxxs); } 324 | .padding-x-xxs { padding-left: var(--space-xxs); padding-right: var(--space-xxs); } 325 | .padding-x-xs { padding-left: var(--space-xs); padding-right: var(--space-xs); } 326 | .padding-x-sm { padding-left: var(--space-sm); padding-right: var(--space-sm); } 327 | .padding-x-md { padding-left: var(--space-md); padding-right: var(--space-md); } 328 | .padding-x-lg { padding-left: var(--space-lg); padding-right: var(--space-lg); } 329 | .padding-x-xl { padding-left: var(--space-xl); padding-right: var(--space-xl); } 330 | .padding-x-xxl { padding-left: var(--space-xxl); padding-right: var(--space-xxl); } 331 | .padding-x-xxxl { padding-left: var(--space-xxxl); padding-right: var(--space-xxxl); } 332 | .padding-x-xxxxl { padding-left: var(--space-xxxxl); padding-right: var(--space-xxxxl); } 333 | .padding-x-0 { padding-left: 0; padding-right: 0; } 334 | .padding-x-component { padding-left: var(--component-padding); padding-right: var(--component-padding); } 335 | 336 | .padding-y-xxxxs { padding-top: var(--space-xxxxs); padding-bottom: var(--space-xxxxs); } 337 | .padding-y-xxxs { padding-top: var(--space-xxxs); padding-bottom: var(--space-xxxs); } 338 | .padding-y-xxs { padding-top: var(--space-xxs); padding-bottom: var(--space-xxs); } 339 | .padding-y-xs { padding-top: var(--space-xs); padding-bottom: var(--space-xs); } 340 | .padding-y-sm { padding-top: var(--space-sm); padding-bottom: var(--space-sm); } 341 | .padding-y-md { padding-top: var(--space-md); padding-bottom: var(--space-md); } 342 | .padding-y-lg { padding-top: var(--space-lg); padding-bottom: var(--space-lg); } 343 | .padding-y-xl { padding-top: var(--space-xl); padding-bottom: var(--space-xl); } 344 | .padding-y-xxl { padding-top: var(--space-xxl); padding-bottom: var(--space-xxl); } 345 | .padding-y-xxxl { padding-top: var(--space-xxxl); padding-bottom: var(--space-xxxl); } 346 | .padding-y-xxxxl { padding-top: var(--space-xxxxl); padding-bottom: var(--space-xxxxl); } 347 | .padding-y-0 { padding-top: 0; padding-bottom: 0; } 348 | .padding-y-component { padding-top: var(--component-padding); padding-bottom: var(--component-padding); } 349 | 350 | // -------------------------------- 351 | 352 | // Vertical Align 353 | 354 | // -------------------------------- 355 | 356 | .align-baseline { vertical-align: baseline; } 357 | .align-sub { vertical-align: sub; } 358 | .align-super { vertical-align: super; } 359 | .align-text-top { vertical-align: text-top; } 360 | .align-text-bottom { vertical-align: text-bottom; } 361 | .align-top { vertical-align: top; } 362 | .align-middle { vertical-align: middle; } 363 | .align-bottom { vertical-align: bottom; } 364 | 365 | // -------------------------------- 366 | 367 | // Typography 368 | 369 | // -------------------------------- 370 | 371 | .truncate, .text-truncate { // truncate text if it exceeds its parent 372 | overflow: hidden; 373 | text-overflow: ellipsis; 374 | white-space: nowrap; 375 | } 376 | 377 | .text-replace { // replace text with bg img 378 | overflow: hidden; 379 | color: transparent; 380 | text-indent: 100%; 381 | white-space: nowrap; 382 | } 383 | 384 | .break-word { 385 | overflow-wrap: break-word; 386 | min-width: 0; 387 | } 388 | 389 | // -------------------------------- 390 | 391 | // Font Size 392 | 393 | // -------------------------------- 394 | 395 | .text-unit-rem, .text-unit-em, .text-unit-px { 396 | font-size: var(--text-unit); 397 | } 398 | 399 | .text-unit-rem { --text-unit: 1rem; } 400 | .text-unit-em { --text-unit: 1em; } 401 | .text-unit-px { --text-unit: 16px; } 402 | 403 | .text-xs { font-size: var(--text-xs, 0.6875rem); } 404 | .text-sm { font-size: var(--text-sm, 0.75rem); } 405 | .text-base { font-size: var(--text-unit, 1rem); } 406 | .text-md { font-size: var(--text-md, 1.125rem); } 407 | .text-lg { font-size: var(--text-lg, 1.375rem); } 408 | .text-xl { font-size: var(--text-xl, 1.75rem); } 409 | .text-xxl { font-size: var(--text-xxl, 2rem); } 410 | .text-xxxl { font-size: var(--text-xxxl, 2.5rem); } 411 | .text-xxxxl { font-size: var(--text-xxxxl, 3rem); } 412 | 413 | // -------------------------------- 414 | 415 | // Text Transform 416 | 417 | // -------------------------------- 418 | 419 | .text-uppercase { text-transform: uppercase; } 420 | .text-capitalize { text-transform: capitalize; } 421 | 422 | // -------------------------------- 423 | 424 | // Letter Spacing 425 | 426 | // -------------------------------- 427 | 428 | .letter-spacing-xs { letter-spacing: -0.1em; } 429 | .letter-spacing-sm { letter-spacing: -0.05em; } 430 | .letter-spacing-md { letter-spacing: 0.05em; } 431 | .letter-spacing-lg { letter-spacing: 0.1em; } 432 | .letter-spacing-xl { letter-spacing: 0.2em; } 433 | 434 | // -------------------------------- 435 | 436 | // Font Weight 437 | 438 | // -------------------------------- 439 | 440 | .font-thin { font-weight: 100; } 441 | .font-extralight { font-weight: 200; } 442 | .font-light { font-weight: 300; } 443 | .font-normal { font-weight: 400; } 444 | .font-medium { font-weight: 500; } 445 | .font-semibold { font-weight: 600; } 446 | .font-bold, .text-bold { font-weight: 700; } 447 | .font-extrabold { font-weight: 800; } 448 | .font-black { font-weight: 900; } 449 | 450 | // -------------------------------- 451 | 452 | // Font Style 453 | 454 | // -------------------------------- 455 | 456 | .font-italic { font-style: italic; } 457 | 458 | // -------------------------------- 459 | 460 | // Font Smooth 461 | 462 | // -------------------------------- 463 | 464 | .font-smooth { 465 | -webkit-font-smoothing: antialiased; 466 | -moz-osx-font-smoothing: grayscale; 467 | } 468 | 469 | // -------------------------------- 470 | 471 | // Font Family 472 | 473 | // -------------------------------- 474 | 475 | .font-primary { font-family: var(--font-primary); } 476 | 477 | // -------------------------------- 478 | 479 | // Text Align 480 | 481 | // -------------------------------- 482 | 483 | .text-center { text-align: center; } 484 | .text-left { text-align: left; } 485 | .text-right { text-align: right; } 486 | .text-justify { text-align: justify; } 487 | 488 | // -------------------------------- 489 | 490 | // Text Decoration 491 | 492 | // -------------------------------- 493 | 494 | .text-line-through { text-decoration: line-through; } 495 | .text-underline { text-decoration: underline; } 496 | .text-decoration-none { text-decoration: none; } 497 | 498 | // -------------------------------- 499 | 500 | // Text Shadow 501 | 502 | // -------------------------------- 503 | 504 | .text-shadow-xs { text-shadow: 0 1px 1px rgba(#000, 0.15); } 505 | .text-shadow-sm { text-shadow: 0 1px 2px rgba(#000, 0.25); } 506 | .text-shadow-md { text-shadow: 0 1px 2px rgba(#000, 0.1), 0 2px 4px rgba(#000, 0.2); } 507 | .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); } 508 | .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); } 509 | .text-shadow-none { text-shadow: none; } 510 | 511 | // -------------------------------- 512 | 513 | // Text Indent 514 | 515 | // -------------------------------- 516 | 517 | .text-indent-sm { text-indent: 0.5em; } 518 | .text-indent-md { text-indent: 1em; } 519 | .text-indent-lg { text-indent: 1.5em; } 520 | 521 | // -------------------------------- 522 | 523 | // .text-component vertical spacing 524 | 525 | // -------------------------------- 526 | 527 | .text-space-y-xxs { --text-space-y-multiplier: 0.25 !important; } 528 | .text-space-y-xs { --text-space-y-multiplier: 0.5 !important; } 529 | .text-space-y-sm { --text-space-y-multiplier: 0.75 !important; } 530 | .text-space-y-md { --text-space-y-multiplier: 1.25 !important; } 531 | .text-space-y-lg { --text-space-y-multiplier: 1.5 !important; } 532 | .text-space-y-xl { --text-space-y-multiplier: 1.75 !important; } 533 | .text-space-y-xxl { --text-space-y-multiplier: 2 !important; } 534 | 535 | // -------------------------------- 536 | 537 | // Line Height 538 | 539 | // -------------------------------- 540 | 541 | .line-height-xs { 542 | --heading-line-height: 1; 543 | --body-line-height: 1.1; 544 | 545 | &:not(.text-component) { 546 | line-height: 1.1; 547 | } 548 | } 549 | 550 | .line-height-sm { 551 | --heading-line-height: 1.1; 552 | --body-line-height: 1.2; 553 | 554 | &:not(.text-component) { 555 | line-height: 1.2; 556 | } 557 | } 558 | 559 | .line-height-md { 560 | --heading-line-height: 1.15; 561 | --body-line-height: 1.4; 562 | 563 | &:not(.text-component) { 564 | line-height: 1.4; 565 | } 566 | } 567 | 568 | .line-height-lg { 569 | --heading-line-height: 1.22; 570 | --body-line-height: 1.58; 571 | 572 | &:not(.text-component) { 573 | line-height: 1.58; 574 | } 575 | } 576 | 577 | .line-height-xl { 578 | --heading-line-height: 1.3; 579 | --body-line-height: 1.72; 580 | 581 | &:not(.text-component) { 582 | line-height: 1.72; 583 | } 584 | } 585 | 586 | .line-height-body { line-height: var(--body-line-height); } 587 | .line-height-heading { line-height: var(--heading-line-height); } 588 | .line-height-normal { line-height: normal !important; } 589 | .line-height-1 { line-height: 1 !important; } 590 | 591 | // -------------------------------- 592 | 593 | // Line Clamp 594 | 595 | // -------------------------------- 596 | 597 | .line-clamp-1 { 598 | overflow: hidden; 599 | display: -webkit-box; 600 | -webkit-box-orient: vertical; 601 | -webkit-line-clamp: 1; 602 | } 603 | 604 | .line-clamp-2 { 605 | overflow: hidden; 606 | display: -webkit-box; 607 | -webkit-box-orient: vertical; 608 | -webkit-line-clamp: 2; 609 | } 610 | 611 | .line-clamp-3 { 612 | overflow: hidden; 613 | display: -webkit-box; 614 | -webkit-box-orient: vertical; 615 | -webkit-line-clamp: 3; 616 | } 617 | 618 | .line-clamp-4 { 619 | overflow: hidden; 620 | display: -webkit-box; 621 | -webkit-box-orient: vertical; 622 | -webkit-line-clamp: 4; 623 | } 624 | 625 | // -------------------------------- 626 | 627 | // Column Count 628 | 629 | // -------------------------------- 630 | 631 | .column-count-1 { column-count: 1; } 632 | .column-count-2 { column-count: 2; } 633 | .column-count-3 { column-count: 3; } 634 | .column-count-4 { column-count: 4; } 635 | 636 | // -------------------------------- 637 | 638 | // List Style 639 | 640 | // -------------------------------- 641 | 642 | .list-style-none { 643 | list-style: none; 644 | } 645 | 646 | // -------------------------------- 647 | 648 | // White Space 649 | 650 | // -------------------------------- 651 | 652 | .ws-nowrap, .text-nowrap { white-space: nowrap; } 653 | 654 | // -------------------------------- 655 | 656 | // Cursor 657 | 658 | // -------------------------------- 659 | 660 | .cursor-pointer { cursor: pointer; } 661 | .cursor-default { cursor: default; } 662 | 663 | // -------------------------------- 664 | 665 | // Pointer Events 666 | 667 | // -------------------------------- 668 | 669 | .pointer-events-auto { pointer-events: auto; } 670 | .pointer-events-none { pointer-events: none; } 671 | 672 | // -------------------------------- 673 | 674 | // User Select 675 | 676 | // -------------------------------- 677 | 678 | .user-select-none { user-select: none; } 679 | .user-select-all { user-select: all; } 680 | 681 | // -------------------------------- 682 | 683 | // Color 684 | 685 | // -------------------------------- 686 | 687 | [class^="color-"], [class*=" color-"] { --color-o: 1; } 688 | 689 | .color-inherit { color: inherit; } 690 | 691 | .color-bg-darker { color: alpha(var(--color-bg-darker), var(--color-o, 1)); } 692 | .color-bg-dark { color: alpha(var(--color-bg-dark), var(--color-o, 1)); } 693 | .color-bg { color: alpha(var(--color-bg), var(--color-o, 1)); } 694 | .color-bg-light { color: alpha(var(--color-bg-light), var(--color-o, 1)); } 695 | .color-bg-lighter { color: alpha(var(--color-bg-lighter), var(--color-o, 1)); } 696 | 697 | .color-contrast-lower { color: alpha(var(--color-contrast-lower), var(--color-o, 1)); } 698 | .color-contrast-low { color: alpha(var(--color-contrast-low), var(--color-o, 1)); } 699 | .color-contrast-medium { color: alpha(var(--color-contrast-medium), var(--color-o, 1)); } 700 | .color-contrast-high { color: alpha(var(--color-contrast-high), var(--color-o, 1)); } 701 | .color-contrast-higher { color: alpha(var(--color-contrast-higher), var(--color-o, 1)); } 702 | 703 | .color-primary-darker { color: alpha(var(--color-primary-darker), var(--color-o, 1)); } 704 | .color-primary-dark { color: alpha(var(--color-primary-dark), var(--color-o, 1)); } 705 | .color-primary { color: alpha(var(--color-primary), var(--color-o, 1)); } 706 | .color-primary-light { color: alpha(var(--color-primary-light), var(--color-o, 1)); } 707 | .color-primary-lighter { color: alpha(var(--color-primary-lighter), var(--color-o, 1)); } 708 | 709 | .color-accent-darker { color: alpha(var(--color-accent-darker), var(--color-o, 1)); } 710 | .color-accent-dark { color: alpha(var(--color-accent-dark), var(--color-o, 1)); } 711 | .color-accent { color: alpha(var(--color-accent), var(--color-o, 1)); } 712 | .color-accent-light { color: alpha(var(--color-accent-light), var(--color-o, 1)); } 713 | .color-accent-lighter { color: alpha(var(--color-accent-lighter), var(--color-o, 1)); } 714 | 715 | .color-success-darker { color: alpha(var(--color-success-darker), var(--color-o, 1)); } 716 | .color-success-dark { color: alpha(var(--color-success-dark), var(--color-o, 1)); } 717 | .color-success { color: alpha(var(--color-success), var(--color-o, 1)); } 718 | .color-success-light { color: alpha(var(--color-success-light), var(--color-o, 1)); } 719 | .color-success-lighter { color: alpha(var(--color-success-lighter), var(--color-o, 1)); } 720 | 721 | .color-warning-darker { color: alpha(var(--color-warning-darker), var(--color-o, 1)); } 722 | .color-warning-dark { color: alpha(var(--color-warning-dark), var(--color-o, 1)); } 723 | .color-warning { color: alpha(var(--color-warning), var(--color-o, 1)); } 724 | .color-warning-light { color: alpha(var(--color-warning-light), var(--color-o, 1)); } 725 | .color-warning-lighter { color: alpha(var(--color-warning-lighter), var(--color-o, 1)); } 726 | 727 | .color-error-darker { color: alpha(var(--color-error-darker), var(--color-o, 1)); } 728 | .color-error-dark { color: alpha(var(--color-error-dark), var(--color-o, 1)); } 729 | .color-error { color: alpha(var(--color-error), var(--color-o, 1)); } 730 | .color-error-light { color: alpha(var(--color-error-light), var(--color-o, 1)); } 731 | .color-error-lighter { color: alpha(var(--color-error-lighter), var(--color-o, 1)); } 732 | 733 | .color-white { color: alpha(var(--color-white), var(--color-o, 1)); } 734 | .color-black { color: alpha(var(--color-black), var(--color-o, 1)); } 735 | 736 | .color-opacity-0 { --color-o: 0; } 737 | .color-opacity-5\% { --color-o: 0.05; } 738 | .color-opacity-10\% { --color-o: 0.1; } 739 | .color-opacity-15\% { --color-o: 0.15; } 740 | .color-opacity-20\% { --color-o: 0.2; } 741 | .color-opacity-25\% { --color-o: 0.25; } 742 | .color-opacity-30\% { --color-o: 0.3; } 743 | .color-opacity-40\% { --color-o: 0.4; } 744 | .color-opacity-50\% { --color-o: 0.5; } 745 | .color-opacity-60\% { --color-o: 0.6; } 746 | .color-opacity-70\% { --color-o: 0.7; } 747 | .color-opacity-75\% { --color-o: 0.75; } 748 | .color-opacity-80\% { --color-o: 0.8; } 749 | .color-opacity-85\% { --color-o: 0.85; } 750 | .color-opacity-90\% { --color-o: 0.9; } 751 | .color-opacity-95\% { --color-o: 0.95; } 752 | 753 | // -------------------------------- 754 | 755 | // Gradients 756 | 757 | // -------------------------------- 758 | 759 | [class^="color-gradient"], [class*=" color-gradient"] { 760 | color: transparent !important; 761 | background-clip: text; 762 | opacity: var(--color-o, 1); 763 | } 764 | 765 | // -------------------------------- 766 | 767 | // Width 768 | 769 | // -------------------------------- 770 | 771 | .width-xxxxs { width: var(--size-xxxxs, 0.25rem); } 772 | .width-xxxs { width: var(--size-xxxs, 0.5rem); } 773 | .width-xxs { width: var(--size-xxs, 0.75rem); } 774 | .width-xs { width: var(--size-xs, 1rem); } 775 | .width-sm { width: var(--size-sm, 1.5rem); } 776 | .width-md { width: var(--size-md, 2rem); } 777 | .width-lg { width: var(--size-lg, 3rem); } 778 | .width-xl { width: var(--size-xl, 4rem); } 779 | .width-xxl { width: var(--size-xxl, 6rem); } 780 | .width-xxxl { width: var(--size-xxxl, 8rem); } 781 | .width-xxxxl { width: var(--size-xxxxl, 16rem); } 782 | .width-0 { width: 0; } 783 | .width-10\% { width: 10%; } 784 | .width-20\% { width: 20%; } 785 | .width-25\% { width: 25%; } 786 | .width-30\% { width: 30%; } 787 | .width-33\% { width: calc(100% / 3); } 788 | .width-40\% { width: 40%; } 789 | .width-50\% { width: 50%; } 790 | .width-60\% { width: 60%; } 791 | .width-66\% { width: calc(100% / 1.5); } 792 | .width-70\% { width: 70%; } 793 | .width-75\% { width: 75%; } 794 | .width-80\% { width: 80%; } 795 | .width-90\% { width: 90%; } 796 | .width-100\% { width: 100%; } 797 | .width-100vw { width: 100vw; } 798 | .width-auto { width: auto; } 799 | .width-inherit { width: inherit; } 800 | 801 | // -------------------------------- 802 | 803 | // Height 804 | 805 | // -------------------------------- 806 | 807 | .height-xxxxs { height: var(--size-xxxxs, 0.25rem); } 808 | .height-xxxs { height: var(--size-xxxs, 0.5rem); } 809 | .height-xxs { height: var(--size-xxs, 0.75rem); } 810 | .height-xs { height: var(--size-xs, 1rem); } 811 | .height-sm { height: var(--size-sm, 1.5rem); } 812 | .height-md { height: var(--size-md, 2rem); } 813 | .height-lg { height: var(--size-lg, 3rem); } 814 | .height-xl { height: var(--size-xl, 4rem); } 815 | .height-xxl { height: var(--size-xxl, 6rem); } 816 | .height-xxxl { height: var(--size-xxxl, 8rem); } 817 | .height-xxxxl { height: var(--size-xxxxl, 16rem); } 818 | .height-0 { height: 0; } 819 | .height-10\% { height: 10%; } 820 | .height-20\% { height: 20%; } 821 | .height-25\% { height: 25%; } 822 | .height-30\% { height: 30%; } 823 | .height-33\% { height: calc(100% / 3); } 824 | .height-40\% { height: 40%; } 825 | .height-50\% { height: 50%; } 826 | .height-60\% { height: 60%; } 827 | .height-66\% { height: calc(100% / 1.5); } 828 | .height-70\% { height: 70%; } 829 | .height-75\% { height: 75%; } 830 | .height-80\% { height: 80%; } 831 | .height-90\% { height: 90%; } 832 | .height-100\% { height: 100%; } 833 | .height-100vh { height: 100vh; } 834 | .height-auto { height: auto; } 835 | .height-inherit { height: inherit; } 836 | 837 | // -------------------------------- 838 | 839 | // Min-Width 840 | 841 | // -------------------------------- 842 | 843 | .min-width-0 { min-width: 0; } 844 | .min-width-25\% { min-width: 25%; } 845 | .min-width-33\% { min-width: calc(100% / 3); } 846 | .min-width-50\% { min-width: 50%; } 847 | .min-width-66\% { min-width: calc(100% / 1.5); } 848 | .min-width-75\% { min-width: 75%; } 849 | .min-width-100\% { min-width: 100%; } 850 | .min-width-100vw { min-width: 100vw; } 851 | 852 | // -------------------------------- 853 | 854 | // Min-Height 855 | 856 | // -------------------------------- 857 | 858 | .min-height-0 { min-height: 0; } 859 | .min-height-100\% { min-height: 100%; } 860 | .min-height-100vh { min-height: 100vh; } 861 | 862 | // -------------------------------- 863 | 864 | // Max-Width 865 | 866 | // -------------------------------- 867 | 868 | :root { 869 | --max-width-xxxxxs: 17.5rem; // ~280px 870 | --max-width-xxxxs: 20rem; // ~320px 871 | --max-width-xxxs: 26rem; // ~416px 872 | --max-width-xxs: 32rem; // ~512px 873 | --max-width-xs: 38rem; // ~608px 874 | --max-width-sm: 48rem; // ~768px 875 | --max-width-md: 64rem; // ~1024px 876 | --max-width-lg: 80rem; // ~1280px 877 | --max-width-xl: 90rem; // ~1440px 878 | --max-width-xxl: 100rem; // ~1600px 879 | --max-width-xxxl: 120rem; // ~1920px 880 | --max-width-xxxxl: 150rem; // ~2400px 881 | } 882 | 883 | .max-width-xxxxxs { max-width: var(--max-width-xxxxxs); } 884 | .max-width-xxxxs { max-width: var(--max-width-xxxxs); } 885 | .max-width-xxxs { max-width: var(--max-width-xxxs); } 886 | .max-width-xxs { max-width: var(--max-width-xxs); } 887 | .max-width-xs { max-width: var(--max-width-xs); } 888 | .max-width-sm { max-width: var(--max-width-sm); } 889 | .max-width-md { max-width: var(--max-width-md); } 890 | .max-width-lg { max-width: var(--max-width-lg); } 891 | .max-width-xl { max-width: var(--max-width-xl); } 892 | .max-width-xxl { max-width: var(--max-width-xxl); } 893 | .max-width-xxxl { max-width: var(--max-width-xxxl); } 894 | .max-width-xxxxl { max-width: var(--max-width-xxxxl); } 895 | .max-width-100\% { max-width: 100%; } 896 | .max-width-none { max-width: none; } 897 | 898 | // alt approach - max-width is equal to current breakpoint 899 | $breakpointsNr: length($breakpoints); 900 | @each $breakpoint, $value in $breakpoints { 901 | $i: index($breakpoints, $breakpoint $value); 902 | @if $i == 1 { 903 | [class^="max-width-adaptive"], [class*=" max-width-adaptive"] { 904 | max-width: map-get($map: $breakpoints, $key: #{$breakpoint}); 905 | } 906 | } @else { 907 | $classList : ''; 908 | @each $subBreakpoint, $subValue in $breakpoints { 909 | $j: index($breakpoints, $subBreakpoint $subValue); 910 | @if $j == $i { 911 | $classList: '.max-width-adaptive-#{$subBreakpoint}'; 912 | } @else if $j > $i { 913 | $classList: $classList+', .max-width-adaptive-#{$subBreakpoint}'; 914 | } 915 | } 916 | @if $i < $breakpointsNr { 917 | $classList: $classList+', .max-width-adaptive'; 918 | } 919 | @include breakpoint(#{$breakpoint}) { 920 | #{$classList} { 921 | max-width: map-get($map: $breakpoints, $key: #{$breakpoint}); 922 | } 923 | } 924 | } 925 | } 926 | 927 | // -------------------------------- 928 | 929 | // Max-Height 930 | 931 | // -------------------------------- 932 | 933 | .max-height-100\% { max-height: 100%; } 934 | .max-height-100vh { max-height: 100vh; } 935 | 936 | // -------------------------------- 937 | 938 | // Box-Shadow 939 | 940 | // -------------------------------- 941 | 942 | .shadow-ring { box-shadow: var(--shadow-ring); } 943 | .shadow-xs { box-shadow: var(--shadow-xs); } 944 | .shadow-xs.shadow-ring { box-shadow: var(--shadow-xs), var(--shadow-ring); } 945 | .shadow-sm { box-shadow: var(--shadow-sm); } 946 | .shadow-sm.shadow-ring { box-shadow: var(--shadow-sm), var(--shadow-ring); } 947 | .shadow-md { box-shadow: var(--shadow-md); } 948 | .shadow-md.shadow-ring { box-shadow: var(--shadow-md), var(--shadow-ring); } 949 | .shadow-lg { box-shadow: var(--shadow-lg); } 950 | .shadow-lg.shadow-ring { box-shadow: var(--shadow-lg), var(--shadow-ring); } 951 | .shadow-xl { box-shadow: var(--shadow-xl); } 952 | .shadow-xl.shadow-ring { box-shadow: var(--shadow-xl), var(--shadow-ring); } 953 | .shadow-none { box-shadow: none; } 954 | 955 | :where(.inner-glow, .inner-glow-top) { 956 | position: relative; 957 | 958 | &::after { 959 | content: ''; 960 | position: absolute; 961 | z-index: 1; 962 | top: 0; 963 | left: 0; 964 | width: 100%; 965 | height: 100%; 966 | border-radius: inherit; 967 | pointer-events: none; 968 | } 969 | } 970 | 971 | .inner-glow::after { box-shadow: var(--inner-glow); } 972 | .inner-glow-top::after { box-shadow: var(--inner-glow-top); } 973 | 974 | // -------------------------------- 975 | 976 | // Position 977 | 978 | // -------------------------------- 979 | 980 | .position-relative { position: relative; } 981 | .position-absolute { position: absolute; } 982 | .position-fixed { position: fixed; } 983 | .position-sticky { position: sticky; } 984 | 985 | .inset-0 { top: 0; right: 0; bottom: 0; left: 0; } 986 | 987 | .top-0 { top: 0; } 988 | .top-50\% { top: 50%; } 989 | .top-xxxxs { top: var(--space-xxxxs); } 990 | .top-xxxs { top: var(--space-xxxs); } 991 | .top-xxs { top: var(--space-xxs); } 992 | .top-xs { top: var(--space-xs); } 993 | .top-sm { top: var(--space-sm); } 994 | .top-md { top: var(--space-md); } 995 | .top-lg { top: var(--space-lg); } 996 | .top-xl { top: var(--space-xl); } 997 | .top-xxl { top: var(--space-xxl); } 998 | .top-xxxl { top: var(--space-xxxl); } 999 | .top-xxxxl { top: var(--space-xxxxl); } 1000 | 1001 | .bottom-0 { bottom: 0; } 1002 | .bottom-50\% { bottom: 50%; } 1003 | .bottom-xxxxs { bottom: var(--space-xxxxs); } 1004 | .bottom-xxxs { bottom: var(--space-xxxs); } 1005 | .bottom-xxs { bottom: var(--space-xxs); } 1006 | .bottom-xs { bottom: var(--space-xs); } 1007 | .bottom-sm { bottom: var(--space-sm); } 1008 | .bottom-md { bottom: var(--space-md); } 1009 | .bottom-lg { bottom: var(--space-lg); } 1010 | .bottom-xl { bottom: var(--space-xl); } 1011 | .bottom-xxl { bottom: var(--space-xxl); } 1012 | .bottom-xxxl { bottom: var(--space-xxxl); } 1013 | .bottom-xxxxl { bottom: var(--space-xxxxl); } 1014 | 1015 | .right-0 { right: 0; } 1016 | .right-50\% { right: 50%; } 1017 | .right-xxxxs { right: var(--space-xxxxs); } 1018 | .right-xxxs { right: var(--space-xxxs); } 1019 | .right-xxs { right: var(--space-xxs); } 1020 | .right-xs { right: var(--space-xs); } 1021 | .right-sm { right: var(--space-sm); } 1022 | .right-md { right: var(--space-md); } 1023 | .right-lg { right: var(--space-lg); } 1024 | .right-xl { right: var(--space-xl); } 1025 | .right-xxl { right: var(--space-xxl); } 1026 | .right-xxxl { right: var(--space-xxxl); } 1027 | .right-xxxxl { right: var(--space-xxxxl); } 1028 | 1029 | .left-0 { left: 0; } 1030 | .left-50\% { left: 50%; } 1031 | .left-xxxxs { left: var(--space-xxxxs); } 1032 | .left-xxxs { left: var(--space-xxxs); } 1033 | .left-xxs { left: var(--space-xxs); } 1034 | .left-xs { left: var(--space-xs); } 1035 | .left-sm { left: var(--space-sm); } 1036 | .left-md { left: var(--space-md); } 1037 | .left-lg { left: var(--space-lg); } 1038 | .left-xl { left: var(--space-xl); } 1039 | .left-xxl { left: var(--space-xxl); } 1040 | .left-xxxl { left: var(--space-xxxl); } 1041 | .left-xxxxl { left: var(--space-xxxxl); } 1042 | 1043 | // -------------------------------- 1044 | 1045 | // Z-Index 1046 | 1047 | // -------------------------------- 1048 | 1049 | .z-index-header { z-index: var(--z-index-header); } 1050 | .z-index-popover { z-index: var(--z-index-popover); } 1051 | .z-index-fixed-element { z-index: var(--z-index-fixed-element); } 1052 | .z-index-overlay { z-index: var(--z-index-overlay); } 1053 | 1054 | .z-index-1 { z-index: 1; } 1055 | .z-index-2 { z-index: 2; } 1056 | .z-index-3 { z-index: 3; } 1057 | 1058 | // -------------------------------- 1059 | 1060 | // Overflow 1061 | 1062 | // -------------------------------- 1063 | 1064 | .overflow-visible { overflow: visible; } 1065 | .overflow-hidden { overflow: hidden; } 1066 | .overflow-x-hidden { overflow-x: hidden; } 1067 | .overflow-y-hidden { overflow-y: hidden; } 1068 | .overflow-clip { overflow: clip; } 1069 | .overflow-x-clip { overflow-x: clip; } 1070 | .overflow-y-clip { overflow-y: clip; } 1071 | .overflow-auto { overflow: auto; } 1072 | .momentum-scrolling { -webkit-overflow-scrolling: touch; } 1073 | 1074 | // overscroll-behavior 1075 | .overscroll-contain { overscroll-behavior: contain; } 1076 | 1077 | // -------------------------------- 1078 | 1079 | // Scroll Behavior 1080 | 1081 | // -------------------------------- 1082 | 1083 | .scroll-smooth { scroll-behavior: smooth; } 1084 | 1085 | .scroll-padding-xxxxs { scroll-padding: var(--space-xxxxs); } 1086 | .scroll-padding-xxxs { scroll-padding: var(--space-xxxs); } 1087 | .scroll-padding-xxs { scroll-padding: var(--space-xxs); } 1088 | .scroll-padding-xs { scroll-padding: var(--space-xs); } 1089 | .scroll-padding-sm { scroll-padding: var(--space-sm); } 1090 | .scroll-padding-md { scroll-padding: var(--space-md); } 1091 | .scroll-padding-lg { scroll-padding: var(--space-lg); } 1092 | .scroll-padding-xl { scroll-padding: var(--space-xl); } 1093 | .scroll-padding-xxl { scroll-padding: var(--space-xxl); } 1094 | .scroll-padding-xxxl { scroll-padding: var(--space-xxxl); } 1095 | .scroll-padding-xxxxl { scroll-padding: var(--space-xxxxl); } 1096 | 1097 | 1098 | // -------------------------------- 1099 | 1100 | // Opacity 1101 | 1102 | // -------------------------------- 1103 | 1104 | .opacity-0 { opacity: 0; } 1105 | .opacity-5\% { opacity: 0.05; } 1106 | .opacity-10\% { opacity: 0.1; } 1107 | .opacity-15\% { opacity: 0.15; } 1108 | .opacity-20\% { opacity: 0.2; } 1109 | .opacity-25\% { opacity: 0.25; } 1110 | .opacity-30\% { opacity: 0.3; } 1111 | .opacity-40\% { opacity: 0.4; } 1112 | .opacity-50\% { opacity: 0.5; } 1113 | .opacity-60\% { opacity: 0.6; } 1114 | .opacity-70\% { opacity: 0.7; } 1115 | .opacity-75\% { opacity: 0.75; } 1116 | .opacity-80\% { opacity: 0.8; } 1117 | .opacity-85\% { opacity: 0.85; } 1118 | .opacity-90\% { opacity: 0.9; } 1119 | .opacity-95\% { opacity: 0.95; } 1120 | 1121 | // -------------------------------- 1122 | 1123 | // Float 1124 | 1125 | // -------------------------------- 1126 | 1127 | .float-left { float: left; } 1128 | .float-right { float: right; } 1129 | 1130 | .clearfix::after { 1131 | content: ""; 1132 | display: table; 1133 | clear: both; 1134 | } 1135 | 1136 | // -------------------------------- 1137 | 1138 | // Border 1139 | 1140 | // -------------------------------- 1141 | 1142 | [class^="border-"], [class*=" border-"] { 1143 | --border-o: 1; 1144 | --border-width: 1px; 1145 | --border-style: solid; 1146 | } 1147 | 1148 | .border { border: var(--border-width, 1px) var(--border-style, solid) alpha(var(--color-contrast-higher), var(--border-o-base, 0.1)); } 1149 | .border-top { border-top: var(--border-width, 1px) var(--border-style, solid) alpha(var(--color-contrast-higher), var(--border-o-base, 0.1)); } 1150 | .border-bottom { border-bottom: var(--border-width, 1px) var(--border-style, solid) alpha(var(--color-contrast-higher), var(--border-o-base, 0.1)); } 1151 | .border-left { border-left: var(--border-width, 1px) var(--border-style, solid) alpha(var(--color-contrast-higher), var(--border-o-base, 0.1)); } 1152 | .border-right { border-right: var(--border-width, 1px) var(--border-style, solid) alpha(var(--color-contrast-higher), var(--border-o-base, 0.1)); } 1153 | 1154 | .border-2 { --border-width: 2px; } 1155 | .border-3 { --border-width: 3px; } 1156 | .border-4 { --border-width: 4px; } 1157 | .border-dotted { --border-style: dotted; } 1158 | .border-dashed { --border-style: dashed; } 1159 | 1160 | .border-bg-darker { border-color: alpha(var(--color-bg-darker), var(--border-o, 1)); } 1161 | .border-bg-dark { border-color: alpha(var(--color-bg-dark), var(--border-o, 1)); } 1162 | .border-bg { border-color: alpha(var(--color-bg), var(--border-o, 1)); } 1163 | .border-bg-light { border-color: alpha(var(--color-bg-light), var(--border-o, 1)); } 1164 | .border-bg-lighter { border-color: alpha(var(--color-bg-lighter), var(--border-o, 1)); } 1165 | 1166 | .border-contrast-lower { border-color: alpha(var(--color-contrast-lower), var(--border-o, 1)); } 1167 | .border-contrast-low { border-color: alpha(var(--color-contrast-low), var(--border-o, 1)); } 1168 | .border-contrast-medium { border-color: alpha(var(--color-contrast-medium), var(--border-o, 1)); } 1169 | .border-contrast-high { border-color: alpha(var(--color-contrast-high), var(--border-o, 1)); } 1170 | .border-contrast-higher { border-color: alpha(var(--color-contrast-higher), var(--border-o, 1)); } 1171 | 1172 | .border-primary-darker { border-color: alpha(var(--color-primary-darker), var(--border-o, 1)); } 1173 | .border-primary-dark { border-color: alpha(var(--color-primary-dark), var(--border-o, 1)); } 1174 | .border-primary { border-color: alpha(var(--color-primary), var(--border-o, 1)); } 1175 | .border-primary-light { border-color: alpha(var(--color-primary-light), var(--border-o, 1)); } 1176 | .border-primary-lighter { border-color: alpha(var(--color-primary-lighter), var(--border-o, 1)); } 1177 | 1178 | .border-accent-darker { border-color: alpha(var(--color-accent-darker), var(--border-o, 1)); } 1179 | .border-accent-dark { border-color: alpha(var(--color-accent-dark), var(--border-o, 1)); } 1180 | .border-accent { border-color: alpha(var(--color-accent), var(--border-o, 1)); } 1181 | .border-accent-light { border-color: alpha(var(--color-accent-light), var(--border-o, 1)); } 1182 | .border-accent-lighter { border-color: alpha(var(--color-accent-lighter), var(--border-o, 1)); } 1183 | 1184 | .border-success-darker { border-color: alpha(var(--color-success-darker), var(--border-o, 1)); } 1185 | .border-success-dark { border-color: alpha(var(--color-success-dark), var(--border-o, 1)); } 1186 | .border-success { border-color: alpha(var(--color-success), var(--border-o, 1)); } 1187 | .border-success-light { border-color: alpha(var(--color-success-light), var(--border-o, 1)); } 1188 | .border-success-lighter { border-color: alpha(var(--color-success-lighter), var(--border-o, 1)); } 1189 | 1190 | .border-warning-darker { border-color: alpha(var(--color-warning-darker), var(--border-o, 1)); } 1191 | .border-warning-dark { border-color: alpha(var(--color-warning-dark), var(--border-o, 1)); } 1192 | .border-warning { border-color: alpha(var(--color-warning), var(--border-o, 1)); } 1193 | .border-warning-light { border-color: alpha(var(--color-warning-light), var(--border-o, 1)); } 1194 | .border-warning-lighter { border-color: alpha(var(--color-warning-lighter), var(--border-o, 1)); } 1195 | 1196 | .border-error-darker { border-color: alpha(var(--color-error-darker), var(--border-o, 1)); } 1197 | .border-error-dark { border-color: alpha(var(--color-error-dark), var(--border-o, 1)); } 1198 | .border-error { border-color: alpha(var(--color-error), var(--border-o, 1)); } 1199 | .border-error-light { border-color: alpha(var(--color-error-light), var(--border-o, 1)); } 1200 | .border-error-lighter { border-color: alpha(var(--color-error-lighter), var(--border-o, 1)); } 1201 | 1202 | .border-white { border-color: alpha(var(--color-white), var(--border-o, 1)); } 1203 | .border-black { border-color: alpha(var(--color-black), var(--border-o, 1)); } 1204 | 1205 | .border-opacity-0 { --border-o: 0; } 1206 | .border-opacity-5\% { --border-o: 0.05; } 1207 | .border-opacity-10\% { --border-o: 0.1; } 1208 | .border-opacity-15\% { --border-o: 0.15; } 1209 | .border-opacity-20\% { --border-o: 0.2; } 1210 | .border-opacity-25\% { --border-o: 0.25; } 1211 | .border-opacity-30\% { --border-o: 0.3; } 1212 | .border-opacity-40\% { --border-o: 0.4; } 1213 | .border-opacity-50\% { --border-o: 0.5; } 1214 | .border-opacity-60\% { --border-o: 0.6; } 1215 | .border-opacity-70\% { --border-o: 0.7; } 1216 | .border-opacity-75\% { --border-o: 0.75; } 1217 | .border-opacity-80\% { --border-o: 0.8; } 1218 | .border-opacity-85\% { --border-o: 0.85; } 1219 | .border-opacity-90\% { --border-o: 0.9; } 1220 | .border-opacity-95\% { --border-o: 0.95; } 1221 | 1222 | // -------------------------------- 1223 | 1224 | // Border Radius 1225 | 1226 | // -------------------------------- 1227 | 1228 | .radius-sm { border-radius: var(--radius-sm); } 1229 | .radius-md { border-radius: var(--radius-md); } 1230 | .radius-lg { border-radius: var(--radius-lg); } 1231 | .radius-50\% { border-radius: 50%; } 1232 | .radius-full { border-radius: 50em; } 1233 | .radius-0 { border-radius: 0; } 1234 | .radius-inherit { border-radius: inherit; } 1235 | .radius-top-left-0 { border-top-left-radius: 0; } 1236 | .radius-top-right-0 { border-top-right-radius: 0; } 1237 | .radius-bottom-right-0 { border-bottom-right-radius: 0; } 1238 | .radius-bottom-left-0 { border-bottom-left-radius: 0; } 1239 | 1240 | // -------------------------------- 1241 | 1242 | // Background 1243 | 1244 | // -------------------------------- 1245 | 1246 | .bg, [class^="bg-"], [class*=" bg-"] { --bg-o: 1; } 1247 | 1248 | .bg-transparent { background-color: transparent; } 1249 | .bg-inherit { background-color: inherit; } 1250 | 1251 | .bg-darker { background-color: alpha(var(--color-bg-darker), var(--bg-o)); } 1252 | .bg-dark { background-color: alpha(var(--color-bg-dark), var(--bg-o)); } 1253 | .bg { background-color: alpha(var(--color-bg), var(--bg-o)); } 1254 | .bg-light { background-color: alpha(var(--color-bg-light), var(--bg-o)); } 1255 | .bg-lighter { background-color: alpha(var(--color-bg-lighter), var(--bg-o)); } 1256 | 1257 | .bg-contrast-lower { background-color: alpha(var(--color-contrast-lower), var(--bg-o, 1)); } 1258 | .bg-contrast-low { background-color: alpha(var(--color-contrast-low), var(--bg-o, 1)); } 1259 | .bg-contrast-medium { background-color: alpha(var(--color-contrast-medium), var(--bg-o, 1)); } 1260 | .bg-contrast-high { background-color: alpha(var(--color-contrast-high), var(--bg-o, 1)); } 1261 | .bg-contrast-higher { background-color: alpha(var(--color-contrast-higher), var(--bg-o, 1)); } 1262 | 1263 | .bg-primary-darker { background-color: alpha(var(--color-primary-darker), var(--bg-o, 1)); } 1264 | .bg-primary-dark { background-color: alpha(var(--color-primary-dark), var(--bg-o, 1)); } 1265 | .bg-primary { background-color: alpha(var(--color-primary), var(--bg-o, 1)); } 1266 | .bg-primary-light { background-color: alpha(var(--color-primary-light), var(--bg-o, 1)); } 1267 | .bg-primary-lighter { background-color: alpha(var(--color-primary-lighter), var(--bg-o, 1)); } 1268 | 1269 | .bg-accent-darker { background-color: alpha(var(--color-accent-darker), var(--bg-o, 1)); } 1270 | .bg-accent-dark { background-color: alpha(var(--color-accent-dark), var(--bg-o, 1)); } 1271 | .bg-accent { background-color: alpha(var(--color-accent), var(--bg-o, 1)); } 1272 | .bg-accent-light { background-color: alpha(var(--color-accent-light), var(--bg-o, 1)); } 1273 | .bg-accent-lighter { background-color: alpha(var(--color-accent-lighter), var(--bg-o, 1)); } 1274 | 1275 | .bg-success-darker { background-color: alpha(var(--color-success-darker), var(--bg-o, 1)); } 1276 | .bg-success-dark { background-color: alpha(var(--color-success-dark), var(--bg-o, 1)); } 1277 | .bg-success { background-color: alpha(var(--color-success), var(--bg-o, 1)); } 1278 | .bg-success-light { background-color: alpha(var(--color-success-light), var(--bg-o, 1)); } 1279 | .bg-success-lighter { background-color: alpha(var(--color-success-lighter), var(--bg-o, 1)); } 1280 | 1281 | .bg-warning-darker { background-color: alpha(var(--color-warning-darker), var(--bg-o, 1)); } 1282 | .bg-warning-dark { background-color: alpha(var(--color-warning-dark), var(--bg-o, 1)); } 1283 | .bg-warning { background-color: alpha(var(--color-warning), var(--bg-o, 1)); } 1284 | .bg-warning-light { background-color: alpha(var(--color-warning-light), var(--bg-o, 1)); } 1285 | .bg-warning-lighter { background-color: alpha(var(--color-warning-lighter), var(--bg-o, 1)); } 1286 | 1287 | .bg-error-darker { background-color: alpha(var(--color-error-darker), var(--bg-o, 1)); } 1288 | .bg-error-dark { background-color: alpha(var(--color-error-dark), var(--bg-o, 1)); } 1289 | .bg-error { background-color: alpha(var(--color-error), var(--bg-o, 1)); } 1290 | .bg-error-light { background-color: alpha(var(--color-error-light), var(--bg-o, 1)); } 1291 | .bg-error-lighter { background-color: alpha(var(--color-error-lighter), var(--bg-o, 1)); } 1292 | 1293 | .bg-white { background-color: alpha(var(--color-white), var(--bg-o, 1)); } 1294 | .bg-black { background-color: alpha(var(--color-black), var(--bg-o, 1)); } 1295 | 1296 | .bg-opacity-0 { --bg-o: 0; } 1297 | .bg-opacity-5\% { --bg-o: 0.05; } 1298 | .bg-opacity-10\% { --bg-o: 0.1; } 1299 | .bg-opacity-15\% { --bg-o: 0.15; } 1300 | .bg-opacity-20\% { --bg-o: 0.2; } 1301 | .bg-opacity-25\% { --bg-o: 0.25; } 1302 | .bg-opacity-30\% { --bg-o: 0.3; } 1303 | .bg-opacity-40\% { --bg-o: 0.4; } 1304 | .bg-opacity-50\% { --bg-o: 0.5; } 1305 | .bg-opacity-60\% { --bg-o: 0.6; } 1306 | .bg-opacity-70\% { --bg-o: 0.7; } 1307 | .bg-opacity-75\% { --bg-o: 0.75; } 1308 | .bg-opacity-80\% { --bg-o: 0.8; } 1309 | .bg-opacity-85\% { --bg-o: 0.85; } 1310 | .bg-opacity-90\% { --bg-o: 0.9; } 1311 | .bg-opacity-95\% { --bg-o: 0.95; } 1312 | 1313 | .bg-center { background-position: center; } 1314 | .bg-top { background-position: center top; } 1315 | .bg-right { background-position: right center; } 1316 | .bg-bottom { background-position: center bottom; } 1317 | .bg-left { background-position: left center; } 1318 | .bg-top-left { background-position: left top; } 1319 | .bg-top-right { background-position: right top; } 1320 | .bg-bottom-left { background-position: left bottom; } 1321 | .bg-bottom-right { background-position: right bottom; } 1322 | 1323 | .bg-cover { background-size: cover; } 1324 | .bg-no-repeat { background-repeat: no-repeat; } 1325 | 1326 | // -------------------------------- 1327 | 1328 | // Backdrop Filter 1329 | 1330 | // -------------------------------- 1331 | 1332 | .backdrop-blur-10 { backdrop-filter: blur(10px); } 1333 | .backdrop-blur-20 { backdrop-filter: blur(20px); } 1334 | 1335 | // -------------------------------- 1336 | 1337 | // Mix-Blend Mode 1338 | 1339 | // -------------------------------- 1340 | 1341 | .isolate { isolation: isolate; } 1342 | .blend-multiply { mix-blend-mode: multiply; } 1343 | .blend-overlay { mix-blend-mode: overlay; } 1344 | .blend-difference { mix-blend-mode: difference; } 1345 | 1346 | // -------------------------------- 1347 | 1348 | // Object-Fit 1349 | 1350 | // -------------------------------- 1351 | 1352 | .object-contain { object-fit: contain; } 1353 | .object-cover { object-fit: cover; } 1354 | 1355 | // -------------------------------- 1356 | 1357 | // Perspective 1358 | 1359 | // -------------------------------- 1360 | 1361 | .perspective-xs { perspective: 250px; } 1362 | .perspective-sm { perspective: 500px; } 1363 | .perspective-md { perspective: 1000px; } 1364 | .perspective-lg { perspective: 1500px; } 1365 | .perspective-xl { perspective: 3000px; } 1366 | 1367 | // -------------------------------- 1368 | 1369 | // Transform 1370 | 1371 | // -------------------------------- 1372 | 1373 | [class^="flip"], [class*=" flip"], 1374 | [class^="-rotate"], [class*=" -rotate"], 1375 | [class^="rotate"], [class*=" rotate"], 1376 | [class^="-translate"], [class*=" -translate"], 1377 | [class^="translate"], [class*=" translate"], 1378 | [class^="-scale"], [class*=" -scale"], 1379 | [class^="scale"], [class*=" scale"], 1380 | [class^="-skew"], [class*=" -skew"] 1381 | [class^="skew"], [class*=" skew"] { 1382 | --translate: 0; 1383 | --rotate: 0; 1384 | --skew: 0; 1385 | --scale: 1; 1386 | 1387 | 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))); 1388 | } 1389 | 1390 | .flip { --scale: -1; } 1391 | .flip-x { --scale-x: -1; } 1392 | .flip-y { --scale-y: -1; } 1393 | 1394 | .rotate-90 { --rotate: 90deg; } 1395 | .rotate-180 { --rotate: 180deg; } 1396 | .rotate-270 { --rotate: 270deg; } 1397 | 1398 | .-translate-50\% { --translate: -50%; } 1399 | .-translate-x-50\% { --translate-x: -50%; } 1400 | .-translate-y-50\% { --translate-y: -50%; } 1401 | 1402 | .translate-50\% { --translate: 50%; } 1403 | .translate-x-50\% { --translate-x: 50%; } 1404 | .translate-y-50\% { --translate-y: 50%; } 1405 | 1406 | // -------------------------------- 1407 | 1408 | // Transform Origin 1409 | 1410 | // -------------------------------- 1411 | 1412 | .origin-center { transform-origin: center; } 1413 | .origin-top { transform-origin: center top; } 1414 | .origin-right { transform-origin: right center; } 1415 | .origin-bottom { transform-origin: center bottom; } 1416 | .origin-left { transform-origin: left center; } 1417 | .origin-top-left { transform-origin: left top; } 1418 | .origin-top-right { transform-origin: right top; } 1419 | .origin-bottom-left { transform-origin: left bottom; } 1420 | .origin-bottom-right { transform-origin: right bottom; } 1421 | 1422 | // -------------------------------- 1423 | 1424 | // Transition 1425 | 1426 | // -------------------------------- 1427 | 1428 | .transition { 1429 | transition-property: var(--transition-property, all); 1430 | transition-duration: var(--transition-duration, 0.2s); 1431 | transition-delay: var(--transition-delay, 0s); 1432 | } 1433 | 1434 | // -------------------------------- 1435 | 1436 | // SVG 1437 | 1438 | // -------------------------------- 1439 | 1440 | .fill-current { fill: currentColor; } 1441 | 1442 | .stroke-current { stroke: currentColor; } 1443 | 1444 | .stroke-1 { stroke-width: 1px; } 1445 | .stroke-2 { stroke-width: 2px; } 1446 | .stroke-3 { stroke-width: 3px; } 1447 | .stroke-4 { stroke-width: 4px; } 1448 | 1449 | // -------------------------------- 1450 | 1451 | // Visibility 1452 | 1453 | // -------------------------------- 1454 | 1455 | .visible { visibility: visible; } 1456 | .invisible { visibility: hidden; } 1457 | 1458 | // -------------------------------- 1459 | 1460 | // Appearance 1461 | 1462 | // -------------------------------- 1463 | 1464 | .appearance-none { appearance: none; } 1465 | .appearance-auto { appearance: auto; } 1466 | 1467 | // -------------------------------- 1468 | 1469 | // Responsive Variations 1470 | 1471 | // -------------------------------- 1472 | 1473 | @each $breakpoint, $value in $breakpoints { 1474 | @include breakpoint(#{$breakpoint}) { 1475 | // flexbox 1476 | .flex\@#{$breakpoint} { display: flex; } 1477 | .inline-flex\@#{$breakpoint} { display: inline-flex; } 1478 | .flex-wrap\@#{$breakpoint} { flex-wrap: wrap; } 1479 | .flex-nowrap\@#{$breakpoint} { flex-wrap:nowrap; } 1480 | .flex-column\@#{$breakpoint} { flex-direction: column; } 1481 | .flex-column-reverse\@#{$breakpoint} { flex-direction: column-reverse; } 1482 | .flex-row\@#{$breakpoint} { flex-direction: row; } 1483 | .flex-row-reverse\@#{$breakpoint} { flex-direction: row-reverse; } 1484 | .flex-center\@#{$breakpoint} { justify-content: center; align-items: center; } 1485 | 1486 | .flex-grow\@#{$breakpoint} { flex-grow: 1; } 1487 | .flex-grow-0\@#{$breakpoint} { flex-grow: 0; } 1488 | .flex-shrink\@#{$breakpoint} { flex-shrink: 1; } 1489 | .flex-shrink-0\@#{$breakpoint} { flex-shrink: 0; } 1490 | .flex-basis-0\@#{$breakpoint} { flex-basis: 0; } 1491 | 1492 | // justify-content 1493 | .justify-start\@#{$breakpoint} { justify-content: flex-start; } 1494 | .justify-end\@#{$breakpoint} { justify-content: flex-end; } 1495 | .justify-center\@#{$breakpoint} { justify-content: center; } 1496 | .justify-between\@#{$breakpoint} { justify-content: space-between; } 1497 | 1498 | // align-items 1499 | .items-center\@#{$breakpoint} { align-items: center; } 1500 | .items-start\@#{$breakpoint} { align-items: flex-start; } 1501 | .items-end\@#{$breakpoint} { align-items: flex-end; } 1502 | .items-baseline\@#{$breakpoint} { align-items: baseline; } 1503 | .items-stretch\@#{$breakpoint} { align-items: stretch; } 1504 | 1505 | // align-content 1506 | .content-start\@#{$breakpoint} { align-content: start; } 1507 | .content-end\@#{$breakpoint} { align-content: end; } 1508 | .content-center\@#{$breakpoint} { align-content: center; } 1509 | .content-between\@#{$breakpoint} { align-content: space-between; } 1510 | 1511 | // order 1512 | .order-1\@#{$breakpoint} { order: 1; } 1513 | .order-2\@#{$breakpoint} { order: 2; } 1514 | .order-3\@#{$breakpoint} { order: 3; } 1515 | 1516 | // display 1517 | .block\@#{$breakpoint} { display: block; } 1518 | .inline-block\@#{$breakpoint} { display: inline-block; } 1519 | .inline\@#{$breakpoint} { display: inline; } 1520 | .contents\@#{$breakpoint} { display: contents; } 1521 | .css-grid\@#{$breakpoint} { display: grid; } 1522 | .css-inline-grid\@#{$breakpoint} { display: inline-grid; } 1523 | .hide\@#{$breakpoint} { display: none !important; } 1524 | 1525 | // margin 1526 | .margin-xxxxs\@#{$breakpoint} { margin: var(--space-xxxxs); } 1527 | .margin-xxxs\@#{$breakpoint} { margin: var(--space-xxxs); } 1528 | .margin-xxs\@#{$breakpoint} { margin: var(--space-xxs); } 1529 | .margin-xs\@#{$breakpoint} { margin: var(--space-xs); } 1530 | .margin-sm\@#{$breakpoint} { margin: var(--space-sm); } 1531 | .margin-md\@#{$breakpoint} { margin: var(--space-md); } 1532 | .margin-lg\@#{$breakpoint} { margin: var(--space-lg); } 1533 | .margin-xl\@#{$breakpoint} { margin: var(--space-xl); } 1534 | .margin-xxl\@#{$breakpoint} { margin: var(--space-xxl); } 1535 | .margin-xxxl\@#{$breakpoint} { margin: var(--space-xxxl); } 1536 | .margin-xxxxl\@#{$breakpoint} { margin: var(--space-xxxxl); } 1537 | .margin-auto\@#{$breakpoint} { margin: auto; } 1538 | .margin-0\@#{$breakpoint} { margin: 0; } 1539 | 1540 | .margin-top-xxxxs\@#{$breakpoint} { margin-top: var(--space-xxxxs); } 1541 | .margin-top-xxxs\@#{$breakpoint} { margin-top: var(--space-xxxs); } 1542 | .margin-top-xxs\@#{$breakpoint} { margin-top: var(--space-xxs); } 1543 | .margin-top-xs\@#{$breakpoint} { margin-top: var(--space-xs); } 1544 | .margin-top-sm\@#{$breakpoint} { margin-top: var(--space-sm); } 1545 | .margin-top-md\@#{$breakpoint} { margin-top: var(--space-md); } 1546 | .margin-top-lg\@#{$breakpoint} { margin-top: var(--space-lg); } 1547 | .margin-top-xl\@#{$breakpoint} { margin-top: var(--space-xl); } 1548 | .margin-top-xxl\@#{$breakpoint} { margin-top: var(--space-xxl); } 1549 | .margin-top-xxxl\@#{$breakpoint} { margin-top: var(--space-xxxl); } 1550 | .margin-top-xxxxl\@#{$breakpoint} { margin-top: var(--space-xxxxl); } 1551 | .margin-top-auto\@#{$breakpoint} { margin-top: auto; } 1552 | .margin-top-0\@#{$breakpoint} { margin-top: 0; } 1553 | 1554 | .margin-bottom-xxxxs\@#{$breakpoint} { margin-bottom: var(--space-xxxxs); } 1555 | .margin-bottom-xxxs\@#{$breakpoint} { margin-bottom: var(--space-xxxs); } 1556 | .margin-bottom-xxs\@#{$breakpoint} { margin-bottom: var(--space-xxs); } 1557 | .margin-bottom-xs\@#{$breakpoint} { margin-bottom: var(--space-xs); } 1558 | .margin-bottom-sm\@#{$breakpoint} { margin-bottom: var(--space-sm); } 1559 | .margin-bottom-md\@#{$breakpoint} { margin-bottom: var(--space-md); } 1560 | .margin-bottom-lg\@#{$breakpoint} { margin-bottom: var(--space-lg); } 1561 | .margin-bottom-xl\@#{$breakpoint} { margin-bottom: var(--space-xl); } 1562 | .margin-bottom-xxl\@#{$breakpoint} { margin-bottom: var(--space-xxl); } 1563 | .margin-bottom-xxxl\@#{$breakpoint} { margin-bottom: var(--space-xxxl); } 1564 | .margin-bottom-xxxxl\@#{$breakpoint} { margin-bottom: var(--space-xxxxl); } 1565 | .margin-bottom-auto\@#{$breakpoint} { margin-bottom: auto; } 1566 | .margin-bottom-0\@#{$breakpoint} { margin-bottom: 0; } 1567 | 1568 | .margin-right-xxxxs\@#{$breakpoint} { margin-right: var(--space-xxxxs); } 1569 | .margin-right-xxxs\@#{$breakpoint} { margin-right: var(--space-xxxs); } 1570 | .margin-right-xxs\@#{$breakpoint} { margin-right: var(--space-xxs); } 1571 | .margin-right-xs\@#{$breakpoint} { margin-right: var(--space-xs); } 1572 | .margin-right-sm\@#{$breakpoint} { margin-right: var(--space-sm); } 1573 | .margin-right-md\@#{$breakpoint} { margin-right: var(--space-md); } 1574 | .margin-right-lg\@#{$breakpoint} { margin-right: var(--space-lg); } 1575 | .margin-right-xl\@#{$breakpoint} { margin-right: var(--space-xl); } 1576 | .margin-right-xxl\@#{$breakpoint} { margin-right: var(--space-xxl); } 1577 | .margin-right-xxxl\@#{$breakpoint} { margin-right: var(--space-xxxl); } 1578 | .margin-right-xxxxl\@#{$breakpoint} { margin-right: var(--space-xxxxl); } 1579 | .margin-right-auto\@#{$breakpoint} { margin-right: auto; } 1580 | .margin-right-0\@#{$breakpoint} { margin-right: 0; } 1581 | 1582 | .margin-left-xxxxs\@#{$breakpoint} { margin-left: var(--space-xxxxs); } 1583 | .margin-left-xxxs\@#{$breakpoint} { margin-left: var(--space-xxxs); } 1584 | .margin-left-xxs\@#{$breakpoint} { margin-left: var(--space-xxs); } 1585 | .margin-left-xs\@#{$breakpoint} { margin-left: var(--space-xs); } 1586 | .margin-left-sm\@#{$breakpoint} { margin-left: var(--space-sm); } 1587 | .margin-left-md\@#{$breakpoint} { margin-left: var(--space-md); } 1588 | .margin-left-lg\@#{$breakpoint} { margin-left: var(--space-lg); } 1589 | .margin-left-xl\@#{$breakpoint} { margin-left: var(--space-xl); } 1590 | .margin-left-xxl\@#{$breakpoint} { margin-left: var(--space-xxl); } 1591 | .margin-left-xxxl\@#{$breakpoint} { margin-left: var(--space-xxxl); } 1592 | .margin-left-xxxxl\@#{$breakpoint} { margin-left: var(--space-xxxxl); } 1593 | .margin-left-auto\@#{$breakpoint} { margin-left: auto; } 1594 | .margin-left-0\@#{$breakpoint} { margin-left: 0; } 1595 | 1596 | .margin-x-xxxxs\@#{$breakpoint} { margin-left: var(--space-xxxxs); margin-right: var(--space-xxxxs); } 1597 | .margin-x-xxxs\@#{$breakpoint} { margin-left: var(--space-xxxs); margin-right: var(--space-xxxs); } 1598 | .margin-x-xxs\@#{$breakpoint} { margin-left: var(--space-xxs); margin-right: var(--space-xxs); } 1599 | .margin-x-xs\@#{$breakpoint} { margin-left: var(--space-xs); margin-right: var(--space-xs); } 1600 | .margin-x-sm\@#{$breakpoint} { margin-left: var(--space-sm); margin-right: var(--space-sm); } 1601 | .margin-x-md\@#{$breakpoint} { margin-left: var(--space-md); margin-right: var(--space-md); } 1602 | .margin-x-lg\@#{$breakpoint} { margin-left: var(--space-lg); margin-right: var(--space-lg); } 1603 | .margin-x-xl\@#{$breakpoint} { margin-left: var(--space-xl); margin-right: var(--space-xl); } 1604 | .margin-x-xxl\@#{$breakpoint} { margin-left: var(--space-xxl); margin-right: var(--space-xxl); } 1605 | .margin-x-xxxl\@#{$breakpoint} { margin-left: var(--space-xxxl); margin-right: var(--space-xxxl); } 1606 | .margin-x-xxxxl\@#{$breakpoint} { margin-left: var(--space-xxxxl); margin-right: var(--space-xxxxl); } 1607 | .margin-x-auto\@#{$breakpoint} { margin-left: auto; margin-right: auto; } 1608 | .margin-x-0\@#{$breakpoint} { margin-left: 0; margin-right: 0; } 1609 | 1610 | .margin-y-xxxxs\@#{$breakpoint} { margin-top: var(--space-xxxxs); margin-bottom: var(--space-xxxxs); } 1611 | .margin-y-xxxs\@#{$breakpoint} { margin-top: var(--space-xxxs); margin-bottom: var(--space-xxxs); } 1612 | .margin-y-xxs\@#{$breakpoint} { margin-top: var(--space-xxs); margin-bottom: var(--space-xxs); } 1613 | .margin-y-xs\@#{$breakpoint} { margin-top: var(--space-xs); margin-bottom: var(--space-xs); } 1614 | .margin-y-sm\@#{$breakpoint} { margin-top: var(--space-sm); margin-bottom: var(--space-sm); } 1615 | .margin-y-md\@#{$breakpoint} { margin-top: var(--space-md); margin-bottom: var(--space-md); } 1616 | .margin-y-lg\@#{$breakpoint} { margin-top: var(--space-lg); margin-bottom: var(--space-lg); } 1617 | .margin-y-xl\@#{$breakpoint} { margin-top: var(--space-xl); margin-bottom: var(--space-xl); } 1618 | .margin-y-xxl\@#{$breakpoint} { margin-top: var(--space-xxl); margin-bottom: var(--space-xxl); } 1619 | .margin-y-xxxl\@#{$breakpoint} { margin-top: var(--space-xxxl); margin-bottom: var(--space-xxxl); } 1620 | .margin-y-xxxxl\@#{$breakpoint} { margin-top: var(--space-xxxxl); margin-bottom: var(--space-xxxxl); } 1621 | .margin-y-auto\@#{$breakpoint} { margin-top: auto; margin-bottom: auto; } 1622 | .margin-y-0\@#{$breakpoint} { margin-top: 0; margin-bottom: 0; } 1623 | 1624 | // padding 1625 | .padding-xxxxs\@#{$breakpoint} { padding: var(--space-xxxxs); } 1626 | .padding-xxxs\@#{$breakpoint} { padding: var(--space-xxxs); } 1627 | .padding-xxs\@#{$breakpoint} { padding: var(--space-xxs); } 1628 | .padding-xs\@#{$breakpoint} { padding: var(--space-xs); } 1629 | .padding-sm\@#{$breakpoint} { padding: var(--space-sm); } 1630 | .padding-md\@#{$breakpoint} { padding: var(--space-md); } 1631 | .padding-lg\@#{$breakpoint} { padding: var(--space-lg); } 1632 | .padding-xl\@#{$breakpoint} { padding: var(--space-xl); } 1633 | .padding-xxl\@#{$breakpoint} { padding: var(--space-xxl); } 1634 | .padding-xxxl\@#{$breakpoint} { padding: var(--space-xxxl); } 1635 | .padding-xxxxl\@#{$breakpoint} { padding: var(--space-xxxxl); } 1636 | .padding-0\@#{$breakpoint} { padding: 0; } 1637 | .padding-component\@#{$breakpoint} { padding: var(--component-padding); } 1638 | 1639 | .padding-top-xxxxs\@#{$breakpoint} { padding-top: var(--space-xxxxs); } 1640 | .padding-top-xxxs\@#{$breakpoint} { padding-top: var(--space-xxxs); } 1641 | .padding-top-xxs\@#{$breakpoint} { padding-top: var(--space-xxs); } 1642 | .padding-top-xs\@#{$breakpoint} { padding-top: var(--space-xs); } 1643 | .padding-top-sm\@#{$breakpoint} { padding-top: var(--space-sm); } 1644 | .padding-top-md\@#{$breakpoint} { padding-top: var(--space-md); } 1645 | .padding-top-lg\@#{$breakpoint} { padding-top: var(--space-lg); } 1646 | .padding-top-xl\@#{$breakpoint} { padding-top: var(--space-xl); } 1647 | .padding-top-xxl\@#{$breakpoint} { padding-top: var(--space-xxl); } 1648 | .padding-top-xxxl\@#{$breakpoint} { padding-top: var(--space-xxxl); } 1649 | .padding-top-xxxxl\@#{$breakpoint} { padding-top: var(--space-xxxxl); } 1650 | .padding-top-0\@#{$breakpoint} { padding-top: 0; } 1651 | .padding-top-component\@#{$breakpoint} { padding-top: var(--component-padding); } 1652 | 1653 | .padding-bottom-xxxxs\@#{$breakpoint} { padding-bottom: var(--space-xxxxs); } 1654 | .padding-bottom-xxxs\@#{$breakpoint} { padding-bottom: var(--space-xxxs); } 1655 | .padding-bottom-xxs\@#{$breakpoint} { padding-bottom: var(--space-xxs); } 1656 | .padding-bottom-xs\@#{$breakpoint} { padding-bottom: var(--space-xs); } 1657 | .padding-bottom-sm\@#{$breakpoint} { padding-bottom: var(--space-sm); } 1658 | .padding-bottom-md\@#{$breakpoint} { padding-bottom: var(--space-md); } 1659 | .padding-bottom-lg\@#{$breakpoint} { padding-bottom: var(--space-lg); } 1660 | .padding-bottom-xl\@#{$breakpoint} { padding-bottom: var(--space-xl); } 1661 | .padding-bottom-xxl\@#{$breakpoint} { padding-bottom: var(--space-xxl); } 1662 | .padding-bottom-xxxl\@#{$breakpoint} { padding-bottom: var(--space-xxxl); } 1663 | .padding-bottom-xxxxl\@#{$breakpoint} { padding-bottom: var(--space-xxxxl); } 1664 | .padding-bottom-0\@#{$breakpoint} { padding-bottom: 0; } 1665 | .padding-bottom-component\@#{$breakpoint} { padding-bottom: var(--component-padding); } 1666 | 1667 | .padding-right-xxxxs\@#{$breakpoint} { padding-right: var(--space-xxxxs); } 1668 | .padding-right-xxxs\@#{$breakpoint} { padding-right: var(--space-xxxs); } 1669 | .padding-right-xxs\@#{$breakpoint} { padding-right: var(--space-xxs); } 1670 | .padding-right-xs\@#{$breakpoint} { padding-right: var(--space-xs); } 1671 | .padding-right-sm\@#{$breakpoint} { padding-right: var(--space-sm); } 1672 | .padding-right-md\@#{$breakpoint} { padding-right: var(--space-md); } 1673 | .padding-right-lg\@#{$breakpoint} { padding-right: var(--space-lg); } 1674 | .padding-right-xl\@#{$breakpoint} { padding-right: var(--space-xl); } 1675 | .padding-right-xxl\@#{$breakpoint} { padding-right: var(--space-xxl); } 1676 | .padding-right-xxxl\@#{$breakpoint} { padding-right: var(--space-xxxl); } 1677 | .padding-right-xxxxl\@#{$breakpoint} { padding-right: var(--space-xxxxl); } 1678 | .padding-right-0\@#{$breakpoint} { padding-right: 0; } 1679 | .padding-right-component\@#{$breakpoint} { padding-right: var(--component-padding); } 1680 | 1681 | .padding-left-xxxxs\@#{$breakpoint} { padding-left: var(--space-xxxxs); } 1682 | .padding-left-xxxs\@#{$breakpoint} { padding-left: var(--space-xxxs); } 1683 | .padding-left-xxs\@#{$breakpoint} { padding-left: var(--space-xxs); } 1684 | .padding-left-xs\@#{$breakpoint} { padding-left: var(--space-xs); } 1685 | .padding-left-sm\@#{$breakpoint} { padding-left: var(--space-sm); } 1686 | .padding-left-md\@#{$breakpoint} { padding-left: var(--space-md); } 1687 | .padding-left-lg\@#{$breakpoint} { padding-left: var(--space-lg); } 1688 | .padding-left-xl\@#{$breakpoint} { padding-left: var(--space-xl); } 1689 | .padding-left-xxl\@#{$breakpoint} { padding-left: var(--space-xxl); } 1690 | .padding-left-xxxl\@#{$breakpoint} { padding-left: var(--space-xxxl); } 1691 | .padding-left-xxxxl\@#{$breakpoint} { padding-left: var(--space-xxxxl); } 1692 | .padding-left-0\@#{$breakpoint} { padding-left: 0; } 1693 | .padding-left-component\@#{$breakpoint} { padding-left: var(--component-padding); } 1694 | 1695 | .padding-x-xxxxs\@#{$breakpoint} { padding-left: var(--space-xxxxs); padding-right: var(--space-xxxxs); } 1696 | .padding-x-xxxs\@#{$breakpoint} { padding-left: var(--space-xxxs); padding-right: var(--space-xxxs); } 1697 | .padding-x-xxs\@#{$breakpoint} { padding-left: var(--space-xxs); padding-right: var(--space-xxs); } 1698 | .padding-x-xs\@#{$breakpoint} { padding-left: var(--space-xs); padding-right: var(--space-xs); } 1699 | .padding-x-sm\@#{$breakpoint} { padding-left: var(--space-sm); padding-right: var(--space-sm); } 1700 | .padding-x-md\@#{$breakpoint} { padding-left: var(--space-md); padding-right: var(--space-md); } 1701 | .padding-x-lg\@#{$breakpoint} { padding-left: var(--space-lg); padding-right: var(--space-lg); } 1702 | .padding-x-xl\@#{$breakpoint} { padding-left: var(--space-xl); padding-right: var(--space-xl); } 1703 | .padding-x-xxl\@#{$breakpoint} { padding-left: var(--space-xxl); padding-right: var(--space-xxl); } 1704 | .padding-x-xxxl\@#{$breakpoint} { padding-left: var(--space-xxxl); padding-right: var(--space-xxxl); } 1705 | .padding-x-xxxxl\@#{$breakpoint} { padding-left: var(--space-xxxxl); padding-right: var(--space-xxxxl); } 1706 | .padding-x-0\@#{$breakpoint} { padding-left: 0; padding-right: 0; } 1707 | .padding-x-component\@#{$breakpoint} { padding-left: var(--component-padding); padding-right: var(--component-padding); } 1708 | 1709 | .padding-y-xxxxs\@#{$breakpoint} { padding-top: var(--space-xxxxs); padding-bottom: var(--space-xxxxs); } 1710 | .padding-y-xxxs\@#{$breakpoint} { padding-top: var(--space-xxxs); padding-bottom: var(--space-xxxs); } 1711 | .padding-y-xxs\@#{$breakpoint} { padding-top: var(--space-xxs); padding-bottom: var(--space-xxs); } 1712 | .padding-y-xs\@#{$breakpoint} { padding-top: var(--space-xs); padding-bottom: var(--space-xs); } 1713 | .padding-y-sm\@#{$breakpoint} { padding-top: var(--space-sm); padding-bottom: var(--space-sm); } 1714 | .padding-y-md\@#{$breakpoint} { padding-top: var(--space-md); padding-bottom: var(--space-md); } 1715 | .padding-y-lg\@#{$breakpoint} { padding-top: var(--space-lg); padding-bottom: var(--space-lg); } 1716 | .padding-y-xl\@#{$breakpoint} { padding-top: var(--space-xl); padding-bottom: var(--space-xl); } 1717 | .padding-y-xxl\@#{$breakpoint} { padding-top: var(--space-xxl); padding-bottom: var(--space-xxl); } 1718 | .padding-y-xxxl\@#{$breakpoint} { padding-top: var(--space-xxxl); padding-bottom: var(--space-xxxl); } 1719 | .padding-y-xxxxl\@#{$breakpoint} { padding-top: var(--space-xxxxl); padding-bottom: var(--space-xxxxl); } 1720 | .padding-y-0\@#{$breakpoint} { padding-top: 0; padding-bottom: 0; } 1721 | .padding-y-component\@#{$breakpoint} { padding-top: var(--component-padding); padding-bottom: var(--component-padding); } 1722 | 1723 | // text-align 1724 | .text-center\@#{$breakpoint} { text-align: center; } 1725 | .text-left\@#{$breakpoint} { text-align: left; } 1726 | .text-right\@#{$breakpoint} { text-align: right; } 1727 | .text-justify\@#{$breakpoint} { text-align: justify; } 1728 | 1729 | // font-size 1730 | .text-xs\@#{$breakpoint} { font-size: var(--text-xs, 0.6875rem); } 1731 | .text-sm\@#{$breakpoint} { font-size: var(--text-sm, 0.75rem); } 1732 | .text-base\@#{$breakpoint} { font-size: var(--text-unit, 1rem); } 1733 | .text-md\@#{$breakpoint} { font-size: var(--text-md, 1.125rem); } 1734 | .text-lg\@#{$breakpoint} { font-size: var(--text-lg, 1.375rem); } 1735 | .text-xl\@#{$breakpoint} { font-size: var(--text-xl, 1.75rem); } 1736 | .text-xxl\@#{$breakpoint} { font-size: var(--text-xxl, 2rem); } 1737 | .text-xxxl\@#{$breakpoint} { font-size: var(--text-xxxl, 2.5rem); } 1738 | .text-xxxxl\@#{$breakpoint} { font-size: var(--text-xxxxl, 3rem); } 1739 | 1740 | // column-count 1741 | .column-count-1\@#{$breakpoint} { column-count: 1; } 1742 | .column-count-2\@#{$breakpoint} { column-count: 2; } 1743 | .column-count-3\@#{$breakpoint} { column-count: 3; } 1744 | .column-count-4\@#{$breakpoint} { column-count: 4; } 1745 | 1746 | // width 1747 | .width-xxxxs\@#{$breakpoint} { width: var(--size-xxxxs, 0.25rem); } 1748 | .width-xxxs\@#{$breakpoint} { width: var(--size-xxxs, 0.5rem); } 1749 | .width-xxs\@#{$breakpoint} { width: var(--size-xxs, 0.75rem); } 1750 | .width-xs\@#{$breakpoint} { width: var(--size-xs, 1rem); } 1751 | .width-sm\@#{$breakpoint} { width: var(--size-sm, 1.5rem); } 1752 | .width-md\@#{$breakpoint} { width: var(--size-md, 2rem); } 1753 | .width-lg\@#{$breakpoint} { width: var(--size-lg, 3rem); } 1754 | .width-xl\@#{$breakpoint} { width: var(--size-xl, 4rem); } 1755 | .width-xxl\@#{$breakpoint} { width: var(--size-xxl, 6rem); } 1756 | .width-xxxl\@#{$breakpoint} { width: var(--size-xxxl, 8rem); } 1757 | .width-xxxxl\@#{$breakpoint} { width: var(--size-xxxxl, 16rem); } 1758 | .width-0\@#{$breakpoint} { width: 0; } 1759 | .width-10\%\@#{$breakpoint} { width: 10%; } 1760 | .width-20\%\@#{$breakpoint} { width: 20%; } 1761 | .width-25\%\@#{$breakpoint} { width: 25%; } 1762 | .width-30\%\@#{$breakpoint} { width: 30%; } 1763 | .width-33\%\@#{$breakpoint} { width: calc(100% / 3); } 1764 | .width-40\%\@#{$breakpoint} { width: 40%; } 1765 | .width-50\%\@#{$breakpoint} { width: 50%; } 1766 | .width-60\%\@#{$breakpoint} { width: 60%; } 1767 | .width-66\%\@#{$breakpoint} { width: calc(100% / 1.5); } 1768 | .width-70\%\@#{$breakpoint} { width: 70%; } 1769 | .width-75\%\@#{$breakpoint} { width: 75%; } 1770 | .width-80\%\@#{$breakpoint} { width: 80%; } 1771 | .width-90\%\@#{$breakpoint} { width: 90%; } 1772 | .width-100\%\@#{$breakpoint} { width: 100%; } 1773 | .width-100vw\@#{$breakpoint} { width: 100vw; } 1774 | .width-auto\@#{$breakpoint} { width: auto; } 1775 | .width-inherit\@#{$breakpoint} { width: inherit; } 1776 | 1777 | // height 1778 | .height-xxxxs\@#{$breakpoint} { height: var(--size-xxxxs, 0.25rem); } 1779 | .height-xxxs\@#{$breakpoint} { height: var(--size-xxxs, 0.5rem); } 1780 | .height-xxs\@#{$breakpoint} { height: var(--size-xxs, 0.75rem); } 1781 | .height-xs\@#{$breakpoint} { height: var(--size-xs, 1rem); } 1782 | .height-sm\@#{$breakpoint} { height: var(--size-sm, 1.5rem); } 1783 | .height-md\@#{$breakpoint} { height: var(--size-md, 2rem); } 1784 | .height-lg\@#{$breakpoint} { height: var(--size-lg, 3rem); } 1785 | .height-xl\@#{$breakpoint} { height: var(--size-xl, 4rem); } 1786 | .height-xxl\@#{$breakpoint} { height: var(--size-xxl, 6rem); } 1787 | .height-xxxl\@#{$breakpoint} { height: var(--size-xxxl, 8rem); } 1788 | .height-xxxxl\@#{$breakpoint} { height: var(--size-xxxxl, 16rem); } 1789 | .height-0\@#{$breakpoint} { height: 0; } 1790 | .height-10\%\@#{$breakpoint} { height: 10%; } 1791 | .height-20\%\@#{$breakpoint} { height: 20%; } 1792 | .height-25\%\@#{$breakpoint} { height: 25%; } 1793 | .height-30\%\@#{$breakpoint} { height: 30%; } 1794 | .height-33\%\@#{$breakpoint} { height: calc(100% / 3); } 1795 | .height-40\%\@#{$breakpoint} { height: 40%; } 1796 | .height-50\%\@#{$breakpoint} { height: 50%; } 1797 | .height-60\%\@#{$breakpoint} { height: 60%; } 1798 | .height-66\%\@#{$breakpoint} { height: calc(100% / 1.5); } 1799 | .height-70\%\@#{$breakpoint} { height: 70%; } 1800 | .height-75\%\@#{$breakpoint} { height: 75%; } 1801 | .height-80\%\@#{$breakpoint} { height: 80%; } 1802 | .height-90\%\@#{$breakpoint} { height: 90%; } 1803 | .height-100\%\@#{$breakpoint} { height: 100%; } 1804 | .height-100vh\@#{$breakpoint} { height: 100vh; } 1805 | .height-auto\@#{$breakpoint} { height: auto; } 1806 | .height-inherit\@#{$breakpoint} { height: inherit; } 1807 | 1808 | // max-width 1809 | .max-width-xxxxxs\@#{$breakpoint} { max-width: var(--max-width-xxxxxs); } 1810 | .max-width-xxxxs\@#{$breakpoint} { max-width: var(--max-width-xxxxs); } 1811 | .max-width-xxxs\@#{$breakpoint} { max-width: var(--max-width-xxxs); } 1812 | .max-width-xxs\@#{$breakpoint} { max-width: var(--max-width-xxs); } 1813 | .max-width-xs\@#{$breakpoint} { max-width: var(--max-width-xs); } 1814 | .max-width-sm\@#{$breakpoint} { max-width: var(--max-width-sm); } 1815 | .max-width-md\@#{$breakpoint} { max-width: var(--max-width-md); } 1816 | .max-width-lg\@#{$breakpoint} { max-width: var(--max-width-lg); } 1817 | .max-width-xl\@#{$breakpoint} { max-width: var(--max-width-xl); } 1818 | .max-width-xxl\@#{$breakpoint} { max-width: var(--max-width-xxl); } 1819 | .max-width-xxxl\@#{$breakpoint} { max-width: var(--max-width-xxxl); } 1820 | .max-width-xxxxl\@#{$breakpoint} { max-width: var(--max-width-xxxxl); } 1821 | .max-width-100\%\@#{$breakpoint} { max-width: 100%; } 1822 | .max-width-none\@#{$breakpoint} { max-width: none; } 1823 | 1824 | // position 1825 | .position-relative\@#{$breakpoint} { position: relative; } 1826 | .position-absolute\@#{$breakpoint} { position: absolute; } 1827 | .position-fixed\@#{$breakpoint} { position: fixed; } 1828 | .position-sticky\@#{$breakpoint} { position: sticky; } 1829 | .position-static\@#{$breakpoint} { position: static; } 1830 | 1831 | .inset-0\@#{$breakpoint} { top: 0; right: 0; bottom: 0; left: 0; } 1832 | 1833 | .top-0\@#{$breakpoint} { top: 0; } 1834 | .top-50\%\@#{$breakpoint} { top: 50%; } 1835 | .top-xxxxs\@#{$breakpoint} { top: var(--space-xxxxs); } 1836 | .top-xxxs\@#{$breakpoint} { top: var(--space-xxxs); } 1837 | .top-xxs\@#{$breakpoint} { top: var(--space-xxs); } 1838 | .top-xs\@#{$breakpoint} { top: var(--space-xs); } 1839 | .top-sm\@#{$breakpoint} { top: var(--space-sm); } 1840 | .top-md\@#{$breakpoint} { top: var(--space-md); } 1841 | .top-lg\@#{$breakpoint} { top: var(--space-lg); } 1842 | .top-xl\@#{$breakpoint} { top: var(--space-xl); } 1843 | .top-xxl\@#{$breakpoint} { top: var(--space-xxl); } 1844 | .top-xxxl\@#{$breakpoint} { top: var(--space-xxxl); } 1845 | .top-xxxxl\@#{$breakpoint} { top: var(--space-xxxxl); } 1846 | 1847 | .bottom-0\@#{$breakpoint} { bottom: 0; } 1848 | .bottom-50\%\@#{$breakpoint} { bottom: 50%; } 1849 | .bottom-xxxxs\@#{$breakpoint} { bottom: var(--space-xxxxs); } 1850 | .bottom-xxxs\@#{$breakpoint} { bottom: var(--space-xxxs); } 1851 | .bottom-xxs\@#{$breakpoint} { bottom: var(--space-xxs); } 1852 | .bottom-xs\@#{$breakpoint} { bottom: var(--space-xs); } 1853 | .bottom-sm\@#{$breakpoint} { bottom: var(--space-sm); } 1854 | .bottom-md\@#{$breakpoint} { bottom: var(--space-md); } 1855 | .bottom-lg\@#{$breakpoint} { bottom: var(--space-lg); } 1856 | .bottom-xl\@#{$breakpoint} { bottom: var(--space-xl); } 1857 | .bottom-xxl\@#{$breakpoint} { bottom: var(--space-xxl); } 1858 | .bottom-xxxl\@#{$breakpoint} { bottom: var(--space-xxxl); } 1859 | .bottom-xxxxl\@#{$breakpoint} { bottom: var(--space-xxxxl); } 1860 | 1861 | .right-0\@#{$breakpoint} { right: 0; } 1862 | .right-50\%\@#{$breakpoint} { right: 50%; } 1863 | .right-xxxxs\@#{$breakpoint} { right: var(--space-xxxxs); } 1864 | .right-xxxs\@#{$breakpoint} { right: var(--space-xxxs); } 1865 | .right-xxs\@#{$breakpoint} { right: var(--space-xxs); } 1866 | .right-xs\@#{$breakpoint} { right: var(--space-xs); } 1867 | .right-sm\@#{$breakpoint} { right: var(--space-sm); } 1868 | .right-md\@#{$breakpoint} { right: var(--space-md); } 1869 | .right-lg\@#{$breakpoint} { right: var(--space-lg); } 1870 | .right-xl\@#{$breakpoint} { right: var(--space-xl); } 1871 | .right-xxl\@#{$breakpoint} { right: var(--space-xxl); } 1872 | .right-xxxl\@#{$breakpoint} { right: var(--space-xxxl); } 1873 | .right-xxxxl\@#{$breakpoint} { right: var(--space-xxxxl); } 1874 | 1875 | .left-0\@#{$breakpoint} { left: 0; } 1876 | .left-50\%\@#{$breakpoint} { left: 50%; } 1877 | .left-xxxxs\@#{$breakpoint} { left: var(--space-xxxxs); } 1878 | .left-xxxs\@#{$breakpoint} { left: var(--space-xxxs); } 1879 | .left-xxs\@#{$breakpoint} { left: var(--space-xxs); } 1880 | .left-xs\@#{$breakpoint} { left: var(--space-xs); } 1881 | .left-sm\@#{$breakpoint} { left: var(--space-sm); } 1882 | .left-md\@#{$breakpoint} { left: var(--space-md); } 1883 | .left-lg\@#{$breakpoint} { left: var(--space-lg); } 1884 | .left-xl\@#{$breakpoint} { left: var(--space-xl); } 1885 | .left-xxl\@#{$breakpoint} { left: var(--space-xxl); } 1886 | .left-xxxl\@#{$breakpoint} { left: var(--space-xxxl); } 1887 | .left-xxxxl\@#{$breakpoint} { left: var(--space-xxxxl); } 1888 | 1889 | // overflow 1890 | .overflow-hidden\@#{$breakpoint} { overflow: hidden; } 1891 | .overflow-auto\@#{$breakpoint} { overflow: auto; } 1892 | .momentum-scrolling\@#{$breakpoint} { -webkit-overflow-scrolling: touch; } 1893 | .overscroll-contain\@#{$breakpoint} { overscroll-behavior: contain; } 1894 | 1895 | // visibility 1896 | .visible\@#{$breakpoint} { visibility: visible; } 1897 | .invisible\@#{$breakpoint} { visibility: hidden; } 1898 | } 1899 | 1900 | @include breakpoint(#{$breakpoint}, "not all") { 1901 | .display\@#{$breakpoint} { display: none !important; } 1902 | } 1903 | } --------------------------------------------------------------------------------