eduinaf-ajax-filter-posts/assets/css/ajax-filter-posts.css

/*------------------------------------*\
    BASE
\*------------------------------------*/
  
.ajax-posts {
  position: relative;
  overflow: hidden;
}

.ajax-posts:after {
  content:" ";
  clear: both;
  display: block;
}

.ajax-posts aside,
.ajax-posts__posts {
  float: left;
  width: 100%;
  opacity: 1;
  transition: margin 0.2s ease, width 0.2s ease;
  overflow: hidden;
 }

.ajax-posts.is-waiting .ajax-posts__posts,
.ajax-posts.is-waiting aside {
  opacity: 0.5;
}

.ajax-posts aside {
  will-change: margin-left;
}

.ajax-posts__posts {
  width: 100%;
  will-change: width;
}

.ajax-posts aside {
    width: 100%;
    margin-left: -100%;
  }

.ajax-posts.is-expanded-filters aside {
  margin-left:0;
}

@media screen and (min-width: 47rem) {
  .ajax-posts aside {
    width: 50%;
    margin-left: -50%;
  }


  .ajax-posts.is-expanded-filters aside {
    width: 50%;
  }
  
  .ajax-posts__posts {
    margin: 0 -0.6rem;
  }

  .ajax-posts.is-expanded-filters .ajax-posts__posts {
    width: 50%;
  }
}

@media screen and (min-width: 71rem) {

  .ajax-posts aside {
    width: 33.33%;
    margin-left: -33.33%;
  }

  .ajax-posts.is-expanded-filters aside {
    width: 33.33%;
  }

  .ajax-posts.is-expanded-filters .ajax-posts__posts {
    width: 66.66%;
  }
}

/*------------------------------------*\
    MAIN CONTENT
\*------------------------------------*/

.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 .ajax-posts__toggle-filter {
  margin-left: 0;
}

.ajax-posts__show-filter-text  {
  display: none;
}

.ajax-posts.is-expanded-filters .ajax-posts__show-filter-text {
  display: block;
}

.ajax-posts.is-expanded-filters .ajax-posts__hide-filter-text {
  display: none;
}

.ajax-posts-message {
  text-align: center;
}

.ajax-posts-message--empty {
  width: 100%;
  margin-top: 2rem;
  color: #999;
}

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

/*------------------------------------*\
    FILTERS
\*------------------------------------*/

.ajax-posts__filters h3 {  
    margin: 0;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: bold;
}

.ajax-posts__filters ul {
    list-style-type: none;
    padding: 0;
}

.ajax-posts__filter {
  display: block;
  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__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;
}

@media screen and (min-width: 47rem) {
  .ajax-posts__filters {
    padding-right: 1.2rem;
  }
}


/*------------------------------------*\
    POSTS
\*------------------------------------*/

.ajax-posts__post {
  width: 100%;
  transition: width 0.2s ease;
  will-change: width;
}

.ajax-posts__post article {
  overflow: hidden;
}

.ajax-posts__post h3 {
  font-size: 1.2rem;
  margin: 0.3rem;
}

.ajax-posts__post img {
  transition: 0.2s ease;
  width: 100%;
}

.ajax-posts__post:hover img {
  transform: scale(1.05);
}

@media screen and (min-width: 47rem) {
  .ajax-posts__post {
    display: inline-block;
    vertical-align: top;
    margin-right: -4px;
    width: 50%;
    padding: 0 0.6rem 0.6rem;
  }

  .is-expanded-filters .ajax-posts__post{
      width: 100%;
  }
}

@media screen and (min-width: 71rem) {
  .ajax-posts__post {
    width: 33.33%;
  }

  .is-expanded-filters .ajax-posts__post{
      width: 50%;
  }
}

/*------------------------------------*\
    SPINNER
\*------------------------------------*/

.ajax-posts__spinner {
  clear: both;
  display: none;
  position: absolute;
  left: 50%;
  top: 70px;
  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; }
}