39 lines
767 B
Vue
39 lines
767 B
Vue
<script setup lang="ts">
|
|
const props = defineProps({
|
|
selected: Boolean,
|
|
});
|
|
</script>
|
|
<template>
|
|
<div class="tab" :class="{ selected: props.selected }">
|
|
<slot />
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.tab {
|
|
background-color: var(--color-brand-ul-medium-grey);
|
|
border: none;
|
|
font-weight: bold;
|
|
|
|
border: 1px solid #000000;
|
|
border-top-right-radius: 10px;
|
|
border-bottom-right-radius: 10px;
|
|
border-left: none;
|
|
background: lightgray;
|
|
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
|
}
|
|
|
|
.tab.selected {
|
|
background-color: var(--color-brand-ul-red);
|
|
}
|
|
|
|
.vertical-tabs .tab {
|
|
width: 100%;
|
|
padding: 1rem;
|
|
text-align: right;
|
|
}
|
|
|
|
.vertical-tabs .tab:not(:last-child) {
|
|
margin-bottom: 0.3rem;
|
|
}
|
|
</style>
|