JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/satellite: added new common VModal component

Browse Source 
Added new wrapper component for all the other modals to reuse.

Change-Id: I499dc74304775a2b853dd051e324492b4b964a97
This commit is contained in:
Vitalii 2022-05-23 14:47:43 +03:00
parent 5e8266d1de
commit fcb39b4a0f
1 changed files with 70 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
web/satellite/src/components/common/VModal.vue Normal file
View File

@ -0,0 +1,70 @@
// Copyright (C) 2022 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<div class="mask">
<div class="mask__wrapper">
<div class="mask__wrapper__container">
<slot name="content" />
<div class="mask__wrapper__container__close" @click="onClose">
<CloseCrossIcon />
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import CloseCrossIcon from '@/../static/images/common/closeCross.svg';
// @vue/component
@Component({
components: {
CloseCrossIcon,
}
})
export default class VModal extends Vue {
@Prop({default: () => () => {}})
public readonly onClose: () => void;
}
</script>
<style scoped lang="scss">
.mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
background: rgb(27 37 51 / 75%);
&__wrapper {
height: calc(100% - 40px);
max-height: calc(100vh - 40px);
overflow-y: auto;
text-align: center;
padding: 20px 0;
&__container {
display: inline-block;
position: relative;
background: #fff;
border-radius: 20px;
box-shadow: 0 0 32px rgb(0 0 0 / 4%);
&__close {
display: flex;
position: absolute;
right: 30px;
top: 30px;
height: 24px;
width: 24px;
cursor: pointer;
}
}
}
}
</style>