only add some atomic floder to sass components

assets/javascript/mobile_menu.js

@@ -0,0 +1,31 @@
+/**
+ * @file
+ * JS for Mobile menu 
+ */
+
+(function ($) {
+  Drupal.behaviors.csgov_theme_MobileMenu = {
+    attach: function (context, settings) {
+
+        $('#menu .block-menu ul > li:has(ul)').each(function() {
+            $(this).append( "<span></span>" );
+        });
+
+        $('#menu .block-menu li.menu-item--active-trail > span').each(function() {
+            $(this).prev().addClass("open");
+            $(this).addClass("open");
+        });
+
+        $("#menu .block-menu span").click(function(){
+            if($(this).hasClass('open')) {
+                $(this).prev().removeClass("open");
+                $(this).removeClass("open");
+            } else {
+                $(this).prev().addClass("open");
+                $(this).addClass("open");
+            }
+        });
+
+    }
+  };
+})(jQuery);

assets/javascript/navbar_icon.js

@@ -0,0 +1,21 @@
+/**
+ * @file
+ * JS for Navbar menu.
+ */
+
+(function ($) {
+  Drupal.behaviors.csgov_theme_NavbarMenu = {
+    attach: function (context, settings) {
+
+      $(".icon-menu").click(function() {
+        if ($('body').hasClass('menu-open')) {
+            $("body").removeClass("menu-open");
+        }
+        else {
+            $("body").addClass("menu-open");
+        }
+      });
+
+    }
+  };
+})(jQuery);

assets/sass/_variables.scss

@@ -1,6 +1,7 @@
 //
 // Default colors
 //
+
 // Colors
 $black: rgb(0, 0, 0);
 $white: rgb(255, 255, 255);
@@ -31,6 +32,62 @@ $white-8: rgba(255, 255, 255, .8);
 $white-9: rgba(255, 255, 255, .9);
 $white-10: $white;
 
+
+//
+// Design system color
+//
+
+// Primary
+$primary-color: #2362A2;
+$primary-light-color: #337DBD;
+$primary-dark-color: #254E80;
+
+// Secondary
+$secondary-color: #ECAE1A;
+$secondary-dark-color: #DD9F0C;
+
+// Background
+$background-color: #F5F5F5;
+$background-light-color: #FFFFFF;
+$background-dark-color: #3B3B3B;
+
+// Text
+$primary-text-color: #FFFFFF;
+$secondary-text-color: #3B3B3B;
+
+// Other
+$error-color: #E04857;
+$success-color: #6FBD2C;
+
+// 
+// Base
+// 
+
+$body-bg: $background-color;
+$body-text: $secondary-text-color;
+
+// 
+// Components
+// 
+
+// Navbar
+$navbar-bg: $primary-color;
+$navbar-text: $primary-text-color;
+$navbar-collapse-bg: $background-color;
+$navbar-collapse-text: $secondary-text-color;
+
+// Header
+
+// Main Menu
+$main-menu-bg: $primary-color;
+$main-menu-bg-active: $primary-dark-color;
+$main-menu-text: $primary-text-color;
+$main-menu-text-active: $primary-text-color;
+
+// Footer
+
+
+
 //
 // Color sections
 //
@@ -70,9 +127,11 @@ $color-info:            #5bc0de;
 $color-warning:         #f0ad4e;
 $color-danger:          #d9534f;
 
+
 //
 // Layout dimensions.
 //
+
 // Small screen side padding
 $site-padding: 2rem;
 // Max width for large monitor.
@@ -93,9 +152,18 @@ $breakpoints: (
   large: $bp-large / 1.6,
 );
 
+$screen-sm-min: $bp-small;
+$screen-md-min: $bp-medium;
+$screen-lg-min: $bp-large;
+
+$screen-sm-max: ($screen-md-min - 1);
+$screen-md-max: ($screen-lg-min - 1); 
+
+
 //
 // Fonts
 //
+
 // Font sizes
 $base-font-size: 1.6rem;
 $font-size-large: $base-font-size * 1.5;
@@ -148,6 +216,8 @@ $main-navigation-action-hover: $black;
 $main-navigation-accent: $gray-3;
 $main-navigation-accent-hover: $color-standard-action;
 
+
+
 //
 // View modes
 //

assets/sass/base/_base.scss

@@ -1,7 +1,17 @@
-* {
-  box-sizing: border-box;
+/* box model */
+*,
+*::before,
+*::after {
+     box-sizing: border-box;
 }
 
+/* focus */
+*:focus {
+    outline: 0;
+}
+
+/* body */
 body {
-  color: $color-standard-foreground;
+  color: $body-text;
+  background: $body-bg;
 }

assets/sass/components/03-organisms/header/_header-base.scss

@@ -0,0 +1,21 @@
+//
+// HEADER
+//
+
+@media (max-width: $screen-sm-max) {
+
+  #header .container {
+    margin: 0;
+    padding: 0;
+  }
+
+}
+
+@media (min-width: $screen-md-min) {
+
+  #header .region-header {
+    display: flex;
+  }
+
+}
+

assets/sass/components/03-organisms/header/_header-block-branding.scss

@@ -0,0 +1,53 @@
+//
+// HEADER - BRANDING
+//
+
+#header {
+
+    .block-system-branding-block > h2 {
+        display: none;
+    }
+
+    @media (max-width: $screen-sm-max) {
+
+        .block-system-branding-block {
+            display: none;
+        }
+
+    }
+
+    @media (min-width: $screen-md-min) {
+
+        .block-system-branding-block {
+            margin-right: auto;
+            padding: 20px 0 25px 0;
+        }
+
+        /* logo */
+        .block-system-branding-block .site-logo {
+            display: inline-block;
+            padding-top: 5px;
+        }
+        .block-system-branding-block .site-logo img {
+            height: 110px;
+            width: auto; 
+        }
+
+        /* name */
+        .site-name {
+            font-size: 4rem;
+            font-weight: bold;
+        }
+        .site-name a {
+            text-decoration: none;
+        }
+
+        /* slogan */
+        .site-slogan {
+            font-size: 2rem;
+        }
+
+
+    }
+
+}

assets/sass/components/03-organisms/header/_header-block-search.scss

@@ -0,0 +1,29 @@
+//
+// HEADER - BLOCK - SEARCH
+//
+
+#header {
+
+    .block-search > h2 {
+        display: none;
+    }
+
+    @media (max-width: $screen-sm-max) {
+
+        .block-search {
+            padding: 30px 35px 0px 35px;
+            margin: 0;
+        }
+
+    }
+
+    @media (min-width: $screen-md-min) {
+
+        .block-search {
+            margin-top: 60px;
+            margin-left: 35px;
+        }
+
+    }
+
+}

assets/sass/components/03-organisms/menu/_menu-base.scss

@@ -0,0 +1,14 @@
+//
+// MENU
+//
+
+@media (min-width: $screen-md-min) {
+
+    #menu {
+        background: $main-menu-bg;
+    }
+
+}
+
+
+