Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Dashboards
Tabler
提交
1ca12745
T
Tabler
项目概览
Dashboards
/
Tabler
10 个月 前同步成功
通知
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,体验更适合开发者的 AI 搜索 >>
未验证
提交
1ca12745
编写于
6月 07, 2023
作者:
P
Paweł Kuna
提交者:
GitHub
6月 07, 2023
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Revert "Navbar unify" (#1617)
上级
0625f5f1
变更
7
隐藏空白更改
内联
并排
Showing
7 changed file
with
212 addition
and
199 deletion
+212
-199
src/pages/_includes/layout/navbar-menu.html
src/pages/_includes/layout/navbar-menu.html
+2
-2
src/scss/_variables-dark.scss
src/scss/_variables-dark.scss
+2
-2
src/scss/_variables.scss
src/scss/_variables.scss
+71
-37
src/scss/layout/_navbar.scss
src/scss/layout/_navbar.scss
+129
-153
src/scss/layout/_page.scss
src/scss/layout/_page.scss
+1
-1
src/scss/layout/_root.scss
src/scss/layout/_root.scss
+4
-1
src/scss/ui/_timeline.scss
src/scss/ui/_timeline.scss
+3
-3
未找到文件。
src/pages/_includes/layout/navbar-menu.html
浏览文件 @
1ca12745
...
...
@@ -11,8 +11,8 @@
<ul
class=
"navbar-nav{% if include.class %} {{ include.class }}{% endif %}"
>
{% for level-1 in menu %}
{% assign icon = level-1[1].icon %}
<li
class=
"nav-item{% if level-1[1].children %} dropdown{% endif %}"
>
<a
class=
"nav-link{% if level-1[1].children %} dropdown-toggle{% endif %}{% if level-1[1].disabled %} disabled{% endif %}
{% if level-1[0] == current-page[0] or level-1[1].active %} active{% endif %}
"
{%
if
level-1
[1].
children
%}
href=
"#navbar-{{ level-1[0] }}"
data-bs-toggle=
"dropdown"
data-bs-auto-close=
"{% if include.keep-open %}false{% else %}outside{% endif %}"
role=
"button"
aria-expanded=
"{% if include.auto-open and level-1[0] == current-page[0] %}true{% else %}false{% endif %}"
{%
else
%}
href=
"{{ site.base }}/{{ level-1[1].url }}"
{%
endif
%}
>
<li
class=
"nav-item{% if level-1[
0] == current-page[0] or level-1[1].active %} active{% endif %}{% if level-1[
1].children %} dropdown{% endif %}"
>
<a
class=
"nav-link{% if level-1[1].children %} dropdown-toggle{% endif %}{% if level-1[1].disabled %} disabled{% endif %}"
{%
if
level-1
[1].
children
%}
href=
"#navbar-{{ level-1[0] }}"
data-bs-toggle=
"dropdown"
data-bs-auto-close=
"{% if include.keep-open %}false{% else %}outside{% endif %}"
role=
"button"
aria-expanded=
"{% if include.auto-open and level-1[0] == current-page[0] %}true{% else %}false{% endif %}"
{%
else
%}
href=
"{{ site.base }}/{{ level-1[1].url }}"
{%
endif
%}
>
{% unless hide-icons %}
<span
class=
"nav-link-icon d-md-none d-lg-inline-block"
>
{% include ui/icon.html icon=icon %}
</span>
{% endunless %}
...
...
src/scss/_variables-dark.scss
浏览文件 @
1ca12745
...
...
@@ -9,9 +9,9 @@ $border-dark-color-dark: lighten($dark, 4%) !default;
$border-color-active-dark
:
lighten
(
$dark
,
12%
)
!
default
;
//new bootsrap variables
$body-color-dark
:
rgba
(
255
,
255
,
255
,
.8
)
!
default
;
$body-color-dark
:
$light
!
default
;
$body-emphasis-color-dark
:
$white
!
default
;
$code-color-dark
:
var
(
--
#{
$prefix
}
gray-300
)
!
default
;
$
body-secondary-color
-dark
:
rgba
(
153
,
159
,
164
,
1
)
!
default
;
$
text-secondary
-dark
:
rgba
(
153
,
159
,
164
,
1
)
!
default
;
\ No newline at end of file
src/scss/_variables.scss
浏览文件 @
1ca12745
...
...
@@ -61,7 +61,6 @@ $font-weight-bold: 600 !default;
$headings-font-weight
:
var
(
--
#{
$prefix
}
font-weight-bold
)
!
default
;
$headings-margin-bottom
:
var
(
--
#{
$prefix
}
spacer
)
!
default
;
$headings-color
:
var
(
--
#{
$prefix
}
body-color
)
color
!
default
;
$font-weights
:
(
light
:
$font-weight-light
,
...
...
@@ -180,6 +179,19 @@ $green: #2fb344 !default;
$teal
:
#0ca678
!
default
;
$cyan
:
#17a2b8
!
default
;
$color-blue
:
#0054a6
;
$color-azure
:
#3586c9
;
$color-indigo
:
#4263eb
;
$color-purple
:
#ae3ec9
;
$color-pink
:
#d6336c
;
$color-red
:
#e73f3f
;
$color-orange
:
#f76707
;
$color-yellow
:
#f59f00
;
$color-lime
:
#74b816
;
$color-green
:
#2fb344
;
$color-teal
:
#0ca678
;
$color-cyan
:
#17a2b8
;
$text-secondary
:
$gray-600
!
default
;
$text-secondary-light
:
$gray-500
!
default
;
$text-secondary-dark
:
$gray-700
!
default
;
...
...
@@ -190,14 +202,21 @@ $border-color-translucent: rgba(4, 32, 69, 0.14);
$border-dark-color
:
$gray-400
!
default
;
$border-dark-color-translucent
:
rgba
(
4
,
32
,
69
,
0
.27
);
$border-active-color
:
mix
(
$text-secondary
,
#ffffff
,
percentage
(
$border-active-opacity
))
!
default
;
$border-active-color-translucent
:
rgba
(
$text-secondary
,
$border-active-opacity
)
!
default
;
$border-active-color
:
mix
(
$text-secondary
,
#ffffff
,
percentage
(
$border-active-opacity
)
)
!
default
;
$border-active-color-translucent
:
rgba
(
$text-secondary
,
$border-active-opacity
)
!
default
;
$active-bg
:
rgba
(
var
(
--
#{
$prefix
}
primary-rgb
)
,
0
.04
)
!
default
;
$active-color
:
var
(
--
#{
$prefix
}
primary
)
!
default
;
$active-border-color
:
var
(
--
#{
$prefix
}
primary
)
!
default
;
$hover-bg
:
rgba
(
var
(
--
#{
$prefix
}
secondary-rgb
)
,
0
.04
)
!
default
;
$hover-bg
:
rgba
(
var
(
--
#{
$prefix
}
text-
secondary-rgb
)
,
0
.04
)
!
default
;
$disabled-bg
:
var
(
--
#{
$prefix
}
bg-surface-secondary
)
!
default
;
$disabled-color
:
var
(
--
#{
$prefix
}
gray-300
)
!
default
;
...
...
@@ -269,7 +288,10 @@ $gray-colors: (
gray-900
:
$gray-900
,
)
!
default
;
$theme-colors
:
map-merge
(
$theme-colors
,
map-merge
(
$extra-colors
,
$social-colors
));
$theme-colors
:
map-merge
(
$theme-colors
,
map-merge
(
$extra-colors
,
$social-colors
)
);
// Borders
$border-width
:
1px
!
default
;
...
...
@@ -297,8 +319,9 @@ $kbd-padding-x: 0.5rem !default;
$kbd-padding-y
:
0
.25rem
!
default
;
$kbd-font-weight
:
var
(
--
#{
$prefix
}
font-weight-medium
)
!
default
;
$kbd-font-size
:
var
(
--
#{
$prefix
}
font-size-h5
)
!
default
;
$kbd-border
:
var
(
--
#{
$prefix
}
border-width
)
var
(
--
#{
$prefix
}
border-style
)
var
(
--
#{
$prefix
}
border-color
)
!
default
;
$kbd-color
:
var
(
--
#{
$prefix
}
secondary-dark
)
!
default
;
$kbd-border
:
var
(
--
#{
$prefix
}
border-width
)
var
(
--
#{
$prefix
}
border-style
)
var
(
--
#{
$prefix
}
border-color
)
!
default
;
$kbd-color
:
var
(
--
#{
$prefix
}
text-secondary-dark
)
!
default
;
$kbd-bg
:
var
(
--
#{
$prefix
}
code-bg
)
!
default
;
$kbd-border-radius
:
var
(
--
#{
$prefix
}
border-radius
)
!
default
;
...
...
@@ -315,8 +338,8 @@ $avatar-sizes: (
)
!
default
;
$avatar-border-radius
:
var
(
--
#{
$prefix
}
border-radius
)
!
default
;
$avatar-font-size
:
$h4-font-size
!
default
;
$avatar-list-spacing
:
-.5
;
$avatar-box-shadow
:
var
(
--
#{
$prefix
}
box-shadow-border
)
!
default
;
$avatar-list-spacing
:
-.5
;
$link-decoration
:
none
!
default
;
$link-hover-decoration
:
underline
!
default
;
...
...
@@ -330,12 +353,13 @@ $caret-width: 0.36em !default;
$caret-spacing
:
0
.4em
!
default
;
//Sizing
$page-padding-x
:
var
(
--
#{
$prefix
}
spacer-3
)
!
default
;
$page-padding
:
var
(
--
#{
$prefix
}
spacer-3
)
!
default
;
$page-padding-sm
:
var
(
--
#{
$prefix
}
spacer-2
)
!
default
;
$page-padding-y
:
var
(
--
#{
$prefix
}
spacer-4
)
!
default
;
// Sizing
$container-padding-x
:
calc
(
var
(
--
#{
$prefix
}
page-padding
-x
)
*
2
)
!
default
;
$grid-gutter-width
:
var
(
--
#{
$prefix
}
page-padding
-x
)
!
default
;
$container-padding-x
:
calc
(
var
(
--
#{
$prefix
}
page-padding
)
*
2
)
!
default
;
$grid-gutter-width
:
var
(
--
#{
$prefix
}
page-padding
)
!
default
;
// Grid
$grid-gutter-width
:
1rem
!
default
;
...
...
@@ -371,7 +395,11 @@ $spacers: (
8
:
$spacer-8
,
)
!
default
;
$negative-spacers
:
if
(
$enable-negative-margins
,
negativify-map
(
$spacers
)
,
null
)
!
default
;
$negative-spacers
:
if
(
$enable-negative-margins
,
negativify-map
(
$spacers
)
,
null
)
!
default
;
// Sizes
$size-spacers
:
(
...
...
@@ -410,7 +438,6 @@ $aspect-ratios: (
// Shadows
$box-shadow
:
rgba
(
var
(
--
#{
$prefix
}
body-color-rgb
)
,
0
.04
)
0
2px
4px
0
!
default
;
$box-shadow-border
:
inset
0
0
0
1px
var
(
--
#{
$prefix
}
border-color-translucent
)
!
default
;
$box-shadow-transparent
:
0
0
0
0
transparent
!
default
;
$box-shadow-border
:
inset
0
0
0
1px
var
(
--
#{
$prefix
}
border-color-translucent
)
!
default
;
$box-shadow-input
:
0
1px
1px
rgba
(
var
(
--
#{
$prefix
}
body-color-rgb
)
,
0
.06
)
!
default
;
...
...
@@ -442,7 +469,11 @@ $focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color
$transition-time
:
0
.3s
!
default
;
// Overlay
$overlay-gradient
:
linear-gradient
(
180deg
,
rgba
(
0
,
0
,
0
,
0
)
0%
,
rgba
(
0
,
0
,
0
,
0
.6
)
100%
)
!
default
;
$overlay-gradient
:
linear-gradient
(
180deg
,
rgba
(
0
,
0
,
0
,
0
)
0%
,
rgba
(
0
,
0
,
0
,
0
.6
)
100%
)
!
default
;
// Accordion
$accordion-bg
:
transparent
!
default
;
...
...
@@ -550,7 +581,7 @@ $card-ribbon-font-size: $h6-font-size !default;
$card-header-tabs-bg
:
var
(
--
#{
$prefix
}
bg-surface-tertiary
)
!
default
;
$cards-grid-gap
:
var
(
--
#{
$prefix
}
page-padding
-x
)
!
default
;
$cards-grid-gap
:
var
(
--
#{
$prefix
}
page-padding
)
!
default
;
$cards-grid-breakpoint
:
lg
!
default
;
// Carousel
...
...
@@ -619,7 +650,10 @@ $modal-fade-transform: translate(0, -1rem) !default;
$modal-content-border-color
:
transparent
!
default
;
$modal-content-bg
:
var
(
--
#{
$prefix
}
bg-surface
)
!
default
;
$modal-content-border-radius
:
var
(
--
#{
$prefix
}
border-radius-lg
)
!
default
;
$modal-content-inner-border-radius
:
subtract
(
var
(
--
#{
$prefix
}
modal-border-radius
)
,
1px
)
!
default
;
$modal-content-inner-border-radius
:
subtract
(
var
(
--
#{
$prefix
}
modal-border-radius
)
,
1px
)
!
default
;
$modal-header-padding
:
1
.5rem
!
default
;
$modal-header-height
:
3
.5rem
!
default
;
...
...
@@ -645,13 +679,11 @@ $nav-link-padding-x: 0.75rem !default;
$nav-link-color
:
var
(
--
#{
$prefix
}
secondary
)
!
default
;
$nav-link-disabled-color
:
var
(
--
#{
$prefix
}
disabled-color
)
!
default
;
$nav-link-icon-size
:
$icon-size
!
default
;
$nav-link-icon-color
:
inherit
!
default
;
$nav-link-icon-color
:
var
(
--
#{
$prefix
}
icon-color
)
!
default
;
$nav-pills-link-active-color
:
var
(
--
#{
$prefix
}
primary
)
!
default
;
$nav-pills-link-active-bg
:
var
(
--
#{
$prefix
}
active-bg
)
!
default
;
$nav-underline-link-active-color
:
var
(
--
#{
$prefix
}
primary
)
!
default
;
$nav-bordered-border-color
:
var
(
--
#{
$prefix
}
border-color
)
!
default
;
$nav-bordered-border-width
:
var
(
--
#{
$prefix
}
border-width
)
!
default
;
$nav-bordered-link-active-color
:
var
(
--
#{
$prefix
}
primary
)
!
default
;
...
...
@@ -661,7 +693,8 @@ $nav-bordered-margin-x: 1.25rem !default;
$nav-tabs-border-color
:
var
(
--
#{
$prefix
}
border-color
)
!
default
;
$nav-tabs-border-radius
:
var
(
--
#{
$prefix
}
border-radius
)
!
default
;
$nav-tabs-link-hover-border-color
:
$nav-tabs-border-color
$nav-tabs-border-color
$nav-tabs-border-color
!
default
;
$nav-tabs-link-hover-border-color
:
$nav-tabs-border-color
$nav-tabs-border-color
$nav-tabs-border-color
!
default
;
$nav-tabs-link-active-border-color
:
$nav-tabs-link-hover-border-color
!
default
;
$nav-tabs-link-active-color
:
var
(
--
#{
$prefix
}
body-color
)
!
default
;
$nav-tabs-bg
:
var
(
--
#{
$prefix
}
bg-surface-tertiary
)
!
default
;
...
...
@@ -670,17 +703,14 @@ $nav-tabs-bg: var(--#{$prefix}bg-surface-tertiary) !default;
$navbar-height
:
3
.5rem
!
default
;
$navbar-padding-y
:
0
.25rem
!
default
;
$navbar-light-bg
:
var
(
--
#{
$prefix
}
bg-surface
)
!
default
;
$navbar-light-color
:
var
(
--
#{
$prefix
}
secondary
)
!
default
;
$navbar-border-width
:
var
(
--
#{
$prefix
}
border-width
)
!
default
;
$navbar-border-color
:
var
(
--
#{
$prefix
}
border-color
)
!
default
;
$navbar-light-color
:
var
(
--
#{
$prefix
}
body-color
)
!
default
;
$navbar-light-brand-color
:
var
(
--
#{
$prefix
}
body-color
)
!
default
;
$navbar-light-border-color
:
var
(
--
#{
$prefix
}
border-color
)
!
default
;
$navbar-light-border-width
:
var
(
--
#{
$prefix
}
border-width
)
!
default
;
$navbar-light-active-color
:
var
(
--
#{
$prefix
}
body-color
)
!
default
;
$navbar-light-active-color
:
var
(
--
#{
$prefix
}
body-color
)
color
!
default
;
$navbar-light-disabled-color
:
var
(
--
#{
$prefix
}
disabled-color
)
!
default
;
$navbar-light-hover-bg
:
$hover-bg
!
default
;
$navbar-light-active-bg
:
null
!
default
;
$navbar-light-active-border-color
:
var
(
--
#{
$prefix
}
primary
)
!
default
;
$navbar-light-active-color
:
red
!
default
;
$navbar-light-active-bg
:
rgba
(
0
,
0
,
0
,
0
.06
)
!
default
;
$navbar-dark-color
:
rgba
(
$white
,
$text-secondary-opacity
)
!
default
;
$navbar-dark-brand-color
:
$white
!
default
;
...
...
@@ -701,10 +731,9 @@ $navbar-toggler-animation-time: 0.2s !default;
$navbar-toggler-focus-width
:
0
!
default
;
$navbar-overlap-height
:
9rem
!
default
;
// Navbar nav
$navbar-nav-gap
:
0
.25rem
!
default
;
$navbar-nav-link-padding-x
:
0
.5rem
!
default
;
$navbar-nav-link-padding-y
:
0
.5rem
!
default
;
$navbar-nav-link-padding-x
:
$nav-link-padding-x
!
default
;
$navbar-active-border-color
:
var
(
--
#{
$prefix
}
primary
)
!
default
;
// Sidebar
$sidebar-width
:
15rem
!
default
;
...
...
@@ -769,7 +798,9 @@ $table-th-color: var(--#{$prefix}secondary) !default;
$table-th-bg
:
var
(
--
#{
$prefix
}
bg-surface-tertiary
)
!
default
;
$table-striped-order
:
even
!
default
;
$table-striped-bg
:
var
(
--
#{
$prefix
}
bg-surface-tertiary
)
!
default
;
$table-group-separator-color
:
var
(
--
#{
$prefix
}
border-color-translucent
)
!
default
;
$table-group-separator-color
:
var
(
--
#{
$prefix
}
border-color-translucent
)
!
default
;
$table-sort-bg-image
:
url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'><path d='M5 7l3 -3l3 3'/><path d='M5 10l3 3l3 -3'/></svg>")
!
default
;
$table-sort-asc-bg-image
:
url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='M5 7l3 3l3 -3'/></svg>")
!
default
;
...
...
@@ -802,7 +833,9 @@ $list-group-active-color: inherit !default;
$input-bg
:
var
(
--
#{
$prefix
}
bg-forms
)
!
default
;
$input-disabled-bg
:
$disabled-bg
!
default
;
$input-border-color
:
var
(
--
#{
$prefix
}
border-color
)
!
default
;
$input-border-color-translucent
:
var
(
--
#{
$prefix
}
border-color-translucent
)
!
default
;
$input-border-color-translucent
:
var
(
--
#{
$prefix
}
border-color-translucent
)
!
default
;
$input-placeholder-color
:
$text-secondary-light
!
default
;
$input-group-addon-bg
:
var
(
--
#{
$prefix
}
bg-surface-secondary
)
!
default
;
...
...
@@ -811,12 +844,13 @@ $input-group-addon-color: var(--#{$prefix}secondary) !default;
$input-border-radius
:
var
(
--
#{
$prefix
}
border-radius
)
!
default
;
// Forms
$form-check-margin-bottom
:
0
.75rem
!
default
;
$form-check-margin-bottom
:
.75rem
!
default
;
$form-check-padding-start
:
2rem
!
default
;
$form-check-input-width
:
1
.25rem
!
default
;
$form-check-input-bg
:
var
(
--
#{
$prefix
}
bg-forms
)
!
default
;
$form-check-input-border
:
var
(
--
#{
$prefix
}
border-width
)
var
(
--
#{
$prefix
}
border-style
)
$input-border-color-translucent
!
default
;
$form-check-input-border
:
var
(
--
#{
$prefix
}
border-width
)
var
(
--
#{
$prefix
}
border-style
)
$input-border-color-translucent
!
default
;
$form-check-input-border-radius
:
var
(
--
#{
$prefix
}
border-radius
)
!
default
;
$form-check-input-box-shadow
:
$input-box-shadow
!
default
;
...
...
src/scss/layout/_navbar.scss
浏览文件 @
1ca12745
@mixin
navbar-vertical
{
width
:
$sidebar-width
;
position
:
fixed
;
top
:
0
;
left
:
0
;
bottom
:
0
;
z-index
:
$zindex-fixed
;
align-items
:
flex-start
;
overflow-y
:
scroll
;
padding
:
0
;
@include
transition
(
transform
$transition-time
);
&
.navbar-right
{
left
:
auto
;
right
:
0
;
}
.navbar-brand
{
padding
:
((
$navbar-height
-
$navbar-brand-image-height
)
*
0
.5
)
0
;
justify-content
:
center
;
}
.navbar-collapse
{
align-items
:
stretch
;
}
.navbar-nav
{
flex-direction
:
column
;
flex-grow
:
1
;
min-height
:
auto
;
.nav-link
{
padding-top
:
0
.5rem
;
padding-bottom
:
0
.5rem
;
}
}
>
[
class
^=
"container"
]
{
flex-direction
:
column
;
align-items
:
stretch
;
min-height
:
100%
;
justify-content
:
flex-start
;
padding
:
0
;
}
~
.page
{
padding-left
:
$sidebar-width
;
[
class
^=
"container"
]
{
padding-left
:
1
.5rem
;
padding-right
:
1
.5rem
;
}
}
&
.navbar-right
~
.page
{
padding-left
:
0
;
padding-right
:
$sidebar-width
;
}
@mixin
navbar-vertical-nav
{
.navbar-collapse
{
flex-direction
:
column
;
[
class
^=
"container"
]
{
flex-direction
:
column
;
align-items
:
stretch
;
padding
:
0
;
}
.navbar-nav
{
...
...
@@ -70,7 +14,7 @@
margin-right
:
0
;
.nav-link
{
padding
:
0
.5rem
calc
(
#{
$container-padding-x
}
/
2
);
padding
:
.5rem
calc
(
#{
$container-padding-x
}
/
2
);
justify-content
:
flex-start
;
}
}
...
...
@@ -129,16 +73,14 @@
Navbar
*/
.navbar
{
--
#{
$prefix
}
navbar-bg
:
#{
$navbar-light-bg
}
;
--
#{
$prefix
}
navbar-border-width
:
#{
$navbar-
light-
border-width
}
;
--
#{
$prefix
}
navbar-active-border-color
:
#{
$navbar-
light-
active-border-color
}
;
--
#{
$prefix
}
navbar-bg
:
var
(
--
#{
$prefix
}
bg-surface
)
;
--
#{
$prefix
}
navbar-border-width
:
#{
$navbar-border-width
}
;
--
#{
$prefix
}
navbar-active-border-color
:
#{
$navbar-active-border-color
}
;
--
#{
$prefix
}
navbar-active-bg
:
#{
$navbar-light-active-bg
}
;
--
#{
$prefix
}
navbar-hover-bg
:
#{
$navbar-light-hover-bg
}
;
--
#{
$prefix
}
navbar-border-color
:
#{
$navbar-light-border-color
}
;
--
#{
$prefix
}
navbar-nav-gap
:
#{
$navbar-nav-gap
}
;
--
#{
$prefix
}
navbar-height
:
#{
$navbar-height
}
;
--
#{
$prefix
}
navbar-color
:
var
(
--
#{
$prefix
}
body-color
)
;
--
#{
$prefix
}
navbar-border-color
:
#{
$navbar-border-color
}
;
align-items
:
stretch
;
min-height
:
var
(
--
#{
$prefix
}
navbar-height
)
;
min-height
:
$navbar-height
;
box-shadow
:
inset
0
calc
(
-1
*
var
(
--
#{
$prefix
}
navbar-border-width
))
0
0
var
(
--
#{
$prefix
}
navbar-border-color
);
background
:
var
(
--
#{
$prefix
}
navbar-bg
);
color
:
var
(
--
#{
$prefix
}
navbar-color
);
...
...
@@ -155,47 +97,30 @@ Navbar
position
:
absolute
;
z-index
:
$zindex-fixed
;
}
.navbar-nav
{
min-height
:
subtract
(
$navbar-height
,
2
*
$navbar-padding-y
);
.nav-link
{
position
:
relative
;
min-width
:
2rem
;
min-height
:
2rem
;
justify-content
:
center
;
border-radius
:
var
(
--
#{
$prefix
}
border-radius
);
.badge
{
position
:
absolute
;
top
:
.375rem
;
right
:
.375rem
;
transform
:
translate
(
50%
,
-50%
);
}
}
}
}
/**
Navbar nav
*/
.navbar-nav
{
gap
:
var
(
--
#{
$prefix
}
navbar-nav-gap
);
margin
:
0
;
padding
:
0
;
align-items
:
stretch
;
.nav-item
{
display
:
flex
;
flex-direction
:
column
;
justify-content
:
center
;
}
.nav-link
{
transition
:
$transition-time
background-color
;
position
:
relative
;
min-width
:
2rem
;
min-height
:
2rem
;
border-radius
:
var
(
--
#{
$prefix
}
border-radius
);
.badge
{
position
:
absolute
;
top
:
0
.375rem
;
right
:
0
.375rem
;
transform
:
translate
(
50%
,
-50%
);
}
&
.active
{
background-color
:
var
(
--
#{
$prefix
}
navbar-active-bg
);
}
&
:hover
,
&
:focus
,
&
.show
{
background-color
:
var
(
--
#{
$prefix
}
navbar-hover-bg
);
}
}
}
.navbar-expand
{
...
...
@@ -204,9 +129,9 @@ Navbar nav
$infix
:
breakpoint-infix
(
$next
,
$grid-breakpoints
);
&
#{
$infix
}
{
//
@include media-breakpoint-down(breakpoint-next($breakpoint)) {
// @include navbar-vertical
;
//
}
@include
media-breakpoint-down
(
breakpoint-next
(
$breakpoint
))
{
@include
navbar-vertical-nav
;
}
@include
media-breakpoint-up
(
$next
)
{
.navbar-collapse
{
...
...
@@ -214,56 +139,40 @@ Navbar nav
flex
:
1
1
auto
;
}
.nav-item.active
{
position
:
relative
;
&
:after
{
content
:
""
;
position
:
absolute
;
left
:
0
;
right
:
0
;
bottom
:
-.25rem
;
border
:
0
var
(
--
#{
$prefix
}
border-style
)
var
(
--
#{
$prefix
}
navbar-active-border-color
);
border-bottom-width
:
2px
;
}
}
&
.navbar-vertical
{
box-shadow
:
inset
calc
(
-1
*
var
(
--
#{
$prefix
}
navbar-border-width
))
0
0
0
var
(
--
#{
$prefix
}
navbar-border-color
);
&
.navbar-right
{
box-shadow
:
inset
calc
(
1
*
var
(
--
#{
$prefix
}
navbar-border-width
))
0
0
0
var
(
--
#{
$prefix
}
navbar-border-color
);
}
}
&
.navbar-vertical
{
~
.navbar
,
~
.page-wrapper
{
margin-left
:
$sidebar-width
;
}
&
.navbar-right
{
~
.navbar
,
~
.page-wrapper
{
margin-left
:
0
;
margin-right
:
$sidebar-width
;
}
}
}
.navbar-nav
{
.nav-link
{
&
:before
{
content
:
""
;
height
:
100%
;
left
:
50%
;
min-height
:
var
(
--
#{
$prefix
}
navbar-height
);
position
:
absolute
;
top
:
50%
;
transform
:
translateX
(
-50%
)
translateY
(
-50%
);
width
:
100%
;
}
&
.active
{
background-color
:
var
(
--
#{
$prefix
}
navbar-active-bg
);
&
:after
{
content
:
""
;
background
:
var
(
--
#{
$prefix
}
navbar-active-border-color
);
border-radius
:
var
(
--
#{
$prefix
}
border-radius
);
bottom
:
calc
(
50%
-
calc
(
var
(
--
tblr-navbar-height
)
/
2
));
height
:
2px
;
position
:
absolute
;
right
:
50%
;
transform
:
translate
(
50%
,
-50%
);
width
:
100%
;
z-index
:
1
;
}
}
&
.navbar-vertical.navbar-right
{
~
.navbar
,
~
.page-wrapper
{
margin-left
:
0
;
margin-right
:
$sidebar-width
;
}
}
}
...
...
@@ -306,12 +215,7 @@ Navbar toggler
width
:
1
.25em
;
background
:
currentColor
;
border-radius
:
10px
;
@include
transition
(
top
$navbar-toggler-animation-time
$navbar-toggler-animation-time
,
bottom
$navbar-toggler-animation-time
$navbar-toggler-animation-time
,
transform
$navbar-toggler-animation-time
,
opacity
0s
$navbar-toggler-animation-time
);
@include
transition
(
top
$navbar-toggler-animation-time
$navbar-toggler-animation-time
,
bottom
$navbar-toggler-animation-time
$navbar-toggler-animation-time
,
transform
$navbar-toggler-animation-time
,
opacity
0s
$navbar-toggler-animation-time
);
position
:
relative
;
&
:before
,
...
...
@@ -328,11 +232,11 @@ Navbar toggler
}
&
:before
{
top
:
-
0
.45em
;
top
:
-.45em
;
}
&
:after
{
bottom
:
-
0
.45em
;
bottom
:
-.45em
;
}
.navbar-toggler
[
aria-expanded
=
"true"
]
&
{
...
...
@@ -359,6 +263,19 @@ Navbar transparent
background
:
transparent
!
important
;
}
/**
Navbar nav
*/
.navbar-nav
{
align-items
:
stretch
;
.nav-item
{
display
:
flex
;
flex-direction
:
column
;
justify-content
:
center
;
}
}
/**
Navbar side
*/
...
...
@@ -382,7 +299,65 @@ Navbar vertical
&
#{
$infix
}
{
@include
media-breakpoint-up
(
$next
)
{
@include
navbar-vertical
;
width
:
$sidebar-width
;
position
:
fixed
;
top
:
0
;
left
:
0
;
bottom
:
0
;
z-index
:
$zindex-fixed
;
align-items
:
flex-start
;
@include
transition
(
transform
$transition-time
);
overflow-y
:
scroll
;
padding
:
0
;
&
.navbar-right
{
left
:
auto
;
right
:
0
;
}
.navbar-brand
{
padding
:
((
$navbar-height
-
$navbar-brand-image-height
)
*
.5
)
0
;
justify-content
:
center
;
}
.navbar-collapse
{
align-items
:
stretch
;
}
.navbar-nav
{
flex-direction
:
column
;
flex-grow
:
1
;
min-height
:
auto
;
.nav-link
{
padding-top
:
.5rem
;
padding-bottom
:
.5rem
;
}
}
>
[
class
^=
"container"
]
{
flex-direction
:
column
;
align-items
:
stretch
;
min-height
:
100%
;
justify-content
:
flex-start
;
padding
:
0
;
}
~
.page
{
padding-left
:
$sidebar-width
;
[
class
^=
"container"
]
{
padding-left
:
1
.5rem
;
padding-right
:
1
.5rem
;
}
}
&
.navbar-right
~
.page
{
padding-left
:
0
;
padding-right
:
$sidebar-width
;
}
@include
navbar-vertical-nav
;
}
}
}
...
...
@@ -390,6 +365,7 @@ Navbar vertical
}
}
.navbar-overlap
{
&
:after
{
content
:
""
;
...
...
@@ -402,4 +378,4 @@ Navbar vertical
z-index
:
-1
;
box-shadow
:
inherit
;
}
}
}
\ No newline at end of file
src/scss/layout/_page.scss
浏览文件 @
1ca12745
...
...
@@ -38,7 +38,7 @@
.page-body-card
{
background
:
var
(
--
#{
$prefix
}
bg-surface
);
border-top
:
var
(
--
#{
$prefix
}
border-width
)
var
(
--
#{
$prefix
}
border-style
)
$card-border-color
;
padding
:
var
(
--
#{
$prefix
}
page-padding
-x
)
0
;
padding
:
var
(
--
#{
$prefix
}
page-padding
)
0
;
margin-bottom
:
0
;
flex
:
1
;
...
...
src/scss/layout/_root.scss
浏览文件 @
1ca12745
...
...
@@ -48,8 +48,11 @@
--
#{
$prefix
}
dark-mode-border-color-active
:
#{
$border-color-active-dark
}
;
--
#{
$prefix
}
dark-mode-border-dark-color
:
#{
$border-dark-color-dark
}
;
--
#{
$prefix
}
page-padding
-x
:
#{
$page-padding-x
}
;
--
#{
$prefix
}
page-padding
:
#{
$page-padding
}
;
--
#{
$prefix
}
page-padding-y
:
#{
$page-padding-y
}
;
@include
media-breakpoint-down
(
$cards-grid-breakpoint
)
{
--
#{
$prefix
}
page-padding
:
#{
$page-padding-sm
}
;
}
@each
$name
,
$value
in
$font-weights
{
--
#{
$prefix
}
font-weight-
#{
$name
}
:
#{
$value
}
;
...
...
src/scss/ui/_timeline.scss
浏览文件 @
1ca12745
...
...
@@ -15,14 +15,14 @@
position
:
relative
;
&
:not
(
:last-child
)
{
margin-bottom
:
var
(
--
#{
$prefix
}
page-padding
-x
);
margin-bottom
:
var
(
--
#{
$prefix
}
page-padding
);
&
:before
{
content
:
""
;
position
:
absolute
;
top
:
var
(
--
#{
$prefix
}
timeline-icon-size
);
left
:
calc
(
var
(
--
#{
$prefix
}
timeline-icon-size
)
/
2
);
bottom
:
calc
(
-1
*
var
(
--
#{
$prefix
}
page-padding
-x
));
bottom
:
calc
(
-1
*
var
(
--
#{
$prefix
}
page-padding
));
width
:
var
(
--
#{
$prefix
}
border-width
);
background-color
:
var
(
--
#{
$prefix
}
border-color
);
border-radius
:
var
(
--
#{
$prefix
}
border-radius
);
...
...
@@ -44,7 +44,7 @@
}
.timeline-event-card
{
margin-left
:
calc
(
var
(
--
#{
$prefix
}
timeline-icon-size
,
$avatar-size
)
+
var
(
--
#{
$prefix
}
page-padding
-x
));
margin-left
:
calc
(
var
(
--
#{
$prefix
}
timeline-icon-size
,
$avatar-size
)
+
var
(
--
#{
$prefix
}
page-padding
));
}
//
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录