Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-07-30 23:14:39 +04:00
Code Issues Projects Releases Wiki Activity

top navbar fixes

Browse Source
This commit is contained in:
chomik
2019-06-01 20:30:25 +02:00
parent e9876622ca
commit 385390124d
5 changed files with 39 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/_includes/layout/topnav.html
+2 -2
View File
@@ -1,5 +1,5 @@
<header class="navbar {% if include.dark %} bg-dark text-white{% endif %}">
{% include parts/navbar.html logo=true search=true user-menu=1 person=5 dark=false white-logo=include.dark %}
<header class="navbar navbar-expand-md">
{% include parts/navbar.html logo=true search=true user-menu=1 person=5 white-logo=include.dark %}
</header>
{% comment %}
pages/_includes/parts/navbar.html
+20 -60
View File
@@ -3,16 +3,16 @@
{% assign person = person[0] %}
<div class="container{% if include.fluid %}-fluid{% endif %}{% if include.dark %} navbar-dark bg-dark{% endif %}">
<a class="d-lg-none px-1" data-toggle="modal" data-target="#aside">
{% include ui/icon.html icon="menu" %}
<a class="navbar-toggler" data-toggle="modal" data-target="#aside">
<span class="navbar-toggler-icon"></span>
</a>
<a href="{{ site.base }}" class="navbar-brand text-inherit">
<a href="{{ site.base }}" class="navbar-brand text-inherit mr-md-3">
{% if include.icon %}<span class="text-green">{% include ui/icon.html icon=include.icon %}</span>{% endif %}
{% if include.stamp %}<span class="stamp bg-primary text-white">UI</span>{% endif %}
{% if include.logo %}
<img src="{{ site.base }}/img/logo{% if include.white-logo %}-white{% endif %}.svg" alt="{{ site.title }}" class="d-none d-md-block navbar-brand-logo mr-3">
<img src="{{ site.base }}/img/logo-small{% if include.white-logo %}-white{% endif %}.svg" alt="{{ site.title }}" class="d-md-none navbar-brand-logo mr-3">
<img src="{{ site.base }}/img/logo{% if include.white-logo %}-white{% endif %}.svg" alt="{{ site.title }}" class="d-none d-md-block navbar-brand-logo">
<img src="{{ site.base }}/img/logo-small{% if include.white-logo %}-white{% endif %}.svg" alt="{{ site.title }}" class="d-md-none navbar-brand-logo">
{% endif %}
{% if include.title %}<span class="d-inline">{{ include.title }}</span>{% endif %}
</a>
@@ -21,7 +21,7 @@
<div class="w-auto flex-fill max-w-md ml-0 ml-md-8 mr-auto d-none d-lg-block">
<div class="input-icon">
<span class="input-icon-addon">{% include ui/icon.html icon="search" %}</span>
<input type="text" class="form-control" placeholder="Search" tabindex="-1">
<input type="text" class="form-control form-control-light" placeholder="Search" tabindex="-1">
</div>
</div>
{% endif %}
@@ -32,46 +32,6 @@
</a>
{% endif %}
<div class="collapse navbar-collapse order-2 order-lg-1" id="navbarToggler">
{% if include.big-menu %}
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Homepage</a>
</li>
<li class="nav-item dropdown">
<div class="dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Pages</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">App Pages</a>
<a class="dropdown-item" href="#">Utility Pages</a>
<a class="dropdown-item" href="#">Layouts</a>
</div>
</div>
</li>
<li class="nav-item">
<div class="dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Components</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Bootstrap</a>
<a class="dropdown-item" href="#">Pipeline</a>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Documentation</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Changelog</a>
</li>
</ul>
{% endif %}
</div>
<ul class="nav navbar-menu order-1 order-lg-2">
{% if include.fullscreen %}
<li class="nav-item d-none d-sm-block">
@@ -123,6 +83,20 @@
</li>
{% endif %}
{% if include.language %}
<li class="nav-item dropdown">
<a href="#" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
<span class="flag flag-gb mr-2"></span>English
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-scrollable">
{% for language in site.data.languages %}
<a href="#" class="dropdown-item"><span class="flag flag-{{ language.flag }} mr-2"></span>{{
language.name }}</a>
{% endfor %}
</div>
</li>
{% endif %}
{% if include.user-menu %}
<li class="nav-item dropdown">
<a href="#" data-toggle="dropdown"
@@ -205,19 +179,5 @@
<a href="#" class="btn btn-secondary">{% include ui/icon.html icon="rotate-cw" class="mr-2" %}Sync</a>
</li>
{% endif %}
{% if include.language %}
<li class="nav-item dropdown">
<a href="#" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
<span class="flag flag-gb mr-2"></span>English
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-scrollable">
{% for language in site.data.languages %}
<a href="#" class="dropdown-item"><span class="flag flag-{{ language.flag }} mr-2"></span>{{
language.name }}</a>
{% endfor %}
</div>
</li>
{% endif %}
</ul>
</div>
scss/_variables.scss
+4 -4
View File
@@ -11,11 +11,11 @@ $icon-fonts: (
// COLORS
$full-black: rgba(0, 0, 0, 1) !default;
$light-black: rgba(0, 0, 0, .35) !default;
$min-black: rgba(135, 150, 165, .1) !default;
$full-white: rgba(255, 255, 255, 1) !default;
$light-white: rgba(255, 255, 255, .35) !default;
$min-white: rgba(255, 255, 255, .1) !default;
$light-black: rgba(0, 0, 0, .4) !default;
$light-white: rgba(255, 255, 255, .4) !default;
$min-black: rgba(135, 150, 165, .064) !default;
$min-white: rgba(255, 255, 255, .064) !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
scss/layout/_navbar.scss
+9 -58
View File
@@ -41,6 +41,15 @@
height: 2rem;
}
/**
Navbar toggler
*/
.navbar-toggler-icon {
width: 2rem;
height: 2rem;
background: red;
}
/**
Fixed navbar
*/
@@ -60,64 +69,6 @@ Fixed navbar
}
}
/**
Navbar expand
*/
@each $breakpoint, $dimension in $grid-breakpoints {
.navbar-expand-#{$breakpoint} {
display: none;
@include media-breakpoint-up(#{$breakpoint}) {
display: block;
padding-right: 0;
padding-left: 0;
.navbar-nav {
margin-right: 0;
margin-left: 0;
}
.navbar-nav .nav-link {
padding: .5rem $sidenav-link-padding-x;
&.active {
position: relative;
&::before {
top: auto;
right: $sidenav-link-padding-x;
bottom: calc(-#{$navbar-padding-y} - #{$border-width});
left: $sidenav-link-padding-x;
border-bottom: 1px solid $primary;
border-left: 0;
}
}
}
> .container,
> .container-fluid {
padding-right: 0;
padding-left: 0;
}
&.navbar-side.navbar-fixed {
@include media-breakpoint-up(#{$breakpoint}) {
~ .main-content {
margin-left: $sidenav-width;
}
&.navbar-right ~ .main-content {
margin-right: $sidenav-width;
margin-left: 0;
}
}
}
}
}
}
/*
Sidebar
*/
scss/ui/_buttons.scss
+4
View File
@@ -1,6 +1,10 @@
.btn {
letter-spacing: .03em;
box-shadow: 0 1px 1px rgba(0, 0, 0, .03);
.flag {
vertical-align: -5px;
}
}
.btn-avatar {