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

     1  /* TODO: rename: %details-table */
     2  %tabular-details {
     3    width: 100%;
     4    table-layout: fixed;
     5  }
     6  %tabular-details tr > .actions {
     7    @extend %table-actions;
     8    position: relative;
     9  }
    10  %tabular-details td:only-child > div {
    11    @extend %tabular-detail;
    12  }
    13  %tabular-details-toggle-button {
    14    @extend %toggle-button;
    15    pointer-events: auto;
    16    position: absolute;
    17  }
    18  %tabular-details td > label {
    19    @extend %tabular-details-toggle-button;
    20    /*TODO: This needs to be figured out with %toggle-button/%action-group */
    21    top: 8px;
    22    right: 15px;
    23  }
    24  %tabular-details tr:nth-child(even) td > * {
    25    display: none;
    26  }
    27  %tabular-details tr:nth-child(odd) td {
    28    width: calc(50% - 30px);
    29  }
    30  %tabular-details tr:nth-child(odd) td:last-child {
    31    width: 60px;
    32  }
    33  %tabular-detail > label {
    34    @extend %tabular-details-toggle-button;
    35    top: 8px;
    36    right: 24px;
    37  }
    38  %tabular-details tr:nth-child(even) td > input:checked + * {
    39    display: block;
    40  }
    41  %tabular-details td:only-child {
    42    overflow: visible;
    43    position: relative;
    44  }
    45  %tabular-detail {
    46    position: relative;
    47    left: -10px;
    48    right: -10px;
    49    width: calc(100% + 20px);
    50    margin-top: -48px;
    51    pointer-events: none;
    52    overflow: hidden;
    53  }
    54  %tabular-detail {
    55    padding: 10px;
    56  }
    57  %tabular-detail::before {
    58    content: '';
    59    display: block;
    60    height: 1px;
    61    position: absolute;
    62    top: -2px;
    63    left: 0;
    64    width: 100%;
    65  }
    66  %tabular-detail > div {
    67    pointer-events: auto;
    68    margin-top: 36px;
    69  }