Add hovers and fix some styles on Photos filters

This commit is contained in:
2021-10-04 13:07:23 +02:00
parent a65a68bb11
commit b1e9c7da0c

View File

@@ -44,7 +44,7 @@
@include bp (sm) { @include bp (sm) {
position: absolute; position: absolute;
left: 64px; left: 64px;
top: 50%; top: 52%;
transform: translateY(-50%); transform: translateY(-50%);
margin-bottom: 0; margin-bottom: 0;
} }
@@ -54,8 +54,9 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 72px;
margin: 20px 0; margin: 20px 0;
padding: 20px 22px; padding: 0 22px;
background: $color-primary-darker; background: $color-primary-darker;
border-radius: 50vh; border-radius: 50vh;
@@ -76,7 +77,7 @@
color: #fff; color: #fff;
@include bp (sm) { @include bp (sm) {
margin: 0 16px; margin: 0 2px;
} }
} }
img { img {
@@ -90,7 +91,12 @@
.select { .select {
position: relative; position: relative;
display: flex;
align-items: center;
padding: 8px 16px;
font-weight: 900; font-weight: 900;
border-radius: 100vh;
transition: background-color 0.2s;
select { select {
opacity: 0; opacity: 0;
@@ -101,6 +107,10 @@
height: 100%; height: 100%;
cursor: pointer; cursor: pointer;
} }
&:hover {
background-color: $color-primary-tertiary20;
}
} }
} }
@@ -112,8 +122,8 @@
@include bp (sm) { @include bp (sm) {
position: absolute; position: absolute;
right: 64px;
top: 50%; top: 50%;
right: 56px;
transform: translateY(-50%); transform: translateY(-50%);
} }
@@ -129,6 +139,17 @@
display: block; display: block;
} }
} }
// Reset link
.reset {
transition: color 0.3s;
&:hover {
color: $color-tertiary;
}
}
// Shuffle button
.shuffle { .shuffle {
display: flex; display: flex;
align-items: center; align-items: center;