@dialpad/dialtone-css
Version:
Dialpad's design system
49 lines (42 loc) • 1.35 kB
text/less
//
// DIALTONE 5 SHIM
// COMPONENTS: LIST GROUPS
//
// These are the list group definitions, which are used by classes or can be
// used within Vue components. For further documentation of these values,
// please visit https://dialtone.dialpad.com/components/list-groups
//
// ============================================================================
.d-list-group,
.d-list-group__item {
margin: 0;
padding: 0;
list-style: none;
}
.d-list-group--header,
.d-list-group--link {
display: block;
padding: var(--dt-space-300) var(--dt-space-550); // 4 24
}
.d-list-group--header {
font-weight: var(--dt-font-weight-bold);
font-size: var(--dt-font-size-100);
text-transform: uppercase;
}
.d-list-group--link {
color: var(--dt-color-foreground-secondary);
font-size: var(--dt-font-size-200);
text-decoration: none;
&:hover {
color: var(--dt-color-foreground-primary);
background-color: hsl(var(--dt-color-purple-400-hsl) ~' / ' 85%);
}
&-selected {
color: var(--dt-color-neutral-white);
background-color: var(--dt-color-purple-400);
&:hover {
color: var(--dt-color-neutral-white);
background-color: hsl(var(--dt-color-purple-400-h) var(--dt-color-purple-400-s) calc(var(--dt-color-purple-400-l) + 10%));
}
}
}