titon-toolkit 0.9.4 → 0.10.0

data/src/scss/toolkit/mixins/_grid.scss

@@ -4,21 +4,21 @@ $grid-width: (100% / $grid-columns) !default;
 
 // Calculate a width using a grid cell
 @function grid-span($n) {
-	@return $grid-width * $n;
+    @return $grid-width * $n;
 }
 
 // Styles for the row containing the columns
 @mixin grid-row() {
-	text-align: left;
-	width: 100%;
-	max-width: 100%;
+    text-align: left;
+    width: 100%;
+    max-width: 100%;
 
-	@include clear-fix;
+    @include clear-fix;
 }
 
 // Styles for the column
 @mixin grid-column() {
-	position: relative;
-	min-height: 1px;
-	float: left;
+    position: relative;
+    min-height: 1px;
+    float: left;
 }

data/src/scss/toolkit/mixins/_layout.scss

@@ -13,78 +13,78 @@ $large-padding: 1rem !default;
 
 // Container clear fix for floats
 @mixin clear-fix {
-	&:after {
-		content: "";
-		display: block;
-		height: 0;
-		line-height: 0;
-		clear: both;
-		visibility: hidden;
-	}
+    &:after {
+        content: "";
+        display: block;
+        height: 0;
+        line-height: 0;
+        clear: both;
+        visibility: hidden;
+    }
 }
 
 // Reset an inline-block element to defaults
 @mixin reset-inline-block {
-	display: inline-block;
-	border: 0;
-	margin: 0;
-	padding: 0;
-	position: relative;
-	text-decoration: none;
-	vertical-align: middle;
+    display: inline-block;
+    border: 0;
+    margin: 0;
+    padding: 0;
+    position: relative;
+    text-decoration: none;
+    vertical-align: middle;
 }
 
 // Remove the top and bottom margin from content elements
 // Allows for perfect spacing within content blocks
 @mixin content-spacing {
-	p, ul, ol, hr, blockquote {
-		&:first-child { margin-top: 0; }
-		&:last-child { margin-bottom: 0; }
-	}
+    p, ul, ol, hr, blockquote {
+        &:first-child { margin-top: 0; }
+        &:last-child { margin-bottom: 0; }
+    }
 }
 
 //-------------------- Sizes --------------------//
 
 @mixin size-small {
-	font-size: $small-size;
-	padding: $small-padding;
+    font-size: $small-size;
+    padding: $small-padding;
 }
 
 @mixin size-medium {
-	font-size: $medium-size;
-	padding: $medium-padding;
+    font-size: $medium-size;
+    padding: $medium-padding;
 }
 
 @mixin size-large {
-	font-size: $large-size;
-	padding: $large-padding;
+    font-size: $large-size;
+    padding: $large-padding;
 }
 
 //-------------------- States --------------------//
 
 // Contains hover and active styles (on self or inherited from parent)
 @mixin active-state {
-	.is-active > &,
-	&:hover,
-	&.is-active,
-	&.is-active:hover { @content; }
+    .is-active > &,
+    &:hover,
+    &.is-active,
+    &.is-active:hover { @content; }
 }
 
 // Contains disabled styles (on self or inherited from parent)
 @mixin disabled-state {
-	.is-disabled > &,
-	&.is-disabled,
-	&.is-disabled:hover,
-	&[disabled],
-	&[disabled]:hover { @content; }
+    .is-disabled > &,
+    &.is-disabled,
+    &.is-disabled:hover,
+    &[disabled],
+    &[disabled]:hover { @content; }
 }
 
 //-------------------- Helpers --------------------//
 
 @function black($opacity){
-	@return rgba(0, 0, 0, $opacity);
+    @return rgba(0, 0, 0, $opacity);
 }
 
 @function white($opacity){
-	@return rgba(255, 255, 255, $opacity);
+    @return rgba(255, 255, 255, $opacity);
 }

data/src/scss/toolkit/mixins/_responsive.scss

@@ -8,104 +8,104 @@ $breakpoint-mobile-landscape: 480px !default;
 $breakpoint-mobile-portrait: 320px !default;
 
 @mixin if-min($min) {
-	@media only screen and (min-width: $min) {
-		@content;
-	}
+    @media only screen and (min-width: $min) {
+        @content;
+    }
 }
 
 @mixin if-max($max) {
-	@media only screen and (max-width: $max) {
-		@content;
-	}
+    @media only screen and (max-width: $max) {
+        @content;
+    }
 }
 
 @mixin if-min-max($min, $max) {
-	@media only screen and (min-width: $min) and (max-width: $max) {
-		@content;
-	}
+    @media only screen and (min-width: $min) and (max-width: $max) {
+        @content;
+    }
 }
 
 @mixin if-landscape {
-	@media only screen and (orientation: landscape) {
-		@content;
-	}
+    @media only screen and (orientation: landscape) {
+        @content;
+    }
 }
 
 @mixin if-portrait {
-	@media only screen and (orientation: portrait) {
-		@content;
-	}
+    @media only screen and (orientation: portrait) {
+        @content;
+    }
 }
 
 // Either support desktop-first or mobile-first responsive pattern
 @mixin do-responsive($desktop, $mobile) {
-	@if $responsive-design == "desktop" {
-		@if $desktop {
-			@include if-max($desktop) {
-				@content;
-			}
-		} @else {
-			@content;
-		}
-	} @else {
-		@if $mobile {
-			@include if-min($mobile) {
-				@content;
-			}
-		} @else {
-			@content;
-		}
-	}
+    @if $responsive-design == "desktop" {
+        @if $desktop {
+            @include if-max($desktop) {
+                @content;
+            }
+        } @else {
+            @content;
+        }
+    } @else {
+        @if $mobile {
+            @include if-min($mobile) {
+                @content;
+            }
+        } @else {
+            @content;
+        }
+    }
 }
 
 //-------------------- Breakpoints --------------------//
 
 // Uses min or max
 @mixin if-desktop {
-	@include do-responsive(null, $breakpoint-tablet-landscape) {
-		@content;
-	}
+    @include do-responsive(null, $breakpoint-tablet-landscape) {
+        @content;
+    }
 }
 
 @mixin if-tablet-landscape {
-	@include do-responsive($breakpoint-tablet-landscape, $breakpoint-tablet-portrait) {
-		@content;
-	}
+    @include do-responsive($breakpoint-tablet-landscape, $breakpoint-tablet-portrait) {
+        @content;
+    }
 }
 
 @mixin if-tablet-portrait {
-	@include do-responsive($breakpoint-tablet-portrait, $breakpoint-mobile-landscape) {
-		@content;
-	}
+    @include do-responsive($breakpoint-tablet-portrait, $breakpoint-mobile-landscape) {
+        @content;
+    }
 }
 
 @mixin if-mobile-landscape {
-	@include do-responsive($breakpoint-mobile-landscape, $breakpoint-mobile-portrait) {
-		@content;
-	}
+    @include do-responsive($breakpoint-mobile-landscape, $breakpoint-mobile-portrait) {
+        @content;
+    }
 }
 
 @mixin if-mobile-portrait {
-	@include do-responsive($breakpoint-mobile-portrait, null) {
-		@content;
-	}
+    @include do-responsive($breakpoint-mobile-portrait, null) {
+        @content;
+    }
 }
 
 // Within 2 ranges
 @mixin in-desktop {
-	@include if-min($breakpoint-tablet-landscape + 1) {
-		@content;
-	}
+    @include if-min($breakpoint-tablet-landscape + 1) {
+        @content;
+    }
 }
 
 @mixin in-tablet {
-	@include if-min-max($breakpoint-mobile-landscape + 1, $breakpoint-tablet-landscape) {
-		@content;
-	}
+    @include if-min-max($breakpoint-mobile-landscape + 1, $breakpoint-tablet-landscape) {
+        @content;
+    }
 }
 
 @mixin in-mobile {
-	@include if-max($breakpoint-mobile-landscape)  {
-		@content;
-	}
+    @include if-max($breakpoint-mobile-landscape)  {
+        @content;
+    }
 }

data/src/scss/toolkit/mixins/_themes.scss

@@ -1,98 +1,98 @@
 
 @mixin alert-style($bg, $text) {
-	color: $text;
-	background: $bg;
-	border: 1px solid shade($bg, 10%);
+    color: $text;
+    background: $bg;
+    border: 1px solid shade($bg, 10%);
 
-	hr { border-color: shade($bg, 10%); }
+    hr { border-color: shade($bg, 10%); }
 
-	a { color: shade($text, 10%); }
-	a:hover { color: tint($text, 25%); }
+    a { color: shade($text, 10%); }
+    a:hover { color: tint($text, 25%); }
 
-	@content;
+    @content;
 }
 
 @mixin button-style($base, $light, $dark) {
-	font-weight: bold;
-	background: shade($base, 5%);
-	text-shadow: 1px 1px black(.2);
-	border: 1px solid shade($base, 12%);
-
-	@include active-state {
-		color: #fff;
-		background-color: shade($base, 20%);
-		text-shadow: 1px 1px $dark;
-		border-color: shade($base, 30%);
-	}
-
-	@include disabled-state {
-		background: $base;
-		border-color: $base;
-		box-shadow: none;
-		text-shadow: none;
-		top: 0;
-		opacity: $disabled-opacity;
-	}
-
-	@content;
+    font-weight: bold;
+    background: shade($base, 5%);
+    text-shadow: 1px 1px black(.2);
+    border: 1px solid shade($base, 12%);
+
+    @include active-state {
+        color: #fff;
+        background-color: shade($base, 20%);
+        text-shadow: 1px 1px $dark;
+        border-color: shade($base, 30%);
+    }
+
+    @include disabled-state {
+        background: $base;
+        border-color: $base;
+        box-shadow: none;
+        text-shadow: none;
+        top: 0;
+        opacity: $disabled-opacity;
+    }
+
+    @content;
 }
 
 @mixin label-style($bg, $text) {
-	background: $bg;
-	color: $text;
+    background: $bg;
+    color: $text;
 
-	@content;
+    @content;
 }
 
 @mixin progress-style($bg, $border) {
-	background: $bg;
-	text-shadow: 1px 1px $border;
-	border: 1px solid tint($border, 35%);
-	border-right: 0;
+    background: $bg;
+    text-shadow: 1px 1px $border;
+    border: 1px solid tint($border, 35%);
+    border-right: 0;
 
-	@content;
+    @content;
 }
 
 @mixin field-style() {
-	&.has-error {
-		.input,
-		.select {
-			border-color: $error;
-
-			&:focus { box-shadow: 0 0 5px $error-light; }
-		}
-
-		.radio,
-		.checkbox {
-			color: $error-dark;
-		}
-	}
-
-	&.has-warning {
-		.input,
-		.select {
-			border-color: $warning;
-
-			&:focus { box-shadow: 0 0 5px $warning-light; }
-		}
-
-		.radio,
-		.checkbox {
-			color: $warning-dark;
-		}
-	}
-
-	&.has-success {
-		.input,
-		.select {
-			border-color: $success;
-
-			&:focus { box-shadow: 0 0 5px $success-light; }
-		}
-
-		.radio,
-		.checkbox {
-			color: $success-dark;
-		}
-	}
+    &.has-error {
+        .input,
+        .select {
+            border-color: $error;
+
+            &:focus { box-shadow: 0 0 5px $error-light; }
+        }
+
+        .radio,
+        .checkbox {
+            color: $error-dark;
+        }
+    }
+
+    &.has-warning {
+        .input,
+        .select {
+            border-color: $warning;
+
+            &:focus { box-shadow: 0 0 5px $warning-light; }
+        }
+
+        .radio,
+        .checkbox {
+            color: $warning-dark;
+        }
+    }
+
+    &.has-success {
+        .input,
+        .select {
+            border-color: $success;
+
+            &:focus { box-shadow: 0 0 5px $success-light; }
+        }
+
+        .radio,
+        .checkbox {
+            color: $success-dark;
+        }
+    }
 }