Sha256: 11c62c4119516c1cedea41d2660f773b727178f4eceb0a368a60a4c9ec28b9fc
Contents?: true
Size: 1.3 KB
Versions: 5
Compression:
Stored size: 1.3 KB
Contents
// @page Pattern Library/Components
// @name Calculator
//
// @description
// The calculator tends to sit in the table toolbar component and is used to refine results from comparison tables, and give estimated info about products based on the input.
//
// @markup
// <form class='us-calculator'>
// <h2 class='us-table-toolbar__heading'>How much would you like to transfer?</h2>
// <div class='us-calculator__input us-input-group'>
// <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-calculator__btn 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>
.us-calculator {
position: relative;
display: block;
width: 100%;
&__input {
display: inline-table;
margin-right: 10px;
}
&__btn {
display: block;
margin: .5em;
width: auto;
}
}
Version data entries
5 entries across 5 versions & 1 rubygems