SILABMC-191: Fix to design input fields

1 files changed, 95 insertions, 13 deletions

diff --git a/src/assets/styles/bmc/_sila/_forms.scss b/src/assets/styles/bmc/_sila/_forms.scss
index 6ef725d2..d95de71e 100644
--- a/src/assets/styles/bmc/_sila/_forms.scss
+++ b/src/assets/styles/bmc/_sila/_forms.scss
@@ -14,30 +14,112 @@
   line-height: $form-line-height;
 }
 
+// div:not(.search-global) > .form-group {
+//   margin-bottom: $spacer * 2;
+//   position: relative;
+//   & .input-group,
+//   .input-password-toggle-container {
+//     position: initial;
+//   }
+//   & label + div > small {
+//     position: absolute;
+//     right: 10px;
+//     top: 0;
+//     font-size: x-small;
+//   }
+//   & .form-control,
+//   .input-group-prepend,
+//   .input-group-text,
+//   .custom-select {
+//     margin: -28px 0 0 0;
+//     padding-top: 28px;
+//     height: 56px;
+//     &:focus {
+//       z-index: unset;
+//       position: initial;
+//     }
+//   }
+//   & .custom-select {
+//     background-color: $gray-5;
+//     border: none;
+//   }
+//   & .input-group-text {
+//     border: none;
+//     background-color: $gray-5;
+//     border-top-right-radius: 0;
+//     border-bottom-right-radius: 0;
+//   }
+//   & .input-group-prepend + input {
+//     border-top-left-radius: 0;
+//     border-bottom-left-radius: 0;
+//     position: initial;
+//   }
+//   & .btn-datepicker {
+//     top: 12px;
+//   }
+//   & .input-action-btn {
+//     top: 12px;
+//   }
+//   & > label {
+//     position: relative;
+//     color: $text-tretiatry;
+//     margin-left: 10px;
+//     margin-bottom: $spacer / 4;
+//     & span {
+//       font-size: smaller;
+//     }
+//   }
+// }
 .form-group {
   margin-bottom: $spacer * 2;
   position: relative;
-  & > div > .input-group {
+  & .input-group,
+  .input-password-toggle-container {
     position: initial;
-    & > .form-control-with-button {
-      margin: -28px 0 0 0;
-      padding-top: 28px;
-      height: 56px;
-      &:focus {
-        z-index: unset;
-        position: initial;
-      }
-    }
-    & > .input-action-btn,
-    .btn-datepicker {
-      top: 12px;
+  }
+  & label + div > small {
+    position: absolute;
+    right: 10px;
+    top: 0;
+    font-size: x-small;
+  }
+  & .form-control,
+  .input-group-prepend,
+  .input-group-text {
+    margin: -28px 0 0 0;
+    padding-top: 28px;
+    height: 56px;
+    &:focus {
+      z-index: unset;
+      position: initial;
     }
   }
+
+  & .input-group-text {
+    border: none;
+    background-color: $gray-5;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  & .input-group-prepend + input {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    position: initial;
+  }
+  & .btn-datepicker {
+    top: 12px;
+  }
+  & .input-action-btn {
+    top: 12px;
+  }
   & > label {
     position: relative;
     color: $text-tretiatry;
     margin-left: 10px;
     margin-bottom: $spacer / 4;
+    & span {
+      font-size: smaller;
+    }
   }
 }