11ty-resume/src/css/components/_button.scss

38 lines
913 B
SCSS

button, .btn {
--hover: rgba(var(--neutral-highest), .8);
--active: rgba(var(--neutral-highest), .8);
text-decoration: none;
transition: background-color .1s ease-in-out;
display: inline-flex;
flex-direction: row;
font-size: 1rem;
line-height: 1.5rem;
min-height: 2.5rem;
padding: .5rem 1rem;
width: fit-content;
align-items: center;
max-height: none;
max-width: 100%;
cursor: pointer;
border: none;
border-radius: var(--border-radius);
color: rgb(var(--neutral-lower));
background-color: var(--text);
font-weight: var(--font-weight-semibold);
font-stretch: var(--font-stretch, condensed);
&:disabled {
--hover: inherit;
--active: inherit;
background-color: #e5e5e5;
color: #929292;
cursor: not-allowed;
}
&:not(:disabled):hover {
background-color: var(--hover);
}
&:not(:disabled):active {
background-color: var(--active);
}
}