charts on homepage

_config.yml

@@ -68,7 +68,7 @@ colors:
     hex: '#f66d9b'
     name: Pink
   red:
-    hex: '#e74c3c'
+    hex: '#cd201f'
     name: Red
   orange:
     hex: '#fd9644'
@@ -103,4 +103,4 @@ docs-menu:
 - title: Getting started
   pages: [index]
 - title: Components
-  pages: [avatars, typography, alerts, buttons, colors, cards]
+  pages: [avatars, typography, alerts, buttons, colors, cards]

js/app/charts.js

@@ -14,7 +14,7 @@
                 fillColor = uikit.colors[color];
 
             if (type === 'donut' || type === 'pie') {
-                fillColor = [fillColor, 'rgba(0, 0, 0, .064)'];
+                fillColor = [fillColor, uikit.hexToRgbA(fillColor, .1)];
             } else if (type === 'bar') {
                 fillColor = [fillColor];
             } else if (type === 'line') {

pages/_includes/cards/card.html

@@ -3,6 +3,7 @@
 	<div class="card-status{% if include.status-left %} card-status-left{% endif %} bg-{{ include.status | default: include.status-left }}"></div>
 	{% endif %}
 
+   {% unless include.hide-header %}
 	<div class="card-header">
 		<h3 class="card-title">{{ include.title | default: 'Card title' }}</h3>
 
@@ -36,23 +37,29 @@
 		</div>
 		{% endunless %}
 	</div>
-	{% if include.alert %}
+   {% endunless %}
+
+   {% 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.body-title %}
+      <h3 class="card-title">{{ include.body-title }}</h3>
+      {% endif %}
+
 		{% if include.body %}
-		{{ include.body }}
+		   {{ include.body }}
 		{% elsif include.show-loader %}
 		<div class="dimmer active">
 			<div class="loader"></div>
 			<div class="dimmer-content">
-				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!
+            <p>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!</p>
 			</div>
 		</div>
 		{% 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!
+		<p>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!</p>
 		{% endif %}
 	</div>
 	{% if include.show-footer %}

pages/_includes/cards/user-card.html

@@ -5,7 +5,7 @@
 		<div class="float-{% if include.right %}right{% else %}left mr-3{% endif %}">
 			{% include ui/avatar.html person=person %}
 		</div>
-		<div class="card-title m-0">{{ person.full_name }}</div>
+		<div class="card-title mb-1">{{ person.full_name }}</div>
 		<div class="text-muted">{{ person.job_title }}</div>
 	</div>
-</a>
+</a>

pages/cards.html

@@ -16,7 +16,7 @@ page-title: Cards
       {% include cards/card.html title="Card green" status-left="green" %}
    </div>
    <div class="col-md-6 col-xl-4">
-      {% include cards/card.html title="Card orange" status-bottom="orange"  %}
+      {% include cards/card.html body-title="Card with body title" hide-header=true %}
    </div>
    <div class="col-md-6 col-xl-4">
       {% include cards/card.html title="Card red" status="red" %}

pages/index.html

@@ -57,10 +57,10 @@ page-title: Dashboard
       {% include cards/small-stats.html color="green" icon="shopping-cart" count="78" subtitle="Orders" description="32 shipped" %}
    </div>
    <div class="col-sm-6 col-lg-3">
-      {% include cards/small-stats.html color="red" icon="users" count="1352" subtitle="Members" description="163 registered today" %}
+      {% include cards/small-stats.html chart-position="left" chart-type="donut" chart-data="56/100" chart-label="56%" color="red" count="1352" subtitle="Members" description="163 registered today" %}
    </div>
    <div class="col-sm-6 col-lg-3">
-      {% include cards/small-stats.html color="yellow" icon="message-square" count="132" subtitle="Comments" description="16 waiting" %}
+      {% include cards/small-stats.html color="yellow" chart-type="pie" chart-data="22/100" color="yellow" count="132" subtitle="Comments" description="16 waiting" %}
    </div>
 </div>
 

scss/ui/_cards.scss

@@ -89,7 +89,6 @@
 
 .card-title {
   display: block;
-  margin: 0;
   font-size: $h4-font-size;
   font-weight: 500;
   line-height: 1;
@@ -98,6 +97,10 @@
   @at-root a#{&}:hover {
     color: inherit;
   }
+
+  .card-header & {
+    margin: 0;
+  }
 }
 
 .card-body {
@@ -110,6 +113,9 @@
   overflow: auto;
 }
 
+/**
+Card optinos
+ */
 .card-options {
   top: 1.5rem;
   right: .75rem;
@@ -123,6 +129,9 @@
   min-width: 1rem;
 }
 
+/**
+Card status
+ */
 .card-status {
   height: 2px;
   border-radius: $card-border-radius $card-border-radius 0 0;
@@ -132,6 +141,9 @@
   border-radius: 0 0 $card-border-radius $card-border-radius;
 }
 
+/**
+Card table
+ */
 .card-table {
   margin-bottom: 0;
 
@@ -162,6 +174,9 @@
   }
 }
 
+/*
+Card code
+ */
 .card-code {
   background: $dark;
 
@@ -177,13 +192,3 @@
     background: transparent;
   }
 }
-
-//.card-nav {
-//	background: $min-black;
-//
-//	.nav-link {
-//		&.active {
-//			background: #fff;
-//		}
-//	}
-//}