Add short-ring utility mixin

conedevelopment · Nov 23, 2023 · 31cfe5b · 31cfe5b
1 parent 70e6035
commit 31cfe5b
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 1 deletion.
diff --git a/preview/assets/scss/main.scss b/preview/assets/scss/main.scss
@@ -143,3 +143,34 @@
 .form-group--stacked\:md {
   @include form-group-stacked('md');
 }
+
+.ring-wrapper {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.ring-one,
+.ring-two {
+  --size: 3rem;
+  @include clear-btn;
+  block-size: var(--size);
+  inline-size: var(--size);
+}
+
+.ring-one {
+  background-color: pink;
+
+  &:focus-visible {
+    @include short-ring('input');
+  }
+}
+
+.ring-two {
+  background-color: rebeccapurple;
+
+  &:focus-visible {
+    @include short-ring('button', 'secondary');
+  }
+}
diff --git a/preview/pug/page/mixin.pug b/preview/pug/page/mixin.pug
@@ -5,6 +5,10 @@ block variables
   -var page = 'mixin';
 
 block content
+  h2(class='section-title') short-ring
+  div(class='ring-wrapper')
+    button(class='ring-one')
+    button(class='ring-two')
   h2(class='section-title') scrollbar
   div(class='scrollbar')
     p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut diam lorem. Morbi porttitor venenatis dui, hendrerit volutpat dolor suscipit sed. Maecenas leo neque, pulvinar tempus ultricies a, eleifend eget sem. Fusce in egestas ex, nec ultricies eros. Pellentesque mollis egestas nulla, quis gravida urna facilisis sit amet. Nulla facilisi. Nam quis libero sem. Nulla eget justo eros. Nam rutrum a nunc et luctus. Nunc lobortis arcu metus, eget vehicula lacus malesuada quis. Cras quis elementum lacus. Quisque in ante dui. Curabitur vel rhoncus nisl.

diff --git a/scss/mixin/_utilities.scss b/scss/mixin/_utilities.scss
@@ -1,6 +1,8 @@
 @use 'sass:map';
 @use '../function' as *;
 @use '../config' as *;
+@use 'form' as *;
+
 
 /// Hide something from the screen but keep it visible for assistive technology.
 /// @return {mixin} - The visually hidden mixin.
@@ -118,7 +120,7 @@
   }
 }
 
-/// Break long string
+/// Break long string.
 /// @author Chris Coyier - https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 /// @return {mixin} - The word-wrap mixin.
 @mixin word-wrap {
@@ -128,3 +130,43 @@
   word-break: break-word;
   word-wrap: break-word;
 }
+
+/// Generate a focus ring.
+/// @param {string} $type - The type of the focus ring.
+/// @param {string} $btn-type - The type - hence color - of the button.
+/// @return {mixin} - The focus ring mixin.
+@mixin short-ring(
+  $type: 'input',
+  $btn-type: 'primary'
+) {
+  @if $type == 'input' {
+    @include focus-ring(
+      $type: config('focus-ring-type', $form-control, false),
+      $border-color: color('border-focus', 'form'),
+      $ring-color: color('ring-focus', 'form'),
+      $box-shadow-type: config('focus-ring-box-shadow-type', $form-control, false),
+      $ring-size: config('focus-ring-size', $form-control, false),
+      $ring-offset: config('focus-ring-offset', $form-control, false)
+    );
+  }
+
+  @if $type == 'button' {
+    $ring-color: null;
+
+    @if map.has-key($colors, 'btn', $btn-type + '-focus-ring') {
+      $ring-color: color($btn-type + '-focus-ring', 'btn');
+    } @else {
+      $ring-color: color($btn-type + '-background', 'btn');
+    }
+
+    &:focus {
+      @include focus-ring(
+        $type: config('focus-ring-type', $btn, false),
+        $ring-color: $ring-color,
+        $box-shadow-type: config('focus-ring-box-shadow-type', $btn, false),
+        $ring-size: config('focus-ring-size', $btn, false),
+        $ring-offset: config('focus-ring-offset', $btn, false)
+      );
+    }
+  }
+}