440 lines
9.4 KiB
CSS
Executable File
440 lines
9.4 KiB
CSS
Executable File
/*------------------------------------*\
|
|
BASE
|
|
\*------------------------------------*/
|
|
|
|
.ajax-posts {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/*
|
|
* To hide and show the filters, we wrap the filters and the content in a view that is bigger than its parent
|
|
* container, that has its overflow hidden. By default the filters are not shown, and gets translated out of the view.
|
|
* With JavaScript we toggle the filters in and out of the view, by translating the X position of the view.
|
|
*
|
|
* This gives a smoother transition than working with changes in the width or the margin.
|
|
*/
|
|
.ajax-posts__view {
|
|
transition: 0.2s ease;
|
|
width: 200%;
|
|
-webkit-transform: translateX(-50%);
|
|
-ms-transform: translateX(-50%);
|
|
transform: translateX(-50%);
|
|
will-change: tranform;
|
|
}
|
|
|
|
.ajax-posts aside,
|
|
.ajax-posts__posts {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Change opacity to give the user feedback that new posts are loading */
|
|
.ajax-posts.is-waiting .ajax-posts__posts,
|
|
.ajax-posts.is-waiting aside {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.ajax-posts aside {
|
|
width: 50%;
|
|
float: left;
|
|
overflow: hidden;
|
|
min-height: 1px; /* Show empty filterlist when there is only one post to keep the view intact. */
|
|
}
|
|
|
|
.ajax-posts__posts {
|
|
width: 50%;
|
|
float: left;
|
|
}
|
|
|
|
.ajax-posts.is-expanded-filters .ajax-posts__view {
|
|
-webkit-transform: translateX(0);
|
|
-ms-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
|
|
@media screen and (min-width: 35rem) {
|
|
.ajax-posts__view {
|
|
width: 150%;
|
|
-webkit-transform: translateX(-33.33%);
|
|
-ms-transform: translateX(-33.33%);
|
|
transform: translateX(-33.33%);
|
|
}
|
|
|
|
.ajax-posts aside {
|
|
width: 33.33%;
|
|
}
|
|
|
|
.ajax-posts__posts {
|
|
width: 66.66%;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-flex-wrap: wrap;
|
|
-ms-flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
-webkit-justify-content: space-between;
|
|
-ms-flex-pack: justify;
|
|
justify-content: space-between;
|
|
float: left;
|
|
}
|
|
}
|
|
|
|
|
|
@media screen and (min-width: 62rem) {
|
|
.ajax-posts__view {
|
|
width: 133%;
|
|
-webkit-transform: translateX(-25%);
|
|
-ms-transform: translateX(-25%);
|
|
transform: translateX(-25%);
|
|
}
|
|
|
|
.ajax-posts aside {
|
|
width: 25%;
|
|
}
|
|
|
|
.ajax-posts__posts {
|
|
width: 75%;
|
|
}
|
|
}
|
|
|
|
/*------------------------------------*\
|
|
BUTTONS AND MESSAGES
|
|
\*------------------------------------*/
|
|
|
|
.ajax-posts__show-recipes-text,
|
|
.ajax-posts__hide-filters-text {
|
|
display: none;
|
|
}
|
|
|
|
.ajax-posts.is-expanded-filters .ajax-posts__filter-recipes-text {
|
|
display: none;
|
|
}
|
|
|
|
.ajax-posts__screen-reader-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0,0,0,0);
|
|
border: 0;
|
|
}
|
|
|
|
.ajax-posts__load-more {
|
|
flex: 0 0 100%;
|
|
}
|
|
|
|
/* On small screen we can't see the posts when the filer is visible */
|
|
@media screen and (max-width: 34rem) {
|
|
.ajax-posts.is-expanded-filters .ajax-posts__show-recipes-text {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
/* On small screen we see the posts when the filer is visible, so we need a differen text */
|
|
@media screen and (min-width: 35rem) {
|
|
.ajax-posts.is-expanded-filters .ajax-posts__hide-filters-text {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
/*------------------------------------*\
|
|
FILTERS
|
|
\*------------------------------------*/
|
|
|
|
.ajax-posts__filterlist {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.ajax-posts__filters ul {
|
|
list-style-type: none;
|
|
padding: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.ajax-posts__filter {
|
|
display: block;
|
|
}
|
|
|
|
.ajax-posts__filter:after{
|
|
background: #f0efea;
|
|
color: #27ae60;
|
|
width: 15px;
|
|
height: 15px;
|
|
content: '';
|
|
margin-right: 5px;
|
|
margin-top: 4px;
|
|
float: right;
|
|
}
|
|
|
|
.ajax-posts__filter:hover:after,
|
|
.ajax-posts__filter.is-active:after {
|
|
content: '✔';
|
|
background: none;
|
|
}
|
|
|
|
.ajax-posts__filterlist li:nth-child(n+6) {
|
|
max-height: 0;
|
|
overflow-y: hidden;
|
|
transition: max-height 0.2s ease;
|
|
}
|
|
|
|
.ajax-posts__filter-toggle {
|
|
padding: 5px;
|
|
}
|
|
|
|
.ajax-posts__filter-toggle a:after {
|
|
margin-left: 5px;
|
|
content: "\25BE";
|
|
display: inline-block;
|
|
}
|
|
|
|
.ajax-posts__filter-toggle-hide {
|
|
display: none;
|
|
}
|
|
|
|
.ajax-posts__filter-toggle-hide:after {
|
|
transform: rotate(180deg);
|
|
position: relative;
|
|
top: 1px;
|
|
}
|
|
|
|
.ajax-posts__filterlist.is-collapsed li:nth-child(n+6) {
|
|
max-height: 35px;
|
|
}
|
|
|
|
.is-collapsed .ajax-posts__filter-toggle-hide {
|
|
display: block;
|
|
}
|
|
|
|
.is-collapsed .ajax-posts__filter-toggle-show {
|
|
display: none;
|
|
}
|
|
|
|
/*------------------------------------*\
|
|
POSTS
|
|
\*------------------------------------*/
|
|
|
|
.ajax-posts__post {
|
|
width: 100%;
|
|
}
|
|
|
|
.ajax-posts__post article {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ajax-posts__post > a {
|
|
display: block;
|
|
}
|
|
|
|
.ajax-posts__post img {
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
@media screen and (min-width: 35rem) {
|
|
.ajax-posts__post {
|
|
/* IE11 doesn't support calc in flex-basis. 1.8rem padding, diveded by 2, the amount of items in a row */
|
|
width: calc(50% - 0.9rem);
|
|
-webkit-flex: 0 0 auto;
|
|
-ms-flex: 0 0 auto;
|
|
flex: 0 0 auto;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 35rem) and (max-width: 61rem) {
|
|
.is-expanded-filters .ajax-posts__post:nth-child(n+6) {
|
|
margin-right: 50%; /* fake a second element to break the flow */
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 62rem) {
|
|
.ajax-posts__post {
|
|
/* IE11 doesn't support calc in flex-basis. Two times 1.8rem padding, diveded by 3, the amount of items in a row */
|
|
width: calc(33.33% - 1.2rem);
|
|
-webkit-flex: 0 0 auto;
|
|
-ms-flex: 0 0 auto;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.is-expanded-filters .ajax-posts__post:nth-child(2n) {
|
|
margin-right: 33.33%; /* fake a third element to break the flow */
|
|
}
|
|
}
|
|
|
|
/*------------------------------------*\
|
|
SPINNER
|
|
\*------------------------------------*/
|
|
|
|
.ajax-posts__spinner {
|
|
clear: both;
|
|
display: none;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 70px;
|
|
-webkit-transform: translateX(-50%);
|
|
-ms-transform: translateX(-50%);
|
|
transform: translateX(-50%);
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
border: 10px solid red;
|
|
-webkit-animation: ajax-posts__spinner 8s infinite linear;
|
|
animation: ajax-posts__spinner 8s infinite linear;
|
|
}
|
|
|
|
.ajax-posts.is-waiting .ajax-posts__spinner {
|
|
display: block;
|
|
}
|
|
|
|
@-webkit-keyframes ajax-posts__spinner {
|
|
0%, 100%{ border: solid 20px #68C3A3; }
|
|
6.25% { border: solid 2px #68C3A3; }
|
|
12.5% { border: solid 2px #52B3D9; }
|
|
18.75% { border: solid 20px #52B3D9; }
|
|
25% { border: solid 20px #52B3D9; }
|
|
31.25% { border: solid 2px #52B3D9; }
|
|
37.5% { border: solid 2px #F4D03F; }
|
|
43.75% { border: solid 20px #F4D03F; }
|
|
50% { border: solid 20px #F4D03F; }
|
|
56.25% { border: solid 2px #F4D03F; }
|
|
62.5% { border: solid 2px #D24D57; }
|
|
68.75% { border: solid 20px #D24D57; }
|
|
75% { border: solid 20px #D24D57; }
|
|
81.25% { border: solid 2px #D24D57; }
|
|
87.5% { border: solid 2px #68C3A3; }
|
|
93.75% { border: solid 20px #68C3A3; }
|
|
}
|
|
|
|
@keyframes ajax-posts__spinner {
|
|
0%, 100%{ border: solid 20px #68C3A3; }
|
|
6.25% { border: solid 2px #68C3A3; }
|
|
12.5% { border: solid 2px #52B3D9; }
|
|
18.75% { border: solid 20px #52B3D9; }
|
|
25% { border: solid 20px #52B3D9; }
|
|
31.25% { border: solid 2px #52B3D9; }
|
|
37.5% { border: solid 2px #F4D03F; }
|
|
43.75% { border: solid 20px #F4D03F; }
|
|
50% { border: solid 20px #F4D03F; }
|
|
56.25% { border: solid 2px #F4D03F; }
|
|
62.5% { border: solid 2px #D24D57; }
|
|
68.75% { border: solid 20px #D24D57; }
|
|
75% { border: solid 20px #D24D57; }
|
|
81.25% { border: solid 2px #D24D57; }
|
|
87.5% { border: solid 2px #68C3A3; }
|
|
93.75% { border: solid 20px #68C3A3; }
|
|
}
|
|
|
|
/*------------------------------------*\
|
|
CUSTOM STYLING
|
|
|
|
When you copy the css and want to
|
|
remove the styling of this plugin,
|
|
you can skip this part.
|
|
\*------------------------------------*/
|
|
|
|
.ajax-posts button {
|
|
display: block;
|
|
margin: 2rem auto;
|
|
padding: 0.7em 1.5em 0.6em 1.5em;
|
|
background: #a6a6a6;
|
|
color: white;
|
|
border: 1px solid #a1a1a1;
|
|
border-radius: 4px;
|
|
text-transform: uppercase;
|
|
font-size: 0.8em;
|
|
letter-spacing: 1.2px;
|
|
font-weight: bold;
|
|
transition: background 0.2s ease;
|
|
outline: none;
|
|
}
|
|
|
|
.ajax-posts button:hover {
|
|
background: #999;
|
|
}
|
|
|
|
.ajax-posts__status {
|
|
margin: 1rem auto;
|
|
background: rgba(255, 0, 0, 0.53);
|
|
color: white;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 10px;
|
|
width: 80%;
|
|
max-width: 400px;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.ajax-posts .ajax-posts__toggle-filter {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.ajax-posts-message {
|
|
text-align: center;
|
|
}
|
|
|
|
.ajax-posts-message--empty {
|
|
width: 100%;
|
|
margin-top: 2rem;
|
|
color: #999;
|
|
}
|
|
|
|
.ajax-posts__filters h2 {
|
|
margin: 0;
|
|
font-size: 1.6rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1.2px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.ajax-posts__filters h3 {
|
|
margin: 0;
|
|
font-size: 0.8rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1.2px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.ajax-posts__filter {
|
|
color: #333;
|
|
border-top: 1px dashed #B9B9B4;
|
|
padding: 5px;
|
|
}
|
|
|
|
.ajax-posts_filters li:last-child a {
|
|
border-bottom: 1px dashed #B9B9B4;
|
|
}
|
|
|
|
.ajax-posts__filter:hover,
|
|
.ajax-posts__filter.is-active {
|
|
color: #27ae60;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.ajax-posts__post {
|
|
padding-bottom: 1.8rem;
|
|
}
|
|
|
|
.ajax-posts__post h3 {
|
|
font-size: 2rem;
|
|
font-weight: bold;
|
|
margin-top: 0.8rem;
|
|
}
|
|
|
|
.ajax-posts__post img {
|
|
transition: 0.2s ease;
|
|
width: 100%;
|
|
}
|
|
|
|
.ajax-posts__post:hover img {
|
|
-webkit-transform: scale(1.05);
|
|
-ms-transform: scale(1.05);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
@media screen and (min-width: 35rem) {
|
|
.ajax-posts__filters {
|
|
padding-right: 1.8rem;
|
|
}
|
|
} |