richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Adds active state and active state examples for button

pull/1129/head
jlukic 10 years ago
parent
dd4601a554
commit
d9c959d016
4 changed files with 151 additions and 78 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 70
      server/documents/hotfix.html.eco
  2. 13
      server/files/javascript/button.js
  3. 2
      src/definitions/collections/grid.less
  4. 144
      src/definitions/elements/button.less

70
server/documents/hotfix.html.eco
View File

@ -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>

13
server/files/javascript/button.js
View File

@ -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)
;

2
src/definitions/collections/grid.less
View File

@ -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),

144
src/definitions/elements/button.less
View File

@ -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;
}

Write Preview
Loading…
Cancel
Save