From 510d5e12c3c02d12f217e9c7a0356f8e2c86de48 Mon Sep 17 00:00:00 2001
From: jholt1 <jonathan.holt@centrica.com>
Date: Mon, 24 Jan 2022 16:12:38 +0000
Subject: [PATCH] fix: css linting

---
 packages/library/components/cta/src/styles.css      | 10 +++++++---
 packages/library/components/detail/src/styles.css   | 10 +++++++---
 packages/library/components/icon/src/styles.css     |  2 +-
 packages/library/components/image/src/styles.css    |  6 +++---
 packages/library/components/inputter/src/styles.css |  2 +-
 packages/library/css/default.css                    |  2 +-
 6 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/packages/library/components/cta/src/styles.css b/packages/library/components/cta/src/styles.css
index 25a505f2..83864ca8 100644
--- a/packages/library/components/cta/src/styles.css
+++ b/packages/library/components/cta/src/styles.css
@@ -1,4 +1,4 @@
-@import '@muons/library/css/default.css';
+@import "@muons/library/css/default.css";
 
 :host {
   display: inline-block;
@@ -50,14 +50,18 @@
     }
 
     & :focus:not(:focus-visible) {
-      outline: none; /* https://matthiasott.com/notes/focus-visible-is-here and https://www.tpgi.com/focus-visible-and-backwards-compatibility/ */
+      /*
+        https://matthiasott.com/notes/focus-visible-is-here and
+        https://www.tpgi.com/focus-visible-and-backwards-compatibility/
+      */
+      outline: none;
     }
 
     &:focus-visible {
+      outline: 3px;
       outline-color: $CTA_FOCUS_OUTLINE_COLOR;
       outline-offset: 0; /* Chrome by default adds a 1px offset on the `<a>` */
       outline-style: solid;
-      outline-width: 3px;
       text-decoration: underline;
     }
 
diff --git a/packages/library/components/detail/src/styles.css b/packages/library/components/detail/src/styles.css
index 7378171b..a7c2eb2c 100644
--- a/packages/library/components/detail/src/styles.css
+++ b/packages/library/components/detail/src/styles.css
@@ -1,4 +1,4 @@
-@import '@muons/library/css/default.css';
+@import "@muons/library/css/default.css";
 
 :host {
   display: block;
@@ -42,16 +42,20 @@
     }
 
     & :focus:not(:focus-visible) {
-      outline: none; /* https://matthiasott.com/notes/focus-visible-is-here and https://www.tpgi.com/focus-visible-and-backwards-compatibility/ */
+      /*
+         https://matthiasott.com/notes/focus-visible-is-here and
+         https://www.tpgi.com/focus-visible-and-backwards-compatibility/
+      */
+      outline: none;
     }
 
     &:focus-visible {
       background-color: $DETAIL_FOCUS_BACKGROUND_COLOR;
       color: $DETAIL_FOCUS_COLOR;
+      outline: 3px;
       outline-color: $DETAIL_FOCUS_OUTLINE_COLOR;
       outline-offset: 0; /* Chrome by default adds a 1px offset on the `<a>` */
       outline-style: solid;
-      outline-width: 3px;
       text-decoration: underline;
     }
   }
diff --git a/packages/library/components/icon/src/styles.css b/packages/library/components/icon/src/styles.css
index 96e6a1fe..34910bcb 100644
--- a/packages/library/components/icon/src/styles.css
+++ b/packages/library/components/icon/src/styles.css
@@ -1,4 +1,4 @@
-@import '@muons/library/css/default.css';
+@import "@muons/library/css/default.css";
 
 :host {
   display: inline-block;
diff --git a/packages/library/components/image/src/styles.css b/packages/library/components/image/src/styles.css
index 9712fee0..5f26fac4 100644
--- a/packages/library/components/image/src/styles.css
+++ b/packages/library/components/image/src/styles.css
@@ -1,4 +1,4 @@
-@import '@muons/library/css/default.css';
+@import "@muons/library/css/default.css";
 
 :host {
   display: block;
@@ -29,7 +29,7 @@
     }
 
     & .blur-out {
-      animation: blurOut 0.5s ease-out;
+      animation: blur-out 0.5s ease-out;
     }
 
     & .image-holder,
@@ -60,7 +60,7 @@
   }
 }
 
-@keyframes blurOut {
+@keyframes blur-out {
   0% {
     filter: blur(0.7em);
   }
diff --git a/packages/library/components/inputter/src/styles.css b/packages/library/components/inputter/src/styles.css
index 8dd49ffb..85c47755 100644
--- a/packages/library/components/inputter/src/styles.css
+++ b/packages/library/components/inputter/src/styles.css
@@ -1,4 +1,4 @@
-@import '@muons/library/css/default.css';
+@import "@muons/library/css/default.css";
 
 :host {
   display: block;
diff --git a/packages/library/css/default.css b/packages/library/css/default.css
index bb2badc8..16841b9a 100644
--- a/packages/library/css/default.css
+++ b/packages/library/css/default.css
@@ -1,4 +1,4 @@
-@import 'accessibility.css';
+@import "accessibility.css";
 
 :host {
   font-family: $THEME_FONT_FAMILY_DEFAULT;