rapido-css 0.1.6 → 0.1.7

data/stylesheets/components/_forms.scss

@@ -74,6 +74,7 @@ label {
 }
 
 .input-text,
+.form__input,
 textarea,
 input[type="text"],
 input[type="password"],
@@ -89,21 +90,20 @@ input[type="url"],
 input[type="search"],
 input[type="tel"],
 input[type="color"] {
-    display: inline-block;
+    @include inline-block;
     padding: 0 $input-padding-side;
-    vertical-align: middle;
     height: $input-height;
     border-width: $input-border;
     border-style: solid;
     @media \0screen { line-height: $input-height; } // Ugly IE8 Hack
-    @extend %input !optional;
+    @extend %input !optional; // Backward compatibility
+    @extend %form__input !optional;
 
     &:focus {outline: 0;}
 }
 
 select {
-    color: $text-color;
-    display: inline-block;
+    @include inline-block;
 }
 
 input,
@@ -175,13 +175,13 @@ select:focus:invalid {
 // }
 
 
-
+.form__group { position: relative; }
 .form__group + .form__group { margin-top: em($control-margin-bottom); }
 
 .form__controls {
   @extend .clearfix;
   position: relative;
-  display: inline-block;
+  @include inline-block;
 }
 
 
@@ -201,6 +201,7 @@ Styleguide 8.1
     font-weight: bold;
     margin-bottom: em($label-margin-bottom);
     cursor: auto;
+    @extend %form__label !optional;
 }
 
 
@@ -243,8 +244,7 @@ Styleguide 8.2
 }
 .form__radio.inline,
 .form__checkbox.inline {
-    display: inline-block;
-    vertical-align: middle;
+    @include inline-block;
 }
 .form__radio.inline + .form__radio.inline,
 .form__checkbox.inline + .form__checkbox.inline {
@@ -276,14 +276,17 @@ Styleguide 8.3
 
 .form__select {
     @extend %caret !optional;
-    @include border-radius(3px);
-    @include translateY($input-border);
+    @extend %select !optional; // Backward compatibility
+    @extend %form__select !optional;
+    @include border-radius($base-border-radius);
+    @include inline-block;
     border-style: solid;
     border-width: $input-border;
     cursor: pointer;
-    display: inline-block;
     height: $input-height;
     line-height: 1em;
+    margin-bottom: 0;
+    padding: $input-padding;
     position: relative;
     width: 240px;
 
@@ -294,22 +297,21 @@ Styleguide 8.3
         border:none;
         box-shadow:none;
         cursor: pointer;
-        padding: $input-padding;
         position: relative;
         width:100%;
         z-index: 3;
-        line-height: 1em;
         text-indent: 1px;
         text-overflow: '';
-
     }
 
     &:after {
-        @include position(absolute, em($input-padding-top) em($input-padding-side) 0 0);
+        /*@include position(absolute, em($input-padding-top) em($input-padding-side) 0 0);*/
+        @include position(absolute, 0em 0em 0em 0);
         display: block;
+        line-height: $input-height;
+        padding-right: $input-padding-side;
     }
 
-     @extend %select !optional;
 
 }
 
@@ -386,6 +388,68 @@ Styleguide 8.5
 
 
 
+/*
+
+Suggest
+
+Add a simple dropdown open on :focus with a list of link, clicking on a link
+will populate de input value.
+
+Script required: **rapido.js**.
+
+Markup:
+<div class="form__controls">
+  <input type="text">
+  <div class="form__suggest">
+    <ul>
+        <li><a href="#">Fist line</a></li>
+        <li><a href="#">Second line</a></li>
+        <li><a href="#">Third line</a></li>
+    </ul>
+  </div>
+</div>
+<script type="text/javascript">
+  $(document).ready(function() {
+    $('.form__controls').rapido_Suggest();
+  });
+</script>
+
+Include this js after including rapido.js.
+
+    $('.form').rapido_Overlay();
+
+**Options** (with default values):
+
+    containerClass:   .form__controls
+    suggestClass:     .form__suggest
+
+Styleguide 8.6
+
+*/
+
+.form__suggest {
+  @extend %form__suggest !optional;
+  @include e(transition);
+  max-height: 0;
+  overflow: hidden;
+  position: absolute;
+  z-index: 5;
+
+  &.open {
+    max-height: $dropdowns-height;
+  }
+
+  a {
+    display: block
+  }
+
+  ul {
+    margin: 0;
+    list-style: none;
+    padding: $input-padding;
+  }
+}
+
 /*
 
 Append & Prepend
@@ -395,6 +459,13 @@ Markup:
   <span class="form__addon fontawesome">&#xf06c;</span>
   <span class="form__addon">$</span>
   <input type="text">
+  <div class="form__suggest">
+    <ul>
+        <li><a href="#">Fist line</a></li>
+        <li><a href="#">Second line</a></li>
+        <li><a href="#">Third line</a></li>
+    </ul>
+  </div>
   <span class="form__addon">.00</span>
 </div>
 <div class="form__controls form__controls--multi">
@@ -403,12 +474,12 @@ Markup:
   <button type="submit" class="btn btn--default form__addon">Search</button>
 </div>
 
-Styleguide 8.6
+Styleguide 8.7
 
 */
 
 .form__addon {
-    display: inline-block;
+    @include inline-block;
     width: auto;
     min-width: em(16px);
     padding: $input-padding;
@@ -419,7 +490,8 @@ Styleguide 8.6
     text-align: center;
     border-width: $input-border;
     border-style: solid;
-    @extend %input-addon !optional;
+    @extend %input-addon !optional; // Backward compatibility
+    @extend %form__addon !optional;
 }
 
 .form__controls--multi {
@@ -460,7 +532,7 @@ Markup:
   <button type="button" class="btn btn--default btn--secondary">Cancel</button>
 </div>
 
-Styleguide 8.7
+Styleguide 8.8
 
 */
 
@@ -473,6 +545,14 @@ Styleguide 8.7
     @extend .clearfix;
 }
 
+.form__group.form__actions {
+    border: 0;
+    clear: none;
+    margin-bottom: 0;
+    margin-top: 0;
+    padding-top: (rhythm() + em($label-margin-bottom));
+ }
+
 
 /*
 
@@ -521,7 +601,7 @@ Markup:
 .form--aligned - Right align labels and float them to the left to make them appear on the same line as controls.
 .form--inline - For left-aligned labels and inline-block controls for a compact layout. This layout doesn't support `.form__group`, `.form__addon`, `.form__actions`
 
-Styleguide 8.8
+Styleguide 8.9
 
 */
 
@@ -534,6 +614,14 @@ Styleguide 8.8
             margin: 0 0 em($control-margin-bottom) 0;
         }
 
+        .form__controls {
+            width: 100%;
+
+            & > * {
+                width: 100%;
+            }
+        }
+
         .form__multi { width: 100%; }
 
 
@@ -596,14 +684,12 @@ Markup:
 <form class="form--inline">
   <label class="form__label">Label</label>
     <input type="text" placeholder="Type something…">
-  <label class="form__label">Label</label>
     <label class="form__radio inline">
       <input type="radio" value="option1" checked> Option one
     </label>
     <label class="form__radio inline">
       <input type="radio" value="option1" checked> Option two
     </label>
-  <label class="form__label">Label</label>
     <span class="form__select">
       <select>
         <option selected="selected">Select Country</option>
@@ -619,7 +705,7 @@ Markup:
 
 </form>
 
-Styleguide 8.8.1
+Styleguide 8.9.1
 
 */
 
@@ -630,11 +716,11 @@ Styleguide 8.8.1
     .form--inline {
 
         > * {
-          margin: 0 0 0 em(10px);
+          margin: 0 0 0 rhythm();
         }
 
         .form__label {
-          display: inline-block;
+          @include inline-block;
           padding-right: 1em
         }
 
@@ -659,19 +745,19 @@ Styleguide 8.8.1
         }
 
         .form__select {
-          padding-right: 1.5em;
+          padding-right: 2.5em;
         }
 
         .form__group {
             padding: 0;
-            display: inline-block;
+            @include inline-block;
         }
 
         .form__actions {
             border: 0;
             padding: 0;
             margin: 0;
-            display: inline-block;
+            @include inline-block;
         }
 
     }

data/stylesheets/components/_labels.scss

@@ -17,7 +17,7 @@ Styleguide 10
     .badge,
     .pill {
         @extend %pill !optional;
-        display: inline-block;
+        @include inline-block;
         padding: $pills-padding;
         vertical-align: baseline;
         white-space: nowrap;

data/stylesheets/components/_modals.scss

@@ -220,7 +220,7 @@ Styleguide 11
         .child {
             @include alpha-color(#000, .8, background);
             @include border-radius($base-border-radius);
-            display: inline-block;
+            @include inline-block;
             margin-right: -100%;
             padding: em(2px) em($input-padding-side);
             color: #FFF;

data/stylesheets/components/_navs.scss

@@ -37,7 +37,7 @@ Styleguide 12
 
     .nav {
         @extend .clearfix;
-        display: inline-block;
+        @include inline-block;
         margin-bottom: rhythm();
         position: relative;
 
@@ -51,7 +51,7 @@ Styleguide 12
 
             > a {
                 @extend .transition;
-                display: inline-block;
+                @include inline-block;
                 line-height: 1em;
 
                 &:hover, &:focus {
@@ -91,16 +91,8 @@ Styleguide 12
           max-height: $dropdowns-height;
         }
 
-        li ul,
-        li:hover > a {
-          @extend %nav--btn__hover !optional;
-        }
-
     }
 
-
-
-
 // Nav Title
 
     .nav__title {
@@ -119,15 +111,10 @@ Styleguide 12
         & > li,
         > ul > li { float: left;}
 
-
         li ul {
           @include position(absolute, 100% 0 0 0px);
           min-width: 10em;
         }
-
-
-
-
     }
 
 // Vertical nav
@@ -162,6 +149,11 @@ Styleguide 12
                 @extend %nav--btn__current  !optional;
             }
 
+            ul,
+            &:hover > a {
+              @extend %nav--btn__hover !optional;
+            }
+
         }
     }
 

data/stylesheets/components/_overlay.scss

@@ -0,0 +1,81 @@
+/*
+
+Overlay
+
+Open and close an overlay layer  visibility using `.open` class between
+elements of a container. By defalut it have vaery little styling, because
+is not a full modal window it's completely open to the to you how to style it.
+
+Script required: **rapido.js**.
+
+Markup:
+<a href="#" class="open__overlay btn btn--default" data-overlay-ref="test">
+  Open Overlay
+</a>
+<section data-overlay-content="test">
+  <div class="w">
+    <h2>Lorem ipsum dolor sit amet</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+  </div>
+</section>
+<script type="text/javascript">
+  $(document).ready(function() {
+    $(".open__overlay").rapido_Overlay();
+  });
+</script>
+
+Include this js after including rapido.js.
+
+    $('.open__overlay').rapido_Overlay();
+
+**Options** (with default values):
+
+    delay:            500
+    closeClass:       .overlay-close
+    backgroundClass:  .overlay-background
+
+Styleguide 18
+
+*/
+
+@if $overlays {
+
+  [data-overlay-content] {
+    @extend %overlay__content !optional;
+    @include position(fixed, -100% 0em 0em 0em);
+    height: 0;
+    overflow: hidden;
+    &.open {
+      @extend %overlay__content--open !optional;
+      overflow: auto;
+      z-index: $zindex-modal;
+    }
+    &.close {
+      @extend %overlay__content--close !optional;
+
+    }
+  }
+
+  .overlay-background {
+    @extend %overlay__background !optional;
+    @include position(fixed, -100% 0em 0em 0em);
+    height: 0;
+    overflow: hidden;
+    width: 100%;
+    &.open {
+      @extend %overlay__background--open !optional;
+      overflow: auto;
+      z-index: $zindex-modal - 1;
+    }
+    &.close {
+      @extend %overlay__background--close !optional;
+    }
+  }
+
+  .overlay-close {
+    @extend %overlay__close !optional;
+    cursor: pointer;
+    display: block;
+  }
+
+}

data/stylesheets/components/_pager.scss

@@ -33,7 +33,7 @@ Styleguide 13
                 @include border-radius($base-border-radius);
                 border-style: solid;
                 border-width: 1px;
-                display: inline-block;
+                @include inline-block;
                 line-height: 1em;
                 padding: $pager-padding;
                 @extend %pager--btn !optional;

data/stylesheets/components/_pagination.scss

@@ -44,7 +44,7 @@ Styleguide 14
 
                 a,
                 span {
-                    display: inline-block;
+                    @include inline-block;
                     padding: $pagination-padding;
                     line-height: 1em;
                     text-decoration: none;

data/stylesheets/components/_sliders.scss

@@ -78,9 +78,9 @@ Styleguide 16
     }
 
     .bx-pager-item {
-        display: inline-block;
+        @include inline-block;
         a {
-            display: inline-block;
+            @include inline-block;
             // @include hide-text;
         }
     }
@@ -102,7 +102,7 @@ Styleguide 16
         width: 100%;
 
         span {
-            display: inline-block;
+            @include inline-block;
             @extend %slider__caption !optional;
         }
     }

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 18
+Styleguide 20
 
 */
 

data/stylesheets/components/_tabs.scss

@@ -38,7 +38,7 @@ Markup:
   });
 </script>
 
-Styleguide 19
+Styleguide 21
 
 */
 
@@ -55,8 +55,7 @@ Styleguide 19
             @extend %tab__nav !optional;
 
             li {
-                display: inline-block;
-                zoom: 1;
+                @include inline-block;
 
                 a {
                     line-height: 1em;

data/stylesheets/components/_tooltip.scss

@@ -0,0 +1,89 @@
+/*
+
+Tooltips
+
+Add simple tooltips to any element.
+
+Script required: **rapido.js**.
+
+Markup:
+<a class="btn btn--default tooltip__button" href="#"
+  data-tooltip-content="Text to be included in the tooltip"
+  data-tooltip-position="bottom">
+  Button
+</a>
+<script type="text/javascript">
+  $(document).ready(function() {
+    $('.tooltip__button').rapido_Tooltip();
+  });
+</script>
+
+Include this js after including rapido.js.
+
+    $('.tooltip__button').rapido_Overlay();
+
+**Options** (with default values):
+
+    margin:            15
+
+Styleguide 19
+
+*/
+
+@if $tooltips {
+
+  .tooltip {
+    @extend %tooltip !optional;
+    @include border-radius();
+    @include opacity(0);
+    @include transition($tooltip-transition-duration);
+    background: $tooltip-background;
+    color: $tooltip-color;
+    padding: $tooltips-padding;
+    position: absolute;
+    visibility: hidden;
+    max-width: 300px;
+
+    &.open {
+      @include opacity(1);
+      max-height: $dropdowns-height;
+      visibility: visible;
+    }
+
+    &:after {
+      content: "";
+      display: block;
+      position: absolute;
+    }
+
+  }
+
+  [data-tooltip-position="top"] + .tooltip:after {
+    @include triangle($tooltip-triangle-size, $tooltip-background, down);
+    left: 50%;
+    margin-left: (neg($tooltip-triangle-size) / 2);
+    bottom: neg($tooltip-triangle-size);
+  }
+
+  [data-tooltip-position="bottom"] + .tooltip:after {
+    @include triangle($tooltip-triangle-size, $tooltip-background, up);
+    left: 50%;
+    margin-left: (neg($tooltip-triangle-size) / 2);
+    top: neg($tooltip-triangle-size);
+  }
+
+  [data-tooltip-position="left"] + .tooltip:after {
+    @include triangle($tooltip-triangle-size, $tooltip-background, right);
+    right: neg($tooltip-triangle-size);
+    top: 50%;
+    margin-top: (neg($tooltip-triangle-size) / 2);
+  }
+
+  [data-tooltip-position="right"] + .tooltip:after {
+    @include triangle($tooltip-triangle-size, $tooltip-background, left);
+    left: neg($tooltip-triangle-size);
+    top: 50%;
+    margin-top: (neg($tooltip-triangle-size) / 2);
+  }
+
+}