Revamp statistic styles, move to flex

src/definitions/views/statistic.less

@@ -24,7 +24,8 @@
 
 /* Standalone */
 .ui.statistic {
-  display: @display;
+  display: inline-flex;
+  flex-direction: column;
   margin: @margin;
   max-width: @maxWidth;
 }
@@ -40,21 +41,27 @@
   margin-bottom: 0em;
 }
 
-/* Grouped */
-.ui.statistics > .statistic {
-  display: @elementDisplay;
-  float: @elementFloat;
-  margin: @elementMargin;
-  max-width: @elementMaxWidth;
-}
 
 
 /*******************************
             Group
 *******************************/
 
+/* Grouped */
 .ui.statistics {
-  display: @groupDisplay;
+  display: flex;
+  align-items: flex-start;
+  flex-wrap: wrap;
+}
+.ui.statistics > .statistic {
+  display: inline-flex;
+  flex: 0 1 auto;
+  flex-direction: column;
+  margin: @elementMargin;
+  max-width: @elementMaxWidth;
+}
+.ui.statistics {
+  display: flex;
   margin: @groupMargin;
 }
 
@@ -145,8 +152,9 @@
 
 .ui.statistics .statistic > .text.value,
 .ui.statistic > .text.value {
-  line-height: @textLabelLineHeight;
-  min-height: @textLabelMinHeight;
+  line-height: @textValueLineHeight;
+  min-height: @textValueMinHeight;
+  font-weight: @textValueFontWeight;
   text-align: center;
 }
 .ui.statistics .statistic > .text.value + .label,
@@ -170,20 +178,113 @@
             Variations
 *******************************/
 
+
+/*--------------
+      Count
+---------------*/
+
+
+.ui.ten.statistics {
+  margin: @itemGroupMargin;
+}
+.ui.ten.statistics .statistic {
+  min-width: @tenColumn;
+  margin: @itemMargin;
+}
+
+.ui.nine.statistics {
+  margin: @itemGroupMargin;
+}
+.ui.nine.statistics .statistic {
+  min-width: @nineColumn;
+  margin: @itemMargin;
+}
+
+.ui.eight.statistics {
+  margin: @itemGroupMargin;
+}
+.ui.eight.statistics .statistic {
+  min-width: @eightColumn;
+  margin: @itemMargin;
+}
+
+.ui.seven.statistics {
+  margin: @itemGroupMargin;
+}
+.ui.seven.statistics .statistic {
+  min-width: @sevenColumn;
+  margin: @itemMargin;
+}
+
+.ui.six.statistics {
+  margin: @itemGroupMargin;
+}
+.ui.six.statistics .statistic {
+  min-width: @sixColumn;
+  margin: @itemMargin;
+}
+
+.ui.five.statistics {
+  margin: @itemGroupMargin;
+}
+.ui.five.statistics .statistic {
+  min-width: @fiveColumn;
+  margin: @itemMargin;
+}
+
+.ui.four.statistics {
+  margin: @itemGroupMargin;
+}
+.ui.four.statistics .statistic {
+  min-width: @fourColumn;
+  margin: @itemMargin;
+}
+
+.ui.three.statistics {
+  margin: @itemGroupMargin;
+}
+.ui.three.statistics .statistic {
+  min-width: @threeColumn;
+  margin: @itemMargin;
+}
+
+.ui.two.statistics {
+  margin: @itemGroupMargin;
+}
+.ui.two.statistics .statistic {
+  min-width: @twoColumn;
+  margin: @itemMargin;
+}
+
+.ui.one.statistics {
+  margin: @itemGroupMargin;
+}
+.ui.one.statistics .statistic {
+  min-width: @oneColumn;
+  margin: @itemMargin;
+}
+
+
+
+
 /*--------------
    Horizontal
 ---------------*/
 
-.ui.horizontal.statistics,
 .ui.horizontal.statistic {
-  display: block;
+  flex-direction: row;
+  align-items: center;
+}
+.ui.horizontal.statistics {
+  flex-direction: column;
   margin: 0em;
-  max-width: 9999px;
+  max-width: none;
 }
 .ui.horizontal.statistics .statistic {
-  float: none;
+  flex-direction: row;
+  align-items: center;
+  max-width: none;
   margin: @horizontalGroupElementMargin;
-  max-width: 9999px;
 }
 
 .ui.horizontal.statistic > .text.value,
@@ -336,7 +437,7 @@
 }
 .ui.mini.statistics .statistic > .text.value,
 .ui.mini.statistic > .text.value {
-  font-size: @miniTextLabelSize;
+  font-size: @miniTextValueSize;
 }
 
 
@@ -351,7 +452,7 @@
 }
 .ui.tiny.statistics .statistic > .text.value,
 .ui.tiny.statistic > .text.value {
-  font-size: @tinyTextLabelSize;
+  font-size: @tinyTextValueSize;
 }
 
 /* Small */
@@ -365,7 +466,7 @@
 }
 .ui.small.statistics .statistic > .text.value,
 .ui.small.statistic > .text.value {
-  font-size: @smallTextLabelSize;
+  font-size: @smallTextValueSize;
 }
 
 /* Medium */
@@ -379,7 +480,7 @@
 }
 .ui.statistics .statistic > .text.value,
 .ui.statistic > .text.value {
-  font-size: @textLabelSize;
+  font-size: @textValueSize;
 }
 
 /* Large */
@@ -393,7 +494,7 @@
 }
 .ui.large.statistics .statistic > .text.value,
 .ui.large.statistic > .text.value {
-  font-size: @largeTextLabelSize;
+  font-size: @largeTextValueSize;
 }
 
 /* Huge */
@@ -407,7 +508,7 @@
 }
 .ui.huge.statistics .statistic > .text.value,
 .ui.huge.statistic > .text.value {
-  font-size: @hugeTextLabelSize;
+  font-size: @hugeTextValueSize;
 }
 
 

src/themes/default/views/statistic.variables

@@ -6,22 +6,18 @@
          View
 --------------------*/
 
-@display: inline-block;
 @margin: 1em 0em;
 @textAlign: center;
-@maxWidth: 175px;
+@maxWidth: auto;
 
 /* Group */
-@groupDisplay: block;
-@groupMargin: 1em -@horizontalSpacing;
-@horizontalSpacing: 1em;
+@horizontalSpacing: 1.5em;
 @rowSpacing: 2em;
+@groupMargin: 1em -@horizontalSpacing -@rowSpacing;
 
 /* Group Element */
-@elementFloat: left;
-@elementDisplay: block;
 @elementMargin: 0em @horizontalSpacing @rowSpacing;
-@elementMaxWidth: 175px;
+@elementMaxWidth: @maxWidth;
 
 /*-------------------
        Content
@@ -35,18 +31,19 @@
 @valueTextTransform: uppercase;
 
 /* Label */
-@labelSize: 1rem;
+@labelSize: @relativeMedium;
 @topLabelDistance: 0rem;
-@bottomLabelDistance: 0.25rem;
+@bottomLabelDistance: 0rem;
 @labelFont: @headerFont;
-@labelFontWeight: normal;
-@labelColor: @unselectedTextColor;
-@labelLineHeight: 1.33em;
-@labelTextTransform: none;
+@labelFontWeight: bold;
+@labelColor: @textColor;
+@labelLineHeight: @relativeLarge;
+@labelTextTransform: uppercase;
 
 /* Text */
-@textLabelLineHeight: 1em;
-@textLabelMinHeight: 2em;
+@textValueLineHeight: 1em;
+@textValueMinHeight: 2em;
+@textValueFontWeight: bold;
 
 /* Label Image */
 @imageHeight: 3rem;
@@ -68,30 +65,34 @@
 @rightFloatedMargin: 0em 0em 1em 2em;
 
 /* Inverted */
-@invertedValueColor: @invertedTextColor;
-@invertedLabelColor: @invertedLightTextColor;
+@invertedValueColor: @white;
+@invertedLabelColor: @invertedTextColor;
+
+/* Item Width */
+@itemGroupMargin: 0em 0em -@rowSpacing;
+@itemMargin: 0em 0em @rowSpacing;
 
 /* Size */
+@miniTextValueSize: 1rem;
 @miniValueSize: 1.5rem;
-@miniTextLabelSize: 1rem;
 @miniHorizontalValueSize: 1.5rem;
 
+@tinyTextValueSize: 1rem;
 @tinyValueSize: 2rem;
-@tinyTextLabelSize: 1rem;
 @tinyHorizontalValueSize: 2rem;
 
+@smallTextValueSize: 1rem;
 @smallValueSize: 3rem;
-@smallTextLabelSize: 1.5rem;
 @smallHorizontalValueSize: 2rem;
 
+@textValueSize: 2rem;
 @valueSize: 4rem;
-@textLabelSize: 2rem;
 @horizontalValueSize: 3rem;
 
+@largeTextValueSize: 2.5rem;
 @largeValueSize: 5rem;
-@largeTextLabelSize: 2.5rem;
 @largeHorizontalValueSize: 4rem;
 
+@hugeTextValueSize: 2.5rem;
 @hugeValueSize: 6rem;
-@hugeTextLabelSize: 2.5rem;
 @hugeHorizontalValueSize: 5rem;