@zenpatient-org/healthspan-marketing-ui 0.2.61 → 0.2.63
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/PriceDisplay/PriceDisplay.cjs.js +1 -1
- package/dist/components/PriceDisplay/PriceDisplay.d.ts +2 -0
- package/dist/components/PriceDisplay/PriceDisplay.es.js +29 -38
- package/dist/components/PriceDisplay/priceDisplay.module.css +37 -14
- package/dist/modules/ImageWithText/ImageWithText.cjs.js +1 -1
- package/dist/modules/ImageWithText/ImageWithText.es.js +47 -46
- package/dist/modules/ImageWithText/imageWithText.module.css +40 -21
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),s=require("../Typography/Typography.cjs.js"),e=require("../../src/components/PriceDisplay/priceDisplay.module.css"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),s=require("../Typography/Typography.cjs.js"),e=require("../../src/components/PriceDisplay/priceDisplay.module.css"),n=require("../../utils/cn/cn.cjs.js"),c=require("../../utils/periodView.cjs.js"),p=({items:l})=>{if(!l||l.length===0)return null;const i=l.length>1?"double":"single";return r.jsx("div",{className:e.root,children:l.map(a=>r.jsxs("div",{className:n.cn(e.container,i==="double"?e.double:e.single),children:[r.jsx(s.Typography,{as:"p",defaultVariant:"bodySm",className:e.description,children:a.description}),r.jsxs("div",{className:e.priceWrapper,children:[a.initialPrice&&r.jsxs(s.Typography,{as:"p",defaultVariant:"labelSm",className:e.initialPrice,children:["$",(a.initialPrice/100).toFixed(0)]}),r.jsxs("div",{className:e.priceColumn,children:[a.prefix?r.jsx(s.Typography,{as:"p",defaultVariant:"bodyXs",className:e.prefix,children:a.prefix}):a.label?r.jsx(s.Typography,{as:"p",defaultVariant:"labelXs",emphasis:!0,className:e.label,children:a.label}):null,r.jsxs("div",{className:e.priceAmount,children:[r.jsx(s.Typography,{as:"p",defaultVariant:"bodySm",className:e.currency,children:"$"}),r.jsx(s.Typography,{as:"p",defaultVariant:"headingLg",className:e.price,children:(a.price/100).toFixed(0)}),r.jsxs("div",{className:e.periodWrapper,children:[a.prefix&&a.label&&r.jsx(s.Typography,{as:"p",defaultVariant:"labelXs",emphasis:!0,className:e.label,children:a.label}),a.period!=="none"&&r.jsxs(s.Typography,{as:"p",defaultVariant:"labelSm",className:e.period,children:["/",c.shortPeriod(a.period)]})]})]})]})]})]},a.description))})};exports.PriceDisplay=p;
|
|
@@ -1,50 +1,41 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { Typography as
|
|
3
|
-
import
|
|
4
|
-
import { cn as
|
|
5
|
-
import { shortPeriod as
|
|
6
|
-
const f = ({ items:
|
|
7
|
-
if (!
|
|
1
|
+
import { jsx as r, jsxs as i } from "react/jsx-runtime";
|
|
2
|
+
import { Typography as l } from "../Typography/Typography.es.js";
|
|
3
|
+
import a from "../../components/PriceDisplay/priceDisplay.module.css";
|
|
4
|
+
import { cn as c } from "../../utils/cn/cn.es.js";
|
|
5
|
+
import { shortPeriod as d } from "../../utils/periodView.es.js";
|
|
6
|
+
const f = ({ items: s }) => {
|
|
7
|
+
if (!s || s.length === 0)
|
|
8
8
|
return null;
|
|
9
|
-
const
|
|
10
|
-
return /* @__PURE__ */
|
|
9
|
+
const n = s.length > 1 ? "double" : "single";
|
|
10
|
+
return /* @__PURE__ */ r("div", { className: a.root, children: s.map((e) => /* @__PURE__ */ i(
|
|
11
11
|
"div",
|
|
12
12
|
{
|
|
13
|
-
className:
|
|
13
|
+
className: c(a.container, n === "double" ? a.double : a.single),
|
|
14
14
|
children: [
|
|
15
|
-
/* @__PURE__ */
|
|
16
|
-
/* @__PURE__ */
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
defaultVariant: "headingXs",
|
|
34
|
-
mobileVariant: "headingXxs",
|
|
35
|
-
className: e.currency,
|
|
36
|
-
children: "$"
|
|
37
|
-
}
|
|
38
|
-
),
|
|
39
|
-
r.period !== "none" && /* @__PURE__ */ n(i, { as: "p", defaultVariant: "labelMd", className: e.period, children: [
|
|
40
|
-
"/",
|
|
41
|
-
s(r.period)
|
|
15
|
+
/* @__PURE__ */ r(l, { as: "p", defaultVariant: "bodySm", className: a.description, children: e.description }),
|
|
16
|
+
/* @__PURE__ */ i("div", { className: a.priceWrapper, children: [
|
|
17
|
+
e.initialPrice && /* @__PURE__ */ i(l, { as: "p", defaultVariant: "labelSm", className: a.initialPrice, children: [
|
|
18
|
+
"$",
|
|
19
|
+
(e.initialPrice / 100).toFixed(0)
|
|
20
|
+
] }),
|
|
21
|
+
/* @__PURE__ */ i("div", { className: a.priceColumn, children: [
|
|
22
|
+
e.prefix ? /* @__PURE__ */ r(l, { as: "p", defaultVariant: "bodyXs", className: a.prefix, children: e.prefix }) : e.label ? /* @__PURE__ */ r(l, { as: "p", defaultVariant: "labelXs", emphasis: !0, className: a.label, children: e.label }) : null,
|
|
23
|
+
/* @__PURE__ */ i("div", { className: a.priceAmount, children: [
|
|
24
|
+
/* @__PURE__ */ r(l, { as: "p", defaultVariant: "bodySm", className: a.currency, children: "$" }),
|
|
25
|
+
/* @__PURE__ */ r(l, { as: "p", defaultVariant: "headingLg", className: a.price, children: (e.price / 100).toFixed(0) }),
|
|
26
|
+
/* @__PURE__ */ i("div", { className: a.periodWrapper, children: [
|
|
27
|
+
e.prefix && e.label && /* @__PURE__ */ r(l, { as: "p", defaultVariant: "labelXs", emphasis: !0, className: a.label, children: e.label }),
|
|
28
|
+
e.period !== "none" && /* @__PURE__ */ i(l, { as: "p", defaultVariant: "labelSm", className: a.period, children: [
|
|
29
|
+
"/",
|
|
30
|
+
d(e.period)
|
|
31
|
+
] })
|
|
32
|
+
] })
|
|
42
33
|
] })
|
|
43
34
|
] })
|
|
44
35
|
] })
|
|
45
36
|
]
|
|
46
37
|
},
|
|
47
|
-
|
|
38
|
+
e.description
|
|
48
39
|
)) });
|
|
49
40
|
};
|
|
50
41
|
export {
|
|
@@ -70,36 +70,59 @@
|
|
|
70
70
|
|
|
71
71
|
.priceWrapper {
|
|
72
72
|
display: flex;
|
|
73
|
-
|
|
74
|
-
flex-direction: column;
|
|
75
|
-
align-items: flex-start;
|
|
76
|
-
text-align: left;
|
|
73
|
+
align-items: flex-end;
|
|
77
74
|
min-width: 90px;
|
|
78
75
|
}
|
|
79
76
|
|
|
80
|
-
.
|
|
81
|
-
|
|
77
|
+
.priceColumn {
|
|
78
|
+
display: flex;
|
|
79
|
+
flex-direction: column;
|
|
80
|
+
gap: 6px;
|
|
82
81
|
}
|
|
83
82
|
|
|
84
83
|
.priceAmount {
|
|
85
84
|
display: flex;
|
|
86
|
-
align-items:
|
|
87
|
-
|
|
85
|
+
align-items: stretch;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.periodWrapper {
|
|
89
|
+
display: flex;
|
|
90
|
+
flex-direction: column;
|
|
91
|
+
margin-left: 3px;
|
|
92
|
+
justify-content: flex-end;
|
|
93
|
+
align-self: stretch;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.periodWrapper:has(.label) {
|
|
97
|
+
justify-content: space-between;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.label {
|
|
101
|
+
background-color: var(--color-bg-fill-brand-indigo);
|
|
102
|
+
padding: 2.77px 5.54px;
|
|
103
|
+
font-size: 6.926px;
|
|
104
|
+
border-radius: var(--border-radius-xxs);
|
|
105
|
+
width: fit-content;
|
|
88
106
|
}
|
|
89
107
|
|
|
90
108
|
.price {
|
|
91
|
-
|
|
92
|
-
|
|
109
|
+
margin-bottom: -5px;
|
|
110
|
+
align-self: flex-start;
|
|
93
111
|
}
|
|
94
112
|
|
|
95
113
|
.currency {
|
|
96
|
-
grid-column: 2 / 3;
|
|
97
|
-
grid-row: 1 / 2;
|
|
98
114
|
align-self: flex-start;
|
|
99
115
|
}
|
|
100
116
|
|
|
101
117
|
.period {
|
|
102
|
-
|
|
103
|
-
|
|
118
|
+
color: var(--color-neutral-500);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.initialPrice {
|
|
122
|
+
color: var(--color-neutral-300);
|
|
123
|
+
text-decoration: line-through;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.prefix {
|
|
104
127
|
color: var(--color-neutral-500);
|
|
105
128
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),j=require("../../utils/cn/cn.cjs.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),j=require("../../utils/cn/cn.cjs.js"),l=require("./constants.cjs.js"),e=require("../../src/modules/ImageWithText/imageWithText.module.css"),T=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),n=require("../../components/Typography/Typography.cjs.js"),m=require("./components/ButtonWithColors/ButtonWithColors.cjs.js"),b=({image:g,text:t,title:s,view:i,colorScheme:u,textColor:p,mobileTextColor:x,titleColor:c,mobileTitleColor:o,titleHighlightColor:r,mobileTitleHighlightColor:h,mobileImage:y,button:d})=>a.jsx("section",{className:e.root,"data-scheme":u,children:a.jsxs("div",{className:e.container,"data-view":i,children:[a.jsxs("div",{className:e.imageContainer,children:[a.jsx("img",{src:g,alt:"background image",className:e.image,"data-color":p}),a.jsx("img",{src:y||g,alt:"mobile background image",className:e.mobileImage})]}),a.jsxs("div",{className:j.cn(e.content,{[e.textAlignLeft]:i==="plain"||i==="plain_with_title",[e.textAlignRight]:i==="complex"}),"data-view":i,"data-text-color":p,"data-mobile-text-color":x,"data-title-color":c,"data-mobile-title-color":o,"data-title-highlight-color":r,"data-mobile-title-highlight-color":h,children:[i==="complex"&&a.jsxs("div",{className:e.richTextContainer,style:{"--highlight-color-custom":l.COLORS[c||"white"],"--highlight-emphasize-custom":l.COLORS[r||"white"],"--highlight-color-custom-mobile":l.COLORS[o||"white"],"--highlight-emphasize-custom-mobile":l.COLORS[h||"white"]},children:[s&&a.jsx(T.HighlightedTitle,{colorScheme:c||r||o||h?"custom":"dark",className:e.richTextTitle,title:s,as:"div",defaultVariant:"displayXs",mobileVariant:"headingXl"}),t&&a.jsx(n.Typography,{as:"p",defaultVariant:"bodyMd",mobileVariant:"bodySm",children:t}),a.jsx(m.ButtonWithColors,{...d})]}),i==="plain"&&t&&a.jsxs("div",{className:e.textContainer,children:[a.jsx(n.Typography,{as:"p",defaultVariant:"headingXl",mobileVariant:"headingXs",className:e.textOfPlain,children:t}),a.jsx(m.ButtonWithColors,{...d})]}),i==="plain_with_title"&&a.jsxs("div",{className:e.plainWithTitleContainer,children:[s&&a.jsx(n.Typography,{as:"h3",defaultVariant:"displaySm",className:e.titleOfPlainWithTitle,children:s}),t&&a.jsx(n.Typography,{as:"p",defaultVariant:"bodyMd",mobileVariant:"bodyMd",className:e.textOfPlainWithTitle,children:t}),a.jsx(m.ButtonWithColors,{...d})]})]})]})});exports.ImageWithText=b;
|
|
@@ -1,101 +1,102 @@
|
|
|
1
1
|
import { jsx as i, jsxs as l } from "react/jsx-runtime";
|
|
2
|
-
import { cn as
|
|
2
|
+
import { cn as y } from "../../utils/cn/cn.es.js";
|
|
3
3
|
import { COLORS as m } from "./constants.es.js";
|
|
4
4
|
import a from "../../modules/ImageWithText/imageWithText.module.css";
|
|
5
|
-
import { HighlightedTitle as
|
|
6
|
-
import { Typography as
|
|
7
|
-
import { ButtonWithColors as
|
|
8
|
-
const
|
|
9
|
-
image:
|
|
10
|
-
text:
|
|
5
|
+
import { HighlightedTitle as x } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
|
|
6
|
+
import { Typography as s } from "../../components/Typography/Typography.es.js";
|
|
7
|
+
import { ButtonWithColors as p } from "./components/ButtonWithColors/ButtonWithColors.es.js";
|
|
8
|
+
const k = ({
|
|
9
|
+
image: g,
|
|
10
|
+
text: e,
|
|
11
11
|
title: c,
|
|
12
|
-
view:
|
|
12
|
+
view: t,
|
|
13
13
|
colorScheme: N,
|
|
14
14
|
textColor: f,
|
|
15
15
|
mobileTextColor: u,
|
|
16
|
-
titleColor:
|
|
17
|
-
mobileTitleColor:
|
|
18
|
-
titleHighlightColor:
|
|
19
|
-
mobileTitleHighlightColor:
|
|
16
|
+
titleColor: r,
|
|
17
|
+
mobileTitleColor: n,
|
|
18
|
+
titleHighlightColor: d,
|
|
19
|
+
mobileTitleHighlightColor: o,
|
|
20
20
|
mobileImage: b,
|
|
21
21
|
button: h
|
|
22
|
-
}) => /* @__PURE__ */ i("section", { className: a.root, "data-scheme": N, children: /* @__PURE__ */ l("div", { className: a.container, "data-view":
|
|
22
|
+
}) => /* @__PURE__ */ i("section", { className: a.root, "data-scheme": N, children: /* @__PURE__ */ l("div", { className: a.container, "data-view": t, children: [
|
|
23
23
|
/* @__PURE__ */ l("div", { className: a.imageContainer, children: [
|
|
24
|
-
/* @__PURE__ */ i("img", { src:
|
|
25
|
-
/* @__PURE__ */ i("img", { src: b ||
|
|
24
|
+
/* @__PURE__ */ i("img", { src: g, alt: "background image", className: a.image, "data-color": f }),
|
|
25
|
+
/* @__PURE__ */ i("img", { src: b || g, alt: "mobile background image", className: a.mobileImage })
|
|
26
26
|
] }),
|
|
27
27
|
/* @__PURE__ */ l(
|
|
28
28
|
"div",
|
|
29
29
|
{
|
|
30
|
-
className:
|
|
31
|
-
[a.textAlignLeft]:
|
|
32
|
-
[a.textAlignRight]:
|
|
30
|
+
className: y(a.content, {
|
|
31
|
+
[a.textAlignLeft]: t === "plain" || t === "plain_with_title",
|
|
32
|
+
[a.textAlignRight]: t === "complex"
|
|
33
33
|
}),
|
|
34
|
-
"data-view":
|
|
34
|
+
"data-view": t,
|
|
35
35
|
"data-text-color": f,
|
|
36
36
|
"data-mobile-text-color": u,
|
|
37
|
-
"data-title-color":
|
|
38
|
-
"data-mobile-title-color":
|
|
39
|
-
"data-title-highlight-color":
|
|
40
|
-
"data-mobile-title-highlight-color":
|
|
37
|
+
"data-title-color": r,
|
|
38
|
+
"data-mobile-title-color": n,
|
|
39
|
+
"data-title-highlight-color": d,
|
|
40
|
+
"data-mobile-title-highlight-color": o,
|
|
41
41
|
children: [
|
|
42
|
-
|
|
42
|
+
t === "complex" && /* @__PURE__ */ l(
|
|
43
43
|
"div",
|
|
44
44
|
{
|
|
45
45
|
className: a.richTextContainer,
|
|
46
46
|
style: {
|
|
47
|
-
"--highlight-color-custom": m[
|
|
48
|
-
"--highlight-emphasize-custom": m[
|
|
49
|
-
"--highlight-color-custom-mobile": m[
|
|
50
|
-
"--highlight-emphasize-custom-mobile": m[
|
|
47
|
+
"--highlight-color-custom": m[r || "white"],
|
|
48
|
+
"--highlight-emphasize-custom": m[d || "white"],
|
|
49
|
+
"--highlight-color-custom-mobile": m[n || "white"],
|
|
50
|
+
"--highlight-emphasize-custom-mobile": m[o || "white"]
|
|
51
51
|
},
|
|
52
52
|
children: [
|
|
53
53
|
c && /* @__PURE__ */ i(
|
|
54
|
-
|
|
54
|
+
x,
|
|
55
55
|
{
|
|
56
|
-
colorScheme:
|
|
56
|
+
colorScheme: r || d || n || o ? "custom" : "dark",
|
|
57
|
+
className: a.richTextTitle,
|
|
57
58
|
title: c,
|
|
58
|
-
|
|
59
|
-
defaultVariant: "
|
|
60
|
-
mobileVariant: "
|
|
59
|
+
as: "div",
|
|
60
|
+
defaultVariant: "displayXs",
|
|
61
|
+
mobileVariant: "headingXl"
|
|
61
62
|
}
|
|
62
63
|
),
|
|
63
|
-
|
|
64
|
-
/* @__PURE__ */ i(
|
|
64
|
+
e && /* @__PURE__ */ i(s, { as: "p", defaultVariant: "bodyMd", mobileVariant: "bodySm", children: e }),
|
|
65
|
+
/* @__PURE__ */ i(p, { ...h })
|
|
65
66
|
]
|
|
66
67
|
}
|
|
67
68
|
),
|
|
68
|
-
|
|
69
|
+
t === "plain" && e && /* @__PURE__ */ l("div", { className: a.textContainer, children: [
|
|
69
70
|
/* @__PURE__ */ i(
|
|
70
|
-
|
|
71
|
+
s,
|
|
71
72
|
{
|
|
72
73
|
as: "p",
|
|
73
74
|
defaultVariant: "headingXl",
|
|
74
75
|
mobileVariant: "headingXs",
|
|
75
76
|
className: a.textOfPlain,
|
|
76
|
-
children:
|
|
77
|
+
children: e
|
|
77
78
|
}
|
|
78
79
|
),
|
|
79
|
-
/* @__PURE__ */ i(
|
|
80
|
+
/* @__PURE__ */ i(p, { ...h })
|
|
80
81
|
] }),
|
|
81
|
-
|
|
82
|
-
c && /* @__PURE__ */ i(
|
|
83
|
-
|
|
84
|
-
|
|
82
|
+
t === "plain_with_title" && /* @__PURE__ */ l("div", { className: a.plainWithTitleContainer, children: [
|
|
83
|
+
c && /* @__PURE__ */ i(s, { as: "h3", defaultVariant: "displaySm", className: a.titleOfPlainWithTitle, children: c }),
|
|
84
|
+
e && /* @__PURE__ */ i(
|
|
85
|
+
s,
|
|
85
86
|
{
|
|
86
87
|
as: "p",
|
|
87
88
|
defaultVariant: "bodyMd",
|
|
88
89
|
mobileVariant: "bodyMd",
|
|
89
90
|
className: a.textOfPlainWithTitle,
|
|
90
|
-
children:
|
|
91
|
+
children: e
|
|
91
92
|
}
|
|
92
93
|
),
|
|
93
|
-
/* @__PURE__ */ i(
|
|
94
|
+
/* @__PURE__ */ i(p, { ...h })
|
|
94
95
|
] })
|
|
95
96
|
]
|
|
96
97
|
}
|
|
97
98
|
)
|
|
98
99
|
] }) });
|
|
99
100
|
export {
|
|
100
|
-
|
|
101
|
+
k as ImageWithText
|
|
101
102
|
};
|
|
@@ -27,13 +27,20 @@
|
|
|
27
27
|
.content {
|
|
28
28
|
display: flex;
|
|
29
29
|
align-items: center;
|
|
30
|
-
padding: 80px;
|
|
31
30
|
position: absolute;
|
|
31
|
+
padding-inline: 80px;
|
|
32
32
|
z-index: 10;
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
+
.content[data-view='plain'] {
|
|
36
|
+
padding: 40px;
|
|
37
|
+
width: 50%;
|
|
38
|
+
}
|
|
39
|
+
|
|
35
40
|
.content[data-view='plain_with_title'] {
|
|
36
41
|
display: block;
|
|
42
|
+
padding: 0;
|
|
43
|
+
padding-left: 90px;
|
|
37
44
|
width: 50%;
|
|
38
45
|
}
|
|
39
46
|
|
|
@@ -46,9 +53,7 @@
|
|
|
46
53
|
}
|
|
47
54
|
|
|
48
55
|
.textContainer {
|
|
49
|
-
max-width: 55%;
|
|
50
56
|
text-wrap: pretty;
|
|
51
|
-
font-weight: medium;
|
|
52
57
|
color: var(--color-text-primary-inverted);
|
|
53
58
|
}
|
|
54
59
|
|
|
@@ -92,41 +97,57 @@
|
|
|
92
97
|
display: none;
|
|
93
98
|
}
|
|
94
99
|
|
|
95
|
-
@media (width <= 1090px) and (width >=
|
|
100
|
+
@media (width <= 1090px) and (width >= 900px) {
|
|
101
|
+
.container {
|
|
102
|
+
margin-inline: 20px;
|
|
103
|
+
}
|
|
96
104
|
.content {
|
|
97
|
-
padding:
|
|
105
|
+
padding: 60px;
|
|
106
|
+
}
|
|
107
|
+
.content[data-view='plain_with_title'] {
|
|
108
|
+
padding-left: 40px;
|
|
98
109
|
}
|
|
99
110
|
.content[data-view='complex'] {
|
|
100
|
-
padding: 0px
|
|
111
|
+
padding-left: 0px 60px;
|
|
101
112
|
}
|
|
102
|
-
.
|
|
113
|
+
.textContainer span {
|
|
103
114
|
font-size: var(--font-size-heading-lg);
|
|
104
115
|
}
|
|
105
116
|
.richTextContainer {
|
|
106
|
-
max-width:
|
|
107
|
-
}
|
|
108
|
-
.titleOfPlainWithTitle {
|
|
109
|
-
font-size: var(--font-size-heading-xl);
|
|
117
|
+
max-width: 300px;
|
|
110
118
|
}
|
|
111
119
|
}
|
|
112
120
|
|
|
113
|
-
@media (width <
|
|
121
|
+
@media (width < 900px) and (width >= 768px) {
|
|
122
|
+
.container {
|
|
123
|
+
margin-inline: 20px;
|
|
124
|
+
}
|
|
125
|
+
.container[data-view='plain_with_title'] {
|
|
126
|
+
padding: 0;
|
|
127
|
+
margin-inline: 20px;
|
|
128
|
+
}
|
|
114
129
|
.content {
|
|
115
|
-
padding: 40px
|
|
130
|
+
padding: 40px;
|
|
131
|
+
}
|
|
132
|
+
.content[data-view='plain_with_title'] {
|
|
133
|
+
padding-left: 40px;
|
|
134
|
+
}
|
|
135
|
+
.content[data-view='complex'] {
|
|
136
|
+
padding: 0px 60px;
|
|
116
137
|
}
|
|
117
138
|
.textContainer {
|
|
118
139
|
font-size: var(--font-size-heading-sm);
|
|
119
140
|
}
|
|
141
|
+
.titleOfPlainWithTitle {
|
|
142
|
+
font-size: var(--font-size-heading-xl);
|
|
143
|
+
}
|
|
120
144
|
.textOfPlain {
|
|
121
145
|
font-size: var(--font-size-heading-md);
|
|
122
146
|
}
|
|
123
147
|
.richTextContainer {
|
|
124
|
-
max-width:
|
|
125
|
-
}
|
|
126
|
-
.richTextContainerTitle {
|
|
127
|
-
font-size: var(--font-size-heading-lg);
|
|
148
|
+
max-width: 300px;
|
|
128
149
|
}
|
|
129
|
-
.
|
|
150
|
+
.richTextTitle p {
|
|
130
151
|
font-size: var(--font-size-heading-lg);
|
|
131
152
|
}
|
|
132
153
|
}
|
|
@@ -135,18 +156,16 @@
|
|
|
135
156
|
.container[data-view='plain_with_title'] {
|
|
136
157
|
margin: 64px 20px;
|
|
137
158
|
}
|
|
138
|
-
|
|
139
159
|
.container {
|
|
140
160
|
gap: 20px;
|
|
141
161
|
margin: 40px 20px;
|
|
142
162
|
}
|
|
143
|
-
|
|
144
163
|
.content {
|
|
145
164
|
border-radius: var(--border-radius-lg);
|
|
146
165
|
padding: 0;
|
|
147
166
|
}
|
|
148
167
|
|
|
149
|
-
.content[data-view='plain_with_title'] {
|
|
168
|
+
.content[data-view='plain_with_title'], .content[data-view='plain'] {
|
|
150
169
|
width: 100%;
|
|
151
170
|
padding: 0;
|
|
152
171
|
}
|