src/app/checkout/checkout-views/views/checkout/checkout-view.component.ts
changeDetection | ChangeDetectionStrategy.OnPush |
encapsulation | ViewEncapsulation.None |
selector | checkout-view |
styleUrls | ./checkout-view.component.scss, |
templateUrl | ./checkout-view.component.html |
import { Component, ViewEncapsulation, ChangeDetectionStrategy } from "@angular/core"
@Component({
selector: 'checkout-view',
templateUrl: './checkout-view.component.html',
styleUrls: [
'./checkout-view.component.scss',
'./../../../../cart/cart-components/components/shopping-cart/ui/shopping-cart-checkout.scss'
],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class CheckoutViewComponent {}
<section class="checkout-view">
<article fxLayoutAlign="space-around" fxLayout.lt-sm="column">
<div>
<h2>Your Books for Checkout</h2>
<shopping-cart ui="checkout"></shopping-cart>
</div>
<div>
<h2>Fill in:</h2>
<checkout-user-form></checkout-user-form>
</div>
</article>
<article fxLayoutAlign="center">
<checkout-submit-button></checkout-submit-button>
</article>
</section>
./checkout-view.component.scss
@import '../../../../../styles/colors';
.checkout-view {
padding: 2rem;
}
shopping-cart {
article {
margin-bottom: 1rem;
}
}
checkout-user-form {
.mat-form-field-infix {
width: 15rem;
}
}
checkout-submit-button {
button[color="primary"] {
margin-top: 4rem;
width: 16rem;
height: 4rem;
font-size: 1.5rem;
span {
color: $white;
}
}
}
./../../../../cart/cart-components/components/shopping-cart/ui/shopping-cart-checkout.scss
/**
* @description Styling of the Shopping-Cart as a part of the Checkout page
*/
@import '../../../../../../styles/colors';
// @todo @future consider making a mixin of shopping-cart's checkout style or other SCSS techniques of abstraction to gain more flexbility. Open to suggestion!
.checkout-view {
shopping-cart {
// width: 100%;
article {
background-color: $transparent;
border: none;
padding: 0;
margin-top: 1rem;
}
ul {
list-style: none;
padding: 0;
li {
margin-bottom: .5rem;
.author {
margin-top: .25rem;
}
.close {
width: auto;
height: auto;
font-size: .8rem;
margin-left: 1rem;
margin-right: .25rem;
&:hover {
cursor: pointer;
}
}
.row-number {
margin-left: .25rem;
margin-right: .25rem;
}
}
}
}
}