<div class="product-selectors">
<div class="catalog-filter-results">
<div id="catalog-filter">
<div class="button primary-button content-button">Filter</div>
</div>
</div>
<div class="sorting-container">
<div class="product-viewmode">
<span>View as</span>
<a class="viewmode-icon grid selected" href="grid" title="Grid" data-dropdownoptionvalue="grid">Grid</a>
<a class="viewmode-icon list" href="list" title="List" data-dropdownoptionvalue="list">List</a>
</div>
<div class="product-sorting">
<span>Sort By:</span>
<select aria-label="Select product sort order" id="products-orderby" name="products-orderby" onchange="setLocation(this.value);" class="sortOptionsDropDown">
<option selected="selected" value="0">Select</option>
<option value="5">Name: A to Z</option>
<option value="6">Name: Z to A</option>
<option value="10">Price: Low to High</option>
<option value="11">Price: High to Low</option>
<option value="15">Newest</option>
</select>
</div>
<div class="product-page-size">
<span>View:</span>
<select aria-label="Select number of products per page" id="products-pagesize" name="products-pagesize" onchange="setLocation(this.value);" class="productsPageSizeDropDown">
<option value="24">24</option>
<option selected="selected" value="48">48</option>
<option value="120">120</option>
</select>
</div>
</div>
</div>
<div class="product-selectors">
<div class="catalog-filter-results">
<div id="catalog-filter">
<div class="button primary-button content-button">Filter</div>
</div>
</div>
<div class="sorting-container">
<div class="product-viewmode">
<span>View as</span>
<a class="viewmode-icon grid selected" href="grid" title="Grid" data-dropdownoptionvalue="grid">Grid</a>
<a class="viewmode-icon list" href="list" title="List" data-dropdownoptionvalue="list">List</a>
</div>
<div class="product-sorting">
<span>Sort By:</span>
<select aria-label="Select product sort order" id="products-orderby" name="products-orderby" onchange="setLocation(this.value);" class="sortOptionsDropDown">
<option selected="selected" value="0">Select</option>
<option value="5">Name: A to Z</option>
<option value="6">Name: Z to A</option>
<option value="10">Price: Low to High</option>
<option value="11">Price: High to Low</option>
<option value="15">Newest</option>
</select>
</div>
<div class="product-page-size">
<span>View:</span>
<select aria-label="Select number of products per page" id="products-pagesize" name="products-pagesize" onchange="setLocation(this.value);" class="productsPageSizeDropDown">
<option value="24">24</option>
<option selected="selected" value="48">48</option>
<option value="120">120</option>
</select>
</div>
</div>
</div>
/* No context defined. */
.product-selectors {
display: flex;
align-items: center;
background: $color-sky-lighter;
border-radius: rem(4px);
padding: rem(11.2px) rem(20px) rem(11.2px) rem(11.2px);
margin-bottom: rem(16px);
.catalog-filter-results {
.button {
padding: rem(8px) rem(16px);
border-radius: rem(4px);
border: rem(1px) solid $color-sky;
&:before {
content: '\f0b0';
display: inline-block;
font-family: $font-family-icons;
margin-right: rem(4px);
}
}
}
.sorting-container {
display: inline-flex;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
justify-content: flex-start;
gap: rem(16px);
margin-left: auto;
}
.product-viewmode {
display: inline-flex;
flex-direction: row;
gap: rem(16px);
> span {
display: none;
}
a {
color: transparent;
display: inline-block;
font-size: rem(0px);
&.grid {
&:before {
content: '\f009';
color: $color-gray-dark;
font-size: rem(24px);
font-weight: bold;
font-family: $font-family-icons;
}
}
&.list {
&:before {
content: '\f03a';
color: $color-gray-dark;
font-size: rem(24px);
font-weight: bold;
font-family: $font-family-icons;
}
}
&.selected {
&:before {
color: $color-primary-text;
}
}
}
}
.product-sorting {
> span {
display: inline-block;
margin-right: rem(16px);
}
select {
border: 2px solid #b7cbef;
border-bottom: 4px solid #b7cbef;
padding: .3rem;
font-size: .9375rem;
color: #272833;
border-radius: 4px;
cursor: pointer;
height: 45px;
}
}
.product-page-size {
> span {
display: inline-block;
margin-right: rem(16px);
}
select {
border: 2px solid #b7cbef;
border-bottom: 4px solid #b7cbef;
padding: .3rem;
font-size: .9375rem;
color: #272833;
border-radius: 4px;
cursor: pointer;
height: 45px;
}
}
}
No notes defined.