consul/ui/packages/consul-ui/app/components/list-row/layout.scss

65 lines
1.6 KiB
SCSS
Raw Normal View History

/**
* Copyright (c) HashiCorp, Inc.
[COMPLIANCE] License changes (#18443) * Adding explicit MPL license for sub-package This directory and its subdirectories (packages) contain files licensed with the MPLv2 `LICENSE` file in this directory and are intentionally licensed separately from the BSL `LICENSE` file at the root of this repository. * Adding explicit MPL license for sub-package This directory and its subdirectories (packages) contain files licensed with the MPLv2 `LICENSE` file in this directory and are intentionally licensed separately from the BSL `LICENSE` file at the root of this repository. * Updating the license from MPL to Business Source License Going forward, this project will be licensed under the Business Source License v1.1. Please see our blog post for more details at <Blog URL>, FAQ at www.hashicorp.com/licensing-faq, and details of the license at www.hashicorp.com/bsl. * add missing license headers * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 --------- Co-authored-by: hashicorp-copywrite[bot] <110428419+hashicorp-copywrite[bot]@users.noreply.github.com>
2023-08-11 13:12:13 +00:00
* SPDX-License-Identifier: BUSL-1.1
*/
%list-row {
/* this can be reused by internal components */
/* for positioning if required */
--horizontal-padding: 12px;
--vertical-padding: 10px;
padding: var(--vertical-padding) 0;
/* whilst this isn't in the designs this makes our temporary rollover look better */
/* it doesn't happen on the right as we use a larger hit area with our */
/* meatball menu which would overlap this and the meatball is the most */
/* right hand 'action' button */
padding-left: var(--horizontal-padding);
/* once we have our scroll pane refresh we no longer need a padding for */
/* shadowing/rollover purposes so a lot of that ^ can go */
}
%list-row-detail,
%list-row-header-icon {
margin-right: 6px;
}
%list-row-header dt {
display: none;
}
%list-row-header dd::before {
font-size: 0.9em;
}
%list-row-detail,
%list-row-header {
display: flex;
flex-wrap: nowrap;
overflow-x: hidden;
}
%list-row-header *,
%list-row-detail * {
white-space: nowrap;
flex-wrap: nowrap;
}
%list-row-detail > span {
margin-right: 18px;
}
%list-row-200 {
@extend %list-row;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
%list-row-200 .detail {
grid-row-start: header !important;
grid-row-end: detail !important;
align-self: center !important;
padding: 5px 0;
}
%list-row-200 .popover-menu > [type='checkbox'] + label {
padding: 0;
}
%list-row-200 .popover-menu > [type='checkbox'] + label + div:not(.above) {
top: 30px;
}
%list-row-200 dd {
@extend %body-100-regular;
}