@mr.slonn/my-scss-theme 1.0.0

package/scss/components/_top-nav.scss

@@ -0,0 +1,537 @@
+// ============================================
+// TOP NAV COMPONENT
+// local/common/theme-moexp/src/scss/components/_top-nav.scss
+// ============================================
+
+////
+/// Top Nav — главное меню навигации
+/// Адаптивное меню с burger на mobile и dropdown на desktop
+///
+/// @group components-top-nav
+/// @author MOEXP Team
+/// @since 1.0.0
+////
+
+@use "../abstracts/mixins";
+@use "../abstracts/spacing";
+@use "../abstracts/typography";
+@use "../abstracts/breakpoints";
+@use "../abstracts/animations";
+
+// ============================================
+// VARIABLES
+// ============================================
+
+$top-nav-mobile-width: 280px !default;
+$top-nav-mobile-max-width: 80vw !default;
+$top-nav-dropdown-min-width: 15rem !default;
+$top-nav-z-burger: 98 !default;
+$top-nav-z-overlay: 99 !default;
+$top-nav-z-panel: 100 !default;
+$top-nav-z-dropdown: 100 !default;
+
+// ============================================
+// BASE
+// ============================================
+
+.top-nav {
+  display: flex;
+  align-items: center;
+  position: relative;
+
+  // ─────────────────────────────────────────
+  // BURGER
+  // ─────────────────────────────────────────
+  &__burger {
+    display: none;
+    flex-direction: column;
+    justify-content: center;
+    gap: 5px;
+
+    width: 40px;
+    height: 40px;
+    padding: 8px;
+
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    z-index: $top-nav-z-burger;
+
+    @include breakpoints.md-down {
+      display: flex;
+      // Убрали margin-left: auto — теперь он у &__account
+      margin-left: spacing.$spacing-xs;
+    }
+
+    svg {
+      width: 24px;
+      height: 24px;
+      color: inherit;
+    }
+  }
+
+  // ─────────────────────────────────────────
+  // OVERLAY
+  // ─────────────────────────────────────────
+  &__overlay {
+    display: none;
+
+    @include breakpoints.md-down {
+      display: block;
+      position: fixed;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.5);
+      opacity: 0;
+      visibility: hidden;
+      z-index: $top-nav-z-overlay;
+
+      // Fallback
+      transition:
+        opacity 300ms ease-out,
+        visibility 300ms ease-out;
+
+      // Modern
+      @supports (transition-behavior: allow-discrete) {
+        transition:
+          opacity animations.$duration-normal animations.$ease-out,
+          visibility animations.$duration-normal animations.$ease-out;
+      }
+
+      .top-nav.is-open & {
+        opacity: 1;
+        visibility: visible;
+      }
+    }
+  }
+
+  // ─────────────────────────────────────────
+  // PANEL
+  // ─────────────────────────────────────────
+  &__panel {
+    // Desktop: растворяется
+    display: contents;
+
+    @include breakpoints.md-down {
+      display: flex;
+      flex-direction: column;
+
+      position: fixed;
+      top: 0;
+      left: 0;
+      bottom: 0;
+
+      // Fallback
+      width: $top-nav-mobile-width;
+
+      // Modern
+      width: min(#{$top-nav-mobile-width}, #{$top-nav-mobile-max-width});
+
+      @include mixins.bg-color(background-card);
+      z-index: $top-nav-z-panel;
+
+      // Fallback
+      transform: translateX(-100%);
+      transition: transform 300ms ease-out;
+
+      // Modern
+      @supports (transition-behavior: allow-discrete) {
+        transition: transform animations.$duration-normal animations.$ease-out;
+      }
+
+      .top-nav.is-open & {
+        transform: translateX(0);
+      }
+    }
+  }
+
+  // ─────────────────────────────────────────
+  // LIST
+  // ─────────────────────────────────────────
+  &__list {
+    display: flex;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    @include breakpoints.md-down {
+      flex-direction: column;
+      flex: 1;
+      padding: spacing.$spacing-md;
+      overflow-y: auto;
+    }
+  }
+
+  // ─────────────────────────────────────────
+  // CLOSE
+  // ─────────────────────────────────────────
+  &__close {
+    display: none;
+
+    @include breakpoints.md-down {
+      display: flex;
+      align-self: flex-end;
+      align-items: center;
+      justify-content: center;
+
+      width: 40px;
+      height: 40px;
+      margin: spacing.$spacing-md;
+      margin-bottom: 0;
+
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      flex-shrink: 0;
+
+      @include mixins.text-color(foreground);
+
+      svg {
+        width: 24px;
+        height: 24px;
+        color: inherit;
+      }
+
+      &:hover,
+      &:focus-visible {
+        @include mixins.text-color(accent);
+      }
+
+      &:focus-visible {
+        @include mixins.focus-ring(accent);
+      }
+    }
+  }
+
+  // ─────────────────────────────────────────
+  // ACCOUNT (иконка ЛК слева от burger)
+  // ─────────────────────────────────────────
+  &__account {
+    display: none;
+
+    @include breakpoints.md-down {
+      display: flex;
+      margin-left: auto;
+    }
+  }
+
+  // ─────────────────────────────────────────
+  // FOOTER (sticky в мобильном меню)
+  // ─────────────────────────────────────────
+  &__footer {
+    display: none;
+
+    @include breakpoints.md-down {
+      display: flex;
+      flex-direction: column;
+      flex-shrink: 0;
+
+      padding: spacing.$spacing-md;
+      margin-top: auto; // Прижимаем к низу
+
+      border-top: 1px solid;
+      @include mixins.border-color-hsl(border);
+    }
+  }
+
+  // Вертикальный список контактов
+  &__footer-contacts {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: spacing.$spacing-sm;
+
+    // Fallback для gap
+    > .chip,
+    > div > .chip {
+      margin-bottom: spacing.$spacing-xs;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    // Modern gap
+    @supports (gap: 1px) {
+      gap: spacing.$spacing-xs;
+
+      > .chip,
+      > div > .chip {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  // Горизонтальный ряд иконок
+  &__footer-icons {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+
+    // Fallback для gap
+    > .chip,
+    > div > .chip {
+      margin-right: spacing.$spacing-xs;
+      margin-bottom: spacing.$spacing-xs;
+    }
+
+    // Modern gap
+    @supports (gap: 1px) {
+      gap: spacing.$spacing-xs;
+
+      > .chip,
+      > div > .chip {
+        margin-right: 0;
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  // ─────────────────────────────────────────
+  // ITEM
+  // ─────────────────────────────────────────
+  &__item {
+    position: relative;
+
+    @include breakpoints.md-down {
+      width: 100%;
+    }
+
+    &:focus-visible {
+      @include mixins.focus-ring(accent);
+    }
+
+    // Последний item — dropdown влево
+    &:last-child .top-nav__dropdown {
+      left: auto;
+      right: 0;
+    }
+  }
+
+  // ─────────────────────────────────────────
+  // LINK
+  // ─────────────────────────────────────────
+  &__link {
+    display: block;
+    padding: spacing.$spacing-md spacing.$spacing-lg;
+    font-weight: typography.$font-weight-medium;
+    font-size: typography.$font-size-sm;
+    text-align: left;
+    text-transform: uppercase;
+    text-decoration: none;
+
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    width: 100%;
+    border-bottom: 3px solid transparent;
+
+    @include mixins.text-color(foreground-body);
+
+    // Fallback
+    transition:
+      color 150ms ease-out,
+      border-color 150ms ease-out;
+
+    @supports (transition-behavior: allow-discrete) {
+      @include animations.transition((color, border-color), animations.$duration-fast, animations.$ease-out);
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &:focus-visible {
+      @include mixins.focus-ring(accent);
+    }
+
+    &:hover {
+      @include mixins.text-color(accent);
+      @include mixins.border-color-hsl(accent);
+    }
+
+    &--active {
+      @include mixins.text-color(accent-on-light);
+      @include mixins.border-color-hsl(accent-on-light);
+    }
+
+    @include breakpoints.lg-down {
+      padding: spacing.$spacing-md spacing.$spacing-md;
+    }
+
+    @include breakpoints.md-down {
+      padding: spacing.$spacing-md spacing.$spacing-sm;
+      text-transform: none;
+      font-size: typography.$font-size-base;
+
+      // Левая граница вместо нижней
+      border-bottom: none;
+      border-left: 3px solid transparent;
+
+      &:hover,
+      &--active {
+        border-bottom: none;
+        @include mixins.border-color-hsl(accent-on-light);
+        @include mixins.bg-color(background-section);
+      }
+    }
+  }
+
+  // ─────────────────────────────────────────
+  // DROPDOWN
+  // ─────────────────────────────────────────
+  &__dropdown {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    min-width: $top-nav-dropdown-min-width;
+    z-index: $top-nav-z-dropdown;
+    padding: spacing.$spacing-md spacing.$spacing-sm;
+    list-style: none;
+    margin: 0;
+
+    @include mixins.bg-color(background-card);
+    @include mixins.shadow-lg(shadow);
+
+    // Скрыто по умолчанию
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-0.625rem);
+    display: none;
+
+    // Fallback
+    transition:
+      opacity 300ms ease-out,
+      visibility 300ms ease-out,
+      transform 300ms ease-out;
+
+    @supports (transition-behavior: allow-discrete) {
+      @include animations.transition((opacity, visibility, transform), animations.$duration-normal, animations.$ease-out);
+    }
+
+    // Открыто (через JS)
+    &--visible {
+      display: block;
+      opacity: 1;
+      visibility: visible;
+      transform: translateY(0);
+    }
+
+    // ─────────────────────────────────────────
+    // MOBILE DROPDOWN
+    // ─────────────────────────────────────────
+    @include breakpoints.md-down {
+      position: static;
+      min-width: 100%;
+      padding: 0;
+      padding-left: spacing.$spacing-sm;
+
+      box-shadow: none;
+      background: transparent;
+
+      display: none;
+      opacity: 1;
+      visibility: visible;
+      transform: none;
+
+      max-height: 0;
+      overflow: hidden;
+
+      // Fallback
+      transition: max-height 300ms ease-out;
+
+      @supports (transition-behavior: allow-discrete) {
+        @include animations.transition(max-height, animations.$duration-normal, animations.$ease-out);
+      }
+
+      &--visible {
+        display: block;
+        max-height: 500px;
+      }
+
+      &--left {
+        left: auto;
+        right: auto;
+      }
+    }
+  }
+
+  // Hover открытие только на desktop с hover
+  @media (hover: hover) and (min-width: 769px) {
+    &__item:hover > &__dropdown {
+      display: block;
+      opacity: 1;
+      visibility: visible;
+      transform: translateY(0);
+    }
+  }
+
+  // ─────────────────────────────────────────
+  // DROPDOWN ITEM
+  // ─────────────────────────────────────────
+  &__dropdown-item {
+    display: block;
+
+    &:not(:last-child) {
+      border-bottom: 1px solid;
+      @include mixins.border-color-hsl(background-section);
+    }
+  }
+
+  // ─────────────────────────────────────────
+  // DROPDOWN LINK
+  // ─────────────────────────────────────────
+  &__dropdown-link {
+    display: block;
+    padding: spacing.$spacing-md spacing.$spacing-sm;
+    text-decoration: none;
+    border-left: 3px solid transparent;
+
+    @include mixins.text-color(foreground-body);
+
+    // Fallback
+    transition:
+      color 150ms ease-out,
+      background-color 150ms ease-out,
+      border-color 150ms ease-out;
+
+    @supports (transition-behavior: allow-discrete) {
+      @include animations.transition((color, background-color, border-color), animations.$duration-fast);
+    }
+
+    &:hover,
+    &:focus-visible {
+      @include mixins.text-color(accent);
+      @include mixins.bg-color(background-section);
+      @include mixins.border-color-hsl(accent);
+    }
+
+    &:focus-visible {
+      @include mixins.focus-ring(accent);
+    }
+
+    &--active {
+      @include mixins.text-color(accent-on-light);
+      @include mixins.bg-color(background-section);
+      @include mixins.border-color-hsl(accent-on-light);
+      pointer-events: none;
+    }
+
+    @include breakpoints.md-down {
+      padding: spacing.$spacing-sm spacing.$spacing-sm;
+      font-size: typography.$font-size-sm;
+    }
+  }
+}
+
+// ============================================
+// ACCESSIBILITY
+// ============================================
+
+@media (prefers-reduced-motion: reduce) {
+  .top-nav__overlay,
+  .top-nav__panel,
+  .top-nav__link,
+  .top-nav__dropdown,
+  .top-nav__dropdown-link {
+    transition: none !important;
+  }
+}

package/scss/main.scss

@@ -0,0 +1,73 @@
+// ============================================
+// MAIN ENTRY POINT
+// local\common\theme-moexp\src\scss\main.scss
+// ============================================
+
+////
+/// Главная точка входа темы MOEXP
+///
+/// Этот файл выполняет две функции:
+/// 1. **@forward** — экспортирует абстракции для использования в других модулях
+/// 2. **@use** — генерирует CSS-классы утилит в итоговый бандл
+///
+/// @group main
+/// @author SUSPENDED
+/// @since 1.0.0
+///
+/// @example scss - Использование в компоненте (получаем миксины/переменные)
+///   // components/_card.scss
+///   @use "../main" as theme;
+///
+///   .card {
+///     @include theme.card-elevated;
+///     padding: theme.spacing(4);
+///     border-radius: theme.$radius-md;
+///   }
+///
+/// @example scss - Альтернатива: прямой импорт abstracts
+///   @use "abstracts" as *;
+///
+///   .button {
+///     @include button-primary;
+///   }
+///
+/// @example scss - Компиляция в CSS (Webpack/Vite)
+///   // entry.scss
+///   @use "theme-moexp/main";
+///   // → Получаем все utility-классы в CSS
+////
+
+// ─────────────────────────────────────────
+// ABSTRACTS (миксины, функции, переменные)
+// ─────────────────────────────────────────
+@use "api";
+
+
+// ─────────────────────────────────────────
+// UTILITIES (CSS-классы)
+// ─────────────────────────────────────────
+
+/// Генерация utility-классов в итоговый CSS
+///
+/// Включает:
+/// - `.hidden`, `.hidden-{bp}-up`, `.hidden-{bp}-down`
+/// - `.mobile-only`, `.desktop-only`
+/// - `.hidden-print`
+/// - и другие утилиты...
+///
+/// @see utilities
+@use "utilities";
+
+// ─────────────────────────────────────────
+// COMPONENTS (CSS API)
+// ─────────────────────────────────────────
+
+/// Подключение CSS-компонентов темы
+///
+/// Компоненты:
+/// - генерируют готовые CSS-классы
+/// - используются напрямую в HTML
+/// - документируются в папке `components/`
+///
+/// @see components
+@use "components";

package/scss/utilities/_index.scss

@@ -0,0 +1,40 @@
+// ============================================
+// UTILITIES INDEX
+// local\common\theme-moexp\src\scss\utilities\_index.scss
+// ============================================
+
+////
+/// Индекс всех utility-классов
+///
+/// Центральная точка входа для CSS-утилит.
+/// При `@use "utilities"` все классы попадают в итоговый CSS.
+///
+/// @group utilities
+/// @author SUSPENDED
+/// @since 1.0.0
+///
+/// @example scss - Подключение утилит (генерирует CSS)
+///   @use "utilities";
+///   // → .hidden, .hidden-md-up, .mobile-only и т.д.
+///
+/// @example scss - В main.scss
+///   @forward "abstracts";
+///   @use "utilities";
+////
+
+// ─────────────────────────────────────────
+// VISIBILITY (видимость)
+// ─────────────────────────────────────────
+
+/// Классы управления видимостью
+/// @see utilities-visibility
+@forward "visibility";
+
+// ─────────────────────────────────────────
+// TODO: Будущие утилиты
+// ─────────────────────────────────────────
+
+// @forward "spacing";      // .mt-4, .px-2, ...
+// @forward "text";         // .text-center, .text-bold, ...
+// @forward "flex";         // .flex, .justify-center, ...
+// @forward "colors";       // .bg-primary, .text-accent, ...