diff options
author | Martijn Cuppens <martijn.cuppens@gmail.com> | 2019-08-17 21:19:00 +0300 |
---|---|---|
committer | Martijn Cuppens <martijn.cuppens@gmail.com> | 2019-08-26 09:21:24 +0300 |
commit | 19ee63ad25491aeafc9df9006ef370edf08cffbf (patch) | |
tree | ab48686134fbe8595468307e9904822e23d40777 /scss | |
parent | a5cbb5e71a43fe11107a8e13fb68c6bfd99cb0e7 (diff) |
Link helpers & use utility API for all utilities
Diffstat (limited to 'scss')
-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 |
12 files changed, 68 insertions, 68 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; -} |