| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115 |
- .categories-page
- display: grid
- grid-template-columns: 1fr 400px
- gap: var(--spacing-2xl)
- max-width: 1400px
- margin: 0 auto
- .page-header
- grid-column: 1 / -1
- display: flex
- justify-content: space-between
- align-items: center
- margin-bottom: var(--spacing-2xl)
- .page-actions
- display: flex
- gap: var(--spacing-md)
- .categories-content
- display: contents
- .categories-tree
- background: var(--color-white)
- padding: var(--spacing-xl)
- border-radius: var(--border-radius)
- box-shadow: var(--shadow-sm)
-
- .theme-dark &
- background: var(--color-dark)
- .loading-state
- text-align: center
- padding: var(--spacing-2xl)
- color: var(--color-secondary)
- .tree-container
- space-y: var(--spacing-sm)
- .category-editor
- background: var(--color-white)
- padding: var(--spacing-xl)
- border-radius: var(--border-radius)
- box-shadow: var(--shadow-sm)
- height: fit-content
- position: sticky
- top: var(--spacing-xl)
-
- .theme-dark &
- background: var(--color-dark)
- .editor-form
- space-y: var(--spacing-lg)
- .form-group
- display: flex
- flex-direction: column
- gap: var(--spacing-sm)
- .form-group label
- font-weight: var(--font-weight-medium)
- color: var(--color-dark)
-
- .theme-dark &
- color: var(--color-light)
- .form-input,
- .form-select,
- .form-textarea
- padding: var(--spacing-md)
- border: 1px solid var(--border-color)
- border-radius: var(--border-radius)
- font-family: var(--font-family)
- font-size: var(--font-size-base)
-
- .theme-dark &
- background: var(--color-dark-50)
- color: var(--color-light)
- border-color: var(--color-light-10)
- .form-textarea
- resize: vertical
- min-height: 100px
- .form-actions
- display: flex
- gap: var(--spacing-md)
- justify-content: flex-end
- margin-top: var(--spacing-xl)
- .editor-placeholder
- text-align: center
- padding: var(--spacing-2xl)
- color: var(--color-secondary)
- // Адаптивность
- @media (max-width: 1024px)
- .categories-page
- grid-template-columns: 1fr
- gap: var(--spacing-xl)
-
- .category-editor
- position: static
- order: -1
- @media (max-width: 768px)
- .page-header
- flex-direction: column
- gap: var(--spacing-md)
- align-items: stretch
-
- .page-actions
- justify-content: stretch
-
- .btn
- flex: 1
|
