styling example

Web/Styling/example/base/_colors.scss

@@ -0,0 +1,11 @@
+$brand:                 #206e8c !default;
+$brand-light:           #6cb2d3 !default;
+$brand-dark:            #495f70 !default;
+
+$brand-alternative:     #e38000 !default;
+
+$error:                 #ba122b !default;
+$success:               forestgreen !default;
+
+$white:                 #ffffff !default;
+$black:                 #000000 !default;

Web/Styling/example/base/_element-defaults.scss

@@ -0,0 +1,13 @@
+html {
+  @include prefix("box-sizing", "border-box");
+}
+
+*, *:before, *:after {
+  @include prefix("box-sizing", "inherit");
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: $font-family-default;
+  color: $text-color-default;
+  margin: 0;
+}

Web/Styling/example/base/_fonts.scss

@@ -0,0 +1,13 @@
+@charset "UTF-8";
+
+@font-face {
+    font-family: "test-font";
+    src:url("test-font.eot");
+    src:url("test-font.eot?#iefix") format("embedded-opentype"),
+    url("test-font.woff") format("woff"),
+    url("test-font.ttf") format("truetype"),
+    url("test-font.svg#chimera-icons") format("svg");
+    font-weight: normal;
+    font-style: normal;
+
+}

Web/Styling/example/base/_helpers.scss

@@ -0,0 +1,19 @@
+.h-text-left {
+    text-align: left !important;
+}
+
+.h-text-right {
+    text-align: right !important;
+}
+
+.h-text-center {
+    text-align: center !important;
+}
+
+.h-hide {
+    display: none !important;
+}
+
+.h-clearfix {
+    @include clearfix;
+}

Web/Styling/example/base/_mixins.scss

@@ -0,0 +1,30 @@
+@mixin clearfix {
+    &:after {
+        content: "";
+        display: table;
+        clear: both;
+    }
+}
+
+@mixin prefix($property, $value, $vendors: webkit moz ms o) {
+    @if $vendors {
+        @each $vendor in $vendors {
+            #{"-" + $vendor + "-" + $property}: #{$value};
+        }
+    }
+    #{$property}: #{$value};
+}
+
+@mixin translate($x, $y) {
+    -webkit-transform: translate($x, $y);
+    -ms-transform: translate($x, $y); // IE9 only
+    -o-transform: translate($x, $y);
+    transform: translate($x, $y);
+}
+
+@mixin transition-transform($transition...) {
+    -webkit-transition: -webkit-transform $transition;
+    -moz-transition: -moz-transform $transition;
+    -o-transition: -o-transform $transition;
+    transition: transform $transition;
+}