@festo-ui/web-essentials 7.2.0-dev.423 → 7.2.0-dev.427

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 (32) hide show
  1. package/dist/css/festo-web-essentials.css +58 -16
  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/fonts/festo_icons-16.woff2 +0 -0
  6. package/dist/css/fonts/festo_icons-24.woff2 +0 -0
  7. package/dist/css/fonts/festo_icons-32.woff2 +0 -0
  8. package/dist/css/organisms/festo-web-essentials-organisms.css +28 -5
  9. package/dist/css/organisms/festo-web-essentials-organisms.css.map +1 -1
  10. package/dist/css/organisms/festo-web-essentials-organisms.min.css +1 -1
  11. package/dist/css/organisms/festo-web-essentials-organisms.min.css.map +1 -1
  12. package/dist/css/themes/flatpickr/festo.css +1 -1
  13. package/dist/css/themes/flatpickr/festo.min.css +1 -1
  14. package/dist/fonts/festo_icons-16.woff2 +0 -0
  15. package/dist/fonts/festo_icons-24.woff2 +0 -0
  16. package/dist/fonts/festo_icons-32.woff2 +0 -0
  17. package/dist/scss/_chips.scss +6 -7
  18. package/dist/scss/_icons.scss +33 -0
  19. package/dist/scss/_popover.scss +5 -0
  20. package/dist/scss/_segment.scss +2 -2
  21. package/dist/scss/festo-web-essentials.scss +1 -1
  22. package/dist/scss/fonts/festo_icons-16.woff2 +0 -0
  23. package/dist/scss/fonts/festo_icons-24.woff2 +0 -0
  24. package/dist/scss/fonts/festo_icons-32.woff2 +0 -0
  25. package/dist/scss/organisms/_image-gallery.scss +28 -6
  26. package/dist/scss/themes/flatpickr/festo.scss +1 -1
  27. package/package.json +1 -1
  28. package/scss/_chips.scss +6 -7
  29. package/scss/_icons.scss +33 -0
  30. package/scss/_popover.scss +5 -0
  31. package/scss/_segment.scss +2 -2
  32. package/scss/organisms/_image-gallery.scss +28 -6
package/dist/scss/organisms/_image-gallery.scss CHANGED
@@ -10,12 +10,6 @@
10
10
  overflow-x: hidden;
11
11
  overflow-y: hidden;
12
12
 
13
- .fwe-btn-link i.fwe-icon-menu-close.fwe-modal-image-gallery-close {
14
- margin-right: 0px;
15
- padding-right: 0px;
16
- padding-top: 3px;
17
- }
18
-
19
13
  .fwe-btn-link i.fwe-icon-arrows-scale-up.fwe-modal-image-gallery-scale,
20
14
  .fwe-btn-link i.fwe-icon-arrows-scale-down.fwe-modal-image-gallery-scale {
21
15
  font-size: 24px;
@@ -27,6 +21,34 @@
27
21
  .fwe-image-gallery {
28
22
  // pagination height (37px + 24px) + 12px (extra padding on top and bottom)
29
23
  max-height: calc(100vh - 73px);
24
+
25
+ &-close-btn {
26
+ width: 32px;
27
+ height: 32px;
28
+ padding: 0;
29
+ border: none;
30
+ min-width: 32px;
31
+ cursor: pointer;
32
+ background: $white;
33
+ mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgzMnYzMkgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PHBhdGggZmlsbD0iIzMzMyIgZD0iTTIxLjQ4IDkuMSAxNiAxNC41OSAxMC41MSA5LjEgOS4xIDEwLjUyIDE0LjU4IDE2IDkuMSAyMS40OWwxLjQxIDEuNDFMMTYgMTcuNDJsNS40OCA1LjQ4IDEuNDItMS40MUwxNy40MSAxNmw1LjQ5LTUuNDgtMS40Mi0xLjQyeiIgZGF0YS1uYW1lPSJjb250ZW50Ii8+PC9zdmc+");
34
+ &:hover {
35
+ background: $hero;
36
+ }
37
+ }
38
+
39
+ &-scale-btn {
40
+ width: 24px;
41
+ height: 24px;
42
+ padding: 0;
43
+ border: none;
44
+ min-width: 24px;
45
+ cursor: pointer;
46
+ background: $white;
47
+ mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgzMnYzMkgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PGcgZGF0YS1uYW1lPSJjb250ZW50Ij48cGF0aCBkPSJtMTguMTAxIDQgMi44MjggMi44MjgtNC4yNDMgNC4yNDMgNC4yNDMgNC4yNDMgNC4yNDMtNC4yNDNMMjggMTMuODk5VjRoLTkuODk5ek0xMS4wNzEgMTYuNjg2bC00LjI0MyA0LjI0M0w0IDE4LjEwMVYyOGg5LjlsLTIuODI5LTIuODI4IDQuMjQzLTQuMjQzLTQuMjQzLTQuMjQzeiIvPjwvZz48L3N2Zz4=");
48
+ &:hover {
49
+ background: $hero;
50
+ }
51
+ }
30
52
  }
31
53
 
32
54
  &--with-thumbnails {
package/dist/scss/themes/flatpickr/festo.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * Festo UI - Web Essentials v7.2.0-dev.423 (https://storybook.festo.design/)
2
+ * Festo UI - Web Essentials v7.2.0-dev.427 (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.2.0-dev.423",
3
+ "version": "7.2.0-dev.427",
4
4
  "description": "CSS framework and utils to build FESTO web applications",
5
5
  "keywords": [
6
6
  "css",
package/scss/_chips.scss CHANGED
@@ -1,13 +1,12 @@
1
1
  %chip-lg {
2
2
  font-size: $font-size-base;
3
- line-height: 22px;
4
3
  border-radius: $border-radius-xl;
5
- padding: 3px 16px 5px 16px;
4
+ padding: 0px 16px;
5
+ height: 32px;
6
6
  i[class^="fwe-icon-"],
7
7
  i[class*=" fwe-icon-"],
8
8
  .fwe-svg-icon {
9
9
  @extend .fwe-icon-lg;
10
- margin-bottom: -3px;
11
10
  }
12
11
  &.fwe-selected {
13
12
  &.fwe-category {
@@ -41,12 +40,12 @@
41
40
  }
42
41
 
43
42
  .fwe-chip {
43
+ height: 24px;
44
44
  user-select: none;
45
45
  position: relative;
46
46
  display: flex;
47
- align-items: flex-end;
47
+ align-items: center;
48
48
  font-size: $font-size-md;
49
- line-height: calc(#{$font-size-md} + 7px);
50
49
  text-align: center;
51
50
  border-radius: $border-radius-l;
52
51
  cursor: pointer;
@@ -54,13 +53,13 @@
54
53
  color: $text;
55
54
  border: 1px solid $control;
56
55
  box-sizing: border-box;
57
- padding: 0px 12px 1px 12px;
56
+ padding: 0px 12px;
58
57
  i[class^="fwe-icon-"],
59
58
  i[class*=" fwe-icon-"],
60
59
  .fwe-svg-icon {
61
- margin-bottom: -1px;
62
60
  margin-left: -4px;
63
61
  margin-right: 8px;
62
+ line-height: 1;
64
63
  }
65
64
  &:hover {
66
65
  background: $control-hover;
package/scss/_icons.scss CHANGED
@@ -1530,3 +1530,36 @@
1530
1530
  .fwe-icon-check-small:before {
1531
1531
  content: "\eae7";
1532
1532
  }
1533
+ .fwe-icon-arrange:before {
1534
+ content: "\eae8";
1535
+ }
1536
+ .fwe-icon-cloud-failure:before {
1537
+ content: "\eae9";
1538
+ }
1539
+ .fwe-icon-cloud-ready:before {
1540
+ content: "\eaeb";
1541
+ }
1542
+ .fwe-icon-cloud-sync:before {
1543
+ content: "\eaed";
1544
+ }
1545
+ .fwe-icon-crop:before {
1546
+ content: "\eaee";
1547
+ }
1548
+ .fwe-icon-decentral-drive:before {
1549
+ content: "\eaef";
1550
+ }
1551
+ .fwe-icon-feature-tag:before {
1552
+ content: "\eaf0";
1553
+ }
1554
+ .fwe-icon-hide:before {
1555
+ content: "\eaf1";
1556
+ }
1557
+ .fwe-icon-repeat-audio:before {
1558
+ content: "\eaf2";
1559
+ }
1560
+ .fwe-icon-data-variable:before {
1561
+ content: "\eaea";
1562
+ }
1563
+ .fwe-icon-method:before {
1564
+ content: "\eaec";
1565
+ }
package/scss/_popover.scss CHANGED
@@ -127,10 +127,15 @@
127
127
  flex-wrap: nowrap;
128
128
  height: $spacer * 1.5;
129
129
  width: $spacer * 2;
130
+ margin-right: 0px;
130
131
  &::before {
131
132
  display: inline-flex;
132
133
  }
133
134
  }
135
+ .fwe-svg-icon {
136
+ margin-right: 8px;
137
+ margin-left: 8px;
138
+ }
134
139
  span {
135
140
  display: inline-flex;
136
141
  height: $spacer * 1.5;
package/scss/_segment.scss CHANGED
@@ -17,10 +17,10 @@
17
17
  }
18
18
 
19
19
  &-label {
20
- display: inline-block;
20
+ display: inline-flex;
21
+ align-items: center;
21
22
  height: $spacer-l;
22
23
  width: 100%;
23
- line-height: $spacer * 1.75;
24
24
  white-space: nowrap;
25
25
  padding: 0 $spacer-m;
26
26
  font-size: $font-size-base;
package/scss/organisms/_image-gallery.scss CHANGED
@@ -10,12 +10,6 @@
10
10
  overflow-x: hidden;
11
11
  overflow-y: hidden;
12
12
 
13
- .fwe-btn-link i.fwe-icon-menu-close.fwe-modal-image-gallery-close {
14
- margin-right: 0px;
15
- padding-right: 0px;
16
- padding-top: 3px;
17
- }
18
-
19
13
  .fwe-btn-link i.fwe-icon-arrows-scale-up.fwe-modal-image-gallery-scale,
20
14
  .fwe-btn-link i.fwe-icon-arrows-scale-down.fwe-modal-image-gallery-scale {
21
15
  font-size: 24px;
@@ -27,6 +21,34 @@
27
21
  .fwe-image-gallery {
28
22
  // pagination height (37px + 24px) + 12px (extra padding on top and bottom)
29
23
  max-height: calc(100vh - 73px);
24
+
25
+ &-close-btn {
26
+ width: 32px;
27
+ height: 32px;
28
+ padding: 0;
29
+ border: none;
30
+ min-width: 32px;
31
+ cursor: pointer;
32
+ background: $white;
33
+ mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgzMnYzMkgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PHBhdGggZmlsbD0iIzMzMyIgZD0iTTIxLjQ4IDkuMSAxNiAxNC41OSAxMC41MSA5LjEgOS4xIDEwLjUyIDE0LjU4IDE2IDkuMSAyMS40OWwxLjQxIDEuNDFMMTYgMTcuNDJsNS40OCA1LjQ4IDEuNDItMS40MUwxNy40MSAxNmw1LjQ5LTUuNDgtMS40Mi0xLjQyeiIgZGF0YS1uYW1lPSJjb250ZW50Ii8+PC9zdmc+");
34
+ &:hover {
35
+ background: $hero;
36
+ }
37
+ }
38
+
39
+ &-scale-btn {
40
+ width: 24px;
41
+ height: 24px;
42
+ padding: 0;
43
+ border: none;
44
+ min-width: 24px;
45
+ cursor: pointer;
46
+ background: $white;
47
+ mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgzMnYzMkgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PGcgZGF0YS1uYW1lPSJjb250ZW50Ij48cGF0aCBkPSJtMTguMTAxIDQgMi44MjggMi44MjgtNC4yNDMgNC4yNDMgNC4yNDMgNC4yNDMgNC4yNDMtNC4yNDNMMjggMTMuODk5VjRoLTkuODk5ek0xMS4wNzEgMTYuNjg2bC00LjI0MyA0LjI0M0w0IDE4LjEwMVYyOGg5LjlsLTIuODI5LTIuODI4IDQuMjQzLTQuMjQzLTQuMjQzLTQuMjQzeiIvPjwvZz48L3N2Zz4=");
48
+ &:hover {
49
+ background: $hero;
50
+ }
51
+ }
30
52
  }
31
53
 
32
54
  &--with-thumbnails {