diff options
| -rw-r--r-- | scss/_helpers.scss | 3 | ||||
| -rw-r--r-- | scss/_mixins.scss | 1 | ||||
| -rw-r--r-- | scss/_utilities.scss | 55 | ||||
| -rw-r--r-- | scss/bootstrap-utilities.scss | 3 | ||||
| -rw-r--r-- | scss/bootstrap.scss | 3 | ||||
| -rw-r--r-- | scss/helpers/_colored-links.scss | 12 | ||||
| -rw-r--r-- | scss/helpers/_text-truncation.scss (renamed from scss/helpers/_text.scss) | 2 | ||||
| -rw-r--r-- | scss/mixins/_text-emphasis.scss | 17 | ||||
| -rw-r--r-- | scss/mixins/_utilities.scss | 8 | ||||
| -rw-r--r-- | scss/utilities/_sizing.scss | 12 | ||||
| -rw-r--r-- | scss/utilities/_text.scss | 7 | ||||
| -rw-r--r-- | scss/utilities/_visibility.scss | 13 | ||||
| -rw-r--r-- | site/content/docs/4.3/helpers/colored-links.md | 17 | ||||
| -rw-r--r-- | site/content/docs/4.3/helpers/text-truncation.md | 4 | ||||
| -rw-r--r-- | site/content/docs/4.3/migration.md | 1 | ||||
| -rw-r--r-- | site/content/docs/4.3/utilities/colors.md | 14 | ||||
| -rw-r--r-- | site/data/sidebar.yml | 3 | ||||
| -rw-r--r-- | site/static/docs/4.3/assets/scss/_subnav.scss | 11 |
18 files changed, 91 insertions, 95 deletions
diff --git a/scss/_helpers.scss b/scss/_helpers.scss index ca57c9babb..06d931449f 100644 --- a/scss/_helpers.scss +++ b/scss/_helpers.scss @@ -1,7 +1,8 @@ @import "helpers/background"; @import "helpers/clearfix"; +@import "helpers/colored-links"; @import "helpers/embed"; @import "helpers/position"; @import "helpers/screenreaders"; @import "helpers/stretched-link"; -@import "helpers/text"; +@import "helpers/text-truncation"; diff --git a/scss/_mixins.scss b/scss/_mixins.scss index aac26155fe..b4b0ee7634 100644 --- a/scss/_mixins.scss +++ b/scss/_mixins.scss @@ -14,7 +14,6 @@ @import "mixins/resize"; @import "mixins/screen-reader"; @import "mixins/reset-text"; -@import "mixins/text-emphasis"; @import "mixins/text-truncate"; // Utilities diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 35a67d3fd3..823000c035 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -91,6 +91,21 @@ $utilities: map-merge( auto: auto ) ), + "max-width": ( + property: max-width, + class: mw, + values: (100: 100%) + ), + "viewport-width": ( + property: width, + class: vw, + values: (100: 100vw) + ), + "min-viewport-width": ( + property: min-width, + class: min-vw, + values: (100: 100vw) + ), "height": ( property: height, class: h, @@ -102,6 +117,21 @@ $utilities: map-merge( auto: auto ) ), + "max-height": ( + property: max-height, + class: mh, + values: (100: 100%) + ), + "viewport-height": ( + property: height, + class: vh, + values: (100: 100vh) + ), + "min-viewport-height": ( + property: min-height, + class: min-vh, + values: (100: 100vh) + ), // Flex utilities "flex": ( responsive: true, @@ -352,13 +382,16 @@ $utilities: map-merge( "color": ( property: color, class: text, - values: ( - white: $white, - body: $body-color, - muted: $text-muted, - black-50: rgba($black, .5), - white-50: rgba($white, .5), - reset: inherit, + values: map-merge( + $theme-colors, + ( + white: $white, + body: $body-color, + muted: $text-muted, + black-50: rgba($black, .5), + white-50: rgba($white, .5), + reset: inherit, + ) ) ), "background-color": ( @@ -431,6 +464,14 @@ $utilities: map-merge( class: rounded-left, values: (null: $border-radius) ), + "visibility": ( + property: visibility, + class: null, + values: ( + visible: visible, + invisible: hidden, + ) + ) ), $utilities ); diff --git a/scss/bootstrap-utilities.scss b/scss/bootstrap-utilities.scss index 031897ff0d..8fc81b9dd4 100644 --- a/scss/bootstrap-utilities.scss +++ b/scss/bootstrap-utilities.scss @@ -16,6 +16,3 @@ // Utilities @import "utilities/api"; -@import "utilities/sizing"; -@import "utilities/text"; -@import "utilities/visibility"; diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss index 84745b5d19..7138211c48 100644 --- a/scss/bootstrap.scss +++ b/scss/bootstrap.scss @@ -52,6 +52,3 @@ // Utilities @import "utilities/api"; -@import "utilities/sizing"; -@import "utilities/text"; -@import "utilities/visibility"; diff --git a/scss/helpers/_colored-links.scss b/scss/helpers/_colored-links.scss new file mode 100644 index 0000000000..4eea8d333e --- /dev/null +++ b/scss/helpers/_colored-links.scss @@ -0,0 +1,12 @@ +@each $color, $value in $theme-colors { + .link-#{$color} { + color: $value; + + @if $emphasized-link-hover-darken-percentage != 0 { + &:hover, + &:focus { + color: darken($value, $emphasized-link-hover-darken-percentage); + } + } + } +} diff --git a/scss/helpers/_text.scss b/scss/helpers/_text-truncation.scss index 3c2dbbd1d0..6421dac9a8 100644 --- a/scss/helpers/_text.scss +++ b/scss/helpers/_text-truncation.scss @@ -1,5 +1,5 @@ // -// Text +// Text truncation // .text-truncate { diff --git a/scss/mixins/_text-emphasis.scss b/scss/mixins/_text-emphasis.scss deleted file mode 100644 index 4c68bae89e..0000000000 --- a/scss/mixins/_text-emphasis.scss +++ /dev/null @@ -1,17 +0,0 @@ -// stylelint-disable declaration-no-important - -// Typography - -@mixin text-emphasis-variant($parent, $color) { - #{$parent} { - color: $color !important; - } - @if $emphasized-link-hover-darken-percentage != 0 { - a#{$parent} { - &:hover, - &:focus { - color: darken($color, $emphasized-link-hover-darken-percentage) !important; - } - } - } -} diff --git a/scss/mixins/_utilities.scss b/scss/mixins/_utilities.scss index b5901a7dd7..4604ef537a 100644 --- a/scss/mixins/_utilities.scss +++ b/scss/mixins/_utilities.scss @@ -17,11 +17,13 @@ } // Use custom class if present - $property-class: map-get($utility, class); - $property-class: if($property-class, $property-class, nth($properties, 1)); + $property-class: if(map-has-key($utility, class), map-get($utility, class), nth($properties, 1)); + $property-class: if($property-class == null, "", $property-class); + + $infix: if($property-class == "" and str-slice($infix, 1, 1) == "-", str-slice($infix, 2), $infix); // Don't prefix if value key is null (eg. with shadow class) - $property-class-modifier: if($key, "-" + $key, ""); + $property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, ""); .#{$property-class + $infix + $property-class-modifier} { @each $property in $properties { diff --git a/scss/utilities/_sizing.scss b/scss/utilities/_sizing.scss deleted file mode 100644 index cc346215b2..0000000000 --- a/scss/utilities/_sizing.scss +++ /dev/null @@ -1,12 +0,0 @@ -// stylelint-disable declaration-no-important - -.mw-100 { max-width: 100% !important; } -.mh-100 { max-height: 100% !important; } - -// Viewport additional helpers - -.min-vw-100 { min-width: 100vw !important; } -.min-vh-100 { min-height: 100vh !important; } - -.vw-100 { width: 100vw !important; } -.vh-100 { height: 100vh !important; } diff --git a/scss/utilities/_text.scss b/scss/utilities/_text.scss deleted file mode 100644 index ba775ee8d8..0000000000 --- a/scss/utilities/_text.scss +++ /dev/null @@ -1,7 +0,0 @@ -// -// Text -// - -@each $color, $value in $theme-colors { - @include text-emphasis-variant(".text-#{$color}", $value); -} diff --git a/scss/utilities/_visibility.scss b/scss/utilities/_visibility.scss deleted file mode 100644 index 7756c3bfac..0000000000 --- a/scss/utilities/_visibility.scss +++ /dev/null @@ -1,13 +0,0 @@ -// stylelint-disable declaration-no-important - -// -// Visibility utilities -// - -.visible { - visibility: visible !important; -} - -.invisible { - visibility: hidden !important; -} diff --git a/site/content/docs/4.3/helpers/colored-links.md b/site/content/docs/4.3/helpers/colored-links.md new file mode 100644 index 0000000000..f75cae4275 --- /dev/null +++ b/site/content/docs/4.3/helpers/colored-links.md @@ -0,0 +1,17 @@ +--- +layout: docs +title: Colored links +description: Colored links with hover states +group: helpers +toc: false +--- + +You can use the `.link-*` classes to colorize links. Unlike the [`.text-*` classes]({{< docsref "/utilities/colors#colors" >}}), these classes have a `:hover` and `:focus` state. + +{{< example >}} +{{< colored-links.inline >}} +{{- range (index $.Site.Data "theme-colors") }} +<a href="#" class="link-{{ .name }}">{{ .name | title }} link</a> +{{- end -}} +{{< /colored-links.inline >}} +{{< /example >}} diff --git a/site/content/docs/4.3/helpers/text-truncation.md b/site/content/docs/4.3/helpers/text-truncation.md index 466bb1c460..a92a171fd1 100644 --- a/site/content/docs/4.3/helpers/text-truncation.md +++ b/site/content/docs/4.3/helpers/text-truncation.md @@ -3,11 +3,9 @@ layout: docs title: Text truncation description: Truncate long strings of text with an ellipsis. group: helpers -toc: true +toc: false --- -## Text truncation - For longer content, you can add a `.text-truncate` class to truncate the text with an ellipsis. **Requires `display: inline-block` or `display: block`.** {{< example >}} diff --git a/site/content/docs/4.3/migration.md b/site/content/docs/4.3/migration.md index b530421b68..c550b69b7e 100644 --- a/site/content/docs/4.3/migration.md +++ b/site/content/docs/4.3/migration.md @@ -60,6 +60,7 @@ Changes to Reboot, typography, tables, and more. - Reset default horizontal `padding-left` on `<ul>` and `<ol>` elements from browser default `40px` to `2rem`. - Simplified table styles (no more 2px border on `thead > th` elements) and tightened cell padding. - Dropped `.pre-scrollable` class. [See #29135](https://github.com/twbs/bootstrap/pull/29135) +- `.text-*` utilities do not add hover and focus states to links anymore. `.link-*` helper classes can be used instead. [See #29267](https://github.com/twbs/bootstrap/pull/29267) ## Forms diff --git a/site/content/docs/4.3/utilities/colors.md b/site/content/docs/4.3/utilities/colors.md index 13b204d41f..62a35b059c 100644 --- a/site/content/docs/4.3/utilities/colors.md +++ b/site/content/docs/4.3/utilities/colors.md @@ -8,6 +8,8 @@ toc: true ## Color +Colorize text with color utilities. If you want to colorize links, you can use the [`.link-*` helper classes]({{< docsref "/helpers/colored-links" >}}) which have `:hover` and `:focus` states. + {{< example >}} {{< colors.inline >}} {{- range (index $.Site.Data "theme-colors") }} @@ -21,18 +23,6 @@ toc: true <p class="text-white-50 bg-dark">.text-white-50</p> {{< /example >}} -Contextual text classes also work well on anchors with the provided hover and focus states. **Note that the `.text-white` and `.text-muted` class has no additional link styling beyond underline.** - -{{< example >}} -{{< colors.inline >}} -{{- range (index $.Site.Data "theme-colors") }} -<p><a href="#" class="text-{{ .name }}{{ if eq .name "light" }} bg-dark{{ end }}">{{ .name | title }} link</a></p> -{{- end -}} -{{< /colors.inline >}} -<p><a href="#" class="text-muted">Muted link</a></p> -<p><a href="#" class="text-white bg-dark">White link</a></p> -{{< /example >}} - ## Background color Similar to the contextual text color classes, easily set the background of an element to any contextual class. Background utilities **do not set `color`**, so in some cases you'll want to use `.text-*` utilities. diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml index 205b95d7a3..a09fdbd506 100644 --- a/site/data/sidebar.yml +++ b/site/data/sidebar.yml @@ -67,11 +67,12 @@ - title: Helpers pages: - title: Clearfix + - title: Colored links - title: Embed - title: Position - title: Screen readers - title: Stretched link - # - title: Text + - title: Text truncation - title: Utilities pages: diff --git a/site/static/docs/4.3/assets/scss/_subnav.scss b/site/static/docs/4.3/assets/scss/_subnav.scss index b82107ee97..0ba1f11ae7 100644 --- a/site/static/docs/4.3/assets/scss/_subnav.scss +++ b/site/static/docs/4.3/assets/scss/_subnav.scss @@ -49,14 +49,3 @@ line-height: 1; color: $gray-900; } - -.link-dark { - font-weight: 500; - color: $dark; - - &:hover, - &:focus { - color: $blue; - text-decoration: none; - } -} |