<div class="c-global-filter ">
<label for="filters" class="c-global-filter__label">Global filter label</label>
<input class="c-input c-global-filter__input" id="filters" placeholder="Type in to filter..." value="" type="text">
</div>
<div class="c-global-filter {{#if extraClassContainer}} {{extraClassContainer}}{{/if}}">
<label for="{{ inputID }}" class="c-global-filter__label">{{ label }}</label>
{{#if powerSelect}}
{{> '@input--power-select'}}
{{else}}
<input class="c-input c-global-filter__input{{#if mod}} {{mod}}{{/if}}"{{#if inputID}} id="{{inputID}}"{{/if}} placeholder="{{ placeholder }}" value="{{value}}" type="text">
{{/if}}
</div>
{
"label": "Global filter label",
"inputID": "filters",
"placeholder": "Type in to filter..."
}
.c-global-filter {
position: relative;
padding: $space-sm;
border-radius: $global-radius;
background-color: $color-brand-primary-0;
transition: $global-transition;
> * + * {
margin-top: $space-xxs;
}
@include hocus() {
box-shadow: $global-box-shadow;
}
}
.c-global-filter__label {
@include text-preset-6;
color: $color-brand-secondary-900;
}
.c-input.c-global-filter__input,
.c-input--power-select.c-global-filter__input .ember-power-select-trigger {
border: rem(1.5) solid $color-brand-primary-100;
&:focus,
&:focus-within {
border-color: $color-brand-primary-200;
}
}
There are no notes for this item.