diff --git a/scss/mixins/_utilities.scss b/scss/mixins/_utilities.scss index 555c5c9488..6a0ebdcfd6 100644 --- a/scss/mixins/_utilities.scss +++ b/scss/mixins/_utilities.scss @@ -74,7 +74,7 @@ --#{$prefix}#{$local-var}: #{$variable}; } } - #{$property}: $value if($enable-important-utilities, !important, null); + #{$property}: $value; } } @@ -86,7 +86,7 @@ --#{$prefix}#{$local-var}: #{$variable}; } } - #{$property}: $value if($enable-important-utilities, !important, null); + #{$property}: $value; } } } diff --git a/site/src/content/docs/customize/options.mdx b/site/src/content/docs/customize/options.mdx index 719de6ec80..5452836dd8 100644 --- a/site/src/content/docs/customize/options.mdx +++ b/site/src/content/docs/customize/options.mdx @@ -25,6 +25,5 @@ You can find and customize these variables for key global options in Bootstrap's | `$enable-validation-icons` | `true` (default) or `false` | Enables `background-image` icons within textual inputs and some custom forms for validation states. | | `$enable-negative-margins` | `true` or `false` (default) | Enables the generation of [negative margin utilities]([[docsref:/utilities/spacing#negative-margin]]). | | `$enable-deprecation-messages` | `true` (default) or `false` | Set to `false` to hide warnings when using any of the deprecated mixins and functions that are planned to be removed in `v6`. | -| `$enable-important-utilities` | `true` (default) or `false` | Enables the `!important` suffix in utility classes. | | `$enable-smooth-scroll` | `true` (default) or `false` | Applies `scroll-behavior: smooth` globally, except for users asking for reduced motion through [`prefers-reduced-motion` media query]([[docsref:/getting-started/accessibility#reduced-motion]]) | diff --git a/site/src/content/docs/utilities/api.mdx b/site/src/content/docs/utilities/api.mdx index f89834b3b7..d618111f90 100644 --- a/site/src/content/docs/utilities/api.mdx +++ b/site/src/content/docs/utilities/api.mdx @@ -5,9 +5,9 @@ aliases: "/docs/[[config:docs_version]]/utilities/" toc: true --- -Bootstrap utilities are generated with our utility API and can be used to modify or extend our default set of utility classes via Sass. Our utility API is based on a series of Sass maps and functions for generating families of classes with various options. If you're unfamiliar with Sass maps, read up on the [official Sass docs](https://sass-lang.com/documentation/values/maps) to get started. +Bootstrap utilities are generated with our utility API and can be used to modify or extend our default set of utility classes via Sass. Utility classes are the last layer in our CSS layers, so they'll always apply to elements and components used by Bootstrap. The utility API is based on a series of Sass maps and functions for generating families of classes with various options. If you're unfamiliar with Sass maps, read up on the [official Sass docs](https://sass-lang.com/documentation/values/maps) to get started. -The `$utilities` map contains all our utilities and is later merged with your custom `$utilities` map, if present. The utility map contains a keyed list of utility groups which accept the following options: +The `$utilities` map contains all our utilities and is later merged with your custom `$utilities` map, if present. This map contains a keyed list of utility groups which accept the following options: | Option | Type | Default value | Description | @@ -70,9 +70,9 @@ $utilities: ( Output: ```css -.text-decoration-none { text-decoration: none !important; } -.text-decoration-underline { text-decoration: underline !important; } -.text-decoration-line-through { text-decoration: line-through !important; } +.text-decoration-none { text-decoration: none; } +.text-decoration-underline { text-decoration: underline; } +.text-decoration-line-through { text-decoration: line-through; } ``` ### Values @@ -126,11 +126,11 @@ $utilities: ( Output: ```css -.o-0 { opacity: 0 !important; } -.o-25 { opacity: .25 !important; } -.o-50 { opacity: .5 !important; } -.o-75 { opacity: .75 !important; } -.o-100 { opacity: 1 !important; } +.o-0 { opacity: 0; } +.o-25 { opacity: .25; } +.o-50 { opacity: .5; } +.o-75 { opacity: .75; } +.o-100 { opacity: 1; } ``` If `class: null`, generates classes for each of the `values` keys: @@ -151,8 +151,8 @@ $utilities: ( Output: ```css -.visible { visibility: visible !important; } -.invisible { visibility: hidden !important; } +.visible { visibility: visible; } +.invisible { visibility: hidden; } ``` ### CSS variable utilities @@ -213,7 +213,7 @@ Output: ```css .bg-primary { --bs-bg-opacity: 1; - background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important; + background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)); } ``` @@ -243,11 +243,11 @@ $utilities: ( Output: ```css -.opacity-0-hover:hover { opacity: 0 !important; } -.opacity-25-hover:hover { opacity: .25 !important; } -.opacity-50-hover:hover { opacity: .5 !important; } -.opacity-75-hover:hover { opacity: .75 !important; } -.opacity-100-hover:hover { opacity: 1 !important; } +.opacity-0-hover:hover { opacity: 0; } +.opacity-25-hover:hover { opacity: .25; } +.opacity-50-hover:hover { opacity: .5; } +.opacity-75-hover:hover { opacity: .75; } +.opacity-100-hover:hover { opacity: 1; } ``` ### Responsive @@ -273,50 +273,50 @@ $utilities: ( Output: ```css -.opacity-0 { opacity: 0 !important; } -.opacity-25 { opacity: .25 !important; } -.opacity-50 { opacity: .5 !important; } -.opacity-75 { opacity: .75 !important; } -.opacity-100 { opacity: 1 !important; } +.opacity-0 { opacity: 0; } +.opacity-25 { opacity: .25; } +.opacity-50 { opacity: .5; } +.opacity-75 { opacity: .75; } +.opacity-100 { opacity: 1; } @media (min-width: 576px) { - .opacity-sm-0 { opacity: 0 !important; } - .opacity-sm-25 { opacity: .25 !important; } - .opacity-sm-50 { opacity: .5 !important; } - .opacity-sm-75 { opacity: .75 !important; } - .opacity-sm-100 { opacity: 1 !important; } + .opacity-sm-0 { opacity: 0; } + .opacity-sm-25 { opacity: .25; } + .opacity-sm-50 { opacity: .5; } + .opacity-sm-75 { opacity: .75; } + .opacity-sm-100 { opacity: 1; } } @media (min-width: 768px) { - .opacity-md-0 { opacity: 0 !important; } - .opacity-md-25 { opacity: .25 !important; } - .opacity-md-50 { opacity: .5 !important; } - .opacity-md-75 { opacity: .75 !important; } - .opacity-md-100 { opacity: 1 !important; } + .opacity-md-0 { opacity: 0; } + .opacity-md-25 { opacity: .25; } + .opacity-md-50 { opacity: .5; } + .opacity-md-75 { opacity: .75; } + .opacity-md-100 { opacity: 1; } } @media (min-width: 992px) { - .opacity-lg-0 { opacity: 0 !important; } - .opacity-lg-25 { opacity: .25 !important; } - .opacity-lg-50 { opacity: .5 !important; } - .opacity-lg-75 { opacity: .75 !important; } - .opacity-lg-100 { opacity: 1 !important; } + .opacity-lg-0 { opacity: 0; } + .opacity-lg-25 { opacity: .25; } + .opacity-lg-50 { opacity: .5; } + .opacity-lg-75 { opacity: .75; } + .opacity-lg-100 { opacity: 1; } } @media (min-width: 1200px) { - .opacity-xl-0 { opacity: 0 !important; } - .opacity-xl-25 { opacity: .25 !important; } - .opacity-xl-50 { opacity: .5 !important; } - .opacity-xl-75 { opacity: .75 !important; } - .opacity-xl-100 { opacity: 1 !important; } + .opacity-xl-0 { opacity: 0; } + .opacity-xl-25 { opacity: .25; } + .opacity-xl-50 { opacity: .5; } + .opacity-xl-75 { opacity: .75; } + .opacity-xl-100 { opacity: 1; } } @media (min-width: 1400px) { - .opacity-xxl-0 { opacity: 0 !important; } - .opacity-xxl-25 { opacity: .25 !important; } - .opacity-xxl-50 { opacity: .5 !important; } - .opacity-xxl-75 { opacity: .75 !important; } - .opacity-xxl-100 { opacity: 1 !important; } + .opacity-xxl-0 { opacity: 0; } + .opacity-xxl-25 { opacity: .25; } + .opacity-xxl-50 { opacity: .5; } + .opacity-xxl-75 { opacity: .75; } + .opacity-xxl-100 { opacity: 1; } } ``` @@ -343,18 +343,18 @@ $utilities: ( Output: ```css -.opacity-0 { opacity: 0 !important; } -.opacity-25 { opacity: .25 !important; } -.opacity-50 { opacity: .5 !important; } -.opacity-75 { opacity: .75 !important; } -.opacity-100 { opacity: 1 !important; } +.opacity-0 { opacity: 0; } +.opacity-25 { opacity: .25; } +.opacity-50 { opacity: .5; } +.opacity-75 { opacity: .75; } +.opacity-100 { opacity: 1; } @media print { - .opacity-print-0 { opacity: 0 !important; } - .opacity-print-25 { opacity: .25 !important; } - .opacity-print-50 { opacity: .5 !important; } - .opacity-print-75 { opacity: .75 !important; } - .opacity-print-100 { opacity: 1 !important; } + .opacity-print-0 { opacity: 0; } + .opacity-print-25 { opacity: .25; } + .opacity-print-50 { opacity: .5; } + .opacity-print-75 { opacity: .75; } + .opacity-print-100 { opacity: 1; } } ``` @@ -612,8 +612,8 @@ Output: ```css /* rtl:begin:remove */ .text-break { - word-wrap: break-word !important; - word-break: break-word !important; + word-wrap: break-word; + word-break: break-word; } /* rtl:end:remove */ ```