diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index 1505b2be6f..2dff498709 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -2,11 +2,11 @@ "files": [ { "path": "./dist/css/ouds-web-bootstrap.css", - "maxSize": "61.0 kB" + "maxSize": "61.75 kB" }, { "path": "./dist/css/ouds-web-bootstrap.min.css", - "maxSize": "58.0 kB" + "maxSize": "58.75 kB" }, { "path": "./dist/css/ouds-web-grid.css", @@ -18,27 +18,27 @@ }, { "path": "./dist/css/ouds-web-reboot.css", - "maxSize": "4.75 kB" + "maxSize": "5.75 kB" }, { "path": "./dist/css/ouds-web-reboot.min.css", - "maxSize": "4.5 kB" + "maxSize": "5.25 kB" }, { "path": "./dist/css/ouds-web-utilities.css", - "maxSize": "20.75 kB" + "maxSize": "21.75 kB" }, { "path": "./dist/css/ouds-web-utilities.min.css", - "maxSize": "19.75 kB" + "maxSize": "20.75 kB" }, { "path": "./dist/css/ouds-web.css", - "maxSize": "54.75 kB" + "maxSize": "55.5 kB" }, { "path": "./dist/css/ouds-web.min.css", - "maxSize": "51.5 kB" + "maxSize": "52.25 kB" }, { "path": "./dist/js/ouds-web.bundle.js", diff --git a/.cspell.json b/.cspell.json index 1ed62dcfa0..53d8b86ece 100644 --- a/.cspell.json +++ b/.cspell.json @@ -25,6 +25,7 @@ "clic", "Codesniffer", "combinator", + "Consolas", "Contentful", "Cpath", "Crossfade", @@ -70,6 +71,7 @@ "Lowercased", "markdownify", "mediaqueries", + "Menlo", "minifiers", "misfunction", "mkdir", diff --git a/scss/_config.scss b/scss/_config.scss new file mode 100644 index 0000000000..f625993503 --- /dev/null +++ b/scss/_config.scss @@ -0,0 +1,3 @@ +// Configuration file for OUDS Web + +$prefix: bs- !default; diff --git a/scss/_maps.scss b/scss/_maps.scss index 31e2fc3935..44fdae2c76 100644 --- a/scss/_maps.scss +++ b/scss/_maps.scss @@ -83,6 +83,32 @@ $ouds-elevations: ( ) !default; // scss-docs-end ouds-maps-elevations +// scss-docs-start ouds-maps-fonts +$ouds-font-sizes: ( + dl: "%display-large", + dm: "%display-medium", + ds: "%display-small", + hxl: "%heading-xlarge", + hl: "%heading-large", + hm: "%heading-medium", + hs: "%heading-small", + bl: "%body-large", + bm: "%body-medium", + bs: "%body-small", + lxl: "%label-xlarge", + ll: "%label-large", + lm: "%label-medium", + ls: "%label-small", + cm: "%code-medium", + cs: "%code-small" +) !default; + +$ouds-font-weights: ( + normal: $ouds-font-weight-web-default, + bold: $ouds-font-weight-web-strong +) !default; +// scss-docs-end ouds-maps-fonts + // scss-docs-start ouds-maps-opacities $ouds-opacities: ( "transparent": $ouds-opacity-transparent, diff --git a/scss/_reboot.scss b/scss/_reboot.scss index b1fdf59e4e..b58a84b096 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -57,7 +57,7 @@ // 2. As a best practice, apply a default `background-color`. // 3. Prevent adjustments of font size after orientation changes in iOS. // 4. Change the default tap highlight to be completely transparent in iOS. -// 5. Prevent faux-bold/italic +// 5. Prevent faux-bold/italic maybe for some RTL fonts // See https://developer.mozilla.org/fr/docs/Web/CSS/font-synthesis // scss-docs-start reboot-body-rules @@ -69,11 +69,11 @@ body { @include font-size(var(--#{$prefix}body-font-size)); font-weight: var(--#{$prefix}body-font-weight); line-height: var(--#{$prefix}body-line-height); - // OUDS mod: no color + color: var(--#{$prefix}body-color); text-align: var(--#{$prefix}body-text-align); /* rtl:remove */ - letter-spacing: $letter-spacing-base; // OUDS mod + letter-spacing: var(--#{$prefix}body-letter-spacing); // OUDS mod background-color: var(--#{$prefix}body-bg); // 2 -webkit-text-size-adjust: 100%; // 3 -webkit-tap-highlight-color: rgba($black, 0); // 4 @@ -134,7 +134,6 @@ hr { %heading { margin-top: 0; // 1 margin-bottom: $headings-margin-bottom; - @include font-size($font-size-base); // OUDS mod font-family: $headings-font-family; font-style: $headings-font-style; font-weight: $headings-font-weight; @@ -142,7 +141,6 @@ hr { color: var(--#{$prefix}heading-color); /* rtl:remove */ - letter-spacing: $letter-spacing-base; // OUDS mod -webkit-font-smoothing: antialiased; // OUDS mod -moz-osx-font-smoothing: grayscale; // OUDS mod text-rendering: optimizelegibility; // OUDS mod @@ -150,27 +148,32 @@ hr { h1 { @extend %heading; - @include font-size($h4-font-size); - line-height: $h4-line-height; + @extend %heading-xlarge; // OUDS mod: instead of `@include font-size($h1-font-size)` +} - /* rtl:remove */ - letter-spacing: $h4-spacing; +h2 { + @extend %heading; + @extend %heading-large; // OUDS mod: instead of `@include font-size($h2-font-size)` } -h2, h3 { @extend %heading; - @include font-size($h5-font-size); - line-height: $h5-line-height; + @extend %heading-medium; // OUDS mod: instead of `@include font-size($h3-font-size)` +} - /* rtl:remove */ - letter-spacing: $h5-spacing; +h4 { + @extend %heading; + @extend %heading-small; // OUDS mod: instead of `@include font-size($h4-font-size)` +} + +h5 { + @extend %heading; + @extend %body-large; // OUDS mod: instead of `@include font-size($h5-font-size)` } -h4, -h5, h6 { @extend %heading; + @extend %body-medium; // OUDS mod: instead of `@include font-size($h6-font-size)` } @@ -286,6 +289,13 @@ blockquote { margin: 0 0 1rem; } +// OUDS mod: No italic +em, +cite { + font-style: normal; // OUDS mod: remove italic. +} +// End mod + // Strong // @@ -304,10 +314,6 @@ strong { small { @include font-size($small-font-size); - // OUDS mod - font-weight: $font-weight-normal; - line-height: $line-height-sm; - // End mod } @@ -383,8 +389,7 @@ pre { margin-top: 0; // 1 margin-bottom: 1rem; // 2 overflow: auto; // 3 - @include font-size($code-font-size); - line-height: $pre-line-height; // OUDS mod + @extend %code-small; // OUDS mod: instead of `@include font-size($code-font-size)` color: $pre-color; // Account for some code outputs that place code tags in pre tags @@ -399,7 +404,6 @@ var, // OUDS mod code { @include font-size($code-font-size); font-style: normal; // OUDS mod: is italic in all browsers - line-height: $line-height-sm; // OUDS mod color: var(--#{$prefix}code-color); word-wrap: break-word; @@ -460,13 +464,10 @@ table { caption { padding-top: $table-caption-padding-y; padding-bottom: $table-caption-padding-y; - @include font-size($h1-font-size); // OUDS mod - font-weight: $font-weight-bold; // OUDS mod + @extend %heading-xlarge; // OUDS mod + font-weight: $font-weight-bold; // OUDS mod color: $table-caption-color; text-align: left; - - /* rtl:remove */ - letter-spacing: $h1-spacing; // OUDS mod -webkit-font-smoothing: antialiased; // OUDS mod -moz-osx-font-smoothing: grayscale; // OUDS mod text-rendering: optimizelegibility; // OUDS mod @@ -500,7 +501,6 @@ th { label { display: inline-block; // 1 - font-weight: $form-label-font-weight; // OUDS mod } // Remove the default `border-radius` that macOS Chrome adds. @@ -626,9 +626,8 @@ legend { width: 100%; padding: 0; margin-bottom: $legend-margin-bottom; - @include font-size($legend-font-size); + @extend %body-large; // OUDS mod: instead of `@include font-size($legend-font-size)` font-weight: $legend-font-weight; - line-height: inherit; + * { clear: left; // 2 diff --git a/scss/_root.scss b/scss/_root.scss index c4f23e8ff4..5bb2005e49 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -63,6 +63,135 @@ --#{$prefix}font-monospace: #{inspect($font-family-monospace)}; --#{$prefix}gradient: #{$gradient}; + // scss-docs-start root-font-variables-ouds + --#{$prefix}font-size-display-large: #{px-to-rem($ouds-font-size-display-large-mobile)}; + --#{$prefix}font-size-display-medium: #{px-to-rem($ouds-font-size-display-medium-mobile)}; + --#{$prefix}font-size-display-small: #{px-to-rem($ouds-font-size-display-small-mobile)}; + --#{$prefix}font-size-heading-xlarge: #{px-to-rem($ouds-font-size-heading-xlarge-mobile)}; + --#{$prefix}font-size-heading-large: #{px-to-rem($ouds-font-size-heading-large-mobile)}; + --#{$prefix}font-size-heading-medium: #{px-to-rem($ouds-font-size-heading-medium-mobile)}; + --#{$prefix}font-size-heading-small: #{px-to-rem($ouds-font-size-heading-small-mobile)}; + --#{$prefix}font-size-body-large: #{px-to-rem($ouds-font-size-body-large-mobile)}; + --#{$prefix}font-size-body-medium: #{px-to-rem($ouds-font-size-body-medium-mobile)}; + --#{$prefix}font-size-body-small: #{px-to-rem($ouds-font-size-body-small-mobile)}; + --#{$prefix}font-line-height-display-large: #{divide($ouds-font-line-height-display-large-mobile, $ouds-font-size-display-large-mobile)}; + --#{$prefix}font-line-height-display-medium: #{divide($ouds-font-line-height-display-medium-mobile, $ouds-font-size-display-medium-mobile)}; + --#{$prefix}font-line-height-display-small: #{divide($ouds-font-line-height-display-small-mobile, $ouds-font-size-display-small-mobile)}; + --#{$prefix}font-line-height-heading-xlarge: #{divide($ouds-font-line-height-heading-xlarge-mobile, $ouds-font-size-heading-xlarge-mobile)}; + --#{$prefix}font-line-height-heading-large: #{divide($ouds-font-line-height-heading-large-mobile, $ouds-font-size-heading-large-mobile)}; + --#{$prefix}font-line-height-heading-medium: #{divide($ouds-font-line-height-heading-medium-mobile, $ouds-font-size-heading-medium-mobile)}; + --#{$prefix}font-line-height-heading-small: #{divide($ouds-font-line-height-heading-small-mobile, $ouds-font-size-heading-small-mobile)}; + --#{$prefix}font-line-height-body-large: #{divide($ouds-font-line-height-body-large-mobile, $ouds-font-size-body-large-mobile)}; + --#{$prefix}font-line-height-body-medium: #{divide($ouds-font-line-height-body-medium-mobile, $ouds-font-size-body-medium-mobile)}; + --#{$prefix}font-line-height-body-small: #{divide($ouds-font-line-height-body-small-mobile, $ouds-font-size-body-small-mobile)}; + --#{$prefix}font-letter-spacing-display-large: #{px-to-rem($ouds-font-letter-spacing-display-large-mobile)}; + --#{$prefix}font-letter-spacing-display-medium: #{px-to-rem($ouds-font-letter-spacing-display-medium-mobile)}; + --#{$prefix}font-letter-spacing-display-small: #{px-to-rem($ouds-font-letter-spacing-display-small-mobile)}; + --#{$prefix}font-letter-spacing-heading-xlarge: #{px-to-rem($ouds-font-letter-spacing-heading-xlarge-mobile)}; + --#{$prefix}font-letter-spacing-heading-large: #{px-to-rem($ouds-font-letter-spacing-heading-large-mobile)}; + --#{$prefix}font-letter-spacing-heading-medium: #{px-to-rem($ouds-font-letter-spacing-heading-medium-mobile)}; + --#{$prefix}font-letter-spacing-heading-small: #{px-to-rem($ouds-font-letter-spacing-heading-small-mobile)}; + --#{$prefix}font-letter-spacing-body-large: #{px-to-rem($ouds-font-letter-spacing-body-large-mobile)}; + --#{$prefix}font-letter-spacing-body-medium: #{px-to-rem($ouds-font-letter-spacing-body-medium-mobile)}; + --#{$prefix}font-letter-spacing-body-small: #{px-to-rem($ouds-font-letter-spacing-body-small-mobile)}; + --#{$prefix}font-max-width-display-large: #{px-to-rem($ouds-size-max-width-type-display-large-mobile)}; + --#{$prefix}font-max-width-display-medium: #{px-to-rem($ouds-size-max-width-type-display-medium-mobile)}; + --#{$prefix}font-max-width-display-small: #{px-to-rem($ouds-size-max-width-type-display-small-mobile)}; + --#{$prefix}font-max-width-heading-xlarge: #{px-to-rem($ouds-size-max-width-type-heading-xlarge-mobile)}; + --#{$prefix}font-max-width-heading-large: #{px-to-rem($ouds-size-max-width-type-heading-large-mobile)}; + --#{$prefix}font-max-width-heading-medium: #{px-to-rem($ouds-size-max-width-type-heading-medium-mobile)}; + --#{$prefix}font-max-width-heading-small: #{px-to-rem($ouds-size-max-width-type-heading-small-mobile)}; + --#{$prefix}font-max-width-body-large: #{px-to-rem($ouds-size-max-width-type-body-large-mobile)}; + --#{$prefix}font-max-width-body-medium: #{px-to-rem($ouds-size-max-width-type-body-medium-mobile)}; + --#{$prefix}font-max-width-body-small: #{px-to-rem($ouds-size-max-width-type-body-small-mobile)}; + + @include media-breakpoint-up(md) { + --#{$prefix}font-size-display-large: #{px-to-rem($ouds-font-size-display-large-tablet)}; + --#{$prefix}font-size-display-medium: #{px-to-rem($ouds-font-size-display-medium-tablet)}; + --#{$prefix}font-size-display-small: #{px-to-rem($ouds-font-size-display-small-tablet)}; + --#{$prefix}font-size-heading-xlarge: #{px-to-rem($ouds-font-size-heading-xlarge-tablet)}; + --#{$prefix}font-size-heading-large: #{px-to-rem($ouds-font-size-heading-large-tablet)}; + --#{$prefix}font-size-heading-medium: #{px-to-rem($ouds-font-size-heading-medium-tablet)}; + --#{$prefix}font-size-heading-small: #{px-to-rem($ouds-font-size-heading-small-tablet)}; + --#{$prefix}font-size-body-large: #{px-to-rem($ouds-font-size-body-large-tablet)}; + --#{$prefix}font-size-body-medium: #{px-to-rem($ouds-font-size-body-medium-tablet)}; + --#{$prefix}font-size-body-small: #{px-to-rem($ouds-font-size-body-small-tablet)}; + --#{$prefix}font-line-height-display-large: #{divide($ouds-font-line-height-display-large-tablet, $ouds-font-size-display-large-tablet)}; + --#{$prefix}font-line-height-display-medium: #{divide($ouds-font-line-height-display-medium-tablet, $ouds-font-size-display-medium-tablet)}; + --#{$prefix}font-line-height-display-small: #{divide($ouds-font-line-height-display-small-tablet, $ouds-font-size-display-small-tablet)}; + --#{$prefix}font-line-height-heading-xlarge: #{divide($ouds-font-line-height-heading-xlarge-tablet, $ouds-font-size-heading-xlarge-tablet)}; + --#{$prefix}font-line-height-heading-large: #{divide($ouds-font-line-height-heading-large-tablet, $ouds-font-size-heading-large-tablet)}; + --#{$prefix}font-line-height-heading-medium: #{divide($ouds-font-line-height-heading-medium-tablet, $ouds-font-size-heading-medium-tablet)}; + --#{$prefix}font-line-height-heading-small: #{divide($ouds-font-line-height-heading-small-tablet, $ouds-font-size-heading-small-tablet)}; + --#{$prefix}font-line-height-body-large: #{divide($ouds-font-line-height-body-large-tablet, $ouds-font-size-body-large-tablet)}; + --#{$prefix}font-line-height-body-medium: #{divide($ouds-font-line-height-body-medium-tablet, $ouds-font-size-body-medium-tablet)}; + --#{$prefix}font-line-height-body-small: #{divide($ouds-font-line-height-body-small-tablet, $ouds-font-size-body-small-tablet)}; + --#{$prefix}font-letter-spacing-display-large: #{px-to-rem($ouds-font-letter-spacing-display-large-tablet)}; + --#{$prefix}font-letter-spacing-display-medium: #{px-to-rem($ouds-font-letter-spacing-display-medium-tablet)}; + --#{$prefix}font-letter-spacing-display-small: #{px-to-rem($ouds-font-letter-spacing-display-small-tablet)}; + --#{$prefix}font-letter-spacing-heading-xlarge: #{px-to-rem($ouds-font-letter-spacing-heading-xlarge-tablet)}; + --#{$prefix}font-letter-spacing-heading-large: #{px-to-rem($ouds-font-letter-spacing-heading-large-tablet)}; + --#{$prefix}font-letter-spacing-heading-medium: #{px-to-rem($ouds-font-letter-spacing-heading-medium-tablet)}; + --#{$prefix}font-letter-spacing-heading-small: #{px-to-rem($ouds-font-letter-spacing-heading-small-tablet)}; + --#{$prefix}font-letter-spacing-body-large: #{px-to-rem($ouds-font-letter-spacing-body-large-tablet)}; + --#{$prefix}font-letter-spacing-body-medium: #{px-to-rem($ouds-font-letter-spacing-body-medium-tablet)}; + --#{$prefix}font-letter-spacing-body-small: #{px-to-rem($ouds-font-letter-spacing-body-small-tablet)}; + --#{$prefix}font-max-width-display-large: #{px-to-rem($ouds-size-max-width-type-display-large-tablet)}; + --#{$prefix}font-max-width-display-medium: #{px-to-rem($ouds-size-max-width-type-display-medium-tablet)}; + --#{$prefix}font-max-width-display-small: #{px-to-rem($ouds-size-max-width-type-display-small-tablet)}; + --#{$prefix}font-max-width-heading-xlarge: #{px-to-rem($ouds-size-max-width-type-heading-xlarge-tablet)}; + --#{$prefix}font-max-width-heading-large: #{px-to-rem($ouds-size-max-width-type-heading-large-tablet)}; + --#{$prefix}font-max-width-heading-medium: #{px-to-rem($ouds-size-max-width-type-heading-medium-tablet)}; + --#{$prefix}font-max-width-heading-small: #{px-to-rem($ouds-size-max-width-type-heading-small-tablet)}; + --#{$prefix}font-max-width-body-large: #{px-to-rem($ouds-size-max-width-type-body-large-tablet)}; + --#{$prefix}font-max-width-body-medium: #{px-to-rem($ouds-size-max-width-type-body-medium-tablet)}; + --#{$prefix}font-max-width-body-small: #{px-to-rem($ouds-size-max-width-type-body-small-tablet)}; + } + + @include media-breakpoint-up(xl) { + --#{$prefix}font-size-display-large: #{px-to-rem($ouds-font-size-display-large-desktop)}; + --#{$prefix}font-size-display-medium: #{px-to-rem($ouds-font-size-display-medium-desktop)}; + --#{$prefix}font-size-display-small: #{px-to-rem($ouds-font-size-display-small-desktop)}; + --#{$prefix}font-size-heading-xlarge: #{px-to-rem($ouds-font-size-heading-xlarge-desktop)}; + --#{$prefix}font-size-heading-large: #{px-to-rem($ouds-font-size-heading-large-desktop)}; + --#{$prefix}font-size-heading-medium: #{px-to-rem($ouds-font-size-heading-medium-desktop)}; + --#{$prefix}font-size-heading-small: #{px-to-rem($ouds-font-size-heading-small-desktop)}; + --#{$prefix}font-size-body-large: #{px-to-rem($ouds-font-size-body-large-desktop)}; + --#{$prefix}font-size-body-medium: #{px-to-rem($ouds-font-size-body-medium-desktop)}; + --#{$prefix}font-size-body-small: #{px-to-rem($ouds-font-size-body-small-desktop)}; + --#{$prefix}font-line-height-display-large: #{divide($ouds-font-line-height-display-large-desktop, $ouds-font-size-display-large-desktop)}; + --#{$prefix}font-line-height-display-medium: #{divide($ouds-font-line-height-display-medium-desktop, $ouds-font-size-display-medium-desktop)}; + --#{$prefix}font-line-height-display-small: #{divide($ouds-font-line-height-display-small-desktop, $ouds-font-size-display-small-desktop)}; + --#{$prefix}font-line-height-heading-xlarge: #{divide($ouds-font-line-height-heading-xlarge-desktop, $ouds-font-size-heading-xlarge-desktop)}; + --#{$prefix}font-line-height-heading-large: #{divide($ouds-font-line-height-heading-large-desktop, $ouds-font-size-heading-large-desktop)}; + --#{$prefix}font-line-height-heading-medium: #{divide($ouds-font-line-height-heading-medium-desktop, $ouds-font-size-heading-medium-desktop)}; + --#{$prefix}font-line-height-heading-small: #{divide($ouds-font-line-height-heading-small-desktop, $ouds-font-size-heading-small-desktop)}; + --#{$prefix}font-line-height-body-large: #{divide($ouds-font-line-height-body-large-desktop, $ouds-font-size-body-large-desktop)}; + --#{$prefix}font-line-height-body-medium: #{divide($ouds-font-line-height-body-medium-desktop, $ouds-font-size-body-medium-desktop)}; + --#{$prefix}font-line-height-body-small: #{divide($ouds-font-line-height-body-small-desktop, $ouds-font-size-body-small-desktop)}; + --#{$prefix}font-letter-spacing-display-large: #{px-to-rem($ouds-font-letter-spacing-display-large-desktop)}; + --#{$prefix}font-letter-spacing-display-medium: #{px-to-rem($ouds-font-letter-spacing-display-medium-desktop)}; + --#{$prefix}font-letter-spacing-display-small: #{px-to-rem($ouds-font-letter-spacing-display-small-desktop)}; + --#{$prefix}font-letter-spacing-heading-xlarge: #{px-to-rem($ouds-font-letter-spacing-heading-xlarge-desktop)}; + --#{$prefix}font-letter-spacing-heading-large: #{px-to-rem($ouds-font-letter-spacing-heading-large-desktop)}; + --#{$prefix}font-letter-spacing-heading-medium: #{px-to-rem($ouds-font-letter-spacing-heading-medium-desktop)}; + --#{$prefix}font-letter-spacing-heading-small: #{px-to-rem($ouds-font-letter-spacing-heading-small-desktop)}; + --#{$prefix}font-letter-spacing-body-large: #{px-to-rem($ouds-font-letter-spacing-body-large-desktop)}; + --#{$prefix}font-letter-spacing-body-medium: #{px-to-rem($ouds-font-letter-spacing-body-medium-desktop)}; + --#{$prefix}font-letter-spacing-body-small: #{px-to-rem($ouds-font-letter-spacing-body-small-desktop)}; + --#{$prefix}font-max-width-display-large: #{px-to-rem($ouds-size-max-width-type-display-large-desktop)}; + --#{$prefix}font-max-width-display-medium: #{px-to-rem($ouds-size-max-width-type-display-medium-desktop)}; + --#{$prefix}font-max-width-display-small: #{px-to-rem($ouds-size-max-width-type-display-small-desktop)}; + --#{$prefix}font-max-width-heading-xlarge: #{px-to-rem($ouds-size-max-width-type-heading-xlarge-desktop)}; + --#{$prefix}font-max-width-heading-large: #{px-to-rem($ouds-size-max-width-type-heading-large-desktop)}; + --#{$prefix}font-max-width-heading-medium: #{px-to-rem($ouds-size-max-width-type-heading-medium-desktop)}; + --#{$prefix}font-max-width-heading-small: #{px-to-rem($ouds-size-max-width-type-heading-small-desktop)}; + --#{$prefix}font-max-width-body-large: #{px-to-rem($ouds-size-max-width-type-body-large-desktop)}; + --#{$prefix}font-max-width-body-medium: #{px-to-rem($ouds-size-max-width-type-body-medium-desktop)}; + --#{$prefix}font-max-width-body-small: #{px-to-rem($ouds-size-max-width-type-body-small-desktop)}; + } + // scss-docs-end root-font-variables-ouds + // Root and body // scss-docs-start root-body-variables @if $font-size-root != null { @@ -72,6 +201,7 @@ @include rfs($font-size-base, --#{$prefix}body-font-size); --#{$prefix}body-font-weight: #{$font-weight-base}; --#{$prefix}body-line-height: #{$line-height-base}; + --#{$prefix}body-letter-spacing: #{$letter-spacing-base}; @if $body-text-align != null { --#{$prefix}body-text-align: #{$body-text-align}; } @@ -161,6 +291,78 @@ --#{$prefix}space-scaled-spacious: #{$ouds-space-scaled-spacious-desktop}; } // scss-docs-end root-space-scaled-var-ouds + + // scss-docs-start root-size-scaled-var-ouds + --#{$prefix}icon-short-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-short-mobile)}; + --#{$prefix}icon-medium-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-medium-mobile)}; + --#{$prefix}icon-tall-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-tall-mobile)}; + --#{$prefix}icon-short-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-short-mobile)}; + --#{$prefix}icon-medium-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-medium-mobile)}; + --#{$prefix}icon-tall-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-tall-mobile)}; + --#{$prefix}icon-short-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-short-mobile)}; + --#{$prefix}icon-medium-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-medium-mobile)}; + --#{$prefix}icon-tall-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-tall-mobile)}; + --#{$prefix}icon-short-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-short-mobile)}; + --#{$prefix}icon-medium-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-medium-mobile)}; + --#{$prefix}icon-tall-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-tall-mobile)}; + --#{$prefix}icon-short-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-short-mobile)}; + --#{$prefix}icon-medium-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-medium-mobile)}; + --#{$prefix}icon-tall-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-tall-mobile)}; + --#{$prefix}icon-short-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-short-mobile)}; + --#{$prefix}icon-medium-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-medium-mobile)}; + --#{$prefix}icon-tall-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-tall-mobile)}; + --#{$prefix}icon-short-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-short-mobile)}; + --#{$prefix}icon-medium-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-medium-mobile)}; + --#{$prefix}icon-tall-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-tall-mobile)}; + + @include media-breakpoint-up(md) { + --#{$prefix}icon-short-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-short-tablet)}; + --#{$prefix}icon-medium-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-medium-tablet)}; + --#{$prefix}icon-tall-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-tall-tablet)}; + --#{$prefix}icon-short-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-short-tablet)}; + --#{$prefix}icon-medium-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-medium-tablet)}; + --#{$prefix}icon-tall-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-tall-tablet)}; + --#{$prefix}icon-short-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-short-tablet)}; + --#{$prefix}icon-medium-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-medium-tablet)}; + --#{$prefix}icon-tall-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-tall-tablet)}; + --#{$prefix}icon-short-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-short-tablet)}; + --#{$prefix}icon-medium-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-medium-tablet)}; + --#{$prefix}icon-tall-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-tall-tablet)}; + --#{$prefix}icon-short-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-short-tablet)}; + --#{$prefix}icon-medium-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-medium-tablet)}; + --#{$prefix}icon-tall-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-tall-tablet)}; + --#{$prefix}icon-short-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-short-tablet)}; + --#{$prefix}icon-medium-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-medium-tablet)}; + --#{$prefix}icon-tall-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-tall-tablet)}; + --#{$prefix}icon-short-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-short-tablet)}; + --#{$prefix}icon-medium-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-medium-tablet)}; + --#{$prefix}icon-tall-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-tall-tablet)}; + } + + @include media-breakpoint-up(xl) { + --#{$prefix}icon-short-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-short-desktop)}; + --#{$prefix}icon-medium-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-medium-desktop)}; + --#{$prefix}icon-tall-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-tall-desktop)}; + --#{$prefix}icon-short-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-short-desktop)}; + --#{$prefix}icon-medium-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-medium-desktop)}; + --#{$prefix}icon-tall-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-tall-desktop)}; + --#{$prefix}icon-short-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-short-desktop)}; + --#{$prefix}icon-medium-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-medium-desktop)}; + --#{$prefix}icon-tall-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-tall-desktop)}; + --#{$prefix}icon-short-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-short-desktop)}; + --#{$prefix}icon-medium-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-medium-desktop)}; + --#{$prefix}icon-tall-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-tall-desktop)}; + --#{$prefix}icon-short-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-short-desktop)}; + --#{$prefix}icon-medium-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-medium-desktop)}; + --#{$prefix}icon-tall-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-tall-desktop)}; + --#{$prefix}icon-short-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-short-desktop)}; + --#{$prefix}icon-medium-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-medium-desktop)}; + --#{$prefix}icon-tall-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-tall-desktop)}; + --#{$prefix}icon-short-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-short-desktop)}; + --#{$prefix}icon-medium-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-medium-desktop)}; + --#{$prefix}icon-tall-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-tall-desktop)}; + } + // scss-docs-end root-space-scaled-var-ouds // End mod // scss-docs-start root-border-var diff --git a/scss/_title-bars.scss b/scss/_title-bars.scss index 5b90722cab..3774390a0f 100644 --- a/scss/_title-bars.scss +++ b/scss/_title-bars.scss @@ -15,16 +15,6 @@ background-color: var(--#{$prefix}title-bar-bg); border-bottom: var(--#{$prefix}title-bar-border-width) solid var(--#{$prefix}title-bar-border-color); - @include media-breakpoint-up(md) { - --#{$prefix}title-bar-font-size: #{$title-bar-font-size-md}; - --#{$prefix}title-bar-letter-spacing: #{$title-bar-letter-spacing-md}; - } - - @include media-breakpoint-up(xl) { - --#{$prefix}title-bar-font-size: #{$title-bar-font-size-xl}; - --#{$prefix}title-bar-letter-spacing: #{$title-bar-letter-spacing-xl}; - } - > [class*="container"] { display: flex; align-items: flex-end; diff --git a/scss/_type.scss b/scss/_type.scss index 8217542491..3e141c4c94 100644 --- a/scss/_type.scss +++ b/scss/_type.scss @@ -26,185 +26,41 @@ } -// OUDS mod -// Headings and displays together -// = Add letter-spacing and line-height -// = Reduce heading font-sizes for mobile (mobile first, obviously) -[class*="display-"] { - @extend %heading; -} - -.display-1 { - @include font-size($h2-font-size); - line-height: $h2-line-height; - - /* rtl:remove */ - letter-spacing: $h2-spacing; -} - -h1, -.display-2, -.display-3 { - @include font-size($h3-font-size); - line-height: $h3-line-height; - - /* rtl:remove */ - letter-spacing: $mid-spacing; -} - -/* rtl:begin:remove */ -.display-2 { - letter-spacing: $h3-spacing; -} - -/* rtl:end:remove */ - -h2, -.display-4 { - @include font-size($h5-font-size); - line-height: $h5-line-height; - - /* rtl:remove */ - letter-spacing: $h5-spacing; -} - .lead { - @include font-size($h6-font-size); + @extend %body-large; // OUDS mod: instead of `@include font-size($lead-font-size)` font-weight: $lead-font-weight; - line-height: $lead-line-height; - - /* rtl:remove */ - letter-spacing: $h6-spacing; } -@include media-breakpoint-up(sm) { - h1, - .display-1, - .display-2, - .display-3 { +// OUDS mod: no @each +// Type display classes +@each $display, $font-size in $display-font-sizes { + .display-#{$display} { + font-family: $display-font-family; + font-style: $display-font-style; + font-weight: $display-font-weight; line-height: $display-line-height; - } - - .display-1 { - @include font-size($display2-size); - - /* rtl:remove */ - letter-spacing: $display2-spacing; - } - - .display-2 { - @include font-size($display3-size); - - /* rtl:remove */ - letter-spacing: $display3-spacing; - } - - h1, - .display-3 { - @include font-size($display4-size); - - /* rtl:remove */ - letter-spacing: $display4-spacing; - } - - h2, - h3, - .display-4 { - @include font-size($h3-font-size); - line-height: $h3-line-height; - - /* rtl:remove */ - letter-spacing: $h3-spacing; - } - - h4, - h5, - h6 { - @include font-size($h5-font-size); - line-height: $h5-line-height; - - /* rtl:remove */ - letter-spacing: $h5-spacing; - } - - .lead { - @include font-size($h5-font-size); - - /* rtl:remove */ - letter-spacing: $h5-spacing; + @extend %heading; // OUDS mod + @extend #{$font-size}; // OUDS mod: instead of `@include font-size($font-size)` } } -@include media-breakpoint-up(lg) { - .display-1 { - @include font-size($display1-size); - - /* rtl:remove */ - letter-spacing: $display1-spacing; - } - - .display-2 { - @include font-size($display2-size); - - /* rtl:remove */ - letter-spacing: $display2-spacing; - } - - .display-3 { - @include font-size($display3-size); - - /* rtl:remove */ - letter-spacing: $display3-spacing; - } - - .display-4 { - @include font-size($display4-size); - line-height: $display-line-height; - - /* rtl:remove */ - letter-spacing: $display4-spacing; - } - - h2 { - @include font-size($h2-font-size); - line-height: $h2-line-height; +// .display-1 { +// @extend %heading; +// font-weight: $display-font-weight; +// @extend %display-large; +// } - /* rtl:remove */ - letter-spacing: $h2-spacing; - } - - h3 { - @include font-size($h3-font-size); - line-height: $h3-line-height; - - /* rtl:remove */ - letter-spacing: $h3-spacing; - } - - h4 { - @include font-size($h4-font-size); - line-height: $h4-line-height; - - /* rtl:remove */ - letter-spacing: $h4-spacing; - } - - h5, - h6 { - @include font-size($h5-font-size); - line-height: $h5-line-height; +// .display-2 { +// @extend %heading; +// font-weight: $display-font-weight; +// @extend %display-medium; +// } - /* rtl:remove */ - letter-spacing: $h5-spacing; - } - - .lead { - @include font-size($lead-font-size); - - /* rtl:remove */ - letter-spacing: $lead-letter-spacing; - } -} +// .display-3 { +// @extend %heading; +// font-weight: $display-font-weight; +// @extend %display-small; +// } // End mod @@ -252,11 +108,7 @@ h2, // Blockquotes .blockquote { margin-bottom: $blockquote-margin-y; - @include font-size($blockquote-font-size); - line-height: $blockquote-line-height; // OUDS mod - - /* rtl:remove */ - letter-spacing: $blockquote-letter-spacing; // OUDS mod + @extend %body-large; // OUDS mod: instead of `@include font-size($blockquote-font-size)` > :last-child { margin-bottom: 0; @@ -266,13 +118,9 @@ h2, .blockquote-footer { margin-top: -$blockquote-margin-y; margin-bottom: $blockquote-margin-y; - @include font-size($blockquote-footer-font-size); - line-height: $line-height-sm; // OUDS mod + @extend %body-small; // OUDS mod: instead of `@include font-size($blockquote-footer-font-size)` color: $blockquote-footer-color; - /* rtl:remove */ - letter-spacing: $letter-spacing-base; // OUDS mod - &::before { content: "\2014\00A0"; // em dash, nbsp } diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 144d15ed1f..c497c3feae 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -884,7 +884,8 @@ $utilities: map-merge( "font-size": ( property: font-size, class: fs, - values: $font-sizes + values: $font-sizes, + bootstrap-compatibility: true ), // OUDS mod: no font-style "font-weight": ( @@ -893,31 +894,24 @@ $utilities: map-merge( values: ( lighter: $font-weight-lighter, light: $font-weight-light, - normal: $font-weight-normal, + // OUDS mod: no normal because handled by ouds map medium: $font-weight-medium, semibold: $font-weight-semibold, - bold: $font-weight-bold, + // OUDS mod: no bold because handled by ouds map bolder: $font-weight-bolder - ) + ), + bootstrap-compatibility: true ), - // OUDS mod: use hardcoded values instead of variables since our variables can't fit utilities "line-height": ( property: line-height, class: lh, values: ( 1: 1, - sm: 1.25, // OUDS mod: instead of `$line-height-sm` - base: 1.5, // OUDS mod: instead of `$line-height-base` - lg: 2, // OUDS mod: instead of `$line-height-lg` - ) - ), - "line-length": ( - property: max-width, - class: ll, - values: ( - sm: $line-length-sm, - md: $line-length-md, - ) + sm: $line-height-sm, + base: $line-height-base, + lg: $line-height-lg, + ), + bootstrap-compatibility: true ), "text-align": ( responsive: true, @@ -953,6 +947,18 @@ $utilities: map-merge( rtl: false ), // scss-docs-end utils-text + // scss-docs-start utils-text-ouds + "font-size-ouds": ( + property: font-size, + class: fs, + values: $ouds-font-sizes + ), + "font-weight-ouds": ( + property: font-weight, + class: fw, + values: $ouds-font-weights + ), + // scss-docs-end utils-text-ouds // scss-docs-start utils-color "color": ( property: color, diff --git a/scss/_variables.scss b/scss/_variables.scss index 8fbaf65bd0..69570045a6 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -444,10 +444,7 @@ $enable-bootstrap-compatibility: false !default; // OUDS mod: used to enforce B $enable-dark-mode: true !default; $color-mode-type: data !default; // `data` or `media-query` -// Prefix for :root CSS variables - -$variable-prefix: bs- !default; // Deprecated in Bootstrap v5.2.0 for the shorter `$prefix` -$prefix: $variable-prefix !default; +// Prefix for :root CSS variables has been moved to `_config.scss` // Gradient // @@ -714,52 +711,46 @@ $aspect-ratios: ( // Font, line-height, and color for body text, headings, and more. // scss-docs-start font-variables -// stylelint-disable value-keyword-case -$font-family-sans-serif: "Helvetica Neue", Helvetica, "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; -$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; -// stylelint-enable value-keyword-case +$font-family-sans-serif: $ouds-font-family-sans-serif-stack !default; +$font-family-monospace: $ouds-font-family-monospace-stack !default; $font-family-base: var(--#{$prefix}font-sans-serif) !default; $font-family-code: var(--#{$prefix}font-monospace) !default; // OUDS mod //// Type scale & vertical rhythm completely revamped to match Orange Web Guidelines - +// TODO LM: Check for spacings // $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings and margins // $font-size-base affects the font size of the body text $font-size-root: null !default; -$font-size-base: 1rem !default; // Assumes the browser default, typically `16px` -$font-size-sm: $font-size-base * .875 !default; // 14px -$font-size-lg: $font-size-base * 1.125 !default; // 18px -$font-size-xlg: $font-size-base * 1.25 !default; // 20px +$font-size-base: var(--#{$prefix}font-size-body-medium) !default; // Assumes the browser default, typically `16px` +$font-size-sm: var(--#{$prefix}font-size-body-small) !default; // 14px +$font-size-lg: var(--#{$prefix}font-size-body-large) !default; // 18px $font-weight-lighter: null !default; $font-weight-light: null !default; -$font-weight-normal: 400 !default; -$font-weight-medium: 500 !default; -$font-weight-semibold: 600 !default; -$font-weight-bold: 700 !default; +$font-weight-normal: $ouds-font-weight-web-default !default; +$font-weight-medium: null !default; +$font-weight-semibold: null !default; +$font-weight-bold: $ouds-font-weight-web-strong !default; $font-weight-bolder: null !default; $font-weight-base: $font-weight-normal !default; -// stylelint-disable function-disallowed-list -$line-height-base: calc(18 / 16) !default; -$line-height-sm: calc(16 / 14) !default; -$line-height-lg: calc(30 / 16) !default; -// stylelint-enable function-disallowed-list +$line-height-base: var(--#{$prefix}font-line-height-body-medium) !default; +$line-height-sm: var(--#{$prefix}font-line-height-body-small) !default; +$line-height-lg: var(--#{$prefix}font-line-height-body-large) !default; -$line-length-sm: 40ch !default; -$line-length-md: 80ch !default; +$letter-spacing-base: var(--#{$prefix}font-letter-spacing-body-medium) !default; +// $letter-spacing-sm: var(--#{$prefix}font-letter-spacing-body-small) !default; +$letter-spacing-lg: var(--#{$prefix}font-letter-spacing-body-large) !default; -$letter-spacing-base: $spacer * -.005 !default; // -0.1px - -$h1-font-size: $font-size-base * 2.125 !default; // 34px -$h2-font-size: $font-size-base * 1.875 !default; // 30px -$h3-font-size: $font-size-base * 1.5 !default; // 24px -$h4-font-size: $font-size-xlg !default; // 20px -$h5-font-size: $font-size-lg !default; // 18px -$h6-font-size: $font-size-base !default; // 16px +$h1-font-size: var(--#{$prefix}font-size-heading-xlarge) !default; +$h2-font-size: var(--#{$prefix}font-size-heading-large) !default; +$h3-font-size: var(--#{$prefix}font-size-heading-medium) !default; +$h4-font-size: var(--#{$prefix}font-size-heading-small) !default; +$h5-font-size: var(--#{$prefix}font-size-body-large) !default; +$h6-font-size: var(--#{$prefix}font-size-body-medium) !default; // scss-docs-end font-variables // scss-docs-start font-sizes @@ -773,55 +764,35 @@ $font-sizes: ( ) !default; // scss-docs-end font-sizes -// scss-docs-start letter-spacing -$h1-spacing: $letter-spacing-base * 10 !default; // -1px -$h2-spacing: $letter-spacing-base * 8 !default; // -0.8px -$mid-spacing: $letter-spacing-base * 6 !default; // -0.6px -$h3-spacing: $letter-spacing-base * 5 !default; // -0.5px -$h4-spacing: $letter-spacing-base * 4 !default; // -0.4px -$h5-spacing: $letter-spacing-base * 2 !default; // -0.2px -$h6-spacing: $letter-spacing-base !default; -// scss-docs-end letter-spacing - -// stylelint-disable function-disallowed-list -// scss-docs-start line-height -$h1-line-height: 1 !default; -$h2-line-height: calc(32 / 30) !default; -$h3-line-height: calc(26 / 24) !default; -$h4-line-height: calc(22 / 20) !default; -$h5-line-height: calc(20 / 18) !default; -$h6-line-height: $line-height-base !default; -// scss-docs-end line-height -// stylelint-enable function-disallowed-list - // scss-docs-start headings-variables $headings-margin-bottom: $spacer !default; // OUDS mod $headings-font-family: null !default; $headings-font-style: null !default; -$headings-font-weight: 700 !default; -$headings-line-height: $h6-line-height !default; +$headings-font-weight: $ouds-font-weight-web-heading !default; +$headings-line-height: null !default; $headings-color: inherit !default; // scss-docs-end headings-variables // scss-docs-start display-headings -$display1-size: $font-size-xlg * 3 !default; // 60px -$display2-size: $font-size-xlg * 2.5 !default; // 50px -$display3-size: $font-size-xlg * 2 !default; // 40px -$display4-size: $h1-font-size !default; // 34px -$display1-spacing: $letter-spacing-base * 20 !default; // -2px -$display2-spacing: $letter-spacing-base * 16 !default; // -1.6px -$display3-spacing: $h1-spacing !default; // -1px -$display4-spacing: $h1-spacing !default; // -1px -$display-line-height: $h1-line-height !default; +$display-font-sizes: ( + 1: "%display-large", + 2: "%display-medium", + 3: "%display-small" +) !default; + +$display-font-family: null !default; +$display-font-style: null !default; +$display-font-weight: $ouds-font-weight-web-display !default; +$display-line-height: $headings-line-height !default; // scss-docs-end display-headings // scss-docs-start type-variables -$lead-font-size: $font-size-xlg !default; -$lead-font-weight: 400 !default; -$lead-line-height: 1.5 !default; -$lead-letter-spacing: $letter-spacing-base * 4 !default; +$lead-font-size: $h5-font-size !default; +$lead-font-weight: $ouds-font-weight-web-body-default !default; +// $lead-line-height: $line-height-lg !default; +// $lead-letter-spacing: $letter-spacing-lg !default; -$small-font-size: .875rem !default; +$small-font-size: .875em !default; $sub-sup-font-size: .75em !default; @@ -832,11 +803,9 @@ $text-muted: var(--#{$prefix}secondary-color) !default; // Depr $initialism-font-size: $small-font-size !default; $blockquote-margin-y: $spacer !default; -$blockquote-font-size: $font-size-xlg !default; +// $blockquote-font-size: $font-size-lg !default; $blockquote-footer-color: var(--#{$prefix}secondary-color) !default; // OUDS mod: instead of `$gray-600` -$blockquote-footer-font-size: $small-font-size !default; -$blockquote-line-height: 1.5 !default; // OUDS mod -$blockquote-letter-spacing: $letter-spacing-base * .25 !default; // OUDS mod +// $blockquote-footer-font-size: $small-font-size !default; $hr-margin-y: $spacer !default; $hr-color: inherit !default; @@ -855,14 +824,14 @@ $vr-border-width: 2px !default; // OUDS mod: instead of `var(--#{$pr // scss-docs-end vr-variables $legend-margin-bottom: $spacer * .25 !default; -$legend-font-size: $font-size-xlg !default; +// $legend-font-size: $font-size-lg !default; $legend-font-weight: $font-weight-bold !default; $dt-font-weight: $font-weight-bold !default; $list-inline-padding: $spacer * .25 !default; -$mark-padding: 0 .1875em !default; // OUDS mod +$mark-padding: .125em .1875em !default; // OUDS mod $mark-color: $white !default; // OUDS mod: instead of `$body-color` $mark-bg: $black !default; // OUDS mod: instead of `$yellow-100` // scss-docs-end type-variables @@ -989,8 +958,8 @@ $btn-letter-spacing-sm: $letter-spacing-base !default; // OUDS mod $btn-padding-y-lg: $input-btn-padding-y-lg !default; $btn-padding-x-lg: $input-btn-padding-x-lg !default; $btn-font-size-lg: $input-btn-font-size-lg !default; -$btn-line-height-lg: $h5-line-height !default; // OUDS mod -$btn-letter-spacing-lg: $letter-spacing-base * 2 !default; // OUDS mod +$btn-line-height-lg: var(--#{$prefix}font-line-height-body-large) !default; // OUDS mod +$btn-letter-spacing-lg: calc(#{$letter-spacing-base} * 2) !default; // stylelint-disable-line function-disallowed-list $btn-border-width: $input-btn-border-width !default; @@ -1106,7 +1075,7 @@ $form-text-color: var(--#{$prefix}secondary-color) !defaul $form-label-margin-bottom: .5rem !default; // OUDS mod $form-label-font-size: null !default; $form-label-font-style: null !default; -$form-label-font-weight: $font-weight-bold !default; +$form-label-font-weight: null !default; $form-label-color: null !default; $form-label-disabled-color: var(--#{$prefix}disabled-color) !default; // OUDS mod $form-label-required-margin-left: .1875rem !default; // OUDS mod @@ -1118,7 +1087,7 @@ $form-helper-size: 1.25rem !default; // OUDS mod $form-helper-color: var(--#{$prefix}info) !default; // OUDS mod $form-helper-bg: var(--#{$prefix}highlight-color) !default; // OUDS mod $form-helper-icon: escape-svg($helper-icon) !default; // OUDS mod -$form-helper-label-margin-bottom: $form-label-margin-bottom - divide(($form-helper-size - $font-size-base), 2) !default; // OUDS mod +$form-helper-label-margin-bottom: $form-label-margin-bottom - divide(($form-helper-size - 1rem), 2) !default; // OUDS mod // scss-docs-end form-helper-variables // scss-docs-start form-input-variables @@ -1169,7 +1138,7 @@ $input-height-inner-quarter: map-get($spacers, 2) !default; // OUDS m $input-height: 2.5rem !default; $input-height-sm: 1.875rem !default; $input-height-lg: 3.125rem !default; -$input-line-height-lg: $h5-line-height !default; // OUDS mod +$input-line-height-lg: var(--#{$prefix}font-line-height-body-large) !default; // OUDS mod $input-transition: border-color $transition-duration $transition-timing, $transition-focus !default; @@ -1184,7 +1153,7 @@ $form-color-disabled-filter: brightness(0) invert(1) brightness(.8) ! // scss-docs-start form-check-variables $form-check-input-width: 1em !default; -$form-check-min-height: $font-size-base * $input-btn-line-height !default; +$form-check-min-height: calc(#{$font-size-base} * #{$input-btn-line-height}) !default; // stylelint-disable-line function-disallowed-list $form-check-padding-start: $form-check-input-width + .5em !default; $form-check-margin-bottom: .125rem !default; $form-check-label-padding-top: .4375rem !default; // OUDS mod @@ -1538,15 +1507,15 @@ $navbar-border-color: var(--#{$prefix}border-color-subtle) $navbar-brand-margin-y-xs: $spacer * .5 !default; $navbar-brand-logo-size-xs: $spacer * 1.5 !default; $navbar-brand-font-size-xs: 1.3125rem !default; -$navbar-brand-letter-spacing-xs: $letter-spacing-base * 5 !default; +$navbar-brand-letter-spacing-xs: calc(#{$letter-spacing-base} * 5) !default; // stylelint-disable-line function-disallowed-list $navbar-brand-font-size-two-lined-xs: 1.0625rem !default; -$navbar-brand-letter-spacing-two-lined-xs: $letter-spacing-base * 4 !default; +$navbar-brand-letter-spacing-two-lined-xs: calc(#{$letter-spacing-base} * 4) !default; // stylelint-disable-line function-disallowed-list $navbar-brand-margin-y: $spacer * .95 !default; $navbar-brand-logo-size: $spacer * 2.5 !default; -$navbar-brand-letter-spacing: $letter-spacing-base * 10 !default; +$navbar-brand-letter-spacing: calc(#{$letter-spacing-base} * 10) !default; // stylelint-disable-line function-disallowed-list $navbar-brand-font-size-two-lined: 1.8125rem !default; -$navbar-brand-letter-spacing-two-lined: $letter-spacing-base * 8 !default; +$navbar-brand-letter-spacing-two-lined: calc(#{$letter-spacing-base} * 8) !default; // stylelint-disable-line function-disallowed-list $navbar-icon-size-xs: $spacer * 1.25 !default; $navbar-icon-size: $spacer * 1.5 !default; @@ -1790,13 +1759,13 @@ $accordion-icon-transform: scaleY(-1) !default; $accordion-button-font-size: $h3-font-size !default; $accordion-button-line-height: null !default; $accordion-button-font-weight: $font-weight-bold !default; -$accordion-button-letter-spacing: $h3-spacing !default; +$accordion-button-letter-spacing: var(--#{$prefix}font-letter-spacing-heading-medium) !default; $accordion-button-font-size-sm: $h5-font-size !default; -$accordion-button-line-height-sm: $h5-line-height !default; -$accordion-button-letter-spacing-sm: $h5-spacing !default; +$accordion-button-line-height-sm: var(--#{$prefix}font-line-height-body-large) !default; +$accordion-button-letter-spacing-sm: var(--#{$prefix}font-letter-spacing-body-large) !default; $accordion-button-font-size-lg: $h2-font-size !default; $accordion-button-line-height-lg: calc(40 / 30) !default; // stylelint-disable-line function-disallowed-list -$accordion-button-letter-spacing-lg: $h2-spacing !default; +$accordion-button-letter-spacing-lg: var(--#{$prefix}font-letter-spacing-heading-large) !default; // End mod // scss-docs-end accordion-variables @@ -2091,15 +2060,9 @@ $title-bar-image-ratio: 1.8em !default; $title-bar-padding-y: .3333333em !default; $title-bar-font-size: $h2-font-size !default; $title-bar-line-height: $display-line-height !default; -$title-bar-letter-spacing: $h2-spacing !default; +$title-bar-letter-spacing: var(--#{$prefix}font-letter-spacing-heading-large) !default; $title-bar-border-width: calc(var(--#{$prefix}border-width) * .5) !default; // stylelint-disable-line function-disallowed-list $title-bar-border-color: var(--#{$prefix}border-color-subtle) !default; - -$title-bar-font-size-md: $display2-size !default; -$title-bar-letter-spacing-md: $display2-spacing !default; - -$title-bar-font-size-xl: $display1-size !default; -$title-bar-letter-spacing-xl: $display1-spacing !default; // scss-docs-end title-bars-variables // End mod @@ -2252,18 +2215,17 @@ $offcanvas-backdrop-opacity: $modal-backdrop-opacity !default; // Code // OUDS mod -$code-font-size: .875em !default; -$code-color: $gray-700 !default; +$code-font-size: $small-font-size !default; +$code-color: $gray-700 !default; // instead of `$pink` -$kbd-padding-y: $spacer * .05 !default; -$kbd-padding-x: $spacer * .05 !default; +$kbd-padding-y: px-to-rem($ouds-space-fixed-smash) !default; // instead of `.1875rem` +$kbd-padding-x: px-to-rem($ouds-space-fixed-shortest) !default; // instead of `.375rem` $kbd-font-size: $code-font-size !default; -$kbd-color: var(--#{$prefix}kbd-color, $black) !default; -$kbd-bg: var(--#{$prefix}kbd-bg, $gray-300) !default; +$kbd-color: var(--#{$prefix}body-bg) !default; +$kbd-bg: var(--#{$prefix}body-color) !default; $nested-kbd-font-weight: null !default; // Deprecated in Bootstrap v5.2.0, removing in v6 -$pre-color: var(--#{$prefix}code-color) !default; -$pre-line-height: 1.25 !default; +$pre-color: var(--#{$prefix}code-color) !default; // instead of `null` // End mod // diff --git a/scss/forms/_input-group.scss b/scss/forms/_input-group.scss index cf077bf762..a8da772305 100644 --- a/scss/forms/_input-group.scss +++ b/scss/forms/_input-group.scss @@ -71,7 +71,7 @@ .input-group-lg > .input-group-text, .input-group-lg > .btn { padding: $input-padding-y-lg $input-padding-x-lg; - line-height: $h5-line-height; // OUDS mod + line-height: var(--#{$prefix}font-line-height-body-large); // OUDS mod @include font-size($input-font-size-lg); @include border-radius($input-border-radius-lg); } diff --git a/scss/mixins/_utilities.scss b/scss/mixins/_utilities.scss index 0b097acb68..0412d11244 100644 --- a/scss/mixins/_utilities.scss +++ b/scss/mixins/_utilities.scss @@ -55,30 +55,23 @@ /* rtl:begin:remove */ } - @if $is-css-var { + @if type-of($value) == "string" and str-slice($value, 1, 1) == "%" { .#{$property-class + $infix + $property-class-modifier} { - --#{$prefix}#{$css-variable-name}: #{$value}; + @extend #{$value}; } - - @each $pseudo in $state { - .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} { + } @else { + @if $is-css-var { + .#{$property-class + $infix + $property-class-modifier} { --#{$prefix}#{$css-variable-name}: #{$value}; } - } - } @else { - .#{$property-class + $infix + $property-class-modifier} { - @each $property in $properties { - @if $is-local-vars { - @each $local-var, $variable in $is-local-vars { - --#{$prefix}#{$local-var}: #{$variable}; - } + + @each $pseudo in $state { + .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} { + --#{$prefix}#{$css-variable-name}: #{$value}; } - #{$property}: $value if($enable-important-utilities, !important, null); } - } - - @each $pseudo in $state { - .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} { + } @else { + .#{$property-class + $infix + $property-class-modifier} { @each $property in $properties { @if $is-local-vars { @each $local-var, $variable in $is-local-vars { @@ -88,11 +81,24 @@ #{$property}: $value if($enable-important-utilities, !important, null); } } + + @each $pseudo in $state { + .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} { + @each $property in $properties { + @if $is-local-vars { + @each $local-var, $variable in $is-local-vars { + --#{$prefix}#{$local-var}: #{$variable}; + } + } + #{$property}: $value if($enable-important-utilities, !important, null); + } + } + } } - } - @if $is-rtl == false { - /* rtl:end:remove */ + @if $is-rtl == false { + /* rtl:end:remove */ + } } } } diff --git a/scss/ouds-web-grid.scss b/scss/ouds-web-grid.scss index bf06302c33..beaf99bcb4 100644 --- a/scss/ouds-web-grid.scss +++ b/scss/ouds-web-grid.scss @@ -3,6 +3,7 @@ $include-column-box-sizing: true !default; +@import "config"; @import "functions"; @import "tokens/raw"; @import "tokens/semantic"; diff --git a/scss/ouds-web-reboot.scss b/scss/ouds-web-reboot.scss index 6ea8a0e0cf..87ccf77697 100644 --- a/scss/ouds-web-reboot.scss +++ b/scss/ouds-web-reboot.scss @@ -1,6 +1,7 @@ @import "mixins/banner"; @include bsBanner(Reboot); +@import "config"; @import "functions"; @import "tokens/raw"; @import "tokens/semantic"; diff --git a/scss/ouds-web-utilities.scss b/scss/ouds-web-utilities.scss index 9a486fd651..6306a740b0 100644 --- a/scss/ouds-web-utilities.scss +++ b/scss/ouds-web-utilities.scss @@ -2,6 +2,7 @@ @include bsBanner(Utilities); // Configuration +@import "config"; @import "functions"; @import "tokens/raw"; @import "tokens/semantic"; diff --git a/scss/ouds-web.scss b/scss/ouds-web.scss index 4a46128b80..5fa3b97827 100644 --- a/scss/ouds-web.scss +++ b/scss/ouds-web.scss @@ -3,6 +3,7 @@ // scss-docs-start import-stack // Configuration +@import "config"; @import "functions"; @import "tokens/raw"; @import "tokens/semantic"; diff --git a/scss/tests/customize/_ouds-web-bootstrap-grid.test.scss b/scss/tests/customize/_ouds-web-bootstrap-grid.test.scss new file mode 100644 index 0000000000..7aaeaad632 --- /dev/null +++ b/scss/tests/customize/_ouds-web-bootstrap-grid.test.scss @@ -0,0 +1,5728 @@ +// stylelint-disable no-duplicate-at-import-rules + +$enable-bootstrap-compatibility: null !default; + +@include describe("customize/ouds-web-bootstrap") { + @include it("generates only OUDS containers") { + $enable-bootstrap-compatibility: false !global; + @import "../../config"; + @import "../../functions"; + @import "../../tokens/raw"; + @import "../../tokens/semantic"; + @import "../../tokens/composite"; + @import "../../tokens/component"; + @import "../../variables"; + @import "../../maps"; + @import "../../mixins"; + + @include assert() { + @include output() { + @import "../../containers"; + } + @include expect() { + .container-fluid { + width: 100%; + padding-right: var(--bs-container-margin-x); + padding-left: var(--bs-container-margin-x); + margin-right: auto; + margin-left: auto; + --bs-container-margin-x: 16px; + } + + @media (min-width: 390px) { + .container-fluid { + --bs-container-margin-x: 24px; + } + } + + @media (min-width: 480px) { + .container-fluid { + --bs-container-margin-x: 28px; + } + } + + @media (min-width: 736px) { + .container-fluid { + --bs-container-margin-x: 32px; + } + } + + @media (min-width: 1024px) { + .container-fluid { + --bs-container-margin-x: 40px; + } + } + + @media (min-width: 1320px) { + .container-fluid { + --bs-container-margin-x: 56px; + } + } + + @media (min-width: 1640px) { + .container-fluid { + --bs-container-margin-x: 80px; + } + } + + @media (min-width: 1880px) { + .container-fluid { + --bs-container-margin-x: 112px; + } + } + + @media (min-width: 1640px) { + .container-max-width { + --bs-container-margin-x: 80px; + max-width: 1680px; + } + + .container-max-width .row { + --bs-gutter-x: 32px; + } + } + } + } + } + + @include it("generates OUDS and Bootstrap containers") { + $enable-bootstrap-compatibility: true !global; + @import "../../config"; + @import "../../functions"; + @import "../../tokens/raw"; + @import "../../tokens/semantic"; + @import "../../tokens/composite"; + @import "../../tokens/component"; + @import "../../variables"; + @import "../../maps"; + @import "../../mixins"; + + @include assert() { + @include output() { + @import "../../containers"; + } + @include expect() { + .container-fluid, + .container-3xl, + .container-2xl, + .container-xxl, + .container-xl, + .container-lg, + .container-md, + .container-sm, + .container-xs { + width: 100%; + padding-right: var(--bs-container-margin-x); + padding-left: var(--bs-container-margin-x); + margin-right: auto; + margin-left: auto; + --bs-container-margin-x: 16px; + } + + @media (min-width: 390px) { + .container-fluid, + .container-3xl, + .container-2xl, + .container-xxl, + .container-xl, + .container-lg, + .container-md, + .container-sm, + .container-xs { + --bs-container-margin-x: 24px; + } + } + + @media (min-width: 480px) { + .container-fluid, + .container-3xl, + .container-2xl, + .container-xxl, + .container-xl, + .container-lg, + .container-md, + .container-sm, + .container-xs { + --bs-container-margin-x: 28px; + } + } + + @media (min-width: 736px) { + .container-fluid, + .container-3xl, + .container-2xl, + .container-xxl, + .container-xl, + .container-lg, + .container-md, + .container-sm, + .container-xs { + --bs-container-margin-x: 32px; + } + } + + @media (min-width: 1024px) { + .container-fluid, + .container-3xl, + .container-2xl, + .container-xxl, + .container-xl, + .container-lg, + .container-md, + .container-sm, + .container-xs { + --bs-container-margin-x: 40px; + } + } + + @media (min-width: 1320px) { + .container-fluid, + .container-3xl, + .container-2xl, + .container-xxl, + .container-xl, + .container-lg, + .container-md, + .container-sm, + .container-xs { + --bs-container-margin-x: 56px; + } + } + + @media (min-width: 1640px) { + .container-fluid, + .container-3xl, + .container-2xl, + .container-xxl, + .container-xl, + .container-lg, + .container-md, + .container-sm, + .container-xs { + --bs-container-margin-x: 80px; + } + } + + @media (min-width: 1880px) { + .container-fluid, + .container-3xl, + .container-2xl, + .container-xxl, + .container-xl, + .container-lg, + .container-md, + .container-sm, + .container-xs { + --bs-container-margin-x: 112px; + } + } + + .container { + width: 100%; + padding-right: var(--bs-container-margin-x); + padding-left: var(--bs-container-margin-x); + margin-right: auto; + margin-left: auto; + --bs-container-margin-x: 16px; + } + + @media (min-width: 390px) { + .container { + --bs-container-margin-x: 24px; + } + } + + @media (min-width: 480px) { + .container { + --bs-container-margin-x: 28px; + } + } + + @media (min-width: 736px) { + .container { + --bs-container-margin-x: 32px; + } + } + + @media (min-width: 1024px) { + .container { + --bs-container-margin-x: 40px; + } + } + + @media (min-width: 1320px) { + .container { + --bs-container-margin-x: 56px; + } + } + + @media (min-width: 1640px) { + .container { + --bs-container-margin-x: 80px; + } + } + + @media (min-width: 1880px) { + .container { + --bs-container-margin-x: 112px; + } + } + + @media (min-width: 390px) { + .container-xs, + .container { + max-width: 390px; + } + } + + @media (min-width: 480px) { + .container-sm, + .container-xs, + .container { + max-width: 480px; + } + } + + @media (min-width: 736px) { + .container-md, + .container-sm, + .container-xs, + .container { + max-width: 736px; + } + } + + @media (min-width: 1024px) { + .container-lg, + .container-md, + .container-sm, + .container-xs, + .container { + max-width: 1024px; + } + } + + @media (min-width: 1320px) { + .container-xl, + .container-lg, + .container-md, + .container-sm, + .container-xs, + .container { + max-width: 1320px; + } + } + + @media (min-width: 1640px) { + .container-2xl, + .container-xxl, + .container-xl, + .container-lg, + .container-md, + .container-sm, + .container-xs, + .container { + max-width: 1640px; + } + } + + @media (min-width: 1880px) { + .container-3xl, + .container-2xl, + .container-xxl, + .container-xl, + .container-lg, + .container-md, + .container-sm, + .container-xs, + .container { + max-width: 1880px; + } + } + + @media (min-width: 1640px) { + .container-max-width { + --bs-container-margin-x: 80px; + max-width: 1680px; + } + + .container-max-width .row { + --bs-gutter-x: 32px; + } + } + } + } + } + + @include it("generates only OUDS grid classes") { + $enable-bootstrap-compatibility: false !global; + @import "../../config"; + @import "../../functions"; + @import "../../tokens/raw"; + @import "../../tokens/semantic"; + @import "../../tokens/composite"; + @import "../../tokens/component"; + @import "../../variables"; + @import "../../maps"; + @import "../../mixins"; + + @include assert() { + @include output() { + @import "../../grid"; + } + @include expect() { + :root { + --bs-breakpoint-2xs: 0; + --bs-breakpoint-xs: 390px; + --bs-breakpoint-sm: 480px; + --bs-breakpoint-md: 736px; + --bs-breakpoint-lg: 1024px; + --bs-breakpoint-xl: 1320px; + --bs-breakpoint-2xl: 1640px; + --bs-breakpoint-3xl: 1880px; + } + + .row { + --bs-gutter-y: 0; + display: flex; + flex-wrap: wrap; + margin-top: calc(-1 * var(--bs-gutter-y)); // stylelint-disable-line function-disallowed-list + margin-right: calc(-0.5 * var(--bs-gutter-x)); // stylelint-disable-line function-disallowed-list, @stylistic/number-leading-zero + margin-left: calc(-0.5 * var(--bs-gutter-x)); // stylelint-disable-line function-disallowed-list, @stylistic/number-leading-zero + --bs-gutter-x: 8px; + } + + @media (min-width: 390px) { + .row { + --bs-gutter-x: 16px; + } + } + + @media (min-width: 480px) { + .row { + --bs-gutter-x: 16px; + } + } + + @media (min-width: 736px) { + .row { + --bs-gutter-x: 24px; + } + } + + @media (min-width: 1024px) { + .row { + --bs-gutter-x: 24px; + } + } + + @media (min-width: 1320px) { + .row { + --bs-gutter-x: 32px; + } + } + + @media (min-width: 1640px) { + .row { + --bs-gutter-x: 32px; + } + } + + @media (min-width: 1880px) { + .row { + --bs-gutter-x: 40px; + } + } + + .row > * { + flex-shrink: 0; + width: 100%; + max-width: 100%; + padding-right: calc(var(--bs-gutter-x) * 0.5); // stylelint-disable-line function-disallowed-list, @stylistic/number-leading-zero + padding-left: calc(var(--bs-gutter-x) * 0.5); // stylelint-disable-line function-disallowed-list, @stylistic/number-leading-zero + margin-top: var(--bs-gutter-y); + } + + .col { + flex: 1 0 0%; + } + + .row-cols-auto > * { + flex: 0 0 auto; + width: auto; + } + + .row-cols-1 > * { + flex: 0 0 auto; + width: 100%; + } + + .row-cols-2 > * { + flex: 0 0 auto; + width: 50%; + } + + .row-cols-3 > * { + flex: 0 0 auto; + width: 33.33333333%; + } + + .row-cols-4 > * { + flex: 0 0 auto; + width: 25%; + } + + .row-cols-5 > * { + flex: 0 0 auto; + width: 20%; + } + + .row-cols-6 > * { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-auto { + flex: 0 0 auto; + width: auto; + } + + .col-1 { + flex: 0 0 auto; + width: 8.33333333%; + } + + .col-2 { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-3 { + flex: 0 0 auto; + width: 25%; + } + + .col-4 { + flex: 0 0 auto; + width: 33.33333333%; + } + + .col-5 { + flex: 0 0 auto; + width: 41.66666667%; + } + + .col-6 { + flex: 0 0 auto; + width: 50%; + } + + .col-7 { + flex: 0 0 auto; + width: 58.33333333%; + } + + .col-8 { + flex: 0 0 auto; + width: 66.66666667%; + } + + .col-9 { + flex: 0 0 auto; + width: 75%; + } + + .col-10 { + flex: 0 0 auto; + width: 83.33333333%; + } + + .col-11 { + flex: 0 0 auto; + width: 91.66666667%; + } + + .col-12 { + flex: 0 0 auto; + width: 100%; + } + + .offset-1 { + margin-left: 8.33333333%; + } + + .offset-2 { + margin-left: 16.66666667%; + } + + .offset-3 { + margin-left: 25%; + } + + .offset-4 { + margin-left: 33.33333333%; + } + + .offset-5 { + margin-left: 41.66666667%; + } + + .offset-6 { + margin-left: 50%; + } + + .offset-7 { + margin-left: 58.33333333%; + } + + .offset-8 { + margin-left: 66.66666667%; + } + + .offset-9 { + margin-left: 75%; + } + + .offset-10 { + margin-left: 83.33333333%; + } + + .offset-11 { + margin-left: 91.66666667%; + } + + .g-none, + .gx-none { + --bs-gutter-x: 0 !important; + } + + .g-none, + .gy-none { + --bs-gutter-y: 0 !important; + } + + .g-smash, + .gx-smash { + --bs-gutter-x: 2px !important; + } + + .g-smash, + .gy-smash { + --bs-gutter-y: 2px !important; + } + + .g-shortest, + .gx-shortest { + --bs-gutter-x: 4px !important; + } + + .g-shortest, + .gy-shortest { + --bs-gutter-y: 4px !important; + } + + .g-shorter, + .gx-shorter { + --bs-gutter-x: 8px !important; + } + + .g-shorter, + .gy-shorter { + --bs-gutter-y: 8px !important; + } + + .g-short, + .gx-short { + --bs-gutter-x: 12px !important; + } + + .g-short, + .gy-short { + --bs-gutter-y: 12px !important; + } + + .g-medium, + .gx-medium { + --bs-gutter-x: 16px !important; + } + + .g-medium, + .gy-medium { + --bs-gutter-y: 16px !important; + } + + .g-tall, + .gx-tall { + --bs-gutter-x: 24px !important; + } + + .g-tall, + .gy-tall { + --bs-gutter-y: 24px !important; + } + + .g-taller, + .gx-taller { + --bs-gutter-x: 32px !important; + } + + .g-taller, + .gy-taller { + --bs-gutter-y: 32px !important; + } + + .g-tallest, + .gx-tallest { + --bs-gutter-x: 40px !important; + } + + .g-tallest, + .gy-tallest { + --bs-gutter-y: 40px !important; + } + + .g-spacious, + .gx-spacious { + --bs-gutter-x: 48px !important; + } + + .g-spacious, + .gy-spacious { + --bs-gutter-y: 48px !important; + } + + .g-huge, + .gx-huge { + --bs-gutter-x: 56px !important; + } + + .g-huge, + .gy-huge { + --bs-gutter-y: 56px !important; + } + + .g-jumbo, + .gx-jumbo { + --bs-gutter-x: 64px !important; + } + + .g-jumbo, + .gy-jumbo { + --bs-gutter-y: 64px !important; + } + + @media (min-width: 390px) { + .col-xs { + flex: 1 0 0%; + } + + .row-cols-xs-auto > * { + flex: 0 0 auto; + width: auto; + } + + .row-cols-xs-1 > * { + flex: 0 0 auto; + width: 100%; + } + + .row-cols-xs-2 > * { + flex: 0 0 auto; + width: 50%; + } + + .row-cols-xs-3 > * { + flex: 0 0 auto; + width: 33.33333333%; + } + + .row-cols-xs-4 > * { + flex: 0 0 auto; + width: 25%; + } + + .row-cols-xs-5 > * { + flex: 0 0 auto; + width: 20%; + } + + .row-cols-xs-6 > * { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-xs-auto { + flex: 0 0 auto; + width: auto; + } + + .col-xs-1 { + flex: 0 0 auto; + width: 8.33333333%; + } + + .col-xs-2 { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-xs-3 { + flex: 0 0 auto; + width: 25%; + } + + .col-xs-4 { + flex: 0 0 auto; + width: 33.33333333%; + } + + .col-xs-5 { + flex: 0 0 auto; + width: 41.66666667%; + } + + .col-xs-6 { + flex: 0 0 auto; + width: 50%; + } + + .col-xs-7 { + flex: 0 0 auto; + width: 58.33333333%; + } + + .col-xs-8 { + flex: 0 0 auto; + width: 66.66666667%; + } + + .col-xs-9 { + flex: 0 0 auto; + width: 75%; + } + + .col-xs-10 { + flex: 0 0 auto; + width: 83.33333333%; + } + + .col-xs-11 { + flex: 0 0 auto; + width: 91.66666667%; + } + + .col-xs-12 { + flex: 0 0 auto; + width: 100%; + } + + .offset-xs-0 { + margin-left: 0; + } + + .offset-xs-1 { + margin-left: 8.33333333%; + } + + .offset-xs-2 { + margin-left: 16.66666667%; + } + + .offset-xs-3 { + margin-left: 25%; + } + + .offset-xs-4 { + margin-left: 33.33333333%; + } + + .offset-xs-5 { + margin-left: 41.66666667%; + } + + .offset-xs-6 { + margin-left: 50%; + } + + .offset-xs-7 { + margin-left: 58.33333333%; + } + + .offset-xs-8 { + margin-left: 66.66666667%; + } + + .offset-xs-9 { + margin-left: 75%; + } + + .offset-xs-10 { + margin-left: 83.33333333%; + } + + .offset-xs-11 { + margin-left: 91.66666667%; + } + + .g-xs-none, + .gx-xs-none { + --bs-gutter-x: 0 !important; + } + + .g-xs-none, + .gy-xs-none { + --bs-gutter-y: 0 !important; + } + + .g-xs-smash, + .gx-xs-smash { + --bs-gutter-x: 2px !important; + } + + .g-xs-smash, + .gy-xs-smash { + --bs-gutter-y: 2px !important; + } + + .g-xs-shortest, + .gx-xs-shortest { + --bs-gutter-x: 4px !important; + } + + .g-xs-shortest, + .gy-xs-shortest { + --bs-gutter-y: 4px !important; + } + + .g-xs-shorter, + .gx-xs-shorter { + --bs-gutter-x: 8px !important; + } + + .g-xs-shorter, + .gy-xs-shorter { + --bs-gutter-y: 8px !important; + } + + .g-xs-short, + .gx-xs-short { + --bs-gutter-x: 12px !important; + } + + .g-xs-short, + .gy-xs-short { + --bs-gutter-y: 12px !important; + } + + .g-xs-medium, + .gx-xs-medium { + --bs-gutter-x: 16px !important; + } + + .g-xs-medium, + .gy-xs-medium { + --bs-gutter-y: 16px !important; + } + + .g-xs-tall, + .gx-xs-tall { + --bs-gutter-x: 24px !important; + } + + .g-xs-tall, + .gy-xs-tall { + --bs-gutter-y: 24px !important; + } + + .g-xs-taller, + .gx-xs-taller { + --bs-gutter-x: 32px !important; + } + + .g-xs-taller, + .gy-xs-taller { + --bs-gutter-y: 32px !important; + } + + .g-xs-tallest, + .gx-xs-tallest { + --bs-gutter-x: 40px !important; + } + + .g-xs-tallest, + .gy-xs-tallest { + --bs-gutter-y: 40px !important; + } + + .g-xs-spacious, + .gx-xs-spacious { + --bs-gutter-x: 48px !important; + } + + .g-xs-spacious, + .gy-xs-spacious { + --bs-gutter-y: 48px !important; + } + + .g-xs-huge, + .gx-xs-huge { + --bs-gutter-x: 56px !important; + } + + .g-xs-huge, + .gy-xs-huge { + --bs-gutter-y: 56px !important; + } + + .g-xs-jumbo, + .gx-xs-jumbo { + --bs-gutter-x: 64px !important; + } + + .g-xs-jumbo, + .gy-xs-jumbo { + --bs-gutter-y: 64px !important; + } + } + + @media (min-width: 480px) { + .col-sm { + flex: 1 0 0%; + } + + .row-cols-sm-auto > * { + flex: 0 0 auto; + width: auto; + } + + .row-cols-sm-1 > * { + flex: 0 0 auto; + width: 100%; + } + + .row-cols-sm-2 > * { + flex: 0 0 auto; + width: 50%; + } + + .row-cols-sm-3 > * { + flex: 0 0 auto; + width: 33.33333333%; + } + + .row-cols-sm-4 > * { + flex: 0 0 auto; + width: 25%; + } + + .row-cols-sm-5 > * { + flex: 0 0 auto; + width: 20%; + } + + .row-cols-sm-6 > * { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-sm-auto { + flex: 0 0 auto; + width: auto; + } + + .col-sm-1 { + flex: 0 0 auto; + width: 8.33333333%; + } + + .col-sm-2 { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-sm-3 { + flex: 0 0 auto; + width: 25%; + } + + .col-sm-4 { + flex: 0 0 auto; + width: 33.33333333%; + } + + .col-sm-5 { + flex: 0 0 auto; + width: 41.66666667%; + } + + .col-sm-6 { + flex: 0 0 auto; + width: 50%; + } + + .col-sm-7 { + flex: 0 0 auto; + width: 58.33333333%; + } + + .col-sm-8 { + flex: 0 0 auto; + width: 66.66666667%; + } + + .col-sm-9 { + flex: 0 0 auto; + width: 75%; + } + + .col-sm-10 { + flex: 0 0 auto; + width: 83.33333333%; + } + + .col-sm-11 { + flex: 0 0 auto; + width: 91.66666667%; + } + + .col-sm-12 { + flex: 0 0 auto; + width: 100%; + } + + .offset-sm-0 { + margin-left: 0; + } + + .offset-sm-1 { + margin-left: 8.33333333%; + } + + .offset-sm-2 { + margin-left: 16.66666667%; + } + + .offset-sm-3 { + margin-left: 25%; + } + + .offset-sm-4 { + margin-left: 33.33333333%; + } + + .offset-sm-5 { + margin-left: 41.66666667%; + } + + .offset-sm-6 { + margin-left: 50%; + } + + .offset-sm-7 { + margin-left: 58.33333333%; + } + + .offset-sm-8 { + margin-left: 66.66666667%; + } + + .offset-sm-9 { + margin-left: 75%; + } + + .offset-sm-10 { + margin-left: 83.33333333%; + } + + .offset-sm-11 { + margin-left: 91.66666667%; + } + + .g-sm-none, + .gx-sm-none { + --bs-gutter-x: 0 !important; + } + + .g-sm-none, + .gy-sm-none { + --bs-gutter-y: 0 !important; + } + + .g-sm-smash, + .gx-sm-smash { + --bs-gutter-x: 2px !important; + } + + .g-sm-smash, + .gy-sm-smash { + --bs-gutter-y: 2px !important; + } + + .g-sm-shortest, + .gx-sm-shortest { + --bs-gutter-x: 4px !important; + } + + .g-sm-shortest, + .gy-sm-shortest { + --bs-gutter-y: 4px !important; + } + + .g-sm-shorter, + .gx-sm-shorter { + --bs-gutter-x: 8px !important; + } + + .g-sm-shorter, + .gy-sm-shorter { + --bs-gutter-y: 8px !important; + } + + .g-sm-short, + .gx-sm-short { + --bs-gutter-x: 12px !important; + } + + .g-sm-short, + .gy-sm-short { + --bs-gutter-y: 12px !important; + } + + .g-sm-medium, + .gx-sm-medium { + --bs-gutter-x: 16px !important; + } + + .g-sm-medium, + .gy-sm-medium { + --bs-gutter-y: 16px !important; + } + + .g-sm-tall, + .gx-sm-tall { + --bs-gutter-x: 24px !important; + } + + .g-sm-tall, + .gy-sm-tall { + --bs-gutter-y: 24px !important; + } + + .g-sm-taller, + .gx-sm-taller { + --bs-gutter-x: 32px !important; + } + + .g-sm-taller, + .gy-sm-taller { + --bs-gutter-y: 32px !important; + } + + .g-sm-tallest, + .gx-sm-tallest { + --bs-gutter-x: 40px !important; + } + + .g-sm-tallest, + .gy-sm-tallest { + --bs-gutter-y: 40px !important; + } + + .g-sm-spacious, + .gx-sm-spacious { + --bs-gutter-x: 48px !important; + } + + .g-sm-spacious, + .gy-sm-spacious { + --bs-gutter-y: 48px !important; + } + + .g-sm-huge, + .gx-sm-huge { + --bs-gutter-x: 56px !important; + } + + .g-sm-huge, + .gy-sm-huge { + --bs-gutter-y: 56px !important; + } + + .g-sm-jumbo, + .gx-sm-jumbo { + --bs-gutter-x: 64px !important; + } + + .g-sm-jumbo, + .gy-sm-jumbo { + --bs-gutter-y: 64px !important; + } + } + + @media (min-width: 736px) { + .col-md { + flex: 1 0 0%; + } + + .row-cols-md-auto > * { + flex: 0 0 auto; + width: auto; + } + + .row-cols-md-1 > * { + flex: 0 0 auto; + width: 100%; + } + + .row-cols-md-2 > * { + flex: 0 0 auto; + width: 50%; + } + + .row-cols-md-3 > * { + flex: 0 0 auto; + width: 33.33333333%; + } + + .row-cols-md-4 > * { + flex: 0 0 auto; + width: 25%; + } + + .row-cols-md-5 > * { + flex: 0 0 auto; + width: 20%; + } + + .row-cols-md-6 > * { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-md-auto { + flex: 0 0 auto; + width: auto; + } + + .col-md-1 { + flex: 0 0 auto; + width: 8.33333333%; + } + + .col-md-2 { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-md-3 { + flex: 0 0 auto; + width: 25%; + } + + .col-md-4 { + flex: 0 0 auto; + width: 33.33333333%; + } + + .col-md-5 { + flex: 0 0 auto; + width: 41.66666667%; + } + + .col-md-6 { + flex: 0 0 auto; + width: 50%; + } + + .col-md-7 { + flex: 0 0 auto; + width: 58.33333333%; + } + + .col-md-8 { + flex: 0 0 auto; + width: 66.66666667%; + } + + .col-md-9 { + flex: 0 0 auto; + width: 75%; + } + + .col-md-10 { + flex: 0 0 auto; + width: 83.33333333%; + } + + .col-md-11 { + flex: 0 0 auto; + width: 91.66666667%; + } + + .col-md-12 { + flex: 0 0 auto; + width: 100%; + } + + .offset-md-0 { + margin-left: 0; + } + + .offset-md-1 { + margin-left: 8.33333333%; + } + + .offset-md-2 { + margin-left: 16.66666667%; + } + + .offset-md-3 { + margin-left: 25%; + } + + .offset-md-4 { + margin-left: 33.33333333%; + } + + .offset-md-5 { + margin-left: 41.66666667%; + } + + .offset-md-6 { + margin-left: 50%; + } + + .offset-md-7 { + margin-left: 58.33333333%; + } + + .offset-md-8 { + margin-left: 66.66666667%; + } + + .offset-md-9 { + margin-left: 75%; + } + + .offset-md-10 { + margin-left: 83.33333333%; + } + + .offset-md-11 { + margin-left: 91.66666667%; + } + + .g-md-none, + .gx-md-none { + --bs-gutter-x: 0 !important; + } + + .g-md-none, + .gy-md-none { + --bs-gutter-y: 0 !important; + } + + .g-md-smash, + .gx-md-smash { + --bs-gutter-x: 2px !important; + } + + .g-md-smash, + .gy-md-smash { + --bs-gutter-y: 2px !important; + } + + .g-md-shortest, + .gx-md-shortest { + --bs-gutter-x: 4px !important; + } + + .g-md-shortest, + .gy-md-shortest { + --bs-gutter-y: 4px !important; + } + + .g-md-shorter, + .gx-md-shorter { + --bs-gutter-x: 8px !important; + } + + .g-md-shorter, + .gy-md-shorter { + --bs-gutter-y: 8px !important; + } + + .g-md-short, + .gx-md-short { + --bs-gutter-x: 12px !important; + } + + .g-md-short, + .gy-md-short { + --bs-gutter-y: 12px !important; + } + + .g-md-medium, + .gx-md-medium { + --bs-gutter-x: 16px !important; + } + + .g-md-medium, + .gy-md-medium { + --bs-gutter-y: 16px !important; + } + + .g-md-tall, + .gx-md-tall { + --bs-gutter-x: 24px !important; + } + + .g-md-tall, + .gy-md-tall { + --bs-gutter-y: 24px !important; + } + + .g-md-taller, + .gx-md-taller { + --bs-gutter-x: 32px !important; + } + + .g-md-taller, + .gy-md-taller { + --bs-gutter-y: 32px !important; + } + + .g-md-tallest, + .gx-md-tallest { + --bs-gutter-x: 40px !important; + } + + .g-md-tallest, + .gy-md-tallest { + --bs-gutter-y: 40px !important; + } + + .g-md-spacious, + .gx-md-spacious { + --bs-gutter-x: 48px !important; + } + + .g-md-spacious, + .gy-md-spacious { + --bs-gutter-y: 48px !important; + } + + .g-md-huge, + .gx-md-huge { + --bs-gutter-x: 56px !important; + } + + .g-md-huge, + .gy-md-huge { + --bs-gutter-y: 56px !important; + } + + .g-md-jumbo, + .gx-md-jumbo { + --bs-gutter-x: 64px !important; + } + + .g-md-jumbo, + .gy-md-jumbo { + --bs-gutter-y: 64px !important; + } + } + + @media (min-width: 1024px) { + .col-lg { + flex: 1 0 0%; + } + + .row-cols-lg-auto > * { + flex: 0 0 auto; + width: auto; + } + + .row-cols-lg-1 > * { + flex: 0 0 auto; + width: 100%; + } + + .row-cols-lg-2 > * { + flex: 0 0 auto; + width: 50%; + } + + .row-cols-lg-3 > * { + flex: 0 0 auto; + width: 33.33333333%; + } + + .row-cols-lg-4 > * { + flex: 0 0 auto; + width: 25%; + } + + .row-cols-lg-5 > * { + flex: 0 0 auto; + width: 20%; + } + + .row-cols-lg-6 > * { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-lg-auto { + flex: 0 0 auto; + width: auto; + } + + .col-lg-1 { + flex: 0 0 auto; + width: 8.33333333%; + } + + .col-lg-2 { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-lg-3 { + flex: 0 0 auto; + width: 25%; + } + + .col-lg-4 { + flex: 0 0 auto; + width: 33.33333333%; + } + + .col-lg-5 { + flex: 0 0 auto; + width: 41.66666667%; + } + + .col-lg-6 { + flex: 0 0 auto; + width: 50%; + } + + .col-lg-7 { + flex: 0 0 auto; + width: 58.33333333%; + } + + .col-lg-8 { + flex: 0 0 auto; + width: 66.66666667%; + } + + .col-lg-9 { + flex: 0 0 auto; + width: 75%; + } + + .col-lg-10 { + flex: 0 0 auto; + width: 83.33333333%; + } + + .col-lg-11 { + flex: 0 0 auto; + width: 91.66666667%; + } + + .col-lg-12 { + flex: 0 0 auto; + width: 100%; + } + + .offset-lg-0 { + margin-left: 0; + } + + .offset-lg-1 { + margin-left: 8.33333333%; + } + + .offset-lg-2 { + margin-left: 16.66666667%; + } + + .offset-lg-3 { + margin-left: 25%; + } + + .offset-lg-4 { + margin-left: 33.33333333%; + } + + .offset-lg-5 { + margin-left: 41.66666667%; + } + + .offset-lg-6 { + margin-left: 50%; + } + + .offset-lg-7 { + margin-left: 58.33333333%; + } + + .offset-lg-8 { + margin-left: 66.66666667%; + } + + .offset-lg-9 { + margin-left: 75%; + } + + .offset-lg-10 { + margin-left: 83.33333333%; + } + + .offset-lg-11 { + margin-left: 91.66666667%; + } + + .g-lg-none, + .gx-lg-none { + --bs-gutter-x: 0 !important; + } + + .g-lg-none, + .gy-lg-none { + --bs-gutter-y: 0 !important; + } + + .g-lg-smash, + .gx-lg-smash { + --bs-gutter-x: 2px !important; + } + + .g-lg-smash, + .gy-lg-smash { + --bs-gutter-y: 2px !important; + } + + .g-lg-shortest, + .gx-lg-shortest { + --bs-gutter-x: 4px !important; + } + + .g-lg-shortest, + .gy-lg-shortest { + --bs-gutter-y: 4px !important; + } + + .g-lg-shorter, + .gx-lg-shorter { + --bs-gutter-x: 8px !important; + } + + .g-lg-shorter, + .gy-lg-shorter { + --bs-gutter-y: 8px !important; + } + + .g-lg-short, + .gx-lg-short { + --bs-gutter-x: 12px !important; + } + + .g-lg-short, + .gy-lg-short { + --bs-gutter-y: 12px !important; + } + + .g-lg-medium, + .gx-lg-medium { + --bs-gutter-x: 16px !important; + } + + .g-lg-medium, + .gy-lg-medium { + --bs-gutter-y: 16px !important; + } + + .g-lg-tall, + .gx-lg-tall { + --bs-gutter-x: 24px !important; + } + + .g-lg-tall, + .gy-lg-tall { + --bs-gutter-y: 24px !important; + } + + .g-lg-taller, + .gx-lg-taller { + --bs-gutter-x: 32px !important; + } + + .g-lg-taller, + .gy-lg-taller { + --bs-gutter-y: 32px !important; + } + + .g-lg-tallest, + .gx-lg-tallest { + --bs-gutter-x: 40px !important; + } + + .g-lg-tallest, + .gy-lg-tallest { + --bs-gutter-y: 40px !important; + } + + .g-lg-spacious, + .gx-lg-spacious { + --bs-gutter-x: 48px !important; + } + + .g-lg-spacious, + .gy-lg-spacious { + --bs-gutter-y: 48px !important; + } + + .g-lg-huge, + .gx-lg-huge { + --bs-gutter-x: 56px !important; + } + + .g-lg-huge, + .gy-lg-huge { + --bs-gutter-y: 56px !important; + } + + .g-lg-jumbo, + .gx-lg-jumbo { + --bs-gutter-x: 64px !important; + } + + .g-lg-jumbo, + .gy-lg-jumbo { + --bs-gutter-y: 64px !important; + } + } + + @media (min-width: 1320px) { + .col-xl { + flex: 1 0 0%; + } + + .row-cols-xl-auto > * { + flex: 0 0 auto; + width: auto; + } + + .row-cols-xl-1 > * { + flex: 0 0 auto; + width: 100%; + } + + .row-cols-xl-2 > * { + flex: 0 0 auto; + width: 50%; + } + + .row-cols-xl-3 > * { + flex: 0 0 auto; + width: 33.33333333%; + } + + .row-cols-xl-4 > * { + flex: 0 0 auto; + width: 25%; + } + + .row-cols-xl-5 > * { + flex: 0 0 auto; + width: 20%; + } + + .row-cols-xl-6 > * { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-xl-auto { + flex: 0 0 auto; + width: auto; + } + + .col-xl-1 { + flex: 0 0 auto; + width: 8.33333333%; + } + + .col-xl-2 { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-xl-3 { + flex: 0 0 auto; + width: 25%; + } + + .col-xl-4 { + flex: 0 0 auto; + width: 33.33333333%; + } + + .col-xl-5 { + flex: 0 0 auto; + width: 41.66666667%; + } + + .col-xl-6 { + flex: 0 0 auto; + width: 50%; + } + + .col-xl-7 { + flex: 0 0 auto; + width: 58.33333333%; + } + + .col-xl-8 { + flex: 0 0 auto; + width: 66.66666667%; + } + + .col-xl-9 { + flex: 0 0 auto; + width: 75%; + } + + .col-xl-10 { + flex: 0 0 auto; + width: 83.33333333%; + } + + .col-xl-11 { + flex: 0 0 auto; + width: 91.66666667%; + } + + .col-xl-12 { + flex: 0 0 auto; + width: 100%; + } + + .offset-xl-0 { + margin-left: 0; + } + + .offset-xl-1 { + margin-left: 8.33333333%; + } + + .offset-xl-2 { + margin-left: 16.66666667%; + } + + .offset-xl-3 { + margin-left: 25%; + } + + .offset-xl-4 { + margin-left: 33.33333333%; + } + + .offset-xl-5 { + margin-left: 41.66666667%; + } + + .offset-xl-6 { + margin-left: 50%; + } + + .offset-xl-7 { + margin-left: 58.33333333%; + } + + .offset-xl-8 { + margin-left: 66.66666667%; + } + + .offset-xl-9 { + margin-left: 75%; + } + + .offset-xl-10 { + margin-left: 83.33333333%; + } + + .offset-xl-11 { + margin-left: 91.66666667%; + } + + .g-xl-none, + .gx-xl-none { + --bs-gutter-x: 0 !important; + } + + .g-xl-none, + .gy-xl-none { + --bs-gutter-y: 0 !important; + } + + .g-xl-smash, + .gx-xl-smash { + --bs-gutter-x: 2px !important; + } + + .g-xl-smash, + .gy-xl-smash { + --bs-gutter-y: 2px !important; + } + + .g-xl-shortest, + .gx-xl-shortest { + --bs-gutter-x: 4px !important; + } + + .g-xl-shortest, + .gy-xl-shortest { + --bs-gutter-y: 4px !important; + } + + .g-xl-shorter, + .gx-xl-shorter { + --bs-gutter-x: 8px !important; + } + + .g-xl-shorter, + .gy-xl-shorter { + --bs-gutter-y: 8px !important; + } + + .g-xl-short, + .gx-xl-short { + --bs-gutter-x: 12px !important; + } + + .g-xl-short, + .gy-xl-short { + --bs-gutter-y: 12px !important; + } + + .g-xl-medium, + .gx-xl-medium { + --bs-gutter-x: 16px !important; + } + + .g-xl-medium, + .gy-xl-medium { + --bs-gutter-y: 16px !important; + } + + .g-xl-tall, + .gx-xl-tall { + --bs-gutter-x: 24px !important; + } + + .g-xl-tall, + .gy-xl-tall { + --bs-gutter-y: 24px !important; + } + + .g-xl-taller, + .gx-xl-taller { + --bs-gutter-x: 32px !important; + } + + .g-xl-taller, + .gy-xl-taller { + --bs-gutter-y: 32px !important; + } + + .g-xl-tallest, + .gx-xl-tallest { + --bs-gutter-x: 40px !important; + } + + .g-xl-tallest, + .gy-xl-tallest { + --bs-gutter-y: 40px !important; + } + + .g-xl-spacious, + .gx-xl-spacious { + --bs-gutter-x: 48px !important; + } + + .g-xl-spacious, + .gy-xl-spacious { + --bs-gutter-y: 48px !important; + } + + .g-xl-huge, + .gx-xl-huge { + --bs-gutter-x: 56px !important; + } + + .g-xl-huge, + .gy-xl-huge { + --bs-gutter-y: 56px !important; + } + + .g-xl-jumbo, + .gx-xl-jumbo { + --bs-gutter-x: 64px !important; + } + + .g-xl-jumbo, + .gy-xl-jumbo { + --bs-gutter-y: 64px !important; + } + } + + @media (min-width: 1640px) { + .col-2xl { + flex: 1 0 0%; + } + + .row-cols-2xl-auto > * { + flex: 0 0 auto; + width: auto; + } + + .row-cols-2xl-1 > * { + flex: 0 0 auto; + width: 100%; + } + + .row-cols-2xl-2 > * { + flex: 0 0 auto; + width: 50%; + } + + .row-cols-2xl-3 > * { + flex: 0 0 auto; + width: 33.33333333%; + } + + .row-cols-2xl-4 > * { + flex: 0 0 auto; + width: 25%; + } + + .row-cols-2xl-5 > * { + flex: 0 0 auto; + width: 20%; + } + + .row-cols-2xl-6 > * { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-2xl-auto { + flex: 0 0 auto; + width: auto; + } + + .col-2xl-1 { + flex: 0 0 auto; + width: 8.33333333%; + } + + .col-2xl-2 { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-2xl-3 { + flex: 0 0 auto; + width: 25%; + } + + .col-2xl-4 { + flex: 0 0 auto; + width: 33.33333333%; + } + + .col-2xl-5 { + flex: 0 0 auto; + width: 41.66666667%; + } + + .col-2xl-6 { + flex: 0 0 auto; + width: 50%; + } + + .col-2xl-7 { + flex: 0 0 auto; + width: 58.33333333%; + } + + .col-2xl-8 { + flex: 0 0 auto; + width: 66.66666667%; + } + + .col-2xl-9 { + flex: 0 0 auto; + width: 75%; + } + + .col-2xl-10 { + flex: 0 0 auto; + width: 83.33333333%; + } + + .col-2xl-11 { + flex: 0 0 auto; + width: 91.66666667%; + } + + .col-2xl-12 { + flex: 0 0 auto; + width: 100%; + } + + .offset-2xl-0 { + margin-left: 0; + } + + .offset-2xl-1 { + margin-left: 8.33333333%; + } + + .offset-2xl-2 { + margin-left: 16.66666667%; + } + + .offset-2xl-3 { + margin-left: 25%; + } + + .offset-2xl-4 { + margin-left: 33.33333333%; + } + + .offset-2xl-5 { + margin-left: 41.66666667%; + } + + .offset-2xl-6 { + margin-left: 50%; + } + + .offset-2xl-7 { + margin-left: 58.33333333%; + } + + .offset-2xl-8 { + margin-left: 66.66666667%; + } + + .offset-2xl-9 { + margin-left: 75%; + } + + .offset-2xl-10 { + margin-left: 83.33333333%; + } + + .offset-2xl-11 { + margin-left: 91.66666667%; + } + + .g-2xl-none, + .gx-2xl-none { + --bs-gutter-x: 0 !important; + } + + .g-2xl-none, + .gy-2xl-none { + --bs-gutter-y: 0 !important; + } + + .g-2xl-smash, + .gx-2xl-smash { + --bs-gutter-x: 2px !important; + } + + .g-2xl-smash, + .gy-2xl-smash { + --bs-gutter-y: 2px !important; + } + + .g-2xl-shortest, + .gx-2xl-shortest { + --bs-gutter-x: 4px !important; + } + + .g-2xl-shortest, + .gy-2xl-shortest { + --bs-gutter-y: 4px !important; + } + + .g-2xl-shorter, + .gx-2xl-shorter { + --bs-gutter-x: 8px !important; + } + + .g-2xl-shorter, + .gy-2xl-shorter { + --bs-gutter-y: 8px !important; + } + + .g-2xl-short, + .gx-2xl-short { + --bs-gutter-x: 12px !important; + } + + .g-2xl-short, + .gy-2xl-short { + --bs-gutter-y: 12px !important; + } + + .g-2xl-medium, + .gx-2xl-medium { + --bs-gutter-x: 16px !important; + } + + .g-2xl-medium, + .gy-2xl-medium { + --bs-gutter-y: 16px !important; + } + + .g-2xl-tall, + .gx-2xl-tall { + --bs-gutter-x: 24px !important; + } + + .g-2xl-tall, + .gy-2xl-tall { + --bs-gutter-y: 24px !important; + } + + .g-2xl-taller, + .gx-2xl-taller { + --bs-gutter-x: 32px !important; + } + + .g-2xl-taller, + .gy-2xl-taller { + --bs-gutter-y: 32px !important; + } + + .g-2xl-tallest, + .gx-2xl-tallest { + --bs-gutter-x: 40px !important; + } + + .g-2xl-tallest, + .gy-2xl-tallest { + --bs-gutter-y: 40px !important; + } + + .g-2xl-spacious, + .gx-2xl-spacious { + --bs-gutter-x: 48px !important; + } + + .g-2xl-spacious, + .gy-2xl-spacious { + --bs-gutter-y: 48px !important; + } + + .g-2xl-huge, + .gx-2xl-huge { + --bs-gutter-x: 56px !important; + } + + .g-2xl-huge, + .gy-2xl-huge { + --bs-gutter-y: 56px !important; + } + + .g-2xl-jumbo, + .gx-2xl-jumbo { + --bs-gutter-x: 64px !important; + } + + .g-2xl-jumbo, + .gy-2xl-jumbo { + --bs-gutter-y: 64px !important; + } + } + + @media (min-width: 1880px) { + .col-3xl { + flex: 1 0 0%; + } + + .row-cols-3xl-auto > * { + flex: 0 0 auto; + width: auto; + } + + .row-cols-3xl-1 > * { + flex: 0 0 auto; + width: 100%; + } + + .row-cols-3xl-2 > * { + flex: 0 0 auto; + width: 50%; + } + + .row-cols-3xl-3 > * { + flex: 0 0 auto; + width: 33.33333333%; + } + + .row-cols-3xl-4 > * { + flex: 0 0 auto; + width: 25%; + } + + .row-cols-3xl-5 > * { + flex: 0 0 auto; + width: 20%; + } + + .row-cols-3xl-6 > * { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-3xl-auto { + flex: 0 0 auto; + width: auto; + } + + .col-3xl-1 { + flex: 0 0 auto; + width: 8.33333333%; + } + + .col-3xl-2 { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-3xl-3 { + flex: 0 0 auto; + width: 25%; + } + + .col-3xl-4 { + flex: 0 0 auto; + width: 33.33333333%; + } + + .col-3xl-5 { + flex: 0 0 auto; + width: 41.66666667%; + } + + .col-3xl-6 { + flex: 0 0 auto; + width: 50%; + } + + .col-3xl-7 { + flex: 0 0 auto; + width: 58.33333333%; + } + + .col-3xl-8 { + flex: 0 0 auto; + width: 66.66666667%; + } + + .col-3xl-9 { + flex: 0 0 auto; + width: 75%; + } + + .col-3xl-10 { + flex: 0 0 auto; + width: 83.33333333%; + } + + .col-3xl-11 { + flex: 0 0 auto; + width: 91.66666667%; + } + + .col-3xl-12 { + flex: 0 0 auto; + width: 100%; + } + + .offset-3xl-0 { + margin-left: 0; + } + + .offset-3xl-1 { + margin-left: 8.33333333%; + } + + .offset-3xl-2 { + margin-left: 16.66666667%; + } + + .offset-3xl-3 { + margin-left: 25%; + } + + .offset-3xl-4 { + margin-left: 33.33333333%; + } + + .offset-3xl-5 { + margin-left: 41.66666667%; + } + + .offset-3xl-6 { + margin-left: 50%; + } + + .offset-3xl-7 { + margin-left: 58.33333333%; + } + + .offset-3xl-8 { + margin-left: 66.66666667%; + } + + .offset-3xl-9 { + margin-left: 75%; + } + + .offset-3xl-10 { + margin-left: 83.33333333%; + } + + .offset-3xl-11 { + margin-left: 91.66666667%; + } + + .g-3xl-none, + .gx-3xl-none { + --bs-gutter-x: 0 !important; + } + + .g-3xl-none, + .gy-3xl-none { + --bs-gutter-y: 0 !important; + } + + .g-3xl-smash, + .gx-3xl-smash { + --bs-gutter-x: 2px !important; + } + + .g-3xl-smash, + .gy-3xl-smash { + --bs-gutter-y: 2px !important; + } + + .g-3xl-shortest, + .gx-3xl-shortest { + --bs-gutter-x: 4px !important; + } + + .g-3xl-shortest, + .gy-3xl-shortest { + --bs-gutter-y: 4px !important; + } + + .g-3xl-shorter, + .gx-3xl-shorter { + --bs-gutter-x: 8px !important; + } + + .g-3xl-shorter, + .gy-3xl-shorter { + --bs-gutter-y: 8px !important; + } + + .g-3xl-short, + .gx-3xl-short { + --bs-gutter-x: 12px !important; + } + + .g-3xl-short, + .gy-3xl-short { + --bs-gutter-y: 12px !important; + } + + .g-3xl-medium, + .gx-3xl-medium { + --bs-gutter-x: 16px !important; + } + + .g-3xl-medium, + .gy-3xl-medium { + --bs-gutter-y: 16px !important; + } + + .g-3xl-tall, + .gx-3xl-tall { + --bs-gutter-x: 24px !important; + } + + .g-3xl-tall, + .gy-3xl-tall { + --bs-gutter-y: 24px !important; + } + + .g-3xl-taller, + .gx-3xl-taller { + --bs-gutter-x: 32px !important; + } + + .g-3xl-taller, + .gy-3xl-taller { + --bs-gutter-y: 32px !important; + } + + .g-3xl-tallest, + .gx-3xl-tallest { + --bs-gutter-x: 40px !important; + } + + .g-3xl-tallest, + .gy-3xl-tallest { + --bs-gutter-y: 40px !important; + } + + .g-3xl-spacious, + .gx-3xl-spacious { + --bs-gutter-x: 48px !important; + } + + .g-3xl-spacious, + .gy-3xl-spacious { + --bs-gutter-y: 48px !important; + } + + .g-3xl-huge, + .gx-3xl-huge { + --bs-gutter-x: 56px !important; + } + + .g-3xl-huge, + .gy-3xl-huge { + --bs-gutter-y: 56px !important; + } + + .g-3xl-jumbo, + .gx-3xl-jumbo { + --bs-gutter-x: 64px !important; + } + + .g-3xl-jumbo, + .gy-3xl-jumbo { + --bs-gutter-y: 64px !important; + } + } + } + } + } + + @include it("generates OUDS and Bootstrap grid classes") { + $enable-bootstrap-compatibility: true !global; + @import "../../config"; + @import "../../functions"; + @import "../../tokens/raw"; + @import "../../tokens/semantic"; + @import "../../tokens/composite"; + @import "../../tokens/component"; + @import "../../variables"; + @import "../../maps"; + @import "../../mixins"; + + @include assert() { + @include output() { + @import "../../grid"; + } + @include expect() { + :root { + --bs-breakpoint-2xs: 0; + --bs-breakpoint-xs: 390px; + --bs-breakpoint-sm: 480px; + --bs-breakpoint-md: 736px; + --bs-breakpoint-lg: 1024px; + --bs-breakpoint-xl: 1320px; + --bs-breakpoint-xxl: 1640px; + --bs-breakpoint-2xl: 1640px; + --bs-breakpoint-3xl: 1880px; + } + + .row { + --bs-gutter-y: 0; + display: flex; + flex-wrap: wrap; + margin-top: calc(-1 * var(--bs-gutter-y)); // stylelint-disable-line function-disallowed-list + margin-right: calc(-0.5 * var(--bs-gutter-x)); // stylelint-disable-line function-disallowed-list, @stylistic/number-leading-zero + margin-left: calc(-0.5 * var(--bs-gutter-x)); // stylelint-disable-line function-disallowed-list, @stylistic/number-leading-zero + --bs-gutter-x: 8px; + } + + @media (min-width: 390px) { + .row { + --bs-gutter-x: 16px; + } + } + + @media (min-width: 480px) { + .row { + --bs-gutter-x: 16px; + } + } + + @media (min-width: 736px) { + .row { + --bs-gutter-x: 24px; + } + } + + @media (min-width: 1024px) { + .row { + --bs-gutter-x: 24px; + } + } + + @media (min-width: 1320px) { + .row { + --bs-gutter-x: 32px; + } + } + + @media (min-width: 1640px) { + .row { + --bs-gutter-x: 32px; + } + } + + @media (min-width: 1880px) { + .row { + --bs-gutter-x: 40px; + } + } + + .row > * { + flex-shrink: 0; + width: 100%; + max-width: 100%; + padding-right: calc(var(--bs-gutter-x) * 0.5); // stylelint-disable-line function-disallowed-list, @stylistic/number-leading-zero + padding-left: calc(var(--bs-gutter-x) * 0.5); // stylelint-disable-line function-disallowed-list, @stylistic/number-leading-zero + margin-top: var(--bs-gutter-y); + } + + .col { + flex: 1 0 0%; + } + + .row-cols-auto > * { + flex: 0 0 auto; + width: auto; + } + + .row-cols-1 > * { + flex: 0 0 auto; + width: 100%; + } + + .row-cols-2 > * { + flex: 0 0 auto; + width: 50%; + } + + .row-cols-3 > * { + flex: 0 0 auto; + width: 33.33333333%; + } + + .row-cols-4 > * { + flex: 0 0 auto; + width: 25%; + } + + .row-cols-5 > * { + flex: 0 0 auto; + width: 20%; + } + + .row-cols-6 > * { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-auto { + flex: 0 0 auto; + width: auto; + } + + .col-1 { + flex: 0 0 auto; + width: 8.33333333%; + } + + .col-2 { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-3 { + flex: 0 0 auto; + width: 25%; + } + + .col-4 { + flex: 0 0 auto; + width: 33.33333333%; + } + + .col-5 { + flex: 0 0 auto; + width: 41.66666667%; + } + + .col-6 { + flex: 0 0 auto; + width: 50%; + } + + .col-7 { + flex: 0 0 auto; + width: 58.33333333%; + } + + .col-8 { + flex: 0 0 auto; + width: 66.66666667%; + } + + .col-9 { + flex: 0 0 auto; + width: 75%; + } + + .col-10 { + flex: 0 0 auto; + width: 83.33333333%; + } + + .col-11 { + flex: 0 0 auto; + width: 91.66666667%; + } + + .col-12 { + flex: 0 0 auto; + width: 100%; + } + + .offset-1 { + margin-left: 8.33333333%; + } + + .offset-2 { + margin-left: 16.66666667%; + } + + .offset-3 { + margin-left: 25%; + } + + .offset-4 { + margin-left: 33.33333333%; + } + + .offset-5 { + margin-left: 41.66666667%; + } + + .offset-6 { + margin-left: 50%; + } + + .offset-7 { + margin-left: 58.33333333%; + } + + .offset-8 { + margin-left: 66.66666667%; + } + + .offset-9 { + margin-left: 75%; + } + + .offset-10 { + margin-left: 83.33333333%; + } + + .offset-11 { + margin-left: 91.66666667%; + } + + .g-none, + .gx-none { + --bs-gutter-x: 0 !important; + } + + .g-none, + .gy-none { + --bs-gutter-y: 0 !important; + } + + .g-smash, + .gx-smash { + --bs-gutter-x: 2px !important; + } + + .g-smash, + .gy-smash { + --bs-gutter-y: 2px !important; + } + + .g-shortest, + .gx-shortest { + --bs-gutter-x: 4px !important; + } + + .g-shortest, + .gy-shortest { + --bs-gutter-y: 4px !important; + } + + .g-shorter, + .gx-shorter { + --bs-gutter-x: 8px !important; + } + + .g-shorter, + .gy-shorter { + --bs-gutter-y: 8px !important; + } + + .g-short, + .gx-short { + --bs-gutter-x: 12px !important; + } + + .g-short, + .gy-short { + --bs-gutter-y: 12px !important; + } + + .g-medium, + .gx-medium { + --bs-gutter-x: 16px !important; + } + + .g-medium, + .gy-medium { + --bs-gutter-y: 16px !important; + } + + .g-tall, + .gx-tall { + --bs-gutter-x: 24px !important; + } + + .g-tall, + .gy-tall { + --bs-gutter-y: 24px !important; + } + + .g-taller, + .gx-taller { + --bs-gutter-x: 32px !important; + } + + .g-taller, + .gy-taller { + --bs-gutter-y: 32px !important; + } + + .g-tallest, + .gx-tallest { + --bs-gutter-x: 40px !important; + } + + .g-tallest, + .gy-tallest { + --bs-gutter-y: 40px !important; + } + + .g-spacious, + .gx-spacious { + --bs-gutter-x: 48px !important; + } + + .g-spacious, + .gy-spacious { + --bs-gutter-y: 48px !important; + } + + .g-huge, + .gx-huge { + --bs-gutter-x: 56px !important; + } + + .g-huge, + .gy-huge { + --bs-gutter-y: 56px !important; + } + + .g-jumbo, + .gx-jumbo { + --bs-gutter-x: 64px !important; + } + + .g-jumbo, + .gy-jumbo { + --bs-gutter-y: 64px !important; + } + + .g-0, + .gx-0 { + --bs-gutter-x: 0 !important; + } + + .g-0, + .gy-0 { + --bs-gutter-y: 0 !important; + } + + .g-1, + .gx-1 { + --bs-gutter-x: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-1, + .gy-1 { + --bs-gutter-y: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-2, + .gx-2 { + --bs-gutter-x: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-2, + .gy-2 { + --bs-gutter-y: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-3, + .gx-3 { + --bs-gutter-x: 1.5rem !important; + } + + .g-3, + .gy-3 { + --bs-gutter-y: 1.5rem !important; + } + + .g-4, + .gx-4 { + --bs-gutter-x: 2.5rem !important; + } + + .g-4, + .gy-4 { + --bs-gutter-y: 2.5rem !important; + } + + .g-5, + .gx-5 { + --bs-gutter-x: 3.5rem !important; + } + + .g-5, + .gy-5 { + --bs-gutter-y: 3.5rem !important; + } + + @media (min-width: 390px) { + .col-xs { + flex: 1 0 0%; + } + + .row-cols-xs-auto > * { + flex: 0 0 auto; + width: auto; + } + + .row-cols-xs-1 > * { + flex: 0 0 auto; + width: 100%; + } + + .row-cols-xs-2 > * { + flex: 0 0 auto; + width: 50%; + } + + .row-cols-xs-3 > * { + flex: 0 0 auto; + width: 33.33333333%; + } + + .row-cols-xs-4 > * { + flex: 0 0 auto; + width: 25%; + } + + .row-cols-xs-5 > * { + flex: 0 0 auto; + width: 20%; + } + + .row-cols-xs-6 > * { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-xs-auto { + flex: 0 0 auto; + width: auto; + } + + .col-xs-1 { + flex: 0 0 auto; + width: 8.33333333%; + } + + .col-xs-2 { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-xs-3 { + flex: 0 0 auto; + width: 25%; + } + + .col-xs-4 { + flex: 0 0 auto; + width: 33.33333333%; + } + + .col-xs-5 { + flex: 0 0 auto; + width: 41.66666667%; + } + + .col-xs-6 { + flex: 0 0 auto; + width: 50%; + } + + .col-xs-7 { + flex: 0 0 auto; + width: 58.33333333%; + } + + .col-xs-8 { + flex: 0 0 auto; + width: 66.66666667%; + } + + .col-xs-9 { + flex: 0 0 auto; + width: 75%; + } + + .col-xs-10 { + flex: 0 0 auto; + width: 83.33333333%; + } + + .col-xs-11 { + flex: 0 0 auto; + width: 91.66666667%; + } + + .col-xs-12 { + flex: 0 0 auto; + width: 100%; + } + + .offset-xs-0 { + margin-left: 0; + } + + .offset-xs-1 { + margin-left: 8.33333333%; + } + + .offset-xs-2 { + margin-left: 16.66666667%; + } + + .offset-xs-3 { + margin-left: 25%; + } + + .offset-xs-4 { + margin-left: 33.33333333%; + } + + .offset-xs-5 { + margin-left: 41.66666667%; + } + + .offset-xs-6 { + margin-left: 50%; + } + + .offset-xs-7 { + margin-left: 58.33333333%; + } + + .offset-xs-8 { + margin-left: 66.66666667%; + } + + .offset-xs-9 { + margin-left: 75%; + } + + .offset-xs-10 { + margin-left: 83.33333333%; + } + + .offset-xs-11 { + margin-left: 91.66666667%; + } + + .g-xs-none, + .gx-xs-none { + --bs-gutter-x: 0 !important; + } + + .g-xs-none, + .gy-xs-none { + --bs-gutter-y: 0 !important; + } + + .g-xs-smash, + .gx-xs-smash { + --bs-gutter-x: 2px !important; + } + + .g-xs-smash, + .gy-xs-smash { + --bs-gutter-y: 2px !important; + } + + .g-xs-shortest, + .gx-xs-shortest { + --bs-gutter-x: 4px !important; + } + + .g-xs-shortest, + .gy-xs-shortest { + --bs-gutter-y: 4px !important; + } + + .g-xs-shorter, + .gx-xs-shorter { + --bs-gutter-x: 8px !important; + } + + .g-xs-shorter, + .gy-xs-shorter { + --bs-gutter-y: 8px !important; + } + + .g-xs-short, + .gx-xs-short { + --bs-gutter-x: 12px !important; + } + + .g-xs-short, + .gy-xs-short { + --bs-gutter-y: 12px !important; + } + + .g-xs-medium, + .gx-xs-medium { + --bs-gutter-x: 16px !important; + } + + .g-xs-medium, + .gy-xs-medium { + --bs-gutter-y: 16px !important; + } + + .g-xs-tall, + .gx-xs-tall { + --bs-gutter-x: 24px !important; + } + + .g-xs-tall, + .gy-xs-tall { + --bs-gutter-y: 24px !important; + } + + .g-xs-taller, + .gx-xs-taller { + --bs-gutter-x: 32px !important; + } + + .g-xs-taller, + .gy-xs-taller { + --bs-gutter-y: 32px !important; + } + + .g-xs-tallest, + .gx-xs-tallest { + --bs-gutter-x: 40px !important; + } + + .g-xs-tallest, + .gy-xs-tallest { + --bs-gutter-y: 40px !important; + } + + .g-xs-spacious, + .gx-xs-spacious { + --bs-gutter-x: 48px !important; + } + + .g-xs-spacious, + .gy-xs-spacious { + --bs-gutter-y: 48px !important; + } + + .g-xs-huge, + .gx-xs-huge { + --bs-gutter-x: 56px !important; + } + + .g-xs-huge, + .gy-xs-huge { + --bs-gutter-y: 56px !important; + } + + .g-xs-jumbo, + .gx-xs-jumbo { + --bs-gutter-x: 64px !important; + } + + .g-xs-jumbo, + .gy-xs-jumbo { + --bs-gutter-y: 64px !important; + } + + .g-xs-0, + .gx-xs-0 { + --bs-gutter-x: 0 !important; + } + + .g-xs-0, + .gy-xs-0 { + --bs-gutter-y: 0 !important; + } + + .g-xs-1, + .gx-xs-1 { + --bs-gutter-x: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-xs-1, + .gy-xs-1 { + --bs-gutter-y: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-xs-2, + .gx-xs-2 { + --bs-gutter-x: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-xs-2, + .gy-xs-2 { + --bs-gutter-y: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-xs-3, + .gx-xs-3 { + --bs-gutter-x: 1.5rem !important; + } + + .g-xs-3, + .gy-xs-3 { + --bs-gutter-y: 1.5rem !important; + } + + .g-xs-4, + .gx-xs-4 { + --bs-gutter-x: 2.5rem !important; + } + + .g-xs-4, + .gy-xs-4 { + --bs-gutter-y: 2.5rem !important; + } + + .g-xs-5, + .gx-xs-5 { + --bs-gutter-x: 3.5rem !important; + } + + .g-xs-5, + .gy-xs-5 { + --bs-gutter-y: 3.5rem !important; + } + } + + @media (min-width: 480px) { + .col-sm { + flex: 1 0 0%; + } + + .row-cols-sm-auto > * { + flex: 0 0 auto; + width: auto; + } + + .row-cols-sm-1 > * { + flex: 0 0 auto; + width: 100%; + } + + .row-cols-sm-2 > * { + flex: 0 0 auto; + width: 50%; + } + + .row-cols-sm-3 > * { + flex: 0 0 auto; + width: 33.33333333%; + } + + .row-cols-sm-4 > * { + flex: 0 0 auto; + width: 25%; + } + + .row-cols-sm-5 > * { + flex: 0 0 auto; + width: 20%; + } + + .row-cols-sm-6 > * { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-sm-auto { + flex: 0 0 auto; + width: auto; + } + + .col-sm-1 { + flex: 0 0 auto; + width: 8.33333333%; + } + + .col-sm-2 { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-sm-3 { + flex: 0 0 auto; + width: 25%; + } + + .col-sm-4 { + flex: 0 0 auto; + width: 33.33333333%; + } + + .col-sm-5 { + flex: 0 0 auto; + width: 41.66666667%; + } + + .col-sm-6 { + flex: 0 0 auto; + width: 50%; + } + + .col-sm-7 { + flex: 0 0 auto; + width: 58.33333333%; + } + + .col-sm-8 { + flex: 0 0 auto; + width: 66.66666667%; + } + + .col-sm-9 { + flex: 0 0 auto; + width: 75%; + } + + .col-sm-10 { + flex: 0 0 auto; + width: 83.33333333%; + } + + .col-sm-11 { + flex: 0 0 auto; + width: 91.66666667%; + } + + .col-sm-12 { + flex: 0 0 auto; + width: 100%; + } + + .offset-sm-0 { + margin-left: 0; + } + + .offset-sm-1 { + margin-left: 8.33333333%; + } + + .offset-sm-2 { + margin-left: 16.66666667%; + } + + .offset-sm-3 { + margin-left: 25%; + } + + .offset-sm-4 { + margin-left: 33.33333333%; + } + + .offset-sm-5 { + margin-left: 41.66666667%; + } + + .offset-sm-6 { + margin-left: 50%; + } + + .offset-sm-7 { + margin-left: 58.33333333%; + } + + .offset-sm-8 { + margin-left: 66.66666667%; + } + + .offset-sm-9 { + margin-left: 75%; + } + + .offset-sm-10 { + margin-left: 83.33333333%; + } + + .offset-sm-11 { + margin-left: 91.66666667%; + } + + .g-sm-none, + .gx-sm-none { + --bs-gutter-x: 0 !important; + } + + .g-sm-none, + .gy-sm-none { + --bs-gutter-y: 0 !important; + } + + .g-sm-smash, + .gx-sm-smash { + --bs-gutter-x: 2px !important; + } + + .g-sm-smash, + .gy-sm-smash { + --bs-gutter-y: 2px !important; + } + + .g-sm-shortest, + .gx-sm-shortest { + --bs-gutter-x: 4px !important; + } + + .g-sm-shortest, + .gy-sm-shortest { + --bs-gutter-y: 4px !important; + } + + .g-sm-shorter, + .gx-sm-shorter { + --bs-gutter-x: 8px !important; + } + + .g-sm-shorter, + .gy-sm-shorter { + --bs-gutter-y: 8px !important; + } + + .g-sm-short, + .gx-sm-short { + --bs-gutter-x: 12px !important; + } + + .g-sm-short, + .gy-sm-short { + --bs-gutter-y: 12px !important; + } + + .g-sm-medium, + .gx-sm-medium { + --bs-gutter-x: 16px !important; + } + + .g-sm-medium, + .gy-sm-medium { + --bs-gutter-y: 16px !important; + } + + .g-sm-tall, + .gx-sm-tall { + --bs-gutter-x: 24px !important; + } + + .g-sm-tall, + .gy-sm-tall { + --bs-gutter-y: 24px !important; + } + + .g-sm-taller, + .gx-sm-taller { + --bs-gutter-x: 32px !important; + } + + .g-sm-taller, + .gy-sm-taller { + --bs-gutter-y: 32px !important; + } + + .g-sm-tallest, + .gx-sm-tallest { + --bs-gutter-x: 40px !important; + } + + .g-sm-tallest, + .gy-sm-tallest { + --bs-gutter-y: 40px !important; + } + + .g-sm-spacious, + .gx-sm-spacious { + --bs-gutter-x: 48px !important; + } + + .g-sm-spacious, + .gy-sm-spacious { + --bs-gutter-y: 48px !important; + } + + .g-sm-huge, + .gx-sm-huge { + --bs-gutter-x: 56px !important; + } + + .g-sm-huge, + .gy-sm-huge { + --bs-gutter-y: 56px !important; + } + + .g-sm-jumbo, + .gx-sm-jumbo { + --bs-gutter-x: 64px !important; + } + + .g-sm-jumbo, + .gy-sm-jumbo { + --bs-gutter-y: 64px !important; + } + + .g-sm-0, + .gx-sm-0 { + --bs-gutter-x: 0 !important; + } + + .g-sm-0, + .gy-sm-0 { + --bs-gutter-y: 0 !important; + } + + .g-sm-1, + .gx-sm-1 { + --bs-gutter-x: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-sm-1, + .gy-sm-1 { + --bs-gutter-y: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-sm-2, + .gx-sm-2 { + --bs-gutter-x: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-sm-2, + .gy-sm-2 { + --bs-gutter-y: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-sm-3, + .gx-sm-3 { + --bs-gutter-x: 1.5rem !important; + } + + .g-sm-3, + .gy-sm-3 { + --bs-gutter-y: 1.5rem !important; + } + + .g-sm-4, + .gx-sm-4 { + --bs-gutter-x: 2.5rem !important; + } + + .g-sm-4, + .gy-sm-4 { + --bs-gutter-y: 2.5rem !important; + } + + .g-sm-5, + .gx-sm-5 { + --bs-gutter-x: 3.5rem !important; + } + + .g-sm-5, + .gy-sm-5 { + --bs-gutter-y: 3.5rem !important; + } + } + + @media (min-width: 736px) { + .col-md { + flex: 1 0 0%; + } + + .row-cols-md-auto > * { + flex: 0 0 auto; + width: auto; + } + + .row-cols-md-1 > * { + flex: 0 0 auto; + width: 100%; + } + + .row-cols-md-2 > * { + flex: 0 0 auto; + width: 50%; + } + + .row-cols-md-3 > * { + flex: 0 0 auto; + width: 33.33333333%; + } + + .row-cols-md-4 > * { + flex: 0 0 auto; + width: 25%; + } + + .row-cols-md-5 > * { + flex: 0 0 auto; + width: 20%; + } + + .row-cols-md-6 > * { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-md-auto { + flex: 0 0 auto; + width: auto; + } + + .col-md-1 { + flex: 0 0 auto; + width: 8.33333333%; + } + + .col-md-2 { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-md-3 { + flex: 0 0 auto; + width: 25%; + } + + .col-md-4 { + flex: 0 0 auto; + width: 33.33333333%; + } + + .col-md-5 { + flex: 0 0 auto; + width: 41.66666667%; + } + + .col-md-6 { + flex: 0 0 auto; + width: 50%; + } + + .col-md-7 { + flex: 0 0 auto; + width: 58.33333333%; + } + + .col-md-8 { + flex: 0 0 auto; + width: 66.66666667%; + } + + .col-md-9 { + flex: 0 0 auto; + width: 75%; + } + + .col-md-10 { + flex: 0 0 auto; + width: 83.33333333%; + } + + .col-md-11 { + flex: 0 0 auto; + width: 91.66666667%; + } + + .col-md-12 { + flex: 0 0 auto; + width: 100%; + } + + .offset-md-0 { + margin-left: 0; + } + + .offset-md-1 { + margin-left: 8.33333333%; + } + + .offset-md-2 { + margin-left: 16.66666667%; + } + + .offset-md-3 { + margin-left: 25%; + } + + .offset-md-4 { + margin-left: 33.33333333%; + } + + .offset-md-5 { + margin-left: 41.66666667%; + } + + .offset-md-6 { + margin-left: 50%; + } + + .offset-md-7 { + margin-left: 58.33333333%; + } + + .offset-md-8 { + margin-left: 66.66666667%; + } + + .offset-md-9 { + margin-left: 75%; + } + + .offset-md-10 { + margin-left: 83.33333333%; + } + + .offset-md-11 { + margin-left: 91.66666667%; + } + + .g-md-none, + .gx-md-none { + --bs-gutter-x: 0 !important; + } + + .g-md-none, + .gy-md-none { + --bs-gutter-y: 0 !important; + } + + .g-md-smash, + .gx-md-smash { + --bs-gutter-x: 2px !important; + } + + .g-md-smash, + .gy-md-smash { + --bs-gutter-y: 2px !important; + } + + .g-md-shortest, + .gx-md-shortest { + --bs-gutter-x: 4px !important; + } + + .g-md-shortest, + .gy-md-shortest { + --bs-gutter-y: 4px !important; + } + + .g-md-shorter, + .gx-md-shorter { + --bs-gutter-x: 8px !important; + } + + .g-md-shorter, + .gy-md-shorter { + --bs-gutter-y: 8px !important; + } + + .g-md-short, + .gx-md-short { + --bs-gutter-x: 12px !important; + } + + .g-md-short, + .gy-md-short { + --bs-gutter-y: 12px !important; + } + + .g-md-medium, + .gx-md-medium { + --bs-gutter-x: 16px !important; + } + + .g-md-medium, + .gy-md-medium { + --bs-gutter-y: 16px !important; + } + + .g-md-tall, + .gx-md-tall { + --bs-gutter-x: 24px !important; + } + + .g-md-tall, + .gy-md-tall { + --bs-gutter-y: 24px !important; + } + + .g-md-taller, + .gx-md-taller { + --bs-gutter-x: 32px !important; + } + + .g-md-taller, + .gy-md-taller { + --bs-gutter-y: 32px !important; + } + + .g-md-tallest, + .gx-md-tallest { + --bs-gutter-x: 40px !important; + } + + .g-md-tallest, + .gy-md-tallest { + --bs-gutter-y: 40px !important; + } + + .g-md-spacious, + .gx-md-spacious { + --bs-gutter-x: 48px !important; + } + + .g-md-spacious, + .gy-md-spacious { + --bs-gutter-y: 48px !important; + } + + .g-md-huge, + .gx-md-huge { + --bs-gutter-x: 56px !important; + } + + .g-md-huge, + .gy-md-huge { + --bs-gutter-y: 56px !important; + } + + .g-md-jumbo, + .gx-md-jumbo { + --bs-gutter-x: 64px !important; + } + + .g-md-jumbo, + .gy-md-jumbo { + --bs-gutter-y: 64px !important; + } + + .g-md-0, + .gx-md-0 { + --bs-gutter-x: 0 !important; + } + + .g-md-0, + .gy-md-0 { + --bs-gutter-y: 0 !important; + } + + .g-md-1, + .gx-md-1 { + --bs-gutter-x: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-md-1, + .gy-md-1 { + --bs-gutter-y: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-md-2, + .gx-md-2 { + --bs-gutter-x: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-md-2, + .gy-md-2 { + --bs-gutter-y: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-md-3, + .gx-md-3 { + --bs-gutter-x: 1.5rem !important; + } + + .g-md-3, + .gy-md-3 { + --bs-gutter-y: 1.5rem !important; + } + + .g-md-4, + .gx-md-4 { + --bs-gutter-x: 2.5rem !important; + } + + .g-md-4, + .gy-md-4 { + --bs-gutter-y: 2.5rem !important; + } + + .g-md-5, + .gx-md-5 { + --bs-gutter-x: 3.5rem !important; + } + + .g-md-5, + .gy-md-5 { + --bs-gutter-y: 3.5rem !important; + } + } + + @media (min-width: 1024px) { + .col-lg { + flex: 1 0 0%; + } + + .row-cols-lg-auto > * { + flex: 0 0 auto; + width: auto; + } + + .row-cols-lg-1 > * { + flex: 0 0 auto; + width: 100%; + } + + .row-cols-lg-2 > * { + flex: 0 0 auto; + width: 50%; + } + + .row-cols-lg-3 > * { + flex: 0 0 auto; + width: 33.33333333%; + } + + .row-cols-lg-4 > * { + flex: 0 0 auto; + width: 25%; + } + + .row-cols-lg-5 > * { + flex: 0 0 auto; + width: 20%; + } + + .row-cols-lg-6 > * { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-lg-auto { + flex: 0 0 auto; + width: auto; + } + + .col-lg-1 { + flex: 0 0 auto; + width: 8.33333333%; + } + + .col-lg-2 { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-lg-3 { + flex: 0 0 auto; + width: 25%; + } + + .col-lg-4 { + flex: 0 0 auto; + width: 33.33333333%; + } + + .col-lg-5 { + flex: 0 0 auto; + width: 41.66666667%; + } + + .col-lg-6 { + flex: 0 0 auto; + width: 50%; + } + + .col-lg-7 { + flex: 0 0 auto; + width: 58.33333333%; + } + + .col-lg-8 { + flex: 0 0 auto; + width: 66.66666667%; + } + + .col-lg-9 { + flex: 0 0 auto; + width: 75%; + } + + .col-lg-10 { + flex: 0 0 auto; + width: 83.33333333%; + } + + .col-lg-11 { + flex: 0 0 auto; + width: 91.66666667%; + } + + .col-lg-12 { + flex: 0 0 auto; + width: 100%; + } + + .offset-lg-0 { + margin-left: 0; + } + + .offset-lg-1 { + margin-left: 8.33333333%; + } + + .offset-lg-2 { + margin-left: 16.66666667%; + } + + .offset-lg-3 { + margin-left: 25%; + } + + .offset-lg-4 { + margin-left: 33.33333333%; + } + + .offset-lg-5 { + margin-left: 41.66666667%; + } + + .offset-lg-6 { + margin-left: 50%; + } + + .offset-lg-7 { + margin-left: 58.33333333%; + } + + .offset-lg-8 { + margin-left: 66.66666667%; + } + + .offset-lg-9 { + margin-left: 75%; + } + + .offset-lg-10 { + margin-left: 83.33333333%; + } + + .offset-lg-11 { + margin-left: 91.66666667%; + } + + .g-lg-none, + .gx-lg-none { + --bs-gutter-x: 0 !important; + } + + .g-lg-none, + .gy-lg-none { + --bs-gutter-y: 0 !important; + } + + .g-lg-smash, + .gx-lg-smash { + --bs-gutter-x: 2px !important; + } + + .g-lg-smash, + .gy-lg-smash { + --bs-gutter-y: 2px !important; + } + + .g-lg-shortest, + .gx-lg-shortest { + --bs-gutter-x: 4px !important; + } + + .g-lg-shortest, + .gy-lg-shortest { + --bs-gutter-y: 4px !important; + } + + .g-lg-shorter, + .gx-lg-shorter { + --bs-gutter-x: 8px !important; + } + + .g-lg-shorter, + .gy-lg-shorter { + --bs-gutter-y: 8px !important; + } + + .g-lg-short, + .gx-lg-short { + --bs-gutter-x: 12px !important; + } + + .g-lg-short, + .gy-lg-short { + --bs-gutter-y: 12px !important; + } + + .g-lg-medium, + .gx-lg-medium { + --bs-gutter-x: 16px !important; + } + + .g-lg-medium, + .gy-lg-medium { + --bs-gutter-y: 16px !important; + } + + .g-lg-tall, + .gx-lg-tall { + --bs-gutter-x: 24px !important; + } + + .g-lg-tall, + .gy-lg-tall { + --bs-gutter-y: 24px !important; + } + + .g-lg-taller, + .gx-lg-taller { + --bs-gutter-x: 32px !important; + } + + .g-lg-taller, + .gy-lg-taller { + --bs-gutter-y: 32px !important; + } + + .g-lg-tallest, + .gx-lg-tallest { + --bs-gutter-x: 40px !important; + } + + .g-lg-tallest, + .gy-lg-tallest { + --bs-gutter-y: 40px !important; + } + + .g-lg-spacious, + .gx-lg-spacious { + --bs-gutter-x: 48px !important; + } + + .g-lg-spacious, + .gy-lg-spacious { + --bs-gutter-y: 48px !important; + } + + .g-lg-huge, + .gx-lg-huge { + --bs-gutter-x: 56px !important; + } + + .g-lg-huge, + .gy-lg-huge { + --bs-gutter-y: 56px !important; + } + + .g-lg-jumbo, + .gx-lg-jumbo { + --bs-gutter-x: 64px !important; + } + + .g-lg-jumbo, + .gy-lg-jumbo { + --bs-gutter-y: 64px !important; + } + + .g-lg-0, + .gx-lg-0 { + --bs-gutter-x: 0 !important; + } + + .g-lg-0, + .gy-lg-0 { + --bs-gutter-y: 0 !important; + } + + .g-lg-1, + .gx-lg-1 { + --bs-gutter-x: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-lg-1, + .gy-lg-1 { + --bs-gutter-y: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-lg-2, + .gx-lg-2 { + --bs-gutter-x: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-lg-2, + .gy-lg-2 { + --bs-gutter-y: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-lg-3, + .gx-lg-3 { + --bs-gutter-x: 1.5rem !important; + } + + .g-lg-3, + .gy-lg-3 { + --bs-gutter-y: 1.5rem !important; + } + + .g-lg-4, + .gx-lg-4 { + --bs-gutter-x: 2.5rem !important; + } + + .g-lg-4, + .gy-lg-4 { + --bs-gutter-y: 2.5rem !important; + } + + .g-lg-5, + .gx-lg-5 { + --bs-gutter-x: 3.5rem !important; + } + + .g-lg-5, + .gy-lg-5 { + --bs-gutter-y: 3.5rem !important; + } + } + + @media (min-width: 1320px) { + .col-xl { + flex: 1 0 0%; + } + + .row-cols-xl-auto > * { + flex: 0 0 auto; + width: auto; + } + + .row-cols-xl-1 > * { + flex: 0 0 auto; + width: 100%; + } + + .row-cols-xl-2 > * { + flex: 0 0 auto; + width: 50%; + } + + .row-cols-xl-3 > * { + flex: 0 0 auto; + width: 33.33333333%; + } + + .row-cols-xl-4 > * { + flex: 0 0 auto; + width: 25%; + } + + .row-cols-xl-5 > * { + flex: 0 0 auto; + width: 20%; + } + + .row-cols-xl-6 > * { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-xl-auto { + flex: 0 0 auto; + width: auto; + } + + .col-xl-1 { + flex: 0 0 auto; + width: 8.33333333%; + } + + .col-xl-2 { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-xl-3 { + flex: 0 0 auto; + width: 25%; + } + + .col-xl-4 { + flex: 0 0 auto; + width: 33.33333333%; + } + + .col-xl-5 { + flex: 0 0 auto; + width: 41.66666667%; + } + + .col-xl-6 { + flex: 0 0 auto; + width: 50%; + } + + .col-xl-7 { + flex: 0 0 auto; + width: 58.33333333%; + } + + .col-xl-8 { + flex: 0 0 auto; + width: 66.66666667%; + } + + .col-xl-9 { + flex: 0 0 auto; + width: 75%; + } + + .col-xl-10 { + flex: 0 0 auto; + width: 83.33333333%; + } + + .col-xl-11 { + flex: 0 0 auto; + width: 91.66666667%; + } + + .col-xl-12 { + flex: 0 0 auto; + width: 100%; + } + + .offset-xl-0 { + margin-left: 0; + } + + .offset-xl-1 { + margin-left: 8.33333333%; + } + + .offset-xl-2 { + margin-left: 16.66666667%; + } + + .offset-xl-3 { + margin-left: 25%; + } + + .offset-xl-4 { + margin-left: 33.33333333%; + } + + .offset-xl-5 { + margin-left: 41.66666667%; + } + + .offset-xl-6 { + margin-left: 50%; + } + + .offset-xl-7 { + margin-left: 58.33333333%; + } + + .offset-xl-8 { + margin-left: 66.66666667%; + } + + .offset-xl-9 { + margin-left: 75%; + } + + .offset-xl-10 { + margin-left: 83.33333333%; + } + + .offset-xl-11 { + margin-left: 91.66666667%; + } + + .g-xl-none, + .gx-xl-none { + --bs-gutter-x: 0 !important; + } + + .g-xl-none, + .gy-xl-none { + --bs-gutter-y: 0 !important; + } + + .g-xl-smash, + .gx-xl-smash { + --bs-gutter-x: 2px !important; + } + + .g-xl-smash, + .gy-xl-smash { + --bs-gutter-y: 2px !important; + } + + .g-xl-shortest, + .gx-xl-shortest { + --bs-gutter-x: 4px !important; + } + + .g-xl-shortest, + .gy-xl-shortest { + --bs-gutter-y: 4px !important; + } + + .g-xl-shorter, + .gx-xl-shorter { + --bs-gutter-x: 8px !important; + } + + .g-xl-shorter, + .gy-xl-shorter { + --bs-gutter-y: 8px !important; + } + + .g-xl-short, + .gx-xl-short { + --bs-gutter-x: 12px !important; + } + + .g-xl-short, + .gy-xl-short { + --bs-gutter-y: 12px !important; + } + + .g-xl-medium, + .gx-xl-medium { + --bs-gutter-x: 16px !important; + } + + .g-xl-medium, + .gy-xl-medium { + --bs-gutter-y: 16px !important; + } + + .g-xl-tall, + .gx-xl-tall { + --bs-gutter-x: 24px !important; + } + + .g-xl-tall, + .gy-xl-tall { + --bs-gutter-y: 24px !important; + } + + .g-xl-taller, + .gx-xl-taller { + --bs-gutter-x: 32px !important; + } + + .g-xl-taller, + .gy-xl-taller { + --bs-gutter-y: 32px !important; + } + + .g-xl-tallest, + .gx-xl-tallest { + --bs-gutter-x: 40px !important; + } + + .g-xl-tallest, + .gy-xl-tallest { + --bs-gutter-y: 40px !important; + } + + .g-xl-spacious, + .gx-xl-spacious { + --bs-gutter-x: 48px !important; + } + + .g-xl-spacious, + .gy-xl-spacious { + --bs-gutter-y: 48px !important; + } + + .g-xl-huge, + .gx-xl-huge { + --bs-gutter-x: 56px !important; + } + + .g-xl-huge, + .gy-xl-huge { + --bs-gutter-y: 56px !important; + } + + .g-xl-jumbo, + .gx-xl-jumbo { + --bs-gutter-x: 64px !important; + } + + .g-xl-jumbo, + .gy-xl-jumbo { + --bs-gutter-y: 64px !important; + } + + .g-xl-0, + .gx-xl-0 { + --bs-gutter-x: 0 !important; + } + + .g-xl-0, + .gy-xl-0 { + --bs-gutter-y: 0 !important; + } + + .g-xl-1, + .gx-xl-1 { + --bs-gutter-x: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-xl-1, + .gy-xl-1 { + --bs-gutter-y: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-xl-2, + .gx-xl-2 { + --bs-gutter-x: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-xl-2, + .gy-xl-2 { + --bs-gutter-y: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-xl-3, + .gx-xl-3 { + --bs-gutter-x: 1.5rem !important; + } + + .g-xl-3, + .gy-xl-3 { + --bs-gutter-y: 1.5rem !important; + } + + .g-xl-4, + .gx-xl-4 { + --bs-gutter-x: 2.5rem !important; + } + + .g-xl-4, + .gy-xl-4 { + --bs-gutter-y: 2.5rem !important; + } + + .g-xl-5, + .gx-xl-5 { + --bs-gutter-x: 3.5rem !important; + } + + .g-xl-5, + .gy-xl-5 { + --bs-gutter-y: 3.5rem !important; + } + } + + @media (min-width: 1640px) { + .col-xxl { + flex: 1 0 0%; + } + + .row-cols-xxl-auto > * { + flex: 0 0 auto; + width: auto; + } + + .row-cols-xxl-1 > * { + flex: 0 0 auto; + width: 100%; + } + + .row-cols-xxl-2 > * { + flex: 0 0 auto; + width: 50%; + } + + .row-cols-xxl-3 > * { + flex: 0 0 auto; + width: 33.33333333%; + } + + .row-cols-xxl-4 > * { + flex: 0 0 auto; + width: 25%; + } + + .row-cols-xxl-5 > * { + flex: 0 0 auto; + width: 20%; + } + + .row-cols-xxl-6 > * { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-xxl-auto { + flex: 0 0 auto; + width: auto; + } + + .col-xxl-1 { + flex: 0 0 auto; + width: 8.33333333%; + } + + .col-xxl-2 { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-xxl-3 { + flex: 0 0 auto; + width: 25%; + } + + .col-xxl-4 { + flex: 0 0 auto; + width: 33.33333333%; + } + + .col-xxl-5 { + flex: 0 0 auto; + width: 41.66666667%; + } + + .col-xxl-6 { + flex: 0 0 auto; + width: 50%; + } + + .col-xxl-7 { + flex: 0 0 auto; + width: 58.33333333%; + } + + .col-xxl-8 { + flex: 0 0 auto; + width: 66.66666667%; + } + + .col-xxl-9 { + flex: 0 0 auto; + width: 75%; + } + + .col-xxl-10 { + flex: 0 0 auto; + width: 83.33333333%; + } + + .col-xxl-11 { + flex: 0 0 auto; + width: 91.66666667%; + } + + .col-xxl-12 { + flex: 0 0 auto; + width: 100%; + } + + .offset-xxl-0 { + margin-left: 0; + } + + .offset-xxl-1 { + margin-left: 8.33333333%; + } + + .offset-xxl-2 { + margin-left: 16.66666667%; + } + + .offset-xxl-3 { + margin-left: 25%; + } + + .offset-xxl-4 { + margin-left: 33.33333333%; + } + + .offset-xxl-5 { + margin-left: 41.66666667%; + } + + .offset-xxl-6 { + margin-left: 50%; + } + + .offset-xxl-7 { + margin-left: 58.33333333%; + } + + .offset-xxl-8 { + margin-left: 66.66666667%; + } + + .offset-xxl-9 { + margin-left: 75%; + } + + .offset-xxl-10 { + margin-left: 83.33333333%; + } + + .offset-xxl-11 { + margin-left: 91.66666667%; + } + + .g-xxl-none, + .gx-xxl-none { + --bs-gutter-x: 0 !important; + } + + .g-xxl-none, + .gy-xxl-none { + --bs-gutter-y: 0 !important; + } + + .g-xxl-smash, + .gx-xxl-smash { + --bs-gutter-x: 2px !important; + } + + .g-xxl-smash, + .gy-xxl-smash { + --bs-gutter-y: 2px !important; + } + + .g-xxl-shortest, + .gx-xxl-shortest { + --bs-gutter-x: 4px !important; + } + + .g-xxl-shortest, + .gy-xxl-shortest { + --bs-gutter-y: 4px !important; + } + + .g-xxl-shorter, + .gx-xxl-shorter { + --bs-gutter-x: 8px !important; + } + + .g-xxl-shorter, + .gy-xxl-shorter { + --bs-gutter-y: 8px !important; + } + + .g-xxl-short, + .gx-xxl-short { + --bs-gutter-x: 12px !important; + } + + .g-xxl-short, + .gy-xxl-short { + --bs-gutter-y: 12px !important; + } + + .g-xxl-medium, + .gx-xxl-medium { + --bs-gutter-x: 16px !important; + } + + .g-xxl-medium, + .gy-xxl-medium { + --bs-gutter-y: 16px !important; + } + + .g-xxl-tall, + .gx-xxl-tall { + --bs-gutter-x: 24px !important; + } + + .g-xxl-tall, + .gy-xxl-tall { + --bs-gutter-y: 24px !important; + } + + .g-xxl-taller, + .gx-xxl-taller { + --bs-gutter-x: 32px !important; + } + + .g-xxl-taller, + .gy-xxl-taller { + --bs-gutter-y: 32px !important; + } + + .g-xxl-tallest, + .gx-xxl-tallest { + --bs-gutter-x: 40px !important; + } + + .g-xxl-tallest, + .gy-xxl-tallest { + --bs-gutter-y: 40px !important; + } + + .g-xxl-spacious, + .gx-xxl-spacious { + --bs-gutter-x: 48px !important; + } + + .g-xxl-spacious, + .gy-xxl-spacious { + --bs-gutter-y: 48px !important; + } + + .g-xxl-huge, + .gx-xxl-huge { + --bs-gutter-x: 56px !important; + } + + .g-xxl-huge, + .gy-xxl-huge { + --bs-gutter-y: 56px !important; + } + + .g-xxl-jumbo, + .gx-xxl-jumbo { + --bs-gutter-x: 64px !important; + } + + .g-xxl-jumbo, + .gy-xxl-jumbo { + --bs-gutter-y: 64px !important; + } + + .g-xxl-0, + .gx-xxl-0 { + --bs-gutter-x: 0 !important; + } + + .g-xxl-0, + .gy-xxl-0 { + --bs-gutter-y: 0 !important; + } + + .g-xxl-1, + .gx-xxl-1 { + --bs-gutter-x: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-xxl-1, + .gy-xxl-1 { + --bs-gutter-y: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-xxl-2, + .gx-xxl-2 { + --bs-gutter-x: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-xxl-2, + .gy-xxl-2 { + --bs-gutter-y: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-xxl-3, + .gx-xxl-3 { + --bs-gutter-x: 1.5rem !important; + } + + .g-xxl-3, + .gy-xxl-3 { + --bs-gutter-y: 1.5rem !important; + } + + .g-xxl-4, + .gx-xxl-4 { + --bs-gutter-x: 2.5rem !important; + } + + .g-xxl-4, + .gy-xxl-4 { + --bs-gutter-y: 2.5rem !important; + } + + .g-xxl-5, + .gx-xxl-5 { + --bs-gutter-x: 3.5rem !important; + } + + .g-xxl-5, + .gy-xxl-5 { + --bs-gutter-y: 3.5rem !important; + } + } + + @media (min-width: 1640px) { + .col-2xl { + flex: 1 0 0%; + } + + .row-cols-2xl-auto > * { + flex: 0 0 auto; + width: auto; + } + + .row-cols-2xl-1 > * { + flex: 0 0 auto; + width: 100%; + } + + .row-cols-2xl-2 > * { + flex: 0 0 auto; + width: 50%; + } + + .row-cols-2xl-3 > * { + flex: 0 0 auto; + width: 33.33333333%; + } + + .row-cols-2xl-4 > * { + flex: 0 0 auto; + width: 25%; + } + + .row-cols-2xl-5 > * { + flex: 0 0 auto; + width: 20%; + } + + .row-cols-2xl-6 > * { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-2xl-auto { + flex: 0 0 auto; + width: auto; + } + + .col-2xl-1 { + flex: 0 0 auto; + width: 8.33333333%; + } + + .col-2xl-2 { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-2xl-3 { + flex: 0 0 auto; + width: 25%; + } + + .col-2xl-4 { + flex: 0 0 auto; + width: 33.33333333%; + } + + .col-2xl-5 { + flex: 0 0 auto; + width: 41.66666667%; + } + + .col-2xl-6 { + flex: 0 0 auto; + width: 50%; + } + + .col-2xl-7 { + flex: 0 0 auto; + width: 58.33333333%; + } + + .col-2xl-8 { + flex: 0 0 auto; + width: 66.66666667%; + } + + .col-2xl-9 { + flex: 0 0 auto; + width: 75%; + } + + .col-2xl-10 { + flex: 0 0 auto; + width: 83.33333333%; + } + + .col-2xl-11 { + flex: 0 0 auto; + width: 91.66666667%; + } + + .col-2xl-12 { + flex: 0 0 auto; + width: 100%; + } + + .offset-2xl-0 { + margin-left: 0; + } + + .offset-2xl-1 { + margin-left: 8.33333333%; + } + + .offset-2xl-2 { + margin-left: 16.66666667%; + } + + .offset-2xl-3 { + margin-left: 25%; + } + + .offset-2xl-4 { + margin-left: 33.33333333%; + } + + .offset-2xl-5 { + margin-left: 41.66666667%; + } + + .offset-2xl-6 { + margin-left: 50%; + } + + .offset-2xl-7 { + margin-left: 58.33333333%; + } + + .offset-2xl-8 { + margin-left: 66.66666667%; + } + + .offset-2xl-9 { + margin-left: 75%; + } + + .offset-2xl-10 { + margin-left: 83.33333333%; + } + + .offset-2xl-11 { + margin-left: 91.66666667%; + } + + .g-2xl-none, + .gx-2xl-none { + --bs-gutter-x: 0 !important; + } + + .g-2xl-none, + .gy-2xl-none { + --bs-gutter-y: 0 !important; + } + + .g-2xl-smash, + .gx-2xl-smash { + --bs-gutter-x: 2px !important; + } + + .g-2xl-smash, + .gy-2xl-smash { + --bs-gutter-y: 2px !important; + } + + .g-2xl-shortest, + .gx-2xl-shortest { + --bs-gutter-x: 4px !important; + } + + .g-2xl-shortest, + .gy-2xl-shortest { + --bs-gutter-y: 4px !important; + } + + .g-2xl-shorter, + .gx-2xl-shorter { + --bs-gutter-x: 8px !important; + } + + .g-2xl-shorter, + .gy-2xl-shorter { + --bs-gutter-y: 8px !important; + } + + .g-2xl-short, + .gx-2xl-short { + --bs-gutter-x: 12px !important; + } + + .g-2xl-short, + .gy-2xl-short { + --bs-gutter-y: 12px !important; + } + + .g-2xl-medium, + .gx-2xl-medium { + --bs-gutter-x: 16px !important; + } + + .g-2xl-medium, + .gy-2xl-medium { + --bs-gutter-y: 16px !important; + } + + .g-2xl-tall, + .gx-2xl-tall { + --bs-gutter-x: 24px !important; + } + + .g-2xl-tall, + .gy-2xl-tall { + --bs-gutter-y: 24px !important; + } + + .g-2xl-taller, + .gx-2xl-taller { + --bs-gutter-x: 32px !important; + } + + .g-2xl-taller, + .gy-2xl-taller { + --bs-gutter-y: 32px !important; + } + + .g-2xl-tallest, + .gx-2xl-tallest { + --bs-gutter-x: 40px !important; + } + + .g-2xl-tallest, + .gy-2xl-tallest { + --bs-gutter-y: 40px !important; + } + + .g-2xl-spacious, + .gx-2xl-spacious { + --bs-gutter-x: 48px !important; + } + + .g-2xl-spacious, + .gy-2xl-spacious { + --bs-gutter-y: 48px !important; + } + + .g-2xl-huge, + .gx-2xl-huge { + --bs-gutter-x: 56px !important; + } + + .g-2xl-huge, + .gy-2xl-huge { + --bs-gutter-y: 56px !important; + } + + .g-2xl-jumbo, + .gx-2xl-jumbo { + --bs-gutter-x: 64px !important; + } + + .g-2xl-jumbo, + .gy-2xl-jumbo { + --bs-gutter-y: 64px !important; + } + + .g-2xl-0, + .gx-2xl-0 { + --bs-gutter-x: 0 !important; + } + + .g-2xl-0, + .gy-2xl-0 { + --bs-gutter-y: 0 !important; + } + + .g-2xl-1, + .gx-2xl-1 { + --bs-gutter-x: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-2xl-1, + .gy-2xl-1 { + --bs-gutter-y: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-2xl-2, + .gx-2xl-2 { + --bs-gutter-x: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-2xl-2, + .gy-2xl-2 { + --bs-gutter-y: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-2xl-3, + .gx-2xl-3 { + --bs-gutter-x: 1.5rem !important; + } + + .g-2xl-3, + .gy-2xl-3 { + --bs-gutter-y: 1.5rem !important; + } + + .g-2xl-4, + .gx-2xl-4 { + --bs-gutter-x: 2.5rem !important; + } + + .g-2xl-4, + .gy-2xl-4 { + --bs-gutter-y: 2.5rem !important; + } + + .g-2xl-5, + .gx-2xl-5 { + --bs-gutter-x: 3.5rem !important; + } + + .g-2xl-5, + .gy-2xl-5 { + --bs-gutter-y: 3.5rem !important; + } + } + + @media (min-width: 1880px) { + .col-3xl { + flex: 1 0 0%; + } + + .row-cols-3xl-auto > * { + flex: 0 0 auto; + width: auto; + } + + .row-cols-3xl-1 > * { + flex: 0 0 auto; + width: 100%; + } + + .row-cols-3xl-2 > * { + flex: 0 0 auto; + width: 50%; + } + + .row-cols-3xl-3 > * { + flex: 0 0 auto; + width: 33.33333333%; + } + + .row-cols-3xl-4 > * { + flex: 0 0 auto; + width: 25%; + } + + .row-cols-3xl-5 > * { + flex: 0 0 auto; + width: 20%; + } + + .row-cols-3xl-6 > * { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-3xl-auto { + flex: 0 0 auto; + width: auto; + } + + .col-3xl-1 { + flex: 0 0 auto; + width: 8.33333333%; + } + + .col-3xl-2 { + flex: 0 0 auto; + width: 16.66666667%; + } + + .col-3xl-3 { + flex: 0 0 auto; + width: 25%; + } + + .col-3xl-4 { + flex: 0 0 auto; + width: 33.33333333%; + } + + .col-3xl-5 { + flex: 0 0 auto; + width: 41.66666667%; + } + + .col-3xl-6 { + flex: 0 0 auto; + width: 50%; + } + + .col-3xl-7 { + flex: 0 0 auto; + width: 58.33333333%; + } + + .col-3xl-8 { + flex: 0 0 auto; + width: 66.66666667%; + } + + .col-3xl-9 { + flex: 0 0 auto; + width: 75%; + } + + .col-3xl-10 { + flex: 0 0 auto; + width: 83.33333333%; + } + + .col-3xl-11 { + flex: 0 0 auto; + width: 91.66666667%; + } + + .col-3xl-12 { + flex: 0 0 auto; + width: 100%; + } + + .offset-3xl-0 { + margin-left: 0; + } + + .offset-3xl-1 { + margin-left: 8.33333333%; + } + + .offset-3xl-2 { + margin-left: 16.66666667%; + } + + .offset-3xl-3 { + margin-left: 25%; + } + + .offset-3xl-4 { + margin-left: 33.33333333%; + } + + .offset-3xl-5 { + margin-left: 41.66666667%; + } + + .offset-3xl-6 { + margin-left: 50%; + } + + .offset-3xl-7 { + margin-left: 58.33333333%; + } + + .offset-3xl-8 { + margin-left: 66.66666667%; + } + + .offset-3xl-9 { + margin-left: 75%; + } + + .offset-3xl-10 { + margin-left: 83.33333333%; + } + + .offset-3xl-11 { + margin-left: 91.66666667%; + } + + .g-3xl-none, + .gx-3xl-none { + --bs-gutter-x: 0 !important; + } + + .g-3xl-none, + .gy-3xl-none { + --bs-gutter-y: 0 !important; + } + + .g-3xl-smash, + .gx-3xl-smash { + --bs-gutter-x: 2px !important; + } + + .g-3xl-smash, + .gy-3xl-smash { + --bs-gutter-y: 2px !important; + } + + .g-3xl-shortest, + .gx-3xl-shortest { + --bs-gutter-x: 4px !important; + } + + .g-3xl-shortest, + .gy-3xl-shortest { + --bs-gutter-y: 4px !important; + } + + .g-3xl-shorter, + .gx-3xl-shorter { + --bs-gutter-x: 8px !important; + } + + .g-3xl-shorter, + .gy-3xl-shorter { + --bs-gutter-y: 8px !important; + } + + .g-3xl-short, + .gx-3xl-short { + --bs-gutter-x: 12px !important; + } + + .g-3xl-short, + .gy-3xl-short { + --bs-gutter-y: 12px !important; + } + + .g-3xl-medium, + .gx-3xl-medium { + --bs-gutter-x: 16px !important; + } + + .g-3xl-medium, + .gy-3xl-medium { + --bs-gutter-y: 16px !important; + } + + .g-3xl-tall, + .gx-3xl-tall { + --bs-gutter-x: 24px !important; + } + + .g-3xl-tall, + .gy-3xl-tall { + --bs-gutter-y: 24px !important; + } + + .g-3xl-taller, + .gx-3xl-taller { + --bs-gutter-x: 32px !important; + } + + .g-3xl-taller, + .gy-3xl-taller { + --bs-gutter-y: 32px !important; + } + + .g-3xl-tallest, + .gx-3xl-tallest { + --bs-gutter-x: 40px !important; + } + + .g-3xl-tallest, + .gy-3xl-tallest { + --bs-gutter-y: 40px !important; + } + + .g-3xl-spacious, + .gx-3xl-spacious { + --bs-gutter-x: 48px !important; + } + + .g-3xl-spacious, + .gy-3xl-spacious { + --bs-gutter-y: 48px !important; + } + + .g-3xl-huge, + .gx-3xl-huge { + --bs-gutter-x: 56px !important; + } + + .g-3xl-huge, + .gy-3xl-huge { + --bs-gutter-y: 56px !important; + } + + .g-3xl-jumbo, + .gx-3xl-jumbo { + --bs-gutter-x: 64px !important; + } + + .g-3xl-jumbo, + .gy-3xl-jumbo { + --bs-gutter-y: 64px !important; + } + + .g-3xl-0, + .gx-3xl-0 { + --bs-gutter-x: 0 !important; + } + + .g-3xl-0, + .gy-3xl-0 { + --bs-gutter-y: 0 !important; + } + + .g-3xl-1, + .gx-3xl-1 { + --bs-gutter-x: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-3xl-1, + .gy-3xl-1 { + --bs-gutter-y: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-3xl-2, + .gx-3xl-2 { + --bs-gutter-x: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-3xl-2, + .gy-3xl-2 { + --bs-gutter-y: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero + } + + .g-3xl-3, + .gx-3xl-3 { + --bs-gutter-x: 1.5rem !important; + } + + .g-3xl-3, + .gy-3xl-3 { + --bs-gutter-y: 1.5rem !important; + } + + .g-3xl-4, + .gx-3xl-4 { + --bs-gutter-x: 2.5rem !important; + } + + .g-3xl-4, + .gy-3xl-4 { + --bs-gutter-y: 2.5rem !important; + } + + .g-3xl-5, + .gx-3xl-5 { + --bs-gutter-x: 3.5rem !important; + } + + .g-3xl-5, + .gy-3xl-5 { + --bs-gutter-y: 3.5rem !important; + } + } + } + } + } +} +// stylelint-enable no-duplicate-at-import-rules diff --git a/scss/tests/customize/_ouds-web-bootstrap.test.scss b/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss similarity index 77% rename from scss/tests/customize/_ouds-web-bootstrap.test.scss rename to scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss index 2e72af7fae..e0eaacdd4d 100644 --- a/scss/tests/customize/_ouds-web-bootstrap.test.scss +++ b/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss @@ -5,691 +5,907 @@ $utilities: (); @include describe("customize/ouds-web-bootstrap") { @include it("generates only OUDS utilities") { - $enable-bootstrap-compatibility: false !global; - @import "../../functions"; - @import "../../tokens/raw"; - @import "../../tokens/semantic"; - @import "../../tokens/composite"; - @import "../../tokens/component"; - @import "../../variables"; - @import "../../maps"; - @import "../../mixins"; - - $utilities: ( - "opacity": ( - property: opacity, - values: ( - 0: 0, - 25: .25, - 50: .5, - 75: .75, - 100: 1, - ), - bootstrap-compatibility: true - ), - "opacity-ouds": ( - property: opacity, - values: $ouds-opacities - ), - "border-ouds": ( - property: border, - values: ( - null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), - "none": 0, - ), - ), - "border": ( - property: border, - values: ( - 0: 0, - ), - bootstrap-compatibility: true - ), - "border-top": ( - property: border-top, - values: ( - 0: 0, - ), - bootstrap-compatibility: true - ), - "border-end": ( - property: border-right, - class: border-end, - values: ( - 0: 0, - ), - bootstrap-compatibility: true - ), - "border-bottom": ( - property: border-bottom, - values: ( - 0: 0, - ), - bootstrap-compatibility: true - ), - "border-start": ( - property: border-left, - class: border-start, - values: ( - 0: 0, - ), - bootstrap-compatibility: true - ), - "border-color": ( - property: border-color, - class: border, - local-vars: ( - "border-opacity": 1 - ), - values: $utilities-border-colors - ), - "subtle-border-color": ( - property: border-color, - class: border, - values: $utilities-border-subtle - ), - "border-width": ( - property: border-width, - class: border, - values: $border-widths, - bootstrap-compatibility: true - ), - "border-opacity": ( - css-var: true, - class: border-opacity, - values: ( - 10: .1, - 25: .25, - 50: .5, - 75: .75, - 100: 1 - ), - bootstrap-compatibility: true - ), - "border-top-ouds": ( - property: border-top, - values: ( - null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), - "none": $ouds-border-width-none, - ), - ), - "border-end-ouds": ( - property: border-right, - class: border-end, - values: ( - null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), - "none": 0, - ), - ), - "border-bottom-ouds": ( - property: border-bottom, - values: ( - null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), - "none": 0, - ), - ), - "border-start-ouds": ( - property: border-left, - class: border-start, - values: ( - null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), - "none": 0, - ), - ), - "border-width-ouds": ( - property: border-width, - class: border, - values: $ouds-border-widths - ), - "border-style-ouds": ( - property: border-style, - class: border, - values: $ouds-border-styles - ), - "rounded": ( - property: border-radius, - class: rounded, - values: ( - 0: 0, - 1: var(--#{$prefix}border-radius-sm), - 2: var(--#{$prefix}border-radius-lg), - 3: var(--#{$prefix}border-radius-xl), - 4: var(--#{$prefix}border-radius-xxl), - 5: $border-radius-xxl * 1.5, - ), - bootstrap-compatibility: true - ), - "rounded-top": ( - property: border-top-left-radius border-top-right-radius, - class: rounded-top, - values: ( - 0: 0, - 1: var(--#{$prefix}border-radius-sm), - 2: var(--#{$prefix}border-radius-lg), - 3: var(--#{$prefix}border-radius-xl), - 4: var(--#{$prefix}border-radius-xxl), - 5: $border-radius-xxl * 1.5, - ), - bootstrap-compatibility: true - ), - "rounded-end": ( - property: border-top-right-radius border-bottom-right-radius, - class: rounded-end, - values: ( - 0: 0, - 1: var(--#{$prefix}border-radius-sm), - 2: var(--#{$prefix}border-radius-lg), - 3: var(--#{$prefix}border-radius-xl), - 4: var(--#{$prefix}border-radius-xxl), - 5: $border-radius-xxl * 1.5, - ), - bootstrap-compatibility: true - ), - "rounded-bottom": ( - property: border-bottom-right-radius border-bottom-left-radius, - class: rounded-bottom, - values: ( - 0: 0, - 1: var(--#{$prefix}border-radius-sm), - 2: var(--#{$prefix}border-radius-lg), - 3: var(--#{$prefix}border-radius-xl), - 4: var(--#{$prefix}border-radius-xxl), - 5: $border-radius-xxl * 1.5, - ), - bootstrap-compatibility: true - ), - "rounded-start": ( - property: border-bottom-left-radius border-top-left-radius, - class: rounded-start, - values: ( - 0: 0, - 1: var(--#{$prefix}border-radius-sm), - 2: var(--#{$prefix}border-radius-lg), - 3: var(--#{$prefix}border-radius-xl), - 4: var(--#{$prefix}border-radius-xxl), - 5: $border-radius-xxl * 1.5, - ), - bootstrap-compatibility: true - ), - "rounded-ouds": ( - property: border-radius, - class: rounded, - values: $ouds-border-radiuses - ), - "rounded-top-ouds": ( - property: border-top-left-radius border-top-right-radius, - class: rounded-top, - values: $ouds-border-radiuses - ), - "rounded-end-ouds": ( - property: border-top-right-radius border-bottom-right-radius, - class: rounded-end, - values: $ouds-border-radiuses - ), - "rounded-bottom-ouds": ( - property: border-bottom-right-radius border-bottom-left-radius, - class: rounded-bottom, - values: $ouds-border-radiuses - ), - "rounded-start-ouds": ( - property: border-bottom-left-radius border-top-left-radius, - class: rounded-start, - values: $ouds-border-radiuses - ), - "margin": ( - responsive: true, - property: margin, - class: m, - values: $spacers, - bootstrap-compatibility: true - ), - "margin-x": ( - responsive: true, - property: margin-right margin-left, - class: mx, - values: $spacers, - bootstrap-compatibility: true - ), - "margin-y": ( - responsive: true, - property: margin-top margin-bottom, - class: my, - values: $spacers, - bootstrap-compatibility: true - ), - "margin-top": ( - responsive: true, - property: margin-top, - class: mt, - values: $spacers, - bootstrap-compatibility: true - ), - "margin-end": ( - responsive: true, - property: margin-right, - class: me, - values: $spacers, - bootstrap-compatibility: true - ), - "margin-bottom": ( - responsive: true, - property: margin-bottom, - class: mb, - values: $spacers, - bootstrap-compatibility: true - ), - "margin-start": ( - responsive: true, - property: margin-left, - class: ms, - values: $spacers, - bootstrap-compatibility: true - ), - "negative-margin": ( - responsive: true, - property: margin, - class: m, - values: $negative-spacers, - bootstrap-compatibility: true - ), - "negative-margin-x": ( - responsive: true, - property: margin-right margin-left, - class: mx, - values: $negative-spacers, - bootstrap-compatibility: true - ), - "negative-margin-y": ( - responsive: true, - property: margin-top margin-bottom, - class: my, - values: $negative-spacers, - bootstrap-compatibility: true - ), - "negative-margin-top": ( - responsive: true, - property: margin-top, - class: mt, - values: $negative-spacers, - bootstrap-compatibility: true - ), - "negative-margin-end": ( - responsive: true, - property: margin-right, - class: me, - values: $negative-spacers, - bootstrap-compatibility: true - ), - "negative-margin-bottom": ( - responsive: true, - property: margin-bottom, - class: mb, - values: $negative-spacers, - bootstrap-compatibility: true - ), - "negative-margin-start": ( - responsive: true, - property: margin-left, - class: ms, - values: $negative-spacers, - bootstrap-compatibility: true - ), - "padding": ( - responsive: true, - property: padding, - class: p, - values: $spacers, - bootstrap-compatibility: true - ), - "padding-x": ( - responsive: true, - property: padding-right padding-left, - class: px, - values: $spacers, - bootstrap-compatibility: true - ), - "padding-y": ( - responsive: true, - property: padding-top padding-bottom, - class: py, - values: $spacers, - bootstrap-compatibility: true - ), - "padding-top": ( - responsive: true, - property: padding-top, - class: pt, - values: $spacers, - bootstrap-compatibility: true - ), - "padding-end": ( - responsive: true, - property: padding-right, - class: pe, - values: $spacers, - bootstrap-compatibility: true - ), - "padding-bottom": ( - responsive: true, - property: padding-bottom, - class: pb, - values: $spacers, - bootstrap-compatibility: true - ), - "padding-start": ( - responsive: true, - property: padding-left, - class: ps, - values: $spacers, - bootstrap-compatibility: true - ), - "gap": ( - responsive: true, - property: gap, - class: gap, - values: $spacers, - bootstrap-compatibility: true - ), - "row-gap": ( - responsive: true, - property: row-gap, - class: row-gap, - values: $spacers, - bootstrap-compatibility: true - ), - "column-gap": ( - responsive: true, - property: column-gap, - class: column-gap, - values: $spacers, - bootstrap-compatibility: true - ), - "margin-ouds": ( - responsive: true, - property: margin, - class: m, - values: map-merge($ouds-dimension-space-fixed, (auto: auto)) - ), - "margin-scaled-ouds": ( - property: margin, - class: m-scaled, - values: $ouds-dimension-space-scaled - ), - "margin-x-ouds": ( - responsive: true, - property: margin-right margin-left, - class: mx, - values: map-merge($ouds-dimension-space-fixed, (auto: auto)) - ), - "margin-x-scaled-ouds": ( - property: margin-right margin-left, - class: mx-scaled, - values: $ouds-dimension-space-scaled - ), - "margin-y-ouds": ( - responsive: true, - property: margin-top margin-bottom, - class: my, - values: map-merge($ouds-dimension-space-fixed, (auto: auto)) - ), - "margin-y-scaled-ouds": ( - property: margin-top margin-bottom, - class: my-scaled, - values: $ouds-dimension-space-scaled - ), - "margin-top-ouds": ( - responsive: true, - property: margin-top, - class: mt, - values: map-merge($ouds-dimension-space-fixed, (auto: auto)) - ), - "margin-top-scaled-ouds": ( - property: margin-top, - class: mt-scaled, - values: $ouds-dimension-space-scaled - ), - "margin-end-ouds": ( - responsive: true, - property: margin-right, - class: me, - values: map-merge($ouds-dimension-space-fixed, (auto: auto)) - ), - "margin-end-scaled-ouds": ( - property: margin-right, - class: me-scaled, - values: $ouds-dimension-space-scaled - ), - "margin-bottom-ouds": ( - responsive: true, - property: margin-bottom, - class: mb, - values: map-merge($ouds-dimension-space-fixed, (auto: auto)) - ), - "margin-bottom-scaled-ouds": ( - property: margin-bottom, - class: mb-scaled, - values: $ouds-dimension-space-scaled - ), - "margin-start-ouds": ( - responsive: true, - property: margin-left, - class: ms, - values: map-merge($ouds-dimension-space-fixed, (auto: auto)) - ), - "margin-start-scaled-ouds": ( - property: margin-left, - class: ms-scaled, - values: $ouds-dimension-space-scaled - ), - "negative-margin-ouds": ( - responsive: true, - property: margin, - class: m, - values: $ouds-dimension-negative-space-fixed - ), - "negative-margin-scaled-ouds": ( - property: margin, - class: m-scaled, - values: $ouds-dimension-negative-space-scaled - ), - "negative-margin-x-ouds": ( - responsive: true, - property: margin-right margin-left, - class: mx, - values: $ouds-dimension-negative-space-fixed - ), - "negative-margin-x-scaled-ouds": ( - property: margin-right margin-left, - class: mx-scaled, - values: $ouds-dimension-negative-space-scaled - ), - "negative-margin-y-ouds": ( - responsive: true, - property: margin-top margin-bottom, - class: my, - values: $ouds-dimension-negative-space-fixed - ), - "negative-margin-y-scaled-ouds": ( - property: margin-top margin-bottom, - class: my-scaled, - values: $ouds-dimension-negative-space-scaled - ), - "negative-margin-top-ouds": ( - responsive: true, - property: margin-top, - class: mt, - values: $ouds-dimension-negative-space-fixed - ), - "negative-margin-top-scaled-ouds": ( - property: margin-top, - class: mt-scaled, - values: $ouds-dimension-negative-space-scaled - ), - "negative-margin-end-ouds": ( - responsive: true, - property: margin-right, - class: me, - values: $ouds-dimension-negative-space-fixed - ), - "negative-margin-end-scaled-ouds": ( - property: margin-right, - class: me-scaled, - values: $ouds-dimension-negative-space-scaled - ), - "negative-margin-bottom-ouds": ( - responsive: true, - property: margin-bottom, - class: mb, - values: $ouds-dimension-negative-space-fixed - ), - "negative-margin-bottom-scaled-ouds": ( - property: margin-bottom, - class: mb-scaled, - values: $ouds-dimension-negative-space-scaled - ), - "negative-margin-start-ouds": ( - responsive: true, - property: margin-left, - class: ms, - values: $ouds-dimension-negative-space-fixed - ), - "negative-margin-start-scaled-ouds": ( - property: margin-left, - class: ms-scaled, - values: $ouds-dimension-negative-space-scaled - ), - "padding-ouds": ( - responsive: true, - property: padding, - class: p, - values: $ouds-dimension-space-fixed - ), - "padding-scaled-ouds": ( - property: padding, - class: p-scaled, - values: $ouds-dimension-space-scaled - ), - "padding-x-ouds": ( - responsive: true, - property: padding-right padding-left, - class: px, - values: $ouds-dimension-space-fixed - ), - "padding-x-scaled-ouds": ( - property: padding-right padding-left, - class: px-scaled, - values: $ouds-dimension-space-scaled - ), - "padding-y-ouds": ( - responsive: true, - property: padding-top padding-bottom, - class: py, - values: $ouds-dimension-space-fixed - ), - "padding-y-scaled-ouds": ( - property: padding-top padding-bottom, - class: py-scaled, - values: $ouds-dimension-space-scaled - ), - "padding-top-ouds": ( - responsive: true, - property: padding-top, - class: pt, - values: $ouds-dimension-space-fixed - ), - "padding-top-scaled-ouds": ( - property: padding-top, - class: pt-scaled, - values: $ouds-dimension-space-scaled - ), - "padding-end-ouds": ( - responsive: true, - property: padding-right, - class: pe, - values: $ouds-dimension-space-fixed - ), - "padding-end-scaled-ouds": ( - property: padding-right, - class: pe-scaled, - values: $ouds-dimension-space-scaled - ), - "padding-bottom-ouds": ( - responsive: true, - property: padding-bottom, - class: pb, - values: $ouds-dimension-space-fixed - ), - "padding-bottom-scaled-ouds": ( - property: padding-bottom, - class: pb-scaled, - values: $ouds-dimension-space-scaled - ), - "padding-start-ouds": ( - responsive: true, - property: padding-left, - class: ps, - values: $ouds-dimension-space-fixed - ), - "padding-start-scaled-ouds": ( - property: padding-left, - class: ps-scaled, - values: $ouds-dimension-space-scaled - ), - "gap-ouds": ( - responsive: true, - property: gap, - class: gap, - values: $ouds-dimension-space-fixed - ), - "gap-scaled-ouds": ( - property: gap, - class: gap-scaled, - values: $ouds-dimension-space-scaled - ), - "row-gap-ouds": ( - responsive: true, - property: row-gap, - class: row-gap, - values: $ouds-dimension-space-fixed - ), - "row-gap-scaled-ouds": ( - property: row-gap, - class: row-gap-scaled, - values: $ouds-dimension-space-scaled - ), - "column-gap-ouds": ( - responsive: true, - property: column-gap, - class: column-gap, - values: $ouds-dimension-space-fixed - ), - "column-gap-scaled-ouds": ( - property: column-gap, - class: column-gap-scaled, - values: $ouds-dimension-space-scaled - ), - "shadow": ( - property: box-shadow, - class: shadow, - values: ( - null: var(--#{$prefix}box-shadow), - sm: var(--#{$prefix}box-shadow-sm), - lg: var(--#{$prefix}box-shadow-lg), - ), - bootstrap-compatibility: true - ), - "shadow-ouds": ( - property: box-shadow, - class: shadow, - values: $ouds-elevations - ), - ) !global; - @include assert() { @include output() { + $enable-bootstrap-compatibility: false !global; + @import "../../config"; + @import "../../functions"; + @import "../../tokens/raw"; + @import "../../tokens/semantic"; + @import "../../tokens/composite"; + @import "../../tokens/component"; + @import "../../variables"; + @import "../../maps"; + @import "../../mixins"; + + $utilities: ( + "opacity": ( + property: opacity, + values: ( + 0: 0, + 25: .25, + 50: .5, + 75: .75, + 100: 1, + ), + bootstrap-compatibility: true + ), + "opacity-ouds": ( + property: opacity, + values: $ouds-opacities + ), + "border-ouds": ( + property: border, + values: ( + null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), + "none": 0, + ), + ), + "border": ( + property: border, + values: ( + 0: 0, + ), + bootstrap-compatibility: true + ), + "border-top": ( + property: border-top, + values: ( + 0: 0, + ), + bootstrap-compatibility: true + ), + "border-end": ( + property: border-right, + class: border-end, + values: ( + 0: 0, + ), + bootstrap-compatibility: true + ), + "border-bottom": ( + property: border-bottom, + values: ( + 0: 0, + ), + bootstrap-compatibility: true + ), + "border-start": ( + property: border-left, + class: border-start, + values: ( + 0: 0, + ), + bootstrap-compatibility: true + ), + "border-color": ( + property: border-color, + class: border, + local-vars: ( + "border-opacity": 1 + ), + values: $utilities-border-colors + ), + "subtle-border-color": ( + property: border-color, + class: border, + values: $utilities-border-subtle + ), + "border-width": ( + property: border-width, + class: border, + values: $border-widths, + bootstrap-compatibility: true + ), + "border-opacity": ( + css-var: true, + class: border-opacity, + values: ( + 10: .1, + 25: .25, + 50: .5, + 75: .75, + 100: 1 + ), + bootstrap-compatibility: true + ), + "border-top-ouds": ( + property: border-top, + values: ( + null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), + "none": $ouds-border-width-none, + ), + ), + "border-end-ouds": ( + property: border-right, + class: border-end, + values: ( + null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), + "none": 0, + ), + ), + "border-bottom-ouds": ( + property: border-bottom, + values: ( + null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), + "none": 0, + ), + ), + "border-start-ouds": ( + property: border-left, + class: border-start, + values: ( + null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), + "none": 0, + ), + ), + "border-width-ouds": ( + property: border-width, + class: border, + values: $ouds-border-widths + ), + "border-style-ouds": ( + property: border-style, + class: border, + values: $ouds-border-styles + ), + "rounded": ( + property: border-radius, + class: rounded, + values: ( + 0: 0, + 1: var(--#{$prefix}border-radius-sm), + 2: var(--#{$prefix}border-radius-lg), + 3: var(--#{$prefix}border-radius-xl), + 4: var(--#{$prefix}border-radius-xxl), + 5: $border-radius-xxl * 1.5, + ), + bootstrap-compatibility: true + ), + "rounded-top": ( + property: border-top-left-radius border-top-right-radius, + class: rounded-top, + values: ( + 0: 0, + 1: var(--#{$prefix}border-radius-sm), + 2: var(--#{$prefix}border-radius-lg), + 3: var(--#{$prefix}border-radius-xl), + 4: var(--#{$prefix}border-radius-xxl), + 5: $border-radius-xxl * 1.5, + ), + bootstrap-compatibility: true + ), + "rounded-end": ( + property: border-top-right-radius border-bottom-right-radius, + class: rounded-end, + values: ( + 0: 0, + 1: var(--#{$prefix}border-radius-sm), + 2: var(--#{$prefix}border-radius-lg), + 3: var(--#{$prefix}border-radius-xl), + 4: var(--#{$prefix}border-radius-xxl), + 5: $border-radius-xxl * 1.5, + ), + bootstrap-compatibility: true + ), + "rounded-bottom": ( + property: border-bottom-right-radius border-bottom-left-radius, + class: rounded-bottom, + values: ( + 0: 0, + 1: var(--#{$prefix}border-radius-sm), + 2: var(--#{$prefix}border-radius-lg), + 3: var(--#{$prefix}border-radius-xl), + 4: var(--#{$prefix}border-radius-xxl), + 5: $border-radius-xxl * 1.5, + ), + bootstrap-compatibility: true + ), + "rounded-start": ( + property: border-bottom-left-radius border-top-left-radius, + class: rounded-start, + values: ( + 0: 0, + 1: var(--#{$prefix}border-radius-sm), + 2: var(--#{$prefix}border-radius-lg), + 3: var(--#{$prefix}border-radius-xl), + 4: var(--#{$prefix}border-radius-xxl), + 5: $border-radius-xxl * 1.5, + ), + bootstrap-compatibility: true + ), + "rounded-ouds": ( + property: border-radius, + class: rounded, + values: $ouds-border-radiuses + ), + "rounded-top-ouds": ( + property: border-top-left-radius border-top-right-radius, + class: rounded-top, + values: $ouds-border-radiuses + ), + "rounded-end-ouds": ( + property: border-top-right-radius border-bottom-right-radius, + class: rounded-end, + values: $ouds-border-radiuses + ), + "rounded-bottom-ouds": ( + property: border-bottom-right-radius border-bottom-left-radius, + class: rounded-bottom, + values: $ouds-border-radiuses + ), + "rounded-start-ouds": ( + property: border-bottom-left-radius border-top-left-radius, + class: rounded-start, + values: $ouds-border-radiuses + ), + "margin": ( + responsive: true, + property: margin, + class: m, + values: $spacers, + bootstrap-compatibility: true + ), + "margin-x": ( + responsive: true, + property: margin-right margin-left, + class: mx, + values: $spacers, + bootstrap-compatibility: true + ), + "margin-y": ( + responsive: true, + property: margin-top margin-bottom, + class: my, + values: $spacers, + bootstrap-compatibility: true + ), + "margin-top": ( + responsive: true, + property: margin-top, + class: mt, + values: $spacers, + bootstrap-compatibility: true + ), + "margin-end": ( + responsive: true, + property: margin-right, + class: me, + values: $spacers, + bootstrap-compatibility: true + ), + "margin-bottom": ( + responsive: true, + property: margin-bottom, + class: mb, + values: $spacers, + bootstrap-compatibility: true + ), + "margin-start": ( + responsive: true, + property: margin-left, + class: ms, + values: $spacers, + bootstrap-compatibility: true + ), + "negative-margin": ( + responsive: true, + property: margin, + class: m, + values: $negative-spacers, + bootstrap-compatibility: true + ), + "negative-margin-x": ( + responsive: true, + property: margin-right margin-left, + class: mx, + values: $negative-spacers, + bootstrap-compatibility: true + ), + "negative-margin-y": ( + responsive: true, + property: margin-top margin-bottom, + class: my, + values: $negative-spacers, + bootstrap-compatibility: true + ), + "negative-margin-top": ( + responsive: true, + property: margin-top, + class: mt, + values: $negative-spacers, + bootstrap-compatibility: true + ), + "negative-margin-end": ( + responsive: true, + property: margin-right, + class: me, + values: $negative-spacers, + bootstrap-compatibility: true + ), + "negative-margin-bottom": ( + responsive: true, + property: margin-bottom, + class: mb, + values: $negative-spacers, + bootstrap-compatibility: true + ), + "negative-margin-start": ( + responsive: true, + property: margin-left, + class: ms, + values: $negative-spacers, + bootstrap-compatibility: true + ), + "padding": ( + responsive: true, + property: padding, + class: p, + values: $spacers, + bootstrap-compatibility: true + ), + "padding-x": ( + responsive: true, + property: padding-right padding-left, + class: px, + values: $spacers, + bootstrap-compatibility: true + ), + "padding-y": ( + responsive: true, + property: padding-top padding-bottom, + class: py, + values: $spacers, + bootstrap-compatibility: true + ), + "padding-top": ( + responsive: true, + property: padding-top, + class: pt, + values: $spacers, + bootstrap-compatibility: true + ), + "padding-end": ( + responsive: true, + property: padding-right, + class: pe, + values: $spacers, + bootstrap-compatibility: true + ), + "padding-bottom": ( + responsive: true, + property: padding-bottom, + class: pb, + values: $spacers, + bootstrap-compatibility: true + ), + "padding-start": ( + responsive: true, + property: padding-left, + class: ps, + values: $spacers, + bootstrap-compatibility: true + ), + "gap": ( + responsive: true, + property: gap, + class: gap, + values: $spacers, + bootstrap-compatibility: true + ), + "row-gap": ( + responsive: true, + property: row-gap, + class: row-gap, + values: $spacers, + bootstrap-compatibility: true + ), + "column-gap": ( + responsive: true, + property: column-gap, + class: column-gap, + values: $spacers, + bootstrap-compatibility: true + ), + "margin-ouds": ( + responsive: true, + property: margin, + class: m, + values: map-merge($ouds-dimension-space-fixed, (auto: auto)) + ), + "margin-scaled-ouds": ( + property: margin, + class: m-scaled, + values: $ouds-dimension-space-scaled + ), + "margin-x-ouds": ( + responsive: true, + property: margin-right margin-left, + class: mx, + values: map-merge($ouds-dimension-space-fixed, (auto: auto)) + ), + "margin-x-scaled-ouds": ( + property: margin-right margin-left, + class: mx-scaled, + values: $ouds-dimension-space-scaled + ), + "margin-y-ouds": ( + responsive: true, + property: margin-top margin-bottom, + class: my, + values: map-merge($ouds-dimension-space-fixed, (auto: auto)) + ), + "margin-y-scaled-ouds": ( + property: margin-top margin-bottom, + class: my-scaled, + values: $ouds-dimension-space-scaled + ), + "margin-top-ouds": ( + responsive: true, + property: margin-top, + class: mt, + values: map-merge($ouds-dimension-space-fixed, (auto: auto)) + ), + "margin-top-scaled-ouds": ( + property: margin-top, + class: mt-scaled, + values: $ouds-dimension-space-scaled + ), + "margin-end-ouds": ( + responsive: true, + property: margin-right, + class: me, + values: map-merge($ouds-dimension-space-fixed, (auto: auto)) + ), + "margin-end-scaled-ouds": ( + property: margin-right, + class: me-scaled, + values: $ouds-dimension-space-scaled + ), + "margin-bottom-ouds": ( + responsive: true, + property: margin-bottom, + class: mb, + values: map-merge($ouds-dimension-space-fixed, (auto: auto)) + ), + "margin-bottom-scaled-ouds": ( + property: margin-bottom, + class: mb-scaled, + values: $ouds-dimension-space-scaled + ), + "margin-start-ouds": ( + responsive: true, + property: margin-left, + class: ms, + values: map-merge($ouds-dimension-space-fixed, (auto: auto)) + ), + "margin-start-scaled-ouds": ( + property: margin-left, + class: ms-scaled, + values: $ouds-dimension-space-scaled + ), + "negative-margin-ouds": ( + responsive: true, + property: margin, + class: m, + values: $ouds-dimension-negative-space-fixed + ), + "negative-margin-scaled-ouds": ( + property: margin, + class: m-scaled, + values: $ouds-dimension-negative-space-scaled + ), + "negative-margin-x-ouds": ( + responsive: true, + property: margin-right margin-left, + class: mx, + values: $ouds-dimension-negative-space-fixed + ), + "negative-margin-x-scaled-ouds": ( + property: margin-right margin-left, + class: mx-scaled, + values: $ouds-dimension-negative-space-scaled + ), + "negative-margin-y-ouds": ( + responsive: true, + property: margin-top margin-bottom, + class: my, + values: $ouds-dimension-negative-space-fixed + ), + "negative-margin-y-scaled-ouds": ( + property: margin-top margin-bottom, + class: my-scaled, + values: $ouds-dimension-negative-space-scaled + ), + "negative-margin-top-ouds": ( + responsive: true, + property: margin-top, + class: mt, + values: $ouds-dimension-negative-space-fixed + ), + "negative-margin-top-scaled-ouds": ( + property: margin-top, + class: mt-scaled, + values: $ouds-dimension-negative-space-scaled + ), + "negative-margin-end-ouds": ( + responsive: true, + property: margin-right, + class: me, + values: $ouds-dimension-negative-space-fixed + ), + "negative-margin-end-scaled-ouds": ( + property: margin-right, + class: me-scaled, + values: $ouds-dimension-negative-space-scaled + ), + "negative-margin-bottom-ouds": ( + responsive: true, + property: margin-bottom, + class: mb, + values: $ouds-dimension-negative-space-fixed + ), + "negative-margin-bottom-scaled-ouds": ( + property: margin-bottom, + class: mb-scaled, + values: $ouds-dimension-negative-space-scaled + ), + "negative-margin-start-ouds": ( + responsive: true, + property: margin-left, + class: ms, + values: $ouds-dimension-negative-space-fixed + ), + "negative-margin-start-scaled-ouds": ( + property: margin-left, + class: ms-scaled, + values: $ouds-dimension-negative-space-scaled + ), + "padding-ouds": ( + responsive: true, + property: padding, + class: p, + values: $ouds-dimension-space-fixed + ), + "padding-scaled-ouds": ( + property: padding, + class: p-scaled, + values: $ouds-dimension-space-scaled + ), + "padding-x-ouds": ( + responsive: true, + property: padding-right padding-left, + class: px, + values: $ouds-dimension-space-fixed + ), + "padding-x-scaled-ouds": ( + property: padding-right padding-left, + class: px-scaled, + values: $ouds-dimension-space-scaled + ), + "padding-y-ouds": ( + responsive: true, + property: padding-top padding-bottom, + class: py, + values: $ouds-dimension-space-fixed + ), + "padding-y-scaled-ouds": ( + property: padding-top padding-bottom, + class: py-scaled, + values: $ouds-dimension-space-scaled + ), + "padding-top-ouds": ( + responsive: true, + property: padding-top, + class: pt, + values: $ouds-dimension-space-fixed + ), + "padding-top-scaled-ouds": ( + property: padding-top, + class: pt-scaled, + values: $ouds-dimension-space-scaled + ), + "padding-end-ouds": ( + responsive: true, + property: padding-right, + class: pe, + values: $ouds-dimension-space-fixed + ), + "padding-end-scaled-ouds": ( + property: padding-right, + class: pe-scaled, + values: $ouds-dimension-space-scaled + ), + "padding-bottom-ouds": ( + responsive: true, + property: padding-bottom, + class: pb, + values: $ouds-dimension-space-fixed + ), + "padding-bottom-scaled-ouds": ( + property: padding-bottom, + class: pb-scaled, + values: $ouds-dimension-space-scaled + ), + "padding-start-ouds": ( + responsive: true, + property: padding-left, + class: ps, + values: $ouds-dimension-space-fixed + ), + "padding-start-scaled-ouds": ( + property: padding-left, + class: ps-scaled, + values: $ouds-dimension-space-scaled + ), + "gap-ouds": ( + responsive: true, + property: gap, + class: gap, + values: $ouds-dimension-space-fixed + ), + "gap-scaled-ouds": ( + property: gap, + class: gap-scaled, + values: $ouds-dimension-space-scaled + ), + "row-gap-ouds": ( + responsive: true, + property: row-gap, + class: row-gap, + values: $ouds-dimension-space-fixed + ), + "row-gap-scaled-ouds": ( + property: row-gap, + class: row-gap-scaled, + values: $ouds-dimension-space-scaled + ), + "column-gap-ouds": ( + responsive: true, + property: column-gap, + class: column-gap, + values: $ouds-dimension-space-fixed + ), + "column-gap-scaled-ouds": ( + property: column-gap, + class: column-gap-scaled, + values: $ouds-dimension-space-scaled + ), + "font-family": ( + property: font-family, + class: font, + values: (monospace: var(--#{$prefix}font-monospace)) + ), + "font-size": ( + property: font-size, + class: fs, + values: $font-sizes, + bootstrap-compatibility: true + ), + "font-weight": ( + property: font-weight, + class: fw, + values: ( + lighter: $font-weight-lighter, + light: $font-weight-light, + medium: $font-weight-medium, + semibold: $font-weight-semibold, + bolder: $font-weight-bolder + ), + bootstrap-compatibility: true + ), + "line-height": ( + property: line-height, + class: lh, + values: ( + 1: 1, + sm: 1.25, + base: 1.5, + lg: 2, + ), + bootstrap-compatibility: true + ), + "text-align": ( + responsive: true, + property: text-align, + class: text, + values: ( + start: left, + end: right, + center: center, + ) + ), + "text-decoration": ( + property: text-decoration, + values: none underline line-through + ), + "text-transform": ( + property: text-transform, + class: text, + values: lowercase uppercase capitalize + ), + "white-space": ( + property: white-space, + class: text, + values: ( + wrap: normal, + nowrap: nowrap, + ) + ), + "word-wrap": ( + property: word-break word-wrap, + class: text, + values: (break: break-word), + rtl: false + ), + "font-size-ouds": ( + property: font-size, + class: fs, + values: $ouds-font-sizes + ), + "font-weight-ouds": ( + property: font-weight, + class: fw, + values: $ouds-font-weights + ), + "shadow": ( + property: box-shadow, + class: shadow, + values: ( + null: var(--#{$prefix}box-shadow), + sm: var(--#{$prefix}box-shadow-sm), + lg: var(--#{$prefix}box-shadow-lg), + ), + bootstrap-compatibility: true + ), + "shadow-ouds": ( + property: box-shadow, + class: shadow, + values: $ouds-elevations + ), + ) !global; + @import "../../utilities/api"; } @include expect() { + .fs-dl { + max-width: var(--bs-font-max-width-display-large); + font-size: var(--bs-font-size-display-large); + line-height: var(--bs-font-line-height-display-large); + + /* rtl:remove */ + letter-spacing: var(--bs-font-letter-spacing-display-large); + } + + .fs-dm { + max-width: var(--bs-font-max-width-display-medium); + font-size: var(--bs-font-size-display-medium); + line-height: var(--bs-font-line-height-display-medium); + + /* rtl:remove */ + letter-spacing: var(--bs-font-letter-spacing-display-medium); + } + + .fs-ds { + max-width: var(--bs-font-max-width-display-small); + font-size: var(--bs-font-size-display-small); + line-height: var(--bs-font-line-height-display-small); + + /* rtl:remove */ + letter-spacing: var(--bs-font-letter-spacing-display-small); + } + + .fs-hxl { + max-width: var(--bs-font-max-width-heading-xlarge); + font-size: var(--bs-font-size-heading-xlarge); + line-height: var(--bs-font-line-height-heading-xlarge); + + /* rtl:remove */ + letter-spacing: var(--bs-font-letter-spacing-heading-xlarge); + } + + .fs-hl { + max-width: var(--bs-font-max-width-heading-large); + font-size: var(--bs-font-size-heading-large); + line-height: var(--bs-font-line-height-heading-large); + + /* rtl:remove */ + letter-spacing: var(--bs-font-letter-spacing-heading-large); + } + + .fs-hm { + max-width: var(--bs-font-max-width-heading-medium); + font-size: var(--bs-font-size-heading-medium); + line-height: var(--bs-font-line-height-heading-medium); + + /* rtl:remove */ + letter-spacing: var(--bs-font-letter-spacing-heading-medium); + } + + .fs-hs { + max-width: var(--bs-font-max-width-heading-small); + font-size: var(--bs-font-size-heading-small); + line-height: var(--bs-font-line-height-heading-small); + + /* rtl:remove */ + letter-spacing: var(--bs-font-letter-spacing-heading-small); + } + + .fs-bl { + max-width: var(--bs-font-max-width-body-large); + font-size: var(--bs-font-size-body-large); + line-height: var(--bs-font-line-height-body-large); + + /* rtl:remove */ + letter-spacing: var(--bs-font-letter-spacing-body-large); + } + + .fs-bm { + max-width: var(--bs-font-max-width-body-medium); + font-size: var(--bs-font-size-body-medium); + line-height: var(--bs-font-line-height-body-medium); + + /* rtl:remove */ + letter-spacing: var(--bs-font-letter-spacing-body-medium); + } + + .fs-bs { + max-width: var(--bs-font-max-width-body-small); + font-size: var(--bs-font-size-body-small); + line-height: var(--bs-font-line-height-body-small); + + /* rtl:remove */ + letter-spacing: var(--bs-font-letter-spacing-body-small); + } + + .fs-lxl { + font-size: 1.125rem; + line-height: 1.3333333333; + + /* rtl:remove */ + letter-spacing: 0.01125rem; // stylelint-disable-line @stylistic/number-leading-zero + } + + .fs-ll { + font-size: 1rem; + line-height: 1.5; + + /* rtl:remove */ + letter-spacing: 0.0125rem; // stylelint-disable-line @stylistic/number-leading-zero + } + + .fs-lm { + font-size: 0.875rem; // stylelint-disable-line @stylistic/number-leading-zero + line-height: 1.4285714286; + + /* rtl:remove */ + letter-spacing: 0.010625rem; // stylelint-disable-line @stylistic/number-leading-zero + } + + .fs-ls { + font-size: 0.75rem; // stylelint-disable-line @stylistic/number-leading-zero + line-height: 1.3333333333; + + /* rtl:remove */ + letter-spacing: 0.01125rem; // stylelint-disable-line @stylistic/number-leading-zero + } + + .fs-cm { + font-size: 0.875rem; // stylelint-disable-line @stylistic/number-leading-zero + line-height: 1.4285714286; + + /* rtl:remove */ + letter-spacing: 0.010625rem; // stylelint-disable-line @stylistic/number-leading-zero + } + + .fs-cs { + font-size: 0.75rem; // stylelint-disable-line @stylistic/number-leading-zero + line-height: 1.3333333333; + + /* rtl:remove */ + letter-spacing: 0.01125rem; // stylelint-disable-line @stylistic/number-leading-zero + } + .opacity-transparent { opacity: 0 !important; } @@ -2908,6 +3124,70 @@ $utilities: (); column-gap: var(--bs-space-scaled-spacious) !important; } + .font-monospace { + font-family: var(--bs-font-monospace) !important; + } + + .text-start { + text-align: left !important; + } + + .text-end { + text-align: right !important; + } + + .text-center { + text-align: center !important; + } + + .text-decoration-none { + text-decoration: none !important; + } + + .text-decoration-underline { + text-decoration: underline !important; + } + + .text-decoration-line-through { + text-decoration: line-through !important; + } + + .text-lowercase { + text-transform: lowercase !important; + } + + .text-uppercase { + text-transform: uppercase !important; + } + + .text-capitalize { + text-transform: capitalize !important; + } + + .text-wrap { + white-space: normal !important; + } + + .text-nowrap { + white-space: nowrap !important; + } + + /* rtl:begin:remove */ + .text-break { + word-break: break-word !important; + word-wrap: break-word !important; + } + + /* rtl:end:remove */ + + .fw-normal { + font-weight: 400 !important; + } + + .fw-bold { + font-weight: 700 !important; + } + .shadow-none { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important; } @@ -3834,6 +4114,18 @@ $utilities: (); .column-gap-xs-jumbo { column-gap: 64px !important; } + + .text-xs-start { + text-align: left !important; + } + + .text-xs-end { + text-align: right !important; + } + + .text-xs-center { + text-align: center !important; + } } @media (min-width: 480px) { @@ -4730,6 +5022,18 @@ $utilities: (); .column-gap-sm-jumbo { column-gap: 64px !important; } + + .text-sm-start { + text-align: left !important; + } + + .text-sm-end { + text-align: right !important; + } + + .text-sm-center { + text-align: center !important; + } } @media (min-width: 736px) { @@ -5626,6 +5930,18 @@ $utilities: (); .column-gap-md-jumbo { column-gap: 64px !important; } + + .text-md-start { + text-align: left !important; + } + + .text-md-end { + text-align: right !important; + } + + .text-md-center { + text-align: center !important; + } } @media (min-width: 1024px) { @@ -6522,6 +6838,18 @@ $utilities: (); .column-gap-lg-jumbo { column-gap: 64px !important; } + + .text-lg-start { + text-align: left !important; + } + + .text-lg-end { + text-align: right !important; + } + + .text-lg-center { + text-align: center !important; + } } @media (min-width: 1320px) { @@ -7418,6 +7746,18 @@ $utilities: (); .column-gap-xl-jumbo { column-gap: 64px !important; } + + .text-xl-start { + text-align: left !important; + } + + .text-xl-end { + text-align: right !important; + } + + .text-xl-center { + text-align: center !important; + } } @media (min-width: 1640px) { @@ -8314,6 +8654,18 @@ $utilities: (); .column-gap-2xl-jumbo { column-gap: 64px !important; } + + .text-2xl-start { + text-align: left !important; + } + + .text-2xl-end { + text-align: right !important; + } + + .text-2xl-center { + text-align: center !important; + } } @media (min-width: 1880px) { @@ -9210,697 +9562,925 @@ $utilities: (); .column-gap-3xl-jumbo { column-gap: 64px !important; } + + .text-3xl-start { + text-align: left !important; + } + + .text-3xl-end { + text-align: right !important; + } + + .text-3xl-center { + text-align: center !important; + } } } } } @include it("generates OUDS and Bootstrap utilities") { - $enable-bootstrap-compatibility: true !global; - @import "../../functions"; - @import "../../tokens/raw"; - @import "../../tokens/semantic"; - @import "../../tokens/composite"; - @import "../../tokens/component"; - @import "../../variables"; - @import "../../maps"; - @import "../../mixins"; - - $utilities: ( - "opacity": ( - property: opacity, - values: ( - 0: 0, - 25: .25, - 50: .5, - 75: .75, - 100: 1, - ), - bootstrap-compatibility: true - ), - "opacity-ouds": ( - property: opacity, - values: $ouds-opacities - ), - "border-ouds": ( - property: border, - values: ( - null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), - "none": 0, - ), - ), - "border": ( - property: border, - values: ( - 0: 0, - ), - bootstrap-compatibility: true - ), - "border-top": ( - property: border-top, - values: ( - 0: 0, - ), - bootstrap-compatibility: true - ), - "border-end": ( - property: border-right, - class: border-end, - values: ( - 0: 0, - ), - bootstrap-compatibility: true - ), - "border-bottom": ( - property: border-bottom, - values: ( - 0: 0, - ), - bootstrap-compatibility: true - ), - "border-start": ( - property: border-left, - class: border-start, - values: ( - 0: 0, - ), - bootstrap-compatibility: true - ), - "border-color": ( - property: border-color, - class: border, - local-vars: ( - "border-opacity": 1 - ), - values: $utilities-border-colors - ), - "subtle-border-color": ( - property: border-color, - class: border, - values: $utilities-border-subtle - ), - "border-width": ( - property: border-width, - class: border, - values: $border-widths, - bootstrap-compatibility: true - ), - "border-opacity": ( - css-var: true, - class: border-opacity, - values: ( - 10: .1, - 25: .25, - 50: .5, - 75: .75, - 100: 1 - ), - bootstrap-compatibility: true - ), - "border-top-ouds": ( - property: border-top, - values: ( - null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), - "none": $ouds-border-width-none, - ), - ), - "border-end-ouds": ( - property: border-right, - class: border-end, - values: ( - null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), - "none": 0, - ), - ), - "border-bottom-ouds": ( - property: border-bottom, - values: ( - null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), - "none": 0, - ), - ), - "border-start-ouds": ( - property: border-left, - class: border-start, - values: ( - null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), - "none": 0, - ), - ), - "border-width-ouds": ( - property: border-width, - class: border, - values: $ouds-border-widths - ), - "border-style-ouds": ( - property: border-style, - class: border, - values: $ouds-border-styles - ), - "rounded": ( - property: border-radius, - class: rounded, - values: ( - 0: 0, - 1: var(--#{$prefix}border-radius-sm), - 2: var(--#{$prefix}border-radius-lg), - 3: var(--#{$prefix}border-radius-xl), - 4: var(--#{$prefix}border-radius-xxl), - 5: $border-radius-xxl * 1.5, - ), - bootstrap-compatibility: true - ), - "rounded-top": ( - property: border-top-left-radius border-top-right-radius, - class: rounded-top, - values: ( - 0: 0, - 1: var(--#{$prefix}border-radius-sm), - 2: var(--#{$prefix}border-radius-lg), - 3: var(--#{$prefix}border-radius-xl), - 4: var(--#{$prefix}border-radius-xxl), - 5: $border-radius-xxl * 1.5, - ), - bootstrap-compatibility: true - ), - "rounded-end": ( - property: border-top-right-radius border-bottom-right-radius, - class: rounded-end, - values: ( - 0: 0, - 1: var(--#{$prefix}border-radius-sm), - 2: var(--#{$prefix}border-radius-lg), - 3: var(--#{$prefix}border-radius-xl), - 4: var(--#{$prefix}border-radius-xxl), - 5: $border-radius-xxl * 1.5, - ), - bootstrap-compatibility: true - ), - "rounded-bottom": ( - property: border-bottom-right-radius border-bottom-left-radius, - class: rounded-bottom, - values: ( - 0: 0, - 1: var(--#{$prefix}border-radius-sm), - 2: var(--#{$prefix}border-radius-lg), - 3: var(--#{$prefix}border-radius-xl), - 4: var(--#{$prefix}border-radius-xxl), - 5: $border-radius-xxl * 1.5, - ), - bootstrap-compatibility: true - ), - "rounded-start": ( - property: border-bottom-left-radius border-top-left-radius, - class: rounded-start, - values: ( - 0: 0, - 1: var(--#{$prefix}border-radius-sm), - 2: var(--#{$prefix}border-radius-lg), - 3: var(--#{$prefix}border-radius-xl), - 4: var(--#{$prefix}border-radius-xxl), - 5: $border-radius-xxl * 1.5, - ), - bootstrap-compatibility: true - ), - "rounded-ouds": ( - property: border-radius, - class: rounded, - values: $ouds-border-radiuses - ), - "rounded-top-ouds": ( - property: border-top-left-radius border-top-right-radius, - class: rounded-top, - values: $ouds-border-radiuses - ), - "rounded-end-ouds": ( - property: border-top-right-radius border-bottom-right-radius, - class: rounded-end, - values: $ouds-border-radiuses - ), - "rounded-bottom-ouds": ( - property: border-bottom-right-radius border-bottom-left-radius, - class: rounded-bottom, - values: $ouds-border-radiuses - ), - "rounded-start-ouds": ( - property: border-bottom-left-radius border-top-left-radius, - class: rounded-start, - values: $ouds-border-radiuses - ), - "margin": ( - responsive: true, - property: margin, - class: m, - values: $spacers, - bootstrap-compatibility: true - ), - "margin-x": ( - responsive: true, - property: margin-right margin-left, - class: mx, - values: $spacers, - bootstrap-compatibility: true - ), - "margin-y": ( - responsive: true, - property: margin-top margin-bottom, - class: my, - values: $spacers, - bootstrap-compatibility: true - ), - "margin-top": ( - responsive: true, - property: margin-top, - class: mt, - values: $spacers, - bootstrap-compatibility: true - ), - "margin-end": ( - responsive: true, - property: margin-right, - class: me, - values: $spacers, - bootstrap-compatibility: true - ), - "margin-bottom": ( - responsive: true, - property: margin-bottom, - class: mb, - values: $spacers, - bootstrap-compatibility: true - ), - "margin-start": ( - responsive: true, - property: margin-left, - class: ms, - values: $spacers, - bootstrap-compatibility: true - ), - "negative-margin": ( - responsive: true, - property: margin, - class: m, - values: $negative-spacers, - bootstrap-compatibility: true - ), - "negative-margin-x": ( - responsive: true, - property: margin-right margin-left, - class: mx, - values: $negative-spacers, - bootstrap-compatibility: true - ), - "negative-margin-y": ( - responsive: true, - property: margin-top margin-bottom, - class: my, - values: $negative-spacers, - bootstrap-compatibility: true - ), - "negative-margin-top": ( - responsive: true, - property: margin-top, - class: mt, - values: $negative-spacers, - bootstrap-compatibility: true - ), - "negative-margin-end": ( - responsive: true, - property: margin-right, - class: me, - values: $negative-spacers, - bootstrap-compatibility: true - ), - "negative-margin-bottom": ( - responsive: true, - property: margin-bottom, - class: mb, - values: $negative-spacers, - bootstrap-compatibility: true - ), - "negative-margin-start": ( - responsive: true, - property: margin-left, - class: ms, - values: $negative-spacers, - bootstrap-compatibility: true - ), - "padding": ( - responsive: true, - property: padding, - class: p, - values: $spacers, - bootstrap-compatibility: true - ), - "padding-x": ( - responsive: true, - property: padding-right padding-left, - class: px, - values: $spacers, - bootstrap-compatibility: true - ), - "padding-y": ( - responsive: true, - property: padding-top padding-bottom, - class: py, - values: $spacers, - bootstrap-compatibility: true - ), - "padding-top": ( - responsive: true, - property: padding-top, - class: pt, - values: $spacers, - bootstrap-compatibility: true - ), - "padding-end": ( - responsive: true, - property: padding-right, - class: pe, - values: $spacers, - bootstrap-compatibility: true - ), - "padding-bottom": ( - responsive: true, - property: padding-bottom, - class: pb, - values: $spacers, - bootstrap-compatibility: true - ), - "padding-start": ( - responsive: true, - property: padding-left, - class: ps, - values: $spacers, - bootstrap-compatibility: true - ), - "gap": ( - responsive: true, - property: gap, - class: gap, - values: $spacers, - bootstrap-compatibility: true - ), - "row-gap": ( - responsive: true, - property: row-gap, - class: row-gap, - values: $spacers, - bootstrap-compatibility: true - ), - "column-gap": ( - responsive: true, - property: column-gap, - class: column-gap, - values: $spacers, - bootstrap-compatibility: true - ), - "margin-ouds": ( - responsive: true, - property: margin, - class: m, - values: map-merge($ouds-dimension-space-fixed, (auto: auto)) - ), - "margin-scaled-ouds": ( - property: margin, - class: m-scaled, - values: $ouds-dimension-space-scaled - ), - "margin-x-ouds": ( - responsive: true, - property: margin-right margin-left, - class: mx, - values: map-merge($ouds-dimension-space-fixed, (auto: auto)) - ), - "margin-x-scaled-ouds": ( - property: margin-right margin-left, - class: mx-scaled, - values: $ouds-dimension-space-scaled - ), - "margin-y-ouds": ( - responsive: true, - property: margin-top margin-bottom, - class: my, - values: map-merge($ouds-dimension-space-fixed, (auto: auto)) - ), - "margin-y-scaled-ouds": ( - property: margin-top margin-bottom, - class: my-scaled, - values: $ouds-dimension-space-scaled - ), - "margin-top-ouds": ( - responsive: true, - property: margin-top, - class: mt, - values: map-merge($ouds-dimension-space-fixed, (auto: auto)) - ), - "margin-top-scaled-ouds": ( - property: margin-top, - class: mt-scaled, - values: $ouds-dimension-space-scaled - ), - "margin-end-ouds": ( - responsive: true, - property: margin-right, - class: me, - values: map-merge($ouds-dimension-space-fixed, (auto: auto)) - ), - "margin-end-scaled-ouds": ( - property: margin-right, - class: me-scaled, - values: $ouds-dimension-space-scaled - ), - "margin-bottom-ouds": ( - responsive: true, - property: margin-bottom, - class: mb, - values: map-merge($ouds-dimension-space-fixed, (auto: auto)) - ), - "margin-bottom-scaled-ouds": ( - property: margin-bottom, - class: mb-scaled, - values: $ouds-dimension-space-scaled - ), - "margin-start-ouds": ( - responsive: true, - property: margin-left, - class: ms, - values: map-merge($ouds-dimension-space-fixed, (auto: auto)) - ), - "margin-start-scaled-ouds": ( - property: margin-left, - class: ms-scaled, - values: $ouds-dimension-space-scaled - ), - "negative-margin-ouds": ( - responsive: true, - property: margin, - class: m, - values: $ouds-dimension-negative-space-fixed - ), - "negative-margin-scaled-ouds": ( - property: margin, - class: m-scaled, - values: $ouds-dimension-negative-space-scaled - ), - "negative-margin-x-ouds": ( - responsive: true, - property: margin-right margin-left, - class: mx, - values: $ouds-dimension-negative-space-fixed - ), - "negative-margin-x-scaled-ouds": ( - property: margin-right margin-left, - class: mx-scaled, - values: $ouds-dimension-negative-space-scaled - ), - "negative-margin-y-ouds": ( - responsive: true, - property: margin-top margin-bottom, - class: my, - values: $ouds-dimension-negative-space-fixed - ), - "negative-margin-y-scaled-ouds": ( - property: margin-top margin-bottom, - class: my-scaled, - values: $ouds-dimension-negative-space-scaled - ), - "negative-margin-top-ouds": ( - responsive: true, - property: margin-top, - class: mt, - values: $ouds-dimension-negative-space-fixed - ), - "negative-margin-top-scaled-ouds": ( - property: margin-top, - class: mt-scaled, - values: $ouds-dimension-negative-space-scaled - ), - "negative-margin-end-ouds": ( - responsive: true, - property: margin-right, - class: me, - values: $ouds-dimension-negative-space-fixed - ), - "negative-margin-end-scaled-ouds": ( - property: margin-right, - class: me-scaled, - values: $ouds-dimension-negative-space-scaled - ), - "negative-margin-bottom-ouds": ( - responsive: true, - property: margin-bottom, - class: mb, - values: $ouds-dimension-negative-space-fixed - ), - "negative-margin-bottom-scaled-ouds": ( - property: margin-bottom, - class: mb-scaled, - values: $ouds-dimension-negative-space-scaled - ), - "negative-margin-start-ouds": ( - responsive: true, - property: margin-left, - class: ms, - values: $ouds-dimension-negative-space-fixed - ), - "negative-margin-start-scaled-ouds": ( - property: margin-left, - class: ms-scaled, - values: $ouds-dimension-negative-space-scaled - ), - "padding-ouds": ( - responsive: true, - property: padding, - class: p, - values: $ouds-dimension-space-fixed - ), - "padding-scaled-ouds": ( - property: padding, - class: p-scaled, - values: $ouds-dimension-space-scaled - ), - "padding-x-ouds": ( - responsive: true, - property: padding-right padding-left, - class: px, - values: $ouds-dimension-space-fixed - ), - "padding-x-scaled-ouds": ( - property: padding-right padding-left, - class: px-scaled, - values: $ouds-dimension-space-scaled - ), - "padding-y-ouds": ( - responsive: true, - property: padding-top padding-bottom, - class: py, - values: $ouds-dimension-space-fixed - ), - "padding-y-scaled-ouds": ( - property: padding-top padding-bottom, - class: py-scaled, - values: $ouds-dimension-space-scaled - ), - "padding-top-ouds": ( - responsive: true, - property: padding-top, - class: pt, - values: $ouds-dimension-space-fixed - ), - "padding-top-scaled-ouds": ( - property: padding-top, - class: pt-scaled, - values: $ouds-dimension-space-scaled - ), - "padding-end-ouds": ( - responsive: true, - property: padding-right, - class: pe, - values: $ouds-dimension-space-fixed - ), - "padding-end-scaled-ouds": ( - property: padding-right, - class: pe-scaled, - values: $ouds-dimension-space-scaled - ), - "padding-bottom-ouds": ( - responsive: true, - property: padding-bottom, - class: pb, - values: $ouds-dimension-space-fixed - ), - "padding-bottom-scaled-ouds": ( - property: padding-bottom, - class: pb-scaled, - values: $ouds-dimension-space-scaled - ), - "padding-start-ouds": ( - responsive: true, - property: padding-left, - class: ps, - values: $ouds-dimension-space-fixed - ), - "padding-start-scaled-ouds": ( - property: padding-left, - class: ps-scaled, - values: $ouds-dimension-space-scaled - ), - "gap-ouds": ( - responsive: true, - property: gap, - class: gap, - values: $ouds-dimension-space-fixed - ), - "gap-scaled-ouds": ( - property: gap, - class: gap-scaled, - values: $ouds-dimension-space-scaled - ), - "row-gap-ouds": ( - responsive: true, - property: row-gap, - class: row-gap, - values: $ouds-dimension-space-fixed - ), - "row-gap-scaled-ouds": ( - property: row-gap, - class: row-gap-scaled, - values: $ouds-dimension-space-scaled - ), - "column-gap-ouds": ( - responsive: true, - property: column-gap, - class: column-gap, - values: $ouds-dimension-space-fixed - ), - "column-gap-scaled-ouds": ( - property: column-gap, - class: column-gap-scaled, - values: $ouds-dimension-space-scaled - ), - "shadow": ( - property: box-shadow, - class: shadow, - values: ( - null: var(--#{$prefix}box-shadow), - sm: var(--#{$prefix}box-shadow-sm), - lg: var(--#{$prefix}box-shadow-lg), - ), - bootstrap-compatibility: true - ), - "shadow-ouds": ( - property: box-shadow, - class: shadow, - values: $ouds-elevations - ), - ) !global; - @include assert() { @include output() { + $enable-bootstrap-compatibility: true !global; + @import "../../config"; + @import "../../functions"; + @import "../../tokens/raw"; + @import "../../tokens/semantic"; + @import "../../tokens/composite"; + @import "../../tokens/component"; + @import "../../variables"; + @import "../../maps"; + @import "../../mixins"; + + $utilities: ( + "opacity": ( + property: opacity, + values: ( + 0: 0, + 25: .25, + 50: .5, + 75: .75, + 100: 1, + ), + bootstrap-compatibility: true + ), + "opacity-ouds": ( + property: opacity, + values: $ouds-opacities + ), + "border-ouds": ( + property: border, + values: ( + null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), + "none": 0, + ), + ), + "border": ( + property: border, + values: ( + 0: 0, + ), + bootstrap-compatibility: true + ), + "border-top": ( + property: border-top, + values: ( + 0: 0, + ), + bootstrap-compatibility: true + ), + "border-end": ( + property: border-right, + class: border-end, + values: ( + 0: 0, + ), + bootstrap-compatibility: true + ), + "border-bottom": ( + property: border-bottom, + values: ( + 0: 0, + ), + bootstrap-compatibility: true + ), + "border-start": ( + property: border-left, + class: border-start, + values: ( + 0: 0, + ), + bootstrap-compatibility: true + ), + "border-color": ( + property: border-color, + class: border, + local-vars: ( + "border-opacity": 1 + ), + values: $utilities-border-colors + ), + "subtle-border-color": ( + property: border-color, + class: border, + values: $utilities-border-subtle + ), + "border-width": ( + property: border-width, + class: border, + values: $border-widths, + bootstrap-compatibility: true + ), + "border-opacity": ( + css-var: true, + class: border-opacity, + values: ( + 10: .1, + 25: .25, + 50: .5, + 75: .75, + 100: 1 + ), + bootstrap-compatibility: true + ), + "border-top-ouds": ( + property: border-top, + values: ( + null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), + "none": $ouds-border-width-none, + ), + ), + "border-end-ouds": ( + property: border-right, + class: border-end, + values: ( + null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), + "none": 0, + ), + ), + "border-bottom-ouds": ( + property: border-bottom, + values: ( + null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), + "none": 0, + ), + ), + "border-start-ouds": ( + property: border-left, + class: border-start, + values: ( + null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), + "none": 0, + ), + ), + "border-width-ouds": ( + property: border-width, + class: border, + values: $ouds-border-widths + ), + "border-style-ouds": ( + property: border-style, + class: border, + values: $ouds-border-styles + ), + "rounded": ( + property: border-radius, + class: rounded, + values: ( + 0: 0, + 1: var(--#{$prefix}border-radius-sm), + 2: var(--#{$prefix}border-radius-lg), + 3: var(--#{$prefix}border-radius-xl), + 4: var(--#{$prefix}border-radius-xxl), + 5: $border-radius-xxl * 1.5, + ), + bootstrap-compatibility: true + ), + "rounded-top": ( + property: border-top-left-radius border-top-right-radius, + class: rounded-top, + values: ( + 0: 0, + 1: var(--#{$prefix}border-radius-sm), + 2: var(--#{$prefix}border-radius-lg), + 3: var(--#{$prefix}border-radius-xl), + 4: var(--#{$prefix}border-radius-xxl), + 5: $border-radius-xxl * 1.5, + ), + bootstrap-compatibility: true + ), + "rounded-end": ( + property: border-top-right-radius border-bottom-right-radius, + class: rounded-end, + values: ( + 0: 0, + 1: var(--#{$prefix}border-radius-sm), + 2: var(--#{$prefix}border-radius-lg), + 3: var(--#{$prefix}border-radius-xl), + 4: var(--#{$prefix}border-radius-xxl), + 5: $border-radius-xxl * 1.5, + ), + bootstrap-compatibility: true + ), + "rounded-bottom": ( + property: border-bottom-right-radius border-bottom-left-radius, + class: rounded-bottom, + values: ( + 0: 0, + 1: var(--#{$prefix}border-radius-sm), + 2: var(--#{$prefix}border-radius-lg), + 3: var(--#{$prefix}border-radius-xl), + 4: var(--#{$prefix}border-radius-xxl), + 5: $border-radius-xxl * 1.5, + ), + bootstrap-compatibility: true + ), + "rounded-start": ( + property: border-bottom-left-radius border-top-left-radius, + class: rounded-start, + values: ( + 0: 0, + 1: var(--#{$prefix}border-radius-sm), + 2: var(--#{$prefix}border-radius-lg), + 3: var(--#{$prefix}border-radius-xl), + 4: var(--#{$prefix}border-radius-xxl), + 5: $border-radius-xxl * 1.5, + ), + bootstrap-compatibility: true + ), + "rounded-ouds": ( + property: border-radius, + class: rounded, + values: $ouds-border-radiuses + ), + "rounded-top-ouds": ( + property: border-top-left-radius border-top-right-radius, + class: rounded-top, + values: $ouds-border-radiuses + ), + "rounded-end-ouds": ( + property: border-top-right-radius border-bottom-right-radius, + class: rounded-end, + values: $ouds-border-radiuses + ), + "rounded-bottom-ouds": ( + property: border-bottom-right-radius border-bottom-left-radius, + class: rounded-bottom, + values: $ouds-border-radiuses + ), + "rounded-start-ouds": ( + property: border-bottom-left-radius border-top-left-radius, + class: rounded-start, + values: $ouds-border-radiuses + ), + "margin": ( + responsive: true, + property: margin, + class: m, + values: $spacers, + bootstrap-compatibility: true + ), + "margin-x": ( + responsive: true, + property: margin-right margin-left, + class: mx, + values: $spacers, + bootstrap-compatibility: true + ), + "margin-y": ( + responsive: true, + property: margin-top margin-bottom, + class: my, + values: $spacers, + bootstrap-compatibility: true + ), + "margin-top": ( + responsive: true, + property: margin-top, + class: mt, + values: $spacers, + bootstrap-compatibility: true + ), + "margin-end": ( + responsive: true, + property: margin-right, + class: me, + values: $spacers, + bootstrap-compatibility: true + ), + "margin-bottom": ( + responsive: true, + property: margin-bottom, + class: mb, + values: $spacers, + bootstrap-compatibility: true + ), + "margin-start": ( + responsive: true, + property: margin-left, + class: ms, + values: $spacers, + bootstrap-compatibility: true + ), + "negative-margin": ( + responsive: true, + property: margin, + class: m, + values: $negative-spacers, + bootstrap-compatibility: true + ), + "negative-margin-x": ( + responsive: true, + property: margin-right margin-left, + class: mx, + values: $negative-spacers, + bootstrap-compatibility: true + ), + "negative-margin-y": ( + responsive: true, + property: margin-top margin-bottom, + class: my, + values: $negative-spacers, + bootstrap-compatibility: true + ), + "negative-margin-top": ( + responsive: true, + property: margin-top, + class: mt, + values: $negative-spacers, + bootstrap-compatibility: true + ), + "negative-margin-end": ( + responsive: true, + property: margin-right, + class: me, + values: $negative-spacers, + bootstrap-compatibility: true + ), + "negative-margin-bottom": ( + responsive: true, + property: margin-bottom, + class: mb, + values: $negative-spacers, + bootstrap-compatibility: true + ), + "negative-margin-start": ( + responsive: true, + property: margin-left, + class: ms, + values: $negative-spacers, + bootstrap-compatibility: true + ), + "padding": ( + responsive: true, + property: padding, + class: p, + values: $spacers, + bootstrap-compatibility: true + ), + "padding-x": ( + responsive: true, + property: padding-right padding-left, + class: px, + values: $spacers, + bootstrap-compatibility: true + ), + "padding-y": ( + responsive: true, + property: padding-top padding-bottom, + class: py, + values: $spacers, + bootstrap-compatibility: true + ), + "padding-top": ( + responsive: true, + property: padding-top, + class: pt, + values: $spacers, + bootstrap-compatibility: true + ), + "padding-end": ( + responsive: true, + property: padding-right, + class: pe, + values: $spacers, + bootstrap-compatibility: true + ), + "padding-bottom": ( + responsive: true, + property: padding-bottom, + class: pb, + values: $spacers, + bootstrap-compatibility: true + ), + "padding-start": ( + responsive: true, + property: padding-left, + class: ps, + values: $spacers, + bootstrap-compatibility: true + ), + "gap": ( + responsive: true, + property: gap, + class: gap, + values: $spacers, + bootstrap-compatibility: true + ), + "row-gap": ( + responsive: true, + property: row-gap, + class: row-gap, + values: $spacers, + bootstrap-compatibility: true + ), + "column-gap": ( + responsive: true, + property: column-gap, + class: column-gap, + values: $spacers, + bootstrap-compatibility: true + ), + "margin-ouds": ( + responsive: true, + property: margin, + class: m, + values: map-merge($ouds-dimension-space-fixed, (auto: auto)) + ), + "margin-scaled-ouds": ( + property: margin, + class: m-scaled, + values: $ouds-dimension-space-scaled + ), + "margin-x-ouds": ( + responsive: true, + property: margin-right margin-left, + class: mx, + values: map-merge($ouds-dimension-space-fixed, (auto: auto)) + ), + "margin-x-scaled-ouds": ( + property: margin-right margin-left, + class: mx-scaled, + values: $ouds-dimension-space-scaled + ), + "margin-y-ouds": ( + responsive: true, + property: margin-top margin-bottom, + class: my, + values: map-merge($ouds-dimension-space-fixed, (auto: auto)) + ), + "margin-y-scaled-ouds": ( + property: margin-top margin-bottom, + class: my-scaled, + values: $ouds-dimension-space-scaled + ), + "margin-top-ouds": ( + responsive: true, + property: margin-top, + class: mt, + values: map-merge($ouds-dimension-space-fixed, (auto: auto)) + ), + "margin-top-scaled-ouds": ( + property: margin-top, + class: mt-scaled, + values: $ouds-dimension-space-scaled + ), + "margin-end-ouds": ( + responsive: true, + property: margin-right, + class: me, + values: map-merge($ouds-dimension-space-fixed, (auto: auto)) + ), + "margin-end-scaled-ouds": ( + property: margin-right, + class: me-scaled, + values: $ouds-dimension-space-scaled + ), + "margin-bottom-ouds": ( + responsive: true, + property: margin-bottom, + class: mb, + values: map-merge($ouds-dimension-space-fixed, (auto: auto)) + ), + "margin-bottom-scaled-ouds": ( + property: margin-bottom, + class: mb-scaled, + values: $ouds-dimension-space-scaled + ), + "margin-start-ouds": ( + responsive: true, + property: margin-left, + class: ms, + values: map-merge($ouds-dimension-space-fixed, (auto: auto)) + ), + "margin-start-scaled-ouds": ( + property: margin-left, + class: ms-scaled, + values: $ouds-dimension-space-scaled + ), + "negative-margin-ouds": ( + responsive: true, + property: margin, + class: m, + values: $ouds-dimension-negative-space-fixed + ), + "negative-margin-scaled-ouds": ( + property: margin, + class: m-scaled, + values: $ouds-dimension-negative-space-scaled + ), + "negative-margin-x-ouds": ( + responsive: true, + property: margin-right margin-left, + class: mx, + values: $ouds-dimension-negative-space-fixed + ), + "negative-margin-x-scaled-ouds": ( + property: margin-right margin-left, + class: mx-scaled, + values: $ouds-dimension-negative-space-scaled + ), + "negative-margin-y-ouds": ( + responsive: true, + property: margin-top margin-bottom, + class: my, + values: $ouds-dimension-negative-space-fixed + ), + "negative-margin-y-scaled-ouds": ( + property: margin-top margin-bottom, + class: my-scaled, + values: $ouds-dimension-negative-space-scaled + ), + "negative-margin-top-ouds": ( + responsive: true, + property: margin-top, + class: mt, + values: $ouds-dimension-negative-space-fixed + ), + "negative-margin-top-scaled-ouds": ( + property: margin-top, + class: mt-scaled, + values: $ouds-dimension-negative-space-scaled + ), + "negative-margin-end-ouds": ( + responsive: true, + property: margin-right, + class: me, + values: $ouds-dimension-negative-space-fixed + ), + "negative-margin-end-scaled-ouds": ( + property: margin-right, + class: me-scaled, + values: $ouds-dimension-negative-space-scaled + ), + "negative-margin-bottom-ouds": ( + responsive: true, + property: margin-bottom, + class: mb, + values: $ouds-dimension-negative-space-fixed + ), + "negative-margin-bottom-scaled-ouds": ( + property: margin-bottom, + class: mb-scaled, + values: $ouds-dimension-negative-space-scaled + ), + "negative-margin-start-ouds": ( + responsive: true, + property: margin-left, + class: ms, + values: $ouds-dimension-negative-space-fixed + ), + "negative-margin-start-scaled-ouds": ( + property: margin-left, + class: ms-scaled, + values: $ouds-dimension-negative-space-scaled + ), + "padding-ouds": ( + responsive: true, + property: padding, + class: p, + values: $ouds-dimension-space-fixed + ), + "padding-scaled-ouds": ( + property: padding, + class: p-scaled, + values: $ouds-dimension-space-scaled + ), + "padding-x-ouds": ( + responsive: true, + property: padding-right padding-left, + class: px, + values: $ouds-dimension-space-fixed + ), + "padding-x-scaled-ouds": ( + property: padding-right padding-left, + class: px-scaled, + values: $ouds-dimension-space-scaled + ), + "padding-y-ouds": ( + responsive: true, + property: padding-top padding-bottom, + class: py, + values: $ouds-dimension-space-fixed + ), + "padding-y-scaled-ouds": ( + property: padding-top padding-bottom, + class: py-scaled, + values: $ouds-dimension-space-scaled + ), + "padding-top-ouds": ( + responsive: true, + property: padding-top, + class: pt, + values: $ouds-dimension-space-fixed + ), + "padding-top-scaled-ouds": ( + property: padding-top, + class: pt-scaled, + values: $ouds-dimension-space-scaled + ), + "padding-end-ouds": ( + responsive: true, + property: padding-right, + class: pe, + values: $ouds-dimension-space-fixed + ), + "padding-end-scaled-ouds": ( + property: padding-right, + class: pe-scaled, + values: $ouds-dimension-space-scaled + ), + "padding-bottom-ouds": ( + responsive: true, + property: padding-bottom, + class: pb, + values: $ouds-dimension-space-fixed + ), + "padding-bottom-scaled-ouds": ( + property: padding-bottom, + class: pb-scaled, + values: $ouds-dimension-space-scaled + ), + "padding-start-ouds": ( + responsive: true, + property: padding-left, + class: ps, + values: $ouds-dimension-space-fixed + ), + "padding-start-scaled-ouds": ( + property: padding-left, + class: ps-scaled, + values: $ouds-dimension-space-scaled + ), + "gap-ouds": ( + responsive: true, + property: gap, + class: gap, + values: $ouds-dimension-space-fixed + ), + "gap-scaled-ouds": ( + property: gap, + class: gap-scaled, + values: $ouds-dimension-space-scaled + ), + "row-gap-ouds": ( + responsive: true, + property: row-gap, + class: row-gap, + values: $ouds-dimension-space-fixed + ), + "row-gap-scaled-ouds": ( + property: row-gap, + class: row-gap-scaled, + values: $ouds-dimension-space-scaled + ), + "column-gap-ouds": ( + responsive: true, + property: column-gap, + class: column-gap, + values: $ouds-dimension-space-fixed + ), + "column-gap-scaled-ouds": ( + property: column-gap, + class: column-gap-scaled, + values: $ouds-dimension-space-scaled + ), + "font-family": ( + property: font-family, + class: font, + values: (monospace: var(--#{$prefix}font-monospace)) + ), + "font-size": ( + property: font-size, + class: fs, + values: $font-sizes, + bootstrap-compatibility: true + ), + "font-weight": ( + property: font-weight, + class: fw, + values: ( + lighter: $font-weight-lighter, + light: $font-weight-light, + medium: $font-weight-medium, + semibold: $font-weight-semibold, + bolder: $font-weight-bolder + ), + bootstrap-compatibility: true + ), + "line-height": ( + property: line-height, + class: lh, + values: ( + 1: 1, + sm: 1.25, + base: 1.5, + lg: 2, + ), + bootstrap-compatibility: true + ), + "text-align": ( + responsive: true, + property: text-align, + class: text, + values: ( + start: left, + end: right, + center: center, + ) + ), + "text-decoration": ( + property: text-decoration, + values: none underline line-through + ), + "text-transform": ( + property: text-transform, + class: text, + values: lowercase uppercase capitalize + ), + "white-space": ( + property: white-space, + class: text, + values: ( + wrap: normal, + nowrap: nowrap, + ) + ), + "word-wrap": ( + property: word-break word-wrap, + class: text, + values: (break: break-word), + rtl: false + ), + "font-size-ouds": ( + property: font-size, + class: fs, + values: $ouds-font-sizes + ), + "font-weight-ouds": ( + property: font-weight, + class: fw, + values: $ouds-font-weights + ), + "shadow": ( + property: box-shadow, + class: shadow, + values: ( + null: var(--#{$prefix}box-shadow), + sm: var(--#{$prefix}box-shadow-sm), + lg: var(--#{$prefix}box-shadow-lg), + ), + bootstrap-compatibility: true + ), + "shadow-ouds": ( + property: box-shadow, + class: shadow, + values: $ouds-elevations + ), + ) !global; + @import "../../utilities/api"; } @include expect() { + .fs-dl { + max-width: var(--bs-font-max-width-display-large); + font-size: var(--bs-font-size-display-large); + line-height: var(--bs-font-line-height-display-large); + + /* rtl:remove */ + letter-spacing: var(--bs-font-letter-spacing-display-large); + } + + .fs-dm { + max-width: var(--bs-font-max-width-display-medium); + font-size: var(--bs-font-size-display-medium); + line-height: var(--bs-font-line-height-display-medium); + + /* rtl:remove */ + letter-spacing: var(--bs-font-letter-spacing-display-medium); + } + + .fs-ds { + max-width: var(--bs-font-max-width-display-small); + font-size: var(--bs-font-size-display-small); + line-height: var(--bs-font-line-height-display-small); + + /* rtl:remove */ + letter-spacing: var(--bs-font-letter-spacing-display-small); + } + + .fs-hxl { + max-width: var(--bs-font-max-width-heading-xlarge); + font-size: var(--bs-font-size-heading-xlarge); + line-height: var(--bs-font-line-height-heading-xlarge); + + /* rtl:remove */ + letter-spacing: var(--bs-font-letter-spacing-heading-xlarge); + } + + .fs-hl { + max-width: var(--bs-font-max-width-heading-large); + font-size: var(--bs-font-size-heading-large); + line-height: var(--bs-font-line-height-heading-large); + + /* rtl:remove */ + letter-spacing: var(--bs-font-letter-spacing-heading-large); + } + + .fs-hm { + max-width: var(--bs-font-max-width-heading-medium); + font-size: var(--bs-font-size-heading-medium); + line-height: var(--bs-font-line-height-heading-medium); + + /* rtl:remove */ + letter-spacing: var(--bs-font-letter-spacing-heading-medium); + } + + .fs-hs { + max-width: var(--bs-font-max-width-heading-small); + font-size: var(--bs-font-size-heading-small); + line-height: var(--bs-font-line-height-heading-small); + + /* rtl:remove */ + letter-spacing: var(--bs-font-letter-spacing-heading-small); + } + + .fs-bl { + max-width: var(--bs-font-max-width-body-large); + font-size: var(--bs-font-size-body-large); + line-height: var(--bs-font-line-height-body-large); + + /* rtl:remove */ + letter-spacing: var(--bs-font-letter-spacing-body-large); + } + + .fs-bm { + max-width: var(--bs-font-max-width-body-medium); + font-size: var(--bs-font-size-body-medium); + line-height: var(--bs-font-line-height-body-medium); + + /* rtl:remove */ + letter-spacing: var(--bs-font-letter-spacing-body-medium); + } + + .fs-bs { + max-width: var(--bs-font-max-width-body-small); + font-size: var(--bs-font-size-body-small); + line-height: var(--bs-font-line-height-body-small); + + /* rtl:remove */ + letter-spacing: var(--bs-font-letter-spacing-body-small); + } + + .fs-lxl { + font-size: 1.125rem; + line-height: 1.3333333333; + + /* rtl:remove */ + letter-spacing: 0.01125rem; // stylelint-disable-line @stylistic/number-leading-zero + } + + .fs-ll { + font-size: 1rem; + line-height: 1.5; + + /* rtl:remove */ + letter-spacing: 0.0125rem; // stylelint-disable-line @stylistic/number-leading-zero + } + + .fs-lm { + font-size: 0.875rem; // stylelint-disable-line @stylistic/number-leading-zero + line-height: 1.4285714286; + + /* rtl:remove */ + letter-spacing: 0.010625rem; // stylelint-disable-line @stylistic/number-leading-zero + } + + .fs-ls { + font-size: 0.75rem; // stylelint-disable-line @stylistic/number-leading-zero + line-height: 1.3333333333; + + /* rtl:remove */ + letter-spacing: 0.01125rem; // stylelint-disable-line @stylistic/number-leading-zero + } + + .fs-cm { + font-size: 0.875rem; // stylelint-disable-line @stylistic/number-leading-zero + line-height: 1.4285714286; + + /* rtl:remove */ + letter-spacing: 0.010625rem; // stylelint-disable-line @stylistic/number-leading-zero + } + + .fs-cs { + font-size: 0.75rem; // stylelint-disable-line @stylistic/number-leading-zero + line-height: 1.3333333333; + + /* rtl:remove */ + letter-spacing: 0.01125rem; // stylelint-disable-line @stylistic/number-leading-zero + } + .opacity-0 { opacity: 0 !important; } @@ -12783,6 +13363,110 @@ $utilities: (); column-gap: var(--bs-space-scaled-spacious) !important; } + .font-monospace { + font-family: var(--bs-font-monospace) !important; + } + + .fs-1 { + font-size: var(--bs-font-size-heading-xlarge) !important; + } + + .fs-2 { + font-size: var(--bs-font-size-heading-large) !important; + } + + .fs-3 { + font-size: var(--bs-font-size-heading-medium) !important; + } + + .fs-4 { + font-size: var(--bs-font-size-heading-small) !important; + } + + .fs-5 { + font-size: var(--bs-font-size-body-large) !important; + } + + .fs-6 { + font-size: var(--bs-font-size-body-medium) !important; + } + + .lh-1 { + line-height: 1 !important; + } + + .lh-sm { + line-height: 1.25 !important; + } + + .lh-base { + line-height: 1.5 !important; + } + + .lh-lg { + line-height: 2 !important; + } + + .text-start { + text-align: left !important; + } + + .text-end { + text-align: right !important; + } + + .text-center { + text-align: center !important; + } + + .text-decoration-none { + text-decoration: none !important; + } + + .text-decoration-underline { + text-decoration: underline !important; + } + + .text-decoration-line-through { + text-decoration: line-through !important; + } + + .text-lowercase { + text-transform: lowercase !important; + } + + .text-uppercase { + text-transform: uppercase !important; + } + + .text-capitalize { + text-transform: capitalize !important; + } + + .text-wrap { + white-space: normal !important; + } + + .text-nowrap { + white-space: nowrap !important; + } + + /* rtl:begin:remove */ + .text-break { + word-break: break-word !important; + word-wrap: break-word !important; + } + + /* rtl:end:remove */ + + .fw-normal { + font-weight: 400 !important; + } + + .fw-bold { + font-weight: 700 !important; + } + .shadow { box-shadow: var(--bs-box-shadow) !important; } @@ -14153,6 +14837,18 @@ $utilities: (); .column-gap-xs-jumbo { column-gap: 64px !important; } + + .text-xs-start { + text-align: left !important; + } + + .text-xs-end { + text-align: right !important; + } + + .text-xs-center { + text-align: center !important; + } } @media (min-width: 480px) { @@ -15481,6 +16177,18 @@ $utilities: (); .column-gap-sm-jumbo { column-gap: 64px !important; } + + .text-sm-start { + text-align: left !important; + } + + .text-sm-end { + text-align: right !important; + } + + .text-sm-center { + text-align: center !important; + } } @media (min-width: 736px) { @@ -16809,6 +17517,18 @@ $utilities: (); .column-gap-md-jumbo { column-gap: 64px !important; } + + .text-md-start { + text-align: left !important; + } + + .text-md-end { + text-align: right !important; + } + + .text-md-center { + text-align: center !important; + } } @media (min-width: 1024px) { @@ -18137,6 +18857,18 @@ $utilities: (); .column-gap-lg-jumbo { column-gap: 64px !important; } + + .text-lg-start { + text-align: left !important; + } + + .text-lg-end { + text-align: right !important; + } + + .text-lg-center { + text-align: center !important; + } } @media (min-width: 1320px) { @@ -19465,6 +20197,18 @@ $utilities: (); .column-gap-xl-jumbo { column-gap: 64px !important; } + + .text-xl-start { + text-align: left !important; + } + + .text-xl-end { + text-align: right !important; + } + + .text-xl-center { + text-align: center !important; + } } @media (min-width: 1640px) { @@ -20793,9 +21537,21 @@ $utilities: (); .column-gap-xxl-jumbo { column-gap: 64px !important; } - } - @media (min-width: 1640px) { + .text-xxl-start { + text-align: left !important; + } + + .text-xxl-end { + text-align: right !important; + } + + .text-xxl-center { + text-align: center !important; + } + } + + @media (min-width: 1640px) { .m-2xl-0 { margin: 0 !important; } @@ -22121,6 +22877,18 @@ $utilities: (); .column-gap-2xl-jumbo { column-gap: 64px !important; } + + .text-2xl-start { + text-align: left !important; + } + + .text-2xl-end { + text-align: right !important; + } + + .text-2xl-center { + text-align: center !important; + } } @media (min-width: 1880px) { @@ -23449,5723 +24217,17 @@ $utilities: (); .column-gap-3xl-jumbo { column-gap: 64px !important; } - } - } - } - } - - @include it("generates only OUDS containers") { - $enable-bootstrap-compatibility: false !global; - @import "../../functions"; - @import "../../tokens/raw"; - @import "../../tokens/semantic"; - @import "../../tokens/composite"; - @import "../../tokens/component"; - @import "../../variables"; - @import "../../maps"; - @import "../../mixins"; - - @include assert() { - @include output() { - @import "../../containers"; - } - @include expect() { - .container-fluid { - width: 100%; - padding-right: var(--bs-container-margin-x); - padding-left: var(--bs-container-margin-x); - margin-right: auto; - margin-left: auto; - --bs-container-margin-x: 16px; - } - - @media (min-width: 390px) { - .container-fluid { - --bs-container-margin-x: 24px; - } - } - - @media (min-width: 480px) { - .container-fluid { - --bs-container-margin-x: 28px; - } - } - - @media (min-width: 736px) { - .container-fluid { - --bs-container-margin-x: 32px; - } - } - - @media (min-width: 1024px) { - .container-fluid { - --bs-container-margin-x: 40px; - } - } - - @media (min-width: 1320px) { - .container-fluid { - --bs-container-margin-x: 56px; - } - } - - @media (min-width: 1640px) { - .container-fluid { - --bs-container-margin-x: 80px; - } - } - - @media (min-width: 1880px) { - .container-fluid { - --bs-container-margin-x: 112px; - } - } - - @media (min-width: 1640px) { - .container-max-width { - --bs-container-margin-x: 80px; - max-width: 1680px; - } - - .container-max-width .row { - --bs-gutter-x: 32px; - } - } - } - } - } - - @include it("generates OUDS and Bootstrap containers") { - $enable-bootstrap-compatibility: true !global; - @import "../../functions"; - @import "../../tokens/raw"; - @import "../../tokens/semantic"; - @import "../../tokens/composite"; - @import "../../tokens/component"; - @import "../../variables"; - @import "../../maps"; - @import "../../mixins"; - - @include assert() { - @include output() { - @import "../../containers"; - } - @include expect() { - .container-fluid, - .container-3xl, - .container-2xl, - .container-xxl, - .container-xl, - .container-lg, - .container-md, - .container-sm, - .container-xs { - width: 100%; - padding-right: var(--bs-container-margin-x); - padding-left: var(--bs-container-margin-x); - margin-right: auto; - margin-left: auto; - --bs-container-margin-x: 16px; - } - - @media (min-width: 390px) { - .container-fluid, - .container-3xl, - .container-2xl, - .container-xxl, - .container-xl, - .container-lg, - .container-md, - .container-sm, - .container-xs { - --bs-container-margin-x: 24px; - } - } - - @media (min-width: 480px) { - .container-fluid, - .container-3xl, - .container-2xl, - .container-xxl, - .container-xl, - .container-lg, - .container-md, - .container-sm, - .container-xs { - --bs-container-margin-x: 28px; - } - } - - @media (min-width: 736px) { - .container-fluid, - .container-3xl, - .container-2xl, - .container-xxl, - .container-xl, - .container-lg, - .container-md, - .container-sm, - .container-xs { - --bs-container-margin-x: 32px; - } - } - - @media (min-width: 1024px) { - .container-fluid, - .container-3xl, - .container-2xl, - .container-xxl, - .container-xl, - .container-lg, - .container-md, - .container-sm, - .container-xs { - --bs-container-margin-x: 40px; - } - } - - @media (min-width: 1320px) { - .container-fluid, - .container-3xl, - .container-2xl, - .container-xxl, - .container-xl, - .container-lg, - .container-md, - .container-sm, - .container-xs { - --bs-container-margin-x: 56px; - } - } - - @media (min-width: 1640px) { - .container-fluid, - .container-3xl, - .container-2xl, - .container-xxl, - .container-xl, - .container-lg, - .container-md, - .container-sm, - .container-xs { - --bs-container-margin-x: 80px; - } - } - - @media (min-width: 1880px) { - .container-fluid, - .container-3xl, - .container-2xl, - .container-xxl, - .container-xl, - .container-lg, - .container-md, - .container-sm, - .container-xs { - --bs-container-margin-x: 112px; - } - } - - .container { - width: 100%; - padding-right: var(--bs-container-margin-x); - padding-left: var(--bs-container-margin-x); - margin-right: auto; - margin-left: auto; - --bs-container-margin-x: 16px; - } - - @media (min-width: 390px) { - .container { - --bs-container-margin-x: 24px; - } - } - - @media (min-width: 480px) { - .container { - --bs-container-margin-x: 28px; - } - } - - @media (min-width: 736px) { - .container { - --bs-container-margin-x: 32px; - } - } - - @media (min-width: 1024px) { - .container { - --bs-container-margin-x: 40px; - } - } - - @media (min-width: 1320px) { - .container { - --bs-container-margin-x: 56px; - } - } - - @media (min-width: 1640px) { - .container { - --bs-container-margin-x: 80px; - } - } - - @media (min-width: 1880px) { - .container { - --bs-container-margin-x: 112px; - } - } - - @media (min-width: 390px) { - .container-xs, - .container { - max-width: 390px; - } - } - - @media (min-width: 480px) { - .container-sm, - .container-xs, - .container { - max-width: 480px; - } - } - - @media (min-width: 736px) { - .container-md, - .container-sm, - .container-xs, - .container { - max-width: 736px; - } - } - - @media (min-width: 1024px) { - .container-lg, - .container-md, - .container-sm, - .container-xs, - .container { - max-width: 1024px; - } - } - - @media (min-width: 1320px) { - .container-xl, - .container-lg, - .container-md, - .container-sm, - .container-xs, - .container { - max-width: 1320px; - } - } - - @media (min-width: 1640px) { - .container-2xl, - .container-xxl, - .container-xl, - .container-lg, - .container-md, - .container-sm, - .container-xs, - .container { - max-width: 1640px; - } - } - - @media (min-width: 1880px) { - .container-3xl, - .container-2xl, - .container-xxl, - .container-xl, - .container-lg, - .container-md, - .container-sm, - .container-xs, - .container { - max-width: 1880px; - } - } - - @media (min-width: 1640px) { - .container-max-width { - --bs-container-margin-x: 80px; - max-width: 1680px; - } - - .container-max-width .row { - --bs-gutter-x: 32px; - } - } - } - } - } - - @include it("generates only OUDS grid classes") { - $enable-bootstrap-compatibility: false !global; - @import "../../functions"; - @import "../../tokens/raw"; - @import "../../tokens/semantic"; - @import "../../tokens/composite"; - @import "../../tokens/component"; - @import "../../variables"; - @import "../../maps"; - @import "../../mixins"; - - @include assert() { - @include output() { - @import "../../grid"; - } - @include expect() { - :root { - --bs-breakpoint-2xs: 0; - --bs-breakpoint-xs: 390px; - --bs-breakpoint-sm: 480px; - --bs-breakpoint-md: 736px; - --bs-breakpoint-lg: 1024px; - --bs-breakpoint-xl: 1320px; - --bs-breakpoint-2xl: 1640px; - --bs-breakpoint-3xl: 1880px; - } - - .row { - --bs-gutter-y: 0; - display: flex; - flex-wrap: wrap; - margin-top: calc(-1 * var(--bs-gutter-y)); // stylelint-disable-line function-disallowed-list - margin-right: calc(-0.5 * var(--bs-gutter-x)); // stylelint-disable-line function-disallowed-list, @stylistic/number-leading-zero - margin-left: calc(-0.5 * var(--bs-gutter-x)); // stylelint-disable-line function-disallowed-list, @stylistic/number-leading-zero - --bs-gutter-x: 8px; - } - - @media (min-width: 390px) { - .row { - --bs-gutter-x: 16px; - } - } - - @media (min-width: 480px) { - .row { - --bs-gutter-x: 16px; - } - } - - @media (min-width: 736px) { - .row { - --bs-gutter-x: 24px; - } - } - - @media (min-width: 1024px) { - .row { - --bs-gutter-x: 24px; - } - } - - @media (min-width: 1320px) { - .row { - --bs-gutter-x: 32px; - } - } - - @media (min-width: 1640px) { - .row { - --bs-gutter-x: 32px; - } - } - - @media (min-width: 1880px) { - .row { - --bs-gutter-x: 40px; - } - } - - .row > * { - flex-shrink: 0; - width: 100%; - max-width: 100%; - padding-right: calc(var(--bs-gutter-x) * 0.5); // stylelint-disable-line function-disallowed-list, @stylistic/number-leading-zero - padding-left: calc(var(--bs-gutter-x) * 0.5); // stylelint-disable-line function-disallowed-list, @stylistic/number-leading-zero - margin-top: var(--bs-gutter-y); - } - - .col { - flex: 1 0 0%; - } - - .row-cols-auto > * { - flex: 0 0 auto; - width: auto; - } - - .row-cols-1 > * { - flex: 0 0 auto; - width: 100%; - } - - .row-cols-2 > * { - flex: 0 0 auto; - width: 50%; - } - - .row-cols-3 > * { - flex: 0 0 auto; - width: 33.33333333%; - } - - .row-cols-4 > * { - flex: 0 0 auto; - width: 25%; - } - - .row-cols-5 > * { - flex: 0 0 auto; - width: 20%; - } - - .row-cols-6 > * { - flex: 0 0 auto; - width: 16.66666667%; - } - - .col-auto { - flex: 0 0 auto; - width: auto; - } - - .col-1 { - flex: 0 0 auto; - width: 8.33333333%; - } - - .col-2 { - flex: 0 0 auto; - width: 16.66666667%; - } - - .col-3 { - flex: 0 0 auto; - width: 25%; - } - - .col-4 { - flex: 0 0 auto; - width: 33.33333333%; - } - - .col-5 { - flex: 0 0 auto; - width: 41.66666667%; - } - - .col-6 { - flex: 0 0 auto; - width: 50%; - } - - .col-7 { - flex: 0 0 auto; - width: 58.33333333%; - } - - .col-8 { - flex: 0 0 auto; - width: 66.66666667%; - } - - .col-9 { - flex: 0 0 auto; - width: 75%; - } - - .col-10 { - flex: 0 0 auto; - width: 83.33333333%; - } - - .col-11 { - flex: 0 0 auto; - width: 91.66666667%; - } - - .col-12 { - flex: 0 0 auto; - width: 100%; - } - - .offset-1 { - margin-left: 8.33333333%; - } - - .offset-2 { - margin-left: 16.66666667%; - } - - .offset-3 { - margin-left: 25%; - } - - .offset-4 { - margin-left: 33.33333333%; - } - - .offset-5 { - margin-left: 41.66666667%; - } - - .offset-6 { - margin-left: 50%; - } - - .offset-7 { - margin-left: 58.33333333%; - } - - .offset-8 { - margin-left: 66.66666667%; - } - - .offset-9 { - margin-left: 75%; - } - - .offset-10 { - margin-left: 83.33333333%; - } - - .offset-11 { - margin-left: 91.66666667%; - } - - .g-none, - .gx-none { - --bs-gutter-x: 0 !important; - } - - .g-none, - .gy-none { - --bs-gutter-y: 0 !important; - } - - .g-smash, - .gx-smash { - --bs-gutter-x: 2px !important; - } - - .g-smash, - .gy-smash { - --bs-gutter-y: 2px !important; - } - - .g-shortest, - .gx-shortest { - --bs-gutter-x: 4px !important; - } - - .g-shortest, - .gy-shortest { - --bs-gutter-y: 4px !important; - } - - .g-shorter, - .gx-shorter { - --bs-gutter-x: 8px !important; - } - - .g-shorter, - .gy-shorter { - --bs-gutter-y: 8px !important; - } - - .g-short, - .gx-short { - --bs-gutter-x: 12px !important; - } - - .g-short, - .gy-short { - --bs-gutter-y: 12px !important; - } - - .g-medium, - .gx-medium { - --bs-gutter-x: 16px !important; - } - - .g-medium, - .gy-medium { - --bs-gutter-y: 16px !important; - } - - .g-tall, - .gx-tall { - --bs-gutter-x: 24px !important; - } - - .g-tall, - .gy-tall { - --bs-gutter-y: 24px !important; - } - - .g-taller, - .gx-taller { - --bs-gutter-x: 32px !important; - } - - .g-taller, - .gy-taller { - --bs-gutter-y: 32px !important; - } - - .g-tallest, - .gx-tallest { - --bs-gutter-x: 40px !important; - } - - .g-tallest, - .gy-tallest { - --bs-gutter-y: 40px !important; - } - - .g-spacious, - .gx-spacious { - --bs-gutter-x: 48px !important; - } - - .g-spacious, - .gy-spacious { - --bs-gutter-y: 48px !important; - } - - .g-huge, - .gx-huge { - --bs-gutter-x: 56px !important; - } - - .g-huge, - .gy-huge { - --bs-gutter-y: 56px !important; - } - - .g-jumbo, - .gx-jumbo { - --bs-gutter-x: 64px !important; - } - - .g-jumbo, - .gy-jumbo { - --bs-gutter-y: 64px !important; - } - - @media (min-width: 390px) { - .col-xs { - flex: 1 0 0%; - } - - .row-cols-xs-auto > * { - flex: 0 0 auto; - width: auto; - } - - .row-cols-xs-1 > * { - flex: 0 0 auto; - width: 100%; - } - - .row-cols-xs-2 > * { - flex: 0 0 auto; - width: 50%; - } - - .row-cols-xs-3 > * { - flex: 0 0 auto; - width: 33.33333333%; - } - - .row-cols-xs-4 > * { - flex: 0 0 auto; - width: 25%; - } - - .row-cols-xs-5 > * { - flex: 0 0 auto; - width: 20%; - } - - .row-cols-xs-6 > * { - flex: 0 0 auto; - width: 16.66666667%; - } - - .col-xs-auto { - flex: 0 0 auto; - width: auto; - } - - .col-xs-1 { - flex: 0 0 auto; - width: 8.33333333%; - } - - .col-xs-2 { - flex: 0 0 auto; - width: 16.66666667%; - } - - .col-xs-3 { - flex: 0 0 auto; - width: 25%; - } - - .col-xs-4 { - flex: 0 0 auto; - width: 33.33333333%; - } - - .col-xs-5 { - flex: 0 0 auto; - width: 41.66666667%; - } - - .col-xs-6 { - flex: 0 0 auto; - width: 50%; - } - - .col-xs-7 { - flex: 0 0 auto; - width: 58.33333333%; - } - - .col-xs-8 { - flex: 0 0 auto; - width: 66.66666667%; - } - - .col-xs-9 { - flex: 0 0 auto; - width: 75%; - } - - .col-xs-10 { - flex: 0 0 auto; - width: 83.33333333%; - } - - .col-xs-11 { - flex: 0 0 auto; - width: 91.66666667%; - } - - .col-xs-12 { - flex: 0 0 auto; - width: 100%; - } - - .offset-xs-0 { - margin-left: 0; - } - - .offset-xs-1 { - margin-left: 8.33333333%; - } - - .offset-xs-2 { - margin-left: 16.66666667%; - } - - .offset-xs-3 { - margin-left: 25%; - } - - .offset-xs-4 { - margin-left: 33.33333333%; - } - - .offset-xs-5 { - margin-left: 41.66666667%; - } - - .offset-xs-6 { - margin-left: 50%; - } - - .offset-xs-7 { - margin-left: 58.33333333%; - } - - .offset-xs-8 { - margin-left: 66.66666667%; - } - - .offset-xs-9 { - margin-left: 75%; - } - - .offset-xs-10 { - margin-left: 83.33333333%; - } - - .offset-xs-11 { - margin-left: 91.66666667%; - } - - .g-xs-none, - .gx-xs-none { - --bs-gutter-x: 0 !important; - } - - .g-xs-none, - .gy-xs-none { - --bs-gutter-y: 0 !important; - } - - .g-xs-smash, - .gx-xs-smash { - --bs-gutter-x: 2px !important; - } - - .g-xs-smash, - .gy-xs-smash { - --bs-gutter-y: 2px !important; - } - - .g-xs-shortest, - .gx-xs-shortest { - --bs-gutter-x: 4px !important; - } - - .g-xs-shortest, - .gy-xs-shortest { - --bs-gutter-y: 4px !important; - } - - .g-xs-shorter, - .gx-xs-shorter { - --bs-gutter-x: 8px !important; - } - - .g-xs-shorter, - .gy-xs-shorter { - --bs-gutter-y: 8px !important; - } - - .g-xs-short, - .gx-xs-short { - --bs-gutter-x: 12px !important; - } - - .g-xs-short, - .gy-xs-short { - --bs-gutter-y: 12px !important; - } - - .g-xs-medium, - .gx-xs-medium { - --bs-gutter-x: 16px !important; - } - - .g-xs-medium, - .gy-xs-medium { - --bs-gutter-y: 16px !important; - } - - .g-xs-tall, - .gx-xs-tall { - --bs-gutter-x: 24px !important; - } - - .g-xs-tall, - .gy-xs-tall { - --bs-gutter-y: 24px !important; - } - - .g-xs-taller, - .gx-xs-taller { - --bs-gutter-x: 32px !important; - } - - .g-xs-taller, - .gy-xs-taller { - --bs-gutter-y: 32px !important; - } - - .g-xs-tallest, - .gx-xs-tallest { - --bs-gutter-x: 40px !important; - } - - .g-xs-tallest, - .gy-xs-tallest { - --bs-gutter-y: 40px !important; - } - - .g-xs-spacious, - .gx-xs-spacious { - --bs-gutter-x: 48px !important; - } - - .g-xs-spacious, - .gy-xs-spacious { - --bs-gutter-y: 48px !important; - } - - .g-xs-huge, - .gx-xs-huge { - --bs-gutter-x: 56px !important; - } - - .g-xs-huge, - .gy-xs-huge { - --bs-gutter-y: 56px !important; - } - - .g-xs-jumbo, - .gx-xs-jumbo { - --bs-gutter-x: 64px !important; - } - - .g-xs-jumbo, - .gy-xs-jumbo { - --bs-gutter-y: 64px !important; - } - } - - @media (min-width: 480px) { - .col-sm { - flex: 1 0 0%; - } - - .row-cols-sm-auto > * { - flex: 0 0 auto; - width: auto; - } - - .row-cols-sm-1 > * { - flex: 0 0 auto; - width: 100%; - } - - .row-cols-sm-2 > * { - flex: 0 0 auto; - width: 50%; - } - - .row-cols-sm-3 > * { - flex: 0 0 auto; - width: 33.33333333%; - } - - .row-cols-sm-4 > * { - flex: 0 0 auto; - width: 25%; - } - - .row-cols-sm-5 > * { - flex: 0 0 auto; - width: 20%; - } - - .row-cols-sm-6 > * { - flex: 0 0 auto; - width: 16.66666667%; - } - - .col-sm-auto { - flex: 0 0 auto; - width: auto; - } - - .col-sm-1 { - flex: 0 0 auto; - width: 8.33333333%; - } - - .col-sm-2 { - flex: 0 0 auto; - width: 16.66666667%; - } - - .col-sm-3 { - flex: 0 0 auto; - width: 25%; - } - - .col-sm-4 { - flex: 0 0 auto; - width: 33.33333333%; - } - - .col-sm-5 { - flex: 0 0 auto; - width: 41.66666667%; - } - - .col-sm-6 { - flex: 0 0 auto; - width: 50%; - } - - .col-sm-7 { - flex: 0 0 auto; - width: 58.33333333%; - } - - .col-sm-8 { - flex: 0 0 auto; - width: 66.66666667%; - } - - .col-sm-9 { - flex: 0 0 auto; - width: 75%; - } - - .col-sm-10 { - flex: 0 0 auto; - width: 83.33333333%; - } - - .col-sm-11 { - flex: 0 0 auto; - width: 91.66666667%; - } - - .col-sm-12 { - flex: 0 0 auto; - width: 100%; - } - - .offset-sm-0 { - margin-left: 0; - } - - .offset-sm-1 { - margin-left: 8.33333333%; - } - - .offset-sm-2 { - margin-left: 16.66666667%; - } - - .offset-sm-3 { - margin-left: 25%; - } - - .offset-sm-4 { - margin-left: 33.33333333%; - } - - .offset-sm-5 { - margin-left: 41.66666667%; - } - - .offset-sm-6 { - margin-left: 50%; - } - - .offset-sm-7 { - margin-left: 58.33333333%; - } - - .offset-sm-8 { - margin-left: 66.66666667%; - } - - .offset-sm-9 { - margin-left: 75%; - } - - .offset-sm-10 { - margin-left: 83.33333333%; - } - - .offset-sm-11 { - margin-left: 91.66666667%; - } - - .g-sm-none, - .gx-sm-none { - --bs-gutter-x: 0 !important; - } - - .g-sm-none, - .gy-sm-none { - --bs-gutter-y: 0 !important; - } - - .g-sm-smash, - .gx-sm-smash { - --bs-gutter-x: 2px !important; - } - - .g-sm-smash, - .gy-sm-smash { - --bs-gutter-y: 2px !important; - } - - .g-sm-shortest, - .gx-sm-shortest { - --bs-gutter-x: 4px !important; - } - - .g-sm-shortest, - .gy-sm-shortest { - --bs-gutter-y: 4px !important; - } - - .g-sm-shorter, - .gx-sm-shorter { - --bs-gutter-x: 8px !important; - } - - .g-sm-shorter, - .gy-sm-shorter { - --bs-gutter-y: 8px !important; - } - - .g-sm-short, - .gx-sm-short { - --bs-gutter-x: 12px !important; - } - - .g-sm-short, - .gy-sm-short { - --bs-gutter-y: 12px !important; - } - - .g-sm-medium, - .gx-sm-medium { - --bs-gutter-x: 16px !important; - } - - .g-sm-medium, - .gy-sm-medium { - --bs-gutter-y: 16px !important; - } - - .g-sm-tall, - .gx-sm-tall { - --bs-gutter-x: 24px !important; - } - - .g-sm-tall, - .gy-sm-tall { - --bs-gutter-y: 24px !important; - } - - .g-sm-taller, - .gx-sm-taller { - --bs-gutter-x: 32px !important; - } - - .g-sm-taller, - .gy-sm-taller { - --bs-gutter-y: 32px !important; - } - - .g-sm-tallest, - .gx-sm-tallest { - --bs-gutter-x: 40px !important; - } - - .g-sm-tallest, - .gy-sm-tallest { - --bs-gutter-y: 40px !important; - } - - .g-sm-spacious, - .gx-sm-spacious { - --bs-gutter-x: 48px !important; - } - - .g-sm-spacious, - .gy-sm-spacious { - --bs-gutter-y: 48px !important; - } - - .g-sm-huge, - .gx-sm-huge { - --bs-gutter-x: 56px !important; - } - - .g-sm-huge, - .gy-sm-huge { - --bs-gutter-y: 56px !important; - } - - .g-sm-jumbo, - .gx-sm-jumbo { - --bs-gutter-x: 64px !important; - } - - .g-sm-jumbo, - .gy-sm-jumbo { - --bs-gutter-y: 64px !important; - } - } - - @media (min-width: 736px) { - .col-md { - flex: 1 0 0%; - } - - .row-cols-md-auto > * { - flex: 0 0 auto; - width: auto; - } - - .row-cols-md-1 > * { - flex: 0 0 auto; - width: 100%; - } - - .row-cols-md-2 > * { - flex: 0 0 auto; - width: 50%; - } - - .row-cols-md-3 > * { - flex: 0 0 auto; - width: 33.33333333%; - } - - .row-cols-md-4 > * { - flex: 0 0 auto; - width: 25%; - } - - .row-cols-md-5 > * { - flex: 0 0 auto; - width: 20%; - } - - .row-cols-md-6 > * { - flex: 0 0 auto; - width: 16.66666667%; - } - - .col-md-auto { - flex: 0 0 auto; - width: auto; - } - - .col-md-1 { - flex: 0 0 auto; - width: 8.33333333%; - } - - .col-md-2 { - flex: 0 0 auto; - width: 16.66666667%; - } - - .col-md-3 { - flex: 0 0 auto; - width: 25%; - } - - .col-md-4 { - flex: 0 0 auto; - width: 33.33333333%; - } - - .col-md-5 { - flex: 0 0 auto; - width: 41.66666667%; - } - - .col-md-6 { - flex: 0 0 auto; - width: 50%; - } - - .col-md-7 { - flex: 0 0 auto; - width: 58.33333333%; - } - - .col-md-8 { - flex: 0 0 auto; - width: 66.66666667%; - } - - .col-md-9 { - flex: 0 0 auto; - width: 75%; - } - - .col-md-10 { - flex: 0 0 auto; - width: 83.33333333%; - } - - .col-md-11 { - flex: 0 0 auto; - width: 91.66666667%; - } - - .col-md-12 { - flex: 0 0 auto; - width: 100%; - } - - .offset-md-0 { - margin-left: 0; - } - - .offset-md-1 { - margin-left: 8.33333333%; - } - - .offset-md-2 { - margin-left: 16.66666667%; - } - - .offset-md-3 { - margin-left: 25%; - } - - .offset-md-4 { - margin-left: 33.33333333%; - } - - .offset-md-5 { - margin-left: 41.66666667%; - } - - .offset-md-6 { - margin-left: 50%; - } - - .offset-md-7 { - margin-left: 58.33333333%; - } - - .offset-md-8 { - margin-left: 66.66666667%; - } - - .offset-md-9 { - margin-left: 75%; - } - - .offset-md-10 { - margin-left: 83.33333333%; - } - - .offset-md-11 { - margin-left: 91.66666667%; - } - - .g-md-none, - .gx-md-none { - --bs-gutter-x: 0 !important; - } - - .g-md-none, - .gy-md-none { - --bs-gutter-y: 0 !important; - } - - .g-md-smash, - .gx-md-smash { - --bs-gutter-x: 2px !important; - } - - .g-md-smash, - .gy-md-smash { - --bs-gutter-y: 2px !important; - } - - .g-md-shortest, - .gx-md-shortest { - --bs-gutter-x: 4px !important; - } - - .g-md-shortest, - .gy-md-shortest { - --bs-gutter-y: 4px !important; - } - - .g-md-shorter, - .gx-md-shorter { - --bs-gutter-x: 8px !important; - } - - .g-md-shorter, - .gy-md-shorter { - --bs-gutter-y: 8px !important; - } - - .g-md-short, - .gx-md-short { - --bs-gutter-x: 12px !important; - } - - .g-md-short, - .gy-md-short { - --bs-gutter-y: 12px !important; - } - - .g-md-medium, - .gx-md-medium { - --bs-gutter-x: 16px !important; - } - - .g-md-medium, - .gy-md-medium { - --bs-gutter-y: 16px !important; - } - - .g-md-tall, - .gx-md-tall { - --bs-gutter-x: 24px !important; - } - - .g-md-tall, - .gy-md-tall { - --bs-gutter-y: 24px !important; - } - - .g-md-taller, - .gx-md-taller { - --bs-gutter-x: 32px !important; - } - - .g-md-taller, - .gy-md-taller { - --bs-gutter-y: 32px !important; - } - - .g-md-tallest, - .gx-md-tallest { - --bs-gutter-x: 40px !important; - } - - .g-md-tallest, - .gy-md-tallest { - --bs-gutter-y: 40px !important; - } - - .g-md-spacious, - .gx-md-spacious { - --bs-gutter-x: 48px !important; - } - - .g-md-spacious, - .gy-md-spacious { - --bs-gutter-y: 48px !important; - } - - .g-md-huge, - .gx-md-huge { - --bs-gutter-x: 56px !important; - } - - .g-md-huge, - .gy-md-huge { - --bs-gutter-y: 56px !important; - } - - .g-md-jumbo, - .gx-md-jumbo { - --bs-gutter-x: 64px !important; - } - - .g-md-jumbo, - .gy-md-jumbo { - --bs-gutter-y: 64px !important; - } - } - - @media (min-width: 1024px) { - .col-lg { - flex: 1 0 0%; - } - - .row-cols-lg-auto > * { - flex: 0 0 auto; - width: auto; - } - - .row-cols-lg-1 > * { - flex: 0 0 auto; - width: 100%; - } - - .row-cols-lg-2 > * { - flex: 0 0 auto; - width: 50%; - } - - .row-cols-lg-3 > * { - flex: 0 0 auto; - width: 33.33333333%; - } - - .row-cols-lg-4 > * { - flex: 0 0 auto; - width: 25%; - } - - .row-cols-lg-5 > * { - flex: 0 0 auto; - width: 20%; - } - - .row-cols-lg-6 > * { - flex: 0 0 auto; - width: 16.66666667%; - } - - .col-lg-auto { - flex: 0 0 auto; - width: auto; - } - - .col-lg-1 { - flex: 0 0 auto; - width: 8.33333333%; - } - - .col-lg-2 { - flex: 0 0 auto; - width: 16.66666667%; - } - - .col-lg-3 { - flex: 0 0 auto; - width: 25%; - } - - .col-lg-4 { - flex: 0 0 auto; - width: 33.33333333%; - } - - .col-lg-5 { - flex: 0 0 auto; - width: 41.66666667%; - } - - .col-lg-6 { - flex: 0 0 auto; - width: 50%; - } - - .col-lg-7 { - flex: 0 0 auto; - width: 58.33333333%; - } - - .col-lg-8 { - flex: 0 0 auto; - width: 66.66666667%; - } - - .col-lg-9 { - flex: 0 0 auto; - width: 75%; - } - - .col-lg-10 { - flex: 0 0 auto; - width: 83.33333333%; - } - - .col-lg-11 { - flex: 0 0 auto; - width: 91.66666667%; - } - - .col-lg-12 { - flex: 0 0 auto; - width: 100%; - } - - .offset-lg-0 { - margin-left: 0; - } - - .offset-lg-1 { - margin-left: 8.33333333%; - } - - .offset-lg-2 { - margin-left: 16.66666667%; - } - - .offset-lg-3 { - margin-left: 25%; - } - - .offset-lg-4 { - margin-left: 33.33333333%; - } - - .offset-lg-5 { - margin-left: 41.66666667%; - } - - .offset-lg-6 { - margin-left: 50%; - } - - .offset-lg-7 { - margin-left: 58.33333333%; - } - - .offset-lg-8 { - margin-left: 66.66666667%; - } - - .offset-lg-9 { - margin-left: 75%; - } - - .offset-lg-10 { - margin-left: 83.33333333%; - } - - .offset-lg-11 { - margin-left: 91.66666667%; - } - - .g-lg-none, - .gx-lg-none { - --bs-gutter-x: 0 !important; - } - - .g-lg-none, - .gy-lg-none { - --bs-gutter-y: 0 !important; - } - - .g-lg-smash, - .gx-lg-smash { - --bs-gutter-x: 2px !important; - } - - .g-lg-smash, - .gy-lg-smash { - --bs-gutter-y: 2px !important; - } - - .g-lg-shortest, - .gx-lg-shortest { - --bs-gutter-x: 4px !important; - } - - .g-lg-shortest, - .gy-lg-shortest { - --bs-gutter-y: 4px !important; - } - - .g-lg-shorter, - .gx-lg-shorter { - --bs-gutter-x: 8px !important; - } - - .g-lg-shorter, - .gy-lg-shorter { - --bs-gutter-y: 8px !important; - } - - .g-lg-short, - .gx-lg-short { - --bs-gutter-x: 12px !important; - } - - .g-lg-short, - .gy-lg-short { - --bs-gutter-y: 12px !important; - } - - .g-lg-medium, - .gx-lg-medium { - --bs-gutter-x: 16px !important; - } - - .g-lg-medium, - .gy-lg-medium { - --bs-gutter-y: 16px !important; - } - - .g-lg-tall, - .gx-lg-tall { - --bs-gutter-x: 24px !important; - } - - .g-lg-tall, - .gy-lg-tall { - --bs-gutter-y: 24px !important; - } - - .g-lg-taller, - .gx-lg-taller { - --bs-gutter-x: 32px !important; - } - - .g-lg-taller, - .gy-lg-taller { - --bs-gutter-y: 32px !important; - } - - .g-lg-tallest, - .gx-lg-tallest { - --bs-gutter-x: 40px !important; - } - - .g-lg-tallest, - .gy-lg-tallest { - --bs-gutter-y: 40px !important; - } - - .g-lg-spacious, - .gx-lg-spacious { - --bs-gutter-x: 48px !important; - } - - .g-lg-spacious, - .gy-lg-spacious { - --bs-gutter-y: 48px !important; - } - - .g-lg-huge, - .gx-lg-huge { - --bs-gutter-x: 56px !important; - } - - .g-lg-huge, - .gy-lg-huge { - --bs-gutter-y: 56px !important; - } - - .g-lg-jumbo, - .gx-lg-jumbo { - --bs-gutter-x: 64px !important; - } - - .g-lg-jumbo, - .gy-lg-jumbo { - --bs-gutter-y: 64px !important; - } - } - - @media (min-width: 1320px) { - .col-xl { - flex: 1 0 0%; - } - - .row-cols-xl-auto > * { - flex: 0 0 auto; - width: auto; - } - - .row-cols-xl-1 > * { - flex: 0 0 auto; - width: 100%; - } - - .row-cols-xl-2 > * { - flex: 0 0 auto; - width: 50%; - } - - .row-cols-xl-3 > * { - flex: 0 0 auto; - width: 33.33333333%; - } - - .row-cols-xl-4 > * { - flex: 0 0 auto; - width: 25%; - } - - .row-cols-xl-5 > * { - flex: 0 0 auto; - width: 20%; - } - - .row-cols-xl-6 > * { - flex: 0 0 auto; - width: 16.66666667%; - } - - .col-xl-auto { - flex: 0 0 auto; - width: auto; - } - - .col-xl-1 { - flex: 0 0 auto; - width: 8.33333333%; - } - - .col-xl-2 { - flex: 0 0 auto; - width: 16.66666667%; - } - - .col-xl-3 { - flex: 0 0 auto; - width: 25%; - } - - .col-xl-4 { - flex: 0 0 auto; - width: 33.33333333%; - } - - .col-xl-5 { - flex: 0 0 auto; - width: 41.66666667%; - } - - .col-xl-6 { - flex: 0 0 auto; - width: 50%; - } - - .col-xl-7 { - flex: 0 0 auto; - width: 58.33333333%; - } - - .col-xl-8 { - flex: 0 0 auto; - width: 66.66666667%; - } - - .col-xl-9 { - flex: 0 0 auto; - width: 75%; - } - - .col-xl-10 { - flex: 0 0 auto; - width: 83.33333333%; - } - - .col-xl-11 { - flex: 0 0 auto; - width: 91.66666667%; - } - - .col-xl-12 { - flex: 0 0 auto; - width: 100%; - } - - .offset-xl-0 { - margin-left: 0; - } - - .offset-xl-1 { - margin-left: 8.33333333%; - } - - .offset-xl-2 { - margin-left: 16.66666667%; - } - - .offset-xl-3 { - margin-left: 25%; - } - - .offset-xl-4 { - margin-left: 33.33333333%; - } - - .offset-xl-5 { - margin-left: 41.66666667%; - } - - .offset-xl-6 { - margin-left: 50%; - } - - .offset-xl-7 { - margin-left: 58.33333333%; - } - - .offset-xl-8 { - margin-left: 66.66666667%; - } - - .offset-xl-9 { - margin-left: 75%; - } - - .offset-xl-10 { - margin-left: 83.33333333%; - } - - .offset-xl-11 { - margin-left: 91.66666667%; - } - - .g-xl-none, - .gx-xl-none { - --bs-gutter-x: 0 !important; - } - - .g-xl-none, - .gy-xl-none { - --bs-gutter-y: 0 !important; - } - - .g-xl-smash, - .gx-xl-smash { - --bs-gutter-x: 2px !important; - } - - .g-xl-smash, - .gy-xl-smash { - --bs-gutter-y: 2px !important; - } - - .g-xl-shortest, - .gx-xl-shortest { - --bs-gutter-x: 4px !important; - } - - .g-xl-shortest, - .gy-xl-shortest { - --bs-gutter-y: 4px !important; - } - - .g-xl-shorter, - .gx-xl-shorter { - --bs-gutter-x: 8px !important; - } - - .g-xl-shorter, - .gy-xl-shorter { - --bs-gutter-y: 8px !important; - } - - .g-xl-short, - .gx-xl-short { - --bs-gutter-x: 12px !important; - } - - .g-xl-short, - .gy-xl-short { - --bs-gutter-y: 12px !important; - } - - .g-xl-medium, - .gx-xl-medium { - --bs-gutter-x: 16px !important; - } - - .g-xl-medium, - .gy-xl-medium { - --bs-gutter-y: 16px !important; - } - - .g-xl-tall, - .gx-xl-tall { - --bs-gutter-x: 24px !important; - } - - .g-xl-tall, - .gy-xl-tall { - --bs-gutter-y: 24px !important; - } - - .g-xl-taller, - .gx-xl-taller { - --bs-gutter-x: 32px !important; - } - - .g-xl-taller, - .gy-xl-taller { - --bs-gutter-y: 32px !important; - } - - .g-xl-tallest, - .gx-xl-tallest { - --bs-gutter-x: 40px !important; - } - - .g-xl-tallest, - .gy-xl-tallest { - --bs-gutter-y: 40px !important; - } - - .g-xl-spacious, - .gx-xl-spacious { - --bs-gutter-x: 48px !important; - } - - .g-xl-spacious, - .gy-xl-spacious { - --bs-gutter-y: 48px !important; - } - - .g-xl-huge, - .gx-xl-huge { - --bs-gutter-x: 56px !important; - } - - .g-xl-huge, - .gy-xl-huge { - --bs-gutter-y: 56px !important; - } - - .g-xl-jumbo, - .gx-xl-jumbo { - --bs-gutter-x: 64px !important; - } - - .g-xl-jumbo, - .gy-xl-jumbo { - --bs-gutter-y: 64px !important; - } - } - - @media (min-width: 1640px) { - .col-2xl { - flex: 1 0 0%; - } - - .row-cols-2xl-auto > * { - flex: 0 0 auto; - width: auto; - } - - .row-cols-2xl-1 > * { - flex: 0 0 auto; - width: 100%; - } - - .row-cols-2xl-2 > * { - flex: 0 0 auto; - width: 50%; - } - - .row-cols-2xl-3 > * { - flex: 0 0 auto; - width: 33.33333333%; - } - - .row-cols-2xl-4 > * { - flex: 0 0 auto; - width: 25%; - } - - .row-cols-2xl-5 > * { - flex: 0 0 auto; - width: 20%; - } - - .row-cols-2xl-6 > * { - flex: 0 0 auto; - width: 16.66666667%; - } - - .col-2xl-auto { - flex: 0 0 auto; - width: auto; - } - - .col-2xl-1 { - flex: 0 0 auto; - width: 8.33333333%; - } - - .col-2xl-2 { - flex: 0 0 auto; - width: 16.66666667%; - } - - .col-2xl-3 { - flex: 0 0 auto; - width: 25%; - } - - .col-2xl-4 { - flex: 0 0 auto; - width: 33.33333333%; - } - - .col-2xl-5 { - flex: 0 0 auto; - width: 41.66666667%; - } - - .col-2xl-6 { - flex: 0 0 auto; - width: 50%; - } - - .col-2xl-7 { - flex: 0 0 auto; - width: 58.33333333%; - } - - .col-2xl-8 { - flex: 0 0 auto; - width: 66.66666667%; - } - - .col-2xl-9 { - flex: 0 0 auto; - width: 75%; - } - - .col-2xl-10 { - flex: 0 0 auto; - width: 83.33333333%; - } - - .col-2xl-11 { - flex: 0 0 auto; - width: 91.66666667%; - } - - .col-2xl-12 { - flex: 0 0 auto; - width: 100%; - } - - .offset-2xl-0 { - margin-left: 0; - } - - .offset-2xl-1 { - margin-left: 8.33333333%; - } - - .offset-2xl-2 { - margin-left: 16.66666667%; - } - - .offset-2xl-3 { - margin-left: 25%; - } - - .offset-2xl-4 { - margin-left: 33.33333333%; - } - - .offset-2xl-5 { - margin-left: 41.66666667%; - } - - .offset-2xl-6 { - margin-left: 50%; - } - - .offset-2xl-7 { - margin-left: 58.33333333%; - } - - .offset-2xl-8 { - margin-left: 66.66666667%; - } - - .offset-2xl-9 { - margin-left: 75%; - } - - .offset-2xl-10 { - margin-left: 83.33333333%; - } - - .offset-2xl-11 { - margin-left: 91.66666667%; - } - - .g-2xl-none, - .gx-2xl-none { - --bs-gutter-x: 0 !important; - } - - .g-2xl-none, - .gy-2xl-none { - --bs-gutter-y: 0 !important; - } - - .g-2xl-smash, - .gx-2xl-smash { - --bs-gutter-x: 2px !important; - } - - .g-2xl-smash, - .gy-2xl-smash { - --bs-gutter-y: 2px !important; - } - - .g-2xl-shortest, - .gx-2xl-shortest { - --bs-gutter-x: 4px !important; - } - - .g-2xl-shortest, - .gy-2xl-shortest { - --bs-gutter-y: 4px !important; - } - - .g-2xl-shorter, - .gx-2xl-shorter { - --bs-gutter-x: 8px !important; - } - - .g-2xl-shorter, - .gy-2xl-shorter { - --bs-gutter-y: 8px !important; - } - - .g-2xl-short, - .gx-2xl-short { - --bs-gutter-x: 12px !important; - } - - .g-2xl-short, - .gy-2xl-short { - --bs-gutter-y: 12px !important; - } - - .g-2xl-medium, - .gx-2xl-medium { - --bs-gutter-x: 16px !important; - } - - .g-2xl-medium, - .gy-2xl-medium { - --bs-gutter-y: 16px !important; - } - - .g-2xl-tall, - .gx-2xl-tall { - --bs-gutter-x: 24px !important; - } - - .g-2xl-tall, - .gy-2xl-tall { - --bs-gutter-y: 24px !important; - } - - .g-2xl-taller, - .gx-2xl-taller { - --bs-gutter-x: 32px !important; - } - - .g-2xl-taller, - .gy-2xl-taller { - --bs-gutter-y: 32px !important; - } - - .g-2xl-tallest, - .gx-2xl-tallest { - --bs-gutter-x: 40px !important; - } - - .g-2xl-tallest, - .gy-2xl-tallest { - --bs-gutter-y: 40px !important; - } - - .g-2xl-spacious, - .gx-2xl-spacious { - --bs-gutter-x: 48px !important; - } - - .g-2xl-spacious, - .gy-2xl-spacious { - --bs-gutter-y: 48px !important; - } - - .g-2xl-huge, - .gx-2xl-huge { - --bs-gutter-x: 56px !important; - } - - .g-2xl-huge, - .gy-2xl-huge { - --bs-gutter-y: 56px !important; - } - - .g-2xl-jumbo, - .gx-2xl-jumbo { - --bs-gutter-x: 64px !important; - } - - .g-2xl-jumbo, - .gy-2xl-jumbo { - --bs-gutter-y: 64px !important; - } - } - - @media (min-width: 1880px) { - .col-3xl { - flex: 1 0 0%; - } - - .row-cols-3xl-auto > * { - flex: 0 0 auto; - width: auto; - } - - .row-cols-3xl-1 > * { - flex: 0 0 auto; - width: 100%; - } - - .row-cols-3xl-2 > * { - flex: 0 0 auto; - width: 50%; - } - - .row-cols-3xl-3 > * { - flex: 0 0 auto; - width: 33.33333333%; - } - - .row-cols-3xl-4 > * { - flex: 0 0 auto; - width: 25%; - } - - .row-cols-3xl-5 > * { - flex: 0 0 auto; - width: 20%; - } - - .row-cols-3xl-6 > * { - flex: 0 0 auto; - width: 16.66666667%; - } - - .col-3xl-auto { - flex: 0 0 auto; - width: auto; - } - - .col-3xl-1 { - flex: 0 0 auto; - width: 8.33333333%; - } - - .col-3xl-2 { - flex: 0 0 auto; - width: 16.66666667%; - } - - .col-3xl-3 { - flex: 0 0 auto; - width: 25%; - } - - .col-3xl-4 { - flex: 0 0 auto; - width: 33.33333333%; - } - - .col-3xl-5 { - flex: 0 0 auto; - width: 41.66666667%; - } - - .col-3xl-6 { - flex: 0 0 auto; - width: 50%; - } - - .col-3xl-7 { - flex: 0 0 auto; - width: 58.33333333%; - } - - .col-3xl-8 { - flex: 0 0 auto; - width: 66.66666667%; - } - - .col-3xl-9 { - flex: 0 0 auto; - width: 75%; - } - - .col-3xl-10 { - flex: 0 0 auto; - width: 83.33333333%; - } - - .col-3xl-11 { - flex: 0 0 auto; - width: 91.66666667%; - } - - .col-3xl-12 { - flex: 0 0 auto; - width: 100%; - } - - .offset-3xl-0 { - margin-left: 0; - } - - .offset-3xl-1 { - margin-left: 8.33333333%; - } - - .offset-3xl-2 { - margin-left: 16.66666667%; - } - - .offset-3xl-3 { - margin-left: 25%; - } - - .offset-3xl-4 { - margin-left: 33.33333333%; - } - - .offset-3xl-5 { - margin-left: 41.66666667%; - } - - .offset-3xl-6 { - margin-left: 50%; - } - - .offset-3xl-7 { - margin-left: 58.33333333%; - } - - .offset-3xl-8 { - margin-left: 66.66666667%; - } - - .offset-3xl-9 { - margin-left: 75%; - } - - .offset-3xl-10 { - margin-left: 83.33333333%; - } - - .offset-3xl-11 { - margin-left: 91.66666667%; - } - - .g-3xl-none, - .gx-3xl-none { - --bs-gutter-x: 0 !important; - } - - .g-3xl-none, - .gy-3xl-none { - --bs-gutter-y: 0 !important; - } - - .g-3xl-smash, - .gx-3xl-smash { - --bs-gutter-x: 2px !important; - } - - .g-3xl-smash, - .gy-3xl-smash { - --bs-gutter-y: 2px !important; - } - - .g-3xl-shortest, - .gx-3xl-shortest { - --bs-gutter-x: 4px !important; - } - - .g-3xl-shortest, - .gy-3xl-shortest { - --bs-gutter-y: 4px !important; - } - - .g-3xl-shorter, - .gx-3xl-shorter { - --bs-gutter-x: 8px !important; - } - - .g-3xl-shorter, - .gy-3xl-shorter { - --bs-gutter-y: 8px !important; - } - - .g-3xl-short, - .gx-3xl-short { - --bs-gutter-x: 12px !important; - } - - .g-3xl-short, - .gy-3xl-short { - --bs-gutter-y: 12px !important; - } - - .g-3xl-medium, - .gx-3xl-medium { - --bs-gutter-x: 16px !important; - } - - .g-3xl-medium, - .gy-3xl-medium { - --bs-gutter-y: 16px !important; - } - - .g-3xl-tall, - .gx-3xl-tall { - --bs-gutter-x: 24px !important; - } - - .g-3xl-tall, - .gy-3xl-tall { - --bs-gutter-y: 24px !important; - } - - .g-3xl-taller, - .gx-3xl-taller { - --bs-gutter-x: 32px !important; - } - - .g-3xl-taller, - .gy-3xl-taller { - --bs-gutter-y: 32px !important; - } - - .g-3xl-tallest, - .gx-3xl-tallest { - --bs-gutter-x: 40px !important; - } - - .g-3xl-tallest, - .gy-3xl-tallest { - --bs-gutter-y: 40px !important; - } - - .g-3xl-spacious, - .gx-3xl-spacious { - --bs-gutter-x: 48px !important; - } - - .g-3xl-spacious, - .gy-3xl-spacious { - --bs-gutter-y: 48px !important; - } - - .g-3xl-huge, - .gx-3xl-huge { - --bs-gutter-x: 56px !important; - } - - .g-3xl-huge, - .gy-3xl-huge { - --bs-gutter-y: 56px !important; - } - - .g-3xl-jumbo, - .gx-3xl-jumbo { - --bs-gutter-x: 64px !important; - } - - .g-3xl-jumbo, - .gy-3xl-jumbo { - --bs-gutter-y: 64px !important; - } - } - } - } - } - - @include it("generates OUDS and Bootstrap grid classes") { - $enable-bootstrap-compatibility: true !global; - @import "../../functions"; - @import "../../tokens/raw"; - @import "../../tokens/semantic"; - @import "../../tokens/composite"; - @import "../../tokens/component"; - @import "../../variables"; - @import "../../maps"; - @import "../../mixins"; - - @include assert() { - @include output() { - @import "../../grid"; - } - @include expect() { - :root { - --bs-breakpoint-2xs: 0; - --bs-breakpoint-xs: 390px; - --bs-breakpoint-sm: 480px; - --bs-breakpoint-md: 736px; - --bs-breakpoint-lg: 1024px; - --bs-breakpoint-xl: 1320px; - --bs-breakpoint-xxl: 1640px; - --bs-breakpoint-2xl: 1640px; - --bs-breakpoint-3xl: 1880px; - } - - .row { - --bs-gutter-y: 0; - display: flex; - flex-wrap: wrap; - margin-top: calc(-1 * var(--bs-gutter-y)); // stylelint-disable-line function-disallowed-list - margin-right: calc(-0.5 * var(--bs-gutter-x)); // stylelint-disable-line function-disallowed-list, @stylistic/number-leading-zero - margin-left: calc(-0.5 * var(--bs-gutter-x)); // stylelint-disable-line function-disallowed-list, @stylistic/number-leading-zero - --bs-gutter-x: 8px; - } - - @media (min-width: 390px) { - .row { - --bs-gutter-x: 16px; - } - } - - @media (min-width: 480px) { - .row { - --bs-gutter-x: 16px; - } - } - - @media (min-width: 736px) { - .row { - --bs-gutter-x: 24px; - } - } - - @media (min-width: 1024px) { - .row { - --bs-gutter-x: 24px; - } - } - - @media (min-width: 1320px) { - .row { - --bs-gutter-x: 32px; - } - } - - @media (min-width: 1640px) { - .row { - --bs-gutter-x: 32px; - } - } - - @media (min-width: 1880px) { - .row { - --bs-gutter-x: 40px; - } - } - - .row > * { - flex-shrink: 0; - width: 100%; - max-width: 100%; - padding-right: calc(var(--bs-gutter-x) * 0.5); // stylelint-disable-line function-disallowed-list, @stylistic/number-leading-zero - padding-left: calc(var(--bs-gutter-x) * 0.5); // stylelint-disable-line function-disallowed-list, @stylistic/number-leading-zero - margin-top: var(--bs-gutter-y); - } - - .col { - flex: 1 0 0%; - } - - .row-cols-auto > * { - flex: 0 0 auto; - width: auto; - } - - .row-cols-1 > * { - flex: 0 0 auto; - width: 100%; - } - - .row-cols-2 > * { - flex: 0 0 auto; - width: 50%; - } - - .row-cols-3 > * { - flex: 0 0 auto; - width: 33.33333333%; - } - - .row-cols-4 > * { - flex: 0 0 auto; - width: 25%; - } - - .row-cols-5 > * { - flex: 0 0 auto; - width: 20%; - } - - .row-cols-6 > * { - flex: 0 0 auto; - width: 16.66666667%; - } - - .col-auto { - flex: 0 0 auto; - width: auto; - } - - .col-1 { - flex: 0 0 auto; - width: 8.33333333%; - } - - .col-2 { - flex: 0 0 auto; - width: 16.66666667%; - } - - .col-3 { - flex: 0 0 auto; - width: 25%; - } - - .col-4 { - flex: 0 0 auto; - width: 33.33333333%; - } - - .col-5 { - flex: 0 0 auto; - width: 41.66666667%; - } - - .col-6 { - flex: 0 0 auto; - width: 50%; - } - - .col-7 { - flex: 0 0 auto; - width: 58.33333333%; - } - - .col-8 { - flex: 0 0 auto; - width: 66.66666667%; - } - - .col-9 { - flex: 0 0 auto; - width: 75%; - } - - .col-10 { - flex: 0 0 auto; - width: 83.33333333%; - } - - .col-11 { - flex: 0 0 auto; - width: 91.66666667%; - } - - .col-12 { - flex: 0 0 auto; - width: 100%; - } - - .offset-1 { - margin-left: 8.33333333%; - } - - .offset-2 { - margin-left: 16.66666667%; - } - - .offset-3 { - margin-left: 25%; - } - - .offset-4 { - margin-left: 33.33333333%; - } - - .offset-5 { - margin-left: 41.66666667%; - } - - .offset-6 { - margin-left: 50%; - } - - .offset-7 { - margin-left: 58.33333333%; - } - - .offset-8 { - margin-left: 66.66666667%; - } - - .offset-9 { - margin-left: 75%; - } - - .offset-10 { - margin-left: 83.33333333%; - } - - .offset-11 { - margin-left: 91.66666667%; - } - - .g-none, - .gx-none { - --bs-gutter-x: 0 !important; - } - - .g-none, - .gy-none { - --bs-gutter-y: 0 !important; - } - - .g-smash, - .gx-smash { - --bs-gutter-x: 2px !important; - } - - .g-smash, - .gy-smash { - --bs-gutter-y: 2px !important; - } - - .g-shortest, - .gx-shortest { - --bs-gutter-x: 4px !important; - } - - .g-shortest, - .gy-shortest { - --bs-gutter-y: 4px !important; - } - - .g-shorter, - .gx-shorter { - --bs-gutter-x: 8px !important; - } - - .g-shorter, - .gy-shorter { - --bs-gutter-y: 8px !important; - } - - .g-short, - .gx-short { - --bs-gutter-x: 12px !important; - } - - .g-short, - .gy-short { - --bs-gutter-y: 12px !important; - } - - .g-medium, - .gx-medium { - --bs-gutter-x: 16px !important; - } - - .g-medium, - .gy-medium { - --bs-gutter-y: 16px !important; - } - - .g-tall, - .gx-tall { - --bs-gutter-x: 24px !important; - } - - .g-tall, - .gy-tall { - --bs-gutter-y: 24px !important; - } - - .g-taller, - .gx-taller { - --bs-gutter-x: 32px !important; - } - - .g-taller, - .gy-taller { - --bs-gutter-y: 32px !important; - } - - .g-tallest, - .gx-tallest { - --bs-gutter-x: 40px !important; - } - - .g-tallest, - .gy-tallest { - --bs-gutter-y: 40px !important; - } - - .g-spacious, - .gx-spacious { - --bs-gutter-x: 48px !important; - } - - .g-spacious, - .gy-spacious { - --bs-gutter-y: 48px !important; - } - - .g-huge, - .gx-huge { - --bs-gutter-x: 56px !important; - } - - .g-huge, - .gy-huge { - --bs-gutter-y: 56px !important; - } - - .g-jumbo, - .gx-jumbo { - --bs-gutter-x: 64px !important; - } - - .g-jumbo, - .gy-jumbo { - --bs-gutter-y: 64px !important; - } - - .g-0, - .gx-0 { - --bs-gutter-x: 0 !important; - } - - .g-0, - .gy-0 { - --bs-gutter-y: 0 !important; - } - - .g-1, - .gx-1 { - --bs-gutter-x: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero - } - - .g-1, - .gy-1 { - --bs-gutter-y: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero - } - - .g-2, - .gx-2 { - --bs-gutter-x: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero - } - - .g-2, - .gy-2 { - --bs-gutter-y: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero - } - - .g-3, - .gx-3 { - --bs-gutter-x: 1.5rem !important; - } - - .g-3, - .gy-3 { - --bs-gutter-y: 1.5rem !important; - } - - .g-4, - .gx-4 { - --bs-gutter-x: 2.5rem !important; - } - - .g-4, - .gy-4 { - --bs-gutter-y: 2.5rem !important; - } - - .g-5, - .gx-5 { - --bs-gutter-x: 3.5rem !important; - } - - .g-5, - .gy-5 { - --bs-gutter-y: 3.5rem !important; - } - - @media (min-width: 390px) { - .col-xs { - flex: 1 0 0%; - } - - .row-cols-xs-auto > * { - flex: 0 0 auto; - width: auto; - } - - .row-cols-xs-1 > * { - flex: 0 0 auto; - width: 100%; - } - - .row-cols-xs-2 > * { - flex: 0 0 auto; - width: 50%; - } - - .row-cols-xs-3 > * { - flex: 0 0 auto; - width: 33.33333333%; - } - - .row-cols-xs-4 > * { - flex: 0 0 auto; - width: 25%; - } - - .row-cols-xs-5 > * { - flex: 0 0 auto; - width: 20%; - } - - .row-cols-xs-6 > * { - flex: 0 0 auto; - width: 16.66666667%; - } - - .col-xs-auto { - flex: 0 0 auto; - width: auto; - } - - .col-xs-1 { - flex: 0 0 auto; - width: 8.33333333%; - } - - .col-xs-2 { - flex: 0 0 auto; - width: 16.66666667%; - } - - .col-xs-3 { - flex: 0 0 auto; - width: 25%; - } - - .col-xs-4 { - flex: 0 0 auto; - width: 33.33333333%; - } - - .col-xs-5 { - flex: 0 0 auto; - width: 41.66666667%; - } - - .col-xs-6 { - flex: 0 0 auto; - width: 50%; - } - - .col-xs-7 { - flex: 0 0 auto; - width: 58.33333333%; - } - - .col-xs-8 { - flex: 0 0 auto; - width: 66.66666667%; - } - - .col-xs-9 { - flex: 0 0 auto; - width: 75%; - } - - .col-xs-10 { - flex: 0 0 auto; - width: 83.33333333%; - } - - .col-xs-11 { - flex: 0 0 auto; - width: 91.66666667%; - } - - .col-xs-12 { - flex: 0 0 auto; - width: 100%; - } - - .offset-xs-0 { - margin-left: 0; - } - - .offset-xs-1 { - margin-left: 8.33333333%; - } - - .offset-xs-2 { - margin-left: 16.66666667%; - } - - .offset-xs-3 { - margin-left: 25%; - } - - .offset-xs-4 { - margin-left: 33.33333333%; - } - - .offset-xs-5 { - margin-left: 41.66666667%; - } - - .offset-xs-6 { - margin-left: 50%; - } - - .offset-xs-7 { - margin-left: 58.33333333%; - } - - .offset-xs-8 { - margin-left: 66.66666667%; - } - - .offset-xs-9 { - margin-left: 75%; - } - - .offset-xs-10 { - margin-left: 83.33333333%; - } - - .offset-xs-11 { - margin-left: 91.66666667%; - } - - .g-xs-none, - .gx-xs-none { - --bs-gutter-x: 0 !important; - } - - .g-xs-none, - .gy-xs-none { - --bs-gutter-y: 0 !important; - } - - .g-xs-smash, - .gx-xs-smash { - --bs-gutter-x: 2px !important; - } - - .g-xs-smash, - .gy-xs-smash { - --bs-gutter-y: 2px !important; - } - - .g-xs-shortest, - .gx-xs-shortest { - --bs-gutter-x: 4px !important; - } - - .g-xs-shortest, - .gy-xs-shortest { - --bs-gutter-y: 4px !important; - } - - .g-xs-shorter, - .gx-xs-shorter { - --bs-gutter-x: 8px !important; - } - - .g-xs-shorter, - .gy-xs-shorter { - --bs-gutter-y: 8px !important; - } - - .g-xs-short, - .gx-xs-short { - --bs-gutter-x: 12px !important; - } - - .g-xs-short, - .gy-xs-short { - --bs-gutter-y: 12px !important; - } - - .g-xs-medium, - .gx-xs-medium { - --bs-gutter-x: 16px !important; - } - - .g-xs-medium, - .gy-xs-medium { - --bs-gutter-y: 16px !important; - } - - .g-xs-tall, - .gx-xs-tall { - --bs-gutter-x: 24px !important; - } - - .g-xs-tall, - .gy-xs-tall { - --bs-gutter-y: 24px !important; - } - - .g-xs-taller, - .gx-xs-taller { - --bs-gutter-x: 32px !important; - } - - .g-xs-taller, - .gy-xs-taller { - --bs-gutter-y: 32px !important; - } - - .g-xs-tallest, - .gx-xs-tallest { - --bs-gutter-x: 40px !important; - } - - .g-xs-tallest, - .gy-xs-tallest { - --bs-gutter-y: 40px !important; - } - - .g-xs-spacious, - .gx-xs-spacious { - --bs-gutter-x: 48px !important; - } - - .g-xs-spacious, - .gy-xs-spacious { - --bs-gutter-y: 48px !important; - } - - .g-xs-huge, - .gx-xs-huge { - --bs-gutter-x: 56px !important; - } - - .g-xs-huge, - .gy-xs-huge { - --bs-gutter-y: 56px !important; - } - - .g-xs-jumbo, - .gx-xs-jumbo { - --bs-gutter-x: 64px !important; - } - - .g-xs-jumbo, - .gy-xs-jumbo { - --bs-gutter-y: 64px !important; - } - - .g-xs-0, - .gx-xs-0 { - --bs-gutter-x: 0 !important; - } - - .g-xs-0, - .gy-xs-0 { - --bs-gutter-y: 0 !important; - } - - .g-xs-1, - .gx-xs-1 { - --bs-gutter-x: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero - } - - .g-xs-1, - .gy-xs-1 { - --bs-gutter-y: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero - } - - .g-xs-2, - .gx-xs-2 { - --bs-gutter-x: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero - } - - .g-xs-2, - .gy-xs-2 { - --bs-gutter-y: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero - } - - .g-xs-3, - .gx-xs-3 { - --bs-gutter-x: 1.5rem !important; - } - - .g-xs-3, - .gy-xs-3 { - --bs-gutter-y: 1.5rem !important; - } - - .g-xs-4, - .gx-xs-4 { - --bs-gutter-x: 2.5rem !important; - } - - .g-xs-4, - .gy-xs-4 { - --bs-gutter-y: 2.5rem !important; - } - - .g-xs-5, - .gx-xs-5 { - --bs-gutter-x: 3.5rem !important; - } - - .g-xs-5, - .gy-xs-5 { - --bs-gutter-y: 3.5rem !important; - } - } - - @media (min-width: 480px) { - .col-sm { - flex: 1 0 0%; - } - - .row-cols-sm-auto > * { - flex: 0 0 auto; - width: auto; - } - - .row-cols-sm-1 > * { - flex: 0 0 auto; - width: 100%; - } - - .row-cols-sm-2 > * { - flex: 0 0 auto; - width: 50%; - } - - .row-cols-sm-3 > * { - flex: 0 0 auto; - width: 33.33333333%; - } - - .row-cols-sm-4 > * { - flex: 0 0 auto; - width: 25%; - } - - .row-cols-sm-5 > * { - flex: 0 0 auto; - width: 20%; - } - - .row-cols-sm-6 > * { - flex: 0 0 auto; - width: 16.66666667%; - } - - .col-sm-auto { - flex: 0 0 auto; - width: auto; - } - - .col-sm-1 { - flex: 0 0 auto; - width: 8.33333333%; - } - - .col-sm-2 { - flex: 0 0 auto; - width: 16.66666667%; - } - - .col-sm-3 { - flex: 0 0 auto; - width: 25%; - } - - .col-sm-4 { - flex: 0 0 auto; - width: 33.33333333%; - } - - .col-sm-5 { - flex: 0 0 auto; - width: 41.66666667%; - } - - .col-sm-6 { - flex: 0 0 auto; - width: 50%; - } - - .col-sm-7 { - flex: 0 0 auto; - width: 58.33333333%; - } - - .col-sm-8 { - flex: 0 0 auto; - width: 66.66666667%; - } - - .col-sm-9 { - flex: 0 0 auto; - width: 75%; - } - - .col-sm-10 { - flex: 0 0 auto; - width: 83.33333333%; - } - - .col-sm-11 { - flex: 0 0 auto; - width: 91.66666667%; - } - - .col-sm-12 { - flex: 0 0 auto; - width: 100%; - } - - .offset-sm-0 { - margin-left: 0; - } - - .offset-sm-1 { - margin-left: 8.33333333%; - } - - .offset-sm-2 { - margin-left: 16.66666667%; - } - - .offset-sm-3 { - margin-left: 25%; - } - - .offset-sm-4 { - margin-left: 33.33333333%; - } - - .offset-sm-5 { - margin-left: 41.66666667%; - } - - .offset-sm-6 { - margin-left: 50%; - } - - .offset-sm-7 { - margin-left: 58.33333333%; - } - - .offset-sm-8 { - margin-left: 66.66666667%; - } - - .offset-sm-9 { - margin-left: 75%; - } - - .offset-sm-10 { - margin-left: 83.33333333%; - } - - .offset-sm-11 { - margin-left: 91.66666667%; - } - - .g-sm-none, - .gx-sm-none { - --bs-gutter-x: 0 !important; - } - - .g-sm-none, - .gy-sm-none { - --bs-gutter-y: 0 !important; - } - - .g-sm-smash, - .gx-sm-smash { - --bs-gutter-x: 2px !important; - } - - .g-sm-smash, - .gy-sm-smash { - --bs-gutter-y: 2px !important; - } - - .g-sm-shortest, - .gx-sm-shortest { - --bs-gutter-x: 4px !important; - } - - .g-sm-shortest, - .gy-sm-shortest { - --bs-gutter-y: 4px !important; - } - - .g-sm-shorter, - .gx-sm-shorter { - --bs-gutter-x: 8px !important; - } - - .g-sm-shorter, - .gy-sm-shorter { - --bs-gutter-y: 8px !important; - } - - .g-sm-short, - .gx-sm-short { - --bs-gutter-x: 12px !important; - } - - .g-sm-short, - .gy-sm-short { - --bs-gutter-y: 12px !important; - } - - .g-sm-medium, - .gx-sm-medium { - --bs-gutter-x: 16px !important; - } - - .g-sm-medium, - .gy-sm-medium { - --bs-gutter-y: 16px !important; - } - - .g-sm-tall, - .gx-sm-tall { - --bs-gutter-x: 24px !important; - } - - .g-sm-tall, - .gy-sm-tall { - --bs-gutter-y: 24px !important; - } - - .g-sm-taller, - .gx-sm-taller { - --bs-gutter-x: 32px !important; - } - - .g-sm-taller, - .gy-sm-taller { - --bs-gutter-y: 32px !important; - } - - .g-sm-tallest, - .gx-sm-tallest { - --bs-gutter-x: 40px !important; - } - - .g-sm-tallest, - .gy-sm-tallest { - --bs-gutter-y: 40px !important; - } - - .g-sm-spacious, - .gx-sm-spacious { - --bs-gutter-x: 48px !important; - } - - .g-sm-spacious, - .gy-sm-spacious { - --bs-gutter-y: 48px !important; - } - - .g-sm-huge, - .gx-sm-huge { - --bs-gutter-x: 56px !important; - } - - .g-sm-huge, - .gy-sm-huge { - --bs-gutter-y: 56px !important; - } - - .g-sm-jumbo, - .gx-sm-jumbo { - --bs-gutter-x: 64px !important; - } - - .g-sm-jumbo, - .gy-sm-jumbo { - --bs-gutter-y: 64px !important; - } - - .g-sm-0, - .gx-sm-0 { - --bs-gutter-x: 0 !important; - } - - .g-sm-0, - .gy-sm-0 { - --bs-gutter-y: 0 !important; - } - - .g-sm-1, - .gx-sm-1 { - --bs-gutter-x: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero - } - - .g-sm-1, - .gy-sm-1 { - --bs-gutter-y: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero - } - - .g-sm-2, - .gx-sm-2 { - --bs-gutter-x: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero - } - - .g-sm-2, - .gy-sm-2 { - --bs-gutter-y: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero - } - - .g-sm-3, - .gx-sm-3 { - --bs-gutter-x: 1.5rem !important; - } - - .g-sm-3, - .gy-sm-3 { - --bs-gutter-y: 1.5rem !important; - } - - .g-sm-4, - .gx-sm-4 { - --bs-gutter-x: 2.5rem !important; - } - - .g-sm-4, - .gy-sm-4 { - --bs-gutter-y: 2.5rem !important; - } - - .g-sm-5, - .gx-sm-5 { - --bs-gutter-x: 3.5rem !important; - } - - .g-sm-5, - .gy-sm-5 { - --bs-gutter-y: 3.5rem !important; - } - } - - @media (min-width: 736px) { - .col-md { - flex: 1 0 0%; - } - - .row-cols-md-auto > * { - flex: 0 0 auto; - width: auto; - } - - .row-cols-md-1 > * { - flex: 0 0 auto; - width: 100%; - } - - .row-cols-md-2 > * { - flex: 0 0 auto; - width: 50%; - } - - .row-cols-md-3 > * { - flex: 0 0 auto; - width: 33.33333333%; - } - - .row-cols-md-4 > * { - flex: 0 0 auto; - width: 25%; - } - - .row-cols-md-5 > * { - flex: 0 0 auto; - width: 20%; - } - - .row-cols-md-6 > * { - flex: 0 0 auto; - width: 16.66666667%; - } - - .col-md-auto { - flex: 0 0 auto; - width: auto; - } - - .col-md-1 { - flex: 0 0 auto; - width: 8.33333333%; - } - - .col-md-2 { - flex: 0 0 auto; - width: 16.66666667%; - } - - .col-md-3 { - flex: 0 0 auto; - width: 25%; - } - - .col-md-4 { - flex: 0 0 auto; - width: 33.33333333%; - } - - .col-md-5 { - flex: 0 0 auto; - width: 41.66666667%; - } - - .col-md-6 { - flex: 0 0 auto; - width: 50%; - } - - .col-md-7 { - flex: 0 0 auto; - width: 58.33333333%; - } - - .col-md-8 { - flex: 0 0 auto; - width: 66.66666667%; - } - - .col-md-9 { - flex: 0 0 auto; - width: 75%; - } - - .col-md-10 { - flex: 0 0 auto; - width: 83.33333333%; - } - - .col-md-11 { - flex: 0 0 auto; - width: 91.66666667%; - } - - .col-md-12 { - flex: 0 0 auto; - width: 100%; - } - - .offset-md-0 { - margin-left: 0; - } - - .offset-md-1 { - margin-left: 8.33333333%; - } - - .offset-md-2 { - margin-left: 16.66666667%; - } - - .offset-md-3 { - margin-left: 25%; - } - - .offset-md-4 { - margin-left: 33.33333333%; - } - - .offset-md-5 { - margin-left: 41.66666667%; - } - - .offset-md-6 { - margin-left: 50%; - } - - .offset-md-7 { - margin-left: 58.33333333%; - } - - .offset-md-8 { - margin-left: 66.66666667%; - } - - .offset-md-9 { - margin-left: 75%; - } - - .offset-md-10 { - margin-left: 83.33333333%; - } - - .offset-md-11 { - margin-left: 91.66666667%; - } - - .g-md-none, - .gx-md-none { - --bs-gutter-x: 0 !important; - } - - .g-md-none, - .gy-md-none { - --bs-gutter-y: 0 !important; - } - - .g-md-smash, - .gx-md-smash { - --bs-gutter-x: 2px !important; - } - - .g-md-smash, - .gy-md-smash { - --bs-gutter-y: 2px !important; - } - - .g-md-shortest, - .gx-md-shortest { - --bs-gutter-x: 4px !important; - } - - .g-md-shortest, - .gy-md-shortest { - --bs-gutter-y: 4px !important; - } - - .g-md-shorter, - .gx-md-shorter { - --bs-gutter-x: 8px !important; - } - - .g-md-shorter, - .gy-md-shorter { - --bs-gutter-y: 8px !important; - } - - .g-md-short, - .gx-md-short { - --bs-gutter-x: 12px !important; - } - - .g-md-short, - .gy-md-short { - --bs-gutter-y: 12px !important; - } - - .g-md-medium, - .gx-md-medium { - --bs-gutter-x: 16px !important; - } - - .g-md-medium, - .gy-md-medium { - --bs-gutter-y: 16px !important; - } - - .g-md-tall, - .gx-md-tall { - --bs-gutter-x: 24px !important; - } - - .g-md-tall, - .gy-md-tall { - --bs-gutter-y: 24px !important; - } - - .g-md-taller, - .gx-md-taller { - --bs-gutter-x: 32px !important; - } - - .g-md-taller, - .gy-md-taller { - --bs-gutter-y: 32px !important; - } - - .g-md-tallest, - .gx-md-tallest { - --bs-gutter-x: 40px !important; - } - - .g-md-tallest, - .gy-md-tallest { - --bs-gutter-y: 40px !important; - } - - .g-md-spacious, - .gx-md-spacious { - --bs-gutter-x: 48px !important; - } - - .g-md-spacious, - .gy-md-spacious { - --bs-gutter-y: 48px !important; - } - - .g-md-huge, - .gx-md-huge { - --bs-gutter-x: 56px !important; - } - - .g-md-huge, - .gy-md-huge { - --bs-gutter-y: 56px !important; - } - - .g-md-jumbo, - .gx-md-jumbo { - --bs-gutter-x: 64px !important; - } - - .g-md-jumbo, - .gy-md-jumbo { - --bs-gutter-y: 64px !important; - } - - .g-md-0, - .gx-md-0 { - --bs-gutter-x: 0 !important; - } - - .g-md-0, - .gy-md-0 { - --bs-gutter-y: 0 !important; - } - - .g-md-1, - .gx-md-1 { - --bs-gutter-x: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero - } - - .g-md-1, - .gy-md-1 { - --bs-gutter-y: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero - } - - .g-md-2, - .gx-md-2 { - --bs-gutter-x: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero - } - - .g-md-2, - .gy-md-2 { - --bs-gutter-y: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero - } - - .g-md-3, - .gx-md-3 { - --bs-gutter-x: 1.5rem !important; - } - - .g-md-3, - .gy-md-3 { - --bs-gutter-y: 1.5rem !important; - } - - .g-md-4, - .gx-md-4 { - --bs-gutter-x: 2.5rem !important; - } - - .g-md-4, - .gy-md-4 { - --bs-gutter-y: 2.5rem !important; - } - - .g-md-5, - .gx-md-5 { - --bs-gutter-x: 3.5rem !important; - } - - .g-md-5, - .gy-md-5 { - --bs-gutter-y: 3.5rem !important; - } - } - - @media (min-width: 1024px) { - .col-lg { - flex: 1 0 0%; - } - - .row-cols-lg-auto > * { - flex: 0 0 auto; - width: auto; - } - - .row-cols-lg-1 > * { - flex: 0 0 auto; - width: 100%; - } - - .row-cols-lg-2 > * { - flex: 0 0 auto; - width: 50%; - } - - .row-cols-lg-3 > * { - flex: 0 0 auto; - width: 33.33333333%; - } - - .row-cols-lg-4 > * { - flex: 0 0 auto; - width: 25%; - } - - .row-cols-lg-5 > * { - flex: 0 0 auto; - width: 20%; - } - - .row-cols-lg-6 > * { - flex: 0 0 auto; - width: 16.66666667%; - } - - .col-lg-auto { - flex: 0 0 auto; - width: auto; - } - - .col-lg-1 { - flex: 0 0 auto; - width: 8.33333333%; - } - - .col-lg-2 { - flex: 0 0 auto; - width: 16.66666667%; - } - - .col-lg-3 { - flex: 0 0 auto; - width: 25%; - } - - .col-lg-4 { - flex: 0 0 auto; - width: 33.33333333%; - } - - .col-lg-5 { - flex: 0 0 auto; - width: 41.66666667%; - } - - .col-lg-6 { - flex: 0 0 auto; - width: 50%; - } - - .col-lg-7 { - flex: 0 0 auto; - width: 58.33333333%; - } - - .col-lg-8 { - flex: 0 0 auto; - width: 66.66666667%; - } - - .col-lg-9 { - flex: 0 0 auto; - width: 75%; - } - - .col-lg-10 { - flex: 0 0 auto; - width: 83.33333333%; - } - - .col-lg-11 { - flex: 0 0 auto; - width: 91.66666667%; - } - - .col-lg-12 { - flex: 0 0 auto; - width: 100%; - } - - .offset-lg-0 { - margin-left: 0; - } - - .offset-lg-1 { - margin-left: 8.33333333%; - } - - .offset-lg-2 { - margin-left: 16.66666667%; - } - - .offset-lg-3 { - margin-left: 25%; - } - - .offset-lg-4 { - margin-left: 33.33333333%; - } - - .offset-lg-5 { - margin-left: 41.66666667%; - } - - .offset-lg-6 { - margin-left: 50%; - } - - .offset-lg-7 { - margin-left: 58.33333333%; - } - - .offset-lg-8 { - margin-left: 66.66666667%; - } - - .offset-lg-9 { - margin-left: 75%; - } - - .offset-lg-10 { - margin-left: 83.33333333%; - } - - .offset-lg-11 { - margin-left: 91.66666667%; - } - - .g-lg-none, - .gx-lg-none { - --bs-gutter-x: 0 !important; - } - - .g-lg-none, - .gy-lg-none { - --bs-gutter-y: 0 !important; - } - - .g-lg-smash, - .gx-lg-smash { - --bs-gutter-x: 2px !important; - } - - .g-lg-smash, - .gy-lg-smash { - --bs-gutter-y: 2px !important; - } - - .g-lg-shortest, - .gx-lg-shortest { - --bs-gutter-x: 4px !important; - } - - .g-lg-shortest, - .gy-lg-shortest { - --bs-gutter-y: 4px !important; - } - - .g-lg-shorter, - .gx-lg-shorter { - --bs-gutter-x: 8px !important; - } - - .g-lg-shorter, - .gy-lg-shorter { - --bs-gutter-y: 8px !important; - } - - .g-lg-short, - .gx-lg-short { - --bs-gutter-x: 12px !important; - } - - .g-lg-short, - .gy-lg-short { - --bs-gutter-y: 12px !important; - } - - .g-lg-medium, - .gx-lg-medium { - --bs-gutter-x: 16px !important; - } - - .g-lg-medium, - .gy-lg-medium { - --bs-gutter-y: 16px !important; - } - - .g-lg-tall, - .gx-lg-tall { - --bs-gutter-x: 24px !important; - } - - .g-lg-tall, - .gy-lg-tall { - --bs-gutter-y: 24px !important; - } - - .g-lg-taller, - .gx-lg-taller { - --bs-gutter-x: 32px !important; - } - - .g-lg-taller, - .gy-lg-taller { - --bs-gutter-y: 32px !important; - } - - .g-lg-tallest, - .gx-lg-tallest { - --bs-gutter-x: 40px !important; - } - - .g-lg-tallest, - .gy-lg-tallest { - --bs-gutter-y: 40px !important; - } - - .g-lg-spacious, - .gx-lg-spacious { - --bs-gutter-x: 48px !important; - } - - .g-lg-spacious, - .gy-lg-spacious { - --bs-gutter-y: 48px !important; - } - - .g-lg-huge, - .gx-lg-huge { - --bs-gutter-x: 56px !important; - } - - .g-lg-huge, - .gy-lg-huge { - --bs-gutter-y: 56px !important; - } - - .g-lg-jumbo, - .gx-lg-jumbo { - --bs-gutter-x: 64px !important; - } - - .g-lg-jumbo, - .gy-lg-jumbo { - --bs-gutter-y: 64px !important; - } - - .g-lg-0, - .gx-lg-0 { - --bs-gutter-x: 0 !important; - } - - .g-lg-0, - .gy-lg-0 { - --bs-gutter-y: 0 !important; - } - - .g-lg-1, - .gx-lg-1 { - --bs-gutter-x: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero - } - - .g-lg-1, - .gy-lg-1 { - --bs-gutter-y: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero - } - - .g-lg-2, - .gx-lg-2 { - --bs-gutter-x: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero - } - - .g-lg-2, - .gy-lg-2 { - --bs-gutter-y: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero - } - - .g-lg-3, - .gx-lg-3 { - --bs-gutter-x: 1.5rem !important; - } - - .g-lg-3, - .gy-lg-3 { - --bs-gutter-y: 1.5rem !important; - } - - .g-lg-4, - .gx-lg-4 { - --bs-gutter-x: 2.5rem !important; - } - - .g-lg-4, - .gy-lg-4 { - --bs-gutter-y: 2.5rem !important; - } - - .g-lg-5, - .gx-lg-5 { - --bs-gutter-x: 3.5rem !important; - } - - .g-lg-5, - .gy-lg-5 { - --bs-gutter-y: 3.5rem !important; - } - } - - @media (min-width: 1320px) { - .col-xl { - flex: 1 0 0%; - } - - .row-cols-xl-auto > * { - flex: 0 0 auto; - width: auto; - } - - .row-cols-xl-1 > * { - flex: 0 0 auto; - width: 100%; - } - - .row-cols-xl-2 > * { - flex: 0 0 auto; - width: 50%; - } - - .row-cols-xl-3 > * { - flex: 0 0 auto; - width: 33.33333333%; - } - - .row-cols-xl-4 > * { - flex: 0 0 auto; - width: 25%; - } - - .row-cols-xl-5 > * { - flex: 0 0 auto; - width: 20%; - } - - .row-cols-xl-6 > * { - flex: 0 0 auto; - width: 16.66666667%; - } - - .col-xl-auto { - flex: 0 0 auto; - width: auto; - } - - .col-xl-1 { - flex: 0 0 auto; - width: 8.33333333%; - } - - .col-xl-2 { - flex: 0 0 auto; - width: 16.66666667%; - } - - .col-xl-3 { - flex: 0 0 auto; - width: 25%; - } - - .col-xl-4 { - flex: 0 0 auto; - width: 33.33333333%; - } - - .col-xl-5 { - flex: 0 0 auto; - width: 41.66666667%; - } - - .col-xl-6 { - flex: 0 0 auto; - width: 50%; - } - - .col-xl-7 { - flex: 0 0 auto; - width: 58.33333333%; - } - - .col-xl-8 { - flex: 0 0 auto; - width: 66.66666667%; - } - - .col-xl-9 { - flex: 0 0 auto; - width: 75%; - } - - .col-xl-10 { - flex: 0 0 auto; - width: 83.33333333%; - } - - .col-xl-11 { - flex: 0 0 auto; - width: 91.66666667%; - } - - .col-xl-12 { - flex: 0 0 auto; - width: 100%; - } - - .offset-xl-0 { - margin-left: 0; - } - - .offset-xl-1 { - margin-left: 8.33333333%; - } - - .offset-xl-2 { - margin-left: 16.66666667%; - } - - .offset-xl-3 { - margin-left: 25%; - } - - .offset-xl-4 { - margin-left: 33.33333333%; - } - - .offset-xl-5 { - margin-left: 41.66666667%; - } - - .offset-xl-6 { - margin-left: 50%; - } - - .offset-xl-7 { - margin-left: 58.33333333%; - } - - .offset-xl-8 { - margin-left: 66.66666667%; - } - - .offset-xl-9 { - margin-left: 75%; - } - - .offset-xl-10 { - margin-left: 83.33333333%; - } - - .offset-xl-11 { - margin-left: 91.66666667%; - } - - .g-xl-none, - .gx-xl-none { - --bs-gutter-x: 0 !important; - } - - .g-xl-none, - .gy-xl-none { - --bs-gutter-y: 0 !important; - } - - .g-xl-smash, - .gx-xl-smash { - --bs-gutter-x: 2px !important; - } - - .g-xl-smash, - .gy-xl-smash { - --bs-gutter-y: 2px !important; - } - - .g-xl-shortest, - .gx-xl-shortest { - --bs-gutter-x: 4px !important; - } - - .g-xl-shortest, - .gy-xl-shortest { - --bs-gutter-y: 4px !important; - } - - .g-xl-shorter, - .gx-xl-shorter { - --bs-gutter-x: 8px !important; - } - - .g-xl-shorter, - .gy-xl-shorter { - --bs-gutter-y: 8px !important; - } - - .g-xl-short, - .gx-xl-short { - --bs-gutter-x: 12px !important; - } - - .g-xl-short, - .gy-xl-short { - --bs-gutter-y: 12px !important; - } - - .g-xl-medium, - .gx-xl-medium { - --bs-gutter-x: 16px !important; - } - - .g-xl-medium, - .gy-xl-medium { - --bs-gutter-y: 16px !important; - } - - .g-xl-tall, - .gx-xl-tall { - --bs-gutter-x: 24px !important; - } - - .g-xl-tall, - .gy-xl-tall { - --bs-gutter-y: 24px !important; - } - - .g-xl-taller, - .gx-xl-taller { - --bs-gutter-x: 32px !important; - } - - .g-xl-taller, - .gy-xl-taller { - --bs-gutter-y: 32px !important; - } - - .g-xl-tallest, - .gx-xl-tallest { - --bs-gutter-x: 40px !important; - } - - .g-xl-tallest, - .gy-xl-tallest { - --bs-gutter-y: 40px !important; - } - - .g-xl-spacious, - .gx-xl-spacious { - --bs-gutter-x: 48px !important; - } - - .g-xl-spacious, - .gy-xl-spacious { - --bs-gutter-y: 48px !important; - } - - .g-xl-huge, - .gx-xl-huge { - --bs-gutter-x: 56px !important; - } - - .g-xl-huge, - .gy-xl-huge { - --bs-gutter-y: 56px !important; - } - - .g-xl-jumbo, - .gx-xl-jumbo { - --bs-gutter-x: 64px !important; - } - - .g-xl-jumbo, - .gy-xl-jumbo { - --bs-gutter-y: 64px !important; - } - - .g-xl-0, - .gx-xl-0 { - --bs-gutter-x: 0 !important; - } - - .g-xl-0, - .gy-xl-0 { - --bs-gutter-y: 0 !important; - } - - .g-xl-1, - .gx-xl-1 { - --bs-gutter-x: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero - } - - .g-xl-1, - .gy-xl-1 { - --bs-gutter-y: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero - } - - .g-xl-2, - .gx-xl-2 { - --bs-gutter-x: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero - } - - .g-xl-2, - .gy-xl-2 { - --bs-gutter-y: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero - } - - .g-xl-3, - .gx-xl-3 { - --bs-gutter-x: 1.5rem !important; - } - - .g-xl-3, - .gy-xl-3 { - --bs-gutter-y: 1.5rem !important; - } - - .g-xl-4, - .gx-xl-4 { - --bs-gutter-x: 2.5rem !important; - } - - .g-xl-4, - .gy-xl-4 { - --bs-gutter-y: 2.5rem !important; - } - - .g-xl-5, - .gx-xl-5 { - --bs-gutter-x: 3.5rem !important; - } - - .g-xl-5, - .gy-xl-5 { - --bs-gutter-y: 3.5rem !important; - } - } - - @media (min-width: 1640px) { - .col-xxl { - flex: 1 0 0%; - } - - .row-cols-xxl-auto > * { - flex: 0 0 auto; - width: auto; - } - - .row-cols-xxl-1 > * { - flex: 0 0 auto; - width: 100%; - } - - .row-cols-xxl-2 > * { - flex: 0 0 auto; - width: 50%; - } - - .row-cols-xxl-3 > * { - flex: 0 0 auto; - width: 33.33333333%; - } - - .row-cols-xxl-4 > * { - flex: 0 0 auto; - width: 25%; - } - - .row-cols-xxl-5 > * { - flex: 0 0 auto; - width: 20%; - } - - .row-cols-xxl-6 > * { - flex: 0 0 auto; - width: 16.66666667%; - } - - .col-xxl-auto { - flex: 0 0 auto; - width: auto; - } - - .col-xxl-1 { - flex: 0 0 auto; - width: 8.33333333%; - } - - .col-xxl-2 { - flex: 0 0 auto; - width: 16.66666667%; - } - - .col-xxl-3 { - flex: 0 0 auto; - width: 25%; - } - - .col-xxl-4 { - flex: 0 0 auto; - width: 33.33333333%; - } - - .col-xxl-5 { - flex: 0 0 auto; - width: 41.66666667%; - } - - .col-xxl-6 { - flex: 0 0 auto; - width: 50%; - } - - .col-xxl-7 { - flex: 0 0 auto; - width: 58.33333333%; - } - - .col-xxl-8 { - flex: 0 0 auto; - width: 66.66666667%; - } - - .col-xxl-9 { - flex: 0 0 auto; - width: 75%; - } - - .col-xxl-10 { - flex: 0 0 auto; - width: 83.33333333%; - } - - .col-xxl-11 { - flex: 0 0 auto; - width: 91.66666667%; - } - - .col-xxl-12 { - flex: 0 0 auto; - width: 100%; - } - - .offset-xxl-0 { - margin-left: 0; - } - - .offset-xxl-1 { - margin-left: 8.33333333%; - } - - .offset-xxl-2 { - margin-left: 16.66666667%; - } - - .offset-xxl-3 { - margin-left: 25%; - } - - .offset-xxl-4 { - margin-left: 33.33333333%; - } - - .offset-xxl-5 { - margin-left: 41.66666667%; - } - - .offset-xxl-6 { - margin-left: 50%; - } - - .offset-xxl-7 { - margin-left: 58.33333333%; - } - - .offset-xxl-8 { - margin-left: 66.66666667%; - } - - .offset-xxl-9 { - margin-left: 75%; - } - - .offset-xxl-10 { - margin-left: 83.33333333%; - } - - .offset-xxl-11 { - margin-left: 91.66666667%; - } - - .g-xxl-none, - .gx-xxl-none { - --bs-gutter-x: 0 !important; - } - - .g-xxl-none, - .gy-xxl-none { - --bs-gutter-y: 0 !important; - } - - .g-xxl-smash, - .gx-xxl-smash { - --bs-gutter-x: 2px !important; - } - - .g-xxl-smash, - .gy-xxl-smash { - --bs-gutter-y: 2px !important; - } - - .g-xxl-shortest, - .gx-xxl-shortest { - --bs-gutter-x: 4px !important; - } - - .g-xxl-shortest, - .gy-xxl-shortest { - --bs-gutter-y: 4px !important; - } - - .g-xxl-shorter, - .gx-xxl-shorter { - --bs-gutter-x: 8px !important; - } - - .g-xxl-shorter, - .gy-xxl-shorter { - --bs-gutter-y: 8px !important; - } - - .g-xxl-short, - .gx-xxl-short { - --bs-gutter-x: 12px !important; - } - - .g-xxl-short, - .gy-xxl-short { - --bs-gutter-y: 12px !important; - } - - .g-xxl-medium, - .gx-xxl-medium { - --bs-gutter-x: 16px !important; - } - - .g-xxl-medium, - .gy-xxl-medium { - --bs-gutter-y: 16px !important; - } - - .g-xxl-tall, - .gx-xxl-tall { - --bs-gutter-x: 24px !important; - } - - .g-xxl-tall, - .gy-xxl-tall { - --bs-gutter-y: 24px !important; - } - - .g-xxl-taller, - .gx-xxl-taller { - --bs-gutter-x: 32px !important; - } - - .g-xxl-taller, - .gy-xxl-taller { - --bs-gutter-y: 32px !important; - } - - .g-xxl-tallest, - .gx-xxl-tallest { - --bs-gutter-x: 40px !important; - } - - .g-xxl-tallest, - .gy-xxl-tallest { - --bs-gutter-y: 40px !important; - } - - .g-xxl-spacious, - .gx-xxl-spacious { - --bs-gutter-x: 48px !important; - } - - .g-xxl-spacious, - .gy-xxl-spacious { - --bs-gutter-y: 48px !important; - } - - .g-xxl-huge, - .gx-xxl-huge { - --bs-gutter-x: 56px !important; - } - - .g-xxl-huge, - .gy-xxl-huge { - --bs-gutter-y: 56px !important; - } - - .g-xxl-jumbo, - .gx-xxl-jumbo { - --bs-gutter-x: 64px !important; - } - - .g-xxl-jumbo, - .gy-xxl-jumbo { - --bs-gutter-y: 64px !important; - } - - .g-xxl-0, - .gx-xxl-0 { - --bs-gutter-x: 0 !important; - } - - .g-xxl-0, - .gy-xxl-0 { - --bs-gutter-y: 0 !important; - } - - .g-xxl-1, - .gx-xxl-1 { - --bs-gutter-x: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero - } - - .g-xxl-1, - .gy-xxl-1 { - --bs-gutter-y: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero - } - - .g-xxl-2, - .gx-xxl-2 { - --bs-gutter-x: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero - } - - .g-xxl-2, - .gy-xxl-2 { - --bs-gutter-y: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero - } - - .g-xxl-3, - .gx-xxl-3 { - --bs-gutter-x: 1.5rem !important; - } - - .g-xxl-3, - .gy-xxl-3 { - --bs-gutter-y: 1.5rem !important; - } - - .g-xxl-4, - .gx-xxl-4 { - --bs-gutter-x: 2.5rem !important; - } - - .g-xxl-4, - .gy-xxl-4 { - --bs-gutter-y: 2.5rem !important; - } - - .g-xxl-5, - .gx-xxl-5 { - --bs-gutter-x: 3.5rem !important; - } - - .g-xxl-5, - .gy-xxl-5 { - --bs-gutter-y: 3.5rem !important; - } - } - - @media (min-width: 1640px) { - .col-2xl { - flex: 1 0 0%; - } - - .row-cols-2xl-auto > * { - flex: 0 0 auto; - width: auto; - } - - .row-cols-2xl-1 > * { - flex: 0 0 auto; - width: 100%; - } - - .row-cols-2xl-2 > * { - flex: 0 0 auto; - width: 50%; - } - - .row-cols-2xl-3 > * { - flex: 0 0 auto; - width: 33.33333333%; - } - - .row-cols-2xl-4 > * { - flex: 0 0 auto; - width: 25%; - } - - .row-cols-2xl-5 > * { - flex: 0 0 auto; - width: 20%; - } - - .row-cols-2xl-6 > * { - flex: 0 0 auto; - width: 16.66666667%; - } - - .col-2xl-auto { - flex: 0 0 auto; - width: auto; - } - - .col-2xl-1 { - flex: 0 0 auto; - width: 8.33333333%; - } - - .col-2xl-2 { - flex: 0 0 auto; - width: 16.66666667%; - } - - .col-2xl-3 { - flex: 0 0 auto; - width: 25%; - } - - .col-2xl-4 { - flex: 0 0 auto; - width: 33.33333333%; - } - - .col-2xl-5 { - flex: 0 0 auto; - width: 41.66666667%; - } - - .col-2xl-6 { - flex: 0 0 auto; - width: 50%; - } - - .col-2xl-7 { - flex: 0 0 auto; - width: 58.33333333%; - } - - .col-2xl-8 { - flex: 0 0 auto; - width: 66.66666667%; - } - - .col-2xl-9 { - flex: 0 0 auto; - width: 75%; - } - - .col-2xl-10 { - flex: 0 0 auto; - width: 83.33333333%; - } - - .col-2xl-11 { - flex: 0 0 auto; - width: 91.66666667%; - } - - .col-2xl-12 { - flex: 0 0 auto; - width: 100%; - } - - .offset-2xl-0 { - margin-left: 0; - } - - .offset-2xl-1 { - margin-left: 8.33333333%; - } - - .offset-2xl-2 { - margin-left: 16.66666667%; - } - - .offset-2xl-3 { - margin-left: 25%; - } - - .offset-2xl-4 { - margin-left: 33.33333333%; - } - - .offset-2xl-5 { - margin-left: 41.66666667%; - } - - .offset-2xl-6 { - margin-left: 50%; - } - - .offset-2xl-7 { - margin-left: 58.33333333%; - } - - .offset-2xl-8 { - margin-left: 66.66666667%; - } - - .offset-2xl-9 { - margin-left: 75%; - } - - .offset-2xl-10 { - margin-left: 83.33333333%; - } - - .offset-2xl-11 { - margin-left: 91.66666667%; - } - - .g-2xl-none, - .gx-2xl-none { - --bs-gutter-x: 0 !important; - } - - .g-2xl-none, - .gy-2xl-none { - --bs-gutter-y: 0 !important; - } - - .g-2xl-smash, - .gx-2xl-smash { - --bs-gutter-x: 2px !important; - } - - .g-2xl-smash, - .gy-2xl-smash { - --bs-gutter-y: 2px !important; - } - - .g-2xl-shortest, - .gx-2xl-shortest { - --bs-gutter-x: 4px !important; - } - - .g-2xl-shortest, - .gy-2xl-shortest { - --bs-gutter-y: 4px !important; - } - - .g-2xl-shorter, - .gx-2xl-shorter { - --bs-gutter-x: 8px !important; - } - - .g-2xl-shorter, - .gy-2xl-shorter { - --bs-gutter-y: 8px !important; - } - - .g-2xl-short, - .gx-2xl-short { - --bs-gutter-x: 12px !important; - } - - .g-2xl-short, - .gy-2xl-short { - --bs-gutter-y: 12px !important; - } - - .g-2xl-medium, - .gx-2xl-medium { - --bs-gutter-x: 16px !important; - } - - .g-2xl-medium, - .gy-2xl-medium { - --bs-gutter-y: 16px !important; - } - - .g-2xl-tall, - .gx-2xl-tall { - --bs-gutter-x: 24px !important; - } - - .g-2xl-tall, - .gy-2xl-tall { - --bs-gutter-y: 24px !important; - } - - .g-2xl-taller, - .gx-2xl-taller { - --bs-gutter-x: 32px !important; - } - - .g-2xl-taller, - .gy-2xl-taller { - --bs-gutter-y: 32px !important; - } - - .g-2xl-tallest, - .gx-2xl-tallest { - --bs-gutter-x: 40px !important; - } - - .g-2xl-tallest, - .gy-2xl-tallest { - --bs-gutter-y: 40px !important; - } - - .g-2xl-spacious, - .gx-2xl-spacious { - --bs-gutter-x: 48px !important; - } - - .g-2xl-spacious, - .gy-2xl-spacious { - --bs-gutter-y: 48px !important; - } - - .g-2xl-huge, - .gx-2xl-huge { - --bs-gutter-x: 56px !important; - } - - .g-2xl-huge, - .gy-2xl-huge { - --bs-gutter-y: 56px !important; - } - - .g-2xl-jumbo, - .gx-2xl-jumbo { - --bs-gutter-x: 64px !important; - } - - .g-2xl-jumbo, - .gy-2xl-jumbo { - --bs-gutter-y: 64px !important; - } - - .g-2xl-0, - .gx-2xl-0 { - --bs-gutter-x: 0 !important; - } - - .g-2xl-0, - .gy-2xl-0 { - --bs-gutter-y: 0 !important; - } - - .g-2xl-1, - .gx-2xl-1 { - --bs-gutter-x: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero - } - - .g-2xl-1, - .gy-2xl-1 { - --bs-gutter-y: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero - } - - .g-2xl-2, - .gx-2xl-2 { - --bs-gutter-x: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero - } - - .g-2xl-2, - .gy-2xl-2 { - --bs-gutter-y: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero - } - - .g-2xl-3, - .gx-2xl-3 { - --bs-gutter-x: 1.5rem !important; - } - - .g-2xl-3, - .gy-2xl-3 { - --bs-gutter-y: 1.5rem !important; - } - - .g-2xl-4, - .gx-2xl-4 { - --bs-gutter-x: 2.5rem !important; - } - - .g-2xl-4, - .gy-2xl-4 { - --bs-gutter-y: 2.5rem !important; - } - - .g-2xl-5, - .gx-2xl-5 { - --bs-gutter-x: 3.5rem !important; - } - - .g-2xl-5, - .gy-2xl-5 { - --bs-gutter-y: 3.5rem !important; - } - } - - @media (min-width: 1880px) { - .col-3xl { - flex: 1 0 0%; - } - - .row-cols-3xl-auto > * { - flex: 0 0 auto; - width: auto; - } - - .row-cols-3xl-1 > * { - flex: 0 0 auto; - width: 100%; - } - - .row-cols-3xl-2 > * { - flex: 0 0 auto; - width: 50%; - } - - .row-cols-3xl-3 > * { - flex: 0 0 auto; - width: 33.33333333%; - } - - .row-cols-3xl-4 > * { - flex: 0 0 auto; - width: 25%; - } - - .row-cols-3xl-5 > * { - flex: 0 0 auto; - width: 20%; - } - - .row-cols-3xl-6 > * { - flex: 0 0 auto; - width: 16.66666667%; - } - - .col-3xl-auto { - flex: 0 0 auto; - width: auto; - } - - .col-3xl-1 { - flex: 0 0 auto; - width: 8.33333333%; - } - - .col-3xl-2 { - flex: 0 0 auto; - width: 16.66666667%; - } - - .col-3xl-3 { - flex: 0 0 auto; - width: 25%; - } - - .col-3xl-4 { - flex: 0 0 auto; - width: 33.33333333%; - } - - .col-3xl-5 { - flex: 0 0 auto; - width: 41.66666667%; - } - - .col-3xl-6 { - flex: 0 0 auto; - width: 50%; - } - - .col-3xl-7 { - flex: 0 0 auto; - width: 58.33333333%; - } - - .col-3xl-8 { - flex: 0 0 auto; - width: 66.66666667%; - } - - .col-3xl-9 { - flex: 0 0 auto; - width: 75%; - } - - .col-3xl-10 { - flex: 0 0 auto; - width: 83.33333333%; - } - - .col-3xl-11 { - flex: 0 0 auto; - width: 91.66666667%; - } - - .col-3xl-12 { - flex: 0 0 auto; - width: 100%; - } - - .offset-3xl-0 { - margin-left: 0; - } - - .offset-3xl-1 { - margin-left: 8.33333333%; - } - - .offset-3xl-2 { - margin-left: 16.66666667%; - } - - .offset-3xl-3 { - margin-left: 25%; - } - - .offset-3xl-4 { - margin-left: 33.33333333%; - } - - .offset-3xl-5 { - margin-left: 41.66666667%; - } - - .offset-3xl-6 { - margin-left: 50%; - } - - .offset-3xl-7 { - margin-left: 58.33333333%; - } - - .offset-3xl-8 { - margin-left: 66.66666667%; - } - - .offset-3xl-9 { - margin-left: 75%; - } - - .offset-3xl-10 { - margin-left: 83.33333333%; - } - - .offset-3xl-11 { - margin-left: 91.66666667%; - } - - .g-3xl-none, - .gx-3xl-none { - --bs-gutter-x: 0 !important; - } - - .g-3xl-none, - .gy-3xl-none { - --bs-gutter-y: 0 !important; - } - - .g-3xl-smash, - .gx-3xl-smash { - --bs-gutter-x: 2px !important; - } - - .g-3xl-smash, - .gy-3xl-smash { - --bs-gutter-y: 2px !important; - } - - .g-3xl-shortest, - .gx-3xl-shortest { - --bs-gutter-x: 4px !important; - } - - .g-3xl-shortest, - .gy-3xl-shortest { - --bs-gutter-y: 4px !important; - } - - .g-3xl-shorter, - .gx-3xl-shorter { - --bs-gutter-x: 8px !important; - } - - .g-3xl-shorter, - .gy-3xl-shorter { - --bs-gutter-y: 8px !important; - } - - .g-3xl-short, - .gx-3xl-short { - --bs-gutter-x: 12px !important; - } - - .g-3xl-short, - .gy-3xl-short { - --bs-gutter-y: 12px !important; - } - - .g-3xl-medium, - .gx-3xl-medium { - --bs-gutter-x: 16px !important; - } - - .g-3xl-medium, - .gy-3xl-medium { - --bs-gutter-y: 16px !important; - } - - .g-3xl-tall, - .gx-3xl-tall { - --bs-gutter-x: 24px !important; - } - - .g-3xl-tall, - .gy-3xl-tall { - --bs-gutter-y: 24px !important; - } - - .g-3xl-taller, - .gx-3xl-taller { - --bs-gutter-x: 32px !important; - } - - .g-3xl-taller, - .gy-3xl-taller { - --bs-gutter-y: 32px !important; - } - - .g-3xl-tallest, - .gx-3xl-tallest { - --bs-gutter-x: 40px !important; - } - - .g-3xl-tallest, - .gy-3xl-tallest { - --bs-gutter-y: 40px !important; - } - - .g-3xl-spacious, - .gx-3xl-spacious { - --bs-gutter-x: 48px !important; - } - - .g-3xl-spacious, - .gy-3xl-spacious { - --bs-gutter-y: 48px !important; - } - - .g-3xl-huge, - .gx-3xl-huge { - --bs-gutter-x: 56px !important; - } - - .g-3xl-huge, - .gy-3xl-huge { - --bs-gutter-y: 56px !important; - } - - .g-3xl-jumbo, - .gx-3xl-jumbo { - --bs-gutter-x: 64px !important; - } - - .g-3xl-jumbo, - .gy-3xl-jumbo { - --bs-gutter-y: 64px !important; - } - - .g-3xl-0, - .gx-3xl-0 { - --bs-gutter-x: 0 !important; - } - - .g-3xl-0, - .gy-3xl-0 { - --bs-gutter-y: 0 !important; - } - - .g-3xl-1, - .gx-3xl-1 { - --bs-gutter-x: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero - } - - .g-3xl-1, - .gy-3xl-1 { - --bs-gutter-y: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero - } - - .g-3xl-2, - .gx-3xl-2 { - --bs-gutter-x: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero - } - - .g-3xl-2, - .gy-3xl-2 { - --bs-gutter-y: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero - } - - .g-3xl-3, - .gx-3xl-3 { - --bs-gutter-x: 1.5rem !important; - } - - .g-3xl-3, - .gy-3xl-3 { - --bs-gutter-y: 1.5rem !important; - } - - .g-3xl-4, - .gx-3xl-4 { - --bs-gutter-x: 2.5rem !important; - } - .g-3xl-4, - .gy-3xl-4 { - --bs-gutter-y: 2.5rem !important; + .text-3xl-start { + text-align: left !important; } - .g-3xl-5, - .gx-3xl-5 { - --bs-gutter-x: 3.5rem !important; + .text-3xl-end { + text-align: right !important; } - .g-3xl-5, - .gy-3xl-5 { - --bs-gutter-y: 3.5rem !important; + .text-3xl-center { + text-align: center !important; } } } diff --git a/scss/tests/mixins/_auto-import-of-variables-dark.test.scss b/scss/tests/mixins/_auto-import-of-variables-dark.test.scss index e02ca021b9..2ffcfaee6d 100644 --- a/scss/tests/mixins/_auto-import-of-variables-dark.test.scss +++ b/scss/tests/mixins/_auto-import-of-variables-dark.test.scss @@ -1,5 +1,6 @@ // TODO: this file can be removed safely in v6 when `@import "variables-dark"` will be removed at the end of _variables.scss +@import "../../config"; @import "../../functions"; @import "../../tokens/raw"; @import "../../tokens/semantic"; diff --git a/scss/tests/mixins/_color-modes.test.scss b/scss/tests/mixins/_color-modes.test.scss index 6d29be555b..1419df7681 100644 --- a/scss/tests/mixins/_color-modes.test.scss +++ b/scss/tests/mixins/_color-modes.test.scss @@ -1,5 +1,6 @@ // stylelint-disable selector-attribute-quotes +@import "../../config"; @import "../../functions"; @import "../../tokens/raw"; @import "../../tokens/semantic"; diff --git a/scss/tests/mixins/_utilities.test.scss b/scss/tests/mixins/_utilities.test.scss index ba6d401500..975ae61d0a 100644 --- a/scss/tests/mixins/_utilities.test.scss +++ b/scss/tests/mixins/_utilities.test.scss @@ -3,6 +3,7 @@ $enable-important-utilities: false; // Important: Do not import rfs to check that the mixin just calls the appropriate functions from it // OUDS mod +@import "../../config"; @import "../../functions"; // Added because needed by "variables" @import "../../tokens/raw"; @import "../../tokens/semantic"; diff --git a/scss/tests/utilities/_api.test.scss b/scss/tests/utilities/_api.test.scss index 9fe38d40aa..8c1af304fc 100644 --- a/scss/tests/utilities/_api.test.scss +++ b/scss/tests/utilities/_api.test.scss @@ -1,3 +1,4 @@ +@import "../../config"; @import "../../functions"; @import "../../tokens/raw"; @import "../../tokens/semantic"; diff --git a/scss/tokens/_composite.scss b/scss/tokens/_composite.scss index 7750d7de9a..2239f1481d 100644 --- a/scss/tokens/_composite.scss +++ b/scss/tokens/_composite.scss @@ -13,3 +13,149 @@ $ouds-elevation-sticky-default: $ouds-elevation-x-sticky-default $ouds-elevation $ouds-elevation-sticky-emphasized: $ouds-elevation-x-sticky-emphasized $ouds-elevation-y-sticky-emphasized $ouds-elevation-blur-sticky-emphasized $ouds-elevation-spread-sticky-emphasized $ouds-elevation-color-sticky-emphasized !default; $ouds-elevation-sticky-navigation-scrolled: $ouds-elevation-x-sticky-navigation-scrolled $ouds-elevation-y-sticky-navigation-scrolled $ouds-elevation-blur-sticky-navigation-scrolled $ouds-elevation-spread-sticky-navigation-scrolled $ouds-elevation-color-sticky-navigation-scrolled !default; // scss-docs-end ouds-composite-elevation + +// scss-docs-start ouds-composite-font +// todo lm: Should we add default svg img height and width ? If yes, then we should add it here. Do we introduce new classes in here ? +%display-large { + max-width: var(--#{$prefix}font-max-width-display-large); + font-size: var(--#{$prefix}font-size-display-large); + line-height: var(--#{$prefix}font-line-height-display-large); + + /* rtl:remove */ + letter-spacing: var(--#{$prefix}font-letter-spacing-display-large); +} + +%display-medium { + max-width: var(--#{$prefix}font-max-width-display-medium); + font-size: var(--#{$prefix}font-size-display-medium); + line-height: var(--#{$prefix}font-line-height-display-medium); + + /* rtl:remove */ + letter-spacing: var(--#{$prefix}font-letter-spacing-display-medium); +} + +%display-small { + max-width: var(--#{$prefix}font-max-width-display-small); + font-size: var(--#{$prefix}font-size-display-small); + line-height: var(--#{$prefix}font-line-height-display-small); + + /* rtl:remove */ + letter-spacing: var(--#{$prefix}font-letter-spacing-display-small); +} + +%heading-xlarge { + max-width: var(--#{$prefix}font-max-width-heading-xlarge); + font-size: var(--#{$prefix}font-size-heading-xlarge); + line-height: var(--#{$prefix}font-line-height-heading-xlarge); + + /* rtl:remove */ + letter-spacing: var(--#{$prefix}font-letter-spacing-heading-xlarge); +} + +%heading-large { + max-width: var(--#{$prefix}font-max-width-heading-large); + font-size: var(--#{$prefix}font-size-heading-large); + line-height: var(--#{$prefix}font-line-height-heading-large); + + /* rtl:remove */ + letter-spacing: var(--#{$prefix}font-letter-spacing-heading-large); +} + +%heading-medium { + max-width: var(--#{$prefix}font-max-width-heading-medium); + font-size: var(--#{$prefix}font-size-heading-medium); + line-height: var(--#{$prefix}font-line-height-heading-medium); + + /* rtl:remove */ + letter-spacing: var(--#{$prefix}font-letter-spacing-heading-medium); +} + +%heading-small { + max-width: var(--#{$prefix}font-max-width-heading-small); + font-size: var(--#{$prefix}font-size-heading-small); + line-height: var(--#{$prefix}font-line-height-heading-small); + + /* rtl:remove */ + letter-spacing: var(--#{$prefix}font-letter-spacing-heading-small); +} + +%body-large { + max-width: var(--#{$prefix}font-max-width-body-large); + font-size: var(--#{$prefix}font-size-body-large); + line-height: var(--#{$prefix}font-line-height-body-large); + + /* rtl:remove */ + letter-spacing: var(--#{$prefix}font-letter-spacing-body-large); +} + +%body-medium { + max-width: var(--#{$prefix}font-max-width-body-medium); + font-size: var(--#{$prefix}font-size-body-medium); + line-height: var(--#{$prefix}font-line-height-body-medium); + + /* rtl:remove */ + letter-spacing: var(--#{$prefix}font-letter-spacing-body-medium); +} + +%body-small { + max-width: var(--#{$prefix}font-max-width-body-small); + font-size: var(--#{$prefix}font-size-body-small); + line-height: var(--#{$prefix}font-line-height-body-small); + + /* rtl:remove */ + letter-spacing: var(--#{$prefix}font-letter-spacing-body-small); +} + +%label-xlarge { + font-size: px-to-rem($ouds-font-size-label-xlarge); + line-height: divide($ouds-font-line-height-label-xlarge, $ouds-font-size-label-xlarge); + + /* rtl:remove */ + letter-spacing: px-to-rem($ouds-font-letter-spacing-label-xlarge); +} + +%label-large { + font-size: px-to-rem($ouds-font-size-label-large); + line-height: divide($ouds-font-line-height-label-large, $ouds-font-size-label-large); + + /* rtl:remove */ + letter-spacing: px-to-rem($ouds-font-letter-spacing-label-large); +} + +%label-medium { + font-size: px-to-rem($ouds-font-size-label-medium); + line-height: divide($ouds-font-line-height-label-medium, $ouds-font-size-label-medium); + + /* rtl:remove */ + letter-spacing: px-to-rem($ouds-font-letter-spacing-label-medium); +} + +%label-small { + font-size: px-to-rem($ouds-font-size-label-small); + line-height: divide($ouds-font-line-height-label-small, $ouds-font-size-label-small); + + /* rtl:remove */ + letter-spacing: px-to-rem($ouds-font-letter-spacing-label-small); +} + +%code-medium { + font-size: px-to-rem($ouds-font-size-code-medium); + line-height: divide($ouds-font-line-height-code-medium, $ouds-font-size-code-medium); + + /* rtl:remove */ + letter-spacing: px-to-rem($ouds-font-letter-spacing-code-medium); +} + +%code-small { + font-size: px-to-rem($ouds-font-size-code-small); + line-height: divide($ouds-font-line-height-code-small, $ouds-font-size-code-small); + + /* rtl:remove */ + letter-spacing: px-to-rem($ouds-font-letter-spacing-code-small); +} + +// stylelint-disable value-keyword-case +$ouds-font-family-sans-serif-stack: "SF Pro", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif !default; +$ouds-font-family-monospace-stack: "SF Mono", "Roboto Mono", Consolas, Menlo, monospace !default; +// stylelint-enable value-keyword-case +// scss-docs-end ouds-composite-font diff --git a/site/assets/scss/_colors.scss b/site/assets/scss/_colors.scss index 9ee7abbd13..f0a53a2fc3 100644 --- a/site/assets/scss/_colors.scss +++ b/site/assets/scss/_colors.scss @@ -15,8 +15,7 @@ top: 1rem; right: 1rem; padding-left: 1rem; - font-size: .75rem; - line-height: 1.35; + @extend %label-small; white-space: pre; content: str-slice($contrast-ratio, 1, 4) "\A" diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss index d4e4e1f189..8c1ef5e773 100644 --- a/site/assets/scss/_content.scss +++ b/site/assets/scss/_content.scss @@ -47,14 +47,13 @@ white-space: nowrap; .bs-text-standard { - font-size: $font-size-base; - line-height: $line-height-base; + @extend %body-medium; } } > details { + @extend %label-large; padding: 0 10px; // static even when zoomed - font-size: 1rem; line-height: 1.5; border: var(--bs-border-color) dashed calc(var(--bs-border-width) * .5); // stylelint-disable-line function-disallowed-list } @@ -112,11 +111,11 @@ .bd-title { --bs-heading-color: var(--bs-emphasis-color); - @include font-size(3rem); + @extend %display-small; // OUDS mod: instead of `3rem` } .bd-lead { - @include font-size(1.5rem); + @extend %heading-small; // OUDS mod: instead of `1.5rem` font-weight: 400; } diff --git a/site/assets/scss/_masthead.scss b/site/assets/scss/_masthead.scss index 560b9a4059..aa61e62aec 100644 --- a/site/assets/scss/_masthead.scss +++ b/site/assets/scss/_masthead.scss @@ -9,7 +9,7 @@ } .lead { - @include font-size(1rem); + @extend %heading-small; font-weight: 400; color: var(--bs-secondary-color); } @@ -48,12 +48,7 @@ } // OUDS mod: no `#carbonads` - - @include media-breakpoint-up(md) { - .lead { - @include font-size(1.5rem); - } - } + // OUDS mod: no @media query } .masthead-followup { @@ -64,14 +59,10 @@ } .lead { - @include font-size(1rem); + @extend %heading-small; } - @include media-breakpoint-up(md) { - .lead { - @include font-size(1.25rem); - } - } + // OUDS mod: no @media query } .masthead-followup-icon { diff --git a/site/assets/scss/_ouds-web.scss b/site/assets/scss/_ouds-web.scss index b3ec661888..045173c8e7 100644 --- a/site/assets/scss/_ouds-web.scss +++ b/site/assets/scss/_ouds-web.scss @@ -13,7 +13,7 @@ body { } .display-0 { - font-size: 5.25em; + @extend %display-large; // OUDS mod: instead of `5.25em` backface-visibility: hidden; transform-style: preserve-3d; -webkit-font-smoothing: antialiased; diff --git a/site/assets/scss/_placeholder-img.scss b/site/assets/scss/_placeholder-img.scss index 6f5bbe4189..189d6b68cd 100644 --- a/site/assets/scss/_placeholder-img.scss +++ b/site/assets/scss/_placeholder-img.scss @@ -5,11 +5,11 @@ // Remember to update `site/_layouts/examples.html` too if this changes! .bd-placeholder-img { - @include font-size(1.125rem); + @extend %body-large; // OUDS mod: instead of `1.125rem` user-select: none; text-anchor: middle; } .bd-placeholder-img-lg { - @include font-size(3.5rem); + @extend %display-medium; // OUDS mod: instead of `3.5rem` } diff --git a/site/assets/scss/_sidebar.scss b/site/assets/scss/_sidebar.scss index 6ce66af533..c68e63c2d6 100644 --- a/site/assets/scss/_sidebar.scss +++ b/site/assets/scss/_sidebar.scss @@ -25,15 +25,13 @@ // OUDS mod svg { - font-size: 1.5625rem; + font-size: var(--#{$prefix}icon-medium-with-body-medium); } // End mod } .bd-links-nav { - @include media-breakpoint-down(lg) { - font-size: .875rem; - } + @extend %body-medium; // OUDS mod: instead of media query @include media-breakpoint-between(xs, lg) { column-count: 2; diff --git a/site/assets/scss/_tarteaucitron.scss b/site/assets/scss/_tarteaucitron.scss index c76ac9743c..e3bdca09d5 100644 --- a/site/assets/scss/_tarteaucitron.scss +++ b/site/assets/scss/_tarteaucitron.scss @@ -54,7 +54,7 @@ } @include tac("DisclaimerAlert") { - font-size: $font-size-sm; + @extend %label-small; } @include tac("ClosePanel") { @@ -81,20 +81,17 @@ } @include tac("H1", true) { + @extend %heading-xlarge; margin-bottom: $spacer; - font-size: $h2-font-size; - letter-spacing: $h2-spacing; } @include tac("H2", true) { + @extend %heading-large; padding-top: $spacer / 10; - font-size: $h4-font-size; - letter-spacing: $h4-spacing; } @include tac("H3", true) { - font-size: $h6-font-size; - letter-spacing: $h6-spacing; + @extend %heading-small; } @include tac("Info") { @@ -104,7 +101,7 @@ } @include tac("Name", true) { - font-size: $font-size-sm; + @extend %label-small; color: var(--bs-secondary-color); } diff --git a/site/assets/scss/_toc.scss b/site/assets/scss/_toc.scss index 8dbfcb473e..3f4919173d 100644 --- a/site/assets/scss/_toc.scss +++ b/site/assets/scss/_toc.scss @@ -11,7 +11,7 @@ } nav { - @include font-size(.875rem); + @extend %label-small; // OUDS mod: instead of `.875rem` ul { padding-left: 0; diff --git a/site/assets/scss/docs.scss b/site/assets/scss/docs.scss index 0ef3dfdb63..7152131f44 100644 --- a/site/assets/scss/docs.scss +++ b/site/assets/scss/docs.scss @@ -23,6 +23,7 @@ // Happy Bootstrapping! // Load Bootstrap variables and mixins +@import "../../../scss/config"; @import "../../../scss/functions"; @import "../../../scss/tokens/raw"; @import "../../../scss/tokens/semantic"; diff --git a/site/assets/scss/search.scss b/site/assets/scss/search.scss index 5a3420798f..7e797c235f 100644 --- a/site/assets/scss/search.scss +++ b/site/assets/scss/search.scss @@ -5,6 +5,7 @@ * For details, see https://creativecommons.org/licenses/by/3.0/. */ +@import "../../../scss/config"; @import "../../../scss/functions"; @import "../../../scss/tokens/raw"; @import "../../../scss/tokens/semantic"; diff --git a/site/content/docs/0.0/content/reboot.md b/site/content/docs/0.0/content/reboot.md index 5ece016074..e8d35bd10c 100644 --- a/site/content/docs/0.0/content/reboot.md +++ b/site/content/docs/0.0/content/reboot.md @@ -11,4 +11,473 @@ aliases: toc: true --- -{{< callout-soon "page" >}} +## Approach + +Reboot builds upon Normalize, providing many HTML elements with somewhat opinionated styles using only element selectors. Additional styling is done only with classes. For example, we reboot some `` styles for a simpler baseline and later provide `.table`, `.table-bordered`, and more. + +Here are our guidelines and reasons for choosing what to override in Reboot: + +- Update some browser default values to use `rem`s instead of `em`s for scalable component spacing. +- Avoid `margin-top`. Vertical margins can collapse, yielding unexpected results. More importantly though, a single direction of `margin` is a simpler mental model. +- For easier scaling across device sizes, block elements should use `rem`s for `margin`s. +- Keep declarations of `font`-related properties to a minimum, using `inherit` whenever possible. + +## CSS variables + +OUDS Web standards require `@import`s across all our CSS bundles (including `ouds-web.css`, `ouds-web-reboot.css`, and `ouds-web-grid.css`) to include `_root.scss`. This adds `:root` level CSS variables to all bundles, regardless of how many of them are used in that bundle. Ultimately OUDS Web will continue to see more [CSS variables]({{< docsref "/customize/css-variables" >}}) added over time, in order to provide more real-time customization without the need to always recompile Sass. Our approach is to take our source Sass variables and transform them into CSS variables. That way, even if you don't use CSS variables, you still have all the power of Sass. **This is still in-progress and will take time to fully implement.** + +For example, consider these `:root` CSS variables for common `` styles: + +{{< scss-docs name="root-body-variables" file="scss/_root.scss" >}} + +In practice, those variables are then applied in Reboot like so: + +{{< scss-docs name="reboot-body-rules" file="scss/_reboot.scss" >}} + +Which allows you to make real-time customizations however you like: + +```html + + + +``` + +## Page defaults + +The `` and `` elements are updated to provide better page-wide defaults. More specifically: + +- The `box-sizing` is globally set on every element—including `*::before` and `*::after`, to `border-box`. This ensures that the declared width of element is never exceeded due to padding or border. + - No base `font-size` is declared on the ``, but `16px` is assumed (the browser default). `font-size: 1rem` is applied on the `` for easy responsive type-scaling via media queries while respecting user preferences and ensuring a more accessible approach. This browser default can be overridden by modifying the `$font-size-root` variable. +- The `` also sets a global `font-family`, `font-weight`, `line-height`, and `color`. This is inherited later by some form elements to prevent font inconsistencies. +- For safety, the `` has a declared `background-color`, defaulting to `#fff`. + +## Native font stack + +OUDS Web utilizes a "native font stack" or "system font stack" for optimum text rendering on every device and OS. These system fonts have been designed specifically with today's devices in mind, with improved rendering on screens, variable font support, and more. Read more about [native font stacks in this *Smashing Magazine* article](https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/). + +```scss +$font-family-sans-serif: + // Safari for macOS and iOS (San Francisco) + "SF Pro", + // Android + Roboto, + // older macOS and iOS + "Helvetica Neue", + // Windows + Helvetica + // Basic web fallback + Arial, + // Sans serif fallback + sans-serif !default; +``` + +This `font-family` is applied to the `` and automatically inherited globally throughout OUDS Web. To switch the global `font-family`, update `$font-family-base` and recompile OUDS Web. + +The following `font-family` is applied on every code basis element. To switch the global `font-family`, update `$font-family-code` and recompile OUDS Web. + +```scss +$font-family-sans-serif: + // Safari for macOS and iOS (San Francisco) + "SF Mono", + // Android + "Roboto Mono", + // Windows + Consolas, + // Basic web fallback + Menlo, + // Monospace fallback + monospace !default; +``` + +## Headings + +// TODO LM +All heading elements—`

`—`

` have their `margin-top` removed, `margin-bottom: .5rem` set, and `line-height` tightened. While headings inherit their `color` by default, you can also override it via optional CSS variable, `--bs-heading-color`. + +{{< bs-table "table" >}} +| Heading | Example | +| --- | --- | +| `

` | h1. OUDS Web heading | +| `

` | h2. OUDS Web heading | +| `

` | h3. OUDS Web heading | +| `

` | h4. OUDS Web heading | +| `
` | h5. OUDS Web heading | +| `
` | h6. OUDS Web heading | +{{< /bs-table >}} + +## Paragraphs + +All `

` elements have their `margin-top` removed and `margin-bottom: 1rem` set for easy spacing. + +{{< example >}} +

This is an example paragraph.

+{{< /example >}} + + + +## Horizontal rules + +The `
` element has been simplified. Similar to browser defaults, `
`s are styled via `border-top`, have a default `opacity: .25`, and automatically inherit their `border-color` via `color`, including when `color` is set via the parent. They can be modified with text, border, and opacity utilities. + +{{< example >}} +
+ + +{{< /example >}} + + + +## Inline code + +Wrap inline snippets of code with ``. Be sure to escape HTML angle brackets. + +{{< example >}} +For example, <section> should be wrapped as inline. +{{< /example >}} + +## Code blocks + +Use `
`s for multiple lines of code. Once again, be sure to escape any angle brackets in the code for proper rendering. The `
` element is reset to remove its `margin-top` and use `rem` units for its `margin-bottom`.
+
+{{< example >}}
+
<p>Sample text here...</p>
+<p>And another line of sample text here...</p>
+

+{{< /example >}}
+
+## Variables
+
+For indicating variables use the `` tag.
+
+{{< example >}}
+y = mx + b
+{{< /example >}}
+
+## User input
+
+Use the `` to indicate input that is typically entered via keyboard.
+
+{{< example >}}
+To switch directories, type cd followed by the name of the directory.

+To edit settings, press Ctrl + ,
+{{< /example >}}
+
+## Sample output
+
+For indicating sample output from a program use the `` tag.
+
+{{< example >}}
+This text is meant to be treated as sample output from a computer program.
+{{< /example >}}
+
+## Tables
+
+Tables are slightly adjusted to style `
`s, collapse borders, and ensure consistent `text-align` throughout. Additional changes for borders, padding, and more come with [the `.table` class]({{< docsref "/content/tables" >}}). + +{{< example >}} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ This is an example table, and this is its caption to describe the contents. +
Table headingTable headingTable headingTable heading
Table cellTable cellTable cellTable cell
Table cellTable cellTable cellTable cell
Table cellTable cellTable cellTable cell
+{{< /example >}} + +## Forms + +Various form elements have been rebooted for simpler base styles. Here are some of the most notable changes: + +- `
`s have no borders, padding, or margin so they can be easily used as wrappers for individual inputs or groups of inputs. +- ``s, like fieldsets, have also been restyled to be displayed as a heading of sorts. +- `
+ + +### Pointers on buttons + +Reboot includes an enhancement for `role="button"` to change the default cursor to `pointer`. Add this attribute to elements to help indicate elements are interactive. This role isn't necessary for `