github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/src/definitions/views/card.less (about) 1 /*! 2 * # Semantic UI - 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 Theme 14 *******************************/ 15 16 @type : 'view'; 17 @element : 'card'; 18 19 @import (multiple) '../../theme.config'; 20 21 /******************************* 22 Standard 23 *******************************/ 24 25 /*-------------- 26 Card 27 ---------------*/ 28 29 .ui.cards > .card, 30 .ui.card { 31 max-width: 100%; 32 position: relative; 33 display: @display; 34 flex-direction: column; 35 36 width: @width; 37 min-height: @minHeight; 38 background: @background; 39 padding: @padding; 40 41 border: @border; 42 border-radius: @borderRadius; 43 box-shadow: @boxShadow; 44 transition: @transition; 45 z-index: @zIndex; 46 } 47 .ui.card { 48 margin: @margin; 49 } 50 51 .ui.cards > .card a, 52 .ui.card a { 53 cursor: pointer; 54 } 55 56 .ui.card:first-child { 57 margin-top: 0em; 58 } 59 .ui.card:last-child { 60 margin-bottom: 0em; 61 } 62 63 /*-------------- 64 Cards 65 ---------------*/ 66 67 .ui.cards { 68 display: @groupDisplay; 69 margin: @groupMargin; 70 flex-wrap: wrap; 71 } 72 73 .ui.cards > .card { 74 display: @groupCardDisplay; 75 margin: @groupCardMargin; 76 float: @groupCardFloat; 77 } 78 79 /* Clearing */ 80 .ui.cards:after, 81 .ui.card:after { 82 display: block; 83 content: ' '; 84 height: 0px; 85 clear: both; 86 overflow: hidden; 87 visibility: hidden; 88 } 89 90 91 /* Consecutive Card Groups Preserve Row Spacing */ 92 .ui.cards ~ .ui.cards { 93 margin-top: @consecutiveGroupDistance; 94 } 95 96 /*-------------- 97 Rounded Edges 98 ---------------*/ 99 100 .ui.cards > .card > :first-child, 101 .ui.card > :first-child { 102 border-radius: @borderRadius @borderRadius 0em 0em !important; 103 } 104 105 .ui.cards > .card > :last-child, 106 .ui.card > :last-child { 107 border-radius: 0em 0em @borderRadius @borderRadius !important; 108 } 109 110 /*-------------- 111 Images 112 ---------------*/ 113 114 .ui.cards > .card > .image, 115 .ui.card > .image { 116 display: block; 117 position: relative; 118 padding: @imagePadding; 119 background: @imageBackground; 120 } 121 .ui.cards > .card > .image > img, 122 .ui.card > .image > img { 123 display: block; 124 width: 100%; 125 height: auto; 126 border-radius: @imageBorderRadius; 127 border: @imageBorder; 128 } 129 130 .ui.cards > .card > .image:only-child > img, 131 .ui.card > .image:only-child > img { 132 border-radius: @borderRadius; 133 } 134 135 /*-------------- 136 Content 137 ---------------*/ 138 139 .ui.cards > .card > .content, 140 .ui.card > .content { 141 flex-grow: 1; 142 background: @contentBackground; 143 margin: @contentMargin; 144 padding: @contentPadding; 145 box-shadow: @contentBoxShadow; 146 font-size: @contentFontSize; 147 border: @contentBorder; 148 border-radius: @contentBorderRadius; 149 } 150 151 .ui.cards > .card > .content:after, 152 .ui.card > .content:after { 153 display: block; 154 content: ' '; 155 height: 0px; 156 clear: both; 157 overflow: hidden; 158 visibility: hidden; 159 } 160 161 .ui.cards > .card > .content > .header, 162 .ui.card > .content > .header { 163 display: block; 164 margin: @headerMargin; 165 font-family: @headerFont; 166 color: @headerColor; 167 } 168 169 /* Default Header Size */ 170 .ui.cards > .card > .content > .header:not(.ui), 171 .ui.card > .content > .header:not(.ui) { 172 font-weight: @headerFontWeight; 173 font-size: @headerFontSize; 174 margin-top: @headerLineHeightOffset; 175 line-height: @headerLineHeight; 176 } 177 178 .ui.cards > .card > .content > .meta + .description, 179 .ui.cards > .card > .content > .header + .description, 180 .ui.card > .content > .meta + .description, 181 .ui.card > .content > .header + .description { 182 margin-top: @descriptionDistance; 183 } 184 185 /*-------------- 186 Floated 187 ---------------*/ 188 189 .ui.cards > .card [class*="left floated"], 190 .ui.card [class*="left floated"] { 191 float: left; 192 } 193 .ui.cards > .card [class*="right floated"], 194 .ui.card [class*="right floated"] { 195 float: right; 196 } 197 198 /*-------------- 199 Aligned 200 ---------------*/ 201 202 .ui.cards > .card [class*="left aligned"], 203 .ui.card [class*="left aligned"] { 204 text-align: left; 205 } 206 .ui.cards > .card [class*="center aligned"], 207 .ui.card [class*="center aligned"] { 208 text-align: center; 209 } 210 .ui.cards > .card [class*="right aligned"], 211 .ui.card [class*="right aligned"] { 212 text-align: right; 213 } 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: @contentImageVerticalAlign; 224 width: @contentImageWidth; 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: @avatarSize; 231 height: @avatarSize; 232 border-radius: @avatarBorderRadius; 233 } 234 235 236 /*-------------- 237 Description 238 ---------------*/ 239 240 .ui.cards > .card > .content > .description, 241 .ui.card > .content > .description { 242 clear: both; 243 color: @descriptionColor; 244 } 245 246 /*-------------- 247 Paragraph 248 ---------------*/ 249 250 .ui.cards > .card > .content p, 251 .ui.card > .content p { 252 margin: 0em 0em @paragraphDistance; 253 } 254 .ui.cards > .card > .content p:last-child, 255 .ui.card > .content p:last-child { 256 margin-bottom: 0em; 257 } 258 259 /*-------------- 260 Meta 261 ---------------*/ 262 263 .ui.cards > .card .meta, 264 .ui.card .meta { 265 font-size: @metaFontSize; 266 color: @metaColor; 267 } 268 .ui.cards > .card .meta *, 269 .ui.card .meta * { 270 margin-right: @metaSpacing; 271 } 272 .ui.cards > .card .meta :last-child, 273 .ui.card .meta :last-child { 274 margin-right: 0em; 275 } 276 277 .ui.cards > .card .meta [class*="right floated"], 278 .ui.card .meta [class*="right floated"] { 279 margin-right: 0em; 280 margin-left: @metaSpacing; 281 } 282 283 /*-------------- 284 Links 285 ---------------*/ 286 287 /* Generic */ 288 .ui.cards > .card > .content a:not(.ui), 289 .ui.card > .content a:not(.ui) { 290 color: @contentLinkColor; 291 transition: @contentLinkTransition; 292 } 293 .ui.cards > .card > .content a:not(.ui):hover, 294 .ui.card > .content a:not(.ui):hover { 295 color: @contentLinkHoverColor; 296 } 297 298 /* Header */ 299 .ui.cards > .card > .content > a.header, 300 .ui.card > .content > a.header { 301 color: @headerLinkColor; 302 } 303 .ui.cards > .card > .content > a.header:hover, 304 .ui.card > .content > a.header:hover { 305 color: @headerLinkHoverColor; 306 } 307 308 /* Meta */ 309 .ui.cards > .card .meta > a:not(.ui), 310 .ui.card .meta > a:not(.ui) { 311 color: @metaLinkColor; 312 } 313 .ui.cards > .card .meta > a:not(.ui):hover, 314 .ui.card .meta > a:not(.ui):hover { 315 color: @metaLinkHoverColor; 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: @buttonMargin; 327 width: @buttonWidth; 328 } 329 330 /*-------------- 331 Dimmer 332 ---------------*/ 333 334 .ui.cards > .card .dimmer, 335 .ui.card .dimmer { 336 background-color: @dimmerColor; 337 z-index: @dimmerZIndex; 338 } 339 340 /*-------------- 341 Labels 342 ---------------*/ 343 344 /*-----Star----- */ 345 346 /* Icon */ 347 .ui.cards > .card > .content .star.icon, 348 .ui.card > .content .star.icon { 349 cursor: pointer; 350 opacity: @actionOpacity; 351 transition: @actionTransition; 352 } 353 .ui.cards > .card > .content .star.icon:hover, 354 .ui.card > .content .star.icon:hover { 355 opacity: @actionHoverOpacity; 356 color: @starColor; 357 } 358 .ui.cards > .card > .content .active.star.icon, 359 .ui.card > .content .active.star.icon { 360 color: @starActiveColor; 361 } 362 363 /*-----Like----- */ 364 365 /* Icon */ 366 .ui.cards > .card > .content .like.icon, 367 .ui.card > .content .like.icon { 368 cursor: pointer; 369 opacity: @actionOpacity; 370 transition: @actionTransition; 371 } 372 .ui.cards > .card > .content .like.icon:hover, 373 .ui.card > .content .like.icon:hover { 374 opacity: @actionHoverOpacity; 375 color: @likeColor; 376 } 377 .ui.cards > .card > .content .active.like.icon, 378 .ui.card > .content .active.like.icon { 379 color: @likeActiveColor; 380 } 381 382 /*---------------- 383 Extra Content 384 -----------------*/ 385 386 .ui.cards > .card > .extra, 387 .ui.card > .extra { 388 max-width: 100%; 389 min-height: 0em !important; 390 flex-grow: 0; 391 position: @extraPosition; 392 background: @extraBackground; 393 width: @extraWidth; 394 margin: @extraMargin; 395 padding: @extraPadding; 396 top: @extraTop; 397 left: @extraLeft; 398 color: @extraColor; 399 box-shadow: @extraBoxShadow; 400 transition: @extraTransition; 401 border-top: @extraDivider; 402 } 403 .ui.cards > .card > .extra a:not(.ui), 404 .ui.card > .extra a:not(.ui) { 405 color: @extraLinkColor; 406 } 407 .ui.cards > .card > .extra a:not(.ui):hover, 408 .ui.card > .extra a:not(.ui):hover { 409 color: @extraLinkHoverColor; 410 } 411 412 413 /******************************* 414 Variations 415 *******************************/ 416 417 /*------------------- 418 Fluid 419 --------------------*/ 420 421 .ui.fluid.card { 422 width: 100%; 423 max-width: 9999px; 424 } 425 426 /*------------------- 427 Link 428 --------------------*/ 429 430 .ui.cards a.card:hover, 431 .ui.link.cards .card:hover, 432 a.ui.card:hover, 433 .ui.link.card:hover { 434 cursor: pointer; 435 z-index: @linkHoverZIndex; 436 background: @linkHoverBackground; 437 border: @linkHoverBorder; 438 box-shadow: @linkHoverBoxShadow; 439 } 440 441 /*------------------- 442 Colors 443 --------------------*/ 444 445 .ui.black.cards > .card, 446 .ui.cards > .black.card, 447 .ui.black.card { 448 box-shadow: 449 0px @shadowDistance 0px 0px @black, 450 @borderShadow 451 ; 452 } 453 .ui.blue.cards > .card, 454 .ui.cards > .blue.card, 455 .ui.blue.card { 456 box-shadow: 457 0px @shadowDistance 0px 0px @blue, 458 @borderShadow 459 ; 460 } 461 .ui.green.cards > .card, 462 .ui.cards > .green.card, 463 .ui.green.card { 464 box-shadow: 465 0px @shadowDistance 0px 0px @green, 466 @borderShadow 467 ; 468 } 469 .ui.orange.cards > .card, 470 .ui.cards > .orange.card, 471 .ui.orange.card { 472 box-shadow: 473 0px @shadowDistance 0px 0px @orange, 474 @borderShadow 475 ; 476 } 477 .ui.pink.cards > .card, 478 .ui.cards > .pink.card, 479 .ui.pink.card { 480 box-shadow: 481 0px @shadowDistance 0px 0px @pink, 482 @borderShadow 483 ; 484 } 485 .ui.purple.cards > .card, 486 .ui.cards > .purple.card, 487 .ui.purple.card { 488 box-shadow: 489 0px @shadowDistance 0px 0px @purple, 490 @borderShadow 491 ; 492 } 493 .ui.red.cards > .card, 494 .ui.cards > .red.card, 495 .ui.red.card { 496 box-shadow: 497 0px @shadowDistance 0px 0px @red, 498 @borderShadow 499 ; 500 } 501 .ui.teal.cards > .card, 502 .ui.cards > .teal.card, 503 .ui.teal.card { 504 box-shadow: 505 0px @shadowDistance 0px 0px @teal, 506 @borderShadow 507 ; 508 } 509 .ui.yellow.cards > .card, 510 .ui.cards > .yellow.card, 511 .ui.yellow.card { 512 box-shadow: 513 0px @shadowDistance 0px 0px @yellow, 514 @borderShadow 515 ; 516 } 517 518 /* Hover */ 519 .ui.black.cards > .card:hover, 520 .ui.cards > .black.card:hover, 521 .ui.black.card:hover { 522 box-shadow: 523 0px @shadowDistance 0px 0px @blackHover, 524 @borderShadow 525 ; 526 } 527 .ui.blue.cards > .card:hover, 528 .ui.cards > .blue.card:hover, 529 .ui.blue.card:hover { 530 box-shadow: 531 0px @shadowDistance 0px 0px @blueHover, 532 @borderShadow 533 ; 534 } 535 .ui.green.cards > .card:hover, 536 .ui.cards > .green.card:hover, 537 .ui.green.card:hover { 538 box-shadow: 539 0px @shadowDistance 0px 0px @greenHover, 540 @borderShadow 541 ; 542 } 543 .ui.orange.cards > .card:hover, 544 .ui.cards > .orange.card:hover, 545 .ui.orange.card:hover { 546 box-shadow: 547 0px @shadowDistance 0px 0px @orangeHover, 548 @borderShadow 549 ; 550 } 551 .ui.pink.cards > .card:hover, 552 .ui.cards > .pink.card:hover, 553 .ui.pink.card:hover { 554 box-shadow: 555 0px @shadowDistance 0px 0px @pinkHover, 556 @borderShadow 557 ; 558 } 559 .ui.purple.cards > .card:hover, 560 .ui.cards > .purple.card:hover, 561 .ui.purple.card:hover { 562 box-shadow: 563 0px @shadowDistance 0px 0px @purpleHover, 564 @borderShadow 565 ; 566 } 567 .ui.red.cards > .card:hover, 568 .ui.cards > .red.card:hover, 569 .ui.red.card:hover { 570 box-shadow: 571 0px @shadowDistance 0px 0px @redHover, 572 @borderShadow 573 ; 574 } 575 .ui.teal.cards > .card:hover, 576 .ui.cards > .teal.card:hover, 577 .ui.teal.card:hover { 578 box-shadow: 579 0px @shadowDistance 0px 0px @tealHover, 580 @borderShadow 581 ; 582 } 583 .ui.yellow.cards > .card:hover, 584 .ui.cards > .yellow.card:hover, 585 .ui.yellow.card:hover { 586 box-shadow: 587 0px @shadowDistance 0px 0px @yellowHover, 588 @borderShadow 589 ; 590 } 591 592 /*-------------- 593 Card Count 594 ---------------*/ 595 596 .ui.one.cards { 597 margin-left: @oneCardOffset; 598 margin-right: @oneCardOffset; 599 } 600 .ui.one.cards > .card { 601 width: @oneCard; 602 } 603 604 .ui.two.cards { 605 margin-left: @twoCardOffset; 606 margin-right: @twoCardOffset; 607 } 608 .ui.two.cards > .card { 609 width: @twoCard; 610 margin-left: @twoCardSpacing; 611 margin-right: @twoCardSpacing; 612 } 613 .ui.two.cards > .card:nth-child(2n+1) { 614 clear: left; 615 } 616 617 .ui.three.cards { 618 margin-left: @threeCardOffset; 619 margin-right: @threeCardOffset; 620 } 621 .ui.three.cards > .card { 622 width: @threeCard; 623 margin-left: @threeCardSpacing; 624 margin-right: @threeCardSpacing; 625 } 626 .ui.three.cards > .card:nth-child(3n+1) { 627 clear: left; 628 } 629 630 .ui.four.cards { 631 margin-left: @fourCardOffset; 632 margin-right: @fourCardOffset; 633 } 634 .ui.four.cards > .card { 635 width: @fourCard; 636 margin-left: @fourCardSpacing; 637 margin-right: @fourCardSpacing; 638 } 639 .ui.four.cards > .card:nth-child(4n+1) { 640 clear: left; 641 } 642 643 .ui.five.cards { 644 margin-left: @fiveCardOffset; 645 margin-right: @fiveCardOffset; 646 } 647 .ui.five.cards > .card { 648 width: @fiveCard; 649 margin-left: @fiveCardSpacing; 650 margin-right: @fiveCardSpacing; 651 } 652 .ui.five.cards > .card:nth-child(5n+1) { 653 clear: left; 654 } 655 656 .ui.six.cards { 657 margin-left: @sixCardOffset; 658 margin-right: @sixCardOffset; 659 } 660 .ui.six.cards > .card { 661 width: @sixCard; 662 margin-left: @sixCardSpacing; 663 margin-right: @sixCardSpacing; 664 } 665 .ui.six.cards > .card:nth-child(6n+1) { 666 clear: left; 667 } 668 669 .ui.seven.cards { 670 margin-left: @sevenCardOffset; 671 margin-right: @sevenCardOffset; 672 } 673 .ui.seven.cards > .card { 674 width: @sevenCard; 675 margin-left: @sevenCardSpacing; 676 margin-right: @sevenCardSpacing; 677 } 678 .ui.seven.cards > .card:nth-child(7n+1) { 679 clear: left; 680 } 681 682 .ui.eight.cards { 683 margin-left: @eightCardOffset; 684 margin-right: @eightCardOffset; 685 } 686 .ui.eight.cards > .card { 687 width: @eightCard; 688 margin-left: @eightCardSpacing; 689 margin-right: @eightCardSpacing; 690 font-size: 11px; 691 } 692 .ui.eight.cards > .card:nth-child(8n+1) { 693 clear: left; 694 } 695 696 .ui.nine.cards { 697 margin-left: @nineCardOffset; 698 margin-right: @nineCardOffset; 699 } 700 .ui.nine.cards > .card { 701 width: @nineCard; 702 margin-left: @nineCardSpacing; 703 margin-right: @nineCardSpacing; 704 font-size: 10px; 705 } 706 .ui.nine.cards > .card:nth-child(9n+1) { 707 clear: left; 708 } 709 710 .ui.ten.cards { 711 margin-left: @tenCardOffset; 712 margin-right: @tenCardOffset; 713 } 714 .ui.ten.cards > .card { 715 width: @tenCard; 716 margin-left: @tenCardSpacing; 717 margin-right: @tenCardSpacing; 718 } 719 .ui.ten.cards > .card:nth-child(10n+1) { 720 clear: left; 721 } 722 723 724 /*------------------- 725 Doubling 726 --------------------*/ 727 728 /* Mobily Only */ 729 @media only screen and (max-width : @largestMobileScreen) { 730 .ui.two.doubling.cards { 731 margin-left: @oneCardOffset; 732 margin-right: @oneCardOffset; 733 } 734 .ui.two.doubling.cards .card { 735 width: @oneCard; 736 margin-left: @oneCardSpacing; 737 margin-right: @oneCardSpacing; 738 } 739 .ui.three.doubling.cards { 740 margin-left: @twoCardOffset; 741 margin-right: @twoCardOffset; 742 } 743 .ui.three.doubling.cards .card { 744 width: @twoCard; 745 margin-left: @twoCardSpacing; 746 margin-right: @twoCardSpacing; 747 } 748 .ui.four.doubling.cards { 749 margin-left: @twoCardOffset; 750 margin-right: @twoCardOffset; 751 } 752 .ui.four.doubling.cards .card { 753 width: @twoCard; 754 margin-left: @twoCardSpacing; 755 margin-right: @twoCardSpacing; 756 } 757 .ui.five.doubling.cards { 758 margin-left: @twoCardOffset; 759 margin-right: @twoCardOffset; 760 } 761 .ui.five.doubling.cards .card { 762 width: @twoCard; 763 margin-left: @twoCardSpacing; 764 margin-right: @twoCardSpacing; 765 } 766 .ui.six.doubling.cards { 767 margin-left: @twoCardOffset; 768 margin-right: @twoCardOffset; 769 } 770 .ui.six.doubling.cards .card { 771 width: @twoCard; 772 margin-left: @twoCardSpacing; 773 margin-right: @twoCardSpacing; 774 } 775 .ui.seven.doubling.cards { 776 margin-left: @threeCardOffset; 777 margin-right: @threeCardOffset; 778 } 779 .ui.seven.doubling.cards .card { 780 width: @threeCard; 781 margin-left: @threeCardSpacing; 782 margin-right: @threeCardSpacing; 783 } 784 .ui.eight.doubling.cards { 785 margin-left: @threeCardOffset; 786 margin-right: @threeCardOffset; 787 } 788 .ui.eight.doubling.cards .card { 789 width: @threeCard; 790 margin-left: @threeCardSpacing; 791 margin-right: @threeCardSpacing; 792 } 793 .ui.nine.doubling.cards { 794 margin-left: @threeCardOffset; 795 margin-right: @threeCardOffset; 796 } 797 .ui.nine.doubling.cards .card { 798 width: @threeCard; 799 margin-left: @threeCardSpacing; 800 margin-right: @threeCardSpacing; 801 } 802 .ui.ten.doubling.cards { 803 margin-left: @threeCardOffset; 804 margin-right: @threeCardOffset; 805 } 806 .ui.ten.doubling.cards .card { 807 width: @threeCard; 808 margin-left: @threeCardSpacing; 809 margin-right: @threeCardSpacing; 810 } 811 } 812 813 /* Tablet Only */ 814 @media only screen and (min-width : @tabletBreakpoint) and (max-width : @largestTabletScreen) { 815 .ui.two.doubling.cards { 816 margin-left: @oneCardOffset; 817 margin-right: @oneCardOffset; 818 } 819 .ui.two.doubling.cards .card { 820 width: @oneCard; 821 margin-left: @oneCardSpacing; 822 margin-right: @oneCardSpacing; 823 } 824 .ui.three.doubling.cards { 825 margin-left: @twoCardOffset; 826 margin-right: @twoCardOffset; 827 } 828 .ui.three.doubling.cards .card { 829 width: @twoCard; 830 margin-left: @twoCardSpacing; 831 margin-right: @twoCardSpacing; 832 } 833 .ui.four.doubling.cards { 834 margin-left: @twoCardOffset; 835 margin-right: @twoCardOffset; 836 } 837 .ui.four.doubling.cards .card { 838 width: @twoCard; 839 margin-left: @twoCardSpacing; 840 margin-right: @twoCardSpacing; 841 } 842 .ui.five.doubling.cards { 843 margin-left: @threeCardOffset; 844 margin-right: @threeCardOffset; 845 } 846 .ui.five.doubling.cards .card { 847 width: @threeCard; 848 margin-left: @threeCardSpacing; 849 margin-right: @threeCardSpacing; 850 } 851 .ui.six.doubling.cards { 852 margin-left: @threeCardOffset; 853 margin-right: @threeCardOffset; 854 } 855 .ui.six.doubling.cards .card { 856 width: @threeCard; 857 margin-left: @threeCardSpacing; 858 margin-right: @threeCardSpacing; 859 } 860 .ui.eight.doubling.cards { 861 margin-left: @threeCardOffset; 862 margin-right: @threeCardOffset; 863 } 864 .ui.eight.doubling.cards .card { 865 width: @threeCard; 866 margin-left: @threeCardSpacing; 867 margin-right: @threeCardSpacing; 868 } 869 .ui.eight.doubling.cards { 870 margin-left: @fourCardOffset; 871 margin-right: @fourCardOffset; 872 } 873 .ui.eight.doubling.cards .card { 874 width: @fourCard; 875 margin-left: @fourCardSpacing; 876 margin-right: @fourCardSpacing; 877 } 878 .ui.nine.doubling.cards { 879 margin-left: @fourCardOffset; 880 margin-right: @fourCardOffset; 881 } 882 .ui.nine.doubling.cards .card { 883 width: @fourCard; 884 margin-left: @fourCardSpacing; 885 margin-right: @fourCardSpacing; 886 } 887 .ui.ten.doubling.cards { 888 margin-left: @fiveCardOffset; 889 margin-right: @fiveCardOffset; 890 } 891 .ui.ten.doubling.cards .card { 892 width: @fiveCard; 893 margin-left: @fiveCardSpacing; 894 margin-right: @fiveCardSpacing; 895 } 896 } 897 898 /*------------------- 899 Stackable 900 --------------------*/ 901 902 @media only screen and (max-width : @largestMobileScreen) { 903 .ui.stackable.cards { 904 display: block !important; 905 } 906 .ui.stackable.cards .card:first-child { 907 margin-top: 0em !important; 908 } 909 .ui.stackable.cards > .card { 910 display: block !important; 911 height: auto !important; 912 margin: @stackableRowSpacing @stackableCardSpacing; 913 padding: 0 !important; 914 width: @stackableMargin !important; 915 } 916 } 917 918 919 /*-------------- 920 Size 921 ---------------*/ 922 923 .ui.cards > .card { 924 font-size: @medium; 925 } 926 927 .loadUIOverrides();