@mr.slonn/my-scss-theme 1.0.0

package/scss/abstracts/_breakpoints.scss

@@ -0,0 +1,865 @@
+// ============================================
+// BREAKPOINTS
+// local\common\theme-moexp\src\scss\abstracts\_breakpoints.scss
+// ============================================
+
+////
+/// Система брейкпоинтов для адаптивной вёрстки
+/// @group breakpoints
+/// @author Theme Developer
+////
+
+@use "sass:map";
+@use "sass:meta";
+
+// ─────────────────────────────────────────
+// БРЕЙКПОИНТЫ НА ОСНОВЕ СТАТИСТИКИ
+// ─────────────────────────────────────────
+//
+// Визуальная карта устройств:
+//
+// 0        360  414  480    640    768         1024        1280        1440   1536        1920          2560
+// │─────────│────│────│──────│──────│───────────│───────────│───────────│──────│───────────│─────────────│
+// │   xs    │      sm        │  md  │    lg     │    xl     │    2xl    │          3xl          │   4xl    │
+// │         │                │      │           │           │           │                       │          │
+// │ Старые  │ Смартфоны      │Табл. │ Ноутбуки  │ Ноутбуки  │ MacBook   │ Full HD (36% трафика) │ 2K/4K    │
+// │ телефоны│ iPhone 12-14   │      │ бюджетные │ средние   │ 1536×864  │ 1920×1080             │ 2560×1440│
+// │ 360×800 │ 390-414px      │768px │ 1366×768  │ 1280×720  │           │                       │          │
+// └─────────┴────────────────┴──────┴───────────┴───────────┴───────────┴───────────────────────┴──────────┘
+
+/// Карта брейкпоинтов (mobile-first)
+/// @type Map
+/// @prop {Length} xs [360px] - Минимальный смартфон (~0.07% трафика)
+/// @prop {Length} sm [480px] - Большие смартфоны, iPhone XR/XS (~0.05%)
+/// @prop {Length} md [768px] - Планшеты, iPad (~0.3%)
+/// @prop {Length} lg [1024px] - Маленькие ноутбуки, iPad Pro landscape
+/// @prop {Length} xl [1280px] - Ноутбуки (~0.9%)
+/// @prop {Length} xxl [1536px] - MacBook, HiDPI ноутбуки (~3.3%)
+/// @prop {Length} xxxl [1920px] - Full HD мониторы (~36% трафика)
+/// @prop {Length} xxxxl [2560px] - 2K/4K мониторы (~2.5%)
+/// @example scss - Использование в миксине media
+///   @include media(md) { ... }
+///   @include media(lg, max) { ... }
+/// @group breakpoints
+$breakpoints: (
+  xs: 360px,
+  sm: 480px,
+  md: 768px,
+  lg: 1024px,
+  xl: 1280px,
+  xxl: 1536px,
+  xxxl: 1920px,
+  xxxxl: 2560px,
+) !default;
+
+// ─────────────────────────────────────────
+// Контейнеры (max-width для .container)
+// ─────────────────────────────────────────
+
+/// Карта ширин контейнеров для каждого брейкпоинта
+/// @type Map
+/// @prop {Length} xs [100%] - Мобильные: полная ширина
+/// @prop {Length} sm [100%] - Большие мобильные: полная ширина
+/// @prop {Length} md [720px] - Планшеты
+/// @prop {Length} lg [960px] - Ноутбуки
+/// @prop {Length} xl [1140px] - Большие ноутбуки
+/// @prop {Length} 2xl [1320px] - MacBook
+/// @prop {Length} 3xl [1440px] - Full HD (комфортная ширина)
+/// @prop {Length} 4xl [1600px] - Ultrawide
+/// @group breakpoints
+$containers: (
+  xs: 100%,
+  sm: 100%,
+  md: 720px,
+  lg: 960px,
+  xl: 1140px,
+  2xl: 1320px,
+  3xl: 1440px,
+  4xl: 1600px,
+) !default;
+
+// ─────────────────────────────────────────
+// Переменные для прямого доступа
+// ─────────────────────────────────────────
+
+/// Брейкпоинт XS (минимальный смартфон)
+/// @type Length
+/// @group breakpoints
+$breakpoint-xs: 360px !default;
+
+/// Брейкпоинт SM (большие смартфоны)
+/// @type Length
+/// @group breakpoints
+$breakpoint-sm: 480px !default;
+
+/// Брейкпоинт MD (планшеты)
+/// @type Length
+/// @group breakpoints
+$breakpoint-md: 768px !default;
+
+/// Брейкпоинт LG (ноутбуки)
+/// @type Length
+/// @group breakpoints
+$breakpoint-lg: 1024px !default;
+
+/// Брейкпоинт XL (большие ноутбуки)
+/// @type Length
+/// @group breakpoints
+$breakpoint-xl: 1280px !default;
+
+/// Брейкпоинт XXL (MacBook, HiDPI)
+/// @type Length
+/// @group breakpoints
+$breakpoint-xxl: 1536px !default;
+
+/// Брейкпоинт XXXL (Full HD)
+/// @type Length
+/// @group breakpoints
+$breakpoint-xxxl: 1920px !default;
+
+/// Брейкпоинт XXXXL (2K/4K)
+/// @type Length
+/// @group breakpoints
+$breakpoint-xxxxl: 2560px !default;
+
+// ============================================
+// УНИВЕРСАЛЬНЫЙ MEDIA МИКСИН
+// ============================================
+
+/// Универсальный media query миксин
+/// @param {String|Length} $breakpoint - Имя брейкпоинта (xs, sm, md...) или число в px
+/// @param {String} $type [min] - Тип запроса: min, max, min-max
+/// @param {String|Length} $breakpoint-end [null] - Конечный брейкпоинт для диапазона
+/// @output Media query с переданным контентом
+/// @example scss - min-width (mobile-first)
+///   .element {
+///     @include media(md) {
+///       display: flex;
+///     }
+///   }
+/// @example scss - max-width
+///   .element {
+///     @include media(lg, max) {
+///       display: block;
+///     }
+///   }
+/// @example scss - диапазон
+///   .element {
+///     @include media(md, min-max, lg) {
+///       padding: 1rem;
+///     }
+///   }
+/// @example scss - произвольное значение
+///   .element {
+///     @include media(600px) {
+///       font-size: 1.2rem;
+///     }
+///   }
+/// @group breakpoints
+@mixin media($breakpoint, $type: min, $breakpoint-end: null) {
+  $value: _get-breakpoint-value($breakpoint);
+
+  @if $type == min {
+    @media (min-width: $value) {
+      @content;
+    }
+  } @else if $type == max {
+    @media (max-width: ($value - 1px)) {
+      @content;
+    }
+  } @else if $type == min-max {
+    @if not $breakpoint-end {
+      @error "Для `min-max` укажите второй брейкпоинт";
+    }
+
+    $value-end: _get-breakpoint-value($breakpoint-end);
+
+    @media (min-width: $value) and (max-width: ($value-end - 1px)) {
+      @content;
+    }
+  }
+}
+
+/// Получает значение брейкпоинта из карты или возвращает число
+/// @access private
+/// @param {String|Length} $breakpoint - Имя или значение брейкпоинта
+/// @return {Length} - Значение в px
+/// @throw Ошибка если брейкпоинт не найден
+/// @group breakpoints
+@function _get-breakpoint-value($breakpoint) {
+  @if meta.type-of($breakpoint) == number {
+    @return $breakpoint;
+  }
+
+  $value: map.get($breakpoints, $breakpoint);
+
+  @if not $value {
+    @error "Брейкпоинт `#{$breakpoint}` не найден. Доступные: #{map.keys($breakpoints)}";
+  }
+
+  @return $value;
+}
+
+// ============================================
+// UP (min-width) — mobile-first
+// ============================================
+
+/// Media query от XS (360px) и выше
+/// @content Стили для XS+
+/// @output @media (min-width: 360px)
+/// @group breakpoints
+@mixin xs-up {
+  @include media(xs) {
+    @content;
+  }
+}
+
+/// Media query от SM (480px) и выше
+/// @content Стили для SM+
+/// @output @media (min-width: 480px)
+/// @group breakpoints
+@mixin sm-up {
+  @include media(sm) {
+    @content;
+  }
+}
+
+/// Media query от MD (768px) и выше
+/// @content Стили для MD+
+/// @output @media (min-width: 768px)
+/// @group breakpoints
+@mixin md-up {
+  @include media(md) {
+    @content;
+  }
+}
+
+/// Media query от LG (1024px) и выше
+/// @content Стили для LG+
+/// @output @media (min-width: 1024px)
+/// @group breakpoints
+@mixin lg-up {
+  @include media(lg) {
+    @content;
+  }
+}
+
+/// Media query от XL (1280px) и выше
+/// @content Стили для XL+
+/// @output @media (min-width: 1280px)
+/// @group breakpoints
+@mixin xl-up {
+  @include media(xl) {
+    @content;
+  }
+}
+
+/// Media query от XXL (1536px) и выше
+/// @content Стили для XXL+
+/// @output @media (min-width: 1536px)
+/// @group breakpoints
+@mixin xxl-up {
+  @include media(xxl) {
+    @content;
+  }
+}
+
+/// Media query от XXXL (1920px) и выше
+/// @content Стили для XXXL+
+/// @output @media (min-width: 1920px)
+/// @group breakpoints
+@mixin xxxl-up {
+  @include media(xxxl) {
+    @content;
+  }
+}
+
+/// Media query от XXXXL (2560px) и выше
+/// @content Стили для XXXXL+
+/// @output @media (min-width: 2560px)
+/// @group breakpoints
+@mixin xxxxl-up {
+  @include media(xxxxl) {
+    @content;
+  }
+}
+
+// ─────────────────────────────────────────
+// Короткие алиасы (без суффикса -up)
+// ─────────────────────────────────────────
+
+/// Алиас для xs-up
+/// @content Стили для XS+
+/// @see {mixin} xs-up
+/// @group breakpoints
+@mixin xs {
+  @include media(xs) {
+    @content;
+  }
+}
+
+/// Алиас для sm-up
+/// @content Стили для SM+
+/// @see {mixin} sm-up
+/// @group breakpoints
+@mixin sm {
+  @include media(sm) {
+    @content;
+  }
+}
+
+/// Алиас для md-up
+/// @content Стили для MD+
+/// @see {mixin} md-up
+/// @group breakpoints
+@mixin md {
+  @include media(md) {
+    @content;
+  }
+}
+
+/// Алиас для lg-up
+/// @content Стили для LG+
+/// @see {mixin} lg-up
+/// @group breakpoints
+@mixin lg {
+  @include media(lg) {
+    @content;
+  }
+}
+
+/// Алиас для xl-up
+/// @content Стили для XL+
+/// @see {mixin} xl-up
+/// @group breakpoints
+@mixin xl {
+  @include media(xl) {
+    @content;
+  }
+}
+
+/// Алиас для xxl-up
+/// @content Стили для XXL+
+/// @see {mixin} xxl-up
+/// @group breakpoints
+@mixin xxl {
+  @include media(xxl) {
+    @content;
+  }
+}
+
+/// Алиас для xxxl-up
+/// @content Стили для XXXL+
+/// @see {mixin} xxxl-up
+/// @group breakpoints
+@mixin xxxl {
+  @include media(xxxl) {
+    @content;
+  }
+}
+
+/// Алиас для xxxxl-up
+/// @content Стили для XXXXL+
+/// @see {mixin} xxxxl-up
+/// @group breakpoints
+@mixin xxxxl {
+  @include media(xxxxl) {
+    @content;
+  }
+}
+
+// ─────────────────────────────────────────
+// Семантические алиасы
+// ─────────────────────────────────────────
+
+/// Мобильные устройства (от 360px)
+/// @content Стили для мобильных+
+/// @see {mixin} xs
+/// @group breakpoints
+@mixin mobile {
+  @include media(xs) {
+    @content;
+  }
+}
+
+/// Большие мобильные (от 480px)
+/// @content Стили для больших мобильных+
+/// @see {mixin} sm
+/// @group breakpoints
+@mixin mobile-lg {
+  @include media(sm) {
+    @content;
+  }
+}
+
+/// Планшеты (от 768px)
+/// @content Стили для планшетов+
+/// @see {mixin} md
+/// @group breakpoints
+@mixin tablet {
+  @include media(md) {
+    @content;
+  }
+}
+
+/// Ноутбуки (от 1024px)
+/// @content Стили для ноутбуков+
+/// @see {mixin} lg
+/// @group breakpoints
+@mixin laptop {
+  @include media(lg) {
+    @content;
+  }
+}
+
+/// Большие ноутбуки (от 1280px)
+/// @content Стили для больших ноутбуков+
+/// @see {mixin} xl
+/// @group breakpoints
+@mixin laptop-lg {
+  @include media(xl) {
+    @content;
+  }
+}
+
+/// Десктопы (от 1536px)
+/// @content Стили для десктопов+
+/// @see {mixin} xxl
+/// @group breakpoints
+@mixin desktop {
+  @include media(xxl) {
+    @content;
+  }
+}
+
+/// Full HD десктопы (от 1920px)
+/// @content Стили для Full HD+
+/// @see {mixin} xxxl
+/// @group breakpoints
+@mixin desktop-fhd {
+  @include media(xxxl) {
+    @content;
+  }
+}
+
+/// 2K/4K десктопы (от 2560px)
+/// @content Стили для 2K/4K+
+/// @see {mixin} xxxxl
+/// @group breakpoints
+@mixin desktop-2k {
+  @include media(xxxxl) {
+    @content;
+  }
+}
+
+// ============================================
+// DOWN (max-width)
+// ============================================
+
+/// Media query до XS (менее 360px)
+/// @content Стили для <360px
+/// @output @media (max-width: 359px)
+/// @group breakpoints
+@mixin xs-down {
+  @include media(xs, max) {
+    @content;
+  }
+}
+
+/// Media query до SM (менее 480px)
+/// @content Стили для <480px
+/// @output @media (max-width: 479px)
+/// @group breakpoints
+@mixin sm-down {
+  @include media(sm, max) {
+    @content;
+  }
+}
+
+/// Media query до MD (менее 768px)
+/// @content Стили для <768px
+/// @output @media (max-width: 767px)
+/// @group breakpoints
+@mixin md-down {
+  @include media(md, max) {
+    @content;
+  }
+}
+
+/// Media query до LG (менее 1024px)
+/// @content Стили для <1024px
+/// @output @media (max-width: 1023px)
+/// @group breakpoints
+@mixin lg-down {
+  @include media(lg, max) {
+    @content;
+  }
+}
+
+/// Media query до XL (менее 1280px)
+/// @content Стили для <1280px
+/// @output @media (max-width: 1279px)
+/// @group breakpoints
+@mixin xl-down {
+  @include media(xl, max) {
+    @content;
+  }
+}
+
+/// Media query до XXL (менее 1536px)
+/// @content Стили для <1536px
+/// @output @media (max-width: 1535px)
+/// @group breakpoints
+@mixin xxl-down {
+  @include media(xxl, max) {
+    @content;
+  }
+}
+
+/// Media query до XXXL (менее 1920px)
+/// @content Стили для <1920px
+/// @output @media (max-width: 1919px)
+/// @group breakpoints
+@mixin xxxl-down {
+  @include media(xxxl, max) {
+    @content;
+  }
+}
+
+/// Media query до XXXXL (менее 2560px)
+/// @content Стили для <2560px
+/// @output @media (max-width: 2559px)
+/// @group breakpoints
+@mixin xxxxl-down {
+  @include media(xxxxl, max) {
+    @content;
+  }
+}
+
+// ============================================
+// ONLY (диапазоны)
+// ============================================
+
+/// Только XS (360px - 479px)
+/// @content Стили только для XS
+/// @output @media (min-width: 360px) and (max-width: 479px)
+/// @group breakpoints
+@mixin xs-only {
+  @include media(xs, min-max, sm) {
+    @content;
+  }
+}
+
+/// Только SM (480px - 767px)
+/// @content Стили только для SM
+/// @output @media (min-width: 480px) and (max-width: 767px)
+/// @group breakpoints
+@mixin sm-only {
+  @include media(sm, min-max, md) {
+    @content;
+  }
+}
+
+/// Только MD (768px - 1023px)
+/// @content Стили только для MD
+/// @output @media (min-width: 768px) and (max-width: 1023px)
+/// @group breakpoints
+@mixin md-only {
+  @include media(md, min-max, lg) {
+    @content;
+  }
+}
+
+/// Только LG (1024px - 1279px)
+/// @content Стили только для LG
+/// @output @media (min-width: 1024px) and (max-width: 1279px)
+/// @group breakpoints
+@mixin lg-only {
+  @include media(lg, min-max, xl) {
+    @content;
+  }
+}
+
+/// Только XL (1280px - 1535px)
+/// @content Стили только для XL
+/// @output @media (min-width: 1280px) and (max-width: 1535px)
+/// @group breakpoints
+@mixin xl-only {
+  @include media(xl, min-max, xxl) {
+    @content;
+  }
+}
+
+/// Только XXL (1536px - 1919px)
+/// @content Стили только для XXL
+/// @output @media (min-width: 1536px) and (max-width: 1919px)
+/// @group breakpoints
+@mixin xxl-only {
+  @include media(xxl, min-max, xxxl) {
+    @content;
+  }
+}
+
+/// Только XXXL (1920px - 2559px)
+/// @content Стили только для XXXL
+/// @output @media (min-width: 1920px) and (max-width: 2559px)
+/// @group breakpoints
+@mixin xxxl-only {
+  @include media(xxxl, min-max, xxxxl) {
+    @content;
+  }
+}
+
+// ============================================
+// HIDE / SHOW
+// ============================================
+
+/// Скрыть элемент от указанного брейкпоинта и выше
+/// @param {String|Length} $breakpoint - Брейкпоинт от которого скрывать
+/// @output display: none с !important
+/// @example scss
+///   .mobile-menu {
+///     @include hide-up(lg); // Скрыть на десктопе
+///   }
+/// @group breakpoints
+@mixin hide-up($breakpoint) {
+  @include media($breakpoint) {
+    display: none !important;
+  }
+}
+
+/// Скрыть элемент до указанного брейкпоинта
+/// @param {String|Length} $breakpoint - Брейкпоинт до которого скрывать
+/// @output display: none с !important
+/// @example scss
+///   .sidebar {
+///     @include hide-down(lg); // Скрыть на мобильных
+///   }
+/// @group breakpoints
+@mixin hide-down($breakpoint) {
+  @include media($breakpoint, max) {
+    display: none !important;
+  }
+}
+
+/// Скрыть элемент в диапазоне брейкпоинтов
+/// @param {String|Length} $from - Начальный брейкпоинт
+/// @param {String|Length} $to - Конечный брейкпоинт
+/// @output display: none с !important
+/// @example scss
+///   .promo {
+///     @include hide-between(sm, lg); // Скрыть только на планшетах
+///   }
+/// @group breakpoints
+@mixin hide-between($from, $to) {
+  @include media($from, min-max, $to) {
+    display: none !important;
+  }
+}
+
+/// Показать элемент от указанного брейкпоинта и выше (скрыт по умолчанию)
+/// @param {String|Length} $breakpoint - Брейкпоинт от которого показывать
+/// @output display: none → display: revert
+/// @example scss
+///   .desktop-widget {
+///     @include show-up(lg); // Показать только на десктопе
+///   }
+/// @group breakpoints
+@mixin show-up($breakpoint) {
+  display: none !important;
+
+  @include media($breakpoint) {
+    display: revert !important;
+  }
+}
+
+/// Показать элемент до указанного брейкпоинта (скрыт по умолчанию)
+/// @param {String|Length} $breakpoint - Брейкпоинт до которого показывать
+/// @output display: none → display: revert
+/// @example scss
+///   .mobile-widget {
+///     @include show-down(lg); // Показать только на мобильных
+///   }
+/// @group breakpoints
+@mixin show-down($breakpoint) {
+  display: none !important;
+
+  @include media($breakpoint, max) {
+    display: revert !important;
+  }
+}
+
+/// Показать элемент в диапазоне брейкпоинтов (скрыт по умолчанию)
+/// @param {String|Length} $from - Начальный брейкпоинт
+/// @param {String|Length} $to - Конечный брейкпоинт
+/// @output display: none → display: revert
+/// @example scss
+///   .tablet-banner {
+///     @include show-between(sm, lg); // Показать только на планшетах
+///   }
+/// @group breakpoints
+@mixin show-between($from, $to) {
+  display: none !important;
+
+  @include media($from, min-max, $to) {
+    display: revert !important;
+  }
+}
+
+// ─────────────────────────────────────────
+// Семантические hide/show
+// ─────────────────────────────────────────
+
+/// Скрыть на мобильных (до LG)
+/// @content Не требует контента
+/// @see {mixin} hide-down
+/// @group breakpoints
+@mixin hide-mobile {
+  @include hide-down(lg);
+}
+
+/// Скрыть на десктопе (от LG)
+/// @content Не требует контента
+/// @see {mixin} hide-up
+/// @group breakpoints
+@mixin hide-desktop {
+  @include hide-up(lg);
+}
+
+/// Показать только на мобильных (до LG)
+/// @content Не требует контента
+/// @see {mixin} hide-up
+/// @group breakpoints
+@mixin mobile-only {
+  @include hide-up(lg);
+}
+
+/// Показать только на десктопе (от LG)
+/// @content Не требует контента
+/// @see {mixin} hide-down
+/// @group breakpoints
+@mixin desktop-only {
+  @include hide-down(lg);
+}
+
+// ============================================
+// ДОПОЛНИТЕЛЬНЫЕ МЕДИА-ЗАПРОСЫ
+// ============================================
+
+/// Стили только для устройств с hover (мышь)
+/// @content Стили для hover-устройств
+/// @output @media (hover: hover) and (pointer: fine)
+/// @example scss
+///   .button {
+///     @include hover {
+///       transform: scale(1.05);
+///     }
+///   }
+/// @group breakpoints
+@mixin hover {
+  @media (hover: hover) and (pointer: fine) {
+    &:hover {
+      @content;
+    }
+  }
+}
+
+/// Стили для тач-устройств
+/// @content Стили для тач-устройств
+/// @output @media (hover: none) and (pointer: coarse)
+/// @example scss
+///   .slider {
+///     @include touch {
+///       scroll-snap-type: x mandatory;
+///     }
+///   }
+/// @group breakpoints
+@mixin touch {
+  @media (hover: none) and (pointer: coarse) {
+    @content;
+  }
+}
+
+/// Стили для пользователей с настройкой "уменьшить движение"
+/// @content Стили для reduced-motion
+/// @output @media (prefers-reduced-motion: reduce)
+/// @example scss
+///   .animated {
+///     @include reduced-motion {
+///       animation: none;
+///     }
+///   }
+/// @group breakpoints
+@mixin reduced-motion {
+  @media (prefers-reduced-motion: reduce) {
+    @content;
+  }
+}
+
+/// Стили для тёмной системной темы
+/// @content Стили для тёмной темы
+/// @output @media (prefers-color-scheme: dark)
+/// @example scss
+///   body {
+///     @include prefers-dark {
+///       background: #000;
+///     }
+///   }
+/// @group breakpoints
+@mixin prefers-dark {
+  @media (prefers-color-scheme: dark) {
+    @content;
+  }
+}
+
+/// Стили для печати
+/// @content Стили для печати
+/// @output @media print
+/// @example scss
+///   .no-print {
+///     @include print {
+///       display: none;
+///     }
+///   }
+/// @group breakpoints
+@mixin print {
+  @media print {
+    @content;
+  }
+}
+
+/// Стили для альбомной ориентации
+/// @content Стили для landscape
+/// @output @media (orientation: landscape)
+/// @group breakpoints
+@mixin landscape {
+  @media (orientation: landscape) {
+    @content;
+  }
+}
+
+/// Стили для портретной ориентации
+/// @content Стили для portrait
+/// @output @media (orientation: portrait)
+/// @group breakpoints
+@mixin portrait {
+  @media (orientation: portrait) {
+    @content;
+  }
+}
+
+/// Стили для Retina / HiDPI экранов
+/// @content Стили для 2x+ плотности
+/// @output @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)
+/// @example scss
+///   .logo {
+///     @include retina {
+///       background-image: url('logo@2x.png');
+///     }
+///   }
+/// @group breakpoints
+@mixin retina {
+  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+    @content;
+  }
+}