.c-faq-filters
scss
.c-faq-filters {
align-items: center;
display: flex;
flex-direction: column-reverse;
justify-content: space-between;
@include media-breakpoint-up('tablet') {
flex-direction: row;
}
@include element('actions') {
@include use-font('title');
display: flex;
justify-content: space-between;
margin: 0 0 16px auto;
max-width: 224px;
min-width: 224px;
@include media-breakpoint-up('tablet') {
margin-bottom: 0;
}
.c-action-link {
@include use-font('title');
border-bottom: 0;
[class^='icon-'],
[class*=' icon-'] {
color: use-color('secondary');
display: flex;
}
}
}
// overrides
.app-form--search {
margin: 0;
width: 100%;
.c-input {
height: 32px;
// width: 100%;
@include media-breakpoint-up('tablet') {
max-width: 352px;
}
}
}
}
Example
html
<div class="c-section-card">
<div class="c-faq-filters">
<form class="app-form--search">
<input type="text" class="c-input c-input--search" placeholder="Buscar">
</form>
<div class="c-faq-filters__actions">
<a class="c-action-link">
<span class="icon-download"></span>
</a>
<a class="c-action-link">
<span class="icon-upload-cloud"></span>
</a>
<a class="c-action-link">
<span class="icon-plus"></span>
</a>
</div>
</div>
</div>