moovui 0.0.1

data/lib/moovui/version.rb

@@ -0,0 +1,3 @@
+module Moovui
+  VERSION = "0.0.1"
+end

data/lib/moovui.rb

@@ -0,0 +1,4 @@
+require "moovui/version"
+
+module Moovui
+end

data/modules/_accordion.scss

@@ -0,0 +1,51 @@
+@if $moovui-init {
+[data-section="accordion"] > :not(.active) [data-section-content] {
+  display: none;
+}
+}
+
+@mixin qna {
+  @include radius;
+  background: #dadde2;
+  font-size: 14px;
+  font-weight: 300;
+  margin: 0 0 $sp2;
+  [data-section-title] {
+    cursor: pointer;
+    font-weight: bold;
+    margin: 0;
+    padding: $sp $sp $sp 25px;
+    &:before {
+      @include entypo-icon;
+      @extend .icon-triangle-right:before;
+      margin: 0 0 0 -13px;
+      position: absolute;
+      width: 13px;
+    }
+    code {
+      background: none;
+      border: 0;
+      padding: 0;
+    }
+  }
+  .active [data-section-title]:before {
+    @extend .icon-triangle-down:before;
+    margin: 0 0 0 -14px;
+    width: 14px;
+  }
+  [data-section-content] {
+    @include clearfix;
+    padding: 0 $sp 0 25px;
+    &:after {
+      margin: $sp 0 0;
+    }
+  }
+}
+
+.#{$moovui-prefix}qna {
+  @include qna;
+}
+
+.win .#{$moovui-prefix}qna {
+  font-weight: normal;
+}

data/modules/_btn.scss

@@ -0,0 +1,130 @@
+@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;
+  display: inline-block;
+  font: 11px/#{$line-height} $font;
+  letter-spacing: 1px;
+  margin: 0 0 $sp2;
+  padding: 3px 10px;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  text-transform: uppercase;
+  vertical-align: top;
+  min-width: 40px;
+  height: 32px;
+  &: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%);
+  }
+  &[class*="icon-"]:before {
+    font-size: 18px;
+    vertical-align: top;
+  }
+  &[class*="icon-"]:not(:empty):before {
+    margin: 0 7px 0 0;
+  }
+}
+
+@include keyframes(warn) {
+  from {
+    background: tint($gray, 10%);
+  }
+  to {
+    background: 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%);
+  &:hover {
+    background: $green;
+  }
+  &:active {
+    background: shade($green, 5%);
+    border-color: shade($green, 30%) shade($green, 30%) shade($green, 20%);
+  }
+}
+
+@mixin btn-warning {
+  &:hover {
+    @include animation(warn 0.4s);
+    background: shade($red, 10%);
+  }
+  &:active {
+    background: shade($red, 20%);
+    border-color: shade($red, 35%) shade($red, 35%) shade($red, 25%);
+  }
+}
+
+@mixin btn-pill {
+  @include box-shadow(none);
+  border: 0;
+  padding: 0 10px;
+  min-width: 0;
+  height: 24px;
+}
+
+@mixin btn-small {
+  padding: 0 10px;
+  min-width: 0;
+  height: 26px;
+ &[class*="icon-"]:before {
+    font-size: 15px;
+  }
+  &[class*="icon-"]:not(:empty):before {
+    margin: 0 5px 0 0;
+  }
+}
+
+@mixin btn-big {
+  padding: 7px 16px;
+  min-width: 130px;
+  height: 40px;
+}
+
+.#{$moovui-prefix}btn.pill {
+  @include btn-pill;
+}
+
+.#{$moovui-prefix}btn.small {
+  @include btn-small;
+}
+
+.#{$moovui-prefix}btn {
+  @include btn;
+}
+
+.#{$moovui-prefix}btn.big {
+  @include btn-big;
+}
+
+.#{$moovui-prefix}btn.action {
+  @include btn-action;
+}
+
+.#{$moovui-prefix}btn.warning {
+  @include btn-warning;
+}
+
+@if $moovui-init {
+input[type="submit"], input[type="button"], button {
+  @include btn;
+}
+}

data/modules/_btnbar.scss

@@ -0,0 +1,56 @@
+@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;
+    &:first-of-type {
+      @include border-radius($radius 0 0 $radius);
+    }
+    &:last-of-type {
+      @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%);
+    }
+  }
+  .active + * {
+    input[type="submit"], input[type="button"], button, .#{$moovui-prefix}btn {
+      border-left-color: shade($gray, 30%);
+    }
+  }
+}
+
+.#{$moovui-prefix}btnbar {
+  @include btnbar;
+}
+
+@mixin btngroup {
+  @include clearfix;
+  font-size: 0; // instead of floating so that we can still center
+  li {
+    display: inline;
+  }
+  li + li {
+    input[type="submit"], input[type="button"], button, .#{$moovui-prefix}btn {
+      margin-left: $sp;
+    }
+  }
+  input[type="submit"], input[type="button"], button, .#{$moovui-prefix}btn {
+    & + input[type="submit"], & + input[type="button"], & + button, & + .#{$moovui-prefix}btn {
+      margin-left: $sp;
+    }
+  }
+}
+
+.#{$moovui-prefix}btngroup {
+  @include btngroup;
+}

data/modules/_code.scss

@@ -0,0 +1,55 @@
+@if $moovui-init {
+code {
+  @include radius;
+  background: #eee;
+  border: 1px solid #ccc;
+  color: #555;
+  margin: 0 1px;
+  padding: 0 3px;
+}
+
+code, pre, samp {
+  font-family: $code-font;
+  font-size: 13px;
+  font-weight: normal;
+}
+
+pre {
+  @include radius;
+  margin: 0;
+  code {
+    @include border-radius(0);
+    background: none;
+    border: 0;
+    color: inherit;
+    margin: 0;
+    padding: 0;
+  }
+}
+
+input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="tel"], textarea {
+  &.code {
+    font-family: $code-font;
+    font-size: 13px;
+  }
+}
+
+.cmd, pre {
+  background: #444;
+  border: 0;
+  color: #eee;
+  display: block;
+  margin: 5px 0 $sp2;
+  padding: $sp;
+}
+
+.cmd {
+  &:before {
+    color: #999;
+    content: "$> ";
+  }
+  + .#{$moovui-prefix}cmd {
+    margin: -$sp4 0 $sp2;
+  }
+}
+}

data/modules/_copy.scss

@@ -0,0 +1,99 @@
+@if $moovui-init {
+a {
+  color: $link-color;
+  text-decoration: none;
+  code {
+    color: inherit;
+  }
+}
+
+a.copy, .copy a {
+  font-weight: bold;
+}
+
+h1, h2 {
+  margin: 0 0 $sp2;
+}
+
+h1 {
+  font-size: $h1-size;
+}
+
+h2 {
+  color: $darkblue;
+  font-size: $h2-size;
+}
+
+h3, h4, h5, h6 {
+  margin: 0 0 $sp;
+}
+
+h3 {
+  color: $slategray;
+  font-size: $h3-size;
+}
+
+h4 {
+  font-size: $h4-size;
+}
+
+h5 {
+  font-size: $h5-size;
+  text-transform: uppercase;
+  color: #999
+}
+
+h1.copy, h2.copy, h3.copy, h4.copy, .copy h1, .copy h2, .copy h3, .copy h4 {
+  margin: 0 0 $line-height;
+}
+
+h1.copy, .copy h1 {
+  font-size: $h1-copy-size;
+  font-weight: 300;
+  line-height: 1.5 * $line-height;
+}
+
+h2.copy, .copy h2 {
+  color: #7c8899;
+  font-size: $h2-copy-size;
+  font-weight: 300;
+}
+
+h3.copy, .copy h3 {
+  color: #8d9aa9;
+  font-size: $h3-copy-size;
+  font-weight: normal;
+}
+
+h4.copy, .copy h4 {
+  color: #a9b1bd;
+  font-size: $h4-copy-size;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+}
+
+h5.copy, .copy h5 {
+  color: inherit;
+  font-size: $h5-copy-size;
+  text-transform: inherit;
+}
+
+hr {
+  border: 0;
+  border-top: 1px solid #ccc;
+  margin: $sp2 0;
+}
+
+p {
+  margin: 0 0 $sp2;
+}
+
+p.copy, .copy p {
+  font-weight: 300;
+  margin: 0 0 $line-height;
+}
+
+.win p.copy, .win .copy p {
+  font-weight: normal;
+}
+}

data/modules/_definition.scss

@@ -0,0 +1,34 @@
+@if $moovui-init {
+dl {
+  font-weight: 300;
+  margin: 0 0 $sp2 3em;
+  color: #666;
+  &:first-child {
+    margin-left: 1em;
+  }
+}
+
+dt {
+  display: inline;
+  font-weight: 400;
+  &:before {
+  content: "•";
+  font-weight: 300;
+  position: absolute;
+  margin-left: -1em;
+  }
+}
+
+dd {
+  display: inline;
+  margin: 0;
+  &:not(:empty):before {
+    -webkit-font-smoothing: antialiased;
+    content: "  ⎯  ";
+  }
+  &:after {
+    content: "";
+    display: block;
+  }
+}
+}

data/modules/_docs.scss

@@ -0,0 +1,127 @@
+@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;
+  background: #fff;
+  border: 1px solid #bdc4cb;
+  font-size: 14px;
+  margin: 0 0 $sp2;
+  padding: $sp 14px;
+  h5 {
+    margin: 0;
+  }
+  .doc-label {
+    font-size: 9px;
+    line-height: 16px;
+    margin: -11px 0 0;
+    padding: 0 6px;
+  }
+  .media {
+    float: left;
+    margin: 5px $sp2 0 0;
+    width: 87px;
+    height: 87px;
+  }
+  a {
+    float: right;
+  }
+}
+
+@mixin doc-label {
+  background: #bdc4cb;
+  color: white;
+  float: right;
+  font-size: 10px;
+  font-weight: bold;
+  letter-spacing: 1px;
+  line-height: 20px;
+  margin: -22px -14px 0 0;
+  padding: 0 $sp;
+  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;
+}
+
+.#{$moovui-prefix}doc-label {
+  @include doc-label;
+}
+
+.#{$moovui-prefix}doc-links {
+  @include doc-links;
+}
+
+.#{$moovui-prefix}doc-kw {
+  @include doc-keywords;
+}

data/modules/_dropdown.scss

@@ -0,0 +1,32 @@
+@if $moovui-init {
+[data-dropdown-content] {
+  @include box-shadow(rgba(#000, 0.2) 0 1px 4px);
+  background: #f9f9f9;
+  position: absolute;
+  top: -9999px;
+  width: 160px;
+  z-index: 99;
+  &:before {
+    border: 6px solid transparent;
+    border-bottom-color: #f9f9f9;
+    content: "";
+    margin: -11px 0 0;
+    position: absolute;
+    left: 10px;
+  }
+  li:not(:last-child) {
+    border-bottom: 1px solid #eee;
+  }
+  a {
+    color: #555;
+    display: block;
+    font-size: 13px;
+    font-weight: normal;
+    padding: 5px 10px;
+    white-space: nowrap;
+    &:hover {
+      background: #f0f0f0;
+    }
+  }
+}
+}