feat: Tabs (0.7.0)

2026-08-17 10:17:50 +05:00
parent 49a7665418
commit 6bf198f8f2
5 changed files with 136 additions and 1 deletions
@@ -0,0 +1,44 @@
+@import '../tokens/tokens';
+
+// Светлая полоса вкладок; активная — navy с золотым подчёркиванием.
+// На узких экранах — горизонтальная прокрутка (не ломается, не переносится «лесенкой»).
+.tabs {
+  display: flex;
+  align-items: stretch;
+  gap: $sp-2;
+  border-bottom: 1px solid $gray-200;
+  overflow-x: auto;
+}
+
+.tab {
+  display: inline-flex;
+  align-items: center;
+  gap: $sp-2;
+  padding: 12px 16px;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  background: transparent;
+  color: $gray-500;
+  font-family: $font-sans;
+  font-size: 13px;
+  font-weight: 500;
+  letter-spacing: .2px;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: color .18s, border-color .18s;
+
+  &:hover {
+    color: $navy-800;
+  }
+}
+
+.active {
+  color: $navy-900;
+  font-weight: 600;
+  border-bottom-color: $gold-500;
+}
+
+.count {
+  color: $gray-400;
+  font-weight: 500;
+}