Browse Source

Varia: Add spacing after last post on Blog List if View All Posts button exists
- Add button style to View All Posts to match infinite scroll behaivior

Allan Cole 6 years ago
parent
commit
72fb2676ac
4 changed files with 91 additions and 43 deletions
  1. 16 6
      varia/sass/blocks/button/_style.scss
  2. 11 1
      varia/sass/blocks/posts-list/_style.scss
  3. 32 18
      varia/style-rtl.css
  4. 32 18
      varia/style.css

+ 16 - 6
varia/sass/blocks/button/_style.scss

@@ -1,9 +1,10 @@
-button,
-.button,
-input[type="submit"],
-.wp-block-button__link,
-.wp-block-file__button {
-
+/**
+ * Placeholder button style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+%button-style {
 	@include crop-text(map-deep-get($config-button, "font", "line-height"));
 	color: #{map-deep-get($config-button, "color", "text")};
 	cursor: pointer;
@@ -23,6 +24,15 @@ input[type="submit"],
 	}
 }
 
+button,
+.button,
+input[type="submit"],
+.wp-block-button__link,
+.wp-block-file__button {
+	// Extend button style
+	@extend %button-style;
+}
+
 /**
  * Block Options
  */

+ 11 - 1
varia/sass/blocks/posts-list/_style.scss

@@ -2,6 +2,10 @@
 	list-style: none;
 	margin: 0;
 	padding: 0;
+
+	&:not(:last-child) {
+		margin-bottom: calc(3 * #{map-deep-get($config-global, "spacing", "vertical")});
+	}
 }
 
 .a8c-posts-list-item__featured span {
@@ -60,4 +64,10 @@
 	.a8c-posts-list-item__edit-link {
 		margin-left: #{map-deep-get($config-global, "spacing", "unit")};
 	}
-}
+}
+
+.a8c-posts-list__view-all {
+	// Extend button style
+	@extend %button-style;
+	display: inline-block;
+}

+ 32 - 18
varia/style-rtl.css

@@ -1021,11 +1021,17 @@ object {
 	min-width: 300px;
 }
 
+/**
+ * Placeholder button style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
 button,
 .button,
 input[type="submit"],
 .wp-block-button__link,
-.wp-block-file__button {
+.wp-block-file__button, .a8c-posts-list__view-all {
 	line-height: 1;
 	color: white;
 	cursor: pointer;
@@ -1038,15 +1044,15 @@ input[type="submit"],
 	padding: 16px 16px;
 }
 
-button:before, button:after,
+button:before,
 .button:before,
-.button:after,
 input[type="submit"]:before,
-input[type="submit"]:after,
 .wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, button:after,
+.button:after,
+input[type="submit"]:after,
 .wp-block-button__link:after,
-.wp-block-file__button:before,
-.wp-block-file__button:after {
+.wp-block-file__button:after, .a8c-posts-list__view-all:after {
 	content: '';
 	display: block;
 	height: 0;
@@ -1057,7 +1063,7 @@ button:before,
 .button:before,
 input[type="submit"]:before,
 .wp-block-button__link:before,
-.wp-block-file__button:before {
+.wp-block-file__button:before, .a8c-posts-list__view-all:before {
 	margin-bottom: -0.12em;
 }
 
@@ -1065,23 +1071,23 @@ button:after,
 .button:after,
 input[type="submit"]:after,
 .wp-block-button__link:after,
-.wp-block-file__button:after {
+.wp-block-file__button:after, .a8c-posts-list__view-all:after {
 	margin-top: -0.11em;
 }
 
-button:hover, button:focus, button.has-focus,
+button:hover,
 .button:hover,
-.button:focus,
-.button.has-focus,
-input[type="submit"]:hover,
-input[type="submit"]:focus,
-input[type="submit"].has-focus,
+input:hover[type="submit"],
 .wp-block-button__link:hover,
+.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, button:focus,
+.button:focus,
+input:focus[type="submit"],
 .wp-block-button__link:focus,
-.wp-block-button__link.has-focus,
-.wp-block-file__button:hover,
-.wp-block-file__button:focus,
-.wp-block-file__button.has-focus {
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, button.has-focus,
+.has-focus.button,
+input.has-focus[type="submit"],
+.has-focus.wp-block-button__link,
+.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all {
 	color: white;
 	background-color: indigo;
 }
@@ -1569,6 +1575,10 @@ p.has-background {
 	padding: 0;
 }
 
+.a8c-posts-list__listing:not(:last-child) {
+	margin-bottom: calc(3 * 32px);
+}
+
 .a8c-posts-list-item__featured span {
 	color: white;
 	background-color: blue;
@@ -1625,6 +1635,10 @@ p.has-background {
 	margin-right: 16px;
 }
 
+.a8c-posts-list__view-all {
+	display: inline-block;
+}
+
 .wp-block-pullquote {
 	padding: calc( 3 * 16px) 0;
 	margin-right: 0;

+ 32 - 18
varia/style.css

@@ -1021,11 +1021,17 @@ object {
 	min-width: 300px;
 }
 
+/**
+ * Placeholder button style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
 button,
 .button,
 input[type="submit"],
 .wp-block-button__link,
-.wp-block-file__button {
+.wp-block-file__button, .a8c-posts-list__view-all {
 	line-height: 1;
 	color: white;
 	cursor: pointer;
@@ -1038,15 +1044,15 @@ input[type="submit"],
 	padding: 16px 16px;
 }
 
-button:before, button:after,
+button:before,
 .button:before,
-.button:after,
 input[type="submit"]:before,
-input[type="submit"]:after,
 .wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, button:after,
+.button:after,
+input[type="submit"]:after,
 .wp-block-button__link:after,
-.wp-block-file__button:before,
-.wp-block-file__button:after {
+.wp-block-file__button:after, .a8c-posts-list__view-all:after {
 	content: '';
 	display: block;
 	height: 0;
@@ -1057,7 +1063,7 @@ button:before,
 .button:before,
 input[type="submit"]:before,
 .wp-block-button__link:before,
-.wp-block-file__button:before {
+.wp-block-file__button:before, .a8c-posts-list__view-all:before {
 	margin-bottom: -0.12em;
 }
 
@@ -1065,23 +1071,23 @@ button:after,
 .button:after,
 input[type="submit"]:after,
 .wp-block-button__link:after,
-.wp-block-file__button:after {
+.wp-block-file__button:after, .a8c-posts-list__view-all:after {
 	margin-top: -0.11em;
 }
 
-button:hover, button:focus, button.has-focus,
+button:hover,
 .button:hover,
-.button:focus,
-.button.has-focus,
-input[type="submit"]:hover,
-input[type="submit"]:focus,
-input[type="submit"].has-focus,
+input:hover[type="submit"],
 .wp-block-button__link:hover,
+.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, button:focus,
+.button:focus,
+input:focus[type="submit"],
 .wp-block-button__link:focus,
-.wp-block-button__link.has-focus,
-.wp-block-file__button:hover,
-.wp-block-file__button:focus,
-.wp-block-file__button.has-focus {
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, button.has-focus,
+.has-focus.button,
+input.has-focus[type="submit"],
+.has-focus.wp-block-button__link,
+.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all {
 	color: white;
 	background-color: indigo;
 }
@@ -1569,6 +1575,10 @@ p.has-background {
 	padding: 0;
 }
 
+.a8c-posts-list__listing:not(:last-child) {
+	margin-bottom: calc(3 * 32px);
+}
+
 .a8c-posts-list-item__featured span {
 	color: white;
 	background-color: blue;
@@ -1625,6 +1635,10 @@ p.has-background {
 	margin-left: 16px;
 }
 
+.a8c-posts-list__view-all {
+	display: inline-block;
+}
+
 .wp-block-pullquote {
 	padding: calc( 3 * 16px) 0;
 	margin-left: 0;