odit/mailymaily
4
0
Fork 0
Code Issues Pull Requests Projects Releases 2 Wiki Activity

starting with changes for accessibility :active (#51)

Browse Source
This commit is contained in:
Matteo Manzinello 2020-07-29 09:36:34 +02:00
parent 5999d5c3cb
commit 0905ff752d
11 changed files with 64 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/mailgo.dark.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/mailgo.dark.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/mailgo.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/mailgo.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
extensions/mailgo.chrome.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
extensions/mailgo.chrome.min.js.map
View File

File diff suppressed because one or more lines are too long

2
extensions/mailgo.firefox.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
extensions/mailgo.firefox.min.js.map
View File

File diff suppressed because one or more lines are too long

6
lib/mailgo.js
View File

File diff suppressed because one or more lines are too long

2
lib/mailgo.js.map
View File

File diff suppressed because one or more lines are too long

70
src/mailgo.scss
View File

@ -78,7 +78,9 @@ $default-border-radius: 20px;
padding: 24px; padding: 24px;
transition: 0.5s box-shadow; transition: 0.5s box-shadow;
&:hover { &:hover,
&:focus,
&:active {
opacity: 1; opacity: 1;
} }
@ -108,7 +110,9 @@ $default-border-radius: 20px;
&.m-gmail { &.m-gmail {
color: $gmail-color; color: $gmail-color;
&:hover { &:hover,
&:focus,
&:active {
background-color: rgba(212, 70, 56, 0.08); background-color: rgba(212, 70, 56, 0.08);
color: $gmail-color; color: $gmail-color;
} }
@ -116,7 +120,9 @@ $default-border-radius: 20px;
&.m-outlook { &.m-outlook {
color: $outlook-color; color: $outlook-color;
&:hover { &:hover,
&:focus,
&:active {
background-color: rgba(0, 114, 198, 0.08); background-color: rgba(0, 114, 198, 0.08);
color: $outlook-color; color: $outlook-color;
} }
@ -124,7 +130,9 @@ $default-border-radius: 20px;
&.m-tg { &.m-tg {
color: $telegram-color; color: $telegram-color;
&:hover { &:hover,
&:focus,
&:active {
background-color: rgba(0, 136, 204, 0.08); background-color: rgba(0, 136, 204, 0.08);
color: $telegram-color; color: $telegram-color;
} }
@ -132,7 +140,9 @@ $default-border-radius: 20px;
&.m-wa { &.m-wa {
color: $wa-color; color: $wa-color;
&:hover { &:hover,
&:focus,
&:active {
background-color: rgba(0, 191, 165, 0.08); background-color: rgba(0, 191, 165, 0.08);
color: $wa-color; color: $wa-color;
} }
@ -140,7 +150,9 @@ $default-border-radius: 20px;
&.m-skype { &.m-skype {
color: $skype-color; color: $skype-color;
&:hover { &:hover,
&:focus,
&:active {
background-color: rgba(0, 175, 240, 0.08); background-color: rgba(0, 175, 240, 0.08);
color: $skype-color; color: $skype-color;
} }
@ -151,10 +163,14 @@ $default-border-radius: 20px;
font-size: 16px; font-size: 16px;
} }
&.m-default:hover, &.m-default,
&.m-copy:hover { &.m-copy {
background-color: rgba(0, 0, 0, 0.08); &:hover,
color: $default-color; &:focus,
&:active {
background-color: rgba(0, 0, 0, 0.08);
color: $default-color;
}
} }
&.m-by { &.m-by {
@ -163,7 +179,9 @@ $default-border-radius: 20px;
padding: 5px; padding: 5px;
color: $default-color; color: $default-color;
opacity: 0.55; opacity: 0.55;
&:hover { &:hover,
&:focus,
&:active {
opacity: 1; opacity: 1;
} }
} }
@ -186,15 +204,21 @@ $default-border-radius: 20px;
a { a {
color: $default-dark-color; color: $default-dark-color;
&:not(.m-by):hover { &:not(.m-by) {
background-color: rgba(134, 134, 134, 0.08); &:hover,
color: $default-dark-color; &:focus,
&:active {
background-color: rgba(134, 134, 134, 0.08);
color: $default-dark-color;
}
} }
&.m-gmail { &.m-gmail {
color: $gmail-dark-color; color: $gmail-dark-color;
&:hover { &:hover,
&:focus,
&:active {
background-color: rgba(212, 70, 56, 0.08); background-color: rgba(212, 70, 56, 0.08);
color: $gmail-dark-color; color: $gmail-dark-color;
} }
@ -203,7 +227,9 @@ $default-border-radius: 20px;
&.m-outlook { &.m-outlook {
color: $outlook-dark-color; color: $outlook-dark-color;
&:hover { &:hover,
&:focus,
&:active {
background-color: rgba(0, 114, 198, 0.08); background-color: rgba(0, 114, 198, 0.08);
color: $outlook-dark-color; color: $outlook-dark-color;
} }
@ -212,7 +238,9 @@ $default-border-radius: 20px;
&.m-tg { &.m-tg {
color: $telegram-dark-color; color: $telegram-dark-color;
&:hover { &:hover,
&:focus,
&:active {
background-color: rgba(0, 136, 204, 0.08); background-color: rgba(0, 136, 204, 0.08);
color: $telegram-dark-color; color: $telegram-dark-color;
} }
@ -221,7 +249,9 @@ $default-border-radius: 20px;
&.m-wa { &.m-wa {
color: $wa-dark-color; color: $wa-dark-color;
&:hover { &:hover,
&:focus,
&:active {
background-color: rgba(0, 191, 165, 0.08); background-color: rgba(0, 191, 165, 0.08);
color: $wa-dark-color; color: $wa-dark-color;
} }
@ -230,7 +260,9 @@ $default-border-radius: 20px;
&.m-skype { &.m-skype {
color: $skype-dark-color; color: $skype-dark-color;
&:hover { &:hover,
&:focus,
&:active {
background-color: rgba(0, 175, 240, 0.08); background-color: rgba(0, 175, 240, 0.08);
color: $skype-dark-color; color: $skype-dark-color;
} }