From c1d5a801b4bc66e3866f815be00e11d1b20d3539 Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Sat, 24 Jun 2023 14:44:36 +0200 Subject: Adding upstream version 5.3.0+dfsg. Signed-off-by: Daniel Baumann --- scss/_utilities.scss | 185 +++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 172 insertions(+), 13 deletions(-) (limited to 'scss/_utilities.scss') diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 1e0d141..e6069c9 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -22,6 +22,20 @@ $utilities: map-merge( ) ), // scss-docs-end utils-float + // Object Fit utilities + // scss-docs-start utils-object-fit + "object-fit": ( + responsive: true, + property: object-fit, + values: ( + contain: contain, + cover: cover, + fill: fill, + scale: scale-down, + none: none, + ) + ), + // scss-docs-end utils-object-fit // Opacity utilities // scss-docs-start utils-opacity "opacity": ( @@ -40,6 +54,14 @@ $utilities: map-merge( property: overflow, values: auto hidden visible scroll, ), + "overflow-x": ( + property: overflow-x, + values: auto hidden visible scroll, + ), + "overflow-y": ( + property: overflow-y, + values: auto hidden visible scroll, + ), // scss-docs-end utils-overflow // scss-docs-start utils-display "display": ( @@ -47,7 +69,7 @@ $utilities: map-merge( print: true, property: display, class: d, - values: inline inline-block block grid table table-row table-cell flex inline-flex none + values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex none ), // scss-docs-end utils-display // scss-docs-start utils-shadow @@ -62,6 +84,14 @@ $utilities: map-merge( ) ), // scss-docs-end utils-shadow + // scss-docs-start utils-focus-ring + "focus-ring": ( + css-var: true, + css-variable-name: focus-ring-color, + class: focus-ring, + values: map-loop($theme-colors-rgb, rgba-css-var, "$key", "focus-ring") + ), + // scss-docs-end utils-focus-ring // scss-docs-start utils-position "position": ( property: position, @@ -141,9 +171,13 @@ $utilities: map-merge( ), values: $utilities-border-colors ), + "subtle-border-color": ( + property: border-color, + class: border, + values: $utilities-border-subtle + ), "border-width": ( - css-var: true, - css-variable-name: border-width, + property: border-width, class: border, values: $border-widths ), @@ -450,6 +484,18 @@ $utilities: map-merge( class: gap, values: $spacers ), + "row-gap": ( + responsive: true, + property: row-gap, + class: row-gap, + values: $spacers + ), + "column-gap": ( + responsive: true, + property: column-gap, + class: column-gap, + values: $spacers + ), // scss-docs-end utils-spacing // Text // scss-docs-start utils-text @@ -473,11 +519,12 @@ $utilities: map-merge( property: font-weight, class: fw, values: ( - light: $font-weight-light, lighter: $font-weight-lighter, + light: $font-weight-light, normal: $font-weight-normal, - bold: $font-weight-bold, + medium: $font-weight-medium, semibold: $font-weight-semibold, + bold: $font-weight-bold, bolder: $font-weight-bolder ) ), @@ -535,9 +582,12 @@ $utilities: map-merge( values: map-merge( $utilities-text-colors, ( - "muted": $text-muted, + "muted": var(--#{$prefix}secondary-color), // deprecated "black-50": rgba($black, .5), // deprecated "white-50": rgba($white, .5), // deprecated + "body-secondary": var(--#{$prefix}secondary-color), + "body-tertiary": var(--#{$prefix}tertiary-color), + "body-emphasis": var(--#{$prefix}emphasis-color), "reset": inherit, ) ) @@ -552,7 +602,62 @@ $utilities: map-merge( 100: 1 ) ), + "text-color": ( + property: color, + class: text, + values: $utilities-text-emphasis-colors + ), // scss-docs-end utils-color + // scss-docs-start utils-links + "link-opacity": ( + css-var: true, + class: link-opacity, + state: hover, + values: ( + 10: .1, + 25: .25, + 50: .5, + 75: .75, + 100: 1 + ) + ), + "link-offset": ( + property: text-underline-offset, + class: link-offset, + state: hover, + values: ( + 1: .125em, + 2: .25em, + 3: .375em, + ) + ), + "link-underline": ( + property: text-decoration-color, + class: link-underline, + local-vars: ( + "link-underline-opacity": 1 + ), + values: map-merge( + $utilities-links-underline, + ( + null: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-underline-opacity, 1)), + ) + ) + ), + "link-underline-opacity": ( + css-var: true, + class: link-underline-opacity, + state: hover, + values: ( + 0: 0, + 10: .1, + 25: .25, + 50: .5, + 75: .75, + 100: 1 + ), + ), + // scss-docs-end utils-links // scss-docs-start utils-bg-color "background-color": ( property: background-color, @@ -563,7 +668,9 @@ $utilities: map-merge( values: map-merge( $utilities-bg-colors, ( - "transparent": transparent + "transparent": transparent, + "body-secondary": rgba(var(--#{$prefix}secondary-bg-rgb), var(--#{$prefix}bg-opacity)), + "body-tertiary": rgba(var(--#{$prefix}tertiary-bg-rgb), var(--#{$prefix}bg-opacity)), ) ) ), @@ -578,6 +685,11 @@ $utilities: map-merge( 100: 1 ) ), + "subtle-background-color": ( + property: background-color, + class: bg, + values: $utilities-bg-subtle + ), // scss-docs-end utils-bg-color "gradient": ( property: background-image, @@ -606,7 +718,7 @@ $utilities: map-merge( 2: var(--#{$prefix}border-radius), 3: var(--#{$prefix}border-radius-lg), 4: var(--#{$prefix}border-radius-xl), - 5: var(--#{$prefix}border-radius-2xl), + 5: var(--#{$prefix}border-radius-xxl), circle: 50%, pill: var(--#{$prefix}border-radius-pill) ) @@ -614,22 +726,62 @@ $utilities: map-merge( "rounded-top": ( property: border-top-left-radius border-top-right-radius, class: rounded-top, - values: (null: var(--#{$prefix}border-radius)) + values: ( + null: var(--#{$prefix}border-radius), + 0: 0, + 1: var(--#{$prefix}border-radius-sm), + 2: var(--#{$prefix}border-radius), + 3: var(--#{$prefix}border-radius-lg), + 4: var(--#{$prefix}border-radius-xl), + 5: var(--#{$prefix}border-radius-xxl), + circle: 50%, + pill: var(--#{$prefix}border-radius-pill) + ) ), "rounded-end": ( property: border-top-right-radius border-bottom-right-radius, class: rounded-end, - values: (null: var(--#{$prefix}border-radius)) + values: ( + null: var(--#{$prefix}border-radius), + 0: 0, + 1: var(--#{$prefix}border-radius-sm), + 2: var(--#{$prefix}border-radius), + 3: var(--#{$prefix}border-radius-lg), + 4: var(--#{$prefix}border-radius-xl), + 5: var(--#{$prefix}border-radius-xxl), + circle: 50%, + pill: var(--#{$prefix}border-radius-pill) + ) ), "rounded-bottom": ( property: border-bottom-right-radius border-bottom-left-radius, class: rounded-bottom, - values: (null: var(--#{$prefix}border-radius)) + values: ( + null: var(--#{$prefix}border-radius), + 0: 0, + 1: var(--#{$prefix}border-radius-sm), + 2: var(--#{$prefix}border-radius), + 3: var(--#{$prefix}border-radius-lg), + 4: var(--#{$prefix}border-radius-xl), + 5: var(--#{$prefix}border-radius-xxl), + circle: 50%, + pill: var(--#{$prefix}border-radius-pill) + ) ), "rounded-start": ( property: border-bottom-left-radius border-top-left-radius, class: rounded-start, - values: (null: var(--#{$prefix}border-radius)) + values: ( + null: var(--#{$prefix}border-radius), + 0: 0, + 1: var(--#{$prefix}border-radius-sm), + 2: var(--#{$prefix}border-radius), + 3: var(--#{$prefix}border-radius-lg), + 4: var(--#{$prefix}border-radius-xl), + 5: var(--#{$prefix}border-radius-xxl), + circle: 50%, + pill: var(--#{$prefix}border-radius-pill) + ) ), // scss-docs-end utils-border-radius // scss-docs-start utils-visibility @@ -640,8 +792,15 @@ $utilities: map-merge( visible: visible, invisible: hidden, ) - ) + ), // scss-docs-end utils-visibility + // scss-docs-start utils-zindex + "z-index": ( + property: z-index, + class: z, + values: $zindex-levels, + ) + // scss-docs-end utils-zindex ), $utilities ); -- cgit v1.2.3