Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-06-17 12:50:03 +04:00
Code Issues Projects Releases Wiki Activity

cards, form elements, more demos, small fixes

Browse Source
This commit is contained in:
chomik
2018-02-21 16:42:22 +01:00
parent dfb87de9fc
commit bd3bc468bd
19 changed files with 136 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_data/charts.yml
+1 -1
View File
@@ -1,6 +1,6 @@
tasks:
name: Tasks
type: area-spline
type: spline
categories: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W']
groups: [1, 2, 3]
hide-points: true
_docs/blog.md
+1 -3
View File
@@ -6,14 +6,12 @@ Tabler is a great choice when it comes to the blog management. It allows you to
### Post card
The best way to make your post eye-catching is adding an image to it. To do so, just add the image with the `.card-img-top` class:
The best way to make your post eye-catching is adding an image to it. To do so, just add the image with the `.card-img-top` class. We've added the `.d-flex .flex-column` classes to the `.card-body` to have the author details be on the bottom of the card.
{% example html columns=1 %}
{% include cards/blog-single.html type="image" %}
{% endexample %}
We've added the `.d-flex .flex-column` classes to the `.card-body` to have the author details be on the bottom of the card.
If you want to create a couple of posts next to each other, add the `.row-deck` class to `.row`—then they will all have the same height:
{% example html columns=2 %}
_docs/cards.md
+15
View File
@@ -0,0 +1,15 @@
---
title: Cards
---
### Default card
{% example html columns=1 %}
{% include cards/card.html hide-options=true %}
{% endexample %}
### Advanced card
{% example html columns=1 %}
{% include cards/card.html show-buttons=true show-footer=true %}
{% endexample %}
_docs/form-components.md
-12
View File
@@ -2,46 +2,34 @@
title: Form components
---
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
{:toc}
### Color input
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
{% example html %}
{% include parts/input-color.html %}
{% endexample %}
### Image input
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
{% example html %}
{% include parts/input-image.html row-class="col-sm-2" limit=6 %}
{% endexample %}
### Icon input
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
{% example html %}
{% include parts/input-icon.html %}
{% endexample %}
### Toggle switches
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
{% example html %}
{% include parts/input-toggle.html %}
{% endexample %}
### Form fieldset
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
{% example html %}
{% include parts/form-fieldset.html %}
{% endexample %}
_includes/cards/card.html
+22 -8
View File
@@ -4,14 +4,26 @@
{% endif %}
<div class="card-header">
{% if include.title %}
<h3 class="card-title">{{ include.title }}</h3>
{% endif %}
<h3 class="card-title">{{ include.title | default: 'Card title' }}</h3>
{% unless include.hide-options %}
<div class="card-options">
{% if include.options %}
{{ include.options }}
{% if include.show-form %}
<form action="">
<div class="input-group">
<input type="text" class="form-control form-control-sm" placeholder="Search something..." name="s">
<span class="input-group-btn ml-2">
<button class="btn btn-sm btn-default" type="submit">
<span class="fe fe-search"></span>
</button>
</span>
</div>
</form>
{% elsif include.show-buttons %}
<a class="btn btn-secondary btn-sm">Action 1</a>
<a class="btn btn-secondary btn-sm ml-2">Action 2</a>
{% elsif include.options %}
{{ include.options }}
{% else %}
<a href="#" class="card-options-collapse" data-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
{% if include.show-fullscreen %}
@@ -28,9 +40,11 @@
</div>
{% endif %}
<div class="card-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan.
</p>
{% if include.body %}
{{ include.body }}
{% else %}
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
{% endif %}
</div>
{% if include.show-footer %}
<div class="card-footer">
_includes/cards/members.html
+1 -1
View File
@@ -3,7 +3,7 @@
<h3 class="card-title">Members</h3>
</div>
<div class="card-body" style="height: 15rem">
<div class="card-body o-auto" style="height: 15rem">
<ul class="list-unstyled list-separated">
{% for user in site.data.users limit: 6 offset: 30 %}
_layouts/docs.html
+4 -7
View File
@@ -10,21 +10,18 @@ title: Documentation
<div class="row">
<div class="col-lg-3">
<div class="card">
<div class="card-body">
<ul class="list">
<ul class="list-group card-list-group">
{% for doc in site.docs %}
<li><a href="{{ site.base }}{{ doc.url }}">{{ doc.title }}</a></li>
<li class="list-group-item"><a href="{{ site.base }}{{ doc.url }}">{{ doc.title }}</a></li>
{% endfor %}
</ul>
</div>
</ul>
</div>
</div>
<div class="col-lg-9">
<div class="card">
<div class="card-body">
<div class="text-wrap">
<div class="text-wrap p-lg-6">
<h2 class="mt-0 mb-4">{{ page.title }}</h2>
{% if page.toc %}
assets/css/dashboard.css
+46 -29
View File
@@ -69,7 +69,7 @@ body {
font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
font-size: 0.9375rem;
font-weight: 400;
line-height: 1.3;
line-height: 1.5;
color: #495057;
text-align: left;
background-color: #f5f7fb;
@@ -87,7 +87,7 @@ hr {
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: 0.5rem;
margin-bottom: 0.66em;
}
p {
@@ -366,7 +366,7 @@ template {
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
margin-bottom: 0.5rem;
margin-bottom: 0.66em;
font-family: inherit;
font-weight: 600;
line-height: 1.1;
@@ -3234,7 +3234,7 @@ tbody.collapse.show {
.custom-control {
position: relative;
display: block;
min-height: 1.3rem;
min-height: 1.5rem;
padding-left: 1.5rem;
}
@@ -3277,7 +3277,7 @@ tbody.collapse.show {
.custom-control-label::before {
position: absolute;
top: 0.15rem;
top: 0.25rem;
left: 0;
display: block;
width: 1rem;
@@ -3293,7 +3293,7 @@ tbody.collapse.show {
.custom-control-label::after {
position: absolute;
top: 0.15rem;
top: 0.25rem;
left: 0;
display: block;
width: 1rem;
@@ -3353,7 +3353,7 @@ tbody.collapse.show {
width: 100%;
height: 2.375rem;
padding: 0.5rem 1.75rem 0.5rem 0.75rem;
line-height: 1.3;
line-height: 1.5;
color: #495057;
vertical-align: middle;
background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 5'%3E%3Cpath fill='#999' d='M0 0L10 0L5 5L0 0'/%3E%3C/svg%3E") no-repeat right 0.75rem center;
@@ -3443,7 +3443,7 @@ tbody.collapse.show {
z-index: 1;
height: 2.375rem;
padding: 0.375rem 0.75rem;
line-height: 1.3;
line-height: 1.5;
color: #495057;
background-color: #fff;
border: 1px solid rgba(0, 40, 100, 0.12);
@@ -3459,7 +3459,7 @@ tbody.collapse.show {
display: block;
height: calc(2.375rem - 1px * 2);
padding: 0.375rem 0.75rem;
line-height: 1.3;
line-height: 1.5;
color: #495057;
content: "Browse";
background-color: #fbfbfc;
@@ -3573,8 +3573,8 @@ tbody.collapse.show {
.navbar-brand {
display: inline-block;
padding-top: 0.378125rem;
padding-bottom: 0.378125rem;
padding-top: 0.359375rem;
padding-bottom: 0.359375rem;
margin-right: 1rem;
font-size: 1.125rem;
line-height: inherit;
@@ -4953,7 +4953,7 @@ button.close {
.modal-title {
margin-bottom: 0;
line-height: 1.3;
line-height: 1.5;
}
.modal-body {
@@ -5013,7 +5013,7 @@ button.close {
font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
font-style: normal;
font-weight: 400;
line-height: 1.3;
line-height: 1.5;
text-align: left;
text-align: start;
text-decoration: none;
@@ -5126,7 +5126,7 @@ button.close {
font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
font-style: normal;
font-weight: 400;
line-height: 1.3;
line-height: 1.5;
text-align: left;
text-align: start;
text-decoration: none;
@@ -9143,9 +9143,8 @@ img {
}
.text-wrap {
padding: 3rem 5rem;
font-size: 1rem;
line-height: 1.6;
line-height: 1.66;
}
.text-wrap > :first-child {
@@ -9153,7 +9152,7 @@ img {
}
.text-wrap > h1, .text-wrap > h2, .text-wrap > h3, .text-wrap > h4, .text-wrap > h5, .text-wrap > h6 {
margin-top: 1em;
margin-top: 1.5em;
}
@media print {
@@ -9804,6 +9803,14 @@ a.icon:hover {
color: #495057 !important;
}
.o-auto {
overflow: auto !important;
}
.o-hidden {
overflow: hidden !important;
}
.nav-tabs {
-webkit-user-select: none;
-moz-user-select: none;
@@ -10584,7 +10591,6 @@ a.icon:hover {
margin: 0;
padding: 1.5rem 1.5rem;
position: relative;
overflow: auto;
}
.card-body + .card-body {
@@ -10618,8 +10624,9 @@ a.icon:hover {
.card-header {
background: none;
padding: 1rem 1.5rem;
padding: 0.5rem 1.5rem;
display: flex;
min-height: 3.5rem;
align-items: center;
}
@@ -10674,7 +10681,6 @@ a.icon:hover {
}
.card-table {
margin-bottom: .75rem;
margin-bottom: 0;
}
@@ -10683,11 +10689,6 @@ a.icon:hover {
border-top: 0;
}
.card-body + .card-table tr:first-child td,
.card-body + .card-table tr:first-child th {
padding-top: 0;
}
.card-table tr td:first-child,
.card-table tr th:first-child {
padding-left: 1.5rem;
@@ -10698,6 +10699,10 @@ a.icon:hover {
padding-right: 1.5rem;
}
.card-body + .card-table {
border-top: 1px solid rgba(0, 40, 100, 0.12);
}
.card-profile .card-header {
height: 9rem;
background-size: cover;
@@ -10716,6 +10721,10 @@ a.icon:hover {
margin-left: 1rem;
}
.card-body + .card-list-group {
border-top: 1px solid rgba(0, 40, 100, 0.12);
}
.card-list-group .list-group-item {
border-right: 0;
border-left: 0;
@@ -10724,6 +10733,14 @@ a.icon:hover {
padding-right: 1.5rem;
}
.card-list-group .list-group-item:last-child {
border-bottom: 0;
}
.card-list-group .list-group-item:first-child {
border-top: 0;
}
.card-header-tabs {
margin: -1.25rem 0;
border-bottom: 0;
@@ -10776,7 +10793,7 @@ a.icon:hover {
order: 100;
margin-right: -.5rem;
color: #868e96;
align-self: flex-start;
align-self: center;
}
.card-options a {
@@ -11756,7 +11773,7 @@ a.chip:hover {
}
.example {
padding: 2rem;
padding: 1rem;
border: 1px solid rgba(0, 40, 100, 0.12);
border-radius: 3px 3px 0 0;
font-size: 0.9375rem;
@@ -11777,7 +11794,7 @@ a.chip:hover {
border: 1px solid rgba(0, 40, 100, 0.12);
border-radius: 3px;
font-size: 0.9375rem;
max-height: 20rem;
max-height: 40rem;
overflow: auto;
background: #fcfcfc;
}
@@ -12242,7 +12259,7 @@ a.chip:hover {
-ms-user-select: none;
user-select: none;
font-size: 0.9375rem;
line-height: 1.3;
line-height: 1.5;
min-width: 2.375rem;
}
assets/scss/_variables.scss
+2 -2
View File
@@ -15,7 +15,7 @@ $font-size-base: .9375rem;
$font-size-lg: 1.125rem;
$font-size-sm: .875rem;
$line-height-base: 1.3;
$line-height-base: 1.5;
$h1-font-size: 2rem; //32px
$h2-font-size: 1.75rem; //28px
@@ -26,7 +26,7 @@ $h6-font-size: .875rem; //14px
$small-font-size: 87.5%;
$headings-margin-bottom: .5rem;
$headings-margin-bottom: .66em;
$headings-font-family: inherit;
$headings-font-weight: 600;
$headings-line-height: 1.1;
assets/scss/dashboard/_cards.scss
+19 -14
View File
@@ -19,7 +19,6 @@
margin: 0;
padding: $card-spacer-y $card-spacer-x;
position: relative;
overflow: auto;
& + & {
border-top: 1px solid $border-color;
@@ -51,9 +50,9 @@
.card-header {
background: none;
padding: 1rem $card-spacer-x;
padding: .5rem $card-spacer-x;
display: flex;
//min-height: 4rem;
min-height: 3.5rem;
align-items: center;
.card-title {
@@ -107,7 +106,6 @@
}
.card-table {
margin-bottom: .75rem;
margin-bottom: 0;
tr {
@@ -118,15 +116,6 @@
}
}
.card-body + & {
&:first-child {
td,
th {
padding-top: 0;
}
}
}
td,
th {
&:first-child {
@@ -138,6 +127,10 @@
}
}
}
.card-body + & {
border-top: 1px solid $border-color;
}
}
.card-profile {
@@ -163,6 +156,10 @@
}
.card-list-group {
.card-body + & {
border-top: 1px solid $border-color;
}
.list-group-item {
border-right: 0;
border-left: 0;
@@ -170,6 +167,14 @@
padding-left: $card-spacer-x;
padding-right: $card-spacer-x;
&:last-child {
border-bottom: 0;
}
&:first-child {
border-top: 0;
}
}
}
@@ -228,7 +233,7 @@
order: 100;
margin-right: -.5rem;
color: $text-muted;
align-self: flex-start;
align-self: center;
a {
margin-left: .5rem;
assets/scss/dashboard/_example.scss
+2 -2
View File
@@ -1,5 +1,5 @@
.example {
padding: 2rem;
padding: 1rem;
border: 1px solid $border-color;
border-radius: 3px 3px 0 0;
font-size: px2rem(15px);
@@ -20,7 +20,7 @@
border: 1px solid $border-color;
border-radius: 3px;
font-size: px2rem(15px);
max-height: 20rem;
max-height: 40rem;
overflow: auto;
background: #fcfcfc;
}
assets/scss/dashboard/_type.scss
+2 -3
View File
@@ -69,9 +69,8 @@ img {
.text-wrap {
padding: 3rem 5rem;
font-size: 1rem;
line-height: 1.6;
line-height: 1.66;
>:first-child {
margin-top: 0;
@@ -79,7 +78,7 @@ img {
> {
h1, h2, h3, h4, h5, h6 {
margin-top: 1em;
margin-top: 1.5em;
}
}
}
assets/scss/dashboard/_utilities.scss
+4 -1
View File
@@ -22,4 +22,7 @@
color: $body-color !important;
}
}
}
}
.o-auto { overflow: auto !important; }
.o-hidden { overflow: hidden !important; }
cards.html
+2 -20
View File
@@ -48,28 +48,10 @@ menu: interface.cards
{% include cards/card.html title="With additional fullscreen button" show-fullscreen=true %}
</div>
<div class="col-lg-6">
{% capture options %}
<a class="btn btn-secondary btn-sm">Action 1</a>
<a class="btn btn-secondary btn-sm ml-2">Action 2</a>
{% endcapture %}
{% include cards/card.html title="Pannel with custom buttons" options=options %}
{% include cards/card.html title="Pannel with custom buttons" show-buttons=true %}
</div>
<div class="col-lg-6">
{% capture options %}
<form action="">
<div class="input-group">
<input type="text" class="form-control form-control-sm" placeholder="Search something..." name="s">
<span class="input-group-btn ml-2">
<button class="btn btn-sm btn-default" type="submit">
<span class="fe fe-search"></span>
</button>
</span>
</div>
</form>
{% endcapture %}
{% include cards/card.html title="Card with search form" options=options %}
{% include cards/card.html title="Card with search form" show-form=true %}
</div>
<div class="col-lg-6">
{% include cards/card.html title="Card with alert" alert="Adding action was successful" %}
docs.html
+4
View File
@@ -0,0 +1,4 @@
---
redirect_to: ./docs/index.html
layout: redirect
---
form-elements.html
+6 -1
View File
@@ -8,8 +8,13 @@ menu: forms
<div class="col-12">
{% include cards/form-all-elements.html %}
</div>
<div class="col-4">
<div class="col-lg-4">
{% include cards/form-input-mask.html %}
{% include cards/profile-edit.html %}
</div>
<div class="col-lg-8">
{% include cards/profile-edit-big.html %}
{% include cards/http-request.html %}
</div>
</div>
</div>
profile.html
+1
View File
@@ -13,6 +13,7 @@ menu: profile
</div>
<div class="col-lg-8">
{% include cards/profile-timeline.html %}
{% include cards/profile-edit-big.html %}
</div>
</div>
</div>
_cards.html → sample-cards.html
+4 -9
View File
@@ -72,15 +72,10 @@ menu: cards
{% include cards/price-box.html title="Customer status" subtitle="New users" color="yellow" value="118" change=3 %}
</div>
<div class="col-md-4">
{% include cards/map-metro.html %}
</div>
<div class="col-lg-8">{% include cards/profile-edit-big.html %}</div>
<div class="col-md-6 col-lg-3">{% include cards/icon-card.html icon="si si-drawer" icon-color="yellow" title="Capacity" value="105GB" %}</div>
<div class="col-md-6 col-lg-3">{% include cards/icon-card.html icon="si si-diamond" icon-color="green" title="Revenue" value="$1,345" %}</div>
<div class="col-md-6 col-lg-3">{% include cards/icon-card.html icon="si si-exclamation" icon-color="red" title="Errors" value="23" %}</div>
<div class="col-md-6 col-lg-3">{% include cards/icon-card.html icon="si si-social-tumblr" icon-color="blue" title="Followers" value="1685" %}</div>
<div class="col-md-6 col-lg-3">{% include cards/icon-card.html icon="fe fe-hard-drive" icon-color="yellow" title="Capacity" value="105GB" %}</div>
<div class="col-md-6 col-lg-3">{% include cards/icon-card.html icon="fe fe-dollar-sign" icon-color="green" title="Revenue" value="$1,345" %}</div>
<div class="col-md-6 col-lg-3">{% include cards/icon-card.html icon="fe fe-alert-circle" icon-color="red" title="Errors" value="23" %}</div>
<div class="col-md-6 col-lg-3">{% include cards/icon-card.html icon="fe fe-twitter" icon-color="blue" title="Followers" value="1685" %}</div>
<div class="col-md-6 col-lg-4">
{% include cards/subcards.html %}
sw.js
View File