@deephaven/components 0.55.1-beta.1 → 0.55.1-beta.8

package/css/BaseStyleSheet.css

@@ -10845,13 +10845,18 @@ a.text-foreground:hover, a.text-foreground:focus {
   visibility: hidden !important;
 }
 
+:root {
+  --dh-svg-inline-icon-size: 16px;
+  --scrollbar-color: 255, 255, 255;
+}
+
 html {
   font-size: 14px;
   min-height: 100%;
 }
 
 .svg-inline--fa {
-  font-size: 16px;
+  font-size: var(--dh-svg-inline-icon-size);
   vertical-align: -3px;
 }
 
@@ -11181,6 +11186,16 @@ form label small {
   border: 1px solid #4878ea;
 }
 
+.form-control.is-invalid,
+.form-control.is-invalid:focus {
+  border-color: var(--dh-color-form-control-error);
+  background-image: var(--dh-svg-icon-error);
+}
+
+.form-control.is-invalid:focus {
+  box-shadow: 0 0 0 0.2rem var(--dh-color-form-control-error-shadow);
+}
+
 .form-control.btn:focus {
   box-shadow: 0 0 0 0.2rem rgba(72, 120, 234, 0.35);
 }
@@ -11236,9 +11251,32 @@ form label small {
   cursor: not-allowed;
 }
 
+.custom-select {
+  background-image: var(--dh-svg-icon-select-indicator);
+  background-size: 10px 6px;
+}
+.custom-select:hover {
+  background-image: var(--dh-svg-icon-select-indicator-hover);
+}
+.custom-select.is-invalid, .custom-select.is-invalid:focus {
+  border-color: var(--dh-color-form-control-error);
+  background-size: 10px 6px, 16px;
+  background-image: var(--dh-svg-icon-select-indicator), var(--dh-svg-icon-error);
+}
+.custom-select.is-invalid:hover {
+  background-image: var(--dh-svg-icon-select-indicator-hover), var(--dh-svg-icon-error);
+}
+.custom-select.is-invalid:focus {
+  box-shadow: 0 0 0 0.2rem var(--dh-color-form-control-error-shadow);
+}
+
 .custom-select:disabled {
   border-color: #1a171a;
   cursor: not-allowed;
+  background-image: var(--dh-svg-icon-select-indicator-disabled);
+}
+.custom-select:disabled.is-invalid {
+  background-image: var(--dh-svg-icon-select-indicator-disabled), var(--dh-svg-icon-error);
 }
 
 input[type=number] {
@@ -11266,12 +11304,8 @@ input[type=number]::-webkit-inner-spin-button {
 }
 
 .input-group > .input-group-append.cb-dropdown > .btn {
-  color: #929192;
   border: 1px solid #929192;
 }
-.input-group > .input-group-append.cb-dropdown > .btn:hover {
-  color: #f0f0ee;
-}
 .input-group > .input-group-append.cb-dropdown > .btn:focus {
   border-color: rgba(72, 120, 234, 0.85);
 }
@@ -11414,12 +11448,6 @@ input[type=number]::-webkit-inner-spin-button {
   background: rgba(var(--scrollbar-color), 0.35);
 }
 
-/* stylelint-disable no-descending-specificity */
-:root {
-  --scrollbar-color: 255, 255, 255;
-}
-
-/* stylelint-enable no-descending-specificity */
 .theme-bg-light {
   --scrollbar-color: 0, 0, 0;
   scrollbar-color: rgba(26, 23, 26, 0.5) rgba(26, 23, 26, 0.3);
@@ -11476,18 +11504,36 @@ input[type=number]::-webkit-inner-spin-button {
   .custom-select {
     background-color: inherit !important;
     color: #f0f0ee;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23929192' d='M4 7l-.4-.8 4-3.7h.8l4 3.7-.4.8H4zm0 2l-.4.8 4 3.7h.8l4-3.7L12 9H4z'/%3E%3C/svg%3E"), linear-gradient(0deg, #555356, #555356);
-    background-size: 16px 16px, cover;
+    background-image: var(--dh-svg-icon-select-indicator), linear-gradient(0deg, #555356, #555356);
+    background-size: 10px 6px, cover;
+    background-position-x: right 0.75rem, center;
+    background-position-y: bottom 50%, center;
     background-repeat: no-repeat;
-    background-position: bottom 50% right 0.75rem, center;
   }
   .custom-select:-moz-focusring {
     color: rgba(0, 0, 0, 0);
     text-shadow: 0 0 0 #f0f0ee !important;
   }
+  .custom-select:hover {
+    background-image: var(--dh-svg-icon-select-indicator-hover), linear-gradient(0deg, #555356, #555356);
+  }
+  .custom-select.is-invalid, .custom-select.is-invalid:focus {
+    background-image: var(--dh-svg-icon-select-indicator), var(--dh-svg-icon-error), linear-gradient(0deg, #555356, #555356);
+    background-size: 10px 6px, 16px, cover;
+    background-position-x: right 0.75rem, right 1.75rem, center;
+  }
+  .custom-select.is-invalid:hover {
+    background-image: var(--dh-svg-icon-select-indicator-hover), var(--dh-svg-icon-error), linear-gradient(0deg, #555356, #555356);
+  }
+  .custom-select:disabled {
+    background-image: var(--dh-svg-icon-select-indicator), linear-gradient(0deg, #373438, #373438);
+  }
+  .custom-select:disabled.is-invalid {
+    background-image: var(--dh-svg-icon-select-indicator), var(--dh-svg-icon-error), linear-gradient(0deg, #373438, #373438);
+  }
 
   .console-creator .custom-select {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23929192' d='M4 7l-.4-.8 4-3.7h.8l4 3.7-.4.8H4zm0 2l-.4.8 4 3.7h.8l4-3.7L12 9H4z'/%3E%3C/svg%3E"), linear-gradient(0deg, #403e41, #403e41);
+    background-image: var(--dh-svg-icon-select-indicator), linear-gradient(0deg, #403e41, #403e41);
   }
   .console-creator .custom-select:-moz-focusring {
     color: rgba(0, 0, 0, 0);
@@ -11495,7 +11541,7 @@ input[type=number]::-webkit-inner-spin-button {
   }
 
   .modal-dialog.theme-bg-light .custom-select {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23929192' d='M4 7l-.4-.8 4-3.7h.8l4 3.7-.4.8H4zm0 2l-.4.8 4 3.7h.8l4-3.7L12 9H4z'/%3E%3C/svg%3E"), linear-gradient(0deg, #f0f0ee, #f0f0ee);
+    background-image: var(--dh-svg-icon-select-indicator), linear-gradient(0deg, #f0f0ee, #f0f0ee);
   }
   .modal-dialog.theme-bg-light .custom-select:-moz-focusring {
     color: rgba(0, 0, 0, 0);