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

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 (11) hide show
  1. package/dist/css/festo-web-essentials.css +114 -25
  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/festo-web-essentials.scss +1 -1
  9. package/dist/scss/themes/flatpickr/festo.scss +1 -1
  10. package/package.json +1 -1
  11. package/scss/_navbar-menu.scss +173 -29
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.342 (https://storybook.festo.design/)
3
3
  * Copyright 2022 Festo SE & Co. KG
4
4
  * Licensed under Apache-2.0
5
5
  */
@@ -17076,59 +17076,148 @@ fieldset.fwe-progress-container label {
17076
17076
  .fwe-notification-button {
17077
17077
  width: 32px;
17078
17078
  }
17079
- .fwe-notification-button.fwe-selected .fwe-warning {
17079
+ .fwe-notification-button.fwe-info {
17080
+ color: var(--fwe-hero);
17081
+ background: var(--fwe-white);
17082
+ }
17083
+ .fwe-notification-button.fwe-info:has(.fwe-notification-batch) {
17084
+ color: var(--fwe-text);
17085
+ }
17086
+ .fwe-notification-button.fwe-info::before {
17087
+ background: var(--fwe-white);
17088
+ }
17089
+ .fwe-notification-button.fwe-info .fwe-notification-batch {
17090
+ background: var(--fwe-hero);
17091
+ }
17092
+ .fwe-notification-button.fwe-info.fwe-selected {
17093
+ color: var(--fwe-hero);
17094
+ }
17095
+ .fwe-notification-button.fwe-info.fwe-selected::before {
17096
+ background: var(--fwe-hero);
17097
+ }
17098
+ .fwe-notification-button.fwe-warning {
17099
+ color: var(--fwe-orange);
17100
+ background: var(--fwe-white);
17101
+ }
17102
+ .fwe-notification-button.fwe-warning:has(.fwe-notification-batch) {
17103
+ color: var(--fwe-text);
17104
+ }
17105
+ .fwe-notification-button.fwe-warning::before {
17106
+ background: var(--fwe-white);
17107
+ }
17108
+ .fwe-notification-button.fwe-warning .fwe-notification-batch {
17109
+ background: var(--fwe-orange);
17110
+ }
17111
+ .fwe-notification-button.fwe-warning.fwe-selected {
17080
17112
  color: var(--fwe-orange);
17081
17113
  }
17082
- .fwe-notification-button.fwe-selected .fwe-error {
17114
+ .fwe-notification-button.fwe-warning.fwe-selected::before {
17115
+ background: var(--fwe-orange);
17116
+ }
17117
+ .fwe-notification-button.fwe-error {
17083
17118
  color: var(--fwe-red);
17119
+ background: var(--fwe-white);
17084
17120
  }
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;
17121
+ .fwe-notification-button.fwe-error:has(.fwe-notification-batch) {
17122
+ color: var(--fwe-text);
17097
17123
  }
17098
- .fwe-notification-button.fwe-warning {
17124
+ .fwe-notification-button.fwe-error::before {
17125
+ background: var(--fwe-white);
17126
+ }
17127
+ .fwe-notification-button.fwe-error .fwe-notification-batch {
17128
+ background: var(--fwe-red);
17129
+ }
17130
+ .fwe-notification-button.fwe-error.fwe-selected {
17131
+ color: var(--fwe-red);
17132
+ }
17133
+ .fwe-notification-button.fwe-error.fwe-selected::before {
17134
+ background: var(--fwe-red);
17135
+ }
17136
+ .fwe-notification-button:hover.fwe-info {
17137
+ color: var(--fwe-hero-hover);
17138
+ background: var(--fwe-white);
17139
+ }
17140
+ .fwe-notification-button:hover.fwe-info .fwe-notification-batch {
17141
+ background: var(--fwe-hero-hover);
17142
+ }
17143
+ .fwe-notification-button:hover.fwe-warning {
17144
+ color: var(--fwe-orange-hover);
17145
+ background: var(--fwe-white);
17146
+ }
17147
+ .fwe-notification-button:hover.fwe-warning .fwe-notification-batch {
17148
+ background: var(--fwe-orange-hover);
17149
+ }
17150
+ .fwe-notification-button:hover.fwe-error {
17151
+ color: var(--fwe-red-hover);
17152
+ background: var(--fwe-white);
17153
+ }
17154
+ .fwe-notification-button:hover.fwe-error .fwe-notification-batch {
17155
+ background: var(--fwe-red-hover);
17156
+ }
17157
+ .fwe-notification-button.fwe-notification-button--strong.fwe-info {
17158
+ color: var(--fwe-white);
17159
+ background: var(--fwe-hero);
17160
+ }
17161
+ .fwe-notification-button.fwe-notification-button--strong.fwe-info::before {
17162
+ background: var(--fwe-hero);
17163
+ }
17164
+ .fwe-notification-button.fwe-notification-button--strong.fwe-info .fwe-notification-batch {
17165
+ background: var(--fwe-text);
17166
+ }
17167
+ .fwe-notification-button.fwe-notification-button--strong.fwe-warning {
17099
17168
  color: var(--fwe-white);
17100
17169
  background: var(--fwe-orange);
17101
17170
  }
17102
- .fwe-notification-button.fwe-warning::before {
17171
+ .fwe-notification-button.fwe-notification-button--strong.fwe-warning::before {
17103
17172
  background: var(--fwe-orange);
17104
17173
  }
17105
- .fwe-notification-button.fwe-warning .fwe-notification-batch {
17174
+ .fwe-notification-button.fwe-notification-button--strong.fwe-warning .fwe-notification-batch {
17106
17175
  background: var(--fwe-text);
17107
17176
  }
17108
- .fwe-notification-button.fwe-error {
17177
+ .fwe-notification-button.fwe-notification-button--strong.fwe-error {
17109
17178
  color: var(--fwe-white);
17110
17179
  background: var(--fwe-red);
17111
17180
  }
17112
- .fwe-notification-button.fwe-error::before {
17181
+ .fwe-notification-button.fwe-notification-button--strong.fwe-error::before {
17113
17182
  background: var(--fwe-red);
17114
17183
  }
17115
- .fwe-notification-button.fwe-error .fwe-notification-batch {
17184
+ .fwe-notification-button.fwe-notification-button--strong.fwe-error .fwe-notification-batch {
17116
17185
  background: var(--fwe-text);
17117
17186
  }
17118
- .fwe-notification-button:hover.fwe-warning {
17187
+ .fwe-notification-button.fwe-notification-button--strong:hover.fwe-info {
17188
+ color: var(--fwe-white);
17189
+ background: var(--fwe-hero-hover);
17190
+ }
17191
+ .fwe-notification-button.fwe-notification-button--strong:hover.fwe-info::before {
17192
+ background: var(--fwe-hero-hover);
17193
+ }
17194
+ .fwe-notification-button.fwe-notification-button--strong:hover.fwe-warning {
17119
17195
  color: var(--fwe-white);
17120
17196
  background: var(--fwe-orange-hover);
17121
17197
  }
17122
- .fwe-notification-button:hover.fwe-warning::before {
17198
+ .fwe-notification-button.fwe-notification-button--strong:hover.fwe-warning::before {
17123
17199
  background: var(--fwe-orange-hover);
17124
17200
  }
17125
- .fwe-notification-button:hover.fwe-error {
17201
+ .fwe-notification-button.fwe-notification-button--strong:hover.fwe-error {
17126
17202
  color: var(--fwe-white);
17127
17203
  background: var(--fwe-red-hover);
17128
17204
  }
17129
- .fwe-notification-button:hover.fwe-error::before {
17205
+ .fwe-notification-button.fwe-notification-button--strong:hover.fwe-error::before {
17130
17206
  background: var(--fwe-red-hover);
17131
17207
  }
17208
+ .fwe-notification-button .fwe-notification-batch {
17209
+ position: absolute;
17210
+ border-radius: 50%;
17211
+ height: 22px;
17212
+ line-height: calc(var(--fwe-font-size-small) + 4px);
17213
+ width: 22px;
17214
+ font-size: var(--fwe-font-size-small);
17215
+ color: var(--fwe-white) !important;
17216
+ background: var(--fwe-caerul);
17217
+ border: 2px solid var(--fwe-white);
17218
+ top: -10px;
17219
+ right: -10px;
17220
+ }
17132
17221
 
17133
17222
  .fwe-notification-menu {
17134
17223
  width: 400px;