lariano.scss

// 
// Lariano v0.7.4
// 
// The MIT License (MIT)
// 
// Copyright (c) 2015 - Flavio Iacoppini @ Fabaris.it
// 
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
// 
// The above copyright notice and this permission notice shall be included in all
// copies or substantial portions of the Software.
// 
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
// 
// Creator: Flavio "Faycop" Iacoppini @ Fabaris.it
// Site: github.com/Faycop/lariano
// Date: 22.07.2015
// 
// Changelog:
// - v0.4
//    - Added mixin: "three-quarters" and "two-third"
// - v0.5
//    - Added variable direction to mixins lariano-offset/inset. ex: @include lariano-inset(desktop,3,right);
// - v0.6
//    - Added mixin: "lariano-col-reset"
// - v0.7
//    - All typologies have different settable gutter now
//    - New mixin: lariano-move includes "offset" - "inset" - "push" - "pull". ex: @include lariano-move(inset, desktop, 3, left); or @include lariano-move(offset, third);
// - v0.7.1
//    - Added variable direction to mixin lariano-col ex: @include lariano-col(desktop,3,no-gutter,right);
// - v0.7.2
//    - Created a fallback on which using such as @include lariano-col(half,no-gutter); will work just as using @include lariano-col(half,1,no-gutter);
//    - Removed the no-gutter on mixin lariano-col 'full' - 'half' - etc. - it felt useless
// - v0.7.3
//    - Added "all" typology to mixin lariano-move
// - v0.7.4
//    - Changed the value of the @include lariano-container for resetting it. Now is @include lariano-container(reset)
//    - Fixed a bug on wich defining standard-measure column like @include lariano-col(half) didn't put the gutter
//        - Now Lariano provides an extra variable called "$genericGutter" wich defines the gutter for the standard-measure columns in absence of a defined typology
//    - Added the possibility to do something like @include lariano-col(desktop,half) on wich provides the gutter of the defined typology instead of the $genericGutter value
//    - Merged the mixin @lariano-col-reset in @lariano-col. now the syntax is: @include lariano-col(desktop, reset) or even @lariano-col(all, reset) or @lariano-col(reset) to undo the columns on every typology
//

$large: (
	name: 'large',
	media: 1200px,
	container: 1200px,
	columns: 8,
	gutter: 32px
);
$desktop: (
	name: 'desktop',
	media: 980px,
	container: 980px,
	columns: 8,
	gutter: 28px
);
$tablet: (
	name: 'tablet',
	media: 768px,
	container: 768px,
	columns: 8,
	gutter: 20px
);
$mobile: (
	name: 'mobile',
	alt: 'mb-first',
	media: 745px,
	container: 585px,
	columns: 4,
	gutter: 10px
);

// This is for the standard-measure columns like full, half, third etc.
// You can allways use something like @include lariano-col(tablet,third); to use the gutter of the targeted typology
$genericGutter: 32px;

$standard: (
	full: 100%,
	three-quarters: 75%,
	two-third: 66.666667%,
	half: 50%,
	third: 33.333334%,
	fourth: 25%,
	fifth: 20%,
	sixth: 16.666667%,
	seventh: 14.285714%,
	eighth: 12.5%,
	ninth: 11.111112%,
	tenth: 10%
);

// Columns dimensions (1 space)
$largeWidth: 100% / map-get($large, columns);
$desktopWidth: 100% / map-get($desktop, columns);
$tabletWidth: 100% / map-get($tablet, columns);
$mobileWidth: 100% / map-get($mobile, columns);

html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}

@mixin clearfix {
	zoom: 1;
	&:after {
		display: block;
		visibility: hidden;
		height: 0;
		clear: both;
		content: ".";
	}
}
@mixin center-block {
	margin: 0 auto;
}

@mixin gutter($typology) {
	@if $typology == map-get($large, name) {
		padding-right: map-get($large, gutter) / 2;
		padding-left: map-get($large, gutter) / 2;
	}
	@if $typology == map-get($desktop, name) {
		padding-right: map-get($desktop, gutter) / 2;
		padding-left: map-get($desktop, gutter) / 2;
	}
	@if $typology == map-get($tablet, name) {
		padding-right: map-get($tablet, gutter) / 2;
		padding-left: map-get($tablet, gutter) / 2;
	}
	@if $typology == map-get($mobile, name) or $typology == map-get($mobile, name) {
		padding-right: map-get($mobile, gutter) / 2;
		padding-left: map-get($mobile, gutter) / 2;
	}

	@each $key in map-keys($standard){
		@if $typology == $key {
			padding-left: $genericGutter / 2;
			padding-right: $genericGutter / 2;
		}
	}
}
@mixin no-gutter {
	padding-right: 0;
	padding-left: 0;
}


// Media Query
@mixin lariano-media-query($typology){
	@if $typology == map-get($large, name) {
		@media (min-width: map-get($large, media)) {
			@content;
		}
	}
	@if $typology == map-get($tablet, name) {
		@media (max-width: map-get($desktop, media)) {
			@content;
		}
	}
	@if $typology == map-get($mobile, name) {
		@media (max-width: map-get($mobile, media)) {
			@content;
		}
	}
}

// Container
@mixin lariano-container($typology:all){
	@include clearfix;
	@include center-block;

	width: 100%;

	@if $typology == map-get($desktop, name) {
		max-width: map-get($desktop, container) + map-get($desktop, gutter);
	}

	@if $typology == map-get($large, name) {
		min-width: map-get($desktop, container) + map-get($desktop, gutter);
		@media (min-width: map-get($large, media)) {
			max-width: map-get($large, container) + map-get($large, gutter);
		}
	}

	@if $typology == map-get($tablet, name) {
		min-width: map-get($mobile, container) + map-get($mobile, gutter);
		max-width: map-get($desktop, container) + map-get($desktop, gutter);
	}

	@if $typology == map-get($mobile, name) {
		max-width: map-get($mobile, container) + map-get($mobile, gutter);
	}

	@if $typology == all {
		max-width: map-get($desktop, container) + map-get($desktop, gutter);

		@media (max-width: map-get($mobile, media)) {
			max-width: 100%;
		}
		@media (max-width: map-get($desktop, media)) {
			max-width: map-get($tablet, container) + map-get($tablet, gutter);
		}
		@media (min-width: map-get($large, media)) {
			max-width: map-get($large, container) + map-get($large, gutter);
		}
	}

	@if $typology == reset {
		max-width: none;

		@media (max-width: map-get($mobile, media)) {
			max-width: none;
		}
		@media (max-width: map-get($desktop, media)) {
			max-width: none;
		}
		@media (min-width: map-get($large, media)) {
			max-width: none;
		}
	}
}

// Columns
@mixin lariano-col($typology, $columns:1, $gutter: default, $direction: default){
	@if $typology != map-get($mobile, name) 
		and $typology != map-get($mobile, alt) 
		and $typology != map-get($tablet, name) 
		and $typology != map-get($large, name) {
			@if $direction == right {
				float: right;
			} @else if $direction == left {
				float: left;
			} @else if $direction == default {
				float: left;
			}

			@if not map-has-key($standard, $typology) and $gutter == default {
				@include gutter($typology);
			}

			@if $columns == reset {
				width: auto;
				padding: inherit;
				float: none;
			}
		}

	@if $typology == map-get($large, name) {
		@media (min-width: map-get($large, media)) {
			@if map-has-key($standard, $columns) {
				width: map-get($standard, $columns);
			} @else if $columns > map-get($large, columns) {
				width: $largeWidth * map-get($large, columns);
			} @else {
				width: $largeWidth * $columns;
			}

			@if $gutter == no-gutter {
				@include no-gutter;
			} @else if $gutter == gutter {
				@include gutter($typology);
			}

			@if $direction == right {
				float: right;
			} @else if $direction == left {
				float: left;
			}

			@if $columns == reset {
				width: auto;
				padding: inherit;
				float: none;
			}
		}
	}

	@if $typology == map-get($desktop, name) {
		@if map-has-key($standard, $columns) {
			width: map-get($standard, $columns);
		} @else if $columns > map-get($desktop, columns) {
			width: $desktopWidth * map-get($desktop, columns);
		} @else {
			width: $desktopWidth * $columns;
		}

		@if $gutter == no-gutter {
			@include no-gutter;
		} @else if $gutter == gutter {
			@include gutter($typology);
		}
	}

	@if $typology == map-get($tablet, name) {
		@media (max-width: map-get($desktop, media)) {
			@if map-has-key($standard, $columns) {
				width: map-get($standard, $columns);
			} @else if $columns > map-get($desktop, columns) {
				width: $tabletWidth * map-get($tablet, columns);
			} @else {
				width: $tabletWidth * $columns;
			}

			@if $gutter == no-gutter {
				@include no-gutter;
			} @else if $gutter == gutter {
				@include gutter($typology);
			}

			@if $direction == right {
				float: right;
			} @else if $direction == left {
				float: left;
			}

			@if $columns == reset {
				width: auto;
				padding: inherit;
				float: none;
			}
		}
	}

	@if $typology == map-get($mobile, name) {
		@media (max-width: map-get($mobile, media)) {
			@if map-has-key($standard, $columns) {
				width: map-get($standard, $columns);
			} @else if $columns > map-get($mobile, columns) {
				width: $mobileWidth * map-get($mobile, columns);
			} @else {
				width: $mobileWidth * $columns;
			}

			@if $gutter == no-gutter {
				@include no-gutter;
			} @else if $gutter == gutter {
				@include gutter($typology);
			}

			@if $direction == right {
				float: right;
			} @else if $direction == left {
				float: left;
			}

			@if $columns == reset {
				width: auto;
				padding: inherit;
				float: none;
			}
		}
	}
	@if $typology == map-get($mobile, alt) {
		@if map-has-key($standard, $columns) {
			width: map-get($standard, $columns);
		} @else if $columns > map-get($mobile, columns) {
			width: $mobileWidth * map-get($mobile, columns);
		} @else {
			width: $mobileWidth * $columns;
		}

		@if $gutter == no-gutter {
			@include no-gutter;
		} @else if $gutter == gutter {
			@include gutter($typology);
		}

		@if $direction == right {
			float: right;
		} @else if $direction == left {
			float: left;
		} @else if $direction == default {
			float: left;
		}

		@if $columns == reset {
			width: auto;
			padding: inherit;
			float: none;
		}
	}

	@each $key in map-keys($standard){
		@if $typology == $key {
			width: map-get($standard, $key);

			@if $columns == no-gutter {
				@include no-gutter;
			} @else if $columns == gutter {
				@include gutter($typology);
			} @else {
				@include gutter($typology);
			}

			@if $direction == right {
				float: right;
			} @else if $direction == left {
				float: left;
			}
		}
	}

	@if $typology == all {
		@if $columns == reset {
			width: auto;
			padding: inherit;
			float: none;

			@media (max-width: map-get($large, media)) {
				width: auto;
				padding: inherit;
				float: none;
			}
			@media (max-width: map-get($desktop, media)) {
				width: auto;
				padding: inherit;
				float: none;
			}
			@media (max-width: map-get($mobile, media)) {
				width: auto;
				padding: inherit;
				float: none;
			}
		}
	} @else if $typology == reset {
		width: auto;
		padding: inherit;
		float: none;

		@media (max-width: map-get($large, media)) {
			width: auto;
			padding: inherit;
			float: none;
		}
		@media (max-width: map-get($desktop, media)) {
			width: auto;
			padding: inherit;
			float: none;
		}
		@media (max-width: map-get($mobile, media)) {
			width: auto;
			padding: inherit;
			float: none;
		}
	}
}

// Move
@mixin lariano-move($service, $typology, $columns:1, $direction: left){
	@if $typology == map-get($large, name) {
		@if $service == offset {
			@media (min-width: map-get($large, media)) {
				@if $columns > map-get($large, columns) {
					@if $direction == right {
						margin-right: $largeWidth * map-get($large, columns);
					} @else {
						margin-left: $largeWidth * map-get($large, columns);
					}
				} @else {
					@if $direction == right {
						margin-right: $largeWidth * $columns;
					} @else {
						margin-left: $largeWidth * $columns;
					}
				}
			}
		}
		@if $service == inset {
			@media (min-width: map-get($large, media)) {
				@if $columns > map-get($large, columns) {
					@if $direction == right {
						padding-right: $largeWidth * map-get($large, columns);
					} @else {
						padding-left: $largeWidth * map-get($large, columns);
					}
				} @else {
					@if $direction == right {
						padding-right: $largeWidth * $columns;
					} @else {
						padding-left: $largeWidth * $columns;
					}
				}
			}
		}
		@if $service == push {
			@media (min-width: map-get($large, media)) {
				@if $columns > map-get($large, columns) {
					left: $largeWidth * map-get($large, columns);
				} @else {
					left: $largeWidth * $columns;
				}
			}
		}
		@if $service == pull {
			@media (min-width: map-get($large, media)) {
				@if $columns > map-get($large, columns) {
					right: $largeWidth * map-get($large, columns);
				} @else {
					right: $largeWidth * $columns;
				}
			}
		}
	}

	@if $typology == map-get($desktop, name) {
		@if $service == offset {
			@if $columns > map-get($desktop, columns) {
				@if $direction == right {
					margin-right: $desktopWidth * map-get($desktop, columns);
				} @else {
					margin-left: $desktopWidth * map-get($desktop, columns);
				}
			} @else {
				@if $direction == right {
					margin-right: $desktopWidth * $columns;
				} @else {
					margin-left: $desktopWidth * $columns;
				}
			}
		}
		@if $service == inset {
			@if $columns > map-get($desktop, columns) {
				@if $direction == right {
					padding-right: $desktopWidth * map-get($desktop, columns);
				} @else {
					padding-left: $desktopWidth * map-get($desktop, columns);
				}
			} @else {
				@if $direction == right {
					padding-right: $desktopWidth * $columns;
				} @else {
					padding-left: $desktopWidth * $columns;
				}
			}
		}
		@if $service == push {
			@if $columns > map-get($desktop, columns) {
				left: $desktopWidth * map-get($desktop, columns);
			} @else {
				left: $desktopWidth * $columns;
			}
		}
		@if $service == pull {
			@if $columns > map-get($desktop, columns) {
				right: $desktopWidth * map-get($desktop, columns);
			} @else {
				right: $desktopWidth * $columns;
			}
		}
	}

	@if $typology == map-get($tablet, name) {
		@if $service == offset {
			@media (max-width: map-get($desktop, media)) {
				@if $columns > map-get($tablet, columns) {
					@if $direction == right {
						margin-right: $tabletWidth * map-get($tablet, columns);
					} @else {
						margin-left: $tabletWidth * map-get($tablet, columns);
					}
				} @else {
					@if $direction == right {
						margin-right: $tabletWidth * $columns;
					} @else {
						margin-left: $tabletWidth * $columns;
					}
				}
			}
		}
		@if $service == inset {
			@media (max-width: map-get($desktop, media)) {
				@if $columns > map-get($tablet, columns) {
					@if $direction == right {
						padding-right: $tabletWidth * map-get($tablet, columns);
					} @else {
						padding-left: $tabletWidth * map-get($tablet, columns);
					}
				} @else {
					@if $direction == right {
						padding-right: $tabletWidth * $columns;
					} @else {
						padding-left: $tabletWidth * $columns;
					}
				}
			}
		}
		@if $service == push {
			@media (max-width: map-get($desktop, media)) {
				@if $columns > map-get($tablet, columns) {
					left: $tabletWidth * map-get($tablet, columns);
				} @else {
					left: $tabletWidth * $columns;
				}
			}
		}
		@if $service == pull {
			@media (max-width: map-get($desktop, media)) {
				@if $columns > map-get($tablet, columns) {
					right: $tabletWidth * map-get($tablet, columns);
				} @else {
					right: $tabletWidth * $columns;
				}
			}
		}
	}

	@if $typology == map-get($mobile, name) {
		@if $service == offset {
			@media (max-width: map-get($mobile, media)) {
				@if $columns > map-get($mobile, columns) {
					@if $direction == right {
						margin-right: $mobileWidth * map-get($mobile, columns);
					} @else {
						margin-left: $mobileWidth * map-get($mobile, columns);
					}
				} @else {
					@if $direction == right {
						margin-right: $mobileWidth * $columns;
					} @else {
						margin-left: $mobileWidth * $columns;
					}
				}
			}
		}
		@if $service == inset {
			@media (max-width: map-get($mobile, media)) {
				@if $columns > map-get($mobile, columns) {
					@if $direction == right {
						padding-right: $mobileWidth * map-get($mobile, columns);
					} @else {
						padding-left: $mobileWidth * map-get($mobile, columns);
					}
				} @else {
					@if $direction == right {
						padding-right: $mobileWidth * $columns;
					} @else {
						padding-left: $mobileWidth * $columns;
					}
				}
			}
		}
		@if $service == push {
			@media (max-width: map-get($mobile, media)) {
				@if $columns > map-get($mobile, columns) {
					left: $mobileWidth * map-get($mobile, columns);
				} @else {
					left: $mobileWidth * $columns;
				}
			}
		}
		@if $service == pull {
			@media (max-width: map-get($mobile, media)) {
				@if $columns > map-get($mobile, columns) {
					right: $mobileWidth * map-get($mobile, columns);
				} @else {
					right: $mobileWidth * $columns;
				}
			}
		}
	}

	@if $typology == map-get($mobile, alt) {
		@if $service == offset {
			@if $columns > map-get($mobile, columns) {
				@if $direction == right {
					margin-right: $mobileWidth * map-get($mobile, columns);
				} @else {
					margin-left: $mobileWidth * map-get($mobile, columns);
				}
			} @else {
				@if $direction == right {
					margin-right: $mobileWidth * $columns;
				} @else {
					margin-left: $mobileWidth * $columns;
				}
			}
		}
		@if $service == inset {
			@if $columns > map-get($mobile, columns) {
				@if $direction == right {
					padding-right: $mobileWidth * map-get($mobile, columns);
				} @else {
					padding-left: $mobileWidth * map-get($mobile, columns);
				}
			} @else {
				@if $direction == right {
					padding-right: $mobileWidth * $columns;
				} @else {
					padding-left: $mobileWidth * $columns;
				}
			}
		}
		@if $service == push {
			@if $columns > map-get($mobile, columns) {
				left: $mobileWidth * map-get($mobile, columns);
			} @else {
				left: $mobileWidth * $columns;
			}
		}
		@if $service == pull {
			@if $columns > map-get($mobile, columns) {
				right: $mobileWidth * map-get($mobile, columns);
			} @else {
				right: $mobileWidth * $columns;
			}
		}
	}

	@if $typology == all {
		@if $service == offset {
			@if $columns > map-get($desktop, columns) {
				@if $direction == right {
					margin-right: $desktopWidth * map-get($desktop, columns);
				} @else {
					margin-left: $desktopWidth * map-get($desktop, columns);
				}
			} @else {
				@if $direction == right {
					margin-right: $desktopWidth * $columns;
				} @else {
					margin-left: $desktopWidth * $columns;
				}
			}
		}
		@if $service == inset {
			@if $columns > map-get($desktop, columns) {
				@if $direction == right {
					padding-right: $desktopWidth * map-get($desktop, columns);
				} @else {
					padding-left: $desktopWidth * map-get($desktop, columns);
				}
			} @else {
				@if $direction == right {
					padding-right: $desktopWidth * $columns;
				} @else {
					padding-left: $desktopWidth * $columns;
				}
			}
		}
		@if $service == push {
			@if $columns > map-get($desktop, columns) {
				left: $desktopWidth * map-get($desktop, columns);
			} @else {
				left: $desktopWidth * $columns;
			}
		}
		@if $service == pull {
			@if $columns > map-get($desktop, columns) {
				right: $desktopWidth * map-get($desktop, columns);
			} @else {
				right: $desktopWidth * $columns;
			}
		}

		@media (max-width: map-get($mobile, media)) {
			@if $service == offset {
				@if $columns > map-get($mobile, columns) {
					@if $direction == right {
						margin-right: $mobileWidth * map-get($mobile, columns);
					} @else {
						margin-left: $mobileWidth * map-get($mobile, columns);
					}
				} @else {
					@if $direction == right {
						margin-right: $mobileWidth * $columns;
					} @else {
						margin-left: $mobileWidth * $columns;
					}
				}
			}
			@if $service == inset {
				@if $columns > map-get($mobile, columns) {
					@if $direction == right {
						padding-right: $mobileWidth * map-get($mobile, columns);
					} @else {
						padding-left: $mobileWidth * map-get($mobile, columns);
					}
				} @else {
					@if $direction == right {
						padding-right: $mobileWidth * $columns;
					} @else {
						padding-left: $mobileWidth * $columns;
					}
				}
			}
			@if $service == push {
				@if $columns > map-get($mobile, columns) {
					left: $mobileWidth * map-get($mobile, columns);
				} @else {
					left: $mobileWidth * $columns;
				}
			}
			@if $service == pull {
				@if $columns > map-get($mobile, columns) {
					right: $mobileWidth * map-get($mobile, columns);
				} @else {
					right: $mobileWidth * $columns;
				}
			}
		}
		@media (max-width: map-get($desktop, media)) {
			@if $service == offset {
				@if $columns > map-get($tablet, columns) {
					@if $direction == right {
						margin-right: $tabletWidth * map-get($tablet, columns);
					} @else {
						margin-left: $tabletWidth * map-get($tablet, columns);
					}
				} @else {
					@if $direction == right {
						margin-right: $tabletWidth * $columns;
					} @else {
						margin-left: $tabletWidth * $columns;
					}
				}
			}
			@if $service == inset {
				@if $columns > map-get($tablet, columns) {
					@if $direction == right {
						padding-right: $tabletWidth * map-get($tablet, columns);
					} @else {
						padding-left: $tabletWidth * map-get($tablet, columns);
					}
				} @else {
					@if $direction == right {
						padding-right: $tabletWidth * $columns;
					} @else {
						padding-left: $tabletWidth * $columns;
					}
				}
			}
			@if $service == push {
				@if $columns > map-get($tablet, columns) {
					left: $tabletWidth * map-get($tablet, columns);
				} @else {
					left: $tabletWidth * $columns;
				}
			}
			@if $service == pull {
				@if $columns > map-get($tablet, columns) {
					right: $tabletWidth * map-get($tablet, columns);
				} @else {
					right: $tabletWidth * $columns;
				}
			}
		}
		@media (min-width: map-get($large, media)) {
			@if $service == offset {
				@if $columns > map-get($large, columns) {
					@if $direction == right {
						margin-right: $largeWidth * map-get($large, columns);
					} @else {
						margin-left: $largeWidth * map-get($large, columns);
					}
				} @else {
					@if $direction == right {
						margin-right: $largeWidth * $columns;
					} @else {
						margin-left: $largeWidth * $columns;
					}
				}
			}
			@if $service == inset {
				@if $columns > map-get($large, columns) {
					@if $direction == right {
						padding-right: $largeWidth * map-get($large, columns);
					} @else {
						padding-left: $largeWidth * map-get($large, columns);
					}
				} @else {
					@if $direction == right {
						padding-right: $largeWidth * $columns;
					} @else {
						padding-left: $largeWidth * $columns;
					}
				}
			}
			@if $service == push {
				@if $columns > map-get($large, columns) {
					left: $largeWidth * map-get($large, columns);
				} @else {
					left: $largeWidth * $columns;
				}
			}
			@if $service == pull {
				@if $columns > map-get($large, columns) {
					right: $largeWidth * map-get($large, columns);
				} @else {
					right: $largeWidth * $columns;
				}
			}
		}
	}

	@each $key in map-keys($standard){
		@if $typology == $key {
			@if $service == offset {
				@if $direction == right {
					margin-right: map-get($standard, $key);
				} @else {
					margin-left: map-get($standard, $key);
				}
			}
			@if $service == inset {
				@if $direction == right {
					padding-right: map-get($standard, $key);
				} @else {
					padding-left: map-get($standard, $key);
				}
			}
			@if $service == push {
				left: map-get($standard, $key);
			}
			@if $service == pull {
				right: map-get($standard, $key);
			}
		}
	}

	@if $service == pull or $service == push {
		position: relative;
	}
}