@mr.slonn/my-scss-theme 1.0.0

package/scss/abstracts/cards/_featured.scss

@@ -0,0 +1,363 @@
+// ============================================
+// CARDS — FEATURED
+// local/common/theme-moexp/src/scss/abstracts/cards/_featured.scss
+// ============================================
+
+////
+/// Featured карточки с изображением
+/// Горизонтальная и вертикальная раскладка
+/// @group cards-featured
+/// @author MOEXP Team
+////
+
+@use "../mixins";
+@use "../radius";
+@use "../spacing";
+@use "../typography";
+@use "../animations";
+@use "../breakpoints";
+@use "variables" as *;
+
+// ─────────────────────────────────────────
+// FEATURED CONTAINER
+// ─────────────────────────────────────────
+
+/// Карточка с изображением — контейнер
+/// Горизонтальная раскладка на десктопе
+/// @param {String} $image-position [left] - Позиция изображения: left или right
+/// @require {mixin} mixins.bg-color
+/// @require {mixin} mixins.border-hsl
+/// @require {mixin} radius.rounded
+/// @require {mixin} mixins.shadow-sm
+/// @require {mixin} animations.transition
+/// @require {mixin} mixins.shadow-xl
+/// @require {mixin} mixins.border-color-hsl
+/// @example scss
+///   .news-featured {
+///     @include card-featured('right');
+///   }
+/// @output Контейнер featured карточки
+/// @group cards-featured
+/// @access public
+@mixin card-featured($image-position: left) {
+  position: relative;
+  overflow: hidden;
+
+  display: block;
+  text-decoration: none;
+  color: inherit;
+
+  @include mixins.bg-color(background-card);
+  @include mixins.border-hsl(1px, solid, border, 0.5);
+  @include radius.rounded(lg);
+  @include mixins.shadow-sm;
+
+  cursor: pointer;
+
+  @include animations.transition((box-shadow, border-color), $card-featured-transition, animations.$ease-in-out);
+
+  &:hover {
+    @include mixins.shadow-xl;
+    @include mixins.border-color-hsl(accent, 0.5);
+  }
+}
+
+// ─────────────────────────────────────────
+// FEATURED GRID
+// ─────────────────────────────────────────
+
+/// Grid layout для featured card
+/// @param {String} $image-position [left] - Позиция изображения: left или right
+/// @require {mixin} breakpoints.md
+/// @example scss
+///   .news-featured__grid {
+///     @include card-featured-grid('right');
+///   }
+/// @output Grid с адаптивной раскладкой
+/// @group cards-featured
+/// @access public
+@mixin card-featured-grid($image-position: left) {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0;
+
+  @include breakpoints.md {
+    grid-template-columns: 1fr 1fr;
+
+    @if $image-position == right {
+      // Изображение справа — меняем порядок
+      > *:first-child {
+        order: 2;
+      }
+      > *:last-child {
+        order: 1;
+      }
+    }
+  }
+}
+
+// ─────────────────────────────────────────
+// FEATURED IMAGE
+// ─────────────────────────────────────────
+
+/// Контейнер изображения featured card
+/// @require {mixin} breakpoints.md
+/// @example scss
+///   .news-featured__image-wrap {
+///     @include card-featured-image-wrapper;
+///   }
+/// @output Контейнер с адаптивной высотой
+/// @group cards-featured
+/// @access public
+@mixin card-featured-image-wrapper {
+  position: relative;
+  height: $card-featured-image-height;
+  overflow: hidden;
+
+  @include breakpoints.md {
+    height: auto;
+    min-height: $card-featured-image-height;
+  }
+}
+
+/// Изображение featured card с hover эффектом
+/// @require {mixin} animations.transition
+/// @example scss
+///   .news-featured__image {
+///     @include card-featured-image;
+///   }
+/// @output Изображение cover с scale при hover родителя
+/// @group cards-featured
+/// @access public
+@mixin card-featured-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+
+  @include animations.transition(transform, $card-featured-transition, animations.$ease-out);
+
+  // Hover на родителе (group hover)
+  .card-featured:hover &,
+  [class*="card"]:hover & {
+    transform: scale(1.05);
+  }
+}
+
+// ─────────────────────────────────────────
+// FEATURED CONTENT
+// ─────────────────────────────────────────
+
+/// Контент featured card
+/// @example scss
+///   .news-featured__content {
+///     @include card-featured-content;
+///   }
+/// @output Flex column с центрированием
+/// @group cards-featured
+/// @access public
+@mixin card-featured-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: $card-featured-padding;
+}
+
+/// Мета-информация featured card (дата, категория)
+/// @param {String} $color [accent-on-light] - Цвет текста
+/// @require {mixin} mixins.text-color
+/// @example scss
+///   .news-featured__meta {
+///     @include card-featured-meta('primary');
+///   }
+/// @output Flex строка с иконкой и текстом
+/// @group cards-featured
+/// @access public
+@mixin card-featured-meta($color: accent-on-light) {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+
+  @include mixins.text-color($color);
+
+  svg {
+    width: 1.25rem;
+    height: 1.25rem;
+    flex-shrink: 0;
+  }
+
+  span {
+    font-size: typography.$font-size-base;
+    font-weight: typography.$font-weight-medium;
+  }
+}
+
+/// Заголовок featured card с hover эффектом
+/// @param {String} $color [foreground] - Цвет текста
+/// @param {String} $hover-color [accent] - Цвет при hover
+/// @require {mixin} mixins.text-color
+/// @require {mixin} animations.transition
+/// @example scss
+///   .news-featured__title {
+///     @include card-featured-title('foreground', 'accent-on-light');
+///   }
+/// @output Заголовок с hover цветом
+/// @group cards-featured
+/// @access public
+@mixin card-featured-title($color: foreground, $hover-color: accent) {
+  font-weight: typography.$font-weight-bold;
+  font-size: typography.$font-size-2xl;
+  line-height: typography.$line-height-tight;
+  margin-bottom: 1rem;
+
+  @include mixins.text-color($color);
+  @include animations.transition(color, $card-featured-transition);
+
+  .card-featured:hover &,
+  [class*="card"]:hover & {
+    @include mixins.text-color($hover-color);
+  }
+}
+
+/// Описание featured card
+/// @param {String} $color [foreground-muted] - Цвет текста
+/// @require {mixin} mixins.text-color
+/// @example scss
+///   .news-featured__description {
+///     @include card-featured-description;
+///   }
+/// @output Параграф с muted цветом
+/// @group cards-featured
+/// @access public
+@mixin card-featured-description($color: foreground-muted) {
+  font-size: typography.$font-size-base;
+  line-height: typography.$line-height-relaxed;
+
+  @include mixins.text-color($color);
+}
+
+// ─────────────────────────────────────────
+// ВЕРТИКАЛЬНАЯ FEATURED CARD
+// ─────────────────────────────────────────
+
+/// Вертикальная featured карточка (изображение сверху)
+/// @require {mixin} mixins.bg-color
+/// @require {mixin} mixins.border-hsl
+/// @require {mixin} radius.rounded
+/// @require {mixin} animations.transition
+/// @require {mixin} mixins.shadow-xl
+/// @require {mixin} mixins.border-color-hsl
+/// @example scss
+///   .project-card {
+///     @include card-featured-vertical;
+///   }
+/// @output Вертикальная карточка с hover
+/// @group cards-featured
+/// @access public
+@mixin card-featured-vertical {
+  position: relative;
+  overflow: hidden;
+
+  display: block;
+  text-decoration: none;
+  color: inherit;
+
+  @include mixins.bg-color(background-card);
+  @include mixins.border-hsl(1px, solid, border, 0.5);
+  @include radius.rounded(lg);
+
+  cursor: pointer;
+
+  @include animations.transition((box-shadow, border-color), $card-featured-transition, animations.$ease-in-out);
+
+  &:hover {
+    @include mixins.shadow-xl;
+    @include mixins.border-color-hsl(accent, 0.5);
+  }
+}
+
+/// Обёртка изображения вертикальной featured карточки
+/// @example scss
+///   .project-card__image-wrap {
+///     @include card-featured-vertical-image-wrapper;
+///   }
+/// @output Контейнер с фиксированной высотой
+/// @group cards-featured
+/// @access public
+@mixin card-featured-vertical-image-wrapper {
+  position: relative;
+  height: $card-featured-image-height;
+  overflow: hidden;
+}
+
+/// Контент вертикальной featured карточки
+/// @example scss
+///   .project-card__content {
+///     @include card-featured-vertical-content;
+///   }
+/// @output Padding контента
+/// @group cards-featured
+/// @access public
+@mixin card-featured-vertical-content {
+  padding: spacing.$spacing-lg;
+}
+
+// ─────────────────────────────────────────
+// КОМБИНИРОВАННЫЙ МИКСИН
+// ─────────────────────────────────────────
+
+/// Полный набор стилей featured card через селекторы
+/// @param {String} $selector-image ['.card-featured__image-wrap'] - Селектор обёртки изображения
+/// @param {String} $selector-img ['.card-featured__image'] - Селектор изображения
+/// @param {String} $selector-content ['.card-featured__content'] - Селектор контента
+/// @param {String} $selector-meta ['.card-featured__meta'] - Селектор мета
+/// @param {String} $selector-title ['.card-featured__title'] - Селектор заголовка
+/// @param {String} $selector-desc ['.card-featured__description'] - Селектор описания
+/// @example scss
+///   .news-featured {
+///     @include card-featured-full(
+///       '.news-featured__image-wrap',
+///       '.news-featured__image',
+///       '.news-featured__content',
+///       '.news-featured__meta',
+///       '.news-featured__title',
+///       '.news-featured__description'
+///     );
+///   }
+/// @output Полный набор стилей
+/// @group cards-featured
+/// @access public
+@mixin card-featured-full(
+  $selector-image: ".card-featured__image-wrap",
+  $selector-img: ".card-featured__image",
+  $selector-content: ".card-featured__content",
+  $selector-meta: ".card-featured__meta",
+  $selector-title: ".card-featured__title",
+  $selector-desc: ".card-featured__description"
+) {
+  @include card-featured;
+
+  #{$selector-image} {
+    @include card-featured-image-wrapper;
+  }
+
+  #{$selector-img} {
+    @include card-featured-image;
+  }
+
+  #{$selector-content} {
+    @include card-featured-content;
+  }
+
+  #{$selector-meta} {
+    @include card-featured-meta;
+  }
+
+  #{$selector-title} {
+    @include card-featured-title;
+  }
+
+  #{$selector-desc} {
+    @include card-featured-description;
+  }
+}

package/scss/abstracts/cards/_hover.scss

@@ -0,0 +1,99 @@
+// ============================================
+// CARDS — HOVER
+// local/common/theme-moexp/src/scss/abstracts/cards/_hover.scss
+// ============================================
+
+////
+/// Hover-эффекты для карточек
+/// Shadow, lift, scale анимации
+/// @group cards-hover
+/// @author MOEXP Team
+////
+
+@use "../mixins";
+@use "../animations";
+@use "variables" as *;
+
+// ─────────────────────────────────────────
+// HOVER SHADOW
+// ─────────────────────────────────────────
+
+/// Hover с увеличением тени и опциональным accent border
+/// @param {Boolean} $border-accent [true] - Менять цвет бордера на accent при hover
+/// @require {mixin} animations.transition
+/// @require {mixin} mixins.shadow-lg
+/// @require {mixin} mixins.border-color-hsl
+/// @example scss
+///   .card {
+///     @include card-base;
+///     @include card-hover-shadow;
+///   }
+/// @example scss - Без accent border
+///   .card {
+///     @include card-base;
+///     @include card-hover-shadow(false);
+///   }
+/// @output transition + &:hover { shadow, border-color? }
+/// @group cards-hover
+/// @access public
+@mixin card-hover-shadow($border-accent: true) {
+  @include animations.transition((box-shadow, border-color, transform), $card-transition-duration, animations.$ease-in-out);
+
+  &:hover {
+    @include mixins.shadow-lg;
+
+    @if $border-accent {
+      @include mixins.border-color-hsl(accent, 0.5);
+    }
+  }
+}
+
+// ─────────────────────────────────────────
+// HOVER LIFT
+// ─────────────────────────────────────────
+
+/// Hover с подъёмом вверх (translateY)
+/// @param {Number} $y [-4px] - Смещение по Y при hover
+/// @require {mixin} animations.transition
+/// @require {mixin} mixins.shadow-lg
+/// @example scss
+///   .card {
+///     @include card-base;
+///     @include card-hover-lift(-6px);
+///   }
+/// @output transition + &:hover { transform, shadow }
+/// @group cards-hover
+/// @access public
+@mixin card-hover-lift($y: -4px) {
+  @include animations.transition((box-shadow, border-color, transform), $card-transition-duration, animations.$ease-out);
+
+  &:hover {
+    transform: translateY($y);
+    @include mixins.shadow-lg;
+  }
+}
+
+// ─────────────────────────────────────────
+// HOVER SCALE
+// ─────────────────────────────────────────
+
+/// Hover с масштабированием
+/// @param {Number} $scale [1.02] - Масштаб при hover
+/// @require {mixin} animations.transition
+/// @require {mixin} mixins.shadow-lg
+/// @example scss
+///   .card {
+///     @include card-base;
+///     @include card-hover-scale(1.03);
+///   }
+/// @output transition + &:hover { transform, shadow }
+/// @group cards-hover
+/// @access public
+@mixin card-hover-scale($scale: 1.02) {
+  @include animations.transition((box-shadow, border-color, transform), $card-transition-duration, animations.$ease-out);
+
+  &:hover {
+    transform: scale($scale);
+    @include mixins.shadow-lg;
+  }
+}

package/scss/abstracts/cards/_index.scss

@@ -0,0 +1,51 @@
+// ============================================
+// CARDS — INDEX
+// local/common/theme-moexp/src/scss/abstracts/cards/_index.scss
+// ============================================
+
+////
+/// Точка входа модуля карточек
+/// Экспортирует все переменные и миксины
+/// @group cards
+/// @author MOEXP Team
+////
+
+// ─────────────────────────────────────────
+// EXPORTS
+// ─────────────────────────────────────────
+
+/// Переменные карточек
+/// @see cards/_variables.scss
+@forward "variables";
+
+/// Базовые миксины
+/// @see cards/_base.scss
+@forward "base";
+
+/// Hover-эффекты
+/// @see cards/_hover.scss
+@forward "hover";
+
+/// Варианты карточек
+/// @see cards/_variants.scss
+@forward "variants";
+
+/// Размеры карточек
+/// @see cards/_sizes.scss
+@forward "sizes";
+
+/// Части карточек
+/// @see cards/_parts.scss
+@forward "parts";
+
+/// Blur-эффекты
+/// @see cards/_blur.scss
+@forward "blur";
+
+/// Featured карточки
+/// @see cards/_featured.scss
+@forward "featured";
+
+/// Вертикальные карточки
+/// @see cards/_vertical.scss
+@forward "vertical";

package/scss/abstracts/cards/_parts.scss

@@ -0,0 +1,135 @@
+// ============================================
+// CARDS — PARTS
+// local/common/theme-moexp/src/scss/abstracts/cards/_parts.scss
+// ============================================
+
+////
+/// Части карточек
+/// Header, Body, Footer, Icon, Title
+/// @group cards-parts
+/// @author MOEXP Team
+////
+
+@use "../mixins";
+@use "../radius";
+@use "../spacing";
+@use "../animations";
+@use "variables" as *;
+
+// ─────────────────────────────────────────
+// HEADER
+// ─────────────────────────────────────────
+
+/// Header карточки
+/// @example scss
+///   .card__header {
+///     @include card-header;
+///   }
+/// @output margin-bottom: 1rem;
+/// @group cards-parts
+/// @access public
+@mixin card-header {
+  margin-bottom: spacing.$spacing-md;
+}
+
+// ─────────────────────────────────────────
+// BODY
+// ─────────────────────────────────────────
+
+/// Body карточки — flex: 1 для растягивания
+/// @example scss
+///   .card__body {
+///     @include card-body;
+///   }
+/// @output flex: 1;
+/// @group cards-parts
+/// @access public
+@mixin card-body {
+  flex: 1;
+}
+
+// ─────────────────────────────────────────
+// FOOTER
+// ─────────────────────────────────────────
+
+/// Footer карточки — с верхней границей
+/// @require {mixin} mixins.border-hsl
+/// @example scss
+///   .card__footer {
+///     @include card-footer;
+///   }
+/// @output margin-top, padding-top, border-top
+/// @group cards-parts
+/// @access public
+@mixin card-footer {
+  margin-top: spacing.$spacing-md;
+  padding-top: spacing.$spacing-md;
+  @include mixins.border-hsl(1px, solid, border, 0.3);
+  border-width: 1px 0 0 0;
+}
+
+// ─────────────────────────────────────────
+// ICON
+// ─────────────────────────────────────────
+
+/// Иконка в карточке — квадратная с фоном
+/// @param {Number} $size [48px] - Размер контейнера
+/// @param {String} $bg [accent] - Цвет фона
+/// @param {Number} $bg-alpha [0.1] - Прозрачность фона
+/// @require {mixin} mixins.bg-color
+/// @require {mixin} mixins.text-color
+/// @require {mixin} radius.rounded
+/// @example scss
+///   .card__icon {
+///     @include card-icon(56px, 'primary', 0.15);
+///   }
+/// @example html
+///   <div class="card__icon"><svg>...</svg></div>
+/// @output Квадратный контейнер с центрированной иконкой
+/// @group cards-parts
+/// @access public
+@mixin card-icon($size: 48px, $bg: accent, $bg-alpha: 0.1) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: $size;
+  height: $size;
+  margin-bottom: spacing.$spacing-md;
+
+  @include mixins.bg-color($bg, $bg-alpha);
+  @include mixins.text-color($bg);
+  @include radius.rounded(lg);
+
+  svg {
+    width: calc($size * 0.5);
+    height: calc($size * 0.5);
+  }
+}
+
+// ─────────────────────────────────────────
+// TITLE WITH HOVER
+// ─────────────────────────────────────────
+
+/// Заголовок карточки с hover эффектом (универсальный)
+/// @param {String} $color [foreground] - Цвет текста
+/// @param {String} $hover-color [accent] - Цвет при hover
+/// @require {mixin} mixins.text-color
+/// @require {mixin} animations.transition
+/// @example scss
+///   .card__title {
+///     @include card-title-hover;
+///   }
+/// @output Цвет с transition при hover родителя
+/// @group cards-parts
+/// @access public
+@mixin card-title-hover($color: foreground, $hover-color: accent) {
+  @include mixins.text-color($color);
+  @include animations.transition(color, $card-transition-duration);
+
+  // Hover на родителе
+  [class*="card"]:hover &,
+  a:hover & {
+    @include mixins.text-color($hover-color);
+  }
+}