rapido-css 0.1.4 → 0.1.5

data/stylesheets/components/_off-canvas.scss

@@ -4,29 +4,40 @@ Off-Canvas
 
 There's available a nice off-canvas sidebar functionality adapted from [Codrops](http://tympanus.net/codrops/2013/08/28/transitions-for-off-canvas-navigations).
 
-    <div id="st-container" class="st-container">
-      <nav class="st-menu">
+Script required: **rapido.js**.
+
+    <div id="offcanvas__container" class="offcanvas__container">
+      <nav class="offcanvas__menu">
         [...nav content...]
       </nav>
-      <div class="st-pusher">
-        <div class="st-content">
+      <div class="offcanvas__pusher">
+        <div class="offcanvas__content">
           [...main content...]
         </div>
       </div>
     </div>
 
-Download and link at the top of the page the following scripts:
+Styleguide 15
 
-* https://github.com/raffone/SidebarTransitions/blob/master/js/modernizr.custom.js
+*/
 
-Download and link at the bottom of the page the following scripts:
+/*
 
-* https://github.com/raffone/SidebarTransitions/blob/master/js/classie.js
-* https://github.com/raffone/SidebarTransitions/blob/master/js/sidebarEffects.js
+Off-Canvas JS
 
-For opening and closing the sidebar add the class `st-menu-toggle` to a link or button.
+Include this js after including rapido.js.
 
-Styleguide 15
+    $('.offcanvas__menu--toggle').rapido_Offcanvas();
+
+**Options** (with defaul values):
+
+    toggleClass:     offcanvas__menu--open
+    containerClass:  .offcanvas__container
+    menuClass:       .offcanvas__menu
+
+For opening and closing the sidebar add the class `offcanvas__menu--toggle` to a link or button.
+
+Styleguide 15.2
 
 */
 
@@ -52,21 +63,21 @@ Styleguide 15
 
   html,
   body,
-  .st-container,
-  .st-pusher,
-  .st-content {
+  .offcanvas__container,
+  .offcanvas__pusher,
+  .offcanvas__content {
     height: 100%;
 
   }
 
-  .st-container {
+  .offcanvas__container {
     overflow: hidden;
     position: relative;
   }
 
   // ----------------------------------------------------------------------------
 
-  .st-pusher {
+  .offcanvas__pusher {
     @include position(relative, 0 $if-right 0 $if-left);
     @include transition(transform $offcanvas-animations-duration);
     z-index: $zindex-offcanvas;
@@ -80,44 +91,44 @@ Styleguide 15
       content: '';
 
       @if $offcanvas-dim {
-        @extend %nav--offcanvas__dim;
+        @extend %nav--offcanvas__dim !optional;
       }
     }
   }
 
-  .st-content {
+  .offcanvas__content {
     overflow-y: auto;
     position: relative;
     background: $body-color;
   }
 
-  // .st-content-inner {
+  // .offcanvas__content-inner {
   //   position: relative;
   // }
 
   // ----------------------------------------------------------------------------
 
-  .st-menu-toggle {
+  .offcanvas__menu--toggle {
       @extend %nav--offcanvas__toggle !optional;
   }
 
-  .st-menu-open {
+  .offcanvas__menu--open {
 
-    .st-pusher::after {
+    .offcanvas__pusher::after {
       @include opacity(1);
       @include square(100%);
       @include transition(opacity $offcanvas-animations-duration);
     }
 
-    .st-menu::after {
+    .offcanvas__menu::after {
       @include opacity(0);
       @include square(0);
       @include transition(opacity $offcanvas-animations-duration, width $offcanvas-animations-duration/4 $offcanvas-animations-duration);
     }
   }
 
-  .st-menu {
-    @extend %nav--offcanvas;
+  .offcanvas__menu {
+    @extend %nav--offcanvas !optional;
     @include position(absolute, 0px $if-right 0 $if-left);
     @include size(100%, $offcanvas-width);
     @include transition(all $offcanvas-animations-duration);
@@ -133,7 +144,7 @@ Styleguide 15
       content: '';
 
       @if $offcanvas-dim {
-        @extend %nav--offcanvas__dim;
+        @extend %nav--offcanvas__dim !optional;
       }
     }
 
@@ -143,9 +154,9 @@ Styleguide 15
 
   @if $offcanvas-effect == 'cover' {
 
-    .st-container {
+    .offcanvas__container {
 
-      .st-menu {
+      .offcanvas__menu {
         @include translate3d($if-3d, 0, 0);
         visibility: visible;
 
@@ -154,9 +165,9 @@ Styleguide 15
         }
       }
 
-      &.st-menu-open {
+      &.offcanvas__menu--open {
 
-        .st-menu {
+        .offcanvas__menu {
           @include translate3d(0, 0, 0);
           visibility: visible;
         }
@@ -168,21 +179,21 @@ Styleguide 15
 
   @if $offcanvas-effect == 'reveal' {
 
-    .st-container {
+    .offcanvas__container {
 
-      &.st-menu-open {
+      &.offcanvas__menu--open {
 
-        .st-pusher {
+        .offcanvas__pusher {
           @include translate3d($if-width, 0, 0);
         }
 
-        .st-menu {
+        .offcanvas__menu {
           @include transition(transform $offcanvas-animations-duration);
           visibility: visible;
         }
       }
 
-      .st-menu {
+      .offcanvas__menu {
         z-index: 1;
 
         &::after {
@@ -196,22 +207,22 @@ Styleguide 15
 
   @if $offcanvas-effect == 'push' {
 
-    .st-container {
+    .offcanvas__container {
 
-      &.st-menu-open {
+      &.offcanvas__menu--open {
 
-        .st-pusher {
+        .offcanvas__pusher {
           @include translate3d($if-width, 0, 0);
         }
 
-        .st-menu {
+        .offcanvas__menu {
           @include transition(transform $offcanvas-animations-duration);
           visibility: visible;
           @include translate3d(0, 0, 0);
         }
       }
 
-      .st-menu {
+      .offcanvas__menu {
         @include translate3d($if-3d, 0, 0);
 
         &::after {
@@ -225,22 +236,22 @@ Styleguide 15
 
   @if $offcanvas-effect == 'slide' {
 
-    .st-container {
+    .offcanvas__container {
 
-      &.st-menu-open {
+      &.offcanvas__menu--open {
 
-        .st-pusher {
+        .offcanvas__pusher {
           @include translate3d($if-width, 0, 0);
         }
 
-        .st-menu {
+        .offcanvas__menu {
           @include transition(transform $offcanvas-animations-duration);
           @include translate3d(0, 0, 0);
           visibility: visible;
         }
       }
 
-      .st-menu {
+      .offcanvas__menu {
         z-index: 1;
         @include translate3d($if-3d/2, 0, 0);
 
@@ -253,11 +264,11 @@ Styleguide 15
 
   // ----------------------------------------------------------------------------
 
-  .no-csstransforms3d .st-pusher {
+  .no-csstransforms3d .offcanvas__pusher {
     padding-left: $offcanvas-width;
   }
 
-  .no-js .st-pusher {
+  .no-js .offcanvas__pusher {
     padding-left: $offcanvas-width;
   }
 

data/stylesheets/components/_pagination.scss

@@ -29,6 +29,7 @@ Styleguide 14
 
     .pagination {
         margin: rhythm() 0;
+        clear: both;
 
         > * {
             @extend .clearfix;
@@ -56,7 +57,7 @@ Styleguide 14
 
             li:first-child > a,
             li:first-child > span {
-                border-left-width: 1px;
+                border-left-width: $input-border;
             }
 
             li > a:hover {
@@ -113,4 +114,4 @@ Styleguide 14
         }
     }
 
-}
+}

data/stylesheets/components/_tables.scss

@@ -29,7 +29,7 @@ Markup:
 .table--hover - Enable a hover state on table rows within a `<tbody>`.
 .table--condensed - Makes tables more compact by cutting cell padding in half.
 
-Styleguide 17
+Styleguide 18
 
 */
 

data/stylesheets/components/_tabs.scss

@@ -38,7 +38,7 @@ Markup:
   });
 </script>
 
-Styleguide 18
+Styleguide 19
 
 */
 

data/stylesheets/components/_toggle.scss

@@ -0,0 +1,43 @@
+/*
+
+Toggle
+
+Toggle visibility using `.open` class between elements of a container.
+
+Script required: **rapido.js**.
+
+    <section class="news">
+      <article>
+        <h3 data-toggle-name="news_1">News title</h3>
+        <p data-toggle-content="news_1">News content</p>
+      </article>
+      <article>
+        <h3 data-toggle-name="news_2">News title</h4>
+        <p data-toggle-content="news_2">News content</p>
+      </article>
+    </section>
+
+Include this js after including rapido.js.
+
+    $('.toggle').rapido_Toggle();
+
+You can also pass a delay between the removing and adding the class, usefull
+when you have two animation that you don't wont to start at the same time.
+
+**Options** (with defaul values):
+
+    titleClass:    [data-toggle-name]
+    contentClass:  [data-toggle-content]
+    delay:         0
+
+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; }
+
+Styleguide 17
+
+*/
+
+

data/stylesheets/components/_type.scss

@@ -2,7 +2,7 @@
 
 Type
 
-Styleguide 19
+Styleguide 20
 
 */
 
@@ -56,6 +56,17 @@ a {
 }
 
 
+// Selection color
+
+::selection {
+  background: $selection-color;
+}
+
+::-moz-selection {
+  background: $selection-color;
+}
+
+
 /*
 
 Body text
@@ -65,7 +76,7 @@ Markup:
 <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec id elit non mi porta gravida at eget metus.</p>
 <small><p>Tight pants next level keffiyeh. Photo booth beard raw denim letterpress vegan messenger bag stumptown.</small>
 
-Styleguide 19.1
+Styleguide 20.1
 
 */
 
@@ -92,7 +103,7 @@ Markup:
 <h5>h5. This is a small header. h1.</h5>
 <h6>h6. This is a tiny header. h1.</h6>
 
-Styleguide 19.2
+Styleguide 20.2
 
 */
 
@@ -159,7 +170,7 @@ Markup:
   <li>Ordered list item</li>
 </ol>
 
-Styleguide 19.3
+Styleguide 20.3
 
 */
 
@@ -210,7 +221,7 @@ Markup:
   <dd>A geologist’s hammer, rock hammer, rock pick or geological pick is a hammer used for splitting and breaking rocks.</dd>
 </dl>
 
-Styleguide 19.4
+Styleguide 20.4
 
 */
 
@@ -231,7 +242,7 @@ Markup:
   <dd>A geologist’s hammer, rock hammer, rock pick or geological pick is a hammer used for splitting and breaking rocks.</dd>
 </dl>
 
-Styleguide 19.4.1
+Styleguide 20.4.1
 
 */
 
@@ -254,7 +265,7 @@ Horizontal line
 
 Markup: <hr />
 
-Styleguide 19.5
+Styleguide 20.5
 
 */
 
@@ -286,7 +297,7 @@ Markup:
   <small><cite>Rock Hammer</cite></small>
 </blockquote>
 
-Styleguide 19.6
+Styleguide 20.6
 
 */
 

data/stylesheets/rapido.scss

@@ -31,29 +31,26 @@
 
 // Components
 
-@import	"components/type";
-@import	"components/forms";
-@import	"components/tables";
-@import "components/captions";
-
-@import	"components/buttons";
+@import	"components/alerts";
 @import	"components/button-groups";
-@import	"components/dropdowns";
-@import "components/labels";
+@import	"components/buttons";
 @import	"components/close";
-
+@import	"components/dropdowns";
+@import	"components/forms";
+@import	"components/modals";
 @import	"components/navs";
 @import	"components/off-canvas";
-@import "components/breadcrumbs";
-@import "components/pagination";
-@import "components/pager";
-
-@import	"components/alerts";
-
-@import "components/grids";
-@import	"components/modals";
 @import	"components/sliders";
+@import	"components/tables";
 @import	"components/tabs";
+@import	"components/toggle";
+@import	"components/type";
+@import "components/breadcrumbs";
+@import "components/captions";
+@import "components/grids";
+@import "components/labels";
+@import "components/pager";
+@import "components/pagination";
 
 // Default styles
 

data/stylesheets/settings/_base.scss

@@ -2,7 +2,7 @@
 
 Base Settings
 
-Styleguide 25
+Styleguide 26
 
 */
 
@@ -14,7 +14,7 @@ Debug Mode
     $debug-outlines:                    false   # Enable debug outlines mode
     $default-styles:                    true    # Use default styles in _default-styles.scss
 
-Styleguide 25.1
+Styleguide 26.1
 
 */
 
@@ -36,7 +36,7 @@ on `palm` (smartphone) change the base size to 16px, it will be automatically co
 
     $responsive-font-size:              lap-and-up $base-font-size, palm 16px
 
-Styleguide 25.2
+Styleguide 26.2
 
 */
 
@@ -58,7 +58,7 @@ Font families
     $base-font-family:                  $font-sans  # Default font family for body text
     $titles-font-family:                $font-sans  # Default font family for titles
 
-Styleguide 25.3
+Styleguide 26.3
 
 */
 
@@ -83,7 +83,7 @@ Enable or disable specific broweser prefixes used by Compass mixins.
     $experimental-support-for-khtml:        false
 
 
-Styleguide 25.4
+Styleguide 26.4
 
 */
 
@@ -104,7 +104,7 @@ To convert `PX` to `EM` using the `$base-font-size` as font size.
 
     width: em(20px);
 
-Styleguide 24.1
+Styleguide 25.1
 
 */
 

data/stylesheets/settings/_colors.scss

@@ -12,7 +12,7 @@ Used for scaffolding
     $grayLighter:                       lighten($black, 95)
     $white:                             #fff
 
-Styleguide 26
+Styleguide 27
 
 */
 
@@ -34,7 +34,7 @@ Default colors
     $link-color:                        #0066cc
     $link-color-hover:                  darken($link-color, 10%)
 
-Styleguide 26.1
+Styleguide 27.1
 
 */
 
@@ -45,4 +45,5 @@ $link-color:                            #0066cc
 $link-color-hover:                      darken($link-color, 10)                                             !default;
 
 $placeholder-color:                     $gray                                                               !default;
+$selection-color:                       $gray                                                               !default;
 

data/stylesheets/settings/_components.scss

@@ -33,7 +33,7 @@ Enable or disable components, so you can have in the css only what you need.
 
     $width-helper-classes:          true   # "Elements width" helper class
 
-Styleguide 27
+Styleguide 28
 
 */
 
@@ -77,7 +77,7 @@ Sprites
     $s-sprite-dimensions:           true;
     $s-layout:                      smart;
 
-Styleguide 27.1
+Styleguide 28.1
 
 */
 
@@ -103,7 +103,7 @@ Font files are not required, is used the [We Love Icon Fonts](http://weloveiconf
     $use-typicons:                  false  # http://typicons.com/
     $use-zocial:                    false  # http://zocial.smcllns.com/
 
-Styleguide 27.2
+Styleguide 28.2
 
 */
 

data/stylesheets/settings/_dimensions.scss

@@ -5,7 +5,7 @@ Base Dimensions
     $base-border-radius:            4px     # Border radius used as a standard on all elements.
     $horizontal-offset:             180px   # Labels width in horizontal forms.
 
-Styleguide 28
+Styleguide 29
 
 */
 
@@ -35,7 +35,7 @@ Font sizes you can used with the compass mixin `adjust-font-size-to()`. Naming c
     $smaller-size:                  $base-font-size * .7    # 10px
     $smallest-size:                 $base-font-size * .5    # 7px
 
-Styleguide 28.1
+Styleguide 29.1
 
 */
 
@@ -78,7 +78,7 @@ These values mean: n times the base line-height.
     $h5-line-height:                1.5
     $h6-line-height:                1.5
 
-Styleguide 28.1.1
+Styleguide 29.1.1
 
 */
 
@@ -102,7 +102,7 @@ Base padding and margins used in the forms.
     $input-padding-side:            10px    # Base side padding
     $checkbox-padding-left:         20px    # Side padding used for checkboxes and radios
 
-Styleguide 28.2
+Styleguide 29.2
 
 */
 
@@ -150,7 +150,7 @@ Components
     $tabs-content-padding:          $input-padding  # Tabs padding
     $tabs-tab-padding:              $input-padding  # Tabs padding
 
-Styleguide 28.3
+Styleguide 29.3
 
 */
 
@@ -186,7 +186,7 @@ Sizes
     $modal-btn-size:                em(30px)    # Size of buttons used with the modals
     $slider-btn-size:               em(30px)    # Size of buttons used with the sliders
 
-Styleguide 28.4
+Styleguide 29.4
 
 */
 
@@ -203,7 +203,7 @@ Some elements need to have a max-height specified for smoother animations, like
 
     $dropdowns-height:              em(600px);
 
-Styleguide 28.5
+Styleguide 29.5
 
 */
 
@@ -220,7 +220,7 @@ Set the width of the three steps of the layout.
     $desk-start:                    768px   # Max width for tablet
     $desk-end:                      1080px  # Max width for desktop
 
-Styleguide 28.6
+Styleguide 29.6
 
 */
 
@@ -243,7 +243,7 @@ Default settings for susy grid. More info: [Susy](http://susy.oddbird.net/).
     $gutter-width:                  30px    # Gutter width
     $container-style:               fluid   # Grid style
 
-Styleguide 28.7
+Styleguide 29.7
 
 */
 
@@ -285,7 +285,7 @@ Default settings for overlay components, taken from Bootstrap.
     $zindex-slider:                 1040    # Sliders
     $zindex-modal:                  1050    # Modals
 
-Styleguide 28.9
+Styleguide 29.9
 
 */
 

data/stylesheets/settings/_effects.scss

@@ -29,7 +29,7 @@ Durations specifics for some  modules.
     $caption-animations-duration:       .50s
 
 
-Styleguide 20.1
+Styleguide 21.1
 
 */