Просмотр исходного кода

Club: post comments form block styles (#6318)

* Club: removing unused comments pattern

* Club: implement styles for post comment form block

* Club: adding styles for checkbox
Matias Benedetto 2 лет назад
Родитель
Сommit
4dfb0cedef
3 измененных файлов с 45 добавлено и 63 удалено
  1. 0 61
      club/patterns/comments.php
  2. 44 0
      club/style.css
  3. 1 2
      club/theme.json

+ 0 - 61
club/patterns/comments.php

@@ -1,61 +0,0 @@
-<?php
-/**
- * Title: Comments
- * slug: club/comments
- * inserter: no
- */
-
-?>
-<!-- wp:comments-query-loop -->
-<div class="wp-block-comments-query-loop">
-	<!-- wp:comments-title /-->
-
-	<!-- wp:comment-template -->
-	<!-- wp:columns -->
-	<div class="wp-block-columns">
-		<!-- wp:column {"width":"40px"} -->
-		<div class="wp-block-column" style="flex-basis:40px"></div>
-		<!-- /wp:column -->
-
-		<!-- wp:column -->
-		<div class="wp-block-column">
-			<!-- wp:group {"style":{"spacing":{"blockGap":"10px"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
-			<div class="wp-block-group">
-				<!-- wp:avatar {"size":40,"style":{"border":{"radius":"20px"},"spacing":{"margin":{"top":"10px"}}}} /-->
-
-				<!-- wp:group -->
-				<div class="wp-block-group">
-					<!-- wp:comment-author-name /-->
-
-					<!-- wp:group {"style":{"spacing":{"margin":{"top":"0px","bottom":"0px"},"blockGap":"0.5em"}},"layout":{"type":"flex"}} -->
-					<div class="wp-block-group" style="margin-top:0px;margin-bottom:0px">
-						<!-- wp:comment-date {"format":"F j, Y \\a\\t g:i a"} /-->
-
-						<!-- wp:comment-edit-link /-->
-					</div>
-					<!-- /wp:group -->
-				</div>
-				<!-- /wp:group -->
-			</div>
-			<!-- /wp:group -->
-
-			<!-- wp:comment-content /-->
-
-			<!-- wp:comment-reply-link /-->
-		</div>
-		<!-- /wp:column -->
-	</div>
-	<!-- /wp:columns -->
-	<!-- /wp:comment-template -->
-
-	<!-- wp:comments-pagination -->
-	<!-- wp:comments-pagination-previous /-->
-
-	<!-- wp:comments-pagination-numbers /-->
-
-	<!-- wp:comments-pagination-next /-->
-	<!-- /wp:comments-pagination -->
-
-	<!-- wp:post-comments-form /-->
-</div>
-<!-- /wp:comments-query-loop -->

+ 44 - 0
club/style.css

@@ -228,6 +228,50 @@ a {
 	outline: 1.5px solid var(--wp--preset--color--foreground);
 }
 
+/*
+ * Comments
+ */
+
+.wp-block-post-comments-form :is(textarea, input:not([type="submit"]) ) {
+	background-color: var(--wp--preset--color--background);
+	border: 1px solid var(--wp--preset--color--foreground);
+	color: 1px solid var(--wp--preset--color--foreground);
+	border-radius: 50px;
+	padding: 2em;
+}
+
+.wp-block-post-comments-form :is(textarea, input:not([type="submit"]) ):focus-visible {
+	outline: 1.5px solid var(--wp--preset--color--foreground);
+}
+
+.wp-block-comments-query-loop .depth-1 .wp-block-column:empty {
+	display: none;
+}
+
+.wp-block-post-comments-form input[type="checkbox"]	{
+	appearance: none;
+	height: 1.5rem;
+    min-width: 1.5rem;
+	padding: 0;
+	border-radius: 1rem;
+	position: relative;
+}
+
+.wp-block-post-comments-form input[type="checkbox"]:checked::after	{
+	background-color: var(--wp--preset--color--foreground);
+    content: "";
+    position: absolute;
+    width: 75%;
+    height: 75%;
+    border-radius: 1rem;
+    top: 0;
+    left: 0;
+	bottom: 0;
+	right: 0;
+	margin: auto; 
+}
+
+
 /*
  * Alignment styles, borrowed from Twenty Twenty-Two.
  * These rules are temporary, and should not be relied on or

+ 1 - 2
club/theme.json

@@ -481,8 +481,7 @@
                     "fontSize": "var(--wp--preset--font-size--medium)",
                     "fontWeight": "normal",
 					"lineHeight": "2",
-					"textDecoration": "none",
-                    "textTransform": "uppercase"
+					"textDecoration": "none"
 				},
 				"spacing": {
 					"padding": {