projects/commons/src/lib/shared/modules/footer/components/footer.component.ts
| selector | b2c-footer |
| styleUrls | ./footer.component.scss |
| templateUrl | ./footer.component.html |
import { Component } from '@angular/core';
@Component({
selector: 'b2c-footer',
templateUrl: './footer.component.html',
styleUrls: [ './footer.component.scss' ],
})
export class FooterComponent {}
<cmn-nav-bar color="is-dark">
<cmn-brand image="/assets/logo_riftgg_white.png"></cmn-brand>
<div class="navbar-menu">
<div class="navbar-end">
<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>
</cmn-nav-bar>
<div class="copyright">
<div class="container has-text-centered">
<small>
RiftGG isn’t endorsed by Riot Games and doesn’t reflect the views or opinions of Riot Games or anyone officially involved in producing or managing League of Legends.
League of Legends and Riot Games are trademarks or registered trademarks of Riot Games, Inc. League of Legends © Riot Games, Inc.
</small>
</div>
</div>
./footer.component.scss
:host {
::ng-deep {
.copyright {
color: white;
background-color: #182631;
.container {
margin-top: 0;
padding: 2em;
border-top: 1px solid white;
small {
padding: 0 6em;
font-size: 11px;
}
}
}
.navbar {
color: white;
background-color: #182631;
.container {
margin: 2em auto !important;
}
.navbar-menu {
.navbar-end {
.navbar-item {
padding: 0 1.2em;
text-transform: uppercase;
&:first-child {
margin-right: 2.4em;
padding-right: 1.8em;
}
&:after {
top: 15px;
font-size: 10px;
font-weight: 900;
border-radius: 4px;
border: 1px solid transparent;
box-shadow: none;
}
}
}
}
}
}
}