moovui 0.1.2 → 0.1.3

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

@@ -1,6 +1,34 @@
 @if $moovui-init {
 label {
   display: inline-block;
-  margin: 0 0 5px;
 }
 }
+
+label {
+  &.#{$moovui-prefix}inline {
+    float: left;
+    margin: 0 $sp $sp2 0;
+    padding: 3px 0;
+    min-width: 120px;
+    & + input {
+      display: inline-block;
+      margin-top: 0;
+    }
+    & + textarea {
+      display: inline-block;
+      margin-top: 0;
+    }
+    & + select {
+      display: inline-block;
+      margin-top: 0;
+      vertical-align: middle;
+      & + .chosen-container {
+        display: inline-block;
+        margin-top: 0;
+      }
+    }
+    &.#{$moovui-prefix}text-right {
+      min-width: 200px;
+    }
+  }
+}

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

@@ -28,7 +28,7 @@ ol.copy, .copy ol {
 }
 
 @mixin section-list {
-  li {
+  > li {
     margin: 0 0 $sp;
   }
 }
@@ -38,8 +38,7 @@ ol.copy, .copy ol {
   margin: 0 0 $sp2 2em;
   padding: 0 0 0 1em; // padding won't get overridden
   li:before {
-    @include entypo-icon;
-    @extend .icon-right:before;
+    @include icon-right;
     color: #d3d5d5;
     margin: 0 9px 0 -20px;
   }

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

@@ -8,23 +8,26 @@
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: 98;
+  z-index: 999;
 }
 
 .reveal-modal {
   @include box-shadow(rgba(#000, 0.4) 0 0 10px);
   @include radius;
   background: #fff;
-  border: solid 1px #666;
+  border: 1px solid #666;
   display: none;
-  margin-left: -30%;
-  position: absolute;
-  top: $nav-height + $sp2;
-  left: 50%;
+  position: fixed;
+  top: 15% !important;
+  left: 20%;
   visibility: hidden;
   width: 60%;
   height: auto;
-  z-index: 99;
+  z-index: 1000;
+  @include mobile {
+    left: 5%;
+    width: 90%;
+  }
 }
 
 .modal-header {
@@ -36,20 +39,21 @@
     @include border-radius(8px);
     background: #a2a2a2;
     line-height: 14px;
-    padding: 0 0 0 4px;
     position: absolute;
-    top: 16px;
+    top: 17px;
     right: 16px;
+    text-align: center;
     width: 16px;
     height: 16px;
     &:before {
       content: "\00d7";
       color: #fff;
-      font-size: 14px;
+      font-size: 15px;
     }
   }
   h3 {
-    margin: 0;
+    @include ellipsis;
+    margin: 0 30px 0 0;
     text-shadow: #fff 0 1px;
   }
 }

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

@@ -1,14 +1,23 @@
 @mixin pane {
-  @include border-radius(7px);
-  @include box-shadow(#e3e7e9 0 0 0 1px inset, #f1f4f5 0 0 0 2px inset);
+  @include border-radius(5px);
+  @include box-shadow(rgba(#000, 0.1) 0 1px 1px);
   @include clearfix;
   background: #eaedef;
-  margin: 0 0 $sp;
-  padding: $sp2;
+  border: 1px solid #e2e5e7;
+  margin: 0 0 $sp2;
+  padding: $sp2 - 1px;
 }
 
-@mixin subpane() {
+@mixin subpane {
   @include clearfix;
+  @include radius;
+  background: #fff;
+  border: 1px solid #ccc;
+  margin: 0 0 $sp2;
+  padding: $sp2 - 1px;
+}
+
+@mixin subcontent {
   @include radius;
   background: $palegray;
   border: 1px solid #ccc;
@@ -23,3 +32,47 @@
 .#{$moovui-prefix}subpane {
   @include subpane;
 }
+
+.#{$moovui-prefix}subcontent {
+  @include subcontent;
+}
+
+@mixin panel {
+  @include border-radius(6px);
+  background: #fff;
+  border: 1px solid #ccc;
+  margin: 0 0 $sp2;
+  padding: $sp2;
+  .title {
+    @include border-radius(5px 5px 0 0);
+    background: #eee;
+    border-bottom: 1px solid #ccc;
+    font-weight: bold;
+    margin: (-$sp2) (-$sp2) $sp2;
+    padding: 5px $sp2;
+  }
+}
+
+.#{$moovui-prefix}panel {
+  @include panel;
+}
+
+ol > .#{$moovui-prefix}panel {
+  &:before {
+    @include border-radius(9px);
+    background: #999;
+    color: #fff;
+    content: counter(panel);
+    counter-increment: panel;
+    float: left;
+    font-size: 11px;
+    line-height: 17px;
+    margin: -12px 8px 0 -10px;
+    text-align: center;
+    width: 18px;
+    height: 18px;
+  }
+  &:first-child {
+    counter-reset: panel;
+  }
+}

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

@@ -1,54 +1,110 @@
 @if $moovui-init {
+select, .chosen-single {
+  $img: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAmCAYAAACh1knUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3NpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpjYzM3MzM1Ni1lMzJlLTQ1MWEtOGUyOS1lN2ZjY2U5NzAzNGMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QThCRkY1N0U1QkE5MTFFMzhGQUNDODdBRkQxQkRBNzMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QThCRkY1N0Q1QkE5MTFFMzhGQUNDODdBRkQxQkRBNzMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MWRlZTVhMTMtZjQwMC00OWU1LTgxNGYtMWVkODNlZmUyOTEzIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmNjMzczMzU2LWUzMmUtNDUxYS04ZTI5LWU3ZmNjZTk3MDM0YyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PhIuXMcAAADtSURBVHjaYrh06dJ/IPgAxAwDiZkYBgkYdcioQ0YdMuqQUYeMOmTUIfQGLORocnFy6WFhYZFiYMQi+Z+B4c+fP8/27NtTQnOH9PT1sE2eNJmBkQnTJf///WfIzctlo0vUGBgYTAsJDfnPw8PDwMfHB8cgPkgcJE+vNHLDw8NjpbqaOriZBw4JIA3ig8RB8nRLrIyMjJujY6IvgkIC5AgQHRkVeREkTu9c8x9o+eS4uLh37OzsDLGxse8FBASmQJIrGYAKrXhFIJ4GpcluxbNQoQi4D8RZoyXrqENGHTLqkFGHjDpk1CFDzSEAAQYAvBID8mlySUQAAAAASUVORK5CYII=);
+  background: #f4f4f4 $img no-repeat 100% 50%;
+  @include background($img no-repeat 100% 50%, linear-gradient(#fff 1px, #f9f9f9 1px, #eaeaea));
+  @include border-radius(2px);
+  @include box-shadow(rgba(#000, 0.1) 0 1px 1px);
+  @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: box-shadow, border-color;
+  transition-property: box-shadow, border-color;
+  border: 1px solid #ccc;
+  color: #777;
+  letter-spacing: 0.5px;
+  text-shadow: #fff 0 1px;
+}
+
 select {
   @include appearance(none);
-  @include radius;
-  background: #fafafa;
-  border: 1px solid #ccc;
-  font: 14px/#{$line-height} $font;
-  padding: 5px 30px 5px 6px;
-  &:not(.autocomplete) + .chosen-container .chosen-search {
-    position: absolute;
-    left: -9999px;
+  font: 12px/18px $font;
+  display: block;
+  margin: 0 0 $sp2;
+  padding: 5px 44px 6px 10px;
+  max-width: 100%;
+  height: 30px;
+  @media (-moz-device-pixel-ratio) {
+    @include background(linear-gradient(#fff 1px, #f9f9f9 1px, #eaeaea));
+    padding-right: 26px;
+    padding-left: 6px;
+  }
+  &::-ms-expand {
+    display: none;
+  }
+  &.#{$moovui-prefix}error {
+    @include box-shadow($red 0 0 0 1px);
+    border-color: $red;
+    & + .chosen-container .chosen-single {
+      @include box-shadow($red 0 0 0 1px);
+      border-color: $red;
+    }
+  }
+  label + & {
+    margin-top: 5px;
+    & + .chosen-container {
+      margin-top: 5px;
+    }
   }
 }
 
+option {
+  text-shadow: none; // for Firefox
+}
+
 .chosen-container {
-  font-size: 14px;
+  font-size: 12px;
   margin: 0 0 $sp2;
   position: relative;
+  text-align: left;
   vertical-align: middle;
 }
 .chosen-container-active .chosen-single {
-  border-color: #aaa;
+  border-color: #b5b5b5;
+}
+.chosen-container-single-nosearch .chosen-search {
+  position: absolute;
+  left: -9999px;
+}
+
+table select, table .chosen-container {
+  margin-bottom: 0;
+}
+
+.text-center {
+  select, .chosen-container {
+    margin-right: auto;
+    margin-left: auto;
+  }
 }
 
 .chosen-single {
-  @include radius;
-  background: #fafafa;
-  border: 1px solid #ccc;
-  color: $text-color;
+  cursor: default;
   display: block;
   font-weight: normal;
   line-height: $line-height;
-  padding: 5px 6px;
+  padding: 2px 44px 2px 10px;
   position: relative;
+  span {
+    @include ellipsis;
+    display: block;
+  }
   div {
-    color: #888;
-    position: absolute;
-    top: 6px;
-    right: $sp;
-    &:before {
-      @include entypo-icon;
-      @extend .icon-chevron-down:before;
-    }
+    display: none;
   }
 }
+.chosen-disabled .chosen-single {
+  background-color: #eee;
+  color: #aaa;
+  outline: 0;
+  pointer-events: none;
+}
 
 .chosen-drop {
-  @include box-shadow(rgba(#000, 0.2) 0 0 3px 1px);
-  @include radius;
+  @include box-shadow(rgba(#000, 0.1) 0 0 2px 1px);
+  @include border-radius(2px);
   background: #fff;
-  margin: 4px 0 0;
+  border: 1px solid #d6d6d6;
   overflow: hidden;
   position: absolute;
   top: 100%;
@@ -73,13 +129,18 @@ select {
 }
 
 .chosen-results {
+  background: #f9f9f9;
+  @include background(linear-gradient(#fafafa, #f8f8f8));
   overflow-x: hidden;
   overflow-y: auto;
   position: relative;
-  max-height: 140px;
+  padding: 7px 0;
+  max-height: 150px;
   li {
+    color: #666;
     display: none;
-    padding: 2px 21px 2px 6px;
+    letter-spacing: 0.5px;
+    padding: 1px 21px 1px 16px;
     white-space: nowrap;
   }
   .active-result {
@@ -91,4 +152,11 @@ select {
     color: #fff;
   }
 }
+
+// IE doesn't respect letter-spacing on select
+@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
+  select, .chosen-single, .chosen-results li {
+    letter-spacing: 0;
+  }
+}
 }

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

@@ -11,18 +11,17 @@
       height: 0;
     }
   }
-  .active [data-section-title]:not(:hover) {
+  .active [data-section-title] {
     color: inherit;
   }
   [data-section-title] {
-    padding: 5px $sp3 5px $sp;
+    padding: 5px 30px 5px $sp;
     position: absolute;
     top: 0;
     left: 0;
     width: 20%;
     &:before {
-      @extend .icon-pencil:before;
-      @include entypo-icon;
+      @include icon-pencil;
       color: $lightgray;
       float: right;
       margin-right: -20px;
@@ -44,24 +43,26 @@
 
 @mixin doc-sidebar {
   @include radius;
-  color: #7c8899;
   font-size: 12px;
   overflow: hidden;
   width: 20%;
+  z-index: 1;
   [data-section-title], a {
     margin: 0 0 1px;
     padding: 5px $sp;
   }
+  [data-section-title] {
+    color: #7c8899;
+  }
   [data-section-title]:after {
-    @include entypo-icon;
-    @extend .icon-plus:before;
+    @include icon-plus;
     float: right;
     font-size: 12px;
     opacity: 0.5;
     font-weight: normal;
   }
   .active > [data-section-title]:after {
-    @extend .icon-minus:before;
+    content: $icon-minus;
   }
   > section {
     > [data-section-title] {
@@ -104,8 +105,7 @@
       opacity: 0.8;
     }
     &[target="_blank"]:after {
-      @include entypo-icon;
-      @extend .icon-popup:before;
+      @include icon-popup;
       float: right;
       opacity: 0.5;
     }

data/app/assets/stylesheets/modules/_syntax-highlighter.scss

@@ -21,17 +21,24 @@
     font-size: 9px;
     font-weight: bold;
     letter-spacing: 1px;
+    line-height: 16px;
     position: absolute;
-    right: 3px;
+    right: 2px;
     top: 0;
     text-transform: uppercase;
   }
+  table, tbody, tr, td {
+    display: block;
+  }
   table {
     background: none;
     margin: 0;
   }
+  tr {
+    background: none;
+  }
   td {
-    border: 0;
+    border: 0 !important;
   }
   a {
     color: inherit;
@@ -39,9 +46,11 @@
   }
   .container {
     @include border-radius(0 0 $radius 0);
+    display: inline-block;
     padding: $sp;
   }
   .gutter {
+    @include border-radius($radius 0 0 $radius !important);
     background: #777;
     color: #fff;
     padding: $sp 6px;
@@ -50,6 +59,7 @@
     width: 35px;
   }
   .code {
+    overflow: auto;
     padding: 0;
     width: 100%;
   }

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

@@ -1,63 +1,136 @@
 @if $moovui-init {
 table {
-  @include radius;
-  background: $palegray;
-  width: 100%;
-  margin: 0 0 $sp;
+  @include border-radius(5px);
+  background: #fff;
   border-collapse: separate;
   border-spacing: 0;
-
-  &.no-borders {
-    margin: 0;
-    background: none;
+  margin: 0 0 $sp2;
+  width: 100%;
+  thead {
+    color: #fff;
+    font-size: 11px;
+    letter-spacing: 0.5px;
+    text-transform: uppercase;
+    white-space: nowrap;
     th, td {
-      border: 0;
-      padding: 0;
-      @include border-radius(0);
+      background: #b0b8c0;
+      font-weight: normal;
+      padding: 5px $sp;
+      text-align: left;
+    }
+  }
+  th, tbody:first-child tr:first-child td {
+    &:first-child {
+      border-top-left-radius: 5px;
+    }
+    &:last-child {
+      border-top-right-radius: 5px;
     }
   }
-}
 
-td, th {
-  padding: 6px $sp;
-  border: 1px solid $lightgray;
-  border-top: 0;
-  &:not(:first-child) {
-    border-left: 0;
+  tbody:first-child tr:first-child td {
+    border-top: 1px solid $lightgray;
   }
-  &:not(:last-child) {
-    border-right: 0;
+  
+  tr {
+    background: $palegray;
+    &:last-child td {
+      border-bottom: 1px solid $lightgray;
+      &:first-child {
+        border-bottom-left-radius: 5px;
+      }
+      &:last-child {
+        border-bottom-right-radius: 5px;
+      }
+    }
   }
-}
 
-th {
-  text-align: left;
-}
-
-thead {
-  color: rgba(#000, 0.5);
-  font-size: 11px;
-  font-weight: bold;
-  text-align: right;
-  text-transform: uppercase;
-  text-align: left;
-  white-space: nowrap;
-  th, td {
-    border-top: 1px solid $lightgray;
+  tr.#{$moovui-prefix}disabled td, tr.#{$moovui-prefix}idle td {
+    border-color: #a0a4a6;
   }
-  td:first-child, th:first-child {
-    @include border-radius($radius 0 0 0);
+
+  td.#{$moovui-prefix}disabled, td.#{$moovui-prefix}idle {
+    border-color: #a0a4a6;
   }
-  td:last-child, th:last-child {
-    @include border-radius(0 $radius 0 0);
+
+  td {
+    border-bottom: 1px solid $lightgray;
+    padding: 8px $sp;
+    &:first-child {
+      border-left: 1px solid $lightgray;
+      padding-left: $sp - 1px;
+    }
+    &:last-child {
+      border-right: 1px solid $lightgray;
+      padding-right : $sp - 1px;
+    }
   }
 }
-tr:last-child {
-  td:first-child {
-    @include border-radius(0 0 0 $radius);
+  
+  
+table.#{$moovui-prefix}alt {
+  @include border-radius(0);
+  border: 0;
+  thead {
+    color: #666;
+    font-size: 12px;
+    text-transform: none;
+    th, td {
+      @include background(linear-gradient(#fbfbfb, #eaeaea));
+      background-color: #f2f2f2;
+      border-top: 1px solid $lightgray;
+      border-bottom: 1px solid #b8b8b8;
+    }
+  }
+  
+  tr {
+    background: #fafafa;
+    &:nth-child(even) {
+      background: #fff;
+    }
+  }
+  
+  thead + tbody tr:first-child td {
+    @include box-shadow(rgba(#000, 0.1) 0 2px 1px -1px inset);
   }
-  td:last-child {
-    @include border-radius(0 0 $radius 0);
+  thead + tbody tr:first-child {
+    &.#{$moovui-prefix}disabled td, td.#{$moovui-prefix}disabled,
+    &.#{$moovui-prefix}idle td, td.#{$moovui-prefix}idle {
+      @include box-shadow(rgba(#000, 0.2) 0 2px 1px -1px inset);
+    }
+  }
+    
+  td {
+    border-left: 0;
+    border-right: 0;
+    padding: 12px $sp;
+  }
+  
+  th, tbody:first-child tr:first-child td {
+    border-radius: 0;
+  }
+  tr:last-child td {
+    border-radius: 0;
+    border-bottom-width: 1px;
   }
 }
 }
+
+table.#{$moovui-prefix}no-borders {
+ background: none;
+ border: 0;
+ margin: 0;
+ thead {
+   color: #666;
+   th, td {
+     background: none;
+   }
+ }
+ tr {
+   background: none;
+ }
+ th, tr td {
+   border: 0;
+   padding: 0;
+ }
+}

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

@@ -0,0 +1,56 @@
+@if $moovui-init {
+[data-section="tabs"] {
+  position: relative;
+  margin-bottom: $sp2;
+  > section {
+    padding-top: 29px;
+    &.active > [data-section-title] {
+      background: #fff;
+      border-bottom: 0;
+    }
+    &:not(.active) {
+      padding: 0 !important;
+      > [data-section-content] {
+        opacity: 0;
+        overflow: hidden;
+        padding: 0;
+        position: absolute;
+        max-width: 100%;
+        height: 0;
+      }
+    }
+    > [data-section-title] {
+      @include border-radius(3px 3px 0 0);
+      background: #eee;
+      border: 1px solid #ccc;
+      color: inherit;
+      font-size: 12px;
+      font-weight: bold;
+      margin-bottom: 0;
+      padding: 3px ($sp2 - 1px) 1px;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: auto;
+      a {
+        width: 100%;
+        display: inline-block;
+        white-space: nowrap;
+      }
+      &:not([style]) {
+        visibility: hidden;
+      }
+      &:focus {
+        z-index: 1;
+      }
+    }
+    > [data-section-content] {
+      @include border-radius(0 0 3px 3px);
+      @include clearfix;
+      background: #fff;
+      border: 1px solid #ccc;
+      padding: $sp4 - 1px;
+    }
+  }
+}
+}