Adds active state and active state examples for button

server/documents/hotfix.html.eco

@@ -31,61 +31,21 @@ $(document).ready(function() {
 
 <div class="main container">
 
-  <!-- TEST HTML HERE !-->
-  <div class="ui button">Trigger Popup</div>
-  <div class="ui popup">
-    <div class="header">Hello World</div>
-    <div class="content">My custom content</div>
-  </div>
+<h3>ui grid works ok</h3>
+<div class="ui grid">
+    <div class="eight wide computer only column">computer only</div>
+    <div class="eight wide tablet only column">tablet only</div>
+    <div class="eight wide mobile only column">mobile only</div>
+    <div class="eight wide column">all</div>
+</div>
+<h3>should ui stackable grid override the "x only" grid column styles?</h3>
+<div class="ui stackable grid">
+    <div class="eight wide computer only column">computer only</div>
+    <div class="eight wide tablet only column">tablet only</div>
+    <div class="eight wide mobile only column">mobile only</div>
+    <div class="eight wide column">all</div>
+</div>
+
 
-  <div class="ui button">Trigger Wide Popup</div>
-  <div class="ui wide popup">
-    <div class="ui four column center aligned divided grid">
-      <div class="column">
-        <div class="ui selection list">
-            <a class="item">1</a>
-            <a class="item">2</a>
-            <a class="item">3</a>
-            <a class="item">4</a>
-            <a class="item">5</a>
-            <a class="item">6</a>
-            <a class="item">7</a>
-        </div>
-      </div>
-      <div class="column">
-        <div class="ui selection list">
-            <a class="item">1</a>
-            <a class="item">2</a>
-            <a class="item">3</a>
-            <a class="item">4</a>
-            <a class="item">5</a>
-            <a class="item">6</a>
-            <a class="item">7</a>
-        </div>
-      </div>
-      <div class="column">
-        <div class="ui selection list">
-            <a class="item">1</a>
-            <a class="item">2</a>
-            <a class="item">3</a>
-            <a class="item">4</a>
-            <a class="item">5</a>
-            <a class="item">6</a>
-            <a class="item">7</a>
-        </div>
-      </div>
-      <div class="column">
-        <div class="ui selection list">
-            <a class="item">1</a>
-            <a class="item">2</a>
-            <a class="item">3</a>
-            <a class="item">4</a>
-            <a class="item">5</a>
-            <a class="item">6</a>
-            <a class="item">7</a>
-        </div>
-      </div>
-    </div>
-  </div>
 </div>
 </body>

server/files/javascript/button.js

@@ -5,10 +5,11 @@ semantic.button.ready = function() {
 
   // selector cache
   var
-    $buttons = $('.main .ui.buttons .button'),
-    $toggle  = $('.main .ui.toggle.button'),
-    $follow  = $('.follow.example .button'),
-    $button  = $('.ui.button').not($buttons).not($toggle),
+    $buttons         = $('.main .ui.buttons .button'),
+    $invertedButtons = $('.main .inverted.button'),
+    $toggle          = $('.main .ui.toggle.button'),
+    $follow          = $('.follow.example .button'),
+    $button          = $('.ui.button').not($buttons).not($toggle),
     // alias
     handler = {
 
@@ -23,6 +24,10 @@ semantic.button.ready = function() {
     }
   ;
 
+  $invertedButtons
+    .state()
+  ;
+
   $buttons
     .on('click', handler.activate)
   ;

src/definitions/collections/grid.less

@@ -1058,7 +1058,7 @@
   }
 }
 /* Tablet Only Hide */
-@media only screen and (min-width: (@tabletBreakpoint)) and (max-width: @largestTabletScreen ) {
+@media only screen and (min-width: (@tabletBreakpoint ) and (max-width: @largestTabletScreen ) {
   .ui[class*="mobile only"].grid.grid.grid:not(.tablet),
   .ui.grid.grid.grid > [class*="mobile only"].row:not(.tablet),
   .ui.grid.grid.grid > [class*="mobile only"].column:not(.tablet),

src/definitions/elements/button.less

@@ -1193,6 +1193,12 @@
   background-color: @lightBlack;
   color: @white;
 }
+.ui.inverted.black.buttons .button.active,
+.ui.inverted.black.button.active {
+  box-shadow: 0px 0px 0px @invertedBorderSize @lightBlack inset !important;
+  background-color: @lightBlack;
+  color: @white;
+}
 .ui.inverted.black.buttons .button:active,
 .ui.inverted.black.button:active {
   box-shadow: 0px 0px 0px @invertedBorderSize @lightBlackDown inset !important;
@@ -1214,6 +1220,12 @@
   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 {
+  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 {
@@ -1291,13 +1303,19 @@
 .ui.inverted.blue.button:hover {
   box-shadow: 0px 0px 0px @invertedBorderSize @lightBlue inset !important;
   background-color: @lightBlue;
-  color: @black;
+  color: @white;
+}
+.ui.inverted.blue.buttons .button.active,
+.ui.inverted.blue.button.active {
+  box-shadow: 0px 0px 0px @invertedBorderSize @lightBlue inset !important;
+  background-color: @lightBlue;
+  color: @white;
 }
 .ui.inverted.blue.buttons .button:active,
 .ui.inverted.blue.button:active {
   box-shadow: 0px 0px 0px @invertedBorderSize @lightBlueDown inset !important;
   background-color: @lightBlueDown;
-  color: @black;
+  color: @white;
 }
 
 /* Inverted Basic */
@@ -1314,11 +1332,17 @@
   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 {
+  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 {
   box-shadow: 0px 0px 0px @invertedBorderSize @lightBlueDown inset !important;
-  color: @lightBlueDown !important;
+  color: @lightBlue !important;
 }
 
 /*--- Green ---*/
@@ -1389,13 +1413,19 @@
 .ui.inverted.green.button:hover {
   box-shadow: 0px 0px 0px @invertedBorderSize @lightGreen inset !important;
   background-color: @lightGreen;
-  color: @black;
+  color: @white;
+}
+.ui.inverted.green.buttons .button.active,
+.ui.inverted.green.button.active {
+  box-shadow: 0px 0px 0px @invertedBorderSize @lightGreen inset !important;
+  background-color: @lightGreen;
+  color: @white;
 }
 .ui.inverted.green.buttons .button:active,
 .ui.inverted.green.button:active {
   box-shadow: 0px 0px 0px @invertedBorderSize @lightGreenDown inset !important;
   background-color: @lightGreenDown;
-  color: @black;
+  color: @white;
 }
 
 /* Inverted Basic */
@@ -1412,11 +1442,17 @@
   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 {
+  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 {
   box-shadow: 0px 0px 0px @invertedBorderSize @lightGreenDown inset !important;
-  color: @lightGreenDown !important;
+  color: @lightGreen !important;
 }
 
 /*--- Orange ---*/
@@ -1486,13 +1522,19 @@
 .ui.inverted.orange.button:hover {
   box-shadow: 0px 0px 0px @invertedBorderSize @lightOrange inset !important;
   background-color: @lightOrange;
-  color: @black;
+  color: @white;
+}
+.ui.inverted.orange.buttons .button.active,
+.ui.inverted.orange.button.active {
+  box-shadow: 0px 0px 0px @invertedBorderSize @lightOrange inset !important;
+  background-color: @lightOrange;
+  color: @white;
 }
 .ui.inverted.orange.buttons .button:active,
 .ui.inverted.orange.button:active {
   box-shadow: 0px 0px 0px @invertedBorderSize @lightOrangeDown inset !important;
   background-color: @lightOrangeDown;
-  color: @black;
+  color: @white;
 }
 
 /* Inverted Basic */
@@ -1509,11 +1551,17 @@
   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 {
+  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 {
   box-shadow: 0px 0px 0px @invertedBorderSize @lightOrangeDown inset !important;
-  color: @lightOrangeDown !important;
+  color: @lightOrange !important;
 }
 
 /*--- Pink ---*/
@@ -1583,13 +1631,19 @@
 .ui.inverted.pink.button:hover {
   box-shadow: 0px 0px 0px @invertedBorderSize @lightPink inset !important;
   background-color: @lightPink;
-  color: @black;
+  color: @white;
+}
+.ui.inverted.pink.buttons .button.active,
+.ui.inverted.pink.button.active {
+  box-shadow: 0px 0px 0px @invertedBorderSize @lightPink inset !important;
+  background-color: @lightPink;
+  color: @white;
 }
 .ui.inverted.pink.buttons .button:active,
 .ui.inverted.pink.button:active {
   box-shadow: 0px 0px 0px @invertedBorderSize @lightPinkDown inset !important;
   background-color: @lightPinkDown;
-  color: @black;
+  color: @white;
 }
 
 /* Inverted Basic */
@@ -1606,11 +1660,17 @@
   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 {
+  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 {
   box-shadow: 0px 0px 0px @invertedBorderSize @lightPinkDown inset !important;
-  color: @lightPinkDown !important;
+  color: @lightPink !important;
 }
 
 /*--- Purple ---*/
@@ -1682,6 +1742,12 @@
   background-color: @lightPurple;
   color: @black;
 }
+.ui.inverted.purple.buttons .button.active,
+.ui.inverted.purple.button.active {
+  box-shadow: 0px 0px 0px @invertedBorderSize @lightPurple inset !important;
+  background-color: @lightPurple;
+  color: @black;
+}
 .ui.inverted.purple.buttons .button:active,
 .ui.inverted.purple.button:active {
   box-shadow: 0px 0px 0px @invertedBorderSize @lightPurpleDown inset !important;
@@ -1703,11 +1769,17 @@
   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 {
+  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 {
   box-shadow: 0px 0px 0px @invertedBorderSize @lightPurpleDown inset !important;
-  color: @lightPurpleDown !important;
+  color: @lightPurple !important;
 }
 
 /*--- Red ---*/
@@ -1777,13 +1849,19 @@
 .ui.inverted.red.button:hover {
   box-shadow: 0px 0px 0px @invertedBorderSize @lightRed inset !important;
   background-color: @lightRed;
-  color: @black;
+  color: @white;
+}
+.ui.inverted.red.buttons .button.active,
+.ui.inverted.red.button.active {
+  box-shadow: 0px 0px 0px @invertedBorderSize @lightRed inset !important;
+  background-color: @lightRed;
+  color: @white;
 }
 .ui.inverted.red.buttons .button:active,
 .ui.inverted.red.button:active {
   box-shadow: 0px 0px 0px @invertedBorderSize @lightRedDown inset !important;
   background-color: @lightRedDown;
-  color: @black;
+  color: @white;
 }
 
 /* Inverted Basic */
@@ -1800,11 +1878,17 @@
   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 {
+  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 {
   box-shadow: 0px 0px 0px @invertedBorderSize @lightRedDown inset !important;
-  color: @lightRedDown !important;
+  color: @lightRed !important;
 }
 
 
@@ -1877,6 +1961,12 @@
   background-color: @lightTeal;
   color: @black;
 }
+.ui.inverted.teal.buttons .button.active,
+.ui.inverted.teal.button.active {
+  box-shadow: 0px 0px 0px @invertedBorderSize @lightTeal inset !important;
+  background-color: @lightTeal;
+  color: @black;
+}
 .ui.inverted.teal.buttons .button:active,
 .ui.inverted.teal.button:active {
   box-shadow: 0px 0px 0px @invertedBorderSize @lightTealDown inset !important;
@@ -1898,11 +1988,17 @@
   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 {
+  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 {
   box-shadow: 0px 0px 0px @invertedBorderSize @lightTealDown inset !important;
-  color: @lightTealDown !important;
+  color: @lightTeal !important;
 }
 
 
@@ -1975,6 +2071,12 @@
   background-color: @lightYellow;
   color: @black;
 }
+.ui.inverted.yellow.buttons .button.active,
+.ui.inverted.yellow.button.active {
+  box-shadow: 0px 0px 0px @invertedBorderSize @lightYellow inset !important;
+  background-color: @lightYellow;
+  color: @black;
+}
 .ui.inverted.yellow.buttons .button:active,
 .ui.inverted.yellow.button:active {
   box-shadow: 0px 0px 0px @invertedBorderSize @lightYellowDown inset !important;
@@ -1996,11 +2098,17 @@
   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 {
+  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 {
   box-shadow: 0px 0px 0px @invertedBorderSize @lightYellowDown inset !important;
-  color: @lightYellowDown !important;
+  color: @lightYellow !important;
 }