File

projects/commons/src/lib/shared/modules/footer/components/footer.component.ts

Metadata

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;
                        }
                    }
                }
            }
        }
    }
}
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""