rapido-css 0.1.3 → 0.1.4

data/stylesheets/components/_modals.scss

@@ -4,6 +4,10 @@ Modals
 
 For modals is used the excellent [**fancyBox**](http://fancyapps.com/fancybox/) jQuery plugin, see full documentation for more in depth examples.
 
+Script required:
+
+    <script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.pack.js"></script>
+
 Markup:
 <a class="open__modal  btn btn--default" href="#modal">Open modal</a>
 <div id="modal" class="modal">
@@ -12,7 +16,9 @@ Markup:
 </div>
 <script type="text/javascript">
   $(document).ready(function() {
-    $(".open__modal").fancybox();
+    $(".open__modal").fancybox({
+      margin: [20, 60, 20, 60],
+    });
   });
 </script>
 
@@ -78,7 +84,7 @@ Styleguide 11
             &.fancybox-type-ajax {
 
                 .fancybox-close {
-                    @extend %modal__close--alt !optional;
+                    @extend %modal__close !optional;
                 }
             }
 
@@ -141,6 +147,8 @@ Styleguide 11
     .fancybox-image {
         max-width: 100%;
         max-height: 100%;
+        z-index:($zindex-modal + 5);
+        position: relative;
         // @include border-radius($base-border-radius);
     }
 
@@ -149,14 +157,14 @@ Styleguide 11
         @include position(fixed, 50% 0 0 50%);
         @extend %modal__loading !optional;
         cursor: pointer;
-        z-index: $zindex-modal +4;
+        z-index: ($zindex-modal + 4);
     }
 
 
 // Buttons and Navigation
 
     .fancybox-close {
-        @extend %modal__btn !optional;
+        /*@extend %modal__btn !optional;*/
         @extend %modal__close !optional;
         // @include border-radius($base-border-radius);
         z-index: ($zindex-modal + 3);
@@ -172,19 +180,19 @@ Styleguide 11
             @extend %modal__btn !optional;
             @extend %modal__nav !optional;
             @include position(absolute, 50% 0 0 0);
-            @include opacity(0);
+            /*@include opacity(0);*/
             z-index: ($zindex-modal + 2);
         }
 
-        &:hover span { @include opacity(1); }
+        /*&:hover span { @include opacity(1); }*/
 
         &.fancybox-prev {
-            left: 0;
+            left: -60px;
             span { left: 0; }
         }
 
         &.fancybox-next {
-            right: 0;
+            right: -60px;
             span { right: 0; }
         }
     }
@@ -238,6 +246,10 @@ Styleguide 11
 
 Modal Buttons
 
+Script required:
+
+    <script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/helpers/jquery.fancybox-buttons.min.js"></script>
+
 Markup:
 <a class="fancybox-button" rel="fancybox-button" href="http://placehold.it/600x400/c7e843/fff.jpg">
   <img src="http://placehold.it/60x60/c7e843/fff.jpg"/>
@@ -254,6 +266,7 @@ Markup:
       prevEffect : 'none',
       nextEffect : 'none',
       closeBtn   : false,
+      margin: [20, 60, 20, 60],
       helpers    : {
         title    : { type : 'inside' },
         buttons  : {}
@@ -298,6 +311,10 @@ Styleguide 11.1
 
 Modal Thumbs
 
+Script required:
+
+    <script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/helpers/jquery.fancybox-thumbs.js"></script>
+
 Markup:
 <a class="fancybox-thumb" rel="fancybox-thumb" href="http://placehold.it/600x400/c7e843/fff.jpg">
   <img src="http://placehold.it/60x60/c7e843/fff.jpg"/>
@@ -313,6 +330,7 @@ Markup:
     $(".fancybox-thumb").fancybox({
       prevEffect : 'none',
       nextEffect : 'none',
+      margin: [20, 60, 20, 60],
       helpers    : {
         title    : {
           type: 'outside'
@@ -362,4 +380,4 @@ Styleguide 11.2
             }
         }
     }
-}
+}

data/stylesheets/components/_navs.scss

@@ -13,7 +13,14 @@ Markup:
 <ul class="nav {$modifiers}">
   <li class="nav__title">Nav header</li>
   <li class="current"><a href="#">Home</a></li>
-  <li><a href="#">Messages</a></li>
+  <li><a href="#">Messages</a>
+  <ul>
+    <li><a href="#">Submenu title</a></li>
+    <li><a href="#">Submenu title</a></li>
+    <li><a href="#">Submenu title</a></li>
+    <li><a href="#">Submenu title</a></li>
+  </ul>
+  </li>
   <li><a href="#">Friends</a></li>
   <li class="disabled"><a href="#">Profile</a></li>
 </ul>
@@ -34,20 +41,16 @@ Styleguide 12
         margin-bottom: rhythm();
         position: relative;
 
-        &, > ul {
+        &, ul {
             @extend .clearfix;
-            list-style: none;
-            margin-left: 0;
-            padding-left: 0;
-        }
-
-        > ul {
-            margin-bottom: 0;
+            @extend .list-style-none;
         }
 
         li {
+            position: relative;
 
             > a {
+                @extend .transition;
                 display: inline-block;
                 line-height: 1em;
 
@@ -64,9 +67,40 @@ Styleguide 12
                 background-color: transparent;
                 cursor: default;
             }
+
+            // Disabled
+            &.disabled > a { @extend %nav--btn__disabled !optional; }
+
+        }
+
+        // Dropdown
+
+        li ul {
+          @extend .transition;
+          @include opacity(0);
+          display/*\**/: none\9; // Ugly IE8 Hack
+          max-height: 0;
+          overflow: hidden;
+          z-index: 2;
+        }
+
+        li:hover ul,
+        li ul:hover {
+          @include opacity(1);
+          display/*\**/: block\9; // Ugly IE8 Hack
+          max-height: $dropdowns-height;
         }
+
+        li ul,
+        li:hover > a {
+          @extend %nav--btn__hover !optional;
+        }
+
     }
 
+
+
+
 // Nav Title
 
     .nav__title {
@@ -84,6 +118,16 @@ Styleguide 12
     .nav--inline {
         & > li,
         > ul > li { float: left;}
+
+
+        li ul {
+          @include position(absolute, 100% 0 0 0px);
+          min-width: 10em;
+        }
+
+
+
+
     }
 
 // Vertical nav
@@ -110,14 +154,14 @@ Styleguide 12
                 }
             }
 
+            ul a { display: block; }
+
             &.current > a,
             &.current > a:hover,
             &.current > a:focus {
                 @extend %nav--btn__current  !optional;
             }
 
-            // Disabled
-            &.disabled > a { @extend %nav--btn__disabled !optional; }
         }
     }
 
@@ -134,4 +178,4 @@ Styleguide 12
         &[class*="vertical"] > li:last-child > a { margin-bottom: 0; }
     }
 
-}
+}

data/stylesheets/components/_off-canvas.scss

@@ -0,0 +1,264 @@
+/*
+
+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">
+        [...nav content...]
+      </nav>
+      <div class="st-pusher">
+        <div class="st-content">
+          [...main content...]
+        </div>
+      </div>
+    </div>
+
+Download and link at the top of the page the following scripts:
+
+* 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
+
+For opening and closing the sidebar add the class `st-menu-toggle` to a link or button.
+
+Styleguide 15
+
+*/
+
+
+@if $offcanvas {
+
+  $if-left: null;
+  $if-right: null;
+  $if-3d: null;
+  $if-width: null;
+
+  @if $offcanvas-direction == 'left' {
+    $if-left: 0px;
+    $if-right: 0;
+    $if-3d: -100%;
+    $if-width: $offcanvas-width;
+  } @else {
+    $if-left: 0;
+    $if-right: 0px;
+    $if-3d: 100%;
+    $if-width: neg($offcanvas-width);
+  }
+
+  html,
+  body,
+  .st-container,
+  .st-pusher,
+  .st-content {
+    height: 100%;
+
+  }
+
+  .st-container {
+    overflow: hidden;
+    position: relative;
+  }
+
+  // ----------------------------------------------------------------------------
+
+  .st-pusher {
+    @include position(relative, 0 $if-right 0 $if-left);
+    @include transition(transform $offcanvas-animations-duration);
+    z-index: $zindex-offcanvas;
+
+
+    &::after {
+      @include opacity(0);
+      @include position(absolute, 0px $if-left 0 $if-right);
+      @include square(0);
+      @include transition(opacity $offcanvas-animations-duration, width $offcanvas-animations-duration/4 $offcanvas-animations-duration);
+      content: '';
+
+      @if $offcanvas-dim {
+        @extend %nav--offcanvas__dim;
+      }
+    }
+  }
+
+  .st-content {
+    overflow-y: auto;
+    position: relative;
+    background: $body-color;
+  }
+
+  // .st-content-inner {
+  //   position: relative;
+  // }
+
+  // ----------------------------------------------------------------------------
+
+  .st-menu-toggle {
+      @extend %nav--offcanvas__toggle !optional;
+  }
+
+  .st-menu-open {
+
+    .st-pusher::after {
+      @include opacity(1);
+      @include square(100%);
+      @include transition(opacity $offcanvas-animations-duration);
+    }
+
+    .st-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;
+    @include position(absolute, 0px $if-right 0 $if-left);
+    @include size(100%, $offcanvas-width);
+    @include transition(all $offcanvas-animations-duration);
+    overflow-y: auto;
+    visibility: hidden;
+    z-index: $zindex-offcanvas+1;
+
+    &::after {
+      @include opacity(1);
+      @include position(absolute, 0px $if-left 0 $if-right);
+      @include square(100%);
+      @include transition(opacity $offcanvas-animations-duration);
+      content: '';
+
+      @if $offcanvas-dim {
+        @extend %nav--offcanvas__dim;
+      }
+    }
+
+  }
+
+  // ----------------------------------------------------------------------------
+
+  @if $offcanvas-effect == 'cover' {
+
+    .st-container {
+
+      .st-menu {
+        @include translate3d($if-3d, 0, 0);
+        visibility: visible;
+
+        &::after {
+          display: none;
+        }
+      }
+
+      &.st-menu-open {
+
+        .st-menu {
+          @include translate3d(0, 0, 0);
+          visibility: visible;
+        }
+      }
+    }
+  }
+
+  // ----------------------------------------------------------------------------
+
+  @if $offcanvas-effect == 'reveal' {
+
+    .st-container {
+
+      &.st-menu-open {
+
+        .st-pusher {
+          @include translate3d($if-width, 0, 0);
+        }
+
+        .st-menu {
+          @include transition(transform $offcanvas-animations-duration);
+          visibility: visible;
+        }
+      }
+
+      .st-menu {
+        z-index: 1;
+
+        &::after {
+          display: none;
+        }
+      }
+    }
+  }
+
+  // ----------------------------------------------------------------------------
+
+  @if $offcanvas-effect == 'push' {
+
+    .st-container {
+
+      &.st-menu-open {
+
+        .st-pusher {
+          @include translate3d($if-width, 0, 0);
+        }
+
+        .st-menu {
+          @include transition(transform $offcanvas-animations-duration);
+          visibility: visible;
+          @include translate3d(0, 0, 0);
+        }
+      }
+
+      .st-menu {
+        @include translate3d($if-3d, 0, 0);
+
+        &::after {
+          display: none;
+        }
+      }
+    }
+  }
+
+  // ----------------------------------------------------------------------------
+
+  @if $offcanvas-effect == 'slide' {
+
+    .st-container {
+
+      &.st-menu-open {
+
+        .st-pusher {
+          @include translate3d($if-width, 0, 0);
+        }
+
+        .st-menu {
+          @include transition(transform $offcanvas-animations-duration);
+          @include translate3d(0, 0, 0);
+          visibility: visible;
+        }
+      }
+
+      .st-menu {
+        z-index: 1;
+        @include translate3d($if-3d/2, 0, 0);
+
+        &::after {
+          display: none;
+        }
+      }
+    }
+  }
+
+  // ----------------------------------------------------------------------------
+
+  .no-csstransforms3d .st-pusher {
+    padding-left: $offcanvas-width;
+  }
+
+  .no-js .st-pusher {
+    padding-left: $offcanvas-width;
+  }
+
+}

data/stylesheets/components/_sliders.scss

@@ -5,6 +5,10 @@ Sliders
 For modals is used the excellent [**BxSlider**](http://bxslider.com/) jQuery plugin,
 see full documentation for more in depth examples.
 
+Script required:
+
+    <script src="//cdn.jsdelivr.net/bxslider/4.1.1/jquery.bxslider.js"></script>
+
 Markup:
 <ul class="slider">
   <li><img src="http://placehold.it/800x300/c7e843/fff.jpg" /></li>

data/stylesheets/components/_tabs.scss

@@ -5,6 +5,10 @@ Tabs
 For tabs is used the excellent [**EasyTabs**](http://os.alfajango.com/easytabs/) jQuery plugin,
 see full documentation for more in depth examples.
 
+Script required:
+
+    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.easytabs/3.2.0/jquery.easytabs.min.js"></script>
+
 Markup:
 <div id="tabs" class="tabs">
   <ul class='etabs'>
@@ -94,4 +98,4 @@ Styleguide 18
 
     }
 
-}
+}

data/stylesheets/components/_type.scss

@@ -34,7 +34,10 @@ body {
     color: $text-color;
 }
 
-img {max-width: 100%;}
+img {
+    max-width: 100%;
+    display: inline-block;
+}
 
 a, button, textarea, input { outline: none; }
 
@@ -97,7 +100,6 @@ h1, h2, h3, h4, h5, h6 {
     margin: 0 0 rhythm();
     text-rendering: optimizelegibility;
     font-family: $titles-font-family;
-    color: $title-color;
 
     small {
         font-weight: normal;

data/stylesheets/rapido.min.scss

@@ -0,0 +1 @@
+@import "rapido";

data/stylesheets/rapido.scss

@@ -43,7 +43,7 @@
 @import	"components/close";
 
 @import	"components/navs";
-@import	"components/responsive-navs";
+@import	"components/off-canvas";
 @import "components/breadcrumbs";
 @import "components/pagination";
 @import "components/pager";
@@ -57,4 +57,4 @@
 
 // Default styles
 
-@import	"default-styles";
+@import	"default-styles";

data/stylesheets/settings/_base.scss

@@ -10,14 +10,16 @@ Styleguide 25
 
 Debug Mode
 
-    $debug-mode:                        false   # Enable debug mode
+    $debug-html:                        false   # Enable debug html mode
+    $debug-outlines:                    false   # Enable debug outlines mode
     $default-styles:                    true    # Use default styles in _default-styles.scss
 
 Styleguide 25.1
 
 */
 
-$debug-mode:                            false                                                               !default;
+$debug-html:                            false                                                               !default;
+$debug-outlines:                        false                                                               !default;
 $default-styles:                        true                                                                !default;
 
 
@@ -67,6 +69,32 @@ $font-mono:                             Monaco, Menlo, Consolas, "Courier New",
 $base-font-family:                      $font-sans                                                          !default;
 $titles-font-family:                    $font-sans                                                          !default;
 
+/*
+
+Prefixes
+
+Enable or disable specific broweser prefixes used by Compass mixins.
+
+    $experimental-support-for-mozilla:      true
+    $experimental-support-for-webkit:       true
+    $support-for-original-webkit-gradients: false
+    $experimental-support-for-opera:        false
+    $experimental-support-for-microsoft:    true
+    $experimental-support-for-khtml:        false
+
+
+Styleguide 25.4
+
+*/
+
+$experimental-support-for-mozilla:      true                                                                !default;
+$experimental-support-for-webkit:       true                                                                !default;
+$support-for-original-webkit-gradients: false                                                               !default;
+$experimental-support-for-opera:        false                                                               !default;
+$experimental-support-for-microsoft:    true                                                                !default;
+$experimental-support-for-khtml:        false                                                               !default;
+
+
 
 /*
 
@@ -82,4 +110,4 @@ Styleguide 24.1
 
 @function em($to-size, $from-size: $base-font-size) {
     @return ($to-size / $from-size) + 0em;
-}
+}

data/stylesheets/settings/_colors.scss

@@ -28,6 +28,7 @@ $white:                                 lighten($black, 100);
 
 Default colors
 
+    $body-color:                        #FFFFFF
     $text-color:                        #333
 
     $link-color:                        #0066cc
@@ -37,8 +38,8 @@ Styleguide 26.1
 
 */
 
+$body-color:                            #FFFFFF                                                             !default;
 $text-color:                            #333                                                                !default;
-$title-color:                           #333                                                                !default;
 
 $link-color:                            #0066cc                                                             !default;
 $link-color-hover:                      darken($link-color, 10)                                             !default;