@festo-ui/web-essentials 4.0.3-pre-20221124.8 → 5.0.0-dev.17

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 (76) hide show
  1. package/README.md +73 -73
  2. package/dist/css/festo-web-essentials.css +500 -3316
  3. package/dist/css/festo-web-essentials.css.map +1 -1
  4. package/dist/css/festo-web-essentials.min.css +3 -3
  5. package/dist/css/festo-web-essentials.min.css.map +1 -1
  6. package/dist/css/organisms/festo-web-essentials-organisms.css +8 -15
  7. package/dist/css/organisms/festo-web-essentials-organisms.css.map +1 -1
  8. package/dist/css/organisms/festo-web-essentials-organisms.min.css +1 -1
  9. package/dist/css/organisms/festo-web-essentials-organisms.min.css.map +1 -1
  10. package/dist/css/themes/flatpickr/festo.css +3 -18
  11. package/dist/css/themes/flatpickr/festo.css.map +1 -1
  12. package/dist/css/themes/flatpickr/festo.min.css +2 -2
  13. package/dist/css/themes/flatpickr/festo.min.css.map +1 -1
  14. package/dist/scss/_breadcrumb.scss +37 -37
  15. package/dist/scss/_button.scss +128 -128
  16. package/dist/scss/_cards.scss +98 -98
  17. package/dist/scss/_checkbox.scss +153 -153
  18. package/dist/scss/_chips.scss +145 -145
  19. package/dist/scss/_fonts.scss +59 -59
  20. package/dist/scss/_icons.scss +1446 -1446
  21. package/dist/scss/_loading-indicator.scss +176 -176
  22. package/dist/scss/_mobile-flyout.scss +108 -108
  23. package/dist/scss/_navbar-menu.scss +351 -351
  24. package/dist/scss/_navbar.scss +258 -258
  25. package/dist/scss/_popover.scss +201 -201
  26. package/dist/scss/_progressbar.scss +67 -67
  27. package/dist/scss/_radio.scss +152 -152
  28. package/dist/scss/_root.scss +111 -111
  29. package/dist/scss/_search-input.scss +92 -92
  30. package/dist/scss/_select.scss +95 -95
  31. package/dist/scss/_stepper-horizontal.scss +127 -127
  32. package/dist/scss/_stepper-vertical.scss +121 -121
  33. package/dist/scss/_table.scss +150 -150
  34. package/dist/scss/_timepicker.scss +68 -68
  35. package/dist/scss/_tree.scss +211 -211
  36. package/dist/scss/_variables.scss +252 -252
  37. package/dist/scss/festo-web-essentials.scss +1 -1
  38. package/dist/scss/organisms/_footer.scss +142 -142
  39. package/dist/scss/organisms/_header-slider.scss +153 -153
  40. package/dist/scss/organisms/_image-gallery.scss +257 -257
  41. package/dist/scss/organisms/_login.scss +57 -57
  42. package/dist/scss/organisms/_side-menu.scss +54 -54
  43. package/dist/scss/organisms/festo-web-essentials-organisms.scss +15 -15
  44. package/dist/scss/themes/flatpickr/festo.scss +834 -834
  45. package/package.json +88 -9
  46. package/scss/_breadcrumb.scss +37 -37
  47. package/scss/_button.scss +128 -128
  48. package/scss/_cards.scss +98 -98
  49. package/scss/_checkbox.scss +153 -153
  50. package/scss/_chips.scss +145 -145
  51. package/scss/_fonts.scss +59 -59
  52. package/scss/_icons.scss +1446 -1446
  53. package/scss/_loading-indicator.scss +176 -176
  54. package/scss/_mobile-flyout.scss +108 -108
  55. package/scss/_navbar-menu.scss +351 -351
  56. package/scss/_navbar.scss +258 -258
  57. package/scss/_popover.scss +201 -201
  58. package/scss/_progressbar.scss +67 -67
  59. package/scss/_radio.scss +152 -152
  60. package/scss/_root.scss +111 -111
  61. package/scss/_search-input.scss +92 -92
  62. package/scss/_select.scss +95 -95
  63. package/scss/_stepper-horizontal.scss +127 -127
  64. package/scss/_stepper-vertical.scss +121 -121
  65. package/scss/_table.scss +150 -150
  66. package/scss/_timepicker.scss +68 -68
  67. package/scss/_tree.scss +211 -211
  68. package/scss/_variables.scss +252 -252
  69. package/scss/festo-web-essentials.scss +1 -1
  70. package/scss/organisms/_footer.scss +142 -142
  71. package/scss/organisms/_header-slider.scss +153 -153
  72. package/scss/organisms/_image-gallery.scss +257 -257
  73. package/scss/organisms/_login.scss +57 -57
  74. package/scss/organisms/_side-menu.scss +54 -54
  75. package/scss/organisms/festo-web-essentials-organisms.scss +15 -15
  76. package/scss/themes/flatpickr/festo.scss +834 -834
package/scss/_loading-indicator.scss CHANGED
@@ -1,176 +1,176 @@
1
- $spinner-duration: 3s;
2
-
3
- .fwe-waiting-container {
4
- width: 100%;
5
- height: 100%;
6
- display: flex;
7
- flex-direction: column;
8
- justify-content: center;
9
- align-items: center;
10
- .fwe-waiting-content-container {
11
- margin-top: 12px;
12
- color: $hero;
13
- }
14
- }
15
-
16
- .fwe-waiting-container-sm {
17
- flex-direction: row;
18
- .fwe-waiting-content-container {
19
- margin-top: unset;
20
- margin-left: 8px;
21
- }
22
- }
23
-
24
- .fwe-waiting-indicator {
25
- display: inline-block;
26
- position: relative;
27
- width: 96px;
28
- height: 96px;
29
-
30
- div {
31
- box-sizing: border-box;
32
- display: block;
33
- position: absolute;
34
- width: 96px;
35
- height: 96px;
36
- border: 8px solid $hero;
37
- border-radius: 50%;
38
- border-color: $hero transparent transparent transparent;
39
- }
40
- .fwe-waiting-circle-1 {
41
- animation: fwe-wi-animation-1 $spinner-duration linear infinite;
42
- }
43
- .fwe-waiting-circle-2 {
44
- animation: fwe-wi-animation-2 $spinner-duration linear infinite;
45
- }
46
- .fwe-waiting-circle-3 {
47
- animation: fwe-wi-animation-3 $spinner-duration linear infinite;
48
- }
49
- .fwe-waiting-circle-4 {
50
- animation: fwe-wi-animation-4 $spinner-duration linear infinite;
51
- }
52
-
53
- &.fwe-waiting-indicator-md {
54
- height: 48px;
55
- width: 48px;
56
- div {
57
- height: 48px;
58
- width: 48px;
59
- border-width: 4px;
60
- }
61
- }
62
-
63
- &.fwe-waiting-indicator-sm {
64
- height: 16px;
65
- width: 16px;
66
- div {
67
- height: 16px;
68
- width: 16px;
69
- border-width: 2px;
70
- }
71
- }
72
-
73
- @keyframes fwe-wi-animation-1 {
74
- 0% {
75
- transform: rotate(0deg);
76
- }
77
-
78
- 20% {
79
- transform: rotate(315deg);
80
- }
81
-
82
- 40% {
83
- transform: rotate(500deg);
84
- }
85
-
86
- 60% {
87
- transform: rotate(900deg);
88
- }
89
-
90
- 80% {
91
- transform: rotate(1170deg);
92
- }
93
-
94
- 100% {
95
- transform: rotate(1440deg);
96
- }
97
- }
98
-
99
- @keyframes fwe-wi-animation-2 {
100
- 0% {
101
- transform: rotate(0deg);
102
- }
103
-
104
- 20% {
105
- transform: rotate(270deg);
106
- }
107
-
108
- 40% {
109
- transform: rotate(500deg);
110
- }
111
-
112
- 60% {
113
- transform: rotate(900deg);
114
- }
115
-
116
- 80% {
117
- transform: rotate(1120deg);
118
- }
119
-
120
- 100% {
121
- transform: rotate(1440deg);
122
- }
123
- }
124
-
125
- @keyframes fwe-wi-animation-3 {
126
- 0% {
127
- transform: rotate(0deg);
128
- }
129
-
130
- 20% {
131
- transform: rotate(180deg);
132
- }
133
-
134
- 40% {
135
- transform: rotate(500deg);
136
- }
137
-
138
- 60% {
139
- transform: rotate(900deg);
140
- }
141
-
142
- 80% {
143
- transform: rotate(1070deg);
144
- }
145
-
146
- 100% {
147
- transform: rotate(1440deg);
148
- }
149
- }
150
-
151
- @keyframes fwe-wi-animation-4 {
152
- 0% {
153
- transform: rotate(0deg);
154
- }
155
-
156
- 20% {
157
- transform: rotate(90deg);
158
- }
159
-
160
- 40% {
161
- transform: rotate(500deg);
162
- }
163
-
164
- 60% {
165
- transform: rotate(900deg);
166
- }
167
-
168
- 80% {
169
- transform: rotate(1040deg);
170
- }
171
-
172
- 100% {
173
- transform: rotate(1440deg);
174
- }
175
- }
176
- }
1
+ $spinner-duration: 3s;
2
+
3
+ .fwe-waiting-container {
4
+ width: 100%;
5
+ height: 100%;
6
+ display: flex;
7
+ flex-direction: column;
8
+ justify-content: center;
9
+ align-items: center;
10
+ .fwe-waiting-content-container {
11
+ margin-top: 12px;
12
+ color: $hero;
13
+ }
14
+ }
15
+
16
+ .fwe-waiting-container-sm {
17
+ flex-direction: row;
18
+ .fwe-waiting-content-container {
19
+ margin-top: unset;
20
+ margin-left: 8px;
21
+ }
22
+ }
23
+
24
+ .fwe-waiting-indicator {
25
+ display: inline-block;
26
+ position: relative;
27
+ width: 96px;
28
+ height: 96px;
29
+
30
+ div {
31
+ box-sizing: border-box;
32
+ display: block;
33
+ position: absolute;
34
+ width: 96px;
35
+ height: 96px;
36
+ border: 8px solid $hero;
37
+ border-radius: 50%;
38
+ border-color: $hero transparent transparent transparent;
39
+ }
40
+ .fwe-waiting-circle-1 {
41
+ animation: fwe-wi-animation-1 $spinner-duration linear infinite;
42
+ }
43
+ .fwe-waiting-circle-2 {
44
+ animation: fwe-wi-animation-2 $spinner-duration linear infinite;
45
+ }
46
+ .fwe-waiting-circle-3 {
47
+ animation: fwe-wi-animation-3 $spinner-duration linear infinite;
48
+ }
49
+ .fwe-waiting-circle-4 {
50
+ animation: fwe-wi-animation-4 $spinner-duration linear infinite;
51
+ }
52
+
53
+ &.fwe-waiting-indicator-md {
54
+ height: 48px;
55
+ width: 48px;
56
+ div {
57
+ height: 48px;
58
+ width: 48px;
59
+ border-width: 4px;
60
+ }
61
+ }
62
+
63
+ &.fwe-waiting-indicator-sm {
64
+ height: 16px;
65
+ width: 16px;
66
+ div {
67
+ height: 16px;
68
+ width: 16px;
69
+ border-width: 2px;
70
+ }
71
+ }
72
+
73
+ @keyframes fwe-wi-animation-1 {
74
+ 0% {
75
+ transform: rotate(0deg);
76
+ }
77
+
78
+ 20% {
79
+ transform: rotate(315deg);
80
+ }
81
+
82
+ 40% {
83
+ transform: rotate(500deg);
84
+ }
85
+
86
+ 60% {
87
+ transform: rotate(900deg);
88
+ }
89
+
90
+ 80% {
91
+ transform: rotate(1170deg);
92
+ }
93
+
94
+ 100% {
95
+ transform: rotate(1440deg);
96
+ }
97
+ }
98
+
99
+ @keyframes fwe-wi-animation-2 {
100
+ 0% {
101
+ transform: rotate(0deg);
102
+ }
103
+
104
+ 20% {
105
+ transform: rotate(270deg);
106
+ }
107
+
108
+ 40% {
109
+ transform: rotate(500deg);
110
+ }
111
+
112
+ 60% {
113
+ transform: rotate(900deg);
114
+ }
115
+
116
+ 80% {
117
+ transform: rotate(1120deg);
118
+ }
119
+
120
+ 100% {
121
+ transform: rotate(1440deg);
122
+ }
123
+ }
124
+
125
+ @keyframes fwe-wi-animation-3 {
126
+ 0% {
127
+ transform: rotate(0deg);
128
+ }
129
+
130
+ 20% {
131
+ transform: rotate(180deg);
132
+ }
133
+
134
+ 40% {
135
+ transform: rotate(500deg);
136
+ }
137
+
138
+ 60% {
139
+ transform: rotate(900deg);
140
+ }
141
+
142
+ 80% {
143
+ transform: rotate(1070deg);
144
+ }
145
+
146
+ 100% {
147
+ transform: rotate(1440deg);
148
+ }
149
+ }
150
+
151
+ @keyframes fwe-wi-animation-4 {
152
+ 0% {
153
+ transform: rotate(0deg);
154
+ }
155
+
156
+ 20% {
157
+ transform: rotate(90deg);
158
+ }
159
+
160
+ 40% {
161
+ transform: rotate(500deg);
162
+ }
163
+
164
+ 60% {
165
+ transform: rotate(900deg);
166
+ }
167
+
168
+ 80% {
169
+ transform: rotate(1040deg);
170
+ }
171
+
172
+ 100% {
173
+ transform: rotate(1440deg);
174
+ }
175
+ }
176
+ }
package/scss/_mobile-flyout.scss CHANGED
@@ -1,108 +1,108 @@
1
- .fwe-mobile-flyout {
2
- position: relative;
3
-
4
- .fwe-mobile-flyout-button {
5
- @extend .fwe-icon;
6
- @extend .fwe-icon-lg;
7
- padding: 0px;
8
- border: none;
9
- background: none;
10
- outline: none;
11
- margin-bottom: 8px;
12
- margin-right: auto;
13
- cursor: pointer;
14
- @media (hover: hover) and (pointer: fine) {
15
- &:hover {
16
- color: $hero;
17
- }
18
- }
19
- }
20
-
21
- .fwe-burger-button {
22
- @extend .fwe-mobile-flyout-button;
23
- @extend .fwe-icon-menu-menu;
24
- }
25
- .fwe-close-button {
26
- @extend .fwe-mobile-flyout-button;
27
- @extend .fwe-icon-menu-close;
28
- }
29
-
30
- .fwe-mobile-flyout-container {
31
- position: fixed;
32
- display: flex;
33
- top: $navbar-height;
34
- left: 0px;
35
- width: 384px;
36
- height: calc(100vh - #{$navbar-height});
37
- background-color: $white;
38
- flex-direction: column;
39
- box-shadow: 0px 1px 4px #00000029;
40
- overflow: hidden;
41
- transform: translateX(-105%);
42
-
43
- @media (max-width: $grid-breakpoint-xs) {
44
- width: 100% !important;
45
- }
46
- transition: transform 0.3s ease;
47
- &.fwe-opened {
48
- transform: translateX(0%);
49
- }
50
- }
51
- }
52
-
53
- .fwe-mobile-flyout-page {
54
- background: $white;
55
- position: absolute;
56
- left: 0;
57
- top: 0;
58
- right: 0;
59
- bottom: 0;
60
- transform: translateX(100%);
61
- transition: transform 0.3s ease;
62
- @include custom-scrollbar;
63
- overflow-x: hidden;
64
- overflow-y: auto;
65
-
66
- &.fwe-opened {
67
- transform: translateX(0%);
68
- }
69
-
70
- .fwe-page-back {
71
- cursor: pointer;
72
- height: 53px;
73
- display: flex;
74
- align-items: center;
75
- background: $background;
76
- &:hover {
77
- background: $control;
78
- }
79
- i {
80
- @extend .fwe-icon;
81
- @extend .fwe-icon-arrows-left-2;
82
- margin-left: 16px;
83
- margin-right: 8px;
84
- }
85
- div {
86
- margin-top: -1px;
87
- margin-bottom: 1px;
88
- }
89
- }
90
-
91
- .fwe-mobile-flyout-item-container {
92
- padding: 24px;
93
- @media (max-width: $grid-breakpoint-xs) {
94
- padding: 16px;
95
- }
96
- }
97
- }
98
-
99
- .fwe-mobile-flyout-item {
100
- color: $text;
101
- cursor: pointer;
102
- display: flex;
103
- align-items: center;
104
- height: 56px;
105
- &.fwe-active {
106
- color: $hero;
107
- }
108
- }
1
+ .fwe-mobile-flyout {
2
+ position: relative;
3
+
4
+ .fwe-mobile-flyout-button {
5
+ @extend .fwe-icon;
6
+ @extend .fwe-icon-lg;
7
+ padding: 0px;
8
+ border: none;
9
+ background: none;
10
+ outline: none;
11
+ margin-bottom: 8px;
12
+ margin-right: auto;
13
+ cursor: pointer;
14
+ @media (hover: hover) and (pointer: fine) {
15
+ &:hover {
16
+ color: $hero;
17
+ }
18
+ }
19
+ }
20
+
21
+ .fwe-burger-button {
22
+ @extend .fwe-mobile-flyout-button;
23
+ @extend .fwe-icon-menu-menu;
24
+ }
25
+ .fwe-close-button {
26
+ @extend .fwe-mobile-flyout-button;
27
+ @extend .fwe-icon-menu-close;
28
+ }
29
+
30
+ .fwe-mobile-flyout-container {
31
+ position: fixed;
32
+ display: flex;
33
+ top: $navbar-height;
34
+ left: 0px;
35
+ width: 384px;
36
+ height: calc(100vh - #{$navbar-height});
37
+ background-color: $white;
38
+ flex-direction: column;
39
+ box-shadow: 0px 1px 4px #00000029;
40
+ overflow: hidden;
41
+ transform: translateX(-105%);
42
+
43
+ @media (max-width: $grid-breakpoint-xs) {
44
+ width: 100% !important;
45
+ }
46
+ transition: transform 0.3s ease;
47
+ &.fwe-opened {
48
+ transform: translateX(0%);
49
+ }
50
+ }
51
+ }
52
+
53
+ .fwe-mobile-flyout-page {
54
+ background: $white;
55
+ position: absolute;
56
+ left: 0;
57
+ top: 0;
58
+ right: 0;
59
+ bottom: 0;
60
+ transform: translateX(100%);
61
+ transition: transform 0.3s ease;
62
+ @include custom-scrollbar;
63
+ overflow-x: hidden;
64
+ overflow-y: auto;
65
+
66
+ &.fwe-opened {
67
+ transform: translateX(0%);
68
+ }
69
+
70
+ .fwe-page-back {
71
+ cursor: pointer;
72
+ height: 53px;
73
+ display: flex;
74
+ align-items: center;
75
+ background: $background;
76
+ &:hover {
77
+ background: $control;
78
+ }
79
+ i {
80
+ @extend .fwe-icon;
81
+ @extend .fwe-icon-arrows-left-2;
82
+ margin-left: 16px;
83
+ margin-right: 8px;
84
+ }
85
+ div {
86
+ margin-top: -1px;
87
+ margin-bottom: 1px;
88
+ }
89
+ }
90
+
91
+ .fwe-mobile-flyout-item-container {
92
+ padding: 24px;
93
+ @media (max-width: $grid-breakpoint-xs) {
94
+ padding: 16px;
95
+ }
96
+ }
97
+ }
98
+
99
+ .fwe-mobile-flyout-item {
100
+ color: $text;
101
+ cursor: pointer;
102
+ display: flex;
103
+ align-items: center;
104
+ height: 56px;
105
+ &.fwe-active {
106
+ color: $hero;
107
+ }
108
+ }