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 Contributors
16
+ * Copyright 2015 Contributors
17
17
  * Released under the MIT license
18
18
  * http://opensource.org/licenses/MIT
19
19
  *
@@ -35,7 +35,6 @@
35
35
  .ui.accordion,
36
36
  .ui.accordion .accordion {
37
37
  max-width: 100%;
38
- font-size: @fontSize;
39
38
  }
40
39
  .ui.accordion .accordion {
41
40
  margin: @childAccordionMargin;
@@ -13,7 +13,7 @@
13
13
  * http://github.com/semantic-org/semantic-ui/
14
14
  *
15
15
  *
16
- * Copyright 2014 Contributors
16
+ * Copyright 2015 Contributors
17
17
  * Released under the MIT license
18
18
  * http://opensource.org/licenses/MIT
19
19
  *
@@ -40,25 +40,26 @@
40
40
  .ui.checkbox {
41
41
  position: relative;
42
42
  display: inline-block;
43
+ backface-visibility: hidden;
44
+ outline: none;
45
+ vertical-align: baseline;
43
46
 
44
47
  min-height: @checkboxSize;
45
-
46
- font-size: 1rem;
48
+ font-size: @medium;
47
49
  line-height: @checkboxLineHeight;
48
50
  min-width: @checkboxSize;
49
- backface-visibility: hidden;
50
-
51
- outline: none;
52
- vertical-align: middle;
53
51
  }
54
52
  .ui.checkbox input[type="checkbox"],
55
53
  .ui.checkbox input[type="radio"] {
54
+ cursor: pointer;
56
55
  position: absolute;
57
56
  top: 0px;
58
57
  left: 0px;
59
58
  opacity: 0 !important;
60
59
  outline: none;
61
- z-index: -1;
60
+ z-index: 3;
61
+ width: @checkboxSize;
62
+ height: @checkboxSize;
62
63
  }
63
64
 
64
65
 
@@ -69,11 +70,14 @@
69
70
 
70
71
  .ui.checkbox .box,
71
72
  .ui.checkbox label {
73
+ cursor: auto;
74
+ position: relative;
72
75
  display: block;
73
- cursor: pointer;
74
- padding-left: @labelPadding;
76
+ padding-left: @labelDistance;
75
77
  outline: none;
76
78
  }
79
+
80
+ .ui.checkbox .box,
77
81
  .ui.checkbox label {
78
82
  font-size: @fontSize;
79
83
  }
@@ -81,12 +85,11 @@
81
85
  .ui.checkbox .box:before,
82
86
  .ui.checkbox label:before {
83
87
  position: absolute;
88
+ top: 0px;
89
+ left: 0px;
84
90
 
85
- line-height: 1;
86
91
  width: @checkboxSize;
87
92
  height: @checkboxSize;
88
- top: 0em;
89
- left: 0em;
90
93
  content: '';
91
94
 
92
95
  background: @checkboxBackground;
@@ -103,16 +106,16 @@
103
106
  .ui.checkbox .box:after,
104
107
  .ui.checkbox label:after {
105
108
  position: absolute;
109
+ font-size: @checkboxCheckFontSize;
106
110
  top: @checkboxCheckTop;
107
111
  left: @checkboxCheckLeft;
108
- line-height: @checkboxSize;
109
- width: @checkboxSize;
110
- height: @checkboxSize;
112
+ width: @checkboxCheckSize;
113
+ height: @checkboxCheckSize;
111
114
  text-align: center;
112
115
 
113
116
  opacity: 0;
114
117
  color: @checkboxColor;
115
- transition: all 0.1s ease;
118
+ transition: @checkboxTransition;
116
119
  }
117
120
 
118
121
  /*--------------
@@ -122,10 +125,8 @@
122
125
  /* Inside */
123
126
  .ui.checkbox label,
124
127
  .ui.checkbox + label {
125
- cursor: pointer;
126
128
  color: @labelColor;
127
- transition: color 0.2s ease;
128
- user-select: none;
129
+ transition: @labelTransition;
129
130
  }
130
131
 
131
132
  /* Outside */
@@ -146,7 +147,7 @@
146
147
  .ui.checkbox .box:hover::before,
147
148
  .ui.checkbox label:hover::before {
148
149
  background: @checkboxHoverBackground;
149
- border: @checkboxHoverBorder;
150
+ border-color: @checkboxHoverBorderColor;
150
151
  }
151
152
  .ui.checkbox label:hover,
152
153
  .ui.checkbox + label:hover {
@@ -159,42 +160,83 @@
159
160
 
160
161
  .ui.checkbox .box:active::before,
161
162
  .ui.checkbox label:active::before {
162
- background: @checkboxSelectedBackground;
163
- border: 1px solid @checkboxSelectedBorder;
163
+ background: @checkboxPressedBackground;
164
+ border-color: @checkboxPressedBorderColor;
165
+ }
166
+ .ui.checkbox .box:active::after,
167
+ .ui.checkbox label:active::after {
168
+ color: @checkboxPressedColor;
164
169
  }
165
170
  .ui.checkbox input[type="checkbox"]:active ~ label,
166
171
  .ui.checkbox input[type="radio"]:active ~ label {
167
- color: @labelSelectedColor;
172
+ color: @labelPressedColor;
168
173
  }
169
174
 
170
175
  /*--------------
171
- Focus
176
+ Focus
172
177
  ---------------*/
173
178
 
174
179
  .ui.checkbox input[type="checkbox"]:focus ~ .box:before,
175
180
  .ui.checkbox input[type="checkbox"]:focus ~ label:before,
176
181
  .ui.checkbox input[type="radio"]:focus ~ .box:before,
177
182
  .ui.checkbox input[type="radio"]:focus ~ label:before {
178
- background: @checkboxSelectedBackground;
179
- border: 1px solid @checkboxSelectedBorder;
183
+ background: @checkboxFocusedBackground;
184
+ border-color: @checkboxFocusedBorderColor;
185
+ }
186
+ .ui.checkbox input[type="checkbox"]:focus ~ .box:after,
187
+ .ui.checkbox input[type="checkbox"]:focus ~ label:after,
188
+ .ui.checkbox input[type="radio"]:focus ~ .box:after,
189
+ .ui.checkbox input[type="radio"]:focus ~ label:after {
190
+ color: @checkboxFocusedColor;
180
191
  }
181
192
  .ui.checkbox input[type="checkbox"]:focus ~ label,
182
193
  .ui.checkbox input[type="radio"]:focus ~ label {
183
- color: @labelSelectedColor;
194
+ color: @labelFocusedColor;
184
195
  }
185
196
 
186
-
187
197
  /*--------------
188
198
  Active
189
199
  ---------------*/
190
200
 
191
- .ui.checkbox input[type="checkbox"]:checked ~ .box:after,
192
- .ui.checkbox input[type="checkbox"]:checked ~ label:after,
193
- .ui.checkbox input[type="radio"]:checked ~ .box:after,
194
- .ui.checkbox input[type="radio"]:checked ~ label:after {
195
- opacity: 1;
201
+ .ui.checkbox input:checked ~ .box:before,
202
+ .ui.checkbox input:checked ~ label:before {
203
+ background: @checkboxActiveBackground;
204
+ border-color: @checkboxActiveBorderColor;
205
+ }
206
+ .ui.checkbox input:checked ~ .box:after,
207
+ .ui.checkbox input:checked ~ label:after {
208
+ opacity: @checkboxActiveCheckOpacity;
209
+ color: @checkboxActiveCheckColor;
210
+ }
211
+
212
+ /*--------------
213
+ Indeterminate
214
+ ---------------*/
215
+
216
+ .ui.checkbox input:indeterminate ~ .box:before,
217
+ .ui.checkbox input:indeterminate ~ label:before {
218
+ background: @checkboxIndeterminateBackground;
219
+ border-color: @checkboxIndeterminateBorderColor;
220
+ }
221
+ .ui.checkbox input:indeterminate ~ .box:after,
222
+ .ui.checkbox input:indeterminate ~ label:after {
223
+ opacity: @checkboxIndeterminateCheckOpacity;
224
+ color: @checkboxIndeterminateCheckColor;
196
225
  }
197
226
 
227
+ /*--------------
228
+ Active Focus
229
+ ---------------*/
230
+
231
+ .ui.checkbox input[type="radio"]:indeterminate:focus ~ .box:before,
232
+ .ui.checkbox input[type="radio"]:indeterminate:focus ~ label:before,
233
+ .ui.checkbox input[type="radio"]:checked:focus ~ .box:before,
234
+ .ui.checkbox input[type="radio"]:checked:focus ~ label:before {
235
+ background: @checkboxFocusedBackground;
236
+ border-color: @checkboxFocusedBorderColor;
237
+ }
238
+
239
+
198
240
  /*--------------
199
241
  Read-Only
200
242
  ---------------*/
@@ -211,15 +253,33 @@
211
253
 
212
254
  .ui.disabled.checkbox .box:after,
213
255
  .ui.disabled.checkbox label,
214
- .ui.checkbox input[type="checkbox"][disabled] ~ .box:after,
215
- .ui.checkbox input[type="checkbox"][disabled] ~ label,
216
- .ui.checkbox input[type="radio"][disabled] ~ .box:after,
217
- .ui.checkbox input[type="radio"][disabled] ~ label {
256
+ .ui.checkbox input[disabled] ~ .box:after,
257
+ .ui.checkbox input[disabled] ~ label {
218
258
  cursor: default;
219
259
  opacity: @disabledCheckboxOpacity;
220
260
  color: @disabledCheckboxLabelColor;
221
261
  }
222
262
 
263
+ /*--------------
264
+ Hidden
265
+ ---------------*/
266
+
267
+ /* Initialized checkbox moves input below element
268
+ to prevent manually triggering */
269
+ .ui.checkbox input[type="checkbox"].hidden,
270
+ .ui.checkbox input[type="radio"].hidden {
271
+ z-index: -1;
272
+ }
273
+
274
+ /* Selectable Label */
275
+ .ui.checkbox input[type="checkbox"].hidden + label,
276
+ .ui.checkbox input[type="radio"].hidden + label {
277
+ cursor: pointer;
278
+ user-select: none;
279
+ }
280
+
281
+
282
+
223
283
 
224
284
  /*******************************
225
285
  Types
@@ -231,51 +291,75 @@
231
291
  ---------------*/
232
292
 
233
293
  .ui.radio.checkbox {
234
- min-height: @checkboxRadioSize;
294
+ min-height: @radioSize;
295
+ }
296
+
297
+ .ui.radio.checkbox .box,
298
+ .ui.radio.checkbox label {
299
+ padding-left: @radioLabelDistance;
235
300
  }
236
301
 
237
302
  /* Box */
238
303
  .ui.radio.checkbox .box:before,
239
304
  .ui.radio.checkbox label:before {
240
- width: @checkboxRadioSize;
241
- height: @checkboxRadioSize;
242
- border-radius: @circularRadius;
243
- top: @checkboxRadioTop;
244
- left: @checkboxRadioLeft;
305
+ content: '';
245
306
  transform: none;
307
+
308
+ width: @radioSize;
309
+ height: @radioSize;
310
+ border-radius: @circularRadius;
311
+ top: @radioTop;
312
+ left: @radioLeft;
246
313
  }
247
314
 
248
- /* Circle */
315
+ /* Bullet */
249
316
  .ui.radio.checkbox .box:after,
250
317
  .ui.radio.checkbox label:after {
251
318
  border: none;
252
- width: @checkboxRadioSize;
253
- height: @checkboxRadioSize;
254
- line-height: @checkboxRadioSize;
255
- top: @checkboxRadioTop;
256
- left: @checkboxRadioLeft;
257
- font-size: @checkboxRadioCircleSize;
319
+ content: '' !important;
320
+ width: @radioSize;
321
+ height: @radioSize;
322
+ line-height: @radioSize;
258
323
  }
324
+
259
325
  /* Radio Checkbox */
260
326
  .ui.radio.checkbox .box:after,
261
327
  .ui.radio.checkbox label:after {
262
- width: @checkboxRadioSize;
263
- height: @checkboxRadioSize;
264
- border-radius: @checkboxBulletRadius;
265
- transform: scale(@checkboxBulletScale);
266
- background-color: @checkboxBulletColor;
328
+ top: @bulletTop;
329
+ left: @bulletLeft;
330
+ width: @radioSize;
331
+ height: @radioSize;
332
+ border-radius: @bulletRadius;
333
+ transform: scale(@bulletScale);
334
+ background-color: @bulletColor;
267
335
  }
268
336
 
337
+ /* Active */
338
+ .ui.radio.checkbox input[type="radio"]:checked ~ .box:before,
339
+ .ui.radio.checkbox input[type="radio"]:checked ~ label:before {
340
+ background-color: @radioActiveBackground;
341
+ }
342
+ .ui.radio.checkbox input[type="radio"]:checked ~ .box:after,
343
+ .ui.radio.checkbox input[type="radio"]:checked ~ label:after {
344
+ background-color: @radioActiveBulletColor;
345
+ }
269
346
 
270
347
  /*--------------
271
348
  Slider
272
349
  ---------------*/
273
350
 
274
351
  .ui.slider.checkbox {
275
- cursor: pointer;
276
352
  min-height: @sliderHeight;
277
353
  }
278
354
 
355
+ /* Input */
356
+ .ui.slider.checkbox input[type="checkbox"],
357
+ .ui.slider.checkbox input[type="radio"] {
358
+ width: @sliderWidth;
359
+ height: @sliderHeight;
360
+ }
361
+
362
+ /* Label */
279
363
  .ui.slider.checkbox .box,
280
364
  .ui.slider.checkbox label {
281
365
  padding-left: @sliderLabelDistance;
@@ -286,15 +370,15 @@
286
370
  /* Line */
287
371
  .ui.slider.checkbox .box:before,
288
372
  .ui.slider.checkbox label:before {
289
- cursor: pointer;
290
373
  display: block;
291
-
292
374
  position: absolute;
293
375
  content: '';
294
- top: @sliderLineVerticalOffset;
376
+ transform: none;
377
+ border: none !important;
295
378
  left: 0em;
296
379
  z-index: 1;
297
- border: none !important;
380
+
381
+ top: @sliderLineVerticalOffset;
298
382
 
299
383
  background-color: @sliderLineColor;
300
384
  width: @sliderLineWidth;
@@ -302,9 +386,8 @@
302
386
 
303
387
  transform: none;
304
388
  border-radius: @sliderLineRadius;
305
- transition:
306
- background 0.3s ease
307
- ;
389
+ transition: @sliderLineTransition;
390
+
308
391
  }
309
392
 
310
393
  /* Handle */
@@ -312,7 +395,7 @@
312
395
  .ui.slider.checkbox label:after {
313
396
  background: @handleBackground;
314
397
  position: absolute;
315
- content: '';
398
+ content: '' !important;
316
399
  opacity: 1;
317
400
  z-index: 2;
318
401
 
@@ -325,9 +408,7 @@
325
408
  transform: none;
326
409
 
327
410
  border-radius: @circularRadius;
328
- transition:
329
- left 0.3s ease 0s
330
- ;
411
+ transition: @sliderHandleTransition;
331
412
  }
332
413
 
333
414
  /* Focus */
@@ -350,22 +431,16 @@
350
431
  }
351
432
 
352
433
  /* Active */
353
- .ui.slider.checkbox input[type="checkbox"]:checked ~ .box,
354
- .ui.slider.checkbox input[type="checkbox"]:checked ~ label,
355
- .ui.slider.checkbox input[type="radio"]:checked ~ .box,
356
- .ui.slider.checkbox input[type="radio"]:checked ~ label {
434
+ .ui.slider.checkbox :checked ~ .box,
435
+ .ui.slider.checkbox :checked ~ label {
357
436
  color: @sliderOnLabelColor;
358
437
  }
359
- .ui.slider.checkbox input[type="checkbox"]:checked ~ .box:before,
360
- .ui.slider.checkbox input[type="checkbox"]:checked ~ label:before,
361
- .ui.slider.checkbox input[type="radio"]:checked ~ .box:before,
362
- .ui.slider.checkbox input[type="radio"]:checked ~ label:before {
438
+ .ui.slider.checkbox :checked ~ .box:before,
439
+ .ui.slider.checkbox :checked ~ label:before {
363
440
  background-color: @sliderOnLineColor;
364
441
  }
365
- .ui.slider.checkbox input[type="checkbox"]:checked ~ .box:after,
366
- .ui.slider.checkbox input[type="checkbox"]:checked ~ label:after,
367
- .ui.slider.checkbox input[type="radio"]:checked ~ .box:after,
368
- .ui.slider.checkbox input[type="radio"]:checked ~ label:after {
442
+ .ui.slider.checkbox :checked ~ .box:after,
443
+ .ui.slider.checkbox :checked ~ label:after {
369
444
  left: @sliderTravelDistance;
370
445
  }
371
446
 
@@ -375,10 +450,17 @@
375
450
  ---------------*/
376
451
 
377
452
  .ui.toggle.checkbox {
378
- cursor: pointer;
379
453
  min-height: @toggleHeight;
380
454
  }
381
455
 
456
+ /* Input */
457
+ .ui.toggle.checkbox input[type="checkbox"],
458
+ .ui.toggle.checkbox input[type="radio"] {
459
+ width: @toggleWidth;
460
+ height: @toggleHeight;
461
+ }
462
+
463
+ /* Label */
382
464
  .ui.toggle.checkbox .box,
383
465
  .ui.toggle.checkbox label {
384
466
  min-height: @toggleHandleSize;
@@ -392,17 +474,16 @@
392
474
  /* Switch */
393
475
  .ui.toggle.checkbox .box:before,
394
476
  .ui.toggle.checkbox label:before {
395
- cursor: pointer;
396
477
  display: block;
397
-
398
478
  position: absolute;
399
479
  content: '';
400
-
401
- top: @toggleLaneVerticalOffset;
402
480
  z-index: 1;
481
+ transform: none;
403
482
  border: none;
404
483
 
405
- background-color: @neutralCheckbox;
484
+ top: @toggleLaneVerticalOffset;
485
+
486
+ background: @toggleLaneBackground;
406
487
  width: @toggleLaneWidth;
407
488
  height: @toggleLaneHeight;
408
489
  border-radius: @toggleHandleRadius;
@@ -413,7 +494,7 @@
413
494
  .ui.toggle.checkbox label:after {
414
495
  background: @handleBackground;
415
496
  position: absolute;
416
- content: '';
497
+ content: '' !important;
417
498
  opacity: 1;
418
499
  z-index: 2;
419
500
 
@@ -425,10 +506,7 @@
425
506
  left: 0em;
426
507
 
427
508
  border-radius: @circularRadius;
428
- transition:
429
- background 0.3s ease 0s,
430
- left 0.3s ease 0s
431
- ;
509
+ transition: @toggleHandleTransition;
432
510
  }
433
511
 
434
512
  .ui.toggle.checkbox input[type="checkbox"] ~ .box:after,
@@ -455,22 +533,16 @@
455
533
  }
456
534
 
457
535
  /* Active */
458
- .ui.toggle.checkbox input[type="checkbox"]:checked ~ .box,
459
- .ui.toggle.checkbox input[type="checkbox"]:checked ~ label,
460
- .ui.toggle.checkbox input[type="radio"]:checked ~ .box,
461
- .ui.toggle.checkbox input[type="radio"]:checked ~ label {
536
+ .ui.toggle.checkbox input:checked ~ .box,
537
+ .ui.toggle.checkbox input:checked ~ label {
462
538
  color: @toggleOnLabelColor;
463
539
  }
464
- .ui.toggle.checkbox input[type="checkbox"]:checked ~ .box:before,
465
- .ui.toggle.checkbox input[type="checkbox"]:checked ~ label:before,
466
- .ui.toggle.checkbox input[type="radio"]:checked ~ .box:before,
467
- .ui.toggle.checkbox input[type="radio"]:checked ~ label:before {
540
+ .ui.toggle.checkbox input:checked ~ .box:before,
541
+ .ui.toggle.checkbox input:checked ~ label:before {
468
542
  background-color: @toggleOnLaneColor;
469
543
  }
470
- .ui.toggle.checkbox input[type="checkbox"]:checked ~ .box:after,
471
- .ui.toggle.checkbox input[type="checkbox"]:checked ~ label:after,
472
- .ui.toggle.checkbox input[type="radio"]:checked ~ .box:after,
473
- .ui.toggle.checkbox input[type="radio"]:checked ~ label:after {
544
+ .ui.toggle.checkbox input:checked ~ .box:after,
545
+ .ui.toggle.checkbox input:checked ~ label:after {
474
546
  left: @toggleOnOffset;
475
547
  }
476
548