@govbr-ds/core/dist/components/input/input.css

Padrão Digital de Governo

.br-input {
  --input-button-margin: var(--spacing-scale-half);
  --input-padding: 0 var(--spacing-scale-2x);
  --input-padding-button: var(--spacing-scale-5x);
  --input-padding-icon: var(--spacing-scale-5x);
  --input-size: var(--input-medium);
  --input-small: 32px;
  --input-medium: 40px;
  --input-large: 48px;
  --input-highlight: 56px;
  --color: var(--color-light);
  --color-rgb: var(--color-light-rgb);
  --text-color: var(--color-light);
  --interactive: var(--interactive-light);
  --interactive-rgb: var(--interactive-light-rgb);
  --visited: var(--visited-light);
  --hover: var(--hover-light);
  --pressed: var(--pressed-light);
  --focus-color: var(--focus-color-light);
  --focus: var(--focus-color-light);
  color: var(--color);
  position: relative;
}
.br-input input {
  background-color: var(--background-light);
  border-color: var(--border-color-alternative);
  border-radius: var(--surface-rounder-sm);
  border-style: var(--border-style);
  border-width: var(--border-width);
  color: var(--color-light);
  display: block;
  font-size: var(--font-size-scale-up-01);
  font-weight: var(--font-weight-medium);
  height: var(--input-size);
  margin-top: var(--spacing-scale-half);
  padding-bottom: 0;
  padding-left: var(--spacing-scale-2x);
  padding-right: var(--spacing-scale-2x);
  padding-top: 0;
  width: 100%;
}
.br-input input::-ms-reveal, .br-input input::-ms-clear, .br-input input::-webkit-calendar-picker-indicator {
  display: none;
}
.br-input input[type=search]::-webkit-search-decoration, .br-input input[type=search]::-webkit-search-cancel-button, .br-input input[type=search]::-webkit-search-results-button, .br-input input[type=search]::-webkit-search-results-decoration {
  appearance: none;
}
.br-input.input-inline {
  display: flex;
}
.br-input.input-inline .input-label {
  margin-right: var(--spacing-scale-baseh);
  margin-top: calc(var(--input-size) * 0.5 - var(--spacing-scale-half));
}
.br-input.input-inline .input-content {
  flex: 1;
}
.br-input .input-group {
  position: relative;
}
.br-input .input-icon {
  align-items: center;
  color: var(--border-color-alternative);
  display: flex;
  height: var(--input-size);
  margin-left: var(--spacing-scale-baseh);
  position: absolute;
}
.br-input .input-icon + input {
  padding-left: var(--input-padding-icon);
}
.br-input .br-button {
  --button-size: var(--button-small);
  --color: var(--color-light);
  --color-rgb: var(--color-light-rgb);
  --text-color: var(--color-light);
  --interactive: var(--interactive-light);
  --interactive-rgb: var(--interactive-light-rgb);
  --visited: var(--visited-light);
  --hover: var(--hover-light);
  --pressed: var(--pressed-light);
  --focus-color: var(--focus-color-light);
  --focus: var(--focus-color-light);
  border-radius: 50%;
  float: right;
  margin-right: var(--input-button-margin);
  margin-top: calc((var(--input-size) + var(--spacing-scale-half)) * -1);
  padding: 0;
  position: relative;
  transform: translateY(calc((var(--input-size) - var(--button-size)) * 0.5));
  width: var(--button-size);
}
.br-input.input-button input {
  padding-right: var(--input-padding-button);
}
.br-input.has-icon input {
  padding-right: var(--input-padding-icon);
}
.br-input.has-icon .br-button.circle {
  float: right;
  margin-right: var(--spacing-scale-half);
  margin-top: calc((var(--button-size) + var(--spacing-scale-half) + var(--spacing-scale-half)) * -1);
  transform: translateY(0);
}
.br-input.has-icon.small .br-button.circle {
  margin-top: calc((var(--button-size) + var(--spacing-scale-base)) * -1);
}
.br-input.has-icon.large .br-button.circle {
  margin-top: calc(var(--button-size) * -1);
}
.br-input.input-highlight {
  --input-button-margin: var(--spacing-scale-2x);
  --input-padding: 0 var(--spacing-scale-3x);
  --input-padding-button: var(--spacing-scale-7x);
  --input-padding-icon: var(--spacing-scale-7x);
  --input-size: var(--input-highlight);
}
.br-input.input-highlight input {
  background-color: var(--gray-2);
  border-color: transparent;
  padding-left: var(--spacing-scale-3x);
  padding-right: var(--spacing-scale-3x);
}
.br-input.input-highlight .input-icon {
  margin-left: var(--spacing-scale-3x);
}
.br-input.input-highlight .input-icon + input {
  padding-left: var(--spacing-scale-7x);
}
.br-input .br-list {
  box-shadow: var(--surface-shadow-md);
  max-height: 530px;
  overflow: auto;
  position: absolute;
  width: 100%;
  z-index: var(--z-index-layer-2);
}
.br-input .br-list::-webkit-scrollbar {
  height: var(--spacing-scale-base);
  width: var(--spacing-scale-base);
}
.br-input .br-list::-webkit-scrollbar-track {
  background: var(--gray-10);
}
.br-input .br-list::-webkit-scrollbar-thumb {
  background: var(--gray-30);
}
.br-input .br-list:hover::-webkit-scrollbar-thumb {
  background: var(--gray-40);
}
.br-input .br-list .br-item {
  --item-padding-y: var(--spacing-scale-2x);
}
.br-input .br-list .br-item:not(:disabled):hover {
  background-image: linear-gradient(rgba(var(--color-rgb), var(--hover)), rgba(var(--color-rgb), var(--hover)));
}
.br-input .br-list .br-item:not(:first-child) {
  border-top: var(--surface-width-sm) solid var(--border-color);
}
.br-input.success input, .br-input[data-success] input {
  border-color: var(--success);
  border-width: 2px;
}
.br-input.danger input, .br-input[data-danger] input {
  border-color: var(--danger);
  border-width: 2px;
}
.br-input.warning input, .br-input[data-warning] input {
  border-color: var(--warning);
  border-width: 2px;
}
.br-input.info input, .br-input[data-info] input {
  border-color: var(--info);
  border-width: 2px;
}
.br-input input:not(:disabled):hover {
  background-image: linear-gradient(rgba(var(--color-rgb), var(--hover)), rgba(var(--color-rgb), var(--hover)));
}
.br-input input:focus, .br-input input:focus-visible, .br-input input.focus-visible {
  border-color: var(--focus) !important;
  box-shadow: 0 0 0 var(--surface-width-md) var(--focus);
  outline: none;
}
.br-input .feedback {
  margin-bottom: var(--spacing-scale-half);
}
.br-input.small, .br-input[data-small] {
  --input-size: var(--input-small);
}
.br-input.medium, .br-input[data-medium] {
  --input-size: var(--input-medium);
}
.br-input.large, .br-input[data-large] {
  --input-size: var(--input-large);
}
.br-input.inverted,
.br-input.inverted label, .br-input.dark-mode,
.br-input.dark-mode label {
  --color: var(--color-dark);
  --focus-color: var(--focus-color-dark);
}

/*# sourceMappingURL=input.css.map*/