🚑 Consistent :focus with new modern look (#81)

* better focus * tweaked focus transparentizing
MarkusJohansen · Jan 11, 2024 · cc4f825 · cc4f825
1 parent efcc011
commit cc4f825
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 53 deletions.
diff --git a/build/chimera.css b/build/chimera.css
diff --git a/build/chimera.css.map b/build/chimera.css.map
diff --git a/src/elements/_buttons.scss b/src/elements/_buttons.scss
@@ -1,6 +1,9 @@
+@import "focus";
+
 button,
 input[type="button"],
 input[type="submit"] {
+  @extend %focus-base-component;
   background-color: $Chimera;
   color: $Chimera-text-secondary;
   font-size: medium;
@@ -14,28 +17,19 @@ input[type="button"]:hover,
 input[type="submit"]:hover {
   background-color: $Chimera-dark;
   border-color: $Chimera-dark;
-  color: $Chimera-text;
   cursor: pointer;
-  transition: 200ms ease-in-out;
 }
 
 button:active,
 input[type="button"]:active,
 input[type="submit"]:active {
   border-color: $Chimera-darker;
   background-color: $Chimera-darker;
-  transition: 200ms ease-in-out;
 }
 
 button:disabled,
 input[type="button"]:disabled,
 input[type="submit"]:disabled {
   border-color: $Chimera-darker;
   background-color: $Chimera-darker;
-}
-
-button:focus,
-input[type="button"]:focus,
-input[type="submit"]:focus {
-  outline: $Chimera-focus 1px solid;
-}
+}
diff --git a/src/elements/_focus.scss b/src/elements/_focus.scss
@@ -0,0 +1,8 @@
+%focus-base-component {
+    outline: none;
+    transition: 150ms, box-shadow 150ms ease-in-out;
+}
+
+%focus-base-component:focus {
+    box-shadow: 0 0 0 3px transparentize($Chimera-focus, 0.25);
+}
diff --git a/src/elements/_main.scss b/src/elements/_main.scss
@@ -1,3 +1,4 @@
+@import "textfields";
 @import "buttons";
 @import "blockquotes";
 @import "formatted-text";
@@ -11,5 +12,4 @@
 @import "radio-checkbox-groups";
 @import "tables";
 @import "text";
-@import "textfields";
 @import "base";
diff --git a/src/elements/_textfields.scss b/src/elements/_textfields.scss
@@ -1,14 +1,15 @@
+@import "focus";
+
 textarea,
 input {
+  @extend %focus-base-component;
   font-family: $font-stack;
   color: $Chimera-text;
   background-color: $Chimera-bg;
   font-size: medium;
   border-radius: 0.5em;
   border: solid 2px $Chimera-border;
-  outline: none;
   width: 100%;
-  box-sizing: border-box;
   margin: 0.5em 0;
   padding: 0.75em 0 0.75em 0.75em;
   resize: none;
@@ -17,9 +18,4 @@ input {
 textarea:disabled,
 input:disabled{
   color: $Chimera-text-disabled;
-}
-
-textarea:focus,
-input:focus {
-  border: solid 2px $Chimera-focus;
-} 
+}