@neatui/css 3.10.3 → 3.10.5

package/README.md

@@ -20,9 +20,9 @@
 
 - 尺寸控制：
 
-  - `.full`, `.full-x`, `.full-y`: 100% 宽度/高度
-  - `.min-full`, `.min-full-x`, `.min-full-y`: 最小宽度/高度 100%
-  - `.max-full`, `.max-full-x`, `.max-full-y`: 最大宽度/高度 100%
+  - `.full`, `.w-full`, `.h-full`: 100% 宽度/高度
+  - `.min-full`, `.min-w-full`, `.min-h-full`: 最小宽度/高度 100%
+  - `.max-full`, `.max-w-full`, `.max-h-full`: 最大宽度/高度 100%
 
 - 文本对齐：
 
@@ -245,7 +245,7 @@ npm install @neatui/css
       main: #2196f3,
       text: #ffffff,
       // ... 其他颜色配置
-    )
+    ),
   )
 );
 ```

package/components/btns/btns@a.scss

@@ -163,7 +163,7 @@ body [ui-btn~='@a'] {
 
       &:hover,
       &.active {
-        box-shadow: inset 0 0 0 100em var(--co-text-xs);
+        box-shadow: inset 0 0 0 100em var(--co-text-o-xs);
       }
 
       // 边框式
@@ -258,7 +258,7 @@ body [ui-btn~='@a'] {
   & > *:hover,
   & > *.active {
     border: 1px solid var(--co-line);
-    box-shadow: inset 0 0 0 100em var(--co-text-xs);
+    box-shadow: inset 0 0 0 100em var(--co-text-o-xs);
   }
 
   // 正方形按钮
@@ -367,7 +367,7 @@ body [ui-btn~='@a'] {
 
         &:hover,
         &.active {
-          box-shadow: inset 0 0 0 100em var(--co-text-xs);
+          box-shadow: inset 0 0 0 100em var(--co-text-o-xs);
         }
       }
 

package/components/btns/btns@b.scss

@@ -161,7 +161,7 @@ body [ui-btn~='@b'] {
 
       &:hover,
       &.active {
-        box-shadow: inset 0 0 0 100em var(--co-text-xs);
+        box-shadow: inset 0 0 0 100em var(--co-text-o-xs);
       }
 
       // 边框式
@@ -247,7 +247,7 @@ body [ui-btn~='@b'] {
   & > *:hover,
   & > *.active {
     border: 1px solid var(--co-line);
-    box-shadow: inset 0 0 0 100em var(--co-text-xs);
+    box-shadow: inset 0 0 0 100em var(--co-text-o-xs);
   }
 
   // 正方形按钮
@@ -356,7 +356,7 @@ body [ui-btn~='@b'] {
 
         &:hover,
         &.active {
-          box-shadow: inset 0 0 0 100em var(--co-text-xs);
+          box-shadow: inset 0 0 0 100em var(--co-text-o-xs);
         }
       }
 

package/components/card/card@a.scss

@@ -72,9 +72,7 @@ $card_a_sz: 'xs', 's', 'm', 'l', 'xl';
           all 0.2s,
           padding 0.35s,
           margin 0.35s;
-        // @include theme {
-        background: var(--co-fore-lm);
-        // }
+        background: var(--co-fore-o-lm);
         padding: 1em 1.5em;
         margin-bottom: 1px;
       }
@@ -105,7 +103,7 @@ $card_a_sz: 'xs', 's', 'm', 'l', 'xl';
     [ui-card-head] {
       // margin-bottom: 2px;
       // @include theme {
-      border-bottom: 2px solid var(--co-back-ls);
+      border-bottom: 2px solid var(--co-back-o-ls);
       // }
     }
 
@@ -113,7 +111,7 @@ $card_a_sz: 'xs', 's', 'm', 'l', 'xl';
     [ui-card-foot] {
       // margin-top: 1px;
       // @include theme {
-      border-top: 1px solid var(--co-back-ls);
+      border-top: 1px solid var(--co-back-o-ls);
       // }
     }
   }
@@ -152,7 +150,7 @@ $card_a_sz: 'xs', 's', 'm', 'l', 'xl';
   &[#{$name}~='ux:hover']#{$path} {
     &:hover {
       // @include theme {
-      box-shadow: 0 1px 6px var(--co-text-xs);
+      box-shadow: 0 1px 6px var(--co-text-o-xs);
       // }
     }
   }

package/components/card/card@b.scss

@@ -23,7 +23,7 @@
     [ui-card-head] {
       padding: 0 1.5rem;
       line-height: 4rem;
-      border-bottom: 1px solid var(--co-line-mm);
+      border-bottom: 1px solid var(--co-line-o-mm);
       @include med('<dpc') {
         padding: 0 1rem;
         line-height: 3.5rem;

package/components/chat/chat@a.scss

@@ -23,7 +23,7 @@ $cos: 'main', 'well', 'warn', 'risk', 'info';
 
     color: var(--co-read);
     background: var(--co-weak);
-    box-shadow: 0 1px 2px var(--co-text-ss);
+    box-shadow: 0 1px 2px var(--co-text-o-ss);
 
     &::before {
       position: absolute;

package/components/form/base.scss

@@ -27,7 +27,7 @@ $cos: 'main', 'text', 'read', 'note', 'idle', 'case', 'line', 'info', 'well', 'w
     opacity 0s;
   min-width: 2em;
   min-height: 1.9em;
-  background: var(--co-main-fore-ls);
+  background: var(--co-main-w-ls);
   color: var(--co-fore);
 
   &::after {
@@ -43,7 +43,7 @@ $cos: 'main', 'text', 'read', 'note', 'idle', 'case', 'line', 'info', 'well', 'w
     transition:
       transform 0s,
       opacity 0s;
-    border-top-color: var(--co-main-fore-ls);
+    border-top-color: var(--co-main-w-ls);
   }
 
   &[ui-form-tips~='rt'] {
@@ -75,9 +75,9 @@ $cos: 'main', 'text', 'read', 'note', 'idle', 'case', 'line', 'info', 'well', 'w
 @each $co in $cos {
   [ui-form~='co:#{$co}'] {
     [ui-form-tips] {
-      background: var(--co-#{$co}-fore-ls);
+      background: var(--co-#{$co}-w-ls);
       &::after {
-        border-top-color: var(--co-#{$co}-fore-ls);
+        border-top-color: var(--co-#{$co}-w-ls);
       }
     }
   }
@@ -256,9 +256,9 @@ $cos: 'main', 'text', 'read', 'note', 'idle', 'case', 'line', 'info', 'well', 'w
     top: 0;
     margin: -0.5em auto auto -0.5em;
     transform: scale3d(0.5, 0.5, 1);
-    background: radial-gradient(circle at 47% 45%, transparent 41%, currentColor 44%, currentColor 52%, transparent 55%),
-      radial-gradient(circle at 78% 78%, currentColor 5%, transparent 6%), radial-gradient(circle at 82% 82%, currentColor 5%, transparent 6%),
-      radial-gradient(circle at 85% 85%, currentColor 5%, transparent 6%);
+    background:
+      radial-gradient(circle at 47% 45%, transparent 41%, currentColor 44%, currentColor 52%, transparent 55%), radial-gradient(circle at 78% 78%, currentColor 5%, transparent 6%),
+      radial-gradient(circle at 82% 82%, currentColor 5%, transparent 6%), radial-gradient(circle at 85% 85%, currentColor 5%, transparent 6%);
   }
 }
 
@@ -269,6 +269,7 @@ $cos: 'main', 'text', 'read', 'note', 'idle', 'case', 'line', 'info', 'well', 'w
   right: 0;
   background: none;
   box-shadow: none;
+  opacity: 0.6;
 
   &::before {
     position: relative;

package/components/form/form@a/input.scss

@@ -40,14 +40,14 @@ value	       规定输入字段的默认值。
     }
 
     &:hover {
-      border: 1px solid var(--co-main-mm);
+      border: 1px solid var(--co-main-o-mm);
     }
 
     &.form-focus,
     &:focus-within {
       background-color: var(--co-fore);
-      border: 1px solid var(--co-main-lm);
-      box-shadow: 0 0 0 2px var(--co-main-sm);
+      border: 1px solid var(--co-main-o-lm);
+      box-shadow: 0 0 0 2px var(--co-main-o-sm);
     }
 
     input {
@@ -82,7 +82,7 @@ value	       规定输入字段的默认值。
       }
 
       &::placeholder {
-        color: var(--co-read-sl);
+        color: var(--co-read-o-sl);
       }
     }
 

package/components/form/form@a/switch.scss

@@ -30,8 +30,11 @@ value	       规定输入字段的默认值。
   &[ui-form~='type:switch'] {
     position: relative;
     display: inline-flex;
-    align-items: baseline;
     flex-wrap: nowrap;
+    height: 2.5em;
+    justify-content: start;
+    align-content: center;
+    align-items: center;
 
     &[ui-form~=':block'] {
       display: flex;
@@ -50,7 +53,6 @@ value	       规定输入字段的默认值。
       border-radius: 10em;
       flex-shrink: 0;
       position: relative;
-      top: 0.15em;
 
       background-color: var(--co-fore);
 

package/components/form/form@a/textarea.scss

@@ -30,15 +30,15 @@ value	       规定输入字段的默认值。
 
     &:hover {
       // @include theme {
-      border: 1px solid var(--co-main-mm);
+      border: 1px solid var(--co-main-o-mm);
       // }
     }
 
     &.form-focus,
     &:focus {
       box-shadow:
-        inset 0 0 0 1px var(--co-main-mm),
-        0 0 0 2px var(--co-main-sm);
+        inset 0 0 0 1px var(--co-main-o-mm),
+        0 0 0 2px var(--co-main-o-sm);
     }
 
     // 颜色
@@ -81,7 +81,7 @@ value	       规定输入字段的默认值。
       }
 
       &::-webkit-input-placeholder {
-        color: var(--co-read-mm);
+        color: var(--co-read-o-mm);
       }
     }
 

package/components/form/form@a/upload.scss

@@ -89,7 +89,7 @@
           width: 100%;
           height: 100%;
 
-          background-color: var(--co-fore-ls);
+          background-color: var(--co-fore-o-ls);
 
           top: 0;
           right: 0;

package/components/form/form@b/input.scss

@@ -35,15 +35,15 @@ value	       规定输入字段的默认值。
     }
 
     &:hover {
-      box-shadow: inset 0 -1px 0 0 var(--co-main-mm);
+      box-shadow: inset 0 -1px 0 0 var(--co-main-o-mm);
     }
 
     &.form-focus,
     &:focus-within {
       background-color: var(--co-fore);
       box-shadow:
-        inset 0 -1px 0 0 var(--co-main-mm),
-        0 2px 0 0 var(--co-main-ss);
+        inset 0 -1px 0 0 var(--co-main-o-mm),
+        0 2px 0 0 var(--co-main-o-ss);
     }
 
     input {
@@ -78,7 +78,7 @@ value	       规定输入字段的默认值。
       }
 
       &::-webkit-input-placeholder {
-        color: var(--co-read-mm);
+        color: var(--co-read-o-mm);
       }
     }
 

package/components/form/form@b/textarea.scss

@@ -27,14 +27,14 @@ value	       规定输入字段的默认值。
     background-color: var(--co-fore);
 
     &:hover {
-      border: 1px solid var(--co-main-mm);
+      border: 1px solid var(--co-main-o-mm);
     }
 
     &.form-focus,
     &:focus {
       box-shadow:
-        inset 0 0 0 1px var(--co-main-mm),
-        0 0 0 2px var(--co-main-ss);
+        inset 0 0 0 1px var(--co-main-o-mm),
+        0 0 0 2px var(--co-main-o-ss);
     }
 
     // 颜色
@@ -77,7 +77,7 @@ value	       规定输入字段的默认值。
       }
 
       &::-webkit-input-placeholder {
-        color: var(--co-read-mm);
+        color: var(--co-read-o-mm);
       }
     }
 

package/components/form/form@b/upload.scss

@@ -88,7 +88,7 @@
           width: 100%;
           height: 100%;
 
-          background-color: var(--co-fore-lm);
+          background-color: var(--co-fore-o-lm);
 
           top: 0;
           right: 0;

package/components/form/form@c/input.scss

@@ -37,15 +37,15 @@ value	       规定输入字段的默认值。
     }
 
     &:hover {
-      border: 1px solid var(--co-main-mm);
+      border: 1px solid var(--co-main-o-mm);
     }
 
     &.form-focus,
     &:focus-within {
       background-color: var(--bg-weak);
       box-shadow:
-        inset 0 0 0 1px var(--co-main-mm),
-        0 0 0 2px var(--co-main-ss);
+        inset 0 0 0 1px var(--co-main-o-mm),
+        0 0 0 2px var(--co-main-o-ss);
     }
 
     input {
@@ -77,7 +77,7 @@ value	       规定输入字段的默认值。
       }
 
       &::-webkit-input-placeholder {
-        color: var(--co-read-mm);
+        color: var(--co-read-o-mm);
       }
     }
 
@@ -145,7 +145,8 @@ value	       规定输入字段的默认值。
 
     // 搜索
     [ui-form-search] {
-      background: radial-gradient(circle at 47% 45%, transparent 40%, currentColor 43%, currentColor 53%, transparent 56%),
+      background:
+        radial-gradient(circle at 47% 45%, transparent 40%, currentColor 43%, currentColor 53%, transparent 56%),
         radial-gradient(circle at 78% 78%, currentColor 5%, rgba(0, 0, 0, 0) 6%), radial-gradient(circle at 82% 82%, currentColor 5%, rgba(0, 0, 0, 0) 6%),
         radial-gradient(circle at 85% 85%, currentColor 5%, rgba(0, 0, 0, 0) 6%);
     }

package/components/form/form@c/textarea.scss

@@ -28,15 +28,15 @@ value	       规定输入字段的默认值。
     background-color: var(--bg-weak);
 
     &:hover {
-      border: 1px solid var(--co-main-mm);
+      border: 1px solid var(--co-main-o-mm);
     }
 
     &.form-focus,
     &:focus {
       background-color: transparent;
       box-shadow:
-        inset 0 0 0 1px var(--co-main-mm),
-        0 0 0 2px var(--co-main-ss);
+        inset 0 0 0 1px var(--co-main-o-mm),
+        0 0 0 2px var(--co-main-o-ss);
     }
 
     // 颜色

package/components/form/form@c/upload.scss

@@ -89,7 +89,7 @@
           width: 100%;
           height: 100%;
 
-          background-color: var(--co-fore-ls);
+          background-color: var(--co-fore-o-ls);
 
           top: 0;
           right: 0;

package/components/form/form@d/input.scss

@@ -43,15 +43,15 @@ value	       规定输入字段的默认值。
       // @include theme {
       //   border: 1px solid rgba(var(--co-main), 0.5);
       // }
-      border: 1px solid var(--co-main-mm);
+      border: 1px solid var(--co-main-o-mm);
     }
 
     &.form-focus,
     &:focus-within {
       // @include theme {
       background-color: var(--co-fore);
-      border: 1px solid var(--co-main-sl);
-      box-shadow: 0 0 0 2px var(--co-main-ss);
+      border: 1px solid var(--co-main-o-sl);
+      box-shadow: 0 0 0 2px var(--co-main-o-ss);
       // }
     }
 
@@ -89,7 +89,7 @@ value	       规定输入字段的默认值。
       }
 
       &::placeholder {
-        color: var(--co-read-sl);
+        color: var(--co-read-o-sl);
       }
     }
 

package/components/form/form@d/textarea.scss

@@ -30,15 +30,15 @@ value	       规定输入字段的默认值。
 
     &:hover {
       // @include theme {
-      border: 1px solid var(--co-main-mm);
+      border: 1px solid var(--co-main-o-mm);
       // }
     }
 
     &.form-focus,
     &:focus {
       box-shadow:
-        inset 0 0 0 1px var(--co-main-mm),
-        0 0 0 2px var(--co-main-sm);
+        inset 0 0 0 1px var(--co-main-o-mm),
+        0 0 0 2px var(--co-main-o-sm);
     }
 
     // 颜色
@@ -81,7 +81,7 @@ value	       规定输入字段的默认值。
       }
 
       &::-webkit-input-placeholder {
-        color: var(--co-read-mm);
+        color: var(--co-read-o-mm);
       }
     }
 

package/components/form/form@d/upload.scss

@@ -89,7 +89,7 @@
           width: 100%;
           height: 100%;
 
-          background-color: var(--co-fore-ls);
+          background-color: var(--co-fore-o-ls);
 
           top: 0;
           right: 0;

package/components/list/list@a.scss

@@ -20,7 +20,7 @@ $list-a-type: 'main', 'read', 'info', 'well', 'warn', 'risk';
       padding: 0;
 
       & > * {
-        border-bottom: 1px solid var(--co-line-fore);
+        border-bottom: 1px solid var(--co-line-o-lm);
 
         padding: 1rem;
 

package/components/load/load@a.scss

@@ -28,14 +28,14 @@
       border-radius: 1em;
       color: var(--co-text);
       box-shadow:
-        -1em 0 var(--co-text-ls),
-        1em 0 var(--co-text-sl),
-        0 1em var(--co-text-mm),
-        0 -1em var(--co-text-ll),
-        -0.7em 0.7em var(--co-text-ml),
+        -1em 0 var(--co-text-o-ls),
+        1em 0 var(--co-text-o-sl),
+        0 1em var(--co-text-o-mm),
+        0 -1em var(--co-text-o-ll),
+        -0.7em 0.7em var(--co-text-o-ml),
         0.7em -0.7em var(--co-text),
-        -0.7em -0.7em var(--co-text-lm),
-        0.7em 0.7em var(--co-text-ms);
+        -0.7em -0.7em var(--co-text-o-lm),
+        0.7em 0.7em var(--co-text-o-ms);
 
       transform: rotate3d(0, 0, 1, 6deg) scale(0.45);
     }

package/components/navs/navs@a.scss

@@ -18,13 +18,13 @@
     user-select: none;
 
     &:hover {
-      box-shadow: inset 0 0 0 100em var(--co-text-xs);
+      box-shadow: inset 0 0 0 100em var(--co-text-o-xs);
     }
     &:active {
       transform: translateX(1px);
     }
     &.active {
-      box-shadow: inset 0 0 0 100em var(--co-main-ss);
+      box-shadow: inset 0 0 0 100em var(--co-main-o-ss);
       color: var(--co-main);
       fill: var(--co-main);
     }

package/components/navs/navs@b.scss

@@ -48,7 +48,7 @@
 
       &.active {
         & > *:first-child {
-          color: var(--co-main-text);
+          color: var(--co-main-o-text);
         }
       }
     }
@@ -60,7 +60,7 @@
 
       &.active {
         & > *:first-child {
-          color: var(--co-main-text);
+          color: var(--co-main-o-text);
         }
       }
     }
@@ -68,7 +68,7 @@
 
   &[ui-navs~='back'] {
     & > * {
-      color: var(--co-back-ls);
+      color: var(--co-back-o-ls);
 
       &.active {
         & > *:first-child {

package/components/note/note@a.scss

@@ -6,8 +6,8 @@ $note-a-co: 'main', 'well', 'warn', 'risk', 'info';
     padding: 0.5em 1em;
     border-radius: 0.25rem;
     color: var(--co-read);
-    box-shadow: inset 0 0 0 1px var(--co-read-sl);
-    background: var(--co-read-xs);
+    box-shadow: inset 0 0 0 1px var(--co-read-o-sl);
+    background: var(--co-read-o-xs);
   }
 
   // 颜色

package/components/note/note@b.scss

@@ -6,7 +6,7 @@ $note-b-co: 'main', 'well', 'warn', 'risk';
   border-radius: 0.1em;
 
   color: var(--co-read);
-  background: var(--co-read-ss);
+  background: var(--co-read-o-ss);
   border-left: 2px solid var(--co-read);
 
   @each $key in $note-b-co {

package/components/table/base.scss

@@ -28,7 +28,7 @@
         height: 100%;
         right: -5px;
         top: 0;
-        box-shadow: inset 5px 0 5px -5px var(--co-text-ss);
+        box-shadow: inset 5px 0 5px -5px var(--co-text-o-ss);
       }
     }
     &[col-fixed-side='r'] {
@@ -41,7 +41,7 @@
         height: 100%;
         left: -5px;
         top: 0;
-        box-shadow: inset -5px 0 5px -5px var(--co-text-ss);
+        box-shadow: inset -5px 0 5px -5px var(--co-text-o-ss);
       }
     }
   }

package/components/table/table@a.scss

@@ -48,7 +48,7 @@
 
     &:hover {
       td {
-        background-color: var(--co-weak-fore-lm);
+        background-color: var(--co-weak-w-lm);
       }
     }
   }

package/components/table/table@b.scss

@@ -5,9 +5,9 @@
   // 固定头部
   .table-head-fixed {
     box-shadow:
-      0 1px 0 var(--co-line-sm),
-      0 2px 0 var(--co-line-sm),
-      0 3px 0 var(--co-line-sm);
+      0 1px 0 var(--co-line-o-sm),
+      0 2px 0 var(--co-line-o-sm),
+      0 3px 0 var(--co-line-o-sm);
   }
 
   tr {
@@ -58,7 +58,7 @@
         &,
         th,
         td {
-          background-color: var(--co-weak-fore-lm);
+          background-color: var(--co-weak-w-lm);
         }
       }
     }

package/components/table/table@c.scss

@@ -20,7 +20,7 @@
     th,
     td {
       background-color: var(--co-fore);
-      border-bottom: 1px solid var(--co-line-lm);
+      border-bottom: 1px solid var(--co-line-o-lm);
     }
 
     &:first-child {
@@ -49,7 +49,7 @@
     // 交互样式
     &:hover {
       td {
-        background-color: var(--co-weak-fore-lm);
+        background-color: var(--co-weak-w-lm);
       }
     }
   }