Fix custom fields

1 files changed, 59 insertions, 58 deletions

diff --git a/src/assets/styles/bmc/_sila/_forms.scss b/src/assets/styles/bmc/_sila/_forms.scss
index 78866762..a69ea4d4 100644
--- a/src/assets/styles/bmc/_sila/_forms.scss
+++ b/src/assets/styles/bmc/_sila/_forms.scss
@@ -17,25 +17,24 @@
 div:not(.search-global) > .form-group {
   margin-bottom: $spacer * 2;
   position: relative;
-  & .input-group,
+  .input-group,
   .input-password-toggle-container {
     position: initial;
   }
-  & small {
+  small {
     font-size: x-small;
-    text-align: right;
-    margin-right: 10px;
+    margin-right: 3px;
   }
-  & .custom-radio + small {
+  .custom-radio + small {
     text-align: left;
   }
-  & label + div > small {
+  label + div > small {
     position: absolute;
     right: 10px;
     top: 0;
     margin-right: 0;
   }
-  & .form-control,
+  .form-control,
   .input-group-prepend,
   .input-group-text,
   .custom-select {
@@ -47,42 +46,42 @@ div:not(.search-global) > .form-group {
       position: initial;
     }
   }
-  & .custom-select {
+  .custom-select {
     background-color: $gray-5;
     border: none;
   }
-  & .custom-select:disabled,
+  .custom-select:disabled,
   .form-control:disabled {
     position: initial;
   }
-  & .input-group-text {
+  .input-group-text {
     border: none;
     background-color: $gray-5;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
   }
-  & .input-group-prepend {
+  .input-group-prepend {
     position: absolute;
     & .input-group-text {
       background-color: transparent;
     }
   }
-  & .input-group-prepend + input {
+  .input-group-prepend + input {
     padding-left: 65px;
     position: initial;
   }
-  & .btn-datepicker {
+  .btn-datepicker {
     top: 12px;
   }
-  & .input-action-btn {
+  .input-action-btn {
     top: 12px;
   }
-  & > label {
+  label {
     position: relative;
     color: $text-tretiatry;
     margin-left: 10px;
     margin-bottom: $spacer / 4;
-    & span {
+    span {
       font-size: smaller;
     }
   }
@@ -110,11 +109,6 @@ div:not(.search-global) > .form-group {
   }
 }
 
-.custom-select {
-  background-image: url("~@/assets/images/_sila/chevron-down.svg");
-  background-size: 18px;
-}
-
 .form-control::-webkit-outer-spin-button,
 .form-control::-webkit-inner-spin-button {
   -webkit-appearance: none;
@@ -175,37 +169,63 @@ div:not(.search-global) > .form-group {
   }
 }
 
-.custom-checkbox ::before {
-  box-shadow: none !important;
-  border: 2px solid $on-surface-secondary;
-  background-color: #fff;
-  border-radius: 3px;
+.custom-select {
+  background-image: url("~@/assets/images/_sila/chevron-down.svg");
+  background-size: 18px;
 }
 
 .custom-control-label > span {
   vertical-align: sub;
 }
 
-.custom-radio > .custom-control-label::before {
-  margin-top: -5px;
+.custom-radio,
+.custom-checkbox {
+  .custom-control-label::before,
+  .custom-control-label::after {
+    margin-top: -5px;
+  }
+}
+
+.custom-checkbox {
+  padding-left: $spacer;
+  .custom-control-label::before,
+  .custom-control-label::after {
+    border-radius: $border-radius / 2;
+    background-color: #fff;
+    border: 2px solid $on-surface-secondary;
+    box-shadow: none;
+  }
+}
+
+.custom-radio {
+  .custom-control-input:checked ~ .custom-control-label::after {
+    background-image: none;
+  }
+  .custom-control-input:checked ~ .custom-control-label::before {
+    box-shadow: 0px 0px 0px 3px $white inset;
+  }
+}
+
+.custom-switch {
+  width: 28px;
+  height: 16px;
+  .custom-control-input ~ .custom-control-label::after {
+    border: 1px solid $gray-20;
+    background: $white;
+  }
+  .custom-control-input ~ .custom-control-label::before {
+    border: 1px solid $gray-20;
+    background: rgba(4, 10, 15, 0.3);
+  }
 }
 
+.custom-control-input:checked ~ .custom-control-label::before,
 .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after,
 .custom-checkbox
   .custom-control-input:indeterminate
-  ~ .custom-control-label::before,
-.custom-control-input:checked ~ .custom-control-label::before {
+  ~ .custom-control-label::before {
   border: 1px solid $red !important;
   background-color: $red !important;
-  box-shadow: 0px 0px 0px 3px $white inset;
-  cursor: pointer;
-  &:focus {
-    box-shadow: none !important;
-  }
-}
-
-.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
-  background-image: none;
 }
 
 .custom-control {
@@ -218,20 +238,6 @@ div:not(.search-global) > .form-group {
   }
 }
 
-.custom-switch {
-  width: 28px;
-  height: 16px;
-}
-
-.custom-switch .custom-control-input:focus ~ .custom-control-label::before {
-  box-shadow: none;
-}
-
-.custom-switch .custom-control-input ~ .custom-control-label::after {
-  border: 1px solid $gray-20;
-  background: $white;
-}
-
 .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
   border-color: $gray-20;
 }
@@ -241,11 +247,6 @@ div:not(.search-global) > .form-group {
   border-color: $gray-20;
 }
 
-.custom-switch .custom-control-input ~ .custom-control-label::before {
-  border: 1px solid $gray-20;
-  background: rgba(4, 10, 15, 0.3);
-}
-
 .custom-control-label::after {
   cursor: pointer;
 }