components/dist/form.css
2020-01-23 14:55:36 -05:00

2 lines
5.4 KiB
CSS

input,textarea,select{height:var(--height-input);border-radius:var(--border-radius);border:1px solid;color:var(--color-input);border-color:var(--color-input-border);background-color:var(--color-input-bg);padding-right:var(--spacing-s);padding-left:var(--spacing-s)}input:focus,textarea:focus,select:focus{box-shadow:0 0 0 3px var(--color-focus)}input::placeholder,textarea::placeholder,select::placeholder{color:var(--color-input-placeholder);opacity:.4}checkbox-element,radio-element,select{cursor:pointer}select{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg' fill='%23212529'%3E%3Cpath d='M17.172, 31.172c1.562, -1.562 4.095, -1.562 5.656, 0l25.172, 25.171l25.172, -25.171c1.562, -1.562 4.095, -1.562 5.656, 0c1.562, 1.562 1.562, 4.095 0, 5.656l-28, 28c-1.562, 1.562 -4.095, 1.562 -5.656, 0l-28, -28c-0.781, -0.781 -1.172, -1.805 -1.172, -2.828c0, -1.023 0.391, -2.047 1.172, -2.828Z'/%3E%3C/svg%3E%0A");background-position:99% center;background-repeat:no-repeat;background-size:1rem;padding-right:var(--spacing-l);padding-left:var(--spacing-s)}fieldset-group,.fieldset-group{display:flex;flex-direction:row;justify-content:space-between}fieldset-group.fieldset-group--smushed fieldset-section+fieldset-section,fieldset-group.fieldset-group--smushed .fieldset-section+fieldset-section,fieldset-group.fieldset-group--smushed fieldset-section+.fieldset-section,fieldset-group.fieldset-group--smushed .fieldset-section+.fieldset-section,.fieldset-group--smushed.fieldset-group fieldset-section+fieldset-section,.fieldset-group--smushed.fieldset-group .fieldset-section+fieldset-section,.fieldset-group--smushed.fieldset-group fieldset-section+.fieldset-section,.fieldset-group--smushed.fieldset-group .fieldset-section+.fieldset-section{margin-top:0}fieldset-section,.fieldset-section,form,.checkbox,.radio{display:flex;flex-direction:column}fieldset-section+fieldset-section,.fieldset-section+fieldset-section,fieldset-section+.fieldset-section,.fieldset-section+.fieldset-section,fieldset-section+form,.fieldset-section+form,fieldset-section+.checkbox,.fieldset-section+.checkbox,fieldset-section+.radio,.fieldset-section+.radio,form+fieldset-section,form+.fieldset-section,form+form,form+.checkbox,form+.radio,.checkbox+fieldset-section,.checkbox+.fieldset-section,.checkbox+form,.checkbox+.checkbox,.checkbox+.radio,.radio+fieldset-section,.radio+.fieldset-section,.radio+form,.radio+.checkbox,.radio+.radio{margin-top:var(--spacing-s)}fieldset-section:last-child,.fieldset-section:last-child,form:last-child,.checkbox:last-child,.radio:last-child{margin-bottom:0}fieldset-section input,.fieldset-section input,fieldset-section select,.fieldset-section select,form input,form select,.checkbox input,.checkbox select,.radio input,.radio select{width:100%}label{font-size:var(--font-small);color:var(--color-input-label);display:inline-block;margin-bottom:var(--spacing-xxs)}input-submit,.input-submit{display:flex}input-submit>*:first-child,.input-submit>*:first-child,input-submit>*:nth-child(2),.input-submit>*:nth-child(2){margin:0}input-submit>*:first-child,.input-submit>*:first-child{border-top-right-radius:0;border-bottom-right-radius:0;border-right:none}input-submit>*:nth-child(2),.input-submit>*:nth-child(2){border-top-left-radius:0;border-bottom-left-radius:0;border:1px solid var(--color-border)}.checkbox,.radio{position:relative}.checkbox input[type=checkbox],.checkbox input[type=radio],.radio input[type=checkbox],.radio input[type=radio]{height:var(--height-checkbox);width:var(--height-checkbox);position:absolute;border:none;left:0;padding:0;background-color:transparent}.checkbox label,.radio label{position:relative;display:inline-block;margin:0;font-size:var(--font-base);padding-left:calc(var(--height-checkbox) + var(--spacing-s));min-height:var(--height-checkbox)}.checkbox label:hover::before,.radio label:hover::before{background-color:var(--color-secondary-alt)}.checkbox label::before,.checkbox label::after,.radio label::before,.radio label::after{position:absolute;content:""}.checkbox input[type=checkbox]+label::after,.checkbox input[type=radio]+label::after,.radio input[type=checkbox]+label::after,.radio input[type=radio]+label::after{content:none}.checkbox input[type=checkbox]:checked+label::after,.checkbox input[type=radio]:checked+label::after,.radio input[type=checkbox]:checked+label::after,.radio input[type=radio]:checked+label::after{content:""}.checkbox input[type=checkbox]:focus+label::before,.checkbox input[type=radio]:focus+label::before,.radio input[type=checkbox]:focus+label::before,.radio input[type=radio]:focus+label::before{box-shadow:0 0 0 3px var(--color-focus)}.checkbox label::before{height:var(--height-checkbox);width:var(--height-checkbox);border:1px solid var(--color-input-border);border-radius:var(--border-radius);left:0px;top:-1px;background-color:var(--color-input-bg)}.checkbox label::after{height:6px;width:12px;border-left:2px solid;border-bottom:2px solid;border-color:var(--color-secondary);transform:rotate(-45deg);left:6px;top:6px}.radio input[type=radio]{border-radius:50%}.radio label::before{height:var(--height-radio);width:var(--height-radio);border:1px solid var(--color-input-border);border-radius:calc(var(--height-radio) * 0.5);left:0px;top:-1px;background-color:var(--color-input-bg)}.radio label::after{height:12px;width:12px;border-radius:50%;background-color:var(--color-secondary);left:6px;top:5px}/*# sourceMappingURL=form.css.map */