Carousel: Create a bigger hover/click area for controls

This commit is contained in:
2020-02-14 10:13:20 +01:00
parent ef23d90eb6
commit dfcc3f9f7a
3 changed files with 47 additions and 37 deletions

View File

@@ -46,21 +46,21 @@
&--white {
background-color: #fff;
&:hover {
&:hover, &:focus {
background-color: $color-secondary;
}
}
&--pink {
background-color: rgba($color-secondary, 0.4);
&:hover {
&:hover, &:focus {
background-color: rgba($color-secondary, 0.75);
}
}
&--gray {
background-color: $color-gray;
&:hover {
&:hover, &:focus {
background-color: $color-text;
}
}
@@ -75,7 +75,7 @@
transform: translate3d(100%, -50%, 0);
}
&:hover {
&:hover, &:focus {
.icon:not([aria-hidden]) {
opacity: 0;
transform: translate3d(-100%, 0, 0);
@@ -92,7 +92,7 @@
transform: translate3d(-150%, -50%, 0);
}
&:hover {
&:hover, &:focus {
.icon:not([aria-hidden]) {
opacity: 0;
transform: translate3d(100%, 0, 0);
@@ -110,7 +110,7 @@
transform: translate3d(0, -150%, 0);
}
&:hover {
&:hover, &:focus {
.icon:not([aria-hidden]) {
opacity: 0;
transform: translate3d(0, 100%, 0);
@@ -128,7 +128,7 @@
transform: translate3d(0, 150%, 0);
}
&:hover {
&:hover, &:focus {
.icon:not([aria-hidden]) {
opacity: 0;
transform: translate3d(0, -100%, 0);
@@ -178,7 +178,7 @@
}
// Hover
&:hover {
&:hover, &:focus {
background-color: rgba($color-lightpurple, 0.65);
* {