/** * Form elements */ // Reboot based on : // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css // - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css // –––––––––––––––––––– // 1. Change the font styles in all browsers // 2. Remove the margin in Firefox and Safari input, optgroup, select, textarea { margin: 0; // 2 font-family: inherit; // 1 font-size: 1rem; // 1 letter-spacing: inherit; // 2 line-height: $line-height; // 1 } /** * 1. Change the inconsistent appearance in all browsers (opinionated). * 2. Add typography inheritance in all browsers (opinionated). */ // Show the overflow in IE. input { overflow: visible; } // Remove the inheritance of text transform in Edge, Firefox, and IE select { text-transform: none; } // 1. Correct the text wrapping in Edge and IE // 2. Correct the color inheritance from `fieldset` elements in IE // 3. Remove the padding so developers are not caught out when they zero out // `fieldset` elements in all browsers legend { display: table; // 1 max-width: 100%; // 1 padding: 0; // 3 color: inherit; // 2 white-space: normal; // 1 } // 1. Remove the margin in Firefox and Safari // 2. Remove the default vertical scrollbar in IE // 3. Change the resize direction in all browsers (opinionated) textarea { margin: 0; // 1 overflow: auto; // 2 resize: vertical; // 3 resize: block; // 3 } // Remove the padding in IE 10 [type="checkbox"], [type="radio"] { padding: 0; } // Correct the cursor style of increment and decrement buttons in Safari ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } // 1. Correct the odd appearance in Chrome and Safari // 2. Correct the outline style in Safari [type="search"] { -webkit-appearance: textfield; // 1 outline-offset: -2px; // 2 } // Remove the inner padding in Chrome and Safari on macOS [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } // 1. Correct the inability to style clickable types in iOS and Safari // 2. Change font properties to `inherit` in Safari ::-webkit-file-upload-button { -webkit-appearance: button; // 1 font: inherit; // 2 } // Remove the inner border and padding of focus outlines in Firefox ::-moz-focus-inner { padding: 0; border-style: none; } // Restore the focus outline styles unset by the previous rule in Firefox :-moz-focusring { outline: 1px dotted ButtonText; } // Remove the additional :invalid styles in Firefox :-moz-ui-invalid { box-shadow: none; } // Change the inconsistent appearance in IE (opinionated) ::-ms-expand { display: none; } // Remove the border and padding in all browsers (opinionated) [type="color"], [type="range"] { padding: 0; border-width: 0; } // Pico // –––––––––––––––––––– // Fieldset fieldset { margin: 0; margin-bottom: $spacing-typography; padding: 0; border: 0; } // Layout input:not([type="checkbox"]):not([type="radio"]), select, textarea, form small { display: block; width: 100%; } // Spacing beteen label and input $spacing-label-input: $spacing-typography/12; // Label & legend label, fieldset legend { display: block; margin-bottom: $spacing-label-input; vertical-align: middle; } // Inputs (Commons styles) input, select, textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1px solid var(--input-border); border-radius: $round; outline: none; background-color: var(--input-background); color: var(--text); font-weight: normal; vertical-align: middle; @if $enable-transitions { transition: background-color $transition, border-color $transition, color $transition, border-color $transition, box-shadow $transition; } &::placeholder, &::-webkit-input-placeholder { color: var(--muted-text); opacity: 1; } &:active, &:focus { border-color: var(--primary); } &:focus { box-shadow: 0 0 0 0.2rem var(--primary-focus); } &[readonly], &[disabled] { border-color: var(--muted-border); box-shadow: none; & ~ label { color: var(--muted-text); } } &[disabled] { background-color: var(--muted-background); opacity: .5; } } // Text, Select & Textarea input:not([type="checkbox"]):not([type="radio"]), select, textarea { margin-bottom: $spacing-typography; padding: $spacing-input-button; @if $enable-input-states and $enable-classes { // Validation states &.valid, &.invalid { padding-right: 2rem; background-position: center right .75rem; background-repeat: no-repeat; background-size: 1rem auto; } &.valid { border-bottom: 1px solid var(--valid); // Source: https://feathericons.com/ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($green-600, .99)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); } &.invalid { border-bottom: 1px solid var(--invalid); // Source: https://feathericons.com/ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($red-700, .99)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); } } } // Color input[type="color"] { height: calc(3rem + 2px); // HACK } // Select select { // Unstyle the caret on `