@coveord/plasma-mantine
Version:
A Plasma flavoured Mantine theme
75 lines (60 loc) • 1.49 kB
CSS
.card:hover:not([disabled]) {
@mixin light {
background-color: var(--mantine-color-default-hover);
}
}
.card {
--radio-card-outline-color: var(--mantine-color-default-border);
display: flex;
flex-flow: row nowrap;
align-items: flex-start;
gap: var(--mantine-spacing-sm);
padding: var(--mantine-spacing-sm);
border-radius: var(--mantine-radius-lg);
border-color: var(--radio-card-outline-color);
transition: border-color 150ms ease;
&[data-checked] {
--radio-card-outline-color: var(--mantine-primary-color-filled);
}
&[disabled],
&[readonly] {
--radio-card-outline-color: var(--mantine-color-default-border);
}
&[disabled] {
cursor: not-allowed;
.title,
.description {
color: var(--mantine-color-disabled-color);
}
}
&[readonly] {
pointer-events: none;
.indicator[data-checked] {
background-color: var(--mantine-color-default);
color: var(--coveo-color-text-readonly);
& > svg {
color: inherit;
}
}
}
}
.container {
gap: var(--mantine-spacing-xs);
}
.title {
line-height: 20px;
}
.title,
.description {
flex: 1;
overflow-wrap: anywhere;
}
.indicator {
cursor: pointer;
transition: border-color 150ms ease;
&,
&[data-disabled],
&[data-checked] {
border-color: var(--radio-card-outline-color);
}
}