mirror of
https://github.com/tabler/tabler.git
synced 2026-08-09 21:02:22 +04:00
card stats, dark mode
This commit is contained in:
chomik
@@ -1,5 +1,5 @@
|
||||
<div class="dropdown">
|
||||
<a class="dropdown-toggle" href="#" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<a class="dropdown-toggle text-muted-light" href="#" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
{{ include.value | default: 'Last 7 days' }}
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
|
||||
|
||||
+42
-9
@@ -8,7 +8,7 @@ layout: default
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex">
|
||||
<div class="text-muted">Sales</div>
|
||||
<div>Sales</div>
|
||||
<div class="ml-auto">
|
||||
{% include parts/dropdown/days.html %}
|
||||
</div>
|
||||
@@ -17,7 +17,7 @@ layout: default
|
||||
<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="ml-1 icon-thin" %}
|
||||
24% {% include ui/icon.html icon="trending-up" class="icon-thin" %}
|
||||
</div>
|
||||
</div>
|
||||
{% include ui/progress.html percentage=75 color="blue" size="sm" %}
|
||||
@@ -28,12 +28,17 @@ layout: default
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex">
|
||||
<div class="text-muted">Revenue</div>
|
||||
<div>Revenue</div>
|
||||
<div class="ml-auto">
|
||||
{% include parts/dropdown/days.html %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="h1 mb-3">$452,300</div>
|
||||
<div class="d-flex align-items-baseline">
|
||||
<div class="h1 mb-3 mr-2">$452,300</div>
|
||||
<div class="mr-auto text-green">
|
||||
24% {% include ui/icon.html icon="trending-up" class="icon-thin" %}
|
||||
</div>
|
||||
</div>
|
||||
{% include ui/sparkline.html data="4,3,6,5,4,5,4,6,7,6,5,7,8,7,8,9,8,9,10" type="line" %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -42,12 +47,17 @@ layout: default
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex">
|
||||
<div class="text-muted">New clients</div>
|
||||
<div>New clients</div>
|
||||
<div class="ml-auto">
|
||||
{% include parts/dropdown/days.html %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="h1 mb-3">6,782</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>
|
||||
{% include ui/sparkline.html data="4,3,6,5,4,5,4,6,7,6,5,7,8,7,8,9,8,9,10" type="line" color="purple" %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -56,17 +66,40 @@ layout: default
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex">
|
||||
<div class="text-muted">New clients</div>
|
||||
<div>Active users</div>
|
||||
<div class="ml-auto">
|
||||
{% include parts/dropdown/days.html %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="h1 mb-3">184,730</div>
|
||||
<div class="d-flex align-items-baseline">
|
||||
<div class="h1 mb-3 mr-2">$452,300</div>
|
||||
<div class="mr-auto text-green">
|
||||
4% {% include ui/icon.html icon="trending-up" class="icon-thin" %}
|
||||
</div>
|
||||
</div>
|
||||
{% include ui/sparkline.html data="4,3,6,5,4,5,4,6,7,6,5,7,8,7,8,9,8,9,10" type="bar" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3">5</div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div>Traffic monitor</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="text-label">Inbound</div>
|
||||
<div class="h3">45GB</div>
|
||||
{% include ui/sparkline.html data="4,3,6,5,4,5,4,6,7,6,5,7,8,7,8,9,8,9,10" type="bar" color="azure" %}
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="text-label">Outbound</div>
|
||||
<div class="h3">16GB</div>
|
||||
{% include ui/sparkline.html data="4,3,6,5,4,5,4,6,7,6,5,7,8,7,8,9,8,9,10" type="bar" color="red" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3">6</div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3">7</div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3">8</div>
|
||||
|
||||
+6
-5
@@ -1,21 +1,22 @@
|
||||
body.theme-dark {
|
||||
color: rgba(255, 255, 255, .8);
|
||||
color: #afbdd1;
|
||||
background: $dark;
|
||||
|
||||
.card,
|
||||
.header,
|
||||
.sidebar,
|
||||
.sidenav,
|
||||
.topnav {
|
||||
background: $body-bg-dark;
|
||||
.topnav,
|
||||
.dropdown-menu {
|
||||
background: #2b3648;
|
||||
}
|
||||
|
||||
.text-default {
|
||||
color: rgba(255, 255, 255, .8);
|
||||
color: #afbdd1 !important;
|
||||
}
|
||||
|
||||
.avatar-list-stacked .avatar {
|
||||
box-shadow: 0 0 0 2px $body-bg-dark;
|
||||
box-shadow: 0 0 0 2px #2b3648;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -45,7 +45,6 @@ $black: #121212 !default;
|
||||
$white: #fff !default;
|
||||
|
||||
$body-bg: #f5f7fb !default;
|
||||
$body-bg-dark: mix(#fff, $dark, 8%) !default;
|
||||
|
||||
$text-color: #495057 !default;
|
||||
$text-muted: #778ca2 !default;
|
||||
@@ -116,7 +115,7 @@ $h2-font-size: 1.625rem !default;
|
||||
$h3-font-size: 1.25rem !default;
|
||||
$h4-font-size: 1.125rem !default;
|
||||
$h5-font-size: $font-size-base !default;
|
||||
$h6-font-size: .875rem !default;
|
||||
$h6-font-size: .75rem !default;
|
||||
|
||||
$ribbon-margin: .25rem !default;
|
||||
|
||||
|
||||
@@ -12,6 +12,12 @@
|
||||
|
||||
.text-muted-light { color: $text-muted-light !important; }
|
||||
|
||||
.text-label {
|
||||
color: $text-muted;
|
||||
text-transform: uppercase;
|
||||
font-size: $h6-font-size;
|
||||
}
|
||||
|
||||
.tracking-tight { letter-spacing: -.05em !important; }
|
||||
.tracking-normal { letter-spacing: 0 !important; }
|
||||
.tracking-wide { letter-spacing: .05em !important; }
|
||||
|
||||
Reference in New Issue
Block a user