semantic_ui_rails 0.0.2

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 (78) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +17 -0
  3. data/Gemfile +4 -0
  4. data/LICENSE +20 -0
  5. data/README.md +4 -0
  6. data/Rakefile +1 -0
  7. data/app/assets/fonts/semantic/icons.eot +0 -0
  8. data/app/assets/fonts/semantic/icons.svg +450 -0
  9. data/app/assets/fonts/semantic/icons.ttf +0 -0
  10. data/app/assets/fonts/semantic/icons.woff +0 -0
  11. data/app/assets/images/semantic/loader-large-inverted.gif +0 -0
  12. data/app/assets/images/semantic/loader-large.gif +0 -0
  13. data/app/assets/images/semantic/loader-medium-inverted.gif +0 -0
  14. data/app/assets/images/semantic/loader-medium.gif +0 -0
  15. data/app/assets/images/semantic/loader-mini-inverted.gif +0 -0
  16. data/app/assets/images/semantic/loader-mini.gif +0 -0
  17. data/app/assets/images/semantic/loader-small-inverted.gif +0 -0
  18. data/app/assets/images/semantic/loader-small.gif +0 -0
  19. data/app/assets/javascript/semantic/accordion.js +411 -0
  20. data/app/assets/javascript/semantic/behavior/api.js +666 -0
  21. data/app/assets/javascript/semantic/behavior/colorize.js +271 -0
  22. data/app/assets/javascript/semantic/behavior/form.js +703 -0
  23. data/app/assets/javascript/semantic/behavior/state.js +752 -0
  24. data/app/assets/javascript/semantic/chatroom.js +766 -0
  25. data/app/assets/javascript/semantic/checkbox.js +348 -0
  26. data/app/assets/javascript/semantic/dimmer.js +524 -0
  27. data/app/assets/javascript/semantic/dropdown.js +707 -0
  28. data/app/assets/javascript/semantic/modal.js +478 -0
  29. data/app/assets/javascript/semantic/nag.js +542 -0
  30. data/app/assets/javascript/semantic/popup.js +721 -0
  31. data/app/assets/javascript/semantic/rating.js +358 -0
  32. data/app/assets/javascript/semantic/search.js +769 -0
  33. data/app/assets/javascript/semantic/shape.js +776 -0
  34. data/app/assets/javascript/semantic/sidebar.js +489 -0
  35. data/app/assets/javascript/semantic/tab.js +674 -0
  36. data/app/assets/javascript/semantic/transition.js +650 -0
  37. data/app/assets/javascript/semantic/video.js +459 -0
  38. data/app/assets/stylesheets/semantic/accordion.css +97 -0
  39. data/app/assets/stylesheets/semantic/breadcrumb.css +66 -0
  40. data/app/assets/stylesheets/semantic/button.css +993 -0
  41. data/app/assets/stylesheets/semantic/chatroom.css +242 -0
  42. data/app/assets/stylesheets/semantic/checkbox.css +300 -0
  43. data/app/assets/stylesheets/semantic/comment.css +178 -0
  44. data/app/assets/stylesheets/semantic/dimmer.css +185 -0
  45. data/app/assets/stylesheets/semantic/divider.css +155 -0
  46. data/app/assets/stylesheets/semantic/dropdown.css +415 -0
  47. data/app/assets/stylesheets/semantic/feed.css +126 -0
  48. data/app/assets/stylesheets/semantic/form.css +427 -0
  49. data/app/assets/stylesheets/semantic/grid.css +561 -0
  50. data/app/assets/stylesheets/semantic/header.css +277 -0
  51. data/app/assets/stylesheets/semantic/icon.css +811 -0
  52. data/app/assets/stylesheets/semantic/image.css +143 -0
  53. data/app/assets/stylesheets/semantic/input.css +225 -0
  54. data/app/assets/stylesheets/semantic/item.css +564 -0
  55. data/app/assets/stylesheets/semantic/label.css +687 -0
  56. data/app/assets/stylesheets/semantic/list.css +418 -0
  57. data/app/assets/stylesheets/semantic/loader.css +148 -0
  58. data/app/assets/stylesheets/semantic/menu.css +1409 -0
  59. data/app/assets/stylesheets/semantic/message.css +242 -0
  60. data/app/assets/stylesheets/semantic/modal.css +123 -0
  61. data/app/assets/stylesheets/semantic/nag.css +130 -0
  62. data/app/assets/stylesheets/semantic/popup.css +209 -0
  63. data/app/assets/stylesheets/semantic/progress.css +257 -0
  64. data/app/assets/stylesheets/semantic/rating.css +120 -0
  65. data/app/assets/stylesheets/semantic/reveal.css +283 -0
  66. data/app/assets/stylesheets/semantic/search.css +222 -0
  67. data/app/assets/stylesheets/semantic/segment.css +362 -0
  68. data/app/assets/stylesheets/semantic/shape.css +87 -0
  69. data/app/assets/stylesheets/semantic/sidebar.css +100 -0
  70. data/app/assets/stylesheets/semantic/step.css +240 -0
  71. data/app/assets/stylesheets/semantic/tab.css +52 -0
  72. data/app/assets/stylesheets/semantic/table.css +468 -0
  73. data/app/assets/stylesheets/semantic/transition.css +867 -0
  74. data/app/assets/stylesheets/semantic/video.css +81 -0
  75. data/lib/semantic_ui_rails/version.rb +3 -0
  76. data/lib/semantic_ui_rails.rb +7 -0
  77. data/semantic_ui_rails.gemspec +23 -0
  78. metadata +149 -0
@@ -0,0 +1,427 @@
1
+ /*
2
+ * # Semantic Form
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 22 2013
11
+ */
12
+ /*******************************
13
+ Standard
14
+ *******************************/
15
+ /*--------------------
16
+ Form
17
+ ---------------------*/
18
+ .ui.form {
19
+ position: relative;
20
+ max-width: 100%;
21
+ }
22
+ .ui.form :first-child {
23
+ margin-top: 0em;
24
+ }
25
+ .ui.form :last-child {
26
+ margin-bottom: 0em;
27
+ }
28
+ /*--------------------
29
+ Content
30
+ ---------------------*/
31
+ .ui.form > p {
32
+ margin: 1em 0;
33
+ }
34
+ /*--------------------
35
+ Field
36
+ ---------------------*/
37
+ .ui.form .field {
38
+ clear: both;
39
+ margin: 0em 0em 1em;
40
+ }
41
+ /*--------------------
42
+ Labels
43
+ ---------------------*/
44
+ .ui.form .field > label {
45
+ margin: 0em 0em 0.3em;
46
+ display: block;
47
+ color: #555555;
48
+ font-size: 0.875em;
49
+ }
50
+ /*--------------------
51
+ Standard Inputs
52
+ ---------------------*/
53
+ .ui.form textarea,
54
+ .ui.form input[type="text"],
55
+ .ui.form input[type="date"],
56
+ .ui.form input[type="password"],
57
+ .ui.form .ui.input {
58
+ width: 100%;
59
+ }
60
+ .ui.form textarea,
61
+ .ui.form input[type="text"],
62
+ .ui.form input[type="date"],
63
+ .ui.form input[type="password"] {
64
+ margin: 0em;
65
+ padding: 0.85em 1.2em;
66
+ font-size: 0.875em;
67
+ background-color: #FFFFFF;
68
+ border: 1px solid rgba(0, 0, 0, 0.15);
69
+ outline: none;
70
+ color: rgba(0, 0, 0, 0.7);
71
+ -webkit-border-radius: 0.3125em;
72
+ -moz-border-radius: 0.3125em;
73
+ border-radius: 0.3125em;
74
+ -webkit-transition: background-color 0.3s ease-out, box-shadow 0.2s ease, border-color 0.2s ease;
75
+ -moz-transition: background-color 0.3s ease-out, box-shadow 0.2s ease, border-color 0.2s ease;
76
+ -o-transition: background-color 0.3s ease-out, box-shadow 0.2s ease, border-color 0.2s ease;
77
+ -ms-transition: background-color 0.3s ease-out, box-shadow 0.2s ease, border-color 0.2s ease;
78
+ transition: background-color 0.3s ease-out, box-shadow 0.2s ease, border-color 0.2s ease;
79
+ -webkit-box-shadow: 0em 0em 0em 0em rgba(0, 0, 0, 0.3) inset;
80
+ -moz-box-shadow: 0em 0em 0em 0em rgba(0, 0, 0, 0.3) inset;
81
+ box-shadow: 0em 0em 0em 0em rgba(0, 0, 0, 0.3) inset;
82
+ -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
83
+ -webkit-box-sizing: border-box;
84
+ -moz-box-sizing: border-box;
85
+ -ms-box-sizing: border-box;
86
+ box-sizing: border-box;
87
+ }
88
+ .ui.textarea,
89
+ .ui.form textarea {
90
+ line-height: 1.33;
91
+ min-height: 8em;
92
+ height: 12em;
93
+ max-height: 24em;
94
+ resize: vertical;
95
+ }
96
+ .ui.form select {
97
+ -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
98
+ }
99
+ .ui.form textarea,
100
+ .ui.form input[type="checkbox"] {
101
+ vertical-align: top;
102
+ }
103
+ /*--------------------
104
+ Dividers
105
+ ---------------------*/
106
+ .ui.form .divider {
107
+ clear: both;
108
+ margin: 1em 0em;
109
+ }
110
+ /*--------------------
111
+ Types of Messages
112
+ ---------------------*/
113
+ .ui.form .info.message,
114
+ .ui.form .warning.message,
115
+ .ui.form .error.message {
116
+ display: none;
117
+ }
118
+ /* Assumptions */
119
+ .ui.form .message:first-child {
120
+ margin-top: 0px;
121
+ }
122
+ /*--------------------
123
+ Validation Prompt
124
+ ---------------------*/
125
+ .ui.form .field .prompt.label {
126
+ white-space: nowrap;
127
+ }
128
+ .ui.form .inline.field .prompt {
129
+ margin-top: 0em;
130
+ margin-left: 1em;
131
+ }
132
+ .ui.form .inline.field .prompt:before {
133
+ margin-top: -0.3em;
134
+ bottom: auto;
135
+ right: auto;
136
+ top: 50%;
137
+ left: 0em;
138
+ }
139
+ /*******************************
140
+ States
141
+ *******************************/
142
+ /*--------------------
143
+ Focus
144
+ ---------------------*/
145
+ .ui.form input[type="text"]:focus,
146
+ .ui.form input[type="password"]:focus,
147
+ .ui.form textarea:focus {
148
+ color: rgba(0, 0, 0, 0.85);
149
+ border-color: rgba(0, 0, 0, 0.2);
150
+ border-bottom-left-radius: 0;
151
+ border-top-left-radius: 0;
152
+ -webkit-box-shadow: 0.3em 0em 0em 0em rgba(0, 0, 0, 0.2) inset;
153
+ -moz-box-shadow: 0.3em 0em 0em 0em rgba(0, 0, 0, 0.2) inset;
154
+ box-shadow: 0.3em 0em 0em 0em rgba(0, 0, 0, 0.2) inset;
155
+ }
156
+ /*--------------------
157
+ Error
158
+ ---------------------*/
159
+ /* On Form */
160
+ .ui.form.warning .warning.message {
161
+ display: block;
162
+ }
163
+ /*--------------------
164
+ Warning
165
+ ---------------------*/
166
+ /* On Form */
167
+ .ui.form.error .error.message {
168
+ display: block;
169
+ }
170
+ /* On Field(s) */
171
+ .ui.form .fields.error .field label,
172
+ .ui.form .field.error label {
173
+ color: #D95C5C;
174
+ }
175
+ .ui.form .fields.error .field textarea,
176
+ .ui.form .fields.error .field input[type="text"],
177
+ .ui.form .fields.error .field input[type="date"],
178
+ .ui.form .fields.error .field input[type="password"],
179
+ .ui.form .field.error textarea,
180
+ .ui.form .field.error input[type="text"],
181
+ .ui.form .field.error input[type="date"],
182
+ .ui.form .field.error input[type="password"] {
183
+ background-color: #FFFAFA;
184
+ border-color: #E7BEBE;
185
+ border-left: none;
186
+ color: #D95C5C;
187
+ padding-left: 1.2em;
188
+ border-bottom-left-radius: 0;
189
+ border-top-left-radius: 0;
190
+ -webkit-box-shadow: 0.3em 0em 0em 0em #D95C5C inset;
191
+ -moz-box-shadow: 0.3em 0em 0em 0em #D95C5C inset;
192
+ box-shadow: 0.3em 0em 0em 0em #D95C5C inset;
193
+ }
194
+ .ui.form .field.error textarea:focus,
195
+ .ui.form .field.error input[type="text"]:focus,
196
+ .ui.form .field.error input[type="password"]:focus {
197
+ border-color: #ff5050;
198
+ color: #ff5050;
199
+ -webkit-box-shadow: 0.3em 0em 0em 0em #FF5050 inset;
200
+ -moz-box-shadow: 0.3em 0em 0em 0em #FF5050 inset;
201
+ box-shadow: 0.3em 0em 0em 0em #FF5050 inset;
202
+ }
203
+ /*--------------------
204
+ Empty (Placeholder)
205
+ ---------------------*/
206
+ /* browsers require these rules separate */
207
+ .ui.form ::-webkit-input-placeholder {
208
+ color: #E0E0E0;
209
+ }
210
+ .ui.form ::-moz-placeholder {
211
+ color: #E0E0E0;
212
+ }
213
+ .ui.form :focus::-webkit-input-placeholder {
214
+ color: #AAAAAA;
215
+ }
216
+ .ui.form :focus::-moz-placeholder {
217
+ color: #AAAAAA;
218
+ }
219
+ /* Error Placeholder */
220
+ .ui.form .error ::-webkit-input-placeholder {
221
+ color: rgba(255, 80, 80, 0.4);
222
+ }
223
+ .ui.form .error ::-moz-placeholder {
224
+ color: rgba(255, 80, 80, 0.4);
225
+ }
226
+ .ui.form .error :focus::-webkit-input-placeholder {
227
+ color: rgba(255, 80, 80, 0.7);
228
+ }
229
+ .ui.form .error :focus::-moz-placeholder {
230
+ color: rgba(255, 80, 80, 0.7);
231
+ }
232
+ /*--------------------
233
+ Disabled
234
+ ---------------------*/
235
+ .ui.form .field :disabled,
236
+ .ui.form .field.disabled {
237
+ opacity: 0.5;
238
+ }
239
+ .ui.form .field.disabled label {
240
+ opacity: 0.5;
241
+ }
242
+ .ui.form .field.disabled :disabled {
243
+ opacity: 1;
244
+ }
245
+ /*--------------------
246
+ Loading State
247
+ ---------------------*/
248
+ /* On Form */
249
+ .ui.form.loading {
250
+ position: relative;
251
+ }
252
+ .ui.form.loading:after {
253
+ position: absolute;
254
+ top: 0%;
255
+ left: 0%;
256
+ content: '';
257
+ width: 100%;
258
+ height: 100%;
259
+ background: rgba(255, 255, 255, 0.8) url(../images/loader-large.gif) no-repeat 50% 50%;
260
+ visibility: visible;
261
+ }
262
+ /*******************************
263
+ Variations
264
+ *******************************/
265
+ /*--------------------
266
+ Fluid Width
267
+ ---------------------*/
268
+ .ui.form.fluid {
269
+ width: 100%;
270
+ -webkit-box-sizing: border-box;
271
+ -moz-box-sizing: border-box;
272
+ -ms-box-sizing: border-box;
273
+ box-sizing: border-box;
274
+ }
275
+ /*--------------------------
276
+ Input w/ attached Button
277
+ ---------------------------*/
278
+ .ui.form input.attached {
279
+ width: auto;
280
+ }
281
+ /*--------------------
282
+ Date Input
283
+ ---------------------*/
284
+ .ui.form .date.field > label {
285
+ position: relative;
286
+ }
287
+ .ui.form .date.field > label:after {
288
+ position: absolute;
289
+ top: 1.4em;
290
+ right: 0.5em;
291
+ font-family: 'Icons';
292
+ content: '📅';
293
+ /* '\1f4c5' */
294
+
295
+ font-size: 1.5em;
296
+ font-weight: normal;
297
+ color: #CCCCCC;
298
+ }
299
+ /*--------------------
300
+ Inverted Colors
301
+ ---------------------*/
302
+ .ui.inverted.form label {
303
+ color: #FFFFFF;
304
+ }
305
+ .ui.inverted.form .field.error textarea,
306
+ .ui.inverted.form .field.error input[type="text"] {
307
+ background-color: #FFCCCC;
308
+ }
309
+ /*--------------------
310
+ Field Groups
311
+ ---------------------*/
312
+ /* Grouped Vertically */
313
+ .ui.form .grouped.fields {
314
+ margin: 0em 0em 1em;
315
+ }
316
+ .ui.form .grouped.fields .field {
317
+ display: block;
318
+ float: none;
319
+ margin: 0.5em 0em;
320
+ padding: 0em;
321
+ }
322
+ /*--------------------
323
+ Fields
324
+ ---------------------*/
325
+ /* Split fields */
326
+ .ui.form .fields {
327
+ clear: both;
328
+ }
329
+ .ui.form .fields:after {
330
+ content: ' ';
331
+ display: block;
332
+ clear: both;
333
+ visibility: hidden;
334
+ line-height: 0;
335
+ height: 0;
336
+ }
337
+ .ui.form .fields .field {
338
+ clear: none;
339
+ float: left;
340
+ -webkit-box-sizing: border-box;
341
+ -moz-box-sizing: border-box;
342
+ -ms-box-sizing: border-box;
343
+ box-sizing: border-box;
344
+ }
345
+ .ui.form .fields .field:first-child {
346
+ border-left: none;
347
+ box-shadow: none;
348
+ }
349
+ /* Other Combinations */
350
+ .ui.form .two.fields .field {
351
+ width: 50%;
352
+ padding-left: 1%;
353
+ padding-right: 1%;
354
+ }
355
+ .ui.form .three.fields .field {
356
+ width: 33.333%;
357
+ padding-left: 1%;
358
+ padding-right: 1%;
359
+ }
360
+ .ui.form .four.fields .field {
361
+ width: 25%;
362
+ padding-left: 1%;
363
+ padding-right: 1%;
364
+ }
365
+ .ui.form .five.fields .field {
366
+ width: 20%;
367
+ padding-left: 1%;
368
+ padding-right: 1%;
369
+ }
370
+ /* override sides, ie8 no last-child */
371
+ .ui.form .fields .field:first-child {
372
+ padding-left: 0%;
373
+ }
374
+ .ui.form .fields .field:last-child {
375
+ padding-right: 0%;
376
+ }
377
+ /*--------------------
378
+ Inline Fields
379
+ ---------------------*/
380
+ .ui.form .inline.fields .field {
381
+ min-height: 1.3em;
382
+ margin-right: 0.5em;
383
+ }
384
+ .ui.form .inline.fields .field > label,
385
+ .ui.form .inline.fields .field > p,
386
+ .ui.form .inline.fields .field > input,
387
+ .ui.form .inline.fields .field > select,
388
+ .ui.form .inline.field > label,
389
+ .ui.form .inline.field > p,
390
+ .ui.form .inline.field > input,
391
+ .ui.form .inline.field > select {
392
+ display: inline-block;
393
+ width: auto;
394
+ margin-top: 0em;
395
+ margin-bottom: 0em;
396
+ vertical-align: middle;
397
+ font-size: 1em;
398
+ }
399
+ .ui.form .inline.fields .field > input,
400
+ .ui.form .inline.field > input {
401
+ font-size: 0.875em;
402
+ }
403
+ .ui.form .inline.fields .field > :first-child,
404
+ .ui.form .inline.field > :first-child {
405
+ margin: 0em 0.5em 0em 0em;
406
+ }
407
+ .ui.form .inline.fields .field > :only-child,
408
+ .ui.form .inline.field > :only-child {
409
+ margin: 0em;
410
+ }
411
+ /*--------------------
412
+ Sizes
413
+ ---------------------*/
414
+ /* Standard */
415
+ .ui.small.form {
416
+ font-size: 0.875em;
417
+ }
418
+ .ui.small.form textarea,
419
+ .ui.small.form input[type="text"],
420
+ .ui.small.form input[type="password"],
421
+ .ui.small.form label {
422
+ font-size: 1em;
423
+ }
424
+ /* Large */
425
+ .ui.large.form {
426
+ font-size: 1.125em;
427
+ }