flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Button control: Add Hover classes (triggered by JS)
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Félix Péault
2020-03-06 11:15:45 +01:00
parent 9a5c8a135e
commit ebafb359ae
1 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/style/atoms/_button-control.scss
View File

@@ -48,21 +48,21 @@
&--white { &--white {
background-color: #fff; background-color: #fff;
&:hover, &:focus { &:hover, &.hover {
background-color: $color-secondary; background-color: $color-secondary;
} }
} }
&--pink { &--pink {
background-color: rgba($color-secondary, 0.4); background-color: rgba($color-secondary, 0.4);
&:hover, &:focus { &:hover, &.hover {
background-color: rgba($color-secondary, 0.75); background-color: rgba($color-secondary, 0.75);
} }
} }
&--gray { &--gray {
background-color: $color-gray; background-color: $color-gray;
&:hover, &:focus { &:hover, &.hover {
background-color: $color-text; background-color: $color-text;
} }
} }
@@ -77,7 +77,7 @@
transform: translate(100%, -50%); transform: translate(100%, -50%);
} }
&:hover, &:focus { &:hover, &.hover {
.icon:not([aria-hidden]) { .icon:not([aria-hidden]) {
opacity: 0; opacity: 0;
transform: translate(-100%, 0); transform: translate(-100%, 0);
@@ -94,7 +94,7 @@
transform: translate(-150%, -50%); transform: translate(-150%, -50%);
} }
&:hover, &:focus { &:hover, &.hover {
.icon:not([aria-hidden]) { .icon:not([aria-hidden]) {
opacity: 0; opacity: 0;
transform: translate(100%, 0); transform: translate(100%, 0);
@@ -112,7 +112,7 @@
transform: translate(0, -150%); transform: translate(0, -150%);
} }
&:hover, &:focus { &:hover, &.hover {
.icon:not([aria-hidden]) { .icon:not([aria-hidden]) {
opacity: 0; opacity: 0;
transform: translate(0, 100%); transform: translate(0, 100%);
@@ -130,7 +130,7 @@
transform: translate(0, 150%); transform: translate(0, 150%);
} }
&:hover, &:focus { &:hover, &.hover {
.icon:not([aria-hidden]) { .icon:not([aria-hidden]) {
opacity: 0; opacity: 0;
transform: translate(0, -100%); transform: translate(0, -100%);