Update: (liferay#429) Badges added option to configure `$badge-spacer…

…-x` and `$badge-spacer-y` Update: (liferay#429) Labels added option to configure `$label-spacer-x` and `$label-spacer-y`
pat270 · Jan 22, 2018 · a5c943a · a5c943a
1 parent 235a2b6
commit a5c943a
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 4 deletions.
diff --git a/packages/clay/src/scss/components/_badges.scss b/packages/clay/src/scss/components/_badges.scss
@@ -3,8 +3,8 @@
 	border-style: $badge-border-style;
 	border-width: $badge-border-width;
 	line-height: $badge-line-height;
-	margin-bottom: 2px;
-	margin-top: 2px;
+	margin-bottom: $badge-spacer-y;
+	margin-top: $badge-spacer-y;
 	max-width: 100%;
 	white-space: inherit;
 	word-wrap: break-word;
@@ -19,6 +19,10 @@
 		}
 	}
 
+	~ .badge {
+		margin-left: $badge-spacer-x;
+	}
+
 	.inline-item {
 		a {
 			align-items: center;

diff --git a/packages/clay/src/scss/components/_labels.scss b/packages/clay/src/scss/components/_labels.scss
@@ -10,8 +10,8 @@
 	font-size: $label-font-size;
 	font-weight: $label-font-weight;
 	line-height: $label-height - ($label-border-width * 2);
-	margin-bottom: 2px;
-	margin-top: 2px;
+	margin-bottom: $label-spacer-y;
+	margin-top: $label-spacer-y;
 	max-width: 100%;
 	padding-bottom: $label-padding-y;
 	padding-left: $label-padding-x;
@@ -32,6 +32,10 @@
 		}
 	}
 
+	~ .label {
+		margin-left: $label-spacer-x;
+	}
+
 	.inline-item {
 		a {
 			align-items: center;

diff --git a/packages/clay/src/scss/variables/_badges.scss b/packages/clay/src/scss/variables/_badges.scss
@@ -3,6 +3,9 @@ $badge-border-style: solid !default;
 $badge-border-width: 1px !default;
 $badge-line-height: null !default;
 
+$badge-spacer-x: 0.25rem !default; // 4px
+$badge-spacer-y: 0.125rem !default; // 2px
+
 $badge-lexicon-icon-height: 0.7em !default;
 $badge-lexicon-icon-margin-top: -0.1em !default;
 $badge-lexicon-icon-width: auto !default;

diff --git a/packages/clay/src/scss/variables/_labels.scss b/packages/clay/src/scss/variables/_labels.scss
@@ -6,6 +6,8 @@ $label-font-weight: $font-weight-bold !default;
 $label-height: 1.25rem !default; // 20px
 $label-padding-x: 0.4375rem !default; // 7px
 $label-padding-y: null !default; // 3px
+$label-spacer-x: 0.25rem !default; // 4px
+$label-spacer-y: 0.125rem !default; // 2px
 $label-text-transform: null !default;
 
 $label-lexicon-icon-height: 0.7em !default;