@citizenplane/pimp 18.9.30 → 18.9.32
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/CpMenu.vue.d.ts +4 -2
- package/dist/components/CpMenu.vue.d.ts.map +1 -1
- package/dist/components/CpSelectableButton.vue.d.ts.map +1 -1
- package/dist/pimp.es.js +545 -545
- package/dist/pimp.umd.js +14 -14
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/components/CpMenu.vue +13 -2
- package/src/components/CpSelectableButton.vue +4 -2
- package/src/components/CpTableFooter.vue +1 -1
- package/src/stories/CpMenu.stories.ts +3 -0
package/package.json
CHANGED
|
@@ -39,9 +39,12 @@
|
|
|
39
39
|
@hide="onHide"
|
|
40
40
|
>
|
|
41
41
|
<div class="cpMenu__drawerToolbar">
|
|
42
|
+
<div class="cpMenu__drawerToolbarTitle">
|
|
43
|
+
<slot name="title" />
|
|
44
|
+
</div>
|
|
42
45
|
<cp-button
|
|
43
46
|
ref="closeButton"
|
|
44
|
-
appearance="
|
|
47
|
+
appearance="secondary"
|
|
45
48
|
aria-label="Close drawer"
|
|
46
49
|
color="neutral"
|
|
47
50
|
is-square
|
|
@@ -275,8 +278,16 @@ defineExpose({ show, hide, toggle })
|
|
|
275
278
|
|
|
276
279
|
&__drawerToolbar {
|
|
277
280
|
display: flex;
|
|
278
|
-
|
|
281
|
+
align-items: center;
|
|
282
|
+
justify-content: space-between;
|
|
279
283
|
padding: var(--cp-spacing-md) var(--cp-spacing-xl);
|
|
280
284
|
}
|
|
285
|
+
|
|
286
|
+
&__drawerToolbarTitle {
|
|
287
|
+
color: var(--cp-text-secondary);
|
|
288
|
+
font-size: var(--cp-text-size-lg);
|
|
289
|
+
font-weight: 500;
|
|
290
|
+
line-height: var(--cp-line-height-lg);
|
|
291
|
+
}
|
|
281
292
|
}
|
|
282
293
|
</style>
|
|
@@ -190,13 +190,15 @@ const dynamicClasses = computed(() => {
|
|
|
190
190
|
}
|
|
191
191
|
|
|
192
192
|
&--xs {
|
|
193
|
+
$radius: fn.px-to-rem(5);
|
|
194
|
+
|
|
193
195
|
--cp-selectable-border-padding: var(--cp-spacing-xs);
|
|
194
196
|
--cp-selectable-border-radius: var(--cp-radius-md);
|
|
195
197
|
--cp-selectable-font-size: var(--cp-text-size-sm);
|
|
196
198
|
--cp-selectable-line-height: var(--cp-line-height-sm);
|
|
197
199
|
--cp-selectable-body-padding: var(--cp-spacing-xs) var(--cp-spacing-sm);
|
|
198
200
|
--cp-selectable-body-gap: var(--cp-spacing-sm);
|
|
199
|
-
--cp-selectable-body-border-radius:
|
|
201
|
+
--cp-selectable-body-border-radius: #{$radius};
|
|
200
202
|
--cp-selectable-icon-size: var(--cp-dimensions-4);
|
|
201
203
|
}
|
|
202
204
|
|
|
@@ -260,7 +262,7 @@ const dynamicClasses = computed(() => {
|
|
|
260
262
|
--cp-selectable-border-color: var(--cp-border-soft);
|
|
261
263
|
--cp-selectable-border-color-hover: var(--cp-border-soft-hover);
|
|
262
264
|
--cp-selectable-text-color: var(--cp-foreground-primary);
|
|
263
|
-
--cp-selectable-text-color-hover: var(--cp-foreground-primary
|
|
265
|
+
--cp-selectable-text-color-hover: var(--cp-foreground-primary);
|
|
264
266
|
--cp-selectable-background-color: var(--cp-background-primary);
|
|
265
267
|
--cp-selectable-background-color-hover: var(--cp-background-primary-hover);
|
|
266
268
|
--cp-selectable-body-background-color: transparent;
|
|
@@ -166,6 +166,9 @@ export const FullHeightDrawer: Story = {
|
|
|
166
166
|
<template #trigger>
|
|
167
167
|
<CpButton size="xs" appearance="secondary">Open drawer</CpButton>
|
|
168
168
|
</template>
|
|
169
|
+
<template #title>
|
|
170
|
+
<CpHeading heading-level="h4">Title</CpHeading>
|
|
171
|
+
</template>
|
|
169
172
|
</CpMenu>
|
|
170
173
|
`,
|
|
171
174
|
}),
|