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

     1  /*!
     2   * # Semantic UI - Table
     3   * http://github.com/semantic-org/semantic-ui/
     4   *
     5   *
     6   * Copyright 2014 Contributors
     7   * Released under the MIT license
     8   * http://opensource.org/licenses/MIT
     9   *
    10   */
    11  
    12  
    13  /*******************************
    14              Theme
    15  *******************************/
    16  
    17  @type    : 'collection';
    18  @element : 'table';
    19  
    20  @import (multiple) '../../theme.config';
    21  
    22  /*******************************
    23               Table
    24  *******************************/
    25  
    26  /* Prototype */
    27  .ui.table {
    28    width: 100%;
    29    background: @background;
    30    margin: @margin;
    31    border: @border;
    32    box-shadow: @boxShadow;
    33    border-radius: @borderRadius;
    34    color: @color;
    35    border-collapse: @borderCollapse;
    36    border-spacing: @borderSpacing;
    37  }
    38  
    39  .ui.table:first-child {
    40    margin-top: 0em;
    41  }
    42  .ui.table:last-child {
    43    margin-bottom: 0em;
    44  }
    45  
    46  /*******************************
    47               Parts
    48  *******************************/
    49  
    50  /* Table Content */
    51  .ui.table th,
    52  .ui.table td {
    53    transition: @transition;
    54  }
    55  
    56  /* Headers */
    57  .ui.table thead {
    58    box-shadow: @headerBoxShadow;
    59  }
    60  .ui.table thead th {
    61    cursor: auto;
    62    background: @headerBackground;
    63    text-align: @headerAlign;
    64    color: @headerColor;
    65    padding: @headerVerticalPadding @headerHorizontalPadding;
    66    vertical-align: @headerVerticalAlign;
    67    font-style: @headerFontStyle;
    68    font-weight: @headerFontWeight;
    69    text-transform: @headerTextTransform;
    70    border-bottom: @headerBorder;
    71    border-left: @headerDivider;
    72  }
    73  
    74  .ui.table thead tr > th:first-child {
    75    border-left: none;
    76  }
    77  
    78  .ui.table thead tr:first-child > th:first-child {
    79    border-radius: @borderRadius 0em 0em 0em;
    80  }
    81  .ui.table thead tr:first-child > th:last-child {
    82    border-radius: 0em @borderRadius 0em 0em;
    83  }
    84  .ui.table thead tr:first-child > th:only-child {
    85    border-radius: @borderRadius @borderRadius 0em 0em;
    86  }
    87  
    88  /* Footer */
    89  .ui.table tfoot {
    90    box-shadow: @footerBoxShadow;
    91  }
    92  .ui.table tfoot th {
    93    cursor: auto;
    94    border-top: @footerBorder;
    95    background: @footerBackground;
    96    text-align: @footerAlign;
    97    color: @footerColor;
    98    padding: @footerVerticalPadding @footerHorizontalPadding;
    99    vertical-align: @footerVerticalAlign;
   100    font-style: @footerFontStyle;
   101    font-weight: @footerFontWeight;
   102    text-transform: @footerTextTransform;
   103  }
   104  .ui.table tfoot tr > th:first-child {
   105    border-left: none;
   106  }
   107  .ui.table tfoot tr:first-child > th:first-child {
   108    border-radius: 0em 0em 0em @borderRadius;
   109  }
   110  .ui.table tfoot tr:first-child > th:last-child {
   111    border-radius: 0em 0em @borderRadius 0em;
   112  }
   113  .ui.table tfoot tr:first-child > th:only-child {
   114    border-radius: 0em 0em @borderRadius @borderRadius;
   115  }
   116  
   117  /* Table Row */
   118  .ui.table tr td {
   119    border-top: @rowBorder;
   120  }
   121  .ui.table tr:first-child td {
   122    border-top: none;
   123  }
   124  
   125  /* Table Cells */
   126  .ui.table td {
   127    padding: @cellVerticalPadding @cellHorizontalPadding;
   128    text-align: @cellTextAlign;
   129    vertical-align: @cellVerticalAlign;
   130  }
   131  
   132  /* Icons */
   133  .ui.table > .icon {
   134    vertical-align: @iconVerticalAlign;
   135  }
   136  .ui.table > .icon:only-child {
   137    margin: 0em;
   138  }
   139  
   140  /* Table Segment */
   141  .ui.table.segment {
   142    padding: 0em;
   143  }
   144  .ui.table.segment:after {
   145    display: none;
   146  }
   147  .ui.table.segment.stacked:after {
   148    display: block;
   149  }
   150  
   151  
   152  /* Responsive */
   153  @media only screen and (max-width : @largestMobileScreen) {
   154    .ui.table:not(.unstackable) {
   155      width: 100%;
   156    }
   157    .ui.table:not(.unstackable) tbody,
   158    .ui.table:not(.unstackable) tr,
   159    .ui.table:not(.unstackable) tr > th,
   160    .ui.table:not(.unstackable) tr > td  {
   161      display: block !important;
   162      width: auto !important;
   163      display: block !important;
   164    }
   165  
   166    .ui.table:not(.unstackable) {
   167      padding: 0em;
   168    }
   169    .ui.table:not(.unstackable) thead {
   170      display: @responsiveHeaderDisplay;
   171    }
   172    .ui.table:not(.unstackable) tfoot {
   173      display: @responsiveFooterDisplay;
   174    }
   175    .ui.table:not(.unstackable) tr > th,
   176    .ui.table:not(.unstackable) tr > td {
   177      background: none;
   178      border: none !important;
   179      padding: @responsiveCellVerticalPadding @responsiveCellHorizontalPadding;
   180      box-shadow: @responsiveCellBoxShadow;
   181    }
   182    .ui.table:not(.unstackable) th:first-child,
   183    .ui.table:not(.unstackable) td:first-child {
   184      font-weight: bold;
   185      padding-top: @responsiveRowVerticalPadding;
   186    }
   187    .ui.table:not(.unstackable) th:last-child,
   188    .ui.table:not(.unstackable) td:last-child {
   189      box-shadow: @responsiveRowBoxShadow;
   190      padding-bottom: @responsiveRowVerticalPadding;
   191    }
   192  
   193    /* Clear BG Colors */
   194    .ui.table:not(.unstackable) tr > td.warning,
   195    .ui.table:not(.unstackable) tr > td.error,
   196    .ui.table:not(.unstackable) tr > td.active,
   197    .ui.table:not(.unstackable) tr > td.positive,
   198    .ui.table:not(.unstackable) tr > td.negative {
   199      background-color: @responsiveStatusColor !important;
   200    }
   201  
   202    /* Definition Table */
   203    .ui.definition.table:not(.unstackable) thead th:first-child {
   204      box-shadow: none !important;
   205    }
   206    .ui.definition.table:not(.unstackable) tr td:first-child {
   207      padding-bottom: @responsiveRowVerticalPadding;
   208    }
   209    .ui.definition.table:not(.unstackable) tr td:nth-child(n+2) {
   210      padding-top: @responsiveRowVerticalPadding;
   211    }
   212  
   213  }
   214  
   215  
   216  /*******************************
   217              Coupling
   218  *******************************/
   219  
   220  /* UI Image */
   221  .ui.table th .image,
   222  .ui.table th .image img,
   223  .ui.table td .image,
   224  .ui.table td .image img {
   225    max-width: none;
   226  }
   227  
   228  
   229  /*******************************
   230               Types
   231  *******************************/
   232  
   233  /*--------------
   234      Complex
   235  ---------------*/
   236  
   237  .ui.structured.table {
   238    border-collapse: collapse;
   239  }
   240  .ui.structured.table thead th {
   241    border-left: @headerDivider;
   242    border-right: @headerDivider;
   243  }
   244  .ui.structured.sortable.table thead th {
   245    border-left: @sortableBorder;
   246    border-right: @sortableBorder;
   247  }
   248  .ui.structured.basic.table th {
   249    border-left: @basicTableHeaderDivider;
   250    border-right: @basicTableHeaderDivider;
   251  }
   252  .ui.structured.celled.table tr th,
   253  .ui.structured.celled.table tr td {
   254    border-left: @cellBorder;
   255    border-right: @cellBorder;
   256  }
   257  
   258  /*--------------
   259     Definition
   260  ---------------*/
   261  
   262  .ui.definition.table thead:not(.full-width) th:first-child {
   263    pointer-events: none;
   264    background: @definitionHeaderBackground;
   265    font-weight: @definitionHeaderFontWeight;
   266    color: @definitionHeaderColor;
   267    box-shadow: -@borderWidth -@borderWidth 0px @borderWidth @definitionPageBackground;
   268  }
   269  
   270  .ui.definition.table tfoot:not(.full-width) th:first-child {
   271    pointer-events: none;
   272    background: @definitionFooterBackground;
   273    font-weight: @definitionFooterColor;
   274    color: @definitionFooterFontWeight;
   275    box-shadow: @borderWidth @borderWidth 0px @borderWidth @definitionPageBackground;
   276  }
   277  
   278  /* Remove Border */
   279  .ui.celled.definition.table thead:not(.full-width) th:first-child {
   280    box-shadow: 0px -@borderWidth 0px @borderWidth @definitionPageBackground;
   281  }
   282  .ui.celled.definition.table tfoot:not(.full-width) th:first-child {
   283    box-shadow: 0px @borderWidth 0px @borderWidth @definitionPageBackground;
   284  }
   285  
   286  /* Highlight Defining Column */
   287  .ui.definition.table tr td:first-child {
   288    background: @definitionColumnBackground;
   289    font-weight: @definitionColumnFontWeight;
   290    color: @definitionColumnColor;
   291  }
   292  
   293  /* Fix 2nd Column */
   294  .ui.definition.table thead:not(.full-width) th:nth-child(2) {
   295    border-left: @borderWidth solid @borderColor;
   296  }
   297  .ui.definition.table tfoot:not(.full-width) th:nth-child(2) {
   298    border-left: @borderWidth solid @borderColor;
   299  }
   300  .ui.definition.table td:nth-child(2) {
   301    border-left: @borderWidth solid @borderColor;
   302  }
   303  
   304  
   305  /*******************************
   306               States
   307  *******************************/
   308  
   309  /*--------------
   310      Positive
   311  ---------------*/
   312  
   313  .ui.table tr.positive,
   314  .ui.table td.positive {
   315    box-shadow: @positiveBoxShadow;
   316  }
   317  .ui.table tr.positive td,
   318  .ui.table td.positive {
   319    background: @positiveBackgroundColor !important;
   320    color: @positiveColor !important;
   321  }
   322  .ui.celled.table tr.positive:hover td,
   323  .ui.celled.table tr:hover td.positive {
   324    background: @positiveBackgroundHover !important;
   325    color: @positiveColorHover !important;
   326  }
   327  
   328  /*--------------
   329       Negative
   330  ---------------*/
   331  
   332  .ui.table tr.negative,
   333  .ui.table td.negative {
   334    box-shadow: @negativeBoxShadow;
   335  }
   336  .ui.table tr.negative td,
   337  .ui.table td.negative {
   338    background: @negativeBackgroundColor !important;
   339    color: @negativeColor !important;
   340  }
   341  .ui.celled.table tr.negative:hover td,
   342  .ui.celled.table tr:hover td.negative {
   343    background: @negativeBackgroundHover !important;
   344    color: @negativeColorHover !important;
   345  }
   346  
   347  /*--------------
   348        Error
   349  ---------------*/
   350  
   351  .ui.table tr.error,
   352  .ui.table td.error {
   353    box-shadow: @errorBoxShadow;
   354  }
   355  .ui.table tr.error td,
   356  .ui.table td.error {
   357    background: @errorBackgroundColor !important;
   358    color: @errorColor !important;
   359  }
   360  .ui.celled.table tr.error:hover td,
   361  .ui.celled.table tr:hover td.error {
   362    background: @errorBackgroundHover !important;
   363    color: @errorColorHover !important;
   364  }
   365  
   366  /*--------------
   367       Warning
   368  ---------------*/
   369  
   370  .ui.table tr.warning,
   371  .ui.table td.warning {
   372    box-shadow: @warningBoxShadow;
   373  }
   374  .ui.table tr.warning td,
   375  .ui.table td.warning {
   376    background: @warningBackgroundColor !important;
   377    color: @warningColor !important;
   378  }
   379  .ui.celled.table tr.warning:hover td,
   380  .ui.celled.table tr:hover td.warning {
   381    background: @warningBackgroundHover !important;
   382    color: @warningColorHover !important;
   383  }
   384  
   385  /*--------------
   386       Active
   387  ---------------*/
   388  
   389  .ui.table tr.active,
   390  .ui.table td.active {
   391    box-shadow: @activeBoxShadow;
   392  }
   393  .ui.table tr.active td,
   394  .ui.table td.active {
   395    background: @activeBackgroundColor !important;
   396    color: @activeColor !important;
   397  }
   398  .ui.celled.table tr.active:hover td,
   399  .ui.celled.table tr:hover td.active {
   400    background: @activeBackgroundColor !important;
   401    color: @activeColor !important;
   402  }
   403  
   404  
   405  /*--------------
   406       Disabled
   407  ---------------*/
   408  
   409  .ui.table tr.disabled td,
   410  .ui.table tr td.disabled,
   411  .ui.table tr.disabled:hover td,
   412  .ui.table tr:hover td.disabled {
   413    pointer-events: none;
   414    color: @disabledTextColor;
   415  }
   416  
   417  /*******************************
   418            Variations
   419  *******************************/
   420  
   421  /*--------------
   422      Stackable
   423  ---------------*/
   424  
   425  @media only screen and (max-width : @largestTabletScreen) {
   426  
   427    .ui[class*="tablet stackable"].table,
   428    .ui[class*="tablet stackable"].table tbody,
   429    .ui[class*="tablet stackable"].table tr,
   430    .ui[class*="tablet stackable"].table tr > th,
   431    .ui[class*="tablet stackable"].table tr > td  {
   432      display: block !important;
   433      width: 100% !important;
   434      display: block !important;
   435    }
   436  
   437    .ui[class*="tablet stackable"].table {
   438      padding: 0em;
   439    }
   440    .ui[class*="tablet stackable"].table thead {
   441      display: @responsiveHeaderDisplay;
   442    }
   443    .ui[class*="tablet stackable"].table tfoot {
   444      display: @responsiveFooterDisplay;
   445    }
   446    .ui[class*="tablet stackable"].table tr > th,
   447    .ui[class*="tablet stackable"].table tr > td {
   448      background: none;
   449      border: none !important;
   450      padding: @responsiveCellVerticalPadding @responsiveCellHorizontalPadding;
   451      box-shadow: @responsiveCellBoxShadow;
   452    }
   453    .ui[class*="tablet stackable"].table th:first-child,
   454    .ui[class*="tablet stackable"].table td:first-child {
   455      font-weight: bold;
   456      padding-top: @responsiveRowVerticalPadding;
   457    }
   458    .ui[class*="tablet stackable"].table th:last-child,
   459    .ui[class*="tablet stackable"].table td:last-child {
   460      box-shadow: @responsiveRowBoxShadow;
   461      padding-bottom: @responsiveRowVerticalPadding;
   462    }
   463  
   464    /* Clear BG Colors */
   465    .ui[class*="tablet stackable"].table tr > td.warning,
   466    .ui[class*="tablet stackable"].table tr > td.error,
   467    .ui[class*="tablet stackable"].table tr > td.active,
   468    .ui[class*="tablet stackable"].table tr > td.positive,
   469    .ui[class*="tablet stackable"].table tr > td.negative {
   470      background-color: @responsiveStatusColor !important;
   471    }
   472  
   473    /* Definition Table */
   474    .ui.definition[class*="tablet stackable"].table thead th:first-child {
   475      box-shadow: none !important;
   476    }
   477    .ui.definition[class*="tablet stackable"].table tr td:first-child {
   478      padding-bottom: @responsiveRowVerticalPadding;
   479    }
   480    .ui.definition[class*="tablet stackable"].table tr td:nth-child(n+2) {
   481      padding-top: @responsiveRowVerticalPadding;
   482    }
   483  
   484  }
   485  
   486  /*--------------
   487       Aligned
   488  ---------------*/
   489  
   490  .ui.table[class*="left aligned"],
   491  .ui.table [class*="left aligned"] {
   492    text-align: left;
   493  }
   494  .ui.table[class*="center aligned"],
   495  .ui.table [class*="center aligned"] {
   496    text-align: center;
   497  }
   498  .ui.table[class*="right aligned"],
   499  .ui.table [class*="right aligned"] {
   500    text-align: right;
   501  }
   502  
   503  /*--------------
   504      Collapsing
   505  ---------------*/
   506  
   507  .ui.table th.collapsing,
   508  .ui.table td.collapsing {
   509    width: 1px;
   510    white-space: nowrap;
   511  }
   512  
   513  
   514  /*--------------
   515       Attached
   516  ---------------*/
   517  
   518  
   519  /* All */
   520  .ui.attached.table {
   521    width: @attachedTableWidth;
   522    margin: 0em @attachedHorizontalOffset;
   523    border-radius: 0px;
   524    box-shadow: @attachedBoxShadow;
   525  }
   526  
   527  /* Top */
   528  .ui[class*="top attached"].table {
   529    margin-top: @margin;
   530    border-radius: @borderRadius @borderRadius 0em 0em;
   531  }
   532  .ui.table[class*="top attached"]:first-child {
   533    margin-top: 0em;
   534  }
   535  
   536  /* Bottom */
   537  .ui.table[class*="bottom attached"] {
   538    margin-top: 0em;
   539    margin-bottom: @margin;
   540    border-radius: 0em 0em @borderRadius @borderRadius;
   541  }
   542  .ui.table[class*="bottom attached"]:last-child {
   543    margin-bottom: 0em;
   544  }
   545  
   546  /*--------------
   547       Striped
   548  ---------------*/
   549  
   550  /* Table Striping */
   551  .ui.striped.table > tr:nth-child(2n),
   552  .ui.striped.table tbody tr:nth-child(2n) {
   553    background-color: @stripedBackground;
   554  }
   555  
   556  /* Stripes */
   557  .ui.inverted.striped.table > tr:nth-child(2n),
   558  .ui.inverted.striped.table tbody tr:nth-child(2n) {
   559    background-color: @invertedStripedBackground;
   560  }
   561  
   562  
   563  /*-------------------
   564         Colors
   565  --------------------*/
   566  
   567  .ui.black.table {
   568    border-top: @coloredBorderSize solid @black;
   569  }
   570  .ui.blue.table {
   571    border-top: @coloredBorderSize solid @blue;
   572  }
   573  .ui.green.table {
   574    border-top: @coloredBorderSize solid @green;
   575  }
   576  .ui.orange.table {
   577    border-top: @coloredBorderSize solid @orange;
   578  }
   579  .ui.pink.table {
   580    border-top: @coloredBorderSize solid @pink;
   581  }
   582  .ui.purple.table {
   583    border-top: @coloredBorderSize solid @purple;
   584  }
   585  .ui.red.table {
   586    border-top: @coloredBorderSize solid @red;
   587  }
   588  .ui.teal.table {
   589    border-top: @coloredBorderSize solid @teal;
   590  }
   591  .ui.yellow.table {
   592    border-top: @coloredBorderSize solid @yellow;
   593  }
   594  
   595  /*-------------------
   596     Inverted Colors
   597  --------------------*/
   598  
   599  .ui.inverted.table,
   600  .ui.inverted.black.table {
   601    background-color: @black !important;
   602    color: @white !important;
   603  }
   604  .ui.inverted.blue.table {
   605    background-color: @blue !important;
   606    color: @white !important;
   607  }
   608  .ui.inverted.green.table {
   609    background-color: @green !important;
   610    color: @white !important;
   611  }
   612  .ui.inverted.orange.table {
   613    background-color: @orange !important;
   614    color: @white !important;
   615  }
   616  .ui.inverted.pink.table {
   617    background-color: @pink !important;
   618    color: @white !important;
   619  }
   620  .ui.inverted.purple.table {
   621    background-color: @purple !important;
   622    color: @white !important;
   623  }
   624  .ui.inverted.red.table {
   625    background-color: @red !important;
   626    color: @white !important;
   627  }
   628  .ui.inverted.teal.table {
   629    background-color: @teal !important;
   630    color: @white !important;
   631  }
   632  .ui.inverted.yellow.table {
   633    background-color: @yellow !important;
   634    color: @white !important;
   635  }
   636  
   637  
   638  /*--------------
   639    Column Count
   640  ---------------*/
   641  
   642  /* Grid Based */
   643  .ui.one.column.table td {
   644    width: @oneColumn;
   645  }
   646  .ui.two.column.table td {
   647    width: @twoColumn;
   648  }
   649  .ui.three.column.table td {
   650    width: @threeColumn;
   651  }
   652  .ui.four.column.table td {
   653    width: @fourColumn;
   654  }
   655  .ui.five.column.table td {
   656    width: @fiveColumn;
   657  }
   658  .ui.six.column.table td {
   659    width: @sixColumn;
   660  }
   661  .ui.seven.column.table td {
   662    width: @sevenColumn;
   663  }
   664  .ui.eight.column.table td {
   665    width: @eightColumn;
   666  }
   667  .ui.nine.column.table td {
   668    width: @nineColumn;
   669  }
   670  .ui.ten.column.table td {
   671    width: @tenColumn;
   672  }
   673  .ui.eleven.column.table td {
   674    width: @elevenColumn;
   675  }
   676  .ui.twelve.column.table td {
   677    width: @twelveColumn;
   678  }
   679  .ui.thirteen.column.table td {
   680    width: @thirteenColumn;
   681  }
   682  .ui.fourteen.column.table td {
   683    width: @fourteenColumn;
   684  }
   685  .ui.fifteen.column.table td {
   686    width: @fifteenColumn;
   687  }
   688  .ui.sixteen.column.table td {
   689    width: @sixteenColumn;
   690  }
   691  
   692  /* Column Width */
   693  .ui.table th.one.wide,
   694  .ui.table td.one.wide {
   695    width: @oneWide;
   696  }
   697  .ui.table th.two.wide,
   698  .ui.table td.two.wide {
   699    width: @twoWide;
   700  }
   701  .ui.table th.three.wide,
   702  .ui.table td.three.wide {
   703    width: @threeWide;
   704  }
   705  .ui.table th.four.wide,
   706  .ui.table td.four.wide {
   707    width: @fourWide;
   708  }
   709  .ui.table th.five.wide,
   710  .ui.table td.five.wide {
   711    width: @fiveWide;
   712  }
   713  .ui.table th.six.wide,
   714  .ui.table td.six.wide {
   715    width: @sixWide;
   716  }
   717  .ui.table th.seven.wide,
   718  .ui.table td.seven.wide {
   719    width: @sevenWide;
   720  }
   721  .ui.table th.eight.wide,
   722  .ui.table td.eight.wide {
   723    width: @eightWide;
   724  }
   725  .ui.table th.nine.wide,
   726  .ui.table td.nine.wide {
   727    width: @nineWide;
   728  }
   729  .ui.table th.ten.wide,
   730  .ui.table td.ten.wide {
   731    width: @tenWide;
   732  }
   733  .ui.table th.eleven.wide,
   734  .ui.table td.eleven.wide {
   735    width: @elevenWide;
   736  }
   737  .ui.table th.twelve.wide,
   738  .ui.table td.twelve.wide {
   739    width: @twelveWide;
   740  }
   741  .ui.table th.thirteen.wide,
   742  .ui.table td.thirteen.wide {
   743    width: @thirteenWide;
   744  }
   745  .ui.table th.fourteen.wide,
   746  .ui.table td.fourteen.wide {
   747    width: @fourteenWide;
   748  }
   749  .ui.table th.fifteen.wide,
   750  .ui.table td.fifteen.wide {
   751    width: @fifteenWide;
   752  }
   753  .ui.table th.sixteen.wide,
   754  .ui.table td.sixteen.wide {
   755    width: @sixteenWide;
   756  }
   757  
   758  /*--------------
   759      Sortable
   760  ---------------*/
   761  
   762  .ui.sortable.table thead th {
   763    cursor: pointer;
   764    white-space: nowrap;
   765    border-left: @sortableBorder;
   766    color: @sortableColor;
   767  }
   768  .ui.sortable.table thead th:first-child {
   769    border-left: none;
   770  }
   771  .ui.sortable.table thead th.sorted,
   772  .ui.sortable.table thead th.sorted:hover {
   773    user-select: none;
   774  }
   775  
   776  .ui.sortable.table thead th:after {
   777    display: inline-block;
   778    content: '';
   779    width: @sortableIconWidth;
   780    height: 1em;
   781    opacity: @sortableIconOpacity;
   782  
   783    margin: 0em 0em 0em @sortableIconDistance;
   784  
   785    font-family: @sortableIconFont;
   786    font-style: normal;
   787    font-weight: normal;
   788    text-decoration: inherit;
   789  }
   790  .ui.sortable.table thead th.ascending:after {
   791    content: @sortableIconAscending;
   792  }
   793  .ui.sortable.table thead th.descending:after {
   794    content: @sortableIconDescending;
   795  }
   796  
   797  /* Hover */
   798  .ui.sortable.table th.disabled:hover {
   799    cursor: auto;
   800    color: @sortableDisabledColor;
   801  }
   802  .ui.sortable.table thead th:hover {
   803    background: @sortableHoverBackground;
   804    color: @sortableHoverColor;
   805  }
   806  
   807  /* Sorted */
   808  .ui.sortable.table thead th.sorted {
   809    background: @sortableActiveBackground;
   810    color: @sortableActiveColor;
   811  }
   812  
   813  /* Sorted Hover */
   814  .ui.sortable.table thead th.sorted:hover {
   815    background: @sortableActiveHoverBackground;
   816    color: @sortableActiveHoverColor;
   817  }
   818  
   819  /* Inverted */
   820  .ui.inverted.sortable.table thead th.sorted {
   821    background: @sortableInvertedActiveBackground;
   822    color: @sortableInvertedActiveColor;
   823  }
   824  .ui.inverted.sortable.table thead th:hover {
   825    background: @sortableInvertedHoverBackground;
   826    color: @sortableInvertedHoverColor;
   827  }
   828  .ui.inverted.sortable.table thead th {
   829    border-left-color: @sortableInvertedBorderColor;
   830    border-right-color: @sortableInvertedBorderColor;
   831  }
   832  
   833  
   834  /*--------------
   835      Inverted
   836  ---------------*/
   837  
   838  /* Text Color */
   839  .ui.inverted.table {
   840    background: @invertedBackground;
   841    color: @invertedCellColor;
   842    border: @invertedBorder;
   843  }
   844  .ui.inverted.table th {
   845    background-color: @invertedHeaderBackground;
   846    border-color: @invertedCellBorderColor !important;
   847    color: @invertedHeaderColor;
   848  }
   849  .ui.inverted.table tr td {
   850    border-color: @invertedCellBorderColor !important;
   851  }
   852  
   853  .ui.inverted.table tr.disabled td,
   854  .ui.inverted.table tr td.disabled,
   855  .ui.inverted.table tr.disabled:hover td,
   856  .ui.inverted.table tr:hover td.disabled {
   857    pointer-events: none;
   858    color: @invertedDisabledTextColor;
   859  }
   860  
   861  /* Definition */
   862  .ui.inverted.definition.table tfoot:not(.full-width) th:first-child,
   863  .ui.inverted.definition.table thead:not(.full-width) th:first-child {
   864    background: @definitionPageBackground;
   865  }
   866  .ui.inverted.definition.table tr td:first-child {
   867    background: @invertedDefinitionColumnBackground;
   868    color: @invertedDefinitionColumnColor;
   869  }
   870  
   871  /*--------------
   872     Collapsing
   873  ---------------*/
   874  
   875  .ui.collapsing.table {
   876    width: auto;
   877  }
   878  
   879  /*--------------
   880        Basic
   881  ---------------*/
   882  
   883  .ui.basic.table {
   884    background: @basicTableBackground;
   885    border: @basicTableBorder;
   886    box-shadow: @basicBoxShadow;
   887  }
   888  .ui.basic.table thead,
   889  .ui.basic.table tfoot {
   890    box-shadow: none;
   891  }
   892  .ui.basic.table th {
   893    background: @basicTableHeaderBackground;
   894    border-left: @basicTableHeaderDivider;
   895  }
   896  .ui.basic.table tbody tr {
   897    border-bottom: @basicTableCellBorder;
   898  }
   899  .ui.basic.table td {
   900    background: @basicTableCellBackground;
   901  }
   902  .ui.basic.striped.table tbody tr:nth-child(2n) {
   903    background-color: @basicTableStripedBackground !important;
   904  }
   905  
   906  /* Very Basic */
   907  .ui[class*="very basic"].table {
   908    border: none;
   909  }
   910  .ui[class*="very basic"].table:not(.sortable):not(.striped) th,
   911  .ui[class*="very basic"].table:not(.sortable):not(.striped) td {
   912    padding: @basicTableCellVerticalPadding @basicTableCellHorizontalPadding;
   913  }
   914  .ui[class*="very basic"].table:not(.sortable):not(.striped) th:first-child,
   915  .ui[class*="very basic"].table:not(.sortable):not(.striped) td:first-child {
   916    padding-left: 0em;
   917  }
   918  .ui[class*="very basic"].table:not(.sortable):not(.striped) th:last-child,
   919  .ui[class*="very basic"].table:not(.sortable):not(.striped) td:last-child {
   920    padding-right: 0em;
   921  }
   922  .ui[class*="very basic"].table:not(.sortable):not(.striped) thead tr:first-child th {
   923    padding-top: 0em;
   924  }
   925  
   926  /*--------------
   927       Celled
   928  ---------------*/
   929  
   930  .ui.celled.table tr th,
   931  .ui.celled.table tr td {
   932    border-left: @cellBorder;
   933  }
   934  .ui.celled.table tr th:first-child,
   935  .ui.celled.table tr td:first-child {
   936    border-left: none;
   937  }
   938  
   939  /*--------------
   940       Padded
   941  ---------------*/
   942  
   943  .ui.padded.table th {
   944    padding-left: @paddedHorizontalPadding;
   945    padding-right: @paddedHorizontalPadding;
   946  }
   947  .ui.padded.table th,
   948  .ui.padded.table td {
   949    padding: @paddedVerticalPadding @paddedHorizontalPadding;
   950  }
   951  
   952  /* Very */
   953  .ui[class*="very padded"].table th {
   954    padding-left: @veryPaddedHorizontalPadding;
   955    padding-right: @veryPaddedHorizontalPadding;
   956  }
   957  .ui[class*="very padded"].table td {
   958    padding: @veryPaddedVerticalPadding @veryPaddedHorizontalPadding;
   959  }
   960  
   961  /*--------------
   962       Compact
   963  ---------------*/
   964  
   965  .ui.compact.table th {
   966    padding-left: @compactHorizontalPadding;
   967    padding-right: @compactHorizontalPadding;
   968  }
   969  .ui.compact.table td {
   970    padding: @compactVerticalPadding @compactHorizontalPadding;
   971  }
   972  
   973  /* Very */
   974  .ui[class*="very compact"].table th {
   975    padding-left: @veryCompactHorizontalPadding;
   976    padding-right: @veryCompactHorizontalPadding;
   977  }
   978  .ui[class*="very compact"].table td {
   979    padding: @veryCompactVerticalPadding @veryCompactHorizontalPadding;
   980  }
   981  
   982  /*--------------
   983        Sizes
   984  ---------------*/
   985  
   986  /* Small */
   987  .ui.small.table {
   988    font-size: @small;
   989  }
   990  
   991  /* Standard */
   992  .ui.table {
   993    font-size: @medium;
   994  }
   995  
   996  /* Large */
   997  .ui.large.table {
   998    font-size: @large;
   999  }
  1000  
  1001  .loadUIOverrides();