rapido-css 0.2.2 → 0.2.3

data/stylesheets/components/_sliders.scss

@@ -33,14 +33,14 @@ Styleguide 16
 
     .bx-wrapper {
         position: relative;
-        padding: 0;
+        @extend %no-padding;
         *zoom: 1;
         z-index: $zindex-slider;
         margin-bottom: rhythm();
 
         img {
             max-width: 100%;
-            display: block;
+            @extend %display-block;
         }
 
         ul {@extend .list_style_none;}
@@ -61,7 +61,7 @@ Styleguide 16
             span {@extend .visuallyhidden;}
         }
 
-        .disabled { display: none; }
+        .disabled { @extend %display-none; }
 
     }
 
@@ -72,15 +72,15 @@ Styleguide 16
 
     .bx-pager {
         width: 100%;
-        text-align: center;
+        @extend %text-align-center;
         @extend %slider__pager !optional;
 
     }
 
     .bx-pager-item {
-        @include inline-block;
+        @extend %display-inline-block;
         a {
-            @include inline-block;
+            @extend %display-inline-block;
             // @include hide-text;
         }
     }
@@ -102,7 +102,7 @@ Styleguide 16
         width: 100%;
 
         span {
-            @include inline-block;
+            @extend %display-inline-block;
             @extend %slider__caption !optional;
         }
     }

data/stylesheets/components/_tables.scss

@@ -49,11 +49,11 @@ Styleguide 20
         td {
             padding: $tables-padding;
             line-height: rhythm(1);
-            text-align: left;
+            @extend %text-align-left;
             vertical-align: top;
         }
 
-        th { font-weight: bold; }
+        th { @extend %font-weight-bold; }
 
         thead th { vertical-align: bottom; }
 
@@ -115,11 +115,11 @@ Styleguide 20
 
         thead {
             th {
-                cursor: pointer;
+                @extend %cursor-pointer;
 
                 &.sorting-asc:after,
                 &.sorting-desc:after {
-                    float: right;
+                    @extend %float-right;
                 }
             }
         }

data/stylesheets/components/_tabs.scss

@@ -50,16 +50,16 @@ Styleguide 21
         margin-bottom: rhythm();
 
         .etabs {
-            margin: 0;
-            padding: 0;
+            @extend %no-margin;
+            @extend %no-padding;
             @extend %tab__nav !optional;
 
             li {
-                @include inline-block;
+                @extend %display-inline-block;
 
                 a {
                     line-height: 1em;
-                    display: block;
+                    @extend %display-block;
                     padding: $tabs-tab-padding;
                     outline: none;
                     @include border-radius($base-border-radius $base-border-radius 0 0);
@@ -73,13 +73,13 @@ Styleguide 21
                 &.active {
                     a {
                         position: relative;
-                        font-weight: bold;
+                        @extend %font-weight-bold;
                         @extend %tab__btn__current !optional;
 
                         &:after {
                             @include position(absolute, 0 0px -1px 0px);
                             height: 2px;
-                            display: block;
+                            @extend %display-block;
                             content: "";
                         }
                     }

data/stylesheets/components/_toggle.scss

@@ -34,8 +34,8 @@ when you have two animation that you don't wont to start at the same time.
 Remeber to add closed and open state in the css, this module doesn't have
 default styling, es:
 
-    [data-toggle-content]       { display: none; }
-    [data-toggle-content].open  { display: block; }
+    [data-toggle-content]       { @extend %display-none; }
+    [data-toggle-content].open  { @extend %display-block; }
 
 Styleguide 17
 

data/stylesheets/components/_tooltip.scss

@@ -93,7 +93,7 @@ Styleguide 19
 
     &:after {
       content: "";
-      display: block;
+      @extend %display-block;
       position: absolute;
     }
 

data/stylesheets/components/_type.scss

@@ -29,14 +29,14 @@ html {
 
 body {
     @include adjust-font-size-to($base-font-size);
-    margin: 0;
+    @extend %no-margin;
     font-family: $base-font-family;
     color: $text-color;
 }
 
 img {
     max-width: 100%;
-    @include inline-block;
+    @extend %display-inline-block;
 }
 
 a, button, textarea, input { outline: none; }
@@ -45,12 +45,12 @@ a, button, textarea, input { outline: none; }
 
 a {
     color: $link-color;
-    text-decoration: none;
+    @extend %text-decoration-none;
 
     &:hover,
     &:focus {
         color: $link-color-hover;
-        text-decoration: none;
+        @extend %text-decoration-none;
     }
 
 }
@@ -89,8 +89,8 @@ p           { margin: 0 0 rhythm(1);}
 
 small         { @include adjust-font-size-to($small-size); }
 
-strong        { font-weight: bold; }
-em            { font-style: italic; }
+strong        { @extend %font-weight-bold; }
+em            { @extend %font-style-italic; }
 cite          { font-style: normal; }
 
 /*
@@ -115,7 +115,7 @@ h1, h2, h3, h4, h5, h6 {
     margin-top: 0;
 
     small {
-        font-weight: normal;
+        @extend %font-weight-normal;
         line-height: rhythm();
         color: $grayLight;
     }
@@ -182,16 +182,17 @@ Styleguide 22.3
 
 */
 
-.list_style_none, .list-style-none {
-    padding-left: 0;
-    margin-left: 0;
-    list-style: none;
+.list_style_none,
+.list-style-none {
+    @extend %list-style-none;
+    @extend %no-margin;
+    @extend %no-padding;
 }
 
 // Unordered and Ordered lists
 
 ul, ol {
-    padding: 0;
+    @extend %no-padding;
     margin: 0 0 rhythm(1) 25px;
 }
 
@@ -213,7 +214,7 @@ ol.inline {
     margin-left: 0;
     list-style: none;
     > li {
-        @include inline-block();
+        @extend %display-inline-block;
     }
 }
 
@@ -235,7 +236,7 @@ Styleguide 22.4
 
 dl      { margin-bottom: rhythm(1); }
 dt, dd  { }
-dt      { font-weight: bold; }
+dt      { @extend %font-weight-bold; }
 dd      { margin-left: 0; }
 
 /*
@@ -255,12 +256,12 @@ Styleguide 22.4.1
 */
 
 .dl-horizontal {
-    @extend .clearfix;
+    @extend %clearfix;
     dt {
         @include text-overflow();
         clear: left;
-        float: left;
-        text-align: right;
+        @extend %float-left;
+        @extend %text-align-right;
         width: em($horizontal-offset) - 20;
     }
 
@@ -279,7 +280,7 @@ Styleguide 22.5
 
 hr {
     margin: rhythm(1) 0;
-    border: 0;
+    @extend %no-border;
     border-bottom: 1px solid $gray;
 }
 
@@ -292,7 +293,7 @@ abbr[data-original-title] {
 }
 abbr.initialism {
     font-size: 90%;
-    text-transform: uppercase;
+    @extend %text-transform-uppercase;
 }
 
 /*
@@ -311,7 +312,7 @@ Styleguide 22.6
 
 blockquote {
     padding: 0 0 0 rhythm(1);
-    margin: 0;
+    @extend %no-margin;
     margin: 0 0 rhythm(1);
     border-left: 5px solid $grayLighter;
 
@@ -321,7 +322,7 @@ blockquote {
     }
 
     cite {
-        display: block;
+        @extend %display-block;
         color: $grayLight;
         &:before {
             content: '\2014 \00A0';
@@ -329,7 +330,7 @@ blockquote {
     }
 
     &.pull-right {
-        float: right;
+        @extend %float-right;
         padding-right: 15px;
         padding-left: 0;
         border-right: 5px solid $grayLighter;
@@ -337,7 +338,7 @@ blockquote {
 
         p,
         small {
-            text-align: right;
+            @extend %text-align-right;
         }
 
         small {
@@ -359,7 +360,7 @@ blockquote:after {
 // Addresses
 
 address {
-    display: block;
+    @extend %display-block;
     margin-bottom: rhythm(1);
     font-style: normal;
     line-height: rhythm(1);

data/stylesheets/rapido.scss

@@ -20,6 +20,8 @@
 
 @import "compass";
 @import "susy";
+@import "breakpoint";
+@import "compass-placeholders";
 
 // Utilities
 

data/stylesheets/settings/_dimensions.scss

@@ -151,12 +151,10 @@ Components
     $tooltips-padding:              $input-padding  # Tooltips padding
     $picker-padding:                1em 1em         # Date picker padding
 
-
 Styleguide 31.3
 
 */
 
-
 // Helper classes
 $wrapper-padding:                   20px                                                                    !default;
 
@@ -252,6 +250,13 @@ $desk-end:                          1080px
 $palm-end:                          $lap-start - 1px;
 $lap-end:                           $desk-start - 1px;
 
+// Failback for =< 2.2.1
+$palm:                              $palm-end max-width                                                     !default;
+$lap:                               $lap-start $lap-end                                                     !default;
+$lap-and-up:                        $lap-start                                                              !default;
+$portable:                          $lap-end max-width                                                      !default;
+$desk:                              $desk-start                                                             !default;
+
 /*
 
 Grid (Susy)
@@ -261,17 +266,19 @@ Default settings for susy grid. More info: [Susy](http://susy.oddbird.net/).
     $total-columns:                 12          # Number of columns
     $column-width:                  50px        # Columns width
     $gutter-width:                  30px        # Gutter width
-    $container-style:               fluid       # Grid style
 
 Styleguide 31.8
 
 */
 
 
+// Failback for =< 2.2.1
 $total-columns:                     12                                                                      !default;
 $column-width:                      50px                                                                    !default;
 $gutter-width:                      30px                                                                    !default;
-$container-style:                   fluid                                                                   !default;
+
+$susy: ( columns: $total-columns, gutters: $gutter-width / $column-width )                                  !default;;
+
 
 /*
 

data/stylesheets/utilities/_helper-classes.scss

@@ -27,7 +27,7 @@ Styleguide 25.1
 .clearfix {
     &:after {
         content: "";
-        display: table;
+        @extend %display-table;
         clear: both;
     }
 }
@@ -59,7 +59,7 @@ Styleguide 25.2
 */
 
 .wrapper, .w {
-    @extend .clearfix;
+    @extend %clearfix;
     margin: 0 auto;
     max-width: $desk-end;
     padding-left: em($wrapper-padding);
@@ -67,14 +67,14 @@ Styleguide 25.2
 }
 
 .fixed-wrapper, .fw {
-    @extend .clearfix;
+    @extend %clearfix;
     margin: 0 auto;
     width: $desk-end;
 }
 
 
-.left {float: left;}
-.right {float: right;}
+.left {@extend %float-left;}
+.right {@extend %float-right;}
 
 
 /*
@@ -99,8 +99,8 @@ Styleguide 25.3
 
 */
 
-
-@for $i from 1 through 100 {
+@for $j from 1 through 20 {
+    $i: 5 * $j;
     %width-#{$i} { width: $i * 1% !important; }
     @if $width-helper-classes {
         [data-width="#{$i}"] { @extend %width-#{$i}; }
@@ -130,12 +130,12 @@ Styleguide 25.4
 .lead           { @include adjust-font-size-to($h4-size); }
 .muted          { color: $gray; }
 
-.pull-left      { float: left; }
-.pull-right     { float: right; }
+.pull-left      { @extend %float-left; }
+.pull-right     { @extend %float-right; }
 
-.text-left      { text-align: left; }
-.text-right     { text-align: right; }
-.text-center    { text-align: center; }
+.text-left      { @extend %text-align-left; }
+.text-right     { @extend %text-align-right; }
+.text-center    { @extend %text-align-center; }
 
 /*
 
@@ -152,7 +152,7 @@ Styleguide 25.5
 .s {
     @include transition(none);
     content: "";
-    @include inline-block;
+    @extend %display-inline-block;
     font-style:normal;
     overflow:hidden;
     text-align:center;

data/stylesheets/utilities/_icon-fonts.scss

@@ -20,7 +20,7 @@ Icon Fonts
     }
 
     .branico {
-      display: inline-block;
+      @extend %display-inline-block;
       font-family: 'branico';
     }
 }
@@ -40,7 +40,7 @@ Icon Fonts
     }
 
     .entypo {
-      display: inline-block;
+      @extend %display-inline-block;
       font-family: 'entypo';
     }
 }
@@ -60,7 +60,7 @@ Icon Fonts
     }
 
     .fontawesome {
-      display: inline-block;
+      @extend %display-inline-block;
       font-family: 'FontAwesome';
     }
 }
@@ -80,7 +80,7 @@ Icon Fonts
     }
 
     .fontelico {
-      display: inline-block;
+      @extend %display-inline-block;
       font-family: 'fontelico';
     }
 }
@@ -100,7 +100,7 @@ Icon Fonts
     }
 
     .maki {
-      display: inline-block;
+      @extend %display-inline-block;
       font-family: 'maki';
     }
 }
@@ -120,7 +120,7 @@ Icon Fonts
     }
 
     .openwebicons {
-      display: inline-block;
+      @extend %display-inline-block;
       font-family: 'OpenWeb Icons';
     }
 }
@@ -140,7 +140,7 @@ Icon Fonts
     }
 
     .typicons {
-      display: inline-block;
+      @extend %display-inline-block;
       font-family: 'Typicons';
     }
 }
@@ -160,7 +160,7 @@ Icon Fonts
     }
 
     .zocial {
-      display: inline-block;
+      @extend %display-inline-block;
       font-family: 'zocial';
     }
 }