1 files changed, 250 insertions, 0 deletions
diff --git a/syte/static/less/mixins.less b/syte/static/less/mixins.less
new file mode 100644
index 0000000..44cc546
--- /dev/null
+++ b/syte/static/less/mixins.less
@@ -0,0 +1,250 @@
+/* mixins.less 
+ * CSS Reset and base mixinis for LESS based development. 
+ * Inspired by bootstrap.less initially created by Mark Dotto
+ * https://github.com/markdotto/preboot.less
+ **/
+
+// Clearfix for clearing floats 
+.clearfix() {
+  zoom: 1;
+  &:before, &:after {display: table; content: "";}
+  &:after {clear: both;}
+}
+
+// Center-align a block level element
+.center-block() {
+  display: block;
+  margin: 0 auto;
+}
+
+// Sizing Shortcuts
+.size(@width: 5px, @height: 5px) {
+  height: @height; width: @width;
+}
+
+.square(@size: 5px) {
+  .size(@size, @size);
+}
+
+// Fonts
+.font(@weight: normal, @size: 14px, @lineHeight: 20px) {
+  font-size: @size;
+  font-weight: @weight;
+  line-height: @lineHeight;
+}
+
+.font-sans-serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  .font(@weight, @size, @lineHeight);
+}
+
+.font-serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
+  font-family: "Georgia", Times New Roman, Times, serif;
+  .font(@weight, @size, @lineHeight);
+}
+
+.font-monospace(@weight: normal, @size: 12px, @lineHeight: 20px) {
+  font-family: "Monaco", Courier New, monospace;
+  .font(@weight, @size, @lineHeight);
+}
+
+// Border Radius
+.border-radius(@radius: 5px) {
+  -webkit-border-radius: @radius;
+  -moz-border-radius: @radius;
+  border-radius: @radius;
+}
+
+// Box Shadows
+.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
+  -webkit-box-shadow: @shadow;
+  -moz-box-shadow: @shadow;
+  box-shadow: @shadow;
+}
+
+.reset-box-shadow() {
+  -webkit-box-shadow: 0 0 0;
+  -moz-box-shadow: 0 0 0;
+  box-shadow: 0 0 0;
+}
+
+// Transitions
+.transition(@transition) {
+  -webkit-transition: @transition;
+  -moz-transition: @transition;
+  -o-transition: @transition;
+  transition: @transition;
+}
+
+.rotate(@rotation) {
+  -webkit-transform: rotate(@rotation);
+  -moz-transform: rotate(@rotation);
+  -ms-transform: rotate(@rotation);
+  -o-transform: rotate(@rotation);
+  transform: rotate(@rotation);
+}
+
+
+// Background Clipping
+.background-clip(@clip) {
+  -webkit-background-clip: @clip;
+  -moz-background-clip: @clip;
+  background-clip: @clip;
+}
+
+// CSS3 Content Columns
+.content-columns(@columnCount, @columnGap: 20px) {
+  -webkit-column-count: @columnCount;
+  -webkit-column-gap: @columnGap;
+  -moz-column-count: @columnCount;
+  -moz-column-gap: @columnGap;
+  column-count: @columnCount;
+  column-gap: @columnGap;
+}
+
+// Add a transparency value to a background 
+.alpha-background(@color: @white, @alpha: 1) {
+  background-color: @color;
+  background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
+}
+
+// Add a transparency value to a border 
+.alpha-border(@color: @white, @alpha: 1) {
+  border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
+  background-clip: padding-box;
+}
+
+// Gradients
+.gradient(@startColor: #555, @endColor: #333) {
+  background-color: @endColor;
+  background-repeat: repeat-x;
+  background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); // Konqueror
+  background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
+  background-image: -ms-linear-gradient(top, @startColor, @endColor); // IE10
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
+  background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
+  background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
+  background-image: linear-gradient(top, @startColor, @endColor); // The standard
+  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down
+}
+
+.horizontal-gradient(@startColor: #555, @endColor: #333) {
+  background-color: @endColor;
+  background-repeat: repeat-x;
+  background-image: -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor)); // Konqueror
+  background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
+  background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10
+  background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
+  background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
+  background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
+  background-image: linear-gradient(left, @startColor, @endColor); // Le standard
+  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE9 and down
+}
+
+.directional-gradient(@startColor: #555, @endColor: #333, @deg: 45deg) {
+  background-color: @endColor;
+  background-repeat: repeat-x;
+  background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
+  background-image: -ms-linear-gradient(@deg, @startColor, @endColor); // IE10
+  background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
+  background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
+  background-image: linear-gradient(@deg, @startColor, @endColor); // The standard
+}
+
+.vertical-gradient-3(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
+  background-color: @endColor;
+  background-repeat: no-repeat;
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
+  background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
+  background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
+  background-image: -ms-linear-gradient(@startColor, @midColor @colorStop, @endColor);
+  background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
+  background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
+  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down, gets no color-stop at all for proper fallback
+}
+
+.reset-ie-gradient() {
+  filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
+}
+
+// Opacity
+.opacity(@opacity: 100) {
+  filter: e(%("alpha(opacity=%d)", @opacity));
+  -khtml-opacity: @opacity / 100;
+  -moz-opacity: @opacity / 100;
+  opacity: @opacity / 100;
+}
+
+// Word spacing wrap
+.break-word() {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+// PATTERN ANIMATIONS
+// ------------------
+.fade {
+  .transition(opacity .15s linear);
+  opacity: 0;
+  &.in {
+    opacity: 1;
+  }
+}
+
+.user-select(@select) {
+  -webkit-user-select: @select;
+  -khtml-user-select: @select;
+  -moz-user-select: @select;
+  -o-user-select: @select;
+  user-select: @select;
+}
+
+//Arrows
+.arrow-top(@arrow-size: 5px, @arrow-color: #000, @arrow-location: 50%) {
+  bottom: 0;
+  left: @arrow-location;
+  margin-left: -@arrow-size;
+  border-left: @arrow-size solid transparent;
+  border-right: @arrow-size solid transparent;
+  border-top: @arrow-size solid @arrow-color;
+  position: absolute;
+  width: 0;
+  height: 0;
+}
+
+.arrow-right(@arrow-size: 5px, @arrow-color: #000, @arrow-location: 50%) {
+  top: @arrow-location;
+  left: 0;
+  margin-top: -@arrow-size;
+  border-top: @arrow-size solid transparent;
+  border-bottom: @arrow-size solid transparent;
+  border-right: @arrow-size solid @arrow-color;
+  position: absolute;
+  width: 0;
+  height: 0;
+}
+
+.arrow-bottom(@arrow-size: 5px, @arrow-color: #000, @arrow-location: 50%) {
+  top: 0;
+  left: @arrow-location;
+  margin-left: -@arrow-size;
+  border-left: @arrow-size solid transparent;
+  border-right: @arrow-size solid transparent;
+  border-bottom: @arrow-size solid @arrow-color;
+  position: absolute;
+  width: 0;
+  height: 0;
+}
+
+.arrow-left(@arrow-size: 5px, @arrow-color: #000, @arrow-location: 50%) {
+  top: @arrow-location;
+  right: 0;
+  margin-top: -@arrow-size;
+  border-top: @arrow-size solid transparent;
+  border-bottom: @arrow-size solid transparent;
+  border-left: @arrow-size solid @arrow-color;
+  position: absolute;
+  width: 0;
+  height: 0;
+}
+