From 9ccf521eb6b8041cc02a1d695f2c50722e6b9401 Mon Sep 17 00:00:00 2001 From: Alex Widener Date: Fri, 7 Nov 2025 11:25:51 -0500 Subject: [PATCH 01/21] wrap all input pairs in divs --- dist/semantic-forms.js | 99 +- docs/statics/pages/fullDemo.html | 1779 ++++++++++++++++++------------ lib/helpers.js | 30 + lib/inputEnhancements.js | 361 ++++++ lib/keyboardShortcuts.js | 164 +++ semanticForms.js | 553 +--------- 6 files changed, 1691 insertions(+), 1295 deletions(-) create mode 100644 lib/helpers.js create mode 100644 lib/inputEnhancements.js create mode 100644 lib/keyboardShortcuts.js diff --git a/dist/semantic-forms.js b/dist/semantic-forms.js index d7c14f1..c18de25 100644 --- a/dist/semantic-forms.js +++ b/dist/semantic-forms.js @@ -1,32 +1,34 @@ (function(root,factory){if(typeof exports==="object"&&typeof module==="object")module.exports=factory();else if(typeof define==="function"&&define.amd)define("semanticForms",[],factory);else if(typeof exports==="object")exports["semanticForms"]=factory();else root["semanticForms"]=factory()})(this,()=>/******/(()=>{// webpackBootstrap /******/var __webpack_modules__={ /***/90: -/***/module=>{const semanticForms=()=>{ +/***/(module,__unused_webpack_exports,__webpack_require__)=>{const{shortcutListener,createKeyboardShortcut}=__webpack_require__(497);const{enhanceInput}=__webpack_require__(866);const semanticForms=()=>{ // do some feature detection so none of the JS executes if the browser is too old -if(typeof document.getElementsByClassName!=="function"||typeof document.querySelector!=="function"||!document.body.classList||!window.MutationObserver){console.warn("semantic-forms was loaded into an unsupported browser and will not execute.");return}const passwordShow='';const passwordHide='';const helpTextIcon='';const nodeNameLookup=["TEXTAREA","SELECT"];const inputTypeLookup=["checkbox","color","date","datetime-local","email","file","image","month","number","password","radio","range","search","tel","text","time","url","week"];const keyboardShortcuts=[]; +if(typeof document.getElementsByClassName!=="function"||typeof document.querySelector!=="function"||!document.body.classList||!window.MutationObserver){console.warn("semantic-forms was loaded into an unsupported browser and will not execute.");return} // custom keyboard shortcut listener -document.addEventListener("keydown",e=>{const specialCharMap={Minus:"-",Equal:"=",BracketLeft:"[",BracketRight:"]",Backslash:"\\",Semicolon:";",Quote:"'",Comma:",",Period:".",Slash:"/",Backquote:"`"};const shiftSpecialCharMap={1:"!",2:"@",3:"#",4:"$",5:"%",6:"^",7:"&",8:"*",9:"(",0:")",Minus:"_",Equal:"+",BracketLeft:"{",BracketRight:"}",Backslash:"|",Semicolon:":",Quote:'"',Comma:"<",Period:">",Slash:"?",Backquote:"~"};const shortcut=keyboardShortcuts.find(shortcut=>{let matchesKey=false;if(e.altKey&&!e.shiftKey) -// mac adjusts the key value if altKey is pressed -matchesKey="Key"+shortcut.key.toUpperCase()===e.code||"Digit"+shortcut.key.toUpperCase()===e.code||shortcut.key===e.key||specialCharMap[e.code]===shortcut.key;else if(e.shiftKey){ -// check shift special character map -const code=e.code.replace(/Key|Digit/,"");matchesKey=(shiftSpecialCharMap[code]||shiftSpecialCharMap[e.key])&&(shiftSpecialCharMap[code]===shortcut.key||shiftSpecialCharMap[e.key]===shortcut.key)}else matchesKey=shortcut.key.toUpperCase()===e.key.toUpperCase();if(!matchesKey)return false;let matchesModifier;if(shortcut.modifier){if(shortcut.modifier===shortcut.defaultModifier)matchesModifier=shortcut.os==="windows"||shortcut.os==="linux"?e.ctrlKey:e.metaKey;if(shortcut.modifier==="meta")matchesModifier=e.metaKey;if(shortcut.modifier==="alt")matchesModifier=e.altKey;if(shortcut.modifier==="ctrl")matchesModifier=e.ctrlKey}return matchesModifier});if(shortcut){e.preventDefault();shortcut.input.focus()}}); +const keyboardShortcuts=[];document.addEventListener("keydown",e=>shortcutListener(e,keyboardShortcuts)); // progressively enhance form elements that have the semanticForms class const forms=document.querySelectorAll("form.semanticForms:not(.semanticFormsActive), table.semanticForms:not(.semanticFormsActive)");for(const form of forms){form.classList.add("semanticFormsActive");if(form.classList.contains("lowFlow"))continue; // update each input in the semantic form -const inputs=Array.from(form.querySelectorAll("input, textarea, select"));for(let input of inputs){ -// ignore input if it has previously been formatted -if(input.classList.contains("semanticform")||!input.id)continue;const type=input.getAttribute("type");if(nodeNameLookup.includes(input.nodeName)||inputTypeLookup.includes(type)){ -// recursively find
element -let dl=input.parentNode;while(dl&&dl.nodeName!=="DL")dl=dl.parentNode;if(!dl)continue;if(!dl.classList.contains("floatLabelForm"))dl.classList.add("floatLabelForm");const label=input.parentNode.parentNode.id&&(type==="checkbox"||type==="radio")?document.querySelector("label[data-for="+input.parentNode.parentNode.id.replace(/\./g,"\\.")+"]"):document.querySelector("label[for="+input.id.replace(/\./g,"\\.")+"]");if(!label)console.error(`semantic-forms: Found an input (${input.id||input.getAttribute("name")}) without a properly associated label. Make sure there is a label for it and the label has a matching "for" attribute.`);input.classList.add("semanticform"); -// #region create labels -const newLabel=document.createElement("label");newLabel.className="floatLabelFormAnimatedLabel";if(type==="checkbox"||type==="radio"){ -// recursively find
element -let dd=input.parentNode;while(dd&&dd.nodeName!=="DD")dd=dd.parentNode;if(!dd){console.error(`semantic-forms: Found an input (${input.id||input.getAttribute("name")}) that is not inside a
element.`);continue}if(dd.firstChild.nodeName!=="LABEL"){if(type==="checkbox"&&input.parentNode.nodeName==="DD"){newLabel.setAttribute("for",input.id);input.parentNode.classList.add("singleCheckbox");newLabel.className="";label.setAttribute("hidden","hidden");insertAfter(newLabel,input)}if(type==="radio"&&input.parentNode.nodeName==="DD"){newLabel.setAttribute("for",input.id);input.parentNode.classList.add("singleRadio");newLabel.className="";label.setAttribute("hidden","hidden");insertAfter(newLabel,input)}newLabel.innerHTML=label.innerHTML;if(label.hasAttribute("title")&&label.getAttribute("data-show-help-icon")!==null&&!label.querySelector("span.help")){const text=label.getAttribute("title");label.innerHTML+=` ${helpTextIcon}`;newLabel.innerHTML+=` ${helpTextIcon}`}if(dd.querySelector(":required")&&label.getAttribute("data-no-asterisk")===null&&!label.querySelector("span.required")){const text=label.getAttribute("data-asterisk-text")||"This field is required.";label.innerHTML+=` *`;newLabel.innerHTML+=` *`}if(!dd.querySelector("label"))dd.append(newLabel)} -// removes old div that a radio or checkbox may have been added to -if(dd.parentElement.nodeName==="DIV")dd.parentElement.remove();const div=document.createElement("div");div.append(label.closest("dt"),dd);dl.append(div)}else{newLabel.setAttribute("for",input.id);newLabel.innerHTML=label.innerHTML;if(input.hasAttribute("title")&&label.getAttribute("data-show-help-icon")!==null&&!label.querySelector("span.help")){const text=input.getAttribute("title");newLabel.innerHTML+=` ${helpTextIcon}`}if(input.hasAttribute("required")&&label.getAttribute("data-no-asterisk")===null&&!label.querySelector("span.required")){const text=label.getAttribute("data-asterisk-text")||"This field is required.";newLabel.innerHTML+=` *`}label.setAttribute("hidden","hidden");insertAfter(newLabel,input)} -// #endregion -// #region keyboard shortcuts -if(input.getAttribute("data-focus-key")!==null){function handleKeyboardShortcut(){const os=getOS(); +const inputs=Array.from(form.querySelectorAll("input, textarea, select"));for(const input of inputs){enhanceInput(input); +// handle keyboard shortcuts +if(input.getAttribute("data-focus-key")!==null){const shortcut=createKeyboardShortcut(input,keyboardShortcuts);keyboardShortcuts.push(shortcut)}}} +// handle undo/redo +let lastFocusedInput;let lastClearFieldPressed;document.addEventListener("keydown",event=>{if((event.ctrlKey||event.metaKey)&&event.key==="z"&&!event.shiftKey){ +// undo clearing a field +if(lastFocusedInput)if(lastFocusedInput?.parentNode?.querySelector("button.clear").id===`semanticFormsClearButton_${lastClearFieldPressed}`||lastFocusedInput?.parentNode?.querySelector("button.clear").name===`semanticFormsClearButton_${lastClearFieldPressed}`)if(lastFocusedInput.previousValue){lastFocusedInput.redoValue=lastFocusedInput.value;lastFocusedInput.value=lastFocusedInput.previousValue}}else if(event.ctrlKey&&event.key==="y"||event.metaKey&&event.shiftKey&&event.key==="z") +// redo clearing a field +if(lastFocusedInput)if(lastFocusedInput?.parentNode?.querySelector("button.clear").id===`semanticFormsClearButton_${lastClearFieldPressed}`||lastFocusedInput?.parentNode?.querySelector("button.clear").name===`semanticFormsClearButton_${lastClearFieldPressed}`)if(lastFocusedInput.redoValue){lastFocusedInput.previousValue=lastFocusedInput.value;lastFocusedInput.value=lastFocusedInput.redoValue}}); +// monitor changes to the DOM and enhance new semanticForms forms that get added +if(!window.semanticFormsObserver){window.semanticFormsObserver=new window.MutationObserver(mutations=>{let stop=false;for(const mutation of mutations){for(const node of mutation.addedNodes)if(node.nodeName==="FORM"||node?.querySelector?.("form")){semanticForms();stop=true}if(stop)break}});window.semanticFormsObserver.observe(document.body,{attributes:false,childList:true,characterData:false,subtree:true})}semanticForms.reinitialize=form=>{form.classList.remove("semanticFormsActive");semanticForms()}};module.exports=semanticForms +/***/}, +/***/497: +/***/(module,__unused_webpack_exports,__webpack_require__)=>{const{getOS,insertAfter}=__webpack_require__(584);const specialCharMap={Minus:"-",Equal:"=",BracketLeft:"[",BracketRight:"]",Backslash:"\\",Semicolon:";",Quote:"'",Comma:",",Period:".",Slash:"/",Backquote:"`"};const shiftSpecialCharMap={1:"!",2:"@",3:"#",4:"$",5:"%",6:"^",7:"&",8:"*",9:"(",0:")",Minus:"_",Equal:"+",BracketLeft:"{",BracketRight:"}",Backslash:"|",Semicolon:":",Quote:'"',Comma:"<",Period:">",Slash:"?",Backquote:"~"}; +// handles keyboard shortcut events +const shortcutListener=(e,shortcuts)=>{const shortcut=shortcuts.find(shortcut=>{let matchesKey=false;if(e.altKey&&!e.shiftKey) +// mac adjusts the key value if altKey is pressed +matchesKey="Key"+shortcut.key.toUpperCase()===e.code||"Digit"+shortcut.key.toUpperCase()===e.code||shortcut.key===e.key||specialCharMap[e.code]===shortcut.key;else if(e.shiftKey){ +// check shift special character map +const code=e.code.replace(/Key|Digit/,"");matchesKey=(shiftSpecialCharMap[code]||shiftSpecialCharMap[e.key])&&(shiftSpecialCharMap[code]===shortcut.key||shiftSpecialCharMap[e.key]===shortcut.key)}else matchesKey=shortcut.key.toUpperCase()===e.key.toUpperCase();if(!matchesKey)return false;let matchesModifier;if(shortcut.modifier){if(shortcut.modifier===shortcut.defaultModifier)matchesModifier=shortcut.os==="windows"||shortcut.os==="linux"?e.ctrlKey:e.metaKey;if(shortcut.modifier==="meta")matchesModifier=e.metaKey;if(shortcut.modifier==="alt")matchesModifier=e.altKey;if(shortcut.modifier==="ctrl")matchesModifier=e.ctrlKey}return matchesModifier});if(shortcut){e.preventDefault();shortcut.input.focus()}};const createKeyboardShortcut=(input,shortcuts)=>{const os=getOS(); // this is the custom keyword for meta on linux/mac, ctrl on windows const defaultModifier="metactrl"; // get focus key value @@ -40,15 +42,39 @@ const recognizedModifiers=["ctrl","alt","opt","meta","cmd",defaultModifier];if(! // retrieve modifier symbol if(["alt","opt"].includes(modifierKey))modifierSymbol=os==="mac"?"⌥":"⎇";else if(["meta","win","cmd"].includes(modifierKey)||modifierKey===defaultModifier&&os==="mac")if(os==="mac")modifierSymbol="⌘";else if(os==="linux")modifierSymbol="◆";else modifierSymbol="⊞";else if(modifierKey==="ctrl"||modifierKey===defaultModifier&&(os==="windows"||os==="linux"))if(os==="mac")modifierSymbol="⌃";else modifierSymbol="Ctrl"; // add the shortcut to the cached array, if not a duplicate -if(keyboardShortcuts.some(shortcut=>shortcut.key===focusKey&&shortcut.modifier===modifierKey))console.error(`Duplicate keyboard shortcut "${modifierKey} + ${focusKey}" detected. Only the first input will be focusable using this keyboard shortcut.`,input);else keyboardShortcuts.push({key:focusKey,modifier:modifierKey,input,os,defaultModifier}); +if(shortcuts.some(shortcut=>shortcut.key===focusKey&&shortcut.modifier===modifierKey))console.error(`Duplicate keyboard shortcut "${modifierKey} + ${focusKey}" detected. Only the first input will be focusable using this keyboard shortcut.`,input); // set the shortcut indicator/title if(input.nodeName==="TEXTAREA"||input.type==="text"||input.type==="number"){ // create focus indicator for valid inputs const indicator=document.createElement("span");indicator.classList.add("focus-key");indicator.innerHTML=`${modifierSymbol} ${focusKey.toUpperCase()}`;insertAfter(indicator,newLabel)}else // update the input title -if(input.getAttribute("title"))input.setAttribute("title",input.getAttribute("title")+` (${modifierSymbol} + ${focusKey})`);else input.setAttribute("title",`Focus with ${modifierSymbol} + ${focusKey}`)} -// placed in a function so that it may exit while still completing other semantic-form enhancements -handleKeyboardShortcut()} +if(input.getAttribute("title"))input.setAttribute("title",input.getAttribute("title")+` (${modifierSymbol} + ${focusKey})`);else input.setAttribute("title",`Focus with ${modifierSymbol} + ${focusKey}`);return{key:focusKey,modifier:modifierKey,input,os,defaultModifier}};module.exports={shortcutListener,createKeyboardShortcut} +/***/}, +/***/584: +/***/module=>{ +/** + * Uses the navigator to best determine the clients operating system. + * @returns Operating system string (`mac`, `windows`, `linux`) + */ +const getOS=()=>{const userAgent=window.navigator.userAgent;const platform=window.navigator.platform;let os=null;if(platform.includes("Win"))os="windows";else if(platform.includes("Mac")||/iPhone|iPad|iPod/.test(userAgent))os="mac";else if(platform.includes("Linux")||/Android/.test(userAgent))os="linux";return os} +/** + * Places an element immediately after another element + * @param {Object} newNode element being placed after the reference node + * @param {*} referenceNode element to be used as reference for new node + */;const insertAfter=(newNode,referenceNode)=>{if(referenceNode.nextSibling)referenceNode.parentNode.insertBefore(newNode,referenceNode.nextSibling);else referenceNode.parentNode.appendChild(newNode)};module.exports={getOS,insertAfter} +/***/}, +/***/866: +/***/(module,__unused_webpack_exports,__webpack_require__)=>{const{insertAfter}=__webpack_require__(584);const passwordShow='';const passwordHide='';const helpTextIcon='';const nodeNameLookup=["TEXTAREA","SELECT"];const inputTypeLookup=["checkbox","color","date","datetime-local","email","file","image","month","number","password","radio","range","search","tel","text","time","url","week"];const enhanceInput=(input,form)=>{ +// ignore input if it has previously been formatted +if(input.classList.contains("semanticform")||!input.id)return;const type=input.getAttribute("type");if(nodeNameLookup.includes(input.nodeName)||inputTypeLookup.includes(type)){ +// recursively find
element +let dl=input.parentNode;while(dl&&dl.nodeName!=="DL")dl=dl.parentNode;if(!dl)return;if(!dl.classList.contains("floatLabelForm"))dl.classList.add("floatLabelForm");const label=input.parentNode.parentNode.id&&(type==="checkbox"||type==="radio")?document.querySelector("label[data-for="+input.parentNode.parentNode.id.replace(/\./g,"\\.")+"]"):document.querySelector("label[for="+input.id.replace(/\./g,"\\.")+"]");if(!label)console.error(`semantic-forms: Found an input (${input.id||input.getAttribute("name")}) without a properly associated label. Make sure there is a label for it and the label has a matching "for" attribute.`);input.classList.add("semanticform"); +// #region create labels +const newLabel=document.createElement("label");newLabel.className="floatLabelFormAnimatedLabel";if(type==="checkbox"||type==="radio"){ +// recursively find
element +let dd=input.parentNode;while(dd&&dd.nodeName!=="DD")dd=dd.parentNode;if(!dd){console.error(`semantic-forms: Found an input (${input.id||input.getAttribute("name")}) that is not inside a
element.`);return}if(dd.firstChild.nodeName!=="LABEL"){if(type==="checkbox"&&input.parentNode.nodeName==="DD"){newLabel.setAttribute("for",input.id);input.parentNode.classList.add("singleCheckbox");newLabel.className="";label.setAttribute("hidden","hidden");insertAfter(newLabel,input)}if(type==="radio"&&input.parentNode.nodeName==="DD"){newLabel.setAttribute("for",input.id);input.parentNode.classList.add("singleRadio");newLabel.className="";label.setAttribute("hidden","hidden");insertAfter(newLabel,input)}newLabel.innerHTML=label.innerHTML;if(label.hasAttribute("title")&&label.getAttribute("data-show-help-icon")!==null&&!label.querySelector("span.help")){const text=label.getAttribute("title");label.innerHTML+=` ${helpTextIcon}`;newLabel.innerHTML+=` ${helpTextIcon}`}if(dd.querySelector(":required")&&label.getAttribute("data-no-asterisk")===null&&!label.querySelector("span.required")){const text=label.getAttribute("data-asterisk-text")||"This field is required.";label.innerHTML+=` *`;newLabel.innerHTML+=` *`}if(!dd.querySelector("label"))dd.append(newLabel)} +// removes old div that a radio or checkbox may have been added to +if(dd.parentElement.nodeName==="DIV")dd.parentElement.remove();const div=document.createElement("div");div.append(label.closest("dt"),dd);dl.append(div)}else{newLabel.setAttribute("for",input.id);newLabel.innerHTML=label.innerHTML;if(input.hasAttribute("title")&&label.getAttribute("data-show-help-icon")!==null&&!label.querySelector("span.help")){const text=input.getAttribute("title");newLabel.innerHTML+=` ${helpTextIcon}`}if(input.hasAttribute("required")&&label.getAttribute("data-no-asterisk")===null&&!label.querySelector("span.required")){const text=label.getAttribute("data-asterisk-text")||"This field is required.";newLabel.innerHTML+=` *`}label.setAttribute("hidden","hidden");insertAfter(newLabel,input)} // #endregion // #region standard inputs // check for auto-grow attribute on textareas @@ -56,7 +82,7 @@ if(input.getAttribute("data-auto-grow")!==null){ // progressively enhance inputs into textareas if(input.nodeName==="INPUT"&&input.type==="text"){const newInput=document.createElement("textarea");newInput.id=input.id;newInput.class=input.class;newInput.innerText=input.value;newInput.setAttribute("data-auto-grow","");input.replaceWith(newInput);input=newInput}if(input.nodeName==="TEXTAREA") // when pressing enter while this input is focused, we want to submit -input.addEventListener("keypress",e=>{if(e.key!=="Enter"||e.key==="Enter"&&e.shiftKey)return;e.preventDefault();form.requestSubmit()})}if(type!=="checkbox"&&type!=="radio"){if(!input.getAttribute("placeholder"))input.setAttribute("placeholder"," ");const div=document.createElement("div");const dt=label.closest("dt");const dd=input.closest("dd");if(!dt){console.error(`semantic-forms: Found an input (${input.id||input.getAttribute("name")}) that does not have a corresponding
element.`);continue}if(!dd){console.error(`semantic-forms: Found an input (${input.id||input.getAttribute("name")}) that does not have a corresponding
element.`);continue} +input.addEventListener("keypress",e=>{if(e.key!=="Enter"||e.key==="Enter"&&e.shiftKey)return;e.preventDefault();form.requestSubmit()})}if(type!=="checkbox"&&type!=="radio"){if(!input.getAttribute("placeholder"))input.setAttribute("placeholder"," ");const div=document.createElement("div");const dt=label.closest("dt");const dd=input.closest("dd");if(!dt){console.error(`semantic-forms: Found an input (${input.id||input.getAttribute("name")}) that does not have a corresponding
element.`);return}if(!dd){console.error(`semantic-forms: Found an input (${input.id||input.getAttribute("name")}) that does not have a corresponding
element.`);return} // #region input clear button if(input.nodeName!=="SELECT"&&type!=="range"){const clearBtn=document.createElement("button");clearBtn.type="button";clearBtn.title=input.getAttribute("data-clear-field-text")||"Clear field";clearBtn.ariaLabel=input.getAttribute("data-clear-field-text")||"Clear field";clearBtn.tabIndex=-1;clearBtn.innerHTML='';clearBtn.classList.add("clear");clearBtn.id=`semanticFormsClearButton_${input.id}`;clearBtn.addEventListener("click",()=>{input.previousValue=input.value;input.value="";input.focus();lastClearFieldPressed=input.id; // used for any other updates required by various inputs @@ -75,7 +101,7 @@ if(type==="file"){const clearBtn=input.parentElement.querySelector(".clear");inp // handle range inputs with a class to display the value if(type==="range"&&input.classList.contains("displayValue")){const label=input.parentNode.parentNode.querySelector("dd label");label.innerHTML+=`: ${input.value}`;input.addEventListener("input",event=>{const output=event.target.parentNode.parentNode.querySelector("output");output.innerHTML=event.target.value})} // #region show password button -if(type==="password"&&input.getAttribute("data-no-reveal")===null){const showBtn=document.createElement("button");showBtn.type="button";showBtn.title=input.getAttribute("data-show-password-text")||"Show password";showBtn.ariaLabel=input.getAttribute("data-show-password-text")||"Show password";showBtn.tabIndex=-1;showBtn.innerHTML=passwordShow;showBtn.classList.add("show");showBtn.id=`semanticFormsShowButton_${input.id}`;const dd=input.closest("dd");if(!dd){console.error(`semantic-forms: Found an input (${input.id||input.getAttribute("name")}) that is not inside a
element.`);continue}showBtn.addEventListener("click",()=>{if(input.type==="password"){showBtn.innerHTML=passwordHide;showBtn.title=input.getAttribute("data-hide-password-text")||"Hide password";showBtn.ariaLabel=input.getAttribute("data-hide-password-text")||"Hide password";input.type="text"}else{showBtn.innerHTML=passwordShow;showBtn.title=input.getAttribute("data-show-password-text")||"Show password";showBtn.ariaLabel=input.getAttribute("data-show-password-text")||"Show password";input.type="password"}input.focus()});insertAfter(showBtn,dd.querySelector("label"))} +if(type==="password"&&input.getAttribute("data-no-reveal")===null){const showBtn=document.createElement("button");showBtn.type="button";showBtn.title=input.getAttribute("data-show-password-text")||"Show password";showBtn.ariaLabel=input.getAttribute("data-show-password-text")||"Show password";showBtn.tabIndex=-1;showBtn.innerHTML=passwordShow;showBtn.classList.add("show");showBtn.id=`semanticFormsShowButton_${input.id}`;const dd=input.closest("dd");if(!dd){console.error(`semantic-forms: Found an input (${input.id||input.getAttribute("name")}) that is not inside a
element.`);return}showBtn.addEventListener("click",()=>{if(input.type==="password"){showBtn.innerHTML=passwordHide;showBtn.title=input.getAttribute("data-hide-password-text")||"Hide password";showBtn.ariaLabel=input.getAttribute("data-hide-password-text")||"Hide password";input.type="text"}else{showBtn.innerHTML=passwordShow;showBtn.title=input.getAttribute("data-show-password-text")||"Show password";showBtn.ariaLabel=input.getAttribute("data-show-password-text")||"Show password";input.type="password"}input.focus()});insertAfter(showBtn,dd.querySelector("label"))} // #endregion // add listener to shift clear button when scrollbar present if(input.nodeName==="TEXTAREA"){if(input.getAttribute("data-disable-autosize")===null){ @@ -105,24 +131,7 @@ if(input.getAttribute("data-auto-grow")!==null){const adjustHeight=()=>{if(input // set initial height to semantic-forms CSS variable input.style.height=window.getComputedStyle(form).getPropertyValue("--semanticFormsInputHeight");input.addEventListener("input",adjustHeight)} // shifts the clear button to the right if a scrollbar is present -const shiftClearBtn=()=>{const clearBtn=input.parentElement?.querySelector("button.clear");if(clearBtn)clearBtn.style.marginRight=input.clientHeight{if((event.ctrlKey||event.metaKey)&&event.key==="z"&&!event.shiftKey){ -// undo clearing a field -if(lastFocusedInput)if(lastFocusedInput?.parentNode?.querySelector("button.clear").id===`semanticFormsClearButton_${lastClearFieldPressed}`||lastFocusedInput?.parentNode?.querySelector("button.clear").name===`semanticFormsClearButton_${lastClearFieldPressed}`)if(lastFocusedInput.previousValue){lastFocusedInput.redoValue=lastFocusedInput.value;lastFocusedInput.value=lastFocusedInput.previousValue}}else if(event.ctrlKey&&event.key==="y"||event.metaKey&&event.shiftKey&&event.key==="z") -// redo clearing a field -if(lastFocusedInput)if(lastFocusedInput?.parentNode?.querySelector("button.clear").id===`semanticFormsClearButton_${lastClearFieldPressed}`||lastFocusedInput?.parentNode?.querySelector("button.clear").name===`semanticFormsClearButton_${lastClearFieldPressed}`)if(lastFocusedInput.redoValue){lastFocusedInput.previousValue=lastFocusedInput.value;lastFocusedInput.value=lastFocusedInput.redoValue}}); -// monitor changes to the DOM and enhance new semanticForms forms that get added -if(!window.semanticFormsObserver){window.semanticFormsObserver=new window.MutationObserver(mutations=>{let stop=false;for(const mutation of mutations){for(const node of mutation.addedNodes)if(node.nodeName==="FORM"||node?.querySelector?.("form")){semanticForms();stop=true}if(stop)break}});window.semanticFormsObserver.observe(document.body,{attributes:false,childList:true,characterData:false,subtree:true})}semanticForms.reinitialize=form=>{form.classList.remove("semanticFormsActive");semanticForms()}};module.exports=semanticForms +const shiftClearBtn=()=>{const clearBtn=input.parentElement?.querySelector("button.clear");if(clearBtn)clearBtn.style.marginRight=input.clientHeightHigh flow (JavaScript enabled) styling
-
-
- -
-
- -
-
- -
-
- -

Password should be at least 8 characters long.

-
- -
-
- -

Password should be at least 8 characters long.

-
- -
-
- -

Password should be at least 8 characters long.

-
- -
-
- - -
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+ +

Password should be at least 8 characters long.

+
+
+ +
+
+
+ +

Password should be at least 8 characters long.

+
+
+ +
+
+
+ +

Password should be at least 8 characters long.

+
+
+ +
+
+
+ + +
+
-
-
+
+
+
+
-
-
- -
-
- -
+
+
+
+
+ +
+
+
+ +
+
@@ -93,371 +113,497 @@

High flow (JavaScript enabled) styling

Inputs

-
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- - -
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- - - -
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+ + +
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+ + + +
+
-
-
- - -
+
+
+
+ + +
+
-
-
+
+
+
+
-
-
+
+
+
+

Selects

-
-
- - -
+
+
+
+ + +
+
-
-
- -
+
+
+
+ +
+
-
-
- -
+
+
+
+ +
+
+
-
+
+

Checkboxes

-
-
-
    -
    • -
    • -
    • -
-
- -
-
-
    -
    • -
    • -
    • -
-
- -
-
-
    -
    • -
    • -
    • -
-
- -
-
-
    -
  • - - -
    • -
  • - - -
    • -
  • - -
    • -
- -
+
+
+
+
    +
    • +
    • +
    • +
+
+
+ +
+
+
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+
+ +
+
+
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+
+ +
+
+
+
    +
  • + + +
    • +
  • + + +
    • +
  • + +
    • +
+ +
+
-
-
- -
-
- -
-
- -
-
- - -
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+ + +
+

Radios

-
-
-
    -
    • -
    • -
    • -
-
- -
-
-
    -
    • -
    • -
    • -
-
- -
-
-
    -
    • -
    • -
    • -
-
- -
-
-
    -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
- -
+
+
+
+
    +
    • +
    • +
    • +
+
+
+ +
+
+
+
    +
    • +
    • +
    • +
+
+
+ +
+
+
+
    +
    • +
    • +
    • +
+
+
+ +
+
+
+
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+ +
+
-
-
- -
-
- -
-
- -
-
- - -
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+ + +
+

Other

-
-
+
+
+
+
-
-
- - -
+
+
+
+ + +
+
-
-
- - -
+
+
+
+ + +
+
-
-
- - -
+
+
+
+ + +
+
-
-
- -
+
+
+
+
-
-
- -
+
+
+
+

Keyboard shortcuts

-
-
- -
-
- -
-
- -
-
- -
- -
-
- -
-
- - -
- -
-
- - -
- -
-
- -
-
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+ + +
+
-
-
+
+
+
+ + +
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+

Tables

@@ -546,74 +692,89 @@

Nested fieldsets

Fieldset 1
-
-
- -

Here is some subtext.

-
+
+
+
+ +

Here is some subtext.

+
+
-
-
- -

Here's some small subtext.

-
+
+
+
+ +

Here's some small subtext.

+
+
-
-
- -

Here's some bold subtext.

-
+
+
+
+ +

Here's some bold subtext.

+
+
-
-
- -

Here is some subtext.

-

Here is some more subtext.

-
+
+
+
+ +

Here is some subtext.

+

Here is some more subtext.

+
+
Fieldset 2
-
-
- -
+
+
+
+ +
+
-
-
- -
+
+
+
+
-
-
- -
+
+
+
+ +
+
Fieldset 3
-
-
- -
-
-
- -
-
-
- -
-
-
- -
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
@@ -622,33 +783,45 @@

Nested fieldsets

Detail element
-
-
- -
-
- -
-
- -
-
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
Another detail element with a nested fieldset
-
-
+
+
+
+
Nested fieldset
-
-
+
+
+
+
@@ -675,39 +848,70 @@

Nested fieldsets

Colspan classes
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
colspan-1
-
-
- -
-
- -
-
- -
-
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
@@ -715,17 +919,25 @@

Nested fieldsets

colspan-2
-
-
- -
-
- -
-
- -
-
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
@@ -733,17 +945,25 @@

Nested fieldsets

colspan-3
-
-
+
+
+
+
-
-
+
+
+
+
-
-
+
+
+
+
-
-
+
+
+
+
@@ -751,17 +971,25 @@

Nested fieldsets

colspan-full
-
-
- -
-
- -
-
- -
-
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
@@ -930,177 +1158,247 @@

Low flow (JavaScript disabled) styling

Adding the lowFlow class to the form element removes all JS enhancements.

-
-
- -
-
- -
-
- -
-
- -

Password should be at least 8 characters long.

-
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+ +

Password should be at least 8 characters long.

+
+
-
-
+
+
+
+
Fieldset legend
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
- - -
- -
-
- -
-
- -
-
- -
-
- - -
- -
-
-
    -
    • -
    • -
    • -
-
- -
-
- -
-
-
    -
    • -
    • -
    • -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+ + +
+
-
-
+
+
+
+
-
-
+
+
+
+
-
-
+
+
+
+
-
-
- - -
+
+
+
+ + +
+
+ +
+
+
+
    +
    • +
    • +
    • +
+
+
+ +
+
+
+
+ +
+
+
+
    +
    • +
    • +
    • +
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+ + +
+
Nested fieldset
-
-
- -

Here is some subtext.

-
+
+
+
+ +

Here is some subtext.

+
+
-
-
- -

Here's some small subtext.

-
+
+
+
+ +

Here's some small subtext.

+
+
-
-
- -

Here's some bold subtext.

-
+
+
+
+ +

Here's some bold subtext.

+
+
-
-
- -

Here is some subtext.

-

Here is some more subtext.

-
+
+
+
+ +

Here is some subtext.

+

Here is some more subtext.

+
+
Another nested fieldset
-
-
+
+
+
+
-
-
- -
+
+
+
+ +
+
-
-
- -
+
+
+
+ +
+
@@ -1108,25 +1406,35 @@

Low flow (JavaScript disabled) styling

Details summary
-
-
- -
-
- -
-
- -
-
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
Another details element
-
-
+
+
+
+
@@ -1134,39 +1442,70 @@

Low flow (JavaScript disabled) styling

Colspan classes
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
colspan-1
-
-
- -
-
- -
-
- -
-
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
@@ -1174,17 +1513,25 @@

Low flow (JavaScript disabled) styling

colspan-2
-
-
- -
-
- -
-
- -
-
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
@@ -1192,17 +1539,25 @@

Low flow (JavaScript disabled) styling

colspan-3
-
-
- -
-
- -
-
- -
-
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
@@ -1210,17 +1565,25 @@

Low flow (JavaScript disabled) styling

colspan-full
-
-
- -
-
- -
-
- -
-
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
diff --git a/lib/helpers.js b/lib/helpers.js new file mode 100644 index 0000000..a8cef88 --- /dev/null +++ b/lib/helpers.js @@ -0,0 +1,30 @@ +/** + * Uses the navigator to best determine the clients operating system. + * @returns Operating system string (`mac`, `windows`, `linux`) + */ +const getOS = () => { + const userAgent = window.navigator.userAgent + const platform = window.navigator.platform + let os = null + + if (platform.includes('Win')) { + os = 'windows' + } else if (platform.includes('Mac') || /iPhone|iPad|iPod/.test(userAgent)) { + os = 'mac' + } else if (platform.includes('Linux') || /Android/.test(userAgent)) { + os = 'linux' + } + return os +} + +/** + * Places an element immediately after another element + * @param {Object} newNode element being placed after the reference node + * @param {*} referenceNode element to be used as reference for new node + */ +const insertAfter = (newNode, referenceNode) => { + if (referenceNode.nextSibling) referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling) + else referenceNode.parentNode.appendChild(newNode) +} + +module.exports = { getOS, insertAfter } diff --git a/lib/inputEnhancements.js b/lib/inputEnhancements.js new file mode 100644 index 0000000..21c8d02 --- /dev/null +++ b/lib/inputEnhancements.js @@ -0,0 +1,361 @@ +const { insertAfter } = require('./helpers.js') + +const passwordShow = '' +const passwordHide = '' +const helpTextIcon = '' + +const nodeNameLookup = ['TEXTAREA', 'SELECT'] +const inputTypeLookup = ['checkbox', 'color', 'date', 'datetime-local', 'email', 'file', 'image', 'month', 'number', 'password', 'radio', 'range', 'search', 'tel', 'text', 'time', 'url', 'week'] + +const enhanceInput = (input, form) => { + // ignore input if it has previously been formatted + if (input.classList.contains('semanticform') || !input.id) return + + const type = input.getAttribute('type') + if (nodeNameLookup.includes(input.nodeName) || inputTypeLookup.includes(type)) { + // recursively find
element + let dl = input.parentNode + while (dl && dl.nodeName !== 'DL') dl = dl.parentNode + + if (!dl) return + if (!dl.classList.contains('floatLabelForm')) dl.classList.add('floatLabelForm') + + const label = input.parentNode.parentNode.id && (type === 'checkbox' || type === 'radio') + ? document.querySelector('label[data-for=' + input.parentNode.parentNode.id.replace(/\./g, '\\.') + ']') + : document.querySelector('label[for=' + input.id.replace(/\./g, '\\.') + ']') + + if (!label) { + console.error(`semantic-forms: Found an input (${input.id || input.getAttribute('name')}) without a properly associated label. Make sure there is a label for it and the label has a matching "for" attribute.`) + } + + input.classList.add('semanticform') + + // #region create labels + + const newLabel = document.createElement('label') + newLabel.className = 'floatLabelFormAnimatedLabel' + + if (type === 'checkbox' || type === 'radio') { + // recursively find
element + let dd = input.parentNode + while (dd && dd.nodeName !== 'DD') dd = dd.parentNode + + if (!dd) { + console.error(`semantic-forms: Found an input (${input.id || input.getAttribute('name')}) that is not inside a
element.`) + return + } + + if (dd.firstChild.nodeName !== 'LABEL') { + if (type === 'checkbox' && input.parentNode.nodeName === 'DD') { + newLabel.setAttribute('for', input.id) + input.parentNode.classList.add('singleCheckbox') + newLabel.className = '' + label.setAttribute('hidden', 'hidden') + insertAfter(newLabel, input) + } + + if (type === 'radio' && input.parentNode.nodeName === 'DD') { + newLabel.setAttribute('for', input.id) + input.parentNode.classList.add('singleRadio') + newLabel.className = '' + label.setAttribute('hidden', 'hidden') + insertAfter(newLabel, input) + } + + newLabel.innerHTML = label.innerHTML + + if (label.hasAttribute('title') && label.getAttribute('data-show-help-icon') !== null && !label.querySelector('span.help')) { + const text = label.getAttribute('title') + label.innerHTML += ` ${helpTextIcon}` + newLabel.innerHTML += ` ${helpTextIcon}` + } + + if (dd.querySelector(':required') && label.getAttribute('data-no-asterisk') === null && !label.querySelector('span.required')) { + const text = label.getAttribute('data-asterisk-text') || 'This field is required.' + label.innerHTML += ` *` + newLabel.innerHTML += ` *` + } + + if (!dd.querySelector('label')) dd.append(newLabel) + } + + // removes old div that a radio or checkbox may have been added to + if (dd.parentElement.nodeName === 'DIV') dd.parentElement.remove() + + const div = document.createElement('div') + div.append(label.closest('dt'), dd) + dl.append(div) + } else { + newLabel.setAttribute('for', input.id) + newLabel.innerHTML = label.innerHTML + + if (input.hasAttribute('title') && label.getAttribute('data-show-help-icon') !== null && !label.querySelector('span.help')) { + const text = input.getAttribute('title') + newLabel.innerHTML += ` ${helpTextIcon}` + } + + if (input.hasAttribute('required') && label.getAttribute('data-no-asterisk') === null && !label.querySelector('span.required')) { + const text = label.getAttribute('data-asterisk-text') || 'This field is required.' + newLabel.innerHTML += ` *` + } + + label.setAttribute('hidden', 'hidden') + + insertAfter(newLabel, input) + } + // #endregion + + // #region standard inputs + + const isWrapped = input.closest('dd').parentElement.nodeName === 'DIV' + + // check for auto-grow attribute on textareas + if (input.getAttribute('data-auto-grow') !== null) { + // progressively enhance inputs into textareas + if (input.nodeName === 'INPUT' && input.type === 'text') { + const newInput = document.createElement('textarea') + newInput.id = input.id + newInput.class = input.class + newInput.innerText = input.value + newInput.setAttribute('data-auto-grow', '') + input.replaceWith(newInput) + input = newInput + } + + if (input.nodeName === 'TEXTAREA') { + // when pressing enter while this input is focused, we want to submit + input.addEventListener('keypress', (e) => { + if (e.key !== 'Enter' || (e.key === 'Enter' && e.shiftKey)) return + e.preventDefault() + form.requestSubmit() + }) + } + } + + if (type !== 'checkbox' && type !== 'radio') { + if (!input.getAttribute('placeholder')) input.setAttribute('placeholder', ' ') + + const div = document.createElement('div') + const dt = label.closest('dt') + const dd = input.closest('dd') + + if (!dt) { + console.error(`semantic-forms: Found an input (${input.id || input.getAttribute('name')}) that does not have a corresponding
element.`) + return + } + if (!dd) { + console.error(`semantic-forms: Found an input (${input.id || input.getAttribute('name')}) that does not have a corresponding
element.`) + return + } + + // #region input clear button + if (input.nodeName !== 'SELECT' && type !== 'range') { + const clearBtn = document.createElement('button') + clearBtn.type = 'button' + clearBtn.title = input.getAttribute('data-clear-field-text') || 'Clear field' + clearBtn.ariaLabel = input.getAttribute('data-clear-field-text') || 'Clear field' + clearBtn.tabIndex = -1 + clearBtn.innerHTML = '' + clearBtn.classList.add('clear') + clearBtn.id = `semanticFormsClearButton_${input.id}` + clearBtn.addEventListener('click', () => { + input.previousValue = input.value + input.value = '' + input.focus() + lastClearFieldPressed = input.id + + // used for any other updates required by various inputs + input.dispatchEvent(new Event('input', { bubbles: true })) + }) + insertAfter(clearBtn, dd.querySelector('label')) + } + input.addEventListener('focus', event => { + if (event.target.nodeName === 'INPUT') lastFocusedInput = event.target + }) + // #endregion + + // check for colspan- utility class + if (/colspan-/.test(dd.className)) { + const match = dd.className.match(/colspan-([0-9]|full)/)[0] + dd.classList.remove(match) + div.classList.add(match) + } + + // check for max-content attribute + // this may be removed once fully supported in Firefox and Safari: https://caniuse.com/wf-field-sizing + if (input.getAttribute('data-max-content') !== null) { + if (!('fieldSizing' in document.createElement('input').style)) { + const adjustWidth = () => { + const value = input.value !== '' ? input.value : input.placeholder + const width = value.length * 8 + 40 + input.style.width = width + 'px' + input.style.maxWidth = '100%' + div.style.width = width + 'px' + } + adjustWidth() + input.addEventListener('input', adjustWidth) + } + } + + if (!isWrapped) { + div.append(dt, dd) + dl.append(div) + } + + // determine visibility of newly created
+ if (dt.style.display === 'none' && dd.style.display === 'none') div.style.display = 'none' + } + // #endregion + + // handle file input clear btn, cannot be handled with CSS + if (type === 'file') { + const clearBtn = input.parentElement.querySelector('.clear') + input.addEventListener('input', event => { + clearBtn.style.display = event.target.files.length ? 'flex' : 'none' + }) + clearBtn.addEventListener('click', () => { + clearBtn.style.display = 'none' + }) + } + + // handle range inputs with a class to display the value + if (type === 'range' && input.classList.contains('displayValue')) { + const label = input.parentNode.parentNode.querySelector('dd label') + label.innerHTML += `: ${input.value}` + input.addEventListener('input', event => { + const output = event.target.parentNode.parentNode.querySelector('output') + output.innerHTML = event.target.value + }) + } + + // #region show password button + if (type === 'password' && input.getAttribute('data-no-reveal') === null) { + const showBtn = document.createElement('button') + showBtn.type = 'button' + showBtn.title = input.getAttribute('data-show-password-text') || 'Show password' + showBtn.ariaLabel = input.getAttribute('data-show-password-text') || 'Show password' + showBtn.tabIndex = -1 + showBtn.innerHTML = passwordShow + showBtn.classList.add('show') + showBtn.id = `semanticFormsShowButton_${input.id}` + const dd = input.closest('dd') + if (!dd) { + console.error(`semantic-forms: Found an input (${input.id || input.getAttribute('name')}) that is not inside a
element.`) + return + } + showBtn.addEventListener('click', () => { + if (input.type === 'password') { + showBtn.innerHTML = passwordHide + showBtn.title = input.getAttribute('data-hide-password-text') || 'Hide password' + showBtn.ariaLabel = input.getAttribute('data-hide-password-text') || 'Hide password' + input.type = 'text' + } else { + showBtn.innerHTML = passwordShow + showBtn.title = input.getAttribute('data-show-password-text') || 'Show password' + showBtn.ariaLabel = input.getAttribute('data-show-password-text') || 'Show password' + input.type = 'password' + } + input.focus() + }) + insertAfter(showBtn, dd.querySelector('label')) + } + // #endregion + + // add listener to shift clear button when scrollbar present + if (input.nodeName === 'TEXTAREA') { + if (input.getAttribute('data-disable-autosize') === null) { + // add auto-sizing + input.style.setProperty('resize', 'none') + input.style.setProperty('min-height', '0') + input.style.setProperty('max-height', 'none') + input.style.setProperty('height', 'auto') + + const handleInput = () => { + // reset rows attribute to get accurate scrollHeight + let maxRows = input.getAttribute('data-max-rows') + + if (maxRows) { + if (isNaN(maxRows) || Number(maxRows) <= 0) { + console.warn(`An invalid value was passed to the "data-max-rows" attribute. This value will be ignored.\n\nProvided value: ${input.getAttribute('data-max-rows')}`) + maxRows = null + } + } + + const minRows = input.getAttribute('data-max-rows') && Number(input.getAttribute('data-max-rows')) < 5 ? input.getAttribute('data-max-rows') : '5' + input.setAttribute('rows', minRows) + + // get the computed values object reference + const style = window.getComputedStyle(input) + + // force content-box for size accurate line-height calculation, remove scrollbars, lock width (subtract inline padding and inline border widths), and remove inline padding and borders to keep width consistent (for text wrapping accuracy) + const inlinePadding = parseFloat(style['padding-left']) + parseFloat(style['padding-right']) + const inlineBorderWidth = parseFloat(style['border-left-width']) + parseFloat(style['border-right-width']) + input.style.setProperty('overflow', 'hidden', 'important') + input.style.setProperty('width', (parseFloat(style.width) - inlinePadding - inlineBorderWidth) + 'px') + input.style.setProperty('box-sizing', 'content-box') + input.style.setProperty('padding-inline', '0') + input.style.setProperty('border-width', '0') + + // get the base line height, and top / bottom padding + const blockPadding = parseFloat(style['padding-top']) + parseFloat(style['padding-bottom']) + const lineHeight = style['line-height'] === 'normal' + ? parseFloat(style.height) // if line-height is not explicitly set, use the computed height value (ignore padding due to content-box) + : parseFloat(style['line-height']) // otherwise (line-height is explicitly set), use the computed line-height value + + // get the scroll height (rounding to be safe to ensure cross browser consistency) + const scrollHeight = Math.round(input.scrollHeight) + + // undo overflow, width, border-width, box-sizing & inline padding overrides + input.style.removeProperty('width') + input.style.removeProperty('box-sizing') + input.style.removeProperty('padding-inline') + input.style.removeProperty('border-width') + input.style.removeProperty('overflow') + + // subtract blockPadding from scrollHeight and divide that by our lineHeight to get the row count, round to nearest integer as it will always be within ~.1 of the correct whole number + const rows = Math.round((scrollHeight - blockPadding) / lineHeight) + + // set the calculated rows attribute (limited by rowLimit) + if (maxRows) { + input.setAttribute('rows', '' + Math.min(rows, Number(maxRows))) + } else { + input.setAttribute('rows', '' + rows) + } + } + + input.addEventListener('input', handleInput) + + // trigger the event to set the initial rows value + input.dispatchEvent(new Event('input', { bubbles: true })) + } + + // progressively enhance textarea for Firefox and Safari + // this may be removed once fully supported in Firefox and Safari: https://caniuse.com/wf-field-sizing + if (input.getAttribute('data-auto-grow') !== null) { + const adjustHeight = () => { + if (input.value.length) { + const borderWidth = parseInt(window.getComputedStyle(input).getPropertyValue('border-width')) + input.style.height = (input.scrollHeight + (borderWidth * 2)) + 'px' + } else { + input.style.height = window.getComputedStyle(form).getPropertyValue('--semanticFormsInputHeight') + } + } + + // set initial height to semantic-forms CSS variable + input.style.height = window.getComputedStyle(form).getPropertyValue('--semanticFormsInputHeight') + input.addEventListener('input', adjustHeight) + } + + // shifts the clear button to the right if a scrollbar is present + const shiftClearBtn = () => { + const clearBtn = input.parentElement?.querySelector('button.clear') + if (clearBtn) clearBtn.style.marginRight = input.clientHeight < input.scrollHeight ? '15px' : '' + } + input.addEventListener('input', shiftClearBtn) + input.addEventListener('mouseup', shiftClearBtn) + shiftClearBtn() + } + } +} + +module.exports = { enhanceInput } diff --git a/lib/keyboardShortcuts.js b/lib/keyboardShortcuts.js new file mode 100644 index 0000000..61815a6 --- /dev/null +++ b/lib/keyboardShortcuts.js @@ -0,0 +1,164 @@ +const { getOS, insertAfter } = require('./helpers.js') + +const specialCharMap = { + Minus: '-', + Equal: '=', + BracketLeft: '[', + BracketRight: ']', + Backslash: '\\', + Semicolon: ';', + Quote: '\'', + Comma: ',', + Period: '.', + Slash: '/', + Backquote: '`' +} +const shiftSpecialCharMap = { + 1: '!', + 2: '@', + 3: '#', + 4: '$', + 5: '%', + 6: '^', + 7: '&', + 8: '*', + 9: '(', + 0: ')', + Minus: '_', + Equal: '+', + BracketLeft: '{', + BracketRight: '}', + Backslash: '|', + Semicolon: ':', + Quote: '"', + Comma: '<', + Period: '>', + Slash: '?', + Backquote: '~' +} + +// handles keyboard shortcut events +const shortcutListener = (e, shortcuts) => { + // search for matching shortcut from cached shortcut configs + const shortcut = shortcuts.find(shortcut => { + let matchesKey = false + if (e.altKey && !e.shiftKey) { + // mac adjusts the key value if altKey is pressed + matchesKey = 'Key' + shortcut.key.toUpperCase() === e.code || + 'Digit' + shortcut.key.toUpperCase() === e.code || + shortcut.key === e.key || + specialCharMap[e.code] === shortcut.key + } else if (e.shiftKey) { + // check shift special character map + const code = e.code.replace(/Key|Digit/, '') + matchesKey = (shiftSpecialCharMap[code] || shiftSpecialCharMap[e.key]) && + (shiftSpecialCharMap[code] === shortcut.key || shiftSpecialCharMap[e.key] === shortcut.key) + } else { + matchesKey = shortcut.key.toUpperCase() === e.key.toUpperCase() + } + if (!matchesKey) return false + + let matchesModifier + if (shortcut.modifier) { + if (shortcut.modifier === shortcut.defaultModifier) matchesModifier = shortcut.os === 'windows' || shortcut.os === 'linux' ? e.ctrlKey : e.metaKey + if (shortcut.modifier === 'meta') matchesModifier = e.metaKey + if (shortcut.modifier === 'alt') matchesModifier = e.altKey + if (shortcut.modifier === 'ctrl') matchesModifier = e.ctrlKey + } + return matchesModifier + }) + + if (shortcut) { + e.preventDefault() + shortcut.input.focus() + } +} + +const createKeyboardShortcut = (input, shortcuts) => { + const os = getOS() + // this is the custom keyword for meta on linux/mac, ctrl on windows + const defaultModifier = 'metactrl' + + // get focus key value + let focusKey = input.getAttribute('data-focus-key') + if (focusKey.length > 1) { + console.error(`Provided focus key "${focusKey}" is more than one character. Using first character only.`) + focusKey = focusKey.toString()[0] + } + + // get focus modifier value + let modifierSymbol + let modifierKey = defaultModifier + const modifierAttr = { + default: input.getAttribute('data-focus-modifier') || defaultModifier, + linux: input.getAttribute('data-focus-modifier-linux'), + mac: input.getAttribute('data-focus-modifier-mac'), + windows: input.getAttribute('data-focus-modifier-win') + } + if (os && modifierAttr[os]) { + // a specific modifier key has been set by the user + modifierKey = modifierAttr[os] + } else { + modifierKey = modifierAttr.default + } + + // validate passed in modifier + const recognizedModifiers = ['ctrl', 'alt', 'opt', 'meta', 'cmd', defaultModifier] + if (!recognizedModifiers.includes(modifierKey)) { + console.error(`Received an unrecognized modifier, "${modifierKey}," defaulting to "${defaultModifier}."`, input) + modifierKey = defaultModifier + } + + // retrieve modifier symbol + if (['alt', 'opt'].includes(modifierKey)) { + modifierSymbol = os === 'mac' ? '⌥' : '⎇' + } else if (['meta', 'win', 'cmd'].includes(modifierKey) || (modifierKey === defaultModifier && os === 'mac')) { + if (os === 'mac') { + modifierSymbol = '⌘' + } else if (os === 'linux') { + modifierSymbol = '◆' + } else { + modifierSymbol = '⊞' + } + } else if (modifierKey === 'ctrl' || (modifierKey === defaultModifier && (os === 'windows' || os === 'linux'))) { + if (os === 'mac') { + modifierSymbol = '⌃' + } else { + modifierSymbol = 'Ctrl' + } + } + + // add the shortcut to the cached array, if not a duplicate + if (shortcuts.some(shortcut => shortcut.key === focusKey && shortcut.modifier === modifierKey)) { + console.error(`Duplicate keyboard shortcut "${modifierKey} + ${focusKey}" detected. Only the first input will be focusable using this keyboard shortcut.`, input) + } + + // set the shortcut indicator/title + if (input.nodeName === 'TEXTAREA' || input.type === 'text' || input.type === 'number') { + // create focus indicator for valid inputs + const indicator = document.createElement('span') + indicator.classList.add('focus-key') + indicator.innerHTML = `${modifierSymbol} ${focusKey.toUpperCase()}` + insertAfter(indicator, newLabel) + } else { + // update the input title + if (input.getAttribute('title')) { + input.setAttribute('title', input.getAttribute('title') + ` (${modifierSymbol} + ${focusKey})`) + } else { + input.setAttribute('title', `Focus with ${modifierSymbol} + ${focusKey}`) + } + } + + return { + key: focusKey, + modifier: modifierKey, + input, + os, + defaultModifier + } +} + +module.exports = { + shortcutListener, + createKeyboardShortcut +} diff --git a/semanticForms.js b/semanticForms.js index d755dd3..c7d595a 100644 --- a/semanticForms.js +++ b/semanticForms.js @@ -1,3 +1,6 @@ +const { shortcutListener, createKeyboardShortcut } = require('./lib/keyboardShortcuts.js') +const { enhanceInput } = require('./lib/inputEnhancements.js') + const semanticForms = () => { // do some feature detection so none of the JS executes if the browser is too old if (typeof document.getElementsByClassName !== 'function' || typeof document.querySelector !== 'function' || !document.body.classList || !window.MutationObserver) { @@ -5,87 +8,9 @@ const semanticForms = () => { return } - const passwordShow = '' - const passwordHide = '' - const helpTextIcon = '' - - const nodeNameLookup = ['TEXTAREA', 'SELECT'] - const inputTypeLookup = ['checkbox', 'color', 'date', 'datetime-local', 'email', 'file', 'image', 'month', 'number', 'password', 'radio', 'range', 'search', 'tel', 'text', 'time', 'url', 'week'] - const keyboardShortcuts = [] - // custom keyboard shortcut listener - document.addEventListener('keydown', (e) => { - const specialCharMap = { - Minus: '-', - Equal: '=', - BracketLeft: '[', - BracketRight: ']', - Backslash: '\\', - Semicolon: ';', - Quote: '\'', - Comma: ',', - Period: '.', - Slash: '/', - Backquote: '`' - } - - const shiftSpecialCharMap = { - 1: '!', - 2: '@', - 3: '#', - 4: '$', - 5: '%', - 6: '^', - 7: '&', - 8: '*', - 9: '(', - 0: ')', - Minus: '_', - Equal: '+', - BracketLeft: '{', - BracketRight: '}', - Backslash: '|', - Semicolon: ':', - Quote: '"', - Comma: '<', - Period: '>', - Slash: '?', - Backquote: '~' - } - - const shortcut = keyboardShortcuts.find(shortcut => { - let matchesKey = false - if (e.altKey && !e.shiftKey) { - // mac adjusts the key value if altKey is pressed - matchesKey = 'Key' + shortcut.key.toUpperCase() === e.code || - 'Digit' + shortcut.key.toUpperCase() === e.code || - shortcut.key === e.key || - specialCharMap[e.code] === shortcut.key - } else if (e.shiftKey) { - // check shift special character map - const code = e.code.replace(/Key|Digit/, '') - matchesKey = (shiftSpecialCharMap[code] || shiftSpecialCharMap[e.key]) && - (shiftSpecialCharMap[code] === shortcut.key || shiftSpecialCharMap[e.key] === shortcut.key) - } else { - matchesKey = shortcut.key.toUpperCase() === e.key.toUpperCase() - } - if (!matchesKey) return false - - let matchesModifier - if (shortcut.modifier) { - if (shortcut.modifier === shortcut.defaultModifier) matchesModifier = shortcut.os === 'windows' || shortcut.os === 'linux' ? e.ctrlKey : e.metaKey - if (shortcut.modifier === 'meta') matchesModifier = e.metaKey - if (shortcut.modifier === 'alt') matchesModifier = e.altKey - if (shortcut.modifier === 'ctrl') matchesModifier = e.ctrlKey - } - return matchesModifier - }) - - if (shortcut) { - e.preventDefault() - shortcut.input.focus() - } - }) + const keyboardShortcuts = [] + document.addEventListener('keydown', (e) => shortcutListener(e, keyboardShortcuts)) // progressively enhance form elements that have the semanticForms class const forms = document.querySelectorAll('form.semanticForms:not(.semanticFormsActive), table.semanticForms:not(.semanticFormsActive)') @@ -96,473 +21,17 @@ const semanticForms = () => { // update each input in the semantic form const inputs = Array.from(form.querySelectorAll('input, textarea, select')) - for (let input of inputs) { - // ignore input if it has previously been formatted - if (input.classList.contains('semanticform') || !input.id) continue - - const type = input.getAttribute('type') - if (nodeNameLookup.includes(input.nodeName) || inputTypeLookup.includes(type)) { - // recursively find
element - let dl = input.parentNode - while (dl && dl.nodeName !== 'DL') dl = dl.parentNode - - if (!dl) continue - if (!dl.classList.contains('floatLabelForm')) dl.classList.add('floatLabelForm') - - const label = input.parentNode.parentNode.id && (type === 'checkbox' || type === 'radio') - ? document.querySelector('label[data-for=' + input.parentNode.parentNode.id.replace(/\./g, '\\.') + ']') - : document.querySelector('label[for=' + input.id.replace(/\./g, '\\.') + ']') - - if (!label) { - console.error(`semantic-forms: Found an input (${input.id || input.getAttribute('name')}) without a properly associated label. Make sure there is a label for it and the label has a matching "for" attribute.`) - } - - input.classList.add('semanticform') - - // #region create labels - - const newLabel = document.createElement('label') - newLabel.className = 'floatLabelFormAnimatedLabel' - - if (type === 'checkbox' || type === 'radio') { - // recursively find
element - let dd = input.parentNode - while (dd && dd.nodeName !== 'DD') dd = dd.parentNode - - if (!dd) { - console.error(`semantic-forms: Found an input (${input.id || input.getAttribute('name')}) that is not inside a
element.`) - continue - } - - if (dd.firstChild.nodeName !== 'LABEL') { - if (type === 'checkbox' && input.parentNode.nodeName === 'DD') { - newLabel.setAttribute('for', input.id) - input.parentNode.classList.add('singleCheckbox') - newLabel.className = '' - label.setAttribute('hidden', 'hidden') - insertAfter(newLabel, input) - } - - if (type === 'radio' && input.parentNode.nodeName === 'DD') { - newLabel.setAttribute('for', input.id) - input.parentNode.classList.add('singleRadio') - newLabel.className = '' - label.setAttribute('hidden', 'hidden') - insertAfter(newLabel, input) - } - - newLabel.innerHTML = label.innerHTML - - if (label.hasAttribute('title') && label.getAttribute('data-show-help-icon') !== null && !label.querySelector('span.help')) { - const text = label.getAttribute('title') - label.innerHTML += ` ${helpTextIcon}` - newLabel.innerHTML += ` ${helpTextIcon}` - } - - if (dd.querySelector(':required') && label.getAttribute('data-no-asterisk') === null && !label.querySelector('span.required')) { - const text = label.getAttribute('data-asterisk-text') || 'This field is required.' - label.innerHTML += ` *` - newLabel.innerHTML += ` *` - } - - if (!dd.querySelector('label')) dd.append(newLabel) - } - - // removes old div that a radio or checkbox may have been added to - if (dd.parentElement.nodeName === 'DIV') dd.parentElement.remove() - - const div = document.createElement('div') - div.append(label.closest('dt'), dd) - dl.append(div) - } else { - newLabel.setAttribute('for', input.id) - newLabel.innerHTML = label.innerHTML - - if (input.hasAttribute('title') && label.getAttribute('data-show-help-icon') !== null && !label.querySelector('span.help')) { - const text = input.getAttribute('title') - newLabel.innerHTML += ` ${helpTextIcon}` - } - - if (input.hasAttribute('required') && label.getAttribute('data-no-asterisk') === null && !label.querySelector('span.required')) { - const text = label.getAttribute('data-asterisk-text') || 'This field is required.' - newLabel.innerHTML += ` *` - } - - label.setAttribute('hidden', 'hidden') - - insertAfter(newLabel, input) - } - // #endregion - - // #region keyboard shortcuts - if (input.getAttribute('data-focus-key') !== null) { - function handleKeyboardShortcut () { - const os = getOS() - // this is the custom keyword for meta on linux/mac, ctrl on windows - const defaultModifier = 'metactrl' - - // get focus key value - let focusKey = input.getAttribute('data-focus-key') - if (focusKey.length > 1) { - console.error(`Provided focus key "${focusKey}" is more than one character. Using first character only.`) - focusKey = focusKey.toString()[0] - } - - // get focus modifier value - let modifierSymbol - let modifierKey = defaultModifier - const modifierAttr = { - default: input.getAttribute('data-focus-modifier') || defaultModifier, - linux: input.getAttribute('data-focus-modifier-linux'), - mac: input.getAttribute('data-focus-modifier-mac'), - windows: input.getAttribute('data-focus-modifier-win') - } - if (os && modifierAttr[os]) { - // a specific modifier key has been set by the user - modifierKey = modifierAttr[os] - } else { - modifierKey = modifierAttr.default - } - - // validate passed in modifier - const recognizedModifiers = ['ctrl', 'alt', 'opt', 'meta', 'cmd', defaultModifier] - if (!recognizedModifiers.includes(modifierKey)) { - console.error(`Received an unrecognized modifier, "${modifierKey}," defaulting to "${defaultModifier}."`, input) - modifierKey = defaultModifier - } - - // retrieve modifier symbol - if (['alt', 'opt'].includes(modifierKey)) { - modifierSymbol = os === 'mac' ? '⌥' : '⎇' - } else if (['meta', 'win', 'cmd'].includes(modifierKey) || (modifierKey === defaultModifier && os === 'mac')) { - if (os === 'mac') { - modifierSymbol = '⌘' - } else if (os === 'linux') { - modifierSymbol = '◆' - } else { - modifierSymbol = '⊞' - } - } else if (modifierKey === 'ctrl' || (modifierKey === defaultModifier && (os === 'windows' || os === 'linux'))) { - if (os === 'mac') { - modifierSymbol = '⌃' - } else { - modifierSymbol = 'Ctrl' - } - } - - // add the shortcut to the cached array, if not a duplicate - if (keyboardShortcuts.some(shortcut => shortcut.key === focusKey && shortcut.modifier === modifierKey)) { - console.error(`Duplicate keyboard shortcut "${modifierKey} + ${focusKey}" detected. Only the first input will be focusable using this keyboard shortcut.`, input) - } else { - keyboardShortcuts.push({ - key: focusKey, - modifier: modifierKey, - input, - os, - defaultModifier - }) - } - - // set the shortcut indicator/title - if (input.nodeName === 'TEXTAREA' || input.type === 'text' || input.type === 'number') { - // create focus indicator for valid inputs - const indicator = document.createElement('span') - indicator.classList.add('focus-key') - indicator.innerHTML = `${modifierSymbol} ${focusKey.toUpperCase()}` - insertAfter(indicator, newLabel) - } else { - // update the input title - if (input.getAttribute('title')) { - input.setAttribute('title', input.getAttribute('title') + ` (${modifierSymbol} + ${focusKey})`) - } else { - input.setAttribute('title', `Focus with ${modifierSymbol} + ${focusKey}`) - } - } - } - - // placed in a function so that it may exit while still completing other semantic-form enhancements - handleKeyboardShortcut() - } - // #endregion + for (const input of inputs) { + enhanceInput(input) - // #region standard inputs - // check for auto-grow attribute on textareas - if (input.getAttribute('data-auto-grow') !== null) { - // progressively enhance inputs into textareas - if (input.nodeName === 'INPUT' && input.type === 'text') { - const newInput = document.createElement('textarea') - newInput.id = input.id - newInput.class = input.class - newInput.innerText = input.value - newInput.setAttribute('data-auto-grow', '') - input.replaceWith(newInput) - input = newInput - } - - if (input.nodeName === 'TEXTAREA') { - // when pressing enter while this input is focused, we want to submit - input.addEventListener('keypress', (e) => { - if (e.key !== 'Enter' || (e.key === 'Enter' && e.shiftKey)) return - e.preventDefault() - form.requestSubmit() - }) - } - } - - if (type !== 'checkbox' && type !== 'radio') { - if (!input.getAttribute('placeholder')) input.setAttribute('placeholder', ' ') - - const div = document.createElement('div') - const dt = label.closest('dt') - const dd = input.closest('dd') - - if (!dt) { - console.error(`semantic-forms: Found an input (${input.id || input.getAttribute('name')}) that does not have a corresponding
element.`) - continue - } - if (!dd) { - console.error(`semantic-forms: Found an input (${input.id || input.getAttribute('name')}) that does not have a corresponding
element.`) - continue - } - - // #region input clear button - if (input.nodeName !== 'SELECT' && type !== 'range') { - const clearBtn = document.createElement('button') - clearBtn.type = 'button' - clearBtn.title = input.getAttribute('data-clear-field-text') || 'Clear field' - clearBtn.ariaLabel = input.getAttribute('data-clear-field-text') || 'Clear field' - clearBtn.tabIndex = -1 - clearBtn.innerHTML = '' - clearBtn.classList.add('clear') - clearBtn.id = `semanticFormsClearButton_${input.id}` - clearBtn.addEventListener('click', () => { - input.previousValue = input.value - input.value = '' - input.focus() - lastClearFieldPressed = input.id - - // used for any other updates required by various inputs - input.dispatchEvent(new Event('input', { bubbles: true })) - }) - insertAfter(clearBtn, dd.querySelector('label')) - } - input.addEventListener('focus', event => { - if (event.target.nodeName === 'INPUT') lastFocusedInput = event.target - }) - // #endregion - - // check for colspan- utility class - if (/colspan-/.test(dd.className)) { - const match = dd.className.match(/colspan-([0-9]|full)/)[0] - dd.classList.remove(match) - div.classList.add(match) - } - - // check for max-content attribute - // this may be removed once fully supported in Firefox and Safari: https://caniuse.com/wf-field-sizing - if (input.getAttribute('data-max-content') !== null) { - if (!('fieldSizing' in document.createElement('input').style)) { - const adjustWidth = () => { - const value = input.value !== '' ? input.value : input.placeholder - const width = value.length * 8 + 40 - input.style.width = width + 'px' - input.style.maxWidth = '100%' - div.style.width = width + 'px' - } - adjustWidth() - input.addEventListener('input', adjustWidth) - } - } - - div.append(dt, dd) - dl.append(div) - - // determine visibility of newly created
- if (dt.style.display === 'none' && dd.style.display === 'none') div.style.display = 'none' - } - // #endregion - - // handle file input clear btn, cannot be handled with CSS - if (type === 'file') { - const clearBtn = input.parentElement.querySelector('.clear') - input.addEventListener('input', event => { - clearBtn.style.display = event.target.files.length ? 'flex' : 'none' - }) - clearBtn.addEventListener('click', () => { - clearBtn.style.display = 'none' - }) - } - - // handle range inputs with a class to display the value - if (type === 'range' && input.classList.contains('displayValue')) { - const label = input.parentNode.parentNode.querySelector('dd label') - label.innerHTML += `: ${input.value}` - input.addEventListener('input', event => { - const output = event.target.parentNode.parentNode.querySelector('output') - output.innerHTML = event.target.value - }) - } - - // #region show password button - if (type === 'password' && input.getAttribute('data-no-reveal') === null) { - const showBtn = document.createElement('button') - showBtn.type = 'button' - showBtn.title = input.getAttribute('data-show-password-text') || 'Show password' - showBtn.ariaLabel = input.getAttribute('data-show-password-text') || 'Show password' - showBtn.tabIndex = -1 - showBtn.innerHTML = passwordShow - showBtn.classList.add('show') - showBtn.id = `semanticFormsShowButton_${input.id}` - const dd = input.closest('dd') - if (!dd) { - console.error(`semantic-forms: Found an input (${input.id || input.getAttribute('name')}) that is not inside a
element.`) - continue - } - showBtn.addEventListener('click', () => { - if (input.type === 'password') { - showBtn.innerHTML = passwordHide - showBtn.title = input.getAttribute('data-hide-password-text') || 'Hide password' - showBtn.ariaLabel = input.getAttribute('data-hide-password-text') || 'Hide password' - input.type = 'text' - } else { - showBtn.innerHTML = passwordShow - showBtn.title = input.getAttribute('data-show-password-text') || 'Show password' - showBtn.ariaLabel = input.getAttribute('data-show-password-text') || 'Show password' - input.type = 'password' - } - input.focus() - }) - insertAfter(showBtn, dd.querySelector('label')) - } - // #endregion - - // add listener to shift clear button when scrollbar present - if (input.nodeName === 'TEXTAREA') { - if (input.getAttribute('data-disable-autosize') === null) { - // add auto-sizing - input.style.setProperty('resize', 'none') - input.style.setProperty('min-height', '0') - input.style.setProperty('max-height', 'none') - input.style.setProperty('height', 'auto') - - const handleInput = () => { - // reset rows attribute to get accurate scrollHeight - let maxRows = input.getAttribute('data-max-rows') - - if (maxRows) { - if (isNaN(maxRows) || Number(maxRows) <= 0) { - console.warn(`An invalid value was passed to the "data-max-rows" attribute. This value will be ignored.\n\nProvided value: ${input.getAttribute('data-max-rows')}`) - maxRows = null - } - } - - const minRows = input.getAttribute('data-max-rows') && Number(input.getAttribute('data-max-rows')) < 5 ? input.getAttribute('data-max-rows') : '5' - input.setAttribute('rows', minRows) - - // get the computed values object reference - const style = window.getComputedStyle(input) - - // force content-box for size accurate line-height calculation, remove scrollbars, lock width (subtract inline padding and inline border widths), and remove inline padding and borders to keep width consistent (for text wrapping accuracy) - const inlinePadding = parseFloat(style['padding-left']) + parseFloat(style['padding-right']) - const inlineBorderWidth = parseFloat(style['border-left-width']) + parseFloat(style['border-right-width']) - input.style.setProperty('overflow', 'hidden', 'important') - input.style.setProperty('width', (parseFloat(style.width) - inlinePadding - inlineBorderWidth) + 'px') - input.style.setProperty('box-sizing', 'content-box') - input.style.setProperty('padding-inline', '0') - input.style.setProperty('border-width', '0') - - // get the base line height, and top / bottom padding - const blockPadding = parseFloat(style['padding-top']) + parseFloat(style['padding-bottom']) - const lineHeight = style['line-height'] === 'normal' - ? parseFloat(style.height) // if line-height is not explicitly set, use the computed height value (ignore padding due to content-box) - : parseFloat(style['line-height']) // otherwise (line-height is explicitly set), use the computed line-height value - - // get the scroll height (rounding to be safe to ensure cross browser consistency) - const scrollHeight = Math.round(input.scrollHeight) - - // undo overflow, width, border-width, box-sizing & inline padding overrides - input.style.removeProperty('width') - input.style.removeProperty('box-sizing') - input.style.removeProperty('padding-inline') - input.style.removeProperty('border-width') - input.style.removeProperty('overflow') - - // subtract blockPadding from scrollHeight and divide that by our lineHeight to get the row count, round to nearest integer as it will always be within ~.1 of the correct whole number - const rows = Math.round((scrollHeight - blockPadding) / lineHeight) - - // set the calculated rows attribute (limited by rowLimit) - if (maxRows) { - input.setAttribute('rows', '' + Math.min(rows, Number(maxRows))) - } else { - input.setAttribute('rows', '' + rows) - } - } - - input.addEventListener('input', handleInput) - - // trigger the event to set the initial rows value - input.dispatchEvent(new Event('input', { bubbles: true })) - } - - // progressively enhance textarea for Firefox and Safari - // this may be removed once fully supported in Firefox and Safari: https://caniuse.com/wf-field-sizing - if (input.getAttribute('data-auto-grow') !== null) { - const adjustHeight = () => { - if (input.value.length) { - const borderWidth = parseInt(window.getComputedStyle(input).getPropertyValue('border-width')) - input.style.height = (input.scrollHeight + (borderWidth * 2)) + 'px' - } else { - input.style.height = window.getComputedStyle(form).getPropertyValue('--semanticFormsInputHeight') - } - } - - // set initial height to semantic-forms CSS variable - input.style.height = window.getComputedStyle(form).getPropertyValue('--semanticFormsInputHeight') - input.addEventListener('input', adjustHeight) - } - - // shifts the clear button to the right if a scrollbar is present - const shiftClearBtn = () => { - const clearBtn = input.parentElement?.querySelector('button.clear') - if (clearBtn) clearBtn.style.marginRight = input.clientHeight < input.scrollHeight ? '15px' : '' - } - input.addEventListener('input', shiftClearBtn) - input.addEventListener('mouseup', shiftClearBtn) - shiftClearBtn() - } + // handle keyboard shortcuts + if (input.getAttribute('data-focus-key') !== null) { + const shortcut = createKeyboardShortcut(input, keyboardShortcuts) + keyboardShortcuts.push(shortcut) } } } - /** - * Places an element immediately after another element - * @param {Object} newNode element being placed after the reference node - * @param {*} referenceNode element to be used as reference for new node - */ - function insertAfter (newNode, referenceNode) { - if (referenceNode.nextSibling) referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling) - else referenceNode.parentNode.appendChild(newNode) - } - - /** - * Uses the navigator to best determine the clients operating system. - * @returns Operating system string (`mac`, `windows`, `linux`) - */ - function getOS () { - const userAgent = window.navigator.userAgent - const platform = window.navigator.platform - let os = null - - if (platform.includes('Win')) { - os = 'windows' - } else if (platform.includes('Mac') || /iPhone|iPad|iPod/.test(userAgent)) { - os = 'mac' - } else if (platform.includes('Linux') || /Android/.test(userAgent)) { - os = 'linux' - } - return os - } - // handle undo/redo let lastFocusedInput let lastClearFieldPressed From 7fa09a05c711ae9f842c3ea6cb753fd3dea6088b Mon Sep 17 00:00:00 2001 From: Alex Widener Date: Fri, 7 Nov 2025 11:35:23 -0500 Subject: [PATCH 02/21] update colspan classes in fulldemo --- dist/semantic-forms.css | 912 ------------------------------- dist/semantic-forms.js | 7 +- docs/statics/pages/fullDemo.html | 88 +-- semanticForms.scss | 741 +++++++++++++------------ 4 files changed, 419 insertions(+), 1329 deletions(-) diff --git a/dist/semantic-forms.css b/dist/semantic-forms.css index 3c6b9ae..3290eab 100644 --- a/dist/semantic-forms.css +++ b/dist/semantic-forms.css @@ -2131,7 +2131,6 @@ table.semanticForms.lowFlow dl, table.semanticForms:not(.semanticFormsActive) dl, table.semanticForms.light.lowFlow dl, table.semanticForms.light:not(.semanticFormsActive) dl { - grid-auto-flow: dense; gap: 0 10px; margin-bottom: 0px; } @@ -2481,915 +2480,4 @@ table.semanticForms menu:has(li > input, li > label, li > button, li > select, l width: max-content; } -form.semanticForms, -fieldset { - container: semanticForm/inline-size; -} -@container semanticForm (width >= 1810px) { - form.semanticForms fieldset dl, form.semanticForms dl, - fieldset fieldset dl, - fieldset dl { - grid-template-columns: repeat(7, minmax(var(--semanticFormsInputMinWidth), 1fr)); - } - form.semanticForms fieldset dl:has(:not(div)) dt:nth-of-type(7n + 1), form.semanticForms fieldset dl:has(:not(div)) dd:nth-of-type(7n + 1), form.semanticForms dl:has(:not(div)) dt:nth-of-type(7n + 1), form.semanticForms dl:has(:not(div)) dd:nth-of-type(7n + 1), - fieldset fieldset dl:has(:not(div)) dt:nth-of-type(7n + 1), - fieldset fieldset dl:has(:not(div)) dd:nth-of-type(7n + 1), - fieldset dl:has(:not(div)) dt:nth-of-type(7n + 1), - fieldset dl:has(:not(div)) dd:nth-of-type(7n + 1) { - grid-column: 1; - } - form.semanticForms fieldset dl:has(:not(div)) dt:nth-of-type(7n + 2), form.semanticForms fieldset dl:has(:not(div)) dd:nth-of-type(7n + 2), form.semanticForms dl:has(:not(div)) dt:nth-of-type(7n + 2), form.semanticForms dl:has(:not(div)) dd:nth-of-type(7n + 2), - fieldset fieldset dl:has(:not(div)) dt:nth-of-type(7n + 2), - fieldset fieldset dl:has(:not(div)) dd:nth-of-type(7n + 2), - fieldset dl:has(:not(div)) dt:nth-of-type(7n + 2), - fieldset dl:has(:not(div)) dd:nth-of-type(7n + 2) { - grid-column: 2; - } - form.semanticForms fieldset dl:has(:not(div)) dt:nth-of-type(7n + 3), form.semanticForms fieldset dl:has(:not(div)) dd:nth-of-type(7n + 3), form.semanticForms dl:has(:not(div)) dt:nth-of-type(7n + 3), form.semanticForms dl:has(:not(div)) dd:nth-of-type(7n + 3), - fieldset fieldset dl:has(:not(div)) dt:nth-of-type(7n + 3), - fieldset fieldset dl:has(:not(div)) dd:nth-of-type(7n + 3), - fieldset dl:has(:not(div)) dt:nth-of-type(7n + 3), - fieldset dl:has(:not(div)) dd:nth-of-type(7n + 3) { - grid-column: 3; - } - form.semanticForms fieldset dl:has(:not(div)) dt:nth-of-type(7n + 4), form.semanticForms fieldset dl:has(:not(div)) dd:nth-of-type(7n + 4), form.semanticForms dl:has(:not(div)) dt:nth-of-type(7n + 4), form.semanticForms dl:has(:not(div)) dd:nth-of-type(7n + 4), - fieldset fieldset dl:has(:not(div)) dt:nth-of-type(7n + 4), - fieldset fieldset dl:has(:not(div)) dd:nth-of-type(7n + 4), - fieldset dl:has(:not(div)) dt:nth-of-type(7n + 4), - fieldset dl:has(:not(div)) dd:nth-of-type(7n + 4) { - grid-column: 4; - } - form.semanticForms fieldset dl:has(:not(div)) dt:nth-of-type(7n + 5), form.semanticForms fieldset dl:has(:not(div)) dd:nth-of-type(7n + 5), form.semanticForms dl:has(:not(div)) dt:nth-of-type(7n + 5), form.semanticForms dl:has(:not(div)) dd:nth-of-type(7n + 5), - fieldset fieldset dl:has(:not(div)) dt:nth-of-type(7n + 5), - fieldset fieldset dl:has(:not(div)) dd:nth-of-type(7n + 5), - fieldset dl:has(:not(div)) dt:nth-of-type(7n + 5), - fieldset dl:has(:not(div)) dd:nth-of-type(7n + 5) { - grid-column: 5; - } - form.semanticForms fieldset dl:has(:not(div)) dt:nth-of-type(7n + 6), form.semanticForms fieldset dl:has(:not(div)) dd:nth-of-type(7n + 6), form.semanticForms dl:has(:not(div)) dt:nth-of-type(7n + 6), form.semanticForms dl:has(:not(div)) dd:nth-of-type(7n + 6), - fieldset fieldset dl:has(:not(div)) dt:nth-of-type(7n + 6), - fieldset fieldset dl:has(:not(div)) dd:nth-of-type(7n + 6), - fieldset dl:has(:not(div)) dt:nth-of-type(7n + 6), - fieldset dl:has(:not(div)) dd:nth-of-type(7n + 6) { - grid-column: 6; - } - form.semanticForms fieldset dl:has(:not(div)) dt:nth-of-type(7n + 7), form.semanticForms fieldset dl:has(:not(div)) dd:nth-of-type(7n + 7), form.semanticForms dl:has(:not(div)) dt:nth-of-type(7n + 7), form.semanticForms dl:has(:not(div)) dd:nth-of-type(7n + 7), - fieldset fieldset dl:has(:not(div)) dt:nth-of-type(7n + 7), - fieldset fieldset dl:has(:not(div)) dd:nth-of-type(7n + 7), - fieldset dl:has(:not(div)) dt:nth-of-type(7n + 7), - fieldset dl:has(:not(div)) dd:nth-of-type(7n + 7) { - grid-column: 7; - } - form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms fieldset dl:has(:not(div)) dd.colspan-5, form.semanticForms fieldset dl:has(:not(div)) dd.colspan-full, form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms dl:has(:not(div)) dd.colspan-5, form.semanticForms dl:has(:not(div)) dd.colspan-full, - fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-5), - fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-full), - fieldset fieldset dl:has(:not(div)) dd.colspan-5, - fieldset fieldset dl:has(:not(div)) dd.colspan-full, - fieldset dl:has(:not(div)) dt:has(+ dd.colspan-5), - fieldset dl:has(:not(div)) dt:has(+ dd.colspan-full), - fieldset dl:has(:not(div)) dd.colspan-5, - fieldset dl:has(:not(div)) dd.colspan-full { - grid-column: span 5; - } - form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms fieldset dl:has(:not(div)) dd.colspan-4, form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms dl:has(:not(div)) dd.colspan-4, - fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-4), - fieldset fieldset dl:has(:not(div)) dd.colspan-4, - fieldset dl:has(:not(div)) dt:has(+ dd.colspan-4), - fieldset dl:has(:not(div)) dd.colspan-4 { - grid-column: span 4; - } - form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms fieldset dl:has(:not(div)) dd.colspan-3, form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms dl:has(:not(div)) dd.colspan-3, - fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-3), - fieldset fieldset dl:has(:not(div)) dd.colspan-3, - fieldset dl:has(:not(div)) dt:has(+ dd.colspan-3), - fieldset dl:has(:not(div)) dd.colspan-3 { - grid-column: span 3; - } - form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms fieldset dl:has(:not(div)) dd.colspan-2, form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms dl:has(:not(div)) dd.colspan-2, - fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-2), - fieldset fieldset dl:has(:not(div)) dd.colspan-2, - fieldset dl:has(:not(div)) dt:has(+ dd.colspan-2), - fieldset dl:has(:not(div)) dd.colspan-2 { - grid-column: span 2; - } -} -@container semanticForm (width >= 1550px) and (width < 1810px) { - form.semanticForms fieldset dl, form.semanticForms dl, - fieldset fieldset dl, - fieldset dl { - grid-template-columns: repeat(6, minmax(var(--semanticFormsInputMinWidth), 1fr)); - } - form.semanticForms fieldset dl:has(:not(div)) dt:nth-of-type(6n + 1), form.semanticForms fieldset dl:has(:not(div)) dd:nth-of-type(6n + 1), form.semanticForms dl:has(:not(div)) dt:nth-of-type(6n + 1), form.semanticForms dl:has(:not(div)) dd:nth-of-type(6n + 1), - fieldset fieldset dl:has(:not(div)) dt:nth-of-type(6n + 1), - fieldset fieldset dl:has(:not(div)) dd:nth-of-type(6n + 1), - fieldset dl:has(:not(div)) dt:nth-of-type(6n + 1), - fieldset dl:has(:not(div)) dd:nth-of-type(6n + 1) { - grid-column: 1; - } - form.semanticForms fieldset dl:has(:not(div)) dt:nth-of-type(6n + 2), form.semanticForms fieldset dl:has(:not(div)) dd:nth-of-type(6n + 2), form.semanticForms dl:has(:not(div)) dt:nth-of-type(6n + 2), form.semanticForms dl:has(:not(div)) dd:nth-of-type(6n + 2), - fieldset fieldset dl:has(:not(div)) dt:nth-of-type(6n + 2), - fieldset fieldset dl:has(:not(div)) dd:nth-of-type(6n + 2), - fieldset dl:has(:not(div)) dt:nth-of-type(6n + 2), - fieldset dl:has(:not(div)) dd:nth-of-type(6n + 2) { - grid-column: 2; - } - form.semanticForms fieldset dl:has(:not(div)) dt:nth-of-type(6n + 3), form.semanticForms fieldset dl:has(:not(div)) dd:nth-of-type(6n + 3), form.semanticForms dl:has(:not(div)) dt:nth-of-type(6n + 3), form.semanticForms dl:has(:not(div)) dd:nth-of-type(6n + 3), - fieldset fieldset dl:has(:not(div)) dt:nth-of-type(6n + 3), - fieldset fieldset dl:has(:not(div)) dd:nth-of-type(6n + 3), - fieldset dl:has(:not(div)) dt:nth-of-type(6n + 3), - fieldset dl:has(:not(div)) dd:nth-of-type(6n + 3) { - grid-column: 3; - } - form.semanticForms fieldset dl:has(:not(div)) dt:nth-of-type(6n + 4), form.semanticForms fieldset dl:has(:not(div)) dd:nth-of-type(6n + 4), form.semanticForms dl:has(:not(div)) dt:nth-of-type(6n + 4), form.semanticForms dl:has(:not(div)) dd:nth-of-type(6n + 4), - fieldset fieldset dl:has(:not(div)) dt:nth-of-type(6n + 4), - fieldset fieldset dl:has(:not(div)) dd:nth-of-type(6n + 4), - fieldset dl:has(:not(div)) dt:nth-of-type(6n + 4), - fieldset dl:has(:not(div)) dd:nth-of-type(6n + 4) { - grid-column: 4; - } - form.semanticForms fieldset dl:has(:not(div)) dt:nth-of-type(6n + 5), form.semanticForms fieldset dl:has(:not(div)) dd:nth-of-type(6n + 5), form.semanticForms dl:has(:not(div)) dt:nth-of-type(6n + 5), form.semanticForms dl:has(:not(div)) dd:nth-of-type(6n + 5), - fieldset fieldset dl:has(:not(div)) dt:nth-of-type(6n + 5), - fieldset fieldset dl:has(:not(div)) dd:nth-of-type(6n + 5), - fieldset dl:has(:not(div)) dt:nth-of-type(6n + 5), - fieldset dl:has(:not(div)) dd:nth-of-type(6n + 5) { - grid-column: 5; - } - form.semanticForms fieldset dl:has(:not(div)) dt:nth-of-type(6n + 6), form.semanticForms fieldset dl:has(:not(div)) dd:nth-of-type(6n + 6), form.semanticForms dl:has(:not(div)) dt:nth-of-type(6n + 6), form.semanticForms dl:has(:not(div)) dd:nth-of-type(6n + 6), - fieldset fieldset dl:has(:not(div)) dt:nth-of-type(6n + 6), - fieldset fieldset dl:has(:not(div)) dd:nth-of-type(6n + 6), - fieldset dl:has(:not(div)) dt:nth-of-type(6n + 6), - fieldset dl:has(:not(div)) dd:nth-of-type(6n + 6) { - grid-column: 6; - } - form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms fieldset dl:has(:not(div)) dd.colspan-5, form.semanticForms fieldset dl:has(:not(div)) dd.colspan-full, form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms dl:has(:not(div)) dd.colspan-5, form.semanticForms dl:has(:not(div)) dd.colspan-full, - fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-5), - fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-full), - fieldset fieldset dl:has(:not(div)) dd.colspan-5, - fieldset fieldset dl:has(:not(div)) dd.colspan-full, - fieldset dl:has(:not(div)) dt:has(+ dd.colspan-5), - fieldset dl:has(:not(div)) dt:has(+ dd.colspan-full), - fieldset dl:has(:not(div)) dd.colspan-5, - fieldset dl:has(:not(div)) dd.colspan-full { - grid-column: span 5; - } - form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms fieldset dl:has(:not(div)) dd.colspan-4, form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms dl:has(:not(div)) dd.colspan-4, - fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-4), - fieldset fieldset dl:has(:not(div)) dd.colspan-4, - fieldset dl:has(:not(div)) dt:has(+ dd.colspan-4), - fieldset dl:has(:not(div)) dd.colspan-4 { - grid-column: span 4; - } - form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms fieldset dl:has(:not(div)) dd.colspan-3, form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms dl:has(:not(div)) dd.colspan-3, - fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-3), - fieldset fieldset dl:has(:not(div)) dd.colspan-3, - fieldset dl:has(:not(div)) dt:has(+ dd.colspan-3), - fieldset dl:has(:not(div)) dd.colspan-3 { - grid-column: span 3; - } - form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms fieldset dl:has(:not(div)) dd.colspan-2, form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms dl:has(:not(div)) dd.colspan-2, - fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-2), - fieldset fieldset dl:has(:not(div)) dd.colspan-2, - fieldset dl:has(:not(div)) dt:has(+ dd.colspan-2), - fieldset dl:has(:not(div)) dd.colspan-2 { - grid-column: span 2; - } -} -@container semanticForm (width >= 1290px) and (width < 1550px) { - form.semanticForms fieldset dl, form.semanticForms dl, - fieldset fieldset dl, - fieldset dl { - grid-template-columns: repeat(5, minmax(var(--semanticFormsInputMinWidth), 1fr)); - } - form.semanticForms fieldset dl:has(:not(div)) dt:nth-of-type(5n + 1), form.semanticForms fieldset dl:has(:not(div)) dd:nth-of-type(5n + 1), form.semanticForms dl:has(:not(div)) dt:nth-of-type(5n + 1), form.semanticForms dl:has(:not(div)) dd:nth-of-type(5n + 1), - fieldset fieldset dl:has(:not(div)) dt:nth-of-type(5n + 1), - fieldset fieldset dl:has(:not(div)) dd:nth-of-type(5n + 1), - fieldset dl:has(:not(div)) dt:nth-of-type(5n + 1), - fieldset dl:has(:not(div)) dd:nth-of-type(5n + 1) { - grid-column: 1; - } - form.semanticForms fieldset dl:has(:not(div)) dt:nth-of-type(5n + 2), form.semanticForms fieldset dl:has(:not(div)) dd:nth-of-type(5n + 2), form.semanticForms dl:has(:not(div)) dt:nth-of-type(5n + 2), form.semanticForms dl:has(:not(div)) dd:nth-of-type(5n + 2), - fieldset fieldset dl:has(:not(div)) dt:nth-of-type(5n + 2), - fieldset fieldset dl:has(:not(div)) dd:nth-of-type(5n + 2), - fieldset dl:has(:not(div)) dt:nth-of-type(5n + 2), - fieldset dl:has(:not(div)) dd:nth-of-type(5n + 2) { - grid-column: 2; - } - form.semanticForms fieldset dl:has(:not(div)) dt:nth-of-type(5n + 3), form.semanticForms fieldset dl:has(:not(div)) dd:nth-of-type(5n + 3), form.semanticForms dl:has(:not(div)) dt:nth-of-type(5n + 3), form.semanticForms dl:has(:not(div)) dd:nth-of-type(5n + 3), - fieldset fieldset dl:has(:not(div)) dt:nth-of-type(5n + 3), - fieldset fieldset dl:has(:not(div)) dd:nth-of-type(5n + 3), - fieldset dl:has(:not(div)) dt:nth-of-type(5n + 3), - fieldset dl:has(:not(div)) dd:nth-of-type(5n + 3) { - grid-column: 3; - } - form.semanticForms fieldset dl:has(:not(div)) dt:nth-of-type(5n + 4), form.semanticForms fieldset dl:has(:not(div)) dd:nth-of-type(5n + 4), form.semanticForms dl:has(:not(div)) dt:nth-of-type(5n + 4), form.semanticForms dl:has(:not(div)) dd:nth-of-type(5n + 4), - fieldset fieldset dl:has(:not(div)) dt:nth-of-type(5n + 4), - fieldset fieldset dl:has(:not(div)) dd:nth-of-type(5n + 4), - fieldset dl:has(:not(div)) dt:nth-of-type(5n + 4), - fieldset dl:has(:not(div)) dd:nth-of-type(5n + 4) { - grid-column: 4; - } - form.semanticForms fieldset dl:has(:not(div)) dt:nth-of-type(5n + 5), form.semanticForms fieldset dl:has(:not(div)) dd:nth-of-type(5n + 5), form.semanticForms dl:has(:not(div)) dt:nth-of-type(5n + 5), form.semanticForms dl:has(:not(div)) dd:nth-of-type(5n + 5), - fieldset fieldset dl:has(:not(div)) dt:nth-of-type(5n + 5), - fieldset fieldset dl:has(:not(div)) dd:nth-of-type(5n + 5), - fieldset dl:has(:not(div)) dt:nth-of-type(5n + 5), - fieldset dl:has(:not(div)) dd:nth-of-type(5n + 5) { - grid-column: 5; - } - form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms fieldset dl:has(:not(div)) dd.colspan-5, form.semanticForms fieldset dl:has(:not(div)) dd.colspan-full, form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms dl:has(:not(div)) dd.colspan-5, form.semanticForms dl:has(:not(div)) dd.colspan-full, - fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-5), - fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-full), - fieldset fieldset dl:has(:not(div)) dd.colspan-5, - fieldset fieldset dl:has(:not(div)) dd.colspan-full, - fieldset dl:has(:not(div)) dt:has(+ dd.colspan-5), - fieldset dl:has(:not(div)) dt:has(+ dd.colspan-full), - fieldset dl:has(:not(div)) dd.colspan-5, - fieldset dl:has(:not(div)) dd.colspan-full { - grid-column: span 5; - } - form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms fieldset dl:has(:not(div)) dd.colspan-4, form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms dl:has(:not(div)) dd.colspan-4, - fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-4), - fieldset fieldset dl:has(:not(div)) dd.colspan-4, - fieldset dl:has(:not(div)) dt:has(+ dd.colspan-4), - fieldset dl:has(:not(div)) dd.colspan-4 { - grid-column: span 4; - } - form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms fieldset dl:has(:not(div)) dd.colspan-3, form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms dl:has(:not(div)) dd.colspan-3, - fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-3), - fieldset fieldset dl:has(:not(div)) dd.colspan-3, - fieldset dl:has(:not(div)) dt:has(+ dd.colspan-3), - fieldset dl:has(:not(div)) dd.colspan-3 { - grid-column: span 3; - } - form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms fieldset dl:has(:not(div)) dd.colspan-2, form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms dl:has(:not(div)) dd.colspan-2, - fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-2), - fieldset fieldset dl:has(:not(div)) dd.colspan-2, - fieldset dl:has(:not(div)) dt:has(+ dd.colspan-2), - fieldset dl:has(:not(div)) dd.colspan-2 { - grid-column: span 2; - } -} -@container semanticForm (width >= 1030px) and (width < 1290px) { - form.semanticForms fieldset dl, form.semanticForms fieldset.colspan-5 dl, form.semanticForms dl, form.semanticForms dl.colspan-5, - fieldset fieldset dl, - fieldset fieldset.colspan-5 dl, - fieldset dl, - fieldset dl.colspan-5 { - grid-template-columns: repeat(4, minmax(var(--semanticFormsInputMinWidth), 1fr)); - } - form.semanticForms fieldset dl div.colspan-5, form.semanticForms fieldset.colspan-5 dl div.colspan-5, form.semanticForms dl div.colspan-5, form.semanticForms dl.colspan-5 div.colspan-5, - fieldset fieldset dl div.colspan-5, - fieldset fieldset.colspan-5 dl div.colspan-5, - fieldset dl div.colspan-5, - fieldset dl.colspan-5 div.colspan-5 { - grid-column: span 4; - } - form.semanticForms fieldset dl:has(:not(div)) dt:nth-of-type(4n + 1), form.semanticForms fieldset dl:has(:not(div)) dd:nth-of-type(4n + 1), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:nth-of-type(4n + 1), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd:nth-of-type(4n + 1), form.semanticForms dl:has(:not(div)) dt:nth-of-type(4n + 1), form.semanticForms dl:has(:not(div)) dd:nth-of-type(4n + 1), form.semanticForms dl.colspan-5:has(:not(div)) dt:nth-of-type(4n + 1), form.semanticForms dl.colspan-5:has(:not(div)) dd:nth-of-type(4n + 1), - fieldset fieldset dl:has(:not(div)) dt:nth-of-type(4n + 1), - fieldset fieldset dl:has(:not(div)) dd:nth-of-type(4n + 1), - fieldset fieldset.colspan-5 dl:has(:not(div)) dt:nth-of-type(4n + 1), - fieldset fieldset.colspan-5 dl:has(:not(div)) dd:nth-of-type(4n + 1), - fieldset dl:has(:not(div)) dt:nth-of-type(4n + 1), - fieldset dl:has(:not(div)) dd:nth-of-type(4n + 1), - fieldset dl.colspan-5:has(:not(div)) dt:nth-of-type(4n + 1), - fieldset dl.colspan-5:has(:not(div)) dd:nth-of-type(4n + 1) { - grid-column: 1; - } - form.semanticForms fieldset dl:has(:not(div)) dt:nth-of-type(4n + 2), form.semanticForms fieldset dl:has(:not(div)) dd:nth-of-type(4n + 2), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:nth-of-type(4n + 2), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd:nth-of-type(4n + 2), form.semanticForms dl:has(:not(div)) dt:nth-of-type(4n + 2), form.semanticForms dl:has(:not(div)) dd:nth-of-type(4n + 2), form.semanticForms dl.colspan-5:has(:not(div)) dt:nth-of-type(4n + 2), form.semanticForms dl.colspan-5:has(:not(div)) dd:nth-of-type(4n + 2), - fieldset fieldset dl:has(:not(div)) dt:nth-of-type(4n + 2), - fieldset fieldset dl:has(:not(div)) dd:nth-of-type(4n + 2), - fieldset fieldset.colspan-5 dl:has(:not(div)) dt:nth-of-type(4n + 2), - fieldset fieldset.colspan-5 dl:has(:not(div)) dd:nth-of-type(4n + 2), - fieldset dl:has(:not(div)) dt:nth-of-type(4n + 2), - fieldset dl:has(:not(div)) dd:nth-of-type(4n + 2), - fieldset dl.colspan-5:has(:not(div)) dt:nth-of-type(4n + 2), - fieldset dl.colspan-5:has(:not(div)) dd:nth-of-type(4n + 2) { - grid-column: 2; - } - form.semanticForms fieldset dl:has(:not(div)) dt:nth-of-type(4n + 3), form.semanticForms fieldset dl:has(:not(div)) dd:nth-of-type(4n + 3), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:nth-of-type(4n + 3), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd:nth-of-type(4n + 3), form.semanticForms dl:has(:not(div)) dt:nth-of-type(4n + 3), form.semanticForms dl:has(:not(div)) dd:nth-of-type(4n + 3), form.semanticForms dl.colspan-5:has(:not(div)) dt:nth-of-type(4n + 3), form.semanticForms dl.colspan-5:has(:not(div)) dd:nth-of-type(4n + 3), - fieldset fieldset dl:has(:not(div)) dt:nth-of-type(4n + 3), - fieldset fieldset dl:has(:not(div)) dd:nth-of-type(4n + 3), - fieldset fieldset.colspan-5 dl:has(:not(div)) dt:nth-of-type(4n + 3), - fieldset fieldset.colspan-5 dl:has(:not(div)) dd:nth-of-type(4n + 3), - fieldset dl:has(:not(div)) dt:nth-of-type(4n + 3), - fieldset dl:has(:not(div)) dd:nth-of-type(4n + 3), - fieldset dl.colspan-5:has(:not(div)) dt:nth-of-type(4n + 3), - fieldset dl.colspan-5:has(:not(div)) dd:nth-of-type(4n + 3) { - grid-column: 3; - } - form.semanticForms fieldset dl:has(:not(div)) dt:nth-of-type(4n + 4), form.semanticForms fieldset dl:has(:not(div)) dd:nth-of-type(4n + 4), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:nth-of-type(4n + 4), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd:nth-of-type(4n + 4), form.semanticForms dl:has(:not(div)) dt:nth-of-type(4n + 4), form.semanticForms dl:has(:not(div)) dd:nth-of-type(4n + 4), form.semanticForms dl.colspan-5:has(:not(div)) dt:nth-of-type(4n + 4), form.semanticForms dl.colspan-5:has(:not(div)) dd:nth-of-type(4n + 4), - fieldset fieldset dl:has(:not(div)) dt:nth-of-type(4n + 4), - fieldset fieldset dl:has(:not(div)) dd:nth-of-type(4n + 4), - fieldset fieldset.colspan-5 dl:has(:not(div)) dt:nth-of-type(4n + 4), - fieldset fieldset.colspan-5 dl:has(:not(div)) dd:nth-of-type(4n + 4), - fieldset dl:has(:not(div)) dt:nth-of-type(4n + 4), - fieldset dl:has(:not(div)) dd:nth-of-type(4n + 4), - fieldset dl.colspan-5:has(:not(div)) dt:nth-of-type(4n + 4), - fieldset dl.colspan-5:has(:not(div)) dd:nth-of-type(4n + 4) { - grid-column: 4; - } - form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms fieldset dl:has(:not(div)) dd.colspan-4, form.semanticForms fieldset dl:has(:not(div)) dd.colspan-5, form.semanticForms fieldset dl:has(:not(div)) dd.colspan-full, form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd.colspan-4, form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd.colspan-5, form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd.colspan-full, form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms dl:has(:not(div)) dd.colspan-4, form.semanticForms dl:has(:not(div)) dd.colspan-5, form.semanticForms dl:has(:not(div)) dd.colspan-full, form.semanticForms dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms dl.colspan-5:has(:not(div)) dd.colspan-4, form.semanticForms dl.colspan-5:has(:not(div)) dd.colspan-5, form.semanticForms dl.colspan-5:has(:not(div)) dd.colspan-full, - fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-4), - fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-5), - fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-full), - fieldset fieldset dl:has(:not(div)) dd.colspan-4, - fieldset fieldset dl:has(:not(div)) dd.colspan-5, - fieldset fieldset dl:has(:not(div)) dd.colspan-full, - fieldset fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-4), - fieldset fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-5), - fieldset fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-full), - fieldset fieldset.colspan-5 dl:has(:not(div)) dd.colspan-4, - fieldset fieldset.colspan-5 dl:has(:not(div)) dd.colspan-5, - fieldset fieldset.colspan-5 dl:has(:not(div)) dd.colspan-full, - fieldset dl:has(:not(div)) dt:has(+ dd.colspan-4), - fieldset dl:has(:not(div)) dt:has(+ dd.colspan-5), - fieldset dl:has(:not(div)) dt:has(+ dd.colspan-full), - fieldset dl:has(:not(div)) dd.colspan-4, - fieldset dl:has(:not(div)) dd.colspan-5, - fieldset dl:has(:not(div)) dd.colspan-full, - fieldset dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-4), - fieldset dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-5), - fieldset dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-full), - fieldset dl.colspan-5:has(:not(div)) dd.colspan-4, - fieldset dl.colspan-5:has(:not(div)) dd.colspan-5, - fieldset dl.colspan-5:has(:not(div)) dd.colspan-full { - grid-column: span 4; - } - form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms fieldset dl:has(:not(div)) dd.colspan-3, form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd.colspan-3, form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms dl:has(:not(div)) dd.colspan-3, form.semanticForms dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms dl.colspan-5:has(:not(div)) dd.colspan-3, - fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-3), - fieldset fieldset dl:has(:not(div)) dd.colspan-3, - fieldset fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-3), - fieldset fieldset.colspan-5 dl:has(:not(div)) dd.colspan-3, - fieldset dl:has(:not(div)) dt:has(+ dd.colspan-3), - fieldset dl:has(:not(div)) dd.colspan-3, - fieldset dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-3), - fieldset dl.colspan-5:has(:not(div)) dd.colspan-3 { - grid-column: span 3; - } - form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms fieldset dl:has(:not(div)) dd.colspan-2, form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd.colspan-2, form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms dl:has(:not(div)) dd.colspan-2, form.semanticForms dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms dl.colspan-5:has(:not(div)) dd.colspan-2, - fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-2), - fieldset fieldset dl:has(:not(div)) dd.colspan-2, - fieldset fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-2), - fieldset fieldset.colspan-5 dl:has(:not(div)) dd.colspan-2, - fieldset dl:has(:not(div)) dt:has(+ dd.colspan-2), - fieldset dl:has(:not(div)) dd.colspan-2, - fieldset dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-2), - fieldset dl.colspan-5:has(:not(div)) dd.colspan-2 { - grid-column: span 2; - } -} -@container semanticForm (width >= 850px) and (width < 1030px) { - form.semanticForms fieldset dl, form.semanticForms fieldset.colspan-4 dl, form.semanticForms fieldset.colspan-5 dl, form.semanticForms dl, form.semanticForms dl.colspan-4, form.semanticForms dl.colspan-5, - fieldset fieldset dl, - fieldset fieldset.colspan-4 dl, - fieldset fieldset.colspan-5 dl, - fieldset dl, - fieldset dl.colspan-4, - fieldset dl.colspan-5 { - grid-template-columns: repeat(3, minmax(var(--semanticFormsInputMinWidth), 1fr)); - } - form.semanticForms fieldset dl div.colspan-4, - form.semanticForms fieldset dl div.colspan-5, form.semanticForms fieldset.colspan-4 dl div.colspan-4, - form.semanticForms fieldset.colspan-4 dl div.colspan-5, form.semanticForms fieldset.colspan-5 dl div.colspan-4, - form.semanticForms fieldset.colspan-5 dl div.colspan-5, form.semanticForms dl div.colspan-4, - form.semanticForms dl div.colspan-5, form.semanticForms dl.colspan-4 div.colspan-4, - form.semanticForms dl.colspan-4 div.colspan-5, form.semanticForms dl.colspan-5 div.colspan-4, - form.semanticForms dl.colspan-5 div.colspan-5, - fieldset fieldset dl div.colspan-4, - fieldset fieldset dl div.colspan-5, - fieldset fieldset.colspan-4 dl div.colspan-4, - fieldset fieldset.colspan-4 dl div.colspan-5, - fieldset fieldset.colspan-5 dl div.colspan-4, - fieldset fieldset.colspan-5 dl div.colspan-5, - fieldset dl div.colspan-4, - fieldset dl div.colspan-5, - fieldset dl.colspan-4 div.colspan-4, - fieldset dl.colspan-4 div.colspan-5, - fieldset dl.colspan-5 div.colspan-4, - fieldset dl.colspan-5 div.colspan-5 { - grid-column: span 3; - } - form.semanticForms fieldset dl:has(:not(div)) dt:nth-of-type(3n + 1), form.semanticForms fieldset dl:has(:not(div)) dd:nth-of-type(3n + 1), form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dt:nth-of-type(3n + 1), form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dd:nth-of-type(3n + 1), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:nth-of-type(3n + 1), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd:nth-of-type(3n + 1), form.semanticForms dl:has(:not(div)) dt:nth-of-type(3n + 1), form.semanticForms dl:has(:not(div)) dd:nth-of-type(3n + 1), form.semanticForms dl.colspan-4:has(:not(div)) dt:nth-of-type(3n + 1), form.semanticForms dl.colspan-4:has(:not(div)) dd:nth-of-type(3n + 1), form.semanticForms dl.colspan-5:has(:not(div)) dt:nth-of-type(3n + 1), form.semanticForms dl.colspan-5:has(:not(div)) dd:nth-of-type(3n + 1), - fieldset fieldset dl:has(:not(div)) dt:nth-of-type(3n + 1), - fieldset fieldset dl:has(:not(div)) dd:nth-of-type(3n + 1), - fieldset fieldset.colspan-4 dl:has(:not(div)) dt:nth-of-type(3n + 1), - fieldset fieldset.colspan-4 dl:has(:not(div)) dd:nth-of-type(3n + 1), - fieldset fieldset.colspan-5 dl:has(:not(div)) dt:nth-of-type(3n + 1), - fieldset fieldset.colspan-5 dl:has(:not(div)) dd:nth-of-type(3n + 1), - fieldset dl:has(:not(div)) dt:nth-of-type(3n + 1), - fieldset dl:has(:not(div)) dd:nth-of-type(3n + 1), - fieldset dl.colspan-4:has(:not(div)) dt:nth-of-type(3n + 1), - fieldset dl.colspan-4:has(:not(div)) dd:nth-of-type(3n + 1), - fieldset dl.colspan-5:has(:not(div)) dt:nth-of-type(3n + 1), - fieldset dl.colspan-5:has(:not(div)) dd:nth-of-type(3n + 1) { - grid-column: 1; - } - form.semanticForms fieldset dl:has(:not(div)) dt:nth-of-type(3n + 2), form.semanticForms fieldset dl:has(:not(div)) dd:nth-of-type(3n + 2), form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dt:nth-of-type(3n + 2), form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dd:nth-of-type(3n + 2), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:nth-of-type(3n + 2), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd:nth-of-type(3n + 2), form.semanticForms dl:has(:not(div)) dt:nth-of-type(3n + 2), form.semanticForms dl:has(:not(div)) dd:nth-of-type(3n + 2), form.semanticForms dl.colspan-4:has(:not(div)) dt:nth-of-type(3n + 2), form.semanticForms dl.colspan-4:has(:not(div)) dd:nth-of-type(3n + 2), form.semanticForms dl.colspan-5:has(:not(div)) dt:nth-of-type(3n + 2), form.semanticForms dl.colspan-5:has(:not(div)) dd:nth-of-type(3n + 2), - fieldset fieldset dl:has(:not(div)) dt:nth-of-type(3n + 2), - fieldset fieldset dl:has(:not(div)) dd:nth-of-type(3n + 2), - fieldset fieldset.colspan-4 dl:has(:not(div)) dt:nth-of-type(3n + 2), - fieldset fieldset.colspan-4 dl:has(:not(div)) dd:nth-of-type(3n + 2), - fieldset fieldset.colspan-5 dl:has(:not(div)) dt:nth-of-type(3n + 2), - fieldset fieldset.colspan-5 dl:has(:not(div)) dd:nth-of-type(3n + 2), - fieldset dl:has(:not(div)) dt:nth-of-type(3n + 2), - fieldset dl:has(:not(div)) dd:nth-of-type(3n + 2), - fieldset dl.colspan-4:has(:not(div)) dt:nth-of-type(3n + 2), - fieldset dl.colspan-4:has(:not(div)) dd:nth-of-type(3n + 2), - fieldset dl.colspan-5:has(:not(div)) dt:nth-of-type(3n + 2), - fieldset dl.colspan-5:has(:not(div)) dd:nth-of-type(3n + 2) { - grid-column: 2; - } - form.semanticForms fieldset dl:has(:not(div)) dt:nth-of-type(3n + 3), form.semanticForms fieldset dl:has(:not(div)) dd:nth-of-type(3n + 3), form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dt:nth-of-type(3n + 3), form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dd:nth-of-type(3n + 3), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:nth-of-type(3n + 3), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd:nth-of-type(3n + 3), form.semanticForms dl:has(:not(div)) dt:nth-of-type(3n + 3), form.semanticForms dl:has(:not(div)) dd:nth-of-type(3n + 3), form.semanticForms dl.colspan-4:has(:not(div)) dt:nth-of-type(3n + 3), form.semanticForms dl.colspan-4:has(:not(div)) dd:nth-of-type(3n + 3), form.semanticForms dl.colspan-5:has(:not(div)) dt:nth-of-type(3n + 3), form.semanticForms dl.colspan-5:has(:not(div)) dd:nth-of-type(3n + 3), - fieldset fieldset dl:has(:not(div)) dt:nth-of-type(3n + 3), - fieldset fieldset dl:has(:not(div)) dd:nth-of-type(3n + 3), - fieldset fieldset.colspan-4 dl:has(:not(div)) dt:nth-of-type(3n + 3), - fieldset fieldset.colspan-4 dl:has(:not(div)) dd:nth-of-type(3n + 3), - fieldset fieldset.colspan-5 dl:has(:not(div)) dt:nth-of-type(3n + 3), - fieldset fieldset.colspan-5 dl:has(:not(div)) dd:nth-of-type(3n + 3), - fieldset dl:has(:not(div)) dt:nth-of-type(3n + 3), - fieldset dl:has(:not(div)) dd:nth-of-type(3n + 3), - fieldset dl.colspan-4:has(:not(div)) dt:nth-of-type(3n + 3), - fieldset dl.colspan-4:has(:not(div)) dd:nth-of-type(3n + 3), - fieldset dl.colspan-5:has(:not(div)) dt:nth-of-type(3n + 3), - fieldset dl.colspan-5:has(:not(div)) dd:nth-of-type(3n + 3) { - grid-column: 3; - } - form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms fieldset dl:has(:not(div)) dd.colspan-3, form.semanticForms fieldset dl:has(:not(div)) dd.colspan-4, form.semanticForms fieldset dl:has(:not(div)) dd.colspan-5, form.semanticForms fieldset dl:has(:not(div)) dd.colspan-full, form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dd.colspan-3, form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dd.colspan-4, form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dd.colspan-5, form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dd.colspan-full, form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd.colspan-3, form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd.colspan-4, form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd.colspan-5, form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd.colspan-full, form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms dl:has(:not(div)) dd.colspan-3, form.semanticForms dl:has(:not(div)) dd.colspan-4, form.semanticForms dl:has(:not(div)) dd.colspan-5, form.semanticForms dl:has(:not(div)) dd.colspan-full, form.semanticForms dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms dl.colspan-4:has(:not(div)) dd.colspan-3, form.semanticForms dl.colspan-4:has(:not(div)) dd.colspan-4, form.semanticForms dl.colspan-4:has(:not(div)) dd.colspan-5, form.semanticForms dl.colspan-4:has(:not(div)) dd.colspan-full, form.semanticForms dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms dl.colspan-5:has(:not(div)) dd.colspan-3, form.semanticForms dl.colspan-5:has(:not(div)) dd.colspan-4, form.semanticForms dl.colspan-5:has(:not(div)) dd.colspan-5, form.semanticForms dl.colspan-5:has(:not(div)) dd.colspan-full, - fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-3), - fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-4), - fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-5), - fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-full), - fieldset fieldset dl:has(:not(div)) dd.colspan-3, - fieldset fieldset dl:has(:not(div)) dd.colspan-4, - fieldset fieldset dl:has(:not(div)) dd.colspan-5, - fieldset fieldset dl:has(:not(div)) dd.colspan-full, - fieldset fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-3), - fieldset fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-4), - fieldset fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-5), - fieldset fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-full), - fieldset fieldset.colspan-4 dl:has(:not(div)) dd.colspan-3, - fieldset fieldset.colspan-4 dl:has(:not(div)) dd.colspan-4, - fieldset fieldset.colspan-4 dl:has(:not(div)) dd.colspan-5, - fieldset fieldset.colspan-4 dl:has(:not(div)) dd.colspan-full, - fieldset fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-3), - fieldset fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-4), - fieldset fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-5), - fieldset fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-full), - fieldset fieldset.colspan-5 dl:has(:not(div)) dd.colspan-3, - fieldset fieldset.colspan-5 dl:has(:not(div)) dd.colspan-4, - fieldset fieldset.colspan-5 dl:has(:not(div)) dd.colspan-5, - fieldset fieldset.colspan-5 dl:has(:not(div)) dd.colspan-full, - fieldset dl:has(:not(div)) dt:has(+ dd.colspan-3), - fieldset dl:has(:not(div)) dt:has(+ dd.colspan-4), - fieldset dl:has(:not(div)) dt:has(+ dd.colspan-5), - fieldset dl:has(:not(div)) dt:has(+ dd.colspan-full), - fieldset dl:has(:not(div)) dd.colspan-3, - fieldset dl:has(:not(div)) dd.colspan-4, - fieldset dl:has(:not(div)) dd.colspan-5, - fieldset dl:has(:not(div)) dd.colspan-full, - fieldset dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-3), - fieldset dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-4), - fieldset dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-5), - fieldset dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-full), - fieldset dl.colspan-4:has(:not(div)) dd.colspan-3, - fieldset dl.colspan-4:has(:not(div)) dd.colspan-4, - fieldset dl.colspan-4:has(:not(div)) dd.colspan-5, - fieldset dl.colspan-4:has(:not(div)) dd.colspan-full, - fieldset dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-3), - fieldset dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-4), - fieldset dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-5), - fieldset dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-full), - fieldset dl.colspan-5:has(:not(div)) dd.colspan-3, - fieldset dl.colspan-5:has(:not(div)) dd.colspan-4, - fieldset dl.colspan-5:has(:not(div)) dd.colspan-5, - fieldset dl.colspan-5:has(:not(div)) dd.colspan-full { - grid-column: span 3; - } - form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms fieldset dl:has(:not(div)) dd.colspan-2, form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dd.colspan-2, form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd.colspan-2, form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms dl:has(:not(div)) dd.colspan-2, form.semanticForms dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms dl.colspan-4:has(:not(div)) dd.colspan-2, form.semanticForms dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms dl.colspan-5:has(:not(div)) dd.colspan-2, - fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-2), - fieldset fieldset dl:has(:not(div)) dd.colspan-2, - fieldset fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-2), - fieldset fieldset.colspan-4 dl:has(:not(div)) dd.colspan-2, - fieldset fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-2), - fieldset fieldset.colspan-5 dl:has(:not(div)) dd.colspan-2, - fieldset dl:has(:not(div)) dt:has(+ dd.colspan-2), - fieldset dl:has(:not(div)) dd.colspan-2, - fieldset dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-2), - fieldset dl.colspan-4:has(:not(div)) dd.colspan-2, - fieldset dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-2), - fieldset dl.colspan-5:has(:not(div)) dd.colspan-2 { - grid-column: span 2; - } -} -@container semanticForm (width >= 510px) and (width < 850px) { - form.semanticForms fieldset dl, form.semanticForms fieldset.colspan-3 dl, form.semanticForms fieldset.colspan-4 dl, form.semanticForms fieldset.colspan-5 dl, form.semanticForms dl, form.semanticForms dl.colspan-3, form.semanticForms dl.colspan-4, form.semanticForms dl.colspan-5, - fieldset fieldset dl, - fieldset fieldset.colspan-3 dl, - fieldset fieldset.colspan-4 dl, - fieldset fieldset.colspan-5 dl, - fieldset dl, - fieldset dl.colspan-3, - fieldset dl.colspan-4, - fieldset dl.colspan-5 { - grid-template-columns: repeat(2, minmax(var(--semanticFormsInputMinWidth), 1fr)); - } - form.semanticForms fieldset dl div.colspan-3, - form.semanticForms fieldset dl div.colspan-4, - form.semanticForms fieldset dl div.colspan-5, form.semanticForms fieldset.colspan-3 dl div.colspan-3, - form.semanticForms fieldset.colspan-3 dl div.colspan-4, - form.semanticForms fieldset.colspan-3 dl div.colspan-5, form.semanticForms fieldset.colspan-4 dl div.colspan-3, - form.semanticForms fieldset.colspan-4 dl div.colspan-4, - form.semanticForms fieldset.colspan-4 dl div.colspan-5, form.semanticForms fieldset.colspan-5 dl div.colspan-3, - form.semanticForms fieldset.colspan-5 dl div.colspan-4, - form.semanticForms fieldset.colspan-5 dl div.colspan-5, form.semanticForms dl div.colspan-3, - form.semanticForms dl div.colspan-4, - form.semanticForms dl div.colspan-5, form.semanticForms dl.colspan-3 div.colspan-3, - form.semanticForms dl.colspan-3 div.colspan-4, - form.semanticForms dl.colspan-3 div.colspan-5, form.semanticForms dl.colspan-4 div.colspan-3, - form.semanticForms dl.colspan-4 div.colspan-4, - form.semanticForms dl.colspan-4 div.colspan-5, form.semanticForms dl.colspan-5 div.colspan-3, - form.semanticForms dl.colspan-5 div.colspan-4, - form.semanticForms dl.colspan-5 div.colspan-5, - fieldset fieldset dl div.colspan-3, - fieldset fieldset dl div.colspan-4, - fieldset fieldset dl div.colspan-5, - fieldset fieldset.colspan-3 dl div.colspan-3, - fieldset fieldset.colspan-3 dl div.colspan-4, - fieldset fieldset.colspan-3 dl div.colspan-5, - fieldset fieldset.colspan-4 dl div.colspan-3, - fieldset fieldset.colspan-4 dl div.colspan-4, - fieldset fieldset.colspan-4 dl div.colspan-5, - fieldset fieldset.colspan-5 dl div.colspan-3, - fieldset fieldset.colspan-5 dl div.colspan-4, - fieldset fieldset.colspan-5 dl div.colspan-5, - fieldset dl div.colspan-3, - fieldset dl div.colspan-4, - fieldset dl div.colspan-5, - fieldset dl.colspan-3 div.colspan-3, - fieldset dl.colspan-3 div.colspan-4, - fieldset dl.colspan-3 div.colspan-5, - fieldset dl.colspan-4 div.colspan-3, - fieldset dl.colspan-4 div.colspan-4, - fieldset dl.colspan-4 div.colspan-5, - fieldset dl.colspan-5 div.colspan-3, - fieldset dl.colspan-5 div.colspan-4, - fieldset dl.colspan-5 div.colspan-5 { - grid-column: span 2; - } - form.semanticForms fieldset dl:has(:not(div)) dt:nth-of-type(2n + 1), form.semanticForms fieldset dl:has(:not(div)) dd:nth-of-type(2n + 1), form.semanticForms fieldset.colspan-3 dl:has(:not(div)) dt:nth-of-type(2n + 1), form.semanticForms fieldset.colspan-3 dl:has(:not(div)) dd:nth-of-type(2n + 1), form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dt:nth-of-type(2n + 1), form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dd:nth-of-type(2n + 1), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:nth-of-type(2n + 1), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd:nth-of-type(2n + 1), form.semanticForms dl:has(:not(div)) dt:nth-of-type(2n + 1), form.semanticForms dl:has(:not(div)) dd:nth-of-type(2n + 1), form.semanticForms dl.colspan-3:has(:not(div)) dt:nth-of-type(2n + 1), form.semanticForms dl.colspan-3:has(:not(div)) dd:nth-of-type(2n + 1), form.semanticForms dl.colspan-4:has(:not(div)) dt:nth-of-type(2n + 1), form.semanticForms dl.colspan-4:has(:not(div)) dd:nth-of-type(2n + 1), form.semanticForms dl.colspan-5:has(:not(div)) dt:nth-of-type(2n + 1), form.semanticForms dl.colspan-5:has(:not(div)) dd:nth-of-type(2n + 1), - fieldset fieldset dl:has(:not(div)) dt:nth-of-type(2n + 1), - fieldset fieldset dl:has(:not(div)) dd:nth-of-type(2n + 1), - fieldset fieldset.colspan-3 dl:has(:not(div)) dt:nth-of-type(2n + 1), - fieldset fieldset.colspan-3 dl:has(:not(div)) dd:nth-of-type(2n + 1), - fieldset fieldset.colspan-4 dl:has(:not(div)) dt:nth-of-type(2n + 1), - fieldset fieldset.colspan-4 dl:has(:not(div)) dd:nth-of-type(2n + 1), - fieldset fieldset.colspan-5 dl:has(:not(div)) dt:nth-of-type(2n + 1), - fieldset fieldset.colspan-5 dl:has(:not(div)) dd:nth-of-type(2n + 1), - fieldset dl:has(:not(div)) dt:nth-of-type(2n + 1), - fieldset dl:has(:not(div)) dd:nth-of-type(2n + 1), - fieldset dl.colspan-3:has(:not(div)) dt:nth-of-type(2n + 1), - fieldset dl.colspan-3:has(:not(div)) dd:nth-of-type(2n + 1), - fieldset dl.colspan-4:has(:not(div)) dt:nth-of-type(2n + 1), - fieldset dl.colspan-4:has(:not(div)) dd:nth-of-type(2n + 1), - fieldset dl.colspan-5:has(:not(div)) dt:nth-of-type(2n + 1), - fieldset dl.colspan-5:has(:not(div)) dd:nth-of-type(2n + 1) { - grid-column: 1; - } - form.semanticForms fieldset dl:has(:not(div)) dt:nth-of-type(2n + 2), form.semanticForms fieldset dl:has(:not(div)) dd:nth-of-type(2n + 2), form.semanticForms fieldset.colspan-3 dl:has(:not(div)) dt:nth-of-type(2n + 2), form.semanticForms fieldset.colspan-3 dl:has(:not(div)) dd:nth-of-type(2n + 2), form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dt:nth-of-type(2n + 2), form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dd:nth-of-type(2n + 2), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:nth-of-type(2n + 2), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd:nth-of-type(2n + 2), form.semanticForms dl:has(:not(div)) dt:nth-of-type(2n + 2), form.semanticForms dl:has(:not(div)) dd:nth-of-type(2n + 2), form.semanticForms dl.colspan-3:has(:not(div)) dt:nth-of-type(2n + 2), form.semanticForms dl.colspan-3:has(:not(div)) dd:nth-of-type(2n + 2), form.semanticForms dl.colspan-4:has(:not(div)) dt:nth-of-type(2n + 2), form.semanticForms dl.colspan-4:has(:not(div)) dd:nth-of-type(2n + 2), form.semanticForms dl.colspan-5:has(:not(div)) dt:nth-of-type(2n + 2), form.semanticForms dl.colspan-5:has(:not(div)) dd:nth-of-type(2n + 2), - fieldset fieldset dl:has(:not(div)) dt:nth-of-type(2n + 2), - fieldset fieldset dl:has(:not(div)) dd:nth-of-type(2n + 2), - fieldset fieldset.colspan-3 dl:has(:not(div)) dt:nth-of-type(2n + 2), - fieldset fieldset.colspan-3 dl:has(:not(div)) dd:nth-of-type(2n + 2), - fieldset fieldset.colspan-4 dl:has(:not(div)) dt:nth-of-type(2n + 2), - fieldset fieldset.colspan-4 dl:has(:not(div)) dd:nth-of-type(2n + 2), - fieldset fieldset.colspan-5 dl:has(:not(div)) dt:nth-of-type(2n + 2), - fieldset fieldset.colspan-5 dl:has(:not(div)) dd:nth-of-type(2n + 2), - fieldset dl:has(:not(div)) dt:nth-of-type(2n + 2), - fieldset dl:has(:not(div)) dd:nth-of-type(2n + 2), - fieldset dl.colspan-3:has(:not(div)) dt:nth-of-type(2n + 2), - fieldset dl.colspan-3:has(:not(div)) dd:nth-of-type(2n + 2), - fieldset dl.colspan-4:has(:not(div)) dt:nth-of-type(2n + 2), - fieldset dl.colspan-4:has(:not(div)) dd:nth-of-type(2n + 2), - fieldset dl.colspan-5:has(:not(div)) dt:nth-of-type(2n + 2), - fieldset dl.colspan-5:has(:not(div)) dd:nth-of-type(2n + 2) { - grid-column: 2; - } - form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms fieldset dl:has(:not(div)) dd.colspan-2, form.semanticForms fieldset dl:has(:not(div)) dd.colspan-3, form.semanticForms fieldset dl:has(:not(div)) dd.colspan-4, form.semanticForms fieldset dl:has(:not(div)) dd.colspan-5, form.semanticForms fieldset dl:has(:not(div)) dd.colspan-full, form.semanticForms fieldset.colspan-3 dl:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms fieldset.colspan-3 dl:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms fieldset.colspan-3 dl:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms fieldset.colspan-3 dl:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms fieldset.colspan-3 dl:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms fieldset.colspan-3 dl:has(:not(div)) dd.colspan-2, form.semanticForms fieldset.colspan-3 dl:has(:not(div)) dd.colspan-3, form.semanticForms fieldset.colspan-3 dl:has(:not(div)) dd.colspan-4, form.semanticForms fieldset.colspan-3 dl:has(:not(div)) dd.colspan-5, form.semanticForms fieldset.colspan-3 dl:has(:not(div)) dd.colspan-full, form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dd.colspan-2, form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dd.colspan-3, form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dd.colspan-4, form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dd.colspan-5, form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dd.colspan-full, form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd.colspan-2, form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd.colspan-3, form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd.colspan-4, form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd.colspan-5, form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd.colspan-full, form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms dl:has(:not(div)) dd.colspan-2, form.semanticForms dl:has(:not(div)) dd.colspan-3, form.semanticForms dl:has(:not(div)) dd.colspan-4, form.semanticForms dl:has(:not(div)) dd.colspan-5, form.semanticForms dl:has(:not(div)) dd.colspan-full, form.semanticForms dl.colspan-3:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms dl.colspan-3:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms dl.colspan-3:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms dl.colspan-3:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms dl.colspan-3:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms dl.colspan-3:has(:not(div)) dd.colspan-2, form.semanticForms dl.colspan-3:has(:not(div)) dd.colspan-3, form.semanticForms dl.colspan-3:has(:not(div)) dd.colspan-4, form.semanticForms dl.colspan-3:has(:not(div)) dd.colspan-5, form.semanticForms dl.colspan-3:has(:not(div)) dd.colspan-full, form.semanticForms dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms dl.colspan-4:has(:not(div)) dd.colspan-2, form.semanticForms dl.colspan-4:has(:not(div)) dd.colspan-3, form.semanticForms dl.colspan-4:has(:not(div)) dd.colspan-4, form.semanticForms dl.colspan-4:has(:not(div)) dd.colspan-5, form.semanticForms dl.colspan-4:has(:not(div)) dd.colspan-full, form.semanticForms dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms dl.colspan-5:has(:not(div)) dd.colspan-2, form.semanticForms dl.colspan-5:has(:not(div)) dd.colspan-3, form.semanticForms dl.colspan-5:has(:not(div)) dd.colspan-4, form.semanticForms dl.colspan-5:has(:not(div)) dd.colspan-5, form.semanticForms dl.colspan-5:has(:not(div)) dd.colspan-full, - fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-2), - fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-3), - fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-4), - fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-5), - fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-full), - fieldset fieldset dl:has(:not(div)) dd.colspan-2, - fieldset fieldset dl:has(:not(div)) dd.colspan-3, - fieldset fieldset dl:has(:not(div)) dd.colspan-4, - fieldset fieldset dl:has(:not(div)) dd.colspan-5, - fieldset fieldset dl:has(:not(div)) dd.colspan-full, - fieldset fieldset.colspan-3 dl:has(:not(div)) dt:has(+ dd.colspan-2), - fieldset fieldset.colspan-3 dl:has(:not(div)) dt:has(+ dd.colspan-3), - fieldset fieldset.colspan-3 dl:has(:not(div)) dt:has(+ dd.colspan-4), - fieldset fieldset.colspan-3 dl:has(:not(div)) dt:has(+ dd.colspan-5), - fieldset fieldset.colspan-3 dl:has(:not(div)) dt:has(+ dd.colspan-full), - fieldset fieldset.colspan-3 dl:has(:not(div)) dd.colspan-2, - fieldset fieldset.colspan-3 dl:has(:not(div)) dd.colspan-3, - fieldset fieldset.colspan-3 dl:has(:not(div)) dd.colspan-4, - fieldset fieldset.colspan-3 dl:has(:not(div)) dd.colspan-5, - fieldset fieldset.colspan-3 dl:has(:not(div)) dd.colspan-full, - fieldset fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-2), - fieldset fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-3), - fieldset fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-4), - fieldset fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-5), - fieldset fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-full), - fieldset fieldset.colspan-4 dl:has(:not(div)) dd.colspan-2, - fieldset fieldset.colspan-4 dl:has(:not(div)) dd.colspan-3, - fieldset fieldset.colspan-4 dl:has(:not(div)) dd.colspan-4, - fieldset fieldset.colspan-4 dl:has(:not(div)) dd.colspan-5, - fieldset fieldset.colspan-4 dl:has(:not(div)) dd.colspan-full, - fieldset fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-2), - fieldset fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-3), - fieldset fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-4), - fieldset fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-5), - fieldset fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-full), - fieldset fieldset.colspan-5 dl:has(:not(div)) dd.colspan-2, - fieldset fieldset.colspan-5 dl:has(:not(div)) dd.colspan-3, - fieldset fieldset.colspan-5 dl:has(:not(div)) dd.colspan-4, - fieldset fieldset.colspan-5 dl:has(:not(div)) dd.colspan-5, - fieldset fieldset.colspan-5 dl:has(:not(div)) dd.colspan-full, - fieldset dl:has(:not(div)) dt:has(+ dd.colspan-2), - fieldset dl:has(:not(div)) dt:has(+ dd.colspan-3), - fieldset dl:has(:not(div)) dt:has(+ dd.colspan-4), - fieldset dl:has(:not(div)) dt:has(+ dd.colspan-5), - fieldset dl:has(:not(div)) dt:has(+ dd.colspan-full), - fieldset dl:has(:not(div)) dd.colspan-2, - fieldset dl:has(:not(div)) dd.colspan-3, - fieldset dl:has(:not(div)) dd.colspan-4, - fieldset dl:has(:not(div)) dd.colspan-5, - fieldset dl:has(:not(div)) dd.colspan-full, - fieldset dl.colspan-3:has(:not(div)) dt:has(+ dd.colspan-2), - fieldset dl.colspan-3:has(:not(div)) dt:has(+ dd.colspan-3), - fieldset dl.colspan-3:has(:not(div)) dt:has(+ dd.colspan-4), - fieldset dl.colspan-3:has(:not(div)) dt:has(+ dd.colspan-5), - fieldset dl.colspan-3:has(:not(div)) dt:has(+ dd.colspan-full), - fieldset dl.colspan-3:has(:not(div)) dd.colspan-2, - fieldset dl.colspan-3:has(:not(div)) dd.colspan-3, - fieldset dl.colspan-3:has(:not(div)) dd.colspan-4, - fieldset dl.colspan-3:has(:not(div)) dd.colspan-5, - fieldset dl.colspan-3:has(:not(div)) dd.colspan-full, - fieldset dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-2), - fieldset dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-3), - fieldset dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-4), - fieldset dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-5), - fieldset dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-full), - fieldset dl.colspan-4:has(:not(div)) dd.colspan-2, - fieldset dl.colspan-4:has(:not(div)) dd.colspan-3, - fieldset dl.colspan-4:has(:not(div)) dd.colspan-4, - fieldset dl.colspan-4:has(:not(div)) dd.colspan-5, - fieldset dl.colspan-4:has(:not(div)) dd.colspan-full, - fieldset dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-2), - fieldset dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-3), - fieldset dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-4), - fieldset dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-5), - fieldset dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-full), - fieldset dl.colspan-5:has(:not(div)) dd.colspan-2, - fieldset dl.colspan-5:has(:not(div)) dd.colspan-3, - fieldset dl.colspan-5:has(:not(div)) dd.colspan-4, - fieldset dl.colspan-5:has(:not(div)) dd.colspan-5, - fieldset dl.colspan-5:has(:not(div)) dd.colspan-full { - grid-column: span 2; - } -} -@container semanticForm (width < 510px) { - form.semanticForms fieldset dl, form.semanticForms fieldset.colspan-2 dl, form.semanticForms fieldset.colspan-3 dl, form.semanticForms fieldset.colspan-4 dl, form.semanticForms fieldset.colspan-5 dl, form.semanticForms dl, form.semanticForms dl.colspan-2, form.semanticForms dl.colspan-3, form.semanticForms dl.colspan-4, form.semanticForms dl.colspan-5, - fieldset fieldset dl, - fieldset fieldset.colspan-2 dl, - fieldset fieldset.colspan-3 dl, - fieldset fieldset.colspan-4 dl, - fieldset fieldset.colspan-5 dl, - fieldset dl, - fieldset dl.colspan-2, - fieldset dl.colspan-3, - fieldset dl.colspan-4, - fieldset dl.colspan-5 { - grid-template-columns: repeat(1, minmax(var(--semanticFormsInputMinWidth), 1fr)); - } - form.semanticForms fieldset dl div.colspan-2, - form.semanticForms fieldset dl div.colspan-3, - form.semanticForms fieldset dl div.colspan-4, - form.semanticForms fieldset dl div.colspan-5, form.semanticForms fieldset.colspan-2 dl div.colspan-2, - form.semanticForms fieldset.colspan-2 dl div.colspan-3, - form.semanticForms fieldset.colspan-2 dl div.colspan-4, - form.semanticForms fieldset.colspan-2 dl div.colspan-5, form.semanticForms fieldset.colspan-3 dl div.colspan-2, - form.semanticForms fieldset.colspan-3 dl div.colspan-3, - form.semanticForms fieldset.colspan-3 dl div.colspan-4, - form.semanticForms fieldset.colspan-3 dl div.colspan-5, form.semanticForms fieldset.colspan-4 dl div.colspan-2, - form.semanticForms fieldset.colspan-4 dl div.colspan-3, - form.semanticForms fieldset.colspan-4 dl div.colspan-4, - form.semanticForms fieldset.colspan-4 dl div.colspan-5, form.semanticForms fieldset.colspan-5 dl div.colspan-2, - form.semanticForms fieldset.colspan-5 dl div.colspan-3, - form.semanticForms fieldset.colspan-5 dl div.colspan-4, - form.semanticForms fieldset.colspan-5 dl div.colspan-5, form.semanticForms dl div.colspan-2, - form.semanticForms dl div.colspan-3, - form.semanticForms dl div.colspan-4, - form.semanticForms dl div.colspan-5, form.semanticForms dl.colspan-2 div.colspan-2, - form.semanticForms dl.colspan-2 div.colspan-3, - form.semanticForms dl.colspan-2 div.colspan-4, - form.semanticForms dl.colspan-2 div.colspan-5, form.semanticForms dl.colspan-3 div.colspan-2, - form.semanticForms dl.colspan-3 div.colspan-3, - form.semanticForms dl.colspan-3 div.colspan-4, - form.semanticForms dl.colspan-3 div.colspan-5, form.semanticForms dl.colspan-4 div.colspan-2, - form.semanticForms dl.colspan-4 div.colspan-3, - form.semanticForms dl.colspan-4 div.colspan-4, - form.semanticForms dl.colspan-4 div.colspan-5, form.semanticForms dl.colspan-5 div.colspan-2, - form.semanticForms dl.colspan-5 div.colspan-3, - form.semanticForms dl.colspan-5 div.colspan-4, - form.semanticForms dl.colspan-5 div.colspan-5, - fieldset fieldset dl div.colspan-2, - fieldset fieldset dl div.colspan-3, - fieldset fieldset dl div.colspan-4, - fieldset fieldset dl div.colspan-5, - fieldset fieldset.colspan-2 dl div.colspan-2, - fieldset fieldset.colspan-2 dl div.colspan-3, - fieldset fieldset.colspan-2 dl div.colspan-4, - fieldset fieldset.colspan-2 dl div.colspan-5, - fieldset fieldset.colspan-3 dl div.colspan-2, - fieldset fieldset.colspan-3 dl div.colspan-3, - fieldset fieldset.colspan-3 dl div.colspan-4, - fieldset fieldset.colspan-3 dl div.colspan-5, - fieldset fieldset.colspan-4 dl div.colspan-2, - fieldset fieldset.colspan-4 dl div.colspan-3, - fieldset fieldset.colspan-4 dl div.colspan-4, - fieldset fieldset.colspan-4 dl div.colspan-5, - fieldset fieldset.colspan-5 dl div.colspan-2, - fieldset fieldset.colspan-5 dl div.colspan-3, - fieldset fieldset.colspan-5 dl div.colspan-4, - fieldset fieldset.colspan-5 dl div.colspan-5, - fieldset dl div.colspan-2, - fieldset dl div.colspan-3, - fieldset dl div.colspan-4, - fieldset dl div.colspan-5, - fieldset dl.colspan-2 div.colspan-2, - fieldset dl.colspan-2 div.colspan-3, - fieldset dl.colspan-2 div.colspan-4, - fieldset dl.colspan-2 div.colspan-5, - fieldset dl.colspan-3 div.colspan-2, - fieldset dl.colspan-3 div.colspan-3, - fieldset dl.colspan-3 div.colspan-4, - fieldset dl.colspan-3 div.colspan-5, - fieldset dl.colspan-4 div.colspan-2, - fieldset dl.colspan-4 div.colspan-3, - fieldset dl.colspan-4 div.colspan-4, - fieldset dl.colspan-4 div.colspan-5, - fieldset dl.colspan-5 div.colspan-2, - fieldset dl.colspan-5 div.colspan-3, - fieldset dl.colspan-5 div.colspan-4, - fieldset dl.colspan-5 div.colspan-5 { - grid-column: span 1; - } - form.semanticForms fieldset dl:has(:not(div)) dt:nth-of-type(n + 1), form.semanticForms fieldset dl:has(:not(div)) dd:nth-of-type(n + 1), form.semanticForms fieldset.colspan-2 dl:has(:not(div)) dt:nth-of-type(n + 1), form.semanticForms fieldset.colspan-2 dl:has(:not(div)) dd:nth-of-type(n + 1), form.semanticForms fieldset.colspan-3 dl:has(:not(div)) dt:nth-of-type(n + 1), form.semanticForms fieldset.colspan-3 dl:has(:not(div)) dd:nth-of-type(n + 1), form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dt:nth-of-type(n + 1), form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dd:nth-of-type(n + 1), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:nth-of-type(n + 1), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd:nth-of-type(n + 1), form.semanticForms dl:has(:not(div)) dt:nth-of-type(n + 1), form.semanticForms dl:has(:not(div)) dd:nth-of-type(n + 1), form.semanticForms dl.colspan-2:has(:not(div)) dt:nth-of-type(n + 1), form.semanticForms dl.colspan-2:has(:not(div)) dd:nth-of-type(n + 1), form.semanticForms dl.colspan-3:has(:not(div)) dt:nth-of-type(n + 1), form.semanticForms dl.colspan-3:has(:not(div)) dd:nth-of-type(n + 1), form.semanticForms dl.colspan-4:has(:not(div)) dt:nth-of-type(n + 1), form.semanticForms dl.colspan-4:has(:not(div)) dd:nth-of-type(n + 1), form.semanticForms dl.colspan-5:has(:not(div)) dt:nth-of-type(n + 1), form.semanticForms dl.colspan-5:has(:not(div)) dd:nth-of-type(n + 1), - fieldset fieldset dl:has(:not(div)) dt:nth-of-type(n + 1), - fieldset fieldset dl:has(:not(div)) dd:nth-of-type(n + 1), - fieldset fieldset.colspan-2 dl:has(:not(div)) dt:nth-of-type(n + 1), - fieldset fieldset.colspan-2 dl:has(:not(div)) dd:nth-of-type(n + 1), - fieldset fieldset.colspan-3 dl:has(:not(div)) dt:nth-of-type(n + 1), - fieldset fieldset.colspan-3 dl:has(:not(div)) dd:nth-of-type(n + 1), - fieldset fieldset.colspan-4 dl:has(:not(div)) dt:nth-of-type(n + 1), - fieldset fieldset.colspan-4 dl:has(:not(div)) dd:nth-of-type(n + 1), - fieldset fieldset.colspan-5 dl:has(:not(div)) dt:nth-of-type(n + 1), - fieldset fieldset.colspan-5 dl:has(:not(div)) dd:nth-of-type(n + 1), - fieldset dl:has(:not(div)) dt:nth-of-type(n + 1), - fieldset dl:has(:not(div)) dd:nth-of-type(n + 1), - fieldset dl.colspan-2:has(:not(div)) dt:nth-of-type(n + 1), - fieldset dl.colspan-2:has(:not(div)) dd:nth-of-type(n + 1), - fieldset dl.colspan-3:has(:not(div)) dt:nth-of-type(n + 1), - fieldset dl.colspan-3:has(:not(div)) dd:nth-of-type(n + 1), - fieldset dl.colspan-4:has(:not(div)) dt:nth-of-type(n + 1), - fieldset dl.colspan-4:has(:not(div)) dd:nth-of-type(n + 1), - fieldset dl.colspan-5:has(:not(div)) dt:nth-of-type(n + 1), - fieldset dl.colspan-5:has(:not(div)) dd:nth-of-type(n + 1) { - grid-column: 1; - } - form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-1), form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms fieldset dl:has(:not(div)) dd.colspan-1, form.semanticForms fieldset dl:has(:not(div)) dd.colspan-2, form.semanticForms fieldset dl:has(:not(div)) dd.colspan-3, form.semanticForms fieldset dl:has(:not(div)) dd.colspan-4, form.semanticForms fieldset dl:has(:not(div)) dd.colspan-5, form.semanticForms fieldset dl:has(:not(div)) dd.colspan-full, form.semanticForms fieldset.colspan-2 dl:has(:not(div)) dt:has(+ dd.colspan-1), form.semanticForms fieldset.colspan-2 dl:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms fieldset.colspan-2 dl:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms fieldset.colspan-2 dl:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms fieldset.colspan-2 dl:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms fieldset.colspan-2 dl:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms fieldset.colspan-2 dl:has(:not(div)) dd.colspan-1, form.semanticForms fieldset.colspan-2 dl:has(:not(div)) dd.colspan-2, form.semanticForms fieldset.colspan-2 dl:has(:not(div)) dd.colspan-3, form.semanticForms fieldset.colspan-2 dl:has(:not(div)) dd.colspan-4, form.semanticForms fieldset.colspan-2 dl:has(:not(div)) dd.colspan-5, form.semanticForms fieldset.colspan-2 dl:has(:not(div)) dd.colspan-full, form.semanticForms fieldset.colspan-3 dl:has(:not(div)) dt:has(+ dd.colspan-1), form.semanticForms fieldset.colspan-3 dl:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms fieldset.colspan-3 dl:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms fieldset.colspan-3 dl:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms fieldset.colspan-3 dl:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms fieldset.colspan-3 dl:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms fieldset.colspan-3 dl:has(:not(div)) dd.colspan-1, form.semanticForms fieldset.colspan-3 dl:has(:not(div)) dd.colspan-2, form.semanticForms fieldset.colspan-3 dl:has(:not(div)) dd.colspan-3, form.semanticForms fieldset.colspan-3 dl:has(:not(div)) dd.colspan-4, form.semanticForms fieldset.colspan-3 dl:has(:not(div)) dd.colspan-5, form.semanticForms fieldset.colspan-3 dl:has(:not(div)) dd.colspan-full, form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-1), form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dd.colspan-1, form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dd.colspan-2, form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dd.colspan-3, form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dd.colspan-4, form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dd.colspan-5, form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dd.colspan-full, form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-1), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd.colspan-1, form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd.colspan-2, form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd.colspan-3, form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd.colspan-4, form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd.colspan-5, form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd.colspan-full, form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-1), form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms dl:has(:not(div)) dd.colspan-1, form.semanticForms dl:has(:not(div)) dd.colspan-2, form.semanticForms dl:has(:not(div)) dd.colspan-3, form.semanticForms dl:has(:not(div)) dd.colspan-4, form.semanticForms dl:has(:not(div)) dd.colspan-5, form.semanticForms dl:has(:not(div)) dd.colspan-full, form.semanticForms dl.colspan-2:has(:not(div)) dt:has(+ dd.colspan-1), form.semanticForms dl.colspan-2:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms dl.colspan-2:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms dl.colspan-2:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms dl.colspan-2:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms dl.colspan-2:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms dl.colspan-2:has(:not(div)) dd.colspan-1, form.semanticForms dl.colspan-2:has(:not(div)) dd.colspan-2, form.semanticForms dl.colspan-2:has(:not(div)) dd.colspan-3, form.semanticForms dl.colspan-2:has(:not(div)) dd.colspan-4, form.semanticForms dl.colspan-2:has(:not(div)) dd.colspan-5, form.semanticForms dl.colspan-2:has(:not(div)) dd.colspan-full, form.semanticForms dl.colspan-3:has(:not(div)) dt:has(+ dd.colspan-1), form.semanticForms dl.colspan-3:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms dl.colspan-3:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms dl.colspan-3:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms dl.colspan-3:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms dl.colspan-3:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms dl.colspan-3:has(:not(div)) dd.colspan-1, form.semanticForms dl.colspan-3:has(:not(div)) dd.colspan-2, form.semanticForms dl.colspan-3:has(:not(div)) dd.colspan-3, form.semanticForms dl.colspan-3:has(:not(div)) dd.colspan-4, form.semanticForms dl.colspan-3:has(:not(div)) dd.colspan-5, form.semanticForms dl.colspan-3:has(:not(div)) dd.colspan-full, form.semanticForms dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-1), form.semanticForms dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms dl.colspan-4:has(:not(div)) dd.colspan-1, form.semanticForms dl.colspan-4:has(:not(div)) dd.colspan-2, form.semanticForms dl.colspan-4:has(:not(div)) dd.colspan-3, form.semanticForms dl.colspan-4:has(:not(div)) dd.colspan-4, form.semanticForms dl.colspan-4:has(:not(div)) dd.colspan-5, form.semanticForms dl.colspan-4:has(:not(div)) dd.colspan-full, form.semanticForms dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-1), form.semanticForms dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms dl.colspan-5:has(:not(div)) dd.colspan-1, form.semanticForms dl.colspan-5:has(:not(div)) dd.colspan-2, form.semanticForms dl.colspan-5:has(:not(div)) dd.colspan-3, form.semanticForms dl.colspan-5:has(:not(div)) dd.colspan-4, form.semanticForms dl.colspan-5:has(:not(div)) dd.colspan-5, form.semanticForms dl.colspan-5:has(:not(div)) dd.colspan-full, - fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-1), - fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-2), - fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-3), - fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-4), - fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-5), - fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-full), - fieldset fieldset dl:has(:not(div)) dd.colspan-1, - fieldset fieldset dl:has(:not(div)) dd.colspan-2, - fieldset fieldset dl:has(:not(div)) dd.colspan-3, - fieldset fieldset dl:has(:not(div)) dd.colspan-4, - fieldset fieldset dl:has(:not(div)) dd.colspan-5, - fieldset fieldset dl:has(:not(div)) dd.colspan-full, - fieldset fieldset.colspan-2 dl:has(:not(div)) dt:has(+ dd.colspan-1), - fieldset fieldset.colspan-2 dl:has(:not(div)) dt:has(+ dd.colspan-2), - fieldset fieldset.colspan-2 dl:has(:not(div)) dt:has(+ dd.colspan-3), - fieldset fieldset.colspan-2 dl:has(:not(div)) dt:has(+ dd.colspan-4), - fieldset fieldset.colspan-2 dl:has(:not(div)) dt:has(+ dd.colspan-5), - fieldset fieldset.colspan-2 dl:has(:not(div)) dt:has(+ dd.colspan-full), - fieldset fieldset.colspan-2 dl:has(:not(div)) dd.colspan-1, - fieldset fieldset.colspan-2 dl:has(:not(div)) dd.colspan-2, - fieldset fieldset.colspan-2 dl:has(:not(div)) dd.colspan-3, - fieldset fieldset.colspan-2 dl:has(:not(div)) dd.colspan-4, - fieldset fieldset.colspan-2 dl:has(:not(div)) dd.colspan-5, - fieldset fieldset.colspan-2 dl:has(:not(div)) dd.colspan-full, - fieldset fieldset.colspan-3 dl:has(:not(div)) dt:has(+ dd.colspan-1), - fieldset fieldset.colspan-3 dl:has(:not(div)) dt:has(+ dd.colspan-2), - fieldset fieldset.colspan-3 dl:has(:not(div)) dt:has(+ dd.colspan-3), - fieldset fieldset.colspan-3 dl:has(:not(div)) dt:has(+ dd.colspan-4), - fieldset fieldset.colspan-3 dl:has(:not(div)) dt:has(+ dd.colspan-5), - fieldset fieldset.colspan-3 dl:has(:not(div)) dt:has(+ dd.colspan-full), - fieldset fieldset.colspan-3 dl:has(:not(div)) dd.colspan-1, - fieldset fieldset.colspan-3 dl:has(:not(div)) dd.colspan-2, - fieldset fieldset.colspan-3 dl:has(:not(div)) dd.colspan-3, - fieldset fieldset.colspan-3 dl:has(:not(div)) dd.colspan-4, - fieldset fieldset.colspan-3 dl:has(:not(div)) dd.colspan-5, - fieldset fieldset.colspan-3 dl:has(:not(div)) dd.colspan-full, - fieldset fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-1), - fieldset fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-2), - fieldset fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-3), - fieldset fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-4), - fieldset fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-5), - fieldset fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-full), - fieldset fieldset.colspan-4 dl:has(:not(div)) dd.colspan-1, - fieldset fieldset.colspan-4 dl:has(:not(div)) dd.colspan-2, - fieldset fieldset.colspan-4 dl:has(:not(div)) dd.colspan-3, - fieldset fieldset.colspan-4 dl:has(:not(div)) dd.colspan-4, - fieldset fieldset.colspan-4 dl:has(:not(div)) dd.colspan-5, - fieldset fieldset.colspan-4 dl:has(:not(div)) dd.colspan-full, - fieldset fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-1), - fieldset fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-2), - fieldset fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-3), - fieldset fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-4), - fieldset fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-5), - fieldset fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-full), - fieldset fieldset.colspan-5 dl:has(:not(div)) dd.colspan-1, - fieldset fieldset.colspan-5 dl:has(:not(div)) dd.colspan-2, - fieldset fieldset.colspan-5 dl:has(:not(div)) dd.colspan-3, - fieldset fieldset.colspan-5 dl:has(:not(div)) dd.colspan-4, - fieldset fieldset.colspan-5 dl:has(:not(div)) dd.colspan-5, - fieldset fieldset.colspan-5 dl:has(:not(div)) dd.colspan-full, - fieldset dl:has(:not(div)) dt:has(+ dd.colspan-1), - fieldset dl:has(:not(div)) dt:has(+ dd.colspan-2), - fieldset dl:has(:not(div)) dt:has(+ dd.colspan-3), - fieldset dl:has(:not(div)) dt:has(+ dd.colspan-4), - fieldset dl:has(:not(div)) dt:has(+ dd.colspan-5), - fieldset dl:has(:not(div)) dt:has(+ dd.colspan-full), - fieldset dl:has(:not(div)) dd.colspan-1, - fieldset dl:has(:not(div)) dd.colspan-2, - fieldset dl:has(:not(div)) dd.colspan-3, - fieldset dl:has(:not(div)) dd.colspan-4, - fieldset dl:has(:not(div)) dd.colspan-5, - fieldset dl:has(:not(div)) dd.colspan-full, - fieldset dl.colspan-2:has(:not(div)) dt:has(+ dd.colspan-1), - fieldset dl.colspan-2:has(:not(div)) dt:has(+ dd.colspan-2), - fieldset dl.colspan-2:has(:not(div)) dt:has(+ dd.colspan-3), - fieldset dl.colspan-2:has(:not(div)) dt:has(+ dd.colspan-4), - fieldset dl.colspan-2:has(:not(div)) dt:has(+ dd.colspan-5), - fieldset dl.colspan-2:has(:not(div)) dt:has(+ dd.colspan-full), - fieldset dl.colspan-2:has(:not(div)) dd.colspan-1, - fieldset dl.colspan-2:has(:not(div)) dd.colspan-2, - fieldset dl.colspan-2:has(:not(div)) dd.colspan-3, - fieldset dl.colspan-2:has(:not(div)) dd.colspan-4, - fieldset dl.colspan-2:has(:not(div)) dd.colspan-5, - fieldset dl.colspan-2:has(:not(div)) dd.colspan-full, - fieldset dl.colspan-3:has(:not(div)) dt:has(+ dd.colspan-1), - fieldset dl.colspan-3:has(:not(div)) dt:has(+ dd.colspan-2), - fieldset dl.colspan-3:has(:not(div)) dt:has(+ dd.colspan-3), - fieldset dl.colspan-3:has(:not(div)) dt:has(+ dd.colspan-4), - fieldset dl.colspan-3:has(:not(div)) dt:has(+ dd.colspan-5), - fieldset dl.colspan-3:has(:not(div)) dt:has(+ dd.colspan-full), - fieldset dl.colspan-3:has(:not(div)) dd.colspan-1, - fieldset dl.colspan-3:has(:not(div)) dd.colspan-2, - fieldset dl.colspan-3:has(:not(div)) dd.colspan-3, - fieldset dl.colspan-3:has(:not(div)) dd.colspan-4, - fieldset dl.colspan-3:has(:not(div)) dd.colspan-5, - fieldset dl.colspan-3:has(:not(div)) dd.colspan-full, - fieldset dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-1), - fieldset dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-2), - fieldset dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-3), - fieldset dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-4), - fieldset dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-5), - fieldset dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-full), - fieldset dl.colspan-4:has(:not(div)) dd.colspan-1, - fieldset dl.colspan-4:has(:not(div)) dd.colspan-2, - fieldset dl.colspan-4:has(:not(div)) dd.colspan-3, - fieldset dl.colspan-4:has(:not(div)) dd.colspan-4, - fieldset dl.colspan-4:has(:not(div)) dd.colspan-5, - fieldset dl.colspan-4:has(:not(div)) dd.colspan-full, - fieldset dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-1), - fieldset dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-2), - fieldset dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-3), - fieldset dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-4), - fieldset dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-5), - fieldset dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-full), - fieldset dl.colspan-5:has(:not(div)) dd.colspan-1, - fieldset dl.colspan-5:has(:not(div)) dd.colspan-2, - fieldset dl.colspan-5:has(:not(div)) dd.colspan-3, - fieldset dl.colspan-5:has(:not(div)) dd.colspan-4, - fieldset dl.colspan-5:has(:not(div)) dd.colspan-5, - fieldset dl.colspan-5:has(:not(div)) dd.colspan-full { - grid-column: span 1; - } -} - /*# sourceMappingURL=semantic-forms.css.map */ diff --git a/dist/semantic-forms.js b/dist/semantic-forms.js index c18de25..3445840 100644 --- a/dist/semantic-forms.js +++ b/dist/semantic-forms.js @@ -24,7 +24,9 @@ if(!window.semanticFormsObserver){window.semanticFormsObserver=new window.Mutati /***/497: /***/(module,__unused_webpack_exports,__webpack_require__)=>{const{getOS,insertAfter}=__webpack_require__(584);const specialCharMap={Minus:"-",Equal:"=",BracketLeft:"[",BracketRight:"]",Backslash:"\\",Semicolon:";",Quote:"'",Comma:",",Period:".",Slash:"/",Backquote:"`"};const shiftSpecialCharMap={1:"!",2:"@",3:"#",4:"$",5:"%",6:"^",7:"&",8:"*",9:"(",0:")",Minus:"_",Equal:"+",BracketLeft:"{",BracketRight:"}",Backslash:"|",Semicolon:":",Quote:'"',Comma:"<",Period:">",Slash:"?",Backquote:"~"}; // handles keyboard shortcut events -const shortcutListener=(e,shortcuts)=>{const shortcut=shortcuts.find(shortcut=>{let matchesKey=false;if(e.altKey&&!e.shiftKey) +const shortcutListener=(e,shortcuts)=>{ +// search for matching shortcut from cached shortcut configs +const shortcut=shortcuts.find(shortcut=>{let matchesKey=false;if(e.altKey&&!e.shiftKey) // mac adjusts the key value if altKey is pressed matchesKey="Key"+shortcut.key.toUpperCase()===e.code||"Digit"+shortcut.key.toUpperCase()===e.code||shortcut.key===e.key||specialCharMap[e.code]===shortcut.key;else if(e.shiftKey){ // check shift special character map @@ -77,6 +79,7 @@ let dd=input.parentNode;while(dd&&dd.nodeName!=="DD")dd=dd.parentNode;if(!dd){co if(dd.parentElement.nodeName==="DIV")dd.parentElement.remove();const div=document.createElement("div");div.append(label.closest("dt"),dd);dl.append(div)}else{newLabel.setAttribute("for",input.id);newLabel.innerHTML=label.innerHTML;if(input.hasAttribute("title")&&label.getAttribute("data-show-help-icon")!==null&&!label.querySelector("span.help")){const text=input.getAttribute("title");newLabel.innerHTML+=` ${helpTextIcon}`}if(input.hasAttribute("required")&&label.getAttribute("data-no-asterisk")===null&&!label.querySelector("span.required")){const text=label.getAttribute("data-asterisk-text")||"This field is required.";newLabel.innerHTML+=` *`}label.setAttribute("hidden","hidden");insertAfter(newLabel,input)} // #endregion // #region standard inputs +const isWrapped=input.closest("dd").parentElement.nodeName==="DIV"; // check for auto-grow attribute on textareas if(input.getAttribute("data-auto-grow")!==null){ // progressively enhance inputs into textareas @@ -92,7 +95,7 @@ input.dispatchEvent(new Event("input",{bubbles:true}))});insertAfter(clearBtn,dd if(/colspan-/.test(dd.className)){const match=dd.className.match(/colspan-([0-9]|full)/)[0];dd.classList.remove(match);div.classList.add(match)} // check for max-content attribute // this may be removed once fully supported in Firefox and Safari: https://caniuse.com/wf-field-sizing -if(input.getAttribute("data-max-content")!==null)if(!("fieldSizing"in document.createElement("input").style)){const adjustWidth=()=>{const value=input.value!==""?input.value:input.placeholder;const width=value.length*8+40;input.style.width=width+"px";input.style.maxWidth="100%";div.style.width=width+"px"};adjustWidth();input.addEventListener("input",adjustWidth)}div.append(dt,dd);dl.append(div); +if(input.getAttribute("data-max-content")!==null)if(!("fieldSizing"in document.createElement("input").style)){const adjustWidth=()=>{const value=input.value!==""?input.value:input.placeholder;const width=value.length*8+40;input.style.width=width+"px";input.style.maxWidth="100%";div.style.width=width+"px"};adjustWidth();input.addEventListener("input",adjustWidth)}if(!isWrapped){div.append(dt,dd);dl.append(div)} // determine visibility of newly created
if(dt.style.display==="none"&&dd.style.display==="none")div.style.display="none"} // #endregion diff --git a/docs/statics/pages/fullDemo.html b/docs/statics/pages/fullDemo.html index 6c5acc2..d78ed99 100644 --- a/docs/statics/pages/fullDemo.html +++ b/docs/statics/pages/fullDemo.html @@ -240,18 +240,6 @@

Inputs

-
-
-
- - -
-
-
@@ -313,6 +301,18 @@

Selects

+
+
+
+ + +
+
+
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
@@ -1442,44 +1442,44 @@

Low flow (JavaScript disabled) styling

Colspan classes
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
diff --git a/semanticForms.scss b/semanticForms.scss index 2a4ae2c..8eefbb3 100644 --- a/semanticForms.scss +++ b/semanticForms.scss @@ -1153,7 +1153,6 @@ table.semanticForms.light { gap: 10px; dl { - grid-auto-flow: dense; gap: 0 10px; margin-bottom: 0px; } @@ -1366,389 +1365,389 @@ table.semanticForms { // #endregion // #region container queries -form.semanticForms, -fieldset { - container: semanticForm / inline-size; - - // max 7 columns - @container semanticForm (width >= 1810px) { - & fieldset dl, - & dl { - grid-template-columns: repeat(7, minmax(var(--semanticFormsInputMinWidth), 1fr)); - - &:has(:not(div)) { - & dt:nth-of-type(7n + 1), - & dd:nth-of-type(7n + 1) { - grid-column: 1; - } - - & dt:nth-of-type(7n + 2), - & dd:nth-of-type(7n + 2) { - grid-column: 2; - } - - & dt:nth-of-type(7n + 3), - & dd:nth-of-type(7n + 3) { - grid-column: 3; - } - - & dt:nth-of-type(7n + 4), - & dd:nth-of-type(7n + 4) { - grid-column: 4; - } - - & dt:nth-of-type(7n + 5), - & dd:nth-of-type(7n + 5) { - grid-column: 5; - } - - & dt:nth-of-type(7n + 6), - & dd:nth-of-type(7n + 6) { - grid-column: 6; - } - - & dt:nth-of-type(7n + 7), - & dd:nth-of-type(7n + 7) { - grid-column: 7; - } - - & dt:has(+ dd.colspan-5), - & dt:has(+ dd.colspan-full), - & dd.colspan-5, - & dd.colspan-full { - grid-column: span 5; - } - - & dt:has(+ dd.colspan-4), - & dd.colspan-4 { - grid-column: span 4; - } - - & dt:has(+ dd.colspan-3), - & dd.colspan-3 { - grid-column: span 3; - } - - & dt:has(+ dd.colspan-2), - & dd.colspan-2 { - grid-column: span 2; - } - } - } - } - - // max 6 columns - @container semanticForm (width >= 1550px) and (width < 1810px) { - & fieldset dl, - & dl { - grid-template-columns: repeat(6, minmax(var(--semanticFormsInputMinWidth), 1fr)); - - &:has(:not(div)) { - & dt:nth-of-type(6n + 1), - & dd:nth-of-type(6n + 1) { - grid-column: 1; - } +// form.semanticForms, +// fieldset { +// container: semanticForm / inline-size; + +// // max 7 columns +// @container semanticForm (width >= 1810px) { +// & fieldset dl, +// & dl { +// grid-template-columns: repeat(7, minmax(var(--semanticFormsInputMinWidth), 1fr)); + +// &:has(:not(div)) { +// & dt:nth-of-type(7n + 1), +// & dd:nth-of-type(7n + 1) { +// grid-column: 1; +// } + +// & dt:nth-of-type(7n + 2), +// & dd:nth-of-type(7n + 2) { +// grid-column: 2; +// } + +// & dt:nth-of-type(7n + 3), +// & dd:nth-of-type(7n + 3) { +// grid-column: 3; +// } + +// & dt:nth-of-type(7n + 4), +// & dd:nth-of-type(7n + 4) { +// grid-column: 4; +// } + +// & dt:nth-of-type(7n + 5), +// & dd:nth-of-type(7n + 5) { +// grid-column: 5; +// } + +// & dt:nth-of-type(7n + 6), +// & dd:nth-of-type(7n + 6) { +// grid-column: 6; +// } + +// & dt:nth-of-type(7n + 7), +// & dd:nth-of-type(7n + 7) { +// grid-column: 7; +// } + +// & dt:has(+ dd.colspan-5), +// & dt:has(+ dd.colspan-full), +// & dd.colspan-5, +// & dd.colspan-full { +// grid-column: span 5; +// } + +// & dt:has(+ dd.colspan-4), +// & dd.colspan-4 { +// grid-column: span 4; +// } + +// & dt:has(+ dd.colspan-3), +// & dd.colspan-3 { +// grid-column: span 3; +// } + +// & dt:has(+ dd.colspan-2), +// & dd.colspan-2 { +// grid-column: span 2; +// } +// } +// } +// } + +// // max 6 columns +// @container semanticForm (width >= 1550px) and (width < 1810px) { +// & fieldset dl, +// & dl { +// grid-template-columns: repeat(6, minmax(var(--semanticFormsInputMinWidth), 1fr)); + +// &:has(:not(div)) { +// & dt:nth-of-type(6n + 1), +// & dd:nth-of-type(6n + 1) { +// grid-column: 1; +// } - & dt:nth-of-type(6n + 2), - & dd:nth-of-type(6n + 2) { - grid-column: 2; - } +// & dt:nth-of-type(6n + 2), +// & dd:nth-of-type(6n + 2) { +// grid-column: 2; +// } - & dt:nth-of-type(6n + 3), - & dd:nth-of-type(6n + 3) { - grid-column: 3; - } +// & dt:nth-of-type(6n + 3), +// & dd:nth-of-type(6n + 3) { +// grid-column: 3; +// } - & dt:nth-of-type(6n + 4), - & dd:nth-of-type(6n + 4) { - grid-column: 4; - } +// & dt:nth-of-type(6n + 4), +// & dd:nth-of-type(6n + 4) { +// grid-column: 4; +// } - & dt:nth-of-type(6n + 5), - & dd:nth-of-type(6n + 5) { - grid-column: 5; - } +// & dt:nth-of-type(6n + 5), +// & dd:nth-of-type(6n + 5) { +// grid-column: 5; +// } - & dt:nth-of-type(6n + 6), - & dd:nth-of-type(6n + 6) { - grid-column: 6; - } - - & dt:has(+ dd.colspan-5), - & dt:has(+ dd.colspan-full), - & dd.colspan-5, - & dd.colspan-full { - grid-column: span 5; - } - - & dt:has(+ dd.colspan-4), - & dd.colspan-4 { - grid-column: span 4; - } - - & dt:has(+ dd.colspan-3), - & dd.colspan-3 { - grid-column: span 3; - } - - & dt:has(+ dd.colspan-2), - & dd.colspan-2 { - grid-column: span 2; - } - } - } - } - - // max 5 columns - @container semanticForm (width >= 1290px) and (width < 1550px) { - & fieldset dl, - & dl { - grid-template-columns: repeat(5, minmax(var(--semanticFormsInputMinWidth), 1fr)); - - &:has(:not(div)) { - & dt:nth-of-type(5n + 1), - & dd:nth-of-type(5n + 1) { - grid-column: 1; - } +// & dt:nth-of-type(6n + 6), +// & dd:nth-of-type(6n + 6) { +// grid-column: 6; +// } + +// & dt:has(+ dd.colspan-5), +// & dt:has(+ dd.colspan-full), +// & dd.colspan-5, +// & dd.colspan-full { +// grid-column: span 5; +// } + +// & dt:has(+ dd.colspan-4), +// & dd.colspan-4 { +// grid-column: span 4; +// } + +// & dt:has(+ dd.colspan-3), +// & dd.colspan-3 { +// grid-column: span 3; +// } + +// & dt:has(+ dd.colspan-2), +// & dd.colspan-2 { +// grid-column: span 2; +// } +// } +// } +// } + +// // max 5 columns +// @container semanticForm (width >= 1290px) and (width < 1550px) { +// & fieldset dl, +// & dl { +// grid-template-columns: repeat(5, minmax(var(--semanticFormsInputMinWidth), 1fr)); + +// &:has(:not(div)) { +// & dt:nth-of-type(5n + 1), +// & dd:nth-of-type(5n + 1) { +// grid-column: 1; +// } - & dt:nth-of-type(5n + 2), - & dd:nth-of-type(5n + 2) { - grid-column: 2; - } +// & dt:nth-of-type(5n + 2), +// & dd:nth-of-type(5n + 2) { +// grid-column: 2; +// } - & dt:nth-of-type(5n + 3), - & dd:nth-of-type(5n + 3) { - grid-column: 3; - } +// & dt:nth-of-type(5n + 3), +// & dd:nth-of-type(5n + 3) { +// grid-column: 3; +// } - & dt:nth-of-type(5n + 4), - & dd:nth-of-type(5n + 4) { - grid-column: 4; - } +// & dt:nth-of-type(5n + 4), +// & dd:nth-of-type(5n + 4) { +// grid-column: 4; +// } - & dt:nth-of-type(5n + 5), - & dd:nth-of-type(5n + 5) { - grid-column: 5; - } - - & dt:has(+ dd.colspan-5), - & dt:has(+ dd.colspan-full), - & dd.colspan-5, - & dd.colspan-full { - grid-column: span 5; - } - - & dt:has(+ dd.colspan-4), - & dd.colspan-4 { - grid-column: span 4; - } - - & dt:has(+ dd.colspan-3), - & dd.colspan-3 { - grid-column: span 3; - } - - & dt:has(+ dd.colspan-2), - & dd.colspan-2 { - grid-column: span 2; - } - } - } - } - - // max 4 columns - @container semanticForm (width >= 1030px) and (width < 1290px) { - & fieldset dl, - & fieldset.colspan-5 dl, - & dl, - & dl.colspan-5 { - grid-template-columns: repeat(4, minmax(var(--semanticFormsInputMinWidth), 1fr)); - - div.colspan-5 { - grid-column: span 4; - } - - &:has(:not(div)) { - & dt:nth-of-type(4n + 1), - & dd:nth-of-type(4n + 1) { - grid-column: 1; - } +// & dt:nth-of-type(5n + 5), +// & dd:nth-of-type(5n + 5) { +// grid-column: 5; +// } + +// & dt:has(+ dd.colspan-5), +// & dt:has(+ dd.colspan-full), +// & dd.colspan-5, +// & dd.colspan-full { +// grid-column: span 5; +// } + +// & dt:has(+ dd.colspan-4), +// & dd.colspan-4 { +// grid-column: span 4; +// } + +// & dt:has(+ dd.colspan-3), +// & dd.colspan-3 { +// grid-column: span 3; +// } + +// & dt:has(+ dd.colspan-2), +// & dd.colspan-2 { +// grid-column: span 2; +// } +// } +// } +// } + +// // max 4 columns +// @container semanticForm (width >= 1030px) and (width < 1290px) { +// & fieldset dl, +// & fieldset.colspan-5 dl, +// & dl, +// & dl.colspan-5 { +// grid-template-columns: repeat(4, minmax(var(--semanticFormsInputMinWidth), 1fr)); + +// div.colspan-5 { +// grid-column: span 4; +// } + +// &:has(:not(div)) { +// & dt:nth-of-type(4n + 1), +// & dd:nth-of-type(4n + 1) { +// grid-column: 1; +// } - & dt:nth-of-type(4n + 2), - & dd:nth-of-type(4n + 2) { - grid-column: 2; - } +// & dt:nth-of-type(4n + 2), +// & dd:nth-of-type(4n + 2) { +// grid-column: 2; +// } - & dt:nth-of-type(4n + 3), - & dd:nth-of-type(4n + 3) { - grid-column: 3; - } +// & dt:nth-of-type(4n + 3), +// & dd:nth-of-type(4n + 3) { +// grid-column: 3; +// } - & dt:nth-of-type(4n + 4), - & dd:nth-of-type(4n + 4) { - grid-column: 4; - } - - & dt:has(+ dd.colspan-4), - & dt:has(+ dd.colspan-5), - & dt:has(+ dd.colspan-full), - & dd.colspan-4, - & dd.colspan-5, - & dd.colspan-full { - grid-column: span 4; - } - - & dt:has(+ dd.colspan-3), - & dd.colspan-3 { - grid-column: span 3; - } - - & dt:has(+ dd.colspan-2), - & dd.colspan-2 { - grid-column: span 2; - } - } - } - } - - // max 3 columns - @container semanticForm (width >= 850px) and (width < 1030px) { - & fieldset dl, - & fieldset.colspan-4 dl, - & fieldset.colspan-5 dl, - & dl, - & dl.colspan-4, - & dl.colspan-5 { - grid-template-columns: repeat(3, minmax(var(--semanticFormsInputMinWidth), 1fr)); - - div.colspan-4, - div.colspan-5 { - grid-column: span 3; - } - - &:has(:not(div)) { - & dt:nth-of-type(3n + 1), - & dd:nth-of-type(3n + 1) { - grid-column: 1; - } +// & dt:nth-of-type(4n + 4), +// & dd:nth-of-type(4n + 4) { +// grid-column: 4; +// } + +// & dt:has(+ dd.colspan-4), +// & dt:has(+ dd.colspan-5), +// & dt:has(+ dd.colspan-full), +// & dd.colspan-4, +// & dd.colspan-5, +// & dd.colspan-full { +// grid-column: span 4; +// } + +// & dt:has(+ dd.colspan-3), +// & dd.colspan-3 { +// grid-column: span 3; +// } + +// & dt:has(+ dd.colspan-2), +// & dd.colspan-2 { +// grid-column: span 2; +// } +// } +// } +// } + +// // max 3 columns +// @container semanticForm (width >= 850px) and (width < 1030px) { +// & fieldset dl, +// & fieldset.colspan-4 dl, +// & fieldset.colspan-5 dl, +// & dl, +// & dl.colspan-4, +// & dl.colspan-5 { +// grid-template-columns: repeat(3, minmax(var(--semanticFormsInputMinWidth), 1fr)); + +// div.colspan-4, +// div.colspan-5 { +// grid-column: span 3; +// } + +// &:has(:not(div)) { +// & dt:nth-of-type(3n + 1), +// & dd:nth-of-type(3n + 1) { +// grid-column: 1; +// } - & dt:nth-of-type(3n + 2), - & dd:nth-of-type(3n + 2) { - grid-column: 2; - } +// & dt:nth-of-type(3n + 2), +// & dd:nth-of-type(3n + 2) { +// grid-column: 2; +// } - & dt:nth-of-type(3n + 3), - & dd:nth-of-type(3n + 3) { - grid-column: 3; - } - - & dt:has(+ dd.colspan-3), - & dt:has(+ dd.colspan-4), - & dt:has(+ dd.colspan-5), - & dt:has(+ dd.colspan-full), - & dd.colspan-3, - & dd.colspan-4, - & dd.colspan-5, - & dd.colspan-full { - grid-column: span 3; - } - - & dt:has(+ dd.colspan-2), - & dd.colspan-2 { - grid-column: span 2; - } - } - } - } - - // max 2 columns - @container semanticForm (width >= 510px) and (width < 850px) { - & fieldset dl, - & fieldset.colspan-3 dl, - & fieldset.colspan-4 dl, - & fieldset.colspan-5 dl, - & dl, - & dl.colspan-3, - & dl.colspan-4, - & dl.colspan-5 { - grid-template-columns: repeat(2, minmax(var(--semanticFormsInputMinWidth), 1fr)); - - div.colspan-3, - div.colspan-4, - div.colspan-5 { - grid-column: span 2; - } - - &:has(:not(div)) { - & dt:nth-of-type(2n + 1), - & dd:nth-of-type(2n + 1) { - grid-column: 1; - } +// & dt:nth-of-type(3n + 3), +// & dd:nth-of-type(3n + 3) { +// grid-column: 3; +// } + +// & dt:has(+ dd.colspan-3), +// & dt:has(+ dd.colspan-4), +// & dt:has(+ dd.colspan-5), +// & dt:has(+ dd.colspan-full), +// & dd.colspan-3, +// & dd.colspan-4, +// & dd.colspan-5, +// & dd.colspan-full { +// grid-column: span 3; +// } + +// & dt:has(+ dd.colspan-2), +// & dd.colspan-2 { +// grid-column: span 2; +// } +// } +// } +// } + +// // max 2 columns +// @container semanticForm (width >= 510px) and (width < 850px) { +// & fieldset dl, +// & fieldset.colspan-3 dl, +// & fieldset.colspan-4 dl, +// & fieldset.colspan-5 dl, +// & dl, +// & dl.colspan-3, +// & dl.colspan-4, +// & dl.colspan-5 { +// grid-template-columns: repeat(2, minmax(var(--semanticFormsInputMinWidth), 1fr)); + +// div.colspan-3, +// div.colspan-4, +// div.colspan-5 { +// grid-column: span 2; +// } + +// &:has(:not(div)) { +// & dt:nth-of-type(2n + 1), +// & dd:nth-of-type(2n + 1) { +// grid-column: 1; +// } - & dt:nth-of-type(2n + 2), - & dd:nth-of-type(2n + 2) { - grid-column: 2; - } - - & dt:has(+ dd.colspan-2), - & dt:has(+ dd.colspan-3), - & dt:has(+ dd.colspan-4), - & dt:has(+ dd.colspan-5), - & dt:has(+ dd.colspan-full), - & dd.colspan-2, - & dd.colspan-3, - & dd.colspan-4, - & dd.colspan-5, - & dd.colspan-full { - grid-column: span 2; - } - } - } - } - - // max 1 column - @container semanticForm (width < 510px) { - & fieldset dl, - & fieldset.colspan-2 dl, - & fieldset.colspan-3 dl, - & fieldset.colspan-4 dl, - & fieldset.colspan-5 dl, - & dl, - & dl.colspan-2, - & dl.colspan-3, - & dl.colspan-4, - & dl.colspan-5 { - grid-template-columns: repeat(1, minmax(var(--semanticFormsInputMinWidth), 1fr)); - - div.colspan-2, - div.colspan-3, - div.colspan-4, - div.colspan-5 { - grid-column: span 1; - } - - &:has(:not(div)) { - & dt:nth-of-type(n + 1), - & dd:nth-of-type(n + 1) { - grid-column: 1; - } - - & dt:has(+ dd.colspan-1), - & dt:has(+ dd.colspan-2), - & dt:has(+ dd.colspan-3), - & dt:has(+ dd.colspan-4), - & dt:has(+ dd.colspan-5), - & dt:has(+ dd.colspan-full), - & dd.colspan-1, - & dd.colspan-2, - & dd.colspan-3, - & dd.colspan-4, - & dd.colspan-5, - & dd.colspan-full { - grid-column: span 1; - } - } - } - } -} +// & dt:nth-of-type(2n + 2), +// & dd:nth-of-type(2n + 2) { +// grid-column: 2; +// } + +// & dt:has(+ dd.colspan-2), +// & dt:has(+ dd.colspan-3), +// & dt:has(+ dd.colspan-4), +// & dt:has(+ dd.colspan-5), +// & dt:has(+ dd.colspan-full), +// & dd.colspan-2, +// & dd.colspan-3, +// & dd.colspan-4, +// & dd.colspan-5, +// & dd.colspan-full { +// grid-column: span 2; +// } +// } +// } +// } + +// // max 1 column +// @container semanticForm (width < 510px) { +// & fieldset dl, +// & fieldset.colspan-2 dl, +// & fieldset.colspan-3 dl, +// & fieldset.colspan-4 dl, +// & fieldset.colspan-5 dl, +// & dl, +// & dl.colspan-2, +// & dl.colspan-3, +// & dl.colspan-4, +// & dl.colspan-5 { +// grid-template-columns: repeat(1, minmax(var(--semanticFormsInputMinWidth), 1fr)); + +// div.colspan-2, +// div.colspan-3, +// div.colspan-4, +// div.colspan-5 { +// grid-column: span 1; +// } + +// &:has(:not(div)) { +// & dt:nth-of-type(n + 1), +// & dd:nth-of-type(n + 1) { +// grid-column: 1; +// } + +// & dt:has(+ dd.colspan-1), +// & dt:has(+ dd.colspan-2), +// & dt:has(+ dd.colspan-3), +// & dt:has(+ dd.colspan-4), +// & dt:has(+ dd.colspan-5), +// & dt:has(+ dd.colspan-full), +// & dd.colspan-1, +// & dd.colspan-2, +// & dd.colspan-3, +// & dd.colspan-4, +// & dd.colspan-5, +// & dd.colspan-full { +// grid-column: span 1; +// } +// } +// } +// } +// } // #endregion From d64720420dbdfd1cef90979c53c44e869f310b8c Mon Sep 17 00:00:00 2001 From: Alex Widener Date: Fri, 7 Nov 2025 12:56:37 -0500 Subject: [PATCH 03/21] separate css, fix errors --- dist/semantic-forms.css | 451 +++++++++-------------------- lib/inputEnhancements.js | 609 ++++++++++++++++++++------------------- lib/keyboardShortcuts.js | 4 +- semanticForms.js | 29 +- semanticForms.scss | 413 +------------------------- styles/colspan.scss | 156 ++++++++++ styles/globals.scss | 87 ++++++ styles/lowFlow.scss | 159 ++++++++++ 8 files changed, 863 insertions(+), 1045 deletions(-) create mode 100644 styles/colspan.scss create mode 100644 styles/globals.scss create mode 100644 styles/lowFlow.scss diff --git a/dist/semantic-forms.css b/dist/semantic-forms.css index 3290eab..6eab9a6 100644 --- a/dist/semantic-forms.css +++ b/dist/semantic-forms.css @@ -122,6 +122,142 @@ form.semanticForms.dark input::-webkit-calendar-picker-indicator, table.semantic filter: invert(100%); } +form.semanticForms.lowFlow, +form.semanticForms:not(.semanticFormsActive) { + gap: 10px; +} +form.semanticForms.lowFlow dl, +form.semanticForms:not(.semanticFormsActive) dl { + gap: 0 10px; + margin-bottom: 0px; +} +form.semanticForms.lowFlow > dt:nth-of-type(2n + 1), form.semanticForms.lowFlow > dd:nth-of-type(2n + 1), +form.semanticForms:not(.semanticFormsActive) > dt:nth-of-type(2n + 1), +form.semanticForms:not(.semanticFormsActive) > dd:nth-of-type(2n + 1) { + grid-column: 1; +} +form.semanticForms.lowFlow > dt:nth-of-type(2n + 2), form.semanticForms.lowFlow > dd:nth-of-type(2n + 2), +form.semanticForms:not(.semanticFormsActive) > dt:nth-of-type(2n + 2), +form.semanticForms:not(.semanticFormsActive) > dd:nth-of-type(2n + 2) { + grid-column: 2; +} +form.semanticForms.lowFlow dt, +form.semanticForms:not(.semanticFormsActive) dt { + min-width: var(--semanticFormsInputMinWidth); /* this matches the max-width of js-enabled inputs */ +} +form.semanticForms.lowFlow dt label, +form.semanticForms:not(.semanticFormsActive) dt label { + position: absolute; + display: block; + height: 11px; + transform: scale(0.7); + transform-origin: left center; + padding-left: 22px; + margin-top: -1px; +} +form.semanticForms.lowFlow dt:has(+ dd input:required) label::after, +form.semanticForms:not(.semanticFormsActive) dt:has(+ dd input:required) label::after { + content: " *"; + color: red; +} +form.semanticForms.lowFlow dt:has(+ dd.checkboxes) label, form.semanticForms.lowFlow dt:has(+ dd.radios) label, +form.semanticForms:not(.semanticFormsActive) dt:has(+ dd.checkboxes) label, +form.semanticForms:not(.semanticFormsActive) dt:has(+ dd.radios) label { + padding-left: 15px; +} +form.semanticForms.lowFlow dt:not(:has(+ dd ul)):has(+ dd input[type=checkbox]) label, +form.semanticForms:not(.semanticFormsActive) dt:not(:has(+ dd ul)):has(+ dd input[type=checkbox]) label { + transform: scale(1); + margin-top: 0; + margin-left: 8px; +} +form.semanticForms.lowFlow dt:not(:has(+ dd ul)):has(+ dd input[type=radio]) label, +form.semanticForms:not(.semanticFormsActive) dt:not(:has(+ dd ul)):has(+ dd input[type=radio]) label { + transform: scale(1); + margin-top: 0; + margin-left: 8px; +} +form.semanticForms.lowFlow dd, +form.semanticForms:not(.semanticFormsActive) dd { + margin-top: var(--semanticFormsInputTopMargin); + margin-bottom: 10px; + min-width: var(--semanticFormsInputMinWidth); /* this matches the max-width of js-enabled inputs */ +} +form.semanticForms.lowFlow dd.checkboxes, form.semanticForms.lowFlow dd.radios, +form.semanticForms:not(.semanticFormsActive) dd.checkboxes, +form.semanticForms:not(.semanticFormsActive) dd.radios { + margin-top: 0; +} +form.semanticForms.lowFlow dd.checkboxes ul input[type=radio], form.semanticForms.lowFlow dd.radios ul input[type=radio], +form.semanticForms:not(.semanticFormsActive) dd.checkboxes ul input[type=radio], +form.semanticForms:not(.semanticFormsActive) dd.radios ul input[type=radio] { + margin-top: 3px; +} +form.semanticForms.lowFlow dd.checkboxes ul label, form.semanticForms.lowFlow dd.radios ul label, +form.semanticForms:not(.semanticFormsActive) dd.checkboxes ul label, +form.semanticForms:not(.semanticFormsActive) dd.radios ul label { + padding-top: 7px; + padding-left: 0; + font-size: var(--semanticFormsFontSize); +} +form.semanticForms.lowFlow dd.checkboxes ul + label, form.semanticForms.lowFlow dd.radios ul + label, +form.semanticForms:not(.semanticFormsActive) dd.checkboxes ul + label, +form.semanticForms:not(.semanticFormsActive) dd.radios ul + label { + margin-top: 0; + font-size: small; +} +form.semanticForms.lowFlow dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]), +form.semanticForms:not(.semanticFormsActive) dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) { + margin-top: 0; + padding-left: 10px; +} +form.semanticForms.lowFlow dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=checkbox], +form.semanticForms.lowFlow dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=radio], +form.semanticForms:not(.semanticFormsActive) dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=checkbox], +form.semanticForms:not(.semanticFormsActive) dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=radio] { + margin-left: 1px; + margin-top: 1px; + margin-right: auto; +} +form.semanticForms.lowFlow dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) label, +form.semanticForms:not(.semanticFormsActive) dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) label { + font-size: small; + margin-top: -1px; + padding-left: 11px; +} +form.semanticForms.lowFlow dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=radio] + label, +form.semanticForms:not(.semanticFormsActive) dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=radio] + label { + margin-top: -4px; +} +form.semanticForms.lowFlow dd input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio], [type=range]), +form.semanticForms.lowFlow dd select, +form.semanticForms.lowFlow dd textarea, +form.semanticForms:not(.semanticFormsActive) dd input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio], [type=range]), +form.semanticForms:not(.semanticFormsActive) dd select, +form.semanticForms:not(.semanticFormsActive) dd textarea { + padding-right: 6px; +} +form.semanticForms.lowFlow dd label, +form.semanticForms:not(.semanticFormsActive) dd label { + padding-left: 10px; + margin-top: -5px; + font-size: small; + color: var(--semanticFormsPlaceholderColor); +} +form.semanticForms.lowFlow dd button:not(.clear, .show), +form.semanticForms.lowFlow dd input[type=submit]:not(.clear, .show), +form.semanticForms.lowFlow dd input[type=button]:not(.clear, .show), +form.semanticForms:not(.semanticFormsActive) dd button:not(.clear, .show), +form.semanticForms:not(.semanticFormsActive) dd input[type=submit]:not(.clear, .show), +form.semanticForms:not(.semanticFormsActive) dd input[type=button]:not(.clear, .show) { + margin-top: 0; +} + +.checkboxes ul, +.radios ul { + margin-top: var(--semanticFormsInputTopMargin); +} + form.semanticForms, form.semanticForms.light, table.semanticForms, @@ -2115,321 +2251,6 @@ table.semanticForms.light dl.colspan-5 dt:nth-of-type(5n + 5), table.semanticForms.light dl.colspan-5 dd:nth-of-type(5n + 5) { grid-column: 5; } -form.semanticForms.lowFlow, form.semanticForms:not(.semanticFormsActive), -form.semanticForms.light.lowFlow, -form.semanticForms.light:not(.semanticFormsActive), -table.semanticForms.lowFlow, -table.semanticForms:not(.semanticFormsActive), -table.semanticForms.light.lowFlow, -table.semanticForms.light:not(.semanticFormsActive) { - gap: 10px; -} -form.semanticForms.lowFlow dl, form.semanticForms:not(.semanticFormsActive) dl, -form.semanticForms.light.lowFlow dl, -form.semanticForms.light:not(.semanticFormsActive) dl, -table.semanticForms.lowFlow dl, -table.semanticForms:not(.semanticFormsActive) dl, -table.semanticForms.light.lowFlow dl, -table.semanticForms.light:not(.semanticFormsActive) dl { - gap: 0 10px; - margin-bottom: 0px; -} -form.semanticForms.lowFlow > dt:nth-of-type(2n + 1), form.semanticForms.lowFlow > dd:nth-of-type(2n + 1), form.semanticForms:not(.semanticFormsActive) > dt:nth-of-type(2n + 1), form.semanticForms:not(.semanticFormsActive) > dd:nth-of-type(2n + 1), -form.semanticForms.light.lowFlow > dt:nth-of-type(2n + 1), -form.semanticForms.light.lowFlow > dd:nth-of-type(2n + 1), -form.semanticForms.light:not(.semanticFormsActive) > dt:nth-of-type(2n + 1), -form.semanticForms.light:not(.semanticFormsActive) > dd:nth-of-type(2n + 1), -table.semanticForms.lowFlow > dt:nth-of-type(2n + 1), -table.semanticForms.lowFlow > dd:nth-of-type(2n + 1), -table.semanticForms:not(.semanticFormsActive) > dt:nth-of-type(2n + 1), -table.semanticForms:not(.semanticFormsActive) > dd:nth-of-type(2n + 1), -table.semanticForms.light.lowFlow > dt:nth-of-type(2n + 1), -table.semanticForms.light.lowFlow > dd:nth-of-type(2n + 1), -table.semanticForms.light:not(.semanticFormsActive) > dt:nth-of-type(2n + 1), -table.semanticForms.light:not(.semanticFormsActive) > dd:nth-of-type(2n + 1) { - grid-column: 1; -} -form.semanticForms.lowFlow > dt:nth-of-type(2n + 2), form.semanticForms.lowFlow > dd:nth-of-type(2n + 2), form.semanticForms:not(.semanticFormsActive) > dt:nth-of-type(2n + 2), form.semanticForms:not(.semanticFormsActive) > dd:nth-of-type(2n + 2), -form.semanticForms.light.lowFlow > dt:nth-of-type(2n + 2), -form.semanticForms.light.lowFlow > dd:nth-of-type(2n + 2), -form.semanticForms.light:not(.semanticFormsActive) > dt:nth-of-type(2n + 2), -form.semanticForms.light:not(.semanticFormsActive) > dd:nth-of-type(2n + 2), -table.semanticForms.lowFlow > dt:nth-of-type(2n + 2), -table.semanticForms.lowFlow > dd:nth-of-type(2n + 2), -table.semanticForms:not(.semanticFormsActive) > dt:nth-of-type(2n + 2), -table.semanticForms:not(.semanticFormsActive) > dd:nth-of-type(2n + 2), -table.semanticForms.light.lowFlow > dt:nth-of-type(2n + 2), -table.semanticForms.light.lowFlow > dd:nth-of-type(2n + 2), -table.semanticForms.light:not(.semanticFormsActive) > dt:nth-of-type(2n + 2), -table.semanticForms.light:not(.semanticFormsActive) > dd:nth-of-type(2n + 2) { - grid-column: 2; -} -form.semanticForms.lowFlow dt, form.semanticForms:not(.semanticFormsActive) dt, -form.semanticForms.light.lowFlow dt, -form.semanticForms.light:not(.semanticFormsActive) dt, -table.semanticForms.lowFlow dt, -table.semanticForms:not(.semanticFormsActive) dt, -table.semanticForms.light.lowFlow dt, -table.semanticForms.light:not(.semanticFormsActive) dt { - min-width: var(--semanticFormsInputMinWidth); /* this matches the max-width of js-enabled inputs */ -} -form.semanticForms.lowFlow dt label, form.semanticForms:not(.semanticFormsActive) dt label, -form.semanticForms.light.lowFlow dt label, -form.semanticForms.light:not(.semanticFormsActive) dt label, -table.semanticForms.lowFlow dt label, -table.semanticForms:not(.semanticFormsActive) dt label, -table.semanticForms.light.lowFlow dt label, -table.semanticForms.light:not(.semanticFormsActive) dt label { - position: absolute; - display: block; - height: 11px; - transform: scale(0.7); - transform-origin: left center; - padding-left: 22px; - margin-top: -1px; -} -form.semanticForms.lowFlow dt:has(+ dd input:required) label::after, form.semanticForms:not(.semanticFormsActive) dt:has(+ dd input:required) label::after, -form.semanticForms.light.lowFlow dt:has(+ dd input:required) label::after, -form.semanticForms.light:not(.semanticFormsActive) dt:has(+ dd input:required) label::after, -table.semanticForms.lowFlow dt:has(+ dd input:required) label::after, -table.semanticForms:not(.semanticFormsActive) dt:has(+ dd input:required) label::after, -table.semanticForms.light.lowFlow dt:has(+ dd input:required) label::after, -table.semanticForms.light:not(.semanticFormsActive) dt:has(+ dd input:required) label::after { - content: " *"; - color: red; -} -form.semanticForms.lowFlow dt:has(+ dd.checkboxes) label, form.semanticForms.lowFlow dt:has(+ dd.radios) label, form.semanticForms:not(.semanticFormsActive) dt:has(+ dd.checkboxes) label, form.semanticForms:not(.semanticFormsActive) dt:has(+ dd.radios) label, -form.semanticForms.light.lowFlow dt:has(+ dd.checkboxes) label, -form.semanticForms.light.lowFlow dt:has(+ dd.radios) label, -form.semanticForms.light:not(.semanticFormsActive) dt:has(+ dd.checkboxes) label, -form.semanticForms.light:not(.semanticFormsActive) dt:has(+ dd.radios) label, -table.semanticForms.lowFlow dt:has(+ dd.checkboxes) label, -table.semanticForms.lowFlow dt:has(+ dd.radios) label, -table.semanticForms:not(.semanticFormsActive) dt:has(+ dd.checkboxes) label, -table.semanticForms:not(.semanticFormsActive) dt:has(+ dd.radios) label, -table.semanticForms.light.lowFlow dt:has(+ dd.checkboxes) label, -table.semanticForms.light.lowFlow dt:has(+ dd.radios) label, -table.semanticForms.light:not(.semanticFormsActive) dt:has(+ dd.checkboxes) label, -table.semanticForms.light:not(.semanticFormsActive) dt:has(+ dd.radios) label { - padding-left: 15px; -} -form.semanticForms.lowFlow dt:not(:has(+ dd ul)):has(+ dd input[type=checkbox]) label, form.semanticForms:not(.semanticFormsActive) dt:not(:has(+ dd ul)):has(+ dd input[type=checkbox]) label, -form.semanticForms.light.lowFlow dt:not(:has(+ dd ul)):has(+ dd input[type=checkbox]) label, -form.semanticForms.light:not(.semanticFormsActive) dt:not(:has(+ dd ul)):has(+ dd input[type=checkbox]) label, -table.semanticForms.lowFlow dt:not(:has(+ dd ul)):has(+ dd input[type=checkbox]) label, -table.semanticForms:not(.semanticFormsActive) dt:not(:has(+ dd ul)):has(+ dd input[type=checkbox]) label, -table.semanticForms.light.lowFlow dt:not(:has(+ dd ul)):has(+ dd input[type=checkbox]) label, -table.semanticForms.light:not(.semanticFormsActive) dt:not(:has(+ dd ul)):has(+ dd input[type=checkbox]) label { - transform: scale(1); - margin-top: 0; - margin-left: 8px; -} -form.semanticForms.lowFlow dt:not(:has(+ dd ul)):has(+ dd input[type=radio]) label, form.semanticForms:not(.semanticFormsActive) dt:not(:has(+ dd ul)):has(+ dd input[type=radio]) label, -form.semanticForms.light.lowFlow dt:not(:has(+ dd ul)):has(+ dd input[type=radio]) label, -form.semanticForms.light:not(.semanticFormsActive) dt:not(:has(+ dd ul)):has(+ dd input[type=radio]) label, -table.semanticForms.lowFlow dt:not(:has(+ dd ul)):has(+ dd input[type=radio]) label, -table.semanticForms:not(.semanticFormsActive) dt:not(:has(+ dd ul)):has(+ dd input[type=radio]) label, -table.semanticForms.light.lowFlow dt:not(:has(+ dd ul)):has(+ dd input[type=radio]) label, -table.semanticForms.light:not(.semanticFormsActive) dt:not(:has(+ dd ul)):has(+ dd input[type=radio]) label { - transform: scale(1); - margin-top: 0; - margin-left: 8px; -} -form.semanticForms.lowFlow dd, form.semanticForms:not(.semanticFormsActive) dd, -form.semanticForms.light.lowFlow dd, -form.semanticForms.light:not(.semanticFormsActive) dd, -table.semanticForms.lowFlow dd, -table.semanticForms:not(.semanticFormsActive) dd, -table.semanticForms.light.lowFlow dd, -table.semanticForms.light:not(.semanticFormsActive) dd { - margin-top: var(--semanticFormsInputTopMargin); - margin-bottom: 10px; - min-width: var(--semanticFormsInputMinWidth); /* this matches the max-width of js-enabled inputs */ -} -form.semanticForms.lowFlow dd.checkboxes, form.semanticForms.lowFlow dd.radios, form.semanticForms:not(.semanticFormsActive) dd.checkboxes, form.semanticForms:not(.semanticFormsActive) dd.radios, -form.semanticForms.light.lowFlow dd.checkboxes, -form.semanticForms.light.lowFlow dd.radios, -form.semanticForms.light:not(.semanticFormsActive) dd.checkboxes, -form.semanticForms.light:not(.semanticFormsActive) dd.radios, -table.semanticForms.lowFlow dd.checkboxes, -table.semanticForms.lowFlow dd.radios, -table.semanticForms:not(.semanticFormsActive) dd.checkboxes, -table.semanticForms:not(.semanticFormsActive) dd.radios, -table.semanticForms.light.lowFlow dd.checkboxes, -table.semanticForms.light.lowFlow dd.radios, -table.semanticForms.light:not(.semanticFormsActive) dd.checkboxes, -table.semanticForms.light:not(.semanticFormsActive) dd.radios { - margin-top: 0; -} -form.semanticForms.lowFlow dd.checkboxes ul input[type=radio], form.semanticForms.lowFlow dd.radios ul input[type=radio], form.semanticForms:not(.semanticFormsActive) dd.checkboxes ul input[type=radio], form.semanticForms:not(.semanticFormsActive) dd.radios ul input[type=radio], -form.semanticForms.light.lowFlow dd.checkboxes ul input[type=radio], -form.semanticForms.light.lowFlow dd.radios ul input[type=radio], -form.semanticForms.light:not(.semanticFormsActive) dd.checkboxes ul input[type=radio], -form.semanticForms.light:not(.semanticFormsActive) dd.radios ul input[type=radio], -table.semanticForms.lowFlow dd.checkboxes ul input[type=radio], -table.semanticForms.lowFlow dd.radios ul input[type=radio], -table.semanticForms:not(.semanticFormsActive) dd.checkboxes ul input[type=radio], -table.semanticForms:not(.semanticFormsActive) dd.radios ul input[type=radio], -table.semanticForms.light.lowFlow dd.checkboxes ul input[type=radio], -table.semanticForms.light.lowFlow dd.radios ul input[type=radio], -table.semanticForms.light:not(.semanticFormsActive) dd.checkboxes ul input[type=radio], -table.semanticForms.light:not(.semanticFormsActive) dd.radios ul input[type=radio] { - margin-top: 3px; -} -form.semanticForms.lowFlow dd.checkboxes ul label, form.semanticForms.lowFlow dd.radios ul label, form.semanticForms:not(.semanticFormsActive) dd.checkboxes ul label, form.semanticForms:not(.semanticFormsActive) dd.radios ul label, -form.semanticForms.light.lowFlow dd.checkboxes ul label, -form.semanticForms.light.lowFlow dd.radios ul label, -form.semanticForms.light:not(.semanticFormsActive) dd.checkboxes ul label, -form.semanticForms.light:not(.semanticFormsActive) dd.radios ul label, -table.semanticForms.lowFlow dd.checkboxes ul label, -table.semanticForms.lowFlow dd.radios ul label, -table.semanticForms:not(.semanticFormsActive) dd.checkboxes ul label, -table.semanticForms:not(.semanticFormsActive) dd.radios ul label, -table.semanticForms.light.lowFlow dd.checkboxes ul label, -table.semanticForms.light.lowFlow dd.radios ul label, -table.semanticForms.light:not(.semanticFormsActive) dd.checkboxes ul label, -table.semanticForms.light:not(.semanticFormsActive) dd.radios ul label { - padding-top: 7px; - padding-left: 0; - font-size: var(--semanticFormsFontSize); -} -form.semanticForms.lowFlow dd.checkboxes ul + label, form.semanticForms.lowFlow dd.radios ul + label, form.semanticForms:not(.semanticFormsActive) dd.checkboxes ul + label, form.semanticForms:not(.semanticFormsActive) dd.radios ul + label, -form.semanticForms.light.lowFlow dd.checkboxes ul + label, -form.semanticForms.light.lowFlow dd.radios ul + label, -form.semanticForms.light:not(.semanticFormsActive) dd.checkboxes ul + label, -form.semanticForms.light:not(.semanticFormsActive) dd.radios ul + label, -table.semanticForms.lowFlow dd.checkboxes ul + label, -table.semanticForms.lowFlow dd.radios ul + label, -table.semanticForms:not(.semanticFormsActive) dd.checkboxes ul + label, -table.semanticForms:not(.semanticFormsActive) dd.radios ul + label, -table.semanticForms.light.lowFlow dd.checkboxes ul + label, -table.semanticForms.light.lowFlow dd.radios ul + label, -table.semanticForms.light:not(.semanticFormsActive) dd.checkboxes ul + label, -table.semanticForms.light:not(.semanticFormsActive) dd.radios ul + label { - margin-top: 0; - font-size: small; -} -form.semanticForms.lowFlow dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]), form.semanticForms:not(.semanticFormsActive) dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]), -form.semanticForms.light.lowFlow dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]), -form.semanticForms.light:not(.semanticFormsActive) dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]), -table.semanticForms.lowFlow dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]), -table.semanticForms:not(.semanticFormsActive) dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]), -table.semanticForms.light.lowFlow dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]), -table.semanticForms.light:not(.semanticFormsActive) dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) { - margin-top: 0; - padding-left: 10px; -} -form.semanticForms.lowFlow dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=checkbox], -form.semanticForms.lowFlow dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=radio], form.semanticForms:not(.semanticFormsActive) dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=checkbox], -form.semanticForms:not(.semanticFormsActive) dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=radio], -form.semanticForms.light.lowFlow dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=checkbox], -form.semanticForms.light.lowFlow dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=radio], -form.semanticForms.light:not(.semanticFormsActive) dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=checkbox], -form.semanticForms.light:not(.semanticFormsActive) dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=radio], -table.semanticForms.lowFlow dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=checkbox], -table.semanticForms.lowFlow dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=radio], -table.semanticForms:not(.semanticFormsActive) dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=checkbox], -table.semanticForms:not(.semanticFormsActive) dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=radio], -table.semanticForms.light.lowFlow dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=checkbox], -table.semanticForms.light.lowFlow dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=radio], -table.semanticForms.light:not(.semanticFormsActive) dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=checkbox], -table.semanticForms.light:not(.semanticFormsActive) dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=radio] { - margin-left: 1px; - margin-top: 1px; - margin-right: auto; -} -form.semanticForms.lowFlow dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) label, form.semanticForms:not(.semanticFormsActive) dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) label, -form.semanticForms.light.lowFlow dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) label, -form.semanticForms.light:not(.semanticFormsActive) dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) label, -table.semanticForms.lowFlow dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) label, -table.semanticForms:not(.semanticFormsActive) dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) label, -table.semanticForms.light.lowFlow dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) label, -table.semanticForms.light:not(.semanticFormsActive) dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) label { - font-size: small; - margin-top: -1px; - padding-left: 11px; -} -form.semanticForms.lowFlow dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=radio] + label, form.semanticForms:not(.semanticFormsActive) dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=radio] + label, -form.semanticForms.light.lowFlow dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=radio] + label, -form.semanticForms.light:not(.semanticFormsActive) dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=radio] + label, -table.semanticForms.lowFlow dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=radio] + label, -table.semanticForms:not(.semanticFormsActive) dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=radio] + label, -table.semanticForms.light.lowFlow dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=radio] + label, -table.semanticForms.light:not(.semanticFormsActive) dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=radio] + label { - margin-top: -4px; -} -form.semanticForms.lowFlow dd input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio], [type=range]), -form.semanticForms.lowFlow dd select, -form.semanticForms.lowFlow dd textarea, form.semanticForms:not(.semanticFormsActive) dd input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio], [type=range]), -form.semanticForms:not(.semanticFormsActive) dd select, -form.semanticForms:not(.semanticFormsActive) dd textarea, -form.semanticForms.light.lowFlow dd input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio], [type=range]), -form.semanticForms.light.lowFlow dd select, -form.semanticForms.light.lowFlow dd textarea, -form.semanticForms.light:not(.semanticFormsActive) dd input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio], [type=range]), -form.semanticForms.light:not(.semanticFormsActive) dd select, -form.semanticForms.light:not(.semanticFormsActive) dd textarea, -table.semanticForms.lowFlow dd input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio], [type=range]), -table.semanticForms.lowFlow dd select, -table.semanticForms.lowFlow dd textarea, -table.semanticForms:not(.semanticFormsActive) dd input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio], [type=range]), -table.semanticForms:not(.semanticFormsActive) dd select, -table.semanticForms:not(.semanticFormsActive) dd textarea, -table.semanticForms.light.lowFlow dd input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio], [type=range]), -table.semanticForms.light.lowFlow dd select, -table.semanticForms.light.lowFlow dd textarea, -table.semanticForms.light:not(.semanticFormsActive) dd input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio], [type=range]), -table.semanticForms.light:not(.semanticFormsActive) dd select, -table.semanticForms.light:not(.semanticFormsActive) dd textarea { - padding-right: 6px; -} -form.semanticForms.lowFlow dd label, form.semanticForms:not(.semanticFormsActive) dd label, -form.semanticForms.light.lowFlow dd label, -form.semanticForms.light:not(.semanticFormsActive) dd label, -table.semanticForms.lowFlow dd label, -table.semanticForms:not(.semanticFormsActive) dd label, -table.semanticForms.light.lowFlow dd label, -table.semanticForms.light:not(.semanticFormsActive) dd label { - padding-left: 10px; - margin-top: -5px; - font-size: small; - color: var(--semanticFormsPlaceholderColor); -} -form.semanticForms.lowFlow dd button:not(.clear, .show), -form.semanticForms.lowFlow dd input[type=submit]:not(.clear, .show), -form.semanticForms.lowFlow dd input[type=button]:not(.clear, .show), form.semanticForms:not(.semanticFormsActive) dd button:not(.clear, .show), -form.semanticForms:not(.semanticFormsActive) dd input[type=submit]:not(.clear, .show), -form.semanticForms:not(.semanticFormsActive) dd input[type=button]:not(.clear, .show), -form.semanticForms.light.lowFlow dd button:not(.clear, .show), -form.semanticForms.light.lowFlow dd input[type=submit]:not(.clear, .show), -form.semanticForms.light.lowFlow dd input[type=button]:not(.clear, .show), -form.semanticForms.light:not(.semanticFormsActive) dd button:not(.clear, .show), -form.semanticForms.light:not(.semanticFormsActive) dd input[type=submit]:not(.clear, .show), -form.semanticForms.light:not(.semanticFormsActive) dd input[type=button]:not(.clear, .show), -table.semanticForms.lowFlow dd button:not(.clear, .show), -table.semanticForms.lowFlow dd input[type=submit]:not(.clear, .show), -table.semanticForms.lowFlow dd input[type=button]:not(.clear, .show), -table.semanticForms:not(.semanticFormsActive) dd button:not(.clear, .show), -table.semanticForms:not(.semanticFormsActive) dd input[type=submit]:not(.clear, .show), -table.semanticForms:not(.semanticFormsActive) dd input[type=button]:not(.clear, .show), -table.semanticForms.light.lowFlow dd button:not(.clear, .show), -table.semanticForms.light.lowFlow dd input[type=submit]:not(.clear, .show), -table.semanticForms.light.lowFlow dd input[type=button]:not(.clear, .show), -table.semanticForms.light:not(.semanticFormsActive) dd button:not(.clear, .show), -table.semanticForms.light:not(.semanticFormsActive) dd input[type=submit]:not(.clear, .show), -table.semanticForms.light:not(.semanticFormsActive) dd input[type=button]:not(.clear, .show) { - margin-top: 0; -} -form.semanticForms .checkboxes ul, -form.semanticForms .radios ul, -form.semanticForms.light .checkboxes ul, -form.semanticForms.light .radios ul, -table.semanticForms .checkboxes ul, -table.semanticForms .radios ul, -table.semanticForms.light .checkboxes ul, -table.semanticForms.light .radios ul { - margin-top: var(--semanticFormsInputTopMargin); -} .semanticForms table, table.semanticForms { diff --git a/lib/inputEnhancements.js b/lib/inputEnhancements.js index 21c8d02..ad6c4a2 100644 --- a/lib/inputEnhancements.js +++ b/lib/inputEnhancements.js @@ -1,361 +1,388 @@ const { insertAfter } = require('./helpers.js') -const passwordShow = '' -const passwordHide = '' -const helpTextIcon = '' +const icons = { + passwordShow: '', + passwordHide: '', + helpIcon: '' +} + +const lookups = { + nodeName: ['TEXTAREA', 'SELECT'], + inputType: ['checkbox', 'color', 'date', 'datetime-local', 'email', 'file', 'image', 'month', 'number', 'password', 'radio', 'range', 'search', 'tel', 'text', 'time', 'url', 'week'] +} -const nodeNameLookup = ['TEXTAREA', 'SELECT'] -const inputTypeLookup = ['checkbox', 'color', 'date', 'datetime-local', 'email', 'file', 'image', 'month', 'number', 'password', 'radio', 'range', 'search', 'tel', 'text', 'time', 'url', 'week'] +let lastFocusedInput +let lastClearFieldPressed const enhanceInput = (input, form) => { // ignore input if it has previously been formatted if (input.classList.contains('semanticform') || !input.id) return const type = input.getAttribute('type') - if (nodeNameLookup.includes(input.nodeName) || inputTypeLookup.includes(type)) { - // recursively find
element - let dl = input.parentNode - while (dl && dl.nodeName !== 'DL') dl = dl.parentNode + if (!lookups.nodeName.includes(input.nodeName) && !lookups.inputType.includes(type)) return - if (!dl) return - if (!dl.classList.contains('floatLabelForm')) dl.classList.add('floatLabelForm') - - const label = input.parentNode.parentNode.id && (type === 'checkbox' || type === 'radio') - ? document.querySelector('label[data-for=' + input.parentNode.parentNode.id.replace(/\./g, '\\.') + ']') - : document.querySelector('label[for=' + input.id.replace(/\./g, '\\.') + ']') - - if (!label) { - console.error(`semantic-forms: Found an input (${input.id || input.getAttribute('name')}) without a properly associated label. Make sure there is a label for it and the label has a matching "for" attribute.`) - } + // recursively find
element + let dl = input.parentNode + while (dl && dl.nodeName !== 'DL') dl = dl.parentNode + if (!dl) return + if (!dl.classList.contains('floatLabelForm')) dl.classList.add('floatLabelForm') - input.classList.add('semanticform') + const label = input.parentNode.parentNode.id && (type === 'checkbox' || type === 'radio') + ? document.querySelector('label[data-for=' + input.parentNode.parentNode.id.replace(/\./g, '\\.') + ']') + : document.querySelector('label[for=' + input.id.replace(/\./g, '\\.') + ']') - // #region create labels + if (!label) { + console.error(`semantic-forms: Found an input (${input.id || input.getAttribute('name')}) without a properly associated label. Make sure there is a label for it and the label has a matching "for" attribute.`) + } - const newLabel = document.createElement('label') - newLabel.className = 'floatLabelFormAnimatedLabel' + input.classList.add('semanticform') - if (type === 'checkbox' || type === 'radio') { - // recursively find
element - let dd = input.parentNode - while (dd && dd.nodeName !== 'DD') dd = dd.parentNode + // #region create labels - if (!dd) { - console.error(`semantic-forms: Found an input (${input.id || input.getAttribute('name')}) that is not inside a
element.`) - return - } + const newLabel = document.createElement('label') + newLabel.className = 'floatLabelFormAnimatedLabel' - if (dd.firstChild.nodeName !== 'LABEL') { - if (type === 'checkbox' && input.parentNode.nodeName === 'DD') { - newLabel.setAttribute('for', input.id) - input.parentNode.classList.add('singleCheckbox') - newLabel.className = '' - label.setAttribute('hidden', 'hidden') - insertAfter(newLabel, input) - } - - if (type === 'radio' && input.parentNode.nodeName === 'DD') { - newLabel.setAttribute('for', input.id) - input.parentNode.classList.add('singleRadio') - newLabel.className = '' - label.setAttribute('hidden', 'hidden') - insertAfter(newLabel, input) - } + if (type === 'checkbox' || type === 'radio') { + // recursively find
element + let dd = input.parentNode + while (dd && dd.nodeName !== 'DD') dd = dd.parentNode - newLabel.innerHTML = label.innerHTML - - if (label.hasAttribute('title') && label.getAttribute('data-show-help-icon') !== null && !label.querySelector('span.help')) { - const text = label.getAttribute('title') - label.innerHTML += ` ${helpTextIcon}` - newLabel.innerHTML += ` ${helpTextIcon}` - } - - if (dd.querySelector(':required') && label.getAttribute('data-no-asterisk') === null && !label.querySelector('span.required')) { - const text = label.getAttribute('data-asterisk-text') || 'This field is required.' - label.innerHTML += ` *` - newLabel.innerHTML += ` *` - } + if (!dd) { + console.error(`semantic-forms: Found an input (${input.id || input.getAttribute('name')}) that is not inside a
element.`) + return + } - if (!dd.querySelector('label')) dd.append(newLabel) + if (dd.firstChild.nodeName !== 'LABEL') { + if (type === 'checkbox' && input.parentNode.nodeName === 'DD') { + newLabel.setAttribute('for', input.id) + input.parentNode.classList.add('singleCheckbox') + newLabel.className = '' + label.setAttribute('hidden', 'hidden') + insertAfter(newLabel, input) } - // removes old div that a radio or checkbox may have been added to - if (dd.parentElement.nodeName === 'DIV') dd.parentElement.remove() + if (type === 'radio' && input.parentNode.nodeName === 'DD') { + newLabel.setAttribute('for', input.id) + input.parentNode.classList.add('singleRadio') + newLabel.className = '' + label.setAttribute('hidden', 'hidden') + insertAfter(newLabel, input) + } - const div = document.createElement('div') - div.append(label.closest('dt'), dd) - dl.append(div) - } else { - newLabel.setAttribute('for', input.id) newLabel.innerHTML = label.innerHTML - if (input.hasAttribute('title') && label.getAttribute('data-show-help-icon') !== null && !label.querySelector('span.help')) { - const text = input.getAttribute('title') - newLabel.innerHTML += ` ${helpTextIcon}` + if (label.hasAttribute('title') && label.getAttribute('data-show-help-icon') !== null && !label.querySelector('span.help')) { + const text = label.getAttribute('title') + label.innerHTML += ` ${icons.helpIcon}` + newLabel.innerHTML += ` ${icons.helpIcon}` } - if (input.hasAttribute('required') && label.getAttribute('data-no-asterisk') === null && !label.querySelector('span.required')) { + if (dd.querySelector(':required') && label.getAttribute('data-no-asterisk') === null && !label.querySelector('span.required')) { const text = label.getAttribute('data-asterisk-text') || 'This field is required.' + label.innerHTML += ` *` newLabel.innerHTML += ` *` } - label.setAttribute('hidden', 'hidden') + if (!dd.querySelector('label')) dd.append(newLabel) + } + + // removes old div that a radio or checkbox may have been added to + if (dd.parentElement.nodeName === 'DIV') dd.parentElement.remove() + + const div = document.createElement('div') + div.append(label.closest('dt'), dd) + dl.append(div) + } else { + newLabel.setAttribute('for', input.id) + newLabel.innerHTML = label.innerHTML - insertAfter(newLabel, input) + if (input.hasAttribute('title') && label.getAttribute('data-show-help-icon') !== null && !label.querySelector('span.help')) { + const text = input.getAttribute('title') + newLabel.innerHTML += ` ${icons.helpIcon}` } - // #endregion - // #region standard inputs + if (input.hasAttribute('required') && label.getAttribute('data-no-asterisk') === null && !label.querySelector('span.required')) { + const text = label.getAttribute('data-asterisk-text') || 'This field is required.' + newLabel.innerHTML += ` *` + } - const isWrapped = input.closest('dd').parentElement.nodeName === 'DIV' + label.setAttribute('hidden', 'hidden') - // check for auto-grow attribute on textareas - if (input.getAttribute('data-auto-grow') !== null) { - // progressively enhance inputs into textareas - if (input.nodeName === 'INPUT' && input.type === 'text') { - const newInput = document.createElement('textarea') - newInput.id = input.id - newInput.class = input.class - newInput.innerText = input.value - newInput.setAttribute('data-auto-grow', '') - input.replaceWith(newInput) - input = newInput - } + insertAfter(newLabel, input) + } + // #endregion + + // #region standard inputs + + const isWrapped = input.closest('dd').parentElement.nodeName === 'DIV' + + // check for auto-grow attribute on textareas + if (input.getAttribute('data-auto-grow') !== null) { + // progressively enhance inputs into textareas + if (input.nodeName === 'INPUT' && input.type === 'text') { + const newInput = document.createElement('textarea') + newInput.id = input.id + newInput.class = input.class + newInput.innerText = input.value + newInput.setAttribute('data-auto-grow', '') + input.replaceWith(newInput) + input = newInput + } - if (input.nodeName === 'TEXTAREA') { - // when pressing enter while this input is focused, we want to submit - input.addEventListener('keypress', (e) => { - if (e.key !== 'Enter' || (e.key === 'Enter' && e.shiftKey)) return - e.preventDefault() - form.requestSubmit() - }) - } + if (input.nodeName === 'TEXTAREA') { + // when pressing enter while this input is focused, we want to submit + input.addEventListener('keypress', (e) => { + if (e.key !== 'Enter' || (e.key === 'Enter' && e.shiftKey)) return + e.preventDefault() + form.requestSubmit() + }) } + } - if (type !== 'checkbox' && type !== 'radio') { - if (!input.getAttribute('placeholder')) input.setAttribute('placeholder', ' ') + if (type !== 'checkbox' && type !== 'radio') { + if (!input.getAttribute('placeholder')) input.setAttribute('placeholder', ' ') - const div = document.createElement('div') - const dt = label.closest('dt') - const dd = input.closest('dd') + const div = isWrapped ? input.closest('dd').parentElement : document.createElement('div') + const dt = label.closest('dt') + const dd = input.closest('dd') - if (!dt) { - console.error(`semantic-forms: Found an input (${input.id || input.getAttribute('name')}) that does not have a corresponding
element.`) - return - } - if (!dd) { - console.error(`semantic-forms: Found an input (${input.id || input.getAttribute('name')}) that does not have a corresponding
element.`) - return - } + if (!dt || !dd) { + console.error(`semantic-forms: Found an input (${input.id || input.getAttribute('name')}) that does not have a corresponding ${!dt ? '
' : '
'} element.`) + return + } - // #region input clear button - if (input.nodeName !== 'SELECT' && type !== 'range') { - const clearBtn = document.createElement('button') - clearBtn.type = 'button' - clearBtn.title = input.getAttribute('data-clear-field-text') || 'Clear field' - clearBtn.ariaLabel = input.getAttribute('data-clear-field-text') || 'Clear field' - clearBtn.tabIndex = -1 - clearBtn.innerHTML = '' - clearBtn.classList.add('clear') - clearBtn.id = `semanticFormsClearButton_${input.id}` - clearBtn.addEventListener('click', () => { - input.previousValue = input.value - input.value = '' - input.focus() - lastClearFieldPressed = input.id - - // used for any other updates required by various inputs - input.dispatchEvent(new Event('input', { bubbles: true })) - }) - insertAfter(clearBtn, dd.querySelector('label')) - } - input.addEventListener('focus', event => { - if (event.target.nodeName === 'INPUT') lastFocusedInput = event.target + // #region input clear button + if (input.nodeName !== 'SELECT' && type !== 'range') { + const clearBtn = document.createElement('button') + clearBtn.type = 'button' + clearBtn.title = input.getAttribute('data-clear-field-text') || 'Clear field' + clearBtn.ariaLabel = input.getAttribute('data-clear-field-text') || 'Clear field' + clearBtn.tabIndex = -1 + clearBtn.innerHTML = '' + clearBtn.classList.add('clear') + clearBtn.id = `semanticFormsClearButton_${input.id}` + clearBtn.addEventListener('click', () => { + input.previousValue = input.value + input.value = '' + input.focus() + lastClearFieldPressed = input.id + + // used for any other updates required by various inputs + input.dispatchEvent(new Event('input', { bubbles: true })) }) - // #endregion + insertAfter(clearBtn, dd.querySelector('label')) + } + input.addEventListener('focus', event => { + if (event.target.nodeName === 'INPUT') lastFocusedInput = event.target + }) + // #endregion - // check for colspan- utility class - if (/colspan-/.test(dd.className)) { - const match = dd.className.match(/colspan-([0-9]|full)/)[0] - dd.classList.remove(match) - div.classList.add(match) - } + // check for colspan- utility class + if (/colspan-/.test(dd.className)) { + const match = dd.className.match(/colspan-([0-9]|full)/)[0] + dd.classList.remove(match) + div.classList.add(match) + } - // check for max-content attribute - // this may be removed once fully supported in Firefox and Safari: https://caniuse.com/wf-field-sizing - if (input.getAttribute('data-max-content') !== null) { - if (!('fieldSizing' in document.createElement('input').style)) { - const adjustWidth = () => { - const value = input.value !== '' ? input.value : input.placeholder - const width = value.length * 8 + 40 - input.style.width = width + 'px' - input.style.maxWidth = '100%' - div.style.width = width + 'px' - } - adjustWidth() - input.addEventListener('input', adjustWidth) + // check for max-content attribute + // this may be removed once fully supported in Firefox and Safari: https://caniuse.com/wf-field-sizing + if (input.getAttribute('data-max-content') !== null) { + if (!('fieldSizing' in document.createElement('input').style)) { + const adjustWidth = () => { + const value = input.value !== '' ? input.value : input.placeholder + const width = value.length * 8 + 40 + input.style.width = width + 'px' + input.style.maxWidth = '100%' + div.style.width = width + 'px' } + adjustWidth() + input.addEventListener('input', adjustWidth) } + } - if (!isWrapped) { - div.append(dt, dd) - dl.append(div) - } + if (!isWrapped) { + div.append(dt, dd) + dl.append(div) // determine visibility of newly created
if (dt.style.display === 'none' && dd.style.display === 'none') div.style.display = 'none' } - // #endregion + } + // #endregion + + // handle file input clear btn, cannot be handled with CSS + if (type === 'file') { + const clearBtn = input.parentElement.querySelector('.clear') + input.addEventListener('input', event => { + clearBtn.style.display = event.target.files.length ? 'flex' : 'none' + }) + clearBtn.addEventListener('click', () => { + clearBtn.style.display = 'none' + }) + } - // handle file input clear btn, cannot be handled with CSS - if (type === 'file') { - const clearBtn = input.parentElement.querySelector('.clear') - input.addEventListener('input', event => { - clearBtn.style.display = event.target.files.length ? 'flex' : 'none' - }) - clearBtn.addEventListener('click', () => { - clearBtn.style.display = 'none' - }) - } + // handle range inputs with a class to display the value + if (type === 'range' && input.classList.contains('displayValue')) { + const label = input.parentNode.parentNode.querySelector('dd label') + label.innerHTML += `: ${input.value}` + input.addEventListener('input', event => { + const output = event.target.parentNode.parentNode.querySelector('output') + output.innerHTML = event.target.value + }) + } - // handle range inputs with a class to display the value - if (type === 'range' && input.classList.contains('displayValue')) { - const label = input.parentNode.parentNode.querySelector('dd label') - label.innerHTML += `: ${input.value}` - input.addEventListener('input', event => { - const output = event.target.parentNode.parentNode.querySelector('output') - output.innerHTML = event.target.value - }) + // #region show password button + if (type === 'password' && input.getAttribute('data-no-reveal') === null) { + const showBtn = document.createElement('button') + showBtn.type = 'button' + showBtn.title = input.getAttribute('data-show-password-text') || 'Show password' + showBtn.ariaLabel = input.getAttribute('data-show-password-text') || 'Show password' + showBtn.tabIndex = -1 + showBtn.innerHTML = icons.passwordShow + showBtn.classList.add('show') + showBtn.id = `semanticFormsShowButton_${input.id}` + const dd = input.closest('dd') + if (!dd) { + console.error(`semantic-forms: Found an input (${input.id || input.getAttribute('name')}) that is not inside a
element.`) + return } - - // #region show password button - if (type === 'password' && input.getAttribute('data-no-reveal') === null) { - const showBtn = document.createElement('button') - showBtn.type = 'button' - showBtn.title = input.getAttribute('data-show-password-text') || 'Show password' - showBtn.ariaLabel = input.getAttribute('data-show-password-text') || 'Show password' - showBtn.tabIndex = -1 - showBtn.innerHTML = passwordShow - showBtn.classList.add('show') - showBtn.id = `semanticFormsShowButton_${input.id}` - const dd = input.closest('dd') - if (!dd) { - console.error(`semantic-forms: Found an input (${input.id || input.getAttribute('name')}) that is not inside a
element.`) - return + showBtn.addEventListener('click', () => { + if (input.type === 'password') { + showBtn.innerHTML = icons.passwordHide + showBtn.title = input.getAttribute('data-hide-password-text') || 'Hide password' + showBtn.ariaLabel = input.getAttribute('data-hide-password-text') || 'Hide password' + input.type = 'text' + } else { + showBtn.innerHTML = icons.passwordShow + showBtn.title = input.getAttribute('data-show-password-text') || 'Show password' + showBtn.ariaLabel = input.getAttribute('data-show-password-text') || 'Show password' + input.type = 'password' } - showBtn.addEventListener('click', () => { - if (input.type === 'password') { - showBtn.innerHTML = passwordHide - showBtn.title = input.getAttribute('data-hide-password-text') || 'Hide password' - showBtn.ariaLabel = input.getAttribute('data-hide-password-text') || 'Hide password' - input.type = 'text' + input.focus() + }) + insertAfter(showBtn, dd.querySelector('label')) + } + // #endregion + + // add listener to shift clear button when scrollbar present + if (input.nodeName === 'TEXTAREA') { + if (input.getAttribute('data-disable-autosize') === null) { + // add auto-sizing + input.style.setProperty('resize', 'none') + input.style.setProperty('min-height', '0') + input.style.setProperty('max-height', 'none') + input.style.setProperty('height', 'auto') + + const handleInput = () => { + // reset rows attribute to get accurate scrollHeight + let maxRows = input.getAttribute('data-max-rows') + + if (maxRows) { + if (isNaN(maxRows) || Number(maxRows) <= 0) { + console.warn(`An invalid value was passed to the "data-max-rows" attribute. This value will be ignored.\n\nProvided value: ${input.getAttribute('data-max-rows')}`) + maxRows = null + } + } + + const minRows = input.getAttribute('data-max-rows') && Number(input.getAttribute('data-max-rows')) < 5 ? input.getAttribute('data-max-rows') : '5' + input.setAttribute('rows', minRows) + + // get the computed values object reference + const style = window.getComputedStyle(input) + + // force content-box for size accurate line-height calculation, remove scrollbars, lock width (subtract inline padding and inline border widths), and remove inline padding and borders to keep width consistent (for text wrapping accuracy) + const inlinePadding = parseFloat(style['padding-left']) + parseFloat(style['padding-right']) + const inlineBorderWidth = parseFloat(style['border-left-width']) + parseFloat(style['border-right-width']) + input.style.setProperty('overflow', 'hidden', 'important') + input.style.setProperty('width', (parseFloat(style.width) - inlinePadding - inlineBorderWidth) + 'px') + input.style.setProperty('box-sizing', 'content-box') + input.style.setProperty('padding-inline', '0') + input.style.setProperty('border-width', '0') + + // get the base line height, and top / bottom padding + const blockPadding = parseFloat(style['padding-top']) + parseFloat(style['padding-bottom']) + const lineHeight = style['line-height'] === 'normal' + ? parseFloat(style.height) // if line-height is not explicitly set, use the computed height value (ignore padding due to content-box) + : parseFloat(style['line-height']) // otherwise (line-height is explicitly set), use the computed line-height value + + // get the scroll height (rounding to be safe to ensure cross browser consistency) + const scrollHeight = Math.round(input.scrollHeight) + + // undo overflow, width, border-width, box-sizing & inline padding overrides + input.style.removeProperty('width') + input.style.removeProperty('box-sizing') + input.style.removeProperty('padding-inline') + input.style.removeProperty('border-width') + input.style.removeProperty('overflow') + + // subtract blockPadding from scrollHeight and divide that by our lineHeight to get the row count, round to nearest integer as it will always be within ~.1 of the correct whole number + const rows = Math.round((scrollHeight - blockPadding) / lineHeight) + + // set the calculated rows attribute (limited by rowLimit) + if (maxRows) { + input.setAttribute('rows', '' + Math.min(rows, Number(maxRows))) } else { - showBtn.innerHTML = passwordShow - showBtn.title = input.getAttribute('data-show-password-text') || 'Show password' - showBtn.ariaLabel = input.getAttribute('data-show-password-text') || 'Show password' - input.type = 'password' + input.setAttribute('rows', '' + rows) } - input.focus() - }) - insertAfter(showBtn, dd.querySelector('label')) - } - // #endregion + } - // add listener to shift clear button when scrollbar present - if (input.nodeName === 'TEXTAREA') { - if (input.getAttribute('data-disable-autosize') === null) { - // add auto-sizing - input.style.setProperty('resize', 'none') - input.style.setProperty('min-height', '0') - input.style.setProperty('max-height', 'none') - input.style.setProperty('height', 'auto') - - const handleInput = () => { - // reset rows attribute to get accurate scrollHeight - let maxRows = input.getAttribute('data-max-rows') - - if (maxRows) { - if (isNaN(maxRows) || Number(maxRows) <= 0) { - console.warn(`An invalid value was passed to the "data-max-rows" attribute. This value will be ignored.\n\nProvided value: ${input.getAttribute('data-max-rows')}`) - maxRows = null - } - } + input.addEventListener('input', handleInput) - const minRows = input.getAttribute('data-max-rows') && Number(input.getAttribute('data-max-rows')) < 5 ? input.getAttribute('data-max-rows') : '5' - input.setAttribute('rows', minRows) - - // get the computed values object reference - const style = window.getComputedStyle(input) - - // force content-box for size accurate line-height calculation, remove scrollbars, lock width (subtract inline padding and inline border widths), and remove inline padding and borders to keep width consistent (for text wrapping accuracy) - const inlinePadding = parseFloat(style['padding-left']) + parseFloat(style['padding-right']) - const inlineBorderWidth = parseFloat(style['border-left-width']) + parseFloat(style['border-right-width']) - input.style.setProperty('overflow', 'hidden', 'important') - input.style.setProperty('width', (parseFloat(style.width) - inlinePadding - inlineBorderWidth) + 'px') - input.style.setProperty('box-sizing', 'content-box') - input.style.setProperty('padding-inline', '0') - input.style.setProperty('border-width', '0') - - // get the base line height, and top / bottom padding - const blockPadding = parseFloat(style['padding-top']) + parseFloat(style['padding-bottom']) - const lineHeight = style['line-height'] === 'normal' - ? parseFloat(style.height) // if line-height is not explicitly set, use the computed height value (ignore padding due to content-box) - : parseFloat(style['line-height']) // otherwise (line-height is explicitly set), use the computed line-height value - - // get the scroll height (rounding to be safe to ensure cross browser consistency) - const scrollHeight = Math.round(input.scrollHeight) - - // undo overflow, width, border-width, box-sizing & inline padding overrides - input.style.removeProperty('width') - input.style.removeProperty('box-sizing') - input.style.removeProperty('padding-inline') - input.style.removeProperty('border-width') - input.style.removeProperty('overflow') - - // subtract blockPadding from scrollHeight and divide that by our lineHeight to get the row count, round to nearest integer as it will always be within ~.1 of the correct whole number - const rows = Math.round((scrollHeight - blockPadding) / lineHeight) - - // set the calculated rows attribute (limited by rowLimit) - if (maxRows) { - input.setAttribute('rows', '' + Math.min(rows, Number(maxRows))) - } else { - input.setAttribute('rows', '' + rows) - } + // trigger the event to set the initial rows value + input.dispatchEvent(new Event('input', { bubbles: true })) + } + + // progressively enhance textarea for Firefox and Safari + // this may be removed once fully supported in Firefox and Safari: https://caniuse.com/wf-field-sizing + if (input.getAttribute('data-auto-grow') !== null) { + const adjustHeight = () => { + if (input.value.length) { + const borderWidth = parseInt(window.getComputedStyle(input).getPropertyValue('border-width')) + input.style.height = (input.scrollHeight + (borderWidth * 2)) + 'px' + } else { + input.style.height = window.getComputedStyle(form).getPropertyValue('--semanticFormsInputHeight') } + } - input.addEventListener('input', handleInput) + // set initial height to semantic-forms CSS variable + input.style.height = window.getComputedStyle(form).getPropertyValue('--semanticFormsInputHeight') + input.addEventListener('input', adjustHeight) + } - // trigger the event to set the initial rows value - input.dispatchEvent(new Event('input', { bubbles: true })) - } + // shifts the clear button to the right if a scrollbar is present + const shiftClearBtn = () => { + const clearBtn = input.parentElement?.querySelector('button.clear') + if (clearBtn) clearBtn.style.marginRight = input.clientHeight < input.scrollHeight ? '15px' : '' + } + input.addEventListener('input', shiftClearBtn) + input.addEventListener('mouseup', shiftClearBtn) + shiftClearBtn() + } - // progressively enhance textarea for Firefox and Safari - // this may be removed once fully supported in Firefox and Safari: https://caniuse.com/wf-field-sizing - if (input.getAttribute('data-auto-grow') !== null) { - const adjustHeight = () => { - if (input.value.length) { - const borderWidth = parseInt(window.getComputedStyle(input).getPropertyValue('border-width')) - input.style.height = (input.scrollHeight + (borderWidth * 2)) + 'px' - } else { - input.style.height = window.getComputedStyle(form).getPropertyValue('--semanticFormsInputHeight') + // handle undo/redo + document.addEventListener('keydown', event => { + if ((event.ctrlKey || event.metaKey) && event.key === 'z' && !event.shiftKey) { + // undo clearing a field + if (lastFocusedInput) { + if (lastFocusedInput?.parentNode?.querySelector('button.clear').id === `semanticFormsClearButton_${lastClearFieldPressed}` || lastFocusedInput?.parentNode?.querySelector('button.clear').name === `semanticFormsClearButton_${lastClearFieldPressed}`) { + if (lastFocusedInput.previousValue) { + lastFocusedInput.redoValue = lastFocusedInput.value + lastFocusedInput.value = lastFocusedInput.previousValue } } - - // set initial height to semantic-forms CSS variable - input.style.height = window.getComputedStyle(form).getPropertyValue('--semanticFormsInputHeight') - input.addEventListener('input', adjustHeight) } - - // shifts the clear button to the right if a scrollbar is present - const shiftClearBtn = () => { - const clearBtn = input.parentElement?.querySelector('button.clear') - if (clearBtn) clearBtn.style.marginRight = input.clientHeight < input.scrollHeight ? '15px' : '' + } else if ((event.ctrlKey && event.key === 'y') || (event.metaKey && event.shiftKey && event.key === 'z')) { + // redo clearing a field + if (lastFocusedInput) { + if (lastFocusedInput?.parentNode?.querySelector('button.clear').id === `semanticFormsClearButton_${lastClearFieldPressed}` || lastFocusedInput?.parentNode?.querySelector('button.clear').name === `semanticFormsClearButton_${lastClearFieldPressed}`) { + if (lastFocusedInput.redoValue) { + lastFocusedInput.previousValue = lastFocusedInput.value + lastFocusedInput.value = lastFocusedInput.redoValue + } + } } - input.addEventListener('input', shiftClearBtn) - input.addEventListener('mouseup', shiftClearBtn) - shiftClearBtn() } - } + }) } module.exports = { enhanceInput } diff --git a/lib/keyboardShortcuts.js b/lib/keyboardShortcuts.js index 61815a6..f2fe259 100644 --- a/lib/keyboardShortcuts.js +++ b/lib/keyboardShortcuts.js @@ -139,7 +139,9 @@ const createKeyboardShortcut = (input, shortcuts) => { const indicator = document.createElement('span') indicator.classList.add('focus-key') indicator.innerHTML = `${modifierSymbol} ${focusKey.toUpperCase()}` - insertAfter(indicator, newLabel) + + const label = input.nextSibling + insertAfter(indicator, label) } else { // update the input title if (input.getAttribute('title')) { diff --git a/semanticForms.js b/semanticForms.js index c7d595a..c1267c0 100644 --- a/semanticForms.js +++ b/semanticForms.js @@ -22,7 +22,7 @@ const semanticForms = () => { // update each input in the semantic form const inputs = Array.from(form.querySelectorAll('input, textarea, select')) for (const input of inputs) { - enhanceInput(input) + enhanceInput(input, form) // handle keyboard shortcuts if (input.getAttribute('data-focus-key') !== null) { @@ -32,33 +32,6 @@ const semanticForms = () => { } } - // handle undo/redo - let lastFocusedInput - let lastClearFieldPressed - document.addEventListener('keydown', event => { - if ((event.ctrlKey || event.metaKey) && event.key === 'z' && !event.shiftKey) { - // undo clearing a field - if (lastFocusedInput) { - if (lastFocusedInput?.parentNode?.querySelector('button.clear').id === `semanticFormsClearButton_${lastClearFieldPressed}` || lastFocusedInput?.parentNode?.querySelector('button.clear').name === `semanticFormsClearButton_${lastClearFieldPressed}`) { - if (lastFocusedInput.previousValue) { - lastFocusedInput.redoValue = lastFocusedInput.value - lastFocusedInput.value = lastFocusedInput.previousValue - } - } - } - } else if ((event.ctrlKey && event.key === 'y') || (event.metaKey && event.shiftKey && event.key === 'z')) { - // redo clearing a field - if (lastFocusedInput) { - if (lastFocusedInput?.parentNode?.querySelector('button.clear').id === `semanticFormsClearButton_${lastClearFieldPressed}` || lastFocusedInput?.parentNode?.querySelector('button.clear').name === `semanticFormsClearButton_${lastClearFieldPressed}`) { - if (lastFocusedInput.redoValue) { - lastFocusedInput.previousValue = lastFocusedInput.value - lastFocusedInput.value = lastFocusedInput.redoValue - } - } - } - } - }) - // monitor changes to the DOM and enhance new semanticForms forms that get added if (!window.semanticFormsObserver) { window.semanticFormsObserver = new window.MutationObserver(mutations => { diff --git a/semanticForms.scss b/semanticForms.scss index 8eefbb3..65edc16 100644 --- a/semanticForms.scss +++ b/semanticForms.scss @@ -1,92 +1,6 @@ -// #region global styles -form.semanticForms, form.semanticForms.light, table.semanticForms { - --semanticFormsFontFamily: sans-serif; - --semanticFormsFontSize: 16px; - --semanticFormsFormBgColor: #fff; - --semanticFormsFormSubBgColor: #f5f5f5; - --semanticFormsTextColor: #000; - --semanticFormsBorderColor: #c0c0c0; - --semanticFormsSubBorderColor: #c0c0c0; - --semanticFormsPlaceholderColor: rgba(0, 0, 0, 0.75); - --semanticFormsScrollbarColor: #c0c0c0; - --semanticFormsClearButtonColor: #000; - --semanticFormsButtonGradientLight: #fff; - --semanticFormsButtonGradientDark: #c0c0c0; - --semanticFormsInvalid: #f00; - --semanticFormsInvalidBorder: 1px solid var(--semanticFormsInvalid); - --semanticFormsWarn: #ffdd00; - --semanticFormsWarnBorder: 1px solid var(--semanticFormsWarn); - --semanticFormsInputHeight: 38px; - --semanticFormsInputFontSize: 16px; - --semanticFormsInputTopMargin: 15px; - --semanticFormsInputMinWidth: 250px; - --semanticFormsBorderRadius: 10px; - --semanticFormsNestedFieldsetBgColor: oklch(from var(--semanticFormsFormSubBgColor) 0.3 c h / 0.05); - --semanticFormsNestedFieldsetBorder: 1px rgba(0, 0, 0, .2) solid; - --semanticFormsNestedInputBgColor: #fff; - --semanticFormsBorder: 1px var(--semanticFormsBorderColor) solid; - --semanticFormsTableTitleColor: #fcfcfc; - --semanticFormsTableHeaderColor: #eeeeee; - --semanticFormsTableOddColor: #dddddd; - --semanticFormsTableEvenColor: #cccccc; - --semanticFormsTableBorder: 1px #c0c0c0 solid; - --semanticFormsSelectIcon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23000'%3E%3Cpolygon points='0,0 100,0 50,50'/%3E%3C/svg%3E"); - --semanticFormsCustomResizer: url("data:image/svg+xml;utf8,%3Csvg width='20' height='20' viewBox='0 0 5.2916665 5.2916666' version='1.1' id='svg5' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs2' /%3E%3Cg id='layer1'%3E%3Cpath style='fill:%23aaa;stroke:%23aaa;stroke-width:0.264583;stroke-dasharray:none;stroke-opacity:1' d='M 2.8245112,5.0994569 C 4.9396993,2.9842685 4.9396993,2.9842685 4.9396993,2.9842685' id='path1034' /%3E%3Cpath style='fill:%23aaa;stroke:%23aaa;stroke-width:0.264583;stroke-dasharray:none;stroke-opacity:1' d='M 1.515747,5.0406977 C 4.8873304,1.6691138 4.8873304,1.6691138 4.8873304,1.6691138' id='path1034-1' /%3E%3Cpath style='fill:%23aaa;stroke:%23aaa;stroke-width:0.264583;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1' d='M 0.20657789,5.0909782 C 4.9312207,0.3663348 4.9312207,0.3663348 4.9312207,0.3663348' id='path1034-9' /%3E%3C/g%3E%3C/svg%3E"); - --semanticFormsSearchIcon: url("data:image/svg+xml,%3Csvg%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M15.7955%2015.8111L21%2021M18%2010.5C18%2014.6421%2014.6421%2018%2010.5%2018C6.35786%2018%203%2014.6421%203%2010.5C3%206.35786%206.35786%203%2010.5%203C14.6421%203%2018%206.35786%2018%2010.5Z%22%20stroke%3D%22%23000000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); -} - -@mixin dark-mode { - --semanticFormsFormBgColor: #555; - --inputBackgroudColor: rgba(85,85,85,0.1); - --semanticFormsFormSubBgColor: #2f2f2f; - --semanticFormsTextColor: #fff; - --semanticFormsBorderColor: #656565; - --semanticFormsSubBorderColor: #3f3f3f; - --semanticFormsPlaceholderColor: rgba(255, 255, 255, 0.85); - --semanticFormsScrollbarColor: #373737; - --semanticFormsClearButtonColor: #fff; - --semanticFormsButtonGradientLight: #6f6f6f; - --semanticFormsButtonGradientDark: #373737; - --semanticFormsNestedFieldsetBgColor: oklch(from var(--semanticFormsFormSubBgColor) 0.9 c h / 0.05); - --semanticFormsNestedFieldsetBorder: 1px rgba(255, 255, 255, .1) solid; - --semanticFormsNestedInputBgColor: rgba(255, 255, 255, .15); - --semanticFormsBorder: none; - --semanticFormsTableTitleColor: #3f3f3f; - --semanticFormsTableHeaderColor: #4f4f4f; - --semanticFormsTableOddColor: #3f3f3f; - --semanticFormsTableEvenColor: #4f4f4f; - --semanticFormsTableBorder: 1px #656565 solid; - --semanticFormsSelectIcon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23fff'%3E%3Cpolygon stroke='%23fff' points='0,0 100,0 50,50'/%3E%3C/svg%3E"); - --semanticFormsCustomResizer: url("data:image/svg+xml;utf8,%3Csvg width='20' height='20' viewBox='0 0 5.2916665 5.2916666' version='1.1' id='svg5' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs2' /%3E%3Cg id='layer1'%3E%3Cpath style='fill:%23c9c9c9;stroke:%23c9c9c9;stroke-width:0.264583;stroke-dasharray:none;stroke-opacity:1' d='M 2.8245112,5.0994569 C 4.9396993,2.9842685 4.9396993,2.9842685 4.9396993,2.9842685' id='path1034' /%3E%3Cpath style='fill:%23c9c9c9;stroke:%23c9c9c9;stroke-width:0.264583;stroke-dasharray:none;stroke-opacity:1' d='M 1.515747,5.0406977 C 4.8873304,1.6691138 4.8873304,1.6691138 4.8873304,1.6691138' id='path1034-1' /%3E%3Cpath style='fill:%23c9c9c9;stroke:%23c9c9c9;stroke-width:0.264583;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1' d='M 0.20657789,5.0909782 C 4.9312207,0.3663348 4.9312207,0.3663348 4.9312207,0.3663348' id='path1034-9' /%3E%3C/g%3E%3C/svg%3E"); - --semanticFormsSearchIcon: url("data:image/svg+xml,%3Csvg%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M15.7955%2015.8111L21%2021M18%2010.5C18%2014.6421%2014.6421%2018%2010.5%2018C6.35786%2018%203%2014.6421%203%2010.5C3%206.35786%206.35786%203%2010.5%203C14.6421%203%2018%206.35786%2018%2010.5Z%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); - - input::-webkit-calendar-picker-indicator { - filter: invert(100%); - } -} - -@media (prefers-color-scheme: dark) { - html:not(.light) { - body:not(.light) { - form.semanticForms:not(.light), table.semanticForms:not(.light) { - @include dark-mode; - } - } - } -} - -html:not(.light) { - body:not(.light) { - form.semanticForms.dark, table.semanticForms.dark { - @include dark-mode; - } - } -} - -form.semanticForms.dark, table.semanticForms.dark { - @include dark-mode; -} -// #endregion +@use 'styles/globals.scss'; +@use 'styles/colspan.scss'; +@use 'styles/lowFlow.scss'; form.semanticForms, form.semanticForms.light, @@ -987,327 +901,6 @@ table.semanticForms.light { } // #endregion } - - // #region colspan classes - div { - &[class^='colspan-'] { - max-width: 100%; - } - - &.colspan-full { - grid-column: 1 / -1; - } - - &.colspan-5 { - grid-column: span 5; - } - - &.colspan-4 { - grid-column: span 4; - } - - &.colspan-3 { - grid-column: span 3; - } - - &.colspan-2 { - grid-column: span 2; - } - - &.colspan-1 { - grid-column: span 1; - } - } - - fieldset[class^='colspan-'] dl, - dl[class^='colspan-'] { - div { - max-width: 100%; - } - } - - fieldset.colspan-full dl, - dl.colspan-full { - grid-template-columns: repeat(auto-fit, minmax(var(--semanticFormsInputMinWidth), 1fr)); - } - - fieldset.colspan-5 dl, - dl.colspan-5 { - grid-template-columns: repeat(5, minmax(var(--semanticFormsInputMinWidth), 1fr)); - } - - fieldset.colspan-4 dl, - dl.colspan-4 { - grid-template-columns: repeat(4, minmax(var(--semanticFormsInputMinWidth), 1fr)); - } - - fieldset.colspan-3 dl, - dl.colspan-3 { - grid-template-columns: repeat(3, minmax(var(--semanticFormsInputMinWidth), 1fr)); - } - - fieldset.colspan-2 dl, - dl.colspan-2 { - grid-template-columns: repeat(2, minmax(var(--semanticFormsInputMinWidth), 1fr)); - } - - fieldset.colspan-1 dl, - dl.colspan-1 { - grid-template-columns: repeat(1, minmax(var(--semanticFormsInputMinWidth), 1fr)); - } - - fieldset.colspan-1 dl, - dl.colspan-1 { - dt:nth-of-type(n + 1), - dd:nth-of-type(n + 1) { - grid-column: 1; - } - } - - fieldset.colspan-2 dl, - dl.colspan-2 { - dt:nth-of-type(2n + 1), - dd:nth-of-type(2n + 1) { - grid-column: 1; - } - - dt:nth-of-type(2n + 2), - dd:nth-of-type(2n + 2) { - grid-column: 2; - } - } - - fieldset.colspan-3 dl, - dl.colspan-3 { - dt:nth-of-type(3n + 1), - dd:nth-of-type(3n + 1) { - grid-column: 1; - } - - dt:nth-of-type(3n + 2), - dd:nth-of-type(3n + 2) { - grid-column: 2; - } - - dt:nth-of-type(3n + 3), - dd:nth-of-type(3n + 3) { - grid-column: 3; - } - } - - fieldset.colspan-4 dl, - dl.colspan-4 { - dt:nth-of-type(4n + 1), - dd:nth-of-type(4n + 1) { - grid-column: 1; - } - - dt:nth-of-type(4n + 2), - dd:nth-of-type(4n + 2) { - grid-column: 2; - } - - dt:nth-of-type(4n + 3), - dd:nth-of-type(4n + 3) { - grid-column: 3; - } - - dt:nth-of-type(4n + 4), - dd:nth-of-type(4n + 4) { - grid-column: 4; - } - } - - fieldset.colspan-5 dl, - dl.colspan-5 { - dt:nth-of-type(5n + 1), - dd:nth-of-type(5n + 1) { - grid-column: 1; - } - - dt:nth-of-type(5n + 2), - dd:nth-of-type(5n + 2) { - grid-column: 2; - } - - dt:nth-of-type(5n + 3), - dd:nth-of-type(5n + 3) { - grid-column: 3; - } - - dt:nth-of-type(5n + 4), - dd:nth-of-type(5n + 4) { - grid-column: 4; - } - - dt:nth-of-type(5n + 5), - dd:nth-of-type(5n + 5) { - grid-column: 5; - } - } - // #endregion - - // #region low flow form - &.lowFlow, - &:not(.semanticFormsActive) { - gap: 10px; - - dl { - gap: 0 10px; - margin-bottom: 0px; - } - - // 1, 4, 7, ... - & > dt:nth-of-type(2n + 1), - & > dd:nth-of-type(2n + 1) { - grid-column: 1; - } - - // 2, 5, 8, ... - & > dt:nth-of-type(2n + 2), - & > dd:nth-of-type(2n + 2) { - grid-column: 2; - } - - dt { - min-width: var(--semanticFormsInputMinWidth); /* this matches the max-width of js-enabled inputs */ - - label { - position: absolute; - display: block; - height: 11px; - transform: scale(0.7); - transform-origin: left center; - padding-left: 22px; - margin-top: -1px; - } - - // add required asterisk - &:has(+ dd input:required) { - label::after { - content: ' *'; - color: red; - } - } - } - - // checkbox/radio groups - dt { - &:has(+ dd.checkboxes), - &:has(+ dd.radios) { - label { - padding-left: 15px; - } - } - } - - // single checkbox label - dt { - &:not(:has(+ dd ul)){ - &:has(+ dd input[type=checkbox]) { - label { - transform: scale(1); - margin-top: 0; - margin-left: 8px; - } - } - - &:has(+ dd input[type=radio]) { - label { - transform: scale(1); - margin-top: 0; - margin-left: 8px; - } - } - } - } - - - dd { - // margin-bottom: 10px; - margin-top: var(--semanticFormsInputTopMargin); - margin-bottom: 10px; - min-width: var(--semanticFormsInputMinWidth); /* this matches the max-width of js-enabled inputs */ - - // checkbox/radio groups - &.checkboxes, - &.radios { - margin-top: 0; - - ul { - input[type=radio] { - margin-top: 3px; - } - - label { - padding-top: 7px; - padding-left: 0; - font-size: var(--semanticFormsFontSize); - } - } - - // additional text - ul + label { - margin-top: 0; - font-size: small; - } - } - - // single checkbox/radio - &:not(:has(ul)){ - &:has(input[type=checkbox], input[type=radio]) { - margin-top: 0; - padding-left: 10px; - - input[type=checkbox], - input[type=radio] { - margin-left: 1px; - margin-top: 1px; - margin-right: auto; - } - - // additional info text - label { - font-size: small; - margin-top: -1px; - padding-left: 11px; - } - - input[type=radio] + label { - margin-top: -4px; - } - } - } - - // remove "x" padding - input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio], [type=range]), - select, - textarea { - padding-right: 6px; - } - - // subtext - label { - padding-left: 10px; - margin-top: -5px; - font-size: small; - color: var(--semanticFormsPlaceholderColor); - } - - // inline buttons - button:not(.clear, .show), - input[type="submit"]:not(.clear, .show), - input[type="button"]:not(.clear, .show) { - margin-top: 0; - } - } - } - - .checkboxes ul, - .radios ul { - margin-top: var(--semanticFormsInputTopMargin); - } - // #endregion } // #region tables diff --git a/styles/colspan.scss b/styles/colspan.scss new file mode 100644 index 0000000..be808b3 --- /dev/null +++ b/styles/colspan.scss @@ -0,0 +1,156 @@ +div { + &[class^='colspan-'] { + max-width: 100%; + } + + &.colspan-full { + grid-column: 1 / -1; + } + + &.colspan-5 { + grid-column: span 5; + } + + &.colspan-4 { + grid-column: span 4; + } + + &.colspan-3 { + grid-column: span 3; + } + + &.colspan-2 { + grid-column: span 2; + } + + &.colspan-1 { + grid-column: span 1; + } +} + +fieldset[class^='colspan-'] dl, +dl[class^='colspan-'] { + div { + max-width: 100%; + } +} + +fieldset.colspan-full dl, +dl.colspan-full { + grid-template-columns: repeat(auto-fit, minmax(var(--semanticFormsInputMinWidth), 1fr)); +} + +fieldset.colspan-5 dl, +dl.colspan-5 { + grid-template-columns: repeat(5, minmax(var(--semanticFormsInputMinWidth), 1fr)); +} + +fieldset.colspan-4 dl, +dl.colspan-4 { + grid-template-columns: repeat(4, minmax(var(--semanticFormsInputMinWidth), 1fr)); +} + +fieldset.colspan-3 dl, +dl.colspan-3 { + grid-template-columns: repeat(3, minmax(var(--semanticFormsInputMinWidth), 1fr)); +} + +fieldset.colspan-2 dl, +dl.colspan-2 { + grid-template-columns: repeat(2, minmax(var(--semanticFormsInputMinWidth), 1fr)); +} + +fieldset.colspan-1 dl, +dl.colspan-1 { + grid-template-columns: repeat(1, minmax(var(--semanticFormsInputMinWidth), 1fr)); +} + +fieldset.colspan-1 dl, +dl.colspan-1 { + dt:nth-of-type(n + 1), + dd:nth-of-type(n + 1) { + grid-column: 1; + } +} + +fieldset.colspan-2 dl, +dl.colspan-2 { + dt:nth-of-type(2n + 1), + dd:nth-of-type(2n + 1) { + grid-column: 1; + } + + dt:nth-of-type(2n + 2), + dd:nth-of-type(2n + 2) { + grid-column: 2; + } +} + +fieldset.colspan-3 dl, +dl.colspan-3 { + dt:nth-of-type(3n + 1), + dd:nth-of-type(3n + 1) { + grid-column: 1; + } + + dt:nth-of-type(3n + 2), + dd:nth-of-type(3n + 2) { + grid-column: 2; + } + + dt:nth-of-type(3n + 3), + dd:nth-of-type(3n + 3) { + grid-column: 3; + } +} + +fieldset.colspan-4 dl, +dl.colspan-4 { + dt:nth-of-type(4n + 1), + dd:nth-of-type(4n + 1) { + grid-column: 1; + } + + dt:nth-of-type(4n + 2), + dd:nth-of-type(4n + 2) { + grid-column: 2; + } + + dt:nth-of-type(4n + 3), + dd:nth-of-type(4n + 3) { + grid-column: 3; + } + + dt:nth-of-type(4n + 4), + dd:nth-of-type(4n + 4) { + grid-column: 4; + } +} + +fieldset.colspan-5 dl, +dl.colspan-5 { + dt:nth-of-type(5n + 1), + dd:nth-of-type(5n + 1) { + grid-column: 1; + } + + dt:nth-of-type(5n + 2), + dd:nth-of-type(5n + 2) { + grid-column: 2; + } + + dt:nth-of-type(5n + 3), + dd:nth-of-type(5n + 3) { + grid-column: 3; + } + + dt:nth-of-type(5n + 4), + dd:nth-of-type(5n + 4) { + grid-column: 4; + } + + dt:nth-of-type(5n + 5), + dd:nth-of-type(5n + 5) { + grid-column: 5; + } +} \ No newline at end of file diff --git a/styles/globals.scss b/styles/globals.scss new file mode 100644 index 0000000..1b99957 --- /dev/null +++ b/styles/globals.scss @@ -0,0 +1,87 @@ +form.semanticForms, form.semanticForms.light, table.semanticForms { + --semanticFormsFontFamily: sans-serif; + --semanticFormsFontSize: 16px; + --semanticFormsFormBgColor: #fff; + --semanticFormsFormSubBgColor: #f5f5f5; + --semanticFormsTextColor: #000; + --semanticFormsBorderColor: #c0c0c0; + --semanticFormsSubBorderColor: #c0c0c0; + --semanticFormsPlaceholderColor: rgba(0, 0, 0, 0.75); + --semanticFormsScrollbarColor: #c0c0c0; + --semanticFormsClearButtonColor: #000; + --semanticFormsButtonGradientLight: #fff; + --semanticFormsButtonGradientDark: #c0c0c0; + --semanticFormsInvalid: #f00; + --semanticFormsInvalidBorder: 1px solid var(--semanticFormsInvalid); + --semanticFormsWarn: #ffdd00; + --semanticFormsWarnBorder: 1px solid var(--semanticFormsWarn); + --semanticFormsInputHeight: 38px; + --semanticFormsInputFontSize: 16px; + --semanticFormsInputTopMargin: 15px; + --semanticFormsInputMinWidth: 250px; + --semanticFormsBorderRadius: 10px; + --semanticFormsNestedFieldsetBgColor: oklch(from var(--semanticFormsFormSubBgColor) 0.3 c h / 0.05); + --semanticFormsNestedFieldsetBorder: 1px rgba(0, 0, 0, .2) solid; + --semanticFormsNestedInputBgColor: #fff; + --semanticFormsBorder: 1px var(--semanticFormsBorderColor) solid; + --semanticFormsTableTitleColor: #fcfcfc; + --semanticFormsTableHeaderColor: #eeeeee; + --semanticFormsTableOddColor: #dddddd; + --semanticFormsTableEvenColor: #cccccc; + --semanticFormsTableBorder: 1px #c0c0c0 solid; + --semanticFormsSelectIcon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23000'%3E%3Cpolygon points='0,0 100,0 50,50'/%3E%3C/svg%3E"); + --semanticFormsCustomResizer: url("data:image/svg+xml;utf8,%3Csvg width='20' height='20' viewBox='0 0 5.2916665 5.2916666' version='1.1' id='svg5' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs2' /%3E%3Cg id='layer1'%3E%3Cpath style='fill:%23aaa;stroke:%23aaa;stroke-width:0.264583;stroke-dasharray:none;stroke-opacity:1' d='M 2.8245112,5.0994569 C 4.9396993,2.9842685 4.9396993,2.9842685 4.9396993,2.9842685' id='path1034' /%3E%3Cpath style='fill:%23aaa;stroke:%23aaa;stroke-width:0.264583;stroke-dasharray:none;stroke-opacity:1' d='M 1.515747,5.0406977 C 4.8873304,1.6691138 4.8873304,1.6691138 4.8873304,1.6691138' id='path1034-1' /%3E%3Cpath style='fill:%23aaa;stroke:%23aaa;stroke-width:0.264583;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1' d='M 0.20657789,5.0909782 C 4.9312207,0.3663348 4.9312207,0.3663348 4.9312207,0.3663348' id='path1034-9' /%3E%3C/g%3E%3C/svg%3E"); + --semanticFormsSearchIcon: url("data:image/svg+xml,%3Csvg%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M15.7955%2015.8111L21%2021M18%2010.5C18%2014.6421%2014.6421%2018%2010.5%2018C6.35786%2018%203%2014.6421%203%2010.5C3%206.35786%206.35786%203%2010.5%203C14.6421%203%2018%206.35786%2018%2010.5Z%22%20stroke%3D%22%23000000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); +} + +@mixin dark-mode { + --semanticFormsFormBgColor: #555; + --inputBackgroudColor: rgba(85,85,85,0.1); + --semanticFormsFormSubBgColor: #2f2f2f; + --semanticFormsTextColor: #fff; + --semanticFormsBorderColor: #656565; + --semanticFormsSubBorderColor: #3f3f3f; + --semanticFormsPlaceholderColor: rgba(255, 255, 255, 0.85); + --semanticFormsScrollbarColor: #373737; + --semanticFormsClearButtonColor: #fff; + --semanticFormsButtonGradientLight: #6f6f6f; + --semanticFormsButtonGradientDark: #373737; + --semanticFormsNestedFieldsetBgColor: oklch(from var(--semanticFormsFormSubBgColor) 0.9 c h / 0.05); + --semanticFormsNestedFieldsetBorder: 1px rgba(255, 255, 255, .1) solid; + --semanticFormsNestedInputBgColor: rgba(255, 255, 255, .15); + --semanticFormsBorder: none; + --semanticFormsTableTitleColor: #3f3f3f; + --semanticFormsTableHeaderColor: #4f4f4f; + --semanticFormsTableOddColor: #3f3f3f; + --semanticFormsTableEvenColor: #4f4f4f; + --semanticFormsTableBorder: 1px #656565 solid; + --semanticFormsSelectIcon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23fff'%3E%3Cpolygon stroke='%23fff' points='0,0 100,0 50,50'/%3E%3C/svg%3E"); + --semanticFormsCustomResizer: url("data:image/svg+xml;utf8,%3Csvg width='20' height='20' viewBox='0 0 5.2916665 5.2916666' version='1.1' id='svg5' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs2' /%3E%3Cg id='layer1'%3E%3Cpath style='fill:%23c9c9c9;stroke:%23c9c9c9;stroke-width:0.264583;stroke-dasharray:none;stroke-opacity:1' d='M 2.8245112,5.0994569 C 4.9396993,2.9842685 4.9396993,2.9842685 4.9396993,2.9842685' id='path1034' /%3E%3Cpath style='fill:%23c9c9c9;stroke:%23c9c9c9;stroke-width:0.264583;stroke-dasharray:none;stroke-opacity:1' d='M 1.515747,5.0406977 C 4.8873304,1.6691138 4.8873304,1.6691138 4.8873304,1.6691138' id='path1034-1' /%3E%3Cpath style='fill:%23c9c9c9;stroke:%23c9c9c9;stroke-width:0.264583;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1' d='M 0.20657789,5.0909782 C 4.9312207,0.3663348 4.9312207,0.3663348 4.9312207,0.3663348' id='path1034-9' /%3E%3C/g%3E%3C/svg%3E"); + --semanticFormsSearchIcon: url("data:image/svg+xml,%3Csvg%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M15.7955%2015.8111L21%2021M18%2010.5C18%2014.6421%2014.6421%2018%2010.5%2018C6.35786%2018%203%2014.6421%203%2010.5C3%206.35786%206.35786%203%2010.5%203C14.6421%203%2018%206.35786%2018%2010.5Z%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); + + input::-webkit-calendar-picker-indicator { + filter: invert(100%); + } +} + +@media (prefers-color-scheme: dark) { + html:not(.light) { + body:not(.light) { + form.semanticForms:not(.light), table.semanticForms:not(.light) { + @include dark-mode; + } + } + } +} + +html:not(.light) { + body:not(.light) { + form.semanticForms.dark, table.semanticForms.dark { + @include dark-mode; + } + } +} + +form.semanticForms.dark, table.semanticForms.dark { + @include dark-mode; +} \ No newline at end of file diff --git a/styles/lowFlow.scss b/styles/lowFlow.scss new file mode 100644 index 0000000..38cef0e --- /dev/null +++ b/styles/lowFlow.scss @@ -0,0 +1,159 @@ +form.semanticForms.lowFlow, +form.semanticForms:not(.semanticFormsActive) { + gap: 10px; + + dl { + gap: 0 10px; + margin-bottom: 0px; + } + + // 1, 4, 7, ... + & > dt:nth-of-type(2n + 1), + & > dd:nth-of-type(2n + 1) { + grid-column: 1; + } + + // 2, 5, 8, ... + & > dt:nth-of-type(2n + 2), + & > dd:nth-of-type(2n + 2) { + grid-column: 2; + } + + dt { + min-width: var(--semanticFormsInputMinWidth); /* this matches the max-width of js-enabled inputs */ + + label { + position: absolute; + display: block; + height: 11px; + transform: scale(0.7); + transform-origin: left center; + padding-left: 22px; + margin-top: -1px; + } + + // add required asterisk + &:has(+ dd input:required) { + label::after { + content: ' *'; + color: red; + } + } + } + + // checkbox/radio groups + dt { + &:has(+ dd.checkboxes), + &:has(+ dd.radios) { + label { + padding-left: 15px; + } + } + } + + // single checkbox label + dt { + &:not(:has(+ dd ul)){ + &:has(+ dd input[type=checkbox]) { + label { + transform: scale(1); + margin-top: 0; + margin-left: 8px; + } + } + + &:has(+ dd input[type=radio]) { + label { + transform: scale(1); + margin-top: 0; + margin-left: 8px; + } + } + } + } + + + dd { + // margin-bottom: 10px; + margin-top: var(--semanticFormsInputTopMargin); + margin-bottom: 10px; + min-width: var(--semanticFormsInputMinWidth); /* this matches the max-width of js-enabled inputs */ + + // checkbox/radio groups + &.checkboxes, + &.radios { + margin-top: 0; + + ul { + input[type=radio] { + margin-top: 3px; + } + + label { + padding-top: 7px; + padding-left: 0; + font-size: var(--semanticFormsFontSize); + } + } + + // additional text + ul + label { + margin-top: 0; + font-size: small; + } + } + + // single checkbox/radio + &:not(:has(ul)){ + &:has(input[type=checkbox], input[type=radio]) { + margin-top: 0; + padding-left: 10px; + + input[type=checkbox], + input[type=radio] { + margin-left: 1px; + margin-top: 1px; + margin-right: auto; + } + + // additional info text + label { + font-size: small; + margin-top: -1px; + padding-left: 11px; + } + + input[type=radio] + label { + margin-top: -4px; + } + } + } + + // remove "x" padding + input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio], [type=range]), + select, + textarea { + padding-right: 6px; + } + + // subtext + label { + padding-left: 10px; + margin-top: -5px; + font-size: small; + color: var(--semanticFormsPlaceholderColor); + } + + // inline buttons + button:not(.clear, .show), + input[type="submit"]:not(.clear, .show), + input[type="button"]:not(.clear, .show) { + margin-top: 0; + } + } +} + +.checkboxes ul, +.radios ul { + margin-top: var(--semanticFormsInputTopMargin); +} \ No newline at end of file From 7ca5f873bdb898e6b7abe78a24b79c6c5cc1cac7 Mon Sep 17 00:00:00 2001 From: Alex Widener Date: Fri, 7 Nov 2025 15:11:47 -0500 Subject: [PATCH 04/21] more separation of files --- dist/semantic-forms.css | 2968 +++++++++++------------------- dist/semantic-forms.js | 34 +- docs/statics/pages/fullDemo.html | 1841 +++++++++--------- semanticForms.scss | 1087 +---------- styles/colspan.scss | 355 ++-- styles/globals.scss | 52 +- styles/inputs.scss | 307 +++ styles/labels.scss | 295 +++ styles/lowFlow.scss | 16 +- 9 files changed, 2954 insertions(+), 4001 deletions(-) create mode 100644 styles/inputs.scss create mode 100644 styles/labels.scss diff --git a/dist/semantic-forms.css b/dist/semantic-forms.css index 6eab9a6..a21dcf8 100644 --- a/dist/semantic-forms.css +++ b/dist/semantic-forms.css @@ -1,4 +1,6 @@ -form.semanticForms, form.semanticForms.light, table.semanticForms { +form.semanticForms, +form.semanticForms.light, +table.semanticForms { --semanticFormsFontFamily: sans-serif; --semanticFormsFontSize: 16px; --semanticFormsFormBgColor: #fff; @@ -32,6 +34,75 @@ form.semanticForms, form.semanticForms.light, table.semanticForms { --semanticFormsSelectIcon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23000'%3E%3Cpolygon points='0,0 100,0 50,50'/%3E%3C/svg%3E"); --semanticFormsCustomResizer: url("data:image/svg+xml;utf8,%3Csvg width='20' height='20' viewBox='0 0 5.2916665 5.2916666' version='1.1' id='svg5' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs2' /%3E%3Cg id='layer1'%3E%3Cpath style='fill:%23aaa;stroke:%23aaa;stroke-width:0.264583;stroke-dasharray:none;stroke-opacity:1' d='M 2.8245112,5.0994569 C 4.9396993,2.9842685 4.9396993,2.9842685 4.9396993,2.9842685' id='path1034' /%3E%3Cpath style='fill:%23aaa;stroke:%23aaa;stroke-width:0.264583;stroke-dasharray:none;stroke-opacity:1' d='M 1.515747,5.0406977 C 4.8873304,1.6691138 4.8873304,1.6691138 4.8873304,1.6691138' id='path1034-1' /%3E%3Cpath style='fill:%23aaa;stroke:%23aaa;stroke-width:0.264583;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1' d='M 0.20657789,5.0909782 C 4.9312207,0.3663348 4.9312207,0.3663348 4.9312207,0.3663348' id='path1034-9' /%3E%3C/g%3E%3C/svg%3E"); --semanticFormsSearchIcon: url("data:image/svg+xml,%3Csvg%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M15.7955%2015.8111L21%2021M18%2010.5C18%2014.6421%2014.6421%2018%2010.5%2018C6.35786%2018%203%2014.6421%203%2010.5C3%206.35786%206.35786%203%2010.5%203C14.6421%203%2018%206.35786%2018%2010.5Z%22%20stroke%3D%22%23000000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); + font-family: var(--semanticFormsFontFamily); + font-size: var(--semanticFormsFontSize); + width: 100%; +} +form.semanticForms:not(table), +form.semanticForms.light:not(table), +table.semanticForms:not(table) { + display: flex; + flex-direction: column; + gap: 10px; +} +@supports (interpolate-size: allow-keywords) { + form.semanticForms, + form.semanticForms.light, + table.semanticForms { + interpolate-size: allow-keywords; + } +} +form.semanticForms [hidden], +form.semanticForms.light [hidden], +table.semanticForms [hidden] { + display: none !important; +} +form.semanticForms div:has(dd[hidden]), +form.semanticForms.light div:has(dd[hidden]), +table.semanticForms div:has(dd[hidden]) { + display: none !important; +} +form.semanticForms fieldset, +form.semanticForms label, +form.semanticForms input, +form.semanticForms select, +form.semanticForms textarea, +form.semanticForms button, +form.semanticForms menu:has(li > input, li > label, li > button, li > select, li > textarea), +form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea), +form.semanticForms dt:has(> input, > select, > textarea), +form.semanticForms dd:has(> input, > select, > textarea, > ul, > menu), +form.semanticForms div:has(dt, dd), +form.semanticForms dd > p, +form.semanticForms.light fieldset, +form.semanticForms.light label, +form.semanticForms.light input, +form.semanticForms.light select, +form.semanticForms.light textarea, +form.semanticForms.light button, +form.semanticForms.light menu:has(li > input, li > label, li > button, li > select, li > textarea), +form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea), +form.semanticForms.light dt:has(> input, > select, > textarea), +form.semanticForms.light dd:has(> input, > select, > textarea, > ul, > menu), +form.semanticForms.light div:has(dt, dd), +form.semanticForms.light dd > p, +table.semanticForms fieldset, +table.semanticForms label, +table.semanticForms input, +table.semanticForms select, +table.semanticForms textarea, +table.semanticForms button, +table.semanticForms menu:has(li > input, li > label, li > button, li > select, li > textarea), +table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea), +table.semanticForms dt:has(> input, > select, > textarea), +table.semanticForms dd:has(> input, > select, > textarea, > ul, > menu), +table.semanticForms div:has(dt, dd), +table.semanticForms dd > p { + color: var(--semanticFormsTextColor); + font-family: var(--semanticFormsFontFamily); + box-sizing: border-box; + margin: 0; + padding: 0; } @media (prefers-color-scheme: dark) { @@ -93,7 +164,8 @@ html:not(.light) body:not(.light) form.semanticForms.dark input::-webkit-calenda filter: invert(100%); } -form.semanticForms.dark, table.semanticForms.dark { +form.semanticForms.dark, +table.semanticForms.dark { --semanticFormsFormBgColor: #555; --inputBackgroudColor: rgba(85,85,85,0.1); --semanticFormsFormSubBgColor: #2f2f2f; @@ -118,681 +190,192 @@ form.semanticForms.dark, table.semanticForms.dark { --semanticFormsCustomResizer: url("data:image/svg+xml;utf8,%3Csvg width='20' height='20' viewBox='0 0 5.2916665 5.2916666' version='1.1' id='svg5' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs2' /%3E%3Cg id='layer1'%3E%3Cpath style='fill:%23c9c9c9;stroke:%23c9c9c9;stroke-width:0.264583;stroke-dasharray:none;stroke-opacity:1' d='M 2.8245112,5.0994569 C 4.9396993,2.9842685 4.9396993,2.9842685 4.9396993,2.9842685' id='path1034' /%3E%3Cpath style='fill:%23c9c9c9;stroke:%23c9c9c9;stroke-width:0.264583;stroke-dasharray:none;stroke-opacity:1' d='M 1.515747,5.0406977 C 4.8873304,1.6691138 4.8873304,1.6691138 4.8873304,1.6691138' id='path1034-1' /%3E%3Cpath style='fill:%23c9c9c9;stroke:%23c9c9c9;stroke-width:0.264583;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1' d='M 0.20657789,5.0909782 C 4.9312207,0.3663348 4.9312207,0.3663348 4.9312207,0.3663348' id='path1034-9' /%3E%3C/g%3E%3C/svg%3E"); --semanticFormsSearchIcon: url("data:image/svg+xml,%3Csvg%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M15.7955%2015.8111L21%2021M18%2010.5C18%2014.6421%2014.6421%2018%2010.5%2018C6.35786%2018%203%2014.6421%203%2010.5C3%206.35786%206.35786%203%2010.5%203C14.6421%203%2018%206.35786%2018%2010.5Z%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); } -form.semanticForms.dark input::-webkit-calendar-picker-indicator, table.semanticForms.dark input::-webkit-calendar-picker-indicator { +form.semanticForms.dark input::-webkit-calendar-picker-indicator, +table.semanticForms.dark input::-webkit-calendar-picker-indicator { filter: invert(100%); } -form.semanticForms.lowFlow, -form.semanticForms:not(.semanticFormsActive) { - gap: 10px; -} -form.semanticForms.lowFlow dl, -form.semanticForms:not(.semanticFormsActive) dl { - gap: 0 10px; - margin-bottom: 0px; +.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]), +.semanticForms select { + height: var(--semanticFormsInputHeight); } -form.semanticForms.lowFlow > dt:nth-of-type(2n + 1), form.semanticForms.lowFlow > dd:nth-of-type(2n + 1), -form.semanticForms:not(.semanticFormsActive) > dt:nth-of-type(2n + 1), -form.semanticForms:not(.semanticFormsActive) > dd:nth-of-type(2n + 1) { - grid-column: 1; +.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]), +.semanticForms select, +.semanticForms textarea { + font-size: var(--semanticFormsInputFontSize); + background: var(--semanticFormsFormBgColor); + border: var(--semanticFormsBorder); + border-radius: var(--semanticFormsBorderRadius); + width: 100%; + touch-action: manipulation; + outline: none; } -form.semanticForms.lowFlow > dt:nth-of-type(2n + 2), form.semanticForms.lowFlow > dd:nth-of-type(2n + 2), -form.semanticForms:not(.semanticFormsActive) > dt:nth-of-type(2n + 2), -form.semanticForms:not(.semanticFormsActive) > dd:nth-of-type(2n + 2) { - grid-column: 2; +.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]):not([type=range]), +.semanticForms select:not([type=range]), +.semanticForms textarea:not([type=range]) { + padding: 6px 30px 6px 20px; } -form.semanticForms.lowFlow dt, -form.semanticForms:not(.semanticFormsActive) dt { - min-width: var(--semanticFormsInputMinWidth); /* this matches the max-width of js-enabled inputs */ +.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]) input:not([type=submit], [type=reset], [type=image]):focus, +.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]) select:focus, +.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]) textarea:focus, +.semanticForms select input:not([type=submit], [type=reset], [type=image]):focus, +.semanticForms select select:focus, +.semanticForms select textarea:focus, +.semanticForms textarea input:not([type=submit], [type=reset], [type=image]):focus, +.semanticForms textarea select:focus, +.semanticForms textarea textarea:focus { + outline: none; + box-shadow: 0 0 0 1px var(--semanticFormsBorderColor); } -form.semanticForms.lowFlow dt label, -form.semanticForms:not(.semanticFormsActive) dt label { - position: absolute; - display: block; - height: 11px; - transform: scale(0.7); - transform-origin: left center; - padding-left: 22px; - margin-top: -1px; +.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=password], .semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=text]:has(~ button.show), +.semanticForms select[type=password], +.semanticForms select[type=text]:has(~ button.show), +.semanticForms textarea[type=password], +.semanticForms textarea[type=text]:has(~ button.show) { + padding: 6px 55px 6px 20px; } -form.semanticForms.lowFlow dt:has(+ dd input:required) label::after, -form.semanticForms:not(.semanticFormsActive) dt:has(+ dd input:required) label::after { - content: " *"; - color: red; +.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=search], +.semanticForms select[type=search], +.semanticForms textarea[type=search] { + padding: 6px 20px 6px 32px; + background: var(--semanticFormsSearchIcon) no-repeat 10px; + background-color: var(--semanticFormsFormBgColor); + background-size: 18px; } -form.semanticForms.lowFlow dt:has(+ dd.checkboxes) label, form.semanticForms.lowFlow dt:has(+ dd.radios) label, -form.semanticForms:not(.semanticFormsActive) dt:has(+ dd.checkboxes) label, -form.semanticForms:not(.semanticFormsActive) dt:has(+ dd.radios) label { - padding-left: 15px; +.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=search]:focus + label.floatLabelFormAnimatedLabel, .semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=search]:not(:placeholder-shown) + label.floatLabelFormAnimatedLabel, +.semanticForms select[type=search]:focus + label.floatLabelFormAnimatedLabel, +.semanticForms select[type=search]:not(:placeholder-shown) + label.floatLabelFormAnimatedLabel, +.semanticForms textarea[type=search]:focus + label.floatLabelFormAnimatedLabel, +.semanticForms textarea[type=search]:not(:placeholder-shown) + label.floatLabelFormAnimatedLabel { + left: 20px; } -form.semanticForms.lowFlow dt:not(:has(+ dd ul)):has(+ dd input[type=checkbox]) label, -form.semanticForms:not(.semanticFormsActive) dt:not(:has(+ dd ul)):has(+ dd input[type=checkbox]) label { - transform: scale(1); - margin-top: 0; - margin-left: 8px; +.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=search]::-webkit-search-cancel-button, +.semanticForms select[type=search]::-webkit-search-cancel-button, +.semanticForms textarea[type=search]::-webkit-search-cancel-button { + display: none; } -form.semanticForms.lowFlow dt:not(:has(+ dd ul)):has(+ dd input[type=radio]) label, -form.semanticForms:not(.semanticFormsActive) dt:not(:has(+ dd ul)):has(+ dd input[type=radio]) label { - transform: scale(1); - margin-top: 0; - margin-left: 8px; +.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=checkbox], .semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=radio], +.semanticForms select[type=checkbox], +.semanticForms select[type=radio], +.semanticForms textarea[type=checkbox], +.semanticForms textarea[type=radio] { + width: 18px; + height: 18px; + margin: 3px 0; + cursor: pointer; } -form.semanticForms.lowFlow dd, -form.semanticForms:not(.semanticFormsActive) dd { - margin-top: var(--semanticFormsInputTopMargin); - margin-bottom: 10px; - min-width: var(--semanticFormsInputMinWidth); /* this matches the max-width of js-enabled inputs */ +.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=checkbox] ~ label:first-of-type, .semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=radio] ~ label:first-of-type, +.semanticForms select[type=checkbox] ~ label:first-of-type, +.semanticForms select[type=radio] ~ label:first-of-type, +.semanticForms textarea[type=checkbox] ~ label:first-of-type, +.semanticForms textarea[type=radio] ~ label:first-of-type { + color: var(--semanticFormsTextColor); } -form.semanticForms.lowFlow dd.checkboxes, form.semanticForms.lowFlow dd.radios, -form.semanticForms:not(.semanticFormsActive) dd.checkboxes, -form.semanticForms:not(.semanticFormsActive) dd.radios { - margin-top: 0; +.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=range], .semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=color], +.semanticForms select[type=range], +.semanticForms select[type=color], +.semanticForms textarea[type=range], +.semanticForms textarea[type=color] { + cursor: pointer; } -form.semanticForms.lowFlow dd.checkboxes ul input[type=radio], form.semanticForms.lowFlow dd.radios ul input[type=radio], -form.semanticForms:not(.semanticFormsActive) dd.checkboxes ul input[type=radio], -form.semanticForms:not(.semanticFormsActive) dd.radios ul input[type=radio] { - margin-top: 3px; +.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=color], +.semanticForms select[type=color], +.semanticForms textarea[type=color] { + height: var(--semanticFormsInputHeight); + padding: 4px 30px 4px 10px; } -form.semanticForms.lowFlow dd.checkboxes ul label, form.semanticForms.lowFlow dd.radios ul label, -form.semanticForms:not(.semanticFormsActive) dd.checkboxes ul label, -form.semanticForms:not(.semanticFormsActive) dd.radios ul label { - padding-top: 7px; - padding-left: 0; - font-size: var(--semanticFormsFontSize); +.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=file], +.semanticForms select[type=file], +.semanticForms textarea[type=file] { + cursor: pointer; + font-size: var(--semanticFormsInputFontSize); } -form.semanticForms.lowFlow dd.checkboxes ul + label, form.semanticForms.lowFlow dd.radios ul + label, -form.semanticForms:not(.semanticFormsActive) dd.checkboxes ul + label, -form.semanticForms:not(.semanticFormsActive) dd.radios ul + label { - margin-top: 0; - font-size: small; +.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[disabled], +.semanticForms select[disabled], +.semanticForms textarea[disabled] { + cursor: not-allowed; + opacity: 0.5; } -form.semanticForms.lowFlow dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]), -form.semanticForms:not(.semanticFormsActive) dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) { - margin-top: 0; - padding-left: 10px; +.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[disabled] ~ label:first-of-type, +.semanticForms select[disabled] ~ label:first-of-type, +.semanticForms textarea[disabled] ~ label:first-of-type { + opacity: 0.5; } -form.semanticForms.lowFlow dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=checkbox], -form.semanticForms.lowFlow dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=radio], -form.semanticForms:not(.semanticFormsActive) dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=checkbox], -form.semanticForms:not(.semanticFormsActive) dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=radio] { - margin-left: 1px; - margin-top: 1px; - margin-right: auto; +.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[disabled] ~ label + button, +.semanticForms select[disabled] ~ label + button, +.semanticForms textarea[disabled] ~ label + button { + display: none; } -form.semanticForms.lowFlow dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) label, -form.semanticForms:not(.semanticFormsActive) dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) label { - font-size: small; - margin-top: -1px; - padding-left: 11px; +.semanticForms select { + cursor: pointer; } -form.semanticForms.lowFlow dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=radio] + label, -form.semanticForms:not(.semanticFormsActive) dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=radio] + label { - margin-top: -4px; +.semanticForms select:not([multiple]) { + background-image: var(--semanticFormsSelectIcon); + background-size: 14px; + background-position: calc(100% - 8px) 16px; + background-repeat: no-repeat; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; } -form.semanticForms.lowFlow dd input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio], [type=range]), -form.semanticForms.lowFlow dd select, -form.semanticForms.lowFlow dd textarea, -form.semanticForms:not(.semanticFormsActive) dd input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio], [type=range]), -form.semanticForms:not(.semanticFormsActive) dd select, -form.semanticForms:not(.semanticFormsActive) dd textarea { - padding-right: 6px; +.semanticForms select[multiple] { + min-height: 38px; + height: 100px; + padding: 0; } -form.semanticForms.lowFlow dd label, -form.semanticForms:not(.semanticFormsActive) dd label { - padding-left: 10px; - margin-top: -5px; - font-size: small; - color: var(--semanticFormsPlaceholderColor); +.semanticForms select[multiple] option { + padding: 6px 20px; } -form.semanticForms.lowFlow dd button:not(.clear, .show), -form.semanticForms.lowFlow dd input[type=submit]:not(.clear, .show), -form.semanticForms.lowFlow dd input[type=button]:not(.clear, .show), -form.semanticForms:not(.semanticFormsActive) dd button:not(.clear, .show), -form.semanticForms:not(.semanticFormsActive) dd input[type=submit]:not(.clear, .show), -form.semanticForms:not(.semanticFormsActive) dd input[type=button]:not(.clear, .show) { - margin-top: 0; +.semanticForms select[multiple] option:first-of-type { + border-top-left-radius: var(--semanticFormsBorderRadius); } - -.checkboxes ul, -.radios ul { - margin-top: var(--semanticFormsInputTopMargin); +.semanticForms select[multiple] option:last-of-type { + border-bottom-left-radius: var(--semanticFormsBorderRadius); } - -form.semanticForms, -form.semanticForms.light, -table.semanticForms, -table.semanticForms.light { - font-family: var(--semanticFormsFontFamily); - font-size: var(--semanticFormsFontSize); +.semanticForms textarea { + resize: vertical; + line-height: 1.5; width: 100%; + min-height: 38px; } -@supports (interpolate-size: allow-keywords) { - form.semanticForms, - form.semanticForms.light, - table.semanticForms, - table.semanticForms.light { - interpolate-size: allow-keywords; - } +.semanticForms textarea[data-auto-grow] { + field-sizing: content; } -form.semanticForms [hidden], -form.semanticForms.light [hidden], -table.semanticForms [hidden], -table.semanticForms.light [hidden] { - display: none !important; +.semanticForms button.clear, .semanticForms button.show { + cursor: pointer; + appearance: none; + -webkit-appearance: none; + position: absolute; + height: min-content; + top: calc(var(--semanticFormsInputTopMargin) + 6px); + right: 0; + width: 25px; + height: 25px; + margin: auto 6px; + padding: 5px; + background: none; + border: none; + color: var(--semanticFormsClearButtonColor); + display: flex; + align-items: center; + justify-content: center; } -form.semanticForms div:has(dd[hidden]), -form.semanticForms.light div:has(dd[hidden]), -table.semanticForms div:has(dd[hidden]), -table.semanticForms.light div:has(dd[hidden]) { - display: none !important; -} -form.semanticForms:not(table), -form.semanticForms.light:not(table), -table.semanticForms:not(table), -table.semanticForms.light:not(table) { - display: flex; - flex-direction: column; - gap: 10px; -} -form.semanticForms fieldset, -form.semanticForms label, -form.semanticForms input, -form.semanticForms select, -form.semanticForms textarea, -form.semanticForms button, -form.semanticForms menu:has(li > input, li > label, li > button, li > select, li > textarea), -form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea), -form.semanticForms dt:has(> input, > select, > textarea), -form.semanticForms dd:has(> input, > select, > textarea, > ul, > menu), -form.semanticForms div:has(dt, dd), -form.semanticForms dd > p, -form.semanticForms.light fieldset, -form.semanticForms.light label, -form.semanticForms.light input, -form.semanticForms.light select, -form.semanticForms.light textarea, -form.semanticForms.light button, -form.semanticForms.light menu:has(li > input, li > label, li > button, li > select, li > textarea), -form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea), -form.semanticForms.light dt:has(> input, > select, > textarea), -form.semanticForms.light dd:has(> input, > select, > textarea, > ul, > menu), -form.semanticForms.light div:has(dt, dd), -form.semanticForms.light dd > p, -table.semanticForms fieldset, -table.semanticForms label, -table.semanticForms input, -table.semanticForms select, -table.semanticForms textarea, -table.semanticForms button, -table.semanticForms menu:has(li > input, li > label, li > button, li > select, li > textarea), -table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea), -table.semanticForms dt:has(> input, > select, > textarea), -table.semanticForms dd:has(> input, > select, > textarea, > ul, > menu), -table.semanticForms div:has(dt, dd), -table.semanticForms dd > p, -table.semanticForms.light fieldset, -table.semanticForms.light label, -table.semanticForms.light input, -table.semanticForms.light select, -table.semanticForms.light textarea, -table.semanticForms.light button, -table.semanticForms.light menu:has(li > input, li > label, li > button, li > select, li > textarea), -table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea), -table.semanticForms.light dt:has(> input, > select, > textarea), -table.semanticForms.light dd:has(> input, > select, > textarea, > ul, > menu), -table.semanticForms.light div:has(dt, dd), -table.semanticForms.light dd > p { - color: var(--semanticFormsTextColor); - font-family: var(--semanticFormsFontFamily); - box-sizing: border-box; - margin: 0; - padding: 0; -} -form.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]), -form.semanticForms select, -form.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]), -form.semanticForms.light select, -table.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]), -table.semanticForms select, -table.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]), -table.semanticForms.light select { - height: var(--semanticFormsInputHeight); -} -form.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]), -form.semanticForms select, -form.semanticForms textarea, -form.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]), -form.semanticForms.light select, -form.semanticForms.light textarea, -table.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]), -table.semanticForms select, -table.semanticForms textarea, -table.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]), -table.semanticForms.light select, -table.semanticForms.light textarea { - font-size: var(--semanticFormsInputFontSize); - background: var(--semanticFormsFormBgColor); - border: var(--semanticFormsBorder); - border-radius: var(--semanticFormsBorderRadius); - width: 100%; - touch-action: manipulation; - outline: none; -} -form.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]):not([type=range]), -form.semanticForms select:not([type=range]), -form.semanticForms textarea:not([type=range]), -form.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]):not([type=range]), -form.semanticForms.light select:not([type=range]), -form.semanticForms.light textarea:not([type=range]), -table.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]):not([type=range]), -table.semanticForms select:not([type=range]), -table.semanticForms textarea:not([type=range]), -table.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]):not([type=range]), -table.semanticForms.light select:not([type=range]), -table.semanticForms.light textarea:not([type=range]) { - padding: 6px 30px 6px 20px; -} -form.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]) input:not([type=submit], [type=reset], [type=image]):focus, -form.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]) select:focus, -form.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]) textarea:focus, -form.semanticForms select input:not([type=submit], [type=reset], [type=image]):focus, -form.semanticForms select select:focus, -form.semanticForms select textarea:focus, -form.semanticForms textarea input:not([type=submit], [type=reset], [type=image]):focus, -form.semanticForms textarea select:focus, -form.semanticForms textarea textarea:focus, -form.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]) input:not([type=submit], [type=reset], [type=image]):focus, -form.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]) select:focus, -form.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]) textarea:focus, -form.semanticForms.light select input:not([type=submit], [type=reset], [type=image]):focus, -form.semanticForms.light select select:focus, -form.semanticForms.light select textarea:focus, -form.semanticForms.light textarea input:not([type=submit], [type=reset], [type=image]):focus, -form.semanticForms.light textarea select:focus, -form.semanticForms.light textarea textarea:focus, -table.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]) input:not([type=submit], [type=reset], [type=image]):focus, -table.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]) select:focus, -table.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]) textarea:focus, -table.semanticForms select input:not([type=submit], [type=reset], [type=image]):focus, -table.semanticForms select select:focus, -table.semanticForms select textarea:focus, -table.semanticForms textarea input:not([type=submit], [type=reset], [type=image]):focus, -table.semanticForms textarea select:focus, -table.semanticForms textarea textarea:focus, -table.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]) input:not([type=submit], [type=reset], [type=image]):focus, -table.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]) select:focus, -table.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]) textarea:focus, -table.semanticForms.light select input:not([type=submit], [type=reset], [type=image]):focus, -table.semanticForms.light select select:focus, -table.semanticForms.light select textarea:focus, -table.semanticForms.light textarea input:not([type=submit], [type=reset], [type=image]):focus, -table.semanticForms.light textarea select:focus, -table.semanticForms.light textarea textarea:focus { - outline: none; - box-shadow: 0 0 0 1px var(--semanticFormsBorderColor); -} -form.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=password], form.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=text]:has(~ button.show), -form.semanticForms select[type=password], -form.semanticForms select[type=text]:has(~ button.show), -form.semanticForms textarea[type=password], -form.semanticForms textarea[type=text]:has(~ button.show), -form.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=password], -form.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=text]:has(~ button.show), -form.semanticForms.light select[type=password], -form.semanticForms.light select[type=text]:has(~ button.show), -form.semanticForms.light textarea[type=password], -form.semanticForms.light textarea[type=text]:has(~ button.show), -table.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=password], -table.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=text]:has(~ button.show), -table.semanticForms select[type=password], -table.semanticForms select[type=text]:has(~ button.show), -table.semanticForms textarea[type=password], -table.semanticForms textarea[type=text]:has(~ button.show), -table.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=password], -table.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=text]:has(~ button.show), -table.semanticForms.light select[type=password], -table.semanticForms.light select[type=text]:has(~ button.show), -table.semanticForms.light textarea[type=password], -table.semanticForms.light textarea[type=text]:has(~ button.show) { - padding: 6px 55px 6px 20px; -} -form.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=search], -form.semanticForms select[type=search], -form.semanticForms textarea[type=search], -form.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=search], -form.semanticForms.light select[type=search], -form.semanticForms.light textarea[type=search], -table.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=search], -table.semanticForms select[type=search], -table.semanticForms textarea[type=search], -table.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=search], -table.semanticForms.light select[type=search], -table.semanticForms.light textarea[type=search] { - padding: 6px 20px 6px 32px; - background: var(--semanticFormsSearchIcon) no-repeat 10px; - background-color: var(--semanticFormsFormBgColor); - background-size: 18px; -} -form.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=search]:focus + label.floatLabelFormAnimatedLabel, form.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=search]:not(:placeholder-shown) + label.floatLabelFormAnimatedLabel, -form.semanticForms select[type=search]:focus + label.floatLabelFormAnimatedLabel, -form.semanticForms select[type=search]:not(:placeholder-shown) + label.floatLabelFormAnimatedLabel, -form.semanticForms textarea[type=search]:focus + label.floatLabelFormAnimatedLabel, -form.semanticForms textarea[type=search]:not(:placeholder-shown) + label.floatLabelFormAnimatedLabel, -form.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=search]:focus + label.floatLabelFormAnimatedLabel, -form.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=search]:not(:placeholder-shown) + label.floatLabelFormAnimatedLabel, -form.semanticForms.light select[type=search]:focus + label.floatLabelFormAnimatedLabel, -form.semanticForms.light select[type=search]:not(:placeholder-shown) + label.floatLabelFormAnimatedLabel, -form.semanticForms.light textarea[type=search]:focus + label.floatLabelFormAnimatedLabel, -form.semanticForms.light textarea[type=search]:not(:placeholder-shown) + label.floatLabelFormAnimatedLabel, -table.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=search]:focus + label.floatLabelFormAnimatedLabel, -table.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=search]:not(:placeholder-shown) + label.floatLabelFormAnimatedLabel, -table.semanticForms select[type=search]:focus + label.floatLabelFormAnimatedLabel, -table.semanticForms select[type=search]:not(:placeholder-shown) + label.floatLabelFormAnimatedLabel, -table.semanticForms textarea[type=search]:focus + label.floatLabelFormAnimatedLabel, -table.semanticForms textarea[type=search]:not(:placeholder-shown) + label.floatLabelFormAnimatedLabel, -table.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=search]:focus + label.floatLabelFormAnimatedLabel, -table.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=search]:not(:placeholder-shown) + label.floatLabelFormAnimatedLabel, -table.semanticForms.light select[type=search]:focus + label.floatLabelFormAnimatedLabel, -table.semanticForms.light select[type=search]:not(:placeholder-shown) + label.floatLabelFormAnimatedLabel, -table.semanticForms.light textarea[type=search]:focus + label.floatLabelFormAnimatedLabel, -table.semanticForms.light textarea[type=search]:not(:placeholder-shown) + label.floatLabelFormAnimatedLabel { - left: 20px; -} -form.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=search]::-webkit-search-cancel-button, -form.semanticForms select[type=search]::-webkit-search-cancel-button, -form.semanticForms textarea[type=search]::-webkit-search-cancel-button, -form.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=search]::-webkit-search-cancel-button, -form.semanticForms.light select[type=search]::-webkit-search-cancel-button, -form.semanticForms.light textarea[type=search]::-webkit-search-cancel-button, -table.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=search]::-webkit-search-cancel-button, -table.semanticForms select[type=search]::-webkit-search-cancel-button, -table.semanticForms textarea[type=search]::-webkit-search-cancel-button, -table.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=search]::-webkit-search-cancel-button, -table.semanticForms.light select[type=search]::-webkit-search-cancel-button, -table.semanticForms.light textarea[type=search]::-webkit-search-cancel-button { - display: none; -} -form.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=checkbox], form.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=radio], -form.semanticForms select[type=checkbox], -form.semanticForms select[type=radio], -form.semanticForms textarea[type=checkbox], -form.semanticForms textarea[type=radio], -form.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=checkbox], -form.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=radio], -form.semanticForms.light select[type=checkbox], -form.semanticForms.light select[type=radio], -form.semanticForms.light textarea[type=checkbox], -form.semanticForms.light textarea[type=radio], -table.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=checkbox], -table.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=radio], -table.semanticForms select[type=checkbox], -table.semanticForms select[type=radio], -table.semanticForms textarea[type=checkbox], -table.semanticForms textarea[type=radio], -table.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=checkbox], -table.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=radio], -table.semanticForms.light select[type=checkbox], -table.semanticForms.light select[type=radio], -table.semanticForms.light textarea[type=checkbox], -table.semanticForms.light textarea[type=radio] { - width: 18px; - height: 18px; - margin: 3px 0; - cursor: pointer; -} -form.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=checkbox] ~ label:first-of-type, form.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=radio] ~ label:first-of-type, -form.semanticForms select[type=checkbox] ~ label:first-of-type, -form.semanticForms select[type=radio] ~ label:first-of-type, -form.semanticForms textarea[type=checkbox] ~ label:first-of-type, -form.semanticForms textarea[type=radio] ~ label:first-of-type, -form.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=checkbox] ~ label:first-of-type, -form.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=radio] ~ label:first-of-type, -form.semanticForms.light select[type=checkbox] ~ label:first-of-type, -form.semanticForms.light select[type=radio] ~ label:first-of-type, -form.semanticForms.light textarea[type=checkbox] ~ label:first-of-type, -form.semanticForms.light textarea[type=radio] ~ label:first-of-type, -table.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=checkbox] ~ label:first-of-type, -table.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=radio] ~ label:first-of-type, -table.semanticForms select[type=checkbox] ~ label:first-of-type, -table.semanticForms select[type=radio] ~ label:first-of-type, -table.semanticForms textarea[type=checkbox] ~ label:first-of-type, -table.semanticForms textarea[type=radio] ~ label:first-of-type, -table.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=checkbox] ~ label:first-of-type, -table.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=radio] ~ label:first-of-type, -table.semanticForms.light select[type=checkbox] ~ label:first-of-type, -table.semanticForms.light select[type=radio] ~ label:first-of-type, -table.semanticForms.light textarea[type=checkbox] ~ label:first-of-type, -table.semanticForms.light textarea[type=radio] ~ label:first-of-type { - color: var(--semanticFormsTextColor); -} -form.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=range], form.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=color], -form.semanticForms select[type=range], -form.semanticForms select[type=color], -form.semanticForms textarea[type=range], -form.semanticForms textarea[type=color], -form.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=range], -form.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=color], -form.semanticForms.light select[type=range], -form.semanticForms.light select[type=color], -form.semanticForms.light textarea[type=range], -form.semanticForms.light textarea[type=color], -table.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=range], -table.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=color], -table.semanticForms select[type=range], -table.semanticForms select[type=color], -table.semanticForms textarea[type=range], -table.semanticForms textarea[type=color], -table.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=range], -table.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=color], -table.semanticForms.light select[type=range], -table.semanticForms.light select[type=color], -table.semanticForms.light textarea[type=range], -table.semanticForms.light textarea[type=color] { - cursor: pointer; -} -form.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=color], -form.semanticForms select[type=color], -form.semanticForms textarea[type=color], -form.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=color], -form.semanticForms.light select[type=color], -form.semanticForms.light textarea[type=color], -table.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=color], -table.semanticForms select[type=color], -table.semanticForms textarea[type=color], -table.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=color], -table.semanticForms.light select[type=color], -table.semanticForms.light textarea[type=color] { - height: var(--semanticFormsInputHeight); - padding: 4px 30px 4px 10px; -} -form.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=file], -form.semanticForms select[type=file], -form.semanticForms textarea[type=file], -form.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=file], -form.semanticForms.light select[type=file], -form.semanticForms.light textarea[type=file], -table.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=file], -table.semanticForms select[type=file], -table.semanticForms textarea[type=file], -table.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=file], -table.semanticForms.light select[type=file], -table.semanticForms.light textarea[type=file] { - cursor: pointer; - font-size: var(--semanticFormsInputFontSize); -} -form.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[disabled], -form.semanticForms select[disabled], -form.semanticForms textarea[disabled], -form.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[disabled], -form.semanticForms.light select[disabled], -form.semanticForms.light textarea[disabled], -table.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[disabled], -table.semanticForms select[disabled], -table.semanticForms textarea[disabled], -table.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[disabled], -table.semanticForms.light select[disabled], -table.semanticForms.light textarea[disabled] { - cursor: not-allowed; - opacity: 0.5; -} -form.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[disabled] ~ label:first-of-type, -form.semanticForms select[disabled] ~ label:first-of-type, -form.semanticForms textarea[disabled] ~ label:first-of-type, -form.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[disabled] ~ label:first-of-type, -form.semanticForms.light select[disabled] ~ label:first-of-type, -form.semanticForms.light textarea[disabled] ~ label:first-of-type, -table.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[disabled] ~ label:first-of-type, -table.semanticForms select[disabled] ~ label:first-of-type, -table.semanticForms textarea[disabled] ~ label:first-of-type, -table.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[disabled] ~ label:first-of-type, -table.semanticForms.light select[disabled] ~ label:first-of-type, -table.semanticForms.light textarea[disabled] ~ label:first-of-type { - opacity: 0.5; -} -form.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[disabled] ~ label + button, -form.semanticForms select[disabled] ~ label + button, -form.semanticForms textarea[disabled] ~ label + button, -form.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[disabled] ~ label + button, -form.semanticForms.light select[disabled] ~ label + button, -form.semanticForms.light textarea[disabled] ~ label + button, -table.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[disabled] ~ label + button, -table.semanticForms select[disabled] ~ label + button, -table.semanticForms textarea[disabled] ~ label + button, -table.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[disabled] ~ label + button, -table.semanticForms.light select[disabled] ~ label + button, -table.semanticForms.light textarea[disabled] ~ label + button { - display: none; -} -form.semanticForms select, -form.semanticForms.light select, -table.semanticForms select, -table.semanticForms.light select { - cursor: pointer; -} -form.semanticForms select:not([multiple]), -form.semanticForms.light select:not([multiple]), -table.semanticForms select:not([multiple]), -table.semanticForms.light select:not([multiple]) { - background-image: var(--semanticFormsSelectIcon); - background-size: 14px; - background-position: calc(100% - 8px) 16px; - background-repeat: no-repeat; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; -} -form.semanticForms select[multiple], -form.semanticForms.light select[multiple], -table.semanticForms select[multiple], -table.semanticForms.light select[multiple] { - min-height: 38px; - height: 100px; - padding: 0; -} -form.semanticForms select[multiple] option, -form.semanticForms.light select[multiple] option, -table.semanticForms select[multiple] option, -table.semanticForms.light select[multiple] option { - padding: 6px 20px; -} -form.semanticForms select[multiple] option:first-of-type, -form.semanticForms.light select[multiple] option:first-of-type, -table.semanticForms select[multiple] option:first-of-type, -table.semanticForms.light select[multiple] option:first-of-type { - border-top-left-radius: var(--semanticFormsBorderRadius); -} -form.semanticForms select[multiple] option:last-of-type, -form.semanticForms.light select[multiple] option:last-of-type, -table.semanticForms select[multiple] option:last-of-type, -table.semanticForms.light select[multiple] option:last-of-type { - border-bottom-left-radius: var(--semanticFormsBorderRadius); -} -form.semanticForms textarea, -form.semanticForms.light textarea, -table.semanticForms textarea, -table.semanticForms.light textarea { - resize: vertical; - line-height: 1.5; - width: 100%; - min-height: 38px; -} -form.semanticForms textarea[data-auto-grow], -form.semanticForms.light textarea[data-auto-grow], -table.semanticForms textarea[data-auto-grow], -table.semanticForms.light textarea[data-auto-grow] { - field-sizing: content; -} -form.semanticForms button.clear, form.semanticForms button.show, -form.semanticForms.light button.clear, -form.semanticForms.light button.show, -table.semanticForms button.clear, -table.semanticForms button.show, -table.semanticForms.light button.clear, -table.semanticForms.light button.show { - cursor: pointer; - appearance: none; - -webkit-appearance: none; - position: absolute; - height: min-content; - top: calc(var(--semanticFormsInputTopMargin) + 6px); - right: 0; - width: 25px; - height: 25px; - margin: auto 6px; - padding: 5px; - background: none; - border: none; - color: var(--semanticFormsClearButtonColor); - display: flex; - align-items: center; - justify-content: center; -} -form.semanticForms button.show, -form.semanticForms.light button.show, -table.semanticForms button.show, -table.semanticForms.light button.show { +.semanticForms button.show { right: 25px; } -form.semanticForms textarea ~ .clear, -form.semanticForms.light textarea ~ .clear, -table.semanticForms textarea ~ .clear, -table.semanticForms.light textarea ~ .clear { +.semanticForms textarea ~ .clear { bottom: auto; } -form.semanticForms input:placeholder-shown ~ .clear, -form.semanticForms input:placeholder-shown ~ .show, -form.semanticForms textarea:placeholder-shown ~ .clear, -form.semanticForms input[type=file] ~ .clear, -form.semanticForms.light input:placeholder-shown ~ .clear, -form.semanticForms.light input:placeholder-shown ~ .show, -form.semanticForms.light textarea:placeholder-shown ~ .clear, -form.semanticForms.light input[type=file] ~ .clear, -table.semanticForms input:placeholder-shown ~ .clear, -table.semanticForms input:placeholder-shown ~ .show, -table.semanticForms textarea:placeholder-shown ~ .clear, -table.semanticForms input[type=file] ~ .clear, -table.semanticForms.light input:placeholder-shown ~ .clear, -table.semanticForms.light input:placeholder-shown ~ .show, -table.semanticForms.light textarea:placeholder-shown ~ .clear, -table.semanticForms.light input[type=file] ~ .clear { +.semanticForms input:placeholder-shown ~ .clear, +.semanticForms input:placeholder-shown ~ .show, +.semanticForms textarea:placeholder-shown ~ .clear, +.semanticForms input[type=file] ~ .clear { display: none; } -form.semanticForms input[type=submit], -form.semanticForms input[type=reset], -form.semanticForms button:not(.clear, .show), -form.semanticForms .button-link, -form.semanticForms.light input[type=submit], -form.semanticForms.light input[type=reset], -form.semanticForms.light button:not(.clear, .show), -form.semanticForms.light .button-link, -table.semanticForms input[type=submit], -table.semanticForms input[type=reset], -table.semanticForms button:not(.clear, .show), -table.semanticForms .button-link, -table.semanticForms.light input[type=submit], -table.semanticForms.light input[type=reset], -table.semanticForms.light button:not(.clear, .show), -table.semanticForms.light .button-link { +.semanticForms input[type=submit], +.semanticForms input[type=reset], +.semanticForms button:not(.clear, .show), +.semanticForms .button-link { appearance: none; -moz-appearance: none; -webkit-appearance: none; @@ -812,266 +395,816 @@ table.semanticForms.light .button-link { text-decoration: none; color: var(--semanticFormsTextColor); } -form.semanticForms input[type=submit]:active, -form.semanticForms input[type=reset]:active, -form.semanticForms button:not(.clear, .show):active, -form.semanticForms .button-link:active, -form.semanticForms.light input[type=submit]:active, -form.semanticForms.light input[type=reset]:active, -form.semanticForms.light button:not(.clear, .show):active, -form.semanticForms.light .button-link:active, -table.semanticForms input[type=submit]:active, -table.semanticForms input[type=reset]:active, -table.semanticForms button:not(.clear, .show):active, -table.semanticForms .button-link:active, -table.semanticForms.light input[type=submit]:active, -table.semanticForms.light input[type=reset]:active, -table.semanticForms.light button:not(.clear, .show):active, -table.semanticForms.light .button-link:active { +.semanticForms input[type=submit]:active, +.semanticForms input[type=reset]:active, +.semanticForms button:not(.clear, .show):active, +.semanticForms .button-link:active { transform: scale(0.97); } -form.semanticForms input[type=submit], -form.semanticForms input[type=reset], -form.semanticForms input[type=image], -form.semanticForms button:not(.clear):not(.show), -form.semanticForms .button-link, -form.semanticForms.light input[type=submit], -form.semanticForms.light input[type=reset], -form.semanticForms.light input[type=image], -form.semanticForms.light button:not(.clear):not(.show), -form.semanticForms.light .button-link, -table.semanticForms input[type=submit], -table.semanticForms input[type=reset], -table.semanticForms input[type=image], -table.semanticForms button:not(.clear):not(.show), -table.semanticForms .button-link, -table.semanticForms.light input[type=submit], -table.semanticForms.light input[type=reset], -table.semanticForms.light input[type=image], -table.semanticForms.light button:not(.clear):not(.show), -table.semanticForms.light .button-link { +.semanticForms input[type=submit], +.semanticForms input[type=reset], +.semanticForms input[type=image], +.semanticForms button:not(.clear):not(.show), +.semanticForms .button-link { transition: filter 0.1s; } -form.semanticForms input[type=submit]:hover, -form.semanticForms input[type=reset]:hover, -form.semanticForms input[type=image]:hover, -form.semanticForms button:not(.clear):not(.show):hover, -form.semanticForms .button-link:hover, -form.semanticForms.light input[type=submit]:hover, -form.semanticForms.light input[type=reset]:hover, -form.semanticForms.light input[type=image]:hover, -form.semanticForms.light button:not(.clear):not(.show):hover, -form.semanticForms.light .button-link:hover, -table.semanticForms input[type=submit]:hover, -table.semanticForms input[type=reset]:hover, -table.semanticForms input[type=image]:hover, -table.semanticForms button:not(.clear):not(.show):hover, -table.semanticForms .button-link:hover, -table.semanticForms.light input[type=submit]:hover, -table.semanticForms.light input[type=reset]:hover, -table.semanticForms.light input[type=image]:hover, -table.semanticForms.light button:not(.clear):not(.show):hover, -table.semanticForms.light .button-link:hover { +.semanticForms input[type=submit]:hover, +.semanticForms input[type=reset]:hover, +.semanticForms input[type=image]:hover, +.semanticForms button:not(.clear):not(.show):hover, +.semanticForms .button-link:hover { filter: brightness(1.05); } -form.semanticForms .button-link, -form.semanticForms.light .button-link, -table.semanticForms .button-link, -table.semanticForms.light .button-link { +.semanticForms .button-link { display: block; } -form.semanticForms .button-link:visited, form.semanticForms .button-link:link, -form.semanticForms.light .button-link:visited, -form.semanticForms.light .button-link:link, -table.semanticForms .button-link:visited, -table.semanticForms .button-link:link, -table.semanticForms.light .button-link:visited, -table.semanticForms.light .button-link:link { +.semanticForms .button-link:visited, .semanticForms .button-link:link { color: var(--semanticFormsTextColor); } -form.semanticForms [data-invalid-text], -form.semanticForms.light [data-invalid-text], -table.semanticForms [data-invalid-text], -table.semanticForms.light [data-invalid-text] { +.semanticForms [data-invalid-text] { display: none; color: var(--semanticFormsInvalid); } -form.semanticForms input:not([type=submit], [type=reset], [type=image]).invalid, form.semanticForms input:not([type=submit], [type=reset], [type=image]):user-invalid, -form.semanticForms select.invalid, -form.semanticForms select:user-invalid, -form.semanticForms textarea.invalid, -form.semanticForms textarea:user-invalid, -form.semanticForms.light input:not([type=submit], [type=reset], [type=image]).invalid, -form.semanticForms.light input:not([type=submit], [type=reset], [type=image]):user-invalid, -form.semanticForms.light select.invalid, -form.semanticForms.light select:user-invalid, -form.semanticForms.light textarea.invalid, -form.semanticForms.light textarea:user-invalid, -table.semanticForms input:not([type=submit], [type=reset], [type=image]).invalid, -table.semanticForms input:not([type=submit], [type=reset], [type=image]):user-invalid, -table.semanticForms select.invalid, -table.semanticForms select:user-invalid, -table.semanticForms textarea.invalid, -table.semanticForms textarea:user-invalid, -table.semanticForms.light input:not([type=submit], [type=reset], [type=image]).invalid, -table.semanticForms.light input:not([type=submit], [type=reset], [type=image]):user-invalid, -table.semanticForms.light select.invalid, -table.semanticForms.light select:user-invalid, -table.semanticForms.light textarea.invalid, -table.semanticForms.light textarea:user-invalid { +.semanticForms input:not([type=submit], [type=reset], [type=image]).invalid, .semanticForms input:not([type=submit], [type=reset], [type=image]):user-invalid, +.semanticForms select.invalid, +.semanticForms select:user-invalid, +.semanticForms textarea.invalid, +.semanticForms textarea:user-invalid { border: var(--semanticFormsInvalidBorder); } -form.semanticForms input:not([type=submit], [type=reset], [type=image]).invalid ~ label:nth-of-type(2), form.semanticForms input:not([type=submit], [type=reset], [type=image]):user-invalid ~ label:nth-of-type(2), -form.semanticForms select.invalid ~ label:nth-of-type(2), -form.semanticForms select:user-invalid ~ label:nth-of-type(2), -form.semanticForms textarea.invalid ~ label:nth-of-type(2), -form.semanticForms textarea:user-invalid ~ label:nth-of-type(2), -form.semanticForms.light input:not([type=submit], [type=reset], [type=image]).invalid ~ label:nth-of-type(2), -form.semanticForms.light input:not([type=submit], [type=reset], [type=image]):user-invalid ~ label:nth-of-type(2), -form.semanticForms.light select.invalid ~ label:nth-of-type(2), -form.semanticForms.light select:user-invalid ~ label:nth-of-type(2), -form.semanticForms.light textarea.invalid ~ label:nth-of-type(2), -form.semanticForms.light textarea:user-invalid ~ label:nth-of-type(2), -table.semanticForms input:not([type=submit], [type=reset], [type=image]).invalid ~ label:nth-of-type(2), -table.semanticForms input:not([type=submit], [type=reset], [type=image]):user-invalid ~ label:nth-of-type(2), -table.semanticForms select.invalid ~ label:nth-of-type(2), -table.semanticForms select:user-invalid ~ label:nth-of-type(2), -table.semanticForms textarea.invalid ~ label:nth-of-type(2), -table.semanticForms textarea:user-invalid ~ label:nth-of-type(2), -table.semanticForms.light input:not([type=submit], [type=reset], [type=image]).invalid ~ label:nth-of-type(2), -table.semanticForms.light input:not([type=submit], [type=reset], [type=image]):user-invalid ~ label:nth-of-type(2), -table.semanticForms.light select.invalid ~ label:nth-of-type(2), -table.semanticForms.light select:user-invalid ~ label:nth-of-type(2), -table.semanticForms.light textarea.invalid ~ label:nth-of-type(2), -table.semanticForms.light textarea:user-invalid ~ label:nth-of-type(2) { +.semanticForms input:not([type=submit], [type=reset], [type=image]).invalid ~ label:nth-of-type(2), .semanticForms input:not([type=submit], [type=reset], [type=image]):user-invalid ~ label:nth-of-type(2), +.semanticForms select.invalid ~ label:nth-of-type(2), +.semanticForms select:user-invalid ~ label:nth-of-type(2), +.semanticForms textarea.invalid ~ label:nth-of-type(2), +.semanticForms textarea:user-invalid ~ label:nth-of-type(2) { color: var(--semanticFormsInvalid); } -form.semanticForms input:not([type=submit], [type=reset], [type=image]).invalid ~ [data-invalid-text], form.semanticForms input:not([type=submit], [type=reset], [type=image]):user-invalid ~ [data-invalid-text], -form.semanticForms select.invalid ~ [data-invalid-text], -form.semanticForms select:user-invalid ~ [data-invalid-text], -form.semanticForms textarea.invalid ~ [data-invalid-text], -form.semanticForms textarea:user-invalid ~ [data-invalid-text], -form.semanticForms.light input:not([type=submit], [type=reset], [type=image]).invalid ~ [data-invalid-text], -form.semanticForms.light input:not([type=submit], [type=reset], [type=image]):user-invalid ~ [data-invalid-text], -form.semanticForms.light select.invalid ~ [data-invalid-text], -form.semanticForms.light select:user-invalid ~ [data-invalid-text], -form.semanticForms.light textarea.invalid ~ [data-invalid-text], -form.semanticForms.light textarea:user-invalid ~ [data-invalid-text], -table.semanticForms input:not([type=submit], [type=reset], [type=image]).invalid ~ [data-invalid-text], -table.semanticForms input:not([type=submit], [type=reset], [type=image]):user-invalid ~ [data-invalid-text], -table.semanticForms select.invalid ~ [data-invalid-text], -table.semanticForms select:user-invalid ~ [data-invalid-text], -table.semanticForms textarea.invalid ~ [data-invalid-text], -table.semanticForms textarea:user-invalid ~ [data-invalid-text], -table.semanticForms.light input:not([type=submit], [type=reset], [type=image]).invalid ~ [data-invalid-text], -table.semanticForms.light input:not([type=submit], [type=reset], [type=image]):user-invalid ~ [data-invalid-text], -table.semanticForms.light select.invalid ~ [data-invalid-text], -table.semanticForms.light select:user-invalid ~ [data-invalid-text], -table.semanticForms.light textarea.invalid ~ [data-invalid-text], -table.semanticForms.light textarea:user-invalid ~ [data-invalid-text] { +.semanticForms input:not([type=submit], [type=reset], [type=image]).invalid ~ [data-invalid-text], .semanticForms input:not([type=submit], [type=reset], [type=image]):user-invalid ~ [data-invalid-text], +.semanticForms select.invalid ~ [data-invalid-text], +.semanticForms select:user-invalid ~ [data-invalid-text], +.semanticForms textarea.invalid ~ [data-invalid-text], +.semanticForms textarea:user-invalid ~ [data-invalid-text] { font-size: small; display: flex; } -form.semanticForms input:not([type=submit], [type=reset], [type=image]).warn, -form.semanticForms select.warn, -form.semanticForms textarea.warn, -form.semanticForms.light input:not([type=submit], [type=reset], [type=image]).warn, -form.semanticForms.light select.warn, -form.semanticForms.light textarea.warn, -table.semanticForms input:not([type=submit], [type=reset], [type=image]).warn, -table.semanticForms select.warn, -table.semanticForms textarea.warn, -table.semanticForms.light input:not([type=submit], [type=reset], [type=image]).warn, -table.semanticForms.light select.warn, -table.semanticForms.light textarea.warn { +.semanticForms input:not([type=submit], [type=reset], [type=image]).warn, +.semanticForms select.warn, +.semanticForms textarea.warn { border: var(--semanticFormsWarnBorder); } -form.semanticForms input:not([type=submit], [type=reset], [type=image]).warn ~ label:nth-of-type(2), -form.semanticForms select.warn ~ label:nth-of-type(2), -form.semanticForms textarea.warn ~ label:nth-of-type(2), -form.semanticForms.light input:not([type=submit], [type=reset], [type=image]).warn ~ label:nth-of-type(2), -form.semanticForms.light select.warn ~ label:nth-of-type(2), -form.semanticForms.light textarea.warn ~ label:nth-of-type(2), -table.semanticForms input:not([type=submit], [type=reset], [type=image]).warn ~ label:nth-of-type(2), -table.semanticForms select.warn ~ label:nth-of-type(2), -table.semanticForms textarea.warn ~ label:nth-of-type(2), -table.semanticForms.light input:not([type=submit], [type=reset], [type=image]).warn ~ label:nth-of-type(2), -table.semanticForms.light select.warn ~ label:nth-of-type(2), -table.semanticForms.light textarea.warn ~ label:nth-of-type(2) { +.semanticForms input:not([type=submit], [type=reset], [type=image]).warn ~ label:nth-of-type(2), +.semanticForms select.warn ~ label:nth-of-type(2), +.semanticForms textarea.warn ~ label:nth-of-type(2) { color: var(--semanticFormsWarn); } -form.semanticForms input:not([type=submit], [type=reset], [type=image]).warn ~ [data-invalid-text], -form.semanticForms select.warn ~ [data-invalid-text], -form.semanticForms textarea.warn ~ [data-invalid-text], -form.semanticForms.light input:not([type=submit], [type=reset], [type=image]).warn ~ [data-invalid-text], -form.semanticForms.light select.warn ~ [data-invalid-text], -form.semanticForms.light textarea.warn ~ [data-invalid-text], -table.semanticForms input:not([type=submit], [type=reset], [type=image]).warn ~ [data-invalid-text], -table.semanticForms select.warn ~ [data-invalid-text], -table.semanticForms textarea.warn ~ [data-invalid-text], -table.semanticForms.light input:not([type=submit], [type=reset], [type=image]).warn ~ [data-invalid-text], -table.semanticForms.light select.warn ~ [data-invalid-text], -table.semanticForms.light textarea.warn ~ [data-invalid-text] { +.semanticForms input:not([type=submit], [type=reset], [type=image]).warn ~ [data-invalid-text], +.semanticForms select.warn ~ [data-invalid-text], +.semanticForms textarea.warn ~ [data-invalid-text] { font-size: small; display: flex; } -form.semanticForms input:-webkit-autofill, -form.semanticForms input:-webkit-autofill:hover, -form.semanticForms input:-webkit-autofill:focus, -form.semanticForms input:-webkit-autofill:active, -form.semanticForms textarea:-webkit-autofill, -form.semanticForms textarea:-webkit-autofill:hover, -form.semanticForms textarea:-webkit-autofill:focus, -form.semanticForms textarea:-webkit-autofill:active, -form.semanticForms select:-webkit-autofill, -form.semanticForms select:-webkit-autofill:hover, -form.semanticForms select:-webkit-autofill:focus, -form.semanticForms select:-webkit-autofill:active, -form.semanticForms.light input:-webkit-autofill, -form.semanticForms.light input:-webkit-autofill:hover, -form.semanticForms.light input:-webkit-autofill:focus, -form.semanticForms.light input:-webkit-autofill:active, -form.semanticForms.light textarea:-webkit-autofill, -form.semanticForms.light textarea:-webkit-autofill:hover, -form.semanticForms.light textarea:-webkit-autofill:focus, -form.semanticForms.light textarea:-webkit-autofill:active, -form.semanticForms.light select:-webkit-autofill, -form.semanticForms.light select:-webkit-autofill:hover, -form.semanticForms.light select:-webkit-autofill:focus, -form.semanticForms.light select:-webkit-autofill:active, -table.semanticForms input:-webkit-autofill, -table.semanticForms input:-webkit-autofill:hover, -table.semanticForms input:-webkit-autofill:focus, -table.semanticForms input:-webkit-autofill:active, -table.semanticForms textarea:-webkit-autofill, -table.semanticForms textarea:-webkit-autofill:hover, -table.semanticForms textarea:-webkit-autofill:focus, -table.semanticForms textarea:-webkit-autofill:active, -table.semanticForms select:-webkit-autofill, -table.semanticForms select:-webkit-autofill:hover, -table.semanticForms select:-webkit-autofill:focus, -table.semanticForms select:-webkit-autofill:active, -table.semanticForms.light input:-webkit-autofill, -table.semanticForms.light input:-webkit-autofill:hover, -table.semanticForms.light input:-webkit-autofill:focus, -table.semanticForms.light input:-webkit-autofill:active, -table.semanticForms.light textarea:-webkit-autofill, -table.semanticForms.light textarea:-webkit-autofill:hover, -table.semanticForms.light textarea:-webkit-autofill:focus, -table.semanticForms.light textarea:-webkit-autofill:active, -table.semanticForms.light select:-webkit-autofill, -table.semanticForms.light select:-webkit-autofill:hover, -table.semanticForms.light select:-webkit-autofill:focus, -table.semanticForms.light select:-webkit-autofill:active { +.semanticForms input:-webkit-autofill, +.semanticForms input:-webkit-autofill:hover, +.semanticForms input:-webkit-autofill:focus, +.semanticForms input:-webkit-autofill:active, +.semanticForms textarea:-webkit-autofill, +.semanticForms textarea:-webkit-autofill:hover, +.semanticForms textarea:-webkit-autofill:focus, +.semanticForms textarea:-webkit-autofill:active, +.semanticForms select:-webkit-autofill, +.semanticForms select:-webkit-autofill:hover, +.semanticForms select:-webkit-autofill:focus, +.semanticForms select:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 1000px var(--semanticFormsFormBgColor) inset; transition: background-color 5000s ease-in-out 0s, color 5000s ease-in-out 0s; transition-delay: 5000s; transition-property: background-color, color; } -form.semanticForms fieldset, -form.semanticForms.light fieldset, -table.semanticForms fieldset, -table.semanticForms.light fieldset { +@supports (scrollbar-color: auto) { + .semanticForms textarea { + scrollbar-color: var(--semanticFormsScrollbarColor) transparent; + } + .semanticForms textarea::-webkit-resizer { + border: none; + background-image: var(--semanticFormsCustomResizer); + background-size: 14px; + background-repeat: no-repeat; + background-position: 100%; + margin: 0 2px 2px 0; + } + .semanticForms select[multiple] { + scrollbar-color: var(--semanticFormsScrollbarColor) transparent; + } +} + +.semanticForms input[type=checkbox] + label:first-of-type, +.semanticForms input[type=radio] + label:first-of-type { + padding-top: 2px; + font-size: var(--semanticFormsInputFontSize); + cursor: pointer; + display: flex; + align-items: center; + gap: 5px; +} +.semanticForms input[type=checkbox] + label:first-of-type span.required, +.semanticForms input[type=radio] + label:first-of-type span.required { + cursor: help; + pointer-events: auto; + color: red; +} +.semanticForms input[type=checkbox] + label:first-of-type span.help, +.semanticForms input[type=radio] + label:first-of-type span.help { + display: grid; + place-items: center; + cursor: help; + pointer-events: auto; +} +.semanticForms input[type=checkbox] + label:first-of-type span.help svg, +.semanticForms input[type=radio] + label:first-of-type span.help svg { + width: 80%; +} +.semanticForms .floatLabelForm { + grid-template-columns: repeat(auto-fit, minmax(var(--semanticFormsInputMinWidth), 1fr)); +} +.semanticForms .floatLabelForm div dt { + position: relative; +} +.semanticForms .floatLabelForm div dt label { + display: flex; + align-items: center; + gap: 5px; + z-index: 2; + user-select: auto; + color: var(--semanticFormsTextColor); + font-size: var(--semanticFormsInputFontSize); + position: absolute; + transform-origin: left center; + transform: translateY(-100%) scale(0.7); + top: var(--semanticFormsInputTopMargin); + left: 10px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + min-width: 0; + width: 100%; +} +.semanticForms .floatLabelForm div dt label span.help { + display: grid; + place-items: center; + cursor: help; + pointer-events: auto; +} +.semanticForms .floatLabelForm div:has(dd input:required) dt label { + width: 100%; + padding-right: 10px; +} +.semanticForms .floatLabelForm div:has(dd input:required) dt label > span { + margin-left: 5px; + cursor: help; + pointer-events: auto; + color: red; +} +.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:not([type=submit], [type=reset], [type=image]):focus:not([type=checkbox], [type=radio], .no-float-label) ~ label:first-of-type, .semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:not([type=submit], [type=reset], [type=image]):not(:placeholder-shown):not(.no-float-label):not([type=checkbox]):not([type=radio]) ~ label:first-of-type, +.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select:focus:not([type=checkbox], [type=radio], .no-float-label) ~ label:first-of-type, +.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select:not(:placeholder-shown):not(.no-float-label):not([type=checkbox]):not([type=radio]) ~ label:first-of-type, +.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus:not([type=checkbox], [type=radio], .no-float-label) ~ label:first-of-type, +.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:not(:placeholder-shown):not(.no-float-label):not([type=checkbox]):not([type=radio]) ~ label:first-of-type { + color: var(--semanticFormsTextColor); + transform: translateY(-150%) scale(0.7); + width: 100%; +} +.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:not([type=submit], [type=reset], [type=image]):focus.no-float-label ~ label:first-of-type, .semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:not([type=submit], [type=reset], [type=image]):not(:placeholder-shown).no-float-label:not([type=checkbox]):not([type=radio]) ~ label:first-of-type, +.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select:focus.no-float-label ~ label:first-of-type, +.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select:not(:placeholder-shown).no-float-label:not([type=checkbox]):not([type=radio]) ~ label:first-of-type, +.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus.no-float-label ~ label:first-of-type, +.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:not(:placeholder-shown).no-float-label:not([type=checkbox]):not([type=radio]) ~ label:first-of-type { + display: none; +} +.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select ~ label:first-of-type { + color: var(--semanticFormsTextColor); +} +.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) button:not(.clear, .show), +.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input[type=submit]:not(.clear, .show) { + margin-top: var(--semanticFormsInputTopMargin); +} +.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) label:first-of-type { + position: absolute; + top: calc(var(--semanticFormsInputTopMargin) + 10px); + left: 20px; + display: flex; + align-items: center; + gap: 5px; + line-height: 1.2; + font-size: var(--semanticFormsInputFontSize); + transform-origin: left center; + pointer-events: none; + transition: transform 250ms; + cursor: text; + flex: 1; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + min-width: 0; + width: calc(100% - 35px); + user-select: none; + color: var(--semanticFormsPlaceholderColor); + touch-action: manipulation; +} +.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) label:first-of-type span.required { + cursor: help; + pointer-events: auto; + color: red; +} +.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) label:first-of-type span.help { + display: grid; + place-items: center; + cursor: help; + pointer-events: auto; +} +.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) label:first-of-type span.help svg { + width: 80%; +} +.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios):has(span.focus-key) label:first-of-type { + width: calc(100% - 95px); +} +.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios):has(span.focus-key) span.focus-key { + display: block; +} +.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios):has(span.focus-key) span.focus-key kbd { + font-family: sans-serif; +} +.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios):has(span.focus-key):has(input:focus, select:focus, textarea:focus) span.focus-key, .semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios):has(span.focus-key):not(:has(input:placeholder-shown, textarea:placeholder-shown)) span.focus-key { + display: none; +} +.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) label:nth-of-type(2) { + margin-top: -5px; + padding: 0 10px; + font-size: small; + color: var(--semanticFormsTextColor); +} +.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input, +.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea, +.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select { + margin-top: var(--semanticFormsInputTopMargin); +} +.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input, +.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea { + transition: opacity 250ms; +} +.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input::placeholder, +.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea::placeholder { + opacity: 0; + transition: opacity 250ms; +} +.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input::-moz-placeholder, +.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea::-moz-placeholder { + opacity: 0; + transition: opacity 250ms; +} +.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input::-webkit-input-placeholder, +.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea::-webkit-input-placeholder { + opacity: 0; + transition: opacity 250ms; +} +.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:-ms-input-placeholder, +.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:-ms-input-placeholder { + opacity: 0; + transition: opacity 250ms; +} +.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:focus::placeholder, +.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus::placeholder { + opacity: 1; +} +.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:focus::-moz-placeholder, +.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus::-moz-placeholder { + opacity: 1; +} +.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:focus::-webkit-input-placeholder, +.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus::-webkit-input-placeholder { + opacity: 1; +} +.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:focus:-ms-input-placeholder, +.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus:-ms-input-placeholder { + opacity: 1; +} +.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) span.focus-key { + color: var(--semanticFormsPlaceholderColor); + position: absolute; + top: calc(var(--semanticFormsInputTopMargin) + 11px); + right: 20px; +} +.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) span.focus-key kbd { + line-height: 1; +} +.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios):has(input[type=number]) .focus-key { + right: 45px; +} +.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios):has(input[type=search]) label:first-of-type { + left: 32px; +} +.semanticForms .floatLabelForm div:has([data-max-content]) { + max-width: max-content; + min-width: 150px; +} +.semanticForms .floatLabelForm div:has([data-max-content]) dd { + width: max-content; +} +.semanticForms .floatLabelForm div:has([data-max-content]) dd input, .semanticForms .floatLabelForm div:has([data-max-content]) dd select { + field-sizing: content; + min-width: 150px; + max-width: max-content; +} +.semanticForms .floatLabelForm input::placeholder, .semanticForms .floatLabelForm textarea::placeholder { + color: var(--semanticFormsPlaceholderColor); + opacity: 1; +} + +.semanticForms div[class^=colspan-] { + max-width: 100% !important; +} +.semanticForms div.colspan-full { + grid-column: 1/-1; +} +.semanticForms div.colspan-5 { + grid-column: span 5; +} +.semanticForms div.colspan-4 { + grid-column: span 4; +} +.semanticForms div.colspan-3 { + grid-column: span 3; +} +.semanticForms div.colspan-2 { + grid-column: span 2; +} +.semanticForms div.colspan-1 { + grid-column: span 1; +} +.semanticForms fieldset[class^=colspan-] dl div, +.semanticForms dl[class^=colspan-] div { + max-width: 100% !important; +} +.semanticForms fieldset.colspan-full dl, +.semanticForms dl.colspan-full { + grid-template-columns: repeat(auto-fit, minmax(var(--semanticFormsInputMinWidth), 1fr)); +} +.semanticForms fieldset.colspan-5 dl, +.semanticForms dl.colspan-5 { + grid-template-columns: repeat(5, minmax(var(--semanticFormsInputMinWidth), 1fr)); +} +.semanticForms fieldset.colspan-4 dl, +.semanticForms dl.colspan-4 { + grid-template-columns: repeat(4, minmax(var(--semanticFormsInputMinWidth), 1fr)); +} +.semanticForms fieldset.colspan-3 dl, +.semanticForms dl.colspan-3 { + grid-template-columns: repeat(3, minmax(var(--semanticFormsInputMinWidth), 1fr)); +} +.semanticForms fieldset.colspan-2 dl, +.semanticForms dl.colspan-2 { + grid-template-columns: repeat(2, minmax(var(--semanticFormsInputMinWidth), 1fr)); +} +.semanticForms fieldset.colspan-1 dl, +.semanticForms dl.colspan-1 { + grid-template-columns: repeat(1, minmax(var(--semanticFormsInputMinWidth), 1fr)); +} +.semanticForms fieldset.colspan-1 dl dt:nth-of-type(n + 1), +.semanticForms fieldset.colspan-1 dl dd:nth-of-type(n + 1), +.semanticForms dl.colspan-1 dt:nth-of-type(n + 1), +.semanticForms dl.colspan-1 dd:nth-of-type(n + 1) { + grid-column: 1; +} +.semanticForms fieldset.colspan-2 dl dt:nth-of-type(2n + 1), +.semanticForms fieldset.colspan-2 dl dd:nth-of-type(2n + 1), +.semanticForms dl.colspan-2 dt:nth-of-type(2n + 1), +.semanticForms dl.colspan-2 dd:nth-of-type(2n + 1) { + grid-column: 1; +} +.semanticForms fieldset.colspan-2 dl dt:nth-of-type(2n + 2), +.semanticForms fieldset.colspan-2 dl dd:nth-of-type(2n + 2), +.semanticForms dl.colspan-2 dt:nth-of-type(2n + 2), +.semanticForms dl.colspan-2 dd:nth-of-type(2n + 2) { + grid-column: 2; +} +.semanticForms fieldset.colspan-3 dl dt:nth-of-type(3n + 1), +.semanticForms fieldset.colspan-3 dl dd:nth-of-type(3n + 1), +.semanticForms dl.colspan-3 dt:nth-of-type(3n + 1), +.semanticForms dl.colspan-3 dd:nth-of-type(3n + 1) { + grid-column: 1; +} +.semanticForms fieldset.colspan-3 dl dt:nth-of-type(3n + 2), +.semanticForms fieldset.colspan-3 dl dd:nth-of-type(3n + 2), +.semanticForms dl.colspan-3 dt:nth-of-type(3n + 2), +.semanticForms dl.colspan-3 dd:nth-of-type(3n + 2) { + grid-column: 2; +} +.semanticForms fieldset.colspan-3 dl dt:nth-of-type(3n + 3), +.semanticForms fieldset.colspan-3 dl dd:nth-of-type(3n + 3), +.semanticForms dl.colspan-3 dt:nth-of-type(3n + 3), +.semanticForms dl.colspan-3 dd:nth-of-type(3n + 3) { + grid-column: 3; +} +.semanticForms fieldset.colspan-4 dl dt:nth-of-type(4n + 1), +.semanticForms fieldset.colspan-4 dl dd:nth-of-type(4n + 1), +.semanticForms dl.colspan-4 dt:nth-of-type(4n + 1), +.semanticForms dl.colspan-4 dd:nth-of-type(4n + 1) { + grid-column: 1; +} +.semanticForms fieldset.colspan-4 dl dt:nth-of-type(4n + 2), +.semanticForms fieldset.colspan-4 dl dd:nth-of-type(4n + 2), +.semanticForms dl.colspan-4 dt:nth-of-type(4n + 2), +.semanticForms dl.colspan-4 dd:nth-of-type(4n + 2) { + grid-column: 2; +} +.semanticForms fieldset.colspan-4 dl dt:nth-of-type(4n + 3), +.semanticForms fieldset.colspan-4 dl dd:nth-of-type(4n + 3), +.semanticForms dl.colspan-4 dt:nth-of-type(4n + 3), +.semanticForms dl.colspan-4 dd:nth-of-type(4n + 3) { + grid-column: 3; +} +.semanticForms fieldset.colspan-4 dl dt:nth-of-type(4n + 4), +.semanticForms fieldset.colspan-4 dl dd:nth-of-type(4n + 4), +.semanticForms dl.colspan-4 dt:nth-of-type(4n + 4), +.semanticForms dl.colspan-4 dd:nth-of-type(4n + 4) { + grid-column: 4; +} +.semanticForms fieldset.colspan-5 dl dt:nth-of-type(5n + 1), +.semanticForms fieldset.colspan-5 dl dd:nth-of-type(5n + 1), +.semanticForms dl.colspan-5 dt:nth-of-type(5n + 1), +.semanticForms dl.colspan-5 dd:nth-of-type(5n + 1) { + grid-column: 1; +} +.semanticForms fieldset.colspan-5 dl dt:nth-of-type(5n + 2), +.semanticForms fieldset.colspan-5 dl dd:nth-of-type(5n + 2), +.semanticForms dl.colspan-5 dt:nth-of-type(5n + 2), +.semanticForms dl.colspan-5 dd:nth-of-type(5n + 2) { + grid-column: 2; +} +.semanticForms fieldset.colspan-5 dl dt:nth-of-type(5n + 3), +.semanticForms fieldset.colspan-5 dl dd:nth-of-type(5n + 3), +.semanticForms dl.colspan-5 dt:nth-of-type(5n + 3), +.semanticForms dl.colspan-5 dd:nth-of-type(5n + 3) { + grid-column: 3; +} +.semanticForms fieldset.colspan-5 dl dt:nth-of-type(5n + 4), +.semanticForms fieldset.colspan-5 dl dd:nth-of-type(5n + 4), +.semanticForms dl.colspan-5 dt:nth-of-type(5n + 4), +.semanticForms dl.colspan-5 dd:nth-of-type(5n + 4) { + grid-column: 4; +} +.semanticForms fieldset.colspan-5 dl dt:nth-of-type(5n + 5), +.semanticForms fieldset.colspan-5 dl dd:nth-of-type(5n + 5), +.semanticForms dl.colspan-5 dt:nth-of-type(5n + 5), +.semanticForms dl.colspan-5 dd:nth-of-type(5n + 5) { + grid-column: 5; +} + +form.semanticForms, +fieldset { + container: semanticForm/inline-size; +} +@container semanticForm (width >= 1810px) { + form.semanticForms fieldset dl, form.semanticForms dl, + fieldset fieldset dl, + fieldset dl { + grid-template-columns: repeat(7, minmax(var(--semanticFormsInputMinWidth), 1fr)); + } +} +@container semanticForm (width >= 1550px) and (width < 1810px) { + form.semanticForms fieldset dl, form.semanticForms dl, + fieldset fieldset dl, + fieldset dl { + grid-template-columns: repeat(6, minmax(var(--semanticFormsInputMinWidth), 1fr)); + } +} +@container semanticForm (width >= 1290px) and (width < 1550px) { + form.semanticForms fieldset dl, form.semanticForms dl, + fieldset fieldset dl, + fieldset dl { + grid-template-columns: repeat(5, minmax(var(--semanticFormsInputMinWidth), 1fr)); + } +} +@container semanticForm (width >= 1030px) and (width < 1290px) { + form.semanticForms fieldset dl, form.semanticForms fieldset.colspan-5 dl, form.semanticForms dl, form.semanticForms dl.colspan-5, + fieldset fieldset dl, + fieldset fieldset.colspan-5 dl, + fieldset dl, + fieldset dl.colspan-5 { + grid-template-columns: repeat(4, minmax(var(--semanticFormsInputMinWidth), 1fr)); + } + form.semanticForms fieldset dl div.colspan-5, form.semanticForms fieldset.colspan-5 dl div.colspan-5, form.semanticForms dl div.colspan-5, form.semanticForms dl.colspan-5 div.colspan-5, + fieldset fieldset dl div.colspan-5, + fieldset fieldset.colspan-5 dl div.colspan-5, + fieldset dl div.colspan-5, + fieldset dl.colspan-5 div.colspan-5 { + grid-column: span 4; + } +} +@container semanticForm (width >= 850px) and (width < 1030px) { + form.semanticForms fieldset dl, form.semanticForms fieldset.colspan-4 dl, form.semanticForms fieldset.colspan-5 dl, form.semanticForms dl, form.semanticForms dl.colspan-4, form.semanticForms dl.colspan-5, + fieldset fieldset dl, + fieldset fieldset.colspan-4 dl, + fieldset fieldset.colspan-5 dl, + fieldset dl, + fieldset dl.colspan-4, + fieldset dl.colspan-5 { + grid-template-columns: repeat(3, minmax(var(--semanticFormsInputMinWidth), 1fr)); + } + form.semanticForms fieldset dl div.colspan-4, + form.semanticForms fieldset dl div.colspan-5, form.semanticForms fieldset.colspan-4 dl div.colspan-4, + form.semanticForms fieldset.colspan-4 dl div.colspan-5, form.semanticForms fieldset.colspan-5 dl div.colspan-4, + form.semanticForms fieldset.colspan-5 dl div.colspan-5, form.semanticForms dl div.colspan-4, + form.semanticForms dl div.colspan-5, form.semanticForms dl.colspan-4 div.colspan-4, + form.semanticForms dl.colspan-4 div.colspan-5, form.semanticForms dl.colspan-5 div.colspan-4, + form.semanticForms dl.colspan-5 div.colspan-5, + fieldset fieldset dl div.colspan-4, + fieldset fieldset dl div.colspan-5, + fieldset fieldset.colspan-4 dl div.colspan-4, + fieldset fieldset.colspan-4 dl div.colspan-5, + fieldset fieldset.colspan-5 dl div.colspan-4, + fieldset fieldset.colspan-5 dl div.colspan-5, + fieldset dl div.colspan-4, + fieldset dl div.colspan-5, + fieldset dl.colspan-4 div.colspan-4, + fieldset dl.colspan-4 div.colspan-5, + fieldset dl.colspan-5 div.colspan-4, + fieldset dl.colspan-5 div.colspan-5 { + grid-column: span 3; + } +} +@container semanticForm (width >= 510px) and (width < 850px) { + form.semanticForms fieldset dl, form.semanticForms fieldset.colspan-3 dl, form.semanticForms fieldset.colspan-4 dl, form.semanticForms fieldset.colspan-5 dl, form.semanticForms dl, form.semanticForms dl.colspan-3, form.semanticForms dl.colspan-4, form.semanticForms dl.colspan-5, + fieldset fieldset dl, + fieldset fieldset.colspan-3 dl, + fieldset fieldset.colspan-4 dl, + fieldset fieldset.colspan-5 dl, + fieldset dl, + fieldset dl.colspan-3, + fieldset dl.colspan-4, + fieldset dl.colspan-5 { + grid-template-columns: repeat(2, minmax(var(--semanticFormsInputMinWidth), 1fr)); + } + form.semanticForms fieldset dl div.colspan-3, + form.semanticForms fieldset dl div.colspan-4, + form.semanticForms fieldset dl div.colspan-5, form.semanticForms fieldset.colspan-3 dl div.colspan-3, + form.semanticForms fieldset.colspan-3 dl div.colspan-4, + form.semanticForms fieldset.colspan-3 dl div.colspan-5, form.semanticForms fieldset.colspan-4 dl div.colspan-3, + form.semanticForms fieldset.colspan-4 dl div.colspan-4, + form.semanticForms fieldset.colspan-4 dl div.colspan-5, form.semanticForms fieldset.colspan-5 dl div.colspan-3, + form.semanticForms fieldset.colspan-5 dl div.colspan-4, + form.semanticForms fieldset.colspan-5 dl div.colspan-5, form.semanticForms dl div.colspan-3, + form.semanticForms dl div.colspan-4, + form.semanticForms dl div.colspan-5, form.semanticForms dl.colspan-3 div.colspan-3, + form.semanticForms dl.colspan-3 div.colspan-4, + form.semanticForms dl.colspan-3 div.colspan-5, form.semanticForms dl.colspan-4 div.colspan-3, + form.semanticForms dl.colspan-4 div.colspan-4, + form.semanticForms dl.colspan-4 div.colspan-5, form.semanticForms dl.colspan-5 div.colspan-3, + form.semanticForms dl.colspan-5 div.colspan-4, + form.semanticForms dl.colspan-5 div.colspan-5, + fieldset fieldset dl div.colspan-3, + fieldset fieldset dl div.colspan-4, + fieldset fieldset dl div.colspan-5, + fieldset fieldset.colspan-3 dl div.colspan-3, + fieldset fieldset.colspan-3 dl div.colspan-4, + fieldset fieldset.colspan-3 dl div.colspan-5, + fieldset fieldset.colspan-4 dl div.colspan-3, + fieldset fieldset.colspan-4 dl div.colspan-4, + fieldset fieldset.colspan-4 dl div.colspan-5, + fieldset fieldset.colspan-5 dl div.colspan-3, + fieldset fieldset.colspan-5 dl div.colspan-4, + fieldset fieldset.colspan-5 dl div.colspan-5, + fieldset dl div.colspan-3, + fieldset dl div.colspan-4, + fieldset dl div.colspan-5, + fieldset dl.colspan-3 div.colspan-3, + fieldset dl.colspan-3 div.colspan-4, + fieldset dl.colspan-3 div.colspan-5, + fieldset dl.colspan-4 div.colspan-3, + fieldset dl.colspan-4 div.colspan-4, + fieldset dl.colspan-4 div.colspan-5, + fieldset dl.colspan-5 div.colspan-3, + fieldset dl.colspan-5 div.colspan-4, + fieldset dl.colspan-5 div.colspan-5 { + grid-column: span 2; + } +} +@container semanticForm (width < 510px) { + form.semanticForms fieldset dl, form.semanticForms fieldset.colspan-2 dl, form.semanticForms fieldset.colspan-3 dl, form.semanticForms fieldset.colspan-4 dl, form.semanticForms fieldset.colspan-5 dl, form.semanticForms dl, form.semanticForms dl.colspan-2, form.semanticForms dl.colspan-3, form.semanticForms dl.colspan-4, form.semanticForms dl.colspan-5, + fieldset fieldset dl, + fieldset fieldset.colspan-2 dl, + fieldset fieldset.colspan-3 dl, + fieldset fieldset.colspan-4 dl, + fieldset fieldset.colspan-5 dl, + fieldset dl, + fieldset dl.colspan-2, + fieldset dl.colspan-3, + fieldset dl.colspan-4, + fieldset dl.colspan-5 { + grid-template-columns: repeat(1, minmax(var(--semanticFormsInputMinWidth), 1fr)); + } + form.semanticForms fieldset dl div.colspan-2, + form.semanticForms fieldset dl div.colspan-3, + form.semanticForms fieldset dl div.colspan-4, + form.semanticForms fieldset dl div.colspan-5, form.semanticForms fieldset.colspan-2 dl div.colspan-2, + form.semanticForms fieldset.colspan-2 dl div.colspan-3, + form.semanticForms fieldset.colspan-2 dl div.colspan-4, + form.semanticForms fieldset.colspan-2 dl div.colspan-5, form.semanticForms fieldset.colspan-3 dl div.colspan-2, + form.semanticForms fieldset.colspan-3 dl div.colspan-3, + form.semanticForms fieldset.colspan-3 dl div.colspan-4, + form.semanticForms fieldset.colspan-3 dl div.colspan-5, form.semanticForms fieldset.colspan-4 dl div.colspan-2, + form.semanticForms fieldset.colspan-4 dl div.colspan-3, + form.semanticForms fieldset.colspan-4 dl div.colspan-4, + form.semanticForms fieldset.colspan-4 dl div.colspan-5, form.semanticForms fieldset.colspan-5 dl div.colspan-2, + form.semanticForms fieldset.colspan-5 dl div.colspan-3, + form.semanticForms fieldset.colspan-5 dl div.colspan-4, + form.semanticForms fieldset.colspan-5 dl div.colspan-5, form.semanticForms dl div.colspan-2, + form.semanticForms dl div.colspan-3, + form.semanticForms dl div.colspan-4, + form.semanticForms dl div.colspan-5, form.semanticForms dl.colspan-2 div.colspan-2, + form.semanticForms dl.colspan-2 div.colspan-3, + form.semanticForms dl.colspan-2 div.colspan-4, + form.semanticForms dl.colspan-2 div.colspan-5, form.semanticForms dl.colspan-3 div.colspan-2, + form.semanticForms dl.colspan-3 div.colspan-3, + form.semanticForms dl.colspan-3 div.colspan-4, + form.semanticForms dl.colspan-3 div.colspan-5, form.semanticForms dl.colspan-4 div.colspan-2, + form.semanticForms dl.colspan-4 div.colspan-3, + form.semanticForms dl.colspan-4 div.colspan-4, + form.semanticForms dl.colspan-4 div.colspan-5, form.semanticForms dl.colspan-5 div.colspan-2, + form.semanticForms dl.colspan-5 div.colspan-3, + form.semanticForms dl.colspan-5 div.colspan-4, + form.semanticForms dl.colspan-5 div.colspan-5, + fieldset fieldset dl div.colspan-2, + fieldset fieldset dl div.colspan-3, + fieldset fieldset dl div.colspan-4, + fieldset fieldset dl div.colspan-5, + fieldset fieldset.colspan-2 dl div.colspan-2, + fieldset fieldset.colspan-2 dl div.colspan-3, + fieldset fieldset.colspan-2 dl div.colspan-4, + fieldset fieldset.colspan-2 dl div.colspan-5, + fieldset fieldset.colspan-3 dl div.colspan-2, + fieldset fieldset.colspan-3 dl div.colspan-3, + fieldset fieldset.colspan-3 dl div.colspan-4, + fieldset fieldset.colspan-3 dl div.colspan-5, + fieldset fieldset.colspan-4 dl div.colspan-2, + fieldset fieldset.colspan-4 dl div.colspan-3, + fieldset fieldset.colspan-4 dl div.colspan-4, + fieldset fieldset.colspan-4 dl div.colspan-5, + fieldset fieldset.colspan-5 dl div.colspan-2, + fieldset fieldset.colspan-5 dl div.colspan-3, + fieldset fieldset.colspan-5 dl div.colspan-4, + fieldset fieldset.colspan-5 dl div.colspan-5, + fieldset dl div.colspan-2, + fieldset dl div.colspan-3, + fieldset dl div.colspan-4, + fieldset dl div.colspan-5, + fieldset dl.colspan-2 div.colspan-2, + fieldset dl.colspan-2 div.colspan-3, + fieldset dl.colspan-2 div.colspan-4, + fieldset dl.colspan-2 div.colspan-5, + fieldset dl.colspan-3 div.colspan-2, + fieldset dl.colspan-3 div.colspan-3, + fieldset dl.colspan-3 div.colspan-4, + fieldset dl.colspan-3 div.colspan-5, + fieldset dl.colspan-4 div.colspan-2, + fieldset dl.colspan-4 div.colspan-3, + fieldset dl.colspan-4 div.colspan-4, + fieldset dl.colspan-4 div.colspan-5, + fieldset dl.colspan-5 div.colspan-2, + fieldset dl.colspan-5 div.colspan-3, + fieldset dl.colspan-5 div.colspan-4, + fieldset dl.colspan-5 div.colspan-5 { + grid-column: span 1; + } +} + +form.semanticForms.lowFlow, +form.semanticForms:not(.semanticFormsActive) { + gap: 10px; +} +form.semanticForms.lowFlow dl, +form.semanticForms:not(.semanticFormsActive) dl { + gap: 0 10px; + margin-bottom: 0px; +} +form.semanticForms.lowFlow dt, +form.semanticForms:not(.semanticFormsActive) dt { + min-width: var(--semanticFormsInputMinWidth); /* this matches the max-width of js-enabled inputs */ +} +form.semanticForms.lowFlow dt label, +form.semanticForms:not(.semanticFormsActive) dt label { + position: absolute; + display: block; + height: 11px; + transform: scale(0.7); + transform-origin: left center; + padding-left: 22px; + margin-top: -1px; +} +form.semanticForms.lowFlow dt:has(+ dd input:required) label::after, +form.semanticForms:not(.semanticFormsActive) dt:has(+ dd input:required) label::after { + content: " *"; + color: red; +} +form.semanticForms.lowFlow dt:has(+ dd.checkboxes) label, form.semanticForms.lowFlow dt:has(+ dd.radios) label, +form.semanticForms:not(.semanticFormsActive) dt:has(+ dd.checkboxes) label, +form.semanticForms:not(.semanticFormsActive) dt:has(+ dd.radios) label { + padding-left: 15px; +} +form.semanticForms.lowFlow dt:not(:has(+ dd ul)):has(+ dd input[type=checkbox]) label, +form.semanticForms:not(.semanticFormsActive) dt:not(:has(+ dd ul)):has(+ dd input[type=checkbox]) label { + transform: scale(1); + margin-top: 0; + margin-left: 8px; +} +form.semanticForms.lowFlow dt:not(:has(+ dd ul)):has(+ dd input[type=radio]) label, +form.semanticForms:not(.semanticFormsActive) dt:not(:has(+ dd ul)):has(+ dd input[type=radio]) label { + transform: scale(1); + margin-top: 0; + margin-left: 8px; +} +form.semanticForms.lowFlow dd, +form.semanticForms:not(.semanticFormsActive) dd { + margin-top: var(--semanticFormsInputTopMargin); + margin-bottom: 10px; + min-width: var(--semanticFormsInputMinWidth); /* this matches the max-width of js-enabled inputs */ +} +form.semanticForms.lowFlow dd.checkboxes, form.semanticForms.lowFlow dd.radios, +form.semanticForms:not(.semanticFormsActive) dd.checkboxes, +form.semanticForms:not(.semanticFormsActive) dd.radios { + margin-top: 0; +} +form.semanticForms.lowFlow dd.checkboxes ul input[type=radio], form.semanticForms.lowFlow dd.radios ul input[type=radio], +form.semanticForms:not(.semanticFormsActive) dd.checkboxes ul input[type=radio], +form.semanticForms:not(.semanticFormsActive) dd.radios ul input[type=radio] { + margin-top: 3px; +} +form.semanticForms.lowFlow dd.checkboxes ul label, form.semanticForms.lowFlow dd.radios ul label, +form.semanticForms:not(.semanticFormsActive) dd.checkboxes ul label, +form.semanticForms:not(.semanticFormsActive) dd.radios ul label { + padding-top: 7px; + padding-left: 0; + font-size: var(--semanticFormsFontSize); +} +form.semanticForms.lowFlow dd.checkboxes ul + label, form.semanticForms.lowFlow dd.radios ul + label, +form.semanticForms:not(.semanticFormsActive) dd.checkboxes ul + label, +form.semanticForms:not(.semanticFormsActive) dd.radios ul + label { + margin-top: 0; + font-size: small; +} +form.semanticForms.lowFlow dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]), +form.semanticForms:not(.semanticFormsActive) dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) { + margin-top: 0; + padding-left: 10px; +} +form.semanticForms.lowFlow dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=checkbox], +form.semanticForms.lowFlow dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=radio], +form.semanticForms:not(.semanticFormsActive) dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=checkbox], +form.semanticForms:not(.semanticFormsActive) dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=radio] { + margin-left: 1px; + margin-top: 1px; + margin-right: auto; +} +form.semanticForms.lowFlow dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) label, +form.semanticForms:not(.semanticFormsActive) dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) label { + font-size: small; + margin-top: -1px; + padding-left: 11px; +} +form.semanticForms.lowFlow dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=radio] + label, +form.semanticForms:not(.semanticFormsActive) dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=radio] + label { + margin-top: -4px; +} +form.semanticForms.lowFlow dd input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio], [type=range]), +form.semanticForms.lowFlow dd select, +form.semanticForms.lowFlow dd textarea, +form.semanticForms:not(.semanticFormsActive) dd input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio], [type=range]), +form.semanticForms:not(.semanticFormsActive) dd select, +form.semanticForms:not(.semanticFormsActive) dd textarea { + padding-right: 6px; +} +form.semanticForms.lowFlow dd label, +form.semanticForms:not(.semanticFormsActive) dd label { + padding-left: 10px; + margin-top: -5px; + font-size: small; + color: var(--semanticFormsPlaceholderColor); +} +form.semanticForms.lowFlow dd button:not(.clear, .show), +form.semanticForms.lowFlow dd input[type=submit]:not(.clear, .show), +form.semanticForms.lowFlow dd input[type=button]:not(.clear, .show), +form.semanticForms:not(.semanticFormsActive) dd button:not(.clear, .show), +form.semanticForms:not(.semanticFormsActive) dd input[type=submit]:not(.clear, .show), +form.semanticForms:not(.semanticFormsActive) dd input[type=button]:not(.clear, .show) { + margin-top: 0; +} + +.checkboxes ul, +.radios ul { + margin-top: var(--semanticFormsInputTopMargin); +} + +form.semanticForms fieldset, +table.semanticForms fieldset { border-radius: var(--semanticFormsBorderRadius); background: var(--semanticFormsFormSubBgColor); border: 1px var(--semanticFormsSubBorderColor) solid; @@ -1082,30 +1215,20 @@ table.semanticForms.light fieldset { margin-bottom: 15px; } form.semanticForms fieldset fieldset, -form.semanticForms.light fieldset fieldset, -table.semanticForms fieldset fieldset, -table.semanticForms.light fieldset fieldset { +table.semanticForms fieldset fieldset { background-color: var(--semanticFormsNestedFieldsetBgColor); border: var(--semanticFormsNestedFieldsetBorder); } form.semanticForms fieldset fieldset input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]), form.semanticForms fieldset fieldset select, form.semanticForms fieldset fieldset textarea, -form.semanticForms.light fieldset fieldset input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]), -form.semanticForms.light fieldset fieldset select, -form.semanticForms.light fieldset fieldset textarea, table.semanticForms fieldset fieldset input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]), table.semanticForms fieldset fieldset select, -table.semanticForms fieldset fieldset textarea, -table.semanticForms.light fieldset fieldset input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]), -table.semanticForms.light fieldset fieldset select, -table.semanticForms.light fieldset fieldset textarea { +table.semanticForms fieldset fieldset textarea { background-color: var(--semanticFormsNestedInputBgColor); } form.semanticForms details, -form.semanticForms.light details, -table.semanticForms details, -table.semanticForms.light details { +table.semanticForms details { box-sizing: border-box; position: relative; background-color: var(--semanticFormsNestedFieldsetBgColor); @@ -1119,24 +1242,18 @@ table.semanticForms.light details { min-height: calc(var(--semanticFormsFontSize) + 20px); } form.semanticForms details::details-content, -form.semanticForms.light details::details-content, -table.semanticForms details::details-content, -table.semanticForms.light details::details-content { +table.semanticForms details::details-content { visibility: hidden; opacity: 0; transition: opacity 250ms ease-in, visibility 0ms ease-in 250ms; } @supports (interpolate-size: allow-keywords) { form.semanticForms details, - form.semanticForms.light details, - table.semanticForms details, - table.semanticForms.light details { + table.semanticForms details { transition: opacity 250ms ease-in, visibility 0ms ease-in 250ms, height 250ms; } form.semanticForms details::details-content, - form.semanticForms.light details::details-content, - table.semanticForms details::details-content, - table.semanticForms.light details::details-content { + table.semanticForms details::details-content { height: 0; overflow: hidden; transition: height 250ms, content-visibility 250ms; @@ -1144,11 +1261,10 @@ table.semanticForms.light details::details-content { } } form.semanticForms details summary, -form.semanticForms.light details summary, -table.semanticForms details summary, -table.semanticForms.light details summary { +table.semanticForms details summary { cursor: pointer; margin: 0; + margin-bottom: 10px; line-height: 1; position: absolute; top: 10px; @@ -1156,18 +1272,12 @@ table.semanticForms.light details summary { transition: top 250ms; } form.semanticForms details summary::-webkit-details-marker, form.semanticForms details summary::marker, -form.semanticForms.light details summary::-webkit-details-marker, -form.semanticForms.light details summary::marker, table.semanticForms details summary::-webkit-details-marker, -table.semanticForms details summary::marker, -table.semanticForms.light details summary::-webkit-details-marker, -table.semanticForms.light details summary::marker { +table.semanticForms details summary::marker { content: ""; } form.semanticForms details summary::before, -form.semanticForms.light details summary::before, -table.semanticForms details summary::before, -table.semanticForms.light details summary::before { +table.semanticForms details summary::before { content: ""; border-width: 0.4rem; border-style: solid; @@ -1179,202 +1289,139 @@ table.semanticForms.light details summary::before { transform-origin: 0.2rem 50%; transition: 250ms transform ease; } +form.semanticForms details[open], +table.semanticForms details[open] { + margin-bottom: 10px; +} form.semanticForms details[open]::details-content, -form.semanticForms.light details[open]::details-content, -table.semanticForms details[open]::details-content, -table.semanticForms.light details[open]::details-content { +table.semanticForms details[open]::details-content { visibility: visible; opacity: 1; transition: opacity 250ms ease-in, visibility 0ms ease-in 0ms; } @supports (interpolate-size: allow-keywords) { form.semanticForms details[open]::details-content, - form.semanticForms.light details[open]::details-content, - table.semanticForms details[open]::details-content, - table.semanticForms.light details[open]::details-content { + table.semanticForms details[open]::details-content { height: auto; } } form.semanticForms details[open] summary::before, -form.semanticForms.light details[open] summary::before, -table.semanticForms details[open] summary::before, -table.semanticForms.light details[open] summary::before { +table.semanticForms details[open] summary::before { transform: rotate(90deg); } form.semanticForms details[open] > dl:first-of-type, -form.semanticForms.light details[open] > dl:first-of-type, -table.semanticForms details[open] > dl:first-of-type, -table.semanticForms.light details[open] > dl:first-of-type { +table.semanticForms details[open] > dl:first-of-type { margin-top: 15px; } -form.semanticForms details[open], form.semanticForms summary, -form.semanticForms.light details[open], -form.semanticForms.light summary, -table.semanticForms details[open], -table.semanticForms summary, -table.semanticForms.light details[open], -table.semanticForms.light summary { - margin-bottom: 10px; -} -@supports (scrollbar-color: auto) { - form.semanticForms textarea, - form.semanticForms.light textarea, - table.semanticForms textarea, - table.semanticForms.light textarea { - scrollbar-color: var(--semanticFormsScrollbarColor) transparent; - } - form.semanticForms textarea::-webkit-resizer, - form.semanticForms.light textarea::-webkit-resizer, - table.semanticForms textarea::-webkit-resizer, - table.semanticForms.light textarea::-webkit-resizer { - border: none; - background-image: var(--semanticFormsCustomResizer); - background-size: 14px; - background-repeat: no-repeat; - background-position: 100%; - margin: 0 2px 2px 0; - } - form.semanticForms select[multiple], - form.semanticForms.light select[multiple], - table.semanticForms select[multiple], - table.semanticForms.light select[multiple] { - scrollbar-color: var(--semanticFormsScrollbarColor) transparent; - } -} -form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea), -form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea), -table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea), -table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) { +form.semanticForms dl, +table.semanticForms dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--semanticFormsInputMinWidth), 1fr)); gap: 10px; margin-bottom: 10px; } -form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd, -form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd, -table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd, -table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd { +form.semanticForms dl div, +table.semanticForms dl div { + position: relative; + width: 100%; + min-width: var(--semanticFormsInputMinWidth); + max-width: 365px; +} +form.semanticForms dl div:has([data-max-content]), +table.semanticForms dl div:has([data-max-content]) { + min-width: 150px; + max-width: max-content; +} +form.semanticForms dl div:has([data-max-content]) dd, +table.semanticForms dl div:has([data-max-content]) dd { + width: max-content; +} +form.semanticForms dl div:has([data-max-content]) dd input, form.semanticForms dl div:has([data-max-content]) dd select, +table.semanticForms dl div:has([data-max-content]) dd input, +table.semanticForms dl div:has([data-max-content]) dd select { + field-sizing: content; + min-width: 150px; + max-width: max-content; +} +form.semanticForms dl dd, +table.semanticForms dl dd { position: relative; display: flex; flex-direction: column; gap: 10px; max-width: 100%; } -form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.singleCheckbox, form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.singleRadio, -form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.singleCheckbox, -form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.singleRadio, -table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.singleCheckbox, -table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.singleRadio, -table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.singleCheckbox, -table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.singleRadio { +form.semanticForms dl dd.singleCheckbox, form.semanticForms dl dd.singleRadio, +table.semanticForms dl dd.singleCheckbox, +table.semanticForms dl dd.singleRadio { display: grid; grid-template-columns: 15px 1fr; align-items: center; padding-left: 11px; } -form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.singleCheckbox > :not(input[type=checkbox], input[type=radio], label), form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.singleRadio > :not(input[type=checkbox], input[type=radio], label), -form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.singleCheckbox > :not(input[type=checkbox], input[type=radio], label), -form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.singleRadio > :not(input[type=checkbox], input[type=radio], label), -table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.singleCheckbox > :not(input[type=checkbox], input[type=radio], label), -table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.singleRadio > :not(input[type=checkbox], input[type=radio], label), -table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.singleCheckbox > :not(input[type=checkbox], input[type=radio], label), -table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.singleRadio > :not(input[type=checkbox], input[type=radio], label) { +form.semanticForms dl dd.singleCheckbox > :not(input[type=checkbox], input[type=radio], label), form.semanticForms dl dd.singleRadio > :not(input[type=checkbox], input[type=radio], label), +table.semanticForms dl dd.singleCheckbox > :not(input[type=checkbox], input[type=radio], label), +table.semanticForms dl dd.singleRadio > :not(input[type=checkbox], input[type=radio], label) { grid-column: 1/-1; } -form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.singleCheckbox label:nth-of-type(2), form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.singleRadio label:nth-of-type(2), -form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.singleCheckbox label:nth-of-type(2), -form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.singleRadio label:nth-of-type(2), -table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.singleCheckbox label:nth-of-type(2), -table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.singleRadio label:nth-of-type(2), -table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.singleCheckbox label:nth-of-type(2), -table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.singleRadio label:nth-of-type(2) { +form.semanticForms dl dd.singleCheckbox label:nth-of-type(2), form.semanticForms dl dd.singleRadio label:nth-of-type(2), +table.semanticForms dl dd.singleCheckbox label:nth-of-type(2), +table.semanticForms dl dd.singleRadio label:nth-of-type(2) { grid-column: 1/-1; padding: 0 10px; font-size: small; color: var(--semanticFormsTextColor); } -form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.singleRadio > input, -form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.singleRadio > input, -table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.singleRadio > input, -table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.singleRadio > input { +form.semanticForms dl dd.singleRadio > input, +table.semanticForms dl dd.singleRadio > input { margin: 0; } -form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.checkboxes ul, form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.radios ul, -form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.checkboxes ul, -form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.radios ul, -table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.checkboxes ul, -table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.radios ul, -table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.checkboxes ul, -table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.radios ul { +form.semanticForms dl dd.checkboxes ul, form.semanticForms dl dd.radios ul, +table.semanticForms dl dd.checkboxes ul, +table.semanticForms dl dd.radios ul { display: flex; flex-direction: column; margin-top: var(--semanticFormsInputTopMargin); padding-left: 10px; gap: 5px; } -form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.checkboxes ul li, form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.radios ul li, -form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.checkboxes ul li, -form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.radios ul li, -table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.checkboxes ul li, -table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.radios ul li, -table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.checkboxes ul li, -table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.radios ul li { +form.semanticForms dl dd.checkboxes ul li, form.semanticForms dl dd.radios ul li, +table.semanticForms dl dd.checkboxes ul li, +table.semanticForms dl dd.radios ul li { display: flex; align-items: center; gap: 5px; } -form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.checkboxes > label, form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.radios > label, -form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.checkboxes > label, -form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.radios > label, -table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.checkboxes > label, -table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.radios > label, -table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.checkboxes > label, -table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.radios > label { +form.semanticForms dl dd.checkboxes > label, form.semanticForms dl dd.radios > label, +table.semanticForms dl dd.checkboxes > label, +table.semanticForms dl dd.radios > label { padding-left: 20px; font-size: small; color: var(--semanticFormsTextColor); } -form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)), -form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)), -table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)), -table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) { +form.semanticForms dl dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)), +table.semanticForms dl dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) { display: grid; grid-template-columns: 2fr 1fr; } -form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) button.clear, form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) button.show, -form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) button.clear, -form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) button.show, -table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) button.clear, -table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) button.show, -table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) button.clear, -table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) button.show { +form.semanticForms dl dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) button.clear, form.semanticForms dl dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) button.show, +table.semanticForms dl dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) button.clear, +table.semanticForms dl dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) button.show { right: 36%; } -form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) input:not([type=submit]), form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) select, form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) textarea, -form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) input:not([type=submit]), -form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) select, -form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) textarea, -table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) input:not([type=submit]), -table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) select, -table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) textarea, -table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) input:not([type=submit]), -table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) select, -table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) textarea { +form.semanticForms dl dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) input:not([type=submit]), form.semanticForms dl dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) select, form.semanticForms dl dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) textarea, +table.semanticForms dl dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) input:not([type=submit]), +table.semanticForms dl dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) select, +table.semanticForms dl dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) textarea { grid-row: 1/2; grid-column: 1/2; } -form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) button:not(.clear, .show), -form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) input[type=submit]:not(.clear, .show), -form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) input[type=button]:not(.clear, .show), -form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) button:not(.clear, .show), -form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) input[type=submit]:not(.clear, .show), -form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) input[type=button]:not(.clear, .show), -table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) button:not(.clear, .show), -table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) input[type=submit]:not(.clear, .show), -table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) input[type=button]:not(.clear, .show), -table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) button:not(.clear, .show), -table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) input[type=submit]:not(.clear, .show), -table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) input[type=button]:not(.clear, .show) { +form.semanticForms dl dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) button:not(.clear, .show), +form.semanticForms dl dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) input[type=submit]:not(.clear, .show), +form.semanticForms dl dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) input[type=button]:not(.clear, .show), +table.semanticForms dl dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) button:not(.clear, .show), +table.semanticForms dl dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) input[type=submit]:not(.clear, .show), +table.semanticForms dl dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) input[type=button]:not(.clear, .show) { grid-row: 1/2; grid-column: 2/3; width: 100%; @@ -1386,56 +1433,21 @@ table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > texta overflow: hidden; display: inline-block; } -form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) label:nth-of-type(2), -form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) label:not(.floatLabelFormAnimatedLabel), -form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) label:nth-of-type(2), -form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) label:not(.floatLabelFormAnimatedLabel), -table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) label:nth-of-type(2), -table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) label:not(.floatLabelFormAnimatedLabel), -table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) label:nth-of-type(2), -table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) label:not(.floatLabelFormAnimatedLabel) { +form.semanticForms dl dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) label:nth-of-type(2), +form.semanticForms dl dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) label:not(.floatLabelFormAnimatedLabel), +table.semanticForms dl dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) label:nth-of-type(2), +table.semanticForms dl dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) label:not(.floatLabelFormAnimatedLabel) { grid-row: 2/3; grid-column: 1/-1; } -form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(span.focus-key) label:first-of-type, -form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(span.focus-key) label:first-of-type, -table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(span.focus-key) label:first-of-type, -table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(span.focus-key) label:first-of-type { - width: calc(100% - 95px); -} -form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(span.focus-key) span.focus-key, -form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(span.focus-key) span.focus-key, -table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(span.focus-key) span.focus-key, -table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(span.focus-key) span.focus-key { - display: block; -} -form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(span.focus-key) span.focus-key kbd, -form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(span.focus-key) span.focus-key kbd, -table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(span.focus-key) span.focus-key kbd, -table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(span.focus-key) span.focus-key kbd { - font-family: sans-serif; -} -form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(span.focus-key):has(input:focus, select:focus, textarea:focus) span.focus-key, form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(span.focus-key):not(:has(input:placeholder-shown, textarea:placeholder-shown)) span.focus-key, -form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(span.focus-key):has(input:focus, select:focus, textarea:focus) span.focus-key, -form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(span.focus-key):not(:has(input:placeholder-shown, textarea:placeholder-shown)) span.focus-key, -table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(span.focus-key):has(input:focus, select:focus, textarea:focus) span.focus-key, -table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(span.focus-key):not(:has(input:placeholder-shown, textarea:placeholder-shown)) span.focus-key, -table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(span.focus-key):has(input:focus, select:focus, textarea:focus) span.focus-key, -table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(span.focus-key):not(:has(input:placeholder-shown, textarea:placeholder-shown)) span.focus-key { - display: none; -} form.semanticForms p:has(input:not([type=checkbox], [type=radio]), textarea, label), -form.semanticForms.light p:has(input:not([type=checkbox], [type=radio]), textarea, label), -table.semanticForms p:has(input:not([type=checkbox], [type=radio]), textarea, label), -table.semanticForms.light p:has(input:not([type=checkbox], [type=radio]), textarea, label) { +table.semanticForms p:has(input:not([type=checkbox], [type=radio]), textarea, label) { display: flex; flex-direction: column; gap: 5px; } form.semanticForms p:has(input[type=checkbox], input[type=radio]), -form.semanticForms.light p:has(input[type=checkbox], input[type=radio]), -table.semanticForms p:has(input[type=checkbox], input[type=radio]), -table.semanticForms.light p:has(input[type=checkbox], input[type=radio]) { +table.semanticForms p:has(input[type=checkbox], input[type=radio]) { display: flex; flex-direction: row; align-items: center; @@ -1443,814 +1455,14 @@ table.semanticForms.light p:has(input[type=checkbox], input[type=radio]) { } form.semanticForms menu:has(li > input, li > label, li > button, li > select, li > textarea), form.semanticForms ul:has(li > input, li > label, li > button, li > select, li > textarea), -form.semanticForms.light menu:has(li > input, li > label, li > button, li > select, li > textarea), -form.semanticForms.light ul:has(li > input, li > label, li > button, li > select, li > textarea), table.semanticForms menu:has(li > input, li > label, li > button, li > select, li > textarea), -table.semanticForms ul:has(li > input, li > label, li > button, li > select, li > textarea), -table.semanticForms.light menu:has(li > input, li > label, li > button, li > select, li > textarea), -table.semanticForms.light ul:has(li > input, li > label, li > button, li > select, li > textarea) { +table.semanticForms ul:has(li > input, li > label, li > button, li > select, li > textarea) { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; list-style-type: none; } -form.semanticForms input[type=checkbox] + label:first-of-type, -form.semanticForms input[type=radio] + label:first-of-type, -form.semanticForms.light input[type=checkbox] + label:first-of-type, -form.semanticForms.light input[type=radio] + label:first-of-type, -table.semanticForms input[type=checkbox] + label:first-of-type, -table.semanticForms input[type=radio] + label:first-of-type, -table.semanticForms.light input[type=checkbox] + label:first-of-type, -table.semanticForms.light input[type=radio] + label:first-of-type { - padding-top: 2px; - font-size: var(--semanticFormsInputFontSize); - cursor: pointer; - display: flex; - align-items: center; - gap: 5px; -} -form.semanticForms input[type=checkbox] + label:first-of-type span.required, -form.semanticForms input[type=radio] + label:first-of-type span.required, -form.semanticForms.light input[type=checkbox] + label:first-of-type span.required, -form.semanticForms.light input[type=radio] + label:first-of-type span.required, -table.semanticForms input[type=checkbox] + label:first-of-type span.required, -table.semanticForms input[type=radio] + label:first-of-type span.required, -table.semanticForms.light input[type=checkbox] + label:first-of-type span.required, -table.semanticForms.light input[type=radio] + label:first-of-type span.required { - cursor: help; - pointer-events: auto; - color: red; -} -form.semanticForms input[type=checkbox] + label:first-of-type span.help, -form.semanticForms input[type=radio] + label:first-of-type span.help, -form.semanticForms.light input[type=checkbox] + label:first-of-type span.help, -form.semanticForms.light input[type=radio] + label:first-of-type span.help, -table.semanticForms input[type=checkbox] + label:first-of-type span.help, -table.semanticForms input[type=radio] + label:first-of-type span.help, -table.semanticForms.light input[type=checkbox] + label:first-of-type span.help, -table.semanticForms.light input[type=radio] + label:first-of-type span.help { - display: grid; - place-items: center; - cursor: help; - pointer-events: auto; -} -form.semanticForms input[type=checkbox] + label:first-of-type span.help svg, -form.semanticForms input[type=radio] + label:first-of-type span.help svg, -form.semanticForms.light input[type=checkbox] + label:first-of-type span.help svg, -form.semanticForms.light input[type=radio] + label:first-of-type span.help svg, -table.semanticForms input[type=checkbox] + label:first-of-type span.help svg, -table.semanticForms input[type=radio] + label:first-of-type span.help svg, -table.semanticForms.light input[type=checkbox] + label:first-of-type span.help svg, -table.semanticForms.light input[type=radio] + label:first-of-type span.help svg { - width: 80%; -} -form.semanticForms .floatLabelForm, -form.semanticForms.light .floatLabelForm, -table.semanticForms .floatLabelForm, -table.semanticForms.light .floatLabelForm { - grid-template-columns: repeat(auto-fit, minmax(var(--semanticFormsInputMinWidth), 1fr)); -} -form.semanticForms .floatLabelForm div, -form.semanticForms.light .floatLabelForm div, -table.semanticForms .floatLabelForm div, -table.semanticForms.light .floatLabelForm div { - position: relative; - width: 100%; - min-width: var(--semanticFormsInputMinWidth); - max-width: 100%; - max-width: 365px; -} -form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:not([type=submit], [type=reset], [type=image]):focus:not([type=checkbox], [type=radio], .no-float-label) ~ label:first-of-type, form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:not([type=submit], [type=reset], [type=image]):not(:placeholder-shown):not(.no-float-label):not([type=checkbox]):not([type=radio]) ~ label:first-of-type, -form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select:focus:not([type=checkbox], [type=radio], .no-float-label) ~ label:first-of-type, -form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select:not(:placeholder-shown):not(.no-float-label):not([type=checkbox]):not([type=radio]) ~ label:first-of-type, -form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus:not([type=checkbox], [type=radio], .no-float-label) ~ label:first-of-type, -form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:not(:placeholder-shown):not(.no-float-label):not([type=checkbox]):not([type=radio]) ~ label:first-of-type, -form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:not([type=submit], [type=reset], [type=image]):focus:not([type=checkbox], [type=radio], .no-float-label) ~ label:first-of-type, -form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:not([type=submit], [type=reset], [type=image]):not(:placeholder-shown):not(.no-float-label):not([type=checkbox]):not([type=radio]) ~ label:first-of-type, -form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select:focus:not([type=checkbox], [type=radio], .no-float-label) ~ label:first-of-type, -form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select:not(:placeholder-shown):not(.no-float-label):not([type=checkbox]):not([type=radio]) ~ label:first-of-type, -form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus:not([type=checkbox], [type=radio], .no-float-label) ~ label:first-of-type, -form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:not(:placeholder-shown):not(.no-float-label):not([type=checkbox]):not([type=radio]) ~ label:first-of-type, -table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:not([type=submit], [type=reset], [type=image]):focus:not([type=checkbox], [type=radio], .no-float-label) ~ label:first-of-type, -table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:not([type=submit], [type=reset], [type=image]):not(:placeholder-shown):not(.no-float-label):not([type=checkbox]):not([type=radio]) ~ label:first-of-type, -table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select:focus:not([type=checkbox], [type=radio], .no-float-label) ~ label:first-of-type, -table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select:not(:placeholder-shown):not(.no-float-label):not([type=checkbox]):not([type=radio]) ~ label:first-of-type, -table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus:not([type=checkbox], [type=radio], .no-float-label) ~ label:first-of-type, -table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:not(:placeholder-shown):not(.no-float-label):not([type=checkbox]):not([type=radio]) ~ label:first-of-type, -table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:not([type=submit], [type=reset], [type=image]):focus:not([type=checkbox], [type=radio], .no-float-label) ~ label:first-of-type, -table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:not([type=submit], [type=reset], [type=image]):not(:placeholder-shown):not(.no-float-label):not([type=checkbox]):not([type=radio]) ~ label:first-of-type, -table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select:focus:not([type=checkbox], [type=radio], .no-float-label) ~ label:first-of-type, -table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select:not(:placeholder-shown):not(.no-float-label):not([type=checkbox]):not([type=radio]) ~ label:first-of-type, -table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus:not([type=checkbox], [type=radio], .no-float-label) ~ label:first-of-type, -table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:not(:placeholder-shown):not(.no-float-label):not([type=checkbox]):not([type=radio]) ~ label:first-of-type { - color: var(--semanticFormsTextColor); - transform: translateY(-150%) scale(0.7); - width: 100%; -} -form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:not([type=submit], [type=reset], [type=image]):focus.no-float-label ~ label:first-of-type, form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:not([type=submit], [type=reset], [type=image]):not(:placeholder-shown).no-float-label:not([type=checkbox]):not([type=radio]) ~ label:first-of-type, -form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select:focus.no-float-label ~ label:first-of-type, -form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select:not(:placeholder-shown).no-float-label:not([type=checkbox]):not([type=radio]) ~ label:first-of-type, -form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus.no-float-label ~ label:first-of-type, -form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:not(:placeholder-shown).no-float-label:not([type=checkbox]):not([type=radio]) ~ label:first-of-type, -form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:not([type=submit], [type=reset], [type=image]):focus.no-float-label ~ label:first-of-type, -form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:not([type=submit], [type=reset], [type=image]):not(:placeholder-shown).no-float-label:not([type=checkbox]):not([type=radio]) ~ label:first-of-type, -form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select:focus.no-float-label ~ label:first-of-type, -form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select:not(:placeholder-shown).no-float-label:not([type=checkbox]):not([type=radio]) ~ label:first-of-type, -form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus.no-float-label ~ label:first-of-type, -form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:not(:placeholder-shown).no-float-label:not([type=checkbox]):not([type=radio]) ~ label:first-of-type, -table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:not([type=submit], [type=reset], [type=image]):focus.no-float-label ~ label:first-of-type, -table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:not([type=submit], [type=reset], [type=image]):not(:placeholder-shown).no-float-label:not([type=checkbox]):not([type=radio]) ~ label:first-of-type, -table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select:focus.no-float-label ~ label:first-of-type, -table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select:not(:placeholder-shown).no-float-label:not([type=checkbox]):not([type=radio]) ~ label:first-of-type, -table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus.no-float-label ~ label:first-of-type, -table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:not(:placeholder-shown).no-float-label:not([type=checkbox]):not([type=radio]) ~ label:first-of-type, -table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:not([type=submit], [type=reset], [type=image]):focus.no-float-label ~ label:first-of-type, -table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:not([type=submit], [type=reset], [type=image]):not(:placeholder-shown).no-float-label:not([type=checkbox]):not([type=radio]) ~ label:first-of-type, -table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select:focus.no-float-label ~ label:first-of-type, -table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select:not(:placeholder-shown).no-float-label:not([type=checkbox]):not([type=radio]) ~ label:first-of-type, -table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus.no-float-label ~ label:first-of-type, -table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:not(:placeholder-shown).no-float-label:not([type=checkbox]):not([type=radio]) ~ label:first-of-type { - display: none; -} -form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select ~ label:first-of-type, -form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select ~ label:first-of-type, -table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select ~ label:first-of-type, -table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select ~ label:first-of-type { - color: var(--semanticFormsTextColor); -} -form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) button:not(.clear, .show), -form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input[type=submit]:not(.clear, .show), -form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) button:not(.clear, .show), -form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input[type=submit]:not(.clear, .show), -table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) button:not(.clear, .show), -table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input[type=submit]:not(.clear, .show), -table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) button:not(.clear, .show), -table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input[type=submit]:not(.clear, .show) { - margin-top: var(--semanticFormsInputTopMargin); -} -form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) label:first-of-type, -form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) label:first-of-type, -table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) label:first-of-type, -table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) label:first-of-type { - position: absolute; - top: calc(var(--semanticFormsInputTopMargin) + 10px); - left: 20px; - display: flex; - align-items: center; - gap: 5px; - line-height: 1.2; - font-size: var(--semanticFormsInputFontSize); - transform-origin: left center; - pointer-events: none; - transition: transform 250ms; - cursor: text; - flex: 1; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - min-width: 0; - width: calc(100% - 35px); - user-select: none; - color: var(--semanticFormsPlaceholderColor); - touch-action: manipulation; -} -form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) label:first-of-type span.required, -form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) label:first-of-type span.required, -table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) label:first-of-type span.required, -table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) label:first-of-type span.required { - cursor: help; - pointer-events: auto; - color: red; -} -form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) label:first-of-type span.help, -form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) label:first-of-type span.help, -table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) label:first-of-type span.help, -table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) label:first-of-type span.help { - display: grid; - place-items: center; - cursor: help; - pointer-events: auto; -} -form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) label:first-of-type span.help svg, -form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) label:first-of-type span.help svg, -table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) label:first-of-type span.help svg, -table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) label:first-of-type span.help svg { - width: 80%; -} -form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) label:nth-of-type(2), -form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) label:nth-of-type(2), -table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) label:nth-of-type(2), -table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) label:nth-of-type(2) { - margin-top: -5px; - padding: 0 10px; - font-size: small; - color: var(--semanticFormsTextColor); -} -form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input, -form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea, -form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select, -form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input, -form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea, -form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select, -table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input, -table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea, -table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select, -table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input, -table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea, -table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select { - margin-top: var(--semanticFormsInputTopMargin); -} -form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input, -form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea, -form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input, -form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea, -table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input, -table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea, -table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input, -table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea { - transition: opacity 250ms; -} -form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input::placeholder, -form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea::placeholder, -form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input::placeholder, -form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea::placeholder, -table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input::placeholder, -table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea::placeholder, -table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input::placeholder, -table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea::placeholder { - opacity: 0; - transition: opacity 250ms; -} -form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input::-moz-placeholder, -form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea::-moz-placeholder, -form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input::-moz-placeholder, -form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea::-moz-placeholder, -table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input::-moz-placeholder, -table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea::-moz-placeholder, -table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input::-moz-placeholder, -table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea::-moz-placeholder { - opacity: 0; - transition: opacity 250ms; -} -form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input::-webkit-input-placeholder, -form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea::-webkit-input-placeholder, -form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input::-webkit-input-placeholder, -form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea::-webkit-input-placeholder, -table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input::-webkit-input-placeholder, -table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea::-webkit-input-placeholder, -table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input::-webkit-input-placeholder, -table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea::-webkit-input-placeholder { - opacity: 0; - transition: opacity 250ms; -} -form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:-ms-input-placeholder, -form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:-ms-input-placeholder, -form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:-ms-input-placeholder, -form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:-ms-input-placeholder, -table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:-ms-input-placeholder, -table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:-ms-input-placeholder, -table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:-ms-input-placeholder, -table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:-ms-input-placeholder { - opacity: 0; - transition: opacity 250ms; -} -form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:focus::placeholder, -form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus::placeholder, -form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:focus::placeholder, -form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus::placeholder, -table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:focus::placeholder, -table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus::placeholder, -table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:focus::placeholder, -table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus::placeholder { - opacity: 1; -} -form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:focus::-moz-placeholder, -form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus::-moz-placeholder, -form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:focus::-moz-placeholder, -form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus::-moz-placeholder, -table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:focus::-moz-placeholder, -table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus::-moz-placeholder, -table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:focus::-moz-placeholder, -table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus::-moz-placeholder { - opacity: 1; -} -form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:focus::-webkit-input-placeholder, -form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus::-webkit-input-placeholder, -form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:focus::-webkit-input-placeholder, -form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus::-webkit-input-placeholder, -table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:focus::-webkit-input-placeholder, -table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus::-webkit-input-placeholder, -table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:focus::-webkit-input-placeholder, -table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus::-webkit-input-placeholder { - opacity: 1; -} -form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:focus:-ms-input-placeholder, -form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus:-ms-input-placeholder, -form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:focus:-ms-input-placeholder, -form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus:-ms-input-placeholder, -table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:focus:-ms-input-placeholder, -table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus:-ms-input-placeholder, -table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:focus:-ms-input-placeholder, -table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus:-ms-input-placeholder { - opacity: 1; -} -form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) span.focus-key, -form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) span.focus-key, -table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) span.focus-key, -table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) span.focus-key { - color: var(--semanticFormsPlaceholderColor); - position: absolute; - top: calc(var(--semanticFormsInputTopMargin) + 11px); - right: 20px; -} -form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) span.focus-key kbd, -form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) span.focus-key kbd, -table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) span.focus-key kbd, -table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) span.focus-key kbd { - line-height: 1; -} -form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios):has(input[type=number]) .focus-key, -form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios):has(input[type=number]) .focus-key, -table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios):has(input[type=number]) .focus-key, -table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios):has(input[type=number]) .focus-key { - right: 45px; -} -form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios):has(input[type=search]) label:first-of-type, -form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios):has(input[type=search]) label:first-of-type, -table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios):has(input[type=search]) label:first-of-type, -table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios):has(input[type=search]) label:first-of-type { - left: 32px; -} -form.semanticForms .floatLabelForm div dt, -form.semanticForms.light .floatLabelForm div dt, -table.semanticForms .floatLabelForm div dt, -table.semanticForms.light .floatLabelForm div dt { - position: relative; -} -form.semanticForms .floatLabelForm div dt label, -form.semanticForms.light .floatLabelForm div dt label, -table.semanticForms .floatLabelForm div dt label, -table.semanticForms.light .floatLabelForm div dt label { - display: flex; - align-items: center; - gap: 5px; - z-index: 2; - user-select: auto; - color: var(--semanticFormsTextColor); - font-size: var(--semanticFormsInputFontSize); - position: absolute; - transform-origin: left center; - transform: translateY(-100%) scale(0.7); - top: var(--semanticFormsInputTopMargin); - left: 10px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - min-width: 0; - width: 100%; -} -form.semanticForms .floatLabelForm div dt label span.help, -form.semanticForms.light .floatLabelForm div dt label span.help, -table.semanticForms .floatLabelForm div dt label span.help, -table.semanticForms.light .floatLabelForm div dt label span.help { - display: grid; - place-items: center; - cursor: help; - pointer-events: auto; -} -form.semanticForms .floatLabelForm div:has(dd input:required) dt label, -form.semanticForms.light .floatLabelForm div:has(dd input:required) dt label, -table.semanticForms .floatLabelForm div:has(dd input:required) dt label, -table.semanticForms.light .floatLabelForm div:has(dd input:required) dt label { - width: 100%; - padding-right: 10px; -} -form.semanticForms .floatLabelForm div:has(dd input:required) dt label > span, -form.semanticForms.light .floatLabelForm div:has(dd input:required) dt label > span, -table.semanticForms .floatLabelForm div:has(dd input:required) dt label > span, -table.semanticForms.light .floatLabelForm div:has(dd input:required) dt label > span { - margin-left: 5px; - cursor: help; - pointer-events: auto; - color: red; -} -form.semanticForms .floatLabelForm div:has([data-max-content]), -form.semanticForms.light .floatLabelForm div:has([data-max-content]), -table.semanticForms .floatLabelForm div:has([data-max-content]), -table.semanticForms.light .floatLabelForm div:has([data-max-content]) { - max-width: max-content; - min-width: 150px; -} -form.semanticForms .floatLabelForm div:has([data-max-content]) dd, -form.semanticForms.light .floatLabelForm div:has([data-max-content]) dd, -table.semanticForms .floatLabelForm div:has([data-max-content]) dd, -table.semanticForms.light .floatLabelForm div:has([data-max-content]) dd { - width: max-content; -} -form.semanticForms .floatLabelForm div:has([data-max-content]) dd input, form.semanticForms .floatLabelForm div:has([data-max-content]) dd select, -form.semanticForms.light .floatLabelForm div:has([data-max-content]) dd input, -form.semanticForms.light .floatLabelForm div:has([data-max-content]) dd select, -table.semanticForms .floatLabelForm div:has([data-max-content]) dd input, -table.semanticForms .floatLabelForm div:has([data-max-content]) dd select, -table.semanticForms.light .floatLabelForm div:has([data-max-content]) dd input, -table.semanticForms.light .floatLabelForm div:has([data-max-content]) dd select { - field-sizing: content; - min-width: 150px; - max-width: max-content; -} -form.semanticForms .floatLabelForm input::placeholder, form.semanticForms .floatLabelForm textarea::placeholder, -form.semanticForms.light .floatLabelForm input::placeholder, -form.semanticForms.light .floatLabelForm textarea::placeholder, -table.semanticForms .floatLabelForm input::placeholder, -table.semanticForms .floatLabelForm textarea::placeholder, -table.semanticForms.light .floatLabelForm input::placeholder, -table.semanticForms.light .floatLabelForm textarea::placeholder { - color: var(--semanticFormsPlaceholderColor); - opacity: 1; -} -form.semanticForms div[class^=colspan-], -form.semanticForms.light div[class^=colspan-], -table.semanticForms div[class^=colspan-], -table.semanticForms.light div[class^=colspan-] { - max-width: 100%; -} -form.semanticForms div.colspan-full, -form.semanticForms.light div.colspan-full, -table.semanticForms div.colspan-full, -table.semanticForms.light div.colspan-full { - grid-column: 1/-1; -} -form.semanticForms div.colspan-5, -form.semanticForms.light div.colspan-5, -table.semanticForms div.colspan-5, -table.semanticForms.light div.colspan-5 { - grid-column: span 5; -} -form.semanticForms div.colspan-4, -form.semanticForms.light div.colspan-4, -table.semanticForms div.colspan-4, -table.semanticForms.light div.colspan-4 { - grid-column: span 4; -} -form.semanticForms div.colspan-3, -form.semanticForms.light div.colspan-3, -table.semanticForms div.colspan-3, -table.semanticForms.light div.colspan-3 { - grid-column: span 3; -} -form.semanticForms div.colspan-2, -form.semanticForms.light div.colspan-2, -table.semanticForms div.colspan-2, -table.semanticForms.light div.colspan-2 { - grid-column: span 2; -} -form.semanticForms div.colspan-1, -form.semanticForms.light div.colspan-1, -table.semanticForms div.colspan-1, -table.semanticForms.light div.colspan-1 { - grid-column: span 1; -} -form.semanticForms fieldset[class^=colspan-] dl div, -form.semanticForms dl[class^=colspan-] div, -form.semanticForms.light fieldset[class^=colspan-] dl div, -form.semanticForms.light dl[class^=colspan-] div, -table.semanticForms fieldset[class^=colspan-] dl div, -table.semanticForms dl[class^=colspan-] div, -table.semanticForms.light fieldset[class^=colspan-] dl div, -table.semanticForms.light dl[class^=colspan-] div { - max-width: 100%; -} -form.semanticForms fieldset.colspan-full dl, -form.semanticForms dl.colspan-full, -form.semanticForms.light fieldset.colspan-full dl, -form.semanticForms.light dl.colspan-full, -table.semanticForms fieldset.colspan-full dl, -table.semanticForms dl.colspan-full, -table.semanticForms.light fieldset.colspan-full dl, -table.semanticForms.light dl.colspan-full { - grid-template-columns: repeat(auto-fit, minmax(var(--semanticFormsInputMinWidth), 1fr)); -} -form.semanticForms fieldset.colspan-5 dl, -form.semanticForms dl.colspan-5, -form.semanticForms.light fieldset.colspan-5 dl, -form.semanticForms.light dl.colspan-5, -table.semanticForms fieldset.colspan-5 dl, -table.semanticForms dl.colspan-5, -table.semanticForms.light fieldset.colspan-5 dl, -table.semanticForms.light dl.colspan-5 { - grid-template-columns: repeat(5, minmax(var(--semanticFormsInputMinWidth), 1fr)); -} -form.semanticForms fieldset.colspan-4 dl, -form.semanticForms dl.colspan-4, -form.semanticForms.light fieldset.colspan-4 dl, -form.semanticForms.light dl.colspan-4, -table.semanticForms fieldset.colspan-4 dl, -table.semanticForms dl.colspan-4, -table.semanticForms.light fieldset.colspan-4 dl, -table.semanticForms.light dl.colspan-4 { - grid-template-columns: repeat(4, minmax(var(--semanticFormsInputMinWidth), 1fr)); -} -form.semanticForms fieldset.colspan-3 dl, -form.semanticForms dl.colspan-3, -form.semanticForms.light fieldset.colspan-3 dl, -form.semanticForms.light dl.colspan-3, -table.semanticForms fieldset.colspan-3 dl, -table.semanticForms dl.colspan-3, -table.semanticForms.light fieldset.colspan-3 dl, -table.semanticForms.light dl.colspan-3 { - grid-template-columns: repeat(3, minmax(var(--semanticFormsInputMinWidth), 1fr)); -} -form.semanticForms fieldset.colspan-2 dl, -form.semanticForms dl.colspan-2, -form.semanticForms.light fieldset.colspan-2 dl, -form.semanticForms.light dl.colspan-2, -table.semanticForms fieldset.colspan-2 dl, -table.semanticForms dl.colspan-2, -table.semanticForms.light fieldset.colspan-2 dl, -table.semanticForms.light dl.colspan-2 { - grid-template-columns: repeat(2, minmax(var(--semanticFormsInputMinWidth), 1fr)); -} -form.semanticForms fieldset.colspan-1 dl, -form.semanticForms dl.colspan-1, -form.semanticForms.light fieldset.colspan-1 dl, -form.semanticForms.light dl.colspan-1, -table.semanticForms fieldset.colspan-1 dl, -table.semanticForms dl.colspan-1, -table.semanticForms.light fieldset.colspan-1 dl, -table.semanticForms.light dl.colspan-1 { - grid-template-columns: repeat(1, minmax(var(--semanticFormsInputMinWidth), 1fr)); -} -form.semanticForms fieldset.colspan-1 dl dt:nth-of-type(n + 1), -form.semanticForms fieldset.colspan-1 dl dd:nth-of-type(n + 1), -form.semanticForms dl.colspan-1 dt:nth-of-type(n + 1), -form.semanticForms dl.colspan-1 dd:nth-of-type(n + 1), -form.semanticForms.light fieldset.colspan-1 dl dt:nth-of-type(n + 1), -form.semanticForms.light fieldset.colspan-1 dl dd:nth-of-type(n + 1), -form.semanticForms.light dl.colspan-1 dt:nth-of-type(n + 1), -form.semanticForms.light dl.colspan-1 dd:nth-of-type(n + 1), -table.semanticForms fieldset.colspan-1 dl dt:nth-of-type(n + 1), -table.semanticForms fieldset.colspan-1 dl dd:nth-of-type(n + 1), -table.semanticForms dl.colspan-1 dt:nth-of-type(n + 1), -table.semanticForms dl.colspan-1 dd:nth-of-type(n + 1), -table.semanticForms.light fieldset.colspan-1 dl dt:nth-of-type(n + 1), -table.semanticForms.light fieldset.colspan-1 dl dd:nth-of-type(n + 1), -table.semanticForms.light dl.colspan-1 dt:nth-of-type(n + 1), -table.semanticForms.light dl.colspan-1 dd:nth-of-type(n + 1) { - grid-column: 1; -} -form.semanticForms fieldset.colspan-2 dl dt:nth-of-type(2n + 1), -form.semanticForms fieldset.colspan-2 dl dd:nth-of-type(2n + 1), -form.semanticForms dl.colspan-2 dt:nth-of-type(2n + 1), -form.semanticForms dl.colspan-2 dd:nth-of-type(2n + 1), -form.semanticForms.light fieldset.colspan-2 dl dt:nth-of-type(2n + 1), -form.semanticForms.light fieldset.colspan-2 dl dd:nth-of-type(2n + 1), -form.semanticForms.light dl.colspan-2 dt:nth-of-type(2n + 1), -form.semanticForms.light dl.colspan-2 dd:nth-of-type(2n + 1), -table.semanticForms fieldset.colspan-2 dl dt:nth-of-type(2n + 1), -table.semanticForms fieldset.colspan-2 dl dd:nth-of-type(2n + 1), -table.semanticForms dl.colspan-2 dt:nth-of-type(2n + 1), -table.semanticForms dl.colspan-2 dd:nth-of-type(2n + 1), -table.semanticForms.light fieldset.colspan-2 dl dt:nth-of-type(2n + 1), -table.semanticForms.light fieldset.colspan-2 dl dd:nth-of-type(2n + 1), -table.semanticForms.light dl.colspan-2 dt:nth-of-type(2n + 1), -table.semanticForms.light dl.colspan-2 dd:nth-of-type(2n + 1) { - grid-column: 1; -} -form.semanticForms fieldset.colspan-2 dl dt:nth-of-type(2n + 2), -form.semanticForms fieldset.colspan-2 dl dd:nth-of-type(2n + 2), -form.semanticForms dl.colspan-2 dt:nth-of-type(2n + 2), -form.semanticForms dl.colspan-2 dd:nth-of-type(2n + 2), -form.semanticForms.light fieldset.colspan-2 dl dt:nth-of-type(2n + 2), -form.semanticForms.light fieldset.colspan-2 dl dd:nth-of-type(2n + 2), -form.semanticForms.light dl.colspan-2 dt:nth-of-type(2n + 2), -form.semanticForms.light dl.colspan-2 dd:nth-of-type(2n + 2), -table.semanticForms fieldset.colspan-2 dl dt:nth-of-type(2n + 2), -table.semanticForms fieldset.colspan-2 dl dd:nth-of-type(2n + 2), -table.semanticForms dl.colspan-2 dt:nth-of-type(2n + 2), -table.semanticForms dl.colspan-2 dd:nth-of-type(2n + 2), -table.semanticForms.light fieldset.colspan-2 dl dt:nth-of-type(2n + 2), -table.semanticForms.light fieldset.colspan-2 dl dd:nth-of-type(2n + 2), -table.semanticForms.light dl.colspan-2 dt:nth-of-type(2n + 2), -table.semanticForms.light dl.colspan-2 dd:nth-of-type(2n + 2) { - grid-column: 2; -} -form.semanticForms fieldset.colspan-3 dl dt:nth-of-type(3n + 1), -form.semanticForms fieldset.colspan-3 dl dd:nth-of-type(3n + 1), -form.semanticForms dl.colspan-3 dt:nth-of-type(3n + 1), -form.semanticForms dl.colspan-3 dd:nth-of-type(3n + 1), -form.semanticForms.light fieldset.colspan-3 dl dt:nth-of-type(3n + 1), -form.semanticForms.light fieldset.colspan-3 dl dd:nth-of-type(3n + 1), -form.semanticForms.light dl.colspan-3 dt:nth-of-type(3n + 1), -form.semanticForms.light dl.colspan-3 dd:nth-of-type(3n + 1), -table.semanticForms fieldset.colspan-3 dl dt:nth-of-type(3n + 1), -table.semanticForms fieldset.colspan-3 dl dd:nth-of-type(3n + 1), -table.semanticForms dl.colspan-3 dt:nth-of-type(3n + 1), -table.semanticForms dl.colspan-3 dd:nth-of-type(3n + 1), -table.semanticForms.light fieldset.colspan-3 dl dt:nth-of-type(3n + 1), -table.semanticForms.light fieldset.colspan-3 dl dd:nth-of-type(3n + 1), -table.semanticForms.light dl.colspan-3 dt:nth-of-type(3n + 1), -table.semanticForms.light dl.colspan-3 dd:nth-of-type(3n + 1) { - grid-column: 1; -} -form.semanticForms fieldset.colspan-3 dl dt:nth-of-type(3n + 2), -form.semanticForms fieldset.colspan-3 dl dd:nth-of-type(3n + 2), -form.semanticForms dl.colspan-3 dt:nth-of-type(3n + 2), -form.semanticForms dl.colspan-3 dd:nth-of-type(3n + 2), -form.semanticForms.light fieldset.colspan-3 dl dt:nth-of-type(3n + 2), -form.semanticForms.light fieldset.colspan-3 dl dd:nth-of-type(3n + 2), -form.semanticForms.light dl.colspan-3 dt:nth-of-type(3n + 2), -form.semanticForms.light dl.colspan-3 dd:nth-of-type(3n + 2), -table.semanticForms fieldset.colspan-3 dl dt:nth-of-type(3n + 2), -table.semanticForms fieldset.colspan-3 dl dd:nth-of-type(3n + 2), -table.semanticForms dl.colspan-3 dt:nth-of-type(3n + 2), -table.semanticForms dl.colspan-3 dd:nth-of-type(3n + 2), -table.semanticForms.light fieldset.colspan-3 dl dt:nth-of-type(3n + 2), -table.semanticForms.light fieldset.colspan-3 dl dd:nth-of-type(3n + 2), -table.semanticForms.light dl.colspan-3 dt:nth-of-type(3n + 2), -table.semanticForms.light dl.colspan-3 dd:nth-of-type(3n + 2) { - grid-column: 2; -} -form.semanticForms fieldset.colspan-3 dl dt:nth-of-type(3n + 3), -form.semanticForms fieldset.colspan-3 dl dd:nth-of-type(3n + 3), -form.semanticForms dl.colspan-3 dt:nth-of-type(3n + 3), -form.semanticForms dl.colspan-3 dd:nth-of-type(3n + 3), -form.semanticForms.light fieldset.colspan-3 dl dt:nth-of-type(3n + 3), -form.semanticForms.light fieldset.colspan-3 dl dd:nth-of-type(3n + 3), -form.semanticForms.light dl.colspan-3 dt:nth-of-type(3n + 3), -form.semanticForms.light dl.colspan-3 dd:nth-of-type(3n + 3), -table.semanticForms fieldset.colspan-3 dl dt:nth-of-type(3n + 3), -table.semanticForms fieldset.colspan-3 dl dd:nth-of-type(3n + 3), -table.semanticForms dl.colspan-3 dt:nth-of-type(3n + 3), -table.semanticForms dl.colspan-3 dd:nth-of-type(3n + 3), -table.semanticForms.light fieldset.colspan-3 dl dt:nth-of-type(3n + 3), -table.semanticForms.light fieldset.colspan-3 dl dd:nth-of-type(3n + 3), -table.semanticForms.light dl.colspan-3 dt:nth-of-type(3n + 3), -table.semanticForms.light dl.colspan-3 dd:nth-of-type(3n + 3) { - grid-column: 3; -} -form.semanticForms fieldset.colspan-4 dl dt:nth-of-type(4n + 1), -form.semanticForms fieldset.colspan-4 dl dd:nth-of-type(4n + 1), -form.semanticForms dl.colspan-4 dt:nth-of-type(4n + 1), -form.semanticForms dl.colspan-4 dd:nth-of-type(4n + 1), -form.semanticForms.light fieldset.colspan-4 dl dt:nth-of-type(4n + 1), -form.semanticForms.light fieldset.colspan-4 dl dd:nth-of-type(4n + 1), -form.semanticForms.light dl.colspan-4 dt:nth-of-type(4n + 1), -form.semanticForms.light dl.colspan-4 dd:nth-of-type(4n + 1), -table.semanticForms fieldset.colspan-4 dl dt:nth-of-type(4n + 1), -table.semanticForms fieldset.colspan-4 dl dd:nth-of-type(4n + 1), -table.semanticForms dl.colspan-4 dt:nth-of-type(4n + 1), -table.semanticForms dl.colspan-4 dd:nth-of-type(4n + 1), -table.semanticForms.light fieldset.colspan-4 dl dt:nth-of-type(4n + 1), -table.semanticForms.light fieldset.colspan-4 dl dd:nth-of-type(4n + 1), -table.semanticForms.light dl.colspan-4 dt:nth-of-type(4n + 1), -table.semanticForms.light dl.colspan-4 dd:nth-of-type(4n + 1) { - grid-column: 1; -} -form.semanticForms fieldset.colspan-4 dl dt:nth-of-type(4n + 2), -form.semanticForms fieldset.colspan-4 dl dd:nth-of-type(4n + 2), -form.semanticForms dl.colspan-4 dt:nth-of-type(4n + 2), -form.semanticForms dl.colspan-4 dd:nth-of-type(4n + 2), -form.semanticForms.light fieldset.colspan-4 dl dt:nth-of-type(4n + 2), -form.semanticForms.light fieldset.colspan-4 dl dd:nth-of-type(4n + 2), -form.semanticForms.light dl.colspan-4 dt:nth-of-type(4n + 2), -form.semanticForms.light dl.colspan-4 dd:nth-of-type(4n + 2), -table.semanticForms fieldset.colspan-4 dl dt:nth-of-type(4n + 2), -table.semanticForms fieldset.colspan-4 dl dd:nth-of-type(4n + 2), -table.semanticForms dl.colspan-4 dt:nth-of-type(4n + 2), -table.semanticForms dl.colspan-4 dd:nth-of-type(4n + 2), -table.semanticForms.light fieldset.colspan-4 dl dt:nth-of-type(4n + 2), -table.semanticForms.light fieldset.colspan-4 dl dd:nth-of-type(4n + 2), -table.semanticForms.light dl.colspan-4 dt:nth-of-type(4n + 2), -table.semanticForms.light dl.colspan-4 dd:nth-of-type(4n + 2) { - grid-column: 2; -} -form.semanticForms fieldset.colspan-4 dl dt:nth-of-type(4n + 3), -form.semanticForms fieldset.colspan-4 dl dd:nth-of-type(4n + 3), -form.semanticForms dl.colspan-4 dt:nth-of-type(4n + 3), -form.semanticForms dl.colspan-4 dd:nth-of-type(4n + 3), -form.semanticForms.light fieldset.colspan-4 dl dt:nth-of-type(4n + 3), -form.semanticForms.light fieldset.colspan-4 dl dd:nth-of-type(4n + 3), -form.semanticForms.light dl.colspan-4 dt:nth-of-type(4n + 3), -form.semanticForms.light dl.colspan-4 dd:nth-of-type(4n + 3), -table.semanticForms fieldset.colspan-4 dl dt:nth-of-type(4n + 3), -table.semanticForms fieldset.colspan-4 dl dd:nth-of-type(4n + 3), -table.semanticForms dl.colspan-4 dt:nth-of-type(4n + 3), -table.semanticForms dl.colspan-4 dd:nth-of-type(4n + 3), -table.semanticForms.light fieldset.colspan-4 dl dt:nth-of-type(4n + 3), -table.semanticForms.light fieldset.colspan-4 dl dd:nth-of-type(4n + 3), -table.semanticForms.light dl.colspan-4 dt:nth-of-type(4n + 3), -table.semanticForms.light dl.colspan-4 dd:nth-of-type(4n + 3) { - grid-column: 3; -} -form.semanticForms fieldset.colspan-4 dl dt:nth-of-type(4n + 4), -form.semanticForms fieldset.colspan-4 dl dd:nth-of-type(4n + 4), -form.semanticForms dl.colspan-4 dt:nth-of-type(4n + 4), -form.semanticForms dl.colspan-4 dd:nth-of-type(4n + 4), -form.semanticForms.light fieldset.colspan-4 dl dt:nth-of-type(4n + 4), -form.semanticForms.light fieldset.colspan-4 dl dd:nth-of-type(4n + 4), -form.semanticForms.light dl.colspan-4 dt:nth-of-type(4n + 4), -form.semanticForms.light dl.colspan-4 dd:nth-of-type(4n + 4), -table.semanticForms fieldset.colspan-4 dl dt:nth-of-type(4n + 4), -table.semanticForms fieldset.colspan-4 dl dd:nth-of-type(4n + 4), -table.semanticForms dl.colspan-4 dt:nth-of-type(4n + 4), -table.semanticForms dl.colspan-4 dd:nth-of-type(4n + 4), -table.semanticForms.light fieldset.colspan-4 dl dt:nth-of-type(4n + 4), -table.semanticForms.light fieldset.colspan-4 dl dd:nth-of-type(4n + 4), -table.semanticForms.light dl.colspan-4 dt:nth-of-type(4n + 4), -table.semanticForms.light dl.colspan-4 dd:nth-of-type(4n + 4) { - grid-column: 4; -} -form.semanticForms fieldset.colspan-5 dl dt:nth-of-type(5n + 1), -form.semanticForms fieldset.colspan-5 dl dd:nth-of-type(5n + 1), -form.semanticForms dl.colspan-5 dt:nth-of-type(5n + 1), -form.semanticForms dl.colspan-5 dd:nth-of-type(5n + 1), -form.semanticForms.light fieldset.colspan-5 dl dt:nth-of-type(5n + 1), -form.semanticForms.light fieldset.colspan-5 dl dd:nth-of-type(5n + 1), -form.semanticForms.light dl.colspan-5 dt:nth-of-type(5n + 1), -form.semanticForms.light dl.colspan-5 dd:nth-of-type(5n + 1), -table.semanticForms fieldset.colspan-5 dl dt:nth-of-type(5n + 1), -table.semanticForms fieldset.colspan-5 dl dd:nth-of-type(5n + 1), -table.semanticForms dl.colspan-5 dt:nth-of-type(5n + 1), -table.semanticForms dl.colspan-5 dd:nth-of-type(5n + 1), -table.semanticForms.light fieldset.colspan-5 dl dt:nth-of-type(5n + 1), -table.semanticForms.light fieldset.colspan-5 dl dd:nth-of-type(5n + 1), -table.semanticForms.light dl.colspan-5 dt:nth-of-type(5n + 1), -table.semanticForms.light dl.colspan-5 dd:nth-of-type(5n + 1) { - grid-column: 1; -} -form.semanticForms fieldset.colspan-5 dl dt:nth-of-type(5n + 2), -form.semanticForms fieldset.colspan-5 dl dd:nth-of-type(5n + 2), -form.semanticForms dl.colspan-5 dt:nth-of-type(5n + 2), -form.semanticForms dl.colspan-5 dd:nth-of-type(5n + 2), -form.semanticForms.light fieldset.colspan-5 dl dt:nth-of-type(5n + 2), -form.semanticForms.light fieldset.colspan-5 dl dd:nth-of-type(5n + 2), -form.semanticForms.light dl.colspan-5 dt:nth-of-type(5n + 2), -form.semanticForms.light dl.colspan-5 dd:nth-of-type(5n + 2), -table.semanticForms fieldset.colspan-5 dl dt:nth-of-type(5n + 2), -table.semanticForms fieldset.colspan-5 dl dd:nth-of-type(5n + 2), -table.semanticForms dl.colspan-5 dt:nth-of-type(5n + 2), -table.semanticForms dl.colspan-5 dd:nth-of-type(5n + 2), -table.semanticForms.light fieldset.colspan-5 dl dt:nth-of-type(5n + 2), -table.semanticForms.light fieldset.colspan-5 dl dd:nth-of-type(5n + 2), -table.semanticForms.light dl.colspan-5 dt:nth-of-type(5n + 2), -table.semanticForms.light dl.colspan-5 dd:nth-of-type(5n + 2) { - grid-column: 2; -} -form.semanticForms fieldset.colspan-5 dl dt:nth-of-type(5n + 3), -form.semanticForms fieldset.colspan-5 dl dd:nth-of-type(5n + 3), -form.semanticForms dl.colspan-5 dt:nth-of-type(5n + 3), -form.semanticForms dl.colspan-5 dd:nth-of-type(5n + 3), -form.semanticForms.light fieldset.colspan-5 dl dt:nth-of-type(5n + 3), -form.semanticForms.light fieldset.colspan-5 dl dd:nth-of-type(5n + 3), -form.semanticForms.light dl.colspan-5 dt:nth-of-type(5n + 3), -form.semanticForms.light dl.colspan-5 dd:nth-of-type(5n + 3), -table.semanticForms fieldset.colspan-5 dl dt:nth-of-type(5n + 3), -table.semanticForms fieldset.colspan-5 dl dd:nth-of-type(5n + 3), -table.semanticForms dl.colspan-5 dt:nth-of-type(5n + 3), -table.semanticForms dl.colspan-5 dd:nth-of-type(5n + 3), -table.semanticForms.light fieldset.colspan-5 dl dt:nth-of-type(5n + 3), -table.semanticForms.light fieldset.colspan-5 dl dd:nth-of-type(5n + 3), -table.semanticForms.light dl.colspan-5 dt:nth-of-type(5n + 3), -table.semanticForms.light dl.colspan-5 dd:nth-of-type(5n + 3) { - grid-column: 3; -} -form.semanticForms fieldset.colspan-5 dl dt:nth-of-type(5n + 4), -form.semanticForms fieldset.colspan-5 dl dd:nth-of-type(5n + 4), -form.semanticForms dl.colspan-5 dt:nth-of-type(5n + 4), -form.semanticForms dl.colspan-5 dd:nth-of-type(5n + 4), -form.semanticForms.light fieldset.colspan-5 dl dt:nth-of-type(5n + 4), -form.semanticForms.light fieldset.colspan-5 dl dd:nth-of-type(5n + 4), -form.semanticForms.light dl.colspan-5 dt:nth-of-type(5n + 4), -form.semanticForms.light dl.colspan-5 dd:nth-of-type(5n + 4), -table.semanticForms fieldset.colspan-5 dl dt:nth-of-type(5n + 4), -table.semanticForms fieldset.colspan-5 dl dd:nth-of-type(5n + 4), -table.semanticForms dl.colspan-5 dt:nth-of-type(5n + 4), -table.semanticForms dl.colspan-5 dd:nth-of-type(5n + 4), -table.semanticForms.light fieldset.colspan-5 dl dt:nth-of-type(5n + 4), -table.semanticForms.light fieldset.colspan-5 dl dd:nth-of-type(5n + 4), -table.semanticForms.light dl.colspan-5 dt:nth-of-type(5n + 4), -table.semanticForms.light dl.colspan-5 dd:nth-of-type(5n + 4) { - grid-column: 4; -} -form.semanticForms fieldset.colspan-5 dl dt:nth-of-type(5n + 5), -form.semanticForms fieldset.colspan-5 dl dd:nth-of-type(5n + 5), -form.semanticForms dl.colspan-5 dt:nth-of-type(5n + 5), -form.semanticForms dl.colspan-5 dd:nth-of-type(5n + 5), -form.semanticForms.light fieldset.colspan-5 dl dt:nth-of-type(5n + 5), -form.semanticForms.light fieldset.colspan-5 dl dd:nth-of-type(5n + 5), -form.semanticForms.light dl.colspan-5 dt:nth-of-type(5n + 5), -form.semanticForms.light dl.colspan-5 dd:nth-of-type(5n + 5), -table.semanticForms fieldset.colspan-5 dl dt:nth-of-type(5n + 5), -table.semanticForms fieldset.colspan-5 dl dd:nth-of-type(5n + 5), -table.semanticForms dl.colspan-5 dt:nth-of-type(5n + 5), -table.semanticForms dl.colspan-5 dd:nth-of-type(5n + 5), -table.semanticForms.light fieldset.colspan-5 dl dt:nth-of-type(5n + 5), -table.semanticForms.light fieldset.colspan-5 dl dd:nth-of-type(5n + 5), -table.semanticForms.light dl.colspan-5 dt:nth-of-type(5n + 5), -table.semanticForms.light dl.colspan-5 dd:nth-of-type(5n + 5) { - grid-column: 5; -} .semanticForms table, table.semanticForms { diff --git a/dist/semantic-forms.js b/dist/semantic-forms.js index 3445840..8a58840 100644 --- a/dist/semantic-forms.js +++ b/dist/semantic-forms.js @@ -9,15 +9,9 @@ const keyboardShortcuts=[];document.addEventListener("keydown",e=>shortcutListen // progressively enhance form elements that have the semanticForms class const forms=document.querySelectorAll("form.semanticForms:not(.semanticFormsActive), table.semanticForms:not(.semanticFormsActive)");for(const form of forms){form.classList.add("semanticFormsActive");if(form.classList.contains("lowFlow"))continue; // update each input in the semantic form -const inputs=Array.from(form.querySelectorAll("input, textarea, select"));for(const input of inputs){enhanceInput(input); +const inputs=Array.from(form.querySelectorAll("input, textarea, select"));for(const input of inputs){enhanceInput(input,form); // handle keyboard shortcuts if(input.getAttribute("data-focus-key")!==null){const shortcut=createKeyboardShortcut(input,keyboardShortcuts);keyboardShortcuts.push(shortcut)}}} -// handle undo/redo -let lastFocusedInput;let lastClearFieldPressed;document.addEventListener("keydown",event=>{if((event.ctrlKey||event.metaKey)&&event.key==="z"&&!event.shiftKey){ -// undo clearing a field -if(lastFocusedInput)if(lastFocusedInput?.parentNode?.querySelector("button.clear").id===`semanticFormsClearButton_${lastClearFieldPressed}`||lastFocusedInput?.parentNode?.querySelector("button.clear").name===`semanticFormsClearButton_${lastClearFieldPressed}`)if(lastFocusedInput.previousValue){lastFocusedInput.redoValue=lastFocusedInput.value;lastFocusedInput.value=lastFocusedInput.previousValue}}else if(event.ctrlKey&&event.key==="y"||event.metaKey&&event.shiftKey&&event.key==="z") -// redo clearing a field -if(lastFocusedInput)if(lastFocusedInput?.parentNode?.querySelector("button.clear").id===`semanticFormsClearButton_${lastClearFieldPressed}`||lastFocusedInput?.parentNode?.querySelector("button.clear").name===`semanticFormsClearButton_${lastClearFieldPressed}`)if(lastFocusedInput.redoValue){lastFocusedInput.previousValue=lastFocusedInput.value;lastFocusedInput.value=lastFocusedInput.redoValue}}); // monitor changes to the DOM and enhance new semanticForms forms that get added if(!window.semanticFormsObserver){window.semanticFormsObserver=new window.MutationObserver(mutations=>{let stop=false;for(const mutation of mutations){for(const node of mutation.addedNodes)if(node.nodeName==="FORM"||node?.querySelector?.("form")){semanticForms();stop=true}if(stop)break}});window.semanticFormsObserver.observe(document.body,{attributes:false,childList:true,characterData:false,subtree:true})}semanticForms.reinitialize=form=>{form.classList.remove("semanticFormsActive");semanticForms()}};module.exports=semanticForms /***/}, @@ -48,7 +42,7 @@ if(shortcuts.some(shortcut=>shortcut.key===focusKey&&shortcut.modifier===modifie // set the shortcut indicator/title if(input.nodeName==="TEXTAREA"||input.type==="text"||input.type==="number"){ // create focus indicator for valid inputs -const indicator=document.createElement("span");indicator.classList.add("focus-key");indicator.innerHTML=`${modifierSymbol} ${focusKey.toUpperCase()}`;insertAfter(indicator,newLabel)}else +const indicator=document.createElement("span");indicator.classList.add("focus-key");indicator.innerHTML=`${modifierSymbol} ${focusKey.toUpperCase()}`;const label=input.nextSibling;insertAfter(indicator,label)}else // update the input title if(input.getAttribute("title"))input.setAttribute("title",input.getAttribute("title")+` (${modifierSymbol} + ${focusKey})`);else input.setAttribute("title",`Focus with ${modifierSymbol} + ${focusKey}`);return{key:focusKey,modifier:modifierKey,input,os,defaultModifier}};module.exports={shortcutListener,createKeyboardShortcut} /***/}, @@ -66,17 +60,17 @@ const getOS=()=>{const userAgent=window.navigator.userAgent;const platform=windo */;const insertAfter=(newNode,referenceNode)=>{if(referenceNode.nextSibling)referenceNode.parentNode.insertBefore(newNode,referenceNode.nextSibling);else referenceNode.parentNode.appendChild(newNode)};module.exports={getOS,insertAfter} /***/}, /***/866: -/***/(module,__unused_webpack_exports,__webpack_require__)=>{const{insertAfter}=__webpack_require__(584);const passwordShow='';const passwordHide='';const helpTextIcon='';const nodeNameLookup=["TEXTAREA","SELECT"];const inputTypeLookup=["checkbox","color","date","datetime-local","email","file","image","month","number","password","radio","range","search","tel","text","time","url","week"];const enhanceInput=(input,form)=>{ +/***/(module,__unused_webpack_exports,__webpack_require__)=>{const{insertAfter}=__webpack_require__(584);const icons={passwordShow:'',passwordHide:'',helpIcon:''};const lookups={nodeName:["TEXTAREA","SELECT"],inputType:["checkbox","color","date","datetime-local","email","file","image","month","number","password","radio","range","search","tel","text","time","url","week"]};let lastFocusedInput;let lastClearFieldPressed;const enhanceInput=(input,form)=>{ // ignore input if it has previously been formatted -if(input.classList.contains("semanticform")||!input.id)return;const type=input.getAttribute("type");if(nodeNameLookup.includes(input.nodeName)||inputTypeLookup.includes(type)){ +if(input.classList.contains("semanticform")||!input.id)return;const type=input.getAttribute("type");if(!lookups.nodeName.includes(input.nodeName)&&!lookups.inputType.includes(type))return; // recursively find
element let dl=input.parentNode;while(dl&&dl.nodeName!=="DL")dl=dl.parentNode;if(!dl)return;if(!dl.classList.contains("floatLabelForm"))dl.classList.add("floatLabelForm");const label=input.parentNode.parentNode.id&&(type==="checkbox"||type==="radio")?document.querySelector("label[data-for="+input.parentNode.parentNode.id.replace(/\./g,"\\.")+"]"):document.querySelector("label[for="+input.id.replace(/\./g,"\\.")+"]");if(!label)console.error(`semantic-forms: Found an input (${input.id||input.getAttribute("name")}) without a properly associated label. Make sure there is a label for it and the label has a matching "for" attribute.`);input.classList.add("semanticform"); // #region create labels const newLabel=document.createElement("label");newLabel.className="floatLabelFormAnimatedLabel";if(type==="checkbox"||type==="radio"){ // recursively find
element -let dd=input.parentNode;while(dd&&dd.nodeName!=="DD")dd=dd.parentNode;if(!dd){console.error(`semantic-forms: Found an input (${input.id||input.getAttribute("name")}) that is not inside a
element.`);return}if(dd.firstChild.nodeName!=="LABEL"){if(type==="checkbox"&&input.parentNode.nodeName==="DD"){newLabel.setAttribute("for",input.id);input.parentNode.classList.add("singleCheckbox");newLabel.className="";label.setAttribute("hidden","hidden");insertAfter(newLabel,input)}if(type==="radio"&&input.parentNode.nodeName==="DD"){newLabel.setAttribute("for",input.id);input.parentNode.classList.add("singleRadio");newLabel.className="";label.setAttribute("hidden","hidden");insertAfter(newLabel,input)}newLabel.innerHTML=label.innerHTML;if(label.hasAttribute("title")&&label.getAttribute("data-show-help-icon")!==null&&!label.querySelector("span.help")){const text=label.getAttribute("title");label.innerHTML+=` ${helpTextIcon}`;newLabel.innerHTML+=` ${helpTextIcon}`}if(dd.querySelector(":required")&&label.getAttribute("data-no-asterisk")===null&&!label.querySelector("span.required")){const text=label.getAttribute("data-asterisk-text")||"This field is required.";label.innerHTML+=` *`;newLabel.innerHTML+=` *`}if(!dd.querySelector("label"))dd.append(newLabel)} +let dd=input.parentNode;while(dd&&dd.nodeName!=="DD")dd=dd.parentNode;if(!dd){console.error(`semantic-forms: Found an input (${input.id||input.getAttribute("name")}) that is not inside a
element.`);return}if(dd.firstChild.nodeName!=="LABEL"){if(type==="checkbox"&&input.parentNode.nodeName==="DD"){newLabel.setAttribute("for",input.id);input.parentNode.classList.add("singleCheckbox");newLabel.className="";label.setAttribute("hidden","hidden");insertAfter(newLabel,input)}if(type==="radio"&&input.parentNode.nodeName==="DD"){newLabel.setAttribute("for",input.id);input.parentNode.classList.add("singleRadio");newLabel.className="";label.setAttribute("hidden","hidden");insertAfter(newLabel,input)}newLabel.innerHTML=label.innerHTML;if(label.hasAttribute("title")&&label.getAttribute("data-show-help-icon")!==null&&!label.querySelector("span.help")){const text=label.getAttribute("title");label.innerHTML+=` ${icons.helpIcon}`;newLabel.innerHTML+=` ${icons.helpIcon}`}if(dd.querySelector(":required")&&label.getAttribute("data-no-asterisk")===null&&!label.querySelector("span.required")){const text=label.getAttribute("data-asterisk-text")||"This field is required.";label.innerHTML+=` *`;newLabel.innerHTML+=` *`}if(!dd.querySelector("label"))dd.append(newLabel)} // removes old div that a radio or checkbox may have been added to -if(dd.parentElement.nodeName==="DIV")dd.parentElement.remove();const div=document.createElement("div");div.append(label.closest("dt"),dd);dl.append(div)}else{newLabel.setAttribute("for",input.id);newLabel.innerHTML=label.innerHTML;if(input.hasAttribute("title")&&label.getAttribute("data-show-help-icon")!==null&&!label.querySelector("span.help")){const text=input.getAttribute("title");newLabel.innerHTML+=` ${helpTextIcon}`}if(input.hasAttribute("required")&&label.getAttribute("data-no-asterisk")===null&&!label.querySelector("span.required")){const text=label.getAttribute("data-asterisk-text")||"This field is required.";newLabel.innerHTML+=` *`}label.setAttribute("hidden","hidden");insertAfter(newLabel,input)} +if(dd.parentElement.nodeName==="DIV")dd.parentElement.remove();const div=document.createElement("div");div.append(label.closest("dt"),dd);dl.append(div)}else{newLabel.setAttribute("for",input.id);newLabel.innerHTML=label.innerHTML;if(input.hasAttribute("title")&&label.getAttribute("data-show-help-icon")!==null&&!label.querySelector("span.help")){const text=input.getAttribute("title");newLabel.innerHTML+=` ${icons.helpIcon}`}if(input.hasAttribute("required")&&label.getAttribute("data-no-asterisk")===null&&!label.querySelector("span.required")){const text=label.getAttribute("data-asterisk-text")||"This field is required.";newLabel.innerHTML+=` *`}label.setAttribute("hidden","hidden");insertAfter(newLabel,input)} // #endregion // #region standard inputs const isWrapped=input.closest("dd").parentElement.nodeName==="DIV"; @@ -85,7 +79,7 @@ if(input.getAttribute("data-auto-grow")!==null){ // progressively enhance inputs into textareas if(input.nodeName==="INPUT"&&input.type==="text"){const newInput=document.createElement("textarea");newInput.id=input.id;newInput.class=input.class;newInput.innerText=input.value;newInput.setAttribute("data-auto-grow","");input.replaceWith(newInput);input=newInput}if(input.nodeName==="TEXTAREA") // when pressing enter while this input is focused, we want to submit -input.addEventListener("keypress",e=>{if(e.key!=="Enter"||e.key==="Enter"&&e.shiftKey)return;e.preventDefault();form.requestSubmit()})}if(type!=="checkbox"&&type!=="radio"){if(!input.getAttribute("placeholder"))input.setAttribute("placeholder"," ");const div=document.createElement("div");const dt=label.closest("dt");const dd=input.closest("dd");if(!dt){console.error(`semantic-forms: Found an input (${input.id||input.getAttribute("name")}) that does not have a corresponding
element.`);return}if(!dd){console.error(`semantic-forms: Found an input (${input.id||input.getAttribute("name")}) that does not have a corresponding
element.`);return} +input.addEventListener("keypress",e=>{if(e.key!=="Enter"||e.key==="Enter"&&e.shiftKey)return;e.preventDefault();form.requestSubmit()})}if(type!=="checkbox"&&type!=="radio"){if(!input.getAttribute("placeholder"))input.setAttribute("placeholder"," ");const div=isWrapped?input.closest("dd").parentElement:document.createElement("div");const dt=label.closest("dt");const dd=input.closest("dd");if(!dt||!dd){console.error(`semantic-forms: Found an input (${input.id||input.getAttribute("name")}) that does not have a corresponding ${!dt?"
":"
"} element.`);return} // #region input clear button if(input.nodeName!=="SELECT"&&type!=="range"){const clearBtn=document.createElement("button");clearBtn.type="button";clearBtn.title=input.getAttribute("data-clear-field-text")||"Clear field";clearBtn.ariaLabel=input.getAttribute("data-clear-field-text")||"Clear field";clearBtn.tabIndex=-1;clearBtn.innerHTML='';clearBtn.classList.add("clear");clearBtn.id=`semanticFormsClearButton_${input.id}`;clearBtn.addEventListener("click",()=>{input.previousValue=input.value;input.value="";input.focus();lastClearFieldPressed=input.id; // used for any other updates required by various inputs @@ -95,16 +89,16 @@ input.dispatchEvent(new Event("input",{bubbles:true}))});insertAfter(clearBtn,dd if(/colspan-/.test(dd.className)){const match=dd.className.match(/colspan-([0-9]|full)/)[0];dd.classList.remove(match);div.classList.add(match)} // check for max-content attribute // this may be removed once fully supported in Firefox and Safari: https://caniuse.com/wf-field-sizing -if(input.getAttribute("data-max-content")!==null)if(!("fieldSizing"in document.createElement("input").style)){const adjustWidth=()=>{const value=input.value!==""?input.value:input.placeholder;const width=value.length*8+40;input.style.width=width+"px";input.style.maxWidth="100%";div.style.width=width+"px"};adjustWidth();input.addEventListener("input",adjustWidth)}if(!isWrapped){div.append(dt,dd);dl.append(div)} +if(input.getAttribute("data-max-content")!==null)if(!("fieldSizing"in document.createElement("input").style)){const adjustWidth=()=>{const value=input.value!==""?input.value:input.placeholder;const width=value.length*8+40;input.style.width=width+"px";input.style.maxWidth="100%";div.style.width=width+"px"};adjustWidth();input.addEventListener("input",adjustWidth)}if(!isWrapped){div.append(dt,dd);dl.append(div); // determine visibility of newly created
-if(dt.style.display==="none"&&dd.style.display==="none")div.style.display="none"} +if(dt.style.display==="none"&&dd.style.display==="none")div.style.display="none"}} // #endregion // handle file input clear btn, cannot be handled with CSS if(type==="file"){const clearBtn=input.parentElement.querySelector(".clear");input.addEventListener("input",event=>{clearBtn.style.display=event.target.files.length?"flex":"none"});clearBtn.addEventListener("click",()=>{clearBtn.style.display="none"})} // handle range inputs with a class to display the value if(type==="range"&&input.classList.contains("displayValue")){const label=input.parentNode.parentNode.querySelector("dd label");label.innerHTML+=`: ${input.value}`;input.addEventListener("input",event=>{const output=event.target.parentNode.parentNode.querySelector("output");output.innerHTML=event.target.value})} // #region show password button -if(type==="password"&&input.getAttribute("data-no-reveal")===null){const showBtn=document.createElement("button");showBtn.type="button";showBtn.title=input.getAttribute("data-show-password-text")||"Show password";showBtn.ariaLabel=input.getAttribute("data-show-password-text")||"Show password";showBtn.tabIndex=-1;showBtn.innerHTML=passwordShow;showBtn.classList.add("show");showBtn.id=`semanticFormsShowButton_${input.id}`;const dd=input.closest("dd");if(!dd){console.error(`semantic-forms: Found an input (${input.id||input.getAttribute("name")}) that is not inside a
element.`);return}showBtn.addEventListener("click",()=>{if(input.type==="password"){showBtn.innerHTML=passwordHide;showBtn.title=input.getAttribute("data-hide-password-text")||"Hide password";showBtn.ariaLabel=input.getAttribute("data-hide-password-text")||"Hide password";input.type="text"}else{showBtn.innerHTML=passwordShow;showBtn.title=input.getAttribute("data-show-password-text")||"Show password";showBtn.ariaLabel=input.getAttribute("data-show-password-text")||"Show password";input.type="password"}input.focus()});insertAfter(showBtn,dd.querySelector("label"))} +if(type==="password"&&input.getAttribute("data-no-reveal")===null){const showBtn=document.createElement("button");showBtn.type="button";showBtn.title=input.getAttribute("data-show-password-text")||"Show password";showBtn.ariaLabel=input.getAttribute("data-show-password-text")||"Show password";showBtn.tabIndex=-1;showBtn.innerHTML=icons.passwordShow;showBtn.classList.add("show");showBtn.id=`semanticFormsShowButton_${input.id}`;const dd=input.closest("dd");if(!dd){console.error(`semantic-forms: Found an input (${input.id||input.getAttribute("name")}) that is not inside a
element.`);return}showBtn.addEventListener("click",()=>{if(input.type==="password"){showBtn.innerHTML=icons.passwordHide;showBtn.title=input.getAttribute("data-hide-password-text")||"Hide password";showBtn.ariaLabel=input.getAttribute("data-hide-password-text")||"Hide password";input.type="text"}else{showBtn.innerHTML=icons.passwordShow;showBtn.title=input.getAttribute("data-show-password-text")||"Show password";showBtn.ariaLabel=input.getAttribute("data-show-password-text")||"Show password";input.type="password"}input.focus()});insertAfter(showBtn,dd.querySelector("label"))} // #endregion // add listener to shift clear button when scrollbar present if(input.nodeName==="TEXTAREA"){if(input.getAttribute("data-disable-autosize")===null){ @@ -134,7 +128,13 @@ if(input.getAttribute("data-auto-grow")!==null){const adjustHeight=()=>{if(input // set initial height to semantic-forms CSS variable input.style.height=window.getComputedStyle(form).getPropertyValue("--semanticFormsInputHeight");input.addEventListener("input",adjustHeight)} // shifts the clear button to the right if a scrollbar is present -const shiftClearBtn=()=>{const clearBtn=input.parentElement?.querySelector("button.clear");if(clearBtn)clearBtn.style.marginRight=input.clientHeight{const clearBtn=input.parentElement?.querySelector("button.clear");if(clearBtn)clearBtn.style.marginRight=input.clientHeight{if((event.ctrlKey||event.metaKey)&&event.key==="z"&&!event.shiftKey){ +// undo clearing a field +if(lastFocusedInput)if(lastFocusedInput?.parentNode?.querySelector("button.clear").id===`semanticFormsClearButton_${lastClearFieldPressed}`||lastFocusedInput?.parentNode?.querySelector("button.clear").name===`semanticFormsClearButton_${lastClearFieldPressed}`)if(lastFocusedInput.previousValue){lastFocusedInput.redoValue=lastFocusedInput.value;lastFocusedInput.value=lastFocusedInput.previousValue}}else if(event.ctrlKey&&event.key==="y"||event.metaKey&&event.shiftKey&&event.key==="z") +// redo clearing a field +if(lastFocusedInput)if(lastFocusedInput?.parentNode?.querySelector("button.clear").id===`semanticFormsClearButton_${lastClearFieldPressed}`||lastFocusedInput?.parentNode?.querySelector("button.clear").name===`semanticFormsClearButton_${lastClearFieldPressed}`)if(lastFocusedInput.redoValue){lastFocusedInput.previousValue=lastFocusedInput.value;lastFocusedInput.value=lastFocusedInput.redoValue}})};module.exports={enhanceInput} /***/} /******/}; /************************************************************************/ diff --git a/docs/statics/pages/fullDemo.html b/docs/statics/pages/fullDemo.html index d78ed99..f201fb7 100644 --- a/docs/statics/pages/fullDemo.html +++ b/docs/statics/pages/fullDemo.html @@ -23,6 +23,18 @@ margin-block: 0.67em; font-size: 2em; } + h2 { + position: sticky; + top: 0; + padding: 10px 5px; + z-index: 5; + } + body.light h2 { + background-color: #fff; + } + body.dark h2 { + background-color: #000; + } @@ -31,7 +43,48 @@

Semantic Forms

A pattern library of forms based on semantic HTML enhanced with a modern UX.

-

High flow (JavaScript enabled) styling

+
+ Table of Contents + + +
+ +

High flow (JavaScript enabled) styling

@@ -111,7 +164,7 @@

High flow (JavaScript enabled) styling

Fieldset legend -

Inputs

+

Inputs

@@ -251,7 +304,7 @@

Inputs

-

Selects

+

Selects

@@ -325,12 +378,12 @@

Selects

-

Checkboxes

+

Checkboxes

-
+
-
    +
      • @@ -359,15 +412,9 @@

      Checkboxes

        -
      • - -
        • -
      • - -
        • -
      • - -
        • +
        • +
        • +
@@ -418,13 +465,12 @@

Checkboxes

- -

Radios

+

Radios

-
+
-
    +
      • @@ -501,7 +547,7 @@

      Radios

-

Other

+

Other

@@ -534,7 +580,7 @@

Other

-
+
@@ -543,7 +589,7 @@

Other

-

Keyboard shortcuts

+

Keyboard shortcuts

@@ -605,447 +651,11 @@

Keyboard shortcuts

+ +

Tables

-

Tables

- -

Table with inputs and buttons

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Table Title
Column 1Column 2Column 3
1 - - - -
    • -
  • Link button 1
    • -     -
    2 - - - -
    • -
  • Link button 2
    • -     -
    3 - - - -
    • -
  • Link button 3
    • -     -
    - -

    Table using colgroups to define column width

    - - - - - - - - - - - - - - - - - - - - - - - -
    Table Title
    Column 1Column 2Column 3
    20%50%30%
    - -

    Nested fieldsets

    - -
    - Fieldset 1 - -
    -
    -
    -
    - -

    Here is some subtext.

    -
    -
    - -
    -
    -
    - -

    Here's some small subtext.

    -
    -
    - -
    -
    -
    - -

    Here's some bold subtext.

    -
    -
    - -
    -
    -
    - -

    Here is some subtext.

    -

    Here is some more subtext.

    -
    -
    -
    - -
    - Fieldset 2 - -
    -
    -
    -
    - -
    -
    - -
    -
    -
    -
    - -
    -
    -
    - -
    -
    -
    - -
    - Fieldset 3 - -
    -
    -
    -
    -
    - -
    -
    -
    -
    - -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    -
    -
    - -
    - Detail element -
    -
    -
    -
    -
    - -
    -
    -
    -
    - -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    - -
    - Another detail element with a nested fieldset -
    -
    -
    -
    -
    -
    - -
    - Nested fieldset - -
    -
    -
    -
    -
    -
    -
    -
    - - - - Button link - -

    Flexbox button layout pattern with two submit buttons:

    - -
    • -
    • -     - -

    Flexbox button layout pattern with three submit buttons:

    - -
    • -
    • -
    • -     - - -
    - Colspan classes - -
    -
    -
    -
    -
    - -
    -
    -
    -
    - -
    -
    -
    -
    - -
    -
    -
    -
    - -
    -
    -
    -
    - -
    -
    -
    -
    - -
    -
    -
    -
    - -
    -
    -
    -
    -
    - -
    - colspan-1 - -
    -
    -
    -
    -
    - -
    -
    -
    -
    - -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    - -
    - colspan-2 - -
    -
    -
    -
    -
    - -
    -
    -
    -
    - -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    - -
    - colspan-3 - -
    -
    -
    -
    -
    - -
    -
    -
    -
    - -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    - -
    - colspan-full - -
    -
    -
    -
    -
    - -
    -
    -
    -
    - -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    -
    - -
    - P tag elements - -

    - - -

    -

    - - -

    -

    - - -

    -

    - -

    -

    - Some regular text with other elements inside of it -

    -
    - -

    Non-form related HTML elements

    -

    This is some regular HTML that should not be affected by any semantic forms styles

    -
    This is a div
    -
    This is a block quote
    - A link to the semantic forms repo - -
      -
    • unordered list 1
      • -
    • unordered list 2
      • -
    • unordered list 3
      • -
    -
      -
    1. ordered list 1
      2. -
    2. ordered list 2
      3. -
    3. ordered list 3
      4. -
    - -
  • menu list 1
    • -
  • menu list 2
    • -
  • menu list 3
    • -     -
    -
    description list title
    -
    description list value
    -
    - - -

    Table with semanticForms class

    - +

    Table with inputs and buttons

    +
    @@ -1060,7 +670,7 @@

    Table with semanticForms class

    Table Title
    1 - + @@ -1072,7 +682,7 @@

    Table with semanticForms class

    2 - + @@ -1084,7 +694,7 @@

    Table with semanticForms class

    3 - + @@ -1096,33 +706,13 @@

    Table with semanticForms class

    -

    Table with a form in a cell

    - - - - - - - - - - - - - - - - -
    Table Title
    Column 1Column 2
    Some text -
    - -
    • -     -
    -
    - -

    Unstyled table

    +

    Table using colgroups to define column width

    + + + + + @@ -1135,525 +725,956 @@

    Unstyled table

    - - - - - - - - - - - - - + + +
    Table Title
    1Aa
    2Bb
    3Cc20%50%30%
    -
    +

    Nested fieldsets

    +
    + Fieldset 1 -

    Low flow (JavaScript disabled) styling

    -

    Adding the lowFlow class to the form element removes all JS enhancements.

    -
    -
    -
    -
    - -
    -
    -
    +
    +
    + +

    Here is some subtext.

    +
    -
    -
    +
    +
    + +

    Here's some small subtext.

    +
    -
    +
    - -

    Password should be at least 8 characters long.

    + +

    Here's some bold subtext.

    -
    -
    -
    -
    +
    +
    + +

    Here is some subtext.

    +

    Here is some more subtext.

    +
    - Fieldset legend -
    -
    -
    -
    -
    - -
    -
    -
    -
    - -
    -
    -
    -
    - -
    -
    -
    -
    - -
    -
    -
    -
    + Fieldset 2 +
    -
    +
    - - +
    -
    -
    -
    - -
    -
    -
    +
    +
    -
    -
    -
    - -
    -
    +
    - + -
    +
    -
    -
    -
    -
      -
      • -
      • -
      • -
    -
    -
    +
    + Fieldset 3 -
    -
    -
    -
    +
    +
    +
    +
    +
    -
    -
    -
    -
      -
      • -
      • -
      • -
    -
    -
    +
    +
    +
    +
    -
    -
    -
    -
    +
    +
    +
    +
    -
    -
    -
    -
    +
    +
    +
    +
    +
    +
    +
    +
    -
    -
    -
    - +

    Detail elements

    +
    + Detail element +
    +
    +
    +
    +
    -
    -
    -
    -
    +
    +
    +
    +
    -
    -
    -
    -
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    + +
    + Another detail element with a nested fieldset +
    +
    +
    +
    +
    +
    + +
    + Nested fieldset +
    -
    -
    +
    +
    +
    +
    +
    + +

    Buttons

    + + + Button link + +

    Flexbox button layout pattern with two submit buttons:

    + +
    • +
    • +     + +

    Flexbox button layout pattern with three submit buttons:

    + +
    • +
    • +
    • +     + +

    Colspan classes

    +
    +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    + colspan-1 + +
    +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    + +
    + colspan-2 + +
    +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    + +
    + colspan-3 + +
    +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    + +
    + colspan-full + +
    +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    + +

    P tag elements

    +

    + + +

    +

    + + +

    +

    + + +

    +

    + +

    +

    + Some regular text with other elements inside of it +

    + + + +

    Semantic form tables

    + +

    Table with semanticForms class

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Table Title
    Column 1Column 2Column 3
    1 + + + +
    • +
  • Link button 1
    • +     +
    2 + + + +
    • +
  • Link button 2
    • +     +
    3 + + + +
    • +
  • Link button 3
    • +     +
    + +

    Table with a form in a cell

    + + + + + + + + + + + + + + + + +
    Table Title
    Column 1Column 2
    Some text +
    + +
    • +     +
    +
    + +

    Unstyled table

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Table Title
    Column 1Column 2Column 3
    1Aa
    2Bb
    3Cc
    + +
    + +

    Low flow (JavaScript disabled) styling

    +

    Adding the lowFlow class to the form element removes all JS enhancements.

    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    + +

    Password should be at least 8 characters long.

    +
    +
    +
    + +
    +
    +
    +
    +
    +
    + +
    + Fieldset legend + +

    Inputs

    +
    +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    + + +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    + + +
    +
    + +
    +
    +
    +
      +
      • +
      • +
      • +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
      +
      • +
      • +
      • +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    + + +
    +
    +
    + +

    Nested fieldsets

    +
    + Nested fieldset + +
    -
    -
    +
    +
    + +

    Here is some subtext.

    +
    -
    -
    +
    +
    + +

    Here's some small subtext.

    +
    -
    -
    +
    +
    + +

    Here's some bold subtext.

    +
    -
    +
    - - -
    + +

    Here is some subtext.

    +

    Here is some more subtext.

    +
    - Nested fieldset + Another nested fieldset
    -
    -
    - -

    Here is some subtext.

    -
    +
    +
    -
    +
    - -

    Here's some small subtext.

    +
    -
    +
    - -

    Here's some bold subtext.

    +
    - -
    -
    -
    - -

    Here is some subtext.

    -

    Here is some more subtext.

    -
    -
    - -
    - Another nested fieldset - -
    -
    -
    -
    -
    - -
    -
    -
    - -
    -
    - -
    -
    -
    - -
    -
    -
    -
    + -
    - Details summary -
    -
    -
    -
    -
    +

    Detail elements

    +
    + Details summary +
    +
    +
    +
    +
    -
    -
    -
    -
    +
    +
    +
    +
    -
    -
    -
    -
    +
    +
    +
    +
    -
    -
    -
    -
    -
    -
    +
    +
    +
    +
    +
    +
    -
    - Another details element -
    -
    -
    -
    -
    -
    -
    +
    + Another details element +
    +
    +
    +
    +
    +
    +
    -
    - Colspan classes +

    Colspan classes

    -
    -
    -
    -
    -
    +
    +
    +
    +
    +
    -
    -
    -
    -
    +
    +
    +
    +
    -
    -
    -
    -
    +
    +
    +
    +
    -
    -
    -
    -
    +
    +
    +
    +
    -
    -
    -
    -
    +
    +
    +
    +
    -
    -
    -
    -
    +
    +
    +
    +
    -
    -
    -
    -
    +
    +
    +
    +
    -
    -
    -
    -
    -
    +
    +
    +
    +
    +
    -
    - colspan-1 - -
    -
    -
    -
    -
    - -
    -
    -
    -
    - -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    - -
    - colspan-2 - -
    -
    -
    -
    -
    - -
    -
    -
    -
    - -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    - -
    - colspan-3 - -
    -
    -
    -
    -
    - -
    -
    -
    -
    - -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    - -
    - colspan-full - -
    -
    -
    -
    -
    - -
    -
    -
    -
    - -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    -
    +
    + colspan-1 -
    - P tag elements - -

    - - -

    -

    - - -

    -

    - - -

    -

    - -

    -

    - Some regular text with other elements inside of it -

    -
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    + +
    + colspan-2 + +
    +
    +
    +
    +
    - - - Button link - -

    Flexbox button layout pattern with two submit buttons:

    - -
    • -
    • -     - -

    Flexbox button layout pattern with three submit buttons:

    - -
    • -
    • -
    • -     +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    +
    -

    Non-form related HTML elements

    -

    This is some regular HTML that should not be affected by any semantic forms styles

    -
    This is a div
    -
    This is a block quote
    - A link to the semantic forms repo -
      -
    • unordered list 1
      • -
    • unordered list 2
      • -
    • unordered list 3
      • -
    -
      -
    1. ordered list 1
      2. -
    2. ordered list 2
      3. -
    3. ordered list 3
      4. -
    +
    + colspan-3 + +
    +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    + +
    + colspan-full + +
    +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    + +

    P tag elements

    + +

    + + +

    +

    + + +

    +

    + + +

    +

    + +

    +

    + Some regular text with other elements inside of it +

    + +

    Buttons

    + + + Button link + +

    Flexbox button layout pattern with two submit buttons:

    -
  • menu list 1
    • -
  • menu list 2
    • -
  • menu list 3
    • +
    • +
    • -
    -
    description list title
    -
    description list value
    -
    - + +

    Flexbox button layout pattern with three submit buttons:

    + +
    • +
    • +
    • +     + + + + +
    +

    This is some regular HTML that should not be affected by any semantic forms styles

    +
    This is a div
    +
    This is a block quote
    + A link to the semantic forms repo + +
      +
    • unordered list 1
      • +
    • unordered list 2
      • +
    • unordered list 3
      • +
    +
      +
    1. ordered list 1
      2. +
    2. ordered list 2
      3. +
    3. ordered list 3
      4. +
    + +
  • menu list 1
    • +
  • menu list 2
    • +
  • menu list 3
    • +     +
    +
    description list title
    +
    description list value
    +
    +