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

Modifies basic colored style to be neutral before hover

pull/1129/head
jlukic 10 years ago
parent
e6153aa790
commit
f9ecd260c4
1 changed files with 85 additions and 19 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 104
      src/definitions/elements/button.less

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

@ -600,13 +600,16 @@
background: @basicBackground !important;
background-image: none;
color: @textColor !important;
padding: @basicPadding;
font-weight: @basicFontWeight;
border-radius: @basicBorderRadius;
text-transform: @basicTextTransform;
text-shadow: none !important;
box-shadow: @basicBoxShadow;
}
.ui.basic.buttons .button:not(.compact),
.ui.basic.button:not(.compact) {
padding: @basicPadding;
}
.ui.basic.buttons {
box-shadow: @basicGroupBoxShadow;
border-radius: @borderRadius;
@ -1097,11 +1100,12 @@
/* Basic */
.ui.basic.black.buttons .button,
.ui.basic.black.button {
box-shadow: 0px 0px 0px @basicColoredBorderSize @black inset !important;
color: @black !important;
box-shadow: 0px 0px 0px @basicColoredBorderSize @solidBorderColor inset !important;
color: @textColor !important;
}
.ui.basic.black.buttons .button:hover,
.ui.basic.black.button:hover {
background: transparent !important;
box-shadow: 0px 0px 0px @basicColoredBorderSize @blackHover inset !important;
color: @blackHover !important;
}
@ -1110,6 +1114,12 @@
box-shadow: 0px 0px 0px @basicColoredBorderSize @blackDown inset !important;
color: @blackDown !important;
}
.ui.basic.black.buttons .button.active,
.ui.basic.black.button.active {
background: transparent !important;
box-shadow: 0px 0px 0px @basicColoredBorderSize @blackDown inset !important;
color: @blackDown !important;
}
/* Inverted */
.ui.inverted.black.buttons .button,
@ -1176,11 +1186,12 @@
/* Basic */
.ui.basic.blue.buttons .button,
.ui.basic.blue.button {
box-shadow: 0px 0px 0px @basicColoredBorderSize @blue inset !important;
color: @blue !important;
box-shadow: 0px 0px 0px @basicColoredBorderSize @solidBorderColor inset !important;
color: @textColor !important;
}
.ui.basic.blue.buttons .button:hover,
.ui.basic.blue.button:hover {
background: transparent !important;
box-shadow: 0px 0px 0px @basicColoredBorderSize @blueHover inset !important;
color: @blueHover !important;
}
@ -1189,6 +1200,12 @@
box-shadow: 0px 0px 0px @basicColoredBorderSize @blueDown inset !important;
color: @blueDown !important;
}
.ui.basic.blue.buttons .button.active,
.ui.basic.blue.button.active {
background: transparent !important;
box-shadow: 0px 0px 0px @basicColoredBorderSize @blueDown inset !important;
color: @blueDown !important;
}
/* Inverted */
.ui.inverted.blue.buttons .button,
@ -1253,11 +1270,12 @@
/* Basic */
.ui.basic.green.buttons .button,
.ui.basic.green.button {
box-shadow: 0px 0px 0px @basicColoredBorderSize @green inset !important;
color: @green !important;
box-shadow: 0px 0px 0px @basicColoredBorderSize @solidBorderColor inset !important;
color: @textColor !important;
}
.ui.basic.green.buttons .button:hover,
.ui.basic.green.button:hover {
background: transparent !important;
box-shadow: 0px 0px 0px @basicColoredBorderSize @greenHover inset !important;
color: @greenHover !important;
}
@ -1266,6 +1284,12 @@
box-shadow: 0px 0px 0px @basicColoredBorderSize @greenDown inset !important;
color: @greenDown !important;
}
.ui.basic.green.buttons .button.active,
.ui.basic.green.button.active {
background: transparent !important;
box-shadow: 0px 0px 0px @basicColoredBorderSize @greenDown inset !important;
color: @greenDown !important;
}
/* Inverted */
.ui.inverted.green.buttons .button,
@ -1329,11 +1353,12 @@
/* Basic */
.ui.basic.orange.buttons .button,
.ui.basic.orange.button {
box-shadow: 0px 0px 0px @basicColoredBorderSize @orange inset !important;
color: @orange !important;
box-shadow: 0px 0px 0px @basicColoredBorderSize @solidBorderColor inset !important;
color: @textColor !important;
}
.ui.basic.orange.buttons .button:hover,
.ui.basic.orange.button:hover {
background: transparent !important;
box-shadow: 0px 0px 0px @basicColoredBorderSize @orangeHover inset !important;
color: @orangeHover !important;
}
@ -1342,6 +1367,12 @@
box-shadow: 0px 0px 0px @basicColoredBorderSize @orangeDown inset !important;
color: @orangeDown !important;
}
.ui.basic.orange.buttons .button.active,
.ui.basic.orange.button.active {
background: transparent !important;
box-shadow: 0px 0px 0px @basicColoredBorderSize @orangeDown inset !important;
color: @orangeDown !important;
}
/* Inverted */
.ui.inverted.orange.buttons .button,
@ -1405,11 +1436,12 @@
/* Basic */
.ui.basic.pink.buttons .button,
.ui.basic.pink.button {
box-shadow: 0px 0px 0px @basicColoredBorderSize @pink inset !important;
color: @pink !important;
box-shadow: 0px 0px 0px @basicColoredBorderSize @solidBorderColor inset !important;
color: @textColor !important;
}
.ui.basic.pink.buttons .button:hover,
.ui.basic.pink.button:hover {
background: transparent !important;
box-shadow: 0px 0px 0px @basicColoredBorderSize @pinkHover inset !important;
color: @pinkHover !important;
}
@ -1418,6 +1450,12 @@
box-shadow: 0px 0px 0px @basicColoredBorderSize @pinkDown inset !important;
color: @pinkDown !important;
}
.ui.basic.pink.buttons .button.active,
.ui.basic.pink.button.active {
background: transparent !important;
box-shadow: 0px 0px 0px @basicColoredBorderSize @pinkDown inset !important;
color: @pinkDown !important;
}
/* Inverted */
.ui.inverted.pink.buttons .button,
@ -1481,11 +1519,12 @@
/* Basic */
.ui.basic.purple.buttons .button,
.ui.basic.purple.button {
box-shadow: 0px 0px 0px @basicColoredBorderSize @purple inset !important;
color: @purple !important;
box-shadow: 0px 0px 0px @basicColoredBorderSize @solidBorderColor inset !important;
color: @textColor !important;
}
.ui.basic.purple.buttons .button:hover,
.ui.basic.purple.button:hover {
background: transparent !important;
box-shadow: 0px 0px 0px @basicColoredBorderSize @purpleHover inset !important;
color: @purpleHover !important;
}
@ -1494,6 +1533,12 @@
box-shadow: 0px 0px 0px @basicColoredBorderSize @purpleDown inset !important;
color: @purpleDown !important;
}
.ui.basic.purple.buttons .button.active,
.ui.basic.purple.button.active {
background: transparent !important;
box-shadow: 0px 0px 0px @basicColoredBorderSize @purpleDown inset !important;
color: @purpleDown !important;
}
/* Inverted */
.ui.inverted.purple.buttons .button,
@ -1557,11 +1602,12 @@
/* Basic */
.ui.basic.red.buttons .button,
.ui.basic.red.button {
box-shadow: 0px 0px 0px @basicColoredBorderSize @red inset !important;
color: @red !important;
box-shadow: 0px 0px 0px @basicColoredBorderSize @solidBorderColor inset !important;
color: @textColor !important;
}
.ui.basic.red.buttons .button:hover,
.ui.basic.red.button:hover {
background: transparent !important;
box-shadow: 0px 0px 0px @basicColoredBorderSize @redHover inset !important;
color: @redHover !important;
}
@ -1570,6 +1616,12 @@
box-shadow: 0px 0px 0px @basicColoredBorderSize @redDown inset !important;
color: @redDown !important;
}
.ui.basic.red.buttons .button.active,
.ui.basic.red.button.active {
background: transparent !important;
box-shadow: 0px 0px 0px @basicColoredBorderSize @redDown inset !important;
color: @redDown !important;
}
/* Inverted */
.ui.inverted.red.buttons .button,
@ -1634,11 +1686,12 @@
/* Basic */
.ui.basic.teal.buttons .button,
.ui.basic.teal.button {
box-shadow: 0px 0px 0px @basicColoredBorderSize @teal inset !important;
color: @teal !important;
box-shadow: 0px 0px 0px @basicColoredBorderSize @solidBorderColor inset !important;
color: @textColor !important;
}
.ui.basic.teal.buttons .button:hover,
.ui.basic.teal.button:hover {
background: transparent !important;
box-shadow: 0px 0px 0px @basicColoredBorderSize @tealHover inset !important;
color: @tealHover !important;
}
@ -1647,6 +1700,12 @@
box-shadow: 0px 0px 0px @basicColoredBorderSize @tealDown inset !important;
color: @tealDown !important;
}
.ui.basic.teal.buttons .button.active,
.ui.basic.teal.button.active {
background: transparent !important;
box-shadow: 0px 0px 0px @basicColoredBorderSize @tealDown inset !important;
color: @tealDown !important;
}
/* Inverted */
.ui.inverted.teal.buttons .button,
@ -1711,11 +1770,12 @@
/* Basic */
.ui.basic.yellow.buttons .button,
.ui.basic.yellow.button {
box-shadow: 0px 0px 0px @basicColoredBorderSize @yellow inset !important;
color: @yellow !important;
box-shadow: 0px 0px 0px @basicColoredBorderSize @solidBorderColor inset !important;
color: @textColor !important;
}
.ui.basic.yellow.buttons .button:hover,
.ui.basic.yellow.button:hover {
background: transparent !important;
box-shadow: 0px 0px 0px @basicColoredBorderSize @yellowHover inset !important;
color: @yellowHover !important;
}
@ -1724,6 +1784,12 @@
box-shadow: 0px 0px 0px @basicColoredBorderSize @yellowDown inset !important;
color: @yellowDown !important;
}
.ui.basic.yellow.buttons .button.active,
.ui.basic.yellow.button.active {
background: transparent !important;
box-shadow: 0px 0px 0px @basicColoredBorderSize @yellowDown inset !important;
color: @yellowDown !important;
}
/* Inverted */
.ui.inverted.yellow.buttons .button,

Write Preview
Loading…
Cancel
Save