Merge pull request #304 from BeAPI/feature/seo-container-extend

data-seo-container - refactor to use @extend in CSS

Author: francoistibo

src/scss/04-utilities/_focus.scss

@@ -11,17 +11,6 @@ html {
         }
     }
 
-    [data-seo-container] {
-        &:focus-within {
-            outline: 1px solid currentColor;
-            outline-offset: .5rem;
-        }
-
-        *:focus {
-            outline: none;
-        }
-    }
-
     &:not([data-whatintent="keyboard"]) {
         a,
         button,
@@ -33,12 +22,23 @@ html {
                 outline: none;
             }
         }
+    }
+}
 
-        [data-seo-container] {
-            &:focus-within,
-            *:focus {
-                outline: none;
-            }
+%focus-seo-container {
+    &:focus-within {
+        outline: 2px solid currentColor;
+        outline-offset: .5rem;
+    }
+
+    *:focus {
+        outline: none;
+    }
+
+    html:not([data-whatintent="keyboard"]) & {
+        &:focus-within,
+        *:focus {
+            outline: none;
         }
     }
 }

src/scss/04-utilities/_seo.scss

@@ -1,17 +1,26 @@
-[data-seo-container] {
+%seo-container {
+    @extend %focus-seo-container;
     position: relative;
     z-index: 1;
     cursor: pointer;
+}
+
+%seo-target {
+    &::before {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: 100;
+        content: "";
+    }
+}
+
+[data-seo-container] {
+    @extend %seo-container;
 
     [data-seo-target] {
-        &::before {
-            position: absolute;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            left: 0;
-            z-index: 100;
-            content: "";
-        }
+        @extend %seo-target;
     }
 }