rapido-css 0.0.3 → 0.0.4

data/stylesheets/components/_pagination.scss

@@ -1,12 +1,31 @@
-// ====================================================================================================================
-// PAGINATION (multiple pages)
-// ====================================================================================================================
+/* ====================================================================================================================
 
-@if $pagination {
+Pagination
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-// Base
-// --------------------------------------------------------------------------------------------------------------------
+Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.
+
+Default pagination with `.pagination`, it also support [WP-Paginate](http://wordpress.org/plugins/wp-paginate/).
+
+Markup:
+<div class="pagination {$modifiers}">
+  <ul>
+    <li><a href="#">Prev</a></li>
+    <li><a href="#">1</a></li>
+    <li class="current"><a href="#">2</a></li>
+    <li><a href="#">3</a></li>
+    <li><a href="#">Next</a></li>
+  </ul>
+</div>
+
+.pagination--center - Center aligned pagination.
+.pagination--right - Right aligned pagination.
+.pagination--rounded - Rounded sides.
+
+Styleguide 14.
+
+==================================================================================================================== */
+
+@if $pagination {
 
 	.pagination {
 		margin: rhythm() 0;
@@ -31,7 +50,7 @@
 					border-width: $input-border;
 					border-style: solid;
 					margin-left: -$input-border;
-					@extend %pagination-btn !optional;
+					@extend %pagination--btn !optional;
 				}
 			}
 
@@ -40,32 +59,28 @@
 				border-left-width: 1px;
 			}
 
-			li > a:hover,
-			li > a:focus {
-				@extend %pagination-btn_hover !optional;
+			li > a:hover {
+				@extend %pagination--btn__hover !optional;
 			}
 
 			li > a:active {
-				@extend %pagination-btn_active !optional;
+				@extend %pagination--btn__active !optional;
 			}
 
-			// Bootstrap
-			.active > a,
-			.active > a:hover,
-			.active > span,
-			.active > span:hover,
+			li.current a,
+			li.current a:hover,
 
 			// WP Paginate
-			.current,
-			.current:hover {
-				@extend %pagination-btn_current !optional;
+			a.current,
+			a.current:hover {
+				@extend %pagination--btn__current !optional;
 			}
 
 			.disabled > span,
 			.disabled > a,
 			.disabled > a:hover,
 			.disabled > a:focus {
-				@extend %pagination-btn_disabled !optional;
+				@extend %pagination--btn__disabled !optional;
 			}
 
 			.active > a,
@@ -79,15 +94,15 @@
 		}
 	}
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-// Alignment
+// Alternative alignments
 // --------------------------------------------------------------------------------------------------------------------
+
 	.pagination--center {text-align: center; }
-	.pagination--right 	{text-align: right; }
+	.pagination--right   {text-align: right; }
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
 // Rounded sides
 // --------------------------------------------------------------------------------------------------------------------
+
 	.pagination--rounded {
 		li:first-child > a,
 		li:first-child > span {

data/stylesheets/components/_responsive-navs.scss

@@ -1,53 +1,135 @@
-// ====================================================================================================================
-// RESPONSIVE NAVS w/ responsive-nav.js (https://github.com/raffone/responsive-nav.js)
-// ====================================================================================================================
+/* ====================================================================================================================
 
+Responsive Navs
+
+The main nav can be made fully responsive (with two layouts available) with js and some extra elements for better styling.
+
+Styleguide 15
+
+==================================================================================================================== */
 
 @if $navs-responsive {
 
+	.nav--responsive.active     { @extend %nav--responsive !optional;  }
+	.nav--responsive.close       { max-height: none;  }
+
 	#nav-toggle {
-		@extend %nav-toggle !optional;
+		@extend %nav__toggle !optional;
 		display: none;
 		float: $navs-responsive-dropdown-pos;
 	}
 
-
-	.nav--responsive 				{}
-	.nav--responsive.notactive 		{ @extend %nav-big !optional; }
-	.nav--responsive.active 		{ @extend %nav-small !optional;	}
-	.nav--responsive.close 			{ max-height: none;	}
-
-
 	@include media($navs-responsive-breakpoint) {
 
 		#nav-toggle { display: block; }
 
-		.nav--responsive {
+
+		// Reset styling of normal nav
+		.nav.nav--responsive {
+
 			display: block;
 			margin: 0;
-			zoom: 1;
 			overflow: hidden;
+			zoom: 1;
 
-			> ul {
-				padding: $wrapper-padding;
-			}
-
-			ul, ul * {
+			* {
 				@include border-radius(0);
 				background: transparent;
 				border: 0;
 				display: block;
 				float: none;
 				margin: 0;
+				padding: 0;
 				position: static;
 				text-align: left;
 				width: 100%;
+				max-height: $dropdowns-height;
+				opacity: 1;
 			}
-
 		}
 
-		// SLIDE
-		// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+/* --------------------------------------------------------------------------------------------------------------------
+
+SlideIn Layout
+
+Start by adding `.nav--responsive` to the nav and a container with `#nav-origin`.
+
+Example: a simple inline nav with 3 dropdowns:
+
+    <div id="nav-origin">
+      <nav class="nav nav--inline nav--btn nav--responsive" id="nav">
+        <ul>
+          <li class="dropdown">
+            <a href="#" class="dropdown__toggle " data-toggle="dropdown">
+              Dropdown 1
+            </a>
+            <ul class="dropdown__menu ">
+              <li><a href="#">Dropdown 1 - Sub 1</a></li>
+              <li><a href="#">Dropdown 1 - Sub 2</a></li>
+              <li><a href="#">Dropdown 1 - Sub 2</a></li>
+            </ul>
+          </li>
+          <li class="dropdown">
+            <a href="#" class="dropdown__toggle" data-toggle="dropdown">
+              Dropdown 2
+            </a>
+            <ul class="dropdown__menu">
+              <li><a href="#">Dropdown 2 - Sub 1</a></li>
+              <li><a href="#">Dropdown 2 - Sub 2</a></li>
+              <li class="divider"></li>
+              <li><a href="#">Dropdown 2 - Sub 4</a></li>
+            </ul>
+          </li>
+          <li class="dropdown">
+            <a href="#" class="dropdown__toggle " data-toggle="dropdown">
+              Dropdown 3
+            </a>
+            <ul class="dropdown__menu ">
+              <li><a href="#">Dropdown 3 - Sub 1</a></li>
+              <li><a href="#">Dropdown 3 - Sub 2</a></li>
+              <li><a href="#">Dropdown 3 - Sub 3</a></li>
+              <li><a href="#">Dropdown 3 - Sub 4</a></li>
+            </ul>
+          </li>
+        </ul>
+      </nav>
+    </div>
+
+Then add and empty div with `#nav-destination` for where the nav html will be moved when the media query kick in.
+
+    <div id="nav-destination"></div>
+
+At the bottom of the page add `responsive-nav.js`. This is a modified version of
+[Responsive Nav](http://responsive-nav.com/) with extra options.
+
+    <script src="//rawgithub.com/raffone/responsive-nav.js/master/responsive-nav.js"></script>
+
+And finally in your js file add:
+
+    // Enable responsive nav
+    var navigation = responsiveNav("#nav");
+
+    // Move html on breakpoint
+    function moveNavbar() {
+      if ( $(".nav--responsive").css("overflow") == 'hidden' ) {
+        $("#nav-destination").append($("#nav-origin .nav"));
+      } else {
+        $("#nav-origin").append($("#nav-destination .nav"));
+      }
+    }
+
+    moveNavbar();
+    $(window).resize(function() { moveNavbar(); });
+
+
+That's it, when the with of the page reace the breakpoint for the nav defined with
+`$navs-responsive-breakpoint` the html will be moved to the destination.
+
+Styleguide 15.1
+
+-------------------------------------------------------------------------------------------------------------------- */
+
+
 		@if $navs-responsive-type == 'slide' {
 
 			.nav--responsive {
@@ -63,12 +145,47 @@
 
 		}
 
-		// OFFCANVAS
-		// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+/* --------------------------------------------------------------------------------------------------------------------
+
+Offset Layout
+
+First enable the layout:
+
+    $navs-responsive-type: 'off-canvas';
+
+The offset layout require two more wrappers `.external-wrapper` and `.internal-wrapper`, example below:
+
+    <div class="external-wrapper">
+      <div id="nav-destination"></div>
+      <div class="internal-wrapper">
+        <div id="nav-origin">
+          …
+        </div>
+        [rest of the page…]
+      </div>
+    </div>
+
+Add this js instead of `var navigation = responsiveNav("#nav");`:
+
+    var navigation = responsiveNav("#nav", {
+      animate: false,
+      offcanvas: true,
+      open: function(){
+        $("body").addClass("nav-open");
+      },
+      close: function(){
+          $("body").removeClass("nav-open");
+      }
+    });
+
+Styleguide 15.2
+
+-------------------------------------------------------------------------------------------------------------------- */
+
+
 		@if $navs-responsive-type == 'off-canvas' {
 
 			// Wrappers
-			// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
 			#{$navs-responsive-outside-wrapper},
 			#{$navs-responsive-inside-wrapper} {
 				position: relative;
@@ -80,7 +197,6 @@
 			}
 
 			// Transitions
-			// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
 			#{$navs-responsive-inside-wrapper},
 			.nav--responsive {
 				@include transition();
@@ -89,7 +205,6 @@
 
 
 			// Animations
-			// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
 			#{$navs-responsive-inside-wrapper} {
 				@include transform(translate3d(0,0,0));
 				left: 0;
@@ -113,8 +228,6 @@
 				}
 			}
 
-
 		}
-
 	}
 }

data/stylesheets/components/_sliders.scss

@@ -1,12 +1,32 @@
-// ====================================================================================================================
-// SLIDERS w/ BxSlider (https://github.com/wandoledzep/bxslider-4)
-// ====================================================================================================================
+/* ====================================================================================================================
+
+Sliders
+
+For modals is used the excellent [**BxSlider**](http://bxslider.com/) jQuery plugin,
+see full documentation for more in depth examples.
+
+Markup:
+<ul class="slider">
+  <li><img src="http://placehold.it/800x300/c7e843/fff.jpg" /></li>
+  <li><img src="http://placehold.it/800x300/f6ab48/fff.jpg" /></li>
+  <li><img src="http://placehold.it/800x300/3dced4/fff.jpg" /></li>
+</ul>
+<script type="text/javascript">
+  $(document).ready(function() {
+    $('.slider').bxSlider({
+      nextText: '<i></i><span>Next</span>', // replace text with icon-font
+      prevText: '<i></i><span>Prev</span>', // replace text with icon-font
+    });
+  });
+</script>
+
+Styleguide 16.
+
+==================================================================================================================== */
+
 
 @if $slider {
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-// Base
-// --------------------------------------------------------------------------------------------------------------------
 	.bx-wrapper {
 		position: relative;
 		padding: 0;
@@ -24,67 +44,66 @@
 
 	.bx-viewport { }
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
 // Directions
 // --------------------------------------------------------------------------------------------------------------------
-	.bx-controls-direction {
 
+	.bx-controls-direction {
 		a {
-			@extend %slider-btn !optional;
+			@extend %slider__btn !optional;
 			@include position(absolute, 50% 0 0 0);
 
 			z-index: 200;
 
 			i {font-style: normal;}
 			span {@include hide-text;}
-
-			&.disabled { display: none; }
-
-			&.bx-prev { left: 0; }
-			&.bx-next { right: 0; }
 		}
 
+		.disabled { display: none; }
 
 	}
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+	.bx-prev { left: 0; }
+	.bx-next { right: 0; }
+
 // Pager
 // --------------------------------------------------------------------------------------------------------------------
+
 	.bx-pager {
 		width: 100%;
 		text-align: center;
-		@extend %slider-pager !optional;
+		@extend %slider__pager !optional;
+
+	}
 
-		.bx-pager-item {
+	.bx-pager-item {
+		display: inline-block;
+		a {
 			display: inline-block;
-			a {
-				display: inline-block;
-				// @include hide-text;
-			}
+			// @include hide-text;
 		}
 	}
 
-
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
 // Loading
 // --------------------------------------------------------------------------------------------------------------------
+
 	.bx-loading {
 		@include square(100%);
 		@include position(absolute, 0px 0 0 0px);
-		@extend %slider-loading-style;
+		@extend %slider__loading-style;
 		z-index: 2000;
 	}
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+
 // Captions
 // --------------------------------------------------------------------------------------------------------------------
+
 	.bx-caption {
 		@include position(absolute, 0 0 0px 0px);
 		width: 100%;
 
 		span {
 			display: inline-block;
-			@extend %slider-caption !optional;
+			@extend %slider__caption !optional;
 		}
 	}
 

data/stylesheets/components/_tables.scss

@@ -1,12 +1,40 @@
-// ====================================================================================================================
-// TABLES
-// ====================================================================================================================
+/* ====================================================================================================================
+
+Tables
+
+For basic styling—light padding and only horizontal dividers—add the base class `.table` to any `<table>`.
+
+Markup:
+<table class="table {$modifiers}">
+  <thead>
+    <tr>
+      <th>Test</th>
+      <th>Test</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>test</td>
+      <td>test</td>
+    </tr>
+    <tr>
+      <td>test</td>
+      <td>test</td>
+    </tr>
+  </tbody>
+</table>
+
+.table--striped - Adds zebra-striping to any table row within the `<tbody>` via the :nth-child CSS selector *(not available in IE8)*
+.table--bordered - Add borders and rounded corners to the table.
+.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.
+
+==================================================================================================================== */
 
 @if $tables {
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-// Base
-// --------------------------------------------------------------------------------------------------------------------
 	table {
 		max-width: 100%;
 		border-collapse: collapse;
@@ -43,9 +71,9 @@
 
 	}
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
 // Condensed Table w/ Half Padding
 // --------------------------------------------------------------------------------------------------------------------
+
 	.table--condensed {
 		$half-top: nth($tables-padding, 1) / 2;
 		$half-side: nth($tables-padding, 2) / 2;
@@ -53,26 +81,25 @@
 		th, td { padding: $half-top $half-side; }
 	}
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
 // Zebra-striping
 // --------------------------------------------------------------------------------------------------------------------
+
 	.table--striped {
 		tbody {
 			> tr:nth-child(odd) > td,
 			> tr:nth-child(odd) > th {
-				@extend %table-striped !optional;
+				@extend %table--striped !optional;
 			}
 		}
 	}
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
 // Bordered Version
 // --------------------------------------------------------------------------------------------------------------------
+
 	.table--bordered {
-		@extend %table-bordered !optional;
+		@extend %table--bordered !optional;
 	}
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
 // Hover effect
 // --------------------------------------------------------------------------------------------------------------------
 
@@ -80,16 +107,16 @@
 		tbody {
 			tr:hover > td,
 			tr:hover > th {
-				@extend %table-hover !optional;
+				@extend %table--hover !optional;
 			}
 		}
 	}
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-// Sortable w/ StupidTable (https://github.com/joequery/Stupid-Table-Plugin)
+// Sortable
 // --------------------------------------------------------------------------------------------------------------------
+
 	.table--sortable {
-		@extend %table-sortable !optional;
+		@extend %table--sortable !optional;
 
 		thead {
 			th {

data/stylesheets/components/_tabs.scss

@@ -1,16 +1,54 @@
-// ====================================================================================================================
-// TABS w/ EasyTabs (https://github.com/JangoSteve/jQuery-EasyTabs)
-// ====================================================================================================================
+/* ====================================================================================================================
+
+Tabs
+
+For tabs is used the excellent [**EasyTabs**](http://os.alfajango.com/easytabs/) jQuery plugin,
+see full documentation for more in depth examples.
+
+Markup:
+<div id="tabs" class="tabs">
+  <ul class='etabs'>
+    <li class='tab'><a href="#tabs1-html">HTML Markup</a></li>
+    <li class='tab'><a href="#tabs1-js">Required JS</a></li>
+    <li class='tab'><a href="#tabs1-css">Example CSS</a></li>
+  </ul>
+   <div class='panel-container'>
+  <div id="tabs1-html">
+    <h5>HTML Markup for these tabs</h5>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+  </div>
+  <div id="tabs1-js">
+    <h5>JS for these tabs</h5>
+    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+  </div>
+  <div id="tabs1-css">
+    <h5>CSS Styles for these tabs</h5>
+    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
+  </div>
+</div>
+<script type="text/javascript">
+  $(document).ready(function() {
+    $('#tabs').easytabs({
+      animate: false
+    });
+  });
+</script>
+
+Styleguide 18.
+
+==================================================================================================================== */
+
+
 
 @if $tabs {
 
-	.tab-container {
+	.tabs {
 		margin-bottom: rhythm();
 
 		.etabs {
 			margin: 0;
 			padding: 0;
-			@extend %tab-nav !optional;
+			@extend %tab__nav !optional;
 
 			li {
 				display: inline-block;
@@ -22,10 +60,10 @@
 					padding: $tabs-tab-padding;
 					outline: none;
 					@include border-radius($base-border-radius $base-border-radius 0 0);
-					@extend %tab-btn !optional;
+					@extend %tab__btn !optional;
 
 					&:hover {
-						@extend %tab-btn_hover !optional;
+						@extend %tab__btn__hover !optional;
 					}
 				}
 
@@ -33,7 +71,7 @@
 					a {
 						position: relative;
 						font-weight: bold;
-						@extend %tab-btn_current !optional;
+						@extend %tab__btn__current !optional;
 
 						&:after {
 							@include position(absolute, 0 0px -1px 0px);
@@ -49,7 +87,7 @@
 		}
 
 		.panel-container {
-			@extend %tab-container !optional;
+			@extend %tab__container !optional;
 			@include border-radius(0 $base-border-radius $base-border-radius );
 			> div {padding: $tabs-content-padding;}
 		}