From 8cdb6c40bdf55229459f479111e6a44d49052cf1 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Tue, 14 Dec 2021 09:51:31 +0200 Subject: Update stylelint and stylelint-config-twbs-bootstrap (#35438) --- scss/_utilities.scss | 2 -- 1 file changed, 2 deletions(-) (limited to 'scss/_utilities.scss') diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 960d6f1ad..6498349b2 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -1,5 +1,3 @@ -// stylelint-disable indentation - // Utilities $utilities: () !default; -- cgit v1.2.3 From 43a9216a7fa90e0e427f9217b89d455019f2ad77 Mon Sep 17 00:00:00 2001 From: Ty Mick Date: Sun, 12 Dec 2021 09:19:19 -0800 Subject: Move `gap` utility API from "Flex" to "Spacing" The `gap` utility is described on the [Spacing page][1] but is not actually mentioned on the [Flex page][2] (apart from the [API section][3]). [1]: https://getbootstrap.com/docs/5.1/utilities/spacing/ [2]: https://getbootstrap.com/docs/5.1/utilities/flex/ [3]: https://getbootstrap.com/docs/5.1/utilities/flex/#utilities-api --- scss/_utilities.scss | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) (limited to 'scss/_utilities.scss') diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 6498349b2..4d65bb88b 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -236,12 +236,6 @@ $utilities: map-merge( class: flex, values: wrap nowrap wrap-reverse ), - "gap": ( - responsive: true, - property: gap, - class: gap, - values: $spacers - ), "justify-content": ( responsive: true, property: justify-content, @@ -434,6 +428,13 @@ $utilities: map-merge( class: ps, values: $spacers ), + // Gap utility + "gap": ( + responsive: true, + property: gap, + class: gap, + values: $spacers + ), // scss-docs-end utils-spacing // Text // scss-docs-start utils-text -- cgit v1.2.3 From de0dfca9a1749990319cdfcbb7f1584df09d7091 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 29 Nov 2021 21:14:17 -0800 Subject: Convert border utilities to CSS variables - Updates the utilities mixin to check for specific CSS variable names via `css-variable` - Bonus fix: we now prevent local variables for `0` value utilities (e.g., `.border-top-0` no longer sets `--bs-border-opacity: 1` - Adds new `.border-opacity-*` classes - Adds new root variables: `--bs-border-color`, `--bs-border-style`, `--bs-border-width` - Documents the new variable changes --- scss/_utilities.scss | 31 +++++++++++++++++++++++-------- 1 file changed, 23 insertions(+), 8 deletions(-) (limited to 'scss/_utilities.scss') diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 4d65bb88b..7fc732acf 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -98,15 +98,29 @@ $utilities: map-merge( // scss-docs-start utils-borders "border": ( property: border, + local-vars: ( + "border-opacity": 1 + ), values: ( - null: $border-width solid $border-color, + null: var(--#{$variable-prefix}border-width) var(--#{$variable-prefix}border-style) var(--#{$variable-prefix}border-color), 0: 0, ) ), + "border-opacity": ( + css-var: true, + class: border-opacity, + values: ( + 10: .1, + 25: .25, + 50: .5, + 75: .75, + 100: 1 + ) + ), "border-top": ( property: border-top, values: ( - null: $border-width solid $border-color, + null: var(--#{$variable-prefix}border-width) var(--#{$variable-prefix}border-style) var(--#{$variable-prefix}border-color), 0: 0, ) ), @@ -114,14 +128,14 @@ $utilities: map-merge( property: border-right, class: border-end, values: ( - null: $border-width solid $border-color, + null: var(--#{$variable-prefix}border-width) var(--#{$variable-prefix}border-style) var(--#{$variable-prefix}border-color), 0: 0, ) ), "border-bottom": ( property: border-bottom, values: ( - null: $border-width solid $border-color, + null: var(--#{$variable-prefix}border-width) var(--#{$variable-prefix}border-style) var(--#{$variable-prefix}border-color), 0: 0, ) ), @@ -129,17 +143,18 @@ $utilities: map-merge( property: border-left, class: border-start, values: ( - null: $border-width solid $border-color, + null: var(--#{$variable-prefix}border-width) var(--#{$variable-prefix}border-style) var(--#{$variable-prefix}border-color), 0: 0, ) ), "border-color": ( - property: border-color, + css-var: true, + css-variable-name: border-color, class: border, - values: map-merge($theme-colors, ("white": $white)) + values: $utilities-border-colors ), "border-width": ( - property: border-width, + css-var: true, class: border, values: $border-widths ), -- cgit v1.2.3 From a9b34450601b017b27cacd9ff750aa9c12aac82c Mon Sep 17 00:00:00 2001 From: cccabinet Date: Tue, 1 Mar 2022 23:43:33 +0900 Subject: fix:border-width --- scss/_utilities.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'scss/_utilities.scss') diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 7fc732acf..771dd4225 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -155,6 +155,7 @@ $utilities: map-merge( ), "border-width": ( css-var: true, + css-variable-name: border-width, class: border, values: $border-widths ), -- cgit v1.2.3 From c73480c63660d0643434e07c9a522758c21a272d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 28 Feb 2022 17:22:14 -0800 Subject: Adjust border-radius values and add some new utilities - Updates global border-radius values for a more modern appearance - New .fw-semibold - New .rounded-4 and .rounded-5 --- scss/_utilities.scss | 3 +++ 1 file changed, 3 insertions(+) (limited to 'scss/_utilities.scss') diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 771dd4225..49fac6508 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -478,6 +478,7 @@ $utilities: map-merge( lighter: $font-weight-lighter, normal: $font-weight-normal, bold: $font-weight-bold, + semibold: $font-weight-semibold, bolder: $font-weight-bolder ) ), @@ -605,6 +606,8 @@ $utilities: map-merge( 1: $border-radius-sm, 2: $border-radius, 3: $border-radius-lg, + 4: $border-radius-xl, + 5: $border-radius-2xl, circle: 50%, pill: $border-radius-pill ) -- cgit v1.2.3 From acf6ea74a74328bcaa9f1c354f27e602cfbb8968 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 13 Mar 2022 10:13:09 -0700 Subject: Add additional root variables, rename `$variable-prefix` to `$prefix` (#35981) * Add additional root variables, rename $variable-prefix to $prefix - Adds new root CSS variables for border-radius, border-width, border-color, and border-style - Adds new root CSS variables for heading-color, link-colors, code color, and highlight color - Replaces most instances of Sass variables (for border-radius, border-color, border-style, and border-width) for CSS variables inside _variables.scss - Updates $mark-padding to be an even pixel number - Renames $variable-prefix to $prefix throughout * Bundlewatch --- scss/_utilities.scss | 36 ++++++++++++++++++------------------ 1 file changed, 18 insertions(+), 18 deletions(-) (limited to 'scss/_utilities.scss') diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 49fac6508..3705f92ab 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -102,7 +102,7 @@ $utilities: map-merge( "border-opacity": 1 ), values: ( - null: var(--#{$variable-prefix}border-width) var(--#{$variable-prefix}border-style) var(--#{$variable-prefix}border-color), + null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), 0: 0, ) ), @@ -120,7 +120,7 @@ $utilities: map-merge( "border-top": ( property: border-top, values: ( - null: var(--#{$variable-prefix}border-width) var(--#{$variable-prefix}border-style) var(--#{$variable-prefix}border-color), + null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), 0: 0, ) ), @@ -128,14 +128,14 @@ $utilities: map-merge( property: border-right, class: border-end, values: ( - null: var(--#{$variable-prefix}border-width) var(--#{$variable-prefix}border-style) var(--#{$variable-prefix}border-color), + null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), 0: 0, ) ), "border-bottom": ( property: border-bottom, values: ( - null: var(--#{$variable-prefix}border-width) var(--#{$variable-prefix}border-style) var(--#{$variable-prefix}border-color), + null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), 0: 0, ) ), @@ -143,7 +143,7 @@ $utilities: map-merge( property: border-left, class: border-start, values: ( - null: var(--#{$variable-prefix}border-width) var(--#{$variable-prefix}border-style) var(--#{$variable-prefix}border-color), + null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), 0: 0, ) ), @@ -457,7 +457,7 @@ $utilities: map-merge( "font-family": ( property: font-family, class: font, - values: (monospace: var(--#{$variable-prefix}font-monospace)) + values: (monospace: var(--#{$prefix}font-monospace)) ), "font-size": ( rfs: true, @@ -583,7 +583,7 @@ $utilities: map-merge( "gradient": ( property: background-image, class: bg, - values: (gradient: var(--#{$variable-prefix}gradient)) + values: (gradient: var(--#{$prefix}gradient)) ), // scss-docs-start utils-interaction "user-select": ( @@ -601,36 +601,36 @@ $utilities: map-merge( property: border-radius, class: rounded, values: ( - null: $border-radius, + null: var(--#{$prefix}border-radius), 0: 0, - 1: $border-radius-sm, - 2: $border-radius, - 3: $border-radius-lg, - 4: $border-radius-xl, - 5: $border-radius-2xl, + 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-2xl), circle: 50%, - pill: $border-radius-pill + pill: var(--#{$prefix}border-radius-pill) ) ), "rounded-top": ( property: border-top-left-radius border-top-right-radius, class: rounded-top, - values: (null: $border-radius) + values: (null: var(--#{$prefix}border-radius)) ), "rounded-end": ( property: border-top-right-radius border-bottom-right-radius, class: rounded-end, - values: (null: $border-radius) + values: (null: var(--#{$prefix}border-radius)) ), "rounded-bottom": ( property: border-bottom-right-radius border-bottom-left-radius, class: rounded-bottom, - values: (null: $border-radius) + values: (null: var(--#{$prefix}border-radius)) ), "rounded-start": ( property: border-bottom-left-radius border-top-left-radius, class: rounded-start, - values: (null: $border-radius) + values: (null: var(--#{$prefix}border-radius)) ), // scss-docs-end utils-border-radius // scss-docs-start utils-visibility -- cgit v1.2.3 From dab026fc2bb43aff8d16033143d1bf0d71198277 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 6 Apr 2022 17:35:31 -0700 Subject: Revert border-color utilities to use the CSS property instead of the variable --- scss/_utilities.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'scss/_utilities.scss') diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 3705f92ab..9e6052909 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -148,8 +148,7 @@ $utilities: map-merge( ) ), "border-color": ( - css-var: true, - css-variable-name: border-color, + property: border-color, class: border, values: $utilities-border-colors ), -- cgit v1.2.3 From bca99232b8bef6a53719e4827de40729098d4ec8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 5 May 2022 21:32:02 -0700 Subject: Iterate on border utilities (#36239) * Remove `--bs-border-opacity: 1` from `.border-*` utilities We set `--bs-border-opacity: 1` globally at the `:root` level, so redeclaring it on every `.border-*` utility doesn't make much sense. I think we can drop this. * Remove global border-opacity var, restore on .border-color classes, move .border-color utils down the list to fix some specificity issues * Add some demos of border utils to the docs --- scss/_utilities.scss | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) (limited to 'scss/_utilities.scss') diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 9e6052909..1e0d141ac 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -98,25 +98,11 @@ $utilities: map-merge( // scss-docs-start utils-borders "border": ( property: border, - local-vars: ( - "border-opacity": 1 - ), values: ( null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), 0: 0, ) ), - "border-opacity": ( - css-var: true, - class: border-opacity, - values: ( - 10: .1, - 25: .25, - 50: .5, - 75: .75, - 100: 1 - ) - ), "border-top": ( property: border-top, values: ( @@ -150,6 +136,9 @@ $utilities: map-merge( "border-color": ( property: border-color, class: border, + local-vars: ( + "border-opacity": 1 + ), values: $utilities-border-colors ), "border-width": ( @@ -158,6 +147,17 @@ $utilities: map-merge( class: border, values: $border-widths ), + "border-opacity": ( + css-var: true, + class: border-opacity, + values: ( + 10: .1, + 25: .25, + 50: .5, + 75: .75, + 100: 1 + ) + ), // scss-docs-end utils-borders // Sizing utilities // scss-docs-start utils-sizing -- cgit v1.2.3 From 9a582767c605d9b9a407a64e07225b016803d47c Mon Sep 17 00:00:00 2001 From: maks Date: Mon, 3 Oct 2022 19:52:02 +0200 Subject: add font-weight-medium(=500) / fw-medium (#36781) * add font-weight-medium = 500 * Update _utilities.scss --- scss/_utilities.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'scss/_utilities.scss') diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 1e0d141ac..e23d6a7e4 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -473,11 +473,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 ) ), -- cgit v1.2.3 From b1185b91ea56e4a7b431b869855d898c91e4763b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Mon, 3 Oct 2022 20:52:41 +0200 Subject: Add new border-radius utilities (#36540) * Add new border-radius utilities * Fix bundlewatch * Fix bundlewatch again Co-authored-by: Mark Otto --- scss/_utilities.scss | 48 ++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 44 insertions(+), 4 deletions(-) (limited to 'scss/_utilities.scss') diff --git a/scss/_utilities.scss b/scss/_utilities.scss index e23d6a7e4..715c611c2 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -615,22 +615,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-2xl), + 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-2xl), + 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-2xl), + 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-2xl), + circle: 50%, + pill: var(--#{$prefix}border-radius-pill) + ) ), // scss-docs-end utils-border-radius // scss-docs-start utils-visibility -- cgit v1.2.3 From 708a3a0e398f6c01f00283941cd6a4aca9f66322 Mon Sep 17 00:00:00 2001 From: Daniel Raymond <29353783+MadeByRaymond@users.noreply.github.com> Date: Thu, 6 Oct 2022 21:14:11 +0100 Subject: Utilities for overflow and object fit (#36848) * Added "overflow-x" and "overflow-y" - Having the same properties as overflow but for just the x and y axises - Usecase being I want my y axis to be scrollable but not my x axis - E.g a card with a vertical list of items. * Added "object-fit" utilities - The CSS object-fit property is used to specify how an or