romo 0.17.1 → 0.18.0

checksums.yaml

@@ -1,7 +1,7 @@
 --- 
 SHA1: 
-  metadata.gz: 217361e9543ff348d3315d69454971dce89254f1
-  data.tar.gz: dd28175c1f05929102d1f06b4846b83a6ee1eb34
+  metadata.gz: ea1f09e9f40345733333214f4eb518f1683931a0
+  data.tar.gz: c809d3cc92caa7e10c23bc3f8a58f514e6451887
 SHA512: 
-  metadata.gz: f4c569de6a994ed66af85e1e187a1f00aaab08390d550e95eae5816a9a250fba13e490b349f1a26934e6c8bebf27e21afc4abf842d95b76821e696bebf0fd541
-  data.tar.gz: d81fd57f559711ce1f7097ad8204505f627621a2edd4e633d6d234b1917b907d6b75684e5864dd96a0fb6a6caa9875bee4d048466ae15b0d51d2c57575f58cb4
+  metadata.gz: 034849bad78983b728dcc61face29377213df2e2fd7736a91e4b4a98ea5f3044b98663406745fb6813759c5d178f6aadcfa95012bf8823ff74edeb7a255f6f52
+  data.tar.gz: 0fc89f9fb1967b8fb08dd1a0e652009bdfe9cfe9ba91727887aa98455fd8531b47b7e9426a8fde3a4fd1372fc6c27aaf976eda3c47fd80091a04450b43938118

data/Gemfile

@@ -2,12 +2,15 @@ source "https://rubygems.org"
 
 gemspec
 
-gem 'pry', "~> 0.9.0"
+gem 'pry',  "~> 0.9.0"
+gem 'json', "~> 1.8.3"
+
 
 gem 'rack'
-gem "deas",        "~> 0.40.0"
+gem "deas",        "~> 0.43.1"
+gem "deas-erubis", "~> 0.5.5"
 gem "dassets-erb", "~> 0.2.0"
-gem "scmd",        "~> 3.0.2"
+gem "scmd",        "~> 3.0.3"
 gem "kramdown",    "~> 1.10"
 
 # lock in sass to 3.4.21 as 3.5+ will no longer support ruby 1.8.7

data/assets/css/romo/_mixins.scss

@@ -129,71 +129,205 @@
 
 /* text alignment */
 
-@mixin align-left($i:"")   { text-align: left #{$i}; }
+@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-right($i:"")  { text-align: right #{$i};  }
 
-@mixin align-top($i:"")    { vertical-align: top #{$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-striped($i:"") { background-color: $stripedBgColor #{$i}; }
-@mixin bg-hover($i:"")   { background-color: $bgColorHover #{$i}; }
+@mixin bg-hover($i:"")   { background-color: $bgColorHover #{$i};   }
 
 @mixin text-border-base($i:"") { color: $baseBorderColor #{$i}; }
-@mixin text-border-alt($i:"")  { color: $altBorderColor #{$i}; }
+@mixin text-border-alt($i:"")  { color: $altBorderColor #{$i};  }
 
 @mixin text-disabled($i:"") { color: $disabledColor #{$i}; }
 
-@mixin text-base($i:"")       { color: $baseText #{$i}; }
-@mixin text-base-hover($i:"") { color: $baseTextHover #{$i}; }
-@mixin bg-base($i:"")         { background-color: $baseBackground #{$i}; }
-@mixin bg-base-hover($i:"")   { background-color: $baseBackgroundHover #{$i}; }
-@mixin border-base($i:"")     {     border-color: $baseBorder #{$i}; }
-
-@mixin text-alt($i:"")       { color: $altText #{$i}; }
-@mixin text-alt-hover($i:"") { color: $altTextHover #{$i}; }
-@mixin bg-alt($i:"")         { background-color: $altBackground #{$i}; }
-@mixin bg-alt-hover($i:"")   { background-color: $altBackgroundHover #{$i}; }
-@mixin border-alt($i:"")     {     border-color: $altBorder #{$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}; }
+@mixin text-base($i:"")          {            color: $baseText #{$i};      }
+@mixin text-base-hover($i:"")    {            color: $baseTextHover #{$i}; }
+@mixin bg-base($i:"")            { background-color: $baseBg #{$i};        }
+@mixin bg-base-hover($i:"")      { background-color: $baseBgHover #{$i};   }
+@mixin border-base($i:"")        {     border-color: $baseBorder #{$i};    }
+
+@mixin text-alt($i:"")           {            color: $altText #{$i};      }
+@mixin text-alt-hover($i:"")     {            color: $altTextHover #{$i}; }
+@mixin bg-alt($i:"")             { background-color: $altBg #{$i};        }
+@mixin bg-alt-hover($i:"")       { background-color: $altBgHover #{$i};   }
+@mixin border-alt($i:"")         {     border-color: $altBorder #{$i};    }
+
+@mixin text-muted($i:"")         {            color: $mutedText #{$i};      }
+@mixin text-muted-hover($i:"")   {            color: $mutedTextHover #{$i}; }
+@mixin bg-muted($i:"")           { background-color: $mutedBg #{$i};        }
+@mixin bg-muted-hover($i:"")     { background-color: $mutedBgHover #{$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: $warningBg #{$i};        }
+@mixin bg-warning-hover($i:"")   { background-color: $warningBgHover #{$i};   }
+@mixin border-warning($i:"")     {     border-color: $warningBorder #{$i};    }
+
+@mixin text-danger($i:"")        {            color: $dangerText #{$i};      }
+@mixin text-danger-hover($i:"")  {            color: $dangerTextHover #{$i}; }
+@mixin bg-danger($i:"")          { background-color: $dangerBg #{$i};        }
+@mixin bg-danger-hover($i:"")    { background-color: $dangerBgHover #{$i};   }
+@mixin border-danger($i:"")      {     border-color: $dangerBorder #{$i};    }
+
+@mixin text-info($i:"")          {            color: $infoText #{$i};      }
+@mixin text-info-hover($i:"")    {            color: $infoTextHover #{$i}; }
+@mixin bg-info($i:"")            { background-color: $infoBg #{$i};        }
+@mixin bg-info-hover($i:"")      { background-color: $infoBgHover #{$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: $successBg #{$i};        }
+@mixin bg-success-hover($i:"")   { background-color: $successBgHover #{$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: $inverseBg #{$i};        }
+@mixin bg-inverse-hover($i:"")   { background-color: $inverseBgHover #{$i};   }
+@mixin border-inverse($i:"")     {     border-color: $inverseBorder #{$i};    }
+
+/* explicit colors */
+
+@mixin text-dark-red($i:"")            {            color: $darkRed #{$i};          }
+@mixin text-dark-red-hover($i:"")      {            color: $darkRedTextHover #{$i}; }
+@mixin bg-dark-red($i:"")              { background-color: $darkRed #{$i};          }
+@mixin bg-dark-red-hover($i:"")        { background-color: $darkRedBgHover #{$i};   }
+@mixin border-dark-red($i:"")          {     border-color: $darkRed #{$i};          }
+
+@mixin text-red($i:"")                 {            color: $red #{$i};          }
+@mixin text-red-hover($i:"")           {            color: $redTextHover #{$i}; }
+@mixin bg-red($i:"")                   { background-color: $red #{$i};          }
+@mixin bg-red-hover($i:"")             { background-color: $redBgHover #{$i};   }
+@mixin border-red($i:"")               {     border-color: $red #{$i};          }
+
+@mixin text-light-red($i:"")           {            color: $lightRed #{$i};          }
+@mixin text-light-red-hover($i:"")     {            color: $lightRedTextHover #{$i}; }
+@mixin bg-light-red($i:"")             { background-color: $lightRed #{$i};          }
+@mixin bg-light-red-hover($i:"")       { background-color: $lightRedBgHover #{$i};   }
+@mixin border-light-red($i:"")         {     border-color: $lightRed #{$i};          }
+
+@mixin text-pastel-red($i:"")          {            color: $pastelRed #{$i};          }
+@mixin text-pastel-red-hover($i:"")    {            color: $pastelRedTextHover #{$i}; }
+@mixin bg-pastel-red($i:"")            { background-color: $pastelRed #{$i};          }
+@mixin bg-pastel-red-hover($i:"")      { background-color: $pastelRedBgHover #{$i};   }
+@mixin border-pastel-red($i:"")        {     border-color: $pastelRed #{$i};          }
+
+@mixin text-dark-orange($i:"")         {            color: $darkOrange #{$i};          }
+@mixin text-dark-orange-hover($i:"")   {            color: $darkOrangeTextHover #{$i}; }
+@mixin bg-dark-orange($i:"")           { background-color: $darkOrange #{$i};          }
+@mixin bg-dark-orange-hover($i:"")     { background-color: $darkOrangeBgHover #{$i};   }
+@mixin border-dark-orange($i:"")       {     border-color: $darkOrange #{$i};          }
+
+@mixin text-orange($i:"")              {            color: $orange #{$i};          }
+@mixin text-orange-hover($i:"")        {            color: $orangeTextHover #{$i}; }
+@mixin bg-orange($i:"")                { background-color: $orange #{$i};          }
+@mixin bg-orange-hover($i:"")          { background-color: $orangeBgHover #{$i};   }
+@mixin border-orange($i:"")            {     border-color: $orange #{$i};          }
+
+@mixin text-yellow($i:"")              {            color: $yellow #{$i};          }
+@mixin text-yellow-hover($i:"")        {            color: $yellowTextHover #{$i}; }
+@mixin bg-yellow($i:"")                { background-color: $yellow #{$i};          }
+@mixin bg-yellow-hover($i:"")          { background-color: $yellowBgHover #{$i};   }
+@mixin border-yellow($i:"")            {     border-color: $yellow #{$i};          }
+
+@mixin text-pastel-yellow($i:"")       {            color: $pastelYellow #{$i};          }
+@mixin text-pastel-yellow-hover($i:"") {            color: $pastelYellowTextHover #{$i}; }
+@mixin bg-pastel-yellow($i:"")         { background-color: $pastelYellow #{$i};          }
+@mixin bg-pastel-yellow-hover($i:"")   { background-color: $pastelYellowBgHover #{$i};   }
+@mixin border-pastel-yellow($i:"")     {     border-color: $pastelYellow #{$i};          }
+
+@mixin text-purple($i:"")              {            color: $purple #{$i};          }
+@mixin text-purple-hover($i:"")        {            color: $purpleTextHover #{$i}; }
+@mixin bg-purple($i:"")                { background-color: $purple #{$i};          }
+@mixin bg-purple-hover($i:"")          { background-color: $purpleBgHover #{$i};   }
+@mixin border-purple($i:"")            {     border-color: $purple #{$i};          }
+
+@mixin text-light-purple($i:"")       {            color: $lightPurple #{$i};          }
+@mixin text-light-purple-hover($i:"") {            color: $lightPurpleTextHover #{$i}; }
+@mixin bg-light-purple($i:"")         { background-color: $lightPurple #{$i};          }
+@mixin bg-light-purple-hover($i:"")   { background-color: $lightPurpleBgHover #{$i};   }
+@mixin border-light-purple($i:"")     {     border-color: $lightPurple #{$i};          }
+
+@mixin text-dark-pink($i:"")          {            color: $darkPink #{$i};          }
+@mixin text-dark-pink-hover($i:"")    {            color: $darkPinkTextHover #{$i}; }
+@mixin bg-dark-pink($i:"")            { background-color: $darkPink #{$i};          }
+@mixin bg-dark-pink-hover($i:"")      { background-color: $darkPinkBgHover #{$i};   }
+@mixin border-dark-pink($i:"")        {     border-color: $darkPink #{$i};          }
+
+@mixin text-hot-pink($i:"")           {            color: $hotPink #{$i};          }
+@mixin text-hot-pink-hover($i:"")     {            color: $hotPinkTextHover #{$i}; }
+@mixin bg-hot-pink($i:"")             { background-color: $hotPink #{$i};          }
+@mixin bg-hot-pink-hover($i:"")       { background-color: $hotPinkBgHover #{$i};   }
+@mixin border-hot-pink($i:"")         {     border-color: $hotPink #{$i};          }
+
+@mixin text-pink($i:"")               {            color: $pink #{$i};          }
+@mixin text-pink-hover($i:"")         {            color: $pinkTextHover #{$i}; }
+@mixin bg-pink($i:"")                 { background-color: $pink #{$i};          }
+@mixin bg-pink-hover($i:"")           { background-color: $pinkBgHover #{$i};   }
+@mixin border-pink($i:"")             {     border-color: $pink #{$i};          }
+
+@mixin text-dark-green($i:"")         {            color: $darkGreen #{$i};          }
+@mixin text-dark-green-hover($i:"")   {            color: $darkGreenTextHover #{$i}; }
+@mixin bg-dark-green($i:"")           { background-color: $darkGreen #{$i};          }
+@mixin bg-dark-green-hover($i:"")     { background-color: $darkGreenBgHover #{$i};   }
+@mixin border-dark-green($i:"")       {     border-color: $darkGreen #{$i};          }
+
+@mixin text-green($i:"")              {            color: $green #{$i};          }
+@mixin text-green-hover($i:"")        {            color: $greenTextHover #{$i}; }
+@mixin bg-green($i:"")                { background-color: $green #{$i};          }
+@mixin bg-green-hover($i:"")          { background-color: $greenBgHover #{$i};   }
+@mixin border-green($i:"")            {     border-color: $green #{$i};          }
+
+@mixin text-light-green($i:"")        {            color: $lightGreen #{$i};          }
+@mixin text-light-green-hover($i:"")  {            color: $lightGreenTextHover #{$i}; }
+@mixin bg-light-green($i:"")          { background-color: $lightGreen #{$i};          }
+@mixin bg-light-green-hover($i:"")    { background-color: $lightGreenBgHover #{$i};   }
+@mixin border-light-green($i:"")      {     border-color: $lightGreen #{$i};          }
+
+@mixin text-pastel-green($i:"")       {            color: $pastelGreen #{$i};          }
+@mixin text-pastel-green-hover($i:"") {            color: $pastelGreenTextHover #{$i}; }
+@mixin bg-pastel-green($i:"")         { background-color: $pastelGreen #{$i};          }
+@mixin bg-pastel-green-hover($i:"")   { background-color: $pastelGreenBgHover #{$i};   }
+@mixin border-pastel-green($i:"")     {     border-color: $pastelGreen #{$i};          }
+
+@mixin text-navy($i:"")               {            color: $navy #{$i};          }
+@mixin text-navy-hover($i:"")         {            color: $navyTextHover #{$i}; }
+@mixin bg-navy($i:"")                 { background-color: $navy #{$i};          }
+@mixin bg-navy-hover($i:"")           { background-color: $navyBgHover #{$i};   }
+@mixin border-navy($i:"")             {     border-color: $navy #{$i};          }
+
+@mixin text-dark-blue($i:"")          {            color: $darkBlue #{$i};          }
+@mixin text-dark-blue-hover($i:"")    {            color: $darkBlueTextHover #{$i}; }
+@mixin bg-dark-blue($i:"")            { background-color: $darkBlue #{$i};          }
+@mixin bg-dark-blue-hover($i:"")      { background-color: $darkBlueBgHover #{$i};   }
+@mixin border-dark-blue($i:"")        {     border-color: $darkBlue #{$i};          }
+
+@mixin text-blue($i:"")               {            color: $blue #{$i};          }
+@mixin text-blue-hover($i:"")         {            color: $blueTextHover #{$i}; }
+@mixin bg-blue($i:"")                 { background-color: $blue #{$i};          }
+@mixin bg-blue-hover($i:"")           { background-color: $blueBgHover #{$i};   }
+@mixin border-blue($i:"")             {     border-color: $blue #{$i};          }
+
+@mixin text-light-blue($i:"")      {               color: $lightBlue #{$i};          }
+@mixin text-light-blue-hover($i:"")   {            color: $lightBlueTextHover #{$i}; }
+@mixin bg-light-blue($i:"")           { background-color: $lightBlue #{$i};          }
+@mixin bg-light-blue-hover($i:"")     { background-color: $lightBlueBgHover #{$i};   }
+@mixin border-light-blue($i:"")       {     border-color: $lightBlue #{$i};          }
+
+@mixin text-pastel-blue($i:"")        {            color: $pastelBlue #{$i};          }
+@mixin text-pastel-blue-hover($i:"")  {            color: $pastelBlueTextHover #{$i}; }
+@mixin bg-pastel-blue($i:"")          { background-color: $pastelBlue #{$i};          }
+@mixin bg-pastel-blue-hover($i:"")    { background-color: $pastelBlueBgHover #{$i};   }
+@mixin border-pastel-blue($i:"")      {     border-color: $pastelBlue #{$i};          }
 
 /* Gradients */
 /* --------- */
@@ -246,18 +380,14 @@
 /* Buttons */
 /* ------- */
 
-@mixin button-bg($start, $end, $text) {
+@mixin button-bg($bg, $hover, $text) {
+  background-color: $bg;
   color: $text;
-  border-color: $end $end darken($end, 10%);
+  border-color: $hover $hover darken($hover, 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%);
+    background-color: $hover;
   }
 }