@i-cell/ids-styles 0.0.20 → 0.0.22
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.
- package/dist/components.css +467 -0
- package/dist/components.min.css +1 -1
- package/dist/components.plugin.js +426 -0
- package/dist/notification/notification.css +466 -0
- package/dist/notification/notification.min.css +1 -0
- package/dist/notification/notification.plugin.js +435 -0
- package/package.json +1 -1
package/dist/components.css
CHANGED
|
@@ -7134,6 +7134,473 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
|
|
|
7134
7134
|
background: var(--ids-comp-menu-item-filled-color-bg-surface-disabled);
|
|
7135
7135
|
}
|
|
7136
7136
|
|
|
7137
|
+
.ids-notification > .ids-notification__content-wrapper {
|
|
7138
|
+
display: flex;
|
|
7139
|
+
justify-content: space-between;
|
|
7140
|
+
align-items: flex-start;
|
|
7141
|
+
align-content: flex-start;
|
|
7142
|
+
flex-wrap: wrap;
|
|
7143
|
+
border-style: solid;
|
|
7144
|
+
}
|
|
7145
|
+
.ids-notification > .ids-notification__content-wrapper > .ids-notification__leading-element {
|
|
7146
|
+
display: flex;
|
|
7147
|
+
align-items: center;
|
|
7148
|
+
flex-shrink: 0;
|
|
7149
|
+
}
|
|
7150
|
+
.ids-notification > .ids-notification__content-wrapper > .ids-notification__container {
|
|
7151
|
+
display: flex;
|
|
7152
|
+
justify-content: space-between;
|
|
7153
|
+
align-items: center;
|
|
7154
|
+
align-content: center;
|
|
7155
|
+
flex: 1 0 0;
|
|
7156
|
+
flex-wrap: wrap;
|
|
7157
|
+
}
|
|
7158
|
+
.ids-notification > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container {
|
|
7159
|
+
display: flex;
|
|
7160
|
+
flex-direction: column;
|
|
7161
|
+
}
|
|
7162
|
+
.ids-notification > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
|
|
7163
|
+
font-style: normal;
|
|
7164
|
+
}
|
|
7165
|
+
.ids-notification > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
|
|
7166
|
+
flex: 1 0 0;
|
|
7167
|
+
font-style: normal;
|
|
7168
|
+
}
|
|
7169
|
+
.ids-notification > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__action {
|
|
7170
|
+
display: flex;
|
|
7171
|
+
align-items: center;
|
|
7172
|
+
}
|
|
7173
|
+
.ids-notification > .ids-notification__content-wrapper > .ids-notification__close-btn-container.ids-notification__label-btn {
|
|
7174
|
+
display: flex;
|
|
7175
|
+
align-self: center;
|
|
7176
|
+
}
|
|
7177
|
+
.ids-notification.ids-notification-filled.ids-notification-error > .ids-notification__content-wrapper {
|
|
7178
|
+
border-color: var(--ids-comp-notification-filled-color-border-error-default);
|
|
7179
|
+
background: var(--ids-comp-notification-filled-color-bg-error-default);
|
|
7180
|
+
}
|
|
7181
|
+
.ids-notification.ids-notification-filled.ids-notification-error > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
|
|
7182
|
+
color: var(--ids-comp-notification-filled-color-fg-icon-error-default);
|
|
7183
|
+
}
|
|
7184
|
+
.ids-notification.ids-notification-filled.ids-notification-error > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
|
|
7185
|
+
color: var(--ids-comp-notification-filled-color-fg-title-error-default);
|
|
7186
|
+
}
|
|
7187
|
+
.ids-notification.ids-notification-filled.ids-notification-error > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
|
|
7188
|
+
color: var(--ids-comp-notification-filled-color-fg-message-error-default);
|
|
7189
|
+
}
|
|
7190
|
+
.ids-notification.ids-notification-filled.ids-notification-success > .ids-notification__content-wrapper {
|
|
7191
|
+
border-color: var(--ids-comp-notification-filled-color-border-success-default);
|
|
7192
|
+
background: var(--ids-comp-notification-filled-color-bg-success-default);
|
|
7193
|
+
}
|
|
7194
|
+
.ids-notification.ids-notification-filled.ids-notification-success > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
|
|
7195
|
+
color: var(--ids-comp-notification-filled-color-fg-icon-success-default);
|
|
7196
|
+
}
|
|
7197
|
+
.ids-notification.ids-notification-filled.ids-notification-success > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
|
|
7198
|
+
color: var(--ids-comp-notification-filled-color-fg-title-success-default);
|
|
7199
|
+
}
|
|
7200
|
+
.ids-notification.ids-notification-filled.ids-notification-success > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
|
|
7201
|
+
color: var(--ids-comp-notification-filled-color-fg-message-success-default);
|
|
7202
|
+
}
|
|
7203
|
+
.ids-notification.ids-notification-filled.ids-notification-warning > .ids-notification__content-wrapper {
|
|
7204
|
+
border-color: var(--ids-comp-notification-filled-color-border-warning-default);
|
|
7205
|
+
background: var(--ids-comp-notification-filled-color-bg-warning-default);
|
|
7206
|
+
}
|
|
7207
|
+
.ids-notification.ids-notification-filled.ids-notification-warning > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
|
|
7208
|
+
color: var(--ids-comp-notification-filled-color-fg-icon-warning-default);
|
|
7209
|
+
}
|
|
7210
|
+
.ids-notification.ids-notification-filled.ids-notification-warning > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
|
|
7211
|
+
color: var(--ids-comp-notification-filled-color-fg-title-warning-default);
|
|
7212
|
+
}
|
|
7213
|
+
.ids-notification.ids-notification-filled.ids-notification-warning > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
|
|
7214
|
+
color: var(--ids-comp-notification-filled-color-fg-message-warning-default);
|
|
7215
|
+
}
|
|
7216
|
+
.ids-notification.ids-notification-filled.ids-notification-light > .ids-notification__content-wrapper {
|
|
7217
|
+
border-color: var(--ids-comp-notification-filled-color-border-light-default);
|
|
7218
|
+
background: var(--ids-comp-notification-filled-color-bg-light-default);
|
|
7219
|
+
}
|
|
7220
|
+
.ids-notification.ids-notification-filled.ids-notification-light > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
|
|
7221
|
+
color: var(--ids-comp-notification-filled-color-fg-icon-light-default);
|
|
7222
|
+
}
|
|
7223
|
+
.ids-notification.ids-notification-filled.ids-notification-light > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
|
|
7224
|
+
color: var(--ids-comp-notification-filled-color-fg-title-light-default);
|
|
7225
|
+
}
|
|
7226
|
+
.ids-notification.ids-notification-filled.ids-notification-light > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
|
|
7227
|
+
color: var(--ids-comp-notification-filled-color-fg-message-light-default);
|
|
7228
|
+
}
|
|
7229
|
+
.ids-notification.ids-notification-filled.ids-notification-dark > .ids-notification__content-wrapper {
|
|
7230
|
+
border-color: var(--ids-comp-notification-filled-color-border-dark-default);
|
|
7231
|
+
background: var(--ids-comp-notification-filled-color-bg-dark-default);
|
|
7232
|
+
}
|
|
7233
|
+
.ids-notification.ids-notification-filled.ids-notification-dark > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
|
|
7234
|
+
color: var(--ids-comp-notification-filled-color-fg-icon-dark-default);
|
|
7235
|
+
}
|
|
7236
|
+
.ids-notification.ids-notification-filled.ids-notification-dark > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
|
|
7237
|
+
color: var(--ids-comp-notification-filled-color-fg-title-dark-default);
|
|
7238
|
+
}
|
|
7239
|
+
.ids-notification.ids-notification-filled.ids-notification-dark > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
|
|
7240
|
+
color: var(--ids-comp-notification-filled-color-fg-message-dark-default);
|
|
7241
|
+
}
|
|
7242
|
+
.ids-notification.ids-notification-filled.ids-notification-surface > .ids-notification__content-wrapper {
|
|
7243
|
+
border-color: var(--ids-comp-notification-filled-color-border-surface-default);
|
|
7244
|
+
background: var(--ids-comp-notification-filled-color-bg-surface-default);
|
|
7245
|
+
}
|
|
7246
|
+
.ids-notification.ids-notification-filled.ids-notification-surface > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
|
|
7247
|
+
color: var(--ids-comp-notification-filled-color-fg-icon-surface-default);
|
|
7248
|
+
}
|
|
7249
|
+
.ids-notification.ids-notification-filled.ids-notification-surface > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
|
|
7250
|
+
color: var(--ids-comp-notification-filled-color-fg-title-surface-default);
|
|
7251
|
+
}
|
|
7252
|
+
.ids-notification.ids-notification-filled.ids-notification-surface > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
|
|
7253
|
+
color: var(--ids-comp-notification-filled-color-fg-message-surface-default);
|
|
7254
|
+
}
|
|
7255
|
+
.ids-notification.ids-notification-filled.ids-notification-info > .ids-notification__content-wrapper {
|
|
7256
|
+
border-color: var(--ids-comp-notification-filled-color-border-info-default);
|
|
7257
|
+
background: var(--ids-comp-notification-filled-color-bg-info-default);
|
|
7258
|
+
}
|
|
7259
|
+
.ids-notification.ids-notification-filled.ids-notification-info > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
|
|
7260
|
+
color: var(--ids-comp-notification-filled-color-fg-icon-info-default);
|
|
7261
|
+
}
|
|
7262
|
+
.ids-notification.ids-notification-filled.ids-notification-info > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
|
|
7263
|
+
color: var(--ids-comp-notification-filled-color-fg-title-info-default);
|
|
7264
|
+
}
|
|
7265
|
+
.ids-notification.ids-notification-filled.ids-notification-info > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
|
|
7266
|
+
color: var(--ids-comp-notification-filled-color-fg-message-info-default);
|
|
7267
|
+
}
|
|
7268
|
+
.ids-notification.ids-notification-filled.ids-notification-compact > .ids-notification__content-wrapper {
|
|
7269
|
+
gap: var(--ids-comp-notification-filled-container-size-gap-compact);
|
|
7270
|
+
padding: var(--ids-comp-notification-filled-container-size-padding-y-compact) var(--ids-comp-notification-filled-container-size-padding-x-compact);
|
|
7271
|
+
border-radius: var(--ids-comp-notification-filled-container-size-border-radius-compact);
|
|
7272
|
+
border-top-width: var(--ids-comp-notification-filled-container-size-border-top-width-compact);
|
|
7273
|
+
border-right-width: var(--ids-comp-notification-filled-container-size-border-right-width-compact);
|
|
7274
|
+
border-bottom-width: var(--ids-comp-notification-filled-container-size-border-bottom-width-compact);
|
|
7275
|
+
border-left-width: var(--ids-comp-notification-filled-container-size-border-left-width-compact);
|
|
7276
|
+
}
|
|
7277
|
+
.ids-notification.ids-notification-filled.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__container {
|
|
7278
|
+
min-width: var(--ids-comp-notification-filled-container-size-min-width-compact);
|
|
7279
|
+
}
|
|
7280
|
+
.ids-notification.ids-notification-filled.ids-notification-comfortable > .ids-notification__content-wrapper {
|
|
7281
|
+
gap: var(--ids-comp-notification-filled-container-size-gap-comfortable);
|
|
7282
|
+
padding: var(--ids-comp-notification-filled-container-size-padding-y-comfortable) var(--ids-comp-notification-filled-container-size-padding-x-comfortable);
|
|
7283
|
+
border-radius: var(--ids-comp-notification-filled-container-size-border-radius-comfortable);
|
|
7284
|
+
border-top-width: var(--ids-comp-notification-filled-container-size-border-top-width-comfortable);
|
|
7285
|
+
border-right-width: var(--ids-comp-notification-filled-container-size-border-right-width-comfortable);
|
|
7286
|
+
border-bottom-width: var(--ids-comp-notification-filled-container-size-border-bottom-width-comfortable);
|
|
7287
|
+
border-left-width: var(--ids-comp-notification-filled-container-size-border-left-width-comfortable);
|
|
7288
|
+
}
|
|
7289
|
+
.ids-notification.ids-notification-filled.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__container {
|
|
7290
|
+
min-width: var(--ids-comp-notification-filled-container-size-min-width-comfortable);
|
|
7291
|
+
}
|
|
7292
|
+
.ids-notification.ids-notification-filled.ids-notification-spacious > .ids-notification__content-wrapper {
|
|
7293
|
+
gap: var(--ids-comp-notification-filled-container-size-gap-spacious);
|
|
7294
|
+
padding: var(--ids-comp-notification-filled-container-size-padding-y-spacious) var(--ids-comp-notification-filled-container-size-padding-x-spacious);
|
|
7295
|
+
border-radius: var(--ids-comp-notification-filled-container-size-border-radius-spacious);
|
|
7296
|
+
border-top-width: var(--ids-comp-notification-filled-container-size-border-top-width-spacious);
|
|
7297
|
+
border-right-width: var(--ids-comp-notification-filled-container-size-border-right-width-spacious);
|
|
7298
|
+
border-bottom-width: var(--ids-comp-notification-filled-container-size-border-bottom-width-spacious);
|
|
7299
|
+
border-left-width: var(--ids-comp-notification-filled-container-size-border-left-width-spacious);
|
|
7300
|
+
}
|
|
7301
|
+
.ids-notification.ids-notification-filled.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__container {
|
|
7302
|
+
min-width: var(--ids-comp-notification-filled-container-size-min-width-spacious);
|
|
7303
|
+
}
|
|
7304
|
+
.ids-notification.ids-notification-filled.ids-notification-dense > .ids-notification__content-wrapper {
|
|
7305
|
+
gap: var(--ids-comp-notification-filled-container-size-gap-dense);
|
|
7306
|
+
padding: var(--ids-comp-notification-filled-container-size-padding-y-dense) var(--ids-comp-notification-filled-container-size-padding-x-dense);
|
|
7307
|
+
border-radius: var(--ids-comp-notification-filled-container-size-border-radius-dense);
|
|
7308
|
+
border-top-width: var(--ids-comp-notification-filled-container-size-border-top-width-dense);
|
|
7309
|
+
border-right-width: var(--ids-comp-notification-filled-container-size-border-right-width-dense);
|
|
7310
|
+
border-bottom-width: var(--ids-comp-notification-filled-container-size-border-bottom-width-dense);
|
|
7311
|
+
border-left-width: var(--ids-comp-notification-filled-container-size-border-left-width-dense);
|
|
7312
|
+
}
|
|
7313
|
+
.ids-notification.ids-notification-filled.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__container {
|
|
7314
|
+
min-width: var(--ids-comp-notification-filled-container-size-min-width-dense);
|
|
7315
|
+
}
|
|
7316
|
+
.ids-notification.ids-notification-outlined.ids-notification-error > .ids-notification__content-wrapper {
|
|
7317
|
+
border-color: var(--ids-comp-notification-outlined-color-border-error-default);
|
|
7318
|
+
background: var(--ids-comp-notification-outlined-color-bg-error-default);
|
|
7319
|
+
}
|
|
7320
|
+
.ids-notification.ids-notification-outlined.ids-notification-error > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
|
|
7321
|
+
color: var(--ids-comp-notification-outlined-color-fg-icon-error-default);
|
|
7322
|
+
}
|
|
7323
|
+
.ids-notification.ids-notification-outlined.ids-notification-error > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
|
|
7324
|
+
color: var(--ids-comp-notification-outlined-color-fg-title-error-default);
|
|
7325
|
+
}
|
|
7326
|
+
.ids-notification.ids-notification-outlined.ids-notification-error > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
|
|
7327
|
+
color: var(--ids-comp-notification-outlined-color-fg-message-error-default);
|
|
7328
|
+
}
|
|
7329
|
+
.ids-notification.ids-notification-outlined.ids-notification-success > .ids-notification__content-wrapper {
|
|
7330
|
+
border-color: var(--ids-comp-notification-outlined-color-border-success-default);
|
|
7331
|
+
background: var(--ids-comp-notification-outlined-color-bg-success-default);
|
|
7332
|
+
}
|
|
7333
|
+
.ids-notification.ids-notification-outlined.ids-notification-success > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
|
|
7334
|
+
color: var(--ids-comp-notification-outlined-color-fg-icon-success-default);
|
|
7335
|
+
}
|
|
7336
|
+
.ids-notification.ids-notification-outlined.ids-notification-success > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
|
|
7337
|
+
color: var(--ids-comp-notification-outlined-color-fg-title-success-default);
|
|
7338
|
+
}
|
|
7339
|
+
.ids-notification.ids-notification-outlined.ids-notification-success > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
|
|
7340
|
+
color: var(--ids-comp-notification-outlined-color-fg-message-success-default);
|
|
7341
|
+
}
|
|
7342
|
+
.ids-notification.ids-notification-outlined.ids-notification-warning > .ids-notification__content-wrapper {
|
|
7343
|
+
border-color: var(--ids-comp-notification-outlined-color-border-warning-default);
|
|
7344
|
+
background: var(--ids-comp-notification-outlined-color-bg-warning-default);
|
|
7345
|
+
}
|
|
7346
|
+
.ids-notification.ids-notification-outlined.ids-notification-warning > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
|
|
7347
|
+
color: var(--ids-comp-notification-outlined-color-fg-icon-warning-default);
|
|
7348
|
+
}
|
|
7349
|
+
.ids-notification.ids-notification-outlined.ids-notification-warning > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
|
|
7350
|
+
color: var(--ids-comp-notification-outlined-color-fg-title-warning-default);
|
|
7351
|
+
}
|
|
7352
|
+
.ids-notification.ids-notification-outlined.ids-notification-warning > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
|
|
7353
|
+
color: var(--ids-comp-notification-outlined-color-fg-message-warning-default);
|
|
7354
|
+
}
|
|
7355
|
+
.ids-notification.ids-notification-outlined.ids-notification-light > .ids-notification__content-wrapper {
|
|
7356
|
+
border-color: var(--ids-comp-notification-outlined-color-border-light-default);
|
|
7357
|
+
background: var(--ids-comp-notification-outlined-color-bg-light-default);
|
|
7358
|
+
}
|
|
7359
|
+
.ids-notification.ids-notification-outlined.ids-notification-light > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
|
|
7360
|
+
color: var(--ids-comp-notification-outlined-color-fg-icon-light-default);
|
|
7361
|
+
}
|
|
7362
|
+
.ids-notification.ids-notification-outlined.ids-notification-light > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
|
|
7363
|
+
color: var(--ids-comp-notification-outlined-color-fg-title-light-default);
|
|
7364
|
+
}
|
|
7365
|
+
.ids-notification.ids-notification-outlined.ids-notification-light > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
|
|
7366
|
+
color: var(--ids-comp-notification-outlined-color-fg-message-light-default);
|
|
7367
|
+
}
|
|
7368
|
+
.ids-notification.ids-notification-outlined.ids-notification-dark > .ids-notification__content-wrapper {
|
|
7369
|
+
border-color: var(--ids-comp-notification-outlined-color-border-dark-default);
|
|
7370
|
+
background: var(--ids-comp-notification-outlined-color-bg-dark-default);
|
|
7371
|
+
}
|
|
7372
|
+
.ids-notification.ids-notification-outlined.ids-notification-dark > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
|
|
7373
|
+
color: var(--ids-comp-notification-outlined-color-fg-icon-dark-default);
|
|
7374
|
+
}
|
|
7375
|
+
.ids-notification.ids-notification-outlined.ids-notification-dark > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
|
|
7376
|
+
color: var(--ids-comp-notification-outlined-color-fg-title-dark-default);
|
|
7377
|
+
}
|
|
7378
|
+
.ids-notification.ids-notification-outlined.ids-notification-dark > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
|
|
7379
|
+
color: var(--ids-comp-notification-outlined-color-fg-message-dark-default);
|
|
7380
|
+
}
|
|
7381
|
+
.ids-notification.ids-notification-outlined.ids-notification-surface > .ids-notification__content-wrapper {
|
|
7382
|
+
border-color: var(--ids-comp-notification-outlined-color-border-surface-default);
|
|
7383
|
+
background: var(--ids-comp-notification-outlined-color-bg-surface-default);
|
|
7384
|
+
}
|
|
7385
|
+
.ids-notification.ids-notification-outlined.ids-notification-surface > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
|
|
7386
|
+
color: var(--ids-comp-notification-outlined-color-fg-icon-surface-default);
|
|
7387
|
+
}
|
|
7388
|
+
.ids-notification.ids-notification-outlined.ids-notification-surface > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
|
|
7389
|
+
color: var(--ids-comp-notification-outlined-color-fg-title-surface-default);
|
|
7390
|
+
}
|
|
7391
|
+
.ids-notification.ids-notification-outlined.ids-notification-surface > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
|
|
7392
|
+
color: var(--ids-comp-notification-outlined-color-fg-message-surface-default);
|
|
7393
|
+
}
|
|
7394
|
+
.ids-notification.ids-notification-outlined.ids-notification-info > .ids-notification__content-wrapper {
|
|
7395
|
+
border-color: var(--ids-comp-notification-outlined-color-border-info-default);
|
|
7396
|
+
background: var(--ids-comp-notification-outlined-color-bg-info-default);
|
|
7397
|
+
}
|
|
7398
|
+
.ids-notification.ids-notification-outlined.ids-notification-info > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
|
|
7399
|
+
color: var(--ids-comp-notification-outlined-color-fg-icon-info-default);
|
|
7400
|
+
}
|
|
7401
|
+
.ids-notification.ids-notification-outlined.ids-notification-info > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
|
|
7402
|
+
color: var(--ids-comp-notification-outlined-color-fg-title-info-default);
|
|
7403
|
+
}
|
|
7404
|
+
.ids-notification.ids-notification-outlined.ids-notification-info > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
|
|
7405
|
+
color: var(--ids-comp-notification-outlined-color-fg-message-info-default);
|
|
7406
|
+
}
|
|
7407
|
+
.ids-notification.ids-notification-outlined.ids-notification-compact > .ids-notification__content-wrapper {
|
|
7408
|
+
gap: var(--ids-comp-notification-outlined-container-size-gap-compact);
|
|
7409
|
+
padding: var(--ids-comp-notification-outlined-container-size-padding-y-compact) var(--ids-comp-notification-outlined-container-size-padding-x-compact);
|
|
7410
|
+
border-radius: var(--ids-comp-notification-outlined-container-size-border-radius-compact);
|
|
7411
|
+
border-top-width: var(--ids-comp-notification-outlined-container-size-border-top-width-compact);
|
|
7412
|
+
border-right-width: var(--ids-comp-notification-outlined-container-size-border-right-width-compact);
|
|
7413
|
+
border-bottom-width: var(--ids-comp-notification-outlined-container-size-border-bottom-width-compact);
|
|
7414
|
+
border-left-width: var(--ids-comp-notification-outlined-container-size-border-left-width-compact);
|
|
7415
|
+
}
|
|
7416
|
+
.ids-notification.ids-notification-outlined.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__container {
|
|
7417
|
+
min-width: var(--ids-comp-notification-outlined-container-size-min-width-compact);
|
|
7418
|
+
}
|
|
7419
|
+
.ids-notification.ids-notification-outlined.ids-notification-comfortable > .ids-notification__content-wrapper {
|
|
7420
|
+
gap: var(--ids-comp-notification-outlined-container-size-gap-comfortable);
|
|
7421
|
+
padding: var(--ids-comp-notification-outlined-container-size-padding-y-comfortable) var(--ids-comp-notification-outlined-container-size-padding-x-comfortable);
|
|
7422
|
+
border-radius: var(--ids-comp-notification-outlined-container-size-border-radius-comfortable);
|
|
7423
|
+
border-top-width: var(--ids-comp-notification-outlined-container-size-border-top-width-comfortable);
|
|
7424
|
+
border-right-width: var(--ids-comp-notification-outlined-container-size-border-right-width-comfortable);
|
|
7425
|
+
border-bottom-width: var(--ids-comp-notification-outlined-container-size-border-bottom-width-comfortable);
|
|
7426
|
+
border-left-width: var(--ids-comp-notification-outlined-container-size-border-left-width-comfortable);
|
|
7427
|
+
}
|
|
7428
|
+
.ids-notification.ids-notification-outlined.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__container {
|
|
7429
|
+
min-width: var(--ids-comp-notification-outlined-container-size-min-width-comfortable);
|
|
7430
|
+
}
|
|
7431
|
+
.ids-notification.ids-notification-outlined.ids-notification-spacious > .ids-notification__content-wrapper {
|
|
7432
|
+
gap: var(--ids-comp-notification-outlined-container-size-gap-spacious);
|
|
7433
|
+
padding: var(--ids-comp-notification-outlined-container-size-padding-y-spacious) var(--ids-comp-notification-outlined-container-size-padding-x-spacious);
|
|
7434
|
+
border-radius: var(--ids-comp-notification-outlined-container-size-border-radius-spacious);
|
|
7435
|
+
border-top-width: var(--ids-comp-notification-outlined-container-size-border-top-width-spacious);
|
|
7436
|
+
border-right-width: var(--ids-comp-notification-outlined-container-size-border-right-width-spacious);
|
|
7437
|
+
border-bottom-width: var(--ids-comp-notification-outlined-container-size-border-bottom-width-spacious);
|
|
7438
|
+
border-left-width: var(--ids-comp-notification-outlined-container-size-border-left-width-spacious);
|
|
7439
|
+
}
|
|
7440
|
+
.ids-notification.ids-notification-outlined.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__container {
|
|
7441
|
+
min-width: var(--ids-comp-notification-outlined-container-size-min-width-spacious);
|
|
7442
|
+
}
|
|
7443
|
+
.ids-notification.ids-notification-outlined.ids-notification-dense > .ids-notification__content-wrapper {
|
|
7444
|
+
gap: var(--ids-comp-notification-outlined-container-size-gap-dense);
|
|
7445
|
+
padding: var(--ids-comp-notification-outlined-container-size-padding-y-dense) var(--ids-comp-notification-outlined-container-size-padding-x-dense);
|
|
7446
|
+
border-radius: var(--ids-comp-notification-outlined-container-size-border-radius-dense);
|
|
7447
|
+
border-top-width: var(--ids-comp-notification-outlined-container-size-border-top-width-dense);
|
|
7448
|
+
border-right-width: var(--ids-comp-notification-outlined-container-size-border-right-width-dense);
|
|
7449
|
+
border-bottom-width: var(--ids-comp-notification-outlined-container-size-border-bottom-width-dense);
|
|
7450
|
+
border-left-width: var(--ids-comp-notification-outlined-container-size-border-left-width-dense);
|
|
7451
|
+
}
|
|
7452
|
+
.ids-notification.ids-notification-outlined.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__container {
|
|
7453
|
+
min-width: var(--ids-comp-notification-outlined-container-size-min-width-dense);
|
|
7454
|
+
}
|
|
7455
|
+
.ids-notification.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__leading-element {
|
|
7456
|
+
padding-left: var(--ids-comp-notification-icon-size-padding-left-compact);
|
|
7457
|
+
padding-right: var(--ids-comp-notification-icon-size-padding-right-compact);
|
|
7458
|
+
}
|
|
7459
|
+
.ids-notification.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
|
|
7460
|
+
width: var(--ids-comp-notification-icon-size-icon-compact);
|
|
7461
|
+
height: var(--ids-comp-notification-icon-size-icon-compact);
|
|
7462
|
+
font-size: var(--ids-comp-notification-icon-typography-font-size-compact);
|
|
7463
|
+
font-weight: var(--ids-comp-notification-icon-typography-font-weight-compact);
|
|
7464
|
+
line-height: var(--ids-comp-notification-icon-typography-line-height-compact);
|
|
7465
|
+
}
|
|
7466
|
+
.ids-notification.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__container {
|
|
7467
|
+
padding-right: var(--ids-comp-notification-message-size-padding-right-compact);
|
|
7468
|
+
gap: var(--ids-comp-notification-message-size-gap-compact);
|
|
7469
|
+
}
|
|
7470
|
+
.ids-notification.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container {
|
|
7471
|
+
row-gap: var(--ids-comp-notification-message-size-gap-compact);
|
|
7472
|
+
}
|
|
7473
|
+
.ids-notification.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
|
|
7474
|
+
font-size: var(--ids-comp-notification-title-typography-font-size-compact);
|
|
7475
|
+
font-weight: var(--ids-comp-notification-title-typography-font-weight-compact);
|
|
7476
|
+
line-height: var(--ids-comp-notification-title-typography-line-height-compact);
|
|
7477
|
+
letter-spacing: var(--ids-comp-notification-title-typography-letter-spacing-compact);
|
|
7478
|
+
}
|
|
7479
|
+
.ids-notification.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
|
|
7480
|
+
font-size: var(--ids-comp-notification-message-typography-font-size-compact);
|
|
7481
|
+
font-weight: var(--ids-comp-notification-message-typography-font-weight-compact);
|
|
7482
|
+
line-height: var(--ids-comp-notification-message-typography-line-height-compact);
|
|
7483
|
+
letter-spacing: var(--ids-comp-notification-message-typography-letter-spacing-compact);
|
|
7484
|
+
}
|
|
7485
|
+
.ids-notification.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__action {
|
|
7486
|
+
gap: var(--ids-comp-notification-actions-size-gap-compact);
|
|
7487
|
+
}
|
|
7488
|
+
.ids-notification.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__close-button-container > .ids-icon-button > .ids-icon {
|
|
7489
|
+
width: var(--ids-comp-notification-icon-button-size-icon-button-compact);
|
|
7490
|
+
height: var(--ids-comp-notification-icon-button-size-icon-button-compact);
|
|
7491
|
+
}
|
|
7492
|
+
.ids-notification.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__leading-element {
|
|
7493
|
+
padding-left: var(--ids-comp-notification-icon-size-padding-left-comfortable);
|
|
7494
|
+
padding-right: var(--ids-comp-notification-icon-size-padding-right-comfortable);
|
|
7495
|
+
}
|
|
7496
|
+
.ids-notification.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
|
|
7497
|
+
width: var(--ids-comp-notification-icon-size-icon-comfortable);
|
|
7498
|
+
height: var(--ids-comp-notification-icon-size-icon-comfortable);
|
|
7499
|
+
font-size: var(--ids-comp-notification-icon-typography-font-size-comfortable);
|
|
7500
|
+
font-weight: var(--ids-comp-notification-icon-typography-font-weight-comfortable);
|
|
7501
|
+
line-height: var(--ids-comp-notification-icon-typography-line-height-comfortable);
|
|
7502
|
+
}
|
|
7503
|
+
.ids-notification.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__container {
|
|
7504
|
+
padding-right: var(--ids-comp-notification-message-size-padding-right-comfortable);
|
|
7505
|
+
gap: var(--ids-comp-notification-message-size-gap-comfortable);
|
|
7506
|
+
}
|
|
7507
|
+
.ids-notification.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container {
|
|
7508
|
+
row-gap: var(--ids-comp-notification-message-size-gap-comfortable);
|
|
7509
|
+
}
|
|
7510
|
+
.ids-notification.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
|
|
7511
|
+
font-size: var(--ids-comp-notification-title-typography-font-size-comfortable);
|
|
7512
|
+
font-weight: var(--ids-comp-notification-title-typography-font-weight-comfortable);
|
|
7513
|
+
line-height: var(--ids-comp-notification-title-typography-line-height-comfortable);
|
|
7514
|
+
letter-spacing: var(--ids-comp-notification-title-typography-letter-spacing-comfortable);
|
|
7515
|
+
}
|
|
7516
|
+
.ids-notification.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
|
|
7517
|
+
font-size: var(--ids-comp-notification-message-typography-font-size-comfortable);
|
|
7518
|
+
font-weight: var(--ids-comp-notification-message-typography-font-weight-comfortable);
|
|
7519
|
+
line-height: var(--ids-comp-notification-message-typography-line-height-comfortable);
|
|
7520
|
+
letter-spacing: var(--ids-comp-notification-message-typography-letter-spacing-comfortable);
|
|
7521
|
+
}
|
|
7522
|
+
.ids-notification.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__action {
|
|
7523
|
+
gap: var(--ids-comp-notification-actions-size-gap-comfortable);
|
|
7524
|
+
}
|
|
7525
|
+
.ids-notification.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__close-button-container > .ids-icon-button > .ids-icon {
|
|
7526
|
+
width: var(--ids-comp-notification-icon-button-size-icon-button-comfortable);
|
|
7527
|
+
height: var(--ids-comp-notification-icon-button-size-icon-button-comfortable);
|
|
7528
|
+
}
|
|
7529
|
+
.ids-notification.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__leading-element {
|
|
7530
|
+
padding-left: var(--ids-comp-notification-icon-size-padding-left-spacious);
|
|
7531
|
+
padding-right: var(--ids-comp-notification-icon-size-padding-right-spacious);
|
|
7532
|
+
}
|
|
7533
|
+
.ids-notification.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
|
|
7534
|
+
width: var(--ids-comp-notification-icon-size-icon-spacious);
|
|
7535
|
+
height: var(--ids-comp-notification-icon-size-icon-spacious);
|
|
7536
|
+
font-size: var(--ids-comp-notification-icon-typography-font-size-spacious);
|
|
7537
|
+
font-weight: var(--ids-comp-notification-icon-typography-font-weight-spacious);
|
|
7538
|
+
line-height: var(--ids-comp-notification-icon-typography-line-height-spacious);
|
|
7539
|
+
}
|
|
7540
|
+
.ids-notification.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__container {
|
|
7541
|
+
padding-right: var(--ids-comp-notification-message-size-padding-right-spacious);
|
|
7542
|
+
gap: var(--ids-comp-notification-message-size-gap-spacious);
|
|
7543
|
+
}
|
|
7544
|
+
.ids-notification.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container {
|
|
7545
|
+
row-gap: var(--ids-comp-notification-message-size-gap-spacious);
|
|
7546
|
+
}
|
|
7547
|
+
.ids-notification.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
|
|
7548
|
+
font-size: var(--ids-comp-notification-title-typography-font-size-spacious);
|
|
7549
|
+
font-weight: var(--ids-comp-notification-title-typography-font-weight-spacious);
|
|
7550
|
+
line-height: var(--ids-comp-notification-title-typography-line-height-spacious);
|
|
7551
|
+
letter-spacing: var(--ids-comp-notification-title-typography-letter-spacing-spacious);
|
|
7552
|
+
}
|
|
7553
|
+
.ids-notification.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
|
|
7554
|
+
font-size: var(--ids-comp-notification-message-typography-font-size-spacious);
|
|
7555
|
+
font-weight: var(--ids-comp-notification-message-typography-font-weight-spacious);
|
|
7556
|
+
line-height: var(--ids-comp-notification-message-typography-line-height-spacious);
|
|
7557
|
+
letter-spacing: var(--ids-comp-notification-message-typography-letter-spacing-spacious);
|
|
7558
|
+
}
|
|
7559
|
+
.ids-notification.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__action {
|
|
7560
|
+
gap: var(--ids-comp-notification-actions-size-gap-spacious);
|
|
7561
|
+
}
|
|
7562
|
+
.ids-notification.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__close-button-container > .ids-icon-button > .ids-icon {
|
|
7563
|
+
width: var(--ids-comp-notification-icon-button-size-icon-button-spacious);
|
|
7564
|
+
height: var(--ids-comp-notification-icon-button-size-icon-button-spacious);
|
|
7565
|
+
}
|
|
7566
|
+
.ids-notification.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__leading-element {
|
|
7567
|
+
padding-left: var(--ids-comp-notification-icon-size-padding-left-dense);
|
|
7568
|
+
padding-right: var(--ids-comp-notification-icon-size-padding-right-dense);
|
|
7569
|
+
}
|
|
7570
|
+
.ids-notification.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
|
|
7571
|
+
width: var(--ids-comp-notification-icon-size-icon-dense);
|
|
7572
|
+
height: var(--ids-comp-notification-icon-size-icon-dense);
|
|
7573
|
+
font-size: var(--ids-comp-notification-icon-typography-font-size-dense);
|
|
7574
|
+
font-weight: var(--ids-comp-notification-icon-typography-font-weight-dense);
|
|
7575
|
+
line-height: var(--ids-comp-notification-icon-typography-line-height-dense);
|
|
7576
|
+
}
|
|
7577
|
+
.ids-notification.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__container {
|
|
7578
|
+
padding-right: var(--ids-comp-notification-message-size-padding-right-dense);
|
|
7579
|
+
gap: var(--ids-comp-notification-message-size-gap-dense);
|
|
7580
|
+
}
|
|
7581
|
+
.ids-notification.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container {
|
|
7582
|
+
row-gap: var(--ids-comp-notification-message-size-gap-dense);
|
|
7583
|
+
}
|
|
7584
|
+
.ids-notification.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
|
|
7585
|
+
font-size: var(--ids-comp-notification-title-typography-font-size-dense);
|
|
7586
|
+
font-weight: var(--ids-comp-notification-title-typography-font-weight-dense);
|
|
7587
|
+
line-height: var(--ids-comp-notification-title-typography-line-height-dense);
|
|
7588
|
+
letter-spacing: var(--ids-comp-notification-title-typography-letter-spacing-dense);
|
|
7589
|
+
}
|
|
7590
|
+
.ids-notification.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
|
|
7591
|
+
font-size: var(--ids-comp-notification-message-typography-font-size-dense);
|
|
7592
|
+
font-weight: var(--ids-comp-notification-message-typography-font-weight-dense);
|
|
7593
|
+
line-height: var(--ids-comp-notification-message-typography-line-height-dense);
|
|
7594
|
+
letter-spacing: var(--ids-comp-notification-message-typography-letter-spacing-dense);
|
|
7595
|
+
}
|
|
7596
|
+
.ids-notification.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__action {
|
|
7597
|
+
gap: var(--ids-comp-notification-actions-size-gap-dense);
|
|
7598
|
+
}
|
|
7599
|
+
.ids-notification.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__close-button-container > .ids-icon-button > .ids-icon {
|
|
7600
|
+
width: var(--ids-comp-notification-icon-button-size-icon-button-dense);
|
|
7601
|
+
height: var(--ids-comp-notification-icon-button-size-icon-button-dense);
|
|
7602
|
+
}
|
|
7603
|
+
|
|
7137
7604
|
.ids-option {
|
|
7138
7605
|
display: flex;
|
|
7139
7606
|
align-items: center;
|