started materiO's theme

web/themes/custom/materiotheme/assets/styles/base/README.md

@@ -0,0 +1 @@
+# Do NOT EDIT _variables.scss as it is automaticly generated with gulp from assets/json/variables.json

web/themes/custom/materiotheme/assets/styles/base/_colors.scss

@@ -0,0 +1 @@
+$transparent-bg: rgba(255,255,255, 0.95);

web/themes/custom/materiotheme/assets/styles/base/_grid.scss

@@ -0,0 +1,93 @@
+// http://www.thesassway.com/intermediate/simple-grid-mixins
+
+$default_gap: 1em;
+$default_sum: 12;
+
+$small-bp:768px;
+$med-bp:1080px;
+$large-bp:1900px;
+
+@mixin row() {
+  // font-size: 0;
+  // white-space: nowrap;
+  position: relative;
+  >*{
+    font-size: 16px;
+  }
+}
+
+%col-reset {
+    width: 100%;
+    // display: inline-block;
+    // white-space:normal;
+    // font-size: 16px;
+    float:left;
+    box-sizing: border-box;
+}
+
+@mixin col($col, $offset: 0, $sum: $default_sum, $gap: $default_gap, $align: top) {
+  @extend %col-reset;
+  padding-left: $gap*$offset;
+  @if $col == $default_sum {
+    padding-right: 0;
+  }@else{
+    padding-right: $gap;
+  }
+  &:last-child{padding-right: 0;}
+
+  margin-left: percentage(($col/$sum)*$offset);
+
+  // @media only screen and (min-width: 768px) {
+    width: percentage($col/$sum);
+    // vertical-align: $align;
+  // }
+}
+
+.row{
+  @include row;
+  // html:not(.js) &{
+  //   overflow-y: auto;
+  // }
+}
+
+@for $c from 1 through $default_sum {
+  .col-#{$c} {
+      @include col($c);
+  }
+
+  // small
+  .small-col-#{$c} {
+    @media only screen and (max-width: $small-bp) {
+      @include col($c);
+    }
+  }
+
+  // medium
+  .med-col-#{$c} {
+    @media only screen and (min-width: $small-bp+1) and (max-width: $med-bp) {
+      @include col($c);
+    }
+  }
+
+  // large
+  .large-col-#{$c} {
+    @media only screen and (min-width: $med-bp+1) {
+      @include col($c);
+    }
+  }
+
+}
+
+@for $c from 1 through $default_sum - 1 {
+  @for $o from 1 through $default_sum - $c {
+    .col-#{$c}-offset-#{$o} {
+      @include col($c, $o);
+    }
+  }
+}
+
+.col.float-right{
+  float: right;
+  padding-right: 0;
+  padding-left: $default_gap;
+}

web/themes/custom/materiotheme/assets/styles/base/_layout.scss

@@ -0,0 +1,13 @@
+
+body, html{
+  position: relative;
+  width: 100%;
+  height:100%;
+  font-family: sans-serif;
+  font-style: normal;
+  margin:0;
+  padding:0;
+}
+body.toolbar-horizontal.toolbar-themes.toolbar-no-tabs{
+  padding-top: 24px!important;
+}

web/themes/custom/materiotheme/assets/styles/base/_reset.scss

@@ -0,0 +1,10 @@
+body {
+	background: white;
+}
+
+a{
+	color: inherit;
+	text-decoration: none;
+}
+a, a:focus, a:active { outline: none; }
+a:focus{ -moz-outline-style: none; }