Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-16 15:40:11 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(header): links overflow

Browse source 
After adding new items we need to hide links earlier.
This commit is contained in:
Sergey Andrievskiy 2020-10-30 12:41:16 +03:00
parent eef17a8daf
commit 1cde650472
2 changed files with 27 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -16,6 +16,8 @@
$menu-item-fg-active: nb-theme(header-menu-fg-active); $menu-item-fg-active: nb-theme(header-menu-fg-active);
$contacts-fg: nb-theme(color-fg-heading-light); $contacts-fg: nb-theme(color-fg-heading-light);
$contacts-active-fg: nb-theme(header-menu-fg-active); $contacts-active-fg: nb-theme(header-menu-fg-active);
$menu-sm-padding: 0.675rem 0.375rem;
$menu-md-padding: 0.675rem 1.375rem;
display: flex; display: flex;
flex: 1 0 auto; flex: 1 0 auto;
@ -39,6 +41,7 @@
&.middle { &.middle {
flex: 1; flex: 1;
justify-content: flex-end;
} }
} }
@ -65,6 +68,7 @@
display: none; display: none;
align-items: center; align-items: center;
padding-right: 2rem; padding-right: 2rem;
margin-left: auto;
i { i {
margin-right: 0.5rem; margin-right: 0.5rem;
@ -75,14 +79,12 @@
.menu-items { .menu-items {
display: flex; display: flex;
justify-content: flex-start;
.menu-item { .menu-item {
border: none; border: none;
width: 5.375rem;
a { a {
padding: 0.675rem 1.375rem; padding: $menu-sm-padding;
color: $menu-item-fg; color: $menu-item-fg;
display: block; display: block;
@ -110,10 +112,19 @@
} }
} }
::ng-deep ngx-material-theme-link a.material-theme-link {
padding: $menu-sm-padding;
}
@include media-breakpoint-up(is) { @include media-breakpoint-up(is) {
.section { .section.left,
.section.right {
padding: 0.875rem 0; padding: 0.875rem 0;
} }
.section.middle {
justify-content: flex-start;
}
} }
@include media-breakpoint-up(sm) { @include media-breakpoint-up(sm) {
@ -130,8 +141,12 @@
display: inline; display: inline;
} }
} }
.backend-bundles {
display: flex; ::ng-deep {
nb-menu .menu-items .menu-item a,
ngx-material-theme-link a.material-theme-link {
padding: $menu-md-padding;
}
} }
} }
@ -149,6 +164,10 @@
::ng-deep nb-menu .menu-items li:nth-child(2) { ::ng-deep nb-menu .menu-items li:nth-child(2) {
display: list-item; display: list-item;
} }
.backend-bundles {
display: flex;
}
} }
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
@ -248,13 +267,11 @@
flex-basis: auto; flex-basis: auto;
} }
@include media-breakpoint-up(is) { @include media-breakpoint-up(sm) {
::ng-deep nb-menu .menu-items li:first-child { ::ng-deep nb-menu .menu-items li:first-child {
display: list-item; display: list-item;
} }
}
@include media-breakpoint-up(sm) {
.section.middle { .section.middle {
justify-content: space-between; justify-content: space-between;
} }
@ -264,9 +281,6 @@
height: 1.25rem; height: 1.25rem;
margin-left: auto; margin-left: auto;
} }
.backend-bundles {
display: flex;
}
} }
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {

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

@ -2,7 +2,7 @@
<nb-badge text="New!" status="danger" position="top right"></nb-badge> <nb-badge text="New!" status="danger" position="top right"></nb-badge>
<a <a
routerLink="/material" routerLink="/material"
class="eva-parent-hover" class="material-theme-link eva-parent-hover"
[nbPopover]="popoverContent" [nbPopover]="popoverContent"
nbPopoverPlacement="bottom" nbPopoverPlacement="bottom"
nbPopoverTrigger="noop" nbPopoverTrigger="noop"