[#1584] Add systemInfo color & fix custom antd inputs

akvo · Sep 4, 2023 · a936f0e · a936f0e
1 parent 9610abd
commit a936f0e
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 25 deletions.
diff --git a/frontend/src/styles/inputs.scss b/frontend/src/styles/inputs.scss
@@ -1,30 +1,63 @@
 #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-form {
+ .ant-row {
+ .ant-input,
+ .ant-input-affix-wrapper {
+ height: 54px;
+ }
+ .ant-input,
+ .ant-select-selector,
+ .ant-input-affix-wrapper {
+ border-radius: 8px;
+ color: $primaryDarkBlue;
+ background-color: $primaryGrey;
+ &::placeholder {
+ color: $primaryDarkBlue4;
+ }
+ &:focus {
+ box-shadow: 0px 0px 0px 2px $systemInfo3;
+ }
+ }
+ .ant-input-affix-wrapper {
+ .ant-input {
+ height: auto;
+ background: transparent;
+ border-radius: 0;
+ }
+ }
+ .ant-input-status-error:not(.ant-input-disabled):not(.ant-input-borderless).ant-input,
+ .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper,
+ .ant-select-status-error.ant-select:not(.ant-select-disabled):not(.ant-select-customize-input):not(.ant-pagination-size-changer)
+ .ant-select-selector {
+ border-width: 2px;
+ border-color: $systemError3 !important;
+ }
+ .ant-select-selector {
+ height: 52px;
+ }
+ .ant-select-single {
+ &.ant-select-show-arrow {
+ .ant-select-selection-item,
+ .ant-select-selection-placeholder {
+ padding-top: 4px;
+ }
+ .ant-select-selection-item {
+ color: $primaryDarkBlue;
+ }
+ }
+ }
+ .ant-switch:focus,
+ .ant-switch-checked:focus {
+ outline-width: 2px;
+ outline-offset: 2px;
+ outline-color: $primaryPurple;
+ outline-style: solid;
+ box-shadow: none;
+ }
+ .ant-switch-checked {
+ background-color: $primaryPurple;
+ }
  }
  }
- .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;
- }
 }
diff --git a/frontend/src/styles/vars.scss b/frontend/src/styles/vars.scss
@@ -15,6 +15,7 @@ $primaryDarkBlue4: #677194;
 $primaryDarkBlue5: #344170;
 $primaryNeutral4: #777e90;
 $systemError3: #e00909;
+$systemInfo3: #1d90f5;
 // Headings
 $fzXXXL: 64px;
 $lhXXXL: 72px;