@mr.slonn/my-scss-theme 1.0.0

package/scss/utilities/_visibility.scss

@@ -0,0 +1,224 @@
+// ============================================
+// VISIBILITY UTILITIES
+// local\common\theme-moexp\src\scss\utilities\_visibility.scss
+// ============================================
+
+////
+/// Утилитарные классы для управления видимостью элементов
+///
+/// Классы для скрытия элементов на разных брейкпоинтах,
+/// а также семантические хелперы для mobile/desktop.
+///
+/// @group utilities-visibility
+/// @author SUSPENDED
+/// @since 1.0.0
+///
+/// @example html - Скрыть на мобильных
+///   <div class="hidden-md-down">
+///     Видно только на md и выше
+///   </div>
+///
+/// @example html - Показать только на десктопе
+///   <nav class="desktop-only">
+///     Десктопная навигация
+///   </nav>
+///
+/// @example html - Скрыть при печати
+///   <aside class="hidden-print">
+///     Не печатается
+///   </aside>
+////
+
+@use "../abstracts/breakpoints";
+
+// ─────────────────────────────────────────
+// ПОЛНОЕ СКРЫТИЕ
+// ─────────────────────────────────────────
+
+/// Полностью скрывает элемент на всех разрешениях
+/// @group utilities-visibility
+/// @example html
+///   <div class="hidden">Невидимый элемент</div>
+.hidden {
+  display: none !important;
+}
+
+// ─────────────────────────────────────────
+// HIDDEN UP (скрыть от брейкпоинта и выше)
+// ─────────────────────────────────────────
+
+/// @group utilities-visibility
+/// @example html - Скрыть от xs и выше (всегда скрыт)
+///   <div class="hidden-xs-up">...</div>
+.hidden-xs-up {
+  @include breakpoints.hide-up(xs);
+}
+
+/// @group utilities-visibility
+/// @example html - Скрыть от sm (≥576px) и выше
+///   <div class="hidden-sm-up">...</div>
+.hidden-sm-up {
+  @include breakpoints.hide-up(sm);
+}
+
+/// @group utilities-visibility
+/// @example html - Скрыть от md (≥768px) и выше
+///   <div class="hidden-md-up">...</div>
+.hidden-md-up {
+  @include breakpoints.hide-up(md);
+}
+
+/// @group utilities-visibility
+/// @example html - Скрыть от lg (≥1024px) и выше
+///   <div class="hidden-lg-up">...</div>
+.hidden-lg-up {
+  @include breakpoints.hide-up(lg);
+}
+
+/// @group utilities-visibility
+/// @example html - Скрыть от xl (≥1280px) и выше
+///   <div class="hidden-xl-up">...</div>
+.hidden-xl-up {
+  @include breakpoints.hide-up(xl);
+}
+
+/// @group utilities-visibility
+/// @example html - Скрыть от xxl (≥1536px) и выше
+///   <div class="hidden-xxl-up">...</div>
+.hidden-xxl-up {
+  @include breakpoints.hide-up(xxl);
+}
+
+/// @group utilities-visibility
+/// @example html - Скрыть от xxxl (≥1920px) и выше
+///   <div class="hidden-xxxl-up">...</div>
+.hidden-xxxl-up {
+  @include breakpoints.hide-up(xxxl);
+}
+
+/// @group utilities-visibility
+/// @example html - Скрыть от xxxxl (≥2560px) и выше
+///   <div class="hidden-xxxxl-up">...</div>
+.hidden-xxxxl-up {
+  @include breakpoints.hide-up(xxxxl);
+}
+
+// ─────────────────────────────────────────
+// HIDDEN DOWN (скрыть до брейкпоинта)
+// ─────────────────────────────────────────
+
+/// @group utilities-visibility
+/// @example html - Скрыть до xs (<576px)
+///   <div class="hidden-xs-down">...</div>
+.hidden-xs-down {
+  @include breakpoints.hide-down(xs);
+}
+
+/// @group utilities-visibility
+/// @example html - Скрыть до sm (<768px)
+///   <div class="hidden-sm-down">...</div>
+.hidden-sm-down {
+  @include breakpoints.hide-down(sm);
+}
+
+/// @group utilities-visibility
+/// @example html - Скрыть до md (<1024px)
+///   <div class="hidden-md-down">...</div>
+.hidden-md-down {
+  @include breakpoints.hide-down(md);
+}
+
+/// @group utilities-visibility
+/// @example html - Скрыть до lg (<1280px)
+///   <div class="hidden-lg-down">...</div>
+.hidden-lg-down {
+  @include breakpoints.hide-down(lg);
+}
+
+/// @group utilities-visibility
+/// @example html - Скрыть до xl (<1536px)
+///   <div class="hidden-xl-down">...</div>
+.hidden-xl-down {
+  @include breakpoints.hide-down(xl);
+}
+
+/// @group utilities-visibility
+/// @example html - Скрыть до xxl (<1920px)
+///   <div class="hidden-xxl-down">...</div>
+.hidden-xxl-down {
+  @include breakpoints.hide-down(xxl);
+}
+
+/// @group utilities-visibility
+/// @example html - Скрыть до xxxl (<2560px)
+///   <div class="hidden-xxxl-down">...</div>
+.hidden-xxxl-down {
+  @include breakpoints.hide-down(xxxl);
+}
+
+/// @group utilities-visibility
+/// @example html - Скрыть до xxxxl
+///   <div class="hidden-xxxxl-down">...</div>
+.hidden-xxxxl-down {
+  @include breakpoints.hide-down(xxxxl);
+}
+
+// ─────────────────────────────────────────
+// СЕМАНТИЧЕСКИЕ КЛАССЫ
+// ─────────────────────────────────────────
+
+/// Показывает элемент только на мобильных устройствах (до lg)
+/// @group utilities-visibility
+/// @example html - Мобильное меню
+///   <button class="mobile-only">☰ Меню</button>
+.mobile-only {
+  @include breakpoints.hide-up(lg);
+}
+
+/// Показывает элемент только на десктопе (от lg и выше)
+/// @group utilities-visibility
+/// @example html - Десктопная навигация
+///   <nav class="desktop-only">
+///     <a href="/">Главная</a>
+///     <a href="/about">О нас</a>
+///   </nav>
+.desktop-only {
+  @include breakpoints.hide-down(lg);
+}
+
+/// Скрывает элемент на мобильных (синоним desktop-only)
+/// @group utilities-visibility
+/// @see {css} .desktop-only
+/// @example html
+///   <aside class="hidden-mobile">Боковая панель</aside>
+.hidden-mobile {
+  @include breakpoints.hide-down(lg);
+}
+
+/// Скрывает элемент на десктопе (синоним mobile-only)
+/// @group utilities-visibility
+/// @see {css} .mobile-only
+/// @example html
+///   <div class="hidden-desktop">Только для мобильных</div>
+.hidden-desktop {
+  @include breakpoints.hide-up(lg);
+}
+
+// ─────────────────────────────────────────
+// PRINT
+// ─────────────────────────────────────────
+
+/// Скрывает элемент при печати
+/// @group utilities-visibility
+/// @example html - Скрыть навигацию при печати
+///   <nav class="hidden-print">
+///     <a href="/">Главная</a>
+///   </nav>
+///
+/// @example html - Скрыть интерактивные элементы
+///   <button class="hidden-print">Скачать PDF</button>
+.hidden-print {
+  @include breakpoints.print {
+    display: none !important;
+  }
+}