Add close icon to modals

6 years ago · f53bf54929
1 changed files with 13 additions and 0 deletions
--- a/packages/builder/src/components/common/Modal/Modal.svelte
+++ b/packages/builder/src/components/common/Modal/Modal.svelte
@ -51,6 +51,7 @@
        <div class="content-wrapper" on:click|self={hide}>
          <div class="content" class:wide>
            <slot />
+            <i class="ri-close-line" on:click={hide} />
          </div>
        </div>
      </div>
@ -113,4 +114,16 @@
  .content.wide {
    flex: 0 0 600px;
  }
+
+  i {
+    position: absolute;
+    top: var(--spacing-xl);
+    right: var(--spacing-xl);
+    color: var(--ink);
+    font-size: var(--font-size-xl);
+  }
+  i:hover {
+    color: var(--grey-6);
+    cursor: pointer;
+  }
 </style>