From 56148d8b4e402ae30d412d04733e06011f0d928c Mon Sep 17 00:00:00 2001
From: Yurii Zusik <yurii.zusik@bigcommerce.com>
Date: Tue, 1 Sep 2020 12:28:47 +0300
Subject: [PATCH] BCTHEME-196 Create unified focus styling in Cornerstone

---
 CHANGELOG.md                                  |  1 +
 .../stencil/productView/_productView.scss     |  4 +--
 assets/scss/tools/_theme_focus.scss           | 29 +++++++++++++++++++
 assets/scss/tools/_tools.scss                 |  1 +
 4 files changed, 33 insertions(+), 2 deletions(-)
 create mode 100644 assets/scss/tools/_theme_focus.scss

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 628e9ca310..38f3f391be 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Create unified focus styling in Cornerstone. [#1812](https://github.com/bigcommerce/cornerstone/pull/1812)
 - Review link in quick modal focused twice. [#1797](https://github.com/bigcommerce/cornerstone/pull/1797)
 - Fixed product image doesn't change on click when viewing a product with multiple images in IE11 [#1748](https://github.com/bigcommerce/cornerstone/pull/1748)
 - Fixed alt text on image change in product view [#1747](https://github.com/bigcommerce/cornerstone/pull/1747)
diff --git a/assets/scss/components/stencil/productView/_productView.scss b/assets/scss/components/stencil/productView/_productView.scss
index d09d8995d5..705f0fa338 100644
--- a/assets/scss/components/stencil/productView/_productView.scss
+++ b/assets/scss/components/stencil/productView/_productView.scss
@@ -121,7 +121,8 @@
 // -----------------------------------------------------------------------------
 
 .productView-details {
-    margin-bottom: spacing("single") + spacing("third");
+    padding-bottom: spacing("single") + spacing("third");
+    overflow: hidden; // for Androind Chrome horizontal scroll fix
 }
 
 
@@ -278,7 +279,6 @@
     @include clearfix;
     margin-bottom: spacing("single");
     text-align: center;
-    overflow: hidden; // for Androind Chrome horizontal scroll fix
 
     @include breakpoint("small") {
         text-align: left;
diff --git a/assets/scss/tools/_theme_focus.scss b/assets/scss/tools/_theme_focus.scss
new file mode 100644
index 0000000000..d52542c731
--- /dev/null
+++ b/assets/scss/tools/_theme_focus.scss
@@ -0,0 +1,29 @@
+// =============================================================================
+// THEME FOCUS (global)
+// =============================================================================
+
+$outline-width:  2px;
+$outline-style:  solid;
+$outline-color:  #2E8FFF;
+$outline-offset: 1px;
+
+input,
+button,
+textarea,
+select,
+details,
+[href],
+[tabindex]:not([tabindex="-1"]),
+[contenteditable="true"] {        
+    &:focus {
+        outline: $outline-width $outline-style $outline-color !important;
+        outline-offset: $outline-offset !important;        
+    }
+}
+
+label {
+    input:focus + & {
+        outline: $outline-width $outline-style $outline-color !important;
+        outline-offset: $outline-offset !important;        
+    }
+}
diff --git a/assets/scss/tools/_tools.scss b/assets/scss/tools/_tools.scss
index d360e7298d..553b4a4b9d 100644
--- a/assets/scss/tools/_tools.scss
+++ b/assets/scss/tools/_tools.scss
@@ -2,3 +2,4 @@
 @import "string";
 @import "image";
 @import "aria";
+@import "theme_focus";