<div class="sc-totals card">
<div class="card-body">
<h2 class="sc-totals__title">
<span>Totals</span>
<span>53.21</span>
</h2>
<ul class="sc-totals__lines">
<li class="sc-totals__line -savings">
<span>Savings</span>
<span>5.09</span>
</li>
<li class="sc-totals__line -currency">
<span>Currency</span>
<span>USD</span>
</li>
<li class="sc-totals__line -tax">All prices includes tax</li>
</ul>
<form class="input-group sc-totals__promo-code">
<input type="text" class="form-control" placeholder="Promo Code" aria-label="Promo Code">
<button class="btn sc-totals__btn -promo-code" type="button" id="btnApply">Apply</button>
</form>
<div class="form-group form-check sc-terms-checkbox">
<input type="checkbox" class="form-check-input" id="terms">
<label class="form-check-label" for="terms">Accept <a href="https://getbootstrap.com/" target="_blank">Terms and Conditions</a></label>
</div>
<a class="btn sc-totals__btn -checkout">Checkout</a>
<a class="btn sc-totals__btn -pickup">Store Pickup</a>
</div>
</div>
.sc-totals {
.card-body {
display: flex;
flex-direction: column;
}
}
.sc-totals__title,
.sc-totals__line {
display: flex;
flex: 1 1 auto;
justify-content: space-between;
}
.sc-totals__lines {
padding-left: 0;
list-style: none;
}
.sc-totals__line {
&.-savings {
color: $success;
}
&.-tax {
color: $gray-400;
font-size: $font-size-sm;
}
}
.sc-totals__btn {
margin-bottom: map_get($spacers, 2);
margin-top: map_get($spacers, 2);
&.-checkout {
@include button-variant($primary, $primary);
}
&.-pickup {
@include button-outline-variant($primary);
}
}
.sc-totals__promo-code {
margin-bottom: map_get($spacers, 3);
order: -1;
.sc-totals__btn.-promo-code {
margin-bottom: map_get($spacers, 0);
margin-top: map_get($spacers, 0);
@include button-outline-variant($primary);
}
}
.sc-terms-checkbox {
display: flex;
justify-content: center;
margin-bottom: map_get($spacers, 3);
.form-check-input {
margin-right: map_get($spacers, 2);
}
}
//----------------------------------------Case-1
/*.sc-terms-checkbox {
display: none;
}
.sc-totals {
.sc-terms-checkbox {
display: none;
}
}
.sc-terms-checkbox,
.sc-totals__line.-savings{
display: none;
}
.sc-btn-checkout{
order: 1
}
.sc-promo-code{
order: 2
}
.sc-totals__lines{
order: 3
}
.sc-totals__title {
order: 4
}
.sc-totals__promo-code {
margin-top: map_get($spacers, 3);
.sc-btn-promo-code {
@include button-variant($primary, $primary);
}
}
.sc-totals__btn {
&.-pickup {
@include button-variant($white, $white);
}
}
*/
//--------------------------------------Case-2
.sc-totals {
.sc-terms-checkbox {
display: none;
}
}
.sc-totals__btn {
&.-pickup {
display: none;
}
}
.sc-totals__btn.-checkout{
order: 1;
}
.sc-totals__lines{
order: 2;
}
.sc-totals__title {
order: 3;
}
.sc-totals {
.sc-terms-checkbox {
order: 5;
}
}
.sc-totals__promo-code {
order: 6;
}
.sc-totals__title,
.sc-totals__lines,
.sc-totals__promo-code {
border-left: $border-width solid $border-color;
border-top: $border-width solid $border-color;
border-right: $border-width solid $border-color;
padding: map_get($spacers, 2);
margin-bottom: 0;
}
.sc-totals__promo-code {
border-bottom: $border-width solid $border-color;
}
.sc-totals__line,
.sc-totals__title {
& span:first-child {
color: $gray-500;
}
& span:last-child {
font-weight: $font-weight-bolder;
}
}
.sc-totals__title {
& span:last-child {
color: $green;
}
& span:first-child {
color: $black;
}
}
.sc-totals__line {
&.-tax {
color: $primary;
font-size: $font-size-sm * 0.8;
}
&.-savings {
color: $black;
}
}
//----------------------------------------Case-3
View Compiled
This Pen doesn't use any external JavaScript resources.