|
@@ -1,6 +1,11 @@
|
|
|
<template>
|
|
<template>
|
|
|
<div class='modal_window__overlay' :class='{"modal_window--show": value}' @click.self='closeModal'>
|
|
<div class='modal_window__overlay' :class='{"modal_window--show": value}' @click.self='closeModal'>
|
|
|
<div class='modal_window' :class='{"modal_window--show": value}' :style='{"width": width || "20rem"}'>
|
|
<div class='modal_window' :class='{"modal_window--show": value}' :style='{"width": width || "20rem"}'>
|
|
|
|
|
+ <span
|
|
|
|
|
+ class='modal_window__close fa fa-times'
|
|
|
|
|
+ @click='closeModal'
|
|
|
|
|
+ v-if='closeButton'
|
|
|
|
|
+ ></span>
|
|
|
<slot></slot>
|
|
<slot></slot>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
@@ -9,7 +14,7 @@
|
|
|
<script>
|
|
<script>
|
|
|
export default {
|
|
export default {
|
|
|
name: 'ModalWindow',
|
|
name: 'ModalWindow',
|
|
|
- props: ['value', 'width'],
|
|
|
|
|
|
|
+ props: ['value', 'width', 'close-button'],
|
|
|
methods: {
|
|
methods: {
|
|
|
closeModal () {
|
|
closeModal () {
|
|
|
this.$emit('input', false)
|
|
this.$emit('input', false)
|
|
@@ -57,6 +62,19 @@
|
|
|
|
|
|
|
|
transition: margin-top 0.3s, opacity 0.3s, transform 0.3s;
|
|
transition: margin-top 0.3s, opacity 0.3s, transform 0.3s;
|
|
|
|
|
|
|
|
|
|
+ @at-root #{&}__close {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ right: 0.7rem;
|
|
|
|
|
+ top: 0.5rem;
|
|
|
|
|
+ transition: color 0.2s;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ color: $color__gray--darkest;
|
|
|
|
|
+
|
|
|
|
|
+ &:hover {
|
|
|
|
|
+ color: $color__darkgray--primary;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
@at-root #{&}--show {
|
|
@at-root #{&}--show {
|
|
|
margin-top: 0;
|
|
margin-top: 0;
|
|
|
transform: scale(1);
|
|
transform: scale(1);
|