github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/src/definitions/elements/list.less (about)

     1  /*!
     2   * # Semantic UI - List
     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    : 'element';
    17  @element : 'list';
    18  
    19  @import (multiple) '../../theme.config';
    20  
    21  /*******************************
    22              List
    23  *******************************/
    24  
    25  ul.ui.list,
    26  ol.ui.list,
    27  .ui.list {
    28    list-style-type: @listStyleType;
    29    margin: @margin;
    30    padding: @verticalPadding @horizontalPadding;
    31  }
    32  
    33  ul.ui.list:first-child,
    34  ol.ui.list:first-child,
    35  .ui.list:first-child {
    36    margin-top: 0em;
    37    padding-top: 0em;
    38  }
    39  
    40  ul.ui.list:last-child,
    41  ol.ui.list:last-child,
    42  .ui.list:last-child {
    43    margin-bottom: 0em;
    44    padding-bottom: 0em;
    45  }
    46  
    47  /*******************************
    48              Content
    49  *******************************/
    50  
    51  /* List Item */
    52  ul.ui.list li,
    53  ol.ui.list li,
    54  .ui.list > .item,
    55  .ui.list .list > .item {
    56    display: list-item;
    57    table-layout: fixed;
    58    list-style-type: @listStyleType;
    59    list-style-position: @listStylePosition;
    60  
    61    padding: @itemVerticalPadding @itemHorizontalPadding;
    62    line-height: @itemLineHeight;
    63  }
    64  
    65  ul.ui.list > li:first-child:after,
    66  ol.ui.list > li:first-child:after,
    67  .ui.list > .list > .item,
    68  .ui.list > .item:after {
    69    content: '';
    70    display: block;
    71    height: 0;
    72    clear: both;
    73    visibility: hidden;
    74  }
    75  
    76  ul.ui.list li:first-child,
    77  ol.ui.list li:first-child,
    78  .ui.list .list > .item:first-child,
    79  .ui.list > .item:first-child {
    80    padding-top: 0em;
    81  }
    82  ul.ui.list li:last-child,
    83  ol.ui.list li:last-child,
    84  .ui.list .list > .item:last-child,
    85  .ui.list > .item:last-child {
    86    padding-bottom: 0em;
    87  }
    88  
    89  /* Child List */
    90  ul.ui.list ul,
    91  ol.ui.list ol,
    92  .ui.list .list {
    93    clear: both;
    94    margin: 0em;
    95    padding: @childListPadding;
    96  }
    97  
    98  /* Icon */
    99  .ui.list .list > .item > i.icon,
   100  .ui.list > .item > i.icon {
   101    display: table-cell;
   102    margin: 0em;
   103    padding-top: @iconOffset;
   104    padding-right: @iconDistance;
   105    vertical-align: @iconContentVerticalAlign;
   106    transition: @iconTransition;
   107  }
   108  .ui.list .list > .item i[class*="top aligned"].icon,
   109  .ui.list > .item > i[class*="top aligned"].icon {
   110    vertical-align: top;
   111  }
   112  .ui.list .list > .item > i.icon:only-child,
   113  .ui.list > .item > i.icon:only-child {
   114    display: inline-block;
   115    vertical-align: @iconVerticalAlign;
   116  }
   117  
   118  
   119  /* Image */
   120  .ui.list .list > .item > .image,
   121  .ui.list > .item > .image {
   122    display: table-cell;
   123    background-color: transparent;
   124    margin: 0em;
   125    padding-right: @imageDistance;
   126    vertical-align: @imageAlign;
   127  }
   128  .ui.list .list > .item > [class*="top aligned"].image,
   129  .ui.list > .item > [class*="top aligned"].image {
   130    vertical-align: top;
   131  }
   132  .ui.list .list > .item > .image img,
   133  .ui.list > .item > .image img {
   134    vertical-align: @imageAlign;
   135  }
   136  
   137  .ui.list .list > .item > img.image,
   138  .ui.list .list > .item > .image:only-child,
   139  .ui.list > .item > img.image,
   140  .ui.list > .item > .image:only-child {
   141    display: inline-block;
   142    padding-right: 0em;
   143  }
   144  
   145  /* Content */
   146  .ui.list .list > .item > .content,
   147  .ui.list > .item > .content {
   148    line-height: @contentLineHeight;
   149  }
   150  .ui.list .list > .item > .image + .content,
   151  .ui.list .list > .item > .icon + .content
   152  .ui.list > .item > .image + .content,
   153  .ui.list > .item > .icon + .content {
   154    display: table-cell;
   155    padding: 0em 0em 0em @contentDistance;
   156    vertical-align: @contentVerticalAlign;
   157  }
   158  .ui.list .list > .item > .image + .content,
   159  .ui.list .list > .item > .icon + .content,
   160  .ui.list > .item > .image + .content,
   161  .ui.list > .item > .icon + .content {
   162    display: table-cell;
   163    padding: 0em 0em 0em @contentDistance;
   164    vertical-align: @contentVerticalAlign;
   165  }
   166  .ui.list .list > .item > img.image + .content,
   167  .ui.list > .item > img.image + .content {
   168    display: inline-block;
   169  }
   170  .ui.list .list > .item [class*="top aligned"].content,
   171  .ui.list > .item > [class*="top aligned"].content {
   172    vertical-align: top;
   173  }
   174  .ui.list .list > .item > .content > .list,
   175  .ui.list > .item > .content > .list {
   176    margin-left: 0em;
   177    padding-left: 0em;
   178  }
   179  
   180  /* Item Link */
   181  .ui.list .list > a.item,
   182  .ui.list > a.item {
   183    cursor: pointer;
   184    color: @itemLinkColor;
   185  }
   186  .ui.list .list > a.item:hover,
   187  .ui.list > a.item:hover {
   188    color: @itemLinkHoverColor;
   189  }
   190  
   191  /* Linked Item Icons */
   192  .ui.list .list > a.item i.icon,
   193  .ui.list > a.item i.icon {
   194    color: @itemLinkIconColor;
   195  }
   196  
   197  /* Linking Content */
   198  .ui.list .item a {
   199    cursor: pointer;
   200    color: @itemLinkColor !important;
   201  }
   202  .ui.list .item a:hover {
   203    color: @itemLinkHoverColor !important;
   204  }
   205  
   206  
   207  /* Header */
   208  .ui.list .list > .item .header,
   209  .ui.list > .item .header {
   210    display: block;
   211    margin: 0em;
   212    font-family: @itemHeaderFontFamily;
   213    font-weight: @itemHeaderFontWeight;
   214    color: @itemHeaderColor;
   215  }
   216  .ui.list .list > .item .description,
   217  .ui.list > .item .description {
   218    display: block;
   219    color: @itemDescriptionColor;
   220  }
   221  
   222  /* Floated Content */
   223  .ui.list .list > .item [class*="left floated"],
   224  .ui.list > .item [class*="left floated"] {
   225    float: left;
   226    margin: @leftFloatMargin;
   227  }
   228  .ui.list .list > .item [class*="right floated"],
   229  .ui.list > .item [class*="right floated"] {
   230    float: right;
   231    margin: @rightFloatMargin;
   232  }
   233  
   234  /*******************************
   235              Coupling
   236  *******************************/
   237  
   238  .ui.menu .ui.list > .item,
   239  .ui.menu .ui.list .list > .item {
   240    display: list-item;
   241    table-layout: fixed;
   242    background-color: transparent;
   243  
   244    list-style-type: @listStyleType;
   245    list-style-position: @listStylePosition;
   246  
   247    padding: @itemVerticalPadding @itemHorizontalPadding;
   248    line-height: @itemLineHeight;
   249  }
   250  .ui.menu .ui.list .list > .item:before,
   251  .ui.menu .ui.list > .item:before {
   252    border: none;
   253    background: none;
   254  }
   255  .ui.menu .ui.list .list > .item:first-child,
   256  .ui.menu .ui.list > .item:first-child {
   257    padding-top: 0em;
   258  }
   259  .ui.menu .ui.list .list > .item:last-child,
   260  .ui.menu .ui.list > .item:last-child {
   261    padding-bottom: 0em;
   262  }
   263  
   264  
   265  /*******************************
   266              Types
   267  *******************************/
   268  
   269  /*-------------------
   270        Horizontal
   271  --------------------*/
   272  
   273  .ui.horizontal.list {
   274    display: inline-block;
   275    font-size: 0em;
   276  }
   277  .ui.horizontal.list > .item {
   278    display: inline-block;
   279    margin-left: @horizontalSpacing;
   280    font-size: 1rem;
   281  }
   282  .ui.horizontal.list > .item:first-child {
   283    margin-left: 0em !important;
   284    padding-left: 0em !important;
   285  }
   286  .ui.horizontal.list .list {
   287    padding-left: 0em;
   288    padding-bottom: 0em;
   289  }
   290  
   291  /* Padding on all elements */
   292  .ui.horizontal.list > .item:first-child,
   293  .ui.horizontal.list > .item:last-child {
   294    padding-top: @itemVerticalPadding;
   295    padding-bottom: @itemVerticalPadding;
   296  }
   297  
   298  /* Horizontal List */
   299  .ui.horizontal.list > .item > i.icon {
   300    margin: 0em;
   301    padding: 0em @horizontalIconDistance 0em 0em;
   302  }
   303  .ui.horizontal.list > .item > .icon,
   304  .ui.horizontal.list > .item > .icon + .content {
   305    float: none;
   306    display: inline-block;
   307  }
   308  
   309  
   310  /*******************************
   311               States
   312  *******************************/
   313  
   314  /*-------------------
   315         Disabled
   316  --------------------*/
   317  
   318  .ui.list .list > .disabled.item,
   319  .ui.list > .disabled.item {
   320    pointer-events: none;
   321    color: @disabledColor !important;
   322  }
   323  .ui.inverted.list .list > .disabled.item,
   324  .ui.inverted.list > .disabled.item {
   325    color: @invertedDisabledColor !important;
   326  }
   327  
   328  /*-------------------
   329          Hover
   330  --------------------*/
   331  
   332  .ui.list .list > a.item:hover .icon,
   333  .ui.list > a.item:hover .icon {
   334    color: @itemLinkIconHoverColor;
   335  }
   336  
   337  
   338  /*******************************
   339             Variations
   340  *******************************/
   341  
   342  /*-------------------
   343         Inverted
   344  --------------------*/
   345  
   346  .ui.inverted.list .list > a.item > .icon,
   347  .ui.inverted.list > a.item > .icon {
   348    color: @invertedIconLinkColor;
   349  }
   350  .ui.inverted.list .list > .item .header,
   351  .ui.inverted.list > .item .header {
   352    color: @invertedHeaderColor;
   353  }
   354  .ui.inverted.list .list > .item .description,
   355  .ui.inverted.list > .item .description {
   356    color: @invertedDescriptionColor;
   357  }
   358  
   359  /* Item Link */
   360  .ui.inverted.list .list > a.item,
   361  .ui.inverted.list > a.item {
   362    cursor: pointer;
   363    color: @invertedItemLinkColor;
   364  }
   365  .ui.inverted.list .list > a.item:hover,
   366  .ui.inverted.list > a.item:hover {
   367    color: @invertedItemLinkHoverColor;
   368  }
   369  
   370  
   371  /* Linking Content */
   372  .ui.inverted.list .item a {
   373    cursor: pointer;
   374    color: @invertedItemLinkColor !important;
   375  }
   376  .ui.inverted.list .item a:hover {
   377    color: @invertedItemLinkHoverColor !important;
   378  }
   379  
   380  /*-------------------
   381         Link
   382  --------------------*/
   383  
   384  .ui.link.list .item,
   385  .ui.link.list a.item,
   386  .ui.link.list .item a {
   387    color: @linkListItemColor;
   388    transition: @linkListTransition;
   389  }
   390  .ui.link.list a.item:hover,
   391  .ui.link.list .item a:hover {
   392    color: @linkListItemHoverColor;
   393  }
   394  .ui.link.list a.item:active,
   395  .ui.link.list .item a:active {
   396    color: @linkListItemDownColor;
   397  }
   398  .ui.link.list .active.item,
   399  .ui.link.list .active.item a {
   400    color: @linkListItemActiveColor;
   401  }
   402  
   403  /* Inverted */
   404  .ui.inverted.link.list .item,
   405  .ui.inverted.link.list a.item,
   406  .ui.inverted.link.list .item a {
   407    color: @invertedLinkListItemColor;
   408  }
   409  .ui.inverted.link.list a.item:hover,
   410  .ui.inverted.link.list .item a:hover {
   411    color: @invertedLinkListItemHoverColor;
   412  }
   413  .ui.inverted.link.list a.item:active,
   414  .ui.inverted.link.list .item a:active {
   415    color: @invertedLinkListItemDownColor;
   416  }
   417  .ui.inverted.link.list a.active.item,
   418  .ui.inverted.link.list .active.item a {
   419    color: @invertedLinkListItemActiveColor;
   420  }
   421  
   422  /*-------------------
   423        Selection
   424  --------------------*/
   425  
   426  .ui.selection.list .list > .item,
   427  .ui.selection.list > .item {
   428    cursor: pointer;
   429    background: @selectionListBackground;
   430    padding: @selectionListItemVerticalPadding @selectionListItemHorizontalPadding;
   431    margin: @selectionListItemMargin;
   432    color: @selectionListColor;
   433    border-radius: @selectionListItemBorderRadius;
   434    transition: @selectionListTransition;
   435  }
   436  .ui.selection.list .list > .item:last-child,
   437  .ui.selection.list > .item:last-child {
   438    margin-bottom: 0em;
   439  }
   440  .ui.selection.list.list >  .item:hover,
   441  .ui.selection.list > .item:hover {
   442    background: @selectionListHoverBackground;
   443    color: @selectionListHoverColor;
   444  }
   445  .ui.selection.list .list > .item:active,
   446  .ui.selection.list > .item:active {
   447    background: @selectionListDownBackground;
   448    color: @selectionListDownColor;
   449  }
   450  .ui.selection.list .list > .item.active,
   451  .ui.selection.list > .item.active {
   452    background: @selectionListActiveBackground;
   453    color: @selectionListActiveColor;
   454  }
   455  
   456  /* Inverted */
   457  .ui.inverted.selection.list > .item,
   458  .ui.inverted.selection.list > .item {
   459    background: @invertedSelectionListBackground;
   460    color: @invertedSelectionListColor;
   461  }
   462  .ui.inverted.selection.list > .item:hover,
   463  .ui.inverted.selection.list > .item:hover {
   464    background: @invertedSelectionListHoverBackground;
   465    color: @invertedSelectionListHoverColor;
   466  }
   467  .ui.inverted.selection.list > .item:active,
   468  .ui.inverted.selection.list > .item:active {
   469    background: @invertedSelectionListDownBackground;
   470    color: @invertedSelectionListDownColor;
   471  }
   472  .ui.inverted.selection.list > .item.active,
   473  .ui.inverted.selection.list > .item.active {
   474    background: @invertedSelectionListActiveBackground;
   475    color: @invertedSelectionListActiveColor;
   476  }
   477  
   478  /* Celled / Divided Selection List */
   479  .ui.celled.selection.list .list > .item,
   480  .ui.divided.selection.list .list > .item,
   481  .ui.celled.selection.list > .item,
   482  .ui.divided.selection.list > .item {
   483    border-radius: 0em;
   484  }
   485  
   486  /*-------------------
   487         Animated
   488  --------------------*/
   489  
   490  .ui.animated.list > .item {
   491    transition: @animatedListTransition;
   492  }
   493  .ui.animated.list:not(.horizontal) > .item:hover {
   494    padding-left: @animatedListIndent;
   495  }
   496  
   497  /*-------------------
   498         Fitted
   499  --------------------*/
   500  .ui.fitted.list:not(.selection) .list > .item,
   501  .ui.fitted.list:not(.selection) > .item {
   502    padding-left: 0em;
   503    padding-right: 0em;
   504  }
   505  .ui.fitted.selection.list .list > .item,
   506  .ui.fitted.selection.list > .item {
   507    margin-left: -@selectionListItemHorizontalPadding;
   508    margin-right: -@selectionListItemHorizontalPadding;
   509  }
   510  
   511  /*-------------------
   512        Bulleted
   513  --------------------*/
   514  
   515  ul.ui.list,
   516  .ui.bulleted.list {
   517    margin-left: @bulletDistance;
   518  }
   519  ul.ui.list li,
   520  .ui.bulleted.list .list > .item,
   521  .ui.bulleted.list > .item {
   522    position: relative;
   523  }
   524  ul.ui.list li:before,
   525  .ui.bulleted.list .list > .item:before,
   526  .ui.bulleted.list > .item:before {
   527    position: absolute;
   528    top: auto;
   529    left: auto;
   530    margin-left: @bulletOffset;
   531    content: @bulletCharacter;
   532    opacity: @bulletOpacity;
   533    color: @bulletColor;
   534    vertical-align: @bulletVerticalAlign;
   535  }
   536  
   537  ul.ui.list ul,
   538  .ui.bulleted.list .list {
   539    padding-left: @bulletChildDistance;
   540  }
   541  
   542  /* Horizontal Bulleted */
   543  ul.ui.horizontal.bulleted.list,
   544  .ui.horizontal.bulleted.list {
   545    margin-left: 0em;
   546  }
   547  ul.ui.horizontal.bulleted.list li,
   548  .ui.horizontal.bulleted.list > .item {
   549    margin-left: @horizontalBulletSpacing;
   550  }
   551  ul.ui.horizontal.bulleted.list li:first-child,
   552  .ui.horizontal.bulleted.list > .item:first-child {
   553    margin-left: 0em;
   554  }
   555  ul.ui.horizontal.bulleted.list li:first-child::before,
   556  .ui.horizontal.bulleted.list > .item:first-child::before {
   557    display: none;
   558  }
   559  
   560  /*-------------------
   561         Ordered
   562  --------------------*/
   563  
   564  ol.ui.list,
   565  .ui.ordered.list,
   566  .ui.ordered.list .list,
   567  ol.ui.list ol {
   568    counter-reset: ordered;
   569    margin-left: @orderedCountDistance;
   570    list-style-type: none;
   571  }
   572  ol.ui.list li,
   573  .ui.ordered.list .list > .item,
   574  .ui.ordered.list > .item {
   575    list-style-type: none;
   576    position: relative;
   577  }
   578  ol.ui.list li:before,
   579  .ui.ordered.list .list > .item:before,
   580  .ui.ordered.list > .item:before {
   581    position: absolute;
   582    top: auto;
   583    left: auto;
   584    margin-left: -(@orderedCountDistance);
   585    counter-increment: @orderedCountName;
   586    content: @orderedCountContent;
   587    text-align: @orderedCountTextAlign;
   588    color: @orderedCountColor;
   589    vertical-align: @orderedCountVerticalAlign;
   590    opacity: @orderedCountOpacity;
   591  }
   592  
   593  
   594  /* Child Lists */
   595  ol.ui.list ol,
   596  .ui.ordered.list .list {
   597    margin-left: @orderedChildCountDistance;
   598  }
   599  ol.ui.list ol li:before,
   600  .ui.ordered.list .list > .item:before {
   601    margin-left: @orderedChildCountOffset;
   602  }
   603  
   604  /* Horizontal Ordered */
   605  ol.ui.horizontal.list,
   606  .ui.ordered.horizontal.list {
   607    margin-left: 0em;
   608  }
   609  ol.ui.horizontal.list li:before,
   610  .ui.ordered.horizontal.list .list > .item:before,
   611  .ui.ordered.horizontal.list > .item:before {
   612    position: static;
   613    margin: 0em @horizontalOrderedCountDistance 0em 0em;
   614  }
   615  
   616  
   617  /*-------------------
   618         Divided
   619  --------------------*/
   620  
   621  .ui.divided.list > .item {
   622    border-top: @dividedBorder;
   623  }
   624  .ui.divided.list .list > .item {
   625    border-top: @dividedChildListBorder;
   626  }
   627  .ui.divided.list .item .list > .item {
   628    border-top: @dividedChildItemBorder;
   629  }
   630  .ui.divided.list .list > .item:first-child,
   631  .ui.divided.list > .item:first-child {
   632    border-top: none;
   633  }
   634  
   635  /* Sub Menu */
   636  .ui.divided.list:not(.horizontal) .list > .item:first-child {
   637    border-top-width: @dividedBorderWidth;
   638  }
   639  
   640  /* Divided bulleted */
   641  .ui.divided.bulleted.list:not(.horizontal),
   642  .ui.divided.bulleted.list .list {
   643    margin-left: 0em;
   644    padding-left: 0em;
   645  }
   646  .ui.divided.bulleted.list .list > .item:not(.horizontal),
   647  .ui.divided.bulleted.list > .item:not(.horizontal) {
   648    padding-left: @bulletDistance;
   649  }
   650  
   651  /* Divided Ordered */
   652  .ui.divided.ordered.list {
   653    margin-left: 0em;
   654  }
   655  .ui.divided.ordered.list .list > .item,
   656  .ui.divided.ordered.list > .item {
   657    padding-left: @orderedCountDistance;
   658  }
   659  .ui.divided.ordered.list .item .list {
   660    margin-left: 0em;
   661    margin-right: 0em;
   662    padding-bottom: @itemVerticalPadding;
   663  }
   664  .ui.divided.ordered.list .item .list > .item {
   665    padding-left: @orderedChildCountDistance;
   666  }
   667  
   668  /* Divided Selection */
   669  .ui.divided.selection.list .list > .item,
   670  .ui.divided.selection.list > .item {
   671    margin: 0em;
   672    border-radius: 0em;
   673  }
   674  
   675  /* Divided horizontal */
   676  .ui.divided.horizontal.list {
   677    margin-left: 0em;
   678  }
   679  .ui.divided.horizontal.list > .item {
   680    border-top: none;
   681    border-left: @dividedBorder;
   682    margin: 0em;
   683    padding-left: @horizontalDividedSpacing;
   684    padding-right: @horizontalDividedSpacing;
   685    line-height: @horizontalDividedLineHeight;
   686  }
   687  .ui.horizontal.divided.list > .item:first-child {
   688    border-left: none;
   689  }
   690  /* Inverted */
   691  .ui.divided.inverted.list > .item,
   692  .ui.divided.inverted.list > .list,
   693  .ui.divided.inverted.horizontal.list > .item {
   694    border-color: @dividedInvertedBorderColor;
   695  }
   696  
   697  
   698  /*-------------------
   699          Celled
   700  --------------------*/
   701  
   702  .ui.celled.list > .item,
   703  .ui.celled.list > .list {
   704    border-top: @celledBorder;
   705    padding-left: @celledHorizontalPadding;
   706    padding-right: @celledHorizontalPadding;
   707  }
   708  .ui.celled.list > .item:last-child {
   709    border-bottom: @celledBorder;
   710  }
   711  
   712  /* Padding on all elements */
   713  .ui.celled.list > .item:first-child,
   714  .ui.celled.list > .item:last-child {
   715    padding-top: @itemVerticalPadding;
   716    padding-bottom: @itemVerticalPadding;
   717  }
   718  
   719  /* Sub Menu */
   720  .ui.celled.list .item .list > .item {
   721    border-width: 0px;
   722  }
   723  .ui.celled.list .list > .item:first-child {
   724    border-top-width: 0px;
   725  }
   726  
   727  /* Celled Bulleted */
   728  .ui.celled.bulleted.list {
   729    margin-left: 0em;
   730  }
   731  .ui.celled.bulleted.list .list > .item,
   732  .ui.celled.bulleted.list > .item {
   733    padding-left: (@bulletDistance);
   734  }
   735  .ui.celled.bulleted.list .item .list {
   736    margin-left: -(@bulletDistance);
   737    margin-right: -(@bulletDistance);
   738    padding-bottom: @itemVerticalPadding;
   739  }
   740  
   741  /* Celled Ordered */
   742  .ui.celled.ordered.list {
   743    margin-left: 0em;
   744  }
   745  .ui.celled.ordered.list .list > .item,
   746  .ui.celled.ordered.list > .item {
   747    padding-left: @orderedCountDistance;
   748  }
   749  .ui.celled.ordered.list .item .list {
   750    margin-left: 0em;
   751    margin-right: 0em;
   752    padding-bottom: @itemVerticalPadding;
   753  }
   754  .ui.celled.ordered.list .list > .item {
   755    padding-left: @orderedChildCountDistance;
   756  }
   757  
   758  /* Celled Horizontal */
   759  .ui.horizontal.celled.list {
   760    margin-left: 0em;
   761  }
   762  .ui.horizontal.celled.list .list > .item,
   763  .ui.horizontal.celled.list > .item {
   764    border-top: none;
   765    border-left: @celledBorder;
   766    margin: 0em;
   767    padding-left: @horizontalCelledSpacing;
   768    padding-right: @horizontalCelledSpacing;
   769  
   770    line-height: @horizontalCelledLineHeight;
   771  }
   772  .ui.horizontal.celled.list .list > .item:last-child,
   773  .ui.horizontal.celled.list > .item:last-child {
   774    border-bottom: none;
   775    border-right: @celledBorder;
   776  }
   777  
   778  /* Inverted */
   779  .ui.celled.inverted.list > .item,
   780  .ui.celled.inverted.list > .list {
   781    border-color: @celledInvertedBorder;
   782  }
   783  .ui.celled.inverted.horizontal.list .list > .item,
   784  .ui.celled.inverted.horizontal.list > .item {
   785    border-color: @celledInvertedBorder;
   786  }
   787  
   788  /*-------------------
   789         Relaxed
   790  --------------------*/
   791  
   792  .ui.relaxed.list:not(.horizontal) > .item {
   793    padding-top: @relaxedVerticalPadding;
   794    padding-bottom: @relaxedVerticalPadding;
   795  }
   796  .ui.relaxed.list .list > .item .header,
   797  .ui.relaxed.list > .item .header {
   798    /*margin-bottom: @relaxedHeaderMargin;*/
   799  }
   800  .ui.horizontal.relaxed.list > .item {
   801    padding-left: @relaxedHorizontalPadding;
   802    padding-right: @relaxedHorizontalPadding;
   803  }
   804  
   805  /* Very Relaxed */
   806  .ui[class*="very relaxed"].list:not(.horizontal) > .item {
   807    padding-top: @veryRelaxedVerticalPadding;
   808    padding-bottom: @veryRelaxedVerticalPadding;
   809  }
   810  .ui[class*="very relaxed"].list .list > .item .header,
   811  .ui[class*="very relaxed"].list > .item .header {
   812    /*margin-bottom: @veryRelaxedHeaderMargin;*/
   813  }
   814  .ui.horizontal[class*="very relaxed"].list .list > .item,
   815  .ui.horizontal[class*="very relaxed"].list > .item {
   816    padding-left: @veryRelaxedHorizontalPadding;
   817    padding-right: @veryRelaxedHorizontalPadding;
   818  }
   819  
   820  /*-------------------
   821        Sizes
   822  --------------------*/
   823  
   824  .ui.mini.list {
   825    font-size: @relativeMini;
   826  }
   827  .ui.tiny.list {
   828    font-size: @relativeTiny;
   829  }
   830  .ui.small.list {
   831    font-size: @relativeSmall;
   832  }
   833  .ui.list {
   834    font-size: @relativeMedium;
   835  }
   836  .ui.large.list {
   837    font-size: @relativeLarge;
   838  }
   839  .ui.big.list {
   840    font-size: @relativeBig;
   841  }
   842  .ui.huge.list {
   843    font-size: @relativeHuge;
   844  }
   845  .ui.massive.list {
   846    font-size: @relativeMassive;
   847  }
   848  
   849  .ui.mini.horizontal.list .list > .item,
   850  .ui.mini.horizontal.list > .item {
   851    font-size: @mini;
   852  }
   853  .ui.tiny.horizontal.list .list > .item,
   854  .ui.tiny.horizontal.list > .item {
   855    font-size: @tiny;
   856  }
   857  .ui.small.horizontal.list .list > .item,
   858  .ui.small.horizontal.list > .item {
   859    font-size: @small;
   860  }
   861  .ui.horizontal.list .list > .item,
   862  .ui.horizontal.list > .item {
   863    font-size: @medium;
   864  }
   865  .ui.large.horizontal.list .list > .item,
   866  .ui.large.horizontal.list > .item {
   867    font-size: @large;
   868  }
   869  .ui.big.horizontal.list .list > .item,
   870  .ui.big.horizontal.list > .item {
   871    font-size: @big;
   872  }
   873  .ui.huge.horizontal.list .list > .item,
   874  .ui.huge.horizontal.list > .item {
   875    font-size: @huge;
   876  }
   877  .ui.massive.horizontal.list .list > .item,
   878  .ui.massive.horizontal.list > .item {
   879    font-size: @massive;
   880  }
   881  
   882  .loadUIOverrides();