jvetrau-ds 0.1.22 → 0.1.24
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/layouts/base/base.cjs +12 -2
- package/layouts/base/base.cjs.map +1 -1
- package/layouts/base/base.css +32 -6
- package/layouts/base/base.d.cts +5 -1
- package/layouts/base/base.d.ts +5 -1
- package/layouts/base/base.js +12 -2
- package/layouts/base/base.js.map +1 -1
- package/layouts/base/index.d.cts +1 -1
- package/layouts/base/index.d.ts +1 -1
- package/package.json +1 -1
- package/patterns/masthead/masthead.css +4 -1
- package/styles.css +36 -7
package/layouts/base/base.cjs
CHANGED
|
@@ -11,6 +11,8 @@ var LayoutFoundation__default = /*#__PURE__*/_interopDefault(LayoutFoundation);
|
|
|
11
11
|
|
|
12
12
|
const LayoutBase = ({
|
|
13
13
|
width = "default",
|
|
14
|
+
headerAlign = "start",
|
|
15
|
+
mainAlign = "start",
|
|
14
16
|
header,
|
|
15
17
|
footer,
|
|
16
18
|
children,
|
|
@@ -22,6 +24,14 @@ const LayoutBase = ({
|
|
|
22
24
|
"layout-base__content--wide": width === "wide",
|
|
23
25
|
"layout-base__content--full": width === "full"
|
|
24
26
|
});
|
|
27
|
+
const headerClasses = classnames.classnames("layout-base__header", "", {
|
|
28
|
+
"layout-base__header--align-center": headerAlign === "center",
|
|
29
|
+
"layout-base__header--align-end": headerAlign === "end"
|
|
30
|
+
});
|
|
31
|
+
const mainClasses = classnames.classnames("layout-base__main", "", {
|
|
32
|
+
"layout-base__main--align-center": mainAlign === "center",
|
|
33
|
+
"layout-base__main--align-end": mainAlign === "end"
|
|
34
|
+
});
|
|
25
35
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
26
36
|
LayoutFoundation__default.default,
|
|
27
37
|
{
|
|
@@ -29,8 +39,8 @@ const LayoutBase = ({
|
|
|
29
39
|
className,
|
|
30
40
|
...props,
|
|
31
41
|
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "layout-base", children: [
|
|
32
|
-
header && /* @__PURE__ */ jsxRuntime.jsx("div", { className:
|
|
33
|
-
/* @__PURE__ */ jsxRuntime.jsx("main", { className:
|
|
42
|
+
header && /* @__PURE__ */ jsxRuntime.jsx("div", { className: headerClasses, children: header }),
|
|
43
|
+
/* @__PURE__ */ jsxRuntime.jsx("main", { className: mainClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: contentClasses, children }) }),
|
|
34
44
|
footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "layout-base__footer", children: footer })
|
|
35
45
|
] })
|
|
36
46
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/layouts/base/base.tsx"],"names":["classnames","jsx","LayoutFoundation","jsxs"],"mappings":";;;;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../../../src/layouts/base/base.tsx"],"names":["classnames","jsx","LayoutFoundation","jsxs"],"mappings":";;;;;;;;;;;AA0BA,MAAM,aAAwC,CAAC;AAAA,EAC7C,KAAA,GAAQ,SAAA;AAAA,EACR,WAAA,GAAc,OAAA;AAAA,EACd,SAAA,GAAY,OAAA;AAAA,EACZ,MAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,cAAA,GAAiBA,qBAAA,CAAW,sBAAA,EAAwB,EAAA,EAAI;AAAA,IAC5D,gCAAgC,KAAA,KAAU,QAAA;AAAA,IAC1C,8BAA8B,KAAA,KAAU,MAAA;AAAA,IACxC,8BAA8B,KAAA,KAAU;AAAA,GACzC,CAAA;AAED,EAAA,MAAM,aAAA,GAAgBA,qBAAA,CAAW,qBAAA,EAAuB,EAAA,EAAI;AAAA,IAC1D,qCAAqC,WAAA,KAAgB,QAAA;AAAA,IACrD,kCAAkC,WAAA,KAAgB;AAAA,GACnD,CAAA;AAED,EAAA,MAAM,WAAA,GAAcA,qBAAA,CAAW,mBAAA,EAAqB,EAAA,EAAI;AAAA,IACtD,mCAAmC,SAAA,KAAc,QAAA;AAAA,IACjD,gCAAgC,SAAA,KAAc;AAAA,GAC/C,CAAA;AAED,EAAA,uBACEC,cAAA;AAAA,IAACC,iCAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAM,MAAA;AAAA,MACN,SAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAAC,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,aAAA,EACZ,QAAA,EAAA;AAAA,QAAA,MAAA,oBACCF,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,aAAA,EACb,QAAA,EAAA,MAAA,EACH,CAAA;AAAA,wBAGFA,cAAA,CAAC,UAAK,SAAA,EAAW,WAAA,EACf,yCAAC,KAAA,EAAA,EAAI,SAAA,EAAW,cAAA,EACb,QAAA,EACH,CAAA,EACF,CAAA;AAAA,QAEC,MAAA,oBACCA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,uBACZ,QAAA,EAAA,MAAA,EACH;AAAA,OAAA,EAEJ;AAAA;AAAA,GACF;AAEJ,CAAA;AAEA,IAAO,YAAA,GAAQ","file":"base.cjs","sourcesContent":["import React from 'react';\nimport LayoutFoundation, {\n type LayoutFoundationWidth,\n} from '../foundation';\nimport './base.css';\nimport { classnames } from '../../components/helpers/classnames';\n\nexport type LayoutBaseHeaderAlign =\n | 'start'\n | 'center'\n | 'end';\n\nexport type LayoutBaseMainAlign =\n | 'start'\n | 'center'\n | 'end';\n\nexport interface LayoutBaseProps\n extends React.HTMLAttributes<HTMLDivElement> {\n width?: LayoutFoundationWidth;\n headerAlign?: LayoutBaseHeaderAlign;\n mainAlign?: LayoutBaseMainAlign;\n header?: React.ReactNode;\n footer?: React.ReactNode;\n}\n\nconst LayoutBase: React.FC<LayoutBaseProps> = ({\n width = 'default',\n headerAlign = 'start',\n mainAlign = 'start',\n header,\n footer,\n children,\n className = '',\n ...props\n}) => {\n const contentClasses = classnames('layout-base__content', '', {\n 'layout-base__content--narrow': width === 'narrow',\n 'layout-base__content--wide': width === 'wide',\n 'layout-base__content--full': width === 'full',\n });\n\n const headerClasses = classnames('layout-base__header', '', {\n 'layout-base__header--align-center': headerAlign === 'center',\n 'layout-base__header--align-end': headerAlign === 'end',\n });\n\n const mainClasses = classnames('layout-base__main', '', {\n 'layout-base__main--align-center': mainAlign === 'center',\n 'layout-base__main--align-end': mainAlign === 'end',\n });\n\n return (\n <LayoutFoundation\n width=\"full\"\n className={className}\n {...props}\n >\n <div className=\"layout-base\">\n {header && (\n <div className={headerClasses}>\n {header}\n </div>\n )}\n\n <main className={mainClasses}>\n <div className={contentClasses}>\n {children}\n </div>\n </main>\n\n {footer && (\n <div className=\"layout-base__footer\">\n {footer}\n </div>\n )}\n </div>\n </LayoutFoundation>\n );\n};\n\nexport default LayoutBase;"]}
|
package/layouts/base/base.css
CHANGED
|
@@ -4,14 +4,19 @@
|
|
|
4
4
|
/* typography */
|
|
5
5
|
|
|
6
6
|
/* size */
|
|
7
|
+
--layout-base-header-height: 120px;
|
|
8
|
+
|
|
7
9
|
display: flex;
|
|
8
10
|
flex-direction: column;
|
|
9
11
|
|
|
10
12
|
width: 100%;
|
|
11
|
-
min-height:
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
min-height:
|
|
14
|
+
calc(
|
|
15
|
+
100dvh -
|
|
16
|
+
(
|
|
17
|
+
var(--layout-foundation-padding-vert) * 2
|
|
18
|
+
)
|
|
19
|
+
);
|
|
15
20
|
|
|
16
21
|
/* border */
|
|
17
22
|
|
|
@@ -26,7 +31,12 @@
|
|
|
26
31
|
/* typography */
|
|
27
32
|
|
|
28
33
|
/* size */
|
|
34
|
+
display: flex;
|
|
35
|
+
align-items: flex-start;
|
|
36
|
+
justify-content: center;
|
|
37
|
+
|
|
29
38
|
width: 100%;
|
|
39
|
+
min-height: var(--layout-base-header-height);
|
|
30
40
|
|
|
31
41
|
/* border */
|
|
32
42
|
|
|
@@ -35,6 +45,14 @@
|
|
|
35
45
|
/* motion */
|
|
36
46
|
}
|
|
37
47
|
|
|
48
|
+
.layout-base__header--align-center {
|
|
49
|
+
align-items: center;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.layout-base__header--align-end {
|
|
53
|
+
align-items: flex-end;
|
|
54
|
+
}
|
|
55
|
+
|
|
38
56
|
.layout-base__main {
|
|
39
57
|
/* color */
|
|
40
58
|
|
|
@@ -42,13 +60,13 @@
|
|
|
42
60
|
|
|
43
61
|
/* size */
|
|
44
62
|
display: flex;
|
|
63
|
+
flex: 1;
|
|
45
64
|
justify-content: center;
|
|
65
|
+
align-items: flex-start;
|
|
46
66
|
|
|
47
67
|
width: 100%;
|
|
48
68
|
min-width: 0;
|
|
49
69
|
|
|
50
|
-
flex: 1;
|
|
51
|
-
|
|
52
70
|
padding:
|
|
53
71
|
var(--layout-foundation-padding-vert)
|
|
54
72
|
var(--layout-foundation-padding-horz);
|
|
@@ -62,6 +80,14 @@
|
|
|
62
80
|
/* motion */
|
|
63
81
|
}
|
|
64
82
|
|
|
83
|
+
.layout-base__main--align-center {
|
|
84
|
+
align-items: center;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.layout-base__main--align-end {
|
|
88
|
+
align-items: flex-end;
|
|
89
|
+
}
|
|
90
|
+
|
|
65
91
|
.layout-base__content {
|
|
66
92
|
/* color */
|
|
67
93
|
|
package/layouts/base/base.d.cts
CHANGED
|
@@ -1,11 +1,15 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { LayoutFoundationWidth } from '../foundation/foundation.cjs';
|
|
3
3
|
|
|
4
|
+
type LayoutBaseHeaderAlign = 'start' | 'center' | 'end';
|
|
5
|
+
type LayoutBaseMainAlign = 'start' | 'center' | 'end';
|
|
4
6
|
interface LayoutBaseProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
5
7
|
width?: LayoutFoundationWidth;
|
|
8
|
+
headerAlign?: LayoutBaseHeaderAlign;
|
|
9
|
+
mainAlign?: LayoutBaseMainAlign;
|
|
6
10
|
header?: React.ReactNode;
|
|
7
11
|
footer?: React.ReactNode;
|
|
8
12
|
}
|
|
9
13
|
declare const LayoutBase: React.FC<LayoutBaseProps>;
|
|
10
14
|
|
|
11
|
-
export { type LayoutBaseProps, LayoutBase as default };
|
|
15
|
+
export { type LayoutBaseHeaderAlign, type LayoutBaseMainAlign, type LayoutBaseProps, LayoutBase as default };
|
package/layouts/base/base.d.ts
CHANGED
|
@@ -1,11 +1,15 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { LayoutFoundationWidth } from '../foundation/foundation.js';
|
|
3
3
|
|
|
4
|
+
type LayoutBaseHeaderAlign = 'start' | 'center' | 'end';
|
|
5
|
+
type LayoutBaseMainAlign = 'start' | 'center' | 'end';
|
|
4
6
|
interface LayoutBaseProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
5
7
|
width?: LayoutFoundationWidth;
|
|
8
|
+
headerAlign?: LayoutBaseHeaderAlign;
|
|
9
|
+
mainAlign?: LayoutBaseMainAlign;
|
|
6
10
|
header?: React.ReactNode;
|
|
7
11
|
footer?: React.ReactNode;
|
|
8
12
|
}
|
|
9
13
|
declare const LayoutBase: React.FC<LayoutBaseProps>;
|
|
10
14
|
|
|
11
|
-
export { type LayoutBaseProps, LayoutBase as default };
|
|
15
|
+
export { type LayoutBaseHeaderAlign, type LayoutBaseMainAlign, type LayoutBaseProps, LayoutBase as default };
|
package/layouts/base/base.js
CHANGED
|
@@ -5,6 +5,8 @@ import { classnames } from '../../components/helpers/classnames';
|
|
|
5
5
|
|
|
6
6
|
const LayoutBase = ({
|
|
7
7
|
width = "default",
|
|
8
|
+
headerAlign = "start",
|
|
9
|
+
mainAlign = "start",
|
|
8
10
|
header,
|
|
9
11
|
footer,
|
|
10
12
|
children,
|
|
@@ -16,6 +18,14 @@ const LayoutBase = ({
|
|
|
16
18
|
"layout-base__content--wide": width === "wide",
|
|
17
19
|
"layout-base__content--full": width === "full"
|
|
18
20
|
});
|
|
21
|
+
const headerClasses = classnames("layout-base__header", "", {
|
|
22
|
+
"layout-base__header--align-center": headerAlign === "center",
|
|
23
|
+
"layout-base__header--align-end": headerAlign === "end"
|
|
24
|
+
});
|
|
25
|
+
const mainClasses = classnames("layout-base__main", "", {
|
|
26
|
+
"layout-base__main--align-center": mainAlign === "center",
|
|
27
|
+
"layout-base__main--align-end": mainAlign === "end"
|
|
28
|
+
});
|
|
19
29
|
return /* @__PURE__ */ jsx(
|
|
20
30
|
LayoutFoundation,
|
|
21
31
|
{
|
|
@@ -23,8 +33,8 @@ const LayoutBase = ({
|
|
|
23
33
|
className,
|
|
24
34
|
...props,
|
|
25
35
|
children: /* @__PURE__ */ jsxs("div", { className: "layout-base", children: [
|
|
26
|
-
header && /* @__PURE__ */ jsx("div", { className:
|
|
27
|
-
/* @__PURE__ */ jsx("main", { className:
|
|
36
|
+
header && /* @__PURE__ */ jsx("div", { className: headerClasses, children: header }),
|
|
37
|
+
/* @__PURE__ */ jsx("main", { className: mainClasses, children: /* @__PURE__ */ jsx("div", { className: contentClasses, children }) }),
|
|
28
38
|
footer && /* @__PURE__ */ jsx("div", { className: "layout-base__footer", children: footer })
|
|
29
39
|
] })
|
|
30
40
|
}
|
package/layouts/base/base.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/layouts/base/base.tsx"],"names":[],"mappings":";;;;;
|
|
1
|
+
{"version":3,"sources":["../../../src/layouts/base/base.tsx"],"names":[],"mappings":";;;;;AA0BA,MAAM,aAAwC,CAAC;AAAA,EAC7C,KAAA,GAAQ,SAAA;AAAA,EACR,WAAA,GAAc,OAAA;AAAA,EACd,SAAA,GAAY,OAAA;AAAA,EACZ,MAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,cAAA,GAAiB,UAAA,CAAW,sBAAA,EAAwB,EAAA,EAAI;AAAA,IAC5D,gCAAgC,KAAA,KAAU,QAAA;AAAA,IAC1C,8BAA8B,KAAA,KAAU,MAAA;AAAA,IACxC,8BAA8B,KAAA,KAAU;AAAA,GACzC,CAAA;AAED,EAAA,MAAM,aAAA,GAAgB,UAAA,CAAW,qBAAA,EAAuB,EAAA,EAAI;AAAA,IAC1D,qCAAqC,WAAA,KAAgB,QAAA;AAAA,IACrD,kCAAkC,WAAA,KAAgB;AAAA,GACnD,CAAA;AAED,EAAA,MAAM,WAAA,GAAc,UAAA,CAAW,mBAAA,EAAqB,EAAA,EAAI;AAAA,IACtD,mCAAmC,SAAA,KAAc,QAAA;AAAA,IACjD,gCAAgC,SAAA,KAAc;AAAA,GAC/C,CAAA;AAED,EAAA,uBACE,GAAA;AAAA,IAAC,gBAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAM,MAAA;AAAA,MACN,SAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,aAAA,EACZ,QAAA,EAAA;AAAA,QAAA,MAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,aAAA,EACb,QAAA,EAAA,MAAA,EACH,CAAA;AAAA,wBAGF,GAAA,CAAC,UAAK,SAAA,EAAW,WAAA,EACf,8BAAC,KAAA,EAAA,EAAI,SAAA,EAAW,cAAA,EACb,QAAA,EACH,CAAA,EACF,CAAA;AAAA,QAEC,MAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,uBACZ,QAAA,EAAA,MAAA,EACH;AAAA,OAAA,EAEJ;AAAA;AAAA,GACF;AAEJ,CAAA;AAEA,IAAO,YAAA,GAAQ","file":"base.js","sourcesContent":["import React from 'react';\nimport LayoutFoundation, {\n type LayoutFoundationWidth,\n} from '../foundation';\nimport './base.css';\nimport { classnames } from '../../components/helpers/classnames';\n\nexport type LayoutBaseHeaderAlign =\n | 'start'\n | 'center'\n | 'end';\n\nexport type LayoutBaseMainAlign =\n | 'start'\n | 'center'\n | 'end';\n\nexport interface LayoutBaseProps\n extends React.HTMLAttributes<HTMLDivElement> {\n width?: LayoutFoundationWidth;\n headerAlign?: LayoutBaseHeaderAlign;\n mainAlign?: LayoutBaseMainAlign;\n header?: React.ReactNode;\n footer?: React.ReactNode;\n}\n\nconst LayoutBase: React.FC<LayoutBaseProps> = ({\n width = 'default',\n headerAlign = 'start',\n mainAlign = 'start',\n header,\n footer,\n children,\n className = '',\n ...props\n}) => {\n const contentClasses = classnames('layout-base__content', '', {\n 'layout-base__content--narrow': width === 'narrow',\n 'layout-base__content--wide': width === 'wide',\n 'layout-base__content--full': width === 'full',\n });\n\n const headerClasses = classnames('layout-base__header', '', {\n 'layout-base__header--align-center': headerAlign === 'center',\n 'layout-base__header--align-end': headerAlign === 'end',\n });\n\n const mainClasses = classnames('layout-base__main', '', {\n 'layout-base__main--align-center': mainAlign === 'center',\n 'layout-base__main--align-end': mainAlign === 'end',\n });\n\n return (\n <LayoutFoundation\n width=\"full\"\n className={className}\n {...props}\n >\n <div className=\"layout-base\">\n {header && (\n <div className={headerClasses}>\n {header}\n </div>\n )}\n\n <main className={mainClasses}>\n <div className={contentClasses}>\n {children}\n </div>\n </main>\n\n {footer && (\n <div className=\"layout-base__footer\">\n {footer}\n </div>\n )}\n </div>\n </LayoutFoundation>\n );\n};\n\nexport default LayoutBase;"]}
|
package/layouts/base/index.d.cts
CHANGED
package/layouts/base/index.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
.masthead {
|
|
2
2
|
/* color */
|
|
3
|
-
color: var(--color-text)
|
|
3
|
+
/* color: var(--color-text);*/
|
|
4
4
|
|
|
5
5
|
/* typography */
|
|
6
6
|
|
|
@@ -8,8 +8,11 @@
|
|
|
8
8
|
display: flex;
|
|
9
9
|
align-items: center;
|
|
10
10
|
justify-content: center;
|
|
11
|
+
|
|
11
12
|
width: 100%;
|
|
12
13
|
|
|
14
|
+
padding-block: var(--margin-container-item);
|
|
15
|
+
|
|
13
16
|
/* border */
|
|
14
17
|
|
|
15
18
|
/* depth */
|
package/styles.css
CHANGED
|
@@ -2587,7 +2587,7 @@
|
|
|
2587
2587
|
/* src/patterns/masthead/masthead.css */
|
|
2588
2588
|
.masthead {
|
|
2589
2589
|
/* color */
|
|
2590
|
-
color: var(--color-text)
|
|
2590
|
+
/* color: var(--color-text);*/
|
|
2591
2591
|
|
|
2592
2592
|
/* typography */
|
|
2593
2593
|
|
|
@@ -2595,8 +2595,11 @@
|
|
|
2595
2595
|
display: flex;
|
|
2596
2596
|
align-items: center;
|
|
2597
2597
|
justify-content: center;
|
|
2598
|
+
|
|
2598
2599
|
width: 100%;
|
|
2599
2600
|
|
|
2601
|
+
padding-block: var(--margin-container-item);
|
|
2602
|
+
|
|
2600
2603
|
/* border */
|
|
2601
2604
|
|
|
2602
2605
|
/* depth */
|
|
@@ -2747,14 +2750,19 @@
|
|
|
2747
2750
|
/* typography */
|
|
2748
2751
|
|
|
2749
2752
|
/* size */
|
|
2753
|
+
--layout-base-header-height: 120px;
|
|
2754
|
+
|
|
2750
2755
|
display: flex;
|
|
2751
2756
|
flex-direction: column;
|
|
2752
2757
|
|
|
2753
2758
|
width: 100%;
|
|
2754
|
-
min-height:
|
|
2755
|
-
|
|
2756
|
-
|
|
2757
|
-
|
|
2759
|
+
min-height:
|
|
2760
|
+
calc(
|
|
2761
|
+
100dvh -
|
|
2762
|
+
(
|
|
2763
|
+
var(--layout-foundation-padding-vert) * 2
|
|
2764
|
+
)
|
|
2765
|
+
);
|
|
2758
2766
|
|
|
2759
2767
|
/* border */
|
|
2760
2768
|
|
|
@@ -2769,7 +2777,12 @@
|
|
|
2769
2777
|
/* typography */
|
|
2770
2778
|
|
|
2771
2779
|
/* size */
|
|
2780
|
+
display: flex;
|
|
2781
|
+
align-items: flex-start;
|
|
2782
|
+
justify-content: center;
|
|
2783
|
+
|
|
2772
2784
|
width: 100%;
|
|
2785
|
+
min-height: var(--layout-base-header-height);
|
|
2773
2786
|
|
|
2774
2787
|
/* border */
|
|
2775
2788
|
|
|
@@ -2778,6 +2791,14 @@
|
|
|
2778
2791
|
/* motion */
|
|
2779
2792
|
}
|
|
2780
2793
|
|
|
2794
|
+
.layout-base__header--align-center {
|
|
2795
|
+
align-items: center;
|
|
2796
|
+
}
|
|
2797
|
+
|
|
2798
|
+
.layout-base__header--align-end {
|
|
2799
|
+
align-items: flex-end;
|
|
2800
|
+
}
|
|
2801
|
+
|
|
2781
2802
|
.layout-base__main {
|
|
2782
2803
|
/* color */
|
|
2783
2804
|
|
|
@@ -2785,13 +2806,13 @@
|
|
|
2785
2806
|
|
|
2786
2807
|
/* size */
|
|
2787
2808
|
display: flex;
|
|
2809
|
+
flex: 1;
|
|
2788
2810
|
justify-content: center;
|
|
2811
|
+
align-items: flex-start;
|
|
2789
2812
|
|
|
2790
2813
|
width: 100%;
|
|
2791
2814
|
min-width: 0;
|
|
2792
2815
|
|
|
2793
|
-
flex: 1;
|
|
2794
|
-
|
|
2795
2816
|
padding:
|
|
2796
2817
|
var(--layout-foundation-padding-vert)
|
|
2797
2818
|
var(--layout-foundation-padding-horz);
|
|
@@ -2805,6 +2826,14 @@
|
|
|
2805
2826
|
/* motion */
|
|
2806
2827
|
}
|
|
2807
2828
|
|
|
2829
|
+
.layout-base__main--align-center {
|
|
2830
|
+
align-items: center;
|
|
2831
|
+
}
|
|
2832
|
+
|
|
2833
|
+
.layout-base__main--align-end {
|
|
2834
|
+
align-items: flex-end;
|
|
2835
|
+
}
|
|
2836
|
+
|
|
2808
2837
|
.layout-base__content {
|
|
2809
2838
|
/* color */
|
|
2810
2839
|
|