@rt-tools/ui-kit-v2 0.4.0 → 0.6.0

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

@@ -1,156 +1,164 @@
-/* Мобильная панель навигации (гамбургер). Рендерится в CDK Overlay, поэтому
-   отдельный корневой блок. Раздел — аккордеон, внутри него те же группы, что и в
-   панели на широком экране, только без колонок: они сюда не помещаются. */
-.rt-page-header-mobile {
-    display: flex;
-    min-width: 240px;
-    max-width: 320px;
-
-    /* Панель ужимается до свободного места под гамбургером, а список прокручивается
-       внутри неё: на низком экране раскрытый раздел уводит половину пунктов под
-       нижний край, а страница за оверлеем панель не двигает. */
-    min-height: 0;
-    max-height: 100%;
-    box-sizing: border-box;
-    flex-direction: column;
-    padding: var(--rt-space-2);
-    border: var(--rt-border-width-thin) solid var(--rt-nav-panel-color-border);
-    border-radius: var(--rt-radius-md);
-    background-color: var(--rt-nav-panel-color-bg);
-    box-shadow: var(--rt-nav-panel-shadow);
-    gap: var(--rt-space-2xs);
-    overflow-y: auto;
-
-    &__link,
-    &__section {
-        position: relative;
+@layer rt-kit.components {
+    /* Мобильная панель навигации (гамбургер). Рендерится в CDK Overlay, поэтому
+       отдельный корневой блок. Раздел — аккордеон, внутри него те же группы, что и в
+       панели на широком экране, только без колонок: они сюда не помещаются. */
+    .rt-page-header-mobile {
+        --rt-nav-panel-radius: var(--rt-radius-md);
+        --rt-nav-panel-border-width: var(--rt-border-width-thin);
+        --rt-nav-panel-item-radius: var(--rt-radius-md);
+        --rt-nav-panel-item-transition-duration: var(--rt-duration-fast);
+        --rt-nav-marker-radius: var(--rt-radius-full);
+
         display: flex;
-        width: 100%;
-        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);
-        text-align: left;
-        text-decoration: none;
-        transition:
-            background-color var(--rt-duration-fast) linear,
-            color var(--rt-duration-fast) linear;
-        white-space: nowrap;
-
-        &:hover {
-            background-color: var(--rt-nav-panel-item-color-bg-hover);
+        min-width: 240px;
+        max-width: 320px;
+
+        /* Панель ужимается до свободного места под гамбургером, а список прокручивается
+           внутри неё: на низком экране раскрытый раздел уводит половину пунктов под
+           нижний край, а страница за оверлеем панель не двигает. */
+        min-height: 0;
+        max-height: 100%;
+        box-sizing: border-box;
+        flex-direction: column;
+        padding: var(--rt-space-2);
+        border: var(--rt-nav-panel-border-width) solid var(--rt-nav-panel-color-border);
+        border-radius: var(--rt-nav-panel-radius);
+        background-color: var(--rt-nav-panel-color-bg);
+        box-shadow: var(--rt-nav-panel-shadow);
+        gap: var(--rt-space-2xs);
+        overflow-y: auto;
+
+        &__link,
+        &__section {
+            position: relative;
+            display: flex;
+            width: 100%;
+            align-items: center;
+            padding: var(--rt-nav-item-padding);
+            border: 0;
+            border-radius: var(--rt-nav-panel-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);
+            text-align: left;
+            text-decoration: none;
+            transition:
+                background-color var(--rt-nav-panel-item-transition-duration) linear,
+                color var(--rt-nav-panel-item-transition-duration) linear;
+            white-space: nowrap;
+
+            &:hover {
+                background-color: var(--rt-nav-panel-item-color-bg-hover);
+            }
+
+            &:focus {
+                outline: none;
+            }
+
+            &:focus-visible {
+                outline: 2px dashed var(--rt-nav-color-focus);
+                outline-offset: 2px;
+            }
         }
 
-        &:focus {
-            outline: none;
+        /* Пункт второго уровня набран легче раздела — как в панели на широком
+           экране; сам раздел остаётся полужирным. */
+        &__link--child {
+            color: var(--rt-nav-panel-item-color);
+            font-weight: var(--rt-nav-panel-item-font-weight);
         }
 
-        &:focus-visible {
-            outline: 2px dashed var(--rt-nav-color-focus);
-            outline-offset: 2px;
+        &__link--is-active {
+            background-color: var(--rt-nav-panel-item-color-bg-active);
+            color: var(--rt-nav-panel-item-color-active);
         }
-    }
 
-    /* Пункт второго уровня набран легче раздела — как в панели на широком
-       экране; сам раздел остаётся полужирным. */
-    &__link--child {
-        color: var(--rt-nav-panel-item-color);
-        font-weight: var(--rt-nav-panel-item-font-weight);
-    }
-
-    &__link--is-active {
-        background-color: var(--rt-nav-panel-item-color-bg-active);
-        color: var(--rt-nav-panel-item-color-active);
-    }
-
-    &__link--disabled,
-    &__link:disabled,
-    &__link[aria-disabled='true'] {
-        background-color: transparent;
-        color: var(--rt-nav-color-disabled);
-        cursor: not-allowed;
-
-        &:hover {
+        &__link--disabled,
+        &__link:disabled,
+        &__link[aria-disabled='true'] {
             background-color: transparent;
+            color: var(--rt-nav-color-disabled);
+            cursor: not-allowed;
+
+            &:hover {
+                background-color: transparent;
+            }
         }
-    }
 
-    &__disabled-slot {
-        display: flex;
-        flex-direction: column;
-        align-items: stretch;
-    }
+        &__disabled-slot {
+            display: flex;
+            flex-direction: column;
+            align-items: stretch;
+        }
 
-    &__section--is-active {
-        background-color: var(--rt-color-bg-surface-subtle);
-    }
+        &__section--is-active {
+            background-color: var(--rt-color-bg-surface-subtle);
+        }
 
-    &__caret {
-        display: inline-flex;
-        flex-shrink: 0;
-        margin-left: auto;
-        color: var(--rt-nav-item-color-caret);
-        transition: transform var(--rt-duration-fast) linear;
-    }
+        &__caret {
+            display: inline-flex;
+            flex-shrink: 0;
+            margin-left: auto;
+            color: var(--rt-nav-item-color-caret);
+            transition: transform var(--rt-nav-panel-item-transition-duration) linear;
+        }
 
-    &__section--is-expanded &__caret {
-        transform: rotate(180deg);
-    }
+        &__section--is-expanded &__caret {
+            transform: rotate(180deg);
+        }
 
-    /* Точка идёт следом за подписью, а не поверх неё: указатель раскрытия здесь
-       отжат к правому краю, и место у текста свободно. */
-    &__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);
-    }
+        /* Точка идёт следом за подписью, а не поверх неё: указатель раскрытия здесь
+           отжат к правому краю, и место у текста свободно. */
+        &__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);
+        }
 
-    &__children {
-        display: flex;
-        flex-direction: column;
-        padding-left: var(--rt-space-4);
-        gap: var(--rt-nav-panel-group-gap);
-    }
+        &__children {
+            display: flex;
+            flex-direction: column;
+            padding-left: var(--rt-space-4);
+            gap: var(--rt-nav-panel-group-gap);
+        }
 
-    &__group {
-        display: flex;
-        flex-direction: column;
-        gap: var(--rt-space-2xs);
-    }
+        &__group {
+            display: flex;
+            flex-direction: column;
+            gap: var(--rt-space-2xs);
+        }
 
-    &__group-title {
-        display: flex;
-        min-height: var(--rt-nav-panel-item-height);
-        align-items: center;
-        padding: var(--rt-nav-panel-item-padding);
-        color: var(--rt-nav-panel-group-color);
-        cursor: default;
-        font-size: var(--rt-nav-panel-group-font-size);
-        font-weight: var(--rt-nav-panel-group-font-weight);
-        gap: var(--rt-nav-panel-group-content-gap);
-        line-height: var(--rt-leading-none);
-    }
+        &__group-title {
+            display: flex;
+            min-height: var(--rt-nav-panel-item-height);
+            align-items: center;
+            padding: var(--rt-nav-panel-item-padding);
+            color: var(--rt-nav-panel-group-color);
+            cursor: default;
+            font-size: var(--rt-nav-panel-group-font-size);
+            font-weight: var(--rt-nav-panel-group-font-weight);
+            gap: var(--rt-nav-panel-group-content-gap);
+            line-height: var(--rt-leading-none);
+        }
 
-    &__group-label {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
+        &__group-label {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
 
-    &__group-icon {
-        flex-shrink: 0;
-    }
+        &__group-icon {
+            flex-shrink: 0;
+        }
 
-    &__icon {
-        flex-shrink: 0;
+        &__icon {
+            flex-shrink: 0;
+        }
     }
 }

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

@@ -1,147 +1,154 @@
-/* Панель второго уровня. Рендерится в CDK Overlay (вне DOM хедера), поэтому
-   отдельный корневой блок, а не элемент rt-page-header.
-
-   Ширина считается числом колонок, а не содержимым: колонки разной длины иначе
-   меняли бы габарит панели при каждом переходе между разделами. Число колонок
-   приходит инлайн-переменной `--rt-nav-panel-columns` из шаблона. */
-.rt-page-header-submenu {
-    --rt-nav-panel-columns-width: calc(var(--rt-nav-panel-columns) * var(--rt-nav-panel-column-width));
-    --rt-nav-panel-gaps-width: calc((var(--rt-nav-panel-columns) - 1) * var(--rt-nav-panel-column-gap));
-    --rt-nav-panel-padding-width: calc(var(--rt-nav-panel-padding) + var(--rt-nav-panel-padding));
-
-    display: flex;
-    width: calc(var(--rt-nav-panel-columns-width) + var(--rt-nav-panel-gaps-width) + var(--rt-nav-panel-padding-width));
-    box-sizing: border-box;
-    align-items: flex-start;
-    padding: var(--rt-nav-panel-padding-y) var(--rt-nav-panel-padding);
-    border: var(--rt-border-width-thin) solid var(--rt-nav-panel-color-border);
-    border-radius: var(--rt-radius-md);
-    background-color: var(--rt-nav-panel-color-bg);
-    box-shadow: var(--rt-nav-panel-shadow);
-    color: var(--rt-nav-panel-item-color);
-    font-size: var(--rt-nav-panel-item-font-size);
-    font-weight: var(--rt-nav-panel-item-font-weight);
-    gap: var(--rt-nav-panel-column-gap);
-
-    &__column {
-        display: flex;
-        min-width: 0;
-        flex: 0 0 var(--rt-nav-panel-column-width);
-        flex-direction: column;
-        gap: var(--rt-nav-panel-group-gap);
-    }
+@layer rt-kit.components {
+    /* Панель второго уровня. Рендерится в CDK Overlay (вне DOM хедера), поэтому
+       отдельный корневой блок, а не элемент rt-page-header.
+
+       Ширина считается числом колонок, а не содержимым: колонки разной длины иначе
+       меняли бы габарит панели при каждом переходе между разделами. Число колонок
+       приходит инлайн-переменной `--rt-nav-panel-columns` из шаблона. */
+    .rt-page-header-submenu {
+        --rt-nav-panel-columns-width: calc(var(--rt-nav-panel-columns) * var(--rt-nav-panel-column-width));
+        --rt-nav-panel-gaps-width: calc((var(--rt-nav-panel-columns) - 1) * var(--rt-nav-panel-column-gap));
+        --rt-nav-panel-padding-width: calc(var(--rt-nav-panel-padding) + var(--rt-nav-panel-padding));
+        --rt-nav-panel-radius: var(--rt-radius-md);
+        --rt-nav-panel-border-width: var(--rt-border-width-thin);
+        --rt-nav-panel-item-radius: var(--rt-radius-md);
+        --rt-nav-panel-item-transition-duration: var(--rt-duration-fast);
+        --rt-nav-marker-radius: var(--rt-radius-full);
 
-    /* Пункты обжимают подпись, поэтому колонка выравнивает их по левому краю:
-       растянутый на всю ширину пункт давал бы подсветку во всю колонку. */
-    &__group {
         display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        gap: var(--rt-nav-panel-item-gap);
-    }
-
-    &__group-title {
-        display: inline-flex;
-        max-width: 100%;
-        min-height: var(--rt-nav-panel-item-height);
-        align-items: center;
-        padding: var(--rt-nav-panel-item-padding);
-        color: var(--rt-nav-panel-group-color);
-        cursor: default;
-        font-size: var(--rt-nav-panel-group-font-size);
-        font-weight: var(--rt-nav-panel-group-font-weight);
-        gap: var(--rt-nav-panel-group-content-gap);
-        line-height: var(--rt-leading-none);
-    }
-
-    &__group-label {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-
-    &__group-icon {
-        flex-shrink: 0;
-    }
-
-    &__disabled-slot {
-        display: inline-flex;
-        max-width: 100%;
-        flex-direction: column;
+        width: calc(var(--rt-nav-panel-columns-width) + var(--rt-nav-panel-gaps-width) + var(--rt-nav-panel-padding-width));
+        box-sizing: border-box;
         align-items: flex-start;
-    }
-
-    &__link {
-        display: inline-flex;
-        max-width: 100%;
-        min-height: var(--rt-nav-panel-item-height);
-        align-items: center;
-        padding: var(--rt-nav-panel-item-padding);
-        border: 0;
-        border-radius: var(--rt-radius-md);
-        background-color: transparent;
+        padding: var(--rt-nav-panel-padding-y) var(--rt-nav-panel-padding);
+        border: var(--rt-nav-panel-border-width) solid var(--rt-nav-panel-color-border);
+        border-radius: var(--rt-nav-panel-radius);
+        background-color: var(--rt-nav-panel-color-bg);
+        box-shadow: var(--rt-nav-panel-shadow);
         color: var(--rt-nav-panel-item-color);
-        cursor: pointer;
         font-size: var(--rt-nav-panel-item-font-size);
         font-weight: var(--rt-nav-panel-item-font-weight);
-        gap: var(--rt-nav-panel-item-content-gap);
-        line-height: var(--rt-leading-none);
-        text-align: left;
-        text-decoration: none;
-        transition:
-            background-color var(--rt-duration-fast) linear,
-            color var(--rt-duration-fast) linear;
-        white-space: nowrap;
-
-        &--is-active {
-            background-color: var(--rt-nav-panel-item-color-bg-active);
-            color: var(--rt-nav-panel-item-color-active);
+        gap: var(--rt-nav-panel-column-gap);
+
+        &__column {
+            display: flex;
+            min-width: 0;
+            flex: 0 0 var(--rt-nav-panel-column-width);
+            flex-direction: column;
+            gap: var(--rt-nav-panel-group-gap);
+        }
+
+        /* Пункты обжимают подпись, поэтому колонка выравнивает их по левому краю:
+           растянутый на всю ширину пункт давал бы подсветку во всю колонку. */
+        &__group {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            gap: var(--rt-nav-panel-item-gap);
         }
 
-        &:not(&--is-active):hover,
-        &:not(&--is-active):active {
-            background-color: var(--rt-nav-panel-item-color-bg-hover);
+        &__group-title {
+            display: inline-flex;
+            max-width: 100%;
+            min-height: var(--rt-nav-panel-item-height);
+            align-items: center;
+            padding: var(--rt-nav-panel-item-padding);
+            color: var(--rt-nav-panel-group-color);
+            cursor: default;
+            font-size: var(--rt-nav-panel-group-font-size);
+            font-weight: var(--rt-nav-panel-group-font-weight);
+            gap: var(--rt-nav-panel-group-content-gap);
+            line-height: var(--rt-leading-none);
         }
 
-        &:focus {
-            outline: none;
+        &__group-label {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
         }
 
-        &:focus-visible {
-            outline: 2px dashed var(--rt-nav-color-focus);
-            outline-offset: 2px;
+        &__group-icon {
+            flex-shrink: 0;
         }
 
-        &--disabled,
-        &:disabled,
-        &[aria-disabled='true'] {
+        &__disabled-slot {
+            display: inline-flex;
+            max-width: 100%;
+            flex-direction: column;
+            align-items: flex-start;
+        }
+
+        &__link {
+            display: inline-flex;
+            max-width: 100%;
+            min-height: var(--rt-nav-panel-item-height);
+            align-items: center;
+            padding: var(--rt-nav-panel-item-padding);
+            border: 0;
+            border-radius: var(--rt-nav-panel-item-radius);
             background-color: transparent;
-            color: var(--rt-nav-color-disabled);
-            cursor: not-allowed;
+            color: var(--rt-nav-panel-item-color);
+            cursor: pointer;
+            font-size: var(--rt-nav-panel-item-font-size);
+            font-weight: var(--rt-nav-panel-item-font-weight);
+            gap: var(--rt-nav-panel-item-content-gap);
+            line-height: var(--rt-leading-none);
+            text-align: left;
+            text-decoration: none;
+            transition:
+                background-color var(--rt-nav-panel-item-transition-duration) linear,
+                color var(--rt-nav-panel-item-transition-duration) linear;
+            white-space: nowrap;
+
+            &--is-active {
+                background-color: var(--rt-nav-panel-item-color-bg-active);
+                color: var(--rt-nav-panel-item-color-active);
+            }
+
+            &:not(&--is-active):hover,
+            &:not(&--is-active):active {
+                background-color: var(--rt-nav-panel-item-color-bg-hover);
+            }
+
+            &:focus {
+                outline: none;
+            }
+
+            &:focus-visible {
+                outline: 2px dashed var(--rt-nav-color-focus);
+                outline-offset: 2px;
+            }
 
-            &:hover {
+            &--disabled,
+            &:disabled,
+            &[aria-disabled='true'] {
                 background-color: transparent;
+                color: var(--rt-nav-color-disabled);
+                cursor: not-allowed;
+
+                &:hover {
+                    background-color: transparent;
+                }
             }
         }
-    }
 
-    &__label {
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
+        &__label {
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
 
-    /* Пункт панели обжимает подпись и стоит на своей строке, поэтому точка идёт
-       следом за текстом: соседей она не сдвигает, а у правого края колонки
-       оторвалась бы от подписи, к которой относится. */
-    &__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);
-    }
+        /* Пункт панели обжимает подпись и стоит на своей строке, поэтому точка идёт
+           следом за текстом: соседей она не сдвигает, а у правого края колонки
+           оторвалась бы от подписи, к которой относится. */
+        &__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);
+        }
 
-    &__icon {
-        flex-shrink: 0;
+        &__icon {
+            flex-shrink: 0;
+        }
     }
 }