diff options
Diffstat (limited to 'scss/_utilities.scss')
| -rw-r--r-- | scss/_utilities.scss | 112 |
1 files changed, 74 insertions, 38 deletions
diff --git a/scss/_utilities.scss b/scss/_utilities.scss index dacd8b289..3c927cf59 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -1,14 +1,19 @@ +// stylelint-disable indentation + // Utilities $utilities: () !default; // stylelint-disable-next-line scss/dollar-variable-default $utilities: map-merge( ( + // scss-docs-start utils-vertical-align "align": ( property: vertical-align, class: align, values: baseline top middle bottom text-bottom text-top ), + // scss-docs-end utils-vertical-align + // scss-docs-start utils-float "float": ( responsive: true, property: float, @@ -18,10 +23,14 @@ $utilities: map-merge( none: none, ) ), + // scss-docs-end utils-float + // scss-docs-start utils-overflow "overflow": ( property: overflow, values: auto hidden visible scroll, ), + // scss-docs-end utils-overflow + // scss-docs-start utils-display "display": ( responsive: true, print: true, @@ -29,6 +38,8 @@ $utilities: map-merge( class: d, values: inline inline-block block grid table table-row table-cell flex inline-flex none ), + // scss-docs-end utils-display + // scss-docs-start utils-shadow "shadow": ( property: box-shadow, class: shadow, @@ -39,6 +50,8 @@ $utilities: map-merge( none: none, ) ), + // scss-docs-end utils-shadow + // scss-docs-start utils-position "position": ( property: position, values: static relative absolute fixed sticky @@ -65,9 +78,13 @@ $utilities: map-merge( property: transform, class: translate-middle, values: ( - null: (translateX(-50%) translateY(-50%)) + null: translate(-50%, -50%), + x: translateX(-50%), + y: translateY(-50%), ) ), + // scss-docs-end utils-position + // scss-docs-start utils-borders "border": ( property: border, values: ( @@ -115,7 +132,9 @@ $utilities: map-merge( class: border, values: $border-widths ), + // scss-docs-end utils-borders // Sizing utilities + // scss-docs-start utils-sizing "width": ( property: width, class: w, @@ -168,7 +187,9 @@ $utilities: map-merge( class: min-vh, values: (100: 100vh) ), + // scss-docs-end utils-sizing // Flex utilities + // scss-docs-start utils-flex "flex": ( responsive: true, property: flex, @@ -271,7 +292,9 @@ $utilities: map-merge( last: 6, ), ), + // scss-docs-end utils-flex // Margin utilities + // scss-docs-start utils-spacing "margin": ( responsive: true, property: margin, @@ -400,7 +423,14 @@ $utilities: map-merge( class: ps, values: $spacers ), + // scss-docs-end utils-spacing // Text + // scss-docs-start utils-text + "font-family": ( + property: font-family, + class: font, + values: (monospace: var(--#{$variable-prefix}font-monospace)) + ), "font-size": ( rfs: true, property: font-size, @@ -423,10 +453,15 @@ $utilities: map-merge( bolder: $font-weight-bolder ) ), - "text-transform": ( - property: text-transform, - class: text, - values: lowercase uppercase capitalize + "line-height": ( + property: line-height, + class: lh, + values: ( + 1: 1, + sm: $line-height-sm, + base: $line-height-base, + lg: $line-height-lg, + ) ), "text-align": ( responsive: true, @@ -438,6 +473,31 @@ $utilities: map-merge( 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-wrap word-break, + class: text, + values: (break: break-word), + rtl: false + ), + // scss-docs-end utils-text + // scss-docs-start utils-color "color": ( property: color, class: text, @@ -453,16 +513,8 @@ $utilities: map-merge( ) ) ), - "line-height": ( - property: line-height, - class: lh, - values: ( - 1: 1, - sm: $line-height-sm, - base: $line-height-base, - lg: $line-height-lg, - ) - ), + // scss-docs-end utils-color + // scss-docs-start utils-bg-color "background-color": ( property: background-color, class: bg, @@ -475,34 +527,13 @@ $utilities: map-merge( ) ) ), + // scss-docs-end utils-bg-color "gradient": ( property: background-image, class: bg, values: (gradient: var(--#{$variable-prefix}gradient)) ), - "white-space": ( - property: white-space, - class: text, - values: ( - wrap: normal, - nowrap: nowrap, - ) - ), - "text-decoration": ( - property: text-decoration, - values: none underline line-through - ), - "word-wrap": ( - property: word-wrap word-break, - class: text, - values: (break: break-word), - rtl: false - ), - "font-family": ( - property: font-family, - class: font, - values: (monospace: var(--#{$variable-prefix}font-monospace)) - ), + // scss-docs-start utils-interaction "user-select": ( property: user-select, values: all auto none @@ -512,6 +543,8 @@ $utilities: map-merge( class: pe, values: none auto, ), + // scss-docs-end utils-interaction + // scss-docs-start utils-border-radius "rounded": ( property: border-radius, class: rounded, @@ -545,6 +578,8 @@ $utilities: map-merge( class: rounded-start, values: (null: $border-radius) ), + // scss-docs-end utils-border-radius + // scss-docs-start utils-visibility "visibility": ( property: visibility, class: null, @@ -553,6 +588,7 @@ $utilities: map-merge( invisible: hidden, ) ) + // scss-docs-end utils-visibility ), $utilities ); |