semantic-ui-rails 0.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (90) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +17 -0
  3. data/Gemfile +4 -0
  4. data/LICENSE.txt +22 -0
  5. data/README.md +26 -0
  6. data/Rakefile +1 -0
  7. data/lib/generators/semantic/install/install_generator.rb +38 -0
  8. data/lib/generators/semantic/install/templates/semantic-ui.js +21 -0
  9. data/lib/generators/semantic/install/templates/semantic-ui/collections.less +6 -0
  10. data/lib/generators/semantic/install/templates/semantic-ui/elements.less +11 -0
  11. data/lib/generators/semantic/install/templates/semantic-ui/modules.less +18 -0
  12. data/lib/generators/semantic/install/templates/semantic-ui/views.less +6 -0
  13. data/lib/semantic/ui/rails.rb +10 -0
  14. data/lib/semantic/ui/rails/engine.rb +8 -0
  15. data/lib/semantic/ui/rails/version.rb +7 -0
  16. data/semantic-ui-rails.gemspec +23 -0
  17. data/vendor/assets/fonts/icons.eot +0 -0
  18. data/vendor/assets/fonts/icons.svg +450 -0
  19. data/vendor/assets/fonts/icons.ttf +0 -0
  20. data/vendor/assets/fonts/icons.woff +0 -0
  21. data/vendor/assets/images/semantic-ui/loader-large-inverted.gif +0 -0
  22. data/vendor/assets/images/semantic-ui/loader-large.gif +0 -0
  23. data/vendor/assets/images/semantic-ui/loader-medium-inverted.gif +0 -0
  24. data/vendor/assets/images/semantic-ui/loader-medium.gif +0 -0
  25. data/vendor/assets/images/semantic-ui/loader-mini-inverted.gif +0 -0
  26. data/vendor/assets/images/semantic-ui/loader-mini.gif +0 -0
  27. data/vendor/assets/images/semantic-ui/loader-small-inverted.gif +0 -0
  28. data/vendor/assets/images/semantic-ui/loader-small.gif +0 -0
  29. data/vendor/assets/javascripts/semantic-ui/accordion.js +411 -0
  30. data/vendor/assets/javascripts/semantic-ui/behavior/api.js +666 -0
  31. data/vendor/assets/javascripts/semantic-ui/behavior/colorize.js +271 -0
  32. data/vendor/assets/javascripts/semantic-ui/behavior/form.js +657 -0
  33. data/vendor/assets/javascripts/semantic-ui/behavior/state.js +752 -0
  34. data/vendor/assets/javascripts/semantic-ui/carousel.js +327 -0
  35. data/vendor/assets/javascripts/semantic-ui/chatroom.js +766 -0
  36. data/vendor/assets/javascripts/semantic-ui/checkbox.js +348 -0
  37. data/vendor/assets/javascripts/semantic-ui/dimmer.js +525 -0
  38. data/vendor/assets/javascripts/semantic-ui/dropdown.js +697 -0
  39. data/vendor/assets/javascripts/semantic-ui/modal.js +478 -0
  40. data/vendor/assets/javascripts/semantic-ui/nag.js +542 -0
  41. data/vendor/assets/javascripts/semantic-ui/popup.js +721 -0
  42. data/vendor/assets/javascripts/semantic-ui/rating.js +358 -0
  43. data/vendor/assets/javascripts/semantic-ui/search.js +770 -0
  44. data/vendor/assets/javascripts/semantic-ui/shape.js +776 -0
  45. data/vendor/assets/javascripts/semantic-ui/sidebar.js +489 -0
  46. data/vendor/assets/javascripts/semantic-ui/tab.js +674 -0
  47. data/vendor/assets/javascripts/semantic-ui/transition.js +645 -0
  48. data/vendor/assets/javascripts/semantic-ui/video.js +459 -0
  49. data/vendor/assets/stylesheets/semantic-ui/collections/breadcrumb.less +79 -0
  50. data/vendor/assets/stylesheets/semantic-ui/collections/form.less +536 -0
  51. data/vendor/assets/stylesheets/semantic-ui/collections/grid.less +655 -0
  52. data/vendor/assets/stylesheets/semantic-ui/collections/menu.less +1736 -0
  53. data/vendor/assets/stylesheets/semantic-ui/collections/message.less +337 -0
  54. data/vendor/assets/stylesheets/semantic-ui/collections/table.less +526 -0
  55. data/vendor/assets/stylesheets/semantic-ui/elements/button.less +1294 -0
  56. data/vendor/assets/stylesheets/semantic-ui/elements/divider.less +200 -0
  57. data/vendor/assets/stylesheets/semantic-ui/elements/header.less +325 -0
  58. data/vendor/assets/stylesheets/semantic-ui/elements/icon.less +449 -0
  59. data/vendor/assets/stylesheets/semantic-ui/elements/image.less +170 -0
  60. data/vendor/assets/stylesheets/semantic-ui/elements/input.less +287 -0
  61. data/vendor/assets/stylesheets/semantic-ui/elements/label.less +805 -0
  62. data/vendor/assets/stylesheets/semantic-ui/elements/loader.less +178 -0
  63. data/vendor/assets/stylesheets/semantic-ui/elements/progress.less +353 -0
  64. data/vendor/assets/stylesheets/semantic-ui/elements/segment.less +465 -0
  65. data/vendor/assets/stylesheets/semantic-ui/elements/step.less +294 -0
  66. data/vendor/assets/stylesheets/semantic-ui/modules/accordion.less +135 -0
  67. data/vendor/assets/stylesheets/semantic-ui/modules/carousel.less +71 -0
  68. data/vendor/assets/stylesheets/semantic-ui/modules/chatroom.less +271 -0
  69. data/vendor/assets/stylesheets/semantic-ui/modules/checkbox.less +378 -0
  70. data/vendor/assets/stylesheets/semantic-ui/modules/dimmer.less +230 -0
  71. data/vendor/assets/stylesheets/semantic-ui/modules/dropdown.less +506 -0
  72. data/vendor/assets/stylesheets/semantic-ui/modules/extra.transition.less +1197 -0
  73. data/vendor/assets/stylesheets/semantic-ui/modules/modal.less +154 -0
  74. data/vendor/assets/stylesheets/semantic-ui/modules/nag.less +175 -0
  75. data/vendor/assets/stylesheets/semantic-ui/modules/popup.less +238 -0
  76. data/vendor/assets/stylesheets/semantic-ui/modules/rating.less +151 -0
  77. data/vendor/assets/stylesheets/semantic-ui/modules/reveal.less +367 -0
  78. data/vendor/assets/stylesheets/semantic-ui/modules/search.less +275 -0
  79. data/vendor/assets/stylesheets/semantic-ui/modules/shape.less +115 -0
  80. data/vendor/assets/stylesheets/semantic-ui/modules/sidebar.less +147 -0
  81. data/vendor/assets/stylesheets/semantic-ui/modules/tab.less +59 -0
  82. data/vendor/assets/stylesheets/semantic-ui/modules/transition.less +839 -0
  83. data/vendor/assets/stylesheets/semantic-ui/modules/video.less +99 -0
  84. data/vendor/assets/stylesheets/semantic-ui/views/comment.less +221 -0
  85. data/vendor/assets/stylesheets/semantic-ui/views/feed.less +151 -0
  86. data/vendor/assets/stylesheets/semantic-ui/views/item.less +641 -0
  87. data/vendor/assets/stylesheets/semantic-ui/views/list.less +491 -0
  88. data/vendor/assets/stylesheets/semantic-ui/views/sitemap.less +47 -0
  89. data/vendor/assets/stylesheets/semantic-ui/views/statistic.less +34 -0
  90. metadata +161 -0
@@ -0,0 +1,287 @@
1
+ /*
2
+ * # Semantic Input
3
+ * http://github.com/quirkyinc/semantic
4
+ *
5
+ *
6
+ * Copyright 2013 Contributors
7
+ * Released under the MIT license
8
+ * http://opensource.org/licenses/MIT
9
+ *
10
+ * Released: May 29 2013
11
+ */
12
+
13
+
14
+ /*******************************
15
+ Standard
16
+ *******************************/
17
+
18
+
19
+ /*--------------------
20
+ Inputs
21
+ ---------------------*/
22
+
23
+ .ui.input {
24
+ display: inline-block;
25
+ position: relative;
26
+ }
27
+ .ui.input input {
28
+ width: 100%;
29
+ font-family: "Helvetica Neue", "Helvetica", Arial;
30
+
31
+ margin: 0em;
32
+ padding: 0.85em 1.2em;
33
+ font-size: 0.875em;
34
+
35
+ background-color: #FFFFFF;
36
+ border: 1px solid rgba(0, 0, 0, 0.15);
37
+ outline: none;
38
+
39
+ color: rgba(0, 0, 0, 0.7);
40
+
41
+ -webkit-border-radius: 0.3125em;
42
+ -moz-border-radius: 0.3125em;
43
+ border-radius: 0.3125em;
44
+
45
+ -webkit-transition:
46
+ background-color 0.3s ease-out,
47
+ box-shadow 0.2s ease,
48
+ border-color 0.2s ease
49
+ ;
50
+ -moz-transition:
51
+ background-color 0.3s ease-out,
52
+ box-shadow 0.2s ease,
53
+ border-color 0.2s ease
54
+ ;
55
+ -o-transition:
56
+ background-color 0.3s ease-out,
57
+ box-shadow 0.2s ease,
58
+ border-color 0.2s ease
59
+ ;
60
+ -ms-transition:
61
+ background-color 0.3s ease-out,
62
+ box-shadow 0.2s ease,
63
+ border-color 0.2s ease
64
+ ;
65
+ transition:
66
+ background-color 0.3s ease-out,
67
+ box-shadow 0.2s ease,
68
+ border-color 0.2s ease
69
+ ;
70
+
71
+ -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
72
+
73
+ -webkit-box-sizing: border-box;
74
+ -moz-box-sizing: border-box;
75
+ -ms-box-sizing: border-box;
76
+ box-sizing: border-box;
77
+ }
78
+
79
+
80
+ /*--------------------
81
+ Placeholder
82
+ ---------------------*/
83
+
84
+ /* browsers require these rules separate */
85
+ .ui.input::-web inputkit-input-placeholder {
86
+ color: #E0E0E0;
87
+ }
88
+ .ui.input::-moz input-placeholder {
89
+ color: #E0E0E0;
90
+ }
91
+
92
+
93
+ /*******************************
94
+ States
95
+ *******************************/
96
+
97
+ /*--------------------
98
+ Active
99
+ ---------------------*/
100
+
101
+ .ui.input input:active,
102
+ .ui.input.down input {
103
+ border-color: rgba(0, 0, 0, 0.3);
104
+ background-color: #FAFAFA;
105
+ }
106
+
107
+ /*--------------------
108
+ Loading
109
+ ---------------------*/
110
+
111
+ .ui.loading.input .icon {
112
+ background: url(../images/loader-mini.gif) no-repeat 50% 50%;
113
+ }
114
+ .ui.loading.input .icon:before,
115
+ .ui.loading.input .icon:after {
116
+ display: none;
117
+ }
118
+
119
+ /*--------------------
120
+ Focus
121
+ ---------------------*/
122
+
123
+ .ui.input.focus input,
124
+ .ui.input input:focus {
125
+ border-color: rgba(0, 0, 0, 0.2);
126
+ color: rgba(0, 0, 0, 0.85);
127
+ }
128
+ .ui.input.focus input input::-webkit-input-placeholder,
129
+ .ui.input input:focus input::-webkit-input-placeholder {
130
+ color: #AAAAAA;
131
+ }
132
+ .ui.input.focus input input::-moz-placeholder,
133
+ .ui.input input:focus input::-moz-placeholder {
134
+ color: #AAAAAA;
135
+ }
136
+
137
+
138
+ /*--------------------
139
+ Error
140
+ ---------------------*/
141
+
142
+ .ui.input.error input {
143
+ background-color: #FFFAFA;
144
+ border-color: #E7BEBE;
145
+ color: #D95C5C;
146
+ }
147
+
148
+ /* Error Placeholder */
149
+ .ui.input.error input ::-webkit-input-placeholder {
150
+ color: rgba(255, 80, 80, 0.4);
151
+ }
152
+ .ui.input.error input ::-moz-placeholder {
153
+ color: rgba(255, 80, 80, 0.4);
154
+ }
155
+ .ui.input.error input :focus::-webkit-input-placeholder {
156
+ color: rgba(255, 80, 80, 0.7);
157
+ }
158
+ .ui.input.error input :focus::-moz-placeholder {
159
+ color: rgba(255, 80, 80, 0.7);
160
+ }
161
+
162
+ /*******************************
163
+ Variations
164
+ *******************************/
165
+
166
+
167
+ /*--------------------
168
+ Transparent
169
+ ---------------------*/
170
+
171
+ .ui.transparent.input input {
172
+ border: none;
173
+ background-color: transparent;
174
+ }
175
+
176
+
177
+ /*--------------------
178
+ Icon
179
+ ---------------------*/
180
+
181
+ .ui.icon.input > .icon {
182
+ position: absolute;
183
+ opacity: 0.5;
184
+ top: 1px;
185
+ right: 1px;
186
+
187
+ margin: 0em;
188
+
189
+ width: 2.5em;
190
+ height: 2.5em;
191
+ padding-top: 0.75em;
192
+
193
+ text-align: center;
194
+
195
+ -webkit-border-radius: 0.2em 0em 0em 0.2em;
196
+ -moz-border-radius: 0.2em 0em 0em 0.2em;
197
+ border-radius: 0.2em 0em 0em 0.2em;
198
+
199
+ -webkit-box-sizing: border-box;
200
+ -moz-box-sizing: border-box;
201
+ -ms-box-sizing: border-box;
202
+ box-sizing: border-box;
203
+
204
+ -webkit-transition: opacity 0.3s ease-out;
205
+ -moz-transition: opacity 0.3s ease-out;
206
+ -o-transition: opacity 0.3s ease-out;
207
+ -ms-transition: opacity 0.3s ease-out;
208
+ transition: opacity 0.3s ease-out;
209
+ }
210
+ .ui.icon.input input {
211
+ padding-right: 3em !important;
212
+ }
213
+
214
+ .ui.left.icon.input .icon {
215
+ right: auto;
216
+ left: 1px;
217
+ }
218
+ .ui.left.icon.input input {
219
+ padding-left: 3em !important;
220
+ padding-right: 1.2em !important;
221
+ }
222
+
223
+ /* Focus */
224
+ .ui.icon.input input:focus ~ .icon {
225
+ opacity: 1;
226
+ }
227
+
228
+ /*--------------------
229
+ Labeled
230
+ ---------------------*/
231
+
232
+ .ui.labeled.input .corner.label {
233
+ top: 1px;
234
+ right: 1px;
235
+
236
+ font-size: 0.7em;
237
+
238
+ -webkit-border-top-right-radius: 0.3125em;
239
+ -moz-border-top-right-radius: 0.3125em;
240
+ border-top-right-radius: 0.3125em;
241
+ }
242
+ .ui.labeled.input input {
243
+ padding-right: 2.5em !important;
244
+ }
245
+
246
+ /* Spacing with corner label */
247
+ .ui.labeled.icon.input:not(.left) input {
248
+ padding-right: 3.25em !important;
249
+ }
250
+ .ui.labeled.icon.input:not(.left) .icon {
251
+ margin-right: 0.75em;
252
+ }
253
+
254
+
255
+ /*--------------------
256
+ Action
257
+ ---------------------*/
258
+
259
+ .ui.action.input {
260
+ display: table;
261
+ }
262
+
263
+ .ui.action.input > input {
264
+ display: table-cell;
265
+ border-top-right-radius: 0px !important;
266
+ border-bottom-right-radius: 0px !important;
267
+ border-right: none;
268
+ }
269
+ .ui.action.input > .button {
270
+ display: table-cell;
271
+ opacity: 0.9;
272
+
273
+ border-top-left-radius: 0px;
274
+ border-bottom-left-radius: 0px;
275
+
276
+ -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
277
+ -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
278
+ box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
279
+ white-space: nowrap;
280
+ }
281
+
282
+ .ui.action.input > input:focus ~ .button {
283
+ opacity: 1;
284
+ -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset;
285
+ -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset;
286
+ box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset;
287
+ }
@@ -0,0 +1,805 @@
1
+ /*
2
+ * # Semantic Label - Flat
3
+ * http://github.com/quirkyinc/semantic
4
+ *
5
+ *
6
+ * Copyright 2013 Contributors
7
+ * Released under the MIT license
8
+ * http://opensource.org/licenses/MIT
9
+ *
10
+ * Released: April 26 2013
11
+ */
12
+
13
+ /*******************************
14
+ Label
15
+ *******************************/
16
+
17
+ .ui.label {
18
+ display: inline-block;
19
+ vertical-align: middle;
20
+
21
+ margin: -0.25em 0.25em 0em;
22
+
23
+ background-color: #E8E8E8;
24
+ border-color: #E8E8E8;
25
+
26
+ padding: 0.5em 0.8em;
27
+ color: rgba(0, 0, 0, 0.65);
28
+
29
+ text-transform: uppercase;
30
+ font-weight: normal;
31
+
32
+ -webkit-border-radius: 0.325em;
33
+ -moz-border-radius: 0.325em;
34
+ border-radius: 0.325em;
35
+
36
+ -webkit-box-sizing: border-box;
37
+ -moz-box-sizing: border-box;
38
+ -ms-box-sizing: border-box;
39
+ box-sizing: border-box;
40
+
41
+ -webkit-transition:
42
+ background 0.1s linear
43
+ ;
44
+ -moz-transition:
45
+ background 0.1s linear
46
+ ;
47
+ -o-transition:
48
+ background 0.1s linear
49
+ ;
50
+ -ms-transition:
51
+ background 0.1s linear
52
+ ;
53
+ transition:
54
+ background 0.1s linear
55
+ ;
56
+ }
57
+
58
+ .ui.label:first-child {
59
+ margin-left: 0em;
60
+ }
61
+ .ui.label:last-child {
62
+ margin-right: 0em;
63
+ }
64
+
65
+
66
+ /* Link */
67
+ a.ui.label {
68
+ cursor: pointer;
69
+ }
70
+
71
+ /* Detail */
72
+ .ui.label .detail {
73
+ display: inline-block;
74
+ margin-left: 0.5em;
75
+ font-weight: bold;
76
+ opacity: 0.8;
77
+ }
78
+
79
+ /* Icon */
80
+ .ui.label .icon {
81
+ width: auto;
82
+ }
83
+
84
+ /* Removable label */
85
+ .ui.label .delete.icon {
86
+ cursor: pointer;
87
+ margin: 0em 0em 0em 0.5em;
88
+ opacity: 0.7;
89
+
90
+ -webkit-transition:
91
+ background 0.1s linear
92
+ ;
93
+ -moz-transition:
94
+ background 0.1s linear
95
+ ;
96
+ -o-transition:
97
+ background 0.1s linear
98
+ ;
99
+ -ms-transition:
100
+ background 0.1s linear
101
+ ;
102
+ transition:
103
+ background 0.1s linear
104
+ ;
105
+ }
106
+ .ui.label .delete.icon:hover {
107
+ opacity: 0.99;
108
+ }
109
+
110
+ /*******************************
111
+ Types
112
+ *******************************/
113
+
114
+ .ui.image.label {
115
+ width: auto !important;
116
+ margin-top: 0em;
117
+ margin-bottom: 0em;
118
+
119
+ padding-top: 0.4em;
120
+ padding-bottom: 0.4em;
121
+
122
+ line-height: 1.5em;
123
+ vertical-align: baseline;
124
+ text-transform: none;
125
+
126
+ -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
127
+ -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
128
+ box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
129
+ }
130
+ .ui.image.label img {
131
+ display: inline-block;
132
+ height: 2.5em;
133
+ margin: -0.4em 0.8em -0.4em -0.8em;
134
+ vertical-align: top;
135
+
136
+ -moz-border-radius: 0.325em 0em 0em 0.325em;
137
+ -webkit-border-radius: 0.325em 0em 0em 0.325em;
138
+ border-radius: 0.325em 0em 0em 0.325em;
139
+ }
140
+
141
+ /*******************************
142
+ States
143
+ *******************************/
144
+
145
+ /*-------------------
146
+ Disabled
147
+ --------------------*/
148
+
149
+ .ui.label.disabled {
150
+ opacity: 0.5;
151
+ }
152
+
153
+
154
+ /*-------------------
155
+ Hover
156
+ --------------------*/
157
+
158
+ a.ui.labels .label:hover,
159
+ a.ui.label:hover {
160
+ background-color: #E0E0E0;
161
+ border-color: #E0E0E0;
162
+ color: rgba(0, 0, 0, 0.7);
163
+ }
164
+ .ui.labels a.label:hover:before,
165
+ a.ui.label:hover:before {
166
+ background-color: #E0E0E0;
167
+ color: rgba(0, 0, 0, 0.7);
168
+ }
169
+
170
+
171
+ /*******************************
172
+ Variations
173
+ *******************************/
174
+
175
+
176
+ /*-------------------
177
+ Tag
178
+ --------------------*/
179
+
180
+ .ui.tag.labels .label,
181
+ .ui.tag.label {
182
+ margin-left: 1em;
183
+ position: relative;
184
+ padding: 0.33em 1.3em 0.33em 1.4em;
185
+
186
+ -webkit-border-radius: 0px 3px 3px 0px;
187
+ -moz-border-radius: 0px 3px 3px 0px;
188
+ border-radius: 0px 3px 3px 0px;
189
+ }
190
+ .ui.tag.labels .label:before,
191
+ .ui.tag.label:before {
192
+ position: absolute;
193
+ top: 0.3em;
194
+ left: 0.3em;
195
+ content: '';
196
+
197
+ margin-left: -1em;
198
+ background-image: none;
199
+
200
+ width: 1.5em;
201
+ height: 1.5em;
202
+
203
+ -webkit-transform: rotate(45deg);
204
+ -moz-transform: rotate(45deg);
205
+ transform: rotate(45deg);
206
+
207
+ -webkit-transition:
208
+ background 0.1s linear
209
+ ;
210
+ -moz-transition:
211
+ background 0.1s linear
212
+ ;
213
+ -o-transition:
214
+ background 0.1s linear
215
+ ;
216
+ -ms-transition:
217
+ background 0.1s linear
218
+ ;
219
+ transition:
220
+ background 0.1s linear
221
+ ;
222
+ }
223
+
224
+
225
+ .ui.tag.labels .label:after,
226
+ .ui.tag.label:after {
227
+ position: absolute;
228
+ content: '';
229
+ top: 50%;
230
+ left: -0.25em;
231
+
232
+ margin-top: -0.3em;
233
+ background-color: #FFFFFF;
234
+ width: 0.55em;
235
+ height: 0.55em;
236
+
237
+ -webkit-box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3);
238
+ -moz-box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3);
239
+ box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3);
240
+
241
+ -moz-border-radius: 100px 100px 100px 100px;
242
+ -webkit-border-radius: 100px 100px 100px 100px;
243
+ border-radius: 100px 100px 100px 100px;
244
+ }
245
+ /*-------------------
246
+ Ribbon
247
+ --------------------*/
248
+
249
+ .ui.ribbon.label {
250
+ position: relative;
251
+ left: -2rem;
252
+ padding-left: 2rem;
253
+ -webkit-border-radius: 0px 4px 4px 0px;
254
+ -moz-border-radius: 0px 4px 4px 0px;
255
+ border-radius: 0px 4px 4px 0px;
256
+ }
257
+
258
+ .ui.ribbon.label:after {
259
+ position: absolute;
260
+ content: "";
261
+
262
+ top: 100%;
263
+ left: 0%;
264
+
265
+ border-top: 0em solid transparent;
266
+ border-right-width: 1em;
267
+ border-right-color: inherit;
268
+ border-right-style: solid;
269
+ border-bottom: 1em solid transparent;
270
+ border-left: 0em solid transparent;
271
+
272
+ width: 0em;
273
+ height: 0em;
274
+ }
275
+
276
+ /*-------------------
277
+ Attached
278
+ --------------------*/
279
+
280
+ .ui.top.attached.label,
281
+ .ui.attached.label {
282
+ width: 100%;
283
+ position: absolute;
284
+ margin: 0em;
285
+ top: 0em;
286
+ left: 0em;
287
+ -webkit-border-radius: 4px 4px 0em 0em;
288
+ -moz-border-radius: 4px 4px 0em 0em;
289
+ border-radius: 4px 4px 0em 0em;
290
+ }
291
+ .ui.bottom.attached.label {
292
+ top: auto;
293
+ bottom: 0em;
294
+
295
+ -webkit-border-radius: 0em 0em 4px 4px;
296
+ -moz-border-radius: 0em 0em 4px 4px;
297
+ border-radius: 0em 0em 4px 4px;
298
+ }
299
+
300
+ .ui.top.left.attached.label {
301
+ width: auto;
302
+ margin-top: 0em !important;
303
+
304
+ -webkit-border-radius: 4px 0em 4px 0em;
305
+ -moz-border-radius: 4px 0em 4px 0em;
306
+ border-radius: 4px 0em 4px 0em;
307
+ }
308
+
309
+ .ui.top.right.attached.label {
310
+ width: auto;
311
+ left: auto;
312
+ right: 0em;
313
+
314
+ -webkit-border-radius: 0em 4px 0em 4px;
315
+ -moz-border-radius: 0em 4px 0em 4px;
316
+ border-radius: 0em 4px 0em 4px;
317
+ }
318
+ .ui.bottom.left.attached.label {
319
+ width: auto;
320
+ top: auto;
321
+ bottom: 0em;
322
+
323
+ -webkit-border-radius: 4px 0em 0em 4px;
324
+ -moz-border-radius: 4px 0em 0em 4px;
325
+ border-radius: 4px 0em 0em 4px;
326
+ }
327
+ .ui.bottom.right.attached.label {
328
+ top: auto;
329
+ bottom: 0em;
330
+ left: auto;
331
+ right: 0em;
332
+ width: auto;
333
+ -webkit-border-radius: 4px 0em 4px 0em;
334
+ -moz-border-radius: 4px 0em 4px 0em;
335
+ border-radius: 4px 0em 4px 0em;
336
+ }
337
+
338
+ /*-------------------
339
+ Corner Label
340
+ --------------------*/
341
+
342
+ .ui.corner.label {
343
+ background-color: transparent;
344
+ position: absolute;
345
+ top: 0em;
346
+ right: 0em;
347
+ z-index: 10;
348
+ margin: 0em;
349
+
350
+ font-size: 0.9em;
351
+ width: 1.75em;
352
+ height: 1.75em;
353
+ padding: 0em;
354
+
355
+ text-align: center;
356
+
357
+ -webkit-transition: color 0.2s ease;
358
+ -moz-transition: color 0.2s ease;
359
+ -o-transition: color 0.2s ease;
360
+ -ms-transition: color 0.2s ease;
361
+ transition: color 0.2s ease;
362
+ }
363
+ .ui.corner.label:after {
364
+ position: absolute;
365
+ content: "";
366
+ right: 0em;
367
+ top: 0em;
368
+ z-index: -1;
369
+
370
+ width: 0em;
371
+ height: 0em;
372
+
373
+ border-top: 0em solid transparent;
374
+ border-right: 2.75em solid transparent;
375
+ border-bottom: 2.75em solid transparent;
376
+ border-left: 0em solid transparent;
377
+
378
+ border-right-color: inherit;
379
+
380
+ -webkit-transition: border-color 0.2s ease;
381
+ -moz-transition: border-color 0.2s ease;
382
+ -o-transition: border-color 0.2s ease;
383
+ -ms-transition: border-color 0.2s ease;
384
+ transition: border-color 0.2s ease;
385
+ }
386
+
387
+ .ui.corner.label .icon {
388
+ margin: 0.35em 0em;
389
+ vertical-align: top;
390
+ }
391
+ .ui.corner.label .text {
392
+ display: inline-block;
393
+ margin: 0.7em 0em 0em 0em;
394
+ width: 2.5em;
395
+
396
+ font-size: 0.7em;
397
+ text-align: center;
398
+
399
+ -webkit-transform: rotate(45deg);
400
+ -moz-transform: rotate(45deg);
401
+ -o-transform: rotate(45deg);
402
+ -ms-transform: rotate(45deg);
403
+ transform: rotate(45deg);
404
+ }
405
+
406
+ /* Left Corner */
407
+ .ui.left.corner.label,
408
+ .ui.left.corner.label:after {
409
+ right: auto;
410
+ left: 0em;
411
+ }
412
+ .ui.left.corner.label:after {
413
+ border-top: 2.75em solid transparent;
414
+ border-right: 2.75em solid transparent;
415
+ border-bottom: 0em solid transparent;
416
+ border-left: 0em solid transparent;
417
+
418
+ border-top-color: inherit;
419
+ }
420
+ .ui.left.corner.label .text {
421
+ -webkit-transform: rotate(-45deg);
422
+ -moz-transform: rotate(-45deg);
423
+ -o-transform: rotate(-45deg);
424
+ -ms-transform: rotate(-45deg);
425
+ transform: rotate(-45deg);
426
+ }
427
+
428
+
429
+ /* Hover */
430
+ .ui.corner.label:hover {
431
+ background-color: transparent;
432
+ }
433
+
434
+
435
+ /*-------------------
436
+ Fluid
437
+ --------------------*/
438
+
439
+ .ui.label.fluid,
440
+ .ui.fluid.labels > .label {
441
+ width: 100%;
442
+ -webkit-box-sizing: border-box;
443
+ -moz-box-sizing: border-box;
444
+ -ms-box-sizing: border-box;
445
+ box-sizing: border-box;
446
+ }
447
+
448
+ /*-------------------
449
+ Inverted
450
+ --------------------*/
451
+
452
+ .ui.inverted.labels .label,
453
+ .ui.inverted.label {
454
+ color: #FFFFFF !important;
455
+ }
456
+
457
+ /*-------------------
458
+ Colors
459
+ --------------------*/
460
+
461
+ /*--- Black ---*/
462
+ .ui.black.labels .label,
463
+ .ui.black.label {
464
+ background-color: #5C6166 !important;
465
+ border-color: #5C6166 !important;
466
+ color: #FFFFFF !important;
467
+ }
468
+ .ui.labels .black.label:before,
469
+ .ui.black.labels .label:before,
470
+ .ui.black.label:before {
471
+ background-color: #5C6166 !important;
472
+ }
473
+ /* Hover */
474
+ a.ui.black.labels .label:hover,
475
+ a.ui.black.label:hover {
476
+ background-color: #888888 !important;
477
+ border-color: #888888 !important;
478
+ }
479
+ .ui.labels a.black.label:hover:before,
480
+ .ui.black.labels a.label:hover:before,
481
+ a.ui.black.label:hover:before {
482
+ background-color: #888888 !important;
483
+ }
484
+
485
+ /* Corner */
486
+ .ui.black.corner.label,
487
+ .ui.black.corner.label:hover {
488
+ background-color: transparent !important;
489
+ }
490
+
491
+
492
+ /*--- Green ---*/
493
+ .ui.green.labels .label,
494
+ .ui.green.label {
495
+ background-color: #A1CF64 !important;
496
+ border-color: #A1CF64 !important;
497
+ color: #FFFFFF !important;
498
+ }
499
+ .ui.labels .green.label:before,
500
+ .ui.green.labels .label:before,
501
+ .ui.green.label:before {
502
+ background-color: #A1CF64 !important;
503
+ }
504
+
505
+ /* Hover */
506
+ a.ui.green.labels .label:hover,
507
+ a.ui.green.label:hover {
508
+ background-color: #89B84C !important;
509
+ border-color: #89B84C !important;
510
+ }
511
+ .ui.labels a.green.label:hover:before,
512
+ .ui.green.labels a.label:hover:before,
513
+ a.ui.green.label:hover:before {
514
+ background-color: #89B84C !important;
515
+ }
516
+
517
+ /* Corner */
518
+ .ui.green.corner.label,
519
+ .ui.green.corner.label:hover {
520
+ background-color: transparent !important;
521
+ }
522
+
523
+
524
+ /*--- Red ---*/
525
+ .ui.red.labels .label,
526
+ .ui.red.label {
527
+ background-color: #D95C5C !important;
528
+ border-color: #D95C5C !important;
529
+ color: #FFFFFF !important;
530
+ }
531
+ .ui.labels .red.label:before,
532
+ .ui.red.labels .label:before,
533
+ .ui.red.label:before {
534
+ background-color: #D95C5C !important;
535
+ }
536
+ /* Corner */
537
+ .ui.red.corner.label,
538
+ .ui.red.corner.label:hover {
539
+ background-color: transparent !important;
540
+ }
541
+
542
+ /* Hover */
543
+ a.ui.red.labels .label:hover,
544
+ a.ui.red.label:hover{
545
+ background-color: #DE3859 !important;
546
+ border-color: #DE3859 !important;
547
+ color: #FFFFFF !important;
548
+ }
549
+ .ui.labels a.red.label:hover:before,
550
+ .ui.red.labels a.label:hover:before,
551
+ a.ui.red.label:hover:before {
552
+ background-color: #DE3859 !important;
553
+ }
554
+
555
+
556
+ /*--- Blue ---*/
557
+ .ui.blue.labels .label,
558
+ .ui.blue.label {
559
+ background-color: #6ECFF5 !important;
560
+ border-color: #6ECFF5 !important;
561
+ color: #FFFFFF !important;
562
+ }
563
+ .ui.labels .blue.label:before,
564
+ .ui.blue.labels .label:before,
565
+ .ui.blue.label:before {
566
+ background-color: #6ECFF5 !important;
567
+ }
568
+ /* Hover */
569
+ a.ui.blue.labels .label:hover,
570
+ .ui.blue.labels a.label:hover,
571
+ a.ui.blue.label:hover {
572
+ background-color: #1AB8F3 !important;
573
+ border-color: #1AB8F3 !important;
574
+ color: #FFFFFF !important;
575
+ }
576
+ .ui.labels a.blue.label:hover:before,
577
+ .ui.blue.labels a.label:hover:before,
578
+ a.ui.blue.label:hover:before {
579
+ background-color: #1AB8F3 !important;
580
+ }
581
+ /* Corner */
582
+ .ui.blue.corner.label,
583
+ .ui.blue.corner.label:hover {
584
+ background-color: transparent !important;
585
+ }
586
+
587
+ /*--- Purple ---*/
588
+ .ui.purple.labels .label,
589
+ .ui.purple.label {
590
+ background-color: #564F8A !important;
591
+ border-color: #564F8A !important;
592
+ color: #FFFFFF !important;
593
+ }
594
+ .ui.labels .purple.label:before,
595
+ .ui.purple.labels .label:before,
596
+ .ui.purple.label:before {
597
+ background-color: #564F8A !important;
598
+ }
599
+ /* Hover */
600
+ a.ui.purple.labels .label:hover,
601
+ .ui.purple.labels a.label:hover,
602
+ a.ui.purple.label:hover {
603
+ background-color: #3E3773 !important;
604
+ border-color: #3E3773 !important;
605
+ color: #FFFFFF !important;
606
+ }
607
+ .ui.labels a.purple.label:hover:before,
608
+ .ui.purple.labels a.label:hover:before,
609
+ a.ui.purple.label:hover:before {
610
+ background-color: #3E3773 !important;
611
+ }
612
+ /* Corner */
613
+ .ui.purple.corner.label,
614
+ .ui.purple.corner.label:hover {
615
+ background-color: transparent !important;
616
+ }
617
+
618
+
619
+ /*--- Pink ---*/
620
+ .ui.teal.labels .label,
621
+ .ui.teal.label {
622
+ background-color: #00B5AD !important;
623
+ border-color: #00B5AD !important;
624
+ color: #FFFFFF !important;
625
+ }
626
+ .ui.labels .teal.label:before,
627
+ .ui.teal.labels .label:before,
628
+ .ui.teal.label:before {
629
+ background-color: #00B5AD !important;
630
+ }
631
+ /* Hover */
632
+ a.ui.teal.labels .label:hover,
633
+ .ui.teal.labels a.label:hover,
634
+ a.ui.teal.label:hover {
635
+ background-color: #009A93 !important;
636
+ border-color: #009A93 !important;
637
+ color: #FFFFFF !important;
638
+ }
639
+ .ui.labels a.teal.label:hover:before,
640
+ .ui.teal.labels a.label:hover:before,
641
+ a.ui.teal.label:hover:before {
642
+ background-color: #009A93 !important;
643
+ }
644
+ /* Corner */
645
+ .ui.teal.corner.label,
646
+ .ui.teal.corner.label:hover {
647
+ background-color: transparent !important;
648
+ }
649
+
650
+ /*-------------------
651
+ Horizontal
652
+ --------------------*/
653
+
654
+ .ui.horizontal.labels .label,
655
+ .ui.horizontal.label {
656
+ margin: -0.125em 0.5em -0.125em 0em;
657
+
658
+ padding: 0.35em 1em;
659
+ min-width: 6em;
660
+ text-align: center;
661
+ }
662
+
663
+
664
+ /*-------------------
665
+ Circular
666
+ --------------------*/
667
+
668
+ .ui.circular.labels .label,
669
+ .ui.circular.label {
670
+ min-height: 1em;
671
+ max-height: 2em;
672
+
673
+ padding: 0.5em !important;
674
+
675
+ line-height: 1em;
676
+ text-align: center;
677
+
678
+ -webkit-border-radius: 500rem;
679
+ -moz-border-radius: 500rem;
680
+ border-radius: 500rem;
681
+ }
682
+
683
+ /*-------------------
684
+ Pointing
685
+ --------------------*/
686
+
687
+ .ui.pointing.label {
688
+ position: relative;
689
+ }
690
+ .ui.attached.pointing.label {
691
+ position: absolute;
692
+ }
693
+
694
+ .ui.pointing.label:before {
695
+ position: absolute;
696
+ content: "";
697
+
698
+ width: 0.6em;
699
+ height: 0.6em;
700
+
701
+ background-image: none;
702
+
703
+ -webkit-transform: rotate(45deg);
704
+ -moz-transform: rotate(45deg);
705
+ transform: rotate(45deg);
706
+ z-index: 2;
707
+
708
+ -webkit-transition:
709
+ background 0.1s linear
710
+ ;
711
+ -moz-transition:
712
+ background 0.1s linear
713
+ ;
714
+ -o-transition:
715
+ background 0.1s linear
716
+ ;
717
+ -ms-transition:
718
+ background 0.1s linear
719
+ ;
720
+ transition:
721
+ background 0.1s linear
722
+ ;
723
+ }
724
+ /*--- Above ---*/
725
+ .ui.pointing.label:before {
726
+ background-color: #E8E8E8;
727
+ }
728
+ .ui.pointing.label,
729
+ .ui.pointing.above.label {
730
+ margin-top: 1em;
731
+ }
732
+ .ui.pointing.label:before,
733
+ .ui.pointing.above.label:before {
734
+ margin-left: -0.3em;
735
+ top: -0.3em;
736
+ left: 50%;
737
+ }
738
+ /*--- Below ---*/
739
+ .ui.pointing.below.label {
740
+ margin-top: 0em;
741
+ margin-bottom: 1em;
742
+ }
743
+ .ui.pointing.below.label:before {
744
+ margin-left: -0.3em;
745
+ top: auto;
746
+ right: auto;
747
+ bottom: -0.3em;
748
+ left: 50%;
749
+ }
750
+ /*--- Left ---*/
751
+ .ui.pointing.left.label {
752
+ margin-top: 0em;
753
+ margin-left: 1em;
754
+ }
755
+ .ui.pointing.left.label:before {
756
+ margin-top: -0.3em;
757
+ bottom: auto;
758
+ right: auto;
759
+ top: 50%;
760
+ left: 0em;
761
+ }
762
+ /*--- Right ---*/
763
+ .ui.pointing.right.label {
764
+ margin-top: 0em;
765
+ margin-right: 1em;
766
+ }
767
+ .ui.pointing.right.label:before {
768
+ margin-top: -0.3em;
769
+ right: -0.3em;
770
+ top: 50%;
771
+ bottom: auto;
772
+ left: auto;
773
+ }
774
+
775
+ /*------------------
776
+ Floating Label
777
+ -------------------*/
778
+
779
+ .ui.floating.label {
780
+ position: absolute;
781
+ z-index: 100;
782
+ top: -1em;
783
+ left: 100%;
784
+ margin: 0em 0em 0em -1.5em !important;
785
+ }
786
+
787
+ /*-------------------
788
+ Sizes
789
+ --------------------*/
790
+
791
+ .ui.small.labels .label,
792
+ .ui.small.label {
793
+ font-size: 0.75rem;
794
+ }
795
+ .ui.label {
796
+ font-size: 0.8125rem;
797
+ }
798
+ .ui.large.labels .label,
799
+ .ui.large.label {
800
+ font-size: 0.875rem;
801
+ }
802
+ .ui.huge.labels .label,
803
+ .ui.huge.label {
804
+ font-size: 1rem;
805
+ }