Skip to content

Instantly share code, notes, and snippets.

@kaelig

kaelig/SassMeister-input-HTML.html

Last active August 29, 2015 14:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kaelig/802fbdeadd3ade679506 to your computer and use it in GitHub Desktop.
Save kaelig/802fbdeadd3ade679506 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<!-- Constant column spans -->
<div class="o-grid-row">
<div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
<div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
<div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
<div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
<div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
<div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
<div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
<div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
<div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
<div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
<div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
<div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
</div>
<div class="o-grid-row">
<div data-o-grid-colspan="2"><div class="demo-cell">2</div></div>
<div data-o-grid-colspan="2"><div class="demo-cell">2</div></div>
<div data-o-grid-colspan="2"><div class="demo-cell">2</div></div>
<div data-o-grid-colspan="2"><div class="demo-cell">2</div></div>
<div data-o-grid-colspan="2"><div class="demo-cell">2</div></div>
<div data-o-grid-colspan="2"><div class="demo-cell">2</div></div>
</div>
<div class="o-grid-row">
<div data-o-grid-colspan="3"><div class="demo-cell">3</div></div>
<div data-o-grid-colspan="3"><div class="demo-cell">3</div></div>
<div data-o-grid-colspan="3"><div class="demo-cell">3</div></div>
<div data-o-grid-colspan="3"><div class="demo-cell">3</div></div>
</div>
<div class="o-grid-row">
<div data-o-grid-colspan="4"><div class="demo-cell">4</div></div>
<div data-o-grid-colspan="4"><div class="demo-cell">4</div></div>
<div data-o-grid-colspan="4"><div class="demo-cell">4</div></div>
</div>
<div class="o-grid-row">
<div data-o-grid-colspan="6"><div class="demo-cell">6</div></div>
<div data-o-grid-colspan="6"><div class="demo-cell">6</div></div>
</div>
<div class="o-grid-row">
<div data-o-grid-colspan="12"><div class="demo-cell">12</div></div>
</div>
<!-- Responsive column spans -->
<div class="o-grid-row">
<div data-o-grid-colspan="8 S12 M8">
<div class="demo-cell">
<span data-demo-highlight="default">8</span>
<span data-demo-highlight="S">S12</span>
<span data-demo-highlight="M L XL">M8</span>
<div class="o-grid-row">
<div data-o-grid-colspan="6 S12 M6 XL3">
<div class="demo-cell">
<span data-demo-highlight="default">6</span>
<span data-demo-highlight="S">S12</span>
<span data-demo-highlight="M L">M6</span>
<span data-demo-highlight="XL">XL3</span>
</div>
</div>
<div data-o-grid-colspan="6 S12 M6 XL3">
<div class="demo-cell">
<span data-demo-highlight="default">6</span>
<span data-demo-highlight="S">S12</span>
<span data-demo-highlight="M L">M6</span>
<span data-demo-highlight="XL">XL3</span>
</div>
</div>
<div data-o-grid-colspan="6 S12 M6 XL3">
<div class="demo-cell">
<span data-demo-highlight="default">6</span>
<span data-demo-highlight="S">S12</span>
<span data-demo-highlight="M L">M6</span>
<span data-demo-highlight="XL">XL3</span>
</div>
</div>
<div data-o-grid-colspan="6 S12 M6 XL3">
<div class="demo-cell">
<span data-demo-highlight="default">6</span>
<span data-demo-highlight="S">S12</span>
<span data-demo-highlight="M L">M6</span>
<span data-demo-highlight="XL">XL3</span>
</div>
</div>
</div>
</div>
</div>
<div data-o-grid-colspan="4 S12 M4">
<div class="demo-cell">
<span data-demo-highlight="default">4</span>
<span data-demo-highlight="S">S12</span>
<span data-demo-highlight="M L XL">M4</span>
<div class="o-grid-row">
<div data-o-grid-colspan="12 L7 XL6">
<div class="demo-cell">
<span data-demo-highlight="default S M">12</span>
<span data-demo-highlight="L">L7</span>
<span data-demo-highlight="XL">XL6</span>
</div>
</div>
<div data-o-grid-colspan="12 L5 XL6">
<div class="demo-cell">
<span data-demo-highlight="default S M">12</span>
<span data-demo-highlight="L">L5</span>
<span data-demo-highlight="XL">XL6</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Human friendly modifiers -->
<div class="o-grid-row">
<div data-o-grid-colspan="one-half">
<div class="demo-cell">
one-half
</div>
</div>
<div data-o-grid-colspan="one-quarter">
<div class="demo-cell">
one-quarter
</div>
</div>
<div data-o-grid-colspan="one-quarter">
<div class="demo-cell">
one-quarter
</div>
</div>
</div>
<div class="o-grid-row">
<div data-o-grid-colspan="one-third">
<div class="demo-cell">
one-third
</div>
</div>
<div data-o-grid-colspan="two-thirds">
<div class="demo-cell">
two-thirds
</div>
</div>
</div>
<div class="o-grid-row">
<div data-o-grid-colspan="one-third push8">
<div class="demo-cell">
one-third push8 (first in source)
</div>
</div>
<div data-o-grid-colspan="two-thirds pull4">
<div class="demo-cell">
two-thirds pull4 (last in source)
</div>
</div>
</div>
<div class="o-grid-row">
<div data-o-grid-colspan="one-third center">
<div class="demo-cell">
one-third center
</div>
</div>
</div>
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// sass-mq (v3.1.2)
// ----
$o-grid-is-silent: false;
$o-grid-debug-mode: true;
@import 'mq';
////
/// @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, $percentages: false) {
// Match the HTML helper API with human-friendly numbers
@if $percentages {
@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);
}
}
} @else {
@if $span == 'one-half' { @return $total-cols * 1/2; }
@if $span == 'one-quarter' { @return $total-cols * 1/4; }
@if $span == 'one-third' { @return $total-cols * 1/3; }
@if $span == 'two-thirds' { @return $total-cols * 2/3; }
@if $span == 'three-quarters' { @return $total-cols * 3/4; }
@if $span == 'full-width' { @return $total-cols; }
@if $span >= 1 { @return $span; }
@else { @return $total-cols * $span; }
}
}
/// Alias for the oGridColspan function
///
/// @deprecated
@function oGridColumnWidth($span, $total-cols: $o-grid-columns, $percentages: false) {
@warn 'oGridColumnWidth() is deprecated, please use oGridColspan() instead';
@return oGridColspan($span, $total-cols: $total-cols, $percentages: $percentages);
}
/// 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, $percentages: false) {
[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;
@if $percentages {
width: oGridColspan($human-friendly-name, $percentages: true);
} @else {
flex-shrink: oGridColspan($human-friendly-name);
flex-grow: oGridColspan($human-friendly-name);
@if $human-friendly-name == 'full-width' {
flex-basis: 100%;
} @else {
flex-basis: $o-grid-gutter;
}
}
}
}
}
/// Base column styles and responsive layout width
///
/// The difference between `oGridColumn($span)` and `oGridColspan($span)` is that
/// `oGridColumn` also outputs the base column styles for positioning and spacing
///
/// @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} $span [null]
@mixin oGridColumn($span: null, $percentages: false) {
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;
flex-basis: $o-grid-gutter;
@if $span {
@include oGridColspan($span, $percentages: $percentages);
} @else {
@if not $percentages {
flex: 1 1 $o-grid-gutter;
}
}
}
/// Cross browser column widths across layouts
///
/// @example scss
/// el { @include oGridColspan(4); }
/// el { @include oGridColspan(1/2); }
/// el { @include oGridColspan((default: 12, M: 8, L: hide)); }
///
/// @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, $percentages: true);
}
@include oGridTargetModernBrowsers {
flex-grow: oGridColspan($span);
flex-shrink: 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;
flex-grow: oGridColspan($layout-span);
flex-shrink: 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;
flex-grow: oGridColspan($layout-span);
flex-shrink: oGridColspan($layout-span);
}
}
}
}
}
}
/// Alias for the oGridColspan mixin
///
/// @deprecated
@mixin oGridColumnWidth($span, $percentages: false) {
@warn 'oGridColumnWidth() is deprecated, please use oGridColspan() instead';
@include oGridColspan($span, $percentages: $percentages);
}
/// 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;
display: flex;
flex-wrap: wrap;
// 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, $percentages: true);
left: auto;
}
/// Reorder visually: push
///
/// @param {Number} $columns
@mixin oGridPush($columns) {
left: oGridColspan($columns, $percentages: true);
right: auto;
}
/// Offset: add space before a column
///
/// @param {Number} $columns
@mixin oGridOffset($columns) {
margin-left: oGridColspan($columns, $percentages: true);
}
/// 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;
.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, $total-cols: $o-grid-columns, $percentages: false) {
@include _oGridHumanFriendlyKeywords($layout-name, $percentages: $percentages);
@for $colspan from 1 through $total-cols {
[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 %
@if $percentages {
width: oGridColspan($colspan, $total-cols: $total-cols, $percentages: true);
} @else {
flex-grow: oGridColspan($colspan, $total-cols: $total-cols);
flex-shrink: oGridColspan($colspan, $total-cols: $total-cols);
@if $colspan == 12 {
flex-basis: 100%;
} @else {
flex-basis: $o-grid-gutter;
}
}
}
}
// 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}"] {
@include oGridTargetIE8 {
width: oGridColspan($colspan, $o-grid-columns, $percentages: true);
}
flex-shrink: oGridColspan($colspan, $o-grid-columns);
flex-grow: oGridColspan($colspan, $o-grid-columns);
@if $colspan == 12 {
flex-basis: 100%;
}
}
}
// 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);
}
}
}
/// Output debug information about the currently loaded layouts.
///
/// @param {Map} $layouts - Map of layouts
@mixin oGridDebugInfo($layouts: $o-grid-layouts) {
/*! DEBUG
* Layouts:
* #{inspect($layouts)}
*/
}
@if $o-grid-debug-mode {
@include oGridDebugInfo;
@include mq-show-breakpoints($_o-grid-layout-names, $o-grid-layouts);
}
/// Surface the layout currently displayed to make it readable in JS.
///
/// In IE 8, assume it is `$o-grid-fixed-layout` (`L`).
///
/// **n.b.:** Only works when silent mode is off.
///
/// @example js
/// // your-app/main.js
/// var getCurrentLayout = require('o-grid').getCurrentLayout;
///
/// // Return the current layout (e.g. default, S, M, L, XL)
/// console.log(getCurrentLayout());
@mixin oGridSurfaceCurrentLayout {
html:after {
content: 'default'; // Default layout. Typically from 0px to S
display: none;
@each $breakpoint in $_o-grid-layout-names {
@include oGridRespondTo($breakpoint) {
content: quote($breakpoint);
}
}
}
}
@if $o-grid-is-silent == false {
@include oGridSurfaceCurrentLayout;
@include oGridGenerate;
// Turn silent mode back on to avoid outputting the grid twice
$o-grid-is-silent: true;
}
html {
/* Set a font family on the whole document */
font-family: BentonSans, sans-serif;
/* Prevent navigation menus from creating
extra space on sides of the page */
overflow-x: hidden;
}
body {
/* Remove space around the document */
margin: 0;
}
// Display configuration information
.test body:after {
content: '';
background-color: #fcf8e3;
border-bottom: 1px solid #fbeed5;
border-left: 1px solid #fbeed5;
color: #c09853;
font: small-caption;
padding: 3px 6px;
pointer-events: none;
position: fixed;
right: 0;
top: 25px;
z-index: 100;
}
.demo-cell {
background-color: transparent;
zoom: 1;
min-height: 2em;
text-align: center;
padding-top: 1rem;
overflow: hidden;
font-size: 1.3rem;
line-height: 1.2;
// Transparent background color in IE8
$rgba: rgba(#ffffff, 0.5);
$ie-hex-str: ie-hex-str($rgba);
// scss-lint:disable DuplicateProperty
background-color: $rgba;
// scss-lint:enable DuplicateProperty
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie-hex-str},endColorstr=#{$ie-hex-str});
}
.o-grid-row {
background: #f6e9d8;
margin-top: 1rem;
margin-bottom: 1rem;
.o-grid-row {
background: #cec6b9;
}
}
[data-demo-highlight] {
display: inline-block;
transition: 0.2s all 0.25s ease-in-out;
opacity: 0.6;
transform: scale(0.75);
}
@mixin demo-highlight($from: false, $until: false) {
@include oGridRespondTo($from: $from, $until: $until) {
transform: scale(1);
opacity: 1;
}
}
[data-demo-highlight*="default"] {
@include demo-highlight($until: S);
}
[data-demo-highlight*="S"] {
@include demo-highlight(S, M);
}
[data-demo-highlight*="M"] {
@include demo-highlight(M, L);
}
[data-demo-highlight="L"],
[data-demo-highlight*=" L"] {
@include demo-highlight(L, XL);
}
[data-demo-highlight*="XL"] {
@include demo-highlight(XL);
}
Raw
SassMeister-output.css
@charset "UTF-8";
/*! DEBUG
* Layouts:
* (S: 490px, M: 730px, L: 970px, XL: 1210px)
*/
body:before {
background-color: #FCF8E3;
border-bottom: 1px solid #FBEED5;
border-left: 1px solid #FBEED5;
color: #C09853;
font: small-caption;
padding: 3px 6px;
pointer-events: none;
position: fixed;
right: 0;
top: 0;
z-index: 100;
}
@media (min-width: 30.625em) {
body:before {
content: "S ≥ 490px (30.625em)";
}
}
@media (min-width: 45.625em) {
body:before {
content: "M ≥ 730px (45.625em)";
}
}
@media (min-width: 60.625em) {
body:before {
content: "L ≥ 970px (60.625em)";
}
}
@media (min-width: 75.625em) {
body:before {
content: "XL ≥ 1210px (75.625em)";
}
}
html:after {
content: 'default';
display: none;
}
@media (min-width: 30.625em) {
html:after {
content: "S";
}
}
@media (min-width: 45.625em) {
html:after {
content: "M";
}
}
@media (min-width: 60.625em) {
html:after {
content: "L";
}
}
@media (min-width: 75.625em) {
html:after {
content: "XL";
}
}
.o-grid-row {
clear: both;
min-width: 240px;
max-width: 1210px;
padding-left: 5px;
padding-right: 5px;
box-sizing: border-box;
margin-left: auto;
margin-right: auto;
display: flex;
flex-wrap: wrap;
max-width: 1210px;
}
@media \0screen {
.o-grid-row {
width: 970px;
}
}
.o-grid-row .o-grid-row {
width: auto;
min-width: 0;
max-width: none;
margin-left: -5px;
margin-right: -5px;
padding-left: 0;
padding-right: 0;
}
@media (min-width: 45.625em) {
.o-grid-snappy .o-grid-row, .o-grid-row--snappy {
max-width: 730px;
}
}
@media (min-width: 60.625em) {
.o-grid-snappy .o-grid-row, .o-grid-row--snappy {
max-width: 970px;
}
}
@media (min-width: 75.625em) {
.o-grid-snappy .o-grid-row, .o-grid-row--snappy {
max-width: 1210px;
}
}
[data-o-grid-colspan] {
position: relative;
padding-left: 5px;
padding-right: 5px;
float: left;
box-sizing: border-box;
flex-basis: 10px;
flex: 1 1 10px;
}
.o-grid-snappy {
margin-left: auto;
margin-right: auto;
}
[data-o-grid-colspan~="1"] {
flex-shrink: 1;
flex-grow: 1;
}
@media \0screen {
[data-o-grid-colspan~="1"] {
width: 8.33333%;
}
}
[data-o-grid-colspan~="2"] {
flex-shrink: 2;
flex-grow: 2;
}
@media \0screen {
[data-o-grid-colspan~="2"] {
width: 16.66667%;
}
}
[data-o-grid-colspan~="3"] {
flex-shrink: 3;
flex-grow: 3;
}
@media \0screen {
[data-o-grid-colspan~="3"] {
width: 25%;
}
}
[data-o-grid-colspan~="4"] {
flex-shrink: 4;
flex-grow: 4;
}
@media \0screen {
[data-o-grid-colspan~="4"] {
width: 33.33333%;
}
}
[data-o-grid-colspan~="5"] {
flex-shrink: 5;
flex-grow: 5;
}
@media \0screen {
[data-o-grid-colspan~="5"] {
width: 41.66667%;
}
}
[data-o-grid-colspan~="6"] {
flex-shrink: 6;
flex-grow: 6;
}
@media \0screen {
[data-o-grid-colspan~="6"] {
width: 50%;
}
}
[data-o-grid-colspan~="7"] {
flex-shrink: 7;
flex-grow: 7;
}
@media \0screen {
[data-o-grid-colspan~="7"] {
width: 58.33333%;
}
}
[data-o-grid-colspan~="8"] {
flex-shrink: 8;
flex-grow: 8;
}
@media \0screen {
[data-o-grid-colspan~="8"] {
width: 66.66667%;
}
}
[data-o-grid-colspan~="9"] {
flex-shrink: 9;
flex-grow: 9;
}
@media \0screen {
[data-o-grid-colspan~="9"] {
width: 75%;
}
}
[data-o-grid-colspan~="10"] {
flex-shrink: 10;
flex-grow: 10;
}
@media \0screen {
[data-o-grid-colspan~="10"] {
width: 83.33333%;
}
}
[data-o-grid-colspan~="11"] {
flex-shrink: 11;
flex-grow: 11;
}
@media \0screen {
[data-o-grid-colspan~="11"] {
width: 91.66667%;
}
}
[data-o-grid-colspan~="12"] {
flex-shrink: 12;
flex-grow: 12;
flex-basis: 100%;
}
@media \0screen {
[data-o-grid-colspan~="12"] {
width: 100%;
}
}
.o-grid-row-compact,
.o-grid-row-compact > [data-o-grid-colspan],
.o-grid-row--compact,
.o-grid-row--compact > [data-o-grid-colspan] {
padding-left: 0;
padding-right: 0;
}
.o-grid-row-compact .o-grid-row,
.o-grid-row-compact > [data-o-grid-colspan] .o-grid-row,
.o-grid-row--compact .o-grid-row,
.o-grid-row--compact > [data-o-grid-colspan] .o-grid-row {
margin-left: 0;
}
.o-grid-row-compact .o-grid-row,
.o-grid-row-compact > [data-o-grid-colspan] .o-grid-row,
.o-grid-row--compact .o-grid-row,
.o-grid-row--compact > [data-o-grid-colspan] .o-grid-row {
margin-right: 0;
}
[data-o-grid-colspan~="hide"],
[data-o-grid-colspan~="0"] {
display: none;
}
[data-o-grid-colspan~="center"] {
margin-left: auto;
margin-right: auto;
float: none;
}
[data-o-grid-colspan~="push0"] {
left: 0%;
right: auto;
}
[data-o-grid-colspan~="pull0"] {
right: 0%;
left: auto;
}
[data-o-grid-colspan~="offset0"] {
margin-left: 0%;
}
[data-o-grid-colspan~="push1"] {
left: 8.33333%;
right: auto;
}
[data-o-grid-colspan~="pull1"] {
right: 8.33333%;
left: auto;
}
[data-o-grid-colspan~="offset1"] {
margin-left: 8.33333%;
}
[data-o-grid-colspan~="push2"] {
left: 16.66667%;
right: auto;
}
[data-o-grid-colspan~="pull2"] {
right: 16.66667%;
left: auto;
}
[data-o-grid-colspan~="offset2"] {
margin-left: 16.66667%;
}
[data-o-grid-colspan~="push3"] {
left: 25%;
right: auto;
}
[data-o-grid-colspan~="pull3"] {
right: 25%;
left: auto;
}
[data-o-grid-colspan~="offset3"] {
margin-left: 25%;
}
[data-o-grid-colspan~="push4"] {
left: 33.33333%;
right: auto;
}
[data-o-grid-colspan~="pull4"] {
right: 33.33333%;
left: auto;
}
[data-o-grid-colspan~="offset4"] {
margin-left: 33.33333%;
}
[data-o-grid-colspan~="push5"] {
left: 41.66667%;
right: auto;
}
[data-o-grid-colspan~="pull5"] {
right: 41.66667%;
left: auto;
}
[data-o-grid-colspan~="offset5"] {
margin-left: 41.66667%;
}
[data-o-grid-colspan~="push6"] {
left: 50%;
right: auto;
}
[data-o-grid-colspan~="pull6"] {
right: 50%;
left: auto;
}
[data-o-grid-colspan~="offset6"] {
margin-left: 50%;
}
[data-o-grid-colspan~="push7"] {
left: 58.33333%;
right: auto;
}
[data-o-grid-colspan~="pull7"] {
right: 58.33333%;
left: auto;
}
[data-o-grid-colspan~="offset7"] {
margin-left: 58.33333%;
}
[data-o-grid-colspan~="push8"] {
left: 66.66667%;
right: auto;
}
[data-o-grid-colspan~="pull8"] {
right: 66.66667%;
left: auto;
}
[data-o-grid-colspan~="offset8"] {
margin-left: 66.66667%;
}
[data-o-grid-colspan~="push9"] {
left: 75%;
right: auto;
}
[data-o-grid-colspan~="pull9"] {
right: 75%;
left: auto;
}
[data-o-grid-colspan~="offset9"] {
margin-left: 75%;
}
[data-o-grid-colspan~="push10"] {
left: 83.33333%;
right: auto;
}
[data-o-grid-colspan~="pull10"] {
right: 83.33333%;
left: auto;
}
[data-o-grid-colspan~="offset10"] {
margin-left: 83.33333%;
}
[data-o-grid-colspan~="push11"] {
left: 91.66667%;
right: auto;
}
[data-o-grid-colspan~="pull11"] {
right: 91.66667%;
left: auto;
}
[data-o-grid-colspan~="offset11"] {
margin-left: 91.66667%;
}
[data-o-grid-colspan~="full-width"] {
display: block;
flex-shrink: 12;
flex-grow: 12;
flex-basis: 100%;
}
[data-o-grid-colspan~="one-half"] {
display: block;
flex-shrink: 6;
flex-grow: 6;
flex-basis: 10px;
}
[data-o-grid-colspan~="one-third"] {
display: block;
flex-shrink: 4;
flex-grow: 4;
flex-basis: 10px;
}
[data-o-grid-colspan~="two-thirds"] {
display: block;
flex-shrink: 8;
flex-grow: 8;
flex-basis: 10px;
}
[data-o-grid-colspan~="one-quarter"] {
display: block;
flex-shrink: 3;
flex-grow: 3;
flex-basis: 10px;
}
[data-o-grid-colspan~="three-quarters"] {
display: block;
flex-shrink: 9;
flex-grow: 9;
flex-basis: 10px;
}
.o-grid-remove-gutters,
.o-grid-remove-gutters--left {
padding-left: 0;
}
.o-grid-remove-gutters .o-grid-row,
.o-grid-remove-gutters--left .o-grid-row {
margin-left: 0;
}
.o-grid-remove-gutters,
.o-grid-remove-gutters--right {
padding-right: 0;
}
.o-grid-remove-gutters .o-grid-row,
.o-grid-remove-gutters--right .o-grid-row {
margin-right: 0;
}
@media \0screen {
[data-o-grid-colspan~="Shide"],
[data-o-grid-colspan~="S0"] {
display: none;
}
[data-o-grid-colspan~="Scenter"] {
margin-left: auto;
margin-right: auto;
float: none;
}
[data-o-grid-colspan~="Suncenter"] {
margin-left: 0;
margin-right: 0;
float: left;
}
[data-o-grid-colspan~="Spush0"] {
left: 0%;
right: auto;
}
[data-o-grid-colspan~="Spull0"] {
right: 0%;
left: auto;
}
[data-o-grid-colspan~="Soffset0"] {
margin-left: 0%;
}
[data-o-grid-colspan~="Spush1"] {
left: 8.33333%;
right: auto;
}
[data-o-grid-colspan~="Spull1"] {
right: 8.33333%;
left: auto;
}
[data-o-grid-colspan~="Soffset1"] {
margin-left: 8.33333%;
}
[data-o-grid-colspan~="Spush2"] {
left: 16.66667%;
right: auto;
}
[data-o-grid-colspan~="Spull2"] {
right: 16.66667%;
left: auto;
}
[data-o-grid-colspan~="Soffset2"] {
margin-left: 16.66667%;
}
[data-o-grid-colspan~="Spush3"] {
left: 25%;
right: auto;
}
[data-o-grid-colspan~="Spull3"] {
right: 25%;
left: auto;
}
[data-o-grid-colspan~="Soffset3"] {
margin-left: 25%;
}
[data-o-grid-colspan~="Spush4"] {
left: 33.33333%;
right: auto;
}
[data-o-grid-colspan~="Spull4"] {
right: 33.33333%;
left: auto;
}
[data-o-grid-colspan~="Soffset4"] {
margin-left: 33.33333%;
}
[data-o-grid-colspan~="Spush5"] {
left: 41.66667%;
right: auto;
}
[data-o-grid-colspan~="Spull5"] {
right: 41.66667%;
left: auto;
}
[data-o-grid-colspan~="Soffset5"] {
margin-left: 41.66667%;
}
[data-o-grid-colspan~="Spush6"] {
left: 50%;
right: auto;
}
[data-o-grid-colspan~="Spull6"] {
right: 50%;
left: auto;
}
[data-o-grid-colspan~="Soffset6"] {
margin-left: 50%;
}
[data-o-grid-colspan~="Spush7"] {
left: 58.33333%;
right: auto;
}
[data-o-grid-colspan~="Spull7"] {
right: 58.33333%;
left: auto;
}
[data-o-grid-colspan~="Soffset7"] {
margin-left: 58.33333%;
}
[data-o-grid-colspan~="Spush8"] {
left: 66.66667%;
right: auto;
}
[data-o-grid-colspan~="Spull8"] {
right: 66.66667%;
left: auto;
}
[data-o-grid-colspan~="Soffset8"] {
margin-left: 66.66667%;
}
[data-o-grid-colspan~="Spush9"] {
left: 75%;
right: auto;
}
[data-o-grid-colspan~="Spull9"] {
right: 75%;
left: auto;
}
[data-o-grid-colspan~="Soffset9"] {
margin-left: 75%;
}
[data-o-grid-colspan~="Spush10"] {
left: 83.33333%;
right: auto;
}
[data-o-grid-colspan~="Spull10"] {
right: 83.33333%;
left: auto;
}
[data-o-grid-colspan~="Soffset10"] {
margin-left: 83.33333%;
}
[data-o-grid-colspan~="Spush11"] {
left: 91.66667%;
right: auto;
}
[data-o-grid-colspan~="Spull11"] {
right: 91.66667%;
left: auto;
}
[data-o-grid-colspan~="Soffset11"] {
margin-left: 91.66667%;
}
[data-o-grid-colspan~="Sfull-width"] {
display: block;
flex-shrink: 12;
flex-grow: 12;
flex-basis: 100%;
}
[data-o-grid-colspan~="Sone-half"] {
display: block;
flex-shrink: 6;
flex-grow: 6;
flex-basis: 10px;
}
[data-o-grid-colspan~="Sone-third"] {
display: block;
flex-shrink: 4;
flex-grow: 4;
flex-basis: 10px;
}
[data-o-grid-colspan~="Stwo-thirds"] {
display: block;
flex-shrink: 8;
flex-grow: 8;
flex-basis: 10px;
}
[data-o-grid-colspan~="Sone-quarter"] {
display: block;
flex-shrink: 3;
flex-grow: 3;
flex-basis: 10px;
}
[data-o-grid-colspan~="Sthree-quarters"] {
display: block;
flex-shrink: 9;
flex-grow: 9;
flex-basis: 10px;
}
[data-o-grid-colspan~="S1"] {
display: block;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 10px;
}
[data-o-grid-colspan~="S2"] {
display: block;
flex-grow: 2;
flex-shrink: 2;
flex-basis: 10px;
}
[data-o-grid-colspan~="S3"] {
display: block;
flex-grow: 3;
flex-shrink: 3;
flex-basis: 10px;
}
[data-o-grid-colspan~="S4"] {
display: block;
flex-grow: 4;
flex-shrink: 4;
flex-basis: 10px;
}
[data-o-grid-colspan~="S5"] {
display: block;
flex-grow: 5;
flex-shrink: 5;
flex-basis: 10px;
}
[data-o-grid-colspan~="S6"] {
display: block;
flex-grow: 6;
flex-shrink: 6;
flex-basis: 10px;
}
[data-o-grid-colspan~="S7"] {
display: block;
flex-grow: 7;
flex-shrink: 7;
flex-basis: 10px;
}
[data-o-grid-colspan~="S8"] {
display: block;
flex-grow: 8;
flex-shrink: 8;
flex-basis: 10px;
}
[data-o-grid-colspan~="S9"] {
display: block;
flex-grow: 9;
flex-shrink: 9;
flex-basis: 10px;
}
[data-o-grid-colspan~="S10"] {
display: block;
flex-grow: 10;
flex-shrink: 10;
flex-basis: 10px;
}
[data-o-grid-colspan~="S11"] {
display: block;
flex-grow: 11;
flex-shrink: 11;
flex-basis: 10px;
}
[data-o-grid-colspan~="S12"] {
display: block;
flex-grow: 12;
flex-shrink: 12;
flex-basis: 100%;
}
.o-grid-remove-gutters--S,
.o-grid-remove-gutters--left--S {
padding-left: 0;
}
.o-grid-remove-gutters--S .o-grid-row,
.o-grid-remove-gutters--left--S .o-grid-row {
margin-left: 0;
}
.o-grid-remove-gutters--S,
.o-grid-remove-gutters--right--S {
padding-right: 0;
}
.o-grid-remove-gutters--S .o-grid-row,
.o-grid-remove-gutters--right--S .o-grid-row {
margin-right: 0;
}
[data-o-grid-colspan~="Mhide"],
[data-o-grid-colspan~="M0"] {
display: none;
}
[data-o-grid-colspan~="Mcenter"] {
margin-left: auto;
margin-right: auto;
float: none;
}
[data-o-grid-colspan~="Muncenter"] {
margin-left: 0;
margin-right: 0;
float: left;
}
[data-o-grid-colspan~="Mpush0"] {
left: 0%;
right: auto;
}
[data-o-grid-colspan~="Mpull0"] {
right: 0%;
left: auto;
}
[data-o-grid-colspan~="Moffset0"] {
margin-left: 0%;
}
[data-o-grid-colspan~="Mpush1"] {
left: 8.33333%;
right: auto;
}
[data-o-grid-colspan~="Mpull1"] {
right: 8.33333%;
left: auto;
}
[data-o-grid-colspan~="Moffset1"] {
margin-left: 8.33333%;
}
[data-o-grid-colspan~="Mpush2"] {
left: 16.66667%;
right: auto;
}
[data-o-grid-colspan~="Mpull2"] {
right: 16.66667%;
left: auto;
}
[data-o-grid-colspan~="Moffset2"] {
margin-left: 16.66667%;
}
[data-o-grid-colspan~="Mpush3"] {
left: 25%;
right: auto;
}
[data-o-grid-colspan~="Mpull3"] {
right: 25%;
left: auto;
}
[data-o-grid-colspan~="Moffset3"] {
margin-left: 25%;
}
[data-o-grid-colspan~="Mpush4"] {
left: 33.33333%;
right: auto;
}
[data-o-grid-colspan~="Mpull4"] {
right: 33.33333%;
left: auto;
}
[data-o-grid-colspan~="Moffset4"] {
margin-left: 33.33333%;
}
[data-o-grid-colspan~="Mpush5"] {
left: 41.66667%;
right: auto;
}
[data-o-grid-colspan~="Mpull5"] {
right: 41.66667%;
left: auto;
}
[data-o-grid-colspan~="Moffset5"] {
margin-left: 41.66667%;
}
[data-o-grid-colspan~="Mpush6"] {
left: 50%;
right: auto;
}
[data-o-grid-colspan~="Mpull6"] {
right: 50%;
left: auto;
}
[data-o-grid-colspan~="Moffset6"] {
margin-left: 50%;
}
[data-o-grid-colspan~="Mpush7"] {
left: 58.33333%;
right: auto;
}
[data-o-grid-colspan~="Mpull7"] {
right: 58.33333%;
left: auto;
}
[data-o-grid-colspan~="Moffset7"] {
margin-left: 58.33333%;
}
[data-o-grid-colspan~="Mpush8"] {
left: 66.66667%;
right: auto;
}
[data-o-grid-colspan~="Mpull8"] {
right: 66.66667%;
left: auto;
}
[data-o-grid-colspan~="Moffset8"] {
margin-left: 66.66667%;
}
[data-o-grid-colspan~="Mpush9"] {
left: 75%;
right: auto;
}
[data-o-grid-colspan~="Mpull9"] {
right: 75%;
left: auto;
}
[data-o-grid-colspan~="Moffset9"] {
margin-left: 75%;
}
[data-o-grid-colspan~="Mpush10"] {
left: 83.33333%;
right: auto;
}
[data-o-grid-colspan~="Mpull10"] {
right: 83.33333%;
left: auto;
}
[data-o-grid-colspan~="Moffset10"] {
margin-left: 83.33333%;
}
[data-o-grid-colspan~="Mpush11"] {
left: 91.66667%;
right: auto;
}
[data-o-grid-colspan~="Mpull11"] {
right: 91.66667%;
left: auto;
}
[data-o-grid-colspan~="Moffset11"] {
margin-left: 91.66667%;
}
[data-o-grid-colspan~="Mfull-width"] {
display: block;
flex-shrink: 12;
flex-grow: 12;
flex-basis: 100%;
}
[data-o-grid-colspan~="Mone-half"] {
display: block;
flex-shrink: 6;
flex-grow: 6;
flex-basis: 10px;
}
[data-o-grid-colspan~="Mone-third"] {
display: block;
flex-shrink: 4;
flex-grow: 4;
flex-basis: 10px;
}
[data-o-grid-colspan~="Mtwo-thirds"] {
display: block;
flex-shrink: 8;
flex-grow: 8;
flex-basis: 10px;
}
[data-o-grid-colspan~="Mone-quarter"] {
display: block;
flex-shrink: 3;
flex-grow: 3;
flex-basis: 10px;
}
[data-o-grid-colspan~="Mthree-quarters"] {
display: block;
flex-shrink: 9;
flex-grow: 9;
flex-basis: 10px;
}
[data-o-grid-colspan~="M1"] {
display: block;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 10px;
}
[data-o-grid-colspan~="M2"] {
display: block;
flex-grow: 2;
flex-shrink: 2;
flex-basis: 10px;
}
[data-o-grid-colspan~="M3"] {
display: block;
flex-grow: 3;
flex-shrink: 3;
flex-basis: 10px;
}
[data-o-grid-colspan~="M4"] {
display: block;
flex-grow: 4;
flex-shrink: 4;
flex-basis: 10px;
}
[data-o-grid-colspan~="M5"] {
display: block;
flex-grow: 5;
flex-shrink: 5;
flex-basis: 10px;
}
[data-o-grid-colspan~="M6"] {
display: block;
flex-grow: 6;
flex-shrink: 6;
flex-basis: 10px;
}
[data-o-grid-colspan~="M7"] {
display: block;
flex-grow: 7;
flex-shrink: 7;
flex-basis: 10px;
}
[data-o-grid-colspan~="M8"] {
display: block;
flex-grow: 8;
flex-shrink: 8;
flex-basis: 10px;
}
[data-o-grid-colspan~="M9"] {
display: block;
flex-grow: 9;
flex-shrink: 9;
flex-basis: 10px;
}
[data-o-grid-colspan~="M10"] {
display: block;
flex-grow: 10;
flex-shrink: 10;
flex-basis: 10px;
}
[data-o-grid-colspan~="M11"] {
display: block;
flex-grow: 11;
flex-shrink: 11;
flex-basis: 10px;
}
[data-o-grid-colspan~="M12"] {
display: block;
flex-grow: 12;
flex-shrink: 12;
flex-basis: 100%;
}
.o-grid-remove-gutters--M,
.o-grid-remove-gutters--left--M {
padding-left: 0;
}
.o-grid-remove-gutters--M .o-grid-row,
.o-grid-remove-gutters--left--M .o-grid-row {
margin-left: 0;
}
.o-grid-remove-gutters--M,
.o-grid-remove-gutters--right--M {
padding-right: 0;
}
.o-grid-remove-gutters--M .o-grid-row,
.o-grid-remove-gutters--right--M .o-grid-row {
margin-right: 0;
}
[data-o-grid-colspan~="Lhide"],
[data-o-grid-colspan~="L0"] {
display: none;
}
[data-o-grid-colspan~="Lcenter"] {
margin-left: auto;
margin-right: auto;
float: none;
}
[data-o-grid-colspan~="Luncenter"] {
margin-left: 0;
margin-right: 0;
float: left;
}
[data-o-grid-colspan~="Lpush0"] {
left: 0%;
right: auto;
}
[data-o-grid-colspan~="Lpull0"] {
right: 0%;
left: auto;
}
[data-o-grid-colspan~="Loffset0"] {
margin-left: 0%;
}
[data-o-grid-colspan~="Lpush1"] {
left: 8.33333%;
right: auto;
}
[data-o-grid-colspan~="Lpull1"] {
right: 8.33333%;
left: auto;
}
[data-o-grid-colspan~="Loffset1"] {
margin-left: 8.33333%;
}
[data-o-grid-colspan~="Lpush2"] {
left: 16.66667%;
right: auto;
}
[data-o-grid-colspan~="Lpull2"] {
right: 16.66667%;
left: auto;
}
[data-o-grid-colspan~="Loffset2"] {
margin-left: 16.66667%;
}
[data-o-grid-colspan~="Lpush3"] {
left: 25%;
right: auto;
}
[data-o-grid-colspan~="Lpull3"] {
right: 25%;
left: auto;
}
[data-o-grid-colspan~="Loffset3"] {
margin-left: 25%;
}
[data-o-grid-colspan~="Lpush4"] {
left: 33.33333%;
right: auto;
}
[data-o-grid-colspan~="Lpull4"] {
right: 33.33333%;
left: auto;
}
[data-o-grid-colspan~="Loffset4"] {
margin-left: 33.33333%;
}
[data-o-grid-colspan~="Lpush5"] {
left: 41.66667%;
right: auto;
}
[data-o-grid-colspan~="Lpull5"] {
right: 41.66667%;
left: auto;
}
[data-o-grid-colspan~="Loffset5"] {
margin-left: 41.66667%;
}
[data-o-grid-colspan~="Lpush6"] {
left: 50%;
right: auto;
}
[data-o-grid-colspan~="Lpull6"] {
right: 50%;
left: auto;
}
[data-o-grid-colspan~="Loffset6"] {
margin-left: 50%;
}
[data-o-grid-colspan~="Lpush7"] {
left: 58.33333%;
right: auto;
}
[data-o-grid-colspan~="Lpull7"] {
right: 58.33333%;
left: auto;
}
[data-o-grid-colspan~="Loffset7"] {
margin-left: 58.33333%;
}
[data-o-grid-colspan~="Lpush8"] {
left: 66.66667%;
right: auto;
}
[data-o-grid-colspan~="Lpull8"] {
right: 66.66667%;
left: auto;
}
[data-o-grid-colspan~="Loffset8"] {
margin-left: 66.66667%;
}
[data-o-grid-colspan~="Lpush9"] {
left: 75%;
right: auto;
}
[data-o-grid-colspan~="Lpull9"] {
right: 75%;
left: auto;
}
[data-o-grid-colspan~="Loffset9"] {
margin-left: 75%;
}
[data-o-grid-colspan~="Lpush10"] {
left: 83.33333%;
right: auto;
}
[data-o-grid-colspan~="Lpull10"] {
right: 83.33333%;
left: auto;
}
[data-o-grid-colspan~="Loffset10"] {
margin-left: 83.33333%;
}
[data-o-grid-colspan~="Lpush11"] {
left: 91.66667%;
right: auto;
}
[data-o-grid-colspan~="Lpull11"] {
right: 91.66667%;
left: auto;
}
[data-o-grid-colspan~="Loffset11"] {
margin-left: 91.66667%;
}
[data-o-grid-colspan~="Lfull-width"] {
display: block;
flex-shrink: 12;
flex-grow: 12;
flex-basis: 100%;
}
[data-o-grid-colspan~="Lone-half"] {
display: block;
flex-shrink: 6;
flex-grow: 6;
flex-basis: 10px;
}
[data-o-grid-colspan~="Lone-third"] {
display: block;
flex-shrink: 4;
flex-grow: 4;
flex-basis: 10px;
}
[data-o-grid-colspan~="Ltwo-thirds"] {
display: block;
flex-shrink: 8;
flex-grow: 8;
flex-basis: 10px;
}
[data-o-grid-colspan~="Lone-quarter"] {
display: block;
flex-shrink: 3;
flex-grow: 3;
flex-basis: 10px;
}
[data-o-grid-colspan~="Lthree-quarters"] {
display: block;
flex-shrink: 9;
flex-grow: 9;
flex-basis: 10px;
}
[data-o-grid-colspan~="L1"] {
display: block;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 10px;
}
[data-o-grid-colspan~="L2"] {
display: block;
flex-grow: 2;
flex-shrink: 2;
flex-basis: 10px;
}
[data-o-grid-colspan~="L3"] {
display: block;
flex-grow: 3;
flex-shrink: 3;
flex-basis: 10px;
}
[data-o-grid-colspan~="L4"] {
display: block;
flex-grow: 4;
flex-shrink: 4;
flex-basis: 10px;
}
[data-o-grid-colspan~="L5"] {
display: block;
flex-grow: 5;
flex-shrink: 5;
flex-basis: 10px;
}
[data-o-grid-colspan~="L6"] {
display: block;
flex-grow: 6;
flex-shrink: 6;
flex-basis: 10px;
}
[data-o-grid-colspan~="L7"] {
display: block;
flex-grow: 7;
flex-shrink: 7;
flex-basis: 10px;
}
[data-o-grid-colspan~="L8"] {
display: block;
flex-grow: 8;
flex-shrink: 8;
flex-basis: 10px;
}
[data-o-grid-colspan~="L9"] {
display: block;
flex-grow: 9;
flex-shrink: 9;
flex-basis: 10px;
}
[data-o-grid-colspan~="L10"] {
display: block;
flex-grow: 10;
flex-shrink: 10;
flex-basis: 10px;
}
[data-o-grid-colspan~="L11"] {
display: block;
flex-grow: 11;
flex-shrink: 11;
flex-basis: 10px;
}
[data-o-grid-colspan~="L12"] {
display: block;
flex-grow: 12;
flex-shrink: 12;
flex-basis: 100%;
}
.o-grid-remove-gutters--L,
.o-grid-remove-gutters--left--L {
padding-left: 0;
}
.o-grid-remove-gutters--L .o-grid-row,
.o-grid-remove-gutters--left--L .o-grid-row {
margin-left: 0;
}
.o-grid-remove-gutters--L,
.o-grid-remove-gutters--right--L {
padding-right: 0;
}
.o-grid-remove-gutters--L .o-grid-row,
.o-grid-remove-gutters--right--L .o-grid-row {
margin-right: 0;
}
}
@media (min-width: 30.625em) {
[data-o-grid-colspan~="Shide"],
[data-o-grid-colspan~="S0"] {
display: none;
}
[data-o-grid-colspan~="Scenter"] {
margin-left: auto;
margin-right: auto;
float: none;
}
[data-o-grid-colspan~="Suncenter"] {
margin-left: 0;
margin-right: 0;
float: left;
}
[data-o-grid-colspan~="Spush0"] {
left: 0%;
right: auto;
}
[data-o-grid-colspan~="Spull0"] {
right: 0%;
left: auto;
}
[data-o-grid-colspan~="Soffset0"] {
margin-left: 0%;
}
[data-o-grid-colspan~="Spush1"] {
left: 8.33333%;
right: auto;
}
[data-o-grid-colspan~="Spull1"] {
right: 8.33333%;
left: auto;
}
[data-o-grid-colspan~="Soffset1"] {
margin-left: 8.33333%;
}
[data-o-grid-colspan~="Spush2"] {
left: 16.66667%;
right: auto;
}
[data-o-grid-colspan~="Spull2"] {
right: 16.66667%;
left: auto;
}
[data-o-grid-colspan~="Soffset2"] {
margin-left: 16.66667%;
}
[data-o-grid-colspan~="Spush3"] {
left: 25%;
right: auto;
}
[data-o-grid-colspan~="Spull3"] {
right: 25%;
left: auto;
}
[data-o-grid-colspan~="Soffset3"] {
margin-left: 25%;
}
[data-o-grid-colspan~="Spush4"] {
left: 33.33333%;
right: auto;
}
[data-o-grid-colspan~="Spull4"] {
right: 33.33333%;
left: auto;
}
[data-o-grid-colspan~="Soffset4"] {
margin-left: 33.33333%;
}
[data-o-grid-colspan~="Spush5"] {
left: 41.66667%;
right: auto;
}
[data-o-grid-colspan~="Spull5"] {
right: 41.66667%;
left: auto;
}
[data-o-grid-colspan~="Soffset5"] {
margin-left: 41.66667%;
}
[data-o-grid-colspan~="Spush6"] {
left: 50%;
right: auto;
}
[data-o-grid-colspan~="Spull6"] {
right: 50%;
left: auto;
}
[data-o-grid-colspan~="Soffset6"] {
margin-left: 50%;
}
[data-o-grid-colspan~="Spush7"] {
left: 58.33333%;
right: auto;
}
[data-o-grid-colspan~="Spull7"] {
right: 58.33333%;
left: auto;
}
[data-o-grid-colspan~="Soffset7"] {
margin-left: 58.33333%;
}
[data-o-grid-colspan~="Spush8"] {
left: 66.66667%;
right: auto;
}
[data-o-grid-colspan~="Spull8"] {
right: 66.66667%;
left: auto;
}
[data-o-grid-colspan~="Soffset8"] {
margin-left: 66.66667%;
}
[data-o-grid-colspan~="Spush9"] {
left: 75%;
right: auto;
}
[data-o-grid-colspan~="Spull9"] {
right: 75%;
left: auto;
}
[data-o-grid-colspan~="Soffset9"] {
margin-left: 75%;
}
[data-o-grid-colspan~="Spush10"] {
left: 83.33333%;
right: auto;
}
[data-o-grid-colspan~="Spull10"] {
right: 83.33333%;
left: auto;
}
[data-o-grid-colspan~="Soffset10"] {
margin-left: 83.33333%;
}
[data-o-grid-colspan~="Spush11"] {
left: 91.66667%;
right: auto;
}
[data-o-grid-colspan~="Spull11"] {
right: 91.66667%;
left: auto;
}
[data-o-grid-colspan~="Soffset11"] {
margin-left: 91.66667%;
}
[data-o-grid-colspan~="Sfull-width"] {
display: block;
flex-shrink: 12;
flex-grow: 12;
flex-basis: 100%;
}
[data-o-grid-colspan~="Sone-half"] {
display: block;
flex-shrink: 6;
flex-grow: 6;
flex-basis: 10px;
}
[data-o-grid-colspan~="Sone-third"] {
display: block;
flex-shrink: 4;
flex-grow: 4;
flex-basis: 10px;
}
[data-o-grid-colspan~="Stwo-thirds"] {
display: block;
flex-shrink: 8;
flex-grow: 8;
flex-basis: 10px;
}
[data-o-grid-colspan~="Sone-quarter"] {
display: block;
flex-shrink: 3;
flex-grow: 3;
flex-basis: 10px;
}
[data-o-grid-colspan~="Sthree-quarters"] {
display: block;
flex-shrink: 9;
flex-grow: 9;
flex-basis: 10px;
}
[data-o-grid-colspan~="S1"] {
display: block;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 10px;
}
[data-o-grid-colspan~="S2"] {
display: block;
flex-grow: 2;
flex-shrink: 2;
flex-basis: 10px;
}
[data-o-grid-colspan~="S3"] {
display: block;
flex-grow: 3;
flex-shrink: 3;
flex-basis: 10px;
}
[data-o-grid-colspan~="S4"] {
display: block;
flex-grow: 4;
flex-shrink: 4;
flex-basis: 10px;
}
[data-o-grid-colspan~="S5"] {
display: block;
flex-grow: 5;
flex-shrink: 5;
flex-basis: 10px;
}
[data-o-grid-colspan~="S6"] {
display: block;
flex-grow: 6;
flex-shrink: 6;
flex-basis: 10px;
}
[data-o-grid-colspan~="S7"] {
display: block;
flex-grow: 7;
flex-shrink: 7;
flex-basis: 10px;
}
[data-o-grid-colspan~="S8"] {
display: block;
flex-grow: 8;
flex-shrink: 8;
flex-basis: 10px;
}
[data-o-grid-colspan~="S9"] {
display: block;
flex-grow: 9;
flex-shrink: 9;
flex-basis: 10px;
}
[data-o-grid-colspan~="S10"] {
display: block;
flex-grow: 10;
flex-shrink: 10;
flex-basis: 10px;
}
[data-o-grid-colspan~="S11"] {
display: block;
flex-grow: 11;
flex-shrink: 11;
flex-basis: 10px;
}
[data-o-grid-colspan~="S12"] {
display: block;
flex-grow: 12;
flex-shrink: 12;
flex-basis: 100%;
}
.o-grid-remove-gutters--S,
.o-grid-remove-gutters--left--S {
padding-left: 0;
}
.o-grid-remove-gutters--S .o-grid-row,
.o-grid-remove-gutters--left--S .o-grid-row {
margin-left: 0;
}
.o-grid-remove-gutters--S,
.o-grid-remove-gutters--right--S {
padding-right: 0;
}
.o-grid-remove-gutters--S .o-grid-row,
.o-grid-remove-gutters--right--S .o-grid-row {
margin-right: 0;
}
}
@media (min-width: 45.625em) {
[data-o-grid-colspan~="Mhide"],
[data-o-grid-colspan~="M0"] {
display: none;
}
[data-o-grid-colspan~="Mcenter"] {
margin-left: auto;
margin-right: auto;
float: none;
}
[data-o-grid-colspan~="Muncenter"] {
margin-left: 0;
margin-right: 0;
float: left;
}
[data-o-grid-colspan~="Mpush0"] {
left: 0%;
right: auto;
}
[data-o-grid-colspan~="Mpull0"] {
right: 0%;
left: auto;
}
[data-o-grid-colspan~="Moffset0"] {
margin-left: 0%;
}
[data-o-grid-colspan~="Mpush1"] {
left: 8.33333%;
right: auto;
}
[data-o-grid-colspan~="Mpull1"] {
right: 8.33333%;
left: auto;
}
[data-o-grid-colspan~="Moffset1"] {
margin-left: 8.33333%;
}
[data-o-grid-colspan~="Mpush2"] {
left: 16.66667%;
right: auto;
}
[data-o-grid-colspan~="Mpull2"] {
right: 16.66667%;
left: auto;
}
[data-o-grid-colspan~="Moffset2"] {
margin-left: 16.66667%;
}
[data-o-grid-colspan~="Mpush3"] {
left: 25%;
right: auto;
}
[data-o-grid-colspan~="Mpull3"] {
right: 25%;
left: auto;
}
[data-o-grid-colspan~="Moffset3"] {
margin-left: 25%;
}
[data-o-grid-colspan~="Mpush4"] {
left: 33.33333%;
right: auto;
}
[data-o-grid-colspan~="Mpull4"] {
right: 33.33333%;
left: auto;
}
[data-o-grid-colspan~="Moffset4"] {
margin-left: 33.33333%;
}
[data-o-grid-colspan~="Mpush5"] {
left: 41.66667%;
right: auto;
}
[data-o-grid-colspan~="Mpull5"] {
right: 41.66667%;
left: auto;
}
[data-o-grid-colspan~="Moffset5"] {
margin-left: 41.66667%;
}
[data-o-grid-colspan~="Mpush6"] {
left: 50%;
right: auto;
}
[data-o-grid-colspan~="Mpull6"] {
right: 50%;
left: auto;
}
[data-o-grid-colspan~="Moffset6"] {
margin-left: 50%;
}
[data-o-grid-colspan~="Mpush7"] {
left: 58.33333%;
right: auto;
}
[data-o-grid-colspan~="Mpull7"] {
right: 58.33333%;
left: auto;
}
[data-o-grid-colspan~="Moffset7"] {
margin-left: 58.33333%;
}
[data-o-grid-colspan~="Mpush8"] {
left: 66.66667%;
right: auto;
}
[data-o-grid-colspan~="Mpull8"] {
right: 66.66667%;
left: auto;
}
[data-o-grid-colspan~="Moffset8"] {
margin-left: 66.66667%;
}
[data-o-grid-colspan~="Mpush9"] {
left: 75%;
right: auto;
}
[data-o-grid-colspan~="Mpull9"] {
right: 75%;
left: auto;
}
[data-o-grid-colspan~="Moffset9"] {
margin-left: 75%;
}
[data-o-grid-colspan~="Mpush10"] {
left: 83.33333%;
right: auto;
}
[data-o-grid-colspan~="Mpull10"] {
right: 83.33333%;
left: auto;
}
[data-o-grid-colspan~="Moffset10"] {
margin-left: 83.33333%;
}
[data-o-grid-colspan~="Mpush11"] {
left: 91.66667%;
right: auto;
}
[data-o-grid-colspan~="Mpull11"] {
right: 91.66667%;
left: auto;
}
[data-o-grid-colspan~="Moffset11"] {
margin-left: 91.66667%;
}
[data-o-grid-colspan~="Mfull-width"] {
display: block;
flex-shrink: 12;
flex-grow: 12;
flex-basis: 100%;
}
[data-o-grid-colspan~="Mone-half"] {
display: block;
flex-shrink: 6;
flex-grow: 6;
flex-basis: 10px;
}
[data-o-grid-colspan~="Mone-third"] {
display: block;
flex-shrink: 4;
flex-grow: 4;
flex-basis: 10px;
}
[data-o-grid-colspan~="Mtwo-thirds"] {
display: block;
flex-shrink: 8;
flex-grow: 8;
flex-basis: 10px;
}
[data-o-grid-colspan~="Mone-quarter"] {
display: block;
flex-shrink: 3;
flex-grow: 3;
flex-basis: 10px;
}
[data-o-grid-colspan~="Mthree-quarters"] {
display: block;
flex-shrink: 9;
flex-grow: 9;
flex-basis: 10px;
}
[data-o-grid-colspan~="M1"] {
display: block;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 10px;
}
[data-o-grid-colspan~="M2"] {
display: block;
flex-grow: 2;
flex-shrink: 2;
flex-basis: 10px;
}
[data-o-grid-colspan~="M3"] {
display: block;
flex-grow: 3;
flex-shrink: 3;
flex-basis: 10px;
}
[data-o-grid-colspan~="M4"] {
display: block;
flex-grow: 4;
flex-shrink: 4;
flex-basis: 10px;
}
[data-o-grid-colspan~="M5"] {
display: block;
flex-grow: 5;
flex-shrink: 5;
flex-basis: 10px;
}
[data-o-grid-colspan~="M6"] {
display: block;
flex-grow: 6;
flex-shrink: 6;
flex-basis: 10px;
}
[data-o-grid-colspan~="M7"] {
display: block;
flex-grow: 7;
flex-shrink: 7;
flex-basis: 10px;
}
[data-o-grid-colspan~="M8"] {
display: block;
flex-grow: 8;
flex-shrink: 8;
flex-basis: 10px;
}
[data-o-grid-colspan~="M9"] {
display: block;
flex-grow: 9;
flex-shrink: 9;
flex-basis: 10px;
}
[data-o-grid-colspan~="M10"] {
display: block;
flex-grow: 10;
flex-shrink: 10;
flex-basis: 10px;
}
[data-o-grid-colspan~="M11"] {
display: block;
flex-grow: 11;
flex-shrink: 11;
flex-basis: 10px;
}
[data-o-grid-colspan~="M12"] {
display: block;
flex-grow: 12;
flex-shrink: 12;
flex-basis: 100%;
}
.o-grid-remove-gutters--M,
.o-grid-remove-gutters--left--M {
padding-left: 0;
}
.o-grid-remove-gutters--M .o-grid-row,
.o-grid-remove-gutters--left--M .o-grid-row {
margin-left: 0;
}
.o-grid-remove-gutters--M,
.o-grid-remove-gutters--right--M {
padding-right: 0;
}
.o-grid-remove-gutters--M .o-grid-row,
.o-grid-remove-gutters--right--M .o-grid-row {
margin-right: 0;
}
}
@media (min-width: 60.625em) {
[data-o-grid-colspan~="Lhide"],
[data-o-grid-colspan~="L0"] {
display: none;
}
[data-o-grid-colspan~="Lcenter"] {
margin-left: auto;
margin-right: auto;
float: none;
}
[data-o-grid-colspan~="Luncenter"] {
margin-left: 0;
margin-right: 0;
float: left;
}
[data-o-grid-colspan~="Lpush0"] {
left: 0%;
right: auto;
}
[data-o-grid-colspan~="Lpull0"] {
right: 0%;
left: auto;
}
[data-o-grid-colspan~="Loffset0"] {
margin-left: 0%;
}
[data-o-grid-colspan~="Lpush1"] {
left: 8.33333%;
right: auto;
}
[data-o-grid-colspan~="Lpull1"] {
right: 8.33333%;
left: auto;
}
[data-o-grid-colspan~="Loffset1"] {
margin-left: 8.33333%;
}
[data-o-grid-colspan~="Lpush2"] {
left: 16.66667%;
right: auto;
}
[data-o-grid-colspan~="Lpull2"] {
right: 16.66667%;
left: auto;
}
[data-o-grid-colspan~="Loffset2"] {
margin-left: 16.66667%;
}
[data-o-grid-colspan~="Lpush3"] {
left: 25%;
right: auto;
}
[data-o-grid-colspan~="Lpull3"] {
right: 25%;
left: auto;
}
[data-o-grid-colspan~="Loffset3"] {
margin-left: 25%;
}
[data-o-grid-colspan~="Lpush4"] {
left: 33.33333%;
right: auto;
}
[data-o-grid-colspan~="Lpull4"] {
right: 33.33333%;
left: auto;
}
[data-o-grid-colspan~="Loffset4"] {
margin-left: 33.33333%;
}
[data-o-grid-colspan~="Lpush5"] {
left: 41.66667%;
right: auto;
}
[data-o-grid-colspan~="Lpull5"] {
right: 41.66667%;
left: auto;
}
[data-o-grid-colspan~="Loffset5"] {
margin-left: 41.66667%;
}
[data-o-grid-colspan~="Lpush6"] {
left: 50%;
right: auto;
}
[data-o-grid-colspan~="Lpull6"] {
right: 50%;
left: auto;
}
[data-o-grid-colspan~="Loffset6"] {
margin-left: 50%;
}
[data-o-grid-colspan~="Lpush7"] {
left: 58.33333%;
right: auto;
}
[data-o-grid-colspan~="Lpull7"] {
right: 58.33333%;
left: auto;
}
[data-o-grid-colspan~="Loffset7"] {
margin-left: 58.33333%;
}
[data-o-grid-colspan~="Lpush8"] {
left: 66.66667%;
right: auto;
}
[data-o-grid-colspan~="Lpull8"] {
right: 66.66667%;
left: auto;
}
[data-o-grid-colspan~="Loffset8"] {
margin-left: 66.66667%;
}
[data-o-grid-colspan~="Lpush9"] {
left: 75%;
right: auto;
}
[data-o-grid-colspan~="Lpull9"] {
right: 75%;
left: auto;
}
[data-o-grid-colspan~="Loffset9"] {
margin-left: 75%;
}
[data-o-grid-colspan~="Lpush10"] {
left: 83.33333%;
right: auto;
}
[data-o-grid-colspan~="Lpull10"] {
right: 83.33333%;
left: auto;
}
[data-o-grid-colspan~="Loffset10"] {
margin-left: 83.33333%;
}
[data-o-grid-colspan~="Lpush11"] {
left: 91.66667%;
right: auto;
}
[data-o-grid-colspan~="Lpull11"] {
right: 91.66667%;
left: auto;
}
[data-o-grid-colspan~="Loffset11"] {
margin-left: 91.66667%;
}
[data-o-grid-colspan~="Lfull-width"] {
display: block;
flex-shrink: 12;
flex-grow: 12;
flex-basis: 100%;
}
[data-o-grid-colspan~="Lone-half"] {
display: block;
flex-shrink: 6;
flex-grow: 6;
flex-basis: 10px;
}
[data-o-grid-colspan~="Lone-third"] {
display: block;
flex-shrink: 4;
flex-grow: 4;
flex-basis: 10px;
}
[data-o-grid-colspan~="Ltwo-thirds"] {
display: block;
flex-shrink: 8;
flex-grow: 8;
flex-basis: 10px;
}
[data-o-grid-colspan~="Lone-quarter"] {
display: block;
flex-shrink: 3;
flex-grow: 3;
flex-basis: 10px;
}
[data-o-grid-colspan~="Lthree-quarters"] {
display: block;
flex-shrink: 9;
flex-grow: 9;
flex-basis: 10px;
}
[data-o-grid-colspan~="L1"] {
display: block;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 10px;
}
[data-o-grid-colspan~="L2"] {
display: block;
flex-grow: 2;
flex-shrink: 2;
flex-basis: 10px;
}
[data-o-grid-colspan~="L3"] {
display: block;
flex-grow: 3;
flex-shrink: 3;
flex-basis: 10px;
}
[data-o-grid-colspan~="L4"] {
display: block;
flex-grow: 4;
flex-shrink: 4;
flex-basis: 10px;
}
[data-o-grid-colspan~="L5"] {
display: block;
flex-grow: 5;
flex-shrink: 5;
flex-basis: 10px;
}
[data-o-grid-colspan~="L6"] {
display: block;
flex-grow: 6;
flex-shrink: 6;
flex-basis: 10px;
}
[data-o-grid-colspan~="L7"] {
display: block;
flex-grow: 7;
flex-shrink: 7;
flex-basis: 10px;
}
[data-o-grid-colspan~="L8"] {
display: block;
flex-grow: 8;
flex-shrink: 8;
flex-basis: 10px;
}
[data-o-grid-colspan~="L9"] {
display: block;
flex-grow: 9;
flex-shrink: 9;
flex-basis: 10px;
}
[data-o-grid-colspan~="L10"] {
display: block;
flex-grow: 10;
flex-shrink: 10;
flex-basis: 10px;
}
[data-o-grid-colspan~="L11"] {
display: block;
flex-grow: 11;
flex-shrink: 11;
flex-basis: 10px;
}
[data-o-grid-colspan~="L12"] {
display: block;
flex-grow: 12;
flex-shrink: 12;
flex-basis: 100%;
}
.o-grid-remove-gutters--L,
.o-grid-remove-gutters--left--L {
padding-left: 0;
}
.o-grid-remove-gutters--L .o-grid-row,
.o-grid-remove-gutters--left--L .o-grid-row {
margin-left: 0;
}
.o-grid-remove-gutters--L,
.o-grid-remove-gutters--right--L {
padding-right: 0;
}
.o-grid-remove-gutters--L .o-grid-row,
.o-grid-remove-gutters--right--L .o-grid-row {
margin-right: 0;
}
}
@media (min-width: 75.625em) {
[data-o-grid-colspan~="XLhide"],
[data-o-grid-colspan~="XL0"] {
display: none;
}
[data-o-grid-colspan~="XLcenter"] {
margin-left: auto;
margin-right: auto;
float: none;
}
[data-o-grid-colspan~="XLuncenter"] {
margin-left: 0;
margin-right: 0;
float: left;
}
[data-o-grid-colspan~="XLpush0"] {
left: 0%;
right: auto;
}
[data-o-grid-colspan~="XLpull0"] {
right: 0%;
left: auto;
}
[data-o-grid-colspan~="XLoffset0"] {
margin-left: 0%;
}
[data-o-grid-colspan~="XLpush1"] {
left: 8.33333%;
right: auto;
}
[data-o-grid-colspan~="XLpull1"] {
right: 8.33333%;
left: auto;
}
[data-o-grid-colspan~="XLoffset1"] {
margin-left: 8.33333%;
}
[data-o-grid-colspan~="XLpush2"] {
left: 16.66667%;
right: auto;
}
[data-o-grid-colspan~="XLpull2"] {
right: 16.66667%;
left: auto;
}
[data-o-grid-colspan~="XLoffset2"] {
margin-left: 16.66667%;
}
[data-o-grid-colspan~="XLpush3"] {
left: 25%;
right: auto;
}
[data-o-grid-colspan~="XLpull3"] {
right: 25%;
left: auto;
}
[data-o-grid-colspan~="XLoffset3"] {
margin-left: 25%;
}
[data-o-grid-colspan~="XLpush4"] {
left: 33.33333%;
right: auto;
}
[data-o-grid-colspan~="XLpull4"] {
right: 33.33333%;
left: auto;
}
[data-o-grid-colspan~="XLoffset4"] {
margin-left: 33.33333%;
}
[data-o-grid-colspan~="XLpush5"] {
left: 41.66667%;
right: auto;
}
[data-o-grid-colspan~="XLpull5"] {
right: 41.66667%;
left: auto;
}
[data-o-grid-colspan~="XLoffset5"] {
margin-left: 41.66667%;
}
[data-o-grid-colspan~="XLpush6"] {
left: 50%;
right: auto;
}
[data-o-grid-colspan~="XLpull6"] {
right: 50%;
left: auto;
}
[data-o-grid-colspan~="XLoffset6"] {
margin-left: 50%;
}
[data-o-grid-colspan~="XLpush7"] {
left: 58.33333%;
right: auto;
}
[data-o-grid-colspan~="XLpull7"] {
right: 58.33333%;
left: auto;
}
[data-o-grid-colspan~="XLoffset7"] {
margin-left: 58.33333%;
}
[data-o-grid-colspan~="XLpush8"] {
left: 66.66667%;
right: auto;
}
[data-o-grid-colspan~="XLpull8"] {
right: 66.66667%;
left: auto;
}
[data-o-grid-colspan~="XLoffset8"] {
margin-left: 66.66667%;
}
[data-o-grid-colspan~="XLpush9"] {
left: 75%;
right: auto;
}
[data-o-grid-colspan~="XLpull9"] {
right: 75%;
left: auto;
}
[data-o-grid-colspan~="XLoffset9"] {
margin-left: 75%;
}
[data-o-grid-colspan~="XLpush10"] {
left: 83.33333%;
right: auto;
}
[data-o-grid-colspan~="XLpull10"] {
right: 83.33333%;
left: auto;
}
[data-o-grid-colspan~="XLoffset10"] {
margin-left: 83.33333%;
}
[data-o-grid-colspan~="XLpush11"] {
left: 91.66667%;
right: auto;
}
[data-o-grid-colspan~="XLpull11"] {
right: 91.66667%;
left: auto;
}
[data-o-grid-colspan~="XLoffset11"] {
margin-left: 91.66667%;
}
[data-o-grid-colspan~="XLfull-width"] {
display: block;
flex-shrink: 12;
flex-grow: 12;
flex-basis: 100%;
}
[data-o-grid-colspan~="XLone-half"] {
display: block;
flex-shrink: 6;
flex-grow: 6;
flex-basis: 10px;
}
[data-o-grid-colspan~="XLone-third"] {
display: block;
flex-shrink: 4;
flex-grow: 4;
flex-basis: 10px;
}
[data-o-grid-colspan~="XLtwo-thirds"] {
display: block;
flex-shrink: 8;
flex-grow: 8;
flex-basis: 10px;
}
[data-o-grid-colspan~="XLone-quarter"] {
display: block;
flex-shrink: 3;
flex-grow: 3;
flex-basis: 10px;
}
[data-o-grid-colspan~="XLthree-quarters"] {
display: block;
flex-shrink: 9;
flex-grow: 9;
flex-basis: 10px;
}
[data-o-grid-colspan~="XL1"] {
display: block;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 10px;
}
[data-o-grid-colspan~="XL2"] {
display: block;
flex-grow: 2;
flex-shrink: 2;
flex-basis: 10px;
}
[data-o-grid-colspan~="XL3"] {
display: block;
flex-grow: 3;
flex-shrink: 3;
flex-basis: 10px;
}
[data-o-grid-colspan~="XL4"] {
display: block;
flex-grow: 4;
flex-shrink: 4;
flex-basis: 10px;
}
[data-o-grid-colspan~="XL5"] {
display: block;
flex-grow: 5;
flex-shrink: 5;
flex-basis: 10px;
}
[data-o-grid-colspan~="XL6"] {
display: block;
flex-grow: 6;
flex-shrink: 6;
flex-basis: 10px;
}
[data-o-grid-colspan~="XL7"] {
display: block;
flex-grow: 7;
flex-shrink: 7;
flex-basis: 10px;
}
[data-o-grid-colspan~="XL8"] {
display: block;
flex-grow: 8;
flex-shrink: 8;
flex-basis: 10px;
}
[data-o-grid-colspan~="XL9"] {
display: block;
flex-grow: 9;
flex-shrink: 9;
flex-basis: 10px;
}
[data-o-grid-colspan~="XL10"] {
display: block;
flex-grow: 10;
flex-shrink: 10;
flex-basis: 10px;
}
[data-o-grid-colspan~="XL11"] {
display: block;
flex-grow: 11;
flex-shrink: 11;
flex-basis: 10px;
}
[data-o-grid-colspan~="XL12"] {
display: block;
flex-grow: 12;
flex-shrink: 12;
flex-basis: 100%;
}
.o-grid-remove-gutters--XL,
.o-grid-remove-gutters--left--XL {
padding-left: 0;
}
.o-grid-remove-gutters--XL .o-grid-row,
.o-grid-remove-gutters--left--XL .o-grid-row {
margin-left: 0;
}
.o-grid-remove-gutters--XL,
.o-grid-remove-gutters--right--XL {
padding-right: 0;
}
.o-grid-remove-gutters--XL .o-grid-row,
.o-grid-remove-gutters--right--XL .o-grid-row {
margin-right: 0;
}
}
html {
/* Set a font family on the whole document */
font-family: BentonSans, sans-serif;
/* Prevent navigation menus from creating
extra space on sides of the page */
overflow-x: hidden;
}
body {
/* Remove space around the document */
margin: 0;
}
.test body:after {
content: '';
background-color: #fcf8e3;
border-bottom: 1px solid #fbeed5;
border-left: 1px solid #fbeed5;
color: #c09853;
font: small-caption;
padding: 3px 6px;
pointer-events: none;
position: fixed;
right: 0;
top: 25px;
z-index: 100;
}
.demo-cell {
background-color: transparent;
zoom: 1;
min-height: 2em;
text-align: center;
padding-top: 1rem;
overflow: hidden;
font-size: 1.3rem;
line-height: 1.2;
background-color: rgba(255, 255, 255, 0.5);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#80FFFFFF,endColorstr=#80FFFFFF);
}
.o-grid-row {
background: #f6e9d8;
margin-top: 1rem;
margin-bottom: 1rem;
}
.o-grid-row .o-grid-row {
background: #cec6b9;
}
[data-demo-highlight] {
display: inline-block;
transition: 0.2s all 0.25s ease-in-out;
opacity: 0.6;
transform: scale(0.75);
}
@media (max-width: 30.615em) {
[data-demo-highlight*="default"] {
transform: scale(1);
opacity: 1;
}
}
@media (min-width: 30.625em) and (max-width: 45.615em) {
[data-demo-highlight*="S"] {
transform: scale(1);
opacity: 1;
}
}
@media (min-width: 45.625em) and (max-width: 60.615em) {
[data-demo-highlight*="M"] {
transform: scale(1);
opacity: 1;
}
}
@media (min-width: 60.625em) and (max-width: 75.615em) {
[data-demo-highlight="L"],
[data-demo-highlight*=" L"] {
transform: scale(1);
opacity: 1;
}
}
@media (min-width: 75.625em) {
[data-demo-highlight*="XL"] {
transform: scale(1);
opacity: 1;
}
}
Raw
SassMeister-rendered.html
<!-- Constant column spans -->
<div class="o-grid-row">
<div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
<div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
<div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
<div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
<div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
<div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
<div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
<div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
<div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
<div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
<div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
<div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
</div>
<div class="o-grid-row">
<div data-o-grid-colspan="2"><div class="demo-cell">2</div></div>
<div data-o-grid-colspan="2"><div class="demo-cell">2</div></div>
<div data-o-grid-colspan="2"><div class="demo-cell">2</div></div>
<div data-o-grid-colspan="2"><div class="demo-cell">2</div></div>
<div data-o-grid-colspan="2"><div class="demo-cell">2</div></div>
<div data-o-grid-colspan="2"><div class="demo-cell">2</div></div>
</div>
<div class="o-grid-row">
<div data-o-grid-colspan="3"><div class="demo-cell">3</div></div>
<div data-o-grid-colspan="3"><div class="demo-cell">3</div></div>
<div data-o-grid-colspan="3"><div class="demo-cell">3</div></div>
<div data-o-grid-colspan="3"><div class="demo-cell">3</div></div>
</div>
<div class="o-grid-row">
<div data-o-grid-colspan="4"><div class="demo-cell">4</div></div>
<div data-o-grid-colspan="4"><div class="demo-cell">4</div></div>
<div data-o-grid-colspan="4"><div class="demo-cell">4</div></div>
</div>
<div class="o-grid-row">
<div data-o-grid-colspan="6"><div class="demo-cell">6</div></div>
<div data-o-grid-colspan="6"><div class="demo-cell">6</div></div>
</div>
<div class="o-grid-row">
<div data-o-grid-colspan="12"><div class="demo-cell">12</div></div>
</div>
<!-- Responsive column spans -->
<div class="o-grid-row">
<div data-o-grid-colspan="8 S12 M8">
<div class="demo-cell">
<span data-demo-highlight="default">8</span>
<span data-demo-highlight="S">S12</span>
<span data-demo-highlight="M L XL">M8</span>
<div class="o-grid-row">
<div data-o-grid-colspan="6 S12 M6 XL3">
<div class="demo-cell">
<span data-demo-highlight="default">6</span>
<span data-demo-highlight="S">S12</span>
<span data-demo-highlight="M L">M6</span>
<span data-demo-highlight="XL">XL3</span>
</div>
</div>
<div data-o-grid-colspan="6 S12 M6 XL3">
<div class="demo-cell">
<span data-demo-highlight="default">6</span>
<span data-demo-highlight="S">S12</span>
<span data-demo-highlight="M L">M6</span>
<span data-demo-highlight="XL">XL3</span>
</div>
</div>
<div data-o-grid-colspan="6 S12 M6 XL3">
<div class="demo-cell">
<span data-demo-highlight="default">6</span>
<span data-demo-highlight="S">S12</span>
<span data-demo-highlight="M L">M6</span>
<span data-demo-highlight="XL">XL3</span>
</div>
</div>
<div data-o-grid-colspan="6 S12 M6 XL3">
<div class="demo-cell">
<span data-demo-highlight="default">6</span>
<span data-demo-highlight="S">S12</span>
<span data-demo-highlight="M L">M6</span>
<span data-demo-highlight="XL">XL3</span>
</div>
</div>
</div>
</div>
</div>
<div data-o-grid-colspan="4 S12 M4">
<div class="demo-cell">
<span data-demo-highlight="default">4</span>
<span data-demo-highlight="S">S12</span>
<span data-demo-highlight="M L XL">M4</span>
<div class="o-grid-row">
<div data-o-grid-colspan="12 L7 XL6">
<div class="demo-cell">
<span data-demo-highlight="default S M">12</span>
<span data-demo-highlight="L">L7</span>
<span data-demo-highlight="XL">XL6</span>
</div>
</div>
<div data-o-grid-colspan="12 L5 XL6">
<div class="demo-cell">
<span data-demo-highlight="default S M">12</span>
<span data-demo-highlight="L">L5</span>
<span data-demo-highlight="XL">XL6</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Human friendly modifiers -->
<div class="o-grid-row">
<div data-o-grid-colspan="one-half">
<div class="demo-cell">
one-half
</div>
</div>
<div data-o-grid-colspan="one-quarter">
<div class="demo-cell">
one-quarter
</div>
</div>
<div data-o-grid-colspan="one-quarter">
<div class="demo-cell">
one-quarter
</div>
</div>
</div>
<div class="o-grid-row">
<div data-o-grid-colspan="one-third">
<div class="demo-cell">
one-third
</div>
</div>
<div data-o-grid-colspan="two-thirds">
<div class="demo-cell">
two-thirds
</div>
</div>
</div>
<div class="o-grid-row">
<div data-o-grid-colspan="one-third push8">
<div class="demo-cell">
one-third push8 (first in source)
</div>
</div>
<div data-o-grid-colspan="two-thirds pull4">
<div class="demo-cell">
two-thirds pull4 (last in source)
</div>
</div>
</div>
<div class="o-grid-row">
<div data-o-grid-colspan="one-third center">
<div class="demo-cell">
one-third center
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment