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

Beta Parity React Components

input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}input[type=date]{-webkit-appearance:none;-moz-appearance:textfield}input[type=date]::-webkit-date-and-time-value{text-align:left}.contained-label+input[type=date]::-webkit-date-and-time-value{padding-top:1.125rem;text-align:left}input[type=search]::-ms-clear,input[type=search]::-ms-reveal{display:none;height:0;width:0}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}input[type=search].rounded-md{-webkit-appearance:none;border-radius:.375rem}.value-input-wrapper,input,textarea{font-size:1rem}.value-input-wrapper,input.par-input,textarea.par-input{border-radius:.375rem;border-width:1px;font-family:IBM Plex Sans,Helvetica Neue,Arial,sans-serif;font-size:1rem;font-weight:400;height:2.5rem;line-height:1.375rem;outline-offset:-2px;padding-left:.75rem;padding-right:.75rem;text-overflow:ellipsis;width:100%}input[type=search]
.value-input-wrapper,input[type=search]
textarea.par-input,input[type=search]input.par-input{-webkit-appearance:none;border-radius:.375rem}.value-input-wrapper.medium,input.par-input.medium,textarea.par-input.medium{height:3rem}input.par-input:disabled,textarea.par-input:disabled{cursor:not-allowed}fieldset:disabled{pointer-events:none}.value-input-wrapper{cursor:pointer}.input-wrapper{border-radius:.375rem;height:-moz-min-content;height:min-content;position:relative;width:100%}input[type=search].input-wrapper{-webkit-appearance:none;border-radius:.375rem}.input-wrapper:has([aria-disabled=true]),.input-wrapper:has(input[disabled]),.input-wrapper:has(select[disabled]),.input-wrapper:has(textarea[disabled]){cursor:not-allowed}.input-action .value-input-wrapper,.input-action input.par-input{padding-left:1rem;padding-right:2.5rem}.input-actions .value-input-wrapper,.input-actions input.par-input{padding-left:1rem;padding-right:5rem}.right-element-container{border-end-end-radius:.375rem;border-start-end-radius:.375rem;right:0}.left-element-container,.right-element-container{display:flex;height:100%;position:absolute;top:50%;--tw-translate-y:-50%;align-items:center;gap:.5rem;justify-content:center;padding:.625rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.left-element-container{border-end-start-radius:.375rem;border-start-start-radius:.375rem;left:0}.left-element-container~.flatpickr-wrapper input.par-input,.left-element-container~.value-input-wrapper,.left-element-container~input.par-input{padding-left:2.5rem}.par-input-action-btn{pointer-events:auto;-webkit-user-select:none;-moz-user-select:none;user-select:none}.left-element-container .input-icon,.left-element-container button,.par-input-action-btn,.right-element-container .input-icon,.right-element-container button{align-items:center;border-radius:9999px;display:flex;justify-content:center;padding:.125rem;transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.left-element-container .input-icon.square-icon,.left-element-container button.square-icon,.par-input-action-btn.square-icon,.right-element-container .input-icon.square-icon,.right-element-container button.square-icon{border-radius:.375rem;display:block;height:1.25rem;margin:0;min-height:0;min-width:0;padding:.125rem;width:1.25rem}input[type=search]
.left-element-container .input-icon.square-icon,input[type=search]
.left-element-container button.square-icon,input[type=search]
.par-input-action-btn.square-icon,input[type=search]
.right-element-container .input-icon.square-icon,input[type=search].right-element-container button.square-icon{-webkit-appearance:none;border-radius:.375rem}.left-element-container button:disabled,.par-input-action-btn:disabled,.right-element-container button:disabled{cursor:not-allowed}.input-wrapper:has(.input-error-message){margin-bottom:1.75rem}.input-wrapper .input-error-message{color:var(--par-color-text-helper-adverse);font-family:IBM Plex Sans,Helvetica Neue,Arial,sans-serif;font-size:.875rem;font-weight:400;left:0;letter-spacing:.01rem;line-height:1.125rem;position:absolute;top:calc(100% + .25rem)}.input-icon.input-unit{min-width:1.25rem}.input-unit:not(.selectable)>select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:initial;background-color:transparent;border:initial;border-radius:.375rem;color:inherit;height:1.5rem;max-width:-moz-min-content;max-width:min-content;outline:2px solid transparent;outline-offset:2px;padding-left:0;padding-right:0;pointer-events:none;text-align:right;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:-moz-fit-content;width:fit-content}input[type=search].input-unit:not(.selectable)>select{-webkit-appearance:none;border-radius:.375rem}.input-unit.selectable>select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:initial;background-color:transparent;border:initial;border-radius:.375rem;color:inherit;height:1.5rem;max-width:-moz-min-content;max-width:min-content;padding-left:.25rem;padding-right:1.25rem;text-align:right;width:-moz-fit-content;width:fit-content}input[type=search].input-unit.selectable>select{-webkit-appearance:none;border-radius:.375rem}.input-unit.selectable>select>option{padding-left:1rem;padding-right:1rem;--tw-text-opacity:1;color:rgb(22 22 22/var(--tw-text-opacity))}.input-unit.selectable{border-radius:.375rem;height:1.5rem;padding-bottom:0;padding-top:0;position:relative}input[type=search].input-unit.selectable{-webkit-appearance:none;border-radius:.375rem}.input-unit.selectable .unit-selector-arrow{align-items:center;display:flex;height:100%;justify-content:center;pointer-events:none;position:absolute;right:.125rem;top:0;width:1rem}.input-unit:has(select:disabled) .unit-selector-arrow{color:var(--par-color-text-field-disabled)}.input-unit.selectable>select.alternative:disabled,.input-unit.selectable>select:disabled{background-color:transparent;color:var(--par-color-text-surface-item-disabled);cursor:not-allowed}input.par-input::-moz-placeholder,textarea.par-input::-moz-placeholder{color:var(--par-color-text-field-placeholder);opacity:1}input.par-input::placeholder,textarea.par-input::placeholder{color:var(--par-color-text-field-placeholder);opacity:1}input.par-input.alternative::-moz-placeholder,textarea.par-input.alternative::-moz-placeholder{color:var(--par-color-text-field-alternative-placeholder);opacity:1}input.par-input.alternative::placeholder,textarea.par-input.alternative::placeholder{color:var(--par-color-text-field-alternative-placeholder);opacity:1}input.par-input:disabled::-moz-placeholder,textarea.par-input:disabled::-moz-placeholder{color:var(--par-color-text-field-alpha-placeholder);opacity:1}input.par-input:disabled::placeholder,textarea.par-input:disabled::placeholder{color:var(--par-color-text-field-alpha-placeholder);opacity:1}.value-input-wrapper,input.par-input,textarea.par-input{background-color:var(--par-color-bg-field-enabled);border-color:var(--par-color-border-field-enabled);color:var(--par-color-text-field-filled)}.value-input-wrapper.alternative,input.par-input.alternative,textarea.par-input.alternative{background-color:var(--par-color-bg-field-alternative-enabled);border-color:var(--par-color-border-field-enabled);color:var(--par-color-text-field-filled)}input.par-input:disabled,textarea.par-input:disabled{background-color:var(--par-color-bg-field-disabled);border-color:var(--par-color-border-field-disabled);color:var(--par-color-text-field-disabled)}input.par-input.alternative:disabled,textarea.par-input.alternative:disabled{background-color:var(--par-color-bg-field-alternative-disabled)}input.par-input[readonly]:not([data-readonly=not-allowed-input]),textarea.par-input[readonly]:not([data-readonly=not-allowed-input]){background-color:var(--par-color-bg-field-readonly);border-color:var(--par-color-border-field-readonly);color:var(--par-color-text-field-readonly)}input.par-input.error-state,textarea.par-input.error-state{background-color:var(--par-color-bg-field-invalid)!important;border-color:var(--par-color-border-field-invalid)!important;border-width:2px!important;color:var(--par-color-text-field-invalid)!important}.left-element-container button,.par-input-action-btn,.right-element-container button{background-color:var(--par-color-bg-field-button-enabled);color:var(--par-color-icon-field-button-enabled)}.left-element-container .input-icon,.right-element-container .input-icon{color:var(--par-color-text-field-placeholder)}.left-element-container button:hover,.par-input-action-btn:hover,.right-element-container button:hover{background-color:var(--par-color-bg-field-button-hovered);color:var(--par-color-icon-field-button-hovered)}.left-element-container button:active .par-input-action-btn:active,.right-element-container button:active{background-color:var(--par-color-bg-field-button-pressed);color:var(--par-color-icon-field-button-pressed)}.left-element-container button:disabled,.par-input-action-btn:disabled,.right-element-container button:disabled{background-color:var(--par-color-bg-field-button-disabled);color:var(--par-color-icon-field-button-disabled)}.input-wrapper:has([aria-disabled=true]) .input-icon,.input-wrapper:has(input[disabled]) .input-icon,.input-wrapper:has(textarea[disabled]) .input-icon{color:var(--par-color-text-field-alpha-placeholder)}.input-wrapper .input-divider{background-color:var(--par-color-border-field-enabled);border-style:none;display:inline-block;height:1.25rem;width:1px}