Attributions
Spinner
The spinner is a CSS class designed to provide a visual indication of loading. It's flexible enough to be adapted for various sizes and themes, ensuring it fits seamlessly into different design contexts without being tied to a specific component structure.
Usage
Here is a basic example of how to use the spinner class:
<div class="monster-spinner"></div>Size
To adjust the spinner to your specific needs, you must explicitly set its width and height:
<div class="monster-spinner" style="width: 100px; height: 100px;"></div>Themes
The spinner can be customized with different themes to match your styling requirements. Below are examples of how to apply theme-specific classes to the spinner:
The themes are not only aesthetic but functional, designed to ensure visibility across different backgrounds and contexts:
Badges
Badges are used to highlight an item's status for quick recognition. They can be used to indicate the status of an item or to draw attention to an item.
Icons
| Icon | Class | Description |
| monster-icon-primary-1-info | Info icon | |
| monster-icon-primary-1-positiv | Positiv icon | |
| monster-icon-primary-1-negativ | Negativ icon | |
| monster-icon-primary-1-warning | Warning icon | |
| monster-icon-primary-1-neutral | Neutral icon | |
| monster-icon-primary-1-question | Question icon | |
| monster-icon-primary-1-plus | Plus icon | |
| monster-icon-primary-1-dash | Dash icon | |
| monster-icon-primary-1-gear | Gear icon | |
| monster-icon-primary-1-home | Home icon | |
| monster-icon-primary-1-counterclockwise | Counterclockwise icon | |
| monster-icon-secondary-1-info | Info icon | |
| monster-icon-secondary-1-positiv | Positiv icon | |
| monster-icon-secondary-1-negativ | Negativ icon | |
| monster-icon-secondary-1-warning | Warning icon | |
| monster-icon-secondary-1-neutral | Neutral icon | |
| monster-icon-secondary-1-question | Question icon | |
| monster-icon-secondary-1-plus | Plus icon | |
| monster-icon-secondary-1-dash | Dash icon | |
| monster-icon-secondary-1-gear | Gear icon | |
| monster-icon-secondary-1-home | Home icon | |
| monster-icon-secondary-1-counterclockwise | Counterclockwise icon | |
| monster-icon-tertiary-1-info | Info icon | |
| monster-icon-tertiary-1-positiv | Positiv icon | |
| monster-icon-tertiary-1-negativ | Negativ icon | |
| monster-icon-tertiary-1-warning | Warning icon | |
| monster-icon-tertiary-1-neutral | Neutral icon | |
| monster-icon-tertiary-1-question | Question icon | |
| monster-icon-tertiary-1-plus | Plus icon | |
| monster-icon-tertiary-1-dash | Dash icon | |
| monster-icon-tertiary-1-gear | Gear icon | |
| monster-icon-tertiary-1-home | Home icon | |
| monster-icon-tertiary-1-counterclockwise | Counterclockwise icon | |
| monster-icon-success-1 | Success icon | |
| monster-icon-success-2 | Success icon | |
| monster-icon-success-3 | Success icon | |
| monster-icon-success-4 | Success icon | |
| monster-icon-warning-1 | Warning icon | |
| monster-icon-warning-2 | Warning icon | |
| monster-icon-warning-3 | Warning icon | |
| monster-icon-warning-4 | Warning icon | |
| monster-icon-error-1 | Error icon | |
| monster-icon-error-2 | Error icon | |
| monster-icon-error-3 | Error icon | |
| monster-icon-error-4 | Error icon |
Usage
Use the following classes to display the icons:
<span class="monster-icon-primary-1-info"></span>This is an -Icon.
Create own icon
Use the following mixin to create your own icon:
@import "@schukai/monster/source/components/style/mixin/icon.pcss";
@mixin icon my-icon {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' " +
"width='16' height='16' fill='currentColor' class='bi bi-dash-circle' " +
"viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0" +
"1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M4 8a.5.5 0 0 1 " +
".5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/%3E%3C/svg%3E");
}