/** * 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 } // 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="file"], [type="range"] { padding: 0; border-width: 0; } // Pico // –––––––––––––––––––– // Force height for alternatives input types input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) { height: calc(#{1rem*$line-height} + #{$spacing-input-button-vertical*2} + 2px); } // Fieldset fieldset { margin: 0; margin-bottom: $spacing-typography; padding: 0; border: 0; } // Label & legend label, fieldset legend { display: block; margin-bottom: $spacing-form-elements; vertical-align: middle; } // Global layout input:not([type="checkbox"]):not([type="radio"]), select, textarea, form small { display: block; width: 100%; } // Reset appearance (Not Checkboxes, Radios, Range and File) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: $spacing-input-button-vertical $spacing-input-button-horizontal; vertical-align: middle; } // Commons styles input, select, textarea { border: 1px solid var(--input-border); border-radius: $round; outline: none; background-color: var(--input-background); color: var(--text); font-weight: normal; @if $enable-transitions { transition: background-color $transition, border-color $transition, color $transition, box-shadow $transition; } &::placeholder, &::-webkit-input-placeholder { color: var(--muted-text); opacity: 1; } &:active, &:focus { border-color: var(--primary); } &[readonly], &[disabled] { border-color: var(--muted-border); box-shadow: none; & ~ label { color: var(--muted-text); } } &[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]) { background-color: var(--muted-background); } &[disabled] { cursor: not-allowed; opacity: .5; } // Validation states @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 { // 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, .999)}' 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 { // 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, .999)}' 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"); } } } // Margin bottom (Not Checkboxes andRadios) input:not([type="checkbox"]):not([type="radio"]), select, textarea { margin-bottom: $spacing-typography; } // Focus styles (Not Range and File) input:not([type="range"]):not([type="file"]), select, textarea { &:focus { box-shadow: 0 0 0 0.2rem var(--primary-focus); } } // Select select { // Unstyle the caret on `