beta-parity-react/ui/Form/index.css

Beta Parity React Components

.form{container-type:inline-size;margin-bottom:1rem}.form-block{-moz-column-gap:4rem;column-gap:4rem;display:flex;flex-wrap:wrap;row-gap:1rem;width:100%}.form-control-label{flex-basis:6rem;flex-grow:1;font-family:IBM Plex Sans,Helvetica Neue,Arial,sans-serif;font-size:1rem;font-weight:400;line-height:1.375rem;margin-bottom:.5rem;min-width:5.5rem;--tw-text-opacity:1;color:rgb(74 74 74/var(--tw-text-opacity))}.form-control-label.required:after{--tw-text-opacity:1;color:rgb(219 45 50/var(--tw-text-opacity));--tw-content:"*";content:var(--tw-content)}.form-col{align-content:flex-start;align-items:flex-start;-moz-column-gap:1rem;column-gap:1rem;display:flex;flex-basis:50% - 2rem;flex-grow:1;flex-shrink:1;flex-wrap:wrap;min-width:0;row-gap:.5rem}@container (min-width: 36rem){.form-col{min-width:100%}}@container (min-width: 64rem){.form-col{max-width:calc(50% - 2rem);min-width:calc(50% - 2rem)}}.form-control>.form-control-set{min-width:unset}.form-control,.form-control-set{display:flex;flex-basis:60%;flex-direction:column;flex-grow:1;min-width:80%;row-gap:1rem}.form-control{-moz-column-gap:1rem;column-gap:1rem;flex-shrink:1;flex-wrap:nowrap}@container (min-width: 36rem){.form-control{max-width:100%}}.form-control.double{flex-direction:column}@container (min-width: 24rem){.form-control.double{flex-direction:row}}.form-control.quadruple,.form-control.triple{flex-direction:column}@container (min-width: 32rem){.form-control.quadruple,.form-control.triple{flex-direction:row}}.form-control.double>*{flex-grow:1}@container (min-width: 24rem){.form-control.double>*{max-width:calc(50% - .5rem)}}.form-control.double.ratio-2\:1>*{flex-grow:1}@container (min-width: 24rem){.form-control.double.ratio-2\:1>:first-child{max-width:calc(66.66667% - .33333rem)}.form-control.double.ratio-2\:1>:last-child{max-width:calc(33.33333% - .66667rem)}}.form-control.double.ratio-1\:2>*{flex-grow:1}@container (min-width: 24rem){.form-control.double.ratio-1\:2>:first-child{max-width:calc(33.33333% - .66667rem)}.form-control.double.ratio-1\:2>:last-child{max-width:calc(66.66667% - .33333rem)}}.form-control.double.ratio-3\:1>*{flex-grow:1}@container (min-width: 24rem){.form-control.double.ratio-3\:1>*{max-width:calc(25% - .75rem)}.form-control.double.ratio-3\:1>:first-child{max-width:calc(75% - .25rem)}}.form-control.double.ratio-1\:3>*{flex-grow:1}@container (min-width: 24rem){.form-control.double.ratio-1\:3>*{max-width:calc(25% - .75rem)}.form-control.double.ratio-1\:3>:last-child{max-width:calc(75% - .25rem)}}.form-control.triple>*{flex-grow:1}@container (min-width: 32rem){.form-control.triple>*{flex-basis:calc(33.33333% - 0.33333rem);max-width:calc(33.33333% - .33333rem)}}.form-control.triple.ratio-1\:1\:2>*{flex-grow:1}@container (min-width: 32rem){.form-control.triple.ratio-1\:1\:2>*{flex-basis:calc(25% - 0.75rem);max-width:calc(25% - .75rem)}.form-control.triple.ratio-1\:1\:2>:last-child{max-width:calc(50% - .5rem)}}.form-control.triple.ratio-2\:1\:1>*{flex-grow:1}@container (min-width: 32rem){.form-control.triple.ratio-2\:1\:1>*{flex-basis:calc(25% - 0.75rem);max-width:calc(25% - .75rem)}.form-control.triple.ratio-2\:1\:1>:first-child{max-width:calc(50% - .5rem)}}.form-control.triple.ratio-1\:2\:1>*{flex-grow:1}@container (min-width: 32rem){.form-control.triple.ratio-1\:2\:1>*{flex-basis:calc(50% - 0.5rem);max-width:calc(50% - .5rem)}.form-control.triple.ratio-1\:2\:1>:first-child,.form-control.triple.ratio-1\:2\:1>:last-child{max-width:calc(25% - .75rem)}}.form-control.quadruple>*{flex-grow:1}@container (min-width: 32rem){.form-control.quadruple>*{flex-basis:calc(25% - 0.75rem);max-width:calc(25% - .75rem)}}.sub-control:not([hidden]){display:flex;flex-direction:column;margin-top:.5rem;padding-left:1.75rem;position:relative;row-gap:.5rem}.sub-control:not([hidden]):before{height:100%;left:.46875rem;position:absolute;top:0;width:1px;--tw-bg-opacity:1;background-color:rgb(203 203 203/var(--tw-bg-opacity));--tw-content:"";content:var(--tw-content)}.form-control.double>.input-wrapper{flex-grow:1}@container (min-width: 24rem){.form-control.double>.input-wrapper{max-width:calc(50% - 1.5rem)}}.form-control.double.ratio-2\:1>.input-wrapper{flex-grow:1}@container (min-width: 24rem){.form-control.double.ratio-2\:1>.input-wrapper:last-child{max-width:calc(33.33333% - 1.66667rem)}}.form-control.double.ratio-1\:2>.input-wrapper{flex-grow:1}@container (min-width: 24rem){.form-control.double.ratio-1\:2>.input-wrapper:first-child{max-width:calc(33.33333% - 1.66667rem)}}.form-control.double.ratio-3\:1>.input-wrapper{flex-grow:1}@container (min-width: 24rem){.form-control.double.ratio-3\:1>.input-wrapper{max-width:calc(25% - 1.75rem)}.form-control.double.ratio-3\:1>.input-wrapper:first-child{max-width:calc(75% - 1.25rem)}}.form-control.double.ratio-1\:3>.input-wrapper{flex-grow:1}@container (min-width: 24rem){.form-control.double.ratio-1\:3>.input-wrapper{max-width:calc(25% - 1.75rem)}.form-control.double.ratio-1\:3>.input-wrapper:last-child{max-width:calc(75% - 1.25rem)}}.form-control.triple>.input-wrapper{flex-grow:1}@container (min-width: 32rem){.form-control.triple>.input-wrapper{flex-basis:calc(33.33333% - 0.83333rem);max-width:calc(33.33333% - .83333rem)}}.form-control.triple.ratio-1\:1\:2>.input-wrapper{flex-grow:1}@container (min-width: 32rem){.form-control.triple.ratio-1\:1\:2>.input-wrapper{flex-basis:calc(25% - 1.75rem);max-width:calc(25% - 1.75rem)}.form-control.triple.ratio-1\:1\:2>.input-wrapper:last-child{max-width:calc(50% - 1.5rem)}}.form-control.triple.ratio-2\:1\:1>.input-wrapper{flex-grow:1}@container (min-width: 32rem){.form-control.triple.ratio-2\:1\:1>.input-wrapper{flex-basis:calc(25% - 1.75rem);max-width:calc(25% - 1.75rem)}.form-control.triple.ratio-2\:1\:1>.input-wrapper:first-child{max-width:calc(50% - 1.5rem)}}.form-control.triple.ratio-1\:2\:1>.input-wrapper{flex-grow:1}@container (min-width: 32rem){.form-control.triple.ratio-1\:2\:1>.input-wrapper{flex-basis:calc(50% - 1.5rem);max-width:calc(50% - 1.5rem)}.form-control.triple.ratio-1\:2\:1>.input-wrapper:first-child,.form-control.triple.ratio-1\:2\:1>.input-wrapper:last-child{max-width:calc(25% - 1.75rem)}}.form-control.quadruple>.input-wrapper{flex-grow:1}@container (min-width: 32rem){.form-control.quadruple>.input-wrapper{flex-basis:calc(25% - 1.75rem);max-width:calc(25% - 1.75rem)}}