@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/_tree.scss CHANGED
@@ -1,211 +1,211 @@
1
- .fwe-tree {
2
- @include custom-scrollbar();
3
- position: relative;
4
-
5
- &-node {
6
- position: relative;
7
- display: flex;
8
- flex-basis: 100%;
9
- min-width: 0;
10
- height: $spacer * 2.5;
11
-
12
- &-indicator {
13
- position: absolute;
14
- left: 0;
15
- width: 100%;
16
- height: $spacer * 2.5;
17
-
18
- &::before {
19
- position: absolute;
20
- content: "";
21
- width: 1px;
22
- height: $spacer * 2.5;
23
- left: 0;
24
- background-color: $caerul;
25
- transform-origin: left top;
26
- transform: scaleX(0);
27
- transition: none;
28
- }
29
- }
30
-
31
- &-container {
32
- position: relative;
33
- width: 100%;
34
- display: flex;
35
- align-items: center;
36
-
37
- &--selected {
38
- > .fwe-tree-node-indicator {
39
- background-color: $background;
40
-
41
- &::before {
42
- transform: scaleX(4);
43
- transition: transform 0.2s;
44
- }
45
- }
46
-
47
- > .fwe-tree-node {
48
- .fwe-btn--tree-node-toggle {
49
- .fwe-icon {
50
- color: $caerul;
51
- }
52
- }
53
-
54
- .fwe-btn--tree-node-select {
55
- .fwe-icon {
56
- color: $caerul;
57
- }
58
- }
59
-
60
- .fwe-tree-node-text {
61
- color: $caerul;
62
- font-weight: $font-weight-bold;
63
- }
64
- }
65
- }
66
-
67
- &--disabled {
68
- pointer-events: none;
69
- > .fwe-tree-node {
70
- .fwe-tree-node-alert {
71
- .fwe-icon {
72
- color: $btn-text-disabled !important;
73
- }
74
- }
75
- }
76
- }
77
-
78
- $levels: 10;
79
- @for $i from 1 through $levels {
80
- &[aria-level="#{$i}"] {
81
- padding-left: $spacer * ($i - 1);
82
- }
83
- }
84
-
85
- &[aria-expanded="false"] {
86
- > .fwe-tree-node {
87
- .fwe-icon-arrows-right-2 {
88
- &::before {
89
- transform: rotate(0deg);
90
- transition: transform 0.2s;
91
- }
92
- }
93
- }
94
- }
95
-
96
- &[aria-expanded="true"] {
97
- > .fwe-tree-node {
98
- .fwe-tree-node-text {
99
- font-weight: $font-weight-bold;
100
- }
101
-
102
- .fwe-icon-arrows-right-2 {
103
- &::before {
104
- transform: rotate(90deg);
105
- transition: transform 0.2s;
106
- }
107
- }
108
- }
109
- }
110
-
111
- &:not([aria-expanded]) {
112
- > .fwe-tree-node {
113
- margin-left: $spacer * 2.5;
114
- }
115
- }
116
- }
117
-
118
- &-text {
119
- font-size: $font-size-md;
120
- height: $spacer-l;
121
- line-height: $spacer-l;
122
- white-space: nowrap;
123
- overflow: hidden;
124
- text-overflow: ellipsis;
125
- margin: 0 $spacer-s 0 $spacer-xxs;
126
- }
127
-
128
- &-alert {
129
- width: $spacer * 2.5;
130
- max-width: $spacer * 2.5;
131
- flex-shrink: 0;
132
- display: flex;
133
- align-items: center;
134
- justify-content: center;
135
- }
136
- }
137
-
138
- &--nested {
139
- .fwe-tree-node-container {
140
- display: block;
141
- position: static;
142
- min-width: 0;
143
- width: inherit;
144
-
145
- .fwe-tree-node-container {
146
- margin-left: $spacer;
147
- }
148
- }
149
- }
150
- }
151
-
152
- .fwe-btn.fwe-btn-link {
153
- &.fwe-btn--tree-node-toggle {
154
- color: $text;
155
- padding: 0 $spacer-xxs 0 $spacer-s;
156
- justify-content: flex-start;
157
- }
158
-
159
- &.fwe-btn--tree-node-select {
160
- color: $text;
161
- justify-content: flex-start;
162
- min-width: 0;
163
- flex-basis: 100%;
164
- }
165
- }
166
-
167
- .fwe-btn--tree-node-select {
168
- .fwe-icon {
169
- padding-right: 0;
170
- }
171
- }
172
-
173
- .fwe-tree-node {
174
- &:hover {
175
- .fwe-tree-node-text {
176
- color: $btn-hero-hover;
177
- }
178
-
179
- .fwe-btn--tree-node-select {
180
- .fwe-icon {
181
- color: $btn-hero-hover;
182
- }
183
- }
184
-
185
- .fwe-btn--tree-node-toggle {
186
- .fwe-icon {
187
- color: $btn-hero-hover;
188
- }
189
- }
190
- }
191
- }
192
-
193
- .fwe-tree-node {
194
- &:active {
195
- .fwe-tree-node-text {
196
- color: $btn-hero-active;
197
- }
198
-
199
- .fwe-btn--tree-node-select {
200
- .fwe-icon {
201
- color: $btn-hero-active;
202
- }
203
- }
204
-
205
- .fwe-btn--tree-node-toggle {
206
- .fwe-icon {
207
- color: $btn-hero-active;
208
- }
209
- }
210
- }
211
- }
1
+ .fwe-tree {
2
+ @include custom-scrollbar();
3
+ position: relative;
4
+
5
+ &-node {
6
+ position: relative;
7
+ display: flex;
8
+ flex-basis: 100%;
9
+ min-width: 0;
10
+ height: $spacer * 2.5;
11
+
12
+ &-indicator {
13
+ position: absolute;
14
+ left: 0;
15
+ width: 100%;
16
+ height: $spacer * 2.5;
17
+
18
+ &::before {
19
+ position: absolute;
20
+ content: "";
21
+ width: 1px;
22
+ height: $spacer * 2.5;
23
+ left: 0;
24
+ background-color: $caerul;
25
+ transform-origin: left top;
26
+ transform: scaleX(0);
27
+ transition: none;
28
+ }
29
+ }
30
+
31
+ &-container {
32
+ position: relative;
33
+ width: 100%;
34
+ display: flex;
35
+ align-items: center;
36
+
37
+ &--selected {
38
+ > .fwe-tree-node-indicator {
39
+ background-color: $background;
40
+
41
+ &::before {
42
+ transform: scaleX(4);
43
+ transition: transform 0.2s;
44
+ }
45
+ }
46
+
47
+ > .fwe-tree-node {
48
+ .fwe-btn--tree-node-toggle {
49
+ .fwe-icon {
50
+ color: $caerul;
51
+ }
52
+ }
53
+
54
+ .fwe-btn--tree-node-select {
55
+ .fwe-icon {
56
+ color: $caerul;
57
+ }
58
+ }
59
+
60
+ .fwe-tree-node-text {
61
+ color: $caerul;
62
+ font-weight: $font-weight-bold;
63
+ }
64
+ }
65
+ }
66
+
67
+ &--disabled {
68
+ pointer-events: none;
69
+ > .fwe-tree-node {
70
+ .fwe-tree-node-alert {
71
+ .fwe-icon {
72
+ color: $btn-text-disabled !important;
73
+ }
74
+ }
75
+ }
76
+ }
77
+
78
+ $levels: 10;
79
+ @for $i from 1 through $levels {
80
+ &[aria-level="#{$i}"] {
81
+ padding-left: $spacer * ($i - 1);
82
+ }
83
+ }
84
+
85
+ &[aria-expanded="false"] {
86
+ > .fwe-tree-node {
87
+ .fwe-icon-arrows-right-2 {
88
+ &::before {
89
+ transform: rotate(0deg);
90
+ transition: transform 0.2s;
91
+ }
92
+ }
93
+ }
94
+ }
95
+
96
+ &[aria-expanded="true"] {
97
+ > .fwe-tree-node {
98
+ .fwe-tree-node-text {
99
+ font-weight: $font-weight-bold;
100
+ }
101
+
102
+ .fwe-icon-arrows-right-2 {
103
+ &::before {
104
+ transform: rotate(90deg);
105
+ transition: transform 0.2s;
106
+ }
107
+ }
108
+ }
109
+ }
110
+
111
+ &:not([aria-expanded]) {
112
+ > .fwe-tree-node {
113
+ margin-left: $spacer * 2.5;
114
+ }
115
+ }
116
+ }
117
+
118
+ &-text {
119
+ font-size: $font-size-md;
120
+ height: $spacer-l;
121
+ line-height: $spacer-l;
122
+ white-space: nowrap;
123
+ overflow: hidden;
124
+ text-overflow: ellipsis;
125
+ margin: 0 $spacer-s 0 $spacer-xxs;
126
+ }
127
+
128
+ &-alert {
129
+ width: $spacer * 2.5;
130
+ max-width: $spacer * 2.5;
131
+ flex-shrink: 0;
132
+ display: flex;
133
+ align-items: center;
134
+ justify-content: center;
135
+ }
136
+ }
137
+
138
+ &--nested {
139
+ .fwe-tree-node-container {
140
+ display: block;
141
+ position: static;
142
+ min-width: 0;
143
+ width: inherit;
144
+
145
+ .fwe-tree-node-container {
146
+ margin-left: $spacer;
147
+ }
148
+ }
149
+ }
150
+ }
151
+
152
+ .fwe-btn.fwe-btn-link {
153
+ &.fwe-btn--tree-node-toggle {
154
+ color: $text;
155
+ padding: 0 $spacer-xxs 0 $spacer-s;
156
+ justify-content: flex-start;
157
+ }
158
+
159
+ &.fwe-btn--tree-node-select {
160
+ color: $text;
161
+ justify-content: flex-start;
162
+ min-width: 0;
163
+ flex-basis: 100%;
164
+ }
165
+ }
166
+
167
+ .fwe-btn--tree-node-select {
168
+ .fwe-icon {
169
+ padding-right: 0;
170
+ }
171
+ }
172
+
173
+ .fwe-tree-node {
174
+ &:hover {
175
+ .fwe-tree-node-text {
176
+ color: $btn-hero-hover;
177
+ }
178
+
179
+ .fwe-btn--tree-node-select {
180
+ .fwe-icon {
181
+ color: $btn-hero-hover;
182
+ }
183
+ }
184
+
185
+ .fwe-btn--tree-node-toggle {
186
+ .fwe-icon {
187
+ color: $btn-hero-hover;
188
+ }
189
+ }
190
+ }
191
+ }
192
+
193
+ .fwe-tree-node {
194
+ &:active {
195
+ .fwe-tree-node-text {
196
+ color: $btn-hero-active;
197
+ }
198
+
199
+ .fwe-btn--tree-node-select {
200
+ .fwe-icon {
201
+ color: $btn-hero-active;
202
+ }
203
+ }
204
+
205
+ .fwe-btn--tree-node-toggle {
206
+ .fwe-icon {
207
+ color: $btn-hero-active;
208
+ }
209
+ }
210
+ }
211
+ }