@kickstartds/ds-agency-premium 1.2.10--canary.183.909265f.0 → 1.2.10--canary.186.6a0656e.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.
- package/dist/components/page-wrapper/tokens.css +1 -1
- package/dist/components/stats/index.js +1 -1
- package/dist/components/stats/stats.css +37 -22
- package/dist/static/tokens-business.css +1 -1
- package/dist/static/tokens-google.css +1 -1
- package/dist/static/tokens-ngo.css +1 -1
- package/dist/static/tokens-telekom.css +1 -1
- package/dist/static/tokens.css +1 -1
- package/dist/tokens/tokens.css +1 -1
- package/dist/tokens/tokens.js +1 -1
- package/package.json +1 -1
|
@@ -3,7 +3,7 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
3
3
|
import { CountUp } from '@kickstartds/content/lib/count-up';
|
|
4
4
|
|
|
5
5
|
const Stats = ({ items = [], }) => {
|
|
6
|
-
return (jsx("div", { className: "
|
|
6
|
+
return (jsx("div", { className: "dsa-stats", children: items.map((item, index) => (jsx(CountUp, { className: "dsa-stats__item", to: item.number, icon: {
|
|
7
7
|
icon: item?.icon,
|
|
8
8
|
}, text: item?.description, topic: item.title }, index))) }));
|
|
9
9
|
};
|
|
@@ -1,48 +1,63 @@
|
|
|
1
|
-
.
|
|
2
|
-
--
|
|
1
|
+
.dsa-stats {
|
|
2
|
+
--dsa-stats--gap-vertical: var(--ks-spacing-stack-l);
|
|
3
|
+
--dsa-stats--gap-horizontal: var(--ks-spacing-inline-m);
|
|
4
|
+
--dsa-stats__item--gap: var(--ks-spacing-stack-xs);
|
|
5
|
+
--dsa-stats__icon--color: var(--ks-text-color-primary);
|
|
6
|
+
--dsa-stats__icon--size: 5em;
|
|
7
|
+
--dsa-stats__number--font: var(--ks-font-display-xl);
|
|
8
|
+
--dsa-stats__number--font-weight: var(--ks-font-weight-semi-bold);
|
|
9
|
+
--dsa-stats__number--backgroud: linear-gradient(
|
|
10
|
+
135deg,
|
|
11
|
+
var(--ks-color-primary-base) 0%,
|
|
12
|
+
var(--ks-color-secondary-base) 100%
|
|
13
|
+
);
|
|
14
|
+
--dsa-stats__topic__font: var(--ks-font-interface-xl);
|
|
15
|
+
--dsa-stats__topic--color: var(--ks-text-color-display);
|
|
16
|
+
--dsa-stats__copy--font: var(--ks-font-copy-s);
|
|
17
|
+
--dsa-stats__copy--color: var(--ks-text-color-default);
|
|
3
18
|
}
|
|
4
19
|
|
|
5
|
-
.
|
|
20
|
+
.dsa-stats {
|
|
6
21
|
display: flex;
|
|
7
22
|
justify-content: center;
|
|
8
|
-
gap: var(--ks-spacing-stack-l) var(--ks-spacing-inline-m);
|
|
23
|
+
gap: var(--dsa-stats--gap-vertical, var(--ks-spacing-stack-l)) var(--dsa-stats--gap-horizontal, var(--ks-spacing-inline-m));
|
|
9
24
|
flex-wrap: wrap;
|
|
10
25
|
align-items: center;
|
|
11
26
|
}
|
|
12
|
-
.
|
|
27
|
+
.dsa-stats .l-container--rich-text {
|
|
13
28
|
width: 100%;
|
|
14
29
|
}
|
|
15
|
-
.
|
|
30
|
+
.dsa-stats__item.c-count-up {
|
|
16
31
|
flex: 1 1;
|
|
17
32
|
flex-basis: 200px;
|
|
18
33
|
display: flex;
|
|
19
34
|
flex-direction: column;
|
|
20
35
|
align-items: center;
|
|
21
|
-
gap: var(--ks-spacing-stack-xs);
|
|
36
|
+
gap: var(--dsa-stats__item--gap, var(--ks-spacing-stack-xs));
|
|
22
37
|
max-width: 400px;
|
|
23
38
|
}
|
|
24
|
-
.
|
|
39
|
+
.dsa-stats__item.c-count-up > * {
|
|
25
40
|
margin: 0;
|
|
26
41
|
}
|
|
27
|
-
.
|
|
28
|
-
background: linear-gradient(135deg, var(--ks-color-primary-base) 0%, var(--ks-color-secondary-base) 100%);
|
|
42
|
+
.dsa-stats .c-count-up__number {
|
|
43
|
+
background: var(--dsa-stats__number--backgroud, linear-gradient(135deg, var(--ks-color-primary-base) 0%, var(--ks-color-secondary-base) 100%));
|
|
29
44
|
-webkit-background-clip: text;
|
|
30
45
|
-webkit-text-fill-color: transparent;
|
|
31
|
-
font: var(--ks-font-display-xl);
|
|
32
|
-
font-weight: var(--ks-font-weight-semi-bold);
|
|
46
|
+
font: var(--dsa-stats__number--font, var(--ks-font-display-xl));
|
|
47
|
+
font-weight: var(--dsa-stats__number--font-weight, var(--ks-font-weight-semi-bold));
|
|
33
48
|
}
|
|
34
|
-
.
|
|
35
|
-
color: var(--ks-text-color-primary);
|
|
36
|
-
width: var(--
|
|
37
|
-
height: var(--
|
|
49
|
+
.dsa-stats .c-count-up__icon {
|
|
50
|
+
color: var(--dsa-stats__icon--color, var(--ks-text-color-primary));
|
|
51
|
+
width: var(--dsa-stats__icon--size, 5rem);
|
|
52
|
+
height: var(--dsa-stats__icon--size, 5rem);
|
|
38
53
|
}
|
|
39
|
-
.
|
|
40
|
-
color: var(--ks-color-
|
|
41
|
-
font: var(--ks-font-interface-xl);
|
|
54
|
+
.dsa-stats .c-count-up__topic {
|
|
55
|
+
color: var(--dsa-stats__topic--color, var(--ks-text-color-display));
|
|
56
|
+
font: var(--dsa-stats__topic__font, var(--ks-font-interface-xl));
|
|
42
57
|
text-align: center;
|
|
43
58
|
}
|
|
44
|
-
.
|
|
45
|
-
color: var(--ks-text-color-default);
|
|
46
|
-
font: var(--ks-font-copy-s);
|
|
59
|
+
.dsa-stats .c-count-up__text {
|
|
60
|
+
color: var(--dsa-stats__copy--color, var(--ks-text-color-default));
|
|
61
|
+
font: var(--dsa-stats__copy--font, var(--ks-font-copy-s));
|
|
47
62
|
text-align: center;
|
|
48
63
|
}
|
package/dist/static/tokens.css
CHANGED
package/dist/tokens/tokens.css
CHANGED
package/dist/tokens/tokens.js
CHANGED
package/package.json
CHANGED