@festo-ui/web-essentials 3.0.0-pre-20220105.2 → 3.1.0

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.
@@ -0,0 +1,52 @@
1
+ .fwe-teaser-horbox {
2
+ display: flex;
3
+ background-color: var(--fwe-sucanul);
4
+ }
5
+
6
+ .fwe-teaser-horbox .fwe-teaser-horbox-img {
7
+ background-color: var(--fwe-hero);
8
+ flex: 1;
9
+ }
10
+
11
+ .fwe-teaser-horbox .fwe-teaser-horbox-content {
12
+ flex: 1;
13
+ display: inline-flex;
14
+ flex-direction: column;
15
+ padding: 24px;
16
+ }
17
+
18
+ .fwe-teaser-horbox .fwe-teaser-horbox-content .fwe-teaser-more {
19
+ align-self: flex-end;
20
+ }
21
+
22
+ .fwe-teaser-verbox {
23
+ display: inline-flex;
24
+ flex-direction: column;
25
+ background-color: var(--fwe-sucanul);
26
+ width: 100%;
27
+ height: 100%;
28
+ }
29
+
30
+ .fwe-teaser-verbox .fwe-teaser-verbox-img {
31
+ background-color: var(--fwe-hero);
32
+ height: calc(50% - 12px);
33
+ min-height: 186px;
34
+ width: 100%;
35
+ }
36
+
37
+ .fwe-teaser-verbox h2 {
38
+ padding-top: 24px;
39
+ padding-left: 24px;
40
+ padding-right: 24px;
41
+ }
42
+
43
+ .fwe-teaser-verbox p {
44
+ padding-left: 24px;
45
+ padding-right: 24px;
46
+ }
47
+
48
+ .fwe-teaser-verbox .fwe-teaser-more {
49
+ align-self: flex-end;
50
+ margin-bottom: 24px;
51
+ margin-right: 24px;
52
+ }
@@ -0,0 +1,5 @@
1
+ @import "../variables";
2
+
3
+ @import "footer";
4
+ @import "teaser";
5
+ @import "header-slider";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@festo-ui/web-essentials",
3
- "version": "3.0.0-pre-20220105.2",
3
+ "version": "3.1.0",
4
4
  "description": "CSS framework and utils to build FESTO web applications",
5
5
  "main": "jest.config.js",
6
6
  "style": "dist/css/festo-web-essentials.css",
@@ -32,6 +32,7 @@
32
32
  border-left: none;
33
33
  border-top: none;
34
34
  border-right: none;
35
+ border-radius: 0px;
35
36
  border-bottom: 1px solid $control-border;
36
37
  background: transparent;
37
38
  padding: 0px 24px 5px 32px;
@@ -22,7 +22,6 @@
22
22
  @import "list";
23
23
  @import "navbar";
24
24
  @import "breadcrumb";
25
- @import "footer";
26
25
  @import "text-link";
27
26
  @import "text-input";
28
27
  @import "chips";
@@ -0,0 +1,142 @@
1
+ footer.fwe-footer {
2
+ .fwe-social-media {
3
+ display: flex;
4
+ flex-direction: row;
5
+ justify-content: center;
6
+ padding: 24px 0px;
7
+ border-bottom: 1px solid $control-border-darker;
8
+ margin-bottom: 24px;
9
+
10
+ .fwe-social-media-link {
11
+ display: block;
12
+ width: 32px;
13
+ height: 32px;
14
+ border-radius: 4px;
15
+ margin-right: 24px;
16
+ opacity: 0.3;
17
+ transition: opacity 0.3s;
18
+
19
+ &:last-child {
20
+ margin-right: 0px;
21
+ }
22
+
23
+ &:hover {
24
+ opacity: 1;
25
+ }
26
+ }
27
+ }
28
+ .fwe-footer-details {
29
+ padding-bottom: 24px;
30
+ border-bottom: 1px solid $control-border-darker;
31
+
32
+ h4 {
33
+ font-size: 16px;
34
+ line-height: 24px;
35
+ font-weight: 700;
36
+ list-style-type: none;
37
+ position: relative;
38
+ margin-top: 0px;
39
+ margin-bottom: 12px;
40
+ }
41
+
42
+ ul.fwe-list-group {
43
+ .fwe-list-group-item {
44
+ padding-left: 0px;
45
+ }
46
+ }
47
+
48
+ p {
49
+ padding-top: 8px;
50
+ max-width: 320px;
51
+ }
52
+
53
+ &:not(:first-child) {
54
+ margin-top: 24px;
55
+ }
56
+ }
57
+ .fwe-bottomline {
58
+ font-size: 12px;
59
+ padding-top: 70px;
60
+ text-align: center;
61
+
62
+ .fwe-sitelinks {
63
+ order: 2;
64
+
65
+ .fwe-sitelinks-groupa {
66
+ padding-bottom: 8px;
67
+
68
+ a {
69
+ color: $control-border-darker;
70
+ padding-right: 8px;
71
+
72
+ &:last-child {
73
+ padding-right: 0px;
74
+ }
75
+ }
76
+ }
77
+
78
+ .fwe-sitelinks-groupb {
79
+ padding-bottom: 24px;
80
+
81
+ a {
82
+ color: $control-border-darker;
83
+ padding-right: 8px;
84
+
85
+ &:last-child {
86
+ padding-right: 0px;
87
+ }
88
+ }
89
+ }
90
+ }
91
+ .fwe-copyright {
92
+ display: flex;
93
+ order: 1;
94
+ justify-content: center;
95
+ padding-bottom: 24px;
96
+ color: $control-border-darker;
97
+ }
98
+ }
99
+ }
100
+
101
+ @media only screen and (min-width: $grid-breakpoint-lg) {
102
+ footer.fwe-footer {
103
+ .fwe-footer-details {
104
+ border-bottom: none;
105
+ h4 {
106
+ margin-top: 24px;
107
+ }
108
+ &:not(:first-child) {
109
+ margin-top: 0px;
110
+ }
111
+ }
112
+ .fwe-bottomline {
113
+ font-size: 12px;
114
+ padding-top: 70px;
115
+ text-align: left;
116
+ display: flex;
117
+ .fwe-sitelinks {
118
+ text-align: right;
119
+ margin-left: auto;
120
+ display: flex;
121
+ }
122
+ }
123
+ .fwe-social-media {
124
+ margin-bottom: 0px;
125
+ }
126
+ }
127
+ }
128
+
129
+ @media only screen and (min-width: $grid-breakpoint-xl) {
130
+ footer.fwe-footer {
131
+ .fwe-social-media {
132
+ .fwe-social-media-link {
133
+ width: 64px;
134
+ height: 64px;
135
+ margin-right: 42px;
136
+ &:last-child {
137
+ margin-right: 0px;
138
+ }
139
+ }
140
+ }
141
+ }
142
+ }
@@ -0,0 +1,153 @@
1
+ .fwe-header-slider-container {
2
+ .fwe-header-slider-box {
3
+ height: 142px;
4
+ background-color: $hero;
5
+ }
6
+
7
+ .fwe-header-slider {
8
+ margin-top: -28px;
9
+ margin-left: 12px;
10
+ margin-right: 12px;
11
+ }
12
+ }
13
+
14
+ .fwe-header-slider {
15
+ display: flex;
16
+ flex-direction: column;
17
+ padding: 24px 28px;
18
+ background-color: $white;
19
+ border-radius: 4px;
20
+ box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2);
21
+
22
+ .fwe-header-slider-content {
23
+ display: inline-flex;
24
+ flex-direction: column;
25
+
26
+ p {
27
+ text-overflow: ellipsis;
28
+ overflow: hidden;
29
+ display: -webkit-box !important;
30
+ -webkit-line-clamp: 2;
31
+ -webkit-box-orient: vertical;
32
+ white-space: normal;
33
+ margin: 0;
34
+ }
35
+
36
+ button.fwe-btn-hero {
37
+ margin-top: 24px;
38
+ justify-content: center;
39
+ margin-left: 18px;
40
+ margin-right: 18px;
41
+ }
42
+ }
43
+
44
+ .fwe-pagination {
45
+ align-self: center;
46
+ margin-top: 24px;
47
+ }
48
+
49
+ .fwe-header-slider-arrow-left,
50
+ .fwe-header-slider-arrow-right {
51
+ display: none;
52
+ }
53
+ }
54
+
55
+ @media only screen and (min-width: $grid-breakpoint-xs) {
56
+ .fwe-header-slider-container {
57
+ .fwe-header-slider-box {
58
+ height: 166px;
59
+ }
60
+ }
61
+ }
62
+
63
+ @media only screen and (min-width: $grid-breakpoint-sm) {
64
+ .fwe-header-slider-container {
65
+ .fwe-header-slider-box {
66
+ height: 341px;
67
+ }
68
+
69
+ .fwe-header-slider {
70
+ margin-top: -104px;
71
+ }
72
+ }
73
+ }
74
+
75
+ @media only screen and (min-width: $grid-breakpoint-md) {
76
+ .fwe-header-slider-container {
77
+ .fwe-header-slider-box {
78
+ height: 455px;
79
+ }
80
+
81
+ .fwe-header-slider {
82
+ position: relative;
83
+ margin-top: -104px;
84
+ }
85
+ }
86
+
87
+ .fwe-header-slider {
88
+ padding: 24px 112px;
89
+
90
+ .fwe-header-slider-content {
91
+ flex-direction: row;
92
+ align-items: center;
93
+
94
+ p {
95
+ -webkit-line-clamp: 3;
96
+ }
97
+
98
+ button.fwe-btn-hero {
99
+ justify-content: center;
100
+ margin-top: 0;
101
+ margin-left: 34px;
102
+ margin-right: 0;
103
+ min-width: 200px;
104
+ }
105
+ }
106
+
107
+ .fwe-header-slider-arrow-left,
108
+ .fwe-header-slider-arrow-right {
109
+ display: block;
110
+ position: absolute;
111
+ top: 50%;
112
+ margin-top: 12px;
113
+ transform: translateY(-50%);
114
+ height: 48px;
115
+ width: 48px;
116
+ font-size: 48px;
117
+ }
118
+
119
+ .fwe-header-slider-arrow-left {
120
+ left: 24px;
121
+ }
122
+
123
+ .fwe-header-slider-arrow-right {
124
+ right: 24px;
125
+ }
126
+ }
127
+ }
128
+
129
+ @media only screen and (min-width: $grid-breakpoint-xl) {
130
+ .fwe-header-slider-container {
131
+ .fwe-header-slider-box {
132
+ height: 640px;
133
+ }
134
+
135
+ .fwe-header-slider {
136
+ margin: auto;
137
+ margin-top: -104px;
138
+ width: 1096px;
139
+ }
140
+ }
141
+
142
+ .fwe-header-slider {
143
+ padding: 24px 160px;
144
+ }
145
+ }
146
+
147
+ @media only screen and (min-width: $grid-breakpoint-xxl) {
148
+ .fwe-header-slider-container {
149
+ .fwe-header-slider {
150
+ width: 1192px;
151
+ }
152
+ }
153
+ }
@@ -0,0 +1,52 @@
1
+ .fwe-teaser-horbox {
2
+ display: flex;
3
+ background-color: var(--fwe-sucanul);
4
+ }
5
+
6
+ .fwe-teaser-horbox .fwe-teaser-horbox-img {
7
+ background-color: var(--fwe-hero);
8
+ flex: 1;
9
+ }
10
+
11
+ .fwe-teaser-horbox .fwe-teaser-horbox-content {
12
+ flex: 1;
13
+ display: inline-flex;
14
+ flex-direction: column;
15
+ padding: 24px;
16
+ }
17
+
18
+ .fwe-teaser-horbox .fwe-teaser-horbox-content .fwe-teaser-more {
19
+ align-self: flex-end;
20
+ }
21
+
22
+ .fwe-teaser-verbox {
23
+ display: inline-flex;
24
+ flex-direction: column;
25
+ background-color: var(--fwe-sucanul);
26
+ width: 100%;
27
+ height: 100%;
28
+ }
29
+
30
+ .fwe-teaser-verbox .fwe-teaser-verbox-img {
31
+ background-color: var(--fwe-hero);
32
+ height: calc(50% - 12px);
33
+ min-height: 186px;
34
+ width: 100%;
35
+ }
36
+
37
+ .fwe-teaser-verbox h2 {
38
+ padding-top: 24px;
39
+ padding-left: 24px;
40
+ padding-right: 24px;
41
+ }
42
+
43
+ .fwe-teaser-verbox p {
44
+ padding-left: 24px;
45
+ padding-right: 24px;
46
+ }
47
+
48
+ .fwe-teaser-verbox .fwe-teaser-more {
49
+ align-self: flex-end;
50
+ margin-bottom: 24px;
51
+ margin-right: 24px;
52
+ }
@@ -0,0 +1,5 @@
1
+ @import "../variables";
2
+
3
+ @import "footer";
4
+ @import "teaser";
5
+ @import "header-slider";
@@ -1,214 +0,0 @@
1
- footer.fwe-footer {
2
- background-color: $background;
3
- padding: $container-padding;
4
-
5
- .fwe-footer-social-links {
6
- height: 155px;
7
- display: flex;
8
- flex-wrap: wrap;
9
- align-items: center;
10
- justify-content: center;
11
-
12
- a {
13
- display: block;
14
- width: 64px;
15
- height: 64px;
16
- margin-right: 45px;
17
-
18
- &:last-child {
19
- margin-right: 0;
20
- }
21
-
22
- &:hover {
23
- svg {
24
- fill: $text;
25
- }
26
- }
27
-
28
- svg {
29
- width: 64px;
30
- height: 64px;
31
- fill: $border;
32
- }
33
- }
34
- }
35
-
36
- hr {
37
- padding: 0;
38
- margin: 0;
39
- border: none;
40
- border-top: 1px solid $border;
41
- }
42
-
43
- .fwe-footer-content {
44
- padding-bottom: 60px;
45
- display: flex;
46
- flex-wrap: wrap;
47
- justify-content: space-between;
48
-
49
- details {
50
- summary {
51
- position: relative;
52
- cursor: pointer;
53
-
54
- &::before {
55
- position: absolute;
56
- right: 0;
57
- top: 0;
58
- content: "\e900";
59
- font-family: $font-family-icons-16;
60
- transform-origin: center center;
61
- transform: rotate(180deg);
62
- }
63
- }
64
- }
65
-
66
- details[open] {
67
- summary {
68
- &::before {
69
- transform: rotate(0deg);
70
- }
71
- }
72
- }
73
-
74
- .fwe-footer-content-group,
75
- details {
76
- flex-grow: 1;
77
- width: 100%;
78
- border-bottom: 1px solid $border;
79
- padding-top: 30px;
80
- padding-bottom: 30px;
81
-
82
- .fwe-footer-content-group-title,
83
- summary {
84
- font-weight: $font-weight-bold;
85
- outline: none;
86
- margin-top: 30px;
87
-
88
- &:first-child {
89
- margin-top: 0;
90
- }
91
- }
92
-
93
- summary {
94
- list-style-type: none;
95
-
96
- &::-webkit-details-marker {
97
- display: none;
98
- }
99
- }
100
-
101
- ul {
102
- margin: 0;
103
- margin-top: 20px;
104
- padding: 0;
105
- list-style-type: none;
106
-
107
- li {
108
- margin-bottom: 20px;
109
-
110
- &:last-child {
111
- margin-bottom: 0;
112
- }
113
-
114
- a {
115
- color: $text;
116
- text-decoration: none;
117
-
118
- &:hover {
119
- color: $hero;
120
- }
121
- }
122
- }
123
- }
124
- }
125
- }
126
-
127
- .fwe-footer-muted {
128
- display: flex;
129
- color: $text;
130
- font-size: $font-size-small;
131
- padding-bottom: 15px;
132
- padding-left: 30px;
133
- padding-right: 30px;
134
- justify-content: center;
135
- flex-direction: column-reverse;
136
-
137
- p {
138
- margin: 0;
139
- padding: 0;
140
- padding-bottom: 15px;
141
- text-align: center;
142
- }
143
-
144
- ul {
145
- margin: 0;
146
- padding: 0;
147
- margin-bottom: 15px;
148
- list-style-type: none;
149
- display: flex;
150
- justify-content: center;
151
- flex-wrap: wrap;
152
-
153
- li {
154
- display: inline-block;
155
- padding-right: 12px;
156
- padding-bottom: 15px;
157
-
158
- &:last-child {
159
- padding-right: 0;
160
- }
161
-
162
- a {
163
- color: $text;
164
- text-decoration: none;
165
-
166
- &:hover {
167
- color: $hero;
168
- }
169
- }
170
- }
171
- }
172
- }
173
- }
174
-
175
- $size: map-get($grid-breakpoints, "md");
176
- @media (min-width: $size) {
177
- footer.fwe-footer {
178
- .fwe-footer-content {
179
- margin-top: 30px;
180
- padding-left: 30px;
181
- padding-right: 30px;
182
-
183
- .fwe-footer-content-group,
184
- details {
185
- margin-top: 60px;
186
- max-width: 325px;
187
- padding-right: 30px;
188
- border: none;
189
- padding-top: 0;
190
- padding-bottom: 0;
191
-
192
- &:first-child {
193
- border-top: none;
194
- }
195
- }
196
- }
197
-
198
- .fwe-footer-muted {
199
- justify-content: start;
200
- flex-direction: row;
201
-
202
- p {
203
- padding: 0;
204
- text-align: left;
205
- }
206
-
207
- ul {
208
- margin: 0;
209
- margin-left: auto;
210
- justify-content: start;
211
- }
212
- }
213
- }
214
- }