fix(button): designs for focused state (#340) (#395)

Co-authored-by: Pratik Galoria <[email protected]> Co-authored-by: Murat Çorlu <[email protected]>
Trendyol · Feb 7, 2023 · d3b58ed · d3b58ed
1 parent 7e04ffa
commit d3b58ed
Showing 1 changed file with 13 additions and 0 deletions.
diff --git a/src/components/button/bl-button.css b/src/components/button/bl-button.css
@@ -68,6 +68,19 @@
   outline: none;
 }
 
+.button:focus-visible {
+  position: relative;
+  outline: none;
+}
+
+.button:focus-visible::after {
+  border: 2px solid var(--main-color);
+  border-radius: var(--bl-border-radius-l);
+  content: "";
+  position: absolute;
+  inset: -4px;
+}
+
 :host ::slotted(bl-icon) {
   font-size: var(--icon-size);
 }