Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
知鸟1号
tabler
提交
79da077f
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,发现更多精彩内容 >>
提交
79da077f
编写于
9月 26, 2020
作者:
C
codecalm
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
masonry layout, cards masonry layout
上级
81f79446
变更
10
隐藏空白更改
内联
并排
Showing
10 changed file
with
295 addition
and
171 deletion
+295
-171
Gemfile.lock
Gemfile.lock
+91
-0
pages/_data/libs.json
pages/_data/libs.json
+1
-0
pages/_data/menu.yml
pages/_data/menu.yml
+3
-0
pages/_includes/cards/card.html
pages/_includes/cards/card.html
+109
-110
pages/cards-masonry.html
pages/cards-masonry.html
+43
-0
pages/cards.html
pages/cards.html
+37
-37
scss/_tabler-core.scss
scss/_tabler-core.scss
+1
-0
scss/_variables.scss
scss/_variables.scss
+0
-23
scss/ui/_images.scss
scss/ui/_images.scss
+10
-0
scss/ui/_type.scss
scss/ui/_type.scss
+0
-1
未找到文件。
Gemfile.lock
0 → 100644
浏览文件 @
79da077f
GEM
remote: https://rubygems.org/
specs:
addressable (2.7.0)
public_suffix (>= 2.0.2, < 5.0)
colorator (1.1.0)
concurrent-ruby (1.1.7)
em-websocket (0.5.2)
eventmachine (>= 0.12.9)
http_parser.rb (~> 0.6.0)
eventmachine (1.2.7)
ffi (1.13.1)
forwardable-extended (2.6.0)
htmlbeautifier (1.3.1)
htmlcompressor (0.4.0)
http_parser.rb (0.6.0)
i18n (1.8.5)
concurrent-ruby (~> 1.0)
jekyll (4.1.1)
addressable (~> 2.4)
colorator (~> 1.0)
em-websocket (~> 0.5)
i18n (~> 1.0)
jekyll-sass-converter (~> 2.0)
jekyll-watch (~> 2.0)
kramdown (~> 2.1)
kramdown-parser-gfm (~> 1.0)
liquid (~> 4.0)
mercenary (~> 0.4.0)
pathutil (~> 0.9)
rouge (~> 3.0)
safe_yaml (~> 1.0)
terminal-table (~> 1.8)
jekyll-random (0.1)
jekyll (>= 3.3, < 5.0)
jekyll-redirect-from (0.16.0)
jekyll (>= 3.3, < 5.0)
jekyll-sass-converter (2.1.0)
sassc (> 2.0.1, < 3.0)
jekyll-tidy (0.2.2)
htmlbeautifier
htmlcompressor
jekyll
jekyll-timeago (0.13.1)
mini_i18n (>= 0.8.0)
jekyll-toc (0.14.0)
jekyll (>= 3.8)
nokogiri (~> 1.10)
jekyll-watch (2.2.1)
listen (~> 3.0)
kramdown (2.3.0)
rexml
kramdown-parser-gfm (1.1.0)
kramdown (~> 2.0)
liquid (4.0.3)
listen (3.2.1)
rb-fsevent (~> 0.10, >= 0.10.3)
rb-inotify (~> 0.9, >= 0.9.10)
mercenary (0.4.0)
mini_i18n (0.8.0)
mini_portile2 (2.4.0)
nokogiri (1.10.10)
mini_portile2 (~> 2.4.0)
pathutil (0.16.2)
forwardable-extended (~> 2.6)
public_suffix (4.0.6)
rb-fsevent (0.10.4)
rb-inotify (0.10.1)
ffi (~> 1.0)
rexml (3.2.4)
rouge (3.23.0)
safe_yaml (1.0.5)
sassc (2.4.0)
ffi (~> 1.9)
terminal-table (1.8.0)
unicode-display_width (~> 1.1, >= 1.1.1)
unicode-display_width (1.7.0)
PLATFORMS
ruby
DEPENDENCIES
jekyll (= 4.1.1)
jekyll-random
jekyll-redirect-from
jekyll-tidy
jekyll-timeago
jekyll-toc
BUNDLED WITH
2.1.4
pages/_data/libs.json
浏览文件 @
79da077f
...
...
@@ -31,6 +31,7 @@
],
"nouislider"
:
"nouislider/distribute/nouislider.min.js"
,
"countup"
:
"countup.js/dist/countUp.js"
,
"masonry"
:
"https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"
,
"mapbox"
:
"https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.js"
},
"css"
:
{
...
...
pages/_data/menu.yml
浏览文件 @
79da077f
...
...
@@ -21,6 +21,9 @@ base:
cards
:
url
:
cards.html
title
:
Cards
cards-masonry
:
url
:
cards-masonry.html
title
:
Cards Masonry
dropdowns
:
url
:
dropdowns.html
title
:
Dropdowns
...
...
pages/_includes/cards/card.html
浏览文件 @
79da077f
...
...
@@ -2,115 +2,114 @@
{% assign link = include.link | default: false %}
<
{%
if
link
%}
a
href=
"#"
{%
else
%}
div
{%
endif
%}
class=
"card{% if include.active %} card-active{% endif %}{% if include.inactive %} card-inactive{% endif %}{% if include.class %} {{ include.class }}{% endif %}"
>
{% if include['empty'] %}
{% include ui/empty.html illustration=true %}
{% else %}
{% if include.img-top %}
<img
src=
"{{ site.base }}/static/photos/9f36332564ca271d.jpg"
class=
"card-img-top"
alt=
"{{ include.img-top-alt | default: 'Card top image' }}"
>
{% endif %}
{% if include.status-top %}
<div
class=
"card-status-top bg-{{ include.status-top | default: 'blue' }}"
></div>
{% elsif include.status-bottom %}
<div
class=
"card-status-bottom bg-{{ include.status-bottom | default: 'blue' }}"
></div>
{% elsif include.status-left %}
<div
class=
"card-status-left bg-{{ include.status-left | default: 'blue' }}"
></div>
{% endif %}
{% if include.header or include.header-title or include.header-tabs or include.header-pills %}
<div
class=
"card-header"
>
{% if include.header-tabs or include.header-pills %}
{% include ui/nav.html header=true pills=include.header-pills tabs=include.header-tabs %}
{% else %}
<h3
class=
"card-title"
>
{{ include.header-title | default: 'Header title' }}
</h3>
{% endif %}
</div>
{% endif %}
{% if include.alert %}
<div
class=
"card-alert alert alert-{{ include.alert-type | default: 'success' }} mb-0"
>
{{ include.alert }}
</div>
{% endif %}
<div
class=
"card-body"
>
{% if include.title %}
<h3
class=
"card-title"
>
{{ include.title }}
</h3>
{% endif %}
{% if include.subtitle %}
<div
class=
"card-subtitle"
>
Card subtitle
</div>
{% endif %}
{% if include.body %}
<p>
{{ include.body }}
</p>
{% else %}
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
neque pariatur perferendis sed suscipit velit vitae voluptatem.
</p>
{% endif %}
{% if include.button %}
<div
class=
"card-text"
>
<a
href=
"#"
class=
"btn btn-primary"
>
Go somewhere
</a>
</div>
{% endif %}
</div>
{% if include.footer or include.footer-button or include.footer-buttons or include.footer-elements %}
<!-- Card footer -->
<div
class=
"card-footer"
>
{% if include.footer-elements %}
<div
class=
"row align-items-center"
>
{% assign elements = include.footer-elements | split: "," %}
{% for element in elements %}
{% assign el = element %}
{% assign first_letter = el | slice: 0 %}
{% if first_letter == ">" %}
{% assign right = true %}
{% assign el = element | slice: 1, element.size %}
{% endif %}
<div
class=
"col-auto{% if right %} ml-auto{% endif %}"
>
{% case el %}
{% when "switch" %}
{% include ui/form/check.html switch=true empty=true checked=true class="m-0" %}
{% when "check" %}
{% include ui/form/check.html empty=true checked=true class="m-0" %}
{% when "avatars" %}
{% include ui/avatar-list.html stacked=true text="+3" %}
{% when "more" %}
<a
href=
"#"
>
More information
</a>
{% endcase %}
</div>
{% endfor %}
</div>
{% elsif include.footer-button %}
<a
href=
"#"
class=
"btn btn-primary"
>
Go somewhere
</a>
{% elsif include.footer-buttons %}
<div
class=
"d-flex"
>
<a
href=
"#"
class=
"btn btn-link"
>
Cancel
</a>
<a
href=
"#"
class=
"btn btn-primary ml-auto"
>
Go somewhere
</a>
</div>
{% else %}
This is standard card footer
{% endif %}
</div>
{% endif %}
{% if include.img-bottom %}
<img
src=
"{{ site.base }}/static/photos/56614e12b2a7bd68.jpg"
class=
"card-img-bottom"
alt=
"{{ include.img-bottom-alt | default: 'Card bottom image' }}"
>
{% endif %}
{% if include.progress %}
{% include ui/progress.html class="progress-sm card-progress" %}
{% endif %}
{% endif %}
{% if include['empty'] %}
{% include ui/empty.html illustration=true %}
{% else %}
{% if include.img-top %}
<div
class=
"card-img-top img-responsive img-responsive-16by9"
style=
"background-image: url({{ site.base }}/static/photos/9f36332564ca271d.jpg)"
></div>
{% endif %}
{% if include.status-top %}
<div
class=
"card-status-top bg-{{ include.status-top | default: 'blue' }}"
></div>
{% elsif include.status-bottom %}
<div
class=
"card-status-bottom bg-{{ include.status-bottom | default: 'blue' }}"
></div>
{% elsif include.status-left %}
<div
class=
"card-status-left bg-{{ include.status-left | default: 'blue' }}"
></div>
{% endif %}
{% if include.header or include.header-title or include.header-tabs or include.header-pills %}
<div
class=
"card-header"
>
{% if include.header-tabs or include.header-pills %}
{% include ui/nav.html header=true pills=include.header-pills tabs=include.header-tabs %}
{% else %}
<h3
class=
"card-title"
>
{{ include.header-title | default: 'Header title' }}
</h3>
{% endif %}
</div>
{% endif %}
{% if include.alert %}
<div
class=
"card-alert alert alert-{{ include.alert-type | default: 'success' }} mb-0"
>
{{ include.alert }}
</div>
{% endif %}
<div
class=
"card-body"
>
{% if include.title %}
<h3
class=
"card-title"
>
{{ include.title }}
</h3>
{% endif %}
{% if include.subtitle %}
<div
class=
"card-subtitle"
>
Card subtitle
</div>
{% endif %}
{% if include.body %}
<p>
{{ include.body }}
</p>
{% else %}
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
neque pariatur perferendis sed suscipit velit vitae voluptatem.
</p>
{% endif %}
{% if include.button %}
<div
class=
"card-text"
>
<a
href=
"#"
class=
"btn btn-primary"
>
Go somewhere
</a>
</div>
{% endif %}
</div>
{% if include.footer or include.footer-button or include.footer-buttons or include.footer-elements %}
<!-- Card footer -->
<div
class=
"card-footer"
>
{% if include.footer-elements %}
<div
class=
"row align-items-center"
>
{% assign elements = include.footer-elements | split: "," %}
{% for element in elements %}
{% assign el = element %}
{% assign first_letter = el | slice: 0 %}
{% if first_letter == ">" %}
{% assign right = true %}
{% assign el = element | slice: 1, element.size %}
{% endif %}
<div
class=
"col-auto{% if right %} ml-auto{% endif %}"
>
{% case el %}
{% when "switch" %}
{% include ui/form/check.html switch=true empty=true checked=true class="m-0" %}
{% when "check" %}
{% include ui/form/check.html empty=true checked=true class="m-0" %}
{% when "avatars" %}
{% include ui/avatar-list.html stacked=true text="+3" %}
{% when "more" %}
<a
href=
"#"
>
More information
</a>
{% endcase %}
</div>
{% endfor %}
</div>
{% elsif include.footer-button %}
<a
href=
"#"
class=
"btn btn-primary"
>
Go somewhere
</a>
{% elsif include.footer-buttons %}
<div
class=
"d-flex"
>
<a
href=
"#"
class=
"btn btn-link"
>
Cancel
</a>
<a
href=
"#"
class=
"btn btn-primary ml-auto"
>
Go somewhere
</a>
</div>
{% else %}
This is standard card footer
{% endif %}
</div>
{% endif %}
{% if include.img-bottom %}
<div
class=
"card-img-bottom img-responsive img-responsive-16by9"
style=
"background-image: url({{ site.base }}/static/photos/56614e12b2a7bd68.jpg)"
></div>
{% endif %}
{% if include.progress %}
{% include ui/progress.html class="progress-sm card-progress" %}
{% endif %}
{% endif %}
</
{%
if
link
%}a{%
else
%}div{%
endif
%}
>
{% endremoveemptylines %}
pages/cards-masonry.html
0 → 100644
浏览文件 @
79da077f
---
title: Cards Masonry
page-header: Cards Masonry
menu: base.cards-masonry
libs: masonry
---
<div
class=
"row"
data-masonry=
'{"percentPosition": true }'
>
<div
class=
"col-sm-6 col-lg-4"
>
{% include cards/card.html body="This is some text within a card body." %}
</div>
<div
class=
"col-sm-6 col-lg-4"
>
{% include cards/card.html img-bottom=true title="Card with bottom image" %}
</div>
<div
class=
"col-sm-6 col-lg-4"
>
{% include cards/card.html footer-elements="more,>switch" %}
</div>
<div
class=
"col-sm-6 col-lg-4"
>
{% include cards/card.html footer-elements=">avatars" %}
</div>
<div
class=
"col-sm-6 col-lg-4"
>
{% include cards/card.html header-tabs=true %}
</div>
<div
class=
"col-sm-6 col-lg-4"
>
{% include cards/card.html header-pills=true %}
</div>
<div
class=
"col-sm-6 col-lg-4"
>
{% include cards/card.html empty=true %}
</div>
<div
class=
"col-sm-6 col-lg-4"
>
{% include cards/card.html progress=true title="Card with progress bar" %}
</div>
<div
class=
"col-sm-6 col-lg-4"
>
{% include cards/card.html title="Card title" subtitle="Card subtitle" %}
</div>
<div
class=
"col-sm-6 col-lg-4"
>
{% include cards/card.html header=true %}
</div>
<div
class=
"col-sm-6 col-lg-4"
>
{% include cards/credit-card.html %}
</div>
</div>
pages/cards.html
浏览文件 @
79da077f
...
...
@@ -6,43 +6,43 @@ libs: imask
---
<div
class=
"row"
>
<div
class=
"col-md-6 col-xl-4"
>
{% include cards/card.html body="This is some text within a card body." %}
{% include cards/card.html img-bottom=true title="Card with bottom image" %}
{% include cards/card.html active=true body="This is a card with active state." %}
{% include cards/card.html inactive=true body="This is some text inactive state." %}
{% include cards/card.html footer-elements="more,>switch"
%}
{% include cards/card.html footer-elements=">avatars"
%}
{% include cards/card.html header-tabs=true %}
{% include cards/card.html header-pills=true %}
{% include cards/card.html progress=true title="Card with progress bar" %}
{% include cards/card.html empty=true %}
{% include cards/card-tabs.html count=4 %}
{% include cards/card-tabs.html count=4 bottom=true id="bottom" %}
</div>
<div
class=
"col-md-6 col-xl-8"
>
{% include cards/card-image.html title="Card with left side image" %}
{% include cards/card-image.html title="Card with right side image" right=true img="de6d0fd1feebb6a2.jpg" %}
{% include cards/card-group.html %}
<div
class=
"col-md-6 col-xl-4"
>
{% include cards/card.html body="This is some text within a card body." %}
{% include cards/card.html img-bottom=true title="Card with bottom image" %}
{% include cards/card.html active=true body="This is a card with active state." %}
{% include cards/card.html inactive=true body="This is some text inactive state." %}
{% include cards/card.html footer-elements="more,>switch"
%}
{% include cards/card.html footer-elements=">avatars"
%}
{% include cards/card.html header-tabs=true %}
{% include cards/card.html header-pills=true %}
{% include cards/card.html progress=true title="Card with progress bar" %}
{% include cards/card.html empty=true %}
{% include cards/card-tabs.html count=4 %}
{% include cards/card-tabs.html count=4 bottom=true id="bottom" %}
</div>
<div
class=
"col-md-6 col-xl-8"
>
{% include cards/card-image.html title="Card with left side image" %}
{% include cards/card-image.html title="Card with right side image" right=true img="de6d0fd1feebb6a2.jpg" %}
{% include cards/card-group.html %}
<div
class=
"row"
>
<div
class=
"col-xl-6"
>
{% include cards/card.html img-top=true title="Card with top image" %}
{% include cards/card.html button=true title="Card with button link" %}
{% include cards/card.html status-top="danger" title="Card with top status" %}
{% include cards/card.html status-bottom="success" title="Card with bottom status" %}
{% include cards/card.html status-left="primary" title="Card with side status" %}
{% include cards/card.html class="card-stacked" title="Stacked card" %}
{% include cards/credit-card.html %}
</div>
<div
class=
"col-xl-6"
>
{% include cards/card.html title="Card title" subtitle="Card subtitle" %}
{% include cards/card.html header=true
%}
{% include cards/card.html title="Card with footer" footer=true %}
{% include cards/card.html title="Card with footer button" footer-button=true %}
{% include cards/card.html title="Card with footer buttons" footer-buttons=true %}
</div>
</div>
</div>
<div
class=
"row"
>
<div
class=
"col-xl-6"
>
{% include cards/card.html img-top=true title="Card with top image" %}
{% include cards/card.html button=true title="Card with button link" %}
{% include cards/card.html status-top="danger" title="Card with top status" %}
{% include cards/card.html status-bottom="success" title="Card with bottom status" %}
{% include cards/card.html status-left="primary" title="Card with side status" %}
{% include cards/card.html class="card-stacked" title="Stacked card" %}
{% include cards/credit-card.html %}
</div>
<div
class=
"col-xl-6"
>
{% include cards/card.html title="Card title" subtitle="Card subtitle" %}
{% include cards/card.html header=true
%}
{% include cards/card.html title="Card with footer" footer=true %}
{% include cards/card.html title="Card with footer button" footer-button=true %}
{% include cards/card.html title="Card with footer buttons" footer-buttons=true %}
</div>
</div>
</div>
</div>
scss/_tabler-core.scss
浏览文件 @
79da077f
...
...
@@ -20,6 +20,7 @@
@import
"ui/empty"
;
@import
"ui/grid"
;
@import
"ui/icons"
;
@import
"ui/images"
;
@import
"ui/forms"
;
@import
"ui/forms/form-icon"
;
@import
"ui/forms/form-colorinput"
;
...
...
scss/_variables.scss
浏览文件 @
79da077f
...
...
@@ -222,29 +222,6 @@ $container-variations: (
narrow
:
45rem
,
)
!
default
;
$embed-responsive-aspect-ratios
:
(
"21by9"
:
(
x
:
21
,
y
:
9
)
,
"16by9"
:
(
x
:
16
,
y
:
9
)
,
"4by3"
:
(
x
:
4
,
y
:
3
)
,
"1by1"
:
(
x
:
1
,
y
:
1
)
,
'2by1'
:
(
x
:
2
,
y
:
1
)
)
!
default
;
$content-padding-y
:
1
.25rem
!
default
;
...
...
scss/ui/_images.scss
0 → 100644
浏览文件 @
79da077f
.img-responsive
{
background
:
no-repeat
center
/
cover
;
padding-top
:
percentage
(
3
/
4
);
}
@each
$key
,
$ratio
in
$embed-responsive-aspect-ratios
{
.img-responsive-
#{
$key
}
{
padding-top
:
percentage
(
map-get
(
$ratio
,
y
)
/
map-get
(
$ratio
,
x
));
}
}
scss/ui/_type.scss
浏览文件 @
79da077f
...
...
@@ -57,7 +57,6 @@ b {
blockquote
{
padding-left
:
1rem
;
color
:
$text-muted
;
border-left
:
2px
solid
$border-color
;
p
{
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录