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();