143 lines
4.0 KiB
CSS
143 lines
4.0 KiB
CSS
|
.v-input {
|
||
|
display: grid;
|
||
|
flex: 1 1 auto;
|
||
|
font-size: 1rem;
|
||
|
font-weight: 400;
|
||
|
line-height: 1.5;
|
||
|
}
|
||
|
.v-input--disabled {
|
||
|
pointer-events: none;
|
||
|
}
|
||
|
.v-input--density-default {
|
||
|
--v-input-control-height: 56px;
|
||
|
--v-input-padding-top: 16px;
|
||
|
}
|
||
|
|
||
|
.v-input--density-comfortable {
|
||
|
--v-input-control-height: 48px;
|
||
|
--v-input-padding-top: 12px;
|
||
|
}
|
||
|
|
||
|
.v-input--density-compact {
|
||
|
--v-input-control-height: 40px;
|
||
|
--v-input-padding-top: 8px;
|
||
|
}
|
||
|
|
||
|
.v-input--vertical {
|
||
|
grid-template-areas: "append" "control" "prepend";
|
||
|
grid-template-rows: max-content auto max-content;
|
||
|
grid-template-columns: min-content;
|
||
|
}
|
||
|
.v-input--vertical .v-input__prepend {
|
||
|
margin-block-start: 16px;
|
||
|
}
|
||
|
.v-input--vertical .v-input__append {
|
||
|
margin-block-end: 16px;
|
||
|
}
|
||
|
|
||
|
.v-input--horizontal {
|
||
|
grid-template-areas: "prepend control append" "a messages b";
|
||
|
grid-template-columns: max-content minmax(0, 1fr) max-content;
|
||
|
grid-template-rows: auto auto;
|
||
|
}
|
||
|
.v-input--horizontal .v-input__prepend {
|
||
|
margin-inline-end: 16px;
|
||
|
}
|
||
|
.v-input--horizontal .v-input__append {
|
||
|
margin-inline-start: 16px;
|
||
|
}
|
||
|
|
||
|
.v-input__details {
|
||
|
align-items: flex-end;
|
||
|
display: flex;
|
||
|
font-size: 0.75rem;
|
||
|
font-weight: 400;
|
||
|
grid-area: messages;
|
||
|
letter-spacing: 0.0333333333em;
|
||
|
line-height: normal;
|
||
|
min-height: 22px;
|
||
|
padding-top: 6px;
|
||
|
overflow: hidden;
|
||
|
justify-content: space-between;
|
||
|
}
|
||
|
|
||
|
.v-input__details > .v-icon,
|
||
|
.v-input__prepend > .v-icon,
|
||
|
.v-input__append > .v-icon {
|
||
|
opacity: var(--v-medium-emphasis-opacity);
|
||
|
}
|
||
|
.v-input--disabled .v-input__details > .v-icon,
|
||
|
.v-input--disabled .v-input__details .v-messages, .v-input--error .v-input__details > .v-icon,
|
||
|
.v-input--error .v-input__details .v-messages,
|
||
|
.v-input--disabled .v-input__prepend > .v-icon,
|
||
|
.v-input--disabled .v-input__prepend .v-messages,
|
||
|
.v-input--error .v-input__prepend > .v-icon,
|
||
|
.v-input--error .v-input__prepend .v-messages,
|
||
|
.v-input--disabled .v-input__append > .v-icon,
|
||
|
.v-input--disabled .v-input__append .v-messages,
|
||
|
.v-input--error .v-input__append > .v-icon,
|
||
|
.v-input--error .v-input__append .v-messages {
|
||
|
opacity: 1;
|
||
|
}
|
||
|
.v-input--disabled .v-input__details,
|
||
|
.v-input--disabled .v-input__prepend,
|
||
|
.v-input--disabled .v-input__append {
|
||
|
opacity: var(--v-disabled-opacity);
|
||
|
}
|
||
|
.v-input--error:not(.v-input--disabled) .v-input__details > .v-icon,
|
||
|
.v-input--error:not(.v-input--disabled) .v-input__details .v-messages,
|
||
|
.v-input--error:not(.v-input--disabled) .v-input__prepend > .v-icon,
|
||
|
.v-input--error:not(.v-input--disabled) .v-input__prepend .v-messages,
|
||
|
.v-input--error:not(.v-input--disabled) .v-input__append > .v-icon,
|
||
|
.v-input--error:not(.v-input--disabled) .v-input__append .v-messages {
|
||
|
color: rgb(var(--v-theme-error));
|
||
|
}
|
||
|
|
||
|
.v-input__prepend,
|
||
|
.v-input__append {
|
||
|
display: flex;
|
||
|
align-items: flex-start;
|
||
|
padding-top: var(--v-input-padding-top);
|
||
|
}
|
||
|
.v-input--center-affix .v-input__prepend,
|
||
|
.v-input--center-affix .v-input__append {
|
||
|
align-items: center;
|
||
|
padding-top: 0;
|
||
|
}
|
||
|
|
||
|
.v-input__prepend {
|
||
|
grid-area: prepend;
|
||
|
}
|
||
|
|
||
|
.v-input__append {
|
||
|
grid-area: append;
|
||
|
}
|
||
|
|
||
|
.v-input__control {
|
||
|
display: flex;
|
||
|
grid-area: control;
|
||
|
}
|
||
|
|
||
|
.v-input--hide-spin-buttons input::-webkit-outer-spin-button,
|
||
|
.v-input--hide-spin-buttons input::-webkit-inner-spin-button {
|
||
|
-webkit-appearance: none;
|
||
|
margin: 0;
|
||
|
}
|
||
|
.v-input--hide-spin-buttons input[type=number] {
|
||
|
-moz-appearance: textfield;
|
||
|
}
|
||
|
.v-input--plain-underlined .v-input__prepend,
|
||
|
.v-input--plain-underlined .v-input__append {
|
||
|
align-items: flex-start;
|
||
|
}
|
||
|
.v-input--density-default.v-input--plain-underlined .v-input__prepend, .v-input--density-default.v-input--plain-underlined .v-input__append {
|
||
|
padding-top: calc(var(--v-input-padding-top) + 4px);
|
||
|
}
|
||
|
|
||
|
.v-input--density-comfortable.v-input--plain-underlined .v-input__prepend, .v-input--density-comfortable.v-input--plain-underlined .v-input__append {
|
||
|
padding-top: calc(var(--v-input-padding-top) + 2px);
|
||
|
}
|
||
|
|
||
|
.v-input--density-compact.v-input--plain-underlined .v-input__prepend, .v-input--density-compact.v-input--plain-underlined .v-input__append {
|
||
|
padding-top: calc(var(--v-input-padding-top) + 0px);
|
||
|
}
|