CSS ComponentThe latest version of this package is: 17.0.30-alpha.8, Opens in new window
Toasts display brief, temporary notifications. They are meant to be noticed without disrupting a user's experience or requiring an action to be taken.
This component provides .css
, .styl
, .less
and .scss
-files.
To be able to install this component, please refer to the Project Setup documentation.
$ npm i @ids-core/toast@17.0.30-alpha.8
Table of Contents
Edit this section, Opens in new windowUsage
<div class="if toast [info]" data-text="Message">Message</div>
<div class="if toast info has-icon" data-text="Message">Message</div>
<div class="if toast warning" data-text="Message">Message</div>
<div class="if toast warning has-icon" data-text="Message">Message</div>
<div class="if toast success" data-text="Message">Message</div>
<div class="if toast success has-icon" data-text="Message">Message</div>
<div class="if toast error" data-text="Message">Message</div>
<div class="if toast error has-icon" data-text="Message">Message</div>
Tokens
Toast tokens
Name | Value | Is aliased in |
---|---|---|
$ids-toast-action-border |
none |
|
$ids-toast-action-background-color |
transparent |
|
$ids-toast-action-margin-left |
auto |
|
$ids-toast-action-padding |
0 0.5rem |
|
$ids-toast-action-border-radius |
0 |
|
$ids-toast-action-text-decoration |
underline |
|
$ids-toast-action-position |
relative |
|
$ids-toast-action-after-width |
auto |
|
$ids-toast-action-after-min-width |
3rem |
|
$ids-toast-action-after-height |
3rem |
|
$ids-toast-action-after-background |
transparent |
|
$ids-toast-action-after-position |
absolute |
|
$ids-toast-action-after-top |
50% |
|
$ids-toast-action-after-left |
50% |
|
$ids-toast-action-after-transform |
translate(-50%, -50%) |
|
$ids-toast-close-margin |
0 0 0 0.5rem |
|
$ids-toast-close-padding |
0 |
|
$ids-toast-close-height |
1.25rem |
|
$ids-toast-close-width |
1.25rem |
|
$ids-toast-close-border |
none |
|
$ids-toast-close-position |
relative |
|
$ids-toast-close-background-color |
transparent |
|
$ids-toast-close-background-image |
url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 32 32%27%3E%3Ctitle%3Ee remove%3C/title%3E%3Cg class=%27nc-icon-wrapper%27 stroke-linecap=%27square%27 stroke-linejoin=%27miter%27 stroke-width=%272.5%27 fill=%27%23331e11%27 stroke=%27%23331e11%27%3E%3Cline fill=%27none%27 stroke=%27%23331e11%27 stroke-miterlimit=%2710%27 x1=%2727%27 y1=%275%27 x2=%275%27 y2=%2727%27/%3E%3Cline fill=%27none%27 stroke=%27%23331e11%27 stroke-miterlimit=%2710%27 x1=%2727%27 y1=%2727%27 x2=%275%27 y2=%275%27/%3E%3C/g%3E%3C/svg%3E') |
|
$ids-toast-close-background-repeat |
no-repeat |
|
$ids-toast-close-background-position |
center center |
|
$ids-toast-close-background-size |
1rem 1rem |
|
$ids-toast-close-after-width |
3rem |
|
$ids-toast-close-after-height |
3rem |
|
$ids-toast-close-after-position |
absolute |
|
$ids-toast-close-after-top |
50% |
|
$ids-toast-close-after-left |
50% |
|
$ids-toast-close-after-transform |
translate(-50%, -50%) |
|
$ids-toast-margin |
0 |
|
$ids-toast-max-width |
80vw |
|
$ids-toast-min-width |
15rem |
|
$ids-toast-width |
100% |
|
$ids-toast-opacity |
0 |
|
$ids-toast-flex-grow |
0 |
|
$ids-toast-flex-shrink |
0 |
|
$ids-toast-height |
48px |
|
$ids-toast-position |
fixed |
|
$ids-toast-bottom |
-4rem |
|
$ids-toast-z-index |
500 |
|
$ids-toast-transition |
bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1) |
|
$ids-toast-background-color |
transparent |
|
$ids-toast-color-normal |
rgb(51, 30, 17) |
|
$ids-toast-color-inverse |
rgb(250, 249, 247) |
|
$ids-toast-border-radius |
0.375rem |
|
$ids-toast-box-shadow |
0 8px 4px -2px rgba(110,98,94, 0.08), 0 16px 24px rgba(110,98,94, 0.20) |
|
$ids-toast-padding |
8px 24px |
|
$ids-toast-font-size |
1rem |
|
$ids-toast-line-height |
1.5rem |
|
$ids-toast-left |
50% |
|
$ids-toast-transform |
translateX(-50%) |
|
$ids-toast-align-items |
center |
|
$ids-toast-after-position |
absolute |
|
$ids-toast-after-left |
0 |
|
$ids-toast-after-right |
0 |
|
$ids-toast-after-bottom |
0 |
|
$ids-toast-after-top |
0 |
|
$ids-toast-after-z-index |
-2 |
|
$ids-toast-after-background-color |
rgb(250, 249, 247) |
|
$ids-toast-before-position |
absolute |
|
$ids-toast-before-left |
0 |
|
$ids-toast-before-right |
0 |
|
$ids-toast-before-bottom |
0 |
|
$ids-toast-before-top |
0 |
|
$ids-toast-before-z-index |
-1 |
|
$ids-toast-before-opacity |
1 |
|
$ids-toast-before-background-color |
rgb(250, 249, 247) |
|
$ids-toast-is-open-bottom |
4rem |
|
$ids-toast-is-open-opacity |
1 |
|
$ids-toast-emphasized-opacity |
1 |
|
$ids-toast-emphasized-background-color |
rgb(51, 30, 17) |
|
$ids-toast-emphasized-close-background-image |
url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 32 32%27%3E%3Ctitle%3Ee remove%3C/title%3E%3Cg class=%27nc-icon-wrapper%27 stroke-linecap=%27square%27 stroke-linejoin=%27miter%27 stroke-width=%272.5%27 fill=%27%23FAF9F7%27 stroke=%27%23FAF9F7%27%3E%3Cline fill=%27none%27 stroke=%27%23FAF9F7%27 stroke-miterlimit=%2710%27 x1=%2727%27 y1=%275%27 x2=%275%27 y2=%2727%27/%3E%3Cline fill=%27none%27 stroke=%27%23FAF9F7%27 stroke-miterlimit=%2710%27 x1=%2727%27 y1=%2727%27 x2=%275%27 y2=%275%27/%3E%3C/g%3E%3C/svg%3E') |
|
$ids-toast-info-opacity |
0.5 |
|
$ids-toast-info-background-color |
rgb(76, 176, 211) |
|
$ids-toast-success-opacity |
0.5 |
|
$ids-toast-success-background-color |
rgb(135, 199, 186) |
|
$ids-toast-warning-opacity |
0.5 |
|
$ids-toast-warning-background-color |
rgb(252, 199, 79) |
|
$ids-toast-error-opacity |
0.5 |
|
$ids-toast-error-background-color |
rgb(255, 133, 105) |
Changelog
Change Log
All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
16.0.0 (2023-01-10)
โ BREAKING CHANGES
-
The info card component now has rounded corners - 12px
-
toast no longer has icons and default variation changed
-
Toast component now has rounded corners - 6px.
-
Merged PR 101608: feat(info-card): VID update (fc3d421), closes #686982 #686982
-
Merged PR 101683: feat(toast): made VID updates (d9abc7c), closes #705744 #705744
-
Merged PR 100951: feat(toast): style update for toast (1f2f65c), closes #686989 #686989
14.22.2 (2022-05-03)
Miscellaneous chores
- package locks: update package locks (813eac7)
14.20.1 (2022-04-19)
Miscellaneous chores
- changelog: regenerate all CHANGELOG.md files (64ab385) , closes #586342
- changelog: regenerate all changelogs after updating changelog generation (70789c9) , closes #587270
14.18.3 (2022-04-13)
Bug Fixes
- changelog: generate new CHANGELOG.md files for root and
packages (349fda4)
,
closes #586063
. We regenerate the files to include all relevant commits and to use
conventional-commits
at 100%
14.16.0 (2022-04-07)
Bug Fixes
14.9.0 (2022-03-03)
Miscellaneous chores
- ๐ค Bootstrap (6822f5b)
14.8.1 (2022-02-23)
Bug Fixes
reinstall (d425056)
bootstrap (9a713df)
merge (2b1c5f1)
reinstall (5221600)
reinstall (147df55)
reinstall (afce1f2)
reinstall (67f3140)
-
Add changelog.md to files (3338314)
Reinstall (a2abf51)
14.2.2 (2021-12-10)
Code Refactoring
-
๐ก Change focus styles, remove whatinput (75fd31b) , closes #505205
-
rebuild and reinstall (f9fb687)
reinstall (885c74b)
-
fix changelogs manually (b1232b4)
reinstall (545a069)
reinstall (e149c2c)
13.12.3 (2021-11-09)
โ BREAKING CHANGES
- ๐งจ The scope for If Design System npm packages has now changed from
@if-design-system
to@ids-core
. We have also renamed the repository fromif-design-system
toids-core
- ๐งจ Util is now renamed to Utils
- ๐งจ We have now changed the navigation structure for the documentation site. Please update any saved links!
- ๐งจ Navigation structure has now changed. Please see release notes!
Documentation Updates
-
โ๏ธ Make variations tables more condensed (4344a3a)
-
โ๏ธ Move position of the quick links (5cb0897)
-
โ๏ธ Remove unneeded margins for shortcuts (36c7e8d)
-
โ๏ธ Separate out CSS documentation (1a81eb8) , closes #467386
-
โ๏ธ Update links (82bfa1a)
-
โ๏ธ Update links and change navigation structure (0bfd27d) , closes #490579
-
โ๏ธ Use correct js references in examples/dev/demo (f41c249)
Code Refactoring
-
๐ก Reduce spacing tokens, use correct size tokens (97aa461)
-
๐ก Rename scope and repository (3ea5423)
-
๐ก Use new navigation structure for documentation (415aee5) , closes #490579
-
another change in the structure (38a0d2e)
Miscellaneous chores
bootstrap (6fc1ed8)
reinstall (da80dba)
13.11.0 (2021-10-19)
Features
- ๐ธ Input field hot reload (eac76b7)
13.9.2 (2021-09-30)
Bug Fixes
- ๐ Complete the pseudo-element fix (1dcee2c)
13.7.0 (2021-09-22)
Documentation Updates
- โ๏ธ Update linking layout and naming (15c383b)
13.6.3 (2021-09-17)
Bug Fixes
13.6.0 (2021-09-08)
Documentation Updates
-
Use default shortcut listing for demo links (a746602)
bootstrap (d23e139)
- ๐ค Use correct order for diff (cc6a4fd)
12.14.1 (2021-08-12)
Miscellaneous chores
12.13.1 (2021-08-11)
Bug Fixes
-
๐ Whitelist docs dir for npm packaging (1a5cfd0) , closes #457621
-
๐ค Remove .gitignore, use npm package.json files instead, ignore zip files for npm pack (49f0269) , closes #412081 . This will whitelist files to be used in "npm pack"