semantic-ui-sass 0.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (93) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +18 -0
  3. data/Gemfile +4 -0
  4. data/LICENSE.txt +22 -0
  5. data/README.md +51 -0
  6. data/Rakefile +5 -0
  7. data/app/assets/fonts/semantic-ui/basic.icons.eot +0 -0
  8. data/app/assets/fonts/semantic-ui/basic.icons.svg +450 -0
  9. data/app/assets/fonts/semantic-ui/basic.icons.ttf +0 -0
  10. data/app/assets/fonts/semantic-ui/basic.icons.woff +0 -0
  11. data/app/assets/fonts/semantic-ui/icons.eot +0 -0
  12. data/app/assets/fonts/semantic-ui/icons.otf +0 -0
  13. data/app/assets/fonts/semantic-ui/icons.svg +399 -0
  14. data/app/assets/fonts/semantic-ui/icons.ttf +0 -0
  15. data/app/assets/fonts/semantic-ui/icons.woff +0 -0
  16. data/app/assets/images/semantic-ui/loader-large-inverted.gif +0 -0
  17. data/app/assets/images/semantic-ui/loader-large.gif +0 -0
  18. data/app/assets/images/semantic-ui/loader-medium-inverted.gif +0 -0
  19. data/app/assets/images/semantic-ui/loader-medium.gif +0 -0
  20. data/app/assets/images/semantic-ui/loader-mini-inverted.gif +0 -0
  21. data/app/assets/images/semantic-ui/loader-mini.gif +0 -0
  22. data/app/assets/images/semantic-ui/loader-small-inverted.gif +0 -0
  23. data/app/assets/images/semantic-ui/loader-small.gif +0 -0
  24. data/app/assets/javascripts/semantic-ui.js +20 -0
  25. data/app/assets/javascripts/semantic-ui/accordion.js +419 -0
  26. data/app/assets/javascripts/semantic-ui/behavior/api.js +638 -0
  27. data/app/assets/javascripts/semantic-ui/behavior/colorize.js +270 -0
  28. data/app/assets/javascripts/semantic-ui/behavior/form.js +702 -0
  29. data/app/assets/javascripts/semantic-ui/behavior/state.js +725 -0
  30. data/app/assets/javascripts/semantic-ui/chatroom.js +769 -0
  31. data/app/assets/javascripts/semantic-ui/checkbox.js +344 -0
  32. data/app/assets/javascripts/semantic-ui/dimmer.js +564 -0
  33. data/app/assets/javascripts/semantic-ui/dropdown.js +724 -0
  34. data/app/assets/javascripts/semantic-ui/modal.js +553 -0
  35. data/app/assets/javascripts/semantic-ui/nag.js +545 -0
  36. data/app/assets/javascripts/semantic-ui/popup.js +727 -0
  37. data/app/assets/javascripts/semantic-ui/rating.js +403 -0
  38. data/app/assets/javascripts/semantic-ui/search.js +772 -0
  39. data/app/assets/javascripts/semantic-ui/shape.js +778 -0
  40. data/app/assets/javascripts/semantic-ui/sidebar.js +490 -0
  41. data/app/assets/javascripts/semantic-ui/tab.js +689 -0
  42. data/app/assets/javascripts/semantic-ui/transition.js +654 -0
  43. data/app/assets/javascripts/semantic-ui/video.js +457 -0
  44. data/app/assets/stylesheets/semantic-ui.scss +4 -0
  45. data/app/assets/stylesheets/semantic-ui/collections/_all.scss +6 -0
  46. data/app/assets/stylesheets/semantic-ui/collections/_breadcrumb.scss +77 -0
  47. data/app/assets/stylesheets/semantic-ui/collections/_form.scss +569 -0
  48. data/app/assets/stylesheets/semantic-ui/collections/_grid.scss +643 -0
  49. data/app/assets/stylesheets/semantic-ui/collections/_menu.scss +1767 -0
  50. data/app/assets/stylesheets/semantic-ui/collections/_message.scss +347 -0
  51. data/app/assets/stylesheets/semantic-ui/collections/_table.scss +524 -0
  52. data/app/assets/stylesheets/semantic-ui/elements/_all.scss +12 -0
  53. data/app/assets/stylesheets/semantic-ui/elements/_basic.icon.scss +479 -0
  54. data/app/assets/stylesheets/semantic-ui/elements/_button.scss +1187 -0
  55. data/app/assets/stylesheets/semantic-ui/elements/_divider.scss +199 -0
  56. data/app/assets/stylesheets/semantic-ui/elements/_header.scss +342 -0
  57. data/app/assets/stylesheets/semantic-ui/elements/_icon.scss +772 -0
  58. data/app/assets/stylesheets/semantic-ui/elements/_image.scss +181 -0
  59. data/app/assets/stylesheets/semantic-ui/elements/_input.scss +338 -0
  60. data/app/assets/stylesheets/semantic-ui/elements/_label.scss +827 -0
  61. data/app/assets/stylesheets/semantic-ui/elements/_loader.scss +185 -0
  62. data/app/assets/stylesheets/semantic-ui/elements/_progress.scss +352 -0
  63. data/app/assets/stylesheets/semantic-ui/elements/_segment.scss +464 -0
  64. data/app/assets/stylesheets/semantic-ui/elements/_step.scss +293 -0
  65. data/app/assets/stylesheets/semantic-ui/modules/_accordion.scss +199 -0
  66. data/app/assets/stylesheets/semantic-ui/modules/_all.scss +16 -0
  67. data/app/assets/stylesheets/semantic-ui/modules/_chatroom.scss +281 -0
  68. data/app/assets/stylesheets/semantic-ui/modules/_checkbox.scss +481 -0
  69. data/app/assets/stylesheets/semantic-ui/modules/_dimmer.scss +236 -0
  70. data/app/assets/stylesheets/semantic-ui/modules/_dropdown.scss +548 -0
  71. data/app/assets/stylesheets/semantic-ui/modules/_modal.scss +217 -0
  72. data/app/assets/stylesheets/semantic-ui/modules/_nag.scss +173 -0
  73. data/app/assets/stylesheets/semantic-ui/modules/_popup.scss +255 -0
  74. data/app/assets/stylesheets/semantic-ui/modules/_rating.scss +179 -0
  75. data/app/assets/stylesheets/semantic-ui/modules/_reveal.scss +365 -0
  76. data/app/assets/stylesheets/semantic-ui/modules/_search.scss +273 -0
  77. data/app/assets/stylesheets/semantic-ui/modules/_shape.scss +113 -0
  78. data/app/assets/stylesheets/semantic-ui/modules/_sidebar.scss +150 -0
  79. data/app/assets/stylesheets/semantic-ui/modules/_tab.scss +63 -0
  80. data/app/assets/stylesheets/semantic-ui/modules/_transition.scss +1096 -0
  81. data/app/assets/stylesheets/semantic-ui/modules/_video.scss +98 -0
  82. data/app/assets/stylesheets/semantic-ui/views/_all.scss +5 -0
  83. data/app/assets/stylesheets/semantic-ui/views/_comment.scss +221 -0
  84. data/app/assets/stylesheets/semantic-ui/views/_feed.scss +152 -0
  85. data/app/assets/stylesheets/semantic-ui/views/_item.scss +651 -0
  86. data/app/assets/stylesheets/semantic-ui/views/_list.scss +555 -0
  87. data/app/assets/stylesheets/semantic-ui/views/_statistic.scss +27 -0
  88. data/lib/semantic/ui/sass.rb +10 -0
  89. data/lib/semantic/ui/sass/engine.rb +13 -0
  90. data/lib/semantic/ui/sass/version.rb +8 -0
  91. data/semantic-ui-sass.gemspec +24 -0
  92. data/tasks/converter.rb +237 -0
  93. metadata +177 -0
@@ -0,0 +1,236 @@
1
+ /*
2
+ * # Semantic - Dimmer
3
+ * http://github.com/jlukic/semantic-ui/
4
+ *
5
+ *
6
+ * Copyright 2013 Contributors
7
+ * Released under the MIT license
8
+ * http://opensource.org/licenses/MIT
9
+ *
10
+ */
11
+
12
+ /*******************************
13
+ Dimmer
14
+ *******************************/
15
+
16
+ .ui.dimmable {
17
+ position: relative;
18
+ }
19
+
20
+ .ui.dimmer {
21
+ display: none;
22
+ position: absolute;
23
+ top: 0em !important;
24
+ left: 0em !important;
25
+
26
+ width: 0%;
27
+ height: 0%;
28
+
29
+ text-align: center;
30
+ vertical-align: middle;
31
+
32
+ background-color: rgba(0, 0, 0, 0.85);
33
+ opacity: 0;
34
+ line-height: 1;
35
+
36
+ -webkit-animation-fill-mode: both;
37
+ -moz-animation-fill-mode: both;
38
+ -o-animation-fill-mode: both;
39
+ -ms-animation-fill-mode: both;
40
+ animation-fill-mode: both;
41
+
42
+ -webkit-animation-duration: 0.5s;
43
+ -moz-animation-duration: 0.5s;
44
+ -o-animation-duration: 0.5s;
45
+ -ms-animation-duration: 0.5s;
46
+ animation-duration: 0.5s;
47
+
48
+ -webkit-transition:
49
+ background-color 0.5s linear
50
+ ;
51
+ -moz-transition:
52
+ background-color 0.5s linear
53
+ ;
54
+ -o-transition:
55
+ background-color 0.5s linear
56
+ ;
57
+ -ms-transition:
58
+ background-color 0.5s linear
59
+ ;
60
+ transition:
61
+ background-color 0.5s linear
62
+ ;
63
+
64
+ -webkit-user-select: none;
65
+ -moz-user-select: none;
66
+ -ms-user-select: none;
67
+ user-select: none;
68
+
69
+ -webkit-box-sizing: border-box;
70
+ -moz-box-sizing: border-box;
71
+ -ms-box-sizing: border-box;
72
+ box-sizing: border-box;
73
+
74
+ z-index: 1000;
75
+ }
76
+
77
+ /*
78
+ .ui.dimmed.dimmable > :not(.dimmer) {
79
+ -webkit-transition:
80
+ filter 0.5s ease
81
+ ;
82
+ -moz-transition:
83
+ filter 0.5s ease
84
+ ;
85
+ -o-transition:
86
+ filter 0.5s ease
87
+ ;
88
+ -ms-transition:
89
+ filter 0.5s ease
90
+ ;
91
+ transition:
92
+ filter 0.5s ease
93
+ ;
94
+ }
95
+ */
96
+
97
+
98
+ /* Dimmer Content */;
99
+ .ui.dimmer > .content {
100
+ width: 100%;
101
+ height: 100%;
102
+ display: table;
103
+
104
+ -webkit-user-select: text;
105
+ -moz-user-select: text;
106
+ -ms-user-select: text;
107
+ user-select: text;
108
+ }
109
+ .ui.dimmer > .content > div {
110
+ display: table-cell;
111
+ vertical-align: middle;
112
+ color: #FFFFFF;
113
+ }
114
+
115
+
116
+ /* Loose Coupling */
117
+ .ui.segment > .ui.dimmer {
118
+ -webkit-border-radius: 5px;
119
+ -moz-border-radius: 5px;
120
+ border-radius: 5px;
121
+ }
122
+ .ui.horizontal.segment > .ui.dimmer,
123
+ .ui.vertical.segment > .ui.dimmer {
124
+ -webkit-border-radius: 5px;
125
+ -moz-border-radius: 5px;
126
+ border-radius: 5px;
127
+ }
128
+
129
+ /*******************************
130
+ States
131
+ *******************************/
132
+ /*
133
+ .ui.dimmed.dimmable > :not(.dimmer) {
134
+ -webkit-filter: #{blur(5px) grayscale(0.7)};
135
+ -moz-filter: #{blur(5px) grayscale(0.7)};
136
+ }
137
+ */
138
+ .ui.dimmed.dimmable > .ui.dimmer,
139
+ .ui.active.dimmer {
140
+ display: block;
141
+ width: 100%;
142
+ height: 100%;
143
+ opacity: 1;
144
+ }
145
+
146
+ .ui.disabled.dimmer {
147
+ width: 0em !important;
148
+ height: 0em !important;
149
+ }
150
+
151
+
152
+ /*******************************
153
+ Variations
154
+ *******************************/
155
+
156
+ /*--------------
157
+ Page
158
+ ---------------*/
159
+
160
+ .ui.page.dimmer {
161
+ position: fixed;
162
+
163
+ -webkit-transform-style: preserve-3d;
164
+ -moz-transform-style: preserve-3d;
165
+ -ms-transform-style: preserve-3d;
166
+ transform-style: preserve-3d;
167
+
168
+ -webkit-perspective: 2000px;
169
+ -moz-perspective: 2000px;
170
+ perspective: 2000px;
171
+
172
+ -webkit-transform-origin: center center;
173
+ -moz-transform-origin: center center;
174
+ -o-transform-origin: center center;
175
+ -ms-transform-origin: center center;
176
+ transform-origin: center center;
177
+ }
178
+ .ui.scrolling.page.dimmer {
179
+ position: absolute;
180
+ }
181
+ /*
182
+ body.ui.dimmed.dimmable > :not(.dimmer){
183
+ -webkit-filter: #{blur(15px) grayscale(0.7)};
184
+ -moz-filter: #{blur(15px) grayscale(0.7)};
185
+ }
186
+ */
187
+
188
+ /*--------------
189
+ Aligned
190
+ ---------------*/
191
+
192
+ .ui.dimmer > .top.aligned.content > * {
193
+ vertical-align: top;
194
+ }
195
+ .ui.dimmer > .bottom.aligned.content > * {
196
+ vertical-align: bottom;
197
+ }
198
+
199
+ /*--------------
200
+ Inverted
201
+ ---------------*/
202
+
203
+ .ui.inverted.dimmer {
204
+ background-color: rgba(255, 255, 255, 0.85);
205
+ }
206
+ .ui.inverted.dimmer > .content > * {
207
+ color: rgba(0, 0, 0, 0.8);
208
+ }
209
+
210
+ /*--------------
211
+ Simple
212
+ ---------------*/
213
+ /* Displays without javascript */
214
+
215
+ .ui.simple.dimmer {
216
+ display: block;
217
+ overflow: hidden;
218
+ opacity: 1;
219
+ z-index: -100;
220
+ background-color: rgba(0, 0, 0, 0);
221
+ }
222
+ .ui.dimmed.dimmable > .ui.simple.dimmer {
223
+ overflow: visible;
224
+ opacity: 1;
225
+ width: 100%;
226
+ height: 100%;
227
+ background-color: rgba(0, 0, 0, 0.85);
228
+ z-index: 1;
229
+ }
230
+
231
+ .ui.simple.inverted.dimmer {
232
+ background-color: rgba(255, 255, 255, 0);
233
+ }
234
+ .ui.dimmed.dimmable > .ui.simple.inverted.dimmer {
235
+ background-color: rgba(255, 255, 255, 0.85)
236
+ }
@@ -0,0 +1,548 @@
1
+ /*
2
+ * # Semantic - Dropdown
3
+ * http://github.com/jlukic/semantic-ui/
4
+ *
5
+ *
6
+ * Copyright 2013 Contributors
7
+ * Released under the MIT license
8
+ * http://opensource.org/licenses/MIT
9
+ *
10
+ */
11
+
12
+ /*******************************
13
+ Dropdown
14
+ *******************************/
15
+
16
+ .ui.dropdown {
17
+ position: relative;
18
+ display: inline-block;
19
+
20
+ line-height: 1;
21
+
22
+ -webkit-transition:
23
+ border-radius 0.1s ease,
24
+ width 0.2s ease
25
+ ;
26
+ -moz-transition:
27
+ border-radius 0.1s ease,
28
+ width 0.2s ease
29
+ ;
30
+ -o-transition:
31
+ border-radius 0.1s ease,
32
+ width 0.2s ease
33
+ ;
34
+ -ms-transition:
35
+ border-radius 0.1s ease,
36
+ width 0.2s ease
37
+ ;
38
+ transition:
39
+ border-radius 0.1s ease,
40
+ width 0.2s ease
41
+ ;
42
+ }
43
+
44
+
45
+ /*******************************
46
+ Content
47
+ *******************************/
48
+
49
+ /*--------------
50
+ Menu
51
+ ---------------*/
52
+
53
+ .ui.dropdown .menu {
54
+ position: absolute;
55
+ display: none;
56
+ top: 100%;
57
+
58
+ margin: 0em;
59
+ background-color: #FFFFFF;
60
+ min-width: 100%;
61
+
62
+ white-space: nowrap;
63
+ font-size: 0.875em;
64
+ text-shadow: none;
65
+
66
+ -webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1);
67
+ -moz-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1);
68
+ box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1);
69
+
70
+ -moz-border-radius: 0px 0px 0.325em 0.325em;
71
+ -webkit-border-radius: 0px 0px 0.325em 0.325em;
72
+ border-radius: 0px 0px 0.325em 0.325em;
73
+
74
+ -webkit-transition: opacity 0.2s ease;
75
+ -moz-transition: opacity 0.2s ease;
76
+ -o-transition: opacity 0.2s ease;
77
+ -ms-transition: opacity 0.2s ease;
78
+ transition: opacity 0.2s ease;
79
+ z-index: 11;
80
+ }
81
+
82
+ /*--------------
83
+ Icon
84
+ ---------------*/
85
+
86
+ .ui.dropdown > .dropdown.icon {
87
+ width: auto;
88
+ margin: 0em 0em 0em 0.5em;
89
+ }
90
+
91
+ .ui.dropdown > .dropdown.icon:before {
92
+ content: "\f0d7";
93
+ }
94
+
95
+ .ui.dropdown .menu .item .dropdown.icon {
96
+ width: auto;
97
+ float: right;
98
+ margin: 0em 0em 0em 0.5em;
99
+ }
100
+ .ui.dropdown .menu .item .dropdown.icon:before {
101
+ content: "\f0da";
102
+ }
103
+
104
+
105
+ /*--------------
106
+ Text
107
+ ---------------*/
108
+
109
+ .ui.dropdown > .text {
110
+ cursor: pointer;
111
+ display: inline-block;
112
+
113
+ -webkit-transition: color 0.2s ease;
114
+ -moz-transition: color 0.2s ease;
115
+ -o-transition: color 0.2s ease;
116
+ -ms-transition: color 0.2s ease;
117
+ transition: color 0.2s ease;
118
+ }
119
+
120
+ /* Flyout Direction */
121
+ .ui.dropdown .menu {
122
+ left: 0px;
123
+ }
124
+
125
+
126
+ /*--------------
127
+ Sub Menu
128
+ ---------------*/
129
+
130
+ .ui.dropdown .menu .menu {
131
+ top: 0% !important;
132
+ left: 100% !important;
133
+ margin: 0em !important;
134
+ border-radius: 0 0.325em 0.325em 0em !important;
135
+ }
136
+ .ui.dropdown .menu .menu:after {
137
+ display: none;
138
+ }
139
+
140
+ .ui.dropdown .menu .item {
141
+ cursor: pointer;
142
+ border: none;
143
+ border-top: 1px solid rgba(0, 0, 0, 0.05);
144
+ height: auto;
145
+
146
+ font-size: 0.875em;
147
+ display: block;
148
+ color: rgba(0, 0, 0, 0.75);
149
+
150
+ padding: 0.85em 1em !important;
151
+ font-size: 0.875rem;
152
+ text-transform: none;
153
+ font-weight: normal;
154
+ text-align: left;
155
+
156
+ -webkit-touch-callout: none;
157
+ }
158
+ .ui.dropdown .menu .item:before {
159
+ display: none;
160
+ }
161
+ .ui.dropdown .menu .item .icon {
162
+ margin-right: 0.75em;
163
+ }
164
+
165
+ .ui.dropdown .menu .item:first-child {
166
+ border-top: none;
167
+ }
168
+
169
+ /*******************************
170
+ Coupling
171
+ *******************************/
172
+
173
+ /* Opposite on last menu on right */
174
+ .ui.menu .right.menu .dropdown:last-child .menu,
175
+ .ui.buttons > .ui.dropdown:last-child .menu {
176
+ left: auto;
177
+ right: 0px;
178
+ }
179
+
180
+
181
+ /*******************************
182
+ States
183
+ *******************************/
184
+
185
+ /* Dropdown Visible */
186
+ .ui.visible.dropdown {
187
+ border-bottom-left-radius: 0em !important;
188
+ border-bottom-right-radius: 0em !important;
189
+ }
190
+ .ui.visible.dropdown > .menu {
191
+ display: block;
192
+ }
193
+
194
+ /* Menu Item Hover */
195
+ .ui.dropdown .menu .item:hover {
196
+ background-color: rgba(0, 0, 0, 0.02);
197
+ z-index: 12;
198
+ }
199
+
200
+ /* Menu Item Active */
201
+ .ui.dropdown .menu .active.item {
202
+ box-shadow: none;
203
+ background-color: rgba(0, 0, 0, 0.04);
204
+ border-left: none;
205
+
206
+ -webkit-box-shadow: none;
207
+ -moz-shadow: none;
208
+ box-shadow: none;
209
+ z-index: 12;
210
+ }
211
+
212
+ /* Default Text */
213
+ .ui.dropdown > .default.text,
214
+ .ui.default.dropdown > .text {
215
+ color: rgba(0, 0, 0, 0.5);
216
+ }
217
+ .ui.dropdown:hover > .default.text,
218
+ .ui.default.dropdown:hover > .text {
219
+ color: rgba(0, 0, 0, 0.8);
220
+ }
221
+
222
+
223
+ /*******************************
224
+ Variations
225
+ *******************************/
226
+
227
+ /*--------------
228
+ Simple
229
+ ---------------*/
230
+ /* Displays without javascript */
231
+
232
+ .ui.simple.dropdown .menu:before,
233
+ .ui.simple.dropdown .menu:after {
234
+ display: none;
235
+ }
236
+ .ui.simple.dropdown .menu {
237
+ display: block;
238
+ overflow: hidden;
239
+ top: -9999px !important;
240
+ position: absolute;
241
+ opacity: 0;
242
+ width: 0;
243
+ height: 0;
244
+ -webkit-transition: opacity 0.2s ease-out;
245
+ -moz-transition: opacity 0.2s ease-out;
246
+ -o-transition: opacity 0.2s ease-out;
247
+ -ms-transition: opacity 0.2s ease-out;
248
+ transition: opacity 0.2s ease-out;
249
+ }
250
+
251
+ .ui.simple.active.dropdown,
252
+ .ui.simple.dropdown:hover {
253
+ border-bottom-left-radius: 0em !important;
254
+ border-bottom-right-radius: 0em !important;
255
+ }
256
+
257
+ .ui.simple.active.dropdown > .menu,
258
+ .ui.simple.dropdown:hover > .menu {
259
+ overflow: visible;
260
+ width: auto;
261
+ height: auto;
262
+ top: 100% !important;
263
+ opacity: 1;
264
+ }
265
+ .ui.simple.dropdown > .menu .item:active > .menu,
266
+ .ui.simple.dropdown:hover > .menu .item:hover > .menu {
267
+ overflow: visible;
268
+ width: auto;
269
+ height: auto;
270
+ top: 0% !important;
271
+ left: 100% !important;
272
+ opacity: 1;
273
+ }
274
+ .ui.simple.disabled.dropdown:hover .menu {
275
+ display: none;
276
+ height: 0px;
277
+ width: 0px;
278
+ overflow: hidden;
279
+ }
280
+
281
+
282
+ /*--------------
283
+ Selection
284
+ ---------------*/
285
+ /* Displays like a select box */
286
+
287
+ .ui.selection.dropdown {
288
+ cursor: pointer;
289
+ display: inline-block;
290
+
291
+ word-wrap: break-word;
292
+ white-space: normal;
293
+
294
+ background-color: #FFFFFF;
295
+ padding: 0.5em 1em;
296
+
297
+ line-height: 1.33;
298
+ color: rgba(0, 0, 0, 0.8);
299
+
300
+ -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
301
+ -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
302
+ box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
303
+
304
+ -webkit-border-radius: 0.3125em !important;
305
+ -moz-border-radius: 0.3125em !important;
306
+ border-radius: 0.3125em !important;
307
+ }
308
+ .ui.selection.dropdown > .dropdown.icon {
309
+ float: right;
310
+
311
+ opacity: 0.7;
312
+ margin: 0.2em 0em 0.2em 1.25em;
313
+
314
+ -webkit-transition: opacity 0.2s ease-out;
315
+ -moz-transition: opacity 0.2s ease-out;
316
+ -o-transition: opacity 0.2s ease-out;
317
+ -ms-transition: opacity 0.2s ease-out;
318
+ transition: opacity 0.2s ease-out;
319
+ }
320
+
321
+ .ui.selection.dropdown,
322
+ .ui.selection.dropdown .menu {
323
+ top: 100%;
324
+ -webkit-transition: box-shadow 0.2s ease-out;
325
+ -moz-transition: box-shadow 0.2s ease-out;
326
+ -o-transition: box-shadow 0.2s ease-out;
327
+ -ms-transition: box-shadow 0.2s ease-out;
328
+ transition: box-shadow 0.2s ease-out;
329
+ }
330
+
331
+ .ui.selection.dropdown .menu {
332
+ max-height: 312px;
333
+
334
+ overflow-x: hidden;
335
+ overflow-y: auto;
336
+
337
+ -webkit-box-shadow: 0px 1px 0px 1px #EEEEEE;
338
+ -moz-box-shadow: 0px 1px 0px 1px #EEEEEE;
339
+ box-shadow: 0px 1px 0px 1px #EEEEEE;
340
+
341
+ -moz-border-radius: 0px 0px 0.325em 0.325em;
342
+ -webkit-border-radius: 0px 0px 0.325em 0.325em;
343
+ border-radius: 0px 0px 0.325em 0.325em;
344
+ }
345
+ .ui.selection.dropdown .menu:after,
346
+ .ui.selection.dropdown .menu:before {
347
+ display: none;
348
+ }
349
+ .ui.selection.dropdown .menu img {
350
+ height: 2.5em;
351
+ display: inline-block;
352
+ vertical-align: middle;
353
+ margin-right: 0.5em;
354
+ }
355
+
356
+ /* Hover */
357
+ .ui.selection.dropdown:hover,
358
+ .ui.selection.dropdown.hover {
359
+ -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
360
+ -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
361
+ box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
362
+ }
363
+ .ui.selection.dropdown:hover > .dropdown.icon {
364
+ opacity: 1;
365
+ }
366
+
367
+ /* Visible */
368
+ .ui.selection.active.dropdown {
369
+ -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) !important;
370
+ -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) !important;
371
+ box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) !important;
372
+
373
+ -webkit-border-radius: 0.3125em 0.3125em 0em 0em !important;
374
+ -moz-border-radius: 0.3125em 0.3125em 0em 0em !important;
375
+ border-radius: 0.3125em 0.3125em 0em 0em !important;
376
+ }
377
+ .ui.selection.active.dropdown > .dropdown.icon {
378
+ opacity: 1;
379
+ }
380
+ .ui.selection.active.dropdown .menu {
381
+ -webkit-box-shadow: 0px 1px 0px 1px #D3D3D3;
382
+ -moz-box-shadow: 0px 1px 0px 1px #D3D3D3;
383
+ box-shadow: 0px 1px 0px 1px #D3D3D3;
384
+ }
385
+
386
+ /*--------------
387
+ Fluid
388
+ ---------------*/
389
+
390
+ .ui.fluid.dropdown {
391
+ display: block;
392
+ }
393
+
394
+ /*--------------
395
+ Inline
396
+ ---------------*/
397
+
398
+ .ui.inline.dropdown {
399
+ cursor: pointer;
400
+ display: inline-block;
401
+ color: inherit;
402
+ }
403
+ .ui.inline.dropdown .dropdown.icon {
404
+ margin: 0em 0.5em 0em 0.25em;
405
+ }
406
+ .ui.inline.dropdown .text {
407
+ font-weight: bold;
408
+ }
409
+ .ui.inline.dropdown .menu {
410
+ cursor: auto;
411
+ margin-top: 0.25em;
412
+
413
+ -webkit-border-radius: 0.325em;
414
+ -moz-border-radius: 0.325em;
415
+ border-radius: 0.325em;
416
+ }
417
+
418
+ /*--------------
419
+ Floating
420
+ ---------------*/
421
+
422
+ .ui.floating.dropdown .menu {
423
+ left: 0;
424
+ right: auto;
425
+
426
+ margin-top: 0.5em;
427
+
428
+ -webkit-border-radius: 0.325em;
429
+ -moz-border-radius: 0.325em;
430
+ border-radius: 0.325em;
431
+ }
432
+
433
+ /*--------------
434
+ Pointing
435
+ ---------------*/
436
+
437
+
438
+ .ui.pointing.dropdown .menu {
439
+ top: 100%;
440
+ margin-top: 0.75em;
441
+ -moz-border-radius: 0.325em;
442
+ -webkit-border-radius: 0.325em;
443
+ border-radius: 0.325em;
444
+ }
445
+
446
+ .ui.pointing.dropdown .menu:after {
447
+ display: block;
448
+ position: absolute;
449
+ pointer-events: none;
450
+ content: " ";
451
+ visibility: visible;
452
+
453
+ width: 0.5em;
454
+ height: 0.5em;
455
+
456
+ -moz-box-shadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.05);
457
+ -webkit-box-shadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.05);
458
+ box-shadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.05);
459
+
460
+ background-image: none;
461
+ background-color: #FFFFFF;
462
+
463
+ -webkit-transform: rotate(45deg);
464
+ -moz-transform: rotate(45deg);
465
+ transform: rotate(45deg);
466
+ z-index: 2;
467
+ }
468
+
469
+ .ui.pointing.dropdown .menu .item.active:first-child {
470
+ background: transparent -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.03));
471
+ background: transparent -moz-linear-gradient(transparent, rgba(0, 0, 0, 0.03));
472
+ background: transparent -o-linear-gradient(transparent, rgba(0, 0, 0, 0.03));
473
+ background: transparent -ms-linear-gradient(transparent, rgba(0, 0, 0, 0.03));
474
+ background: transparent linear-gradient(transparent, rgba(0, 0, 0, 0.03));
475
+ }
476
+
477
+ /* Directions */
478
+
479
+ .ui.pointing.dropdown .menu:after {
480
+ top: -0.25em;
481
+ left: 50%;
482
+ margin: 0em 0em 0em -0.25em;
483
+ }
484
+ .ui.top.left.pointing.dropdown .menu {
485
+ top: 100%;
486
+ bottom: auto;
487
+ left: 0%;
488
+ right: auto;
489
+ margin: 0.75em 0em 0em;
490
+ }
491
+ .ui.top.left.pointing.dropdown .menu:after {
492
+ top: -0.25em;
493
+ left: 1.25em;
494
+ right: auto;
495
+ margin: 0em;
496
+ -webkit-transform: rotate(45deg);
497
+ -moz-transform: rotate(45deg);
498
+ transform: rotate(45deg);
499
+ }
500
+ .ui.top.right.pointing.dropdown .menu {
501
+ top: 100%;
502
+ bottom: auto;
503
+ right: 0%;
504
+ left: auto;
505
+ margin: 0.75em 0em 0em;
506
+ }
507
+ .ui.top.right.pointing.dropdown .menu:after {
508
+ top: -0.25em;
509
+ left: auto;
510
+ right: 1.25em;
511
+ margin: 0em;
512
+ -webkit-transform: rotate(45deg);
513
+ -moz-transform: rotate(45deg);
514
+ transform: rotate(45deg);
515
+ }
516
+
517
+ .ui.left.pointing.dropdown .menu {
518
+ top: 0%;
519
+ left: 100%;
520
+ right: auto;
521
+ margin: 0em 0em 0em 0.75em;
522
+ }
523
+ .ui.left.pointing.dropdown .menu:after {
524
+ top: 1em;
525
+ left: -0.25em;
526
+ margin: 0em 0em 0em 0em;
527
+
528
+ -webkit-transform: rotate(-45deg);
529
+ -moz-transform: rotate(-45deg);
530
+ transform: rotate(-45deg);
531
+ }
532
+
533
+ .ui.right.pointing.dropdown .menu {
534
+ top: 0%;
535
+ left: auto;
536
+ right: 100%;
537
+ margin: 0em 0.75em 0em 0em;
538
+ }
539
+ .ui.right.pointing.dropdown .menu:after {
540
+ top: 1em;
541
+ left: auto;
542
+ right: -0.25em;
543
+ margin: 0em 0em 0em 0em;
544
+
545
+ -webkit-transform: rotate(135deg);
546
+ -moz-transform: rotate(135deg);
547
+ transform: rotate(135deg);
548
+ }