diff --git a/_data/charts.yml b/_data/charts.yml index 4408b3ec4..026fe88a9 100644 --- a/_data/charts.yml +++ b/_data/charts.yml @@ -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 diff --git a/_docs/blog.md b/_docs/blog.md index c8dc35650..b61063f14 100644 --- a/_docs/blog.md +++ b/_docs/blog.md @@ -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 %} diff --git a/_docs/cards.md b/_docs/cards.md new file mode 100644 index 000000000..cf26263af --- /dev/null +++ b/_docs/cards.md @@ -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 %} \ No newline at end of file diff --git a/_docs/form-components.md b/_docs/form-components.md index a0a8b2e45..6dbea1096 100644 --- a/_docs/form-components.md +++ b/_docs/form-components.md @@ -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 %} \ No newline at end of file diff --git a/_includes/cards/card.html b/_includes/cards/card.html index 40550eb38..5123f4785 100644 --- a/_includes/cards/card.html +++ b/_includes/cards/card.html @@ -4,14 +4,26 @@ {% endif %}
- {% if include.title %} -

{{ include.title }}

- {% endif %} +

{{ include.title | default: 'Card title' }}

{% unless include.hide-options %}
- {% if include.options %} - {{ include.options }} + {% if include.show-form %} +
+
+ + + + +
+
+ {% elsif include.show-buttons %} + Action 1 + Action 2 + {% elsif include.options %} + {{ include.options }} {% else %} {% if include.show-fullscreen %} @@ -28,9 +40,11 @@
{% endif %}
-

- 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. -

+ {% 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 %}
{% if include.show-footer %}
diff --git a/_includes/cards/members.html b/_includes/cards/members.html index 95fbaad67..b1c3429b3 100644 --- a/_includes/cards/members.html +++ b/_includes/cards/members.html @@ -3,7 +3,7 @@

Members

-
+
    {% for user in site.data.users limit: 6 offset: 30 %} diff --git a/_layouts/docs.html b/_layouts/docs.html index 1ed56cb93..5bfee54aa 100644 --- a/_layouts/docs.html +++ b/_layouts/docs.html @@ -10,21 +10,18 @@ title: Documentation
    -
    -
    +
- -
+

{{ page.title }}

{% if page.toc %} diff --git a/assets/css/dashboard.css b/assets/css/dashboard.css index 991f9f1d5..03be1dcd4 100644 --- a/assets/css/dashboard.css +++ b/assets/css/dashboard.css @@ -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; } diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss index 56b29b811..c3140bf12 100644 --- a/assets/scss/_variables.scss +++ b/assets/scss/_variables.scss @@ -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; diff --git a/assets/scss/dashboard/_cards.scss b/assets/scss/dashboard/_cards.scss index 8d0cf2e7b..3a8dd01c1 100644 --- a/assets/scss/dashboard/_cards.scss +++ b/assets/scss/dashboard/_cards.scss @@ -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; diff --git a/assets/scss/dashboard/_example.scss b/assets/scss/dashboard/_example.scss index 8da756167..be079cd46 100644 --- a/assets/scss/dashboard/_example.scss +++ b/assets/scss/dashboard/_example.scss @@ -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; } diff --git a/assets/scss/dashboard/_type.scss b/assets/scss/dashboard/_type.scss index 2c20e7725..11784bd7b 100644 --- a/assets/scss/dashboard/_type.scss +++ b/assets/scss/dashboard/_type.scss @@ -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; } } } \ No newline at end of file diff --git a/assets/scss/dashboard/_utilities.scss b/assets/scss/dashboard/_utilities.scss index 4572ab2bb..8242de90c 100644 --- a/assets/scss/dashboard/_utilities.scss +++ b/assets/scss/dashboard/_utilities.scss @@ -22,4 +22,7 @@ color: $body-color !important; } } -} \ No newline at end of file +} + +.o-auto { overflow: auto !important; } +.o-hidden { overflow: hidden !important; } \ No newline at end of file diff --git a/cards.html b/cards.html index 1f3ddd5e2..1bccf1aed 100644 --- a/cards.html +++ b/cards.html @@ -48,28 +48,10 @@ menu: interface.cards {% include cards/card.html title="With additional fullscreen button" show-fullscreen=true %}
- {% capture options %} - Action 1 - Action 2 - {% endcapture %} - - {% include cards/card.html title="Pannel with custom buttons" options=options %} + {% include cards/card.html title="Pannel with custom buttons" show-buttons=true %}
- {% capture options %} -
-
- - - - -
-
- {% endcapture %} - - {% include cards/card.html title="Card with search form" options=options %} + {% include cards/card.html title="Card with search form" show-form=true %}
{% include cards/card.html title="Card with alert" alert="Adding action was successful" %} diff --git a/docs.html b/docs.html new file mode 100644 index 000000000..e9bb3bce4 --- /dev/null +++ b/docs.html @@ -0,0 +1,4 @@ +--- +redirect_to: ./docs/index.html +layout: redirect +--- \ No newline at end of file diff --git a/form-elements.html b/form-elements.html index 950b95698..2ae8ac2ff 100644 --- a/form-elements.html +++ b/form-elements.html @@ -8,8 +8,13 @@ menu: forms
{% include cards/form-all-elements.html %}
-
+
{% include cards/form-input-mask.html %} + {% include cards/profile-edit.html %} +
+
+ {% include cards/profile-edit-big.html %} + {% include cards/http-request.html %}
\ No newline at end of file diff --git a/profile.html b/profile.html index 3e4785f3f..186ebf81b 100644 --- a/profile.html +++ b/profile.html @@ -13,6 +13,7 @@ menu: profile
{% include cards/profile-timeline.html %} + {% include cards/profile-edit-big.html %}
\ No newline at end of file diff --git a/_cards.html b/sample-cards.html similarity index 93% rename from _cards.html rename to sample-cards.html index d535a536c..f7e9b7f0f 100644 --- a/_cards.html +++ b/sample-cards.html @@ -72,15 +72,10 @@ menu: cards {% include cards/price-box.html title="Customer status" subtitle="New users" color="yellow" value="118" change=3 %}
-
- {% include cards/map-metro.html %} -
-
{% include cards/profile-edit-big.html %}
- -
{% include cards/icon-card.html icon="si si-drawer" icon-color="yellow" title="Capacity" value="105GB" %}
-
{% include cards/icon-card.html icon="si si-diamond" icon-color="green" title="Revenue" value="$1,345" %}
-
{% include cards/icon-card.html icon="si si-exclamation" icon-color="red" title="Errors" value="23" %}
-
{% include cards/icon-card.html icon="si si-social-tumblr" icon-color="blue" title="Followers" value="1685" %}
+
{% include cards/icon-card.html icon="fe fe-hard-drive" icon-color="yellow" title="Capacity" value="105GB" %}
+
{% include cards/icon-card.html icon="fe fe-dollar-sign" icon-color="green" title="Revenue" value="$1,345" %}
+
{% include cards/icon-card.html icon="fe fe-alert-circle" icon-color="red" title="Errors" value="23" %}
+
{% include cards/icon-card.html icon="fe fe-twitter" icon-color="blue" title="Followers" value="1685" %}
{% include cards/subcards.html %} diff --git a/sw.js b/sw.js new file mode 100644 index 000000000..e69de29bb