mirror of
https://github.com/tabler/tabler.git
synced 2025-12-26 11:16:12 +04:00
navbar layout refactor
This commit is contained in:
codecalm
@@ -117,7 +117,7 @@ $avatar-sizes: (
|
||||
//Fonts
|
||||
$font-size-base: 1rem !default;
|
||||
$font-weight-base: 400 !default;
|
||||
$line-height-base: 1.6 !default;
|
||||
$line-height-base: 1.5 !default;
|
||||
$body-letter-spacing: null !default;
|
||||
|
||||
$border-radius: 3px !default;
|
||||
@@ -266,11 +266,19 @@ $loader-size: 2.5rem !default;
|
||||
|
||||
//navbar
|
||||
$navbar-bg: $white !default;
|
||||
$navbar-height: 3.5rem !default;
|
||||
$navbar-border-color: $border-color !default;
|
||||
$navbar-border-color: $border-color !default;
|
||||
|
||||
//nav
|
||||
$nav-link-padding-y: .25rem !default;
|
||||
$nav-link-padding-y: 1rem !default;
|
||||
|
||||
$navbar-padding-x: .75rem !default;
|
||||
$navbar-padding-y: .75rem !default;
|
||||
$navbar-nav-link-padding-x: .75rem !default;
|
||||
$navbar-light-color: $text-muted !default;
|
||||
$navbar-light-active-color: $primary !default;
|
||||
$navbar-light-hover-color: $body-color !default;
|
||||
|
||||
//pagination
|
||||
$pagination-border-width: 0 !default;
|
||||
@@ -289,13 +297,6 @@ $sidenav-border-color: $border-color-alpha !default;
|
||||
$sidenav-dark-bg: $dark !default;
|
||||
$sidenav-link-padding-x: .75rem !default;
|
||||
|
||||
$navbar-padding-x: .75rem !default;
|
||||
$navbar-padding-y: .75rem !default;
|
||||
$navbar-nav-link-padding-x: .75rem !default;
|
||||
$navbar-light-color: $text-muted !default;
|
||||
$navbar-light-active-color: $primary !default;
|
||||
$navbar-light-hover-color: $body-color !default;
|
||||
|
||||
//steps
|
||||
$steps-border-width: 2px !default;
|
||||
$steps-color-inactive: #f3f5f5 !default;
|
||||
|
||||
@@ -1,182 +1,196 @@
|
||||
/**
|
||||
Layout
|
||||
*/
|
||||
@mixin menu-side {
|
||||
align-items: flex-start;
|
||||
}
|
||||
.topnav {
|
||||
border-bottom: 1px solid;
|
||||
background-color: $navbar-bg;
|
||||
border-color: $navbar-border-color;
|
||||
|
||||
@mixin menu-collapsed {
|
||||
.layout-area-menu {
|
||||
position: fixed;
|
||||
left: -($sidenav-width);
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background: $dark;
|
||||
color: $white;
|
||||
width: $sidenav-width;
|
||||
z-index: $zindex-fixed;
|
||||
transition: .3s left;
|
||||
|
||||
@include menu-side;
|
||||
}
|
||||
|
||||
.layout-area-menu-backdrop {
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100vw;
|
||||
background: rgba($dark, .1);
|
||||
z-index: $zindex-fixed - 1;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.layout-toggler {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@at-root body.aside-visible & {
|
||||
.layout-area-menu {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.layout-area-menu-backdrop {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
.navbar {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
min-height: $navbar-height;
|
||||
}
|
||||
}
|
||||
|
||||
.layout {
|
||||
position: relative;
|
||||
display: grid;
|
||||
|
||||
grid-template: "head" auto "menu" auto "main" auto /
|
||||
100%;
|
||||
}
|
||||
|
||||
.layout-collapsed {
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
$infix: breakpoint-infix($breakpoint);
|
||||
|
||||
@if $infix != '' {
|
||||
@include media-breakpoint-down($breakpoint) {
|
||||
|
||||
&#{$infix} {
|
||||
@include menu-collapsed;
|
||||
}
|
||||
}
|
||||
} @else {
|
||||
@include menu-collapsed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.layout-sidebar {
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
$infix: breakpoint-infix($breakpoint);
|
||||
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
.layout-toggler {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&#{$infix} {
|
||||
grid-template: "menu head" auto "menu main" auto /
|
||||
auto 1fr;
|
||||
|
||||
.layout-area-menu {
|
||||
width: $sidenav-width;
|
||||
}
|
||||
}
|
||||
|
||||
&-folded#{$infix} {
|
||||
grid-template: "menu head" auto "menu main" auto /
|
||||
auto 1fr;
|
||||
|
||||
.layout-area-menu {
|
||||
width: $sidenav-folded-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.layout-toggler {
|
||||
display: none;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
opacity: .8;
|
||||
|
||||
&-icon {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
display: block;
|
||||
margin-top: -2px;
|
||||
margin-left: -.75rem;
|
||||
|
||||
transition-timing-function: cubic-bezier(.55, .055, .675, .19);
|
||||
transition-duration: 75ms;
|
||||
|
||||
&,
|
||||
&:after,
|
||||
&:before {
|
||||
content: '';
|
||||
width: 1.5rem;
|
||||
height: 2px;
|
||||
background: currentColor;
|
||||
position: absolute;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
top: -.5rem;
|
||||
transition: top 75ms ease .12s, opacity 75ms ease;
|
||||
}
|
||||
|
||||
&:after {
|
||||
bottom: -.5rem;
|
||||
transition: bottom 75ms ease .12s, transform 75ms cubic-bezier(.55, .055, .675, .19);
|
||||
}
|
||||
|
||||
@at-root body.aside-visible & {
|
||||
transform: rotate(45deg);
|
||||
transition-delay: .12s;
|
||||
transition-timing-function: cubic-bezier(.215, .61, .355, 1);
|
||||
|
||||
&:before {
|
||||
top: 0;
|
||||
transition: top 75ms ease, opacity 75ms ease .12s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
bottom: 0;
|
||||
transition: bottom 75ms ease, transform 75ms cubic-bezier(.215, .61, .355, 1) .12s;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.layout-area-topnav {
|
||||
grid-area: head;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.layout-area-menu {
|
||||
grid-area: menu;
|
||||
}
|
||||
|
||||
.layout-area-menu-backdrop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.layout-area-main {
|
||||
grid-area: main;
|
||||
}
|
||||
///**
|
||||
//Layout
|
||||
// */
|
||||
//@mixin menu-side {
|
||||
// align-items: flex-start;
|
||||
//}
|
||||
//
|
||||
//@mixin menu-collapsed {
|
||||
// .layout-area-menu {
|
||||
// position: fixed;
|
||||
// left: -($sidenav-width);
|
||||
// top: 0;
|
||||
// bottom: 0;
|
||||
// background: $dark;
|
||||
// color: $white;
|
||||
// width: $sidenav-width;
|
||||
// z-index: $zindex-fixed;
|
||||
// transition: .3s left;
|
||||
//
|
||||
// @include menu-side;
|
||||
// }
|
||||
//
|
||||
// .layout-area-menu-backdrop {
|
||||
// display: block;
|
||||
// position: fixed;
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
// bottom: 0;
|
||||
// width: 100vw;
|
||||
// background: rgba($dark, .1);
|
||||
// z-index: $zindex-fixed - 1;
|
||||
// visibility: hidden;
|
||||
// opacity: 0;
|
||||
// }
|
||||
//
|
||||
// .layout-toggler {
|
||||
// display: block;
|
||||
// }
|
||||
//
|
||||
// @at-root body.aside-visible & {
|
||||
// .layout-area-menu {
|
||||
// left: 0;
|
||||
// }
|
||||
//
|
||||
// .layout-area-menu-backdrop {
|
||||
// opacity: 1;
|
||||
// visibility: visible;
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//.layout {
|
||||
// position: relative;
|
||||
// display: grid;
|
||||
//
|
||||
// grid-template: "head" auto "menu" auto "main" auto /
|
||||
// 100%;
|
||||
//}
|
||||
//
|
||||
//.layout-collapsed {
|
||||
// @each $breakpoint in map-keys($grid-breakpoints) {
|
||||
// $infix: breakpoint-infix($breakpoint);
|
||||
//
|
||||
// @if $infix != '' {
|
||||
// @include media-breakpoint-down($breakpoint) {
|
||||
//
|
||||
// &#{$infix} {
|
||||
// @include menu-collapsed;
|
||||
// }
|
||||
// }
|
||||
// } @else {
|
||||
// @include menu-collapsed;
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//.layout-sidebar {
|
||||
// @each $breakpoint in map-keys($grid-breakpoints) {
|
||||
// $infix: breakpoint-infix($breakpoint);
|
||||
//
|
||||
// @include media-breakpoint-up($breakpoint) {
|
||||
// .layout-toggler {
|
||||
// display: none;
|
||||
// }
|
||||
//
|
||||
// &#{$infix} {
|
||||
// grid-template: "menu head" auto "menu main" auto /
|
||||
// auto 1fr;
|
||||
//
|
||||
// .layout-area-menu {
|
||||
// width: $sidenav-width;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// &-folded#{$infix} {
|
||||
// grid-template: "menu head" auto "menu main" auto /
|
||||
// auto 1fr;
|
||||
//
|
||||
// .layout-area-menu {
|
||||
// width: $sidenav-folded-width;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//.layout-toggler {
|
||||
// display: none;
|
||||
// width: 2rem;
|
||||
// height: 2rem;
|
||||
// cursor: pointer;
|
||||
// position: relative;
|
||||
// opacity: .8;
|
||||
//
|
||||
// &-icon {
|
||||
// top: 50%;
|
||||
// left: 50%;
|
||||
// display: block;
|
||||
// margin-top: -2px;
|
||||
// margin-left: -.75rem;
|
||||
//
|
||||
// transition-timing-function: cubic-bezier(.55, .055, .675, .19);
|
||||
// transition-duration: 75ms;
|
||||
//
|
||||
// &,
|
||||
// &:after,
|
||||
// &:before {
|
||||
// content: '';
|
||||
// width: 1.5rem;
|
||||
// height: 2px;
|
||||
// background: currentColor;
|
||||
// position: absolute;
|
||||
// border-radius: 4px;
|
||||
// }
|
||||
//
|
||||
// &:before {
|
||||
// top: -.5rem;
|
||||
// transition: top 75ms ease .12s, opacity 75ms ease;
|
||||
// }
|
||||
//
|
||||
// &:after {
|
||||
// bottom: -.5rem;
|
||||
// transition: bottom 75ms ease .12s, transform 75ms cubic-bezier(.55, .055, .675, .19);
|
||||
// }
|
||||
//
|
||||
// @at-root body.aside-visible & {
|
||||
// transform: rotate(45deg);
|
||||
// transition-delay: .12s;
|
||||
// transition-timing-function: cubic-bezier(.215, .61, .355, 1);
|
||||
//
|
||||
// &:before {
|
||||
// top: 0;
|
||||
// transition: top 75ms ease, opacity 75ms ease .12s;
|
||||
// opacity: 0;
|
||||
// }
|
||||
//
|
||||
// &:after {
|
||||
// bottom: 0;
|
||||
// transition: bottom 75ms ease, transform 75ms cubic-bezier(.215, .61, .355, 1) .12s;
|
||||
// transform: rotate(-90deg);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//.layout-area-topnav {
|
||||
// grid-area: head;
|
||||
// padding-left: 0;
|
||||
// padding-right: 0;
|
||||
//}
|
||||
//
|
||||
//.layout-area-menu {
|
||||
// grid-area: menu;
|
||||
//}
|
||||
//
|
||||
//.layout-area-menu-backdrop {
|
||||
// display: none;
|
||||
//}
|
||||
//
|
||||
//.layout-area-main {
|
||||
// grid-area: main;
|
||||
//}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
.navbar {
|
||||
border-bottom: 1px solid;
|
||||
background-color: $navbar-bg;
|
||||
border-color: $navbar-border-color;
|
||||
//padding-top: 0;
|
||||
//padding-bottom: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -21,19 +20,33 @@ Navbar logo
|
||||
padding-right: $navbar-nav-link-padding-x;
|
||||
}
|
||||
|
||||
.nav-item.active .nav-link {
|
||||
position: relative;
|
||||
.nav-item {
|
||||
&.active .nav-link {
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
|
||||
bottom: subtract(-$navbar-padding-y, 1px);
|
||||
right: $navbar-nav-link-padding-x;
|
||||
left: $navbar-nav-link-padding-x;
|
||||
border-bottom: 1px solid $primary;
|
||||
bottom: -1px;
|
||||
right: $navbar-nav-link-padding-x;
|
||||
left: $navbar-nav-link-padding-x;
|
||||
border-bottom: 1px solid $primary;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user