vanilla-jui 1.7.10 → 1.7.12

package/src/css/form.css

@@ -1,657 +0,0 @@
-@layer components {
-  .j-form,
-  .j-form .form-field,
-  .j-form .form-field .field-legend {
-    display: flex;
-  }
-
-  .j-form {
-    flex-direction: column;
-    gap: var(--s3);
-  }
-
-  .j-form .form-field {
-    gap: var(--space);
-    margin: 0;
-  }
-
-  .j-form fieldset.form-field {
-    border: 0;
-    padding: 0;
-  }
-
-  .j-form .form-field {
-    flex-direction: column;
-  }
-
-  .j-form .form-field .field-legend {
-    color: var(--ui-fg-muted);
-    font-size: var(--font-size-sm);
-    gap: var(--space);
-  }
-
-  .j-form .field-legend.is-required::after {
-    content: '*';
-    color: var(--state-danger);
-  }
-
-  .j-form .form-field .field-control .help-block {
-    font-size: var(--font-size-sm);
-    color: var(--ui-fg-soft);
-    margin: 0;
-  }
-
-  .j-form .form-field .field-control .help-block[data-valid='false'] {
-    color: var(--state-danger);
-  }
-
-  .j-form .form-buttons {
-    display: flex;
-    gap: var(--s2);
-    margin-top: var(--s2);
-  }
-
-  .j-form [data-field-buttons] button {
-    position: relative;
-  }
-
-  /* input */
-  .j-input {
-    font-size: var(--input-font-size);
-    background-color: var(--input-bg);
-    color: var(--input-fg);
-  }
-
-  .j-input:not([type='checkbox']) {
-    border-width: 1px;
-    border-style: solid;
-    border-color: var(--ui-border);
-    border-radius: var(--radius-md);
-    padding: var(--input-padding);
-    height: var(--input-height);
-    line-height: var(--input-line-height);
-    letter-spacing: 0.5px;
-  }
-
-  /* type file */
-  .j-input[type='file'] {
-    appearance: none;
-    background-clip: padding-box;
-    overflow: hidden;
-    cursor: pointer;
-    background-color: var(--ui-surface-subtle);
-  }
-
-  .j-input[type='file']::file-selector-button {
-    color: var(--ui-fg-muted);
-    appearance: none;
-    border-width: 0;
-    border-inline-end-width: 1px;
-    border-radius: 0;
-    border-color: var(--ui-border);
-    background-color: transparent;
-    margin: calc(var(--space) * -2);
-    font-size: var(--input-font-size);
-  }
-
-  .j-input[type='file']::file-selector-button,
-  html.j-font-sm .j-input[type='file']::file-selector-button {
-    margin-inline-end: var(--s2);
-    padding: var(--s2);
-  }
-
-  html.j-font-md .j-input[type='file']::file-selector-button {
-    margin-inline-end: calc(var(--space) * 2.75);
-    padding: calc(var(--space) * 2.75);
-  }
-
-  /* input style */
-  .j-input.is-line:not([type='checkbox']) {
-    border-top-color: transparent;
-    border-left-color: transparent;
-    border-right-color: transparent;
-    padding-left: 0;
-    padding-right: 0;
-    border-radius: 0;
-  }
-
-  .j-input.is-ghost:not([type='checkbox']) {
-    border-color: transparent;
-    background-color: var(--tone-subtle);
-  }
-
-  .j-input.is-blank:not([type='checkbox']) {
-    border-color: transparent;
-    padding-left: 0;
-    padding-right: 0;
-  }
-
-  .j-input[data-valid='false'],
-  .j-select[data-valid='false'],
-  .j-textarea[data-valid='false'] {
-    border-color: var(--state-danger);
-    /* background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23d63939' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e"); */
-  }
-
-  /* type radio */
-  .j-radio {
-    display: flex;
-    flex-wrap: wrap;
-  }
-
-  .j-radio.is-vertical {
-    flex-direction: column;
-  }
-
-  .j-radio,
-  .j-radio.is-horizontal {
-    flex-direction: row;
-  }
-
-  .j-radio label {
-    display: flex;
-    align-items: center;
-    gap: calc(var(--space)*1.5);
-    font-size: var(--font-size-md);
-    padding: calc(var(--space)*2);
-    border-radius: var(--radius-md);
-  }
-
-  .j-radio label:not(:has(input[type='radio']:disabled)):hover {
-    background-color: var(--ui-surface-hover);
-  }
-
-  .j-radio label input[type='radio'] {
-    appearance: none;
-    width: 1rem;
-    height: 1rem;
-    border-radius: 50%;
-    border-width: 1px;
-    border-style: solid;
-    border-color: var(--ui-border);
-    background-color: var(--ui-bg);
-    cursor: pointer;
-    position: relative;
-    margin: 0;
-  }
-
-  .j-radio label input[type='radio']:checked {
-    border-color: var(--tone-solid);
-    background-color: var(--tone-solid);
-  }
-
-  .j-radio label input[type='radio']:focus-visible {
-    outline: 2px solid var(--tone-ring);
-    outline-offset: 1px;
-  }
-
-  .j-radio label input[type='radio']:before {
-    content: '';
-    position: absolute;
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background-color: var(--ui-bg);
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%) scale(0);
-    transition: transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
-  }
-
-  .j-radio label input[type='radio']:checked::before {
-    transform: translate(-50%, -50%) scale(1);
-  }
-
-  .j-radio label:has(input[type='radio']:disabled) {
-    cursor: not-allowed;
-    color: var(--ui-disabled-fg);
-  }
-
-  .j-radio label input[type='radio']:disabled {
-    background-color: var(--ui-disabled-bg);
-    border-color: var(--ui-border);
-    cursor: not-allowed;
-  }
-
-  .j-radio.is-group {
-    gap: 0;
-    flex-wrap: nowrap;
-  }
-
-  /* radio group */
-  .j-radio.is-group input[type='radio'] {
-    clip: rect(0 0 0 0);
-    clip-path: inset(100%);
-    height: 1px;
-    overflow: hidden;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-  }
-
-  .j-radio.is-group label span.radio-text {
-    color: var(--ui-fg);
-    background-color: var(--ui-bg);
-    padding: var(--radio-group-padding, calc(var(--space) * 1.5) var(--s3));
-    height: var(--el-height-md);
-    line-height: var(--line-height);
-    box-shadow: 0 0 0 1px var(--ui-input-border);
-    cursor: pointer;
-    position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    user-select: none;
-    letter-spacing: 0.5px;
-  }
-
-  .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 {
-    box-shadow: 0 0 0 1px var(--tone-solid);
-    background-color: var(--tone-solid);
-    z-index: 1;
-    color: var(--tone-fg);
-  }
-
-  .j-radio.is-group label:first-child span {
-    border-radius: var(--radius-md) 0 0 var(--radius-md);
-  }
-
-  .j-radio.is-group label:last-child span {
-    border-radius: 0 var(--radius-md) var(--radius-md) 0;
-  }
-
-  .j-radio.is-group label {
-    padding: 0;
-  }
-
-  .j-radio.is-group.is-sm label {
-    font-size: var(--font-size-sm);
-  }
-
-  .j-radio.is-group.is-sm label span.radio-text {
-    --radio-group-padding: var(--space) calc(var(--space) * 2.5);
-    height: var(--el-height-sm);
-  }
-
-  .j-radio.is-group.is-lg label {
-    font-size: var(--font-size-lg);
-  }
-
-  .j-radio.is-group.is-lg label span.radio-text {
-    --radio-group-padding: var(--s3) calc(var(--space) * 3.5);
-    height: var(--el-height-lg);
-  }
-
-  /* type checkbox */
-  .j-checkbox {
-    display: flex;
-    flex-wrap: wrap;
-    margin: 0;
-  }
-
-  .j-checkbox.is-vertical {
-    flex-direction: column;
-  }
-
-  .j-checkbox,
-  .j-checkbox.is-horizontal {
-    flex-direction: row;
-  }
-
-  .j-checkbox label {
-    display: flex;
-    align-items: center;
-    gap: var(--checkbox-label-gap, var(--s2));
-    font-size: var(--checkbox-label-font-size, var(--font-size-md));
-    height: var(--el-height-md);
-    padding: calc(var(--space)*2);
-    border-radius: var(--checkbox-label-border-radius, var(--radius-md));
-  }
-
-  .j-radio label,
-  .j-checkbox label {
-    width: fit-content;
-  }
-
-  .j-checkbox label:not(:has(input[type='checkbox']:disabled)):hover {
-    background-color: var(--checkbox-hover-bg-color, var(--ui-surface-hover));
-  }
-
-  .j-checkbox input[type='checkbox'] {
-    appearance: none;
-    width: 1rem;
-    height: 1rem;
-    aspect-ratio: 1/1;
-    border-width: 1px;
-    border-style: solid;
-    border-color: var(--ui-border);
-    border-radius: var(--radius-md);
-    cursor: pointer;
-    position: relative;
-    margin: 0;
-  }
-
-  .j-checkbox input[type='checkbox']:checked {
-    border-color: transparent;
-    border-radius: var(--radius-md);
-    background-color: var(--tone-solid);
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8.5l2.5 2.5l5.5 -5.5'/%3e%3c/svg%3e");
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: contain;
-    print-color-adjust: exact;
-  }
-
-  .dark .j-checkbox input[type='checkbox']:checked {
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'%3e%3cpath fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8.5l2.5 2.5l5.5 -5.5'/%3e%3c/svg%3e");
-  }
-
-  /* switch checkbox */
-  .j-switch {
-    display: inline-block;
-    position: relative;
-  }
-
-  .j-switch.is-sm {
-    width: 1.75rem;
-    height: var(--switch-height-sm, calc(var(--space, 0 0.25rem) * 4));
-  }
-
-  .j-switch.is-md {
-    width: 2.625rem;
-    height: var(--switch-height-md, calc(var(--space, 0 0.25rem) * 6));
-  }
-
-  .j-switch.is-lg {
-    width: 3.5rem;
-    height: var(--switch-height-lg, calc(var(--space, 0 0.25rem) * 8));
-  }
-
-  .j-switch input[type='checkbox'] {
-    width: 0;
-    height: 0;
-    opacity: 0;
-  }
-
-  .j-switch .switch-slider {
-    position: absolute;
-    cursor: pointer;
-    inset: 0;
-    border-radius: 50px;
-    background-color: var(--ui-border);
-    transition: all 0.3s ease;
-  }
-
-  .j-switch .switch-slider:after {
-    content: '';
-    position: absolute;
-    border-radius: 50%;
-    background-color: #fff;
-    transition: all 0.3s ease;
-  }
-
-  .j-switch.is-sm .switch-slider:after {
-    left: 0.125rem;
-    bottom: 0.125rem;
-    width: 0.75rem;
-    height: 0.75rem;
-  }
-
-  .j-switch.is-md .switch-slider:after {
-    left: 0.1875rem;
-    bottom: 0.1875rem;
-    width: 1.125rem;
-    height: 1.125rem;
-  }
-
-  .j-switch.is-lg .switch-slider:after {
-    left: 0.25rem;
-    bottom: 0.25rem;
-    width: 1.5rem;
-    height: 1.5rem;
-  }
-
-  .j-switch input[type='checkbox']:checked + .switch-slider {
-    background-color: var(--tone-solid);
-  }
-
-  .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 {
-    transform: translateX(1.125rem);
-  }
-
-  .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 {
-    background-color: var(--ui-bg);
-  }
-
-  .j-theme-olive
-    .j-switch
-    input[type='checkbox']:checked
-    + .switch-slider:after {
-    background-color: var(--ui-bg);
-  }
-
-  .j-switch .switch-slider:hover {
-    opacity: var(--opacity-hover, 0.9);
-  }
-
-  /* select */
-  select.j-select {
-    padding: var(--input-padding);
-    border-width: 1px;
-    border-style: solid;
-    border-color: var(--ui-border);
-    border-radius: var(--radius-md);
-    height: var(--input-height);
-    line-height: var(--input-line-height, var(--line-height));
-    background-color: var(--input-background-color, inherit);
-    font-size: var(--input-font-size);
-    letter-spacing: 0.5px;
-  }
-
-  /* textarea */
-  textarea.j-textarea {
-    min-height: var(--textarea-min-height, calc(var(--space) * 18));
-    border-width: 1px;
-    border-style: solid;
-    border-color: var(--ui-border);
-    border-radius: var(--radius-md);
-    background-color: var(--input-background-color, var(--ui-bg));
-    color: var(--input-color, var(--ui-input-color));
-    resize: vertical;
-    padding: var(--space) var(--s2);
-    font-family: inherit;
-    font-size: var(--textarea-font-size, var(--font-size-md));
-    line-height: var(--textarea-line-height, var(--line-height));
-  }
-
-  textarea.j-textarea:disabled {
-    background-color: var(--ui-disabled-bg);
-    color: var(--ui-disabled-fg);
-    cursor: not-allowed;
-  }
-
-  .j-form input.j-input:not([type='checkbox']):not([type='radio']),
-  .j-form select.j-select,
-  .j-form textarea.j-textarea {
-    width: 100%;
-  }
-
-  /* input group */
-  .input-group {
-    /* display: flex; */
-    align-items: stretch;
-  }
-
-  .input-group input.j-input,
-  .input-group select.j-select {
-    position: relative;
-    flex: 1 1 auto;
-    min-width: 0;
-  }
-
-  .input-group .el-addon .is-text {
-    border-width: 1px;
-    border-style: solid;
-  }
-
-  /* input inner group */
-  .input-group,
-  .input-inner-group {
-    position: relative;
-    width: 100%;
-    display: flex;
-    flex-wrap: nowrap;
-  }
-
-  .input-inner-group {
-    border: 1px solid var(--ui-border);
-    border-radius: var(--radius-md);
-  }
-
-  .input-inner-group input.j-input,
-  .input-inner-group select.j-select {
-    width: 100%;
-    letter-spacing: 0.4px;
-  }
-
-  .input-inner-group .el-addon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .input-inner-group .el-addon svg {
-    width: var(--font-size-xl);
-    height: var(--font-size-xl);
-  }
-
-  .input-group .el-addon .is-text,
-  .input-inner-group .el-addon.is-text {
-    display: flex;
-    align-items: center;
-    padding-inline: var(--s2);
-    user-select: none;
-  }
-
-  .input-inner-group .el-addon.inner-wrap {
-    gap: var(--space);
-    padding-inline: var(--space);
-  }
-
-  /* status active */
-  .input-group .j-button:not(:disabled):active,
-  .inner-group .j-input:focus,
-  .input-group .j-input:focus-within,
-  .inner-group .j-input:focus-visible,
-  .input-group select.j-select:focus {
-    z-index: 1;
-  }
-
-  /* status focus */
-  .j-input:focus,
-  .j-input:focus-within,
-  .j-input:focus-visible,
-  .j-textarea:focus,
-  .j-textarea:focus-within,
-  .j-textarea:focus-visible,
-  select.j-select:focus,
-  select.j-select:focus-within,
-  select.j-select:focus-visible,
-  .j-input[data-valid='false']:focus-within,
-  .j-select[data-valid='false']:focus-within,
-  .input-group .j-button:not(:disabled):active {
-    outline: 0;
-    border-color: var(--tone-solid);
-    box-shadow: 0 0 0 4px var(--tone-ring);
-  }
-
-  .j-radio label input[type='radio']:focus-within {
-    border-color: transparent;
-    outline-offset: 1px;
-  }
-
-  .j-checkbox input[type='checkbox']:focus-within {
-    border-color: var(--tone-solid);
-    outline-offset: 1px;
-  }
-
-  .input-inner-group input.j-input,
-  .input-inner-group select.j-select {
-    border: 0;
-    box-shadow: none;
-  }
-
-  /* status readonly */
-  .j-input:not([type='file']):not(.is-line):not(.is-blank)[readonly],
-  .j-textarea[readonly] {
-    background-color: var(--ui-surface-active);
-  }
-
-  /* status disabled */
-  .j-input:disabled:not(.is-line):not(.is-ghost):not(.is-blank),
-  .j-textarea[disabled] {
-    background-color: var(--ui-disabled-bg);
-  }
-
-  /* radio disabled */
-  .j-radio label:has(input[type='radio']:disabled) {
-    cursor: not-allowed;
-    opacity: var(--opacity-disabled);
-    color: var(--ui-disabled-fg);
-  }
-
-  .j-radio label input[type='radio']:disabled {
-    background-color: var(--ui-disabled-bg);
-    border-color: var(--ui-border);
-  }
-
-  .j-radio.is-group label input[type='radio']:disabled + .radio-text {
-    cursor: not-allowed;
-    background-color: var(--ui-disabled-bg);
-    color: var(--ui-disabled-fg);
-  }
-
-  /* checkbox disabled */
-  .j-checkbox label:has(input[type='checkbox']:disabled) {
-    cursor: not-allowed;
-    color: var(--ui-disabled-fg);
-  }
-
-  .j-checkbox label input[type='checkbox']:disabled {
-    background-color: var(--ui-disabled-bg);
-    border-color: var(--ui-border);
-  }
-
-  /* switch disabled */
-  .j-switch:has(input[type='checkbox']:disabled),
-  .j-switch.is-line:has(input[type='checkbox']:disabled) {
-    opacity: var(--opacity-disabled);
-    cursor: not-allowed;
-  }
-
-  .j-switch:has(input[type='checkbox']:disabled) .switch-slider,
-  .j-switch.is-line:has(input[type='checkbox']:disabled) .switch-slider {
-    cursor: not-allowed;
-  }
-
-  .j-switch: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);
-  }
-}