Complete statistics variables

server/documents/collections/form.html.eco

@@ -126,7 +126,7 @@ themes      : ['default', 'GitHub']
     ;
     </div>
     <div class="ui form segment">
-      <div class="ui selection dropdown">
+      <div class="ui selection dropdown" tabindex="2">
         <input type="hidden" name="gender">
         <div class="default text">Gender</div>
         <i class="dropdown icon"></i>
@@ -239,7 +239,7 @@ themes      : ['default', 'GitHub']
       </div>
       <div class="field">
         <label>Gender</label>
-        <div class="ui selection dropdown">
+        <div class="ui selection dropdown" tab-index="2">
           <div class="default text">Select</div>
           <i class="dropdown icon"></i>
           <input type="hidden" name="gender">
@@ -287,7 +287,7 @@ themes      : ['default', 'GitHub']
       </div>
       <div class="field">
         <label>Gender</label>
-        <div class="ui selection dropdown">
+        <div class="ui selection dropdown" tabindex="2">
           <div class="default text">Select Gender</div>
           <i class="dropdown icon"></i>
           <input type="hidden" name="gender">
@@ -374,7 +374,7 @@ themes      : ['default', 'GitHub']
       </div>
       <div class="field error">
         <label>Gender</label>
-        <div class="ui selection dropdown">
+        <div class="ui selection dropdown" tabindex="2">
           <div class="default text">Select</div>
           <i class="dropdown icon"></i>
           <input type="hidden" name="gender">

server/documents/views/statistic.html.eco

@@ -84,23 +84,23 @@ themes      : ['Default']
           22
         </div>
         <div class="label">
-          Breeds of Dog
+          Cities Named After Dogs
         </div>
       </div>
       <div class="statistic">
         <div class="text value">
-          Two Hundred
+          Two Million
         </div>
         <div class="label">
-          Dogs I've Owned
+          Homeless Dogs in USA
         </div>
       </div>
       <div class="statistic">
         <div class="value">
-          <i class="smile icon"></i>
+          <i class="plane icon"></i> 5
         </div>
         <div class="label">
-          Current Mood
+          Flights Piloted By Dogs
         </div>
       </div>
       <div class="statistic">
@@ -109,7 +109,7 @@ themes      : ['Default']
           11
         </div>
         <div class="label">
-          Puppies
+          Puppies Made This Page
         </div>
       </div>
     </div>
@@ -172,6 +172,78 @@ themes      : ['Default']
     </div>
   </div>
 
+  <div class="example">
+    <h4 class="ui header">Colored</h4>
+    <p>A statistic can be formatted to be different colors</p>
+    <div class="ui statistics">
+      <div class="yellow statistic">
+        <div class="value">
+          27
+        </div>
+        <div class="label">
+          Yellow Labradors
+        </div>
+      </div>
+      <div class="green statistic">
+        <div class="value">
+          8
+        </div>
+        <div class="label">
+          Green Poodles
+        </div>
+      </div>
+      <div class="blue statistic">
+        <div class="value">
+          28
+        </div>
+        <div class="label">
+          Blue Shiba-Inus
+        </div>
+      </div>
+      <div class="orange statistic">
+        <div class="value">
+          14
+        </div>
+        <div class="label">
+          Orange Chihuahuas
+        </div>
+      </div>
+      <div class="purple statistic">
+        <div class="value">
+          82
+        </div>
+        <div class="label">
+          Purple Labradoodles
+        </div>
+      </div>
+      <div class="pink statistic">
+        <div class="value">
+          1
+        </div>
+        <div class="label">
+          Pink Labradors
+        </div>
+      </div>
+      <div class="red statistic">
+        <div class="value">
+          22
+        </div>
+        <div class="label">
+          Red Mastifs
+        </div>
+      </div>
+      <div class="teal statistic">
+        <div class="value">
+          15
+        </div>
+        <div class="label">
+          Teal Cockerspaniels
+        </div>
+      </div>
+    </div>
+  </div>
+
+
   <div class="example">
     <h4 class="ui header">Inverted</h4>
     <p>A statistic can be formatted to fit on a dark background</p>

server/files/stylesheets/semantic.css

@@ -574,7 +574,7 @@ body.guide .main.container > * {
 #example .peek {
   position: absolute;
   top: 0px;
-  left: -230px;
+  left: -280px;
   width: 180px;
 /*
   -webkit-transition: padding 0.3s ease;
@@ -1458,7 +1458,7 @@ body.progress .ui.progress .bar {
 
 @media only screen and (min-width : 1725px) {
   #example .container {
-    width: 1100px;
+    width: 1000px;
   }
   #example .sticky-wrapper.stuck .peek {
     margin-left: -780px;
@@ -1468,15 +1468,6 @@ body.progress .ui.progress .bar {
   }
 }
 
-@media only screen and (min-width : 2300px) {
-  #example .container {
-    width: 1320px;
-  }
-  #example .sticky-wrapper.stuck .peek {
-    margin-left: -890px;
-  }
-}
-
 
 
 @media only screen and (max-width : 998px) {

src/definitions/views/statistic.less

@@ -22,11 +22,22 @@
            Statistic
 *******************************/
 
+/* Standalone */
 .ui.statistic {
   display: @display;
   margin: @margin;
+  max-width: @maxWidth;
 }
 
+/* Grouped */
+.ui.statistics > .statistic {
+  display: @elementDisplay;
+  float: @elementFloat;
+  margin: @elementMargin;
+  max-width: @elementMaxWidth;
+}
+
+
 /*******************************
             Group
 *******************************/
@@ -53,13 +64,6 @@
   margin-bottom: 0em;
 }
 
-/* Each */
-.ui.statistics > .statistic {
-  display: @elementDisplay;
-  float: @elementFloat;
-  margin: @elementMargin;
-}
-
 
 /*******************************
             Content
@@ -116,14 +120,13 @@
 
 .ui.statistics .statistic > .text.value,
 .ui.statistic > .text.value {
-  font-size: 2em;
-  line-height: 1em;
-  min-height: 4rem;
-  text-align: left;
+  line-height: @textLabelLineHeight;
+  min-height: @textLabelMinHeight;
+  text-align: center;
 }
 .ui.statistics .statistic > .text.value + .label,
 .ui.statistic > .text.value + .label {
-  text-align: left;
+  text-align: center;
 }
 
 /*--------------
@@ -132,8 +135,8 @@
 
 .ui.statistics .statistic > .value img,
 .ui.statistic > .value img {
-  max-height: 4rem;
-  vertical-align: top;
+  max-height: @imageHeight;
+  vertical-align: @imageVerticalAlign;
 }
 
 
@@ -150,17 +153,23 @@
 .ui.horizontal.statistic {
   display: block;
   margin: 0em;
+  max-width: 9999px;
 }
 .ui.horizontal.statistics .statistic {
   float: none;
   margin: @horizontalGroupElementMargin;
+  max-width: 9999px;
+}
+
+.ui.horizontal.statistic > .text.value,
+.ui.horizontal.statistics > .statistic > .text.value {
+  min-height: 0em !important;
 }
 
 .ui.horizontal.statistics .statistic > .value,
 .ui.horizontal.statistic > .value {
   display: inline-block;
   vertical-align: middle;
-  font-size: @horizontalValueSize;
 }
 .ui.horizontal.statistics .statistic > .label,
 .ui.horizontal.statistic > .label {
@@ -169,7 +178,50 @@
   margin: 0em 0em 0em @horizontalLabelDistance;
 }
 
+/*--------------
+     Colors
+---------------*/
 
+.ui.blue.statistics .statistic > .value,
+.ui.statistics .blue.statistic > .value,
+.ui.blue.statistic > .value {
+  color: @blueTextColor;
+}
+.ui.green.statistics .statistic > .value,
+.ui.statistics .green.statistic > .value,
+.ui.green.statistic > .value {
+  color: @greenTextColor;
+}
+.ui.orange.statistics .statistic > .value,
+.ui.statistics .orange.statistic > .value,
+.ui.orange.statistic > .value {
+  color: @orangeTextColor;
+}
+.ui.pink.statistics .statistic > .value,
+.ui.statistics .pink.statistic > .value,
+.ui.pink.statistic > .value {
+  color: @pinkTextColor;
+}
+.ui.purple.statistics .statistic > .value,
+.ui.statistics .purple.statistic > .value,
+.ui.purple.statistic > .value {
+  color: @purpleTextColor;
+}
+.ui.red.statistics .statistic > .value,
+.ui.statistics .red.statistic > .value,
+.ui.red.statistic > .value {
+  color: @redTextColor;
+}
+.ui.teal.statistics .statistic > .value,
+.ui.statistics .teal.statistic > .value,
+.ui.teal.statistic > .value {
+  color: @tealTextColor;
+}
+.ui.yellow.statistics .statistic > .value,
+.ui.statistics .yellow.statistic > .value,
+.ui.yellow.statistic > .value {
+  color: @yellowTextColor;
+}
 
 /*--------------
     Floated
@@ -193,4 +245,52 @@
   color: @invertedLabelColor;
 }
 
+
+/*--------------
+     Sizes
+---------------*/
+
+.ui.statistics .statistic > .value,
+.ui.statistic > .value {
+  font-size: @valueSize;
+}
+.ui.horizontal.statistics .statistic > .value,
+.ui.horizontal.statistic > .value {
+  font-size: @horizontalValueSize;
+}
+.ui.statistics .statistic > .text.value,
+.ui.statistic > .text.value {
+  font-size: @textLabelSize;
+}
+
+/* Small */
+.ui.small.statistics .statistic > .value,
+.ui.small.statistic > .value {
+  font-size: @smallValueSize;
+}
+.ui.small.horizontal.statistics .statistic > .value,
+.ui.small.horizontal.statistic > .value {
+  font-size: @smallHorizontalValueSize;
+}
+.ui.small.statistics .statistic > .text.value,
+.ui.small.statistic > .text.value {
+  font-size: @smallTextLabelSize;
+}
+
+/* Large */
+.ui.large.statistics .statistic > .value,
+.ui.large.statistic > .value {
+  font-size: @largeValueSize;
+}
+.ui.large.horizontal.statistics .statistic > .value,
+.ui.large.horizontal.statistic > .value {
+  font-size: @largeHorizontalValueSize;
+}
+.ui.large.statistics .statistic > .text.value,
+.ui.large.statistic > .text.value {
+  font-size: @largeTextLabelSize;
+}
+
+
+
 .loadUIOverrides();

src/themes/packages/default/views/statistic.variables

@@ -9,6 +9,7 @@
 @display: inline-block;
 @margin: 1em 0em;
 @textAlign: center;
+@maxWidth: 175px;
 
 /* Group */
 @groupDisplay: block;
@@ -18,34 +19,41 @@
 @elementFloat: left;
 @elementDisplay: block;
 @elementMargin: 0em @horizontalSpacing @rowSpacing;
+@elementMaxWidth: 175px;
 
 /*-------------------
-      Elements
+       Content
 --------------------*/
 
 /* Value */
 @valueFont: @pageFont;
 @valueFontWeight: normal;
 @valueLineHeight: 1em;
-@valueSize: 4em;
 @valueColor: @black;
 @valueTextTransform: uppercase;
 
 /* Label */
+@labelSize: 1rem;
 @labelDistance: 0.25em;
 @labelFont: @headerFont;
 @labelFontWeight: normal;
-@labelSize: 1em;
 @labelColor: @unselectedTextColor;
 @labelLineHeight: 1.33em;
 @labelTextTransform: none;
 
+/* Text */
+@textLabelLineHeight: 1em;
+@textLabelMinHeight: 2em;
+
+/* Label Image */
+@imageHeight: 3rem;
+@imageVerticalAlign: baseline;
+
 /*-------------------
       Types
 --------------------*/
 
 @horizontalGroupElementMargin: 1em 0em;
-@horizontalValueSize: 3em;
 @horizontalLabelDistance: 0.75em;
 
 /*-------------------
@@ -59,3 +67,14 @@
 @invertedLabelColor: @invertedLightTextColor;
 
 /* Size */
+@smallValueSize: 3rem;
+@smallTextLabelSize: 1.5rem;
+@smallHorizontalValueSize: 2rem;
+
+@valueSize: 4rem;
+@textLabelSize: 2rem;
+@horizontalValueSize: 3rem;
+
+@largeValueSize: 5rem;
+@largeTextLabelSize: 2.5rem;
+@largeHorizontalValueSize: 4rem;