46 lines
788 B
CSS
46 lines
788 B
CSS
.button {
|
|
--icon-width: 32px;
|
|
--gap: 8px;
|
|
border-radius: 0;
|
|
border: none;
|
|
padding: 8px 16px;
|
|
display: inline-flex;
|
|
flex-flow: row;
|
|
align-items: center;
|
|
gap: 8px;
|
|
text-decoration: none;
|
|
margin: 4px;
|
|
cursor: pointer;
|
|
color: var(--button-fg-color);
|
|
|
|
&:hover {
|
|
filter: brightness(1.1);
|
|
}
|
|
|
|
&[disabled] {
|
|
opacity: 0.5;
|
|
pointer-events: none;
|
|
}
|
|
|
|
svg * {
|
|
fill: var(--button-fg-color) !important;
|
|
}
|
|
}
|
|
|
|
.button--centered {
|
|
span {
|
|
text-align: center;
|
|
margin-right: calc(var(--gap) + var(--icon-width));
|
|
}
|
|
}
|
|
|
|
.button--color-accent1 {
|
|
background-color: var(--color-brand-accent);
|
|
--button-fg-color: var(--color-brand-text-on-accent);
|
|
}
|
|
|
|
.button--color-accent2 {
|
|
background-color: var(--color-brand-accent2);
|
|
--button-fg-color: var(--color-brand-text-on-accent2);
|
|
}
|