{% include layout/navbar-logo.html class="d-none-navbar-horizontal" %}
-
- Lorem ipsum
-
-
-
- only horizontal
-
+
+
Navigation
+ {% include layout/navbar-menu.html %}
-
- hide narrow
+
+ {% include layout/navbar-search.html %}
+ {% include ui/button.html text="Customize" icon="sliders" color="primary" block=true class="d-none-navbar-horizontal" %}
+
-
-
- only sidebar
-
-
-
Lorem ipsum
diff --git a/pages/tmp-layout.html b/pages/tmp-layout.html
index 7768ce22394501c622f735ac6c6b0847a2f0a16a..ad62e5398ea36d12affe15faa97bc7cc6e9955f3 100644
--- a/pages/tmp-layout.html
+++ b/pages/tmp-layout.html
@@ -2,6 +2,7 @@
tmp: true
page-header: Layout test
page-header-actions: buttons
+menu: home
---
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 3724b71e783864d8064214df55d56644e984c45e..b4c4d8c84fd3561fa8d6fc41d442c2a2b44879f9 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -22,7 +22,7 @@ $light-mix: rgba(mix($light, $dark, 64%), .24) !default;
$light-white: rgba($light, .24) !default;
$min-black: rgba($dark, .032) !default;
-$min-white: rgba($light, .032) !default;
+$min-white: rgba($light, .064) !default;
$gray-100: $light !default;
$gray-200: mix($light, $dark, 98%) !default;
@@ -218,6 +218,7 @@ $sidenav-dark-color: $white !default;
$sidenav-padding: 1.25rem !default;
$sidenav-breakpoint-show: 'sm' !default;
$sidenav-breakpoint-folded: 'lg' !default;
+$sidenav-active-accent-color: $primary !default;
//alerts
$alert-link-font-weight: $font-weight-bold !default;
@@ -349,10 +350,15 @@ $popover-border-color: $border-color !default;
$navbar-padding-y: .75rem !default;
$navbar-nav-link-padding-x: .75rem !default;
-$navbar-light-color: $text-muted !default;
+
+$navbar-light-color: rgba($body-color, .64) !default;
$navbar-light-active-color: $primary !default;
$navbar-light-hover-color: $body-color !default;
+$navbar-dark-color: rgba($white, .64) !default;
+$navbar-dark-active-color: $white !default;
+$navbar-dark-hover-color: $white !default;
+
//pagination
$pagination-border-width: 0 !default;
$pagination-padding-y: .25rem !default;
@@ -455,3 +461,4 @@ $enable-social-colors: true !default;
$enable-ghost-buttons: true !default;
$enable-extra-colors: true !default;
$enable-gradients: false !default;
+$enable-navbar-vertical: true !default;
diff --git a/scss/layout/_mainnav.scss b/scss/layout/_mainnav.scss
index 8f9aa9afaa78aae0e7bbc75bff89d52ebe1abc14..75398a0ec47574a41ba688c02ab39df901248099 100644
--- a/scss/layout/_mainnav.scss
+++ b/scss/layout/_mainnav.scss
@@ -1,3 +1,48 @@
+@mixin navbar-vertical-narrow {
+ width: $sidenav-width-narrow;
+
+ .navbar-nav {
+ margin-top: 0;
+ }
+
+ .nav-link {
+ height: 3rem; //todo: to variable
+ }
+
+ .nav-link-title {
+ display: none;
+ }
+
+ .nav-link-icon {
+ margin: 0 auto;
+ }
+
+ .d-none-navbar-vertical-narrow {
+ display: none;
+ }
+
+ .navbar-brand-logo-large {
+ display: none;
+ }
+
+ .navbar-brand-logo-small {
+ display: inline-block;
+ }
+
+ ~ .navbar,
+ ~ .content {
+ margin-left: $sidenav-width-narrow;
+ }
+
+ &.navbar-right {
+ ~ .navbar,
+ ~ .content {
+ margin-left: 0;
+ margin-right: $sidenav-width-narrow;
+ }
+ }
+}
+
@mixin navbar-vertical {
position: fixed;
left: 0;
@@ -7,10 +52,15 @@
z-index: $zindex-fixed;
min-height: auto;
align-items: start;
+ overflow: auto;
+ box-shadow: inset -1px 0 0 0 $border-color;
> [class*="container"] {
flex-direction: column;
- align-items: start;
+ align-items: stretch;
+ padding-left: 0;
+ padding-right: 0;
+ min-height: 100%;
}
~ .navbar,
@@ -32,65 +82,159 @@
justify-content: center;
}
- &.navbar-vertical-narrow {
- width: $sidenav-width-narrow;
+ .navbar-heading {
+ @include subheader();
+ display: block;
+ margin-bottom: .5rem;
+ }
- .d-none-navbar-vertical-narrow {
- display: none;
- }
+ .navbar-collapse {
+ flex-direction: column;
+ text-align: left;
+ align-items: normal;
- .navbar-brand-logo-large {
- display: none;
+ padding: $sidenav-padding $sidenav-padding;
+ }
+
+ .navbar-nav {
+ flex-direction: column;
+ margin-left: -($sidenav-padding);
+ margin-right: -($sidenav-padding);
+
+ .nav-link {
+ min-height: 0;
+ padding-left: $sidenav-padding;
+ padding-right: $sidenav-padding;
}
- .navbar-brand-logo-small {
- display: inline-block;
+ .nav-item {
+ &.active {
+ background: rgba($sidenav-active-accent-color, .032);
+
+ &:before {
+ left: 0;
+ right: auto;
+ top: 0;
+ bottom: 0;
+ height: auto;
+ width: 2px;
+ }
+ }
}
+ }
- ~ .navbar,
- ~ .content {
- margin-left: $sidenav-width-narrow;
+ .navbar-side {
+ margin-left: 0;
+ margin-top: auto;
+ padding-left: 0;
+ padding-top: $sidenav-padding;
+
+ > * {
+ margin-left: 0;
+ margin-top: 1rem;
}
}
&.navbar-right {
left: auto;
right: 0;
+ box-shadow: inset 1px 0 0 0 $border-color;
~ .navbar,
~ .content {
margin-left: 0;
margin-right: $sidenav-width;
}
+ }
- &.navbar-vertical-narrow {
- ~ .navbar,
- ~ .content {
- margin-right: $sidenav-width-narrow;
- }
- }
+ &.navbar-vertical-narrow {
+ @include navbar-vertical-narrow;
}
}
.page {
display: flex;
flex-direction: column;
+ position: relative;
}
.content {
- padding-top: map-get($spacers, 4);
- padding-bottom: map-get($spacers, 4);
+ padding-top: 1.25rem;
+ padding-bottom: 1.25rem;
@include media-breakpoint-up(xl) {
padding-left: .5rem;
padding-right: .5rem;
}
+
+ @media print {
+ margin: 0 !important;
+ }
}
.navbar {
min-height: $navbar-height;
padding-top: 0; //todo: move to varaibles
padding-bottom: 0;
+
+ @media print {
+ display: none;
+ margin: 0 !important;
+ }
+
+ .nav-link {
+ min-height: $navbar-height;
+ }
+
+ .nav-link-icon {
+ font-size: 1rem;
+ width: 1rem;
+ height: 1rem;
+ display: block;
+ margin-right: .5rem;
+ line-height: .99;
+ }
+}
+
+.navbar-expand {
+ @each $breakpoint, $breakpoint-max-width in $grid-breakpoints {
+ &-#{$breakpoint} {
+ @include media-breakpoint-up($breakpoint) {
+ .navbar-nav {
+ margin-left: (-$navbar-nav-link-padding-x);
+
+ .nav-item {
+ position: relative;
+
+ &.active {
+ &:before {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: $navbar-nav-link-padding-x;
+ right: $navbar-nav-link-padding-x;
+ height: 1px;
+ background: $sidenav-active-accent-color;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+}
+
+.navbar-side {
+ margin-left: auto;
+ padding-left: 1.5rem;
+
+ > * {
+ margin-left: 1rem;
+ }
+}
+
+.navbar-heading {
+ display: none;
}
/**
@@ -113,12 +257,14 @@ Navbar colors
*/
.navbar-light {
background: $white;
- box-shadow: 0 0 0 1px $border-color;
+ box-shadow: inset 0 -1px 0 0 $border-color;
+ @include scrollbar;
}
.navbar-dark {
background: $sidenav-dark-bg;
color: $sidenav-dark-color;
+ @include scrollbar(true);
.text-muted {
color: inherit !important;
@@ -128,27 +274,35 @@ Navbar colors
.navbar-brand-autodark {
filter: brightness(0) invert(1);
}
+
+ .form-control {
+ border-color: transparent;
+ background: $min-white;
+ color: $white;
+ }
}
/**
Navbar vertical
*/
-.navbar:not(.navbar-vertical) {
- .d-none-navbar-horizontal {
- display: none;
+@if $enable-navbar-vertical {
+ .navbar:not(.navbar-vertical) {
+ .d-none-navbar-horizontal {
+ display: none;
+ }
}
-}
-.navbar-vertical {
- @each $breakpoint, $breakpoint-max-width in $grid-breakpoints {
- &.navbar-expand-#{$breakpoint} {
- @include media-breakpoint-up($breakpoint) {
- @include navbar-vertical;
- }
+ .navbar-vertical {
+ @each $breakpoint, $breakpoint-max-width in $grid-breakpoints {
+ &.navbar-expand-#{$breakpoint} {
+ @include media-breakpoint-up($breakpoint) {
+ @include navbar-vertical;
+ }
- @include media-breakpoint-down-than($breakpoint) {
- .d-none-navbar-horizontal {
- display: none;
+ @include media-breakpoint-down-than($breakpoint) {
+ .d-none-navbar-horizontal {
+ display: none;
+ }
}
}
}
diff --git a/scss/ui/_type.scss b/scss/ui/_type.scss
index cab3a2f63e5262f5356f25f397343c80440dce88..a0c4ea213b429027f2a3b8ef29960702b85c9170 100644
--- a/scss/ui/_type.scss
+++ b/scss/ui/_type.scss
@@ -76,7 +76,7 @@ pre {
overflow: auto;
font-size: $code-font-size;
hyphens: none;
- line-height: 1.5;
+ line-height: $line-height-base;
tab-size: 3;
border-radius: $border-radius;
white-space: pre-wrap;