v3 UI

frontend/src/Components/Form/EnhancedSelectInput.css

@@ -0,0 +1,79 @@
+.tether {
+  z-index: 2000;
+}
+
+.enhancedSelect {
+  composes: input from 'Components/Form/Input.css';
+  composes: link from 'Components/Link/Link.css';
+
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 6px 16px;
+  width: 100%;
+  height: 35px;
+  border: 1px solid $inputBorderColor;
+  border-radius: 4px;
+  background-color: $white;
+  box-shadow: inset 0 1px 1px $inputBoxShadowColor;
+  color: $black;
+  cursor: default;
+}
+
+.hasError {
+  composes: hasError from 'Components/Form/Input.css';
+}
+
+.hasWarning {
+  composes: hasWarning from 'Components/Form/Input.css';
+}
+
+.isDisabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+.dropdownArrowContainer {
+  margin-left: 12px;
+}
+
+.dropdownArrowContainerDisabled {
+  composes: dropdownArrowContainer;
+
+  color: $disabledInputColor;
+}
+
+.optionsContainer {
+  width: auto;
+}
+
+.options {
+  border: 1px solid $inputBorderColor;
+  border-radius: 4px;
+  background-color: $white;
+}
+
+.optionsModal {
+  display: flex;
+  justify-content: center;
+  max-width: 90%;
+  width: 350px !important;
+  height: auto !important;
+}
+
+.optionsModalBody {
+  composes: modalBody from 'Components/Modal/ModalBody.css';
+
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  padding: 10px 0;
+}
+
+.optionsModalScroller {
+  composes: scroller from 'Components/Scroller/Scroller.css';
+
+  border: 1px solid $inputBorderColor;
+  border-radius: 4px;
+  background-color: $white;
+}