prettier outline for buttons, and only shown when tabbing is active.

umbraco · Apr 24, 2019 · 5436478 · 5436478
1 parent 9333426
commit 5436478
Showing 1 changed file with 16 additions and 1 deletion.
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button.less b/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button.less
@@ -7,6 +7,21 @@
     position: relative;
 }
 
+.umb-button__button:focus {
+    outline: none;
+    .tabbing-active &:after {
+        content: '';
+        position: absolute;
+        z-index: 10000;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        border-radius: 3px;
+        box-shadow: 0 0 2px @blueMid, inset 0 0 2px 1px @blueMid;
+    }
+}
+
 .umb-button__content {
    opacity: 1;
    transition: opacity 0.25s ease;
@@ -133,4 +148,4 @@
 .umb-button--block {
     display: block;
     width: 100%;
-}
+}