Browse Source

Add close button

sbkwgh 8 years ago
parent
commit
b1830584df
1 changed files with 19 additions and 1 deletions
  1. 19 1
      frontend/src/components/ModalWindow.vue

+ 19 - 1
frontend/src/components/ModalWindow.vue

@@ -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);