@festo-ui/web-essentials 6.1.0-dev.292 → 6.1.0-dev.294

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 (13) hide show
  1. package/dist/css/festo-web-essentials.css +137 -127
  2. package/dist/css/festo-web-essentials.css.map +1 -1
  3. package/dist/css/festo-web-essentials.min.css +2 -2
  4. package/dist/css/festo-web-essentials.min.css.map +1 -1
  5. package/dist/css/themes/flatpickr/festo.css +1 -1
  6. package/dist/css/themes/flatpickr/festo.min.css +1 -1
  7. package/dist/scss/_modal.scss +63 -56
  8. package/dist/scss/_snackbar.scss +91 -106
  9. package/dist/scss/festo-web-essentials.scss +1 -1
  10. package/dist/scss/themes/flatpickr/festo.scss +1 -1
  11. package/package.json +1 -1
  12. package/scss/_modal.scss +63 -56
  13. package/scss/_snackbar.scss +91 -106
package/dist/css/festo-web-essentials.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * Festo UI - Web Essentials v6.1.0-dev.292 (https://storybook.festo.design/)
2
+ * Festo UI - Web Essentials v6.1.0-dev.294 (https://storybook.festo.design/)
3
3
  * Copyright 2022 Festo SE & Co. KG
4
4
  * Licensed under Apache-2.0
5
5
  */
@@ -16259,139 +16259,141 @@ fieldset.fwe-progress-container label {
16259
16259
  min-height: 48px;
16260
16260
  }
16261
16261
  .fwe-snackbar span {
16262
+ display: block;
16263
+ margin-right: auto;
16262
16264
  overflow: hidden;
16263
16265
  text-overflow: ellipsis;
16264
16266
  }
16265
- .fwe-snackbar .fwe-icon, .fwe-snackbar .fwe-navbar .fwe-navbar-burger-menu, .fwe-navbar .fwe-snackbar .fwe-navbar-burger-menu {
16266
- padding-right: 16px;
16267
- vertical-align: middle;
16268
- font-size: var(--fwe-font-size-xl);
16269
- line-height: var(--fwe-font-size-xl);
16270
- }
16271
- .fwe-snackbar .fwe-icon.fwe-icon-close-small, .fwe-snackbar .fwe-navbar .fwe-icon-close-small.fwe-navbar-burger-menu, .fwe-navbar .fwe-snackbar .fwe-icon-close-small.fwe-navbar-burger-menu {
16272
- padding-right: 0px;
16267
+ .fwe-snackbar.fwe-snackbar-shadow {
16268
+ box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.3);
16273
16269
  }
16274
- .fwe-snackbar .fwe-icon.fwe-icon-close-small::before, .fwe-snackbar .fwe-navbar .fwe-icon-close-small.fwe-navbar-burger-menu::before, .fwe-navbar .fwe-snackbar .fwe-icon-close-small.fwe-navbar-burger-menu::before {
16275
- vertical-align: middle;
16270
+ .fwe-snackbar .fwe-snackbar-close-btn {
16271
+ border: none;
16272
+ padding: 0;
16273
+ height: 24px;
16274
+ width: 24px;
16275
+ min-width: 24px;
16276
+ cursor: pointer;
16277
+ background: var(--fwe-hero);
16278
+ -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0iY29udGVudCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTE2Ljk1IDguNDY0IDE1LjUzNiA3LjA1IDEyIDEwLjU4NiA4LjQ2NCA3LjA1IDcuMDUgOC40NjQgMTAuNTg2IDEyIDcuMDUgMTUuNTM2bDEuNDE0IDEuNDE0TDEyIDEzLjQxNGwzLjUzNiAzLjUzNiAxLjQxNC0xLjQxNEwxMy40MTQgMTJsMy41MzYtMy41MzZ6Ii8+PC9zdmc+");
16279
+ mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0iY29udGVudCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTE2Ljk1IDguNDY0IDE1LjUzNiA3LjA1IDEyIDEwLjU4NiA4LjQ2NCA3LjA1IDcuMDUgOC40NjQgMTAuNTg2IDEyIDcuMDUgMTUuNTM2bDEuNDE0IDEuNDE0TDEyIDEzLjQxNGwzLjUzNiAzLjUzNiAxLjQxNC0xLjQxNEwxMy40MTQgMTJsMy41MzYtMy41MzZ6Ii8+PC9zdmc+");
16276
16280
  }
16277
- .fwe-snackbar > .fwe-icon:nth-of-type(1), .fwe-navbar .fwe-snackbar > .fwe-navbar-burger-menu:nth-of-type(1) {
16281
+ .fwe-snackbar .fwe-snackbar-link-btn {
16282
+ background: none;
16278
16283
  color: var(--fwe-hero);
16279
- font-size: 22px;
16280
- line-height: 22px;
16284
+ border: none;
16285
+ padding: 0px 12px;
16286
+ cursor: pointer;
16281
16287
  }
16282
- .fwe-snackbar .fwe-btn {
16283
- color: var(--fwe-hero);
16284
- min-height: 24px;
16288
+ .fwe-snackbar.fwe-snackbar-info span, .fwe-snackbar.fwe-snackbar-warning span, .fwe-snackbar.fwe-snackbar-error span {
16289
+ position: relative;
16290
+ padding-left: 36px;
16285
16291
  }
16286
- .fwe-snackbar .fwe-btn i {
16292
+ .fwe-snackbar.fwe-snackbar-info span::before, .fwe-snackbar.fwe-snackbar-warning span::before, .fwe-snackbar.fwe-snackbar-error span::before {
16293
+ content: "";
16294
+ position: absolute;
16295
+ top: 0px;
16296
+ left: 0px;
16287
16297
  height: 24px;
16288
- display: flex;
16289
- }
16290
- .fwe-snackbar .fwe-btn:hover {
16291
- color: var(--fwe-hero-dark);
16292
- }
16293
- .fwe-snackbar .fwe-btn:nth-of-type(1) {
16294
- margin-left: auto;
16295
- padding-right: 16px;
16296
- padding-left: 16px;
16297
- }
16298
- .fwe-snackbar .fwe-btn:nth-of-type(1):last-child {
16299
- padding-right: 0px;
16300
- }
16301
- .fwe-snackbar .fwe-btn:nth-of-type(2) {
16302
- position: relative;
16303
- border-left: 1px solid rgba(0, 0, 0, 0.5);
16304
- border-radius: 0px;
16305
- padding-left: 16px;
16298
+ width: 24px;
16306
16299
  }
16307
- .fwe-snackbar.fwe-snackbar-shadow {
16308
- box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.3);
16300
+ .fwe-snackbar.fwe-snackbar-info span::before {
16301
+ background-color: var(--fwe-hero);
16302
+ -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGcgZGF0YS1uYW1lPSJjb250ZW50Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTEyIDFhMTEgMTEgMCAxIDAgMTEgMTFBMTEuMDMyIDExLjAzMiAwIDAgMCAxMiAxWm0xIDE4aC0ydi05aDJabTAtMTJoLTJWNWgyWiIvPjwvZz48L3N2Zz4=");
16303
+ mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGcgZGF0YS1uYW1lPSJjb250ZW50Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTEyIDFhMTEgMTEgMCAxIDAgMTEgMTFBMTEuMDMyIDExLjAzMiAwIDAgMCAxMiAxWm0xIDE4aC0ydi05aDJabTAtMTJoLTJWNWgyWiIvPjwvZz48L3N2Zz4=");
16309
16304
  }
16310
16305
  .fwe-snackbar.fwe-snackbar-warning {
16311
16306
  border-color: var(--fwe-orange);
16312
16307
  background-color: var(--fwe-snackbar-warning-bg);
16313
16308
  }
16314
- .fwe-snackbar.fwe-snackbar-warning > .fwe-icon:nth-of-type(1), .fwe-navbar .fwe-snackbar.fwe-snackbar-warning > .fwe-navbar-burger-menu:nth-of-type(1) {
16315
- color: var(--fwe-orange);
16309
+ .fwe-snackbar.fwe-snackbar-warning span::before {
16310
+ background-color: var(--fwe-orange);
16311
+ -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGcgZGF0YS1uYW1lPSJjb250ZW50Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTIyLjQgMTkuODYgMTMuMjczIDIuNzQzYTEuNDQxIDEuNDQxIDAgMCAwLTIuNTQ0IDBMMS42IDE5Ljg2YTEuNDQxIDEuNDQxIDAgMCAwIDEuMjcyIDIuMTJIMjEuMTNhMS40NDEgMS40NDEgMCAwIDAgMS4yNzItMi4xMlpNMTEgN2gydjhoLTJabTIuMDA1IDExLjk2NWgtMi4wMXYtMi4wMWgyLjAxWiIvPjwvZz48L3N2Zz4=");
16312
+ mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGcgZGF0YS1uYW1lPSJjb250ZW50Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTIyLjQgMTkuODYgMTMuMjczIDIuNzQzYTEuNDQxIDEuNDQxIDAgMCAwLTIuNTQ0IDBMMS42IDE5Ljg2YTEuNDQxIDEuNDQxIDAgMCAwIDEuMjcyIDIuMTJIMjEuMTNhMS40NDEgMS40NDEgMCAwIDAgMS4yNzItMi4xMlpNMTEgN2gydjhoLTJabTIuMDA1IDExLjk2NWgtMi4wMXYtMi4wMWgyLjAxWiIvPjwvZz48L3N2Zz4=");
16316
16313
  }
16317
- .fwe-snackbar.fwe-snackbar-warning .fwe-btn {
16318
- color: var(--fwe-orange);
16314
+ .fwe-snackbar.fwe-snackbar-warning .fwe-snackbar-close-btn {
16315
+ background-color: var(--fwe-orange);
16319
16316
  }
16320
- .fwe-snackbar.fwe-snackbar-warning .fwe-btn:hover {
16321
- color: var(--fwe-orange-dark);
16317
+ .fwe-snackbar.fwe-snackbar-warning .fwe-snackbar-separator {
16318
+ background-color: var(--fwe-orange);
16322
16319
  }
16323
- .fwe-snackbar.fwe-snackbar-warning .fwe-btn:nth-of-type(2) {
16324
- border-color: var(--fwe-orange);
16320
+ .fwe-snackbar.fwe-snackbar-warning .fwe-snackbar-link-btn {
16321
+ color: var(--fwe-orange);
16325
16322
  }
16326
16323
  .fwe-snackbar.fwe-snackbar-error {
16327
16324
  border-color: var(--fwe-red);
16328
16325
  background-color: var(--fwe-snackbar-error-bg);
16329
16326
  }
16330
- .fwe-snackbar.fwe-snackbar-error > .fwe-icon:nth-of-type(1), .fwe-navbar .fwe-snackbar.fwe-snackbar-error > .fwe-navbar-burger-menu:nth-of-type(1) {
16331
- color: var(--fwe-red);
16327
+ .fwe-snackbar.fwe-snackbar-error span::before {
16328
+ background-color: var(--fwe-red);
16329
+ -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGcgZGF0YS1uYW1lPSJjb250ZW50Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTEyIDFhMTEgMTEgMCAxIDAgMTEgMTFBMTEgMTEgMCAwIDAgMTIgMVptNS43IDE1LjItMS41IDEuNS00LjItNC4zLTQuMiA0LjMtMS41LTEuNSA0LjMtNC4yLTQuMy00LjIgMS41LTEuNSA0LjIgNC4zIDQuMi00LjMgMS41IDEuNS00LjMgNC4yWiIvPjwvZz48L3N2Zz4=");
16330
+ mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGcgZGF0YS1uYW1lPSJjb250ZW50Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTEyIDFhMTEgMTEgMCAxIDAgMTEgMTFBMTEgMTEgMCAwIDAgMTIgMVptNS43IDE1LjItMS41IDEuNS00LjItNC4zLTQuMiA0LjMtMS41LTEuNSA0LjMtNC4yLTQuMy00LjIgMS41LTEuNSA0LjIgNC4zIDQuMi00LjMgMS41IDEuNS00LjMgNC4yWiIvPjwvZz48L3N2Zz4=");
16332
16331
  }
16333
- .fwe-snackbar.fwe-snackbar-error .fwe-btn {
16334
- color: var(--fwe-red);
16332
+ .fwe-snackbar.fwe-snackbar-error .fwe-snackbar-close-btn {
16333
+ background-color: var(--fwe-red);
16335
16334
  }
16336
- .fwe-snackbar.fwe-snackbar-error .fwe-btn:hover {
16337
- color: var(--fwe-red-dark);
16335
+ .fwe-snackbar.fwe-snackbar-error .fwe-snackbar-separator {
16336
+ background-color: var(--fwe-red);
16338
16337
  }
16339
- .fwe-snackbar.fwe-snackbar-error .fwe-btn:nth-of-type(2) {
16340
- border-color: var(--fwe-red);
16338
+ .fwe-snackbar.fwe-snackbar-error .fwe-snackbar-link-btn {
16339
+ color: var(--fwe-red);
16340
+ }
16341
+ .fwe-snackbar .fwe-snackbar-separator {
16342
+ height: 24px;
16343
+ width: 1px;
16344
+ margin: 0px 12px;
16345
+ background: var(--fwe-hero);
16341
16346
  }
16342
16347
  .fwe-snackbar.fwe-snackbar-b {
16343
16348
  border: none;
16344
16349
  background-color: var(--fwe-white);
16345
16350
  }
16346
- .fwe-snackbar.fwe-snackbar-b .fwe-icon, .fwe-snackbar.fwe-snackbar-b .fwe-navbar .fwe-navbar-burger-menu, .fwe-navbar .fwe-snackbar.fwe-snackbar-b .fwe-navbar-burger-menu {
16347
- color: var(--fwe-icon-black);
16351
+ .fwe-snackbar.fwe-snackbar-b span::before {
16352
+ background-color: var(--fwe-text);
16348
16353
  }
16349
- .fwe-snackbar.fwe-snackbar-b .fwe-btn {
16350
- color: var(--fwe-hero);
16354
+ .fwe-snackbar.fwe-snackbar-b .fwe-snackbar-close-btn {
16355
+ background-color: var(--fwe-text);
16351
16356
  }
16352
- .fwe-snackbar.fwe-snackbar-b .fwe-btn:hover {
16353
- color: var(--fwe-hero-dark);
16357
+ .fwe-snackbar.fwe-snackbar-b .fwe-snackbar-close-btn:hover {
16358
+ background-color: var(--fwe-hero-dark);
16354
16359
  }
16355
- .fwe-snackbar.fwe-snackbar-b .fwe-btn:hover .fwe-icon, .fwe-snackbar.fwe-snackbar-b .fwe-btn:hover .fwe-navbar .fwe-navbar-burger-menu, .fwe-navbar .fwe-snackbar.fwe-snackbar-b .fwe-btn:hover .fwe-navbar-burger-menu {
16356
- color: var(--fwe-hero-dark);
16360
+ .fwe-snackbar.fwe-snackbar-b .fwe-snackbar-separator {
16361
+ background-color: var(--fwe-text);
16357
16362
  }
16358
- .fwe-snackbar.fwe-snackbar-b .fwe-btn:nth-of-type(2) {
16359
- border-color: rgba(0, 0, 0, 0.7);
16363
+ .fwe-snackbar.fwe-snackbar-b .fwe-snackbar-link-btn {
16364
+ color: var(--fwe-hero);
16360
16365
  }
16361
- .fwe-snackbar.fwe-snackbar-b.fwe-snackbar-warning .fwe-icon, .fwe-snackbar.fwe-snackbar-b.fwe-snackbar-warning .fwe-navbar .fwe-navbar-burger-menu, .fwe-navbar .fwe-snackbar.fwe-snackbar-b.fwe-snackbar-warning .fwe-navbar-burger-menu, .fwe-snackbar.fwe-snackbar-b.fwe-snackbar-error .fwe-icon, .fwe-snackbar.fwe-snackbar-b.fwe-snackbar-error .fwe-navbar .fwe-navbar-burger-menu, .fwe-navbar .fwe-snackbar.fwe-snackbar-b.fwe-snackbar-error .fwe-navbar-burger-menu {
16362
- color: var(--fwe-icon-black);
16366
+ .fwe-snackbar.fwe-snackbar-b .fwe-snackbar-link-btn:hover {
16367
+ color: var(--fwe-hero-dark);
16363
16368
  }
16364
16369
  .fwe-snackbar.fwe-snackbar-c {
16365
16370
  border: none;
16366
16371
  color: var(--fwe-white);
16367
16372
  background-color: var(--fwe-hero);
16368
16373
  }
16369
- .fwe-snackbar.fwe-snackbar-c .fwe-btn:nth-of-type(2) {
16370
- border-left: 1px solid rgba(255, 255, 255, 0.5);
16374
+ .fwe-snackbar.fwe-snackbar-c.fwe-snackbar-warning {
16375
+ background-color: var(--fwe-orange);
16371
16376
  }
16372
- .fwe-snackbar.fwe-snackbar-c .fwe-icon, .fwe-snackbar.fwe-snackbar-c .fwe-navbar .fwe-navbar-burger-menu, .fwe-navbar .fwe-snackbar.fwe-snackbar-c .fwe-navbar-burger-menu {
16373
- color: var(--fwe-white);
16377
+ .fwe-snackbar.fwe-snackbar-c.fwe-snackbar-error {
16378
+ background-color: var(--fwe-red);
16374
16379
  }
16375
- .fwe-snackbar.fwe-snackbar-c .fwe-btn-link {
16376
- color: var(--fwe-white);
16380
+ .fwe-snackbar.fwe-snackbar-c span::before {
16381
+ background-color: var(--fwe-white);
16377
16382
  }
16378
- .fwe-snackbar.fwe-snackbar-c .fwe-btn-link:hover {
16379
- color: var(--fwe-white-dark);
16383
+ .fwe-snackbar.fwe-snackbar-c .fwe-snackbar-close-btn {
16384
+ background-color: var(--fwe-white);
16380
16385
  }
16381
- .fwe-snackbar.fwe-snackbar-c .fwe-btn-link:hover .fwe-icon, .fwe-snackbar.fwe-snackbar-c .fwe-btn-link:hover .fwe-navbar .fwe-navbar-burger-menu, .fwe-navbar .fwe-snackbar.fwe-snackbar-c .fwe-btn-link:hover .fwe-navbar-burger-menu {
16382
- color: var(--fwe-white-dark);
16386
+ .fwe-snackbar.fwe-snackbar-c .fwe-snackbar-close-btn:hover {
16387
+ background-color: var(--fwe-background);
16383
16388
  }
16384
- .fwe-snackbar.fwe-snackbar-c.fwe-snackbar-warning {
16385
- background-color: var(--fwe-orange);
16389
+ .fwe-snackbar.fwe-snackbar-c .fwe-snackbar-separator {
16390
+ background-color: var(--fwe-white);
16386
16391
  }
16387
- .fwe-snackbar.fwe-snackbar-c.fwe-snackbar-warning .fwe-icon, .fwe-snackbar.fwe-snackbar-c.fwe-snackbar-warning .fwe-navbar .fwe-navbar-burger-menu, .fwe-navbar .fwe-snackbar.fwe-snackbar-c.fwe-snackbar-warning .fwe-navbar-burger-menu {
16392
+ .fwe-snackbar.fwe-snackbar-c .fwe-snackbar-link-btn {
16388
16393
  color: var(--fwe-white);
16389
16394
  }
16390
- .fwe-snackbar.fwe-snackbar-c.fwe-snackbar-error {
16391
- background-color: var(--fwe-red);
16392
- }
16393
- .fwe-snackbar.fwe-snackbar-c.fwe-snackbar-error .fwe-icon, .fwe-snackbar.fwe-snackbar-c.fwe-snackbar-error .fwe-navbar .fwe-navbar-burger-menu, .fwe-navbar .fwe-snackbar.fwe-snackbar-c.fwe-snackbar-error .fwe-navbar-burger-menu {
16394
- color: var(--fwe-white);
16395
+ .fwe-snackbar.fwe-snackbar-c .fwe-snackbar-link-btn:hover {
16396
+ color: var(--fwe-background);
16395
16397
  }
16396
16398
 
16397
16399
  .fwe-snackbar-container {
@@ -16459,15 +16461,6 @@ fieldset.fwe-progress-container label {
16459
16461
  overflow: hidden;
16460
16462
  text-overflow: ellipsis;
16461
16463
  }
16462
- .fwe-modal-h1 .fwe-icon, .fwe-modal-h1 .fwe-navbar .fwe-navbar-burger-menu, .fwe-navbar .fwe-modal-h1 .fwe-navbar-burger-menu,
16463
- .fwe-modal-h1 .fwe-svg-icon {
16464
- display: none;
16465
- position: relative;
16466
- top: 2px;
16467
- margin-right: 8px;
16468
- font-size: var(--fwe-font-size-xl);
16469
- font-family: var(--fwe-font-family-icons-24);
16470
- }
16471
16464
  .fwe-modal-h2 {
16472
16465
  margin-top: 0;
16473
16466
  margin-bottom: 12px;
@@ -16478,19 +16471,24 @@ fieldset.fwe-progress-container label {
16478
16471
  white-space: nowrap;
16479
16472
  overflow: hidden;
16480
16473
  text-overflow: ellipsis;
16481
- }
16482
- .fwe-modal-h2 .fwe-icon, .fwe-modal-h2 .fwe-navbar .fwe-navbar-burger-menu, .fwe-navbar .fwe-modal-h2 .fwe-navbar-burger-menu,
16483
- .fwe-modal-h2 .fwe-svg-icon {
16484
16474
  position: relative;
16485
- top: 2px;
16486
- margin-right: 8px;
16487
16475
  }
16488
- .fwe-modal-close {
16476
+ .fwe-modal-close-btn {
16489
16477
  position: absolute;
16490
16478
  top: 32px;
16491
16479
  right: 32px;
16492
16480
  width: 32px;
16493
16481
  height: 32px;
16482
+ padding: 0;
16483
+ border: none;
16484
+ min-width: 32px;
16485
+ cursor: pointer;
16486
+ background: var(--fwe-text);
16487
+ -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgzMnYzMkgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PHBhdGggZmlsbD0iIzMzMyIgZD0iTTIxLjQ4IDkuMSAxNiAxNC41OSAxMC41MSA5LjEgOS4xIDEwLjUyIDE0LjU4IDE2IDkuMSAyMS40OWwxLjQxIDEuNDFMMTYgMTcuNDJsNS40OCA1LjQ4IDEuNDItMS40MUwxNy40MSAxNmw1LjQ5LTUuNDgtMS40Mi0xLjQyeiIgZGF0YS1uYW1lPSJjb250ZW50Ii8+PC9zdmc+");
16488
+ mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgzMnYzMkgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PHBhdGggZmlsbD0iIzMzMyIgZD0iTTIxLjQ4IDkuMSAxNiAxNC41OSAxMC41MSA5LjEgOS4xIDEwLjUyIDE0LjU4IDE2IDkuMSAyMS40OWwxLjQxIDEuNDFMMTYgMTcuNDJsNS40OCA1LjQ4IDEuNDItMS40MUwxNy40MSAxNmw1LjQ5LTUuNDgtMS40Mi0xLjQyeiIgZGF0YS1uYW1lPSJjb250ZW50Ii8+PC9zdmc+");
16489
+ }
16490
+ .fwe-modal-close-btn:hover {
16491
+ background: var(--fwe-hero);
16494
16492
  }
16495
16493
  .fwe-modal-header {
16496
16494
  flex-shrink: 0;
@@ -16522,38 +16520,54 @@ fieldset.fwe-progress-container label {
16522
16520
  .fwe-modal--with-indicator-bar.fwe-modal--warning button.fwe-btn.fwe-btn-link, .fwe-modal--with-indicator-bar.fwe-modal--error button.fwe-btn.fwe-btn-link {
16523
16521
  color: var(--fwe-text);
16524
16522
  }
16525
- .fwe-modal--info button.fwe-btn.fwe-btn-link {
16526
- color: var(--fwe-text);
16523
+ .fwe-modal--info .fwe-modal-h2, .fwe-modal--warning .fwe-modal-h2, .fwe-modal--error .fwe-modal-h2 {
16524
+ padding-left: 24px;
16527
16525
  }
16528
- .fwe-modal--info .fwe-modal-header h1 .fwe-icon, .fwe-modal--info .fwe-modal-header h1 .fwe-navbar .fwe-navbar-burger-menu, .fwe-navbar .fwe-modal--info .fwe-modal-header h1 .fwe-navbar-burger-menu,
16529
- .fwe-modal--info .fwe-modal-header h1 .fwe-svg-icon,
16530
- .fwe-modal--info .fwe-modal-header h2 .fwe-icon,
16531
- .fwe-modal--info .fwe-modal-header h2 .fwe-navbar .fwe-navbar-burger-menu,
16532
- .fwe-navbar .fwe-modal--info .fwe-modal-header h2 .fwe-navbar-burger-menu,
16533
- .fwe-modal--info .fwe-modal-header h2 .fwe-svg-icon {
16534
- color: var(--fwe-hero);
16526
+ .fwe-modal--info .fwe-modal-h2::before, .fwe-modal--warning .fwe-modal-h2::before, .fwe-modal--error .fwe-modal-h2::before {
16527
+ content: "";
16528
+ position: absolute;
16529
+ left: 0px;
16530
+ top: 1px;
16531
+ height: 16px;
16532
+ width: 16px;
16533
+ }
16534
+ @media (max-width: 600px), (max-height: 600px) {
16535
+ .fwe-modal--info .fwe-modal-h1, .fwe-modal--warning .fwe-modal-h1, .fwe-modal--error .fwe-modal-h1 {
16536
+ padding-left: 32px;
16537
+ position: relative;
16538
+ }
16539
+ .fwe-modal--info .fwe-modal-h1::before, .fwe-modal--warning .fwe-modal-h1::before, .fwe-modal--error .fwe-modal-h1::before {
16540
+ content: "";
16541
+ position: absolute;
16542
+ left: 0px;
16543
+ top: 4px;
16544
+ height: 24px;
16545
+ width: 24px;
16546
+ }
16547
+ }
16548
+ .fwe-modal--info .fwe-modal-h2::before {
16549
+ background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxNnYxNkgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PHBhdGggZmlsbD0iIzAwOTFkYyIgZD0iTTggMWE3IDcgMCAxIDAgNyA3IDcgNyAwIDAgMC03LTdabTEgMTJIN1Y3aDJabTAtOEg3VjNoMloiIGRhdGEtbmFtZT0iY29udGVudCIvPjwvc3ZnPg==");
16550
+ }
16551
+ .fwe-modal--info .fwe-modal-h1::before {
16552
+ background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PHBhdGggZmlsbD0iIzAwOTFkYyIgZD0iTTEyIDFhMTEgMTEgMCAxIDAgMTEgMTFBMTEuMDMyIDExLjAzMiAwIDAgMCAxMiAxWm0xIDE4aC0ydi05aDJabTAtMTJoLTJWNWgyWiIgZGF0YS1uYW1lPSJjb250ZW50Ii8+PC9zdmc+");
16535
16553
  }
16536
16554
  .fwe-modal--warning {
16537
16555
  border-color: var(--fwe-orange);
16538
16556
  }
16539
- .fwe-modal--warning .fwe-modal-header h1 .fwe-icon, .fwe-modal--warning .fwe-modal-header h1 .fwe-navbar .fwe-navbar-burger-menu, .fwe-navbar .fwe-modal--warning .fwe-modal-header h1 .fwe-navbar-burger-menu,
16540
- .fwe-modal--warning .fwe-modal-header h1 .fwe-svg-icon,
16541
- .fwe-modal--warning .fwe-modal-header h2 .fwe-icon,
16542
- .fwe-modal--warning .fwe-modal-header h2 .fwe-navbar .fwe-navbar-burger-menu,
16543
- .fwe-navbar .fwe-modal--warning .fwe-modal-header h2 .fwe-navbar-burger-menu,
16544
- .fwe-modal--warning .fwe-modal-header h2 .fwe-svg-icon {
16545
- color: var(--fwe-orange);
16557
+ .fwe-modal--warning .fwe-modal-h2::before {
16558
+ background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxNnYxNkgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PHBhdGggZmlsbD0iI2ZmOTYwMCIgZD0iTTE1LjIxNiAxMy41MyA4Ljg4MiAxLjY1M2ExIDEgMCAwIDAtMS43NjQgMEwuNzg0IDEzLjUzQTEgMSAwIDAgMCAxLjY2NyAxNWgxMi42NjZhMSAxIDAgMCAwIC44ODMtMS40N1pNOSAxM0g3di0yaDJabTAtM0g3VjVoMloiIGRhdGEtbmFtZT0iY29udGVudCIvPjwvc3ZnPg==");
16559
+ }
16560
+ .fwe-modal--warning .fwe-modal-h1::before {
16561
+ background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PHBhdGggZmlsbD0iI2ZmOTYwMCIgZD0iTTIyLjQgMTkuODYgMTMuMjczIDIuNzQzYTEuNDQxIDEuNDQxIDAgMCAwLTIuNTQ0IDBMMS42IDE5Ljg2YTEuNDQxIDEuNDQxIDAgMCAwIDEuMjcyIDIuMTJIMjEuMTNhMS40NDEgMS40NDEgMCAwIDAgMS4yNzItMi4xMlpNMTEgN2gydjhoLTJabTIuMDA1IDExLjk2NWgtMi4wMXYtMi4wMWgyLjAxWiIgZGF0YS1uYW1lPSJjb250ZW50Ii8+PC9zdmc+");
16546
16562
  }
16547
16563
  .fwe-modal--error {
16548
16564
  border-color: var(--fwe-red);
16549
16565
  }
16550
- .fwe-modal--error .fwe-modal-header h1 .fwe-icon, .fwe-modal--error .fwe-modal-header h1 .fwe-navbar .fwe-navbar-burger-menu, .fwe-navbar .fwe-modal--error .fwe-modal-header h1 .fwe-navbar-burger-menu,
16551
- .fwe-modal--error .fwe-modal-header h1 .fwe-svg-icon,
16552
- .fwe-modal--error .fwe-modal-header h2 .fwe-icon,
16553
- .fwe-modal--error .fwe-modal-header h2 .fwe-navbar .fwe-navbar-burger-menu,
16554
- .fwe-navbar .fwe-modal--error .fwe-modal-header h2 .fwe-navbar-burger-menu,
16555
- .fwe-modal--error .fwe-modal-header h2 .fwe-svg-icon {
16556
- color: var(--fwe-red);
16566
+ .fwe-modal--error .fwe-modal-h2::before {
16567
+ background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxNnYxNkgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PHBhdGggZmlsbD0iI2Q1MDAwMCIgZD0iTTggMS4wODFhNi45NiA2Ljk2IDAgMSAwIDYuOTYgNi45NkE2Ljk2IDYuOTYgMCAwIDAgOCAxLjA4Wm0yLjM5NyA5Ljk3MUw3Ljk1OCA4LjYxM2wtMi4zNTUgMi4zNTYtLjYzNy0uNjM3IDIuMzU2LTIuMzU1LTIuMjI4LTIuMjI4LjYzNi0uNjM3TDcuOTU4IDcuMzRsMi4zMTEtMi4zMTEuNjM3LjYzNy0yLjMxMSAyLjMxMSAyLjQzOSAyLjQzOFoiIGRhdGEtbmFtZT0iY29udGVudCIvPjwvc3ZnPg==");
16568
+ }
16569
+ .fwe-modal--error .fwe-modal-h1::before {
16570
+ background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PHBhdGggZmlsbD0iI2Q1MDAwMCIgZD0iTTEyIDFhMTEgMTEgMCAxIDAgMTEgMTFBMTEgMTEgMCAwIDAgMTIgMVptNS43IDE1LjItMS41IDEuNS00LjItNC4zLTQuMiA0LjMtMS41LTEuNSA0LjMtNC4yLTQuMy00LjIgMS41LTEuNSA0LjIgNC4zIDQuMi00LjMgMS41IDEuNS00LjMgNC4yWiIgZGF0YS1uYW1lPSJjb250ZW50Ii8+PC9zdmc+");
16557
16571
  }
16558
16572
  .fwe-modal--large {
16559
16573
  max-width: 912px;
@@ -16585,7 +16599,7 @@ fieldset.fwe-progress-container label {
16585
16599
  justify-content: unset !important;
16586
16600
  grid-auto-columns: minmax(0, 1fr) !important;
16587
16601
  }
16588
- .fwe-modal-close {
16602
+ .fwe-modal-close-btn {
16589
16603
  top: 12px;
16590
16604
  right: 12px;
16591
16605
  }
@@ -16596,10 +16610,6 @@ fieldset.fwe-progress-container label {
16596
16610
  margin-bottom: 24px;
16597
16611
  margin-right: 16px;
16598
16612
  }
16599
- .fwe-modal-h1 .fwe-icon, .fwe-modal-h1 .fwe-navbar .fwe-navbar-burger-menu, .fwe-navbar .fwe-modal-h1 .fwe-navbar-burger-menu,
16600
- .fwe-modal-h1 .fwe-svg-icon {
16601
- display: inline-block;
16602
- }
16603
16613
  .fwe-modal-h2 {
16604
16614
  position: absolute;
16605
16615
  width: 1px;