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

87 lines
1.7 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
import { createEventDispatcher } from "svelte"
const dispatch = createEventDispatcher()
export let thin = false
export let name,
show = false
const onHeaderClick = () => {
show = !show
if (show) {
dispatch("open")
}
}
</script>
<div class="property-group-container" class:thin>
<div class="property-group-name" on:click={onHeaderClick}>
<div class:thin class="name">{name}</div>
2021-03-31 11:59:07 +02:00
<div class="icon">
2021-04-27 16:30:13 +02:00
<Icon size="S" name={show ? "Remove" : "Add"} />
2021-03-31 11:59:07 +02:00
</div>
</div>
<div class="property-panel" class:show>
<slot />
</div>
</div>
<style>
.property-group-container {
display: flex;
flex-direction: column;
height: auto;
justify-content: center;
border-radius: var(--border-radius-m);
font-family: var(--font-sans);
}
.property-group-name {
cursor: pointer;
display: flex;
flex-flow: row nowrap;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.name {
text-align: left;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.14px;
color: var(--ink);
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
text-transform: capitalize;
2021-03-31 11:59:07 +02:00
white-space: nowrap;
user-select: none;
2021-03-31 11:59:07 +02:00
}
.name.thin {
font-size: var(--spectrum-global-dimension-font-size-75);
2021-03-31 11:59:07 +02:00
}
.icon {
flex: 0 0 20px;
text-align: center;
}
.property-panel {
/* height: 0px;
overflow: hidden; */
display: none;
}
.show {
/* overflow: auto;
height: auto; */
display: flex;
flex-direction: column;
flex: 1;
margin-top: var(--spacing-m);
}
</style>