rapido-css 0.1.3 → 0.1.4

data/stylesheets/_default-styles.scss

@@ -386,7 +386,6 @@ Modals
 
     %modal__btn                     # For all button links in modals
     %modal__close                   # For the default close button
-    %modal__close--alt              # Alternative style for close button in iframes
     %modal__btnbar-size             # Width and height of #fancybox-buttons
     %modal__overlay                 # Color of background overlay
     %modal__skin                    # For the modal window
@@ -398,9 +397,25 @@ Styleguide 30.12
 
 */
 
+    // Buttons
 
+    .btnPlay:after              { @include icon-font(\f04b); }
+    .btnPlayOn:after            { @include icon-font(\f04c); }
+    .btnToggle:after            { @include icon-font(\f065); }
+    .btnToggleOn:after          { @include icon-font(\f066); }
+    .btnPrev:after              { @include icon-font(\f04a); }
+    .btnNext:after              { @include icon-font(\f051); }
+    .btnClose:after             { @include icon-font(\f00d); }
+    .fancybox-close:after       { @include icon-font(\f00d); }
+
+    .fancybox-prev {
+      span:after   { @include icon-font(\f053); }
+    }
+
+    .fancybox-next {
+      span:after   { @include icon-font(\f054); }
+    }
 
-    // Buttons
     %modal__btn {
         @extend %btn--scripts;
         @include square($modal-btn-size);
@@ -410,18 +425,15 @@ Styleguide 30.12
     %modal__close {
         $offset: -$modal-btn-size;
         @include position(absolute, $offset .5em 0 0);
-    }
-
-    %modal__close--alt {
-        @include position(absolute, 0px 0px 0 0);
-        background-color: transparent;
-        color: $link-color;
+        color: #CCCCCC;
         &:hover {
-            color: $link-color-hover;
+          color: #FFFFFF;
         }
     }
 
-    %modal__btnbar-size {@include size($modal-btn-size, $modal-btn-size * 5);}
+    %modal__btnbar-size {
+      @include size($modal-btn-size, $modal-btn-size * 5);
+    }
 
     // Other styles
     %modal__overlay {
@@ -433,17 +445,6 @@ Styleguide 30.12
         @include border-radius($base-border-radius);
         background: #fff;
 
-        // Icons
-        .fancybox-close:after       { @include icon-font(\f00d); }
-        .fancybox-prev span:after   { @include icon-font(\f053); }
-        .fancybox-next span:after   { @include icon-font(\f054); }
-        .btnPrev:after              { @include icon-font(\f04a); }
-        .btnNext:after              { @include icon-font(\f051); }
-        .btnPlay:after              { @include icon-font(\f04b); }
-        .btnPlayOn:after            { @include icon-font(\f04c); }
-        .btnToggle:after            { @include icon-font(\f065); }
-        .btnToggleOn:after          { @include icon-font(\f066); }
-        .btnClose:after             { @include icon-font(\f00d); }
     }
 
     %modal__nav { margin-top: (0 - ($modal-btn-size / 2)); }
@@ -568,9 +569,10 @@ Styleguide 30.15
 
 /*
 
-Responsive Nav
+OffCanvas Nav
 
-    %nav--responsive                # For the open nav state in responsive mode
+    %nav--offcanvas                 #
+    %nav--offcanvas__dim            #
     %nav__toggle                    # For the toggle open/close button in responsive mode
 
 Styleguide 30.16
@@ -578,23 +580,25 @@ Styleguide 30.16
 */
 
 
-    %nav--responsive {
-        background-color: $grayLighter;
-
-        a { padding: nth($btn-padding, 1) $wrapper-padding; }
+    %nav--offcanvas {
+        background-color: $grayDark;
+        padding: $wrapper-padding;
+        color: $white;
 
-        > ul > li > a {
-            font-weight: bold;
-            background-color: $grayLight;
+        a {
+            color: $white;
         }
+    }
 
+    %nav--offcanvas__dim {
+        background: rgba(0,0,0,0.2);
     }
 
-    %nav__toggle {
+    %nav--offcanvas__toggle {
         @extend .btn;
 
         span {
-            @include hide-text();
+            @extend .visuallyhidden;
         }
 
         &:before {

data/stylesheets/components/_captions.scss

@@ -2,18 +2,37 @@
 
 Captions
 
-Add captions to images. The position is defined by `data-position` and the content by `data-content`.
-It's possible to add an animation using `data-animation` with either `fade` or `float`.
+Captions effects adapted from [Effeckt.css](https://github.com/h5bp/Effeckt.css).
 
-For positioning are available: `top`, `right`, `bottom`, `left`, `top-left`, `top-right`, `bottom-right`, `bottom-left`.
+Effects availables (first example is without effect): `cover-push-right`, `cover-slide-top`, `guillotine-reverse`, `half-slide`, `offset`, `quarter-appear`, `quarter-fall-in`, `quarter-slide-side`, `quarter-slide-up`, `quarter-two-step`, `quarter-zoom`, `revolving-door-bottom`, `revolving-door-left`, `revolving-door-right`, `revolving-door-top`.
 
 Markup:
-<figure class="caption" data-position="bottom" data-animation="{$modifiers}" data-content="Caption text.">
-  <img src="http://dummyimage.com/300x200/afe600/fff" />
+<figure class="caption" data-effect-type="{$modifiers}">
+  <img src=http://dummyimage.com/300x200/afe600/ffffff" alt="">
+  <figcaption>
+    <div class="effect-figcaption-wrap">
+      <h3>Guillotine Reverse</h3>
+      <p>Lorem ipsum dolar.</p>
+    </div>
+  </figcaption>
 </figure>
 
-fade - Add fade-in animation for the caption
-float - Add fade-in and slide-in animation for the caption
+cover-fade - Cover Fade
+cover-push-right - Cover Push Right
+cover-slide-top - Cover Slide Top
+guillotine-reverse - Guillotine Reverse / Reveal Up
+half-slide - Half Slide
+offset - Caption Offset
+quarter-appear - Appear
+quarter-fall-in - Quarter Fall in
+quarter-slide-side - Quarter Slide Side
+quarter-slide-up - Quarter Slide Up
+quarter-two-step - Quarter Two Step
+quarter-zoom - Quarter Caption Zoom
+revolving-door-bottom - Revolving Door
+revolving-door-left - Revolving Door
+revolving-door-right - Revolving Door
+revolving-door-top - Revolving Door
 
 Styleguide 5
 
@@ -21,57 +40,384 @@ Styleguide 5
 
 @if $captions {
 
-    .caption {
-        position: relative;
-        display: inline-block;
-        width: auto;
-        overflow: hidden;
-        line-height: 0;
+  .caption {
+    position: relative;
+    float: left;
+    overflow: hidden;
 
-        &:after {
-            @extend %caption !optional;
-            display: inline-block;
-            content: attr(data-content);
-            position: absolute;
-            line-height: rhythm();
+    &:nth-child(2n) {
+      margin-right: 0;
+    }
+    img {
+      transition: $caption-animations-duration;
+    }
+    figcaption {
+      @extend %caption;
+      position: absolute;
+      transition: $caption-animations-duration;
+      width: 100%;
+
+      * {
+        margin-bottom: 0;
+      }
+
+    }
+
+    // Effect 1: Appear
+    &[data-effect-type="quarter-appear"] {
+      figcaption {
+        bottom: 0;
+        left: 0;
+        opacity: 0;
+      }
+      &:hover, &:active {
+        figcaption {
+          opacity: 1;
+        }
+      }
+    }
+
+
+    // Effect 2: Quarter Slide Up
+    &[data-effect-type="quarter-slide-up"] {
+      figcaption {
+        bottom: 0;
+        left: 0;
+        opacity: 0;
+        @include translateY(100%);
+      }
+      &:hover, &:active {
+        figcaption {
+          opacity: 1;
+          @include translateY(0);
+        }
+      }
+    }
+
+
+    // Effect 4: Quarter Slide Side
+    &[data-effect-type="quarter-slide-side"] {
+      figcaption {
+        left: 0;
+        bottom: 0;
+        opacity: 0;
+        @include translateX(100%);
+      }
+      &:hover, &:active {
+        figcaption {
+          opacity: 1;
+          @include translateX(0);
+        }
+      }
+    }
+
+
+    // Effect 5: Cover Fade
+    &[data-effect-type="cover-fade"] {
+      figcaption {
+        top: 0;
+        left: 0;
+        height: 100%;
+        opacity: 0;
+      }
+      &:hover, &:active {
+        figcaption {
+          opacity: 1;
+        }
+      }
+    }
+
+
+    // Effect 6 - Quarter Fall in
+    &[data-effect-type="quarter-fall-in"] {
+      figcaption {
+        top: 0;
+        left: 0;
+        @include translateX(100%) ;
+        @include rotate(20deg);
+        opacity: 0;
+      }
+      &:hover, &:active {
+        figcaption {
+          @include translateX(0) ;
+          @include rotate(0deg);
+          opacity: 1;
+        }
+      }
+    }
+
+
+    // Effect 7 - 3Quarter Two Step
+    &[data-effect-type="quarter-two-step"] {
+      figcaption {
+        top: 0;
+        left: 0;
+        @include translateX(-100%);
+        opacity: 0;
+        z-index: 2;
+      }
+      .effect-figcaption-wrap {
+        transition: $caption-animations-duration $caption-animations-duration/2;
+        @include translateX(200%);
+      }
+      &:hover, &:active {
+        figcaption {
+          @include translateX(0);
+          opacity: 1;
+        }
+        .effect-figcaption-wrap {
+          @include translateX(0);
         }
+      }
+    }
 
-        &[data-position*="top"]:after     { top:0; }
-        &[data-position*="bottom"]:after   { bottom:0; }
-        &[data-position*="left"]:after     { left:0; }
-        &[data-position*="right"]:after   { right:0; }
 
-        &[data-position$="top"]:after,
-        &[data-position$="bottom"]:after   { left: 0; right: 0; }
+    // Effect 8 - Cover Push Right
+    &[data-effect-type="cover-push-right"] {
+      figcaption {
+        top: 0;
+        left: 0;
+        height: 100%;
+        @include translateX(-100%);
+        opacity: 0;
+      }
+      img {
+        transition: $caption-animations-duration;
+        @include translateX(0);
+      }
+      &:hover, &:active {
+        figcaption {
+          @include translateX(0);
+          opacity: 1;
+        }
+        img {
+          @include translateX(100%);
+        }
+      }
+    }
 
-        // Animations
-        &[data-animation*="fade"],
-        &[data-animation*="float"] {
+    // Effect 15 - Cover Slide Top
+    &[data-effect-type="cover-slide-top"] {
+      figcaption {
+        top: 0;
+        left: 0;
+        height: 100%;
+        @include translateY(-100%);
+        opacity: 0;
+      }
+      img {
+        transition: $caption-animations-duration;
+      }
+      &:hover, &:active {
+        figcaption {
+          @include translateY(0);
+          opacity: 1;
+        }
+      }
+    }
 
-            &:after {
-                @include transition();
-                @include opacity(0);
-                visibility: hidden;
-            }
 
-            &:hover:after {
-                @include opacity(1);
-                visibility: visible;
-            }
+    // Effect 9 - Quarter Caption Zoom
+    &[data-effect-type="quarter-zoom"] {
+      figcaption {
+        top: 0;
+        left: 0;
+        @include scale(2);
+        text-align: center;
+        opacity: 0;
+      }
+      img {
+        transition: $caption-animations-duration;
+      }
+      &:hover, &:active {
+        figcaption {
+          @include scale(1);
+          opacity: 1;
+        }
+        img {
+          @include scale(1.1);
         }
+      }
+    }
 
 
-        // Float animation
-        &[data-animation*="float"][data-position*="top"] {
-            &:after { top: -10px; }
-            &:hover:after { top: 0; }
+    // Effect 10 - Revolving Door
+    // BUG: Super flickery in Safari 5.1.7 on Windows 7
+    &[data-effect-type="revolving-door-left"] {
+      overflow: visible;
+      figcaption {
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        @include perspective(1300) ;
+        @include rotateY(180deg);
+        @include backface-visibility(hidden);
+      }
+      img {
+        @include perspective(1300);
+        transition: $caption-animations-duration;
+      }
+      &:hover, &:active {
+        figcaption {
+          @include perspective(1300) ;
+          @include rotateY(0deg);
+        }
+        img {
+          @include perspective(1300) ;
+          @include rotateY(-180deg);
         }
+      }
+    }
 
-        &[data-animation*="float"][data-position*="bottom"] {
-            &:after { bottom: -10px; }
-            &:hover:after { bottom: 0; }
+    &[data-effect-type="revolving-door-right"] {
+      overflow: visible;
+      figcaption {
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        @include perspective(1300) ;
+        @include rotateY(180deg);
+        @include backface-visibility(hidden);
+      }
+      img {
+        @include perspective(1300);
+        transition: $caption-animations-duration;
+      }
+      &:hover, &:active {
+        figcaption {
+          @include perspective(1300) ;
+          @include rotateY(360deg);
+        }
+        img {
+          @include perspective(1300) ;
+          @include rotateY(180deg);
         }
+      }
+    }
 
+    &[data-effect-type="revolving-door-top"] {
+      overflow: visible;
+      figcaption {
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        @include perspective(1300);
+        @include rotateX(180deg);
+        @include backface-visibility(hidden);
+      }
+      img {
+        @include perspective(1300);
+        transition: $caption-animations-duration;
+      }
+      &:hover, &:active {
+        figcaption {
+          @include perspective(1300);
+          @include rotateX(360deg);
+        }
+        img {
+          @include perspective(1300) ;
+          @include rotateX(180deg);
+        }
+      }
     }
 
-}
+    &[data-effect-type="revolving-door-bottom"] {
+      overflow: visible;
+      figcaption {
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        @include perspective(1300);
+        @include rotateX(180deg);
+        @include backface-visibility(hidden);
+      }
+      img {
+        @include perspective(1300);
+        transition: $caption-animations-duration;
+      }
+      &:hover, &:active {
+        figcaption {
+          @include perspective(1300);
+          @include rotateX(0deg);
+        }
+        img {
+          @include perspective(1300);
+          @include rotateX(-180deg);;
+        }
+      }
+    }
+
+    // Effect 11 - Caption Offset
+    &[data-effect-type="offset"] {
+      overflow: visible;
+      figcaption {
+        top: 0;
+        left: 0;
+        text-align: center;
+        opacity: 0;
+        height: 100%;
+      }
+      img {
+        transition: $caption-animations-duration;
+      }
+      &:hover, &:active {
+        figcaption {
+          @include translate(15px, 15px);
+          opacity: 1;
+          z-index: 100; //prevent ovarslap
+          overflow: hidden;
+        }
+      }
+    }
+    // Effect 12 - Guillotine Reverse / Reveal Up
+    &[data-effect-type="guillotine-reverse"] {
+      overflow: visible;
+      figcaption {
+        top: 0;
+        left: 0;
+        text-align: center;
+        height: 100%;
+      }
+      img {
+        display: block;
+        position:relative;
+        z-index:10;
+        transition: $caption-animations-duration;
+      }
+      &:hover, &:active {
+        img {
+          @include translateY(-100%);
+        }
+      }
+    }
+    // Effect 13 - Half Slide
+    &[data-effect-type="half-slide"] {
+      figcaption {
+        top: 0;
+        left: 0;
+        text-align: center;
+        height: 100%;
+        @include translateY(100%);
+      }
+      img {
+        display: block;
+        position:relative;
+        transition: $caption-animations-duration;
+      }
+      &:hover, &:active {
+        img {
+          @include translateY(-50%);
+        }
+        figcaption {
+          @include translateY(50%);
+        }
+      }
+    }
+
+  }
+
+}

data/stylesheets/components/_dropdowns.scss

@@ -6,6 +6,10 @@ Toggleable, contextual menu for displaying lists of links. Made interactive with
 
 Looking at just the dropdown menu, here's the required HTML. You need to wrap the dropdown's trigger and the dropdown menu within `.dropdown`. Then just create the menu.
 
+Script required:
+
+    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap-dropdown.min.js"></script>
+
 Markup:
 <div class="dropdown">
   <a href="#" class="btn btn--default dropdown__toggle " data-toggle="dropdown">
@@ -87,10 +91,10 @@ Styleguide 7.2
 
     .dropdown__menu {
         @extend %dropdown !optional;
+        @extend .transition;
         @include border-bottom-radius($base-border-radius);
         @include opacity(0);
         @include position(absolute, 100% 0 0 0px);
-        @include transition();
         border-style: solid;
         border-width: $input-border;
         display/*\**/: none\9; // Ugly IE8 Hack