From 4dea9ffaa3fecb3413b52dee502f466cce7c0b98 Mon Sep 17 00:00:00 2001
From: jlukic <jacklukic@gmail.com>
Date: Fri, 15 Aug 2014 16:51:41 -0400
Subject: [PATCH] Allow statistic label to be either on top or bottom

---
 server/documents/views/statistic.html.eco         | 12 +++++++++++-
 src/definitions/views/statistic.less              | 15 ++++++++++++++-
 .../packages/default/collections/table.variables  |  3 ---
 .../packages/default/views/statistic.variables    |  4 +++-
 4 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/server/documents/views/statistic.html.eco b/server/documents/views/statistic.html.eco
index ace53a161..58be18121 100644
--- a/server/documents/views/statistic.html.eco
+++ b/server/documents/views/statistic.html.eco
@@ -31,7 +31,7 @@ themes      : ['Default']
 
   <div class="example">
     <h4 class="ui header">Statistic</h4>
-    <p>A statistic</p>
+    <p>A statistic can display a value with a label above or below it.</p>
     <div class="ui statistic">
       <div class="value">
         22
@@ -41,6 +41,16 @@ themes      : ['Default']
       </div>
     </div>
   </div>
+  <div class="another example">
+    <div class="ui statistic">
+      <div class="label">
+        Famous Dogs
+      </div>
+      <div class="value">
+        414
+      </div>
+    </div>
+  </div>
 
   <div class="example">
     <h4 class="ui header">Statistic</h4>
diff --git a/src/definitions/views/statistic.less b/src/definitions/views/statistic.less
index 6dcf2b547..94c896420 100755
--- a/src/definitions/views/statistic.less
+++ b/src/definitions/views/statistic.less
@@ -86,7 +86,7 @@
 }
 
 /*--------------
-      Label
+     Label
 ---------------*/
 
 .ui.statistics .statistic > .label,
@@ -100,6 +100,19 @@
   text-align: @textAlign;
 }
 
+/* Top Label */
+.ui.statistics .statistic > .label + .value,
+.ui.statistic > .label + .value {
+  margin-top: @labelDistance;
+}
+
+/* Bottom Label */
+.ui.statistics .statistic > .value + .label,
+.ui.statistic > .value + .label {
+  margin-top: @labelDistance;
+}
+
+
 
 /*******************************
              Types
diff --git a/src/themes/packages/default/collections/table.variables b/src/themes/packages/default/collections/table.variables
index 253a15678..7c32c3afe 100644
--- a/src/themes/packages/default/collections/table.variables
+++ b/src/themes/packages/default/collections/table.variables
@@ -60,14 +60,11 @@
 /* Responsive Size */
 @responsiveHeaderDisplay: block;
 @responsiveFooterDisplay: block;
-
 @responsiveRowVerticalPadding: 1em;
 @responsiveRowBoxShadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset !important;
-
 @responsiveCellVerticalPadding: 0.25em;
 @responsiveCellHorizontalPadding: 0.75em;
 @responsiveCellBoxShadow: none !important;
-
 @responsiveStatusColor: transparent;
 
 /*--------------
diff --git a/src/themes/packages/default/views/statistic.variables b/src/themes/packages/default/views/statistic.variables
index e40993586..12633491e 100644
--- a/src/themes/packages/default/views/statistic.variables
+++ b/src/themes/packages/default/views/statistic.variables
@@ -16,6 +16,8 @@
 @groupMargin: 1em -@horizontalSpacing;
 @horizontalSpacing: 1em;
 @rowSpacing: 2em;
+
+/* Group Element */
 @elementFloat: left;
 @elementDisplay: block;
 @elementMargin: 0em @horizontalSpacing @rowSpacing;
@@ -34,7 +36,7 @@
 
 /* Label */
 @labelSize: 1rem;
-@labelDistance: 0.25em;
+@labelDistance: 0.25rem;
 @labelFont: @headerFont;
 @labelFontWeight: normal;
 @labelColor: @unselectedTextColor;