vanilla-jui 1.7.34 → 1.7.36

package/src/css/themes/default/form.css

@@ -51,7 +51,7 @@
   }
 
   .j-input:not([type='checkbox']) {
-    border: 1px solid var(--ui-border);
+    border: var(--border);
     border-radius: var(--radius-md);
     padding: var(--input-padding, 0 8px);
     height: var(--input-height, var(--el-height));
@@ -148,7 +148,7 @@
     width: 1rem;
     height: 1rem;
     border-radius: 50%;
-    border: 1px solid var(--ui-border);
+    border: var(--border);
     background-color: var(--ui-bg);
     margin: 0;
     cursor: pointer;
@@ -164,7 +164,7 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%) scale(0);
-    transition: transform 0.15s ease-in-out;
+    transition: transform 0.2s ease;
   }
 
   .j-radio label input[type='radio']:checked::before {
@@ -201,14 +201,16 @@
     align-items: center;
     text-align: center;
     user-select: none;
-    transition: all 0.2s ease-in-out;
+    transition-property: box-shadow, color, background-color;
+    transition-duration: 0.2s;
+    transition-timing-function: ease;
   }
 
   .j-radio.is-group label:not(:first-child) span.radio-text {
     margin-left: 1px;
   }
 
-  .j-radio.is-group input[type='radio']:checked+span.radio-text {
+  .j-radio.is-group input[type='radio']:checked + span.radio-text {
     box-shadow: 0 0 0 1px var(--tone-solid);
     color: var(--tone-solid);
     background-color: var(--tone-soft);
@@ -275,7 +277,7 @@
     width: 1rem;
     height: 1rem;
     aspect-ratio: 1/1;
-    border: 1px solid var(--ui-border);
+    border: var(--border);
     border-radius: var(--checkbox-radius, var(--radius-sm));
     cursor: pointer;
     position: relative;
@@ -322,7 +324,7 @@
     inset: 0;
     border-radius: 50px;
     background-color: var(--ui-border);
-    transition: all 0.2s var(--bezier);
+    transition: all 0.2s ease;
   }
 
   .j-switch .switch-slider:after {
@@ -330,7 +332,7 @@
     position: absolute;
     border-radius: 50%;
     background-color: #fff;
-    transition: all 0.2s var(--bezier);
+    transition: all 0.2s ease;
   }
 
   .j-switch.is-sm .switch-slider:after {
@@ -354,27 +356,33 @@
     height: 1.5rem;
   }
 
-  .j-switch input[type='checkbox']:checked+.switch-slider {
+  .j-switch input[type='checkbox']:checked + .switch-slider {
     background-color: var(--tone-solid);
   }
 
-  .j-switch.is-sm input[type='checkbox']:checked+.switch-slider:after {
+  .j-switch.is-sm input[type='checkbox']:checked + .switch-slider:after {
     transform: translateX(0.75rem);
   }
 
-  .j-switch.is-md input[type='checkbox']:checked+.switch-slider:after {
+  .j-switch.is-md input[type='checkbox']:checked + .switch-slider:after {
     transform: translateX(1.125rem);
   }
 
-  .j-switch.is-lg input[type='checkbox']:checked+.switch-slider:after {
+  .j-switch.is-lg input[type='checkbox']:checked + .switch-slider:after {
     transform: translateX(1.5rem);
   }
 
-  .j-theme-gray .j-switch input[type='checkbox']:checked+.switch-slider:after {
+  .j-theme-gray
+    .j-switch
+    input[type='checkbox']:checked
+    + .switch-slider:after {
     background-color: var(--ui-bg);
   }
 
-  .j-theme-olive .j-switch input[type='checkbox']:checked+.switch-slider:after {
+  .j-theme-olive
+    .j-switch
+    input[type='checkbox']:checked
+    + .switch-slider:after {
     background-color: var(--ui-bg);
   }
 
@@ -385,7 +393,7 @@
   /* select */
   select.j-select {
     padding: var(--input-padding, 0 6px);
-    border: 1px solid var(--ui-border);
+    border: var(--border);
     border-radius: var(--radius-md);
     height: var(--el-height);
     line-height: var(--line-height);
@@ -402,7 +410,7 @@
   /* textarea */
   textarea.j-textarea {
     min-height: 72px;
-    border: 1px solid var(--ui-border);
+    border: var(--border);
     border-radius: var(--radius-md);
     color: var(--tone-body);
     background-color: var(--ui-bg);
@@ -446,9 +454,9 @@
     --btn-box-shadow: none;
   }
 
-  .input-group .el-addon>.el-text {
+  .input-group .el-addon > .el-text {
     background-color: var(--ui-bg-muted);
-    border: 1px solid var(--ui-border);
+    border: var(--border);
     border-radius: var(--radius-md);
   }
 
@@ -457,28 +465,31 @@
     width: var(--input-height);
   }
 
-  .input-group>*:not(:first-child) {
+  .input-group > *:not(:first-child) {
     margin-left: -1px;
   }
 
-  .input-group>input.j-input:not(:first-child),
-  .input-group>select.j-select:not(:first-child),
-  .input-group> :not(select.j-select)+.el-addon:not(:first-child)>.el-text {
+  .input-group > input.j-input:not(:first-child),
+  .input-group > select.j-select:not(:first-child),
+  .input-group
+    > :not(select.j-select)
+    + .el-addon:not(:first-child)
+    > .el-text {
     border-left-color: transparent;
   }
 
-  .input-group>input.j-input:not(:first-child),
-  .input-group>select.j-select:not(:first-child),
-  .input-group>*:not(:first-child)>*,
-  .input-group>*:not(:first-child)>.el-text {
+  .input-group > input.j-input:not(:first-child),
+  .input-group > select.j-select:not(:first-child),
+  .input-group > *:not(:first-child) > *,
+  .input-group > *:not(:first-child) > .el-text {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
   }
 
-  .input-group>input.j-input:not(:last-child),
-  .input-group>select.j-select:not(:last-child),
-  .input-group>*:not(:last-child)>*,
-  .input-group>*:not(:last-child)>.el-text {
+  .input-group > input.j-input:not(:last-child),
+  .input-group > select.j-select:not(:last-child),
+  .input-group > *:not(:last-child) > *,
+  .input-group > *:not(:last-child) > .el-text {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
   }
@@ -493,7 +504,7 @@
   }
 
   .input-inner-group {
-    border: 1px solid var(--ui-border);
+    border: var(--border);
     border-radius: var(--radius-md);
   }
 
@@ -507,13 +518,13 @@
     --btn-box-shadow: none;
   }
 
-  .input-inner-group .el-addon+.j-input {
+  .input-inner-group .el-addon + .j-input {
     padding-left: 0;
     padding-right: 4px;
   }
 
-  .input-inner-group .el-addon+.j-select {
-    padding-left: 2px;
+  .input-inner-group .el-addon + .j-select {
+    padding: 0;
   }
 
   .input-inner-group .el-addon {
@@ -524,15 +535,6 @@
     justify-content: center;
   }
 
-  .input-inner-group .el-addon .j-btn:not(.is-icon) {
-    --btn-height: var(--el-height-sm);
-  }
-
-  .input-inner-group .el-addon .j-btn.is-xs:not(.is-icon),
-  .input-inner-group .el-addon .j-btn.is-sm:not(.is-icon) {
-    height: inherit;
-  }
-
   /* .input-group .j-btn:active, */
   .input-inner-group:has(input:focus),
   .input-inner-group:has(select:focus) {
@@ -545,8 +547,8 @@
     height: var(--font-size-xl);
   }
 
-  .input-group .el-addon>.el-text,
-  .input-inner-group .el-addon>.el-text {
+  .input-group .el-addon > .el-text,
+  .input-inner-group .el-addon > .el-text {
     display: flex;
     align-items: center;
     user-select: none;
@@ -649,7 +651,7 @@
     background-color: var(--ui-bg-disabled);
   }
 
-  .j-radio.is-group label input[type='radio']:disabled+.radio-text {
+  .j-radio.is-group label input[type='radio']:disabled + .radio-text {
     cursor: not-allowed;
     background-color: var(--ui-bg-disabled);
     color: var(--ui-fg-disabled);
@@ -683,12 +685,7 @@
   /*************************
    * .mobile
    *************************/
-  .mobile input.j-input[type='file'] {
-    --input-padding: 8px;
-  }
-
-  .mobile .j-input[type='file'],
   .mobile .j-textarea {
     width: 100%;
   }
-}
+}

package/src/css/themes/default/index.css

@@ -26,4 +26,4 @@
 
 @import url('./tooltip.css');
 @import url('./captcha.css');
-@import url('./loading.css');
+@import url('./loading.css');

package/src/css/themes/default/loading.css

@@ -53,11 +53,14 @@
   .j-loader .flow-loader {
     --loader-width: 2px;
     --loader-bg:
-      radial-gradient(farthest-side, var(--tone-solid) 94%, #0000) top/var(--loader-width) var(--loader-width) no-repeat,
+      radial-gradient(farthest-side, var(--tone-solid) 94%, #0000)
+        top/var(--loader-width) var(--loader-width) no-repeat,
       conic-gradient(#0000 30%, var(--tone-solid));
-    --loader-mask: radial-gradient(farthest-side,
-        #0000 calc(100% - var(--loader-width)),
-        #000 0);
+    --loader-mask: radial-gradient(
+      farthest-side,
+      #0000 calc(100% - var(--loader-width)),
+      #000 0
+    );
 
     width: var(--loader-size);
     height: var(--loader-size);
@@ -75,63 +78,75 @@
     }
 
     12.5% {
-      clip-path: polygon(50% 50%,
-          0 0,
-          50% 0%,
-          100% 0%,
-          100% 0%,
-          100% 0%,
-          100% 0%);
+      clip-path: polygon(
+        50% 50%,
+        0 0,
+        50% 0%,
+        100% 0%,
+        100% 0%,
+        100% 0%,
+        100% 0%
+      );
     }
 
     25% {
-      clip-path: polygon(50% 50%,
-          0 0,
-          50% 0%,
-          100% 0%,
-          100% 100%,
-          100% 100%,
-          100% 100%);
+      clip-path: polygon(
+        50% 50%,
+        0 0,
+        50% 0%,
+        100% 0%,
+        100% 100%,
+        100% 100%,
+        100% 100%
+      );
     }
 
     50% {
-      clip-path: polygon(50% 50%,
-          0 0,
-          50% 0%,
-          100% 0%,
-          100% 100%,
-          50% 100%,
-          0% 100%);
+      clip-path: polygon(
+        50% 50%,
+        0 0,
+        50% 0%,
+        100% 0%,
+        100% 100%,
+        50% 100%,
+        0% 100%
+      );
     }
 
     62.5% {
-      clip-path: polygon(50% 50%,
-          100% 0,
-          100% 0%,
-          100% 0%,
-          100% 100%,
-          50% 100%,
-          0% 100%);
+      clip-path: polygon(
+        50% 50%,
+        100% 0,
+        100% 0%,
+        100% 0%,
+        100% 100%,
+        50% 100%,
+        0% 100%
+      );
     }
 
     75% {
-      clip-path: polygon(50% 50%,
-          100% 100%,
-          100% 100%,
-          100% 100%,
-          100% 100%,
-          50% 100%,
-          0% 100%);
+      clip-path: polygon(
+        50% 50%,
+        100% 100%,
+        100% 100%,
+        100% 100%,
+        100% 100%,
+        50% 100%,
+        0% 100%
+      );
     }
 
     100% {
-      clip-path: polygon(50% 50%,
-          50% 100%,
-          50% 100%,
-          50% 100%,
-          50% 100%,
-          50% 100%,
-          0% 100%);
+      clip-path: polygon(
+        50% 50%,
+        50% 100%,
+        50% 100%,
+        50% 100%,
+        50% 100%,
+        50% 100%,
+        0% 100%
+      );
     }
   }
 
@@ -152,4 +167,4 @@
       transform: scaleY(-1) rotate(-135deg);
     }
   }
-}
+}