src/components/AppContainers/MenuAppContainer/styles/_menu-app-container.less - master - DevDenzo/ERP

src/components/AppContainers/MenuAppContainer/styles/_menu-app-container.less

42 строки2 KB

Denis Sklyarskij

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

14 янв 2026, 23:32

14 янв 2026, 23:321df3d47

/**
 * Стили контейнера меню приложений
 *
 * Базовый контейнер для меню приложений с фиксированной шириной, интерактивными состояниями
 * и визуальными эффектами (анимация, тени). Обеспечивает удобное взаимодействие
 * и плавные переходы между состояниями.
 */
.menu-app-container {
  width: 80%;
  /* Изменение курсора на указатель при наведении — визуальный сигнал интерактивности */
  cursor: pointer;

  /* Плавная анимация всех изменяемых свойств (0.3с, функция ease)
   * Обеспечивает мягкий визуальный переход при изменении состояния элемента */
  transition: all 0.3s ease;

  /* Разрешаем обработку событий указателя (клики, наведение и т.д.) */
  pointer-events: auto;

  // Скругление границ контейнера
  border-radius: 16px;

  /**
   * Стили для активного состояния контейнера (класс .has-active)
   * Добавляет объём и акцент через тень, подчёркивая текущее активное меню.
   */
  &.has-active {
    /* Двойная тень для создания эффекта глубины:
     * - первая тень: смещение 4px, размытие 8px, прозрачность 15%; */
    box-shadow:
            0 4px 8px 0 rgba(0, 0, 0, 0.15)
  }

  /**
   * Дополнительные стили для элемента .slider внутри активного контейнера
   * Гарантирует, что слайдер остаётся интерактивным в активном состоянии.
   */
  &.has-active .carousel-panel {
    /* Разрешаем события указателя для элемента .slider */
    pointer-events: auto;
  }
}