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,242 @@
1
+ /*
2
+ * # Semantic Text Block - 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 29 2013
11
+ */
12
+ /*******************************
13
+ Text Block
14
+ *******************************/
15
+ .ui.message {
16
+ position: relative;
17
+ min-height: 18px;
18
+ margin: 1em 0em;
19
+ height: auto;
20
+ background-color: #EFEFEF;
21
+ padding: 1em;
22
+ line-height: 1.33;
23
+ color: rgba(0, 0, 0, 0.6);
24
+ -webkit-transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease;
25
+ -moz-transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease;
26
+ -o-transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease;
27
+ -ms-transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease;
28
+ transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease;
29
+ -webkit-box-sizing: border-box;
30
+ -moz-box-sizing: border-box;
31
+ -ms-box-sizing: border-box;
32
+ box-sizing: border-box;
33
+ -webkit-border-radius: 0.325em 0.325em 0.325em 0.325em;
34
+ -moz-border-radius: 0.325em 0.325em 0.325em 0.325em;
35
+ border-radius: 0.325em 0.325em 0.325em 0.325em;
36
+ }
37
+ .ui.segment:first-child {
38
+ margin-top: 0em;
39
+ }
40
+ .ui.segment:last-child {
41
+ margin-bottom: 0em;
42
+ }
43
+ /*--------------
44
+ Content
45
+ ---------------*/
46
+ /* block with headers */
47
+ .ui.message .header {
48
+ margin: 0em;
49
+ font-size: 1.33em;
50
+ font-weight: bold;
51
+ }
52
+ /* block with paragraphs */
53
+ .ui.message p {
54
+ opacity: 0.85;
55
+ margin: 0.3em 0em;
56
+ }
57
+ .ui.message > :first-child {
58
+ margin-top: 0em;
59
+ }
60
+ .ui.message > :last-child {
61
+ margin-bottom: 0em;
62
+ }
63
+ /* block with child list */
64
+ .ui.message ul.list {
65
+ opacity: 0.85;
66
+ list-style-position: inside;
67
+ margin: 0.2em 0em;
68
+ padding: 0em;
69
+ }
70
+ .ui.message ul.list li {
71
+ position: relative;
72
+ list-style-type: none;
73
+ margin: 0em 0em 0em 1em;
74
+ padding: 0em;
75
+ }
76
+ .ui.message ul.list li:before {
77
+ position: absolute;
78
+ content: '\2022';
79
+ top: -0.05em;
80
+ left: -0.8em;
81
+ height: 100%;
82
+ vertical-align: baseline;
83
+ opacity: 0.5;
84
+ }
85
+ .ui.message ul.list li:first-child {
86
+ margin-top: 0em;
87
+ }
88
+ /* dismissable block */
89
+ .ui.message > .icon.close {
90
+ cursor: pointer;
91
+ position: absolute;
92
+ top: 1em;
93
+ right: 0.5em;
94
+ opacity: 0.7;
95
+ -webkit-transition: opacity 0.1s linear
96
+ ;
97
+ -moz-transition: opacity 0.1s linear
98
+ ;
99
+ -o-transition: opacity 0.1s linear
100
+ ;
101
+ -ms-transition: opacity 0.1s linear
102
+ ;
103
+ transition: opacity 0.1s linear
104
+ ;
105
+ }
106
+ .ui.message > .icon.close:hover {
107
+ opacity: 1;
108
+ }
109
+ /*******************************
110
+ States
111
+ *******************************/
112
+ .ui.message.visible,
113
+ .ui.header.visible {
114
+ display: block !important;
115
+ }
116
+ .ui.message.hidden,
117
+ .ui.header.hidden {
118
+ display: none;
119
+ }
120
+ /*******************************
121
+ Variations
122
+ *******************************/
123
+ /*--------------
124
+ Compact
125
+ ---------------*/
126
+ .ui.compact.message {
127
+ display: inline-block;
128
+ }
129
+ /*--------------
130
+ Attached
131
+ ---------------*/
132
+ .ui.attached.message {
133
+ margin-left: -1px;
134
+ margin-right: -1px;
135
+ margin-bottom: -1px;
136
+ -webkit-border-radius: 0.325em 0.325em 0em 0em;
137
+ -moz-border-radius: 0.325em 0.325em 0em 0em;
138
+ border-radius: 0.325em 0.325em 0em 0em;
139
+ -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.1) inset;
140
+ -moz-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.1) inset;
141
+ box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.1) inset;
142
+ }
143
+ .ui.bottom.attached.message {
144
+ margin-top: -1px;
145
+ -webkit-border-radius: 0em 0em 0.325em 0.325em;
146
+ -moz-border-radius: 0em 0em 0.325em 0.325em;
147
+ border-radius: 0em 0em 0.325em 0.325em;
148
+ }
149
+ /*--------------
150
+ Icon
151
+ ---------------*/
152
+ .ui.icon.message {
153
+ display: table;
154
+ width: 100%;
155
+ }
156
+ .ui.icon.message > .icon {
157
+ display: table-cell;
158
+ vertical-align: middle;
159
+ font-size: 3.8em;
160
+ padding-right: 0.4em;
161
+ opacity: 0.2;
162
+ }
163
+ .ui.icon.message > .content {
164
+ display: table-cell;
165
+ vertical-align: top;
166
+ }
167
+ /*--------------
168
+ Inverted
169
+ ---------------*/
170
+ .ui.inverted.message {
171
+ background-color: rgba(255, 255, 255, 0.05);
172
+ color: rgba(255, 255, 255, 0.95);
173
+ }
174
+ /*--------------
175
+ Floating
176
+ ---------------*/
177
+ .ui.floating.message {
178
+ -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset;
179
+ -moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset;
180
+ box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset;
181
+ }
182
+ /*--------------
183
+ Colors
184
+ ---------------*/
185
+ .ui.black.message {
186
+ background-color: #333333;
187
+ color: rgba(255, 255, 255, 0.95);
188
+ }
189
+ /*--------------
190
+ Types
191
+ ---------------*/
192
+ .ui.blue.message,
193
+ .ui.info.message {
194
+ background-color: #E6F4F9;
195
+ color: #4D8796;
196
+ }
197
+ /* Green Text Block */
198
+ .ui.green.message {
199
+ background-color: #DEFCD5;
200
+ color: #52A954;
201
+ }
202
+ /* Yellow Text Block */
203
+ .ui.yellow.message,
204
+ .ui.warning.message {
205
+ background-color: #F6F3D5;
206
+ color: #96904D;
207
+ }
208
+ /* Red Text Block */
209
+ .ui.red.message {
210
+ background-color: #F1D7D7;
211
+ color: #A95252;
212
+ }
213
+ /* Success Text Block */
214
+ .ui.success.message,
215
+ .ui.positive.message {
216
+ background-color: #5BBD72;
217
+ color: #FFFFFF;
218
+ }
219
+ /* Error Text Block */
220
+ .ui.error.message,
221
+ .ui.negative.message {
222
+ background-color: #D95C5C;
223
+ color: #FFFFFF;
224
+ }
225
+ /*--------------
226
+ Sizes
227
+ ---------------*/
228
+ .ui.small.message {
229
+ font-size: 0.875em;
230
+ }
231
+ .ui.message {
232
+ font-size: 1em;
233
+ }
234
+ .ui.large.message {
235
+ font-size: 1.125em;
236
+ }
237
+ .ui.huge.message {
238
+ font-size: 1.5em;
239
+ }
240
+ .ui.massive.message {
241
+ font-size: 2em;
242
+ }
@@ -0,0 +1,123 @@
1
+ /*
2
+ * # Semantic Modal
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: Aug 05, 2013
11
+ */
12
+ /*******************************
13
+ Modal
14
+ *******************************/
15
+ .ui.modal {
16
+ display: none;
17
+ position: fixed;
18
+ z-index: 1001;
19
+ top: 50%;
20
+ left: 50%;
21
+ text-align: left;
22
+ width: 800px;
23
+ margin-left: -400px;
24
+ background-color: #FFFFFF;
25
+ border: 1px solid #DDDDDD;
26
+ -webkit-border-radius: 5px;
27
+ -moz-border-radius: 5px;
28
+ border-radius: 5px;
29
+ }
30
+ /*******************************
31
+ Content
32
+ *******************************/
33
+ /*--------------
34
+ Close
35
+ ---------------*/
36
+ .ui.modal > .close {
37
+ cursor: pointer;
38
+ position: absolute;
39
+ opacity: 0.8;
40
+ font-size: 1.25em;
41
+ top: -1.75em;
42
+ right: -1.75em;
43
+ color: #FFFFFF;
44
+ }
45
+ .ui.modal > .close:hover {
46
+ opacity: 1;
47
+ }
48
+ /*--------------
49
+ Header
50
+ ---------------*/
51
+ .ui.modal > .header {
52
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
53
+ margin: 0em;
54
+ padding: 1.5rem 2rem;
55
+ font-size: 1.6em;
56
+ font-weight: bold;
57
+ -webkit-border-radius: 0.325em 0.325em 0px 0px;
58
+ -moz-border-radius: 0.325em 0.325em 0px 0px;
59
+ border-radius: 0.325em 0.325em 0px 0px;
60
+ }
61
+ /*--------------
62
+ Content
63
+ ---------------*/
64
+ .ui.modal > .content {
65
+ display: table;
66
+ width: 100%;
67
+ position: relative;
68
+ padding: 2em;
69
+ background-color: #F4F4F4;
70
+ -webkit-box-sizing: border-box;
71
+ -moz-box-sizing: border-box;
72
+ -ms-box-sizing: border-box;
73
+ box-sizing: border-box;
74
+ }
75
+ .ui.modal > .content > .left {
76
+ display: table-cell;
77
+ padding-right: 5%;
78
+ }
79
+ .ui.modal > .content > .right {
80
+ display: table-cell;
81
+ padding-left: 5%;
82
+ vertical-align: middle;
83
+ box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1);
84
+ }
85
+ .ui.modal > .content p {
86
+ line-height: 1.6;
87
+ }
88
+ /*--------------
89
+ Actions
90
+ ---------------*/
91
+ .ui.modal .actions {
92
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
93
+ padding: 1rem 2rem;
94
+ text-align: right;
95
+ }
96
+ .ui.modal .actions > .button {
97
+ margin-left: 0.75em;
98
+ }
99
+ /*******************************
100
+ Types
101
+ *******************************/
102
+ .ui.basic.modal {
103
+ background-color: transparent;
104
+ border: none;
105
+ color: #FFFFFF;
106
+ }
107
+ .ui.basic.modal .content {
108
+ background-color: transparent;
109
+ }
110
+ /*******************************
111
+ Variations
112
+ *******************************/
113
+ /* A modal that cannot fit on the page */
114
+ .ui.modal.scrolling {
115
+ position: absolute;
116
+ margin-top: 100px;
117
+ }
118
+ /*******************************
119
+ States
120
+ *******************************/
121
+ .ui.active.modal {
122
+ display: block;
123
+ }
@@ -0,0 +1,130 @@
1
+ /*
2
+ * # Semantic Nag
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 17 2013
11
+ */
12
+ /*******************************
13
+ Nag
14
+ *******************************/
15
+ .ui.nag {
16
+ display: none;
17
+ opacity: 0.95;
18
+ position: relative;
19
+ top: 0px;
20
+ left: 0%;
21
+ z-index: 101;
22
+ min-height: 0;
23
+ width: 100%;
24
+ -webkit-box-sizing: border-box;
25
+ -moz-box-sizing: border-box;
26
+ -ms-box-sizing: border-box;
27
+ box-sizing: border-box;
28
+ margin: 0em;
29
+ line-height: 3em;
30
+ padding: 0em 1em;
31
+ background-color: #555555;
32
+ -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
33
+ -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
34
+ box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
35
+ font-size: 1em;
36
+ text-align: center;
37
+ color: rgba(255, 255, 255, 0.8);
38
+ -webkit-border-radius: 0px 0px 5px 5px;
39
+ -moz-border-radius: 0px 0px 5px 5px;
40
+ border-radius: 0px 0px 5px 5px;
41
+ -webkit-transition: 0.2s background;
42
+ -moz-transition: 0.2s background;
43
+ -o-transition: 0.2s background;
44
+ -ms-transition: 0.2s background;
45
+ transition: 0.2s background;
46
+ }
47
+ a.ui.nag {
48
+ cursor: pointer;
49
+ }
50
+ .ui.nag > .title {
51
+ display: inline-block;
52
+ margin: 0em 0.5em;
53
+ color: #FFFFFF;
54
+ }
55
+ .ui.nag > .close.icon {
56
+ cursor: pointer;
57
+ opacity: 0.4;
58
+ position: absolute;
59
+ top: 50%;
60
+ right: 1em;
61
+ margin-top: -0.5em;
62
+ color: #FFFFFF;
63
+ -webkit-transition: 0.1s opacity;
64
+ -moz-transition: 0.1s opacity;
65
+ -o-transition: 0.1s opacity;
66
+ -ms-transition: 0.1s opacity;
67
+ transition: 0.1s opacity;
68
+ }
69
+ /*******************************
70
+ States
71
+ *******************************/
72
+ /* Hover */
73
+ .ui.nag:hover {
74
+ opacity: 1;
75
+ }
76
+ .ui.nag .close:hover {
77
+ opacity: 1;
78
+ }
79
+ /*******************************
80
+ Variations
81
+ *******************************/
82
+ /*--------------
83
+ Static
84
+ ---------------*/
85
+ .ui.overlay.nag {
86
+ position: absolute;
87
+ display: block;
88
+ }
89
+ /*--------------
90
+ Fixed
91
+ ---------------*/
92
+ .ui.fixed.nag {
93
+ position: fixed;
94
+ }
95
+ /*--------------
96
+ Bottom
97
+ ---------------*/
98
+ .ui.botton.nag {
99
+ -webkit-border-radius: 5px 5px 0px 0px;
100
+ -moz-border-radius: 5px 5px 0px 0px;
101
+ border-radius: 5px 5px 0px 0px;
102
+ }
103
+ .ui.fixed.bottom.nags,
104
+ .ui.fixed.bottom.nag {
105
+ top: auto;
106
+ bottom: 0px;
107
+ }
108
+ /*--------------
109
+ White
110
+ ---------------*/
111
+ .ui.white.nags .nag,
112
+ .ui.white.nag {
113
+ background-color: #F1F1F1;
114
+ text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
115
+ color: #ACACAC;
116
+ }
117
+ .ui.white.nags .nag .close,
118
+ .ui.white.nags .nag .title,
119
+ .ui.white.nag .close,
120
+ .ui.white.nag .title {
121
+ color: #333333;
122
+ }
123
+ /*******************************
124
+ Groups
125
+ *******************************/
126
+ .ui.nags .nag {
127
+ -webkit-border-radius: 0px;
128
+ -moz-border-radius: 0px;
129
+ border-radius: 0px;
130
+ }
@@ -0,0 +1,209 @@
1
+ /*
2
+ * # Semantic Popup
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 17 2013
11
+ */
12
+ /*******************************
13
+ Popup
14
+ *******************************/
15
+ .ui.popup {
16
+ display: none;
17
+ position: absolute;
18
+ top: 0px;
19
+ right: 0px;
20
+ z-index: 900;
21
+ border: 1px solid #DCDDDE;
22
+ max-width: 250px;
23
+ background-color: #FFFFFF;
24
+ padding: 0.8em 1.2em;
25
+ font-size: 0.875rem;
26
+ font-weight: normal;
27
+ font-style: normal;
28
+ color: rgba(0, 0, 0, 0.7);
29
+ -webkit-border-radius: 0.2em;
30
+ -moz-border-radius: 0.2em;
31
+ border-radius: 0.2em;
32
+ -webkit-box-shadow: 0px 1px 1px #DCDDDE;
33
+ -moz-box-shadow: 0px 1px 1px #DCDDDE;
34
+ box-shadow: 0px 1px 1px #DCDDDE;
35
+ }
36
+ .ui.popup .header {
37
+ padding: 0em 0em 0.5em;
38
+ font-size: 1.125em;
39
+ line-height: 1.2;
40
+ font-weight: bold;
41
+ }
42
+ .ui.popup:before {
43
+ position: absolute;
44
+ content: "";
45
+ width: 0.75em;
46
+ height: 0.75rem;
47
+ background-image: none;
48
+ background-color: #FFFFFF;
49
+ -webkit-transform: rotate(45deg);
50
+ -moz-transform: rotate(45deg);
51
+ transform: rotate(45deg);
52
+ z-index: 2;
53
+ -webkit-box-sizing: border-box;
54
+ -moz-box-sizing: border-box;
55
+ -ms-box-sizing: border-box;
56
+ box-sizing: border-box;
57
+ -webkit-box-shadow: 1px 1px 1px #DCDDDE;
58
+ -moz-box-shadow: 1px 1px 1px #DCDDDE;
59
+ box-shadow: 1px 1px 1px #DCDDDE;
60
+ }
61
+ .ui.popup .ui.button {
62
+ width: 100%;
63
+ }
64
+ /*******************************
65
+ Types
66
+ *******************************/
67
+ /*--------------
68
+ Spacing
69
+ ---------------*/
70
+ .ui.popup {
71
+ margin: 0em;
72
+ }
73
+ .ui.popup.bottom {
74
+ margin: 0.75em 0em 0em;
75
+ }
76
+ .ui.popup.top {
77
+ margin: 0em 0em 0.75em;
78
+ }
79
+ .ui.popup.left.center {
80
+ margin: 0em 0.75em 0em 0em;
81
+ }
82
+ .ui.popup.right.center {
83
+ margin: 0em 0em 0em 0.75em;
84
+ }
85
+ .ui.popup.center {
86
+ margin-left: -1.25em;
87
+ }
88
+ /*--------------
89
+ Pointer
90
+ ---------------*/
91
+ /*--- Below ---*/
92
+ .ui.bottom.center.popup:before {
93
+ margin-left: -0.4em;
94
+ top: -0.4em;
95
+ left: 50%;
96
+ right: auto;
97
+ bottom: auto;
98
+ -webkit-box-shadow: -1px -1px 1px #dcddde;
99
+ -moz-box-shadow: -1px -1px 1px #dcddde;
100
+ box-shadow: -1px -1px 1px #dcddde;
101
+ }
102
+ .ui.bottom.left.popup:before {
103
+ top: -0.4em;
104
+ left: 1em;
105
+ right: auto;
106
+ bottom: auto;
107
+ margin-left: 0em;
108
+ -webkit-box-shadow: -1px -1px 1px #dcddde;
109
+ -moz-box-shadow: -1px -1px 1px #dcddde;
110
+ box-shadow: -1px -1px 1px #dcddde;
111
+ }
112
+ .ui.bottom.right.popup:before {
113
+ top: -0.4em;
114
+ right: 1em;
115
+ bottom: auto;
116
+ left: auto;
117
+ margin-left: 0em;
118
+ -webkit-box-shadow: -1px -1px 1px #dcddde;
119
+ -moz-box-shadow: -1px -1px 1px #dcddde;
120
+ box-shadow: -1px -1px 1px #dcddde;
121
+ }
122
+ /*--- Above ---*/
123
+ .ui.top.center.popup:before {
124
+ top: auto;
125
+ right: auto;
126
+ bottom: -0.4em;
127
+ left: 50%;
128
+ margin-left: -0.4em;
129
+ }
130
+ .ui.top.left.popup:before {
131
+ bottom: -0.4em;
132
+ left: 1em;
133
+ top: auto;
134
+ right: auto;
135
+ margin-left: 0em;
136
+ }
137
+ .ui.top.right.popup:before {
138
+ bottom: -0.4em;
139
+ right: 1em;
140
+ top: auto;
141
+ left: auto;
142
+ margin-left: 0em;
143
+ }
144
+ /*--- Left ---*/
145
+ .ui.left.center.popup:before {
146
+ top: 50%;
147
+ right: -0.35em;
148
+ bottom: auto;
149
+ left: auto;
150
+ margin-top: -0.4em;
151
+ -moz-box-shadow: 1px -1px 1px #dcddde;
152
+ -webkit-box-shadow: 1px -1px 1px #dcddde;
153
+ box-shadow: 1px -1px 1px #dcddde;
154
+ }
155
+ /*--- Right ---*/
156
+ .ui.right.center.popup:before {
157
+ top: 50%;
158
+ left: -0.35em;
159
+ bottom: auto;
160
+ right: auto;
161
+ margin-top: -0.4em;
162
+ -moz-box-shadow: -1px 1px 1px #dcddde;
163
+ -webkit-box-shadow: -1px 1px 1px #dcddde;
164
+ box-shadow: -1px 1px 1px #dcddde;
165
+ }
166
+ /*******************************
167
+ States
168
+ *******************************/
169
+ .ui.loading.popup {
170
+ display: block;
171
+ visibility: hidden;
172
+ }
173
+ .ui.active.popup {
174
+ display: block;
175
+ }
176
+ /*******************************
177
+ Variations
178
+ *******************************/
179
+ /*--------------
180
+ Size
181
+ ---------------*/
182
+ .ui.small.popup {
183
+ font-size: 0.75rem;
184
+ }
185
+ .ui.large.popup {
186
+ font-size: 1rem;
187
+ }
188
+ /*--------------
189
+ Colors
190
+ ---------------*/
191
+ /* Inverted colors */
192
+ .ui.inverted.popup {
193
+ background-color: #333333;
194
+ border: none;
195
+ color: #FFFFFF;
196
+ -webkit-box-shadow: none;
197
+ -moz-box-shadow: none;
198
+ box-shadow: none;
199
+ }
200
+ .ui.inverted.popup .header {
201
+ background-color: rgba(0, 0, 0, 0.2);
202
+ color: #FFFFFF;
203
+ }
204
+ .ui.inverted.popup:before {
205
+ background-color: #333333;
206
+ -webkit-box-shadow: none;
207
+ -moz-box-shadow: none;
208
+ box-shadow: none;
209
+ }