@govbr-ds/webcomponents 2.0.0-next.22 → 2.0.0-next.23

package/dist/collection/components/input/input.css

@@ -1,681 +0,0 @@
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-html {
-  line-height: var(--font-line-height-medium);
-  -webkit-text-size-adjust: 100%;
-     -moz-text-size-adjust: 100%;
-          text-size-adjust: 100%;
-}
-
-body {
-  margin: 0;
-}
-
-a {
-  background-color: transparent;
-}
-
-
-strong {
-  font-weight: bolder;
-}
-
-small {
-  font-size: 80%;
-}
-
-img {
-  border-style: none;
-}
-
-button,
-input,
-select,
-textarea {
-  font-family: inherit;
-  font-size: 100%;
-  line-height: var(--font-line-height-medium);
-  margin: 0;
-}
-
-button,
-input {
-  overflow: visible;
-}
-
-button,
-select {
-  text-transform: none;
-}
-
-button,
-[type=button],
-[type=reset],
-[type=submit] {
-  -webkit-appearance: button;
-     -moz-appearance: button;
-          appearance: button;
-}
-
-button::-moz-focus-inner,
-[type=button]::-moz-focus-inner,
-[type=reset]::-moz-focus-inner,
-[type=submit]::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-button:-moz-focusring,
-[type=button]:-moz-focusring,
-[type=reset]:-moz-focusring,
-[type=submit]:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-
-progress {
-  vertical-align: baseline;
-}
-
-textarea {
-  overflow: auto;
-}
-
-[type=checkbox],
-[type=radio] {
-  box-sizing: border-box;
-  padding: 0;
-}
-
-[type=number]::-webkit-inner-spin-button,
-[type=number]::-webkit-outer-spin-button {
-  height: auto;
-}
-
-[type=search] {
-  -webkit-appearance: textfield;
-     -moz-appearance: textfield;
-          appearance: textfield;
-  outline-offset: -2px;
-}
-
-[type=search]::-webkit-search-decoration {
-  -webkit-appearance: none;
-          appearance: none;
-}
-
-::-webkit-file-upload-button {
-  -webkit-appearance: button;
-          appearance: button;
-  font: inherit;
-}
-
-[hidden] {
-  display: none;
-}
-
-.d-flex {
-  display: flex !important;
-}
-
-.align-items-center {
-  align-items: center !important;
-}
-.col,
-[class*=col-] {
-  padding-left: calc(var(--grid-gutter) * 0.5);
-  padding-right: calc(var(--grid-gutter) * 0.5);
-  width: 100%;
-}
-
-.col {
-  flex: 1 0 0%;
-  min-width: 8.3333333333%;
-}
-
-.col-auto {
-  flex: 0 0 auto;
-  width: auto;
-}
-
-.container {
-  --grid-margin: var(--grid-portrait-margin);
-  --grid-maxwidth: var(--grid-portrait-maxwidth);
-  margin-left: auto;
-  margin-right: auto;
-  max-width: var(--grid-maxwidth);
-  padding-left: var(--grid-margin);
-  padding-right: var(--grid-margin);
-  width: 100%;
-}
-
-.row {
-  --grid-gutter: var(--grid-portrait-gutter);
-  display: flex;
-  flex-wrap: wrap;
-  margin-left: calc(var(--grid-gutter) * -0.5);
-  margin-right: calc(var(--grid-gutter) * -0.5);
-}
-
-@media (min-width: 576px) {
-  .container {
-    --grid-margin: var(--grid-tablet-margin);
-  }
-  .row {
-    --grid-gutter: var(--grid-tablet-gutter);
-  }
-  .container {
-    --grid-maxwidth: calc(var(--grid-breakpoint-sm) - var(--grid-tablet-margin));
-  }
-}
-@media (min-width: 992px) {
-  .container {
-    --grid-margin: var(--grid-tablet-margin);
-  }
-  .row {
-    --grid-gutter: var(--grid-tablet-gutter);
-  }
-  .container {
-    --grid-maxwidth: calc(var(--grid-breakpoint-md) - var(--grid-tablet-margin));
-  }
-}
-@media (min-width: 1280px) {
-  .container {
-    --grid-margin: var(--grid-desktop-margin);
-  }
-  .row {
-    --grid-gutter: var(--grid-desktop-gutter);
-  }
-  .container {
-    --grid-maxwidth: calc(var(--grid-breakpoint-lg) - var(--grid-desktop-margin));
-  }
-}
-@media (min-width: 1600px) {
-  .container {
-    --grid-margin: var(--grid-tv-margin);
-  }
-  .row {
-    --grid-gutter: var(--grid-tv-gutter);
-  }
-  .container {
-    --grid-maxwidth: calc(var(--grid-breakpoint-xl) - var(--grid-tv-margin));
-  }
-}
-
-.mt-1 {
-  margin-top: var(--spacing-scale-half) !important;
-}
-
-.mr-1 {
-  margin-right: var(--spacing-scale-half) !important;
-}
-
-.mb-1 {
-  margin-bottom: var(--spacing-scale-half) !important;
-}
-
-.mr-2 {
-  margin-right: var(--spacing-scale-base) !important;
-}
-
-.mr-n2 {
-  margin-right: calc(var(--spacing-scale-base) * -1) !important;
-}
-
-.ml-2 {
-  margin-left: var(--spacing-scale-base) !important;
-}
-
-.mb-3 {
-  margin-bottom: var(--spacing-scale-2x) !important;
-}
-
-.mr-auto {
-  margin-right: auto !important;
-}
-
-.pt-half {
-  padding-top: var(--spacing-scale-half) !important;
-}
-
-.py-3 {
-  padding-bottom: var(--spacing-scale-2x) !important;
-  padding-top: var(--spacing-scale-2x) !important;
-}
-
-.py-4 {
-  padding-bottom: var(--spacing-scale-3x) !important;
-  padding-top: var(--spacing-scale-3x) !important;
-}
-body {
-  --bg-color: var(--background);
-  --bg-color-rgb: var(--background-rgb);
-  --bg-color-hsl: var(--background-hsl);
-  --font-size: var(--font-size-scale-base);
-  --font-weight: var(--font-weight-regular);
-  --link-color: var(--interactive);
-  --link-color-rgb: var(--interactive-rgb);
-  --link-color-hsl: var(--interactive-hsl);
-  --line-height: var(--font-line-height-medium);
-  --text-color: var(--color);
-  --text-color-rgb: var(--color-rgb);
-  --text-color-hsl: var(--color-hsl);
-  background: var(--bg-color);
-  color: var(--text-color);
-  font-family: var(--font-family-base);
-  font-size: var(--font-size);
-  font-weight: var(--font-weight);
-  line-height: var(--line-height);
-}
-
-p {
-  color: var(--color);
-  font-size: var(--font-size-scale-base);
-  font-weight: var(--font-weight-regular);
-  line-height: var(--font-line-height-medium);
-  margin-bottom: var(--spacing-scale-2x);
-  margin-top: 0;
-}
-p a {
-  text-decoration: underline;
-}
-
-@media (min-width: 576px) {
-  p {
-    font-size: var(--font-size-scale-up-01);
-  }
-}
-a {
-  --focus-offset: var(--spacing-scale-half);
-  color: var(--interactive);
-  text-decoration: none;
-}
-a:focus {
-  outline: none;
-}
- a:focus-visible {
-  outline-color: var(--focus);
-  outline-offset: var(--focus-offset);
-  outline-style: var(--focus-style);
-  outline-width: var(--focus-width);
-}
-a:not(:disabled):hover {
-  background-image: linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)));
-}
-a:not(:disabled):active {
-  background-image: linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)));
-}
-
-button {
-  cursor: pointer;
-}
-
-img {
-  max-width: 100%;
-  vertical-align: middle;
-}
-ul {
-  margin-bottom: var(--spacing-scale-2x);
-  margin-top: 0;
-  padding: 0 0 0 var(--spacing-scale-5x);
-}
-
-label,
-.label {
-  color: var(--color);
-  font-size: var(--font-size-scale-base);
-  font-weight: var(--font-weight-semi-bold);
-  line-height: var(--font-line-height-medium);
-  margin-bottom: var(--spacing-scale-half);
-}
-
-::-moz-placeholder {
-  color: var(--color-light);
-  font-size: var(--font-size-scale-base);
-  font-style: italic;
-  font-weight: var(--font-weight-regular);
-  line-height: var(--font-line-height-medium);
-  margin-bottom: var(--spacing-scale-half);
-  margin-top: var(--spacing-scale-half);
-  opacity: 1;
-}
-
-::placeholder,
-.placeholder {
-  color: var(--color-light);
-  font-size: var(--font-size-scale-base);
-  font-style: italic;
-  font-weight: var(--font-weight-regular);
-  line-height: var(--font-line-height-medium);
-  margin-bottom: var(--spacing-scale-half);
-  margin-top: var(--spacing-scale-half);
-  opacity: 1;
-}
-
-input,
-textarea,
-.input {
-  color: var(--color-light);
-  font-size: var(--font-size-scale-up-01);
-  font-weight: var(--font-weight-medium);
-  line-height: var(--font-line-height-low);
-  margin-bottom: var(--spacing-scale-half);
-}
-
-.text-pure-0 {
-  color: var(--pure-0) !important;
-}
-
-.text-primary-default {
-  color: var(--color-primary-default) !important;
-}
-
-.bg-support-01 {
-  --color: var(--color-dark);
-  --color-rgb: var(--color-dark-rgb);
-  --text-color: var(--color-dark);
-  --interactive: var(--interactive-dark);
-  --interactive-rgb: var(--interactive-dark-rgb);
-  --visited: var(--visited-dark);
-  --hover: var(--hover-dark);
-  --pressed: var(--pressed-dark);
-  --focus-color: var(--focus-color-dark);
-  --focus: var(--focus-color-dark);
-  background: var(--color-support-01) !important;
-}
-
-.text-nowrap {
-  white-space: nowrap !important;
-}
-
-.text-base {
-  font-size: var(--font-size-scale-base) !important;
-}
-
-.highlight {
-  background: var(--status-highlight-background) linear-gradient(var(--status-highlight-overlay), var(--status-highlight-overlay));
-  color: var(--status-highlight-text);
-  padding: 0 var(--spacing-scale-half);
-}
-
-[disabled],
-.disabled {
-  cursor: not-allowed;
-  opacity: var(--disabled);
-}
-[disabled] *,
-.disabled * {
-  pointer-events: none;
-}
-
-[data-toggle=dropdown] + * {
-  position: absolute;
-}
-
-.dropdown {
-  position: relative;
-}
-.dropdown [data-toggle=dropdown] + * {
-  box-shadow: var(--surface-shadow-sm);
-  left: 0;
-  position: absolute;
-  top: 100%;
-}
-.dropdown .br-item {
-  --color: var(--color-light);
-  --color-rgb: var(--color-light-rgb);
-  --text-color: var(--color-light);
-  --interactive: var(--interactive-light);
-  --interactive-rgb: var(--color-rgb);
-  --visited: var(--visited-light);
-  --hover: var(--hover-light);
-  --pressed: var(--pressed-light);
-  --focus-color: var(--focus-color-light);
-  --focus: var(--focus-color-light);
-  --item-padding-y: var(--spacing-scale-2x);
-  background-color: var(--background-light);
-  color: var(--color);
-}
-.dropdown .br-item:not(:last-child) {
-  border-bottom: 1px solid var(--border-color);
-}
-.dropdown .br-item.selected {
-  --color: var(--color-dark);
-  --color-rgb: var(--color-dark-rgb);
-  --text-color: var(--color-dark);
-  --interactive: var(--interactive-dark);
-  --interactive-rgb: var(--interactive-dark-rgb);
-  --visited: var(--visited-dark);
-  --hover: var(--hover-dark);
-  --pressed: var(--pressed-dark);
-  --focus-color: var(--focus-color-dark);
-  --focus: var(--focus-color-dark);
-}
-
-.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 {
-  -webkit-appearance: none;
-          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 {
-  border-color: var(--success);
-  border-width: 2px;
-}
-.br-input.danger input {
-  border-color: var(--danger);
-  border-width: 2px;
-}
-.br-input.warning input {
-  border-color: var(--warning);
-  border-width: 2px;
-}
-.br-input.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 {
-  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 {
-  --input-size: var(--input-small);
-}
-.br-input.medium {
-  --input-size: var(--input-medium);
-}
-.br-input.large {
-  --input-size: var(--input-large);
-}
- .br-input.dark-mode,
-.br-input.dark-mode label {
-  --color: var(--color-dark);
-  --focus-color: var(--focus-color-dark);
-}
-
-:host {
-  display: block;
-}
-:host .br-input .input-icon {
-  margin-top: 0.1em;
-  margin-left: var(--spacing-scale-base);
-}
-:host .br-input .input-icon + input {
-  padding-left: calc(var(--input-padding-icon) + 3px);
-}
-
-.br-input br-button {
-  float: right;
-  margin-right: var(--input-button-margin);
-  margin-top: calc((var(--input-size) + var(--spacing-scale-half)) * -1);
-  padding: 0;
-  position: relative;
-}
-
-.button-transform {
-  transform: translateY(calc((var(--input-size) - 32px) * 0.5));
-}