s5l.ru-crm/app/components/UI/Notification/index.styl

// Стили для уведомлений
.notification-container
  position: fixed
  top: var(--spacing-xl)
  right: var(--spacing-xl)
  z-index: var(--z-notification)
  display: flex
  flex-direction: column
  gap: var(--spacing-sm)
  
  @media (max-width: 768px)
    top: var(--spacing-md)
    right: var(--spacing-md)
    left: var(--spacing-md)

.notification
  position: relative
  padding: var(--spacing-md) var(--spacing-lg)
  border-radius: var(--border-radius)
  box-shadow: var(--shadow-lg)
  background: var(--color-white)
  color: var(--color-dark)
  border-left: 4px solid var(--color-primary)
  min-width: 300px
  max-width: 400px
  animation: notificationSlideIn 0.3s ease
  display: flex
  align-items: flex-start
  justify-content: space-between
  gap: var(--spacing-md)
  
  &.notification-leave-active
    animation: notificationSlideOut 0.3s ease
  
  // Типы уведомлений
  &.notification--info
    border-left-color: var(--color-primary)
    background: linear-gradient(135deg, var(--color-white) 0%, var(--color-primary-10) 100%)
  
  &.notification--success
    border-left-color: var(--color-success)
    background: linear-gradient(135deg, var(--color-white) 0%, rgba(40, 167, 69, 0.1) 100%)
  
  &.notification--error
    border-left-color: var(--color-danger)
    background: linear-gradient(135deg, var(--color-white) 0%, rgba(220, 53, 69, 0.1) 100%)
  
  &.notification--warning
    border-left-color: var(--color-warning)
    background: linear-gradient(135deg, var(--color-white) 0%, rgba(255, 193, 7, 0.1) 100%)
  
  // Контент уведомления
  .notification__content
    flex: 1
    display: flex
    flex-direction: column
    gap: var(--spacing-xs)
  
  .notification__message
    font-size: var(--font-size-base)
    line-height: var(--line-height-tight)
    margin: 0
  
  .notification__timestamp
    font-size: var(--font-size-xs)
    color: var(--color-secondary)
    opacity: 0.8
  
  .notification__close
    background: none
    border: none
    font-size: var(--font-size-lg)
    cursor: pointer
    color: var(--color-secondary)
    padding: var(--spacing-xs)
    border-radius: var(--border-radius-sm)
    transition: var(--transition-fast)
    flex-shrink: 0
    width: 24px
    height: 24px
    display: flex
    align-items: center
    justify-content: center
    
    &:hover
      background: var(--color-dark-10)
      color: var(--color-dark)

// Темная тема
.theme-dark
  .notification
    background: var(--color-dark)
    color: var(--color-light)
    border-left-color: var(--color-light-50)
    
    &.notification--info
      background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-primary-20) 100%)
    
    &.notification--success
      background: linear-gradient(135deg, var(--color-dark) 0%, rgba(40, 167, 69, 0.2) 100%)
    
    &.notification--error
      background: linear-gradient(135deg, var(--color-dark) 0%, rgba(220, 53, 69, 0.2) 100%)
    
    &.notification--warning
      background: linear-gradient(135deg, var(--color-dark) 0%, rgba(255, 193, 7, 0.2) 100%)
    
    .notification__close
      color: var(--color-light-50)
      
      &:hover
        background: var(--color-light-10)
        color: var(--color-light)

// Анимации
@keyframes notificationSlideIn
  from
    transform: translateX(100%)
    opacity: 0
  to
    transform: translateX(0)
    opacity: 1

@keyframes notificationSlideOut
  from
    transform: translateX(0)
    opacity: 1
  to
    transform: translateX(100%)
    opacity: 0

// Адаптивность
@media (max-width: 480px)
  .notification
    min-width: auto
    max-width: none
    width: 100%
    
  .notification-container
    right: var(--spacing-xs)
    left: var(--spacing-xs)