projects/commons/src/lib/shared/modules/headers/components/header.component.ts
| selector | b2c-header |
| styleUrls | ./header.component.scss |
| templateUrl | ./header.component.html |
import { Component } from '@angular/core';
@Component({
selector: 'b2c-header',
templateUrl: './header.component.html',
styleUrls: [ './header.component.scss' ],
})
export class HeaderComponent {}
<cmn-nav-bar color="is-black">
<cmn-brand image="/assets/logo_riftgg.png"></cmn-brand>
<div class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item"
cmnBadge="Beta"
color="success">
Champions
</a>
<a class="navbar-item">
Support
</a>
<a class="navbar-item">
Blog
</a>
<a class="navbar-item">
Contact
</a>
</div>
<div class="navbar-end">
<div class="navbar-item">
<span>Proud sponsors of</span>
<img src="/assets/origenbcn_logo.png" alt="">
</div>
</div>
</div>
</cmn-nav-bar>
./header.component.scss
:host {
::ng-deep {
cmn-nav-bar {
.navbar {
height: 70px;
z-index: 10;
.navbar-menu {
.navbar-start {
margin-left: 2em;
.navbar-item {
padding: 0 1.2em;
text-transform: uppercase;
&:first-child {
margin-right: 2.4em;
padding-right: 1.8em;
}
&:after {
top: 25px;
font-size: 10px;
font-weight: 900;
border-radius: 4px;
border: 1px solid transparent;
box-shadow: none;
}
}
}
.navbar-end {
span {
margin-right: .8em;
}
}
}
}
cmn-brand {
.navbar-brand {
height: 100%;
img {
max-height: 2.5em;
}
}
}
}
}
}