From f9739f32f41a31b07b3bd02338af38f426ff7a9f Mon Sep 17 00:00:00 2001
From: jlukic <jacklukic@gmail.com>
Date: Mon, 5 Jan 2015 17:13:33 -0500
Subject: [PATCH] Fix confusing word order in button

---
 src/definitions/elements/button.less | 248 +++++++++++++--------------
 1 file changed, 124 insertions(+), 124 deletions(-)

diff --git a/src/definitions/elements/button.less b/src/definitions/elements/button.less
index b7ad9aeb5..44a353cc8 100755
--- a/src/definitions/elements/button.less
+++ b/src/definitions/elements/button.less
@@ -115,12 +115,12 @@
   box-shadow: @activeBoxShadow;
   color: @activeColor;
 }
-.ui.button.active:hover {
+.ui.active.button:hover {
   background-color: @activeHoverBackgroundColor;
   background-image: @activeHoverBackgroundImage;
   color: @activeHoverColor;
 }
-.ui.button.active:active {
+.ui.active.button:active {
   background-color: @activeBackgroundColor;
   background-image: @activeBackgroundImage;
 }
@@ -201,7 +201,7 @@
 .ui.buttons .disabled.button,
 .ui.disabled.button,
 .ui.disabled.button:hover,
-.ui.disabled.button.active {
+.ui.disabled.active.button {
   cursor: default;
   background-color: @lightGrey !important;
   color: @lightTextColor !important;
@@ -649,15 +649,15 @@
   color: @basicDownTextColor !important;
   box-shadow: @basicDownBoxShadow;
 }
-.ui.basic.buttons .button.active,
-.ui.basic.button.active {
+.ui.basic.buttons .active.button,
+.ui.basic.active.button {
   background: @basicActiveBackground !important;
   box-shadow: @basicActiveBoxShadow !important;
   color: @basicActiveTextColor;
   box-shadow: @selectedBorderColor;
 }
-.ui.basic.buttons .button.active:hover,
-.ui.basic.button.active:hover {
+.ui.basic.buttons .active.button:hover,
+.ui.basic.active.button:hover {
   background-color: @transparentBlack;
 }
 
@@ -668,7 +668,7 @@
 .ui.basic.buttons .button:active {
   box-shadow: @basicDownBoxShadow inset;
 }
-.ui.basic.buttons .button.active {
+.ui.basic.buttons .active.button {
   box-shadow: @selectedBorderColor inset;
 }
 
@@ -690,15 +690,15 @@
   color: @white !important;
   box-shadow: @basicInvertedDownBoxShadow !important;
 }
-.ui.basic.inverted.buttons .button.active,
-.ui.basic.inverted.button.active {
+.ui.basic.inverted.buttons .active.button,
+.ui.basic.inverted.active.button {
   background-color: @transparentWhite;
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
   box-shadow: @basicInvertedActiveBoxShadow;
 }
-.ui.basic.inverted.buttons .button.active:hover,
-.ui.basic.inverted.button.active:hover {
+.ui.basic.inverted.buttons .active.button:hover,
+.ui.basic.inverted.active.button:hover {
   background-color: @strongTransparentWhite;
   box-shadow: @basicInvertedHoverBoxShadow !important;
 }
@@ -1177,10 +1177,10 @@
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
 }
-.ui.black.buttons .button.active,
-.ui.black.buttons .button.active:active,
-.ui.black.button.active,
-.ui.black.button .button.active:active {
+.ui.black.buttons .active.button,
+.ui.black.buttons .active.button:active,
+.ui.black.active.button,
+.ui.black.button .active.button:active {
   background-color: @blackActive;
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
@@ -1203,8 +1203,8 @@
   box-shadow: 0px 0px 0px @basicColoredBorderSize @blackDown inset !important;
   color: @blackDown !important;
 }
-.ui.basic.black.buttons .button.active,
-.ui.basic.black.button.active {
+.ui.basic.black.buttons .active.button,
+.ui.basic.black.active.button {
   background: transparent !important;
   box-shadow: 0px 0px 0px @basicColoredBorderSize @blackDown inset !important;
   color: @blackDown !important;
@@ -1226,8 +1226,8 @@
   background-color: @lightBlack;
   color: @white;
 }
-.ui.inverted.black.buttons .button.active,
-.ui.inverted.black.button.active {
+.ui.inverted.black.buttons .active.button,
+.ui.inverted.black.active.button {
   box-shadow: 0px 0px 0px @invertedBorderSize @lightBlack inset !important;
   background-color: @lightBlack;
   color: @white;
@@ -1253,9 +1253,9 @@
   box-shadow: 0px 0px 0px @invertedBorderSize @lightBlack inset !important;
   color: @white !important;
 }
-.ui.inverted.black.basic.buttons .button.active,
-.ui.inverted.black.buttons .basic.button.active,
-.ui.inverted.black.basic.button.active {
+.ui.inverted.black.basic.buttons .active.button,
+.ui.inverted.black.buttons .basic.active.button,
+.ui.inverted.black.basic.active.button {
   box-shadow: 0px 0px 0px @invertedBorderSize @lightBlack inset !important;
   color: @white !important;
 }
@@ -1291,10 +1291,10 @@
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
 }
-.ui.blue.buttons .button.active,
-.ui.blue.buttons .button.active:active,
-.ui.blue.button.active,
-.ui.blue.button .button.active:active {
+.ui.blue.buttons .active.button,
+.ui.blue.buttons .active.button:active,
+.ui.blue.active.button,
+.ui.blue.button .active.button:active {
   background-color: @blueActive;
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
@@ -1318,8 +1318,8 @@
   box-shadow: 0px 0px 0px @basicColoredBorderSize @blueDown inset !important;
   color: @blueDown !important;
 }
-.ui.basic.blue.buttons .button.active,
-.ui.basic.blue.button.active {
+.ui.basic.blue.buttons .active.button,
+.ui.basic.blue.active.button {
   background: transparent !important;
   box-shadow: 0px 0px 0px @basicColoredBorderSize @blueDown inset !important;
   color: @blueDown !important;
@@ -1341,8 +1341,8 @@
   background-color: @lightBlue;
   color: @white;
 }
-.ui.inverted.blue.buttons .button.active,
-.ui.inverted.blue.button.active {
+.ui.inverted.blue.buttons .active.button,
+.ui.inverted.blue.active.button {
   box-shadow: 0px 0px 0px @invertedBorderSize @lightBlue inset !important;
   background-color: @lightBlue;
   color: @white;
@@ -1368,9 +1368,9 @@
   box-shadow: 0px 0px 0px @invertedBorderSize @lightBlue inset !important;
   color: @lightBlue !important;
 }
-.ui.inverted.blue.basic.buttons .button.active,
-.ui.inverted.blue.buttons .basic.button.active,
-.ui.inverted.blue.basic.button.active {
+.ui.inverted.blue.basic.buttons .active.button,
+.ui.inverted.blue.buttons .basic.active.button,
+.ui.inverted.blue.basic.active.button {
   box-shadow: 0px 0px 0px @invertedBorderSize @lightBlue inset !important;
   color: @lightBlue !important;
 }
@@ -1404,10 +1404,10 @@
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
 }
-.ui.green.buttons .button.active,
-.ui.green.buttons .button.active:active,
-.ui.green.button.active,
-.ui.green.button .button.active:active {
+.ui.green.buttons .active.button,
+.ui.green.buttons .active.button:active,
+.ui.green.active.button,
+.ui.green.button .active.button:active {
   background-color: @greenActive;
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
@@ -1431,8 +1431,8 @@
   box-shadow: 0px 0px 0px @basicColoredBorderSize @greenDown inset !important;
   color: @greenDown !important;
 }
-.ui.basic.green.buttons .button.active,
-.ui.basic.green.button.active {
+.ui.basic.green.buttons .active.button,
+.ui.basic.green.active.button {
   background: transparent !important;
   box-shadow: 0px 0px 0px @basicColoredBorderSize @greenDown inset !important;
   color: @greenDown !important;
@@ -1454,8 +1454,8 @@
   background-color: @lightGreen;
   color: @white;
 }
-.ui.inverted.green.buttons .button.active,
-.ui.inverted.green.button.active {
+.ui.inverted.green.buttons .active.button,
+.ui.inverted.green.active.button {
   box-shadow: 0px 0px 0px @invertedBorderSize @lightGreen inset !important;
   background-color: @lightGreen;
   color: @white;
@@ -1481,9 +1481,9 @@
   box-shadow: 0px 0px 0px @invertedBorderSize @lightGreen inset !important;
   color: @lightGreen !important;
 }
-.ui.inverted.green.basic.buttons .button.active,
-.ui.inverted.green.buttons .basic.button.active,
-.ui.inverted.green.basic.button.active {
+.ui.inverted.green.basic.buttons .active.button,
+.ui.inverted.green.buttons .basic.active.button,
+.ui.inverted.green.basic.active.button {
   box-shadow: 0px 0px 0px @invertedBorderSize @lightGreen inset !important;
   color: @lightGreen !important;
 }
@@ -1517,10 +1517,10 @@
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
 }
-.ui.orange.buttons .button.active,
-.ui.orange.buttons .button.active:active,
-.ui.orange.button.active,
-.ui.orange.button .button.active:active {
+.ui.orange.buttons .active.button,
+.ui.orange.buttons .active.button:active,
+.ui.orange.active.button,
+.ui.orange.button .active.button:active {
   background-color: @blackActive;
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
@@ -1543,8 +1543,8 @@
   box-shadow: 0px 0px 0px @basicColoredBorderSize @orangeDown inset !important;
   color: @orangeDown !important;
 }
-.ui.basic.orange.buttons .button.active,
-.ui.basic.orange.button.active {
+.ui.basic.orange.buttons .active.button,
+.ui.basic.orange.active.button {
   background: transparent !important;
   box-shadow: 0px 0px 0px @basicColoredBorderSize @orangeDown inset !important;
   color: @orangeDown !important;
@@ -1566,8 +1566,8 @@
   background-color: @lightOrange;
   color: @white;
 }
-.ui.inverted.orange.buttons .button.active,
-.ui.inverted.orange.button.active {
+.ui.inverted.orange.buttons .active.button,
+.ui.inverted.orange.active.button {
   box-shadow: 0px 0px 0px @invertedBorderSize @lightOrange inset !important;
   background-color: @lightOrange;
   color: @white;
@@ -1593,9 +1593,9 @@
   box-shadow: 0px 0px 0px @invertedBorderSize @lightOrange inset !important;
   color: @lightOrange !important;
 }
-.ui.inverted.orange.basic.buttons .button.active,
-.ui.inverted.orange.buttons .basic.button.active,
-.ui.inverted.orange.basic.button.active {
+.ui.inverted.orange.basic.buttons .active.button,
+.ui.inverted.orange.buttons .basic.active.button,
+.ui.inverted.orange.basic.active.button {
   box-shadow: 0px 0px 0px @invertedBorderSize @lightOrange inset !important;
   color: @lightOrange !important;
 }
@@ -1629,10 +1629,10 @@
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
 }
-.ui.pink.buttons .button.active,
-.ui.pink.buttons .button.active:active,
-.ui.pink.button.active,
-.ui.pink.button .button.active:active {
+.ui.pink.buttons .active.button,
+.ui.pink.buttons .active.button:active,
+.ui.pink.active.button,
+.ui.pink.button .active.button:active {
   background-color: @pinkActive;
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
@@ -1655,8 +1655,8 @@
   box-shadow: 0px 0px 0px @basicColoredBorderSize @pinkDown inset !important;
   color: @pinkDown !important;
 }
-.ui.basic.pink.buttons .button.active,
-.ui.basic.pink.button.active {
+.ui.basic.pink.buttons .active.button,
+.ui.basic.pink.active.button {
   background: transparent !important;
   box-shadow: 0px 0px 0px @basicColoredBorderSize @pinkDown inset !important;
   color: @pinkDown !important;
@@ -1678,8 +1678,8 @@
   background-color: @lightPink;
   color: @white;
 }
-.ui.inverted.pink.buttons .button.active,
-.ui.inverted.pink.button.active {
+.ui.inverted.pink.buttons .active.button,
+.ui.inverted.pink.active.button {
   box-shadow: 0px 0px 0px @invertedBorderSize @lightPink inset !important;
   background-color: @lightPink;
   color: @white;
@@ -1705,9 +1705,9 @@
   box-shadow: 0px 0px 0px @invertedBorderSize @lightPink inset !important;
   color: @lightPink !important;
 }
-.ui.inverted.pink.basic.buttons .button.active,
-.ui.inverted.pink.buttons .basic.button.active,
-.ui.inverted.pink.basic.button.active {
+.ui.inverted.pink.basic.buttons .active.button,
+.ui.inverted.pink.buttons .basic.active.button,
+.ui.inverted.pink.basic.active.button {
   box-shadow: 0px 0px 0px @invertedBorderSize @lightPink inset !important;
   color: @lightPink !important;
 }
@@ -1741,10 +1741,10 @@
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
 }
-.ui.purple.buttons .button.active,
-.ui.purple.buttons .button.active:active,
-.ui.purple.button.active,
-.ui.purple.button .button.active:active {
+.ui.purple.buttons .active.button,
+.ui.purple.buttons .active.button:active,
+.ui.purple.active.button,
+.ui.purple.button .active.button:active {
   background-color: @purpleActive;
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
@@ -1767,8 +1767,8 @@
   box-shadow: 0px 0px 0px @basicColoredBorderSize @purpleDown inset !important;
   color: @purpleDown !important;
 }
-.ui.basic.purple.buttons .button.active,
-.ui.basic.purple.button.active {
+.ui.basic.purple.buttons .active.button,
+.ui.basic.purple.active.button {
   background: transparent !important;
   box-shadow: 0px 0px 0px @basicColoredBorderSize @purpleDown inset !important;
   color: @purpleDown !important;
@@ -1790,8 +1790,8 @@
   background-color: @lightPurple;
   color: @black;
 }
-.ui.inverted.purple.buttons .button.active,
-.ui.inverted.purple.button.active {
+.ui.inverted.purple.buttons .active.button,
+.ui.inverted.purple.active.button {
   box-shadow: 0px 0px 0px @invertedBorderSize @lightPurple inset !important;
   background-color: @lightPurple;
   color: @black;
@@ -1817,9 +1817,9 @@
   box-shadow: 0px 0px 0px @invertedBorderSize @lightPurple inset !important;
   color: @lightPurple !important;
 }
-.ui.inverted.purple.basic.buttons .button.active,
-.ui.inverted.purple.buttons .basic.button.active,
-.ui.inverted.purple.basic.button.active {
+.ui.inverted.purple.basic.buttons .active.button,
+.ui.inverted.purple.buttons .basic.active.button,
+.ui.inverted.purple.basic.active.button {
   box-shadow: 0px 0px 0px @invertedBorderSize @lightPurple inset !important;
   color: @lightPurple !important;
 }
@@ -1853,10 +1853,10 @@
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
 }
-.ui.red.buttons .button.active,
-.ui.red.buttons .button.active:active,
-.ui.red.button.active,
-.ui.red.button .button.active:active {
+.ui.red.buttons .active.button,
+.ui.red.buttons .active.button:active,
+.ui.red.active.button,
+.ui.red.button .active.button:active {
   background-color: @redActive;
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
@@ -1879,8 +1879,8 @@
   box-shadow: 0px 0px 0px @basicColoredBorderSize @redDown inset !important;
   color: @redDown !important;
 }
-.ui.basic.red.buttons .button.active,
-.ui.basic.red.button.active {
+.ui.basic.red.buttons .active.button,
+.ui.basic.red.active.button {
   background: transparent !important;
   box-shadow: 0px 0px 0px @basicColoredBorderSize @redDown inset !important;
   color: @redDown !important;
@@ -1902,8 +1902,8 @@
   background-color: @lightRed;
   color: @white;
 }
-.ui.inverted.red.buttons .button.active,
-.ui.inverted.red.button.active {
+.ui.inverted.red.buttons .active.button,
+.ui.inverted.red.active.button {
   box-shadow: 0px 0px 0px @invertedBorderSize @lightRed inset !important;
   background-color: @lightRed;
   color: @white;
@@ -1929,9 +1929,9 @@
   box-shadow: 0px 0px 0px @invertedBorderSize @lightRed inset !important;
   color: @lightRed !important;
 }
-.ui.inverted.red.basic.buttons .button.active,
-.ui.inverted.red.buttons .basic.button.active,
-.ui.inverted.red.basic.button.active {
+.ui.inverted.red.basic.buttons .active.button,
+.ui.inverted.red.buttons .basic.active.button,
+.ui.inverted.red.basic.active.button {
   box-shadow: 0px 0px 0px @invertedBorderSize @lightRed inset !important;
   color: @lightRed !important;
 }
@@ -1966,10 +1966,10 @@
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
 }
-.ui.teal.buttons .button.active,
-.ui.teal.buttons .button.active:active,
-.ui.teal.button.active,
-.ui.teal.button .button.active:active {
+.ui.teal.buttons .active.button,
+.ui.teal.buttons .active.button:active,
+.ui.teal.active.button,
+.ui.teal.button .active.button:active {
   background-color: @tealActive;
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
@@ -1992,8 +1992,8 @@
   box-shadow: 0px 0px 0px @basicColoredBorderSize @tealDown inset !important;
   color: @tealDown !important;
 }
-.ui.basic.teal.buttons .button.active,
-.ui.basic.teal.button.active {
+.ui.basic.teal.buttons .active.button,
+.ui.basic.teal.active.button {
   background: transparent !important;
   box-shadow: 0px 0px 0px @basicColoredBorderSize @tealDown inset !important;
   color: @tealDown !important;
@@ -2015,8 +2015,8 @@
   background-color: @lightTeal;
   color: @black;
 }
-.ui.inverted.teal.buttons .button.active,
-.ui.inverted.teal.button.active {
+.ui.inverted.teal.buttons .active.button,
+.ui.inverted.teal.active.button {
   box-shadow: 0px 0px 0px @invertedBorderSize @lightTeal inset !important;
   background-color: @lightTeal;
   color: @black;
@@ -2042,9 +2042,9 @@
   box-shadow: 0px 0px 0px @invertedBorderSize @lightTeal inset !important;
   color: @lightTeal !important;
 }
-.ui.inverted.teal.basic.buttons .button.active,
-.ui.inverted.teal.buttons .basic.button.active,
-.ui.inverted.teal.basic.button.active {
+.ui.inverted.teal.basic.buttons .active.button,
+.ui.inverted.teal.buttons .basic.active.button,
+.ui.inverted.teal.basic.active.button {
   box-shadow: 0px 0px 0px @invertedBorderSize @lightTeal inset !important;
   color: @lightTeal !important;
 }
@@ -2079,10 +2079,10 @@
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
 }
-.ui.yellow.buttons .button.active,
-.ui.yellow.buttons .button.active:active,
-.ui.yellow.button.active,
-.ui.yellow.button .button.active:active {
+.ui.yellow.buttons .active.button,
+.ui.yellow.buttons .active.button:active,
+.ui.yellow.active.button,
+.ui.yellow.button .active.button:active {
   background-color: @yellowActive;
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
@@ -2105,8 +2105,8 @@
   box-shadow: 0px 0px 0px @basicColoredBorderSize @yellowDown inset !important;
   color: @yellowDown !important;
 }
-.ui.basic.yellow.buttons .button.active,
-.ui.basic.yellow.button.active {
+.ui.basic.yellow.buttons .active.button,
+.ui.basic.yellow.active.button {
   background: transparent !important;
   box-shadow: 0px 0px 0px @basicColoredBorderSize @yellowDown inset !important;
   color: @yellowDown !important;
@@ -2128,8 +2128,8 @@
   background-color: @lightYellow;
   color: @black;
 }
-.ui.inverted.yellow.buttons .button.active,
-.ui.inverted.yellow.button.active {
+.ui.inverted.yellow.buttons .active.button,
+.ui.inverted.yellow.active.button {
   box-shadow: 0px 0px 0px @invertedBorderSize @lightYellow inset !important;
   background-color: @lightYellow;
   color: @black;
@@ -2155,9 +2155,9 @@
   box-shadow: 0px 0px 0px @invertedBorderSize @lightYellow inset !important;
   color: @lightYellow !important;
 }
-.ui.inverted.yellow.basic.buttons .button.active,
-.ui.inverted.yellow.buttons .basic.button.active,
-.ui.inverted.yellow.basic.button.active {
+.ui.inverted.yellow.basic.buttons .active.button,
+.ui.inverted.yellow.buttons .basic.active.button,
+.ui.inverted.yellow.basic.active.button {
   box-shadow: 0px 0px 0px @invertedBorderSize @lightYellow inset !important;
   color: @lightYellow !important;
 }
@@ -2196,7 +2196,7 @@
   text-shadow: @primaryTextShadow;
 }
 .ui.primary.buttons .active.button,
-.ui.primary.button.active {
+.ui.primary.active.button {
   background-color: @primaryColorActive;
   color: @primaryTextColor;
   text-shadow: @primaryTextShadow;
@@ -2229,7 +2229,7 @@
   text-shadow: @secondaryTextShadow;
 }
 .ui.secondary.buttons .active.button,
-.ui.secondary.button.active {
+.ui.secondary.active.button {
   background-color: @secondaryColorActive;
   color: @secondaryTextColor;
   text-shadow: @secondaryTextShadow;
@@ -2252,7 +2252,7 @@
 .ui.positive.buttons .button:hover,
 .ui.positive.button:hover,
 .ui.positive.buttons .active.button,
-.ui.positive.button.active {
+.ui.positive.active.button {
   background-color: @positiveColorHover !important;
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
@@ -2263,10 +2263,10 @@
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
 }
-.ui.positive.buttons .button.active,
-.ui.positive.buttons .button.active:active,
-.ui.positive.button.active,
-.ui.positive.button .button.active:active {
+.ui.positive.buttons .active.button,
+.ui.positive.buttons .active.button:active,
+.ui.positive.active.button,
+.ui.positive.button .active.button:active {
   background-color: @positiveColorActive;
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
@@ -2290,7 +2290,7 @@
 .ui.negative.buttons .button:hover,
 .ui.negative.button:hover,
 .ui.negative.buttons .active.button,
-.ui.negative.button.active {
+.ui.negative.active.button {
   background-color: @negativeColorHover !important;
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
@@ -2301,10 +2301,10 @@
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
 }
-.ui.negative.buttons .button.active,
-.ui.negative.buttons .button.active:active,
-.ui.negative.button.active,
-.ui.negative.button .button.active:active {
+.ui.negative.buttons .active.button,
+.ui.negative.buttons .active.button:active,
+.ui.negative.active.button,
+.ui.negative.button .active.button:active {
   background-color: @negativeColorActive;
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
@@ -2320,7 +2320,7 @@
   margin: @verticalMargin @horizontalMargin 0em 0em;
 }
 .ui.buttons > .button:hover,
-.ui.buttons > .button.active {
+.ui.buttons > .active.button {
   position: relative;
 }
 .ui.buttons:after {