Last active
November 25, 2015 15:45
-
-
Save kaelig/a1b649ba0587aede5365 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ---- | |
| // libsass (v3.2.5) | |
| // ---- | |
| //// | |
| /// @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 up to the largest layout's width | |
| /// - 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; | |
| /// Minimum width, in pixels | |
| /// | |
| /// @type Number | |
| $o-grid-min-width: 240px !default; | |
| /// 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: 490px, // column-width: 30px, inner width: 470px | |
| M: 740px, // column-width: 40px, inner width: 700px | |
| L: 980px, // column-width: 60px, inner width: 940px | |
| XL: 1220px, // column-width: 80px, inner width: 1180px | |
| ) !default; | |
| /// Layout names | |
| /// | |
| /// @access private | |
| /// @type List | |
| $_o-grid-layout-names: map-keys($o-grid-layouts); | |
| /// Gutter sizes | |
| /// | |
| /// @type Map | |
| $o-grid-gutters: ( | |
| default: 10px, | |
| M: 20px, | |
| ) !default; | |
| // If layouts have changed but gutters haven't, | |
| // prune non-existant layouts. | |
| @each $layout-name, $gutter-size in $o-grid-gutters { | |
| @if ($layout-name != 'default') and (not map-has-key($o-grid-layouts, $layout-name)) { | |
| $o-grid-gutters: map-remove($o-grid-gutters, $layout-name); | |
| } | |
| } | |
| /// 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)); | |
| // 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; | |
| } | |
| /// Current scope | |
| /// | |
| /// @access private | |
| /// @type String | |
| $_o-grid-scope: 'global'; | |
| @import 'mq'; | |
| //// | |
| /// @group o-grid | |
| /// @link http://registry.origami.ft.com/components/o-grid | |
| //// | |
| /// Add a layout | |
| /// | |
| /// @example scss | |
| /// @include oGridAddLayout($layout-name: P, $layout-width: 600px); | |
| /// @include oGridAddLayout($layout-name: XXL, $layout-width: 1600px, $gutter-width: 30px); | |
| /// | |
| /// @param {String} $layout-name - Name of the layout (e.g. S) | |
| /// @param {Number} $layout-width - Layout width in px | |
| /// @param {Number} $gutter-width [null] - Gutter width in px | |
| @mixin oGridAddLayout($layout-name, $layout-width, $gutter-width: null) { | |
| $temp-layouts: (); | |
| $temp-gutters: (default: #{oGridGutter()}); | |
| // Add the new layout in the correct position: | |
| // (we want $o-grid-layouts and $o-grid-gutters to be 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); | |
| $current-gutter-width: map-get($o-grid-gutters, $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-gutters: map-merge($temp-gutters, ($layout-name: $gutter-width)); | |
| } | |
| $temp-layouts: map-merge($temp-layouts, ($current-layout-name: $current-layout-width)); | |
| @if $current-gutter-width { | |
| $temp-gutters: map-merge($temp-gutters, ($current-layout-name: $current-gutter-width)); | |
| } | |
| } | |
| $o-grid-layouts: $temp-layouts !global; | |
| $_o-grid-layout-names: map-keys($o-grid-layouts) !global; | |
| @if $gutter-width { | |
| $o-grid-gutters: $temp-gutters !global; | |
| } | |
| $_o-grid-max-width: map-get($o-grid-layouts, nth($_o-grid-layout-names, -1)) !global; | |
| } | |
| /// Get the gutter of a layout | |
| /// | |
| /// @param {String|null|Boolean} $layout-name - One of $o-grid-layouts | |
| @function oGridGutter($layout-name: default) { | |
| // This layout was assigned a gutter directly | |
| @if map-get($o-grid-gutters, $layout-name) { | |
| @return map-get($o-grid-gutters, $layout-name); | |
| } | |
| // Checking the position of the layout in the list of layouts | |
| $layout-index: index($_o-grid-layout-names, $layout-name); | |
| // The first layout (S) should get the default gutter | |
| @if $layout-index == 1 { | |
| @return oGridGutter(); | |
| } | |
| // No gutter found for this layout, let's try again with a smaller one | |
| $layout: nth($_o-grid-layout-names, $layout-index - 1); | |
| @return oGridGutter($layout); | |
| } | |
| /// Get the max width of a layout | |
| /// | |
| /// @example | |
| /// .my-large-container { width: oGridGetMaxWidthForLayout(L); } | |
| /// | |
| /// @param {String} $layout-name - one of $o-grid-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); | |
| } | |
| } | |
| } | |
| /// 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; | |
| } | |
| // Since writing [data-o-grid-colspan~="uncenter"] wouldn't make much sense | |
| // we only allow "uncenter" combined with a layout (e.g. XLuncenter) | |
| @if $layout-name != null { | |
| [data-o-grid-colspan~="#{$layout-name}uncenter"] { | |
| @include oGridUncenter; | |
| } | |
| } | |
| // 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}"] { | |
| // scss-lint:disable DeclarationOrder | |
| // Restore visibility from `display: none` | |
| // if `data-o-grid-colspan` was set to `0` or `hide` | |
| display: block; | |
| // Define width in % | |
| @include _oGridFixSafariWrap($human-friendly-name); | |
| min-width: oGridColspan($human-friendly-name); | |
| max-width: oGridColspan($human-friendly-name); | |
| width: oGridColspan($human-friendly-name); | |
| } | |
| } | |
| } | |
| /// Shuffle columns around using pull, push and offset | |
| /// | |
| /// @access private | |
| /// | |
| /// @param {String} $layout-name [null] | |
| @mixin _oGridShuffleColumns($layout-name: null) { | |
| @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); | |
| } | |
| } | |
| } | |
| /// Base column styles and responsive layout width | |
| /// | |
| /// @example scss Block has column styles | |
| /// el { @include oGridColspan(); } | |
| /// | |
| /// @example scss 4-column wide block | |
| /// el { @include oGridColspan(4); } | |
| /// | |
| /// @example scss Half-width block | |
| /// el { @include oGridColspan(1/2); } | |
| /// | |
| /// @example scss Block is full-width by default, 8-column wide on Medium layouts and hidden on Large layouts | |
| /// el { @include oGridColspan((default: 12, M: 8, L: hide)); } | |
| /// | |
| /// @param {Number | Map} $span [null] | |
| @mixin oGridColspan($span: null, $width-only: false) { | |
| @if not $width-only { | |
| position: relative; // Required for push and pull | |
| float: left; | |
| box-sizing: border-box; | |
| flex: 1 1 0%; | |
| @include oGridTargetIE8 { | |
| // scss-lint:disable ImportantRule | |
| min-width: 0 !important; | |
| } | |
| @if $o-grid-mode == 'fixed' { | |
| padding-left: oGridGutter($o-grid-fixed-layout); | |
| } @else { | |
| @each $layout-name in map-keys($o-grid-gutters) { | |
| @if $layout-name == 'default' { | |
| padding-left: oGridGutter(); | |
| } @else { | |
| @include oGridRespondTo($layout-name) { | |
| padding-left: oGridGutter($layout-name); | |
| } | |
| } | |
| } | |
| @include oGridTargetIE8 { | |
| // Output grid modifiers for the fixed layout displayed by IE8 | |
| padding-left: oGridGutter($o-grid-fixed-layout); | |
| } | |
| } | |
| } | |
| @if $span { | |
| @include _oGridColumnWidth($span); | |
| } | |
| } | |
| /// Cross browser column widths across layouts | |
| /// | |
| /// @example scss | |
| /// el { @include _oGridColumnWidth(4); } | |
| /// el { @include _oGridColumnWidth(1/2); } | |
| /// el { @include _oGridColumnWidth(hide); } | |
| /// el { @include _oGridColumnWidth((default: 12, M: 8, L: hide)); } | |
| /// | |
| /// @param {Number | Map} $span | |
| @mixin _oGridColumnWidth($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 { | |
| // scss-lint:disable DeclarationOrder | |
| // Restore visibility from `display: none` | |
| // if `data-o-grid-colspan` was set to `0` or `hide` | |
| display: block; | |
| // Define width in % | |
| @include _oGridFixSafariWrap($span); | |
| min-width: oGridColspan($span); | |
| max-width: oGridColspan($span); | |
| // For IE8 | |
| 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' { | |
| @include _oGridColumnWidth($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 { | |
| @include oGridRespondTo($layout-name) { | |
| // scss-lint:disable DeclarationOrder | |
| // Restore visibility from `display: none` | |
| // if `data-o-grid-colspan` was set to `0` or `hide` | |
| display: block; | |
| // Define width in % | |
| @include _oGridFixSafariWrap($layout-span); | |
| min-width: oGridColspan($layout-span); | |
| max-width: oGridColspan($layout-span); | |
| } | |
| // 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); | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| /// Grid container | |
| /// | |
| /// @param {String} $grid-mode [$o-grid-mode] | |
| @mixin oGridContainer($grid-mode: $o-grid-mode) { | |
| position: relative; | |
| box-sizing: border-box; | |
| margin-left: auto; | |
| margin-right: auto; | |
| min-width: $o-grid-min-width; | |
| // Older browsers get a fixed-width layout | |
| max-width: oGridGetMaxWidthForLayout($o-grid-fixed-layout); | |
| @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'); | |
| padding-left: oGridGutter($o-grid-fixed-layout); | |
| padding-right: oGridGutter($o-grid-fixed-layout); | |
| } @else { | |
| max-width: $_o-grid-max-width; | |
| @each $layout-name in map-keys($o-grid-gutters) { | |
| @if $layout-name == 'default' { | |
| padding-left: oGridGutter(); | |
| padding-right: oGridGutter(); | |
| } @else { | |
| @include oGridRespondTo($layout-name) { | |
| padding-left: oGridGutter($layout-name); | |
| padding-right: oGridGutter($layout-name); | |
| } | |
| } | |
| } | |
| @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); | |
| } | |
| } | |
| } | |
| } | |
| } | |
| // Serve a fixed-width layout to IE8 | |
| @include oGridTargetIE8 { | |
| padding-left: oGridGutter($o-grid-fixed-layout); | |
| padding-right: oGridGutter($o-grid-fixed-layout); | |
| width: oGridGetMaxWidthForLayout($o-grid-fixed-layout, $grid-mode: 'fixed'); | |
| } | |
| } | |
| } | |
| /// Base row styles | |
| /// | |
| /// @param {String} $grid-mode [$o-grid-mode] | |
| @mixin oGridRow { | |
| clear: both; | |
| display: flex; | |
| flex-wrap: wrap; // Note that this breaks in old Firefox | |
| @if $o-grid-mode == 'fixed' { | |
| margin-left: -1 * oGridGutter($o-grid-fixed-layout); | |
| } @else { | |
| @each $layout-name in map-keys($o-grid-gutters) { | |
| @if $layout-name == 'default' { | |
| margin-left: -1 * oGridGutter(); | |
| } @else { | |
| @include oGridRespondTo($layout-name) { | |
| margin-left: -1 * oGridGutter($layout-name); | |
| } | |
| } | |
| } | |
| @include oGridTargetIE8 { | |
| margin-left: -1 * oGridGutter($o-grid-fixed-layout); | |
| } | |
| } | |
| // Clearfix for IE9 and below | |
| zoom: 1; | |
| &:before, | |
| &:after { | |
| // scss-lint:disable DuplicateProperty | |
| content: ' '; | |
| display: none; | |
| display: table\9; // Show only to IE<=9 | |
| } | |
| &:after { | |
| clear: both; | |
| } | |
| } | |
| /// Remove gutters from columns in a row | |
| /// | |
| /// @param {string} column child selector | |
| @mixin oGridRowCompact($column-selector: "[o-grid-colspan]") { | |
| margin-left: 0; | |
| > #{unquote($column-selector)} { | |
| padding-left: 0; | |
| } | |
| } | |
| /// Remove row styles | |
| @mixin oGridResetRow { | |
| clear: none; | |
| display: block; | |
| flex-wrap: nowrap; | |
| margin-left: 0; | |
| &:before, | |
| &:after { | |
| display: none; | |
| } | |
| } | |
| /// 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; | |
| min-width: 0; | |
| max-width: none; | |
| flex: none; | |
| } | |
| /// 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); | |
| } | |
| /// Width and gutter removal modifiers for a given layout. | |
| /// | |
| /// @output | |
| /// [data-o-grid-colspan~="S1"] { width: %; } | |
| /// | |
| /// @access private | |
| /// | |
| /// @param {String} $layout-name - One of $o-grid-layouts | |
| @mixin _oGridModifiersForLayout($layout-name) { | |
| @include _oGridHumanFriendlyKeywords($layout-name); | |
| @include _oGridShuffleColumns($layout-name); | |
| @for $colspan from 1 through $o-grid-columns { | |
| [data-o-grid-colspan~="#{$layout-name}#{$colspan}"] { | |
| // scss-lint:disable DeclarationOrder | |
| // Restore visibility from `display: none` | |
| // if `data-o-grid-colspan` was set to `0` or `hide` | |
| display: block; | |
| // Apply width in % | |
| @include _oGridFixSafariWrap($colspan); | |
| min-width: oGridColspan($colspan); | |
| max-width: oGridColspan($colspan); | |
| width: oGridColspan($colspan); | |
| } | |
| } | |
| } | |
| /// Fix a bug in Safari where items wouldn't wrap properly | |
| /// @link https://github.com/philipwalton/flexbugs#11-min-and-max-size-declarations-are-ignored-when-wrapping-flex-items | |
| @mixin _oGridFixSafariWrap($args...) { | |
| flex-basis: oGridColspan($args...); | |
| } | |
| /// 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-container { | |
| @include oGridContainer($o-grid-mode); | |
| } | |
| .o-grid-row { | |
| @include oGridRow; | |
| } | |
| [data-o-grid-colspan] { | |
| @include oGridColspan(); | |
| } | |
| @for $colspan from 1 through $o-grid-columns { | |
| [data-o-grid-colspan~="#{$colspan}"] { | |
| @include oGridColspan($colspan, $width-only: true); | |
| } | |
| } | |
| // Compact, gutterless row of columns | |
| .o-grid-row--compact { | |
| margin-left: 0; | |
| > [data-o-grid-colspan] { | |
| padding-left: 0; | |
| } | |
| } | |
| // one-half, one-third, three-quarters, center, uncenter… | |
| @include _oGridHumanFriendlyKeywords; | |
| // pull, push, offset | |
| @include _oGridShuffleColumns; | |
| // 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 | |
| /// // Return the current layout (e.g. default, S, M, L, XL) | |
| /// var getCurrentLayout = require('o-grid').getCurrentLayout; | |
| /// console.log(getCurrentLayout()); | |
| /// | |
| /// // Return the current gutter (e.g. 10px, 20px) | |
| /// var getCurrentGutter = require('o-grid').getCurrentGutter; | |
| /// console.log(getCurrentGutter()); | |
| @mixin oGridSurfaceCurrentLayout { | |
| html:after { | |
| content: '{ "layout": "default", "gutter": "' + oGridGutter() + '" }'; | |
| display: none; | |
| @each $breakpoint in $_o-grid-layout-names { | |
| @include oGridRespondTo($breakpoint) { | |
| content: '{ "layout": "' + $breakpoint + '", "gutter": "' + oGridGutter($breakpoint) + '" }'; | |
| } | |
| } | |
| } | |
| } | |
| // Add various layouts | |
| @include oGridAddLayout( | |
| $layout-name: XS, | |
| $layout-width: 360px | |
| ); | |
| @include oGridAddLayout( | |
| $layout-name: P, | |
| $layout-width: 600px | |
| // Uncommenting this line causes a compilation error | |
| // , $gutter-width: 24px | |
| ); | |
| // Layouts are now: | |
| // XS: 360px, | |
| // S: 490px, | |
| // P: 600px, | |
| // M: 740px, | |
| // L: 980px, | |
| // XL: 1220px | |
| // Surface the layout currently displayed to make it readable in JS | |
| @include oGridSurfaceCurrentLayout; | |
| // Generate grid helpers classes and data attributes | |
| @include oGridGenerate; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html:after { | |
| content: '{ "layout": "default", "gutter": "10px" }'; | |
| display: none; | |
| } | |
| @media (min-width: 22.5em) { | |
| html:after { | |
| content: '{ "layout": "XS", "gutter": "10px" }'; | |
| } | |
| } | |
| @media (min-width: 30.625em) { | |
| html:after { | |
| content: '{ "layout": "S", "gutter": "10px" }'; | |
| } | |
| } | |
| @media (min-width: 37.5em) { | |
| html:after { | |
| content: '{ "layout": "P", "gutter": "10px" }'; | |
| } | |
| } | |
| @media (min-width: 46.25em) { | |
| html:after { | |
| content: '{ "layout": "M", "gutter": "20px" }'; | |
| } | |
| } | |
| @media (min-width: 61.25em) { | |
| html:after { | |
| content: '{ "layout": "L", "gutter": "20px" }'; | |
| } | |
| } | |
| @media (min-width: 76.25em) { | |
| html:after { | |
| content: '{ "layout": "XL", "gutter": "20px" }'; | |
| } | |
| } | |
| .o-grid-container { | |
| position: relative; | |
| box-sizing: border-box; | |
| margin-left: auto; | |
| margin-right: auto; | |
| min-width: 240px; | |
| max-width: 1220px; | |
| max-width: 1220px; | |
| padding-left: 10px; | |
| padding-right: 10px; | |
| } | |
| @media (min-width: 46.25em) { | |
| .o-grid-container { | |
| padding-left: 20px; | |
| padding-right: 20px; | |
| } | |
| } | |
| @media (min-width: 46.25em) { | |
| .o-grid-snappy .o-grid-container, | |
| .o-grid-container--snappy { | |
| max-width: 740px; | |
| } | |
| } | |
| @media (min-width: 61.25em) { | |
| .o-grid-snappy .o-grid-container, | |
| .o-grid-container--snappy { | |
| max-width: 980px; | |
| } | |
| } | |
| @media (min-width: 76.25em) { | |
| .o-grid-snappy .o-grid-container, | |
| .o-grid-container--snappy { | |
| max-width: 1220px; | |
| } | |
| } | |
| @media \0screen { | |
| .o-grid-container { | |
| padding-left: 20px; | |
| padding-right: 20px; | |
| width: 980px; | |
| } | |
| } | |
| .o-grid-row { | |
| clear: both; | |
| display: flex; | |
| flex-wrap: wrap; | |
| margin-left: -10px; | |
| zoom: 1; | |
| } | |
| @media (min-width: 46.25em) { | |
| .o-grid-row { | |
| margin-left: -20px; | |
| } | |
| } | |
| @media \0screen { | |
| .o-grid-row { | |
| margin-left: -20px; | |
| } | |
| } | |
| .o-grid-row:before, | |
| .o-grid-row:after { | |
| content: ' '; | |
| display: none; | |
| display: table\9; | |
| } | |
| .o-grid-row:after { | |
| clear: both; | |
| } | |
| [data-o-grid-colspan] { | |
| position: relative; | |
| float: left; | |
| box-sizing: border-box; | |
| flex: 1 1 0%; | |
| padding-left: 10px; | |
| } | |
| @media \0screen { | |
| [data-o-grid-colspan] { | |
| min-width: 0 !important; | |
| } | |
| } | |
| @media (min-width: 46.25em) { | |
| [data-o-grid-colspan] { | |
| padding-left: 20px; | |
| } | |
| } | |
| @media \0screen { | |
| [data-o-grid-colspan] { | |
| padding-left: 20px; | |
| } | |
| } | |
| [data-o-grid-colspan~="1"] { | |
| display: block; | |
| flex-basis: 8.33333%; | |
| min-width: 8.33333%; | |
| max-width: 8.33333%; | |
| width: 8.33333%; | |
| } | |
| [data-o-grid-colspan~="2"] { | |
| display: block; | |
| flex-basis: 16.66667%; | |
| min-width: 16.66667%; | |
| max-width: 16.66667%; | |
| width: 16.66667%; | |
| } | |
| [data-o-grid-colspan~="3"] { | |
| display: block; | |
| flex-basis: 25%; | |
| min-width: 25%; | |
| max-width: 25%; | |
| width: 25%; | |
| } | |
| [data-o-grid-colspan~="4"] { | |
| display: block; | |
| flex-basis: 33.33333%; | |
| min-width: 33.33333%; | |
| max-width: 33.33333%; | |
| width: 33.33333%; | |
| } | |
| [data-o-grid-colspan~="5"] { | |
| display: block; | |
| flex-basis: 41.66667%; | |
| min-width: 41.66667%; | |
| max-width: 41.66667%; | |
| width: 41.66667%; | |
| } | |
| [data-o-grid-colspan~="6"] { | |
| display: block; | |
| flex-basis: 50%; | |
| min-width: 50%; | |
| max-width: 50%; | |
| width: 50%; | |
| } | |
| [data-o-grid-colspan~="7"] { | |
| display: block; | |
| flex-basis: 58.33333%; | |
| min-width: 58.33333%; | |
| max-width: 58.33333%; | |
| width: 58.33333%; | |
| } | |
| [data-o-grid-colspan~="8"] { | |
| display: block; | |
| flex-basis: 66.66667%; | |
| min-width: 66.66667%; | |
| max-width: 66.66667%; | |
| width: 66.66667%; | |
| } | |
| [data-o-grid-colspan~="9"] { | |
| display: block; | |
| flex-basis: 75%; | |
| min-width: 75%; | |
| max-width: 75%; | |
| width: 75%; | |
| } | |
| [data-o-grid-colspan~="10"] { | |
| display: block; | |
| flex-basis: 83.33333%; | |
| min-width: 83.33333%; | |
| max-width: 83.33333%; | |
| width: 83.33333%; | |
| } | |
| [data-o-grid-colspan~="11"] { | |
| display: block; | |
| flex-basis: 91.66667%; | |
| min-width: 91.66667%; | |
| max-width: 91.66667%; | |
| width: 91.66667%; | |
| } | |
| [data-o-grid-colspan~="12"] { | |
| display: block; | |
| flex-basis: 100%; | |
| min-width: 100%; | |
| max-width: 100%; | |
| width: 100%; | |
| } | |
| .o-grid-row--compact { | |
| margin-left: 0; | |
| } | |
| .o-grid-row--compact > [data-o-grid-colspan] { | |
| padding-left: 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~="full-width"] { | |
| display: block; | |
| flex-basis: 100%; | |
| min-width: 100%; | |
| max-width: 100%; | |
| width: 100%; | |
| } | |
| [data-o-grid-colspan~="one-half"] { | |
| display: block; | |
| flex-basis: 50%; | |
| min-width: 50%; | |
| max-width: 50%; | |
| width: 50%; | |
| } | |
| [data-o-grid-colspan~="one-third"] { | |
| display: block; | |
| flex-basis: 33.33333%; | |
| min-width: 33.33333%; | |
| max-width: 33.33333%; | |
| width: 33.33333%; | |
| } | |
| [data-o-grid-colspan~="two-thirds"] { | |
| display: block; | |
| flex-basis: 66.66667%; | |
| min-width: 66.66667%; | |
| max-width: 66.66667%; | |
| width: 66.66667%; | |
| } | |
| [data-o-grid-colspan~="one-quarter"] { | |
| display: block; | |
| flex-basis: 25%; | |
| min-width: 25%; | |
| max-width: 25%; | |
| width: 25%; | |
| } | |
| [data-o-grid-colspan~="three-quarters"] { | |
| display: block; | |
| flex-basis: 75%; | |
| min-width: 75%; | |
| max-width: 75%; | |
| width: 75%; | |
| } | |
| [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%; | |
| } | |
| @media \0screen { | |
| [data-o-grid-colspan~="XShide"], | |
| [data-o-grid-colspan~="XS0"] { | |
| display: none; | |
| } | |
| [data-o-grid-colspan~="XScenter"] { | |
| margin-left: auto; | |
| margin-right: auto; | |
| float: none; | |
| } | |
| [data-o-grid-colspan~="XSuncenter"] { | |
| margin-left: 0; | |
| margin-right: 0; | |
| float: left; | |
| } | |
| [data-o-grid-colspan~="XSfull-width"] { | |
| display: block; | |
| flex-basis: 100%; | |
| min-width: 100%; | |
| max-width: 100%; | |
| width: 100%; | |
| } | |
| [data-o-grid-colspan~="XSone-half"] { | |
| display: block; | |
| flex-basis: 50%; | |
| min-width: 50%; | |
| max-width: 50%; | |
| width: 50%; | |
| } | |
| [data-o-grid-colspan~="XSone-third"] { | |
| display: block; | |
| flex-basis: 33.33333%; | |
| min-width: 33.33333%; | |
| max-width: 33.33333%; | |
| width: 33.33333%; | |
| } | |
| [data-o-grid-colspan~="XStwo-thirds"] { | |
| display: block; | |
| flex-basis: 66.66667%; | |
| min-width: 66.66667%; | |
| max-width: 66.66667%; | |
| width: 66.66667%; | |
| } | |
| [data-o-grid-colspan~="XSone-quarter"] { | |
| display: block; | |
| flex-basis: 25%; | |
| min-width: 25%; | |
| max-width: 25%; | |
| width: 25%; | |
| } | |
| [data-o-grid-colspan~="XSthree-quarters"] { | |
| display: block; | |
| flex-basis: 75%; | |
| min-width: 75%; | |
| max-width: 75%; | |
| width: 75%; | |
| } | |
| [data-o-grid-colspan~="XSpush0"] { | |
| left: 0%; | |
| right: auto; | |
| } | |
| [data-o-grid-colspan~="XSpull0"] { | |
| right: 0%; | |
| left: auto; | |
| } | |
| [data-o-grid-colspan~="XSoffset0"] { | |
| margin-left: 0%; | |
| } | |
| [data-o-grid-colspan~="XSpush1"] { | |
| left: 8.33333%; | |
| right: auto; | |
| } | |
| [data-o-grid-colspan~="XSpull1"] { | |
| right: 8.33333%; | |
| left: auto; | |
| } | |
| [data-o-grid-colspan~="XSoffset1"] { | |
| margin-left: 8.33333%; | |
| } | |
| [data-o-grid-colspan~="XSpush2"] { | |
| left: 16.66667%; | |
| right: auto; | |
| } | |
| [data-o-grid-colspan~="XSpull2"] { | |
| right: 16.66667%; | |
| left: auto; | |
| } | |
| [data-o-grid-colspan~="XSoffset2"] { | |
| margin-left: 16.66667%; | |
| } | |
| [data-o-grid-colspan~="XSpush3"] { | |
| left: 25%; | |
| right: auto; | |
| } | |
| [data-o-grid-colspan~="XSpull3"] { | |
| right: 25%; | |
| left: auto; | |
| } | |
| [data-o-grid-colspan~="XSoffset3"] { | |
| margin-left: 25%; | |
| } | |
| [data-o-grid-colspan~="XSpush4"] { | |
| left: 33.33333%; | |
| right: auto; | |
| } | |
| [data-o-grid-colspan~="XSpull4"] { | |
| right: 33.33333%; | |
| left: auto; | |
| } | |
| [data-o-grid-colspan~="XSoffset4"] { | |
| margin-left: 33.33333%; | |
| } | |
| [data-o-grid-colspan~="XSpush5"] { | |
| left: 41.66667%; | |
| right: auto; | |
| } | |
| [data-o-grid-colspan~="XSpull5"] { | |
| right: 41.66667%; | |
| left: auto; | |
| } | |
| [data-o-grid-colspan~="XSoffset5"] { | |
| margin-left: 41.66667%; | |
| } | |
| [data-o-grid-colspan~="XSpush6"] { | |
| left: 50%; | |
| right: auto; | |
| } | |
| [data-o-grid-colspan~="XSpull6"] { | |
| right: 50%; | |
| left: auto; | |
| } | |
| [data-o-grid-colspan~="XSoffset6"] { | |
| margin-left: 50%; | |
| } | |
| [data-o-grid-colspan~="XSpush7"] { | |
| left: 58.33333%; | |
| right: auto; | |
| } | |
| [data-o-grid-colspan~="XSpull7"] { | |
| right: 58.33333%; | |
| left: auto; | |
| } | |
| [data-o-grid-colspan~="XSoffset7"] { | |
| margin-left: 58.33333%; | |
| } | |
| [data-o-grid-colspan~="XSpush8"] { | |
| left: 66.66667%; | |
| right: auto; | |
| } | |
| [data-o-grid-colspan~="XSpull8"] { | |
| right: 66.66667%; | |
| left: auto; | |
| } | |
| [data-o-grid-colspan~="XSoffset8"] { | |
| margin-left: 66.66667%; | |
| } | |
| [data-o-grid-colspan~="XSpush9"] { | |
| left: 75%; | |
| right: auto; | |
| } | |
| [data-o-grid-colspan~="XSpull9"] { | |
| right: 75%; | |
| left: auto; | |
| } | |
| [data-o-grid-colspan~="XSoffset9"] { | |
| margin-left: 75%; | |
| } | |
| [data-o-grid-colspan~="XSpush10"] { | |
| left: 83.33333%; | |
| right: auto; | |
| } | |
| [data-o-grid-colspan~="XSpull10"] { | |
| right: 83.33333%; | |
| left: auto; | |
| } | |
| [data-o-grid-colspan~="XSoffset10"] { | |
| margin-left: 83.33333%; | |
| } | |
| [data-o-grid-colspan~="XSpush11"] { | |
| left: 91.66667%; | |
| right: auto; | |
| } | |
| [data-o-grid-colspan~="XSpull11"] { | |
| right: 91.66667%; | |
| left: auto; | |
| } | |
| [data-o-grid-colspan~="XSoffset11"] { | |
| margin-left: 91.66667%; | |
| } | |
| [data-o-grid-colspan~="XS1"] { | |
| display: block; | |
| flex-basis: 8.33333%; | |
| min-width: 8.33333%; | |
| max-width: 8.33333%; | |
| width: 8.33333%; | |
| } | |
| [data-o-grid-colspan~="XS2"] { | |
| display: block; | |
| flex-basis: 16.66667%; | |
| min-width: 16.66667%; | |
| max-width: 16.66667%; | |
| width: 16.66667%; | |
| } | |
| [data-o-grid-colspan~="XS3"] { | |
| display: block; | |
| flex-basis: 25%; | |
| min-width: 25%; | |
| max-width: 25%; | |
| width: 25%; | |
| } | |
| [data-o-grid-colspan~="XS4"] { | |
| display: block; | |
| flex-basis: 33.33333%; | |
| min-width: 33.33333%; | |
| max-width: 33.33333%; | |
| width: 33.33333%; | |
| } | |
| [data-o-grid-colspan~="XS5"] { | |
| display: block; | |
| flex-basis: 41.66667%; | |
| min-width: 41.66667%; | |
| max-width: 41.66667%; | |
| width: 41.66667%; | |
| } | |
| [data-o-grid-colspan~="XS6"] { | |
| display: block; | |
| flex-basis: 50%; | |
| min-width: 50%; | |
| max-width: 50%; | |
| width: 50%; | |
| } | |
| [data-o-grid-colspan~="XS7"] { | |
| display: block; | |
| flex-basis: 58.33333%; | |
| min-width: 58.33333%; | |
| max-width: 58.33333%; | |
| width: 58.33333%; | |
| } | |
| [data-o-grid-colspan~="XS8"] { | |
| display: block; | |
| flex-basis: 66.66667%; | |
| min-width: 66.66667%; | |
| max-width: 66.66667%; | |
| width: 66.66667%; | |
| } | |
| [data-o-grid-colspan~="XS9"] { | |
| display: block; | |
| flex-basis: 75%; | |
| min-width: 75%; | |
| max-width: 75%; | |
| width: 75%; | |
| } | |
| [data-o-grid-colspan~="XS10"] { | |
| display: block; | |
| flex-basis: 83.33333%; | |
| min-width: 83.33333%; | |
| max-width: 83.33333%; | |
| width: 83.33333%; | |
| } | |
| [data-o-grid-colspan~="XS11"] { | |
| display: block; | |
| flex-basis: 91.66667%; | |
| min-width: 91.66667%; | |
| max-width: 91.66667%; | |
| width: 91.66667%; | |
| } | |
| [data-o-grid-colspan~="XS12"] { | |
| display: block; | |
| flex-basis: 100%; | |
| min-width: 100%; | |
| max-width: 100%; | |
| width: 100%; | |
| } | |
| [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~="Sfull-width"] { | |
| display: block; | |
| flex-basis: 100%; | |
| min-width: 100%; | |
| max-width: 100%; | |
| width: 100%; | |
| } | |
| [data-o-grid-colspan~="Sone-half"] { | |
| display: block; | |
| flex-basis: 50%; | |
| min-width: 50%; | |
| max-width: 50%; | |
| width: 50%; | |
| } | |
| [data-o-grid-colspan~="Sone-third"] { | |
| display: block; | |
| flex-basis: 33.33333%; | |
| min-width: 33.33333%; | |
| max-width: 33.33333%; | |
| width: 33.33333%; | |
| } | |
| [data-o-grid-colspan~="Stwo-thirds"] { | |
| display: block; | |
| flex-basis: 66.66667%; | |
| min-width: 66.66667%; | |
| max-width: 66.66667%; | |
| width: 66.66667%; | |
| } | |
| [data-o-grid-colspan~="Sone-quarter"] { | |
| display: block; | |
| flex-basis: 25%; | |
| min-width: 25%; | |
| max-width: 25%; | |
| width: 25%; | |
| } | |
| [data-o-grid-colspan~="Sthree-quarters"] { | |
| display: block; | |
| flex-basis: 75%; | |
| min-width: 75%; | |
| max-width: 75%; | |
| width: 75%; | |
| } | |
| [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~="S1"] { | |
| display: block; | |
| flex-basis: 8.33333%; | |
| min-width: 8.33333%; | |
| max-width: 8.33333%; | |
| width: 8.33333%; | |
| } | |
| [data-o-grid-colspan~="S2"] { | |
| display: block; | |
| flex-basis: 16.66667%; | |
| min-width: 16.66667%; | |
| max-width: 16.66667%; | |
| width: 16.66667%; | |
| } | |
| [data-o-grid-colspan~="S3"] { | |
| display: block; | |
| flex-basis: 25%; | |
| min-width: 25%; | |
| max-width: 25%; | |
| width: 25%; | |
| } | |
| [data-o-grid-colspan~="S4"] { | |
| display: block; | |
| flex-basis: 33.33333%; | |
| min-width: 33.33333%; | |
| max-width: 33.33333%; | |
| width: 33.33333%; | |
| } | |
| [data-o-grid-colspan~="S5"] { | |
| display: block; | |
| flex-basis: 41.66667%; | |
| min-width: 41.66667%; | |
| max-width: 41.66667%; | |
| width: 41.66667%; | |
| } | |
| [data-o-grid-colspan~="S6"] { | |
| display: block; | |
| flex-basis: 50%; | |
| min-width: 50%; | |
| max-width: 50%; | |
| width: 50%; | |
| } | |
| [data-o-grid-colspan~="S7"] { | |
| display: block; | |
| flex-basis: 58.33333%; | |
| min-width: 58.33333%; | |
| max-width: 58.33333%; | |
| width: 58.33333%; | |
| } | |
| [data-o-grid-colspan~="S8"] { | |
| display: block; | |
| flex-basis: 66.66667%; | |
| min-width: 66.66667%; | |
| max-width: 66.66667%; | |
| width: 66.66667%; | |
| } | |
| [data-o-grid-colspan~="S9"] { | |
| display: block; | |
| flex-basis: 75%; | |
| min-width: 75%; | |
| max-width: 75%; | |
| width: 75%; | |
| } | |
| [data-o-grid-colspan~="S10"] { | |
| display: block; | |
| flex-basis: 83.33333%; | |
| min-width: 83.33333%; | |
| max-width: 83.33333%; | |
| width: 83.33333%; | |
| } | |
| [data-o-grid-colspan~="S11"] { | |
| display: block; | |
| flex-basis: 91.66667%; | |
| min-width: 91.66667%; | |
| max-width: 91.66667%; | |
| width: 91.66667%; | |
| } | |
| [data-o-grid-colspan~="S12"] { | |
| display: block; | |
| flex-basis: 100%; | |
| min-width: 100%; | |
| max-width: 100%; | |
| width: 100%; | |
| } | |
| [data-o-grid-colspan~="Phide"], | |
| [data-o-grid-colspan~="P0"] { | |
| display: none; | |
| } | |
| [data-o-grid-colspan~="Pcenter"] { | |
| margin-left: auto; | |
| margin-right: auto; | |
| float: none; | |
| } | |
| [data-o-grid-colspan~="Puncenter"] { | |
| margin-left: 0; | |
| margin-right: 0; | |
| float: left; | |
| } | |
| [data-o-grid-colspan~="Pfull-width"] { | |
| display: block; | |
| flex-basis: 100%; | |
| min-width: 100%; | |
| max-width: 100%; | |
| width: 100%; | |
| } | |
| [data-o-grid-colspan~="Pone-half"] { | |
| display: block; | |
| flex-basis: 50%; | |
| min-width: 50%; | |
| max-width: 50%; | |
| width: 50%; | |
| } | |
| [data-o-grid-colspan~="Pone-third"] { | |
| display: block; | |
| flex-basis: 33.33333%; | |
| min-width: 33.33333%; | |
| max-width: 33.33333%; | |
| width: 33.33333%; | |
| } | |
| [data-o-grid-colspan~="Ptwo-thirds"] { | |
| display: block; | |
| flex-basis: 66.66667%; | |
| min-width: 66.66667%; | |
| max-width: 66.66667%; | |
| width: 66.66667%; | |
| } | |
| [data-o-grid-colspan~="Pone-quarter"] { | |
| display: block; | |
| flex-basis: 25%; | |
| min-width: 25%; | |
| max-width: 25%; | |
| width: 25%; | |
| } | |
| [data-o-grid-colspan~="Pthree-quarters"] { | |
| display: block; | |
| flex-basis: 75%; | |
| min-width: 75%; | |
| max-width: 75%; | |
| width: 75%; | |
| } | |
| [data-o-grid-colspan~="Ppush0"] { | |
| left: 0%; | |
| right: auto; | |
| } | |
| [data-o-grid-colspan~="Ppull0"] { | |
| right: 0%; | |
| left: auto; | |
| } | |
| [data-o-grid-colspan~="Poffset0"] { | |
| margin-left: 0%; | |
| } | |
| [data-o-grid-colspan~="Ppush1"] { | |
| left: 8.33333%; | |
| right: auto; | |
| } | |
| [data-o-grid-colspan~="Ppull1"] { | |
| right: 8.33333%; | |
| left: auto; | |
| } | |
| [data-o-grid-colspan~="Poffset1"] { | |
| margin-left: 8.33333%; | |
| } | |
| [data-o-grid-colspan~="Ppush2"] { | |
| left: 16.66667%; | |
| right: auto; | |
| } | |
| [data-o-grid-colspan~="Ppull2"] { | |
| right: 16.66667%; | |
| left: auto; | |
| } | |
| [data-o-grid-colspan~="Poffset2"] { | |
| margin-left: 16.66667%; | |
| } | |
| [data-o-grid-colspan~="Ppush3"] { | |
| left: 25%; | |
| right: auto; | |
| } | |
| [data-o-grid-colspan~="Ppull3"] { | |
| right: 25%; | |
| left: auto; | |
| } | |
| [data-o-grid-colspan~="Poffset3"] { | |
| margin-left: 25%; | |
| } | |
| [data-o-grid-colspan~="Ppush4"] { | |
| left: 33.33333%; | |
| right: auto; | |
| } | |
| [data-o-grid-colspan~="Ppull4"] { | |
| right: 33.33333%; | |
| left: auto; | |
| } | |
| [data-o-grid-colspan~="Poffset4"] { | |
| margin-left: 33.33333%; | |
| } | |
| [data-o-grid-colspan~="Ppush5"] { | |
| left: 41.66667%; | |
| right: auto; | |
| } | |
| [data-o-grid-colspan~="Ppull5"] { | |
| right: 41.66667%; | |
| left: auto; | |
| } | |
| [data-o-grid-colspan~="Poffset5"] { | |
| margin-left: 41.66667%; | |
| } | |
| [data-o-grid-colspan~="Ppush6"] { | |
| left: 50%; | |
| right: auto; | |
| } | |
| [data-o-grid-colspan~="Ppull6"] { | |
| right: 50%; | |
| left: auto; | |
| } | |
| [data-o-grid-colspan~="Poffset6"] { | |
| margin-left: 50%; | |
| } | |
| [data-o-grid-colspan~="Ppush7"] { | |
| left: 58.33333%; | |
| right: auto; | |
| } | |
| [data-o-grid-colspan~="Ppull7"] { | |
| right: 58.33333%; | |
| left: auto; | |
| } | |
| [data-o-grid-colspan~="Poffset7"] { | |
| margin-left: 58.33333%; | |
| } | |
| [data-o-grid-colspan~="Ppush8"] { | |
| left: 66.66667%; | |
| right: auto; | |
| } | |
| [data-o-grid-colspan~="Ppull8"] { | |
| right: 66.66667%; | |
| left: auto; | |
| } | |
| [data-o-grid-colspan~="Poffset8"] { | |
| margin-left: 66.66667%; | |
| } | |
| [data-o-grid-colspan~="Ppush9"] { | |
| left: 75%; | |
| right: auto; | |
| } | |
| [data-o-grid-colspan~="Ppull9"] { | |
| right: 75%; | |
| left: auto; | |
| } | |
| [data-o-grid-colspan~="Poffset9"] { | |
| margin-left: 75%; | |
| } | |
| [data-o-grid-colspan~="Ppush10"] { | |
| left: 83.33333%; | |
| right: auto; | |
| } | |
| [data-o-grid-colspan~="Ppull10"] { | |
| right: 83.33333%; | |
| left: auto; | |
| } | |
| [data-o-grid-colspan~="Poffset10"] { | |
| margin-left: 83.33333%; | |
| } | |
| [data-o-grid-colspan~="Ppush11"] { | |
| left: 91.66667%; | |
| right: auto; | |
| } | |
| [data-o-grid-colspan~="Ppull11"] { | |
| right: 91.66667%; | |
| left: auto; | |
| } | |
| [data-o-grid-colspan~="Poffset11"] { | |
| margin-left: 91.66667%; | |
| } | |
| [data-o-grid-colspan~="P1"] { | |
| display: block; | |
| flex-basis: 8.33333%; | |
| min-width: 8.33333%; | |
| max-width: 8.33333%; | |
| width: 8.33333%; | |
| } | |
| [data-o-grid-colspan~="P2"] { | |
| display: block; | |
| flex-basis: 16.66667%; | |
| min-width: 16.66667%; | |
| max-width: 16.66667%; | |
| width: 16.66667%; | |
| } | |
| [data-o-grid-colspan~="P3"] { | |
| display: block; | |
| flex-basis: 25%; | |
| min-width: 25%; | |
| max-width: 25%; | |
| width: 25%; | |
| } | |
| [data-o-grid-colspan~="P4"] { | |
| display: block; | |
| flex-basis: 33.33333%; | |
| min-width: 33.33333%; | |
| max-width: 33.33333%; | |
| width: 33.33333%; | |
| } | |
| [data-o-grid-colspan~="P5"] { | |
| display: block; | |
| flex-basis: 41.66667%; | |
| min-width: 41.66667%; | |
| max-width: 41.66667%; | |
| width: 41.66667%; | |
| } | |
| [data-o-grid-colspan~="P6"] { | |
| display: block; | |
| flex-basis: 50%; | |
| min-width: 50%; | |
| max-width: 50%; | |
| width: 50%; | |
| } | |
| [data-o-grid-colspan~="P7"] { | |
| display: block; | |
| flex-basis: 58.33333%; | |
| min-width: 58.33333%; | |
| max-width: 58.33333%; | |
| width: 58.33333%; | |
| } | |
| [data-o-grid-colspan~="P8"] { | |
| display: block; | |
| flex-basis: 66.66667%; | |
| min-width: 66.66667%; | |
| max-width: 66.66667%; | |
| width: 66.66667%; | |
| } | |
| [data-o-grid-colspan~="P9"] { | |
| display: block; | |
| flex-basis: 75%; | |
| min-width: 75%; | |
| max-width: 75%; | |
| width: 75%; | |
| } | |
| [data-o-grid-colspan~="P10"] { | |
| display: block; | |
| flex-basis: 83.33333%; | |
| min-width: 83.33333%; | |
| max-width: 83.33333%; | |
| width: 83.33333%; | |
| } | |
| [data-o-grid-colspan~="P11"] { | |
| display: block; | |
| flex-basis: 91.66667%; | |
| min-width: 91.66667%; | |
| max-width: 91.66667%; | |
| width: 91.66667%; | |
| } | |
| [data-o-grid-colspan~="P12"] { | |
| display: block; | |
| flex-basis: 100%; | |
| min-width: 100%; | |
| max-width: 100%; | |
| width: 100%; | |
| } | |
| [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~="Mfull-width"] { | |
| display: block; | |
| flex-basis: 100%; | |
| min-width: 100%; | |
| max-width: 100%; | |
| width: 100%; | |
| } | |
| [data-o-grid-colspan~="Mone-half"] { | |
| display: block; | |
| flex-basis: 50%; | |
| min-width: 50%; | |
| max-width: 50%; | |
| width: 50%; | |
| } | |
| [data-o-grid-colspan~="Mone-third"] { | |
| display: block; | |
| flex-basis: 33.33333%; | |
| min-width: 33.33333%; | |
| max-width: 33.33333%; | |
| width: 33.33333%; | |
| } | |
| [data-o-grid-colspan~="Mtwo-thirds"] { | |
| display: block; | |
| flex-basis: 66.66667%; | |
| min-width: 66.66667%; | |
| max-width: 66.66667%; | |
| width: 66.66667%; | |
| } | |
| [data-o-grid-colspan~="Mone-quarter"] { | |
| display: block; | |
| flex-basis: 25%; | |
| min-width: 25%; | |
| max-width: 25%; | |
| width: 25%; | |
| } | |
| [data-o-grid-colspan~="Mthree-quarters"] { | |
| display: block; | |
| flex-basis: 75%; | |
| min-width: 75%; | |
| max-width: 75%; | |
| width: 75%; | |
| } | |
| [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~="M1"] { | |
| display: block; | |
| flex-basis: 8.33333%; | |
| min-width: 8.33333%; | |
| max-width: 8.33333%; | |
| width: 8.33333%; | |
| } | |
| [data-o-grid-colspan~="M2"] { | |
| display: block; | |
| flex-basis: 16.66667%; | |
| min-width: 16.66667%; | |
| max-width: 16.66667%; | |
| width: 16.66667%; | |
| } | |
| [data-o-grid-colspan~="M3"] { | |
| display: block; | |
| flex-basis: 25%; | |
| min-width: 25%; | |
| max-width: 25%; | |
| width: 25%; | |
| } | |
| [data-o-grid-colspan~="M4"] { | |
| display: block; | |
| flex-basis: 33.33333%; | |
| min-width: 33.33333%; | |
| max-width: 33.33333%; | |
| width: 33.33333%; | |
| } | |
| [data-o-grid-colspan~="M5"] { | |
| display: block; | |
| flex-basis: 41.66667%; | |
| min-width: 41.66667%; | |
| max-width: 41.66667%; | |
| width: 41.66667%; | |
| } | |
| [data-o-grid-colspan~="M6"] { | |
| display: block; | |
| flex-basis: 50%; | |
| min-width: 50%; | |
| max-width: 50%; | |
| width: 50%; | |
| } | |
| [data-o-grid-colspan~="M7"] { | |
| display: block; | |
| flex-basis: 58.33333%; | |
| min-width: 58.33333%; | |
| max-width: 58.33333%; | |
| width: 58.33333%; | |
| } | |
| [data-o-grid-colspan~="M8"] { | |
| display: block; | |
| flex-basis: 66.66667%; | |
| min-width: 66.66667%; | |
| max-width: 66.66667%; | |
| width: 66.66667%; | |
| } | |
| [data-o-grid-colspan~="M9"] { | |
| display: block; | |
| flex-basis: 75%; | |
| min-width: 75%; | |
| max-width: 75%; | |
| width: 75%; | |
| } | |
| [data-o-grid-colspan~="M10"] { | |
| display: block; | |
| flex-basis: 83.33333%; | |
| min-width: 83.33333%; | |
| max-width: 83.33333%; | |
| width: 83.33333%; | |
| } | |
| [data-o-grid-colspan~="M11"] { | |
| display: block; | |
| flex-basis: 91.66667%; | |
| min-width: 91.66667%; | |
| max-width: 91.66667%; | |
| width: 91.66667%; | |
| } | |
| [data-o-grid-colspan~="M12"] { | |
| display: block; | |
| flex-basis: 100%; | |
| min-width: 100%; | |
| max-width: 100%; | |
| width: 100%; | |
| } | |
| [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~="Lfull-width"] { | |
| display: block; | |
| flex-basis: 100%; | |
| min-width: 100%; | |
| max-width: 100%; | |
| width: 100%; | |
| } | |
| [data-o-grid-colspan~="Lone-half"] { | |
| display: block; | |
| flex-basis: 50%; | |
| min-width: 50%; | |
| max-width: 50%; | |
| width: 50%; | |
| } | |
| [data-o-grid-colspan~="Lone-third"] { | |
| display: block; | |
| flex-basis: 33.33333%; | |
| min-width: 33.33333%; | |
| max-width: 33.33333%; | |
| width: 33.33333%; | |
| } | |
| [data-o-grid-colspan~="Ltwo-thirds"] { | |
| display: block; | |
| flex-basis: 66.66667%; | |
| min-width: 66.66667%; | |
| max-width: 66.66667%; | |
| width: 66.66667%; | |
| } | |
| [data-o-grid-colspan~="Lone-quarter"] { | |
| display: block; | |
| flex-basis: 25%; | |
| min-width: 25%; | |
| max-width: 25%; | |
| width: 25%; | |
| } | |
| [data-o-grid-colspan~="Lthree-quarters"] { | |
| display: block; | |
| flex-basis: 75%; | |
| min-width: 75%; | |
| max-width: 75%; | |
| width: 75%; | |
| } | |
| [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~="L1"] { | |
| display: block; | |
| flex-basis: 8.33333%; | |
| min-width: 8.33333%; | |
| max-width: 8.33333%; | |
| width: 8.33333%; | |
| } | |
| [data-o-grid-colspan~="L2"] { | |
| display: block; | |
| flex-basis: 16.66667%; | |
| min-width: 16.66667%; | |
| max-width: 16.66667%; | |
| width: 16.66667%; | |
| } | |
| [data-o-grid-colspan~="L3"] { | |
| display: block; | |
| flex-basis: 25%; | |
| min-width: 25%; | |
| max-width: 25%; | |
| width: 25%; | |
| } | |
| [data-o-grid-colspan~="L4"] { | |
| display: block; | |
| flex-basis: 33.33333%; | |
| min-width: 33.33333%; | |
| max-width: 33.33333%; | |
| width: 33.33333%; | |
| } | |
| [data-o-grid-colspan~="L5"] { | |
| display: block; | |
| flex-basis: 41.66667%; | |
| min-width: 41.66667%; | |
| max-width: 41.66667%; | |
| width: 41.66667%; | |
| } | |
| [data-o-grid-colspan~="L6"] { | |
| display: block; | |
| flex-basis: 50%; | |
| min-width: 50%; | |
| max-width: 50%; | |
| width: 50%; | |
| } | |
| [data-o-grid-colspan~="L7"] { | |
| display: block; | |
| flex-basis: 58.33333%; | |
| min-width: 58.33333%; | |
| max-width: 58.33333%; | |
| width: 58.33333%; | |
| } | |
| [data-o-grid-colspan~="L8"] { | |
| display: block; | |
| flex-basis: 66.66667%; | |
| min-width: 66.66667%; | |
| max-width: 66.66667%; | |
| width: 66.66667%; | |
| } | |
| [data-o-grid-colspan~="L9"] { | |
| display: block; | |
| flex-basis: 75%; | |
| min-width: 75%; | |
| max-width: 75%; | |
| width: 75%; | |
| } | |
| [data-o-grid-colspan~="L10"] { | |
| display: block; | |
| flex-basis: 83.33333%; | |
| min-width: 83.33333%; | |
| max-width: 83.33333%; | |
| width: 83.33333%; | |
| } | |
| [data-o-grid-colspan~="L11"] { | |
| display: block; | |
| flex-basis: 91.66667%; | |
| min-width: 91.66667%; | |
| max-width: 91.66667%; | |
| width: 91.66667%; | |
| } | |
| [data-o-grid-colspan~="L12"] { | |
| display: block; | |
| flex-basis: 100%; | |
| min-width: 100%; | |
| max-width: 100%; | |
| width: 100%; | |
| } | |
| } | |
| @media (min-width: 22.5em) { | |
| [data-o-grid-colspan~="XShide"], | |
| [data-o-grid-colspan~="XS0"] { | |
| display: none; | |
| } | |
| [data-o-grid-colspan~="XScenter"] { | |
| margin-left: auto; | |
| margin-right: auto; | |
| float: none; | |
| } | |
| [data-o-grid-colspan~="XSuncenter"] { | |
| margin-left: 0; | |
| margin-right: 0; | |
| float: left; | |
| } | |
| [data-o-grid-colspan~="XSfull-width"] { | |
| display: block; | |
| flex-basis: 100%; | |
| min-width: 100%; | |
| max-width: 100%; | |
| width: 100%; | |
| } | |
| [data-o-grid-colspan~="XSone-half"] { | |
| display: block; | |
| flex-basis: 50%; | |
| min-width: 50%; | |
| max-width: 50%; | |
| width: 50%; | |
| } | |
| [data-o-grid-colspan~="XSone-third"] { | |
| display: block; | |
| flex-basis: 33.33333%; | |
| min-width: 33.33333%; | |
| max-width: 33.33333%; | |
| width: 33.33333%; | |
| } | |
| [data-o-grid-colspan~="XStwo-thirds"] { | |
| display: block; | |
| flex-basis: 66.66667%; | |
| min-width: 66.66667%; | |
| max-width: 66.66667%; | |
| width: 66.66667%; | |
| } | |
| [data-o-grid-colspan~="XSone-quarter"] { | |
| display: block; | |
| flex-basis: 25%; | |
| min-width: 25%; | |
| max-width: 25%; | |
| width: 25%; | |
| } | |
| [data-o-grid-colspan~="XSthree-quarters"] { | |
| display: block; | |
| flex-basis: 75%; | |
| min-width: 75%; | |
| max-width: 75%; | |
| width: 75%; | |
| } | |
| [data-o-grid-colspan~="XSpush0"] { | |
| left: 0%; | |
| right: auto; | |
| } | |
| [data-o-grid-colspan~="XSpull0"] { | |
| right: 0%; | |
| left: auto; | |
| } | |
| [data-o-grid-colspan~="XSoffset0"] { | |
| margin-left: 0%; | |
| } | |
| [data-o-grid-colspan~="XSpush1"] { | |
| left: 8.33333%; | |
| right: auto; | |
| } | |
| [data-o-grid-colspan~="XSpull1"] { | |
| right: 8.33333%; | |
| left: auto; | |
| } | |
| [data-o-grid-colspan~="XSoffset1"] { | |
| margin-left: 8.33333%; | |
| } | |
| [data-o-grid-colspan~="XSpush2"] { | |
| left: 16.66667%; | |
| right: auto; | |
| } | |
| [data-o-grid-colspan~="XSpull2"] { | |
| right: 16.66667%; | |
| left: auto; | |
| } | |
| [data-o-grid-colspan~="XSoffset2"] { | |
| margin-left: 16.66667%; | |
| } | |
| [data-o-grid-colspan~="XSpush3"] { | |
| left: 25%; | |
| right: auto; | |
| } | |
| [data-o-grid-colspan~="XSpull3"] { | |
| right: 25%; | |
| left: auto; | |
| } | |
| [data-o-grid-colspan~="XSoffset3"] { | |
| margin-left: 25%; | |
| } | |
| [data-o-grid-colspan~="XSpush4"] { | |
| left: 33.33333%; | |
| right: auto; | |
| } | |
| [data-o-grid-colspan~="XSpull4"] { | |
| right: 33.33333%; | |
| left: auto; | |
| } | |
| [data-o-grid-colspan~="XSoffset4"] { | |
| margin-left: 33.33333%; | |
| } | |
| [data-o-grid-colspan~="XSpush5"] { | |
| left: 41.66667%; | |
| right: auto; | |
| } | |
| [data-o-grid-colspan~="XSpull5"] { | |
| right: 41.66667%; | |
| left: auto; | |
| } | |
| [data-o-grid-colspan~="XSoffset5"] { | |
| margin-left: 41.66667%; | |
| } | |
| [data-o-grid-colspan~="XSpush6"] { | |
| left: 50%; | |
| right: auto; | |
| } | |
| [data-o-grid-colspan~="XSpull6"] { | |
| right: 50%; | |
| left: auto; | |
| } | |
| [data-o-grid-colspan~="XSoffset6"] { | |
| margin-left: 50%; | |
| } | |
| [data-o-grid-colspan~="XSpush7"] { | |
| left: 58.33333%; | |
| right: auto; | |
| } | |
| [data-o-grid-colspan~="XSpull7"] { | |
| right: 58.33333%; | |
| left: auto; | |
| } | |
| [data-o-grid-colspan~="XSoffset7"] { | |
| margin-left: 58.33333%; | |
| } | |
| [data-o-grid-colspan~="XSpush8"] { | |
| left: 66.66667%; | |
| right: auto; | |
| } | |
| [data-o-grid-colspan~="XSpull8"] { | |
| right: 66.66667%; | |
| left: auto; | |
| } | |
| [data-o-grid-colspan~="XSoffset8"] { | |
| margin-left: 66.66667%; | |
| } | |
| [data-o-grid-colspan~="XSpush9"] { | |
| left: 75%; | |
| right: auto; | |
| } | |
| [data-o-grid-colspan~="XSpull9"] { | |
| right: 75%; | |
| left: auto; | |
| } | |
| [data-o-grid-colspan~="XSoffset9"] { | |
| margin-left: 75%; | |
| } | |
| [data-o-grid-colspan~="XSpush10"] { | |
| left: 83.33333%; | |
| right: auto; | |
| } | |
| [data-o-grid-colspan~="XSpull10"] { | |
| right: 83.33333%; | |
| left: auto; | |
| } | |
| [data-o-grid-colspan~="XSoffset10"] { | |
| margin-left: 83.33333%; | |
| } | |
| [data-o-grid-colspan~="XSpush11"] { | |
| left: 91.66667%; | |
| right: auto; | |
| } | |
| [data-o-grid-colspan~="XSpull11"] { | |
| right: 91.66667%; | |
| left: auto; | |
| } | |
| [data-o-grid-colspan~="XSoffset11"] { | |
| margin-left: 91.66667%; | |
| } | |
| [data-o-grid-colspan~="XS1"] { | |
| display: block; | |
| flex-basis: 8.33333%; | |
| min-width: 8.33333%; | |
| max-width: 8.33333%; | |
| width: 8.33333%; | |
| } | |
| [data-o-grid-colspan~="XS2"] { | |
| display: block; | |
| flex-basis: 16.66667%; | |
| min-width: 16.66667%; | |
| max-width: 16.66667%; | |
| width: 16.66667%; | |
| } | |
| [data-o-grid-colspan~="XS3"] { | |
| display: block; | |
| flex-basis: 25%; | |
| min-width: 25%; | |
| max-width: 25%; | |
| width: 25%; | |
| } | |
| [data-o-grid-colspan~="XS4"] { | |
| display: block; | |
| flex-basis: 33.33333%; | |
| min-width: 33.33333%; | |
| max-width: 33.33333%; | |
| width: 33.33333%; | |
| } | |
| [data-o-grid-colspan~="XS5"] { | |
| display: block; | |
| flex-basis: 41.66667%; | |
| min-width: 41.66667%; | |
| max-width: 41.66667%; | |
| width: 41.66667%; | |
| } | |
| [data-o-grid-colspan~="XS6"] { | |
| display: block; | |
| flex-basis: 50%; | |
| min-width: 50%; | |
| max-width: 50%; | |
| width: 50%; | |
| } | |
| [data-o-grid-colspan~="XS7"] { | |
| display: block; | |
| flex-basis: 58.33333%; | |
| min-width: 58.33333%; | |
| max-width: 58.33333%; | |
| width: 58.33333%; | |
| } | |
| [data-o-grid-colspan~="XS8"] { | |
| display: block; | |
| flex-basis: 66.66667%; | |
| min-width: 66.66667%; | |
| max-width: 66.66667%; | |
| width: 66.66667%; | |
| } | |
| [data-o-grid-colspan~="XS9"] { | |
| display: block; | |
| flex-basis: 75%; | |
| min-width: 75%; | |
| max-width: 75%; | |
| width: 75%; | |
| } | |
| [data-o-grid-colspan~="XS10"] { | |
| display: block; | |
| flex-basis: 83.33333%; | |
| min-width: 83.33333%; | |
| max-width: 83.33333%; | |
| width: 83.33333%; | |
| } | |
| [data-o-grid-colspan~="XS11"] { | |
| display: block; | |
| flex-basis: 91.66667%; | |
| min-width: 91.66667%; | |
| max-width: 91.66667%; | |
| width: 91.66667%; | |
| } | |
| [data-o-grid-colspan~="XS12"] { | |
| display: block; | |
| flex-basis: 100%; | |
| min-width: 100%; | |
| max-width: 100%; | |
| width: 100%; | |
| } | |
| } | |
| @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~="Sfull-width"] { | |
| display: block; | |
| flex-basis: 100%; | |
| min-width: 100%; | |
| max-width: 100%; | |
| width: 100%; | |
| } | |
| [data-o-grid-colspan~="Sone-half"] { | |
| display: block; | |
| flex-basis: 50%; | |
| min-width: 50%; | |
| max-width: 50%; | |
| width: 50%; | |
| } | |
| [data-o-grid-colspan~="Sone-third"] { | |
| display: block; | |
| flex-basis: 33.33333%; | |
| min-width: 33.33333%; | |
| max-width: 33.33333%; | |
| width: 33.33333%; | |
| } | |
| [data-o-grid-colspan~="Stwo-thirds"] { | |
| display: block; | |
| flex-basis: 66.66667%; | |
| min-width: 66.66667%; | |
| max-width: 66.66667%; | |
| width: 66.66667%; | |
| } | |
| [data-o-grid-colspan~="Sone-quarter"] { | |
| display: block; | |
| flex-basis: 25%; | |
| min-width: 25%; | |
| max-width: 25%; | |
| width: 25%; | |
| } | |
| [data-o-grid-colspan~="Sthree-quarters"] { | |
| display: block; | |
| flex-basis: 75%; | |
| min-width: 75%; | |
| max-width: 75%; | |
| width: 75%; | |
| } | |
| [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~="S1"] { | |
| display: block; | |
| flex-basis: 8.33333%; | |
| min-width: 8.33333%; | |
| max-width: 8.33333%; | |
| width: 8.33333%; | |
| } | |
| [data-o-grid-colspan~="S2"] { | |
| display: block; | |
| flex-basis: 16.66667%; | |
| min-width: 16.66667%; | |
| max-width: 16.66667%; | |
| width: 16.66667%; | |
| } | |
| [data-o-grid-colspan~="S3"] { | |
| display: block; | |
| flex-basis: 25%; | |
| min-width: 25%; | |
| max-width: 25%; | |
| width: 25%; | |
| } | |
| [data-o-grid-colspan~="S4"] { | |
| display: block; | |
| flex-basis: 33.33333%; | |
| min-width: 33.33333%; | |
| max-width: 33.33333%; | |
| width: 33.33333%; | |
| } | |
| [data-o-grid-colspan~="S5"] { | |
| display: block; | |
| flex-basis: 41.66667%; | |
| min-width: 41.66667%; | |
| max-width: 41.66667%; | |
| width: 41.66667%; | |
| } | |
| [data-o-grid-colspan~="S6"] { | |
| display: block; | |
| flex-basis: 50%; | |
| min-width: 50%; | |
| max-width: 50%; | |
| width: 50%; | |
| } | |
| [data-o-grid-colspan~="S7"] { | |
| display: block; | |
| flex-basis: 58.33333%; | |
| min-width: 58.33333%; | |
| max-width: 58.33333%; | |
| width: 58.33333%; | |
| } | |
| [data-o-grid-colspan~="S8"] { | |
| display: block; | |
| flex-basis: 66.66667%; | |
| min-width: 66.66667%; | |
| max-width: 66.66667%; | |
| width: 66.66667%; | |
| } | |
| [data-o-grid-colspan~="S9"] { | |
| display: block; | |
| flex-basis: 75%; | |
| min-width: 75%; | |
| max-width: 75%; | |
| width: 75%; | |
| } | |
| [data-o-grid-colspan~="S10"] { | |
| display: block; | |
| flex-basis: 83.33333%; | |
| min-width: 83.33333%; | |
| max-width: 83.33333%; | |
| width: 83.33333%; | |
| } | |
| [data-o-grid-colspan~="S11"] { | |
| display: block; | |
| flex-basis: 91.66667%; | |
| min-width: 91.66667%; | |
| max-width: 91.66667%; | |
| width: 91.66667%; | |
| } | |
| [data-o-grid-colspan~="S12"] { | |
| display: block; | |
| flex-basis: 100%; | |
| min-width: 100%; | |
| max-width: 100%; | |
| width: 100%; | |
| } | |
| } | |
| @media (min-width: 37.5em) { | |
| [data-o-grid-colspan~="Phide"], | |
| [data-o-grid-colspan~="P0"] { | |
| display: none; | |
| } | |
| [data-o-grid-colspan~="Pcenter"] { | |
| margin-left: auto; | |
| margin-right: auto; | |
| float: none; | |
| } | |
| [data-o-grid-colspan~="Puncenter"] { | |
| margin-left: 0; | |
| margin-right: 0; | |
| float: left; | |
| } | |
| [data-o-grid-colspan~="Pfull-width"] { | |
| display: block; | |
| flex-basis: 100%; | |
| min-width: 100%; | |
| max-width: 100%; | |
| width: 100%; | |
| } | |
| [data-o-grid-colspan~="Pone-half"] { | |
| display: block; | |
| flex-basis: 50%; | |
| min-width: 50%; | |
| max-width: 50%; | |
| width: 50%; | |
| } | |
| [data-o-grid-colspan~="Pone-third"] { | |
| display: block; | |
| flex-basis: 33.33333%; | |
| min-width: 33.33333%; | |
| max-width: 33.33333%; | |
| width: 33.33333%; | |
| } | |
| [data-o-grid-colspan~="Ptwo-thirds"] { | |
| display: block; | |
| flex-basis: 66.66667%; | |
| min-width: 66.66667%; | |
| max-width: 66.66667%; | |
| width: 66.66667%; | |
| } | |
| [data-o-grid-colspan~="Pone-quarter"] { | |
| display: block; | |
| flex-basis: 25%; | |
| min-width: 25%; | |
| max-width: 25%; | |
| width: 25%; | |
| } | |
| [data-o-grid-colspan~="Pthree-quarters"] { | |
| display: block; | |
| flex-basis: 75%; | |
| min-width: 75%; | |
| max-width: 75%; | |
| width: 75%; | |
| } | |
| [data-o-grid-colspan~="Ppush0"] { | |
| left: 0%; | |
| right: auto; | |
| } | |
| [data-o-grid-colspan~="Ppull0"] { | |
| right: 0%; | |
| left: auto; | |
| } | |
| [data-o-grid-colspan~="Poffset0"] { | |
| margin-left: 0%; | |
| } | |
| [data-o-grid-colspan~="Ppush1"] { | |
| left: 8.33333%; | |
| right: auto; | |
| } | |
| [data-o-grid-colspan~="Ppull1"] { | |
| right: 8.33333%; | |
| left: auto; | |
| } | |
| [data-o-grid-colspan~="Poffset1"] { | |
| margin-left: 8.33333%; | |
| } | |
| [data-o-grid-colspan~="Ppush2"] { | |
| left: 16.66667%; | |
| right: auto; | |
| } | |
| [data-o-grid-colspan~="Ppull2"] { | |
| right: 16.66667%; | |
| left: auto; | |
| } | |
| [data-o-grid-colspan~="Poffset2"] { | |
| margin-left: 16.66667%; | |
| } | |
| [data-o-grid-colspan~="Ppush3"] { | |
| left: 25%; | |
| right: auto; | |
| } | |
| [data-o-grid-colspan~="Ppull3"] { | |
| right: 25%; | |
| left: auto; | |
| } | |
| [data-o-grid-colspan~="Poffset3"] { | |
| margin-left: 25%; | |
| } | |
| [data-o-grid-colspan~="Ppush4"] { | |
| left: 33.33333%; | |
| right: auto; | |
| } | |
| [data-o-grid-colspan~="Ppull4"] { | |
| right: 33.33333%; | |
| left: auto; | |
| } | |
| [data-o-grid-colspan~="Poffset4"] { | |
| margin-left: 33.33333%; | |
| } | |
| [data-o-grid-colspan~="Ppush5"] { | |
| left: 41.66667%; | |
| right: auto; | |
| } | |
| [data-o-grid-colspan~="Ppull5"] { | |
| right: 41.66667%; | |
| left: auto; | |
| } | |
| [data-o-grid-colspan~="Poffset5"] { | |
| margin-left: 41.66667%; | |
| } | |
| [data-o-grid-colspan~="Ppush6"] { | |
| left: 50%; | |
| right: auto; | |
| } | |
| [data-o-grid-colspan~="Ppull6"] { | |
| right: 50%; | |
| left: auto; | |
| } | |
| [data-o-grid-colspan~="Poffset6"] { | |
| margin-left: 50%; | |
| } | |
| [data-o-grid-colspan~="Ppush7"] { | |
| left: 58.33333%; | |
| right: auto; | |
| } | |
| [data-o-grid-colspan~="Ppull7"] { | |
| right: 58.33333%; | |
| left: auto; | |
| } | |
| [data-o-grid-colspan~="Poffset7"] { | |
| margin-left: 58.33333%; | |
| } | |
| [data-o-grid-colspan~="Ppush8"] { | |
| left: 66.66667%; | |
| right: auto; | |
| } | |
| [data-o-grid-colspan~="Ppull8"] { | |
| right: 66.66667%; | |
| left: auto; | |
| } | |
| [data-o-grid-colspan~="Poffset8"] { | |
| margin-left: 66.66667%; | |
| } | |
| [data-o-grid-colspan~="Ppush9"] { | |
| left: 75%; | |
| right: auto; | |
| } | |
| [data-o-grid-colspan~="Ppull9"] { | |
| right: 75%; | |
| left: auto; | |
| } | |
| [data-o-grid-colspan~="Poffset9"] { | |
| margin-left: 75%; | |
| } | |
| [data-o-grid-colspan~="Ppush10"] { | |
| left: 83.33333%; | |
| right: auto; | |
| } | |
| [data-o-grid-colspan~="Ppull10"] { | |
| right: 83.33333%; | |
| left: auto; | |
| } | |
| [data-o-grid-colspan~="Poffset10"] { | |
| margin-left: 83.33333%; | |
| } | |
| [data-o-grid-colspan~="Ppush11"] { | |
| left: 91.66667%; | |
| right: auto; | |
| } | |
| [data-o-grid-colspan~="Ppull11"] { | |
| right: 91.66667%; | |
| left: auto; | |
| } | |
| [data-o-grid-colspan~="Poffset11"] { | |
| margin-left: 91.66667%; | |
| } | |
| [data-o-grid-colspan~="P1"] { | |
| display: block; | |
| flex-basis: 8.33333%; | |
| min-width: 8.33333%; | |
| max-width: 8.33333%; | |
| width: 8.33333%; | |
| } | |
| [data-o-grid-colspan~="P2"] { | |
| display: block; | |
| flex-basis: 16.66667%; | |
| min-width: 16.66667%; | |
| max-width: 16.66667%; | |
| width: 16.66667%; | |
| } | |
| [data-o-grid-colspan~="P3"] { | |
| display: block; | |
| flex-basis: 25%; | |
| min-width: 25%; | |
| max-width: 25%; | |
| width: 25%; | |
| } | |
| [data-o-grid-colspan~="P4"] { | |
| display: block; | |
| flex-basis: 33.33333%; | |
| min-width: 33.33333%; | |
| max-width: 33.33333%; | |
| width: 33.33333%; | |
| } | |
| [data-o-grid-colspan~="P5"] { | |
| display: block; | |
| flex-basis: 41.66667%; | |
| min-width: 41.66667%; | |
| max-width: 41.66667%; | |
| width: 41.66667%; | |
| } | |
| [data-o-grid-colspan~="P6"] { | |
| display: block; | |
| flex-basis: 50%; | |
| min-width: 50%; | |
| max-width: 50%; | |
| width: 50%; | |
| } | |
| [data-o-grid-colspan~="P7"] { | |
| display: block; | |
| flex-basis: 58.33333%; | |
| min-width: 58.33333%; | |
| max-width: 58.33333%; | |
| width: 58.33333%; | |
| } | |
| [data-o-grid-colspan~="P8"] { | |
| display: block; | |
| flex-basis: 66.66667%; | |
| min-width: 66.66667%; | |
| max-width: 66.66667%; | |
| width: 66.66667%; | |
| } | |
| [data-o-grid-colspan~="P9"] { | |
| display: block; | |
| flex-basis: 75%; | |
| min-width: 75%; | |
| max-width: 75%; | |
| width: 75%; | |
| } | |
| [data-o-grid-colspan~="P10"] { | |
| display: block; | |
| flex-basis: 83.33333%; | |
| min-width: 83.33333%; | |
| max-width: 83.33333%; | |
| width: 83.33333%; | |
| } | |
| [data-o-grid-colspan~="P11"] { | |
| display: block; | |
| flex-basis: 91.66667%; | |
| min-width: 91.66667%; | |
| max-width: 91.66667%; | |
| width: 91.66667%; | |
| } | |
| [data-o-grid-colspan~="P12"] { | |
| display: block; | |
| flex-basis: 100%; | |
| min-width: 100%; | |
| max-width: 100%; | |
| width: 100%; | |
| } | |
| } | |
| @media (min-width: 46.25em) { | |
| [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~="Mfull-width"] { | |
| display: block; | |
| flex-basis: 100%; | |
| min-width: 100%; | |
| max-width: 100%; | |
| width: 100%; | |
| } | |
| [data-o-grid-colspan~="Mone-half"] { | |
| display: block; | |
| flex-basis: 50%; | |
| min-width: 50%; | |
| max-width: 50%; | |
| width: 50%; | |
| } | |
| [data-o-grid-colspan~="Mone-third"] { | |
| display: block; | |
| flex-basis: 33.33333%; | |
| min-width: 33.33333%; | |
| max-width: 33.33333%; | |
| width: 33.33333%; | |
| } | |
| [data-o-grid-colspan~="Mtwo-thirds"] { | |
| display: block; | |
| flex-basis: 66.66667%; | |
| min-width: 66.66667%; | |
| max-width: 66.66667%; | |
| width: 66.66667%; | |
| } | |
| [data-o-grid-colspan~="Mone-quarter"] { | |
| display: block; | |
| flex-basis: 25%; | |
| min-width: 25%; | |
| max-width: 25%; | |
| width: 25%; | |
| } | |
| [data-o-grid-colspan~="Mthree-quarters"] { | |
| display: block; | |
| flex-basis: 75%; | |
| min-width: 75%; | |
| max-width: 75%; | |
| width: 75%; | |
| } | |
| [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~="M1"] { | |
| display: block; | |
| flex-basis: 8.33333%; | |
| min-width: 8.33333%; | |
| max-width: 8.33333%; | |
| width: 8.33333%; | |
| } | |
| [data-o-grid-colspan~="M2"] { | |
| display: block; | |
| flex-basis: 16.66667%; | |
| min-width: 16.66667%; | |
| max-width: 16.66667%; | |
| width: 16.66667%; | |
| } | |
| [data-o-grid-colspan~="M3"] { | |
| display: block; | |
| flex-basis: 25%; | |
| min-width: 25%; | |
| max-width: 25%; | |
| width: 25%; | |
| } | |
| [data-o-grid-colspan~="M4"] { | |
| display: block; | |
| flex-basis: 33.33333%; | |
| min-width: 33.33333%; | |
| max-width: 33.33333%; | |
| width: 33.33333%; | |
| } | |
| [data-o-grid-colspan~="M5"] { | |
| display: block; | |
| flex-basis: 41.66667%; | |
| min-width: 41.66667%; | |
| max-width: 41.66667%; | |
| width: 41.66667%; | |
| } | |
| [data-o-grid-colspan~="M6"] { | |
| display: block; | |
| flex-basis: 50%; | |
| min-width: 50%; | |
| max-width: 50%; | |
| width: 50%; | |
| } | |
| [data-o-grid-colspan~="M7"] { | |
| display: block; | |
| flex-basis: 58.33333%; | |
| min-width: 58.33333%; | |
| max-width: 58.33333%; | |
| width: 58.33333%; | |
| } | |
| [data-o-grid-colspan~="M8"] { | |
| display: block; | |
| flex-basis: 66.66667%; | |
| min-width: 66.66667%; | |
| max-width: 66.66667%; | |
| width: 66.66667%; | |
| } | |
| [data-o-grid-colspan~="M9"] { | |
| display: block; | |
| flex-basis: 75%; | |
| min-width: 75%; | |
| max-width: 75%; | |
| width: 75%; | |
| } | |
| [data-o-grid-colspan~="M10"] { | |
| display: block; | |
| flex-basis: 83.33333%; | |
| min-width: 83.33333%; | |
| max-width: 83.33333%; | |
| width: 83.33333%; | |
| } | |
| [data-o-grid-colspan~="M11"] { | |
| display: block; | |
| flex-basis: 91.66667%; | |
| min-width: 91.66667%; | |
| max-width: 91.66667%; | |
| width: 91.66667%; | |
| } | |
| [data-o-grid-colspan~="M12"] { | |
| display: block; | |
| flex-basis: 100%; | |
| min-width: 100%; | |
| max-width: 100%; | |
| width: 100%; | |
| } | |
| } | |
| @media (min-width: 61.25em) { | |
| [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~="Lfull-width"] { | |
| display: block; | |
| flex-basis: 100%; | |
| min-width: 100%; | |
| max-width: 100%; | |
| width: 100%; | |
| } | |
| [data-o-grid-colspan~="Lone-half"] { | |
| display: block; | |
| flex-basis: 50%; | |
| min-width: 50%; | |
| max-width: 50%; | |
| width: 50%; | |
| } | |
| [data-o-grid-colspan~="Lone-third"] { | |
| display: block; | |
| flex-basis: 33.33333%; | |
| min-width: 33.33333%; | |
| max-width: 33.33333%; | |
| width: 33.33333%; | |
| } | |
| [data-o-grid-colspan~="Ltwo-thirds"] { | |
| display: block; | |
| flex-basis: 66.66667%; | |
| min-width: 66.66667%; | |
| max-width: 66.66667%; | |
| width: 66.66667%; | |
| } | |
| [data-o-grid-colspan~="Lone-quarter"] { | |
| display: block; | |
| flex-basis: 25%; | |
| min-width: 25%; | |
| max-width: 25%; | |
| width: 25%; | |
| } | |
| [data-o-grid-colspan~="Lthree-quarters"] { | |
| display: block; | |
| flex-basis: 75%; | |
| min-width: 75%; | |
| max-width: 75%; | |
| width: 75%; | |
| } | |
| [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~="L1"] { | |
| display: block; | |
| flex-basis: 8.33333%; | |
| min-width: 8.33333%; | |
| max-width: 8.33333%; | |
| width: 8.33333%; | |
| } | |
| [data-o-grid-colspan~="L2"] { | |
| display: block; | |
| flex-basis: 16.66667%; | |
| min-width: 16.66667%; | |
| max-width: 16.66667%; | |
| width: 16.66667%; | |
| } | |
| [data-o-grid-colspan~="L3"] { | |
| display: block; | |
| flex-basis: 25%; | |
| min-width: 25%; | |
| max-width: 25%; | |
| width: 25%; | |
| } | |
| [data-o-grid-colspan~="L4"] { | |
| display: block; | |
| flex-basis: 33.33333%; | |
| min-width: 33.33333%; | |
| max-width: 33.33333%; | |
| width: 33.33333%; | |
| } | |
| [data-o-grid-colspan~="L5"] { | |
| display: block; | |
| flex-basis: 41.66667%; | |
| min-width: 41.66667%; | |
| max-width: 41.66667%; | |
| width: 41.66667%; | |
| } | |
| [data-o-grid-colspan~="L6"] { | |
| display: block; | |
| flex-basis: 50%; | |
| min-width: 50%; | |
| max-width: 50%; | |
| width: 50%; | |
| } | |
| [data-o-grid-colspan~="L7"] { | |
| display: block; | |
| flex-basis: 58.33333%; | |
| min-width: 58.33333%; | |
| max-width: 58.33333%; | |
| width: 58.33333%; | |
| } | |
| [data-o-grid-colspan~="L8"] { | |
| display: block; | |
| flex-basis: 66.66667%; | |
| min-width: 66.66667%; | |
| max-width: 66.66667%; | |
| width: 66.66667%; | |
| } | |
| [data-o-grid-colspan~="L9"] { | |
| display: block; | |
| flex-basis: 75%; | |
| min-width: 75%; | |
| max-width: 75%; | |
| width: 75%; | |
| } | |
| [data-o-grid-colspan~="L10"] { | |
| display: block; | |
| flex-basis: 83.33333%; | |
| min-width: 83.33333%; | |
| max-width: 83.33333%; | |
| width: 83.33333%; | |
| } | |
| [data-o-grid-colspan~="L11"] { | |
| display: block; | |
| flex-basis: 91.66667%; | |
| min-width: 91.66667%; | |
| max-width: 91.66667%; | |
| width: 91.66667%; | |
| } | |
| [data-o-grid-colspan~="L12"] { | |
| display: block; | |
| flex-basis: 100%; | |
| min-width: 100%; | |
| max-width: 100%; | |
| width: 100%; | |
| } | |
| } | |
| @media (min-width: 76.25em) { | |
| [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~="XLfull-width"] { | |
| display: block; | |
| flex-basis: 100%; | |
| min-width: 100%; | |
| max-width: 100%; | |
| width: 100%; | |
| } | |
| [data-o-grid-colspan~="XLone-half"] { | |
| display: block; | |
| flex-basis: 50%; | |
| min-width: 50%; | |
| max-width: 50%; | |
| width: 50%; | |
| } | |
| [data-o-grid-colspan~="XLone-third"] { | |
| display: block; | |
| flex-basis: 33.33333%; | |
| min-width: 33.33333%; | |
| max-width: 33.33333%; | |
| width: 33.33333%; | |
| } | |
| [data-o-grid-colspan~="XLtwo-thirds"] { | |
| display: block; | |
| flex-basis: 66.66667%; | |
| min-width: 66.66667%; | |
| max-width: 66.66667%; | |
| width: 66.66667%; | |
| } | |
| [data-o-grid-colspan~="XLone-quarter"] { | |
| display: block; | |
| flex-basis: 25%; | |
| min-width: 25%; | |
| max-width: 25%; | |
| width: 25%; | |
| } | |
| [data-o-grid-colspan~="XLthree-quarters"] { | |
| display: block; | |
| flex-basis: 75%; | |
| min-width: 75%; | |
| max-width: 75%; | |
| width: 75%; | |
| } | |
| [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~="XL1"] { | |
| display: block; | |
| flex-basis: 8.33333%; | |
| min-width: 8.33333%; | |
| max-width: 8.33333%; | |
| width: 8.33333%; | |
| } | |
| [data-o-grid-colspan~="XL2"] { | |
| display: block; | |
| flex-basis: 16.66667%; | |
| min-width: 16.66667%; | |
| max-width: 16.66667%; | |
| width: 16.66667%; | |
| } | |
| [data-o-grid-colspan~="XL3"] { | |
| display: block; | |
| flex-basis: 25%; | |
| min-width: 25%; | |
| max-width: 25%; | |
| width: 25%; | |
| } | |
| [data-o-grid-colspan~="XL4"] { | |
| display: block; | |
| flex-basis: 33.33333%; | |
| min-width: 33.33333%; | |
| max-width: 33.33333%; | |
| width: 33.33333%; | |
| } | |
| [data-o-grid-colspan~="XL5"] { | |
| display: block; | |
| flex-basis: 41.66667%; | |
| min-width: 41.66667%; | |
| max-width: 41.66667%; | |
| width: 41.66667%; | |
| } | |
| [data-o-grid-colspan~="XL6"] { | |
| display: block; | |
| flex-basis: 50%; | |
| min-width: 50%; | |
| max-width: 50%; | |
| width: 50%; | |
| } | |
| [data-o-grid-colspan~="XL7"] { | |
| display: block; | |
| flex-basis: 58.33333%; | |
| min-width: 58.33333%; | |
| max-width: 58.33333%; | |
| width: 58.33333%; | |
| } | |
| [data-o-grid-colspan~="XL8"] { | |
| display: block; | |
| flex-basis: 66.66667%; | |
| min-width: 66.66667%; | |
| max-width: 66.66667%; | |
| width: 66.66667%; | |
| } | |
| [data-o-grid-colspan~="XL9"] { | |
| display: block; | |
| flex-basis: 75%; | |
| min-width: 75%; | |
| max-width: 75%; | |
| width: 75%; | |
| } | |
| [data-o-grid-colspan~="XL10"] { | |
| display: block; | |
| flex-basis: 83.33333%; | |
| min-width: 83.33333%; | |
| max-width: 83.33333%; | |
| width: 83.33333%; | |
| } | |
| [data-o-grid-colspan~="XL11"] { | |
| display: block; | |
| flex-basis: 91.66667%; | |
| min-width: 91.66667%; | |
| max-width: 91.66667%; | |
| width: 91.66667%; | |
| } | |
| [data-o-grid-colspan~="XL12"] { | |
| display: block; | |
| flex-basis: 100%; | |
| min-width: 100%; | |
| max-width: 100%; | |
| width: 100%; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment