budibase/packages/bbui/src/DetailSummary/DetailSummary.svelte

92 lines
1.9 KiB
Svelte
Raw Normal View History

2021-03-31 11:59:07 +02:00
<script>
import Icon from "../Icon/Icon.svelte"
2021-03-31 11:59:07 +02:00
export let name
export let initiallyShow = false
export let collapsible = true
2021-03-31 11:59:07 +02:00
let show = initiallyShow
2021-03-31 11:59:07 +02:00
const onHeaderClick = () => {
if (!collapsible) {
return
}
2021-03-31 11:59:07 +02:00
show = !show
}
</script>
<div class="property-group-container">
{#if name}
<div class="property-group-name" on:click={onHeaderClick}>
<div class="name">{name}</div>
{#if collapsible}
<Icon size="S" name={show ? "Remove" : "Add"} />
{/if}
</div>
{/if}
<div
class="property-panel"
class:show={show || !collapsible}
class:no-title={!name}
>
2021-03-31 11:59:07 +02:00
<slot />
</div>
</div>
<style>
.property-group-container {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
border-bottom: var(--border-light);
2021-03-31 11:59:07 +02:00
}
2023-08-03 10:29:12 +02:00
.property-group-container:last-child {
border-bottom: 0px;
}
2021-03-31 11:59:07 +02:00
.property-group-name {
cursor: pointer;
display: flex;
flex-flow: row nowrap;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: var(--spacing-m) var(--spacing-xl);
color: var(--spectrum-global-color-gray-600);
transition: color 130ms ease-in-out;
}
.property-group-name:hover {
color: var(--spectrum-global-color-gray-900);
2021-03-31 11:59:07 +02:00
}
.name {
text-align: left;
font-size: var(--font-size-s);
font-weight: 600;
2021-03-31 11:59:07 +02:00
letter-spacing: 0.14px;
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
text-transform: uppercase;
2021-03-31 11:59:07 +02:00
white-space: nowrap;
user-select: none;
2021-03-31 11:59:07 +02:00
}
.property-panel {
display: none;
padding: var(--spacing-s) var(--spacing-xl) var(--spacing-xl)
var(--spacing-xl);
2021-03-31 11:59:07 +02:00
}
.property-panel.no-title {
padding-top: 0;
}
2021-03-31 11:59:07 +02:00
.show {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
gap: var(--spacing-l);
2021-03-31 11:59:07 +02:00
}
</style>