c3lf/c3lf-system-3
9
0
Fork 0
Code Issues 55 Pull requests Projects 2 Releases Wiki Activity Actions

create basic modal component

Browse source
This commit is contained in:
busti 2019-11-16 02:27:17 +01:00
parent 9c7c074305
commit 07d5b029f2
5 changed files with 66 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/Cards.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="row">
<div class="col-lg-3 col-xl-3">
<div class="col-lg-3 col-xl-2">
<div class="card bg-dark text-light mb-2" id="filters">
<div class="card-body">
<h5 class="card-title text-info">Sort & Filter</h5>

58
src/components/Modal.vue Normal file
View file

@ -0,0 +1,58 @@
<template>
<div class="modal" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content bg-dark text-light border-secondary">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<font-awesome-icon icon="window-close" class="text-light"></font-awesome-icon>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Modal'
};
</script>
<style>
.modal {
background-color: rgba(0,0,0,0.4); /* Transparent dimmed overlay */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: table !important;
}
.modal.hidden {
display: none;
}
.modal .container {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 200px;
}
.modal .body {
box-shadow: 5px 10px #888888;
display: inline-block;
background-color: white;
border: 1px solid black;
padding: 10px;
}
</style>