@musecat/uikit 0.1.1

package/packages/Styles/_viewport-global.scss

@@ -0,0 +1,99 @@
+/**
+ * W1: 320px
+ * W2: 410px
+ * W3: 768px
+ * W4: 1280px
+ */
+
+@use "sass:list";
+@use "viewport" as viewport;
+
+:root {
+  --viewport-w1-min: 0px;
+  --viewport-w1-max: 319.98px;
+  --viewport-w1-next: 320px;
+  --viewport-w2-min: 320px;
+  --viewport-w2-max: 409.98px;
+  --viewport-w2-next: 410px;
+  --viewport-w3-min: 410px;
+  --viewport-w3-max: 767.98px;
+  --viewport-w3-next: 768px;
+  --viewport-w4-min: 768px;
+  --viewport-w4-max: 1279.98px;
+  --viewport-w4-next: 1280px;
+}
+
+@each $key in viewport.$viewport-order {
+  $max: viewport.viewport-range($key, max);
+  $next: viewport.viewport-range($key, next);
+
+  @include viewport.viewport-selector("#{$key}-h") {
+    @include viewport.viewport-max($max) {
+      display: none !important;
+    }
+  }
+
+  @include viewport.viewport-selector("#{$key}-s") {
+    @include viewport.viewport-min($next) {
+      display: none !important;
+    }
+  }
+
+  @include viewport.viewport-selector("#{$key}-scrollX") {
+    @include viewport.viewport-max($max) {
+      overflow: auto hidden !important;
+      overscroll-behavior-x: contain;
+      -webkit-overflow-scrolling: touch;
+    }
+  }
+
+  @include viewport.viewport-selector("#{$key}-col") {
+    @include viewport.viewport-max($max) {
+      display: flex !important;
+      flex-direction: column !important;
+    }
+  }
+}
+
+@for $start-index from 1 through list.length(viewport.$viewport-order) {
+  $start-key: list.nth(viewport.$viewport-order, $start-index);
+  $start-min: viewport.viewport-range($start-key, min);
+  $start-previous-max: viewport.viewport-previous-max($start-key);
+
+  @if $start-index < list.length(viewport.$viewport-order) {
+    @for $end-index
+      from $start-index +
+      1
+      through list.length(viewport.$viewport-order)
+    {
+      $end-key: list.nth(viewport.$viewport-order, $end-index);
+      $end-max: viewport.viewport-range($end-key, max);
+      $end-next: viewport.viewport-range($end-key, next);
+      $name: "#{$start-key}#{$end-key}";
+
+      @include viewport.viewport-selector("#{$name}-h") {
+        @if not $start-min {
+          @include viewport.viewport-max($end-max) {
+            display: none !important;
+          }
+        } @else {
+          @include viewport.viewport-between($start-min, $end-max) {
+            display: none !important;
+          }
+        }
+      }
+
+      @include viewport.viewport-selector("#{$name}-s") {
+        @if $start-previous-max {
+          @include viewport.viewport-max($start-previous-max) {
+            display: none !important;
+          }
+        }
+
+        @include viewport.viewport-min($end-next) {
+          display: none !important;
+        }
+      }
+    }
+  }
+}

package/packages/Styles/_viewport.scss

@@ -0,0 +1,108 @@
+@use "sass:list";
+@use "sass:map";
+
+$viewport-order: w1, w2, w3, w4;
+$viewport-ranges: (
+  w1: (
+    min: null,
+    max: 319.98px,
+    next: 320px,
+  ),
+  w2: (
+    min: 320px,
+    max: 409.98px,
+    next: 410px,
+  ),
+  w3: (
+    min: 410px,
+    max: 767.98px,
+    next: 768px,
+  ),
+  w4: (
+    min: 768px,
+    max: 1279.98px,
+    next: 1280px,
+  ),
+);
+
+@function viewport-range($key, $property) {
+  @return map.get(map.get($viewport-ranges, $key), $property);
+}
+
+@function viewport-previous-key($key) {
+  $index: list.index($viewport-order, $key);
+
+  @if not $index or $index <= 1 {
+    @return null;
+  }
+
+  @return list.nth($viewport-order, $index - 1);
+}
+
+@function viewport-previous-max($key) {
+  $previous-key: viewport-previous-key($key);
+
+  @if not $previous-key {
+    @return null;
+  }
+
+  @return viewport-range($previous-key, max);
+}
+
+@mixin viewport-max($max) {
+  @media (max-width: $max) {
+    @content;
+  }
+}
+
+@mixin viewport-min($min) {
+  @media (min-width: $min) {
+    @content;
+  }
+}
+
+@mixin viewport-between($min, $max) {
+  @media (min-width: $min) and (max-width: $max) {
+    @content;
+  }
+}
+
+@mixin down($key) {
+  @include viewport-max(viewport-range($key, max)) {
+    @content;
+  }
+}
+
+@mixin up($key) {
+  $min: viewport-range($key, min);
+
+  @if not $min {
+    @content;
+  } @else {
+    @include viewport-min($min) {
+      @content;
+    }
+  }
+}
+
+@mixin only($key) {
+  $min: viewport-range($key, min);
+  $max: viewport-range($key, max);
+
+  @if not $min {
+    @include viewport-max($max) {
+      @content;
+    }
+  } @else {
+    @include viewport-between($min, $max) {
+      @content;
+    }
+  }
+}
+
+@mixin viewport-selector($name) {
+  .#{$name},
+  .--#{$name} {
+    @content;
+  }
+}