test modals with vue and modals with bootstrap

src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss

@@ -39,6 +39,8 @@ div.subheader {
   height: 130px;
 }
 
+//// VUEJS ////
+
 div.vue-component {
   padding: 1.5em;
   margin: 2em 0;
@@ -55,3 +57,60 @@ div.vue-component {
   }
   dd { margin-left: 1em; }
 }
+
+//// MODAL ////
+.modal-mask {
+   position: fixed;
+   z-index: 9998;
+   top: 0;
+   left: 0;
+   width: 100%;
+   height: 100%;
+   background-color: rgba(0, 0, 0, 0.5);
+   display: table;
+   transition: opacity 0.3s ease;
+}
+.modal-wrapper {
+   display: table-cell;
+   vertical-align: middle;
+}
+.modal-container {
+   width: 500px;
+   margin: 0px auto;
+   background-color: #fff;
+   border-radius: 0px;
+   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
+   transition: all 0.3s ease;
+   font-family: Helvetica, Arial, sans-serif;
+}
+.modal-header h2 {
+   margin-top: 0;
+   color: #42b983;
+}
+.modal-body {
+   margin: 0;
+}
+.modal-default-button {
+   display: block;
+   margin-top: 1rem;
+}
+
+/*
+* The following styles are auto-applied to elements with
+* transition="modal" when their visibility is toggled
+* by Vue.js.
+*
+* You can easily play with the modal transition by editing
+* these styles.
+*/
+.modal-enter {
+   opacity: 0;
+}
+.modal-leave-active {
+   opacity: 0;
+}
+.modal-enter .modal-container,
+.modal-leave-active .modal-container {
+   -webkit-transform: scale(1.1);
+   transform: scale(1.1);
+}