github.com/outbrain/consul@v1.4.5/ui-v2/app/styles/components/table/layout.scss (about)

     1  table {
     2    width: 100%;
     3  }
     4  %table-actions {
     5    width: 60px;
     6  }
     7  th.actions input {
     8    display: none;
     9  }
    10  th.actions {
    11    text-align: right;
    12  }
    13  td.actions .with-confirmation.confirming {
    14    position: absolute;
    15    bottom: 4px;
    16    right: 1px;
    17  }
    18  td.actions .with-confirmation.confirming p {
    19    margin-bottom: 1em;
    20  }
    21  table caption {
    22    text-align: left;
    23    margin-bottom: 0.8em;
    24  }
    25  td > button,
    26  td > .with-confirmation > button {
    27    position: relative;
    28    top: -6px;
    29  }
    30  table th {
    31    padding-bottom: 0.6em;
    32  }
    33  table td,
    34  table td a {
    35    padding: 0.9em 0;
    36  }
    37  table th,
    38  table td:not(.actions),
    39  table td a {
    40    padding-right: 0.9em;
    41  }
    42  table td a {
    43    display: block;
    44  }
    45  th,
    46  td:not(.actions),
    47  td:not(.actions) a {
    48    white-space: nowrap;
    49    text-overflow: ellipsis;
    50    overflow: hidden;
    51  }
    52  
    53  // TODO: this isn't specific to table
    54  // these are the node health 3 column display
    55  tr > * dl {
    56    float: left;
    57  }
    58  td dl {
    59    height: 100%;
    60  }
    61  td dl {
    62    display: flex;
    63  }
    64  td dl > * {
    65    display: block;
    66  }
    67  td dt.zero {
    68    display: none;
    69  }
    70  td dd.zero {
    71    visibility: hidden;
    72  }
    73  td dt {
    74    text-indent: -9000px;
    75  }
    76  td dt.warning {
    77    overflow: visible;
    78  }
    79  td dt.warning::before {
    80    top: 7px;
    81  }
    82  td dt.warning::after {
    83    left: -2px;
    84    top: -1px;
    85  }
    86  td dd {
    87    box-sizing: content-box;
    88    margin-left: 22px;
    89    padding-right: 10px;
    90  }
    91  /* hide actions on narrow screens, you can always click in do everything from there */
    92  @media #{$--lt-wide-table} {
    93    tr > .actions {
    94      display: none;
    95    }
    96  }
    97  /* ideally these would be in route css files, but left here as they */
    98  /* accomplish the same thing (hide non-essential columns for tables) */
    99  @media #{$--lt-medium-table} {
   100    /* Policy > Datacenters */
   101    html.template-policy.template-list tr > :nth-child(2) {
   102      display: none;
   103    }
   104  }
   105  @media #{$--lt-wide-table} {
   106    html.template-intention.template-list tr > :nth-last-child(2) {
   107      display: none;
   108    }
   109    html.template-service.template-list tr > :last-child {
   110      display: none;
   111    }
   112    html.template-node.template-show #services tr > :last-child {
   113      display: none;
   114    }
   115    html.template-node.template-show #lock-sessions tr > :not(:first-child):not(:last-child) {
   116      display: none;
   117    }
   118    html.template-node.template-show #lock-sessions td:last-child {
   119      padding: 0;
   120    }
   121    html.template-node.template-show #lock-sessions td:last-child button {
   122      float: right;
   123    }
   124  }