src/components/ReferenceTables/styles/_reference-header.less - master - DevDenzo/ERP

src/components/ReferenceTables/styles/_reference-header.less
58 строк4 KB
Denis Sklyarskij
Инициализирован репозиторий
14 янв 2026, 23:32
14 янв 2026, 23:321df3d47
// Стили для компонента шапки таблицы (.reference-header)

.reference-header {
  // Стили для чекбокса выбора (общий контейнер)
  &__checkbox {
    padding-left: 0;  // Убираем левый отступ внутри контейнера чекбокса
    margin-left: 0;   // Убираем внешний левый отступ
  }

  // Стили для скрытого входного элемента чекбокса
  &__check-input {
    width: 14px;           // Фиксированная ширина чекбокса
    height: 14px;         // Фиксированная высота чекбокса
    margin-left: 6px;   // Отступ слева для визуального выравнивания
    opacity: 0;          // Полностью скрываем стандартный чекбокс (оставляем только кастомную метку)
  }

  // Стили для визуальной метки чекбокса (label)
  &__check-label {
    width: 28px;                        // Ширина метки
    height: 28px;                   // Высота метки
    border-radius: 8px;           // Скругление углов
    background-color: #ffffff;    // Белый фон метки
    display: flex;                // Используем flex-разметку для центрирования содержимого
    justify-content: center;     // Горизонтальное центрирование
    align-items: center;        // Вертикальное центрирование
    box-shadow: 0 4px 8px rgba(0, 0, 0, .4);  // Тень для объёмного эффекта
    color: #4c58d6;              // Синий цвет иконки/текста внутри метки
    cursor: pointer;              // Курсор-указатель для интерактивности
  }

  // Стили для ячейки заголовка таблицы
  & &__cell--header {
    height: 40px;                  // Фиксированная высота ячейки заголовка
    padding: 6px;               // Внутренние отступы
    background-color: #0dcaf0;  // Голубой фон для заголовков
    border-top: 0;            // Убираем верхнюю границу
    border-bottom: 0;         // Убираем нижнюю границу

    // Особые стили для первой ячейки заголовка (обычно содержит чекбокс выбора)
    &:first-child {
      display: flex;              // Используем flex-разметку
      justify-content: center;   // Центрируем содержимое по горизонтали
    }
  }

  // Стили для текста внутри ячеек заголовка
  &__cell-text {
    text-align: center;           // Выравнивание текста по центру
    font-size: 18px;             // Размер шрифта
    max-width: 125px;           // Максимальная ширина текста (ограничение для обрезки)
    overflow: hidden;             // Скрываем выходящий за границы текст
    text-overflow: ellipsis;     // Добавляем многоточие при обрезке
    white-space: nowrap;          // Запрещаем перенос текста на новую строку
    color: #212529;              // Тёмно‑серый цвет текста
    font-weight: 600;          // Полужирное начертание
  }
}