Replace inline CSS for diaper change types card and prepare for other sass styling.

babyblotter/static_site/scss/_functions.scss

@@ -0,0 +1,3 @@
+@import "../../../node_modules/bootstrap/scss/functions";
+
+/* Baby Blotter site-wide custom functions. */

babyblotter/static_site/scss/_variables.scss

@@ -0,0 +1,4 @@
+@import "functions";
+@import "../../../node_modules/bootstrap/scss/variables";
+
+/* Baby Blotter site-wide custom variables. */

babyblotter/static_site/scss/babyblotter.scss

@@ -1,4 +1,4 @@
-@import "../../../node_modules/bootstrap/scss/functions";
+@import "functions";
-@import "../../../node_modules/bootstrap/scss/variables";
+@import "variables";
 @import "custom";
 @import "../../../node_modules/bootstrap/scss/bootstrap";

dashboard/static/scss/cards.scss

@@ -0,0 +1,7 @@
+@import "../../../babyblotter/static_site/scss/variables";
+
+.card-diaperchange {
+  .progress {
+    height: $progress-height * 2;
+  }
+}

dashboard/templates/cards/diaperchange.html

@@ -1,4 +1,4 @@
-<div class="card border-danger mb-3">
+<div class="card card-diaperchange border-danger mb-3">
     <div class="card-header text-white bg-danger h4">
         <i class="fa fa-trash pull-left" aria-hidden="true"></i>
         {% block header %}{% endblock %}

dashboard/templates/cards/diaperchange_types.html

@@ -9,13 +9,19 @@
 {% block content %}
     {% for date, info in stats.items %}
         <div class="progress mt-3">
+
+            {% if info.wet_pct > 0 %}
                 <div class="progress-bar bg-info lead"
                      role="progressbar"
-                 style="width: {{ info.wet_pct }}%; height: 30px; line-height: 30px">{{ info.wet }} wet</div>
+                     style="width: {{ info.wet_pct }}%;">{{ info.wet }}&nbsp;wet</div>
+            {% endif %}
+
+            {% if info.solid_pct > 0 %}
                 <div class="progress-bar bg-dark lead"
                      role="progressbar"
-                 style="width: {{ info.solid_pct }}%; height: 30px; line-height: 30px">
+                     style="width: {{ info.solid_pct }}%;">
-                <strong>{{ info.solid }}</strong> solid</div>
+                    <strong>{{ info.solid }}</strong>&nbsp;solid</div>
+            {% endif %}
         </div>
         <div class="text-center text-dark small">
             {{ date|date:'D' }}

dashboard/templates/cards/feeding.html

@@ -1,4 +1,4 @@
-<div class="card border-primary mb-3">
+<div class="card card-feeding border-primary mb-3">
     <div class="card-header text-white bg-primary h4">
         <i class="fa fa-spoon pull-left" aria-hidden="true"></i>
         {% block header %}{% endblock %}

dashboard/templates/cards/sleep.html

@@ -1,4 +1,4 @@
-<div class="card border-dark mb-3">
+<div class="card card-sleep border-dark mb-3">
     <div class="card-header text-white bg-dark h4">
         <i class="fa fa-bed pull-left" aria-hidden="true"></i>
         {% block header %}{% endblock %}

dashboard/templates/cards/tummytime.html

@@ -1,4 +1,4 @@
-<div class="card border-success mb-3">
+<div class="card card-tummytime border-success mb-3">
     <div class="card-header text-white bg-success h4">
         <i class="fa fa-smile-o pull-left" aria-hidden="true"></i>
         {% block header %}{% endblock %}

gulpfile.js

@@ -21,7 +21,10 @@ gulp.task('app:scripts', function() {
 
 gulp.task('app:styles', function (cb) {
     pump([
-            gulp.src('babyblotter/static_site/scss/babyblotter.scss'),
+            gulp.src([
+                'babyblotter/static_site/scss/babyblotter.scss',
+                '*/static/scss/*.scss'
+            ]),
             sass().on('error', sass.logError),
             concat('app.css'),
             gulp.dest('babyblotter/static/babyblotter/css/')