Add SCSS

2026-10-05 21:12:36 +03:00
parent 91acfff93e
commit 2a2d9f50f1
25 changed files with 1520 additions and 1118 deletions
@@ -0,0 +1,91 @@
+// ============================================================
+//   Buttons
+//   ============================================================
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  font: inherit;
+  font-weight: 600;
+  padding: 0.65rem 1.25rem;
+  border-radius: var(--radius-full);
+  border: 2px solid transparent;
+  cursor: pointer;
+  text-decoration: none;
+  transition:
+    background 0.15s ease,
+    color 0.15s ease,
+    border-color 0.15s ease,
+    transform 0.1s ease;
+  line-height: 1.2;
+
+  &:active {
+    transform: translateY(1px);
+  }
+
+  &:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+}
+
+.btn--primary {
+  background: var(--primary);
+  color: #fff;
+
+  &:hover {
+    background: var(--primary-strong);
+    color: #fff;
+  }
+}
+
+.btn--accent {
+  background: var(--accent);
+  color: #fff;
+
+  &:hover {
+    background: var(--accent-strong);
+    color: #fff;
+  }
+}
+
+.btn--outline {
+  background: transparent;
+  border-color: var(--primary);
+  color: var(--primary);
+
+  &:hover {
+    background: var(--primary-soft);
+    color: var(--primary-strong);
+  }
+}
+
+.btn--ghost {
+  background: transparent;
+  color: var(--text);
+
+  &:hover {
+    background: var(--bg-alt);
+  }
+}
+
+.btn--danger {
+  background: var(--danger);
+  color: #fff;
+
+  &:hover {
+    filter: brightness(0.92);
+    color: #fff;
+  }
+}
+
+.btn--sm {
+  padding: 0.4rem 0.9rem;
+  font-size: 0.875rem;
+}
+
+.btn--block {
+  width: 100%;
+}