@@ -109,17 +109,14 @@ ToastContainer {
109
109
ToastItem {
110
110
width: var(--toastWidth, 16rem);
111
111
height: var(--toastHeight, 3.5rem);
112
- margin-bottom : var(--toastMarginBottom , 0.5rem);
113
- background: var(--toastBackground, rgba(74,85,104 ,0.98 ));
112
+ margin: var(--toastMargin , 0 0 0 .5rem 0 );
113
+ background: var(--toastBackground, rgba(66,66,66 ,0.9 ));
114
114
color: var(--toastColor, #FFF);
115
- }
116
-
117
- ToastItemMessage {
118
- font-size: var(--toastFontSize, 1rem);
115
+ font: var(--toastFont);
119
116
}
120
117
121
118
ToastProgressBar {
122
- background: var(--toastProgressBackground, rgba(66,153,225 ,0.98 ));
119
+ background: var(--toastProgressBackground, rgba(33,150,243 ,0.75 ));
123
120
}
124
121
` ` `
125
122
@@ -136,17 +133,20 @@ So to apply your custom theme globally, do something like:
136
133
</style>
137
134
` ` `
138
135
139
- To apply overrides to a particular Toast Item, emit the toast with options:
136
+ To apply CSS overrides to a particular Toast Item, emit the toast with options:
140
137
141
138
` ` ` js
142
139
toast.push('Yo!', {
143
140
theme: {
144
141
'--toastBackground': 'cyan',
145
- '--toastColor': 'black'
142
+ '--toastColor': 'black',
143
+ ...
146
144
}
147
145
})
148
146
` ` `
149
147
148
+ where ` theme` is an object containing one or more CSS var key/ value pairs.
149
+
150
150
## Options
151
151
152
152
` ` ` js
@@ -170,8 +170,11 @@ toast.pop(id)
170
170
toast.set(id, { object })
171
171
` ` `
172
172
173
+ ## License
174
+
175
+ ISC
176
+
173
177
## To- do
174
178
175
179
- [ ] Definitely improve the docs
176
180
- [ ] Create some option presets
177
-
0 commit comments