@skygraph/styles 0.2.4 → 0.6.6

package/components/list.css

@@ -1,366 +1,366 @@
-/* ---- 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);
-  /* Clip header / footer / first-last item backgrounds (which have square
-   * corners) to the rounded border. Without this the tinted header and the
-   * hover/selected row backgrounds bleed past the radius, so the corners
-   * appear to be a different colour than the rest of the outline. */
-  overflow: hidden;
-}
-
-.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;
-  /* Center main / actions / extra blocks on a single baseline so rows with a
-   * multi-line Meta block (avatar + title + description) stay visually even.
-   * The Meta block keeps its own `align-items: flex-start` internally so the
-   * avatar still tops out with the title. */
-  align-items: center;
-  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);
-}
+/* ---- 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);
+  /* Clip header / footer / first-last item backgrounds (which have square
+   * corners) to the rounded border. Without this the tinted header and the
+   * hover/selected row backgrounds bleed past the radius, so the corners
+   * appear to be a different colour than the rest of the outline. */
+  overflow: hidden;
+}
+
+.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;
+  /* Center main / actions / extra blocks on a single baseline so rows with a
+   * multi-line Meta block (avatar + title + description) stay visually even.
+   * The Meta block keeps its own `align-items: flex-start` internally so the
+   * avatar still tops out with the title. */
+  align-items: center;
+  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);
+}