@rt-tools/ui-kit-v2 0.5.0 → 0.7.0

package/src/lib/components/page-header/rt-page-header.component.scss

@@ -1,257 +1,268 @@
-/* Цвет плашки вынесен в локальный override `--rt-page-header-bg`, дефолт
-   берётся из семантики навигации. Отступ от краёв страницы задаёт тот, кто
-   ставит шапку: своего у неё нет. */
-.rt-page-header {
-    display: flex;
-    width: auto;
-    min-height: 48px;
-    box-sizing: border-box;
-    align-items: center;
-    justify-content: space-between;
-    padding: var(--rt-nav-header-padding);
-    border-radius: var(--rt-radius-md);
-    background-color: var(--rt-page-header-bg, var(--rt-nav-header-color-bg));
-    color: var(--rt-nav-item-color);
-    gap: var(--rt-space-2);
-
-    &__nav {
-        min-width: 0;
-        flex: 1 1 auto;
-    }
+@layer rt-kit.components {
+    /* Цвет плашки вынесен в локальный override `--rt-page-header-bg`, дефолт
+       берётся из семантики навигации. Отступ от краёв страницы задаёт тот, кто
+       ставит шапку: своего у неё нет. */
+    .rt-page-header {
+        --rt-nav-header-radius: var(--rt-radius-md);
+        --rt-nav-header-transition-duration: var(--rt-duration-fast);
+        --rt-nav-item-radius: var(--rt-radius-md);
+        --rt-nav-item-border-width: var(--rt-border-width-thin);
+        --rt-nav-burger-radius: var(--rt-radius-ms);
+        --rt-nav-marker-radius: var(--rt-radius-full);
+        --rt-nav-user-avatar-radius: var(--rt-radius-full);
+        --rt-nav-user-avatar-border-width: var(--rt-border-width-thin);
 
-    &__list {
         display: flex;
-        flex-flow: row wrap;
-        align-items: center;
-        padding: 0;
-        margin: 0;
-        gap: var(--rt-nav-item-gap);
-        list-style: none;
-    }
-
-    /* Пункт ряда несёт собственную плашку. На фоне шапки того же цвета её не
-       видно — проступает только активный раздел, у которого фон белый. */
-    &__item {
-        display: inline-flex;
+        width: auto;
+        min-height: 48px;
+        box-sizing: border-box;
         align-items: center;
-        border: var(--rt-border-width-thin) solid var(--rt-nav-item-color-border);
-        border-radius: var(--rt-radius-md);
-        background-color: var(--rt-nav-item-color-bg);
-    }
-
-    &__disabled-slot {
-        display: inline-flex;
-        flex-direction: column;
-        align-items: stretch;
-    }
-
-    &__link {
-        position: relative;
-        display: inline-flex;
-        min-height: var(--rt-nav-item-height);
-        align-items: center;
-        padding: var(--rt-nav-item-padding);
-        border: 0;
-        border-radius: var(--rt-radius-md);
-        background-color: transparent;
+        justify-content: space-between;
+        padding: var(--rt-nav-header-padding);
+        border-radius: var(--rt-nav-header-radius);
+        background-color: var(--rt-page-header-bg, var(--rt-nav-header-color-bg));
         color: var(--rt-nav-item-color);
-        cursor: pointer;
-        font-size: var(--rt-nav-item-font-size);
-        font-weight: var(--rt-nav-item-font-weight);
-        gap: var(--rt-nav-item-content-gap);
-        line-height: var(--rt-nav-item-line-height);
-        text-decoration: none;
-        transition: color var(--rt-duration-fast) linear;
-        white-space: nowrap;
-
-        /* Наведение красит подпись, а не фон: фоном отмечен активный раздел, и
-           два фона в одном ряду читались бы как два активных. */
-        &:hover {
-            color: var(--rt-nav-item-color-hover);
-        }
+        gap: var(--rt-space-2);
 
-        &:focus {
-            outline: none;
+        &__nav {
+            min-width: 0;
+            flex: 1 1 auto;
         }
 
-        &:focus-visible {
-            outline: 2px dashed var(--rt-nav-color-focus);
-            outline-offset: 2px;
+        &__list {
+            display: flex;
+            flex-flow: row wrap;
+            align-items: center;
+            padding: 0;
+            margin: 0;
+            gap: var(--rt-nav-item-gap);
+            list-style: none;
         }
 
-        &--is-active {
-            background-color: var(--rt-nav-item-color-bg-active);
-            color: var(--rt-nav-item-color);
+        /* Пункт ряда несёт собственную плашку. На фоне шапки того же цвета её не
+           видно — проступает только активный раздел, у которого фон белый. */
+        &__item {
+            display: inline-flex;
+            align-items: center;
+            border: var(--rt-nav-item-border-width) solid var(--rt-nav-item-color-border);
+            border-radius: var(--rt-nav-item-radius);
+            background-color: var(--rt-nav-item-color-bg);
         }
 
-        /* Пока панель открыта, её раздел держит цвет наведения: курсор ушёл в
-           панель, наведение с него снялось, и без этого не видно, чья панель
-           открыта. */
-        &--is-open {
-            color: var(--rt-nav-item-color-hover);
+        &__disabled-slot {
+            display: inline-flex;
+            flex-direction: column;
+            align-items: stretch;
         }
 
-        /* `aria-disabled` браузер не стилизует сам: без этого правила пункт,
-           выключенный только для скринридера, выглядит рабочим. Нативный
-           `disabled` не годится — он не даёт ни наведения, ни фокуса, и
-           объяснение до пользователя не доходит. */
-        &--disabled,
-        &:disabled,
-        &[aria-disabled='true'] {
+        &__link {
+            position: relative;
+            display: inline-flex;
+            min-height: var(--rt-nav-item-height);
+            align-items: center;
+            padding: var(--rt-nav-item-padding);
+            border: 0;
+            border-radius: var(--rt-nav-item-radius);
             background-color: transparent;
-            color: var(--rt-nav-color-disabled);
-            cursor: not-allowed;
-
+            color: var(--rt-nav-item-color);
+            cursor: pointer;
+            font-size: var(--rt-nav-item-font-size);
+            font-weight: var(--rt-nav-item-font-weight);
+            gap: var(--rt-nav-item-content-gap);
+            line-height: var(--rt-nav-item-line-height);
+            text-decoration: none;
+            transition: color var(--rt-nav-header-transition-duration) linear;
+            white-space: nowrap;
+
+            /* Наведение красит подпись, а не фон: фоном отмечен активный раздел, и
+               два фона в одном ряду читались бы как два активных. */
             &:hover {
-                background-color: transparent;
+                color: var(--rt-nav-item-color-hover);
             }
-        }
-    }
 
-    &__icon {
-        flex-shrink: 0;
-    }
+            &:focus {
+                outline: none;
+            }
 
-    /* Точка идёт следом за подписью и перед указателем раскрытия, в общем ритме
-       содержимого пункта. Поверх текста она садилась бы на последнюю букву. */
-    &__marker {
-        width: var(--rt-nav-marker-size);
-        height: var(--rt-nav-marker-size);
-        flex-shrink: 0;
-        border-radius: var(--rt-radius-full);
-        background-color: var(--rt-nav-marker-color);
-    }
+            &:focus-visible {
+                outline: 2px dashed var(--rt-nav-color-focus);
+                outline-offset: 2px;
+            }
 
-    /* Указатель раскрытия приглушён сильнее подписи: он говорит, что панель есть,
-       и не должен спорить с названием раздела. Начертание парное (вверх-вниз),
-       поэтому разворот на раскрытии ничего не добавил бы. */
-    &__caret {
-        display: inline-flex;
-        flex-shrink: 0;
-        color: var(--rt-nav-item-color-caret);
-    }
+            &--is-active {
+                background-color: var(--rt-nav-item-color-bg-active);
+                color: var(--rt-nav-item-color);
+            }
 
-    &__burger {
-        display: none; /* десктоп — гамбургера нет; включается ниже в @media */
-        flex-shrink: 0;
-        align-items: center;
-        justify-content: center;
-        padding: var(--rt-space-1-5);
-        border: 0;
-        border-radius: var(--rt-radius-ms);
-        background-color: transparent;
-        color: var(--rt-nav-item-color);
-        cursor: pointer;
-        transition: color var(--rt-duration-fast) linear;
+            /* Пока панель открыта, её раздел держит цвет наведения: курсор ушёл в
+               панель, наведение с него снялось, и без этого не видно, чья панель
+               открыта. */
+            &--is-open {
+                color: var(--rt-nav-item-color-hover);
+            }
 
-        &:hover {
-            color: var(--rt-nav-item-color-hover);
-        }
+            /* `aria-disabled` браузер не стилизует сам: без этого правила пункт,
+               выключенный только для скринридера, выглядит рабочим. Нативный
+               `disabled` не годится — он не даёт ни наведения, ни фокуса, и
+               объяснение до пользователя не доходит. */
+            &--disabled,
+            &:disabled,
+            &[aria-disabled='true'] {
+                background-color: transparent;
+                color: var(--rt-nav-color-disabled);
+                cursor: not-allowed;
 
-        &:active {
-            color: var(--rt-nav-item-color-pressed);
+                &:hover {
+                    background-color: transparent;
+                }
+            }
         }
 
-        &:focus {
-            outline: none;
+        &__icon {
+            flex-shrink: 0;
         }
 
-        &:focus-visible {
-            outline: 2px dashed var(--rt-nav-color-focus);
-            outline-offset: 2px;
+        /* Точка идёт следом за подписью и перед указателем раскрытия, в общем ритме
+           содержимого пункта. Поверх текста она садилась бы на последнюю букву. */
+        &__marker {
+            width: var(--rt-nav-marker-size);
+            height: var(--rt-nav-marker-size);
+            flex-shrink: 0;
+            border-radius: var(--rt-nav-marker-radius);
+            background-color: var(--rt-nav-marker-color);
         }
 
-        &--is-open {
-            background-color: var(--rt-nav-item-color-bg-active);
+        /* Указатель раскрытия приглушён сильнее подписи: он говорит, что панель есть,
+           и не должен спорить с названием раздела. Начертание парное (вверх-вниз),
+           поэтому разворот на раскрытии ничего не добавил бы. */
+        &__caret {
+            display: inline-flex;
+            flex-shrink: 0;
+            color: var(--rt-nav-item-color-caret);
         }
-    }
 
-    &__burger-icon {
-        flex-shrink: 0;
-    }
+        &__burger {
+            display: none; /* десктоп — гамбургера нет; включается ниже в @media */
+            flex-shrink: 0;
+            align-items: center;
+            justify-content: center;
+            padding: var(--rt-space-2);
+            border: 0;
+            border-radius: var(--rt-nav-burger-radius);
+            background-color: transparent;
+            color: var(--rt-nav-item-color);
+            cursor: pointer;
+            transition: color var(--rt-nav-header-transition-duration) linear;
 
-    /* Восемь разделов с иконками в ряд не помещаются и переносятся на вторую
-       строку, а перенос удваивает высоту шапки. До широкого вьюпорта ряд идёт
-       без иконок: подпись раздела нужнее картинки рядом с ней. Замер в Chrome
-       2026-08-02: на 1081px ряд с иконками занимает 938.7px при доступных
-       798.4, без иконок — 762.7. */
-    @media (width <= 1380px) {
-        /* Селектор из двух классов, а не одного: `.rt-icon` задаёт иконке
-           `display`, и порядок стилей двух компонентов кита между собой не
-           закреплён ничем. */
-        &__link &__icon {
-            display: none;
-        }
-    }
+            &:hover {
+                color: var(--rt-nav-item-color-hover);
+            }
 
-    /* Узкий вьюпорт: инлайн-навигация уступает место гамбургеру. */
-    @media (width <= 1080px) {
-        &__nav {
-            display: none;
+            &:active {
+                color: var(--rt-nav-item-color-pressed);
+            }
+
+            &:focus {
+                outline: none;
+            }
+
+            &:focus-visible {
+                outline: 2px dashed var(--rt-nav-color-focus);
+                outline-offset: 2px;
+            }
+
+            &--is-open {
+                background-color: var(--rt-nav-item-color-bg-active);
+            }
         }
 
-        &__burger {
-            display: inline-flex;
+        &__burger-icon {
+            flex-shrink: 0;
         }
-    }
 
-    &__user {
-        display: inline-flex;
-        min-height: var(--rt-nav-item-height);
-        align-items: center;
-        padding: var(--rt-nav-item-padding);
-        border: 0;
-        border-radius: var(--rt-radius-md);
-        background-color: transparent;
-        color: var(--rt-nav-item-color);
-        cursor: pointer;
-        font-size: var(--rt-nav-item-font-size);
-        font-weight: var(--rt-nav-item-font-weight);
-        gap: var(--rt-nav-item-content-gap);
-        line-height: var(--rt-leading-tight);
-        transition: background-color var(--rt-duration-fast) linear;
-
-        &:hover,
-        &:active {
-            background-color: var(--rt-nav-item-color-bg-active);
+        /* Восемь разделов с иконками в ряд не помещаются и переносятся на вторую
+           строку, а перенос удваивает высоту шапки. До широкого вьюпорта ряд идёт
+           без иконок: подпись раздела нужнее картинки рядом с ней. Замер в Chrome
+           2026-08-02: на 1081px ряд с иконками занимает 938.7px при доступных
+           798.4, без иконок — 762.7. */
+        @media (width <= 1380px) {
+            /* Селектор из двух классов, а не одного: `.rt-icon` задаёт иконке
+               `display`, и порядок стилей двух компонентов кита между собой не
+               закреплён ничем. */
+            &__link &__icon {
+                display: none;
+            }
         }
 
-        &:focus {
-            outline: none;
+        /* Узкий вьюпорт: инлайн-навигация уступает место гамбургеру. */
+        @media (width <= 1080px) {
+            &__nav {
+                display: none;
+            }
+
+            &__burger {
+                display: inline-flex;
+            }
         }
 
-        &:focus-visible {
-            outline: 2px dashed var(--rt-nav-color-focus);
-            outline-offset: 2px;
+        &__user {
+            display: inline-flex;
+            min-height: var(--rt-nav-item-height);
+            align-items: center;
+            padding: var(--rt-nav-item-padding);
+            border: 0;
+            border-radius: var(--rt-nav-item-radius);
+            background-color: transparent;
+            color: var(--rt-nav-item-color);
+            cursor: pointer;
+            font-size: var(--rt-nav-item-font-size);
+            font-weight: var(--rt-nav-item-font-weight);
+            gap: var(--rt-nav-item-content-gap);
+            line-height: var(--rt-leading-tight);
+            transition: background-color var(--rt-nav-header-transition-duration) linear;
+
+            &:hover,
+            &:active {
+                background-color: var(--rt-nav-item-color-bg-active);
+            }
+
+            &:focus {
+                outline: none;
+            }
+
+            &:focus-visible {
+                outline: 2px dashed var(--rt-nav-color-focus);
+                outline-offset: 2px;
+            }
         }
-    }
 
-    &__user-avatar {
-        display: inline-flex;
-        width: 16px;
-        height: 16px;
-        align-items: center;
-        justify-content: center;
-        border: var(--rt-border-width-thin) solid var(--rt-nav-item-color-caret);
-        border-radius: var(--rt-radius-full);
-        color: var(--rt-color-text-muted);
-        font-size: var(--rt-text-2xs);
-        font-weight: var(--rt-font-weight-semibold);
-        line-height: var(--rt-leading-none);
-    }
+        &__user-avatar {
+            display: inline-flex;
+            width: 16px;
+            height: 16px;
+            align-items: center;
+            justify-content: center;
+            border: var(--rt-nav-user-avatar-border-width) solid var(--rt-nav-item-color-caret);
+            border-radius: var(--rt-nav-user-avatar-radius);
+            color: var(--rt-color-text-muted);
+            font-size: var(--rt-text-2xs);
+            font-weight: var(--rt-font-weight-semibold);
+            line-height: var(--rt-leading-none);
+        }
 
-    &__user-name {
-        white-space: nowrap;
-    }
+        &__user-name {
+            white-space: nowrap;
+        }
 
-    /* Начертание парное, вверх-вниз: разворачивать его при открытии нечего. */
-    &__user-caret {
-        display: inline-flex;
-        flex-shrink: 0;
-        color: var(--rt-nav-item-color-caret);
-    }
+        /* Начертание парное, вверх-вниз: разворачивать его при открытии нечего. */
+        &__user-caret {
+            display: inline-flex;
+            flex-shrink: 0;
+            color: var(--rt-nav-item-color-caret);
+        }
 
-    &__user--is-open {
-        background-color: var(--rt-nav-item-color-bg-active);
+        &__user--is-open {
+            background-color: var(--rt-nav-item-color-bg-active);
+        }
     }
 }