src/app/layouts/components/layout/layout.component.ts
changeDetection | ChangeDetectionStrategy.OnPush |
encapsulation | ViewEncapsulation.None |
selector | layout |
styleUrls | ./layout.component.scss, |
templateUrl | ./layout.component.html |
import { Component, ViewEncapsulation, ChangeDetectionStrategy } from "@angular/core"
@Component({
selector: 'layout',
templateUrl: './layout.component.html',
styleUrls: [
'./layout.component.scss',
'./../../../cart/cart-components/components/shopping-cart/ui/shopping-cart-dropdown.scss'
],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class LayoutComponent {}
<header class="layout">
<mat-toolbar>
<mat-icon aria-hidden="false" aria-label="Home" routerLink="/">home</mat-icon>
<span fxFlex="1 1 auto"></span>
<shopping-cart-icon></shopping-cart-icon>
<mat-icon class="checkout" aria-hidden="false" aria-label="Checkout" routerLink="/checkout">arrow_forward</mat-icon>
</mat-toolbar>
</header>
<section class="main-child-view">
<router-outlet></router-outlet>
</section>
./layout.component.scss
// Vars
@import '../../../../styles/layout';
@import '../../../../styles/colors';
//
// Base Layout
:host {
display: block;
height: 100vh;
}
header.layout {
-moz-box-shadow: 2px -5px 6px 5px $gray;
-webkit-box-shadow: 2px -5px 6px 5px $gray;
box-shadow: 2px -5px 6px 5px $gray;
mat-icon {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome and Opera */
&:hover {
cursor: pointer;
}
}
}
mat-icon.checkout {
margin-left: 1rem;
}
.main-child-view {
height: calc(100vh - #{$header-height});
overflow-y: auto;
}
./../../../cart/cart-components/components/shopping-cart/ui/shopping-cart-dropdown.scss
/**
* @description Styling of the Shopping-Cart as a Drop-Down Menu (as of writing, layout's header)
*/
@import '../../../../../../styles/colors';
// So we're not wrapping this one with a parent element to restrict the styling to the component (view) since this component's instance will be injected in a overlay, separate to that view component
shopping-cart {
width: 16rem;
article {
background-color: $white;
border: .05rem solid $primary;
border-radius: .25rem;
padding: .75rem .5rem;
}
ul {
list-style: none;
padding: 0;
li {
margin-bottom: .1rem;
.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;
}
}
}
}