github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/dist/components/card.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 Card 20 ---------------*/ 21 22 .ui.cards > .card, 23 .ui.card { 24 max-width: 100%; 25 position: relative; 26 display: -webkit-box; 27 display: -webkit-flex; 28 display: -ms-flexbox; 29 display: flex; 30 -webkit-box-orient: vertical; 31 -webkit-box-direction: normal; 32 -webkit-flex-direction: column; 33 -ms-flex-direction: column; 34 flex-direction: column; 35 width: 290px; 36 min-height: 0px; 37 background: #ffffff; 38 padding: 0em; 39 border: none; 40 border-radius: 0.2857rem; 41 box-shadow: 0px 3px 0px 0px #d4d4d5, 0px 0px 0px 1px #d4d4d5; 42 -webkit-transition: box-shadow 0.2s ease; 43 transition: box-shadow 0.2s 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: -webkit-flex; 67 display: -ms-flexbox; 68 display: flex; 69 margin: -0.875em -0.5em; 70 -webkit-flex-wrap: wrap; 71 -ms-flex-wrap: wrap; 72 flex-wrap: wrap; 73 } 74 .ui.cards > .card { 75 display: -webkit-box; 76 display: -webkit-flex; 77 display: -ms-flexbox; 78 display: flex; 79 margin: 0.875em 0.5em; 80 float: none; 81 } 82 83 /* Clearing */ 84 .ui.cards:after, 85 .ui.card:after { 86 display: block; 87 content: ' '; 88 height: 0px; 89 clear: both; 90 overflow: hidden; 91 visibility: hidden; 92 } 93 94 /* Consecutive Card Groups Preserve Row Spacing */ 95 .ui.cards ~ .ui.cards { 96 margin-top: 0.875em; 97 } 98 99 /*-------------- 100 Rounded Edges 101 ---------------*/ 102 103 .ui.cards > .card > :first-child, 104 .ui.card > :first-child { 105 border-radius: 0.2857rem 0.2857rem 0em 0em !important; 106 } 107 .ui.cards > .card > :last-child, 108 .ui.card > :last-child { 109 border-radius: 0em 0em 0.2857rem 0.2857rem !important; 110 } 111 112 /*-------------- 113 Images 114 ---------------*/ 115 116 .ui.cards > .card > .image, 117 .ui.card > .image { 118 display: block; 119 position: relative; 120 padding: 0em; 121 background: rgba(0, 0, 0, 0.05); 122 } 123 .ui.cards > .card > .image > img, 124 .ui.card > .image > img { 125 display: block; 126 width: 100%; 127 height: auto; 128 border-radius: 0.2857rem 0.2857rem 0em 0em; 129 border: none; 130 } 131 .ui.cards > .card > .image:only-child > img, 132 .ui.card > .image:only-child > img { 133 border-radius: 0.2857rem; 134 } 135 136 /*-------------- 137 Content 138 ---------------*/ 139 140 .ui.cards > .card > .content, 141 .ui.card > .content { 142 -webkit-box-flex: 1; 143 -webkit-flex-grow: 1; 144 -ms-flex-positive: 1; 145 flex-grow: 1; 146 background: none; 147 margin: 0em; 148 padding: 1em 1em; 149 box-shadow: none; 150 font-size: 1em; 151 border: none; 152 border-radius: 0em; 153 } 154 .ui.cards > .card > .content:after, 155 .ui.card > .content:after { 156 display: block; 157 content: ' '; 158 height: 0px; 159 clear: both; 160 overflow: hidden; 161 visibility: hidden; 162 } 163 .ui.cards > .card > .content > .header, 164 .ui.card > .content > .header { 165 display: block; 166 margin: 0em; 167 font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif; 168 color: rgba(0, 0, 0, 0.85); 169 } 170 171 /* Default Header Size */ 172 .ui.cards > .card > .content > .header:not(.ui), 173 .ui.card > .content > .header:not(.ui) { 174 font-weight: bold; 175 font-size: 1.2em; 176 margin-top: -0.165em; 177 line-height: 1.33em; 178 } 179 .ui.cards > .card > .content > .meta + .description, 180 .ui.cards > .card > .content > .header + .description, 181 .ui.card > .content > .meta + .description, 182 .ui.card > .content > .header + .description { 183 margin-top: 0.5em; 184 } 185 186 /*-------------- 187 Floated 188 ---------------*/ 189 190 .ui.cards > .card [class*="left floated"], 191 .ui.card [class*="left floated"] { 192 float: left; 193 } 194 .ui.cards > .card [class*="right floated"], 195 .ui.card [class*="right floated"] { 196 float: right; 197 } 198 199 /*-------------- 200 Aligned 201 ---------------*/ 202 203 .ui.cards > .card [class*="left aligned"], 204 .ui.card [class*="left aligned"] { 205 text-align: left; 206 } 207 .ui.cards > .card [class*="center aligned"], 208 .ui.card [class*="center aligned"] { 209 text-align: center; 210 } 211 .ui.cards > .card [class*="right aligned"], 212 .ui.card [class*="right aligned"] { 213 text-align: right; 214 } 215 216 /*-------------- 217 Content Image 218 ---------------*/ 219 220 .ui.cards > .card .content img, 221 .ui.card .content img { 222 display: inline-block; 223 vertical-align: middle; 224 width: auto; 225 } 226 .ui.cards > .card img.avatar, 227 .ui.cards > .card .avatar img, 228 .ui.card img.avatar, 229 .ui.card .avatar img { 230 width: 2.5em; 231 height: 2.5em; 232 border-radius: 500rem; 233 } 234 235 /*-------------- 236 Description 237 ---------------*/ 238 239 .ui.cards > .card > .content > .description, 240 .ui.card > .content > .description { 241 clear: both; 242 color: rgba(0, 0, 0, 0.5); 243 } 244 245 /*-------------- 246 Paragraph 247 ---------------*/ 248 249 .ui.cards > .card > .content p, 250 .ui.card > .content p { 251 margin: 0em 0em 0.5em; 252 } 253 .ui.cards > .card > .content p:last-child, 254 .ui.card > .content p:last-child { 255 margin-bottom: 0em; 256 } 257 258 /*-------------- 259 Meta 260 ---------------*/ 261 262 .ui.cards > .card .meta, 263 .ui.card .meta { 264 font-size: 0.9em; 265 color: rgba(0, 0, 0, 0.4); 266 } 267 .ui.cards > .card .meta *, 268 .ui.card .meta * { 269 margin-right: 0.3em; 270 } 271 .ui.cards > .card .meta :last-child, 272 .ui.card .meta :last-child { 273 margin-right: 0em; 274 } 275 .ui.cards > .card .meta [class*="right floated"], 276 .ui.card .meta [class*="right floated"] { 277 margin-right: 0em; 278 margin-left: 0.3em; 279 } 280 281 /*-------------- 282 Links 283 ---------------*/ 284 285 286 /* Generic */ 287 .ui.cards > .card > .content a:not(.ui), 288 .ui.card > .content a:not(.ui) { 289 color: ''; 290 -webkit-transition: color 0.2s ease; 291 transition: color 0.2s ease; 292 } 293 .ui.cards > .card > .content a:not(.ui):hover, 294 .ui.card > .content a:not(.ui):hover { 295 color: ''; 296 } 297 298 /* Header */ 299 .ui.cards > .card > .content > a.header, 300 .ui.card > .content > a.header { 301 color: rgba(0, 0, 0, 0.85); 302 } 303 .ui.cards > .card > .content > a.header:hover, 304 .ui.card > .content > a.header:hover { 305 color: #00b2f3; 306 } 307 308 /* Meta */ 309 .ui.cards > .card .meta > a:not(.ui), 310 .ui.card .meta > a:not(.ui) { 311 color: rgba(0, 0, 0, 0.4); 312 } 313 .ui.cards > .card .meta > a:not(.ui):hover, 314 .ui.card .meta > a:not(.ui):hover { 315 color: rgba(0, 0, 0, 0.8); 316 } 317 318 /*-------------- 319 Buttons 320 ---------------*/ 321 322 .ui.cards > .card > .buttons:last-child, 323 .ui.card > .buttons:last-child, 324 .ui.cards > .card > .button:last-child, 325 .ui.card > .button:last-child { 326 margin: 0em 0em -1px; 327 width: 100%; 328 } 329 330 /*-------------- 331 Dimmer 332 ---------------*/ 333 334 .ui.cards > .card .dimmer, 335 .ui.card .dimmer { 336 background-color: ''; 337 z-index: 10; 338 } 339 340 /*-------------- 341 Labels 342 ---------------*/ 343 344 345 /*-----Star----- */ 346 347 348 /* Icon */ 349 .ui.cards > .card > .content .star.icon, 350 .ui.card > .content .star.icon { 351 cursor: pointer; 352 opacity: 0.75; 353 -webkit-transition: color 0.2s ease; 354 transition: color 0.2s ease; 355 } 356 .ui.cards > .card > .content .star.icon:hover, 357 .ui.card > .content .star.icon:hover { 358 opacity: 1; 359 color: #ffb70a; 360 } 361 .ui.cards > .card > .content .active.star.icon, 362 .ui.card > .content .active.star.icon { 363 color: #ffe623; 364 } 365 366 /*-----Like----- */ 367 368 369 /* Icon */ 370 .ui.cards > .card > .content .like.icon, 371 .ui.card > .content .like.icon { 372 cursor: pointer; 373 opacity: 0.75; 374 -webkit-transition: color 0.2s ease; 375 transition: color 0.2s ease; 376 } 377 .ui.cards > .card > .content .like.icon:hover, 378 .ui.card > .content .like.icon:hover { 379 opacity: 1; 380 color: #ff2733; 381 } 382 .ui.cards > .card > .content .active.like.icon, 383 .ui.card > .content .active.like.icon { 384 color: #ff2733; 385 } 386 387 /*---------------- 388 Extra Content 389 -----------------*/ 390 391 .ui.cards > .card > .extra, 392 .ui.card > .extra { 393 max-width: 100%; 394 min-height: 0em !important; 395 -webkit-box-flex: 0; 396 -webkit-flex-grow: 0; 397 -ms-flex-positive: 0; 398 flex-grow: 0; 399 position: static; 400 background: none; 401 width: auto; 402 margin: 0em 0em; 403 padding: 0.75em 1em; 404 top: 0em; 405 left: 0em; 406 color: rgba(0, 0, 0, 0.4); 407 box-shadow: none; 408 -webkit-transition: color 0.2s ease; 409 transition: color 0.2s ease; 410 border-top: 1px solid rgba(0, 0, 0, 0.05); 411 } 412 .ui.cards > .card > .extra a:not(.ui), 413 .ui.card > .extra a:not(.ui) { 414 color: rgba(0, 0, 0, 0.4); 415 } 416 .ui.cards > .card > .extra a:not(.ui):hover, 417 .ui.card > .extra a:not(.ui):hover { 418 color: #00b2f3; 419 } 420 421 422 /******************************* 423 Variations 424 *******************************/ 425 426 427 /*------------------- 428 Fluid 429 --------------------*/ 430 431 .ui.fluid.card { 432 width: 100%; 433 max-width: 9999px; 434 } 435 436 /*------------------- 437 Link 438 --------------------*/ 439 440 .ui.cards a.card:hover, 441 .ui.link.cards .card:hover, 442 a.ui.card:hover, 443 .ui.link.card:hover { 444 cursor: pointer; 445 z-index: 5; 446 background: ''; 447 border: none; 448 box-shadow: 0px 3px 0px 0px #bebebf, 0px 0px 0px 1px rgba(39, 41, 43, 0.3); 449 } 450 451 /*------------------- 452 Colors 453 --------------------*/ 454 455 .ui.black.cards > .card, 456 .ui.cards > .black.card, 457 .ui.black.card { 458 box-shadow: 0px 3px 0px 0px #1b1c1d, 0px 0px 0px 1px #d4d4d5; 459 } 460 .ui.blue.cards > .card, 461 .ui.cards > .blue.card, 462 .ui.blue.card { 463 box-shadow: 0px 3px 0px 0px #006e93, 0px 0px 0px 1px #d4d4d5; 464 } 465 .ui.green.cards > .card, 466 .ui.cards > .green.card, 467 .ui.green.card { 468 box-shadow: 0px 3px 0px 0px #5bbd72, 0px 0px 0px 1px #d4d4d5; 469 } 470 .ui.orange.cards > .card, 471 .ui.cards > .orange.card, 472 .ui.orange.card { 473 box-shadow: 0px 3px 0px 0px #e07b53, 0px 0px 0px 1px #d4d4d5; 474 } 475 .ui.pink.cards > .card, 476 .ui.cards > .pink.card, 477 .ui.pink.card { 478 box-shadow: 0px 3px 0px 0px #d9499a, 0px 0px 0px 1px #d4d4d5; 479 } 480 .ui.purple.cards > .card, 481 .ui.cards > .purple.card, 482 .ui.purple.card { 483 box-shadow: 0px 3px 0px 0px #564f8a, 0px 0px 0px 1px #d4d4d5; 484 } 485 .ui.red.cards > .card, 486 .ui.cards > .red.card, 487 .ui.red.card { 488 box-shadow: 0px 3px 0px 0px #d95c5c, 0px 0px 0px 1px #d4d4d5; 489 } 490 .ui.teal.cards > .card, 491 .ui.cards > .teal.card, 492 .ui.teal.card { 493 box-shadow: 0px 3px 0px 0px #00b5ad, 0px 0px 0px 1px #d4d4d5; 494 } 495 .ui.yellow.cards > .card, 496 .ui.cards > .yellow.card, 497 .ui.yellow.card { 498 box-shadow: 0px 3px 0px 0px #f2c61f, 0px 0px 0px 1px #d4d4d5; 499 } 500 501 /* Hover */ 502 .ui.black.cards > .card:hover, 503 .ui.cards > .black.card:hover, 504 .ui.black.card:hover { 505 box-shadow: 0px 3px 0px 0px #1b1c1d, 0px 0px 0px 1px #d4d4d5; 506 } 507 .ui.blue.cards > .card:hover, 508 .ui.cards > .blue.card:hover, 509 .ui.blue.card:hover { 510 box-shadow: 0px 3px 0px 0px #0079a2, 0px 0px 0px 1px #d4d4d5; 511 } 512 .ui.green.cards > .card:hover, 513 .ui.cards > .green.card:hover, 514 .ui.green.card:hover { 515 box-shadow: 0px 3px 0px 0px #66c17b, 0px 0px 0px 1px #d4d4d5; 516 } 517 .ui.orange.cards > .card:hover, 518 .ui.cards > .orange.card:hover, 519 .ui.orange.card:hover { 520 box-shadow: 0px 3px 0px 0px #e28560, 0px 0px 0px 1px #d4d4d5; 521 } 522 .ui.pink.cards > .card:hover, 523 .ui.cards > .pink.card:hover, 524 .ui.pink.card:hover { 525 box-shadow: 0px 3px 0px 0px #dc56a1, 0px 0px 0px 1px #d4d4d5; 526 } 527 .ui.purple.cards > .card:hover, 528 .ui.cards > .purple.card:hover, 529 .ui.purple.card:hover { 530 box-shadow: 0px 3px 0px 0px #5c5594, 0px 0px 0px 1px #d4d4d5; 531 } 532 .ui.red.cards > .card:hover, 533 .ui.cards > .red.card:hover, 534 .ui.red.card:hover { 535 box-shadow: 0px 3px 0px 0px #dc6868, 0px 0px 0px 1px #d4d4d5; 536 } 537 .ui.teal.cards > .card:hover, 538 .ui.cards > .teal.card:hover, 539 .ui.teal.card:hover { 540 box-shadow: 0px 3px 0px 0px #00c4bc, 0px 0px 0px 1px #d4d4d5; 541 } 542 .ui.yellow.cards > .card:hover, 543 .ui.cards > .yellow.card:hover, 544 .ui.yellow.card:hover { 545 box-shadow: 0px 3px 0px 0px #f3ca2d, 0px 0px 0px 1px #d4d4d5; 546 } 547 548 /*-------------- 549 Card Count 550 ---------------*/ 551 552 .ui.one.cards { 553 margin-left: 0em; 554 margin-right: 0em; 555 } 556 .ui.one.cards > .card { 557 width: 100%; 558 } 559 .ui.two.cards { 560 margin-left: -1em; 561 margin-right: -1em; 562 } 563 .ui.two.cards > .card { 564 width: -webkit-calc( 50% - 2em ); 565 width: calc( 50% - 2em ); 566 margin-left: 1em; 567 margin-right: 1em; 568 } 569 .ui.two.cards > .card:nth-child(2n+1) { 570 clear: left; 571 } 572 .ui.three.cards { 573 margin-left: -1em; 574 margin-right: -1em; 575 } 576 .ui.three.cards > .card { 577 width: -webkit-calc( 33.33333333% - 2em ); 578 width: calc( 33.33333333% - 2em ); 579 margin-left: 1em; 580 margin-right: 1em; 581 } 582 .ui.three.cards > .card:nth-child(3n+1) { 583 clear: left; 584 } 585 .ui.four.cards { 586 margin-left: -0.75em; 587 margin-right: -0.75em; 588 } 589 .ui.four.cards > .card { 590 width: -webkit-calc( 25% - 1.5em ); 591 width: calc( 25% - 1.5em ); 592 margin-left: 0.75em; 593 margin-right: 0.75em; 594 } 595 .ui.four.cards > .card:nth-child(4n+1) { 596 clear: left; 597 } 598 .ui.five.cards { 599 margin-left: -0.75em; 600 margin-right: -0.75em; 601 } 602 .ui.five.cards > .card { 603 width: -webkit-calc( 20% - 1.5em ); 604 width: calc( 20% - 1.5em ); 605 margin-left: 0.75em; 606 margin-right: 0.75em; 607 } 608 .ui.five.cards > .card:nth-child(5n+1) { 609 clear: left; 610 } 611 .ui.six.cards { 612 margin-left: -0.75em; 613 margin-right: -0.75em; 614 } 615 .ui.six.cards > .card { 616 width: -webkit-calc( 16.66666667% - 1.5em ); 617 width: calc( 16.66666667% - 1.5em ); 618 margin-left: 0.75em; 619 margin-right: 0.75em; 620 } 621 .ui.six.cards > .card:nth-child(6n+1) { 622 clear: left; 623 } 624 .ui.seven.cards { 625 margin-left: -0.5em; 626 margin-right: -0.5em; 627 } 628 .ui.seven.cards > .card { 629 width: -webkit-calc( 14.28571429% - 1em ); 630 width: calc( 14.28571429% - 1em ); 631 margin-left: 0.5em; 632 margin-right: 0.5em; 633 } 634 .ui.seven.cards > .card:nth-child(7n+1) { 635 clear: left; 636 } 637 .ui.eight.cards { 638 margin-left: -0.5em; 639 margin-right: -0.5em; 640 } 641 .ui.eight.cards > .card { 642 width: -webkit-calc( 12.5% - 1em ); 643 width: calc( 12.5% - 1em ); 644 margin-left: 0.5em; 645 margin-right: 0.5em; 646 font-size: 11px; 647 } 648 .ui.eight.cards > .card:nth-child(8n+1) { 649 clear: left; 650 } 651 .ui.nine.cards { 652 margin-left: -0.5em; 653 margin-right: -0.5em; 654 } 655 .ui.nine.cards > .card { 656 width: -webkit-calc( 11.11111111% - 1em ); 657 width: calc( 11.11111111% - 1em ); 658 margin-left: 0.5em; 659 margin-right: 0.5em; 660 font-size: 10px; 661 } 662 .ui.nine.cards > .card:nth-child(9n+1) { 663 clear: left; 664 } 665 .ui.ten.cards { 666 margin-left: -0.5em; 667 margin-right: -0.5em; 668 } 669 .ui.ten.cards > .card { 670 width: -webkit-calc( 10% - 1em ); 671 width: calc( 10% - 1em ); 672 margin-left: 0.5em; 673 margin-right: 0.5em; 674 } 675 .ui.ten.cards > .card:nth-child(10n+1) { 676 clear: left; 677 } 678 679 /*------------------- 680 Doubling 681 --------------------*/ 682 683 684 /* Mobily Only */ 685 @media only screen and (max-width: 767px) { 686 .ui.two.doubling.cards { 687 margin-left: 0em; 688 margin-right: 0em; 689 } 690 .ui.two.doubling.cards .card { 691 width: 100%; 692 margin-left: 0em; 693 margin-right: 0em; 694 } 695 .ui.three.doubling.cards { 696 margin-left: -1em; 697 margin-right: -1em; 698 } 699 .ui.three.doubling.cards .card { 700 width: -webkit-calc( 50% - 2em ); 701 width: calc( 50% - 2em ); 702 margin-left: 1em; 703 margin-right: 1em; 704 } 705 .ui.four.doubling.cards { 706 margin-left: -1em; 707 margin-right: -1em; 708 } 709 .ui.four.doubling.cards .card { 710 width: -webkit-calc( 50% - 2em ); 711 width: calc( 50% - 2em ); 712 margin-left: 1em; 713 margin-right: 1em; 714 } 715 .ui.five.doubling.cards { 716 margin-left: -1em; 717 margin-right: -1em; 718 } 719 .ui.five.doubling.cards .card { 720 width: -webkit-calc( 50% - 2em ); 721 width: calc( 50% - 2em ); 722 margin-left: 1em; 723 margin-right: 1em; 724 } 725 .ui.six.doubling.cards { 726 margin-left: -1em; 727 margin-right: -1em; 728 } 729 .ui.six.doubling.cards .card { 730 width: -webkit-calc( 50% - 2em ); 731 width: calc( 50% - 2em ); 732 margin-left: 1em; 733 margin-right: 1em; 734 } 735 .ui.seven.doubling.cards { 736 margin-left: -1em; 737 margin-right: -1em; 738 } 739 .ui.seven.doubling.cards .card { 740 width: -webkit-calc( 33.33333333% - 2em ); 741 width: calc( 33.33333333% - 2em ); 742 margin-left: 1em; 743 margin-right: 1em; 744 } 745 .ui.eight.doubling.cards { 746 margin-left: -1em; 747 margin-right: -1em; 748 } 749 .ui.eight.doubling.cards .card { 750 width: -webkit-calc( 33.33333333% - 2em ); 751 width: calc( 33.33333333% - 2em ); 752 margin-left: 1em; 753 margin-right: 1em; 754 } 755 .ui.nine.doubling.cards { 756 margin-left: -1em; 757 margin-right: -1em; 758 } 759 .ui.nine.doubling.cards .card { 760 width: -webkit-calc( 33.33333333% - 2em ); 761 width: calc( 33.33333333% - 2em ); 762 margin-left: 1em; 763 margin-right: 1em; 764 } 765 .ui.ten.doubling.cards { 766 margin-left: -1em; 767 margin-right: -1em; 768 } 769 .ui.ten.doubling.cards .card { 770 width: -webkit-calc( 33.33333333% - 2em ); 771 width: calc( 33.33333333% - 2em ); 772 margin-left: 1em; 773 margin-right: 1em; 774 } 775 } 776 777 /* Tablet Only */ 778 @media only screen and (min-width: 768px) and (max-width: 991px) { 779 .ui.two.doubling.cards { 780 margin-left: 0em; 781 margin-right: 0em; 782 } 783 .ui.two.doubling.cards .card { 784 width: 100%; 785 margin-left: 0em; 786 margin-right: 0em; 787 } 788 .ui.three.doubling.cards { 789 margin-left: -1em; 790 margin-right: -1em; 791 } 792 .ui.three.doubling.cards .card { 793 width: -webkit-calc( 50% - 2em ); 794 width: calc( 50% - 2em ); 795 margin-left: 1em; 796 margin-right: 1em; 797 } 798 .ui.four.doubling.cards { 799 margin-left: -1em; 800 margin-right: -1em; 801 } 802 .ui.four.doubling.cards .card { 803 width: -webkit-calc( 50% - 2em ); 804 width: calc( 50% - 2em ); 805 margin-left: 1em; 806 margin-right: 1em; 807 } 808 .ui.five.doubling.cards { 809 margin-left: -1em; 810 margin-right: -1em; 811 } 812 .ui.five.doubling.cards .card { 813 width: -webkit-calc( 33.33333333% - 2em ); 814 width: calc( 33.33333333% - 2em ); 815 margin-left: 1em; 816 margin-right: 1em; 817 } 818 .ui.six.doubling.cards { 819 margin-left: -1em; 820 margin-right: -1em; 821 } 822 .ui.six.doubling.cards .card { 823 width: -webkit-calc( 33.33333333% - 2em ); 824 width: calc( 33.33333333% - 2em ); 825 margin-left: 1em; 826 margin-right: 1em; 827 } 828 .ui.eight.doubling.cards { 829 margin-left: -1em; 830 margin-right: -1em; 831 } 832 .ui.eight.doubling.cards .card { 833 width: -webkit-calc( 33.33333333% - 2em ); 834 width: calc( 33.33333333% - 2em ); 835 margin-left: 1em; 836 margin-right: 1em; 837 } 838 .ui.eight.doubling.cards { 839 margin-left: -0.75em; 840 margin-right: -0.75em; 841 } 842 .ui.eight.doubling.cards .card { 843 width: -webkit-calc( 25% - 1.5em ); 844 width: calc( 25% - 1.5em ); 845 margin-left: 0.75em; 846 margin-right: 0.75em; 847 } 848 .ui.nine.doubling.cards { 849 margin-left: -0.75em; 850 margin-right: -0.75em; 851 } 852 .ui.nine.doubling.cards .card { 853 width: -webkit-calc( 25% - 1.5em ); 854 width: calc( 25% - 1.5em ); 855 margin-left: 0.75em; 856 margin-right: 0.75em; 857 } 858 .ui.ten.doubling.cards { 859 margin-left: -0.75em; 860 margin-right: -0.75em; 861 } 862 .ui.ten.doubling.cards .card { 863 width: -webkit-calc( 20% - 1.5em ); 864 width: calc( 20% - 1.5em ); 865 margin-left: 0.75em; 866 margin-right: 0.75em; 867 } 868 } 869 870 /*------------------- 871 Stackable 872 --------------------*/ 873 874 @media only screen and (max-width: 767px) { 875 .ui.stackable.cards { 876 display: block !important; 877 } 878 .ui.stackable.cards .card:first-child { 879 margin-top: 0em !important; 880 } 881 .ui.stackable.cards > .card { 882 display: block !important; 883 height: auto !important; 884 margin: 1em 1em; 885 padding: 0 !important; 886 width: -webkit-calc( 100% - 2em ) !important; 887 width: calc( 100% - 2em ) !important; 888 } 889 } 890 891 /*-------------- 892 Size 893 ---------------*/ 894 895 .ui.cards > .card { 896 font-size: 1em; 897 } 898 899 900 /******************************* 901 Theme Overrides 902 *******************************/ 903 904 905 906 /******************************* 907 User Variable Overrides 908 *******************************/ 909