package.lib.components.VInput.VInput.css Maven / Gradle / Ivy

Go to download
.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);
}