Styleguide version 1.0.4

Search Filter 

<!-- Not Selected Down -->
<a href="#" class="filter">
    <div class="filter__label is-down">Pertinence</div>
</a>


<!-- Not Selected Up -->
<a href="#" class="filter">
    <div class="filter__label is-up">Pertinence</div>
</a>


<!-- Selected Up -->
<a href="#" class="filter is-selected">
    <div class="filter__label is-down">Date</div>
</a>


<!-- Selected Down -->
<a href="#" class="filter is-selected">
    <div class="filter__label is-up">Date</div>
</a>


<a href="{{ src }}" class="filter{{#if active }} is-selected{{/if}}">
	<div class="filter__label {{#compare order "DESC"}}is-down{{/compare}}{{#compare order "ASC"}}is-up{{/compare}}">{{ label }}</div>
</a>
  • Content: 
    .filter {
	text-decoration: none;
	color: $color-text;
	display: inline-block;
	margin-right: 20px;

	&::before {
		display: none;
	}
	&:last-of-type {
		margin-right: 0;
	}

	&__label {
		position: relative;
		border: none;
		background: none;
		outline: none;
		-webkit-appearance: none;
		font-family: $font-highlight;
		@extend .u-t-size--16;
		padding-right: 13px; // to let the text 'breathe' a bit…

		&::after {
			content: '';
			position: absolute;
			width: 0;
			right: 0;
			height: 0px;
			@include fluid-props(top, $fluid-min, $fluid-max, 3px, 6px);
			border-style: solid;
			border-width: 5px 5px 0 5px;
			border-color: $color-primary transparent transparent transparent;
		}

		&.is-up::after {
			@include fluid-props(top, $fluid-min, $fluid-max, 3px, 6px);
			border-width: 0 5px 5px 5px;
			border-color: transparent transparent $color-primary transparent;
		}

		@include hover-behaviour {
			color: $color-primary;
		}
	}

	&.is-selected {
		.filter__label {
			color: $color-primary;
		}
	}
}
  • URL: /components/raw/a-filter/_a-filter.scss
  • Filesystem Path: src/components/atoms/a-filter/_a-filter.scss
  • Size: 1 KB 
/* Not Selected Down */
{
  "src": "#",
  "label": "Pertinence",
  "active": null,
  "order": "DESC"
}


/* Not Selected Up */
{
  "src": "#",
  "label": "Pertinence",
  "active": null,
  "order": "ASC"
}


/* Selected Up */
{
  "src": "#",
  "label": "Date",
  "active": true,
  "order": "DESC"
}


/* Selected Down */
{
  "src": "#",
  "label": "Date",
  "active": true,
  "order": "ASC"
}

There are no notes for this item.