Merge pull request #452 from material-components/fix/card-margin

Fix card spacing; Fix button spacing

Author: emeaguiar

plugin/assets/css/src/_frontend.css

@@ -25,7 +25,6 @@
 @import "typography.css";
 @import "./components/contact-form.css";
 @import "./components/masonry-grid.css";
-@import "./components/card.css";
 @import "./components/core.css";
 @import "../../src/block-editor/blocks/common-posts-list/style.css";
 @import "../../src/block-editor/blocks/contact-form/inner-blocks/common/style.css";

plugin/assets/css/src/block/style/masonry.css

@@ -54,7 +54,3 @@
 .is-style-material-masonry.wp-block-query-loop.is-flex-container > li {
 	width: 100% !important;
 }
-
-.entry-content h2.post-card__title {
-	margin: revert;
-}

plugin/assets/css/src/components/button.css

@@ -29,33 +29,14 @@
 .mdc-button {
 	-moz-osx-font-smoothing: grayscale;
 	-webkit-font-smoothing: antialiased;
-	font-family: Roboto, sans-serif;
-
-	/* @alternate */
 	font-family: var(--md-sys-typescale-label-large-font, Roboto, sans-serif);
-	font-size: 0.875rem;
-
-	/* @alternate */
 	font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
 	/* stylelint-disable-next-line declaration-property-unit-allowed-list */
-	line-height: 2.25rem;
-
-	/* @alternate */
-	/* stylelint-disable-next-line declaration-property-unit-allowed-list */
 	line-height: var(--md-sys-typescale-label-large-line-height, 1.25rem);
-	font-weight: 500;
-
-	/* @alternate */
 	font-weight: var(--md-sys-typescale-label-large-weight, 500);
-	letter-spacing: 0.0892857143em;
-
-	/* @alternate */
 	letter-spacing: 0.1px;
-	text-decoration: none;
-
-	/* @alternate */
 	-webkit-text-decoration: var(--mdc-typography-button-text-decoration, none);
-	padding: 0 8px 0 8px;
+	padding: 8px;
 
 	/* @alternate */
 	position: relative;
@@ -66,6 +47,7 @@
 	min-width: 64px;
 	border: none;
 	outline: none;
+	white-space: nowrap;
 
 	/* @alternate */
 	-webkit-user-select: none;
@@ -250,7 +232,7 @@ svg.mdc-button__icon {
 .mdc-button--elevated,
 .mdc-button--filled,
 .mdc-button--unelevated {
-	padding: 0 16px 0 16px;
+	padding: 10px 16px;
 }
 
 .mdc-button--raised:not(:disabled),
@@ -319,7 +301,7 @@ svg.mdc-button__icon {
 }
 
 .mdc-button--outlined {
-	padding: 0 15px 0 15px;
+	padding: 10px 15px;
 	border-width: 1px;
 	border-style: solid;
 }

plugin/assets/css/src/components/card.css

@@ -60,6 +60,10 @@
 	}
 }
 
+.mdc-card__action--button {
+	height: 40px;
+}
+
 .mdc-card__media {
 	background-position: 50%;
 	background-repeat: no-repeat;
@@ -192,6 +196,7 @@
 	color: var(--md-sys-color-on-surface, #000);
 }
 
+.entry-content h2.post-card__title,
 .post-card__title {
 	margin: 0;
 	padding: 0;

plugin/assets/css/src/components/material.css

@@ -321,14 +321,12 @@
 .wp-block-material-buttons {
 	align-items: center;
 	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
 
 	&.aligncenter {
 		justify-content: center;
 	}
-
-	& .mdc-button {
-		margin-right: 8px;
-	}
 }
 
 /* Icon */

plugin/php/customizer/class-controls.php

@@ -913,12 +913,12 @@ public function get_frontend_css() {
 							esc_html( $font_style )
 						);
 					} elseif ( 'tracking' === $type ) {
-						$font_size   = isset( $value['size'] ) ? $value['size'] : 16;
-						$line_height = $value[ $type ] / $font_size;
-						$font_vars[] = sprintf(
+						$font_size     = isset( $value['size'] ) ? $value['size'] : 16;
+						$line_tracking = $value[ $type ] / $font_size;
+						$font_vars[]   = sprintf(
 							'%s: %srem !important;',
 							esc_html( $var ),
-							esc_html( $line_height )
+							esc_html( $line_tracking )
 						);
 					} else {
 						$font_vars[] = sprintf(
@@ -1714,9 +1714,9 @@ public function get_typography_extra_controls( $token ) {
 				'small'  => 2.5,
 			],
 			'title'    => [
-				'large'  => 2,
-				'medium' => 2,
-				'small'  => 1.75,
+				'large'  => 1.33,
+				'medium' => 1.75,
+				'small'  => 1.57,
 			],
 			'label'    => [
 				'large'  => 1.75,