From 19ee63ad25491aeafc9df9006ef370edf08cffbf Mon Sep 17 00:00:00 2001 From: Martijn Cuppens Date: Sat, 17 Aug 2019 20:19:00 +0200 Subject: [PATCH] Link helpers & use utility API for all utilities --- scss/_helpers.scss | 3 +- scss/_mixins.scss | 1 - scss/_utilities.scss | 55 ++++++++++++++++--- scss/bootstrap-utilities.scss | 3 - scss/bootstrap.scss | 3 - scss/helpers/_colored-links.scss | 12 ++++ .../{_text.scss => _text-truncation.scss} | 2 +- scss/mixins/_text-emphasis.scss | 17 ------ scss/mixins/_utilities.scss | 8 ++- scss/utilities/_sizing.scss | 12 ---- scss/utilities/_text.scss | 7 --- scss/utilities/_visibility.scss | 13 ----- .../content/docs/4.3/helpers/colored-links.md | 17 ++++++ .../docs/4.3/helpers/text-truncation.md | 4 +- site/content/docs/4.3/migration.md | 1 + site/content/docs/4.3/utilities/colors.md | 14 +---- site/data/sidebar.yml | 3 +- site/static/docs/4.3/assets/scss/_subnav.scss | 11 ---- 18 files changed, 91 insertions(+), 95 deletions(-) create mode 100644 scss/helpers/_colored-links.scss rename scss/helpers/{_text.scss => _text-truncation.scss} (73%) delete mode 100644 scss/mixins/_text-emphasis.scss delete mode 100644 scss/utilities/_sizing.scss delete mode 100644 scss/utilities/_text.scss delete mode 100644 scss/utilities/_visibility.scss create mode 100644 site/content/docs/4.3/helpers/colored-links.md diff --git a/scss/_helpers.scss b/scss/_helpers.scss index ca57c9babb34..06d931449fc6 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 aac26155fedd..b4b0ee763415 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 35a67d3fd38f..823000c035bb 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 031897ff0d7e..8fc81b9dd48d 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 84745b5d19ee..7138211c48d4 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 000000000000..4eea8d333ec2 --- /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 similarity index 73% rename from scss/helpers/_text.scss rename to scss/helpers/_text-truncation.scss index 3c2dbbd1d073..6421dac9a852 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 4c68bae89e90..000000000000 --- 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 b5901a7dd744..4604ef537ab2 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 cc346215b271..000000000000 --- 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 ba775ee8d87f..000000000000 --- 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 7756c3bfacf7..000000000000 --- 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 000000000000..f75cae42751c --- /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") }} +{{ .name | title }} link +{{- 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 466bb1c46075..a92a171fd15c 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 b530421b6816..c550b69b7e47 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 `