semantic-ui-sass 0.19.3.1 → 1.7.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (107) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +21 -0
  3. data/README.md +5 -6
  4. data/app/assets/fonts/semantic-ui/icons.eot +0 -0
  5. data/app/assets/fonts/semantic-ui/icons.otf +0 -0
  6. data/app/assets/fonts/semantic-ui/icons.svg +472 -367
  7. data/app/assets/fonts/semantic-ui/icons.ttf +0 -0
  8. data/app/assets/fonts/semantic-ui/icons.woff +0 -0
  9. data/app/assets/images/semantic-ui/flags.png +0 -0
  10. data/app/assets/javascripts/semantic-ui.js +9 -5
  11. data/app/assets/javascripts/semantic-ui/accordion.js +169 -102
  12. data/app/assets/javascripts/semantic-ui/api.js +840 -0
  13. data/app/assets/javascripts/semantic-ui/checkbox.js +203 -46
  14. data/app/assets/javascripts/semantic-ui/{behavior/colorize.js → colorize.js} +4 -2
  15. data/app/assets/javascripts/semantic-ui/dimmer.js +110 -76
  16. data/app/assets/javascripts/semantic-ui/dropdown.js +897 -285
  17. data/app/assets/javascripts/semantic-ui/{behavior/form.js → form.js} +127 -42
  18. data/app/assets/javascripts/semantic-ui/modal.js +294 -219
  19. data/app/assets/javascripts/semantic-ui/nag.js +120 -186
  20. data/app/assets/javascripts/semantic-ui/popup.js +491 -223
  21. data/app/assets/javascripts/semantic-ui/progress.js +779 -0
  22. data/app/assets/javascripts/semantic-ui/rating.js +66 -22
  23. data/app/assets/javascripts/semantic-ui/search.js +219 -99
  24. data/app/assets/javascripts/semantic-ui/shape.js +72 -29
  25. data/app/assets/javascripts/semantic-ui/sidebar.js +678 -142
  26. data/app/assets/javascripts/semantic-ui/site.js +487 -0
  27. data/app/assets/javascripts/semantic-ui/{behavior/state.js → state.js} +116 -151
  28. data/app/assets/javascripts/semantic-ui/sticky.js +771 -0
  29. data/app/assets/javascripts/semantic-ui/tab.js +680 -603
  30. data/app/assets/javascripts/semantic-ui/transition.js +269 -158
  31. data/app/assets/javascripts/semantic-ui/video.js +113 -32
  32. data/app/assets/javascripts/semantic-ui/visibility.js +970 -0
  33. data/app/assets/javascripts/semantic-ui/visit.js +513 -0
  34. data/app/assets/stylesheets/semantic-ui.scss +2 -0
  35. data/app/assets/stylesheets/semantic-ui/collections/_breadcrumb.scss +58 -14
  36. data/app/assets/stylesheets/semantic-ui/collections/_form.scss +464 -372
  37. data/app/assets/stylesheets/semantic-ui/collections/_grid.scss +1385 -533
  38. data/app/assets/stylesheets/semantic-ui/collections/_menu.scss +482 -655
  39. data/app/assets/stylesheets/semantic-ui/collections/_message.scss +238 -139
  40. data/app/assets/stylesheets/semantic-ui/collections/_table.scss +631 -280
  41. data/app/assets/stylesheets/semantic-ui/elements/_all.scss +3 -2
  42. data/app/assets/stylesheets/semantic-ui/elements/_button.scss +1614 -657
  43. data/app/assets/stylesheets/semantic-ui/elements/_divider.scss +143 -80
  44. data/app/assets/stylesheets/semantic-ui/elements/_flag.scss +1018 -0
  45. data/app/assets/stylesheets/semantic-ui/elements/_header.scss +302 -145
  46. data/app/assets/stylesheets/semantic-ui/elements/_icon.scss +1653 -1365
  47. data/app/assets/stylesheets/semantic-ui/elements/_image.scss +160 -59
  48. data/app/assets/stylesheets/semantic-ui/elements/_input.scss +247 -118
  49. data/app/assets/stylesheets/semantic-ui/elements/_label.scss +501 -470
  50. data/app/assets/stylesheets/semantic-ui/elements/_list.scss +888 -0
  51. data/app/assets/stylesheets/semantic-ui/elements/_loader.scss +189 -98
  52. data/app/assets/stylesheets/semantic-ui/elements/_rail.scss +125 -0
  53. data/app/assets/stylesheets/semantic-ui/elements/_reveal.scss +147 -212
  54. data/app/assets/stylesheets/semantic-ui/elements/_segment.scss +328 -190
  55. data/app/assets/stylesheets/semantic-ui/elements/_step.scss +261 -185
  56. data/app/assets/stylesheets/semantic-ui/globals/_all.scss +2 -0
  57. data/app/assets/stylesheets/semantic-ui/globals/_reset.scss +430 -0
  58. data/app/assets/stylesheets/semantic-ui/globals/_site.scss +128 -0
  59. data/app/assets/stylesheets/semantic-ui/modules/_accordion.scss +190 -106
  60. data/app/assets/stylesheets/semantic-ui/modules/_all.scss +2 -1
  61. data/app/assets/stylesheets/semantic-ui/modules/_checkbox.scss +303 -201
  62. data/app/assets/stylesheets/semantic-ui/modules/_dimmer.scss +72 -63
  63. data/app/assets/stylesheets/semantic-ui/modules/_dropdown.scss +711 -331
  64. data/app/assets/stylesheets/semantic-ui/modules/_modal.scss +262 -140
  65. data/app/assets/stylesheets/semantic-ui/modules/_nag.scss +82 -71
  66. data/app/assets/stylesheets/semantic-ui/modules/_popup.scss +163 -119
  67. data/app/assets/stylesheets/semantic-ui/modules/_progress.scss +435 -0
  68. data/app/assets/stylesheets/semantic-ui/modules/_rating.scss +163 -68
  69. data/app/assets/stylesheets/semantic-ui/modules/_search.scss +223 -150
  70. data/app/assets/stylesheets/semantic-ui/modules/_shape.scss +39 -40
  71. data/app/assets/stylesheets/semantic-ui/modules/_sidebar.scss +413 -147
  72. data/app/assets/stylesheets/semantic-ui/modules/_sticky.scss +80 -0
  73. data/app/assets/stylesheets/semantic-ui/modules/_tab.scss +49 -20
  74. data/app/assets/stylesheets/semantic-ui/modules/_transition.scss +542 -568
  75. data/app/assets/stylesheets/semantic-ui/modules/_video.scss +69 -37
  76. data/app/assets/stylesheets/semantic-ui/views/_ad.scss +265 -0
  77. data/app/assets/stylesheets/semantic-ui/views/_all.scss +1 -1
  78. data/app/assets/stylesheets/semantic-ui/views/_card.scss +758 -0
  79. data/app/assets/stylesheets/semantic-ui/views/_comment.scss +133 -92
  80. data/app/assets/stylesheets/semantic-ui/views/_feed.scss +200 -87
  81. data/app/assets/stylesheets/semantic-ui/views/_item.scss +298 -523
  82. data/app/assets/stylesheets/semantic-ui/views/_statistic.scss +390 -12
  83. data/lib/semantic/ui/sass/version.rb +2 -2
  84. data/tasks/converter.rb +99 -216
  85. metadata +22 -27
  86. data/app/assets/fonts/semantic-ui/basic.icons.eot +0 -0
  87. data/app/assets/fonts/semantic-ui/basic.icons.svg +0 -450
  88. data/app/assets/fonts/semantic-ui/basic.icons.ttf +0 -0
  89. data/app/assets/fonts/semantic-ui/basic.icons.woff +0 -0
  90. data/app/assets/images/semantic-ui/loader-large-inverted.gif +0 -0
  91. data/app/assets/images/semantic-ui/loader-large.gif +0 -0
  92. data/app/assets/images/semantic-ui/loader-medium-inverted.gif +0 -0
  93. data/app/assets/images/semantic-ui/loader-medium.gif +0 -0
  94. data/app/assets/images/semantic-ui/loader-mini-inverted.gif +0 -0
  95. data/app/assets/images/semantic-ui/loader-mini.gif +0 -0
  96. data/app/assets/images/semantic-ui/loader-small-inverted.gif +0 -0
  97. data/app/assets/images/semantic-ui/loader-small.gif +0 -0
  98. data/app/assets/javascripts/semantic-ui/behavior/api.js +0 -634
  99. data/app/assets/javascripts/semantic-ui/chatroom.js +0 -772
  100. data/app/assets/stylesheets/semantic-ui/depends/_basic.icon.scss +0 -4
  101. data/app/assets/stylesheets/semantic-ui/depends/_icon.scss +0 -4
  102. data/app/assets/stylesheets/semantic-ui/depends/_loader.scss +0 -8
  103. data/app/assets/stylesheets/semantic-ui/elements/_basic.icon.scss +0 -1124
  104. data/app/assets/stylesheets/semantic-ui/elements/_progress.scss +0 -280
  105. data/app/assets/stylesheets/semantic-ui/modules/_chatroom.scss +0 -299
  106. data/app/assets/stylesheets/semantic-ui/modules/_reveal.scss +0 -322
  107. data/app/assets/stylesheets/semantic-ui/views/_list.scss +0 -700
@@ -1,38 +1,66 @@
1
- /*
2
- * # Semantic Item View
3
- * http://github.com/jlukic/semantic-ui/
4
- *
1
+ /*
2
+ * # Semantic UI
3
+ * https://github.com/Semantic-Org/Semantic-UI
4
+ * http://www.semantic-ui.com/
5
5
  *
6
6
  * Copyright 2014 Contributors
7
7
  * Released under the MIT license
8
8
  * http://opensource.org/licenses/MIT
9
9
  *
10
- * Released: April 17 2014
11
10
  */
12
11
 
12
+
13
+
13
14
  /*******************************
14
15
  Standard
15
16
  *******************************/
16
17
 
18
+
19
+ /*--------------
20
+ Item
21
+ ---------------*/
22
+
23
+ .ui.items > .item {
24
+ table-layout: fixed;
25
+ display: table;
26
+ margin: 1em 0em;
27
+ width: 100%;
28
+ min-height: 0px;
29
+ background: transparent;
30
+ padding: 0em;
31
+ border: none;
32
+ border-radius: 0rem;
33
+ box-shadow: none;
34
+ -webkit-transition: box-shadow 0.2s ease;
35
+ transition: box-shadow 0.2s ease;
36
+ z-index: '';
37
+ }
38
+ .ui.items > .item a {
39
+ cursor: pointer;
40
+ }
41
+
17
42
  /*--------------
18
43
  Items
19
44
  ---------------*/
20
45
 
21
46
  .ui.items {
22
- margin: 1em 0em 0em;
47
+ margin: 1.5em 0em;
23
48
  }
24
-
25
49
  .ui.items:first-child {
26
- margin-top: 0em;
50
+ margin-top: 0em !important;
27
51
  }
28
-
29
52
  .ui.items:last-child {
30
- margin-bottom: -1em;
53
+ margin-bottom: 0em !important;
31
54
  }
32
55
 
33
- /* Force Clearing */
56
+ /*--------------
57
+ Item
58
+ ---------------*/
34
59
 
35
- .ui.items:after {
60
+ .ui.items > .item {
61
+ min-width: 100%;
62
+ }
63
+ .ui.items > .item:after {
36
64
  display: block;
37
65
  content: ' ';
38
66
  height: 0px;
@@ -40,644 +68,391 @@
40
68
  overflow: hidden;
41
69
  visibility: hidden;
42
70
  }
43
-
44
- /*--------------
45
- Item
46
- ---------------*/
47
-
48
- .ui.items > .row > .item,
49
- .ui.items > .item {
50
- display: block;
51
- float: left;
52
- position: relative;
53
- top: 0px;
54
- width: 316px;
55
- min-height: 375px;
56
- margin: 0em 0.5em 2.5em;
57
- padding: 0em;
58
- background-color: #FFFFFF;
59
- line-height: 1.2;
60
- font-size: 1em;
61
- -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
62
- box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
63
- border-bottom: 0.2em solid rgba(0, 0, 0, 0.2);
64
- border-radius: 0.33em;
65
- -webkit-transition: -webkit-box-shadow 0.2s ease;
66
- transition: box-shadow 0.2s ease;
67
- padding: 0.5em;
68
- }
69
-
70
- .ui.items a.item,
71
- .ui.items .item a {
72
- cursor: pointer;
71
+ .ui.items > .item:first-child {
72
+ margin-top: 0em;
73
73
  }
74
-
75
- .ui.items .item,
76
- .ui.items .item > .image,
77
- .ui.items .item > .image .overlay,
78
- .ui.items .item > .content,
79
- .ui.items .item > .content > .meta,
80
- .ui.items .item > .content > .extra {
81
- -webkit-box-sizing: border-box;
82
- -moz-box-sizing: border-box;
83
- -ms-box-sizing: border-box;
84
- box-sizing: border-box;
74
+ .ui.items > .item:last-child {
75
+ margin-bottom: 0em;
85
76
  }
86
77
 
87
78
  /*--------------
88
- Images
79
+ Images
89
80
  ---------------*/
90
81
 
91
- .ui.items .item > .image {
92
- display: block;
82
+ .ui.items > .item > .image {
93
83
  position: relative;
94
- background-color: rgba(0, 0, 0, 0.05);
95
- -webkit-box-sizing: border-box;
96
- -moz-box-sizing: border-box;
97
- -ms-box-sizing: border-box;
98
- box-sizing: border-box;
99
- border-radius: 0.2em;
84
+ display: table-cell;
85
+ float: none;
86
+ margin: 0em;
87
+ padding: 0em;
88
+ max-height: '';
89
+ vertical-align: top;
100
90
  }
101
-
102
- .ui.items .item > .image > img {
91
+ .ui.items > .item > .image > img {
103
92
  display: block;
104
93
  width: 100%;
94
+ height: auto;
95
+ border-radius: 0.125rem;
96
+ border: none;
97
+ }
98
+ .ui.items > .item > .image:only-child > img {
99
+ border-radius: 0rem;
105
100
  }
106
101
 
107
102
  /*--------------
108
103
  Content
109
104
  ---------------*/
110
105
 
111
- .ui.items .item > .content {
112
- padding: 0.75em 0.5em;
113
- }
114
-
115
- .ui.items .item > .content > .name {
106
+ .ui.items > .item > .content {
116
107
  display: block;
117
- font-size: 1.25em;
118
- font-weight: bold;
119
- margin-bottom: 0.2em;
120
- color: rgba(0, 0, 0, 0.7);
108
+ background: none;
109
+ margin: 0em;
110
+ padding: 0em;
111
+ box-shadow: none;
112
+ font-size: 1em;
113
+ border: none;
114
+ border-radius: 0em;
121
115
  }
122
-
123
- .ui.items .item > .content > .description {
116
+ .ui.items > .item > .content:after {
117
+ display: block;
118
+ content: ' ';
119
+ height: 0px;
124
120
  clear: both;
125
- margin: 0em 0em;
126
- color: rgba(0, 0, 0, 0.45);
121
+ overflow: hidden;
122
+ visibility: hidden;
127
123
  }
128
-
129
- .ui.items .item > .content > .description p {
130
- margin: 0em 0em 0.2em;
124
+ .ui.items > .item > .image + .content {
125
+ width: 100%;
126
+ display: table-cell;
127
+ margin-left: 0em;
128
+ vertical-align: top;
129
+ padding-left: 1.5em;
130
+ }
131
+ .ui.items > .item > .content > .header {
132
+ display: inline-block;
133
+ margin: -0.165em 0em 0em;
134
+ font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
135
+ font-weight: bold;
136
+ color: rgba(0, 0, 0, 0.85);
131
137
  }
132
138
 
133
- .ui.items .item > .content > .description p:last-child {
134
- margin-bottom: 0em;
139
+ /* Default Header Size */
140
+ .ui.items > .item > .content > .header:not(.ui) {
141
+ font-size: 1.2em;
135
142
  }
136
143
 
137
144
  /*--------------
138
- Meta
145
+ Floated
139
146
  ---------------*/
140
147
 
141
- .ui.items .item .meta {
142
- float: right;
143
- color: rgba(0, 0, 0, 0.35);
144
- }
145
-
146
- .ui.items .item > .content > .meta + .name {
148
+ .ui.items > .item [class*="left floated"] {
147
149
  float: left;
148
150
  }
151
+ .ui.items > .item [class*="right floated"] {
152
+ float: right;
153
+ }
149
154
 
150
155
  /*--------------
151
- Labels
156
+ Content Image
152
157
  ---------------*/
153
158
 
154
- /*-----star----- */
155
-
156
- /* hover */
157
-
158
- .ui.items .item .star.label:hover::after {
159
- border-right-color: #F6EFC3;
160
- }
161
-
162
- .ui.items .item .star.label:hover::after {
163
- border-top-color: #F6EFC3;
164
- }
165
-
166
- .ui.items .item .star.label:hover .icon {
167
- color: #AC9400;
168
- }
169
-
170
- /* active */
171
-
172
- .ui.items .item .star.label.active::after {
173
- border-right-color: #F6EFC3;
174
- }
175
-
176
- .ui.items .item .star.label.active::after {
177
- border-top-color: #F6EFC3;
178
- }
179
-
180
- .ui.items .item .star.label.active .icon {
181
- color: #AC9400;
159
+ .ui.items > .item .content img {
160
+ display: inline-block;
161
+ vertical-align: middle;
162
+ width: 2em;
182
163
  }
183
-
184
- /*-----like----- */
185
-
186
- /* hover */
187
-
188
- .ui.items .item .like.label:hover::after {
189
- border-right-color: #F5E1E2;
164
+ .ui.items > .item img.avatar,
165
+ .ui.items > .item .avatar img {
166
+ width: 2em;
167
+ height: 2em;
168
+ border-radius: 500rem;
190
169
  }
191
170
 
192
- .ui.items .item .like.label.active::after {
193
- border-top-color: #F5E1E2;
194
- }
171
+ /*--------------
172
+ Description
173
+ ---------------*/
195
174
 
196
- .ui.items .item .like.label:hover .icon {
197
- color: #EF404A;
175
+ .ui.items > .item > .content > .description {
176
+ margin-top: 0.6em;
177
+ max-width: 550px;
178
+ font-size: 1em;
179
+ line-height: 1.33;
180
+ color: rgba(0, 0, 0, 0.8);
198
181
  }
199
182
 
200
- /* active */
201
-
202
- .ui.items .item .like.label.active::after {
203
- border-right-color: #F5E1E2;
204
- }
183
+ /*--------------
184
+ Paragraph
185
+ ---------------*/
205
186
 
206
- .ui.items .item .like.label.active::after {
207
- border-top-color: #F5E1E2;
187
+ .ui.items > .item > .content p {
188
+ margin: 0em 0em 0.5em;
208
189
  }
209
-
210
- .ui.items .item .like.label.active .icon {
211
- color: #EF404A;
190
+ .ui.items > .item > .content p:last-child {
191
+ margin-bottom: 0em;
212
192
  }
213
193
 
214
194
  /*--------------
215
- Extra
195
+ Meta
216
196
  ---------------*/
217
197
 
218
- .ui.items .item .extra {
219
- position: absolute;
220
- width: 100%;
221
- padding: 0em 0.5em;
222
- bottom: -2em;
223
- left: 0em;
224
- height: 1.5em;
225
- color: rgba(0, 0, 0, 0.25);
226
- -webkit-transition: color 0.2s ease;
227
- transition: color 0.2s ease;
198
+ .ui.items > .item .meta {
199
+ font-size: 1em;
200
+ line-height: 1em;
201
+ color: rgba(0, 0, 0, 0.6);
228
202
  }
229
-
230
- .ui.items .item .extra > img {
231
- display: inline-block;
232
- border-radius: 500px 500px 500px 500px;
233
- margin-right: 0.25em;
234
- vertical-align: middle;
235
- width: 2em;
203
+ .ui.items > .item .meta * {
204
+ margin-right: 0.3em;
236
205
  }
237
-
238
- .ui.items .item .extra .left {
239
- float: left;
206
+ .ui.items > .item .meta :last-child {
207
+ margin-right: 0em;
240
208
  }
241
-
242
- .ui.items .item .extra .right {
243
- float: right;
209
+ .ui.items > .item .meta [class*="right floated"] {
210
+ margin-right: 0em;
211
+ margin-left: 0.3em;
244
212
  }
245
213
 
246
- /*******************************
247
- States
248
- *******************************/
249
-
250
- .ui.items .item:hover {
251
- cursor: pointer;
252
- z-index: 5;
253
- -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
254
- box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
255
- }
214
+ /*--------------
215
+ Links
216
+ ---------------*/
256
217
 
257
- .ui.items .item:hover .extra {
258
- color: rgba(0, 0, 0, 0.5);
259
- }
260
218
 
261
- .ui.items .item:nth-of-type(6n+1):hover {
262
- border-bottom-color: #6ECFF5 !important;
219
+ /* Generic */
220
+ .ui.items > .item > .content a:not(.ui) {
221
+ color: '';
222
+ -webkit-transition: color 0.2s ease;
223
+ transition: color 0.2s ease;
263
224
  }
264
-
265
- .ui.items .item:nth-of-type(6n+2):hover {
266
- border-bottom-color: #5C6166 !important;
225
+ .ui.items > .item > .content a:not(.ui):hover {
226
+ color: '';
267
227
  }
268
228
 
269
- .ui.items .item:nth-of-type(6n+3):hover {
270
- border-bottom-color: #A1CF64 !important;
229
+ /* Header */
230
+ .ui.items > .item > .content > a.header {
231
+ color: rgba(0, 0, 0, 0.85);
271
232
  }
272
-
273
- .ui.items .item:nth-of-type(6n+4):hover {
274
- border-bottom-color: #D95C5C !important;
233
+ .ui.items > .item > .content > a.header:hover {
234
+ color: #00b2f3;
275
235
  }
276
236
 
277
- .ui.items .item:nth-of-type(6n+5):hover {
278
- border-bottom-color: #00B5AD !important;
237
+ /* Meta */
238
+ .ui.items > .item .meta > a:not(.ui) {
239
+ color: rgba(0, 0, 0, 0.4);
279
240
  }
280
-
281
- .ui.items .item:nth-of-type(6n+6):hover {
282
- border-bottom-color: #564F8A !important;
241
+ .ui.items > .item .meta > a:not(.ui):hover {
242
+ color: rgba(0, 0, 0, 0.8);
283
243
  }
284
244
 
285
- /*******************************
286
- Variations
287
- *******************************/
288
-
289
245
  /*--------------
290
- Connected
246
+ Labels
291
247
  ---------------*/
292
248
 
293
- .ui.connected.items {
294
- display: table;
295
- width: 100%;
296
- margin-left: 0em !important;
297
- margin-right: 0em !important;
298
- }
299
249
 
300
- .ui.connected.items > .row > .item,
301
- .ui.connected.items > .item {
302
- float: none;
303
- display: table-cell;
304
- vertical-align: top;
305
- height: auto;
306
- border-radius: 0px;
307
- margin: 0em;
308
- width: 33.33%;
309
- }
250
+ /*-----Star----- */
310
251
 
311
- .ui.connected.items > .row {
312
- display: table;
313
- margin: 0.5em 0em;
314
- }
315
252
 
316
- .ui.connected.items > .row:first-child {
317
- margin-top: 0em;
253
+ /* Icon */
254
+ .ui.items > .item > .content .favorite.icon {
255
+ cursor: pointer;
256
+ opacity: 0.75;
257
+ -webkit-transition: color 0.2s ease;
258
+ transition: color 0.2s ease;
318
259
  }
319
-
320
- /* Borders */
321
-
322
- .ui.connected.items > .item,
323
- .ui.connected.items > .row:last-child > .item {
324
- border-bottom: 0.2em solid rgba(0, 0, 0, 0.2);
260
+ .ui.items > .item > .content .favorite.icon:hover {
261
+ opacity: 1;
262
+ color: #ffb70a;
325
263
  }
326
-
327
- .ui.connected.items > .row:last-child > .item:first-child,
328
- .ui.connected.items > .item:first-child {
329
- border-radius: 0em 0em 0em 0.33em;
264
+ .ui.items > .item > .content .active.favorite.icon {
265
+ color: #ffb70a;
330
266
  }
331
267
 
332
- .ui.connected.items > .row:last-child > .item:last-child,
333
- .ui.connected.items > .item:last-child {
334
- border-radius: 0em 0em 0.33em 0em;
335
- }
268
+ /*-----Like----- */
336
269
 
337
- /* Hover */
338
270
 
339
- .ui.connected.items .item:hover {
340
- border-bottom-width: 0.2em;
271
+ /* Icon */
272
+ .ui.items > .item > .content .like.icon {
273
+ cursor: pointer;
274
+ opacity: 0.75;
275
+ -webkit-transition: color 0.2s ease;
276
+ transition: color 0.2s ease;
341
277
  }
342
-
343
- /* Item Count */
344
-
345
- .ui.one.connected.items > .row > .item,
346
- .ui.one.connected.items > .item {
347
- width: 50%;
348
- padding-left: 2%;
349
- padding-right: 2%;
278
+ .ui.items > .item > .content .like.icon:hover {
279
+ opacity: 1;
280
+ color: #ff2733;
350
281
  }
351
-
352
- .ui.two.connected.items > .row > .item,
353
- .ui.two.connected.items > .item {
354
- width: 50%;
355
- padding-left: 1%;
356
- padding-right: 1%;
282
+ .ui.items > .item > .content .active.like.icon {
283
+ color: #ff2733;
357
284
  }
358
285
 
359
- .ui.three.connected.items > .row > .item,
360
- .ui.three.connected.items > .item {
361
- width: 33.333%;
362
- padding-left: 1%;
363
- padding-right: 1%;
364
- }
286
+ /*----------------
287
+ Extra Content
288
+ -----------------*/
365
289
 
366
- .ui.four.connected.items > .row > .item,
367
- .ui.four.connected.items > .item {
368
- width: 25%;
369
- padding-left: 0.5%;
370
- padding-right: 0.5%;
290
+ .ui.items > .item .extra {
291
+ display: block;
292
+ position: relative;
293
+ background: none;
294
+ margin: 0.5rem 0em 0em;
295
+ width: 100%;
296
+ padding: 0em 0em 0em;
297
+ top: 0em;
298
+ left: 0em;
299
+ color: rgba(0, 0, 0, 0.4);
300
+ box-shadow: none;
301
+ -webkit-transition: color 0.2s ease;
302
+ transition: color 0.2s ease;
303
+ border-top: none;
371
304
  }
372
-
373
- .ui.five.connected.items > .row > .item,
374
- .ui.five.connected.items > .item {
375
- width: 20%;
376
- padding-left: 0.5%;
377
- padding-right: 0.5%;
305
+ .ui.items > .item .extra > * {
306
+ margin: 0.25rem 0.5rem 0.25rem 0em;
378
307
  }
379
-
380
- .ui.six.connected.items > .row > .item,
381
- .ui.six.connected.items > .item {
382
- width: 16.66%;
383
- padding-left: 0.5%;
384
- padding-right: 0.5%;
308
+ .ui.items > .item .extra > [class*="right floated"] {
309
+ margin: 0.25rem 0em 0.25rem 0.5rem;
385
310
  }
386
-
387
- .ui.seven.connected.items > .row > .item,
388
- .ui.seven.connected.items > .item {
389
- width: 14.28%;
390
- padding-left: 0.5%;
391
- padding-right: 0.5%;
311
+ .ui.items > .item .extra:after {
312
+ display: block;
313
+ content: ' ';
314
+ height: 0px;
315
+ clear: both;
316
+ overflow: hidden;
317
+ visibility: hidden;
392
318
  }
393
319
 
394
- .ui.eight.connected.items > .row > .item,
395
- .ui.eight.connected.items > .item {
396
- width: 12.5%;
397
- padding-left: 0.25%;
398
- padding-right: 0.25%;
399
- }
400
320
 
401
- .ui.nine.connected.items > .row > .item,
402
- .ui.nine.connected.items > .item {
403
- width: 11.11%;
404
- padding-left: 0.25%;
405
- padding-right: 0.25%;
406
- }
321
+ /*******************************
322
+ Responsive
323
+ *******************************/
407
324
 
408
- .ui.ten.connected.items > .row > .item,
409
- .ui.ten.connected.items > .item {
410
- width: 10%;
411
- padding-left: 0.2%;
412
- padding-right: 0.2%;
413
- }
414
325
 
415
- .ui.eleven.connected.items > .row > .item,
416
- .ui.eleven.connected.items > .item {
417
- width: 9.09%;
418
- padding-left: 0.2%;
419
- padding-right: 0.2%;
326
+ /* Default Image Width */
327
+ .ui.items > .item > .image:not(.ui) {
328
+ width: 175px;
420
329
  }
421
330
 
422
- .ui.twelve.connected.items > .row > .item,
423
- .ui.twelve.connected.items > .item {
424
- width: 8.3333%;
425
- padding-left: 0.1%;
426
- padding-right: 0.1%;
331
+ /* Tablet Only */
332
+ @media only screen and (min-width: 768px) and (max-width: 991px) {
333
+ .ui.items > .item {
334
+ margin: 1em 0em;
335
+ }
336
+ .ui.items > .item > .image:not(.ui) {
337
+ width: 150px;
338
+ }
339
+ .ui.items > .item > .image + .content {
340
+ display: block;
341
+ padding: 0em 0em 0em 1em;
342
+ }
427
343
  }
428
344
 
429
- /*-------------------
430
- Responsive
431
- --------------------*/
432
-
433
- @media only screen and (max-width : 768px) {
434
- .ui.stackable.items {
435
- display: block !important;
345
+ /* Mobily Only */
346
+ @media only screen and (max-width: 767px) {
347
+ .ui.items > .item {
348
+ margin: 2em 0em;
436
349
  }
437
-
438
- .ui.stackable.items > .item,
439
- .ui.stackable.items > .row > .item {
440
- display: block !important;
441
- height: auto !important;
442
- width: 100% !important;
443
- padding: 0% !important;
350
+ .ui.items > .item > .image {
351
+ display: block;
352
+ margin-left: auto;
353
+ margin-right: auto;
354
+ }
355
+ .ui.items > .item > .image,
356
+ .ui.items > .item > .image > img {
357
+ max-width: 100% !important;
358
+ width: auto !important;
359
+ max-height: 250px !important;
360
+ }
361
+ .ui.items > .item > .image + .content {
362
+ display: block;
363
+ padding: 1.5em 0em 0em;
444
364
  }
445
365
  }
446
366
 
447
- /*--------------------
448
- Horizontal
449
- ---------------------*/
450
367
 
451
- .ui.horizontal.items > .item,
452
- .ui.items > .horizontal.item {
453
- display: table;
454
- }
368
+ /*******************************
369
+ Variations
370
+ *******************************/
455
371
 
456
- .ui.horizontal.items > .item > .image,
457
- .ui.items > .horizontal.item > .image {
458
- display: table-cell;
459
- width: 50%;
460
- }
461
372
 
462
- .ui.horizontal.items > .item > .image + .content,
463
- .ui.items > .horizontal.item > .image + .content {
464
- width: 50%;
465
- display: table-cell;
466
- }
373
+ /*-------------------
374
+ Aligned
375
+ --------------------*/
467
376
 
468
- .ui.horizontal.items > .item > .content,
469
- .ui.items > .horizontal.item > .content {
470
- padding: 1% 1.7% 11% 3%;
377
+ .ui.items > .item > .image + [class*="top aligned"].content {
471
378
  vertical-align: top;
472
379
  }
473
-
474
- .ui.horizontal.items > .item > .meta,
475
- .ui.items > .horizontal.item > .meta {
476
- position: absolute;
477
- padding: 0%;
478
- bottom: 7%;
479
- left: 3%;
480
- width: 94%;
481
- }
482
-
483
- .ui.horizontal.items > .item > .image + .content + .meta,
484
- .ui.items > .horizontal.item > .image + .content + .meta {
485
- bottom: 7%;
486
- left: 53%;
487
- width: 44%;
488
- }
489
-
490
- .ui.horizontal.items > .item .avatar,
491
- .ui.items > .horizontal.item .avatar {
492
- width: 11.5%;
380
+ .ui.items > .item > .image + [class*="middle aligned"].content {
381
+ vertical-align: middle;
493
382
  }
494
-
495
- .ui.items > .item .avatar {
496
- max-width: 25px;
383
+ .ui.items > .item > .image + [class*="bottom aligned"].content {
384
+ vertical-align: bottom;
497
385
  }
498
386
 
499
387
  /*--------------
500
- Item Count
388
+ Relaxed
501
389
  ---------------*/
502
390
 
503
- .ui.one.items {
504
- margin-left: -2%;
505
- margin-right: -2%;
506
- }
507
-
508
- .ui.one.items > .item {
509
- width: 100%;
510
- margin-left: 2%;
511
- margin-right: 2%;
512
- }
513
-
514
- .ui.two.items {
515
- margin-left: -1%;
516
- margin-right: -1%;
517
- }
518
-
519
- .ui.two.items > .item {
520
- width: 48%;
521
- margin-left: 1%;
522
- margin-right: 1%;
523
- }
524
-
525
- .ui.two.items > .item:nth-child(2n+1) {
526
- clear: left;
527
- }
528
-
529
- .ui.three.items {
530
- margin-left: -1%;
531
- margin-right: -1%;
532
- }
533
-
534
- .ui.three.items > .item {
535
- width: 31.333%;
536
- margin-left: 1%;
537
- margin-right: 1%;
391
+ .ui.relaxed.items > .item {
392
+ margin: 1.5em 0em;
538
393
  }
539
-
540
- .ui.three.items > .item:nth-child(3n+1) {
541
- clear: left;
394
+ .ui[class*="very relaxed"].items > .item {
395
+ margin: 2em 0em;
542
396
  }
543
397
 
544
- .ui.four.items {
545
- margin-left: -0.5%;
546
- margin-right: -0.5%;
547
- }
548
-
549
- .ui.four.items > .item {
550
- width: 24%;
551
- margin-left: 0.5%;
552
- margin-right: 0.5%;
553
- }
554
-
555
- .ui.four.items > .item:nth-child(4n+1) {
556
- clear: left;
557
- }
558
-
559
- .ui.five.items {
560
- margin-left: -0.5%;
561
- margin-right: -0.5%;
562
- }
563
-
564
- .ui.five.items > .item {
565
- width: 19%;
566
- margin-left: 0.5%;
567
- margin-right: 0.5%;
568
- }
569
-
570
- .ui.five.items > .item:nth-child(5n+1) {
571
- clear: left;
572
- }
573
-
574
- .ui.six.items {
575
- margin-left: -0.5%;
576
- margin-right: -0.5%;
577
- }
578
-
579
- .ui.six.items > .item {
580
- width: 15.66%;
581
- margin-left: 0.5%;
582
- margin-right: 0.5%;
583
- }
584
-
585
- .ui.six.items > .item:nth-child(6n+1) {
586
- clear: left;
587
- }
588
-
589
- .ui.seven.items {
590
- margin-left: -0.5%;
591
- margin-right: -0.5%;
592
- }
398
+ /*-------------------
399
+ Divided
400
+ --------------------*/
593
401
 
594
- .ui.seven.items > .item {
595
- width: 13.28%;
596
- margin-left: 0.5%;
597
- margin-right: 0.5%;
598
- font-size: 11px;
402
+ .ui.divided.items > .item {
403
+ border-top: 1px solid rgba(39, 41, 43, 0.15);
404
+ margin: 0em;
405
+ padding: 1em 0em;
599
406
  }
600
-
601
- .ui.seven.items > .item:nth-child(7n+1) {
602
- clear: left;
407
+ .ui.divided.items > .item:first-child {
408
+ border-top: none;
409
+ margin-top: 0em !important;
410
+ padding-top: 0em !important;
603
411
  }
604
-
605
- .ui.eight.items {
606
- margin-left: -0.25%;
607
- margin-right: -0.25%;
412
+ .ui.divided.items > .item:last-child {
413
+ margin-bottom: 0em !important;
414
+ padding-bottom: 0em !important;
608
415
  }
609
416
 
610
- .ui.eight.items > .item {
611
- width: 12.0%;
612
- margin-left: 0.25%;
613
- margin-right: 0.25%;
614
- font-size: 11px;
615
- }
616
-
617
- .ui.eight.items > .item:nth-child(8n+1) {
618
- clear: left;
417
+ /* Relaxed Divided */
418
+ .ui.relaxed.divided.items > .item {
419
+ margin: 0em;
420
+ padding: 1.5em 0em;
619
421
  }
620
-
621
- .ui.nine.items {
622
- margin-left: -0.25%;
623
- margin-right: -0.25%;
422
+ .ui[class*="very relaxed"].divided.items > .item {
423
+ margin: 0em;
424
+ padding: 2em 0em;
624
425
  }
625
426
 
626
- .ui.nine.items > .item {
627
- width: 10.61%;
628
- margin-left: 0.25%;
629
- margin-right: 0.25%;
630
- font-size: 10px;
631
- }
427
+ /*-------------------
428
+ Link
429
+ --------------------*/
632
430
 
633
- .ui.nine.items > .item:nth-child(9n+1) {
634
- clear: left;
431
+ .ui.items a.item:hover,
432
+ .ui.link.items > .item:hover {
433
+ cursor: pointer;
635
434
  }
636
-
637
- .ui.ten.items {
638
- margin-left: -0.2%;
639
- margin-right: -0.2%;
435
+ .ui.items a.item:hover .content .header,
436
+ .ui.link.items > .item:hover .content .header {
437
+ color: #00b2f3;
640
438
  }
641
439
 
642
- .ui.ten.items > .item {
643
- width: 9.6%;
644
- margin-left: 0.2%;
645
- margin-right: 0.2%;
646
- font-size: 10px;
647
- }
440
+ /*--------------
441
+ Size
442
+ ---------------*/
648
443
 
649
- .ui.ten.items > .item:nth-child(10n+1) {
650
- clear: left;
444
+ .ui.items > .item {
445
+ font-size: 1em;
651
446
  }
652
447
 
653
- .ui.eleven.items {
654
- margin-left: -0.2%;
655
- margin-right: -0.2%;
656
- }
657
448
 
658
- .ui.eleven.items > .item {
659
- width: 8.69%;
660
- margin-left: 0.2%;
661
- margin-right: 0.2%;
662
- font-size: 9px;
663
- }
449
+ /*******************************
450
+ Theme Overrides
451
+ *******************************/
664
452
 
665
- .ui.eleven.items > .item:nth-child(11n+1) {
666
- clear: left;
667
- }
668
453
 
669
- .ui.twelve.items {
670
- margin-left: -0.1%;
671
- margin-right: -0.1%;
672
- }
673
454
 
674
- .ui.twelve.items > .item {
675
- width: 8.1333%;
676
- margin-left: 0.1%;
677
- margin-right: 0.1%;
678
- font-size: 9px;
679
- }
455
+ /*******************************
456
+ User Variable Overrides
457
+ *******************************/
680
458
 
681
- .ui.twelve.items > .item:nth-child(12n+1) {
682
- clear: left;
683
- }