@festo-ui/web-essentials 8.2.0-dev.630 → 8.2.0-dev.637

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 (78) hide show
  1. package/README.md +83 -83
  2. package/dist/css/festo-web-essentials.css +9 -12
  3. package/dist/css/festo-web-essentials.css.map +1 -1
  4. package/dist/css/festo-web-essentials.min.css +12 -12
  5. package/dist/css/festo-web-essentials.min.css.map +1 -1
  6. package/dist/css/light/festo-web-essentials-light.css +0 -3
  7. package/dist/css/light/festo-web-essentials-light.css.map +1 -1
  8. package/dist/css/themes/flatpickr/festo.css +1 -1
  9. package/dist/css/themes/flatpickr/festo.min.css +1 -1
  10. package/dist/scss/_badge.scss +49 -49
  11. package/dist/scss/_border.scss +86 -86
  12. package/dist/scss/_bottom-navigation.scss +47 -47
  13. package/dist/scss/_bottom-sheet.scss +116 -116
  14. package/dist/scss/_colors.scss +11 -11
  15. package/dist/scss/_display.scss +63 -63
  16. package/dist/scss/_flex.scss +269 -269
  17. package/dist/scss/_grid.scss +44 -44
  18. package/dist/scss/_layout.scss +64 -64
  19. package/dist/scss/_list.scss +211 -211
  20. package/dist/scss/_misc.scss +51 -51
  21. package/dist/scss/_mixins.scss +51 -51
  22. package/dist/scss/_modal.scss +233 -233
  23. package/dist/scss/_normalize.scss +369 -369
  24. package/dist/scss/_pagination.scss +124 -124
  25. package/dist/scss/_rfs.scss +177 -177
  26. package/dist/scss/_segment.scss +146 -146
  27. package/dist/scss/_sidebar-overlay.scss +51 -51
  28. package/dist/scss/_slider.scss +150 -150
  29. package/dist/scss/_snackbar.scss +159 -159
  30. package/dist/scss/_spacing.scss +51 -51
  31. package/dist/scss/_switch.scss +145 -145
  32. package/dist/scss/_text-input.scss +191 -191
  33. package/dist/scss/_text-link.scss +52 -52
  34. package/dist/scss/_toolbar.scss +83 -83
  35. package/dist/scss/_type.scss +50 -50
  36. package/dist/scss/_utils.scss +9 -9
  37. package/dist/scss/festo-web-essentials.scss +1 -1
  38. package/dist/scss/light/_border-light.scss +75 -75
  39. package/dist/scss/light/_flex-light.scss +258 -258
  40. package/dist/scss/light/_spacing-light.scss +52 -52
  41. package/dist/scss/light/festo-web-essentials-light.scss +59 -59
  42. package/dist/scss/organisms/_header-modul.scss +111 -111
  43. package/dist/scss/organisms/_teaser.scss +96 -96
  44. package/dist/scss/themes/flatpickr/festo.scss +1 -1
  45. package/package.json +10 -16
  46. package/scss/_badge.scss +49 -49
  47. package/scss/_border.scss +86 -86
  48. package/scss/_bottom-navigation.scss +47 -47
  49. package/scss/_bottom-sheet.scss +116 -116
  50. package/scss/_colors.scss +11 -11
  51. package/scss/_display.scss +63 -63
  52. package/scss/_flex.scss +269 -269
  53. package/scss/_grid.scss +44 -44
  54. package/scss/_layout.scss +64 -64
  55. package/scss/_list.scss +211 -211
  56. package/scss/_misc.scss +51 -51
  57. package/scss/_mixins.scss +51 -51
  58. package/scss/_modal.scss +233 -233
  59. package/scss/_normalize.scss +369 -369
  60. package/scss/_pagination.scss +124 -124
  61. package/scss/_rfs.scss +177 -177
  62. package/scss/_segment.scss +146 -146
  63. package/scss/_sidebar-overlay.scss +51 -51
  64. package/scss/_slider.scss +150 -150
  65. package/scss/_snackbar.scss +159 -159
  66. package/scss/_spacing.scss +51 -51
  67. package/scss/_switch.scss +145 -145
  68. package/scss/_text-input.scss +191 -191
  69. package/scss/_text-link.scss +52 -52
  70. package/scss/_toolbar.scss +83 -83
  71. package/scss/_type.scss +50 -50
  72. package/scss/_utils.scss +9 -9
  73. package/scss/light/_border-light.scss +75 -75
  74. package/scss/light/_flex-light.scss +258 -258
  75. package/scss/light/_spacing-light.scss +52 -52
  76. package/scss/light/festo-web-essentials-light.scss +59 -59
  77. package/scss/organisms/_header-modul.scss +111 -111
  78. package/scss/organisms/_teaser.scss +96 -96
package/scss/_segment.scss CHANGED
@@ -1,146 +1,146 @@
1
- @use "mixins";
2
- @use "variables";
3
-
4
- @mixin segment-disabled {
5
- background-color: variables.$gray-100;
6
- color: #3333334d;
7
- border-color: variables.$control-disabled;
8
- border-right: 1px solid variables.$control-disabled;
9
- }
10
-
11
- .fwe-segment {
12
- display: inline-block;
13
- padding: 0;
14
- border: 0;
15
-
16
- &-group {
17
- display: grid;
18
- grid-auto-columns: 1fr;
19
- grid-auto-flow: column;
20
- }
21
-
22
- &-label {
23
- display: inline-flex;
24
- align-items: center;
25
- justify-content: center;
26
- height: variables.$spacer-l;
27
- width: 100%;
28
- white-space: nowrap;
29
- padding: 0 variables.$spacer-m;
30
- font-size: variables.$font-size-base;
31
- text-align: center;
32
- cursor: pointer;
33
- border: 1px solid variables.$gray-300;
34
- color: variables.$hero-gray;
35
- background-color: variables.$white;
36
-
37
- &:hover {
38
- color: variables.$hero-active;
39
- border-color: variables.$hero-active;
40
- border-right: 1px solid variables.$hero-active;
41
- + .fwe-segment-input {
42
- + .fwe-segment-label {
43
- border-left: 1px solid variables.$hero-active;
44
- }
45
- }
46
- }
47
- }
48
-
49
- .fwe-segment-label {
50
- &:not(:last-child) {
51
- border-right: 0;
52
- }
53
- }
54
-
55
- &-input {
56
- @include mixins.visual-hidden();
57
- &:disabled {
58
- + .fwe-segment-label {
59
- pointer-events: none;
60
- color: #a3b2bc4d;
61
- border-color: variables.$control-disabled;
62
- border-right: 1px solid variables.$control-disabled;
63
- &:not(:last-child) {
64
- border-right: 0;
65
- }
66
- }
67
- }
68
- &:checked:not(:disabled) {
69
- + .fwe-segment-label {
70
- position: relative;
71
- background-color: variables.$caerul;
72
- color: variables.$white;
73
- border-color: variables.$caerul;
74
- &:not(:last-child) {
75
- &::after {
76
- content: "";
77
- display: block;
78
- position: absolute;
79
- top: -1px;
80
- right: -1px;
81
- height: variables.$spacer-l;
82
- width: 1px;
83
- background-color: variables.$caerul;
84
- }
85
- }
86
- }
87
- &:disabled {
88
- + .fwe-segment-label {
89
- @include segment-disabled();
90
- }
91
- }
92
- }
93
- }
94
-
95
- .fwe-segment-label {
96
- &:nth-child(2) {
97
- border-radius: variables.$control-border-radius 0 0 variables.$control-border-radius;
98
- }
99
- }
100
-
101
- .fwe-segment-label {
102
- &:last-child {
103
- border-radius: 0 variables.$control-border-radius variables.$control-border-radius 0;
104
- }
105
- }
106
-
107
- &.fwe-segment-outline {
108
- .fwe-segment-input {
109
- &:checked {
110
- + .fwe-segment-label {
111
- background-color: variables.$sucaerul;
112
- color: variables.$caerul;
113
- border-color: variables.$caerul;
114
- }
115
-
116
- &:disabled {
117
- + .fwe-segment-label {
118
- @include segment-disabled();
119
- &:not(:last-child) {
120
- border-right: 0;
121
- }
122
- }
123
- }
124
- }
125
- }
126
- }
127
-
128
- &.fwe-segment-icon {
129
- .fwe-segment-label {
130
- padding: 0 variables.$spacer-s;
131
- line-height: 30px;
132
- }
133
- .fwe-segment-input {
134
- &:checked {
135
- &:disabled {
136
- + .fwe-segment-label {
137
- @include segment-disabled();
138
- &:not(:last-child) {
139
- border-right: 0;
140
- }
141
- }
142
- }
143
- }
144
- }
145
- }
146
- }
1
+ @use "mixins";
2
+ @use "variables";
3
+
4
+ @mixin segment-disabled {
5
+ background-color: variables.$gray-100;
6
+ color: #3333334d;
7
+ border-color: variables.$control-disabled;
8
+ border-right: 1px solid variables.$control-disabled;
9
+ }
10
+
11
+ .fwe-segment {
12
+ display: inline-block;
13
+ padding: 0;
14
+ border: 0;
15
+
16
+ &-group {
17
+ display: grid;
18
+ grid-auto-columns: 1fr;
19
+ grid-auto-flow: column;
20
+ }
21
+
22
+ &-label {
23
+ display: inline-flex;
24
+ align-items: center;
25
+ justify-content: center;
26
+ height: variables.$spacer-l;
27
+ width: 100%;
28
+ white-space: nowrap;
29
+ padding: 0 variables.$spacer-m;
30
+ font-size: variables.$font-size-base;
31
+ text-align: center;
32
+ cursor: pointer;
33
+ border: 1px solid variables.$gray-300;
34
+ color: variables.$hero-gray;
35
+ background-color: variables.$white;
36
+
37
+ &:hover {
38
+ color: variables.$hero-active;
39
+ border-color: variables.$hero-active;
40
+ border-right: 1px solid variables.$hero-active;
41
+ + .fwe-segment-input {
42
+ + .fwe-segment-label {
43
+ border-left: 1px solid variables.$hero-active;
44
+ }
45
+ }
46
+ }
47
+ }
48
+
49
+ .fwe-segment-label {
50
+ &:not(:last-child) {
51
+ border-right: 0;
52
+ }
53
+ }
54
+
55
+ &-input {
56
+ @include mixins.visual-hidden();
57
+ &:disabled {
58
+ + .fwe-segment-label {
59
+ pointer-events: none;
60
+ color: #a3b2bc4d;
61
+ border-color: variables.$control-disabled;
62
+ border-right: 1px solid variables.$control-disabled;
63
+ &:not(:last-child) {
64
+ border-right: 0;
65
+ }
66
+ }
67
+ }
68
+ &:checked:not(:disabled) {
69
+ + .fwe-segment-label {
70
+ position: relative;
71
+ background-color: variables.$caerul;
72
+ color: variables.$white;
73
+ border-color: variables.$caerul;
74
+ &:not(:last-child) {
75
+ &::after {
76
+ content: "";
77
+ display: block;
78
+ position: absolute;
79
+ top: -1px;
80
+ right: -1px;
81
+ height: variables.$spacer-l;
82
+ width: 1px;
83
+ background-color: variables.$caerul;
84
+ }
85
+ }
86
+ }
87
+ &:disabled {
88
+ + .fwe-segment-label {
89
+ @include segment-disabled();
90
+ }
91
+ }
92
+ }
93
+ }
94
+
95
+ .fwe-segment-label {
96
+ &:nth-child(2) {
97
+ border-radius: variables.$control-border-radius 0 0 variables.$control-border-radius;
98
+ }
99
+ }
100
+
101
+ .fwe-segment-label {
102
+ &:last-child {
103
+ border-radius: 0 variables.$control-border-radius variables.$control-border-radius 0;
104
+ }
105
+ }
106
+
107
+ &.fwe-segment-outline {
108
+ .fwe-segment-input {
109
+ &:checked {
110
+ + .fwe-segment-label {
111
+ background-color: variables.$sucaerul;
112
+ color: variables.$caerul;
113
+ border-color: variables.$caerul;
114
+ }
115
+
116
+ &:disabled {
117
+ + .fwe-segment-label {
118
+ @include segment-disabled();
119
+ &:not(:last-child) {
120
+ border-right: 0;
121
+ }
122
+ }
123
+ }
124
+ }
125
+ }
126
+ }
127
+
128
+ &.fwe-segment-icon {
129
+ .fwe-segment-label {
130
+ padding: 0 variables.$spacer-s;
131
+ line-height: 30px;
132
+ }
133
+ .fwe-segment-input {
134
+ &:checked {
135
+ &:disabled {
136
+ + .fwe-segment-label {
137
+ @include segment-disabled();
138
+ &:not(:last-child) {
139
+ border-right: 0;
140
+ }
141
+ }
142
+ }
143
+ }
144
+ }
145
+ }
146
+ }
package/scss/_sidebar-overlay.scss CHANGED
@@ -1,51 +1,51 @@
1
- @use "variables";
2
-
3
- $fwe-sidebar-overlay-width: 480px;
4
-
5
- .fwe-sidebar-overlay {
6
- z-index: variables.$zindex-sticky;
7
- box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
8
- padding: 32px;
9
- position: fixed;
10
- right: 0px;
11
- top: 0px;
12
- bottom: 0px;
13
- width: $fwe-sidebar-overlay-width;
14
- background: variables.$white;
15
- transform: translateX($fwe-sidebar-overlay-width);
16
- transition: opacity 400ms, transform 400ms;
17
- opacity: 0;
18
- pointer-events: none;
19
- &--open {
20
- pointer-events: unset;
21
- display: block;
22
- opacity: 1;
23
- transform: translateX(0px);
24
- }
25
- &-close-btn {
26
- float: inherit;
27
- display: block;
28
- width: 24px;
29
- height: 24px;
30
- padding: 0;
31
- margin: 0 0 0 auto;
32
- border: none;
33
- outline: none;
34
- text-align: right;
35
- cursor: pointer;
36
- background: variables.$text;
37
- mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjExIC0xODMpIj48cGF0aCBkPSJNMCwwSDI0VjI0SDBaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMTEgMTgzKSIgZmlsbD0ibm9uZSIvPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIxNSAxODcpIj48cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJNMTIuOTUsNC40NjQsMTEuNTM2LDMuMDUsOCw2LjU4Niw0LjQ2NCwzLjA1LDMuMDUsNC40NjQsNi41ODYsOCwzLjA1LDExLjUzNiw0LjQ2NCwxMi45NSw4LDkuNDE0bDMuNTM2LDMuNTM2LDEuNDE0LTEuNDE0TDkuNDE0LDhaIiBmaWxsPSIjMzMzIi8+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIxNSAxODcpIj48cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJNMTIuOTUsNC40NjQsMTEuNTM2LDMuMDUsOCw2LjU4Niw0LjQ2NCwzLjA1LDMuMDUsNC40NjQsNi41ODYsOCwzLjA1LDExLjUzNiw0LjQ2NCwxMi45NSw4LDkuNDE0bDMuNTM2LDMuNTM2LDEuNDE0LTEuNDE0TDkuNDE0LDhaIiBmaWxsPSIjMzMzIi8+PC9nPjwvZz48L3N2Zz4=");
38
- &:hover {
39
- background: variables.$hero;
40
- }
41
- }
42
- @media (max-width: variables.$breakpoint-xs-min) {
43
- padding: 16px;
44
- left: 0px;
45
- width: unset;
46
- transform: none;
47
- &:not(&--open) {
48
- display: none;
49
- }
50
- }
51
- }
1
+ @use "variables";
2
+
3
+ $fwe-sidebar-overlay-width: 480px;
4
+
5
+ .fwe-sidebar-overlay {
6
+ z-index: variables.$zindex-sticky;
7
+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
8
+ padding: 32px;
9
+ position: fixed;
10
+ right: 0px;
11
+ top: 0px;
12
+ bottom: 0px;
13
+ width: $fwe-sidebar-overlay-width;
14
+ background: variables.$white;
15
+ transform: translateX($fwe-sidebar-overlay-width);
16
+ transition: opacity 400ms, transform 400ms;
17
+ opacity: 0;
18
+ pointer-events: none;
19
+ &--open {
20
+ pointer-events: unset;
21
+ display: block;
22
+ opacity: 1;
23
+ transform: translateX(0px);
24
+ }
25
+ &-close-btn {
26
+ float: inherit;
27
+ display: block;
28
+ width: 24px;
29
+ height: 24px;
30
+ padding: 0;
31
+ margin: 0 0 0 auto;
32
+ border: none;
33
+ outline: none;
34
+ text-align: right;
35
+ cursor: pointer;
36
+ background: variables.$text;
37
+ mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjExIC0xODMpIj48cGF0aCBkPSJNMCwwSDI0VjI0SDBaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMTEgMTgzKSIgZmlsbD0ibm9uZSIvPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIxNSAxODcpIj48cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJNMTIuOTUsNC40NjQsMTEuNTM2LDMuMDUsOCw2LjU4Niw0LjQ2NCwzLjA1LDMuMDUsNC40NjQsNi41ODYsOCwzLjA1LDExLjUzNiw0LjQ2NCwxMi45NSw4LDkuNDE0bDMuNTM2LDMuNTM2LDEuNDE0LTEuNDE0TDkuNDE0LDhaIiBmaWxsPSIjMzMzIi8+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIxNSAxODcpIj48cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJNMTIuOTUsNC40NjQsMTEuNTM2LDMuMDUsOCw2LjU4Niw0LjQ2NCwzLjA1LDMuMDUsNC40NjQsNi41ODYsOCwzLjA1LDExLjUzNiw0LjQ2NCwxMi45NSw4LDkuNDE0bDMuNTM2LDMuNTM2LDEuNDE0LTEuNDE0TDkuNDE0LDhaIiBmaWxsPSIjMzMzIi8+PC9nPjwvZz48L3N2Zz4=");
38
+ &:hover {
39
+ background: variables.$hero;
40
+ }
41
+ }
42
+ @media (max-width: variables.$breakpoint-xs-min) {
43
+ padding: 16px;
44
+ left: 0px;
45
+ width: unset;
46
+ transform: none;
47
+ &:not(&--open) {
48
+ display: none;
49
+ }
50
+ }
51
+ }