@mr.slonn/my-scss-theme 1.0.0

package/scss/components/_service-card.scss

@@ -0,0 +1,83 @@
+////
+/// Service Card — карточка услуги с иконкой
+/// CSS-классы компонента
+/// @group components-service-card
+/// @author MOEXP Team
+////
+
+@use "../abstracts/service-card" as service;
+@use "../abstracts/spacing";
+@use "../abstracts/mixins";
+
+// ============================================
+// CSS КЛАССЫ
+// ============================================
+
+.service-card {
+  @include service.base;
+
+  // ──────────────────────────────
+  // Элементы
+  // ──────────────────────────────
+
+  &__icon {
+    @include service.icon(accent);
+  }
+
+  &__title {
+    @include service.title(foreground);
+
+    // Hover на родителе
+    .service-card:hover &,
+    [class*="service-card"]:hover & {
+      @include mixins.text-color(accent);
+    }
+  }
+
+  &__description {
+    @include service.description(foreground);
+  }
+
+  // ──────────────────────────────
+  // На тёмном фоне
+  // ──────────────────────────────
+
+  &--on-dark {
+    @include mixins.bg-color(primary, 0.1);
+    @include mixins.border-hsl(1px, solid, primary-foreground, 0.2);
+
+    &:hover {
+      @include mixins.border-color-hsl(accent, 0.6);
+    }
+
+    .service-card__icon {
+      @include mixins.text-color(accent);
+    }
+
+    .service-card__title {
+      @include mixins.text-color(primary-foreground);
+
+      .service-card:hover & {
+        @include mixins.text-color(accent);
+      }
+    }
+
+    .service-card__description {
+      @include mixins.text-color(primary-foreground, 0.75);
+    }
+  }
+
+  // ──────────────────────────────
+  // С тегом (tag внутри карточки)
+  // ──────────────────────────────
+
+  &--with-tag {
+    position: relative;
+
+    .tag {
+      position: absolute;
+      top: spacing.$spacing-md;
+      right: spacing.$spacing-md;
+    }
+  }
+}

package/scss/components/_sidebar-menu.scss

@@ -0,0 +1,82 @@
+// ============================================
+// SIDEBAR MENU — CSS Classes
+// local/common/theme-moexp/src/scss/components/_sidebar-menu.scss
+// ============================================
+
+////
+/// Sidebar Menu — навигационное меню боковой панели
+/// CSS классы для использования в шаблонах Bitrix
+/// @group components-sidebar-menu
+/// @author MOEXP Team
+////
+
+@use "../abstracts/sidebar-menu" as sm;
+@use "../abstracts/mixins";
+
+// ============================================
+// CSS КЛАССЫ
+// ============================================
+
+.sidebar-menu {
+  @include sm.base;
+
+  // ──────────────────────────────
+  // Элементы
+  // ──────────────────────────────
+
+  &__header {
+    @include sm.header(primary);
+  }
+
+  &__title {
+    @include sm.title(primary-foreground);
+  }
+
+  &__nav {
+    @include sm.nav;
+  }
+
+  &__list {
+    @include sm.list;
+  }
+
+  &__item {
+    @include sm.item;
+  }
+
+  &__link {
+    @include sm.link($color: foreground-body, $hover-bg: background-section, $hover-color: accent, $border-color: accent);
+
+    &--active {
+      @include sm.link-active($bg: background-section, $color: accent, $border-color: accent);
+    }
+  }
+
+  // ──────────────────────────────
+  // Модификаторы
+  // ──────────────────────────────
+
+  /// Без заголовка
+  &--no-header {
+    .sidebar-menu__nav {
+      padding-top: sm.$nav-padding-y;
+    }
+  }
+
+  /// Компактный вариант
+  &--compact {
+    .sidebar-menu__link {
+      padding: sm.$link-padding-y * 0.75 sm.$link-padding-x;
+    }
+  }
+}
+
+// ============================================
+// ACCESSIBILITY
+// ============================================
+
+@media (prefers-reduced-motion: reduce) {
+  .sidebar-menu__link {
+    transition: none !important;
+  }
+}

package/scss/components/_stats-card.scss

@@ -0,0 +1,92 @@
+////
+/// Stats Card — карточка статистики/достижений
+/// CSS-классы компонента
+/// @group components-stats-card
+/// @author MOEXP Team
+////
+
+@use "../abstracts/stats-card" as stats;
+@use "../abstracts/spacing";
+@use "../abstracts/typography";
+@use "../abstracts/mixins";
+@use "../abstracts/breakpoints";
+
+// ============================================
+// CSS КЛАССЫ
+// ============================================
+
+.stats-card {
+  @include stats.base;
+
+  // ──────────────────────────────
+  // Элементы
+  // ──────────────────────────────
+
+  &__icon {
+    @include stats.icon(stats-icon-color);
+  }
+
+  &__content {
+    @include stats.content(background-section);
+  }
+
+  &__value {
+    @include stats.value(accent);
+  }
+
+  &__description {
+    @include stats.description(foreground);
+  }
+
+  // ──────────────────────────────
+  // На тёмном фоне
+  // ──────────────────────────────
+
+  &--on-dark {
+    .stats-card__icon {
+      @include mixins.text-color(accent);
+    }
+
+    .stats-card__content {
+      @include mixins.bg-color(primary-foreground, 0.1);
+    }
+
+    .stats-card__value {
+      @include mixins.text-color(accent);
+    }
+
+    .stats-card__description {
+      @include mixins.text-color(primary-foreground);
+    }
+  }
+
+  // ──────────────────────────────
+  // Компактный вариант
+  // ──────────────────────────────
+
+  &--compact {
+    padding-left: spacing.$spacing-xl;
+    padding-top: spacing.$spacing-xl;
+
+    .stats-card__icon {
+      width: 5rem;
+      height: 5rem;
+    }
+
+    .stats-card__content {
+      padding: spacing.$spacing-2xl spacing.$spacing-md;
+    }
+
+    .stats-card__value {
+      font-size: typography.$font-size-3xl;
+
+      @include breakpoints.lg-down {
+        font-size: typography.$font-size-2xl;
+      }
+    }
+
+    .stats-card__description {
+      font-size: typography.$font-size-base;
+    }
+  }
+}

package/scss/components/_tag.scss

@@ -0,0 +1,144 @@
+////
+/// Tag — метка/badge для категоризации
+/// Используется в карточках услуг, новостях и др.
+/// @group components-tag
+/// @author MOEXP Team
+////
+
+@use "../abstracts/typography";
+@use "../abstracts/spacing";
+@use "../abstracts/mixins";
+@use "../abstracts/radius";
+
+// ============================================
+// ПЕРЕМЕННЫЕ
+// ============================================
+
+/// Padding тега
+/// @type List
+/// @group components-tag
+$tag-padding: spacing.$spacing-xs spacing.$spacing-sm !default;
+
+/// Размер шрифта
+/// @type Number
+/// @group components-tag
+$tag-font-size: typography.$font-size-xs !default;
+
+// ============================================
+// МИКСИНЫ
+// ============================================
+
+/// Базовые стили тега
+/// @param {String} $bg-color [background-section] - Фон
+/// @param {String} $text-color [foreground-muted] - Цвет текста
+/// @output Стили badge/tag
+/// @group components-tag
+@mixin tag-base($bg-color: background-section, $text-color: foreground-muted) {
+  display: inline-block;
+  padding: $tag-padding;
+
+  font-size: $tag-font-size;
+  font-weight: typography.$font-weight-semibold;
+  line-height: typography.$line-height-normal;
+
+  @include mixins.bg-color($bg-color);
+  @include mixins.text-color($text-color);
+  @include radius.rounded(sm);
+}
+
+/// Тег с абсолютным позиционированием (для карточек)
+/// @param {String} $position [top-right] - Позиция: top-right, top-left, bottom-right, bottom-left
+/// @output Абсолютное позиционирование
+/// @group components-tag
+@mixin tag-absolute($position: top-right) {
+  position: absolute;
+
+  @if $position == top-right {
+    top: spacing.$spacing-md;
+    right: spacing.$spacing-md;
+  } @else if $position == top-left {
+    top: spacing.$spacing-md;
+    left: spacing.$spacing-md;
+  } @else if $position == bottom-right {
+    bottom: spacing.$spacing-md;
+    right: spacing.$spacing-md;
+  } @else if $position == bottom-left {
+    bottom: spacing.$spacing-md;
+    left: spacing.$spacing-md;
+  }
+}
+
+/// Тег для тёмного фона
+/// @output Инвертированные цвета
+/// @group components-tag
+@mixin tag-on-dark {
+  @include mixins.bg-color(primary-foreground, 0.15);
+  @include mixins.text-color(primary-foreground, 0.9);
+}
+
+/// Тег для акцентного фона
+/// @output Акцентные цвета
+/// @group components-tag
+@mixin tag-on-accent {
+  @include mixins.bg-color(accent-foreground, 0.15);
+  @include mixins.text-color(accent-foreground, 0.9);
+}
+
+// ============================================
+// CSS КЛАССЫ
+// ============================================
+
+.tag {
+  @include tag-base;
+
+  // ──────────────────────────────
+  // Модификаторы позиции
+  // ──────────────────────────────
+
+  /// Абсолютная позиция (требует position: relative у родителя)
+  &--absolute {
+    @include tag-absolute(top-right);
+  }
+
+  &--top-left {
+    @include tag-absolute(top-left);
+  }
+
+  &--bottom-right {
+    @include tag-absolute(bottom-right);
+  }
+
+  &--bottom-left {
+    @include tag-absolute(bottom-left);
+  }
+
+  // ──────────────────────────────
+  // Модификаторы цвета
+  // ──────────────────────────────
+
+  /// На тёмном фоне
+  &--on-dark {
+    @include tag-on-dark;
+  }
+
+  /// На акцентном фоне
+  &--on-accent {
+    @include tag-on-accent;
+  }
+
+  // ──────────────────────────────
+  // Модификаторы размера
+  // ──────────────────────────────
+
+  /// Маленький тег
+  &--sm {
+    padding: spacing.$spacing-2xs spacing.$spacing-xs;
+    font-size: typography.$font-size-2xs;
+  }
+
+  /// Большой тег
+  &--lg {
+    padding: spacing.$spacing-sm spacing.$spacing-md;
+    font-size: typography.$font-size-sm;
+  }
+}