vanilla-jui 1.4.5 → 1.4.7

package/src/css/form.css

@@ -1,5 +1,4 @@
 @layer components {
-
   .j-form,
   .j-form .form-item,
   .j-form .form-item .item-label {
@@ -119,7 +118,6 @@
     letter-spacing: 0.5px;
   }
 
-
   /* type file */
   .j-input[type='file'] {
     appearance: none;
@@ -181,7 +179,8 @@
     padding-right: calc(1.4285714286em + 0.875rem);
     background-repeat: no-repeat;
     background-position: right calc(0.3571428572em + 0.21875rem) center;
-    background-size: calc(0.7142857143em + 0.4375rem) calc(0.7142857143em + 0.4375rem);
+    background-size: calc(0.7142857143em + 0.4375rem)
+      calc(0.7142857143em + 0.4375rem);
   }
 
   .j-input.is-valid,
@@ -321,7 +320,7 @@
     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 0.0625em var(--tone-solid);
     background-color: var(--tone-solid);
     z-index: 1;
@@ -491,27 +490,39 @@
     height: 1.5rem;
   }
 
-  .j-switch.is-default input[type='checkbox']:checked+.switch-slider {
+  .j-switch.is-default input[type='checkbox']:checked + .switch-slider {
     background-color: var(--tone-solid);
   }
 
-  .j-switch.is-default.is-sm input[type='checkbox']:checked+.switch-slider:after {
+  .j-switch.is-default.is-sm
+    input[type='checkbox']:checked
+    + .switch-slider:after {
     transform: translateX(0.75rem);
   }
 
-  .j-switch.is-default.is-md input[type='checkbox']:checked+.switch-slider:after {
+  .j-switch.is-default.is-md
+    input[type='checkbox']:checked
+    + .switch-slider:after {
     transform: translateX(1.125rem);
   }
 
-  .j-switch.is-default.is-lg input[type='checkbox']:checked+.switch-slider:after {
+  .j-switch.is-default.is-lg
+    input[type='checkbox']:checked
+    + .switch-slider:after {
     transform: translateX(1.5rem);
   }
 
-  .j-theme-gray .j-switch.is-default input[type='checkbox']:checked+.switch-slider:after {
+  .j-theme-gray
+    .j-switch.is-default
+    input[type='checkbox']:checked
+    + .switch-slider:after {
     background-color: var(--ui-bg);
   }
 
-  .j-theme-olive .j-switch.is-default input[type='checkbox']:checked+.switch-slider:after {
+  .j-theme-olive
+    .j-switch.is-default
+    input[type='checkbox']:checked
+    + .switch-slider:after {
     background-color: var(--ui-bg);
   }
 
@@ -588,30 +599,33 @@
     height: 1.375rem;
   }
 
-  .j-switch.is-line input:checked+.switch-slider {
+  .j-switch.is-line input:checked + .switch-slider {
     box-shadow: 0 0 8px var(--tone-solid);
     border-color: var(--tone-solid);
   }
 
-  .j-switch.is-line input:checked+.switch-slider:before {
+  .j-switch.is-line input:checked + .switch-slider:before {
     background-color: var(--tone-solid);
   }
 
-  .j-switch.is-line.is-sm input:checked+.switch-slider:before {
+  .j-switch.is-line.is-sm input:checked + .switch-slider:before {
     transform: translateX(0.75rem);
   }
 
-  .j-switch.is-line.is-md input:checked+.switch-slider:before {
+  .j-switch.is-line.is-md input:checked + .switch-slider:before {
     transform: translateX(1.125rem);
   }
 
-  .j-switch.is-line.is-lg input:checked+.switch-slider:before {
+  .j-switch.is-line.is-lg input:checked + .switch-slider:before {
     transform: translateX(1.5rem);
   }
 
   /* select */
   select.j-select {
-    padding: var(--input-padding, calc(var(--space) * 1.5) calc(var(--space) * 1.5));
+    padding: var(
+      --input-padding,
+      calc(var(--space) * 1.5) calc(var(--space) * 1.5)
+    );
     border-width: var(--input-border-width, 1px);
     border-style: var(--input-border-style, solid);
     border-color: var(--input-border-color, var(--ui-input-border));
@@ -635,8 +649,6 @@
     --input-font-size: var(--font-size-lg);
   }
 
-
-
   /* textarea */
   textarea.j-textarea {
     min-height: var(--textarea-min-height, calc(var(--space) * 18));
@@ -679,8 +691,8 @@
     width: 100%;
   }
 
-  .input-group>input.j-input,
-  .input-group>select.j-select {
+  .input-group > input.j-input,
+  .input-group > select.j-select {
     position: relative;
     flex: 1 1 auto;
     width: 1%;
@@ -688,21 +700,24 @@
     letter-spacing: 0.4px;
   }
 
-  .input-group>.el-addon>.j-button {
+  .input-group > .el-addon > .j-button {
     position: relative;
     border-color: var(--input-border-color, var(--ui-input-border));
     color: var(--ui-fg-muted);
     background: var(--ui-surface-muted);
   }
 
-  .input-group>.el-addon>.is-text {
+  .input-group > .el-addon > .is-text {
     display: flex;
     align-items: center;
     white-space: nowrap;
     font-size: var(--font-size, 0.875rem);
     line-height: var(--line-height, 1.25rem);
     color: var(--ui-fg-muted);
-    background-color: var(--input-group-text-addon-background, var(--ui-bg-muted));
+    background-color: var(
+      --input-group-text-addon-background,
+      var(--ui-bg-muted)
+    );
     padding: var(--input-group-text-addon-padding, var(--s2));
     height: var(--button-height, var(--el-height-md));
     border-width: var(--border-width, 1px);
@@ -713,32 +728,35 @@
     user-select: none;
   }
 
-  .input-group>.el-addon>.is-text.icon-close {
+  .input-group > .el-addon > .is-text.icon-close {
     width: var(--button-height, var(--el-height-md));
   }
 
-  .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)>.is-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)
+    > .is-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)>.is-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) > .is-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)>.is-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) > .is-text {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
   }
@@ -753,20 +771,20 @@
     position: relative;
   }
 
-  .input-inner-group>input.j-input {
+  .input-inner-group > input.j-input {
     width: 100%;
     letter-spacing: 0.4px;
   }
 
-  .input-inner-group>input.j-input:not(:last-child) {
+  .input-inner-group > input.j-input:not(:last-child) {
     padding-right: var(--el-height-md);
   }
 
-  .input-inner-group>input.j-input:not(:first-child) {
+  .input-inner-group > input.j-input:not(:first-child) {
     padding-left: var(--el-height-md);
   }
 
-  .input-inner-group>.el-addon {
+  .input-inner-group > .el-addon {
     position: absolute;
     top: 0;
     bottom: 0;
@@ -779,36 +797,38 @@
     font-size: 0.875em;
   }
 
-  .input-inner-group>.el-addon:last-child {
+  .input-inner-group > .el-addon:last-child {
     right: 0;
     left: auto;
   }
 
-  .input-inner-group>.el-addon:first-child.is-text:has(.j-button:not(.is-icon)) {
+  .input-inner-group
+    > .el-addon:first-child.is-text:has(.j-button:not(.is-icon)) {
     left: var(--space);
   }
 
-  .input-inner-group>.el-addon:last-child.is-text:has(.j-button:not(.is-icon)) {
+  .input-inner-group
+    > .el-addon:last-child.is-text:has(.j-button:not(.is-icon)) {
     right: var(--space);
   }
 
-  .input-inner-group>.el-addon>svg {
+  .input-inner-group > .el-addon > svg {
     width: var(--font-size-xl);
     height: var(--font-size-xl);
   }
 
-  .input-inner-group>.el-addon>.el-text {
+  .input-inner-group > .el-addon > .el-text {
     color: currentColor;
   }
 
-  .input-inner-group>.el-addon.is-text {
+  .input-inner-group > .el-addon.is-text {
     color: var(--ui-fg);
     display: flex;
     gap: var(--space);
   }
 
   /* status active */
-  .input-group>.el-addon>.j-button:not(:disabled):active {
+  .input-group > .el-addon > .j-button:not(:disabled):active {
     transform: none;
     outline: var(--input-focus-outline, 2px solid var(--tone-solid));
     border-color: transparent;
@@ -835,7 +855,7 @@
     outline-color: var(--form-invalid-border-color, var(--state-danger));
   }
 
-  .input-group>.j-input:focus-within {
+  .input-group > .j-input:focus-within {
     z-index: 2;
   }
 
@@ -856,7 +876,10 @@
 
   /* status readonly */
   .j-input:not([type='file']):not(.is-line):not(.is-blank)[readonly] {
-    background-color: var(--input-readonly-background, var(--ui-surface-active));
+    background-color: var(
+      --input-readonly-background,
+      var(--ui-surface-active)
+    );
   }
 
   .j-textarea[readonly] {
@@ -889,7 +912,7 @@
     border-color: var(--ui-border);
   }
 
-  .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-disabled-bg);
     /* opacity: var(--opacity-disabled); */
@@ -920,7 +943,8 @@
     cursor: not-allowed;
   }
 
-  .j-switch.is-default:has(input[type='checkbox']:disabled) .switch-slider:before,
+  .j-switch.is-default:has(input[type='checkbox']:disabled)
+    .switch-slider:before,
   .j-switch.is-line:has(input[type='checkbox']:disabled) .switch-slider:before {
     background-color: var(--ui-border);
   }
@@ -929,4 +953,4 @@
   /* input.j-input:not([type='file']):not(:placeholder-shown) {
     background-color: var(--tone-subtle);
   } */
-}
+}