starting with changes for accessibility :active (#51)

manzinello · Jul 29, 2020 · 0905ff7 · 0905ff7
1 parent 5999d5c
commit 0905ff7
Show file tree

Hide file tree

Showing 11 changed files with 64 additions and 30 deletions.
diff --git a/dist/mailgo.dark.min.js b/dist/mailgo.dark.min.js
diff --git a/dist/mailgo.dark.min.js.map b/dist/mailgo.dark.min.js.map
diff --git a/dist/mailgo.min.js b/dist/mailgo.min.js
diff --git a/dist/mailgo.min.js.map b/dist/mailgo.min.js.map
diff --git a/extensions/mailgo.chrome.min.js b/extensions/mailgo.chrome.min.js
diff --git a/extensions/mailgo.chrome.min.js.map b/extensions/mailgo.chrome.min.js.map
diff --git a/extensions/mailgo.firefox.min.js b/extensions/mailgo.firefox.min.js
diff --git a/extensions/mailgo.firefox.min.js.map b/extensions/mailgo.firefox.min.js.map
diff --git a/lib/mailgo.js b/lib/mailgo.js
diff --git a/lib/mailgo.js.map b/lib/mailgo.js.map
diff --git a/src/mailgo.scss b/src/mailgo.scss
@@ -78,7 +78,9 @@ $default-border-radius: 20px;
     padding: 24px;
     transition: 0.5s box-shadow;
 
-    &:hover {
+    &:hover,
+    &:focus,
+    &:active {
       opacity: 1;
     }
 
@@ -108,39 +110,49 @@ $default-border-radius: 20px;
 
       &.m-gmail {
         color: $gmail-color;
-        &:hover {
+        &:hover,
+        &:focus,
+        &:active {
           background-color: rgba(212, 70, 56, 0.08);
           color: $gmail-color;
         }
       }
 
       &.m-outlook {
         color: $outlook-color;
-        &:hover {
+        &:hover,
+        &:focus,
+        &:active {
           background-color: rgba(0, 114, 198, 0.08);
           color: $outlook-color;
         }
       }
 
       &.m-tg {
         color: $telegram-color;
-        &:hover {
+        &:hover,
+        &:focus,
+        &:active {
           background-color: rgba(0, 136, 204, 0.08);
           color: $telegram-color;
         }
       }
 
       &.m-wa {
         color: $wa-color;
-        &:hover {
+        &:hover,
+        &:focus,
+        &:active {
           background-color: rgba(0, 191, 165, 0.08);
           color: $wa-color;
         }
       }
 
       &.m-skype {
         color: $skype-color;
-        &:hover {
+        &:hover,
+        &:focus,
+        &:active {
           background-color: rgba(0, 175, 240, 0.08);
           color: $skype-color;
         }
@@ -151,10 +163,14 @@ $default-border-radius: 20px;
         font-size: 16px;
       }
 
-      &.m-default:hover,
-      &.m-copy:hover {
-        background-color: rgba(0, 0, 0, 0.08);
-        color: $default-color;
+      &.m-default,
+      &.m-copy {
+        &:hover,
+        &:focus,
+        &:active {
+          background-color: rgba(0, 0, 0, 0.08);
+          color: $default-color;
+        }
       }
 
       &.m-by {
@@ -163,7 +179,9 @@ $default-border-radius: 20px;
         padding: 5px;
         color: $default-color;
         opacity: 0.55;
-        &:hover {
+        &:hover,
+        &:focus,
+        &:active {
           opacity: 1;
         }
       }
@@ -186,15 +204,21 @@ $default-border-radius: 20px;
       a {
         color: $default-dark-color;
 
-        &:not(.m-by):hover {
-          background-color: rgba(134, 134, 134, 0.08);
-          color: $default-dark-color;
+        &:not(.m-by) {
+          &:hover,
+          &:focus,
+          &:active {
+            background-color: rgba(134, 134, 134, 0.08);
+            color: $default-dark-color;
+          }
         }
 
         &.m-gmail {
           color: $gmail-dark-color;
 
-          &:hover {
+          &:hover,
+          &:focus,
+          &:active {
             background-color: rgba(212, 70, 56, 0.08);
             color: $gmail-dark-color;
           }
@@ -203,7 +227,9 @@ $default-border-radius: 20px;
         &.m-outlook {
           color: $outlook-dark-color;
 
-          &:hover {
+          &:hover,
+          &:focus,
+          &:active {
             background-color: rgba(0, 114, 198, 0.08);
             color: $outlook-dark-color;
           }
@@ -212,7 +238,9 @@ $default-border-radius: 20px;
         &.m-tg {
           color: $telegram-dark-color;
 
-          &:hover {
+          &:hover,
+          &:focus,
+          &:active {
             background-color: rgba(0, 136, 204, 0.08);
             color: $telegram-dark-color;
           }
@@ -221,7 +249,9 @@ $default-border-radius: 20px;
         &.m-wa {
           color: $wa-dark-color;
 
-          &:hover {
+          &:hover,
+          &:focus,
+          &:active {
             background-color: rgba(0, 191, 165, 0.08);
             color: $wa-dark-color;
           }
@@ -230,7 +260,9 @@ $default-border-radius: 20px;
         &.m-skype {
           color: $skype-dark-color;
 
-          &:hover {
+          &:hover,
+          &:focus,
+          &:active {
             background-color: rgba(0, 175, 240, 0.08);
             color: $skype-dark-color;
           }