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

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 (89) hide show
  1. package/README.md +73 -73
  2. package/dist/css/festo-web-essentials.css +621 -3333
  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/fonts/festo_icons-16.woff2 +0 -0
  7. package/dist/css/fonts/festo_icons-24.woff2 +0 -0
  8. package/dist/css/fonts/festo_icons-32.woff2 +0 -0
  9. package/dist/css/organisms/festo-web-essentials-organisms.css +11 -16
  10. package/dist/css/organisms/festo-web-essentials-organisms.css.map +1 -1
  11. package/dist/css/organisms/festo-web-essentials-organisms.min.css +2 -2
  12. package/dist/css/organisms/festo-web-essentials-organisms.min.css.map +1 -1
  13. package/dist/css/themes/flatpickr/festo.css +3 -18
  14. package/dist/css/themes/flatpickr/festo.css.map +1 -1
  15. package/dist/css/themes/flatpickr/festo.min.css +2 -2
  16. package/dist/css/themes/flatpickr/festo.min.css.map +1 -1
  17. package/dist/fonts/festo_icons-16.woff2 +0 -0
  18. package/dist/fonts/festo_icons-24.woff2 +0 -0
  19. package/dist/fonts/festo_icons-32.woff2 +0 -0
  20. package/dist/scss/_breadcrumb.scss +37 -37
  21. package/dist/scss/_button.scss +128 -128
  22. package/dist/scss/_cards.scss +98 -98
  23. package/dist/scss/_checkbox.scss +153 -153
  24. package/dist/scss/_chips.scss +145 -145
  25. package/dist/scss/_fonts.scss +59 -59
  26. package/dist/scss/_icons.scss +1524 -1446
  27. package/dist/scss/_loading-indicator.scss +176 -176
  28. package/dist/scss/_mixins.scss +2 -2
  29. package/dist/scss/_mobile-flyout.scss +108 -108
  30. package/dist/scss/_modal.scss +9 -8
  31. package/dist/scss/_navbar-menu.scss +351 -351
  32. package/dist/scss/_navbar.scss +258 -258
  33. package/dist/scss/_popover.scss +201 -201
  34. package/dist/scss/_progressbar.scss +67 -67
  35. package/dist/scss/_radio.scss +152 -152
  36. package/dist/scss/_root.scss +111 -111
  37. package/dist/scss/_search-input.scss +92 -92
  38. package/dist/scss/_select.scss +95 -95
  39. package/dist/scss/_stepper-horizontal.scss +127 -127
  40. package/dist/scss/_stepper-vertical.scss +121 -121
  41. package/dist/scss/_table.scss +150 -150
  42. package/dist/scss/_timepicker.scss +68 -68
  43. package/dist/scss/_tree.scss +211 -211
  44. package/dist/scss/_variables.scss +252 -252
  45. package/dist/scss/festo-web-essentials.scss +1 -1
  46. package/dist/scss/fonts/festo_icons-16.woff2 +0 -0
  47. package/dist/scss/fonts/festo_icons-24.woff2 +0 -0
  48. package/dist/scss/fonts/festo_icons-32.woff2 +0 -0
  49. package/dist/scss/organisms/_footer.scss +142 -142
  50. package/dist/scss/organisms/_header-slider.scss +153 -153
  51. package/dist/scss/organisms/_image-gallery.scss +257 -257
  52. package/dist/scss/organisms/_login.scss +59 -57
  53. package/dist/scss/organisms/_side-menu.scss +54 -54
  54. package/dist/scss/organisms/festo-web-essentials-organisms.scss +15 -15
  55. package/dist/scss/themes/flatpickr/festo.scss +834 -834
  56. package/package.json +88 -9
  57. package/scss/_breadcrumb.scss +37 -37
  58. package/scss/_button.scss +128 -128
  59. package/scss/_cards.scss +98 -98
  60. package/scss/_checkbox.scss +153 -153
  61. package/scss/_chips.scss +145 -145
  62. package/scss/_fonts.scss +59 -59
  63. package/scss/_icons.scss +1524 -1446
  64. package/scss/_loading-indicator.scss +176 -176
  65. package/scss/_mixins.scss +2 -2
  66. package/scss/_mobile-flyout.scss +108 -108
  67. package/scss/_modal.scss +9 -8
  68. package/scss/_navbar-menu.scss +351 -351
  69. package/scss/_navbar.scss +258 -258
  70. package/scss/_popover.scss +201 -201
  71. package/scss/_progressbar.scss +67 -67
  72. package/scss/_radio.scss +152 -152
  73. package/scss/_root.scss +111 -111
  74. package/scss/_search-input.scss +92 -92
  75. package/scss/_select.scss +95 -95
  76. package/scss/_stepper-horizontal.scss +127 -127
  77. package/scss/_stepper-vertical.scss +121 -121
  78. package/scss/_table.scss +150 -150
  79. package/scss/_timepicker.scss +68 -68
  80. package/scss/_tree.scss +211 -211
  81. package/scss/_variables.scss +252 -252
  82. package/scss/festo-web-essentials.scss +1 -1
  83. package/scss/organisms/_footer.scss +142 -142
  84. package/scss/organisms/_header-slider.scss +153 -153
  85. package/scss/organisms/_image-gallery.scss +257 -257
  86. package/scss/organisms/_login.scss +59 -57
  87. package/scss/organisms/_side-menu.scss +54 -54
  88. package/scss/organisms/festo-web-essentials-organisms.scss +15 -15
  89. package/scss/themes/flatpickr/festo.scss +834 -834
package/dist/scss/_button.scss CHANGED
@@ -1,128 +1,128 @@
1
- a.fwe-btn,
2
- button.fwe-btn {
3
- line-height: normal;
4
- box-sizing: border-box;
5
- display: inline-flex;
6
- align-items: center;
7
- text-align: center;
8
- justify-content: center;
9
- font-family: $font-family-base;
10
- font-size: $font-size-base;
11
- padding: 4px 16px;
12
- min-height: 32px;
13
- color: $btn-text;
14
- background: $btn;
15
- border-radius: $control-border-radius;
16
- cursor: pointer;
17
- border: none;
18
-
19
- i[class^="fwe-icon-"],
20
- i[class*=" fwe-icon-"] {
21
- padding-right: 8px;
22
- }
23
-
24
- &:hover {
25
- color: $btn-text-hover;
26
- background: $btn-hover;
27
- }
28
-
29
- &:active {
30
- background: $btn-active;
31
- }
32
-
33
- &:focus {
34
- outline: 0;
35
- }
36
-
37
- &:disabled,
38
- &.fwe-disabled {
39
- cursor: default;
40
- background: $btn-disabled;
41
- color: $btn-text-disabled;
42
- }
43
-
44
- &.fwe-btn-hero {
45
- color: $btn-hero-text;
46
- background: $btn-hero;
47
-
48
- &:hover {
49
- color: $btn-hero-text-hover;
50
- background: $btn-hero-hover;
51
- }
52
-
53
- &:active {
54
- background: $btn-hero-active;
55
- }
56
-
57
- &:disabled,
58
- &.fwe-disabled {
59
- background: $btn-hero-disabled;
60
- color: $btn-hero-text-disabled;
61
- }
62
- }
63
-
64
- &.fwe-btn-block {
65
- width: 100%;
66
- }
67
-
68
- &.fwe-btn-link {
69
- background: none;
70
- color: $hero;
71
- padding: 0;
72
-
73
- i[class^="fwe-icon-"],
74
- i[class*=" fwe-icon-"] {
75
- padding-right: 4px;
76
- }
77
-
78
- &.fwe-dark {
79
- color: $text;
80
- }
81
-
82
- &:hover {
83
- background: none;
84
- color: $hero-dark;
85
- }
86
-
87
- &:active {
88
- background: none;
89
- color: $hero-dark;
90
- }
91
-
92
- &:disabled,
93
- &.fwe-disabled {
94
- color: $btn-text-disabled;
95
- }
96
- }
97
-
98
- &.fwe-btn-lg {
99
- padding: 4px 24px;
100
- min-height: 48px;
101
- i[class^="fwe-icon-"],
102
- i[class*=" fwe-icon-"] {
103
- @extend .fwe-icon-lg;
104
- }
105
- }
106
-
107
- &.fwe-btn-icon {
108
- border-radius: 50%;
109
- padding: 0px;
110
- height: 32px;
111
- width: 32px;
112
- justify-content: center;
113
-
114
- &.fwe-btn-lg {
115
- height: 48px;
116
- width: 48px;
117
- }
118
-
119
- i[class^="fwe-icon-"],
120
- i[class*=" fwe-icon-"] {
121
- padding-right: 0px;
122
- }
123
- }
124
- }
125
-
126
- a.fwe-btn.fwe-disabled {
127
- pointer-events: none;
128
- }
1
+ a.fwe-btn,
2
+ button.fwe-btn {
3
+ line-height: normal;
4
+ box-sizing: border-box;
5
+ display: inline-flex;
6
+ align-items: center;
7
+ text-align: center;
8
+ justify-content: center;
9
+ font-family: $font-family-base;
10
+ font-size: $font-size-base;
11
+ padding: 4px 16px;
12
+ min-height: 32px;
13
+ color: $btn-text;
14
+ background: $btn;
15
+ border-radius: $control-border-radius;
16
+ cursor: pointer;
17
+ border: none;
18
+
19
+ i[class^="fwe-icon-"],
20
+ i[class*=" fwe-icon-"] {
21
+ padding-right: 8px;
22
+ }
23
+
24
+ &:hover {
25
+ color: $btn-text-hover;
26
+ background: $btn-hover;
27
+ }
28
+
29
+ &:active {
30
+ background: $btn-active;
31
+ }
32
+
33
+ &:focus {
34
+ outline: 0;
35
+ }
36
+
37
+ &:disabled,
38
+ &.fwe-disabled {
39
+ cursor: default;
40
+ background: $btn-disabled;
41
+ color: $btn-text-disabled;
42
+ }
43
+
44
+ &.fwe-btn-hero {
45
+ color: $btn-hero-text;
46
+ background: $btn-hero;
47
+
48
+ &:hover {
49
+ color: $btn-hero-text-hover;
50
+ background: $btn-hero-hover;
51
+ }
52
+
53
+ &:active {
54
+ background: $btn-hero-active;
55
+ }
56
+
57
+ &:disabled,
58
+ &.fwe-disabled {
59
+ background: $btn-hero-disabled;
60
+ color: $btn-hero-text-disabled;
61
+ }
62
+ }
63
+
64
+ &.fwe-btn-block {
65
+ width: 100%;
66
+ }
67
+
68
+ &.fwe-btn-link {
69
+ background: none;
70
+ color: $hero;
71
+ padding: 0;
72
+
73
+ i[class^="fwe-icon-"],
74
+ i[class*=" fwe-icon-"] {
75
+ padding-right: 4px;
76
+ }
77
+
78
+ &.fwe-dark {
79
+ color: $text;
80
+ }
81
+
82
+ &:hover {
83
+ background: none;
84
+ color: $hero-dark;
85
+ }
86
+
87
+ &:active {
88
+ background: none;
89
+ color: $hero-dark;
90
+ }
91
+
92
+ &:disabled,
93
+ &.fwe-disabled {
94
+ color: $btn-text-disabled;
95
+ }
96
+ }
97
+
98
+ &.fwe-btn-lg {
99
+ padding: 4px 24px;
100
+ min-height: 48px;
101
+ i[class^="fwe-icon-"],
102
+ i[class*=" fwe-icon-"] {
103
+ @extend .fwe-icon-lg;
104
+ }
105
+ }
106
+
107
+ &.fwe-btn-icon {
108
+ border-radius: 50%;
109
+ padding: 0px;
110
+ height: 32px;
111
+ width: 32px;
112
+ justify-content: center;
113
+
114
+ &.fwe-btn-lg {
115
+ height: 48px;
116
+ width: 48px;
117
+ }
118
+
119
+ i[class^="fwe-icon-"],
120
+ i[class*=" fwe-icon-"] {
121
+ padding-right: 0px;
122
+ }
123
+ }
124
+ }
125
+
126
+ a.fwe-btn.fwe-disabled {
127
+ pointer-events: none;
128
+ }
package/dist/scss/_cards.scss CHANGED
@@ -1,98 +1,98 @@
1
- .fwe-card {
2
- display: flex;
3
- flex-direction: column;
4
- border: 1px solid $border;
5
- background-color: $white;
6
- border-radius: $border-radius-m;
7
-
8
- .fwe-card-img {
9
- width: 100%;
10
- border-top-left-radius: 6px;
11
- border-top-right-radius: 6px;
12
- }
13
-
14
- .fwe-card-img-169 {
15
- @extend .fwe-card-img;
16
- height: 188px;
17
- max-height: 188px;
18
- object-fit: cover;
19
- object-position: center center;
20
- }
21
-
22
- .fwe-card-img-32 {
23
- @extend .fwe-card-img;
24
- height: 284px;
25
- max-height: 284px;
26
- object-fit: cover;
27
- object-position: center center;
28
- }
29
-
30
- .fwe-card-header {
31
- padding: 24px;
32
- padding-bottom: 0;
33
- display: flex;
34
- flex-direction: row;
35
- align-items: baseline;
36
-
37
- .fwe-card-title {
38
- h5 {
39
- line-height: $font-size-xl;
40
- font-size: $font-size-xl;
41
- margin: 0;
42
- padding: 0;
43
- }
44
-
45
- p {
46
- padding: 0;
47
- margin: 0;
48
- color: $text-light;
49
- font-size: $font-size-md;
50
- }
51
- }
52
- }
53
-
54
- .fwe-card-body {
55
- flex-grow: 1;
56
- padding: 24px;
57
- padding-bottom: 48px;
58
-
59
- .fwe-card-text {
60
- margin: 0;
61
- padding: 0;
62
- }
63
-
64
- > *:not(:last-child) {
65
- margin-bottom: 24px;
66
- }
67
- }
68
-
69
- .fwe-card-notification {
70
- height: 64px;
71
- min-height: 64px;
72
- border-bottom-left-radius: 8px;
73
- border-bottom-right-radius: 8px;
74
- display: flex;
75
- flex-direction: row;
76
- align-items: center;
77
- padding-left: 24px;
78
- padding-right: 24px;
79
-
80
- .fwe-card-title {
81
- padding-left: 16px;
82
-
83
- h6 {
84
- line-height: $font-size-base;
85
- font-size: $font-size-base;
86
- font-weight: $font-weight-bold;
87
- margin: 0;
88
- padding: 0;
89
- }
90
-
91
- p {
92
- padding: 0;
93
- margin: 0;
94
- color: $text;
95
- }
96
- }
97
- }
98
- }
1
+ .fwe-card {
2
+ display: flex;
3
+ flex-direction: column;
4
+ border: 1px solid $border;
5
+ background-color: $white;
6
+ border-radius: $border-radius-m;
7
+
8
+ .fwe-card-img {
9
+ width: 100%;
10
+ border-top-left-radius: 6px;
11
+ border-top-right-radius: 6px;
12
+ }
13
+
14
+ .fwe-card-img-169 {
15
+ @extend .fwe-card-img;
16
+ height: 188px;
17
+ max-height: 188px;
18
+ object-fit: cover;
19
+ object-position: center center;
20
+ }
21
+
22
+ .fwe-card-img-32 {
23
+ @extend .fwe-card-img;
24
+ height: 284px;
25
+ max-height: 284px;
26
+ object-fit: cover;
27
+ object-position: center center;
28
+ }
29
+
30
+ .fwe-card-header {
31
+ padding: 24px;
32
+ padding-bottom: 0;
33
+ display: flex;
34
+ flex-direction: row;
35
+ align-items: baseline;
36
+
37
+ .fwe-card-title {
38
+ h5 {
39
+ line-height: $font-size-xl;
40
+ font-size: $font-size-xl;
41
+ margin: 0;
42
+ padding: 0;
43
+ }
44
+
45
+ p {
46
+ padding: 0;
47
+ margin: 0;
48
+ color: $text-light;
49
+ font-size: $font-size-md;
50
+ }
51
+ }
52
+ }
53
+
54
+ .fwe-card-body {
55
+ flex-grow: 1;
56
+ padding: 24px;
57
+ padding-bottom: 48px;
58
+
59
+ .fwe-card-text {
60
+ margin: 0;
61
+ padding: 0;
62
+ }
63
+
64
+ > *:not(:last-child) {
65
+ margin-bottom: 24px;
66
+ }
67
+ }
68
+
69
+ .fwe-card-notification {
70
+ height: 64px;
71
+ min-height: 64px;
72
+ border-bottom-left-radius: 8px;
73
+ border-bottom-right-radius: 8px;
74
+ display: flex;
75
+ flex-direction: row;
76
+ align-items: center;
77
+ padding-left: 24px;
78
+ padding-right: 24px;
79
+
80
+ .fwe-card-title {
81
+ padding-left: 16px;
82
+
83
+ h6 {
84
+ line-height: $font-size-base;
85
+ font-size: $font-size-base;
86
+ font-weight: $font-weight-bold;
87
+ margin: 0;
88
+ padding: 0;
89
+ }
90
+
91
+ p {
92
+ padding: 0;
93
+ margin: 0;
94
+ color: $text;
95
+ }
96
+ }
97
+ }
98
+ }