@syncfusion/react-inputs
Version:
Syncfusion React Input package is a feature-rich collection of UI components, including Textbox, Textarea, Numeric-textbox and Form, designed to capture user input in React applications.
420 lines • 14.5 kB
CSS
.sf-large.sf-input-group {
font-size: var(--sf-font-size-base);
line-height: var(--sf-line-height-base);
letter-spacing: var(--sf-letter-spacing-normal);
}
.sf-large.sf-input-group .sf-input {
padding: var(--sf-spacing-11) var(--sf-spacing-0);
}
.sf-large.sf-input-group .sf-float-text {
inset-block-start: calc(var(--sf-spacing) * -0.3125);
}
.sf-large.sf-input-group.sf-float-input:has(.sf-label-top) .sf-float-text {
transform: translate3d(0, calc(var(--sf-spacing) * -0.5625), 0);
}
.sf-large.sf-input-group.sf-has-prefix .sf-float-text {
inset-inline-start: var(--sf-spacing-40);
}
.sf-large.sf-input-group.sf-has-prefix:has(.sf-label-top) .sf-float-text {
transform: translate3d(0, calc(var(--sf-spacing) * -0.625), 0);
inset-inline-start: var(--sf-spacing-0);
}
.sf-large.sf-input-group .sf-input-icon {
padding: var(--sf-spacing-10);
}
.sf-large.sf-input-group .sf-input-icon svg {
font-size: var(--sf-font-size-xl);
}
.sf-large.sf-input-group.sf-outline .sf-input {
padding: var(--sf-spacing-11) var(--sf-spacing-16);
}
.sf-large.sf-input-group.sf-outline.sf-has-prefix .sf-input {
padding: var(--sf-spacing-11) var(--sf-spacing-0);
}
.sf-large.sf-input-group.sf-outline.sf-has-prefix .sf-float-text {
inset-inline-start: var(--sf-spacing-40);
}
.sf-large.sf-input-group.sf-outline.sf-has-prefix:has(.sf-label-top) .sf-float-text {
transform: translate3d(0, calc(var(--sf-spacing) * -0.125), 0);
inset-inline-start: var(--sf-spacing-12);
}
.sf-large.sf-input-group.sf-outline .sf-float-text {
inset-block-start: calc(var(--sf-spacing) * -0.3125);
}
.sf-large.sf-input-group.sf-outline.sf-float-input:has(.sf-label-top) .sf-float-text {
transform: translate3d(0, calc(var(--sf-spacing) * -0.125), 0);
}
.sf-large.sf-input-group.sf-filled {
line-height: var(--sf-line-height-base);
font-size: var(--sf-font-size-base);
}
.sf-large.sf-input-group.sf-filled .sf-input {
padding: var(--sf-spacing-11) var(--sf-spacing-16);
}
.sf-large.sf-input-group.sf-filled.sf-float-input .sf-input {
padding: var(--sf-spacing-20) var(--sf-spacing-16) var(--sf-spacing-2) var(--sf-spacing-16);
}
.sf-large.sf-input-group.sf-filled .sf-float-text {
inset-block-start: calc(var(--sf-spacing) * -0.3125);
inset-inline-start: var(--sf-spacing-16);
}
.sf-large.sf-input-group.sf-filled.sf-has-prefix .sf-input {
padding: var(--sf-spacing-11) var(--sf-spacing-0);
}
.sf-large.sf-input-group.sf-filled.sf-has-prefix.sf-float-input .sf-input {
padding: var(--sf-spacing-20) var(--sf-spacing-0) var(--sf-spacing-2) var(--sf-spacing-0);
}
.sf-large.sf-input-group.sf-filled.sf-has-prefix .sf-float-text {
inset-inline-start: var(--sf-spacing-40);
}
.sf-large.sf-input-group.sf-filled:has(.sf-label-top) .sf-float-text {
transform: translate3d(0, var(--sf-spacing-8), 0);
}
.sf-medium.sf-input-group {
font-size: var(--sf-font-size-sm);
line-height: var(--sf-line-height-sm);
letter-spacing: var(--sf-letter-spacing-wider);
}
.sf-medium.sf-input-group .sf-input {
padding: var(--sf-spacing-9) var(--sf-spacing-0);
}
.sf-medium.sf-input-group .sf-float-text {
inset-block-start: calc(var(--sf-spacing) * -0.3125);
}
.sf-medium.sf-input-group.sf-float-input:has(.sf-label-top) .sf-float-text {
transform: translate3d(0, calc(var(--sf-spacing) * -0.5625), 0);
}
.sf-medium.sf-input-group.sf-has-prefix .sf-float-text {
inset-inline-start: var(--sf-spacing-40);
}
.sf-medium.sf-input-group.sf-has-prefix:has(.sf-label-top) .sf-float-text {
transform: translate3d(0, calc(var(--sf-spacing) * -0.625), 0);
inset-inline-start: var(--sf-spacing-0);
}
.sf-medium.sf-input-group .sf-input-icon {
padding: var(--sf-spacing-10);
}
.sf-medium.sf-input-group .sf-input-icon svg {
font-size: var(--sf-font-size-xl);
}
.sf-medium.sf-input-group.sf-outline .sf-input {
padding: var(--sf-spacing-9) var(--sf-spacing-16);
}
.sf-medium.sf-input-group.sf-outline.sf-has-prefix .sf-input {
padding: var(--sf-spacing-9) var(--sf-spacing-0);
}
.sf-medium.sf-input-group.sf-outline.sf-has-prefix .sf-float-text {
inset-inline-start: var(--sf-spacing-40);
}
.sf-medium.sf-input-group.sf-outline.sf-has-prefix:has(.sf-label-top) .sf-float-text {
transform: translate3d(0, calc(var(--sf-spacing) * -0.125), 0);
inset-inline-start: var(--sf-spacing-12);
}
.sf-medium.sf-input-group.sf-outline .sf-float-text {
inset-block-start: calc(var(--sf-spacing) * -0.4375);
}
.sf-medium.sf-input-group.sf-outline.sf-float-input:has(.sf-label-top) .sf-float-text {
transform: translate3d(0, calc(var(--sf-spacing) * -0.125), 0);
}
.sf-medium.sf-input-group.sf-filled {
line-height: var(--sf-line-height-sm);
font-size: var(--sf-font-size-sm);
}
.sf-medium.sf-input-group.sf-filled .sf-input {
padding: var(--sf-spacing-9) var(--sf-spacing-16);
}
.sf-medium.sf-input-group.sf-filled.sf-float-input .sf-input {
padding: calc(var(--sf-spacing) * 1.0625) var(--sf-spacing-16) var(--sf-spacing-1) var(--sf-spacing-16);
}
.sf-medium.sf-input-group.sf-filled .sf-float-text {
inset-block-start: calc(var(--sf-spacing) * -0.4375);
inset-inline-start: var(--sf-spacing-16);
}
.sf-medium.sf-input-group.sf-filled.sf-has-prefix .sf-float-text {
inset-inline-start: var(--sf-spacing-40);
}
.sf-medium.sf-input-group.sf-filled:has(.sf-label-top) .sf-float-text {
transform: translate3d(0, var(--sf-spacing-7), 0);
}
.sf-input-group {
display: inline-flex;
align-items: center;
position: relative;
width: 100%;
font-size: var(--sf-font-size-sm);
line-height: var(--sf-line-height-sm);
vertical-align: middle;
border-width: 1px 0;
border-style: solid;
margin-bottom: var(--sf-spacing-4);
overflow-inline: clip;
}
.sf-input-group .sf-input-icon {
display: flex;
cursor: pointer;
flex-direction: column;
justify-content: center;
align-content: center;
flex-wrap: wrap;
text-align: center;
font-size: var(--sf-font-size-xl);
padding: var(--sf-spacing-8);
border-radius: var(--sf-radius-full);
margin-block: calc(var(--sf-spacing) * -0.0625);
position: relative;
border: none;
}
.sf-input-group .sf-clear-icon.sf-clear-icon-hide {
visibility: hidden;
}
.sf-input-group.sf-float-input {
margin-top: var(--sf-spacing-16);
}
.sf-input-group.sf-float-input:has(.sf-label-top) .sf-float-text {
font-size: var(--sf-font-size-xs);
transform: translate3d(0, calc(var(--sf-spacing) * -0.3125), 0);
line-height: var(--sf-line-height-xs);
}
.sf-input-group .sf-float-text {
position: absolute;
overflow: hidden;
pointer-events: none;
text-overflow: ellipsis;
white-space: nowrap;
user-select: none;
line-height: inherit;
transform: translate3d(0, var(--sf-spacing-16), 0) scale(1);
transform-origin: left top;
transition: 0.25s ease-in-out;
inset-block-start: calc(var(--sf-spacing) * -0.6875);
letter-spacing: var(--sf-letter-spacing-wide);
}
.sf-input-group.sf-has-prefix .sf-float-text {
inset-inline-start: var(--sf-spacing-32);
}
.sf-input-group.sf-has-prefix:has(.sf-label-top) .sf-float-text {
transform: translate3d(0, calc(var(--sf-spacing) * -0.3125), 0);
inset-inline-start: var(--sf-spacing-0);
}
.sf-input-group::before, .sf-input-group::after {
content: "";
position: absolute;
bottom: var(--sf-spacing-0);
height: var(--sf-spacing-1);
width: var(--sf-spacing-0);
transition: 0.2s cubic-bezier(0.4, 0, 0.4, 1);
}
.sf-input-group::before {
left: 50%;
}
.sf-input-group::after {
right: 50%;
}
.sf-input-group.sf-input-focus::before, .sf-input-group.sf-input-focus::after {
width: 50%;
}
.sf-input-group.sf-outline {
border-width: 1px;
border-radius: var(--sf-radius-4);
transition: border 0.2s, box-shadow 0.2s;
}
.sf-input-group.sf-outline::before, .sf-input-group.sf-outline::after {
content: none;
}
.sf-input-group.sf-outline .sf-input {
padding: var(--sf-spacing-5) var(--sf-spacing-16);
}
.sf-input-group.sf-outline.sf-has-prefix .sf-input {
padding: var(--sf-spacing-5) var(--sf-spacing-0);
}
.sf-input-group.sf-outline.sf-has-prefix .sf-float-text {
inset-inline-start: var(--sf-spacing-32);
}
.sf-input-group.sf-outline .sf-float-text {
inset-inline-start: var(--sf-spacing-16);
background: rgb(var(--sf-color-surface));
}
.sf-input-group.sf-outline:has(.sf-label-top) .sf-float-text {
transform: translate3d(0, var(--sf-spacing-2), 0);
width: auto;
padding: var(--sf-spacing-0) var(--sf-spacing-4);
inset-inline-start: var(--sf-spacing-12);
}
.sf-input-group.sf-filled {
border-radius: var(--sf-radius-4) var(--sf-radius-4) var(--sf-radius-0) var(--sf-radius-0);
font-size: var(--sf-font-size-xs);
line-height: var(--sf-line-height-xs);
}
.sf-input-group.sf-filled .sf-input {
padding: var(--sf-spacing-7) var(--sf-spacing-12);
}
.sf-input-group.sf-filled.sf-has-prefix .sf-input {
padding: var(--sf-spacing-7) var(--sf-spacing-0);
}
.sf-input-group.sf-filled.sf-has-prefix.sf-float-input .sf-input {
padding: var(--sf-spacing-11) var(--sf-spacing-0) var(--sf-spacing-1) var(--sf-spacing-0);
}
.sf-input-group.sf-filled.sf-has-prefix .sf-float-text {
inset-inline-start: var(--sf-spacing-32);
}
.sf-input-group.sf-filled.sf-float-input .sf-input {
padding: var(--sf-spacing-13) var(--sf-spacing-12) var(--sf-spacing-1) var(--sf-spacing-12);
}
.sf-input-group.sf-filled .sf-float-text {
inset-block-start: calc(var(--sf-spacing) * -0.6875);
inset-inline-start: var(--sf-spacing-12);
}
.sf-input-group.sf-filled:has(.sf-label-top) .sf-float-text {
transform: translate3d(0, var(--sf-spacing-11), 0);
}
.sf-input {
width: 100%;
border: 0;
outline: none;
font: inherit;
line-height: inherit;
height: auto;
padding: var(--sf-spacing-5) var(--sf-spacing-0);
text-indent: 0;
letter-spacing: inherit;
}
.sf-form-label {
font-size: var(--sf-font-size-base);
line-height: var(--sf-line-height-xs);
}
.sf-form-error {
font-size: var(--sf-font-size-xs);
color: rgb(var(--sf-color-error));
}
.sf-input-group {
background: transparent;
color: rgb(var(--sf-color-on-surface));
border-bottom-color: rgb(var(--sf-color-outline));
border-top-color: transparent;
}
.sf-input-group:hover {
border-bottom-color: transparent transparent rgb(var(--sf-color-on-surface)) transparent;
}
.sf-input-group.sf-input-focus {
border-bottom-color: rgb(var(--sf-color-primary));
}
.sf-input-group.sf-success {
border-bottom-color: rgb(var(--sf-color-success));
}
.sf-input-group.sf-success .sf-float-text {
color: rgb(var(--sf-color-success));
}
.sf-input-group.sf-success::before, .sf-input-group.sf-success::after {
background: rgb(var(--sf-color-success));
}
.sf-input-group.sf-warning {
border-bottom-color: rgb(var(--sf-color-warning));
}
.sf-input-group.sf-warning .sf-float-text {
color: rgb(var(--sf-color-warning));
}
.sf-input-group.sf-warning::before, .sf-input-group.sf-warning::after {
background: rgb(var(--sf-color-warning));
}
.sf-input-group.sf-error {
border-bottom-color: rgb(var(--sf-color-error));
}
.sf-input-group.sf-error .sf-float-text {
color: rgb(var(--sf-color-error));
}
.sf-input-group.sf-error::before, .sf-input-group.sf-error::after {
background: rgb(var(--sf-color-error));
}
.sf-input-group .sf-input-icon {
background: transparent;
color: rgb(var(--sf-color-on-surface-variant));
}
.sf-input-group .sf-input-icon:not(.sf-no-hover):hover {
background: rgba(var(--sf-color-on-surface), 0.08);
color: rgb(var(--sf-color-on-surface-variant));
}
.sf-input-group .sf-input-icon:not(.sf-no-hover):active {
background: rgba(var(--sf-color-on-surface), 0.12);
color: rgb(var(--sf-color-on-surface));
}
.sf-input-group .sf-float-text {
color: rgb(var(--sf-color-outline));
}
.sf-input-group::before, .sf-input-group::after {
background: rgb(var(--sf-color-primary));
}
.sf-input-group.sf-outline {
border-color: rgb(var(--sf-color-outline));
}
.sf-input-group.sf-outline:hover {
border-color: rgb(var(--sf-color-on-surface));
}
.sf-input-group.sf-outline.sf-success {
border-color: rgb(var(--sf-color-success));
}
.sf-input-group.sf-outline.sf-warning {
border-color: rgb(var(--sf-color-warning));
}
.sf-input-group.sf-outline.sf-error {
border-color: rgb(var(--sf-color-error));
}
.sf-input-group.sf-outline.sf-input-focus {
border-color: rgb(var(--sf-color-primary));
box-shadow: inset 1px 1px rgb(var(--sf-color-primary)), inset -1px 0 rgb(var(--sf-color-primary)), inset 0 -1px rgb(var(--sf-color-primary));
}
.sf-input-group.sf-outline.sf-input-focus.sf-success {
border-color: rgb(var(--sf-color-success));
box-shadow: inset 1px 1px rgb(var(--sf-color-success)), inset -1px 0 rgb(var(--sf-color-success)), inset 0 -1px rgb(var(--sf-color-success));
}
.sf-input-group.sf-outline.sf-input-focus.sf-warning {
border-color: rgb(var(--sf-color-warning));
box-shadow: inset 1px 1px rgb(var(--sf-color-warning)), inset -1px 0 rgb(var(--sf-color-warning)), inset 0 -1px rgb(var(--sf-color-warning));
}
.sf-input-group.sf-outline.sf-input-focus.sf-error {
border-color: rgb(var(--sf-color-error));
box-shadow: inset 1px 1px rgb(var(--sf-color-error)), inset -1px 0 rgb(var(--sf-color-error)), inset 0 -1px rgb(var(--sf-color-error));
}
.sf-input-group.sf-filled {
background: rgb(var(--sf-color-surface-variant));
transition: opacity 15ms linear, background-color 15ms linear;
}
.sf-input {
background: none;
color: inherit;
}
.sf-input::selection {
background: rgb(var(--sf-color-primary));
color: rgb(var(--sf-color-on-primary));
}
.sf-input::placeholder {
color: rgb(var(--sf-color-outline));
user-select: none;
}
.sf-numeric.sf-input-group .sf-spin-icon svg {
font-size: var(--sf-font-size-base);
}
.sf-numeric.sf-input-group.sf-medium .sf-spin-icon svg, .sf-numeric.sf-input-group.sf-large .sf-spin-icon svg {
font-size: var(--sf-font-size-xl);
}
.sf-input-group.sf-multi-line-input {
align-items: flex-end;
}
.sf-input-group.sf-multi-line-input.sf-auto-width {
width: auto;
}
.sf-input-group.sf-multi-line-input .sf-input {
min-height: calc(var(--sf-spacing) * 4.375);
padding: var(--sf-spacing-11) var(--sf-spacing-0);
}
.sf-input-group.sf-multi-line-input.sf-outline .sf-input {
padding: var(--sf-spacing-11) var(--sf-spacing-16);
}
.sf-input-group.sf-multi-line-input.sf-outline:has(.sf-label-top) .sf-float-text {
transform: translate3d(0, calc(var(--sf-spacing) * -0.5), 0);
}
.sf-input-group.sf-multi-line-input.sf-filled .sf-input {
min-height: calc(var(--sf-spacing) * 4.625);
}
.sf-input-group.sf-multi-line-input .sf-clear-icon.sf-clear-icon-hide {
display: none;
}