Filter Bar

There are no notes for this item.

<div class="filter-bar">
    <div class="filter-bar__inner">

        <div class="filter-bar__field">
            <p class="filter-bar__label">Category:</p>
            <select class="select-field filter-bar__select" id="filter-category">
				<option value="">all</option>
				<option value="calendars">Calendars</option>
				<option value="content-editing">Content editing</option>
				<option value="dashboard-widgets">Dashboard widgets</option>
				<option value="development-and-workflow">Development &amp; workflow</option>
				<option value="ecommerce">Ecommerce</option>
				<option value="forms-and-media">Forms &amp; media</option>
				<option value="manager-enhancements">Manager enhancements</option>
				<option value="narrow-casting">Narrow casting</option>
			</select>
        </div>

        <div class="filter-bar__field">
            <p class="filter-bar__label">Type:</p>
            <div class="switch-field" id="filter-type">
                <input type="radio" id="filter-type-all" name="type-filter" value="all" checked/>
                <label for="filter-type-all">All</label>
                <input type="radio" id="filter-type-premium" name="type-filter" value="premium" />
                <label for="filter-type-premium">Premium</label>
                <input type="radio" id="filter-type-free" name="type-filter" value="free" />
                <label for="filter-type-free">Free</label>
            </div>
        </div>

    </div>
</div>
/* No context defined for this component. */
  • Content:
    /*------------------------------------*\
    	Filter bar
    \*------------------------------------*/
    
    .filter-bar {
    	border-bottom: 1px solid rgba(0,0,0,.1);
    	background-color: $color-white;
    	padding: 1.2rem 0;
    	margin-bottom: 2rem;
    	overflow-x: auto;
    }
    
    .filter-bar__inner {
    	display: flex;
    	flex-direction: column;
    }
    
    .filter-bar__field {
    	display: flex;
    	align-items: center;
    	margin: 0 0.5em;
    }
    
    .filter-bar__field:first-of-type {
    	margin-bottom: 1em;
    }
    
    .filter-bar__label {
    	position: relative;
    	top: 1px;
    	margin: 0;
    	font-weight: bold;
    	margin-right: 0.8rem;
    	color: $color-grey-base;
    	text-transform: uppercase;
    	line-height: 1;
    	min-width: 92px;
    }
    
    .filter-bar__select {
    	min-width: 240px;
    	max-width: 280px;
    }
    
    .filter-bar__field .switch-field label:last-child {
    	margin-right: 0.5em;
    }
    
    @include mq(medium-major) {
    	.filter-bar__inner {
    		display: flex;
    		align-items: center;
    		justify-content: center;
    		flex-direction: row;
    	}
    
    	.filter-bar__field {
    		margin: 0;
    	}
    
    	.filter-bar__field:first-of-type {
    		margin-bottom: 0;
    	}
    
    	.filter-bar__field .switch-field label:last-child {
    		margin-right: 0;
    	}
    
    	.filter-bar__select:first-of-type {
    		margin-right: 3rem;
    	}
    
    	.filter-bar__label {
    		min-width: auto;
    	}
    }
    
  • URL: /components/raw/filter-bar/filter-bar.scss
  • Filesystem Path: components/02-components/filter-bar/filter-bar.scss
  • Size: 1.2 KB