Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-22 01:44:25 +04:00
Code Issues Projects Releases Wiki Activity

navbar fixes

Browse Source
This commit is contained in:
codecalm
2019-06-29 15:41:53 +02:00
parent 7c1bdc8671
commit 8630c864e2
2 changed files with 18 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
scss/_variables.scss
View File

@@ -236,12 +236,14 @@ $pagination-disabled-color: rgba($text-muted-light, .5) !default;
//sidenav //sidenav
$sidenav-width: 16rem !default; $sidenav-width: 16rem !default;
$sidenav-folded-width: 4.5rem !default; $sidenav-folded-width: 4rem !default;
$sidenav-bg: $white !default; $sidenav-bg: $white !default;
$sidenav-border-color: $border-color !default; $sidenav-border-color: $border-color !default;
$sidenav-dark-bg: $dark !default; $sidenav-dark-bg: $dark !default;
$sidenav-link-padding-x: .75rem !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-nav-link-padding-x: .75rem !default;
//steps //steps

33
scss/layout/_navbar.scss
View File

@@ -4,22 +4,18 @@
border-bottom: 1px solid $border-color; border-bottom: 1px solid $border-color;
display: flex; display: flex;
min-height: 3.5rem; min-height: 3.5rem;
padding: .75rem .75rem;
width: 100%; width: 100%;
.nav-link { .nav-link {
color: inherit; color: inherit;
white-space: nowrap; white-space: nowrap;
.icon {
font-size: 0.875rem;
vertical-align: top;
}
} }
} }
.navbar-nav { .navbar-nav {
flex-direction: row; flex-direction: row;
margin-left: -($navbar-padding-x);
margin-right: -($navbar-padding-x);
.nav-link { .nav-link {
display: flex; display: flex;
@@ -59,6 +55,9 @@
} }
} }
/**
Navbar brand
*/
.navbar-brand { .navbar-brand {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -134,7 +133,8 @@ Sidebar
display: flex; display: flex;
align-items: center; align-items: center;
color: $text-muted; color: $text-muted;
padding: 0; height: 2.5rem;
padding: 0 $navbar-padding-x;
transition: .3s background, .3s box-shadow; transition: .3s background, .3s box-shadow;
&.active, &.active,
@@ -185,7 +185,7 @@ Sidebar
.navbar-brand { .navbar-brand {
text-align: center; text-align: center;
height: 3rem; height: 2.5rem;
} }
.navbar-heading { .navbar-heading {
@@ -224,7 +224,7 @@ Dark navbar
} }
.nav-link { .nav-link {
color: $text-muted-light; color: inherit;
&.active, &.active,
&:hover { &:hover {
@@ -239,7 +239,7 @@ Dark navbar
min-width: $sidenav-folded-width; min-width: $sidenav-folded-width;
.navbar-brand { .navbar-brand {
width: 3rem; width: 2.5rem;
} }
.navbar-heading { .navbar-heading {
@@ -253,6 +253,7 @@ Dark navbar
.nav-link { .nav-link {
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
justify-content: center;
&[data-toggle="collapse"]:after { &[data-toggle="collapse"]:after {
content: none; content: none;
@@ -260,9 +261,7 @@ Dark navbar
} }
.nav-icon { .nav-icon {
width: 3rem; width: 1.5rem;
height: 3rem;
outline: 1px solid red;
font-size: px2rem(15px); font-size: px2rem(15px);
opacity: 1; opacity: 1;
} }
@@ -270,14 +269,12 @@ Dark navbar
.nav-icon { .nav-icon {
display: flex; display: flex;
justify-content: center; width: 1.5rem;
align-items: center;
font-size: 1rem;
width: 2rem;
height: 2rem;
border-radius: 100%; border-radius: 100%;
flex-shrink: 0; flex-shrink: 0;
opacity: .8; opacity: .8;
font-size: px2rem(15px);
align-items: center;
.icon { .icon {
font-size: inherit; font-size: inherit;