s5l.ru-crm/app/index.styl

// =============================================
// Переменные цветов
// =============================================

$primary-50 = #fef2f2
$primary-100 = #fee2e2
$primary-200 = #fecaca
$primary-300 = #fca5a5
$primary-400 = #f87171
$primary-500 = #ef4444
$primary-600 = #dc2626
$primary-700 = #b91c1c
$primary-800 = #991b1b
$primary-900 = #7f1d1d

$accent-50 = #f0f9ff
$accent-100 = #e0f2fe
$accent-200 = #bae6fd
$accent-300 = #7dd3fc
$accent-400 = #38bdf8
$accent-500 = #0ea5e9
$accent-600 = #0284c7
$accent-700 = #0369a1
$accent-800 = #075985
$accent-900 = #0c4a6e

$gray-50 = #f9fafb
$gray-100 = #f3f4f6
$gray-200 = #e5e7eb
$gray-300 = #d1d5db
$gray-400 = #9ca3af
$gray-500 = #6b7280
$gray-600 = #4b5563
$gray-700 = #374151
$gray-800 = #1f2937
$gray-900 = #111827

$white = #ffffff
$black = #000000

// =============================================
// Миксины
// =============================================

flex-center()
  display: flex
  align-items: center
  justify-content: center

flex-between()
  display: flex
  align-items: center
  justify-content: space-between

transition-all($duration = 0.3s)
  transition: all $duration ease-in-out

// =============================================
// Базовые стили приложения
// =============================================

#app
  min-height: 100vh
  background-color: $white
  &.dark
    background-color: $gray-900
  transition: background-color 0.3s ease-in-out

// =============================================
// Стили header
// =============================================

.header
  background-color: $white
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)
  position: sticky
  top: 0
  z-index: 50

  .dark &
    background-color: $gray-800

.header__nav
  max-width: 1200px
  margin: 0 auto
  padding: 0.75rem 1rem

.header__nav-block
  flex-between()

.header__brand
  display: flex
  align-items: center
  gap: 0.75rem

.header__logo
  width: 2rem
  height: 2rem
  object-fit: contain

.header__company-name
  font-size: 1.25rem
  font-weight: bold
  color: $gray-900

  .dark &
    color: $white

.header__nav-menu
  display: flex
  align-items: center
  gap: 1rem

.header__menu-item
  display: flex
  align-items: center

.header__menu-link
  color: $gray-600
  transition: color 0.2s ease-in-out
  text-decoration: none

  &:hover
    color: $primary-500

  .dark &
    color: $gray-300

    &:hover
      color: $primary-500

.header__theme-toggle
  padding: 0.5rem
  border-radius: 0.5rem
  background-color: $gray-100
  color: $gray-600
  transition: all 0.2s ease-in-out
  border: none
  cursor: pointer

  &:hover
    background-color: $gray-200

  .dark &
    background-color: $gray-700
    color: $gray-300

    &:hover
      background-color: $gray-600

// =============================================
// Стили main content
// =============================================

.main
  flex: 1

// =============================================
// Анимации переходов между страницами
// =============================================

.page-slide-enter-active,
.page-slide-leave-active
  transition: all 0.3s ease-in-out

.page-slide-enter-from
  opacity: 0
  transform: translateX(1rem)

.page-slide-leave-to
  opacity: 0
  transform: translateX(-1rem)

// =============================================
// Стили footer
// =============================================

.footer
  background-color: $gray-800
  color: $white
  padding: 2rem 0

  .dark &
    background-color: $gray-900

.footer__content
  max-width: 1200px
  margin: 0 auto
  padding: 0 1rem

.footer__sections
  display: grid
  grid-template-columns: 1fr
  gap: 2rem

  @media (min-width: 768px)
    grid-template-columns: repeat(3, 1fr)

.footer__section
  display: flex
  flex-direction: column

.footer__brand
  display: flex
  align-items: center
  gap: 0.5rem
  margin-bottom: 0.5rem

.footer__logo
  width: 1.5rem
  height: 1.5rem
  object-fit: contain

.footer__section-title
  font-size: 1.125rem
  font-weight: bold
  margin-bottom: 1rem

.footer__section-text
  color: $gray-400
  margin-bottom: 0.5rem

.footer__links
  display: flex
  flex-direction: column
  gap: 0.5rem

.footer__link
  color: $gray-400
  text-decoration: none
  transition: color 0.2s ease-in-out

  &:hover
    color: $white

// =============================================
// Утилитарные классы
// =============================================

.btn-primary
  background-color: $primary-500
  color: $white
  padding: 0.5rem 1rem
  border-radius: 0.5rem
  font-weight: 500
  transition: background-color 0.2s ease-in-out
  border: none
  cursor: pointer
  text-decoration: none
  display: inline-block
  text-align: center

  &:hover
    background-color: $primary-600

.btn-secondary
  background-color: $gray-200
  color: $gray-700
  padding: 0.5rem 1rem
  border-radius: 0.5rem
  font-weight: 500
  transition: background-color 0.2s ease-in-out
  border: none
  cursor: pointer
  text-decoration: none
  display: inline-block
  text-align: center

  &:hover
    background-color: $gray-300

  .dark &
    background-color: $gray-700
    color: $gray-300

    &:hover
      background-color: $gray-600

.card
  background-color: $white
  border-radius: 0.5rem
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)
  padding: 1.5rem

  .dark &
    background-color: $gray-800

.form-input
  width: 100%
  padding: 0.5rem 0.75rem
  border: 1px solid $gray-300
  border-radius: 0.5rem
  background-color: $white
  color: $gray-900
  outline: none
  transition: all 0.2s ease-in-out

  &:focus
    outline: none
    border-color: $primary-500
    box-shadow: 0 0 0 2px rgba($primary-500, 0.2)

  .dark &
    background-color: $gray-700
    color: $white
    border-color: $gray-600

    &:focus
      border-color: $primary-500

.form-label
  display: block
  font-size: 0.875rem
  font-weight: 500
  color: $gray-700
  margin-bottom: 0.5rem

  .dark &
    color: $gray-300

// =============================================
// Адаптивные стили
// =============================================

@media (max-width: 768px)
  .header__nav-block
    flex-direction: column
    gap: 1rem

  .header__brand
    justify-content: center

  .header__nav-menu
    justify-content: center
    flex-wrap: wrap

  .footer__sections
    grid-template-columns: 1fr
    gap: 1.5rem

@media (max-width: 480px)
  .header__nav
    padding: 0.5rem

  .header__company-name
    font-size: 1.1rem

  .header__menu-link
    font-size: 0.875rem

  .footer__content
    padding: 0 0.5rem

// =============================================
// Темная тема (автоматическая)
// =============================================

@media (prefers-color-scheme: dark)
  :root
    color-scheme: dark