[#1584] Create custom antd input styles

akvo · Sep 1, 2023 · 3247c19 · 3247c19
1 parent f813e99
commit 3247c19
Showing 1 changed file with 30 additions and 0 deletions.
diff --git a/frontend/src/styles/inputs.scss b/frontend/src/styles/inputs.scss
@@ -0,0 +1,30 @@
+#root,
+.ant-modal-root {
+  .ant-input,
+  .ant-input-number-input,
+  .ant-input-affix-wrapper {
+    background-color: $primaryGrey;
+    color: $primaryDarkBlue;
+    font-size: $fzXS;
+    line-height: $lhXS;
+    &::placeholder {
+      color: $primaryDarkBlue4;
+    }
+  }
+  .ant-select:not(.ant-select-customize-input),
+  .ant-select-selector,
+  .ant-input-affix-wrapper {
+    min-height: 42px;
+    border: none;
+  }
+  .ant-select-single.ant-select-show-arrow .ant-select-selection-item,
+  .ant-select-single.ant-select-show-arrow .ant-select-selection-placeholder {
+    padding-top: 4px;
+  }
+  .ant-input-status-error:not(.ant-input-disabled):not(.ant-input-borderless).ant-input,
+  .ant-input-status-error:not(.ant-input-disabled):not(.ant-input-borderless).ant-input:hover {
+    border-width: 2px;
+    border-color: $systemError3;
+    background-color: $primaryGrey;
+  }
+}