summaryrefslogtreecommitdiffstats
path: root/scss/helpers
diff options
context:
space:
mode:
Diffstat (limited to 'scss/helpers')
-rw-r--r--scss/helpers/_clearfix.scss3
-rw-r--r--scss/helpers/_color-bg.scss10
-rw-r--r--scss/helpers/_colored-links.scss12
-rw-r--r--scss/helpers/_position.scss36
-rw-r--r--scss/helpers/_ratio.scss26
-rw-r--r--scss/helpers/_stacks.scss15
-rw-r--r--scss/helpers/_stretched-link.scss15
-rw-r--r--scss/helpers/_text-truncation.scss7
-rw-r--r--scss/helpers/_visually-hidden.scss8
-rw-r--r--scss/helpers/_vr.scss8
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;
+}