@capgeminiuk/dcx-react-library/dist/design-system/form-input.css

[](https://circleci.com/gh/Capgemini/dcx-react-library)

.dcx-form-input{--label-height:var(--dcx-font-formcontrol_label-line-height,20px);--input-height:calc(var(--dcx-font-formcontrol-line-height, 20px) + var(--dcx-spacing-y-formcontrol, 15px));box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;position:relative}.dcx-form-input label{background:var(--dcx-color-background-formcontrol_label,transparent);color:var(--dcx-color-text-formcontrol_label,#000);font-size:var(--dcx-font-size-formcontrol_label,16px);line-height:var(--label-height)}.dcx-form-input input{all:unset;appearance:none;background:var(--dcx-color-background-formcontrol,transparent);border:none;border-radius:var(--dcx-border-radius-formcontrol,4px);box-sizing:border-box;color:var(--dcx-color-text-formcontrol,#000);flex:2 1 auto;font-size:var(--dcx-font-formcontrol-size,16px);height:var(--input-height);line-height:var(--dcx-font-formcontrol-line-height,20px);margin:var(--dcx-color-outline-formcontrol,#3f51b5);outline:none;padding-left:var(--dcx-spacing-x-formcontrol,15px);padding-right:var(--dcx-spacing-x-formcontrol,15px);z-index:1}.dcx-form-input input:-webkit-autofill,.dcx-form-input input:-webkit-autofill:focus,.dcx-form-input input:-webkit-autofill:hover{border:none;-webkit-text-fill-color:var(--dcx-color-text-formcontrol,#000);-webkit-box-shadow:var(--input-shadow);transition:background-color 5000s ease-in-out 0s}.dcx-form-input input::placeholder{color:var(--dcx-color-text-formcontrol_placeholder,#666);font-size:var(--dcx-font-size-formcontrol_placeholder,16px);font-weight:var(--dcx-font-weight-formcontrol_placeholder,normal)}.dcx-form-input:has(.dcx-form-input__suffix) input{border-bottom-right-radius:0;border-top-right-radius:0}.dcx-form-input:has(.dcx-form-input__prefix) input{border-bottom-left-radius:0;border-top-left-radius:0}.dcx-form-input:after{border-color:var(--dcx-border-color-formcontrol,#000);border-radius:var(--dcx-border-radius-formcontrol,4px);border-style:solid;border-width:var(--dcx-border-width-formcontrol,1px);bottom:0;box-sizing:border-box;content:"";display:block;height:var(--input-height);position:absolute;right:0;width:100%}.dcx-form-input.dcx-hint-bottom:after{bottom:var(--dcx-font-formcontrol_hint-line-height,18px)}.dcx-form-input.dcx-form-input--error:after{border-color:var(--dcx-color-text-formcontrol_error,#f44336)}.dcx-form-input.dcx-form-input--error.dcx-error-bottom.dcx-hint-bottom:after{bottom:calc(var(--dcx-font-formcontrol_error-line-height, 18px) + var(--dcx-font-formcontrol_hint-line-height, 18px))}.dcx-form-input.dcx-error-bottom.dcx-form-input--error:after{bottom:var(--dcx-font-formcontrol_error-line-height,18px)}.dcx-form-input .dcx-hint{color:var(--dcx-color-text-formcontrol_hint,#666);font-size:var(--dcx-font-formcontrol_hint-size,13px);line-height:var(--dcx-font-formcontrol_hint-line-height,18px)}.dcx-form-input .dcx-error-message{color:var(--dcx-color-text-formcontrol_error,#f44336);font-size:var(--dcx-font-formcontrol_error-size,13px);line-height:var(--dcx-font-formcontrol_error-line-height,18px);margin-block-end:0;margin-block-start:0}.dcx-form-input .dcx-form-input__suffix{background:var(--dcx-color-background-formcontrol_suffix,transparent);border-bottom-right-radius:var(--dcx-border-radius-formcontrol,4px);border-left:var(--dcx-border-width-formcontrol_suffix,1px) solid var(--dcx-border-color-formcontrol,#000);border-top-right-radius:var(--dcx-border-radius-formcontrol,4px)}.dcx-form-input .dcx-form-input__prefix,.dcx-form-input .dcx-form-input__suffix{align-items:center;color:var(--dcx-color-text-formcontrol,#000);display:flex;flex:0 0 auto;font-size:var(--dcx-font-formcontrol-size,16px);height:var(--input-height);justify-content:center;line-height:var(--dcx-font-formcontrol-line-height,20px);padding-left:var(--dcx-spacing-x-formcontrol,15px);padding-right:var(--dcx-spacing-x-formcontrol,15px)}.dcx-form-input .dcx-form-input__prefix{background:var(--dcx-color-background-formcontrol_prefix,transparent);border-bottom-left-radius:var(--dcx-border-radius-formcontrol,4px);border-right:var(--dcx-border-width-formcontrol_prefix,1px) solid var(--dcx-border-color-formcontrol,#000);border-top-left-radius:var(--dcx-border-radius-formcontrol,4px)}.dcx-form-input.dcx-form-input--error .dcx-form-input__prefix,.dcx-form-input.dcx-form-input--error .dcx-form-input__suffix{border-color:var(--dcx-color-text-formcontrol_error,#f44336)}.dcx-form-input:has(input:focus):after{border-color:var(--dcx-color-outline-formcontrol,#3f51b5);border-width:calc(var(--dcx-border-width-formcontrol, 1px)*2)}.dcx-form-input:has(input:focus) .dcx-form-input__prefix,.dcx-form-input:has(input:focus) .dcx-form-input__suffix{border-color:var(--dcx-color-outline-formcontrol,#3f51b5)}.dcx-form-input.dcx-form-input--error:has(input:focus) .dcx-form-input__prefix,.dcx-form-input.dcx-form-input--error:has(input:focus) .dcx-form-input__suffix{border-color:var(--dcx-color-text-formcontrol_error,#f44336)}.dcx-form-input.dcx-form-input--error:has(input:focus):after{border-color:var(--dcx-color-text-formcontrol_error,#f44336)}.dcx-form-input:has(input:disabled){opacity:.5}.dcx-form-input:has(input:disabled):after{opacity:.5}.dcx-form-input.dcx-floating-label{--label-height:var(--dcx-font-formcontrol_label-line-height-floating,16px);--input-height:calc(var(--label-height) + var(--dcx-spacing-y-formcontrol-floating, 30px));padding-top:var(--label-height)}.dcx-form-input.dcx-floating-label .dcx-wrapper-label{flex:2 1 auto;height:var(--input-height);position:relative;width:100%;z-index:1}.dcx-form-input.dcx-floating-label label{background:var(--dcx-color-background-formcontrol_label-floating,#fff);bottom:auto;color:var(--dcx-color-text-formcontrol_label-floating,#000);font-size:var(--dcx-font-size-formcontrol_label-floating,16px);line-height:var(--label-height);margin-left:var(--dcx-spacing-x-formcontrol-floating,15px);margin-right:var(--dcx-spacing-x-formcontrol-floating,15px);position:absolute;top:calc(var(--input-height)/2 - var(--label-height)/2);transition:all .3s ease-in-out;z-index:-1}.dcx-form-input.dcx-floating-label input{background:var(--dcx-color-background-formcontrol-floating,transparent);border-radius:var(--dcx-border-radius-formcontrol-floating,4px);color:transparent;font-size:var(--dcx-font-formcontrol-size-floating,16px);height:var(--input-height);padding-left:var(--dcx-spacing-x-formcontrol-floating,15px);padding-right:var(--dcx-spacing-x-formcontrol-floating,15px);transition:all .2s ease-in-out;width:100%}.dcx-form-input.dcx-floating-label:has(.dcx-form-input__suffix) input{border-bottom-right-radius:0;border-top-right-radius:0}.dcx-form-input.dcx-floating-label:has(.dcx-form-input__prefix) input{border-bottom-left-radius:0;border-top-left-radius:0}.dcx-form-input.dcx-floating-label:after{border-radius:var(--dcx-border-radius-formcontrol-floating,4px);border-style:solid;border-width:var(--dcx-border-width-formcontrol,1px);bottom:0;box-sizing:border-box;content:"";display:block;height:var(--input-height);position:absolute;right:0;width:100%}.dcx-form-input.dcx-floating-label .dcx-form-input__suffix{border-bottom-right-radius:var(--dcx-border-radius-formcontrol-floating,4px);border-top-right-radius:var(--dcx-border-radius-formcontrol-floating,4px)}.dcx-form-input.dcx-floating-label .dcx-form-input__prefix{border-bottom-left-radius:var(--dcx-border-radius-formcontrol-floating,4px);border-top-left-radius:var(--dcx-border-radius-formcontrol-floating,4px)}.dcx-form-input.dcx-floating-label:has(.dcx-hint):after{bottom:var(--dcx-font-formcontrol_hint-line-height-floating,18px)}.dcx-form-input.dcx-floating-label.dcx-form-input--error:has(.dcx-hint):after{bottom:calc(var(--dcx-font-formcontrol_error-line-height-floating, 18px) + var(--dcx-font-formcontrol_hint-line-height-floating, 18px))}.dcx-form-input.dcx-floating-label.dcx-form-input--error:after{bottom:var(--dcx-font-formcontrol_error-line-height-floating,18px)}.dcx-form-input.dcx-floating-label .dcx-error-message,.dcx-form-input.dcx-floating-label .dcx-hint{order:2}.dcx-form-input.dcx-floating-label .dcx-hint{color:var(--dcx-color-text-formcontrol_hint-floating,#666);font-size:var(--dcx-font-formcontrol_hint-size-floating,13px);line-height:var(--dcx-font-formcontrol_hint-line-height-floating,18px);padding-left:var(--dcx-spacing-x-formcontrol-floating,15px)}.dcx-form-input.dcx-floating-label .dcx-error-message{color:var(--dcx-color-text-formcontrol_error-floating,#f44336);font-size:var(--dcx-font-formcontrol_error-size-floating,13px);line-height:var(--dcx-font-formcontrol_error-line-height-floating,18px);padding-left:var(--dcx-spacing-x-formcontrol-floating,15px)}.dcx-form-input.dcx-floating-label.dcx-form-input--error .dcx-form-input__prefix,.dcx-form-input.dcx-floating-label.dcx-form-input--error .dcx-form-input__suffix{border-color:var(--dcx-color-text-formcontrol_error-floating,#f44336)}.dcx-form-input.dcx-floating-label:has(input:focus) .dcx-form-input__prefix,.dcx-form-input.dcx-floating-label:has(input:focus) .dcx-form-input__suffix,.dcx-form-input.dcx-floating-label:has(input:focus):after{border-color:var(--dcx-color-outline-formcontrol,#3f51b5)}:is(.dcx-form-input--filled.dcx-floating-label,.dcx-floating-label:has(input:focus),.dcx-floating-label.dcx-form-input--placeholder:has(input:not(:placeholder-shown))) input{color:var(--dcx-color-text-formcontrol-floating,#000)}:is(.dcx-form-input--filled.dcx-floating-label,.dcx-floating-label:has(input:focus),.dcx-floating-label.dcx-form-input--placeholder:has(input:not(:placeholder-shown))) label{color:var(--dcx-color-outline-formcontrol,#3f51b5);left:0;margin-left:var(--dcx-spacing-x-formcontrol-floating,15px);margin-right:var(--dcx-spacing-x-formcontrol-floating,15px);top:calc((var(--label-height)/2)*-1);z-index:2}.dcx-form-input--error:is(.dcx-form-input--filled.dcx-floating-label,.dcx-floating-label:has(input:focus),.dcx-floating-label.dcx-form-input--placeholder:has(input:not(:placeholder-shown))) label{color:var(--dcx-color-text-formcontrol_error-floating,#f44336)}.dcx-floating-label:has(input:focus):after{border-width:calc(var(--dcx-border-width-formcontrol-floating, 1px)*2)}.dcx-floating-label.dcx-form-input--error:has(input:focus) label{color:var(--dcx-color-text-formcontrol_error-floating,#f44336)}.dcx-floating-label.dcx-form-input--error:has(input:focus) .dcx-form-input__prefix,.dcx-floating-label.dcx-form-input--error:has(input:focus) .dcx-form-input__suffix{border-color:var(--dcx-color-text-formcontrol_error-floating,#f44336)}.dcx-floating-label.dcx-form-input--error:has(input:focus):after{border-color:var(--dcx-color-text-formcontrol_error-floating,#f44336)}.dcx-form-input.dcx-floating-label.dcx-floating-label-filled label{background-color:transparent;transition:all .3s ease-in-out}.dcx-form-input.dcx-floating-label.dcx-floating-label-filled:after{background-color:var(--dcx-color-background-formcontrol_label-floating-filled,#f5f5f5);border:none;border-bottom:var(--dcx-border-width-formcontrol,1px) solid var(--dcx-border-color-formcontrol,#000);border-radius:0;border-top-left-radius:var(--dcx-border-radius-formcontrol-floating,4px);border-top-right-radius:var(--dcx-border-radius-formcontrol-floating,4px);box-sizing:border-box;content:"";display:block;position:absolute}.dcx-form-input.dcx-floating-label.dcx-floating-label-filled .dcx-form-input__prefix,.dcx-form-input.dcx-floating-label.dcx-floating-label-filled .dcx-form-input__suffix{border:none;border-bottom:solid var(--dcx-border-color-formcontrol,#000);border-bottom-left-radius:0;border-bottom-right-radius:0;box-sizing:border-box;z-index:4}.dcx-form-input.dcx-floating-label.dcx-floating-label-filled .dcx-form-input__prefix{border-bottom-width:var(--dcx-border-width-formcontrol_prefix,1px)}.dcx-form-input.dcx-floating-label.dcx-floating-label-filled .dcx-form-input__suffix{border-bottom-width:var(--dcx-border-width-formcontrol_suffix,1px)}:is(.dcx-form-input--filled.dcx-floating-label-filled,.dcx-floating-label.dcx-floating-label-filled:has(input:focus),.dcx-floating-label.dcx-form-input--placeholder.dcx-floating-label-filled:has(input:not(:placeholder-shown))) label{margin-left:calc(var(--dcx-spacing-x-formcontrol-floating, 15px)/2);top:0;transform:scale(.8);z-index:2}.dcx-form-input--error:is(.dcx-form-input--filled.dcx-floating-label-filled,.dcx-floating-label.dcx-floating-label-filled:has(input:focus),.dcx-floating-label.dcx-form-input--placeholder.dcx-floating-label-filled:has(input:not(:placeholder-shown))):after{border-color:var(--dcx-color-text-formcontrol_error-floating,#f44336)}.dcx-form-input--error:is(.dcx-form-input--filled.dcx-floating-label-filled,.dcx-floating-label.dcx-floating-label-filled:has(input:focus),.dcx-floating-label.dcx-form-input--placeholder.dcx-floating-label-filled:has(input:not(:placeholder-shown))) .dcx-form-input__prefix,.dcx-form-input--error:is(.dcx-form-input--filled.dcx-floating-label-filled,.dcx-floating-label.dcx-floating-label-filled:has(input:focus),.dcx-floating-label.dcx-form-input--placeholder.dcx-floating-label-filled:has(input:not(:placeholder-shown))) .dcx-form-input__suffix{border-color:var(--dcx-color-text-formcontrol_error-floating,#f44336)}.dcx-form-input--error:is(.dcx-form-input--filled.dcx-floating-label-filled,.dcx-floating-label.dcx-floating-label-filled:has(input:focus),.dcx-floating-label.dcx-form-input--placeholder.dcx-floating-label-filled:has(input:not(:placeholder-shown))) .dcx-form-input__prefix:after,.dcx-form-input--error:is(.dcx-form-input--filled.dcx-floating-label-filled,.dcx-floating-label.dcx-floating-label-filled:has(input:focus),.dcx-floating-label.dcx-form-input--placeholder.dcx-floating-label-filled:has(input:not(:placeholder-shown))) .dcx-form-input__suffix:after{background-color:var(--dcx-color-text-formcontrol_error-floating,#f44336)}.dcx-floating-label.dcx-floating-label-filled:has(input:focus):after{border-bottom-width:calc(var(--dcx-border-width-formcontrol-floating, 1px)*2)}.dcx-floating-label.dcx-floating-label-filled:has(input:focus) .dcx-form-input__prefix,.dcx-floating-label.dcx-floating-label-filled:has(input:focus) .dcx-form-input__suffix{position:relative}.dcx-floating-label.dcx-floating-label-filled:has(input:focus) .dcx-form-input__prefix:after,.dcx-floating-label.dcx-floating-label-filled:has(input:focus) .dcx-form-input__suffix:after{background-color:var(--dcx-color-outline-formcontrol,#3f51b5);bottom:0;content:"";position:absolute;width:100%}.dcx-floating-label.dcx-floating-label-filled:has(input:focus) .dcx-form-input__suffix:after{height:var(--dcx-border-width-formcontrol_suffix,1px)}.dcx-floating-label.dcx-floating-label-filled:has(input:focus) .dcx-form-input__prefix:after{height:var(--dcx-border-width-formcontrol_prefix,1px)}