Merge branch 'next' into patch-1

RELEASE-NOTES.md

@@ -1,6 +1,17 @@
 ## RELEASE NOTES
 
-### Version 2.3.1 - Mar 19, 2018
+### Version 2.3.2 - June 17, 2018
+
+**Enhancements**
+- **Global** - Add `hover` `down` `active` and `focus` variables for `invertedPrimaryColor` and `invertedSecondaryColor`
+- **Button** - Add `inverted` and `inverted basic` variations for `primary` and `secondary` buttons #6242 **Thanks @hammy2899**
+
+**Bugs**
+- **Statistics** - Fix issue where grouped statistics would have excess bottom margin if they are `:last-child`
+- **Label** - Fix `basic label` does not use `@basicBackground` variables **Thanks @levithomson**
+- **
+
+### Version 2.3.1 - Mar 18, 2018
 
 > **A Special Message about Flex Modals**
 > There will be an update shortly to resolve issues related to flex modals when using multiple modals and `detachable: false`, in order to not hold up this release, we've decided to move forward without a fix.

src/definitions/elements/button.less

@@ -3124,6 +3124,74 @@
   margin-left: -@basicColoredBorderSize;
 }
 
+/* Inverted */
+.ui.inverted.primary.buttons .button,
+.ui.inverted.primary.button {
+  background-color: transparent;
+  box-shadow: 0px 0px 0px @invertedBorderSize @lightPrimaryColor inset !important;
+  color: @lightPrimaryColor;
+}
+.ui.inverted.primary.buttons .button:hover,
+.ui.inverted.primary.button:hover,
+.ui.inverted.primary.buttons .button:focus,
+.ui.inverted.primary.button:focus,
+.ui.inverted.primary.buttons .button.active,
+.ui.inverted.primary.button.active,
+.ui.inverted.primary.buttons .button:active,
+.ui.inverted.primary.button:active {
+  box-shadow: none !important;
+  color: @lightPrimaryTextColor;
+}
+.ui.inverted.primary.buttons .button:hover,
+.ui.inverted.primary.button:hover {
+  background-color: @lightPrimaryColorHover;
+}
+.ui.inverted.primary.buttons .button:focus,
+.ui.inverted.primary.button:focus {
+  background-color: @lightPrimaryColorFocus;
+}
+.ui.inverted.primary.buttons .active.button,
+.ui.inverted.primary.active.button {
+  background-color: @lightPrimaryColorActive;
+}
+.ui.inverted.primary.buttons .button:active,
+.ui.inverted.primary.button:active {
+  background-color: @lightPrimaryColorDown;
+}
+
+/* Inverted Basic */
+.ui.inverted.primary.basic.buttons .button,
+.ui.inverted.primary.buttons .basic.button,
+.ui.inverted.primary.basic.button {
+  background-color: transparent;
+  box-shadow: @basicInvertedBoxShadow !important;
+  color: @white !important;
+}
+.ui.inverted.primary.basic.buttons .button:hover,
+.ui.inverted.primary.buttons .basic.button:hover,
+.ui.inverted.primary.basic.button:hover {
+  box-shadow: 0px 0px 0px @invertedBorderSize @lightPrimaryColorHover inset !important;
+  color: @lightPrimaryColor !important;
+}
+.ui.inverted.primary.basic.buttons .button:focus,
+.ui.inverted.primary.basic.buttons .button:focus,
+.ui.inverted.primary.basic.button:focus {
+  box-shadow: 0px 0px 0px @invertedBorderSize @lightPrimaryColorFocus inset !important;
+  color: @lightPrimaryColor !important;
+}
+.ui.inverted.primary.basic.buttons .active.button,
+.ui.inverted.primary.buttons .basic.active.button,
+.ui.inverted.primary.basic.active.button {
+  box-shadow: 0px 0px 0px @invertedBorderSize @lightPrimaryColorActive inset !important;
+  color: @lightPrimaryColor !important;
+}
+.ui.inverted.primary.basic.buttons .button:active,
+.ui.inverted.primary.buttons .basic.button:active,
+.ui.inverted.primary.basic.button:active {
+  box-shadow: 0px 0px 0px @invertedBorderSize @lightPrimaryColorDown inset !important;
+  color: @lightPrimaryColor !important;
+}
+
 /*-------------------
       Secondary
 --------------------*/
@@ -3199,6 +3267,74 @@
   margin-left: -@basicColoredBorderSize;
 }
 
+/* Inverted */
+.ui.inverted.secondary.buttons .button,
+.ui.inverted.secondary.button {
+  background-color: transparent;
+  box-shadow: 0px 0px 0px @invertedBorderSize @lightSecondaryColor inset !important;
+  color: @lightSecondaryColor;
+}
+.ui.inverted.secondary.buttons .button:hover,
+.ui.inverted.secondary.button:hover,
+.ui.inverted.secondary.buttons .button:focus,
+.ui.inverted.secondary.button:focus,
+.ui.inverted.secondary.buttons .button.active,
+.ui.inverted.secondary.button.active,
+.ui.inverted.secondary.buttons .button:active,
+.ui.inverted.secondary.button:active {
+  box-shadow: none !important;
+  color: @lightSecondaryTextColor;
+}
+.ui.inverted.secondary.buttons .button:hover,
+.ui.inverted.secondary.button:hover {
+  background-color: @lightSecondaryColorHover;
+}
+.ui.inverted.secondary.buttons .button:focus,
+.ui.inverted.secondary.button:focus {
+  background-color: @lightSecondaryColorFocus;
+}
+.ui.inverted.secondary.buttons .active.button,
+.ui.inverted.secondary.active.button {
+  background-color: @lightSecondaryColorActive;
+}
+.ui.inverted.secondary.buttons .button:active,
+.ui.inverted.secondary.button:active {
+  background-color: @lightSecondaryColorDown;
+}
+
+/* Inverted Basic */
+.ui.inverted.secondary.basic.buttons .button,
+.ui.inverted.secondary.buttons .basic.button,
+.ui.inverted.secondary.basic.button {
+  background-color: transparent;
+  box-shadow: @basicInvertedBoxShadow !important;
+  color: @white !important;
+}
+.ui.inverted.secondary.basic.buttons .button:hover,
+.ui.inverted.secondary.buttons .basic.button:hover,
+.ui.inverted.secondary.basic.button:hover {
+  box-shadow: 0px 0px 0px @invertedBorderSize @lightSecondaryColorHover inset !important;
+  color: @lightSecondaryColor !important;
+}
+.ui.inverted.secondary.basic.buttons .button:focus,
+.ui.inverted.secondary.basic.buttons .button:focus,
+.ui.inverted.secondary.basic.button:focus {
+  box-shadow: 0px 0px 0px @invertedBorderSize @lightSecondaryColorFocus inset !important;
+  color: @lightSecondaryColor !important;
+}
+.ui.inverted.secondary.basic.buttons .active.button,
+.ui.inverted.secondary.buttons .basic.active.button,
+.ui.inverted.secondary.basic.active.button {
+  box-shadow: 0px 0px 0px @invertedBorderSize @lightSecondaryColorActive inset !important;
+  color: @lightSecondaryColor !important;
+}
+.ui.inverted.secondary.basic.buttons .button:active,
+.ui.inverted.secondary.buttons .basic.button:active,
+.ui.inverted.secondary.basic.button:active {
+  box-shadow: 0px 0px 0px @invertedBorderSize @lightSecondaryColorDown inset !important;
+  color: @lightSecondaryColor !important;
+}
+
 /*---------------
     Positive
 ----------------*/
@@ -3423,4 +3559,3 @@
 }
 
 .loadUIOverrides();
-

src/definitions/elements/label.less

@@ -566,7 +566,7 @@ a.ui.red.label:hover{
 }
 /* Basic */
 .ui.basic.red.label {
-  background-color: @white !important;
+  background-color: @basicBackground !important;
   color: @red !important;
   border-color: @red !important;
 }
@@ -602,7 +602,7 @@ a.ui.orange.label:hover{
 }
 /* Basic */
 .ui.basic.orange.label {
-  background-color: @white !important;
+  background-color: @basicBackground !important;
   color: @orange !important;
   border-color: @orange !important;
 }
@@ -638,7 +638,7 @@ a.ui.yellow.label:hover{
 }
 /* Basic */
 .ui.basic.yellow.label {
-  background-color: @white !important;
+  background-color: @basicBackground !important;
   color: @yellow !important;
   border-color: @yellow !important;
 }
@@ -674,7 +674,7 @@ a.ui.olive.label:hover{
 }
 /* Basic */
 .ui.basic.olive.label {
-  background-color: @white !important;
+  background-color: @basicBackground !important;
   color: @olive !important;
   border-color: @olive !important;
 }
@@ -710,7 +710,7 @@ a.ui.green.label:hover{
 }
 /* Basic */
 .ui.basic.green.label {
-  background-color: @white !important;
+  background-color: @basicBackground !important;
   color: @green !important;
   border-color: @green !important;
 }
@@ -746,7 +746,7 @@ a.ui.teal.label:hover{
 }
 /* Basic */
 .ui.basic.teal.label {
-  background-color: @white !important;
+  background-color: @basicBackground !important;
   color: @teal !important;
   border-color: @teal !important;
 }
@@ -782,7 +782,7 @@ a.ui.blue.label:hover{
 }
 /* Basic */
 .ui.basic.blue.label {
-  background-color: @white !important;
+  background-color: @basicBackground !important;
   color: @blue !important;
   border-color: @blue !important;
 }
@@ -818,7 +818,7 @@ a.ui.violet.label:hover{
 }
 /* Basic */
 .ui.basic.violet.label {
-  background-color: @white !important;
+  background-color: @basicBackground !important;
   color: @violet !important;
   border-color: @violet !important;
 }
@@ -854,7 +854,7 @@ a.ui.purple.label:hover{
 }
 /* Basic */
 .ui.basic.purple.label {
-  background-color: @white !important;
+  background-color: @basicBackground !important;
   color: @purple !important;
   border-color: @purple !important;
 }
@@ -890,7 +890,7 @@ a.ui.pink.label:hover{
 }
 /* Basic */
 .ui.basic.pink.label {
-  background-color: @white !important;
+  background-color: @basicBackground !important;
   color: @pink !important;
   border-color: @pink !important;
 }
@@ -926,7 +926,7 @@ a.ui.brown.label:hover{
 }
 /* Basic */
 .ui.basic.brown.label {
-  background-color: @white !important;
+  background-color: @basicBackground !important;
   color: @brown !important;
   border-color: @brown !important;
 }
@@ -962,7 +962,7 @@ a.ui.grey.label:hover{
 }
 /* Basic */
 .ui.basic.grey.label {
-  background-color: @white !important;
+  background-color: @basicBackground !important;
   color: @grey !important;
   border-color: @grey !important;
 }
@@ -998,7 +998,7 @@ a.ui.black.label:hover{
 }
 /* Basic */
 .ui.basic.black.label {
-  background-color: @white !important;
+  background-color: @basicBackground !important;
   color: @black !important;
   border-color: @black !important;
 }

src/definitions/views/statistic.less

@@ -77,9 +77,6 @@
 .ui.statistics:first-child {
   margin-top: 0em;
 }
-.ui.statistics:last-child {
-  margin-bottom: 0em;
-}
 
 
 /*******************************

src/themes/default/elements/button.variables

@@ -318,12 +318,14 @@
 /* Ordinality */
 @primaryBackgroundImage: @coloredBackgroundImage;
 @primaryTextColor: @invertedTextColor;
+@lightPrimaryTextColor: @invertedTextColor;
 @primaryTextShadow: @invertedTextShadow;
 @primaryBoxShadow: @coloredBoxShadow;
 
 @secondaryBackgroundImage: @coloredBackgroundImage;
 @secondaryTextColor: @invertedTextColor;
 @secondaryTextShadow: @invertedTextShadow;
+@lightSecondaryTextColor: @invertedTextColor;
 @secondaryBoxShadow: @coloredBoxShadow;
 
 @positiveBackgroundImage: @coloredBackgroundImage;

src/themes/default/globals/site.variables

@@ -735,116 +735,120 @@
 ;
 
 /*---  Colors  ---*/
-@primaryColorHover    : saturate(darken(@primaryColor, 5), 10, relative);
-@secondaryColorHover  : saturate(lighten(@secondaryColor, 5), 10, relative);
-
-@redHover             : saturate(darken(@red, 5), 10, relative);
-@orangeHover          : saturate(darken(@orange, 5), 10, relative);
-@yellowHover          : saturate(darken(@yellow, 5), 10, relative);
-@oliveHover           : saturate(darken(@olive, 5), 10, relative);
-@greenHover           : saturate(darken(@green, 5), 10, relative);
-@tealHover            : saturate(darken(@teal, 5), 10, relative);
-@blueHover            : saturate(darken(@blue, 5), 10, relative);
-@violetHover          : saturate(darken(@violet, 5), 10, relative);
-@purpleHover          : saturate(darken(@purple, 5), 10, relative);
-@pinkHover            : saturate(darken(@pink, 5), 10, relative);
-@brownHover           : saturate(darken(@brown, 5), 10, relative);
-
-@lightRedHover        : saturate(darken(@lightRed, 5), 10, relative);
-@lightOrangeHover     : saturate(darken(@lightOrange, 5), 10, relative);
-@lightYellowHover     : saturate(darken(@lightYellow, 5), 10, relative);
-@lightOliveHover      : saturate(darken(@lightOlive, 5), 10, relative);
-@lightGreenHover      : saturate(darken(@lightGreen, 5), 10, relative);
-@lightTealHover       : saturate(darken(@lightTeal, 5), 10, relative);
-@lightBlueHover       : saturate(darken(@lightBlue, 5), 10, relative);
-@lightVioletHover     : saturate(darken(@lightViolet, 5), 10, relative);
-@lightPurpleHover     : saturate(darken(@lightPurple, 5), 10, relative);
-@lightPinkHover       : saturate(darken(@lightPink, 5), 10, relative);
-@lightBrownHover      : saturate(darken(@lightBrown, 5), 10, relative);
-@lightGreyHover       : saturate(darken(@lightGrey, 5), 10, relative);
-@lightBlackHover      : saturate(darken(@fullBlack, 5), 10, relative);
+@primaryColorHover        : saturate(darken(@primaryColor, 5), 10, relative);
+@secondaryColorHover      : saturate(lighten(@secondaryColor, 5), 10, relative);
+@lightPrimaryColorHover   : saturate(darken(@lightPrimaryColor, 5), 10, relative);
+@lightSecondaryColorHover : saturate(lighten(@lightSecondaryColor, 5), 10, relative);
+
+@redHover                 : saturate(darken(@red, 5), 10, relative);
+@orangeHover              : saturate(darken(@orange, 5), 10, relative);
+@yellowHover              : saturate(darken(@yellow, 5), 10, relative);
+@oliveHover               : saturate(darken(@olive, 5), 10, relative);
+@greenHover               : saturate(darken(@green, 5), 10, relative);
+@tealHover                : saturate(darken(@teal, 5), 10, relative);
+@blueHover                : saturate(darken(@blue, 5), 10, relative);
+@violetHover              : saturate(darken(@violet, 5), 10, relative);
+@purpleHover              : saturate(darken(@purple, 5), 10, relative);
+@pinkHover                : saturate(darken(@pink, 5), 10, relative);
+@brownHover               : saturate(darken(@brown, 5), 10, relative);
+
+@lightRedHover            : saturate(darken(@lightRed, 5), 10, relative);
+@lightOrangeHover         : saturate(darken(@lightOrange, 5), 10, relative);
+@lightYellowHover         : saturate(darken(@lightYellow, 5), 10, relative);
+@lightOliveHover          : saturate(darken(@lightOlive, 5), 10, relative);
+@lightGreenHover          : saturate(darken(@lightGreen, 5), 10, relative);
+@lightTealHover           : saturate(darken(@lightTeal, 5), 10, relative);
+@lightBlueHover           : saturate(darken(@lightBlue, 5), 10, relative);
+@lightVioletHover         : saturate(darken(@lightViolet, 5), 10, relative);
+@lightPurpleHover         : saturate(darken(@lightPurple, 5), 10, relative);
+@lightPinkHover           : saturate(darken(@lightPink, 5), 10, relative);
+@lightBrownHover          : saturate(darken(@lightBrown, 5), 10, relative);
+@lightGreyHover           : saturate(darken(@lightGrey, 5), 10, relative);
+@lightBlackHover          : saturate(darken(@fullBlack, 5), 10, relative);
 
 /*---  Emotive  ---*/
-@positiveColorHover   : saturate(darken(@positiveColor, 5), 10, relative);
-@negativeColorHover   : saturate(darken(@negativeColor, 5), 10, relative);
+@positiveColorHover       : saturate(darken(@positiveColor, 5), 10, relative);
+@negativeColorHover       : saturate(darken(@negativeColor, 5), 10, relative);
 
 /*---  Brand   ---*/
-@facebookHoverColor   : saturate(darken(@facebookColor, 5), 10, relative);
-@twitterHoverColor    : saturate(darken(@twitterColor, 5), 10, relative);
-@googlePlusHoverColor : saturate(darken(@googlePlusColor, 5), 10, relative);
-@linkedInHoverColor   : saturate(darken(@linkedInColor, 5), 10, relative);
-@youtubeHoverColor    : saturate(darken(@youtubeColor, 5), 10, relative);
-@instagramHoverColor  : saturate(darken(@instagramColor, 5), 10, relative);
-@pinterestHoverColor  : saturate(darken(@pinterestColor, 5), 10, relative);
-@vkHoverColor         : saturate(darken(@vkColor, 5), 10, relative);
+@facebookHoverColor       : saturate(darken(@facebookColor, 5), 10, relative);
+@twitterHoverColor        : saturate(darken(@twitterColor, 5), 10, relative);
+@googlePlusHoverColor     : saturate(darken(@googlePlusColor, 5), 10, relative);
+@linkedInHoverColor       : saturate(darken(@linkedInColor, 5), 10, relative);
+@youtubeHoverColor        : saturate(darken(@youtubeColor, 5), 10, relative);
+@instagramHoverColor      : saturate(darken(@instagramColor, 5), 10, relative);
+@pinterestHoverColor      : saturate(darken(@pinterestColor, 5), 10, relative);
+@vkHoverColor             : saturate(darken(@vkColor, 5), 10, relative);
 
 /*---  Dark Tones  ---*/
-@fullBlackHover       : lighten(@fullBlack, 5);
-@blackHover           : lighten(@black, 5);
-@greyHover            : lighten(@grey, 5);
+@fullBlackHover           : lighten(@fullBlack, 5);
+@blackHover               : lighten(@black, 5);
+@greyHover                : lighten(@grey, 5);
 
 /*---  Light Tones  ---*/
-@whiteHover           : darken(@white, 5);
-@offWhiteHover        : darken(@offWhite, 5);
-@darkWhiteHover       : darken(@darkWhite, 5);
+@whiteHover               : darken(@white, 5);
+@offWhiteHover            : darken(@offWhite, 5);
+@darkWhiteHover           : darken(@darkWhite, 5);
 
 /*-------------------
         Focus
 --------------------*/
 
 /*---  Colors  ---*/
-@primaryColorFocus    : saturate(darken(@primaryColor, 8), 20, relative);
-@secondaryColorFocus  : saturate(lighten(@secondaryColor, 8), 20, relative);
-
-@redFocus             : saturate(darken(@red, 8), 20, relative);
-@orangeFocus          : saturate(darken(@orange, 8), 20, relative);
-@yellowFocus          : saturate(darken(@yellow, 8), 20, relative);
-@oliveFocus           : saturate(darken(@olive, 8), 20, relative);
-@greenFocus           : saturate(darken(@green, 8), 20, relative);
-@tealFocus            : saturate(darken(@teal, 8), 20, relative);
-@blueFocus            : saturate(darken(@blue, 8), 20, relative);
-@violetFocus          : saturate(darken(@violet, 8), 20, relative);
-@purpleFocus          : saturate(darken(@purple, 8), 20, relative);
-@pinkFocus            : saturate(darken(@pink, 8), 20, relative);
-@brownFocus           : saturate(darken(@brown, 8), 20, relative);
-
-@lightRedFocus        : saturate(darken(@lightRed, 8), 20, relative);
-@lightOrangeFocus     : saturate(darken(@lightOrange, 8), 20, relative);
-@lightYellowFocus     : saturate(darken(@lightYellow, 8), 20, relative);
-@lightOliveFocus      : saturate(darken(@lightOlive, 8), 20, relative);
-@lightGreenFocus      : saturate(darken(@lightGreen, 8), 20, relative);
-@lightTealFocus       : saturate(darken(@lightTeal, 8), 20, relative);
-@lightBlueFocus       : saturate(darken(@lightBlue, 8), 20, relative);
-@lightVioletFocus     : saturate(darken(@lightViolet, 8), 20, relative);
-@lightPurpleFocus     : saturate(darken(@lightPurple, 8), 20, relative);
-@lightPinkFocus       : saturate(darken(@lightPink, 8), 20, relative);
-@lightBrownFocus      : saturate(darken(@lightBrown, 8), 20, relative);
-@lightGreyFocus       : saturate(darken(@lightGrey, 8), 20, relative);
-@lightBlackFocus      : saturate(darken(@fullBlack, 8), 20, relative);
+@primaryColorFocus        : saturate(darken(@primaryColor, 8), 20, relative);
+@secondaryColorFocus      : saturate(lighten(@secondaryColor, 8), 20, relative);
+@lightPrimaryColorFocus   : saturate(darken(@lightPrimaryColor, 8), 20, relative);
+@lightSecondaryColorFocus : saturate(lighten(@lightSecondaryColor, 8), 20, relative);
+
+@redFocus                 : saturate(darken(@red, 8), 20, relative);
+@orangeFocus              : saturate(darken(@orange, 8), 20, relative);
+@yellowFocus              : saturate(darken(@yellow, 8), 20, relative);
+@oliveFocus               : saturate(darken(@olive, 8), 20, relative);
+@greenFocus               : saturate(darken(@green, 8), 20, relative);
+@tealFocus                : saturate(darken(@teal, 8), 20, relative);
+@blueFocus                : saturate(darken(@blue, 8), 20, relative);
+@violetFocus              : saturate(darken(@violet, 8), 20, relative);
+@purpleFocus              : saturate(darken(@purple, 8), 20, relative);
+@pinkFocus                : saturate(darken(@pink, 8), 20, relative);
+@brownFocus               : saturate(darken(@brown, 8), 20, relative);
+
+@lightRedFocus            : saturate(darken(@lightRed, 8), 20, relative);
+@lightOrangeFocus         : saturate(darken(@lightOrange, 8), 20, relative);
+@lightYellowFocus         : saturate(darken(@lightYellow, 8), 20, relative);
+@lightOliveFocus          : saturate(darken(@lightOlive, 8), 20, relative);
+@lightGreenFocus          : saturate(darken(@lightGreen, 8), 20, relative);
+@lightTealFocus           : saturate(darken(@lightTeal, 8), 20, relative);
+@lightBlueFocus           : saturate(darken(@lightBlue, 8), 20, relative);
+@lightVioletFocus         : saturate(darken(@lightViolet, 8), 20, relative);
+@lightPurpleFocus         : saturate(darken(@lightPurple, 8), 20, relative);
+@lightPinkFocus           : saturate(darken(@lightPink, 8), 20, relative);
+@lightBrownFocus          : saturate(darken(@lightBrown, 8), 20, relative);
+@lightGreyFocus           : saturate(darken(@lightGrey, 8), 20, relative);
+@lightBlackFocus          : saturate(darken(@fullBlack, 8), 20, relative);
 
 /*---  Emotive  ---*/
-@positiveColorFocus   : saturate(darken(@positiveColor, 8), 20, relative);
-@negativeColorFocus   : saturate(darken(@negativeColor, 8), 20, relative);
+@positiveColorFocus       : saturate(darken(@positiveColor, 8), 20, relative);
+@negativeColorFocus       : saturate(darken(@negativeColor, 8), 20, relative);
 
 /*---  Brand   ---*/
-@facebookFocusColor   : saturate(darken(@facebookColor, 8), 20, relative);
-@twitterFocusColor    : saturate(darken(@twitterColor, 8), 20, relative);
-@googlePlusFocusColor : saturate(darken(@googlePlusColor, 8), 20, relative);
-@linkedInFocusColor   : saturate(darken(@linkedInColor, 8), 20, relative);
-@youtubeFocusColor    : saturate(darken(@youtubeColor, 8), 20, relative);
-@instagramFocusColor  : saturate(darken(@instagramColor, 8), 20, relative);
-@pinterestFocusColor  : saturate(darken(@pinterestColor, 8), 20, relative);
-@vkFocusColor         : saturate(darken(@vkColor, 8), 20, relative);
+@facebookFocusColor       : saturate(darken(@facebookColor, 8), 20, relative);
+@twitterFocusColor        : saturate(darken(@twitterColor, 8), 20, relative);
+@googlePlusFocusColor     : saturate(darken(@googlePlusColor, 8), 20, relative);
+@linkedInFocusColor       : saturate(darken(@linkedInColor, 8), 20, relative);
+@youtubeFocusColor        : saturate(darken(@youtubeColor, 8), 20, relative);
+@instagramFocusColor      : saturate(darken(@instagramColor, 8), 20, relative);
+@pinterestFocusColor      : saturate(darken(@pinterestColor, 8), 20, relative);
+@vkFocusColor             : saturate(darken(@vkColor, 8), 20, relative);
 
 /*---  Dark Tones  ---*/
-@fullBlackFocus       : lighten(@fullBlack, 8);
-@blackFocus           : lighten(@black, 8);
-@greyFocus            : lighten(@grey, 8);
+@fullBlackFocus           : lighten(@fullBlack, 8);
+@blackFocus               : lighten(@black, 8);
+@greyFocus                : lighten(@grey, 8);
 
 /*---  Light Tones  ---*/
-@whiteFocus           : darken(@white, 8);
-@offWhiteFocus        : darken(@offWhite, 8);
-@darkWhiteFocus       : darken(@darkWhite, 8);
+@whiteFocus               : darken(@white, 8);
+@offWhiteFocus            : darken(@offWhite, 8);
+@darkWhiteFocus           : darken(@darkWhite, 8);
 
 
 /*-------------------
@@ -852,58 +856,60 @@
 --------------------*/
 
 /*---  Colors  ---*/
-@primaryColorDown    : darken(@primaryColor, 10);
-@secondaryColorDown  : lighten(@secondaryColor, 10);
-
-@redDown             : darken(@red, 10);
-@orangeDown          : darken(@orange, 10);
-@yellowDown          : darken(@yellow, 10);
-@oliveDown           : darken(@olive, 10);
-@greenDown           : darken(@green, 10);
-@tealDown            : darken(@teal, 10);
-@blueDown            : darken(@blue, 10);
-@violetDown          : darken(@violet, 10);
-@purpleDown          : darken(@purple, 10);
-@pinkDown            : darken(@pink, 10);
-@brownDown           : darken(@brown, 10);
-
-@lightRedDown        : darken(@lightRed, 10);
-@lightOrangeDown     : darken(@lightOrange, 10);
-@lightYellowDown     : darken(@lightYellow, 10);
-@lightOliveDown      : darken(@lightOlive, 10);
-@lightGreenDown      : darken(@lightGreen, 10);
-@lightTealDown       : darken(@lightTeal, 10);
-@lightBlueDown       : darken(@lightBlue, 10);
-@lightVioletDown     : darken(@lightViolet, 10);
-@lightPurpleDown     : darken(@lightPurple, 10);
-@lightPinkDown       : darken(@lightPink, 10);
-@lightBrownDown      : darken(@lightBrown, 10);
-@lightGreyDown       : darken(@lightGrey, 10);
-@lightBlackDown      : darken(@fullBlack, 10);
+@primaryColorDown        : darken(@primaryColor, 10);
+@secondaryColorDown      : lighten(@secondaryColor, 10);
+@lightPrimaryColorDown   : darken(@lightPrimaryColor, 10);
+@lightSecondaryColorDown : lighten(@lightSecondaryColor, 10);
+
+@redDown                 : darken(@red, 10);
+@orangeDown              : darken(@orange, 10);
+@yellowDown              : darken(@yellow, 10);
+@oliveDown               : darken(@olive, 10);
+@greenDown               : darken(@green, 10);
+@tealDown                : darken(@teal, 10);
+@blueDown                : darken(@blue, 10);
+@violetDown              : darken(@violet, 10);
+@purpleDown              : darken(@purple, 10);
+@pinkDown                : darken(@pink, 10);
+@brownDown               : darken(@brown, 10);
+
+@lightRedDown            : darken(@lightRed, 10);
+@lightOrangeDown         : darken(@lightOrange, 10);
+@lightYellowDown         : darken(@lightYellow, 10);
+@lightOliveDown          : darken(@lightOlive, 10);
+@lightGreenDown          : darken(@lightGreen, 10);
+@lightTealDown           : darken(@lightTeal, 10);
+@lightBlueDown           : darken(@lightBlue, 10);
+@lightVioletDown         : darken(@lightViolet, 10);
+@lightPurpleDown         : darken(@lightPurple, 10);
+@lightPinkDown           : darken(@lightPink, 10);
+@lightBrownDown          : darken(@lightBrown, 10);
+@lightGreyDown           : darken(@lightGrey, 10);
+@lightBlackDown          : darken(@fullBlack, 10);
 
 /*---  Emotive  ---*/
-@positiveColorDown   : darken(@positiveColor, 10);
-@negativeColorDown   : darken(@negativeColor, 10);
+@positiveColorDown       : darken(@positiveColor, 10);
+@negativeColorDown       : darken(@negativeColor, 10);
 
 /*---  Brand   ---*/
-@facebookDownColor   : darken(@facebookColor, 10);
-@twitterDownColor    : darken(@twitterColor, 10);
-@googlePlusDownColor : darken(@googlePlusColor, 10);
-@linkedInDownColor   : darken(@linkedInColor, 10);
-@youtubeDownColor    : darken(@youtubeColor, 10);
-@instagramDownColor  : darken(@instagramColor, 10);
-@pinterestDownColor  : darken(@pinterestColor, 10);
-@vkDownColor         : darken(@vkColor, 10);
+@facebookDownColor       : darken(@facebookColor, 10);
+@twitterDownColor        : darken(@twitterColor, 10);
+@googlePlusDownColor     : darken(@googlePlusColor, 10);
+@linkedInDownColor       : darken(@linkedInColor, 10);
+@youtubeDownColor        : darken(@youtubeColor, 10);
+@instagramDownColor      : darken(@instagramColor, 10);
+@pinterestDownColor      : darken(@pinterestColor, 10);
+@vkDownColor             : darken(@vkColor, 10);
 
 /*---  Dark Tones  ---*/
-@fullBlackDown       : lighten(@fullBlack, 10);
-@blackDown           : lighten(@black, 10);
-@greyDown            : lighten(@grey, 10);
+@fullBlackDown           : lighten(@fullBlack, 10);
+@blackDown               : lighten(@black, 10);
+@greyDown                : lighten(@grey, 10);
 
 /*---  Light Tones  ---*/
-@whiteDown           : darken(@white, 10);
-@offWhiteDown        : darken(@offWhite, 10);
-@darkWhiteDown       : darken(@darkWhite, 10);
+@whiteDown               : darken(@white, 10);
+@offWhiteDown            : darken(@offWhite, 10);
+@darkWhiteDown           : darken(@darkWhite, 10);
 
 
 /*-------------------
@@ -911,55 +917,57 @@
 --------------------*/
 
 /*---  Colors  ---*/
-@primaryColorActive    : saturate(darken(@primaryColor, 5), 15, relative);
-@secondaryColorActive  : saturate(lighten(@secondaryColor, 5), 15, relative);
-
-@redActive             : saturate(darken(@red, 5), 15, relative);
-@orangeActive          : saturate(darken(@orange, 5), 15, relative);
-@yellowActive          : saturate(darken(@yellow, 5), 15, relative);
-@oliveActive           : saturate(darken(@olive, 5), 15, relative);
-@greenActive           : saturate(darken(@green, 5), 15, relative);
-@tealActive            : saturate(darken(@teal, 5), 15, relative);
-@blueActive            : saturate(darken(@blue, 5), 15, relative);
-@violetActive          : saturate(darken(@violet, 5), 15, relative);
-@purpleActive          : saturate(darken(@purple, 5), 15, relative);
-@pinkActive            : saturate(darken(@pink, 5), 15, relative);
-@brownActive           : saturate(darken(@brown, 5), 15, relative);
-
-@lightRedActive        : saturate(darken(@lightRed, 5), 15, relative);
-@lightOrangeActive     : saturate(darken(@lightOrange, 5), 15, relative);
-@lightYellowActive     : saturate(darken(@lightYellow, 5), 15, relative);
-@lightOliveActive      : saturate(darken(@lightOlive, 5), 15, relative);
-@lightGreenActive      : saturate(darken(@lightGreen, 5), 15, relative);
-@lightTealActive       : saturate(darken(@lightTeal, 5), 15, relative);
-@lightBlueActive       : saturate(darken(@lightBlue, 5), 15, relative);
-@lightVioletActive     : saturate(darken(@lightViolet, 5), 15, relative);
-@lightPurpleActive     : saturate(darken(@lightPurple, 5), 15, relative);
-@lightPinkActive       : saturate(darken(@lightPink, 5), 15, relative);
-@lightBrownActive      : saturate(darken(@lightBrown, 5), 15, relative);
-@lightGreyActive       : saturate(darken(@lightGrey, 5), 15, relative);
-@lightBlackActive      : saturate(darken(@fullBlack, 5), 15, relative);
+@primaryColorActive        : saturate(darken(@primaryColor, 5), 15, relative);
+@secondaryColorActive      : saturate(lighten(@secondaryColor, 5), 15, relative);
+@lightPrimaryColorActive   : saturate(darken(@lightPrimaryColor, 5), 15, relative);
+@lightSecondaryColorActive : saturate(lighten(@lightSecondaryColor, 5), 15, relative);
+
+@redActive                 : saturate(darken(@red, 5), 15, relative);
+@orangeActive              : saturate(darken(@orange, 5), 15, relative);
+@yellowActive              : saturate(darken(@yellow, 5), 15, relative);
+@oliveActive               : saturate(darken(@olive, 5), 15, relative);
+@greenActive               : saturate(darken(@green, 5), 15, relative);
+@tealActive                : saturate(darken(@teal, 5), 15, relative);
+@blueActive                : saturate(darken(@blue, 5), 15, relative);
+@violetActive              : saturate(darken(@violet, 5), 15, relative);
+@purpleActive              : saturate(darken(@purple, 5), 15, relative);
+@pinkActive                : saturate(darken(@pink, 5), 15, relative);
+@brownActive               : saturate(darken(@brown, 5), 15, relative);
+
+@lightRedActive            : saturate(darken(@lightRed, 5), 15, relative);
+@lightOrangeActive         : saturate(darken(@lightOrange, 5), 15, relative);
+@lightYellowActive         : saturate(darken(@lightYellow, 5), 15, relative);
+@lightOliveActive          : saturate(darken(@lightOlive, 5), 15, relative);
+@lightGreenActive          : saturate(darken(@lightGreen, 5), 15, relative);
+@lightTealActive           : saturate(darken(@lightTeal, 5), 15, relative);
+@lightBlueActive           : saturate(darken(@lightBlue, 5), 15, relative);
+@lightVioletActive         : saturate(darken(@lightViolet, 5), 15, relative);
+@lightPurpleActive         : saturate(darken(@lightPurple, 5), 15, relative);
+@lightPinkActive           : saturate(darken(@lightPink, 5), 15, relative);
+@lightBrownActive          : saturate(darken(@lightBrown, 5), 15, relative);
+@lightGreyActive           : saturate(darken(@lightGrey, 5), 15, relative);
+@lightBlackActive          : saturate(darken(@fullBlack, 5), 15, relative);
 
 /*---  Emotive  ---*/
-@positiveColorActive   : saturate(darken(@positiveColor, 5), 15, relative);
-@negativeColorActive   : saturate(darken(@negativeColor, 5), 15, relative);
+@positiveColorActive       : saturate(darken(@positiveColor, 5), 15, relative);
+@negativeColorActive       : saturate(darken(@negativeColor, 5), 15, relative);
 
 /*---  Brand   ---*/
-@facebookActiveColor   : saturate(darken(@facebookColor, 5), 15, relative);
-@twitterActiveColor    : saturate(darken(@twitterColor, 5), 15, relative);
-@googlePlusActiveColor : saturate(darken(@googlePlusColor, 5), 15, relative);
-@linkedInActiveColor   : saturate(darken(@linkedInColor, 5), 15, relative);
-@youtubeActiveColor    : saturate(darken(@youtubeColor, 5), 15, relative);
-@instagramActiveColor  : saturate(darken(@instagramColor, 5), 15, relative);
-@pinterestActiveColor  : saturate(darken(@pinterestColor, 5), 15, relative);
-@vkActiveColor         : saturate(darken(@vkColor, 5), 15, relative);
+@facebookActiveColor       : saturate(darken(@facebookColor, 5), 15, relative);
+@twitterActiveColor        : saturate(darken(@twitterColor, 5), 15, relative);
+@googlePlusActiveColor     : saturate(darken(@googlePlusColor, 5), 15, relative);
+@linkedInActiveColor       : saturate(darken(@linkedInColor, 5), 15, relative);
+@youtubeActiveColor        : saturate(darken(@youtubeColor, 5), 15, relative);
+@instagramActiveColor      : saturate(darken(@instagramColor, 5), 15, relative);
+@pinterestActiveColor      : saturate(darken(@pinterestColor, 5), 15, relative);
+@vkActiveColor             : saturate(darken(@vkColor, 5), 15, relative);
 
 /*---  Dark Tones  ---*/
-@fullBlackActive       : darken(@fullBlack, 5);
-@blackActive           : darken(@black, 5);
-@greyActive            : darken(@grey, 5);
+@fullBlackActive           : darken(@fullBlack, 5);
+@blackActive               : darken(@black, 5);
+@greyActive                : darken(@grey, 5);
 
 /*---  Light Tones  ---*/
-@whiteActive           : darken(@white, 5);
-@offWhiteActive        : darken(@offWhite, 5);
-@darkWhiteActive       : darken(@darkWhite, 5);
+@whiteActive               : darken(@white, 5);
+@offWhiteActive            : darken(@offWhite, 5);
+@darkWhiteActive           : darken(@darkWhite, 5);

src/themes/default/views/statistic.variables

@@ -6,14 +6,15 @@
          View
 --------------------*/
 
-@margin: 1em 0em;
+@verticalMargin: 1em;
+@margin: @verticalMargin 0em;
 @textAlign: center;
 @maxWidth: auto;
 
 /* Group */
 @horizontalSpacing: 1.5em;
-@rowSpacing: 2em;
-@groupMargin: 1em -@horizontalSpacing -@rowSpacing;
+@rowSpacing: 1em;
+@groupMargin: @verticalMargin -@horizontalSpacing -@rowSpacing;
 
 /* Group Element */
 @elementMargin: 0em @horizontalSpacing @rowSpacing;