80 lines
1.5 KiB
SCSS
80 lines
1.5 KiB
SCSS
.wrapper {
|
|
--list-item-padding: 16px;
|
|
--list-item-padding-block: var(--list-item-padding);
|
|
--list-item-gap: 12px;
|
|
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
gap: var(--list-item-gap);
|
|
padding: var(--list-item-padding-block) var(--list-item-padding);
|
|
font-size: 15px;
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.main {
|
|
min-width: 0;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
.title {
|
|
font-weight: 500;
|
|
|
|
:any-link,
|
|
button {
|
|
padding: 0;
|
|
border: none;
|
|
color: inherit;
|
|
background: none;
|
|
font: inherit;
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: var(--clickable-area-spread, 0);
|
|
}
|
|
}
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 13px;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.sideContent {
|
|
display: flex;
|
|
gap: var(--list-item-gap);
|
|
align-self: stretch;
|
|
align-items: center;
|
|
margin-inline-start: auto;
|
|
|
|
&:has(button, a) {
|
|
// If the sideContent has interactive children, move it
|
|
// above the clickable area of the .title content
|
|
position: relative;
|
|
z-index: 1;
|
|
|
|
// Cover up the .title content's clickable area in the
|
|
// padding box around the sideContent
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset-block: calc(-1 * var(--list-item-padding-block));
|
|
inset-inline: calc(-1 * var(--list-item-padding));
|
|
z-index: -1;
|
|
}
|
|
}
|
|
|
|
// Improve vertical alignment of slotted icons
|
|
& > .icon {
|
|
vertical-align: middle;
|
|
}
|
|
}
|