@ilo-org/styles 0.13.2 → 0.14.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.
Files changed (54) hide show
  1. package/build/css/components/index.css +1181 -794
  2. package/build/css/components/index.css.map +1 -1
  3. package/build/css/global.css +1 -1
  4. package/build/css/global.css.map +1 -1
  5. package/build/css/index.css +1181 -794
  6. package/build/css/index.css.map +1 -1
  7. package/build/css/monorepo.css +1181 -794
  8. package/build/css/monorepo.css.map +1 -1
  9. package/build/minified/index.css +1 -1
  10. package/build/minified/index.css.map +1 -1
  11. package/build/minified/monorepo.css +1 -1
  12. package/build/minified/monorepo.css.map +1 -1
  13. package/css/components/accordion.css +1 -1
  14. package/css/components/breadcrumb.css +1 -1
  15. package/css/components/featurecard.css +1 -1
  16. package/css/components/hero.css +1 -1
  17. package/css/components/icon.css +1 -0
  18. package/css/components/list.css +1 -1
  19. package/css/components/navigation.css +1 -1
  20. package/css/components/pagination.css +1 -1
  21. package/css/components/richtext.css +1 -1
  22. package/css/components/searchfield.css +1 -1
  23. package/css/components/tag.css +1 -1
  24. package/css/components/video-legacy.css +1 -0
  25. package/css/components/video.css +1 -1
  26. package/css/global.css.map +1 -1
  27. package/css/index.css +8 -8
  28. package/css/index.css.map +1 -1
  29. package/css/monorepo.css +8 -8
  30. package/css/monorepo.css.map +1 -1
  31. package/package.json +2 -2
  32. package/scss/_mixins.scss +27 -1
  33. package/scss/components/_accordion.scss +7 -5
  34. package/scss/components/_breadcrumb.scss +5 -1
  35. package/scss/components/_card.scss +2 -2
  36. package/scss/components/_cardgroup.scss +1 -1
  37. package/scss/components/_datacard.scss +1 -1
  38. package/scss/components/_detailcard.scss +1 -1
  39. package/scss/components/_factlistcard.scss +1 -1
  40. package/scss/components/_featurecard.scss +3 -11
  41. package/scss/components/_hero.scss +206 -214
  42. package/scss/components/_icon.scss +6 -0
  43. package/scss/components/_list.scss +0 -2
  44. package/scss/components/_multilinkcard.scss +2 -2
  45. package/scss/components/_navigation.scss +11 -9
  46. package/scss/components/_pagination.scss +1 -3
  47. package/scss/components/_profile.scss +1 -1
  48. package/scss/components/_promocard.scss +1 -1
  49. package/scss/components/_richtext.scss +14 -40
  50. package/scss/components/_searchfield.scss +36 -4
  51. package/scss/components/_tag.scss +1 -1
  52. package/scss/components/_video-legacy.scss +795 -0
  53. package/scss/components/_video.scss +191 -636
  54. package/scss/components/index.scss +2 -0
package/scss/components/_richtext.scss CHANGED
@@ -5,7 +5,7 @@
5
5
  .ilo--richtext {
6
6
  font-family: $fonts-copy;
7
7
  font-weight: 400;
8
- @include font-styles("body-small");
8
+ @include font-styles("base");
9
9
 
10
10
  a {
11
11
  @include linkstyles();
@@ -80,8 +80,7 @@
80
80
  h2,
81
81
  h3,
82
82
  h4,
83
- h5,
84
- h6 {
83
+ h5 {
85
84
  font-family: $fonts-display;
86
85
  font-weight: 700;
87
86
  margin-top: spacing(14);
@@ -96,7 +95,7 @@
96
95
  "body-small",
97
96
  "copy"
98
97
  );
99
- @include font-styles("headline-2");
98
+ @include font-styles("rich-text-heading-1");
100
99
  }
101
100
 
102
101
  h2 {
@@ -108,7 +107,7 @@
108
107
  "body-small",
109
108
  "copy"
110
109
  );
111
- @include font-styles("headline-3");
110
+ @include font-styles("rich-text-heading-2");
112
111
  }
113
112
 
114
113
  h3 {
@@ -120,7 +119,7 @@
120
119
  "body-small",
121
120
  "copy"
122
121
  );
123
- @include font-styles("headline-4");
122
+ @include font-styles("rich-text-heading-3");
124
123
  }
125
124
 
126
125
  h4 {
@@ -132,7 +131,7 @@
132
131
  "body-small",
133
132
  "copy"
134
133
  );
135
- @include font-styles("headline-5");
134
+ @include font-styles("rich-text-heading-4");
136
135
  }
137
136
 
138
137
  h5 {
@@ -144,19 +143,7 @@
144
143
  "body-small",
145
144
  "copy"
146
145
  );
147
- @include font-styles("headline-6");
148
- }
149
-
150
- h6 {
151
- @include textmargin(
152
- "margin-bottom",
153
- map-get($spacing, "padding-3"),
154
- "headline-6",
155
- "display",
156
- "body-small",
157
- "copy"
158
- );
159
- @include font-styles("headline-6");
146
+ @include font-styles("rich-text-heading-5");
160
147
  }
161
148
 
162
149
  ul,
@@ -198,7 +185,7 @@
198
185
  margin: spacing(6) 0 spacing(10) 0;
199
186
  padding: spacing(19) 0 spacing(9) spacing(8); // check
200
187
  position: relative;
201
- width: 100%;
188
+ width: fit-content;
202
189
  @include dataurlicon("triangle", $color-ux-background-default);
203
190
 
204
191
  p {
@@ -249,8 +236,7 @@
249
236
  h2,
250
237
  h3,
251
238
  h4,
252
- h5,
253
- h6 {
239
+ h5 {
254
240
  margin-top: spacing(16);
255
241
  }
256
242
 
@@ -263,7 +249,7 @@
263
249
  "body-large",
264
250
  "copy"
265
251
  );
266
- @include font-styles("headline-1");
252
+ @include font-styles("rich-text-heading-1-md");
267
253
  }
268
254
 
269
255
  h2 {
@@ -275,7 +261,7 @@
275
261
  "body-large",
276
262
  "copy"
277
263
  );
278
- @include font-styles("headline-2");
264
+ @include font-styles("rich-text-heading-2-md");
279
265
  }
280
266
 
281
267
  h3 {
@@ -287,7 +273,7 @@
287
273
  "body-large",
288
274
  "copy"
289
275
  );
290
- @include font-styles("headline-3");
276
+ @include font-styles("rich-text-heading-3-md");
291
277
  }
292
278
 
293
279
  h4 {
@@ -299,7 +285,7 @@
299
285
  "body-large",
300
286
  "copy"
301
287
  );
302
- @include font-styles("headline-4");
288
+ @include font-styles("rich-text-heading-4-md");
303
289
  }
304
290
 
305
291
  h5 {
@@ -311,19 +297,7 @@
311
297
  "body-large",
312
298
  "copy"
313
299
  );
314
- @include font-styles("headline-5");
315
- }
316
-
317
- h6 {
318
- @include textmargin(
319
- "margin-bottom",
320
- map-get($spacing, "padding-4"),
321
- "headline-5",
322
- "display",
323
- "body-large",
324
- "copy"
325
- );
326
- @include font-styles("headline-5");
300
+ @include font-styles("rich-text-heading-5-md");
327
301
  }
328
302
 
329
303
  p {
package/scss/components/_searchfield.scss CHANGED
@@ -6,9 +6,14 @@
6
6
  display: flex;
7
7
 
8
8
  .ilo--fieldset {
9
+ position: relative;
9
10
  width: 100%;
10
11
  }
11
12
 
13
+ .ilo--input {
14
+ padding-inline-end: spacing(14);
15
+ }
16
+
12
17
  &--button {
13
18
  background-color: map-get(
14
19
  $color,
@@ -68,11 +73,38 @@
68
73
  }
69
74
  }
70
75
 
76
+ &--clear-button {
77
+ display: none;
78
+ align-items: center;
79
+ cursor: pointer;
80
+
81
+ &.show {
82
+ display: inline;
83
+ position: absolute;
84
+ top: 12px;
85
+ right: 2%;
86
+ }
87
+ }
88
+
89
+ // Remove the default clear button in search
90
+ [type="search"]::-webkit-search-cancel-button {
91
+ -webkit-appearance: none;
92
+ -moz-appearance: none;
93
+ appearance: none;
94
+ }
95
+
71
96
  [dir="rtl"] & {
72
- .ilo--searchfield--button {
73
- border-left: px-to-rem(2px) solid
74
- $color-formelements-inputbutton-default-border-left;
75
- border-right: 0 solid $color-formelements-inputbutton-default-border-right;
97
+ .ilo--searchfield {
98
+ &--button {
99
+ border-left: px-to-rem(2px) solid
100
+ $color-formelements-inputbutton-default-border-left;
101
+ border-right: 0;
102
+ }
103
+ &--clear-button {
104
+ &.show {
105
+ right: 95%;
106
+ }
107
+ }
76
108
  }
77
109
  }
78
110
  }
package/scss/components/_tag.scss CHANGED
@@ -128,7 +128,7 @@
128
128
 
129
129
  &--reset {
130
130
  @include font-styles("label-small");
131
-
131
+ padding: calc(spacing(2) - px-to-rem(1.5)) calc(spacing(3) - px-to-rem(1.5));
132
132
  cursor: pointer;
133
133
  display: none;
134
134
  opacity: 0;