@esri/calcite-components 1.0.0-beta.72 → 1.0.0-beta.76

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

@@ -1,51 +1,42 @@
 /* mixins & extensions */
-
 @keyframes in {
   0% {
     opacity: 0;
   }
-
   100% {
     opacity: 1;
   }
 }
-
 @keyframes in-down {
   0% {
     opacity: 0;
     transform: translate3D(0, -5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-up {
   0% {
     opacity: 0;
     transform: translate3D(0, 5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-scale {
   0% {
     opacity: 0;
     transform: scale3D(0.95, 0.95, 1);
   }
-
   100% {
     opacity: 1;
     transform: scale3D(1, 1, 1);
   }
 }
-
 :root {
   --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
   --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
@@ -79,153 +70,138 @@
 /**
 * Currently only used in Checkbox.
 */
-
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
   display: none;
 }
 
+:host {
+  display: block;
+}
+
 :host([scale=s]) input, :host([scale=s]) .prefix, :host([scale=s]) .suffix {
+  height: 1.5rem;
+  padding: 0.5rem;
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
-  padding: 0.5rem;
-  height: 1.5rem;
 }
-
 :host([scale=s]) textarea {
   height: 1.5rem;
   min-height: 1.5rem;
 }
-
 :host([scale=s]) .number-button-wrapper, :host([scale=s]) .action-wrapper calcite-button, :host([scale=s]) .action-wrapper calcite-button button {
   height: 1.5rem;
 }
-
 :host([scale=s]) input[type=file] {
   height: 1.5rem;
 }
-
 :host([scale=s]) .clear-button {
   min-height: 1.5rem;
   min-width: 1.5rem;
 }
-
 :host([scale=s]) textarea {
-  font-size: var(--calcite-font-size--2);
-  line-height: 1rem;
+  height: auto;
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
   padding-left: 0.5rem;
   padding-right: 0.5rem;
-  height: auto;
+  font-size: var(--calcite-font-size--2);
+  line-height: 1rem;
 }
 
 :host([scale=m]) input, :host([scale=m]) .prefix, :host([scale=m]) .suffix {
+  height: 2rem;
+  padding: 0.75rem;
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
-  padding: 0.75rem;
-  height: 2rem;
 }
-
 :host([scale=m]) textarea {
   min-height: 2rem;
 }
-
 :host([scale=m]) .number-button-wrapper, :host([scale=m]) .action-wrapper calcite-button, :host([scale=m]) .action-wrapper calcite-button button {
   height: 2rem;
 }
-
 :host([scale=m]) input[type=file] {
   height: 2rem;
 }
-
 :host([scale=m]) .clear-button {
   min-height: 2rem;
   min-width: 2rem;
 }
-
 :host([scale=m]) textarea {
-  font-size: var(--calcite-font-size--1);
-  line-height: 1rem;
+  height: auto;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
   padding-left: 0.75rem;
   padding-right: 0.75rem;
-  height: auto;
+  font-size: var(--calcite-font-size--1);
+  line-height: 1rem;
 }
 
 :host([scale=l]) input, :host([scale=l]) .prefix, :host([scale=l]) .suffix {
+  height: 2.75rem;
+  padding: 1rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
-  padding: 1rem;
-  height: 2.75rem;
 }
-
 :host([scale=l]) textarea {
   min-height: 2.75rem;
 }
-
 :host([scale=l]) .number-button-wrapper, :host([scale=l]) .action-wrapper calcite-button, :host([scale=l]) .action-wrapper calcite-button button {
   height: 2.75rem;
 }
-
 :host([scale=l]) input[type=file] {
   height: 2.75rem;
 }
-
 :host([scale=l]) .clear-button {
   min-height: 2.75rem;
   min-width: 2.75rem;
 }
-
 :host([scale=l]) textarea {
-  font-size: var(--calcite-font-size-0);
-  line-height: 1.25rem;
+  height: auto;
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
   padding-left: 1rem;
   padding-right: 1rem;
-  height: auto;
+  font-size: var(--calcite-font-size-0);
+  line-height: 1.25rem;
 }
 
 :host([disabled]) {
   pointer-events: none;
   opacity: var(--calcite-ui-opacity-disabled);
 }
-
 :host([disabled]) .wrapper {
   pointer-events: none;
-  --text-opacity: var(--calcite-ui-opacity-disabled);
+  --tw-text-opacity: var(--calcite-ui-opacity-disabled);
 }
-
 :host([disabled]) button, :host([disabled]) textarea, :host([disabled]) input {
   pointer-events: none;
 }
-
 :host([disabled]) textarea {
   resize: none;
 }
 
 :host textarea,
 :host input {
-  transition: 150ms ease-in-out, height 0s;
+  transition: var(--calcite-animation-timing), height 0s;
   -webkit-appearance: none;
-  width: 100%;
-  border-radius: 0;
   position: relative;
+  margin: 0px;
+  box-sizing: border-box;
+  display: flex;
   max-height: 100%;
+  width: 100%;
   max-width: 100%;
-  margin: 0;
-  font-weight: var(--calcite-font-weight-normal);
-  font-family: inherit;
   flex: 1 1 0%;
-  display: flex;
-  color: var(--calcite-ui-text-1);
-  box-sizing: border-box;
+  border-radius: 0px;
   background-color: var(--calcite-ui-foreground-1);
+  font-family: inherit;
+  font-weight: var(--calcite-font-weight-normal);
+  color: var(--calcite-ui-text-1);
 }
 
 :host input[type=search]::-webkit-search-decoration {
@@ -233,44 +209,37 @@
 }
 
 :host input, :host textarea {
-  color: var(--calcite-ui-text-1);
   border-width: 1px;
   border-style: solid;
   border-color: var(--calcite-ui-border-input);
+  color: var(--calcite-ui-text-1);
 }
-
 :host input::placeholder, :host input:-ms-input-placeholder, :host input::-ms-input-placeholder, :host textarea::placeholder, :host textarea:-ms-input-placeholder, :host textarea::-ms-input-placeholder {
-  color: var(--calcite-ui-text-3);
   font-weight: var(--calcite-font-weight-normal);
+  color: var(--calcite-ui-text-3);
 }
-
 :host input:focus, :host textarea:focus {
   border-color: var(--calcite-ui-brand);
   color: var(--calcite-ui-text-1);
 }
-
 :host input[readonly], :host textarea[readonly] {
   background-color: var(--calcite-ui-background);
   font-weight: var(--calcite-font-weight-medium);
 }
-
 :host input[readonly]:focus, :host textarea[readonly]:focus {
   color: var(--calcite-ui-text-1);
 }
-
 :host calcite-icon {
   color: var(--calcite-ui-text-3);
 }
 
-:host textarea,
-:host input {
+:host textarea, :host input {
   outline-offset: 0;
   outline-color: transparent;
   transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
 }
 
-:host textarea:focus,
-:host input:focus {
+:host textarea:focus, :host input:focus {
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: -2px;
 }
@@ -278,7 +247,6 @@
 :host([status=invalid]) input, :host([status=invalid]) textarea {
   border-color: var(--calcite-ui-danger);
 }
-
 :host([status=invalid]) input:focus, :host([status=invalid]) textarea:focus {
   outline: 2px solid var(--calcite-ui-danger);
   outline-offset: -2px;
@@ -309,61 +277,54 @@
 }
 
 .element-wrapper {
-  display: inline-flex;
-  align-items: center;
-  flex: 1 1 0%;
   position: relative;
   order: 3;
+  display: inline-flex;
+  flex: 1 1 0%;
+  align-items: center;
 }
 
 .icon {
-  display: block;
-  position: absolute;
   pointer-events: none;
+  position: absolute;
   z-index: 10;
+  display: block;
   transition-property: all;
   transition-duration: var(--calcite-animation-timing);
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
 }
 
-input[type=text]::-ms-clear,
-input[type=text]::-ms-reveal {
+input[type=text]::-ms-clear, input[type=text]::-ms-reveal {
   display: none;
-  width: 0;
-  height: 0;
+  height: 0px;
+  width: 0px;
 }
 
-input[type=search]::-webkit-search-decoration,
-input[type=search]::-webkit-search-cancel-button,
-input[type=search]::-webkit-search-results-button,
-input[type=search]::-webkit-search-results-decoration,
-input[type=date]::-webkit-clear-button,
-input[type=time]::-webkit-clear-button {
+input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-results-button, input[type=search]::-webkit-search-results-decoration, input[type=date]::-webkit-clear-button, input[type=time]::-webkit-clear-button {
   display: none;
 }
 
 .clear-button {
   pointer-events: initial;
-  outline-offset: 0;
-  outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
+  order: 4;
+  margin: 0px;
+  box-sizing: border-box;
   display: flex;
-  align-self: stretch;
+  min-height: 100%;
+  cursor: pointer;
   align-items: center;
   justify-content: center;
-  box-sizing: border-box;
-  cursor: pointer;
-  min-height: 100%;
+  align-self: stretch;
   border-width: 1px;
   border-style: solid;
   border-color: var(--calcite-ui-border-input);
   background-color: var(--calcite-ui-foreground-1);
-  order: 4;
-  margin: 0;
-  border-inline-start-width: 0;
+  outline-offset: 0;
+  outline-color: transparent;
+  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
+  border-inline-start-width: 0px;
 }
-
 .clear-button:hover {
   background-color: var(--calcite-ui-foreground-2);
   transition-property: all;
@@ -371,7 +332,6 @@ input[type=time]::-webkit-clear-button {
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
 }
-
 .clear-button:hover calcite-icon {
   color: var(--calcite-ui-text-1);
   transition-property: all;
@@ -379,20 +339,16 @@ input[type=time]::-webkit-clear-button {
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
 }
-
 .clear-button:active {
   background-color: var(--calcite-ui-foreground-3);
 }
-
 .clear-button:active calcite-icon {
   color: var(--calcite-ui-text-1);
 }
-
 .clear-button:focus {
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: -2px;
 }
-
 .clear-button:disabled {
   opacity: var(--calcite-ui-opacity-disabled);
 }
@@ -401,45 +357,43 @@ input[type=time]::-webkit-clear-button {
   top: 1px;
   left: 1px;
   right: 1px;
-  display: block;
   pointer-events: none;
   position: absolute;
+  display: block;
 }
 
 .action-wrapper {
-  display: flex;
   order: 7;
+  display: flex;
 }
 
-.prefix,
-.suffix {
+.prefix, .suffix {
+  box-sizing: border-box;
   display: flex;
-  align-items: center;
-  align-content: center;
   height: auto;
   min-height: 100%;
   -webkit-user-select: none;
           user-select: none;
-  box-sizing: border-box;
-  font-weight: var(--calcite-font-weight-medium);
+  align-content: center;
+  align-items: center;
+  overflow-wrap: break-word;
   border-width: 1px;
   border-style: solid;
   border-color: var(--calcite-ui-border-input);
   background-color: var(--calcite-ui-background);
-  color: var(--calcite-ui-text-2);
+  font-weight: var(--calcite-font-weight-medium);
   line-height: 1;
-  word-wrap: break-word;
-  overflow-wrap: break-word;
+  color: var(--calcite-ui-text-2);
 }
 
 .prefix {
   order: 2;
-  border-inline-end-width: 0;
+  border-inline-end-width: 0px;
 }
 
 .suffix {
   order: 5;
-  border-inline-start-width: 0;
+  border-inline-start-width: 0px;
 }
 
 :host([alignment=start]) textarea, :host([alignment=start]) input {
@@ -453,19 +407,18 @@ input[type=time]::-webkit-clear-button {
 :host input[type=number] {
   -moz-appearance: textfield;
 }
-
 :host input[type=number]::-webkit-inner-spin-button, :host input[type=number]::-webkit-outer-spin-button {
   -webkit-appearance: none;
   -moz-appearance: textfield;
-  margin: 0;
+  margin: 0px;
 }
 
 .number-button-wrapper {
+  pointer-events: none;
+  order: 6;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  pointer-events: none;
-  order: 6;
   transition-property: all;
   transition-duration: var(--calcite-animation-timing);
   transition-timing-function: ease-in-out;
@@ -477,26 +430,23 @@ input[type=time]::-webkit-clear-button {
   display: flex;
 }
 
-:host([number-button-type=vertical]) input,
-:host([number-button-type=vertical]) textarea {
+:host([number-button-type=vertical]) input, :host([number-button-type=vertical]) textarea {
   order: 2;
 }
 
 :host([number-button-type=horizontal]) .calcite--rtl .number-button-item[data-adjustment=down] calcite-icon {
   transform: rotate(-90deg);
 }
-
 :host([number-button-type=horizontal]) .calcite--rtl .number-button-item[data-adjustment=up] calcite-icon {
   transform: rotate(-90deg);
 }
 
 .number-button-item.number-button-item--horizontal[data-adjustment=down], .number-button-item.number-button-item--horizontal[data-adjustment=up] {
-  min-height: 100%;
-  max-height: 100%;
   order: 1;
+  max-height: 100%;
+  min-height: 100%;
   align-self: stretch;
 }
-
 .number-button-item.number-button-item--horizontal[data-adjustment=down] calcite-icon, .number-button-item.number-button-item--horizontal[data-adjustment=up] calcite-icon {
   transform: rotate(90deg);
 }
@@ -505,13 +455,11 @@ input[type=time]::-webkit-clear-button {
   border-width: 1px;
   border-style: solid;
   border-color: var(--calcite-ui-border-input);
-  border-inline-end-width: 0;
+  border-inline-end-width: 0px;
 }
-
 .number-button-item.number-button-item--horizontal[data-adjustment=down]:hover {
   background-color: var(--calcite-ui-foreground-2);
 }
-
 .number-button-item.number-button-item--horizontal[data-adjustment=down]:hover calcite-icon {
   color: var(--calcite-ui-text-1);
 }
@@ -519,11 +467,9 @@ input[type=time]::-webkit-clear-button {
 .number-button-item.number-button-item--horizontal[data-adjustment=up] {
   order: 5;
 }
-
 .number-button-item.number-button-item--horizontal[data-adjustment=up]:hover {
   background-color: var(--calcite-ui-foreground-2);
 }
-
 .number-button-item.number-button-item--horizontal[data-adjustment=up]:hover calcite-icon {
   color: var(--calcite-ui-text-1);
 }
@@ -531,7 +477,6 @@ input[type=time]::-webkit-clear-button {
 :host([number-button-type=vertical]) .number-button-item[data-adjustment=down]:hover {
   background-color: var(--calcite-ui-foreground-2);
 }
-
 :host([number-button-type=vertical]) .number-button-item[data-adjustment=down]:hover calcite-icon {
   color: var(--calcite-ui-text-1);
 }
@@ -539,40 +484,38 @@ input[type=time]::-webkit-clear-button {
 :host([number-button-type=vertical]) .number-button-item[data-adjustment=up]:hover {
   background-color: var(--calcite-ui-foreground-2);
 }
-
 :host([number-button-type=vertical]) .number-button-item[data-adjustment=up]:hover calcite-icon {
   color: var(--calcite-ui-text-1);
 }
 
 :host([number-button-type=vertical]) .number-button-item[data-adjustment=down] {
-  border-top-width: 0;
+  border-top-width: 0px;
 }
 
 .number-button-item {
   max-height: 50%;
   min-height: 50%;
   pointer-events: initial;
-  display: flex;
-  align-self: center;
-  align-items: center;
+  margin: 0px;
   box-sizing: border-box;
+  display: flex;
   cursor: pointer;
-  padding-top: 0;
-  padding-bottom: 0;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
+  align-items: center;
+  align-self: center;
   border-width: 1px;
   border-style: solid;
   border-color: var(--calcite-ui-border-input);
   background-color: var(--calcite-ui-foreground-1);
+  padding-top: 0px;
+  padding-bottom: 0px;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
   transition-property: all;
   transition-duration: var(--calcite-animation-timing);
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
-  margin: 0;
-  border-inline-start-width: 0;
+  border-inline-start-width: 0px;
 }
-
 .number-button-item calcite-icon {
   pointer-events: none;
   transition-property: all;
@@ -580,24 +523,21 @@ input[type=time]::-webkit-clear-button {
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
 }
-
 .number-button-item:focus {
   background-color: var(--calcite-ui-foreground-2);
 }
-
 .number-button-item:focus calcite-icon {
   color: var(--calcite-ui-text-1);
 }
-
 .number-button-item:active {
   background-color: var(--calcite-ui-foreground-3);
 }
 
 .wrapper {
+  position: relative;
   display: flex;
   flex-direction: row;
   align-items: center;
-  position: relative;
 }
 
 :host input::-webkit-calendar-picker-indicator {
@@ -609,11 +549,11 @@ input[type=time]::-webkit-clear-button {
 }
 
 :host textarea::-webkit-resizer {
-  box-sizing: border-box;
   position: absolute;
-  bottom: 0;
-  padding-top: 0;
-  padding-bottom: 0;
+  bottom: 0px;
+  box-sizing: border-box;
+  padding-top: 0px;
+  padding-bottom: 0px;
   padding-left: 0.25rem;
   padding-right: 0.25rem;
   inset-inline-end: 0;
@@ -622,15 +562,14 @@ input[type=time]::-webkit-clear-button {
 .resize-icon-wrapper {
   bottom: 2px;
   inset-inline-end: 2px;
-  background-color: var(--calcite-ui-foreground-1);
-  color: var(--calcite-ui-text-3);
+  pointer-events: none;
   position: absolute;
   z-index: 10;
-  pointer-events: none;
-  width: 0.75rem;
   height: 0.75rem;
+  width: 0.75rem;
+  background-color: var(--calcite-ui-foreground-1);
+  color: var(--calcite-ui-text-3);
 }
-
 .resize-icon-wrapper calcite-icon {
   bottom: 0.25rem;
   inset-inline-end: 0.25rem;
@@ -646,11 +585,11 @@ input[type=time]::-webkit-clear-button {
 }
 
 :host([type=file]) input {
-  background-color: var(--calcite-ui-foreground-1);
   cursor: pointer;
   border-width: 1px;
   border-style: dashed;
   border-color: var(--calcite-ui-border-input);
+  background-color: var(--calcite-ui-foreground-1);
   text-align: center;
 }
 
@@ -676,21 +615,20 @@ input[type=time]::-webkit-clear-button {
 }
 
 :host(.no-bottom-border) input {
-  border-bottom-width: 0;
+  border-bottom-width: 0px;
 }
 
-:host(.border-t-color-1) input {
+:host(.border-top-color-one) input {
   border-top-color: var(--calcite-ui-border-1);
 }
 
 :host .inline-child {
+  background-color: transparent;
   transition-property: all;
   transition-duration: var(--calcite-animation-timing);
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
-  background-color: transparent;
 }
-
 :host .inline-child .editing-enabled {
   background-color: inherit;
 }