@start-base/react-form-elements/PasswordInput/styles.css

Simplify form elements and form management. Selection of user friendly inputs and wide customization abilities to match your design and functionality.

.SUI-Input-module-root-Jh-4e{margin-bottom:var(--rfe-spacing)}.SUI-Input-module-inputRoot-Ug822{position:relative}.SUI-Input-module-label-fpxAl{color:var(--rfe-color);cursor:text;font-size:var(--rfe-font-size);left:16px;line-height:1;margin-bottom:0;position:absolute;top:-2px;transform:translateY(calc((var(--rfe-input-height) - 14px)/2));transition:all .25s}.SUI-Input-module-label-fpxAl.SUI-Input-module-disableShrink-VTup6{color:var(--rfe-color);display:block;margin-bottom:var(--rfe-label-spacing);position:static;transform:none}.SUI-Input-module-prepend-PTtkE~.SUI-Input-module-placeholder-RxhY2{padding:24px 16px 0 60px!important}.SUI-Input-module-placeholder-RxhY2{padding:19px 16px 0!important}.SUI-Input-module-labelPlaceholder-03rs3{font-size:var(--rfe-focused-font-size);top:0;transform:translateY(9px)}.SUI-Input-module-input-SMgjS{background:var(--rfe-background);border:1px solid var(--rfe-border);border-radius:var(--rfe-border-radius);color:var(--rfe-color);font-family:var(--rfe-font-family);height:var(--rfe-input-height);line-height:24px;padding:19px 16px 0;transition:all .25s;width:100%}.SUI-Input-module-input-SMgjS:focus{box-shadow:var(--rfe-focus)}.SUI-Input-module-input-SMgjS::placeholder{color:var(--rfe-color-placeholder);font-size:var(--rfe-placeholder-font-size)}.SUI-Input-module-input-SMgjS:-webkit-autofill:not(.SUI-Input-module-disableShrink-VTup6)~.SUI-Input-module-label-fpxAl,.SUI-Input-module-input-SMgjS:focus:not(.SUI-Input-module-disableShrink-VTup6)~.SUI-Input-module-label-fpxAl,.SUI-Input-module-input-SMgjS:not([value=""],.SUI-Input-module-disableShrink-VTup6)~.SUI-Input-module-label-fpxAl{font-size:var(--rfe-focused-font-size);transform:translateY(9px)}.SUI-Input-module-input-SMgjS.SUI-Input-module-disableShrink-VTup6{padding:16px}.SUI-Input-module-disabledLabel-hKDBK{cursor:not-allowed;pointer-events:none}.SUI-Input-module-append-TNa8b,.SUI-Input-module-prepend-PTtkE{align-items:center;color:var(--rfe-color);display:flex;justify-content:center;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%)}.SUI-Input-module-prepend-PTtkE{border-right:1px solid var(--rfe-border);font-size:var(--rfe-placeholder-font-size);height:var(--rfe-input-height);left:16px;line-height:16px;padding-right:13px}.SUI-Input-module-prepend-PTtkE~.SUI-Input-module-label-fpxAl{left:62px}.SUI-Input-module-prepend-PTtkE~.SUI-Input-module-input-SMgjS{padding:20px 16px 0 60px!important}.SUI-Input-module-prepend-PTtkE~.SUI-Input-module-input-SMgjS.SUI-Input-module-disableShrink-VTup6{padding:16px 16px 16px 60px!important}.SUI-Input-module-append-TNa8b{height:56px;min-width:36px;right:0}.SUI-Input-module-append-TNa8b~.SUI-Input-module-input-SMgjS{padding:19px 56px 0 16px}.SUI-Input-module-append-TNa8b~.SUI-Input-module-input-SMgjS.SUI-Input-module-disableShrink-VTup6{padding:0 50px 0 16px}.SUI-Input-module-appendDisabledShrink-ULDV8,.SUI-Input-module-prependDisabledShrink-5DxUo{top:26px;transform:none}.SUI-Input-module-errorLabel-Qp8cB{color:var(--rfe-color-error);font-size:var(--rfe-error-font-size);margin-top:var(--rfe-label-spacing);pointer-events:none}.SUI-Input-module-inputError-EeFMs{border-color:var(--rfe-color-error)!important}.SUI-Input-module-disabled--Ng0A{background:var(--rfe-background-disabled);color:var(--rfe-color);cursor:not-allowed;opacity:1}.SUI-PasswordInput-module-toggle-8EyjV{align-items:center;background:none;border:0;cursor:pointer;display:flex;justify-content:center;pointer-events:all}.SUI-PasswordInput-module-iconEye-oM3Hj{color:var(--rfe-color);padding:16px 0}.SUI-PasswordInput-module-eyeOpen-87-pd button:after{content:"Close"}.SUI-PasswordInput-module-eyeClose-pq-bC button:after{content:"Open"}.SUI-PasswordInput-module-eye-verXZ{--duration-blink:0.2s;--duration-lashes:0.2s;--delay-lashes:var(--duration-blink);--duration-pupil:0.1s;--delay-pupil:calc(var(--duration-blink)*2/3)}.SUI-PasswordInput-module-eyeBottom-AS2w1,.SUI-PasswordInput-module-eyeTop-qt-jI{stroke-linecap:round}.SUI-PasswordInput-module-eyeLashes-UeFnm,.SUI-PasswordInput-module-eyeTop-qt-jI{transition:var(--duration-blink) ease-in}.SUI-PasswordInput-module-eyePupil-TawFz{opacity:0;transition:opacity var(--duration-pupil) var(--delay-pupil) ease}.SUI-PasswordInput-module-eyeOpen-87-pd .SUI-PasswordInput-module-eyeLashes-UeFnm,.SUI-PasswordInput-module-eyeOpen-87-pd .SUI-PasswordInput-module-eyeTop-qt-jI{animation:SUI-PasswordInput-module-scale-up-GxGbE var(--duration-lashes) var(--delay-lashes) ease-in-out;transform:rotateX(.5turn)}.SUI-PasswordInput-module-eyeOpen-87-pd .SUI-PasswordInput-module-eyePupil-TawFz{opacity:1}.SUI-PasswordInput-module-eyeClose-pq-bC .SUI-PasswordInput-module-eyeLashes-UeFnm{animation:SUI-PasswordInput-module-scale-down-PELkW var(--duration-lashes) var(--duration-blink) ease-in-out}.SUI-PasswordInput-module-eyeClose-pq-bC .SUI-PasswordInput-module-eyePupil-TawFz{opacity:0}@keyframes SUI-PasswordInput-module-scale-up-GxGbE{50%{transform:rotateX(.5turn) scaleY(1.15)}to{transform:rotateX(.5turn) scaleY(1)}}@keyframes SUI-PasswordInput-module-scale-down-PELkW{50%{transform:scaleY(1.15)}to{transform:scaleY(1)}}