@mr.slonn/my-scss-theme 1.0.0

package/scss/components/_file-card.scss

@@ -0,0 +1,182 @@
+// ============================================
+// FILE CARD — CSS Classes
+// local/common/theme-moexp/src/scss/components/_file-card.scss
+// ============================================
+
+////
+/// File Card — карточка файла для скачивания
+/// CSS классы для использования в шаблонах Bitrix
+/// @group components-file-card
+/// @author MOEXP Team
+////
+
+@use "../abstracts/file-card" as fc;
+@use "../abstracts/mixins";
+@use "../abstracts/spacing";
+@use "../abstracts/typography";
+@use "../abstracts/radius";
+@use "../abstracts/breakpoints";
+
+// ============================================
+// LIST
+// ============================================
+
+// ============================================
+// LIST
+// ============================================
+
+.file-list {
+  @include fc.list;
+
+  > .file-item:not(:last-child) {
+    border-bottom: 1px solid;
+    @include mixins.border-color-hsl(border, 0.5);
+  }
+
+  // вложенный список
+  &--nested {
+    @include fc.nested;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+
+    > .file-item:not(:last-child) {
+      border-bottom: 0;
+    }
+  }
+}
+
+// позиция списка
+.file-item {
+  margin: 0;
+  padding: 0;
+
+  &--group {
+    // группа = единый визуальный блок
+    > .file-card {
+      border-bottom: 0;
+    }
+  }
+}
+
+// ============================================
+// CARD
+// ============================================
+
+.file-card {
+  @include fc.card;
+
+  // ──────────────────────────────
+  // Элементы
+  // ──────────────────────────────
+
+  &__icon {
+    @include fc.icon;
+
+    svg {
+      @include fc.icon-color(accent);
+    }
+  }
+
+  &__content {
+    @include fc.content;
+  }
+
+  &__title {
+    @include fc.title(foreground);
+  }
+
+  &__description {
+    @include fc.description(foreground-muted);
+  }
+
+  &__actions {
+    @include fc.actions;
+  }
+
+  &__meta {
+    @include fc.meta;
+  }
+
+  &__date {
+    @include fc.date(foreground-muted);
+  }
+
+  &__size {
+    @include fc.size(foreground-caption);
+  }
+
+  &__download {
+    @include fc.download;
+  }
+
+  // ──────────────────────────────
+  // Вложенная карточка
+  // ──────────────────────────────
+
+  &--nested {
+    @include fc.card-nested;
+
+    .file-card__icon {
+      width: fc.$icon-size-nested;
+      height: fc.$icon-size-nested;
+
+      svg {
+        width: fc.$icon-svg-size-nested;
+        height: fc.$icon-svg-size-nested;
+      }
+    }
+
+    .file-card__download {
+      width: fc.$download-size-nested;
+      height: fc.$download-size-nested;
+    }
+
+    .file-card__title {
+      font-size: typography.$font-size-sm;
+      margin-bottom: spacing.$spacing-2xs;
+    }
+
+    .file-card__description {
+      font-size: typography.$font-size-xs;
+    }
+  }
+
+  // ──────────────────────────────
+  // Модификаторы
+  // ──────────────────────────────
+
+  &--compact {
+    .file-card__title {
+      margin-bottom: 0;
+    }
+  }
+
+  &--static {
+    &:hover {
+      background-color: transparent;
+    }
+  }
+}
+
+// ============================================
+// STANDALONE (вне списка)
+// ============================================
+
+.file-card--standalone {
+  @include mixins.bg-color(background-card);
+  @include mixins.border-hsl(1px, solid, border, 0.5);
+  @include radius.rounded(sm);
+  overflow: hidden;
+}
+
+// ============================================
+// ACCESSIBILITY
+// ============================================
+
+@media (prefers-reduced-motion: reduce) {
+  .file-card,
+  .file-card__download {
+    transition: none !important;
+  }
+}

package/scss/components/_hero.scss

@@ -0,0 +1,103 @@
+// ============================================
+// HERO COMPONENT
+// local/common/theme-moexp/src/scss/components/_hero.scss
+// ============================================
+
+////
+/// Hero — Hero-секция с фоновым изображением
+///
+/// Готовые CSS-классы для использования в HTML.
+/// Для кастомизации используйте миксины из abstracts/hero.
+///
+/// @group components-hero
+/// @author MOEXP Team
+/// @since 1.0.0
+///
+/// @example html - Базовая структура
+///   <section class="hero">
+///     <picture class="hero__bg">
+///       <source srcset="image.webp" type="image/webp">
+///       <img src="image.jpg" alt="" width="1920" height="600">
+///     </picture>
+///
+///     <div class="container">
+///       <div class="hero__container">
+///         <h1 class="hero__title">Заголовок</h1>
+///         <p class="hero__subtitle">Подзаголовок</p>
+///         <div class="hero__actions">
+///           <a href="#" class="hero__actions-btn btn btn--primary">Кнопка 1</a>
+///           <a href="#" class="hero__actions-btn btn btn--outline">Кнопка 2</a>
+///         </div>
+///       </div>
+///     </div>
+///   </section>
+////
+
+@use "../abstracts/hero" as hero;
+@use "../abstracts/typography";
+@use "../font-vars" as fonts;
+
+// ============================================
+// BASE
+// ============================================
+
+/// Hero секция
+/// @output position: relative, overflow: hidden, overlay
+.hero {
+  @include hero.hero;
+
+  // ----------------------------------------
+  // CONTAINER
+  // ----------------------------------------
+
+  /// Контейнер контента Hero
+  /// @output max-width, padding, z-index
+  &__container {
+    @include hero.hero-container;
+  }
+
+  // ----------------------------------------
+  // TITLE
+  // ----------------------------------------
+
+  /// Заголовок Hero (h1)
+  /// @output Адаптивный размер, color
+  &__title {
+    @include typography.hero-title($font-heading: fonts.$font-golos-text);
+  }
+
+  // ----------------------------------------
+  // SUBTITLE
+  // ----------------------------------------
+
+  /// Подзаголовок Hero
+  /// @output max-width, font-size, opacity
+  &__subtitle {
+    @include typography.hero-subtitle;
+  }
+
+  // ----------------------------------------
+  // ACTIONS
+  // ----------------------------------------
+
+  /// Контейнер кнопок
+  /// @output flex, flex-wrap, gap
+  &__actions {
+    @include hero.hero-actions;
+
+    // Кнопка внутри actions
+    &-btn {
+      @include hero.hero-actions-btn;
+    }
+  }
+
+  // ----------------------------------------
+  // BACKGROUND
+  // ----------------------------------------
+
+  /// Фоновое изображение (picture)
+  /// @output Абсолютное позиционирование, object-fit
+  &__bg {
+    @include hero.hero-bg;
+  }
+}

package/scss/components/_index.scss

@@ -0,0 +1,110 @@
+// ============================================
+// COMPONENTS INDEX
+// local\common\theme-moexp\src\scss\components\_index.scss
+// ============================================
+
+////
+/// Индекс CSS-компонентов темы
+///
+/// Центральная точка входа для всех готовых CSS-компонентов.
+/// При `@use "components"` все классы попадают в итоговый CSS.
+///
+/// **Отличие от abstracts:**
+/// - `abstracts/` — миксины для использования через `@include`
+/// - `components/` — готовые CSS-классы для HTML
+///
+/// @group components
+/// @author MOEXP Team
+/// @since 1.0.0
+///
+/// @example scss - Подключение в main.scss
+///   @use "components";
+///   // → .chip, .chip--link, .chip--on-dark и т.д.
+///
+/// @example html - Использование в разметке
+///   <a href="tel:+74951234567" class="chip chip--link">
+///     <svg class="chip__icon">...</svg>
+///     <span class="chip__text">+7 (495) 123-45-67</span>
+///   </a>
+////
+
+// ─────────────────────────────────────────
+// UI ELEMENTS
+// ─────────────────────────────────────────
+
+/// Chip — компактные ссылки/кнопки с иконками
+/// @see components-chip
+@use "chip";
+
+/// Search Form — форма поиска с иконкой
+/// @see components-search-form
+@use "search-form";
+
+/// Title — заголовки
+/// @see components-section-title
+@use "section-title";
+
+/// Tag — лейбл на краточках
+/// @see components-tag
+@use "tag";
+
+/// Service Card — карточки услуг
+/// @see components-service-card
+@use "service-card";
+
+/// Callout — выноска с информацией
+/// @see components-callout
+@use "callout";
+
+/// News Card Featured — карточка с изображением
+/// @see components-news-card-featured
+@use "news-card-featured";
+
+/// News Card Compact — карточка без изображения
+/// @see components-news-card-compact
+@use "news-card-compact";
+
+/// Project Card — карточки проектов
+/// @see components-project-card
+@use "project-card";
+
+/// Stats Card — карточка статистики
+/// @see components-stats-card
+@use "stats-card";
+
+/// Buttons — кнопки всех вариантов
+/// @see components-buttons
+@use "buttons";
+
+/// Top Menu — Верхнее меню
+/// @see top-nav
+@forward "top-nav";
+
+/// Hero — Hero-секция с фоном и overlay
+/// @see components-hero
+@use "hero";
+
+/// Breadcrumb — навигационная цепочка
+/// @see components-breadcrumb
+@use "breadcrumb";
+
+/// Sidebar Menu — боковое меню навигации
+/// @see components-sidebar-menu
+@use "sidebar-menu";
+
+/// Info Card — карточка с информацией
+/// @see components-info-card
+@use "info-card";
+
+/// File Card — карточка файла для скачивания
+/// @see components-file-card
+@use "file-card";
+
+// ─────────────────────────────────────────
+// TODO: Будущие компоненты
+// ─────────────────────────────────────────
+
+// @use "badge";        // Бейджи, метки
+// @use "tag";          // Теги
+// @use "avatar";       // Аватары
+// @use "tooltip";      // Подсказки

package/scss/components/_info-card.scss

@@ -0,0 +1,103 @@
+// ============================================
+// INFO CARD — CSS Classes
+// local/common/theme-moexp/src/scss/components/_info-card.scss
+// ============================================
+
+////
+/// Info Card — карточка с информацией
+/// CSS классы для использования в шаблонах Bitrix
+/// @group components-info-card
+/// @author MOEXP Team
+////
+
+@use "../abstracts/info-card" as ic;
+@use "../abstracts/mixins";
+@use "../abstracts/spacing";
+
+// ============================================
+// CSS КЛАССЫ
+// ============================================
+
+.info-card {
+  @include ic.base;
+
+  // ──────────────────────────────
+  // Элементы
+  // ──────────────────────────────
+
+  &__title {
+    @include ic.title(foreground);
+  }
+
+  &__highlight {
+    @include ic.highlight(accent);
+  }
+
+  &__subtitle {
+    @include ic.subtitle(foreground);
+  }
+
+  &__list {
+    @include ic.list;
+  }
+
+  &__item {
+    @include ic.item;
+  }
+
+  &__label {
+    @include ic.label(foreground-muted);
+  }
+
+  &__value {
+    @include ic.value(foreground);
+  }
+
+  // ──────────────────────────────
+  // Модификаторы
+  // ──────────────────────────────
+
+  /// Компактный вариант
+  &--compact {
+    padding: spacing.$spacing-md;
+
+    .info-card__title {
+      margin-bottom: spacing.$spacing-sm;
+    }
+
+    .info-card__highlight {
+      margin-bottom: spacing.$spacing-sm;
+    }
+  }
+
+  /// Без рамки
+  &--borderless {
+    border: none;
+  }
+
+  /// На тёмном фоне
+  &--on-dark {
+    @include mixins.bg-color(primary, 0.1);
+    @include mixins.border-hsl(1px, solid, primary-foreground, 0.2);
+
+    .info-card__title {
+      @include mixins.text-color(primary-foreground);
+    }
+
+    .info-card__highlight {
+      @include mixins.text-color(accent);
+    }
+
+    .info-card__subtitle {
+      @include mixins.text-color(primary-foreground);
+    }
+
+    .info-card__label {
+      @include mixins.text-color(primary-foreground, 0.7);
+    }
+
+    .info-card__value {
+      @include mixins.text-color(primary-foreground);
+    }
+  }
+}

package/scss/components/_news-card-compact.scss

@@ -0,0 +1,33 @@
+// ============================================
+// NEWS CARD COMPACT COMPONENT
+// local/common/theme-moexp/src/scss/components/_news-card-compact.scss
+// ============================================
+
+////
+/// Compact карточка новости (без изображения)
+/// @group components-news-card-compact
+////
+
+@use "../abstracts/news-card" as nc;
+@use "../font-vars" as fonts;
+
+.news-card-compact {
+  @include nc.news-card-base;
+
+  &__content {
+    @include nc.news-card-compact-content;
+  }
+
+  &__meta {
+    @include nc.news-card-meta;
+  }
+
+  &__title {
+    font-family: fonts.$font-literata;
+    @include nc.news-card-title($size: xl, $parent-selector: ".news-card-compact");
+  }
+
+  &__description {
+    @include nc.news-card-description;
+  }
+}

package/scss/components/_news-card-featured.scss

@@ -0,0 +1,49 @@
+// ============================================
+// NEWS CARD FEATURED COMPONENT
+// local/common/theme-moexp/src/scss/components/_news-card-featured.scss
+// ============================================
+
+////
+/// Featured карточка новости (с изображением)
+/// @group components-news-card-featured
+////
+
+@use "../abstracts/news-card" as nc;
+@use "../font-vars" as fonts;
+
+.news-card-featured {
+  @include nc.news-card-base;
+
+  &__grid {
+    @include nc.news-card-featured-grid(left);
+  }
+
+  &--image-right &__grid {
+    @include nc.news-card-featured-grid(right);
+  }
+
+  &__image-wrap {
+    @include nc.news-card-featured-image-wrap;
+  }
+
+  &__image {
+    @include nc.news-card-featured-image($parent-selector: ".news-card-featured");
+  }
+
+  &__content {
+    @include nc.news-card-content;
+  }
+
+  &__meta {
+    @include nc.news-card-meta;
+  }
+
+  &__title {
+    font-family: fonts.$font-literata;
+    @include nc.news-card-title($parent-selector: ".news-card-featured");
+  }
+
+  &__description {
+    @include nc.news-card-description;
+  }
+}