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

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 (27) hide show
  1. package/dist/css/festo-web-essentials.css +28 -7
  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/organisms/festo-web-essentials-organisms.css +25 -7
  6. package/dist/css/organisms/festo-web-essentials-organisms.css.map +1 -1
  7. package/dist/css/organisms/festo-web-essentials-organisms.min.css +1 -1
  8. package/dist/css/organisms/festo-web-essentials-organisms.min.css.map +1 -1
  9. package/dist/css/themes/flatpickr/festo.css +1 -1
  10. package/dist/css/themes/flatpickr/festo.min.css +1 -1
  11. package/dist/scss/_bottom-navigation.scss +1 -1
  12. package/dist/scss/_checkbox.scss +5 -0
  13. package/dist/scss/_pagination.scss +33 -2
  14. package/dist/scss/_select.scss +1 -0
  15. package/dist/scss/_switch.scss +1 -2
  16. package/dist/scss/_toolbar.scss +10 -1
  17. package/dist/scss/festo-web-essentials.scss +1 -1
  18. package/dist/scss/organisms/_image-gallery.scss +31 -8
  19. package/dist/scss/themes/flatpickr/festo.scss +1 -1
  20. package/package.json +1 -1
  21. package/scss/_bottom-navigation.scss +1 -1
  22. package/scss/_checkbox.scss +5 -0
  23. package/scss/_pagination.scss +33 -2
  24. package/scss/_select.scss +1 -0
  25. package/scss/_switch.scss +1 -2
  26. package/scss/_toolbar.scss +10 -1
  27. package/scss/organisms/_image-gallery.scss +31 -8
package/dist/scss/_toolbar.scss CHANGED
@@ -10,9 +10,18 @@
10
10
  .fwe-toolbar-actions {
11
11
  padding-top: 24px;
12
12
 
13
- a,
13
+ a {
14
+ display: flex;
15
+ align-items: center;
16
+ justify-content: center;
17
+ }
18
+
14
19
  button {
15
20
  display: block;
21
+ }
22
+
23
+ a,
24
+ button {
16
25
  height: 60px;
17
26
  width: 60px;
18
27
  line-height: 60px;
package/dist/scss/festo-web-essentials.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * Festo UI - Web Essentials v7.0.0-dev.349 (https://storybook.festo.design/)
2
+ * Festo UI - Web Essentials v7.0.0-dev.351 (https://storybook.festo.design/)
3
3
  * Copyright 2022 Festo SE & Co. KG
4
4
  * Licensed under Apache-2.0
5
5
  */
package/dist/scss/organisms/_image-gallery.scss CHANGED
@@ -11,8 +11,17 @@
11
11
  overflow-y: hidden;
12
12
 
13
13
  .fwe-btn-link i.fwe-icon-menu-close.fwe-modal-image-gallery-close {
14
+ margin-right: 0px;
14
15
  padding-right: 0px;
15
- padding-top: 4px;
16
+ padding-top: 3px;
17
+ }
18
+
19
+ .fwe-btn-link i.fwe-icon-arrows-scale-up.fwe-modal-image-gallery-scale,
20
+ .fwe-btn-link i.fwe-icon-arrows-scale-down.fwe-modal-image-gallery-scale {
21
+ font-size: 24px;
22
+ margin-right: 0px;
23
+ padding-right: 0px;
24
+ padding-top: 3px;
16
25
  }
17
26
 
18
27
  .fwe-image-gallery {
@@ -28,8 +37,8 @@
28
37
  }
29
38
 
30
39
  &--with-container {
31
- border-top: 1px solid $control-border;
32
- border-bottom: 1px solid $control-border;
40
+ border-top: none;
41
+ border-bottom: none;
33
42
 
34
43
  .fwe-image-gallery-header {
35
44
  margin-top: $spacer-m - 6px;
@@ -45,8 +54,13 @@
45
54
 
46
55
  .fwe-image-gallery-content {
47
56
  color: $white;
48
- padding-top: 24px;
49
- padding-bottom: 24px;
57
+ padding-top: $spacer-xl;
58
+ padding-bottom: $spacer-m;
59
+
60
+ h3 {
61
+ margin-top: 0;
62
+ margin-bottom: $spacer;
63
+ }
50
64
  }
51
65
 
52
66
  .fwe-image-gallery-header {
@@ -120,10 +134,12 @@
120
134
  &.swiper-slide-thumb-active,
121
135
  &:hover {
122
136
  opacity: 1;
137
+
123
138
  &::after {
124
139
  opacity: 1;
125
140
  }
126
141
  }
142
+
127
143
  &.swiper-slide-thumb-active {
128
144
  cursor: default;
129
145
  }
@@ -173,6 +189,7 @@
173
189
  &.fwe-active,
174
190
  &:hover {
175
191
  opacity: 1;
192
+
176
193
  &::after {
177
194
  opacity: 1;
178
195
  }
@@ -227,9 +244,14 @@
227
244
  width: 1320px;
228
245
  border-top: none;
229
246
  border-bottom: none;
247
+ position: relative;
230
248
 
231
249
  .fwe-image-gallery-header {
232
- margin-top: none;
250
+ position: absolute;
251
+ top: 0px;
252
+ right: 0px;
253
+ width: 312px;
254
+ margin-top: 0px;
233
255
  }
234
256
  }
235
257
  }
@@ -247,12 +269,13 @@
247
269
  }
248
270
 
249
271
  .fwe-image-gallery-content {
272
+ margin-top: 35px;
250
273
  max-width: 312px;
251
274
  width: 312px;
252
275
  min-width: 312px;
253
276
  margin-left: 24px;
254
- border-top: 1px solid $control-border;
255
- border-bottom: 1px solid $control-border;
277
+ border-top: none;
278
+ border-bottom: none;
256
279
  }
257
280
  }
258
281
  }
package/dist/scss/themes/flatpickr/festo.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * Festo UI - Web Essentials v7.0.0-dev.349 (https://storybook.festo.design/)
2
+ * Festo UI - Web Essentials v7.0.0-dev.351 (https://storybook.festo.design/)
3
3
  * Copyright 2022 Festo SE & Co. KG
4
4
  * Licensed under Apache-2.0
5
5
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@festo-ui/web-essentials",
3
- "version": "7.0.0-dev.349",
3
+ "version": "7.0.0-dev.351",
4
4
  "description": "CSS framework and utils to build FESTO web applications",
5
5
  "keywords": [
6
6
  "css",
package/scss/_bottom-navigation.scss CHANGED
@@ -3,7 +3,7 @@
3
3
  display: flex;
4
4
  background: $white;
5
5
  align-items: flex-start;
6
- justify-content: space-between;
6
+ justify-content: space-around;
7
7
  border-top: 1px solid $border;
8
8
  height: 84px;
9
9
  padding: 22px 16px;
package/scss/_checkbox.scss CHANGED
@@ -147,6 +147,11 @@ label.fwe-checkbox {
147
147
  cursor: not-allowed;
148
148
  }
149
149
 
150
+ &:disabled:checked ~ .fwe-checkbox-checkmark {
151
+ background-color: $control-disabled;
152
+ border-color: $control-disabled;
153
+ }
154
+
150
155
  &:disabled {
151
156
  cursor: not-allowed;
152
157
  }
package/scss/_pagination.scss CHANGED
@@ -1,5 +1,6 @@
1
1
  .fwe-pagination {
2
2
  display: flex;
3
+
3
4
  .fwe-navigate-btn {
4
5
  &::before {
5
6
  content: "";
@@ -7,6 +8,7 @@
7
8
  width: 24px;
8
9
  background-color: $text;
9
10
  }
11
+
10
12
  line-height: normal;
11
13
  box-sizing: border-box;
12
14
  display: inline-flex;
@@ -39,19 +41,24 @@
39
41
  &:disabled,
40
42
  &.fwe-disabled {
41
43
  cursor: default;
44
+
42
45
  &::before {
43
46
  background-color: $text-disabled;
44
47
  }
45
48
  }
46
49
  }
50
+
47
51
  .fwe-navigate-btn-up {
48
52
  @extend .fwe-navigate-btn;
53
+
49
54
  &::before {
50
55
  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0id2hpdGUgYmFja2dyb3VuZCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAyNFYwaDI0djI0eiIvPjxwYXRoIGQ9Ik05LjE3MiAxOC4zNjQgMTUuNTM2IDEyIDkuMTcyIDUuNjM2bC0uNzA4LjcwN0wxNC4xMjEgMTJsLTUuNjU3IDUuNjU3LjcwOC43MDd6Ii8+PC9zdmc+");
51
56
  }
52
57
  }
58
+
53
59
  .fwe-navigate-btn-down {
54
60
  @extend .fwe-navigate-btn;
61
+
55
62
  &::before {
56
63
  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0id2hpdGUgYmFja2dyb3VuZCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAyNFYwaDI0djI0eiIvPjxwYXRoIGQ9Ik0xNC44MjggNS42MzYgOC40NjQgMTJsNi4zNjQgNi4zNjQuNzA4LS43MDdMOS44NzkgMTJsNS42NTctNS42NTctLjcwOC0uNzA3eiIvPjwvc3ZnPg==");
57
64
  }
@@ -65,9 +72,11 @@
65
72
  margin: 9px 4px;
66
73
  background: $control-border;
67
74
  border-radius: 50%;
75
+
68
76
  &:hover {
69
77
  background: $control-border-hover;
70
78
  }
79
+
71
80
  &.fwe-selected {
72
81
  background: $hero;
73
82
  cursor: default;
@@ -81,6 +90,7 @@
81
90
  border-right: 1px solid $text;
82
91
  padding: 0px 12px 0px 4px;
83
92
  }
93
+
84
94
  .fwe-page-max {
85
95
  font-feature-settings: normal;
86
96
  font-size: $font-size-small;
@@ -88,16 +98,37 @@
88
98
  padding: 0px 4px 0px 12px;
89
99
  font-weight: $font-weight-normal;
90
100
  }
101
+
102
+ &--lining-tabular-numbers {
103
+ .fwe-page-current {
104
+ font-feature-settings: inherit;
105
+ }
106
+
107
+ .fwe-page-max {
108
+ font-feature-settings: inherit;
109
+ font-size: $font-size-base;
110
+ }
111
+ }
91
112
  }
92
113
 
93
114
  .fwe-pagination.fwe-pagination--on-dark-bg {
94
- .fwe-navigate-btn {
95
- color: $white;
115
+ .fwe-navigate-btn-down {
116
+ &::before {
117
+ background-color: $white;
118
+ }
96
119
  }
120
+
121
+ .fwe-navigate-btn-up {
122
+ &::before {
123
+ background-color: $white;
124
+ }
125
+ }
126
+
97
127
  .fwe-page-current {
98
128
  color: $white;
99
129
  border-right: 1px solid $white;
100
130
  }
131
+
101
132
  .fwe-page-max {
102
133
  color: $white;
103
134
  }
package/scss/_select.scss CHANGED
@@ -74,6 +74,7 @@
74
74
 
75
75
  &:invalid {
76
76
  box-shadow: none;
77
+ border-color: $red;
77
78
 
78
79
  ~ .fwe-select-invalid {
79
80
  display: block;
package/scss/_switch.scss CHANGED
@@ -30,7 +30,6 @@ label.fwe-switch {
30
30
  align-items: center;
31
31
  white-space: nowrap;
32
32
  vertical-align: middle;
33
- width: 100%;
34
33
  user-select: none;
35
34
 
36
35
  .fwe-switch-track {
@@ -128,7 +127,7 @@ label.fwe-switch {
128
127
  }
129
128
 
130
129
  &:disabled:checked ~ .fwe-switch-track {
131
- background-color: $control-disabled;
130
+ background-color: $hero-bg;
132
131
  cursor: not-allowed;
133
132
  }
134
133
 
package/scss/_toolbar.scss CHANGED
@@ -10,9 +10,18 @@
10
10
  .fwe-toolbar-actions {
11
11
  padding-top: 24px;
12
12
 
13
- a,
13
+ a {
14
+ display: flex;
15
+ align-items: center;
16
+ justify-content: center;
17
+ }
18
+
14
19
  button {
15
20
  display: block;
21
+ }
22
+
23
+ a,
24
+ button {
16
25
  height: 60px;
17
26
  width: 60px;
18
27
  line-height: 60px;
package/scss/organisms/_image-gallery.scss CHANGED
@@ -11,8 +11,17 @@
11
11
  overflow-y: hidden;
12
12
 
13
13
  .fwe-btn-link i.fwe-icon-menu-close.fwe-modal-image-gallery-close {
14
+ margin-right: 0px;
14
15
  padding-right: 0px;
15
- padding-top: 4px;
16
+ padding-top: 3px;
17
+ }
18
+
19
+ .fwe-btn-link i.fwe-icon-arrows-scale-up.fwe-modal-image-gallery-scale,
20
+ .fwe-btn-link i.fwe-icon-arrows-scale-down.fwe-modal-image-gallery-scale {
21
+ font-size: 24px;
22
+ margin-right: 0px;
23
+ padding-right: 0px;
24
+ padding-top: 3px;
16
25
  }
17
26
 
18
27
  .fwe-image-gallery {
@@ -28,8 +37,8 @@
28
37
  }
29
38
 
30
39
  &--with-container {
31
- border-top: 1px solid $control-border;
32
- border-bottom: 1px solid $control-border;
40
+ border-top: none;
41
+ border-bottom: none;
33
42
 
34
43
  .fwe-image-gallery-header {
35
44
  margin-top: $spacer-m - 6px;
@@ -45,8 +54,13 @@
45
54
 
46
55
  .fwe-image-gallery-content {
47
56
  color: $white;
48
- padding-top: 24px;
49
- padding-bottom: 24px;
57
+ padding-top: $spacer-xl;
58
+ padding-bottom: $spacer-m;
59
+
60
+ h3 {
61
+ margin-top: 0;
62
+ margin-bottom: $spacer;
63
+ }
50
64
  }
51
65
 
52
66
  .fwe-image-gallery-header {
@@ -120,10 +134,12 @@
120
134
  &.swiper-slide-thumb-active,
121
135
  &:hover {
122
136
  opacity: 1;
137
+
123
138
  &::after {
124
139
  opacity: 1;
125
140
  }
126
141
  }
142
+
127
143
  &.swiper-slide-thumb-active {
128
144
  cursor: default;
129
145
  }
@@ -173,6 +189,7 @@
173
189
  &.fwe-active,
174
190
  &:hover {
175
191
  opacity: 1;
192
+
176
193
  &::after {
177
194
  opacity: 1;
178
195
  }
@@ -227,9 +244,14 @@
227
244
  width: 1320px;
228
245
  border-top: none;
229
246
  border-bottom: none;
247
+ position: relative;
230
248
 
231
249
  .fwe-image-gallery-header {
232
- margin-top: none;
250
+ position: absolute;
251
+ top: 0px;
252
+ right: 0px;
253
+ width: 312px;
254
+ margin-top: 0px;
233
255
  }
234
256
  }
235
257
  }
@@ -247,12 +269,13 @@
247
269
  }
248
270
 
249
271
  .fwe-image-gallery-content {
272
+ margin-top: 35px;
250
273
  max-width: 312px;
251
274
  width: 312px;
252
275
  min-width: 312px;
253
276
  margin-left: 24px;
254
- border-top: 1px solid $control-border;
255
- border-bottom: 1px solid $control-border;
277
+ border-top: none;
278
+ border-bottom: none;
256
279
  }
257
280
  }
258
281
  }