Skip to content

T
tabler

知鸟1号 / tabler
与 Fork 源项目一致

从无法访问的项目Fork

通知 1
Star 0
Fork 0
T
tabler

体验新版 GitCode，发现更多精彩内容 >>

提交 79da077f 编写于 作者: C codecalm
浏览文件
操作

masonry layout, cards masonry layout

上级 81f79446
隐藏空白更改
内联 并排
Showing with 295 addition and 171 deletion
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.
先完成此消息的编辑！
想要评论请 注册 或