Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-26 11:16:12 +04:00
Code Issues Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/dev-v1-navbars' into dev-v1-navbars

Browse Source
This commit is contained in:
mrszympek
2019-06-01 17:23:51 +02:00
parent ef40b91ef8 4205894e43
commit b30928f49f
11 changed files with 120 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
pages/_includes/parts/navbar.html
View File

@@ -220,13 +220,5 @@
</div>
</li>
{% endif %}
<li class="nav-item d-lg-none">
<a href="#" class="nav-link px-1" data-toggle="collapse" data-toggle-class=""
data-target="#navbarToggler">
{% include ui/icon.html icon="menu" %}
</a>
</li>
</ul>
</div>

2
pages/_layouts/default.html
View File

@@ -19,7 +19,7 @@ layout: base
<div class="d-flex flex-fill">
<div class="flex-fill px-lg-2 mw-100">
<div class="flex-fill px-lg-2 mw-100{% if page.blank %} d-flex align-items-center{% endif %}">
<div class="container{% if page.container-size %} container-{{ page.container-size }}{% endif %}{% if page.fluid %}-fluid{% endif %} my-4">
{% include layout/page-title.html %}

2
pages/_layouts/docs.html
View File

@@ -6,7 +6,7 @@ title: Documentation
<div class="row justify-content-center">
<div class="col-lg-9">
<div class="col-lg-10">
<div class="card">
<div class="card-body p-lg-5">

9
pages/blank.html
View File

@@ -1,10 +1,11 @@
---
title: Blank page
container-size: sm
blank: true
done: true
---
<div class="text-center">
{% include ui/illustration.html image="undraw_printing_invoices_5r4r.svg" class="mb-4 h-48" %}
<p class="text-muted mb-4">
@@ -12,8 +13,6 @@ container-size: sm
</p>
<div>
{% include ui/button.html text="+ Add your first client" color="primary" %}
<!-- todo: add + icon to button -->
{% include ui/button.html text="Add your first client" icon="plus" color="primary" %}
</div>
</div>
</div>

81
pages/cards-stats.html
View File

@@ -4,88 +4,7 @@ layout: default
---
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card">
<div class="card-body">
<div class="d-flex">
<div>Sales</div>
<div class="ml-auto">
{% include parts/dropdown/days.html %}
</div>
</div>
<div class="h1 mb-3">75%</div>
<div class="d-flex mb-2">
<div>Conversion rate</div>
<div class="ml-auto text-green">
24% {% include ui/icon.html icon="trending-up" class="icon-thin" %}
</div>
</div>
{% include ui/progress.html percentage=75 color="blue" size="sm" %}
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card">
<div class="card-body">
<div class="d-flex">
<div>Revenue</div>
<div class="ml-auto">
{% include parts/dropdown/days.html %}
</div>
</div>
<div class="d-flex align-items-baseline">
<div class="h1 mb-0 mr-2">$4,300</div>
<div class="mr-auto text-green">
24% {% include ui/icon.html icon="trending-up" class="icon-thin" %}
</div>
</div>
</div>
<div class="card-chart" id="card-chart-1"></div>
{% include js/charts.html id="card-chart-1" chart-id="revenue-bg" %}
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card">
<div class="card-body">
<div class="d-flex">
<div>New clients</div>
<div class="ml-auto">
{% include parts/dropdown/days.html %}
</div>
</div>
<div class="d-flex align-items-baseline">
<div class="h1 mb-3 mr-2">6,782</div>
<div class="mr-auto text-red">
5% {% include ui/icon.html icon="trending-down" class="icon-thin" %}
</div>
</div>
<div class="chart-sm" id="chart-active-users"></div>
{% include js/charts.html id="chart-active-users" chart-id="new-clients" %}
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card">
<div class="card-body">
<div class="d-flex">
<div>Active users</div>
<div class="ml-auto">
{% include parts/dropdown/days.html %}
</div>
</div>
<div class="d-flex align-items-baseline">
<div class="h1 mb-3 mr-2">2,986</div>
<div class="mr-auto text-green">
4% {% include ui/icon.html icon="trending-up" class="icon-thin" %}
</div>
</div>
<div class="chart-sm" id="chart-active-users2"></div>
{% include js/charts.html id="chart-active-users2" chart-id="active-users" %}
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card">
<div class="card-body">

84
pages/index.html
View File

@@ -5,6 +5,90 @@ menu: level-1.level-2.level-3.level-4
---
<div class="row row-cards">
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card">
<div class="card-body">
<div class="d-flex">
<div>Sales</div>
<div class="ml-auto">
{% include parts/dropdown/days.html %}
</div>
</div>
<div class="h1 mb-3">75%</div>
<div class="d-flex mb-2">
<div>Conversion rate</div>
<div class="ml-auto text-green">
24% {% include ui/icon.html icon="trending-up" class="icon-thin" %}
</div>
</div>
{% include ui/progress.html percentage=75 color="blue" size="sm" %}
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card">
<div class="card-body">
<div class="d-flex">
<div>Revenue</div>
<div class="ml-auto">
{% include parts/dropdown/days.html %}
</div>
</div>
<div class="d-flex align-items-baseline">
<div class="h1 mb-0 mr-2">$4,300</div>
<div class="mr-auto text-green">
24% {% include ui/icon.html icon="trending-up" class="icon-thin" %}
</div>
</div>
</div>
<div class="card-chart" id="card-chart-1"></div>
{% include js/charts.html id="card-chart-1" chart-id="revenue-bg" %}
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card">
<div class="card-body">
<div class="d-flex">
<div>New clients</div>
<div class="ml-auto">
{% include parts/dropdown/days.html %}
</div>
</div>
<div class="d-flex align-items-baseline">
<div class="h1 mb-3 mr-2">6,782</div>
<div class="mr-auto text-red">
5% {% include ui/icon.html icon="trending-down" class="icon-thin" %}
</div>
</div>
<div class="chart-sm" id="chart-active-users"></div>
{% include js/charts.html id="chart-active-users" chart-id="new-clients" %}
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card">
<div class="card-body">
<div class="d-flex">
<div>Active users</div>
<div class="ml-auto">
{% include parts/dropdown/days.html %}
</div>
</div>
<div class="d-flex align-items-baseline">
<div class="h1 mb-3 mr-2">2,986</div>
<div class="mr-auto text-green">
4% {% include ui/icon.html icon="trending-up" class="icon-thin" %}
</div>
</div>
<div class="chart-sm" id="chart-active-users2"></div>
{% include js/charts.html id="chart-active-users2" chart-id="active-users" %}
</div>
</div>
</div>
<div class="col-6 col-sm-4 col-xl-2">
{% include cards/small-stats-3.html number=43 title="New Tickets" percentage=6 %}
</div>

9
pages/typography.html
View File

@@ -193,7 +193,7 @@ done: true
</div>
</div>
<div class="col-12 col-md-8">
<div class="col-12 col-md-6">
<div class="card">
<div class="card-header">
<div class="card-title">Blockquotes</div>
@@ -209,15 +209,10 @@ done: true
Suspendisse maximus.</p>
<footer class="blockquote-footer">Julius Cesar</footer>
</blockquote>
<blockquote class="blockquote text-right">
<p>Nulla facilisi. Curabitur magna neque, maximus at pellentesque et, mattis et neque. Mauris quis
ligula.</p>
<footer class="blockquote-footer">Albert Einstein</footer>
</blockquote>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="col-12 col-md-6">
<div class="card">
<div class="card-header">
<div class="card-title">Text elements</div>

29
scss/_variables.scss
View File

@@ -27,7 +27,7 @@ $gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$blue: #2E7CD9 !default;
$blue: #2e7cd9 !default;
$azure: #45aaf2 !default;
$indigo: #6574cd !default;
$purple: #a55eea !default;
@@ -107,17 +107,30 @@ $avatar-sizes: (
$font-size-base: 1rem !default;
$font-weight-base: 400 !default;
$line-height-base: 1.5 !default;
$line-height-base: 1.375 !default;
$border-radius: 3px !default;
$h1-font-size: $font-size-base * 1.25 * 1.25 * 1.25 * 1.25 !default;
$h2-font-size: $font-size-base * 1.25 * 1.25 * 1.25 !default;
$h3-font-size: $font-size-base * 1.25 * 1.25 !default;
$h4-font-size: $font-size-base * 1.25 !default;
$h5-font-size: $font-size-base !default;
$h6-font-size: $font-size-base * .8 !default;
/**
Typography
*/
$headings-font-weight: 600 !default;
$small-font-size: 80% !default;
$h1-font-size: $font-size-base * 1.875 !default;
$h2-font-size: $font-size-base * 1.5 !default;
$h3-font-size: $font-size-base * 1.125 !default;
$h4-font-size: $font-size-base * 1 !default;
$h5-font-size: $font-size-base * .875 !default;
$h6-font-size: $font-size-base * .75 !default;
$blockquote-font-size: $h4-font-size !default;
$lead-font-size: $h3-font-size !default;
/**
Ribbons
*/
$ribbon-margin: .25rem !default;
$loader-size: 2.5rem !default;

5
scss/layout/_core.scss
View File

@@ -1,6 +1,11 @@
// stylelint-disable property-no-vendor-prefix
html {
height: 100%;
font-size: 16px;
@include media-breakpoint-down(md) {
font-size: 15px;
}
}
body {

2
scss/layout/_page.scss
View File

@@ -8,7 +8,7 @@
.page-title {
margin: 0;
font-size: $h4-font-size;
font-size: $h3-font-size;
font-weight: 400;
line-height: 2.5rem;
}

10
scss/ui/_typo.scss
View File

@@ -29,16 +29,8 @@ b {
font-weight: 600;
}
p,
ul,
ol,
blockquote {
margin-bottom: 1em;
}
blockquote {
padding-left: 2rem;
font-style: italic;
padding-left: 1rem;
color: $text-muted;
border-left: 2px solid $border-color;