Kjdsjk

frontend/app/components/Container.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="card">
+
+  <span class="corner tl"></span>
+  <span class="corner tr"></span>
+  <span class="corner bl"></span>
+  <span class="corner br"></span>
+
+    <slot />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+$separation: 2px;
+
+.card{
+  position: relative;
+  margin: 15px;
+  background: var(--color-background-fore);
+  padding: 8px 24px;
+  color: white;
+  border: 1px solid var(--color-border-color);
+}
+
+.corner{
+  position: absolute;
+  width: 22px;
+  height: 22px;
+  border-color: #cfcfcf;
+}
+
+/* Top Left */
+.tl{
+  top: -$separation;
+  left: -$separation;
+  border-top:2px solid;
+  border-left:2px solid;
+}
+
+/* Top Right */
+.tr{
+  top: -$separation;
+  right: -$separation;
+  border-top:2px solid;
+  border-right:2px solid;
+}
+
+/* Bottom Left */
+.bl{
+  bottom: -$separation;
+  left: -$separation;
+  border-bottom:2px solid;
+  border-left:2px solid;
+}
+
+/* Bottom Right */
+.br{
+  bottom: -$separation;
+  right: -$separation;
+  border-bottom:2px solid;
+  border-right:2px solid;
+}
+</style>