diff options
Diffstat (limited to 'scss/helpers')
-rw-r--r-- | scss/helpers/_clearfix.scss | 3 | ||||
-rw-r--r-- | scss/helpers/_color-bg.scss | 10 | ||||
-rw-r--r-- | scss/helpers/_colored-links.scss | 12 | ||||
-rw-r--r-- | scss/helpers/_position.scss | 36 | ||||
-rw-r--r-- | scss/helpers/_ratio.scss | 26 | ||||
-rw-r--r-- | scss/helpers/_stacks.scss | 15 | ||||
-rw-r--r-- | scss/helpers/_stretched-link.scss | 15 | ||||
-rw-r--r-- | scss/helpers/_text-truncation.scss | 7 | ||||
-rw-r--r-- | scss/helpers/_visually-hidden.scss | 8 | ||||
-rw-r--r-- | scss/helpers/_vr.scss | 8 |
10 files changed, 140 insertions, 0 deletions
diff --git a/scss/helpers/_clearfix.scss b/scss/helpers/_clearfix.scss new file mode 100644 index 0000000..e92522a --- /dev/null +++ b/scss/helpers/_clearfix.scss @@ -0,0 +1,3 @@ +.clearfix { + @include clearfix(); +} diff --git a/scss/helpers/_color-bg.scss b/scss/helpers/_color-bg.scss new file mode 100644 index 0000000..b5ce770 --- /dev/null +++ b/scss/helpers/_color-bg.scss @@ -0,0 +1,10 @@ +// stylelint-disable function-name-case + +// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251 +@each $color, $value in $theme-colors { + $color-rgb: to-rgb($value); + .text-bg-#{$color} { + color: color-contrast($value) if($enable-important-utilities, !important, null); + background-color: RGBA($color-rgb, var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null); + } +} diff --git a/scss/helpers/_colored-links.scss b/scss/helpers/_colored-links.scss new file mode 100644 index 0000000..1cb4182 --- /dev/null +++ b/scss/helpers/_colored-links.scss @@ -0,0 +1,12 @@ +@each $color, $value in $theme-colors { + .link-#{$color} { + color: $value !important; // stylelint-disable-line declaration-no-important + + @if $link-shade-percentage != 0 { + &:hover, + &:focus { + color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage)) !important; // stylelint-disable-line declaration-no-important + } + } + } +} diff --git a/scss/helpers/_position.scss b/scss/helpers/_position.scss new file mode 100644 index 0000000..59103d9 --- /dev/null +++ b/scss/helpers/_position.scss @@ -0,0 +1,36 @@ +// Shorthand + +.fixed-top { + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: $zindex-fixed; +} + +.fixed-bottom { + position: fixed; + right: 0; + bottom: 0; + left: 0; + z-index: $zindex-fixed; +} + +// Responsive sticky top and bottom +@each $breakpoint in map-keys($grid-breakpoints) { + @include media-breakpoint-up($breakpoint) { + $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + + .sticky#{$infix}-top { + position: sticky; + top: 0; + z-index: $zindex-sticky; + } + + .sticky#{$infix}-bottom { + position: sticky; + bottom: 0; + z-index: $zindex-sticky; + } + } +} diff --git a/scss/helpers/_ratio.scss b/scss/helpers/_ratio.scss new file mode 100644 index 0000000..b6a7654 --- /dev/null +++ b/scss/helpers/_ratio.scss @@ -0,0 +1,26 @@ +// Credit: Nicolas Gallagher and SUIT CSS. + +.ratio { + position: relative; + width: 100%; + + &::before { + display: block; + padding-top: var(--#{$prefix}aspect-ratio); + content: ""; + } + + > * { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } +} + +@each $key, $ratio in $aspect-ratios { + .ratio-#{$key} { + --#{$prefix}aspect-ratio: #{$ratio}; + } +} diff --git a/scss/helpers/_stacks.scss b/scss/helpers/_stacks.scss new file mode 100644 index 0000000..6cd237a --- /dev/null +++ b/scss/helpers/_stacks.scss @@ -0,0 +1,15 @@ +// scss-docs-start stacks +.hstack { + display: flex; + flex-direction: row; + align-items: center; + align-self: stretch; +} + +.vstack { + display: flex; + flex: 1 1 auto; + flex-direction: column; + align-self: stretch; +} +// scss-docs-end stacks diff --git a/scss/helpers/_stretched-link.scss b/scss/helpers/_stretched-link.scss new file mode 100644 index 0000000..71a1c75 --- /dev/null +++ b/scss/helpers/_stretched-link.scss @@ -0,0 +1,15 @@ +// +// Stretched link +// + +.stretched-link { + &::#{$stretched-link-pseudo-element} { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: $stretched-link-z-index; + content: ""; + } +} diff --git a/scss/helpers/_text-truncation.scss b/scss/helpers/_text-truncation.scss new file mode 100644 index 0000000..6421dac --- /dev/null +++ b/scss/helpers/_text-truncation.scss @@ -0,0 +1,7 @@ +// +// Text truncation +// + +.text-truncate { + @include text-truncate(); +} diff --git a/scss/helpers/_visually-hidden.scss b/scss/helpers/_visually-hidden.scss new file mode 100644 index 0000000..4760ff0 --- /dev/null +++ b/scss/helpers/_visually-hidden.scss @@ -0,0 +1,8 @@ +// +// Visually hidden +// + +.visually-hidden, +.visually-hidden-focusable:not(:focus):not(:focus-within) { + @include visually-hidden(); +} diff --git a/scss/helpers/_vr.scss b/scss/helpers/_vr.scss new file mode 100644 index 0000000..9bca099 --- /dev/null +++ b/scss/helpers/_vr.scss @@ -0,0 +1,8 @@ +.vr { + display: inline-block; + align-self: stretch; + width: 1px; + min-height: 1em; + background-color: currentcolor; + opacity: $hr-opacity; +} |