@ozen-ui/kit
Version:
React component library
61 lines (60 loc) • 2.01 kB
CSS
/* stylelint-disable */
.InputOTP-Field {
position: relative;
}
.InputOTP-Field_notAvailable {
pointer-events: none;
}
.InputOTP .FieldControl_error:not(.FieldControl_disabled) {
--textfield-color: var(--color-content-error);
--textfield-background-color: var(--color-background-primary);
}
.InputOTP:not(.InputOTP_disabled) .InputOTP-InputContainer {
cursor: pointer;
}
.InputOTP_size_s {
--otp-input-inline-size: 40px;
}
.InputOTP_size_s .InputOTP-Input {
font: var(--typography-text-s-font);
letter-spacing: var(--typography-text-s-letter_spacing, 0);
text-transform: var(--typography-text-s-text_transform, none);
}
.InputOTP_size_m {
--otp-input-inline-size: 44px;
}
.InputOTP_size_m .InputOTP-Input {
font: var(--typography-text-l-font);
letter-spacing: var(--typography-text-l-letter_spacing, 0);
text-transform: var(--typography-text-l-text_transform, none);
}
.InputOTP-Input {
box-sizing: border-box;
padding: var(--textfield-input-padding);
background-color: var(--textfield-background-color);
transition: background-color box-shadow var(--transition-slow);
color: var(--textfield-color);
border-radius: var(--textfield-border-radius);
block-size: var(--textfield-input-height);
text-align: center;
border: none;
outline: none;
display: block;
inline-size: var(--otp-input-inline-size);
}
.InputOTP-Input:-webkit-autofill,
.InputOTP-Input:-webkit-autofill:hover,
.InputOTP-Input:-webkit-autofill:focus {
box-shadow: 0 0 0 1000px var(--textfield-background-color) inset ;
background-color: transparent ;
-webkit-text-fill-color: var(--textfield-color);
}
.InputOTP-Input::-webkit-outer-spin-button,
.InputOTP-Input::-webkit-inner-spin-button {
-webkit-appearance: none;
appearance: none;
margin: 0;
}
.InputOTP-Input:disabled {
opacity: 1;
}