@skygraph/styles 0.0.0-placeholder.0 → 0.1.0

package/components/input-password.css

@@ -0,0 +1,104 @@
+/* InputPassword */
+.sg-input-password-wrapper {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+}
+
+/*
+ * `.sg-input-password` навешивается на тот же элемент, что и `.sg-input`
+ * (см. InputPassword.tsx). В `.sg-input` задан `padding` shorthand — чтобы
+ * надёжно перебить его `padding-right` без `!important`, явно выписываем
+ * longhand для обоих сторон: left как у базового input, right — с местом
+ * под кнопку переключения.
+ */
+.sg-input-password {
+  padding-left: var(--sg-padding-md);
+  padding-right: calc(var(--sg-padding-md) + 24px);
+}
+
+.sg-input-password-toggle {
+  position: absolute;
+  right: var(--sg-padding-sm);
+  top: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  padding: 0 2px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--sg-color-text-tertiary);
+  font-size: var(--sg-font-size);
+  line-height: 1;
+  transition: color var(--sg-transition-duration) var(--sg-transition-timing);
+}
+
+.sg-input-password-toggle:hover {
+  color: var(--sg-color-text);
+}
+
+/* Strength indicator */
+.sg-input-password-strength {
+  display: flex;
+  align-items: center;
+  gap: var(--sg-padding-sm);
+  margin-top: var(--sg-margin-xs);
+}
+
+.sg-input-password-strength-bar {
+  flex: 1;
+  height: 4px;
+  background: var(--sg-color-border-secondary);
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.sg-input-password-strength-fill {
+  display: block;
+  height: 100%;
+  border-radius: 2px;
+  transition: width 0.3s ease, background 0.3s ease;
+}
+
+.sg-input-password-strength-weak {
+  width: 25%;
+  background: var(--sg-color-error);
+}
+
+.sg-input-password-strength-medium {
+  width: 50%;
+  background: var(--sg-color-warning);
+}
+
+.sg-input-password-strength-strong {
+  width: 75%;
+  background: var(--sg-color-primary);
+}
+
+.sg-input-password-strength-very-strong {
+  width: 100%;
+  background: var(--sg-color-success);
+}
+
+.sg-input-password-strength-label {
+  font-size: var(--sg-font-size-sm);
+  white-space: nowrap;
+}
+
+.sg-input-password-strength-label.sg-input-password-strength-weak {
+  color: var(--sg-color-error);
+}
+
+.sg-input-password-strength-label.sg-input-password-strength-medium {
+  color: var(--sg-color-warning);
+}
+
+.sg-input-password-strength-label.sg-input-password-strength-strong {
+  color: var(--sg-color-primary);
+}
+
+.sg-input-password-strength-label.sg-input-password-strength-very-strong {
+  color: var(--sg-color-success);
+}

package/components/input.css

@@ -0,0 +1,110 @@
+.sg-input-wrapper {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+}
+
+.sg-input {
+  --sg-input-height: var(--sg-height-md);
+  --sg-input-padding: var(--sg-padding-xs) var(--sg-padding-md);
+  --sg-input-font-size: var(--sg-font-size);
+  --sg-input-color: var(--sg-color-text);
+  --sg-input-bg: var(--sg-color-bg-container);
+  --sg-input-border: var(--sg-color-border);
+  --sg-input-radius: var(--sg-border-radius);
+  display: block;
+  width: 100%;
+  height: var(--sg-input-height);
+  padding: var(--sg-input-padding);
+  font-size: var(--sg-input-font-size);
+  line-height: var(--sg-line-height);
+  color: var(--sg-input-color);
+  background: var(--sg-input-bg);
+  border: 1px solid var(--sg-input-border);
+  border-radius: var(--sg-input-radius);
+  transition: color var(--sg-transition-duration) var(--sg-transition-timing),
+    background var(--sg-transition-duration) var(--sg-transition-timing),
+    border-color var(--sg-transition-duration) var(--sg-transition-timing),
+    box-shadow var(--sg-transition-duration) var(--sg-transition-timing);
+  font-family: inherit;
+}
+
+.sg-input::placeholder {
+  color: var(--sg-color-text-placeholder);
+}
+
+.sg-input:hover {
+  --sg-input-border: var(--sg-color-primary-hover);
+}
+
+.sg-input:focus {
+  --sg-input-border: var(--sg-color-primary);
+  outline: none;
+  box-shadow: 0 0 0 2px var(--sg-color-primary-bg);
+}
+
+.sg-input:focus-visible {
+  --sg-input-border: var(--sg-color-primary);
+  outline: none;
+  box-shadow: 0 0 0 2px var(--sg-color-primary-bg);
+}
+
+.sg-input:disabled {
+  --sg-input-bg: var(--sg-color-bg-disabled);
+  --sg-input-color: var(--sg-color-text-disabled);
+  cursor: not-allowed;
+}
+
+.sg-input-readonly,
+.sg-input[readonly] {
+  --sg-input-bg: var(--sg-color-bg-secondary);
+  --sg-input-color: var(--sg-color-text-secondary);
+  cursor: default;
+}
+
+.sg-input-readonly:hover,
+.sg-input[readonly]:hover {
+  --sg-input-border: var(--sg-color-border);
+}
+
+.sg-input-readonly:focus,
+.sg-input[readonly]:focus {
+  --sg-input-border: var(--sg-color-border);
+  box-shadow: none;
+}
+
+.sg-input-small {
+  --sg-input-height: var(--sg-height-sm);
+  --sg-input-font-size: var(--sg-font-size-sm);
+  --sg-input-padding: var(--sg-padding-xs) var(--sg-padding-sm);
+}
+
+.sg-input-large {
+  --sg-input-height: var(--sg-height-lg);
+  --sg-input-font-size: var(--sg-font-size-lg);
+  --sg-input-padding: var(--sg-padding-sm) var(--sg-padding-md);
+}
+
+.sg-textarea {
+  height: auto;
+  min-height: calc(var(--sg-height-md) * 2);
+  resize: vertical;
+}
+
+/* Loading state — spin sits inside wrapper, right side */
+.sg-input-wrapper-loading {
+  --sg-spin-color: var(--sg-color-text-tertiary);
+}
+
+.sg-input-wrapper-loading .sg-input {
+  padding-right: calc(var(--sg-padding-md) + 20px);
+}
+
+.sg-input-wrapper .sg-spin {
+  position: absolute;
+  right: var(--sg-padding-sm);
+  top: 0;
+  bottom: 0;
+  margin: auto 0;
+}

package/components/list.css

@@ -0,0 +1,357 @@
+/* ---- List ---- */
+.sg-list {
+  font-size: var(--sg-font-size);
+  color: var(--sg-color-text);
+  line-height: var(--sg-line-height);
+}
+
+.sg-list-bordered {
+  border: 1px solid var(--sg-color-border);
+  border-radius: var(--sg-border-radius);
+}
+
+.sg-list-loading {
+  position: relative;
+}
+
+/* ---- Header / Footer ---- */
+.sg-list-header,
+.sg-list-footer {
+  padding: var(--sg-padding-md) var(--sg-padding-lg);
+  background: var(--sg-color-bg-secondary);
+}
+
+.sg-list-bordered .sg-list-header {
+  border-bottom: 1px solid var(--sg-color-border);
+}
+
+.sg-list-bordered .sg-list-footer {
+  border-top: 1px solid var(--sg-color-border);
+}
+
+/* ---- Items container ---- */
+.sg-list-items {
+  min-height: 0;
+}
+
+.sg-list-grid .sg-list-items {
+  --sg-list-grid-base-columns: 1fr;
+  display: grid;
+  /*
+   * Колонки определяются двумя переменными:
+   *   --sg-list-grid-columns      — наследуется от корня `.sg-list` при срабатывании media;
+   *   --sg-list-grid-base-columns — ставится инлайн на этом элементе (grid.column);
+   * media побеждает за счёт наследования, инлайн не блокирует его.
+   */
+  grid-template-columns: var(--sg-list-grid-columns, var(--sg-list-grid-base-columns));
+}
+
+/* ---- Empty ---- */
+.sg-list-empty {
+  padding: var(--sg-padding-xl);
+  text-align: center;
+}
+
+/* ---- Single item ---- */
+.sg-list-item {
+  display: flex;
+  align-items: flex-start;
+  padding: var(--sg-padding-md) var(--sg-padding-lg);
+  transition: background var(--sg-transition-duration);
+}
+
+.sg-list-split .sg-list-item + .sg-list-item {
+  border-top: 1px solid var(--sg-color-border-secondary);
+}
+
+.sg-list-bordered .sg-list-item:first-child {
+  border-top: none;
+}
+
+.sg-list-item:hover {
+  background: var(--sg-color-bg-hover);
+}
+
+/*
+ * Когда пользователь использует `<List.Item>` (или `<sg-list-item>`),
+ * у него уже есть класс `.sg-list-item`. Снаружи обёртка из `renderItemWrapper`
+ * тоже получает `.sg-list-item` (нужен для голых `<div>`-renderItem'ов в Basic/
+ * Sizes/Slots demo). Чтобы при двойной обёртке не удваивались padding/border/
+ * hover, сбрасываем стили внутреннего `.sg-list-item` и растягиваем его на
+ * ширину flex-родителя.
+ */
+.sg-list-item .sg-list-item {
+  padding: 0;
+  border: none;
+  background: transparent;
+  flex: 1;
+  min-width: 0;
+}
+
+.sg-list-item .sg-list-item:hover {
+  background: transparent;
+}
+
+/* ---- Item modifiers ---- */
+.sg-list-item-hoverable {
+  cursor: pointer;
+}
+
+.sg-list-item-selectable {
+  cursor: pointer;
+  user-select: none;
+}
+
+.sg-list-item-selected,
+.sg-list-item-selected:hover {
+  background: var(--sg-color-primary-bg, rgba(22, 119, 255, 0.08));
+}
+
+.sg-list-item-dragging {
+  opacity: 0.5;
+}
+
+.sg-list-item-drop-target {
+  box-shadow: inset 0 2px 0 0 var(--sg-color-primary);
+}
+
+/* ---- Virtual scroll ----
+ *
+ * Внутренний контент virtual-режима полностью `position: absolute` (каждая
+ * строка — на своём `top = index * itemHeight`). В flex-контексте (например,
+ * `.demo-box-preview { display: flex }`) и `.sg-list`, и
+ * `.sg-list-virtual-container` без контента в потоке схлопываются до 0 ширины.
+ * Явный `width: 100%` на корне (через модификатор `.sg-list-virtual`) и на
+ * самом scroll-контейнере гарантирует, что они растянутся на всю доступную
+ * ширину родителя.
+ */
+.sg-list-virtual {
+  width: 100%;
+}
+
+.sg-list-virtual-container {
+  width: 100%;
+}
+
+/* ---- Drag handle ---- */
+.sg-list-drag-handle {
+  display: inline-flex;
+  align-items: center;
+  margin-right: var(--sg-padding-sm);
+  color: var(--sg-color-text-secondary);
+  cursor: grab;
+  user-select: none;
+}
+
+.sg-list-drag-handle:active {
+  cursor: grabbing;
+}
+
+.sg-list-item-main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+}
+
+.sg-list-item-content {
+  flex: 1;
+  min-width: 0;
+}
+
+/* ---- Actions ---- */
+.sg-list-item-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--sg-padding-sm);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  margin-left: var(--sg-padding-lg);
+  flex-shrink: 0;
+}
+
+.sg-list-item-action {
+  color: var(--sg-color-text-secondary);
+  cursor: pointer;
+  transition: color var(--sg-transition-duration);
+}
+
+.sg-list-item-action:hover {
+  color: var(--sg-color-primary);
+}
+
+.sg-list-item-actions li + li::before {
+  content: '';
+  display: inline-block;
+  width: 1px;
+  height: 14px;
+  background: var(--sg-color-border);
+  margin-right: var(--sg-padding-sm);
+  vertical-align: middle;
+}
+
+/* ---- Extra ---- */
+.sg-list-item-extra {
+  margin-left: var(--sg-padding-xl);
+  flex-shrink: 0;
+}
+
+/* ---- Meta ---- */
+.sg-list-item-meta {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--sg-padding-md);
+  flex: 1;
+  min-width: 0;
+}
+
+.sg-list-item-meta-avatar {
+  flex-shrink: 0;
+}
+
+.sg-list-item-meta-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.sg-list-item-meta-title {
+  margin: 0 0 var(--sg-margin-xs) 0;
+  font-size: var(--sg-font-size);
+  font-weight: 600;
+  color: var(--sg-color-text);
+  line-height: var(--sg-line-height);
+}
+
+.sg-list-item-meta-description {
+  font-size: var(--sg-font-size-sm);
+  color: var(--sg-color-text-secondary);
+  line-height: var(--sg-line-height);
+}
+
+/* ---- Sizes ---- */
+.sg-list-small .sg-list-item {
+  padding: var(--sg-padding-sm) var(--sg-padding-md);
+}
+
+.sg-list-small .sg-list-header,
+.sg-list-small .sg-list-footer {
+  padding: var(--sg-padding-sm) var(--sg-padding-md);
+}
+
+.sg-list-small .sg-list-item-meta-title {
+  font-size: var(--sg-font-size-sm);
+}
+
+.sg-list-large .sg-list-item {
+  padding: var(--sg-padding-lg) var(--sg-padding-xl);
+}
+
+.sg-list-large .sg-list-header,
+.sg-list-large .sg-list-footer {
+  padding: var(--sg-padding-lg) var(--sg-padding-xl);
+}
+
+.sg-list-large .sg-list-item-meta-title {
+  font-size: var(--sg-font-size-lg);
+}
+
+/* ---- Grid mode ---- */
+.sg-list-grid .sg-list-item {
+  border: none;
+}
+
+.sg-list-grid.sg-list-bordered .sg-list-items {
+  padding: var(--sg-padding-md);
+}
+
+.sg-list-grid .sg-list-item {
+  border-radius: var(--sg-border-radius);
+}
+
+/*
+ * Responsive grid breakpoints.
+ *
+ * Переопределяем `--sg-list-grid-columns` на КОРНЕ `.sg-list` (не на .sg-list-items),
+ * чтобы инлайновый `style` на `.sg-list-items` (который задаёт base columns) не перебивал
+ * media-override. Так мы обходимся без `!important`.
+ */
+@media (max-width: 575px) {
+  .sg-list-grid-xs-1 {
+    --sg-list-grid-columns: repeat(1, 1fr);
+  }
+  .sg-list-grid-xs-2 {
+    --sg-list-grid-columns: repeat(2, 1fr);
+  }
+  .sg-list-grid-xs-3 {
+    --sg-list-grid-columns: repeat(3, 1fr);
+  }
+}
+
+@media (min-width: 576px) and (max-width: 767px) {
+  .sg-list-grid-sm-1 {
+    --sg-list-grid-columns: repeat(1, 1fr);
+  }
+  .sg-list-grid-sm-2 {
+    --sg-list-grid-columns: repeat(2, 1fr);
+  }
+  .sg-list-grid-sm-3 {
+    --sg-list-grid-columns: repeat(3, 1fr);
+  }
+  .sg-list-grid-sm-4 {
+    --sg-list-grid-columns: repeat(4, 1fr);
+  }
+}
+
+@media (min-width: 768px) and (max-width: 991px) {
+  .sg-list-grid-md-1 {
+    --sg-list-grid-columns: repeat(1, 1fr);
+  }
+  .sg-list-grid-md-2 {
+    --sg-list-grid-columns: repeat(2, 1fr);
+  }
+  .sg-list-grid-md-3 {
+    --sg-list-grid-columns: repeat(3, 1fr);
+  }
+  .sg-list-grid-md-4 {
+    --sg-list-grid-columns: repeat(4, 1fr);
+  }
+  .sg-list-grid-md-6 {
+    --sg-list-grid-columns: repeat(6, 1fr);
+  }
+}
+
+@media (min-width: 992px) {
+  .sg-list-grid-lg-1 {
+    --sg-list-grid-columns: repeat(1, 1fr);
+  }
+  .sg-list-grid-lg-2 {
+    --sg-list-grid-columns: repeat(2, 1fr);
+  }
+  .sg-list-grid-lg-3 {
+    --sg-list-grid-columns: repeat(3, 1fr);
+  }
+  .sg-list-grid-lg-4 {
+    --sg-list-grid-columns: repeat(4, 1fr);
+  }
+  .sg-list-grid-lg-6 {
+    --sg-list-grid-columns: repeat(6, 1fr);
+  }
+}
+
+/* ---- Load more ---- */
+.sg-list-load-more {
+  text-align: center;
+  padding: var(--sg-padding-md) 0;
+}
+
+/* ---- Pagination ---- */
+.sg-list-pagination {
+  display: flex;
+  justify-content: flex-end;
+  padding: var(--sg-padding-md) var(--sg-padding-lg);
+}
+
+.sg-list-bordered .sg-list-pagination {
+  border-top: 1px solid var(--sg-color-border-secondary);
+}

package/components/mentions.css

@@ -0,0 +1,54 @@
+.sg-mentions {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+
+.sg-mentions-disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.sg-mentions-small .sg-textarea {
+  font-size: var(--sg-font-size-sm);
+}
+
+.sg-mentions-large .sg-textarea {
+  font-size: var(--sg-font-size-lg);
+}
+
+.sg-mentions-dropdown {
+  position: absolute;
+  left: 0;
+  right: 0;
+  z-index: var(--sg-z-dropdown);
+  background: var(--sg-color-bg-elevated);
+  border: 1px solid var(--sg-color-border);
+  border-radius: var(--sg-border-radius);
+  box-shadow: var(--sg-shadow-lg);
+  max-height: 200px;
+  overflow-y: auto;
+  padding: var(--sg-padding-xs) 0;
+}
+
+.sg-mentions-dropdown-bottom {
+  top: 100%;
+  margin-top: var(--sg-margin-xs);
+}
+
+.sg-mentions-dropdown-top {
+  bottom: 100%;
+  margin-bottom: var(--sg-margin-xs);
+}
+
+.sg-mentions-option {
+  padding: var(--sg-padding-xs) var(--sg-padding-md);
+  cursor: pointer;
+  transition: background-color var(--sg-transition-duration) var(--sg-transition-timing);
+  line-height: var(--sg-line-height);
+}
+
+.sg-mentions-option:hover,
+.sg-mentions-option-active {
+  background: var(--sg-color-bg-hover);
+}