rapido-css 0.2.2 → 0.2.3

data/stylesheets/components/_grids.scss

@@ -25,25 +25,21 @@ Styleguide 9
 
 */
 
-$media-queries: palm, lap, portable, lap-and-up, desk;
+$media-queries: (
+  palm: $palm,
+  lap: $lap,
+  portable: $portable,
+  lap-and-up: $lap-and-up,
+  desk: $desk
+);
 
 @if $grids {
-    @each $device in $media-queries {
-
-        $i: $total-columns + 1;
-
-        @include media($device) {
-
-            @while $i > 0 {
-
-                $nth: $total-columns / $i;
-
-                .#{$device}-#{$i} {
+    @each $media-query, $device in $media-queries {
+        @include breakpoint($device) {
+            @for $i from 1 through $total-columns {
+                .#{$media-query}-#{$i} {
                     @include span($i);
-                    @include nth-omega(#{$i}n);
                 }
-
-                $i: $i - 1;
             }
         }
     }
@@ -73,11 +69,11 @@ Styleguide 9.1
 */
 
 @if $grids-helpers {
-    @each $device in $media-queries {
-        @include media($device) {
-            .#{$device}-hide { display: none !important; }
-            .#{$device}-show { display: block !important; }
-            .#{$device}-omega { @include omega(); }
+    @each $media-query, $device in $media-queries {
+        @include breakpoint($device) {
+            .#{$media-query}-hide { display: none !important; }
+            .#{$media-query}-show { display: block !important; }
+            .#{$media-query}-omega { @include omega(); }
         }
     }
 }

data/stylesheets/components/_labels.scss

@@ -17,7 +17,7 @@ Styleguide 10
     .badge,
     .pill {
         @extend %pill !optional;
-        @include inline-block;
+        @extend %display-inline-block;
         padding: $pills-padding;
         vertical-align: baseline;
         white-space: nowrap;
@@ -27,7 +27,7 @@ Styleguide 10
     .pill { @include border-radius(500em); }
 
     .badge, .pill {
-        &:empty { display: none; }
+        &:empty { @extend %display-none; }
     }
 
     a {
@@ -36,8 +36,8 @@ Styleguide 10
         &.badge:hover,
         &.badge:focus {
             color: $white;
-            text-decoration: none;
-            cursor: pointer;
+            @extend %text-decoration-none;
+            @extend %cursor-pointer;
         }
     }
 

data/stylesheets/components/_modals.scss

@@ -26,16 +26,16 @@ Styleguide 11
 
 */
 
-.modal { display: none; }
+.modal { @extend %display-none; }
 
 @if $modal {
 
 // Resets
 
     %modal-reset {
-        padding: 0;
-        margin: 0;
-        border: 0;
+        @extend %no-padding;
+        @extend %no-margin;
+        @extend %no-border; 
         vertical-align: top;
         list-style-type: none;
     }
@@ -58,7 +58,7 @@ Styleguide 11
     .fancybox-overlay {
         @extend %modal__overlay !optional;
         @include position(absolute, 0px 0 0 0px);
-        display: none;
+        @extend %display-none;
         overflow: hidden;
         z-index: ($zindex-modal - 1);
 
@@ -133,14 +133,14 @@ Styleguide 11
 // Content
 
     .fancybox-error {
-        margin: 0;
+        @extend %no-margin;
         padding: $modals-error-padding;
         white-space: nowrap;
     }
 
     .fancybox-image,
     .fancybox-iframe {
-        display: block;
+        @extend %display-block;
         @include square(100%);
     }
 
@@ -156,7 +156,7 @@ Styleguide 11
     #fancybox-loading {
         @include position(fixed, 50% 0 0 50%);
         @extend %modal__loading !optional;
-        cursor: pointer;
+        @extend %cursor-pointer;
         z-index: ($zindex-modal + 4);
     }
 
@@ -214,17 +214,17 @@ Styleguide 11
     .fancybox-title-float-wrap {
         @include position(absolute, 0 50% 0px 0);
         margin-bottom: em(-35px);
-        text-align: center;
+        @extend %text-align-center;
         z-index: ($zindex-modal + 3);
 
         .child {
             @include alpha-color(#000, .8, background);
             @include border-radius($base-border-radius);
-            @include inline-block;
+            @extend %display-inline-block;
             margin-right: -100%;
             padding: em(2px) em($input-padding-side);
             color: #FFF;
-            font-weight: bold;
+            @extend %font-weight-bold;
             white-space: nowrap;
         }
     }
@@ -290,12 +290,12 @@ Styleguide 11.1
 
         ul {
             @extend %modal__btnbar-size !optional;
-            display: block;
+            @extend %display-block;
             list-style: none;
             margin: 0 auto;
             li {
-                float: left;
-                margin: 0;
+                @extend %float-left;
+                @extend %no-margin;
                 a {
                     @extend %modal__btn !optional;
                     position: relative;
@@ -364,7 +364,7 @@ Styleguide 11.2
             position: relative;
 
             li {
-                float: left;
+                @extend %float-left;
                 margin-right: em(4px);
                 @include opacity(.5);
 
@@ -372,9 +372,9 @@ Styleguide 11.2
                 &.active { @include opacity(1); }
 
                 a {
-                    display: block;
+                    @extend %display-block;
                     overflow: hidden;
-                    text-align: center;
+                    @extend %text-align-center;
                 }
 
             }

data/stylesheets/components/_navs.scss

@@ -36,14 +36,14 @@ Styleguide 12
 @if $navs {
 
     .nav {
-        @extend .clearfix;
-        @include inline-block;
+        @extend %clearfix;
+        @extend %display-inline-block;
         margin-bottom: rhythm();
         position: relative;
 
         &, ul {
-            @extend .clearfix;
-            @extend .list-style-none;
+            @extend %clearfix;
+            @extend %list-style-none;
             margin-bottom: 0;
         }
 
@@ -52,11 +52,11 @@ Styleguide 12
 
             > a {
                 @extend .transition;
-                @include inline-block;
+                @extend %display-inline-block;
                 line-height: 1em;
 
                 &:hover, &:focus {
-                    text-decoration: none;
+                    @extend %text-decoration-none;
                 }
 
                 img { max-width: none; }
@@ -64,9 +64,9 @@ Styleguide 12
 
             &.disabled > a:hover,
             &.disabled > a:focus {
-                text-decoration: none;
+                @extend %text-decoration-none;
                 background-color: transparent;
-                cursor: default;
+                @extend %cursor-default;
             }
 
             // Disabled
@@ -99,18 +99,18 @@ Styleguide 12
     .nav__title {
         @include adjust-font-size-to($small-size);
         color: $gray;
-        display: block;
-        font-weight: bold;
+        @extend %display-block;
+        @extend %font-weight-bold;
         padding: $navs-padding;
         padding-left: 0;
-        text-transform: uppercase;
+        @extend %text-transform-uppercase;
     }
 
 // Horizontal nav
 
     .nav--inline {
         & > li,
-        > ul > li { float: left;}
+        > ul > li { @extend %float-left;}
 
         li ul {
           @include position(absolute, 100% 0 0 0px);
@@ -124,7 +124,7 @@ Styleguide 12
         width: 100%;
 
         li > a {
-            display: block;
+            @extend %display-block;
         }
     }
 
@@ -142,7 +142,7 @@ Styleguide 12
                 }
             }
 
-            ul a { display: block; }
+            ul a { @extend %display-block; }
 
             &.current > a,
             &.current > a:hover,

data/stylesheets/components/_off-canvas.scss

@@ -162,7 +162,7 @@ Styleguide 15.2
         visibility: visible;
 
         &::after {
-          display: none;
+          @extend %display-none;
         }
       }
 
@@ -198,7 +198,7 @@ Styleguide 15.2
         z-index: 1;
 
         &::after {
-          display: none;
+          @extend %display-none;
         }
       }
     }
@@ -227,7 +227,7 @@ Styleguide 15.2
         @include translate3d($if-3d, 0, 0);
 
         &::after {
-          display: none;
+          @extend %display-none;
         }
       }
     }
@@ -257,7 +257,7 @@ Styleguide 15.2
         @include translate3d($if-3d/2, 0, 0);
 
         &::after {
-          display: none;
+          @extend %display-none;
         }
       }
     }

data/stylesheets/components/_overlay.scss

@@ -76,8 +76,8 @@ Styleguide 18
 
   .overlay-close {
     @extend %overlay__close !optional;
-    cursor: pointer;
-    display: block;
+    @extend %cursor-pointer;
+    @extend %display-block;
   }
 
 }

data/stylesheets/components/_pager.scss

@@ -20,20 +20,20 @@ Styleguide 13
 
 
     .pager {
-        @include clearfix();
+        @extend %clearfix;
         list-style: none;
         margin: rhythm() 0;
-        text-align: center;
+        @extend %text-align-center;
 
         li {
-            display: inline;
+            @extend %display-inline;
 
             a,
             span {
                 @include border-radius($base-border-radius);
                 border-style: solid;
                 border-width: 1px;
-                @include inline-block;
+                @extend %display-inline-block;
                 line-height: 1em;
                 padding: $pager-padding;
                 @extend %pager--btn !optional;
@@ -67,13 +67,13 @@ Styleguide 13.1
         [rel="next"],
         .next > a,
         .next > span {
-            float: right;
+            @extend %float-right;
         }
 
         [rel="prev"],
         .previous > a,
         .previous > span {
-            float: left;
+            @extend %float-left;
         }
 
 /*
@@ -96,7 +96,7 @@ Styleguide 13.2
         .disabled > a:hover,
         .disabled > a:focus,
         .disabled > span {
-            cursor: default;
+            @extend %cursor-default;
             @extend %pager--btn__disabled !optional;
         }
 

data/stylesheets/components/_pagination.scss

@@ -32,22 +32,22 @@ Styleguide 14
         clear: both;
 
         > * {
-            @extend .clearfix;
+            @extend %clearfix;
             @include border-radius($base-border-radius);
-            @include inline-block;
+            @extend %display-inline-block;
             margin-bottom: 0;
             margin-left: $input-border;
 
             li {
-                float: left;
+                @extend %float-left;
                 list-style-type: none;
 
                 a,
                 span {
-                    @include inline-block;
+                    @extend %display-inline-block;
                     padding: $pagination-padding;
                     line-height: 1em;
-                    text-decoration: none;
+                    @extend %text-decoration-none;
                     border-width: $input-border;
                     border-style: solid;
                     margin-left: -$input-border;
@@ -90,15 +90,15 @@ Styleguide 14
             .disabled > a,
             .disabled > a:hover,
             .disabled > a:focus {
-                cursor: default;
+                @extend %cursor-default;
             }
         }
     }
 
 // Alternative alignments
 
-    .pagination--center {text-align: center; }
-    .pagination--right   {text-align: right; }
+    .pagination--center {@extend %text-align-center; }
+    .pagination--right   {@extend %text-align-right; }
 
 // Rounded sides
 

data/stylesheets/components/_picker.scss

@@ -25,7 +25,7 @@ Styleguide 8.7
       z-index: $zindex-dropdown;
     }
 
-    .picker__input { cursor: default; }
+    .picker__input { @extend %cursor-default; }
 
     .picker__holder {
       -webkit-overflow-scrolling: touch;
@@ -57,25 +57,25 @@ Styleguide 8.7
 
     .picker__header {
       position: relative;
-      text-align: center;
+      @extend %text-align-center;
     }
 
     .picker__year,
     .picker__month,
     .picker__select--year
     .picker__select--month {
-      display: inline-block;
+      @extend %display-inline-block;
       margin: 0 .25em;
     }
 
     .picker__month {
-      font-weight: bold;
+      @extend %font-weight-bold;
       @include adjust-font-size-to($h5-size);
     }
 
     .picker__year {
       color: $gray;
-      font-style: italic;
+      @extend %font-style-italic;
       @include adjust-font-size-to($small-size);
     }
 
@@ -109,7 +109,7 @@ Styleguide 8.7
     .picker__nav--disabled:hover,
     .picker__nav--disabled:before,
     .picker__nav--disabled:before:hover {
-      cursor: default;
+      @extend %cursor-default;
       background: none;
     }
 
@@ -119,12 +119,12 @@ Styleguide 8.7
       margin: nth($picker-padding, 1) 0;
       width: 100%;
       table-layout: fixed;
-      text-align: center;
+      @extend %text-align-center;
       border-collapse: collapse;
       border-spacing: 0;
       td {
-        margin: 0;
-        padding: 0;
+        @extend %no-margin;
+        @extend %no-padding;
       }
     }
 
@@ -142,7 +142,7 @@ Styleguide 8.7
       &:before {
         @include position(absolute, 2px 2px 0 0);
         @include triangle(8px, rgba(0,0,0,.3), up-right);
-        display: block;
+        @extend %display-block;
         content: "";
       }
     }
@@ -155,7 +155,7 @@ Styleguide 8.7
     .picker__day--infocus:hover,
     .picker__day--outfocus:hover {
       @extend %form__picker--hover;
-      cursor: pointer;
+      @extend %cursor-pointer;
     }
 
     .picker__day--highlighted:hover,
@@ -166,7 +166,7 @@ Styleguide 8.7
     .picker__day--disabled,
     .picker__day--disabled:hover {
       @extend %form__picker--disabled;
-      cursor: default;
+      @extend %cursor-default;
     }
 
     .picker__day--highlighted.picker__day--disabled,
@@ -183,7 +183,7 @@ Styleguide 8.7
       @extend .btn;
       @extend .btn--link;
       color: $text-color;
-      font-weight: bold;
+      @extend %font-weight-bold;
       width: 50%;
 
       &:hover { @extend %form__picker--hover }