@rt-tools/ui-kit-v2 0.41.0 → 0.43.0

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

@@ -0,0 +1,115 @@
+@layer rt-kit.components {
+    /* Ряд вкладок и шапка телефона: кнопки 32, точка в потоке за иконкой. */
+    .rt-page-actions {
+        --rt-page-actions-plate-radius: var(--rt-radius-md);
+        --rt-page-actions-plate-border-width: var(--rt-border-width-thin);
+        --rt-page-actions-marker-radius: var(--rt-radius-full);
+
+        display: flex;
+        flex: none;
+        align-items: center;
+        gap: var(--rt-space-2);
+        padding-inline: var(--rt-space-2);
+
+        &__item {
+            display: inline-flex;
+            height: 32px;
+            flex: none;
+            align-items: center;
+            padding: 0 var(--rt-space-2);
+            border: 0;
+            background: transparent;
+            color: var(--rt-nav-item-color);
+            cursor: pointer;
+
+            &:hover {
+                color: var(--rt-nav-item-color-hover);
+            }
+
+            &:focus-visible {
+                outline: 1px dashed var(--rt-nav-color-focus);
+                outline-offset: -1px;
+            }
+
+            &--disabled {
+                color: var(--rt-nav-color-disabled);
+                cursor: default;
+            }
+        }
+
+        &__plate {
+            display: inline-flex;
+            align-items: center;
+            gap: var(--rt-space-2);
+        }
+
+        &__marker {
+            width: var(--rt-nav-marker-size);
+            height: var(--rt-nav-marker-size);
+            flex: none;
+            border-radius: var(--rt-page-actions-marker-radius);
+            background-color: var(--rt-nav-marker-color);
+        }
+
+        /* Подвал рейки на широком экране: столбец ячеек 50, те же плашки 36, что у разделов.
+           Ряд вкладок: кнопки стоят над линией полосы, а не по центру с ней. */
+        @media (width > 768px) {
+            /* Линия полосы идёт и под кнопками, вместе с отступом ряда вкладок перед ними. */
+            &:not(&--rail) {
+                border-block-end: var(--rt-page-actions-plate-border-width) solid var(--rt-color-border-default);
+                margin-inline-start: calc(-1 * var(--rt-space-md));
+            }
+
+            &--rail {
+                flex-direction: column;
+                align-items: stretch;
+                gap: 0;
+                padding-inline: 0;
+            }
+
+            &--rail &__item {
+                width: 50px;
+                height: 50px;
+                justify-content: center;
+                padding: 0;
+            }
+
+            &--rail &__plate {
+                position: relative;
+                width: 36px;
+                height: 36px;
+                box-sizing: border-box;
+                justify-content: center;
+                border: var(--rt-page-actions-plate-border-width) solid transparent;
+                border-radius: var(--rt-page-actions-plate-radius);
+            }
+
+            &--rail &__item:hover &__plate {
+                background-color: var(--rt-nav-item-color-bg-active);
+            }
+
+            /* Включённая кнопка: в рейке как выбранный раздел, в ряду вкладок заливка на всю кнопку. */
+            &--rail &__item--active &__plate {
+                border-color: var(--rt-color-border-default);
+                background-color: var(--rt-nav-item-color-bg-active);
+            }
+
+            &:not(&--rail) &__item--active {
+                background-color: var(--rt-nav-item-color-bg-active);
+                color: var(--rt-nav-item-color-hover);
+            }
+
+            &--rail &__marker {
+                position: absolute;
+                top: calc(var(--rt-space-1) - var(--rt-page-actions-plate-border-width));
+                right: calc(var(--rt-space-1) - var(--rt-page-actions-plate-border-width));
+            }
+        }
+
+        /* Телефон: кнопки примыкают друг к другу через 4. */
+        @media (width <= 768px) {
+            gap: var(--rt-space-1);
+            padding-inline: 0;
+        }
+    }
+}

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

@@ -0,0 +1,129 @@
+@layer rt-kit.components {
+    .rt-page-phone-menu {
+        --rt-page-phone-menu-row-radius: var(--rt-radius-md);
+        --rt-page-phone-menu-marker-radius: var(--rt-radius-full);
+        --rt-page-phone-menu-border-width: var(--rt-border-width-thin);
+
+        display: flex;
+        overflow: hidden auto;
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        flex-direction: column;
+
+        /* Список разделов красится как рейка, открытый раздел как панель раздела. */
+        &__list {
+            display: flex;
+            box-sizing: border-box;
+            flex: 1 0 auto;
+            flex-direction: column;
+            padding: var(--rt-space-2);
+            background-color: var(--rt-nav-header-color-bg);
+            gap: var(--rt-space-1);
+
+            &--panel {
+                background-color: var(--rt-nav-panel-color-bg);
+            }
+        }
+
+        &__group-title {
+            display: flex;
+            height: 32px;
+            flex: none;
+            align-items: center;
+            color: var(--rt-nav-panel-group-color);
+            font-size: var(--rt-nav-panel-group-font-size);
+            font-weight: var(--rt-nav-panel-group-font-weight);
+            padding-inline: var(--rt-space-4);
+        }
+
+        &__row {
+            display: flex;
+            width: 100%;
+            height: 48px;
+            box-sizing: border-box;
+            flex: none;
+            align-items: center;
+            padding: 0 var(--rt-space-4);
+            border: var(--rt-page-phone-menu-border-width) solid transparent;
+            border-radius: var(--rt-page-phone-menu-row-radius);
+            background: transparent;
+            color: var(--rt-nav-item-color);
+            cursor: pointer;
+            font-family: inherit;
+            font-size: var(--rt-text-sm);
+            font-weight: var(--rt-font-weight-medium);
+            gap: calc(var(--rt-space-2) + var(--rt-space-1));
+            text-align: start;
+            text-decoration: none;
+
+            &:hover {
+                background-color: var(--rt-nav-item-color-bg-active);
+                color: var(--rt-nav-item-color-hover);
+            }
+
+            &--active {
+                border-color: var(--rt-color-border-default);
+                background-color: var(--rt-nav-item-color-bg-active);
+                font-weight: var(--rt-font-weight-semibold);
+            }
+
+            &--disabled,
+            &--disabled:hover {
+                background: transparent;
+                color: var(--rt-nav-color-disabled);
+                cursor: default;
+            }
+        }
+
+        &__list--panel &__row {
+            color: var(--rt-nav-panel-item-color);
+
+            &:hover {
+                background-color: var(--rt-nav-panel-item-color-bg-hover);
+            }
+
+            &--active,
+            &--active:hover {
+                border-color: transparent;
+                background-color: var(--rt-nav-panel-item-color-bg-active);
+                color: var(--rt-nav-panel-item-color-active);
+            }
+
+            &--disabled,
+            &--disabled:hover {
+                background: transparent;
+                color: var(--rt-nav-color-disabled);
+            }
+        }
+
+        &__icon {
+            position: relative;
+            display: flex;
+            flex: none;
+        }
+
+        &__marker {
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: var(--rt-nav-marker-size);
+            height: var(--rt-nav-marker-size);
+            border-radius: var(--rt-page-phone-menu-marker-radius);
+            background-color: var(--rt-nav-marker-color);
+        }
+
+        &__label {
+            overflow: hidden;
+            min-width: 0;
+            flex: 1 1 auto;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        &__arrow {
+            display: flex;
+            flex: none;
+        }
+    }
+}

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

@@ -0,0 +1,281 @@
+@layer rt-kit.components {
+    /* Рейка 50 по левому краю окна. На телефоне та же часть становится строкой 50: порог свой,
+       телефонный, а не общий узкий экран: планшет оставляет рейку. */
+    .rt-page-rail {
+        --rt-page-rail-border-width: var(--rt-border-width-thin);
+        --rt-page-rail-plate-radius: var(--rt-radius-md);
+        --rt-page-rail-marker-radius: var(--rt-radius-full);
+        --rt-page-rail-transition-duration: var(--rt-duration-fast);
+
+        position: sticky;
+        z-index: var(--rt-z-sticky);
+        top: 0;
+        display: flex;
+        width: 50px;
+        height: 100dvh;
+        box-sizing: border-box;
+        flex: none;
+        flex-direction: column;
+        background-color: var(--rt-nav-header-color-bg);
+
+        /* Граница лежит поверх рейки и ширины не отнимает: пункт занимает все 50, плашка стоит в 7 от края. */
+        &:after {
+            position: absolute;
+            width: var(--rt-page-rail-border-width);
+            background-color: var(--rt-color-border-default);
+            content: '';
+            inset-block: 0;
+            inset-inline-end: 0;
+            pointer-events: none;
+        }
+
+        &__burger {
+            display: none;
+            width: 36px;
+            height: 36px;
+            flex: none;
+            align-items: center;
+            justify-content: center;
+            padding: 0;
+            border: 0;
+            background: transparent;
+            color: var(--rt-nav-item-color);
+            cursor: pointer;
+        }
+
+        &__logo {
+            display: flex;
+            height: 64px;
+            box-sizing: border-box;
+            flex: none;
+            justify-content: center;
+            padding-top: var(--rt-space-5);
+        }
+
+        /* Разделы не встают: прокручивается только этот список, подвал стоит на месте. */
+        &__sections {
+            display: flex;
+            min-height: 0;
+            flex: 1 1 auto;
+            flex-direction: column;
+            -ms-overflow-style: none;
+            overflow-y: auto;
+            scrollbar-width: none;
+
+            &::-webkit-scrollbar {
+                display: none;
+            }
+        }
+
+        &__item {
+            display: flex;
+            width: 100%;
+            height: 50px;
+            flex: none;
+            align-items: center;
+            justify-content: center;
+            padding: 0;
+            border: 0;
+            background: transparent;
+            color: var(--rt-nav-item-color);
+            cursor: pointer;
+            text-decoration: none;
+
+            &:hover .rt-page-rail-plate,
+            &--open .rt-page-rail-plate {
+                background-color: var(--rt-nav-item-color-bg-active);
+                color: var(--rt-nav-item-color-hover);
+            }
+
+            &--active .rt-page-rail-plate {
+                border-color: var(--rt-color-border-default);
+                background-color: var(--rt-nav-item-color-bg-active);
+            }
+
+            &:focus-visible {
+                outline: none;
+            }
+
+            &:focus-visible .rt-page-rail-plate {
+                outline: 1px dashed var(--rt-nav-color-focus);
+                outline-offset: 1px;
+            }
+
+            &--disabled {
+                color: var(--rt-nav-color-disabled);
+                cursor: default;
+            }
+
+            &--disabled:hover .rt-page-rail-plate {
+                background-color: transparent;
+                color: inherit;
+            }
+        }
+
+        &__page {
+            display: none;
+        }
+
+        /* Панель поверх страницы и вкладок: страница и вкладки на месте. */
+        &__panel {
+            position: fixed;
+            z-index: var(--rt-z-dropdown);
+            top: 0;
+            bottom: 0;
+            left: 50px;
+            display: flex;
+            overflow: hidden auto;
+            width: 220px;
+            box-sizing: border-box;
+            flex-direction: column;
+            padding: var(--rt-space-5) calc(var(--rt-space-2) + var(--rt-space-1));
+            background-color: var(--rt-nav-panel-color-bg);
+            gap: var(--rt-space-8);
+        }
+
+        /* Граница панели тоже лежит поверх: столбец пунктов шириной 196, как в макете. */
+        &__panel:after {
+            position: absolute;
+            width: var(--rt-page-rail-border-width);
+            background-color: var(--rt-color-border-default);
+            content: '';
+            inset-block: 0;
+            inset-inline-end: 0;
+            pointer-events: none;
+        }
+
+        &__group {
+            display: flex;
+            flex-direction: column;
+            gap: var(--rt-space-0-5);
+        }
+
+        &__group-title {
+            display: flex;
+            height: 32px;
+            align-items: center;
+            color: var(--rt-nav-panel-group-color);
+            font-size: var(--rt-nav-panel-group-font-size);
+            font-weight: var(--rt-nav-panel-group-font-weight);
+            padding-inline: var(--rt-space-2);
+        }
+
+        &__panel-item {
+            display: flex;
+            width: 100%;
+            height: 32px;
+            box-sizing: border-box;
+            align-items: center;
+            padding: var(--rt-nav-panel-item-padding);
+            border: 0;
+            border-radius: var(--rt-page-rail-plate-radius);
+            background: transparent;
+            color: var(--rt-nav-panel-item-color);
+            cursor: pointer;
+            font-family: inherit;
+            font-size: var(--rt-nav-panel-item-font-size);
+            font-weight: var(--rt-nav-panel-item-font-weight);
+            text-align: start;
+            text-decoration: none;
+
+            &:hover {
+                background-color: var(--rt-nav-panel-item-color-bg-hover);
+            }
+
+            &--active,
+            &--active:hover {
+                background-color: var(--rt-nav-panel-item-color-bg-active);
+                color: var(--rt-nav-panel-item-color-active);
+            }
+
+            &--disabled {
+                color: var(--rt-nav-color-disabled);
+                cursor: default;
+            }
+        }
+
+        /* Столбец 240 поверх страницы на подложке: как `rt-side-menu` на узком экране. */
+        &__phone-backdrop {
+            position: absolute;
+            padding: 0;
+            border: 0;
+            background: var(--rt-color-bg-overlay);
+            cursor: pointer;
+            inset: 0;
+        }
+
+        &__phone-column {
+            position: relative;
+            display: flex;
+            width: 240px;
+            height: 100%;
+        }
+
+        &__phone-menu {
+            position: fixed;
+            z-index: var(--rt-z-fixed);
+            inset: 0;
+        }
+
+        @media (width <= 768px) {
+            width: 100%;
+            height: 50px;
+            flex-direction: row;
+            align-items: center;
+            gap: var(--rt-space-1);
+            padding-inline: calc(var(--rt-space-2) + var(--rt-space-1)) var(--rt-space-2);
+
+            &:after {
+                width: auto;
+                height: var(--rt-page-rail-border-width);
+                inset: auto 0 0;
+            }
+
+            &__burger {
+                display: flex;
+            }
+
+            &__logo,
+            &__sections {
+                display: none;
+            }
+
+            &__page {
+                display: flex;
+                min-width: 0;
+                flex: 1 1 auto;
+                align-items: center;
+            }
+        }
+    }
+
+    .rt-page-rail-plate {
+        position: relative;
+        display: flex;
+        width: 36px;
+        height: 36px;
+        box-sizing: border-box;
+        align-items: center;
+        justify-content: center;
+        border: var(--rt-page-rail-border-width) solid transparent;
+        border-radius: var(--rt-page-rail-plate-radius);
+        transition: background-color var(--rt-page-rail-transition-duration) linear;
+
+        /* Раздел без значка: список разделов общий с горизонтальной шапкой, где значок не обязателен. */
+        &__letter {
+            font-size: var(--rt-text-sm);
+            font-weight: var(--rt-font-weight-semibold);
+            line-height: 1;
+        }
+
+        &__marker {
+            position: absolute;
+            top: calc(var(--rt-space-1) - var(--rt-page-rail-border-width));
+            right: calc(var(--rt-space-1) - var(--rt-page-rail-border-width));
+            width: var(--rt-nav-marker-size);
+            height: var(--rt-nav-marker-size);
+            border-radius: var(--rt-page-rail-marker-radius);
+            background-color: var(--rt-nav-marker-color);
+        }
+    }
+}

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

@@ -0,0 +1,76 @@
+@layer rt-kit.components {
+    /* Ряд вкладок: аватар 16, имя и указатель, кнопка 32. */
+    .rt-page-user {
+        --rt-page-user-avatar-radius: var(--rt-radius-full);
+        --rt-page-user-avatar-border-width: var(--rt-border-width-thin);
+
+        display: inline-flex;
+        flex: none;
+
+        &__button {
+            display: inline-flex;
+            height: 32px;
+            align-items: center;
+            padding: 0 var(--rt-space-2);
+            border: 0;
+            background: transparent;
+            color: var(--rt-color-text-muted);
+            cursor: pointer;
+            gap: var(--rt-space-2);
+
+            &:focus-visible {
+                outline: 1px dashed var(--rt-nav-color-focus);
+                outline-offset: -1px;
+            }
+        }
+
+        &__avatar {
+            display: inline-flex;
+            width: 16px;
+            height: 16px;
+            box-sizing: border-box;
+            flex: none;
+            align-items: center;
+            justify-content: center;
+            border: var(--rt-page-user-avatar-border-width) solid var(--rt-nav-item-color-caret);
+            border-radius: var(--rt-page-user-avatar-radius);
+            font-size: var(--rt-text-2xs);
+            font-weight: var(--rt-font-weight-semibold);
+            line-height: var(--rt-leading-none);
+        }
+
+        &__name {
+            color: var(--rt-nav-item-color);
+            font-size: var(--rt-text-sm);
+            font-weight: var(--rt-font-weight-semibold);
+            line-height: var(--rt-leading-none);
+            white-space: nowrap;
+        }
+
+        &__caret {
+            display: inline-flex;
+            flex: none;
+            color: var(--rt-nav-item-color-caret);
+        }
+
+        /* Подвал рейки на широком экране: ячейка 50 и аватар 18. */
+        @media (width > 768px) {
+            .rt-page-actions--rail & {
+                width: 50px;
+                height: 50px;
+            }
+
+            .rt-page-actions--rail &__button {
+                width: 100%;
+                height: 100%;
+                justify-content: center;
+                padding: 0;
+            }
+
+            .rt-page-actions--rail &__avatar {
+                width: 18px;
+                height: 18px;
+            }
+        }
+    }
+}

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

@@ -288,5 +288,10 @@
         &__user--is-open {
             background-color: var(--rt-nav-item-color-bg-active);
         }
+
+        /* Рейка сама держит своё место: хост в раскладке не участвует. */
+        &--vertical {
+            display: contents;
+        }
     }
 }

package/src/lib/components/page-header/stories/component/test-page-header-vertical.component.scss

@@ -0,0 +1,72 @@
+@layer rt-kit.components {
+    .app-rail-screen {
+        --rt-app-rail-screen-logo-radius: var(--rt-radius-md);
+
+        display: flex;
+        height: 800px;
+        background: var(--rt-color-bg-page);
+        contain: paint;
+
+        @media (width > 768px) {
+            .rt-page-rail {
+                height: 100%;
+            }
+        }
+
+        &__rest {
+            display: flex;
+            min-width: 0;
+            min-height: 0;
+            flex: 1 1 0;
+            flex-direction: column;
+        }
+
+        & &__tabs {
+            --rt-tabs-list-padding-inline: var(--rt-space-2) 0;
+            --rt-tabs-arrow-fade: var(--rt-nav-header-color-bg);
+
+            background-color: var(--rt-nav-header-color-bg);
+        }
+
+        &__logo {
+            width: 24px;
+            height: 24px;
+            border-radius: var(--rt-app-rail-screen-logo-radius);
+            background-color: var(--rt-color-action-primary);
+        }
+
+        &__page {
+            overflow: hidden;
+            min-height: 0;
+            flex: 1 1 0;
+            padding: var(--rt-space-4) var(--rt-space-5) 0;
+        }
+
+        &__assistant {
+            width: 420px;
+            height: 100%;
+            box-sizing: border-box;
+            flex: none;
+            border-inline-start: 1px solid var(--rt-color-border-default);
+        }
+
+        @media (width <= 768px) {
+            height: 100dvh;
+            flex-direction: column;
+
+            &__page {
+                padding: calc(var(--rt-space-2) + var(--rt-space-1)) var(--rt-space-4) var(--rt-space-2);
+                background-color: var(--rt-color-bg-surface);
+            }
+
+            &__assistant {
+                position: absolute;
+                z-index: var(--rt-z-fixed);
+                width: 100%;
+                background-color: var(--rt-color-bg-surface);
+                border-inline-start: 0;
+                inset: 0;
+            }
+        }
+    }
+}