diff --git a/docs/app/@theme/components/header/header.component.scss b/docs/app/@theme/components/header/header.component.scss
index 4ec75790..1a5d410c 100644
--- a/docs/app/@theme/components/header/header.component.scss
+++ b/docs/app/@theme/components/header/header.component.scss
@@ -16,6 +16,8 @@
$menu-item-fg-active: nb-theme(header-menu-fg-active);
$contacts-fg: nb-theme(color-fg-heading-light);
$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;
flex: 1 0 auto;
@@ -39,6 +41,7 @@
&.middle {
flex: 1;
+ justify-content: flex-end;
}
}
@@ -65,6 +68,7 @@
display: none;
align-items: center;
padding-right: 2rem;
+ margin-left: auto;
i {
margin-right: 0.5rem;
@@ -75,14 +79,12 @@
.menu-items {
display: flex;
- justify-content: flex-start;
.menu-item {
border: none;
- width: 5.375rem;
a {
- padding: 0.675rem 1.375rem;
+ padding: $menu-sm-padding;
color: $menu-item-fg;
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) {
- .section {
+ .section.left,
+ .section.right {
padding: 0.875rem 0;
}
+
+ .section.middle {
+ justify-content: flex-start;
+ }
}
@include media-breakpoint-up(sm) {
@@ -130,8 +141,12 @@
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) {
display: list-item;
}
+
+ .backend-bundles {
+ display: flex;
+ }
}
@include media-breakpoint-up(lg) {
@@ -248,13 +267,11 @@
flex-basis: auto;
}
- @include media-breakpoint-up(is) {
+ @include media-breakpoint-up(sm) {
::ng-deep nb-menu .menu-items li:first-child {
display: list-item;
}
- }
- @include media-breakpoint-up(sm) {
.section.middle {
justify-content: space-between;
}
@@ -264,9 +281,6 @@
height: 1.25rem;
margin-left: auto;
}
- .backend-bundles {
- display: flex;
- }
}
@include media-breakpoint-up(lg) {
diff --git a/docs/app/shared/components/material-theme-link/material-theme-link.component.html b/docs/app/shared/components/material-theme-link/material-theme-link.component.html
index b69caa37..8e2562ba 100644
--- a/docs/app/shared/components/material-theme-link/material-theme-link.component.html
+++ b/docs/app/shared/components/material-theme-link/material-theme-link.component.html
@@ -2,7 +2,7 @@