github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/dist/components/item.css (about) 1 /*! 2 * # Semantic UI x.x - Item 3 * http://github.com/semantic-org/semantic-ui/ 4 * 5 * 6 * Copyright 2014 Contributorss 7 * Released under the MIT license 8 * http://opensource.org/licenses/MIT 9 * 10 */ 11 12 13 /******************************* 14 Standard 15 *******************************/ 16 17 18 /*-------------- 19 Item 20 ---------------*/ 21 22 .ui.items > .item { 23 table-layout: fixed; 24 display: table; 25 margin: 1em 0em; 26 width: 100%; 27 min-height: 0px; 28 background: transparent; 29 padding: 0em; 30 border: none; 31 border-radius: 0rem; 32 box-shadow: none; 33 -webkit-transition: box-shadow 0.2s ease; 34 transition: box-shadow 0.2s ease; 35 z-index: ''; 36 } 37 .ui.items > .item a { 38 cursor: pointer; 39 } 40 41 /*-------------- 42 Items 43 ---------------*/ 44 45 .ui.items { 46 margin: 1.5em 0em; 47 } 48 .ui.items:first-child { 49 margin-top: 0em !important; 50 } 51 .ui.items:last-child { 52 margin-bottom: 0em !important; 53 } 54 55 /*-------------- 56 Item 57 ---------------*/ 58 59 .ui.items > .item { 60 min-width: 100%; 61 } 62 .ui.items > .item:after { 63 display: block; 64 content: ' '; 65 height: 0px; 66 clear: both; 67 overflow: hidden; 68 visibility: hidden; 69 } 70 .ui.items > .item:first-child { 71 margin-top: 0em; 72 } 73 .ui.items > .item:last-child { 74 margin-bottom: 0em; 75 } 76 77 /*-------------- 78 Images 79 ---------------*/ 80 81 .ui.items > .item > .image { 82 position: relative; 83 display: table-cell; 84 float: none; 85 margin: 0em; 86 padding: 0em; 87 max-height: ''; 88 vertical-align: top; 89 } 90 .ui.items > .item > .image > img { 91 display: block; 92 width: 100%; 93 height: auto; 94 border-radius: 0.125rem; 95 border: none; 96 } 97 .ui.items > .item > .image:only-child > img { 98 border-radius: 0rem; 99 } 100 101 /*-------------- 102 Content 103 ---------------*/ 104 105 .ui.items > .item > .content { 106 display: block; 107 background: none; 108 margin: 0em; 109 padding: 0em; 110 box-shadow: none; 111 font-size: 1em; 112 border: none; 113 border-radius: 0em; 114 } 115 .ui.items > .item > .content:after { 116 display: block; 117 content: ' '; 118 height: 0px; 119 clear: both; 120 overflow: hidden; 121 visibility: hidden; 122 } 123 .ui.items > .item > .image + .content { 124 width: 100%; 125 display: table-cell; 126 margin-left: 0em; 127 vertical-align: top; 128 padding-left: 1.5em; 129 } 130 .ui.items > .item > .content > .header { 131 display: block; 132 margin: -0.165em 0em 0em; 133 font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif; 134 font-weight: bold; 135 color: rgba(0, 0, 0, 0.85); 136 } 137 138 /* Default Header Size */ 139 .ui.items > .item > .content > .header:not(.ui) { 140 font-size: 1.2em; 141 } 142 143 /*-------------- 144 Floated 145 ---------------*/ 146 147 .ui.items > .item [class*="left floated"] { 148 float: left; 149 } 150 .ui.items > .item [class*="right floated"] { 151 float: right; 152 } 153 154 /*-------------- 155 Content Image 156 ---------------*/ 157 158 .ui.items > .item .content img { 159 vertical-align: middle; 160 width: ''; 161 } 162 .ui.items > .item img.avatar, 163 .ui.items > .item .avatar img { 164 width: ''; 165 height: ''; 166 border-radius: 500rem; 167 } 168 169 /*-------------- 170 Description 171 ---------------*/ 172 173 .ui.items > .item > .content > .description { 174 margin-top: 0.6em; 175 max-width: 550px; 176 font-size: 1em; 177 line-height: 1.33; 178 color: rgba(0, 0, 0, 0.8); 179 } 180 181 /*-------------- 182 Paragraph 183 ---------------*/ 184 185 .ui.items > .item > .content p { 186 margin: 0em 0em 0.5em; 187 } 188 .ui.items > .item > .content p:last-child { 189 margin-bottom: 0em; 190 } 191 192 /*-------------- 193 Meta 194 ---------------*/ 195 196 .ui.items > .item .meta { 197 font-size: 1em; 198 line-height: 1em; 199 color: rgba(0, 0, 0, 0.6); 200 } 201 .ui.items > .item .meta * { 202 margin-right: 0.3em; 203 } 204 .ui.items > .item .meta :last-child { 205 margin-right: 0em; 206 } 207 .ui.items > .item .meta [class*="right floated"] { 208 margin-right: 0em; 209 margin-left: 0.3em; 210 } 211 212 /*-------------- 213 Links 214 ---------------*/ 215 216 217 /* Generic */ 218 .ui.items > .item > .content a:not(.ui) { 219 color: ''; 220 -webkit-transition: color 0.2s ease; 221 transition: color 0.2s ease; 222 } 223 .ui.items > .item > .content a:not(.ui):hover { 224 color: ''; 225 } 226 227 /* Header */ 228 .ui.items > .item > .content > a.header { 229 color: rgba(0, 0, 0, 0.85); 230 } 231 .ui.items > .item > .content > a.header:hover { 232 color: #00b2f3; 233 } 234 235 /* Meta */ 236 .ui.items > .item .meta > a:not(.ui) { 237 color: rgba(0, 0, 0, 0.4); 238 } 239 .ui.items > .item .meta > a:not(.ui):hover { 240 color: rgba(0, 0, 0, 0.8); 241 } 242 243 /*-------------- 244 Labels 245 ---------------*/ 246 247 248 /*-----Star----- */ 249 250 251 /* Icon */ 252 .ui.items > .item > .content .favorite.icon { 253 cursor: pointer; 254 opacity: 0.75; 255 -webkit-transition: color 0.2s ease; 256 transition: color 0.2s ease; 257 } 258 .ui.items > .item > .content .favorite.icon:hover { 259 opacity: 1; 260 color: #ffb70a; 261 } 262 .ui.items > .item > .content .active.favorite.icon { 263 color: #ffe623; 264 } 265 266 /*-----Like----- */ 267 268 269 /* Icon */ 270 .ui.items > .item > .content .like.icon { 271 cursor: pointer; 272 opacity: 0.75; 273 -webkit-transition: color 0.2s ease; 274 transition: color 0.2s ease; 275 } 276 .ui.items > .item > .content .like.icon:hover { 277 opacity: 1; 278 color: #ff2733; 279 } 280 .ui.items > .item > .content .active.like.icon { 281 color: #ff2733; 282 } 283 284 /*---------------- 285 Extra Content 286 -----------------*/ 287 288 .ui.items > .item .extra { 289 display: block; 290 position: relative; 291 background: none; 292 margin: 0.5rem 0em 0em; 293 width: 100%; 294 padding: 0em 0em 0em; 295 top: 0em; 296 left: 0em; 297 color: rgba(0, 0, 0, 0.4); 298 box-shadow: none; 299 -webkit-transition: color 0.2s ease; 300 transition: color 0.2s ease; 301 border-top: none; 302 } 303 .ui.items > .item .extra > * { 304 margin: 0.25rem 0.5rem 0.25rem 0em; 305 } 306 .ui.items > .item .extra > [class*="right floated"] { 307 margin: 0.25rem 0em 0.25rem 0.5rem; 308 } 309 .ui.items > .item .extra:after { 310 display: block; 311 content: ' '; 312 height: 0px; 313 clear: both; 314 overflow: hidden; 315 visibility: hidden; 316 } 317 318 319 /******************************* 320 Responsive 321 *******************************/ 322 323 324 /* Default Image Width */ 325 .ui.items > .item > .image:not(.ui) { 326 width: 175px; 327 } 328 329 /* Tablet Only */ 330 @media only screen and (min-width: 768px) and (max-width: 991px) { 331 .ui.items > .item { 332 margin: 1em 0em; 333 } 334 .ui.items > .item > .image:not(.ui) { 335 width: 150px; 336 } 337 .ui.items > .item > .image + .content { 338 display: block; 339 padding: 0em 0em 0em 1em; 340 } 341 } 342 343 /* Mobily Only */ 344 @media only screen and (max-width: 767px) { 345 .ui.items > .item { 346 margin: 2em 0em; 347 } 348 .ui.items > .item > .image { 349 display: block; 350 margin-left: auto; 351 margin-right: auto; 352 } 353 .ui.items > .item > .image, 354 .ui.items > .item > .image > img { 355 max-width: 100% !important; 356 width: auto !important; 357 max-height: 250px !important; 358 } 359 .ui.items > .item > .image + .content { 360 display: block; 361 padding: 1.5em 0em 0em; 362 } 363 } 364 365 366 /******************************* 367 Variations 368 *******************************/ 369 370 371 /*------------------- 372 Aligned 373 --------------------*/ 374 375 .ui.items > .item > .image + [class*="top aligned"].content { 376 vertical-align: top; 377 } 378 .ui.items > .item > .image + [class*="middle aligned"].content { 379 vertical-align: middle; 380 } 381 .ui.items > .item > .image + [class*="bottom aligned"].content { 382 vertical-align: bottom; 383 } 384 385 /*-------------- 386 Relaxed 387 ---------------*/ 388 389 .ui.relaxed.items > .item { 390 margin: 1.5em 0em; 391 } 392 .ui[class*="very relaxed"].items > .item { 393 margin: 2em 0em; 394 } 395 396 /*------------------- 397 Divided 398 --------------------*/ 399 400 .ui.divided.items > .item { 401 border-top: 1px solid rgba(39, 41, 43, 0.15); 402 margin: 0em; 403 padding: 1em 0em; 404 } 405 .ui.divided.items > .item:first-child { 406 border-top: none; 407 margin-top: 0em !important; 408 padding-top: 0em !important; 409 } 410 .ui.divided.items > .item:last-child { 411 margin-bottom: 0em !important; 412 padding-bottom: 0em !important; 413 } 414 415 /* Relaxed Divided */ 416 .ui.relaxed.divided.items > .item { 417 margin: 0em; 418 padding: 1.5em 0em; 419 } 420 .ui[class*="very relaxed"].divided.items > .item { 421 margin: 0em; 422 padding: 2em 0em; 423 } 424 425 /*------------------- 426 Link 427 --------------------*/ 428 429 .ui.items a.item:hover, 430 .ui.link.items > .item:hover { 431 cursor: pointer; 432 } 433 .ui.items a.item:hover .content .header, 434 .ui.link.items > .item:hover .content .header { 435 color: #00b2f3; 436 } 437 438 /*-------------- 439 Size 440 ---------------*/ 441 442 .ui.items > .item { 443 font-size: 1em; 444 } 445 446 447 /******************************* 448 Theme Overrides 449 *******************************/ 450 451 452 453 /******************************* 454 User Variable Overrides 455 *******************************/ 456