v0.1.20

CarcajadaArtificial · Jul 16, 2023 · be33738 · be33738
1 parent 2d07897
commit be33738
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 28 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,8 +1,11 @@
 # Changelog
 
-## v0.1.19
+## v0.1.20
 
-### Minor updates
+### Added focus interaction on focusable elements
+  - `/src/scss/animation.scss`
+  - `/src/scss/components.scss`
+  - `/src/scss/index.scss`
 
 ## Roadmap
 

diff --git a/src/scss/animation.scss b/src/scss/animation.scss
@@ -0,0 +1,18 @@
+.comp-link,
+.comp-button,
+.comp-input,
+.comp-select,
+.comp-textarea {
+  transition: outline 0.1s ease-in-out;
+  outline: none;
+
+  &:hover,
+  &:focus {
+    outline: 2px solid var(--clr-txt-base);
+  }
+}
+
+.comp-link {
+  outline-offset: var(--s-eighth);
+  border-radius: var(--s-eighth);
+}
diff --git a/src/scss/components.scss b/src/scss/components.scss
@@ -13,16 +13,6 @@
   -webkit-appearance: none;
 }
 
-@mixin transition-outline {
-  transition: outline 0.1s ease-in-out;
-  outline: none;
-
-  &:hover,
-  &:focus {
-    outline: 2px solid var(--clr-txt-base);
-  }
-}
-
 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 // Header
 .comp-header {
@@ -145,7 +135,6 @@
   cursor: pointer;
   border-radius: var(--s-eighth);
   margin-right: var(--s-eighth);
-  @include transition-outline;
 }
 
 .comp-button_panel,
@@ -186,7 +175,6 @@
 .comp-textarea,
 .comp-select {
   border-radius: var(--s-quarter);
-  @include transition-outline;
 
   &_container {
     max-width: 24rem;

diff --git a/src/scss/index.scss b/src/scss/index.scss
@@ -1,3 +1,4 @@
 @use 'system' as *;
 @use 'components' as *;
+@use 'animation' as *;
 @use 'twind' as *;
diff --git a/static/style.css b/static/style.css