fix (bootstrap): fix alignment styles

Closes: akveo#223
dimaatkaev · Feb 15, 2018 · d2d772b · d2d772b
1 parent 49be645
commit d2d772b
Showing 1 changed file with 18 additions and 4 deletions.
diff --git a/src/framework/theme/styles/global/bootstrap/_custom-forms.scss b/src/framework/theme/styles/global/bootstrap/_custom-forms.scss
@@ -17,14 +17,20 @@
     margin: 0;
     min-height: inherit;
     padding: 0.375rem 1.5rem;
+    display: flex;
+    align-items: center;
 
     .custom-control-indicator {
       background-color: nb-theme(checkbox-bg);
       width: nb-theme(checkbox-size);
       height: nb-theme(checkbox-size);
       border: nb-theme(checkbox-border-size) solid nb-theme(checkbox-border-color);
-      top: 50%;
-      transform: translateY(-50%);
+      flex-shrink: 0;
+      position: absolute;
+      left: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
     }
 
     &.custom-checkbox > .custom-control-input:checked ~ .custom-control-indicator::before {
@@ -36,15 +42,23 @@
       transform: rotate(45deg);
     }
 
+    .custom-control-label {
+      &::before {
+        top: auto;
+      }
+
+      &::after {
+        top: 0.35rem;
+      }
+    }
+
     &.custom-radio > .custom-control-input:checked ~ .custom-control-indicator::before {
       content: '';
       width: 0.75rem;
       height: 0.75rem;
       background-color: nb-theme(radio-fg);
       border-radius: 50%;
       position: absolute;
-      top: 15%;
-      left: 2px;
     }
 
     .custom-control-input {