@neatui/css 3.10.6 → 3.12.0

package/core/basic.scss

@@ -1,4 +1,5 @@
 @use './media.scss' as *;
+@use './vars.scss' as *;
 
 @mixin base($d: '') {
   .#{$d}w-auto {
@@ -23,41 +24,29 @@
 
   // BASE
   .#{$d}full,
-  .#{$d}w-full,
-  .#{$d}full-sub > *,
-  .#{$d}w-full-sub > * {
+  .#{$d}w-full {
     width: 100%;
   }
   .#{$d}full,
-  .#{$d}h-full,
-  .#{$d}full-sub > *,
-  .#{$d}h-full-sub > * {
+  .#{$d}h-full {
     height: 100%;
   }
 
   .#{$d}min-full,
-  .#{$d}min-w-full,
-  .#{$d}min-full-sub > *,
-  .#{$d}min-w-full-sub > * {
+  .#{$d}min-w-full {
     min-width: 100%;
   }
   .#{$d}min-full,
-  .#{$d}min-h-full,
-  .#{$d}min-full-sub > *,
-  .#{$d}min-h-full-sub > * {
+  .#{$d}min-h-full {
     min-height: 100%;
   }
 
   .#{$d}max-full,
-  .#{$d}max-w-full,
-  .#{$d}max-full-sub > *,
-  .#{$d}max-w-full-sub > * {
+  .#{$d}max-w-full {
     max-width: 100%;
   }
   .#{$d}max-full,
-  .#{$d}max-h-full,
-  .#{$d}max-full-sub > *,
-  .#{$d}max-h-full-sub > * {
+  .#{$d}max-h-full {
     max-height: 100%;
   }
 
@@ -86,45 +75,19 @@
   }
 
   // 顶部对齐
-  .#{$d}vt,
-  .#{$d}vt-sub > * {
+  .#{$d}vt {
     vertical-align: top;
   }
   // 上下居中
-  .#{$d}vm,
-  .#{$d}vm-sub > * {
+  .#{$d}vm {
     vertical-align: middle;
   }
 
   // 底部对齐
-  .#{$d}vb,
-  .#{$d}vb-sub > * {
+  .#{$d}vb {
     vertical-align: bottom;
   }
 
-  // 横竖对齐
-  .#{$d}avc {
-    position: relative;
-    display: table;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    text-align: center;
-
-    & > * {
-      width: 100%;
-      height: 100%;
-      display: table-cell;
-      vertical-align: middle;
-
-      & > * {
-        display: inline-block;
-        text-align: left;
-      }
-    }
-  }
-
   /*定位*/
   .#{$d}pr,
   .#{$d}pr-sub > * {
@@ -143,32 +106,6 @@
     position: sticky;
   }
 
-  /*浮动*/
-  .#{$d}fl,
-  .#{$d}fl-sub > * {
-    float: left;
-  }
-  .#{$d}fr,
-  .#{$d}fr-sub > * {
-    float: right;
-  }
-  .#{$d}fn,
-  .#{$d}fn-sub > * {
-    float: none;
-  }
-
-  // 清除浮动
-  .#{$d}cb,
-  .#{$d}cb-sub > * {
-    clear: both;
-
-    &:after {
-      display: table;
-      content: '';
-      clear: both;
-    }
-  }
-
   // 字体粗细
   .#{$d}bold {
     font-weight: bold;
@@ -182,16 +119,6 @@
         -moz-osx-font-smoothing: auto;
       }
     }
-
-    // 宽度
-    .#{$d}w#{$i*10} {
-      width: $i * 10%;
-    }
-
-    // 缩小
-    .#{$d}sr#{$i} {
-      transform: scale(#{calc($i / 10)});
-    }
   }
   .#{$d}fw0 {
     font-weight: normal;
@@ -209,9 +136,7 @@
   }
 
   // 块级
-  .#{$d}b,
   .#{$d}block,
-  .#{$d}b-sub > *,
   .#{$d}block-sub > * {
     display: block;
   }
@@ -221,21 +146,15 @@
   .#{$d}inline-block-sub > * {
     display: inline-block;
   }
-  .#{$d}df,
   .#{$d}flex,
-  .#{$d}df-sub > *,
   .#{$d}flex-sub > * {
     display: flex;
   }
-  .#{$d}dif,
   .#{$d}inline-flex,
-  .#{$d}dif-sub > *,
   .#{$d}inline-flex-sub > * {
     display: inline-flex;
   }
-  .#{$d}di,
   .#{$d}inline,
-  .#{$d}di-sub > *,
   .#{$d}inline-sub > * {
     display: inline;
   }
@@ -257,128 +176,6 @@
     white-space: nowrap;
   }
 
-  // 是否穿透
-  .#{$d}pe-auto {
-    pointer-events: auto;
-  }
-  .#{$d}pe-none {
-    pointer-events: none;
-  }
-
-  // 图层层级
-  .#{$d}z-no {
-    z-index: 0;
-  }
-  .#{$d}z-ss {
-    z-index: 1;
-  }
-  .#{$d}z-sm {
-    z-index: 2;
-  }
-  .#{$d}z-sl {
-    z-index: 3;
-  }
-  .#{$d}z-ms {
-    z-index: 4;
-  }
-  .#{$d}z-mm {
-    z-index: 5;
-  }
-  .#{$d}z-ml {
-    z-index: 6;
-  }
-  .#{$d}z-ls {
-    z-index: 7;
-  }
-  .#{$d}z-lm {
-    z-index: 8;
-  }
-  .#{$d}z-ll {
-    z-index: 9;
-  }
-
-  // 不透明度
-  .#{$d}o-no,
-  .#{$d}o-no\:hover:hover {
-    opacity: 0;
-  }
-  .#{$d}o-xs,
-  .#{$d}o-xs\:hover:hover {
-    opacity: 0.05;
-  }
-  .#{$d}o-ss,
-  .#{$d}o-ss\:hover:hover {
-    opacity: 0.1;
-  }
-  .#{$d}o-sm,
-  .#{$d}o-sm\:hover:hover {
-    opacity: 0.2;
-  }
-  .#{$d}o-sl,
-  .#{$d}o-sl\:hover:hover {
-    opacity: 0.3;
-  }
-  .#{$d}o-ms,
-  .#{$d}o-ms\:hover:hover {
-    opacity: 0.4;
-  }
-  .#{$d}o-mm,
-  .#{$d}o-mm\:hover:hover {
-    opacity: 0.5;
-  }
-  .#{$d}o-ml,
-  .#{$d}o-ml\:hover:hover {
-    opacity: 0.6;
-  }
-  .#{$d}o-ls,
-  .#{$d}o-ls\:hover:hover {
-    opacity: 0.7;
-  }
-  .#{$d}o-lm,
-  .#{$d}o-lm\:hover:hover {
-    opacity: 0.8;
-  }
-  .#{$d}o-ll,
-  .#{$d}o-ll\:hover:hover {
-    opacity: 0.9;
-  }
-  .#{$d}o-xl,
-  .#{$d}o-xl\:hover:hover {
-    opacity: 0.95;
-  }
-  .#{$d}o-xx,
-  .#{$d}o-xx\:hover:hover {
-    opacity: 1;
-  }
-
-  .#{$d}o-ss\+mm {
-    opacity: 0.15;
-  }
-  .#{$d}o-sm\+mm {
-    opacity: 0.25;
-  }
-  .#{$d}o-sl\+mm {
-    opacity: 0.35;
-  }
-  .#{$d}o-ms\+mm {
-    opacity: 0.45;
-  }
-  .#{$d}o-mm\+mm {
-    opacity: 0.55;
-  }
-  .#{$d}o-ml\+mm {
-    opacity: 0.65;
-  }
-  .#{$d}o-ls\+mm {
-    opacity: 0.75;
-  }
-  .#{$d}o-lm\+mm {
-    opacity: 0.85;
-  }
-  .#{$d}o-ll\+mm {
-    opacity: 0.95;
-  }
-
   .#{$d}upper {
     text-transform: uppercase;
   }
@@ -413,14 +210,13 @@ code,
     width: 100%;
     height: 100%;
   }
-}
 
-[layout='full'] {
   .box {
     width: 100%;
     max-width: 100%;
   }
 }
+
 // 容器
 .box,
 .box-base {
@@ -497,79 +293,34 @@ code,
 [ui-omit]:not([ui-omit~='1']) {
   display: -webkit-box;
   -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--line);
 }
 [ui-omit~='1'] {
   white-space: nowrap;
 }
 [ui-omit~='2'] {
-  -webkit-line-clamp: 2;
+  --line: 2;
 }
 [ui-omit~='3'] {
-  -webkit-line-clamp: 3;
+  --line: 3;
 }
 [ui-omit~='4'] {
-  -webkit-line-clamp: 4;
+  --line: 4;
 }
 [ui-omit~='5'] {
-  -webkit-line-clamp: 5;
+  --line: 5;
 }
 [ui-omit~='6'] {
-  -webkit-line-clamp: 6;
+  --line: 6;
 }
 [ui-omit~='7'] {
-  -webkit-line-clamp: 7;
+  --line: 7;
 }
 [ui-omit~='8'] {
-  -webkit-line-clamp: 8;
+  --line: 8;
 }
 [ui-omit~='9'] {
-  -webkit-line-clamp: 9;
-}
-// 等分
-.ew1,
-.ew1-sub > *,
-.ew1-sun > * > * {
-  width: 100%;
-}
-.ew2,
-.ew2-sub > *,
-.ew2-sun > * > * {
-  width: 50%;
-}
-.ew3,
-.ew3-sub > *,
-.ew3-sun > * > * {
-  width: 33.333333%;
-}
-.ew4,
-.ew4-sub > *,
-.ew4-sun > * > * {
-  width: 25%;
-}
-.ew5,
-.ew5-sub > *,
-.ew5-sun > * > * {
-  width: 20%;
-}
-.ew6,
-.ew6-sub > *,
-.ew6-sun > * > * {
-  width: 16.666666%;
-}
-.ew7,
-.ew7-sub > *,
-.ew7-sun > * > * {
-  width: 14.285714%;
-}
-.ew8,
-.ew8-sub > *,
-.ew8-sun > * > * {
-  width: 12.5%;
-}
-.ew9,
-.ew9-sub > *,
-.ew9-sun > * > * {
-  width: 11.111111%;
+  --line: 9;
 }
 
 // 符号与单位
@@ -596,3 +347,27 @@ code,
   width: 1em;
   height: 1em;
 }
+
+// 图层层级
+$zv: 0;
+@each $i in $grades {
+  .z-#{$i},
+  .z-#{$i}\:hover:hover {
+    z-index: $zv;
+  }
+  $zv: $zv + 1;
+}
+
+// 不透明度
+$ov: 0;
+@each $i in $grades {
+  .o-#{$i},
+  .o-#{$i}\:hover:hover {
+    opacity: $ov;
+  }
+  @if $ov < 0.1 or $ov >= 0.9 {
+    $ov: $ov + 0.05;
+  } @else {
+    $ov: $ov + 0.1;
+  }
+}