@blacktoolbox/react-form
Version:
Form maker based on React.
2 lines • 7.6 kB
CSS
.btb-react-form{margin:1px}.btb-react-form .inner_item.item-after,.btb-react-form .inner_item.item-before,.btb-react-form .outer_item.item-append,.btb-react-form .outer_item.item-prepend{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:1;flex-shrink:1}.form-input .input_outer{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.form-input .outer_item{background-color:#fff;border:1px solid #000;padding:.5rem;overflow:hidden}.form-input .outer_item.item-prepend{border-right:none}.form-input .outer_item.item-append{border-left:none}.form-input .outer_item:first-child{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem;padding-left:1rem}.form-input .outer_item:last-child{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem;padding-right:1rem}.form-input .item-inner{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.form-input .inner_item.item-before{padding-right:.5rem}.form-input .inner_item.item-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:0;flex-shrink:0;color:inherit;font-size:inherit;font-family:inherit;line-height:inherit;border:none}.form-input .inner_item.item-input:focus{outline:none}.form-input .inner_item.item-after{padding-left:.5rem}.form-input.input-readonly .outer_item{background:#e6e6e6}.form-input.input-disabled .inner_item.item-input{cursor:not-allowed}.form-input.input-disabled .outer_item{background:#e6e6e6;border-color:#b3b3b3;color:#b3b3b3}.form-input.input-focused .outer_item{outline:1px solid #000}.form-select .select_outer{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.form-select .outer_item{background-color:#fff;border:1px solid #000;padding:.5rem;overflow:hidden}.form-select .outer_item.item-prepend{border-right:none}.form-select .outer_item.item-append{border-left:none}.form-select .outer_item:first-child{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem;padding-left:1rem}.form-select .outer_item:last-child{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem;padding-right:1rem}.form-select .item-inner{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.form-select .inner_item.item-before{padding-right:.5rem}.form-select .inner_item.item-select{background-color:transparent;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:0;flex-shrink:0;color:inherit;font-size:inherit;font-family:inherit;line-height:inherit;border:none}.form-select .inner_item.item-select:focus{outline:none}.form-select.select-disabled .inner_item.item-select{cursor:not-allowed}.form-select.select-disabled .outer_item{background:#e6e6e6;border-color:#b3b3b3;color:#b3b3b3}.form-select.select-focused .outer_item{outline:1px solid #000}.form-checkbox{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.form-checkbox .checkbox_input{position:absolute;z-index:-1;opacity:0;margin:0}.form-checkbox .checkbox_input:not(:checked)+.checkbox_item{color:unset}.form-checkbox .checkbox_input:not(:checked)+.checkbox_item .item_button{opacity:0}.form-checkbox .checkbox_input:not(:checked):not(disabled)+.checkbox_item{background:unset}.form-checkbox .checkbox_item{cursor:pointer;position:relative;border-radius:.25rem;outline:1px solid currentColor;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;background:#fff;margin:.25rem 0}.form-checkbox .checkbox_item,.form-checkbox .checkbox_item .item_button{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.form-checkbox .checkbox_item .item_button{-webkit-transition:opacity .3s ease-in-out 0s;transition:opacity .3s ease-in-out 0s;position:absolute;width:100%;height:100%;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-transform:rotate(45deg);transform:rotate(45deg);-webkit-transform-origin:center;transform-origin:center;top:-35%;left:-5%;opacity:1}.form-checkbox .checkbox_item .item_button:before{content:"";position:absolute;width:20%;height:70%;background:currentColor}.form-checkbox .checkbox_item .item_button:after{content:"";position:absolute;width:50%;height:20%;background:currentColor}.form-checkbox .checkbox_label{cursor:pointer;margin:0 .5rem 0 .25rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.form-checkbox.checkbox-inline,.form-checkbox .checkbox_label{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.form-checkbox.checkbox-disabled .checkbox_label{cursor:not-allowed}.form-checkbox.checkbox-disabled .checkbox_item{cursor:not-allowed;background:#e6e6e6;outline:1px solid #b3b3b3;opacity:.4}.form-radio{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.form-radio .radio_input{position:absolute;z-index:-1;opacity:0;margin:0}.form-radio .radio_input:not(:checked)+.radio_item{color:unset}.form-radio .radio_input:not(:checked)+.radio_item .item_button{opacity:0}.form-radio .radio_item{cursor:pointer;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;border-radius:100%;outline:1px solid currentColor;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;background:#fff;margin:.25rem 0}.form-radio .radio_item .item_button{-webkit-transition:opacity .3s ease-in-out 0s;transition:opacity .3s ease-in-out 0s;position:absolute;border-radius:100%;width:50%;height:50%;background:currentColor;opacity:1}.form-radio .radio_label{cursor:pointer;margin:0 .5rem 0 .25rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.form-radio.radio-inline,.form-radio .radio_label{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.form-radio.radio-disabled .radio_label{cursor:not-allowed}.form-radio.radio-disabled .radio_item{cursor:not-allowed;background:#e6e6e6;outline:1px solid #b3b3b3;opacity:.4}.form-textarea{background-color:#fff;border:1px solid #000;padding:.5rem;border-radius:.5rem}.form-textarea .textarea_input{width:100%;color:inherit;font-size:inherit;font-family:inherit;line-height:inherit;border:none;resize:vertical;background-color:transparent}.form-textarea .textarea_input:focus{outline:none}.form-textarea .textarea_counter{text-align:right;font-size:.75rem;color:#b3b3b3}.form-textarea.textarea-readonly{background:#e6e6e6}.form-textarea.textarea-disabled{background:#e6e6e6;border-color:#b3b3b3;color:#b3b3b3}.form-textarea.textarea-disabled .textarea_input{cursor:not-allowed}.form-textarea.textarea-focused{outline:1px solid #000}
/*# sourceMappingURL=index.css.map */