Merge pull request #181 from devgeniem/TMS-1160

eebbi · web-flow · commit 5795d14d9325 · 2025-08-13T19:13:20.000+03:00
TMS-1160: Fix elements focus outline thickness
diff --git a/CHANGELOG.MD b/CHANGELOG.MD
@@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+- TMS-1160: Fix elements focus outline thickness
+
 ## [1.12.0] - 2025-06-23
 
 - TMS-1172: Add video-fields and functionality to hero-component
diff --git a/assets/styles/blocks/_table.scss b/assets/styles/blocks/_table.scss
@@ -22,8 +22,8 @@
 
 table.idc-element {
     &:focus {
-        outline: 0.125rem dotted #000;
-        outline-offset: -0.125rem;
+        outline: 0.15rem dotted #000;
+        outline-offset: -0.15rem;
         position: relative;
     }
 }
diff --git a/assets/styles/layouts/_image-carousel.scss b/assets/styles/layouts/_image-carousel.scss
@@ -102,5 +102,5 @@
 }
 
 .slick-track .modal-trigger:focus {
-    outline: 0.125rem dotted #000000;
+    outline: 0.15rem dotted #000000;
 }
diff --git a/assets/styles/settings/brand/_typography.scss b/assets/styles/settings/brand/_typography.scss
@@ -165,7 +165,7 @@ main {
         text-underline-offset: .125rem;
 
         &:focus {
-            outline: .125rem dotted $link-outline-color !important;
+            outline: .15rem dotted $link-outline-color !important;
             outline-offset: .125rem;
             text-decoration: none !important;
         }
diff --git a/assets/styles/ui-components/_button.scss b/assets/styles/ui-components/_button.scss
@@ -38,7 +38,7 @@ $button-secondary-border-color: $button-primary-border-color;
     &:focus,
     &.is-focused {
         border-color: $button-primary-border-color !important;
-        outline: .125rem dotted $black !important;
+        outline: .15rem dotted $black !important;
         outline-offset: .25rem !important;
     }
 
diff --git a/assets/styles/ui-components/_forms.scss b/assets/styles/ui-components/_forms.scss
@@ -110,7 +110,7 @@ select {
         border-color: $black !important;
         background-color: $white !important;
         color: $black !important;
-        outline: 0.125rem dotted $black !important;
+        outline: 0.15rem dotted $black !important;
         outline-offset: 0.25rem !important;
     }
 }
diff --git a/assets/styles/ui-components/_image-gallery.scss b/assets/styles/ui-components/_image-gallery.scss
@@ -9,7 +9,7 @@
 
         &:focus {
             outline-offset: 0.25rem !important;
-            outline: .125rem dotted $white !important;
+            outline: .15rem dotted $white !important;
         }
 
         .icon {
@@ -71,6 +71,6 @@
     }
 
     &:focus {
-        outline: .125rem dotted $white !important;
+        outline: .15rem dotted $white !important;
     }
 }
diff --git a/assets/styles/ui-components/_modal.scss b/assets/styles/ui-components/_modal.scss
@@ -6,7 +6,7 @@
             fill: $black !important;
         }
         &:focus {
-            outline: 0.125rem dotted $white !important;
+            outline: 0.15rem dotted $white !important;
             outline-offset: 0.25rem !important;
             color: $primary !important; // sass-lint:disable-line no-important
             .icon {
@@ -42,7 +42,7 @@
             }
         }
         &:focus {
-            outline: 0.125rem dotted $white !important;
+            outline: 0.15rem dotted $white !important;
             outline-offset: 0.25rem !important;
         }
 
@@ -93,7 +93,7 @@
         .slick-current {
             &:focus {
                 .image-carousel__item {
-                    outline: 0.125rem dotted #fff;
+                    outline: 0.15rem dotted #fff;
                     outline-offset: 0.25rem;
                 }
             }
diff --git a/assets/styles/ui-components/header/_header-top.scss b/assets/styles/ui-components/header/_header-top.scss
@@ -26,7 +26,7 @@
         > a {
             &:focus {
                 outline-offset: .2rem;
-                outline: .125rem dotted $white !important;
+                outline: .15rem dotted $white !important;
             }
         }
     }
diff --git a/assets/styles/ui-components/header/_language-nav.scss b/assets/styles/ui-components/header/_language-nav.scss
@@ -62,7 +62,7 @@
 
             &:focus {
                 outline-offset: .2rem;
-                outline: .125rem dotted $white !important;
+                outline: .15rem dotted $white !important;
             }
         }
     }
diff --git a/assets/styles/ui-components/header/_site-header-notice.scss b/assets/styles/ui-components/header/_site-header-notice.scss
@@ -11,7 +11,7 @@
 
         &:focus,
         .is-focus {
-            outline: .125rem dotted $white !important;
+            outline: .15rem dotted $white !important;
         }
     }
 }

Original file line number	Diff line number	Diff line change
`@@ -22,8 +22,8 @@`
`22`	`22`
`23`	`23`	`table.idc-element {`
`24`	`24`	`&:focus {`
`25`		`- outline: 0.125rem dotted #000;`
`26`		`- outline-offset: -0.125rem;`
	`25`	`+ outline: 0.15rem dotted #000;`
	`26`	`+ outline-offset: -0.15rem;`
`27`	`27`	`position: relative;`
`28`	`28`	`}`
`29`	`29`	`}`
Original file line number	Diff line number	Diff line change
`@@ -102,5 +102,5 @@`
`102`	`102`	`}`
`103`	`103`
`104`	`104`	`.slick-track .modal-trigger:focus {`
`105`		`- outline: 0.125rem dotted #000000;`
	`105`	`+ outline: 0.15rem dotted #000000;`
`106`	`106`	`}`
Original file line number	Diff line number	Diff line change
`@@ -165,7 +165,7 @@ main {`
`165`	`165`	`text-underline-offset: .125rem;`
`166`	`166`
`167`	`167`	`&:focus {`
`168`		`- outline: .125rem dotted $link-outline-color !important;`
	`168`	`+ outline: .15rem dotted $link-outline-color !important;`
`169`	`169`	`outline-offset: .125rem;`
`170`	`170`	`text-decoration: none !important;`
`171`	`171`	`}`
Original file line number	Diff line number	Diff line change
`@@ -38,7 +38,7 @@ $button-secondary-border-color: $button-primary-border-color;`
`38`	`38`	`&:focus,`
`39`	`39`	`&.is-focused {`
`40`	`40`	`border-color: $button-primary-border-color !important;`
`41`		`- outline: .125rem dotted $black !important;`
	`41`	`+ outline: .15rem dotted $black !important;`
`42`	`42`	`outline-offset: .25rem !important;`
`43`	`43`	`}`
`44`	`44`
Original file line number	Diff line number	Diff line change
`@@ -110,7 +110,7 @@ select {`
`110`	`110`	`border-color: $black !important;`
`111`	`111`	`background-color: $white !important;`
`112`	`112`	`color: $black !important;`
`113`		`- outline: 0.125rem dotted $black !important;`
	`113`	`+ outline: 0.15rem dotted $black !important;`
`114`	`114`	`outline-offset: 0.25rem !important;`
`115`	`115`	`}`
`116`	`116`	`}`
Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,7 @@`
`9`	`9`
`10`	`10`	`&:focus {`
`11`	`11`	`outline-offset: 0.25rem !important;`
`12`		`- outline: .125rem dotted $white !important;`
	`12`	`+ outline: .15rem dotted $white !important;`
`13`	`13`	`}`
`14`	`14`
`15`	`15`	`.icon {`
`@@ -71,6 +71,6 @@`
`71`	`71`	`}`
`72`	`72`
`73`	`73`	`&:focus {`
`74`		`- outline: .125rem dotted $white !important;`
	`74`	`+ outline: .15rem dotted $white !important;`
`75`	`75`	`}`
`76`	`76`	`}`
Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@`
`6`	`6`	`fill: $black !important;`
`7`	`7`	`}`
`8`	`8`	`&:focus {`
`9`		`- outline: 0.125rem dotted $white !important;`
	`9`	`+ outline: 0.15rem dotted $white !important;`
`10`	`10`	`outline-offset: 0.25rem !important;`
`11`	`11`	`color: $primary !important; // sass-lint:disable-line no-important`
`12`	`12`	`.icon {`
`@@ -42,7 +42,7 @@`
`42`	`42`	`}`
`43`	`43`	`}`
`44`	`44`	`&:focus {`
`45`		`- outline: 0.125rem dotted $white !important;`
	`45`	`+ outline: 0.15rem dotted $white !important;`
`46`	`46`	`outline-offset: 0.25rem !important;`
`47`	`47`	`}`
`48`	`48`
`@@ -93,7 +93,7 @@`
`93`	`93`	`.slick-current {`
`94`	`94`	`&:focus {`
`95`	`95`	`.image-carousel__item {`
`96`		`- outline: 0.125rem dotted #fff;`
	`96`	`+ outline: 0.15rem dotted #fff;`
`97`	`97`	`outline-offset: 0.25rem;`
`98`	`98`	`}`
`99`	`99`	`}`
Original file line number	Diff line number	Diff line change
`@@ -26,7 +26,7 @@`
`26`	`26`	`> a {`
`27`	`27`	`&:focus {`
`28`	`28`	`outline-offset: .2rem;`
`29`		`- outline: .125rem dotted $white !important;`
	`29`	`+ outline: .15rem dotted $white !important;`
`30`	`30`	`}`
`31`	`31`	`}`
`32`	`32`	`}`
Original file line number	Diff line number	Diff line change
`@@ -62,7 +62,7 @@`
`62`	`62`
`63`	`63`	`&:focus {`
`64`	`64`	`outline-offset: .2rem;`
`65`		`- outline: .125rem dotted $white !important;`
	`65`	`+ outline: .15rem dotted $white !important;`
`66`	`66`	`}`
`67`	`67`	`}`
`68`	`68`	`}`