Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
知鸟1号
tabler
提交
2656fd1f
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,发现更多精彩内容 >>
未验证
提交
2656fd1f
编写于
12月 09, 2019
作者:
P
Paweł Kuna
提交者:
GitHub
12月 09, 2019
浏览文件
操作
浏览文件
下载
差异文件
Dev cursors badges colors (#410)
Dev cursors badges colors
上级
447a2f67
432a80a1
变更
7
隐藏空白更改
内联
并排
Showing
7 changed file
with
50 addition
and
53 deletion
+50
-53
pages/_data/docs.yml
pages/_data/docs.yml
+1
-0
pages/_docs/badges.md
pages/_docs/badges.md
+10
-2
pages/_docs/colors.md
pages/_docs/colors.md
+7
-0
pages/_docs/cursors.md
pages/_docs/cursors.md
+7
-0
pages/_includes/example/colors-table.html
pages/_includes/example/colors-table.html
+20
-0
pages/_plugins/jekyll-filters.rb
pages/_plugins/jekyll-filters.rb
+5
-0
pages/colors.html
pages/colors.html
+0
-51
未找到文件。
pages/_data/docs.yml
浏览文件 @
2656fd1f
...
...
@@ -7,6 +7,7 @@
-
page
:
buttons
-
page
:
cards
-
page
:
carousel
-
page
:
colors
-
page
:
cursors
-
page
:
charts
-
page
:
divider
...
...
pages/_docs/badges.md
浏览文件 @
2656fd1f
...
...
@@ -10,21 +10,25 @@ A small count and labeling component. Please read the [official Bootstrap docume
{% example %}
{% for color in site.colors %}
<span
class=
"badge
text-white
bg-{{ color[0] }}"
>
{{ color[0] }}
</span>
<span
class=
"badge bg-{{ color[0] }}"
>
{{ color[0] }}
</span>
{% endfor %}
{% endexample %}
### Pill badges
To make a pill bagde (with rounded corners) add
`.bagde-pill`
class.
{% example %}
{% for color in site.colors %}
<span
class=
"badge badge-pill
text-white
bg-{{ color[0] }}"
>
{{ forloop.index }}
</span>
<span
class=
"badge badge-pill bg-{{ color[0] }}"
>
{{ forloop.index }}
</span>
{% endfor %}
{% endexample %}
### Soft badges
Creates a soft variant of a corresponding contextual badge variation. You can click
[
here
](
{%
docs_url colors %}) to see the list of available colors.
{% example %}
{% for color in site.colors %}
<span
class=
"badge bg-{{ color[0] }}-lt"
>
{{ color[0] }}
</span>
...
...
@@ -34,6 +38,8 @@ A small count and labeling component. Please read the [official Bootstrap docume
### Links
Make a badge work as a link by putting it into an
`<a>`
element.
{% example %}
{% for color in site.colors %}
<a
href=
"#"
class=
"badge bg-{{ color[0] }}"
>
{{ color[0] }}
</a>
...
...
@@ -43,6 +49,8 @@ A small count and labeling component. Please read the [official Bootstrap docume
### Empty badges
If you don't want your badge to contain any text you can do it by leaving the html element empty.
{% example %}
{% for color in site.colors %}
<a
href=
"#"
class=
"badge bg-{{ color[0] }}"
></a>
...
...
pages/_docs/colors.md
浏览文件 @
2656fd1f
...
...
@@ -3,3 +3,10 @@ title: Colors
menu
:
docs.colors
---
## Base colors
{% include example/colors-table.html %}
## Light colors
{% include example/colors-table.html light=true %}
pages/_docs/cursors.md
浏览文件 @
2656fd1f
...
...
@@ -5,6 +5,13 @@ menu: docs.cursors
### Cursor utilities
-
`.cursor-auto`
- cursor style depends on what's inside element
-
`.cursor-pointer`
- pointing cursor
-
`.cursor-move`
- cursor showing that user can move something
-
`.cursor-not-allowed`
- cursor showing that user is not allowed to do something
-
`.cursor-zoom-in`
- cursor showing that user can zoom in
-
`.cursor-zoom-out`
- cursor showing that user can zoom out
{% example html %}
<div
class=
"row text-center"
>
<div
class=
"col-4 mb-3"
>
...
...
pages/_includes/example/colors-table.html
0 → 100644
浏览文件 @
2656fd1f
{% assign colors = include.colors | default: site.colors %}
{% assign light = include.light %}
<div
class=
"example"
>
<div
class=
"mb-n3"
>
{% for color in colors %}
<div
class=
"row row-sm mb-3 align-items-center"
>
<div
class=
"col-auto"
>
<div
class=
"stamp bg-{{ color[0] }}{% if light %}-lt{% else %} text-white{% endif %}"
>
{{ color[0] | capitalize | first_letter }}
</div>
</div>
<div
class=
"col"
>
<span
class=
"font-weight-semibold"
>
{{ color[1].title }}
</span><br/>
<code>
bg-{{ color[0] }}{% if light %}-lt{% endif %}
</code>
</div>
</div>
{% endfor %}
</div>
</div>
pages/_plugins/jekyll-filters.rb
浏览文件 @
2656fd1f
...
...
@@ -84,6 +84,11 @@ module Jekyll
input
.
gsub
re
,
repl_str
end
def
hex_to_rgb
(
color
)
r
,
g
,
b
=
color
.
match
(
/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/
).
captures
"rgb(
#{
r
.
hex
}
,
#{
g
.
hex
}
,
#{
b
.
hex
}
)"
end
end
end
...
...
pages/colors.html
已删除
100644 → 0
浏览文件 @
447a2f67
---
title: Colors
done: true
---
<div
class=
"row"
>
<div
class=
"col-md-6"
>
<div
class=
"card"
>
<div
class=
"card-header"
>
<h3
class=
"card-title"
>
Default colors
</h3>
</div>
<div
class=
"card-body"
>
<ul
class=
"list-unstyled"
>
{% for color in site.colors %}
<li
class=
"d-flex align-items-center mb-3"
>
<div
class=
"stamp bg-{{ color[0] }} text-white mr-3"
>
{{ color[1].name | first_letters | upcase }}
</div>
<div>
<strong>
{{ color[1].name }}
</strong><br/>
<code>
.bg-{{ color[0] }}
</code>
</div>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
<div
class=
"col-md-6"
>
<div
class=
"card"
>
<div
class=
"card-header"
>
<h3
class=
"card-title"
>
Light colors
</h3>
</div>
<div
class=
"card-body"
>
<ul
class=
"list-unstyled"
>
{% for color in site.colors %}
<li
class=
"d-flex align-items-center mb-3"
>
<div
class=
"stamp bg-{{ color[0] }}-lt mr-3"
>
{{ color[1].name | first_letters | upcase }}
</div>
<div>
<strong>
{{ color[1].name }} lite
</strong><br/>
<code>
.bg-{{ color[0] }}-lt
</code>
</div>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录