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

// Типографика
$font-family-sans = 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif
$font-family-serif = 'Georgia', 'Times New Roman', serif
$font-family-mono = 'SF Mono', 'Fira Code', 'Consolas', 'Liberation Mono', monospace

$font-size-xs = 0.75rem    // 12px
$font-size-sm = 0.875rem   // 14px
$font-size-base = 1rem     // 16px
$font-size-lg = 1.125rem   // 18px
$font-size-xl = 1.25rem    // 20px
$font-size-2xl = 1.5rem    // 24px
$font-size-3xl = 1.875rem  // 30px
$font-size-4xl = 2.25rem   // 36px
$font-size-5xl = 3rem      // 48px

$font-weight-light = 300
$font-weight-normal = 400
$font-weight-medium = 500
$font-weight-semibold = 600
$font-weight-bold = 700
$font-weight-extrabold = 800

$line-height-tight = 1.25
$line-height-normal = 1.5
$line-height-relaxed = 1.75

$letter-spacing-tight = -0.025em
$letter-spacing-normal = 0
$letter-spacing-wide = 0.025em

// Макеты и отступы
$spacing-1 = 0.25rem   // 4px
$spacing-2 = 0.5rem    // 8px
$spacing-3 = 0.75rem   // 12px
$spacing-4 = 1rem      // 16px
$spacing-5 = 1.25rem   // 20px
$spacing-6 = 1.5rem    // 24px
$spacing-8 = 2rem      // 32px
$spacing-10 = 2.5rem   // 40px
$spacing-12 = 3rem     // 48px
$spacing-16 = 4rem     // 64px
$spacing-20 = 5rem     // 80px

// Брейкпоинты
$breakpoint-sm = 640px
$breakpoint-md = 768px
$breakpoint-lg = 1024px
$breakpoint-xl = 1280px
$breakpoint-2xl = 1536px

// Тени
$shadow-sm = 0 1px 2px 0 rgba(0, 0, 0, 0.05)
$shadow-base = 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)
$shadow-md = 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)
$shadow-lg = 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)
$shadow-xl = 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)

// Скругления
$radius-sm = 0.125rem
$radius-base = 0.25rem
$radius-md = 0.375rem
$radius-lg = 0.5rem
$radius-xl = 0.75rem
$radius-2xl = 1rem
$radius-full = 9999px

// Миксины
flex-center()
  display: flex
  align-items: center
  justify-content: center

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

flex-col()
  display: flex
  flex-direction: column

container()
  max-width: 1200px
  margin: 0 auto
  padding: 0 $spacing-4

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

text-ellipsis()
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap

// Базовые сбросы
*
  margin: 0
  padding: 0
  box-sizing: border-box

html
  font-size: 16px
  line-height: $line-height-normal
  -webkit-text-size-adjust: 100%
  scroll-behavior: smooth

body
  font-family: $font-family-sans
  font-size: $font-size-base
  font-weight: $font-weight-normal
  line-height: $line-height-normal
  color: $gray-900
  background-color: $white
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale

  .dark &
    color: $white
    background-color: $gray-900

// Типографические классы
.text-xs
  font-size: $font-size-xs
  line-height: $line-height-tight

.text-sm
  font-size: $font-size-sm
  line-height: $line-height-tight

.text-base
  font-size: $font-size-base
  line-height: $line-height-normal

.text-lg
  font-size: $font-size-lg
  line-height: $line-height-normal

.text-xl
  font-size: $font-size-xl
  line-height: $line-height-normal

.text-2xl
  font-size: $font-size-2xl
  line-height: $line-height-tight

.text-3xl
  font-size: $font-size-3xl
  line-height: $line-height-tight

.text-4xl
  font-size: $font-size-4xl
  line-height: $line-height-tight

.text-5xl
  font-size: $font-size-5xl
  line-height: 1

.font-light
  font-weight: $font-weight-light

.font-normal
  font-weight: $font-weight-normal

.font-medium
  font-weight: $font-weight-medium

.font-semibold
  font-weight: $font-weight-semibold

.font-bold
  font-weight: $font-weight-bold

.font-extrabold
  font-weight: $font-weight-extrabold

.leading-tight
  line-height: $line-height-tight

.leading-normal
  line-height: $line-height-normal

.leading-relaxed
  line-height: $line-height-relaxed

.tracking-tight
  letter-spacing: $letter-spacing-tight

.tracking-normal
  letter-spacing: $letter-spacing-normal

.tracking-wide
  letter-spacing: $letter-spacing-wide

.text-center
  text-align: center

.text-left
  text-align: left

.text-right
  text-align: right

// Базовые стили приложения
#app
  min-height: 100vh
  background-color: $white
  display: flex
  flex-direction: column

  .dark &
    background-color: $gray-900

// Header
.header
  background-color: $white
  box-shadow: $shadow-sm
  position: sticky
  top: 0
  z-index: 100
  border-bottom: 1px solid $gray-200

  .dark &
    background-color: $gray-800
    border-bottom-color: $gray-700

.header__nav
  container()
  padding-top: $spacing-3
  padding-bottom: $spacing-3

.header__nav-block
  flex-between()
  gap: $spacing-4

.header__nav-name
  font-size: $font-size-2xl
  font-weight: $font-weight-bold
  background: linear-gradient(135deg, $primary-500, $accent-500)
  -webkit-background-clip: text
  -webkit-text-fill-color: transparent
  background-clip: text
  letter-spacing: $letter-spacing-tight

.header__nav-menu
  display: flex
  align-items: center
  gap: $spacing-4

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

.header__menu-link
  font-size: $font-size-sm
  font-weight: $font-weight-medium
  color: $gray-600
  text-decoration: none
  padding: $spacing-2 $spacing-3
  border-radius: $radius-md
  transition: all 0.2s ease-in-out
  position: relative

  &:hover
    color: $primary-600
    background-color: $primary-50

  .dark &
    color: $gray-300

    &:hover
      color: $primary-400
      background-color: $primary-900

.header__theme-toggle
  padding: $spacing-2
  border-radius: $radius-md
  background-color: $gray-100
  color: $gray-600
  transition: all 0.2s ease-in-out
  border: none
  cursor: pointer
  flex-center()
  width: 2.5rem
  height: 2.5rem

  &:hover
    background-color: $gray-200
    transform: scale(1.05)

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

    &:hover
      background-color: $gray-600

// Main content
.main
  flex: 1
  display: flex
  flex-direction: column

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

  &-enter-from
    opacity: 0
    transform: translateX($spacing-4)

  &-leave-to
    opacity: 0
    transform: translateX(-$spacing-4)

// Footer
.footer
  background: linear-gradient(135deg, $gray-800, $gray-900)
  color: $white
  padding: $spacing-12 0 $spacing-8
  margin-top: auto

  .dark &
    background: linear-gradient(135deg, $gray-900, $black)

.footer__content
  container()

.footer__sections
  display: grid
  grid-template-columns: 1fr
  gap: $spacing-8
  margin-bottom: $spacing-8

  @media (min-width: $breakpoint-md)
    grid-template-columns: repeat(3, 1fr)

.footer__section
  flex-col()
  gap: $spacing-4

.footer__section-title
  font-size: $font-size-lg
  font-weight: $font-weight-semibold
  color: $white
  margin-bottom: $spacing-2

.footer__section-text
  font-size: $font-size-sm
  color: $gray-400
  line-height: $line-height-relaxed

.footer__links
  flex-col()
  gap: $spacing-2

.footer__link
  font-size: $font-size-sm
  color: $gray-400
  text-decoration: none
  transition: color 0.2s ease-in-out
  padding: $spacing-1 0

  &:hover
    color: $white
    transform: translateX($spacing-1)

.footer__bottom
  border-top: 1px solid $gray-700
  padding-top: $spacing-6
  text-align: center

  .footer__copyright
    font-size: $font-size-sm
    color: $gray-500

// Утилитарные классы
.btn
  display: inline-flex
  align-items: center
  justify-content: center
  padding: $spacing-2 $spacing-4
  border-radius: $radius-lg
  font-size: $font-size-sm
  font-weight: $font-weight-medium
  text-decoration: none
  border: none
  cursor: pointer
  transition: all 0.2s ease-in-out
  gap: $spacing-2
  position: relative
  overflow: hidden

  &:focus
    outline: none
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2)

  &::before
    content: ''
    position: absolute
    top: 0
    left: -100%
    width: 100%
    height: 100%
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent)
    transition: left 0.5s

  &:hover::before
    left: 100%

.btn-primary
  background: linear-gradient(135deg, $primary-500, $primary-600)
  color: $white
  box-shadow: $shadow-md

  &:hover
    transform: translateY(-1px)
    box-shadow: $shadow-lg

.btn-secondary
  background-color: $gray-100
  color: $gray-700
  border: 1px solid $gray-300

  &:hover
    background-color: $gray-200
    transform: translateY(-1px)

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

    &:hover
      background-color: $gray-600

.btn-outline
  background-color: transparent
  color: $primary-600
  border: 2px solid $primary-500

  &:hover
    background-color: $primary-500
    color: $white
    transform: translateY(-1px)

.card
  background-color: $white
  border-radius: $radius-xl
  box-shadow: $shadow-base
  border: 1px solid $gray-200
  overflow: hidden
  transition: all 0.3s ease-in-out

  .dark &
    background-color: $gray-800
    border-color: $gray-700

  &:hover
    transform: translateY(-2px)
    box-shadow: $shadow-lg

.card__header
  padding: $spacing-6
  border-bottom: 1px solid $gray-200

  .dark &
    border-bottom-color: $gray-700

.card__title
  font-size: $font-size-xl
  font-weight: $font-weight-semibold
  color: $gray-900
  margin-bottom: $spacing-2

  .dark &
    color: $white

.card__content
  padding: $spacing-6

.card__footer
  padding: $spacing-6
  border-top: 1px solid $gray-200
  background-color: $gray-50

  .dark &
    border-top-color: $gray-700
    background-color: $gray-700

.form-group
  flex-col()
  gap: $spacing-2
  margin-bottom: $spacing-4

.form-label
  font-size: $font-size-sm
  font-weight: $font-weight-medium
  color: $gray-700
  display: block

  .dark &
    color: $gray-300

.form-input
  width: 100%
  padding: $spacing-3
  border: 2px solid $gray-300
  border-radius: $radius-lg
  background-color: $white
  color: $gray-900
  font-size: $font-size-base
  font-family: $font-family-sans
  transition: all 0.2s ease-in-out

  &:focus
    outline: none
    border-color: $primary-500
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1)
    transform: translateY(-1px)

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

    &:focus
      border-color: $primary-500

.form-textarea
  @extend .form-input
  resize: vertical
  min-height: 6rem
  line-height: $line-height-relaxed

.form-select
  @extend .form-input

// Сетка
.grid
  display: grid
  gap: $spacing-6

.grid-cols-1
  grid-template-columns: 1fr

.grid-cols-2
  grid-template-columns: repeat(2, 1fr)

.grid-cols-3
  grid-template-columns: repeat(3, 1fr)

.grid-cols-4
  grid-template-columns: repeat(4, 1fr)

@media (min-width: $breakpoint-sm)
  .sm\:grid-cols-2
    grid-template-columns: repeat(2, 1fr)

@media (min-width: $breakpoint-md)
  .md\:grid-cols-2
    grid-template-columns: repeat(2, 1fr)
  .md\:grid-cols-3
    grid-template-columns: repeat(3, 1fr)

@media (min-width: $breakpoint-lg)
  .lg\:grid-cols-3
    grid-template-columns: repeat(3, 1fr)
  .lg\:grid-cols-4
    grid-template-columns: repeat(4, 1fr)

// Отступы
.p-0 { padding: 0 }
.p-1 { padding: $spacing-1 }
.p-2 { padding: $spacing-2 }
.p-3 { padding: $spacing-3 }
.p-4 { padding: $spacing-4 }
.p-6 { padding: $spacing-6 }
.p-8 { padding: $spacing-8 }

.py-2 { padding-top: $spacing-2; padding-bottom: $spacing-2 }
.py-3 { padding-top: $spacing-3; padding-bottom: $spacing-3 }
.py-4 { padding-top: $spacing-4; padding-bottom: $spacing-4 }
.py-6 { padding-top: $spacing-6; padding-bottom: $spacing-6 }
.py-8 { padding-top: $spacing-8; padding-bottom: $spacing-8 }

.px-3 { padding-left: $spacing-3; padding-right: $spacing-3 }
.px-4 { padding-left: $spacing-4; padding-right: $spacing-4 }
.px-6 { padding-left: $spacing-6; padding-right: $spacing-6 }

// Маржины
.m-0 { margin: 0 }
.m-4 { margin: $spacing-4 }
.m-6 { margin: $spacing-6 }

.mt-2 { margin-top: $spacing-2 }
.mt-4 { margin-top: $spacing-4 }
.mt-6 { margin-top: $spacing-6 }
.mt-8 { margin-top: $spacing-8 }

.mb-2 { margin-bottom: $spacing-2 }
.mb-4 { margin-bottom: $spacing-4 }
.mb-6 { margin-bottom: $spacing-6 }
.mb-8 { margin-bottom: $spacing-8 }

// Темная тема
@media (prefers-color-scheme: dark)
  :root
    color-scheme: dark

// Адаптивность
@media (max-width: $breakpoint-md)
  .header__nav-block
    flex-direction: column
    gap: $spacing-3

  .header__nav-menu
    width: 100%
    justify-content: center
    flex-wrap: wrap

  .footer__sections
    grid-template-columns: 1fr
    gap: $spacing-6

@media (max-width: $breakpoint-sm)
  .header__nav-name
    font-size: $font-size-xl
    text-align: center

  .header__menu-link
    padding: $spacing-1 $spacing-2
    font-size: $font-size-xs

  .btn
    padding: $spacing-2 $spacing-3
    font-size: $font-size-xs

  .card__header,
  .card__content,
  .card__footer
    padding: $spacing-4