Permalink
Fetching contributors…
Cannot retrieve contributors at this time
92 lines (80 sloc) 2.47 KB
// @page Pattern Library/Components
// @name Table toolbar
//
// @description
// The table toolbar sits above comparison tables and holds search refinement and filtering tools.
//
// @markup
// <div class="us-table-toolbar">
// <div class="us-table-toolbar__wrapper">
// <form class='us-calculator'>
// <h2 class='us-table-toolbar__heading'>How much would you like to transfer?</h2>
// <div class='us-input-group us-calculator__input'>
// <div class='us-input-group__box'>£</div>
// <input type='text' class='us-form-input' pattern='[0-9]*' name='amount' id='amount' value='3000' />
// </div>
// <button class='us-btn us-btn--primary'>Update results</button>
// <div class='us-tooltip us-tooltip--right'>
// <div class='us-tooltip__wrapper'>
// <div class='us-tooltip__icon'></div>
// <div class='us-tooltip__note'>
// <div class='us-tooltip__arrow'></div>
// Note that this is illustrative and this figure does not reflect the credit limit you will be offered.
// </div>
// </div>
// </div>
// </form>
// </div>
// <div class="us-table-toolbar__wrapper us-table-toolbar__wrapper--right">
// <div class="us-table-toolbar__sort">
// <h3 class="us-table-toolbar__heading">Sort by:</h3>
// <select class="us-form-select name="sort"">
// <option value="popularity">Popularity</option>
// <option value="apr">Lowest APR</option>
// <option value="min-credit-limit">Minimum credit limit</option>
// <option value="max-credit-limit">Maximum credit limit</option>
// </select>
// </div>
// </div>
// </div>
.us-table-toolbar {
background: $c-bggrey;
padding: $gutter-width / 2;
border-bottom: 1px solid $c-keylinegrey;
margin: 0 auto $gutter-width / 2;
@include respond-to(tablet) {
display: flex;
background-color: transparent;
border-bottom: 0;
padding: $gutter-width $gutter-width / 2;
flex-direction: row;
}
&__wrapper {
display: flex;
flex: 1 1;
&:first-child {
margin-bottom: $gutter-width / 2;
@include respond-to(tablet) {
margin-bottom: 0;
}
}
}
&__sort {
width: 100%;
@include respond-to(tablet) {
width: auto;
}
select {
width: 100%;
@include respond-to(tablet) {
width: auto;
}
}
}
&__wrapper--right {
justify-content: flex-end;
}
&__heading {
font-size: 18px;
}
}