Skip to content

T
tabler

知鸟1号 / tabler
与 Fork 源项目一致

从无法访问的项目Fork

通知 1
Star 0
Fork 0
T
tabler

体验新版 GitCode，发现更多精彩内容 >>

提交 72599898 编写于 作者: C codecalm
浏览文件
操作

topnav refactoring

上级 2583d02b
隐藏空白更改
内联 并排
Showing with 122 addition and 162 deletion
pages/_includes/layout/menu.html
浏览文件 @ 72599898
{% assign current-page = page.menu | default: layout.menu | split: '.' %} {% assign current-page = page.menu | default: layout.menu | split: '.' %}
<ul class="navbar-nav flex-wrap{% if include.class %} {{ include.class }}{% endif %}"> <ul class="navbar-nav flex-wrap flex-fill{% if include.class %} {{ include.class }}{% endif %}">
{% for level-1 in site.data.menu %} {% for level-1 in site.data.menu %}
{% assign icon = level-1[1].icon %} {% assign icon = level-1[1].icon %}
......
pages/_includes/layout/topnav.html
浏览文件 @ 72599898
...@@ -5,73 +5,74 @@ ...@@ -5,73 +5,74 @@
{% assign fixed = page.topnav-fixed %} {% assign fixed = page.topnav-fixed %}
{% assign breakpoint = 'lg' %} {% assign breakpoint = 'lg' %}
<header class="navbar navbar-border {% if dark %}navbar-dark bg-dark text-white{% else %}navbar-light bg-white{% endif %}{% if fixed %} fixed-top{% endif %}"> {% unless page.hide-topnav %}
<div class="container{% if include.topnav-fluid %}-fluid{% endif %}"> <header class="navbar-wrap navbar-expand-lg flex-column{% if fixed %} fixed-top{% endif %}">
<div class="navbar navbar-border {% if page.topnav-dark %}navbar-dark bg-dark text-white{% else %}navbar-light bg-white{% endif %}">
<div class="container{% if include.topnav-fluid %}-fluid{% endif %}">
<button class="navbar-toggler mr-auto {% if page.sidebar %}hide-sidebar-visible{% else %}d-{{ breakpoint }}-none{% endif %}" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false"> <button class="navbar-toggler mr-auto {% if page.sidebar %}hide-sidebar-visible{% else %}d-{{ breakpoint }}-none{% endif %}" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<a href="{{ site.base }}" class="navbar-brand hide-sidebar-visible m-0"> <a href="{{ site.base }}" class="navbar-brand hide-sidebar-visible m-0">
<img src="{{ site.base }}/static/logo{% if dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="navbar-brand-logo"> <img src="{{ site.base }}/static/logo{% if dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="navbar-brand-logo">
</a> </a>
{% comment %} {% comment %}
{% if page.sidebar %} {% if page.sidebar %}
{% include layout/navbar-search.html class="mr-4" %} {% include layout/navbar-search.html class="mr-4" %}
{% endif %} {% endif %}
{% endcomment %} {% endcomment %}
<ul class="nav navbar-menu align-items-center ml-auto"> <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">
{% include ui/button.html href=site.github_url text="Source code" icon="brand/github" external=true %} {% include ui/button.html href=site.github_url text="Source code" icon="brand/github" external=true %}
</li> </li>
<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">
{% include ui/avatar.html src=person.photo size="sm" %} {% include ui/avatar.html src=person.photo size="sm" %}
<span class="ml-2 d-none d-lg-block lh-1"> <span class="ml-2 d-none d-lg-block lh-1">
{{ person.full_name }} {{ person.full_name }}
<span class="text-muted d-block mt-1 text-h6">Administrator</span> <span class="text-muted d-block mt-1 text-h6">Administrator</span>
</span> </span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="#">
{% include ui/icon.html icon="user" class="dropdown-icon" %} Profile
</a> </a>
<a class="dropdown-item" href="#"> <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
{% include ui/icon.html icon="settings" class="dropdown-icon" %} Settings <a class="dropdown-item" href="#">
</a> {% include ui/icon.html icon="user" class="dropdown-icon" %} Profile
<a class="dropdown-item" href="#"> </a>
{% include ui/icon.html icon="mail" class="dropdown-icon" %} Inbox <a class="dropdown-item" href="#">
<span class="badge bg-primary ml-auto">6</span> {% include ui/icon.html icon="settings" class="dropdown-icon" %} Settings
</a> </a>
<a class="dropdown-item" href="#"> <a class="dropdown-item" href="#">
{% include ui/icon.html icon="send" class="dropdown-icon" %} Message {% include ui/icon.html icon="mail" class="dropdown-icon" %} Inbox
</a> <span class="badge bg-primary ml-auto">6</span>
<div class="dropdown-divider"></div> </a>
<a class="dropdown-item" href="#"> <a class="dropdown-item" href="#">
{% include ui/icon.html icon="help-circle" class="dropdown-icon" %} Need help? {% include ui/icon.html icon="send" class="dropdown-icon" %} Message
</a> </a>
<a class="dropdown-item" href="#"> <div class="dropdown-divider"></div>
{% include ui/icon.html icon="log-out" class="dropdown-icon" %} Sign out <a class="dropdown-item" href="#">
</a> {% include ui/icon.html icon="help-circle" class="dropdown-icon" %} Need help?
</div> </a>
</li> <a class="dropdown-item" href="#">
</ul> {% include ui/icon.html icon="log-out" class="dropdown-icon" %} Sign out
</a>
</div>
</li>
</ul>
</div>
</div> </div>
</header>
{% unless page.sidebar %} {% unless page.sidebar %}
<nav id="nav-main-menu" class="navbar navbar-border {% if page.topmenu-dark %}navbar-dark bg-dark text-white{% else %}navbar-light bg-white{% endif %}{% if fixed %} fixed-top{% endif %}"> <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute {% if page.topmenu-dark %}navbar-dark bg-dark text-white{% else %}navbar-light bg-white{% endif %}" id="nav-main-menu">
<div class="container{% if include.fluid %}-fluid{% endif %}"> <div class="container{% if include.topnav-fluid %}-fluid{% endif %}">
<div class="collapse navbar-collapse"> {% include layout/menu.html top=true %}
{% include layout/menu.html top=true %} {% include layout/navbar-search.html %}
{% include layout/navbar-search.html %}
</div> </div>
</div> </div>
</nav> {% endunless %}
{% endunless %}
</header>
{% endunless %}
\ No newline at end of file
pages/layout-sidebar-only.html
浏览文件 @ 72599898
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
page-title: Page Layouts page-title: Page Layouts
menu: layouts menu: layouts
sidebar: true sidebar: true
hide-topnav: true
--- ---
{% include layout/layouts.html %} {% include layout/layouts.html %}
scss/_variables.scss
浏览文件 @ 72599898
...@@ -303,7 +303,7 @@ $modal-sm: 300px !default; ...@@ -303,7 +303,7 @@ $modal-sm: 300px !default;
//navbar //navbar
$navbar-padding-y: .5rem !default; $navbar-padding-y: .5rem !default;
$navbar-height: 3.75rem !default; $navbar-height: 3.5rem !default;
$navbar-border-color: $border-color !default; $navbar-border-color: $border-color !default;
$navbar-toggler-padding-y: .75rem !default; $navbar-toggler-padding-y: .75rem !default;
......
scss/layout/_layout.scss
浏览文件 @ 72599898
...@@ -150,91 +150,6 @@ $sidenav-folded-item-height: 3.5rem; ...@@ -150,91 +150,6 @@ $sidenav-folded-item-height: 3.5rem;
} }
} }
/**
Top nav
*/
//.navbar-top {
// background-color: $navbar-bg;
// position: absolute;
// top: 0;
// right: 0;
// left: 0;
// z-index: $zindex-sticky;
// min-height: $navbar-height;
// box-shadow: inset 0 -1px 0 0px $navbar-border-color;
// user-select: none;
//
// & + & {
// top: $navbar-height;
// z-index: $zindex-sticky - 1;
// }
//
// & + & + & {
// top: $navbar-height * 2;
// z-index: $zindex-sticky - 2;
// }
//
// @media print {
// display: none;
// }
//
// .nav-link {
// height: $navbar-height;
// }
//
// .nav-item {
// &.active {
// position: relative;
//
// &:after {
// content: '';
// position: absolute;
// bottom: 0;
// left: 2px;
// right: 2px;
// border-bottom: 1px solid $primary;
// }
// }
// }
//
// .navbar-brand-logo {
// &-sm {
// display: none;
// }
//
// @include media-breakpoint-down($sidenav-breakpoint-show) {
// &-lg {
// display: none;
// }
//
// &-sm {
// display: block;
// }
// }
// }
//
// .sidebar + .content & {
// left: $sidenav-width;
//
// @if $sidenav-breakpoint-folded {
// @include media-breakpoint-down($sidenav-breakpoint-folded) {
// left: $sidenav-width-narrow;
// }
// }
//
// @include media-breakpoint-down($sidenav-breakpoint-show) {
// left: 0;
// padding: 0;
// }
// }
//}
//
//.topnav-fixed {
// position: fixed;
// z-index: $zindex-fixed;
//}
/** /**
Wrapper Wrapper
*/ */
...@@ -274,9 +189,9 @@ Content ...@@ -274,9 +189,9 @@ Content
flex: 1; flex: 1;
display: flex; display: flex;
@include media-breakpoint-up(md) { @include media-breakpoint-up($cards-grid-breakpoint) {
padding-left: $card-group-margin-sm; padding-left: $cards-grid-gap / 2;
padding-right: $card-group-margin-sm; padding-right: $cards-grid-gap / 2;
} }
@media print { @media print {
......
scss/layout/_navbar.scss
浏览文件 @ 72599898
...@@ -2,22 +2,46 @@ ...@@ -2,22 +2,46 @@
Navbar Navbar
*/ */
.navbar { .navbar {
min-height: $navbar-height;
&.fixed-top { &, .navbar-dark {
+ .content-page { min-height: $navbar-height;
padding-top: $navbar-height;
} &.fixed-top {
+ .content-page {
padding-top: $navbar-height;
}
+ .navbar:not(.fixed-top) { + .navbar:not(.fixed-top) {
margin-top: $navbar-height; margin-top: $navbar-height;
}
+ .navbar.fixed-top {
top: $navbar-height;
+ .content-page {
padding-top: $navbar-height * 2;
}
}
} }
}
+ .navbar.fixed-top { @include media-breakpoint-up($cards-grid-breakpoint) {
top: $navbar-height; padding-left: $cards-grid-gap / 2;
padding-right: $cards-grid-gap / 2;
}
}
+ .content-page { .navbar-collapse-absolute {
padding-top: $navbar-height * 2; @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;
} }
} }
} }
...@@ -74,7 +98,7 @@ navbar toggler ...@@ -74,7 +98,7 @@ navbar toggler
bottom: $navbar-toggler-item-spacing; bottom: $navbar-toggler-item-spacing;
} }
.navbar-toggler.collapsed & { .navbar-toggler[aria-expanded="true"] & {
transform: rotate(45deg); transform: rotate(45deg);
transition: top $time, bottom $time, transform $time $time, opacity $time; transition: top $time, bottom $time, transform $time $time, opacity $time;
...@@ -113,10 +137,29 @@ Navbar logo ...@@ -113,10 +137,29 @@ Navbar logo
padding-right: $navbar-nav-link-padding-x; padding-right: $navbar-nav-link-padding-x;
} }
.nav-item:hover, @each $breakpoint, $width in $grid-breakpoints {
.dropright:hover { @at-root .navbar-expand-#{$breakpoint} & {
> .dropdown-menu { @include media-breakpoint-up($breakpoint) {
display: block; .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;
}
}
} }
} }
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或