mirror of
https://github.com/tabler/tabler.git
synced 2026-07-27 05:24:38 +04:00
navbar layout refactor
This commit is contained in:
codecalm
@@ -6,7 +6,7 @@
|
|||||||
{% assign icon = level-1[1].icon %}
|
{% assign icon = level-1[1].icon %}
|
||||||
|
|
||||||
{% assign has-children = false %}
|
{% assign has-children = false %}
|
||||||
{% if level-1[1].children or level-1[1].docs %}
|
{% if level-1[1].children %}
|
||||||
{% assign has-children = true %}
|
{% assign has-children = true %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
@@ -31,23 +31,6 @@
|
|||||||
|
|
||||||
{% if has-children %}
|
{% if has-children %}
|
||||||
<div class="dropdown-menu">
|
<div class="dropdown-menu">
|
||||||
{% if level-1[1].docs %}
|
|
||||||
{% for d in site.data.docs %}
|
|
||||||
{% assign doc = site.docs | where: "slug", d.page | first %}
|
|
||||||
{% if doc %}
|
|
||||||
<a class="dropdown-item{% if current-page[0] == 'docs' and current-page[1] == doc.slug %} active{% endif %}{% if level-1[1].children %} dropdown{% endif %}">
|
|
||||||
<span class="nav-text">
|
|
||||||
{{ doc.title }}
|
|
||||||
|
|
||||||
{% if doc.new %}
|
|
||||||
<span class="badge bg-primary text-white ml-auto text-uppercase">new</span>
|
|
||||||
{% endif %}
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
{% endif %}
|
|
||||||
{% endfor %}
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
{% for level-2 in level-1[1].children %}
|
{% for level-2 in level-1[1].children %}
|
||||||
<a class="dropdown-item" {% if level-2[1].children %}href="#sidebar-{{ level-2[0] }}" data-toggle="dropdown" role="button" aria-expanded="false" {% else %}href="{{ site.base }}/{{ level-2[1].url }}" {% endif %}>
|
<a class="dropdown-item" {% if level-2[1].children %}href="#sidebar-{{ level-2[0] }}" data-toggle="dropdown" role="button" aria-expanded="false" {% else %}href="{{ site.base }}/{{ level-2[1].url }}" {% endif %}>
|
||||||
<span class="nav-text">
|
<span class="nav-text">
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
<div class="layout-area-menu navbar navbar-expand-lg {% if include.dark %}navbar-dark{% else %}navbar-light{% endif %}">
|
<header class="topnav">
|
||||||
<div class="container">
|
<div class="navbar navbar-expand-lg {% if include.dark %}navbar-dark{% else %}navbar-light{% endif %}">
|
||||||
{% include layout/menu.html top=true %}
|
<div class="container{% if include.fluid %}-fluid{% endif %}">
|
||||||
|
{% include layout/menu.html top=true %}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</header>
|
||||||
<div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
|
|
||||||
|
|||||||
@@ -1,6 +1,9 @@
|
|||||||
<header class="layout-area-topnav navbar navbar-expand-lg {% if include.dark %}navbar-dark bg-dark text-white{% else %}navbar-light{% endif %}{% if include.sticky %} navbar-sticky{% endif %}">
|
<header class="topnav">
|
||||||
<div class="container{% if include.fluid %} container-fluid{% endif %}">
|
<div class="container{% if include.fluid %}-fluid{% endif %}">
|
||||||
{% include parts/navbar.html logo=true search=true user-menu=1 person-id=1 dark=include.dark notifications=true %}
|
<div class="navbar navbar-expand-lg {% if include.dark %}navbar-dark bg-dark text-white{% else %}navbar-light{% endif %}{% if include.sticky %} navbar-sticky{% endif %}">
|
||||||
|
{% include_cached parts/navbar.html search=true %}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,10 @@
|
|||||||
|
<div class="navbar-search">
|
||||||
|
<form action="" method="get">
|
||||||
|
<div class="input-group">
|
||||||
|
<input type="text" name="q" class="form-control" placeholder="Search...">
|
||||||
|
<div class="input-group-append">
|
||||||
|
<button class="btn btn-secondary" type="submit">{% include_cached ui/icon.html icon="search" %}</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
@@ -1,48 +1,22 @@
|
|||||||
{% assign person-id = include.person-id | default: 12 | minus: 1 %}
|
{% assign person-id = include.person-id | default: 12 | minus: 1 %}
|
||||||
{% assign person = site.data.people[person-id] %}
|
{% assign person = site.data.people[person-id] %}
|
||||||
|
|
||||||
<a class="layout-toggler" data-toggle="menubar">
|
|
||||||
<span class="layout-toggler-icon"></span>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a href="{{ site.base }}" class="navbar-brand text-reset mr-md-3">
|
<a href="{{ site.base }}" class="navbar-brand text-reset mr-md-3">
|
||||||
{% if include.icon %}<span class="text-green">{% include_cached ui/icon.html icon=include.icon %}</span>{% endif %}
|
<img src="{{ site.base }}/img/logo{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="d-none d-md-block navbar-brand-logo">
|
||||||
{% if include.stamp %}<span class="stamp bg-primary text-white">UI</span>{% endif %}
|
<img src="{{ site.base }}/img/logo-small{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="d-md-none navbar-brand-logo">
|
||||||
{% if include.logo %}
|
|
||||||
<img src="{{ site.base }}/img/logo{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="d-none d-md-block navbar-brand-logo">
|
|
||||||
<img src="{{ site.base }}/img/logo-small{% if include.dark %}-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>
|
</a>
|
||||||
|
|
||||||
<ul class="nav navbar-menu align-items-center order-1 order-lg-2">
|
{% comment %}
|
||||||
|
{% if include.search %}
|
||||||
{% if include.notifications %}
|
{% include parts/navbar-search.html %}
|
||||||
<li class="nav-item dropdown mr-3">
|
{% endif %}
|
||||||
<a class="nav-link text-reset px-2" data-toggle="dropdown">
|
{% endcomment %}
|
||||||
{% include_cached ui/icon.html icon="bell" %}
|
|
||||||
<span class="badge badge-pill badge-up bg-primary">4</span>
|
|
||||||
</a>
|
|
||||||
<div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
|
|
||||||
<div class="scrollable">
|
|
||||||
<div class="list list-row">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="d-flex px-3 py-2 b-t">
|
|
||||||
<div class="flex">
|
|
||||||
<span>6 Notifications</span>
|
|
||||||
</div>
|
|
||||||
<a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
|
<ul class="nav navbar-menu align-items-center ml-auto">
|
||||||
<li class="nav-item d-none d-lg-flex mr-3">
|
<li class="nav-item d-none d-lg-flex mr-3">
|
||||||
<a href="{{ site.github_url }}" class="btn btn-sm btn-success" target="_blank">Source code</a>
|
<a href="{{ site.github_url }}" class="btn btn-sm btn-success" target="_blank">Source code</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
{% if include.user-menu %}
|
|
||||||
<li class="nav-item dropdown">
|
<li class="nav-item dropdown">
|
||||||
<a href="#" data-toggle="dropdown"
|
<a href="#" data-toggle="dropdown"
|
||||||
class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
|
class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
|
||||||
@@ -75,42 +49,4 @@
|
|||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
{% if include.manage %}
|
|
||||||
<li class="nav-item">
|
|
||||||
<a href="#" class="btn btn-secondary">Manage Widgets</a>
|
|
||||||
</li>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
{% if include.register %}
|
|
||||||
<li class="nav-item ">
|
|
||||||
<a href="#" class="nav-link">
|
|
||||||
Sign in
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="d-flex align-items-center">
|
|
||||||
<a href="#" class="btn btn-pill btn-sm btn-primary d-none d-lg-block">
|
|
||||||
Register
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
{% if include.plus %}
|
|
||||||
<li class="nav-item">
|
|
||||||
<a href="#" class="btn btn-primary btn-icon">{% include_cached ui/icon.html icon="plus" %}</a>
|
|
||||||
</li>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
{% if include.premium %}
|
|
||||||
<li class="nav-item">
|
|
||||||
<a href="#" class="btn btn-success">Go Premium</a>
|
|
||||||
</li>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
{% if include.sync %}
|
|
||||||
<li class="nav-item">
|
|
||||||
<a href="#" class="btn btn-secondary">{% include_cached ui/icon.html icon="rotate-cw" class="mr-2" %}Sync</a>
|
|
||||||
</li>
|
|
||||||
{% endif %}
|
|
||||||
</ul>
|
</ul>
|
||||||
|
|||||||
@@ -7,9 +7,9 @@ layout: base
|
|||||||
{% include layout/topnav.html dark=page.header-dark sticky=page.header-sticky %}
|
{% include layout/topnav.html dark=page.header-dark sticky=page.header-sticky %}
|
||||||
{% include layout/topmenu.html %}
|
{% include layout/topmenu.html %}
|
||||||
|
|
||||||
<div class="layout-area-main">
|
<div class="">
|
||||||
|
|
||||||
<main class="container{% if page.container-size %} container-{{ page.container-size }}{% endif %}{% if page.fluid %}-fluid{% endif %} my-4 flex-fill">
|
<main class="container-{% if page.container-size %}{{ page.container-size }}{% else %}xl{% endif %}{% if page.fluid %}-fluid{% endif %} my-4 flex-fill">
|
||||||
{% include layout/page-title.html %}
|
{% include layout/page-title.html %}
|
||||||
|
|
||||||
{{ content }}
|
{{ content }}
|
||||||
|
|||||||
+10
-9
@@ -117,7 +117,7 @@ $avatar-sizes: (
|
|||||||
//Fonts
|
//Fonts
|
||||||
$font-size-base: 1rem !default;
|
$font-size-base: 1rem !default;
|
||||||
$font-weight-base: 400 !default;
|
$font-weight-base: 400 !default;
|
||||||
$line-height-base: 1.6 !default;
|
$line-height-base: 1.5 !default;
|
||||||
$body-letter-spacing: null !default;
|
$body-letter-spacing: null !default;
|
||||||
|
|
||||||
$border-radius: 3px !default;
|
$border-radius: 3px !default;
|
||||||
@@ -266,11 +266,19 @@ $loader-size: 2.5rem !default;
|
|||||||
|
|
||||||
//navbar
|
//navbar
|
||||||
$navbar-bg: $white !default;
|
$navbar-bg: $white !default;
|
||||||
|
$navbar-height: 3.5rem !default;
|
||||||
$navbar-border-color: $border-color !default;
|
$navbar-border-color: $border-color !default;
|
||||||
$navbar-border-color: $border-color !default;
|
$navbar-border-color: $border-color !default;
|
||||||
|
|
||||||
//nav
|
//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
|
||||||
$pagination-border-width: 0 !default;
|
$pagination-border-width: 0 !default;
|
||||||
@@ -289,13 +297,6 @@ $sidenav-border-color: $border-color-alpha !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-light-color: $text-muted !default;
|
|
||||||
$navbar-light-active-color: $primary !default;
|
|
||||||
$navbar-light-hover-color: $body-color !default;
|
|
||||||
|
|
||||||
//steps
|
//steps
|
||||||
$steps-border-width: 2px !default;
|
$steps-border-width: 2px !default;
|
||||||
$steps-color-inactive: #f3f5f5 !default;
|
$steps-color-inactive: #f3f5f5 !default;
|
||||||
|
|||||||
+190
-176
@@ -1,182 +1,196 @@
|
|||||||
/**
|
.topnav {
|
||||||
Layout
|
border-bottom: 1px solid;
|
||||||
*/
|
background-color: $navbar-bg;
|
||||||
@mixin menu-side {
|
border-color: $navbar-border-color;
|
||||||
align-items: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin menu-collapsed {
|
.navbar {
|
||||||
.layout-area-menu {
|
margin: 0;
|
||||||
position: fixed;
|
padding: 0;
|
||||||
left: -($sidenav-width);
|
min-height: $navbar-height;
|
||||||
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) {
|
//Layout
|
||||||
$infix: breakpoint-infix($breakpoint);
|
// */
|
||||||
|
//@mixin menu-side {
|
||||||
@if $infix != '' {
|
// align-items: flex-start;
|
||||||
@include media-breakpoint-down($breakpoint) {
|
//}
|
||||||
|
//
|
||||||
&#{$infix} {
|
//@mixin menu-collapsed {
|
||||||
@include menu-collapsed;
|
// .layout-area-menu {
|
||||||
}
|
// position: fixed;
|
||||||
}
|
// left: -($sidenav-width);
|
||||||
} @else {
|
// top: 0;
|
||||||
@include menu-collapsed;
|
// bottom: 0;
|
||||||
}
|
// background: $dark;
|
||||||
}
|
// color: $white;
|
||||||
}
|
// width: $sidenav-width;
|
||||||
|
// z-index: $zindex-fixed;
|
||||||
.layout-sidebar {
|
// transition: .3s left;
|
||||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
//
|
||||||
$infix: breakpoint-infix($breakpoint);
|
// @include menu-side;
|
||||||
|
// }
|
||||||
@include media-breakpoint-up($breakpoint) {
|
//
|
||||||
.layout-toggler {
|
// .layout-area-menu-backdrop {
|
||||||
display: none;
|
// display: block;
|
||||||
}
|
// position: fixed;
|
||||||
|
// top: 0;
|
||||||
&#{$infix} {
|
// left: 0;
|
||||||
grid-template: "menu head" auto "menu main" auto /
|
// bottom: 0;
|
||||||
auto 1fr;
|
// width: 100vw;
|
||||||
|
// background: rgba($dark, .1);
|
||||||
.layout-area-menu {
|
// z-index: $zindex-fixed - 1;
|
||||||
width: $sidenav-width;
|
// visibility: hidden;
|
||||||
}
|
// opacity: 0;
|
||||||
}
|
// }
|
||||||
|
//
|
||||||
&-folded#{$infix} {
|
// .layout-toggler {
|
||||||
grid-template: "menu head" auto "menu main" auto /
|
// display: block;
|
||||||
auto 1fr;
|
// }
|
||||||
|
//
|
||||||
.layout-area-menu {
|
// @at-root body.aside-visible & {
|
||||||
width: $sidenav-folded-width;
|
// .layout-area-menu {
|
||||||
}
|
// left: 0;
|
||||||
}
|
// }
|
||||||
}
|
//
|
||||||
}
|
// .layout-area-menu-backdrop {
|
||||||
}
|
// opacity: 1;
|
||||||
|
// visibility: visible;
|
||||||
.layout-toggler {
|
// }
|
||||||
display: none;
|
// }
|
||||||
width: 2rem;
|
//}
|
||||||
height: 2rem;
|
//
|
||||||
cursor: pointer;
|
//.layout {
|
||||||
position: relative;
|
// position: relative;
|
||||||
opacity: .8;
|
// display: grid;
|
||||||
|
//
|
||||||
&-icon {
|
// grid-template: "head" auto "menu" auto "main" auto /
|
||||||
top: 50%;
|
// 100%;
|
||||||
left: 50%;
|
//}
|
||||||
display: block;
|
//
|
||||||
margin-top: -2px;
|
//.layout-collapsed {
|
||||||
margin-left: -.75rem;
|
// @each $breakpoint in map-keys($grid-breakpoints) {
|
||||||
|
// $infix: breakpoint-infix($breakpoint);
|
||||||
transition-timing-function: cubic-bezier(.55, .055, .675, .19);
|
//
|
||||||
transition-duration: 75ms;
|
// @if $infix != '' {
|
||||||
|
// @include media-breakpoint-down($breakpoint) {
|
||||||
&,
|
//
|
||||||
&:after,
|
// &#{$infix} {
|
||||||
&:before {
|
// @include menu-collapsed;
|
||||||
content: '';
|
// }
|
||||||
width: 1.5rem;
|
// }
|
||||||
height: 2px;
|
// } @else {
|
||||||
background: currentColor;
|
// @include menu-collapsed;
|
||||||
position: absolute;
|
// }
|
||||||
border-radius: 4px;
|
// }
|
||||||
}
|
//}
|
||||||
|
//
|
||||||
&:before {
|
//.layout-sidebar {
|
||||||
top: -.5rem;
|
// @each $breakpoint in map-keys($grid-breakpoints) {
|
||||||
transition: top 75ms ease .12s, opacity 75ms ease;
|
// $infix: breakpoint-infix($breakpoint);
|
||||||
}
|
//
|
||||||
|
// @include media-breakpoint-up($breakpoint) {
|
||||||
&:after {
|
// .layout-toggler {
|
||||||
bottom: -.5rem;
|
// display: none;
|
||||||
transition: bottom 75ms ease .12s, transform 75ms cubic-bezier(.55, .055, .675, .19);
|
// }
|
||||||
}
|
//
|
||||||
|
// &#{$infix} {
|
||||||
@at-root body.aside-visible & {
|
// grid-template: "menu head" auto "menu main" auto /
|
||||||
transform: rotate(45deg);
|
// auto 1fr;
|
||||||
transition-delay: .12s;
|
//
|
||||||
transition-timing-function: cubic-bezier(.215, .61, .355, 1);
|
// .layout-area-menu {
|
||||||
|
// width: $sidenav-width;
|
||||||
&:before {
|
// }
|
||||||
top: 0;
|
// }
|
||||||
transition: top 75ms ease, opacity 75ms ease .12s;
|
//
|
||||||
opacity: 0;
|
// &-folded#{$infix} {
|
||||||
}
|
// grid-template: "menu head" auto "menu main" auto /
|
||||||
|
// auto 1fr;
|
||||||
&:after {
|
//
|
||||||
bottom: 0;
|
// .layout-area-menu {
|
||||||
transition: bottom 75ms ease, transform 75ms cubic-bezier(.215, .61, .355, 1) .12s;
|
// width: $sidenav-folded-width;
|
||||||
transform: rotate(-90deg);
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
//}
|
||||||
|
//
|
||||||
.layout-area-topnav {
|
//.layout-toggler {
|
||||||
grid-area: head;
|
// display: none;
|
||||||
padding-left: 0;
|
// width: 2rem;
|
||||||
padding-right: 0;
|
// height: 2rem;
|
||||||
}
|
// cursor: pointer;
|
||||||
|
// position: relative;
|
||||||
.layout-area-menu {
|
// opacity: .8;
|
||||||
grid-area: menu;
|
//
|
||||||
}
|
// &-icon {
|
||||||
|
// top: 50%;
|
||||||
.layout-area-menu-backdrop {
|
// left: 50%;
|
||||||
display: none;
|
// display: block;
|
||||||
}
|
// margin-top: -2px;
|
||||||
|
// margin-left: -.75rem;
|
||||||
.layout-area-main {
|
//
|
||||||
grid-area: main;
|
// 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;
|
||||||
|
//}
|
||||||
|
|||||||
+25
-12
@@ -1,7 +1,6 @@
|
|||||||
.navbar {
|
.navbar {
|
||||||
border-bottom: 1px solid;
|
//padding-top: 0;
|
||||||
background-color: $navbar-bg;
|
//padding-bottom: 0;
|
||||||
border-color: $navbar-border-color;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -21,19 +20,33 @@ Navbar logo
|
|||||||
padding-right: $navbar-nav-link-padding-x;
|
padding-right: $navbar-nav-link-padding-x;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-item.active .nav-link {
|
.nav-item {
|
||||||
position: relative;
|
&.active .nav-link {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
&:after {
|
&:after {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
||||||
bottom: subtract(-$navbar-padding-y, 1px);
|
bottom: -1px;
|
||||||
right: $navbar-nav-link-padding-x;
|
right: $navbar-nav-link-padding-x;
|
||||||
left: $navbar-nav-link-padding-x;
|
left: $navbar-nav-link-padding-x;
|
||||||
border-bottom: 1px solid $primary;
|
border-bottom: 1px solid $primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.dropdown-menu {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.navbar-brand {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link {
|
||||||
|
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user