/* -- Clear user agent style -- */ fieldset,form,label,input { -webkit-appearance:initial; appearance:initial; box-sizing:border-box; margin-block:0; margin-inline:0; padding-block:0; padding-inline:0; border:0; font:inherit; font-size:100%; font-weight:inherit; vertical-align:baseline; } input[type=date]::-webkit-inner-spin-button, input[type="date"]::-webkit-calendar-picker-indicator { display:none; appearance:none; -webkit-appearance:none; } input[type=time]::-webkit-inner-spin-button, input[type="time"]::-webkit-calendar-picker-indicator { display:none; appearance:none; -webkit-appearance:none; } input:is([type=date],[type=time])::-webkit-date-and-time-value { margin:1px 4px; } form, [role=form] { background-color:inherit; color:var(--on-surface-variant); font:var(--bodyL); letter-spacing:var(--bodyL-spacing); width:100%; flex:1; display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:stretch; margin:0 auto; gap:24px; } :is(form,[role=form]) > section:not(.user-input) { display:flex; flex-flow:row wrap; justify-content:space-between; padding:0; gap:24px; } form > button:is(.submit,[type=submit]) { margin-block:24px 0; } form > button:is(.submit,[type=submit]) > [data-svg] > svg:not(:only-child) { opacity:0; } form:is(:invalid, [data-has-changed=false]) > button:is(.submit,[type=submit]), button:is(.disabled,[disabled]) { background-color:var(--surface-container-low); color:var(--on-surface-disabled); fill:var(--on-surface-disabled); outline:1px solid var(--surface-dim); } form:invalid > button:is(.submit,[type=submit])[data-label-invalid]::after { content:attr(data-label-invalid); } form:invalid > button:is(.submit,[type=submit]):not([data-label-invalid])[data-label-valid]::after { content:attr(data-label-valid); } form:invalid > button:is(.submit,[type=submit]) > [data-svg] > svg:not(:only-child):first-child { opacity:1; } form:valid > button:is(.submit,[type=submit])[data-label-valid]::after { content:attr(data-label-valid); } form:valid > button:is(.submit,[type=submit]) > [data-svg] > svg:not(:only-child):last-child { opacity:1; } form[data-has-changed=false] > button:is(.submit,[type=submit]) { pointer-events:none; } form[data-has-changed] > button:is(.submit,[type=submit])[data-label-valid]::after { content:attr(data-label-valid); } form[data-has-changed] > button:is(.submit,[type=submit])[data-label-updated]::after { content:attr(data-label-updated); } /* ----->>> input's wrapper <<<----- */ .user-input { contain:layout; position:relative; height:56px; width:100%; max-width:calc(var(--display-width) - 32px); padding:0; margin:0; background-color:inherit; border-radius:4px; } .user-input { will-change:background,color; transition:box-shadow 350ms var(--easing-emphasized-decelerate), color 200ms var(--easing-legacy), background-color 250ms var(--easing-legacy), border 250ms var(--easing-legacy); } .user-input:is(:focus,:focus-within,:active), .user-input:has( > input[aria-selected]) { z-index:2; } .user-input[role=group] { display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:stretch; } .user-input[role=group]::before { content:''; box-sizing:content-box; z-index:0; position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; width:100%; max-width:100%; height:calc(100% - 4px); border:1px solid var(--outline); border-radius:4px; background-color:transparent; outline-style:none; } .user-input[role=group]::before { transition:box-shadow 350ms var(--easing-emphasized-decelerate), color 150ms var(--easing-legacy), background-color 250ms var(--easing-legacy) 100ms, border 150ms var(--easing-legacy); } .user-input[role=group]:has(input:not(:placeholder-shown))::before { border:1px solid var(--secondary); } .user-input[role=group]:has([contenteditable]:not(:empty))::before { border:1px solid var(--secondary); } .user-input[role=group]:is(:focus,:focus-within,:active)::before { border:1.5px solid var(--secondary); } .user-input[role=group] :is(input,[contenteditable]) { border:0 hidden!important; background-color:transparent!important; } /* ----->>> placeholder <<<----- */ .user-input > input::placeholder { opacity:0; color:transparent; } /* ----->>> input <<<----- */ .user-input > :is(input,[contenteditable]) { box-sizing:content-box; z-index:1; position:absolute; inset:0; margin:0; padding-inline:16px; height:100%; outline:1px solid var(--outline); outline-offset:-1px; background-color:transparent; color:var(--on-surface-alt); border-radius:4px; font:var(--bodyL); letter-spacing:var(--bodyL-spacing); line-height:52px; text-align:left; } .user-input > :is(input,[contenteditable],textarea) { transition:box-shadow 350ms var(--easing-emphasized-decelerate), color 150ms var(--easing-legacy), background-color 250ms var(--easing-legacy) 100ms, border 150ms var(--easing-legacy); } .user-input:is(:focus,:focus-within,:active) > :is(input:not([role=combobox]),[aria-selected],[contenteditable],textarea) { outline:2px solid var(--secondary); outline-offset:-2px; } .user-input > input:is(:required:valid,:not(:placeholder-shown)) { appearance:none; z-index:1; outline-color:var(--secondary); color:inherit; } .user-input > input:is(:-webkit-autofill,:-webkit-autofill:focus,:-webkit-autofill:hover,:-internal-autofill-selected,:-internal-autofill-previewed) { -webkit-text-fill-color:var(--on-surface-alt); box-shadow:inset 0 0 10px 500px var(--surface)!important; } /* ----->>> input w/ suffix <<<----- */ .user-input[data-suffix]::after { content:attr(data-suffix); z-index:0; position:absolute; inset:0; opacity:1; margin-block:auto; margin-inline:calc(100% - 24px - 8px) auto; width:fit-content; height:24px; color:var(--on-surface-variant); font:var(--bodyL); letter-spacing:normal; line-height:32px; transition:opacity 150ms var(--easing-emphasized); } .user-input[data-suffix]:not(:focus,:focus-within,:active):has( > input:placeholder-shown)::after {opacity:0; } .user-input[data-suffix] > :is(input,[contenteditable]) { padding-inline:16px 32px; } /* ----->>> input w/ trailing icon <<<----- */ .user-input > input ~ .trailing.icon { opacity:0; transform:scale(.8); width:40px; height:40px; position:absolute; top:0; bottom:0; margin-block:auto; right:8px; padding:8px; fill:rgba(var(--on-surface-variant-rgb),.92); transform-origin:center; transition:opacity 150ms var(--easing-emphasized) 100ms, transform 150ms var(--easing-emphasized) 100ms, margin 150ms var(--easing-emphasized); } .user-input:is(:focus,:focus-within,:active) > input ~ .trailing.icon { margin-inline-end:-1px; } .user-input > input:placeholder-shown ~ .trailing.icon { opacity:1; transform:scale(1); } /* ----->>> input w/ helperText <<<----- */ .user-input > .helperText { position:absolute; top:54px; right:8px; margin-block:4px 0; font:var(--bodyS); letter-spacing:var(--bodyS-spacing); color:var(--on-surface-variant); white-space:nowrap; text-overflow:ellipsis; overflow:hidden; } /* ----->>> input + label <<<----- */ .user-input > label { z-index:0; contain:content; position:absolute; inset:0; height:24px; width:fit-content; max-width:calc(100% - 24px); padding-inline:3px; margin-block:auto; margin-inline:12px; color:var(--on-surface-variant); white-space:nowrap; font:var(--bodyL); letter-spacing:var(--bodyL-spacing); will-change:transform,color; transition:line-height 250ms var(--easing-emphasized), color 150ms linear; } .user-input > input[role=combobox] + label { margin-inline:12px 60px; } .user-input:not(:focus,:focus-within,:active) > input:is(:required,[aria-required=true]):placeholder-shown:not(:focus,:active,[aria-selected]) + label::after { content:'*'; position:relative; top:-5px; left:2px; color:var(--error); font:var(--labelM); } .user-input > input:is(:required:valid,:not(:placeholder-shown),:-webkit-autofill,:-internal-autofill-selected,:not([role=combobox]):focus,:not([role=combobox]):active,[aria-selected]) + label, .user-input > [contenteditable]:not(:empty) + label, .user-input:is(:focus,:focus-within,:active) > :is(input:not([role=combobox]),[aria-selected],[contenteditable]) + label { z-index:2; contain:layout; height:4px; margin-block:-1px auto; background-color:inherit; color:var(--secondary); font:var(--bodyS); font-weight:450; letter-spacing:var(--bodyS-spacing); line-height:3px; } /* ----->>> input disabled <<<----- */ .user-input:is(:disabled,[aria-disabled]):not([aria-disabled=false]) { opacity:.64; pointer-events:none; background-color:var(--surface-disabled); } .user-input:is(:disabled,[aria-disabled]):not([aria-disabled=false]) > input { outline-color:var(--on-surface-disabled); } .user-input:is(:disabled,[aria-disabled]):not([aria-disabled=false]) > label { color:var(--on-surface-disabled); } /* ----->>> textarea <<<----- */ .user-input:has( > textarea) { height:280px; } .user-input > textarea { box-sizing:content-box; z-index:1; position:absolute; inset:0; margin:0; padding-inline:16px; height:100%; outline:1px solid var(--outline); outline-offset:-1px; background-color:transparent; color:var(--on-surface-alt); border-radius:4px; font:var(--bodyL); letter-spacing:var(--bodyL-spacing); line-height:28px; text-align:left; } /* ========================----->>> SELECT COMPONENT <<<-----=================================================================================== *\ \* =========================================================================================================================================================== */ .user-input > [role=combobox] ~ [data-svg*=expand] { z-index:0; width:40px; height:40px; position:absolute; top:0; bottom:0; margin-block:auto; right:8px; padding:8px; fill:var(--on-surface-variant); transition:transform 150ms var(--easing-emphasized) 100ms, margin 150ms var(--easing-emphasized); } .user-input > [role=combobox] ~ [role=listbox] { --num-lines:5; contain:content; overflow-y:scroll; overflow-x:clip; z-index:0; visibility:collapse; position:absolute; top:56px; left:1px; width:calc(100% - 2px); height:0; margin-inline:0; padding:0; display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:stretch; border-radius:4px; background-color:inherit; font:var(--bodyL); letter-spacing:var(--bodyL-spacing); will-change:box-shadow; transition:height 250ms var(--easing-emphasized), box-shadow 200ms var(--easing-emphasized), visibility 5ms linear 350ms; } .user-input > [role=combobox] ~ [role=listbox] > label:is([role=radio],[role=checkbox],[role=option]) { flex:none; opacity:0; height:0; font:var(--bodyL); letter-spacing:var(--bodyL-spacing); line-height:24px; will-change:opacity,height; transition:opacity 150ms var(--easing-emphasized), height 200ms var(--easing-emphasized); } .user-input > [role=combobox] ~ [role=listbox] > label:is([role=radio],[role=checkbox]) { padding-inline:22px 4px; display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; } .user-input > [role=combobox] ~ [role=listbox] > label[role=option] { display:flex; order:1; padding-inline:22px 12px; height:40px; line-height:40px; } .user-input > [role=combobox] ~ [role=listbox] > label[role=option]:focus { background-color:var(--surface-container-high); } .user-input > [role=combobox] ~ [role=listbox] > label[role=option][aria-selected=true] { order:0; background-color:var(--surface-container-high); } .user-input > [role=combobox][aria-selected] ~ [data-svg*=expand] { transform:rotate(180deg); transition:transform 150ms var(--easing-emphasized); } .user-input > [role=combobox][aria-selected] ~ [role=listbox] { z-index:2; visibility:visible; height:calc(48px * var(--num-lines)); box-shadow:var(--shadow-1); transition:height 350ms var(--easing-emphasized), box-shadow 300ms var(--easing-emphasized); } .user-input > [role=combobox][aria-selected] ~ [role=listbox] > label:is([role=radio],[role=checkbox],[role=option]) { opacity:1; height:48px; will-change:opacity,height; transition:opacity 200ms var(--easing-emphasized), height 250ms var(--easing-emphasized); } .user-input > [role=combobox][aria-selected] ~ [role=listbox] > [role=option]:first-child { margin-block-start:4px; } .user-input > [role=combobox][aria-selected] ~ [role=listbox] > [role=option]:last-child { margin-block-end:4px; } /* ========================----->>> RADIO COMPONENT <<<-----=================================================================================== *\ \* =========================================================================================================================================================== */ label:is([role=radio],[role=checkbox],[role=option]) { flex:none; opacity:0; height:0; font:var(--labelL); letter-spacing:var(--labelL-spacing); line-height:24px; will-change:opacity,height; transition:opacity 150ms var(--easing-emphasized), height 200ms var(--easing-emphasized); } label[role=radio] { padding-inline:4px; display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; } label:is([role=radio],[role=checkbox],[role=option]) { opacity:1; height:48px; will-change:opacity,height; transition:opacity 200ms var(--easing-emphasized), height 250ms var(--easing-emphasized); } [role=group] { display:flex; width:100%; flex-flow:row wrap; justify-content:flex-start; align-items:center; } input[role=radio] { position:relative; z-index:1; width:20px; height:20px; inline-size:20px; block-size:20px; padding:0; margin:14px; outline:1.5px solid var(--on-surface-variant); border-radius:50%; background-color:transparent; box-sizing:border-box; will-change:border-color; transition:border-color 200ms linear; } input[role=radio]::before { content:''; position:absolute; top:50%; left:50%; z-index:0; inline-size:40px; block-size:40px; background-color:var(--on-surface-alt); opacity:0; border-radius:50%; transform:translate(-50%,-50%); will-change:opacity, background-color; transition:background-color 200ms linear, opacity 200ms var(--easing-emphasized); } input[role=radio]:active::before { opacity:.12; } input[role=radio]::after { content:''; display:block; width:20px; height:20px; background-color:var(--primary-container); border-radius:50%; box-sizing:border-box; opacity:0; transform:scale(0); will-change:opacity, transform; transition:transform 200ms var(--easing-emphasized), opacity 200ms var(--easing-emphasized) 50ms; } input[role=radio]:checked::before { background-color:var(--primary-container); } input[role=radio]:checked { outline-color:var(--primary-container-variant); } input[role=radio]:checked::after { opacity:1; transform:scale(calc(13/20)); } /* =======================----->>> SWITCH COMPONENT <<<-----================================================================================= *\ \* =========================================================================================================================================================== */ .user-input:has( > label[role=switch]) { border-bottom:1px solid var(--outline); border-radius:0; } input[role=switch]/*Track*/ { appearance:none; position:relative; width:52px; height:32px; inline-size:52px; block-size:32px; padding:0; margin:8px 14px; background-color:var(--surface-variant); outline-offset:-1px; outline:1px solid var(--outline); border-radius:16px; } input[role=switch]:checked { background-color:var(--primary-container); outline-offset:-2px; outline:2px solid var(--primary-container-variant); } input[role=switch]::before /*Thumb*/ { content:''; position:absolute; inset:0; display:block; width:16px; height:16px; margin-block:auto; margin-inline:auto 32px; padding:0; transform-origin:center; border-radius:50%; background-color:var(--outline); will-change:background-color,transform; transition:background-color 150ms var(--easing-legacy), outline 150ms var(--easing-legacy), transform 200ms var(--easing-legacy), margin 200ms var(--easing-legacy); } input[role=switch]:checked::before { background-color:var(--on-primary); transform:scale(1.5); margin-inline:auto 8px; transition:background-color 250ms var(--easing-legacy), outline 250ms var(--easing-legacy), transform 300ms var(--easing-legacy), margin 300ms var(--easing-legacy); } input[role=switch]::after { box-sizing:border-box; content:''; position:absolute; inset:0; margin-block:11px auto; margin-inline:auto 33px; display:block; width:14px; height:8px; transform:rotate(-45deg); border-style:solid; border-color:transparent; border-width:0 0 2px 2px; border-radius:0 0 0 2px; transform-origin:center; transition:margin 200ms var(--easing-legacy), border 75ms var(--easing-legacy); } input[role=switch]:checked::after { border-width:0 0 3px 3px; border-color:var(--primary-container-variant); margin-inline:auto 9px; transition:margin 300ms var(--easing-legacy), border 250ms var(--easing-legacy); } label[role=switch] { flex:none; width:100%; max-width:calc(100% - 8px); height:100%; margin:auto 0; padding-inline:12px 4px; display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; font:var(--bodyL); letter-spacing:var(--bodyL-spacing); line-height:24px; } label > span { margin-inline:4px auto; font:var(--labelM); letter-spacing:var(--labelM-spacing); color:var(--outline-variant); } label[role=switch] > input[role=switch] { margin:auto 0; } /* =======================----->>> CHECKBOX COMPONENT <<<-----================================================================================= *\ \* =========================================================================================================================================================== */ input[role=checkbox] { flex:none; position:relative; z-index:1; width:18px; height:18px; inline-size:18px; block-size:18px; padding:0; margin:11px; outline:1.5px solid var(--on-surface-alt); outline-offset:-.5px; border-radius:2px; background-color:transparent; box-sizing:border-box; will-change:border-color, background-color; transition:border-color 200ms linear, background-color 200ms linear; } input[role=checkbox]::before { content:''; position:absolute; top:50%; left:50%; z-index:0; inline-size:40px; block-size:40px; background-color:var(--on-surface-alt); opacity:0; border-radius:50%; transform:translate(-50%,-50%); will-change:opacity, background-color; transition:background-color 200ms linear, opacity 200ms var(--easing-emphasized); } input[role=checkbox]:active::before { opacity:.12; } input[role=checkbox]::after { content:''; position:absolute; top:55%; left:15%; width:11px; height:6px; background-color:transparent; border-color:var(--on-primary); border-width:0 0 2px 2px; border-style:solid; box-sizing:border-box; opacity:0; transform:scale(0) rotate(0deg); transform-origin:top left; will-change:opacity, transform; transition:transform 200ms var(--easing-emphasized), opacity 200ms var(--easing-emphasized); } input[role=checkbox]:checked::before { background-color:var(--primary-container); } input[role=checkbox]:checked { background-color:var(--primary-container); outline-color:var(--primary-container-variant); } input[role=checkbox]:checked::after { opacity:1; transform:scale(1) rotate(-45deg); } div[role=checkbox] { flex:none; position:relative; z-index:1; width:18px; height:18px; inline-size:18px; block-size:18px; padding:0; margin:15px; border:1.5px solid var(--on-surface-alt); border-radius:2px; background-color:transparent; box-sizing:border-box; will-change:border-color, background-color; transition:border-color 200ms linear, background-color 200ms linear; } /* ----->>> input's property <<<----- */ ::placeholder { text-overflow:ellipsis; white-space:nowrap; overflow:hidden; } .user-input:is(.error, .alert, [aria-invalid=true]) > * { color:var(--error)!important; border-color:var(--error)!important; fill:var(--error)!important; } .user-input > input:is(.error,.alert,[aria-invalid]) { color:var(--error); border:1px solid var(--error); fill:var(--error); } .user-input > input:is(.error,.alert,[aria-invalid]) ~ :is(label,[data-svg*=expand],.trailing.icon) { color:var(--error); fill:var(--error); } .user-input > input:is(.error,.alert,[aria-invalid]).icon { background-color:var(--error-container)!important; }