@festo-ui/web-essentials 4.0.3-pre-20221213.1 → 5.0.0-dev.19

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/dist/scss/_chips.scss CHANGED
@@ -1,145 +1,145 @@
1
- %chip-lg {
2
- font-size: $font-size-base;
3
- line-height: 22px;
4
- border-radius: $border-radius-xl;
5
- padding: 3px 16px 5px 16px;
6
- i[class^="fwe-icon-"],
7
- i[class*=" fwe-icon-"] {
8
- @extend .fwe-icon-lg;
9
- margin-bottom: -3px;
10
- }
11
- &.fwe-selected {
12
- &.fwe-category {
13
- padding-right: 30px;
14
- &::after {
15
- top: 4px;
16
- font-family: $font-family-icons-24;
17
- font-size: $font-size-xl;
18
- line-height: $font-size-xl;
19
- }
20
- }
21
- &.fwe-filter {
22
- padding-left: 30px;
23
- &::before {
24
- left: 9px;
25
- top: 8px;
26
- }
27
- }
28
- }
29
- }
30
-
31
- .fwe-chip-container {
32
- display: flex;
33
- flex-wrap: wrap;
34
- margin: 0px -8px -8px 0px;
35
-
36
- &.fwe-chip-container-lg {
37
- .fwe-chip {
38
- @extend %chip-lg;
39
- }
40
- }
41
- }
42
-
43
- .fwe-chip {
44
- user-select: none;
45
- position: relative;
46
- display: flex;
47
- align-items: flex-end;
48
- font-size: $font-size-md;
49
- line-height: calc(#{$font-size-md} + 7px);
50
- text-align: center;
51
- border-radius: $border-radius-l;
52
- cursor: pointer;
53
- background: $control;
54
- color: $text;
55
- border: 1px solid $control;
56
- box-sizing: border-box;
57
- padding: 0px 12px 1px 12px;
58
- margin: 0px 8px 8px 0px;
59
- i[class^="fwe-icon-"],
60
- i[class*=" fwe-icon-"] {
61
- margin-bottom: -1px;
62
- margin-left: -4px;
63
- padding-right: 8px;
64
- }
65
- &:hover {
66
- background: $control-dark;
67
- border: 1px solid $control-dark;
68
- }
69
- &:active {
70
- background: $control-darker;
71
- border: 1px solid $control-darker;
72
- }
73
- &.fwe-selected {
74
- cursor: default;
75
- background: transparent;
76
- border: 1px solid $hero;
77
- color: $hero;
78
- &.fwe-category {
79
- cursor: pointer;
80
- padding-right: 24px;
81
- &::after {
82
- position: absolute;
83
- right: 5px;
84
- top: 3px;
85
- color: $text;
86
- font-family: $font-family-icons-16;
87
- font-size: 16px;
88
- content: "\ea1c";
89
- line-height: 16px;
90
- -webkit-font-smoothing: antialiased;
91
- -moz-osx-font-smoothing: grayscale;
92
- }
93
- &:hover {
94
- background: $gray-100;
95
- &::after {
96
- color: $hero;
97
- }
98
- }
99
- &:active {
100
- background: $gray-200;
101
- }
102
- }
103
- &.fwe-filter {
104
- cursor: pointer;
105
- padding-left: 24px;
106
- &::before {
107
- position: absolute;
108
- left: 5px;
109
- top: 3px;
110
- color: $hero;
111
- font-family: $font-family-icons-16;
112
- font-size: 16px;
113
- content: "\e9d3";
114
- line-height: 16px;
115
- -webkit-font-smoothing: antialiased;
116
- -moz-osx-font-smoothing: grayscale;
117
- }
118
- &:hover {
119
- background: $gray-100;
120
- &::after {
121
- color: $hero;
122
- }
123
- }
124
- &:active {
125
- background: $gray-200;
126
- }
127
- }
128
- }
129
- &.fwe-readonly {
130
- cursor: default;
131
- background: transparent;
132
- color: $text-light;
133
- border: 1px solid $text-light;
134
- }
135
- &.fwe-disabled {
136
- cursor: default;
137
- background: $control-disabled;
138
- border: 1px solid $control-disabled;
139
- color: $text-disabled;
140
- }
141
-
142
- &.fwe-chip-lg {
143
- @extend %chip-lg;
144
- }
145
- }
1
+ %chip-lg {
2
+ font-size: $font-size-base;
3
+ line-height: 22px;
4
+ border-radius: $border-radius-xl;
5
+ padding: 3px 16px 5px 16px;
6
+ i[class^="fwe-icon-"],
7
+ i[class*=" fwe-icon-"] {
8
+ @extend .fwe-icon-lg;
9
+ margin-bottom: -3px;
10
+ }
11
+ &.fwe-selected {
12
+ &.fwe-category {
13
+ padding-right: 30px;
14
+ &::after {
15
+ top: 4px;
16
+ font-family: $font-family-icons-24;
17
+ font-size: $font-size-xl;
18
+ line-height: $font-size-xl;
19
+ }
20
+ }
21
+ &.fwe-filter {
22
+ padding-left: 30px;
23
+ &::before {
24
+ left: 9px;
25
+ top: 8px;
26
+ }
27
+ }
28
+ }
29
+ }
30
+
31
+ .fwe-chip-container {
32
+ display: flex;
33
+ flex-wrap: wrap;
34
+ margin: 0px -8px -8px 0px;
35
+
36
+ &.fwe-chip-container-lg {
37
+ .fwe-chip {
38
+ @extend %chip-lg;
39
+ }
40
+ }
41
+ }
42
+
43
+ .fwe-chip {
44
+ user-select: none;
45
+ position: relative;
46
+ display: flex;
47
+ align-items: flex-end;
48
+ font-size: $font-size-md;
49
+ line-height: calc(#{$font-size-md} + 7px);
50
+ text-align: center;
51
+ border-radius: $border-radius-l;
52
+ cursor: pointer;
53
+ background: $control;
54
+ color: $text;
55
+ border: 1px solid $control;
56
+ box-sizing: border-box;
57
+ padding: 0px 12px 1px 12px;
58
+ margin: 0px 8px 8px 0px;
59
+ i[class^="fwe-icon-"],
60
+ i[class*=" fwe-icon-"] {
61
+ margin-bottom: -1px;
62
+ margin-left: -4px;
63
+ padding-right: 8px;
64
+ }
65
+ &:hover {
66
+ background: $control-dark;
67
+ border: 1px solid $control-dark;
68
+ }
69
+ &:active {
70
+ background: $control-darker;
71
+ border: 1px solid $control-darker;
72
+ }
73
+ &.fwe-selected {
74
+ cursor: default;
75
+ background: transparent;
76
+ border: 1px solid $hero;
77
+ color: $hero;
78
+ &.fwe-category {
79
+ cursor: pointer;
80
+ padding-right: 24px;
81
+ &::after {
82
+ position: absolute;
83
+ right: 5px;
84
+ top: 3px;
85
+ color: $text;
86
+ font-family: $font-family-icons-16;
87
+ font-size: 16px;
88
+ content: "\ea1c";
89
+ line-height: 16px;
90
+ -webkit-font-smoothing: antialiased;
91
+ -moz-osx-font-smoothing: grayscale;
92
+ }
93
+ &:hover {
94
+ background: $gray-100;
95
+ &::after {
96
+ color: $hero;
97
+ }
98
+ }
99
+ &:active {
100
+ background: $gray-200;
101
+ }
102
+ }
103
+ &.fwe-filter {
104
+ cursor: pointer;
105
+ padding-left: 24px;
106
+ &::before {
107
+ position: absolute;
108
+ left: 5px;
109
+ top: 3px;
110
+ color: $hero;
111
+ font-family: $font-family-icons-16;
112
+ font-size: 16px;
113
+ content: "\e9d3";
114
+ line-height: 16px;
115
+ -webkit-font-smoothing: antialiased;
116
+ -moz-osx-font-smoothing: grayscale;
117
+ }
118
+ &:hover {
119
+ background: $gray-100;
120
+ &::after {
121
+ color: $hero;
122
+ }
123
+ }
124
+ &:active {
125
+ background: $gray-200;
126
+ }
127
+ }
128
+ }
129
+ &.fwe-readonly {
130
+ cursor: default;
131
+ background: transparent;
132
+ color: $text-light;
133
+ border: 1px solid $text-light;
134
+ }
135
+ &.fwe-disabled {
136
+ cursor: default;
137
+ background: $control-disabled;
138
+ border: 1px solid $control-disabled;
139
+ color: $text-disabled;
140
+ }
141
+
142
+ &.fwe-chip-lg {
143
+ @extend %chip-lg;
144
+ }
145
+ }
package/dist/scss/_fonts.scss CHANGED
@@ -1,59 +1,59 @@
1
- /* Festo regular */
2
- @font-face {
3
- font-family: "Festo";
4
- src: url("../fonts/FestoW05-Regular.woff2") format("woff2"), url("../fonts/FestoW05-Regular.woff") format("woff");
5
- }
6
-
7
- /* Festo bold */
8
- @font-face {
9
- font-family: "Festo";
10
- font-weight: bold;
11
- src: url("../fonts/FestoW05-Bold.woff2") format("woff2"), url("../fonts/FestoW05-Bold.woff") format("woff");
12
- }
13
-
14
- /* Festo Icon Font */
15
- @font-face {
16
- font-family: "festo_icons-16";
17
- src: url("../fonts/festo_icons-16.woff2") format("woff2");
18
- font-weight: normal;
19
- font-style: normal;
20
- font-display: block;
21
- }
22
-
23
- @font-face {
24
- font-family: "festo_icons-24";
25
- src: url("../fonts/festo_icons-24.woff2") format("woff2");
26
- font-weight: normal;
27
- font-style: normal;
28
- font-display: block;
29
- }
30
-
31
- @font-face {
32
- font-family: "festo_icons-32";
33
- src: url("../fonts/festo_icons-32.woff2") format("woff2");
34
- font-weight: normal;
35
- font-style: normal;
36
- font-display: block;
37
- }
38
-
39
- .fwe-font-size-small {
40
- font-size: $font-size-small;
41
- }
42
- .fwe-font-size-md {
43
- font-size: $font-size-md;
44
- }
45
- .fwe-font-size-base {
46
- font-size: $font-size-base;
47
- }
48
- .fwe-font-size-xl {
49
- font-size: $font-size-xl;
50
- }
51
- .fwe-font-size-xxl {
52
- font-size: $font-size-xxl;
53
- }
54
- .fwe-line-height-base {
55
- line-height: $line-height-base;
56
- }
57
- .fwe-line-height-1 {
58
- line-height: 1;
59
- }
1
+ /* Festo regular */
2
+ @font-face {
3
+ font-family: "Festo";
4
+ src: url("../fonts/FestoW05-Regular.woff2") format("woff2"), url("../fonts/FestoW05-Regular.woff") format("woff");
5
+ }
6
+
7
+ /* Festo bold */
8
+ @font-face {
9
+ font-family: "Festo";
10
+ font-weight: bold;
11
+ src: url("../fonts/FestoW05-Bold.woff2") format("woff2"), url("../fonts/FestoW05-Bold.woff") format("woff");
12
+ }
13
+
14
+ /* Festo Icon Font */
15
+ @font-face {
16
+ font-family: "festo_icons-16";
17
+ src: url("../fonts/festo_icons-16.woff2") format("woff2");
18
+ font-weight: normal;
19
+ font-style: normal;
20
+ font-display: block;
21
+ }
22
+
23
+ @font-face {
24
+ font-family: "festo_icons-24";
25
+ src: url("../fonts/festo_icons-24.woff2") format("woff2");
26
+ font-weight: normal;
27
+ font-style: normal;
28
+ font-display: block;
29
+ }
30
+
31
+ @font-face {
32
+ font-family: "festo_icons-32";
33
+ src: url("../fonts/festo_icons-32.woff2") format("woff2");
34
+ font-weight: normal;
35
+ font-style: normal;
36
+ font-display: block;
37
+ }
38
+
39
+ .fwe-font-size-small {
40
+ font-size: $font-size-small;
41
+ }
42
+ .fwe-font-size-md {
43
+ font-size: $font-size-md;
44
+ }
45
+ .fwe-font-size-base {
46
+ font-size: $font-size-base;
47
+ }
48
+ .fwe-font-size-xl {
49
+ font-size: $font-size-xl;
50
+ }
51
+ .fwe-font-size-xxl {
52
+ font-size: $font-size-xxl;
53
+ }
54
+ .fwe-line-height-base {
55
+ line-height: $line-height-base;
56
+ }
57
+ .fwe-line-height-1 {
58
+ line-height: 1;
59
+ }