src/components/ProductionTables/styles/_reference-table.less - master - DevDenzo/ERP

src/components/ProductionTables/styles/_reference-table.less
129 строк5 KB
Denis Sklyarskij
Инициализирован репозиторий
14 янв 2026, 23:32
14 янв 2026, 23:321df3d47
// Стили таблицы справочника
.reference-table {
  // Стили основного контейнера чекбокса
  &__checkbox {
    // Обнуляем отступы слева по умолчанию

    // Обнуляем внутренний левый отступ
    padding-left: 0;
    // Обнуляем внешний левый отступ
    margin-left: 0;
  }
  // Стили нативного чекбокса
  &__check-input {
    // Прячем нативный чекбокс

    // Задаем ширину чекбокса
    width: 1px;
    // Задаем высоту чекбокса
    height: 1px;
    // Делаем элемент полностью прозрачным
    opacity: 0;
  }
  // Стили кастомного чекбокса
  &__check-label {
    // Задаем размеры кастомного чекбокса

    // Назначаем ширину чекбокса
    width: 28px;
    // Устанавливаем высоту чекбокса
    height: 28px;
    // Задаем угловые скругления
    border-radius: 8px;
    // Задаем голубой фон
    background-color: #0dcaf0;
    // Устанавливаем темный текст
    color: #212529;
    // Устанавливаем тень чекбоксу
    box-shadow: 0 4px 8px rgba(0, 0, 0, .4);

    // Стили выравнивания содержимого по центру контейнера
    display: flex;
    justify-content: center;
    align-items: center;
  }
  // Текст ячейки таблицы
  &__cell-text {
    // Задаем размер шрифта
    font-size: 18px;
    // Задаем максимальную ширину блока с текстом
    max-width: 125px;

    // Устанавливаем стили обрезки текста

    // Скрываем переполнение блока
    overflow: hidden;
    // Добавляем многоточие к тексту
    text-overflow: ellipsis;
    // Запрещаем перенос текста на новую строку
    white-space: nowrap;
    // Задаем цвет текста
    color: #6c757d;
    // Задаем среднюю жирность
    font-weight: 500;
  }
  // Стили текста широкой ячейки
  &__cell--wide &__cell-text {
    max-width: 165px;
  }
  // Стили кнопки ячейки справочника
  &__button-cell {
    // Задаем ширину кнопке показа списка
    width: 33px;
    // Задаем высоту кнопке списка
    height: 33px;
    // Задаем угловые скругления кнопке
    border-radius: 8px;
    // Задаем цвет текста
    color: #1e85e9;
    // Обнуляем внутренние отступы по умолчанию
    padding: 0;
    // Задаем тень кнопке
    box-shadow: 0 4px 8px rgba(0, 0, 0, .4);
    // Задаем плавный переход для формы кнопки, и тени
    transition:
            border-radius .3s ease-in-out,
            box-shadow .3s ease-in-out;
    // Задаем стили при наведении
    &:hover {
      // Оставляем цвет при наведении
      color: #1e85e9;
      // Задаем круглую форму при наведении
      border-radius: 50%;
    }
    // Задаем стили при фокусе
    &:focus {
      // Сбрасываем тень по умолчанию
      box-shadow: none;
      // Оставляем цвет при фокусе
      color: #1e85e9;
    }
  }
  // Стили кнопки активации дочернего списка
  &__button-toggle {
    // Задаем размеры кнопке активации

    // Назначаем ширину
    width: 33px;
    // Назначаем высоту
    height: 33px;
    // Задаем скругления углов
    border-radius: 8px;
    // Убираем внутренние отступы по умолчанию
    padding: 0;
    // Задаем анимацию плавного перехода для формы кнопки
    transition: border-radius .3s ease-in-out;
    // Стили кнопки активации при наведении
    &:hover {
      // Задаем круглую форму при наведении
      border-radius: 50%;
    }
    // Стили кнопки активации при фокусе
    &:focus {
      // Убираем тень по умолчанию при фокусе
      box-shadow: none;
      // Оставляем круглую форму при нахождении в фокусе
      border-radius: 50%;
    }
  }
}