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
This commit is contained in:
Allan Cole 2019-07-23 16:20:55 -04:00
parent 00a1b2cea4
commit 72fb2676ac
4 changed files with 91 additions and 43 deletions

View file

@ -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,
* lets 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
*/

View file

@ -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;
}

View file

@ -1021,11 +1021,17 @@ object {
min-width: 300px;
}
/**
* Placeholder button style
* - Since buttons appear in various blocks,
* lets 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;

View file

@ -1021,11 +1021,17 @@ object {
min-width: 300px;
}
/**
* Placeholder button style
* - Since buttons appear in various blocks,
* lets 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;