✨ containersにroundedを追加

css/nes.css

@@ -520,6 +520,30 @@ button,
   border-radius: 4px;
 }
 
+.container.is-rounded {
+  padding: 1rem 1.5rem;
+  margin: 14px 8px;
+}
+
+.container.is-rounded::after {
+  border: none;
+  border-radius: 0;
+  box-shadow: 0 -4px #fff, 0 -8px #212529, 4px 0 #fff, 4px -4px #212529, 8px 0 #212529, 0 4px #fff, 0 8px #212529, -4px 0 #fff, -4px 4px #212529, -8px 0 #212529, -4px -4px #212529, 4px 4px #212529;
+}
+
+.container.is-rounded.is-dark::after {
+  border: none;
+  border-radius: 0;
+  box-shadow: 0 -4px #212529, 0 -8px #fff, 4px 0 #212529, 4px -4px #fff, 8px 0 #fff, 0 4px #212529, 0 8px #fff, -4px 0 #212529, -4px 4px #fff, -8px 0 #fff, -4px -4px #fff, 4px 4px #fff;
+}
+
+.container.is-rounded.is-dark::before {
+  top: -8px;
+  right: -8px;
+  bottom: -8px;
+  left: -8px;
+}
+
 .container.with-title {
   display: flex;
   flex-direction: column;

index.html

@@ -59,6 +59,12 @@
       <label class="title">Container.is-dark</label>
       <p style="color: white;">Good morning. Thou hast had a good night's sleep I hope.</p>
     </div>
+    <div class="container is-rounded">
+      <p>Good morning. Thou hast had a good night's sleep I hope.</p>
+    </div>
+    <div class="container is-rounded is-dark">
+      <p style="color: white;">Good morning. Thou hast had a good night's sleep I hope.</p>
+    </div>
 
     <div>
       <label><input type="radio" class="radio" name="answer" checked /><span>Yes</span></label>

scss/elements/containers.scss

@@ -31,6 +31,47 @@
     border-radius: 4px;
   }
 
+  @mixin rounded($base, $background) {
+    border: none;
+    border-radius: 0;
+    // prettier-ignore
+    box-shadow:
+      0 -4px $background,
+      0 -8px $base,
+      4px 0 $background,
+      4px -4px $base,
+      8px 0 $base,
+      0 4px $background,
+      0 8px $base,
+      -4px 0 $background,
+      -4px 4px $base,
+      -8px 0 $base,
+      -4px -4px $base,
+      4px 4px $base;
+  }
+
+  &.is-rounded {
+    padding: 1rem 1.5rem;
+    margin: 14px 8px;
+
+    &::after {
+      @include rounded($base-color, $background-color);
+    }
+
+    &.is-dark {
+      &::after {
+        @include rounded($background-color, $base-color);
+      }
+
+      &::before {
+        top: -8px;
+        right: -8px;
+        bottom: -8px;
+        left: -8px;
+      }
+    }
+  }
+
   &.with-title {
     display: flex;
     flex-direction: column;