@layer master { .templateCollection { } } @layer master { [x-cloak] { display: none !important; } .templateFilter { .grid { @media (min-width: 56em) { .filters {grid-column: span 3;} .filterGrid {grid-column: span 9;} } @media (--min-fablet) { .filters {grid-column: span 3;} .filterGrid {grid-column: span 9;} } } .filterBlock { .filterHeader { @media (max-width: 56em) { display: flex; align-items: center; justify-content: space-between; button { display: block; } } @media (--max-fablet) { display: flex; align-items: center; justify-content: space-between; button { display: block; } } button { display: none; } } } &.topFilters { .grid { @media (min-width: 56em) { .filters {grid-column: span 12;} .filterGrid {grid-column: span 12;} } @media (--min-fablet) { .filters {grid-column: span 12;} .filterGrid {grid-column: span 12;} } .filters { .filterCategory { fieldset:has(.multiSelect.open) > legend { z-index: 999; position: relative; } fieldset { position: relative; padding: 0; legend { display: flex; justify-content: space-between; align-items: center; padding: calc(var(--padding) / 1.5); height: 100%; color: var(--font-color); font-size: var(--xs-fontsize); line-height: var(--xs-lineheight); font-weight: 600; border-radius: var(--border-radius); cursor: pointer; @media (max-width: 56em) { height: 55px; } @media (--max-fablet) { height: 55px; } } .multiSelect { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: calc(var(--gutter) / 2); display: flex; flex-wrap: wrap; gap: 0; justify-content: flex-start; background-color: var(--color-light); overflow-x: hidden; overflow-y: scroll; border-radius: var(--border-radius) var(--border-radius); border: 1px solid var(--color2); position: absolute; z-index: 99; opacity: 0; height: 0px; transition: all .5s ease; label { width: 100%; height: fit-content; z-index: 999; background-color: transparent; color: var(--font-color); font-size: var(--xs-fontsize); line-height: var(--xs-lineheight); padding: calc(var(--padding) / 4) calc(var(--padding) / 1.5); cursor: pointer; &[aria-selected="true"] { background-color: var(--color4); color: var(--color-light); } transition: var(--transition); &:hover { background-color: var(--color1); } input { display: none; } .text { flex: 1; } .count { background: var(--color4); color: var(--color-light); line-height: 1; font-size: var(--xs-fontsize); line-height: var(--xs-lineheight); padding: 4px 6px; border-radius: var(--border-radius); } } &.open { opacity: 1; height: 250px; padding-top: calc(var(--padding) * 1.5); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } } } } } } } article { display: flex; } } } @layer master { .templateFilter { .filters { display: flex; flex-direction: column; gap: var(--gutter); .filterBlock { display: flex; flex-direction: column; gap: var(--gutter); @media (max-width: 56em) { padding: var(--padding); position: fixed; top: 0; left: -100%; width: 100%; height: 100%; background: white; transition: var(--transition); z-index: 999; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; &.visible { left: 0; } &.hidden { left: -100%; } } @media (--max-fablet) { padding: var(--padding); position: fixed; top: 0; left: -100%; width: 100%; height: 100%; background: white; transition: var(--transition); z-index: 999; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; &.visible { left: 0; } &.hidden { left: -100%; } } .button.cancel { width: fit-content; } } @media (min-width: 56em) { .filterButton { display: none; } } @media (--min-fablet) { .filterButton { display: none; } } @media (max-width: 56em) { .filterButton { display: block; position: fixed; z-index: 8; bottom: 0; left: 0; right: 0; width: 100%; padding: var(--padding); } } @media (--max-fablet) { .filterButton { display: block; position: fixed; z-index: 8; bottom: 0; left: 0; right: 0; width: 100%; padding: var(--padding); } } .filterSearch { display: flex; flex-direction: column; gap: var(--gutter); label { svg { width: 100%; height: 100%; } .search, .pin, .close { position: absolute; right: var(--form-input-size); top: 50%; transform: translateY(-50%); width: 32px; height: 32px; padding: 0; } } } .filterCategory { display: flex; flex-direction: column; gap: var(--gutter); fieldset, .dropdownContent { label { cursor: pointer; display: flex; gap: 10px; align-items: center; width: 100%; .text { flex: 1; -webkit-hyphens: auto; hyphens: auto; } .count { background: var(--color2); line-height: 1; padding: 8px 12px; border-radius: var(--border-radius); } } } .dropdown { background-color: initial; summary { font-weight: normal; padding: 0; } .dropdownContent { display: flex; flex-direction: column; gap: 10px; padding: calc(var(--gutter) / 3) 0 var(--gutter); } } } .tags { display: flex; gap: calc(var(--gutter) / 2); flex-direction: column; .content { display: flex; gap: calc(var(--gutter) / 2); flex-wrap: wrap; } } } } } @layer master { .templateFilter { .filterGrid { display: flex; flex-direction: column; gap: var(--gutter); .filterSettings { display: flex; align-items: center; flex-wrap: wrap; gap: var(--gutter); .views { display: flex; gap: var(--gutter); justify-content: flex-end; width: 100%; } .text { flex: 1; } .sort { .select { flex-direction: row; select { width: auto; padding-right: calc(var(--form-input-size) * 2 + 16px); } } } .tags { width: 100%; } } } } }