92 lines
1.7 KiB
Vue
92 lines
1.7 KiB
Vue
<template>
|
|
<b-sidebar
|
|
class="side-view no-events-container"
|
|
v-bind="$attrs" v-on="$listeners"
|
|
no-header
|
|
:id="id"
|
|
:body-class="{ paddings: !noCross }"
|
|
backdrop backdrop-variant="light"
|
|
>
|
|
<template #default="{ hide, visible }">
|
|
<div v-if="!noCross" class="btn-close-wrapper">
|
|
<button-close @click="hide()" />
|
|
</div>
|
|
<slot name="default" v-bind="{ hide, visible }" />
|
|
</template>
|
|
</b-sidebar>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'SideView',
|
|
|
|
props: {
|
|
id: { type: String, required: true },
|
|
noCross: { type: Boolean, default: false }
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.side-view {
|
|
position: absolute;
|
|
height: 100%;
|
|
|
|
::v-deep {
|
|
.b-sidebar {
|
|
position: absolute;
|
|
background-color: red;
|
|
width: auto;
|
|
|
|
@media (orientation: portrait) {
|
|
width: 100%;
|
|
}
|
|
|
|
@media (orientation: landscape) {
|
|
max-width: 50%;
|
|
|
|
&:not(.b-sidebar-right) {
|
|
border-right: $line;
|
|
}
|
|
|
|
&.b-sidebar-right {
|
|
border-left: $line;
|
|
}
|
|
}
|
|
}
|
|
|
|
.b-sidebar-body.paddings {
|
|
padding: $node-view-spacer-sm-y $node-view-spacer-sm-x;
|
|
@include media-breakpoint-up($layout-bp) {
|
|
padding: $node-view-spacer-y $node-view-spacer-x;
|
|
}
|
|
}
|
|
|
|
.b-sidebar-backdrop {
|
|
opacity: 0.3;
|
|
}
|
|
}
|
|
|
|
.btn-close-wrapper {
|
|
position: sticky;
|
|
z-index: 2;
|
|
height: 1.75rem;
|
|
width: 1.75rem;
|
|
top: 0;
|
|
right: 0;
|
|
float: right;
|
|
margin-top: -1rem;
|
|
|
|
.btn-close {
|
|
position: absolute;
|
|
padding: 0.5rem;
|
|
width: 2.25rem;
|
|
height: 2.25rem;
|
|
top: -.5rem;
|
|
right: -.5rem;
|
|
background-color: $white;
|
|
}
|
|
}
|
|
}
|
|
</style>
|