Create Masthead component (#439)

* Create a masthead component with multiple variants.
SU-SWS · Jun 17, 2019 · 5b7712d · 5b7712d
1 parent 41b8ebd
commit 5b7712d
Show file tree

Hide file tree

Showing 19 changed files with 689 additions and 65 deletions.
diff --git a/core/dist/css/decanter.css b/core/dist/css/decanter.css
diff --git a/core/src/scss/components/index.scss b/core/src/scss/components/index.scss
@@ -20,4 +20,5 @@
 'main-nav/index',
 'quote/index',
 'site-search/index',
-'skiplinks/index';
+'skiplinks/index',
+'masthead/index';
diff --git a/core/src/scss/components/masthead/_masthead--center.scss b/core/src/scss/components/masthead/_masthead--center.scss
@@ -0,0 +1,13 @@
+@charset "UTF-8";
+
+// Masthead with center-aligned Main Nav
+
+.su-masthead--center {
+  .su-main-nav {
+    @include grid-media-min("lg") {
+      > ul {
+        justify-content: center;
+      }
+    }
+  }
+}
diff --git a/core/src/scss/components/masthead/_masthead--dark.scss b/core/src/scss/components/masthead/_masthead--dark.scss
@@ -0,0 +1,20 @@
+@charset "UTF-8";
+
+// Masthead with dark color theme
+
+.su-masthead--dark {
+  background-color: color(bg--reverse);
+
+  .su-lockup__wordmark,
+  .su-lockup__line1,
+  .su-lockup__line2,
+  .su-lockup__line3,
+  .su-lockup__line4,
+  .su-lockup__line5 {
+    color: color(link--reverse);
+  }
+
+  .su-lockup__cell2 {
+    border-color: color(link--reverse);
+  }
+}
diff --git a/core/src/scss/components/masthead/_masthead--right.scss b/core/src/scss/components/masthead/_masthead--right.scss
@@ -0,0 +1,13 @@
+@charset "UTF-8";
+
+// Masthead with right-aligned Main Nav
+
+.su-masthead--right {
+  .su-main-nav {
+    @include grid-media-min("lg") {
+      > ul {
+        justify-content: flex-end;
+      }
+    }
+  }
+}