carbon-addons-iot-react 2.155.8 → 2.155.9

package/css/carbon-addons-iot-react.css

@@ -8326,6 +8326,7 @@ input[type=number] {
 
 input[data-invalid]:not(:focus),
 .bx--number[data-invalid] input[type=number]:not(:focus),
+.bx--number[data-invalid] input[type=text]:not(:focus),
 .bx--text-input__field-wrapper[data-invalid] > .bx--text-input--invalid:not(:focus),
 .bx--text-area__wrapper[data-invalid] > .bx--text-area--invalid:not(:focus),
 .bx--select-input__wrapper[data-invalid] .bx--select-input:not(:focus),
@@ -8337,6 +8338,7 @@ input[data-invalid]:not(:focus),
 @media screen and (prefers-contrast) {
   input[data-invalid]:not(:focus),
   .bx--number[data-invalid] input[type=number]:not(:focus),
+  .bx--number[data-invalid] input[type=text]:not(:focus),
   .bx--text-input__field-wrapper[data-invalid] > .bx--text-input--invalid:not(:focus),
   .bx--text-area__wrapper[data-invalid] > .bx--text-area--invalid:not(:focus),
   .bx--select-input__wrapper[data-invalid] .bx--select-input:not(:focus),
@@ -12451,6 +12453,503 @@ fieldset[disabled] .bx--form__helper-text {
   }
 }
 
+/* stylelint-enable */
+.bx--number {
+  box-sizing: border-box;
+  padding: 0;
+  border: 0;
+  margin: 0;
+  font-family: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
+  position: relative;
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+}
+.bx--number *,
+.bx--number *::before,
+.bx--number *::after {
+  box-sizing: inherit;
+}
+
+.bx--number input[type=number],
+.bx--number input[type=text] {
+  font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace;
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1.33333;
+  letter-spacing: 0.32px;
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+  display: inline-flex;
+  width: 100%;
+  min-width: 9.375rem;
+  height: 2.5rem;
+  box-sizing: border-box;
+  padding-right: 8rem;
+  padding-left: 1rem;
+  border: 0;
+  border-bottom: 0.0625rem solid #8d8d8d;
+  -moz-appearance: textfield;
+  -webkit-appearance: textfield;
+          appearance: textfield;
+  background-color: #ffffff;
+  border-radius: 0;
+  color: #161616;
+  font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace;
+  font-weight: 300;
+  transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
+}
+.bx--number input[type=number]:focus,
+.bx--number input[type=text]:focus {
+  outline: 2px solid #0f62fe;
+  outline-offset: -2px;
+}
+@media screen and (prefers-contrast) {
+  .bx--number input[type=number]:focus,
+  .bx--number input[type=text]:focus {
+    outline-style: dotted;
+  }
+}
+.bx--number input[type=number]:disabled ~ .bx--number__controls,
+.bx--number input[type=text]:disabled ~ .bx--number__controls {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.bx--number input[type=number]:disabled ~ .bx--number__controls svg,
+.bx--number input[type=text]:disabled ~ .bx--number__controls svg {
+  fill: #c6c6c6;
+}
+.bx--number input[type=number]::-ms-clear,
+.bx--number input[type=text]::-ms-clear {
+  display: none;
+}
+.bx--number input[type=number]::-webkit-inner-spin-button,
+.bx--number input[type=text]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+          appearance: none;
+}
+
+.bx--number--xl.bx--number input[type=number],
+.bx--number--lg.bx--number input[type=number],
+.bx--number--xl.bx--number input[type=text],
+.bx--number--lg.bx--number input[type=text] {
+  padding-right: 9rem;
+}
+
+.bx--number--sm.bx--number input[type=number],
+.bx--number--sm.bx--number input[type=text] {
+  padding-right: 7rem;
+}
+
+.bx--number input[type=number]:disabled,
+.bx--number input[type=text]:disabled {
+  border-bottom-color: transparent;
+  background-color: #ffffff;
+  color: #c6c6c6;
+  cursor: not-allowed;
+}
+
+.bx--number__input-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.bx--number__controls {
+  box-sizing: border-box;
+  padding: 0;
+  border: 0;
+  margin: 0;
+  font-family: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
+  position: absolute;
+  top: 50%;
+  right: 0;
+  display: flex;
+  width: 5rem;
+  height: 100%;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  transform: translateY(-50%);
+}
+.bx--number__controls *,
+.bx--number__controls *::before,
+.bx--number__controls *::after {
+  box-sizing: inherit;
+}
+
+.bx--number__control-btn {
+  box-sizing: border-box;
+  padding: 0;
+  border: 0;
+  margin: 0;
+  font-family: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
+  display: inline-block;
+  padding: 0;
+  border: 0;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background: none;
+  cursor: pointer;
+  width: 100%;
+  position: relative;
+  display: inline-flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  border-bottom: 0.0625rem solid #8d8d8d;
+  color: #161616;
+}
+.bx--number__control-btn *,
+.bx--number__control-btn *::before,
+.bx--number__control-btn *::after {
+  box-sizing: inherit;
+}
+.bx--number__control-btn::-moz-focus-inner {
+  border: 0;
+}
+.bx--number__control-btn::before, .bx--number__control-btn::after {
+  position: absolute;
+  top: 0.125rem;
+  display: block;
+  width: 0.125rem;
+  height: 2.25rem;
+  background-color: #ffffff;
+  content: "";
+}
+.bx--number__control-btn::before {
+  left: 0;
+}
+.bx--number__control-btn::after {
+  right: 0;
+}
+.bx--number__control-btn svg {
+  fill: currentColor;
+}
+.bx--number__control-btn:focus {
+  outline: 1px solid #0f62fe;
+  color: #161616;
+  outline-offset: -2px;
+  outline-width: 2px;
+}
+@media screen and (prefers-contrast) {
+  .bx--number__control-btn:focus {
+    outline-style: dotted;
+  }
+}
+.bx--number__control-btn:hover {
+  background-color: #e5e5e5;
+  color: #161616;
+  cursor: pointer;
+}
+.bx--number__control-btn:hover::before, .bx--number__control-btn:hover::after {
+  background-color: #e5e5e5;
+}
+.bx--number__control-btn:focus::before, .bx--number__control-btn:focus::after, .bx--number__control-btn:hover:focus::before, .bx--number__control-btn:hover:focus::after {
+  background-color: transparent;
+}
+.bx--number__control-btn:disabled {
+  border-bottom-color: transparent;
+  color: #c6c6c6;
+  cursor: not-allowed;
+}
+
+.bx--number__control-btn.down-icon {
+  order: 1;
+}
+
+.bx--number__control-btn.up-icon {
+  order: 2;
+}
+
+.bx--number input[type=number]:focus ~ .bx--number__controls .bx--number__control-btn,
+.bx--number input[type=text]:focus ~ .bx--number__controls .bx--number__control-btn {
+  border-bottom-width: 0;
+}
+.bx--number input[type=number]:focus ~ .bx--number__controls .bx--number__control-btn:hover,
+.bx--number input[type=text]:focus ~ .bx--number__controls .bx--number__control-btn:hover {
+  outline: 2px solid #0f62fe;
+  outline-offset: -2px;
+  border: 0;
+}
+@media screen and (prefers-contrast) {
+  .bx--number input[type=number]:focus ~ .bx--number__controls .bx--number__control-btn:hover,
+  .bx--number input[type=text]:focus ~ .bx--number__controls .bx--number__control-btn:hover {
+    outline-style: dotted;
+  }
+}
+
+.bx--number input[type=number][data-invalid] ~ .bx--number__controls .bx--number__control-btn,
+.bx--number input[type=text][data-invalid] ~ .bx--number__controls .bx--number__control-btn {
+  border-bottom-width: 0;
+}
+
+.bx--number input[type=number][data-invalid]:not(:focus) ~ .bx--number__controls .bx--number__control-btn:hover,
+.bx--number input[type=text][data-invalid]:not(:focus) ~ .bx--number__controls .bx--number__control-btn:hover {
+  outline: 2px solid #da1e28;
+  outline-offset: -2px;
+}
+@media screen and (prefers-contrast) {
+  .bx--number input[type=number][data-invalid]:not(:focus) ~ .bx--number__controls .bx--number__control-btn:hover,
+  .bx--number input[type=text][data-invalid]:not(:focus) ~ .bx--number__controls .bx--number__control-btn:hover {
+    outline-style: dotted;
+  }
+}
+
+.bx--number input[type=number]:focus ~ .bx--number__controls .bx--number__control-btn.up-icon::after,
+.bx--number input[type=text]:focus ~ .bx--number__controls .bx--number__control-btn.up-icon::after {
+  background-color: transparent;
+}
+
+.bx--number input[type=number][data-invalid] ~ .bx--number__controls .bx--number__control-btn.up-icon::after,
+.bx--number input[type=text][data-invalid] ~ .bx--number__controls .bx--number__control-btn.up-icon::after {
+  background-color: #da1e28;
+}
+
+.bx--number input[type=number][data-invalid]:focus ~ .bx--number__controls .bx--number__control-btn.up-icon::after,
+.bx--number input[type=text][data-invalid] ~ .bx--number__controls .bx--number__control-btn.up-icon:focus::after {
+  background-color: #0f62fe;
+}
+
+.bx--number__rule-divider {
+  position: absolute;
+  z-index: 6000;
+  width: 0.0625rem;
+  height: 1rem;
+  background-color: #e0e0e0;
+}
+.bx--number__rule-divider:first-of-type {
+  order: 0;
+}
+
+.bx--number__controls .bx--number__rule-divider:first-of-type {
+  left: 0;
+  background-color: transparent;
+}
+
+.bx--number__invalid + .bx--number__controls .bx--number__rule-divider:first-of-type {
+  background-color: #e0e0e0;
+}
+
+.bx--number--light .bx--number__rule-divider,
+.bx--number--light .bx--number__invalid + .bx--number__controls .bx--number__rule-divider:first-of-type {
+  background-color: #e0e0e0;
+}
+
+.bx--number input[type=number]:disabled + .bx--number__controls .bx--number__rule-divider:first-of-type,
+.bx--number input[type=text]:disabled + .bx--number__controls .bx--number__rule-divider:first-of-type {
+  background-color: transparent;
+}
+
+.bx--number input[type=number]:disabled + .bx--number__controls .bx--number__rule-divider,
+.bx--number input[type=text]:disabled + .bx--number__controls .bx--number__rule-divider {
+  background-color: #c6c6c6;
+}
+
+.bx--number__control-btn:focus ~ .bx--number__rule-divider {
+  background-color: transparent;
+}
+
+.bx--number__invalid {
+  position: absolute;
+  right: 6rem;
+  fill: #da1e28;
+}
+
+.bx--number--xl .bx--number__invalid,
+.bx--number--lg .bx--number__invalid {
+  right: 7rem;
+}
+
+.bx--number--sm .bx--number__invalid {
+  right: 5rem;
+}
+
+.bx--number__invalid + .bx--number__rule-divider {
+  position: absolute;
+  right: 5rem;
+}
+
+.bx--number--xl .bx--number__invalid + .bx--number__rule-divider,
+.bx--number--lg .bx--number__invalid + .bx--number__rule-divider {
+  right: 6rem;
+}
+
+.bx--number--sm .bx--number__invalid + .bx--number__rule-divider {
+  right: 4rem;
+}
+
+.bx--number__control-btn.down-icon:hover ~ .bx--number__rule-divider,
+.bx--number__control-btn.up-icon:hover + .bx--number__rule-divider,
+.bx--number__control-btn.down-icon:focus ~ .bx--number__rule-divider,
+.bx--number__control-btn.up-icon:focus + .bx--number__rule-divider {
+  background-color: transparent;
+}
+
+.bx--number__invalid--warning {
+  fill: #f1c21b;
+}
+
+.bx--number__invalid--warning path:first-of-type {
+  fill: #000000;
+  opacity: 1;
+}
+
+.bx--number--light input[type=number],
+.bx--number--light input[type=text] {
+  background-color: #f4f4f4;
+}
+
+.bx--number--light input[type=number]:disabled,
+.bx--number--light input[type=text]:disabled {
+  background-color: #f4f4f4;
+}
+
+.bx--number--light .bx--number__control-btn::before,
+.bx--number--light .bx--number__control-btn::after {
+  background-color: #f4f4f4;
+}
+
+.bx--number--light .bx--number__control-btn:focus::before,
+.bx--number--light .bx--number__control-btn:focus::after {
+  background-color: transparent;
+}
+
+.bx--number--light .bx--number__control-btn:hover,
+.bx--number--light .bx--number__control-btn:not(:focus):hover::before,
+.bx--number--light .bx--number__control-btn:not(:focus):hover::after {
+  background-color: #e5e5e5;
+}
+
+.bx--number--xl input[type=number],
+.bx--number--lg input[type=number],
+.bx--number--xl input[type=text],
+.bx--number--lg input[type=text] {
+  height: 3rem;
+}
+
+.bx--number--xl .bx--number__controls,
+.bx--number--lg .bx--number__controls {
+  width: 6rem;
+}
+
+.bx--number--xl .bx--number__control-btn,
+.bx--number--lg .bx--number__control-btn {
+  width: 3rem;
+}
+.bx--number--xl .bx--number__control-btn::before, .bx--number--xl .bx--number__control-btn::after,
+.bx--number--lg .bx--number__control-btn::before,
+.bx--number--lg .bx--number__control-btn::after {
+  height: 2.75rem;
+}
+
+.bx--number--sm input[type=number],
+.bx--number--sm input[type=text] {
+  height: 2rem;
+}
+
+.bx--number--sm .bx--number__controls {
+  width: 4rem;
+}
+
+.bx--number--sm .bx--number__control-btn {
+  width: 2rem;
+}
+.bx--number--sm .bx--number__control-btn::before, .bx--number--sm .bx--number__control-btn::after {
+  height: 1.75rem;
+}
+
+.bx--number--nolabel .bx--label + .bx--form__helper-text {
+  margin-top: 0;
+}
+
+.bx--number--nosteppers input[type=number],
+.bx--number--nosteppers input[type=text] {
+  padding-right: 3rem;
+}
+
+.bx--number--nosteppers .bx--number__invalid {
+  right: 1rem;
+}
+
+.bx--number--readonly input[type=number],
+.bx--number--readonly input[type=text] {
+  background: transparent;
+}
+
+.bx--number--readonly .bx--number__controls {
+  display: none;
+}
+
+.bx--number__readonly-icon {
+  position: absolute;
+  right: 1rem;
+}
+
+.bx--number.bx--skeleton {
+  position: relative;
+  padding: 0;
+  border: none;
+  background: #e5e5e5;
+  box-shadow: none;
+  pointer-events: none;
+  width: 100%;
+  height: 2.5rem;
+}
+.bx--number.bx--skeleton:hover, .bx--number.bx--skeleton:focus, .bx--number.bx--skeleton:active {
+  border: none;
+  cursor: default;
+  outline: none;
+}
+.bx--number.bx--skeleton::before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  animation: 3000ms ease-in-out skeleton infinite;
+  background: #c6c6c6;
+  content: "";
+  will-change: transform-origin, transform, opacity;
+}
+@media (prefers-reduced-motion: reduce) {
+  .bx--number.bx--skeleton::before {
+    animation: none;
+  }
+}
+.bx--number.bx--skeleton input[type=number],
+.bx--number.bx--skeleton input[type=text] {
+  display: none;
+}
+
+/* stylelint-disable */
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
+  .bx--number__control-btn:hover,
+  .bx--number__control-btn:focus {
+    color: Highlight;
+    outline: 1px solid Highlight;
+  }
+}
+
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
+  .bx--number__control-btn {
+    outline: 1px solid transparent;
+  }
+}
+
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
+  .bx--number__control-btn svg {
+    fill: ButtonText;
+  }
+}
+
 /* stylelint-enable */
 html[dir=rtl] .bx--number .bx--number__input-wrapper input {
   min-width: 8.5rem;
@@ -26621,6 +27120,7 @@ a.bx--header__menu-item.bx--header__menu-item--current:focus {
   width: 16rem;
   border-right: 1px solid #393939;
   border-left: 1px solid #393939;
+  overflow-y: auto;
 }
 
 .bx--panel--overlay {