File size: 1,632 Bytes
2409829 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
<script lang="ts">
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
import TextButton from "@graphite/components/widgets/buttons/TextButton.svelte";
export let labels: string[];
export let disabled = false;
export let tooltip: string | undefined = undefined;
// Callbacks
export let action: (index: number) => void;
</script>
<LayoutRow class="breadcrumb-trail-buttons" {tooltip}>
{#each labels as label, index}
<TextButton {label} emphasized={index === labels.length - 1} {disabled} action={() => !disabled && index !== labels.length - 1 && action(index)} />
{/each}
</LayoutRow>
<style lang="scss" global>
.breadcrumb-trail-buttons {
.text-button {
position: relative;
&:not(:first-of-type) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
&::before {
content: "";
position: absolute;
top: 0;
left: -4px;
width: 0;
height: 0;
border-style: solid;
border-width: 12px 0 12px 4px;
border-color: var(--button-background-color) var(--button-background-color) var(--button-background-color) transparent;
}
}
&:not(:last-of-type) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
&::after {
content: "";
position: absolute;
top: 0;
right: -4px;
width: 0;
height: 0;
border-style: solid;
border-width: 12px 0 12px 4px;
border-color: transparent transparent transparent var(--button-background-color);
}
}
&:last-of-type {
// Make this non-functional button not change color on hover
pointer-events: none;
}
}
}
</style>
|