_navs.scss in rapido-css-0.0.4

- old
+ new

@@ -1,30 +1,52 @@
-// ====================================================================================================================
-// NAVS
-// ====================================================================================================================
+/* ====================================================================================================================
 
-@if $navs {
+Navs
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-// Base
-// --------------------------------------------------------------------------------------------------------------------
+All nav components here share the same base markup and styles through the `.nav` class.
 
+* `.nav__title`: Nav titles
+* `.current`: Button for current page
+* `.disabled`: Disabled state style
+* `.divider`: Add horizontal line as a divider
+
+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="#">Friends</a></li>
+  <li class="disabled"><a href="#">Profile</a></li>
+</ul>
+
+.nav--inline.nav--btn - Horizontal and blocky links.
+.nav--inline.nav--btn.nav--pills -  Horizontal and blocky links with rounded corners.
+.nav--vertical.nav--btn - Vertical nav layout and blocky links
+
+Styleguide 12
+
+==================================================================================================================== */
+
+@if $navs {
+
 	.nav {
 		@extend .clearfix;
 		position: relative;
 		display: inline-block;
 
 		&, > ul {
 			list-style: none;
 			margin-bottom: rhythm();
 			margin-left: 0;
 			padding-left: 0;
+			@extend .clearfix;
 		}
 
 		li {
+
 			> a {
-				display: block;
+				display: inline-block;
 				line-height: 1em;
 
 				&:hover, &:focus {
 					text-decoration: none;
 				}
@@ -39,63 +61,71 @@
 				cursor: default;
 			}
 		}
 	}
 
+// Nav Title
+// --------------------------------------------------------------------------------------------------------------------
+
 	.nav__title {
 		@include adjust-font-size-to($milli-size);
 		color: $gray;
 		display: block;
 		font-weight: bold;
 		padding: $navs-padding;
 		padding-left: 0;
 		text-transform: uppercase;
 	}
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
 // Horizontal nav
 // --------------------------------------------------------------------------------------------------------------------
+
 	.nav--inline {
 		& > li,
-		ul > li { float: left;}
+		> ul > li { float: left;}
 	}
 
-
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
 // Vertical nav
 // --------------------------------------------------------------------------------------------------------------------
+
 	.nav--vertical {
 		width: 100%;
+
+		li > a {
+			display: block;
+		}
 	}
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+
 // Nav with blocky links
 // --------------------------------------------------------------------------------------------------------------------
+
 	.nav--btn {
 		li {
 			> a {
 				padding: $navs-padding;
-				@extend %nav-btn;
+				@extend %nav--btn;
 
 				&:hover, &:focus {
-					@extend %nav-btn_hover;
+					@extend %nav--btn__hover;
 				}
 			}
 
-			&.active > a,
-			&.active > a:hover,
-			&.active > a:focus {
-				@extend %nav-btn_active;
+			&.current > a,
+			&.current > a:hover,
+			&.current > a:focus {
+				@extend %nav--btn__current;
 			}
 
 			// Disabled
-			&.disabled > a { @extend %nav-btn_disabled; }
+			&.disabled > a { @extend %nav--btn__disabled; }
 		}
 	}
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+
 // Nav with pills as links
 // --------------------------------------------------------------------------------------------------------------------
+
 	.nav--pills {
 		> li > a {
 			@include border-radius($base-border-radius);
 			margin-right: .25em;
 		}
\ No newline at end of file