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

Fix confusing word order in button

pull/1574/head
jlukic 9 years ago
parent
b970aa2b42
commit
f9739f32f4
1 changed files with 124 additions and 124 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 248
      src/definitions/elements/button.less

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

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

Write Preview
Loading…
Cancel
Save