File

projects/commons/src/lib/shared/modules/user-info/components/user-info.component.ts

Metadata

selector b2c-user-info
styleUrls ./user-info.component.scss
templateUrl ./user-info.component.html
import { Component } from '@angular/core';

@Component({
    selector: 'b2c-user-info',
    templateUrl: './user-info.component.html',
    styleUrls: [ './user-info.component.scss' ],
})

export class UserInfoComponent {}
<cmn-nav-bar color="is-dark">
    <div class="navbar-menu">
        <div class="navbar-start">
            <a [routerLink]="['/sign', 'in']"
               class="navbar-item">
                Login
            </a>
            <a [routerLink]="['/sign', 'up']"
               class="navbar-item">
                Register
            </a>
        </div>
        <div class="navbar-end">
            <cmn-lang-picker></cmn-lang-picker>
        </div>
    </div>
</cmn-nav-bar>

./user-info.component.scss

@import "../../../../../assets/styles/settings/_colors";

:host {
    ::ng-deep {
        cmn-nav-bar {
            .navbar {
                min-height: 0;
                height: 40px;

                .container {
                    min-height: 0;
                }

                .navbar-item {
                    padding-left: 0;
                    margin-right: 2em;
                    text-transform: uppercase;

                    &:hover {
                        color: $primary !important;
                        background-color: transparent !important;
                    }
                }

                cmn-lang-picker {
                    cmn-dropdown {
                        .dropdown-trigger {
                            button {
                                background-color: transparent;
                                color: white;
                                font-weight: 100;
                                text-transform: uppercase;
                            }
                        }

                        .dropdown-menu {
                            min-width: 0;

                            .dropdown-content {
                                border-radius: 0;
                                background-color: #444444;

                                .dropdown-item {
                                    color: white;
                                    font-size: 12px;
                                    padding: 1em 1.5em;
                                    text-transform: uppercase;

                                    &:hover {
                                        background-color: transparent;
                                        color: $primary;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""