Daniil
59 lines
1.4 KiB
SCSS
59 lines
1.4 KiB
SCSS
.button {
|
|
font-weight: 600;
|
|
letter-spacing: -0.01em;
|
|
transition: transform var(--duration-fast) var(--ease-out),
|
|
box-shadow var(--duration-normal) var(--ease-out),
|
|
filter var(--duration-normal) var(--ease-out),
|
|
opacity var(--duration-normal) var(--ease-out),
|
|
background var(--duration-normal) var(--ease-out);
|
|
|
|
&.variant-primary, &.variant-danger {
|
|
background-image: linear-gradient(180deg, hsla(0,0%,100%,0.12) 0%, transparent 100%);
|
|
box-shadow: inset 0 1px 1px hsla(0,0%,100%,0.2), 0 1px 2px rgba(0,0,0,0.1);
|
|
border-top: 1px solid hsla(0,0%,100%,0.1);
|
|
|
|
&:hover:not(:disabled) {
|
|
filter: brightness(1.08);
|
|
box-shadow: inset 0 1px 1px hsla(0,0%,100%,0.2), 0 4px 14px hsla(262, 75%, 48%, 0.35);
|
|
}
|
|
|
|
&:active:not(:disabled) {
|
|
transform: scale(0.96);
|
|
filter: brightness(0.95);
|
|
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.1);
|
|
}
|
|
}
|
|
|
|
&:not(.variant-primary):not(.variant-danger) {
|
|
&:hover:not(:disabled) {
|
|
filter: brightness(0.95);
|
|
}
|
|
|
|
&:active:not(:disabled) {
|
|
transform: scale(0.96);
|
|
filter: brightness(0.92);
|
|
}
|
|
}
|
|
|
|
&:focus-visible {
|
|
outline: none;
|
|
box-shadow: var(--focus-ring);
|
|
}
|
|
}
|
|
|
|
.loading {
|
|
position: relative;
|
|
pointer-events: none;
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.spinner {
|
|
animation: spin 0.8s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|