diff --git a/form.css b/form.css index d8bb7ac..1f4ab25 100644 --- a/form.css +++ b/form.css @@ -1,3 +1,3 @@ -/*! style-forge.form 2025.1.22 | MIT License | https://github.com/Style-Forge/form */ +/*! style-forge.form 2025.1.24 | MIT License | https://github.com/Style-Forge/form */ -:root{--sf-c-form-white:0 0% 100%;--sf-c-form-info:200 100% 60%;--sf-c-form-error:0 100% 60%;--sf-c-form-success:0 100% 60%;--sf-c-form-warning:39 100% 50%;--sf-c-form-bg:0 0% 90%;--sf-c-form-bd:0 0% 10%;--sf-c-form-loading:0 0% 10%;--sf-c-form-txt:0 0% 10%;--sf-dark-c-form-white:0 0% 100%;--sf-dark-c-form-info:219 79% 66%;--sf-dark-c-form-error:0 100% 65%;--sf-dark-c-form-success:0 100% 65%;--sf-dark-c-form-warning:39 100% 60%;--sf-dark-c-form-bg:0 0% 20%;--sf-dark-c-form-bd:0 0% 100%;--sf-dark-c-form-loading:0 0% 100%;--sf-dark-c-form-txt:0 0% 90%;--sf-radius:3px;--sf-form-fz:0.9375rem;--sf-form-p-input-block:0.5em;--sf-form-p-input-inline:0.5em;--sf-form-switch-size:1rem;--sf-form-ff:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';--sf-form-fz-small:0.75rem;--sf-lh-normal:1.1875;--sf-disabled:0.4}html[data-theme='dark'],html.dark{color-scheme:dark;--sf-c-form-white:var(--sf-dark-c-form-white);--sf-c-form-bg:var(--sf-dark-c-form-bg);--sf-c-form-error:var(--sf-dark-c-form-error);--sf-c-form-success:var(--sf-dark-c-form-success);--sf-c-form-warning:var(--sf-dark-c-form-warning);--sf-c-form-info:var(--sf-dark-c-form-info);--sf-c-form-bd:var(--sf-dark-c-form-bd);--sf-c-form-loading:var(--sf-dark-c-form-loading);--sf-c-form-txt:var(--sf-dark-c-form-txt)}@media (prefers-color-scheme:dark){html[data-theme='auto'],html.auto{color-scheme:light dark;--sf-c-form-white:var(--sf-dark-c-form-white);--sf-c-form-bg:var(--sf-dark-c-form-bg);--sf-c-form-error:var(--sf-dark-c-form-error);--sf-c-form-success:var(--sf-dark-c-form-success);--sf-c-form-warning:var(--sf-dark-c-form-warning);--sf-c-form-info:var(--sf-dark-c-form-info);--sf-c-form-bd:var(--sf-dark-c-form-bd);--sf-c-form-loading:var(--sf-dark-c-form-loading);--sf-c-form-txt:var(--sf-dark-c-form-txt)}}.sf-input *,.sf-input *::before,.sf-input *::after{box-sizing:inherit}.sf-input[type='image'],.sf-input[type='range']{cursor:pointer;border:0;padding:0}.sf-input{cursor:auto;font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1;text-transform:none;color:hsl(var(--sf-c-form-txt));background:hsl(var(--sf-c-form-bg)/20%);border-style:solid;border-color:hsl(var(--sf-c-form-bd)/20%);border-width:0 0 1px;border-radius:0;outline:none;width:100%;height:32px;padding:var(--sf-form-p-input-block) var(--sf-form-p-input-inline);box-sizing:border-box;vertical-align:top}.sf-input[type='range']{width:100%}.sf-input[type='image']{width:auto;height:auto}.sf-input[type='time'],.sf-input[type='week'],.sf-input[type='month'],.sf-input[type='date'],.sf-input[type='datetime-local']{-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:start}.sf-input::-webkit-date-and-time-value{text-align:start}.sf-input::-webkit-calendar-picker-indicator{cursor:pointer;outline:none;opacity:0.5}.sf-input:hover::-webkit-calendar-picker-indicator{opacity:1}.sf-input::-moz-placeholder{color:hsl(var(--sf-c-form-txt)/40%)}.sf-input:-ms-input-placeholder{color:hsl(var(--sf-c-form-txt)/40%)}.sf-input::placeholder{color:hsl(var(--sf-c-form-txt)/40%)}.sf-input:focus{border-color:transparent transparent hsl(var(--sf-c-form-info));outline:none}.sf-input[type='color']:focus-visible,.sf-input[type='image']:focus-visible,.sf-input[type='range']:focus-visible{outline:2px solid hsl(var(--sf-c-form-info));outline-offset:2px}.sf-input:disabled{cursor:not-allowed;opacity:var(--sf-disabled)}html.var .sf-input{font-size:15px;font-family:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';padding:8px}html.var .sf-input:not([class*='sf-c-']){color:hsl(0,0%,10%);background:hsla(0,0%,90%,0.2)}html.var .sf-input:not(.bd\:c\:ii){border-color:hsla(0,0%,10%,0.2)}html.var .sf-input::-moz-placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-input:-ms-input-placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-input::placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-input:-moz-placeholder-shown{border-color:hsla(0,0%,10%,0.2)}html.var .sf-input:-ms-input-placeholder{border-color:hsla(0,0%,10%,0.2)}html.var .sf-input:placeholder-shown{border-color:hsla(0,0%,10%,0.2)}html.var .sf-input:focus{border-color:hsl(200,100%,60%)}html.var .sf-input[type='image'],html.var .sf-input[type='range']{background:none}html.var .sf-input[type='color']:focus-visible,html.var .sf-input[type='image']:focus-visible,html.var .sf-input[type='range']:focus-visible{outline:2px solid hsl(200,100%,60%)}html.var .sf-input:disabled{opacity:0.4}.sf-button{cursor:pointer;display:inline-block;font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1;color:hsl(var(--sf-c-form-txt));background:hsl(var(--sf-c-form-bg)/20%);border-style:solid;border-color:hsl(var(--sf-c-form-bd)/20%);border-width:1px;text-align:center;text-decoration:none;text-transform:none;border-radius:var(--sf-radius);height:32px;padding:var(--sf-form-p-input-block) var(--sf-form-p-input-inline);box-sizing:border-box;vertical-align:baseline}a.sf-button:not([href]),.sf-button:disabled{cursor:not-allowed;opacity:var(--sf-disabled)}.sf-button:focus-visible{outline:1px solid hsl(var(--sf-c-form-info));outline-offset:-1px}html.var .sf-button{font-size:15px;font-family:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';border-radius:3px;padding:8px}html.var .sf-button:not([class*='sf-c-']){color:hsl(0,0%,10%);background:hsla(0,0%,100%,0.2)}html.var .sf-button:not(.bd\:c\:ii){border-color:hsla(0,0%,10%,0.2)}html.var a.sf-button:not([href]),html.var .sf-button:disabled{opacity:0.4}html.var .sf-button:focus-visible{outline:1px solid hsl(200,100%,60%)}label.sf-radio,label.sf-checkbox{box-sizing:border-box}label.sf-radio *,label.sf-radio *::before,label.sf-radio *::after,label.sf-checkbox *,label.sf-checkbox *::before,label.sf-checkbox *::after{box-sizing:inherit}label.sf-radio input,label.sf-checkbox input,label.sf-radio input::before,label.sf-checkbox input::before{width:16px;height:16px}label.sf-radio input,label.sf-radio input~*,label.sf-checkbox input,label.sf-checkbox input~*{cursor:pointer}label.sf-radio input:disabled,label.sf-radio input:disabled~*,label.sf-checkbox input:disabled,label.sf-checkbox input:disabled~*{cursor:not-allowed;opacity:var(--sf-disabled)}label.sf-radio input,label.sf-checkbox input{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;margin:0 0 -2px;padding:0;vertical-align:baseline}label.sf-radio input::before,label.sf-checkbox input::before{top:0;left:0;position:absolute;width:16px;height:16px;content:'';background-color:hsl(var(--sf-c-form-bg)/20%);border:1px solid hsl(var(--sf-c-form-bd)/20%)}label.sf-radio input::after,label.sf-checkbox input::after{top:3px;left:3px;right:3px;bottom:3px;position:absolute;content:''}label.sf-radio input:checked::before,label.sf-checkbox input:checked::before{border-color:hsl(var(--sf-c-form-info))}label.sf-radio input:checked::after,label.sf-checkbox input:checked::after{background-color:hsl(var(--sf-c-form-info))}label.sf-radio input::before,label.sf-radio input::after{border-radius:50%}.sf-radio input:focus-visible,.sf-checkbox input:focus-visible{border-color:transparent;outline:2px solid hsl(var(--sf-c-form-info));outline-offset:2px}.sf-radio input:focus-visible{border-radius:50%}html.var label.sf-radio input:disabled,html.var label.sf-radio input:disabled~*,html.var label.sf-checkbox input:disabled,html.var label.sf-checkbox input:disabled~*{opacity:0.4}html.var label.sf-radio input::before,html.var label.sf-checkbox input::before{border-color:hsla(0,0%,10%,0.2)}html.var label.sf-radio input:checked::before,html.var label.sf-radio input:checked::after,html.var .sf-radio input:focus-visible,html.var label.sf-checkbox input:checked::before,html.var label.sf-checkbox input:checked::after,html.var .sf-checkbox input:focus-visible{outline-color:hsl(200,100%,60%)}.sf-select,.sf-select option{font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:var(--sf-lh-normal);text-transform:none}.sf-select{padding:var(--sf-form-p-input-block) var(--sf-form-p-input-inline);cursor:pointer;background:hsl(var(--sf-c-form-bg)/20%);border-style:solid;border-color:hsl(var(--sf-c-form-bd)/20%);border-width:1px;border-radius:0;width:100%;height:auto;overflow:auto}.sf-select option{padding:calc(var(--sf-form-p-input-block) / 2) var(--sf-form-p-input-inline)}.sf-select optgroup{padding:calc(var(--sf-form-p-input-block) / 2) 0 0}.sf-select:not([multiple]){height:32px;padding:0 var(--sf-form-p-input-inline);border-width:0 0 1px}.sf-select::-ms-expand{border:0;background:none}.sf-select:focus-visible{outline:1px solid hsl(var(--sf-c-form-info));outline-offset:-1px}.sf-select:disabled{cursor:not-allowed;opacity:var(--sf-disabled)}html.var .sf-select,html.var .sf-select option{font-size:15px;font-family:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'}html.var .sf-select:not([multiple]){padding:0 0 0 8px}html.var .sf-select{padding:8px 0 8px 8px}html.var .sf-select:not([class*='sf-c-']){color:hsl(0,0%,10%);background:hsla(0,0%,90%,0.2)}html.var .sf-select:not(.bd\:c\:ii){border-color:hsla(0,0%,10%,0.2)}html.var .sf-select:disabled{opacity:0.4}.sf-textarea{font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1.499535;color:hsl(var(--sf-c-form-txt));background:hsl(var(--sf-c-form-bg)/20%);border-style:solid;border-color:hsl(var(--sf-c-form-bd)/20%);border-width:1px;width:100%;max-width:100%;min-height:calc((1.499535em + 2px + var(--sf-form-p-input-block)) * 4);padding:var(--sf-form-p-input-block) var(--sf-form-p-input-inline);border-radius:var(--sf-radius);resize:vertical;overflow:auto;box-sizing:border-box}.sf-textarea::-moz-placeholder{color:hsl(var(--sf-c-form-txt)/40%)}.sf-textarea:-ms-input-placeholder{color:hsl(var(--sf-c-form-txt)/40%)}.sf-textarea::placeholder{color:hsl(var(--sf-c-form-txt)/40%)}.sf-textarea:disabled{cursor:not-allowed;resize:none;opacity:var(--sf-disabled)}.sf-textarea:focus-visible{outline:1px solid hsl(var(--sf-c-form-info));outline-offset:-1px}html.var .sf-textarea{font-size:15px;font-family:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';min-height:calc((1.499535em + 2px + 0.5em) * 4);padding:8px;border-radius:3px}html.var .sf-textarea:not([class*='sf-c-']){color:hsl(0,0%,10%);background:hsla(0,0%,90%,0.2)}html.var .sf-textarea:not(.bd\:c\:ii){border-color:hsla(0,0%,10%,0.2)}html.var .sf-textarea::-moz-placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-textarea:-ms-input-placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-textarea::placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-textarea:disabled{opacity:0.4}html.var .sf-textarea:focus:valid{border-color:hsl(200,100%,60%)}.sf-input[type='color']{cursor:pointer;width:32px;height:32px;background:conic-gradient(from 0,yellow,darkorange,red,fuchsia,blue,cyan,lime,yellowgreen,yellow);padding:0;border:0;border-radius:50%}.sf-input[type='color']:disabled{cursor:not-allowed;opacity:var(--sf-disabled)}.sf-input[type='color']::-webkit-color-swatch-wrapper{padding:3px}.sf-input[type='color']::-webkit-color-swatch{border:2px solid hsl(var(--sf-c-form-white));border-radius:50%}.sf-input[type='color']::-moz-color-swatch{border:2px solid hsl(var(--sf-c-form-white));border-radius:50%}.sf-input[type='color']:focus-visible{border-radius:50%}html.var .sf-input[type='color']:disabled{opacity:0.4}html.var .sf-input[type='color']::-webkit-color-swatch{border:2px solid hsl(0,0%,100%)}html.var .sf-input[type='color']::-moz-color-swatch{border:2px solid hsl(0,0%,100%)}.sf-input[type='file']{cursor:pointer;font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1;border:0;width:auto;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sf-input[type='file']::-webkit-file-upload-button{cursor:pointer;display:inline-block;font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1;text-align:center;text-transform:none;text-decoration:none;color:hsl(var(--sf-c-form-txt));background:hsl(var(--sf-c-form-bg)/20%);border:1px solid hsl(var(--sf-c-form-bd)/20%);height:32px;border-radius:var(--sf-radius)}.sf-input[type='file']::file-selector-button{cursor:pointer;display:inline-block;font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1;text-align:center;text-transform:none;text-decoration:none;color:hsl(var(--sf-c-form-txt));background:hsl(var(--sf-c-form-bg)/20%);border:1px solid hsl(var(--sf-c-form-bd)/20%);height:32px;border-radius:var(--sf-radius)}.sf-input[type='file']:focus-visible{outline:none}.sf-input[type='file']:focus-visible::-webkit-file-upload-button{outline:1px solid hsl(var(--sf-c-form-info));outline-offset:-1px}.sf-input[type='file']:focus-visible::file-selector-button{outline:1px solid hsl(var(--sf-c-form-info));outline-offset:-1px}.sf-input[type='file']:disabled{cursor:not-allowed;opacity:var(--sf-disabled)}.sf-input[type='file']:disabled::-webkit-file-upload-button{cursor:not-allowed}.sf-input[type='file']:disabled::file-selector-button{cursor:not-allowed}html.var .sf-input[type='file']{font-size:15px;font-family:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';padding:0}html.var .sf-input[type='file']::-webkit-file-upload-button{font-size:15px;font-family:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';color:hsl(0,0%,10%);background:hsla(0,0%,100%,0.2);border:1px solid hsla(0,0%,10%,0.2);border-radius:3px}html.var .sf-input[type='file']::file-selector-button{font-size:15px;font-family:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';color:hsl(0,0%,10%);background:hsla(0,0%,100%,0.2);border:1px solid hsla(0,0%,10%,0.2);border-radius:3px}html.var .sf-input[type='file']:focus-visible::-webkit-file-upload-button{outline:1px solid hsl(200,100%,60%)}html.var .sf-input[type='file']:focus-visible::file-selector-button{outline:1px solid hsl(200,100%,60%)}html.var .sf-input[type='file']:disabled{opacity:0.4}.sf-switch{box-sizing:border-box;font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1;text-transform:none}.sf-switch.multiple *,.sf-switch.multiple *::before,.sf-switch.multiple *::after{box-sizing:inherit}label.sf-switch input[type='checkbox']{position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:none;padding:0;margin:0;width:calc(var(--sf-form-switch-size) * 2);height:var(--sf-form-switch-size);vertical-align:text-top}label.sf-switch input[type='checkbox']::before{cursor:pointer;top:0;left:0;position:absolute;width:calc(var(--sf-form-switch-size) * 2);height:var(--sf-form-switch-size);content:'';background:hsl(var(--sf-c-form-bd)/20%);border-radius:calc(var(--sf-form-switch-size) / 2)}label.sf-switch input[type='checkbox']::after{cursor:pointer;top:2px;left:2px;position:absolute;width:calc(var(--sf-form-switch-size) - 2px * 2);height:calc(var(--sf-form-switch-size) - 2px * 2);content:'';background:hsl(var(--sf-c-form-white));border-radius:calc(var(--sf-form-switch-size) / 2);box-shadow:0 0 0 1px hsl(var(--sf-c-form-white));transition:transform 0.05s ease-in}label.sf-switch input[type='checkbox']:checked::before{background:hsl(var(--sf-c-form-info))}label.sf-switch input[type='checkbox']:checked::after{transform:translate3d(var(--sf-form-switch-size),0,0)}label.sf-switch input[type='radio']~*,label.sf-switch input[type='checkbox']~*{cursor:pointer}.sf-switch.multiple .sf-switch-toggle{display:inline-block;background:hsl(var(--sf-c-form-bg)/20%);box-shadow:1px 2px 8px 0 hsl(var(--sf-c-form-bd)/15%)}.sf-switch.multiple .sf-switch-toggle *{display:inline-block}.sf-switch.multiple .sf-switch-toggle label{position:relative}.sf-switch.multiple .sf-switch-toggle span{font-size:var(--sf-form-fz-small);text-align:center;min-width:32px;padding:var(--sf-form-p-input-block) var(--sf-form-p-input-inline);background:hsl(var(--sf-c-form-bd)/5%)}.sf-switch.multiple input[type='checkbox'],.sf-switch.multiple input[type='radio']{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;top:0;left:0;right:0;bottom:0;position:absolute;z-index:1;width:100%;height:100%;padding:0;margin:0;border:0;opacity:0}.sf-switch.multiple input[type='checkbox']::before,.sf-switch.multiple input[type='radio']::before,.sf-switch.multiple input[type='checkbox']::after,.sf-switch.multiple input[type='radio']::after{content:none}.sf-switch.multiple input[type='checkbox']:checked~span,.sf-switch.multiple input[type='radio']:checked~span{color:hsl(var(--sf-c-form-white));background:hsl(var(--sf-c-form-info))}.sf-switch.multiple.vert .sf-switch-toggle{-ms-flex-flow:column;flex-flow:column}.sf-switch.multiple .sf-switch-description{font-size:var(--sf-form-fz-small);margin:0.5em 0 0;padding:0 0 0.5em}.sf-switch input[type='checkbox']:disabled,.sf-switch input[type='checkbox']:disabled::after,.sf-switch input[type='checkbox']:disabled::before,.sf-switch input[type='checkbox']:disabled~*,.sf-switch.multiple input[type='checkbox']:disabled,.sf-switch.multiple input[type='radio']:disabled,.sf-switch.multiple input[type='checkbox']:disabled~*,.sf-switch.multiple input[type='radio']:disabled~*{cursor:not-allowed}.sf-switch input[type='checkbox']:disabled,.sf-switch input[type='checkbox']:disabled~*,.sf-switch.multiple input[type='checkbox']:disabled~*,.sf-switch.multiple input[type='radio']:disabled~*{opacity:var(--sf-disabled)}.sf-switch input[type='checkbox']:focus-visible,.sf-switch input[type='radio']:focus-visible{border-color:transparent;outline:2px solid hsl(var(--sf-c-form-info))}.sf-switch:not(.multiple) input[type='checkbox']:focus-visible,.sf-switch:not(.multiple) input[type='radio']:focus-visible{border-radius:calc(var(--sf-form-switch-size) / 2)}html.var .sf-switch{font-size:15px;font-family:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'}html.var label.sf-switch input[type='checkbox']{width:16px;height:16px}html.var label.sf-switch input[type='checkbox']::before{width:16px;height:16px;background:hsla(0,0%,10%,0.2);border-radius:8px}html.var label.sf-switch input[type='checkbox']::after{width:28px;height:28px;background:hsl(0,0%,100%);border-radius:8px;box-shadow:0 0 0 1px hsl(0,0%,100%)}html.var label.sf-switch input[type='checkbox']:checked::before{background:hsl(200,100%,60%)}html.var .sf-switch.multiple .sf-switch-toggle{background:hsla(0,0%,90%,0.2);box-shadow:1px 2px 8px 0 hsla(0,0%,10%,0.15)}html.var .sf-switch.multiple .sf-switch-toggle span{font-size:12px;padding:8px;background:hsla(0,0%,10%,0.1)}html.var .sf-switch.multiple input[type='checkbox']:checked~span,html.var .sf-switch.multiple input[type='radio']:checked~span{color:hsl(0,0%,100%);background:hsl(200,100%,60%)}html.var .sf-switch.multiple .sf-switch-description{font-size:12px}html.var .sf-switch input[type='checkbox']:disabled~*,html.var .sf-switch.multiple input[type='checkbox']:disabled~*,html.var .sf-switch.multiple input[type='radio']:disabled~*{opacity:0.4}html.var .sf-switch input[type='checkbox']:focus-visible,html.var .sf-switch input[type='radio']:focus-visible{outline:2px solid hsl(200,100%,60%)}html.var .sf-switch:not(.multiple) input[type='checkbox']:focus-visible,html.var .sf-switch:not(.multiple) input[type='radio']:focus-visible{border-radius:8px}@keyframes Loading{from{background-position:0 0}to{background-position:28px 0}}a.sf-loading.sf-button:not([href]),.sf-loading:disabled,.sf-loading.sf-button:disabled,.sf-loading.sf-input:not([type='color']):disabled{--c1:transparent;--c2:hsl(var(--sf-c-form-loading)/5%);cursor:progress;background:repeating-linear-gradient(45deg,var(--c1),var(--c1) 10px,var(--c2) 10px,var(--c2) 20px);background-size:28px 100%;animation:Loading .3s linear infinite}html.var a.sf-loading.sf-button:not([href]),html.var .sf-loading:disabled,html.var .sf-loading.sf-button:disabled,html.var .sf-loading.sf-input:not([type='color']):disabled{background:repeating-linear-gradient(45deg,transparent,transparent 10px,hsla(0,0%,10%,0.05) 10px,hsla(0,0%,10%,0.05) 20px)}.sf-description,.sf-invalid,.sf-valid{color:hsl(var(--sf-c-form-txt)/40%);font-size:var(--sf-form-fz-small);font-family:var(--sf-form-ff);font-weight:300;line-height:1;text-transform:none;margin:0.5em 0 0;padding:0 0 0.5em;display:none}.sf-description{display:block}.sf-invalid{color:hsl(var(--sf-c-form-error))}.sf-valid:not(.sf-description){color:hsl(var(--sf-c-form-txt))}.show.sf-description,.show.sf-invalid,.show.sf-valid{display:block}.hide.sf-description,.hide.sf-invalid,.hide.sf-valid{display:none}.validates:focus:invalid~.sf-invalid,.validates:focus:valid~.sf-valid,.validates:focus:valid~.sf-description.sf-valid{display:block}.validates:focus:invalid~.validates~.sf-invalid,.validates:focus:valid~.validates~.sf-valid,.validates:focus:valid~.validates~.sf-description.sf-valid{display:none}.validates:focus~.sf-description{display:none}.validates:focus~.validates~.sf-description{display:block}.error:not(:disabled)+.sf-invalid,.error:not(:disabled)+.sf-valid+.sf-invalid,.error:not(:disabled)+.sf-description+.sf-invalid{display:block !important}.error:not(:disabled)+.sf-invalid+.sf-valid,.error:not(:disabled)+.sf-invalid+.sf-description,.error:not(:disabled)+.sf-description,.error:not(:disabled)+.sf-description+.sf-valid,.error:not(:disabled)+.sf-valid,.error:not(:disabled)+.sf-valid+.sf-description{display:none !important}.validates input[type='checkbox']~.sf-description{display:none}.validates input[type='checkbox']:invalid~.sf-invalid{display:block}.validates input[type='checkbox']:valid~.sf-valid{display:block}.validates:required:invalid:not(:focus){border-bottom-color:hsl(var(--sf-c-form-warning))}.validates:required:invalid:not(:disabled){border-bottom-color:hsl(var(--sf-c-form-warning))}.validates input[type='radio']:invalid::before,.validates input[type='checkbox']:invalid::before{border-color:hsl(var(--sf-c-form-error))}.error:not(:disabled),.validates:required:invalid:focus{border-bottom-color:hsl(var(--sf-c-form-error));outline:none}label.validates.sf-switch .sf-description,label.validates.sf-switch .sf-valid,label.validates.sf-switch .sf-invalid,label.validates.sf-checkbox .sf-description,label.validates.sf-checkbox .sf-valid,label.validates.sf-checkbox .sf-invalid{width:100%;line-height:var(--sf-lh-normal)}form.validates:invalid .sf-button[type='submit']{cursor:not-allowed;text-decoration:none;opacity:var(--sf-disabled);-webkit-text-fill-color:hsl(var(--sf-c-form-txt))}html.var .sf-description,html.var .sf-invalid,html.var .sf-valid{color:hsla(0,0%,10%,0.4);font-size:12px;font-family:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'}html.var label.validates.sf-switch .sf-description,html.var label.validates.sf-switch .sf-valid,html.var label.validates.sf-switch .sf-invalid,html.var label.validates.sf-checkbox .sf-description,html.var label.validates.sf-checkbox .sf-valid,html.var label.validates.sf-checkbox .sf-invalid{line-height:1.1875}html.var .sf-invalid{color:hsl(0,100%,60%)}html.var .error:not(:disabled){border-bottom-color:hsl(0,100%,60%)}html.var .validates:invalid:required{border-bottom-color:hsl(39,100%,50%)}html.var .validates:invalid:focus{border-bottom-color:hsl(0,100%,60%)}html.var[data-theme='dark'] .sf-select::-ms-expand,html.var.dark .sf-select::-ms-expand{color:hsl(0,0%,90%)}html.var[data-theme='dark'] .sf-input[type='file']::-webkit-file-upload-button, html.var.dark .sf-input[type='file']::-webkit-file-upload-button{color:hsl(0,0%,90%);background-color:hsla(0,0%,20%,0.2);border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input[type='file']::file-selector-button,html.var.dark .sf-input[type='file']::file-selector-button{color:hsl(0,0%,90%);background-color:hsla(0,0%,20%,0.2);border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input[type='file']:focus-visible::-webkit-file-upload-button, html.var.dark .sf-input[type='file']:focus-visible::-webkit-file-upload-button{outline-color:hsl(219,79%,66%)}html.var[data-theme='dark'] .sf-input[type='file']:focus-visible::file-selector-button,html.var.dark .sf-input[type='file']:focus-visible::file-selector-button{outline-color:hsl(219,79%,66%)}html.var[data-theme='dark'] .sf-button:not([class*='sf-c-']),html.var[data-theme='dark'] .sf-input:not([class*='sf-c-']),html.var[data-theme='dark'] .sf-textarea:not([class*='sf-c-']),html.var[data-theme='dark'] .sf-select:not([class*='sf-c-']),html.var[data-theme='dark'] option,html.var.dark .sf-button:not([class*='sf-c-']),html.var.dark .sf-input:not([class*='sf-c-']),html.var.dark .sf-textarea:not([class*='sf-c-']),html.var.dark .sf-select:not([class*='sf-c-']),html.var.dark option{color:hsl(0,0%,90%);background-color:hsl(0,0%,20%)}html.var[data-theme='dark'] .sf-button:not(.bd\:c\:ii),html.var[data-theme='dark'] .sf-input:not(.bd\:c\:ii),html.var[data-theme='dark'] .sf-textarea:not(.bd\:c\:ii),html.var[data-theme='dark'] .sf-select:not(.bd\:c\:ii),html.var[data-theme='dark'] option,html.var.dark .sf-button:not(.bd\:c\:ii),html.var.dark .sf-input:not(.bd\:c\:ii),html.var.dark .sf-textarea:not(.bd\:c\:ii),html.var.dark .sf-select:not(.bd\:c\:ii),html.var.dark option{border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-description:not([class*='sf-c-']),html.var[data-theme='dark'] .sf-valid:not([class*='sf-c-']),html.var.dark .sf-description:not([class*='sf-c-']),html.var.dark .sf-valid:not([class*='sf-c-']),html.var[data-theme='dark'] .sf-description:not([class*='sf-c-']),html.var[data-theme='dark'] .sf-valid:not([class*='sf-c-']),html.var.dark .sf-description:not([class*='sf-c-']),html.var.dark .sf-valid:not([class*='sf-c-']){color:hsla(0,0%,90%,0.4)}html.var[data-theme='dark'] .sf-invalid:not([class*='sf-c-']),html.var.dark .sf-invalid:not([class*='sf-c-']){color:hsl(0,100%,65%)}html.var[data-theme='dark'] .sf-button:focus-visible,html.var[data-theme='dark'] label.sf-radio input:checked::before,html.var label.sf-radio input:checked::after,html.var .sf-radio input:focus-visible,html.var[data-theme='dark'] label.sf-checkbox input:checked::before,html.var label.sf-checkbox input:checked::after,html.var .sf-checkbox input:focus-visible,html.var[data-theme='dark'] .sf-input:focus,html.var[data-theme='dark'] .sf-input[type='color']:focus-visible,html.var[data-theme='dark'] .sf-input[type='image']:focus-visible,html.var[data-theme='dark'] .sf-input[type='range']:focus-visible,html.var[data-theme='dark'] .sf-textarea:focus-visible,html.var[data-theme='dark'] .sf-select:focus-visible,html.var.dark .sf-button:focus-visible,html.var.dark label.sf-radio input:checked::before,html.var label.sf-radio input:checked::after,html.var .sf-radio input:focus-visible,html.var.dark label.sf-checkbox input:checked::before,html.var label.sf-checkbox input:checked::after,html.var .sf-checkbox input:focus-visible,html.var.dark .sf-input:focus,html.var.dark .sf-input[type='color']:focus-visible,html.var.dark .sf-input[type='image']:focus-visible,html.var.dark .sf-input[type='range']:focus-visible,html.var.dark .sf-textarea:focus-visible,html.var.dark .sf-select:focus-visible{outline-color:hsl(219,79%,66%)}html.var[data-theme='dark'] .sf-input[type='color']::-webkit-color-swatch,html.var.dark .sf-input[type='color']::-webkit-color-swatch{border-color:hsl(0,0%,100%)}html.var[data-theme='dark'] .sf-input[type='color']::-moz-color-swatch,html.var.dark .sf-input[type='color']::-moz-color-swatch{border-color:hsl(0,0%,100%)}html.var[data-theme='dark'] .sf-input,html.var.dark .sf-input{border-color:transparent transparent hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input::-moz-placeholder, html.var[data-theme='dark'] .sf-textarea::-moz-placeholder, html.var.dark .sf-input::-moz-placeholder, html.var.dark .sf-textarea::-moz-placeholder{color:hsla(0,0%,90%,0.4)}html.var[data-theme='dark'] .sf-input:-ms-input-placeholder, html.var[data-theme='dark'] .sf-textarea:-ms-input-placeholder, html.var.dark .sf-input:-ms-input-placeholder, html.var.dark .sf-textarea:-ms-input-placeholder{color:hsla(0,0%,90%,0.4)}html.var[data-theme='dark'] .sf-input::placeholder,html.var[data-theme='dark'] .sf-textarea::placeholder,html.var.dark .sf-input::placeholder,html.var.dark .sf-textarea::placeholder{color:hsla(0,0%,90%,0.4)}html.var[data-theme='dark'] .sf-input:-moz-placeholder-shown, html.var.dark .sf-input:-moz-placeholder-shown{border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input:-ms-input-placeholder, html.var.dark .sf-input:-ms-input-placeholder{border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input:placeholder-shown,html.var.dark .sf-input:placeholder-shown{border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input[type='image'],html.var[data-theme='dark'] .sf-input[type='range'],html.var.dark .sf-input[type='image'],html.var.dark .sf-input[type='range']{background:none} +:root{--sf-radius:3px;--sf-disabled:0.4;--sf-elm-py:0.5em;--sf-elm-px:0.5em;--sf-c-form-white:0 0% 100%;--sf-c-form-info:200 100% 60%;--sf-c-form-error:0 100% 60%;--sf-c-form-success:0 100% 60%;--sf-c-form-warning:39 100% 50%;--sf-c-form-bg:0 0% 90%;--sf-c-form-bd:0 0% 10%;--sf-c-form-loading:0 0% 10%;--sf-c-form-txt:0 0% 10%;--sf-dark-c-form-white:0 0% 100%;--sf-dark-c-form-info:219 79% 66%;--sf-dark-c-form-error:0 100% 65%;--sf-dark-c-form-success:0 100% 65%;--sf-dark-c-form-warning:39 100% 60%;--sf-dark-c-form-bg:0 0% 20%;--sf-dark-c-form-bd:0 0% 100%;--sf-dark-c-form-loading:0 0% 100%;--sf-dark-c-form-txt:0 0% 90%}html[data-theme='dark'],html.dark{color-scheme:dark;--sf-c-form-white:var(--sf-dark-c-form-white);--sf-c-form-bg:var(--sf-dark-c-form-bg);--sf-c-form-error:var(--sf-dark-c-form-error);--sf-c-form-success:var(--sf-dark-c-form-success);--sf-c-form-warning:var(--sf-dark-c-form-warning);--sf-c-form-info:var(--sf-dark-c-form-info);--sf-c-form-bd:var(--sf-dark-c-form-bd);--sf-c-form-loading:var(--sf-dark-c-form-loading);--sf-c-form-txt:var(--sf-dark-c-form-txt)}@media (prefers-color-scheme:dark){html[data-theme='auto'],html.auto{color-scheme:dark;--sf-c-form-white:var(--sf-dark-c-form-white);--sf-c-form-bg:var(--sf-dark-c-form-bg);--sf-c-form-error:var(--sf-dark-c-form-error);--sf-c-form-success:var(--sf-dark-c-form-success);--sf-c-form-warning:var(--sf-dark-c-form-warning);--sf-c-form-info:var(--sf-dark-c-form-info);--sf-c-form-bd:var(--sf-dark-c-form-bd);--sf-c-form-loading:var(--sf-dark-c-form-loading);--sf-c-form-txt:var(--sf-dark-c-form-txt)}}.sf-input *,.sf-input *::before,.sf-input *::after{box-sizing:inherit}.sf-input[type='image'],.sf-input[type='range']{cursor:pointer;border:0;padding:0}.sf-input{cursor:auto;font-size:15px;font-family:inherit;font-weight:inherit;line-height:1;text-transform:none;color:hsl(var(--sf-c-form-txt));background:hsl(var(--sf-c-form-bg)/20%);border-style:solid;border-color:hsl(var(--sf-c-form-bd)/20%);border-width:0 0 1px;border-radius:0;outline:none;width:100%;height:32px;padding:var(--sf-elm-py) var(--sf-elm-px);box-sizing:border-box;vertical-align:top}.sf-input[type='range']{width:100%}.sf-input[type='image']{width:auto;height:auto}.sf-input[type='time'],.sf-input[type='week'],.sf-input[type='month'],.sf-input[type='date'],.sf-input[type='datetime-local']{-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:start}.sf-input::-webkit-date-and-time-value{text-align:start}.sf-input::-webkit-calendar-picker-indicator{cursor:pointer;outline:none;opacity:0.5}.sf-input:hover::-webkit-calendar-picker-indicator{opacity:1}.sf-input::-moz-placeholder{color:hsl(var(--sf-c-form-txt)/40%)}.sf-input:-ms-input-placeholder{color:hsl(var(--sf-c-form-txt)/40%)}.sf-input::placeholder{color:hsl(var(--sf-c-form-txt)/40%)}.sf-input:focus{border-color:transparent transparent hsl(var(--sf-c-form-info));outline:none}.sf-input[type='color']:focus-visible,.sf-input[type='image']:focus-visible,.sf-input[type='range']:focus-visible{outline:2px solid hsl(var(--sf-c-form-info));outline-offset:2px}.sf-input:disabled{cursor:not-allowed;opacity:var(--sf-disabled)}html.var .sf-input{padding:8px}html.var .sf-input:not([class*='sf-c-']){color:hsl(0,0%,10%);background:hsla(0,0%,90%,0.2)}html.var .sf-input:not(.bd\:c\:ii){border-color:hsla(0,0%,10%,0.2)}html.var .sf-input::-moz-placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-input:-ms-input-placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-input::placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-input:-moz-placeholder-shown{border-color:hsla(0,0%,10%,0.2)}html.var .sf-input:-ms-input-placeholder{border-color:hsla(0,0%,10%,0.2)}html.var .sf-input:placeholder-shown{border-color:hsla(0,0%,10%,0.2)}html.var .sf-input:focus{border-color:hsl(200,100%,60%)}html.var .sf-input[type='image'],html.var .sf-input[type='range']{background:none}html.var .sf-input[type='color']:focus-visible,html.var .sf-input[type='image']:focus-visible,html.var .sf-input[type='range']:focus-visible{outline:2px solid hsl(200,100%,60%)}html.var .sf-input:disabled{opacity:0.4}.sf-button{cursor:pointer;display:inline-block;font-size:15px;font-family:inherit;font-weight:inherit;line-height:1;color:hsl(var(--sf-c-form-txt));background:hsl(var(--sf-c-form-bg)/20%);border-style:solid;border-color:hsl(var(--sf-c-form-bd)/20%);border-width:1px;text-align:center;text-decoration:none;text-transform:none;border-radius:var(--sf-radius);height:32px;padding:var(--sf-elm-py) var(--sf-elm-px);box-sizing:border-box;vertical-align:baseline}a.sf-button:not([href]),.sf-button:disabled{cursor:not-allowed;opacity:var(--sf-disabled)}.sf-button:focus-visible{outline:1px solid hsl(var(--sf-c-form-info));outline-offset:-1px}html.var .sf-button{border-radius:3px;padding:8px}html.var .sf-button:not([class*='sf-c-']){color:hsl(0,0%,10%);background:hsla(0,0%,100%,0.2)}html.var .sf-button:not(.bd\:c\:ii){border-color:hsla(0,0%,10%,0.2)}html.var a.sf-button:not([href]),html.var .sf-button:disabled{opacity:0.4}html.var .sf-button:focus-visible{outline:1px solid hsl(200,100%,60%)}label.sf-radio,label.sf-checkbox{box-sizing:border-box}label.sf-radio *,label.sf-radio *::before,label.sf-radio *::after,label.sf-checkbox *,label.sf-checkbox *::before,label.sf-checkbox *::after{box-sizing:inherit}label.sf-radio input,label.sf-checkbox input,label.sf-radio input::before,label.sf-checkbox input::before{width:16px;height:16px}label.sf-radio input,label.sf-radio input~*,label.sf-checkbox input,label.sf-checkbox input~*{cursor:pointer}label.sf-radio input:disabled,label.sf-radio input:disabled~*,label.sf-checkbox input:disabled,label.sf-checkbox input:disabled~*{cursor:not-allowed;opacity:var(--sf-disabled)}label.sf-radio input,label.sf-checkbox input{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;margin:0 0 -2px;padding:0;vertical-align:baseline}label.sf-radio input::before,label.sf-checkbox input::before{top:0;left:0;position:absolute;width:16px;height:16px;content:'';background-color:hsl(var(--sf-c-form-bg)/20%);border:1px solid hsl(var(--sf-c-form-bd)/20%)}label.sf-radio input::after,label.sf-checkbox input::after{top:3px;left:3px;right:3px;bottom:3px;position:absolute;content:''}label.sf-radio input:checked::before,label.sf-checkbox input:checked::before{border-color:hsl(var(--sf-c-form-info))}label.sf-radio input:checked::after,label.sf-checkbox input:checked::after{background-color:hsl(var(--sf-c-form-info))}label.sf-radio input::before,label.sf-radio input::after{border-radius:50%}.sf-radio input:focus-visible,.sf-checkbox input:focus-visible{border-color:transparent;outline:2px solid hsl(var(--sf-c-form-info));outline-offset:2px}.sf-radio input:focus-visible{border-radius:50%}html.var label.sf-radio input:disabled,html.var label.sf-radio input:disabled~*,html.var label.sf-checkbox input:disabled,html.var label.sf-checkbox input:disabled~*{opacity:0.4}html.var label.sf-radio input::before,html.var label.sf-checkbox input::before{border-color:hsla(0,0%,10%,0.2)}html.var label.sf-radio input:checked::before,html.var label.sf-radio input:checked::after,html.var .sf-radio input:focus-visible,html.var label.sf-checkbox input:checked::before,html.var label.sf-checkbox input:checked::after,html.var .sf-checkbox input:focus-visible{outline-color:hsl(200,100%,60%)}.sf-select,.sf-select option{font-size:15px;font-family:inherit;font-weight:inherit;text-transform:none}.sf-select{padding:var(--sf-elm-py) var(--sf-elm-px);cursor:pointer;background:hsl(var(--sf-c-form-bg)/20%);border-style:solid;border-color:hsl(var(--sf-c-form-bd)/20%);border-width:1px;border-radius:0;width:100%;height:auto;overflow:auto}.sf-select option{padding:calc(var(--sf-elm-py) / 2) var(--sf-elm-px)}.sf-select optgroup{padding:calc(var(--sf-elm-py) / 2) 0 0}.sf-select:not([multiple]){height:32px;padding:0 var(--sf-elm-px);border-width:0 0 1px}.sf-select::-ms-expand{border:0;background:none}.sf-select:focus-visible{outline:1px solid hsl(var(--sf-c-form-info));outline-offset:-1px}.sf-select:disabled{cursor:not-allowed;opacity:var(--sf-disabled)}html.var .sf-select:not([multiple]){padding:0 0 0 8px}html.var .sf-select{padding:8px 0 8px 8px}html.var .sf-select:not([class*='sf-c-']){color:hsl(0,0%,10%);background:hsla(0,0%,90%,0.2)}html.var .sf-select:not(.bd\:c\:ii){border-color:hsla(0,0%,10%,0.2)}html.var .sf-select:disabled{opacity:0.4}.sf-textarea{font-size:15px;font-family:inherit;font-weight:inherit;line-height:1.499535;color:hsl(var(--sf-c-form-txt));background:hsl(var(--sf-c-form-bg)/20%);border-style:solid;border-color:hsl(var(--sf-c-form-bd)/20%);border-width:1px;width:100%;max-width:100%;min-height:calc((1.499535em + 2px + var(--sf-elm-py)) * 4);padding:var(--sf-elm-py) var(--sf-elm-px);border-radius:var(--sf-radius);resize:vertical;overflow:auto;box-sizing:border-box}.sf-textarea::-moz-placeholder{color:hsl(var(--sf-c-form-txt)/40%)}.sf-textarea:-ms-input-placeholder{color:hsl(var(--sf-c-form-txt)/40%)}.sf-textarea::placeholder{color:hsl(var(--sf-c-form-txt)/40%)}.sf-textarea:disabled{cursor:not-allowed;resize:none;opacity:var(--sf-disabled)}.sf-textarea:focus-visible{outline:1px solid hsl(var(--sf-c-form-info));outline-offset:-1px}html.var .sf-textarea{min-height:calc((1.499535em + 2px + 0.5em) * 4);padding:8px;border-radius:3px}html.var .sf-textarea:not([class*='sf-c-']){color:hsl(0,0%,10%);background:hsla(0,0%,90%,0.2)}html.var .sf-textarea:not(.bd\:c\:ii){border-color:hsla(0,0%,10%,0.2)}html.var .sf-textarea::-moz-placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-textarea:-ms-input-placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-textarea::placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-textarea:disabled{opacity:0.4}html.var .sf-textarea:focus:valid{border-color:hsl(200,100%,60%)}.sf-input[type='color']{cursor:pointer;width:32px;height:32px;background:conic-gradient(from 0,yellow,darkorange,red,fuchsia,blue,cyan,lime,yellowgreen,yellow);padding:0;border:0;border-radius:50%}.sf-input[type='color']:disabled{cursor:not-allowed;opacity:var(--sf-disabled)}.sf-input[type='color']::-webkit-color-swatch-wrapper{padding:3px}.sf-input[type='color']::-webkit-color-swatch{border:2px solid hsl(var(--sf-c-form-white));border-radius:50%}.sf-input[type='color']::-moz-color-swatch{border:2px solid hsl(var(--sf-c-form-white));border-radius:50%}.sf-input[type='color']:focus-visible{border-radius:50%}html.var .sf-input[type='color']:disabled{opacity:0.4}html.var .sf-input[type='color']::-webkit-color-swatch{border:2px solid hsl(0,0%,100%)}html.var .sf-input[type='color']::-moz-color-swatch{border:2px solid hsl(0,0%,100%)}.sf-input[type='file']{cursor:pointer;font-size:15px;font-family:inherit;font-weight:inherit;line-height:1;border:0;width:auto;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sf-input[type='file']::-webkit-file-upload-button{cursor:pointer;display:inline-block;font-size:15px;font-family:inherit;font-weight:inherit;line-height:1;text-align:center;text-transform:none;text-decoration:none;color:hsl(var(--sf-c-form-txt));background:hsl(var(--sf-c-form-bg)/20%);border:1px solid hsl(var(--sf-c-form-bd)/20%);height:32px;border-radius:var(--sf-radius)}.sf-input[type='file']::file-selector-button{cursor:pointer;display:inline-block;font-size:15px;font-family:inherit;font-weight:inherit;line-height:1;text-align:center;text-transform:none;text-decoration:none;color:hsl(var(--sf-c-form-txt));background:hsl(var(--sf-c-form-bg)/20%);border:1px solid hsl(var(--sf-c-form-bd)/20%);height:32px;border-radius:var(--sf-radius)}.sf-input[type='file']:focus-visible{outline:none}.sf-input[type='file']:focus-visible::-webkit-file-upload-button{outline:1px solid hsl(var(--sf-c-form-info));outline-offset:-1px}.sf-input[type='file']:focus-visible::file-selector-button{outline:1px solid hsl(var(--sf-c-form-info));outline-offset:-1px}.sf-input[type='file']:disabled{cursor:not-allowed;opacity:var(--sf-disabled)}.sf-input[type='file']:disabled::-webkit-file-upload-button{cursor:not-allowed}.sf-input[type='file']:disabled::file-selector-button{cursor:not-allowed}html.var .sf-input[type='file']{padding:0}html.var .sf-input[type='file']::-webkit-file-upload-button{color:hsl(0,0%,10%);background:hsla(0,0%,100%,0.2);border:1px solid hsla(0,0%,10%,0.2);border-radius:3px}html.var .sf-input[type='file']::file-selector-button{color:hsl(0,0%,10%);background:hsla(0,0%,100%,0.2);border:1px solid hsla(0,0%,10%,0.2);border-radius:3px}html.var .sf-input[type='file']:focus-visible::-webkit-file-upload-button{outline:1px solid hsl(200,100%,60%)}html.var .sf-input[type='file']:focus-visible::file-selector-button{outline:1px solid hsl(200,100%,60%)}html.var .sf-input[type='file']:disabled{opacity:0.4}.sf-switch{box-sizing:border-box;font-size:15px;font-family:inherit;font-weight:inherit;line-height:1;text-transform:none}.sf-switch.multiple *,.sf-switch.multiple *::before,.sf-switch.multiple *::after{box-sizing:inherit}label.sf-switch input[type='checkbox']{--sf-form-switch-size:1rem;position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:none;padding:0;margin:0;width:calc(var(--sf-form-switch-size) * 2);height:var(--sf-form-switch-size);vertical-align:text-top}label.sf-switch input[type='checkbox']::before{cursor:pointer;top:0;left:0;position:absolute;width:calc(var(--sf-form-switch-size) * 2);height:var(--sf-form-switch-size);content:'';background:hsl(var(--sf-c-form-bd)/20%);border-radius:calc(var(--sf-form-switch-size) / 2)}label.sf-switch input[type='checkbox']::after{cursor:pointer;top:2px;left:2px;position:absolute;width:calc(var(--sf-form-switch-size) - 2px * 2);height:calc(var(--sf-form-switch-size) - 2px * 2);content:'';background:hsl(var(--sf-c-form-white));border-radius:calc(var(--sf-form-switch-size) / 2);box-shadow:0 0 0 1px hsl(var(--sf-c-form-white));transition:transform 0.05s ease-in}label.sf-switch input[type='checkbox']:checked::before{background:hsl(var(--sf-c-form-info))}label.sf-switch input[type='checkbox']:checked::after{transform:translate3d(var(--sf-form-switch-size),0,0)}label.sf-switch input[type='radio']~*,label.sf-switch input[type='checkbox']~*{cursor:pointer}.sf-switch.multiple .sf-switch-toggle{display:inline-block;background:hsl(var(--sf-c-form-bg)/20%);box-shadow:1px 2px 8px 0 hsl(var(--sf-c-form-bd)/15%)}.sf-switch.multiple .sf-switch-toggle *{display:inline-block}.sf-switch.multiple .sf-switch-toggle label{position:relative}.sf-switch.multiple .sf-switch-toggle span{font-size:12px;text-align:center;min-width:32px;padding:var(--sf-elm-py) var(--sf-elm-px);background:hsl(var(--sf-c-form-bd)/5%)}.sf-switch.multiple input[type='checkbox'],.sf-switch.multiple input[type='radio']{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;top:0;left:0;right:0;bottom:0;position:absolute;z-index:1;width:100%;height:100%;padding:0;margin:0;border:0;opacity:0}.sf-switch.multiple input[type='checkbox']::before,.sf-switch.multiple input[type='radio']::before,.sf-switch.multiple input[type='checkbox']::after,.sf-switch.multiple input[type='radio']::after{content:none}.sf-switch.multiple input[type='checkbox']:checked~span,.sf-switch.multiple input[type='radio']:checked~span{color:hsl(var(--sf-c-form-white));background:hsl(var(--sf-c-form-info))}.sf-switch.multiple.vert .sf-switch-toggle{-ms-flex-flow:column;flex-flow:column}.sf-switch.multiple .sf-switch-description{font-size:12px;margin:0.5em 0 0;padding:0 0 0.5em}.sf-switch input[type='checkbox']:disabled,.sf-switch input[type='checkbox']:disabled::after,.sf-switch input[type='checkbox']:disabled::before,.sf-switch input[type='checkbox']:disabled~*,.sf-switch.multiple input[type='checkbox']:disabled,.sf-switch.multiple input[type='radio']:disabled,.sf-switch.multiple input[type='checkbox']:disabled~*,.sf-switch.multiple input[type='radio']:disabled~*{cursor:not-allowed}.sf-switch input[type='checkbox']:disabled,.sf-switch input[type='checkbox']:disabled~*,.sf-switch.multiple input[type='checkbox']:disabled~*,.sf-switch.multiple input[type='radio']:disabled~*{opacity:var(--sf-disabled)}.sf-switch input[type='checkbox']:focus-visible,.sf-switch input[type='radio']:focus-visible{border-color:transparent;outline:2px solid hsl(var(--sf-c-form-info))}.sf-switch:not(.multiple) input[type='checkbox']:focus-visible,.sf-switch:not(.multiple) input[type='radio']:focus-visible{border-radius:calc(var(--sf-form-switch-size) / 2)}html.var label.sf-switch input[type='checkbox']{width:16px;height:16px}html.var label.sf-switch input[type='checkbox']::before{width:16px;height:16px;background:hsla(0,0%,10%,0.2);border-radius:8px}html.var label.sf-switch input[type='checkbox']::after{width:28px;height:28px;background:hsl(0,0%,100%);border-radius:8px;box-shadow:0 0 0 1px hsl(0,0%,100%)}html.var label.sf-switch input[type='checkbox']:checked::before{background:hsl(200,100%,60%)}html.var .sf-switch.multiple .sf-switch-toggle{background:hsla(0,0%,90%,0.2);box-shadow:1px 2px 8px 0 hsla(0,0%,10%,0.15)}html.var .sf-switch.multiple .sf-switch-toggle span{font-size:12px;padding:8px;background:hsla(0,0%,10%,0.1)}html.var .sf-switch.multiple input[type='checkbox']:checked~span,html.var .sf-switch.multiple input[type='radio']:checked~span{color:hsl(0,0%,100%);background:hsl(200,100%,60%)}html.var .sf-switch.multiple .sf-switch-description{font-size:12px}html.var .sf-switch input[type='checkbox']:disabled~*,html.var .sf-switch.multiple input[type='checkbox']:disabled~*,html.var .sf-switch.multiple input[type='radio']:disabled~*{opacity:0.4}html.var .sf-switch input[type='checkbox']:focus-visible,html.var .sf-switch input[type='radio']:focus-visible{outline:2px solid hsl(200,100%,60%)}html.var .sf-switch:not(.multiple) input[type='checkbox']:focus-visible,html.var .sf-switch:not(.multiple) input[type='radio']:focus-visible{border-radius:8px}@keyframes Loading{from{background-position:0 0}to{background-position:28px 0}}a.sf-loading.sf-button:not([href]),.sf-loading:disabled,.sf-loading.sf-button:disabled,.sf-loading.sf-input:not([type='color']):disabled{--c1:transparent;--c2:hsl(var(--sf-c-form-loading)/5%);cursor:progress;background:repeating-linear-gradient(45deg,var(--c1),var(--c1) 10px,var(--c2) 10px,var(--c2) 20px);background-size:28px 100%;animation:Loading .3s linear infinite}html.var a.sf-loading.sf-button:not([href]),html.var .sf-loading:disabled,html.var .sf-loading.sf-button:disabled,html.var .sf-loading.sf-input:not([type='color']):disabled{background:repeating-linear-gradient(45deg,transparent,transparent 10px,hsla(0,0%,10%,0.05) 10px,hsla(0,0%,10%,0.05) 20px)}.sf-description,.sf-invalid,.sf-valid{color:hsl(var(--sf-c-form-txt)/40%);font-size:12px;font-family:inherit;font-weight:300;line-height:1;text-transform:none;margin-top:0.5em;padding-bottom:0.5em;display:none}.sf-description{display:block}.sf-invalid{color:hsl(var(--sf-c-form-error))}.sf-valid:not(.sf-description){color:hsl(var(--sf-c-form-txt))}.show.sf-description,.show.sf-invalid,.show.sf-valid{display:block}.hide.sf-description,.hide.sf-invalid,.hide.sf-valid{display:none}.validates:focus:invalid~.sf-invalid,.validates:focus:valid~.sf-valid,.validates:focus:valid~.sf-description.sf-valid{display:block}.validates:focus:invalid~.validates~.sf-invalid,.validates:focus:valid~.validates~.sf-valid,.validates:focus:valid~.validates~.sf-description.sf-valid{display:none}.validates:focus~.sf-description{display:none}.validates:focus~.validates~.sf-description{display:block}.error:not(:disabled)+.sf-invalid,.error:not(:disabled)+.sf-valid+.sf-invalid,.error:not(:disabled)+.sf-description+.sf-invalid{display:block !important}.error:not(:disabled)+.sf-invalid+.sf-valid,.error:not(:disabled)+.sf-invalid+.sf-description,.error:not(:disabled)+.sf-description,.error:not(:disabled)+.sf-description+.sf-valid,.error:not(:disabled)+.sf-valid,.error:not(:disabled)+.sf-valid+.sf-description{display:none !important}.validates input[type='checkbox']~.sf-description{display:none}.validates input[type='checkbox']:invalid~.sf-invalid{display:block}.validates input[type='checkbox']:valid~.sf-valid{display:block}.validates:required:invalid:not(:focus){border-bottom-color:hsl(var(--sf-c-form-warning))}.validates:required:invalid:not(:disabled){border-bottom-color:hsl(var(--sf-c-form-warning))}.validates input[type='radio']:invalid::before,.validates input[type='checkbox']:invalid::before{border-color:hsl(var(--sf-c-form-error))}.error:not(:disabled),.validates:required:invalid:focus{border-bottom-color:hsl(var(--sf-c-form-error));outline:none}label.validates.sf-switch .sf-description,label.validates.sf-switch .sf-valid,label.validates.sf-switch .sf-invalid,label.validates.sf-checkbox .sf-description,label.validates.sf-checkbox .sf-valid,label.validates.sf-checkbox .sf-invalid{width:100%}form.validates:invalid .sf-button[type='submit']{cursor:not-allowed;text-decoration:none;opacity:var(--sf-disabled);-webkit-text-fill-color:hsl(var(--sf-c-form-txt))}html.var .sf-description,html.var .sf-invalid,html.var .sf-valid{color:hsla(0,0%,10%,0.4)}html.var label.validates.sf-switch .sf-description,html.var label.validates.sf-switch .sf-valid,html.var label.validates.sf-switch .sf-invalid,html.var label.validates.sf-checkbox .sf-description,html.var label.validates.sf-checkbox .sf-valid,html.var label.validates.sf-checkbox .sf-invalid{line-height:1.1875}html.var .sf-invalid{color:hsl(0,100%,60%)}html.var .error:not(:disabled){border-bottom-color:hsl(0,100%,60%)}html.var .validates:invalid:required{border-bottom-color:hsl(39,100%,50%)}html.var .validates:invalid:focus{border-bottom-color:hsl(0,100%,60%)}html.var[data-theme='dark'] .sf-select::-ms-expand,html.var.dark .sf-select::-ms-expand{color:hsl(0,0%,90%)}html.var[data-theme='dark'] .sf-input[type='file']::-webkit-file-upload-button, html.var.dark .sf-input[type='file']::-webkit-file-upload-button{color:hsl(0,0%,90%);background-color:hsla(0,0%,20%,0.2);border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input[type='file']::file-selector-button,html.var.dark .sf-input[type='file']::file-selector-button{color:hsl(0,0%,90%);background-color:hsla(0,0%,20%,0.2);border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input[type='file']:focus-visible::-webkit-file-upload-button, html.var.dark .sf-input[type='file']:focus-visible::-webkit-file-upload-button{outline-color:hsl(219,79%,66%)}html.var[data-theme='dark'] .sf-input[type='file']:focus-visible::file-selector-button,html.var.dark .sf-input[type='file']:focus-visible::file-selector-button{outline-color:hsl(219,79%,66%)}html.var[data-theme='dark'] .sf-button:not([class*='sf-c-']),html.var[data-theme='dark'] .sf-input:not([class*='sf-c-']),html.var[data-theme='dark'] .sf-textarea:not([class*='sf-c-']),html.var[data-theme='dark'] .sf-select:not([class*='sf-c-']),html.var[data-theme='dark'] option,html.var.dark .sf-button:not([class*='sf-c-']),html.var.dark .sf-input:not([class*='sf-c-']),html.var.dark .sf-textarea:not([class*='sf-c-']),html.var.dark .sf-select:not([class*='sf-c-']),html.var.dark option{color:hsl(0,0%,90%);background-color:hsl(0,0%,20%)}html.var[data-theme='dark'] .sf-button:not(.bd\:c\:ii),html.var[data-theme='dark'] .sf-input:not(.bd\:c\:ii),html.var[data-theme='dark'] .sf-textarea:not(.bd\:c\:ii),html.var[data-theme='dark'] .sf-select:not(.bd\:c\:ii),html.var[data-theme='dark'] option,html.var.dark .sf-button:not(.bd\:c\:ii),html.var.dark .sf-input:not(.bd\:c\:ii),html.var.dark .sf-textarea:not(.bd\:c\:ii),html.var.dark .sf-select:not(.bd\:c\:ii),html.var.dark option{border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-description:not([class*='sf-c-']),html.var[data-theme='dark'] .sf-valid:not([class*='sf-c-']),html.var.dark .sf-description:not([class*='sf-c-']),html.var.dark .sf-valid:not([class*='sf-c-']),html.var[data-theme='dark'] .sf-description:not([class*='sf-c-']),html.var[data-theme='dark'] .sf-valid:not([class*='sf-c-']),html.var.dark .sf-description:not([class*='sf-c-']),html.var.dark .sf-valid:not([class*='sf-c-']){color:hsla(0,0%,90%,0.4)}html.var[data-theme='dark'] .sf-invalid:not([class*='sf-c-']),html.var.dark .sf-invalid:not([class*='sf-c-']){color:hsl(0,100%,65%)}html.var[data-theme='dark'] .sf-button:focus-visible,html.var[data-theme='dark'] label.sf-radio input:checked::before,html.var label.sf-radio input:checked::after,html.var .sf-radio input:focus-visible,html.var[data-theme='dark'] label.sf-checkbox input:checked::before,html.var label.sf-checkbox input:checked::after,html.var .sf-checkbox input:focus-visible,html.var[data-theme='dark'] .sf-input:focus,html.var[data-theme='dark'] .sf-input[type='color']:focus-visible,html.var[data-theme='dark'] .sf-input[type='image']:focus-visible,html.var[data-theme='dark'] .sf-input[type='range']:focus-visible,html.var[data-theme='dark'] .sf-textarea:focus-visible,html.var[data-theme='dark'] .sf-select:focus-visible,html.var.dark .sf-button:focus-visible,html.var.dark label.sf-radio input:checked::before,html.var label.sf-radio input:checked::after,html.var .sf-radio input:focus-visible,html.var.dark label.sf-checkbox input:checked::before,html.var label.sf-checkbox input:checked::after,html.var .sf-checkbox input:focus-visible,html.var.dark .sf-input:focus,html.var.dark .sf-input[type='color']:focus-visible,html.var.dark .sf-input[type='image']:focus-visible,html.var.dark .sf-input[type='range']:focus-visible,html.var.dark .sf-textarea:focus-visible,html.var.dark .sf-select:focus-visible{outline-color:hsl(219,79%,66%)}html.var[data-theme='dark'] .sf-input[type='color']::-webkit-color-swatch,html.var.dark .sf-input[type='color']::-webkit-color-swatch{border-color:hsl(0,0%,100%)}html.var[data-theme='dark'] .sf-input[type='color']::-moz-color-swatch,html.var.dark .sf-input[type='color']::-moz-color-swatch{border-color:hsl(0,0%,100%)}html.var[data-theme='dark'] .sf-input,html.var.dark .sf-input{border-color:transparent transparent hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input::-moz-placeholder, html.var[data-theme='dark'] .sf-textarea::-moz-placeholder, html.var.dark .sf-input::-moz-placeholder, html.var.dark .sf-textarea::-moz-placeholder{color:hsla(0,0%,90%,0.4)}html.var[data-theme='dark'] .sf-input:-ms-input-placeholder, html.var[data-theme='dark'] .sf-textarea:-ms-input-placeholder, html.var.dark .sf-input:-ms-input-placeholder, html.var.dark .sf-textarea:-ms-input-placeholder{color:hsla(0,0%,90%,0.4)}html.var[data-theme='dark'] .sf-input::placeholder,html.var[data-theme='dark'] .sf-textarea::placeholder,html.var.dark .sf-input::placeholder,html.var.dark .sf-textarea::placeholder{color:hsla(0,0%,90%,0.4)}html.var[data-theme='dark'] .sf-input:-moz-placeholder-shown, html.var.dark .sf-input:-moz-placeholder-shown{border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input:-ms-input-placeholder, html.var.dark .sf-input:-ms-input-placeholder{border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input:placeholder-shown,html.var.dark .sf-input:placeholder-shown{border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input[type='image'],html.var[data-theme='dark'] .sf-input[type='range'],html.var.dark .sf-input[type='image'],html.var.dark .sf-input[type='range']{background:none} diff --git a/package.json b/package.json index 4746d5d..602afce 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "style-forge.form", - "version": "2025.1.22", + "version": "2025.1.24", "description": "Style-Forge.Form: versatile library for easy form creation, validation, styling, and submission in web apps.", "type": "module", "main": "form.css", diff --git a/src/button.css b/src/button.css index 7639ce6..55cb883 100644 --- a/src/button.css +++ b/src/button.css @@ -1,20 +1,11 @@ -:root { - --sf-form-ff: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; - --sf-form-fz: 0.9375rem; - --sf-disabled: 0.4; - --sf-radius: 3px; - --sf-form-p-input-block: 0.5em; - --sf-form-p-input-inline: 0.5em; -} - .sf-button { cursor: pointer; display: inline-block; - font-size: var(--sf-form-fz); - font-family: var(--sf-form-ff); - font-weight: 400; + font-size: 15px; + font-family: inherit; + font-weight: inherit; line-height: 1; color: hsl(var(--sf-c-form-txt)); @@ -32,7 +23,7 @@ height: 32px; - padding: var(--sf-form-p-input-block) var(--sf-form-p-input-inline); + padding: var(--sf-elm-py) var(--sf-elm-px); box-sizing: border-box; @@ -54,13 +45,8 @@ a.sf-button:not([href]), /* /// */ -html.var .sf-button -{ - font-size: 15px; - font-family: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; - +html.var .sf-button { border-radius: 3px; - padding: 8px; } diff --git a/src/checkbox-radio.css b/src/checkbox-radio.css index a7125e5..2a289d2 100644 --- a/src/checkbox-radio.css +++ b/src/checkbox-radio.css @@ -1,8 +1,3 @@ -:root { - --sf-form-fz: 0.9375rem; - --sf-disabled: 0.4; -} - label.sf-radio, label.sf-checkbox { box-sizing: border-box } label.sf-radio *, diff --git a/src/color.css b/src/color.css index 47b5e09..f30557d 100644 --- a/src/color.css +++ b/src/color.css @@ -1,8 +1,3 @@ -:root { - --sf-form-fz: 0.9375rem; - --sf-disabled: 0.4; -} - .sf-input[type='color'] { cursor: pointer; diff --git a/src/file.css b/src/file.css index 905abd0..d33b314 100644 --- a/src/file.css +++ b/src/file.css @@ -1,16 +1,9 @@ -:root { - --sf-form-ff: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; - --sf-form-fz: 0.9375rem; - --sf-disabled: 0.4; - --sf-radius: 3px; -} - .sf-input[type='file'] { cursor: pointer; - font-size: var(--sf-form-fz); - font-family: var(--sf-form-ff); - font-weight: 400; + font-size: 15px; + font-family: inherit; + font-weight: inherit; line-height: 1; border: 0; @@ -27,9 +20,9 @@ display: inline-block; - font-size: var(--sf-form-fz); - font-family: var(--sf-form-ff); - font-weight: 400; + font-size: 15px; + font-family: inherit; + font-weight: inherit; line-height: 1; text-align: center; @@ -61,13 +54,9 @@ /* /// */ html.var .sf-input[type='file'] { - font-size: 15px; - font-family: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; padding: 0; /* required */ } html.var .sf-input[type='file']::file-selector-button { - font-size: 15px; - font-family: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; color: hsl(0, 0%, 10%); background: hsla(0, 0%, 100%, 0.2); border: 1px solid hsla(0, 0%, 10%, 0.2); diff --git a/src/input.css b/src/input.css index 7db3044..23abfd9 100644 --- a/src/input.css +++ b/src/input.css @@ -1,16 +1,3 @@ -:root { - --sf-form-ff: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; - - --sf-form-fz: 0.9375rem; - - --sf-disabled: 0.4; - - --sf-radius: 3px; - - --sf-form-p-input-block: 0.5em; - --sf-form-p-input-inline: 0.5em; -} - .sf-input *, .sf-input *::before, .sf-input *::after @@ -21,9 +8,9 @@ .sf-input { cursor: auto; - font-size: var(--sf-form-fz); - font-family: var(--sf-form-ff); - font-weight: 400; + font-size: 15px; + font-family: inherit; + font-weight: inherit; line-height: 1; text-transform: none; @@ -41,7 +28,7 @@ width: 100%; height: 32px; - padding: var(--sf-form-p-input-block) var(--sf-form-p-input-inline); + padding: var(--sf-elm-py) var(--sf-elm-px); box-sizing: border-box; vertical-align: top; @@ -89,12 +76,7 @@ /* /// */ -html.var .sf-input { - font-size: 15px; - font-family: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; - - padding: 8px; -} +html.var .sf-input { padding: 8px } html.var .sf-input:not([class*='sf-c-']) { color: hsl(0, 0%, 10%); diff --git a/src/select.css b/src/select.css index cae5e6d..f1fe763 100644 --- a/src/select.css +++ b/src/select.css @@ -1,26 +1,15 @@ -:root { - --sf-form-ff: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; - --sf-form-fz: 0.9375rem; - --sf-lh-normal: 1.1875; - --sf-disabled: 0.4; - --sf-radius: 3px; - --sf-form-p-input-block: 0.5em; - --sf-form-p-input-inline: 0.5em; -} - .sf-select, .sf-select option { - font-size: var(--sf-form-fz); - font-family: var(--sf-form-ff); - font-weight: 400; - line-height: var(--sf-lh-normal); + font-size: 15px; + font-family: inherit; + font-weight: inherit; text-transform: none; } -.sf-select { padding: var(--sf-form-p-input-block) var(--sf-form-p-input-inline) } -.sf-select option { padding: calc(var(--sf-form-p-input-block) / 2) var(--sf-form-p-input-inline) } -.sf-select optgroup { padding: calc(var(--sf-form-p-input-block) / 2) 0 0 } +.sf-select { padding: var(--sf-elm-py) var(--sf-elm-px) } +.sf-select option { padding: calc(var(--sf-elm-py) / 2) var(--sf-elm-px) } +.sf-select optgroup { padding: calc(var(--sf-elm-py) / 2) 0 0 } .sf-select { cursor: pointer; @@ -40,7 +29,7 @@ .sf-select:not([multiple]) { height: 32px; - padding: 0 var(--sf-form-p-input-inline); + padding: 0 var(--sf-elm-px); border-width: 0 0 1px; } @@ -61,12 +50,6 @@ /* /// */ -html.var .sf-select, -html.var .sf-select option -{ - font-size: 15px; - font-family: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; -} html.var .sf-select:not([multiple]) { padding: 0 0 0 8px } html.var .sf-select { padding: 8px 0 8px 8px } diff --git a/src/switch.css b/src/switch.css index 43ec03c..80a3c8a 100644 --- a/src/switch.css +++ b/src/switch.css @@ -1,13 +1,3 @@ -:root { - --sf-form-ff: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; - --sf-form-fz: 0.9375rem; - --sf-form-fz-small: 0.75rem; - --sf-disabled: 0.4; - --sf-form-p-input-block: 0.5em; - --sf-form-p-input-inline: 0.5em; - --sf-form-switch-size: 1rem; -} - .sf-switch { box-sizing: border-box } .sf-switch.multiple *, @@ -16,15 +6,17 @@ { box-sizing: inherit } .sf-switch { - font-size: var(--sf-form-fz); - font-family: var(--sf-form-ff); - font-weight: 400; + font-size: 15px; + font-family: inherit; + font-weight: inherit; line-height: 1; text-transform: none; } label.sf-switch input[type='checkbox'] { + --sf-form-switch-size: 1rem; + position: relative; appearance: none; @@ -88,12 +80,12 @@ label.sf-switch input[type='checkbox'] ~ * .sf-switch.multiple .sf-switch-toggle * { display: inline-block } .sf-switch.multiple .sf-switch-toggle label { position: relative } .sf-switch.multiple .sf-switch-toggle span { - font-size: var(--sf-form-fz-small); + font-size: 12px; text-align: center; min-width: 32px; - padding: var(--sf-form-p-input-block) var(--sf-form-p-input-inline); + padding: var(--sf-elm-py) var(--sf-elm-px); background: hsl(var(--sf-c-form-bd) / 5%); } @@ -137,7 +129,7 @@ label.sf-switch input[type='checkbox'] ~ * .sf-switch.multiple.vert .sf-switch-toggle { flex-flow: column } .sf-switch.multiple .sf-switch-description { - font-size: var(--sf-form-fz-small); + font-size: 12px; margin: 0.5em 0 0; padding: 0 0 0.5em; } @@ -174,11 +166,6 @@ label.sf-switch input[type='checkbox'] ~ * /* /// */ -html.var .sf-switch { - font-size: 15px; - font-family: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; -} - html.var label.sf-switch input[type='checkbox'] { width: 16px; height: 16px; diff --git a/src/textarea.css b/src/textarea.css index fb005fd..e082d82 100644 --- a/src/textarea.css +++ b/src/textarea.css @@ -1,16 +1,7 @@ -:root { - --sf-form-ff: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; - --sf-form-fz: 0.9375rem; - --sf-disabled: 0.4; - --sf-radius: 3px; - --sf-form-p-input-block: 0.5em; - --sf-form-p-input-inline: 0.5em; -} - .sf-textarea { - font-size: var(--sf-form-fz); - font-family: var(--sf-form-ff); - font-weight: 400; + font-size: 15px; + font-family: inherit; + font-weight: inherit; line-height: 1.499535; color: hsl(var(--sf-c-form-txt)); @@ -22,9 +13,9 @@ width: 100%; max-width: 100%; - min-height: calc((1.499535em + 2px + var(--sf-form-p-input-block)) * 4); + min-height: calc((1.499535em + 2px + var(--sf-elm-py)) * 4); - padding: var(--sf-form-p-input-block) var(--sf-form-p-input-inline); + padding: var(--sf-elm-py) var(--sf-elm-px); border-radius: var(--sf-radius); @@ -53,9 +44,6 @@ /* /// */ html.var .sf-textarea { - font-size: 15px; - font-family: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; - min-height: calc((1.499535em + 2px + 0.5em) * 4); padding: 8px; diff --git a/src/validate.css b/src/validate.css index 4c93e41..303fd85 100644 --- a/src/validate.css +++ b/src/validate.css @@ -1,22 +1,15 @@ -:root { - --sf-form-ff: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; - --sf-form-fz-small: 0.75rem; - --sf-lh-normal: 1.1875; - --sf-disabled: 0.4; -} - .sf-description, .sf-invalid, .sf-valid { color: hsl(var(--sf-c-form-txt) / 40%); - font-size: var(--sf-form-fz-small); - font-family: var(--sf-form-ff); + font-size: 12px; + font-family: inherit; font-weight: 300; line-height: 1; text-transform: none; - margin: 0.5em 0 0; - padding: 0 0 0.5em; + margin-top: 0.5em; + padding-bottom: 0.5em; } .sf-description, .sf-invalid, .sf-valid { display: none } @@ -81,7 +74,8 @@ label.validates.sf-checkbox .sf-description, label.validates.sf-checkbox .sf-valid, label.validates.sf-checkbox .sf-invalid { width: 100%; - line-height: var(--sf-lh-normal); + /* --sf-lh-normal: 1.1875; */ + /* line-height: var(--sf-lh-normal); */ } form.validates:invalid .sf-button[type='submit'] { @@ -97,9 +91,6 @@ html.var .sf-description, html.var .sf-invalid, html.var .sf-valid { color: hsla(0, 0%, 10%, 0.4); - - font-size: 12px; - font-family: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; } html.var label.validates.sf-switch .sf-description, diff --git a/src/var.css b/src/var.css index 2f6e634..1561e6d 100644 --- a/src/var.css +++ b/src/var.css @@ -1,4 +1,10 @@ :root { + --sf-radius: 3px; + --sf-disabled: 0.4; + --sf-elm-py: 0.5em; + --sf-elm-px: 0.5em; + + /* color */ --sf-c-form-white: 0 0% 100%; --sf-c-form-info: 200 100% 60%; --sf-c-form-error: 0 100% 60%; @@ -40,7 +46,7 @@ html[data-theme='dark'], html.dark { @media (prefers-color-scheme: dark) { html[data-theme='auto'], html.auto { - color-scheme: light dark; + color-scheme: dark; --sf-c-form-white: var(--sf-dark-c-form-white);