rapido-css 0.0.1 → 0.0.2.1

data/stylesheets/components/_labels.scss

@@ -0,0 +1,39 @@
+// ====================================================================================================================
+// LABELS & BADGES
+// ====================================================================================================================
+
+@if $labels {
+
+	.label,
+	.badge {
+		@extend %pill !optional;
+		display: inline-block;
+		padding: $pills-padding;
+		vertical-align: baseline;
+		white-space: nowrap;
+	}
+
+	.label { @include border-radius($base-border-radius); }
+	.badge { @include border-radius(20px); }
+
+	.label, .badge {
+		&:empty { display: none; }
+	}
+
+	a {
+		&.label:hover,
+		&.label:focus,
+		&.badge:hover,
+		&.badge:focus {
+			color: $white;
+			text-decoration: none;
+			cursor: pointer;
+		}
+	}
+
+	.btn {
+		.label, .badge {
+			margin: -.2em -.35em 0 .35em ;
+		}
+	}
+}

data/stylesheets/components/_modals.scss

@@ -1,9 +1,14 @@
+// ====================================================================================================================
+// MODALS
+// ====================================================================================================================
+
 .modal { display: none; }
 
 @if $modal {
 
-	// Resets
-	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// Resets
+// --------------------------------------------------------------------------------------------------------------------
 	%modal-reset {
 		padding: 0;
 		margin: 0;
@@ -24,9 +29,9 @@
 		@extend %modal-reset;
 	}
 
-
-	// Container
-	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// Container
+// --------------------------------------------------------------------------------------------------------------------
 
 	// Overlay | 1st level
 	.fancybox-overlay {
@@ -80,9 +85,10 @@
 		} // 2nd
 	} // 1st
 
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// Backtground temp
+// --------------------------------------------------------------------------------------------------------------------
 
-	// Backtground temp
-	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
 	.fancybox-tmp {
 		@include position(absolute, -9999px 0 0 -9999px);
 		visibility: hidden;
@@ -99,9 +105,10 @@
 		overflow-y: scroll;
 	}
 
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// Content
+// --------------------------------------------------------------------------------------------------------------------
 
-	// Content
-	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
 	.fancybox-error {
 		margin: 0;
 		padding: $modals-error-padding;
@@ -128,9 +135,10 @@
 		z-index: $zindex-modal +4;
 	}
 
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// Buttons and Navigation
+// --------------------------------------------------------------------------------------------------------------------
 
-	// Buttons and Navigation
-	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
 	.fancybox-close {
 		@extend %modal-btn !optional;
 		@extend %modal-close !optional;
@@ -166,8 +174,10 @@
 
 	}
 
-	// Titles
-	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// Titles
+// --------------------------------------------------------------------------------------------------------------------
+
 	.fancybox-title {
 		visibility: hidden;
 		position: relative;
@@ -210,6 +220,9 @@
 
 }
 
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// Modal Buttons
+// --------------------------------------------------------------------------------------------------------------------
 @if $modal-buttons {
 	#fancybox-buttons {
 		@include position(fixed, 0 0 0 0px);
@@ -237,6 +250,9 @@
 	}
 }
 
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// Modal Thumbs
+// --------------------------------------------------------------------------------------------------------------------
 @if $modal-thumbs {
 	#fancybox-thumbs {
 		@include position(fixed, 0 0 0 0px);

data/stylesheets/components/_navs.scss

@@ -1,9 +1,14 @@
+// ====================================================================================================================
+// NAVS
+// ====================================================================================================================
 
 @if $navs {
 
-	// Navs
-	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-	[class^="nav"] {
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// Base
+// --------------------------------------------------------------------------------------------------------------------
+
+	.nav {
 		@extend .clearfix;
 		list-style: none;
 		margin-bottom: rhythm();
@@ -11,7 +16,6 @@
 		padding-left: 0;
 
 		li {
-
 			> a {
 				display: block;
 				line-height: 1em;
@@ -30,73 +34,67 @@
 				cursor: default;
 			}
 		}
+	}
 
-		&[class*="-btn"] {
-
-			li {
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// Horizontal nav
+// --------------------------------------------------------------------------------------------------------------------
+	.nav--inline {
+		li { float: left;}
+	}
 
-				> a {
-					padding: $navs-padding;
-					@extend %nav-btn;
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// Vertical nav
+// --------------------------------------------------------------------------------------------------------------------
+	.nav--vertical {
+		.title {
+			@include adjust-font-size-to($milli-size);
+			color: $gray;
+			display: block;
+			font-weight: bold;
+			padding: $input-padding;
+			text-transform: uppercase;
+		}
 
-					&:hover, &:focus {
-						@extend %nav-btn_hover;
-					}
+		.divider { @include nav-divider(); }
+	}
 
-				}
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// Nav with blocky links
+// --------------------------------------------------------------------------------------------------------------------
+	.nav--btn {
+		li {
+			> a {
+				padding: $navs-padding;
+				@extend %nav-btn;
 
-				&.active > a,
-				&.active > a:hover,
-				&.active > a:focus {
-					@extend %nav-btn_active;
+				&:hover, &:focus {
+					@extend %nav-btn_hover;
 				}
-
-				// Disabled
-				&.disabled > a { @extend %nav-btn_disabled; }
 			}
 
-		}
-
-
-		// Horizontal nav
-		// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-		&[class*="-o"] {
-			li { float: left;}
-		}
-
-		// Vertical nav
-		// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-		&[class*="-v"] {
-
-			.title {
-				@include adjust-font-size-to($milli-size);
-				color: $gray;
-				display: block;
-				font-weight: bold;
-				padding: $input-padding;
-				text-transform: uppercase;
+			&.active > a,
+			&.active > a:hover,
+			&.active > a:focus {
+				@extend %nav-btn_active;
 			}
 
-			.divider { @include nav-divider(); }
+			// Disabled
+			&.disabled > a { @extend %nav-btn_disabled; }
 		}
+	}
 
-		// Pills
-		// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-		&[class*="-pills"] {
-			> li > a {
-				@include border-radius($base-border-radius);
-				margin-right: em(4px);
-			}
-
-			&[class*="-v-"] > li > a { margin-bottom: em(4px);  }
-			&[class*="-v-"] > li:last-child > a { margin-bottom: 0; }
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// Nav with pills as links
+// --------------------------------------------------------------------------------------------------------------------
+	.nav--pills {
+		> li > a {
+			@include border-radius($base-border-radius);
+			margin-right: em(4px);
 		}
 
-		// Position
-		// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-		&[class$="-right"]{ float: right; }
-
-
+		&[class*="vertical"] > li > a { margin-bottom: em(4px);  }
+		&[class*="vertical"] > li:last-child > a { margin-bottom: 0; }
 	}
 
 }

data/stylesheets/components/_pager.scss

@@ -1,28 +1,31 @@
-//
-// Pager pagination
-// --------------------------------------------------
+// ====================================================================================================================
+// PAGER PAGINATION
+// ====================================================================================================================
 
 @if $pager {
 
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// Base
+// --------------------------------------------------------------------------------------------------------------------
+
 	.pager {
-		margin: rhythm() 0;
+		@include clearfix();
 		list-style: none;
+		margin: rhythm() 0;
 		text-align: center;
-		@include clearfix();
-
 
 		li {
 			display: inline;
 
 			a,
 			span {
+				@include border-radius($base-border-radius);
+				border-style: solid;
+				border-width: 1px;
 				display: inline-block;
-				padding: $pager-padding;
 				line-height: 1em;
-				border-width: 1px;
-				border-style: solid;
+				padding: $pager-padding;
 				@extend %pager-btn !optional;
-				@include border-radius($base-border-radius);
 			}
 
 			a:hover,

data/stylesheets/components/_pagination.scss

@@ -1,9 +1,14 @@
-//
-// Pagination (multiple pages)
-// --------------------------------------------------
+// ====================================================================================================================
+// PAGINATION (multiple pages)
+// ====================================================================================================================
+
 @if $pagination {
 
-	[class^="pagination"] {
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// Base
+// --------------------------------------------------------------------------------------------------------------------
+
+	.pagination {
 		margin: rhythm() 0;
 
 		> * {
@@ -15,10 +20,8 @@
 
 			li {
 				display: inline-block;
-				// float: left;
 
-				a,
-				span {
+				a, span {
 					display: inline-block;
 					padding: $pagination-padding;
 					line-height: 1em;
@@ -65,26 +68,28 @@
 				cursor: default;
 			}
 		}
+	}
 
-		// Alignment
-		// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-		&[class*="-center"] {text-align: center; }
-		&[class*="-right"] 	{text-align: right; }
-
-		// Rounded sides
-		// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-		&[class*="-rounded"] {
-			li:first-child > a,
-			li:first-child > span {
-				border-left-width: 1px;
-				@include border-left-radius($base-border-radius);
-			}
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// Alignment
+// --------------------------------------------------------------------------------------------------------------------
+	.pagination--center {text-align: center; }
+	.pagination--right 	{text-align: right; }
 
-			li:last-child > a,
-			li:last-child > span {
-				@include border-right-radius($base-border-radius);
-			}
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// Rounded sides
+// --------------------------------------------------------------------------------------------------------------------
+	.pagination--rounded {
+		li:first-child > a,
+		li:first-child > span {
+			border-left-width: 1px;
+			@include border-left-radius($base-border-radius);
 		}
 
+		li:last-child > a,
+		li:last-child > span {
+			@include border-right-radius($base-border-radius);
+		}
 	}
+
 }

data/stylesheets/components/_responsive-navs.scss

@@ -1,3 +1,8 @@
+// ====================================================================================================================
+// RESPONSIVE NAVS w/ ResposnivNav,js (https://github.com/raffone/responsive-nav.js)
+// ====================================================================================================================
+
+
 @if $responsive-navs {
 	.responsive-nav {
 		position: relative;

data/stylesheets/components/_sliders.scss

@@ -1,6 +1,12 @@
+// ====================================================================================================================
+// SLIDERS w/ BxSlider (https://github.com/wandoledzep/bxslider-4)
+// ====================================================================================================================
+
 @if $slider {
 
-	// Wrapper | 1st level
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// Base
+// --------------------------------------------------------------------------------------------------------------------
 	.bx-wrapper {
 		position: relative;
 		padding: 0;
@@ -14,57 +20,54 @@
 		}
 
 		ul {@extend .list_style_none;}
-		// ul, li {margin: 0;}
 	}
 
-	// Viewport  | 2nd level
 	.bx-viewport { }
 
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// Directions
+// --------------------------------------------------------------------------------------------------------------------
+	.bx-controls-direction {
 
-	// Controls  | 2nd level
-	// .bx-controls {
-
-		// Directions
-		//--------------------------------
-		.bx-controls-direction {
-
-			a {
-				@extend %slider-btn !optional;
-				@include position(absolute, 50% 0 0 0);
+		a {
+			@extend %slider-btn !optional;
+			@include position(absolute, 50% 0 0 0);
 
-				z-index: 200;
+			z-index: 200;
 
-				i {font-style: normal;}
-				span {@include hide-text;}
+			i {font-style: normal;}
+			span {@include hide-text;}
 
-				&.disabled { display: none; }
+			&.disabled { display: none; }
 
-				&.bx-prev { left: 0; }
-				&.bx-next { right: 0; }
-			}
+			&.bx-prev { left: 0; }
+			&.bx-next { right: 0; }
+		}
 
 
-		}
+	}
 
-		// Pager
-		//--------------------------------
-		.bx-pager {
-			width: 100%;
-			text-align: center;
-			@extend %slider-pager !optional;
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// Pager
+// --------------------------------------------------------------------------------------------------------------------
+	.bx-pager {
+		width: 100%;
+		text-align: center;
+		@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
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// Loading
+// --------------------------------------------------------------------------------------------------------------------
 	.bx-loading {
 		@include square(100%);
 		@include position(absolute, 0px 0 0 0px);
@@ -72,6 +75,9 @@
 		z-index: 2000;
 	}
 
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// Captions
+// --------------------------------------------------------------------------------------------------------------------
 	.bx-caption {
 		@include position(absolute, 0 0 0px 0px);
 		width: 100%;
@@ -82,5 +88,4 @@
 		}
 	}
 
-
 }