@citizenplane/pimp 13.0.0 → 13.1.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/pimp.es.js +4554 -4458
- package/dist/pimp.umd.js +44 -44
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/components/CpAccordion.vue +174 -0
- package/src/components/CpAccordionGroup.vue +51 -0
- package/src/components/CpBadge.vue +2 -2
- package/src/components/CpButton.vue +4 -3
- package/src/components/CpButtonGroup.vue +30 -2
- package/src/components/CpDate.vue +3 -2
- package/src/components/CpInput.vue +2 -2
- package/src/components/CpItemActions.vue +11 -9
- package/src/components/CpPartnerBadge.vue +3 -2
- package/src/components/CpSelect.vue +2 -2
- package/src/components/CpTable.vue +2 -2
- package/src/components/CpTelInput.vue +2 -2
- package/src/components/index.ts +4 -0
- package/src/constants/Sizes.ts +1 -11
- package/src/constants/index.ts +1 -1
- package/src/stories/CpAccordion.stories.ts +282 -0
- package/src/stories/CpAccordionGroup.stories.ts +223 -0
- package/src/stories/CpBadge.stories.ts +1 -3
- package/src/stories/CpButton.stories.ts +146 -145
- package/src/stories/CpInput.stories.ts +1 -3
- package/src/stories/CpPartnerBadge.stories.ts +2 -2
- package/src/stories/CpSelect.stories.ts +3 -5
- package/src/stories/CpSelectableButton.stories.ts +3 -5
- package/src/stories/documentationStyles.ts +16 -0
|
@@ -1,11 +1,19 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/vue3'
|
|
2
2
|
|
|
3
3
|
import { ButtonAppearances } from '@/constants/Button'
|
|
4
|
-
import { Sizes } from '@/constants/Sizes'
|
|
5
4
|
|
|
6
5
|
import CpButton from '@/components/CpButton.vue'
|
|
7
6
|
import CpIcon from '@/components/CpIcon.vue'
|
|
8
7
|
|
|
8
|
+
import {
|
|
9
|
+
docCellStyle,
|
|
10
|
+
docLabelStyle,
|
|
11
|
+
docPageStyle,
|
|
12
|
+
docRowWrapStyle,
|
|
13
|
+
docSectionStyle,
|
|
14
|
+
docTitleStyle,
|
|
15
|
+
} from '@/stories/documentationStyles'
|
|
16
|
+
|
|
9
17
|
const meta = {
|
|
10
18
|
title: 'CpButton',
|
|
11
19
|
component: CpButton,
|
|
@@ -63,14 +71,6 @@ const defaultRender = (args: (typeof CpButton)['props']) => ({
|
|
|
63
71
|
template: defaultTemplate,
|
|
64
72
|
})
|
|
65
73
|
|
|
66
|
-
const docSectionStyle =
|
|
67
|
-
'background: #fff; border-radius: 8px; padding: 20px; margin-bottom: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.08);'
|
|
68
|
-
const docTitleStyle =
|
|
69
|
-
'margin: 0 0 16px 0; font-size: 12px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em;'
|
|
70
|
-
const docRowStyle = 'display: flex; flex-wrap: wrap; gap: 24px 32px; align-items: flex-end;'
|
|
71
|
-
const docCellStyle = 'display: flex; flex-direction: column; gap: 8px; align-items: flex-start;'
|
|
72
|
-
const docLabelStyle = 'font-size: 12px; color: #6b7280;'
|
|
73
|
-
|
|
74
74
|
export const Documentation: Story = {
|
|
75
75
|
args: {},
|
|
76
76
|
render: () => ({
|
|
@@ -78,143 +78,144 @@ export const Documentation: Story = {
|
|
|
78
78
|
setup: () => ({}),
|
|
79
79
|
template: `
|
|
80
80
|
<div>
|
|
81
|
-
<div style="
|
|
82
|
-
<h1 style="margin: 0 0 32px 0; font-size: 28px; font-weight: 700; color: #111;">
|
|
81
|
+
<div style="${docPageStyle}">
|
|
82
|
+
<h1 style="margin: 0 0 32px 0; font-size: 28px; font-weight: 700; color: #111;">CpButton</h1>
|
|
83
83
|
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
84
|
+
<section style="${docSectionStyle}">
|
|
85
|
+
<h2 style="${docTitleStyle}">Size</h2>
|
|
86
|
+
<div style="${docRowWrapStyle}">
|
|
87
|
+
<div style="${docCellStyle}">
|
|
88
|
+
<span style="${docLabelStyle}">2xs</span>
|
|
89
|
+
<CpButton color="accent" size="2xs">Default button</CpButton>
|
|
90
|
+
</div>
|
|
91
|
+
<div style="${docCellStyle}">
|
|
92
|
+
<span style="${docLabelStyle}">xs</span>
|
|
93
|
+
<CpButton color="accent" size="xs">Default button</CpButton>
|
|
94
|
+
</div>
|
|
95
|
+
<div style="${docCellStyle}">
|
|
96
|
+
<span style="${docLabelStyle}">sm</span>
|
|
97
|
+
<CpButton color="accent" size="sm">Default button</CpButton>
|
|
98
|
+
</div>
|
|
99
|
+
<div style="${docCellStyle}">
|
|
100
|
+
<span style="${docLabelStyle}">md</span>
|
|
101
|
+
<CpButton color="accent" size="md">Default button</CpButton>
|
|
102
|
+
</div>
|
|
103
|
+
<div style="${docCellStyle}">
|
|
104
|
+
<span style="${docLabelStyle}">lg</span>
|
|
105
|
+
<CpButton color="accent" size="lg">Default button</CpButton>
|
|
106
|
+
</div>
|
|
106
107
|
</div>
|
|
107
|
-
</
|
|
108
|
-
</section>
|
|
108
|
+
</section>
|
|
109
109
|
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
110
|
+
<section style="${docSectionStyle}">
|
|
111
|
+
<h2 style="${docTitleStyle}">Color</h2>
|
|
112
|
+
<div style="${docRowWrapStyle}">
|
|
113
|
+
<div style="${docCellStyle}">
|
|
114
|
+
<span style="${docLabelStyle}">neutral</span>
|
|
115
|
+
<CpButton color="neutral">Default button</CpButton>
|
|
116
|
+
</div>
|
|
117
|
+
<div style="${docCellStyle}">
|
|
118
|
+
<span style="${docLabelStyle}">accent</span>
|
|
119
|
+
<CpButton color="accent">Default button</CpButton>
|
|
120
|
+
</div>
|
|
121
|
+
<div style="${docCellStyle}">
|
|
122
|
+
<span style="${docLabelStyle}">error</span>
|
|
123
|
+
<CpButton color="error">Default button</CpButton>
|
|
124
|
+
</div>
|
|
125
|
+
<div style="${docCellStyle}">
|
|
126
|
+
<span style="${docLabelStyle}">warning</span>
|
|
127
|
+
<CpButton color="warning">Default button</CpButton>
|
|
128
|
+
</div>
|
|
129
|
+
<div style="${docCellStyle}">
|
|
130
|
+
<span style="${docLabelStyle}">success</span>
|
|
131
|
+
<CpButton color="success">Default button</CpButton>
|
|
132
|
+
</div>
|
|
132
133
|
</div>
|
|
133
|
-
</
|
|
134
|
-
</section>
|
|
134
|
+
</section>
|
|
135
135
|
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
136
|
+
<section style="${docSectionStyle}">
|
|
137
|
+
<h2 style="${docTitleStyle}">State</h2>
|
|
138
|
+
<div style="${docRowWrapStyle}">
|
|
139
|
+
<div style="${docCellStyle}">
|
|
140
|
+
<span style="${docLabelStyle}">default</span>
|
|
141
|
+
<CpButton color="accent">Default button</CpButton>
|
|
142
|
+
</div>
|
|
143
|
+
<div style="${docCellStyle}">
|
|
144
|
+
<span style="${docLabelStyle}">disabled</span>
|
|
145
|
+
<CpButton color="accent" :disabled="true">Default button</CpButton>
|
|
146
|
+
</div>
|
|
146
147
|
</div>
|
|
147
|
-
</
|
|
148
|
-
</section>
|
|
148
|
+
</section>
|
|
149
149
|
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
150
|
+
<section style="${docSectionStyle}">
|
|
151
|
+
<h2 style="${docTitleStyle}">Squared</h2>
|
|
152
|
+
<div style="${docRowWrapStyle}">
|
|
153
|
+
<div style="${docCellStyle}">
|
|
154
|
+
<span style="${docLabelStyle}">false</span>
|
|
155
|
+
<CpButton color="accent" :is-square="false">Default button</CpButton>
|
|
156
|
+
</div>
|
|
157
|
+
<div style="${docCellStyle}">
|
|
158
|
+
<span style="${docLabelStyle}">true</span>
|
|
159
|
+
<CpButton color="accent" :is-square="true">Default button</CpButton>
|
|
160
|
+
</div>
|
|
160
161
|
</div>
|
|
161
|
-
</
|
|
162
|
-
</section>
|
|
162
|
+
</section>
|
|
163
163
|
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
164
|
+
<section style="${docSectionStyle}">
|
|
165
|
+
<h2 style="${docTitleStyle}">Style</h2>
|
|
166
|
+
<div style="${docRowWrapStyle}">
|
|
167
|
+
<div style="${docCellStyle}">
|
|
168
|
+
<span style="${docLabelStyle}">primary</span>
|
|
169
|
+
<CpButton color="accent">Default button</CpButton>
|
|
170
|
+
</div>
|
|
171
|
+
<div style="${docCellStyle}">
|
|
172
|
+
<span style="${docLabelStyle}">secondary</span>
|
|
173
|
+
<CpButton appearance="secondary" color="accent">Default button</CpButton>
|
|
174
|
+
</div>
|
|
175
|
+
<div style="${docCellStyle}">
|
|
176
|
+
<span style="${docLabelStyle}">tertiary</span>
|
|
177
|
+
<CpButton appearance="tertiary" color="accent">Default button</CpButton>
|
|
178
|
+
</div>
|
|
178
179
|
</div>
|
|
179
|
-
</
|
|
180
|
-
</section>
|
|
180
|
+
</section>
|
|
181
181
|
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
182
|
+
<section style="${docSectionStyle}">
|
|
183
|
+
<h2 style="${docTitleStyle}">Icon</h2>
|
|
184
|
+
<div style="${docRowWrapStyle}">
|
|
185
|
+
<div style="${docCellStyle}">
|
|
186
|
+
<span style="${docLabelStyle}">—</span>
|
|
187
|
+
<CpButton color="accent">Default button</CpButton>
|
|
188
|
+
</div>
|
|
189
|
+
<div style="${docCellStyle}">
|
|
190
|
+
<span style="${docLabelStyle}">leading</span>
|
|
191
|
+
<CpButton color="accent">
|
|
192
|
+
<template #leading-icon><CpIcon type="plus" /></template>
|
|
193
|
+
Default button
|
|
194
|
+
</CpButton>
|
|
195
|
+
</div>
|
|
196
|
+
<div style="${docCellStyle}">
|
|
197
|
+
<span style="${docLabelStyle}">leading + trailing</span>
|
|
198
|
+
<CpButton color="accent">
|
|
199
|
+
<template #leading-icon><CpIcon type="plus" /></template>
|
|
200
|
+
Default button
|
|
201
|
+
<template #trailing-icon><CpIcon type="plus" /></template>
|
|
202
|
+
</CpButton>
|
|
203
|
+
</div>
|
|
204
|
+
<div style="${docCellStyle}">
|
|
205
|
+
<span style="${docLabelStyle}">trailing</span>
|
|
206
|
+
<CpButton color="accent">
|
|
207
|
+
Default button
|
|
208
|
+
<template #trailing-icon><CpIcon type="plus" /></template>
|
|
209
|
+
</CpButton>
|
|
210
|
+
</div>
|
|
210
211
|
</div>
|
|
211
|
-
</
|
|
212
|
-
</section>
|
|
212
|
+
</section>
|
|
213
213
|
</div>
|
|
214
214
|
</div>
|
|
215
215
|
`,
|
|
216
216
|
}),
|
|
217
217
|
parameters: {
|
|
218
|
+
controls: { disable: true },
|
|
218
219
|
docs: {
|
|
219
220
|
source: {
|
|
220
221
|
code: null,
|
|
@@ -339,11 +340,11 @@ export const Secondary = createAppearanceVariantsStory('secondary')
|
|
|
339
340
|
export const Tertiary = createAppearanceVariantsStory('tertiary')
|
|
340
341
|
|
|
341
342
|
const withIconsSizes = [
|
|
342
|
-
{ value:
|
|
343
|
-
{ value:
|
|
344
|
-
{ value:
|
|
345
|
-
{ value:
|
|
346
|
-
{ value:
|
|
343
|
+
{ value: '2xs', label: '2xs' },
|
|
344
|
+
{ value: 'xs', label: 'xs' },
|
|
345
|
+
{ value: 'sm', label: 'sm' },
|
|
346
|
+
{ value: 'md', label: 'md' },
|
|
347
|
+
{ value: 'lg', label: 'lg' },
|
|
347
348
|
] as const
|
|
348
349
|
|
|
349
350
|
export const WithIcons: Story = {
|
|
@@ -411,11 +412,11 @@ export const Loading: Story = {
|
|
|
411
412
|
}
|
|
412
413
|
|
|
413
414
|
const iconOnlySizes = [
|
|
414
|
-
{ value:
|
|
415
|
-
{ value:
|
|
416
|
-
{ value:
|
|
417
|
-
{ value:
|
|
418
|
-
{ value:
|
|
415
|
+
{ value: '2xs', label: '2xs' },
|
|
416
|
+
{ value: 'xs', label: 'xs' },
|
|
417
|
+
{ value: 'sm', label: 'sm' },
|
|
418
|
+
{ value: 'md', label: 'md' },
|
|
419
|
+
{ value: 'lg', label: 'lg' },
|
|
419
420
|
] as const
|
|
420
421
|
|
|
421
422
|
/** Icon-only appearances (inverse excluded for this story). */
|
|
@@ -441,17 +442,17 @@ export const IconOnly: Story = {
|
|
|
441
442
|
semanticButtonColors,
|
|
442
443
|
docSectionStyle,
|
|
443
444
|
docTitleStyle,
|
|
444
|
-
|
|
445
|
+
docRowWrapStyle,
|
|
445
446
|
docCellStyle,
|
|
446
447
|
docLabelStyle,
|
|
447
448
|
}),
|
|
448
449
|
template: `
|
|
449
|
-
<div style="
|
|
450
|
+
<div style="${docPageStyle}">
|
|
450
451
|
<h1 style="margin: 0 0 32px 0; font-size: 28px; font-weight: 700; color: #111;">Icon Button</h1>
|
|
451
452
|
|
|
452
453
|
<section style="${docSectionStyle}">
|
|
453
454
|
<h2 style="${docTitleStyle}">Size</h2>
|
|
454
|
-
<div style="${
|
|
455
|
+
<div style="${docRowWrapStyle}">
|
|
455
456
|
<div
|
|
456
457
|
v-for="s in iconOnlySizes"
|
|
457
458
|
:key="s.value"
|
|
@@ -467,7 +468,7 @@ export const IconOnly: Story = {
|
|
|
467
468
|
|
|
468
469
|
<section style="${docSectionStyle}">
|
|
469
470
|
<h2 style="${docTitleStyle}">Color</h2>
|
|
470
|
-
<div style="${
|
|
471
|
+
<div style="${docRowWrapStyle}">
|
|
471
472
|
<div
|
|
472
473
|
v-for="c in semanticButtonColors"
|
|
473
474
|
:key="c.value"
|
|
@@ -483,7 +484,7 @@ export const IconOnly: Story = {
|
|
|
483
484
|
|
|
484
485
|
<section style="${docSectionStyle}">
|
|
485
486
|
<h2 style="${docTitleStyle}">Squared</h2>
|
|
486
|
-
<div style="${
|
|
487
|
+
<div style="${docRowWrapStyle}">
|
|
487
488
|
<div style="${docCellStyle}">
|
|
488
489
|
<span style="${docLabelStyle}">false</span>
|
|
489
490
|
<CpButton v-bind="args" :is-square="false">
|
|
@@ -501,7 +502,7 @@ export const IconOnly: Story = {
|
|
|
501
502
|
|
|
502
503
|
<section style="${docSectionStyle}">
|
|
503
504
|
<h2 style="${docTitleStyle}">Style</h2>
|
|
504
|
-
<div style="${
|
|
505
|
+
<div style="${docRowWrapStyle}">
|
|
505
506
|
<div
|
|
506
507
|
v-for="a in iconOnlyAppearances"
|
|
507
508
|
:key="a.value"
|
|
@@ -5,8 +5,6 @@ import type { Meta, StoryObj } from '@storybook/vue3'
|
|
|
5
5
|
import CpIcon from '@/components/CpIcon.vue'
|
|
6
6
|
import CpInput from '@/components/CpInput.vue'
|
|
7
7
|
|
|
8
|
-
import { Sizes } from '@/constants'
|
|
9
|
-
|
|
10
8
|
const meta = {
|
|
11
9
|
title: 'CpInput',
|
|
12
10
|
component: CpInput,
|
|
@@ -63,7 +61,7 @@ export const Default: Story = {
|
|
|
63
61
|
args: {
|
|
64
62
|
label: 'Input Label',
|
|
65
63
|
placeholder: 'Enter text here',
|
|
66
|
-
size:
|
|
64
|
+
size: 'md',
|
|
67
65
|
type: 'text',
|
|
68
66
|
required: false,
|
|
69
67
|
disabled: false,
|
|
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/vue3'
|
|
|
2
2
|
|
|
3
3
|
import CpPartnerBadge from '@/components/CpPartnerBadge.vue'
|
|
4
4
|
|
|
5
|
-
import { PartnerTypes
|
|
5
|
+
import { PartnerTypes } from '@/constants'
|
|
6
6
|
|
|
7
7
|
const meta = {
|
|
8
8
|
title: 'CpPartnerBadge',
|
|
@@ -27,7 +27,7 @@ const meta = {
|
|
|
27
27
|
},
|
|
28
28
|
size: {
|
|
29
29
|
control: 'select',
|
|
30
|
-
options:
|
|
30
|
+
options: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'],
|
|
31
31
|
description: 'The size of the badge',
|
|
32
32
|
table: {
|
|
33
33
|
type: { summary: 'string' },
|
|
@@ -5,8 +5,6 @@ import type { Meta, StoryObj } from '@storybook/vue3'
|
|
|
5
5
|
import CpInput from '@/components/CpInput.vue'
|
|
6
6
|
import CpSelect from '@/components/CpSelect.vue'
|
|
7
7
|
|
|
8
|
-
import { Sizes } from '@/constants'
|
|
9
|
-
|
|
10
8
|
const meta = {
|
|
11
9
|
title: 'CpSelect',
|
|
12
10
|
component: CpSelect,
|
|
@@ -91,7 +89,7 @@ export const Default: Story = {
|
|
|
91
89
|
disabled: false,
|
|
92
90
|
isInvalid: false,
|
|
93
91
|
errorMessage: '',
|
|
94
|
-
size:
|
|
92
|
+
size: 'md',
|
|
95
93
|
autocomplete: 'on',
|
|
96
94
|
name: 'select-field',
|
|
97
95
|
},
|
|
@@ -137,14 +135,14 @@ export const Disabled: Story = {
|
|
|
137
135
|
export const Small: Story = {
|
|
138
136
|
args: {
|
|
139
137
|
...Default.args,
|
|
140
|
-
size:
|
|
138
|
+
size: 'sm',
|
|
141
139
|
},
|
|
142
140
|
}
|
|
143
141
|
|
|
144
142
|
export const Large: Story = {
|
|
145
143
|
args: {
|
|
146
144
|
...Default.args,
|
|
147
|
-
size:
|
|
145
|
+
size: 'lg',
|
|
148
146
|
},
|
|
149
147
|
}
|
|
150
148
|
|
|
@@ -4,8 +4,6 @@ import type { Meta, StoryObj } from '@storybook/vue3'
|
|
|
4
4
|
|
|
5
5
|
import CpSelectableButton from '@/components/CpSelectableButton.vue'
|
|
6
6
|
|
|
7
|
-
import { Sizes } from '@/constants'
|
|
8
|
-
|
|
9
7
|
const meta = {
|
|
10
8
|
title: 'CpSelectableButton',
|
|
11
9
|
component: CpSelectableButton,
|
|
@@ -45,7 +43,7 @@ type Story = StoryObj<typeof meta>
|
|
|
45
43
|
export const Default: Story = {
|
|
46
44
|
args: {
|
|
47
45
|
appearance: 'primary',
|
|
48
|
-
size:
|
|
46
|
+
size: 'md',
|
|
49
47
|
disabled: false,
|
|
50
48
|
label: 'Label',
|
|
51
49
|
isSelected: false,
|
|
@@ -69,7 +67,7 @@ export const Default: Story = {
|
|
|
69
67
|
export const WithIcons: Story = {
|
|
70
68
|
args: {
|
|
71
69
|
appearance: 'primary',
|
|
72
|
-
size:
|
|
70
|
+
size: 'md',
|
|
73
71
|
disabled: false,
|
|
74
72
|
label: 'Label',
|
|
75
73
|
isSelected: false,
|
|
@@ -100,7 +98,7 @@ export const WithIcons: Story = {
|
|
|
100
98
|
export const FullWidth: Story = {
|
|
101
99
|
args: {
|
|
102
100
|
appearance: 'secondary',
|
|
103
|
-
size:
|
|
101
|
+
size: 'md',
|
|
104
102
|
disabled: false,
|
|
105
103
|
label: 'Label',
|
|
106
104
|
isSelected: true,
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
export const docPageStyle =
|
|
2
|
+
'padding: 24px; background: #f3f4f6; min-height: 100vh; width: 70vw; box-sizing: border-box;'
|
|
3
|
+
|
|
4
|
+
export const docSectionStyle =
|
|
5
|
+
'background: #fff; border-radius: 8px; padding: 24px; margin-bottom: 28px; box-shadow: 0 1px 3px rgba(0,0,0,0.08);'
|
|
6
|
+
|
|
7
|
+
export const docTitleStyle =
|
|
8
|
+
'margin: 0 0 16px 0; font-size: 12px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em;'
|
|
9
|
+
|
|
10
|
+
export const docRowWrapStyle = 'display: flex; flex-wrap: wrap; gap: 24px 32px; align-items: flex-end;'
|
|
11
|
+
|
|
12
|
+
export const docRowColumnStyle = 'display: flex; flex-direction: column; gap: 24px;'
|
|
13
|
+
|
|
14
|
+
export const docCellStyle = 'display: flex; flex-direction: column; gap: 10px; align-items: flex-start;'
|
|
15
|
+
|
|
16
|
+
export const docLabelStyle = 'font-size: 12px; color: #6b7280;'
|