Widget comes with pre-existing styling but can be customized by applying custom CSS properties to its different HTML elements.
The widget's custom class selectors are listed below. Note that all custom classes must be nested within the .sr-bb.sr-wl selector class.
This ensures that the custom styles only apply to that widget and not to other elements on the page.
Trigger Button
The main floating button that opens and closes the BET 3-in-1 menu.
| Class | Customization options |
|---|---|
| srct-3in1-trigger | background-color, border-radius, box-shadow, color |
Container
The wrapper that controls the position of the expanded BET 3-in-1 menu.
| Class | Customization options |
|---|---|
| srct-3in1-container | left, right, bottom |
Product Buttons
The pill buttons displayed when the BET 3-in-1 is expanded. Use the base class to style all product buttons at once, or target individual products using their modifier classes.
| Class | Customization options |
|---|---|
| srct-3in1-productbutton | background-color, color, border-radius, box-shadow |
| srct-3in1-productbutton--virtualstadium | background-color, color, border-radius, box-shadow |
| srct-3in1-productbutton--betconcierge | background-color, color, border-radius, box-shadow |
| srct-3in1-productbutton--statshub | background-color, color, border-radius, box-shadow |
Product Button Elements
The inner elements of each product button.
| Class | Customization options |
|---|---|
| srct-3in1-productbutton__icon | color |
| srct-3in1-productbutton__title | font-size, color, font-weight |
| srct-3in1-productbutton__description | font-size, color, font-weight |
Product Overlay
The overlay panel that displays the selected product. Includes backdrop, header, and close controls.
| Class | Customization options |
|---|---|
| srct-3in1-productoverlay__backdrop | background-color, left, right, bottom |
| srct-3in1-productoverlay__header | background-color, border-bottom |
| srct-3in1-productoverlay__title | font-size, color, font-weight |
| srct-3in1-productoverlay__close | color, background-color, stroke |
| srct-3in1-productoverlay__content | border-radius, box-shadow |