fix(dialog.scss): fix position of peusedo element

border is not visible when opening dark dialog
nostalgic-css · Feb 11, 2019 · 7dc16ce · 7dc16ce
1 parent 6643024
commit 7dc16ce
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 8 deletions.
diff --git 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
@@ -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;
     }
   }
 }