Zhihe LiandZedLi
43c9389b69
* feat: 🎸 Add grant templates for roles * test: 💍 Add a11y ignore * fix: 🐛 Add selected text * test: 💍 Update tests * refactor: 💡 Update manage scope styles to be consistent as well * Add missing copyright headers --------- Co-authored-by: ZedLi <5783847+ZedLi@users.noreply.github.com>
124 lines
2.2 KiB
SCSS
124 lines
2.2 KiB
SCSS
/**
|
|
* Copyright IBM Corp. 2021, 2026
|
|
* SPDX-License-Identifier: BUSL-1.1
|
|
*/
|
|
|
|
@use 'rose/app/styles/rose/variables/sizing' as sizing;
|
|
@use 'sass:meta';
|
|
|
|
.filters-applied {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
|
|
.filter-tag {
|
|
max-width: 200px;
|
|
|
|
.hds-tag__text {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Search & Filtering
|
|
.search-filtering {
|
|
.hds-application-state {
|
|
&.hds-application-state--is-auto-centered {
|
|
margin-top: 3rem;
|
|
}
|
|
}
|
|
|
|
.selected-items-text {
|
|
display: flex;
|
|
justify-content: end;
|
|
align-items: center;
|
|
height: 1rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
> div,
|
|
table {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.hds-segmented-group {
|
|
.hds-dropdown-toggle-button__text {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
// Remove margin if the segmented group is followed by the selected items text
|
|
&:has(+ .selected-items-text) {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.search-filtering-toolbar {
|
|
display: flex;
|
|
|
|
> :last-child {
|
|
margin-left: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Flyout with table
|
|
.flyout-with-table {
|
|
.copyable-content a,
|
|
button {
|
|
color: var(--token-color-foreground-primary);
|
|
}
|
|
}
|
|
|
|
.toolbar-refresher {
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: 1rem;
|
|
gap: 1rem;
|
|
|
|
> .hds-text {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
// Utility classes
|
|
.container-inputs__margin-bottom {
|
|
input:not(:last-child) {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
}
|
|
|
|
$margin-directions: (
|
|
'': 'margin',
|
|
'-top': 'margin-top',
|
|
'-right': 'margin-right',
|
|
'-bottom': 'margin-bottom',
|
|
'-left': 'margin-left',
|
|
'-x': (
|
|
'margin-left',
|
|
'margin-right',
|
|
),
|
|
'-y': (
|
|
'margin-top',
|
|
'margin-bottom',
|
|
),
|
|
);
|
|
|
|
// Generate margin utility classes with sizes and directions
|
|
@each $size-name, $size-coefficient in sizing.$size-coefficients {
|
|
@each $direction-suffix, $properties in $margin-directions {
|
|
.margin#{$direction-suffix}-#{$size-name} {
|
|
@if meta.type-of($properties) == 'list' {
|
|
@each $property in $properties {
|
|
#{$property}: #{sizing.rems($size-name)};
|
|
}
|
|
} @else {
|
|
#{$properties}: #{sizing.rems($size-name)};
|
|
}
|
|
}
|
|
}
|
|
}
|