81637e2138
Migrate roughly half of the base components into base Adds a target for easily formatting CSS Further CSS amends/migration (#5921) 1. tooltips within tables where a slightly bit troublesome due to a mix of `inline-flex`, `overflow` and the need for truncation. This refineds tooltips a slight bit more to work 'everywhere'. 2. We also move tooltip to use the correct color and min-width from structure, but we overwrite the min-width here until we get confirmation on widths/alignment of text within a tooltip. 3. Tiny fixes for breadcrumbs and toggle-buttons in tabular listings 4. Now we inline-flex our table cells, it means it is impossible to truncate text without wrapping it in another element. This wraps all Description like text in `<p>` tags. Generally the first column of text is already wrapped in an `<a>` tag. Other items such as consul tags and policy names etc get 'cutoff' rather than truncated. 5. We are now using all the icons from `@hashicorp/structure-icons`
81 lines
2 KiB
SCSS
81 lines
2 KiB
SCSS
@import './icons/index';
|
|
@import '../base/components/table/index';
|
|
table {
|
|
@extend %table, %table-flex;
|
|
}
|
|
|
|
html.template-service.template-list td:first-child a span,
|
|
html.template-node.template-show #services td:first-child a span,
|
|
html.template-service.template-show #instances td:first-child a span {
|
|
@extend %with-external-source-icon;
|
|
float: left;
|
|
margin-right: 10px;
|
|
margin-top: 2px;
|
|
}
|
|
/* This nudges the th in for the external source icons */
|
|
html.template-node.template-show #services th:first-child,
|
|
html.template-service.template-show #instances th:first-child,
|
|
html.template-service.template-list main th:first-child {
|
|
text-indent: 28px;
|
|
}
|
|
|
|
td.folder {
|
|
@extend %with-folder;
|
|
}
|
|
table:not(.sessions) tbody tr {
|
|
cursor: pointer;
|
|
}
|
|
table:not(.sessions) td:first-child {
|
|
padding: 0;
|
|
}
|
|
/* Header Tooltips/Icon*/
|
|
th {
|
|
overflow: visible;
|
|
}
|
|
th span::after {
|
|
@extend %with-info-circle-outline-icon, %as-pseudo;
|
|
opacity: 0.6;
|
|
}
|
|
th span {
|
|
@extend %with-tooltip;
|
|
margin-left: 2px;
|
|
}
|
|
th span em {
|
|
width: 250px;
|
|
font-style: normal;
|
|
white-space: normal !important;
|
|
}
|
|
|
|
/* ideally these would be in route css files, but left here as they */
|
|
/* accomplish the same thing (hide non-essential columns for tables) */
|
|
@media #{$--lt-medium-table} {
|
|
/* Policy > Datacenters */
|
|
html.template-policy.template-list tr > :nth-child(2) {
|
|
display: none;
|
|
}
|
|
html.template-service.template-list tr > :nth-child(2) {
|
|
display: none;
|
|
}
|
|
}
|
|
@media #{$--lt-wide-table} {
|
|
/* hide actions on narrow screens, you can always click in do everything from there */
|
|
tr > .actions {
|
|
display: none;
|
|
}
|
|
html.template-intention.template-list tr > :nth-last-child(2) {
|
|
display: none;
|
|
}
|
|
html.template-service.template-list tr > :last-child {
|
|
display: none;
|
|
}
|
|
html.template-node.template-show #services tr > :last-child {
|
|
display: none;
|
|
}
|
|
html.template-node.template-show #lock-sessions tr > :not(:first-child):not(:last-child) {
|
|
display: none;
|
|
}
|
|
html.template-node.template-show #lock-sessions td:last-child {
|
|
padding: 0;
|
|
}
|
|
}
|