Merge pull request #1378 from pat270/clay-1377

Fixes #1377 - ClayCSS Toggle Switch Bar should use `$toggle-switch-ba…
liferay · Dec 10, 2018 · 3697379 · 3697379
2 parents 547e3e9 + 6afa343
commit 3697379
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/packages/clay-css/src/scss/components/_toggle-switch.scss b/packages/clay-css/src/scss/components/_toggle-switch.scss
@@ -32,7 +32,7 @@
 		cursor: pointer;
 		display: block;
 		float: left;
-		font-size: 0.75rem;
+		font-size: $toggle-switch-bar-font-size;
 		height: $toggle-switch-bar-height;
 		line-height: $toggle-switch-bar-height;
 		position: relative;
@@ -189,7 +189,7 @@
 .toggle-switch-text {
 	clear: both;
 	display: block;
-	font-size: 0.75rem;
+	font-size: $toggle-switch-text-font-size;
 }
 
 .toggle-switch-text-left {

diff --git a/packages/clay-css/src/scss/variables/_toggle-switch.scss b/packages/clay-css/src/scss/variables/_toggle-switch.scss
@@ -17,7 +17,7 @@ $toggle-switch-bar-border-color: $input-group-addon-border-color !default;
 $toggle-switch-bar-border-radius: 3px !default;
 $toggle-switch-bar-border-width: 1px !default;
 $toggle-switch-bar-focus-box-shadow: 0 0 3px 2px #66AFE6 !default;
-$toggle-switch-bar-font-size: 12px !default;
+$toggle-switch-bar-font-size: 0.75rem !default; // 12px
 $toggle-switch-bar-font-size-mobile: $toggle-switch-bar-font-size !default;
 $toggle-switch-bar-icon-color: $input-color !default;
 
@@ -42,4 +42,8 @@ $toggle-switch-button-on-icon-color: $toggle-switch-bar-on-bg !default;
 // Toggle Switch Disabled
 
 $toggle-switch-disabled-cursor: $disabled-cursor !default;
-$toggle-switch-disabled-opacity: 0.4 !default;
+$toggle-switch-disabled-opacity: 0.4 !default;
+
+// Toggle Switch Text
+
+$toggle-switch-text-font-size: 0.75rem !default;