Add active state to the footer socials
And use "transform" for transforms since e.g setting scale directly is not widely supported by browsers (baseline 2022)
This commit is contained in:
@ -3,7 +3,7 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
&.draft {
|
&.draft {
|
||||||
scale: 0.95;
|
transform: scale(0.95);
|
||||||
opacity: 0.6;
|
opacity: 0.6;
|
||||||
transition: var(--transition-longer);
|
transition: var(--transition-longer);
|
||||||
outline: 2px dashed var(--fg-muted-2);
|
outline: 2px dashed var(--fg-muted-2);
|
||||||
@ -11,7 +11,7 @@
|
|||||||
border-radius: 1rem;
|
border-radius: 1rem;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
scale: 1;
|
transform: scale(1);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
outline: 2px dashed transparent;
|
outline: 2px dashed transparent;
|
||||||
outline-offset: 0;
|
outline-offset: 0;
|
||||||
|
@ -175,7 +175,7 @@ section#comments {
|
|||||||
background-color: var(--boosts-bg);
|
background-color: var(--boosts-bg);
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
rotate: 180deg;
|
transform: rotate(180deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -187,7 +187,7 @@ section#comments {
|
|||||||
background-color: var(--faves-bg);
|
background-color: var(--faves-bg);
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
rotate: 72deg;
|
transform: rotate(72deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -60,6 +60,10 @@
|
|||||||
background-color: var(--primary-color);
|
background-color: var(--primary-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: scale(var(--active));
|
||||||
|
}
|
||||||
|
|
||||||
span {
|
span {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user