Variables
Bubble
snippyly-comment-bubble {
--snippyly-comment-bubble-container-gap: grey;
}
1
Select the Comment Bubble component
You can select the Comment Bubble component. Our CSS variables are set at the component level.
2
Modify a CSS variable
Set the variable to anything you want. We expose a set of variables so you can customize the component to better match your UI.
3
Check out the table below
Reference the table below to see what parts we expose. Alternatively, you can directly inspect the component HTML to see what parts are available.
| property | default value | description |
|---|---|---|
--velt-comment-bubble-container-gap | 0 | Sets the comment bubble container gap |
--velt-comment-bubble-count-icon-stroke-width | 2 | Sets the comment bubble count icon stroke width |
--velt-comment-bubble-count-container-height | 26px | Sets the comment bubble count container height |
--velt-comment-bubble-avatar-size | var(--velt-comment-bubble-count-container-height) | Sets the comment bubble avatar size |
--velt-comment-bubble-count-container-width | 32px | Sets the comment bubble count container width |
snippyly-comment-bubble {
--snippyly-comment-bubble-container-gap: grey;
}