/
DevDenzo
/
ERP
Обзор
Документация
Войти
/
DevDenzo
/
ERP
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
src/components/ReferenceTables/styles/_ref-data-table-body.less
237 строк
8 KB
Denis Sklyarskij
Инициализирован репозиторий
14 янв 2026, 23:32
14 янв 2026, 23:32
1df3d47
Код
Авторство
О чём код?
// Меняем курсор перемещаемых элементов [draggable="true"] { cursor: move; } // Стили тела справочной таблицы .data-table-body { // Стили выделенной цветом строки &__row.is-highlight { // Контекст позиционирования элементов строки position: relative; // Стили фоновой подсветки &::before { // Задаем обязательное содержимое псевдоэлемента content: ""; // Позиционируем псевдоэлемент position: absolute; // Псевдоэлемент занимает весь родитель top: 0; left: 0; right: 0; bottom: 0; // Для светлого фона устанавливаем бледно-зеленую подсветку background-color: rgba(25, 135, 84, 0.3); // Отображаем поверх ячеек таблицы z-index: 1; // Выключаем взаимодействие с подсветкой pointer-events: none; } &.is-dragged { opacity: .7; background-color: #f5f5f5; } } // Стили четных строк справочной таблицы &__row:nth-child(even) &__cell { // Задаем умеренно-голубой фон ячейке background-color: #85d3e9; // Стили первых двух ячеек &:first-child, &:nth-child(2) { // Устанавливаем белый фон для этой ячейки background-color: #ffffff; } } // Стили нечетных ячеек справочной таблицы &__row:nth-child(odd) &__cell { // Назначаем белый цвет ячейке background-color: #ffffff; } // Стили для всех ячеек таблицы & &__cell { position: relative; // Обнуляем отступ внутри ячейки padding: 6px; border: 1px solid #e0e0e0; } // Стили первой ячейки таблицы &__cell:first-child { // Убираем внешнюю границу первой ячейки border: 0; // Выравниваем чекбокс по центру ячейки display: flex; justify-content: center; } // Стили ячейки с номером строки &__cell:nth-child(2) { // Выравниваем содержимое вертикально по центру vertical-align: middle; } // Стили текста первой и второй ячеек &__cell:first-child &__cell-text, &__cell:nth-child(2) &__cell-text { // Сбрасываем минимальное ограничение min-width: unset; } // Стили текста ячейки &__cell-text { text-align: center; // Задаем размер текста в ячейке font-size: 18px; // Задаем минимальную ширину текста min-width: 100px; // Ограничиваем ширину текста в ячейке max-width: 200px; // Задаем темный цвет текста color: #212529; // Назначаем жирный текст font-weight: 600; // Скрываем переполнение overflow: hidden; // Устанавливаем запрет переноса текста на новую строку white-space: nowrap; // Добавляем многоточие к строке text-overflow: ellipsis; } // Стили кнопок таблицы &__button { // Обнуляем дефолтную границу border: 0; // Изменяем внутренние отступы padding: 3px 7px; // Выравниваем кнопку по центру ячейки &--position-centered { // Позиционируем кнопку внутри ячейки position: absolute; // Устанавливаем смещение сверху top: 0; // Назначаем смещение справа right: 0; // Устанавливаем отступ сверху margin-top: 6px; // Задаем левый отступ margin-right: 6px; } // Стили кнопки редактирования текста &--edit { // Задаем угловые скругления border-radius: 8px; // Задаем прозрачный текст color: transparent; // Задаем анимированные переходы фону, цвету и тени transition: background-color .3s ease-in-out, color .3s ease-in-out, box-shadow .3s ease-in-out; // Задаем стили при наведении &:hover { // Устанавливаем цвет текста при наведении color: #4c58d6; // Добавляем тень границам при hover box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); } // Стили кнопки редактирования при фокусе &:focus { // Сбрасываем тень кнопки в фокусе box-shadow: none; } } } // Стили поля редактирования ячейки таблицы &__edit-field { // Выравниваем текст по центру text-align: center; // Обнуляем внешние границы border: 0; // Задаем прозрачный фон background-color: transparent; // Изменяем курсор при наведении на поле редактирования cursor: pointer; // Стили поля редактирования в фокусе &:focus { // Сбрасываем тень поля в фокусе box-shadow: none; // Оставляем прозрачный фон background-color: transparent; } // Стили заблокированной ячейки &.is-disabled { // Устанавливаем размеры заблокированному полю // Назначаем ширину заблокированного поля width: 35px; // Задаем высоту неактивного поля height: 35px; // Обнуляем внутренние отступы выключенного инпута padding: 0; // Выключаем взаимодействие с заблокированным полем pointer-events: none; } } // Стили кастомного чекбокса в ячейке &__checkbox { // Убираем левый отступ внутри родителя padding-left: 0; } // Стили кастомного чекбокса &__check-label { // Устанавливаем размеры чекбокса // Задаем ширину width: 28px; // Устанавливаем высоту height: 28px; // Назначаем белый фон чекбоксу background-color: #ffffff; // Для чекбокса задаем тень box-shadow: 0 4px 8px rgba(0, 0, 0, .4); // Задаем угловые скругления border-radius: 8px; // Задаем цвет содержимого color: #4c58d6; cursor: pointer; // Выравниваем внутреннее содержимое чекбокса display: flex; justify-content: center; align-items: center; } // Стили нативного чекбокса &__check-input { // Скрываем браузерный чекбокса // Назначаем ширину width: 1px; // Назначаем высоту height: 1px; // Устанавливаем полную прозрачность opacity: 0; margin-left: 0; } }