rapido-css 0.2.2 → 0.2.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 7007fd03a575bbb9b5e82919b24e2f1f11eff809
-  data.tar.gz: 31f94c41ee91621e0db52daf4a5f4d6a1cdcc934
+  metadata.gz: 8ca2389a157a912440570a43680e100fa7a7cb98
+  data.tar.gz: fb3783dd6c8717229504c173b68f68fea364bfb5
 SHA512:
-  metadata.gz: 6e0bf28308533fbf87b65d8f03314ffe8c1d32199a11cb2a4c463a4eb6c515b047288c09bd359b2cbaae3c36d0b8cb922a1bf42bde669d114b652d3889d2fc70
-  data.tar.gz: 162bd05bfd2f1b164d489c7a8b1a8c6a77f55f0f54810ff7b8d493d4d0027975d87982fd5eb1e691333d000c60ef2e41becf355fdafe13882faa2ab6d5edab44
+  metadata.gz: 612a73530d6381ad65f7d295b411e16445bda20e420c212cb9d09f7d86e943f73641d0205cba5041f378417f8e3a002fa7a7be40d965e81cbe3ca6d16757ae49
+  data.tar.gz: 2f7ce89591e5f114ffcf057d95b052e6658c73a8b50b7c28eef51812e31cbe0958ca5295dd48c0ff231df98754d403e0d70570267b80ba2477b9d0d70aefa0e6

data/lib/rapido-css.rb

@@ -1,7 +1,9 @@
 require 'compass'
+require 'breakpoint'
 require 'susy'
 require 'sass-media_query_combiner'
 require 'sass-globbing'
+require 'compass-placeholders'
 
 extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
 Compass::Frameworks.register('rapido-css', :path => extension_path)

data/stylesheets/_default-styles.scss

@@ -215,10 +215,10 @@ Styleguide 32.3
     %btn--scripts {
         @include alpha-color(#000, .6, background);
         color: #fff;
-        cursor: pointer;
-        display: block;
-        text-align: center;
-        text-decoration: none;
+        @extend %cursor-pointer;
+        @extend %display-block;
+        @extend %text-align-center;
+        @extend %text-decoration-none;
 
         &:hover {
             color: #fff;
@@ -282,7 +282,7 @@ Styleguide 32.6
 
         > li > a:hover,
         > li > a:focus {
-            text-decoration: none;
+            @extend %text-decoration-none;
             background-color: $grayLight;
         }
     }

data/stylesheets/components/_alerts.scss

@@ -21,7 +21,7 @@ Styleguide 1
     margin-bottom: rhythm();
     @extend %alert;
 
-    p { margin: 0; }
+    p { @extend %no-margin; }
 
     .close {
       position: relative;

data/stylesheets/components/_breadcrumbs.scss

@@ -25,7 +25,7 @@ Styleguide 2
         list-style: none;
         @extend %breadcrumbs !optional;
 
-        > li { @include inline-block(); }
+        > li { @extend %display-inline-block; }
 
         .current {@extend %breadcrumbs__current !optional;}
     }

data/stylesheets/components/_button-groups.scss

@@ -18,12 +18,12 @@ Styleguide 4
 @if $button-groups {
 
     .btn-group {
-        @extend .clearfix;
-        @include inline-block;
-        margin: 0;
+        @extend %clearfix;
+        @extend %display-inline-block;
+        @extend %no-margin;
 
         > * {
-            float: left;
+            @extend %float-left;
             list-style-type: none;
         }
 
@@ -40,7 +40,7 @@ Styleguide 4
         // Float button and reapply border radius
         > .btn,
         > li .btn {
-            float: left;
+            @extend %float-left;
             @include border-radius(0);
         }
 

data/stylesheets/components/_buttons.scss

@@ -25,13 +25,13 @@ Styleguide 3
         @include border-radius($base-border-radius);
         border-style: solid;
         border-width: $input-border;
-        cursor: pointer;
-		@include inline-block;
+        @extend %cursor-pointer;
+		@extend %display-inline-block;
         line-height: 1em;
         margin-bottom: 0;
-        text-align: center;
+        @extend %text-align-center;
 
-        &:hover, &.hover, &:focus { text-decoration: none; }
+        &:hover, &.hover, &:focus { @extend %text-decoration-none; }
 
         &.active, &:active {outline: 0; }
 
@@ -40,7 +40,7 @@ Styleguide 3
             @include box-shadow(none);
             @include opacity(65);
             background-image: none;
-            cursor: default;
+            @extend %cursor-default;
         }
     }
 
@@ -147,7 +147,7 @@ Styleguide 3.4
 // Block button
 
     .btn--block {
-        display: block;
+        @extend %display-block;
         width: 100%;
         padding-left: 0;
         padding-right: 0;
@@ -185,7 +185,7 @@ Styleguide 3.5
         border-color: transparent;
         background: none;
         color: $link-color;
-        cursor: pointer;
+        @extend %cursor-pointer;
 
         &:hover, &:focus {
             color: $link-color-hover;
@@ -200,7 +200,7 @@ Styleguide 3.5
 
         &[disabled]:hover, &[disabled]:focus {
             color: $grayDark;
-            text-decoration: none;
+            @extend %text-decoration-none;
         }
     }
 

data/stylesheets/components/_captions.scss

@@ -44,14 +44,14 @@ Styleguide 5
     position: relative;
     overflow: hidden;
     @include perspective(1000);
-    @include inline-block;
+    @extend %display-inline-block;
 
 
     &:nth-child(2n) {
       margin-right: 0;
     }
     img {
-      display: block;
+      @extend %display-block;
       transition: $caption-animations-duration;
     }
     figcaption {
@@ -225,7 +225,7 @@ Styleguide 5
         top: 0;
         left: 0;
         @include scale(2);
-        text-align: center;
+        @extend %text-align-center;
         @include opacity(0);
       }
       img {
@@ -343,7 +343,7 @@ Styleguide 5
       figcaption {
         top: 0;
         left: 0;
-        text-align: center;
+        @extend %text-align-center;
         @include opacity(0);
         height: 100%;
       }
@@ -365,11 +365,11 @@ Styleguide 5
       figcaption {
         top: 0;
         left: 0;
-        text-align: center;
+        @extend %text-align-center;
         height: 100%;
       }
       img {
-        display: block;
+        @extend %display-block;
         position:relative;
         z-index:10;
         transition: $caption-animations-duration;
@@ -385,12 +385,12 @@ Styleguide 5
       figcaption {
         top: 0;
         left: 0;
-        text-align: center;
+        @extend %text-align-center;
         height: 100%;
         @include translateY(100%);
       }
       img {
-        display: block;
+        @extend %display-block;
         position:relative;
         transition: $caption-animations-duration;
       }

data/stylesheets/components/_close.scss

@@ -13,26 +13,26 @@ Styleguide 6
 @if $close {
 
     .close {
-        float: right;
+        @extend %float-right;
         font-size: 1em;
-        font-weight: bold;
+        @extend %font-weight-bold;
         color: $black;
         @include opacity(20);
         &:hover,
         &:focus {
             color: $black;
-            text-decoration: none;
-            cursor: pointer;
+            @extend %text-decoration-none;
+            @extend %cursor-pointer;
             @include opacity(40);
         }
     }
 
     button.close {
-        padding: 0;
-        cursor: pointer;
-        background: transparent;
-        border: 0;
-        -webkit-appearance: none;
+        @extend %no-padding;
+        @extend %cursor-pointer;
+        @extend %no-background;
+        @extend %no-border; 
+        @extend %appearance-none;
     }
 
 }

data/stylesheets/components/_dropdowns.scss

@@ -56,7 +56,7 @@ Styleguide 7
     .dropdown,
     .dropdown__toggle {
         position: relative;
-        @include inline-block;
+        @extend %display-inline-block;
     }
 
     .dropdown__toggle:focus { outline: 0; }
@@ -105,7 +105,7 @@ Styleguide 7.2
         border-style: solid;
         border-width: $input-border;
         display/*\**/: none\9; // Ugly IE8 Hack
-        float: left;
+        @extend %float-left;
         list-style: none;
         margin: -$input-border 0 0 0;
         max-height: 0;
@@ -126,8 +126,8 @@ Styleguide 7.2
         > li > a,
         > li > label {
             clear: both;
-            display: block;
-            font-weight: normal;
+            @extend %display-block;
+            @extend %font-weight-normal;
             white-space: nowrap;
         }
 
@@ -143,13 +143,13 @@ Styleguide 7.2
 
     .dropdown__menu > li > a:hover,
     .dropdown__menu > li > a:focus {
-        text-decoration: none;
+        @extend %text-decoration-none;
     }
 
     .dropdown__menu > .active > a,
     .dropdown__menu > .active > a:hover,
     .dropdown__menu > .active > a:focus {
-        text-decoration: none;
+        @extend %text-decoration-none;
         outline: 0;
     }
 
@@ -161,10 +161,10 @@ Styleguide 7.2
 
     .dropdown__menu > .disabled > a:hover,
     .dropdown__menu > .disabled > a:focus {
-        text-decoration: none;
+        @extend %text-decoration-none;
         background-color: transparent;
         background-image: none;
-        cursor: default;
+        @extend %cursor-default;
     }
 
 // Dropdown open

data/stylesheets/components/_forms.scss

@@ -34,23 +34,23 @@ Styleguide 8
 @if $forms {
 
 form {
-    @extend .clearfix;
+    @extend %clearfix;
     margin: 0 0 rhythm();
 }
 
 fieldset {
-    padding: 0;
-    margin: 0;
-    border: 0;
+    @extend %no-padding;
+    @extend %no-margin;
+    @extend %no-border;
 }
 
 legend {
     @include adjust-font-size-to($h5-size);
-    display: block;
-    padding: 0;
+    @extend %display-block;
+    @extend %no-padding;
     width: 100%;
-    font-weight: bold;
-    border: 0;
+    @extend %font-weight-bold;
+    @extend %no-border;
     padding-bottom: rhythm(.5);
     margin-bottom: rhythm(.5);
     border-bottom: 1px solid #e5e5e5;
@@ -70,7 +70,7 @@ textarea {
 
 label {
     line-height: $input-height/2;
-    display: block;
+    @extend %display-block;
 }
 
 .input-text,
@@ -90,12 +90,12 @@ input[type="url"],
 input[type="search"],
 input[type="tel"],
 input[type="color"] {
-    @include inline-block;
+    @extend %display-inline-block;
     padding: 0 $input-padding-side;
     height: $input-height;
     border-width: $input-border;
     border-style: solid;
-    @media \0screen { line-height: $input-height; } // Ugly IE8 Hack
+    line-height/*\**/: #{$input-height}\9; // Ugly IE8 Hack
     @extend %input !optional; // Backward compatibility
     @extend %form__input !optional;
 
@@ -103,7 +103,7 @@ input[type="color"] {
 }
 
 select {
-    @include inline-block;
+    @extend %display-inline-block;
 }
 
 input,
@@ -148,7 +148,7 @@ select[size] {
 input[readonly],
 select[readonly],
 textarea[readonly] {
-  cursor: default;
+  @extend %cursor-default;
 }
 
 input[disabled],
@@ -179,9 +179,9 @@ select:focus:invalid {
 .form__group + .form__group { margin-top: em($control-margin-bottom); }
 
 .form__controls {
-  @extend .clearfix;
+  @extend %clearfix;
   position: relative;
-  @include inline-block;
+  @extend %display-inline-block;
 }
 
 
@@ -198,7 +198,7 @@ Styleguide 8.1
 */
 
 .form__label {
-    font-weight: bold;
+    @extend %font-weight-bold;
     margin-bottom: em($label-margin-bottom);
     cursor: auto;
     @extend %form__label !optional;
@@ -229,21 +229,21 @@ Styleguide 8.2
 .form__checkbox,
 .form__select {
     padding-left: em($checkbox-padding-left);
-    font-weight: normal;
-    cursor: pointer;
-    display: block;
+    @extend %font-weight-normal;
+    @extend %cursor-pointer;
+    @extend %display-block;
 }
 
 .form__select {padding-left: 0;}
 
 .form__radio input[type="radio"],
 .form__checkbox input[type="checkbox"] {
-    float: left;
+    @extend %float-left;
     margin-left: -20px;
 }
 .form__radio.inline,
 .form__checkbox.inline {
-    @include inline-block;
+    @extend %display-inline-block;
 }
 .form__radio.inline + .form__radio.inline,
 .form__checkbox.inline + .form__checkbox.inline {
@@ -289,10 +289,10 @@ Styleguide 8.3
     @extend %select !optional; // Backward compatibility
     @extend %form__select !optional;
     @include border-radius($base-border-radius);
-    @include inline-block;
+    @extend %display-inline-block;
     border-style: solid;
     border-width: $input-border;
-    cursor: pointer;
+    @extend %cursor-pointer;
     height: $input-height;
     line-height: 1em;
     margin-bottom: 0;
@@ -301,12 +301,12 @@ Styleguide 8.3
     width: 240px;
 
     select {
-        @include appearance(none);
+        @extend %appearance-none;
         background-color:transparent;
         background-image:none;
         border:none;
         box-shadow:none;
-        cursor: pointer;
+        @extend %cursor-pointer;
         position: relative;
         width:100%;
         z-index: 3;
@@ -317,7 +317,7 @@ Styleguide 8.3
     &:after {
         /*@include position(absolute, em($input-padding-top) em($input-padding-side) 0 0);*/
         @include position(absolute, 0em 0em 0em 0);
-        display: block;
+        @extend %display-block;
         line-height: $input-height;
         padding-right: $input-padding-side;
     }
@@ -387,11 +387,11 @@ Styleguide 8.5
     color: lighten($text-color, 15%);
 }
 .form__help--block {
-    display: block;
+    @extend %display-block;
     padding: rhythm(.5) 0 0;
 }
 .form__help--inline {
-    @include inline-block();
+    @extend %display-inline-block;
     vertical-align: middle;
     padding-left: 5px;
 }
@@ -451,12 +451,12 @@ Styleguide 8.6
   }
 
   a {
-    display: block;
+    @extend %display-block;
   }
 
   > * {
     padding: $input-padding;
-    display: block;
+    @extend %display-block;
   }
 
   > * + * {
@@ -464,7 +464,7 @@ Styleguide 8.6
   }
 
   ul {
-    margin: 0;
+    @extend %no-margin;
     list-style: none;
   }
 }
@@ -498,15 +498,15 @@ Styleguide 8.8
 */
 
 .form__addon {
-    @include inline-block;
+    @extend %display-inline-block;
     width: auto;
     min-width: em(16px);
     padding: $input-padding;
     line-height: 1em;
-    font-weight: normal;
-    float: left;
+    @extend %font-weight-normal;
+    @extend %float-left;
     height: $input-height;
-    text-align: center;
+    @extend %text-align-center;
     border-width: $input-border;
     border-style: solid;
     @extend %input-addon !optional; // Backward compatibility
@@ -519,7 +519,7 @@ Styleguide 8.8
     > [type],
     > [class] {
         @include border-radius(0);
-        float: left;
+        @extend %float-left;
         margin-left: -$input-border;
 
         &:first-child   { @include border-radius($base-border-radius 0 0 $base-border-radius); }
@@ -561,11 +561,11 @@ Styleguide 8.9
     margin-bottom: rhythm(1);
     border-top: 1px solid #e5e5e5;
     clear: both;
-    @extend .clearfix;
+    @extend %clearfix;
 }
 
 .form__group.form__actions {
-    border: 0;
+    @extend %no-border;
     clear: none;
     margin-bottom: 0;
     margin-top: 0;
@@ -666,10 +666,10 @@ Styleguide 8.10
     .form--aligned {
 
         .form__label {
-            float: left;
+            @extend %float-left;
             width: em($horizontal-offset) - em(20px);
             padding-top: em($input-padding-top);
-            text-align: right;
+            @extend %text-align-right;
         }
 
         .form__controls { margin-left: em(20px); }
@@ -690,7 +690,7 @@ Styleguide 8.10
             padding-left: em($horizontal-offset);
         }
 
-        @include media(palm) {
+        @include breakpoint($palm) {
             .form__label {
                 width: 100%;
                 float: none;
@@ -751,7 +751,7 @@ Styleguide 8.10.1
         }
 
         .form__label {
-          @include inline-block;
+          @extend %display-inline-block;
           padding-right: 1em;
           margin-bottom: 0;
         }
@@ -781,8 +781,8 @@ Styleguide 8.10.1
         }
 
         .form__group {
-            padding: 0;
-            @include inline-block;
+            @extend %no-padding;
+            @extend %display-inline-block;
         }
 
         .form__group + .form__group {
@@ -790,10 +790,10 @@ Styleguide 8.10.1
         }
 
         .form__actions {
-            border: 0;
-            padding: 0;
-            margin: 0;
-            @include inline-block;
+            @extend %no-border;
+            @extend %no-padding;
+            @extend %no-margin;
+            @extend %display-inline-block;
         }
 
     }