diff --git a/pages/markdown.md b/pages/markdown.md
index 057142dac..e089553d1 100644
--- a/pages/markdown.md
+++ b/pages/markdown.md
@@ -1,6 +1,6 @@
---
title: Markdown
-page-title: Markdown
+page-header: Markdown
---
# Who's that then?
diff --git a/pages/music.html b/pages/music.html
index d74232504..5244894f0 100644
--- a/pages/music.html
+++ b/pages/music.html
@@ -1,6 +1,6 @@
---
title: Music components
-page-title: Music components
+page-header: Music components
menu: base.music
---
diff --git a/pages/pricing.html b/pages/pricing.html
index 63363ca56..7850e75e3 100644
--- a/pages/pricing.html
+++ b/pages/pricing.html
@@ -1,6 +1,6 @@
---
title: Pricing cards
-page-title: Pricing cards
+page-header: Pricing cards
done: true
---
diff --git a/pages/profile.html b/pages/profile.html
index 0982b0835..f29fc20d4 100644
--- a/pages/profile.html
+++ b/pages/profile.html
@@ -1,6 +1,6 @@
---
title: Profile
-page-title: Profile
+page-header: Profile
menu: base.profile
---
diff --git a/pages/ribbons.html b/pages/ribbons.html
index b4983b9be..12951840c 100644
--- a/pages/ribbons.html
+++ b/pages/ribbons.html
@@ -1,6 +1,6 @@
---
title: Ribbons
-page-title: Ribbons
+page-header: Ribbons
done: true
---
diff --git a/pages/rtl.html b/pages/rtl.html
index efe8c3acb..2ab651bf6 100644
--- a/pages/rtl.html
+++ b/pages/rtl.html
@@ -1,7 +1,7 @@
---
rtl: true
title: RTL mode
-page-title: RTL mode
+page-header: RTL mode
menu: pages.rtl
---
diff --git a/pages/search-results.html b/pages/search-results.html
index 7a8da8f52..273bae2af 100644
--- a/pages/search-results.html
+++ b/pages/search-results.html
@@ -1,6 +1,6 @@
---
-page-title: Search results
-page-title-description: About 2,410 result (0.19 seconds)
+page-header: Search results
+page-header-description: About 2,410 result (0.19 seconds)
menu: extra.search-results
---
diff --git a/pages/snippets.html b/pages/snippets.html
index 18707a19c..9c967be49 100644
--- a/pages/snippets.html
+++ b/pages/snippets.html
@@ -1,7 +1,7 @@
---
title: Snippets
-page-title: Snippets
-page-title-right: date
+page-header: Snippets
+page-header-actions: date
menu: extra.snippets
---
diff --git a/pages/social.html b/pages/social.html
index e04c4ea92..7bd2d22d4 100644
--- a/pages/social.html
+++ b/pages/social.html
@@ -1,6 +1,6 @@
---
title: Social elements
-page-title: Social elements
+page-header: Social elements
done: true
---
diff --git a/pages/store.html b/pages/store.html
index a54f49654..38aa36bab 100644
--- a/pages/store.html
+++ b/pages/store.html
@@ -1,6 +1,6 @@
---
title: Store
-page-title: Store
+page-header: Store
---
diff --git a/pages/tabs.html b/pages/tabs.html
index 43c929396..d3f55d44e 100644
--- a/pages/tabs.html
+++ b/pages/tabs.html
@@ -1,6 +1,6 @@
---
title: Tabs
-page-title: Tabs
+page-header: Tabs
done: true
---
diff --git a/pages/tmp-dark.html b/pages/tmp-dark.html
index 813ab51bb..60bafe25c 100644
--- a/pages/tmp-dark.html
+++ b/pages/tmp-dark.html
@@ -1,5 +1,5 @@
---
-page-title: Dark
+page-header: Dark
---
diff --git a/pages/tmp-layout.html b/pages/tmp-layout.html
new file mode 100644
index 000000000..09c20bfef
--- /dev/null
+++ b/pages/tmp-layout.html
@@ -0,0 +1,84 @@
+---
+tmp: true
+page-header: Layout test
+page-header-actions: breadcrumb
+---
+
+
+
+
+ {% for i in (1..6) %}
+
+ {% endfor %}
+ {% for i in (1..6) %}
+
+ {% endfor %}
+
+
+{% capture_global scripts %}
+
+{% endcapture_global %}
\ No newline at end of file
diff --git a/pages/tmp2.html b/pages/tmp2.html
index c4bb54525..78ef52de8 100644
--- a/pages/tmp2.html
+++ b/pages/tmp2.html
@@ -1,6 +1,6 @@
---
tmp: true
-page-title: Search results
+page-header: Search results
---
diff --git a/pages/typography.html b/pages/typography.html
index 99c0e4f43..757aeeed2 100644
--- a/pages/typography.html
+++ b/pages/typography.html
@@ -1,6 +1,6 @@
---
title: Typography
-page-title: Typography
+page-header: Typography
done: true
---
diff --git a/pages/users.html b/pages/users.html
index dcd957ff3..441ace54e 100644
--- a/pages/users.html
+++ b/pages/users.html
@@ -1,9 +1,9 @@
---
layout: default
title: Users list
-page-title: Users
-page-title-actions: users
-page-title-description: 1-18 of 413 people
+page-header: Users
+page-header-actions: users
+page-header-description: 1-18 of 413 people
done: true
menu: base.users
---
diff --git a/scss/_tabler-core.scss b/scss/_tabler-core.scss
index b4a86ddab..e5ee94311 100644
--- a/scss/_tabler-core.scss
+++ b/scss/_tabler-core.scss
@@ -8,6 +8,7 @@
@import "layout/navbar";
@import "layout/sidenav";
@import "layout/page";
+@import "layout/mainnav";
@import "ui/alerts";
@import "ui/avatars";
diff --git a/scss/_variables.scss b/scss/_variables.scss
index ab5ae6c95..db424cfd3 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -14,7 +14,7 @@ $icon-fonts: () !default;
$theme-color-interval: 10% !default;
$light: #f5f7fb !default;
-$dark: #303645 !default;
+$dark: #354052 !default;
$light-black: rgba($dark, .24) !default;
$light-mix: rgba(mix($light, $dark, 64%), .24) !default;
@@ -206,6 +206,17 @@ $embed-responsive-aspect-ratios: (
)
) !default;
+//sidenav
+$sidenav-width: 15.625rem !default;
+$sidenav-width-narrow: 4rem !default;
+$sidenav-bg: $white !default;
+$sidenav-border-color: $border-color !default;
+$sidenav-dark-bg: $dark !default;
+$sidenav-dark-color: $white !default;
+$sidenav-padding: 1.25rem !default;
+$sidenav-breakpoint-show: 'sm' !default;
+$sidenav-breakpoint-folded: 'lg' !default;
+
//alerts
$alert-link-font-weight: $font-weight-bold !default;
$alert-bg-level: -8 !default;
diff --git a/scss/layout/_core.scss b/scss/layout/_core.scss
index 95c450b21..1a9a16907 100644
--- a/scss/layout/_core.scss
+++ b/scss/layout/_core.scss
@@ -1,12 +1,10 @@
// stylelint-disable property-no-vendor-prefix
html {
- height: 100%;
font-size: 16px;
}
body {
- min-height: 100%;
- //overflow-y: scroll;
+ overflow-y: scroll;
letter-spacing: $body-letter-spacing;
touch-action: manipulation;
text-rendering: optimizeLegibility;
diff --git a/scss/layout/_layout.scss b/scss/layout/_layout.scss
index dca08d1d5..2134c415d 100644
--- a/scss/layout/_layout.scss
+++ b/scss/layout/_layout.scss
@@ -1,393 +1,385 @@
-//sidenav
-$sidenav-width: 16rem;
-$sidenav-width-narrow: 4rem;
-$sidenav-bg: $white;
-$sidenav-border-color: $border-color;
-$sidenav-dark-bg: $dark;
-$sidenav-padding: 1.25rem;
-$sidenav-breakpoint-show: 'sm';
-$sidenav-breakpoint-folded: 'lg';
-$sidenav-folded-item-height: 3.5rem;
-
-@mixin sidebar-narrow {
- width: $sidenav-width-narrow;
-
- .sidebar-brand {
- width: 100%;
- }
-
- .sidebar-brand-logo {
- &-sm {
- display: inline-block;
- }
-
- &-lg {
- display: none;
- }
- }
-
- .sidebar-content {
- padding: 0;
- overflow: visible;
- }
-
- .sidebar-nav {
- margin: 0;
-
- > .sidebar-nav-item {
- position: relative;
- white-space: nowrap;
-
- &:hover {
- background: $primary;
- width: $sidenav-width;
-
- > .sidebar-nav-link {
- color: #ffffff;
-
- > span {
- display: block;
- }
-
- .icon {
- margin-right: add(1rem, $sidenav-padding);
- }
- }
-
- .sidebar-subnav {
- display: block;
-
- .sidebar-nav-link {
- padding-left: $sidenav-padding;
- }
- }
- }
-
- > .sidebar-nav-link {
- min-height: $sidenav-folded-item-height;
- padding: 0 1rem !important;
- position: relative;
-
- .icon {
- margin: 0;
- width: 2rem;
- height: 1.125rem;
- }
-
- > span {
- display: none;
- }
-
- .badge {
- display: block;
- position: absolute;
- left: 2.5rem;
- top: 1rem;
-
- text-indent: -99999px;
- width: $badge-empty-size;
- height: $badge-empty-size;
- padding: 0;
- }
- }
- }
- }
-
- .sidebar-subnav {
- display: none;
- position: absolute;
- top: $sidenav-folded-item-height;
- left: $sidenav-width-narrow;
- right: 0;
- padding: .5rem 0;
- background: $dark;
- box-shadow: -6px 0px 16px -10px rgba(0, 0, 0, 0.2), $box-shadow;
- }
-
- .sidebar-nav-arrow {
- display: none !important;
- }
-
- .sidebar-nav-title {
- display: none;
- }
-
- + .content {
- margin-left: $sidenav-width-narrow;
-
- .navbar.fixed-top {
- left: $sidenav-width-narrow;
- }
- }
-
- &.sidebar-right {
- + .content {
- margin-left: 0;
- margin-right: $sidenav-width-narrow;
-
- .navbar.fixed-top {
- left: 0;
- right: $sidenav-width-narrow;
- }
- }
- }
-
- .hide-sidebar-narrow {
- display: none !important
- }
-}
-
-@mixin sidebar-visible {
- display: flex;
-
- + .content .navbar.fixed-top {
- left: $sidenav-width;
- }
-
- .hide-sidebar-visible,
- + .content .hide-sidebar-visible {
- display: none !important;
- }
-}
-
-/**
-Wrapper
- */
-.page {
- height: 100%;
- overflow: hidden;
- width: 100%;
-}
-
-/**
-Content
- */
-.content {
- overflow: hidden;
- min-height: 100vh;
- display: flex;
- flex-direction: column;
-
- .sidebar + & {
- margin-left: $sidenav-width;
-
- @if $sidenav-breakpoint-folded {
- @include media-breakpoint-down($sidenav-breakpoint-folded) {
- margin-left: $sidenav-width-narrow;
- }
- }
-
- @include media-breakpoint-down($sidenav-breakpoint-show) {
- margin-left: 0;
- padding-left: 0;
- padding-right: 0;
- }
- }
-}
-
-.content-page {
- flex: 1;
- display: flex;
-
- //@include media-breakpoint-up($cards-grid-breakpoint) {
- // padding-left: $cards-grid-gap / 2;
- // padding-right: $cards-grid-gap / 2;
- //}
-
- @media print {
- padding-top: 0 !important;
- }
-}
-
-/**
-Sidebar
- */
-.sidebar {
- width: $sidenav-width;
- position: fixed;
- z-index: $zindex-fixed;
- padding: 0;
- background: $sidenav-bg;
- box-shadow: inset -1px 0 $sidenav-border-color;
- top: 0;
- bottom: 0;
- display: none;
- flex-direction: column;
-
- @include media-breakpoint-up($sidenav-breakpoint-show) {
- @include sidebar-visible;
- }
-
- @if $sidenav-breakpoint-folded {
- @include media-breakpoint-between($sidenav-breakpoint-show, $sidenav-breakpoint-folded) {
- @include sidebar-narrow;
- }
- }
-}
-
-.sidebar-brand {
- display: block;
- text-align: center;
-
- line-height: $navbar-height;
- width: $sidenav-width;
- position: absolute;
- top: 0;
- left: 0;
-}
-
-.sidebar-brand-logo {
- height: 2rem;
-
- &-sm {
- display: none;
- }
-}
-
-.sidebar-content {
- padding: $sidenav-padding;
- flex: 1;
- display: flex;
- flex-direction: column;
- overflow-y: scroll;
- @include scrollbar;
-
- .sidebar-brand + & {
- margin-top: $navbar-height;
- }
-}
-
-/**
-Sidebar menu
- */
-.sidebar-nav {
- margin: (-$sidenav-padding) (-$sidenav-padding) $sidenav-padding;
- padding: 0;
- list-style: none;
- user-select: none;
- color: $text-muted;
-
- ul {
- margin: 0;
- padding: 0;
- list-style: none;
- }
-}
-
-.sidebar-nav-link {
- padding: .5rem $sidenav-padding;
- transition: .3s color, .3s background-color;
- color: inherit;
- display: flex;
- align-items: center;
-
- .sidebar-nav-item .sidebar-nav-item & {
- padding-left: add(1.5rem, $sidenav-padding);
- }
-
- .sidebar-nav-item .sidebar-nav-item .sidebar-nav-item & {
- padding-left: add(3rem, $sidenav-padding);
- }
-
- &:hover {
- background-color: rgba(#fff, .02);
- text-decoration: none;
- color: $body-color !important;
- cursor: pointer !important;
- }
-
- &.active {
- opacity: 1;
- color: $body-color !important;
- box-shadow: inset 3px 0 $primary;
- background-color: rgba(#fff, .01);
- }
-
- .icon {
- width: 1rem;
- margin-right: .5rem;
- }
-
- .badge {
- margin-left: auto;
- }
-}
-
-.sidebar-nav-arrow {
- display: block;
-
- margin-left: auto;
- @include caret(right);
-
- &:after {
- transition: .3s transform;
- }
-
- .sidebar-nav-link[aria-expanded="true"] &:after {
- transform: rotate(-45deg);
- }
-}
-
-.sidebar-subnav {
-}
-
-.sidebar-nav-title {
- @include subheader(false);
- color: inherit;
- opacity: .8;
- padding: $sidenav-padding $sidenav-padding .5rem;
-
- &:not(:first-child) {
- margin-top: .5rem;
- }
-}
-
-/**
-Sidebar dark
- */
-.sidebar-dark {
- background: $sidenav-dark-bg;
- color: $text-muted;
- box-shadow: none;
-
- .sidebar-brand {
- filter: brightness(0) invert(1);
- }
-
- .sidebar-nav-link {
- &:hover,
- &.active {
- color: $white !important;
- }
- }
-
- .sidebar-content {
- @include scrollbar(true);
- }
-}
-
-/**
-Right sidebar
- */
-.sidebar-right {
- left: auto;
- right: 0;
- box-shadow: inset 1px 0 $sidenav-border-color;
-
- + .content {
- margin-left: 0;
- margin-right: $sidenav-width;
-
- .navbar.fixed-top {
- left: 0;
- right: $sidenav-width;
- }
- }
-}
-
-/**
-Folded sidebar
- */
-.sidebar-narrow {
- @include sidebar-narrow;
-}
+////sidenav
+//
+//
+//@mixin sidebar-narrow {
+// width: $sidenav-width-narrow;
+//
+// .sidebar-brand {
+// width: 100%;
+// }
+//
+// .sidebar-brand-logo {
+// &-sm {
+// display: inline-block;
+// }
+//
+// &-lg {
+// display: none;
+// }
+// }
+//
+// .sidebar-content {
+// padding: 0;
+// overflow: visible;
+// }
+//
+// .sidebar-nav {
+// margin: 0;
+//
+// > .sidebar-nav-item {
+// position: relative;
+// white-space: nowrap;
+//
+// &:hover {
+// background: $primary;
+// width: $sidenav-width;
+//
+// > .sidebar-nav-link {
+// color: #ffffff;
+//
+// > span {
+// display: block;
+// }
+//
+// .icon {
+// margin-right: add(1rem, $sidenav-padding);
+// }
+// }
+//
+// .sidebar-subnav {
+// display: block;
+//
+// .sidebar-nav-link {
+// padding-left: $sidenav-padding;
+// }
+// }
+// }
+//
+// > .sidebar-nav-link {
+// min-height: $sidenav-folded-item-height;
+// padding: 0 1rem !important;
+// position: relative;
+//
+// .icon {
+// margin: 0;
+// width: 2rem;
+// height: 1.125rem;
+// }
+//
+// > span {
+// display: none;
+// }
+//
+// .badge {
+// display: block;
+// position: absolute;
+// left: 2.5rem;
+// top: 1rem;
+//
+// text-indent: -99999px;
+// width: $badge-empty-size;
+// height: $badge-empty-size;
+// padding: 0;
+// }
+// }
+// }
+// }
+//
+// .sidebar-subnav {
+// display: none;
+// position: absolute;
+// top: $sidenav-folded-item-height;
+// left: $sidenav-width-narrow;
+// right: 0;
+// padding: .5rem 0;
+// background: $dark;
+// box-shadow: -6px 0px 16px -10px rgba(0, 0, 0, 0.2), $box-shadow;
+// }
+//
+// .sidebar-nav-arrow {
+// display: none !important;
+// }
+//
+// .sidebar-nav-title {
+// display: none;
+// }
+//
+// + .content {
+// margin-left: $sidenav-width-narrow;
+//
+// .navbar.fixed-top {
+// left: $sidenav-width-narrow;
+// }
+// }
+//
+// &.sidebar-right {
+// + .content {
+// margin-left: 0;
+// margin-right: $sidenav-width-narrow;
+//
+// .navbar.fixed-top {
+// left: 0;
+// right: $sidenav-width-narrow;
+// }
+// }
+// }
+//
+// .hide-sidebar-narrow {
+// display: none !important
+// }
+//}
+//
+//@mixin sidebar-visible {
+// display: flex;
+//
+// + .content .navbar.fixed-top {
+// left: $sidenav-width;
+// }
+//
+// .hide-sidebar-visible,
+// + .content .hide-sidebar-visible {
+// display: none !important;
+// }
+//}
+//
+///**
+//Wrapper
+// */
+//.page {
+// height: 100%;
+// overflow: hidden;
+// width: 100%;
+//}
+//
+///**
+//Content
+// */
+//.content {
+// overflow: hidden;
+// min-height: 100vh;
+// display: flex;
+// flex-direction: column;
+//
+// .sidebar + & {
+// margin-left: $sidenav-width;
+//
+// @if $sidenav-breakpoint-folded {
+// @include media-breakpoint-down($sidenav-breakpoint-folded) {
+// margin-left: $sidenav-width-narrow;
+// }
+// }
+//
+// @include media-breakpoint-down($sidenav-breakpoint-show) {
+// margin-left: 0;
+// padding-left: 0;
+// padding-right: 0;
+// }
+// }
+//}
+//
+//.content-page {
+// flex: 1;
+// display: flex;
+//
+// //@include media-breakpoint-up($cards-grid-breakpoint) {
+// // padding-left: $cards-grid-gap / 2;
+// // padding-right: $cards-grid-gap / 2;
+// //}
+//
+// @media print {
+// padding-top: 0 !important;
+// }
+//}
+//
+///**
+//Sidebar
+// */
+//.sidebar {
+// width: $sidenav-width;
+// position: fixed;
+// z-index: $zindex-fixed;
+// padding: 0;
+// background: $sidenav-bg;
+// box-shadow: inset -1px 0 $sidenav-border-color;
+// top: 0;
+// bottom: 0;
+// display: none;
+// flex-direction: column;
+//
+// @include media-breakpoint-up($sidenav-breakpoint-show) {
+// @include sidebar-visible;
+// }
+//
+// @if $sidenav-breakpoint-folded {
+// @include media-breakpoint-between($sidenav-breakpoint-show, $sidenav-breakpoint-folded) {
+// @include sidebar-narrow;
+// }
+// }
+//}
+//
+//.sidebar-brand {
+// display: block;
+// text-align: center;
+//
+// line-height: $navbar-height;
+// width: $sidenav-width;
+// position: absolute;
+// top: 0;
+// left: 0;
+//}
+//
+//.sidebar-brand-logo {
+// height: 2rem;
+//
+// &-sm {
+// display: none;
+// }
+//}
+//
+//.sidebar-content {
+// padding: $sidenav-padding;
+// flex: 1;
+// display: flex;
+// flex-direction: column;
+// overflow-y: scroll;
+// @include scrollbar;
+//
+// .sidebar-brand + & {
+// margin-top: $navbar-height;
+// }
+//}
+//
+///**
+//Sidebar menu
+// */
+//.sidebar-nav {
+// margin: (-$sidenav-padding) (-$sidenav-padding) $sidenav-padding;
+// padding: 0;
+// list-style: none;
+// user-select: none;
+// color: $text-muted;
+//
+// ul {
+// margin: 0;
+// padding: 0;
+// list-style: none;
+// }
+//}
+//
+//.sidebar-nav-link {
+// padding: .5rem $sidenav-padding;
+// transition: .3s color, .3s background-color;
+// color: inherit;
+// display: flex;
+// align-items: center;
+//
+// .sidebar-nav-item .sidebar-nav-item & {
+// padding-left: add(1.5rem, $sidenav-padding);
+// }
+//
+// .sidebar-nav-item .sidebar-nav-item .sidebar-nav-item & {
+// padding-left: add(3rem, $sidenav-padding);
+// }
+//
+// &:hover {
+// background-color: rgba(#fff, .02);
+// text-decoration: none;
+// color: $body-color !important;
+// cursor: pointer !important;
+// }
+//
+// &.active {
+// opacity: 1;
+// color: $body-color !important;
+// box-shadow: inset 3px 0 $primary;
+// background-color: rgba(#fff, .01);
+// }
+//
+// .icon {
+// width: 1rem;
+// margin-right: .5rem;
+// }
+//
+// .badge {
+// margin-left: auto;
+// }
+//}
+//
+//.sidebar-nav-arrow {
+// display: block;
+//
+// margin-left: auto;
+// @include caret(right);
+//
+// &:after {
+// transition: .3s transform;
+// }
+//
+// .sidebar-nav-link[aria-expanded="true"] &:after {
+// transform: rotate(-45deg);
+// }
+//}
+//
+//.sidebar-subnav {
+//}
+//
+//.sidebar-nav-title {
+// @include subheader(false);
+// color: inherit;
+// opacity: .8;
+// padding: $sidenav-padding $sidenav-padding .5rem;
+//
+// &:not(:first-child) {
+// margin-top: .5rem;
+// }
+//}
+//
+///**
+//Sidebar dark
+// */
+//.sidebar-dark {
+// background: $sidenav-dark-bg;
+// color: $text-muted;
+// box-shadow: none;
+//
+// .sidebar-brand {
+// filter: brightness(0) invert(1);
+// }
+//
+// .sidebar-nav-link {
+// &:hover,
+// &.active {
+// color: $white !important;
+// }
+// }
+//
+// .sidebar-content {
+// @include scrollbar(true);
+// }
+//}
+//
+///**
+//Right sidebar
+// */
+//.sidebar-right {
+// left: auto;
+// right: 0;
+// box-shadow: inset 1px 0 $sidenav-border-color;
+//
+// + .content {
+// margin-left: 0;
+// margin-right: $sidenav-width;
+//
+// .navbar.fixed-top {
+// left: 0;
+// right: $sidenav-width;
+// }
+// }
+//}
+//
+///**
+//Folded sidebar
+// */
+//.sidebar-narrow {
+// @include sidebar-narrow;
+//}
diff --git a/scss/layout/_mainnav.scss b/scss/layout/_mainnav.scss
new file mode 100644
index 000000000..e23d42ac4
--- /dev/null
+++ b/scss/layout/_mainnav.scss
@@ -0,0 +1,89 @@
+@mixin navbar-vertical {
+ position: fixed;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ width: $sidenav-width;
+ z-index: $zindex-fixed;
+ min-height: auto;
+ align-items: start;
+
+ >.container {
+ flex-direction: column;
+ }
+
+ ~ .navbar,
+ ~ .content {
+ margin-left: $sidenav-width;
+ }
+
+ &.navbar-vertical-narrow {
+ width: $sidenav-width-narrow;
+
+ ~ .navbar,
+ ~ .content {
+ margin-left: $sidenav-width-narrow;
+ }
+ }
+
+ &.navbar-right {
+ left: auto;
+ right: 0;
+
+ ~ .navbar,
+ ~ .content {
+ margin-left: 0;
+ margin-right: $sidenav-width;
+ }
+
+ &.navbar-vertical-narrow {
+ ~ .navbar,
+ ~ .content {
+ margin-right: $sidenav-width-narrow;
+ }
+ }
+ }
+}
+
+.page {
+ display: flex;
+ flex-direction: column;
+}
+
+.content {
+ padding-top: map-get($spacers, 4);
+ padding-bottom: map-get($spacers, 4);
+
+ @include media-breakpoint-up(xl) {
+ padding-left: .5rem;
+ padding-right: .5rem;
+ }
+}
+
+.navbar {
+ min-height: $navbar-height;
+}
+
+.navbar-light {
+ background: $white;
+ box-shadow: 0 0 0 1px $border-color;
+}
+
+.navbar-dark {
+ background: $sidenav-dark-bg;
+ color: $sidenav-dark-color;
+}
+
+.navbar-vertical {
+ @each $breakpoint, $breakpoint-max-width in $grid-breakpoints {
+ @include media-breakpoint-up($breakpoint) {
+ &.navbar-expand-#{$breakpoint} {
+ @include navbar-vertical;
+ }
+ }
+ }
+}
+
+.navbar-secondary {
+ order: -1;
+}
\ No newline at end of file
diff --git a/scss/layout/_navbar.scss b/scss/layout/_navbar.scss
index 3ad08be8f..a949058d1 100644
--- a/scss/layout/_navbar.scss
+++ b/scss/layout/_navbar.scss
@@ -1,180 +1,180 @@
-/*
-Navbar
- */
-.navbar {
-
- &, .navbar-dark {
- min-height: $navbar-height;
-
- &.fixed-top {
- + .content-page {
- padding-top: $navbar-height;
- }
-
- + .navbar:not(.fixed-top) {
- margin-top: $navbar-height;
- }
-
- + .navbar.fixed-top {
- top: $navbar-height;
-
- + .content-page {
- padding-top: $navbar-height * 2;
- }
- }
- }
- }
-
- @include media-breakpoint-up($cards-grid-breakpoint) {
- padding-left: $cards-grid-gap / 2;
- padding-right: $cards-grid-gap / 2;
- }
-}
-
-.navbar-collapse-absolute {
- @each $breakpoint, $width in $grid-breakpoints {
- @at-root .navbar-expand-#{$breakpoint} & {
- position: absolute;
- background: inherit;
- z-index: $zindex-sticky;
- left: 0;
- right: 0;
-
- @include media-breakpoint-up($breakpoint) {
- position: static;
- }
- }
- }
-}
-
-/**
-navbar toggler
- */
-.navbar-toggler {
- border: 0;
- font-size: $navbar-toggler-font-size;
- width: add($navbar-toggler-size, $navbar-toggler-padding-x * 2);
- height: add($navbar-toggler-size, $navbar-toggler-padding-y * 2);
- margin: $navbar-toggler-margin;
- position: relative;
-}
-
-
-.navbar-toggler-icon {
- $time: $navbar-toggler-transform-time / 2;
-
- background-image: none !important;
- position: absolute;
- width: $navbar-toggler-size;
- height: $navbar-toggler-item-height;
- border-radius: 3px;
-
- left: 50%;
- top: 50%;
- margin-left: -($navbar-toggler-size / 2);
- margin-top: -($navbar-toggler-item-height / 2);
-
- background: currentColor;
- transform-origin: center;
- transition: transform $time, top $time $time, bottom $time $time;
-
- &:before,
- &:after {
- content: '';
- background: inherit;
- position: absolute;
- height: inherit;
- width: inherit;
- left: 0;
- border-radius: inherit;
- transition: inherit;
- }
-
- &:before {
- top: $navbar-toggler-item-spacing;
- }
-
- &:after {
- bottom: $navbar-toggler-item-spacing;
- }
-
- .navbar-toggler[aria-expanded="true"] & {
- transform: rotate(45deg);
- transition: top $time, bottom $time, transform $time $time, opacity $time;
-
- &:before {
- top: 0;
- transform: rotate(-90deg);
- }
-
- &:after {
- bottom: 0;
- opacity: 0;
- }
- }
-}
-
-/**
-navbar with border
-*/
-.navbar-border {
- box-shadow: inset 0 -1px 0 0px $navbar-border-color;
-}
-
-/**
-Navbar logo
- */
-.navbar-brand-logo {
- height: 2rem;
-}
-
-.navbar-nav {
- margin-right: -($navbar-nav-link-padding-x);
- margin-left: -($navbar-nav-link-padding-x);
-
- .nav-link {
- padding-left: $navbar-nav-link-padding-x;
- padding-right: $navbar-nav-link-padding-x;
- }
-
- @each $breakpoint, $width in $grid-breakpoints {
- @at-root .navbar-expand-#{$breakpoint} & {
- @include media-breakpoint-up($breakpoint) {
- .nav-item:hover,
- .dropright:hover {
- > .dropdown-menu {
- display: block;
- }
- }
- }
-
- @include media-breakpoint-down($breakpoint) {
- .dropdown-menu {
- box-shadow: none;
- border: 0;
- padding: 0;
- }
-
- .dropdown-item {
- padding-left: add($navbar-nav-link-padding-x, 19px);
- padding-right: 0;
- }
- }
- }
- }
-
- .dropdown-menu {
- .dropdown,
- .dropright {
- .dropdown-toggle:after {
- margin-left: auto;
- }
- }
- }
-}
-
-.navbar-brand {
- padding: 0;
- line-height: 1;
-}
-
+///*
+//Navbar
+// */
+//.navbar {
+//
+// &, .navbar-dark {
+// min-height: $navbar-height;
+//
+// &.fixed-top {
+// + .content-page {
+// padding-top: $navbar-height;
+// }
+//
+// + .navbar:not(.fixed-top) {
+// margin-top: $navbar-height;
+// }
+//
+// + .navbar.fixed-top {
+// top: $navbar-height;
+//
+// + .content-page {
+// padding-top: $navbar-height * 2;
+// }
+// }
+// }
+// }
+//
+// @include media-breakpoint-up($cards-grid-breakpoint) {
+// padding-left: $cards-grid-gap / 2;
+// padding-right: $cards-grid-gap / 2;
+// }
+//}
+//
+//.navbar-collapse-absolute {
+// @each $breakpoint, $width in $grid-breakpoints {
+// @at-root .navbar-expand-#{$breakpoint} & {
+// position: absolute;
+// background: inherit;
+// z-index: $zindex-sticky;
+// left: 0;
+// right: 0;
+//
+// @include media-breakpoint-up($breakpoint) {
+// position: static;
+// }
+// }
+// }
+//}
+//
+///**
+//navbar toggler
+// */
+//.navbar-toggler {
+// border: 0;
+// font-size: $navbar-toggler-font-size;
+// width: add($navbar-toggler-size, $navbar-toggler-padding-x * 2);
+// height: add($navbar-toggler-size, $navbar-toggler-padding-y * 2);
+// margin: $navbar-toggler-margin;
+// position: relative;
+//}
+//
+//
+//.navbar-toggler-icon {
+// $time: $navbar-toggler-transform-time / 2;
+//
+// background-image: none !important;
+// position: absolute;
+// width: $navbar-toggler-size;
+// height: $navbar-toggler-item-height;
+// border-radius: 3px;
+//
+// left: 50%;
+// top: 50%;
+// margin-left: -($navbar-toggler-size / 2);
+// margin-top: -($navbar-toggler-item-height / 2);
+//
+// background: currentColor;
+// transform-origin: center;
+// transition: transform $time, top $time $time, bottom $time $time;
+//
+// &:before,
+// &:after {
+// content: '';
+// background: inherit;
+// position: absolute;
+// height: inherit;
+// width: inherit;
+// left: 0;
+// border-radius: inherit;
+// transition: inherit;
+// }
+//
+// &:before {
+// top: $navbar-toggler-item-spacing;
+// }
+//
+// &:after {
+// bottom: $navbar-toggler-item-spacing;
+// }
+//
+// .navbar-toggler[aria-expanded="true"] & {
+// transform: rotate(45deg);
+// transition: top $time, bottom $time, transform $time $time, opacity $time;
+//
+// &:before {
+// top: 0;
+// transform: rotate(-90deg);
+// }
+//
+// &:after {
+// bottom: 0;
+// opacity: 0;
+// }
+// }
+//}
+//
+///**
+//navbar with border
+//*/
+//.navbar-border {
+// box-shadow: inset 0 -1px 0 0px $navbar-border-color;
+//}
+//
+///**
+//Navbar logo
+// */
+//.navbar-brand-logo {
+// height: 2rem;
+//}
+//
+//.navbar-nav {
+// margin-right: -($navbar-nav-link-padding-x);
+// margin-left: -($navbar-nav-link-padding-x);
+//
+// .nav-link {
+// padding-left: $navbar-nav-link-padding-x;
+// padding-right: $navbar-nav-link-padding-x;
+// }
+//
+// @each $breakpoint, $width in $grid-breakpoints {
+// @at-root .navbar-expand-#{$breakpoint} & {
+// @include media-breakpoint-up($breakpoint) {
+// .nav-item:hover,
+// .dropright:hover {
+// > .dropdown-menu {
+// display: block;
+// }
+// }
+// }
+//
+// @include media-breakpoint-down($breakpoint) {
+// .dropdown-menu {
+// box-shadow: none;
+// border: 0;
+// padding: 0;
+// }
+//
+// .dropdown-item {
+// padding-left: add($navbar-nav-link-padding-x, 19px);
+// padding-right: 0;
+// }
+// }
+// }
+// }
+//
+// .dropdown-menu {
+// .dropdown,
+// .dropright {
+// .dropdown-toggle:after {
+// margin-left: auto;
+// }
+// }
+// }
+//}
+//
+//.navbar-brand {
+// padding: 0;
+// line-height: 1;
+//}
+//
diff --git a/scss/layout/_page.scss b/scss/layout/_page.scss
index 6ab18867f..d1f2fa57b 100644
--- a/scss/layout/_page.scss
+++ b/scss/layout/_page.scss
@@ -1,4 +1,4 @@
-.page-title-box {
+.page-header {
display: flex;
align-items: center;
min-height: 2.25rem;
diff --git a/scss/ui/_buttons.scss b/scss/ui/_buttons.scss
index 9c8a362cc..1a3daa508 100644
--- a/scss/ui/_buttons.scss
+++ b/scss/ui/_buttons.scss
@@ -92,7 +92,7 @@
.btn-list {
display: flex;
flex-wrap: wrap;
- margin-bottom: -.5rem;
+ margin-bottom: -.5rem !important;
margin-right: -.5rem;
> .btn,
diff --git a/scss/ui/_cards.scss b/scss/ui/_cards.scss
index 382ca46eb..65687d686 100644
--- a/scss/ui/_cards.scss
+++ b/scss/ui/_cards.scss
@@ -185,6 +185,10 @@
}
.card-body {
+ >:last-child:not {
+ margin-bottom: 0;
+ }
+
.card-sm & {
padding: map-get($spacers, 3);
}