Initial project structure with sails.js

assets/styles/mixins-and-variables/animations.less

@@ -0,0 +1,270 @@
+.animation-delay(@delay) {
+  -moz-animation-delay: @delay;
+  -webkit-animation-delay: @delay;
+  -ms-animation-delay: @delay;
+  -o-animation-delay: @delay;
+  animation-delay: @delay;
+}
+
+.animation-name(@name) {
+  -moz-animation-name: @name;
+  -webkit-animation-name: @name;
+  -ms-animation-name: @name;
+  -o-animation-name: @name;
+  animation-name: @name;
+}
+
+.animation-duration(@duration) {
+  -moz-animation-duration: @duration;
+  -webkit-animation-duration: @duration;
+  -ms-animation-duration: @duration;
+  -o-animation-duration: @duration;
+  animation-duration: @duration;
+}
+
+.animation-iteration-count(@iteration-count) {
+  -moz-animation-iteration-count: @iteration-count;
+  -webkit-animation-iteration-count: @iteration-count;
+  -ms-animation-iteration-count: @iteration-count;
+  -o-animation-iteration-count: @iteration-count;
+  animation-iteration-count: @iteration-count;
+}
+
+.animation-direction(@direction) {
+  -moz-animation-direction: @direction;
+  -webkit-animation-direction: @direction;
+  -ms-animation-direction: @direction;
+  -o-animation-direction: @direction;
+  animation-direction: @direction;
+}
+
+.animation-timing-function(@timingFunction) {
+  -moz-animation-timing-function: @timingFunction;
+  -webkit-animation-timing-function: @timingFunction;
+  -ms-animation-timing-function: @timingFunction;
+   -o-animation-timing-function: @timingFunction;
+  animation-timing-function: @timingFunction;
+}
+
+.transition (@transition) {
+  -webkit-transition: @transition;
+  -moz-transition   : @transition;
+  -ms-transition    : @transition;
+  -o-transition     : @transition;
+}
+
+.translate (@x, @y:0) {
+  -webkit-transform: translate(@x, @y);
+  -moz-transform   : translate(@x, @y);
+  -ms-transform    : translate(@x, @y);
+  -o-transform     : translate(@x, @y);
+  transform        : translate(@x, @y);
+}
+
+//Animations
+.fade-in() {
+  .animation-name(fade-in);
+
+  @-webkit-keyframes fade-in {
+    0%    {opacity: 0;}// lesshint spaceBeforeBrace: false
+    100%  {opacity: 1;}// lesshint spaceBeforeBrace: false
+  }
+
+  @-moz-keyframes fade-in {
+    0%    {opacity: 0;}// lesshint spaceBeforeBrace: false
+    100%  {opacity: 1;}// lesshint spaceBeforeBrace: false
+  }
+
+  @-o-keyframes fade-in {
+    0%    {opacity: 0;}// lesshint spaceBeforeBrace: false
+    100%  {opacity: 1;}// lesshint spaceBeforeBrace: false
+  }
+
+  @keyframes fade-in {
+    0%    {opacity: 0;}// lesshint spaceBeforeBrace: false
+    100%  {opacity: 1;}// lesshint spaceBeforeBrace: false
+  }
+}
+
+.loader(@dot-color: @accent-white) {
+  display: inline-block;
+  margin: auto;
+
+  .loading-dot {
+    border-radius: 50%;
+    background-color: @dot-color;
+    float: left;
+    opacity: 0;
+    width: 16px;
+    height: 16px;
+    margin: 5px;
+    .fade-in();
+    .animation-duration(1s);
+    .animation-iteration-count(infinite);
+    .animation-direction(linear);
+
+    &.dot1 {
+      .animation-delay(0.25s);
+    }
+
+    &.dot2 {
+      .animation-delay(0.5s);
+    }
+
+    &.dot3 {
+      .animation-delay(0.75s);
+    }
+
+    &.dot4 {
+      .animation-delay(1s);
+    }
+  }
+}
+
+// Special rotation animation for a font awesome-based spinner:
+.fa-spinner-rotation() {
+  -webkit-animation: fa-spinner-rotate 1.5s infinite linear;
+  animation: fa-spinner-rotate 1.5s infinite linear;
+
+  @-webkit-keyframes fa-spinner-rotate {
+    0% {
+      -webkit-transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+    }
+  }
+
+  @keyframes rotate-clockwise {
+    0% {
+      -ms-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -ms-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+}
+
+.skid() {
+  .animation-name(skid);
+  .animation-duration(2.5s);
+  .animation-iteration-count(infinite);
+  .animation-timing-function(linear);
+  @-webkit-keyframes skid {
+    0%   {-webkit-transform: translate(0px, 0px);}// lesshint spaceBeforeBrace: false
+    10%  {-webkit-transform: translate(-1px, -1px);}// lesshint spaceBeforeBrace: false
+    20%  {-webkit-transform: translate(-2px, -2px);}// lesshint spaceBeforeBrace: false
+    30%  {-webkit-transform: translate(-3px, -2px);}// lesshint spaceBeforeBrace: false
+    40%  {-webkit-transform: translate(-4px, -1px);}// lesshint spaceBeforeBrace: false
+    50%  {-webkit-transform: translate(-5px, 0px);}// lesshint spaceBeforeBrace: false
+    60%  {-webkit-transform: translate(-4px, 1px);}// lesshint spaceBeforeBrace: false
+    70%  {-webkit-transform: translate(-3px, 2px);}// lesshint spaceBeforeBrace: false
+    80%  {-webkit-transform: translate(-2px, 2px);}// lesshint spaceBeforeBrace: false
+    90%  {-webkit-transform: translate(-1px, 1px);}// lesshint spaceBeforeBrace: false
+    100% {-webkit-transform: translate(0, 0px);}// lesshint spaceBeforeBrace: false
+  }
+  @-moz-keyframes skid {
+    0%   {-moz-transform: translate(0px, 0px);}// lesshint spaceBeforeBrace: false
+    10%  {-moz-transform: translate(-1px, -1px);}// lesshint spaceBeforeBrace: false
+    20%  {-moz-transform: translate(-2px, -2px);}// lesshint spaceBeforeBrace: false
+    30%  {-moz-transform: translate(-3px, -2px);}// lesshint spaceBeforeBrace: false
+    40%  {-moz-transform: translate(-4px, -1px);}// lesshint spaceBeforeBrace: false
+    50%  {-moz-transform: translate(-5px, 0px);}// lesshint spaceBeforeBrace: false
+    60%  {-moz-transform: translate(-4px, 1px);}// lesshint spaceBeforeBrace: false
+    70%  {-moz-transform: translate(-3px, 2px);}// lesshint spaceBeforeBrace: false
+    80%  {-moz-transform: translate(-2px, 2px);}// lesshint spaceBeforeBrace: false
+    90%  {-moz-transform: translate(-1px, 1px);}// lesshint spaceBeforeBrace: false
+    100% {-moz-transform: translate(0, 0px);}// lesshint spaceBeforeBrace: false
+  }
+  @-o-keyframes skid {
+    0%   {-o-transform: translate(0px, 0px);}// lesshint spaceBeforeBrace: false
+    10%  {-o-transform: translate(-1px, -1px);}// lesshint spaceBeforeBrace: false
+    20%  {-o-transform: translate(-2px, -2px);}// lesshint spaceBeforeBrace: false
+    30%  {-o-transform: translate(-3px, -2px);}// lesshint spaceBeforeBrace: false
+    40%  {-o-transform: translate(-4px, -1px);}// lesshint spaceBeforeBrace: false
+    50%  {-o-transform: translate(-5px, 0px);}// lesshint spaceBeforeBrace: false
+    60%  {-o-transform: translate(-4px, 1px);}// lesshint spaceBeforeBrace: false
+    70%  {-o-transform: translate(-3px, 2px);}// lesshint spaceBeforeBrace: false
+    80%  {-o-transform: translate(-2px, 2px);}// lesshint spaceBeforeBrace: false
+    90%  {-o-transform: translate(-1px, 1px);}// lesshint spaceBeforeBrace: false
+    100% {-o-transform: translate(0, 0px);}// lesshint spaceBeforeBrace: false
+  }
+  @keyframes skid {
+    0%   {transform: translate(0px, 0px);}// lesshint spaceBeforeBrace: false
+    10%  {transform: translate(-1px, -1px);}// lesshint spaceBeforeBrace: false
+    20%  {transform: translate(-2px, -2px);}// lesshint spaceBeforeBrace: false
+    30%  {transform: translate(-3px, -2px);}// lesshint spaceBeforeBrace: false
+    40%  {transform: translate(-4px, -1px);}// lesshint spaceBeforeBrace: false
+    50%  {transform: translate(-5px, 0px);}// lesshint spaceBeforeBrace: false
+    60%  {transform: translate(-4px, 1px);}// lesshint spaceBeforeBrace: false
+    70%  {transform: translate(-3px, 2px);}// lesshint spaceBeforeBrace: false
+    80%  {transform: translate(-2px, 2px);}// lesshint spaceBeforeBrace: false
+    90%  {transform: translate(-1px, 1px);}// lesshint spaceBeforeBrace: false
+    100% {transform: translate(0, 0px);}// lesshint spaceBeforeBrace: false
+  }
+ }
+
+ .fly-fade() {
+  .animation-name(flyfade);
+  .animation-duration(7s);
+  .animation-iteration-count(infinite);
+  .animation-timing-function(linear);
+  @-webkit-keyframes flyfade {
+    0%   {-webkit-transform: translate(0px, 0px); opacity: 0;}// lesshint spaceBeforeBrace: false
+    25%  { opacity: 1;}// lesshint spaceBeforeBrace: false
+    50%  {-webkit-transform: translate(110px, 0px);}// lesshint spaceBeforeBrace: false
+    75%  { opacity: 1;}// lesshint spaceBeforeBrace: false
+    100% {-webkit-transform: translate(220px, 0); opacity: 0;}// lesshint spaceBeforeBrace: false
+  }
+  @-moz-keyframes flyfade {
+    0%   {-moz-transform: translate(0, 0px); opacity: 0;}// lesshint spaceBeforeBrace: false
+    25%  { opacity: 1;}// lesshint spaceBeforeBrace: false
+    50%  {-moz-transform: translate(110px, 0px); opacity: 1;}// lesshint spaceBeforeBrace: false
+    75%  { opacity: 1;}// lesshint spaceBeforeBrace: false
+    100% {-moz-transform: translate(220px, 0); opacity: 0;}// lesshint spaceBeforeBrace: false
+  }
+  @-o-keyframes flyfade {
+    0%   {-o-transform: translate(0, 0px); opacity: 0;}// lesshint spaceBeforeBrace: false
+    25%  { opacity: 1;}// lesshint spaceBeforeBrace: false
+    50%  {-o-transform: translate(110px, 0px); opacity: 1;}// lesshint spaceBeforeBrace: false
+    75%  { opacity: 1;}// lesshint spaceBeforeBrace: false
+    100% {-o-transform: translate(220px, 0); opacity: 0;}// lesshint spaceBeforeBrace: false
+  }
+  @keyframes flyfade {
+    0%   {transform: translate(0, 0px); opacity: 0;}// lesshint spaceBeforeBrace: false
+    25%  { opacity: 1;}// lesshint spaceBeforeBrace: false
+    50%  {transform: translate(110px, 0px); opacity: 1;}// lesshint spaceBeforeBrace: false
+    75%  { opacity: 1;}// lesshint spaceBeforeBrace: false
+    100% {transform: translate(220px, 0); opacity: 0;}// lesshint spaceBeforeBrace: false
+  }
+ }
+
+.bob() {
+  .animation-name(bob);
+  .animation-duration(3.2s);
+  .animation-iteration-count(infinite);
+  .animation-timing-function(ease-in-out);
+  @-webkit-keyframes bob {
+    0%   {-webkit-transform: translate(0px);}// lesshint spaceBeforeBrace: false
+    50%  {-webkit-transform: translatey(-7px);}// lesshint spaceBeforeBrace: false
+    100% {-webkit-transform: translatey(0px);}// lesshint spaceBeforeBrace: false
+  }
+  @-moz-keyframes bob {
+    0%   {-moz-transform: translatey(0px);}// lesshint spaceBeforeBrace: false
+    50%  {-moz-transform: translatey(-7px);}// lesshint spaceBeforeBrace: false
+    100% {-moz-transform: translatey(0px);}// lesshint spaceBeforeBrace: false
+  }
+  @-o-keyframes bob {
+    0%   {-o-transform: translatey(0px);}// lesshint spaceBeforeBrace: false
+    50%  {-o-transform: translatey(-7px);}// lesshint spaceBeforeBrace: false
+    100% {-o-transform: translatey(0px);}// lesshint spaceBeforeBrace: false
+  }
+  @keyframes bob {
+    0%   {transform: translatey(0px);}// lesshint spaceBeforeBrace: false
+    50%  {transform: translatey(-7px);}// lesshint spaceBeforeBrace: false
+    100% {transform: translatey(0px);}// lesshint spaceBeforeBrace: false
+  }
+ }
+

assets/styles/mixins-and-variables/buttons.less

@@ -0,0 +1,13 @@
+.btn-reset() {
+  border-top: none;
+  border-bottom: none;
+  border-left: none;
+  border-right: none;
+  background: transparent;
+  font-family: inherit;
+  cursor: pointer;
+  &:focus {
+    border-image: none;
+    outline: none;
+  }
+}

assets/styles/mixins-and-variables/colors.less

@@ -0,0 +1,17 @@
+/**
+ * Color Variables
+ */
+
+@brand: #14acc2;
+
+@error: #B53A03;
+
+
+@text-normal: #000;
+@text-muted: lighten(@text-normal, 60%);
+
+@bg-lt-gray: #f1f1f1;
+@border-lt-gray: darken(@bg-lt-gray, 5%);
+@accent-lt-gray: darken(#fff, 5%);
+@accent-md-gray: darken(#fff, 25%);
+@accent-white: #fff;

assets/styles/mixins-and-variables/containers.less

@@ -0,0 +1,13 @@
+.container-sm() {
+  width: 100%;
+  max-width: 450px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.container-md() {
+  width: 100%;
+  max-width: 650px;
+  margin-left: auto;
+  margin-right: auto;
+}

assets/styles/mixins-and-variables/index.less

@@ -0,0 +1,6 @@
+@import 'colors.less';
+@import 'typography.less';
+@import 'buttons.less';
+@import 'animations.less';
+@import 'truncate.less';
+@import 'containers.less';

assets/styles/mixins-and-variables/truncate.less

@@ -0,0 +1,5 @@
+.truncate() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

assets/styles/mixins-and-variables/typography.less

@@ -0,0 +1,7 @@
+// Font families:
+@main-font: 'Lato', sans-serif;
+@header-font: 'Lato', sans-serif;
+
+// Font weights:
+@bold: 700;
+@normal: 400;