63 lines
1.6 KiB
SCSS
63 lines
1.6 KiB
SCSS
// ---------- Buttons ----------
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
padding: 10px 18px;
|
|
border-radius: 10px;
|
|
border: 1px solid transparent;
|
|
font-size: 0.9rem;
|
|
font-weight: 650;
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
transition: filter 0.15s, background-color 0.15s, border-color 0.15s, transform 0.1s,
|
|
box-shadow 0.15s;
|
|
|
|
&:active { transform: translateY(1px); }
|
|
|
|
&[disabled] { opacity: 0.55; pointer-events: none; }
|
|
}
|
|
|
|
.btn-primary {
|
|
background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--accent-2)));
|
|
color: #fff;
|
|
box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--accent) 65%, transparent);
|
|
|
|
&:hover { filter: brightness(1.1); }
|
|
}
|
|
|
|
.btn-ghost {
|
|
border-color: var(--border);
|
|
background: var(--surface);
|
|
color: var(--text);
|
|
|
|
&:hover { border-color: var(--border-strong); background: var(--surface-2); }
|
|
}
|
|
|
|
.btn-danger {
|
|
border-color: color-mix(in srgb, var(--danger) 45%, transparent);
|
|
color: var(--danger);
|
|
background: transparent;
|
|
|
|
&:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); }
|
|
}
|
|
|
|
.btn-sm { padding: 7px 13px; font-size: 0.82rem; border-radius: 8px; }
|
|
|
|
.icon-btn {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 38px;
|
|
height: 38px;
|
|
border-radius: 10px;
|
|
border: 1px solid var(--border);
|
|
background: var(--surface);
|
|
color: var(--muted);
|
|
transition: color 0.15s, border-color 0.15s, transform 0.15s;
|
|
|
|
&:hover { color: var(--text); border-color: var(--border-strong); }
|
|
|
|
&:active { transform: scale(0.94); }
|
|
}
|