.recipe-grid {
display: flex;
flex-wrap: wrap;
gap: 4rem;
}
.recipe-grid .recipe-grid-filters {
width: 100%;
}
@media (min-width: 1024px) {
.recipe-grid .recipe-grid-filters {
width: 20%;
}
}
.recipe-grid .recipe-grid-filters .recipe-pattern-type {
background: url('data:image/svg+xml,');
height: 2px;
background-size: cover;
}
.recipe-grid .recipe-grid-filters .recipe-pattern-ingredient {
background: url('data:image/svg+xml,');
height: 2px;
background-size: cover;
}
.recipe-grid .recipe-grid-filters .recipe-filters {
position: sticky;
top: 15%;
display: flex;
flex-direction: column;
gap: 1.6rem;
}
@media (min-width: 1024px) {
.recipe-grid .recipe-grid-filters .recipe-filters {
gap: 3.2rem;
}
}
body.admin-bar .recipe-grid .recipe-grid-filters .recipe-filters {
top: 200px;
}
.recipe-grid .recipe-grid-filters .recipe-filters input {
width: auto;
}
.recipe-grid .recipe-grid-filters .recipe-filters .recipe-search input[type=text] {
border: rgb(203.5, 203.5, 203.5) 1px solid;
width: 100%;
}
@media (max-width: 1023px) {
.recipe-grid .recipe-grid-filters .recipe-filters .recipe-categories,
.recipe-grid .recipe-grid-filters .recipe-filters .recipe-main-products {
display: flex;
flex-wrap: wrap;
-moz-column-gap: 1.6rem;
column-gap: 1.6rem;
}
.recipe-grid .recipe-grid-filters .recipe-filters .recipe-categories h5,
.recipe-grid .recipe-grid-filters .recipe-filters .recipe-main-products h5 {
flex-basis: 100%;
}
}
.recipe-grid .recipe-grid-filters .recipe-filters .recipe-categories h5,
.recipe-grid .recipe-grid-filters .recipe-filters .recipe-main-products h5 {
font-family: var(--wp--preset--font-family--primary);
font-size: var(--wp--preset--font-size--font-16);
font-weight: 700;
letter-spacing: 0;
margin-bottom: 2.4rem;
}
.recipe-grid .recipe-grid-filters .recipe-filters .recipe-categories .cat,
.recipe-grid .recipe-grid-filters .recipe-filters .recipe-main-products .cat {
margin-bottom: 1rem;
}
.recipe-grid .recipe-grid-filters .recipe-filters .recipe-categories .cat:hover,
.recipe-grid .recipe-grid-filters .recipe-filters .recipe-main-products .cat:hover {
cursor: pointer;
}
.recipe-grid .recipe-grid-filters .recipe-filters .recipe-categories .cat label,
.recipe-grid .recipe-grid-filters .recipe-filters .recipe-main-products .cat label {
display: flex;
align-items: flex-start;
color: #000;
}
.recipe-grid .recipe-grid-filters .recipe-filters .recipe-categories .cat input[type=checkbox],
.recipe-grid .recipe-grid-filters .recipe-filters .recipe-main-products .cat input[type=checkbox] {
-moz-appearance: none;
appearance: none;
-webkit-appearance: none;
display: flex;
align-content: center;
justify-content: center;
font-size: 2rem;
padding: 0.1rem;
border: 1.1px solid #735929;
border-radius: 16px;
margin-right: 1rem;
height: 22px;
width: 22px;
}
.recipe-grid .recipe-grid-filters .recipe-filters .recipe-categories .cat input[type=checkbox]::before,
.recipe-grid .recipe-grid-filters .recipe-filters .recipe-main-products .cat input[type=checkbox]::before {
content: "";
width: 1.8rem;
height: 1.8rem;
clip-path: polygon(14% 53%, 22% 61%, 42% 81%, 86% 28%, 78% 20%, 42% 66%, 30% 54%, 22% 46%);
transform: scale(0);
background-color: #007A33;
}
.recipe-grid .recipe-grid-filters .recipe-filters .recipe-categories .cat input[type=checkbox]:checked,
.recipe-grid .recipe-grid-filters .recipe-filters .recipe-main-products .cat input[type=checkbox]:checked {
background-color: white;
}
.recipe-grid .recipe-grid-filters .recipe-filters .recipe-categories .cat input[type=checkbox]:checked::before,
.recipe-grid .recipe-grid-filters .recipe-filters .recipe-main-products .cat input[type=checkbox]:checked::before {
transform: scale(1);
}
.recipe-grid .recipe-grid-filters .recipe-filters .recipe-categories .cat input[type=checkbox]:hover,
.recipe-grid .recipe-grid-filters .recipe-filters .recipe-main-products .cat input[type=checkbox]:hover {
color: black;
background-color: white;
}
.recipe-grid .recipe-grid-results {
width: 100%;
position: relative;
}
@media (min-width: 1024px) {
.recipe-grid .recipe-grid-results {
width: 75%;
}
}
.recipe-grid .recipe-grid-results .not-found {
text-align: center;
}
.recipe-grid .recipe-grid-results .recipe-item.skeleton {
pointer-events: none;
}
.recipe-grid .recipe-grid-results .recipe-item.skeleton .skeleton-box,
.recipe-grid .recipe-grid-results .recipe-item.skeleton .skeleton-line {
background: linear-gradient(90deg, #fff7e2 25%, #fff7e2 37%, #fff7e2 63%);
background-size: 400% 100%;
animation: skeleton-shimmer 1.4s ease infinite;
border-radius: 6px;
}
.recipe-grid .recipe-grid-results .recipe-item.skeleton .recipe-thumbnail {
height: 460px;
}
.recipe-grid .recipe-grid-results .recipe-item.skeleton .recipe-content {
padding: 1.6rem;
}
.recipe-grid .recipe-grid-results .recipe-item.skeleton .recipe-content .skeleton-line {
height: 14px;
margin-bottom: 1rem;
}
.recipe-grid .recipe-grid-results .recipe-item.skeleton .recipe-content .skeleton-line.title {
height: 25px;
width: 70%;
}
.recipe-grid .recipe-grid-results .recipe-item.skeleton .recipe-content .skeleton-line.meta {
width: 40%;
}
.recipe-grid .recipe-grid-results .recipe-item.skeleton .recipe-content .skeleton-line.button {
width: 120px;
height: 16px;
margin-top: 1.6rem;
}
@keyframes skeleton-shimmer {
0% {
background-position: 100% 0;
}
100% {
background-position: -100% 0;
}
}
.recipe-grid .recipe-grid-results .recipe-pagination {
margin-top: 4rem;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
gap: 2rem;
}
@media (min-width: 768px) {
.recipe-grid .recipe-grid-results .recipe-pagination {
gap: 0;
flex-direction: row;
}
}
.recipe-grid .recipe-grid-results .recipe-pagination span {
margin: 0 30px;
}
.recipe-grid .recipe-grid-results .recipe-pagination .wp-block-button__link:disabled {
opacity: 0.2;
cursor: not-allowed;
}
.recipe-grid .recipe-grid-results .recipe-pagination .wp-block-button__link:disabled:before {
opacity: 0.2;
}
/* helper states */
.recipe-item {
opacity: 1;
transform-origin: center;
}
@media (max-width: 1279px) {
.recipe-item {
max-width: 304px !important;
}
}
.recipe-item.is-hidden {
opacity: 0;
transform: translateY(8px) scale(0.995);
pointer-events: none;
}
.recipes .recipe-item.skeleton {
opacity: 0;
transform: scale(0.98) translateY(6px);
}/*# sourceMappingURL=block-recipe-grid.css.map */