From 7dc16ceee004621ed30f940f801f4044e8f3e17d Mon Sep 17 00:00:00 2001
From: BcRikko <s.shin1106@gmail.com>
Date: Mon, 11 Feb 2019 16:57:39 +0900
Subject: [PATCH] fix(dialog.scss): fix position of peusedo element

border is not visible when opening dark dialog
---
 demo/style.css             |  4 ++--
 scss/elements/dialogs.scss | 14 ++++++++------
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/demo/style.css b/demo/style.css
index b5fc754..716bb2d 100644
--- a/demo/style.css
+++ b/demo/style.css
@@ -147,8 +147,8 @@ div.containers > .nes-container {
   bottom: -4px;
 }
 
-#dialogs > section + section {
-  margin-top: 1.5rem;
+#dialogs > section {
+  display: inline-block;
 }
 
 #dialogs .dialog-menu {
diff --git a/scss/elements/dialogs.scss b/scss/elements/dialogs.scss
index 3bb7370..55eef51 100644
--- a/scss/elements/dialogs.scss
+++ b/scss/elements/dialogs.scss
@@ -1,5 +1,6 @@
 .nes-dialog {
   padding: 1.5rem 2rem;
+  border-width: $border-size;
 
   > .backdrop,
   &::backdrop {
@@ -18,19 +19,20 @@
     }
   }
   &.is-dark {
+    position: relative;
     color: $background-color;
     background-color: $base-color;
     border-color: $background-color;
 
-    &:not(.is-rounded)::after {
+    &:not(.is-rounded)::before {
       position: absolute;
-      top: -$border-size * 1.8;
-      right: -$border-size * 1.8;
-      bottom: -$border-size * 1.8;
-      left: -$border-size * 1.8;
+      top: -$border-size * 2;
+      right: -$border-size * 2;
+      bottom: -$border-size * 2;
+      left: -$border-size * 2;
       z-index: -1;
       content: "";
-      background-color: $base-color;
+      border: $border-size solid $base-color;
     }
   }
 }