Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
知鸟1号
tabler
提交
774c8800
T
tabler
项目概览
知鸟1号
/
tabler
与 Fork 源项目一致
从无法访问的项目Fork
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
T
tabler
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
774c8800
编写于
2月 28, 2018
作者:
C
codecalm
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
styleguide
上级
1d9763c4
变更
7
隐藏空白更改
内联
并排
Showing
7 changed file
with
102 addition
and
18 deletion
+102
-18
_config.yml
_config.yml
+17
-1
src/_data/commits.yml
src/_data/commits.yml
+0
-1
src/_docs/styleguide.md
src/_docs/styleguide.md
+54
-0
src/assets/scss/_variables.scss
src/assets/scss/_variables.scss
+5
-2
src/assets/scss/dashboard/_colors.scss
src/assets/scss/dashboard/_colors.scss
+7
-10
src/assets/scss/dashboard/_type.scss
src/assets/scss/dashboard/_type.scss
+16
-3
src/assets/scss/dashboard/_utilities.scss
src/assets/scss/dashboard/_utilities.scss
+3
-1
未找到文件。
_config.yml
浏览文件 @
774c8800
...
...
@@ -68,7 +68,7 @@ author:
docs-menu
:
-
title
:
Getting started
pages
:
[
index
]
pages
:
[
index
,
styleguide
]
-
title
:
Components
pages
:
[
alerts
,
avatars
,
buttons
,
cards
,
charts
,
form-components
,
tags
,
typography
]
...
...
@@ -142,6 +142,22 @@ theme-colors:
# hex: '#343a40'
# name: Dark
color_variants
:
-
name
:
'
Default'
suffix
:
'
'
-
name
:
'
Dark'
suffix
:
-dark
-
name
:
'
Darker'
suffix
:
-darker
-
name
:
'
Darkest'
suffix
:
-darkest
-
name
:
'
Light'
suffix
:
-light
-
name
:
'
Lighter'
suffix
:
-lighter
-
name
:
'
Lightest'
suffix
:
-lightest
social-buttons
:
facebook
:
icon
:
fa fa-facebook
...
...
src/_data/commits.yml
浏览文件 @
774c8800
---
-
commiter
:
name
:
Earvin Yoakley
position
:
CEO
...
...
src/_docs/styleguide.md
0 → 100644
浏览文件 @
774c8800
---
title
:
Styleguide
icon
:
fe fe-image
description
:
Welcome to Tabler style guide. If you're new here, have a look through some of the topics on the side.
---
### Contextual colors
A background fill can be applied to a container using one of the
`.bg-[color]`
classes.
{% example html %}
{% for color in site.theme-colors %}
<div
class=
"d-flex align-items-center mb-4"
>
<div
class=
"w-7 h-7 bg-{{ color[0] }} rounded mr-4"
></div>
<div>
<strong>
{{ color[1].name }}
</strong><br
/>
<code>
.bg-{{ color[0] }}
</code>
</div>
</div>
{% endfor %}
{% endexample %}
### Other colors
Instead of using contextual classes you can use ordinary color names.
{% example html %}
{% for color in site.colors %}
<div
class=
"d-flex align-items-center mb-4"
>
<div
class=
"w-7 h-7 bg-{{ color[0] }} rounded mr-4"
></div>
<div>
<strong>
{{ color[1].name }}
</strong><br
/>
<code>
.bg-{{ color[0] }}
</code>
</div>
</div>
{% endfor %}
{% endexample %}
### Tinting backgrounds
Translucent background fills to shade an element against a background. You can use one of few suffixes:
`-darkest`
,
`-darker`
,
`-dark`
,
`-lightest`
,
`-lighter`
or
`-light`
.
{% example html %}
{% for variant in site.color_variants %}
<div
class=
"d-flex align-items-center mb-4"
>
<div
class=
"w-7 h-7 bg-blue{{ variant.suffix }} rounded mr-4"
></div>
<div>
<strong>
{{ variant.name }} blue
</strong><br
/>
<code>
.bg-blue{{ variant.suffix }}
</code>
</div>
</div>
{% endfor %}
{% endexample %}
src/assets/scss/_variables.scss
浏览文件 @
774c8800
...
...
@@ -126,7 +126,7 @@ $body-color: $gray-700;
// Code
$code-font-size
:
85%
;
$code-color
:
$gray-600
;
$code-color
:
inherit
;
$kbd-color
:
#fff
;
$kbd-bg
:
$gray-800
;
...
...
@@ -298,4 +298,7 @@ $badge-font-weight: 600;
$flag-icons
:
(
'ad'
,
'ae'
,
'af'
,
'ag'
,
'ai'
,
'al'
,
'am'
,
'ao'
,
'aq'
,
'ar'
,
'as'
,
'at'
,
'au'
,
'aw'
,
'ax'
,
'az'
,
'ba'
,
'bb'
,
'bd'
,
'be'
,
'bf'
,
'bg'
,
'bh'
,
'bi'
,
'bj'
,
'bl'
,
'bm'
,
'bn'
,
'bo'
,
'bq'
,
'br'
,
'bs'
,
'bt'
,
'bv'
,
'bw'
,
'by'
,
'bz'
,
'ca'
,
'cc'
,
'cd'
,
'cf'
,
'cg'
,
'ch'
,
'ci'
,
'ck'
,
'cl'
,
'cm'
,
'cn'
,
'co'
,
'cr'
,
'cu'
,
'cv'
,
'cw'
,
'cx'
,
'cy'
,
'cz'
,
'de'
,
'dj'
,
'dk'
,
'dm'
,
'do'
,
'dz'
,
'ec'
,
'ee'
,
'eg'
,
'eh'
,
'er'
,
'es'
,
'et'
,
'eu'
,
'fi'
,
'fj'
,
'fk'
,
'fm'
,
'fo'
,
'fr'
,
'ga'
,
'gb-eng'
,
'gb-nir'
,
'gb-sct'
,
'gb-wls'
,
'gb'
,
'gd'
,
'ge'
,
'gf'
,
'gg'
,
'gh'
,
'gi'
,
'gl'
,
'gm'
,
'gn'
,
'gp'
,
'gq'
,
'gr'
,
'gs'
,
'gt'
,
'gu'
,
'gw'
,
'gy'
,
'hk'
,
'hm'
,
'hn'
,
'hr'
,
'ht'
,
'hu'
,
'id'
,
'ie'
,
'il'
,
'im'
,
'in'
,
'io'
,
'iq'
,
'ir'
,
'is'
,
'it'
,
'je'
,
'jm'
,
'jo'
,
'jp'
,
'ke'
,
'kg'
,
'kh'
,
'ki'
,
'km'
,
'kn'
,
'kp'
,
'kr'
,
'kw'
,
'ky'
,
'kz'
,
'la'
,
'lb'
,
'lc'
,
'li'
,
'lk'
,
'lr'
,
'ls'
,
'lt'
,
'lu'
,
'lv'
,
'ly'
,
'ma'
,
'mc'
,
'md'
,
'me'
,
'mf'
,
'mg'
,
'mh'
,
'mk'
,
'ml'
,
'mm'
,
'mn'
,
'mo'
,
'mp'
,
'mq'
,
'mr'
,
'ms'
,
'mt'
,
'mu'
,
'mv'
,
'mw'
,
'mx'
,
'my'
,
'mz'
,
'na'
,
'nc'
,
'ne'
,
'nf'
,
'ng'
,
'ni'
,
'nl'
,
'no'
,
'np'
,
'nr'
,
'nu'
,
'nz'
,
'om'
,
'pa'
,
'pe'
,
'pf'
,
'pg'
,
'ph'
,
'pk'
,
'pl'
,
'pm'
,
'pn'
,
'pr'
,
'ps'
,
'pt'
,
'pw'
,
'py'
,
'qa'
,
're'
,
'ro'
,
'rs'
,
'ru'
,
'rw'
,
'sa'
,
'sb'
,
'sc'
,
'sd'
,
'se'
,
'sg'
,
'sh'
,
'si'
,
'sj'
,
'sk'
,
'sl'
,
'sm'
,
'sn'
,
'so'
,
'sr'
,
'ss'
,
'st'
,
'sv'
,
'sx'
,
'sy'
,
'sz'
,
'tc'
,
'td'
,
'tf'
,
'tg'
,
'th'
,
'tj'
,
'tk'
,
'tl'
,
'tm'
,
'tn'
,
'to'
,
'tr'
,
'tt'
,
'tv'
,
'tw'
,
'tz'
,
'ua'
,
'ug'
,
'um'
,
'un'
,
'us'
,
'uy'
,
'uz'
,
'va'
,
'vc'
,
've'
,
'vg'
,
'vi'
,
'vn'
,
'vu'
,
'wf'
,
'ws'
,
'ye'
,
'yt'
,
'za'
,
'zm'
,
'zw'
);
// Hr
$hr-border-color
:
$border-color
;
\ No newline at end of file
$hr-border-color
:
$border-color
;
// Thumbnails
$thumbnail-bg
:
#fff
\ No newline at end of file
src/assets/scss/dashboard/_colors.scss
浏览文件 @
774c8800
.colors-list
{
display
:
block
;
}
.colors-list-item
{
display
:
inline-block
;
width
:
1rem
;
height
:
1rem
;
border-radius
:
3px
;
vertical-align
:
middle
;
@each
$color
,
$value
in
$colors
{
@include
bg-variant
(
".bg-
#{
$color
}
-lightest"
,
mix
(
$value
,
#fff
,
10%
));
@include
bg-variant
(
".bg-
#{
$color
}
-lighter"
,
mix
(
$value
,
#fff
,
30%
));
@include
bg-variant
(
".bg-
#{
$color
}
-light"
,
mix
(
$value
,
#fff
,
70%
));
@include
bg-variant
(
".bg-
#{
$color
}
-dark"
,
mix
(
$value
,
#000
,
80%
));
@include
bg-variant
(
".bg-
#{
$color
}
-darker"
,
mix
(
$value
,
#000
,
40%
));
@include
bg-variant
(
".bg-
#{
$color
}
-darkest"
,
mix
(
$value
,
#000
,
20%
));
}
\ No newline at end of file
src/assets/scss/dashboard/_type.scss
浏览文件 @
774c8800
...
...
@@ -45,6 +45,20 @@ blockquote {
}
}
code
{
background
:
rgba
(
0
,
0
,
0
,
0
.025
);
border
:
1px
solid
rgba
(
#000
,
.05
);
border-radius
:
3px
;
padding
:
3px
;
pre
&
{
padding
:
0
;
border-radius
:
0
;
border
:
none
;
background
:
none
;
}
}
hr
{
margin-top
:
2rem
;
margin-bottom
:
2rem
;
...
...
@@ -67,16 +81,15 @@ img {
max-width
:
100%
;
}
.text-wrap
{
font-size
:
1rem
;
line-height
:
1
.66
;
>
:first-child
{
>
:first-child
{
margin-top
:
0
;
}
>
:last-child
{
>
:last-child
{
margin-bottom
:
0
;
}
...
...
src/assets/scss/dashboard/_utilities.scss
浏览文件 @
774c8800
...
...
@@ -24,6 +24,8 @@
}
}
.o-auto
{
overflow
:
auto
!
important
;
}
.o-auto
{
overflow
:
auto
!
important
;
}
.o-hidden
{
overflow
:
hidden
!
important
;
}
.shadow
{
box-shadow
:
0
1px
2px
0
rgba
(
0
,
0
,
0
,
0
.05
)
!
important
;
}
.shadow-none
{
box-shadow
:
none
!
important
;
}
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录