thepaperpilot/chromatic-lattice
1
0
Fork 0
Code Issues Pull requests Releases Activity Actions

Fixed collapsibles having wrong width on buttons + collapsed content

Browse source
This commit is contained in:
thepaperpilot 2022-05-20 00:55:55 -05:00
parent 0ead4e8ce0
commit 061b4f24da
1 changed files with 19 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/components/layout/Collapsible.vue
View file

@ -1,5 +1,5 @@
<template>
<Col style="width: 100%">
<Col class="collapsible-container">
<button @click="collapsed.value = !collapsed.value" class="feature collapsible-toggle">
<component :is="displayComponent" />
</button>
@ -24,14 +24,31 @@ const contentComponent = computed(() => coerceComponent(props.content));
</script>
<style scoped>
.collapsible-toggle {
.collapsible-container {
width: calc(100% - 10px);
}
.collapsible-toggle {
max-width: unset;
width: calc(100% + 0px);
margin: 0;
margin-left: -5px;
background: var(--raised-background);
padding: var(--feature-margin);
color: var(--foreground);
cursor: pointer;
}
.collapsible-toggle:last-child {
margin-left: unset;
}
:deep(.collapsible-toggle + .table) {
max-width: unset;
width: calc(100% + 10px);
margin-left: -5px;
}
:deep(.col) {
margin-top: 0;
margin-bottom: 0;