A SUIT CSS component that provides a structural UI alert template to be extended with modifiers.
Read more about SUIT CSS's design principles.
Alert
- [core] The core alert component
Alert--info
- Applies info colours to the alertAlert--success
- Applies success colours to the alertAlert--danger
- Applies danger colours to the alertAlert--warning
- Applies warning colours to the alert
-
--Alert-borderColor
-
--Alert-borderWidth
-
--Alert-padding
-
--Alert--info-backgroundColor
-
--Alert--info-borderColor
-
--Alert--info-textColor
-
--Alert--success-backgroundColor
-
--Alert--success-borderColor
-
--Alert--success-textColor
-
--Alert--danger-backgroundColor
-
--Alert--danger-borderColor
-
--Alert--danger-textColor
-
--Alert--warning-backgroundColor
-
--Alert--warning-borderColor
-
--Alert--warning-textColor
Examples:
<div class="Alert">
This is a default alert.
</div>
<div class="Alert Alert--success">
This is a success alert.
</div>
The CSS is focused on common structural requirements for alerts. You can extend it with application-specific theme styles in your app.
yarn install
To generate a build:
yarn build
To lint code with postcss-bem-linter and stylelint
yarn lint
To generate the testing build.
yarn build-test
To watch the files for making changes to test:
yarn watch
Basic visual tests are in test/index.html
.
- Google Chrome
- Firefox
- Opera
- Safari
- Internet Explorer 9+