rapido-css 0.1.1 → 0.1.2

data/stylesheets/_default-styles.scss

@@ -1,4 +1,4 @@
-/* ====================================================================================================================
+/*
 
 Default Styles
 
@@ -10,11 +10,11 @@ to enable or disable.
 
 Styleguide 30
 
-==================================================================================================================== */
+*/
 
 @if $default-styles {
 
-/* --------------------------------------------------------------------------------------------------------------------
+/*
 
 Titles
 
@@ -27,16 +27,16 @@ Titles
 
 Styleguide 30.1
 
--------------------------------------------------------------------------------------------------------------------- */
+*/
 
-	%h1 {}
-	%h2 {}
-	%h3 {}
-	%h4 {}
-	%h5 {}
-	%h6 {}
+    %h1 {}
+    %h2 {}
+    %h3 {}
+    %h4 {}
+    %h5 {}
+    %h6 {}
 
-/* --------------------------------------------------------------------------------------------------------------------
+/*
 
 Inputs and Selects
 
@@ -46,30 +46,30 @@ Inputs and Selects
 
 Styleguide 30.2
 
--------------------------------------------------------------------------------------------------------------------- */
+*/
 
-	%input {
-		border-color: $gray;
-		background-color: $grayLighter;
-		@include box-shadow(inset 0 1px 0 #fff);
-		@include background-image(linear-gradient(bottom, $white 0%, $grayLighter 100%));
+    %input {
+        border-color: $gray;
+        background-color: $grayLighter;
+        @include box-shadow(inset 0 1px 0 #fff);
+        @include background-image(linear-gradient(bottom, $white 0%, $grayLighter 100%));
 
-		&:focus {
-			@include background-image(linear-gradient(bottom, $white 50%, $grayLighter 100%));
-		}
-	}
+        &:focus {
+            @include background-image(linear-gradient(bottom, $white 50%, $grayLighter 100%));
+        }
+    }
 
-	%input-addon {
-		color: $text-color;
-		border-color: $grayLight;
-		background-color: $grayLighter;
-	}
+    %input-addon {
+        color: $text-color;
+        border-color: $grayLight;
+        background-color: $grayLighter;
+    }
 
     %select {
         @extend %input;
     }
 
-/* --------------------------------------------------------------------------------------------------------------------
+/*
 
 Buttons
 
@@ -83,103 +83,103 @@ Buttons
 
 Styleguide 30.3
 
--------------------------------------------------------------------------------------------------------------------- */
+*/
 
     // Default
-	%btn--default {
-		color: $text-color;
-		border-color: $gray;
-		background-color: $grayLight;
-		@include box-shadow(inset 0 1px 0 rgba(255,255,255,.5));
-		@include background-image(linear-gradient(bottom, $grayLight 0%, $grayLighter 100%));
-
-		// Hover/focus state
-		&:hover,
-		&.hover,
-		&:focus {
-			color: inherit;
-			@include background-image(linear-gradient(bottom, $grayLight 0%, $white 100%));
-		}
-
-		// Active state
-		&.active,
-		&:active {
-			@include background-image(linear-gradient(top, $grayLight 0%, $grayLighter 100%));
-		}
-	}
-
-	%btn__disabled {
-		color: $grayLight;
-		border-color: $grayLight;
-		background: #FFF;
-	}
-
-	%btn__current {
-		@include box-shadow(0 0 0);
-		background: $gray;
-		color: $white;
-	}
-
-	%btn--primary {
-		color: #fff;
-		border-color: darken(green, 10%);
-		background-color: green;
-		@include background-image(linear-gradient(bottom, darken(green, 10%) 0%, green 100%));
-
-		// Hover/focus state
-		&:hover,
-		&.hover,
-		&:focus {
-			color: #fff;
-			@include background-image(linear-gradient(bottom, darken(green, 10%) 0%, lighten(green, 6) 100%));
-		}
-
-		// Active state
-		&.active,
-		&:active {
-			@include background-image(linear-gradient(top, darken(green, 10%) 0%, green 100%));
-		}
-	}
-
-	%btn--secondary {
-		color: #fff;
-		border-color: darken(red, 10%);
-		background-color: red;
-		@include background-image(linear-gradient(bottom, darken(red, 10%) 0%, red 100%));
-
-		// Hover/focus state
-		&:hover,
-		&.hover,
-		&:focus {
-			color: #fff;
-			@include background-image(linear-gradient(bottom, darken(red, 10%) 0%, lighten(red, 20) 100%));
-		}
-
-		// Active state
-		&.active,
-		&.hover,
-		&:active {
-			@include background-image(linear-gradient(bottom, darken(red, 10%) 0%, red 100%));
-		}
-	}
+    %btn--default {
+        color: $text-color;
+        border-color: $gray;
+        background-color: $grayLight;
+        @include box-shadow(inset 0 1px 0 rgba(255,255,255,.5));
+        @include background-image(linear-gradient(bottom, $grayLight 0%, $grayLighter 100%));
+
+        // Hover/focus state
+        &:hover,
+        &.hover,
+        &:focus {
+            color: inherit;
+            @include background-image(linear-gradient(bottom, $grayLight 0%, $white 100%));
+        }
 
-    // Generic style for buttons For the scripts
-	%btn--scripts {
-		@include alpha-color(#000, .6, background);
-		color: #fff;
-		cursor: pointer;
-		display: block;
-		text-align: center;
-		text-decoration: none;
+        // Active state
+        &.active,
+        &:active {
+            @include background-image(linear-gradient(top, $grayLight 0%, $grayLighter 100%));
+        }
+    }
 
-		&:hover {
-			color: #fff;
-			@include alpha-color(#000, .8, background);
-		}
-	}
+    %btn__disabled {
+        color: $grayLight;
+        border-color: $grayLight;
+        background: #FFF;
+    }
 
+    %btn__current {
+        @include box-shadow(0 0 0);
+        background: $gray;
+        color: $white;
+    }
 
-/* --------------------------------------------------------------------------------------------------------------------
+    %btn--primary {
+        color: #fff;
+        border-color: darken(green, 10%);
+        background-color: green;
+        @include background-image(linear-gradient(bottom, darken(green, 10%) 0%, green 100%));
+
+        // Hover/focus state
+        &:hover,
+        &.hover,
+        &:focus {
+            color: #fff;
+            @include background-image(linear-gradient(bottom, darken(green, 10%) 0%, lighten(green, 6) 100%));
+        }
+
+        // Active state
+        &.active,
+        &:active {
+            @include background-image(linear-gradient(top, darken(green, 10%) 0%, green 100%));
+        }
+    }
+
+    %btn--secondary {
+        color: #fff;
+        border-color: darken(red, 10%);
+        background-color: red;
+        @include background-image(linear-gradient(bottom, darken(red, 10%) 0%, red 100%));
+
+        // Hover/focus state
+        &:hover,
+        &.hover,
+        &:focus {
+            color: #fff;
+            @include background-image(linear-gradient(bottom, darken(red, 10%) 0%, lighten(red, 20) 100%));
+        }
+
+        // Active state
+        &.active,
+        &.hover,
+        &:active {
+            @include background-image(linear-gradient(bottom, darken(red, 10%) 0%, red 100%));
+        }
+    }
+
+    // Generic style for buttons For the scripts
+    %btn--scripts {
+        @include alpha-color(#000, .6, background);
+        color: #fff;
+        cursor: pointer;
+        display: block;
+        text-align: center;
+        text-decoration: none;
+
+        &:hover {
+            color: #fff;
+            @include alpha-color(#000, .8, background);
+        }
+    }
+
+
+/*
 
 Captions
 
@@ -187,15 +187,15 @@ Captions
 
 Styleguide 30.4
 
--------------------------------------------------------------------------------------------------------------------- */
+*/
 
-	%caption {
-		@include alpha-color(#000, .8, background);
-		color: #fff;
-		padding: $captions-padding;
-	}
+    %caption {
+        @include alpha-color(#000, .8, background);
+        color: #fff;
+        padding: $captions-padding;
+    }
 
-/* --------------------------------------------------------------------------------------------------------------------
+/*
 
 Labels (Badges & Pills)
 
@@ -203,14 +203,14 @@ Labels (Badges & Pills)
 
 Styleguide 30.5
 
--------------------------------------------------------------------------------------------------------------------- */
+*/
 
-	%pill {
-		@include alpha-color(#000, .35);
-		color: $white;
-	}
+    %pill {
+        @include alpha-color(#000, .35);
+        color: $white;
+    }
 
-/* --------------------------------------------------------------------------------------------------------------------
+/*
 
 Dropdowns
 
@@ -219,33 +219,33 @@ Dropdowns
 
 Styleguide 30.6
 
--------------------------------------------------------------------------------------------------------------------- */
+*/
 
 
 
-	%dropdown {
-		background: $grayLighter;
-		border-color: $gray;
+    %dropdown {
+        background: $grayLighter;
+        border-color: $gray;
 
-		.divider { @include nav-divider($gray); margin-top: -1px }
+        .divider { @include nav-divider($gray); margin-top: -1px }
 
-		> li > a,
-		> li > label { border-bottom: 1px dotted $gray; }
+        > li > a,
+        > li > label { border-bottom: 1px dotted $gray; }
 
-		> li > a:hover,
-		> li > a:focus {
-			text-decoration: none;
-			background-color: $grayLight;
-		}
-	}
+        > li > a:hover,
+        > li > a:focus {
+            text-decoration: none;
+            background-color: $grayLight;
+        }
+    }
 
-	%dropdown--open {
-		background: $grayLighter;
-		border-bottom: 1px solid $grayLighter;
-	}
+    %dropdown--open {
+        background: $grayLighter;
+        border-bottom: 1px solid $grayLighter;
+    }
 
 
-/* --------------------------------------------------------------------------------------------------------------------
+/*
 
 Tables
 
@@ -256,37 +256,37 @@ Tables
 
 Styleguide 30.7
 
--------------------------------------------------------------------------------------------------------------------- */
+*/
 
 
 
-	%table--bordered {
-		thead {
-			th, td {
-				background-color: $gray;
-				color: #FFF;
-			}
-		}
-		tbody {
-			td { border-bottom: 1px solid $grayLight; }
-		}
-	}
+    %table--bordered {
+        thead {
+            th, td {
+                background-color: $gray;
+                color: #FFF;
+            }
+        }
+        tbody {
+            td { border-bottom: 1px solid $grayLight; }
+        }
+    }
 
-	%table--striped { background-color: $grayLighter;}
+    %table--striped { background-color: $grayLighter;}
 
-	%table--hover { background-color: $grayLighter;}
+    %table--hover { background-color: $grayLighter;}
 
-	%table--sortable {
-		thead {
-			th {
-				&:hover {background: $grayDark }
-				&.sorting-asc:after {content: "\25BC"; }
-				&.sorting-desc:after {content: "\25B2";}
-			}
-		}
-	}
+    %table--sortable {
+        thead {
+            th {
+                &:hover {background: $grayDark }
+                &.sorting-asc:after {content: "\25BC"; }
+                &.sorting-desc:after {content: "\25B2";}
+            }
+        }
+    }
 
-/* --------------------------------------------------------------------------------------------------------------------
+/*
 
 Navs
 
@@ -297,21 +297,21 @@ Navs
 
 Styleguide 30.8
 
--------------------------------------------------------------------------------------------------------------------- */
+*/
 
-	%nav--btn {}
+    %nav--btn {}
 
-	%nav--btn__hover { background-color: $grayLighter;}
+    %nav--btn__hover { background-color: $grayLighter;}
 
-	%nav--btn__active {
-		color: $white;
-		background-color: $link-color;
-	}
+    %nav--btn__active {
+        color: $white;
+        background-color: $link-color;
+    }
 
-	%nav--btn__disabled {color: $grayLight;}
+    %nav--btn__disabled {color: $grayLight;}
 
 
-/* --------------------------------------------------------------------------------------------------------------------
+/*
 
 Breadcrumbs
 
@@ -320,27 +320,27 @@ Breadcrumbs
 
 Styleguide 30.9
 
--------------------------------------------------------------------------------------------------------------------- */
-
-	%breadcrumbs {
-		> li {
-			&:after {
-				color: #ccc;
-				content: "›";
-				padding: 0 10px;
-			}
-			&:last-child {
-				&:after {
-					content: "";
-					padding-right: 0;
-				}
-			}
-		}
-	}
+*/
+
+    %breadcrumbs {
+        > li {
+            &:after {
+                color: #ccc;
+                content: "›";
+                padding: 0 10px;
+            }
+            &:last-child {
+                &:after {
+                    content: "";
+                    padding-right: 0;
+                }
+            }
+        }
+    }
 
     %breadcrumbs__current { color: $grayLight; }
 
-/* --------------------------------------------------------------------------------------------------------------------
+/*
 
 Pagination
 
@@ -352,17 +352,17 @@ Pagination
 
 Styleguide 30.10
 
--------------------------------------------------------------------------------------------------------------------- */
+*/
 
 
 
-	%pagination--btn 			{ @extend %btn--default;  }
-	%pagination--btn__hover 	{ @extend %btn--default:hover;}
-	%pagination--btn__active 	{ }
-	%pagination--btn__current 	{ @extend %btn__current; }
-	%pagination--btn__disabled 	{ @extend %btn__disabled; }
+    %pagination--btn            { @extend %btn--default;  }
+    %pagination--btn__hover     { @extend %btn--default:hover;}
+    %pagination--btn__active    { }
+    %pagination--btn__current   { @extend %btn__current; }
+    %pagination--btn__disabled  { @extend %btn__disabled; }
 
-/* --------------------------------------------------------------------------------------------------------------------
+/*
 
 Pager
 
@@ -373,14 +373,14 @@ Pager
 
 Styleguide 30.11
 
--------------------------------------------------------------------------------------------------------------------- */
+*/
 
-	%pager--btn 				{ @extend %btn--default; }
-	%pager--btn__hover 			{ }
-	%pager--btn__active 		{ }
-	%pager--btn__disabled 		{ @extend %btn__disabled; }
+    %pager--btn                 { @extend %btn--default; }
+    %pager--btn__hover          { }
+    %pager--btn__active         { }
+    %pager--btn__disabled       { @extend %btn__disabled; }
 
-/* --------------------------------------------------------------------------------------------------------------------
+/*
 
 Modals
 
@@ -396,74 +396,74 @@ Modals
 
 Styleguide 30.12
 
--------------------------------------------------------------------------------------------------------------------- */
-
+*/
 
 
-	// Buttons
-	%modal__btn {
-		@extend %btn--scripts;
-		@include square($modal-btn-size);
-		line-height: $modal-btn-size;
-	}
 
-	%modal__close {
-		$offset: -$modal-btn-size;
-		@include position(absolute, $offset .5em 0 0);
-	}
+    // Buttons
+    %modal__btn {
+        @extend %btn--scripts;
+        @include square($modal-btn-size);
+        line-height: $modal-btn-size;
+    }
 
-	%modal__close--alt {
-		@include position(absolute, 0px 0px 0 0);
-		background-color: transparent;
-		color: $link-color;
-		&:hover {
-			color: $link-color-hover;
-		}
-	}
+    %modal__close {
+        $offset: -$modal-btn-size;
+        @include position(absolute, $offset .5em 0 0);
+    }
 
-	%modal__btnbar-size {@include size($modal-btn-size, $modal-btn-size * 5);}
+    %modal__close--alt {
+        @include position(absolute, 0px 0px 0 0);
+        background-color: transparent;
+        color: $link-color;
+        &:hover {
+            color: $link-color-hover;
+        }
+    }
 
-	// Other styles
-	%modal__overlay {
-		background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGNiqAcAAIgAgoGu+rEAAAAASUVORK5CYII=');
-	}
+    %modal__btnbar-size {@include size($modal-btn-size, $modal-btn-size * 5);}
 
-	%modal__skin {
-		@include box-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
-		@include border-radius($base-border-radius);
-		background: #fff;
+    // Other styles
+    %modal__overlay {
+        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGNiqAcAAIgAgoGu+rEAAAAASUVORK5CYII=');
+    }
 
-		// Icons
-		.fancybox-close:after 		{ @include icon-font(\f00d); }
-		.fancybox-prev span:after 	{ @include icon-font(\f053); }
-		.fancybox-next span:after 	{ @include icon-font(\f054); }
-		.btnPrev:after 				{ @include icon-font(\f04a); }
-		.btnNext:after 				{ @include icon-font(\f051); }
-		.btnPlay:after 				{ @include icon-font(\f04b); }
-		.btnPlayOn:after 			{ @include icon-font(\f04c); }
-		.btnToggle:after 			{ @include icon-font(\f065); }
-		.btnToggleOn:after 			{ @include icon-font(\f066); }
-		.btnClose:after 			{ @include icon-font(\f00d); }
-	}
+    %modal__skin {
+        @include box-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
+        @include border-radius($base-border-radius);
+        background: #fff;
+
+        // Icons
+        .fancybox-close:after       { @include icon-font(\f00d); }
+        .fancybox-prev span:after   { @include icon-font(\f053); }
+        .fancybox-next span:after   { @include icon-font(\f054); }
+        .btnPrev:after              { @include icon-font(\f04a); }
+        .btnNext:after              { @include icon-font(\f051); }
+        .btnPlay:after              { @include icon-font(\f04b); }
+        .btnPlayOn:after            { @include icon-font(\f04c); }
+        .btnToggle:after            { @include icon-font(\f065); }
+        .btnToggleOn:after          { @include icon-font(\f066); }
+        .btnClose:after             { @include icon-font(\f00d); }
+    }
 
-	%modal__nav { margin-top: (0 - ($modal-btn-size / 2)); }
+    %modal__nav { margin-top: (0 - ($modal-btn-size / 2)); }
 
-	%modal__caption { @extend %caption; }
+    %modal__caption { @extend %caption; }
 
-	%modal__loading {
-		margin-top: -($loader-ico-size / 2);
-		margin-left: -($loader-ico-size / 2);
-		@include opacity(.8);
+    %modal__loading {
+        margin-top: -($loader-ico-size / 2);
+        margin-left: -($loader-ico-size / 2);
+        @include opacity(.8);
 
-		div {
-			@extend %loader-ico;
-			@include square($loader-ico-size);
+        div {
+            @extend %loader-ico;
+            @include square($loader-ico-size);
 
-		}
-	}
+        }
+    }
 
 
-/* --------------------------------------------------------------------------------------------------------------------
+/*
 
 Sliders
 
@@ -474,45 +474,45 @@ Sliders
 
 Styleguide 30.13
 
--------------------------------------------------------------------------------------------------------------------- */
-
-	// Buttons
-	%slider__btn {
-		@extend %btn--scripts;
-		@include square($slider-btn-size);
-		line-height: $slider-btn-size;
-		margin-top: -($slider-btn-size / 2);
-
-		&.bx-prev i:after { @include icon-font(\f053); }
-		&.bx-next i:after { @include icon-font(\f054); }
-	}
-
-	// Pager
-	%slider__pager {
-		@include position(absolute, 0 0 -30px 0);
-		padding-top: 20px;
-		.bx-pager-item {
-			a {
-				@include border-radius(5px);
-				@include square(10px);
-				@include hide-text;
-				background: $grayLight;
-				margin: 0 5px;
-				&:hover, &.active { background: $gray; }
-			}
-		}
-	}
-
-	// Other styles
-	%slider__caption { @extend %caption; }
-
-	%slider__loading {
-		@extend %loader-ico;
-		@include alpha-color(#000, .60);
-		min-height: $loader-ico-size;
-	}
-
-/* --------------------------------------------------------------------------------------------------------------------
+*/
+
+    // Buttons
+    %slider__btn {
+        @extend %btn--scripts;
+        @include square($slider-btn-size);
+        line-height: $slider-btn-size;
+        margin-top: -($slider-btn-size / 2);
+
+        &.bx-prev i:after { @include icon-font(\f053); }
+        &.bx-next i:after { @include icon-font(\f054); }
+    }
+
+    // Pager
+    %slider__pager {
+        @include position(absolute, 0 0 -30px 0);
+        padding-top: 20px;
+        .bx-pager-item {
+            a {
+                @include border-radius(5px);
+                @include square(10px);
+                @include hide-text;
+                background: $grayLight;
+                margin: 0 5px;
+                &:hover, &.active { background: $gray; }
+            }
+        }
+    }
+
+    // Other styles
+    %slider__caption { @extend %caption; }
+
+    %slider__loading {
+        @extend %loader-ico;
+        @include alpha-color(#000, .60);
+        min-height: $loader-ico-size;
+    }
+
+/*
 
 Tabs
 
@@ -524,34 +524,34 @@ Tabs
 
 Styleguide 30.14
 
--------------------------------------------------------------------------------------------------------------------- */
+*/
 
-	%tab__nav { }
+    %tab__nav { }
 
-	%tab__btn {
-		background: $grayLighter;
-		border: solid 1px $grayLight;
-		border-bottom: none;
-	}
+    %tab__btn {
+        background: $grayLighter;
+        border: solid 1px $grayLight;
+        border-bottom: none;
+    }
 
-	%tab__btn__hover {
-		background: $grayLighter;
-		border: solid 1px $grayLight;
-		border-bottom: none;
-	}
+    %tab__btn__hover {
+        background: $grayLighter;
+        border: solid 1px $grayLight;
+        border-bottom: none;
+    }
 
-	%tab__btn__current {
-		border-color: $gray;
-		&:after { background: $grayLighter; }
-	}
+    %tab__btn__current {
+        border-color: $gray;
+        &:after { background: $grayLighter; }
+    }
 
-	%tab__container {
-		border: solid 1px $gray;
-		background: $grayLighter;
-	}
+    %tab__container {
+        border: solid 1px $gray;
+        background: $grayLighter;
+    }
 
 
-/* --------------------------------------------------------------------------------------------------------------------
+/*
 
 Alerts
 
@@ -559,14 +559,14 @@ Alerts
 
 Styleguide 30.15
 
--------------------------------------------------------------------------------------------------------------------- */
+*/
 
-	%alert {
-		background-color: $grayLighter;
-		border: 1px solid $grayLight;
-	}
+    %alert {
+        background-color: $grayLighter;
+        border: 1px solid $grayLight;
+    }
 
-/* --------------------------------------------------------------------------------------------------------------------
+/*
 
 Responsive Nav
 
@@ -575,35 +575,35 @@ Responsive Nav
 
 Styleguide 30.16
 
--------------------------------------------------------------------------------------------------------------------- */
+*/
 
 
-	%nav--responsive {
-		background-color: $grayLighter;
+    %nav--responsive {
+        background-color: $grayLighter;
 
-		a { padding: nth($btn-padding, 1) $wrapper-padding; }
+        a { padding: nth($btn-padding, 1) $wrapper-padding; }
 
-		> ul > li > a {
-			font-weight: bold;
-			background-color: $grayLight;
-		}
+        > ul > li > a {
+            font-weight: bold;
+            background-color: $grayLight;
+        }
 
-	}
+    }
 
-	%nav__toggle {
-		@extend .btn;
+    %nav__toggle {
+        @extend .btn;
 
-		span {
-			@include hide-text();
-		}
+        span {
+            @include hide-text();
+        }
 
-		&:before {
-			@include icon-font(\f0c9);
-		}
-	}
+        &:before {
+            @include icon-font(\f0c9);
+        }
+    }
 
 
-/* --------------------------------------------------------------------------------------------------------------------
+/*
 
 Shared
 
@@ -614,7 +614,7 @@ Classes For other classes of generic elements
 
 Styleguide 30.17
 
--------------------------------------------------------------------------------------------------------------------- */
+*/
 
     %caret {
         &:after {