semantic-ui-sass 1.12.3.0 → 2.0.4.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (77) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +4 -0
  3. data/app/assets/javascripts/semantic-ui.js +1 -0
  4. data/app/assets/javascripts/semantic-ui/accordion.js +67 -53
  5. data/app/assets/javascripts/semantic-ui/api.js +395 -189
  6. data/app/assets/javascripts/semantic-ui/checkbox.js +322 -114
  7. data/app/assets/javascripts/semantic-ui/colorize.js +4 -2
  8. data/app/assets/javascripts/semantic-ui/dimmer.js +74 -50
  9. data/app/assets/javascripts/semantic-ui/dropdown.js +2046 -584
  10. data/app/assets/javascripts/semantic-ui/embed.js +662 -0
  11. data/app/assets/javascripts/semantic-ui/form.js +345 -163
  12. data/app/assets/javascripts/semantic-ui/modal.js +119 -90
  13. data/app/assets/javascripts/semantic-ui/nag.js +8 -9
  14. data/app/assets/javascripts/semantic-ui/popup.js +390 -228
  15. data/app/assets/javascripts/semantic-ui/progress.js +112 -103
  16. data/app/assets/javascripts/semantic-ui/rating.js +79 -55
  17. data/app/assets/javascripts/semantic-ui/search.js +305 -123
  18. data/app/assets/javascripts/semantic-ui/shape.js +94 -48
  19. data/app/assets/javascripts/semantic-ui/sidebar.js +84 -151
  20. data/app/assets/javascripts/semantic-ui/site.js +5 -5
  21. data/app/assets/javascripts/semantic-ui/state.js +4 -4
  22. data/app/assets/javascripts/semantic-ui/sticky.js +108 -35
  23. data/app/assets/javascripts/semantic-ui/tab.js +220 -125
  24. data/app/assets/javascripts/semantic-ui/transition.js +205 -171
  25. data/app/assets/javascripts/semantic-ui/visibility.js +220 -100
  26. data/app/assets/javascripts/semantic-ui/visit.js +6 -4
  27. data/app/assets/stylesheets/semantic-ui/collections/_breadcrumb.scss +17 -16
  28. data/app/assets/stylesheets/semantic-ui/collections/_form.scss +223 -121
  29. data/app/assets/stylesheets/semantic-ui/collections/_grid.scss +462 -448
  30. data/app/assets/stylesheets/semantic-ui/collections/_menu.scss +949 -665
  31. data/app/assets/stylesheets/semantic-ui/collections/_message.scss +134 -92
  32. data/app/assets/stylesheets/semantic-ui/collections/_table.scss +270 -208
  33. data/app/assets/stylesheets/semantic-ui/elements/_all.scss +1 -0
  34. data/app/assets/stylesheets/semantic-ui/elements/_button.scss +1357 -521
  35. data/app/assets/stylesheets/semantic-ui/elements/_container.scss +125 -0
  36. data/app/assets/stylesheets/semantic-ui/elements/_divider.scss +51 -31
  37. data/app/assets/stylesheets/semantic-ui/elements/_flag.scss +3 -3
  38. data/app/assets/stylesheets/semantic-ui/elements/_header.scss +270 -144
  39. data/app/assets/stylesheets/semantic-ui/elements/_icon.scss +241 -110
  40. data/app/assets/stylesheets/semantic-ui/elements/_image.scss +30 -16
  41. data/app/assets/stylesheets/semantic-ui/elements/_input.scss +88 -53
  42. data/app/assets/stylesheets/semantic-ui/elements/_label.scss +432 -281
  43. data/app/assets/stylesheets/semantic-ui/elements/_list.scss +172 -128
  44. data/app/assets/stylesheets/semantic-ui/elements/_loader.scss +16 -14
  45. data/app/assets/stylesheets/semantic-ui/elements/_rail.scss +15 -7
  46. data/app/assets/stylesheets/semantic-ui/elements/_reveal.scss +32 -13
  47. data/app/assets/stylesheets/semantic-ui/elements/_segment.scss +329 -212
  48. data/app/assets/stylesheets/semantic-ui/elements/_step.scss +291 -99
  49. data/app/assets/stylesheets/semantic-ui/globals/_reset.scss +2 -2
  50. data/app/assets/stylesheets/semantic-ui/globals/_site.scss +19 -18
  51. data/app/assets/stylesheets/semantic-ui/modules/_accordion.scss +17 -18
  52. data/app/assets/stylesheets/semantic-ui/modules/_all.scss +1 -0
  53. data/app/assets/stylesheets/semantic-ui/modules/_checkbox.scss +265 -161
  54. data/app/assets/stylesheets/semantic-ui/modules/_dimmer.scss +29 -15
  55. data/app/assets/stylesheets/semantic-ui/modules/_dropdown.scss +441 -156
  56. data/app/assets/stylesheets/semantic-ui/modules/_embed.scss +168 -0
  57. data/app/assets/stylesheets/semantic-ui/modules/_modal.scss +163 -85
  58. data/app/assets/stylesheets/semantic-ui/modules/_nag.scss +8 -8
  59. data/app/assets/stylesheets/semantic-ui/modules/_popup.scss +88 -23
  60. data/app/assets/stylesheets/semantic-ui/modules/_progress.scss +185 -129
  61. data/app/assets/stylesheets/semantic-ui/modules/_rating.scss +75 -60
  62. data/app/assets/stylesheets/semantic-ui/modules/_search.scss +99 -52
  63. data/app/assets/stylesheets/semantic-ui/modules/_shape.scss +11 -11
  64. data/app/assets/stylesheets/semantic-ui/modules/_sidebar.scss +16 -12
  65. data/app/assets/stylesheets/semantic-ui/modules/_sticky.scss +4 -4
  66. data/app/assets/stylesheets/semantic-ui/modules/_tab.scss +3 -3
  67. data/app/assets/stylesheets/semantic-ui/modules/_transition.scss +31 -39
  68. data/app/assets/stylesheets/semantic-ui/views/_ad.scss +3 -3
  69. data/app/assets/stylesheets/semantic-ui/views/_all.scss +1 -0
  70. data/app/assets/stylesheets/semantic-ui/views/_card.scss +204 -162
  71. data/app/assets/stylesheets/semantic-ui/views/_comment.scss +6 -6
  72. data/app/assets/stylesheets/semantic-ui/views/_feed.scss +51 -26
  73. data/app/assets/stylesheets/semantic-ui/views/_item.scss +62 -36
  74. data/app/assets/stylesheets/semantic-ui/views/_statistic.scss +265 -90
  75. data/lib/semantic/ui/sass/version.rb +2 -2
  76. data/semantic-ui-sass.gemspec +2 -2
  77. metadata +9 -6
@@ -1,9 +1,9 @@
1
1
  /*!
2
- * # Semantic UI 1.12.3 - Image
2
+ * # Semantic UI 2.0.4 - Image
3
3
  * http://github.com/semantic-org/semantic-ui/
4
4
  *
5
5
  *
6
- * Copyright 2014 Contributors
6
+ * Copyright 2015 Contributors
7
7
  * Released under the MIT license
8
8
  * http://opensource.org/licenses/MIT
9
9
  *
@@ -43,7 +43,7 @@ img.ui.image {
43
43
  .ui.disabled.images,
44
44
  .ui.disabled.image {
45
45
  cursor: default;
46
- opacity: 0.3;
46
+ opacity: 0.45;
47
47
  }
48
48
 
49
49
 
@@ -93,11 +93,9 @@ img.ui.image {
93
93
  ---------------*/
94
94
 
95
95
  .ui.rounded.images .image,
96
- .ui.rounded.images img,
97
- .ui.rounded.images svg,
98
- .ui.rounded.image img,
99
- .ui.rounded.image svg,
100
- .ui.rounded.image {
96
+ .ui.rounded.image,
97
+ .ui.rounded.images .image > *,
98
+ .ui.rounded.image > * {
101
99
  border-radius: 0.3125em;
102
100
  }
103
101
 
@@ -123,11 +121,9 @@ img.ui.bordered.image {
123
121
  overflow: hidden;
124
122
  }
125
123
  .ui.circular.images .image,
126
- .ui.circular.images img,
127
- .ui.circular.images svg,
128
- .ui.circular.image img,
129
- .ui.circular.image svg,
130
- .ui.circular.image {
124
+ .ui.circular.image,
125
+ .ui.circular.images .image > *,
126
+ .ui.circular.image > * {
131
127
  border-radius: 500rem;
132
128
  }
133
129
 
@@ -158,11 +154,29 @@ img.ui.bordered.image {
158
154
  .ui.avatar.image {
159
155
  margin-right: 0.25em;
160
156
  display: inline-block;
161
- width: 2.5em;
162
- height: 2.5em;
157
+ width: 2em;
158
+ height: 2em;
163
159
  border-radius: 500rem;
164
160
  }
165
161
 
162
+ /*-------------------
163
+ Spaced
164
+ --------------------*/
165
+
166
+ .ui.spaced.image {
167
+ display: inline-block !important;
168
+ margin-left: 0.5em;
169
+ margin-right: 0.5em;
170
+ }
171
+ .ui[class*="left spaced"].image {
172
+ margin-left: 0.5em;
173
+ margin-right: 0em;
174
+ }
175
+ .ui[class*="right spaced"].image {
176
+ margin-left: 0em;
177
+ margin-right: 0.5em;
178
+ }
179
+
166
180
  /*-------------------
167
181
  Floated
168
182
  --------------------*/
@@ -198,7 +212,7 @@ img.ui.bordered.image {
198
212
  .ui.mini.images img,
199
213
  .ui.mini.images svg,
200
214
  .ui.mini.image {
201
- width: 20px;
215
+ width: 35px;
202
216
  height: auto;
203
217
  font-size: 0.71428571rem;
204
218
  }
@@ -1,9 +1,9 @@
1
1
  /*!
2
- * # Semantic UI 1.12.3 - Input
2
+ * # Semantic UI 2.0.4 - Input
3
3
  * http://github.com/semantic-org/semantic-ui/
4
4
  *
5
5
  *
6
- * Copyright 2014 Contributors
6
+ * Copyright 2015 Contributors
7
7
  * Released under the MIT license
8
8
  * http://opensource.org/licenses/MIT
9
9
  *
@@ -25,27 +25,27 @@
25
25
  display: -webkit-inline-flex;
26
26
  display: -ms-inline-flexbox;
27
27
  display: inline-flex;
28
- color: rgba(0, 0, 0, 0.8);
28
+ color: rgba(0, 0, 0, 0.87);
29
29
  }
30
30
  .ui.input input {
31
31
  margin: 0em;
32
32
  max-width: 100%;
33
- -webkit-box-flex: 0;
34
- -webkit-flex: 0 1 auto;
35
- -ms-flex: 0 1 auto;
36
- flex: 0 1 auto;
33
+ -webkit-box-flex: 1;
34
+ -webkit-flex: 1 0 auto;
35
+ -ms-flex: 1 0 auto;
36
+ flex: 1 0 auto;
37
37
  outline: none;
38
38
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
39
39
  text-align: left;
40
40
  line-height: 1.2142em;
41
41
  font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
42
- padding: 0.67861em 1em;
42
+ padding: 0.67861429em 1em;
43
43
  background: #ffffff;
44
- border: 1px solid rgba(0, 0, 0, 0.15);
45
- color: rgba(0, 0, 0, 0.8);
46
- border-radius: 0.2857rem;
47
- -webkit-transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
48
- transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
44
+ border: 1px solid rgba(34, 36, 38, 0.15);
45
+ color: rgba(0, 0, 0, 0.87);
46
+ border-radius: 0.28571429rem;
47
+ -webkit-transition: background-color 0.1s ease, box-shadow 0.1s ease, border-color 0.1s ease;
48
+ transition: background-color 0.1s ease, box-shadow 0.1s ease, border-color 0.1s ease;
49
49
  box-shadow: none;
50
50
  }
51
51
 
@@ -79,7 +79,7 @@
79
79
  .ui.input.down input {
80
80
  border-color: rgba(0, 0, 0, 0.3);
81
81
  background: #fafafa;
82
- color: rgba(0, 0, 0, 0.8);
82
+ color: rgba(0, 0, 0, 0.87);
83
83
  box-shadow: none;
84
84
  }
85
85
 
@@ -92,9 +92,9 @@
92
92
  content: '';
93
93
  top: 50%;
94
94
  left: 50%;
95
- margin: -0.64285em 0em 0em -0.64285em;
96
- width: 1.2857em;
97
- height: 1.2857em;
95
+ margin: -0.64285714em 0em 0em -0.64285714em;
96
+ width: 1.28571429em;
97
+ height: 1.28571429em;
98
98
  border-radius: 500rem;
99
99
  border: 0.2em solid rgba(0, 0, 0, 0.1);
100
100
  }
@@ -103,15 +103,15 @@
103
103
  content: '';
104
104
  top: 50%;
105
105
  left: 50%;
106
- margin: -0.64285em 0em 0em -0.64285em;
107
- width: 1.2857em;
108
- height: 1.2857em;
106
+ margin: -0.64285714em 0em 0em -0.64285714em;
107
+ width: 1.28571429em;
108
+ height: 1.28571429em;
109
109
  -webkit-animation: button-spin 0.6s linear;
110
110
  animation: button-spin 0.6s linear;
111
111
  -webkit-animation-iteration-count: infinite;
112
112
  animation-iteration-count: infinite;
113
113
  border-radius: 500rem;
114
- border-color: #aaaaaa transparent transparent;
114
+ border-color: #767676 transparent transparent;
115
115
  border-style: solid;
116
116
  border-width: 0.2em;
117
117
  box-shadow: 0px 0px 0px 1px transparent;
@@ -123,22 +123,22 @@
123
123
 
124
124
  .ui.input.focus input,
125
125
  .ui.input input:focus {
126
- border-color: rgba(39, 41, 43, 0.3);
126
+ border-color: rgba(34, 36, 38, 0.35);
127
127
  background: #ffffff;
128
128
  color: rgba(0, 0, 0, 0.8);
129
129
  box-shadow: none;
130
130
  }
131
131
  .ui.input.focus input::-webkit-input-placeholder,
132
132
  .ui.input input:focus input::-webkit-input-placeholder {
133
- color: rgba(0, 0, 0, 0.8);
133
+ color: rgba(0, 0, 0, 0.87);
134
134
  }
135
135
  .ui.input.focus input::-moz-placeholder,
136
136
  .ui.input input:focus input::-moz-placeholder {
137
- color: rgba(0, 0, 0, 0.8);
137
+ color: rgba(0, 0, 0, 0.87);
138
138
  }
139
139
  .ui.input.focus input::-ms-input-placeholder,
140
140
  .ui.input input:focus input::-ms-input-placeholder {
141
- color: rgba(0, 0, 0, 0.8);
141
+ color: rgba(0, 0, 0, 0.87);
142
142
  }
143
143
 
144
144
  /*--------------------
@@ -146,9 +146,9 @@
146
146
  ---------------------*/
147
147
 
148
148
  .ui.input.error input {
149
- background-color: #fff0f0;
150
- border-color: #dbb1b1;
151
- color: #d95c5c;
149
+ background-color: #fff6f6;
150
+ border-color: #e0b4b4;
151
+ color: #db2828;
152
152
  box-shadow: none;
153
153
  }
154
154
 
@@ -193,7 +193,7 @@
193
193
 
194
194
  /* Transparent Icon */
195
195
  .ui.transparent.icon.input > i.icon {
196
- width: 1.25em;
196
+ width: 1.1em;
197
197
  }
198
198
  .ui.transparent.icon.input > input {
199
199
  padding-left: 0em !important;
@@ -228,19 +228,23 @@
228
228
  .ui.icon.input > i.icon {
229
229
  cursor: default;
230
230
  position: absolute;
231
+ line-height: 1;
231
232
  text-align: center;
232
233
  top: 0px;
233
234
  right: 0px;
234
235
  margin: 0em;
235
236
  height: 100%;
236
- width: 2.82142em;
237
+ width: 2.67142857em;
237
238
  opacity: 0.5;
238
- border-radius: 0em 0.2857rem 0.2857rem 0em;
239
+ border-radius: 0em 0.28571429rem 0.28571429rem 0em;
239
240
  -webkit-transition: opacity 0.3s ease;
240
241
  transition: opacity 0.3s ease;
241
242
  }
243
+ .ui.icon.input > i.icon:not(.link) {
244
+ pointer-events: none;
245
+ }
242
246
  .ui.icon.input input {
243
- padding-right: 2.82142em !important;
247
+ padding-right: 2.67142857em !important;
244
248
  }
245
249
  .ui.icon.input > i.icon:before,
246
250
  .ui.icon.input > i.icon:after {
@@ -263,14 +267,14 @@
263
267
  .ui[class*="left icon"].input > i.icon {
264
268
  right: auto;
265
269
  left: 1px;
266
- border-radius: 0.2857rem 0em 0em 0.2857rem;
270
+ border-radius: 0.28571429rem 0em 0em 0.28571429rem;
267
271
  }
268
272
  .ui[class*="left icon"].input > i.circular.icon {
269
273
  right: auto;
270
274
  left: 0.5em;
271
275
  }
272
276
  .ui[class*="left icon"].input > input {
273
- padding-left: 2.82142em !important;
277
+ padding-left: 2.67142857em !important;
274
278
  padding-right: 1em !important;
275
279
  }
276
280
 
@@ -291,14 +295,14 @@
291
295
  -ms-flex: 0 0 auto;
292
296
  flex: 0 0 auto;
293
297
  margin: 0;
294
- font-size: 1rem;
298
+ font-size: 1em;
295
299
  }
296
300
  .ui.labeled.input > .label:not(.corner) {
297
- padding-top: 0.78571em;
298
- padding-bottom: 0.78571em;
301
+ padding-top: 0.78571429em;
302
+ padding-bottom: 0.78571429em;
299
303
  }
300
304
 
301
- /* Label on Left */
305
+ /* Regular Label on Left */
302
306
  .ui.labeled.input:not([class*="corner labeled"]):not([class*="right labeled"]) > input {
303
307
  border-left: none;
304
308
  border-top-left-radius: 0px;
@@ -309,7 +313,7 @@
309
313
  border-bottom-right-radius: 0px;
310
314
  }
311
315
 
312
- /* Label on Right */
316
+ /* Regular Label on Right */
313
317
  .ui[class*="right labeled"].input > input {
314
318
  border-right: none;
315
319
  border-top-right-radius: 0px !important;
@@ -324,14 +328,14 @@
324
328
  .ui.labeled.input .corner.label {
325
329
  top: 1px;
326
330
  right: 1px;
327
- font-size: 0.75em;
328
- border-radius: 0em 0.2857rem 0em 0em;
329
- }
330
- .ui.labeled.input input {
331
- padding-right: 2.5em !important;
331
+ font-size: 0.64285714em;
332
+ border-radius: 0em 0.28571429rem 0em 0em;
332
333
  }
333
334
 
334
335
  /* Spacing with corner label */
336
+ .ui[class*="corner labeled"]:not(.left).labeled.input input {
337
+ padding-right: 2.5em !important;
338
+ }
335
339
  .ui[class*="corner labeled"].icon.input:not(.left) > input {
336
340
  padding-right: 3.25em !important;
337
341
  }
@@ -339,6 +343,27 @@
339
343
  margin-right: 1.25em;
340
344
  }
341
345
 
346
+ /* Left Labeled */
347
+ .ui[class*="corner labeled"].left.labeled.input input {
348
+ padding-left: 2.5em !important;
349
+ }
350
+ .ui[class*="corner labeled"].icon.input.left > input {
351
+ padding-left: 3.25em !important;
352
+ }
353
+ .ui[class*="corner labeled"].icon.input.left > .icon {
354
+ margin-left: 1.25em;
355
+ }
356
+
357
+ /* Corner Label Position */
358
+ .ui.input > .ui.corner.label {
359
+ top: 1px;
360
+ right: 1px;
361
+ }
362
+ .ui.input > .ui.left.corner.label {
363
+ right: auto;
364
+ left: 1px;
365
+ }
366
+
342
367
  /*--------------------
343
368
  Action
344
369
  ---------------------*/
@@ -360,8 +385,8 @@
360
385
  }
361
386
  .ui.action.input > .button,
362
387
  .ui.action.input > .buttons > .button {
363
- padding-top: 0.78571em;
364
- padding-bottom: 0.78571em;
388
+ padding-top: 0.78571429em;
389
+ padding-bottom: 0.78571429em;
365
390
  margin: 0;
366
391
  }
367
392
 
@@ -371,22 +396,32 @@
371
396
  border-top-right-radius: 0px !important;
372
397
  border-bottom-right-radius: 0px !important;
373
398
  }
399
+ .ui.action.input:not([class*="left action"]) > .dropdown,
374
400
  .ui.action.input:not([class*="left action"]) > .button,
375
401
  .ui.action.input:not([class*="left action"]) > .buttons > .button {
376
- border-top-left-radius: 0px;
377
- border-bottom-left-radius: 0px;
402
+ border-radius: 0px;
403
+ }
404
+ .ui.action.input:not([class*="left action"]) > .dropdown:last-child,
405
+ .ui.action.input:not([class*="left action"]) > .button:last-child,
406
+ .ui.action.input:not([class*="left action"]) > .buttons:last-child > .button {
407
+ border-radius: 0px 0.28571429rem 0.28571429rem 0px;
378
408
  }
379
409
 
380
410
  /* Button on Left */
411
+ .ui[class*="left action"].input > .dropdown,
381
412
  .ui[class*="left action"].input > .button,
382
413
  .ui[class*="left action"].input > .buttons > .button {
383
- border-top-right-radius: 0px;
384
- border-bottom-right-radius: 0px;
414
+ border-radius: 0px;
415
+ }
416
+ .ui[class*="left action"].input > .dropdown:first-child,
417
+ .ui[class*="left action"].input > .button:first-child,
418
+ .ui[class*="left action"].input > .buttons:first-child > .button {
419
+ border-radius: 0.28571429rem 0px 0px 0.28571429rem;
385
420
  }
386
421
  .ui[class*="left action"].input > input {
387
422
  border-left: none;
388
- border-top-left-radius: 0px;
389
- border-bottom-left-radius: 0px;
423
+ border-top-left-radius: 0px !important;
424
+ border-bottom-left-radius: 0px !important;
390
425
  }
391
426
 
392
427
  /*--------------------
@@ -410,7 +445,7 @@
410
445
  display: flex;
411
446
  }
412
447
  .ui.fluid.input > input {
413
- width: 100% !important;
448
+ width: 0px !important;
414
449
  }
415
450
 
416
451
  /*--------------------
@@ -1,9 +1,9 @@
1
1
  /*!
2
- * # Semantic UI 1.12.3 - Label
2
+ * # Semantic UI 2.0.4 - Label
3
3
  * http://github.com/semantic-org/semantic-ui/
4
4
  *
5
5
  *
6
- * Copyright 2014 Contributors
6
+ * Copyright 2015 Contributors
7
7
  * Released under the MIT license
8
8
  * http://opensource.org/licenses/MIT
9
9
  *
@@ -16,20 +16,20 @@
16
16
 
17
17
  .ui.label {
18
18
  display: inline-block;
19
- vertical-align: baseline;
19
+ white-space: nowrap;
20
20
  line-height: 1;
21
- margin: 0em 0.125em;
21
+ vertical-align: baseline;
22
+ margin: 0em 0.14285714em;
22
23
  background-color: #e8e8e8;
23
24
  border-color: #e8e8e8;
24
25
  background-image: none;
25
- padding: 0.6em 0.8em;
26
+ padding: 0.5833em 0.833em;
26
27
  color: rgba(0, 0, 0, 0.6);
27
28
  text-transform: none;
28
29
  font-weight: bold;
29
- border-radius: 0.2857rem;
30
- box-sizing: border-box;
31
- -webkit-transition: background 0.2s ease;
32
- transition: background 0.2s ease;
30
+ border-radius: 0.28571429rem;
31
+ -webkit-transition: background 0.1s ease;
32
+ transition: background 0.1s ease;
33
33
  }
34
34
  .ui.label:first-child {
35
35
  margin-left: 0em;
@@ -44,46 +44,54 @@ a.ui.label {
44
44
  }
45
45
 
46
46
  /* Inside Link */
47
- .ui.label a {
47
+ .ui.label > a {
48
48
  cursor: pointer;
49
49
  color: inherit;
50
- opacity: 0.8;
51
- -webkit-transition: 0.2s opacity ease;
52
- transition: 0.2s opacity ease;
50
+ opacity: 0.5;
51
+ -webkit-transition: 0.1s opacity ease;
52
+ transition: 0.1s opacity ease;
53
53
  }
54
- .ui.label a:hover {
54
+ .ui.label > a:hover {
55
55
  opacity: 1;
56
56
  }
57
57
 
58
+ /* Image */
59
+ .ui.label > img {
60
+ width: auto !important;
61
+ vertical-align: middle;
62
+ height: 2.1666em !important;
63
+ }
64
+
58
65
  /* Icon */
59
- .ui.label .icon {
66
+ .ui.label > .icon {
60
67
  width: auto;
61
68
  margin: 0em 0.75em 0em 0em;
62
69
  }
63
70
 
64
71
  /* Detail */
65
- .ui.label .detail {
72
+ .ui.label > .detail {
66
73
  display: inline-block;
67
74
  vertical-align: top;
68
75
  font-weight: bold;
69
76
  margin-left: 1em;
70
77
  opacity: 0.8;
71
78
  }
72
- .ui.label .detail .icon {
79
+ .ui.label > .detail .icon {
73
80
  margin: 0em 0.25em 0em 0em;
74
81
  }
75
82
 
76
83
  /* Removable label */
77
- .ui.label .close.icon,
78
- .ui.label .delete.icon {
84
+ .ui.label > .close.icon,
85
+ .ui.label > .delete.icon {
79
86
  cursor: pointer;
80
87
  margin-right: 0em;
81
88
  margin-left: 0.5em;
82
- opacity: 0.8;
83
- -webkit-transition: background 0.2s ease;
84
- transition: background 0.2s ease;
89
+ font-size: 0.92857143em;
90
+ opacity: 0.5;
91
+ -webkit-transition: background 0.1s ease;
92
+ transition: background 0.1s ease;
85
93
  }
86
- .ui.label .delete.icon:hover {
94
+ .ui.label > .delete.icon:hover {
87
95
  opacity: 1;
88
96
  }
89
97
 
@@ -91,14 +99,17 @@ a.ui.label {
91
99
  Group
92
100
  --------------------*/
93
101
 
94
- .ui.labels .label {
95
- margin: 0em 0.5em 0.75em 0em;
102
+ .ui.labels > .label {
103
+ margin: 0em 0.5em 0.5em 0em;
96
104
  }
97
105
 
98
106
  /*-------------------
99
107
  Coupling
100
108
  --------------------*/
101
109
 
110
+ .ui.header > .ui.label {
111
+ margin-top: -0.29165em;
112
+ }
102
113
 
103
114
  /* Remove border radius on attached segment */
104
115
  .ui.attached.segment > .ui.top.left.attached.label,
@@ -138,22 +149,22 @@ a.ui.label {
138
149
  vertical-align: baseline;
139
150
  text-transform: none;
140
151
  background: #e8e8e8;
141
- padding: 0.6em 0.8em 0.6em 0.5em;
142
- border-radius: 0.2857rem;
152
+ padding: 0.5833em 0.833em 0.5833em 0.5em;
153
+ border-radius: 0.28571429rem;
143
154
  box-shadow: none;
144
155
  }
145
156
  .ui.image.label img {
146
157
  display: inline-block;
147
158
  vertical-align: top;
148
- height: 2.2em;
149
- margin: -0.6em 0.5em -0.6em -0.5em;
150
- border-radius: 0.2857rem;
159
+ height: 2.1666em;
160
+ margin: -0.5833em 0.5em -0.5833em -0.5em;
161
+ border-radius: 0.28571429rem 0em 0em 0.28571429rem;
151
162
  }
152
163
  .ui.image.label .detail {
153
164
  background: rgba(0, 0, 0, 0.1);
154
- margin: -0.6em -0.8em -0.6em 0.5em;
155
- padding: 0.6em 0.8em;
156
- border-radius: 0em 0.2857rem 0.2857rem 0em;
165
+ margin: -0.5833em -0.833em -0.5833em 0.5em;
166
+ padding: 0.5833em 0.833em;
167
+ border-radius: 0em 0.28571429rem 0.28571429rem 0em;
157
168
  }
158
169
 
159
170
  /*-------------------
@@ -166,7 +177,7 @@ a.ui.label {
166
177
  position: relative;
167
178
  padding-left: 1.5em;
168
179
  padding-right: 1.5em;
169
- border-radius: 0em 0.2857rem 0.2857rem 0em;
180
+ border-radius: 0em 0.28571429rem 0.28571429rem 0em;
170
181
  }
171
182
  .ui.tag.labels .label:before,
172
183
  .ui.tag.label:before {
@@ -181,8 +192,8 @@ a.ui.label {
181
192
  background-image: none;
182
193
  width: 1.56em;
183
194
  height: 1.56em;
184
- -webkit-transition: background 0.2s ease;
185
- transition: background 0.2s ease;
195
+ -webkit-transition: background 0.1s ease;
196
+ transition: background 0.1s ease;
186
197
  }
187
198
  .ui.tag.labels .label:after,
188
199
  .ui.tag.label:after {
@@ -209,11 +220,11 @@ a.ui.label {
209
220
  margin: 0em;
210
221
  padding: 0em;
211
222
  text-align: center;
212
- width: 3.25em;
213
- height: 3.25em;
223
+ width: 4em;
224
+ height: 4em;
214
225
  z-index: 1;
215
- -webkit-transition: border-color 0.2s ease;
216
- transition: border-color 0.2s ease;
226
+ -webkit-transition: border-color 0.1s ease;
227
+ transition: border-color 0.1s ease;
217
228
  }
218
229
 
219
230
  /* Icon Label */
@@ -230,18 +241,19 @@ a.ui.label {
230
241
  height: 0em;
231
242
  background-color: transparent !important;
232
243
  border-top: 0em solid transparent;
233
- border-right: 3.25em solid transparent;
234
- border-bottom: 3.25em solid transparent;
244
+ border-right: 4em solid transparent;
245
+ border-bottom: 4em solid transparent;
235
246
  border-left: 0em solid transparent;
236
247
  border-right-color: inherit;
237
- -webkit-transition: border-color 0.2s ease;
238
- transition: border-color 0.2s ease;
248
+ -webkit-transition: border-color 0.1s ease;
249
+ transition: border-color 0.1s ease;
239
250
  }
240
251
  .ui.corner.label .icon {
252
+ cursor: default;
241
253
  position: relative;
242
- top: 0.4em;
243
- left: 0.75em;
244
- font-size: 1em;
254
+ top: 0.64285714em;
255
+ left: 0.78571429em;
256
+ font-size: 1.14285714em;
245
257
  margin: 0em;
246
258
  }
247
259
 
@@ -252,14 +264,14 @@ a.ui.label {
252
264
  left: 0em;
253
265
  }
254
266
  .ui.left.corner.label:after {
255
- border-top: 3.25em solid transparent;
256
- border-right: 3.25em solid transparent;
267
+ border-top: 4em solid transparent;
268
+ border-right: 4em solid transparent;
257
269
  border-bottom: 0em solid transparent;
258
270
  border-left: 0em solid transparent;
259
271
  border-top-color: inherit;
260
272
  }
261
273
  .ui.left.corner.label .icon {
262
- left: -0.75em;
274
+ left: -0.78571429em;
263
275
  }
264
276
 
265
277
  /* Segment */
@@ -272,16 +284,6 @@ a.ui.label {
272
284
  left: -1px;
273
285
  }
274
286
 
275
- /* Input */
276
- .ui.input > .ui.corner.label {
277
- top: 1px;
278
- right: 1px;
279
- }
280
- .ui.input > .ui.right.corner.label {
281
- right: auto;
282
- left: 1px;
283
- }
284
-
285
287
  /*-------------------
286
288
  Ribbon
287
289
  --------------------*/
@@ -292,7 +294,7 @@ a.ui.label {
292
294
  min-width: -webkit-max-content;
293
295
  min-width: -moz-max-content;
294
296
  min-width: max-content;
295
- border-radius: 0em 0.2857rem 0.2857rem 0em;
297
+ border-radius: 0em 0.28571429rem 0.28571429rem 0em;
296
298
  border-color: rgba(0, 0, 0, 0.15);
297
299
  }
298
300
  .ui.ribbon.label:after {
@@ -309,14 +311,26 @@ a.ui.label {
309
311
  height: 0em;
310
312
  }
311
313
 
314
+ /* Positioning */
315
+ .ui.ribbon.label {
316
+ left: calc( -1rem - 1.2em );
317
+ margin-right: -1.2em;
318
+ padding-left: calc( 1rem + 1.2em );
319
+ padding-right: 1.2em;
320
+ }
321
+ .ui[class*="right ribbon"].label {
322
+ left: calc(100% + 1rem + 1.2em );
323
+ padding-left: 1.2em;
324
+ padding-right: calc( 1rem + 1.2em );
325
+ }
326
+
312
327
  /* Right Ribbon */
313
328
  .ui[class*="right ribbon"].label {
314
329
  text-align: left;
315
330
  -webkit-transform: translateX(-100%);
316
331
  -ms-transform: translateX(-100%);
317
332
  transform: translateX(-100%);
318
- border-radius: 0.2857rem 0em 0em 0.2857rem;
319
- padding-left: 0.8em;
333
+ border-radius: 0.28571429rem 0em 0em 0.28571429rem;
320
334
  }
321
335
  .ui[class*="right ribbon"].label:after {
322
336
  left: auto;
@@ -327,21 +341,6 @@ a.ui.label {
327
341
  border-top-color: inherit;
328
342
  }
329
343
 
330
- /* Positioning */
331
- .ui.ribbon.label {
332
- left: -webkit-calc( -1rem - 1.2em );
333
- left: calc( -1rem - 1.2em );
334
- margin-right: -1.2em;
335
- padding-left: -webkit-calc( 1rem + 1.2em );
336
- padding-left: calc( 1rem + 1.2em );
337
- }
338
- .ui[class*="right ribbon"].label {
339
- left: -webkit-calc(100% + 1rem + 1.2em );
340
- left: calc(100% + 1rem + 1.2em );
341
- padding-right: -webkit-calc( 1rem + 1.2em );
342
- padding-right: calc( 1rem + 1.2em );
343
- }
344
-
345
344
  /* Inside Image */
346
345
  .ui.image > .ribbon.label,
347
346
  .ui.card .image > .ribbon.label {
@@ -350,18 +349,12 @@ a.ui.label {
350
349
  }
351
350
  .ui.card .image > .ui.ribbon.label,
352
351
  .ui.image > .ui.ribbon.label {
353
- left: -webkit-calc( 0.05rem - 1.2em );
354
352
  left: calc( 0.05rem - 1.2em );
355
- padding-left: -webkit-calc( -0.05rem + 1.2em );
356
- padding-left: calc( -0.05rem + 1.2em );
357
353
  }
358
354
  .ui.card .image > .ui[class*="right ribbon"].label,
359
355
  .ui.image > .ui[class*="right ribbon"].label {
360
- left: -webkit-calc(100% + -0.05rem + 1.2em );
361
356
  left: calc(100% + -0.05rem + 1.2em );
362
- padding-left: 0.8em;
363
- padding-right: -webkit-calc( -0.05rem + 1.2em );
364
- padding-right: calc( -0.05rem + 1.2em );
357
+ padding-left: 0.833em;
365
358
  }
366
359
 
367
360
  /*-------------------
@@ -376,29 +369,29 @@ a.ui.label {
376
369
  top: 0em;
377
370
  left: 0em;
378
371
  padding: 0.75em 1em;
379
- border-radius: 0.2857rem 0.2857rem 0em 0em;
372
+ border-radius: 0.21428571rem 0.21428571rem 0em 0em;
380
373
  }
381
374
  .ui.bottom.attached.label {
382
375
  top: auto;
383
376
  bottom: 0em;
384
- border-radius: 0em 0em 0.2857rem 0.2857rem;
377
+ border-radius: 0em 0em 0.21428571rem 0.21428571rem;
385
378
  }
386
379
  .ui.top.left.attached.label {
387
380
  width: auto;
388
381
  margin-top: 0em !important;
389
- border-radius: 0.2857rem 0em 0.2857rem 0em;
382
+ border-radius: 0.21428571rem 0em 0.28571429rem 0em;
390
383
  }
391
384
  .ui.top.right.attached.label {
392
385
  width: auto;
393
386
  left: auto;
394
387
  right: 0em;
395
- border-radius: 0em 0.2857rem 0em 0.2857rem;
388
+ border-radius: 0em 0.21428571rem 0em 0.28571429rem;
396
389
  }
397
390
  .ui.bottom.left.attached.label {
398
391
  width: auto;
399
392
  top: auto;
400
393
  bottom: 0em;
401
- border-radius: 0em 0.2857rem 0em 0.2857rem;
394
+ border-radius: 0em 0.28571429rem 0em 0.21428571rem;
402
395
  }
403
396
  .ui.bottom.right.attached.label {
404
397
  top: auto;
@@ -406,7 +399,7 @@ a.ui.label {
406
399
  left: auto;
407
400
  right: 0em;
408
401
  width: auto;
409
- border-radius: 0.2857rem 0em 0.2857rem 0em;
402
+ border-radius: 0.28571429rem 0em 0.21428571rem 0em;
410
403
  }
411
404
 
412
405
 
@@ -441,6 +434,40 @@ a.ui.label:hover:before {
441
434
  color: rgba(0, 0, 0, 0.8);
442
435
  }
443
436
 
437
+ /*-------------------
438
+ Active
439
+ --------------------*/
440
+
441
+ .ui.active.label {
442
+ background-color: #d0d0d0;
443
+ border-color: #d0d0d0;
444
+ background-image: none;
445
+ color: rgba(0, 0, 0, 0.95);
446
+ }
447
+ .ui.active.label:before {
448
+ background-color: #d0d0d0;
449
+ background-image: none;
450
+ color: rgba(0, 0, 0, 0.95);
451
+ }
452
+
453
+ /*-------------------
454
+ Active Hover
455
+ --------------------*/
456
+
457
+ a.ui.labels .active.label:hover,
458
+ a.ui.active.label:hover {
459
+ background-color: #c8c8c8;
460
+ border-color: #c8c8c8;
461
+ background-image: none;
462
+ color: rgba(0, 0, 0, 0.95);
463
+ }
464
+ .ui.labels a.active.label:ActiveHover:before,
465
+ a.ui.active.label:ActiveHover:before {
466
+ background-color: #c8c8c8;
467
+ background-image: none;
468
+ color: rgba(0, 0, 0, 0.95);
469
+ }
470
+
444
471
  /*-------------------
445
472
  Visible
446
473
  --------------------*/
@@ -470,296 +497,420 @@ a.ui.label:hover:before {
470
497
  --------------------*/
471
498
 
472
499
 
473
- /*--- Black ---*/
500
+ /*--- Red ---*/
474
501
 
475
- .ui.black.labels .label,
476
- .ui.black.label {
477
- background-color: #1b1c1d !important;
478
- border-color: #1b1c1d !important;
502
+ .ui.red.labels .label,
503
+ .ui.red.label {
504
+ background-color: #db2828 !important;
505
+ border-color: #db2828 !important;
479
506
  color: #ffffff !important;
480
507
  }
481
- .ui.labels .black.label:before,
482
- .ui.black.labels .label:before,
483
- .ui.black.label:before {
484
- background-color: #1b1c1d !important;
508
+ .ui.labels .red.label:before,
509
+ .ui.red.labels .label:before,
510
+ .ui.red.label:before {
511
+ background-color: #db2828 !important;
485
512
  }
486
- a.ui.black.labels .label:hover,
487
- a.ui.black.label:hover {
488
- background-color: #1b1c1d !important;
489
- border-color: #1b1c1d !important;
513
+ .ui.red.corner.label,
514
+ .ui.red.corner.label:hover {
515
+ background-color: transparent !important;
490
516
  }
491
- .ui.labels a.black.label:hover:before,
492
- .ui.black.labels a.label:hover:before,
493
- a.ui.black.label:hover:before {
494
- background-color: #1b1c1d !important;
517
+ a.ui.red.labels .label:hover,
518
+ a.ui.red.label:hover {
519
+ background-color: #d01919 !important;
520
+ border-color: #d01919 !important;
521
+ color: #ffffff !important;
495
522
  }
496
- .ui.black.corner.label,
497
- .ui.black.corner.label:hover {
523
+ .ui.labels a.red.label:hover:before,
524
+ .ui.red.labels a.label:hover:before,
525
+ a.ui.red.label:hover:before {
526
+ background-color: #d01919 !important;
527
+ }
528
+ .ui.red.ribbon.label {
529
+ border-color: #b21e1e !important;
530
+ }
531
+
532
+ /*--- Orange ---*/
533
+
534
+ .ui.orange.labels .label,
535
+ .ui.orange.label {
536
+ background-color: #f2711c !important;
537
+ border-color: #f2711c !important;
538
+ color: #ffffff !important;
539
+ }
540
+ .ui.labels .orange.label:before,
541
+ .ui.orange.labels .label:before,
542
+ .ui.orange.label:before {
543
+ background-color: #f2711c !important;
544
+ }
545
+ .ui.orange.corner.label,
546
+ .ui.orange.corner.label:hover {
498
547
  background-color: transparent !important;
499
548
  }
500
- .ui.black.ribbon.label {
501
- border-color: #020203 !important;
549
+ a.ui.orange.labels .label:hover,
550
+ a.ui.orange.label:hover {
551
+ background-color: #f26202 !important;
552
+ border-color: #f26202 !important;
553
+ color: #ffffff !important;
554
+ }
555
+ .ui.labels a.orange.label:hover:before,
556
+ .ui.orange.labels a.label:hover:before,
557
+ a.ui.orange.label:hover:before {
558
+ background-color: #f26202 !important;
559
+ }
560
+ .ui.orange.ribbon.label {
561
+ border-color: #cf590c !important;
502
562
  }
503
563
 
504
- /*--- Blue ---*/
564
+ /*--- Yellow ---*/
505
565
 
506
- .ui.blue.labels .label,
507
- .ui.blue.label {
508
- background-color: #3b83c0 !important;
509
- border-color: #3b83c0 !important;
566
+ .ui.yellow.labels .label,
567
+ .ui.yellow.label {
568
+ background-color: #fbbd08 !important;
569
+ border-color: #fbbd08 !important;
510
570
  color: #ffffff !important;
511
571
  }
512
- .ui.labels .blue.label:before,
513
- .ui.blue.labels .label:before,
514
- .ui.blue.label:before {
515
- background-color: #3b83c0 !important;
572
+ .ui.labels .yellow.label:before,
573
+ .ui.yellow.labels .label:before,
574
+ .ui.yellow.label:before {
575
+ background-color: #fbbd08 !important;
516
576
  }
517
- a.ui.blue.labels .label:hover,
518
- .ui.blue.labels a.label:hover,
519
- a.ui.blue.label:hover {
520
- background-color: #458ac6 !important;
521
- border-color: #458ac6 !important;
577
+ .ui.yellow.corner.label,
578
+ .ui.yellow.corner.label:hover {
579
+ background-color: transparent !important;
580
+ }
581
+ a.ui.yellow.labels .label:hover,
582
+ a.ui.yellow.label:hover {
583
+ background-color: #eaae00 !important;
584
+ border-color: #eaae00 !important;
522
585
  color: #ffffff !important;
523
586
  }
524
- .ui.labels a.blue.label:hover:before,
525
- .ui.blue.labels a.label:hover:before,
526
- a.ui.blue.label:hover:before {
527
- background-color: #458ac6 !important;
587
+ .ui.labels a.yellow.label:hover:before,
588
+ .ui.yellow.labels a.label:hover:before,
589
+ a.ui.yellow.label:hover:before {
590
+ background-color: #eaae00 !important;
528
591
  }
529
- .ui.blue.corner.label,
530
- .ui.blue.corner.label:hover {
592
+ .ui.yellow.ribbon.label {
593
+ border-color: #cd9903 !important;
594
+ }
595
+
596
+ /*--- Olive ---*/
597
+
598
+ .ui.olive.labels .label,
599
+ .ui.olive.label {
600
+ background-color: #b5cc18 !important;
601
+ border-color: #b5cc18 !important;
602
+ color: #ffffff !important;
603
+ }
604
+ .ui.labels .olive.label:before,
605
+ .ui.olive.labels .label:before,
606
+ .ui.olive.label:before {
607
+ background-color: #b5cc18 !important;
608
+ }
609
+ .ui.olive.corner.label,
610
+ .ui.olive.corner.label:hover {
531
611
  background-color: transparent !important;
532
612
  }
533
- .ui.blue.ribbon.label {
534
- border-color: #2f6899 !important;
613
+ a.ui.olive.labels .label:hover,
614
+ a.ui.olive.label:hover {
615
+ background-color: #a7bd0d !important;
616
+ border-color: #a7bd0d !important;
617
+ color: #ffffff !important;
618
+ }
619
+ .ui.labels a.olive.label:hover:before,
620
+ .ui.olive.labels a.label:hover:before,
621
+ a.ui.olive.label:hover:before {
622
+ background-color: #a7bd0d !important;
623
+ }
624
+ .ui.olive.ribbon.label {
625
+ border-color: #198f35 !important;
535
626
  }
536
627
 
537
628
  /*--- Green ---*/
538
629
 
539
630
  .ui.green.labels .label,
540
631
  .ui.green.label {
541
- background-color: #5bbd72 !important;
542
- border-color: #5bbd72 !important;
632
+ background-color: #21ba45 !important;
633
+ border-color: #21ba45 !important;
543
634
  color: #ffffff !important;
544
635
  }
545
636
  .ui.labels .green.label:before,
546
637
  .ui.green.labels .label:before,
547
638
  .ui.green.label:before {
548
- background-color: #5bbd72 !important;
639
+ background-color: #21ba45 !important;
640
+ }
641
+ .ui.green.corner.label,
642
+ .ui.green.corner.label:hover {
643
+ background-color: transparent !important;
549
644
  }
550
645
  a.ui.green.labels .label:hover,
551
646
  a.ui.green.label:hover {
552
- background-color: #66c17b !important;
553
- border-color: #66c17b !important;
647
+ background-color: #16ab39 !important;
648
+ border-color: #16ab39 !important;
649
+ color: #ffffff !important;
554
650
  }
555
651
  .ui.labels a.green.label:hover:before,
556
652
  .ui.green.labels a.label:hover:before,
557
653
  a.ui.green.label:hover:before {
558
- background-color: #66c17b !important;
559
- }
560
- .ui.green.corner.label,
561
- .ui.green.corner.label:hover {
562
- background-color: transparent !important;
654
+ background-color: #16ab39 !important;
563
655
  }
564
656
  .ui.green.ribbon.label {
565
- border-color: #42a359 !important;
657
+ border-color: #198f35 !important;
566
658
  }
567
659
 
568
- /*--- Orange ---*/
660
+ /*--- Teal ---*/
569
661
 
570
- .ui.orange.labels .label,
571
- .ui.orange.label {
572
- background-color: #e07b53 !important;
573
- border-color: #e07b53 !important;
662
+ .ui.teal.labels .label,
663
+ .ui.teal.label {
664
+ background-color: #00b5ad !important;
665
+ border-color: #00b5ad !important;
574
666
  color: #ffffff !important;
575
667
  }
576
- .ui.labels .orange.label:before,
577
- .ui.orange.labels .label:before,
578
- .ui.orange.label:before {
579
- background-color: #e07b53 !important;
668
+ .ui.labels .teal.label:before,
669
+ .ui.teal.labels .label:before,
670
+ .ui.teal.label:before {
671
+ background-color: #00b5ad !important;
580
672
  }
581
- a.ui.orange.labels .label:hover,
582
- .ui.orange.labels a.label:hover,
583
- a.ui.orange.label:hover {
584
- background-color: #e28560 !important;
585
- border-color: #e28560 !important;
586
- color: #ffffff !important;
673
+ .ui.teal.corner.label,
674
+ .ui.teal.corner.label:hover {
675
+ background-color: transparent !important;
587
676
  }
588
- .ui.labels a.orange.label:hover:before,
589
- .ui.orange.labels a.label:hover:before,
590
- a.ui.orange.label:hover:before {
591
- background-color: #e28560 !important;
677
+ a.ui.teal.labels .label:hover,
678
+ a.ui.teal.label:hover {
679
+ background-color: #009c95 !important;
680
+ border-color: #009c95 !important;
681
+ color: #ffffff !important;
592
682
  }
593
- .ui.orange.corner.label,
594
- .ui.orange.corner.label:hover {
595
- background-color: transparent !important;
683
+ .ui.labels a.teal.label:hover:before,
684
+ .ui.teal.labels a.label:hover:before,
685
+ a.ui.teal.label:hover:before {
686
+ background-color: #009c95 !important;
596
687
  }
597
- .ui.orange.ribbon.label {
598
- border-color: #d85a28 !important;
688
+ .ui.teal.ribbon.label {
689
+ border-color: #00827c !important;
599
690
  }
600
691
 
601
- /*--- Pink ---*/
692
+ /*--- Blue ---*/
602
693
 
603
- .ui.pink.labels .label,
604
- .ui.pink.label {
605
- background-color: #d9499a !important;
606
- border-color: #d9499a !important;
694
+ .ui.blue.labels .label,
695
+ .ui.blue.label {
696
+ background-color: #2185d0 !important;
697
+ border-color: #2185d0 !important;
607
698
  color: #ffffff !important;
608
699
  }
609
- .ui.labels .pink.label:before,
610
- .ui.pink.labels .label:before,
611
- .ui.pink.label:before {
612
- background-color: #d9499a !important;
700
+ .ui.labels .blue.label:before,
701
+ .ui.blue.labels .label:before,
702
+ .ui.blue.label:before {
703
+ background-color: #2185d0 !important;
613
704
  }
614
- a.ui.pink.labels .label:hover,
615
- .ui.pink.labels a.label:hover,
616
- a.ui.pink.label:hover {
617
- background-color: #dc56a1 !important;
618
- border-color: #dc56a1 !important;
705
+ .ui.blue.corner.label,
706
+ .ui.blue.corner.label:hover {
707
+ background-color: transparent !important;
708
+ }
709
+ a.ui.blue.labels .label:hover,
710
+ a.ui.blue.label:hover {
711
+ background-color: #1678c2 !important;
712
+ border-color: #1678c2 !important;
619
713
  color: #ffffff !important;
620
714
  }
621
- .ui.labels a.pink.label:hover:before,
622
- .ui.pink.labels a.label:hover:before,
623
- a.ui.pink.label:hover:before {
624
- background-color: #dc56a1 !important;
715
+ .ui.labels a.blue.label:hover:before,
716
+ .ui.blue.labels a.label:hover:before,
717
+ a.ui.blue.label:hover:before {
718
+ background-color: #1678c2 !important;
625
719
  }
626
- .ui.pink.corner.label,
627
- .ui.pink.corner.label:hover {
720
+ .ui.blue.ribbon.label {
721
+ border-color: #1a69a4 !important;
722
+ }
723
+
724
+ /*--- Violet ---*/
725
+
726
+ .ui.violet.labels .label,
727
+ .ui.violet.label {
728
+ background-color: #6435c9 !important;
729
+ border-color: #6435c9 !important;
730
+ color: #ffffff !important;
731
+ }
732
+ .ui.labels .violet.label:before,
733
+ .ui.violet.labels .label:before,
734
+ .ui.violet.label:before {
735
+ background-color: #6435c9 !important;
736
+ }
737
+ .ui.violet.corner.label,
738
+ .ui.violet.corner.label:hover {
628
739
  background-color: transparent !important;
629
740
  }
630
- .ui.pink.ribbon.label {
631
- border-color: #c62981 !important;
741
+ a.ui.violet.labels .label:hover,
742
+ a.ui.violet.label:hover {
743
+ background-color: #5829bb !important;
744
+ border-color: #5829bb !important;
745
+ color: #ffffff !important;
746
+ }
747
+ .ui.labels a.violet.label:hover:before,
748
+ .ui.violet.labels a.label:hover:before,
749
+ a.ui.violet.label:hover:before {
750
+ background-color: #5829bb !important;
751
+ }
752
+ .ui.violet.ribbon.label {
753
+ border-color: #502aa1 !important;
632
754
  }
633
755
 
634
756
  /*--- Purple ---*/
635
757
 
636
758
  .ui.purple.labels .label,
637
759
  .ui.purple.label {
638
- background-color: #564f8a !important;
639
- border-color: #564f8a !important;
760
+ background-color: #a333c8 !important;
761
+ border-color: #a333c8 !important;
640
762
  color: #ffffff !important;
641
763
  }
642
764
  .ui.labels .purple.label:before,
643
765
  .ui.purple.labels .label:before,
644
766
  .ui.purple.label:before {
645
- background-color: #564f8a !important;
767
+ background-color: #a333c8 !important;
768
+ }
769
+ .ui.purple.corner.label,
770
+ .ui.purple.corner.label:hover {
771
+ background-color: transparent !important;
646
772
  }
647
773
  a.ui.purple.labels .label:hover,
648
- .ui.purple.labels a.label:hover,
649
774
  a.ui.purple.label:hover {
650
- background-color: #5c5594 !important;
651
- border-color: #5c5594 !important;
775
+ background-color: #9627ba !important;
776
+ border-color: #9627ba !important;
652
777
  color: #ffffff !important;
653
778
  }
654
779
  .ui.labels a.purple.label:hover:before,
655
780
  .ui.purple.labels a.label:hover:before,
656
781
  a.ui.purple.label:hover:before {
657
- background-color: #5c5594 !important;
658
- }
659
- .ui.purple.corner.label,
660
- .ui.purple.corner.label:hover {
661
- background-color: transparent !important;
782
+ background-color: #9627ba !important;
662
783
  }
663
784
  .ui.purple.ribbon.label {
664
- border-color: #423c6a !important;
785
+ border-color: #82299f !important;
665
786
  }
666
787
 
667
- /*--- Red ---*/
788
+ /*--- Pink ---*/
668
789
 
669
- .ui.red.labels .label,
670
- .ui.red.label {
671
- background-color: #d95c5c !important;
672
- border-color: #d95c5c !important;
790
+ .ui.pink.labels .label,
791
+ .ui.pink.label {
792
+ background-color: #e03997 !important;
793
+ border-color: #e03997 !important;
673
794
  color: #ffffff !important;
674
795
  }
675
- .ui.labels .red.label:before,
676
- .ui.red.labels .label:before,
677
- .ui.red.label:before {
678
- background-color: #d95c5c !important;
796
+ .ui.labels .pink.label:before,
797
+ .ui.pink.labels .label:before,
798
+ .ui.pink.label:before {
799
+ background-color: #e03997 !important;
679
800
  }
680
- .ui.red.corner.label,
681
- .ui.red.corner.label:hover {
801
+ .ui.pink.corner.label,
802
+ .ui.pink.corner.label:hover {
682
803
  background-color: transparent !important;
683
804
  }
684
- a.ui.red.labels .label:hover,
685
- a.ui.red.label:hover {
686
- background-color: #dc6868 !important;
687
- border-color: #dc6868 !important;
805
+ a.ui.pink.labels .label:hover,
806
+ a.ui.pink.label:hover {
807
+ background-color: #e61a8d !important;
808
+ border-color: #e61a8d !important;
688
809
  color: #ffffff !important;
689
810
  }
690
- .ui.labels a.red.label:hover:before,
691
- .ui.red.labels a.label:hover:before,
692
- a.ui.red.label:hover:before {
693
- background-color: #dc6868 !important;
811
+ .ui.labels a.pink.label:hover:before,
812
+ .ui.pink.labels a.label:hover:before,
813
+ a.ui.pink.label:hover:before {
814
+ background-color: #e61a8d !important;
694
815
  }
695
- .ui.red.ribbon.label {
696
- border-color: #cf3333 !important;
816
+ .ui.pink.ribbon.label {
817
+ border-color: #c71f7e !important;
697
818
  }
698
819
 
699
- /*--- Teal ---*/
820
+ /*--- Brown ---*/
700
821
 
701
- .ui.teal.labels .label,
702
- .ui.teal.label {
703
- background-color: #00b5ad !important;
704
- border-color: #00b5ad !important;
822
+ .ui.brown.labels .label,
823
+ .ui.brown.label {
824
+ background-color: #a5673f !important;
825
+ border-color: #a5673f !important;
705
826
  color: #ffffff !important;
706
827
  }
707
- .ui.labels .teal.label:before,
708
- .ui.teal.labels .label:before,
709
- .ui.teal.label:before {
710
- background-color: #00b5ad !important;
828
+ .ui.labels .brown.label:before,
829
+ .ui.brown.labels .label:before,
830
+ .ui.brown.label:before {
831
+ background-color: #a5673f !important;
711
832
  }
712
- a.ui.teal.labels .label:hover,
713
- .ui.teal.labels a.label:hover,
714
- a.ui.teal.label:hover {
715
- background-color: #00c4bc !important;
716
- border-color: #00c4bc !important;
717
- color: #ffffff !important;
833
+ .ui.brown.corner.label,
834
+ .ui.brown.corner.label:hover {
835
+ background-color: transparent !important;
718
836
  }
719
- .ui.labels a.teal.label:hover:before,
720
- .ui.teal.labels a.label:hover:before,
721
- a.ui.teal.label:hover:before {
722
- background-color: #00c4bc !important;
837
+ a.ui.brown.labels .label:hover,
838
+ a.ui.brown.label:hover {
839
+ background-color: #975b33 !important;
840
+ border-color: #975b33 !important;
841
+ color: #ffffff !important;
723
842
  }
724
- .ui.teal.corner.label,
725
- .ui.teal.corner.label:hover {
726
- background-color: transparent !important;
843
+ .ui.labels a.brown.label:hover:before,
844
+ .ui.brown.labels a.label:hover:before,
845
+ a.ui.brown.label:hover:before {
846
+ background-color: #975b33 !important;
727
847
  }
728
- .ui.teal.ribbon.label {
729
- border-color: #00827c !important;
848
+ .ui.brown.ribbon.label {
849
+ border-color: #805031 !important;
730
850
  }
731
851
 
732
- /*--- Yellow ---*/
852
+ /*--- Grey ---*/
733
853
 
734
- .ui.yellow.labels .label,
735
- .ui.yellow.label {
736
- background-color: #f2c61f !important;
737
- border-color: #f2c61f !important;
854
+ .ui.grey.labels .label,
855
+ .ui.grey.label {
856
+ background-color: #767676 !important;
857
+ border-color: #767676 !important;
738
858
  color: #ffffff !important;
739
859
  }
740
- .ui.labels .yellow.label:before,
741
- .ui.yellow.labels .label:before,
742
- .ui.yellow.label:before {
743
- background-color: #f2c61f !important;
860
+ .ui.labels .grey.label:before,
861
+ .ui.grey.labels .label:before,
862
+ .ui.grey.label:before {
863
+ background-color: #767676 !important;
744
864
  }
745
- a.ui.yellow.labels .label:hover,
746
- .ui.yellow.labels a.label:hover,
747
- a.ui.yellow.label:hover {
748
- background-color: #f3ca2d !important;
749
- border-color: #f3ca2d !important;
865
+ .ui.grey.corner.label,
866
+ .ui.grey.corner.label:hover {
867
+ background-color: transparent !important;
868
+ }
869
+ a.ui.grey.labels .label:hover,
870
+ a.ui.grey.label:hover {
871
+ background-color: #838383 !important;
872
+ border-color: #838383 !important;
750
873
  color: #ffffff !important;
751
874
  }
752
- .ui.labels a.yellow.label:hover:before,
753
- .ui.yellow.labels a.label:hover:before,
754
- a.ui.yellow.label:hover:before {
755
- background-color: #f3ca2d !important;
875
+ .ui.labels a.grey.label:hover:before,
876
+ .ui.grey.labels a.label:hover:before,
877
+ a.ui.grey.label:hover:before {
878
+ background-color: #838383 !important;
756
879
  }
757
- .ui.yellow.corner.label,
758
- .ui.yellow.corner.label:hover {
880
+ .ui.grey.ribbon.label {
881
+ border-color: #5d5d5d !important;
882
+ }
883
+
884
+ /*--- Black ---*/
885
+
886
+ .ui.black.labels .label,
887
+ .ui.black.label {
888
+ background-color: #1b1c1d !important;
889
+ border-color: #1b1c1d !important;
890
+ color: #ffffff !important;
891
+ }
892
+ .ui.labels .black.label:before,
893
+ .ui.black.labels .label:before,
894
+ .ui.black.label:before {
895
+ background-color: #1b1c1d !important;
896
+ }
897
+ .ui.black.corner.label,
898
+ .ui.black.corner.label:hover {
759
899
  background-color: transparent !important;
760
900
  }
761
- .ui.yellow.ribbon.label {
762
- border-color: #d2a90c !important;
901
+ a.ui.black.labels .label:hover,
902
+ a.ui.black.label:hover {
903
+ background-color: #27292a !important;
904
+ border-color: #27292a !important;
905
+ color: #ffffff !important;
906
+ }
907
+ .ui.labels a.black.label:hover:before,
908
+ .ui.black.labels a.label:hover:before,
909
+ a.ui.black.label:hover:before {
910
+ background-color: #27292a !important;
911
+ }
912
+ .ui.black.ribbon.label {
913
+ border-color: #5d5d5d !important;
763
914
  }
764
915
 
765
916
  /*-------------------
@@ -778,7 +929,7 @@ a.ui.yellow.label:hover:before {
778
929
 
779
930
  .ui.inverted.labels .label,
780
931
  .ui.inverted.label {
781
- color: #ffffff !important;
932
+ color: rgba(255, 255, 255, 0.9) !important;
782
933
  }
783
934
 
784
935
  /*-------------------
@@ -788,7 +939,7 @@ a.ui.yellow.label:hover:before {
788
939
  .ui.horizontal.labels .label,
789
940
  .ui.horizontal.label {
790
941
  margin: 0em 0.5em 0em 0em;
791
- padding: 0.4em 0.8em;
942
+ padding: 0.4em 0.833em;
792
943
  min-width: 3em;
793
944
  text-align: center;
794
945
  }
@@ -836,8 +987,8 @@ a.ui.yellow.label:hover:before {
836
987
  z-index: 2;
837
988
  width: 0.6em;
838
989
  height: 0.6em;
839
- -webkit-transition: background 0.2s ease;
840
- transition: background 0.2s ease;
990
+ -webkit-transition: background 0.1s ease;
991
+ transition: background 0.1s ease;
841
992
  }
842
993
 
843
994
  /*--- Above ---*/
@@ -919,19 +1070,19 @@ a.ui.yellow.label:hover:before {
919
1070
 
920
1071
  .ui.mini.labels .label,
921
1072
  .ui.mini.label {
922
- font-size: 0.6428rem;
1073
+ font-size: 0.64285714rem;
923
1074
  }
924
1075
  .ui.tiny.labels .label,
925
1076
  .ui.tiny.label {
926
- font-size: 0.7142rem;
1077
+ font-size: 0.71428571rem;
927
1078
  }
928
1079
  .ui.small.labels .label,
929
1080
  .ui.small.label {
930
- font-size: 0.7857rem;
1081
+ font-size: 0.78571429rem;
931
1082
  }
932
1083
  .ui.labels .label,
933
1084
  .ui.label {
934
- font-size: 0.8571rem;
1085
+ font-size: 0.85714286rem;
935
1086
  }
936
1087
  .ui.large.labels .label,
937
1088
  .ui.large.label {
@@ -939,15 +1090,15 @@ a.ui.yellow.label:hover:before {
939
1090
  }
940
1091
  .ui.big.labels .label,
941
1092
  .ui.big.label {
942
- font-size: 1.1428rem;
1093
+ font-size: 1.28571429rem;
943
1094
  }
944
1095
  .ui.huge.labels .label,
945
1096
  .ui.huge.label {
946
- font-size: 1.2857rem;
1097
+ font-size: 1.42857143rem;
947
1098
  }
948
1099
  .ui.massive.labels .label,
949
1100
  .ui.massive.label {
950
- font-size: 1.4285rem;
1101
+ font-size: 1.71428571rem;
951
1102
  }
952
1103
 
953
1104