Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | <template lang="pug">
.b-sidebar-item.position-relative
router-link(v-if='path' v-slot='{ navigate }' :to='{ path: path, query: $route.query }')
button.list-group-item.list-group-item-action.b-clickable.my-1(role='tab' @click='navigate'
:class='{ active, "bg-transparent": isDisabled, "text-muted": isDisabled }'
:disabled='isDisabled' :aria-disabled='isDisabled')
slot
button.list-group-item.list-group-item-action.b-clickable.my-1(v-else role='tab'
:class='{ active, "bg-transparent": isDisabled, "text-muted": isDisabled }'
:disabled='isDisabled' :aria-disabled='isDisabled')
slot
.b-back-border(:class='{ active, "bg-transparent": isDisabled }')
</template>
<script>
export { default } from "./BaseSideBarItem.vue.js";
</script>
<style lang="scss">
.b-sidebar-item {
.list-group-item {
transition-duration: 0.3s;
width: 102%;
border-radius: 0.25em 0 0 0.25em !important;
z-index: 10;
box-shadow: .1rem .5rem .5rem -.1rem rgba(0, 0, 0, 0.175) !important;
}
.b-back-border {
width: 2%;
height: 20%;
transform: skewY(-45deg);
background-color: #A0A0A0;
z-index: 0;
position: absolute;
right: -2%;
bottom: 0;
border-bottom: 1px solid #DFDFDF;
border-right: 1px solid #DFDFDF;
overflow: visible;
&.active {
border-bottom: none;
border-right: none;
background-color: #405F80;
}
}
}
</style>
|