rapido-css 0.0.1

data/stylesheets/components/_modals.scss

@@ -0,0 +1,271 @@
+.modal { display: none; }
+
+@if $modal {
+
+	// Resets
+	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+	%modal-reset {
+		padding: 0;
+		margin: 0;
+		border: 0;
+		vertical-align: top;
+		list-style-type: none;
+	}
+
+	.fancybox-wrap,
+	.fancybox-wrap iframe,
+	.fancybox-wrap object,
+	.fancybox-skin,
+	.fancybox-outer,
+	.fancybox-inner,
+	.fancybox-image,
+	.fancybox-nav span,
+	.fancybox-tmp {
+		@extend %modal-reset;
+	}
+
+
+	// Container
+	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+
+	// Overlay | 1st level
+	.fancybox-overlay {
+		@extend %modal-overlay !optional;
+		@include position(absolute, 0px 0 0 0px);
+		display: none;
+		overflow: hidden;
+		z-index: ($zindex-modal - 1);
+
+		&.fancybox-overlay-fixed {
+			@include position(fixed, 0 0px 0px 0 );
+		}
+
+		// Wrap | 2nd Level
+		.fancybox-wrap {
+			@include position(absolute, 0px 0 0 0px);
+			z-index: $zindex-modal;
+
+			&.fancybox-opened { z-index: ($zindex-modal + 1); }
+
+			// for Iframes
+			&.fancybox-type-iframe .fancybox-inner { -webkit-overflow-scrolling: touch; }
+
+			// for Iframes, Inline and Ajax
+			&.fancybox-type-inline,
+			&.fancybox-type-iframe,
+			&.fancybox-type-ajax {
+				.fancybox-close {
+					@extend %modal-close-alt !optional;
+				}
+			}
+
+			// Skin | 3rd Level
+			.fancybox-skin {
+				@extend %modal-skin !optional;
+				position: relative;
+				padding: 0 !important;
+
+				// Outer | 4th Level
+				.fancybox-outer {
+					position: relative;
+
+					// Inner | 5th Level
+					.fancybox-inner {
+						position: relative;
+						overflow: hidden;
+
+					} // 5thst
+				} // 4th
+			} // 3rd
+		} // 2nd
+	} // 1st
+
+
+	// Backtground temp
+	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+	.fancybox-tmp {
+		@include position(absolute, -9999px 0 0 -9999px);
+		visibility: hidden;
+		max-width: 99999px;
+		max-height: 99999px;
+		overflow: visible !important;
+	}
+
+
+	.fancybox-lock { overflow: hidden; }
+
+	.fancybox-lock .fancybox-overlay {
+		overflow: auto;
+		overflow-y: scroll;
+	}
+
+
+	// Content
+	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+	.fancybox-error {
+		margin: 0;
+		padding: $modals-error-padding;
+		white-space: nowrap;
+	}
+
+	.fancybox-image,
+	.fancybox-iframe {
+		display: block;
+		@include square(100%);
+	}
+
+	.fancybox-image {
+		max-width: 100%;
+		max-height: 100%;
+		@include border-radius($base-border-radius);
+	}
+
+
+	#fancybox-loading {
+		@include position(fixed, 50% 0 0 50%);
+		@extend %modal-loading !optional;
+		cursor: pointer;
+		z-index: $zindex-modal +4;
+	}
+
+
+	// Buttons and Navigation
+	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+	.fancybox-close {
+		@extend %modal-btn !optional;
+		@extend %modal-close !optional;
+		@include border-radius($base-border-radius);
+		z-index: ($zindex-modal + 3);
+	}
+
+	.fancybox-nav {
+		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+		@include position(absolute, 0px 0 0 0);
+		@include size(100%, 40%);
+		z-index: ($zindex-modal + 2);
+
+		span {
+			@extend %modal-btn !optional;
+			@extend %modal-nav !optional;
+			@include position(absolute, 50% 0 0 0);
+			visibility: hidden;
+			z-index: ($zindex-modal + 2);
+		}
+
+		&:hover span { visibility: visible; }
+
+		&.fancybox-prev {
+			left: 0;
+			span { left: 0; }
+		}
+
+		&.fancybox-next {
+			right: 0;
+			span { right: 0; }
+		}
+
+	}
+
+	// Titles
+	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+	.fancybox-title {
+		visibility: hidden;
+		position: relative;
+		text-shadow: none;
+		z-index: ($zindex-modal + 3);
+	}
+
+	.fancybox-opened .fancybox-title {
+		visibility: visible;
+	}
+
+	.fancybox-title-float-wrap {
+		@include position(absolute, 0 50% 0px 0);
+		margin-bottom: em(-35px);
+		text-align: center;
+		z-index: ($zindex-modal + 3);
+
+		.child {
+			@include alpha-color(#000, .8, background);
+			@include border-radius($base-border-radius);
+			display: inline-block;
+			margin-right: -100%;
+			padding: em(2px) em($input-padding-side);
+			color: #FFF;
+			font-weight: bold;
+			white-space: nowrap;
+		}
+	}
+
+	.fancybox-title-outside-wrap {
+		position: relative;
+		margin-top: em($input-padding-top);
+		color: #fff;
+	}
+
+	.fancybox-title-over-wrap {
+		@include position(absolute, 0 0 0px 0px);
+		@extend %modal-caption !optional;
+	}
+
+}
+
+@if $modal-buttons {
+	#fancybox-buttons {
+		@include position(fixed, 0 0 0 0px);
+		width: 100%;
+		z-index: ($zindex-modal + 3);
+		&.top { top: em(10px); }
+		&.bottom { bottom: em(10px); }
+
+		ul {
+			@extend %modal-btnbar-size !optional;
+			display: block;
+			list-style: none;
+			margin: 0 auto;
+			li {
+				float: left;
+				margin: 0;
+				a {
+					@extend %modal-btn !optional;
+					position: relative;
+					&:hover { opacity: 1; }
+					&:after { @include position(absolute, 0px 0px 0 0px); }
+				}
+			}
+		}
+	}
+}
+
+@if $modal-thumbs {
+	#fancybox-thumbs {
+		@include position(fixed, 0 0 0 0px);
+		overflow: hidden;
+		width: 100%;
+		z-index: ($zindex-modal + 3);
+
+		&.bottom { bottom: em(10px); }
+		&.top { top: em(10px); }
+
+		ul {
+			@extend %modal-reset;
+			position: relative;
+
+			li {
+				float: left;
+				margin-right: em(4px);
+				opacity: 0.5;
+
+				&:hover { opacity: 0.75; }
+				&.active { opacity: 1; }
+
+				a {
+					display: block;
+					overflow: hidden;
+					text-align: center;
+				}
+
+			}
+		}
+	}
+}

data/stylesheets/components/_navs.scss

@@ -0,0 +1,102 @@
+
+@if $navs {
+
+	// Navs
+	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+	[class^="nav"] {
+		@extend .clearfix;
+		list-style: none;
+		margin-bottom: rhythm();
+		margin-left: 0;
+		padding-left: 0;
+
+		li {
+
+			> a {
+				display: block;
+				line-height: 1em;
+
+				&:hover, &:focus {
+					text-decoration: none;
+				}
+
+				img { max-width: none; }
+			}
+
+			&.disabled > a:hover,
+			&.disabled > a:focus {
+				text-decoration: none;
+				background-color: transparent;
+				cursor: default;
+			}
+		}
+
+		&[class*="-btn"] {
+
+			li {
+
+				> a {
+					padding: $navs-padding;
+					@extend %nav-btn;
+
+					&:hover, &:focus {
+						@extend %nav-btn_hover;
+					}
+
+				}
+
+				&.active > a,
+				&.active > a:hover,
+				&.active > a:focus {
+					@extend %nav-btn_active;
+				}
+
+				// 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;
+			}
+
+			.divider { @include nav-divider(); }
+		}
+
+		// 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; }
+		}
+
+		// Position
+		// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+		&[class$="-right"]{ float: right; }
+
+
+	}
+
+}

data/stylesheets/components/_pager.scss

@@ -0,0 +1,56 @@
+//
+// Pager pagination
+// --------------------------------------------------
+
+@if $pager {
+
+	.pager {
+		margin: rhythm() 0;
+		list-style: none;
+		text-align: center;
+		@include clearfix();
+
+
+		li {
+			display: inline;
+
+			a,
+			span {
+				display: inline-block;
+				padding: $pager-padding;
+				line-height: 1em;
+				border-width: 1px;
+				border-style: solid;
+				@extend %pager-btn !optional;
+				@include border-radius($base-border-radius);
+			}
+
+			a:hover,
+			a:focus {
+				text-decoration: none;
+				@extend %pager-btn_hover !optional;
+			}
+		}
+
+		[rel="next"],
+		.next > a,
+		.next > span {
+			float: right;
+		}
+
+		[rel="prev"],
+		.previous > a,
+		.previous > span {
+			float: left;
+		}
+
+		.disabled > a,
+		.disabled > a:hover,
+		.disabled > a:focus,
+		.disabled > span {
+			cursor: default;
+			@extend %pager-btn_disabled !optional;
+		}
+
+	}
+}

data/stylesheets/components/_pagination.scss

@@ -0,0 +1,90 @@
+//
+// Pagination (multiple pages)
+// --------------------------------------------------
+@if $pagination {
+
+	[class^="pagination"] {
+		margin: rhythm() 0;
+
+		> * {
+			@include border-radius($base-border-radius);
+			@include inline-block();
+			margin-bottom: 0;
+			margin-left: $input-border;
+			margin-left: 0;
+
+			li {
+				display: inline-block;
+				// float: left;
+
+				a,
+				span {
+					display: inline-block;
+					padding: $pagination-padding;
+					line-height: 1em;
+					text-decoration: none;
+					border-width: $input-border;
+					border-left-width: 0;
+					border-style: solid;
+					margin-left: -$input-border;
+					@extend %pagination_btn !optional;
+				}
+			}
+
+
+			li > a:hover,
+			li > a:focus {
+				@extend %pagination_btn-hover !optional;
+			}
+
+			// Bootstrap
+			.active > a,
+			.active > a:hover,
+			.active > span,
+			.active > span:hover,
+
+			// WP Paginate
+			.current,
+			.current:hover {
+				@extend %pagination_btn-active !optional;
+			}
+
+			.disabled > span,
+			.disabled > a,
+			.disabled > a:hover,
+			.disabled > a:focus {
+				@extend %pagination_btn-disabled !optional;
+			}
+
+			.active > a,
+			.active > span,
+			.disabled > span,
+			.disabled > a,
+			.disabled > a:hover,
+			.disabled > a:focus {
+				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);
+			}
+
+			li:last-child > a,
+			li:last-child > span {
+				@include border-right-radius($base-border-radius);
+			}
+		}
+
+	}
+}

data/stylesheets/components/_pills.scss

@@ -0,0 +1,91 @@
+//
+// Labels and badges
+// --------------------------------------------------
+
+@if $pills {
+
+	// Base classes
+	.label,
+	.badge {
+		// font-size: $baseFontSize * .846;
+		// font-weight: bold;
+		// line-height: 14px; // ensure proper line-height if floated
+		// text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+		@extend %pill !optional;
+		display: inline-block;
+		padding: $pills-padding;
+		vertical-align: baseline;
+		white-space: nowrap;
+	}
+	// Set unique padding and border-radii
+	.label {
+		@include border-radius($base-border-radius);
+	}
+	.badge {
+		// padding-left: 9px;
+		// padding-right: 9px;
+		@include border-radius(20px);
+	}
+
+	// Empty labels/badges collapse
+	.label,
+	.badge {
+		&:empty {
+			display: none;
+		}
+	}
+
+	// Hover/focus state, but only for links
+	a {
+		&.label:hover,
+		&.label:focus,
+		&.badge:hover,
+		&.badge:focus {
+			color: $white;
+			text-decoration: none;
+			cursor: pointer;
+		}
+	}
+
+	// Colors
+	// Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute)
+	// @each $item in label, badge {
+	// 	 // Important (red)
+	// 	 .#{$item}-important				 { background-color: $errorText; }
+	// 	 .#{$item}-important[href]	 { background-color: darken($errorText, 10%); }
+	// 	 // Warnings (orange)
+	// 	 .#{$item}-warning					 { background-color: $orange; }
+	// 	 .#{$item}-warning[href]		 { background-color: darken($orange, 10%); }
+	// 	 // Success (green)
+	// 	 .#{$item}-success					 { background-color: $successText; }
+	// 	 .#{$item}-success[href]		 { background-color: darken($successText, 10%); }
+	// 	 // Info (turquoise)
+	// 	 .#{$item}-info							{ background-color: $infoText; }
+	// 	 .#{$item}-info[href]				{ background-color: darken($infoText, 10%); }
+	// 	 // Inverse (black)
+	// 	 .#{$item}-inverse					 { background-color: $grayDark; }
+	// 	 .#{$item}-inverse[href]		 { background-color: darken($grayDark, 10%); }
+	// }
+
+	// Quick fix for labels/badges in buttons
+	.btn {
+		.label,
+		.badge {
+			margin: -.2em -.35em 0 .35em ;
+		}
+	}
+
+	// .btn {
+	//	 .label,
+	//	 .badge {
+	//		 position: relative;
+	//		 top: -1px;
+	//	 }
+	// }
+	// .btn-mini {
+	//	 .label,
+	//	 .badge {
+	//		 top: 0;
+	//	 }
+	// }
+}