fix(containers.scss): fix border bug

border does not working when `is-dark`
nostalgic-css · Jan 29, 2019 · 3026605 · 3026605
1 parent 3629ee9
commit 3026605
Showing 1 changed file with 40 additions and 6 deletions.
diff --git a/scss/elements/containers.scss b/scss/elements/containers.scss
@@ -21,7 +21,7 @@
     > .title {
       display: table;
       padding: 0 0.5rem;
-      margin: -2rem 0 1rem;
+      margin: -1.8rem 0 1rem;
       font-size: 1rem;
       background-color: $background-color;
     }
@@ -40,10 +40,23 @@
   }
 
   &.is-dark {
+    position: relative;
+    margin: $border-size;
     color: $background-color;
     background-color: $base-color;
     border-color: white;
 
+    &::after {
+      position: absolute;
+      top: -$border-size * 1.8;
+      right: -$border-size * 1.8;
+      bottom: -$border-size * 1.8;
+      left: -$border-size * 1.8;
+      z-index: -1;
+      content: "";
+      background-color: $base-color;
+    }
+
     &.with-title {
       > .title {
         color: $background-color;
@@ -56,11 +69,7 @@
     @include rounded-corners();
 
     padding: 1rem 1.5rem;
-    margin: 14px 8px;
-
-    &.is-dark {
-      @include rounded-corners(true);
-    }
+    margin: $border-size;
 
     &.with-title {
       > .title {
@@ -79,5 +88,30 @@
         }
       }
     }
+
+    &.is-dark {
+      @include rounded-corners(true);
+      &::after {
+        content: none;
+      }
+
+      &.with-title {
+        > .title {
+          margin-top: -1.3rem;
+        }
+
+        &.is-centered {
+          > .title {
+            margin: -1.3rem auto 1rem;
+          }
+        }
+
+        &.is-right {
+          > .title {
+            margin: -1.3rem 0 1rem auto;
+          }
+        }
+      }
+    }
   }
 }