Merge pull request #106 from oslabs-beta/josh/sass

removed styles.scss

Author: mylee1995

src/app/styles/base/_base.scss

@@ -0,0 +1,33 @@
+html {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  height: 100%;
+}
+
+#root {
+  height: 100%;
+}
+
+.travel-container {
+  grid-area: travel;
+}
+.action-container {
+  grid-area: actions;
+}
+.state-container {
+  grid-area: states;
+}
+.buttons-container {
+  grid-area: buttons;
+}
+
+.action-container,
+.state-container,
+.travel-container {
+  border-style: solid;
+  border-color: $border-color;
+  border-width: 1px;
+}

src/app/styles/base/_fonts.scss

@@ -0,0 +1,23 @@
+.body-container {
+  height: 94%;
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  grid-template-rows: 8fr 1fr;
+  grid-template-areas:
+    'actions states'
+    'travel travel'
+    'buttons buttons';
+}
+
+/* if extension width is less than 500px, stack the body containers */
+@media (max-width: 500px) {
+  .body-container {
+    grid-template-rows: 3fr 5fr 1fr;
+    grid-template-columns: auto;
+    grid-template-areas:
+      'actions'
+      'states'
+      'travel'
+      'buttons';
+  }
+}

src/app/styles/layout/_bodyContainer.scss

@@ -0,0 +1,14 @@
+.error-container {
+  height: 100%;
+  margin: 0 auto;
+  background-color: $brand-color;
+  overflow: hidden;
+
+  display: grid;
+  justify-content: center;
+  a {
+    color: white;
+    margin-top: 5%;
+    height: 3%;
+  }
+}

src/app/styles/layout/_errorContainer.scss

@@ -0,0 +1,6 @@
+.main-container {
+  height: 100%;
+  margin: 0 auto;
+  background-color: $brand-color;
+  overflow: hidden;
+}

src/app/styles/layout/_mainContainer.scss

@@ -4,16 +4,15 @@
 @import 'abstracts/variables';
 
 // 3. Base stuff
-@import 'base/base', 'base/fonts', 'base/helpers', 'base/typography';
+@import 'base/base', 'base/helpers', 'base/typography';
 
 // 4. Layout-related sections
-@import 'layout/actionContainer', 'layout/stateContainer',
-  'layout/travelContainer', 'layout/buttonsContainer',
-  'layout/headContainer.scss';
+@import 'layout/mainContainer', 'layout/bodyContainer', 'layout/actionContainer',
+  'layout/errorContainer', 'layout/stateContainer', 'layout/travelContainer',
+  'layout/buttonsContainer', 'layout/headContainer.scss';
 
 // 5. Components
-@import 'components/buttons', 'components/actionComponent',
-  'components/jsonTree';
+@import 'components/buttons', 'components/actionComponent', 'components/jsonTree';
 
 // other styles that needs to be modularized
 @import 'styles';
@@ -25,4 +24,4 @@
 @import './components/d3Tree';
 
 // diff component
-@import './components/diff';
+@import './components/diff';