Do not include commons in app wrapper

react-toolbox · Nov 18, 2015 · 9905403 · 9905403
1 parent b12bf6e
commit 9905403
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 78 deletions.
diff --git a/components/_globals.scss b/components/_globals.scss
@@ -17,7 +17,6 @@ $color-accent-contrast: $color-dark-contrast !default;
 $unit: 1rem;
 
 // -- Fonts
-$font-roboto-url: "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" !default;
 $font-icon-url: "https://fonts.googleapis.com/icon?family=Material+Icons" !default;
 $preferred-font: "Roboto", "Helvetica", "Arial", sans-serif !default;
 $font-size: 1.6 * $unit !default;

diff --git a/components/app/style.scss b/components/app/style.scss
@@ -1,5 +1,3 @@
-@import "../commons";
-
 .root {
   position: absolute;
   top: 0;

diff --git a/components/commons.scss b/components/commons.scss
@@ -1,6 +1,15 @@
-@import "~normalize.css";
-@import "./base";
-@import url($font-roboto-url);
+$import-normalize: true !default;
+$import-font: true !default;
+$import-flex-attributes: false !default;
+$font-roboto-url: "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" !default;
+
+@if $import-normalize == true {
+  @import "~normalize.css";
+}
+
+@if $import-font == true {
+  @import url($font-roboto-url);
+}
 
 html {
   font-size: 62.5%;
@@ -93,97 +102,99 @@ p {
   @include typo-body-1;
 }
 
-//-- Flex
-[data-flex] {
-  display: flex;
-}
+@if $import-flex-attributes == true {
+  //-- Flex
+  [data-flex] {
+    display: flex;
+  }
 
-body[data-flex] {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  overflow: hidden;
-}
+  body[data-flex] {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    overflow: hidden;
+  }
 
-// -- Direction
-[data-flex^="horizontal"] {
-  flex-direction: row;
-}
+  // -- Direction
+  [data-flex^="horizontal"] {
+    flex-direction: row;
+  }
 
-[data-flex^="vertical"] {
-  flex-direction: column;
-}
+  [data-flex^="vertical"] {
+    flex-direction: column;
+  }
 
 
-// -- Size {
-[data-flex*="grow"] {
-  > *:not([data-column]):not([data-flex-grow]) {
-    flex-grow: 1;
+  // -- Size {
+  [data-flex*="grow"] {
+    > *:not([data-column]):not([data-flex-grow]) {
+      flex-grow: 1;
+    }
   }
-}
 
-[data-flex-grow="min"] {
-  flex-grow: 0;
-}
+  [data-flex-grow="min"] {
+    flex-grow: 0;
+  }
 
-[data-flex-grow="max"] {
-  flex-grow: 2;
-}
+  [data-flex-grow="max"] {
+    flex-grow: 2;
+  }
 
-// -- Container properties
-[data-flex*="wrap"] {
-  flex-wrap: wrap;
-}
+  // -- Container properties
+  [data-flex*="wrap"] {
+    flex-wrap: wrap;
+  }
 
-[data-flex*="center"] {
-  align-content: center;
-  align-items: center;
-  justify-content: center;
-}
+  [data-flex*="center"] {
+    align-content: center;
+    align-items: center;
+    justify-content: center;
+  }
 
-[data-flex-justify="start"] {
-  justify-content: flex-start;
-}
+  [data-flex-justify="start"] {
+    justify-content: flex-start;
+  }
 
-[data-flex-justify="center"] {
-  justify-content: center;
-}
+  [data-flex-justify="center"] {
+    justify-content: center;
+  }
 
-[data-flex-justify="end"] {
-  justify-content: flex-end;
-}
+  [data-flex-justify="end"] {
+    justify-content: flex-end;
+  }
 
-[data-flex-content="start"] {
-  align-content: flex-start;
-}
+  [data-flex-content="start"] {
+    align-content: flex-start;
+  }
 
-[data-flex-content="center"] {
-  align-content: center;
-}
+  [data-flex-content="center"] {
+    align-content: center;
+  }
 
-[data-flex-content="end"] {
-  align-content: flex-end;
-}
+  [data-flex-content="end"] {
+    align-content: flex-end;
+  }
 
-[data-flex-items="center"] {
-  align-items: center;
-}
+  [data-flex-items="center"] {
+    align-items: center;
+  }
 
-[data-flex-items="start"] {
-  align-items: flex-start;
-}
+  [data-flex-items="start"] {
+    align-items: flex-start;
+  }
 
-[data-flex-items="end"] {
-  align-items: flex-end;
-}
+  [data-flex-items="end"] {
+    align-items: flex-end;
+  }
 
-// -- Children properties
-[data-flex-order="first"] {
-  order: -1;
-}
+  // -- Children properties
+  [data-flex-order="first"] {
+    order: -1;
+  }
 
-[data-flex-order="last"] {
-  order: 999999;
+  [data-flex-order="last"] {
+    order: 999999;
+  }
 }
diff --git a/docs/app/components/_globals.scss b/docs/app/components/_globals.scss
@@ -1,4 +1,5 @@
 @import "~react-toolbox/base";
+@import "~react-toolbox/commons";
 
 $unit: 1rem;
 $color-primary-dark: unquote("rgb(#{$color-primary-dark})");

diff --git a/spec/style.scss b/spec/style.scss
@@ -1,4 +1,8 @@
+$import-normalize: false;
+$import-flex-attributes: true;
+
 @import "../components/base";
+@import "../components/commons";
 @import "../components/app_bar/config";
 @import "../components/button/config";