/** * Copyright (c) HashiCorp, Inc. * SPDX-License-Identifier: BUSL-1.1 */ table.dom-recycling { @extend %dom-recycling-table; } /* project specific */ %dom-recycling-table tbody { /* tbodys are all absolute so,*/ /* make room for the header */ top: 33px !important; /* Make room for the header, plus 20px for a margin on the bottom */ width: 100%; } %dom-recycling-table caption ~ tbody { /* tbodys are all absolute so,*/ /* make room for the header */ top: 57px !important; /* Make room for the header, plus 20px for a margin on the bottom */ } /* TODO: putting this here is less than ideal */ /* but this is another area where I am specifically */ /* targetting table-like things. This is now a prime */ /* area for a bit of refactoring/reorganizing */ /* Every type of 'row' is given a placeholder which */ /* can apply to all th's and td's in the table */ /* (the placeholders refer to a tf so `> *` will get you */ /* both th and td). /* Next, all the below calculations let you fix a width of */ /* any number of cells, then size the remaining cells */ /* using: */ /* calc(<100% divided by number of non-fixed width cells> - ) */ table tr > *:nth-last-child(2):first-child, table tr > *:nth-last-child(2):first-child ~ * { width: calc(100% / 2); } table tr > *:nth-last-child(3):first-child, table tr > *:nth-last-child(3):first-child ~ * { width: calc(100% / 3); } table tr > *:nth-last-child(4):first-child, table tr > *:nth-last-child(4):first-child ~ * { width: calc(100% / 4); } table tr > *:nth-last-child(5):first-child, table tr > *:nth-last-child(5):first-child ~ * { width: calc(100% / 5); } table.has-actions tr > .actions { @extend %table-actions; } table.has-actions tr > *:nth-last-child(2):first-child, table.has-actions tr > *:nth-last-child(2):first-child ~ * { width: calc(100% - 60px); } table.has-actions tr > *:nth-last-child(3):first-child, table.has-actions tr > *:nth-last-child(3):first-child ~ * { width: calc(50% - 30px); } table.has-actions tr > *:nth-last-child(4):first-child, table.has-actions tr > *:nth-last-child(4):first-child ~ * { width: calc(33% - 20px); } table.has-actions tr > *:nth-last-child(5):first-child, table.has-actions tr > *:nth-last-child(5):first-child ~ * { width: calc(25% - 15px); } /*TODO: trs only live in tables, get rid of table */ html[data-route^='dc.acls.policies'] [role='dialog'] table tr, html[data-route^='dc.acls.policies'] table tr, html[data-route^='dc.acls.roles'] [role='dialog'] table tr, html[data-route^='dc.acls.roles'] main table.token-list tr { @extend %tokens-minimal-row; } // this will get auto calculated later in tabular-collection.js // keeping this here for reference // %services-row > * { // (100% / 2) - (160px / 2) // width: calc(50% - 160px); // } %tokens-minimal-row > *:not(last-child) { width: 120px; } %tokens-minimal-row > *:last-child { width: calc(100% - 240px) !important; }