@elcrm/form 0.0.75 → 0.0.78

package/src/lib/styles/Form.module.scss

@@ -1,313 +0,0 @@
-.o {
-    position: fixed;
-    z-index: 98;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: #0000;
-}
-
-/* Всплывающее окно календаря: координаты из getBoundingClientRect — привязка к вьюпорту */
-.c {
-    box-shadow: 5px 7px 18px 0px #000000a8;
-    padding: 10px 12px 12px;
-    margin: 0;
-    display: block;
-    position: fixed;
-    background: var(--select-background);
-    z-index: 99;
-    border-radius: 10px;
-    max-height: min(92vh, 480px);
-    overflow-x: hidden;
-    overflow-y: auto;
-    color: var(--select-color, #333);
-    box-sizing: border-box;
-    min-width: 259px;
-    & [grid-calendar] {
-        display: grid;
-        grid-template-columns: repeat(7, 1fr);
-        gap: 2px;
-        /* Одинаковая высота всех строк (подписи + ряды чисел) */
-        grid-auto-rows: 34px;
-    }
-    /* Подписи дней недели — первая строка сетки */
-    & [grid-calendar] > p {
-        font-size: 0.75rem;
-        font-weight: 500;
-        line-height: 1;
-        color: var(--color-placeholder);
-        padding: 0;
-        margin: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        box-sizing: border-box;
-    }
-    & [grid-month] {
-        display: grid;
-        grid-template-columns: 1fr 1fr 1fr 1fr;
-        width: 250px;
-    }
-    & b {
-        font-weight: normal;
-        display: block;
-        padding: 8px 5px;
-        border-radius: 5px;
-        cursor: pointer;
-        text-align: center;
-        &._active {
-            background: var(--bg-select-active);
-        }
-    }
-    & b:hover {
-        background: var(--bg-select-hover);
-    }
-
-    & p {
-        color: var(--color-placeholder);
-        text-align: center;
-        padding: 0;
-        cursor: default;
-        pointer-events: none;
-    }
-
-    & i {
-        flex: 0 30px;
-        padding: 9px;
-        text-align: center;
-        cursor: pointer;
-        border-radius: 5px;
-    }
-    & i:hover {
-        background: var(--bg-select-hover);
-    }
-    & i::before {
-        cursor: pointer;
-        display: block;
-    }
-    & s {
-        display: flex;
-        font-style: normal;
-        text-decoration: none;
-        padding-bottom: 6px;
-        align-items: center;
-        gap: 4px;
-    }
-    & s h2 {
-        flex: 1 1 auto;
-        min-width: 0;
-        padding: 0;
-        margin: 0;
-        font-size: 16px;
-        text-align: center;
-        font-weight: normal;
-        line-height: 1.25;
-        color: var(--select-color, #333);
-        cursor: default;
-        display: flex;
-        flex-wrap: nowrap;
-        justify-content: center;
-        align-items: center;
-        gap: 8px;
-    }
-    /* заголовок календаря: клик по месяцу / году открывает выбор */
-    & .dateHeaderMonth,
-    & .dateHeaderYear {
-        cursor: pointer;
-        border-radius: 6px;
-        padding: 2px 8px;
-        user-select: none;
-        white-space: nowrap;
-    }
-    & .dateHeaderMonth:hover,
-    & .dateHeaderYear:hover {
-        background: var(--bg-select-hover);
-    }
-    & .dateHeaderDisabled {
-        cursor: not-allowed;
-        opacity: 0.45;
-        pointer-events: none;
-    }
-    & .dateHeaderDisabled[data-active="true"],
-    & .dateHeaderDisabled[data-current="true"] {
-        opacity: 0.45;
-    }
-
-    /* Выбранное значение поля (data-current) и «сегодня» (data-active) */
-    & [grid-calendar] b[data-current="true"],
-    & [grid-month] b[data-current="true"] {
-        background: color-mix(
-            in srgb,
-            var(--field-background-active) 52%,
-            transparent
-        );
-        font-weight: 600;
-    }
-    & [grid-calendar] b[data-active="true"]:not([data-current="true"]),
-    & [grid-month] b[data-active="true"]:not([data-current="true"]) {
-        outline: 2px solid var(--field-background-active);
-        outline-offset: -2px;
-    }
-    & [grid-calendar] b[data-active="true"][data-current="true"],
-    & [grid-month] b[data-active="true"][data-current="true"] {
-        box-shadow: inset 0 0 0 2px var(--field-background-active);
-    }
-    & [grid-calendar] p[data-current="true"] {
-        background: color-mix(
-            in srgb,
-            var(--field-background-active) 52%,
-            transparent
-        );
-        font-weight: 600;
-        color: inherit;
-        border-radius: 5px;
-    }
-    & [grid-calendar] p[data-active="true"]:not([data-current="true"]) {
-        outline: 2px solid var(--field-background-active);
-        outline-offset: -2px;
-        opacity: 0.85;
-    }
-    & [grid-calendar] p[data-active="true"][data-current="true"] {
-        box-shadow: inset 0 0 0 2px var(--field-background-active);
-    }
-
-    & span {
-        padding: 2px;
-        text-align: center;
-        & p {
-            padding: 8px 5px;
-            color: var(--color-placeholder);
-        }
-    }
-    /* Ячейки дат: без лишнего padding у span — иначе первая строка «выше» остальных */
-    & [grid-calendar] > span {
-        padding: 0;
-        display: flex;
-        align-items: stretch;
-        justify-content: stretch;
-        min-height: 0;
-        box-sizing: border-box;
-    }
-    & [grid-calendar] > span > b,
-    & [grid-calendar] > span > p {
-        flex: 1 1 auto;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 100%;
-        min-height: 0;
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-        border-radius: 5px;
-    }
-    & .as {
-        cursor: ns-resize;
-    }
-    & .ap {
-        cursor: pointer;
-    }
-}
-
-[field="password"] dd {
-    white-space: nowrap;
-    font-style: unset;
-    -webkit-text-security: disc;
-    user-select: none;
-    -webkit-user-select: text;
-}
-
-[field="password"][show] dd {
-    -webkit-text-security: none;
-}
-
-[field="password"] dd::before {
-    -webkit-text-security: none;
-}
-
-[field="code"] div {
-    display: flex;
-    gap: 8px;
-}
-
-[field="select"] dd {
-    cursor: pointer;
-}
-
-[field] dd::before {
-    pointer-events: none;
-}
-
-[field="check"] {
-    & dd {
-        max-width: 35px;
-        padding: 0;
-        cursor: pointer;
-    }
-    & [active]::after {
-        content: "";
-        background: #394264;
-        width: 15px;
-        height: 15px;
-        display: block;
-        border-radius: 5px;
-    }
-}
-
-[field="file"] {
-    & input {
-        display: none;
-    }
-    & dd {
-        aspect-ratio: 16 / 9;
-        position: relative;
-        cursor: pointer;
-    }
-    & img {
-        aspect-ratio: 16 / 9;
-        display: block;
-        width: -webkit-fill-available;
-        object-fit: contain;
-        cursor: pointer;
-    }
-    & label {
-        aspect-ratio: 16 / 9;
-        display: block;
-        width: -webkit-fill-available;
-        object-fit: contain;
-        position: absolute;
-        cursor: pointer;
-    }
-}
-
-[field="color"] {
-    & dd {
-        display: flex;
-        border: 0;
-        padding: 0;
-        gap: 3px;
-        & s {
-            border: 1px solid #dde2e4;
-            border-radius: 6px;
-            flex: 1;
-            cursor: pointer;
-            opacity: 0.6;
-            &:hover {
-                opacity: 0.9;
-            }
-            &[active="true"] {
-                opacity: 1;
-            }
-        }
-    }
-}
-
-// p: #abb6d2
-
-// background: #394264
-
-// --bg-select-active: #0000007;
-// --bg-select: #394264;
-// --bg-select-hover: #0000007;
-// --color-placeholder: #abb6d2;

package/src/lib/styles/Select.module.scss

@@ -1,107 +0,0 @@
-/*
-  Цвета списка задаются в light.css / dark.css (--select-*).
-  Здесь только размеры; fallback на светлый фон, если тема не подключена.
-*/
-:root {
-    --select-overlay: transparent;
-    --select-height: 52px;
-    --select-separator: 1px solid #c6c6c8;
-    --select-color: #000000;
-    --select-background: #ffffff;
-    --select-li-hover-bg: #f2f2f7;
-    --select-li-focus-bg: #e5e5ea;
-    --select-li-selected-bg: #e5e5ea;
-    --select-icon: calc(var(--select-height) / 1.5);
-    --select-icon-padding: calc((var(--select-height) - var(--select-icon)) / 2);
-    --select-font-size: 17px;
-}
-
-// overlay
-.o {
-    position: fixed;
-    z-index: 98;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: var(--select-overlay);
-}
-// list
-.l {
-    padding: 0;
-    margin: 0;
-    display: block;
-    position: fixed;
-    background: var(--select-background);
-    z-index: 99;
-    border-radius: 20px;
-    overflow: scroll;
-    max-height: 300px;
-    &::-webkit-scrollbar {
-        width: 0;
-        height: 0;
-    }
-}
-.l ul {
-    overflow-y: auto;
-    width: 100%;
-    max-height: 300px;
-    display: block;
-    overflow-x: hidden;
-    margin: 0;
-    padding: 0;
-    list-style: none;
-}
-.l li {
-    display: block;
-    border-bottom: var(--select-separator);
-    cursor: pointer;
-    display: block;
-    margin: 0;
-    padding: 0 14px;
-    color: var(--select-color);
-    border-left: 0 !important;
-    text-align: left !important;
-    height: var(--select-height);
-    line-height: var(--select-height);
-    font-size: var(--select-font-size);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    opacity: 1;
-}
-/* Текущее значение в форме (role=option aria-selected) */
-.l li[aria-selected="true"] {
-    background: var(--select-li-selected-bg, var(--select-li-hover-bg));
-}
-.l li:hover {
-    background: var(--select-li-hover-bg, #f2f2f7);
-}
-.l li[data-focus="true"] {
-    background: var(--select-li-focus-bg, #e5e5ea);
-}
-.l li:last-child {
-    border-bottom: 0;
-}
-
-.i {
-    position: absolute;
-    width: var(--select-icon);
-    height: var(--select-icon);
-    color: var(--field-color);
-    right: var(--select-icon-padding);
-    top: var(--select-icon-padding);
-}
-
-/** Нет выбранного значения: текст подсказки — цвет placeholder, не --field-color (иначе как обычный label) */
-.placeholderValue {
-    color: var(--field-placeholder);
-    font-weight: 400;
-}
-
-.f {
-    cursor: pointer;
-    &[aria-disabled="true"] {
-        cursor: not-allowed;
-    }
-}