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

src/components/ProductionTables/CommonTable/styles/_common-table.less
153 строки6 KB
Denis Sklyarskij
Инициализирован репозиторий
14 янв 2026, 23:32
14 янв 2026, 23:321df3d47
/* Стили основной таблицы рабочего стола */
.common-table {
  /* Общий стиль таблицы */
  background-color: #ffffff;          /* Белый цвет фона */
  border: none;                      /* Убираем внешнюю границу по умолчанию */
  border-top-left-radius: 16px;  /* Скругление верхнего левого угла */
  border-top-right-radius: 16px; /* Скругление верхнего правого угла */

  /* Стили ячеек чётных строк */
  &__row:nth-child(even) &__cell {
    transition: background-color 0.3s ease-in-out; /* Плавный переход фона */
  }

  /* Стили чекбокса при наведении на чётную строку */
  &__row:nth-child(even) &__custom-checkbox {
    background-color: #FFD580; /* Оранжевый фон */
    color: #ffffff;             /* Белый текст */
  }

  /* Фон ячеек чётных строк */
  &__row:nth-child(even) &__cell {
    background-color: #D8BFD8; /* Розовый фон */
  }

  /* Стили чётных ячеек при наведении */
  &__row:nth-child(even):hover &__cell {
    background-color: #9370DB; /* Фиолетовый фон при наведении */
  }

  /* Цвет текста в ячейках чётных строк */
  &__row:nth-child(even) &__cell-text {
    color: #ffffff; /* Белый текст */
  }

  /* Общие стили ячеек таблицы */
  & &__cell {
    padding: 12px;           /* Отступы внутри ячеек */
    vertical-align: middle; /* Вертикальное выравнивание */

    // Модификатор белой темы
    &--white {
      background-color: #ffffff;
    }

    // Модификатор серой темы
    &--gray {
      background-color: #c0c0c0;
    }

    // Модификатор темной темы
    &--dark {
      background-color: #212529;
    }
  }

  /* Стили текста основной ячейки */
  &__cell-text {
    color: #c0c0c0;           /* Серый цвет текста */
    font-size: 16px;         /* Размер шрифта */
    max-width: 130px;      /* Максимальная ширина */
    overflow: hidden;        /* Скрываем переполнение */
    white-space: nowrap;    /* Запрещаем перенос текста */
    text-overflow: ellipsis; /* Многоточие в конце строки */
  }

  /* Стили обёртки чекбокса */
  &__checkbox-wrapper {
    padding-left: 0;       /* Убираем левый отступ */
  }

  /* Стили нативного чекбокса (скрытого) */
  &__checkbox-input {
    opacity: 0; // Задаем прозрачность
    margin-left: 0;      /* Убираем левый отступ */
  }

  /* Стили кастомного чекбокса */
  &__custom-checkbox {
    width: 28px;          /* Фиксированная ширина */
    height: 28px;        /* Фиксированная высота */
    border-radius: 8px; /* Скругление углов */
    background-color: #ffffff; /* Белый фон */
    color: #c0c0c0;      /* Светло‑серый цвет иконки */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); /* Тень */

    // Модификатор белой темы
    &--white {
      background-color: #ffffff;
    }

    // Модификатор серой темы
    &--gray {
      background-color: #e0e0e0;
    }

    // Модификатор темной темы
    &--dark {
      background-color: #33373b;
    }
  }
}

@media (max-width: 767px) {
  .common-table {
    /* Превращаем таблицу в вертикальный список */
    border-radius: 16px !important; /*
      Скругления для всего контейнера с приоритетом
    */
    overflow: hidden;

    // Сбрасываем табличное представление
    display: block;
    width: 100%;
    border: none;

    // Преобразуем строки таблицы в блочные контейнеры —
    // это ломает горизонтальное расположение ячеек
    // и готовит основу для вертикального стека элементов внутри строки
    tbody tr {
      display: block; // Отменяем табличное отображение
      padding: 0;    // Убираем отступы для компактности
    }

    // Ячейки внутри строки тоже делаем блочными —
    // они будут располагаться друг под другом (вертикально)
    // Это создаёт эффект «карточки» с полями вместо табличной ячейки
    tbody td {
      display: block;           // Ячейка становится блочным элементом
      padding: 16px 0 6px 16px !important; // Отступы: сверху 16px, справа 0, снизу 6px, слева 16px
      text-align: left;         // Выравниваем текст по левому краю для лучшей читаемости
    }

    /* Фон ячеек чётных строк */
    &__row:nth-child(even) &__cell {
      background-color: #ffffff;
    }

    /* Цвет текста в ячейках чётных строк */
    &__row:nth-child(even) &__cell-text {
      color: #c0c0c0; /* Белый текст */
    }

    /**
   * Стили для кастомного чекбокса
   * Задают базовые размеры и отступы элемента.
   */
    &__custom-checkbox {
      width: 25px;
      height: auto;
      margin-bottom: 0;
    }
  }
}