rapido-css 0.1.2 → 0.1.3

data/lib/rapido-css.rb

@@ -1,3 +1,5 @@
 require 'compass'
+require 'susy'
+
 extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
-Compass::Frameworks.register('rapido-css', :path => extension_path)
+Compass::Frameworks.register('rapido-css', :path => extension_path)

data/stylesheets/components/_breadcrumbs.scss

@@ -4,6 +4,7 @@ Breadcrumbs
 
 Add a breadcrumb with a list with class `.breadcrumb`.
 
+Markup:
     <ul class="breadcrumbs">
       <li><a href="#">Home</a></li>
       <li><a href="#">Library</a></li>
@@ -29,4 +30,4 @@ Styleguide 2
         .current {@extend %breadcrumbs__current !optional;}
     }
 
-}
+}

data/stylesheets/components/_buttons.scss

@@ -2,7 +2,9 @@
 
 Buttons
 
-Button styles can be applied to anything with the `.btn` class applied. However, typically you'll want to apply these to only `<a>` and `<button>` elements for the best rendering.
+Button styles can be applied to anything with the `.btn` class applied.
+However, typically you'll want to apply these to only `<a>` and `<button>`
+elements for the best rendering.
 
 Markup:
 <a href="#" class="btn btn--default {$modifiers}">Link Button</a>
@@ -43,6 +45,28 @@ Styleguide 3
         }
     }
 
+/*
+
+Buttons with Icons
+
+To add an icon to a button (or eny other type of element) just enable the font
+(see 27.2), add a class with the name of the font and use the unicode of
+the character.
+
+It's not a pretty way of doing it, if you prefer more fine control i suggest
+to ditch the icon font integration and use the tools and resources made
+available on the fonts sites.
+
+Markup:
+<a href="#" class="btn btn--default fontawesome">&#xf02b;</a>
+<a href="#" class="btn btn--default fontawesome">&#xf040;</a>
+<a href="#" class="btn btn--default fontawesome">&#xf06c;</a>
+
+Styleguide 3.1
+
+*/
+
+
 /*
 
 Colors
@@ -52,7 +76,7 @@ Markup:
 <a href="#" class="btn btn--primary">Link Button</a>
 <a href="#" class="btn btn--secondary">Link Button</a>
 
-Styleguide 3.1
+Styleguide 3.2
 
 */
 
@@ -70,7 +94,7 @@ Markup:
 <a href="#" class="btn btn--default btn--small">Link Button</a>
 <a href="#" class="btn btn--default btn--mini">Link Button</a>
 
-Styleguide 3.2
+Styleguide 3.3
 
 */
 
@@ -93,12 +117,12 @@ Styleguide 3.2
     }
 
     .btn--small {
-        @include adjust-font-size-to($milli-size);
+        @include adjust-font-size-to($small-size);
         padding: $btn-small-padding;
     }
 
     .btn--mini {
-        @include adjust-font-size-to($micro-size);
+        @include adjust-font-size-to($smaller-size);
         padding: $btn-mini-padding;
     }
 
@@ -117,7 +141,7 @@ Markup:
 .btn--pill - Button width rounded full corners.
 .btn--link - Deemphasize a button by making it look like a link while maintaining button behavior.
 
-Styleguide 3.3
+Styleguide 3.4
 
 */
 
@@ -141,11 +165,25 @@ Styleguide 3.3
         @include border-radius(200px);
     }
 
-// Link buttons
+/*
+
+Link
+
+Deemphasize a button by making it look like a link while maintaining
+button behavior.
+
+Markup:
+<a href="#" class="btn btn--link ">Link Button</a>
+<button class="btn btn--link">Button Element</button>
+
+Styleguide 3.5
+
+*/
+
 
     .btn--link {
         @include border-radius(0);
-        border: 0 transparent;
+        border-color: transparent;
         background: none;
         color: $link-color;
         cursor: pointer;
@@ -168,4 +206,4 @@ Styleguide 3.3
         }
     }
 
-}
+}

data/stylesheets/components/_dropdowns.scss

@@ -7,7 +7,7 @@ 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.
 
 Markup:
-<div class="dropdown {$modifiers}">
+<div class="dropdown">
   <a href="#" class="btn btn--default dropdown__toggle " data-toggle="dropdown">
     Dropdown
     <span class="dropdown__caret"></span>
@@ -20,6 +20,21 @@ Markup:
     <li><a tabindex="-1" href="#">Separated link</a></li>
   </ul>
 </div>
+<div class="dropdown">
+  <a href="#" class="btn btn--default dropdown__toggle " data-toggle="dropdown">
+    Dropdown
+    <span class="dropdown__caret"></span>
+  </a>
+  <ul class="dropdown__menu pull-right ">
+    <li><a tabindex="-1" href="#">Action</a></li>
+    <li><a tabindex="-1" href="#">Another action</a></li>
+    <li><a tabindex="-1" href="#">Something else here</a></li>
+    <li class="divider"></li>
+    <li><a tabindex="-1" href="#">Separated link</a></li>
+  </ul>
+</div>
+
+
 
 Styleguide 7
 
@@ -30,6 +45,7 @@ Styleguide 7
     .dropdown,
     .dropdown__toggle {
         position: relative;
+        display: inline-block;
     }
 
     .dropdown__toggle:focus { outline: 0; }
@@ -56,14 +72,14 @@ Dropdown menu
 
 List of the links to show in the dropdown.
 
-Markup:
-  <ul class="dropdown__menu ">
-    <li><a tabindex="-1" href="#">Action</a></li>
-    <li><a tabindex="-1" href="#">Another action</a></li>
-    <li><a tabindex="-1" href="#">Something else here</a></li>
-    <li class="divider"></li>
-    <li><a tabindex="-1" href="#">Separated link</a></li>
-  </ul>
+
+    <ul class="dropdown__menu ">
+      <li><a tabindex="-1" href="#">Action</a></li>
+      <li><a tabindex="-1" href="#">Another action</a></li>
+      <li><a tabindex="-1" href="#">Something else here</a></li>
+      <li class="divider"></li>
+      <li><a tabindex="-1" href="#">Separated link</a></li>
+    </ul>
 
 Styleguide 7.2
 
@@ -72,16 +88,19 @@ Styleguide 7.2
     .dropdown__menu {
         @extend %dropdown !optional;
         @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
         float: left;
         list-style: none;
         margin: -$input-border 0 0 0;
+        max-height: 0;
         min-width: 10em;
         overflow: hidden;
         z-index: $zindex-dropdown;
-        display/*\**/: none\9; // Ugly IE8 Hack
 
         &[data-content] { min-width: em(600px); }
 
@@ -135,16 +154,8 @@ Styleguide 7.2
         cursor: default;
     }
 
-
-    // Hide .dropdown__menu when .dropdown is closed
-    .dropdown .dropdown__menu {
-        @include opacity(0);
-        @include position(absolute, 100% 0 0 0px);
-        max-height: 0;
-    }
-
 // Dropdown open
-//
+
     .dropdown.open {
         z-index: $zindex-dropdown ;
 

data/stylesheets/components/_forms.scss

@@ -2,9 +2,10 @@
 
 Forms
 
-Individual form controls receive default styling with `form` Results in stacked, left-aligned labels on top of form controls.
+Individual form controls receive default styling with `form` Results in
+stacked, left-aligned labels on top of form controls.
 
-    .form
+    form
       +–– .form__group
       |    |–– .form__label
       |    +–– .form__controls
@@ -141,20 +142,22 @@ select[size] {
     height: auto;
 }
 
-
 input,
 textarea {
     @include placeholder($placeholder-color);
 }
 
-// input[disabled],
-// select[disabled],
-// textarea[disabled],
-// input[readonly],
-// select[readonly],
-// textarea[readonly] {
-//  cursor: not-allowed;
-// }
+input[readonly],
+select[readonly],
+textarea[readonly] {
+  cursor: default;
+}
+
+input[disabled],
+select[disabled],
+textarea[disabled],{
+    cursor: not-allowed;
+}
 
 input[type="radio"][disabled],
 input[type="checkbox"][disabled],
@@ -177,7 +180,12 @@ select:focus:invalid {
 
 .form__group + .form__group { margin-top: em($control-margin-bottom); }
 
-.form__controls { @extend .clearfix; }
+.form__controls {
+  @extend .clearfix;
+  position: relative;
+  display: inline-block;
+}
+
 
 /*
 
@@ -249,7 +257,8 @@ Styleguide 8.2
 
 Custom Select
 
-Add custom styling to a select element wrapping the `<select>` with a `<span>` with class `.form__select`.
+Add custom styling to a select element wrapping the `<select>` with a `<span>`
+with class `.form__select`.
 
 Markup:
 <span class="form__select">
@@ -301,6 +310,42 @@ Styleguide 8.3
 
 }
 
+/*
+
+Custom icons in inputs
+
+Markup:
+<div class="form__controls">
+  <span class="form__icon fontawesome">&#xf02b;</span>
+  <input type="text">
+</div>
+<div class="form__controls">
+  <span class="form__icon fontawesome pull-right">&#xf040;</span>
+  <input type="text">
+</div>
+
+Styleguide 8.4
+
+*/
+
+.form__icon {
+    @include position(absolute, em($input-padding-top) 0 0 em($input-padding-side));
+
+    + input {
+      padding-left: em(30px);
+    }
+
+    &.pull-right {
+      left: auto;
+      right: em($input-padding-side);
+
+      + input {
+        padding-left: em($input-padding-side);
+        padding-right: em(30px);
+      }
+    }
+
+}
 
 
 /*
@@ -309,21 +354,16 @@ Help
 
 Add an help text block
 
-**Block Help**
-
-    <div class="form__controls">
-      <input type="text">
-      <span class="form__help--block">Help text</span>
-    </div>
-
-**Help Inline**
+Markup:
+<div class="form__controls">
+  <input type="text">
+  <span class="{$modifiers}">This is an example help text</span>
+</div>
 
-    <div class="form__controls">
-      <input type="text">
-      <span class="form__help--inline">Help text</span>
-    </div>
+.form__help--block - Block Help
+.form__help--inline - Help Inline
 
-Styleguide 8.4
+Styleguide 8.5
 
 */
 
@@ -349,12 +389,13 @@ Append & Prepend
 
 Markup:
 <div class="form__controls form__controls--multi">
+  <span class="form__addon fontawesome">&#xf06c;</span>
   <span class="form__addon">$</span>
   <input type="text">
   <span class="form__addon">.00</span>
 </div>
 
-Styleguide 8.5
+Styleguide 8.6
 
 */
 
@@ -411,7 +452,7 @@ Markup:
   <button type="button" class="btn btn--default btn--secondary">Cancel</button>
 </div>
 
-Styleguide 8.6
+Styleguide 8.7
 
 */
 
@@ -430,7 +471,7 @@ Styleguide 8.6
 Form Layouts
 
 Markup:
-<form class="form {$modifiers}">
+<form class="{$modifiers}">
   <div class="form__group">
     <label class="form__label">Label</label>
     <div class="form__controls">
@@ -458,7 +499,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.7
+Styleguide 8.8
 
 */
 
@@ -490,7 +531,7 @@ Styleguide 8.7
             text-align: right;
         }
 
-        .form__controls { margin-left: em($horizontal-offset); }
+        .form__controls { margin-left: em(20px); }
 
         .form__help--block { margin-bottom: 0; }
 
@@ -530,7 +571,7 @@ Inline Form (semplified)
 The inline layout can also be used width a samplified markup.
 
 Markup:
-<form class="form form--inline">
+<form class="form--inline">
   <label class="form__label">Label</label>
   <input type="text" placeholder="Type something…">
   <label class="form__label">Label</label>
@@ -540,7 +581,7 @@ Markup:
   <button type="submit" class="btn btn--default ">Save changes</button>
 </form>
 
-Styleguide 8.7.1
+Styleguide 8.8.1
 
 */
 

data/stylesheets/components/_grids.scss

@@ -42,12 +42,7 @@ $media-queries: palm, lap, portable, lap-and-up, desk;
                     @include span-columns($i);
                 }
 
-                [class*="#{$device}-#{$i}"]:nth-child(#{$nth}n) {
-                    @include omega()
-                }
-
                 $i: $i - 1;
-
             }
         }
     }
@@ -81,6 +76,7 @@ Styleguide 9.1
         @include media($device) {
             .#{$device}-hide { display: none !important; }
             .#{$device}-show { display: block !important; }
+            .#{$device}-omega { @include omega(); }
         }
     }
 }

data/stylesheets/components/_navs.scss

@@ -70,7 +70,7 @@ Styleguide 12
 // Nav Title
 
     .nav__title {
-        @include adjust-font-size-to($milli-size);
+        @include adjust-font-size-to($small-size);
         color: $gray;
         display: block;
         font-weight: bold;

data/stylesheets/components/_sliders.scss

@@ -54,7 +54,7 @@ Styleguide 16
             z-index: 200;
 
             i {font-style: normal;}
-            span {@include hide-text;}
+            span {@extend .visuallyhidden;}
         }
 
         .disabled { display: none; }
@@ -103,4 +103,4 @@ Styleguide 16
         }
     }
 
-}
+}

data/stylesheets/components/_type.scss

@@ -71,7 +71,7 @@ p           { margin: 0 0 rhythm(1);}
 
 // Emphasis & misc
 
-small         { @include adjust-font-size-to($milli-size); }
+small         { @include adjust-font-size-to($small-size); }
 
 strong        { font-weight: bold; }
 em            { font-style: italic; }
@@ -204,6 +204,8 @@ Markup:
 <dl>
   <dt>Rock Hammer</dt>
   <dd>A geologist’s hammer, rock hammer, rock pick or geological pick is a hammer used for splitting and breaking rocks.</dd>
+  <dt>Rock Hammer</dt>
+  <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
@@ -223,6 +225,8 @@ Markup:
 <dl class="dl-horizontal">
   <dt>Rock Hammer</dt>
   <dd>A geologist’s hammer, rock hammer, rock pick or geological pick is a hammer used for splitting and breaking rocks.</dd>
+  <dt>Rock Hammer</dt>
+  <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
@@ -295,7 +299,7 @@ blockquote {
         font-weight: 300;
     }
 
-    small, cite {
+    cite {
         display: block;
         color: $grayLight;
         &:before {

data/stylesheets/settings/_dimensions.scss

@@ -31,16 +31,17 @@ Font sizes you can used with the compass mixin `adjust-font-size-to()`. Naming c
     $h5-size:                       $base-font-size * 1.25  # 17.5px
     $h6-size:                       $base-font-size * 1     # 14px
 
-    $milli-size:                    $base-font-size * .85   # 12px
-    $micro-size:                    $base-font-size * .7    # 10px
+    $small-size:                    $base-font-size * .85   # 12px
+    $smaller-size:                  $base-font-size * .7    # 10px
+    $smallest-size:                 $base-font-size * .5    # 7px
 
 Styleguide 28.1
 
 */
 
-$giga-size:                         $base-font-size * 7                                                     !default;
-$mega-size:                         $base-font-size * 5                                                     !default;
-$kilo-size:                         $base-font-size * 3.5                                                   !default;
+$biggest-size:                      $base-font-size * 7                                                     !default;
+$bigger-size:                       $base-font-size * 5                                                     !default;
+$big-size:                          $base-font-size * 3.5                                                   !default;
 
 $h1-size:                           $base-font-size * 2.5                                                   !default;
 $h2-size:                           $base-font-size * 2                                                     !default;
@@ -49,12 +50,17 @@ $h4-size:                           $base-font-size * 1.5
 $h5-size:                           $base-font-size * 1.25                                                  !default;
 $h6-size:                           $base-font-size * 1                                                     !default;
 
-$milli-size:                        $base-font-size * .85                                                   !default;
-$micro-size:                        $base-font-size * .7                                                    !default;
+$small-size:                        $base-font-size * .85                                                   !default;
+$smaller-size:                      $base-font-size * .7                                                    !default;
+$smallest-size:                     $base-font-size * .5                                                    !default;
 
-$small-size:                        $milli-size                                                             !default;
-$smaller-size:                      $micro-size                                                             !default;
+// Backward compatibility
 
+$giga-size:                         $biggest-size                                                           ;
+$mega-size:                         $bigger-size                                                            ;
+$kilo-size:                         $big-size                                                               ;
+$milli-size:                        $small-size                                                             ;
+$micro-size:                        $smaller-size                                                           ;
 
 /*
 
@@ -63,7 +69,7 @@ Line-Height
 By default all titles have a line-height based on the font-size, to ensure that it will allways respect the vertical rhythm.
 Sometimes this result is not what we expect/want so it's possible to override the default proportion width these.
 
-These values mean: X times the base line-height.
+These values mean: n times the base line-height.
 
     $h1-line-height:                2
     $h2-line-height:                2

data/stylesheets/utilities/_helper-classes.scss

@@ -13,8 +13,11 @@ Styleguide 22
 Generic
 
 Add a a simple `transition all`, used as a generic extend for element that can accept transition on all attributes.
+
     .transition
-Simple divider class used in some components (like dropdowns).␣␣
+
+Simple divider class used in some components (like dropdowns).
+
     .divider
 
 Styleguide 22.1