Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-09-22 05:50:48 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(docs): header fonts and material theme link

Browse source
This commit is contained in:
Alex 2020-04-01 11:51:28 +03:00
parent 576e369c92
commit 2a921c2a0f
9 changed files with 63 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

6
docs/app/@theme/components/header/header.component.html
View file

@ -8,8 +8,10 @@
</div>
</div>
<div class="section middle">
<nb-menu [items]="headerMenu"></nb-menu>
<ng-content></ng-content>
<div class="first-section">
<nb-menu [items]="headerMenu"></nb-menu>
<ng-content></ng-content>
</div>
<a routerLink="/" fragment="backend-bundles" class="backend-bundles eva-parent-hover">
<i [innerHTML]="'gift-outline' | eva: { width: 24, height: 24, fill: '#ff4d6b', animationType: 'shake' }"></i>
<span>Backend Bundles</span>

18
docs/app/@theme/components/header/header.component.scss
View file

@ -24,8 +24,15 @@
.section {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.875rem 0.5rem;
.first-section {
display: flex;
flex-direction: row;
}
&.left {
width: $left-section-width;
}
@ -65,7 +72,6 @@
}
::ng-deep nb-menu {
flex: 1;
.menu-items {
display: flex;
@ -200,6 +206,12 @@
&.docs-page {
.section {
.first-section {
display: flex;
flex-direction: row;
}
&.left {
align-items: center;
padding-left: 0;
@ -259,11 +271,9 @@
@include media-breakpoint-up(lg) {
.section.middle {
justify-content: space-around;
justify-content: space-between;
}
::ng-deep nb-menu {
min-width: 28rem;
.menu-items li {
display: list-item;
}

7
docs/app/@theme/styles/themes.scss
View file

@ -31,6 +31,8 @@ $nb-enabled-themes: (ngx-landing, ngx-landing-material, docs-page);
$nb-themes: nb-register-theme((
font-family-primary: unquote('-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'),
link-text-decoration: none,
content-width: 1440px,
settings-col-width: 16rem,
settings-col-margin: 1.875rem,
@ -62,6 +64,7 @@ $nb-themes: nb-register-theme((
header-fg: color-fg,
header-menu-fg-active: color-active-fg,
header-section-border-color: #f5f5f5,
header-font-weight: 600,
header-button-border: #dce4f2,
@ -130,6 +133,8 @@ $nb-themes: nb-register-theme((
$nb-themes: nb-register-theme((
font-family-primary: unquote('Roboto, sans-serif'),
link-text-decoration: none,
shadow: unquote('0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12)'),
header-shadow: unquote(
'0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12)'
@ -156,6 +161,8 @@ $nb-themes: nb-register-theme((
// custom
font-family-primary: unquote('-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'),
link-text-decoration: none,
content-width: 1440px,
settings-col-width: 16rem,
settings-col-margin: 1.875rem,

2
docs/app/pages/docs/landing-docs.component.html
View file

@ -2,7 +2,7 @@
<nb-layout-header fixed>
<div class="content-center">
<ngx-landing-header class="docs-header" [sidebarTag]="sidebarTag" [isDocs]="true">
<ngx-material-theme-link></ngx-material-theme-link>
<ngx-material-theme-link withPopover></ngx-material-theme-link>
</ngx-landing-header>
</div>
</nb-layout-header>

4
docs/app/shared/components/material-theme-link/material-theme-link.component.html
View file

@ -5,11 +5,9 @@
nbPopoverPlacement="bottom"
nbPopoverTrigger="noop"
>
<i [innerHTML]="'color-palette-outline' | eva: { width: 24, height: 24, fill: '#ff4d6b', animationType: 'shake' }"
></i>
Material Theme
</a>
<ng-template #popoverContent>
<p class="material-theme-popover" (mouseover)="hidePopover()">New theme is available!</p>
</ng-template>
</ng-template>

40
docs/app/shared/components/material-theme-link/material-theme-link.component.scss
View file

@ -1,16 +1,32 @@
:host {
display: flex;
align-items: center;
padding-right: 32px;
}
a {
display: flex;
align-items: center;
}
@import '../../../@theme/styles/themes';
@import '~@nebular/theme/styles/global/breakpoints';
i {
margin-right: 8px;
@include nb-install-component() {
$menu-item-fg: nb-theme(color-fg-heading-light);
$menu-item-fg-active: nb-theme(header-menu-fg-active);
$header-font-weight: nb-theme(header-font-weight);
:host {
display: flex;
align-items: center;
padding-right: 32px;
}
a {
text-decoration: none;
font-weight: $header-font-weight;
font-size: 13px;
line-height: 1.5rem;
padding: 0.675rem 1.375rem;
color: $menu-item-fg;
display: block;
&:hover, &.active, &:focus {
color: $menu-item-fg-active;
outline: none !important;
}
}
}
.material-theme-popover {
@ -19,4 +35,4 @@ i {
color: #ff4d6b;
font-weight: 600;
font-size: 1.1rem;
}
}

2
docs/app/shared/landing-shared.module.ts
View file

@ -1,5 +1,5 @@
import { NgModule } from '@angular/core';
import { NbPopoverModule } from '@nebular/theme';
import {NbPopoverModule} from '@nebular/theme';
import { MaterialThemeLinkComponent } from './components/material-theme-link/material-theme-link.component';
import { CapitalizePipe } from './pipes/capitalize.pipe';
import { EvaIconsPipe } from './pipes/eva-icons.pipe';