romo 0.0.1 → 0.1.0

data/.gitignore

@@ -2,8 +2,10 @@
 *.log
 *.rbc
 .rbx/
+.sass-cache/
 .bundle
 .config
+.powrc
 .yardoc
 Gemfile.lock
 InstalledFiles

data/Gemfile

@@ -3,4 +3,12 @@ source "https://rubygems.org"
 gemspec
 
 gem 'rake'
-gem 'pry'
+gem 'pry', "~> 0.9.0"
+
+gem 'rack'
+gem "deas",         "~> 0.27"
+gem "dassets",      '~> 0.9'
+gem "dassets-sass", "~> 0.3"
+gem "dassets-erb",  "~> 0.1"
+gem "kramdown",     "~> 1.4"
+gem "scmd",         "~> 2.3"

data/README.md

@@ -4,7 +4,7 @@ A UI Toolkit _loosely_ based on conventions from [Bootstrap v2.3.2](http://getbo
 
 ## Usage
 
-TODO: Write code samples and usage instructions here
+http://redding.github.io/romo/index.html
 
 ## Installation
 

data/assets/css/romo/_mixins.scss

@@ -0,0 +1,486 @@
+@import 'css/romo/vars';
+
+/* Globals */
+/* ------- */
+
+@mixin border-box($i:"") {
+  -webkit-box-sizing: border-box #{$i};
+     -moz-box-sizing: border-box #{$i};
+          box-sizing: border-box #{$i};
+}
+
+@mixin box-shadow($shadow, $i:"") {
+  -webkit-box-shadow: $shadow #{$i};
+     -moz-box-shadow: $shadow #{$i};
+          box-shadow: $shadow #{$i};
+}
+
+@mixin opacity($opacity, $i:"") {
+  opacity: $opacity / 100;
+}
+
+@mixin clearfix { /* h5bp.com/q */
+  &:before,
+  &:after { display: table; content: ""; line-height: 0; }
+  &:after { clear: both; }
+}
+
+@mixin cursor-grab {
+  cursor: grab;
+  cursor: -moz-grab;
+  cursor: -webkit-grab;
+}
+
+@mixin cursor-grabbing {
+  cursor: grabbing;
+  cursor: -moz-grabbing;
+  cursor: -webkit-grabbing;
+}
+
+@mixin user-select($value) {
+  -webkit-user-select: $value;
+     -moz-user-select: $value;
+      -ms-user-select: $value;
+          user-select: $value;
+}
+
+/* flexbox */
+
+@mixin display-flex($i:"") {
+  display: -webkit-flex #{$i};
+  display:         flex #{$i};
+}
+
+@mixin display-inline-flex($i:"") {
+  display: -webkit-inline-flex #{$i};
+  display:         inline-flex #{$i};
+}
+
+@mixin flex-direction($val) {
+  -webkit-flex-direction: $val;
+          flex-direction: $val;
+}
+
+@mixin flex-wrap($val) {
+  -webkit-flex-wrap: $val;
+          flex-wrap: $val;
+}
+
+@mixin flex-justify-content($val) {
+  -webkit-justify-content: $val;
+          justify-content: $val;
+}
+
+@mixin flex-align-items($val) {
+  -webkit-align-items: $val;
+          align-items: $val;
+}
+
+@mixin flex-align-self($val) {
+  -webkit-align-self: $val;
+          align-self: $val;
+}
+
+@mixin flex-grow($val) {
+  -webkit-flex-grow: $val;
+          flex-grow: $val;
+}
+
+@mixin flex-shrink($val) {
+  -webkit-flex-shrink: $val;
+          flex-shrink: $val;
+}
+
+/* Typography */
+/* ---------- */
+
+/* text weight */
+
+@mixin font-weight($val, $i:"") { font-weight: $val #{$i}; }
+
+@mixin font-weight0($i:"") { @include font-weight(300, $i); }
+@mixin font-weight1($i:"") { @include font-weight(300, $i); }
+@mixin font-weight2($i:"") { @include font-weight(300, $i); }
+@mixin font-weight3($i:"") { @include font-weight(200, $i); }
+
+/* text size */
+
+@mixin font-size0($i:"") { font-size: $fontSize0 #{$i}; }
+@mixin font-size1($i:"") { font-size: $fontSize1 #{$i}; }
+@mixin font-size2($i:"") { font-size: $fontSize2 #{$i}; }
+@mixin font-size3($i:"") { font-size: $fontSize3 #{$i}; }
+
+@mixin line-height0($i:"") { line-height: $lineHeight0 #{$i}; }
+@mixin line-height1($i:"") { line-height: $lineHeight1 #{$i}; }
+@mixin line-height2($i:"") { line-height: $lineHeight2 #{$i}; }
+@mixin line-height3($i:"") { line-height: $lineHeight3 #{$i}; }
+
+@mixin text0($i:"") { @include font-size0($i); @include line-height0($i); }
+@mixin text1($i:"") { @include font-size1($i); @include line-height1($i); }
+@mixin text2($i:"") { @include font-size2($i); @include line-height2($i); }
+@mixin text3($i:"") { @include font-size3($i); @include line-height3($i); }
+
+/* text alignment */
+
+@mixin align-left($i:"")   { text-align: left #{$i}; }
+@mixin align-center($i:"") { text-align: center #{$i}; }
+@mixin align-right($i:"")  { text-align: right #{$i}; }
+
+@mixin align-top($i:"")    { vertical-align: top #{$i}; }
+@mixin align-middle($i:"") { vertical-align: middle #{$i}; }
+@mixin align-bottom($i:"") { vertical-align: bottom #{$i}; }
+
+/* color emphasis */
+
+@mixin bg-base($i:"")    { background-color: $baseBackground #{$i}; }
+@mixin bg-alt($i:"")     { background-color: $altBackground #{$i}; }
+@mixin bg-striped($i:"") { background-color: $stripedBackground #{$i}; }
+@mixin bg-hover($i:"")   { background-color: $backgroundHover #{$i}; }
+
+@mixin border-base($i:"") { border-color: $baseBorderColor #{$i}; }
+@mixin border-alt($i:"")  { border-color: $altBorderColor #{$i}; }
+@mixin text-border-base($i:"")   { color: $baseBorderColor #{$i}; }
+@mixin text-border-alt($i:"")    { color: $altBorderColor #{$i}; }
+
+@mixin text-muted($i:"")       { color: $mutedText #{$i}; }
+@mixin text-muted-hover($i:"") { color: $mutedTextHover #{$i}; }
+@mixin bg-muted($i:"")         { background-color: $mutedBackground #{$i}; }
+@mixin bg-muted-hover($i:"")   { background-color: $mutedBackgroundHover #{$i}; }
+@mixin border-muted($i:"")     {     border-color: $mutedBorder #{$i}; }
+
+@mixin text-warning($i:"")       { color: $warningText #{$i}; }
+@mixin text-warning-hover($i:"") { color: $warningTextHover #{$i}; }
+@mixin bg-warning($i:"")         { background-color: $warningBackground #{$i}; }
+@mixin bg-warning-hover($i:"")   { background-color: $warningBackgroundHover #{$i}; }
+@mixin border-warning($i:"")     {     border-color: $warningBorder #{$i}; }
+
+@mixin text-error($i:"")       { color: $errorText #{$i}; }
+@mixin text-error-hover($i:"") { color: $errorTextHover #{$i}; }
+@mixin bg-error($i:"")         { background-color: $errorBackground #{$i}; }
+@mixin bg-error-hover($i:"")   { background-color: $errorBackgroundHover #{$i}; }
+@mixin border-error($i:"")     {     border-color: $errorBorder #{$i}; }
+
+@mixin text-info($i:"")       { color: $infoText #{$i}; }
+@mixin text-info-hover($i:"") { color: $infoTextHover #{$i}; }
+@mixin bg-info($i:"")         { background-color: $infoBackground #{$i}; }
+@mixin bg-info-hover($i:"")   { background-color: $infoBackgroundHover #{$i}; }
+@mixin border-info($i:"")     {     border-color: $infoBorder #{$i}; }
+
+@mixin text-success($i:"")       { color: $successText #{$i}; }
+@mixin text-success-hover($i:"") { color: $successTextHover #{$i}; }
+@mixin bg-success($i:"")         { background-color: $successBackground #{$i}; }
+@mixin bg-success-hover($i:"")   { background-color: $successBackgroundHover #{$i}; }
+@mixin border-success($i:"")     {     border-color: $successBorder #{$i}; }
+
+@mixin text-inverse($i:"")       { color: $inverseText #{$i}; }
+@mixin text-inverse-hover($i:"") { color: $inverseTextHover #{$i}; }
+@mixin bg-inverse($i:"")         { background-color: $inverseBackground #{$i}; }
+@mixin bg-inverse-hover($i:"")   { background-color: $inverseBackgroundHover #{$i}; }
+@mixin border-inverse($i:"")     {     border-color: $inverseBorder #{$i}; }
+
+/* Gradients */
+/* --------- */
+
+@mixin gradient-horizontal($start, $end) {
+  background-color: $end;
+  background-image: -moz-linear-gradient(left, $start, $end); // FF 3.6+
+  background-image: -webkit-gradient(linear, 0 0, 100% 0, from($start), to($end)); // Safari 4+, Chrome 2+
+  background-image: -webkit-linear-gradient(left, $start, $end); // Safari 5.1+, Chrome 10+
+  background-image: -o-linear-gradient(left, $start, $end); // Opera 11.10
+  background-image: linear-gradient(to right, $start, $end); // Standard, IE10
+  background-repeat: repeat-x;
+}
+@mixin gradient-vertical($start, $end) {
+  background-color: mix($start, $end, 60%);
+  background-image: -moz-linear-gradient(top, $start, $end); // FF 3.6+
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from($start), to($end)); // Safari 4+, Chrome 2+
+  background-image: -webkit-linear-gradient(top, $start, $end); // Safari 5.1+, Chrome 10+
+  background-image: -o-linear-gradient(top, $start, $end); // Opera 11.10
+  background-image: linear-gradient(to bottom, $start, $end); // Standard, IE10
+  background-repeat: repeat-x;
+}
+
+/* Inputs */
+/* ------ */
+
+@mixin input-focus {
+  border-color: $inputFocusColor;
+  outline: 0;
+  @include box-shadow((inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6)));
+}
+
+@mixin select-optgroup {
+  font-size: $fontSize0;
+  line-height: $lineHeight0;
+
+  background-color: $inputColor;
+  color: $inputBackground;
+}
+
+@mixin select-option {
+  font-size: $baseFontSize;
+  line-height: $baseLineHeight;
+  padding: 0 $spacingSize0;
+
+  background-color: $inputBackground;
+  color: $inputColor;
+}
+
+/* Buttons */
+/* ------- */
+
+@mixin button-bg($start, $end, $text) {
+  color: $text;
+  border-color: $end $end darken($end, 10%);
+
+  background-color: mix($start, $end, 60%);
+  *background-color: $end; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
+
+  /* in these cases the gradient won't cover the background, so we override */
+  &:hover, &:focus, &.active, &:active, &.disabled, &[disabled] {
+    color: $text;
+    background-color: $end;
+    *background-color: darken($end, 5%);
+  }
+}
+
+@mixin button-pad($lineHeight) {
+  $inputHeight: ($lineHeight / 2) * 3; /* 30px */
+  $btnPaddingTopBottom: ($inputHeight - 2 - $lineHeight) / 2; /* 4px; "2" is for the borders */
+  $btnPaddingLeftRight: $btnPaddingTopBottom * 3; /* 12px; keep the 4px to 12px ratio */
+  padding: $btnPaddingTopBottom $btnPaddingLeftRight;
+}
+
+@mixin button-pad0 { @include button-pad($lineHeight0); }
+@mixin button-pad1 { @include button-pad($lineHeight1); }
+@mixin button-pad2 { @include button-pad($lineHeight2); }
+@mixin button-pad3 { @include button-pad($lineHeight3); }
+
+@mixin button-height($lineHeight) {
+  height: ($lineHeight / 2) * 3; /* 30px */
+  line-height: $lineHeight;
+}
+
+@mixin button-height0 { @include button-height($lineHeight0); }
+@mixin button-height1 { @include button-height($lineHeight1); }
+@mixin button-height2 { @include button-height($lineHeight2); }
+@mixin button-height3 { @include button-height($lineHeight3); }
+
+@mixin button-inline($lineHeight) {
+  line-height: ($lineHeight / 2) * 3; /* 30px */
+  @include align-middle;
+}
+
+@mixin button-inline0 { @include button-inline($lineHeight0); }
+@mixin button-inline1 { @include button-inline($lineHeight1); }
+@mixin button-inline2 { @include button-inline($lineHeight2); }
+@mixin button-inline3 { @include button-inline($lineHeight3); }
+
+/* Labels */
+/* ------- */
+
+@mixin label-pad($lineHeight) {
+  $inputHeight: ($lineHeight / 2) * 3; /* 30px */
+  $btnPaddingTopBottom: ($inputHeight - $lineHeight) / 2; /* 5px */
+  $btnPaddingLeftRight: ($btnPaddingTopBottom - 1) * 3; /* 12px; subtract "2" to match btn padding */
+  padding: $btnPaddingTopBottom $btnPaddingLeftRight;
+}
+
+@mixin label-pad0 { @include label-pad($lineHeight0); }
+@mixin label-pad1 { @include label-pad($lineHeight1); }
+@mixin label-pad2 { @include label-pad($lineHeight2); }
+@mixin label-pad3 { @include label-pad($lineHeight3); }
+
+@mixin label-inline($lineHeight) {
+  line-height: ($lineHeight / 2) * 3; /* 30px */
+  @include align-middle;
+}
+
+@mixin label-inline0 { @include label-inline($lineHeight0); }
+@mixin label-inline1 { @include label-inline($lineHeight1); }
+@mixin label-inline2 { @include label-inline($lineHeight2); }
+@mixin label-inline3 { @include label-inline($lineHeight3); }
+
+/* Scaffolding */
+/* ----------- */
+
+/* grid helpers */
+
+@mixin grid-span  ($num, $total, $i:"") { width:       $num * (100% / $total); }
+@mixin grid-offset($num, $total, $i:"") { margin-left: $num * (100% / $total); }
+
+/* list helpers */
+
+@mixin list-unstyled($i:"") {
+  @include rm-push;
+  @include rm-pad;
+  list-style: none #{$i};
+}
+@mixin list-styled($i:"") {
+  @include rm-push;
+  @include rm-pad;
+  list-style-position: outside #{$i};
+  padding-left: ($baseFontSize * $lineHeightToSizeRatio) #{$i};
+}
+
+/* border helpers */
+
+@mixin border-style($val, $i:"")        { border-style:        $val #{$i}; }
+@mixin border-style-top($val, $i:"")    { border-top-style:    $val #{$i}; }
+@mixin border-style-right($val, $i:"")  { border-right-style:  $val #{$i}; }
+@mixin border-style-bottom($val, $i:"") { border-bottom-style: $val #{$i}; }
+@mixin border-style-left($val, $i:"")   { border-left-style:   $val #{$i}; }
+
+@mixin border($size, $i:"")        { border-width:        $size #{$i}; @include border-style(solid); }
+@mixin border-top($size, $i:"")    { border-top-width:    $size #{$i}; @include border-style-top(solid); }
+@mixin border-right($size, $i:"")  { border-right-width:  $size #{$i}; @include border-style-right(solid); }
+@mixin border-bottom($size, $i:"") { border-bottom-width: $size #{$i}; @include border-style-bottom(solid); }
+@mixin border-left($size, $i:"")   { border-left-width:   $size #{$i}; @include border-style-left(solid); }
+
+@mixin border0($i:"")        { @include border($borderSize0, $i); }
+@mixin border0-top($i:"")    { @include border-top($borderSize0, $i); }
+@mixin border0-right($i:"")  { @include border-right($borderSize0, $i); }
+@mixin border0-bottom($i:"") { @include border-bottom($borderSize0, $i); }
+@mixin border0-left($i:"")   { @include border-left($borderSize0, $i); }
+
+@mixin border1($i:"")        { @include border($borderSize1, $i); }
+@mixin border1-top($i:"")    { @include border-top($borderSize1, $i); }
+@mixin border1-right($i:"")  { @include border-right($borderSize1, $i); }
+@mixin border1-bottom($i:"") { @include border-bottom($borderSize1, $i); }
+@mixin border1-left($i:"")   { @include border-left($borderSize1, $i); }
+
+@mixin border2($i:"")        { @include border($borderSize2, $i); }
+@mixin border2-top($i:"")    { @include border-top($borderSize2, $i); }
+@mixin border2-right($i:"")  { @include border-right($borderSize2, $i); }
+@mixin border2-bottom($i:"") { @include border-bottom($borderSize2, $i); }
+@mixin border2-left($i:"")   { @include border-left($borderSize2, $i); }
+
+@mixin rm-border($i:"")        { @include border(0, $i); }
+@mixin rm-border-top($i:"")    { @include border-top(0, $i); }
+@mixin rm-border-right($i:"")  { @include border-right(0, $i); }
+@mixin rm-border-bottom($i:"") { @include border-bottom(0, $i); }
+@mixin rm-border-left($i:"")   { @include border-left(0, $i); }
+
+@mixin border-radius($radius, $i:"") {
+  -webkit-border-radius: $radius #{$i};
+     -moz-border-radius: $radius #{$i};
+      -ms-border-radius: $radius #{$i};
+          border-radius: $radius #{$i};
+}
+
+@mixin border-top-left-radius($radius, $i:"") {
+  -webkit-border-top-left-radius: $radius #{$i};
+      -moz-border-radius-topleft: $radius #{$i};
+      -ms-border-top-left-radius: $radius #{$i};
+          border-top-left-radius: $radius #{$i};
+}
+
+@mixin border-top-right-radius($radius, $i:"") {
+  -webkit-border-top-right-radius: $radius #{$i};
+      -moz-border-radius-topright: $radius #{$i};
+      -ms-border-top-right-radius: $radius #{$i};
+          border-top-right-radius: $radius #{$i};
+}
+
+@mixin border-bottom-right-radius($radius, $i:"") {
+  -webkit-border-bottom-right-radius: $radius #{$i};
+      -moz-border-radius-bottomright: $radius #{$i};
+      -ms-border-bottom-right-radius: $radius #{$i};
+          border-bottom-right-radius: $radius #{$i};
+}
+
+@mixin border-bottom-left-radius($radius, $i:"") {
+  -webkit-border-bottom-left-radius: $radius #{$i};
+      -moz-border-radius-bottomleft: $radius #{$i};
+      -ms-border-bottom-left-radius: $radius #{$i};
+          border-bottom-left-radius: $radius #{$i};
+}
+
+@mixin border0-radius($i:"")   { @include border-radius($borderRadius0, $i); }
+@mixin border1-radius($i:"")   { @include border-radius($borderRadius1, $i); }
+@mixin border2-radius($i:"")   { @include border-radius($borderRadius2, $i); }
+@mixin rm-border-radius($i:"") { @include border-radius(0px, $i); }
+
+@mixin border0-top-left-radius($i:"")   { @include border-top-left-radius($borderRadius0, $i); }
+@mixin border1-top-left-radius($i:"")   { @include border-top-left-radius($borderRadius1, $i); }
+@mixin border2-top-left-radius($i:"")   { @include border-top-left-radius($borderRadius2, $i); }
+@mixin rm-border-top-left-radius($i:"") { @include border-top-left-radius(0px, $i); }
+
+@mixin border0-top-right-radius($i:"")   { @include border-top-right-radius($borderRadius0, $i); }
+@mixin border1-top-right-radius($i:"")   { @include border-top-right-radius($borderRadius1, $i); }
+@mixin border2-top-right-radius($i:"")   { @include border-top-right-radius($borderRadius2, $i); }
+@mixin rm-border-top-right-radius($i:"") { @include border-top-right-radius(0px, $i); }
+
+@mixin border0-bottom-right-radius($i:"")   { @include border-bottom-right-radius($borderRadius0, $i); }
+@mixin border1-bottom-right-radius($i:"")   { @include border-bottom-right-radius($borderRadius1, $i); }
+@mixin border2-bottom-right-radius($i:"")   { @include border-bottom-right-radius($borderRadius2, $i); }
+@mixin rm-border-bottom-right-radius($i:"") { @include border-bottom-right-radius(0px, $i); }
+
+@mixin border0-bottom-left-radius($i:"")   { @include border-bottom-left-radius($borderRadius0, $i); }
+@mixin border1-bottom-left-radius($i:"")   { @include border-bottom-left-radius($borderRadius1, $i); }
+@mixin border2-bottom-left-radius($i:"")   { @include border-bottom-left-radius($borderRadius2, $i); }
+@mixin rm-border-bottom-left-radius($i:"") { @include border-bottom-left-radius(0px, $i); }
+
+/* spacing */
+
+@mixin pad($size, $i:"")        { padding:        $size #{$i}; }
+@mixin pad-top($size, $i:"")    { padding-top:    $size #{$i}; }
+@mixin pad-right($size, $i:"")  { padding-right:  $size #{$i}; }
+@mixin pad-bottom($size, $i:"") { padding-bottom: $size #{$i}; }
+@mixin pad-left($size, $i:"")   { padding-left:   $size #{$i}; }
+
+@mixin pad0($i:"")   { @include pad($spacingSize0, $i); }
+@mixin pad1($i:"")   { @include pad($spacingSize1, $i); }
+@mixin pad2($i:"")   { @include pad($spacingSize2, $i); }
+@mixin rm-pad($i:"") { @include pad(0, $i); }
+
+@mixin pad0-top($i:"")   { @include pad-top($spacingSize0, $i); }
+@mixin pad1-top($i:"")   { @include pad-top($spacingSize1, $i); }
+@mixin pad2-top($i:"")   { @include pad-top($spacingSize2, $i); }
+@mixin rm-pad-top($i:"") { @include pad-top(0, $i); }
+
+@mixin pad0-right($i:"")   { @include pad-right($spacingSize0, $i); }
+@mixin pad1-right($i:"")   { @include pad-right($spacingSize1, $i); }
+@mixin pad2-right($i:"")   { @include pad-right($spacingSize2, $i); }
+@mixin rm-pad-right($i:"") { @include pad-right(0, $i); }
+
+@mixin pad0-bottom($i:"")   { @include pad-bottom($spacingSize0, $i); }
+@mixin pad1-bottom($i:"")   { @include pad-bottom($spacingSize1, $i); }
+@mixin pad2-bottom($i:"")   { @include pad-bottom($spacingSize2, $i); }
+@mixin rm-pad-bottom($i:"") { @include pad-bottom(0, $i); }
+
+@mixin pad0-left($i:"")   { @include pad-left($spacingSize0, $i); }
+@mixin pad1-left($i:"")   { @include pad-left($spacingSize1, $i); }
+@mixin pad2-left($i:"")   { @include pad-left($spacingSize2, $i); }
+@mixin rm-pad-left($i:"") { @include pad-left(0, $i); }
+
+@mixin push($size, $i:"")        { margin:        $size #{$i}; }
+@mixin push-top($size, $i:"")    { margin-top:    $size #{$i}; }
+@mixin push-right($size, $i:"")  { margin-right:  $size #{$i}; }
+@mixin push-bottom($size, $i:"") { margin-bottom: $size #{$i}; }
+@mixin push-left($size, $i:"")   { margin-left:   $size #{$i}; }
+
+@mixin push0($i:"")   { @include push($spacingSize0, $i); }
+@mixin push1($i:"")   { @include push($spacingSize1, $i); }
+@mixin push2($i:"")   { @include push($spacingSize2, $i); }
+@mixin rm-push($i:"") { @include push(0, $i); }
+
+@mixin push0-top($i:"")   { @include push-top($spacingSize0, $i); }
+@mixin push1-top($i:"")   { @include push-top($spacingSize1, $i); }
+@mixin push2-top($i:"")   { @include push-top($spacingSize2, $i); }
+@mixin rm-push-top($i:"") { @include push-top(0, $i); }
+
+@mixin push0-right($i:"")   { @include push-right($spacingSize0, $i); }
+@mixin push1-right($i:"")   { @include push-right($spacingSize1, $i); }
+@mixin push2-right($i:"")   { @include push-right($spacingSize2, $i); }
+@mixin rm-push-right($i:"") { @include push-right(0, $i); }
+
+@mixin push0-bottom($i:"")   { @include push-bottom($spacingSize0, $i); }
+@mixin push1-bottom($i:"")   { @include push-bottom($spacingSize1, $i); }
+@mixin push2-bottom($i:"")   { @include push-bottom($spacingSize2, $i); }
+@mixin rm-push-bottom($i:"") { @include push-bottom(0, $i); }
+
+@mixin push0-left($i:"")   { @include push-left($spacingSize0, $i); }
+@mixin push1-left($i:"")   { @include push-left($spacingSize1, $i); }
+@mixin push2-left($i:"")   { @include push-left($spacingSize2, $i); }
+@mixin rm-push-left($i:"") { @include push-left(0, $i); }

data/assets/css/romo/_vars.scss

@@ -0,0 +1,159 @@
+/* Base */
+/* ---- */
+
+$lineHeightToSizeRatio: 20/14;
+
+$baseFontFamily:  "Helvetica Neue", Helvetica, Arial, sans-serif;
+$baseFontSize:    14px;
+$baseLineHeight:  $baseFontSize * $lineHeightToSizeRatio;
+
+$fontSize0: ($baseFontSize * 0.85);    /* ~12px */
+$fontSize1: $baseFontSize;             /*  14px */
+$fontSize2: ($baseFontSize * 1.25);    /* ~18px */
+$fontSize3: ($baseFontSize * 1.75);    /* ~24px */
+
+$lineHeight0: ($baseLineHeight * 0.75); /* 15px */;
+$lineHeight1: $baseLineHeight;          /* 20px */
+$lineHeight2: ($baseLineHeight * 1.25); /* 25px */
+$lineHeight3: ($baseLineHeight * 1.50); /* 30px */
+
+$imgHeight0: $lineHeight0 * 0.8; /* 12px */;
+$imgHeight1: $lineHeight1 * 0.8; /* 16px */
+$imgHeight2: $lineHeight2 * 0.8; /* 20px */
+$imgHeight3: $lineHeight3 * 0.8; /* 24px */
+
+$spacingSize1: $baseLineHeight / 2;
+$spacingSize0: $spacingSize1 * 0.35;
+$spacingSize2: $spacingSize1 * 2;
+
+$inputHeight: ($baseLineHeight / 2) * 3; /* 30px */
+$inputSize1: 220px;
+$inputSize0: $inputSize1 - 120px;
+$inputSize2: $inputSize1 + 120px;
+
+$notAllowedCursor: not-allowed;
+
+/* colors */
+
+$baseBackground:    #fff;
+$altBackground:     #ededed;
+$stripedBackground: #fafafa;
+$backgroundHover:   #f5f5f5;
+
+$baseColor:     #444;
+$disabledColor: #999;
+
+$baseBorderColor:  #ccc;
+$altBorderColor:   #fff;
+
+$linkColor:      #08c;
+$linkColorHover: darken($linkColor, 15%);
+
+$inputBackground:         #fff;
+$inputAltBackground:      #eee;
+$inputColor:              #444;
+$inputDisabledColor:      #eee;
+$inputFocusColor:         rgba(82, 168, 236, 0.8);
+$inputHighlightBackround: #3c83c7;
+
+$btnBorder:                     $baseBorderColor;
+$btnBackground:                 $baseBackground;
+$btnBackgroundHighlight:        darken($btnBackground, 10%);
+$btnColor:                      $baseColor;
+$btnColorHover:                 #333;
+
+$btnAltBackground:              $altBackground;
+$btnAltBackgroundHighlight:     darken($btnAltBackground, 10%);
+$btnAltColor:                   $btnColor;
+
+$btnPrimaryBackground:          $linkColor;
+$btnPrimaryBackgroundHighlight: adjust_hue($btnPrimaryBackground, 20%);
+$btnPrimaryColor:               #fff;
+
+$btnWarningBackgroundHighlight: #f89406;
+$btnWarningBackground:          lighten($btnWarningBackgroundHighlight, 15%);
+$btnWarningColor:               #fff;
+
+$btnDangerBackground:           #ee5f5b;
+$btnDangerBackgroundHighlight:  #bd362f;
+$btnDangerColor:                #fff;
+
+$btnInfoBackground:             #5bc0de;
+$btnInfoBackgroundHighlight:    #2f96b4;
+$btnInfoColor:                  #fff;
+
+$btnSuccessBackground:          #62c462;
+$btnSuccessBackgroundHighlight: #51a351;
+$btnSuccessColor:               #fff;
+
+$btnInverseBackground:          #444;
+$btnInverseBackgroundHighlight: #222;
+$btnInverseColor:               #fff;
+
+$mutedText:              #999999;
+$mutedTextHover:         darken($mutedText, 10%);
+$mutedBackground:        #f9f9f9;
+$mutedBackgroundHover:   darken($mutedBackground, 5%);
+$mutedBorder:            darken(adjust_hue($mutedBackground, -10), 5%);
+
+$warningText:            #c09853;
+$warningTextHover:       darken($warningText, 10%);
+$warningBackground:      #fcf8e3;
+$warningBackgroundHover: darken($warningBackground, 5%);
+$warningBorder:          darken(adjust_hue($warningBackground, -10), 3%);
+
+$errorText:              #b94a48;
+$errorTextHover:         darken($errorText, 10%);
+$errorBackground:        #f2dede;
+$errorBackgroundHover:   darken($errorBackground, 5%);
+$errorBorder:            darken(adjust_hue($errorBackground, -10), 3%);
+
+$infoText:               #3a87ad;
+$infoTextHover:          darken($infoText, 10%);
+$infoBackground:         #d9edf7;
+$infoBackgroundHover:    darken($infoBackground, 5%);
+$infoBorder:             darken(adjust_hue($infoBackground, -10), 7%);
+
+$successText:            #468847;
+$successTextHover:       darken($successText, 10%);
+$successBackground:      #dff0d8;
+$successBackgroundHover: darken($successBackground, 5%);
+$successBorder:          darken(adjust_hue($successBackground, -10), 5%);
+
+$inverseText:            #ffffff;
+$inverseTextHover:       darken($inverseText, 10%);
+$inverseBackground:      #444444;
+$inverseBackgroundHover: darken($inverseBackground, 5%);
+$inverseBorder:          darken(adjust_hue($inverseBackground, -10), 3%);
+
+$tabBackground:       $altBackground;
+$tabBackgroundHover:  darken($altBackground, 5%);
+$tabBackgroundActive: #222;
+$tabColor:            $baseColor;
+$tabColorActive:      #fff;
+$tabColorDisabled:    $disabledColor;
+
+$tooltipBackground:   #222;
+$tooltipColor:        #eee;
+
+/* borders */
+
+$borderSize1: 1px;
+$borderSize0: $borderSize1 * 1;
+$borderSize2: $borderSize1 * 2;
+
+$borderRadius1: 4px;
+$borderRadius0: 2px;
+$borderRadius2: 6px;
+
+/* tabs */
+
+$tabDividerSize: 4px;
+
+/* z-index */
+
+$tooltipZIndex:  1100;
+$dropdownZIndex: 1200;
+// 1300 is reserved for app specific things like nav bars, etc
+// modals should appear on top of everything though
+$modalZIndex:    1400;