refactor(checkbox): remove default padding (#1869)

akveo · Oct 9, 2019 · ec29ca7 · ec29ca7
1 parent 599c567
commit ec29ca7
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 3 deletions.
diff --git a/src/framework/theme/components/checkbox/_checkbox.component.theme.scss b/src/framework/theme/components/checkbox/_checkbox.component.theme.scss
@@ -4,8 +4,14 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
+@import '../../styles/core/mixins';
+
 @mixin nb-checkbox-theme() {
   nb-checkbox {
+    .label {
+      padding: nb-theme(checkbox-padding);
+    }
+
     .custom-checkbox {
       width: nb-theme(checkbox-width);
       height: nb-theme(checkbox-height);
@@ -104,6 +110,11 @@
       font-size: nb-theme(checkbox-text-font-size);
       font-weight: nb-theme(checkbox-text-font-weight);
       line-height: nb-theme(checkbox-text-line-height);
+
+      &:not(:empty) {
+        @include nb-ltr(padding-left, nb-theme(checkbox-text-space));
+        @include nb-rtl(padding-right, nb-theme(checkbox-text-space));
+      }
     }
   }
 

diff --git a/src/framework/theme/components/checkbox/checkbox.component.scss b/src/framework/theme/components/checkbox/checkbox.component.scss
@@ -7,7 +7,6 @@
     align-items: center;
     margin: 0;
     min-height: inherit;
-    padding: 0.375rem 1.5rem 0.375rem 0;
   }
 
   .custom-checkbox {
@@ -17,7 +16,5 @@
 
   .text {
     transition: color 0.15s ease-in;
-    @include nb-ltr(padding-left, 0.6875rem);
-    @include nb-rtl(padding-right, 0.6875rem);
   }
 }
diff --git a/src/framework/theme/styles/themes/_mapping.scss b/src/framework/theme/styles/themes/_mapping.scss
@@ -957,6 +957,8 @@ $eva-mapping: (
   checkbox-text-font-size: text-subtitle-2-font-size,
   checkbox-text-font-weight: text-subtitle-2-font-weight,
   checkbox-text-line-height: text-subtitle-2-line-height,
+  checkbox-text-space: 0.6875rem,
+  checkbox-padding: 0,
 
   checkbox-focus-background-color: color-basic-transparent-500,
   checkbox-focus-border-color: color-basic-focus,