Merge 646cea2 into 300c5f7

material-components · Jul 22, 2022 · f867886 · f867886
2 parents 300c5f7 + 646cea2
commit f867886
Show file tree

Hide file tree

Showing 85 changed files with 14,639 additions and 13,153 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,7 +29,6 @@
     "@babel/plugin-transform-react-jsx": "7.8.3",
     "@babel/preset-env": "7.11.5",
     "@material/button": "5.1.0",
-    "@material/card": "5.1.0",
     "@material/checkbox": "5.1.0",
     "@material/circular-progress": "7.0.0",
     "@material/data-table": "5.1.0",

diff --git a/plugin/assets/css/src/components/card.css b/plugin/assets/css/src/components/card.css
@@ -43,28 +43,218 @@
 
 	.post-card__primary,
 	.post-card__secondary {
-		padding-left: 1rem;
-		padding-right: 1rem;
+		margin: 1rem;
+
+		p {
+			margin: 0;
+		}
 	}
 
 	.post-card__subtitle {
 		color: var(--md-sys-color-on-surface, #000);
 	}
 
-	.mdc-card__media {
+	.avatar {
+		border-radius: 50%;
+		margin-right: 1rem;
+	}
+}
+
+.mdc-card__media {
+	background-position: 50%;
+	background-repeat: no-repeat;
+	background-size: cover;
+	box-sizing: border-box;
+	position: relative;
+	height: 100%;
+	padding: 1em;
+
+	& img {
+		bottom: 0;
+		height: 100%;
+		object-fit: cover;
+		position: absolute;
+		top: 0;
+		width: 100%;
+	}
+}
+
+.mdc-card__media::before {
+	content: "";
+	display: block;
+}
+
+.mdc-card__media:first-child {
+	border-top-left-radius: inherit;
+	border-top-right-radius: inherit;
+}
+
+.mdc-card__media:last-child {
+	border-bottom-left-radius: inherit;
+	border-bottom-right-radius: inherit;
+}
+
+.mdc-card__media--square::before {
+	margin-top: 100%;
+}
+
+.mdc-card__media--16-9::before {
+	margin-top: 56.25%;
+}
+
+.mdc-card__media-content {
+	bottom: 0;
+	box-sizing: border-box;
+	left: 0;
+	position: absolute;
+	right: 0;
+	top: 0;
+}
+
+.mdc-elevation-overlay {
+	background-color: #fff;
+	border-radius: inherit;
+	opacity: 0;
+	pointer-events: none;
+	position: absolute;
+	transition: opacity .28s cubic-bezier(.4, 0, .2, 1);
+}
+
+.mdc-card {
+	background-color: var(--md-sys-color-surface-variant);
+	box-sizing: border-box;
+	display: flex;
+	flex-direction: column;
+	position: relative;
+	border-radius: var(--mdc-card-radius, 12px);
+	overflow: hidden;
+}
+
+.mdc-card__actions {
+	align-items: center;
+	box-sizing: border-box;
+	display: flex;
+	flex-direction: row;
+	min-height: 52px;
+	margin: 1em 8px;
+}
+
+
+.mdc-card__link {
+	border-top-left-radius: inherit;
+	border-top-right-radius: inherit;
+}
+
+.mdc-card--outlined.has-post-thumbnail {
+	overflow: hidden;
+
+	& .mdc-card__link {
+		margin-top: -1px;
+	}
+}
+
+
+.mdc-card,
+.mdc-card__link,
+.single-post-card__title,
+.material-design-card__title {
+	color: var(--md-sys-color-on-surface, #000);
+	text-decoration: none;
+}
+
+.mdc-card--outlined {
+	background-color: var(--md-sys-color-surface);
+	border-color: var(--md-sys-color-outline, #e0e0e0);
+	border: 1px solid var(--md-sys-color-outline, #e0e0e0);
+	box-shadow: none;
+}
+
+.mdc-card--elevated {
+	background: linear-gradient(0deg, rgba(var(--md-sys-color-surface-rgb), 0.05), rgba(var(--md-sys-color-surface-rgb), 0.05)), var(--md-sys-color-surface);
+	box-shadow: 0 1px 2px rgba(var(--md-sys-color-shadow-rgb, 0, 0, 0), 0.3), 0 2px 6px 2px rgba(var(--md-sys-color-shadow-rgb, 0, 0, 0), 0.15);
+}
+
+.mdc-card--filled {
+	background-color: var(--md-sys-color-surface-variant);
+}
+
+.mdc-layout-grid .material-design-card {
+	height: 100%;
+
+	& .mdc-card__actions {
+		margin-top: auto;
+	}
+}
+
+.single-post-card__subtitle,
+.material-design-card__secondary-text,
+.material-design-card__supporting-text {
+	color: var(--md-sys-color-on-surface, #000);
+}
+
+.post-card__title {
+	margin: 0;
+	padding: 0;
+}
+
+/**
+  Action button card.
+ */
+.mdc-card__action-buttons {
+	display: flex;
+	gap: 8px;
+
+	.mdc-card__action {
+		text-decoration: none;
+		background: transparent;
+		padding: 10px 12px;
+		color: var(--md-sys-color-primary);
+
+		&:hover {
+			background: rgba(var(--md-sys-color-primary-rgb), 0.08) !important;
+		}
 
-		& img {
-			bottom: 0;
-			height: 100%;
-			object-fit: cover;
-			position: absolute;
-			top: 0;
-			width: 100%;
+		&:focus,
+		&:active {
+			background: rgba(var(--md-sys-color-primary-rgb), 0.12) !important;
 		}
 	}
 
-	.avatar {
-		border-radius: 50%;
-		margin-right: 1rem;
+	.mdc-card:not(.mdc-card--outlined):not(.mdc-card--elevated) & .mdc-card__action {
+		background: transparent;
+		color: var(--md-sys-color-primary);
+	}
+}
+
+.mdc-card:not(.post-card) {
+
+	.mdc-card__action-buttons .mdc-card__action {
+		border: 1px solid var(--md-sys-color-outline, #e0e0e0);
+		padding: 10px 24px;
+	}
+}
+
+/**
+  Post action button card.
+ */
+.post-card {
+
+	.mdc-card__action {
+		display: flex;
+		gap: 1em;
+		justify-content: center;
+		align-items: center;
+
+		.avatar {
+			height: fit-content;
+			margin-right: 0;
+		}
 	}
 }
+
+.mdc-button__post-author,
+.mdc-button__comment-count {
+	display: flex;
+	gap: 8px;
+	align-items: center;
+}
diff --git a/plugin/assets/css/src/components/material.css b/plugin/assets/css/src/components/material.css
@@ -139,23 +139,6 @@
 	border-radius: inherit;
 }
 
-.mdc-card {
-	border-radius: var(--mdc-card-radius, 4px);
-}
-
-.mdc-card__link {
-	border-top-left-radius: inherit;
-	border-top-right-radius: inherit;
-}
-
-.mdc-card--outlined.has-post-thumbnail {
-	overflow: hidden;
-
-	& .mdc-card__link {
-		margin-top: -1px;
-	}
-}
-
 .post-thumbnail > img {
 	width: 860px;
 }
@@ -254,24 +237,6 @@
 	color: var(--md-sys-color-on-surface, #000);
 }
 
-.mdc-card,
-.mdc-card__link,
-.single-post-card__title,
-.material-design-card__title {
-	color: var(--md-sys-color-on-surface, #000);
-	text-decoration: none;
-}
-
-.mdc-card--outlined {
-	border-color: var(--mdc-theme-surface-mix-12, #e0e0e0);
-}
-
-.single-post-card__subtitle,
-.material-design-card__secondary-text,
-.material-design-card__supporting-text {
-	color: var(--md-sys-color-on-surface, #000);
-}
-
 .mdc-text-field:not(.mdc-text-field--disabled) {
 	background-color: var(--mdc-theme-surface-mix-4, #f5f5f5);
 
@@ -444,13 +409,6 @@
 	}
 }
 
-.mdc-layout-grid .material-design-card {
-	height: 100%;
-
-	& .mdc-card__actions {
-		margin-top: auto;
-	}
-}
 
 /* Icon */
 .wp-block-material-icon {

diff --git a/plugin/assets/css/src/front-end.css b/plugin/assets/css/src/front-end.css
@@ -23,6 +23,7 @@
 @import "./material-components.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";

diff --git a/plugin/assets/css/src/getting-started.css b/plugin/assets/css/src/getting-started.css
@@ -16,7 +16,6 @@
 
 @import "typography.css";
 @import "@material/layout-grid/dist/mdc.layout-grid.css";
-@import "@material/button/dist/mdc.button.css";
 @import "@material/ripple/dist/mdc.ripple.css";
 @import "@material/circular-progress/dist/mdc.circular-progress.css";
 @import "./gsm/index.css";
diff --git a/plugin/assets/css/src/material-components.css b/plugin/assets/css/src/material-components.css
@@ -18,8 +18,6 @@
  * Material components used in the blocks and frontend.
  */
 
-@import "@material/button/dist/mdc.button.css";
-@import "@material/card/dist/mdc.card.css";
 @import "@material/data-table/dist/mdc.data-table.css";
 @import "@material/icon-button/dist/mdc.icon-button.css";
 @import "@material/image-list/dist/mdc.image-list.css";