fomantic-ui-sass 2.6.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (165) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +27 -0
  3. data/.rspec +1 -0
  4. data/.travis.yml +5 -0
  5. data/CHANGELOG.md +370 -0
  6. data/Gemfile +4 -0
  7. data/LICENSE.txt +22 -0
  8. data/README.md +177 -0
  9. data/Rakefile +8 -0
  10. data/app/assets/fonts/semantic-ui/brand-icons.eot +0 -0
  11. data/app/assets/fonts/semantic-ui/brand-icons.svg +1008 -0
  12. data/app/assets/fonts/semantic-ui/brand-icons.ttf +0 -0
  13. data/app/assets/fonts/semantic-ui/brand-icons.woff +0 -0
  14. data/app/assets/fonts/semantic-ui/brand-icons.woff2 +0 -0
  15. data/app/assets/fonts/semantic-ui/icons.eot +0 -0
  16. data/app/assets/fonts/semantic-ui/icons.otf +0 -0
  17. data/app/assets/fonts/semantic-ui/icons.svg +1518 -0
  18. data/app/assets/fonts/semantic-ui/icons.ttf +0 -0
  19. data/app/assets/fonts/semantic-ui/icons.woff +0 -0
  20. data/app/assets/fonts/semantic-ui/icons.woff2 +0 -0
  21. data/app/assets/fonts/semantic-ui/outline-icons.eot +0 -0
  22. data/app/assets/fonts/semantic-ui/outline-icons.svg +366 -0
  23. data/app/assets/fonts/semantic-ui/outline-icons.ttf +0 -0
  24. data/app/assets/fonts/semantic-ui/outline-icons.woff +0 -0
  25. data/app/assets/fonts/semantic-ui/outline-icons.woff2 +0 -0
  26. data/app/assets/images/semantic-ui/flags.png +0 -0
  27. data/app/assets/javascripts/semantic-ui.js +27 -0
  28. data/app/assets/javascripts/semantic-ui/accordion.js +613 -0
  29. data/app/assets/javascripts/semantic-ui/api.js +1167 -0
  30. data/app/assets/javascripts/semantic-ui/calendar.js +1476 -0
  31. data/app/assets/javascripts/semantic-ui/checkbox.js +828 -0
  32. data/app/assets/javascripts/semantic-ui/colorize.js +280 -0
  33. data/app/assets/javascripts/semantic-ui/dimmer.js +735 -0
  34. data/app/assets/javascripts/semantic-ui/dropdown.js +4030 -0
  35. data/app/assets/javascripts/semantic-ui/embed.js +706 -0
  36. data/app/assets/javascripts/semantic-ui/form.js +1707 -0
  37. data/app/assets/javascripts/semantic-ui/modal.js +1090 -0
  38. data/app/assets/javascripts/semantic-ui/nag.js +507 -0
  39. data/app/assets/javascripts/semantic-ui/popup.js +1532 -0
  40. data/app/assets/javascripts/semantic-ui/progress.js +923 -0
  41. data/app/assets/javascripts/semantic-ui/range.js +278 -0
  42. data/app/assets/javascripts/semantic-ui/rating.js +511 -0
  43. data/app/assets/javascripts/semantic-ui/search.js +1515 -0
  44. data/app/assets/javascripts/semantic-ui/shape.js +921 -0
  45. data/app/assets/javascripts/semantic-ui/sidebar.js +1033 -0
  46. data/app/assets/javascripts/semantic-ui/site.js +490 -0
  47. data/app/assets/javascripts/semantic-ui/state.js +708 -0
  48. data/app/assets/javascripts/semantic-ui/sticky.js +959 -0
  49. data/app/assets/javascripts/semantic-ui/tab.js +952 -0
  50. data/app/assets/javascripts/semantic-ui/toast.js +592 -0
  51. data/app/assets/javascripts/semantic-ui/transition.js +1106 -0
  52. data/app/assets/javascripts/semantic-ui/video.js +532 -0
  53. data/app/assets/javascripts/semantic-ui/visibility.js +1311 -0
  54. data/app/assets/javascripts/semantic-ui/visit.js +525 -0
  55. data/app/assets/stylesheets/semantic-ui.scss +5 -0
  56. data/app/assets/stylesheets/semantic-ui/collections/_all.scss +6 -0
  57. data/app/assets/stylesheets/semantic-ui/collections/_breadcrumb.scss +124 -0
  58. data/app/assets/stylesheets/semantic-ui/collections/_form.scss +1158 -0
  59. data/app/assets/stylesheets/semantic-ui/collections/_grid.scss +2093 -0
  60. data/app/assets/stylesheets/semantic-ui/collections/_menu.scss +2193 -0
  61. data/app/assets/stylesheets/semantic-ui/collections/_message.scss +606 -0
  62. data/app/assets/stylesheets/semantic-ui/collections/_table.scss +1117 -0
  63. data/app/assets/stylesheets/semantic-ui/elements/_all.scss +16 -0
  64. data/app/assets/stylesheets/semantic-ui/elements/_button.scss +4530 -0
  65. data/app/assets/stylesheets/semantic-ui/elements/_container.scss +145 -0
  66. data/app/assets/stylesheets/semantic-ui/elements/_divider.scss +259 -0
  67. data/app/assets/stylesheets/semantic-ui/elements/_flag.scss +1036 -0
  68. data/app/assets/stylesheets/semantic-ui/elements/_header.scss +762 -0
  69. data/app/assets/stylesheets/semantic-ui/elements/_icon.scss +6330 -0
  70. data/app/assets/stylesheets/semantic-ui/elements/_image.scss +310 -0
  71. data/app/assets/stylesheets/semantic-ui/elements/_input.scss +519 -0
  72. data/app/assets/stylesheets/semantic-ui/elements/_label.scss +1395 -0
  73. data/app/assets/stylesheets/semantic-ui/elements/_list.scss +959 -0
  74. data/app/assets/stylesheets/semantic-ui/elements/_loader.scss +458 -0
  75. data/app/assets/stylesheets/semantic-ui/elements/_placeholder.scss +242 -0
  76. data/app/assets/stylesheets/semantic-ui/elements/_rail.scss +152 -0
  77. data/app/assets/stylesheets/semantic-ui/elements/_reveal.scss +295 -0
  78. data/app/assets/stylesheets/semantic-ui/elements/_segment.scss +884 -0
  79. data/app/assets/stylesheets/semantic-ui/elements/_step.scss +675 -0
  80. data/app/assets/stylesheets/semantic-ui/globals/_all.scss +3 -0
  81. data/app/assets/stylesheets/semantic-ui/globals/_reset.scss +485 -0
  82. data/app/assets/stylesheets/semantic-ui/globals/_site.scss +206 -0
  83. data/app/assets/stylesheets/semantic-ui/globals/_variables.scss +4 -0
  84. data/app/assets/stylesheets/semantic-ui/modules/_accordion.scss +247 -0
  85. data/app/assets/stylesheets/semantic-ui/modules/_all.scss +20 -0
  86. data/app/assets/stylesheets/semantic-ui/modules/_calendar.scss +165 -0
  87. data/app/assets/stylesheets/semantic-ui/modules/_checkbox.scss +718 -0
  88. data/app/assets/stylesheets/semantic-ui/modules/_dimmer.scss +464 -0
  89. data/app/assets/stylesheets/semantic-ui/modules/_dropdown.scss +1745 -0
  90. data/app/assets/stylesheets/semantic-ui/modules/_embed.scss +165 -0
  91. data/app/assets/stylesheets/semantic-ui/modules/_modal.scss +646 -0
  92. data/app/assets/stylesheets/semantic-ui/modules/_nag.scss +148 -0
  93. data/app/assets/stylesheets/semantic-ui/modules/_popup.scss +789 -0
  94. data/app/assets/stylesheets/semantic-ui/modules/_progress.scss +523 -0
  95. data/app/assets/stylesheets/semantic-ui/modules/_range.scss +192 -0
  96. data/app/assets/stylesheets/semantic-ui/modules/_rating.scss +263 -0
  97. data/app/assets/stylesheets/semantic-ui/modules/_search.scss +445 -0
  98. data/app/assets/stylesheets/semantic-ui/modules/_shape.scss +154 -0
  99. data/app/assets/stylesheets/semantic-ui/modules/_sidebar.scss +626 -0
  100. data/app/assets/stylesheets/semantic-ui/modules/_sticky.scss +78 -0
  101. data/app/assets/stylesheets/semantic-ui/modules/_tab.scss +92 -0
  102. data/app/assets/stylesheets/semantic-ui/modules/_toast.scss +291 -0
  103. data/app/assets/stylesheets/semantic-ui/modules/_transition.scss +2059 -0
  104. data/app/assets/stylesheets/semantic-ui/modules/_video.scss +125 -0
  105. data/app/assets/stylesheets/semantic-ui/views/_ad.scss +275 -0
  106. data/app/assets/stylesheets/semantic-ui/views/_all.scss +6 -0
  107. data/app/assets/stylesheets/semantic-ui/views/_card.scss +1124 -0
  108. data/app/assets/stylesheets/semantic-ui/views/_comment.scss +296 -0
  109. data/app/assets/stylesheets/semantic-ui/views/_feed.scss +314 -0
  110. data/app/assets/stylesheets/semantic-ui/views/_item.scss +555 -0
  111. data/app/assets/stylesheets/semantic-ui/views/_statistic.scss +583 -0
  112. data/app/helpers/semantic_breadcrumbs_helper.rb +10 -0
  113. data/app/helpers/semantic_flash_helper.rb +22 -0
  114. data/app/helpers/semantic_icon_helper.rb +8 -0
  115. data/app/views/semantic/_breadcrumbs.html.erb +12 -0
  116. data/fomantic-ui-sass.gemspec +31 -0
  117. data/lib/fomantic-ui-sass.rb +62 -0
  118. data/lib/fomantic/ui/sass/breadcrumbs.rb +41 -0
  119. data/lib/fomantic/ui/sass/engine.rb +23 -0
  120. data/lib/fomantic/ui/sass/version.rb +8 -0
  121. data/spec/dummy/README.rdoc +28 -0
  122. data/spec/dummy/Rakefile +6 -0
  123. data/spec/dummy/app/assets/images/.keep +0 -0
  124. data/spec/dummy/app/assets/javascripts/application.js +13 -0
  125. data/spec/dummy/app/assets/stylesheets/application.css +13 -0
  126. data/spec/dummy/app/controllers/application_controller.rb +5 -0
  127. data/spec/dummy/app/controllers/concerns/.keep +0 -0
  128. data/spec/dummy/app/helpers/application_helper.rb +2 -0
  129. data/spec/dummy/app/mailers/.keep +0 -0
  130. data/spec/dummy/app/models/.keep +0 -0
  131. data/spec/dummy/app/models/concerns/.keep +0 -0
  132. data/spec/dummy/app/views/layouts/application.html.erb +14 -0
  133. data/spec/dummy/bin/bundle +3 -0
  134. data/spec/dummy/bin/rails +4 -0
  135. data/spec/dummy/bin/rake +4 -0
  136. data/spec/dummy/config.ru +4 -0
  137. data/spec/dummy/config/application.rb +28 -0
  138. data/spec/dummy/config/boot.rb +5 -0
  139. data/spec/dummy/config/environment.rb +5 -0
  140. data/spec/dummy/config/environments/development.rb +29 -0
  141. data/spec/dummy/config/environments/production.rb +80 -0
  142. data/spec/dummy/config/environments/test.rb +36 -0
  143. data/spec/dummy/config/initializers/backtrace_silencers.rb +7 -0
  144. data/spec/dummy/config/initializers/filter_parameter_logging.rb +4 -0
  145. data/spec/dummy/config/initializers/inflections.rb +16 -0
  146. data/spec/dummy/config/initializers/mime_types.rb +5 -0
  147. data/spec/dummy/config/initializers/secret_token.rb +12 -0
  148. data/spec/dummy/config/initializers/session_store.rb +3 -0
  149. data/spec/dummy/config/initializers/wrap_parameters.rb +14 -0
  150. data/spec/dummy/config/locales/en.yml +23 -0
  151. data/spec/dummy/config/routes.rb +2 -0
  152. data/spec/dummy/lib/assets/.keep +0 -0
  153. data/spec/dummy/log/.keep +0 -0
  154. data/spec/dummy/public/404.html +58 -0
  155. data/spec/dummy/public/422.html +58 -0
  156. data/spec/dummy/public/500.html +57 -0
  157. data/spec/dummy/public/favicon.ico +0 -0
  158. data/spec/helpers/semantic_breadcrumbs_helper_spec.rb +38 -0
  159. data/spec/helpers/semantic_flash_helper_spec.rb +36 -0
  160. data/spec/helpers/semantic_icon_helper_spec.rb +48 -0
  161. data/spec/spec_helper.rb +17 -0
  162. data/tasks/converter.rb +216 -0
  163. data/templates/project/manifest.rb +29 -0
  164. data/templates/project/styles.scss +1 -0
  165. metadata +390 -0
@@ -0,0 +1,125 @@
1
+ /*!
2
+ * # Semantic UI 1.12.3 - Video
3
+ * http://github.com/semantic-org/semantic-ui/
4
+ *
5
+ *
6
+ * Copyright 2014 Contributors
7
+ * Released under the MIT license
8
+ * http://opensource.org/licenses/MIT
9
+ *
10
+ */
11
+
12
+
13
+ /*******************************
14
+ Video
15
+ *******************************/
16
+
17
+ .ui.video {
18
+ background-color: #dddddd;
19
+ position: relative;
20
+ max-width: 100%;
21
+ padding-bottom: 56.25%;
22
+ height: 0px;
23
+ overflow: hidden;
24
+ }
25
+
26
+ /*--------------
27
+ Content
28
+ ---------------*/
29
+
30
+
31
+ /* Placeholder Image */
32
+ .ui.video .placeholder {
33
+ background-color: #333333;
34
+ }
35
+
36
+ /* Play Icon Overlay */
37
+ .ui.video .play {
38
+ cursor: pointer;
39
+ position: absolute;
40
+ top: 0px;
41
+ left: 0px;
42
+ z-index: 10;
43
+ width: 100%;
44
+ height: 100%;
45
+ opacity: 0.8;
46
+ -webkit-transition: opacity 0.3s;
47
+ transition: opacity 0.3s;
48
+ }
49
+ .ui.video .play.icon:before {
50
+ position: absolute;
51
+ top: 50%;
52
+ left: 50%;
53
+ z-index: 11;
54
+ background: rgba(0, 0, 0, 0.3);
55
+ width: 8rem;
56
+ height: 8rem;
57
+ line-height: 8rem;
58
+ border-radius: 500rem;
59
+ color: #ffffff;
60
+ font-size: 8rem;
61
+ text-shadow: none;
62
+ -webkit-transform: translateX(-50%) translateY(-50%);
63
+ -ms-transform: translateX(-50%) translateY(-50%);
64
+ transform: translateX(-50%) translateY(-50%);
65
+ }
66
+ .ui.video .placeholder {
67
+ position: absolute;
68
+ top: 0px;
69
+ left: 0px;
70
+ display: block;
71
+ width: 100%;
72
+ height: 100%;
73
+ }
74
+
75
+ /* IFrame Embed */
76
+ .ui.video .embed iframe,
77
+ .ui.video .embed embed,
78
+ .ui.video .embed object {
79
+ position: absolute;
80
+ border: none;
81
+ width: 100%;
82
+ height: 100%;
83
+ top: 0px;
84
+ left: 0px;
85
+ margin: 0em;
86
+ padding: 0em;
87
+ }
88
+
89
+
90
+ /*******************************
91
+ States
92
+ *******************************/
93
+
94
+
95
+ /*--------------
96
+ Hover
97
+ ---------------*/
98
+
99
+ .ui.video .play:hover {
100
+ opacity: 1;
101
+ }
102
+
103
+ /*--------------
104
+ Active
105
+ ---------------*/
106
+
107
+ .ui.video.active .play,
108
+ .ui.video.active .placeholder {
109
+ display: none;
110
+ }
111
+ .ui.video.active .embed {
112
+ display: inline;
113
+ }
114
+
115
+
116
+ /*******************************
117
+ Video Overrides
118
+ *******************************/
119
+
120
+
121
+
122
+ /*******************************
123
+ Site Overrides
124
+ *******************************/
125
+
@@ -0,0 +1,275 @@
1
+ /*!
2
+ * # Semantic UI 2.6.4 - Ad
3
+ * http://github.com/semantic-org/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
+ /*******************************
14
+ Advertisement
15
+ *******************************/
16
+
17
+ .ui.ad {
18
+ display: block;
19
+ overflow: hidden;
20
+ margin: 1em 0em;
21
+ }
22
+ .ui.ad:first-child {
23
+ margin: 0em;
24
+ }
25
+ .ui.ad:last-child {
26
+ margin: 0em;
27
+ }
28
+ .ui.ad iframe {
29
+ margin: 0em;
30
+ padding: 0em;
31
+ border: none;
32
+ overflow: hidden;
33
+ }
34
+
35
+ /*--------------
36
+ Common
37
+ ---------------*/
38
+
39
+
40
+ /* Leaderboard */
41
+ .ui.leaderboard.ad {
42
+ width: 728px;
43
+ height: 90px;
44
+ }
45
+
46
+ /* Medium Rectangle */
47
+ .ui[class*="medium rectangle"].ad {
48
+ width: 300px;
49
+ height: 250px;
50
+ }
51
+
52
+ /* Large Rectangle */
53
+ .ui[class*="large rectangle"].ad {
54
+ width: 336px;
55
+ height: 280px;
56
+ }
57
+
58
+ /* Half Page */
59
+ .ui[class*="half page"].ad {
60
+ width: 300px;
61
+ height: 600px;
62
+ }
63
+
64
+ /*--------------
65
+ Square
66
+ ---------------*/
67
+
68
+
69
+ /* Square */
70
+ .ui.square.ad {
71
+ width: 250px;
72
+ height: 250px;
73
+ }
74
+
75
+ /* Small Square */
76
+ .ui[class*="small square"].ad {
77
+ width: 200px;
78
+ height: 200px;
79
+ }
80
+
81
+ /*--------------
82
+ Rectangle
83
+ ---------------*/
84
+
85
+
86
+ /* Small Rectangle */
87
+ .ui[class*="small rectangle"].ad {
88
+ width: 180px;
89
+ height: 150px;
90
+ }
91
+
92
+ /* Vertical Rectangle */
93
+ .ui[class*="vertical rectangle"].ad {
94
+ width: 240px;
95
+ height: 400px;
96
+ }
97
+
98
+ /*--------------
99
+ Button
100
+ ---------------*/
101
+
102
+ .ui.button.ad {
103
+ width: 120px;
104
+ height: 90px;
105
+ }
106
+ .ui[class*="square button"].ad {
107
+ width: 125px;
108
+ height: 125px;
109
+ }
110
+ .ui[class*="small button"].ad {
111
+ width: 120px;
112
+ height: 60px;
113
+ }
114
+
115
+ /*--------------
116
+ Skyscrapers
117
+ ---------------*/
118
+
119
+
120
+ /* Skyscraper */
121
+ .ui.skyscraper.ad {
122
+ width: 120px;
123
+ height: 600px;
124
+ }
125
+
126
+ /* Wide Skyscraper */
127
+ .ui[class*="wide skyscraper"].ad {
128
+ width: 160px;
129
+ }
130
+
131
+ /*--------------
132
+ Banners
133
+ ---------------*/
134
+
135
+
136
+ /* Banner */
137
+ .ui.banner.ad {
138
+ width: 468px;
139
+ height: 60px;
140
+ }
141
+
142
+ /* Vertical Banner */
143
+ .ui[class*="vertical banner"].ad {
144
+ width: 120px;
145
+ height: 240px;
146
+ }
147
+
148
+ /* Top Banner */
149
+ .ui[class*="top banner"].ad {
150
+ width: 930px;
151
+ height: 180px;
152
+ }
153
+
154
+ /* Half Banner */
155
+ .ui[class*="half banner"].ad {
156
+ width: 234px;
157
+ height: 60px;
158
+ }
159
+
160
+ /*--------------
161
+ Boards
162
+ ---------------*/
163
+
164
+
165
+ /* Leaderboard */
166
+ .ui[class*="large leaderboard"].ad {
167
+ width: 970px;
168
+ height: 90px;
169
+ }
170
+
171
+ /* Billboard */
172
+ .ui.billboard.ad {
173
+ width: 970px;
174
+ height: 250px;
175
+ }
176
+
177
+ /*--------------
178
+ Panorama
179
+ ---------------*/
180
+
181
+
182
+ /* Panorama */
183
+ .ui.panorama.ad {
184
+ width: 980px;
185
+ height: 120px;
186
+ }
187
+
188
+ /*--------------
189
+ Netboard
190
+ ---------------*/
191
+
192
+
193
+ /* Netboard */
194
+ .ui.netboard.ad {
195
+ width: 580px;
196
+ height: 400px;
197
+ }
198
+
199
+ /*--------------
200
+ Mobile
201
+ ---------------*/
202
+
203
+
204
+ /* Large Mobile Banner */
205
+ .ui[class*="large mobile banner"].ad {
206
+ width: 320px;
207
+ height: 100px;
208
+ }
209
+
210
+ /* Mobile Leaderboard */
211
+ .ui[class*="mobile leaderboard"].ad {
212
+ width: 320px;
213
+ height: 50px;
214
+ }
215
+
216
+
217
+ /*******************************
218
+ Types
219
+ *******************************/
220
+
221
+
222
+ /* Mobile Sizes */
223
+ .ui.mobile.ad {
224
+ display: none;
225
+ }
226
+ @media only screen and (max-width: 767px) {
227
+ .ui.mobile.ad {
228
+ display: block;
229
+ }
230
+ }
231
+
232
+
233
+ /*******************************
234
+ Variations
235
+ *******************************/
236
+
237
+ .ui.centered.ad {
238
+ margin-left: auto;
239
+ margin-right: auto;
240
+ }
241
+ .ui.test.ad {
242
+ position: relative;
243
+ background: #545454;
244
+ }
245
+ .ui.test.ad:after {
246
+ position: absolute;
247
+ top: 50%;
248
+ left: 50%;
249
+ width: 100%;
250
+ text-align: center;
251
+ -webkit-transform: translateX(-50%) translateY(-50%);
252
+ transform: translateX(-50%) translateY(-50%);
253
+ content: 'Ad';
254
+ color: #FFFFFF;
255
+ font-size: 1em;
256
+ font-weight: bold;
257
+ }
258
+ .ui.mobile.test.ad:after {
259
+ font-size: 0.85714286em;
260
+ }
261
+ .ui.test.ad[data-text]:after {
262
+ content: attr(data-text);
263
+ }
264
+
265
+
266
+ /*******************************
267
+ Theme Overrides
268
+ *******************************/
269
+
270
+
271
+
272
+ /*******************************
273
+ User Variable Overrides
274
+ *******************************/
275
+
@@ -0,0 +1,6 @@
1
+ @import 'ad';
2
+ @import 'card';
3
+ @import 'comment';
4
+ @import 'feed';
5
+ @import 'item';
6
+ @import 'statistic';
@@ -0,0 +1,1124 @@
1
+ /*!
2
+ * # Semantic UI 2.6.4 - Card
3
+ * http://github.com/semantic-org/semantic-ui/
4
+ *
5
+ *
6
+ * Released under the MIT license
7
+ * http://opensource.org/licenses/MIT
8
+ *
9
+ */
10
+
11
+
12
+ /*******************************
13
+ Standard
14
+ *******************************/
15
+
16
+
17
+ /*--------------
18
+ Card
19
+ ---------------*/
20
+
21
+ .ui.cards > .card,
22
+ .ui.card {
23
+ max-width: 100%;
24
+ position: relative;
25
+ display: -webkit-box;
26
+ display: -ms-flexbox;
27
+ display: flex;
28
+ -webkit-box-orient: vertical;
29
+ -webkit-box-direction: normal;
30
+ -ms-flex-direction: column;
31
+ flex-direction: column;
32
+ width: 290px;
33
+ min-height: 0px;
34
+ background: #FFFFFF;
35
+ padding: 0em;
36
+ border: none;
37
+ border-radius: 0.28571429rem;
38
+ -webkit-box-shadow: 0px 1px 3px 0px #D4D4D5, 0px 0px 0px 1px #D4D4D5;
39
+ box-shadow: 0px 1px 3px 0px #D4D4D5, 0px 0px 0px 1px #D4D4D5;
40
+ -webkit-transition: -webkit-box-shadow 0.1s ease, -webkit-transform 0.1s ease;
41
+ transition: -webkit-box-shadow 0.1s ease, -webkit-transform 0.1s ease;
42
+ transition: box-shadow 0.1s ease, transform 0.1s ease;
43
+ transition: box-shadow 0.1s ease, transform 0.1s ease, -webkit-box-shadow 0.1s ease, -webkit-transform 0.1s ease;
44
+ z-index: '';
45
+ }
46
+ .ui.card {
47
+ margin: 1em 0em;
48
+ }
49
+ .ui.cards > .card a,
50
+ .ui.card a {
51
+ cursor: pointer;
52
+ }
53
+ .ui.card:first-child {
54
+ margin-top: 0em;
55
+ }
56
+ .ui.card:last-child {
57
+ margin-bottom: 0em;
58
+ }
59
+
60
+ /*--------------
61
+ Cards
62
+ ---------------*/
63
+
64
+ .ui.cards {
65
+ display: -webkit-box;
66
+ display: -ms-flexbox;
67
+ display: flex;
68
+ margin: -0.875em -0.5em;
69
+ -ms-flex-wrap: wrap;
70
+ flex-wrap: wrap;
71
+ }
72
+ .ui.cards > .card {
73
+ display: -webkit-box;
74
+ display: -ms-flexbox;
75
+ display: flex;
76
+ margin: 0.875em 0.5em;
77
+ float: none;
78
+ }
79
+
80
+ /* Clearing */
81
+ .ui.cards:after,
82
+ .ui.card:after {
83
+ display: block;
84
+ content: ' ';
85
+ height: 0px;
86
+ clear: both;
87
+ overflow: hidden;
88
+ visibility: hidden;
89
+ }
90
+
91
+ /* Consecutive Card Groups Preserve Row Spacing */
92
+ .ui.cards ~ .ui.cards {
93
+ margin-top: 0.875em;
94
+ }
95
+
96
+ /*--------------
97
+ Rounded Edges
98
+ ---------------*/
99
+
100
+ .ui.cards > .card > :first-child,
101
+ .ui.card > :first-child {
102
+ border-radius: 0.28571429rem 0.28571429rem 0em 0em !important;
103
+ border-top: none !important;
104
+ }
105
+ .ui.cards > .card > :last-child,
106
+ .ui.card > :last-child {
107
+ border-radius: 0em 0em 0.28571429rem 0.28571429rem !important;
108
+ }
109
+ .ui.cards > .card > :only-child,
110
+ .ui.card > :only-child {
111
+ border-radius: 0.28571429rem !important;
112
+ }
113
+
114
+ /*--------------
115
+ Images
116
+ ---------------*/
117
+
118
+ .ui.cards > .card > .image,
119
+ .ui.card > .image {
120
+ position: relative;
121
+ display: block;
122
+ -webkit-box-flex: 0;
123
+ -ms-flex: 0 0 auto;
124
+ flex: 0 0 auto;
125
+ padding: 0em;
126
+ background: rgba(0, 0, 0, 0.05);
127
+ }
128
+ .ui.cards > .card > .image > img,
129
+ .ui.card > .image > img {
130
+ display: block;
131
+ width: 100%;
132
+ height: auto;
133
+ border-radius: inherit;
134
+ }
135
+ .ui.cards > .card > .image:not(.ui) > img,
136
+ .ui.card > .image:not(.ui) > img {
137
+ border: none;
138
+ }
139
+
140
+ /*--------------
141
+ Content
142
+ ---------------*/
143
+
144
+ .ui.cards > .card > .content,
145
+ .ui.card > .content {
146
+ -webkit-box-flex: 1;
147
+ -ms-flex-positive: 1;
148
+ flex-grow: 1;
149
+ border: none;
150
+ border-top: 1px solid rgba(34, 36, 38, 0.1);
151
+ background: none;
152
+ margin: 0em;
153
+ padding: 1em 1em;
154
+ -webkit-box-shadow: none;
155
+ box-shadow: none;
156
+ font-size: 1em;
157
+ border-radius: 0em;
158
+ }
159
+ .ui.cards > .card > .content:after,
160
+ .ui.card > .content:after {
161
+ display: block;
162
+ content: ' ';
163
+ height: 0px;
164
+ clear: both;
165
+ overflow: hidden;
166
+ visibility: hidden;
167
+ }
168
+ .ui.cards > .card > .content > .header,
169
+ .ui.card > .content > .header {
170
+ display: block;
171
+ margin: '';
172
+ font-family: $font-family;
173
+ color: rgba(0, 0, 0, 0.85);
174
+ }
175
+
176
+ /* Default Header Size */
177
+ .ui.cards > .card > .content > .header:not(.ui),
178
+ .ui.card > .content > .header:not(.ui) {
179
+ font-weight: bold;
180
+ font-size: 1.28571429em;
181
+ margin-top: -0.21425em;
182
+ line-height: 1.28571429em;
183
+ }
184
+ .ui.cards > .card > .content > .meta + .description,
185
+ .ui.cards > .card > .content > .header + .description,
186
+ .ui.card > .content > .meta + .description,
187
+ .ui.card > .content > .header + .description {
188
+ margin-top: 0.5em;
189
+ }
190
+
191
+ /*----------------
192
+ Floated Content
193
+ -----------------*/
194
+
195
+ .ui.cards > .card [class*="left floated"],
196
+ .ui.card [class*="left floated"] {
197
+ float: left;
198
+ }
199
+ .ui.cards > .card [class*="right floated"],
200
+ .ui.card [class*="right floated"] {
201
+ float: right;
202
+ }
203
+
204
+ /*--------------
205
+ Aligned
206
+ ---------------*/
207
+
208
+ .ui.cards > .card [class*="left aligned"],
209
+ .ui.card [class*="left aligned"] {
210
+ text-align: left;
211
+ }
212
+ .ui.cards > .card [class*="center aligned"],
213
+ .ui.card [class*="center aligned"] {
214
+ text-align: center;
215
+ }
216
+ .ui.cards > .card [class*="right aligned"],
217
+ .ui.card [class*="right aligned"] {
218
+ text-align: right;
219
+ }
220
+
221
+ /*--------------
222
+ Content Image
223
+ ---------------*/
224
+
225
+ .ui.cards > .card .content img,
226
+ .ui.card .content img {
227
+ display: inline-block;
228
+ vertical-align: middle;
229
+ width: '';
230
+ }
231
+ .ui.cards > .card img.avatar,
232
+ .ui.cards > .card .avatar img,
233
+ .ui.card img.avatar,
234
+ .ui.card .avatar img {
235
+ width: 2em;
236
+ height: 2em;
237
+ border-radius: 500rem;
238
+ }
239
+
240
+ /*--------------
241
+ Description
242
+ ---------------*/
243
+
244
+ .ui.cards > .card > .content > .description,
245
+ .ui.card > .content > .description {
246
+ clear: both;
247
+ color: rgba(0, 0, 0, 0.68);
248
+ }
249
+
250
+ /*--------------
251
+ Paragraph
252
+ ---------------*/
253
+
254
+ .ui.cards > .card > .content p,
255
+ .ui.card > .content p {
256
+ margin: 0em 0em 0.5em;
257
+ }
258
+ .ui.cards > .card > .content p:last-child,
259
+ .ui.card > .content p:last-child {
260
+ margin-bottom: 0em;
261
+ }
262
+
263
+ /*--------------
264
+ Meta
265
+ ---------------*/
266
+
267
+ .ui.cards > .card .meta,
268
+ .ui.card .meta {
269
+ font-size: 1em;
270
+ color: rgba(0, 0, 0, 0.4);
271
+ }
272
+ .ui.cards > .card .meta *,
273
+ .ui.card .meta * {
274
+ margin-right: 0.3em;
275
+ }
276
+ .ui.cards > .card .meta :last-child,
277
+ .ui.card .meta :last-child {
278
+ margin-right: 0em;
279
+ }
280
+ .ui.cards > .card .meta [class*="right floated"],
281
+ .ui.card .meta [class*="right floated"] {
282
+ margin-right: 0em;
283
+ margin-left: 0.3em;
284
+ }
285
+
286
+ /*--------------
287
+ Links
288
+ ---------------*/
289
+
290
+
291
+ /* Generic */
292
+ .ui.cards > .card > .content a:not(.ui),
293
+ .ui.card > .content a:not(.ui) {
294
+ color: '';
295
+ -webkit-transition: color 0.1s ease;
296
+ transition: color 0.1s ease;
297
+ }
298
+ .ui.cards > .card > .content a:not(.ui):hover,
299
+ .ui.card > .content a:not(.ui):hover {
300
+ color: '';
301
+ }
302
+
303
+ /* Header */
304
+ .ui.cards > .card > .content > a.header,
305
+ .ui.card > .content > a.header {
306
+ color: rgba(0, 0, 0, 0.85);
307
+ }
308
+ .ui.cards > .card > .content > a.header:hover,
309
+ .ui.card > .content > a.header:hover {
310
+ color: #1e70bf;
311
+ }
312
+
313
+ /* Meta */
314
+ .ui.cards > .card .meta > a:not(.ui),
315
+ .ui.card .meta > a:not(.ui) {
316
+ color: rgba(0, 0, 0, 0.4);
317
+ }
318
+ .ui.cards > .card .meta > a:not(.ui):hover,
319
+ .ui.card .meta > a:not(.ui):hover {
320
+ color: rgba(0, 0, 0, 0.87);
321
+ }
322
+
323
+ /*--------------
324
+ Buttons
325
+ ---------------*/
326
+
327
+ .ui.cards > .card > .buttons,
328
+ .ui.card > .buttons,
329
+ .ui.cards > .card > .button,
330
+ .ui.card > .button {
331
+ margin: 0px -1px;
332
+ width: calc(100% + 2px);
333
+ }
334
+
335
+ /*--------------
336
+ Dimmer
337
+ ---------------*/
338
+
339
+ .ui.cards > .card .dimmer,
340
+ .ui.card .dimmer {
341
+ background-color: '';
342
+ z-index: 10;
343
+ }
344
+
345
+ /*--------------
346
+ Labels
347
+ ---------------*/
348
+
349
+
350
+ /*-----Star----- */
351
+
352
+
353
+ /* Icon */
354
+ .ui.cards > .card > .content .star.icon,
355
+ .ui.card > .content .star.icon {
356
+ cursor: pointer;
357
+ opacity: 0.75;
358
+ -webkit-transition: color 0.1s ease;
359
+ transition: color 0.1s ease;
360
+ }
361
+ .ui.cards > .card > .content .star.icon:hover,
362
+ .ui.card > .content .star.icon:hover {
363
+ opacity: 1;
364
+ color: #FFB70A;
365
+ }
366
+ .ui.cards > .card > .content .active.star.icon,
367
+ .ui.card > .content .active.star.icon {
368
+ color: #FFE623;
369
+ }
370
+
371
+ /*-----Like----- */
372
+
373
+
374
+ /* Icon */
375
+ .ui.cards > .card > .content .like.icon,
376
+ .ui.card > .content .like.icon {
377
+ cursor: pointer;
378
+ opacity: 0.75;
379
+ -webkit-transition: color 0.1s ease;
380
+ transition: color 0.1s ease;
381
+ }
382
+ .ui.cards > .card > .content .like.icon:hover,
383
+ .ui.card > .content .like.icon:hover {
384
+ opacity: 1;
385
+ color: #FF2733;
386
+ }
387
+ .ui.cards > .card > .content .active.like.icon,
388
+ .ui.card > .content .active.like.icon {
389
+ color: #FF2733;
390
+ }
391
+
392
+ /*----------------
393
+ Extra Content
394
+ -----------------*/
395
+
396
+ .ui.cards > .card > .extra,
397
+ .ui.card > .extra {
398
+ max-width: 100%;
399
+ min-height: 0em !important;
400
+ -webkit-box-flex: 0;
401
+ -ms-flex-positive: 0;
402
+ flex-grow: 0;
403
+ border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
404
+ position: static;
405
+ background: none;
406
+ width: auto;
407
+ margin: 0em 0em;
408
+ padding: 0.75em 1em;
409
+ top: 0em;
410
+ left: 0em;
411
+ color: rgba(0, 0, 0, 0.4);
412
+ -webkit-box-shadow: none;
413
+ box-shadow: none;
414
+ -webkit-transition: color 0.1s ease;
415
+ transition: color 0.1s ease;
416
+ }
417
+ .ui.cards > .card > .extra a:not(.ui),
418
+ .ui.card > .extra a:not(.ui) {
419
+ color: rgba(0, 0, 0, 0.4);
420
+ }
421
+ .ui.cards > .card > .extra a:not(.ui):hover,
422
+ .ui.card > .extra a:not(.ui):hover {
423
+ color: #1e70bf;
424
+ }
425
+
426
+
427
+ /*******************************
428
+ Variations
429
+ *******************************/
430
+
431
+
432
+ /*-------------------
433
+ Horizontal
434
+ --------------------*/
435
+
436
+ .ui.horizontal.cards > .card,
437
+ .ui.card.horizontal {
438
+ -webkit-box-orient: horizontal;
439
+ -webkit-box-direction: normal;
440
+ -ms-flex-direction: row;
441
+ flex-direction: row;
442
+ min-width: 400px;
443
+ width: 400px;
444
+ max-width: 100%;
445
+ }
446
+ .ui.horizontal.cards > .card > .image,
447
+ .ui.card.horizontal > .image {
448
+ border-radius: 0.28571429rem 0 0 0.28571429rem;
449
+ width: 150px;
450
+ }
451
+ .ui.horizontal.cards > .card > .image > img,
452
+ .ui.card.horizontal > .image > img {
453
+ background-size: cover;
454
+ background-repeat: no-repeat;
455
+ background-position: center;
456
+ -webkit-box-pack: center;
457
+ -ms-flex-pack: center;
458
+ justify-content: center;
459
+ -webkit-box-align: center;
460
+ -ms-flex-align: center;
461
+ align-items: center;
462
+ display: -webkit-box;
463
+ display: -ms-flexbox;
464
+ display: flex;
465
+ width: 100%;
466
+ height: 100%;
467
+ border-radius: 0.28571429rem 0 0 0.28571429rem;
468
+ }
469
+
470
+ /*-------------------
471
+ Raised
472
+ --------------------*/
473
+
474
+ .ui.raised.cards > .card,
475
+ .ui.raised.card {
476
+ -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15);
477
+ box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15);
478
+ }
479
+ .ui.raised.cards a.card:hover,
480
+ .ui.link.cards .raised.card:hover,
481
+ a.ui.raised.card:hover,
482
+ .ui.link.raised.card:hover {
483
+ -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 4px 0px rgba(34, 36, 38, 0.15), 0px 2px 10px 0px rgba(34, 36, 38, 0.25);
484
+ box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 4px 0px rgba(34, 36, 38, 0.15), 0px 2px 10px 0px rgba(34, 36, 38, 0.25);
485
+ }
486
+
487
+ /*-------------------
488
+ Centered
489
+ --------------------*/
490
+
491
+ .ui.centered.cards {
492
+ -webkit-box-pack: center;
493
+ -ms-flex-pack: center;
494
+ justify-content: center;
495
+ }
496
+ .ui.centered.card {
497
+ margin-left: auto;
498
+ margin-right: auto;
499
+ }
500
+
501
+ /*-------------------
502
+ Fluid
503
+ --------------------*/
504
+
505
+ .ui.fluid.card {
506
+ width: 100%;
507
+ max-width: 9999px;
508
+ }
509
+
510
+ /*-------------------
511
+ Link
512
+ --------------------*/
513
+
514
+ .ui.cards a.card,
515
+ .ui.link.cards .card,
516
+ a.ui.card,
517
+ .ui.link.card {
518
+ -webkit-transform: none;
519
+ transform: none;
520
+ }
521
+ .ui.cards a.card:hover,
522
+ .ui.link.cards .card:not(.icon):hover,
523
+ a.ui.card:hover,
524
+ .ui.link.card:hover {
525
+ cursor: pointer;
526
+ z-index: 5;
527
+ background: #FFFFFF;
528
+ border: none;
529
+ -webkit-box-shadow: 0px 1px 3px 0px #BCBDBD, 0px 0px 0px 1px #D4D4D5;
530
+ box-shadow: 0px 1px 3px 0px #BCBDBD, 0px 0px 0px 1px #D4D4D5;
531
+ -webkit-transform: translateY(-3px);
532
+ transform: translateY(-3px);
533
+ }
534
+
535
+ /*-------------------
536
+ Colors
537
+ --------------------*/
538
+
539
+
540
+ /* Primary */
541
+ .ui.primary.cards > .card,
542
+ .ui.cards > .primary.card,
543
+ .ui.primary.card {
544
+ -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #2185D0, 0px 1px 3px 0px #D4D4D5;
545
+ box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #2185D0, 0px 1px 3px 0px #D4D4D5;
546
+ }
547
+ .ui.primary.cards > .card:hover,
548
+ .ui.cards > .primary.card:hover,
549
+ .ui.primary.card:hover {
550
+ -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #1678c2, 0px 1px 3px 0px #BCBDBD;
551
+ box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #1678c2, 0px 1px 3px 0px #BCBDBD;
552
+ }
553
+
554
+ /* Secondary */
555
+ .ui.secondary.cards > .card,
556
+ .ui.cards > .secondary.card,
557
+ .ui.secondary.card {
558
+ -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #1B1C1D, 0px 1px 3px 0px #D4D4D5;
559
+ box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #1B1C1D, 0px 1px 3px 0px #D4D4D5;
560
+ }
561
+ .ui.secondary.cards > .card:hover,
562
+ .ui.cards > .secondary.card:hover,
563
+ .ui.secondary.card:hover {
564
+ -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #27292a, 0px 1px 3px 0px #BCBDBD;
565
+ box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #27292a, 0px 1px 3px 0px #BCBDBD;
566
+ }
567
+
568
+ /* Red */
569
+ .ui.red.cards > .card,
570
+ .ui.cards > .red.card,
571
+ .ui.red.card {
572
+ -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #DB2828, 0px 1px 3px 0px #D4D4D5;
573
+ box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #DB2828, 0px 1px 3px 0px #D4D4D5;
574
+ }
575
+ .ui.red.cards > .card:hover,
576
+ .ui.cards > .red.card:hover,
577
+ .ui.red.card:hover {
578
+ -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #d01919, 0px 1px 3px 0px #BCBDBD;
579
+ box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #d01919, 0px 1px 3px 0px #BCBDBD;
580
+ }
581
+
582
+ /* Orange */
583
+ .ui.orange.cards > .card,
584
+ .ui.cards > .orange.card,
585
+ .ui.orange.card {
586
+ -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #F2711C, 0px 1px 3px 0px #D4D4D5;
587
+ box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #F2711C, 0px 1px 3px 0px #D4D4D5;
588
+ }
589
+ .ui.orange.cards > .card:hover,
590
+ .ui.cards > .orange.card:hover,
591
+ .ui.orange.card:hover {
592
+ -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #f26202, 0px 1px 3px 0px #BCBDBD;
593
+ box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #f26202, 0px 1px 3px 0px #BCBDBD;
594
+ }
595
+
596
+ /* Yellow */
597
+ .ui.yellow.cards > .card,
598
+ .ui.cards > .yellow.card,
599
+ .ui.yellow.card {
600
+ -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #FBBD08, 0px 1px 3px 0px #D4D4D5;
601
+ box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #FBBD08, 0px 1px 3px 0px #D4D4D5;
602
+ }
603
+ .ui.yellow.cards > .card:hover,
604
+ .ui.cards > .yellow.card:hover,
605
+ .ui.yellow.card:hover {
606
+ -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #eaae00, 0px 1px 3px 0px #BCBDBD;
607
+ box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #eaae00, 0px 1px 3px 0px #BCBDBD;
608
+ }
609
+
610
+ /* Olive */
611
+ .ui.olive.cards > .card,
612
+ .ui.cards > .olive.card,
613
+ .ui.olive.card {
614
+ -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #B5CC18, 0px 1px 3px 0px #D4D4D5;
615
+ box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #B5CC18, 0px 1px 3px 0px #D4D4D5;
616
+ }
617
+ .ui.olive.cards > .card:hover,
618
+ .ui.cards > .olive.card:hover,
619
+ .ui.olive.card:hover {
620
+ -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #a7bd0d, 0px 1px 3px 0px #BCBDBD;
621
+ box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #a7bd0d, 0px 1px 3px 0px #BCBDBD;
622
+ }
623
+
624
+ /* Green */
625
+ .ui.green.cards > .card,
626
+ .ui.cards > .green.card,
627
+ .ui.green.card {
628
+ -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #21BA45, 0px 1px 3px 0px #D4D4D5;
629
+ box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #21BA45, 0px 1px 3px 0px #D4D4D5;
630
+ }
631
+ .ui.green.cards > .card:hover,
632
+ .ui.cards > .green.card:hover,
633
+ .ui.green.card:hover {
634
+ -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #16ab39, 0px 1px 3px 0px #BCBDBD;
635
+ box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #16ab39, 0px 1px 3px 0px #BCBDBD;
636
+ }
637
+
638
+ /* Teal */
639
+ .ui.teal.cards > .card,
640
+ .ui.cards > .teal.card,
641
+ .ui.teal.card {
642
+ -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #00B5AD, 0px 1px 3px 0px #D4D4D5;
643
+ box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #00B5AD, 0px 1px 3px 0px #D4D4D5;
644
+ }
645
+ .ui.teal.cards > .card:hover,
646
+ .ui.cards > .teal.card:hover,
647
+ .ui.teal.card:hover {
648
+ -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #009c95, 0px 1px 3px 0px #BCBDBD;
649
+ box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #009c95, 0px 1px 3px 0px #BCBDBD;
650
+ }
651
+
652
+ /* Blue */
653
+ .ui.blue.cards > .card,
654
+ .ui.cards > .blue.card,
655
+ .ui.blue.card {
656
+ -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #2185D0, 0px 1px 3px 0px #D4D4D5;
657
+ box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #2185D0, 0px 1px 3px 0px #D4D4D5;
658
+ }
659
+ .ui.blue.cards > .card:hover,
660
+ .ui.cards > .blue.card:hover,
661
+ .ui.blue.card:hover {
662
+ -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #1678c2, 0px 1px 3px 0px #BCBDBD;
663
+ box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #1678c2, 0px 1px 3px 0px #BCBDBD;
664
+ }
665
+
666
+ /* Violet */
667
+ .ui.violet.cards > .card,
668
+ .ui.cards > .violet.card,
669
+ .ui.violet.card {
670
+ -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #6435C9, 0px 1px 3px 0px #D4D4D5;
671
+ box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #6435C9, 0px 1px 3px 0px #D4D4D5;
672
+ }
673
+ .ui.violet.cards > .card:hover,
674
+ .ui.cards > .violet.card:hover,
675
+ .ui.violet.card:hover {
676
+ -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #5829bb, 0px 1px 3px 0px #BCBDBD;
677
+ box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #5829bb, 0px 1px 3px 0px #BCBDBD;
678
+ }
679
+
680
+ /* Purple */
681
+ .ui.purple.cards > .card,
682
+ .ui.cards > .purple.card,
683
+ .ui.purple.card {
684
+ -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #A333C8, 0px 1px 3px 0px #D4D4D5;
685
+ box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #A333C8, 0px 1px 3px 0px #D4D4D5;
686
+ }
687
+ .ui.purple.cards > .card:hover,
688
+ .ui.cards > .purple.card:hover,
689
+ .ui.purple.card:hover {
690
+ -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #9627ba, 0px 1px 3px 0px #BCBDBD;
691
+ box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #9627ba, 0px 1px 3px 0px #BCBDBD;
692
+ }
693
+
694
+ /* Pink */
695
+ .ui.pink.cards > .card,
696
+ .ui.cards > .pink.card,
697
+ .ui.pink.card {
698
+ -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #E03997, 0px 1px 3px 0px #D4D4D5;
699
+ box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #E03997, 0px 1px 3px 0px #D4D4D5;
700
+ }
701
+ .ui.pink.cards > .card:hover,
702
+ .ui.cards > .pink.card:hover,
703
+ .ui.pink.card:hover {
704
+ -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #e61a8d, 0px 1px 3px 0px #BCBDBD;
705
+ box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #e61a8d, 0px 1px 3px 0px #BCBDBD;
706
+ }
707
+
708
+ /* Brown */
709
+ .ui.brown.cards > .card,
710
+ .ui.cards > .brown.card,
711
+ .ui.brown.card {
712
+ -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #A5673F, 0px 1px 3px 0px #D4D4D5;
713
+ box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #A5673F, 0px 1px 3px 0px #D4D4D5;
714
+ }
715
+ .ui.brown.cards > .card:hover,
716
+ .ui.cards > .brown.card:hover,
717
+ .ui.brown.card:hover {
718
+ -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #975b33, 0px 1px 3px 0px #BCBDBD;
719
+ box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #975b33, 0px 1px 3px 0px #BCBDBD;
720
+ }
721
+
722
+ /* Grey */
723
+ .ui.grey.cards > .card,
724
+ .ui.cards > .grey.card,
725
+ .ui.grey.card {
726
+ -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #767676, 0px 1px 3px 0px #D4D4D5;
727
+ box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #767676, 0px 1px 3px 0px #D4D4D5;
728
+ }
729
+ .ui.grey.cards > .card:hover,
730
+ .ui.cards > .grey.card:hover,
731
+ .ui.grey.card:hover {
732
+ -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #838383, 0px 1px 3px 0px #BCBDBD;
733
+ box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #838383, 0px 1px 3px 0px #BCBDBD;
734
+ }
735
+
736
+ /* Black */
737
+ .ui.black.cards > .card,
738
+ .ui.cards > .black.card,
739
+ .ui.black.card {
740
+ -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #1B1C1D, 0px 1px 3px 0px #D4D4D5;
741
+ box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #1B1C1D, 0px 1px 3px 0px #D4D4D5;
742
+ }
743
+ .ui.black.cards > .card:hover,
744
+ .ui.cards > .black.card:hover,
745
+ .ui.black.card:hover {
746
+ -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #27292a, 0px 1px 3px 0px #BCBDBD;
747
+ box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #27292a, 0px 1px 3px 0px #BCBDBD;
748
+ }
749
+
750
+ /*--------------
751
+ Card Count
752
+ ---------------*/
753
+
754
+ .ui.one.cards {
755
+ margin-left: 0em;
756
+ margin-right: 0em;
757
+ }
758
+ .ui.one.cards > .card {
759
+ width: 100%;
760
+ }
761
+ .ui.two.cards {
762
+ margin-left: -1em;
763
+ margin-right: -1em;
764
+ }
765
+ .ui.two.cards > .card {
766
+ width: calc(50% - 2em);
767
+ margin-left: 1em;
768
+ margin-right: 1em;
769
+ }
770
+ .ui.three.cards {
771
+ margin-left: -1em;
772
+ margin-right: -1em;
773
+ }
774
+ .ui.three.cards > .card {
775
+ width: calc(33.33333333333333% - 2em);
776
+ margin-left: 1em;
777
+ margin-right: 1em;
778
+ }
779
+ .ui.four.cards {
780
+ margin-left: -0.75em;
781
+ margin-right: -0.75em;
782
+ }
783
+ .ui.four.cards > .card {
784
+ width: calc(25% - 1.5em);
785
+ margin-left: 0.75em;
786
+ margin-right: 0.75em;
787
+ }
788
+ .ui.five.cards {
789
+ margin-left: -0.75em;
790
+ margin-right: -0.75em;
791
+ }
792
+ .ui.five.cards > .card {
793
+ width: calc(20% - 1.5em);
794
+ margin-left: 0.75em;
795
+ margin-right: 0.75em;
796
+ }
797
+ .ui.six.cards {
798
+ margin-left: -0.75em;
799
+ margin-right: -0.75em;
800
+ }
801
+ .ui.six.cards > .card {
802
+ width: calc(16.666666666666664% - 1.5em);
803
+ margin-left: 0.75em;
804
+ margin-right: 0.75em;
805
+ }
806
+ .ui.seven.cards {
807
+ margin-left: -0.5em;
808
+ margin-right: -0.5em;
809
+ }
810
+ .ui.seven.cards > .card {
811
+ width: calc(14.285714285714285% - 1em);
812
+ margin-left: 0.5em;
813
+ margin-right: 0.5em;
814
+ }
815
+ .ui.eight.cards {
816
+ margin-left: -0.5em;
817
+ margin-right: -0.5em;
818
+ }
819
+ .ui.eight.cards > .card {
820
+ width: calc(12.5% - 1em);
821
+ margin-left: 0.5em;
822
+ margin-right: 0.5em;
823
+ font-size: 11px;
824
+ }
825
+ .ui.nine.cards {
826
+ margin-left: -0.5em;
827
+ margin-right: -0.5em;
828
+ }
829
+ .ui.nine.cards > .card {
830
+ width: calc(11.11111111111111% - 1em);
831
+ margin-left: 0.5em;
832
+ margin-right: 0.5em;
833
+ font-size: 10px;
834
+ }
835
+ .ui.ten.cards {
836
+ margin-left: -0.5em;
837
+ margin-right: -0.5em;
838
+ }
839
+ .ui.ten.cards > .card {
840
+ width: calc(10% - 1em);
841
+ margin-left: 0.5em;
842
+ margin-right: 0.5em;
843
+ }
844
+
845
+ /*-------------------
846
+ Doubling
847
+ --------------------*/
848
+
849
+
850
+ /* Mobile Only */
851
+ @media only screen and (max-width: 767px) {
852
+ .ui.two.doubling.cards {
853
+ margin-left: 0em;
854
+ margin-right: 0em;
855
+ }
856
+ .ui.two.doubling.cards > .card {
857
+ width: 100%;
858
+ margin-left: 0em;
859
+ margin-right: 0em;
860
+ }
861
+ .ui.three.doubling.cards {
862
+ margin-left: -1em;
863
+ margin-right: -1em;
864
+ }
865
+ .ui.three.doubling.cards > .card {
866
+ width: calc(50% - 2em);
867
+ margin-left: 1em;
868
+ margin-right: 1em;
869
+ }
870
+ .ui.four.doubling.cards {
871
+ margin-left: -1em;
872
+ margin-right: -1em;
873
+ }
874
+ .ui.four.doubling.cards > .card {
875
+ width: calc(50% - 2em);
876
+ margin-left: 1em;
877
+ margin-right: 1em;
878
+ }
879
+ .ui.five.doubling.cards {
880
+ margin-left: -1em;
881
+ margin-right: -1em;
882
+ }
883
+ .ui.five.doubling.cards > .card {
884
+ width: calc(50% - 2em);
885
+ margin-left: 1em;
886
+ margin-right: 1em;
887
+ }
888
+ .ui.six.doubling.cards {
889
+ margin-left: -1em;
890
+ margin-right: -1em;
891
+ }
892
+ .ui.six.doubling.cards > .card {
893
+ width: calc(50% - 2em);
894
+ margin-left: 1em;
895
+ margin-right: 1em;
896
+ }
897
+ .ui.seven.doubling.cards {
898
+ margin-left: -1em;
899
+ margin-right: -1em;
900
+ }
901
+ .ui.seven.doubling.cards > .card {
902
+ width: calc(33.33333333333333% - 2em);
903
+ margin-left: 1em;
904
+ margin-right: 1em;
905
+ }
906
+ .ui.eight.doubling.cards {
907
+ margin-left: -1em;
908
+ margin-right: -1em;
909
+ }
910
+ .ui.eight.doubling.cards > .card {
911
+ width: calc(33.33333333333333% - 2em);
912
+ margin-left: 1em;
913
+ margin-right: 1em;
914
+ }
915
+ .ui.nine.doubling.cards {
916
+ margin-left: -1em;
917
+ margin-right: -1em;
918
+ }
919
+ .ui.nine.doubling.cards > .card {
920
+ width: calc(33.33333333333333% - 2em);
921
+ margin-left: 1em;
922
+ margin-right: 1em;
923
+ }
924
+ .ui.ten.doubling.cards {
925
+ margin-left: -1em;
926
+ margin-right: -1em;
927
+ }
928
+ .ui.ten.doubling.cards > .card {
929
+ width: calc(33.33333333333333% - 2em);
930
+ margin-left: 1em;
931
+ margin-right: 1em;
932
+ }
933
+ }
934
+
935
+ /* Tablet Only */
936
+ @media only screen and (min-width: 768px) and (max-width: 991px) {
937
+ .ui.two.doubling.cards {
938
+ margin-left: 0em;
939
+ margin-right: 0em;
940
+ }
941
+ .ui.two.doubling.cards > .card {
942
+ width: 100%;
943
+ margin-left: 0em;
944
+ margin-right: 0em;
945
+ }
946
+ .ui.three.doubling.cards {
947
+ margin-left: -1em;
948
+ margin-right: -1em;
949
+ }
950
+ .ui.three.doubling.cards > .card {
951
+ width: calc(50% - 2em);
952
+ margin-left: 1em;
953
+ margin-right: 1em;
954
+ }
955
+ .ui.four.doubling.cards {
956
+ margin-left: -1em;
957
+ margin-right: -1em;
958
+ }
959
+ .ui.four.doubling.cards > .card {
960
+ width: calc(50% - 2em);
961
+ margin-left: 1em;
962
+ margin-right: 1em;
963
+ }
964
+ .ui.five.doubling.cards {
965
+ margin-left: -1em;
966
+ margin-right: -1em;
967
+ }
968
+ .ui.five.doubling.cards > .card {
969
+ width: calc(33.33333333333333% - 2em);
970
+ margin-left: 1em;
971
+ margin-right: 1em;
972
+ }
973
+ .ui.six.doubling.cards {
974
+ margin-left: -1em;
975
+ margin-right: -1em;
976
+ }
977
+ .ui.six.doubling.cards > .card {
978
+ width: calc(33.33333333333333% - 2em);
979
+ margin-left: 1em;
980
+ margin-right: 1em;
981
+ }
982
+ .ui.eight.doubling.cards {
983
+ margin-left: -1em;
984
+ margin-right: -1em;
985
+ }
986
+ .ui.eight.doubling.cards > .card {
987
+ width: calc(33.33333333333333% - 2em);
988
+ margin-left: 1em;
989
+ margin-right: 1em;
990
+ }
991
+ .ui.eight.doubling.cards {
992
+ margin-left: -0.75em;
993
+ margin-right: -0.75em;
994
+ }
995
+ .ui.eight.doubling.cards > .card {
996
+ width: calc(25% - 1.5em);
997
+ margin-left: 0.75em;
998
+ margin-right: 0.75em;
999
+ }
1000
+ .ui.nine.doubling.cards {
1001
+ margin-left: -0.75em;
1002
+ margin-right: -0.75em;
1003
+ }
1004
+ .ui.nine.doubling.cards > .card {
1005
+ width: calc(25% - 1.5em);
1006
+ margin-left: 0.75em;
1007
+ margin-right: 0.75em;
1008
+ }
1009
+ .ui.ten.doubling.cards {
1010
+ margin-left: -0.75em;
1011
+ margin-right: -0.75em;
1012
+ }
1013
+ .ui.ten.doubling.cards > .card {
1014
+ width: calc(20% - 1.5em);
1015
+ margin-left: 0.75em;
1016
+ margin-right: 0.75em;
1017
+ }
1018
+ }
1019
+
1020
+ /*-------------------
1021
+ Stackable
1022
+ --------------------*/
1023
+
1024
+ @media only screen and (max-width: 767px) {
1025
+ .ui.stackable.cards {
1026
+ display: block !important;
1027
+ }
1028
+ .ui.stackable.cards .card:first-child {
1029
+ margin-top: 0em !important;
1030
+ }
1031
+ .ui.stackable.cards > .card {
1032
+ display: block !important;
1033
+ height: auto !important;
1034
+ margin: 1em 1em;
1035
+ padding: 0 !important;
1036
+ width: calc(100% - 2em) !important;
1037
+ }
1038
+ }
1039
+
1040
+ /*--------------
1041
+ Size
1042
+ ---------------*/
1043
+
1044
+ .ui.cards > .card {
1045
+ font-size: 1em;
1046
+ }
1047
+
1048
+ /*-----------------
1049
+ Inverted
1050
+ ------------------*/
1051
+
1052
+ .ui.inverted.cards > .card,
1053
+ .ui.inverted.card {
1054
+ background: #1B1C1D;
1055
+ -webkit-box-shadow: 0px 1px 3px 0px #555555, 0px 0px 0px 1px #555555;
1056
+ box-shadow: 0px 1px 3px 0px #555555, 0px 0px 0px 1px #555555;
1057
+ }
1058
+
1059
+ /* Content */
1060
+ .ui.inverted.cards > .card > .content,
1061
+ .ui.inverted.card > .content {
1062
+ border-top: 1px solid rgba(255, 255, 255, 0.15);
1063
+ }
1064
+
1065
+ /* Header */
1066
+ .ui.inverted.cards > .card > .content > .header,
1067
+ .ui.inverted.card > .content > .header {
1068
+ color: rgba(255, 255, 255, 0.9);
1069
+ }
1070
+
1071
+ /* Description */
1072
+ .ui.inverted.cards > .card > .content > .description,
1073
+ .ui.inverted.card > .content > .description {
1074
+ color: rgba(255, 255, 255, 0.8);
1075
+ }
1076
+
1077
+ /* Meta */
1078
+ .ui.inverted.cards > .card .meta,
1079
+ .ui.inverted.card .meta {
1080
+ color: rgba(255, 255, 255, 0.7);
1081
+ }
1082
+ .ui.inverted.cards > .card .meta > a:not(.ui),
1083
+ .ui.inverted.card .meta > a:not(.ui) {
1084
+ color: rgba(255, 255, 255, 0.7);
1085
+ }
1086
+ .ui.inverted.cards > .card .meta > a:not(.ui):hover,
1087
+ .ui.inverted.card .meta > a:not(.ui):hover {
1088
+ color: #ffffff;
1089
+ }
1090
+
1091
+ /* Extra */
1092
+ .ui.inverted.cards > .card > .extra,
1093
+ .ui.inverted.card > .extra {
1094
+ border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
1095
+ color: rgba(255, 255, 255, 0.7);
1096
+ }
1097
+ .ui.inverted.cards > .card > .extra a:not(.ui),
1098
+ .ui.inverted.card > .extra a:not(.ui) {
1099
+ color: rgba(255, 255, 255, 0.5);
1100
+ }
1101
+ .ui.inverted.cards > .card > .extra a:not(.ui):hover,
1102
+ .ui.inverted.card > .extra a:not(.ui):hover {
1103
+ color: #1e70bf;
1104
+ }
1105
+
1106
+ /* Link card(s) */
1107
+ .ui.inverted.cards a.card:hover,
1108
+ .ui.inverted.link.cards .card:not(.icon):hover,
1109
+ a.inverted.ui.card:hover,
1110
+ .ui.inverted.link.card:hover {
1111
+ background: #1B1C1D;
1112
+ }
1113
+
1114
+
1115
+ /*******************************
1116
+ Theme Overrides
1117
+ *******************************/
1118
+
1119
+
1120
+
1121
+ /*******************************
1122
+ User Variable Overrides
1123
+ *******************************/
1124
+