coryd.dev/src/assets/styles/components/buttons.css
Cory Dransfeldt efe701f939
feat(*.liquid): apply prettier to liquid templates
- offer to create tag when none is found while adding a link from cli
- fix tag display in search
2025-06-16 14:41:29 -07:00

41 lines
1.2 KiB
CSS

@import url("./text-toggle.css");
button:not([data-dialog-button]),
.button {
appearance: none;
border: 2px solid var(--section-color, var(--accent-color));
border-radius: var(--border-radius-slight);
padding: var(--spacing-xs) var(--spacing-md);
font-size: var(--font-size-base);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-md);
text-align: center;
text-decoration: none;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
color: var(--text-color-inverted);
background-color: var(--section-color, var(--accent-color));
transition: transform var(--transition-duration-default) var(--transition-ease-in-out);
@media (prefers-reduced-motion) {
transition:
border-color var(--transition-duration-default) var(--transition-ease-in-out),
background-color var(--transition-duration-default) var(--transition-ease-in-out);
}
&:not(.active):is(:hover, :active, :focus, :focus-within) {
transform: translateY(var(--button-offset-hover));
@media (prefers-reduced-motion) {
transform: none;
border-color: var(--accent-color-hover);
background-color: var(--accent-color-hover);
}
}
&.active {
background: transparent;
color: var(--accent-color);
}
}