src/components/buttons/ColumnEditButton/_column-edit-button.less - master - DevDenzo/ERP

src/components/buttons/ColumnEditButton/_column-edit-button.less

50 строк2 KB

Denis Sklyarskij

Инициализирован репозиторий

14 янв 2026, 23:32

14 янв 2026, 23:321df3d47

// Стили кнопки редактирования столбцов таблицы
.column-edit-button {
  // Задаем размеры кнопки редактирования

  // Устанавливаем ширину
  width: 28px;
  // Назначаем высоту
  height: 28px;
  // Назначаем элементу позиционирование
  position: absolute;
  // Задаем смещение сверху
  top: 0;
  // Устанавливаем смещение слева
  left: 0;
  // Задаем прозрачный фон кнопке
  background-color: transparent;
  // Обнуляем границу по умолчанию
  border: 0;
  padding: 0;
  // Назначаем прозрачный цвет текста
  color: transparent;
  // Задаем угловые скругления кнопки
  border-radius: 8px;
  // Выполняем смещение кнопки сверху
  margin-top: 3px;
  // Задаем смещение слева для кнопки
  margin-left: 3px;

  // Задаем анимацию плавного перехода для фона, цвета и тени
  transition:
          background-color .3s ease-in-out,
          color .3s ease-in-out,
          box-shadow .3s ease-in-out;
  // Задаем стили кнопки при наведении
  &:hover {
    // Назначаем фон при наведении
    background-color: #9ec5fe;
    // Задаем цвет текста при наведении
    color: #ffffff;
  }
  // Задаем стили кнопки при фокусе
  &:focus {
    // Обнуляем тень по умолчанию
    box-shadow: none;
    // Задаем цвет фона при фокусе
    background-color: #9ec5fe;
    // Задаем цвет текста кнопки
    color: #ffffff;
  }
}