Add SideModal

UI/app/components/elements/side_modal.vue

@@ -0,0 +1,41 @@
+<template>
+  <transition
+    enter-class="op0 right0-ch"
+    leave-to-class="op0 right0-ch">
+    <div
+      v-if="value"
+      class="fixed fill bg-dim ease flex z4"
+      @click.self="$emit('input', false)">
+      <div
+        class="fixed top-0 bottom-0 right-0 width-2 bg-white shadow2 z2 ease
+          flex flex-column">
+        <div
+          v-if="title"
+          v-text="title"
+          class="px3 py2 h2 bg-silver" />
+        <div class="flex-auto overflow-auto">
+          <slot />
+        </div>
+        <div class="px3 py2 bg-silver right-align">
+          <slot name="footer" />
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+  export default {
+    name: "SideModal",
+    props: {
+      value: {
+        type: Boolean,
+        default: false,
+      },
+      title: {
+        type: String,
+        default: null,
+      },
+    },
+  };
+</script>

UI/app/main.styl

@@ -150,7 +150,7 @@ input:invalid
   transform translate(-10%, -50%) scale(0.8)
 .left2n
   left -2.5em
-.right0
+.right0, .right0-ch > div
   transform translateX(100%)
 .left0
   transform translateX(-100%)