| 
					
				 | 
			
			
				@@ -0,0 +1,51 @@ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<template> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  <div class="kit-view"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    <node-view 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      :node="sheet" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      mode="view" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      show-origin 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      @close-node="$emit('close-node', $event)" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      @open-node="$emit('open-node', $event)" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    /> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+</template> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<script> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+import { NodeView } from '@/components/nodes' 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+export default { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  name: 'KitView', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  components: { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    NodeView 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  props: { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    sheet: { type: Object, default: undefined } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+</script> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<style lang="scss"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+.kit-view { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  .node-view { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    min-height: 100%; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    &-header-wrapper, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    &-body-wrapper, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    &-footer-wrapper { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      @include media-breakpoint-up($layout-bp) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        max-width: 50%; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        margin: auto; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    .btn-close { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      @include media-breakpoint-up($layout-bp) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        position: absolute; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        right: $node-view-spacer-x; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+</style> 
			 |