Merge pull request #479 from twbs/grunt-sass

Switch to "grunt-sass"

.gitignore

@@ -2,7 +2,6 @@
 _gh_pages
 _site
 .ruby-version
-.sass-cache
 
 # Numerous always-ignore extensions
 *.diff

.travis.yml

@@ -21,7 +21,7 @@ before_install:
 install:
   - travis_retry npm install -g grunt-cli
   - travis_retry npm install
-  - travis_retry gem install --no-document "jekyll:~>3.0" "rouge:~>1.10" "sass:~>3.4"
+  - travis_retry gem install --no-document "jekyll:~>3.0" "rouge:~>1.10"
 
 matrix:
   fast_finish: true

Gruntfile.js

@@ -66,9 +66,11 @@ module.exports = function (grunt) {
 
     sass: {
       options: {
-        sourcemap: 'none',
+        outputStyle: 'expanded',
-        style: 'expanded',
+        precision: 6,
-        unixNewlines: true
+        sourceComments: false,
+        sourcemap: false,
+        style: 'expanded'
       },
       core: {
         src: 'sass/ratchet.scss',

dist/css/ratchet-theme-android.css

@@ -18,6 +18,7 @@ body {
 a {
   color: #33b5e5;
 }
+
 a:active {
   color: #1a9bcb;
 }
@@ -57,6 +58,7 @@ a:active {
   -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 1px rgba(0, 0, 0, .25);
           box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 1px rgba(0, 0, 0, .25);
 }
+
 .btn:active, .btn.active {
   color: #222;
   background-color: #999;
@@ -70,6 +72,7 @@ a:active {
   background-color: #33b5e5;
   border: 0;
 }
+
 .btn-primary:active, .btn-primary.active {
   color: #fff;
   background-color: #1a9bcb;
@@ -81,6 +84,7 @@ a:active {
   background-color: #9c0;
   border: 0;
 }
+
 .btn-positive:active, .btn-positive.active {
   color: #fff;
   background-color: #739900;
@@ -92,6 +96,7 @@ a:active {
   background-color: #f44;
   border: 0;
 }
+
 .btn-negative:active, .btn-negative.active {
   color: #fff;
   background-color: #f11;
@@ -104,36 +109,44 @@ a:active {
   -webkit-box-shadow: none;
           box-shadow: none;
 }
+
 .btn-outlined.btn-primary {
   color: #33b5e5;
   border: 1px solid #33b5e5;
 }
+
 .btn-outlined.btn-primary:active {
   background-color: #33b5e5;
   border: 1px solid #33b5e5;
 }
+
 .btn-outlined.btn-positive {
   color: #9c0;
   border: 1px solid #9c0;
 }
+
 .btn-outlined.btn-positive:active {
   background-color: #9c0;
   border: 1px solid #9c0;
 }
+
 .btn-outlined.btn-negative {
   color: #f44;
   border: 1px solid #f44;
 }
+
 .btn-outlined.btn-negative:active {
   background-color: #f44;
   border: 1px solid #f44;
 }
+
 .btn-outlined:active {
   background-color: #999;
   border: 1px solid #999;
   -webkit-box-shadow: none;
           box-shadow: none;
 }
+
 .btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active {
   color: #fff;
   -webkit-box-shadow: none;
@@ -147,6 +160,7 @@ a:active {
   -webkit-box-shadow: none;
           box-shadow: none;
 }
+
 .btn-link:active, .btn-link.active {
   color: #1a9bcb;
   background-color: transparent;
@@ -162,9 +176,11 @@ a:active {
 .btn .badge {
   background-color: rgba(0, 0, 0, .15);
 }
+
 .btn .badge.badge-inverted {
   background-color: transparent;
 }
+
 .btn:active .badge {
   color: #fff;
 }
@@ -176,15 +192,19 @@ a:active {
   -webkit-box-shadow: inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0, 0, 0, .07);
           box-shadow: inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0, 0, 0, .07);
 }
+
 .bar.bar-header-secondary {
   top: 50px;
 }
+
 .bar.bar-footer-secondary {
   bottom: 50px;
 }
+
 .bar.bar-footer-secondary-tab {
   bottom: 50px;
 }
+
 .bar .bar-footer,
 .bar .bar-footer-secondary,
 .bar .bar-footer-secondary-tab {
@@ -200,18 +220,22 @@ a:active {
   height: 50px;
   border-top: 0;
 }
+
 .bar-tab .tab-item {
   color: #929292;
 }
+
 .bar-tab .tab-item.active {
   color: #33b5e5;
   -webkit-box-shadow: inset 0 -2px 0 #33b5e5;
           box-shadow: inset 0 -2px 0 #33b5e5;
 }
+
 .bar-tab .tab-item:active {
   color: #929292;
   background-color: #78c6e3;
 }
+
 .bar-tab .tab-item .icon {
   top: 3px;
   padding-top: 0;
@@ -231,6 +255,7 @@ a:active {
   padding-top: 10px;
   padding-bottom: 10px;
 }
+
 .bar .btn-link {
   top: 0;
   padding: 0;
@@ -238,13 +263,16 @@ a:active {
   line-height: 49px;
   color: #33b5e5;
 }
+
 .bar .btn-link:active, .bar .btn-link.active {
   color: #1a9bcb;
 }
+
 .bar .btn-link .icon {
   top: 2px;
   padding: 0;
 }
+
 .bar .btn-block {
   top: 4px;
 }
@@ -257,9 +285,11 @@ a:active {
   padding-top: 13px;
   padding-bottom: 13px;
 }
+
 .bar .title .icon {
   padding: 0;
 }
+
 .bar .title .icon.icon-caret {
   top: 10px;
   color: #777;
@@ -278,6 +308,7 @@ a:active {
   color: #fff;
   background-color: #33b5e5;
 }
+
 .badge-primary.badge-inverted {
   color: #33b5e5;
   background-color: transparent;
@@ -287,6 +318,7 @@ a:active {
   color: #fff;
   background-color: #9c0;
 }
+
 .badge-positive.badge-inverted {
   color: #9c0;
   background-color: transparent;
@@ -296,6 +328,7 @@ a:active {
   color: #fff;
   background-color: #f44;
 }
+
 .badge-negative.badge-inverted {
   color: #f44;
   background-color: transparent;
@@ -310,19 +343,24 @@ a:active {
 .table-view {
   background-color: transparent;
 }
+
 .table-view .table-view-cell {
   border-bottom: 1px solid #d9d9d9;
 }
+
 .table-view .table-view-cell:last-child {
   background-image: none;
 }
+
 .table-view .table-view-cell > a:not(.btn):active {
   color: inherit;
   background-color: #e0e0e0;
 }
+
 .table-view .table-view-cell > a:not(.btn):active .icon {
   color: #fff;
 }
+
 .table-view .table-view-divider {
   padding-top: 25px;
   font-size: 12px;
@@ -433,6 +471,7 @@ textarea,
   -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .25);
           box-shadow: 0 1px 1px rgba(0, 0, 0, .25);
 }
+
 .segmented-control .control-item {
   padding-top: 10px;
   padding-bottom: 10px;
@@ -441,9 +480,11 @@ textarea,
   -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2);
           box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2);
 }
+
 .segmented-control .control-item:first-child {
   border-left-width: 0;
 }
+
 .segmented-control .control-item:active, .segmented-control .control-item.active {
   background-color: #999;
 }
@@ -451,10 +492,12 @@ textarea,
 .segmented-control-primary {
   border: 0;
 }
+
 .segmented-control-primary .control-item {
   color: #fff;
   border-color: inherit;
 }
+
 .segmented-control-primary .control-item:active, .segmented-control-primary .control-item.active {
   color: #fff;
   background-color: #33b5e5;
@@ -463,10 +506,12 @@ textarea,
 .segmented-control-positive {
   border: 0;
 }
+
 .segmented-control-positive .control-item {
   color: #fff;
   border-color: inherit;
 }
+
 .segmented-control-positive .control-item:active, .segmented-control-positive .control-item.active {
   color: #fff;
   background-color: #9c0;
@@ -475,10 +520,12 @@ textarea,
 .segmented-control-negative {
   border: 0;
 }
+
 .segmented-control-negative .control-item {
   color: #fff;
   border-color: inherit;
 }
+
 .segmented-control-negative .control-item:active, .segmented-control-negative .control-item.active {
   color: #fff;
   background-color: #f44;
@@ -500,9 +547,11 @@ textarea,
        -o-transform: scale(.75);
           transform: scale(.75);
 }
+
 .popover:before {
   display: none;
 }
+
 .popover.visible {
   -webkit-transform: scale(1);
        -o-transform: scale(1);
@@ -516,6 +565,7 @@ textarea,
 .popover .bar {
   border-radius: 0;
 }
+
 .popover .bar-nav ~ .table-view {
   padding-top: 50px;
 }
@@ -531,6 +581,7 @@ textarea,
   border: 2px solid #d7d7d7;
   border-radius: 0;
 }
+
 .toggle .toggle-handle {
   top: 0;
   left: 0;
@@ -542,6 +593,7 @@ textarea,
   -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(0, 0, 0, .1);
           box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(0, 0, 0, .1);
 }
+
 .toggle:before {
   top: 1px;
   right: auto;
@@ -549,10 +601,12 @@ textarea,
   z-index: 3;
   color: #fff;
 }
+
 .toggle.active {
   background-color: #d7d7d7;
   border: 2px solid #d7d7d7;
 }
+
 .toggle.active .toggle-handle {
   margin-right: 2px;
   background-color: #33b5e5;
@@ -560,6 +614,7 @@ textarea,
   -webkit-transform: translate3d(50px, 0, 0);
           transform: translate3d(50px, 0, 0);
 }
+
 .toggle.active:before {
   right: 14px;
   left: auto;

dist/css/ratchet-theme-ios.css

@@ -11,6 +11,7 @@
 a {
   color: #007aff;
 }
+
 a:active {
   color: #0062cc;
 }
@@ -42,6 +43,7 @@ p {
   -webkit-transition-duration: .2s;
           transition-duration: .2s;
 }
+
 .btn:active, .btn.active {
   color: #fff;
   background-color: #929292;
@@ -52,6 +54,7 @@ p {
   background-color: #007aff;
   border: 1px solid #007aff;
 }
+
 .btn-primary:active, .btn-primary.active {
   background-color: #0062cc;
   border: 1px solid #0062cc;
@@ -62,6 +65,7 @@ p {
   background-color: #4cd964;
   border: 1px solid #4cd964;
 }
+
 .btn-positive:active, .btn-positive.active {
   background-color: #2ac845;
   border: 1px solid #2ac845;
@@ -72,6 +76,7 @@ p {
   background-color: #dd524d;
   border: 1px solid #dd524d;
 }
+
 .btn-negative:active, .btn-negative.active {
   background-color: #cf2d28;
   border: 1px solid #cf2d28;
@@ -80,15 +85,19 @@ p {
 .btn-outlined {
   background-color: transparent;
 }
+
 .btn-outlined.btn-primary {
   color: #007aff;
 }
+
 .btn-outlined.btn-positive {
   color: #4cd964;
 }
+
 .btn-outlined.btn-negative {
   color: #dd524d;
 }
+
 .btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active {
   color: #fff;
 }
@@ -98,6 +107,7 @@ p {
   background-color: transparent;
   border: none;
 }
+
 .btn-link:active, .btn-link.active {
   color: #0062cc;
   background-color: transparent;
@@ -106,9 +116,11 @@ p {
 .btn .badge {
   background-color: rgba(0, 0, 0, .15);
 }
+
 .btn .badge.badge-inverted {
   background-color: transparent;
 }
+
 .btn:active .badge {
   color: #fff;
 }
@@ -118,15 +130,19 @@ p {
   border-bottom: 0;
   box-shadow: 0 0 1px rgba(0, 0, 0, .85);
 }
+
 .bar.bar-header-secondary {
   top: 44px;
 }
+
 .bar.bar-footer-secondary {
   bottom: 44px;
 }
+
 .bar.bar-footer-secondary-tab {
   bottom: 50px;
 }
+
 .bar.bar-footer, .bar.bar-footer-secondary, .bar.bar-footer-secondary-tab {
   border-top: 0;
 }
@@ -138,6 +154,7 @@ p {
 .tab-item {
   color: #929292;
 }
+
 .tab-item.active, .tab-item:active {
   color: #007aff;
 }
@@ -145,6 +162,7 @@ p {
 .bar-nav .btn-link {
   color: #007aff;
 }
+
 .bar-nav .btn-link:active {
   color: #007aff;
   opacity: .6;
@@ -159,6 +177,7 @@ p {
   color: #fff;
   background-color: #007aff;
 }
+
 .badge-primary.badge-inverted {
   color: #007aff;
   background-color: transparent;
@@ -168,6 +187,7 @@ p {
   color: #fff;
   background-color: #4cd964;
 }
+
 .badge-positive.badge-inverted {
   color: #4cd964;
   background-color: transparent;
@@ -177,6 +197,7 @@ p {
   color: #fff;
   background-color: #dd524d;
 }
+
 .badge-negative.badge-inverted {
   color: #dd524d;
   background-color: transparent;
@@ -197,18 +218,22 @@ p {
   border-top: 0;
   border-bottom: 0;
 }
+
 .table-view .table-view-cell {
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
   background-repeat: no-repeat;
   background-position: 15px 100%;
   border-bottom: 0;
 }
+
 .table-view .table-view-cell:last-child {
   background-image: none;
 }
+
 .table-view .table-view-cell > a:not(.btn):active {
   color: inherit;
 }
+
 .table-view .table-view-divider {
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
   background-repeat: no-repeat;
@@ -292,15 +317,18 @@ textarea,
   background-color: transparent;
   border: 1px solid #929292;
 }
+
 .segmented-control .control-item {
   color: #929292;
   border-color: #929292;
   -webkit-transition: background-color .1s linear;
           transition: background-color .1s linear;
 }
+
 .segmented-control .control-item:active {
   background-color: #ebebeb;
 }
+
 .segmented-control .control-item.active {
   color: #fff;
   background-color: #929292;
@@ -309,13 +337,16 @@ textarea,
 .segmented-control-primary {
   border: 1px solid #007aff;
 }
+
 .segmented-control-primary .control-item {
   color: #007aff;
   border-color: inherit;
 }
+
 .segmented-control-primary .control-item:active {
   background-color: #b3d7ff;
 }
+
 .segmented-control-primary .control-item.active {
   color: #fff;
   background-color: #007aff;
@@ -324,13 +355,16 @@ textarea,
 .segmented-control-positive {
   border: 1px solid #4cd964;
 }
+
 .segmented-control-positive .control-item {
   color: #4cd964;
   border-color: inherit;
 }
+
 .segmented-control-positive .control-item:active {
   background-color: #dff8e4;
 }
+
 .segmented-control-positive .control-item.active {
   color: #fff;
   background-color: #4cd964;
@@ -339,13 +373,16 @@ textarea,
 .segmented-control-negative {
   border: 1px solid #dd524d;
 }
+
 .segmented-control-negative .control-item {
   color: #dd524d;
   border-color: inherit;
 }
+
 .segmented-control-negative .control-item:active {
   background-color: #fae4e3;
 }
+
 .segmented-control-negative .control-item.active {
   color: #fff;
   background-color: #dd524d;
@@ -356,6 +393,7 @@ textarea,
   -webkit-transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out;
           transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out;
 }
+
 .popover:before {
   border-bottom: 15px solid rgba(247, 247, 247, .98);
 }
@@ -377,6 +415,7 @@ textarea,
   -webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
           transition-timing-function: cubic-bezier(.1, .5, .1, 1);
 }
+
 .modal.active {
   -webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
           transition-timing-function: cubic-bezier(.1, .5, .1, 1);
@@ -391,24 +430,29 @@ textarea,
   -webkit-transition-property: box-shadow, border;
           transition-property: box-shadow, border;
 }
+
 .toggle .toggle-handle {
   border: 1px solid rgba(0, 0, 0, .2);
   box-shadow: 0 3px 3px rgba(0, 0, 0, .08);
   -webkit-transition-property: -webkit-transform, border, width;
           transition-property:         transform, border, width;
 }
+
 .toggle:before {
   display: none;
 }
+
 .toggle.active {
   background-color: transparent;
   border: 2px solid #4cd964;
   box-shadow: inset 0 0 0 13px #4cd964;
 }
+
 .toggle.active .toggle-handle {
   -webkit-transform: translate3d(17px, 0, 0);
           transform: translate3d(17px, 0, 0);
 }
+
 .toggle.active .toggle-handle {
   border-color: #4cd964;
 }
@@ -417,20 +461,24 @@ textarea,
   -webkit-transition: opacity .2s ease-in-out;
           transition: opacity .2s ease-in-out;
 }
+
 .content.sliding {
   -webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
           transition-timing-function: cubic-bezier(.1, .5, .1, 1);
 }
+
 .content.sliding.sliding-in, .content.sliding.right:not([class*="sliding-in"]) {
   -webkit-animation-name: fadeOverlay;
           animation-name: fadeOverlay;
   -webkit-animation-duration: .4s;
           animation-duration: .4s;
 }
+
 .content.sliding.right:not([class*="sliding-in"]) {
   -webkit-animation-direction: reverse;
           animation-direction: reverse;
 }
+
 .content.sliding.left {
   -webkit-transform: translate3d(-20%, 0, 0);
           transform: translate3d(-20%, 0, 0);

dist/css/ratchet.css

@@ -257,6 +257,7 @@ a {
 
   -webkit-tap-highlight-color: transparent;
 }
+
 a:active {
   color: #3071a9;
 }
@@ -322,6 +323,7 @@ a:active {
   display: table;
   content: " ";
 }
+
 .clearfix:after {
   clear: both;
 }
@@ -382,10 +384,12 @@ p {
   border: 1px solid #ccc;
   border-radius: 3px;
 }
+
 .btn:active, .btn.active {
   color: inherit;
   background-color: #ccc;
 }
+
 .btn:disabled, .btn.disabled {
   opacity: .6;
 }
@@ -395,6 +399,7 @@ p {
   background-color: #428bca;
   border: 1px solid #428bca;
 }
+
 .btn-primary:active, .btn-primary.active {
   color: #fff;
   background-color: #3071a9;
@@ -406,6 +411,7 @@ p {
   background-color: #5cb85c;
   border: 1px solid #5cb85c;
 }
+
 .btn-positive:active, .btn-positive.active {
   color: #fff;
   background-color: #449d44;
@@ -417,6 +423,7 @@ p {
   background-color: #d9534f;
   border: 1px solid #d9534f;
 }
+
 .btn-negative:active, .btn-negative.active {
   color: #fff;
   background-color: #c9302c;
@@ -426,15 +433,19 @@ p {
 .btn-outlined {
   background-color: transparent;
 }
+
 .btn-outlined.btn-primary {
   color: #428bca;
 }
+
 .btn-outlined.btn-positive {
   color: #5cb85c;
 }
+
 .btn-outlined.btn-negative {
   color: #d9534f;
 }
+
 .btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active {
   color: #fff;
 }
@@ -446,6 +457,7 @@ p {
   background-color: transparent;
   border: 0;
 }
+
 .btn-link:active, .btn-link.active {
   color: #3071a9;
   background-color: transparent;
@@ -562,6 +574,7 @@ input[type="button"] {
   border-top: 1px solid #ddd;
   border-bottom: 0;
 }
+
 .bar-tab .tab-item {
   position: relative;
   display: table-cell;
@@ -571,15 +584,18 @@ input[type="button"] {
   text-align: center;
   vertical-align: middle;
 }
+
 .bar-tab .tab-item.active, .bar-tab .tab-item:active {
   color: #428bca;
 }
+
 .bar-tab .tab-item .badge {
   position: absolute;
   top: 3px;
   left: 50%;
   vertical-align: top;
 }
+
 .bar-tab .tab-item .icon {
   top: 3px;
   width: 24px;
@@ -587,6 +603,7 @@ input[type="button"] {
   padding-top: 0;
   padding-bottom: 0;
 }
+
 .bar-tab .tab-item .icon ~ .tab-label {
   display: block;
   font-size: 11px;
@@ -600,9 +617,11 @@ input[type="button"] {
   margin-top: 0;
   font-weight: 400;
 }
+
 .bar .btn.pull-right {
   margin-left: 10px;
 }
+
 .bar .btn.pull-left {
   margin-right: 10px;
 }
@@ -615,6 +634,7 @@ input[type="button"] {
   color: #428bca;
   border: 0;
 }
+
 .bar .btn-link:active, .bar .btn-link.active {
   color: #3071a9;
 }
@@ -629,12 +649,15 @@ input[type="button"] {
 .bar .btn-nav.pull-left {
   margin-left: -5px;
 }
+
 .bar .btn-nav.pull-left .icon-left-nav {
   margin-right: -3px;
 }
+
 .bar .btn-nav.pull-right {
   margin-right: -5px;
 }
+
 .bar .btn-nav.pull-right .icon-right-nav {
   margin-left: -3px;
 }
@@ -646,13 +669,16 @@ input[type="button"] {
   padding-bottom: 10px;
   font-size: 24px;
 }
+
 .bar .btn .icon {
   top: 3px;
   padding: 0;
 }
+
 .bar .title .icon {
   padding: 0;
 }
+
 .bar .title .icon.icon-caret {
   top: 4px;
   margin-left: -5px;
@@ -677,6 +703,7 @@ input[type="button"] {
   background-color: rgba(0, 0, 0, .15);
   border-radius: 100px;
 }
+
 .badge.badge-inverted {
   padding: 0 5px 0 0;
   background-color: transparent;
@@ -686,6 +713,7 @@ input[type="button"] {
   color: #fff;
   background-color: #428bca;
 }
+
 .badge-primary.badge-inverted {
   color: #428bca;
 }
@@ -694,6 +722,7 @@ input[type="button"] {
   color: #fff;
   background-color: #5cb85c;
 }
+
 .badge-positive.badge-inverted {
   color: #5cb85c;
 }
@@ -702,6 +731,7 @@ input[type="button"] {
   color: #fff;
   background-color: #d9534f;
 }
+
 .badge-negative.badge-inverted {
   color: #d9534f;
 }
@@ -719,11 +749,13 @@ input[type="button"] {
   border-top: 0;
   border-bottom: 0;
 }
+
 .card .table-view .table-view-divider:first-child {
   top: 0;
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
 }
+
 .card .table-view .table-view-divider:last-child {
   border-bottom-right-radius: 6px;
   border-bottom-left-radius: 6px;
@@ -749,9 +781,11 @@ input[type="button"] {
   overflow: hidden;
   border-bottom: 1px solid #ddd;
 }
+
 .table-view-cell:last-child {
   border-bottom: 0;
 }
+
 .table-view-cell > a:not(.btn) {
   position: relative;
   display: block;
@@ -760,9 +794,11 @@ input[type="button"] {
   overflow: hidden;
   color: inherit;
 }
+
 .table-view-cell > a:not(.btn):active {
   background-color: #eee;
 }
+
 .table-view-cell p {
   margin-bottom: 0;
 }
@@ -788,6 +824,7 @@ input[type="button"] {
 .table-view .media-object.pull-left {
   margin-right: 10px;
 }
+
 .table-view .media-object.pull-right {
   margin-left: 10px;
 }
@@ -806,6 +843,7 @@ input[type="button"] {
        -o-transform: translateY(-50%);
           transform: translateY(-50%);
 }
+
 .table-view-cell .navigate-left > .btn,
 .table-view-cell .navigate-left > .badge,
 .table-view-cell .navigate-left > .toggle,
@@ -946,6 +984,7 @@ select {
   border: 1px solid #ccc;
   border-radius: 3px;
 }
+
 .segmented-control .control-item {
   display: table-cell;
   width: 1%;
@@ -959,12 +998,15 @@ select {
   white-space: nowrap;
   border-left: 1px solid #ccc;
 }
+
 .segmented-control .control-item:first-child {
   border-left-width: 0;
 }
+
 .segmented-control .control-item:active {
   background-color: #eee;
 }
+
 .segmented-control .control-item.active {
   background-color: #ccc;
 }
@@ -972,13 +1014,16 @@ select {
 .segmented-control-primary {
   border-color: #428bca;
 }
+
 .segmented-control-primary .control-item {
   color: #428bca;
   border-color: inherit;
 }
+
 .segmented-control-primary .control-item:active {
   background-color: #cde1f1;
 }
+
 .segmented-control-primary .control-item.active {
   color: #fff;
   background-color: #428bca;
@@ -987,13 +1032,16 @@ select {
 .segmented-control-positive {
   border-color: #5cb85c;
 }
+
 .segmented-control-positive .control-item {
   color: #5cb85c;
   border-color: inherit;
 }
+
 .segmented-control-positive .control-item:active {
   background-color: #d8eed8;
 }
+
 .segmented-control-positive .control-item.active {
   color: #fff;
   background-color: #5cb85c;
@@ -1002,13 +1050,16 @@ select {
 .segmented-control-negative {
   border-color: #d9534f;
 }
+
 .segmented-control-negative .control-item {
   color: #d9534f;
   border-color: inherit;
 }
+
 .segmented-control-negative .control-item:active {
   background-color: #f9e2e2;
 }
+
 .segmented-control-negative .control-item.active {
   color: #fff;
   background-color: #d9534f;
@@ -1017,6 +1068,7 @@ select {
 .control-content {
   display: none;
 }
+
 .control-content.active {
   display: block;
 }
@@ -1041,6 +1093,7 @@ select {
       -ms-transform: translate3d(0, -15px, 0);
           transform: translate3d(0, -15px, 0);
 }
+
 .popover:before {
   position: absolute;
   top: -15px;
@@ -1053,12 +1106,14 @@ select {
   border-bottom: 15px solid #fff;
   border-left: 15px solid transparent;
 }
+
 .popover.visible {
   opacity: 1;
   -webkit-transform: translate3d(0, 0, 0);
       -ms-transform: translate3d(0, 0, 0);
           transform: translate3d(0, 0, 0);
 }
+
 .popover .bar ~ .table-view {
   padding-top: 44px;
 }
@@ -1076,6 +1131,7 @@ select {
 .popover .btn-block {
   margin-bottom: 5px;
 }
+
 .popover .btn-block:last-child {
   margin-bottom: 0;
 }
@@ -1115,6 +1171,7 @@ select {
       -ms-transform: translate3d(0, 100%, 0);
           transform: translate3d(0, 100%, 0);
 }
+
 .modal.active {
   height: 100%;
   opacity: 1;
@@ -1134,6 +1191,7 @@ select {
   overflow: hidden;
   background-color: #000;
 }
+
 .slider .slide-group {
   position: relative;
   font-size: 0;
@@ -1142,6 +1200,7 @@ select {
        -o-transition: all 0s linear;
           transition: all 0s linear;
 }
+
 .slider .slide-group .slide {
   display: inline-block;
   width: 100%;
@@ -1165,6 +1224,7 @@ select {
        -o-transition-property: background-color, border;
           transition-property: background-color, border;
 }
+
 .toggle .toggle-handle {
   position: absolute;
   top: -1px;
@@ -1182,6 +1242,7 @@ select {
        -o-transition-property:      -o-transform, border, width;
           transition-property:         transform, border, width;
 }
+
 .toggle:before {
   position: absolute;
   top: 3px;
@@ -1191,22 +1252,26 @@ select {
   text-transform: uppercase;
   content: "Off";
 }
+
 .toggle.active {
   background-color: #5cb85c;
   border: 2px solid #5cb85c;
 }
+
 .toggle.active .toggle-handle {
   border-color: #5cb85c;
   -webkit-transform: translate3d(44px, 0, 0);
       -ms-transform: translate3d(44px, 0, 0);
           transform: translate3d(44px, 0, 0);
 }
+
 .toggle.active:before {
   right: auto;
   left: 15px;
   color: #fff;
   content: "On";
 }
+
 .toggle input[type="checkbox"] {
   display: none;
 }
@@ -1218,9 +1283,11 @@ select {
        -o-transition: opacity .4s;
           transition: opacity .4s;
 }
+
 .content.fade.in {
   opacity: 1;
 }
+
 .content.sliding {
   z-index: 2;
   -webkit-transition: -webkit-transform .4s;
@@ -1230,12 +1297,14 @@ select {
       -ms-transform: translate3d(0, 0, 0);
           transform: translate3d(0, 0, 0);
 }
+
 .content.sliding.left {
   z-index: 1;
   -webkit-transform: translate3d(-100%, 0, 0);
       -ms-transform: translate3d(-100%, 0, 0);
           transform: translate3d(-100%, 0, 0);
 }
+
 .content.sliding.right {
   z-index: 3;
   -webkit-transform: translate3d(100%, 0, 0);
@@ -1283,6 +1352,7 @@ select {
   src: url("../fonts/ratchicons.eot");
   src: url("../fonts/ratchicons.eot?#iefix") format("embedded-opentype"), url("../fonts/ratchicons.woff") format("woff"), url("../fonts/ratchicons.ttf") format("truetype"), url("../fonts/ratchicons.svg#svgFontName") format("svg");
 }
+
 .icon {
   display: inline-block;
   font-family: Ratchicons;

docs/dist/css/ratchet-theme-android.css

@@ -18,6 +18,7 @@ body {
 a {
   color: #33b5e5;
 }
+
 a:active {
   color: #1a9bcb;
 }
@@ -57,6 +58,7 @@ a:active {
   -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 1px rgba(0, 0, 0, .25);
           box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 1px rgba(0, 0, 0, .25);
 }
+
 .btn:active, .btn.active {
   color: #222;
   background-color: #999;
@@ -70,6 +72,7 @@ a:active {
   background-color: #33b5e5;
   border: 0;
 }
+
 .btn-primary:active, .btn-primary.active {
   color: #fff;
   background-color: #1a9bcb;
@@ -81,6 +84,7 @@ a:active {
   background-color: #9c0;
   border: 0;
 }
+
 .btn-positive:active, .btn-positive.active {
   color: #fff;
   background-color: #739900;
@@ -92,6 +96,7 @@ a:active {
   background-color: #f44;
   border: 0;
 }
+
 .btn-negative:active, .btn-negative.active {
   color: #fff;
   background-color: #f11;
@@ -104,36 +109,44 @@ a:active {
   -webkit-box-shadow: none;
           box-shadow: none;
 }
+
 .btn-outlined.btn-primary {
   color: #33b5e5;
   border: 1px solid #33b5e5;
 }
+
 .btn-outlined.btn-primary:active {
   background-color: #33b5e5;
   border: 1px solid #33b5e5;
 }
+
 .btn-outlined.btn-positive {
   color: #9c0;
   border: 1px solid #9c0;
 }
+
 .btn-outlined.btn-positive:active {
   background-color: #9c0;
   border: 1px solid #9c0;
 }
+
 .btn-outlined.btn-negative {
   color: #f44;
   border: 1px solid #f44;
 }
+
 .btn-outlined.btn-negative:active {
   background-color: #f44;
   border: 1px solid #f44;
 }
+
 .btn-outlined:active {
   background-color: #999;
   border: 1px solid #999;
   -webkit-box-shadow: none;
           box-shadow: none;
 }
+
 .btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active {
   color: #fff;
   -webkit-box-shadow: none;
@@ -147,6 +160,7 @@ a:active {
   -webkit-box-shadow: none;
           box-shadow: none;
 }
+
 .btn-link:active, .btn-link.active {
   color: #1a9bcb;
   background-color: transparent;
@@ -162,9 +176,11 @@ a:active {
 .btn .badge {
   background-color: rgba(0, 0, 0, .15);
 }
+
 .btn .badge.badge-inverted {
   background-color: transparent;
 }
+
 .btn:active .badge {
   color: #fff;
 }
@@ -176,15 +192,19 @@ a:active {
   -webkit-box-shadow: inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0, 0, 0, .07);
           box-shadow: inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0, 0, 0, .07);
 }
+
 .bar.bar-header-secondary {
   top: 50px;
 }
+
 .bar.bar-footer-secondary {
   bottom: 50px;
 }
+
 .bar.bar-footer-secondary-tab {
   bottom: 50px;
 }
+
 .bar .bar-footer,
 .bar .bar-footer-secondary,
 .bar .bar-footer-secondary-tab {
@@ -200,18 +220,22 @@ a:active {
   height: 50px;
   border-top: 0;
 }
+
 .bar-tab .tab-item {
   color: #929292;
 }
+
 .bar-tab .tab-item.active {
   color: #33b5e5;
   -webkit-box-shadow: inset 0 -2px 0 #33b5e5;
           box-shadow: inset 0 -2px 0 #33b5e5;
 }
+
 .bar-tab .tab-item:active {
   color: #929292;
   background-color: #78c6e3;
 }
+
 .bar-tab .tab-item .icon {
   top: 3px;
   padding-top: 0;
@@ -231,6 +255,7 @@ a:active {
   padding-top: 10px;
   padding-bottom: 10px;
 }
+
 .bar .btn-link {
   top: 0;
   padding: 0;
@@ -238,13 +263,16 @@ a:active {
   line-height: 49px;
   color: #33b5e5;
 }
+
 .bar .btn-link:active, .bar .btn-link.active {
   color: #1a9bcb;
 }
+
 .bar .btn-link .icon {
   top: 2px;
   padding: 0;
 }
+
 .bar .btn-block {
   top: 4px;
 }
@@ -257,9 +285,11 @@ a:active {
   padding-top: 13px;
   padding-bottom: 13px;
 }
+
 .bar .title .icon {
   padding: 0;
 }
+
 .bar .title .icon.icon-caret {
   top: 10px;
   color: #777;
@@ -278,6 +308,7 @@ a:active {
   color: #fff;
   background-color: #33b5e5;
 }
+
 .badge-primary.badge-inverted {
   color: #33b5e5;
   background-color: transparent;
@@ -287,6 +318,7 @@ a:active {
   color: #fff;
   background-color: #9c0;
 }
+
 .badge-positive.badge-inverted {
   color: #9c0;
   background-color: transparent;
@@ -296,6 +328,7 @@ a:active {
   color: #fff;
   background-color: #f44;
 }
+
 .badge-negative.badge-inverted {
   color: #f44;
   background-color: transparent;
@@ -310,19 +343,24 @@ a:active {
 .table-view {
   background-color: transparent;
 }
+
 .table-view .table-view-cell {
   border-bottom: 1px solid #d9d9d9;
 }
+
 .table-view .table-view-cell:last-child {
   background-image: none;
 }
+
 .table-view .table-view-cell > a:not(.btn):active {
   color: inherit;
   background-color: #e0e0e0;
 }
+
 .table-view .table-view-cell > a:not(.btn):active .icon {
   color: #fff;
 }
+
 .table-view .table-view-divider {
   padding-top: 25px;
   font-size: 12px;
@@ -433,6 +471,7 @@ textarea,
   -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .25);
           box-shadow: 0 1px 1px rgba(0, 0, 0, .25);
 }
+
 .segmented-control .control-item {
   padding-top: 10px;
   padding-bottom: 10px;
@@ -441,9 +480,11 @@ textarea,
   -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2);
           box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2);
 }
+
 .segmented-control .control-item:first-child {
   border-left-width: 0;
 }
+
 .segmented-control .control-item:active, .segmented-control .control-item.active {
   background-color: #999;
 }
@@ -451,10 +492,12 @@ textarea,
 .segmented-control-primary {
   border: 0;
 }
+
 .segmented-control-primary .control-item {
   color: #fff;
   border-color: inherit;
 }
+
 .segmented-control-primary .control-item:active, .segmented-control-primary .control-item.active {
   color: #fff;
   background-color: #33b5e5;
@@ -463,10 +506,12 @@ textarea,
 .segmented-control-positive {
   border: 0;
 }
+
 .segmented-control-positive .control-item {
   color: #fff;
   border-color: inherit;
 }
+
 .segmented-control-positive .control-item:active, .segmented-control-positive .control-item.active {
   color: #fff;
   background-color: #9c0;
@@ -475,10 +520,12 @@ textarea,
 .segmented-control-negative {
   border: 0;
 }
+
 .segmented-control-negative .control-item {
   color: #fff;
   border-color: inherit;
 }
+
 .segmented-control-negative .control-item:active, .segmented-control-negative .control-item.active {
   color: #fff;
   background-color: #f44;
@@ -500,9 +547,11 @@ textarea,
        -o-transform: scale(.75);
           transform: scale(.75);
 }
+
 .popover:before {
   display: none;
 }
+
 .popover.visible {
   -webkit-transform: scale(1);
        -o-transform: scale(1);
@@ -516,6 +565,7 @@ textarea,
 .popover .bar {
   border-radius: 0;
 }
+
 .popover .bar-nav ~ .table-view {
   padding-top: 50px;
 }
@@ -531,6 +581,7 @@ textarea,
   border: 2px solid #d7d7d7;
   border-radius: 0;
 }
+
 .toggle .toggle-handle {
   top: 0;
   left: 0;
@@ -542,6 +593,7 @@ textarea,
   -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(0, 0, 0, .1);
           box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(0, 0, 0, .1);
 }
+
 .toggle:before {
   top: 1px;
   right: auto;
@@ -549,10 +601,12 @@ textarea,
   z-index: 3;
   color: #fff;
 }
+
 .toggle.active {
   background-color: #d7d7d7;
   border: 2px solid #d7d7d7;
 }
+
 .toggle.active .toggle-handle {
   margin-right: 2px;
   background-color: #33b5e5;
@@ -560,6 +614,7 @@ textarea,
   -webkit-transform: translate3d(50px, 0, 0);
           transform: translate3d(50px, 0, 0);
 }
+
 .toggle.active:before {
   right: 14px;
   left: auto;

docs/dist/css/ratchet-theme-ios.css

@@ -11,6 +11,7 @@
 a {
   color: #007aff;
 }
+
 a:active {
   color: #0062cc;
 }
@@ -42,6 +43,7 @@ p {
   -webkit-transition-duration: .2s;
           transition-duration: .2s;
 }
+
 .btn:active, .btn.active {
   color: #fff;
   background-color: #929292;
@@ -52,6 +54,7 @@ p {
   background-color: #007aff;
   border: 1px solid #007aff;
 }
+
 .btn-primary:active, .btn-primary.active {
   background-color: #0062cc;
   border: 1px solid #0062cc;
@@ -62,6 +65,7 @@ p {
   background-color: #4cd964;
   border: 1px solid #4cd964;
 }
+
 .btn-positive:active, .btn-positive.active {
   background-color: #2ac845;
   border: 1px solid #2ac845;
@@ -72,6 +76,7 @@ p {
   background-color: #dd524d;
   border: 1px solid #dd524d;
 }
+
 .btn-negative:active, .btn-negative.active {
   background-color: #cf2d28;
   border: 1px solid #cf2d28;
@@ -80,15 +85,19 @@ p {
 .btn-outlined {
   background-color: transparent;
 }
+
 .btn-outlined.btn-primary {
   color: #007aff;
 }
+
 .btn-outlined.btn-positive {
   color: #4cd964;
 }
+
 .btn-outlined.btn-negative {
   color: #dd524d;
 }
+
 .btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active {
   color: #fff;
 }
@@ -98,6 +107,7 @@ p {
   background-color: transparent;
   border: none;
 }
+
 .btn-link:active, .btn-link.active {
   color: #0062cc;
   background-color: transparent;
@@ -106,9 +116,11 @@ p {
 .btn .badge {
   background-color: rgba(0, 0, 0, .15);
 }
+
 .btn .badge.badge-inverted {
   background-color: transparent;
 }
+
 .btn:active .badge {
   color: #fff;
 }
@@ -118,15 +130,19 @@ p {
   border-bottom: 0;
   box-shadow: 0 0 1px rgba(0, 0, 0, .85);
 }
+
 .bar.bar-header-secondary {
   top: 44px;
 }
+
 .bar.bar-footer-secondary {
   bottom: 44px;
 }
+
 .bar.bar-footer-secondary-tab {
   bottom: 50px;
 }
+
 .bar.bar-footer, .bar.bar-footer-secondary, .bar.bar-footer-secondary-tab {
   border-top: 0;
 }
@@ -138,6 +154,7 @@ p {
 .tab-item {
   color: #929292;
 }
+
 .tab-item.active, .tab-item:active {
   color: #007aff;
 }
@@ -145,6 +162,7 @@ p {
 .bar-nav .btn-link {
   color: #007aff;
 }
+
 .bar-nav .btn-link:active {
   color: #007aff;
   opacity: .6;
@@ -159,6 +177,7 @@ p {
   color: #fff;
   background-color: #007aff;
 }
+
 .badge-primary.badge-inverted {
   color: #007aff;
   background-color: transparent;
@@ -168,6 +187,7 @@ p {
   color: #fff;
   background-color: #4cd964;
 }
+
 .badge-positive.badge-inverted {
   color: #4cd964;
   background-color: transparent;
@@ -177,6 +197,7 @@ p {
   color: #fff;
   background-color: #dd524d;
 }
+
 .badge-negative.badge-inverted {
   color: #dd524d;
   background-color: transparent;
@@ -197,18 +218,22 @@ p {
   border-top: 0;
   border-bottom: 0;
 }
+
 .table-view .table-view-cell {
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
   background-repeat: no-repeat;
   background-position: 15px 100%;
   border-bottom: 0;
 }
+
 .table-view .table-view-cell:last-child {
   background-image: none;
 }
+
 .table-view .table-view-cell > a:not(.btn):active {
   color: inherit;
 }
+
 .table-view .table-view-divider {
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
   background-repeat: no-repeat;
@@ -292,15 +317,18 @@ textarea,
   background-color: transparent;
   border: 1px solid #929292;
 }
+
 .segmented-control .control-item {
   color: #929292;
   border-color: #929292;
   -webkit-transition: background-color .1s linear;
           transition: background-color .1s linear;
 }
+
 .segmented-control .control-item:active {
   background-color: #ebebeb;
 }
+
 .segmented-control .control-item.active {
   color: #fff;
   background-color: #929292;
@@ -309,13 +337,16 @@ textarea,
 .segmented-control-primary {
   border: 1px solid #007aff;
 }
+
 .segmented-control-primary .control-item {
   color: #007aff;
   border-color: inherit;
 }
+
 .segmented-control-primary .control-item:active {
   background-color: #b3d7ff;
 }
+
 .segmented-control-primary .control-item.active {
   color: #fff;
   background-color: #007aff;
@@ -324,13 +355,16 @@ textarea,
 .segmented-control-positive {
   border: 1px solid #4cd964;
 }
+
 .segmented-control-positive .control-item {
   color: #4cd964;
   border-color: inherit;
 }
+
 .segmented-control-positive .control-item:active {
   background-color: #dff8e4;
 }
+
 .segmented-control-positive .control-item.active {
   color: #fff;
   background-color: #4cd964;
@@ -339,13 +373,16 @@ textarea,
 .segmented-control-negative {
   border: 1px solid #dd524d;
 }
+
 .segmented-control-negative .control-item {
   color: #dd524d;
   border-color: inherit;
 }
+
 .segmented-control-negative .control-item:active {
   background-color: #fae4e3;
 }
+
 .segmented-control-negative .control-item.active {
   color: #fff;
   background-color: #dd524d;
@@ -356,6 +393,7 @@ textarea,
   -webkit-transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out;
           transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out;
 }
+
 .popover:before {
   border-bottom: 15px solid rgba(247, 247, 247, .98);
 }
@@ -377,6 +415,7 @@ textarea,
   -webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
           transition-timing-function: cubic-bezier(.1, .5, .1, 1);
 }
+
 .modal.active {
   -webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
           transition-timing-function: cubic-bezier(.1, .5, .1, 1);
@@ -391,24 +430,29 @@ textarea,
   -webkit-transition-property: box-shadow, border;
           transition-property: box-shadow, border;
 }
+
 .toggle .toggle-handle {
   border: 1px solid rgba(0, 0, 0, .2);
   box-shadow: 0 3px 3px rgba(0, 0, 0, .08);
   -webkit-transition-property: -webkit-transform, border, width;
           transition-property:         transform, border, width;
 }
+
 .toggle:before {
   display: none;
 }
+
 .toggle.active {
   background-color: transparent;
   border: 2px solid #4cd964;
   box-shadow: inset 0 0 0 13px #4cd964;
 }
+
 .toggle.active .toggle-handle {
   -webkit-transform: translate3d(17px, 0, 0);
           transform: translate3d(17px, 0, 0);
 }
+
 .toggle.active .toggle-handle {
   border-color: #4cd964;
 }
@@ -417,20 +461,24 @@ textarea,
   -webkit-transition: opacity .2s ease-in-out;
           transition: opacity .2s ease-in-out;
 }
+
 .content.sliding {
   -webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
           transition-timing-function: cubic-bezier(.1, .5, .1, 1);
 }
+
 .content.sliding.sliding-in, .content.sliding.right:not([class*="sliding-in"]) {
   -webkit-animation-name: fadeOverlay;
           animation-name: fadeOverlay;
   -webkit-animation-duration: .4s;
           animation-duration: .4s;
 }
+
 .content.sliding.right:not([class*="sliding-in"]) {
   -webkit-animation-direction: reverse;
           animation-direction: reverse;
 }
+
 .content.sliding.left {
   -webkit-transform: translate3d(-20%, 0, 0);
           transform: translate3d(-20%, 0, 0);

docs/dist/css/ratchet.css

@@ -257,6 +257,7 @@ a {
 
   -webkit-tap-highlight-color: transparent;
 }
+
 a:active {
   color: #3071a9;
 }
@@ -322,6 +323,7 @@ a:active {
   display: table;
   content: " ";
 }
+
 .clearfix:after {
   clear: both;
 }
@@ -382,10 +384,12 @@ p {
   border: 1px solid #ccc;
   border-radius: 3px;
 }
+
 .btn:active, .btn.active {
   color: inherit;
   background-color: #ccc;
 }
+
 .btn:disabled, .btn.disabled {
   opacity: .6;
 }
@@ -395,6 +399,7 @@ p {
   background-color: #428bca;
   border: 1px solid #428bca;
 }
+
 .btn-primary:active, .btn-primary.active {
   color: #fff;
   background-color: #3071a9;
@@ -406,6 +411,7 @@ p {
   background-color: #5cb85c;
   border: 1px solid #5cb85c;
 }
+
 .btn-positive:active, .btn-positive.active {
   color: #fff;
   background-color: #449d44;
@@ -417,6 +423,7 @@ p {
   background-color: #d9534f;
   border: 1px solid #d9534f;
 }
+
 .btn-negative:active, .btn-negative.active {
   color: #fff;
   background-color: #c9302c;
@@ -426,15 +433,19 @@ p {
 .btn-outlined {
   background-color: transparent;
 }
+
 .btn-outlined.btn-primary {
   color: #428bca;
 }
+
 .btn-outlined.btn-positive {
   color: #5cb85c;
 }
+
 .btn-outlined.btn-negative {
   color: #d9534f;
 }
+
 .btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active {
   color: #fff;
 }
@@ -446,6 +457,7 @@ p {
   background-color: transparent;
   border: 0;
 }
+
 .btn-link:active, .btn-link.active {
   color: #3071a9;
   background-color: transparent;
@@ -562,6 +574,7 @@ input[type="button"] {
   border-top: 1px solid #ddd;
   border-bottom: 0;
 }
+
 .bar-tab .tab-item {
   position: relative;
   display: table-cell;
@@ -571,15 +584,18 @@ input[type="button"] {
   text-align: center;
   vertical-align: middle;
 }
+
 .bar-tab .tab-item.active, .bar-tab .tab-item:active {
   color: #428bca;
 }
+
 .bar-tab .tab-item .badge {
   position: absolute;
   top: 3px;
   left: 50%;
   vertical-align: top;
 }
+
 .bar-tab .tab-item .icon {
   top: 3px;
   width: 24px;
@@ -587,6 +603,7 @@ input[type="button"] {
   padding-top: 0;
   padding-bottom: 0;
 }
+
 .bar-tab .tab-item .icon ~ .tab-label {
   display: block;
   font-size: 11px;
@@ -600,9 +617,11 @@ input[type="button"] {
   margin-top: 0;
   font-weight: 400;
 }
+
 .bar .btn.pull-right {
   margin-left: 10px;
 }
+
 .bar .btn.pull-left {
   margin-right: 10px;
 }
@@ -615,6 +634,7 @@ input[type="button"] {
   color: #428bca;
   border: 0;
 }
+
 .bar .btn-link:active, .bar .btn-link.active {
   color: #3071a9;
 }
@@ -629,12 +649,15 @@ input[type="button"] {
 .bar .btn-nav.pull-left {
   margin-left: -5px;
 }
+
 .bar .btn-nav.pull-left .icon-left-nav {
   margin-right: -3px;
 }
+
 .bar .btn-nav.pull-right {
   margin-right: -5px;
 }
+
 .bar .btn-nav.pull-right .icon-right-nav {
   margin-left: -3px;
 }
@@ -646,13 +669,16 @@ input[type="button"] {
   padding-bottom: 10px;
   font-size: 24px;
 }
+
 .bar .btn .icon {
   top: 3px;
   padding: 0;
 }
+
 .bar .title .icon {
   padding: 0;
 }
+
 .bar .title .icon.icon-caret {
   top: 4px;
   margin-left: -5px;
@@ -677,6 +703,7 @@ input[type="button"] {
   background-color: rgba(0, 0, 0, .15);
   border-radius: 100px;
 }
+
 .badge.badge-inverted {
   padding: 0 5px 0 0;
   background-color: transparent;
@@ -686,6 +713,7 @@ input[type="button"] {
   color: #fff;
   background-color: #428bca;
 }
+
 .badge-primary.badge-inverted {
   color: #428bca;
 }
@@ -694,6 +722,7 @@ input[type="button"] {
   color: #fff;
   background-color: #5cb85c;
 }
+
 .badge-positive.badge-inverted {
   color: #5cb85c;
 }
@@ -702,6 +731,7 @@ input[type="button"] {
   color: #fff;
   background-color: #d9534f;
 }
+
 .badge-negative.badge-inverted {
   color: #d9534f;
 }
@@ -719,11 +749,13 @@ input[type="button"] {
   border-top: 0;
   border-bottom: 0;
 }
+
 .card .table-view .table-view-divider:first-child {
   top: 0;
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
 }
+
 .card .table-view .table-view-divider:last-child {
   border-bottom-right-radius: 6px;
   border-bottom-left-radius: 6px;
@@ -749,9 +781,11 @@ input[type="button"] {
   overflow: hidden;
   border-bottom: 1px solid #ddd;
 }
+
 .table-view-cell:last-child {
   border-bottom: 0;
 }
+
 .table-view-cell > a:not(.btn) {
   position: relative;
   display: block;
@@ -760,9 +794,11 @@ input[type="button"] {
   overflow: hidden;
   color: inherit;
 }
+
 .table-view-cell > a:not(.btn):active {
   background-color: #eee;
 }
+
 .table-view-cell p {
   margin-bottom: 0;
 }
@@ -788,6 +824,7 @@ input[type="button"] {
 .table-view .media-object.pull-left {
   margin-right: 10px;
 }
+
 .table-view .media-object.pull-right {
   margin-left: 10px;
 }
@@ -806,6 +843,7 @@ input[type="button"] {
        -o-transform: translateY(-50%);
           transform: translateY(-50%);
 }
+
 .table-view-cell .navigate-left > .btn,
 .table-view-cell .navigate-left > .badge,
 .table-view-cell .navigate-left > .toggle,
@@ -946,6 +984,7 @@ select {
   border: 1px solid #ccc;
   border-radius: 3px;
 }
+
 .segmented-control .control-item {
   display: table-cell;
   width: 1%;
@@ -959,12 +998,15 @@ select {
   white-space: nowrap;
   border-left: 1px solid #ccc;
 }
+
 .segmented-control .control-item:first-child {
   border-left-width: 0;
 }
+
 .segmented-control .control-item:active {
   background-color: #eee;
 }
+
 .segmented-control .control-item.active {
   background-color: #ccc;
 }
@@ -972,13 +1014,16 @@ select {
 .segmented-control-primary {
   border-color: #428bca;
 }
+
 .segmented-control-primary .control-item {
   color: #428bca;
   border-color: inherit;
 }
+
 .segmented-control-primary .control-item:active {
   background-color: #cde1f1;
 }
+
 .segmented-control-primary .control-item.active {
   color: #fff;
   background-color: #428bca;
@@ -987,13 +1032,16 @@ select {
 .segmented-control-positive {
   border-color: #5cb85c;
 }
+
 .segmented-control-positive .control-item {
   color: #5cb85c;
   border-color: inherit;
 }
+
 .segmented-control-positive .control-item:active {
   background-color: #d8eed8;
 }
+
 .segmented-control-positive .control-item.active {
   color: #fff;
   background-color: #5cb85c;
@@ -1002,13 +1050,16 @@ select {
 .segmented-control-negative {
   border-color: #d9534f;
 }
+
 .segmented-control-negative .control-item {
   color: #d9534f;
   border-color: inherit;
 }
+
 .segmented-control-negative .control-item:active {
   background-color: #f9e2e2;
 }
+
 .segmented-control-negative .control-item.active {
   color: #fff;
   background-color: #d9534f;
@@ -1017,6 +1068,7 @@ select {
 .control-content {
   display: none;
 }
+
 .control-content.active {
   display: block;
 }
@@ -1041,6 +1093,7 @@ select {
       -ms-transform: translate3d(0, -15px, 0);
           transform: translate3d(0, -15px, 0);
 }
+
 .popover:before {
   position: absolute;
   top: -15px;
@@ -1053,12 +1106,14 @@ select {
   border-bottom: 15px solid #fff;
   border-left: 15px solid transparent;
 }
+
 .popover.visible {
   opacity: 1;
   -webkit-transform: translate3d(0, 0, 0);
       -ms-transform: translate3d(0, 0, 0);
           transform: translate3d(0, 0, 0);
 }
+
 .popover .bar ~ .table-view {
   padding-top: 44px;
 }
@@ -1076,6 +1131,7 @@ select {
 .popover .btn-block {
   margin-bottom: 5px;
 }
+
 .popover .btn-block:last-child {
   margin-bottom: 0;
 }
@@ -1115,6 +1171,7 @@ select {
       -ms-transform: translate3d(0, 100%, 0);
           transform: translate3d(0, 100%, 0);
 }
+
 .modal.active {
   height: 100%;
   opacity: 1;
@@ -1134,6 +1191,7 @@ select {
   overflow: hidden;
   background-color: #000;
 }
+
 .slider .slide-group {
   position: relative;
   font-size: 0;
@@ -1142,6 +1200,7 @@ select {
        -o-transition: all 0s linear;
           transition: all 0s linear;
 }
+
 .slider .slide-group .slide {
   display: inline-block;
   width: 100%;
@@ -1165,6 +1224,7 @@ select {
        -o-transition-property: background-color, border;
           transition-property: background-color, border;
 }
+
 .toggle .toggle-handle {
   position: absolute;
   top: -1px;
@@ -1182,6 +1242,7 @@ select {
        -o-transition-property:      -o-transform, border, width;
           transition-property:         transform, border, width;
 }
+
 .toggle:before {
   position: absolute;
   top: 3px;
@@ -1191,22 +1252,26 @@ select {
   text-transform: uppercase;
   content: "Off";
 }
+
 .toggle.active {
   background-color: #5cb85c;
   border: 2px solid #5cb85c;
 }
+
 .toggle.active .toggle-handle {
   border-color: #5cb85c;
   -webkit-transform: translate3d(44px, 0, 0);
       -ms-transform: translate3d(44px, 0, 0);
           transform: translate3d(44px, 0, 0);
 }
+
 .toggle.active:before {
   right: auto;
   left: 15px;
   color: #fff;
   content: "On";
 }
+
 .toggle input[type="checkbox"] {
   display: none;
 }
@@ -1218,9 +1283,11 @@ select {
        -o-transition: opacity .4s;
           transition: opacity .4s;
 }
+
 .content.fade.in {
   opacity: 1;
 }
+
 .content.sliding {
   z-index: 2;
   -webkit-transition: -webkit-transform .4s;
@@ -1230,12 +1297,14 @@ select {
       -ms-transform: translate3d(0, 0, 0);
           transform: translate3d(0, 0, 0);
 }
+
 .content.sliding.left {
   z-index: 1;
   -webkit-transform: translate3d(-100%, 0, 0);
       -ms-transform: translate3d(-100%, 0, 0);
           transform: translate3d(-100%, 0, 0);
 }
+
 .content.sliding.right {
   z-index: 3;
   -webkit-transform: translate3d(100%, 0, 0);
@@ -1283,6 +1352,7 @@ select {
   src: url("../fonts/ratchicons.eot");
   src: url("../fonts/ratchicons.eot?#iefix") format("embedded-opentype"), url("../fonts/ratchicons.woff") format("woff"), url("../fonts/ratchicons.ttf") format("truetype"), url("../fonts/ratchicons.svg#svgFontName") format("svg");
 }
+
 .icon {
   display: inline-block;
   font-family: Ratchicons;

package.json

@@ -38,13 +38,13 @@
     "grunt-contrib-cssmin": "~0.14.0",
     "grunt-contrib-htmlmin": "~0.6.0",
     "grunt-contrib-jshint": "~0.11.2",
-    "grunt-contrib-sass": "~0.9.2",
     "grunt-contrib-uglify": "~0.11.0",
     "grunt-contrib-watch": "~0.6.1",
     "grunt-csscomb": "~3.1.0",
     "grunt-html": "~5.0.0",
     "grunt-jekyll": "~0.4.2",
     "grunt-jscs": "~2.5.0",
+    "grunt-sass": "~1.1.0",
     "grunt-sed": "twbs/grunt-sed#v0.2.0",
     "load-grunt-tasks": "~3.4.0",
     "time-grunt": "~1.3.0"