@snack-uikit/toaster 0.11.22 → 0.11.23-preview-a84747fe.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +1 -39
  2. package/dist/cjs/components/ToasterContainer/styles.module.css +28 -22
  3. package/dist/esm/components/ToasterContainer/styles.module.css +28 -22
  4. package/package.json +3 -3
  5. package/src/components/ToasterContainer/styles.module.scss +115 -117
package/README.md CHANGED
@@ -203,31 +203,10 @@ toaster.upload.dismiss(uploadToastId);
203
203
  ### Props
204
204
  | name | type | default value | description |
205
205
  |------|------|---------------|-------------|
206
- | title* | `string` | - | |
207
- | closeToast | `() => void` | - | |
208
- | toastProps | `ToastProps` | - | |
209
- | data | `unknown` | - | |
210
- | description | `string` | - | |
211
- | appearance | enum ToastSystemEventAppearance: `"neutral"`, `"error"`, `"errorCritical"`, `"warning"`, `"success"` | neutral | |
212
- | link | `ToastSystemEventLink` | - | |
213
- | progressBar | `boolean` | true | |
214
- | closable | `boolean` | true | |
215
- | className | `string` | - | CSS-класс |
216
- | onCloseClick | `(e: MouseEvent<HTMLButtonElement, MouseEvent>, close?: () => void) => void` | - | |
217
- | action | `ButtonActionProps[]` | - | |
218
- | loading | `never` | - | |
219
206
  ## ToastUserAction
220
207
  ### Props
221
208
  | name | type | default value | description |
222
209
  |------|------|---------------|-------------|
223
- | label* | `string` | - | |
224
- | closeToast | `() => void` | - | |
225
- | toastProps | `ToastProps` | - | |
226
- | data | `unknown` | - | |
227
- | appearance | enum ToastUserActionAppearance: `"neutral"`, `"error"`, `"warning"`, `"success"` | neutral | |
228
- | link | `ToastUserActionLink` | - | |
229
- | className | `string` | - | CSS-класс |
230
- | loading | `boolean` | - | |
231
210
  ## ToasterContainer
232
211
  ### Props
233
212
  | name | type | default value | description |
@@ -236,28 +215,11 @@ toaster.upload.dismiss(uploadToastId);
236
215
  | limit | `number` | 5 | |
237
216
  | containerId | `Id` | - | |
238
217
  | displayCloseAllButton | `boolean` | - | |
239
- | type | enum ToasterType: `"system-event"`, `"user-action"`, `"upload"` | system-event | |
218
+ | type | `ValueOf<{ readonly SystemEvent: "system-event"; readonly UserAction: "user-action"; readonly Upload: "upload"; }>` | system-event | |
240
219
  ## ToastUpload
241
220
  ### Props
242
221
  | name | type | default value | description |
243
222
  |------|------|---------------|-------------|
244
- | generalActions* | `Omit<UploadActions, "onCancel">` | - | Экшены для управления загрузкой |
245
- | files* | `UploadItem[]` | - | Загружаемые элементы |
246
- | progress* | `{ current: number; total: number; }` | - | Общий прогресс загрузки |
247
- | description* | `string` | - | Описание статуса загрузки |
248
- | status* | enum ToastUploadStatus: `"error"`, `"loading"`, `"pause"`, `"uploaded"`, `"errorUploaded"` | - | Общий статус загрузки |
249
- | closeToast | `() => void` | - | |
250
- | toastProps | `ToastProps` | - | |
251
- | data | `unknown` | - | |
252
- | title | `string` | - | Заголовок тостера |
253
- | onCloseClick | `(e: MouseEvent<HTMLButtonElement, MouseEvent>, close?: () => void) => void` | - | Закрыть тостер |
254
- | closable | `boolean` | - | Показывать кнопку закрытия тостера |
255
- | className | `string` | - | CSS-класс контейнера |
256
- | collapsed | `boolean` | - | Тостер свернут/развернут |
257
- | onCollapsed | `(collapsed: boolean) => void` | - | Развернуть/свернуть тостер |
258
- | cancelButton | `ButtonTextNeutralProps` | - | Отмена всей загрузки |
259
- | draggable | `boolean` | - | Перемещение тостера |
260
- | draggableBounds | `string \| false \| DraggableBounds` | - | Ограничения перемещения тостера |
261
223
 
262
224
 
263
225
  [//]: DOCUMENTATION_SECTION_END
package/dist/cjs/components/ToasterContainer/styles.module.css CHANGED
@@ -64,12 +64,12 @@
64
64
  max-width:calc(100vw - 2 * var(--space-toaster-toast-system-event-container-padding, 12px));
65
65
  }
66
66
  }
67
- :global .osThemeSnack.Toastify__toast-container{
67
+ :global(.osThemeSnack.Toastify__toast-container){
68
68
  position:fixed;
69
69
  box-sizing:border-box;
70
70
  padding:0;
71
71
  }
72
- :global .osThemeSnack.Toastify__toast-container .Toastify__toast{
72
+ :global(.osThemeSnack.Toastify__toast-container) .Toastify__toast{
73
73
  --y:0;
74
74
  touch-action:none;
75
75
  cursor:default;
@@ -86,15 +86,15 @@
86
86
  border-radius:unset;
87
87
  box-shadow:none;
88
88
  }
89
- :global .osThemeSnack.Toastify__toast-container .Toastify__toast-body{
89
+ :global(.osThemeSnack.Toastify__toast-container) .Toastify__toast-body{
90
90
  max-width:100%;
91
91
  margin:0;
92
92
  padding:0;
93
93
  }
94
- :global .osThemeSnack.Toastify__toast-container .Toastify__toast-body > div{
94
+ :global(.osThemeSnack.Toastify__toast-container) .Toastify__toast-body > div{
95
95
  max-width:100%;
96
96
  }
97
- :global .osThemeSnack.Toastify__toast-container .container-user-action{
97
+ :global(.osThemeSnack.Toastify__toast-container) .container-user-action{
98
98
  padding-bottom:var(--space-toaster-toast-user-action-padding-bottom, 8px);
99
99
  gap:var(--space-toaster-toast-user-action-gap, 8px);
100
100
  display:flex;
@@ -103,41 +103,42 @@
103
103
  width:-moz-fit-content;
104
104
  width:fit-content;
105
105
  }
106
- :global .osThemeSnack.Toastify__toast-container .Toastify--animate{
106
+ :global(.osThemeSnack.Toastify__toast-container) .Toastify--animate{
107
107
  animation-duration:0.5s;
108
108
  animation-fill-mode:both;
109
109
  }
110
- :global .osThemeSnack.Toastify__toast-container .Toastify__close-button{
110
+ :global(.osThemeSnack.Toastify__toast-container) .Toastify__close-button{
111
111
  cursor:pointer;
112
112
  padding:0;
113
113
  border:none;
114
114
  outline:none;
115
115
  }
116
- :global .osThemeSnack.Toastify__toast-container .Toastify__toast-container{
116
+ :global(.osThemeSnack.Toastify__toast-container) .Toastify__toast-container{
117
117
  margin:0;
118
118
  padding:0;
119
119
  }
120
- :global .osThemeSnack.Toastify__toast-container .Toastify__progress-bar{
120
+ :global(.osThemeSnack.Toastify__toast-container) .Toastify__progress-bar{
121
121
  background:transparent;
122
122
  }
123
- :global .osThemeSnack.Toastify__toast-container .Toastify__progress-bar--animated{
123
+ :global(.osThemeSnack.Toastify__toast-container) .Toastify__progress-bar--animated{
124
124
  animation:osSnackTheme__toast__trackProgress linear 1 forwards;
125
125
  }
126
- :global .osThemeSnack.Toastify__toast-container .Toastify__bounce-enter--bottom-right{
126
+ :global(.osThemeSnack.Toastify__toast-container) .Toastify__bounce-enter--bottom-right{
127
127
  animation-name:osSnackTheme__toast__bounceInRight;
128
128
  animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);
129
129
  }
130
- :global .osThemeSnack.Toastify__toast-container .Toastify__bounce-enter--bottom-center{
130
+ :global(.osThemeSnack.Toastify__toast-container) .Toastify__bounce-enter--bottom-center{
131
131
  animation-name:osSnackTheme__toast__bounceInUp;
132
132
  animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);
133
133
  }
134
- :global .osThemeSnack.Toastify__toast-container .Toastify__bounce-exit--bottom-right{
134
+ :global(.osThemeSnack.Toastify__toast-container) .Toastify__bounce-exit--bottom-right{
135
135
  animation-name:osSnackTheme__toast__bounceOutRight;
136
136
  }
137
- :global .osThemeSnack.Toastify__toast-container .Toastify__bounce-exit--bottom-center{
137
+ :global(.osThemeSnack.Toastify__toast-container) .Toastify__bounce-exit--bottom-center{
138
138
  animation-name:osSnackTheme__toast__bounceOutDown;
139
139
  }
140
- :global .osThemeSnack.Toastify__toast-container.osThemeSnack__toast-container__system-event{
140
+
141
+ :global(.osThemeSnack.Toastify__toast-container.osThemeSnack__toast-container__system-event){
141
142
  gap:var(--space-toaster-toast-system-event-gap, 8px);
142
143
  padding:var(--space-toaster-toast-system-event-padding, 8px);
143
144
  width:var(--size-toaster-toast-system-event-container, 320px);
@@ -145,7 +146,8 @@
145
146
  flex-direction:column;
146
147
  max-width:calc(100vw - 2 * var(--space-toaster-toast-system-event-container-padding, 12px));
147
148
  }
148
- :global .osThemeSnack.Toastify__toast-container.osThemeSnack__toast-container__user-action{
149
+
150
+ :global(.osThemeSnack.Toastify__toast-container.osThemeSnack__toast-container__user-action){
149
151
  padding-bottom:var(--space-toaster-toast-user-action-padding-bottom, 8px);
150
152
  gap:var(--space-toaster-toast-user-action-gap, 8px);
151
153
  display:flex;
@@ -154,7 +156,8 @@
154
156
  width:-moz-fit-content;
155
157
  width:fit-content;
156
158
  }
157
- :global .osThemeSnack.Toastify__toast-container.osThemeSnack__toast-container__upload{
159
+
160
+ :global(.osThemeSnack.Toastify__toast-container.osThemeSnack__toast-container__upload){
158
161
  pointer-events:none;
159
162
  z-index:1;
160
163
  top:var(--space-toaster-toast-system-event-container-padding, 12px);
@@ -164,28 +167,31 @@
164
167
  display:flex;
165
168
  flex-direction:column;
166
169
  }
167
- :global .osThemeSnack.Toastify__toast-container.osThemeSnack__toast-container__upload > div{
170
+ :global(.osThemeSnack.Toastify__toast-container.osThemeSnack__toast-container__upload) > div{
168
171
  display:flex;
169
172
  align-items:flex-end;
170
173
  justify-content:flex-start;
171
174
  width:100%;
172
175
  height:100%;
173
176
  }
174
- :global .osThemeSnack.Toastify__toast-container--bottom-right{
177
+
178
+ :global(.osThemeSnack.Toastify__toast-container--bottom-right){
175
179
  right:0;
176
180
  bottom:0;
177
181
  }
178
- :global .osThemeSnack.Toastify__toast-container--bottom-center{
182
+
183
+ :global(.osThemeSnack.Toastify__toast-container--bottom-center){
179
184
  bottom:0;
180
185
  left:50%;
181
186
  transform:translateX(-50%);
182
187
  }
188
+
183
189
  @media only screen and (max-width: 480px){
184
- :global .osThemeSnack.Toastify__toast-container--bottom-right{
190
+ :global(.osThemeSnack.Toastify__toast-container--bottom-right){
185
191
  right:0;
186
192
  bottom:0;
187
193
  }
188
- :global .osThemeSnack.Toastify__toast-container--bottom-center{
194
+ :global(.osThemeSnack.Toastify__toast-container--bottom-center){
189
195
  bottom:0;
190
196
  left:50%;
191
197
  transform:translateX(-50%);
package/dist/esm/components/ToasterContainer/styles.module.css CHANGED
@@ -64,12 +64,12 @@
64
64
  max-width:calc(100vw - 2 * var(--space-toaster-toast-system-event-container-padding, 12px));
65
65
  }
66
66
  }
67
- :global .osThemeSnack.Toastify__toast-container{
67
+ :global(.osThemeSnack.Toastify__toast-container){
68
68
  position:fixed;
69
69
  box-sizing:border-box;
70
70
  padding:0;
71
71
  }
72
- :global .osThemeSnack.Toastify__toast-container .Toastify__toast{
72
+ :global(.osThemeSnack.Toastify__toast-container) .Toastify__toast{
73
73
  --y:0;
74
74
  touch-action:none;
75
75
  cursor:default;
@@ -86,15 +86,15 @@
86
86
  border-radius:unset;
87
87
  box-shadow:none;
88
88
  }
89
- :global .osThemeSnack.Toastify__toast-container .Toastify__toast-body{
89
+ :global(.osThemeSnack.Toastify__toast-container) .Toastify__toast-body{
90
90
  max-width:100%;
91
91
  margin:0;
92
92
  padding:0;
93
93
  }
94
- :global .osThemeSnack.Toastify__toast-container .Toastify__toast-body > div{
94
+ :global(.osThemeSnack.Toastify__toast-container) .Toastify__toast-body > div{
95
95
  max-width:100%;
96
96
  }
97
- :global .osThemeSnack.Toastify__toast-container .container-user-action{
97
+ :global(.osThemeSnack.Toastify__toast-container) .container-user-action{
98
98
  padding-bottom:var(--space-toaster-toast-user-action-padding-bottom, 8px);
99
99
  gap:var(--space-toaster-toast-user-action-gap, 8px);
100
100
  display:flex;
@@ -103,41 +103,42 @@
103
103
  width:-moz-fit-content;
104
104
  width:fit-content;
105
105
  }
106
- :global .osThemeSnack.Toastify__toast-container .Toastify--animate{
106
+ :global(.osThemeSnack.Toastify__toast-container) .Toastify--animate{
107
107
  animation-duration:0.5s;
108
108
  animation-fill-mode:both;
109
109
  }
110
- :global .osThemeSnack.Toastify__toast-container .Toastify__close-button{
110
+ :global(.osThemeSnack.Toastify__toast-container) .Toastify__close-button{
111
111
  cursor:pointer;
112
112
  padding:0;
113
113
  border:none;
114
114
  outline:none;
115
115
  }
116
- :global .osThemeSnack.Toastify__toast-container .Toastify__toast-container{
116
+ :global(.osThemeSnack.Toastify__toast-container) .Toastify__toast-container{
117
117
  margin:0;
118
118
  padding:0;
119
119
  }
120
- :global .osThemeSnack.Toastify__toast-container .Toastify__progress-bar{
120
+ :global(.osThemeSnack.Toastify__toast-container) .Toastify__progress-bar{
121
121
  background:transparent;
122
122
  }
123
- :global .osThemeSnack.Toastify__toast-container .Toastify__progress-bar--animated{
123
+ :global(.osThemeSnack.Toastify__toast-container) .Toastify__progress-bar--animated{
124
124
  animation:osSnackTheme__toast__trackProgress linear 1 forwards;
125
125
  }
126
- :global .osThemeSnack.Toastify__toast-container .Toastify__bounce-enter--bottom-right{
126
+ :global(.osThemeSnack.Toastify__toast-container) .Toastify__bounce-enter--bottom-right{
127
127
  animation-name:osSnackTheme__toast__bounceInRight;
128
128
  animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);
129
129
  }
130
- :global .osThemeSnack.Toastify__toast-container .Toastify__bounce-enter--bottom-center{
130
+ :global(.osThemeSnack.Toastify__toast-container) .Toastify__bounce-enter--bottom-center{
131
131
  animation-name:osSnackTheme__toast__bounceInUp;
132
132
  animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);
133
133
  }
134
- :global .osThemeSnack.Toastify__toast-container .Toastify__bounce-exit--bottom-right{
134
+ :global(.osThemeSnack.Toastify__toast-container) .Toastify__bounce-exit--bottom-right{
135
135
  animation-name:osSnackTheme__toast__bounceOutRight;
136
136
  }
137
- :global .osThemeSnack.Toastify__toast-container .Toastify__bounce-exit--bottom-center{
137
+ :global(.osThemeSnack.Toastify__toast-container) .Toastify__bounce-exit--bottom-center{
138
138
  animation-name:osSnackTheme__toast__bounceOutDown;
139
139
  }
140
- :global .osThemeSnack.Toastify__toast-container.osThemeSnack__toast-container__system-event{
140
+
141
+ :global(.osThemeSnack.Toastify__toast-container.osThemeSnack__toast-container__system-event){
141
142
  gap:var(--space-toaster-toast-system-event-gap, 8px);
142
143
  padding:var(--space-toaster-toast-system-event-padding, 8px);
143
144
  width:var(--size-toaster-toast-system-event-container, 320px);
@@ -145,7 +146,8 @@
145
146
  flex-direction:column;
146
147
  max-width:calc(100vw - 2 * var(--space-toaster-toast-system-event-container-padding, 12px));
147
148
  }
148
- :global .osThemeSnack.Toastify__toast-container.osThemeSnack__toast-container__user-action{
149
+
150
+ :global(.osThemeSnack.Toastify__toast-container.osThemeSnack__toast-container__user-action){
149
151
  padding-bottom:var(--space-toaster-toast-user-action-padding-bottom, 8px);
150
152
  gap:var(--space-toaster-toast-user-action-gap, 8px);
151
153
  display:flex;
@@ -154,7 +156,8 @@
154
156
  width:-moz-fit-content;
155
157
  width:fit-content;
156
158
  }
157
- :global .osThemeSnack.Toastify__toast-container.osThemeSnack__toast-container__upload{
159
+
160
+ :global(.osThemeSnack.Toastify__toast-container.osThemeSnack__toast-container__upload){
158
161
  pointer-events:none;
159
162
  z-index:1;
160
163
  top:var(--space-toaster-toast-system-event-container-padding, 12px);
@@ -164,28 +167,31 @@
164
167
  display:flex;
165
168
  flex-direction:column;
166
169
  }
167
- :global .osThemeSnack.Toastify__toast-container.osThemeSnack__toast-container__upload > div{
170
+ :global(.osThemeSnack.Toastify__toast-container.osThemeSnack__toast-container__upload) > div{
168
171
  display:flex;
169
172
  align-items:flex-end;
170
173
  justify-content:flex-start;
171
174
  width:100%;
172
175
  height:100%;
173
176
  }
174
- :global .osThemeSnack.Toastify__toast-container--bottom-right{
177
+
178
+ :global(.osThemeSnack.Toastify__toast-container--bottom-right){
175
179
  right:0;
176
180
  bottom:0;
177
181
  }
178
- :global .osThemeSnack.Toastify__toast-container--bottom-center{
182
+
183
+ :global(.osThemeSnack.Toastify__toast-container--bottom-center){
179
184
  bottom:0;
180
185
  left:50%;
181
186
  transform:translateX(-50%);
182
187
  }
188
+
183
189
  @media only screen and (max-width: 480px){
184
- :global .osThemeSnack.Toastify__toast-container--bottom-right{
190
+ :global(.osThemeSnack.Toastify__toast-container--bottom-right){
185
191
  right:0;
186
192
  bottom:0;
187
193
  }
188
- :global .osThemeSnack.Toastify__toast-container--bottom-center{
194
+ :global(.osThemeSnack.Toastify__toast-container--bottom-center){
189
195
  bottom:0;
190
196
  left:50%;
191
197
  transform:translateX(-50%);
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Toaster",
7
- "version": "0.11.22",
7
+ "version": "0.11.23-preview-a84747fe.0",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -40,7 +40,7 @@
40
40
  "@snack-uikit/link": "0.17.17",
41
41
  "@snack-uikit/loaders": "0.9.10",
42
42
  "@snack-uikit/progress-bar": "0.1.11",
43
- "@snack-uikit/scroll": "0.10.6",
43
+ "@snack-uikit/scroll": "0.10.7-preview-a84747fe.0",
44
44
  "@snack-uikit/truncate-string": "0.7.8",
45
45
  "@snack-uikit/utils": "4.0.1",
46
46
  "classnames": "2.5.1",
@@ -51,5 +51,5 @@
51
51
  "peerDependencies": {
52
52
  "@snack-uikit/locale": "*"
53
53
  },
54
- "gitHead": "17b72086167d3d6503e4e74142358765230478c8"
54
+ "gitHead": "da9253c3ae205bb5e08e9e02e0f669961cb2ed60"
55
55
  }
package/src/components/ToasterContainer/styles.module.scss CHANGED
@@ -73,161 +73,159 @@
73
73
  $theme-name: osThemeSnack;
74
74
 
75
75
  /* stylelint-disable-next-line selector-pseudo-class-no-unknown */
76
- :global {
77
- .#{$theme-name}.Toastify__toast-container {
78
- position: fixed;
79
- box-sizing: border-box;
80
- padding: 0;
76
+ :global(.#{$theme-name}.Toastify__toast-container) {
77
+ position: fixed;
78
+ box-sizing: border-box;
79
+ padding: 0;
81
80
 
82
- .Toastify__toast {
83
- --y: 0;
81
+ .Toastify__toast {
82
+ --y: 0;
84
83
 
85
- touch-action: none;
86
- cursor: default;
84
+ touch-action: none;
85
+ cursor: default;
87
86
 
88
- position: relative;
89
- /* stylelint-disable-next-line declaration-property-value-allowed-list */
90
- z-index: 0;
87
+ position: relative;
88
+ /* stylelint-disable-next-line declaration-property-value-allowed-list */
89
+ z-index: 0;
91
90
 
92
- overflow: hidden;
93
- display: flex;
94
- justify-content: space-between;
91
+ overflow: hidden;
92
+ display: flex;
93
+ justify-content: space-between;
95
94
 
96
- box-sizing: border-box;
97
- min-height: unset;
98
- margin: 0;
99
- padding: 0;
95
+ box-sizing: border-box;
96
+ min-height: unset;
97
+ margin: 0;
98
+ padding: 0;
100
99
 
101
- background-color: transparent;
102
- border-radius: unset;
103
- box-shadow: none;
104
- }
100
+ background-color: transparent;
101
+ border-radius: unset;
102
+ box-shadow: none;
103
+ }
105
104
 
106
- .Toastify__toast-body {
107
- max-width: 100%;
108
- margin: 0;
109
- padding: 0;
105
+ .Toastify__toast-body {
106
+ max-width: 100%;
107
+ margin: 0;
108
+ padding: 0;
110
109
 
111
- & > div {
112
- max-width: 100%;
113
- }
110
+ & > div {
111
+ max-width: 100%;
114
112
  }
113
+ }
115
114
 
116
- .#{container-user-action} {
117
- @include styles-theme-variables.composite-var(styles-tokens-toaster-toasterUserAction.$toaster-user-action-toaster-container);
115
+ .#{container-user-action} {
116
+ @include styles-theme-variables.composite-var(styles-tokens-toaster-toasterUserAction.$toaster-user-action-toaster-container);
118
117
 
119
- display: flex;
120
- flex-direction: column;
121
- align-items: center;
122
- width: fit-content;
123
- }
118
+ display: flex;
119
+ flex-direction: column;
120
+ align-items: center;
121
+ width: fit-content;
122
+ }
124
123
 
125
- .Toastify--animate {
126
- animation-duration: 0.5s;
127
- animation-fill-mode: both;
128
- }
124
+ .Toastify--animate {
125
+ animation-duration: 0.5s;
126
+ animation-fill-mode: both;
127
+ }
129
128
 
130
- .Toastify__close-button {
131
- cursor: pointer;
132
- padding: 0;
133
- border: none;
134
- outline: none;
135
- }
129
+ .Toastify__close-button {
130
+ cursor: pointer;
131
+ padding: 0;
132
+ border: none;
133
+ outline: none;
134
+ }
136
135
 
137
- .Toastify__toast-container {
138
- margin: 0;
139
- padding: 0;
140
- }
136
+ .Toastify__toast-container {
137
+ margin: 0;
138
+ padding: 0;
139
+ }
141
140
 
142
- .Toastify__progress-bar {
143
- background: transparent;
144
- }
141
+ .Toastify__progress-bar {
142
+ background: transparent;
143
+ }
145
144
 
146
- .Toastify__progress-bar--animated {
147
- animation: osSnackTheme__toast__trackProgress linear 1 forwards;
148
- }
145
+ .Toastify__progress-bar--animated {
146
+ animation: osSnackTheme__toast__trackProgress linear 1 forwards;
147
+ }
149
148
 
150
- .Toastify__bounce-enter--bottom-right {
151
- animation-name: osSnackTheme__toast__bounceInRight;
152
- animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
153
- }
149
+ .Toastify__bounce-enter--bottom-right {
150
+ animation-name: osSnackTheme__toast__bounceInRight;
151
+ animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
152
+ }
154
153
 
155
- .Toastify__bounce-enter--bottom-center {
156
- animation-name: osSnackTheme__toast__bounceInUp;
157
- animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
158
- }
154
+ .Toastify__bounce-enter--bottom-center {
155
+ animation-name: osSnackTheme__toast__bounceInUp;
156
+ animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
157
+ }
159
158
 
160
- .Toastify__bounce-exit--bottom-right {
161
- animation-name: osSnackTheme__toast__bounceOutRight;
162
- }
159
+ .Toastify__bounce-exit--bottom-right {
160
+ animation-name: osSnackTheme__toast__bounceOutRight;
161
+ }
163
162
 
164
- .Toastify__bounce-exit--bottom-center {
165
- animation-name: osSnackTheme__toast__bounceOutDown;
166
- }
163
+ .Toastify__bounce-exit--bottom-center {
164
+ animation-name: osSnackTheme__toast__bounceOutDown;
167
165
  }
166
+ }
168
167
 
169
- .#{$theme-name}.Toastify__toast-container.osThemeSnack__toast-container__system-event {
170
- @include styles-theme-variables.composite-var(styles-tokens-toaster-toasterSystemEvent.$toaster-system-event-toaster-container);
168
+ :global(.#{$theme-name}.Toastify__toast-container.osThemeSnack__toast-container__system-event) {
169
+ @include styles-theme-variables.composite-var(styles-tokens-toaster-toasterSystemEvent.$toaster-system-event-toaster-container);
171
170
 
172
- display: flex;
173
- flex-direction: column;
174
- max-width: calc(100vw - 2 * styles-theme-variables.$space-toaster-toast-system-event-container-padding);
175
- }
171
+ display: flex;
172
+ flex-direction: column;
173
+ max-width: calc(100vw - 2 * styles-theme-variables.$space-toaster-toast-system-event-container-padding);
174
+ }
176
175
 
177
- .#{$theme-name}.Toastify__toast-container.osThemeSnack__toast-container__user-action {
178
- @include styles-theme-variables.composite-var(styles-tokens-toaster-toasterUserAction.$toaster-user-action-toaster-container);
176
+ :global(.#{$theme-name}.Toastify__toast-container.osThemeSnack__toast-container__user-action) {
177
+ @include styles-theme-variables.composite-var(styles-tokens-toaster-toasterUserAction.$toaster-user-action-toaster-container);
179
178
 
180
- display: flex;
181
- flex-direction: column;
182
- align-items: center;
183
- width: fit-content;
184
- }
179
+ display: flex;
180
+ flex-direction: column;
181
+ align-items: center;
182
+ width: fit-content;
183
+ }
185
184
 
186
- .#{$theme-name}.Toastify__toast-container.osThemeSnack__toast-container__upload {
187
- pointer-events: none;
185
+ :global(.#{$theme-name}.Toastify__toast-container.osThemeSnack__toast-container__upload) {
186
+ pointer-events: none;
188
187
 
189
- // Необходимо, чтобы тостер с загрузкой был всегда выше остальных тостеров
190
- /* stylelint-disable-next-line declaration-property-value-allowed-list */
191
- z-index: 1;
192
- top: styles-theme-variables.$space-toaster-toast-system-event-container-padding;
193
- right: styles-theme-variables.$space-toaster-toast-system-event-container-padding;
194
- bottom: styles-theme-variables.$space-toaster-toast-system-event-container-padding;
195
- left: styles-theme-variables.$space-toaster-toast-system-event-container-padding;
188
+ // Необходимо, чтобы тостер с загрузкой был всегда выше остальных тостеров
189
+ /* stylelint-disable-next-line declaration-property-value-allowed-list */
190
+ z-index: 1;
191
+ top: styles-theme-variables.$space-toaster-toast-system-event-container-padding;
192
+ right: styles-theme-variables.$space-toaster-toast-system-event-container-padding;
193
+ bottom: styles-theme-variables.$space-toaster-toast-system-event-container-padding;
194
+ left: styles-theme-variables.$space-toaster-toast-system-event-container-padding;
196
195
 
197
- display: flex;
198
- flex-direction: column;
196
+ display: flex;
197
+ flex-direction: column;
199
198
 
200
- > div {
201
- display: flex;
202
- align-items: flex-end;
203
- justify-content: flex-start;
199
+ > div {
200
+ display: flex;
201
+ align-items: flex-end;
202
+ justify-content: flex-start;
204
203
 
205
- width: 100%;
206
- height: 100%;
207
- }
204
+ width: 100%;
205
+ height: 100%;
208
206
  }
207
+ }
208
+
209
+ :global(.#{$theme-name}.Toastify__toast-container--bottom-right) {
210
+ right: 0;
211
+ bottom: 0;
212
+ }
209
213
 
210
- .#{$theme-name}.Toastify__toast-container--bottom-right {
214
+ :global(.#{$theme-name}.Toastify__toast-container--bottom-center) {
215
+ bottom: 0;
216
+ left: 50%;
217
+ transform: translateX(-50%);
218
+ }
219
+
220
+ @media only screen and (max-width: 480px) {
221
+ :global(.#{$theme-name}.Toastify__toast-container--bottom-right) {
211
222
  right: 0;
212
223
  bottom: 0;
213
224
  }
214
225
 
215
- .#{$theme-name}.Toastify__toast-container--bottom-center {
226
+ :global(.#{$theme-name}.Toastify__toast-container--bottom-center) {
216
227
  bottom: 0;
217
228
  left: 50%;
218
229
  transform: translateX(-50%);
219
230
  }
220
-
221
- @media only screen and (max-width: 480px) {
222
- .#{$theme-name}.Toastify__toast-container--bottom-right {
223
- right: 0;
224
- bottom: 0;
225
- }
226
-
227
- .#{$theme-name}.Toastify__toast-container--bottom-center {
228
- bottom: 0;
229
- left: 50%;
230
- transform: translateX(-50%);
231
- }
232
- }
233
231
  }