rapido-css 0.0.3 → 0.0.4

data/stylesheets/_susy.scss

@@ -1,11 +1,8 @@
-// -----------------------------------------------------------------------------------------------------------------------------
-// Partials
+// Susy
+// ====================================================================================================================
 
-// temporary
 @import "susy/susy_support";
 @import "susy/susy_units";
-
-// permanent
 @import "susy/susy_settings";
 @import "susy/susy_functions";
 @import "susy/susy_grid";

data/stylesheets/components/_alerts.scss

@@ -1,8 +1,21 @@
-// ====================================================================================================================
-// ALERTS
-// ====================================================================================================================
+/* ====================================================================================================================
+
+Alerts
+
+Wrap any text and an optional dismiss button in `.alert` for a basic warning alert message.
+
+Markup:
+<div class="alert">
+  <button type="button" class="close" data-dismiss="alert">&times;</button>
+  <strong>Alert!</strong> Best check yourself, you're not looking too good.
+</div>
+
+Styleguide 1
+
+==================================================================================================================== */
 
 @if $alerts {
+
 	.alert {
 		padding: $alerts-padding;
 		margin-bottom: rhythm();
@@ -17,8 +30,29 @@
 		}
 	}
 
+/* --------------------------------------------------------------------------------------------------------------------
+
+Alert Block
+
+For longer messages, increase the padding on the top and bottom of the alert wrapper by adding `.alert-block`.
+
+Markup:
+<div class="alert alert--block">
+  <button type="button" class="close" data-dismiss="alert">&times;</button>
+  <strong>Error</strong>
+  <p>The field Number is required and must contain a value.</p>
+  <p>The field Product Title is required and must contain a value.</p>
+  <p>The field Total Expenses is required and must contain a value.</p>
+</div>
+
+Styleguide 1.2
+
+-------------------------------------------------------------------------------------------------------------------- */
+
+
 	.alert--block {
-		p, ul { margin-bottom: 0; }
-		p + p {  margin-top: 5px; }
+		* { margin-bottom: 0; }
+		* + * {  margin-top: 5px; }
 	}
+
 }

data/stylesheets/components/_breadcrumbs.scss

@@ -1,8 +1,24 @@
-// ====================================================================================================================
-// BREADCRUMBS
-// ====================================================================================================================
+/* ====================================================================================================================
+
+Breadcrumbs
+
+Add a breadcrumb with a list with class `.breadcrumb`.
+
+	<ul class="breadcrumb">
+	  <li><a href="#">Home</a></li>
+	  <li><a href="#">Library</a></li>
+	  <li class="current">Data</li>
+	</ul>
+
+**`.active`**: Selected element style
+
+Styleguide 2.1
+
+==================================================================================================================== */
+
 
 @if $breadcrumbs {
+
 	.breadcrumb {
 		margin: 0 0 rhythm();
 		list-style: none;
@@ -10,6 +26,7 @@
 
 		> li { @include inline-block(); }
 
-		.active {}
+		.current {@extend %breadcrumb__current;}
 	}
+
 }

data/stylesheets/components/_button-groups.scss

@@ -1,17 +1,30 @@
-// ====================================================================================================================
-// BUTTON GROUPS
-// ====================================================================================================================
+/* ====================================================================================================================
+
+Button Groups
+
+Wrap a series of buttons with `.btn` in `.btn-group`.
+
+Markup:
+<ul class="btn-group">
+  <li><button class="btn btn--default">Left</button></li>
+  <li><button class="btn btn--default">Middle</button></li>
+  <li><button class="btn btn--default">Right</button></li>
+</ul>
+
+Styleguide 4
+
+==================================================================================================================== */
+
 @if $button-groups {
+
 	.btn-group {
 		@extend .clearfix;
 		@include inline-block;
 		margin: 0;
-		// position: relative;
 
 		> * {
 			float: left;
 			list-style-type: none;
-			// position: relative;
 		}
 
 		&[data-width] .btn,
@@ -22,27 +35,18 @@
 		}
 
 		// Space multiple inline groups
-		// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
 		+ .btn-group { margin-left: em(5px); }
 
 		// Float button and reapply border radius
-		// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
 		> .btn,
-		> * .btn {
-			@include border-radius(0);
+		> li .btn {
 			float: left;
+			@include border-radius(0);
 		}
 
-		> * + * 							{ margin-left: -$input-border; }
-		> *:first-child,
-		> *:first-child .btn 				{ @include border-radius($base-border-radius 0 0 $base-border-radius); }
-		> *:last-child,
-		> *:last-child .btn 				{ @include border-radius(0 $base-border-radius $base-border-radius 0); }
-		> *:last-child:first-child,
-		> *:last-child:first-child .btn 	{ @include border-radius($base-border-radius); }
+		> li + li { margin-left: -$input-border; }
 
 		// On hover/focus/active, bring the proper btn to front
-		// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
 		> .btn:hover,
 		> .btn:focus,
 		> .btn:active,
@@ -51,5 +55,26 @@
 		}
 
 	}
+
+// Generic
+// --------------------------------------------------------------------------------------------------------------------
+
+	.btn-group > li:first-child .btn					{ @include border-left-radius($base-border-radius); }
+	.btn-group > li:last-child .btn						{ @include border-right-radius($base-border-radius);	}
+	div.btn-group .btn									{ @include border-radius($base-border-radius); }
+
+// In Forms
+// --------------------------------------------------------------------------------------------------------------------
+
+	.form__controls--multi {
+		.btn-group:first-child > li:first-child .btn	{ }
+		.btn-group:first-child > li:last-child .btn		{ @include border-right-radius(0); }
+		div.btn-group:first-child .btn					{ @include border-right-radius(0); }
+
+		.btn-group:last-child > li:first-child .btn		{ @include border-left-radius(0); }
+		.btn-group:last-child > li:last-child .btn		{ }
+		div.btn-group:last-child > .btn					{ @include border-left-radius(0); }
+	}
+
 }
 

data/stylesheets/components/_buttons.scss

@@ -1,14 +1,25 @@
-// ====================================================================================================================
-// BUTTONS
-// ====================================================================================================================
+/* ====================================================================================================================
 
-@if $buttons {
+Buttons
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-// Base
-// --------------------------------------------------------------------------------------------------------------------
+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>
+<button class="btn btn--default {$modifiers}">Button Element</button>
+
+:hover - Mouse hover state style, also available with `.hover`
+:active - Selected element style, also available with `.active`
+.disabled - Disabled state style.
+
+Styleguide 3
+
+==================================================================================================================== */
+
+@if $buttons {
 
 	.btn {
+		@extend %btn !optional;
 		@include border-radius($base-border-radius);
 		border-style: solid;
 		border-width: $input-border;
@@ -19,9 +30,7 @@
 		text-align: center;
 		vertical-align: middle;
 
-		&:hover, &:focus { text-decoration: none; }
-
-		&:focus { @include tab-focus(); }
+		&:hover, &.hover, &:focus { text-decoration: none; }
 
 		&.active, &:active {outline: 0; }
 
@@ -34,23 +43,37 @@
 		}
 	}
 
+/* --------------------------------------------------------------------------------------------------------------------
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-// Button Colors
-// --------------------------------------------------------------------------------------------------------------------
+Colors
+
+Markup:
+<a href="#" class="btn btn--default">Link Button</a>
+<a href="#" class="btn btn--primary">Link Button</a>
+<a href="#" class="btn btn--secondary">Link Button</a>
+
+Styleguide 3.1
+
+-------------------------------------------------------------------------------------------------------------------- */
+
+	.btn--default       { @extend %btn--default !optional; }
+	.btn--primary       { @extend %btn--primary !optional; }
+	.btn--secondary     { @extend %btn--secondary !optional; }
+
+/* --------------------------------------------------------------------------------------------------------------------
+
+Sizes
+
+Markup:
+<a href="#" class="btn btn--default btn--large">Link Button</a>
+<a href="#" class="btn btn--default">Link Button</a>
+<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
+
+-------------------------------------------------------------------------------------------------------------------- */
 
-	.btn					{ @extend %btn !optional; }
-	.btn--primary 			{ @extend %btn-primary !optional; }
-	.btn--secondary 		{ @extend %btn-secondary !optional; }
-	.btn--warning 			{ @extend %btn-warning !optional; }
-	.btn--danger 			{ @extend %btn-danger !optional; }
-	.btn--info 				{ @extend %btn-info !optional; }
-	.btn--success 			{ @extend %btn-success !optional; }
-	.btn--inverse 			{ @extend %btn-inverse !optional; }
-
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-// Button Sizes
-// --------------------------------------------------------------------------------------------------------------------
 
 	.btn {
 		padding: $btn-padding;
@@ -77,9 +100,27 @@
 	}
 
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+/* --------------------------------------------------------------------------------------------------------------------
+
+Modifiers
+
+Create block level buttons—those that span the full width of a parent.
+
+Markup:
+<a href="#" class="btn btn--default {$modifiers}">Link Button</a>
+<button class="btn btn--default {$modifiers}">Button Element</button>
+
+.btn--block - Create block level buttons—those that span the full width of a parent.
+.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
+
+-------------------------------------------------------------------------------------------------------------------- */
+
 // Block button
 // --------------------------------------------------------------------------------------------------------------------
+
 	.btn--block {
 		display: block;
 		width: 100%;
@@ -92,7 +133,6 @@
 
 	}
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
 // Pill button
 // --------------------------------------------------------------------------------------------------------------------
 
@@ -100,13 +140,13 @@
 		@include border-radius(200px);
 	}
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
 // Link buttons
 // --------------------------------------------------------------------------------------------------------------------
 
 	.btn--link {
 		@include border-radius(0);
-		border-color: transparent;
+		border: 0 transparent;
+		background: none;
 		color: $link-color;
 		cursor: pointer;
 

data/stylesheets/components/_captions.scss

@@ -1,9 +1,27 @@
-// ====================================================================================================================
-// CAPTIONS
-// ====================================================================================================================
+/* ====================================================================================================================
+
+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`.
+
+For positioning are available: `top`, `right`, `bottom`, `left`, `top-left`, `top-right`, `bottom-right`, `bottom-left`.
+
+Markup:
+<figure class="caption" data-position="bottom" data-animation="{$modifiers}" data-content="Caption text.">
+  <img src="http://dummyimage.com/300x200/afe600/fff" />
+</figure>
+
+fade - Add fade-in animation for the caption
+float - Add fade-in and slide-in animation for the caption
+
+Styleguide 5
+
+==================================================================================================================== */
 
 @if $captions {
-	[class^="caption-"] {
+
+	.caption {
 		position: relative;
 		display: inline-block;
 		width: auto;
@@ -18,41 +36,42 @@
 			line-height: rhythm();
 		}
 
-		&[class*="top"]:after 		{ top:0; }
-		&[class*="bottom"]:after 	{ bottom:0; }
-		&[class*="left"]:after 		{ left:0; }
-		&[class*="right"]:after 	{ right: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; }
 
-		&[class$="top"]:after,
-		&[class$="bottom"]:after 	{ left: 0; right: 0; }
+		&[data-position$="top"]:after,
+		&[data-position$="bottom"]:after   { left: 0; right: 0; }
 
-		// Animations
-		// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-		&[class*="fade"],
-		&[class*="float"] {
+        // Animations
+		&[data-animation*="fade"],
+		&[data-animation*="float"] {
 
 			&:after {
 				@include transition();
-				opacity: 0;
+				@include opacity(0);
 				visibility: hidden;
 			}
 
 			&:hover:after {
-				opacity: 1;
+				@include opacity(1);
 				visibility: visible;
 			}
 		}
 
-		// Float Animation
-		&[class*="float"][class*="top"] {
+
+        // Float animation
+		&[data-animation*="float"][data-position*="top"] {
 			&:after { top: -10px; }
 			&:hover:after { top: 0; }
 		}
 
-		&[class*="float"][class*="bottom"] {
+		&[data-animation*="float"][data-position*="bottom"] {
 			&:after { bottom: -10px; }
 			&:hover:after { bottom: 0; }
 		}
 
 	}
+
 }

data/stylesheets/components/_close.scss

@@ -1,7 +1,17 @@
-// ====================================================================================================================
-// CLOSE ICONS
-// ====================================================================================================================
+/* ====================================================================================================================
+
+Close buttons
+
+Markup:
+<a href="#" class="close">&times;</button>
+<button type="button" class="close">&times;</button>
+
+Styleguide 6
+
+==================================================================================================================== */
+
 @if $close {
+
 	.close {
 		float: right;
 		font-size: 1em;
@@ -24,4 +34,5 @@
 		border: 0;
 		-webkit-appearance: none;
 	}
+
 }

data/stylesheets/components/_dropdowns.scss

@@ -1,6 +1,29 @@
-// ====================================================================================================================
-// DROPDOWN MENUS
-// ====================================================================================================================
+/* ====================================================================================================================
+
+Dropdowns
+
+Toggleable, contextual menu for displaying lists of links. Made interactive with the [dropdown JavaScript plugin](http://twitter.github.io/bootstrap/javascript.html#dropdowns).
+
+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}">
+    <a href="#" class="btn btn--default dropdown__toggle " data-toggle="dropdown">
+      Dropdown
+      <span class="dropdown__caret"></span>
+    </a>
+    <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>
+</div>
+
+Styleguide 7
+
+==================================================================================================================== */
 
 @if $dropdowns {
 
@@ -11,34 +34,57 @@
 
 	.dropdown__toggle:focus { outline: 0; }
 
-	// Dropdown arrow/caret
-	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+/* --------------------------------------------------------------------------------------------------------------------
+
+Dropdown arrow/caret
+
+A simple helper class is available to add an arrow for the dropdown button.
+
+Markup: <span class="dropdown__caret"></span>
+
+Styleguide 7.1
+
+-------------------------------------------------------------------------------------------------------------------- */
+
 	.dropdown__caret {
 		@extend %caret !optional;
 	}
 
-	// The dropdown menu (ul)
-	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+/* --------------------------------------------------------------------------------------------------------------------
+
+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>
+
+Styleguide 7.2
+
+-------------------------------------------------------------------------------------------------------------------- */
+
 	.dropdown__menu {
 		@extend %dropdown !optional;
 		@include border-bottom-radius($base-border-radius);
-		@include position(absolute, 100% 0 0 0px);
+		@include transition();
 		border-style: solid;
 		border-width: $input-border;
 		float: left;
 		list-style: none;
 		margin: -$input-border 0 0 0;
+		min-width: 10em;
+		overflow: hidden;
 		z-index: $zindex-dropdown;
-
-		display: none;
-		// @include transition();
-		// max-height: 0;
-		// opacity: 0;
+		display/*\**/: none\9; // Ugly IE8 Hack
 
 		&[data-content] { min-width: em(600px); }
 
-
-		// Aligns the dropdown menu to right
 		&.pull-right {
 			right: 0;
 			left: auto;
@@ -63,15 +109,11 @@
 
 	}
 
-	// Hover/Focus state
-	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
 	.dropdown__menu > li > a:hover,
 	.dropdown__menu > li > a:focus {
 		text-decoration: none;
 	}
 
-	// Active state
-	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
 	.dropdown__menu > .active > a,
 	.dropdown__menu > .active > a:hover,
 	.dropdown__menu > .active > a:focus {
@@ -79,14 +121,12 @@
 		outline: 0;
 	}
 
-	// Disabled state
-	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
 	.dropdown__menu > .disabled > a,
 	.dropdown__menu > .disabled > a:hover,
 	.dropdown__menu > .disabled > a:focus {
 		color: $grayLight;
 	}
-	// Nuke hover/focus effects
+
 	.dropdown__menu > .disabled > a:hover,
 	.dropdown__menu > .disabled > a:focus {
 		text-decoration: none;
@@ -95,21 +135,29 @@
 		cursor: default;
 	}
 
-	// Open state for the dropdown
-	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+
+	// 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 ;
 
 		.dropdown__toggle {
-			@extend %dropdown-open !optional;
+			@extend %dropdown--open !optional;
 			@include border-bottom-radius(0 !important);
 			z-index: $zindex-dropdown + 1;
 		}
 
 		.dropdown__menu {
-			display: block;
-			// max-height: 666px;
-			// opacity: 1;
+			@include opacity(1);
+			display/*\**/: block\9; // Ugly IE8 Hack
+			max-height: $dropdowns-height;
 		}
 
 	}