File

projects/commons/src/lib/shared/modules/headers/components/header.component.ts

Metadata

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

result-matching ""

    No results matching ""