Merge pull request #1416 from pat270/clay-1415

Fixes #1415 - ClayCSS Custom Checkbox / Radio calculate spacing based…
liferay · Jan 8, 2019 · 6de4313 · 6de4313
2 parents 4e9d312 + 6cb1b8d
commit 6de4313
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 4 deletions.
diff --git a/packages/clay-css/src/scss/atlas/variables/_custom-forms.scss b/packages/clay-css/src/scss/atlas/variables/_custom-forms.scss
@@ -42,7 +42,6 @@ $custom-control-indicator-indeterminate-border-color: $custom-control-indicator-
 
 $custom-control-description-font-size: $input-label-font-size !default; // 13px
 $custom-control-description-disabled-color: $input-label-disabled-color !default;
-$custom-control-description-line-height: $custom-control-indicator-size + ($custom-control-indicator-border-width * 2) !default;
 
 // Custom Checkbox
 

diff --git a/packages/clay-css/src/scss/components/_custom-forms.scss b/packages/clay-css/src/scss/components/_custom-forms.scss
@@ -63,6 +63,10 @@
 // Custom Checkbox and Radio
 
 .custom-control {
+	margin-bottom: $custom-control-margin-bottom;
+	margin-top: $custom-control-margin-top;
+	min-height: $custom-control-min-height;
+
 	label {
 		cursor: $custom-control-description-cursor;
 		font-size: $font-size-base;
@@ -91,10 +95,12 @@ label.custom-control-label {
 	border-width: $custom-control-indicator-border-width;
 	font-size: $custom-control-indicator-size;
 	left: 0;
+	top: $custom-control-indicator-position-top;
 }
 
 .custom-control-label::after {
 	left: 0;
+	top: $custom-control-indicator-position-top;
 }
 
 .custom-control-input {
@@ -193,7 +199,7 @@ label.custom-control-label {
 .custom-control-input {
 	height: $custom-control-indicator-size;
 	left: 0;
-	top: (($line-height-base - $custom-control-indicator-size) / 2);
+	top: $custom-control-indicator-position-top;
 	width: $custom-control-indicator-size;
 	z-index: 0;
 }

diff --git a/packages/clay-css/src/scss/variables/_custom-forms.scss b/packages/clay-css/src/scss/variables/_custom-forms.scss
@@ -1,6 +1,7 @@
 $custom-control-indicator-border-color: null !default;
 $custom-control-indicator-border-style: null !default;
 $custom-control-indicator-border-width: null !default;
+$custom-control-indicator-position-top: 0.25rem !default;
 
 $custom-control-indicator-active-border-color: null !default;
 
@@ -31,11 +32,17 @@ $custom-control-indicator-checked-disabled-border-color: $custom-control-indicat
 
 $custom-control-indicator-indeterminate-border-color: null !default;
 
+// Custom Control
+
+$custom-control-margin-bottom: null !default;
+$custom-control-margin-top: null !default;
+$custom-control-min-height: $custom-control-indicator-size + ($custom-control-indicator-position-top * 2) !default;
+
 // Custom Description
 
 $custom-control-description-cursor: $form-check-label-cursor !default;
-$custom-control-description-font-size: null !default;
-$custom-control-description-line-height: $custom-control-indicator-size !default;
+$custom-control-description-font-size: 1rem !default; // 16px
+$custom-control-description-line-height: $custom-control-min-height !default;
 $custom-control-description-padding-left: 0.5rem !default; // 8px
 $custom-control-description-disabled-cursor: $disabled-cursor !default;