moovui 0.1.2 → 0.1.3

data/app/assets/stylesheets/modules/_btn.scss

@@ -1,89 +1,165 @@
+@mixin btn-pressed {
+  @include box-shadow(rgba(#000, 0.2) 0 0 4px inset);
+  @include background-image(linear-gradient(tint(#f9f9f9, 20%) 1px, tint(#eaeaea, 20%)));
+  border-color: shade(#ccc, 10%) shade(#ccc, 10%) shade(#ccc, 5%);
+}
+
 @mixin btn {
   @include appearance(none);
-  @include background(linear-gradient(tint($gray, 25%), $gray));
-  @include box-shadow(rgba(#000, 0.1) 0 1px, rgba(#fff, 0.5) 0 0 1px inset);
-  @include radius;
-  background-color: tint($gray, 10%);
-  border: 1px solid shade($gray, 5%);
-  color: #fff;
+  @include background(linear-gradient(#f9f9f9, #eaeaea));
+  @include border-radius(2px);
+  @include box-shadow(rgba(#000, 0.1) 0 1px 1px, #fff 0 1px inset);
+  -webkit-tap-highlight-color: rgba(#000, 0);
+  background-color: #f1f1f1;
+  border: 1px solid #ccc;
+  color: #777;
   display: inline-block;
-  font: 11px/#{$line-height} $font;
-  letter-spacing: 1px;
+  font: 12px/#{$line-height} $font;
+  font-weight: normal !important;
+  letter-spacing: 0.5px;
   margin: 0 0 $sp2;
-  padding: 3px 10px;
+  padding: 2px 10px;
   position: relative;
   text-align: center;
   text-decoration: none;
-  text-transform: uppercase;
+  text-shadow: #fff 0 1px;
   vertical-align: top;
   min-width: 40px;
-  height: 32px;
+  height: 30px;
   &:not(:empty) {
     min-width: 100px;
   }
-  &:hover {
-    @include box-shadow(rgba(#000, 0.1) 0 1px);
-    background: tint($darkgray, 15%);
-    border-color: transparent;
-  }
   &:active {
-    @include box-shadow(rgba(#000, 0.2) 0 0 4px inset);
-    background: $darkgray;
-    border-color: shade($gray, 30%) shade($gray, 30%) shade($gray, 20%);
+    @include btn-pressed;
+    outline: 0;
+  }
+  &:disabled, &.disabled {
+    @include background-image(linear-gradient(#fcfcfc, #f4f4f4));
+    @include box-shadow(rgba(#000, 0.1) 0 1px 1px, #fff 0 1px inset);
+    border-color: #e0e0e0;
+    color: #b9b9b9;
+  }
+  &.disabled {
+    opacity: 1;
   }
   &[class*="icon-"]:before {
-    font-size: 18px;
+    font-size: 17px;
+    margin-top: 1px;
     vertical-align: top;
   }
   &[class*="icon-"]:not(:empty):before {
-    margin: 0 7px 0 0;
+    margin-right: 7px;
+  }
+}
+
+@mixin btn-color($color) {
+  @include background(linear-gradient(tint($color, 30%), $color));
+  @include box-shadow(rgba(#000, 0.1) 0 1px 1px, rgba(#fff, 0.4) 0 1px inset);
+  background-color: tint($color, 10%);
+  border: 1px solid shade($color, 5%);
+  color: #fff;
+  text-shadow: none;
+  &:hover {
+    background: $color;
+  }
+  &:active {
+    @include box-shadow(rgba(#000, 0.2) 0 0 4px inset);
+    background: shade($color, 5%);
+    border-color: shade($color, 30%) shade($color, 30%) shade($color, 20%);
+  }
+  &:disabled, &.disabled {
+    @include background-image(linear-gradient(mix(tint($color, 30%), #fff), mix($color, #fff)));
+    border-color: mix(shade($color, 5%), #fff);
+  }
+  &.disabled {
+    opacity: 1;
   }
 }
 
+@mixin btn-action {
+  @include btn-color($green);
+}
+
+
+@mixin btn-danger {
+  @include btn-color($red);
+}
+
+@if $moovui-init {
+@include keyframes(confirm) {
+  from {
+    background: #f1f1f1;
+    border-color: #f1f1f1;
+  }
+  to {
+    background: $green;
+    border-color: $green;
+  }
+}
 @include keyframes(warn) {
   from {
-    background: tint($gray, 10%);
+    background: #f1f1f1;
+    border-color: #f1f1f1;
   }
   to {
     background: shade($red, 10%);
+    border-color: shade($red, 10%);
   }
 }
+}
 
-@mixin btn-action {
-  @include background(linear-gradient(tint($green, 30%), $green));
-  background-color: tint($green, 10%);
-  border: 1px solid shade($green, 5%);
+@mixin btn-confirm {
+  &:hover, &:active {
+    color: #fff;
+    text-shadow: none;
+  }
   &:hover {
+    @include animation(confirm 0.3s);
+    @include box-shadow(none);
     background: $green;
+    border-color: $green;
   }
   &:active {
-    background: shade($green, 5%);
-    border-color: shade($green, 30%) shade($green, 30%) shade($green, 20%);
+    @include box-shadow(none);
+    background: shade($green, 10%);
+    border-color: shade($green, 10%);
   }
 }
 
 @mixin btn-warning {
+  &:hover, &:active {
+    color: #fff;
+    text-shadow: none;
+  }
   &:hover {
-    @include animation(warn 0.4s);
+    @include animation(warn 0.3s);
+    @include box-shadow(none);
     background: shade($red, 10%);
+    border-color: shade($red, 10%);
   }
   &:active {
+    @include box-shadow(none);
     background: shade($red, 20%);
-    border-color: shade($red, 35%) shade($red, 35%) shade($red, 25%);
+    border-color: shade($red, 20%);
   }
 }
 
+@mixin btn-active {
+  color: $green;
+}
+
 @mixin btn-pill {
+  @include background-image(linear-gradient(#f9f9f9, #eaeaea));
   @include box-shadow(none);
   border: 0;
   padding: 0 10px;
-  min-width: 0;
+  min-width: 0 !important;
   height: 24px;
 }
 
 @mixin btn-small {
   padding: 0 10px;
-  min-width: 0;
+  min-width: 0 !important;
   height: 26px;
  &[class*="icon-"]:before {
     font-size: 15px;
@@ -99,11 +175,11 @@
   height: 40px;
 }
 
-.#{$moovui-prefix}btn.pill {
+.#{$moovui-prefix}btn.#{$moovui-prefix}pill {
   @include btn-pill;
 }
 
-.#{$moovui-prefix}btn.small {
+.#{$moovui-prefix}btn.#{$moovui-prefix}small {
   @include btn-small;
 }
 
@@ -111,20 +187,54 @@
   @include btn;
 }
 
-.#{$moovui-prefix}btn.big {
+.#{$moovui-prefix}btn.#{$moovui-prefix}big {
   @include btn-big;
 }
 
-.#{$moovui-prefix}btn.action {
+.#{$moovui-prefix}btn.#{$moovui-prefix}action {
   @include btn-action;
 }
 
-.#{$moovui-prefix}btn.warning {
+.#{$moovui-prefix}btn.#{$moovui-prefix}danger {
+  @include btn-danger;
+}
+
+.#{$moovui-prefix}btn.#{$moovui-prefix}confirm {
+  @include btn-confirm;
+}
+
+.#{$moovui-prefix}btn.#{$moovui-prefix}warning {
   @include btn-warning;
 }
 
+.#{$moovui-prefix}btn.#{$moovui-prefix}pressed {
+  @include btn-pressed;
+}
+
+.#{$moovui-prefix}btn.#{$moovui-prefix}active {
+  @include btn-active;
+}
+
+.#{$moovui-prefix}btn.#{$moovui-prefix}hide-text {
+  font: 0/0 a;
+  min-width: 0;
+  &:before {
+    line-height: $line-height;
+    margin-right: 0 !important;
+  }
+}
+
+th, td {
+  > .#{$moovui-prefix}btn {
+    margin-bottom: 0;
+  }
+}
+
 @if $moovui-init {
 input[type="submit"], input[type="button"], button {
   @include btn;
+  th > &, td > & {
+    margin-bottom: 0;
+  }
 }
 }

data/app/assets/stylesheets/modules/_btnbar.scss

@@ -1,9 +1,6 @@
 @mixin btnbar {
   @include clearfix;
   font-size: 0;
-  li {
-    display: inline;
-  }
   input[type="submit"], input[type="button"], button, .#{$moovui-prefix}btn {
     @include border-radius(0);
     border-right-width: 0;
@@ -14,17 +11,24 @@
       @include border-radius(0 $radius $radius 0);
       border-right-width: 1px;
     }
-  }
-  .active {
-    input[type="submit"], input[type="button"], button, .#{$moovui-prefix}btn {
-      @include box-shadow(rgba(#000, 0.2) 0 0 4px inset);
-      background: $darkgray;
-      border-color: shade($gray, 30%) shade($gray, 30%) shade($gray, 20%);
+    &:pressed + *, &.pressed + * {
+      border-left-color: shade(#ccc, 10%);
     }
   }
-  .active + * {
-    input[type="submit"], input[type="button"], button, .#{$moovui-prefix}btn {
-      border-left-color: shade($gray, 30%);
+  input[type="radio"] {
+    @include appearance(none);
+    margin: 0 -100px 0 0;
+    opacity: 0;
+    outline: none;
+    position: relative;
+    min-width: 100px;
+    height: 30px;
+    z-index: 1;
+    &:active + *, &:checked + * {
+      @include btn-pressed;
+      & + * + * {
+        border-left-color: shade(#ccc, 10%);
+      }
     }
   }
 }

data/app/assets/stylesheets/modules/_code.scss

@@ -30,7 +30,7 @@ pre {
 input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="tel"], textarea {
   &.code {
     font-family: $code-font;
-    font-size: 13px;
+    font-size: 12px;
   }
 }
 
@@ -53,3 +53,17 @@ input[type="text"], input[type="email"], input[type="password"], input[type="url
   }
 }
 }
+
+code.#{$moovui-prefix}inline {
+  background: none;
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+
+pre.#{$moovui-prefix}inline {
+  background: none;
+  color: inherit;
+  margin: 0;
+  padding: 0;
+}

data/app/assets/stylesheets/modules/_copy.scss

@@ -11,6 +11,10 @@ a.copy, .copy a {
   font-weight: bold;
 }
 
+h1, h2, h3 {
+  line-height: 30px;
+}
+
 h1, h2 {
   margin: 0 0 $sp2;
 }
@@ -60,7 +64,6 @@ h2.copy, .copy h2 {
 }
 
 h3.copy, .copy h3 {
-  color: #8d9aa9;
   font-size: $h3-copy-size;
   font-weight: normal;
 }

data/app/assets/stylesheets/modules/_definition.scss

@@ -9,8 +9,9 @@ dl {
 }
 
 dt {
-  display: inline;
+  float: left;
   font-weight: 400;
+  margin: 0 0 -1px;
   &:before {
   content: "•";
   font-weight: 300;
@@ -20,15 +21,23 @@ dt {
 }
 
 dd {
-  display: inline;
   margin: 0;
   &:not(:empty):before {
-    -webkit-font-smoothing: antialiased;
-    content: "  ⎯  ";
+    @include antialiased;
+    content: "—";
+    display: inline-block;
+    font-size: 19px;
+    margin: -1px 2px 0;
+    vertical-align: top;
   }
-  &:after {
+  // prevent collapse
+  &:empty:before {
     content: "";
-    display: block;
+    display: inline-block;
   }
 }
+
+.win dl {
+  font-weight: normal;
+}
 }

data/app/assets/stylesheets/modules/_disabled.scss

@@ -0,0 +1,12 @@
+.#{$moovui-prefix}disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.#{$moovui-prefix}idle {
+  opacity: 0.5;
+}
+
+.#{$moovui-prefix}readonly {
+  pointer-events: none;
+}

data/app/assets/stylesheets/modules/_docs.scss

@@ -1,21 +1,3 @@
-@mixin doc-section {
-  @include radius;
-  background: #fff;
-  border: 2px solid #bdc4cb;
-  color: #666;
-  margin: 0 0 $sp8;
-  padding: $sp2 $sp3;
-}
-
-@mixin doc-panes {
-  :first-child .doc-pane {
-    margin-right: $sp;
-  }
-  :last-child .doc-pane {
-    margin-left: $sp;
-  }
-}
-
 @mixin doc-pane {
   @include clearfix;
   @include radius;
@@ -39,6 +21,9 @@
     width: 87px;
     height: 87px;
   }
+  p:first-of-type {
+    overflow: hidden;
+  }
   a {
     float: right;
   }
@@ -57,59 +42,6 @@
   text-transform: uppercase;
 }
 
-@mixin doc-links {
-  a {
-    margin: 0 0 $sp;
-    &:hover:before {
-      opacity: 1;
-    }
-    &:before {
-      @include entypo-icon;
-      @extend .icon-right:before;
-      margin: 0 5px -1px 0;
-      opacity: 0.5;
-    }
-    &[target="_blank"]:after {
-      @include entypo-icon;
-      @extend .icon-popup:before;
-      color: #d1d1d1;
-      margin-left: 5px;
-    }
-  }
-}
-
-@mixin doc-keywords {
-  @include border-radius(0 0 2px 2px);
-  background: #f0f4f7;
-  border: 1px dotted #bdc4cb;
-  border-top: 1px solid #d7d8e0;
-  padding: $sp $sp2;
-  margin: $sp2 (-$sp2) (-$sp7);
-  text-transform: lowercase;
-  span {
-    color: $darkblue;
-    font-size: 10px;
-    font-weight: bold;
-    margin: 0 5px 0 0;
-    text-transform: uppercase;
-  }
-  a {
-    background: #fff;
-    font-size: 11px;
-    font-weight: normal;
-    margin: 0 4px;
-    padding: 3px 5px;
-  }
-}
-
-.#{$moovui-prefix}doc-section {
-  @include doc-section;
-}
-
-.#{$moovui-prefix}doc-panes {
-  @include doc-panes;
-}
-
 .#{$moovui-prefix}doc-pane {
   @include doc-pane;
 }
@@ -117,11 +49,3 @@
 .#{$moovui-prefix}doc-label {
   @include doc-label;
 }
-
-.#{$moovui-prefix}doc-links {
-  @include doc-links;
-}
-
-.#{$moovui-prefix}doc-kw {
-  @include doc-keywords;
-}

data/app/assets/stylesheets/modules/_dropdown.scss

@@ -3,8 +3,8 @@
   @include box-shadow(rgba(#000, 0.2) 0 1px 4px);
   background: #f9f9f9;
   position: absolute;
-  top: -9999px;
-  width: 160px;
+  left: -9999px;
+  min-width: 160px;
   z-index: 99;
   &:before {
     border: 6px solid transparent;

data/app/assets/stylesheets/modules/_flex.scss

@@ -44,7 +44,7 @@
   // 2009
   // horizontal|vertical|inline-axis|block-axis|inherit
   @include prefixer(box-orient, $old-syntax, webkit);
-  @if $reverse {
+  @if $old-reverse {
     @include prefixer(box-direction, reverse, webkit);
   }
   // 2011, latest
@@ -257,17 +257,17 @@
 
 .#{$moovui-prefix}flex {
   @include display-flex;
-  &.center {
+  &.#{$moovui-prefix}center {
     @include align-items(center);
   }
-  &.gap > :not(:last-child) {
-    margin-right: $sp;
+  &.#{$moovui-prefix}gutters > :not(:last-child) {
+    margin-right: $sp3;
   }
   > * {
     @include flex(1);
     display: block;
   }
-  .no-flex {
+  .#{$moovui-prefix}no-flex {
     @include flex(none);
   }
 }
@@ -281,20 +281,28 @@
   }
 }
 
-.no-flexbox.no-flexboxlegacy .#{$moovui-prefix}flex {
-  display: table;
-  width: 100%;
-  &.center > * {
-    vertical-align: middle;
+.no-flexbox.no-flexboxlegacy {
+  .#{$moovui-prefix}flex {
+    display: table;
+    width: 100%;
+    &.#{$moovui-prefix}gutters {
+      margin-left: -$sp3;
+      > * {
+        padding-left: $sp3;
+      }
+    }
+    &.#{$moovui-prefix}center > * {
+      vertical-align: middle;
+    }
+    > * {
+      display: table-cell;
+    }
   }
-  > * {
-    display: table-cell;
-  }
-}
 
-.no-flexbox.no-flexboxlegacy .#{$moovui-prefix}flex-justify {
-  display: table;
-  > * {
-    display: table-cell;
+  .#{$moovui-prefix}flex-justify {
+    display: table;
+    > * {
+      display: table-cell;
+    }
   }
 }

data/app/assets/stylesheets/modules/_grid.scss

@@ -6,21 +6,20 @@
       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,
+  > .#{$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 {

data/app/assets/stylesheets/modules/_input.scss

@@ -1,20 +1,27 @@
 @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 appearance(none); // override border-radius on iOS
+  @include border-radius(3px);
+  @include box-shadow(rgba(#fff, 0.5) 0 1px, #f0f0f0 0 1px inset);
   @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;
+  -moz-transition-property: box-shadow, border-color;
   transition-property: box-shadow, border-color;
-  border: 1px solid #d9d9d9;
+  border: 1px solid;
+  border-color: #cbcbcb #d5d5d5 #cfcfcf;
   color: $text-color;
   display: block;
   font-family: $font;
-  font-size: 14px;
+  font-size: 13px;
+  letter-spacing: 0.25px;
   margin: 0 0 $sp2;
   padding: 0 $sp 1px;
-  min-height: 36px;
+  min-height: 30px;
+  &:disabled {
+    background: #f3f3f3;
+    border-color: tint(#cbcbcb, 25%) tint(#d5d5d5, 25%) tint(#cfcfcf, 25%);
+  }
   &:focus {
     @include box-shadow(rgba(#000, 0.2) 0 0 3px, rgba(#fff, 0.5) 0 1px);
     border-color: #c8c8c8;
@@ -30,10 +37,17 @@ input[type="text"], input[type="email"], input[type="password"], input[type="url
   &:-ms-input-placeholder {
     color: #ccc;
   }
-  &.error {
+  &.placeholder {
+    // for < IE 10
+    color: #ccc;
+  }
+  &.#{$moovui-prefix}error {
     @include box-shadow($red 0 0 0 1px);
     border-color: $red;
   }
+  label + & {
+    margin-top: 5px;
+  }
 }
 
 // hide 'X' in IE10