Update: (Fixes #490) Tweak font-sizes to match Lexicon V2

Update: Table title should use `$font-size-base` Update: Table Action Link should inherit dropdown action styles New: Added option to configure `btn-monospaced-font-size` and `btn-monospaced-font-size-mobile` to `clay-navbar-size` mixin Update: Atlas Application Bar and Management Bar icons should be 1rem
liferay · Jan 29, 2018 · c065781 · c065781
1 parent 7e1d980
commit c065781
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 3 deletions.
diff --git a/packages/clay/src/scss/atlas/variables/_tables.scss b/packages/clay/src/scss/atlas/variables/_tables.scss
@@ -41,7 +41,8 @@ $table-action-link: map-merge((
 	color: $dropdown-action-toggle-color,
 	font-size: 1rem, // 16px
 	hover-bg: $dropdown-action-toggle-hover-bg,
-	hover-color: $dropdown-action-toggle-hover-color
+	hover-color: $dropdown-action-toggle-hover-color,
+	active-bg: $dropdown-action-toggle-active-bg
 ), $table-action-link);
 
 // Table Link

diff --git a/packages/clay/src/scss/mixins/_navbar.scss b/packages/clay/src/scss/mixins/_navbar.scss
@@ -21,6 +21,7 @@
 	$link-margin-y: setter(map-get($map, link-margin-y), (($height - $border-bottom-width - $border-top-width) - $link-height) / 2);
 	$link-padding-x: setter(map-get($map, link-padding-x), $navbar-nav-link-padding-x);
 	$link-padding-y: setter(map-get($map, link-padding-y), ($link-height - ($font-size * $line-height-base)) / 2);
+	$btn-monospaced-font-size: map-get($map, btn-monospaced-font-size);
 	$btn-monospaced-size: map-get($map, btn-monospaced-size);
 	$btn-margin-x: setter(map-get($map, btn-margin-x), $link-padding-x);
 	$btn-margin-y: setter(map-get($map, btn-margin-y), ($height - $border-bottom-width - $border-top-width - ($padding-y * 2) - if($btn-monospaced-size, $btn-monospaced-size, $nav-item-monospaced-size)) / 2);
@@ -45,6 +46,7 @@
 	$link-margin-y-mobile: setter(map-get($map, link-margin-y-mobile), (($height-mobile - $border-bottom-width - $border-top-width) - $link-height-mobile) / 2);
 	$link-padding-x-mobile: setter(map-get($map, link-padding-x-mobile), $link-padding-x);
 	$link-padding-y-mobile: setter(map-get($map, link-padding-y-mobile), ($link-height-mobile - ($font-size-mobile * $line-height-base)) / 2);
+	$btn-monospaced-font-size-mobile: setter(map-get($map, btn-monospaced-font-size-mobile), $btn-monospaced-font-size);
 	$btn-monospaced-size-mobile: setter(map-get($map, btn-monospaced-size-mobile), $btn-monospaced-size);
 	$btn-margin-x-mobile: setter(map-get($map, btn-margin-x-mobile), $link-padding-x-mobile);
 	$btn-margin-y-mobile: setter(map-get($map, btn-margin-y-mobile), ($height-mobile - $border-bottom-width - $border-top-width - ($padding-y * 2) - if($btn-monospaced-size-mobile, $btn-monospaced-size-mobile, $nav-item-monospaced-size)) / 2);
@@ -141,6 +143,10 @@
 				min-width: $btn-monospaced-size-mobile;
 			}
 
+			.nav-btn-monospaced {
+				font-size: $btn-monospaced-font-size-mobile;
+			}
+
 			.nav-item {
 				> .custom-control,
 				> .form-check {
@@ -162,6 +168,7 @@
 			}
 
 			.nav-link-monospaced {
+				font-size: $btn-monospaced-font-size-mobile;
 				margin-bottom: $btn-margin-y-mobile;
 				margin-left: $btn-margin-x-mobile;
 				margin-right: $btn-margin-x-mobile;
@@ -275,6 +282,12 @@
 							}
 						}
 
+						.nav-btn-monospaced {
+							@if ($scaling-navbar) {
+								font-size: $btn-monospaced-font-size;
+							}
+						}
+
 						.nav-item {
 							> .custom-control,
 							> .form-check {
@@ -301,6 +314,7 @@
 
 						.nav-link-monospaced {
 							@if ($scaling-navbar) {
+								font-size: $btn-monospaced-font-size;
 								margin-bottom: $btn-margin-y;
 								margin-left: $btn-margin-x;
 								margin-right: $btn-margin-x;

diff --git a/packages/clay/src/scss/variables/_application-bar.scss b/packages/clay/src/scss/variables/_application-bar.scss
@@ -3,6 +3,7 @@ $application-bar-size: map-merge((
 	scaling-navbar: true,
 	height: 3.5rem,
 	height-mobile: 3rem,
+	btn-monospaced-font-size: 1rem,
 	link-height: 2rem,
 	link-height-mobile: 2rem,
 	link-margin-x: 0.5rem,

diff --git a/packages/clay/src/scss/variables/_management-bar.scss b/packages/clay/src/scss/variables/_management-bar.scss
@@ -6,6 +6,7 @@ $management-bar-size: map-merge((
 	border-bottom-width: 0.0625rem,
 	padding-x: 0,
 	padding-y: 0,
+	btn-monospaced-font-size: 1rem,
 	link-height: 2rem,
 	link-height-mobile: 2rem,
 	link-margin-x: 0.5rem,

diff --git a/packages/clay/src/scss/variables/_tables.scss b/packages/clay/src/scss/variables/_tables.scss
@@ -31,7 +31,7 @@ $table-cell-expand-min-width: 12.5rem !default; // 200px
 
 $table-title: () !default;
 $table-title: map-merge((
-	font-size: 1rem, // 16px
+	font-size: $font-size-base, // 16px
 	font-weight: $font-weight-semi-bold,
 	line-height: $line-height-base,
 	margin-bottom: 0
@@ -55,6 +55,7 @@ $table-link: map-merge((
 $table-action-link: () !default;
 $table-action-link: map-merge((
 	align-items: center,
+	border-radius: $btn-border-radius,
 	display: inline-flex,
 	height: 2rem,
 	justify-content: center,
@@ -98,7 +99,7 @@ $table-list-quick-action-menu-hover-bg: $table-list-hover-bg !default;
 
 $table-list-title: () !default;
 $table-list-title: map-merge((
-	font-size: 1rem, // 16px
+	font-size: $font-size-base, // 16px
 	font-weight: $font-weight-semi-bold,
 	line-height: $headings-line-height,
 	margin-bottom: 0