Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Dashboards
Tabler
提交
dca00ea5
T
Tabler
项目概览
Dashboards
/
Tabler
11 个月 前同步成功
通知
0
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
T
Tabler
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
dca00ea5
编写于
2月 02, 2020
作者:
C
codecalm
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
navigation components
上级
3738f63d
变更
7
隐藏空白更改
内联
并排
Showing
7 changed file
with
230 addition
and
56 deletion
+230
-56
pages/_data/menu.yml
pages/_data/menu.yml
+3
-3
pages/_includes/layout/navbar-menu.html
pages/_includes/layout/navbar-menu.html
+20
-0
pages/_includes/layout/navbar-primary.html
pages/_includes/layout/navbar-primary.html
+7
-15
pages/tmp-layout.html
pages/tmp-layout.html
+1
-0
scss/_variables.scss
scss/_variables.scss
+9
-2
scss/layout/_mainnav.scss
scss/layout/_mainnav.scss
+189
-35
scss/ui/_type.scss
scss/ui/_type.scss
+1
-1
未找到文件。
pages/_data/menu.yml
浏览文件 @
dca00ea5
home
:
url
:
index.html
title
:
Dashboard
title
:
Home
icon
:
home
forms
:
url
:
form-elements.html
title
:
Form
element
s
title
:
Forms
icon
:
check-square
base
:
...
...
@@ -115,7 +115,7 @@ extra:
title
:
Search results
url
:
search-results.html
docs
:
title
:
Doc
umentation
title
:
Doc
s
icon
:
file-text
url
:
docs/index.html
children
:
...
...
pages/_includes/layout/navbar-menu.html
0 → 100644
浏览文件 @
dca00ea5
{% assign current-page = page.menu | default: layout.menu | split: '.' %}
<ul
class=
"navbar-nav"
>
{% for level-1 in site.data.menu %}
{% assign icon = level-1[1].icon %}
<li
class=
"nav-item{% if level-1[0] == current-page[0] %} active{% endif %}"
>
<a
href=
"#"
class=
"nav-link"
>
<span
class=
"nav-link-icon"
>
{% include ui/icon.html icon=icon %}
</span>
<span
class=
"nav-link-title"
>
{{ level-1[1].title }}
</span>
</a>
</li>
{% endfor %}
<li
class=
"nav-item"
>
<a
href=
"#"
class=
"nav-link d-none-navbar-vertical"
>
<span
class=
"nav-link-icon"
>
{% include ui/icon.html icon="sliders" %}
</span>
<span
class=
"nav-link-title"
>
Customize
</span>
</a>
</li>
</ul>
\ No newline at end of file
pages/_includes/layout/navbar-primary.html
浏览文件 @
dca00ea5
...
...
@@ -3,23 +3,15 @@
<div
class=
"container"
>
{% include layout/navbar-logo.html class="d-none-navbar-horizontal" %}
<div>
Lorem ipsum
</div>
<div
class=
"d-none-navbar-vertical"
>
only horizontal
</div>
<div
class=
"navbar-collapse collapse"
>
<h6
class=
"navbar-heading"
>
Navigation
</h6>
{% include layout/navbar-menu.html %}
<div
class=
"d-none-navbar-vertical-narrow"
>
hide narrow
<div
class=
"navbar-side d-none-navbar-vertical-narrow"
>
{% include layout/navbar-search.html %}
{% include ui/button.html text="Customize" icon="sliders" color="primary" block=true class="d-none-navbar-horizontal" %}
</div>
</div>
<div
class=
"d-none-navbar-horizontal"
>
only sidebar
</div>
<div
class=
"text-muted"
>
Lorem ipsum
</div>
</div>
</nav>
pages/tmp-layout.html
浏览文件 @
dca00ea5
...
...
@@ -2,6 +2,7 @@
tmp: true
page-header: Layout test
page-header-actions: buttons
menu: home
---
<div
class=
"row row-cards"
>
...
...
scss/_variables.scss
浏览文件 @
dca00ea5
...
...
@@ -22,7 +22,7 @@ $light-mix: rgba(mix($light, $dark, 64%), .24) !default;
$light-white
:
rgba
(
$light
,
.24
)
!
default
;
$min-black
:
rgba
(
$dark
,
.032
)
!
default
;
$min-white
:
rgba
(
$light
,
.0
32
)
!
default
;
$min-white
:
rgba
(
$light
,
.0
64
)
!
default
;
$gray-100
:
$light
!
default
;
$gray-200
:
mix
(
$light
,
$dark
,
98%
)
!
default
;
...
...
@@ -218,6 +218,7 @@ $sidenav-dark-color: $white !default;
$sidenav-padding
:
1
.25rem
!
default
;
$sidenav-breakpoint-show
:
'sm'
!
default
;
$sidenav-breakpoint-folded
:
'lg'
!
default
;
$sidenav-active-accent-color
:
$primary
!
default
;
//alerts
$alert-link-font-weight
:
$font-weight-bold
!
default
;
...
...
@@ -349,10 +350,15 @@ $popover-border-color: $border-color !default;
$navbar-padding-y
:
.75rem
!
default
;
$navbar-nav-link-padding-x
:
.75rem
!
default
;
$navbar-light-color
:
$text-muted
!
default
;
$navbar-light-color
:
rgba
(
$body-color
,
.64
)
!
default
;
$navbar-light-active-color
:
$primary
!
default
;
$navbar-light-hover-color
:
$body-color
!
default
;
$navbar-dark-color
:
rgba
(
$white
,
.64
)
!
default
;
$navbar-dark-active-color
:
$white
!
default
;
$navbar-dark-hover-color
:
$white
!
default
;
//pagination
$pagination-border-width
:
0
!
default
;
$pagination-padding-y
:
.25rem
!
default
;
...
...
@@ -455,3 +461,4 @@ $enable-social-colors: true !default;
$enable-ghost-buttons
:
true
!
default
;
$enable-extra-colors
:
true
!
default
;
$enable-gradients
:
false
!
default
;
$enable-navbar-vertical
:
true
!
default
;
scss/layout/_mainnav.scss
浏览文件 @
dca00ea5
@mixin
navbar-vertical-narrow
{
width
:
$sidenav-width-narrow
;
.navbar-nav
{
margin-top
:
0
;
}
.nav-link
{
height
:
3rem
;
//todo: to variable
}
.nav-link-title
{
display
:
none
;
}
.nav-link-icon
{
margin
:
0
auto
;
}
.d-none-navbar-vertical-narrow
{
display
:
none
;
}
.navbar-brand-logo-large
{
display
:
none
;
}
.navbar-brand-logo-small
{
display
:
inline-block
;
}
~
.navbar
,
~
.content
{
margin-left
:
$sidenav-width-narrow
;
}
&
.navbar-right
{
~
.navbar
,
~
.content
{
margin-left
:
0
;
margin-right
:
$sidenav-width-narrow
;
}
}
}
@mixin
navbar-vertical
{
position
:
fixed
;
left
:
0
;
...
...
@@ -7,10 +52,15 @@
z-index
:
$zindex-fixed
;
min-height
:
auto
;
align-items
:
start
;
overflow
:
auto
;
box-shadow
:
inset
-1px
0
0
0
$border-color
;
>
[
class
*=
"container"
]
{
flex-direction
:
column
;
align-items
:
start
;
align-items
:
stretch
;
padding-left
:
0
;
padding-right
:
0
;
min-height
:
100%
;
}
~
.navbar
,
...
...
@@ -32,65 +82,159 @@
justify-content
:
center
;
}
&
.navbar-vertical-narrow
{
width
:
$sidenav-width-narrow
;
.navbar-heading
{
@include
subheader
();
display
:
block
;
margin-bottom
:
.5rem
;
}
.d-none-navbar-vertical-narrow
{
display
:
none
;
}
.navbar-collapse
{
flex-direction
:
column
;
text-align
:
left
;
align-items
:
normal
;
.navbar-brand-logo-large
{
display
:
none
;
padding
:
$sidenav-padding
$sidenav-padding
;
}
.navbar-nav
{
flex-direction
:
column
;
margin-left
:
-
(
$sidenav-padding
);
margin-right
:
-
(
$sidenav-padding
);
.nav-link
{
min-height
:
0
;
padding-left
:
$sidenav-padding
;
padding-right
:
$sidenav-padding
;
}
.navbar-brand-logo-small
{
display
:
inline-block
;
.nav-item
{
&
.active
{
background
:
rgba
(
$sidenav-active-accent-color
,
.032
);
&
:before
{
left
:
0
;
right
:
auto
;
top
:
0
;
bottom
:
0
;
height
:
auto
;
width
:
2px
;
}
}
}
}
~
.navbar
,
~
.content
{
margin-left
:
$sidenav-width-narrow
;
.navbar-side
{
margin-left
:
0
;
margin-top
:
auto
;
padding-left
:
0
;
padding-top
:
$sidenav-padding
;
>
*
{
margin-left
:
0
;
margin-top
:
1rem
;
}
}
&
.navbar-right
{
left
:
auto
;
right
:
0
;
box-shadow
:
inset
1px
0
0
0
$border-color
;
~
.navbar
,
~
.content
{
margin-left
:
0
;
margin-right
:
$sidenav-width
;
}
}
&
.navbar-vertical-narrow
{
~
.navbar
,
~
.content
{
margin-right
:
$sidenav-width-narrow
;
}
}
&
.navbar-vertical-narrow
{
@include
navbar-vertical-narrow
;
}
}
.page
{
display
:
flex
;
flex-direction
:
column
;
position
:
relative
;
}
.content
{
padding-top
:
map-get
(
$spacers
,
4
)
;
padding-bottom
:
map-get
(
$spacers
,
4
)
;
padding-top
:
1
.25rem
;
padding-bottom
:
1
.25rem
;
@include
media-breakpoint-up
(
xl
)
{
padding-left
:
.5rem
;
padding-right
:
.5rem
;
}
@media
print
{
margin
:
0
!
important
;
}
}
.navbar
{
min-height
:
$navbar-height
;
padding-top
:
0
;
//todo: move to varaibles
padding-bottom
:
0
;
@media
print
{
display
:
none
;
margin
:
0
!
important
;
}
.nav-link
{
min-height
:
$navbar-height
;
}
.nav-link-icon
{
font-size
:
1rem
;
width
:
1rem
;
height
:
1rem
;
display
:
block
;
margin-right
:
.5rem
;
line-height
:
.99
;
}
}
.navbar-expand
{
@each
$breakpoint
,
$breakpoint-max-width
in
$grid-breakpoints
{
&
-
#{
$breakpoint
}
{
@include
media-breakpoint-up
(
$breakpoint
)
{
.navbar-nav
{
margin-left
:
(
-
$navbar-nav-link-padding-x
);
.nav-item
{
position
:
relative
;
&
.active
{
&
:before
{
content
:
''
;
position
:
absolute
;
bottom
:
0
;
left
:
$navbar-nav-link-padding-x
;
right
:
$navbar-nav-link-padding-x
;
height
:
1px
;
background
:
$sidenav-active-accent-color
;
}
}
}
}
}
}
}
}
.navbar-side
{
margin-left
:
auto
;
padding-left
:
1
.5rem
;
>
*
{
margin-left
:
1rem
;
}
}
.navbar-heading
{
display
:
none
;
}
/**
...
...
@@ -113,12 +257,14 @@ Navbar colors
*/
.navbar-light
{
background
:
$white
;
box-shadow
:
0
0
0
1px
$border-color
;
box-shadow
:
inset
0
-1px
0
0
$border-color
;
@include
scrollbar
;
}
.navbar-dark
{
background
:
$sidenav-dark-bg
;
color
:
$sidenav-dark-color
;
@include
scrollbar
(
true
);
.text-muted
{
color
:
inherit
!
important
;
...
...
@@ -128,27 +274,35 @@ Navbar colors
.navbar-brand-autodark
{
filter
:
brightness
(
0
)
invert
(
1
);
}
.form-control
{
border-color
:
transparent
;
background
:
$min-white
;
color
:
$white
;
}
}
/**
Navbar vertical
*/
.navbar
:not
(
.navbar-vertical
)
{
.d-none-navbar-horizontal
{
display
:
none
;
@if
$enable-navbar-vertical
{
.navbar
:not
(
.navbar-vertical
)
{
.d-none-navbar-horizontal
{
display
:
none
;
}
}
}
.navbar-vertical
{
@each
$breakpoint
,
$breakpoint-max-width
in
$grid-breakpoints
{
&
.navbar-expand-
#{
$breakpoint
}
{
@include
media-breakpoint-up
(
$breakpoint
)
{
@include
navbar-vertical
;
}
.navbar-vertical
{
@each
$breakpoint
,
$breakpoint-max-width
in
$grid-breakpoints
{
&
.navbar-expand-
#{
$breakpoint
}
{
@include
media-breakpoint-up
(
$breakpoint
)
{
@include
navbar-vertical
;
}
@include
media-breakpoint-down-than
(
$breakpoint
)
{
.d-none-navbar-horizontal
{
display
:
none
;
@include
media-breakpoint-down-than
(
$breakpoint
)
{
.d-none-navbar-horizontal
{
display
:
none
;
}
}
}
}
...
...
scss/ui/_type.scss
浏览文件 @
dca00ea5
...
...
@@ -76,7 +76,7 @@ pre {
overflow
:
auto
;
font-size
:
$code-font-size
;
hyphens
:
none
;
line-height
:
1
.5
;
line-height
:
$line-height-base
;
tab-size
:
3
;
border-radius
:
$border-radius
;
white-space
:
pre-wrap
;
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录