Vulture/VApp/node_modules/vuetify/lib/components/VField/VField.css

550 lines
18 KiB
CSS

/* region INPUT */
.v-field {
display: grid;
grid-template-areas: "prepend-inner field clear append-inner";
grid-template-columns: min-content minmax(0, 1fr) min-content min-content;
font-size: 16px;
letter-spacing: 0.009375em;
max-width: 100%;
border-radius: 4px;
contain: layout;
flex: 1 0;
grid-area: control;
position: relative;
--v-field-padding-start: 16px;
--v-field-padding-end: 16px;
--v-field-padding-top: 8px;
--v-field-padding-bottom: 4px;
--v-field-input-padding-top: calc(var(--v-field-padding-top, 8px) + var(--v-input-padding-top, 0));
--v-field-input-padding-bottom: var(--v-field-padding-bottom, 4px);
}
.v-field--disabled {
opacity: var(--v-disabled-opacity);
pointer-events: none;
}
.v-field .v-chip {
--v-chip-height: 24px;
}
/* endregion */
/* region MODIFIERS */
.v-field--prepended {
padding-inline-start: 12px;
}
.v-field--appended {
padding-inline-end: 12px;
}
.v-field--variant-solo, .v-field--variant-solo-filled {
background: rgb(var(--v-theme-surface));
border-color: transparent;
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
box-shadow: 0px 3px 1px -2px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 2px 2px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 5px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
}
.v-field--variant-solo-inverted {
background: rgb(var(--v-theme-surface));
border-color: transparent;
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
box-shadow: 0px 3px 1px -2px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 2px 2px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 5px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
}
.v-field--variant-solo-inverted.v-field--focused {
color: rgb(var(--v-theme-on-surface-variant));
}
.v-field--variant-filled {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.v-input--density-default .v-field--variant-solo, .v-input--density-default .v-field--variant-solo-inverted, .v-input--density-default .v-field--variant-solo-filled, .v-input--density-default .v-field--variant-filled {
--v-input-control-height: 56px;
--v-field-padding-bottom: 4px;
}
.v-input--density-comfortable .v-field--variant-solo, .v-input--density-comfortable .v-field--variant-solo-inverted, .v-input--density-comfortable .v-field--variant-solo-filled, .v-input--density-comfortable .v-field--variant-filled {
--v-input-control-height: 48px;
--v-field-padding-bottom: 0px;
}
.v-input--density-compact .v-field--variant-solo, .v-input--density-compact .v-field--variant-solo-inverted, .v-input--density-compact .v-field--variant-solo-filled, .v-input--density-compact .v-field--variant-filled {
--v-input-control-height: 40px;
--v-field-padding-bottom: 0px;
}
.v-field--variant-outlined, .v-field--single-line, .v-field--no-label {
--v-field-padding-top: 0px;
}
.v-input--density-default .v-field--variant-outlined, .v-input--density-default .v-field--single-line, .v-input--density-default .v-field--no-label {
--v-field-padding-bottom: 16px;
}
.v-input--density-comfortable .v-field--variant-outlined, .v-input--density-comfortable .v-field--single-line, .v-input--density-comfortable .v-field--no-label {
--v-field-padding-bottom: 12px;
}
.v-input--density-compact .v-field--variant-outlined, .v-input--density-compact .v-field--single-line, .v-input--density-compact .v-field--no-label {
--v-field-padding-bottom: 8px;
}
.v-field--variant-plain, .v-field--variant-underlined {
border-radius: 0;
padding: 0;
}
.v-field--variant-plain.v-field, .v-field--variant-underlined.v-field {
--v-field-padding-start: 0px;
--v-field-padding-end: 0px;
}
.v-input--density-default .v-field--variant-plain, .v-input--density-default .v-field--variant-underlined {
--v-input-control-height: 48px;
--v-field-padding-top: 4px;
--v-field-padding-bottom: 4px;
}
.v-input--density-comfortable .v-field--variant-plain, .v-input--density-comfortable .v-field--variant-underlined {
--v-input-control-height: 40px;
--v-field-padding-top: 2px;
--v-field-padding-bottom: 0px;
}
.v-input--density-compact .v-field--variant-plain, .v-input--density-compact .v-field--variant-underlined {
--v-input-control-height: 32px;
--v-field-padding-top: 0px;
--v-field-padding-bottom: 0px;
}
.v-field--flat {
box-shadow: none;
}
.v-field--rounded {
border-radius: 9999px;
}
.v-field.v-field--prepended {
--v-field-padding-start: 6px;
}
.v-field.v-field--appended {
--v-field-padding-end: 6px;
}
/* endregion */
/* region ELEMENTS */
.v-field__input {
align-items: center;
color: inherit;
column-gap: 2px;
display: flex;
flex-wrap: wrap;
letter-spacing: 0.009375em;
opacity: var(--v-high-emphasis-opacity);
min-height: max(var(--v-input-control-height, 56px), 1.5rem + var(--v-field-input-padding-top) + var(--v-field-input-padding-bottom));
min-width: 0;
padding-inline: var(--v-field-padding-start) var(--v-field-padding-end);
padding-top: var(--v-field-input-padding-top);
padding-bottom: var(--v-field-input-padding-bottom);
position: relative;
width: 100%;
}
.v-input--density-default .v-field__input {
row-gap: 8px;
}
.v-input--density-comfortable .v-field__input {
row-gap: 6px;
}
.v-input--density-compact .v-field__input {
row-gap: 4px;
}
.v-field__input input {
letter-spacing: inherit;
}
.v-field__input input::placeholder,
input.v-field__input::placeholder,
textarea.v-field__input::placeholder {
color: currentColor;
opacity: var(--v-disabled-opacity);
}
.v-field__input:focus, .v-field__input:active {
outline: none;
}
.v-field__input:invalid {
box-shadow: none;
}
.v-field__field {
flex: 1 0;
grid-area: field;
position: relative;
align-items: flex-start;
display: flex;
}
/* endregion */
/* region AFFIXES */
.v-field__prepend-inner {
grid-area: prepend-inner;
padding-inline-end: var(--v-field-padding-after);
}
.v-field__clearable {
grid-area: clear;
}
.v-field__append-inner {
grid-area: append-inner;
padding-inline-start: var(--v-field-padding-after);
}
.v-field__append-inner,
.v-field__clearable,
.v-field__prepend-inner {
display: flex;
align-items: flex-start;
padding-top: var(--v-input-padding-top, 8px);
}
.v-field--center-affix .v-field__append-inner,
.v-field--center-affix .v-field__clearable,
.v-field--center-affix .v-field__prepend-inner {
align-items: center;
padding-top: 0;
}
.v-field.v-field--variant-underlined .v-field__append-inner,
.v-field.v-field--variant-underlined .v-field__clearable,
.v-field.v-field--variant-underlined .v-field__prepend-inner,
.v-field.v-field--variant-plain .v-field__append-inner,
.v-field.v-field--variant-plain .v-field__clearable,
.v-field.v-field--variant-plain .v-field__prepend-inner {
align-items: flex-start;
padding-top: calc(var(--v-field-padding-top, 8px) + var(--v-input-padding-top, 0));
padding-bottom: var(--v-field-padding-bottom, 4px);
}
.v-field--focused .v-field__prepend-inner,
.v-field--focused .v-field__append-inner {
opacity: 1;
}
.v-field__prepend-inner > .v-icon,
.v-field__append-inner > .v-icon,
.v-field__clearable > .v-icon {
opacity: var(--v-medium-emphasis-opacity);
}
.v-field--disabled .v-field__prepend-inner > .v-icon, .v-field--error .v-field__prepend-inner > .v-icon,
.v-field--disabled .v-field__append-inner > .v-icon,
.v-field--error .v-field__append-inner > .v-icon,
.v-field--disabled .v-field__clearable > .v-icon,
.v-field--error .v-field__clearable > .v-icon {
opacity: 1;
}
.v-field--error:not(.v-field--disabled) .v-field__prepend-inner > .v-icon,
.v-field--error:not(.v-field--disabled) .v-field__append-inner > .v-icon,
.v-field--error:not(.v-field--disabled) .v-field__clearable > .v-icon {
color: rgb(var(--v-theme-error));
}
.v-field__clearable {
cursor: pointer;
opacity: 0;
overflow: hidden;
margin-inline: 4px;
transition: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
transition-property: opacity, transform, width;
}
.v-field--focused .v-field__clearable, .v-field--persistent-clear .v-field__clearable {
opacity: 1;
}
@media (hover: hover) {
.v-field:hover .v-field__clearable {
opacity: 1;
}
}
@media (hover: none) {
.v-field__clearable {
opacity: 1;
}
}
/* endregion */
/* region LABEL */
.v-label.v-field-label {
contain: layout paint;
display: block;
margin-inline-start: var(--v-field-padding-start);
margin-inline-end: var(--v-field-padding-end);
max-width: calc(100% - var(--v-field-padding-start) - var(--v-field-padding-end));
pointer-events: none;
position: absolute;
top: var(--v-input-padding-top);
transform-origin: left center;
transition: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
transition-property: opacity, transform;
z-index: 1;
}
.v-field--variant-underlined .v-label.v-field-label, .v-field--variant-plain .v-label.v-field-label {
top: calc(var(--v-input-padding-top) + var(--v-field-padding-top));
}
.v-field--center-affix .v-label.v-field-label {
top: 50%;
transform: translateY(-50%);
}
.v-field--active .v-label.v-field-label {
visibility: hidden;
}
.v-field--focused .v-label.v-field-label, .v-field--error .v-label.v-field-label {
opacity: 1;
}
.v-field--error:not(.v-field--disabled) .v-label.v-field-label {
color: rgb(var(--v-theme-error));
}
.v-label.v-field-label--floating {
--v-field-label-scale: 0.75em;
font-size: var(--v-field-label-scale);
visibility: hidden;
max-width: 100%;
}
.v-field--center-affix .v-label.v-field-label--floating {
transform: none;
}
.v-field.v-field--active .v-label.v-field-label--floating {
visibility: unset;
}
.v-input--density-default .v-field--variant-solo .v-label.v-field-label--floating, .v-input--density-default .v-field--variant-solo-inverted .v-label.v-field-label--floating, .v-input--density-default .v-field--variant-filled .v-label.v-field-label--floating, .v-input--density-default .v-field--variant-solo-filled .v-label.v-field-label--floating {
top: 7px;
}
.v-input--density-comfortable .v-field--variant-solo .v-label.v-field-label--floating, .v-input--density-comfortable .v-field--variant-solo-inverted .v-label.v-field-label--floating, .v-input--density-comfortable .v-field--variant-filled .v-label.v-field-label--floating, .v-input--density-comfortable .v-field--variant-solo-filled .v-label.v-field-label--floating {
top: 5px;
}
.v-input--density-compact .v-field--variant-solo .v-label.v-field-label--floating, .v-input--density-compact .v-field--variant-solo-inverted .v-label.v-field-label--floating, .v-input--density-compact .v-field--variant-filled .v-label.v-field-label--floating, .v-input--density-compact .v-field--variant-solo-filled .v-label.v-field-label--floating {
top: 3px;
}
.v-field--variant-plain .v-label.v-field-label--floating, .v-field--variant-underlined .v-label.v-field-label--floating {
transform: translateY(-16px);
margin: 0;
top: var(--v-input-padding-top);
}
.v-field--variant-outlined .v-label.v-field-label--floating {
transform: translateY(-50%);
transform-origin: center;
position: static;
margin: 0 4px;
}
/* endregion */
/* region OUTLINE */
.v-field__outline {
--v-field-border-width: 1px;
--v-field-border-opacity: 0.38;
align-items: stretch;
contain: layout;
display: flex;
height: 100%;
left: 0;
pointer-events: none;
position: absolute;
right: 0;
width: 100%;
}
@media (hover: hover) {
.v-field:hover .v-field__outline {
--v-field-border-opacity: var(--v-high-emphasis-opacity);
}
}
.v-field--error:not(.v-field--disabled) .v-field__outline {
color: rgb(var(--v-theme-error));
}
.v-field.v-field--focused .v-field__outline, .v-input.v-input--error .v-field__outline {
--v-field-border-opacity: 1;
}
.v-field--variant-outlined.v-field--focused .v-field__outline {
--v-field-border-width: 2px;
}
.v-field--variant-filled .v-field__outline::before, .v-field--variant-underlined .v-field__outline::before {
border-color: currentColor;
border-style: solid;
border-width: 0 0 var(--v-field-border-width);
opacity: var(--v-field-border-opacity);
transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.v-field--variant-filled .v-field__outline::after, .v-field--variant-underlined .v-field__outline::after {
border-color: currentColor;
border-style: solid;
border-width: 0 0 2px;
transform: scaleX(0);
transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.v-field--focused.v-field--variant-filled .v-field__outline::after, .v-field--focused.v-field--variant-underlined .v-field__outline::after {
transform: scaleX(1);
}
.v-field--variant-outlined .v-field__outline {
border-radius: inherit;
}
.v-field--variant-outlined .v-field__outline__start, .v-field--variant-outlined .v-field__outline__notch::before, .v-field--variant-outlined .v-field__outline__notch::after, .v-field--variant-outlined .v-field__outline__end {
border: 0 solid currentColor;
opacity: var(--v-field-border-opacity);
transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.v-field--variant-outlined .v-field__outline__start {
flex: 0 0 12px;
border-top-width: var(--v-field-border-width);
border-bottom-width: var(--v-field-border-width);
border-inline-start-width: var(--v-field-border-width);
border-start-start-radius: inherit;
border-start-end-radius: 0;
border-end-end-radius: 0;
border-end-start-radius: inherit;
}
.v-field--rounded.v-field--variant-outlined .v-field__outline__start,
[class^=rounded-].v-field--variant-outlined .v-field__outline__start,
[class*=" rounded-"].v-field--variant-outlined .v-field__outline__start {
flex-basis: calc(var(--v-input-control-height) / 2 + 2px);
}
.v-field--variant-outlined .v-field__outline__notch {
flex: none;
position: relative;
max-width: calc(100% - 12px);
}
.v-field--variant-outlined .v-field__outline__notch::before, .v-field--variant-outlined .v-field__outline__notch::after {
opacity: var(--v-field-border-opacity);
transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.v-field--variant-outlined .v-field__outline__notch::before {
border-width: var(--v-field-border-width) 0 0;
}
.v-field--variant-outlined .v-field__outline__notch::after {
bottom: 0;
border-width: 0 0 var(--v-field-border-width);
}
.v-field--active.v-field--variant-outlined .v-field__outline__notch::before {
opacity: 0;
}
.v-field--variant-outlined .v-field__outline__end {
flex: 1;
border-top-width: var(--v-field-border-width);
border-bottom-width: var(--v-field-border-width);
border-inline-end-width: var(--v-field-border-width);
border-start-start-radius: 0;
border-start-end-radius: inherit;
border-end-end-radius: inherit;
border-end-start-radius: 0;
}
/* endregion */
/* region LOADER */
.v-field__loader {
top: calc(100% - 2px);
left: 0;
position: absolute;
right: 0;
width: 100%;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
overflow: hidden;
}
.v-field--variant-outlined .v-field__loader {
top: calc(100% - 3px);
}
/* endregion */
/* region OVERLAY */
.v-field__overlay {
border-radius: inherit;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.v-field--variant-filled .v-field__overlay {
background-color: currentColor;
opacity: 0.04;
transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.v-field--variant-filled.v-field--has-background .v-field__overlay {
opacity: 0;
}
@media (hover: hover) {
.v-field--variant-filled:hover .v-field__overlay {
opacity: calc((0.04 + var(--v-hover-opacity)) * var(--v-theme-overlay-multiplier));
}
}
.v-field--variant-filled.v-field--focused .v-field__overlay {
opacity: calc((0.04 + var(--v-focus-opacity)) * var(--v-theme-overlay-multiplier));
}
.v-field--variant-solo-filled .v-field__overlay {
background-color: currentColor;
opacity: 0.04;
transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) {
.v-field--variant-solo-filled:hover .v-field__overlay {
opacity: calc((0.04 + var(--v-hover-opacity)) * var(--v-theme-overlay-multiplier));
}
}
.v-field--variant-solo-filled.v-field--focused .v-field__overlay {
opacity: calc((0.04 + var(--v-focus-opacity)) * var(--v-theme-overlay-multiplier));
}
.v-field--variant-solo-inverted .v-field__overlay {
transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.v-field--variant-solo-inverted.v-field--has-background .v-field__overlay {
opacity: 0;
}
@media (hover: hover) {
.v-field--variant-solo-inverted:hover .v-field__overlay {
opacity: calc((0.04 + var(--v-hover-opacity)) * var(--v-theme-overlay-multiplier));
}
}
.v-field--variant-solo-inverted.v-field--focused .v-field__overlay {
background-color: rgb(var(--v-theme-surface-variant));
opacity: 1;
}
/* endregion */
/* region MODIFIERS */
.v-field--reverse .v-field__field, .v-field--reverse .v-field__input {
flex-direction: row-reverse;
}
.v-field--reverse .v-field__input, .v-field--reverse input {
text-align: end;
}
.v-input--disabled .v-field--variant-filled .v-field__outline::before,
.v-input--disabled .v-field--variant-underlined .v-field__outline::before {
border-image: repeating-linear-gradient(to right, rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) 0px, rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) 2px, transparent 2px, transparent 4px) 1 repeat;
}
.v-field--loading .v-field__outline::after,
.v-field--loading .v-field__outline::before {
opacity: 0;
}
/* endregion */