@neatui/css 4.8.2 → 5.0.0

package/core/query.scss

@@ -0,0 +1,361 @@
+@use 'sass:list';
+@use 'sass:string';
+
+$level: (
+  mob-s: 320px,
+  mob-m: 480px,
+  mob-l: 640px,
+  pad-s: 800px,
+  pad-m: 960px,
+  pad-l: 1120px,
+  dpc-s: 1280px,
+  dpc-m: 1440px,
+  dpc-l: 1600px
+);
+
+// 移动
+@mixin mob() {
+  $this: #{list.nth(&, 1)};
+  @media screen and (max-width: 799px) {
+    @if ($this == '') {
+      @content;
+    } @else {
+      & {
+        @content;
+      }
+    }
+  }
+}
+// 平板
+@mixin pad() {
+  $this: #{list.nth(&, 1)};
+  @media screen and (min-width: 800px) and (max-width: 1279px) {
+    @if ($this == '') {
+      @content;
+    } @else {
+      & {
+        @content;
+      }
+    }
+  }
+}
+// 桌面
+@mixin dpc() {
+  $this: #{list.nth(&, 1)};
+  @media screen and (min-width: 1280px) {
+    @if ($this == '') {
+      @content;
+    } @else {
+      & {
+        @content;
+      }
+    }
+  }
+}
+
+// 设备
+@mixin med($p) {
+  $this: #{list.nth(&, 1)};
+
+  $r: string.slice($p, 1, 1);
+  $_n: string.slice($p, 2, -1);
+
+  // 大于某节点时
+  @if ($r == '>') {
+    @if ($p == '>mob' or $p == '>mob-l') {
+      @media screen and (min-width: 800px) {
+        @if ($this == '') {
+          @content;
+        } @else {
+          & {
+            @content;
+          }
+        }
+      }
+    } @else if ($p == '>mob-s') {
+      @media screen and (min-width: 480px) {
+        @if ($this == '') {
+          @content;
+        } @else {
+          & {
+            @content;
+          }
+        }
+      }
+    } @else if ($p == '>mob-m') {
+      @media screen and (min-width: 640px) {
+        @if ($this == '') {
+          @content;
+        } @else {
+          & {
+            @content;
+          }
+        }
+      }
+    } @else if ($p == '>pad') {
+      @media screen and (min-width: 1280px) {
+        @if ($this == '') {
+          @content;
+        } @else {
+          & {
+            @content;
+          }
+        }
+      }
+    } @else if ($p == '>pad-s') {
+      @media screen and (min-width: 960px) {
+        @if ($this == '') {
+          @content;
+        } @else {
+          & {
+            @content;
+          }
+        }
+      }
+    } @else if ($p == '>pad-m') {
+      @media screen and (min-width: 1120px) {
+        @if ($this == '') {
+          @content;
+        } @else {
+          & {
+            @content;
+          }
+        }
+      }
+    } @else if ($p == '>dpc-s') {
+      @media screen and (min-width: 1440px) {
+        @if ($this == '') {
+          @content;
+        } @else {
+          & {
+            @content;
+          }
+        }
+      }
+    } @else if ($p == '>dpc-m') {
+      @media screen and (min-width: 1600px) {
+        @if ($this == '') {
+          @content;
+        } @else {
+          & {
+            @content;
+          }
+        }
+      }
+    } @else if ($p == '>pad-l') {
+      @media screen and (min-width: 1280px) {
+        @if ($this == '') {
+          @content;
+        } @else {
+          & {
+            @content;
+          }
+        }
+      }
+    }
+  } @else if ($r == '<') {
+    @if ($p == '<dpc-l') {
+      @media screen and (max-width: 1599px) {
+        @if ($this == '') {
+          @content;
+        } @else {
+          & {
+            @content;
+          }
+        }
+      }
+    } @else if ($p == '<dpc-m') {
+      @media screen and (max-width: 1439px) {
+        @if ($this == '') {
+          @content;
+        } @else {
+          & {
+            @content;
+          }
+        }
+      }
+    } @else if ($p == '<dpc-s' or $p == '<dpc') {
+      @media screen and (max-width: 1279px) {
+        @if ($this == '') {
+          @content;
+        } @else {
+          & {
+            @content;
+          }
+        }
+      }
+    } @else if ($p == '<pad-l') {
+      @media screen and (max-width: 1119px) {
+        @if ($this == '') {
+          @content;
+        } @else {
+          & {
+            @content;
+          }
+        }
+      }
+    } @else if ($p == '<pad-m') {
+      @media screen and (max-width: 959px) {
+        @if ($this == '') {
+          @content;
+        } @else {
+          & {
+            @content;
+          }
+        }
+      }
+    } @else if ($p == '<pad-s' or $p == '<pad') {
+      @media screen and (max-width: 799px) {
+        @if ($this == '') {
+          @content;
+        } @else {
+          & {
+            @content;
+          }
+        }
+      }
+    } @else if ($p == '<mob-l') {
+      @media screen and (max-width: 639px) {
+        @if ($this == '') {
+          @content;
+        } @else {
+          & {
+            @content;
+          }
+        }
+      }
+    } @else if ($p == '<mob-m') {
+      @media screen and (max-width: 479px) {
+        @if ($this == '') {
+          @content;
+        } @else {
+          & {
+            @content;
+          }
+        }
+      }
+    }
+  } @else if ($r == '=') {
+    @if ($p == '=dpc') {
+      @media screen and (min-width: 1280px) {
+        @if ($this == '') {
+          @content;
+        } @else {
+          & {
+            @content;
+          }
+        }
+      }
+    } @else if ($p == '=dpc-l') {
+      @media screen and (min-width: 1600px) {
+        @if ($this == '') {
+          @content;
+        } @else {
+          & {
+            @content;
+          }
+        }
+      }
+    } @else if ($p == '=dpc-m') {
+      @media screen and (min-width: 1440px) and (max-width: 1599px) {
+        @if ($this == '') {
+          @content;
+        } @else {
+          & {
+            @content;
+          }
+        }
+      }
+    } @else if ($p == '=dpc-s') {
+      @media screen and (min-width: 1280px) and (max-width: 1439px) {
+        @if ($this == '') {
+          @content;
+        } @else {
+          & {
+            @content;
+          }
+        }
+      }
+    } @else if ($p == '=pad') {
+      @media screen and (min-width: 800px) and (max-width: 1279px) {
+        @if ($this == '') {
+          @content;
+        } @else {
+          & {
+            @content;
+          }
+        }
+      }
+    } @else if ($p == '=pad-l') {
+      @media screen and (min-width: 1120px) and (max-width: 1279px) {
+        @if ($this == '') {
+          @content;
+        } @else {
+          & {
+            @content;
+          }
+        }
+      }
+    } @else if ($p == '=pad-m') {
+      @media screen and (min-width: 960px) and (max-width: 1119px) {
+        @if ($this == '') {
+          @content;
+        } @else {
+          & {
+            @content;
+          }
+        }
+      }
+    } @else if ($p == '=pad-s') {
+      @media screen and (min-width: 800px) and (max-width: 959px) {
+        @if ($this == '') {
+          @content;
+        } @else {
+          & {
+            @content;
+          }
+        }
+      }
+    } @else if ($p == '=mob') {
+      @media screen and (max-width: 799px) {
+        @if ($this == '') {
+          @content;
+        } @else {
+          & {
+            @content;
+          }
+        }
+      }
+    } @else if ($p == '=mob-l') {
+      @media screen and (min-width: 640px) and (max-width: 799px) {
+        @if ($this == '') {
+          @content;
+        } @else {
+          & {
+            @content;
+          }
+        }
+      }
+    } @else if ($p == '=mob-m') {
+      @media screen and (min-width: 480px) and (max-width: 639px) {
+        @if ($this == '') {
+          @content;
+        } @else {
+          & {
+            @content;
+          }
+        }
+      }
+    } @else if ($p == '=mob-s') {
+      @media screen and (max-width: 479px) {
+        @if ($this == '') {
+          @content;
+        } @else {
+          & {
+            @content;
+          }
+        }
+      }
+    }
+  }
+}