Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.13)
// Compass (v1.0.3)
// ----

////
/// @group o-grid
/// @link http://registry.origami.ft.com/components/o-grid
////

// ----------------------------------------------------------------------------
// Responsive behaviour configuration
// ----------------------------------------------------------------------------

/// Silent mode
///
/// @type Bool
///
/// @link http://origami.ft.com/docs/syntax/scss/#silent-styles “Silent” styles in Origami's documentation
$o-grid-is-silent: true !default;

/// Grid mode
/// - fluid: full width until $o-grid-max-width (default: 1210px)
/// - snappy: fluid width until the layout defined in $o-grid-start-snappy-mode-at (default: M),
///           and then snaps into a larger fixed layout at each breakpoint
/// - fixed: always fixed-width with the layout defined by $o-grid-fixed-layout (default: L)
///
/// @type String - one of fluid (default), snappy, fixed
$o-grid-mode: 'fluid' !default;

/// Layout to default to when the grid has a fixed width (not fluid)
///
/// @type String - One of $o-grid-layouts
$o-grid-fixed-layout: 'L' !default;

/// When the grid start snapping between fixed-width layouts
/// in the case where a row has the `o-grid-row--snappy` class
///
/// @type String
$o-grid-start-snappy-mode-at: 'M' !default;

/// Show the currently active breakpoint and output loaded settings
/// @link https://github.com/sass-mq/sass-mq#seeing-the-currently-active-breakpoint
///
/// @type Bool
$o-grid-debug-mode: false !default;

/// Output IE 8-specific rules?
/// - false: no IE8 support at all
/// - 'only': serve code compatible with IE8 only
/// - 'inline' (default): serve IE8 specific code alongside modern browsers code
///
/// @type Bool | String
$o-grid-ie8-rules: 'inline' !default;


// ----------------------------------------------------------------------------
// Grid settings and dimensions
// ----------------------------------------------------------------------------

/// Number of columns
///
/// @type Number (unitless)
$o-grid-columns: 12 !default;

/// Gutter size, in pixels
///
/// @type Number
$o-grid-gutter: 10px !default;

/// Minimum width, in pixels
///
/// @type Number
$o-grid-min-width: 240px !default;

/// Full width of the grid: combined width of columns, gutters and outer margins
/// for a specific column width
///
/// @access private
///
/// @param {Number} column-width - desired width of a grid column
///
/// @returns {Number} width of the grid, in pixels
@function _oGridWidth($column-width) {
	$gutters-combined-width: $o-grid-gutter * ($o-grid-columns - 1) + 0px;
	$outer-margins-combined-width: $o-grid-gutter * 2 + 0px;
	@return ($column-width * $o-grid-columns) + $gutters-combined-width + $outer-margins-combined-width;
}

/// Layouts
///
/// Each layout is calculated following a specific column width,
/// in order to base breakpoints on the structure of the grid itself
///
/// @type Map
$o-grid-layouts: (
	S:  _oGridWidth($column-width: 30px), // 490px
	M:  _oGridWidth($column-width: 50px), // 730px
	L:  _oGridWidth($column-width: 70px), // 970px
	XL: _oGridWidth($column-width: 90px)  // 1210px
) !default;

/// Layout names
///
/// @access private
/// @type List
$_o-grid-layout-names: map-keys($o-grid-layouts) !default;

// When snappy mode is enabled, force $o-grid-max-width to the largest layout width
// instead of the default $o-grid-max-width
@if $o-grid-mode == 'snappy' {
	$o-grid-max-width: map-get($o-grid-layouts, nth($_o-grid-layout-names, -1)) !global;
}

/// Maximum grid width
/// Defaults to the largest layout width
///
/// @access private
/// @type Number
$_o-grid-max-width: map-get($o-grid-layouts, nth($_o-grid-layout-names, -1));

/// Current scope
///
/// @access private
/// @type String
$_o-grid-scope: 'global';

////
/// @group o-grid
/// @link http://registry.origami.ft.com/components/o-grid
////

/// Add a layout
///
/// @example scss
///  @include oGridAddLayout($layout-name: XS, $column-width: 20px);
///  @include oGridAddLayout($layout-name: P, $layout-width: 500px);
///
/// @param {String} $layout-name
/// @param {String} $column-width [null]
/// @param {String} $layout-width [null]
@mixin oGridAddLayout($layout-name, $column-width: null, $layout-width: null) {
	@if $column-width {
		$layout-width: _oGridWidth($column-width);
	}

	$temp-layouts: ();

	// Add the new layout in the correct position:
	// (we want $o-grid-layouts to ordered from the smallest to the largest layout)
	@for $index from 1 through length($o-grid-layouts) {
		$previous-layout-width: if($index == 1, 0, map-get($o-grid-layouts, nth($_o-grid-layout-names, $index - 1)));
		$current-layout-name: nth($_o-grid-layout-names, $index);
		$current-layout-width: map-get($o-grid-layouts, $current-layout-name);

		@if not ($previous-layout-width > $layout-width or $current-layout-width < $layout-width) {
			$temp-layouts: map-merge($temp-layouts, ($layout-name: $layout-width));
		}
		$temp-layouts: map-merge($temp-layouts, ($current-layout-name: $current-layout-width));
	}

	$o-grid-layouts: $temp-layouts !global;
	$_o-grid-layout-names: map-keys($o-grid-layouts) !global;
}

/// Get the max width of a layout
///
/// @example
///  .my-large-container { width: oGridGetMaxWidthForLayout(L); }
///
/// @param {String} $size - one of $layouts
/// @param {String} $grid-mode [$o-grid-mode]
@function oGridGetMaxWidthForLayout($layout-name, $grid-mode: $o-grid-mode) {
	$grid-is-responsive: $grid-mode != 'fixed';

	$index: index($_o-grid-layout-names, $layout-name);

	// Largest layout: return its width directly
	@if $index == length($_o-grid-layout-names) {
		@return $_o-grid-max-width;
	}

	// Smaller layouts:
	@if $grid-is-responsive {
		// - The grid is responsive (fluid or snappy):
		//   return the next larger layout width
		$next-layout: nth($_o-grid-layout-names, $index + 1);
		@return map-get($o-grid-layouts, $next-layout);
	} @else {
		// - The grid is fixed, return the current layout width
		@return map-get($o-grid-layouts, $layout-name);
	}
}

/// % width of an element in the grid
///
/// @example
///  .one-half   { width: oGridColspan(1/2); }      // 50%
///  .other-half { width: oGridColspan(one-half); } // 50%
///  .sidebar    { width: oGridColspan(5); }        // 41.66667%
///  .two-thirds { width: oGridColspan(2/3); }      // 66.66667%
///  .4-out-of-6 { width: oGridColspan(4, 6); }     // 66.66667%
///
/// @param {Number | String} $span - Number of columns the element spans over
/// @param {Number} $total-cols [$o-grid-columns] - Number of columns in the grid
///
/// @returns {Number} width of the element in the grid, in percents
@function oGridColspan($span, $total-cols: $o-grid-columns) {
	// Match the HTML helper API with human-friendly numbers
	@if $span == 'one-half'       { $span: 1/2; }
	@if $span == 'one-quarter'    { $span: 1/4; }
	@if $span == 'one-third'      { $span: 1/3; }
	@if $span == 'two-thirds'     { $span: 2/3; }
	@if $span == 'three-quarters' { $span: 3/4; }

	@if $span == 'full-width' {
		@return 100%;
	} @else {
		@if $span >= 1 {
			// A number of columns is supplied: converting it into a fraction
			// of the total number of columns
			@return percentage($span / $total-cols);
		} @else {
			// A fraction (1/2) or a number (0.5) is supplied:
			// converting it into a percentage
			@return percentage($span);
		}
	}
}

/// Alias for the oGridColspan function
///
/// @deprecated
@function oGridColumnWidth($span, $total-cols: $o-grid-columns) {
	@warn 'oGridColumnWidth() is deprecated, please use oGridColspan() instead';
	@return oGridColspan($span, $total-cols: $o-grid-columns);
}

/// Apply styles at a given layout size
/// Wrapper for the Sass MQ mq() mixin
///
/// @link https://git.io/sass-mq Sass MQ documentation
///
/// @example
///  // Turn the color of an element red at medium layout size and up
///  @include oGridRespondTo(M) {
///  	element {
///  		color: red;
///  	}
///  }
///  // Turn the color of an element blue until medium layout
///  element {
///  	@include oGridRespondTo($until: M) {
///  		color: blue;
///  	}
///  }
///  // Turn the color of an element green from small layout until medium layout
///  element {
///  	@include oGridRespondTo($from: S, $until: M) {
///  		color: green;
///  	}
///  }
///
/// @param {String} from - one of $o-grid-layouts
/// @param {String} until - one of $o-grid-layouts
@mixin oGridRespondTo($from: false, $until: false) {
	$grid-is-responsive: $o-grid-mode != 'fixed';

	$original-scope: $_o-grid-scope;
	$_o-grid-scope: 'respondTo' !global;

	@include mq(
		$from: $from,
		$until: $until,
		$responsive: $grid-is-responsive,
		$breakpoints: $o-grid-layouts,
		$static-breakpoint: $o-grid-fixed-layout
	) {
		@content;
	}

	// Restore previously set scope
	$_o-grid-scope: $original-scope !global;
}

/// Target styles at Internet Explorer 8 only
@mixin oGridTargetIE8 {
	// Users may target styles at IE8, but only in the global scope,
	// but it shouldn't output any code inside of a oGridRespondTo call
	@if 'global' == $_o-grid-scope {
		@if 'inline' == $o-grid-ie8-rules {
			@media \0screen {
				@content;
			}
		}
		@if 'only' == $o-grid-ie8-rules {
			@content;
		}
	}
}

/// Target styles at modern browsers that support @media queries properly
@mixin oGridTargetModernBrowsers {
	/// Output code as-is if called inside of a media query,
	/// since it will target modern browsers already
	@if $_o-grid-scope == 'respondTo' {
		@content;
	} @else {
		@if not ('only' == $o-grid-ie8-rules) {
			@media only screen {
				@content;
			}
		}
	}
}


/// Human friendly names for portions and centering:
///
/// - hide
/// - full-width
/// - one-half
/// - one-third
/// - two-thirds
/// - one-quarter
/// - three-quarters
/// - center
/// - uncenter
///
/// @access private
///
/// @param {String} $layout-name [null]
@mixin _oGridHumanFriendlyKeywords($layout-name: null) {
	[data-o-grid-colspan~="#{$layout-name}hide"],
	[data-o-grid-colspan~="#{$layout-name}0"] {
		display: none;
	}

	// Center and un-center
	[data-o-grid-colspan~="#{$layout-name}center"] {
		@include oGridCenter;
	}
	// Only output "uncenter" modifier with a layout (e.g. XLuncenter)
	@if $layout-name != null {
		[data-o-grid-colspan~="#{$layout-name}uncenter"] {
			@include oGridUncenter;
		}
	}

	// Pull, push, offset
	@for $colspan from 0 through ($o-grid-columns - 1) {
		[data-o-grid-colspan~="#{$layout-name}push#{$colspan}"] {
			@include oGridPush($colspan);
		}
		[data-o-grid-colspan~="#{$layout-name}pull#{$colspan}"] {
			@include oGridPull($colspan);
		}
		[data-o-grid-colspan~="#{$layout-name}offset#{$colspan}"] {
			@include oGridOffset($colspan);
		}
	}

	// Portions
	@each $human-friendly-name in (full-width, one-half, one-third, two-thirds, one-quarter, three-quarters) {
		[data-o-grid-colspan~="#{$layout-name}#{$human-friendly-name}"] {
			// Restore visibility from `display: none`
			// if `data-o-grid-colspan` was set to `0` or `hide`
			display: block;
			width: oGridColspan($human-friendly-name);
		}
	}
}

/// Base column styles
///
/// @example scss
///   el { @include oGridColumn; }
///   el { @include oGridColumn(4); }
///   el { @include oGridColumn(1/2); }
///   el { @include oGridColumn((default: 12, M: 8, L: hide)); }
///
/// @param {Number | Map} $layouts [null]
@mixin oGridColumn($span: null) {
	position: relative; // Required for push and pull
	padding-left: $o-grid-gutter / 2;
	padding-right: $o-grid-gutter / 2;
	float: left;
	box-sizing: border-box;

	@if $span {
		@include oGridColspan($span);
	}
}

/// Cross browser column widths across layouts
///
/// @param {Number | Map} $span
@mixin oGridColspan($span) {
	// Special case: the column is hidden by default
	@if $span == 'hide' {
		display: none;
	} @else {
		// $span is a number or a keyword, so we're outputting the default width for that column
		@if type-of($span) == number or type-of($span) == string {
			@include oGridTargetIE8 {
				width: oGridColspan($span);
			}
			@include oGridTargetModernBrowsers {
				width: oGridColspan($span);
			}
		}
	}

	// $span is a map, we're looping through all of the layouts
	@if type-of($span) == map {
		@each $layout-name, $layout-span in $span {
			@if $layout-name == 'default' {
				@if $layout-span == 'hide' {
					display: none;
				} @else {
					@include oGridTargetIE8 {
						display: block;
						width: oGridColspan($layout-span);
					}
					@include oGridTargetModernBrowsers {
						display: block;
						width: oGridColspan($layout-span);
					}
				}
			} @else {
				@if $layout-span == 'hide' {
					// Target IE8 only if the layout is smaller than the maximum width of the fixed layout
					@if index($_o-grid-layout-names, $layout-name) <= index($_o-grid-layout-names, $o-grid-fixed-layout) {
						@include oGridTargetIE8 {
							display: none;
						}
					}
					@include oGridRespondTo($layout-name) {
						display: none;
					}
				} @else {
					// Target IE8 only if the layout is smaller than the maximum width of the fixed layout
					@if index($_o-grid-layout-names, $layout-name) <= index($_o-grid-layout-names, $o-grid-fixed-layout) {
						@include oGridTargetIE8 {
							display: block;
							width: oGridColspan($layout-span);
						}
					}
					@include oGridRespondTo($layout-name) {
						display: block;
						width: oGridColspan($layout-span);
					}
				}
			}
		}
	}
}

/// Alias for the oGridColspan mixin
///
/// @deprecated
@mixin oGridColumnWidth($span) {
	@warn 'oGridColumnWidth() is deprecated, please use oGridColspan() instead';
	@include oGridColspan($span);
}

/// Base row styles
///
/// @param {String} $grid-mode [$o-grid-mode]
@mixin oGridRow($grid-mode: $o-grid-mode) {
	clear: both;
	min-width: $o-grid-min-width;
	// Older browsers get a fixed-width layout
	max-width: oGridGetMaxWidthForLayout($o-grid-fixed-layout);
	padding-left: $o-grid-gutter / 2;
	padding-right: $o-grid-gutter / 2;
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;

	// Clearfix
	zoom: 1;

	&:before,
	&:after {
		content: ' ';
		display: table;
	}
	&:after {
		clear: both;
	}

	// Serve a fixed-width layout to IE8
	@include oGridTargetIE8 {
		width: oGridGetMaxWidthForLayout($o-grid-fixed-layout, $grid-mode: 'fixed');
	}

	// Nested rows overrides
	// Substract outer gutter space from nested rows
	// and restore fluidity
	@if (& + '' == '.o-grid-row') {
		// Nested grid row: only reset grid rows
		.o-grid-row {
			@include oGridRowReset;
		}
	} @else {
		// Nested custom class: reset nested custom classes *and* grid rows
		& &,
		.o-grid-row {
			@include oGridRowReset;
		}
	}

	@if $grid-mode == 'fixed' {
		// If the grid isn't fluid, we set it to a certain width
		width: oGridGetMaxWidthForLayout($o-grid-fixed-layout, $grid-mode: 'fixed');
	} @else {
		max-width: $_o-grid-max-width;

		@if 'global' == $_o-grid-scope {
			@each $layout-name in $_o-grid-layout-names {
				@if index($_o-grid-layout-names, $layout-name) >= index($_o-grid-layout-names, $o-grid-start-snappy-mode-at) {
					@include oGridRespondTo($layout-name) {
						// If the grid mode is snappy, all rows should be snappy
						@if $grid-mode == 'snappy' {
							max-width: map-get($o-grid-layouts, $layout-name);
						}
						@if $grid-mode == 'fluid' {
							// If the grid mode is fluid, then use a class to make a row or a set of rows snappy
							.o-grid-snappy &,
							&--snappy {
								max-width: map-get($o-grid-layouts, $layout-name);
							}
						}
					}
				}
			}
		}
	}
}

/// Reset row styles
@mixin oGridRowReset {
	width: auto;
	min-width: 0;
	max-width: none;
	margin-left: -$o-grid-gutter / 2;
	margin-right: -$o-grid-gutter / 2;
	padding-left: 0;
	padding-right: 0;
}

/// Center column
@mixin oGridCenter {
	margin-left: auto;
	margin-right: auto;
	float: none;
}

/// Uncenter column
@mixin oGridUncenter {
	margin-left: 0;
	margin-right: 0;
	float: left;
}

/// Remove column styles
@mixin oGridResetColumn {
	padding-left: 0;
	padding-right: 0;
	float: none;
	width: auto;
}

/// Reorder visually: pull
///
/// @param {Number} $columns
@mixin oGridPull($columns) {
	right: oGridColspan($columns);
	left: auto;
}

/// Reorder visually: push
///
/// @param {Number} $columns
@mixin oGridPush($columns) {
	left: oGridColspan($columns);
	right: auto;
}

/// Offset: add space before a column
///
/// @param {Number} $columns
@mixin oGridOffset($columns) {
	margin-left: oGridColspan($columns);
}

/// Remove row styles
@mixin oGridResetRow {
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
	clear: none;
	width: auto;
	min-width: none;
	max-width: none;

	&:before,
	&:after {
		content: '';
		display: none;
	}
	&:after {
		clear: none;
	}

	.o-grid-row {
		margin-left: 0;
		margin-right: 0;
	}
}

/// Remove gutters from a column and re-align its child rows
///
/// @param {String} $side [null] - left, right
@mixin oGridRemoveGutters($side: null) {
	@if $side == null or $side == 'left' {
		padding-left: 0;

		.o-grid-row {
			margin-left: 0;
		}
	}
	@if $side == null or $side == 'right' {
		padding-right: 0;

		.o-grid-row {
			margin-right: 0;
		}
	}
}

/// Width and gutter removal modifiers for a given layout.
///
/// @output
///  [data-o-grid-colspan~="S1"] { width: %; }
///  .o-grid-remove-gutters--S { … }
///
/// @access private
///
/// @param {String} $layout-name - One of $o-grid-layouts
@mixin _oGridModifiersForLayout($layout-name) {
	@include _oGridHumanFriendlyKeywords($layout-name);

	@for $colspan from 1 through $o-grid-columns {
		[data-o-grid-colspan~="#{$layout-name}#{$colspan}"] {
			// Restore visibility from `display: none`
			// if `data-o-grid-colspan` was set to `0` or `hide`
			display: block;

			// Apply width in %
			width: oGridColspan($colspan, $o-grid-columns);
		}
	}

	// Gutter helpers:
	// Remove gutters on a row or a column for a given layout
	// Examples:
	//  <div class="o-row o-grid-remove-gutters--S"></div>
	//  <div data-o-grid-colspan="6" class="o-grid-remove-gutters--left--S"></div>
	.o-grid-remove-gutters--#{$layout-name},
	.o-grid-remove-gutters--left--#{$layout-name} {
		@include oGridRemoveGutters('left');
	}
	.o-grid-remove-gutters--#{$layout-name},
	.o-grid-remove-gutters--right--#{$layout-name} {
		@include oGridRemoveGutters('right');
	}
}


/// Generate the grid with helper classes for:
/// - older browsers (no columns, @media query support)
/// - IE 8 (fixed layout, with columns)
/// - modern browsers (fluid layout, with columns)
@mixin oGridGenerate {
	// Basic layout styles
	.o-grid-row {
		@include oGridRow($o-grid-mode);
	}
	[data-o-grid-colspan] {
		@include oGridColumn;
	}

	// If the grid is fluid, use this class to enable snappy mode on a set of rows
	@if $o-grid-mode == 'fluid' {
		.o-grid-snappy {
			margin-left: auto;
			margin-right: auto;
		}
	}

	@for $colspan from 1 through $o-grid-columns {
		[data-o-grid-colspan~="#{$colspan}"] {
			width: oGridColspan($colspan, $o-grid-columns);
		}
	}

	// Compact, gutterless row of columns
	.o-grid-row-compact, // Deprecated, here for retrocompatibility
	.o-grid-row--compact {
		&,
		> [data-o-grid-colspan] {
			@include oGridRemoveGutters;
		}
	}

	// one-half, one-third, three-quarters, center, uncenter…
	@include _oGridHumanFriendlyKeywords;

	// Gutter helpers:
	// Remove gutters on a row or a column, across all layouts
	.o-grid-remove-gutters,
	.o-grid-remove-gutters--left {
		@include oGridRemoveGutters('left');
	}
	.o-grid-remove-gutters,
	.o-grid-remove-gutters--right {
		@include oGridRemoveGutters('right');
	}

	// For IE 8, output grid helper classes and data- attributes
	// for the layout defined in $o-grid-fixed-layout
	@include oGridTargetIE8 {
		// Output grid modifiers for layouts up to the fixed layout displayed by IE8
		$last-layout-index: index($_o-grid-layout-names, $o-grid-fixed-layout);
		@for $index from 1 through $last-layout-index {
			@include _oGridModifiersForLayout(nth($_o-grid-layout-names, $index));
		}
	}

	// In browsers that support @media queries,
	// output grid helper classes and data- attributes for all layouts
	@each $layout-name in $_o-grid-layout-names {
		@include oGridRespondTo($layout-name) {
			@include _oGridModifiersForLayout($layout-name);
		}
	}
}