Using the framework
The StyleMods framework is setup to enable selectively including over 500 different style modules using simple true or false statements in a configuration document.
Quickstart (anchor)
1. Create a Sass document to compile the styles and second one to enable them via overrides, then include both with the StyleMods source files in your project's style directory as follows:
[styles]
- custom.scss
- overrides.scss
[stylemods]
[scss]
2. Load the configuration in the overrides file then enable the styles required as follows:
overrides.scss
@use "stylemods/scss/configuration" as *;
$enable-typography: true;
$enable-forms-buttons: true;
$enable-tables: true;3. Setup your custom Sass document for compiling as follows:
custom.scss
@use "overrides";
@use "stylemods/scss/stylemods";The individual docs pages also include usage instructions for enabling each style option as demonstrated above, see the source code below to view all configuration options.
Multiple overrides (anchor)
You can also create different overrides documents to enable specific styles that could be used in multiple projects:
reset.scss
@use "stylemods/scss/configuration" as *;
$enable-typography: true;
$enable-forms-buttons: true;
$enable-tables: true;
components.scss
@use "stylemods/scss/configuration" as *;
$enable-accordions: true;
$enable-dialogs: true;
$enable-popovers: true;Then include them as you would with an overrides document:
custom.scss
@use "reset";
@use "components";
@use "stylemods/scss/stylemods";Combined overrides (anchor)
The same overrides file can also be used to customize the styles:
overrides.scss
@use "stylemods/scss/configuration" as *;
$enable-typography: true;
$enable-forms-buttons: true;
$enable-tables: true;
@use "stylemods/scss" as *;
$body-font-size: 1.1rem;
$button-padding-inline: 0.75rem;
$table-padding-inline: 0.75rem;If preferred they can still be included in separate documents that could also then be used in more than one project:
custom-1.scss
@use "system";
@use "theme-1";
@use "stylemods/scss/stylemods";
custom-2.scss
@use "system";
@use "theme-2";
@use "stylemods/scss/stylemods";Single document (anchor)
You can also keep everything within the same document if you'd prefer to keep things contained or are only using a couple of styles:
custom.scss
@use "stylemods/scss/configuration" as *;
$enable-typography: true;
$enable-forms-buttons: true;
$enable-tables: true;
@use "stylemods/scss/stylemods";
custom.scss
@use "stylemods/scss/configuration" as *;
@use "stylemods/scss" as *;
$enable-typography: true;
$body-font-size: 1.1rem;
@use "stylemods/scss/stylemods";Cascade layers (anchor)
Update v1.3.4 The new modifiers layer has been added to include the color utilities and component modifier classes.
The styles can be compiled using cascade layers that can be customized to project specifications. Disabled by default, the layer order and individual layers and breakpoint options (see below) are all enabled individually if required:
overrides.scss
@use "stylemods/scss/configuration" as *;
$enable-layer-order: true;
$enable-color-layer: true;
$enable-content-layer: true;
$enable-components-layer: true;
$enable-utilities-layer: true;
$enable-modifiers-layer: true;
$enable-layout-layer: true;
$enable-icons-layer: true;
$enable-utilities-layer-xxl: true;
$enable-utilities-layer-xl: true;
$enable-utilities-layer-lg: true;
$enable-utilities-layer-md: true;
$enable-utilities-layer-sm: true;
$enable-utilities-layer-xs: true;
$enable-utilities-layer-xxs: true;
$enable-layout-layer-xxl: true;
$enable-layout-layer-xl: true;
$enable-layout-layer-lg: true;
$enable-layout-layer-md: true;
$enable-layout-layer-sm: true;
$enable-layout-layer-xs: true;
$enable-layout-layer-xxs: true;The default names (used below) for the layers can be customized:
overrides.scss
@use "stylemods/scss/configuration" as *;
$color-layer: color;
$content-layer: content;
$components-layer: components;
$utilities-layer: utilities;
$modifiers-layer: modifiers;
$layout-layer: layout;
$icons-layer: icons;The layer order can be re-arranged and/or expanded to include custom layers:
overrides.scss
@use "stylemods/scss/configuration" as *;
$layer-order: '#{$color-layer}, #{$content-layer}, #{$components-layer}, #{$utilities-layer}, #{$modifiers-layer}, #{$layout-layer}, #{$icons-layer}';Breakpoints (anchor)
The default breakpoint sizes used for the responsive modifier classes can be customized to use your own values and the media query changed to suit your own design preferences.
overrides.scss
@use "stylemods/scss/configuration" as *;
$breakpoint-query: 'width <=';
$breakpoint-xxl: 1920px;
$breakpoint-xl: 1600px;
$breakpoint-lg: 1280px;
$breakpoint-md: 1024px;
$breakpoint-sm: 768px;
$breakpoint-xs: 480px;
$breakpoint-xxs: 360px;The breakpoints for the individual modules are enabled individually as required:
overrides.scss
@use "stylemods/scss/configuration" as *;
$enable-margins: true;
$enable-margins-lg: true;
$enable-margins-md: true;
$enable-margins-sm: true;
$enable-padding: true;
$enable-padding-lg: true;
$enable-padding-md: true;
$enable-padding-sm: true;
$enable-gaps: true;
$enable-gaps-lg: true;
$enable-gaps-md: true;
$enable-gaps-sm: true;Source code (anchor)
Update v1.3.4 To make it easier to update and expand the framework the configuration.scss and framework.scss documents previously used have been split up into smaller, more managable documents.
[scss/configuration]
styles.scss
// ----------------------------------------------------------
// Styles
// ----------------------------------------------------------
// Global
$variables-tokens: ':where(html)' !default;
// ----------------------------------------------------------
// Cascade layers
// ----------------------------------------------------------
$color-layer: color !default;
$content-layer: content !default;
$components-layer: components !default;
$utilities-layer: utilities !default;
$modifiers-layer: modifiers !default;
$layout-layer: layout !default;
$icons-layer: icons !default;
$layer-order: '#{$color-layer}, #{$content-layer}, #{$components-layer}, #{$utilities-layer}, #{$modifiers-layer}, #{$layout-layer}, #{$icons-layer}' !default;
$enable-layer-order: false !default;
$enable-color-layer: false !default;
$enable-content-layer: false !default;
$enable-components-layer: false !default;
$enable-utilities-layer: false !default;
$enable-modifiers-layer: false !default;
$enable-layout-layer: false !default;
$enable-icons-layer: false !default;
$enable-utilities-layer-xxl: false !default;
$enable-utilities-layer-xl: false !default;
$enable-utilities-layer-lg: false !default;
$enable-utilities-layer-md: false !default;
$enable-utilities-layer-sm: false !default;
$enable-utilities-layer-xs: false !default;
$enable-utilities-layer-xxs: false !default;
$enable-layout-layer-xxl: false !default;
$enable-layout-layer-xl: false !default;
$enable-layout-layer-lg: false !default;
$enable-layout-layer-md: false !default;
$enable-layout-layer-sm: false !default;
$enable-layout-layer-xs: false !default;
$enable-layout-layer-xxs: false !default;
// ----------------------------------------------------------
// Content
// ----------------------------------------------------------
$enable-typography: false !default;
$enable-forms-buttons: false !default;
$enable-tables: false !default;
$enable-vis-hidden: false !default;
$enable-smooth-scroll: false !default;
$enable-view-transition: false !default;
// ----------------------------------------------------------
// Components
// ----------------------------------------------------------
$enable-accordions: false !default;
$enable-alerts: false !default;
$enable-badges: false !default;
$enable-buttons: false !default;
$enable-cards: false !default;
$enable-dialogs: false !default;
$enable-dialogs-transition: false !default;
$enable-dropdowns: false !default;
$enable-list-groups: false !default;
$enable-popovers: false !default;
$enable-popovers-transition: false !default;
$enable-theme-switch: false !default;
// ----------------------------------------------------------
// Utilities
// ----------------------------------------------------------
$enable-backgrounds: false !default;
$enable-borders: false !default;
$enable-gradients: false !default;
$enable-images: false !default;
$enable-lists: false !default;
$enable-opacity: false !default;
$enable-shadows: false !default;
$enable-text: false !default;
// ----------------------------------------------------------
// Layout
// ----------------------------------------------------------
$enable-align: false !default;
$enable-aspect-ratio: false !default;
$enable-block: false !default;
$enable-columns: false !default;
$enable-containers: false !default;
$enable-display: false !default;
$enable-flex: false !default;
$enable-grid: false !default;
$enable-inset: false !default;
$enable-justify: false !default;
$enable-object-fit: false !default;
$enable-order: false !default;
$enable-overflow: false !default;
$enable-overscroll: false !default;
$enable-place: false !default;
$enable-position: false !default;
$enable-scrollbars: false !default;
$enable-sizes: false !default;
$enable-z-index: false !default;
// Grids
$enable-grid-layouts: false !default;
$enable-grid-templates: false !default;
// Spacing
$enable-gaps: false !default;
$enable-margins: false !default;
$enable-padding: false !default;
// ----------------------------------------------------------
// Icons
// ----------------------------------------------------------
// Utilities
$enable-icon-utilities-css: false !default;
$enable-icon-links-css: false !default;
$enable-icon-buttons-css: false !default;
// Default icons
$enable-house-svg: false !default;
$enable-email-svg: false !default;
$enable-bars-svg: false !default;
$enable-dots-horizontal-svg: false !default;
$enable-dots-vertical-svg: false !default;
$enable-plus-svg: false !default;
$enable-minus-svg: false !default;
$enable-close-svg: false !default;
$enable-search-svg: false !default;
$enable-download-svg: false !default;
$enable-info-box-svg: false !default;
$enable-info-box-fill-svg: false !default;
$enable-info-circle-svg: false !default;
$enable-info-circle-fill-svg: false !default;
$enable-question-circle-svg: false !default;
$enable-question-circle-fill-svg: false !default;
$enable-question-box-svg: false !default;
$enable-question-box-fill-svg: false !default;
$enable-box-svg: false !default;
$enable-pen-box-svg: false !default;
$enable-close-box-svg: false !default;
$enable-close-box-fill-svg: false !default;
$enable-tick-box-svg: false !default;
$enable-ext-link-svg: false !default;
$enable-pg-link-svg: false !default;
$enable-sun-svg: false !default;
$enable-moon-svg: false !default;
$enable-caret-down-svg: false !default;
$enable-caret-up-svg: false !default;
$enable-caret-left-svg: false !default;
$enable-caret-right-svg: false !default;
$enable-user-svg: false !default;
$enable-circle-svg: false !default;
$enable-circle-fill-svg: false !default;
$enable-circle-inner-svg: false !default;
$enable-circle-half-svg: false !default;
$enable-circle-sm-svg: false !default;
$enable-circle-fill-sm-svg: false !default;
$enable-circle-inner-sm-svg: false !default;
$enable-circle-half-sm-svg: false !default;
$enable-image-svg: false !default;
$enable-image-fill-svg: false !default;
// Brand icons
$enable-stylemods-svg: false !default;
$enable-css-svg: false !default;
$enable-sass-svg: false !default;
$enable-github-svg: false !default;
$enable-twitter-svg: false !default;
$enable-mastodon-svg: false !default;
$enable-tiktok-svg: false !default;
$enable-facebook-svg: false !default;
$enable-instagram-svg: false !default;
$enable-pinterest-svg: false !default;
$enable-codepen-svg: false !default;
$enable-reddit-svg: false !default;
$enable-youtube-svg: false !default;
$enable-rss-svg: false !default;colors.scss
// ----------------------------------------------------------
// Colors
// ----------------------------------------------------------
// Theme colors (variables only)
$enable-theme-surface: false !default;
$enable-theme-typography: false !default;
$enable-theme-forms-buttons: false !default;
$enable-theme-tables: false !default;
$enable-theme-accordions: false !default;
$enable-theme-alerts: false !default;
$enable-theme-badges: false !default;
$enable-theme-borders: false !default;
$enable-theme-dialogs: false !default;
$enable-theme-dropdowns: false !default;
$enable-theme-cards: false !default;
$enable-theme-list-groups: false !default;
$enable-theme-popovers: false !default;
// ----------------------------------------------------------
// Semantic colors
// ----------------------------------------------------------
$enable-semantic-variables: false !default;
$enable-semantic-utilities: false !default;
$enable-semantic-modifiers: false !default;
// Individual utilities
$enable-semantic-backgrounds: false !default;
$enable-semantic-borders: false !default;
$enable-semantic-gradients: false !default;
// Individual modifiers
$enable-semantic-accordions: false !default;
$enable-semantic-alerts: false !default;
$enable-semantic-badges: false !default;
$enable-semantic-buttons: false !default;
$enable-semantic-dialogs: false !default;
$enable-semantic-dropdowns: false !default;
$enable-semantic-cards: false !default;
$enable-semantic-list-groups: false !default;
$enable-semantic-popovers: false !default;
// ----------------------------------------------------------
// Surface colors
// ----------------------------------------------------------
$enable-surface-variables: false !default;
$enable-surface-utilities: false !default;
// Individual utilities
$enable-surface-backgrounds: false !default;
$enable-surface-borders: false !default;
// ----------------------------------------------------------
// Primary colors
// ----------------------------------------------------------
// Variables
$enable-blue-variables: false !default;
$enable-red-variables: false !default;
$enable-green-variables: false !default;
$enable-orange-variables: false !default;
$enable-cyan-variables: false !default;
$enable-yellow-variables: false !default;
$enable-purple-variables: false !default;
$enable-pink-variables: false !default;
$enable-steelblue-variables: false !default;
$enable-firebrick-variables: false !default;
$enable-seagreen-variables: false !default;
$enable-darkcoral-variables: false !default;
$enable-cadetsteel-variables: false !default;
$enable-lemon-variables: false !default;
$enable-rebeccapurple-variables: false !default;
$enable-rosypink-variables: false !default;
$enable-olive-variables: false !default;
$enable-tan-variables: false !default;
$enable-rosewood-variables: false !default;
$enable-gray-variables: false !default;
// Grouped utilities
$enable-blue-utilities: false !default;
$enable-red-utilities: false !default;
$enable-green-utilities: false !default;
$enable-orange-utilities: false !default;
$enable-cyan-utilities: false !default;
$enable-yellow-utilities: false !default;
$enable-purple-utilities: false !default;
$enable-pink-utilities: false !default;
$enable-steelblue-utilities: false !default;
$enable-firebrick-utilities: false !default;
$enable-seagreen-utilities: false !default;
$enable-darkcoral-utilities: false !default;
$enable-cadetsteel-utilities: false !default;
$enable-lemon-utilities: false !default;
$enable-rebeccapurple-utilities: false !default;
$enable-rosypink-utilities: false !default;
$enable-olive-utilities: false !default;
$enable-tan-utilities: false !default;
$enable-rosewood-utilities: false !default;
$enable-gray-utilities: false !default;
// Grouped modifiers
$enable-blue-modifiers: false !default;
$enable-red-modifiers: false !default;
$enable-green-modifiers: false !default;
$enable-orange-modifiers: false !default;
$enable-cyan-modifiers: false !default;
$enable-yellow-modifiers: false !default;
$enable-purple-modifiers: false !default;
$enable-pink-modifiers: false !default;
$enable-steelblue-modifiers: false !default;
$enable-firebrick-modifiers: false !default;
$enable-seagreen-modifiers: false !default;
$enable-darkcoral-modifiers: false !default;
$enable-cadetsteel-modifiers: false !default;
$enable-lemon-modifiers: false !default;
$enable-rebeccapurple-modifiers: false !default;
$enable-rosypink-modifiers: false !default;
$enable-olive-modifiers: false !default;
$enable-tan-modifiers: false !default;
$enable-rosewood-modifiers: false !default;
$enable-gray-modifiers: false !default;
// Individual utilities and modifier classes
// Blue
$enable-blue-backgrounds: false !default;
$enable-blue-borders: false !default;
$enable-blue-gradient: false !default;
$enable-blue-text: false !default;
$enable-blue-accordions: false !default;
$enable-blue-alerts: false !default;
$enable-blue-badges: false !default;
$enable-blue-buttons: false !default;
$enable-blue-borders: false !default;
$enable-blue-dialogs: false !default;
$enable-blue-dropdowns: false !default;
$enable-blue-cards: false !default;
$enable-blue-list-groups: false !default;
$enable-blue-popovers: false !default;
// Red
$enable-red-backgrounds: false !default;
$enable-red-borders: false !default;
$enable-red-gradient: false !default;
$enable-red-text: false !default;
$enable-red-accordions: false !default;
$enable-red-alerts: false !default;
$enable-red-badges: false !default;
$enable-red-buttons: false !default;
$enable-red-borders: false !default;
$enable-red-dialogs: false !default;
$enable-red-dropdowns: false !default;
$enable-red-cards: false !default;
$enable-red-list-groups: false !default;
$enable-red-popovers: false !default;
// Green
$enable-green-backgrounds: false !default;
$enable-green-borders: false !default;
$enable-green-gradient: false !default;
$enable-green-text: false !default;
$enable-green-accordions: false !default;
$enable-green-alerts: false !default;
$enable-green-badges: false !default;
$enable-green-buttons: false !default;
$enable-green-borders: false !default;
$enable-green-dialogs: false !default;
$enable-green-dropdowns: false !default;
$enable-green-cards: false !default;
$enable-green-list-groups: false !default;
$enable-green-popovers: false !default;
// Orange
$enable-orange-backgrounds: false !default;
$enable-orange-borders: false !default;
$enable-orange-gradient: false !default;
$enable-orange-text: false !default;
$enable-orange-accordions: false !default;
$enable-orange-alerts: false !default;
$enable-orange-badges: false !default;
$enable-orange-buttons: false !default;
$enable-orange-borders: false !default;
$enable-orange-dialogs: false !default;
$enable-orange-dropdowns: false !default;
$enable-orange-cards: false !default;
$enable-orange-list-groups: false !default;
$enable-orange-popovers: false !default;
// Cyan
$enable-cyan-backgrounds: false !default;
$enable-cyan-borders: false !default;
$enable-cyan-gradient: false !default;
$enable-cyan-text: false !default;
$enable-cyan-accordions: false !default;
$enable-cyan-alerts: false !default;
$enable-cyan-badges: false !default;
$enable-cyan-buttons: false !default;
$enable-cyan-borders: false !default;
$enable-cyan-dialogs: false !default;
$enable-cyan-dropdowns: false !default;
$enable-cyan-cards: false !default;
$enable-cyan-list-groups: false !default;
$enable-cyan-popovers: false !default;
// Yellow
$enable-yellow-backgrounds: false !default;
$enable-yellow-borders: false !default;
$enable-yellow-gradient: false !default;
$enable-yellow-text: false !default;
$enable-yellow-accordions: false !default;
$enable-yellow-alerts: false !default;
$enable-yellow-badges: false !default;
$enable-yellow-buttons: false !default;
$enable-yellow-borders: false !default;
$enable-yellow-dialogs: false !default;
$enable-yellow-dropdowns: false !default;
$enable-yellow-cards: false !default;
$enable-yellow-list-groups: false !default;
$enable-yellow-popovers: false !default;
// Purple
$enable-purple-backgrounds: false !default;
$enable-purple-borders: false !default;
$enable-purple-gradient: false !default;
$enable-purple-text: false !default;
$enable-purple-accordions: false !default;
$enable-purple-alerts: false !default;
$enable-purple-badges: false !default;
$enable-purple-buttons: false !default;
$enable-purple-borders: false !default;
$enable-purple-dialogs: false !default;
$enable-purple-dropdowns: false !default;
$enable-purple-cards: false !default;
$enable-purple-list-groups: false !default;
$enable-purple-popovers: false !default;
// Pink
$enable-pink-backgrounds: false !default;
$enable-pink-borders: false !default;
$enable-pink-gradient: false !default;
$enable-pink-text: false !default;
$enable-pink-accordions: false !default;
$enable-pink-alerts: false !default;
$enable-pink-badges: false !default;
$enable-pink-buttons: false !default;
$enable-pink-borders: false !default;
$enable-pink-dialogs: false !default;
$enable-pink-dropdowns: false !default;
$enable-pink-cards: false !default;
$enable-pink-list-groups: false !default;
$enable-pink-popovers: false !default;
// Steelblue
$enable-steelblue-backgrounds: false !default;
$enable-steelblue-borders: false !default;
$enable-steelblue-gradient: false !default;
$enable-steelblue-text: false !default;
$enable-steelblue-accordions: false !default;
$enable-steelblue-alerts: false !default;
$enable-steelblue-badges: false !default;
$enable-steelblue-buttons: false !default;
$enable-steelblue-borders: false !default;
$enable-steelblue-dialogs: false !default;
$enable-steelblue-dropdowns: false !default;
$enable-steelblue-cards: false !default;
$enable-steelblue-list-groups: false !default;
$enable-steelblue-popovers: false !default;
// Firebrick
$enable-firebrick-backgrounds: false !default;
$enable-firebrick-borders: false !default;
$enable-firebrick-gradient: false !default;
$enable-firebrick-text: false !default;
$enable-firebrick-accordions: false !default;
$enable-firebrick-alerts: false !default;
$enable-firebrick-badges: false !default;
$enable-firebrick-buttons: false !default;
$enable-firebrick-borders: false !default;
$enable-firebrick-dialogs: false !default;
$enable-firebrick-dropdowns: false !default;
$enable-firebrick-cards: false !default;
$enable-firebrick-list-groups: false !default;
$enable-firebrick-popovers: false !default;
// Seagreen
$enable-seagreen-backgrounds: false !default;
$enable-seagreen-borders: false !default;
$enable-seagreen-gradient: false !default;
$enable-seagreen-text: false !default;
$enable-seagreen-accordions: false !default;
$enable-seagreen-alerts: false !default;
$enable-seagreen-badges: false !default;
$enable-seagreen-buttons: false !default;
$enable-seagreen-borders: false !default;
$enable-seagreen-dialogs: false !default;
$enable-seagreen-dropdowns: false !default;
$enable-seagreen-cards: false !default;
$enable-seagreen-list-groups: false !default;
$enable-seagreen-popovers: false !default;
// Darkcoral
$enable-darkcoral-backgrounds: false !default;
$enable-darkcoral-borders: false !default;
$enable-darkcoral-gradient: false !default;
$enable-darkcoral-text: false !default;
$enable-darkcoral-accordions: false !default;
$enable-darkcoral-alerts: false !default;
$enable-darkcoral-badges: false !default;
$enable-darkcoral-buttons: false !default;
$enable-darkcoral-borders: false !default;
$enable-darkcoral-dialogs: false !default;
$enable-darkcoral-dropdowns: false !default;
$enable-darkcoral-cards: false !default;
$enable-darkcoral-list-groups: false !default;
$enable-darkcoral-popovers: false !default;
// Cadetsteel
$enable-cadetsteel-backgrounds: false !default;
$enable-cadetsteel-borders: false !default;
$enable-cadetsteel-gradient: false !default;
$enable-cadetsteel-text: false !default;
$enable-cadetsteel-accordions: false !default;
$enable-cadetsteel-alerts: false !default;
$enable-cadetsteel-badges: false !default;
$enable-cadetsteel-buttons: false !default;
$enable-cadetsteel-borders: false !default;
$enable-cadetsteel-dialogs: false !default;
$enable-cadetsteel-dropdowns: false !default;
$enable-cadetsteel-cards: false !default;
$enable-cadetsteel-list-groups: false !default;
$enable-cadetsteel-popovers: false !default;
// Lemon
$enable-lemon-backgrounds: false !default;
$enable-lemon-borders: false !default;
$enable-lemon-gradient: false !default;
$enable-lemon-text: false !default;
$enable-lemon-accordions: false !default;
$enable-lemon-alerts: false !default;
$enable-lemon-badges: false !default;
$enable-lemon-buttons: false !default;
$enable-lemon-borders: false !default;
$enable-lemon-dialogs: false !default;
$enable-lemon-dropdowns: false !default;
$enable-lemon-cards: false !default;
$enable-lemon-list-groups: false !default;
$enable-lemon-popovers: false !default;
// Rebeccapurple
$enable-rebeccapurple-backgrounds: false !default;
$enable-rebeccapurple-borders: false !default;
$enable-rebeccapurple-gradient: false !default;
$enable-rebeccapurple-text: false !default;
$enable-rebeccapurple-accordions: false !default;
$enable-rebeccapurple-alerts: false !default;
$enable-rebeccapurple-badges: false !default;
$enable-rebeccapurple-buttons: false !default;
$enable-rebeccapurple-borders: false !default;
$enable-rebeccapurple-dialogs: false !default;
$enable-rebeccapurple-dropdowns: false !default;
$enable-rebeccapurple-cards: false !default;
$enable-rebeccapurple-list-groups: false !default;
$enable-rebeccapurple-popovers: false !default;
// Rosypink
$enable-rosypink-backgrounds: false !default;
$enable-rosypink-borders: false !default;
$enable-rosypink-gradient: false !default;
$enable-rosypink-text: false !default;
$enable-rosypink-accordions: false !default;
$enable-rosypink-alerts: false !default;
$enable-rosypink-badges: false !default;
$enable-rosypink-buttons: false !default;
$enable-rosypink-borders: false !default;
$enable-rosypink-dialogs: false !default;
$enable-rosypink-dropdowns: false !default;
$enable-rosypink-cards: false !default;
$enable-rosypink-list-groups: false !default;
$enable-rosypink-popovers: false !default;
// Tan
$enable-tan-backgrounds: false !default;
$enable-tan-borders: false !default;
$enable-tan-gradient: false !default;
$enable-tan-text: false !default;
$enable-tan-accordions: false !default;
$enable-tan-alerts: false !default;
$enable-tan-badges: false !default;
$enable-tan-buttons: false !default;
$enable-tan-borders: false !default;
$enable-tan-dialogs: false !default;
$enable-tan-dropdowns: false !default;
$enable-tan-cards: false !default;
$enable-tan-list-groups: false !default;
$enable-tan-popovers: false !default;
// Olive
$enable-olive-backgrounds: false !default;
$enable-olive-borders: false !default;
$enable-olive-gradient: false !default;
$enable-olive-text: false !default;
$enable-olive-accordions: false !default;
$enable-olive-alerts: false !default;
$enable-olive-badges: false !default;
$enable-olive-buttons: false !default;
$enable-olive-borders: false !default;
$enable-olive-dialogs: false !default;
$enable-olive-dropdowns: false !default;
$enable-olive-cards: false !default;
$enable-olive-list-groups: false !default;
$enable-olive-popovers: false !default;
// Rosewood
$enable-rosewood-backgrounds: false !default;
$enable-rosewood-borders: false !default;
$enable-rosewood-gradient: false !default;
$enable-rosewood-text: false !default;
$enable-rosewood-accordions: false !default;
$enable-rosewood-alerts: false !default;
$enable-rosewood-badges: false !default;
$enable-rosewood-buttons: false !default;
$enable-rosewood-borders: false !default;
$enable-rosewood-dialogs: false !default;
$enable-rosewood-dropdowns: false !default;
$enable-rosewood-cards: false !default;
$enable-rosewood-list-groups: false !default;
$enable-rosewood-popovers: false !default;
// Gray
$enable-gray-backgrounds: false !default;
$enable-gray-borders: false !default;
$enable-gray-gradient: false !default;
$enable-gray-text: false !default;
$enable-gray-accordions: false !default;
$enable-gray-alerts: false !default;
$enable-gray-badges: false !default;
$enable-gray-buttons: false !default;
$enable-gray-borders: false !default;
$enable-gray-dialogs: false !default;
$enable-gray-dropdowns: false !default;
$enable-gray-cards: false !default;
$enable-gray-list-groups: false !default;
$enable-gray-popovers: false !default;breakpoints.scss
// ----------------------------------------------------------
// Breakpoints
// ----------------------------------------------------------
// Values
$breakpoint-query: 'width <=' !default;
$breakpoint-xxl: 1920px !default;
$breakpoint-xl: 1600px !default;
$breakpoint-lg: 1280px !default;
$breakpoint-md: 1024px !default;
$breakpoint-sm: 768px !default;
$breakpoint-xs: 480px !default;
$breakpoint-xxs: 360px !default;
// Border utilities
$enable-borders-xxl: false !default;
$enable-borders-xl: false !default;
$enable-borders-lg: false !default;
$enable-borders-md: false !default;
$enable-borders-sm: false !default;
$enable-borders-xs: false !default;
$enable-borders-xxs: false !default;
// Text utilities
$enable-text-xxl: false !default;
$enable-text-xl: false !default;
$enable-text-lg: false !default;
$enable-text-md: false !default;
$enable-text-sm: false !default;
$enable-text-xs: false !default;
$enable-text-xxs: false !default;
// Grid layouts
$enable-grid-layouts-xxl: false !default;
$enable-grid-layouts-xl: false !default;
$enable-grid-layouts-lg: false !default;
$enable-grid-layouts-md: false !default;
$enable-grid-layouts-sm: false !default;
$enable-grid-layouts-xs: false !default;
$enable-grid-layouts-xxs: false !default;
// Grid templates
$enable-grid-templates-xxl: false !default;
$enable-grid-templates-xl: false !default;
$enable-grid-templates-lg: false !default;
$enable-grid-templates-md: false !default;
$enable-grid-templates-sm: false !default;
$enable-grid-templates-xs: false !default;
$enable-grid-templates-xxs: false !default;
// Gaps
$enable-gaps-xxl: false !default;
$enable-gaps-xl: false !default;
$enable-gaps-lg: false !default;
$enable-gaps-md: false !default;
$enable-gaps-sm: false !default;
$enable-gaps-xs: false !default;
$enable-gaps-xxs: false !default;
// Margins
$enable-margins-xxl: false !default;
$enable-margins-xl: false !default;
$enable-margins-lg: false !default;
$enable-margins-md: false !default;
$enable-margins-sm: false !default;
$enable-margins-xs: false !default;
$enable-margins-xxs: false !default;
// Padding
$enable-padding-xxl: false !default;
$enable-padding-xl: false !default;
$enable-padding-lg: false !default;
$enable-padding-md: false !default;
$enable-padding-sm: false !default;
$enable-padding-xs: false !default;
$enable-padding-xxs: false !default;
// Align
$enable-align-xxl: false !default;
$enable-align-xl: false !default;
$enable-align-lg: false !default;
$enable-align-md: false !default;
$enable-align-sm: false !default;
$enable-align-xs: false !default;
$enable-align-xxs: false !default;
// Aspect-ratio
$enable-aspect-ratio-xxl: false !default;
$enable-aspect-ratio-xl: false !default;
$enable-aspect-ratio-lg: false !default;
$enable-aspect-ratio-md: false !default;
$enable-aspect-ratio-sm: false !default;
$enable-aspect-ratio-xs: false !default;
$enable-aspect-ratio-xxs: false !default;
// Block
$enable-block-xxl: false !default;
$enable-block-xl: false !default;
$enable-block-lg: false !default;
$enable-block-md: false !default;
$enable-block-sm: false !default;
$enable-block-xs: false !default;
$enable-block-xxs: false !default;
// Columns
$enable-columns-xxl: false !default;
$enable-columns-xl: false !default;
$enable-columns-lg: false !default;
$enable-columns-md: false !default;
$enable-columns-sm: false !default;
$enable-columns-xs: false !default;
$enable-columns-xxs: false !default;
// Display
$enable-display-xxl: false !default;
$enable-display-xl: false !default;
$enable-display-lg: false !default;
$enable-display-md: false !default;
$enable-display-sm: false !default;
$enable-display-xs: false !default;
$enable-display-xxs: false !default;
// Flex
$enable-flex-xxl: false !default;
$enable-flex-xl: false !default;
$enable-flex-lg: false !default;
$enable-flex-md: false !default;
$enable-flex-sm: false !default;
$enable-flex-xs: false !default;
$enable-flex-xxs: false !default;
// Grid
$enable-grid-xxl: false !default;
$enable-grid-xl: false !default;
$enable-grid-lg: false !default;
$enable-grid-md: false !default;
$enable-grid-sm: false !default;
$enable-grid-xs: false !default;
$enable-grid-xxs: false !default;
// Inset
$enable-inset-xxl: false !default;
$enable-inset-xl: false !default;
$enable-inset-lg: false !default;
$enable-inset-md: false !default;
$enable-inset-sm: false !default;
$enable-inset-xs: false !default;
$enable-inset-xxs: false !default;
// Justify
$enable-justify-xxl: false !default;
$enable-justify-xl: false !default;
$enable-justify-lg: false !default;
$enable-justify-md: false !default;
$enable-justify-sm: false !default;
$enable-justify-xs: false !default;
$enable-justify-xxs: false !default;
// Object-fit
$enable-object-fit-xxl: false !default;
$enable-object-fit-xl: false !default;
$enable-object-fit-lg: false !default;
$enable-object-fit-md: false !default;
$enable-object-fit-sm: false !default;
$enable-object-fit-xs: false !default;
$enable-object-fit-xxs: false !default;
// Order
$enable-order-xxl: false !default;
$enable-order-xl: false !default;
$enable-order-lg: false !default;
$enable-order-md: false !default;
$enable-order-sm: false !default;
$enable-order-xs: false !default;
$enable-order-xxs: false !default;
// Overflow
$enable-overflow-xxl: false !default;
$enable-overflow-xl: false !default;
$enable-overflow-lg: false !default;
$enable-overflow-md: false !default;
$enable-overflow-sm: false !default;
$enable-overflow-xs: false !default;
$enable-overflow-xxs: false !default;
// Overscroll
$enable-overscroll-xxl: false !default;
$enable-overscroll-xl: false !default;
$enable-overscroll-lg: false !default;
$enable-overscroll-md: false !default;
$enable-overscroll-sm: false !default;
$enable-overscroll-xs: false !default;
$enable-overscroll-xxs: false !default;
// Place
$enable-place-xxl: false !default;
$enable-place-xl: false !default;
$enable-place-lg: false !default;
$enable-place-md: false !default;
$enable-place-sm: false !default;
$enable-place-xs: false !default;
$enable-place-xxs: false !default;
// Position
$enable-position-xxl: false !default;
$enable-position-xl: false !default;
$enable-position-lg: false !default;
$enable-position-md: false !default;
$enable-position-sm: false !default;
$enable-position-xs: false !default;
$enable-position-xxs: false !default;
// Scrollbars
$enable-scrollbars-xxl: false !default;
$enable-scrollbars-xl: false !default;
$enable-scrollbars-lg: false !default;
$enable-scrollbars-md: false !default;
$enable-scrollbars-sm: false !default;
$enable-scrollbars-xs: false !default;
$enable-scrollbars-xxs: false !default;
// Sizes
$enable-sizes-xxl: false !default;
$enable-sizes-xl: false !default;
$enable-sizes-lg: false !default;
$enable-sizes-md: false !default;
$enable-sizes-sm: false !default;
$enable-sizes-xs: false !default;
$enable-sizes-xxs: false !default;
// Z-index
$enable-z-index-xxl: false !default;
$enable-z-index-xl: false !default;
$enable-z-index-lg: false !default;
$enable-z-index-md: false !default;
$enable-z-index-sm: false !default;
$enable-z-index-xs: false !default;
$enable-z-index-xxs: false !default;[scss/framework]
styles.scss
// ----------------------------------------------------------
// Styles mixins
// ----------------------------------------------------------
@use "../configuration" as *;
@use "../index" as *;
@include version;
// ----------------------------------------------------------
// Cascade layers
// ----------------------------------------------------------
@mixin cascade-layers {
@layer #{$layer-order};
}
// ----------------------------------------------------------
// Content
// ----------------------------------------------------------
@mixin content-framework {
@if $enable-typography { @include typography-css; }
@if $enable-forms-buttons { @include forms-buttons-css; }
@if $enable-tables { @include tables-css; }
@if $enable-vis-hidden { @include vis-hidden-css; }
@media (prefers-reduced-motion: no-preference) {
@if $enable-smooth-scroll { @include smooth-scroll-css; }
@if $enable-view-transition { @include view-transition-css; }
}
}
// ----------------------------------------------------------
// Components
// ----------------------------------------------------------
@mixin components-framework {
@if $enable-accordions { @include accordions-css; }
@if $enable-alerts { @include alerts-css; }
@if $enable-badges { @include badges-css; }
@if $enable-buttons { @include buttons-css; }
@if $enable-cards { @include cards-css; }
@if $enable-dialogs { @include dialog-styles-css; }
@if $enable-dialogs-transition { @include dialog-transition-css; }
@if $enable-dropdowns { @include dropdowns-css; }
@if $enable-list-groups { @include list-groups-css; }
@if $enable-popovers { @include popover-styles-css; }
@if $enable-popovers-transition { @include popover-transition-css; }
@if $enable-theme-switch { @include theme-switch-css; }
}
// ----------------------------------------------------------
// Utilities
// ----------------------------------------------------------
@mixin utilities-framework {
@if $enable-backgrounds { @include background-css; }
@if $enable-borders { @include borders-css; }
@if $enable-gradients { @include gradients-css; }
@if $enable-images { @include images-css; }
@if $enable-lists { @include lists-css; }
@if $enable-opacity { @include opacity-css; }
@if $enable-shadows { @include shadows-css; }
@if $enable-text { @include text-css; }
}
// ----------------------------------------------------------
// Layouts
// ----------------------------------------------------------
@mixin layout-framework {
// Grids
#{$variables-tokens} {
@if $enable-grid-templates { @include grid-templates-variables; }
}
@if $enable-grid-templates { @include grid-templates-css; }
@if $enable-grid-layouts { @include grid-layouts-css; }
// Layout
@if $enable-align { @include align-css; }
@if $enable-aspect-ratio { @include aspect-ratio-css; }
@if $enable-block { @include block-css; }
@if $enable-columns { @include columns-css; }
@if $enable-containers { @include containers-css; }
@if $enable-display { @include display-css; }
@if $enable-flex { @include flex-css; }
@if $enable-grid { @include grid-css; }
@if $enable-inset { @include inset-css; }
@if $enable-justify { @include justify-css; }
@if $enable-object-fit { @include object-fit-css; }
@if $enable-order { @include order-css; }
@if $enable-overflow { @include overflow-css; }
@if $enable-overscroll { @include overscroll-css; }
@if $enable-place { @include place-css; }
@if $enable-position { @include position-css; }
@if $enable-scrollbars { @include scrollbars-css; }
@if $enable-sizes { @include sizes-css; }
@if $enable-z-index { @include z-index-css; }
// Spacing
@if $enable-gaps { @include gaps-css; }
@if $enable-margins { @include margins-css; }
@if $enable-padding { @include padding-css; }
}
// ----------------------------------------------------------
// Icons
// ----------------------------------------------------------
@mixin icons-framework {
// SVG variable tokens
#{$variables-tokens} {
// Default icons
@if $enable-house-svg {--house: #{$house};}
@if $enable-email-svg {--email: #{$email};}
@if $enable-bars-svg {--bars: #{$bars};}
@if $enable-dots-horizontal-svg {--dots-h: #{$dots-h};}
@if $enable-dots-vertical-svg {--dots-v: #{$dots-v};}
@if $enable-plus-svg {--plus: #{$plus};}
@if $enable-minus-svg {--minus: #{$minus};}
@if $enable-close-svg {--close: #{$close};}
@if $enable-search-svg {--search: #{$search};}
@if $enable-download-svg {--download: #{$download};}
@if $enable-info-box-svg {--info-box: #{$info-box};}
@if $enable-info-box-fill-svg {--info-box-fill: #{$info-box-fill};}
@if $enable-info-circle-svg {--info-circle: #{$info-circle};}
@if $enable-info-circle-fill-svg {--info-circle-fill: #{$info-circle-fill};}
@if $enable-question-circle-svg {--question-circle: #{$question-circle};}
@if $enable-question-circle-fill-svg {--question-circle-fill: #{$question-circle-fill};}
@if $enable-question-box-svg {--question-box: #{$question-box};}
@if $enable-question-box-fill-svg {--question-box-fill: #{$question-box-fill};}
@if $enable-box-svg {--box: #{$box};}
@if $enable-pen-box-svg {--pen-box: #{$pen-box};}
@if $enable-close-box-svg {--close-box: #{$close-box};}
@if $enable-close-box-fill-svg {--close-box-fill: #{$close-box-fill};}
@if $enable-tick-box-svg {--tick-box: #{$tick-box};}
@if $enable-ext-link-svg {--ext-link: #{$ext-link};}
@if $enable-pg-link-svg {--pg-link: #{$pg-link};}
@if $enable-sun-svg {--sun: #{$sun};}
@if $enable-moon-svg {--moon: #{$moon};}
@if $enable-caret-down-svg {--caret-down: #{$caret-down};}
@if $enable-caret-up-svg {--caret-up: #{$caret-up};}
@if $enable-caret-left-svg {--caret-left: #{$caret-left};}
@if $enable-caret-right-svg {--caret-right: #{$caret-right};}
@if $enable-user-svg {--user: #{$user};}
@if $enable-circle-svg {--circle: #{$circle};}
@if $enable-circle-fill-svg {--circle-fill: #{$circle-fill};}
@if $enable-circle-inner-svg {--circle-inner: #{$circle-inner};}
@if $enable-circle-half-svg {--circle-half: #{$circle-half};}
@if $enable-circle-sm-svg {--circle-sm: #{$circle-sm};}
@if $enable-circle-fill-sm-svg {--circle-fill-sm: #{$circle-fill-sm};}
@if $enable-circle-inner-sm-svg {--circle-inner-sm: #{$circle-inner-sm};}
@if $enable-circle-half-sm-svg {--circle-half-sm: #{$circle-half-sm};}
@if $enable-image-svg {--image: #{$image};}
@if $enable-image-fill-svg {--image-fill: #{$image-fill};}
// Brand icons
@if $enable-rss-svg {--rss: #{$rss};}
@if $enable-stylemods-svg {--stylemods: #{$stylemods};}
@if $enable-css-svg {--css: #{$css};}
@if $enable-sass-svg {--sass: #{$sass};}
@if $enable-github-svg {--github: #{$github};}
@if $enable-twitter-svg {--twitter: #{$twitter};}
@if $enable-mastodon-svg {--mastodon: #{$mastodon};}
@if $enable-tiktok-svg {--tiktok: #{$tiktok};}
@if $enable-facebook-svg {--facebook: #{$facebook};}
@if $enable-instagram-svg {--instagram: #{$instagram};}
@if $enable-pinterest-svg {--pinterest: #{$pinterest};}
@if $enable-codepen-svg {--codepen: #{$codepen};}
@if $enable-reddit-svg {--reddit: #{$reddit};}
@if $enable-youtube-svg {--youtube: #{$youtube};}
}
// Icon utility classes
@if $enable-icon-utilities-css { @include icon-utilities-css; }
@if $enable-icon-links-css { @include icon-links-css; }
@if $enable-icon-buttons-css { @include icon-buttons-css; }
// SVG classes
// Default icons
@if $enable-house-svg {.house {--svg: var(--house);}}
@if $enable-email-svg {.email {--svg: var(--email);}}
@if $enable-bars-svg {.bars {--svg: var(--bars);}}
@if $enable-dots-horizontal-svg {.dots-h {--svg: var(--dots-h);}}
@if $enable-dots-vertical-svg {.dots-v {--svg: var(--dots-v);}}
@if $enable-plus-svg {.plus {--svg: var(--plus);}}
@if $enable-minus-svg {.minus {--svg: var(--minus);}}
@if $enable-close-svg {.close {--svg: var(--close);}}
@if $enable-search-svg {.search {--svg: var(--search);}}
@if $enable-download-svg {.download {--svg: var(--download);}}
@if $enable-info-box-svg {.info-box {--svg: var(--info-box);}}
@if $enable-info-box-fill-svg {.info-box-fill {--svg: var(--info-box-fill);}}
@if $enable-info-circle-svg {.info-circle {--svg: var(--info-circle);}}
@if $enable-info-circle-fill-svg {.info-circle-fill {--svg: var(--info-circle-fill);}}
@if $enable-question-circle-svg {.question-circle {--svg: var(--question-circle);}}
@if $enable-question-circle-fill-svg {.question-circle-fill {--svg: var(--question-circle-fill);}}
@if $enable-question-box-svg {.question-box {--svg: var(--question-box);}}
@if $enable-question-box-fill-svg {.question-box-fill {--svg: var(--question-box-fill);}}
@if $enable-box-svg {.box {--svg: var(--box);}}
@if $enable-pen-box-svg {.pen-box {--svg: var(--pen-box);}}
@if $enable-close-box-svg {.close-box {--svg: var(--close-box);}}
@if $enable-close-box-fill-svg {.close-box-fill {--svg: var(--close-box-fill);}}
@if $enable-tick-box-svg {.tick-box {--svg: var(--tick-box);}}
@if $enable-ext-link-svg {.ext-link {--svg: var(--ext-link);}}
@if $enable-pg-link-svg {.pg-link {--svg: var(--pg-link);}}
@if $enable-sun-svg {.sun {--svg: var(--sun);}}
@if $enable-moon-svg {.moon {--svg: var(--moon);}}
@if $enable-caret-down-svg {.caret-down {--svg: var(--caret-down);}}
@if $enable-caret-up-svg {.caret-up {--svg: var(--caret-up);}}
@if $enable-caret-left-svg {.caret-left {--svg: var(--caret-left);}}
@if $enable-caret-right-svg {.caret-right {--svg: var(--caret-right);}}
@if $enable-user-svg {.user {--svg: var(--user);}}
@if $enable-circle-svg {.circle {--svg: var(--circle);}}
@if $enable-circle-fill-svg {.circle-fill {--svg: var(--circle-fill);}}
@if $enable-circle-inner-svg {.circle-inner {--svg: var(--circle-inner);}}
@if $enable-circle-half-svg {.circle-half {--svg: var(--circle-half);}}
@if $enable-circle-sm-svg {.circle-sm {--svg: var(--circle-sm);}}
@if $enable-circle-fill-sm-svg {.circle-fill-sm {--svg: var(--circle-fill-sm);}}
@if $enable-circle-inner-sm-svg {.circle-inner-sm {--svg: var(--circle-inner-sm);}}
@if $enable-circle-half-sm-svg {.circle-half-sm {--svg: var(--circle-half-sm);}}
@if $enable-image-svg {.image {--svg: var(--image);}}
@if $enable-image-fill-svg {.image-fill {--svg: var(--image-fill);}}
// Brand icons
@if $enable-rss-svg {.rss {--svg: var(--rss);}}
@if $enable-stylemods-svg {.stylemods {--svg: var(--stylemods);}}
@if $enable-css-svg {.css {--svg: var(--css);}}
@if $enable-sass-svg {.sass {--svg: var(--sass);}}
@if $enable-github-svg {.github {--svg: var(--github);}}
@if $enable-twitter-svg {.twitter {--svg: var(--twitter);}}
@if $enable-mastodon-svg {.mastodon {--svg: var(--mastodon);}}
@if $enable-tiktok-svg {.tiktok {--svg: var(--tiktok);}}
@if $enable-facebook-svg {.facebook {--svg: var(--facebook);}}
@if $enable-instagram-svg {.instagram {--svg: var(--instagram);}}
@if $enable-pinterest-svg {.pinterest {--svg: var(--pinterest);}}
@if $enable-codepen-svg {.codepen {--svg: var(--codepen);}}
@if $enable-reddit-svg {.reddit {--svg: var(--reddit);}}
@if $enable-youtube-svg {.youtube {--svg: var(--youtube);}}
}colors.scss
// ----------------------------------------------------------
// Color mixins
// ----------------------------------------------------------
@use "../configuration" as *;
@use "../index" as *;
// ----------------------------------------------------------
// Color variable tokens
// ----------------------------------------------------------
@mixin color-framework {
#{$variables-tokens} {
// Surface variables
@if $enable-surface-variables { @include surface-variables; }
// Semantic variables
@if $enable-semantic-variables { @include semantic-variables; }
// Theme variables
@if $enable-theme-surface { @include theme-surface-variables; }
@if $enable-theme-typography { @include theme-typography-variables; }
@if $enable-theme-forms-buttons { @include theme-forms-buttons-variables; }
@if $enable-theme-tables { @include theme-tables-variables; }
@if $enable-theme-accordions { @include theme-accordions-variables; }
@if $enable-theme-alerts { @include theme-alert-variables; }
@if $enable-theme-badges { @include theme-badge-variables; }
@if $enable-theme-borders { @include theme-border-variables; }
@if $enable-theme-dialogs { @include theme-dialog-variables; }
@if $enable-theme-dropdowns { @include theme-dropdown-variables; }
@if $enable-theme-cards { @include theme-card-variables; }
@if $enable-theme-list-groups { @include theme-list-group-variables; }
@if $enable-theme-popovers { @include theme-popover-variables; }
// Primary variables
@if $enable-blue-variables { @include blue-variables; }
@if $enable-red-variables { @include red-variables; }
@if $enable-green-variables { @include green-variables; }
@if $enable-orange-variables { @include orange-variables; }
@if $enable-cyan-variables { @include cyan-variables; }
@if $enable-yellow-variables { @include yellow-variables; }
@if $enable-purple-variables { @include purple-variables; }
@if $enable-pink-variables { @include pink-variables; }
@if $enable-steelblue-variables { @include steelblue-variables; }
@if $enable-firebrick-variables { @include firebrick-variables; }
@if $enable-seagreen-variables { @include seagreen-variables; }
@if $enable-darkcoral-variables { @include darkcoral-variables; }
@if $enable-cadetsteel-variables { @include cadetsteel-variables; }
@if $enable-lemon-variables { @include lemon-variables; }
@if $enable-rebeccapurple-variables { @include rebeccapurple-variables; }
@if $enable-rosypink-variables { @include rosypink-variables; }
@if $enable-olive-variables { @include olive-variables; }
@if $enable-tan-variables { @include tan-variables; }
@if $enable-rosewood-variables { @include rosewood-variables; }
@if $enable-gray-variables { @include gray-variables; }
}
}
// ----------------------------------------------------------
// Modifiers
// ----------------------------------------------------------
@mixin modifiers-framework {
// Surface
@if $enable-surface-utilities { @include surface-utilities-css; }
@if $enable-surface-backgrounds { @include surface-backgrounds-css; }
@if $enable-surface-borders { @include surface-borders-css; }
// Semantic
@if $enable-semantic-utilities { @include semantic-utilities-css; }
@if $enable-semantic-backgrounds { @include semantic-backgrounds-css; }
@if $enable-semantic-borders { @include semantic-borders-css; }
@if $enable-semantic-gradients { @include semantic-gradients-css; }
@if $enable-semantic-modifiers { @include semantic-modifiers-css; }
@if $enable-semantic-accordions { @include semantic-accordions-css; }
@if $enable-semantic-alerts { @include semantic-alerts-css; }
@if $enable-semantic-backgrounds { @include semantic-backgrounds-css; }
@if $enable-semantic-badges { @include semantic-badges-css; }
@if $enable-semantic-buttons { @include semantic-buttons-css; }
@if $enable-semantic-cards { @include semantic-cards-css; }
@if $enable-semantic-dialogs { @include semantic-dialogs-css; }
@if $enable-semantic-dropdowns { @include semantic-dropdowns-css; }
@if $enable-semantic-list-groups { @include semantic-list-groups-css; }
@if $enable-semantic-popovers { @include semantic-popovers-css; }
// Primary
@if $enable-blue-utilities { @include blue-utilities-css; }
@if $enable-blue-backgrounds { @include backgrounds-blue-css; }
@if $enable-blue-borders { @include borders-blue-css; }
@if $enable-blue-gradient { @include gradient-blue-css; }
@if $enable-blue-text { @include text-blue-css; }
@if $enable-blue-modifiers { @include blue-modifiers-css; }
@if $enable-blue-accordions { @include accordion-blue-css; }
@if $enable-blue-alerts { @include alert-blue-css; }
@if $enable-blue-badges { @include badge-blue-css; }
@if $enable-blue-buttons { @include button-blue-css; }
@if $enable-blue-cards { @include card-blue-css; }
@if $enable-blue-dialogs { @include dialog-blue-css; }
@if $enable-blue-dropdowns { @include dropdown-blue-css; }
@if $enable-blue-list-groups { @include list-group-blue-css; }
@if $enable-blue-popovers { @include popover-blue-css; }
@if $enable-red-utilities { @include red-utilities-css; }
@if $enable-red-backgrounds { @include backgrounds-red-css; }
@if $enable-red-borders { @include borders-red-css; }
@if $enable-red-gradient { @include gradient-red-css; }
@if $enable-red-text { @include text-red-css; }
@if $enable-red-modifiers { @include red-modifiers-css; }
@if $enable-red-accordions { @include accordion-red-css; }
@if $enable-red-alerts { @include alert-red-css; }
@if $enable-red-badges { @include badge-red-css; }
@if $enable-red-buttons { @include button-red-css; }
@if $enable-red-cards { @include card-red-css; }
@if $enable-red-dialogs { @include dialog-red-css; }
@if $enable-red-dropdowns { @include dropdown-red-css; }
@if $enable-red-list-groups { @include list-group-red-css; }
@if $enable-red-popovers { @include popover-red-css; }
@if $enable-green-utilities { @include green-utilities-css; }
@if $enable-green-backgrounds { @include backgrounds-green-css; }
@if $enable-green-borders { @include borders-green-css; }
@if $enable-green-gradient { @include gradient-green-css; }
@if $enable-green-text { @include text-green-css; }
@if $enable-green-modifiers { @include green-modifiers-css; }
@if $enable-green-accordions { @include accordion-green-css; }
@if $enable-green-alerts { @include alert-green-css; }
@if $enable-green-badges { @include badge-green-css; }
@if $enable-green-buttons { @include button-green-css; }
@if $enable-green-cards { @include card-green-css; }
@if $enable-green-dialogs { @include dialog-green-css; }
@if $enable-green-dropdowns { @include dropdown-green-css; }
@if $enable-green-list-groups { @include list-group-green-css; }
@if $enable-green-popovers { @include popover-green-css; }
@if $enable-orange-utilities { @include orange-utilities-css; }
@if $enable-orange-backgrounds { @include backgrounds-orange-css; }
@if $enable-orange-borders { @include borders-orange-css; }
@if $enable-orange-gradient { @include gradient-orange-css; }
@if $enable-orange-text { @include text-orange-css; }
@if $enable-orange-modifiers { @include orange-modifiers-css; }
@if $enable-orange-accordions { @include accordion-orange-css; }
@if $enable-orange-alerts { @include alert-orange-css; }
@if $enable-orange-badges { @include badge-orange-css; }
@if $enable-orange-buttons { @include button-orange-css; }
@if $enable-orange-cards { @include card-orange-css; }
@if $enable-orange-dialogs { @include dialog-orange-css; }
@if $enable-orange-dropdowns { @include dropdown-orange-css; }
@if $enable-orange-list-groups { @include list-group-orange-css; }
@if $enable-orange-popovers { @include popover-orange-css; }
@if $enable-cyan-utilities { @include cyan-utilities-css; }
@if $enable-cyan-backgrounds { @include backgrounds-cyan-css; }
@if $enable-cyan-borders { @include borders-cyan-css; }
@if $enable-cyan-gradient { @include gradient-cyan-css; }
@if $enable-cyan-text { @include text-cyan-css; }
@if $enable-cyan-modifiers { @include cyan-modifiers-css; }
@if $enable-cyan-accordions { @include accordion-cyan-css; }
@if $enable-cyan-alerts { @include alert-cyan-css; }
@if $enable-cyan-badges { @include badge-cyan-css; }
@if $enable-cyan-buttons { @include button-cyan-css; }
@if $enable-cyan-cards { @include card-cyan-css; }
@if $enable-cyan-dialogs { @include dialog-cyan-css; }
@if $enable-cyan-dropdowns { @include dropdown-cyan-css; }
@if $enable-cyan-list-groups { @include list-group-cyan-css; }
@if $enable-cyan-popovers { @include popover-cyan-css; }
@if $enable-yellow-utilities { @include yellow-utilities-css; }
@if $enable-yellow-backgrounds { @include backgrounds-yellow-css; }
@if $enable-yellow-borders { @include borders-yellow-css; }
@if $enable-yellow-gradient { @include gradient-yellow-css; }
@if $enable-yellow-text { @include text-yellow-css; }
@if $enable-yellow-modifiers { @include yellow-modifiers-css; }
@if $enable-yellow-accordions { @include accordion-yellow-css; }
@if $enable-yellow-alerts { @include alert-yellow-css; }
@if $enable-yellow-badges { @include badge-yellow-css; }
@if $enable-yellow-buttons { @include button-yellow-css; }
@if $enable-yellow-cards { @include card-yellow-css; }
@if $enable-yellow-dialogs { @include dialog-yellow-css; }
@if $enable-yellow-dropdowns { @include dropdown-yellow-css; }
@if $enable-yellow-list-groups { @include list-group-yellow-css; }
@if $enable-yellow-popovers { @include popover-yellow-css; }
@if $enable-purple-utilities { @include purple-utilities-css; }
@if $enable-purple-backgrounds { @include backgrounds-purple-css; }
@if $enable-purple-borders { @include borders-purple-css; }
@if $enable-purple-gradient { @include gradient-purple-css; }
@if $enable-purple-text { @include text-purple-css; }
@if $enable-purple-modifiers { @include purple-modifiers-css; }
@if $enable-purple-accordions { @include accordion-purple-css; }
@if $enable-purple-alerts { @include alert-purple-css; }
@if $enable-purple-badges { @include badge-purple-css; }
@if $enable-purple-buttons { @include button-purple-css; }
@if $enable-purple-cards { @include card-purple-css; }
@if $enable-purple-dialogs { @include dialog-purple-css; }
@if $enable-purple-dropdowns { @include dropdown-purple-css; }
@if $enable-purple-list-groups { @include list-group-purple-css; }
@if $enable-purple-popovers { @include popover-purple-css; }
@if $enable-pink-utilities { @include pink-utilities-css; }
@if $enable-pink-backgrounds { @include backgrounds-pink-css; }
@if $enable-pink-borders { @include borders-pink-css; }
@if $enable-pink-gradient { @include gradient-pink-css; }
@if $enable-pink-text { @include text-pink-css; }
@if $enable-pink-modifiers { @include pink-modifiers-css; }
@if $enable-pink-accordions { @include accordion-pink-css; }
@if $enable-pink-alerts { @include alert-pink-css; }
@if $enable-pink-badges { @include badge-pink-css; }
@if $enable-pink-buttons { @include button-pink-css; }
@if $enable-pink-cards { @include card-pink-css; }
@if $enable-pink-dialogs { @include dialog-pink-css; }
@if $enable-pink-dropdowns { @include dropdown-pink-css; }
@if $enable-pink-list-groups { @include list-group-pink-css; }
@if $enable-pink-popovers { @include popover-pink-css; }
@if $enable-steelblue-utilities { @include steelblue-utilities-css; }
@if $enable-steelblue-backgrounds { @include backgrounds-steelblue-css; }
@if $enable-steelblue-borders { @include borders-steelblue-css; }
@if $enable-steelblue-gradient { @include gradient-steelblue-css; }
@if $enable-steelblue-text { @include text-steelblue-css; }
@if $enable-steelblue-modifiers { @include steelblue-modifiers-css; }
@if $enable-steelblue-accordions { @include accordion-steelblue-css; }
@if $enable-steelblue-alerts { @include alert-steelblue-css; }
@if $enable-steelblue-badges { @include badge-steelblue-css; }
@if $enable-steelblue-buttons { @include button-steelblue-css; }
@if $enable-steelblue-cards { @include card-steelblue-css; }
@if $enable-steelblue-dialogs { @include dialog-steelblue-css; }
@if $enable-steelblue-dropdowns { @include dropdown-steelblue-css; }
@if $enable-steelblue-list-groups { @include list-group-steelblue-css; }
@if $enable-steelblue-popovers { @include popover-steelblue-css; }
@if $enable-firebrick-utilities { @include firebrick-utilities-css; }
@if $enable-firebrick-backgrounds { @include backgrounds-firebrick-css; }
@if $enable-firebrick-borders { @include borders-firebrick-css; }
@if $enable-firebrick-gradient { @include gradient-firebrick-css; }
@if $enable-firebrick-text { @include text-firebrick-css; }
@if $enable-firebrick-modifiers { @include firebrick-modifiers-css; }
@if $enable-firebrick-accordions { @include accordion-firebrick-css; }
@if $enable-firebrick-alerts { @include alert-firebrick-css; }
@if $enable-firebrick-badges { @include badge-firebrick-css; }
@if $enable-firebrick-buttons { @include button-firebrick-css; }
@if $enable-firebrick-cards { @include card-firebrick-css; }
@if $enable-firebrick-dialogs { @include dialog-firebrick-css; }
@if $enable-firebrick-dropdowns { @include dropdown-firebrick-css; }
@if $enable-firebrick-list-groups { @include list-group-firebrick-css; }
@if $enable-firebrick-popovers { @include popover-firebrick-css; }
@if $enable-seagreen-utilities { @include seagreen-utilities-css; }
@if $enable-seagreen-backgrounds { @include backgrounds-seagreen-css; }
@if $enable-seagreen-borders { @include borders-seagreen-css; }
@if $enable-seagreen-gradient { @include gradient-seagreen-css; }
@if $enable-seagreen-text { @include text-seagreen-css; }
@if $enable-seagreen-modifiers { @include seagreen-modifiers-css; }
@if $enable-seagreen-accordions { @include accordion-seagreen-css; }
@if $enable-seagreen-alerts { @include alert-seagreen-css; }
@if $enable-seagreen-badges { @include badge-seagreen-css; }
@if $enable-seagreen-buttons { @include button-seagreen-css; }
@if $enable-seagreen-cards { @include card-seagreen-css; }
@if $enable-seagreen-dialogs { @include dialog-seagreen-css; }
@if $enable-seagreen-dropdowns { @include dropdown-seagreen-css; }
@if $enable-seagreen-list-groups { @include list-group-seagreen-css; }
@if $enable-seagreen-popovers { @include popover-seagreen-css; }
@if $enable-darkcoral-utilities { @include darkcoral-utilities-css; }
@if $enable-darkcoral-backgrounds { @include backgrounds-darkcoral-css; }
@if $enable-darkcoral-borders { @include borders-darkcoral-css; }
@if $enable-darkcoral-gradient { @include gradient-darkcoral-css; }
@if $enable-darkcoral-text { @include text-darkcoral-css; }
@if $enable-darkcoral-modifiers { @include darkcoral-modifiers-css; }
@if $enable-darkcoral-accordions { @include accordion-darkcoral-css; }
@if $enable-darkcoral-alerts { @include alert-darkcoral-css; }
@if $enable-darkcoral-badges { @include badge-darkcoral-css; }
@if $enable-darkcoral-buttons { @include button-darkcoral-css; }
@if $enable-darkcoral-cards { @include card-darkcoral-css; }
@if $enable-darkcoral-dialogs { @include dialog-darkcoral-css; }
@if $enable-darkcoral-dropdowns { @include dropdown-darkcoral-css; }
@if $enable-darkcoral-list-groups { @include list-group-darkcoral-css; }
@if $enable-darkcoral-popovers { @include popover-darkcoral-css; }
@if $enable-cadetsteel-utilities { @include cadetsteel-utilities-css; }
@if $enable-cadetsteel-backgrounds { @include backgrounds-cadetsteel-css; }
@if $enable-cadetsteel-borders { @include borders-cadetsteel-css; }
@if $enable-cadetsteel-gradient { @include gradient-cadetsteel-css; }
@if $enable-cadetsteel-text { @include text-cadetsteel-css; }
@if $enable-cadetsteel-modifiers { @include cadetsteel-modifiers-css; }
@if $enable-cadetsteel-accordions { @include accordion-cadetsteel-css; }
@if $enable-cadetsteel-alerts { @include alert-cadetsteel-css; }
@if $enable-cadetsteel-badges { @include badge-cadetsteel-css; }
@if $enable-cadetsteel-buttons { @include button-cadetsteel-css; }
@if $enable-cadetsteel-cards { @include card-cadetsteel-css; }
@if $enable-cadetsteel-dialogs { @include dialog-cadetsteel-css; }
@if $enable-cadetsteel-dropdowns { @include dropdown-cadetsteel-css; }
@if $enable-cadetsteel-list-groups { @include list-group-cadetsteel-css; }
@if $enable-cadetsteel-popovers { @include popover-cadetsteel-css; }
@if $enable-lemon-utilities { @include lemon-utilities-css; }
@if $enable-lemon-backgrounds { @include backgrounds-lemon-css; }
@if $enable-lemon-borders { @include borders-lemon-css; }
@if $enable-lemon-gradient { @include gradient-lemon-css; }
@if $enable-lemon-text { @include text-lemon-css; }
@if $enable-lemon-modifiers { @include lemon-modifiers-css; }
@if $enable-lemon-accordions { @include accordion-lemon-css; }
@if $enable-lemon-alerts { @include alert-lemon-css; }
@if $enable-lemon-badges { @include badge-lemon-css; }
@if $enable-lemon-buttons { @include button-lemon-css; }
@if $enable-lemon-cards { @include card-lemon-css; }
@if $enable-lemon-dialogs { @include dialog-lemon-css; }
@if $enable-lemon-dropdowns { @include dropdown-lemon-css; }
@if $enable-lemon-list-groups { @include list-group-lemon-css; }
@if $enable-lemon-popovers { @include popover-lemon-css; }
@if $enable-rebeccapurple-utilities { @include rebeccapurple-utilities-css; }
@if $enable-rebeccapurple-backgrounds { @include backgrounds-rebeccapurple-css; }
@if $enable-rebeccapurple-borders { @include borders-rebeccapurple-css; }
@if $enable-rebeccapurple-gradient { @include gradient-rebeccapurple-css; }
@if $enable-rebeccapurple-text { @include text-rebeccapurple-css; }
@if $enable-rebeccapurple-modifiers { @include rebeccapurple-modifiers-css; }
@if $enable-rebeccapurple-accordions { @include accordion-rebeccapurple-css; }
@if $enable-rebeccapurple-alerts { @include alert-rebeccapurple-css; }
@if $enable-rebeccapurple-badges { @include badge-rebeccapurple-css; }
@if $enable-rebeccapurple-buttons { @include button-rebeccapurple-css; }
@if $enable-rebeccapurple-cards { @include card-rebeccapurple-css; }
@if $enable-rebeccapurple-dialogs { @include dialog-rebeccapurple-css; }
@if $enable-rebeccapurple-dropdowns { @include dropdown-rebeccapurple-css; }
@if $enable-rebeccapurple-list-groups { @include list-group-rebeccapurple-css; }
@if $enable-rebeccapurple-popovers { @include popover-rebeccapurple-css; }
@if $enable-rosypink-utilities { @include rosypink-utilities-css; }
@if $enable-rosypink-backgrounds { @include backgrounds-rosypink-css; }
@if $enable-rosypink-borders { @include borders-rosypink-css; }
@if $enable-rosypink-gradient { @include gradient-rosypink-css; }
@if $enable-rosypink-text { @include text-rosypink-css; }
@if $enable-rosypink-modifiers { @include rosypink-modifiers-css; }
@if $enable-rosypink-accordions { @include accordion-rosypink-css; }
@if $enable-rosypink-alerts { @include alert-rosypink-css; }
@if $enable-rosypink-badges { @include badge-rosypink-css; }
@if $enable-rosypink-buttons { @include button-rosypink-css; }
@if $enable-rosypink-cards { @include card-rosypink-css; }
@if $enable-rosypink-dialogs { @include dialog-rosypink-css; }
@if $enable-rosypink-dropdowns { @include dropdown-rosypink-css; }
@if $enable-rosypink-list-groups { @include list-group-rosypink-css; }
@if $enable-rosypink-popovers { @include popover-rosypink-css; }
@if $enable-tan-utilities { @include tan-utilities-css; }
@if $enable-tan-backgrounds { @include backgrounds-tan-css; }
@if $enable-tan-borders { @include borders-tan-css; }
@if $enable-tan-gradient { @include gradient-tan-css; }
@if $enable-tan-text { @include text-tan-css; }
@if $enable-tan-modifiers { @include tan-modifiers-css; }
@if $enable-tan-accordions { @include accordion-tan-css; }
@if $enable-tan-alerts { @include alert-tan-css; }
@if $enable-tan-badges { @include badge-tan-css; }
@if $enable-tan-buttons { @include button-tan-css; }
@if $enable-tan-cards { @include card-tan-css; }
@if $enable-tan-dialogs { @include dialog-tan-css; }
@if $enable-tan-dropdowns { @include dropdown-tan-css; }
@if $enable-tan-list-groups { @include list-group-tan-css; }
@if $enable-tan-popovers { @include popover-tan-css; }
@if $enable-olive-utilities { @include olive-utilities-css; }
@if $enable-olive-backgrounds { @include backgrounds-olive-css; }
@if $enable-olive-borders { @include borders-olive-css; }
@if $enable-olive-gradient { @include gradient-olive-css; }
@if $enable-olive-text { @include text-olive-css; }
@if $enable-olive-modifiers { @include olive-modifiers-css; }
@if $enable-olive-accordions { @include accordion-olive-css; }
@if $enable-olive-alerts { @include alert-olive-css; }
@if $enable-olive-badges { @include badge-olive-css; }
@if $enable-olive-buttons { @include button-olive-css; }
@if $enable-olive-cards { @include card-olive-css; }
@if $enable-olive-dialogs { @include dialog-olive-css; }
@if $enable-olive-dropdowns { @include dropdown-olive-css; }
@if $enable-olive-list-groups { @include list-group-olive-css; }
@if $enable-olive-popovers { @include popover-olive-css; }
@if $enable-rosewood-utilities { @include rosewood-utilities-css; }
@if $enable-rosewood-backgrounds { @include backgrounds-rosewood-css; }
@if $enable-rosewood-borders { @include borders-rosewood-css; }
@if $enable-rosewood-gradient { @include gradient-rosewood-css; }
@if $enable-rosewood-text { @include text-rosewood-css; }
@if $enable-rosewood-modifiers { @include rosewood-modifiers-css; }
@if $enable-rosewood-accordions { @include accordion-rosewood-css; }
@if $enable-rosewood-alerts { @include alert-rosewood-css; }
@if $enable-rosewood-badges { @include badge-rosewood-css; }
@if $enable-rosewood-buttons { @include button-rosewood-css; }
@if $enable-rosewood-cards { @include card-rosewood-css; }
@if $enable-rosewood-dialogs { @include dialog-rosewood-css; }
@if $enable-rosewood-dropdowns { @include dropdown-rosewood-css; }
@if $enable-rosewood-list-groups { @include list-group-rosewood-css; }
@if $enable-rosewood-popovers { @include popover-rosewood-css; }
@if $enable-gray-utilities { @include gray-utilities-css; }
@if $enable-gray-backgrounds { @include backgrounds-gray-css; }
@if $enable-gray-borders { @include borders-gray-css; }
@if $enable-gray-gradient { @include gradient-gray-css; }
@if $enable-gray-text { @include text-gray-css; }
@if $enable-gray-modifiers { @include gray-modifiers-css; }
@if $enable-gray-accordions { @include accordion-gray-css; }
@if $enable-gray-alerts { @include alert-gray-css; }
@if $enable-gray-badges { @include badge-gray-css; }
@if $enable-gray-buttons { @include button-gray-css; }
@if $enable-gray-cards { @include card-gray-css; }
@if $enable-gray-dialogs { @include dialog-gray-css; }
@if $enable-gray-dropdowns { @include dropdown-gray-css; }
@if $enable-gray-list-groups { @include list-group-gray-css; }
@if $enable-gray-popovers { @include popover-gray-css; }
}breakpoints.scss
// ----------------------------------------------------------
// Breakpoints mixins
// ----------------------------------------------------------
@use "../configuration" as *;
@use "../index" as *;
// ----------------------------------------------------------
// XXL breakpoints
// ----------------------------------------------------------
@mixin utilities-framework-xxl {
@if $enable-borders-xxl { @include borders-xxl-css; }
@if $enable-text-xxl { @include text-xxl-css; }
}
@mixin layout-framework-xxl {
// Grids
@if $enable-grid-templates-xxl { @include grid-templates-xxl-css; }
@if $enable-grid-layouts-xxl { @include grid-layouts-xxl-css; }
// Layout
@if $enable-align-xxl { @include align-xxl-css; }
@if $enable-aspect-ratio-xxl { @include aspect-ratio-xxl-css; }
@if $enable-block-xxl { @include block-xxl-css; }
@if $enable-columns-xxl { @include columns-xxl-css; }
@if $enable-display-xxl { @include display-xxl-css; }
@if $enable-flex-xxl { @include flex-xxl-css; }
@if $enable-grid-xxl { @include grid-xxl-css; }
@if $enable-inset-xxl { @include inset-xxl-css; }
@if $enable-justify-xxl { @include justify-xxl-css; }
@if $enable-object-fit-xxl { @include object-fit-xxl-css; }
@if $enable-order-xxl { @include order-xxl-css; }
@if $enable-overflow-xxl { @include overflow-xxl-css; }
@if $enable-overscroll-xxl { @include overscroll-xxl-css; }
@if $enable-place-xxl { @include place-xxl-css; }
@if $enable-position-xxl { @include position-xxl-css; }
@if $enable-scrollbars-xxl { @include scrollbars-xxl-css; }
@if $enable-sizes-xxl { @include sizes-xxl-css; }
@if $enable-z-index-xxl { @include z-index-xxl-css; }
// Spacing
@if $enable-gaps-xxl { @include gaps-xxl-css; }
@if $enable-margins-xxl { @include margins-xxl-css; }
@if $enable-padding-xxl { @include padding-xxl-css; }
}
// ----------------------------------------------------------
// XL breakpoints
// ----------------------------------------------------------
@mixin utilities-framework-xl {
@if $enable-borders-xl { @include borders-xl-css; }
@if $enable-text-xl { @include text-xl-css; }
}
@mixin layout-framework-xl {
// Grids
@if $enable-grid-templates-xl { @include grid-templates-xl-css; }
@if $enable-grid-layouts-xl { @include grid-layouts-xl-css; }
// Layout
@if $enable-align-xl { @include align-xl-css; }
@if $enable-aspect-ratio-xl { @include aspect-ratio-xl-css; }
@if $enable-block-xl { @include block-xl-css; }
@if $enable-columns-xl { @include columns-xl-css; }
@if $enable-display-xl { @include display-xl-css; }
@if $enable-flex-xl { @include flex-xl-css; }
@if $enable-grid-xl { @include grid-xl-css; }
@if $enable-inset-xl { @include inset-xl-css; }
@if $enable-justify-xl { @include justify-xl-css; }
@if $enable-object-fit-xl { @include object-fit-xl-css; }
@if $enable-order-xl { @include order-xl-css; }
@if $enable-overflow-xl { @include overflow-xl-css; }
@if $enable-overscroll-xl { @include overscroll-xl-css; }
@if $enable-place-xl { @include place-xl-css; }
@if $enable-position-xl { @include position-xl-css; }
@if $enable-scrollbars-xl { @include scrollbars-xl-css; }
@if $enable-sizes-xl { @include sizes-xl-css; }
@if $enable-z-index-xl { @include z-index-xl-css; }
// Spacing
@if $enable-gaps-xl { @include gaps-xl-css; }
@if $enable-margins-xl { @include margins-xl-css; }
@if $enable-padding-xl { @include padding-xl-css; }
}
// ----------------------------------------------------------
// LG breakpoints
// ----------------------------------------------------------
@mixin utilities-framework-lg {
@if $enable-borders-lg { @include borders-lg-css; }
@if $enable-text-lg { @include text-lg-css; }
}
@mixin layout-framework-lg {
// Grids
@if $enable-grid-templates-lg { @include grid-templates-lg-css; }
@if $enable-grid-layouts-lg { @include grid-layouts-lg-css; }
// Layout
@if $enable-align-lg { @include align-lg-css; }
@if $enable-aspect-ratio-lg { @include aspect-ratio-lg-css; }
@if $enable-block-lg { @include block-lg-css; }
@if $enable-columns-lg { @include columns-lg-css; }
@if $enable-display-lg { @include display-lg-css; }
@if $enable-flex-lg { @include flex-lg-css; }
@if $enable-grid-lg { @include grid-lg-css; }
@if $enable-inset-lg { @include inset-lg-css; }
@if $enable-justify-lg { @include justify-lg-css; }
@if $enable-object-fit-lg { @include object-fit-lg-css; }
@if $enable-order-lg { @include order-lg-css; }
@if $enable-overflow-lg { @include overflow-lg-css; }
@if $enable-overscroll-lg { @include overscroll-lg-css; }
@if $enable-place-lg { @include place-lg-css; }
@if $enable-position-lg { @include position-lg-css; }
@if $enable-scrollbars-lg { @include scrollbars-lg-css; }
@if $enable-sizes-lg { @include sizes-lg-css; }
@if $enable-z-index-lg { @include z-index-lg-css; }
// Spacing
@if $enable-gaps-lg { @include gaps-lg-css; }
@if $enable-margins-lg { @include margins-lg-css; }
@if $enable-padding-lg { @include padding-lg-css; }
}
// ----------------------------------------------------------
// MD breakpoints
// ----------------------------------------------------------
@mixin utilities-framework-md {
@if $enable-borders-md { @include borders-md-css; }
@if $enable-text-md { @include text-md-css; }
}
@mixin layout-framework-md {
// Grids
@if $enable-grid-templates-md { @include grid-templates-md-css; }
@if $enable-grid-layouts-md { @include grid-layouts-md-css; }
// Layout
@if $enable-align-md { @include align-md-css; }
@if $enable-aspect-ratio-md { @include aspect-ratio-md-css; }
@if $enable-block-md { @include block-md-css; }
@if $enable-columns-md { @include columns-md-css; }
@if $enable-display-md { @include display-md-css; }
@if $enable-flex-md { @include flex-md-css; }
@if $enable-grid-md { @include grid-md-css; }
@if $enable-inset-md { @include inset-md-css; }
@if $enable-justify-md { @include justify-md-css; }
@if $enable-object-fit-md { @include object-fit-md-css; }
@if $enable-order-md { @include order-md-css; }
@if $enable-overflow-md { @include overflow-md-css; }
@if $enable-overscroll-md { @include overscroll-md-css; }
@if $enable-place-md { @include place-md-css; }
@if $enable-position-md { @include position-md-css; }
@if $enable-scrollbars-md { @include scrollbars-md-css; }
@if $enable-sizes-md { @include sizes-md-css; }
@if $enable-z-index-md { @include z-index-md-css; }
// Spacing
@if $enable-gaps-md { @include gaps-md-css; }
@if $enable-margins-md { @include margins-md-css; }
@if $enable-padding-md { @include padding-md-css; }
}
// ----------------------------------------------------------
// SM breakpoints
// ----------------------------------------------------------
@mixin utilities-framework-sm {
@if $enable-borders-sm { @include borders-sm-css; }
@if $enable-text-sm { @include text-sm-css; }
}
@mixin layout-framework-sm {
// Grids
@if $enable-grid-templates-sm { @include grid-templates-sm-css; }
@if $enable-grid-layouts-sm { @include grid-layouts-sm-css; }
// Layout
@if $enable-align-sm { @include align-sm-css; }
@if $enable-aspect-ratio-sm { @include aspect-ratio-sm-css; }
@if $enable-block-sm { @include block-sm-css; }
@if $enable-columns-sm { @include columns-sm-css; }
@if $enable-display-sm { @include display-sm-css; }
@if $enable-flex-sm { @include flex-sm-css; }
@if $enable-grid-sm { @include grid-sm-css; }
@if $enable-inset-sm { @include inset-sm-css; }
@if $enable-justify-sm { @include justify-sm-css; }
@if $enable-object-fit-sm { @include object-fit-sm-css; }
@if $enable-order-sm { @include order-sm-css; }
@if $enable-overflow-sm { @include overflow-sm-css; }
@if $enable-overscroll-sm { @include overscroll-sm-css; }
@if $enable-place-sm { @include place-sm-css; }
@if $enable-position-sm { @include position-sm-css; }
@if $enable-scrollbars-sm { @include scrollbars-sm-css; }
@if $enable-sizes-sm { @include sizes-sm-css; }
@if $enable-z-index-sm { @include z-index-sm-css; }
// Spacing
@if $enable-gaps-sm { @include gaps-sm-css; }
@if $enable-margins-sm { @include margins-sm-css; }
@if $enable-padding-sm { @include padding-sm-css; }
}
// ----------------------------------------------------------
// XS breakpoints
// ----------------------------------------------------------
@mixin utilities-framework-xs {
@if $enable-borders-xs { @include borders-xs-css; }
@if $enable-text-xs { @include text-xs-css; }
}
@mixin layout-framework-xs {
// Grids
@if $enable-grid-templates-xs { @include grid-templates-xs-css; }
@if $enable-grid-layouts-xs { @include grid-layouts-xs-css; }
// Layout
@if $enable-align-xs { @include align-xs-css; }
@if $enable-aspect-ratio-xs { @include aspect-ratio-xs-css; }
@if $enable-block-xs { @include block-xs-css; }
@if $enable-columns-xs { @include columns-xs-css; }
@if $enable-display-xs { @include display-xs-css; }
@if $enable-flex-xs { @include flex-xs-css; }
@if $enable-grid-xs { @include grid-xs-css; }
@if $enable-inset-xs { @include inset-xs-css; }
@if $enable-justify-xs { @include justify-xs-css; }
@if $enable-object-fit-xs { @include object-fit-xs-css; }
@if $enable-order-xs { @include order-xs-css; }
@if $enable-overflow-xs { @include overflow-xs-css; }
@if $enable-overscroll-xs { @include overscroll-xs-css; }
@if $enable-place-xs { @include place-xs-css; }
@if $enable-position-xs { @include position-xs-css; }
@if $enable-scrollbars-xs { @include scrollbars-xs-css; }
@if $enable-sizes-xs { @include sizes-xs-css; }
@if $enable-z-index-xs { @include z-index-xs-css; }
// Spacing
@if $enable-gaps-xs { @include gaps-xs-css; }
@if $enable-margins-xs { @include margins-xs-css; }
@if $enable-padding-xs { @include padding-xs-css; }
}
// ----------------------------------------------------------
// XXS breakpoints
// ----------------------------------------------------------
@mixin utilities-framework-xxs {
@if $enable-borders-xxs { @include borders-xxs-css; }
@if $enable-text-xxs { @include text-xxs-css; }
}
@mixin layout-framework-xxs {
// Grids
@if $enable-grid-templates-xxs { @include grid-templates-xxs-css; }
@if $enable-grid-layouts-xxs { @include grid-layouts-xxs-css; }
// Layout
@if $enable-align-xxs { @include align-xxs-css; }
@if $enable-aspect-ratio-xxs { @include aspect-ratio-xxs-css; }
@if $enable-block-xxs { @include block-xxs-css; }
@if $enable-columns-xxs { @include columns-xxs-css; }
@if $enable-display-xxs { @include display-xxs-css; }
@if $enable-flex-xxs { @include flex-xxs-css; }
@if $enable-grid-xxs { @include grid-xxs-css; }
@if $enable-inset-xxs { @include inset-xxs-css; }
@if $enable-justify-xxs { @include justify-xxs-css; }
@if $enable-object-fit-xxs { @include object-fit-xxs-css; }
@if $enable-order-xxs { @include order-xxs-css; }
@if $enable-overflow-xxs { @include overflow-xxs-css; }
@if $enable-overscroll-xxs { @include overscroll-xxs-css; }
@if $enable-place-xxs { @include place-xxs-css; }
@if $enable-position-xxs { @include position-xxs-css; }
@if $enable-scrollbars-xxs { @include scrollbars-xxs-css; }
@if $enable-sizes-xxs { @include sizes-xxs-css; }
@if $enable-z-index-xxs { @include z-index-xxs-css; }
// Spacing
@if $enable-gaps-xxs { @include gaps-xxs-css; }
@if $enable-margins-xxs { @include margins-xxs-css; }
@if $enable-padding-xxs { @include padding-xxs-css; }
}[scss]
stylemods.scss
// ----------------------------------------------------------
// StyleMods framework
// ----------------------------------------------------------
@use "configuration" as *;
@use "framework" as *;
// ----------------------------------------------------------
// Cascade layers
// ----------------------------------------------------------
@if $enable-layer-order {
@include cascade-layers;
}
// ----------------------------------------------------------
// Color variable tokens
// ----------------------------------------------------------
@if $enable-color-layer {
@layer #{$color-layer} {
@include color-framework;
}
}
@else {
@include color-framework;
}
// ----------------------------------------------------------
// Content
// ----------------------------------------------------------
@if $enable-content-layer {
@layer #{$content-layer} {
@include content-framework;
}
}
@else {
@include content-framework;
}
// ----------------------------------------------------------
// Components
// ----------------------------------------------------------
@if $enable-components-layer {
@layer #{$components-layer} {
@include components-framework;
}
}
@else {
@include components-framework;
}
// ----------------------------------------------------------
// Utilities
// ----------------------------------------------------------
@if $enable-utilities-layer {
@layer #{$utilities-layer} {
@include utilities-framework;
}
}
@else {
@include utilities-framework;
}
// ----------------------------------------------------------
// Modifiers (color utilities and component classes)
// ----------------------------------------------------------
@if $enable-modifiers-layer {
@layer #{$modifiers-layer} {
@include modifiers-framework;
}
}
@else {
@include modifiers-framework;
}
// ----------------------------------------------------------
// Layout
// ----------------------------------------------------------
@if $enable-layout-layer {
@layer #{$layout-layer} {
@include layout-framework;
}
}
@else {
@include layout-framework;
}
// ----------------------------------------------------------
// XXL breakpoints
// ----------------------------------------------------------
@media (#{$breakpoint-query} #{$breakpoint-xxl}) {
@if $enable-utilities-layer-xxl {
@layer #{$utilities-layer} {
@include utilities-framework-xxl;
}
}
@if $enable-layout-layer-xxl {
@layer #{$layout-layer} {
@include layout-framework-xxl;
}
}
@else {
@include utilities-framework-xxl;
@include layout-framework-xxl;
}
}
// ----------------------------------------------------------
// XL breakpoints
// ----------------------------------------------------------
@media (#{$breakpoint-query} #{$breakpoint-xl}) {
@if $enable-utilities-layer-xl {
@layer #{$utilities-layer} {
@include utilities-framework-xl;
}
}
@if $enable-layout-layer-xl {
@layer #{$layout-layer} {
@include layout-framework-xl;
}
}
@else {
@include utilities-framework-xl;
@include layout-framework-xl;
}
}
// ----------------------------------------------------------
// LG breakpoints
// ----------------------------------------------------------
@media (#{$breakpoint-query} #{$breakpoint-lg}) {
@if $enable-utilities-layer-lg {
@layer #{$utilities-layer} {
@include utilities-framework-lg;
}
}
@if $enable-layout-layer-lg {
@layer #{$layout-layer} {
@include layout-framework-lg;
}
}
@else {
@include utilities-framework-lg;
@include layout-framework-lg;
}
}
// ----------------------------------------------------------
// MD breakpoints
// ----------------------------------------------------------
@media (#{$breakpoint-query} #{$breakpoint-md}) {
@if $enable-utilities-layer-md {
@layer #{$utilities-layer} {
@include utilities-framework-md;
}
}
@if $enable-layout-layer-md {
@layer #{$layout-layer} {
@include layout-framework-md;
}
}
@else {
@include utilities-framework-md;
@include layout-framework-md;
}
}
// ----------------------------------------------------------
// SM breakpoints
// ----------------------------------------------------------
@media (#{$breakpoint-query} #{$breakpoint-sm}) {
@if $enable-utilities-layer-sm {
@layer #{$utilities-layer} {
@include utilities-framework-sm;
}
}
@if $enable-layout-layer-sm {
@layer #{$layout-layer} {
@include layout-framework-sm;
}
}
@else {
@include utilities-framework-sm;
@include layout-framework-sm;
}
}
// ----------------------------------------------------------
// XS breakpoints
// ----------------------------------------------------------
@media (#{$breakpoint-query} #{$breakpoint-xs}) {
@if $enable-utilities-layer-xs {
@layer #{$utilities-layer} {
@include utilities-framework-xs;
}
}
@if $enable-layout-layer-xs {
@layer #{$layout-layer} {
@include layout-framework-xs;
}
}
@else {
@include utilities-framework-xs;
@include layout-framework-xs;
}
}
// ----------------------------------------------------------
// XXS breakpoints
// ----------------------------------------------------------
@media (#{$breakpoint-query} #{$breakpoint-xxs}) {
@if $enable-utilities-layer-xxs {
@layer #{$utilities-layer} {
@include utilities-framework-xxs;
}
}
@if $enable-layout-layer-xxs {
@layer #{$layout-layer} {
@include layout-framework-xxs;
}
}
@else {
@include utilities-framework-xxs;
@include layout-framework-xxs;
}
}
// ----------------------------------------------------------
// Icons
// ----------------------------------------------------------
@if $enable-icons-layer {
@layer #{$icons-layer} {
@include icons-framework;
}
}
@else {
@include icons-framework;
}