@seed-design/css 2.9.0 → 2.9.1
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/all.css +39 -16
- package/all.layered.css +39 -16
- package/package.json +1 -1
- package/recipes/bottom-sheet.css +4 -0
- package/recipes/bottom-sheet.layered.css +5 -1
- package/recipes/content-dialog.css +10 -6
- package/recipes/content-dialog.layered.css +10 -6
- package/recipes/dialog.css +6 -0
- package/recipes/dialog.layered.css +6 -0
- package/recipes/menu-sheet.css +5 -0
- package/recipes/menu-sheet.layered.css +5 -0
- package/recipes/side-panel.css +10 -6
- package/recipes/side-panel.layered.css +10 -6
- package/recipes/snackbar-region.css +3 -3
- package/recipes/snackbar-region.layered.css +3 -3
- package/vars/component/alert-dialog.d.ts +2 -0
- package/vars/component/bottom-sheet.d.ts +3 -0
- package/vars/component/bottom-sheet.mjs +1 -0
- package/vars/component/dialog.d.ts +6 -2
- package/vars/component/help-bubble.d.ts +2 -1
- package/vars/component/menu-sheet.d.ts +5 -0
- package/vars/component/menu-sheet.mjs +1 -0
- package/vars/component/menu.d.ts +2 -1
- package/vars/component/select.d.ts +2 -1
- package/vars/component/side-panel.d.ts +10 -7
- package/vars/component/snackbar.d.ts +1 -0
- package/all.layered.min.css +0 -1
- package/all.min.css +0 -1
- package/base.layered.min.css +0 -1
- package/base.min.css +0 -1
package/recipes/side-panel.css
CHANGED
|
@@ -40,22 +40,20 @@
|
|
|
40
40
|
background: var(--seed-color-bg-layer-floating);
|
|
41
41
|
touch-action: none;
|
|
42
42
|
will-change: transform;
|
|
43
|
-
--side-panel-default-width: calc(0.8 * 100vw);
|
|
43
|
+
--side-panel-default-width: calc(0.8 * (100vw - var(--seed-safe-area-left) - var(--seed-safe-area-right)));
|
|
44
44
|
--seed-box-width-base: var(--side-panel-default-width);
|
|
45
45
|
--seed-box-width-sm: var(--seed-box-width-base, initial);
|
|
46
46
|
--seed-box-width-md: var(--seed-box-width-sm, initial);
|
|
47
47
|
--seed-box-width-lg: var(--seed-box-width-md, initial);
|
|
48
48
|
--seed-box-width-xl: var(--seed-box-width-lg, initial);
|
|
49
49
|
--seed-box-width: var(--seed-box-width-base, initial);
|
|
50
|
-
--seed-box-max-width-base: calc(0.8 * 100%);
|
|
50
|
+
--seed-box-max-width-base: calc(0.8 * (100% - var(--seed-safe-area-left) - var(--seed-safe-area-right)));
|
|
51
51
|
--seed-box-max-width-sm: var(--seed-box-max-width-base, initial);
|
|
52
52
|
--seed-box-max-width-md: var(--seed-box-max-width-sm, initial);
|
|
53
53
|
--seed-box-max-width-lg: var(--seed-box-max-width-md, initial);
|
|
54
54
|
--seed-box-max-width-xl: var(--seed-box-max-width-lg, initial);
|
|
55
55
|
--seed-box-max-width: var(--seed-box-max-width-base, initial);
|
|
56
56
|
inset-block: 0;
|
|
57
|
-
width: var(--seed-box-width);
|
|
58
|
-
max-width: var(--seed-box-max-width);
|
|
59
57
|
padding-bottom: var(--seed-safe-area-bottom);
|
|
60
58
|
}
|
|
61
59
|
@media (min-width: 768px) {
|
|
@@ -76,14 +74,20 @@
|
|
|
76
74
|
}
|
|
77
75
|
.seed-side-panel__content[data-drawer-direction='left'] {
|
|
78
76
|
left: 0;
|
|
79
|
-
|
|
77
|
+
width: calc(var(--seed-box-width) + var(--seed-safe-area-left));
|
|
78
|
+
max-width: calc(var(--seed-box-max-width) + var(--seed-safe-area-left));
|
|
79
|
+
padding-left: var(--seed-safe-area-left);
|
|
80
|
+
padding-right: max(0px, var(--seed-safe-area-right) - (100% - var(--seed-safe-area-left) - min(var(--seed-box-width), var(--seed-box-max-width))));
|
|
80
81
|
}
|
|
81
82
|
.seed-side-panel__content[data-drawer-direction='left']::after {
|
|
82
83
|
right: 100%;
|
|
83
84
|
}
|
|
84
85
|
.seed-side-panel__content[data-drawer-direction='right'] {
|
|
85
86
|
right: 0;
|
|
86
|
-
|
|
87
|
+
width: calc(var(--seed-box-width) + var(--seed-safe-area-right));
|
|
88
|
+
max-width: calc(var(--seed-box-max-width) + var(--seed-safe-area-right));
|
|
89
|
+
padding-right: var(--seed-safe-area-right);
|
|
90
|
+
padding-left: max(0px, var(--seed-safe-area-left) - (100% - var(--seed-safe-area-right) - min(var(--seed-box-width), var(--seed-box-max-width))));
|
|
87
91
|
}
|
|
88
92
|
.seed-side-panel__content[data-drawer-direction='right']::after {
|
|
89
93
|
left: 100%;
|
|
@@ -42,21 +42,19 @@
|
|
|
42
42
|
background: var(--seed-color-bg-layer-floating);
|
|
43
43
|
touch-action: none;
|
|
44
44
|
will-change: transform;
|
|
45
|
-
--side-panel-default-width: calc(.8 * 100vw);
|
|
45
|
+
--side-panel-default-width: calc(.8 * (100vw - var(--seed-safe-area-left) - var(--seed-safe-area-right)));
|
|
46
46
|
--seed-box-width-base: var(--side-panel-default-width);
|
|
47
47
|
--seed-box-width-sm: var(--seed-box-width-base, initial);
|
|
48
48
|
--seed-box-width-md: var(--seed-box-width-sm, initial);
|
|
49
49
|
--seed-box-width-lg: var(--seed-box-width-md, initial);
|
|
50
50
|
--seed-box-width-xl: var(--seed-box-width-lg, initial);
|
|
51
51
|
--seed-box-width: var(--seed-box-width-base, initial);
|
|
52
|
-
--seed-box-max-width-base: calc(.8 * 100%);
|
|
52
|
+
--seed-box-max-width-base: calc(.8 * (100% - var(--seed-safe-area-left) - var(--seed-safe-area-right)));
|
|
53
53
|
--seed-box-max-width-sm: var(--seed-box-max-width-base, initial);
|
|
54
54
|
--seed-box-max-width-md: var(--seed-box-max-width-sm, initial);
|
|
55
55
|
--seed-box-max-width-lg: var(--seed-box-max-width-md, initial);
|
|
56
56
|
--seed-box-max-width-xl: var(--seed-box-max-width-lg, initial);
|
|
57
57
|
--seed-box-max-width: var(--seed-box-max-width-base, initial);
|
|
58
|
-
width: var(--seed-box-width);
|
|
59
|
-
max-width: var(--seed-box-max-width);
|
|
60
58
|
padding-bottom: var(--seed-safe-area-bottom);
|
|
61
59
|
flex-direction: column;
|
|
62
60
|
display: flex;
|
|
@@ -84,7 +82,10 @@
|
|
|
84
82
|
}
|
|
85
83
|
|
|
86
84
|
.seed-side-panel__content[data-drawer-direction="left"] {
|
|
87
|
-
|
|
85
|
+
width: calc(var(--seed-box-width) + var(--seed-safe-area-left));
|
|
86
|
+
max-width: calc(var(--seed-box-max-width) + var(--seed-safe-area-left));
|
|
87
|
+
padding-left: var(--seed-safe-area-left);
|
|
88
|
+
padding-right: max(0px, var(--seed-safe-area-right) - (100% - var(--seed-safe-area-left) - min(var(--seed-box-width), var(--seed-box-max-width))));
|
|
88
89
|
left: 0;
|
|
89
90
|
}
|
|
90
91
|
|
|
@@ -93,7 +94,10 @@
|
|
|
93
94
|
}
|
|
94
95
|
|
|
95
96
|
.seed-side-panel__content[data-drawer-direction="right"] {
|
|
96
|
-
|
|
97
|
+
width: calc(var(--seed-box-width) + var(--seed-safe-area-right));
|
|
98
|
+
max-width: calc(var(--seed-box-max-width) + var(--seed-safe-area-right));
|
|
99
|
+
padding-right: var(--seed-safe-area-right);
|
|
100
|
+
padding-left: max(0px, var(--seed-safe-area-left) - (100% - var(--seed-safe-area-right) - min(var(--seed-box-width), var(--seed-box-max-width))));
|
|
97
101
|
right: 0;
|
|
98
102
|
}
|
|
99
103
|
|
|
@@ -3,9 +3,9 @@
|
|
|
3
3
|
display: flex;
|
|
4
4
|
flex-direction: column;
|
|
5
5
|
align-items: center;
|
|
6
|
-
left:
|
|
7
|
-
right:
|
|
8
|
-
bottom: calc(
|
|
6
|
+
left: var(--seed-safe-area-left);
|
|
7
|
+
right: var(--seed-safe-area-right);
|
|
8
|
+
bottom: calc(var(--seed-safe-area-bottom) + var(--snackbar-region-offset, 0px));
|
|
9
9
|
padding-inline: var(--seed-dimension-x2);
|
|
10
10
|
padding-block: var(--seed-dimension-x2);
|
|
11
11
|
transition-property: bottom;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
@layer seed-components {
|
|
2
2
|
.seed-snackbar-region {
|
|
3
3
|
z-index: 2147483647;
|
|
4
|
-
left:
|
|
5
|
-
right:
|
|
6
|
-
bottom: calc(
|
|
4
|
+
left: var(--seed-safe-area-left);
|
|
5
|
+
right: var(--seed-safe-area-right);
|
|
6
|
+
bottom: calc(var(--seed-safe-area-bottom) + var(--snackbar-region-offset, 0px));
|
|
7
7
|
padding-inline: var(--seed-dimension-x2);
|
|
8
8
|
padding-block: var(--seed-dimension-x2);
|
|
9
9
|
transition-property: bottom;
|
|
@@ -10,9 +10,11 @@ export declare const vars: {
|
|
|
10
10
|
"exitTimingFunction": "var(--seed-timing-function-exit)",
|
|
11
11
|
"exitOpacity": "0"
|
|
12
12
|
},
|
|
13
|
+
/** content는 가로 기준으로 안전 영역의 가운데에 놓입니다. 세로 기준으로는 상단과 하단 inset 중 큰 값을 위아래에 똑같이 두어 화면 가운데에 놓이고, 높이는 그 사이 높이를 넘지 않습니다. */
|
|
13
14
|
"content": {
|
|
14
15
|
"color": "var(--seed-color-bg-layer-floating)",
|
|
15
16
|
"cornerRadius": "var(--seed-radius-r5)",
|
|
17
|
+
/** content와 좌우 안전 영역 경계 사이의 최소 간격입니다. 화면 끝이 아니라 안전 영역 경계부터 잽니다. */
|
|
16
18
|
"marginX": "var(--seed-dimension-x8)",
|
|
17
19
|
"marginY": "var(--seed-dimension-x16)",
|
|
18
20
|
"maxWidth": "272px",
|
|
@@ -10,9 +10,12 @@ export declare const vars: {
|
|
|
10
10
|
"exitTimingFunction": "var(--seed-timing-function-exit)",
|
|
11
11
|
"exitOpacity": "0"
|
|
12
12
|
},
|
|
13
|
+
/** content는 가로 기준으로 안전 영역의 가운데에 놓이고, 하단 inset을 content의 하단 패딩으로 적용합니다. */
|
|
13
14
|
"content": {
|
|
14
15
|
"color": "var(--seed-color-bg-layer-floating)",
|
|
15
16
|
"maxWidth": "480px",
|
|
17
|
+
/** inset을 빼지 않은 viewport height 또는 parent height에 대한 최대 비율입니다. 최대 높이는 min(maxHeightFraction × 높이, 상단 inset을 뺀 높이)이므로, content는 상단 안전 영역 경계까지만 커집니다. */
|
|
18
|
+
"maxHeightFraction": "0.9",
|
|
16
19
|
"topCornerRadius": "var(--seed-radius-r6)",
|
|
17
20
|
"enterDuration": "var(--seed-duration-d6)",
|
|
18
21
|
"enterTimingFunction": "var(--seed-timing-function-enter-expressive)",
|
|
@@ -13,6 +13,7 @@ export const vars = {
|
|
|
13
13
|
"content": {
|
|
14
14
|
"color": "var(--seed-color-bg-layer-floating)",
|
|
15
15
|
"maxWidth": "480px",
|
|
16
|
+
"maxHeightFraction": "0.9",
|
|
16
17
|
"topCornerRadius": "var(--seed-radius-r6)",
|
|
17
18
|
"enterDuration": "var(--seed-duration-d6)",
|
|
18
19
|
"enterTimingFunction": "var(--seed-timing-function-enter-expressive)",
|
|
@@ -10,13 +10,15 @@ export declare const vars: {
|
|
|
10
10
|
"exitTimingFunction": "var(--seed-timing-function-exit)",
|
|
11
11
|
"exitOpacity": "0"
|
|
12
12
|
},
|
|
13
|
+
/** content는 가로 기준으로 안전 영역의 가운데에 놓이고, 소비자가 지정한 너비는 안전 영역의 너비를 기준으로 합니다. 세로 기준으로는 상단과 하단 inset 중 큰 값을 위아래에 똑같이 두어 화면 가운데에 놓입니다. */
|
|
13
14
|
"content": {
|
|
14
15
|
"color": "var(--seed-color-bg-layer-floating)",
|
|
15
16
|
"cornerRadius": "var(--seed-radius-r5)",
|
|
16
|
-
/** viewport width 또는 parent width에 대한 비율입니다. viewport `md` 미만에서 적용합니다. */
|
|
17
|
+
/** 좌우 inset을 뺀 viewport width 또는 parent width에 대한 비율입니다. viewport `md` 미만에서 적용합니다. */
|
|
17
18
|
"widthFraction": "0.9",
|
|
18
|
-
/** viewport height 또는 parent height에 대한 최대 비율입니다. */
|
|
19
|
+
/** viewport height 또는 parent height에 대한 최대 비율입니다. 최대 높이는 min(maxHeightFraction × 높이, 상단과 하단 inset 중 큰 값을 위아래에서 각각 뺀 높이)입니다. */
|
|
19
20
|
"maxHeightFraction": "0.8",
|
|
21
|
+
/** viewport `md` 이상에서 content와 좌우 안전 영역 경계 사이에 두는 최소 간격입니다. */
|
|
20
22
|
"marginX": "var(--seed-dimension-x5)",
|
|
21
23
|
"enterDuration": "var(--seed-duration-d4)",
|
|
22
24
|
"enterTimingFunction": "var(--seed-timing-function-enter-expressive)",
|
|
@@ -76,6 +78,7 @@ export declare const vars: {
|
|
|
76
78
|
},
|
|
77
79
|
"sizeMedium": {
|
|
78
80
|
"enabled": {
|
|
81
|
+
/** content는 가로 기준으로 안전 영역의 가운데에 놓이고, 소비자가 지정한 너비는 안전 영역의 너비를 기준으로 합니다. 세로 기준으로는 상단과 하단 inset 중 큰 값을 위아래에 똑같이 두어 화면 가운데에 놓입니다. */
|
|
79
82
|
"content": {
|
|
80
83
|
"maxWidth": "480px"
|
|
81
84
|
}
|
|
@@ -83,6 +86,7 @@ export declare const vars: {
|
|
|
83
86
|
},
|
|
84
87
|
"sizeLarge": {
|
|
85
88
|
"enabled": {
|
|
89
|
+
/** content는 가로 기준으로 안전 영역의 가운데에 놓이고, 소비자가 지정한 너비는 안전 영역의 너비를 기준으로 합니다. 세로 기준으로는 상단과 하단 inset 중 큰 값을 위아래에 똑같이 두어 화면 가운데에 놓입니다. */
|
|
86
90
|
"content": {
|
|
87
91
|
"maxWidth": "800px"
|
|
88
92
|
}
|
|
@@ -7,6 +7,7 @@ export declare const vars: {
|
|
|
7
7
|
"paddingX": "var(--seed-dimension-x3)",
|
|
8
8
|
"paddingY": "var(--seed-dimension-x2_5)",
|
|
9
9
|
"gap": "var(--seed-dimension-x1)",
|
|
10
|
+
/** 가용 너비(overflowPadding 참고)가 이보다 작으면 가용 너비로 축소됩니다. */
|
|
10
11
|
"maxWidth": "280px",
|
|
11
12
|
"enterScale": "0.9",
|
|
12
13
|
"enterOpacity": "0",
|
|
@@ -16,7 +17,7 @@ export declare const vars: {
|
|
|
16
17
|
"exitOpacity": "0",
|
|
17
18
|
"exitDuration": "var(--seed-duration-d4)",
|
|
18
19
|
"exitTimingFunction": "var(--seed-timing-function-easing)",
|
|
19
|
-
/** 말풍선과
|
|
20
|
+
/** 말풍선과 안전 영역 경계 사이의 최소 간격을 정의합니다. 말풍선은 화면 끝에서 inset + overflowPadding만큼 안쪽에 배치되며, 가용 너비도 같은 기준으로 계산합니다. */
|
|
20
21
|
"overflowPadding": "var(--seed-dimension-x4)"
|
|
21
22
|
},
|
|
22
23
|
"arrow": {
|
|
@@ -10,11 +10,15 @@ export declare const vars: {
|
|
|
10
10
|
"exitTimingFunction": "var(--seed-timing-function-exit)",
|
|
11
11
|
"exitOpacity": "0"
|
|
12
12
|
},
|
|
13
|
+
/** content는 가로 기준으로 안전 영역의 가운데에 놓입니다. */
|
|
13
14
|
"content": {
|
|
14
15
|
"color": "var(--seed-color-bg-layer-floating)",
|
|
15
16
|
"maxWidth": "480px",
|
|
17
|
+
/** inset을 빼지 않은 viewport height 또는 parent height에 대한 최대 비율입니다. 최대 높이는 min(maxHeightFraction × 높이, 상단 inset을 뺀 높이)이므로, content는 상단 안전 영역 경계까지만 커집니다. */
|
|
18
|
+
"maxHeightFraction": "0.9",
|
|
16
19
|
"paddingX": "var(--seed-dimension-spacing-x-global-gutter)",
|
|
17
20
|
"paddingTop": "var(--seed-dimension-x6)",
|
|
21
|
+
/** 이 값은 하단 inset과 합산하여 적용합니다. */
|
|
18
22
|
"paddingBottom": "var(--seed-dimension-x4)",
|
|
19
23
|
"topCornerRadius": "var(--seed-radius-r5)",
|
|
20
24
|
"enterDuration": "var(--seed-duration-d6)",
|
|
@@ -24,6 +28,7 @@ export declare const vars: {
|
|
|
24
28
|
},
|
|
25
29
|
"header": {
|
|
26
30
|
"gap": "var(--seed-dimension-x1)",
|
|
31
|
+
/** 이 값은 하단 inset과 합산하여 적용합니다. */
|
|
27
32
|
"paddingBottom": "var(--seed-dimension-x4)"
|
|
28
33
|
},
|
|
29
34
|
"title": {
|
|
@@ -13,6 +13,7 @@ export const vars = {
|
|
|
13
13
|
"content": {
|
|
14
14
|
"color": "var(--seed-color-bg-layer-floating)",
|
|
15
15
|
"maxWidth": "480px",
|
|
16
|
+
"maxHeightFraction": "0.9",
|
|
16
17
|
"paddingX": "var(--seed-dimension-spacing-x-global-gutter)",
|
|
17
18
|
"paddingTop": "var(--seed-dimension-x6)",
|
|
18
19
|
"paddingBottom": "var(--seed-dimension-x4)",
|
package/vars/component/menu.d.ts
CHANGED
|
@@ -17,8 +17,9 @@ export declare const vars: {
|
|
|
17
17
|
"gap": "var(--seed-dimension-x2)",
|
|
18
18
|
/** 트리거와 메뉴 사이의 간격을 정의합니다. */
|
|
19
19
|
"gutter": "var(--seed-dimension-x2)",
|
|
20
|
-
/** 메뉴와
|
|
20
|
+
/** 메뉴와 안전 영역 경계 사이의 최소 간격을 정의합니다. 메뉴는 화면 끝에서 inset + overflowPadding만큼 안쪽에 배치되며, 가용 높이도 같은 기준으로 계산합니다. */
|
|
21
21
|
"overflowPadding": "var(--seed-dimension-x2)",
|
|
22
|
+
/** 가용 높이(overflowPadding 참고)가 이보다 작으면 가용 높이로 축소됩니다. */
|
|
22
23
|
"maxHeight": "480px"
|
|
23
24
|
},
|
|
24
25
|
"groupLabel": {
|
|
@@ -17,8 +17,9 @@ export declare const vars: {
|
|
|
17
17
|
"gap": "var(--seed-dimension-x2)",
|
|
18
18
|
/** 트리거와 목록 사이의 간격을 정의합니다. */
|
|
19
19
|
"gutter": "var(--seed-dimension-x2)",
|
|
20
|
-
/** 목록과
|
|
20
|
+
/** 목록과 안전 영역 경계 사이의 최소 간격을 정의합니다. 목록은 화면 끝에서 inset + overflowPadding만큼 안쪽에 배치되며, 가용 높이도 같은 기준으로 계산합니다. */
|
|
21
21
|
"overflowPadding": "var(--seed-dimension-x2)",
|
|
22
|
+
/** 가용 높이(overflowPadding 참고)가 이보다 작으면 가용 높이로 축소됩니다. */
|
|
22
23
|
"maxHeight": "480px"
|
|
23
24
|
},
|
|
24
25
|
"groupLabel": {
|
|
@@ -10,10 +10,10 @@ export declare const vars: {
|
|
|
10
10
|
"exitTimingFunction": "var(--seed-timing-function-exit)",
|
|
11
11
|
"exitOpacity": "0"
|
|
12
12
|
},
|
|
13
|
-
/** 하단
|
|
13
|
+
/** 하단 inset을 content의 하단 패딩으로 적용합니다. */
|
|
14
14
|
"content": {
|
|
15
15
|
"color": "var(--seed-color-bg-layer-floating)",
|
|
16
|
-
/** viewport 또는 parent width에 대한 mobile content width 비율입니다. */
|
|
16
|
+
/** 좌우 inset을 뺀 viewport width 또는 parent width에 대한 mobile content width 비율입니다. content의 최대 너비도 같은 기준 너비에 이 비율을 곱해 정합니다. */
|
|
17
17
|
"widthFraction": "0.8",
|
|
18
18
|
"enterDuration": "var(--seed-duration-d6)",
|
|
19
19
|
"enterTimingFunction": "var(--seed-timing-function-enter-expressive)",
|
|
@@ -24,7 +24,7 @@ export declare const vars: {
|
|
|
24
24
|
"gap": "var(--seed-dimension-x1_5)",
|
|
25
25
|
"minHeight": "70px",
|
|
26
26
|
"paddingX": "var(--seed-dimension-x6)",
|
|
27
|
-
/** 이 값은 상단
|
|
27
|
+
/** 이 값은 상단 inset과 합산하여 적용합니다. */
|
|
28
28
|
"paddingTop": "var(--seed-dimension-x6)",
|
|
29
29
|
/** body의 하단 padding이며, 동시에 하단 scroll fog 그라데이션의 높이로도 사용됩니다. */
|
|
30
30
|
"paddingBottom": "var(--seed-dimension-x4)",
|
|
@@ -40,7 +40,7 @@ export declare const vars: {
|
|
|
40
40
|
},
|
|
41
41
|
"footer": {
|
|
42
42
|
"paddingX": "var(--seed-dimension-x6)",
|
|
43
|
-
/** 이 값은 상단
|
|
43
|
+
/** 이 값은 상단 inset과 합산하여 적용합니다. */
|
|
44
44
|
"paddingTop": "var(--seed-dimension-x4)",
|
|
45
45
|
/** body의 하단 padding이며, 동시에 하단 scroll fog 그라데이션의 높이로도 사용됩니다. */
|
|
46
46
|
"paddingBottom": "var(--seed-dimension-x6)"
|
|
@@ -72,24 +72,27 @@ export declare const vars: {
|
|
|
72
72
|
},
|
|
73
73
|
"sizeSmall": {
|
|
74
74
|
"enabled": {
|
|
75
|
-
/** 하단
|
|
75
|
+
/** 하단 inset을 content의 하단 패딩으로 적용합니다. */
|
|
76
76
|
"content": {
|
|
77
|
+
/** content 영역의 너비입니다. 패널은 붙는 쪽의 inset만큼 더 넓어지고, 늘어난 영역까지 배경으로 채워 화면 끝에 닿습니다. 소비자가 지정한 너비도 같은 방식으로 적용합니다. */
|
|
77
78
|
"width": "480px"
|
|
78
79
|
}
|
|
79
80
|
}
|
|
80
81
|
},
|
|
81
82
|
"sizeMedium": {
|
|
82
83
|
"enabled": {
|
|
83
|
-
/** 하단
|
|
84
|
+
/** 하단 inset을 content의 하단 패딩으로 적용합니다. */
|
|
84
85
|
"content": {
|
|
86
|
+
/** content 영역의 너비입니다. 패널은 붙는 쪽의 inset만큼 더 넓어지고, 늘어난 영역까지 배경으로 채워 화면 끝에 닿습니다. 소비자가 지정한 너비도 같은 방식으로 적용합니다. */
|
|
85
87
|
"width": "720px"
|
|
86
88
|
}
|
|
87
89
|
}
|
|
88
90
|
},
|
|
89
91
|
"sizeLarge": {
|
|
90
92
|
"enabled": {
|
|
91
|
-
/** 하단
|
|
93
|
+
/** 하단 inset을 content의 하단 패딩으로 적용합니다. */
|
|
92
94
|
"content": {
|
|
95
|
+
/** content 영역의 너비입니다. 패널은 붙는 쪽의 inset만큼 더 넓어지고, 늘어난 영역까지 배경으로 채워 화면 끝에 닿습니다. 소비자가 지정한 너비도 같은 방식으로 적용합니다. */
|
|
93
96
|
"width": "960px"
|
|
94
97
|
}
|
|
95
98
|
}
|