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:
parent
00a1b2cea4
commit
72fb2676ac
4 changed files with 91 additions and 43 deletions
|
@ -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
|
||||
*/
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue