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