components/dist/form.css

2 lines
6 KiB
CSS
Raw Normal View History

2020-03-25 15:47:56 +01:00
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}input:disabled,textarea:disabled,select:disabled{opacity:.4}input:disabled+label,textarea:disabled+label,select:disabled+label{opacity:.4}input[type=range],textarea[type=range],select[type=range]{height:auto;height:.5rem;background-color:var(--color-secondary)}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 input[type=checkbox]:disabled+label,.checkbox input[type=radio]:disabled+label,.radio input[type=checkbox]:disabled+label,.radio input[type=radio]:disabled+label{cursor:defau