moovui 0.0.1

data/modules/_flex.scss

@@ -0,0 +1,300 @@
+// combine 2009, 2011 (and early 2012), latest spec (2013)
+
+@mixin display-flex {
+  // 2009
+  display: -webkit-box;
+  display: -moz-box;
+  // 2011
+  display: -ms-flexbox;
+  // latest
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: flex;
+}
+// alias
+@mixin display-box {
+  @include display-flex;
+}
+
+@mixin flex-direction($orient: row) {
+  $old-syntax: $orient;
+  $old-reverse: false;
+  
+  @if $orient == row {
+    $old-syntax: horizontal;
+  }
+  @else if $orient == column {
+    $old-syntax: vertical;
+  }
+  @else if $orient == row-reverse {
+    $old-syntax: horizontal;
+    $old-reverse: true;
+  }
+  @else if $orient == column-reverse {
+    $old-syntax: vertical;
+    $old-reverse: true;
+  }
+  @else if $orient == horizontal or $orient == inline-axis {
+    $orient: row;
+  }
+  @else if $orient == vertical or $orient == block-axis {
+    $orient: column;
+  }
+  
+  // 2009
+  // horizontal|vertical|inline-axis|block-axis|inherit
+  @include prefixer(box-orient, $old-syntax, webkit);
+  @if $reverse {
+    @include prefixer(box-direction, reverse, webkit);
+  }
+  // 2011, latest
+  // row|row-reverse|column|column-reverse|inherit
+  @include prefixer(flex-direction, $orient, webkit moz ms spec);
+}
+// alias
+@mixin box-orient($orient: row) {
+  @include flex-direction($orient);
+}
+
+@mixin justify-content($pack: flex-start) {
+  $old-syntax: $pack;
+  $ms-syntax: $pack;
+  @if $pack == flex-start {
+    $old-syntax: start;
+    $ms-syntax: start;
+  }
+  @else if $pack == flex-end {
+    $old-syntax: end;
+    $ms-syntax: end;
+  }
+  @else if $pack == space-between {
+    $old-syntax: justify;
+    $ms-syntax: justify;
+  }
+  @else if $pack == space-around {
+    $old-syntax: justify;
+    $ms-syntax: distribute;
+  }
+  @else if $pack == start {
+    $pack: flex-start;
+  }
+  @else if $pack == end {
+    $pack: flex-end;
+  }
+  @else if $pack == justify {
+    $pack: space-between;
+  }
+  @else if $pack == distribute {
+    $old-syntax: justify;
+    $pack: space-around;
+  }
+  
+  // 2009
+  // start|end|center|justify
+  @include prefixer(box-pack, $old-syntax, webkit);
+  // 2011
+  // start|end|center|justify|distribute
+  @include prefixer(flex-pack, $ms-syntax, ms);
+  // latest
+  // flex-start|flex-end|center|space-between|space-around
+  @include prefixer(justify-content, $pack, webkit moz spec)
+}
+// alias
+@mixin box-pack($pack: start) {
+  @include justify-content($pack);
+}
+
+@mixin align-items($align: stretch) {
+  $old-syntax: $align;
+  @if $align == flex-start {
+    $old-syntax: start;
+  }
+  @else if $align == flex-end {
+    $old-syntax: end;
+  }
+  @else if $align == start {
+    $align: flex-start;
+  }
+  @else if $align == end {
+    $align: flex-end;
+  }
+  // 2009
+  // start|end|center|baseline|stretch
+  @include prefixer(box-align, $old-syntax, webkit moz);
+  // 2011
+  // start|end|center|baseline|stretch
+  @include prefixer(flex-align, $old-syntax, ms);
+  // latest
+  // flex-start|flex-end|center|baseline|stretch
+  @include prefixer(align-items, $align, webkit moz spec);
+}
+// alias
+@mixin box-align($align: stretch) {
+  @include align-items($align);
+}
+
+@mixin order($int: 0) {
+  // 2009
+  @include prefixer(box-ordinal-group, $int, webkit);
+  // 2011
+  @include prefixer(flex-order, $int, ms);
+  // latest
+  @include prefixer(order, $int, webkit moz spec);
+}
+// alias
+@mixin box-ordinal-group($int: 1) {
+  @include order($int);
+}
+
+@mixin flex($value) {
+  $old-syntax: nth($value, 1);
+  $ms-syntax: $value;
+  @if $old-syntax == none {
+    $old-syntax: 0;
+  }
+  @else if $value == auto {
+    $old-syntax: 1;
+  }
+  @if length($value) == 3 {
+    $ms-syntax: nth($value, 1) (-1 * abs(nth($value, 1))) nth($value, 3);
+    $value: nth($value, 1) abs(nth($value, 1)) nth($value, 3);
+  }
+  // 2009
+  @include prefixer(box-flex, $old-syntax, webkit moz);
+  @if $value == 1 {
+    width: 0; // make each same size with 2009 spec
+  }
+  // 2011
+  @include prefixer(flex, $ms-syntax, ms);
+  // latest
+  @include prefixer(flex, $value, webkit moz spec);
+}
+// alias
+@mixin box-flex($value: 0) {
+  @include flex($value);
+}
+
+/*** new syntax with no old analogies ***/
+
+@mixin flex-wrap($value: nowrap) {
+  // nowrap|wrap|wrap-reverse
+  @include prefixer(flex-wrap, $value, webkit moz ms spec);
+}
+@mixin flex-flow($value) {
+  // flex-direction flex-wrap
+  @include prefixer(flex-flow, $value, webkit moz ms spec);
+}
+
+@mixin flex-grow($number: 0) {
+  @include prefixer(flex-grow, $number, webkit moz spec);
+}
+
+@mixin flex-shrink($number: 1) {
+  @include prefixer(flex-shrink, $number, webkit moz spec);
+}
+
+@mixin flex-basis($width: auto) {
+  @include prefixer(flex-basis, $width, webkit moz spec);
+}
+
+@mixin align-self($align: auto) {
+  $old-syntax: $align;
+  @if $align == flex-start {
+    $old-syntax: start;
+  }
+  @else if $align == flex-end {
+    $old-syntax: end;
+  }
+  @else if $align == start {
+    $align: flex-start;
+  }
+  @else if $align == end {
+    $align: flex-end;
+  }
+  // 2011
+  // auto|start|end|center|baseline|stretch
+  @include prefixer(flex-item-align, $align, ms);
+  // latest
+  // auto|flex-start|flex-end|center|baseline|stretch
+  @include prefixer(align-self, $align, webkit moz spec);
+}
+
+@mixin align-content($align: stretch) {
+  $ms-syntax: $align;
+  @if $align == flex-start {
+    $ms-syntax: start;
+  }
+  @else if $align == flex-end {
+    $ms-syntax: end;
+  }
+  @else if $align == space-between {
+    $ms-syntax: justify;
+  }
+  @else if $align == space-around {
+    $ms-syntax: distribute;
+  }
+  @else if $align == start {
+    $align: flex-start;
+  }
+  @else if $align == end {
+    $align: flex-end;
+  }
+  @else if $align == justify {
+    $align: space-between;
+  }
+  @else if $align == distribute {
+    $align: space-around;
+  }
+  // 2011
+  // start|end|center|justify|distribute|stretch
+  @include prefixer(flex-item-align, $ms-syntax, ms);
+  // latest
+  // flex-start|flex-end|center|space-between|space-around|stretch
+  @include prefixer(align-content, $align, webkit moz spec)
+}
+
+/* helpful classes */
+
+.#{$moovui-prefix}flex {
+  @include display-flex;
+  &.center {
+    @include align-items(center);
+  }
+  &.gap > :not(:last-child) {
+    margin-right: $sp;
+  }
+  > * {
+    @include flex(1);
+    display: block;
+  }
+  .no-flex {
+    @include flex(none);
+  }
+}
+
+
+.#{$moovui-prefix}flex-justify {
+  @include display-flex;
+  @include justify-content(justify);
+  > *:not(:last-child) {
+    @include prefixer(box-flex, 1, webkit moz);
+  }
+}
+
+.no-flexbox.no-flexboxlegacy .#{$moovui-prefix}flex {
+  display: table;
+  width: 100%;
+  &.center > * {
+    vertical-align: middle;
+  }
+  > * {
+    display: table-cell;
+  }
+}
+
+.no-flexbox.no-flexboxlegacy .#{$moovui-prefix}flex-justify {
+  display: table;
+  > * {
+    display: table-cell;
+  }
+}

data/modules/_grid.scss

@@ -0,0 +1,72 @@
+.#{$moovui-prefix}row {
+  @include clearfix;
+  &.#{$moovui-prefix}gutters {
+    margin-left: -$sp3;
+    > * {
+      padding-left: $sp3;
+    }
+  }
+}
+
+.#{$moovui-prefix}col-1,
+.#{$moovui-prefix}col-2,
+.#{$moovui-prefix}col-3,
+.#{$moovui-prefix}col-4,
+.#{$moovui-prefix}col-5,
+.#{$moovui-prefix}col-6,
+.#{$moovui-prefix}col-7,
+.#{$moovui-prefix}col-8,
+.#{$moovui-prefix}col-9,
+.#{$moovui-prefix}col-10,
+.#{$moovui-prefix}col-11,
+.#{$moovui-prefix}col-12 {
+  float: left;
+}
+
+.#{$moovui-prefix}col-1 {
+  width: 8.333%;
+}
+
+.#{$moovui-prefix}col-2 {
+  width: 16.666%;
+}
+
+.#{$moovui-prefix}col-3 {
+  width: 25%;
+}
+
+.#{$moovui-prefix}col-4 {
+  width: 33.333%;
+}
+
+.#{$moovui-prefix}col-5 {
+  width: 41.666%;
+}
+
+.#{$moovui-prefix}col-6 {
+  width: 50%;
+}
+
+.#{$moovui-prefix}col-7 {
+  width: 58.333%;
+}
+
+.#{$moovui-prefix}col-8 {
+  width: 66.666%;
+}
+
+.#{$moovui-prefix}col-9 {
+  width: 75%;
+}
+
+.#{$moovui-prefix}col-10 {
+  width: 83.333%;
+}
+
+.#{$moovui-prefix}col-11 {
+  width: 91.666%;
+}
+
+.#{$moovui-prefix}col-12 {
+  width: 100%;
+}

data/modules/_input.scss

@@ -0,0 +1,59 @@
+@if $moovui-init {
+input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="tel"], input[type="search"], textarea {
+  @include box-shadow(rgba(#fff, 0.5) 0 1px);
+  @include radius;
+  @include transition(0.3s);
+  // ugly but bourbon mixin doesn't convert box-shadow into prefixed
+  -webkit-transition-property: -webkit-box-shadow, box-shadow, border-color;
+  -moz-transition-property: -moz-box-shadow, box-shadow, border-color;
+  transition-property: box-shadow, border-color;
+  border: 1px solid #d9d9d9;
+  color: $text-color;
+  display: block;
+  font-family: $font;
+  font-size: 14px;
+  margin: 0 0 $sp2;
+  padding: 0 $sp 1px;
+  min-height: 36px;
+  &:focus {
+    @include box-shadow(rgba(#000, 0.2) 0 0 3px, rgba(#fff, 0.5) 0 1px);
+    border-color: #c8c8c8;
+    outline: 0;
+  }
+  &::-moz-placeholder {
+    color: #ccc;
+    opacity: 1;
+  }
+  &::-webkit-input-placeholder {
+    color: #ccc;
+  }
+  &:-ms-input-placeholder {
+    color: #ccc;
+  }
+  &.error {
+    @include box-shadow($red 0 0 0 1px);
+    border-color: $red;
+  }
+}
+
+// hide 'X' in IE10
+input::-ms-clear {
+  display: none;
+}
+
+input[type="checkbox"] {
+  margin: -2px 5px 0 0;
+  vertical-align: middle;
+}
+
+input[type="radio"] {
+  margin: -3px 5px 0 0;
+  vertical-align: middle;
+}
+
+textarea {
+  display: block;
+  padding: $sp;
+  max-width: 100%;
+}
+}

data/modules/_label.scss

@@ -0,0 +1,6 @@
+@if $moovui-init {
+label {
+  display: inline-block;
+  margin: 0 0 5px;
+}
+}

data/modules/_list.scss

@@ -0,0 +1,57 @@
+@if $moovui-init {
+// reset
+ul, ol {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+ul.copy, .copy ul {
+  color: #666;
+  font-weight: 300;
+  list-style: disc;
+  margin: 0 0 $sp2 3em;
+}
+
+ol.copy, .copy ol {
+  color: #666;
+  font-weight: 300;
+  list-style: decimal;
+  margin: 0 0 $sp2 3em;
+}
+
+.win {
+  ul.copy, .copy ul, ol.copy, .copy ol {
+    font-weight: normal;
+  }
+}
+}
+
+@mixin section-list {
+  li {
+    margin: 0 0 $sp;
+  }
+}
+
+@mixin link-list {
+  list-style: none !important;
+  margin: 0 0 $sp2 2em;
+  padding: 0 0 0 1em; // padding won't get overridden
+  li:before {
+    @include entypo-icon;
+    @extend .icon-right:before;
+    color: #d3d5d5;
+    margin: 0 9px 0 -20px;
+  }
+  a {
+    font-weight: normal;
+  }
+}
+
+.#{$moovui-prefix}section-list {
+  @include section-list;
+}
+
+.#{$moovui-prefix}link-list {
+  @include link-list;
+}

data/modules/_media.scss

@@ -0,0 +1,17 @@
+@mixin media-block {
+  display: block;
+  margin: 0 auto $sp2;
+  max-width: 100%;
+}
+
+.#{$moovui-prefix}media-block {
+  @include media-block;
+}
+
+img.#{$moovui-prefix}media-block {
+  @include border-radius(3px);
+  border: 3px solid #ddd;
+  &.no-border {
+    border: 0;
+  }
+}

data/modules/_modal.scss

@@ -0,0 +1,71 @@
+@if $moovui-init {
+.reveal-modal-bg {
+  background: #000;
+  background: rgba(#000, 0.45);
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 98;
+}
+
+.reveal-modal {
+  @include box-shadow(rgba(#000, 0.4) 0 0 10px);
+  @include radius;
+  background: #fff;
+  border: solid 1px #666;
+  display: none;
+  margin-left: -30%;
+  position: absolute;
+  top: $nav-height + $sp2;
+  left: 50%;
+  visibility: hidden;
+  width: 60%;
+  height: auto;
+  z-index: 99;
+}
+
+.modal-header {
+  @include border-radius($radius $radius 0 0);
+  background: #f9f9f9;
+  border-bottom: 1px solid #ccc;
+  padding: $sp;
+  .close-reveal-modal {
+    @include border-radius(8px);
+    background: #a2a2a2;
+    line-height: 14px;
+    padding: 0 0 0 4px;
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    width: 16px;
+    height: 16px;
+    &:before {
+      content: "\00d7";
+      color: #fff;
+      font-size: 14px;
+    }
+  }
+  h3 {
+    margin: 0;
+    text-shadow: #fff 0 1px;
+  }
+}
+
+.modal-body {
+  padding: $sp;
+}
+
+.modal-footer {
+  @include border-radius(0 0 $radius $radius);
+  @include clearfix;
+  border-top: 1px solid #d0d0d0;
+  padding: $sp;
+  text-align: center;
+  .btn {
+    margin: 0;
+  }
+}
+}

data/modules/_notice.scss

@@ -0,0 +1,111 @@
+@mixin notice {
+  @include radius;
+  background: #98c17b;
+  color: #fff;
+  margin: 0 auto $sp;
+  padding: $sp 14px $sp 68px;
+  position: relative;
+  max-width: $page-width - $sp2;
+  min-height: 60px;
+  &:before {
+    @include entypo-icon;
+    @extend .icon-circled-info:before;
+    color: #fff;
+    font-size: 40px;
+    margin: -12px 0 0;
+    position: absolute;
+    top: 50%;
+    left: 15px;
+  }
+  &.success:before {
+    @extend .icon-thumbs-up:before;
+  }
+  &.error {
+    background: #e46c67;
+    &:before {
+      @extend .icon-warning:before;
+    }
+  }
+  &.warning {
+    background: #e4cb5d;
+    &:before {
+      @extend .icon-warning:before;
+    }
+  }
+  .close {
+    color: #000;
+    float: right;
+    font-size: 20px;
+    font-weight: bold;
+    line-height: 22px;
+    opacity: 0.2;
+    text-decoration: none;
+    &:hover, &:focus {
+      color: #000;
+      cursor: pointer;
+      opacity: 0.4;
+      text-decoration: none;
+    }
+    &:before {
+      content: "\00d7";
+    }
+  }
+  a {
+    color: #fff;
+    font-weight: normal;
+    text-decoration: underline;
+  }
+}
+
+@mixin callout {
+  @include radius;
+  background: #eff2f3;
+  border: 1px solid #bdc4cb;
+  border-left-width: 50px;
+  font-weight: normal;
+  margin: 0 0 $sp2;
+  padding: $sp;
+  position: relative;
+  &:before {
+    @include entypo-icon;
+    @extend .icon-info:before;
+    color: #fff;
+    font-size: 20px;
+    margin: -13px 0 0 -60px;
+    position: absolute;
+    top: 50%;
+    text-align: center;
+    width: 50px;
+  }
+  &.warning:before {
+    @extend .icon-warning:before;
+  }
+  p, ol {
+    font: inherit;
+  }
+  > p:last-child {
+    margin: 0;
+  }
+}
+
+@if $moovui-init {
+[data-alert] {
+  @include notice;
+}
+
+.callout {
+  @include callout;
+}
+
+.text-success {
+  color: $green;
+}
+
+.text-error {
+  color: $red;
+}
+
+.text-warning {
+  color: mix($orange, $yellow);
+}
+}

data/modules/_pane.scss

@@ -0,0 +1,25 @@
+@mixin pane {
+  @include border-radius(7px);
+  @include box-shadow(#e3e7e9 0 0 0 1px inset, #f1f4f5 0 0 0 2px inset);
+  @include clearfix;
+  background: #eaedef;
+  margin: 0 0 $sp;
+  padding: $sp2;
+}
+
+@mixin subpane() {
+  @include clearfix;
+  @include radius;
+  background: $palegray;
+  border: 1px solid #ccc;
+  margin: 0 0 $sp2;
+  padding: $sp2 - 1px;
+}
+
+.#{$moovui-prefix}pane {
+  @include pane;
+}
+
+.#{$moovui-prefix}subpane {
+  @include subpane;
+}