barbican-reset 2.33.0 → 2.35.0

package/patterns/scss/styles.scss

@@ -1,9 +1,11 @@
 @import "../../node_modules/bootstrap/scss/functions";
 @import "../../node_modules/bootstrap/scss/variables";
 @import "../../node_modules/bootstrap/scss/mixins";
-@import "../../helpers/index";
 
-@import "../../scss/fonts";
+@import "../../scss/helpers/index";
+
+@import "../../scss/br-alert";
+@import "../../scss/br-button";
 @import "../../scss/br-container";
 
 $shades: "65", "20", "10";
@@ -21,14 +23,69 @@ body {
   @include fontfamily-light;
   line-height: $line-height-md;
   color: $c-grey-l21;
+  margin: 0;
+  background-color: $c-grey-l96;
+}
+
+.topbar {
+  justify-content: space-between;
+  border-bottom: 1px solid grey;
+  background-color: white;
+  line-height: 60px;
+  display: flex;
+}
+
+.topbar .sections {
+  display: flex;
+
+  h3 {
+    margin-bottom: 0;
+  }
+
+  a {
+    padding-right: 1rem;
+    padding-left: 1rem;
+    color: inherit;
+
+    @include focus {
+      background-color: $c-grey-l96;
+    }
+  }
+}
+
+.page {
+  background-color: #ffffff;
+  padding: 1.25rem;
+
+  +.page {
+    margin-top: 1.25rem;
+  }
+
+  +.section-header {
+    margin-top: 2.5rem;
+  }
+}
+
+.section-header {
+  background-color: black;
+  padding: 1.25rem;
+  color: white;
+
+  h3 {
+    margin-bottom: 0;
+  }
+
+  +.page {
+    margin-top: 1.25rem;
+  }
 }
 
 .list.list-palette {
   list-style: none;
-  margin: 0 0 2rem;
   display: flex;
   gap: 0.125rem;
   padding: 0;
+  margin: 0;
 
   @include brand using($color, $variant) {
     .item.item-palette {
@@ -49,6 +106,10 @@ body {
   }
 }
 
+.list.list-palette+.title.title-palette {
+  margin-top: 2rem;
+}
+
 .list.list-palette.grey {
   .item.item-palette {
     &.l11 {
@@ -101,4 +162,8 @@ h2 {
 
 h3 {
   margin: 0 0 0.5rem;
+}
+
+.br-alert+.br-alert {
+  margin-top: 1.25rem;
 }