<ul class="listings-filters__list" data-count="5">
    <li class="listings-filters__item listings-filters__item--orange">
        <div class="custom-input custom-input--select custom-input--orange" ">
    <select name="dynamicName " id="dynamicId " class="custom-input__select ">
    	<option value="0 ">Please select</option>
    	<option value="1 ">1</option>
    	<option value="2 ">2</option>
    	<option value="3 ">3</option>	
    </select>
</div></li>
	<li class="listings-filters__item "><div class="custom-input custom-input--select "">
            <select name="dynamicName" id="dynamicId" class="custom-input__select">
    	<option value="0">Please select</option>
    	<option value="1">1</option>
    	<option value="2">2</option>
    	<option value="3">3</option>	
    </select>
        </div>
    </li>
    <li class="listings-filters__item">
        <div class="custom-input custom-input--select" ">
    <select name="dynamicName " id="dynamicId " class="custom-input__select ">
    	<option value="0 ">Please select</option>
    	<option value="1 ">1</option>
    	<option value="2 ">2</option>
    	<option value="3 ">3</option>	
    </select>
</div></li>
	<li class="listings-filters__item "><div class="custom-input custom-input--select "">
            <select name="dynamicName" id="dynamicId" class="custom-input__select">
    	<option value="0">Please select</option>
    	<option value="1">1</option>
    	<option value="2">2</option>
    	<option value="3">3</option>	
    </select>
        </div>
    </li>
    <li class="listings-filters__item">
        <div class="custom-input custom-input--select" ">
    <select name="dynamicName " id="dynamicId " class="custom-input__select ">
    	<option value="0 ">Please select</option>
    	<option value="1 ">1</option>
    	<option value="2 ">2</option>
    	<option value="3 ">3</option>	
    </select>
</div></li>
</ul>
<ul class="listings-filters__list" data-count="5">
	<li class="listings-filters__item listings-filters__item--orange">{{> @custom-inputs--select type="orange"}}</li>
	<li class="listings-filters__item">{{> @custom-inputs--select}}</li>
	<li class="listings-filters__item">{{> @custom-inputs--select}}</li>
	<li class="listings-filters__item">{{> @custom-inputs--select}}</li>
	<li class="listings-filters__item">{{> @custom-inputs--select}}</li>
</ul>
/* No context defined for this component. */
.listings-filters__list {
	display: block;
	@include clearfix();
	@include mq($from: med) {
		text-align: flip(right,left);
		border-bottom: 2px solid $grey--dark;	
	}
}
.listings-filters__item {
	margin-bottom: 1em;
	@include mq($from: med) {
		width: 50%;
		display: inline-block;
		vertical-align: bottom;
		background: $white;
		padding: 0.5em 0.5em 0.5em 50px;
		position: relative;
		overflow: hidden;
		margin-left: -5px;
		&:before {
			content: '';
			display: inline-block;
			position: absolute;
			left: 0;
			top: 0;
			width: 0;
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 50px 50px 0 0;
			border-color: $grey--superlight transparent transparent transparent;
		}
		//demo
		&:first-child {
			width: 100%;
		}
		:not(#foo) .custom-input__select {
			padding-left: 0;
		}
	}
	&--orange {
		background: $brand--prime;
	}
	@include mq($from: large) {
		margin-bottom: 0;
		[data-count="5"] & {
			width: 20%;
			&:first-child {
				width: 20%;
			}
		}
		[data-count="3"] & {
			width: 33.3333%;
		}
		
	}
}
.product-listing__filters {
	margin-bottom: 1em;
}

There are no notes for this item.