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

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

@ -8,8 +8,10 @@
</div>
</div>
<div class="section middle">
<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>

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

@ -5,8 +5,6 @@
nbPopoverPlacement="bottom"
nbPopoverTrigger="noop"
>
<i [innerHTML]="'color-palette-outline' | eva: { width: 24, height: 24, fill: '#ff4d6b', animationType: 'shake' }"
></i>
Material Theme
</a>

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

@ -1,3 +1,12 @@
@import '../../../@theme/styles/themes';
@import '~@nebular/theme/styles/global/breakpoints';
@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;
@ -5,12 +14,19 @@
}
a {
display: flex;
align-items: center;
}
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;
i {
margin-right: 8px;
&:hover, &.active, &:focus {
color: $menu-item-fg-active;
outline: none !important;
}
}
}
.material-theme-popover {

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

@ -26,7 +26,7 @@
<div class="header-container">
<nb-actions size="small">
<nb-action class="control-item github-stars">
<span class="subtitle text">Support us: </span>
<span [ngClass]="{ 'material-text-color': (materialTheme$ | async) }" class="subtitle text">Support us: </span>
<iframe src="https://ghbtns.com/github-btn.html?user=akveo&repo=ngx-admin&type=star&count=true"
frameborder="0"
scrolling="0"
@ -36,12 +36,12 @@
</nb-action>
<nb-action class="control-item downloads-count">
<nb-icon icon="download"></nb-icon>
<span class="subtitle number">470.000</span>
<span [ngClass]="{ 'material-text-color': (materialTheme$ | async) }" class="subtitle number">470.000</span>
</nb-action>
<nb-action class="control-item contact-us" matRipple [matRippleUnbounded]="false" [matRippleCentered]="true">
<a nbButton ghost href="mailto:contact@akveo.com" (click)="trackEmailClick()">
<nb-icon icon="email-outline" pack="eva"></nb-icon>
<span>contact@akveo.com</span>
<span [ngClass]="{ 'material-text-color': (materialTheme$ | async) }">contact@akveo.com</span>
</a>
</nb-action>
<nb-action class="control-item search">

4
src/app/@theme/components/header/header.component.scss
View file

@ -7,6 +7,10 @@
justify-content: space-between;
width: 100%;
.material-text-color {
color: nb-theme(color-basic-100)
}
.logo-container {
display: flex;
align-items: center;