titon-toolkit 0.9.4 → 0.10.0

data/src/scss/toolkit/modules/accordion.scss

@@ -1,7 +1,7 @@
 /**
- * @copyright	Copyright 2010-2013, The Titon Project
- * @license		http://opensource.org/licenses/bsd-license.php
- * @link		http://titon.io
+ * @copyright   2010-2013, The Titon Project
+ * @license     http://opensource.org/licenses/bsd-license.php
+ * @link        http://titon.io
  */
 
 @import "../common";
@@ -9,54 +9,54 @@
 /**
  * Should be used in conjunction with the JavaScript Titon.Tooltip module.
  *
- *	<ul class="accordion">
- *		<li>
- *			<header class="accordion-head">Title Bar</header>
- *			<section class="accordion-inner">
- *				<div class="accordion-body">Collapsible content</div>
- *			</section>
- *		</li>
- *	</ul>
+ *    <ul class="accordion">
+ *        <li>
+ *            <header class="accordion-head">Title Bar</header>
+ *            <section class="accordion-inner">
+ *                <div class="accordion-body">Collapsible content</div>
+ *            </section>
+ *        </li>
+ *    </ul>
  */
 
 .accordion,
 .accordion li {
-	list-style: none;
-	text-align: left;
-	margin: 0;
-	padding: 0;
+    list-style: none;
+    text-align: left;
+    margin: 0;
+    padding: 0;
 }
 
 .accordion {
-	border: 1px solid $gray-dark;
+    border: 1px solid $gray-dark;
 }
 
 .accordion-head {
-	padding: $padding;
-	background: $gray;
-	border: 1px solid $gray-dark;
-	margin: -1px;
-	cursor: pointer;
-
-	.is-active & {
-		background: $gray-dark;
-		border-color: $gray-darkest;
-	}
+    padding: $padding;
+    background: $gray;
+    border: 1px solid $gray-dark;
+    margin: -1px;
+    cursor: pointer;
+
+    .is-active & {
+        background: $gray-dark;
+        border-color: $gray-darkest;
+    }
 }
 
 // Style this
 .accordion-body {
-	padding: $padding;
+    padding: $padding;
 
-	@include content-spacing;
+    @include content-spacing;
 }
 
 // Inner is used for animations, do not style it!
 .accordion-inner {
-	overflow: hidden;
-	position: relative;
-	@include transition(all .3s ease-in-out);
+    overflow: hidden;
+    position: relative;
+    @include transition(all .3s ease-in-out);
 
-	&.show { height: auto; }
-	&.hide { max-height: 0; } // don't include on base styles
+    &.show { height: auto; }
+    &.hide { max-height: 0; } // don't include on base styles
 }

data/src/scss/toolkit/modules/blackout.scss

@@ -1,7 +1,7 @@
 /**
- * @copyright	Copyright 2010-2013, The Titon Project
- * @license		http://opensource.org/licenses/bsd-license.php
- * @link		http://titon.io
+ * @copyright   2010-2013, The Titon Project
+ * @license     http://opensource.org/licenses/bsd-license.php
+ * @link        http://titon.io
  */
 
 @import "../common";
@@ -11,14 +11,14 @@
  */
 
 .blackout {
-	position: fixed;
-	top: 0;
-	left: 0;
-	height: 100%;
-	width: 100%;
-	z-index: 600;
-	opacity: 0;
-	visibility: hidden;
-	background: black(.5);
-	@include transition(all 0.3s);
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    z-index: 600;
+    opacity: 0;
+    visibility: hidden;
+    background: black(.5);
+    @include transition(all 0.3s);
 }

data/src/scss/toolkit/modules/carousel.scss

@@ -1,7 +1,7 @@
 /**
- * @copyright	Copyright 2010-2013, The Titon Project
- * @license		http://opensource.org/licenses/bsd-license.php
- * @link		http://titon.io
+ * @copyright   2010-2013, The Titon Project
+ * @license     http://opensource.org/licenses/bsd-license.php
+ * @link        http://titon.io
  */
 
 @import "../common";
@@ -9,167 +9,167 @@
 /**
  * Should be used in conjunction with the JavaScript Titon.Carousel module.
  *
- *	<div class="carousel">
- *		<ul class="carousel-items">
- *			<li>
- *				<img src="/path/to/image.jpg">
- *				<div class="carousel-caption">Image caption</div>
- *			</li>
- *		</ul>
- *		<ol class="carousel-tabs">
- *			<li><a href=""></a></li>
- *		</ol>
- *		<a href="javascript:;" class="carousel-prev">
- *			<span class="icon-chevron-sign-left"></span>
- *		</a>
- *		<a href="javascript:;" class="carousel-next">
- *			<span class="icon-chevron-sign-right"></span>
- *		</a>
- *	</div>
+ *    <div class="carousel">
+ *        <ul class="carousel-items">
+ *            <li>
+ *                <img src="/path/to/image.jpg">
+ *                <div class="carousel-caption">Image caption</div>
+ *            </li>
+ *        </ul>
+ *        <ol class="carousel-tabs">
+ *            <li><a href=""></a></li>
+ *        </ol>
+ *        <a href="javascript:;" class="carousel-prev">
+ *            <span class="icon-chevron-sign-left"></span>
+ *        </a>
+ *        <a href="javascript:;" class="carousel-next">
+ *            <span class="icon-chevron-sign-right"></span>
+ *        </a>
+ *    </div>
  */
 
 .carousel {
-	// 16:9
-	max-width: 640px;
-	max-height: 360px;
-	width: 100%;
-	height: auto;
-	margin: 0 auto;
-	text-align: left;
-	position: relative;
-	overflow: hidden;
+    // 16:9
+    max-width: 640px;
+    max-height: 360px;
+    width: 100%;
+    height: auto;
+    margin: 0 auto;
+    text-align: left;
+    position: relative;
+    overflow: hidden;
 }
 
 .carousel-items {
-	list-style: none;
-	margin: 0;
-	padding: 0;
-	position: relative;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: auto;
-	z-index: 1;
-	@include transition(left 1s, top 1s);
-
-	> li {
-		position: relative;
-		width: 100%;
-		height: auto;
-		z-index: 1;
-		display: block;
-
-		> img {
-			display: block;
-			width: 100%;
-			max-width: 100%;
-			height: auto;
-		}
-
-		.carousel-caption {
-			position: absolute;
-			bottom: 0;
-			left: 0;
-			width: 100%;
-			padding: $padding;
-			color: #fff;
-			background: black(.70);
-		}
-	}
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    position: relative;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: auto;
+    z-index: 1;
+    @include transition(left 1s, top 1s);
+
+    > li {
+        position: relative;
+        width: 100%;
+        height: auto;
+        z-index: 1;
+        display: block;
+
+        > img {
+            display: block;
+            width: 100%;
+            max-width: 100%;
+            height: auto;
+        }
+
+        .carousel-caption {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            padding: $padding;
+            color: #fff;
+            background: black(.70);
+        }
+    }
 }
 
 .carousel-prev,
 .carousel-next {
-	display: block;
-	position: absolute;
-	padding: $padding;
-	width: auto;
-	height: auto;
-	z-index: 5;
-	font-size: 28px;
-	color: #fff;
-	opacity: .65;
-	top: 50%;
-	@include transform(translateY(-50%)); // move up 50% of their height
-
-	&:hover {
-		color: #fff;
-		opacity: 1;
-	}
-
-	&:focus {
-		outline: none;
-	}
-
-	// Large icons for large resolutions
-	@include if-tablet-landscape {
-		.carousel-prev,
-		.carousel-next {
-			font-size: 56px;
-		}
-	}
+    display: block;
+    position: absolute;
+    padding: $padding;
+    width: auto;
+    height: auto;
+    z-index: 5;
+    font-size: 28px;
+    color: #fff;
+    opacity: .65;
+    top: 50%;
+    @include transform(translateY(-50%)); // move up 50% of their height
+
+    &:hover {
+        color: #fff;
+        opacity: 1;
+    }
+
+    &:focus {
+        outline: none;
+    }
+
+    // Large icons for large resolutions
+    @include if-tablet-landscape {
+        .carousel-prev,
+        .carousel-next {
+            font-size: 56px;
+        }
+    }
 }
 
 .carousel-prev { left: 0; }
 .carousel-next { right: 0; }
 
 .carousel-tabs {
-	list-style: none;
-	line-height: 100%;
-	margin: 0;
-	padding: $padding;
-	position: absolute;
-	top: 0;
-	left: 50%;
-	z-index: 5;
-	@include transform(translateX(-50%)); // move left 50% of their width
-
-	li {
-		display: inline-block;
-		margin: 0 3px;
-	}
-
-	a {
-		display: inline-block;
-		border: 2px solid #fff;
-		height: 10px;
-		width: 10px;
-		border-radius: 50%;
-		opacity: .65;
-
-		&:hover { opacity: 1; }
-		&.is-active { background: #fff; }
-	}
-
-	// Hide if no tabs
-	&:empty { display: none; }
+    list-style: none;
+    line-height: 100%;
+    margin: 0;
+    padding: $padding;
+    position: absolute;
+    top: 0;
+    left: 50%;
+    z-index: 5;
+    @include transform(translateX(-50%)); // move left 50% of their width
+
+    li {
+        display: inline-block;
+        margin: 0 3px;
+    }
+
+    a {
+        display: inline-block;
+        border: 2px solid #fff;
+        height: 10px;
+        width: 10px;
+        border-radius: 50%;
+        opacity: .65;
+
+        &:hover { opacity: 1; }
+        &.is-active { background: #fff; }
+    }
+
+    // Hide if no tabs
+    &:empty { display: none; }
 }
 
 //-------------------- Animations --------------------//
 
 .carousel.slide {
-	.carousel-items {
-		@include clear-fix;
+    .carousel-items {
+        @include clear-fix;
 
-		> li {
-			float: left;
-		}
-	}
+        > li {
+            float: left;
+        }
+    }
 }
 
 .carousel.fade {
-	.carousel-items {
-		height: 360px; // needs a base height because slides are absolute
-
-		> li {
-			position: absolute;
-			top: 0;
-			left: 0;
-			opacity: 0;
-			z-index: 1;
-			@include transition(opacity 1s);
-
-			&.show { z-index: 2; }
-		}
-	}
+    .carousel-items {
+        height: 360px; // needs a base height because slides are absolute
+
+        > li {
+            position: absolute;
+            top: 0;
+            left: 0;
+            opacity: 0;
+            z-index: 1;
+            @include transition(opacity 1s);
+
+            &.show { z-index: 2; }
+        }
+    }
 }

data/src/scss/toolkit/modules/flyout.scss

@@ -1,7 +1,7 @@
 /**
- * @copyright	Copyright 2010-2013, The Titon Project
- * @license		http://opensource.org/licenses/bsd-license.php
- * @link		http://titon.io
+ * @copyright   2010-2013, The Titon Project
+ * @license     http://opensource.org/licenses/bsd-license.php
+ * @link        http://titon.io
  */
 
 @import "../common";
@@ -11,68 +11,68 @@
  */
 
 .flyout {
-	position: absolute;
-	top: 0;
-	left: 0;
-	z-index: 500;
-	opacity: 0;
-	visibility: hidden;
-	background: $gray;
-	border: 1px solid $gray-dark;
-	@include box-sizing(content-box); // required by MooTools for multi columns
-	@include transition(opacity 0.3s);
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 500;
+    opacity: 0;
+    visibility: hidden;
+    background: $gray;
+    border: 1px solid $gray-dark;
+    @include box-sizing(content-box); // required by MooTools for multi columns
+    @include transition(opacity 0.3s);
 
-	ul {
-		list-style: none;
-		margin: 0;
-		padding: 0;
-		float: left;
-		width: 200px;
+    ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        float: left;
+        width: 200px;
 
-		li {
-			position: relative;
+        li {
+            position: relative;
 
-			> a,
-			> .divider {
-				padding: $small-padding;
-				line-height: 100%;
-				display: block;
-				text-decoration: none;
-			}
+            > a,
+            > .divider {
+                padding: $small-padding;
+                line-height: 100%;
+                display: block;
+                text-decoration: none;
+            }
 
-			> a .caret-right { display: none; }
+            > a .caret-right { display: none; }
 
-			&.has-children > a .caret-right {
-				float: right;
-				display: inline-block; // reveal
-				margin-top: 3px;
-			}
+            &.has-children > a .caret-right {
+                float: right;
+                display: inline-block; // reveal
+                margin-top: 3px;
+            }
 
-			// Sub-flyouts
-			> .flyout {
-				left: 90%;
-				@include transition(left .3s, right .3s, opacity .3s);
+            // Sub-flyouts
+            > .flyout {
+                left: 90%;
+                @include transition(left .3s, right .3s, opacity .3s);
 
-				// Reverse menu to left side incase it goes outside the viewport
-				// Will be set automatically from the Javascript layer
-				&.flyout--left {
-					left: auto;
-					right: 90%;
-				}
-			}
+                // Reverse menu to left side incase it goes outside the viewport
+                // Will be set automatically from the Javascript layer
+                &.flyout--left {
+                    left: auto;
+                    right: 90%;
+                }
+            }
 
-			&.is-open > .flyout {
-				opacity: 1;
-				visibility: visible;
-				left: 100%;
+            &.is-open > .flyout {
+                opacity: 1;
+                visibility: visible;
+                left: 100%;
 
-				&.flyout--left {
-					left: auto;
-					right: 100%;
-				}
-			}
-		}
-	}
+                &.flyout--left {
+                    left: auto;
+                    right: 100%;
+                }
+            }
+        }
+    }
 
-	@include clear-fix;
+    @include clear-fix;
 }