@festo-ui/web-essentials 7.0.0-dev.319 → 7.0.0-dev.349

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 +118 -75
  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/_navbar-menu.scss +173 -29
  8. package/dist/scss/_slider.scss +2 -70
  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/_navbar-menu.scss +173 -29
  13. package/scss/_slider.scss +2 -70
package/dist/css/festo-web-essentials.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * Festo UI - Web Essentials v7.0.0-dev.319 (https://storybook.festo.design/)
2
+ * Festo UI - Web Essentials v7.0.0-dev.349 (https://storybook.festo.design/)
3
3
  * Copyright 2022 Festo SE & Co. KG
4
4
  * Licensed under Apache-2.0
5
5
  */
@@ -15483,60 +15483,13 @@ a.fwe-btn.fwe-disabled {
15483
15483
  pointer-events: none;
15484
15484
  }
15485
15485
 
15486
- input[type=range].fwe-slider-input.fwe-slider-lg::-webkit-slider-thumb, label.fwe-slider.fwe-slider-lg input[type=range].fwe-slider-input::-webkit-slider-thumb {
15487
- width: 16px;
15488
- height: 16px;
15489
- margin-top: -6px;
15490
- }
15491
- input[type=range].fwe-slider-input.fwe-slider-lg::-moz-range-thumb, label.fwe-slider.fwe-slider-lg input[type=range].fwe-slider-input::-moz-range-thumb {
15492
- width: 16px;
15493
- height: 16px;
15494
- }
15495
- input[type=range].fwe-slider-input.fwe-slider-lg::-ms-thumb, label.fwe-slider.fwe-slider-lg input[type=range].fwe-slider-input::-ms-thumb {
15496
- width: 12px;
15497
- height: 12px;
15498
- }
15499
- input[type=range].fwe-slider-input.fwe-slider-lg::-webkit-slider-runnable-track, label.fwe-slider.fwe-slider-lg input[type=range].fwe-slider-input::-webkit-slider-runnable-track {
15500
- height: 2px;
15501
- }
15502
- input[type=range].fwe-slider-input.fwe-slider-lg::-moz-range-track, label.fwe-slider.fwe-slider-lg input[type=range].fwe-slider-input::-moz-range-track {
15503
- height: 2px;
15504
- }
15505
- input[type=range].fwe-slider-input.fwe-slider-lg::-moz-range-progress, label.fwe-slider.fwe-slider-lg input[type=range].fwe-slider-input::-moz-range-progress {
15506
- height: 2px;
15507
- }
15508
- input[type=range].fwe-slider-input.fwe-slider-lg::-ms-track, label.fwe-slider.fwe-slider-lg input[type=range].fwe-slider-input::-ms-track {
15509
- height: 2px;
15510
- border-width: 32px 0;
15511
- }
15512
- input[type=range].fwe-slider-input.fwe-slider-lg:hover:not(:disabled)::-webkit-slider-thumb, label.fwe-slider.fwe-slider-lg input[type=range].fwe-slider-input:hover:not(:disabled)::-webkit-slider-thumb {
15513
- margin-top: -14px;
15514
- height: 32px;
15515
- width: 32px;
15516
- }
15517
- input[type=range].fwe-slider-input.fwe-slider-lg:hover:not(:disabled)::-moz-range-thumb, label.fwe-slider.fwe-slider-lg input[type=range].fwe-slider-input:hover:not(:disabled)::-moz-range-thumb {
15518
- height: 32px;
15519
- width: 32px;
15520
- }
15521
- input[type=range].fwe-slider-input.fwe-slider-lg:hover:not(:disabled)::-ms-thumb, label.fwe-slider.fwe-slider-lg input[type=range].fwe-slider-input:hover:not(:disabled)::-ms-thumb {
15522
- box-shadow: 0px 0px 0px 8px var(--fwe-hero);
15523
- }
15524
- input[type=range].fwe-slider-input.fwe-slider-lg:active:not(:disabled)::-webkit-slider-thumb, label.fwe-slider.fwe-slider-lg input[type=range].fwe-slider-input:active:not(:disabled)::-webkit-slider-thumb {
15525
- box-shadow: 0px 0px 0px 16px rgba(0, 145, 220, 0.3);
15526
- }
15527
- input[type=range].fwe-slider-input.fwe-slider-lg:active:not(:disabled)::-moz-range-thumb, label.fwe-slider.fwe-slider-lg input[type=range].fwe-slider-input:active:not(:disabled)::-moz-range-thumb {
15528
- box-shadow: 0px 0px 0px 16px rgba(0, 145, 220, 0.3);
15529
- }
15530
- input[type=range].fwe-slider-input.fwe-slider-lg:active:not(:disabled)::-ms-thumb, label.fwe-slider.fwe-slider-lg input[type=range].fwe-slider-input:active:not(:disabled)::-ms-thumb {
15531
- box-shadow: 0px 0px 0px 8px var(--fwe-hero), 0px 0px 0px 24px rgba(0, 145, 220, 0.3) !important;
15532
- }
15533
-
15534
15486
  label.fwe-slider span {
15535
15487
  margin-bottom: 4px;
15536
15488
  display: inline-block;
15537
15489
  font-size: var(--fwe-font-size-md);
15538
15490
  color: var(--fwe-text-light);
15539
15491
  }
15492
+
15540
15493
  input[type=range].fwe-slider-input {
15541
15494
  -webkit-appearance: none;
15542
15495
  -moz-appearance: none;
@@ -15544,8 +15497,8 @@ input[type=range].fwe-slider-input {
15544
15497
  width: 100%;
15545
15498
  background: transparent;
15546
15499
  padding: 0px;
15547
- padding-top: 8px;
15548
- padding-bottom: 8px;
15500
+ padding-top: 16px;
15501
+ padding-bottom: 16px;
15549
15502
  cursor: pointer;
15550
15503
  }
15551
15504
  @-moz-document url-prefix() {
@@ -15663,6 +15616,7 @@ input[type=range].fwe-slider-input:disabled::-ms-thumb {
15663
15616
  background: var(--fwe-control);
15664
15617
  border: 1px solid var(--fwe-control);
15665
15618
  }
15619
+
15666
15620
  .fwe-waiting-container {
15667
15621
  width: 100%;
15668
15622
  height: 100%;
@@ -17076,59 +17030,148 @@ fieldset.fwe-progress-container label {
17076
17030
  .fwe-notification-button {
17077
17031
  width: 32px;
17078
17032
  }
17079
- .fwe-notification-button.fwe-selected .fwe-warning {
17033
+ .fwe-notification-button.fwe-info {
17034
+ color: var(--fwe-hero);
17035
+ background: var(--fwe-white);
17036
+ }
17037
+ .fwe-notification-button.fwe-info:has(.fwe-notification-batch) {
17038
+ color: var(--fwe-text);
17039
+ }
17040
+ .fwe-notification-button.fwe-info::before {
17041
+ background: var(--fwe-white);
17042
+ }
17043
+ .fwe-notification-button.fwe-info .fwe-notification-batch {
17044
+ background: var(--fwe-hero);
17045
+ }
17046
+ .fwe-notification-button.fwe-info.fwe-selected {
17047
+ color: var(--fwe-hero);
17048
+ }
17049
+ .fwe-notification-button.fwe-info.fwe-selected::before {
17050
+ background: var(--fwe-hero);
17051
+ }
17052
+ .fwe-notification-button.fwe-warning {
17080
17053
  color: var(--fwe-orange);
17054
+ background: var(--fwe-white);
17055
+ }
17056
+ .fwe-notification-button.fwe-warning:has(.fwe-notification-batch) {
17057
+ color: var(--fwe-text);
17081
17058
  }
17082
- .fwe-notification-button.fwe-selected .fwe-error {
17059
+ .fwe-notification-button.fwe-warning::before {
17060
+ background: var(--fwe-white);
17061
+ }
17062
+ .fwe-notification-button.fwe-warning .fwe-notification-batch {
17063
+ background: var(--fwe-orange);
17064
+ }
17065
+ .fwe-notification-button.fwe-warning.fwe-selected {
17066
+ color: var(--fwe-orange);
17067
+ }
17068
+ .fwe-notification-button.fwe-warning.fwe-selected::before {
17069
+ background: var(--fwe-orange);
17070
+ }
17071
+ .fwe-notification-button.fwe-error {
17083
17072
  color: var(--fwe-red);
17073
+ background: var(--fwe-white);
17084
17074
  }
17085
- .fwe-notification-button .fwe-notification-batch {
17086
- position: absolute;
17087
- border-radius: 50%;
17088
- height: 22px;
17089
- line-height: calc(var(--fwe-font-size-small) + 4px);
17090
- width: 22px;
17091
- font-size: var(--fwe-font-size-small);
17092
- color: var(--fwe-white) !important;
17093
- background: var(--fwe-caerul);
17094
- border: 2px solid var(--fwe-white);
17095
- top: -10px;
17096
- right: -10px;
17075
+ .fwe-notification-button.fwe-error:has(.fwe-notification-batch) {
17076
+ color: var(--fwe-text);
17097
17077
  }
17098
- .fwe-notification-button.fwe-warning {
17078
+ .fwe-notification-button.fwe-error::before {
17079
+ background: var(--fwe-white);
17080
+ }
17081
+ .fwe-notification-button.fwe-error .fwe-notification-batch {
17082
+ background: var(--fwe-red);
17083
+ }
17084
+ .fwe-notification-button.fwe-error.fwe-selected {
17085
+ color: var(--fwe-red);
17086
+ }
17087
+ .fwe-notification-button.fwe-error.fwe-selected::before {
17088
+ background: var(--fwe-red);
17089
+ }
17090
+ .fwe-notification-button:hover.fwe-info {
17091
+ color: var(--fwe-hero-hover);
17092
+ background: var(--fwe-white);
17093
+ }
17094
+ .fwe-notification-button:hover.fwe-info .fwe-notification-batch {
17095
+ background: var(--fwe-hero-hover);
17096
+ }
17097
+ .fwe-notification-button:hover.fwe-warning {
17098
+ color: var(--fwe-orange-hover);
17099
+ background: var(--fwe-white);
17100
+ }
17101
+ .fwe-notification-button:hover.fwe-warning .fwe-notification-batch {
17102
+ background: var(--fwe-orange-hover);
17103
+ }
17104
+ .fwe-notification-button:hover.fwe-error {
17105
+ color: var(--fwe-red-hover);
17106
+ background: var(--fwe-white);
17107
+ }
17108
+ .fwe-notification-button:hover.fwe-error .fwe-notification-batch {
17109
+ background: var(--fwe-red-hover);
17110
+ }
17111
+ .fwe-notification-button.fwe-notification-button--strong.fwe-info {
17112
+ color: var(--fwe-white);
17113
+ background: var(--fwe-hero);
17114
+ }
17115
+ .fwe-notification-button.fwe-notification-button--strong.fwe-info::before {
17116
+ background: var(--fwe-hero);
17117
+ }
17118
+ .fwe-notification-button.fwe-notification-button--strong.fwe-info .fwe-notification-batch {
17119
+ background: var(--fwe-text);
17120
+ }
17121
+ .fwe-notification-button.fwe-notification-button--strong.fwe-warning {
17099
17122
  color: var(--fwe-white);
17100
17123
  background: var(--fwe-orange);
17101
17124
  }
17102
- .fwe-notification-button.fwe-warning::before {
17125
+ .fwe-notification-button.fwe-notification-button--strong.fwe-warning::before {
17103
17126
  background: var(--fwe-orange);
17104
17127
  }
17105
- .fwe-notification-button.fwe-warning .fwe-notification-batch {
17128
+ .fwe-notification-button.fwe-notification-button--strong.fwe-warning .fwe-notification-batch {
17106
17129
  background: var(--fwe-text);
17107
17130
  }
17108
- .fwe-notification-button.fwe-error {
17131
+ .fwe-notification-button.fwe-notification-button--strong.fwe-error {
17109
17132
  color: var(--fwe-white);
17110
17133
  background: var(--fwe-red);
17111
17134
  }
17112
- .fwe-notification-button.fwe-error::before {
17135
+ .fwe-notification-button.fwe-notification-button--strong.fwe-error::before {
17113
17136
  background: var(--fwe-red);
17114
17137
  }
17115
- .fwe-notification-button.fwe-error .fwe-notification-batch {
17138
+ .fwe-notification-button.fwe-notification-button--strong.fwe-error .fwe-notification-batch {
17116
17139
  background: var(--fwe-text);
17117
17140
  }
17118
- .fwe-notification-button:hover.fwe-warning {
17141
+ .fwe-notification-button.fwe-notification-button--strong:hover.fwe-info {
17142
+ color: var(--fwe-white);
17143
+ background: var(--fwe-hero-hover);
17144
+ }
17145
+ .fwe-notification-button.fwe-notification-button--strong:hover.fwe-info::before {
17146
+ background: var(--fwe-hero-hover);
17147
+ }
17148
+ .fwe-notification-button.fwe-notification-button--strong:hover.fwe-warning {
17119
17149
  color: var(--fwe-white);
17120
17150
  background: var(--fwe-orange-hover);
17121
17151
  }
17122
- .fwe-notification-button:hover.fwe-warning::before {
17152
+ .fwe-notification-button.fwe-notification-button--strong:hover.fwe-warning::before {
17123
17153
  background: var(--fwe-orange-hover);
17124
17154
  }
17125
- .fwe-notification-button:hover.fwe-error {
17155
+ .fwe-notification-button.fwe-notification-button--strong:hover.fwe-error {
17126
17156
  color: var(--fwe-white);
17127
17157
  background: var(--fwe-red-hover);
17128
17158
  }
17129
- .fwe-notification-button:hover.fwe-error::before {
17159
+ .fwe-notification-button.fwe-notification-button--strong:hover.fwe-error::before {
17130
17160
  background: var(--fwe-red-hover);
17131
17161
  }
17162
+ .fwe-notification-button .fwe-notification-batch {
17163
+ position: absolute;
17164
+ border-radius: 50%;
17165
+ height: 22px;
17166
+ line-height: calc(var(--fwe-font-size-small) + 4px);
17167
+ width: 22px;
17168
+ font-size: var(--fwe-font-size-small);
17169
+ color: var(--fwe-white) !important;
17170
+ background: var(--fwe-caerul);
17171
+ border: 2px solid var(--fwe-white);
17172
+ top: -10px;
17173
+ right: -10px;
17174
+ }
17132
17175
 
17133
17176
  .fwe-notification-menu {
17134
17177
  width: 400px;