less-rails-semantic_ui 1.12.3.0 → 2.0.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (197) hide show
  1. checksums.yaml +4 -4
  2. data/assets/javascripts/semantic_ui/definitions/behaviors/api.js +394 -188
  3. data/assets/javascripts/semantic_ui/definitions/behaviors/colorize.js +4 -2
  4. data/assets/javascripts/semantic_ui/definitions/behaviors/form.js +263 -125
  5. data/assets/javascripts/semantic_ui/definitions/behaviors/state.js +3 -3
  6. data/assets/javascripts/semantic_ui/definitions/behaviors/visibility.js +213 -96
  7. data/assets/javascripts/semantic_ui/definitions/behaviors/visit.js +6 -4
  8. data/assets/javascripts/semantic_ui/definitions/globals/site.js +4 -4
  9. data/assets/javascripts/semantic_ui/definitions/modules/accordion.js +66 -52
  10. data/assets/javascripts/semantic_ui/definitions/modules/checkbox.js +309 -112
  11. data/assets/javascripts/semantic_ui/definitions/modules/dimmer.js +24 -26
  12. data/assets/javascripts/semantic_ui/definitions/modules/dropdown.js +2005 -590
  13. data/assets/javascripts/semantic_ui/definitions/modules/embed.js +662 -0
  14. data/assets/javascripts/semantic_ui/definitions/modules/modal.js +106 -79
  15. data/assets/javascripts/semantic_ui/definitions/modules/nag.js +7 -8
  16. data/assets/javascripts/semantic_ui/definitions/modules/popup.js +323 -194
  17. data/assets/javascripts/semantic_ui/definitions/modules/progress.js +111 -103
  18. data/assets/javascripts/semantic_ui/definitions/modules/rating.js +78 -54
  19. data/assets/javascripts/semantic_ui/definitions/modules/search.js +304 -122
  20. data/assets/javascripts/semantic_ui/definitions/modules/shape.js +93 -47
  21. data/assets/javascripts/semantic_ui/definitions/modules/sidebar.js +83 -149
  22. data/assets/javascripts/semantic_ui/definitions/modules/sticky.js +99 -29
  23. data/assets/javascripts/semantic_ui/definitions/modules/tab.js +219 -124
  24. data/assets/javascripts/semantic_ui/definitions/modules/transition.js +202 -171
  25. data/assets/stylesheets/semantic_ui/definitions/collections/breadcrumb.less +2 -1
  26. data/assets/stylesheets/semantic_ui/definitions/collections/form.less +135 -58
  27. data/assets/stylesheets/semantic_ui/definitions/collections/grid.less +366 -383
  28. data/assets/stylesheets/semantic_ui/definitions/collections/menu.less +838 -631
  29. data/assets/stylesheets/semantic_ui/definitions/collections/message.less +89 -71
  30. data/assets/stylesheets/semantic_ui/definitions/collections/table.less +183 -131
  31. data/assets/stylesheets/semantic_ui/definitions/elements/button.less +1097 -300
  32. data/assets/stylesheets/semantic_ui/definitions/elements/container.less +135 -0
  33. data/assets/stylesheets/semantic_ui/definitions/elements/divider.less +31 -30
  34. data/assets/stylesheets/semantic_ui/definitions/elements/flag.less +1 -1
  35. data/assets/stylesheets/semantic_ui/definitions/elements/header.less +209 -121
  36. data/assets/stylesheets/semantic_ui/definitions/elements/icon.less +201 -96
  37. data/assets/stylesheets/semantic_ui/definitions/elements/image.less +26 -11
  38. data/assets/stylesheets/semantic_ui/definitions/elements/input.less +49 -14
  39. data/assets/stylesheets/semantic_ui/definitions/elements/label.less +391 -221
  40. data/assets/stylesheets/semantic_ui/definitions/elements/list.less +107 -68
  41. data/assets/stylesheets/semantic_ui/definitions/elements/loader.less +3 -1
  42. data/assets/stylesheets/semantic_ui/definitions/elements/rail.less +34 -25
  43. data/assets/stylesheets/semantic_ui/definitions/elements/reveal.less +25 -10
  44. data/assets/stylesheets/semantic_ui/definitions/elements/segment.less +261 -173
  45. data/assets/stylesheets/semantic_ui/definitions/elements/step.less +169 -70
  46. data/assets/stylesheets/semantic_ui/definitions/globals/reset.less +1 -1
  47. data/assets/stylesheets/semantic_ui/definitions/globals/site.less +3 -1
  48. data/assets/stylesheets/semantic_ui/definitions/modules/accordion.less +1 -2
  49. data/assets/stylesheets/semantic_ui/definitions/modules/checkbox.less +175 -103
  50. data/assets/stylesheets/semantic_ui/definitions/modules/dimmer.less +26 -15
  51. data/assets/stylesheets/semantic_ui/definitions/modules/dropdown.less +349 -80
  52. data/assets/stylesheets/semantic_ui/definitions/modules/embed.less +174 -0
  53. data/assets/stylesheets/semantic_ui/definitions/modules/modal.less +83 -36
  54. data/assets/stylesheets/semantic_ui/definitions/modules/nag.less +1 -1
  55. data/assets/stylesheets/semantic_ui/definitions/modules/popup.less +48 -7
  56. data/assets/stylesheets/semantic_ui/definitions/modules/progress.less +160 -107
  57. data/assets/stylesheets/semantic_ui/definitions/modules/rating.less +57 -54
  58. data/assets/stylesheets/semantic_ui/definitions/modules/search.less +55 -10
  59. data/assets/stylesheets/semantic_ui/definitions/modules/shape.less +5 -6
  60. data/assets/stylesheets/semantic_ui/definitions/modules/sidebar.less +9 -5
  61. data/assets/stylesheets/semantic_ui/definitions/modules/sticky.less +1 -1
  62. data/assets/stylesheets/semantic_ui/definitions/modules/tab.less +1 -1
  63. data/assets/stylesheets/semantic_ui/definitions/modules/transition.less +3 -4
  64. data/assets/stylesheets/semantic_ui/definitions/views/card.less +240 -130
  65. data/assets/stylesheets/semantic_ui/definitions/views/comment.less +1 -1
  66. data/assets/stylesheets/semantic_ui/definitions/views/feed.less +15 -8
  67. data/assets/stylesheets/semantic_ui/definitions/views/item.less +13 -13
  68. data/assets/stylesheets/semantic_ui/definitions/views/statistic.less +230 -86
  69. data/assets/stylesheets/semantic_ui/theme.less +22 -15
  70. data/assets/stylesheets/semantic_ui/themes/amazon/elements/button.overrides +5 -5
  71. data/assets/stylesheets/semantic_ui/themes/amazon/elements/button.variables +5 -4
  72. data/assets/stylesheets/semantic_ui/themes/basic/collections/table.variables +1 -0
  73. data/assets/stylesheets/semantic_ui/themes/basic/views/card.variables +6 -4
  74. data/assets/stylesheets/semantic_ui/themes/bookish/elements/header.variables +4 -4
  75. data/assets/stylesheets/semantic_ui/themes/bootstrap3/elements/button.variables +1 -1
  76. data/assets/stylesheets/semantic_ui/themes/chubby/collections/form.overrides +8 -0
  77. data/assets/stylesheets/semantic_ui/themes/chubby/collections/menu.overrides +0 -0
  78. data/assets/stylesheets/semantic_ui/themes/chubby/collections/menu.variables +40 -0
  79. data/assets/stylesheets/semantic_ui/themes/classic/modules/progress.variables +1 -0
  80. data/assets/stylesheets/semantic_ui/themes/classic/views/card.overrides +1 -1
  81. data/assets/stylesheets/semantic_ui/themes/colored/modules/checkbox.overrides +0 -0
  82. data/assets/stylesheets/semantic_ui/themes/colored/modules/checkbox.variables +17 -0
  83. data/assets/stylesheets/semantic_ui/themes/default/collections/breadcrumb.overrides +0 -0
  84. data/assets/stylesheets/semantic_ui/themes/default/collections/breadcrumb.variables +5 -15
  85. data/assets/stylesheets/semantic_ui/themes/default/collections/form.overrides +0 -0
  86. data/assets/stylesheets/semantic_ui/themes/default/collections/form.variables +31 -35
  87. data/assets/stylesheets/semantic_ui/themes/default/collections/grid.overrides +0 -0
  88. data/assets/stylesheets/semantic_ui/themes/default/collections/grid.variables +34 -28
  89. data/assets/stylesheets/semantic_ui/themes/default/collections/menu.overrides +0 -0
  90. data/assets/stylesheets/semantic_ui/themes/default/collections/menu.variables +259 -163
  91. data/assets/stylesheets/semantic_ui/themes/default/collections/message.overrides +0 -0
  92. data/assets/stylesheets/semantic_ui/themes/default/collections/message.variables +42 -19
  93. data/assets/stylesheets/semantic_ui/themes/default/collections/table.overrides +0 -3
  94. data/assets/stylesheets/semantic_ui/themes/default/collections/table.variables +63 -59
  95. data/assets/stylesheets/semantic_ui/themes/default/elements/button.overrides +0 -0
  96. data/assets/stylesheets/semantic_ui/themes/default/elements/button.variables +90 -50
  97. data/assets/stylesheets/semantic_ui/themes/default/elements/container.overrides +3 -0
  98. data/assets/stylesheets/semantic_ui/themes/default/elements/container.variables +45 -0
  99. data/assets/stylesheets/semantic_ui/themes/default/elements/divider.overrides +15 -0
  100. data/assets/stylesheets/semantic_ui/themes/default/elements/divider.variables +3 -4
  101. data/assets/stylesheets/semantic_ui/themes/default/elements/flag.overrides +0 -0
  102. data/assets/stylesheets/semantic_ui/themes/default/elements/header.overrides +0 -0
  103. data/assets/stylesheets/semantic_ui/themes/default/elements/header.variables +40 -36
  104. data/assets/stylesheets/semantic_ui/themes/default/elements/icon.overrides +4 -3
  105. data/assets/stylesheets/semantic_ui/themes/default/elements/icon.variables +29 -12
  106. data/assets/stylesheets/semantic_ui/themes/default/elements/image.overrides +0 -0
  107. data/assets/stylesheets/semantic_ui/themes/default/elements/image.variables +5 -3
  108. data/assets/stylesheets/semantic_ui/themes/default/elements/input.overrides +0 -0
  109. data/assets/stylesheets/semantic_ui/themes/default/elements/input.variables +10 -24
  110. data/assets/stylesheets/semantic_ui/themes/default/elements/label.overrides +0 -0
  111. data/assets/stylesheets/semantic_ui/themes/default/elements/label.variables +88 -35
  112. data/assets/stylesheets/semantic_ui/themes/default/elements/list.overrides +0 -0
  113. data/assets/stylesheets/semantic_ui/themes/default/elements/list.variables +53 -34
  114. data/assets/stylesheets/semantic_ui/themes/default/elements/loader.overrides +0 -0
  115. data/assets/stylesheets/semantic_ui/themes/default/elements/loader.variables +9 -10
  116. data/assets/stylesheets/semantic_ui/themes/default/elements/rail.overrides +0 -0
  117. data/assets/stylesheets/semantic_ui/themes/default/elements/rail.variables +13 -5
  118. data/assets/stylesheets/semantic_ui/themes/default/elements/reveal.overrides +0 -0
  119. data/assets/stylesheets/semantic_ui/themes/default/elements/reveal.variables +6 -4
  120. data/assets/stylesheets/semantic_ui/themes/default/elements/segment.overrides +0 -0
  121. data/assets/stylesheets/semantic_ui/themes/default/elements/segment.variables +66 -28
  122. data/assets/stylesheets/semantic_ui/themes/default/elements/step.overrides +0 -0
  123. data/assets/stylesheets/semantic_ui/themes/default/elements/step.variables +60 -31
  124. data/assets/stylesheets/semantic_ui/themes/default/globals/reset.overrides +0 -0
  125. data/assets/stylesheets/semantic_ui/themes/default/globals/site.variables +477 -303
  126. data/assets/stylesheets/semantic_ui/themes/default/modules/accordion.overrides +0 -0
  127. data/assets/stylesheets/semantic_ui/themes/default/modules/accordion.variables +6 -7
  128. data/assets/stylesheets/semantic_ui/themes/default/modules/chatroom.overrides +0 -0
  129. data/assets/stylesheets/semantic_ui/themes/default/modules/checkbox.overrides +19 -16
  130. data/assets/stylesheets/semantic_ui/themes/default/modules/checkbox.variables +71 -43
  131. data/assets/stylesheets/semantic_ui/themes/default/modules/dimmer.overrides +0 -0
  132. data/assets/stylesheets/semantic_ui/themes/default/modules/dimmer.variables +12 -9
  133. data/assets/stylesheets/semantic_ui/themes/default/modules/dropdown.overrides +0 -5
  134. data/assets/stylesheets/semantic_ui/themes/default/modules/dropdown.variables +146 -64
  135. data/assets/stylesheets/semantic_ui/themes/default/modules/{video.overrides → embed.overrides} +0 -0
  136. data/assets/stylesheets/semantic_ui/themes/default/modules/embed.variables +53 -0
  137. data/assets/stylesheets/semantic_ui/themes/default/modules/modal.overrides +0 -0
  138. data/assets/stylesheets/semantic_ui/themes/default/modules/modal.variables +24 -18
  139. data/assets/stylesheets/semantic_ui/themes/default/modules/nag.overrides +0 -0
  140. data/assets/stylesheets/semantic_ui/themes/default/modules/popup.overrides +0 -0
  141. data/assets/stylesheets/semantic_ui/themes/default/modules/popup.variables +3 -9
  142. data/assets/stylesheets/semantic_ui/themes/default/modules/progress.variables +13 -7
  143. data/assets/stylesheets/semantic_ui/themes/default/modules/rating.overrides +0 -0
  144. data/assets/stylesheets/semantic_ui/themes/default/modules/rating.variables +71 -33
  145. data/assets/stylesheets/semantic_ui/themes/default/modules/search.overrides +0 -0
  146. data/assets/stylesheets/semantic_ui/themes/default/modules/search.variables +36 -34
  147. data/assets/stylesheets/semantic_ui/themes/default/modules/shape.overrides +0 -0
  148. data/assets/stylesheets/semantic_ui/themes/default/modules/shape.variables +7 -2
  149. data/assets/stylesheets/semantic_ui/themes/default/modules/sidebar.overrides +0 -0
  150. data/assets/stylesheets/semantic_ui/themes/default/modules/sidebar.variables +2 -5
  151. data/assets/stylesheets/semantic_ui/themes/default/modules/sticky.overrides +0 -0
  152. data/assets/stylesheets/semantic_ui/themes/default/modules/sticky.variables +2 -7
  153. data/assets/stylesheets/semantic_ui/themes/default/modules/tab.variables +1 -3
  154. data/assets/stylesheets/semantic_ui/themes/default/modules/transition.overrides +8 -9
  155. data/assets/stylesheets/semantic_ui/themes/default/views/ad.variables +2 -2
  156. data/assets/stylesheets/semantic_ui/themes/default/views/card.variables +33 -23
  157. data/assets/stylesheets/semantic_ui/themes/default/views/comment.overrides +0 -0
  158. data/assets/stylesheets/semantic_ui/themes/default/views/feed.overrides +0 -0
  159. data/assets/stylesheets/semantic_ui/themes/default/views/feed.variables +15 -23
  160. data/assets/stylesheets/semantic_ui/themes/default/views/item.overrides +0 -0
  161. data/assets/stylesheets/semantic_ui/themes/default/views/item.variables +12 -11
  162. data/assets/stylesheets/semantic_ui/themes/default/views/statistic.overrides +0 -0
  163. data/assets/stylesheets/semantic_ui/themes/default/views/statistic.variables +25 -24
  164. data/assets/stylesheets/semantic_ui/themes/flat/collections/form.overrides +4 -0
  165. data/assets/stylesheets/semantic_ui/themes/flat/collections/form.variables +1 -2
  166. data/assets/stylesheets/semantic_ui/themes/flat/globals/site.variables +1 -0
  167. data/assets/stylesheets/semantic_ui/themes/github/collections/form.variables +1 -1
  168. data/assets/stylesheets/semantic_ui/themes/github/collections/menu.variables +10 -15
  169. data/assets/stylesheets/semantic_ui/themes/github/elements/button.variables +2 -2
  170. data/assets/stylesheets/semantic_ui/themes/github/elements/step.variables +2 -2
  171. data/assets/stylesheets/semantic_ui/themes/instagram/views/card.overrides +12 -0
  172. data/assets/stylesheets/semantic_ui/themes/instagram/views/card.variables +23 -0
  173. data/assets/stylesheets/semantic_ui/themes/material/collections/menu.overrides +1 -0
  174. data/assets/stylesheets/semantic_ui/themes/material/collections/menu.variables +10 -0
  175. data/assets/stylesheets/semantic_ui/themes/material/elements/button.overrides +1 -0
  176. data/assets/stylesheets/semantic_ui/themes/material/elements/button.variables +14 -6
  177. data/assets/stylesheets/semantic_ui/themes/material/globals/site.variables +3 -2
  178. data/assets/stylesheets/semantic_ui/themes/material/modules/dropdown.overrides +5 -0
  179. data/assets/stylesheets/semantic_ui/themes/material/modules/dropdown.variables +20 -0
  180. data/assets/stylesheets/semantic_ui/themes/raised/elements/button.variables +5 -5
  181. data/assets/stylesheets/semantic_ui/themes/round/elements/button.variables +1 -1
  182. data/assets/stylesheets/semantic_ui/themes/timeline/views/feed.overrides +4 -12
  183. data/assets/stylesheets/semantic_ui/themes/timeline/views/feed.variables +3 -7
  184. data/lib/generators/semantic_ui/install/templates/config/elements/container.overrides +3 -0
  185. data/lib/generators/semantic_ui/install/templates/config/elements/container.variables +3 -0
  186. data/lib/generators/semantic_ui/install/templates/config/modules/embed.overrides +3 -0
  187. data/lib/generators/semantic_ui/install/templates/config/modules/embed.variables +0 -0
  188. data/lib/generators/semantic_ui/install/templates/semantic_ui.css +2 -1
  189. data/lib/generators/semantic_ui/install/templates/semantic_ui.js +1 -1
  190. data/lib/generators/semantic_ui/install/templates/theme.config +5 -3
  191. data/lib/less/rails/semantic_ui/version.rb +1 -1
  192. data/tasks/update.rake +21 -6
  193. metadata +23 -7
  194. data/assets/fonts/semantic_ui/themes/default/assets/fonts/icons.otf +0 -0
  195. data/assets/javascripts/semantic_ui/definitions/modules/video.js +0 -540
  196. data/assets/stylesheets/semantic_ui/definitions/modules/video.less +0 -135
  197. data/assets/stylesheets/semantic_ui/themes/default/modules/video.variables +0 -16
@@ -13,7 +13,7 @@
13
13
  * http://github.com/semantic-org/semantic-ui/
14
14
  *
15
15
  *
16
- * Copyright 2014 Contributorss
16
+ * Copyright 2015 Contributors
17
17
  * Released under the MIT license
18
18
  * http://opensource.org/licenses/MIT
19
19
  *
@@ -43,7 +43,7 @@
43
43
  outline: none;
44
44
  border: none;
45
45
  vertical-align: @verticalAlign;
46
- background-color: @backgroundColor;
46
+ background: @background;
47
47
  color: @textColor;
48
48
 
49
49
  font-family: @fontFamily;
@@ -54,12 +54,11 @@
54
54
  text-transform: @textTransform;
55
55
  text-shadow: @textShadow;
56
56
  font-weight: @fontWeight;
57
- line-height: 1;
57
+ line-height: @lineHeight;
58
58
  font-style: normal;
59
59
  text-align: center;
60
60
  text-decoration: none;
61
61
 
62
- background-image: @backgroundImage;
63
62
  border-radius: @borderRadius;
64
63
  box-shadow: @boxShadow;
65
64
 
@@ -217,8 +216,6 @@
217
216
  .ui.disabled.button:hover,
218
217
  .ui.disabled.active.button {
219
218
  cursor: default;
220
- background-color: @lightGrey !important;
221
- color: @lightTextColor !important;
222
219
  opacity: @disabledOpacity !important;
223
220
  background-image: none !important;
224
221
  box-shadow: none !important;
@@ -241,8 +238,9 @@
241
238
  .ui.animated.button {
242
239
  position: relative;
243
240
  overflow: hidden;
244
- vertical-align: @animatedVerticalAlign;
245
241
  padding-right: 0em !important;
242
+ vertical-align: @animatedVerticalAlign;
243
+ z-index: @animatedZIndex;
246
244
  }
247
245
 
248
246
  .ui.animated.button .content {
@@ -270,12 +268,14 @@
270
268
  top: 50%;
271
269
  left: auto;
272
270
  right: -100%;
273
- margin-top: -0.5em;
271
+ margin-top: -(@lineHeight / 2);
274
272
  }
273
+ .ui.animated.button:focus .visible.content,
275
274
  .ui.animated.button:hover .visible.content {
276
275
  left: auto;
277
276
  right: 200%;
278
277
  }
278
+ .ui.animated.button:focus .hidden.content,
279
279
  .ui.animated.button:hover .hidden.content {
280
280
  left: auto;
281
281
  right: 0%;
@@ -295,10 +295,12 @@
295
295
  left: 0%;
296
296
  right: auto;
297
297
  }
298
+ .ui.vertical.animated.button:focus .visible.content,
298
299
  .ui.vertical.animated.button:hover .visible.content {
299
300
  transform: translateY(200%);
300
301
  right: auto;
301
302
  }
303
+ .ui.vertical.animated.button:focus .hidden.content,
302
304
  .ui.vertical.animated.button:hover .hidden.content {
303
305
  top: 50%;
304
306
  right: auto;
@@ -321,12 +323,14 @@
321
323
  right: auto;
322
324
  transform: scale(@fadeScaleHigh);
323
325
  }
326
+ .ui.fade.animated.button:focus .visible.content,
324
327
  .ui.fade.animated.button:hover .visible.content {
325
328
  left: auto;
326
329
  right: auto;
327
330
  opacity: 0;
328
331
  transform: scale(@fadeScaleLow);
329
332
  }
333
+ .ui.fade.animated.button:focus .hidden.content,
330
334
  .ui.fade.animated.button:hover .hidden.content {
331
335
  left: 0%;
332
336
  right: auto;
@@ -345,6 +349,7 @@
345
349
  text-shadow: none !important;
346
350
  }
347
351
 
352
+ /* Group */
348
353
  .ui.inverted.buttons .button {
349
354
  margin: @invertedGroupButtonOffset;
350
355
  }
@@ -357,14 +362,18 @@
357
362
  .ui.inverted.vertical.buttons .button:first-child {
358
363
  margin-top: 0em;
359
364
  }
360
- .ui.inverted.buttons .button:hover {
361
- position: relative;
362
- }
365
+
366
+ /* States */
363
367
  .ui.inverted.button:hover {
364
368
  background: @white;
365
369
  box-shadow: 0px 0px 0px @invertedBorderSize @white inset !important;
366
370
  color: @hoverColor;
367
371
  }
372
+ .ui.inverted.button:focus {
373
+ background: @white;
374
+ box-shadow: 0px 0px 0px @invertedBorderSize @white inset !important;
375
+ color: @focusColor;
376
+ }
368
377
 
369
378
 
370
379
  /*-------------------
@@ -523,6 +532,7 @@
523
532
  ---------------*/
524
533
 
525
534
  .ui.button > .icon {
535
+ height: @iconHeight;
526
536
  opacity: @iconOpacity;
527
537
  margin: @iconMargin;
528
538
  transition: @iconTransition;
@@ -640,7 +650,6 @@
640
650
  .ui.basic.buttons .button,
641
651
  .ui.basic.button {
642
652
  background: @basicBackground !important;
643
- background-image: none;
644
653
  color: @basicTextColor !important;
645
654
  font-weight: @basicFontWeight;
646
655
  border-radius: @basicBorderRadius;
@@ -650,6 +659,7 @@
650
659
  }
651
660
  .ui.basic.buttons {
652
661
  box-shadow: @basicGroupBoxShadow;
662
+ border: @basicGroupBorder;
653
663
  border-radius: @borderRadius;
654
664
  }
655
665
  .ui.basic.buttons .button {
@@ -662,6 +672,12 @@
662
672
  color: @basicHoverTextColor !important;
663
673
  box-shadow: @basicHoverBoxShadow;
664
674
  }
675
+ .ui.basic.buttons .button:focus,
676
+ .ui.basic.button:focus {
677
+ background: @basicFocusBackground !important;
678
+ color: @basicFocusTextColor !important;
679
+ box-shadow: @basicFocusBoxShadow;
680
+ }
665
681
  .ui.basic.buttons .button:active,
666
682
  .ui.basic.button:active {
667
683
  background: @basicDownBackground !important;
@@ -703,6 +719,11 @@
703
719
  color: @white !important;
704
720
  box-shadow: @basicInvertedHoverBoxShadow !important;
705
721
  }
722
+ .ui.basic.inverted.buttons .button:focus,
723
+ .ui.basic.inverted.button:focus {
724
+ color: @white !important;
725
+ box-shadow: @basicInvertedFocusBoxShadow !important;
726
+ }
706
727
  .ui.basic.inverted.buttons .button:active,
707
728
  .ui.basic.inverted.button:active {
708
729
  background-color: @transparentWhite !important;
@@ -731,7 +752,6 @@
731
752
  .ui.basic.vertical.buttons .button {
732
753
  border-left: none;
733
754
  }
734
-
735
755
  .ui.basic.vertical.buttons .button {
736
756
  border-left-width: 0px;
737
757
  border-top: @basicGroupBorder;
@@ -757,15 +777,15 @@
757
777
  .ui.labeled.icon.buttons > .button > .icon,
758
778
  .ui.labeled.icon.button > .icon {
759
779
  position: absolute;
760
- width: @labeledIconWidth;
761
780
  height: 100%;
781
+ line-height: 1;
762
782
 
783
+ width: @labeledIconWidth;
763
784
  background-color: @labeledIconBackgroundColor;
764
785
  text-align: center;
765
786
  color: @labeledIconColor;
766
787
 
767
788
  border-radius: @borderRadius 0px 0px @borderRadius;
768
- line-height: 1;
769
789
  box-shadow: @labeledIconLeftShadow;
770
790
  }
771
791
 
@@ -798,7 +818,7 @@
798
818
  width: 100%;
799
819
  top: 50%;
800
820
  text-align: center;
801
- margin-top: -0.5em;
821
+ margin-top: -(@lineHeight / 2);
802
822
  }
803
823
 
804
824
  .ui.labeled.icon.buttons .button > .icon {
@@ -863,49 +883,15 @@
863
883
  }
864
884
 
865
885
 
866
- /*--------------
867
- Attached
868
- ---------------*/
869
-
870
- .ui.attached.button {
871
- display: block;
872
- margin: 0em;
873
- box-shadow: @attachedBoxShadow !important;
874
- border-radius: 0em;
875
- }
876
- .ui.attached.top.button {
877
- border-radius: @borderRadius @borderRadius 0em 0em;
878
- }
879
- .ui.attached.bottom.button {
880
- border-radius: 0em 0em @borderRadius @borderRadius;
881
- }
882
- .ui.attached.left.button {
883
- display: inline-block;
884
- border-left: none;
885
-
886
- padding-right: @attachedHorizontalPadding;
887
- text-align: right;
888
- border-radius: @borderRadius 0em 0em @borderRadius;
889
- }
890
- .ui.attached.right.button {
891
- display: inline-block;
892
- padding-left: @attachedHorizontalPadding;
893
- text-align: left;
894
- border-radius: 0em @borderRadius @borderRadius 0em;
895
- }
896
-
897
-
898
-
899
886
  /*-------------------
900
887
  Or Buttons
901
888
  --------------------*/
902
889
 
903
890
  .ui.buttons .or {
904
891
  position: relative;
905
- float: left;
906
892
  width: @orGap;
907
893
  height: @orHeight;
908
- z-index: 3;
894
+ z-index: @orZIndex;
909
895
  }
910
896
  .ui.buttons .or:before {
911
897
  position: absolute;
@@ -949,178 +935,199 @@
949
935
  Attached
950
936
  --------------------*/
951
937
 
952
- /* Plural Attached */
953
- .attached.ui.buttons {
954
- margin: 0px;
955
- border-radius: 0em 0em 0em 0em;
938
+
939
+ /* Singular */
940
+ .ui.attached.button {
941
+ position: relative;
942
+ display: block;
943
+ margin: 0em;
944
+ border-radius: 0em;
945
+ box-shadow: @attachedBoxShadow !important;
946
+ }
947
+
948
+ /* Top / Bottom */
949
+ .ui.attached.top.button {
950
+ border-radius: @borderRadius @borderRadius 0em 0em;
951
+ }
952
+ .ui.attached.bottom.button {
953
+ border-radius: 0em 0em @borderRadius @borderRadius;
954
+ }
955
+
956
+ /* Left / Right */
957
+ .ui.left.attached.button {
958
+ display: inline-block;
959
+ border-left: none;
960
+ text-align: right;
961
+
962
+ padding-right: @attachedHorizontalPadding;
963
+ border-radius: @borderRadius 0em 0em @borderRadius;
964
+ }
965
+ .ui.right.attached.button {
966
+ display: inline-block;
967
+ text-align: left;
968
+ padding-left: @attachedHorizontalPadding;
969
+ border-radius: 0em @borderRadius @borderRadius 0em;
970
+ }
971
+
972
+ /* Plural */
973
+ .ui.attached.buttons {
974
+ position: relative;
975
+ display: flex;
976
+ border-radius: 0em;
977
+ width: auto !important;
978
+ z-index: @attachedZIndex;
979
+ margin-left: @attachedOffset;
980
+ margin-right: @attachedOffset;
956
981
  }
957
- .attached.ui.buttons .button {
982
+ .ui.attached.buttons .button {
958
983
  margin: 0em;
959
984
  }
960
- .attached.ui.buttons .button:first-child {
961
- border-radius: 0em 0em 0em 0em;
985
+ .ui.attached.buttons .button:first-child {
986
+ border-radius: 0em;
962
987
  }
963
- .attached.ui.buttons .button:last-child {
964
- border-radius: 0em 0em 0em 0em;
988
+ .ui.attached.buttons .button:last-child {
989
+ border-radius: 0em;
965
990
  }
966
991
 
967
- /* Top Side */
968
- [class*="top attached"].ui.buttons {
992
+ /* Top / Bottom */
993
+ .ui[class*="top attached"].buttons {
969
994
  margin-bottom: @attachedOffset;
970
995
  border-radius: @borderRadius @borderRadius 0em 0em;
971
996
  }
972
- [class*="top attached"].ui.buttons .button:first-child {
997
+ .ui[class*="top attached"].buttons .button:first-child {
973
998
  border-radius: @borderRadius 0em 0em 0em;
974
999
  }
975
- [class*="top attached"].ui.buttons .button:last-child {
1000
+ .ui[class*="top attached"].buttons .button:last-child {
976
1001
  border-radius: 0em @borderRadius 0em 0em;
977
1002
  }
978
1003
 
979
- /* Bottom Side */
980
- [class*="bottom attached"].ui.buttons {
1004
+ .ui[class*="bottom attached"].buttons {
981
1005
  margin-top: @attachedOffset;
982
1006
  border-radius: 0em 0em @borderRadius @borderRadius;
983
1007
  }
984
- [class*="bottom attached"].ui.buttons .button:first-child {
1008
+ .ui[class*="bottom attached"].buttons .button:first-child {
985
1009
  border-radius: 0em 0em 0em @borderRadius;
986
1010
  }
987
- [class*="bottom attached"].ui.buttons .button:last-child {
1011
+ .ui[class*="bottom attached"].buttons .button:last-child {
988
1012
  border-radius: 0em 0em @borderRadius 0em;
989
1013
  }
990
1014
 
991
- /* Left Side */
992
- [class*="left attached"].ui.buttons {
1015
+ /* Left / Right */
1016
+ .ui[class*="left attached"].buttons {
1017
+ display: inline-flex;
1018
+ margin-right: 0em;
993
1019
  margin-left: @attachedOffset;
994
1020
  border-radius: 0em @borderRadius @borderRadius 0em;
995
1021
  }
996
- [class*="left attached"].ui.buttons .button:first-child {
1022
+ .ui[class*="left attached"].buttons .button:first-child {
997
1023
  margin-left: @attachedOffset;
998
1024
  border-radius: 0em @borderRadius 0em 0em;
999
1025
  }
1000
- [class*="left attached"].ui.buttons .button:last-child {
1026
+ .ui[class*="left attached"].buttons .button:last-child {
1001
1027
  margin-left: @attachedOffset;
1002
1028
  border-radius: 0em 0em @borderRadius 0em;
1003
1029
  }
1004
- /* Right Side */
1005
- [class*="right attached"].ui.buttons,
1006
- [class*="right attached"].ui.buttons .button {
1030
+
1031
+ .ui[class*="right attached"].buttons {
1032
+ display: inline-flex;
1033
+ margin-left: 0em;
1007
1034
  margin-right: @attachedOffset;
1008
1035
  border-radius: @borderRadius 0em 0em @borderRadius;
1009
1036
  }
1010
- [class*="right attached"].ui.buttons .button:first-child {
1037
+ .ui[class*="right attached"].buttons .button:first-child {
1011
1038
  margin-left: @attachedOffset;
1012
1039
  border-radius: @borderRadius 0em 0em 0em;
1013
1040
  }
1014
- [class*="right attached"].ui.buttons .button:last-child {
1041
+ .ui[class*="right attached"].buttons .button:last-child {
1015
1042
  margin-left: @attachedOffset;
1016
1043
  border-radius: 0em 0em 0em @borderRadius;
1017
1044
  }
1018
1045
 
1046
+ /*-------------------
1047
+ Fluid
1048
+ --------------------*/
1019
1049
 
1020
-
1021
- /* Fluid */
1022
1050
  .ui.fluid.buttons,
1023
- .ui.button.fluid,
1024
- .ui.fluid.buttons > .button {
1025
- display: block;
1051
+ .ui.button.fluid {
1052
+ display: flex;
1053
+ justify-content: center;
1054
+ flex-direction: row;
1026
1055
  width: 100%;
1027
1056
  }
1028
1057
 
1029
- .ui.\32.buttons,
1030
1058
  .ui.two.buttons {
1031
1059
  width: 100%;
1032
1060
  }
1033
- .ui.\32.buttons > .button,
1034
1061
  .ui.two.buttons > .button {
1035
1062
  width: 50%;
1036
1063
  }
1037
1064
 
1038
- .ui.\33.buttons,
1039
1065
  .ui.three.buttons {
1040
1066
  width: 100%;
1041
1067
  }
1042
- .ui.\33.buttons > .button,
1043
1068
  .ui.three.buttons > .button {
1044
1069
  width: 33.333%;
1045
1070
  }
1046
1071
 
1047
- .ui.\34.buttons,
1048
1072
  .ui.four.buttons {
1049
1073
  width: 100%;
1050
1074
  }
1051
- .ui.\34.buttons > .button,
1052
1075
  .ui.four.buttons > .button {
1053
1076
  width: 25%;
1054
1077
  }
1055
1078
 
1056
- .ui.\35.buttons,
1057
1079
  .ui.five.buttons {
1058
1080
  width: 100%;
1059
1081
  }
1060
- .ui.\35.buttons > .button,
1061
1082
  .ui.five.buttons > .button {
1062
1083
  width: 20%;
1063
1084
  }
1064
1085
 
1065
- .ui.\36.buttons,
1066
1086
  .ui.six.buttons {
1067
1087
  width: 100%;
1068
1088
  }
1069
- .ui.\36.buttons > .button,
1070
1089
  .ui.six.buttons > .button {
1071
1090
  width: 16.666%;
1072
1091
  }
1073
1092
 
1074
- .ui.\37.buttons,
1075
1093
  .ui.seven.buttons {
1076
1094
  width: 100%;
1077
1095
  }
1078
- .ui.\37.buttons > .button,
1079
1096
  .ui.seven.buttons > .button {
1080
1097
  width: 14.285%;
1081
1098
  }
1082
1099
 
1083
- .ui.\38.buttons,
1084
1100
  .ui.eight.buttons {
1085
1101
  width: 100%;
1086
1102
  }
1087
- .ui.\38.buttons > .button,
1088
1103
  .ui.eight.buttons > .button {
1089
1104
  width: 12.500%;
1090
1105
  }
1091
1106
 
1092
- .ui.\39.buttons,
1093
1107
  .ui.nine.buttons {
1094
1108
  width: 100%;
1095
1109
  }
1096
- .ui.\39.buttons > .button,
1097
1110
  .ui.nine.buttons > .button {
1098
1111
  width: 11.11%;
1099
1112
  }
1100
1113
 
1101
- .ui.\31\30.buttons,
1102
1114
  .ui.ten.buttons {
1103
1115
  width: 100%;
1104
1116
  }
1105
- .ui.\31\30.buttons > .button,
1106
1117
  .ui.ten.buttons > .button {
1107
1118
  width: 10%;
1108
1119
  }
1109
1120
 
1110
- .ui.\31\31.buttons,
1111
1121
  .ui.eleven.buttons {
1112
1122
  width: 100%;
1113
1123
  }
1114
- .ui.\31\31.buttons > .button,
1115
1124
  .ui.eleven.buttons > .button {
1116
1125
  width: 9.09%;
1117
1126
  }
1118
1127
 
1119
- .ui.\31\32.buttons,
1120
1128
  .ui.twelve.buttons {
1121
1129
  width: 100%;
1122
1130
  }
1123
- .ui.\31\32.buttons > .button,
1124
1131
  .ui.twelve.buttons > .button {
1125
1132
  width: 8.3333%;
1126
1133
  }
@@ -1128,51 +1135,40 @@
1128
1135
  /* Fluid Vertical Buttons */
1129
1136
  .ui.fluid.vertical.buttons,
1130
1137
  .ui.fluid.vertical.buttons > .button {
1131
- display: block;
1138
+ display: flex;
1132
1139
  width: auto;
1133
1140
  }
1134
1141
 
1135
- .ui.\32.vertical.buttons > .button,
1136
1142
  .ui.two.vertical.buttons > .button {
1137
1143
  height: 50%;
1138
1144
  }
1139
- .ui.\33.vertical.buttons > .button,
1140
1145
  .ui.three.vertical.buttons > .button {
1141
1146
  height: 33.333%;
1142
1147
  }
1143
- .ui.\34.vertical.buttons > .button,
1144
1148
  .ui.four.vertical.buttons > .button {
1145
1149
  height: 25%;
1146
1150
  }
1147
- .ui.\35.vertical.buttons > .button,
1148
1151
  .ui.five.vertical.buttons > .button {
1149
1152
  height: 20%;
1150
1153
  }
1151
- .ui.\36.vertical.buttons > .button,
1152
1154
  .ui.six.vertical.buttons > .button {
1153
1155
  height: 16.666%;
1154
1156
  }
1155
- .ui.\37.vertical.buttons > .button,
1156
1157
  .ui.seven.vertical.buttons > .button {
1157
1158
  height: 14.285%;
1158
1159
  }
1159
- .ui.\38.vertical.buttons > .button,
1160
1160
  .ui.eight.vertical.buttons > .button {
1161
1161
  height: 12.500%;
1162
1162
  }
1163
- .ui.\39.vertical.buttons > .button,
1164
1163
  .ui.nine.vertical.buttons > .button {
1165
1164
  height: 11.11%;
1166
1165
  }
1167
- .ui.\31\30.vertical.buttons > .button,
1168
1166
  .ui.ten.vertical.buttons > .button {
1169
1167
  height: 10%;
1170
1168
  }
1171
- .ui.\31\31.vertical.buttons > .button,
1172
1169
  .ui.eleven.vertical.buttons > .button {
1173
1170
  height: 9.09%;
1174
1171
  }
1175
- .ui.\31\32.vertical.buttons > .button,
1176
1172
  .ui.twelve.vertical.buttons > .button {
1177
1173
  height: 8.3333%;
1178
1174
  }
@@ -1196,8 +1192,14 @@
1196
1192
  .ui.black.buttons .button:hover,
1197
1193
  .ui.black.button:hover {
1198
1194
  background-color: @blackHover;
1199
- color: @invertedTextColor;
1200
- text-shadow: @invertedTextShadow;
1195
+ color: @blackTextColor;
1196
+ text-shadow: @blackTextShadow;
1197
+ }
1198
+ .ui.black.buttons .button:focus,
1199
+ .ui.black.button:focus {
1200
+ background-color: @blackFocus;
1201
+ color: @blackTextColor;
1202
+ text-shadow: @blackTextShadow;
1201
1203
  }
1202
1204
  .ui.black.buttons .button:active,
1203
1205
  .ui.black.button:active {
@@ -1217,7 +1219,7 @@
1217
1219
  /* Basic */
1218
1220
  .ui.basic.black.buttons .button,
1219
1221
  .ui.basic.black.button {
1220
- box-shadow: 0px 0px 0px @basicColoredBorderSize @borderColor inset !important;
1222
+ box-shadow: 0px 0px 0px @basicBorderSize @borderColor inset !important;
1221
1223
  color: @textColor !important;
1222
1224
  }
1223
1225
  .ui.basic.black.buttons .button:hover,
@@ -1226,14 +1228,19 @@
1226
1228
  box-shadow: 0px 0px 0px @basicColoredBorderSize @blackHover inset !important;
1227
1229
  color: @blackHover !important;
1228
1230
  }
1229
- .ui.basic.black.buttons .button:active,
1230
- .ui.basic.black.button:active {
1231
- box-shadow: 0px 0px 0px @basicColoredBorderSize @blackDown inset !important;
1232
- color: @blackDown !important;
1231
+ .ui.basic.black.buttons .button:focus,
1232
+ .ui.basic.black.button:focus {
1233
+ background: transparent !important;
1234
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @blackFocus inset !important;
1233
1235
  }
1234
1236
  .ui.basic.black.buttons .active.button,
1235
1237
  .ui.basic.black.active.button {
1236
1238
  background: transparent !important;
1239
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @blackActive inset !important;
1240
+ color: @blackDown !important;
1241
+ }
1242
+ .ui.basic.black.buttons .button:active,
1243
+ .ui.basic.black.button:active {
1237
1244
  box-shadow: 0px 0px 0px @basicColoredBorderSize @blackDown inset !important;
1238
1245
  color: @blackDown !important;
1239
1246
  }
@@ -1249,22 +1256,31 @@
1249
1256
  color: @invertedTextColor;
1250
1257
  }
1251
1258
  .ui.inverted.black.buttons .button:hover,
1259
+ .ui.inverted.black.button:hover,
1260
+ .ui.inverted.black.buttons .button:focus,
1261
+ .ui.inverted.black.button:focus,
1262
+ .ui.inverted.black.buttons .button.active,
1263
+ .ui.inverted.black.button.active,
1264
+ .ui.inverted.black.buttons .button:active,
1265
+ .ui.inverted.black.button:active {
1266
+ box-shadow: none !important;
1267
+ color: @lightBlackTextColor;
1268
+ }
1269
+ .ui.inverted.black.buttons .button:hover,
1252
1270
  .ui.inverted.black.button:hover {
1253
- box-shadow: 0px 0px 0px @invertedBorderSize @lightBlack inset !important;
1254
- background-color: @lightBlack;
1255
- color: @white;
1271
+ background-color: @lightBlackHover;
1272
+ }
1273
+ .ui.inverted.black.buttons .button:focus,
1274
+ .ui.inverted.black.button:focus {
1275
+ background-color: @lightBlackFocus;
1256
1276
  }
1257
1277
  .ui.inverted.black.buttons .active.button,
1258
1278
  .ui.inverted.black.active.button {
1259
- box-shadow: 0px 0px 0px @invertedBorderSize @lightBlack inset !important;
1260
- background-color: @lightBlack;
1261
- color: @white;
1279
+ background-color: @lightBlackActive;
1262
1280
  }
1263
1281
  .ui.inverted.black.buttons .button:active,
1264
1282
  .ui.inverted.black.button:active {
1265
- box-shadow: 0px 0px 0px @invertedBorderSize @lightBlackDown inset !important;
1266
1283
  background-color: @lightBlackDown;
1267
- color: @white;
1268
1284
  }
1269
1285
 
1270
1286
  /* Inverted Basic */
@@ -1278,13 +1294,19 @@
1278
1294
  .ui.inverted.black.basic.buttons .button:hover,
1279
1295
  .ui.inverted.black.buttons .basic.button:hover,
1280
1296
  .ui.inverted.black.basic.button:hover {
1281
- box-shadow: 0px 0px 0px @invertedBorderSize @lightBlack inset !important;
1297
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightBlackHover inset !important;
1282
1298
  color: @white !important;
1283
1299
  }
1300
+ .ui.inverted.black.basic.buttons .button:focus,
1301
+ .ui.inverted.black.basic.buttons .button:focus,
1302
+ .ui.inverted.black.basic.button:focus {
1303
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightBlackFocus inset !important;
1304
+ color: @lightBlack !important;
1305
+ }
1284
1306
  .ui.inverted.black.basic.buttons .active.button,
1285
1307
  .ui.inverted.black.buttons .basic.active.button,
1286
1308
  .ui.inverted.black.basic.active.button {
1287
- box-shadow: 0px 0px 0px @invertedBorderSize @lightBlack inset !important;
1309
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightBlackActive inset !important;
1288
1310
  color: @white !important;
1289
1311
  }
1290
1312
  .ui.inverted.black.basic.buttons .button:active,
@@ -1294,7 +1316,282 @@
1294
1316
  color: @white !important;
1295
1317
  }
1296
1318
 
1319
+ /*--- Grey ---*/
1320
+ .ui.grey.buttons .button,
1321
+ .ui.grey.button {
1322
+ background-color: @grey;
1323
+ color: @greyTextColor;
1324
+ text-shadow: @greyTextShadow;
1325
+ background-image: @coloredBackgroundImage;
1326
+ }
1327
+ .ui.grey.button {
1328
+ box-shadow: @coloredBoxShadow;
1329
+ }
1330
+ .ui.grey.buttons .button:hover,
1331
+ .ui.grey.button:hover {
1332
+ background-color: @greyHover;
1333
+ color: @greyTextColor;
1334
+ text-shadow: @greyTextShadow;
1335
+ }
1336
+ .ui.grey.buttons .button:focus,
1337
+ .ui.grey.button:focus {
1338
+ background-color: @greyFocus;
1339
+ color: @greyTextColor;
1340
+ text-shadow: @greyTextShadow;
1341
+ }
1342
+ .ui.grey.buttons .button:active,
1343
+ .ui.grey.button:active {
1344
+ background-color: @greyDown;
1345
+ color: @greyTextColor;
1346
+ text-shadow: @greyTextShadow;
1347
+ }
1348
+ .ui.grey.buttons .active.button,
1349
+ .ui.grey.buttons .active.button:active,
1350
+ .ui.grey.active.button,
1351
+ .ui.grey.button .active.button:active {
1352
+ background-color: @greyActive;
1353
+ color: @greyTextColor;
1354
+ text-shadow: @greyTextShadow;
1355
+ }
1356
+
1357
+ /* Basic */
1358
+ .ui.basic.grey.buttons .button,
1359
+ .ui.basic.grey.button {
1360
+ box-shadow: 0px 0px 0px @basicBorderSize @borderColor inset !important;
1361
+ color: @textColor !important;
1362
+ }
1363
+ .ui.basic.grey.buttons .button:hover,
1364
+ .ui.basic.grey.button:hover {
1365
+ background: transparent !important;
1366
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @greyHover inset !important;
1367
+ color: @greyHover !important;
1368
+ }
1369
+ .ui.basic.grey.buttons .button:focus,
1370
+ .ui.basic.grey.button:focus {
1371
+ background: transparent !important;
1372
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @greyFocus inset !important;
1373
+ }
1374
+ .ui.basic.grey.buttons .active.button,
1375
+ .ui.basic.grey.active.button {
1376
+ background: transparent !important;
1377
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @greyActive inset !important;
1378
+ color: @greyDown !important;
1379
+ }
1380
+ .ui.basic.grey.buttons .button:active,
1381
+ .ui.basic.grey.button:active {
1382
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @greyDown inset !important;
1383
+ color: @greyDown !important;
1384
+ }
1385
+ .ui.buttons > .basic.grey.button:not(:first-child) {
1386
+ margin-left: -@basicColoredBorderSize;
1387
+ }
1388
+
1389
+ /* Inverted */
1390
+ .ui.inverted.grey.buttons .button,
1391
+ .ui.inverted.grey.button {
1392
+ background-color: transparent;
1393
+ box-shadow: 0px 0px 0px @invertedBorderSize @solidBorderColor inset !important;
1394
+ color: @invertedTextColor;
1395
+ }
1396
+ .ui.inverted.grey.buttons .button:hover,
1397
+ .ui.inverted.grey.button:hover,
1398
+ .ui.inverted.grey.buttons .button:focus,
1399
+ .ui.inverted.grey.button:focus,
1400
+ .ui.inverted.grey.buttons .button.active,
1401
+ .ui.inverted.grey.button.active,
1402
+ .ui.inverted.grey.buttons .button:active,
1403
+ .ui.inverted.grey.button:active {
1404
+ box-shadow: none !important;
1405
+ color: @lightGreyTextColor;
1406
+ }
1407
+ .ui.inverted.grey.buttons .button:hover,
1408
+ .ui.inverted.grey.button:hover {
1409
+ background-color: @lightGreyHover;
1410
+ }
1411
+ .ui.inverted.grey.buttons .button:focus,
1412
+ .ui.inverted.grey.button:focus {
1413
+ background-color: @lightGreyFocus;
1414
+ }
1415
+ .ui.inverted.grey.buttons .active.button,
1416
+ .ui.inverted.grey.active.button {
1417
+ background-color: @lightGreyActive;
1418
+ }
1419
+ .ui.inverted.grey.buttons .button:active,
1420
+ .ui.inverted.grey.button:active {
1421
+ background-color: @lightGreyDown;
1422
+ }
1423
+
1424
+ /* Inverted Basic */
1425
+ .ui.inverted.grey.basic.buttons .button,
1426
+ .ui.inverted.grey.buttons .basic.button,
1427
+ .ui.inverted.grey.basic.button {
1428
+ background-color: transparent;
1429
+ box-shadow: @basicInvertedBoxShadow !important;
1430
+ color: @white !important;
1431
+ }
1432
+ .ui.inverted.grey.basic.buttons .button:hover,
1433
+ .ui.inverted.grey.buttons .basic.button:hover,
1434
+ .ui.inverted.grey.basic.button:hover {
1435
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightGreyHover inset !important;
1436
+ color: @white !important;
1437
+ }
1438
+ .ui.inverted.grey.basic.buttons .button:focus,
1439
+ .ui.inverted.grey.basic.buttons .button:focus,
1440
+ .ui.inverted.grey.basic.button:focus {
1441
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightGreyFocus inset !important;
1442
+ color: @lightGrey !important;
1443
+ }
1444
+ .ui.inverted.grey.basic.buttons .active.button,
1445
+ .ui.inverted.grey.buttons .basic.active.button,
1446
+ .ui.inverted.grey.basic.active.button {
1447
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightGreyActive inset !important;
1448
+ color: @white !important;
1449
+ }
1450
+ .ui.inverted.grey.basic.buttons .button:active,
1451
+ .ui.inverted.grey.buttons .basic.button:active,
1452
+ .ui.inverted.grey.basic.button:active {
1453
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightGreyDown inset !important;
1454
+ color: @white !important;
1455
+ }
1456
+
1457
+
1458
+ /*--- Brown ---*/
1459
+ .ui.brown.buttons .button,
1460
+ .ui.brown.button {
1461
+ background-color: @brown;
1462
+ color: @brownTextColor;
1463
+ text-shadow: @brownTextShadow;
1464
+ background-image: @coloredBackgroundImage;
1465
+ }
1466
+ .ui.brown.button {
1467
+ box-shadow: @coloredBoxShadow;
1468
+ }
1469
+ .ui.brown.buttons .button:hover,
1470
+ .ui.brown.button:hover {
1471
+ background-color: @brownHover;
1472
+ color: @brownTextColor;
1473
+ text-shadow: @brownTextShadow;
1474
+ }
1475
+ .ui.brown.buttons .button:focus,
1476
+ .ui.brown.button:focus {
1477
+ background-color: @brownFocus;
1478
+ color: @brownTextColor;
1479
+ text-shadow: @brownTextShadow;
1480
+ }
1481
+ .ui.brown.buttons .button:active,
1482
+ .ui.brown.button:active {
1483
+ background-color: @brownDown;
1484
+ color: @brownTextColor;
1485
+ text-shadow: @brownTextShadow;
1486
+ }
1487
+ .ui.brown.buttons .active.button,
1488
+ .ui.brown.buttons .active.button:active,
1489
+ .ui.brown.active.button,
1490
+ .ui.brown.button .active.button:active {
1491
+ background-color: @brownActive;
1492
+ color: @brownTextColor;
1493
+ text-shadow: @brownTextShadow;
1494
+ }
1495
+
1496
+ /* Basic */
1497
+ .ui.basic.brown.buttons .button,
1498
+ .ui.basic.brown.button {
1499
+ box-shadow: 0px 0px 0px @basicBorderSize @borderColor inset !important;
1500
+ color: @textColor !important;
1501
+ }
1502
+ .ui.basic.brown.buttons .button:hover,
1503
+ .ui.basic.brown.button:hover {
1504
+ background: transparent !important;
1505
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @brownHover inset !important;
1506
+ color: @brownHover !important;
1507
+ }
1508
+ .ui.basic.brown.buttons .button:focus,
1509
+ .ui.basic.brown.button:focus {
1510
+ background: transparent !important;
1511
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @brownFocus inset !important;
1512
+ }
1513
+ .ui.basic.brown.buttons .active.button,
1514
+ .ui.basic.brown.active.button {
1515
+ background: transparent !important;
1516
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @brownActive inset !important;
1517
+ color: @brownDown !important;
1518
+ }
1519
+ .ui.basic.brown.buttons .button:active,
1520
+ .ui.basic.brown.button:active {
1521
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @brownDown inset !important;
1522
+ color: @brownDown !important;
1523
+ }
1524
+ .ui.buttons > .basic.brown.button:not(:first-child) {
1525
+ margin-left: -@basicColoredBorderSize;
1526
+ }
1527
+
1528
+ /* Inverted */
1529
+ .ui.inverted.brown.buttons .button,
1530
+ .ui.inverted.brown.button {
1531
+ background-color: transparent;
1532
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightBrown inset !important;
1533
+ color: @lightBrown;
1534
+ }
1535
+ .ui.inverted.brown.buttons .button:hover,
1536
+ .ui.inverted.brown.button:hover,
1537
+ .ui.inverted.brown.buttons .button:focus,
1538
+ .ui.inverted.brown.button:focus,
1539
+ .ui.inverted.brown.buttons .button.active,
1540
+ .ui.inverted.brown.button.active,
1541
+ .ui.inverted.brown.buttons .button:active,
1542
+ .ui.inverted.brown.button:active {
1543
+ box-shadow: none !important;
1544
+ color: @lightBrownTextColor;
1545
+ }
1546
+ .ui.inverted.brown.buttons .button:hover,
1547
+ .ui.inverted.brown.button:hover {
1548
+ background-color: @lightBrownHover;
1549
+ }
1550
+ .ui.inverted.brown.buttons .button:focus,
1551
+ .ui.inverted.brown.button:focus {
1552
+ background-color: @lightBrownFocus;
1553
+ }
1554
+ .ui.inverted.brown.buttons .active.button,
1555
+ .ui.inverted.brown.active.button {
1556
+ background-color: @lightBrownActive;
1557
+ }
1558
+ .ui.inverted.brown.buttons .button:active,
1559
+ .ui.inverted.brown.button:active {
1560
+ background-color: @lightBrownDown;
1561
+ }
1297
1562
 
1563
+ /* Inverted Basic */
1564
+ .ui.inverted.brown.basic.buttons .button,
1565
+ .ui.inverted.brown.buttons .basic.button,
1566
+ .ui.inverted.brown.basic.button {
1567
+ background-color: transparent;
1568
+ box-shadow: @basicInvertedBoxShadow !important;
1569
+ color: @white !important;
1570
+ }
1571
+ .ui.inverted.brown.basic.buttons .button:hover,
1572
+ .ui.inverted.brown.buttons .basic.button:hover,
1573
+ .ui.inverted.brown.basic.button:hover {
1574
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightBrownHover inset !important;
1575
+ color: @lightBrown !important;
1576
+ }
1577
+ .ui.inverted.brown.basic.buttons .button:focus,
1578
+ .ui.inverted.brown.basic.buttons .button:focus,
1579
+ .ui.inverted.brown.basic.button:focus {
1580
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightBrownFocus inset !important;
1581
+ color: @lightBrown !important;
1582
+ }
1583
+ .ui.inverted.brown.basic.buttons .active.button,
1584
+ .ui.inverted.brown.buttons .basic.active.button,
1585
+ .ui.inverted.brown.basic.active.button {
1586
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightBrownActive inset !important;
1587
+ color: @lightBrown !important;
1588
+ }
1589
+ .ui.inverted.brown.basic.buttons .button:active,
1590
+ .ui.inverted.brown.buttons .basic.button:active,
1591
+ .ui.inverted.brown.basic.button:active {
1592
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightBrownDown inset !important;
1593
+ color: @lightBrown !important;
1594
+ }
1298
1595
 
1299
1596
  /*--- Blue ---*/
1300
1597
  .ui.blue.buttons .button,
@@ -1310,8 +1607,14 @@
1310
1607
  .ui.blue.buttons .button:hover,
1311
1608
  .ui.blue.button:hover {
1312
1609
  background-color: @blueHover;
1313
- color: @invertedTextColor;
1314
- text-shadow: @invertedTextShadow;
1610
+ color: @blueTextColor;
1611
+ text-shadow: @blueTextShadow;
1612
+ }
1613
+ .ui.blue.buttons .button:focus,
1614
+ .ui.blue.button:focus {
1615
+ background-color: @blueFocus;
1616
+ color: @blueTextColor;
1617
+ text-shadow: @blueTextShadow;
1315
1618
  }
1316
1619
  .ui.blue.buttons .button:active,
1317
1620
  .ui.blue.button:active {
@@ -1331,7 +1634,7 @@
1331
1634
  /* Basic */
1332
1635
  .ui.basic.blue.buttons .button,
1333
1636
  .ui.basic.blue.button {
1334
- box-shadow: 0px 0px 0px @basicColoredBorderSize @borderColor inset !important;
1637
+ box-shadow: 0px 0px 0px @basicBorderSize @borderColor inset !important;
1335
1638
  color: @textColor !important;
1336
1639
  }
1337
1640
  .ui.basic.blue.buttons .button:hover,
@@ -1340,14 +1643,19 @@
1340
1643
  box-shadow: 0px 0px 0px @basicColoredBorderSize @blueHover inset !important;
1341
1644
  color: @blueHover !important;
1342
1645
  }
1343
- .ui.basic.blue.buttons .button:active,
1344
- .ui.basic.blue.button:active {
1345
- box-shadow: 0px 0px 0px @basicColoredBorderSize @blueDown inset !important;
1346
- color: @blueDown !important;
1646
+ .ui.basic.blue.buttons .button:focus,
1647
+ .ui.basic.blue.button:focus {
1648
+ background: transparent !important;
1649
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @blueFocus inset !important;
1347
1650
  }
1348
1651
  .ui.basic.blue.buttons .active.button,
1349
1652
  .ui.basic.blue.active.button {
1350
1653
  background: transparent !important;
1654
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @blueActive inset !important;
1655
+ color: @blueDown !important;
1656
+ }
1657
+ .ui.basic.blue.buttons .button:active,
1658
+ .ui.basic.blue.button:active {
1351
1659
  box-shadow: 0px 0px 0px @basicColoredBorderSize @blueDown inset !important;
1352
1660
  color: @blueDown !important;
1353
1661
  }
@@ -1363,22 +1671,31 @@
1363
1671
  color: @lightBlue;
1364
1672
  }
1365
1673
  .ui.inverted.blue.buttons .button:hover,
1674
+ .ui.inverted.blue.button:hover,
1675
+ .ui.inverted.blue.buttons .button:focus,
1676
+ .ui.inverted.blue.button:focus,
1677
+ .ui.inverted.blue.buttons .button.active,
1678
+ .ui.inverted.blue.button.active,
1679
+ .ui.inverted.blue.buttons .button:active,
1680
+ .ui.inverted.blue.button:active {
1681
+ box-shadow: none !important;
1682
+ color: @lightBlueTextColor;
1683
+ }
1684
+ .ui.inverted.blue.buttons .button:hover,
1366
1685
  .ui.inverted.blue.button:hover {
1367
- box-shadow: 0px 0px 0px @invertedBorderSize @lightBlue inset !important;
1368
- background-color: @lightBlue;
1369
- color: @white;
1686
+ background-color: @lightBlueHover;
1687
+ }
1688
+ .ui.inverted.blue.buttons .button:focus,
1689
+ .ui.inverted.blue.button:focus {
1690
+ background-color: @lightBlueFocus;
1370
1691
  }
1371
1692
  .ui.inverted.blue.buttons .active.button,
1372
1693
  .ui.inverted.blue.active.button {
1373
- box-shadow: 0px 0px 0px @invertedBorderSize @lightBlue inset !important;
1374
- background-color: @lightBlue;
1375
- color: @white;
1694
+ background-color: @lightBlueActive;
1376
1695
  }
1377
1696
  .ui.inverted.blue.buttons .button:active,
1378
1697
  .ui.inverted.blue.button:active {
1379
- box-shadow: 0px 0px 0px @invertedBorderSize @lightBlueDown inset !important;
1380
1698
  background-color: @lightBlueDown;
1381
- color: @white;
1382
1699
  }
1383
1700
 
1384
1701
  /* Inverted Basic */
@@ -1392,13 +1709,19 @@
1392
1709
  .ui.inverted.blue.basic.buttons .button:hover,
1393
1710
  .ui.inverted.blue.buttons .basic.button:hover,
1394
1711
  .ui.inverted.blue.basic.button:hover {
1395
- box-shadow: 0px 0px 0px @invertedBorderSize @lightBlue inset !important;
1712
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightBlueHover inset !important;
1713
+ color: @lightBlue !important;
1714
+ }
1715
+ .ui.inverted.blue.basic.buttons .button:focus,
1716
+ .ui.inverted.blue.basic.buttons .button:focus,
1717
+ .ui.inverted.blue.basic.button:focus {
1718
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightBlueFocus inset !important;
1396
1719
  color: @lightBlue !important;
1397
1720
  }
1398
1721
  .ui.inverted.blue.basic.buttons .active.button,
1399
1722
  .ui.inverted.blue.buttons .basic.active.button,
1400
1723
  .ui.inverted.blue.basic.active.button {
1401
- box-shadow: 0px 0px 0px @invertedBorderSize @lightBlue inset !important;
1724
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightBlueActive inset !important;
1402
1725
  color: @lightBlue !important;
1403
1726
  }
1404
1727
  .ui.inverted.blue.basic.buttons .button:active,
@@ -1422,8 +1745,14 @@
1422
1745
  .ui.green.buttons .button:hover,
1423
1746
  .ui.green.button:hover {
1424
1747
  background-color: @greenHover;
1425
- color: @invertedTextColor;
1426
- text-shadow: @invertedTextShadow;
1748
+ color: @greenTextColor;
1749
+ text-shadow: @greenTextShadow;
1750
+ }
1751
+ .ui.green.buttons .button:focus,
1752
+ .ui.green.button:focus {
1753
+ background-color: @greenFocus;
1754
+ color: @greenTextColor;
1755
+ text-shadow: @greenTextShadow;
1427
1756
  }
1428
1757
  .ui.green.buttons .button:active,
1429
1758
  .ui.green.button:active {
@@ -1444,7 +1773,7 @@
1444
1773
  /* Basic */
1445
1774
  .ui.basic.green.buttons .button,
1446
1775
  .ui.basic.green.button {
1447
- box-shadow: 0px 0px 0px @basicColoredBorderSize @borderColor inset !important;
1776
+ box-shadow: 0px 0px 0px @basicBorderSize @borderColor inset !important;
1448
1777
  color: @textColor !important;
1449
1778
  }
1450
1779
  .ui.basic.green.buttons .button:hover,
@@ -1453,14 +1782,19 @@
1453
1782
  box-shadow: 0px 0px 0px @basicColoredBorderSize @greenHover inset !important;
1454
1783
  color: @greenHover !important;
1455
1784
  }
1456
- .ui.basic.green.buttons .button:active,
1457
- .ui.basic.green.button:active {
1458
- box-shadow: 0px 0px 0px @basicColoredBorderSize @greenDown inset !important;
1459
- color: @greenDown !important;
1785
+ .ui.basic.green.buttons .button:focus,
1786
+ .ui.basic.green.button:focus {
1787
+ background: transparent !important;
1788
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @greenFocus inset !important;
1460
1789
  }
1461
1790
  .ui.basic.green.buttons .active.button,
1462
1791
  .ui.basic.green.active.button {
1463
1792
  background: transparent !important;
1793
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @greenActive inset !important;
1794
+ color: @greenDown !important;
1795
+ }
1796
+ .ui.basic.green.buttons .button:active,
1797
+ .ui.basic.green.button:active {
1464
1798
  box-shadow: 0px 0px 0px @basicColoredBorderSize @greenDown inset !important;
1465
1799
  color: @greenDown !important;
1466
1800
  }
@@ -1476,22 +1810,31 @@
1476
1810
  color: @lightGreen;
1477
1811
  }
1478
1812
  .ui.inverted.green.buttons .button:hover,
1813
+ .ui.inverted.green.button:hover,
1814
+ .ui.inverted.green.buttons .button:focus,
1815
+ .ui.inverted.green.button:focus,
1816
+ .ui.inverted.green.buttons .button.active,
1817
+ .ui.inverted.green.button.active,
1818
+ .ui.inverted.green.buttons .button:active,
1819
+ .ui.inverted.green.button:active {
1820
+ box-shadlightOw: none !important;
1821
+ color: @greenTextColor;
1822
+ }
1823
+ .ui.inverted.green.buttons .button:hover,
1479
1824
  .ui.inverted.green.button:hover {
1480
- box-shadow: 0px 0px 0px @invertedBorderSize @lightGreen inset !important;
1481
- background-color: @lightGreen;
1482
- color: @white;
1825
+ background-color: @lightGreenHover;
1826
+ }
1827
+ .ui.inverted.green.buttons .button:focus,
1828
+ .ui.inverted.green.button:focus {
1829
+ background-color: @lightGreenFocus;
1483
1830
  }
1484
1831
  .ui.inverted.green.buttons .active.button,
1485
1832
  .ui.inverted.green.active.button {
1486
- box-shadow: 0px 0px 0px @invertedBorderSize @lightGreen inset !important;
1487
- background-color: @lightGreen;
1488
- color: @white;
1833
+ background-color: @lightGreenActive;
1489
1834
  }
1490
1835
  .ui.inverted.green.buttons .button:active,
1491
1836
  .ui.inverted.green.button:active {
1492
- box-shadow: 0px 0px 0px @invertedBorderSize @lightGreenDown inset !important;
1493
1837
  background-color: @lightGreenDown;
1494
- color: @white;
1495
1838
  }
1496
1839
 
1497
1840
  /* Inverted Basic */
@@ -1505,13 +1848,19 @@
1505
1848
  .ui.inverted.green.basic.buttons .button:hover,
1506
1849
  .ui.inverted.green.buttons .basic.button:hover,
1507
1850
  .ui.inverted.green.basic.button:hover {
1508
- box-shadow: 0px 0px 0px @invertedBorderSize @lightGreen inset !important;
1851
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightGreenHover inset !important;
1852
+ color: @lightGreen !important;
1853
+ }
1854
+ .ui.inverted.green.basic.buttons .button:focus,
1855
+ .ui.inverted.green.basic.buttons .button:focus,
1856
+ .ui.inverted.green.basic.button:focus {
1857
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightGreenFocus inset !important;
1509
1858
  color: @lightGreen !important;
1510
1859
  }
1511
1860
  .ui.inverted.green.basic.buttons .active.button,
1512
1861
  .ui.inverted.green.buttons .basic.active.button,
1513
1862
  .ui.inverted.green.basic.active.button {
1514
- box-shadow: 0px 0px 0px @invertedBorderSize @lightGreen inset !important;
1863
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightGreenActive inset !important;
1515
1864
  color: @lightGreen !important;
1516
1865
  }
1517
1866
  .ui.inverted.green.basic.buttons .button:active,
@@ -1535,8 +1884,14 @@
1535
1884
  .ui.orange.buttons .button:hover,
1536
1885
  .ui.orange.button:hover {
1537
1886
  background-color: @orangeHover;
1538
- color: @invertedTextColor;
1539
- text-shadow: @invertedTextShadow;
1887
+ color: @orangeTextColor;
1888
+ text-shadow: @orangeTextShadow;
1889
+ }
1890
+ .ui.orange.buttons .button:focus,
1891
+ .ui.orange.button:focus {
1892
+ background-color: @orangeFocus;
1893
+ color: @orangeTextColor;
1894
+ text-shadow: @orangeTextShadow;
1540
1895
  }
1541
1896
  .ui.orange.buttons .button:active,
1542
1897
  .ui.orange.button:active {
@@ -1556,7 +1911,7 @@
1556
1911
  /* Basic */
1557
1912
  .ui.basic.orange.buttons .button,
1558
1913
  .ui.basic.orange.button {
1559
- box-shadow: 0px 0px 0px @basicColoredBorderSize @borderColor inset !important;
1914
+ box-shadow: 0px 0px 0px @basicBorderSize @borderColor inset !important;
1560
1915
  color: @textColor !important;
1561
1916
  }
1562
1917
  .ui.basic.orange.buttons .button:hover,
@@ -1565,14 +1920,19 @@
1565
1920
  box-shadow: 0px 0px 0px @basicColoredBorderSize @orangeHover inset !important;
1566
1921
  color: @orangeHover !important;
1567
1922
  }
1568
- .ui.basic.orange.buttons .button:active,
1569
- .ui.basic.orange.button:active {
1570
- box-shadow: 0px 0px 0px @basicColoredBorderSize @orangeDown inset !important;
1571
- color: @orangeDown !important;
1923
+ .ui.basic.orange.buttons .button:focus,
1924
+ .ui.basic.orange.button:focus {
1925
+ background: transparent !important;
1926
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @orangeFocus inset !important;
1572
1927
  }
1573
1928
  .ui.basic.orange.buttons .active.button,
1574
1929
  .ui.basic.orange.active.button {
1575
1930
  background: transparent !important;
1931
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @orangeActive inset !important;
1932
+ color: @orangeDown !important;
1933
+ }
1934
+ .ui.basic.orange.buttons .button:active,
1935
+ .ui.basic.orange.button:active {
1576
1936
  box-shadow: 0px 0px 0px @basicColoredBorderSize @orangeDown inset !important;
1577
1937
  color: @orangeDown !important;
1578
1938
  }
@@ -1588,22 +1948,31 @@
1588
1948
  color: @lightOrange;
1589
1949
  }
1590
1950
  .ui.inverted.orange.buttons .button:hover,
1951
+ .ui.inverted.orange.button:hover,
1952
+ .ui.inverted.orange.buttons .button:focus,
1953
+ .ui.inverted.orange.button:focus,
1954
+ .ui.inverted.orange.buttons .button.active,
1955
+ .ui.inverted.orange.button.active,
1956
+ .ui.inverted.orange.buttons .button:active,
1957
+ .ui.inverted.orange.button:active {
1958
+ box-shadow: none !important;
1959
+ color: @lightOrangeTextColor;
1960
+ }
1961
+ .ui.inverted.orange.buttons .button:hover,
1591
1962
  .ui.inverted.orange.button:hover {
1592
- box-shadow: 0px 0px 0px @invertedBorderSize @lightOrange inset !important;
1593
- background-color: @lightOrange;
1594
- color: @white;
1963
+ background-color: @lightOrangeHover;
1964
+ }
1965
+ .ui.inverted.orange.buttons .button:focus,
1966
+ .ui.inverted.orange.button:focus {
1967
+ background-color: @lightOrangeFocus;
1595
1968
  }
1596
1969
  .ui.inverted.orange.buttons .active.button,
1597
1970
  .ui.inverted.orange.active.button {
1598
- box-shadow: 0px 0px 0px @invertedBorderSize @lightOrange inset !important;
1599
- background-color: @lightOrange;
1600
- color: @white;
1971
+ background-color: @lightOrangeActive;
1601
1972
  }
1602
1973
  .ui.inverted.orange.buttons .button:active,
1603
1974
  .ui.inverted.orange.button:active {
1604
- box-shadow: 0px 0px 0px @invertedBorderSize @lightOrangeDown inset !important;
1605
1975
  background-color: @lightOrangeDown;
1606
- color: @white;
1607
1976
  }
1608
1977
 
1609
1978
  /* Inverted Basic */
@@ -1617,13 +1986,19 @@
1617
1986
  .ui.inverted.orange.basic.buttons .button:hover,
1618
1987
  .ui.inverted.orange.buttons .basic.button:hover,
1619
1988
  .ui.inverted.orange.basic.button:hover {
1620
- box-shadow: 0px 0px 0px @invertedBorderSize @lightOrange inset !important;
1989
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightOrangeHover inset !important;
1990
+ color: @lightOrange !important;
1991
+ }
1992
+ .ui.inverted.orange.basic.buttons .button:focus,
1993
+ .ui.inverted.orange.basic.buttons .button:focus,
1994
+ .ui.inverted.orange.basic.button:focus {
1995
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightOrangeFocus inset !important;
1621
1996
  color: @lightOrange !important;
1622
1997
  }
1623
1998
  .ui.inverted.orange.basic.buttons .active.button,
1624
1999
  .ui.inverted.orange.buttons .basic.active.button,
1625
2000
  .ui.inverted.orange.basic.active.button {
1626
- box-shadow: 0px 0px 0px @invertedBorderSize @lightOrange inset !important;
2001
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightOrangeActive inset !important;
1627
2002
  color: @lightOrange !important;
1628
2003
  }
1629
2004
  .ui.inverted.orange.basic.buttons .button:active,
@@ -1647,8 +2022,14 @@
1647
2022
  .ui.pink.buttons .button:hover,
1648
2023
  .ui.pink.button:hover {
1649
2024
  background-color: @pinkHover;
1650
- color: @invertedTextColor;
1651
- text-shadow: @invertedTextShadow;
2025
+ color: @pinkTextColor;
2026
+ text-shadow: @pinkTextShadow;
2027
+ }
2028
+ .ui.pink.buttons .button:focus,
2029
+ .ui.pink.button:focus {
2030
+ background-color: @pinkFocus;
2031
+ color: @pinkTextColor;
2032
+ text-shadow: @pinkTextShadow;
1652
2033
  }
1653
2034
  .ui.pink.buttons .button:active,
1654
2035
  .ui.pink.button:active {
@@ -1668,7 +2049,7 @@
1668
2049
  /* Basic */
1669
2050
  .ui.basic.pink.buttons .button,
1670
2051
  .ui.basic.pink.button {
1671
- box-shadow: 0px 0px 0px @basicColoredBorderSize @borderColor inset !important;
2052
+ box-shadow: 0px 0px 0px @basicBorderSize @borderColor inset !important;
1672
2053
  color: @textColor !important;
1673
2054
  }
1674
2055
  .ui.basic.pink.buttons .button:hover,
@@ -1677,14 +2058,19 @@
1677
2058
  box-shadow: 0px 0px 0px @basicColoredBorderSize @pinkHover inset !important;
1678
2059
  color: @pinkHover !important;
1679
2060
  }
1680
- .ui.basic.pink.buttons .button:active,
1681
- .ui.basic.pink.button:active {
1682
- box-shadow: 0px 0px 0px @basicColoredBorderSize @pinkDown inset !important;
1683
- color: @pinkDown !important;
2061
+ .ui.basic.pink.buttons .button:focus,
2062
+ .ui.basic.pink.button:focus {
2063
+ background: transparent !important;
2064
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @pinkFocus inset !important;
1684
2065
  }
1685
2066
  .ui.basic.pink.buttons .active.button,
1686
2067
  .ui.basic.pink.active.button {
1687
2068
  background: transparent !important;
2069
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @pinkActive inset !important;
2070
+ color: @pinkDown !important;
2071
+ }
2072
+ .ui.basic.pink.buttons .button:active,
2073
+ .ui.basic.pink.button:active {
1688
2074
  box-shadow: 0px 0px 0px @basicColoredBorderSize @pinkDown inset !important;
1689
2075
  color: @pinkDown !important;
1690
2076
  }
@@ -1700,22 +2086,31 @@
1700
2086
  color: @lightPink;
1701
2087
  }
1702
2088
  .ui.inverted.pink.buttons .button:hover,
2089
+ .ui.inverted.pink.button:hover,
2090
+ .ui.inverted.pink.buttons .button:focus,
2091
+ .ui.inverted.pink.button:focus,
2092
+ .ui.inverted.pink.buttons .button.active,
2093
+ .ui.inverted.pink.button.active,
2094
+ .ui.inverted.pink.buttons .button:active,
2095
+ .ui.inverted.pink.button:active {
2096
+ box-shadow: none !important;
2097
+ color: @lightPinkTextColor;
2098
+ }
2099
+ .ui.inverted.pink.buttons .button:hover,
1703
2100
  .ui.inverted.pink.button:hover {
1704
- box-shadow: 0px 0px 0px @invertedBorderSize @lightPink inset !important;
1705
- background-color: @lightPink;
1706
- color: @white;
2101
+ background-color: @lightPinkHover;
2102
+ }
2103
+ .ui.inverted.pink.buttons .button:focus,
2104
+ .ui.inverted.pink.button:focus {
2105
+ background-color: @lightPinkFocus;
1707
2106
  }
1708
2107
  .ui.inverted.pink.buttons .active.button,
1709
2108
  .ui.inverted.pink.active.button {
1710
- box-shadow: 0px 0px 0px @invertedBorderSize @lightPink inset !important;
1711
- background-color: @lightPink;
1712
- color: @white;
2109
+ background-color: @lightPinkActive;
1713
2110
  }
1714
2111
  .ui.inverted.pink.buttons .button:active,
1715
2112
  .ui.inverted.pink.button:active {
1716
- box-shadow: 0px 0px 0px @invertedBorderSize @lightPinkDown inset !important;
1717
2113
  background-color: @lightPinkDown;
1718
- color: @white;
1719
2114
  }
1720
2115
 
1721
2116
  /* Inverted Basic */
@@ -1729,13 +2124,19 @@
1729
2124
  .ui.inverted.pink.basic.buttons .button:hover,
1730
2125
  .ui.inverted.pink.buttons .basic.button:hover,
1731
2126
  .ui.inverted.pink.basic.button:hover {
1732
- box-shadow: 0px 0px 0px @invertedBorderSize @lightPink inset !important;
2127
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightPinkHover inset !important;
2128
+ color: @lightPink !important;
2129
+ }
2130
+ .ui.inverted.pink.basic.buttons .button:focus,
2131
+ .ui.inverted.pink.basic.buttons .button:focus,
2132
+ .ui.inverted.pink.basic.button:focus {
2133
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightPinkFocus inset !important;
1733
2134
  color: @lightPink !important;
1734
2135
  }
1735
2136
  .ui.inverted.pink.basic.buttons .active.button,
1736
2137
  .ui.inverted.pink.buttons .basic.active.button,
1737
2138
  .ui.inverted.pink.basic.active.button {
1738
- box-shadow: 0px 0px 0px @invertedBorderSize @lightPink inset !important;
2139
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightPinkActive inset !important;
1739
2140
  color: @lightPink !important;
1740
2141
  }
1741
2142
  .ui.inverted.pink.basic.buttons .button:active,
@@ -1745,6 +2146,145 @@
1745
2146
  color: @lightPink !important;
1746
2147
  }
1747
2148
 
2149
+
2150
+ /*--- Violet ---*/
2151
+ .ui.violet.buttons .button,
2152
+ .ui.violet.button {
2153
+ background-color: @violet;
2154
+ color: @violetTextColor;
2155
+ text-shadow: @violetTextShadow;
2156
+ background-image: @coloredBackgroundImage;
2157
+ }
2158
+ .ui.violet.button {
2159
+ box-shadow: @coloredBoxShadow;
2160
+ }
2161
+ .ui.violet.buttons .button:hover,
2162
+ .ui.violet.button:hover {
2163
+ background-color: @violetHover;
2164
+ color: @violetTextColor;
2165
+ text-shadow: @violetTextShadow;
2166
+ }
2167
+ .ui.violet.buttons .button:focus,
2168
+ .ui.violet.button:focus {
2169
+ background-color: @violetFocus;
2170
+ color: @violetTextColor;
2171
+ text-shadow: @violetTextShadow;
2172
+ }
2173
+ .ui.violet.buttons .button:active,
2174
+ .ui.violet.button:active {
2175
+ background-color: @violetDown;
2176
+ color: @violetTextColor;
2177
+ text-shadow: @violetTextShadow;
2178
+ }
2179
+ .ui.violet.buttons .active.button,
2180
+ .ui.violet.buttons .active.button:active,
2181
+ .ui.violet.active.button,
2182
+ .ui.violet.button .active.button:active {
2183
+ background-color: @violetActive;
2184
+ color: @violetTextColor;
2185
+ text-shadow: @violetTextShadow;
2186
+ }
2187
+
2188
+ /* Basic */
2189
+ .ui.basic.violet.buttons .button,
2190
+ .ui.basic.violet.button {
2191
+ box-shadow: 0px 0px 0px @basicBorderSize @borderColor inset !important;
2192
+ color: @textColor !important;
2193
+ }
2194
+ .ui.basic.violet.buttons .button:hover,
2195
+ .ui.basic.violet.button:hover {
2196
+ background: transparent !important;
2197
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @violetHover inset !important;
2198
+ color: @violetHover !important;
2199
+ }
2200
+ .ui.basic.violet.buttons .button:focus,
2201
+ .ui.basic.violet.button:focus {
2202
+ background: transparent !important;
2203
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @violetFocus inset !important;
2204
+ }
2205
+ .ui.basic.violet.buttons .active.button,
2206
+ .ui.basic.violet.active.button {
2207
+ background: transparent !important;
2208
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @violetActive inset !important;
2209
+ color: @violetDown !important;
2210
+ }
2211
+ .ui.basic.violet.buttons .button:active,
2212
+ .ui.basic.violet.button:active {
2213
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @violetDown inset !important;
2214
+ color: @violetDown !important;
2215
+ }
2216
+ .ui.buttons > .basic.violet.button:not(:first-child) {
2217
+ margin-left: -@basicColoredBorderSize;
2218
+ }
2219
+
2220
+ /* Inverted */
2221
+ .ui.inverted.violet.buttons .button,
2222
+ .ui.inverted.violet.button {
2223
+ background-color: transparent;
2224
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightViolet inset !important;
2225
+ color: @lightViolet;
2226
+ }
2227
+ .ui.inverted.violet.buttons .button:hover,
2228
+ .ui.inverted.violet.button:hover,
2229
+ .ui.inverted.violet.buttons .button:focus,
2230
+ .ui.inverted.violet.button:focus,
2231
+ .ui.inverted.violet.buttons .button.active,
2232
+ .ui.inverted.violet.button.active,
2233
+ .ui.inverted.violet.buttons .button:active,
2234
+ .ui.inverted.violet.button:active {
2235
+ box-shadow: none !important;
2236
+ color: @lightVioletTextColor;
2237
+ }
2238
+ .ui.inverted.violet.buttons .button:hover,
2239
+ .ui.inverted.violet.button:hover {
2240
+ background-color: @lightVioletHover;
2241
+ }
2242
+ .ui.inverted.violet.buttons .button:focus,
2243
+ .ui.inverted.violet.button:focus {
2244
+ background-color: @lightVioletFocus;
2245
+ }
2246
+ .ui.inverted.violet.buttons .active.button,
2247
+ .ui.inverted.violet.active.button {
2248
+ background-color: @lightVioletActive;
2249
+ }
2250
+ .ui.inverted.violet.buttons .button:active,
2251
+ .ui.inverted.violet.button:active {
2252
+ background-color: @lightVioletDown;
2253
+ }
2254
+
2255
+ /* Inverted Basic */
2256
+ .ui.inverted.violet.basic.buttons .button,
2257
+ .ui.inverted.violet.buttons .basic.button,
2258
+ .ui.inverted.violet.basic.button {
2259
+ background-color: transparent;
2260
+ box-shadow: @basicInvertedBoxShadow !important;
2261
+ color: @white !important;
2262
+ }
2263
+ .ui.inverted.violet.basic.buttons .button:hover,
2264
+ .ui.inverted.violet.buttons .basic.button:hover,
2265
+ .ui.inverted.violet.basic.button:hover {
2266
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightVioletHover inset !important;
2267
+ color: @lightViolet !important;
2268
+ }
2269
+ .ui.inverted.violet.basic.buttons .button:focus,
2270
+ .ui.inverted.violet.basic.buttons .button:focus,
2271
+ .ui.inverted.violet.basic.button:focus {
2272
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightVioletFocus inset !important;
2273
+ color: @lightViolet !important;
2274
+ }
2275
+ .ui.inverted.violet.basic.buttons .active.button,
2276
+ .ui.inverted.violet.buttons .basic.active.button,
2277
+ .ui.inverted.violet.basic.active.button {
2278
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightVioletActive inset !important;
2279
+ color: @lightViolet !important;
2280
+ }
2281
+ .ui.inverted.violet.basic.buttons .button:active,
2282
+ .ui.inverted.violet.buttons .basic.button:active,
2283
+ .ui.inverted.violet.basic.button:active {
2284
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightVioletDown inset !important;
2285
+ color: @lightViolet !important;
2286
+ }
2287
+
1748
2288
  /*--- Purple ---*/
1749
2289
  .ui.purple.buttons .button,
1750
2290
  .ui.purple.button {
@@ -1759,8 +2299,14 @@
1759
2299
  .ui.purple.buttons .button:hover,
1760
2300
  .ui.purple.button:hover {
1761
2301
  background-color: @purpleHover;
1762
- color: @invertedTextColor;
1763
- text-shadow: @invertedTextShadow;
2302
+ color: @purpleTextColor;
2303
+ text-shadow: @purpleTextShadow;
2304
+ }
2305
+ .ui.purple.buttons .button:focus,
2306
+ .ui.purple.button:focus {
2307
+ background-color: @purpleFocus;
2308
+ color: @purpleTextColor;
2309
+ text-shadow: @purpleTextShadow;
1764
2310
  }
1765
2311
  .ui.purple.buttons .button:active,
1766
2312
  .ui.purple.button:active {
@@ -1780,7 +2326,7 @@
1780
2326
  /* Basic */
1781
2327
  .ui.basic.purple.buttons .button,
1782
2328
  .ui.basic.purple.button {
1783
- box-shadow: 0px 0px 0px @basicColoredBorderSize @borderColor inset !important;
2329
+ box-shadow: 0px 0px 0px @basicBorderSize @borderColor inset !important;
1784
2330
  color: @textColor !important;
1785
2331
  }
1786
2332
  .ui.basic.purple.buttons .button:hover,
@@ -1789,14 +2335,19 @@
1789
2335
  box-shadow: 0px 0px 0px @basicColoredBorderSize @purpleHover inset !important;
1790
2336
  color: @purpleHover !important;
1791
2337
  }
1792
- .ui.basic.purple.buttons .button:active,
1793
- .ui.basic.purple.button:active {
1794
- box-shadow: 0px 0px 0px @basicColoredBorderSize @purpleDown inset !important;
1795
- color: @purpleDown !important;
2338
+ .ui.basic.purple.buttons .button:focus,
2339
+ .ui.basic.purple.button:focus {
2340
+ background: transparent !important;
2341
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @purpleFocus inset !important;
1796
2342
  }
1797
2343
  .ui.basic.purple.buttons .active.button,
1798
2344
  .ui.basic.purple.active.button {
1799
2345
  background: transparent !important;
2346
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @purpleActive inset !important;
2347
+ color: @purpleDown !important;
2348
+ }
2349
+ .ui.basic.purple.buttons .button:active,
2350
+ .ui.basic.purple.button:active {
1800
2351
  box-shadow: 0px 0px 0px @basicColoredBorderSize @purpleDown inset !important;
1801
2352
  color: @purpleDown !important;
1802
2353
  }
@@ -1812,22 +2363,31 @@
1812
2363
  color: @lightPurple;
1813
2364
  }
1814
2365
  .ui.inverted.purple.buttons .button:hover,
2366
+ .ui.inverted.purple.button:hover,
2367
+ .ui.inverted.purple.buttons .button:focus,
2368
+ .ui.inverted.purple.button:focus,
2369
+ .ui.inverted.purple.buttons .button.active,
2370
+ .ui.inverted.purple.button.active,
2371
+ .ui.inverted.purple.buttons .button:active,
2372
+ .ui.inverted.purple.button:active {
2373
+ box-shadow: none !important;
2374
+ color: @lightPurpleTextColor;
2375
+ }
2376
+ .ui.inverted.purple.buttons .button:hover,
1815
2377
  .ui.inverted.purple.button:hover {
1816
- box-shadow: 0px 0px 0px @invertedBorderSize @lightPurple inset !important;
1817
- background-color: @lightPurple;
1818
- color: @black;
2378
+ background-color: @lightPurpleHover;
2379
+ }
2380
+ .ui.inverted.purple.buttons .button:focus,
2381
+ .ui.inverted.purple.button:focus {
2382
+ background-color: @lightPurpleFocus;
1819
2383
  }
1820
2384
  .ui.inverted.purple.buttons .active.button,
1821
2385
  .ui.inverted.purple.active.button {
1822
- box-shadow: 0px 0px 0px @invertedBorderSize @lightPurple inset !important;
1823
- background-color: @lightPurple;
1824
- color: @black;
2386
+ background-color: @lightPurpleActive;
1825
2387
  }
1826
2388
  .ui.inverted.purple.buttons .button:active,
1827
2389
  .ui.inverted.purple.button:active {
1828
- box-shadow: 0px 0px 0px @invertedBorderSize @lightPurpleDown inset !important;
1829
2390
  background-color: @lightPurpleDown;
1830
- color: @black;
1831
2391
  }
1832
2392
 
1833
2393
  /* Inverted Basic */
@@ -1841,13 +2401,19 @@
1841
2401
  .ui.inverted.purple.basic.buttons .button:hover,
1842
2402
  .ui.inverted.purple.buttons .basic.button:hover,
1843
2403
  .ui.inverted.purple.basic.button:hover {
1844
- box-shadow: 0px 0px 0px @invertedBorderSize @lightPurple inset !important;
2404
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightPurpleHover inset !important;
2405
+ color: @lightPurple !important;
2406
+ }
2407
+ .ui.inverted.purple.basic.buttons .button:focus,
2408
+ .ui.inverted.purple.basic.buttons .button:focus,
2409
+ .ui.inverted.purple.basic.button:focus {
2410
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightPurpleFocus inset !important;
1845
2411
  color: @lightPurple !important;
1846
2412
  }
1847
2413
  .ui.inverted.purple.basic.buttons .active.button,
1848
2414
  .ui.inverted.purple.buttons .basic.active.button,
1849
2415
  .ui.inverted.purple.basic.active.button {
1850
- box-shadow: 0px 0px 0px @invertedBorderSize @lightPurple inset !important;
2416
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightPurpleActive inset !important;
1851
2417
  color: @lightPurple !important;
1852
2418
  }
1853
2419
  .ui.inverted.purple.basic.buttons .button:active,
@@ -1871,8 +2437,14 @@
1871
2437
  .ui.red.buttons .button:hover,
1872
2438
  .ui.red.button:hover {
1873
2439
  background-color: @redHover;
1874
- color: @invertedTextColor;
1875
- text-shadow: @invertedTextShadow;
2440
+ color: @redTextColor;
2441
+ text-shadow: @redTextShadow;
2442
+ }
2443
+ .ui.red.buttons .button:focus,
2444
+ .ui.red.button:focus {
2445
+ background-color: @redFocus;
2446
+ color: @redTextColor;
2447
+ text-shadow: @redTextShadow;
1876
2448
  }
1877
2449
  .ui.red.buttons .button:active,
1878
2450
  .ui.red.button:active {
@@ -1892,7 +2464,7 @@
1892
2464
  /* Basic */
1893
2465
  .ui.basic.red.buttons .button,
1894
2466
  .ui.basic.red.button {
1895
- box-shadow: 0px 0px 0px @basicColoredBorderSize @borderColor inset !important;
2467
+ box-shadow: 0px 0px 0px @basicBorderSize @borderColor inset !important;
1896
2468
  color: @textColor !important;
1897
2469
  }
1898
2470
  .ui.basic.red.buttons .button:hover,
@@ -1901,14 +2473,19 @@
1901
2473
  box-shadow: 0px 0px 0px @basicColoredBorderSize @redHover inset !important;
1902
2474
  color: @redHover !important;
1903
2475
  }
1904
- .ui.basic.red.buttons .button:active,
1905
- .ui.basic.red.button:active {
1906
- box-shadow: 0px 0px 0px @basicColoredBorderSize @redDown inset !important;
1907
- color: @redDown !important;
2476
+ .ui.basic.red.buttons .button:focus,
2477
+ .ui.basic.red.button:focus {
2478
+ background: transparent !important;
2479
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @redFocus inset !important;
1908
2480
  }
1909
2481
  .ui.basic.red.buttons .active.button,
1910
2482
  .ui.basic.red.active.button {
1911
2483
  background: transparent !important;
2484
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @redActive inset !important;
2485
+ color: @redDown !important;
2486
+ }
2487
+ .ui.basic.red.buttons .button:active,
2488
+ .ui.basic.red.button:active {
1912
2489
  box-shadow: 0px 0px 0px @basicColoredBorderSize @redDown inset !important;
1913
2490
  color: @redDown !important;
1914
2491
  }
@@ -1924,22 +2501,31 @@
1924
2501
  color: @lightRed;
1925
2502
  }
1926
2503
  .ui.inverted.red.buttons .button:hover,
2504
+ .ui.inverted.red.button:hover,
2505
+ .ui.inverted.red.buttons .button:focus,
2506
+ .ui.inverted.red.button:focus,
2507
+ .ui.inverted.red.buttons .button.active,
2508
+ .ui.inverted.red.button.active,
2509
+ .ui.inverted.red.buttons .button:active,
2510
+ .ui.inverted.red.button:active {
2511
+ box-shadow: none !important;
2512
+ color: @lightRedTextColor;
2513
+ }
2514
+ .ui.inverted.red.buttons .button:hover,
1927
2515
  .ui.inverted.red.button:hover {
1928
- box-shadow: 0px 0px 0px @invertedBorderSize @lightRed inset !important;
1929
- background-color: @lightRed;
1930
- color: @white;
2516
+ background-color: @lightRedHover;
2517
+ }
2518
+ .ui.inverted.red.buttons .button:focus,
2519
+ .ui.inverted.red.button:focus {
2520
+ background-color: @lightRedFocus;
1931
2521
  }
1932
2522
  .ui.inverted.red.buttons .active.button,
1933
2523
  .ui.inverted.red.active.button {
1934
- box-shadow: 0px 0px 0px @invertedBorderSize @lightRed inset !important;
1935
- background-color: @lightRed;
1936
- color: @white;
2524
+ background-color: @lightRedActive;
1937
2525
  }
1938
2526
  .ui.inverted.red.buttons .button:active,
1939
2527
  .ui.inverted.red.button:active {
1940
- box-shadow: 0px 0px 0px @invertedBorderSize @lightRedDown inset !important;
1941
2528
  background-color: @lightRedDown;
1942
- color: @white;
1943
2529
  }
1944
2530
 
1945
2531
  /* Inverted Basic */
@@ -1953,13 +2539,19 @@
1953
2539
  .ui.inverted.red.basic.buttons .button:hover,
1954
2540
  .ui.inverted.red.buttons .basic.button:hover,
1955
2541
  .ui.inverted.red.basic.button:hover {
1956
- box-shadow: 0px 0px 0px @invertedBorderSize @lightRed inset !important;
2542
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightRedHover inset !important;
2543
+ color: @lightRed !important;
2544
+ }
2545
+ .ui.inverted.red.basic.buttons .button:focus,
2546
+ .ui.inverted.red.basic.buttons .button:focus,
2547
+ .ui.inverted.red.basic.button:focus {
2548
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightRedFocus inset !important;
1957
2549
  color: @lightRed !important;
1958
2550
  }
1959
2551
  .ui.inverted.red.basic.buttons .active.button,
1960
2552
  .ui.inverted.red.buttons .basic.active.button,
1961
2553
  .ui.inverted.red.basic.active.button {
1962
- box-shadow: 0px 0px 0px @invertedBorderSize @lightRed inset !important;
2554
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightRedActive inset !important;
1963
2555
  color: @lightRed !important;
1964
2556
  }
1965
2557
  .ui.inverted.red.basic.buttons .button:active,
@@ -1984,8 +2576,14 @@
1984
2576
  .ui.teal.buttons .button:hover,
1985
2577
  .ui.teal.button:hover {
1986
2578
  background-color: @tealHover;
1987
- color: @invertedTextColor;
1988
- text-shadow: @invertedTextShadow;
2579
+ color: @tealTextColor;
2580
+ text-shadow: @tealTextShadow;
2581
+ }
2582
+ .ui.teal.buttons .button:focus,
2583
+ .ui.teal.button:focus {
2584
+ background-color: @tealFocus;
2585
+ color: @tealTextColor;
2586
+ text-shadow: @tealTextShadow;
1989
2587
  }
1990
2588
  .ui.teal.buttons .button:active,
1991
2589
  .ui.teal.button:active {
@@ -2005,7 +2603,7 @@
2005
2603
  /* Basic */
2006
2604
  .ui.basic.teal.buttons .button,
2007
2605
  .ui.basic.teal.button {
2008
- box-shadow: 0px 0px 0px @basicColoredBorderSize @borderColor inset !important;
2606
+ box-shadow: 0px 0px 0px @basicBorderSize @borderColor inset !important;
2009
2607
  color: @textColor !important;
2010
2608
  }
2011
2609
  .ui.basic.teal.buttons .button:hover,
@@ -2014,14 +2612,19 @@
2014
2612
  box-shadow: 0px 0px 0px @basicColoredBorderSize @tealHover inset !important;
2015
2613
  color: @tealHover !important;
2016
2614
  }
2017
- .ui.basic.teal.buttons .button:active,
2018
- .ui.basic.teal.button:active {
2019
- box-shadow: 0px 0px 0px @basicColoredBorderSize @tealDown inset !important;
2020
- color: @tealDown !important;
2615
+ .ui.basic.teal.buttons .button:focus,
2616
+ .ui.basic.teal.button:focus {
2617
+ background: transparent !important;
2618
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @tealFocus inset !important;
2021
2619
  }
2022
2620
  .ui.basic.teal.buttons .active.button,
2023
2621
  .ui.basic.teal.active.button {
2024
2622
  background: transparent !important;
2623
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @tealActive inset !important;
2624
+ color: @tealDown !important;
2625
+ }
2626
+ .ui.basic.teal.buttons .button:active,
2627
+ .ui.basic.teal.button:active {
2025
2628
  box-shadow: 0px 0px 0px @basicColoredBorderSize @tealDown inset !important;
2026
2629
  color: @tealDown !important;
2027
2630
  }
@@ -2037,22 +2640,31 @@
2037
2640
  color: @lightTeal;
2038
2641
  }
2039
2642
  .ui.inverted.teal.buttons .button:hover,
2643
+ .ui.inverted.teal.button:hover,
2644
+ .ui.inverted.teal.buttons .button:focus,
2645
+ .ui.inverted.teal.button:focus,
2646
+ .ui.inverted.teal.buttons .button.active,
2647
+ .ui.inverted.teal.button.active,
2648
+ .ui.inverted.teal.buttons .button:active,
2649
+ .ui.inverted.teal.button:active {
2650
+ box-shadow: none !important;
2651
+ color: @lightTealTextColor;
2652
+ }
2653
+ .ui.inverted.teal.buttons .button:hover,
2040
2654
  .ui.inverted.teal.button:hover {
2041
- box-shadow: 0px 0px 0px @invertedBorderSize @lightTeal inset !important;
2042
- background-color: @lightTeal;
2043
- color: @black;
2655
+ background-color: @lightTealHover;
2656
+ }
2657
+ .ui.inverted.teal.buttons .button:focus,
2658
+ .ui.inverted.teal.button:focus {
2659
+ background-color: @lightTealFocus;
2044
2660
  }
2045
2661
  .ui.inverted.teal.buttons .active.button,
2046
2662
  .ui.inverted.teal.active.button {
2047
- box-shadow: 0px 0px 0px @invertedBorderSize @lightTeal inset !important;
2048
- background-color: @lightTeal;
2049
- color: @black;
2663
+ background-color: @lightTealActive;
2050
2664
  }
2051
2665
  .ui.inverted.teal.buttons .button:active,
2052
2666
  .ui.inverted.teal.button:active {
2053
- box-shadow: 0px 0px 0px @invertedBorderSize @lightTealDown inset !important;
2054
2667
  background-color: @lightTealDown;
2055
- color: @black;
2056
2668
  }
2057
2669
 
2058
2670
  /* Inverted Basic */
@@ -2066,13 +2678,19 @@
2066
2678
  .ui.inverted.teal.basic.buttons .button:hover,
2067
2679
  .ui.inverted.teal.buttons .basic.button:hover,
2068
2680
  .ui.inverted.teal.basic.button:hover {
2069
- box-shadow: 0px 0px 0px @invertedBorderSize @lightTeal inset !important;
2681
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightTealHover inset !important;
2682
+ color: @lightTeal !important;
2683
+ }
2684
+ .ui.inverted.teal.basic.buttons .button:focus,
2685
+ .ui.inverted.teal.basic.buttons .button:focus,
2686
+ .ui.inverted.teal.basic.button:focus {
2687
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightTealFocus inset !important;
2070
2688
  color: @lightTeal !important;
2071
2689
  }
2072
2690
  .ui.inverted.teal.basic.buttons .active.button,
2073
2691
  .ui.inverted.teal.buttons .basic.active.button,
2074
2692
  .ui.inverted.teal.basic.active.button {
2075
- box-shadow: 0px 0px 0px @invertedBorderSize @lightTeal inset !important;
2693
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightTealActive inset !important;
2076
2694
  color: @lightTeal !important;
2077
2695
  }
2078
2696
  .ui.inverted.teal.basic.buttons .button:active,
@@ -2083,6 +2701,144 @@
2083
2701
  }
2084
2702
 
2085
2703
 
2704
+ /*--- Olive ---*/
2705
+ .ui.olive.buttons .button,
2706
+ .ui.olive.button {
2707
+ background-color: @olive;
2708
+ color: @oliveTextColor;
2709
+ text-shadow: @oliveTextShadow;
2710
+ background-image: @coloredBackgroundImage;
2711
+ }
2712
+ .ui.olive.button {
2713
+ box-shadow: @coloredBoxShadow;
2714
+ }
2715
+ .ui.olive.buttons .button:hover,
2716
+ .ui.olive.button:hover {
2717
+ background-color: @oliveHover;
2718
+ color: @oliveTextColor;
2719
+ text-shadow: @oliveTextShadow;
2720
+ }
2721
+ .ui.olive.buttons .button:focus,
2722
+ .ui.olive.button:focus {
2723
+ background-color: @oliveFocus;
2724
+ color: @oliveTextColor;
2725
+ text-shadow: @oliveTextShadow;
2726
+ }
2727
+ .ui.olive.buttons .button:active,
2728
+ .ui.olive.button:active {
2729
+ background-color: @oliveDown;
2730
+ color: @oliveTextColor;
2731
+ text-shadow: @oliveTextShadow;
2732
+ }
2733
+ .ui.olive.buttons .active.button,
2734
+ .ui.olive.buttons .active.button:active,
2735
+ .ui.olive.active.button,
2736
+ .ui.olive.button .active.button:active {
2737
+ background-color: @oliveActive;
2738
+ color: @oliveTextColor;
2739
+ text-shadow: @oliveTextShadow;
2740
+ }
2741
+
2742
+ /* Basic */
2743
+ .ui.basic.olive.buttons .button,
2744
+ .ui.basic.olive.button {
2745
+ box-shadow: 0px 0px 0px @basicBorderSize @borderColor inset !important;
2746
+ color: @textColor !important;
2747
+ }
2748
+ .ui.basic.olive.buttons .button:hover,
2749
+ .ui.basic.olive.button:hover {
2750
+ background: transparent !important;
2751
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @oliveHover inset !important;
2752
+ color: @oliveHover !important;
2753
+ }
2754
+ .ui.basic.olive.buttons .button:focus,
2755
+ .ui.basic.olive.button:focus {
2756
+ background: transparent !important;
2757
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @oliveFocus inset !important;
2758
+ }
2759
+ .ui.basic.olive.buttons .active.button,
2760
+ .ui.basic.olive.active.button {
2761
+ background: transparent !important;
2762
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @oliveActive inset !important;
2763
+ color: @oliveDown !important;
2764
+ }
2765
+ .ui.basic.olive.buttons .button:active,
2766
+ .ui.basic.olive.button:active {
2767
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @oliveDown inset !important;
2768
+ color: @oliveDown !important;
2769
+ }
2770
+ .ui.buttons > .basic.olive.button:not(:first-child) {
2771
+ margin-left: -@basicColoredBorderSize;
2772
+ }
2773
+
2774
+ /* Inverted */
2775
+ .ui.inverted.olive.buttons .button,
2776
+ .ui.inverted.olive.button {
2777
+ background-color: transparent;
2778
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightOlive inset !important;
2779
+ color: @lightOlive;
2780
+ }
2781
+ .ui.inverted.olive.buttons .button:hover,
2782
+ .ui.inverted.olive.button:hover,
2783
+ .ui.inverted.olive.buttons .button:focus,
2784
+ .ui.inverted.olive.button:focus,
2785
+ .ui.inverted.olive.buttons .button.active,
2786
+ .ui.inverted.olive.button.active,
2787
+ .ui.inverted.olive.buttons .button:active,
2788
+ .ui.inverted.olive.button:active {
2789
+ box-shadow: none !important;
2790
+ color: @lightOliveTextColor;
2791
+ }
2792
+ .ui.inverted.olive.buttons .button:hover,
2793
+ .ui.inverted.olive.button:hover {
2794
+ background-color: @lightOliveHover;
2795
+ }
2796
+ .ui.inverted.olive.buttons .button:focus,
2797
+ .ui.inverted.olive.button:focus {
2798
+ background-color: @lightOliveFocus;
2799
+ }
2800
+ .ui.inverted.olive.buttons .active.button,
2801
+ .ui.inverted.olive.active.button {
2802
+ background-color: @lightOliveActive;
2803
+ }
2804
+ .ui.inverted.olive.buttons .button:active,
2805
+ .ui.inverted.olive.button:active {
2806
+ background-color: @lightOliveDown;
2807
+ }
2808
+
2809
+ /* Inverted Basic */
2810
+ .ui.inverted.olive.basic.buttons .button,
2811
+ .ui.inverted.olive.buttons .basic.button,
2812
+ .ui.inverted.olive.basic.button {
2813
+ background-color: transparent;
2814
+ box-shadow: @basicInvertedBoxShadow !important;
2815
+ color: @white !important;
2816
+ }
2817
+ .ui.inverted.olive.basic.buttons .button:hover,
2818
+ .ui.inverted.olive.buttons .basic.button:hover,
2819
+ .ui.inverted.olive.basic.button:hover {
2820
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightOliveHover inset !important;
2821
+ color: @lightOlive !important;
2822
+ }
2823
+ .ui.inverted.olive.basic.buttons .button:focus,
2824
+ .ui.inverted.olive.basic.buttons .button:focus,
2825
+ .ui.inverted.olive.basic.button:focus {
2826
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightOliveFocus inset !important;
2827
+ color: @lightOlive !important;
2828
+ }
2829
+ .ui.inverted.olive.basic.buttons .active.button,
2830
+ .ui.inverted.olive.buttons .basic.active.button,
2831
+ .ui.inverted.olive.basic.active.button {
2832
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightOliveActive inset !important;
2833
+ color: @lightOlive !important;
2834
+ }
2835
+ .ui.inverted.olive.basic.buttons .button:active,
2836
+ .ui.inverted.olive.buttons .basic.button:active,
2837
+ .ui.inverted.olive.basic.button:active {
2838
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightOliveDown inset !important;
2839
+ color: @lightOlive !important;
2840
+ }
2841
+
2086
2842
  /*--- Yellow ---*/
2087
2843
  .ui.yellow.buttons .button,
2088
2844
  .ui.yellow.button {
@@ -2097,8 +2853,14 @@
2097
2853
  .ui.yellow.buttons .button:hover,
2098
2854
  .ui.yellow.button:hover {
2099
2855
  background-color: @yellowHover;
2100
- color: @invertedTextColor;
2101
- text-shadow: @invertedTextShadow;
2856
+ color: @yellowTextColor;
2857
+ text-shadow: @yellowTextShadow;
2858
+ }
2859
+ .ui.yellow.buttons .button:focus,
2860
+ .ui.yellow.button:focus {
2861
+ background-color: @yellowFocus;
2862
+ color: @yellowTextColor;
2863
+ text-shadow: @yellowTextShadow;
2102
2864
  }
2103
2865
  .ui.yellow.buttons .button:active,
2104
2866
  .ui.yellow.button:active {
@@ -2118,7 +2880,7 @@
2118
2880
  /* Basic */
2119
2881
  .ui.basic.yellow.buttons .button,
2120
2882
  .ui.basic.yellow.button {
2121
- box-shadow: 0px 0px 0px @basicColoredBorderSize @borderColor inset !important;
2883
+ box-shadow: 0px 0px 0px @basicBorderSize @borderColor inset !important;
2122
2884
  color: @textColor !important;
2123
2885
  }
2124
2886
  .ui.basic.yellow.buttons .button:hover,
@@ -2127,14 +2889,19 @@
2127
2889
  box-shadow: 0px 0px 0px @basicColoredBorderSize @yellowHover inset !important;
2128
2890
  color: @yellowHover !important;
2129
2891
  }
2130
- .ui.basic.yellow.buttons .button:active,
2131
- .ui.basic.yellow.button:active {
2132
- box-shadow: 0px 0px 0px @basicColoredBorderSize @yellowDown inset !important;
2133
- color: @yellowDown !important;
2892
+ .ui.basic.yellow.buttons .button:focus,
2893
+ .ui.basic.yellow.button:focus {
2894
+ background: transparent !important;
2895
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @yellowFocus inset !important;
2134
2896
  }
2135
2897
  .ui.basic.yellow.buttons .active.button,
2136
2898
  .ui.basic.yellow.active.button {
2137
2899
  background: transparent !important;
2900
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @yellowActive inset !important;
2901
+ color: @yellowDown !important;
2902
+ }
2903
+ .ui.basic.yellow.buttons .button:active,
2904
+ .ui.basic.yellow.button:active {
2138
2905
  box-shadow: 0px 0px 0px @basicColoredBorderSize @yellowDown inset !important;
2139
2906
  color: @yellowDown !important;
2140
2907
  }
@@ -2150,22 +2917,31 @@
2150
2917
  color: @lightYellow;
2151
2918
  }
2152
2919
  .ui.inverted.yellow.buttons .button:hover,
2920
+ .ui.inverted.yellow.button:hover,
2921
+ .ui.inverted.yellow.buttons .button:focus,
2922
+ .ui.inverted.yellow.button:focus,
2923
+ .ui.inverted.yellow.buttons .button.active,
2924
+ .ui.inverted.yellow.button.active,
2925
+ .ui.inverted.yellow.buttons .button:active,
2926
+ .ui.inverted.yellow.button:active {
2927
+ box-shadow: none !important;
2928
+ color: @lightYellowTextColor;
2929
+ }
2930
+ .ui.inverted.yellow.buttons .button:hover,
2153
2931
  .ui.inverted.yellow.button:hover {
2154
- box-shadow: 0px 0px 0px @invertedBorderSize @lightYellow inset !important;
2155
- background-color: @lightYellow;
2156
- color: @black;
2932
+ background-color: @lightYellowHover;
2933
+ }
2934
+ .ui.inverted.yellow.buttons .button:focus,
2935
+ .ui.inverted.yellow.button:focus {
2936
+ background-color: @lightYellowFocus;
2157
2937
  }
2158
2938
  .ui.inverted.yellow.buttons .active.button,
2159
2939
  .ui.inverted.yellow.active.button {
2160
- box-shadow: 0px 0px 0px @invertedBorderSize @lightYellow inset !important;
2161
- background-color: @lightYellow;
2162
- color: @black;
2940
+ background-color: @lightYellowActive;
2163
2941
  }
2164
2942
  .ui.inverted.yellow.buttons .button:active,
2165
2943
  .ui.inverted.yellow.button:active {
2166
- box-shadow: 0px 0px 0px @invertedBorderSize @lightYellowDown inset !important;
2167
2944
  background-color: @lightYellowDown;
2168
- color: @black;
2169
2945
  }
2170
2946
 
2171
2947
  /* Inverted Basic */
@@ -2179,13 +2955,19 @@
2179
2955
  .ui.inverted.yellow.basic.buttons .button:hover,
2180
2956
  .ui.inverted.yellow.buttons .basic.button:hover,
2181
2957
  .ui.inverted.yellow.basic.button:hover {
2182
- box-shadow: 0px 0px 0px @invertedBorderSize @lightYellow inset !important;
2958
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightYellowHover inset !important;
2959
+ color: @lightYellow !important;
2960
+ }
2961
+ .ui.inverted.yellow.basic.buttons .button:focus,
2962
+ .ui.inverted.yellow.basic.buttons .button:focus,
2963
+ .ui.inverted.yellow.basic.button:focus {
2964
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightYellowFocus inset !important;
2183
2965
  color: @lightYellow !important;
2184
2966
  }
2185
2967
  .ui.inverted.yellow.basic.buttons .active.button,
2186
2968
  .ui.inverted.yellow.buttons .basic.active.button,
2187
2969
  .ui.inverted.yellow.basic.active.button {
2188
- box-shadow: 0px 0px 0px @invertedBorderSize @lightYellow inset !important;
2970
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightYellowActive inset !important;
2189
2971
  color: @lightYellow !important;
2190
2972
  }
2191
2973
  .ui.inverted.yellow.basic.buttons .button:active,
@@ -2216,6 +2998,12 @@
2216
2998
  color: @primaryTextColor;
2217
2999
  text-shadow: @primaryTextShadow;
2218
3000
  }
3001
+ .ui.primary.buttons .button:focus,
3002
+ .ui.primary.button:focus {
3003
+ background-color: @primaryColorFocus;
3004
+ color: @primaryTextColor;
3005
+ text-shadow: @primaryTextShadow;
3006
+ }
2219
3007
  .ui.primary.buttons .button:active,
2220
3008
  .ui.primary.button:active {
2221
3009
  background-color: @primaryColorDown;
@@ -2249,6 +3037,12 @@
2249
3037
  color: @secondaryTextColor;
2250
3038
  text-shadow: @secondaryTextShadow;
2251
3039
  }
3040
+ .ui.secondary.buttons .button:focus,
3041
+ .ui.secondary.button:focus {
3042
+ background-color: @secondaryColorFocus;
3043
+ color: @secondaryTextColor;
3044
+ text-shadow: @secondaryTextShadow;
3045
+ }
2252
3046
  .ui.secondary.buttons .button:active,
2253
3047
  .ui.secondary.button:active {
2254
3048
  background-color: @secondaryColorDown;
@@ -2277,13 +3071,17 @@
2277
3071
  box-shadow: @coloredBoxShadow;
2278
3072
  }
2279
3073
  .ui.positive.buttons .button:hover,
2280
- .ui.positive.button:hover,
2281
- .ui.positive.buttons .active.button,
2282
- .ui.positive.active.button {
3074
+ .ui.positive.button:hover {
2283
3075
  background-color: @positiveColorHover !important;
2284
3076
  color: @invertedTextColor;
2285
3077
  text-shadow: @invertedTextShadow;
2286
3078
  }
3079
+ .ui.positive.buttons .button:focus,
3080
+ .ui.positive.button:focus {
3081
+ background-color: @positiveColorFocus !important;
3082
+ color: @invertedTextColor;
3083
+ text-shadow: @invertedTextShadow;
3084
+ }
2287
3085
  .ui.positive.buttons .button:active,
2288
3086
  .ui.positive.button:active {
2289
3087
  background-color: @positiveColorDown !important;
@@ -2291,9 +3089,8 @@
2291
3089
  text-shadow: @invertedTextShadow;
2292
3090
  }
2293
3091
  .ui.positive.buttons .active.button,
2294
- .ui.positive.buttons .active.button:active,
2295
3092
  .ui.positive.active.button,
2296
- .ui.positive.button .active.button:active {
3093
+ .ui.positive.buttons .active.button:active {
2297
3094
  background-color: @positiveColorActive;
2298
3095
  color: @invertedTextColor;
2299
3096
  text-shadow: @invertedTextShadow;
@@ -2315,13 +3112,17 @@
2315
3112
  box-shadow: @coloredBoxShadow;
2316
3113
  }
2317
3114
  .ui.negative.buttons .button:hover,
2318
- .ui.negative.button:hover,
2319
- .ui.negative.buttons .active.button,
2320
- .ui.negative.active.button {
3115
+ .ui.negative.button:hover {
2321
3116
  background-color: @negativeColorHover !important;
2322
3117
  color: @invertedTextColor;
2323
3118
  text-shadow: @invertedTextShadow;
2324
3119
  }
3120
+ .ui.negative.buttons .button:focus,
3121
+ .ui.negative.button:focus {
3122
+ background-color: @negativeColorFocus !important;
3123
+ color: @invertedTextColor;
3124
+ text-shadow: @invertedTextShadow;
3125
+ }
2325
3126
  .ui.negative.buttons .button:active,
2326
3127
  .ui.negative.button:active {
2327
3128
  background-color: @negativeColorDown !important;
@@ -2329,9 +3130,8 @@
2329
3130
  text-shadow: @invertedTextShadow;
2330
3131
  }
2331
3132
  .ui.negative.buttons .active.button,
2332
- .ui.negative.buttons .active.button:active,
2333
3133
  .ui.negative.active.button,
2334
- .ui.negative.button .active.button:active {
3134
+ .ui.negative.buttons .active.button:active {
2335
3135
  background-color: @negativeColorActive;
2336
3136
  color: @invertedTextColor;
2337
3137
  text-shadow: @invertedTextShadow;
@@ -2342,14 +3142,17 @@
2342
3142
  *******************************/
2343
3143
 
2344
3144
  .ui.buttons {
2345
- display: inline-block;
2346
- vertical-align: middle;
3145
+ display: inline-flex;
3146
+ flex-direction: row;
3147
+ font-size: 0em;
3148
+ vertical-align: baseline;
2347
3149
  margin: @verticalMargin @horizontalMargin 0em 0em;
2348
3150
  }
2349
- .ui.buttons > .button:hover,
2350
- .ui.buttons > .active.button {
2351
- position: relative;
3151
+ .ui.buttons:not(.basic):not(.inverted) {
3152
+ box-shadow: @groupBoxShadow;
2352
3153
  }
3154
+
3155
+ /* Clearfix */
2353
3156
  .ui.buttons:after {
2354
3157
  content: ".";
2355
3158
  display: block;
@@ -2357,27 +3160,21 @@
2357
3160
  clear: both;
2358
3161
  visibility: hidden;
2359
3162
  }
2360
- .ui.buttons .button:first-child {
2361
- border-left: none;
2362
- }
2363
-
2364
- .ui.buttons:not(.basic):not(.inverted) {
2365
- box-shadow: @groupBoxShadow;
2366
- }
2367
- .ui.buttons > .ui.button:not(.basic):not(.inverted),
2368
- .ui.buttons:not(.basic):not(.inverted) > .button {
2369
- box-shadow: @groupButtonBoxShadow;
2370
- }
2371
-
2372
3163
 
3164
+ /* Standard Group */
2373
3165
  .ui.buttons .button {
3166
+ flex: 1 0 auto;
2374
3167
  margin: 0em;
2375
- float: left;
2376
3168
  border-radius: 0em;
2377
3169
  margin: @groupButtonOffset;
2378
3170
  }
3171
+ .ui.buttons > .ui.button:not(.basic):not(.inverted),
3172
+ .ui.buttons:not(.basic):not(.inverted) > .button {
3173
+ box-shadow: @groupButtonBoxShadow;
3174
+ }
2379
3175
 
2380
- .ui.buttons .button:first-child {
3176
+ .ui.buttons .button:first-child {
3177
+ border-left: none;
2381
3178
  margin-left: 0em;
2382
3179
  border-top-left-radius: @borderRadius;
2383
3180
  border-bottom-left-radius: @borderRadius;
@@ -2387,10 +3184,10 @@
2387
3184
  border-bottom-right-radius: @borderRadius;
2388
3185
  }
2389
3186
 
2390
-
2391
3187
  /* Vertical Style */
2392
3188
  .ui.vertical.buttons {
2393
- display: inline-block;
3189
+ display: inline-flex;
3190
+ flex-direction: column;
2394
3191
  }
2395
3192
  .ui.vertical.buttons .button {
2396
3193
  display: block;