@radix-ui/themes
Version:
[](https://radix-ui.com/themes)
82 lines (69 loc) • 2.57 kB
CSS
.rt-CalloutRoot {
box-sizing: border-box;
display: grid;
align-items: flex-start;
justify-content: flex-start;
text-align: left;
color: var(--accent-a11);
&:where(.rt-high-contrast) {
color: var(--accent-12);
}
}
.rt-CalloutIcon {
display: flex;
align-items: center;
grid-column-start: -2;
height: var(--callout-icon-height);
}
/* Anything that’s not an icon goes to the right of the icon */
.rt-CalloutRoot > :where(:not(.rt-CalloutIcon)) {
grid-column-start: -1;
}
/***************************************************************************************************
* *
* SIZES *
* *
***************************************************************************************************/
@breakpoints {
.rt-CalloutRoot {
&:where(.rt-r-size-1) {
row-gap: var(--space-2);
column-gap: var(--space-2);
padding: var(--space-3);
border-radius: var(--radius-3);
--callout-icon-height: var(--line-height-2);
}
&:where(.rt-r-size-2) {
row-gap: var(--space-2);
column-gap: var(--space-3);
padding: var(--space-4);
border-radius: var(--radius-4);
--callout-icon-height: var(--line-height-2);
}
&:where(.rt-r-size-3) {
row-gap: var(--space-3);
column-gap: var(--space-4);
padding: var(--space-5);
border-radius: var(--radius-5);
--callout-icon-height: var(--line-height-3);
}
}
}
/***************************************************************************************************
* *
* VARIANTS *
* *
***************************************************************************************************/
/* soft */
.rt-CalloutRoot:where(.rt-variant-soft) {
background-color: var(--accent-a3);
}
/* surface */
.rt-CalloutRoot:where(.rt-variant-surface) {
box-shadow: inset 0 0 0 1px var(--accent-a6);
background-color: var(--accent-a2);
}
/* outline */
.rt-CalloutRoot:where(.rt-variant-outline) {
box-shadow: inset 0 0 0 1px var(--accent-a7);
}