71 lines
1.2 KiB
SCSS
71 lines
1.2 KiB
SCSS
div.button-stack {
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--gap);
|
|
max-width: 75%;
|
|
justify-content: center;
|
|
|
|
@media (max-width: 750px) {
|
|
max-width: unset;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: var(--text);
|
|
}
|
|
}
|
|
|
|
div.button {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--gap);
|
|
padding: 0.5rem 1rem;
|
|
border: 1px solid var(--primary);
|
|
border-radius: 10px;
|
|
transition: 0.1s ease-in-out;
|
|
cursor: default;
|
|
|
|
&.link {
|
|
cursor: pointer;
|
|
}
|
|
|
|
&:active {
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
img {
|
|
max-width: 20px;
|
|
max-height: 20px;
|
|
transition: filter 0.1s;
|
|
}
|
|
|
|
&:not(.noeffects) img {
|
|
filter: var(--dark-invert);
|
|
}
|
|
|
|
&:not(.noeffects):hover,
|
|
&.primary {
|
|
background: var(--text);
|
|
color: var(--secondary);
|
|
box-shadow: 0 0 5px var(--text);
|
|
|
|
img {
|
|
filter: var(--light-invert);
|
|
}
|
|
}
|
|
|
|
&:not(.noeffects).primary:hover {
|
|
background: transparent;
|
|
color: var(--text);
|
|
|
|
img {
|
|
filter: var(--dark-invert);
|
|
}
|
|
}
|
|
|
|
&.disabled {
|
|
opacity: 0.4;
|
|
cursor: not-allowed;
|
|
}
|
|
} |