Allow statistic label to be either on top or bottom

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>

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

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;
 
 /*--------------

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;