diff --git a/README.md b/README.md index a7fdcfa..7c33647 100644 --- a/README.md +++ b/README.md @@ -169,7 +169,8 @@ useful when we inspect the elements. .fooColumn { left: 8.33333%; right: 8.33333%; - padding: 0 0.9375rem; + padding-left: calc(1.875rem / 2); + padding-right: calc(1.875rem / 2); order: 0; content: "COLUMN: width : (xxsmall: 6, large: 6) | push : 1 | pull : 1 | order : 0 | global : true"; @@ -539,7 +540,8 @@ will generate: ```css .foo { box-sizing: border-box; - padding: 0 0.9375rem; + padding-left: calc(1.875rem / 2); + padding-right: calc(1.875rem / 2); display: flex; flex-direction: column; position: relative; @@ -547,7 +549,8 @@ will generate: position: relative; left: auto; right: 8.33333%; - padding: 0 0.9375rem; + padding-left: calc(1.875rem / 2); + padding-right: calc(1.875rem / 2); order: 0; } @media only screen and (min-width: 0em) { @@ -580,7 +583,8 @@ will return: ```css .foo { box-sizing: border-box; - padding: 0 0.9375rem; + padding-left: calc(1.875rem / 2); + padding-right: calc(1.875rem / 2); display: flex; flex-direction: column; width: 8.33333%; @@ -601,7 +605,8 @@ will return: ```css .foo { box-sizing: border-box; - padding: 0 0.9375rem; + padding-left: calc(1.875rem / 2); + padding-right: calc(1.875rem / 2); display: flex; flex-direction: column; width: 33.33333%; @@ -623,7 +628,8 @@ will generate: ```css .foo { box-sizing: border-box; - padding: 0 0.9375rem; + padding-left: calc(1.875rem / 2); + padding-right: calc(1.875rem / 2); display: flex; flex-direction: column; } @@ -682,7 +688,8 @@ will compile in: ```css .foo { box-sizing: border-box; - padding: 0 0.9375rem; + padding-left: calc(1.875rem / 2); + padding-right: calc(1.875rem / 2); display: flex; flex-direction: column; width: auto; @@ -691,7 +698,8 @@ will compile in: .bar { box-sizing: border-box; - padding: 0 0.9375rem; + padding-left: calc(1.875rem / 2); + padding-right: calc(1.875rem / 2); display: flex; flex-direction: column; width: auto; @@ -715,7 +723,8 @@ will compile in:
### `$collapse` and `$global` **$collapse** and **$global** are very simple. The first one if `false` will -generate the padding of our columns `padding: 0 0.9375rem;`, the second one +generate the padding of our columns `padding-left: calc(1.875rem / 2);`, the second one +generate the padding of our columns `padding-right: calc(1.875rem / 2);`, the second one will generate this css: ```css box-sizing: border-box; @@ -957,7 +966,8 @@ will generate this css: ```css .foo { box-sizing: border-box; - padding: 0 0.9375rem; + padding-left: calc(1.875rem / 2); + padding-right: calc(1.875rem / 2); display: flex; flex-direction: column; } @@ -970,7 +980,8 @@ will generate this css: .bar { box-sizing: border-box; - padding: 0 0.9375rem; + padding-left: calc(1.875rem / 2); + padding-right: calc(1.875rem / 2); display: flex; flex-direction: column; } @@ -1004,7 +1015,8 @@ will generate this css: ```css *.foo, *.bar { box-sizing: border-box; - padding: 0 0.9375rem; + padding-left: calc(1.875rem / 2); + padding-right: calc(1.875rem / 2); display: flex; flex-direction: column; } diff --git a/dist/helpers/_grid.scss b/dist/helpers/_grid.scss index 5145e3d..8e55e62 100644 --- a/dist/helpers/_grid.scss +++ b/dist/helpers/_grid.scss @@ -14,7 +14,7 @@ } @if $margin == 'margin-#{$grid-start}' { - @return calc(#{($dividend / $divisor * 100%)} + #{$column-gutter / 2}); + @return calc(#{($dividend / $divisor * 100%)} + (#{$column-gutter} / 2)); } @return $dividend / $divisor * 100%; @@ -27,17 +27,20 @@ // If the property is the width, it will add the relative flex properties to // the returned block. // ----------------------------------------------------------------------------- -@mixin grid-calc($property, $attr, $margin: false, $query: false) { +@mixin grid-calc($property, $attr, $margin: false, $query: false, $loop: 0) { // Width property needs flex attributes @if $property == width { - @if $attr == auto { - flex: 1 1 0%; + $prev: if($loop > 1, nth(map-values($query), $loop - 1), null); - } @else { - flex: 0 0 auto; - } + @if type-of($prev) != type-of($attr){ + @if $attr == auto { + flex: 1 1 0%; + } @else { + flex: 0 0 auto; + } + } @if $attr == 0 { $attr: auto; } @@ -48,13 +51,8 @@ // (N of X) syntax @if length($attr) == 3 and nth($attr, 2) == 'of' { - @if $query and $use-dry { - @error "You can't use n of N syntax with query parameter. Use mediaquery mixin instead!"; - - } @else { - @include responsive-gutter { - #{$property}: sg-dimension(nth($attr, 1), nth($attr, 3), $margin); - } + @include responsive-gutter { + #{$property}: sg-dimension(nth($attr, 1), nth($attr, 3), $margin); } // Standard syntax @@ -85,20 +83,22 @@ } @else { + $counter: 0; @each $query, $value in $attr { $set: #{$query}#{$value}#{$eq-grid}-#{$margin}; + $counter: $counter + 1; @if $inmedia != false{ - @include dry-it('#{$property}-#{$set}') { - @include grid-calc($property, $value, $margin); + @include dry-it('#{$property}-#{$set}-#{$attr}-#{$counter}') { + @include grid-calc($property, $value, $margin, $attr, $counter); } } @else { @include media-query($query, $eq-grid: $eq-grid) { - @include dry-it('#{$property}-#{$set}-#{$margin}') { - @include grid-calc($property, $value, $margin); + @include dry-it('#{$property}-#{$set}-#{$margin}-#{$attr}-#{$counter}') { + @include grid-calc($property, $value, $margin, $attr, $counter); } } @@ -123,9 +123,7 @@ } @include dry-it('row#{$nested}') { - @if $sg-include-box-sizing { - box-sizing: border-box; - } + box-sizing: border-box; @if $grid-start != left and $use-flex { flex-direction: row-reverse; @@ -134,8 +132,8 @@ @if $nested { @if not $sg-collapse { @include responsive-gutter { - margin-left: (-$column-gutter / 2); - margin-right: (-$column-gutter / 2); + margin-left: calc(-#{$column-gutter} / 2); + margin-right: calc(-#{$column-gutter} / 2); width: calc(100% + #{$column-gutter}); } } @else { @@ -210,9 +208,7 @@ // Global ------------- @if $global { @include dry-it('colGlob') { - @if $sg-include-box-sizing { - box-sizing: border-box; - } + box-sizing: border-box; @if $use-table { display: table-cell; @@ -249,8 +245,8 @@ @if $global == true { @include dry-it('paddingGlob') { @include responsive-gutter { - padding-left: ($column-gutter / 2); - padding-right: ($column-gutter / 2); + padding-left: calc(#{$column-gutter} / 2); + padding-right: calc(#{$column-gutter} / 2); } } } @@ -267,8 +263,8 @@ @if $margin { @include dry-it('marginGlob') { @include responsive-gutter{ - margin-left: ($column-gutter / 2); - margin-right: ($column-gutter / 2); + margin-left: calc(#{$column-gutter} / 2); + margin-right: calc(#{$column-gutter} / 2); } } } @@ -285,20 +281,16 @@ // Push ------------- @if $push != null { - @include dry-it('colPush') { - position: relative; - #{$grid-end}: auto; - } + position: relative; + #{$grid-end}: auto; @include grid-space($grid-start, $push, $eq-grid); } // Pull ------------- @if $pull != null { - @include dry-it('colPull') { - position: relative; - #{$grid-start}: auto; - } + position: relative; + #{$grid-start}: auto; @include grid-space($grid-end, $pull, $eq-grid); } diff --git a/dist/helpers/_mediaquery.scss b/dist/helpers/_mediaquery.scss index 4435241..d7a1e5c 100644 --- a/dist/helpers/_mediaquery.scss +++ b/dist/helpers/_mediaquery.scss @@ -22,6 +22,13 @@ @if not variable-exists(min-unit) { $unit: unit(nth(map-values($breakpoints), 1)); + @each $breakpoint in map-values($breakpoints) { + @if $unit != unit($breakpoint) { + @warn 'All breakpoints must have the same unit!'; + $unit: unit($breakpoint); + } + } + $min-unit: em-calc(1, $rem-base) !global; @if $unit == "rem" { @@ -128,7 +135,11 @@ $query-end: nth($query-direction, 2); @content; } } @else { - @media #{$screen} and (#{$query-start}: #{$cur-bp}) { + @if index(map-keys($breakpoints), $query) != 1 { + @media #{$screen} and (#{$query-start}: #{$cur-bp}) { + @content; + } + } @else { @content; } } diff --git a/dist/helpers/_static.scss b/dist/helpers/_static.scss index 9851b13..8005f31 100644 --- a/dist/helpers/_static.scss +++ b/dist/helpers/_static.scss @@ -187,7 +187,7 @@ $type: if($use-classes, '.', '%'); #{$type}#{$row-name}, &#{grid-class-name(nested)} { - margin: 0 (-$column-gutter / 2); + margin: 0 calc(-#{$column-gutter} / 2); width: auto; } diff --git a/dist/helpers/_variables.scss b/dist/helpers/_variables.scss index 086a226..63f8f69 100644 --- a/dist/helpers/_variables.scss +++ b/dist/helpers/_variables.scss @@ -32,7 +32,6 @@ $grid-start: left !default; $grid-end: if($grid-start == left, right, left) !default; $sg-collapse: false !default; $sg-use-margin: false !default; -$sg-include-box-sizing: true !default; // ----------------------------------------------------------------------------- // Class-based output options diff --git a/dist/supergigi.css b/dist/supergigi.css index 27ecc8f..593d86d 100644 --- a/dist/supergigi.css +++ b/dist/supergigi.css @@ -1,103 +1,4 @@ -.row { - box-sizing: border-box; - margin-left: auto; - margin-right: auto; - max-width: 120rem; - width: 100%; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; } - -.row.top { - -webkit-box-align: start; - -ms-flex-align: start; - align-items: flex-start; } - -.row.middle { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; } - -.row.bottom { - -webkit-box-align: end; - -ms-flex-align: end; - align-items: flex-end; } - -.row.baseline { - -webkit-box-align: baseline; - -ms-flex-align: baseline; - align-items: baseline; } - -.row.stretch { - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; } - -.row.start { - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; } - -.row.center { - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; } - -.row.end { - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; } - -.row.around { - -ms-flex-pack: distribute; - justify-content: space-around; } - -.row.between { - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; } - -.row.horizontal { - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; } - -.row.horizontal-reverse { - -webkit-box-orient: horizontal; - -webkit-box-direction: reverse; - -ms-flex-direction: row-reverse; - flex-direction: row-reverse; } - -.row.vertical { - -webkit-box-flex: 1; - -ms-flex: 1; - flex: 1; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; } - -.row.vertical-reverse { - -webkit-box-flex: 1; - -ms-flex: 1; - flex: 1; - -webkit-box-orient: vertical; - -webkit-box-direction: reverse; - -ms-flex-direction: column-reverse; - flex-direction: column-reverse; } - -.row.single-line { - -ms-flex-flow: nowrap; - flex-flow: nowrap; } - -.row .row, .row.nested { - margin: 0 -0.9375rem; - width: auto; } - -.column { +.pippo { box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; @@ -105,2907 +6,12 @@ -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; - flex-direction: column; } - -.column { - padding-left: 0.9375rem; - padding-right: 0.9375rem; } - -.column.collapse { - padding-left: 0; - padding-right: 0; } - -.column.top { - -ms-flex-item-align: start; - align-self: flex-start; } - -.column.middle { - -ms-flex-item-align: center; - align-self: center; } - -.column.bottom { - -ms-flex-item-align: end; - align-self: flex-end; } - -.column.baseline { - -ms-flex-item-align: baseline; - align-self: baseline; } - -.column.stretch { - -ms-flex-item-align: stretch; - align-self: stretch; } - -.column.auto { - -webkit-box-flex: 1; - -ms-flex: 1 1 0%; - flex: 1 1 0%; - width: auto; } - -.column.auto-reset { + flex-direction: column; + padding-left: calc(1.875rem / 2); + padding-right: calc(1.875rem / 2); -webkit-box-flex: 0; -ms-flex: 0 0 auto; - flex: 0 0 auto; } - -.column.auto { - -webkit-box-flex: 1; - -ms-flex: 1 1 0%; - flex: 1 1 0%; - width: auto; } - -.show-from-xxsmall-up { - display: none !important; } - -.hide-from-xxsmall-up { - display: inherit !important; } - -.show-for-xxsmall-only, .show-for-xsmall-only, .show-for-small-only, .show-for-medium-only, .show-for-large-only, .show-for-xlarge-only, .show-for-xxlarge-only { - display: none !important; } - -.hide-for-xxsmall-only, .hide-for-xsmall-only, .hide-for-small-only, .hide-for-medium-only, .hide-for-large-only, .hide-for-xlarge-only, .hide-for-xxlarge-only { - display: inherit !important; } - -.show-from-xsmall-up { - display: none !important; } - -.hide-from-xsmall-up { - display: inherit !important; } - -.show-from-small-up { - display: none !important; } - -.hide-from-small-up { - display: inherit !important; } - -.show-from-medium-up { - display: none !important; } - -.hide-from-medium-up { - display: inherit !important; } - -.show-from-large-up { - display: none !important; } - -.hide-from-large-up { - display: inherit !important; } - -.show-from-xlarge-up { - display: none !important; } - -.hide-from-xlarge-up { - display: inherit !important; } - -.show-from-xxlarge-up { - display: none !important; } - -.hide-from-xxlarge-up { - display: inherit !important; } - -@media only screen and (min-width: 0em) and (max-width: 29.9375em) { - - .show-for-xxsmall-only { - display: inherit !important; } - - .hide-for-xxsmall-only { - display: none !important; } } - -@media only screen and (min-width: 0em) { - - .row.xxsmall-top { - -webkit-box-align: start; - -ms-flex-align: start; - align-items: flex-start; } - - .row.xxsmall-middle { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; } - - .row.xxsmall-bottom { - -webkit-box-align: end; - -ms-flex-align: end; - align-items: flex-end; } - - .row.xxsmall-baseline { - -webkit-box-align: baseline; - -ms-flex-align: baseline; - align-items: baseline; } - - .row.xxsmall-stretch { - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; } - - .row.xxsmall-start { - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; } - - .row.xxsmall-center { - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; } - - .row.xxsmall-end { - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; } - - .row.xxsmall-around { - -ms-flex-pack: distribute; - justify-content: space-around; } - - .row.xxsmall-between { - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; } - - .row.xxsmall-horizontal { - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; } - - .row.xxsmall-horizontal-reverse { - -webkit-box-orient: horizontal; - -webkit-box-direction: reverse; - -ms-flex-direction: row-reverse; - flex-direction: row-reverse; } - - .row.xxsmall-vertical { - -webkit-box-flex: 1; - -ms-flex: 1; - flex: 1; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; } - - .row.xxsmall-vertical-reverse { - -webkit-box-flex: 1; - -ms-flex: 1; - flex: 1; - -webkit-box-orient: vertical; - -webkit-box-direction: reverse; - -ms-flex-direction: column-reverse; - flex-direction: column-reverse; } - - .row.xxsmall-single-line { - -ms-flex-flow: nowrap; - flex-flow: nowrap; } - - .column.xxsmall-collapse { - padding-left: 0; - padding-right: 0; } - - .column.xxsmall-top { - -ms-flex-item-align: start; - align-self: flex-start; } - - .column.xxsmall-middle { - -ms-flex-item-align: center; - align-self: center; } - - .column.xxsmall-bottom { - -ms-flex-item-align: end; - align-self: flex-end; } - - .column.xxsmall-baseline { - -ms-flex-item-align: baseline; - align-self: baseline; } - - .column.xxsmall-stretch { - -ms-flex-item-align: stretch; - align-self: stretch; } - - .column.xxsmall-auto { - -webkit-box-flex: 1; - -ms-flex: 1 1 0%; - flex: 1 1 0%; - width: auto; } - - .column.xxsmall-auto-reset { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; } - - .column.xxsmall-auto { - -webkit-box-flex: 1; - -ms-flex: 1 1 0%; - flex: 1 1 0%; - width: auto; } - - .column.xxsmall-0 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: auto; } - - .column.xxsmall-offset-0 { - margin-left: 0%; } - - .column.xxsmall-push-0, .column.xxsmall-push-1, .column.xxsmall-push-2, .column.xxsmall-push-3, .column.xxsmall-push-4, .column.xxsmall-push-5, .column.xxsmall-push-6, .column.xxsmall-push-7, .column.xxsmall-push-8, .column.xxsmall-push-9, .column.xxsmall-push-10, .column.xxsmall-push-11, .column.xxsmall-push-12, .column.xsmall-push-0, .column.xsmall-push-1, .column.xsmall-push-2, .column.xsmall-push-3, .column.xsmall-push-4, .column.xsmall-push-5, .column.xsmall-push-6, .column.xsmall-push-7, .column.xsmall-push-8, .column.xsmall-push-9, .column.xsmall-push-10, .column.xsmall-push-11, .column.xsmall-push-12, .column.small-push-0, .column.small-push-1, .column.small-push-2, .column.small-push-3, .column.small-push-4, .column.small-push-5, .column.small-push-6, .column.small-push-7, .column.small-push-8, .column.small-push-9, .column.small-push-10, .column.small-push-11, .column.small-push-12, .column.medium-push-0, .column.medium-push-1, .column.medium-push-2, .column.medium-push-3, .column.medium-push-4, .column.medium-push-5, .column.medium-push-6, .column.medium-push-7, .column.medium-push-8, .column.medium-push-9, .column.medium-push-10, .column.medium-push-11, .column.medium-push-12, .column.large-push-0, .column.large-push-1, .column.large-push-2, .column.large-push-3, .column.large-push-4, .column.large-push-5, .column.large-push-6, .column.large-push-7, .column.large-push-8, .column.large-push-9, .column.large-push-10, .column.large-push-11, .column.large-push-12, .column.xlarge-push-0, .column.xlarge-push-1, .column.xlarge-push-2, .column.xlarge-push-3, .column.xlarge-push-4, .column.xlarge-push-5, .column.xlarge-push-6, .column.xlarge-push-7, .column.xlarge-push-8, .column.xlarge-push-9, .column.xlarge-push-10, .column.xlarge-push-11, .column.xlarge-push-12, .column.xxlarge-push-0, .column.xxlarge-push-1, .column.xxlarge-push-2, .column.xxlarge-push-3, .column.xxlarge-push-4, .column.xxlarge-push-5, .column.xxlarge-push-6, .column.xxlarge-push-7, .column.xxlarge-push-8, .column.xxlarge-push-9, .column.xxlarge-push-10, .column.xxlarge-push-11, .column.xxlarge-push-12 { - position: relative; - right: auto; } - - .column.xxsmall-push-0 { - left: 0%; } - - .column.xxsmall-pull-0, .column.xxsmall-pull-1, .column.xxsmall-pull-2, .column.xxsmall-pull-3, .column.xxsmall-pull-4, .column.xxsmall-pull-5, .column.xxsmall-pull-6, .column.xxsmall-pull-7, .column.xxsmall-pull-8, .column.xxsmall-pull-9, .column.xxsmall-pull-10, .column.xxsmall-pull-11, .column.xxsmall-pull-12, .column.xsmall-pull-0, .column.xsmall-pull-1, .column.xsmall-pull-2, .column.xsmall-pull-3, .column.xsmall-pull-4, .column.xsmall-pull-5, .column.xsmall-pull-6, .column.xsmall-pull-7, .column.xsmall-pull-8, .column.xsmall-pull-9, .column.xsmall-pull-10, .column.xsmall-pull-11, .column.xsmall-pull-12, .column.small-pull-0, .column.small-pull-1, .column.small-pull-2, .column.small-pull-3, .column.small-pull-4, .column.small-pull-5, .column.small-pull-6, .column.small-pull-7, .column.small-pull-8, .column.small-pull-9, .column.small-pull-10, .column.small-pull-11, .column.small-pull-12, .column.medium-pull-0, .column.medium-pull-1, .column.medium-pull-2, .column.medium-pull-3, .column.medium-pull-4, .column.medium-pull-5, .column.medium-pull-6, .column.medium-pull-7, .column.medium-pull-8, .column.medium-pull-9, .column.medium-pull-10, .column.medium-pull-11, .column.medium-pull-12, .column.large-pull-0, .column.large-pull-1, .column.large-pull-2, .column.large-pull-3, .column.large-pull-4, .column.large-pull-5, .column.large-pull-6, .column.large-pull-7, .column.large-pull-8, .column.large-pull-9, .column.large-pull-10, .column.large-pull-11, .column.large-pull-12, .column.xlarge-pull-0, .column.xlarge-pull-1, .column.xlarge-pull-2, .column.xlarge-pull-3, .column.xlarge-pull-4, .column.xlarge-pull-5, .column.xlarge-pull-6, .column.xlarge-pull-7, .column.xlarge-pull-8, .column.xlarge-pull-9, .column.xlarge-pull-10, .column.xlarge-pull-11, .column.xlarge-pull-12, .column.xxlarge-pull-0, .column.xxlarge-pull-1, .column.xxlarge-pull-2, .column.xxlarge-pull-3, .column.xxlarge-pull-4, .column.xxlarge-pull-5, .column.xxlarge-pull-6, .column.xxlarge-pull-7, .column.xxlarge-pull-8, .column.xxlarge-pull-9, .column.xxlarge-pull-10, .column.xxlarge-pull-11, .column.xxlarge-pull-12 { - position: relative; - left: auto; } - - .column.xxsmall-pull-0 { - right: 0%; } - - .column.xxsmall-order-0 { - -webkit-box-ordinal-group: 1; - -ms-flex-order: 0; - order: 0; } - - .column.xxsmall-1 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 8.33333%; } - - .column.xxsmall-offset-1 { - margin-left: 8.33333%; } - - .column.xxsmall-push-1 { - left: 8.33333%; } - - .column.xxsmall-pull-1 { - right: 8.33333%; } - - .column.xxsmall-order-1 { - -webkit-box-ordinal-group: 2; - -ms-flex-order: 1; - order: 1; } - - .column.xxsmall-2 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 16.66667%; } - - .column.xxsmall-offset-2 { - margin-left: 16.66667%; } - - .column.xxsmall-push-2 { - left: 16.66667%; } - - .column.xxsmall-pull-2 { - right: 16.66667%; } - - .column.xxsmall-order-2 { - -webkit-box-ordinal-group: 3; - -ms-flex-order: 2; - order: 2; } - - .column.xxsmall-3 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 25%; } - - .column.xxsmall-offset-3 { - margin-left: 25%; } - - .column.xxsmall-push-3 { - left: 25%; } - - .column.xxsmall-pull-3 { - right: 25%; } - - .column.xxsmall-order-3 { - -webkit-box-ordinal-group: 4; - -ms-flex-order: 3; - order: 3; } - - .column.xxsmall-4 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 33.33333%; } - - .column.xxsmall-offset-4 { - margin-left: 33.33333%; } - - .column.xxsmall-push-4 { - left: 33.33333%; } - - .column.xxsmall-pull-4 { - right: 33.33333%; } - - .column.xxsmall-order-4 { - -webkit-box-ordinal-group: 5; - -ms-flex-order: 4; - order: 4; } - - .column.xxsmall-5 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 41.66667%; } - - .column.xxsmall-offset-5 { - margin-left: 41.66667%; } - - .column.xxsmall-push-5 { - left: 41.66667%; } - - .column.xxsmall-pull-5 { - right: 41.66667%; } - - .column.xxsmall-order-5 { - -webkit-box-ordinal-group: 6; - -ms-flex-order: 5; - order: 5; } - - .column.xxsmall-6 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 50%; } - - .column.xxsmall-offset-6 { - margin-left: 50%; } - - .column.xxsmall-push-6 { - left: 50%; } - - .column.xxsmall-pull-6 { - right: 50%; } - - .column.xxsmall-order-6 { - -webkit-box-ordinal-group: 7; - -ms-flex-order: 6; - order: 6; } - - .column.xxsmall-7 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 58.33333%; } - - .column.xxsmall-offset-7 { - margin-left: 58.33333%; } - - .column.xxsmall-push-7 { - left: 58.33333%; } - - .column.xxsmall-pull-7 { - right: 58.33333%; } - - .column.xxsmall-order-7 { - -webkit-box-ordinal-group: 8; - -ms-flex-order: 7; - order: 7; } - - .column.xxsmall-8 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 66.66667%; } - - .column.xxsmall-offset-8 { - margin-left: 66.66667%; } - - .column.xxsmall-push-8 { - left: 66.66667%; } - - .column.xxsmall-pull-8 { - right: 66.66667%; } - - .column.xxsmall-order-8 { - -webkit-box-ordinal-group: 9; - -ms-flex-order: 8; - order: 8; } - - .column.xxsmall-9 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 75%; } - - .column.xxsmall-offset-9 { - margin-left: 75%; } - - .column.xxsmall-push-9 { - left: 75%; } - - .column.xxsmall-pull-9 { - right: 75%; } - - .column.xxsmall-order-9 { - -webkit-box-ordinal-group: 10; - -ms-flex-order: 9; - order: 9; } - - .column.xxsmall-10 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 83.33333%; } - - .column.xxsmall-offset-10 { - margin-left: 83.33333%; } - - .column.xxsmall-push-10 { - left: 83.33333%; } - - .column.xxsmall-pull-10 { - right: 83.33333%; } - - .column.xxsmall-order-10 { - -webkit-box-ordinal-group: 11; - -ms-flex-order: 10; - order: 10; } - - .column.xxsmall-11 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 91.66667%; } - - .column.xxsmall-offset-11 { - margin-left: 91.66667%; } - - .column.xxsmall-push-11 { - left: 91.66667%; } - - .column.xxsmall-pull-11 { - right: 91.66667%; } - - .column.xxsmall-order-11 { - -webkit-box-ordinal-group: 12; - -ms-flex-order: 11; - order: 11; } - - .column.xxsmall-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 100%; } - - .column.xxsmall-offset-12 { - margin-left: 100%; } - - .column.xxsmall-push-12 { - left: 100%; } - - .column.xxsmall-pull-12 { - right: 100%; } - - .column.xxsmall-order-12 { - -webkit-box-ordinal-group: 13; - -ms-flex-order: 12; - order: 12; } - - .show-from-xxsmall-up { - display: inherit !important; } - - .hide-from-xxsmall-up { - display: none !important; } } - -@media only screen and (min-width: 30em) and (max-width: 39.9375em) { - - .show-for-xsmall-only { - display: inherit !important; } - - .hide-for-xsmall-only { - display: none !important; } } - -@media only screen and (min-width: 30em) { - - .row.xsmall-top { - -webkit-box-align: start; - -ms-flex-align: start; - align-items: flex-start; } - - .row.xsmall-middle { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; } - - .row.xsmall-bottom { - -webkit-box-align: end; - -ms-flex-align: end; - align-items: flex-end; } - - .row.xsmall-baseline { - -webkit-box-align: baseline; - -ms-flex-align: baseline; - align-items: baseline; } - - .row.xsmall-stretch { - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; } - - .row.xsmall-start { - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; } - - .row.xsmall-center { - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; } - - .row.xsmall-end { - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; } - - .row.xsmall-around { - -ms-flex-pack: distribute; - justify-content: space-around; } - - .row.xsmall-between { - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; } - - .row.xsmall-horizontal { - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; } - - .row.xsmall-horizontal-reverse { - -webkit-box-orient: horizontal; - -webkit-box-direction: reverse; - -ms-flex-direction: row-reverse; - flex-direction: row-reverse; } - - .row.xsmall-vertical { - -webkit-box-flex: 1; - -ms-flex: 1; - flex: 1; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; } - - .row.xsmall-vertical-reverse { - -webkit-box-flex: 1; - -ms-flex: 1; - flex: 1; - -webkit-box-orient: vertical; - -webkit-box-direction: reverse; - -ms-flex-direction: column-reverse; - flex-direction: column-reverse; } - - .row.xsmall-single-line { - -ms-flex-flow: nowrap; - flex-flow: nowrap; } - - .column.xsmall-collapse { - padding-left: 0; - padding-right: 0; } - - .column.xsmall-top { - -ms-flex-item-align: start; - align-self: flex-start; } - - .column.xsmall-middle { - -ms-flex-item-align: center; - align-self: center; } - - .column.xsmall-bottom { - -ms-flex-item-align: end; - align-self: flex-end; } - - .column.xsmall-baseline { - -ms-flex-item-align: baseline; - align-self: baseline; } - - .column.xsmall-stretch { - -ms-flex-item-align: stretch; - align-self: stretch; } - - .column.xsmall-auto { - -webkit-box-flex: 1; - -ms-flex: 1 1 0%; - flex: 1 1 0%; - width: auto; } - - .column.xsmall-auto-reset { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; } - - .column.xsmall-auto { - -webkit-box-flex: 1; - -ms-flex: 1 1 0%; - flex: 1 1 0%; - width: auto; } - - .column.xsmall-0 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: auto; } - - .column.xsmall-offset-0 { - margin-left: 0%; } - - .column.xsmall-push-0 { - left: 0%; } - - .column.xsmall-pull-0 { - right: 0%; } - - .column.xsmall-order-0 { - -webkit-box-ordinal-group: 1; - -ms-flex-order: 0; - order: 0; } - - .column.xsmall-1 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 8.33333%; } - - .column.xsmall-offset-1 { - margin-left: 8.33333%; } - - .column.xsmall-push-1 { - left: 8.33333%; } - - .column.xsmall-pull-1 { - right: 8.33333%; } - - .column.xsmall-order-1 { - -webkit-box-ordinal-group: 2; - -ms-flex-order: 1; - order: 1; } - - .column.xsmall-2 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 16.66667%; } - - .column.xsmall-offset-2 { - margin-left: 16.66667%; } - - .column.xsmall-push-2 { - left: 16.66667%; } - - .column.xsmall-pull-2 { - right: 16.66667%; } - - .column.xsmall-order-2 { - -webkit-box-ordinal-group: 3; - -ms-flex-order: 2; - order: 2; } - - .column.xsmall-3 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 25%; } - - .column.xsmall-offset-3 { - margin-left: 25%; } - - .column.xsmall-push-3 { - left: 25%; } - - .column.xsmall-pull-3 { - right: 25%; } - - .column.xsmall-order-3 { - -webkit-box-ordinal-group: 4; - -ms-flex-order: 3; - order: 3; } - - .column.xsmall-4 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 33.33333%; } - - .column.xsmall-offset-4 { - margin-left: 33.33333%; } - - .column.xsmall-push-4 { - left: 33.33333%; } - - .column.xsmall-pull-4 { - right: 33.33333%; } - - .column.xsmall-order-4 { - -webkit-box-ordinal-group: 5; - -ms-flex-order: 4; - order: 4; } - - .column.xsmall-5 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 41.66667%; } - - .column.xsmall-offset-5 { - margin-left: 41.66667%; } - - .column.xsmall-push-5 { - left: 41.66667%; } - - .column.xsmall-pull-5 { - right: 41.66667%; } - - .column.xsmall-order-5 { - -webkit-box-ordinal-group: 6; - -ms-flex-order: 5; - order: 5; } - - .column.xsmall-6 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 50%; } - - .column.xsmall-offset-6 { - margin-left: 50%; } - - .column.xsmall-push-6 { - left: 50%; } - - .column.xsmall-pull-6 { - right: 50%; } - - .column.xsmall-order-6 { - -webkit-box-ordinal-group: 7; - -ms-flex-order: 6; - order: 6; } - - .column.xsmall-7 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 58.33333%; } - - .column.xsmall-offset-7 { - margin-left: 58.33333%; } - - .column.xsmall-push-7 { - left: 58.33333%; } - - .column.xsmall-pull-7 { - right: 58.33333%; } - - .column.xsmall-order-7 { - -webkit-box-ordinal-group: 8; - -ms-flex-order: 7; - order: 7; } - - .column.xsmall-8 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 66.66667%; } - - .column.xsmall-offset-8 { - margin-left: 66.66667%; } - - .column.xsmall-push-8 { - left: 66.66667%; } - - .column.xsmall-pull-8 { - right: 66.66667%; } - - .column.xsmall-order-8 { - -webkit-box-ordinal-group: 9; - -ms-flex-order: 8; - order: 8; } - - .column.xsmall-9 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 75%; } - - .column.xsmall-offset-9 { - margin-left: 75%; } - - .column.xsmall-push-9 { - left: 75%; } - - .column.xsmall-pull-9 { - right: 75%; } - - .column.xsmall-order-9 { - -webkit-box-ordinal-group: 10; - -ms-flex-order: 9; - order: 9; } - - .column.xsmall-10 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 83.33333%; } - - .column.xsmall-offset-10 { - margin-left: 83.33333%; } - - .column.xsmall-push-10 { - left: 83.33333%; } - - .column.xsmall-pull-10 { - right: 83.33333%; } - - .column.xsmall-order-10 { - -webkit-box-ordinal-group: 11; - -ms-flex-order: 10; - order: 10; } - - .column.xsmall-11 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 91.66667%; } - - .column.xsmall-offset-11 { - margin-left: 91.66667%; } - - .column.xsmall-push-11 { - left: 91.66667%; } - - .column.xsmall-pull-11 { - right: 91.66667%; } - - .column.xsmall-order-11 { - -webkit-box-ordinal-group: 12; - -ms-flex-order: 11; - order: 11; } - - .column.xsmall-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 100%; } - - .column.xsmall-offset-12 { - margin-left: 100%; } - - .column.xsmall-push-12 { - left: 100%; } - - .column.xsmall-pull-12 { - right: 100%; } - - .column.xsmall-order-12 { - -webkit-box-ordinal-group: 13; - -ms-flex-order: 12; - order: 12; } - - .show-from-xsmall-up { - display: inherit !important; } - - .hide-from-xsmall-up { - display: none !important; } } - -@media only screen and (min-width: 40em) and (max-width: 44.9375em) { - - .show-for-small-only { - display: inherit !important; } - - .hide-for-small-only { - display: none !important; } } - -@media only screen and (min-width: 40em) { - - .row.small-top { - -webkit-box-align: start; - -ms-flex-align: start; - align-items: flex-start; } - - .row.small-middle { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; } - - .row.small-bottom { - -webkit-box-align: end; - -ms-flex-align: end; - align-items: flex-end; } - - .row.small-baseline { - -webkit-box-align: baseline; - -ms-flex-align: baseline; - align-items: baseline; } - - .row.small-stretch { - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; } - - .row.small-start { - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; } - - .row.small-center { - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; } - - .row.small-end { - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; } - - .row.small-around { - -ms-flex-pack: distribute; - justify-content: space-around; } - - .row.small-between { - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; } - - .row.small-horizontal { - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; } - - .row.small-horizontal-reverse { - -webkit-box-orient: horizontal; - -webkit-box-direction: reverse; - -ms-flex-direction: row-reverse; - flex-direction: row-reverse; } - - .row.small-vertical { - -webkit-box-flex: 1; - -ms-flex: 1; - flex: 1; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; } - - .row.small-vertical-reverse { - -webkit-box-flex: 1; - -ms-flex: 1; - flex: 1; - -webkit-box-orient: vertical; - -webkit-box-direction: reverse; - -ms-flex-direction: column-reverse; - flex-direction: column-reverse; } - - .row.small-single-line { - -ms-flex-flow: nowrap; - flex-flow: nowrap; } - - .column.small-collapse { - padding-left: 0; - padding-right: 0; } - - .column.small-top { - -ms-flex-item-align: start; - align-self: flex-start; } - - .column.small-middle { - -ms-flex-item-align: center; - align-self: center; } - - .column.small-bottom { - -ms-flex-item-align: end; - align-self: flex-end; } - - .column.small-baseline { - -ms-flex-item-align: baseline; - align-self: baseline; } - - .column.small-stretch { - -ms-flex-item-align: stretch; - align-self: stretch; } - - .column.small-auto { - -webkit-box-flex: 1; - -ms-flex: 1 1 0%; - flex: 1 1 0%; - width: auto; } - - .column.small-auto-reset { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; } - - .column.small-auto { - -webkit-box-flex: 1; - -ms-flex: 1 1 0%; - flex: 1 1 0%; - width: auto; } - - .column.small-0 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: auto; } - - .column.small-offset-0 { - margin-left: 0%; } - - .column.small-push-0 { - left: 0%; } - - .column.small-pull-0 { - right: 0%; } - - .column.small-order-0 { - -webkit-box-ordinal-group: 1; - -ms-flex-order: 0; - order: 0; } - - .column.small-1 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 8.33333%; } - - .column.small-offset-1 { - margin-left: 8.33333%; } - - .column.small-push-1 { - left: 8.33333%; } - - .column.small-pull-1 { - right: 8.33333%; } - - .column.small-order-1 { - -webkit-box-ordinal-group: 2; - -ms-flex-order: 1; - order: 1; } - - .column.small-2 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 16.66667%; } - - .column.small-offset-2 { - margin-left: 16.66667%; } - - .column.small-push-2 { - left: 16.66667%; } - - .column.small-pull-2 { - right: 16.66667%; } - - .column.small-order-2 { - -webkit-box-ordinal-group: 3; - -ms-flex-order: 2; - order: 2; } - - .column.small-3 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 25%; } - - .column.small-offset-3 { - margin-left: 25%; } - - .column.small-push-3 { - left: 25%; } - - .column.small-pull-3 { - right: 25%; } - - .column.small-order-3 { - -webkit-box-ordinal-group: 4; - -ms-flex-order: 3; - order: 3; } - - .column.small-4 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 33.33333%; } - - .column.small-offset-4 { - margin-left: 33.33333%; } - - .column.small-push-4 { - left: 33.33333%; } - - .column.small-pull-4 { - right: 33.33333%; } - - .column.small-order-4 { - -webkit-box-ordinal-group: 5; - -ms-flex-order: 4; - order: 4; } - - .column.small-5 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 41.66667%; } - - .column.small-offset-5 { - margin-left: 41.66667%; } - - .column.small-push-5 { - left: 41.66667%; } - - .column.small-pull-5 { - right: 41.66667%; } - - .column.small-order-5 { - -webkit-box-ordinal-group: 6; - -ms-flex-order: 5; - order: 5; } - - .column.small-6 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 50%; } - - .column.small-offset-6 { - margin-left: 50%; } - - .column.small-push-6 { - left: 50%; } - - .column.small-pull-6 { - right: 50%; } - - .column.small-order-6 { - -webkit-box-ordinal-group: 7; - -ms-flex-order: 6; - order: 6; } - - .column.small-7 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 58.33333%; } - - .column.small-offset-7 { - margin-left: 58.33333%; } - - .column.small-push-7 { - left: 58.33333%; } - - .column.small-pull-7 { - right: 58.33333%; } - - .column.small-order-7 { - -webkit-box-ordinal-group: 8; - -ms-flex-order: 7; - order: 7; } - - .column.small-8 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 66.66667%; } - - .column.small-offset-8 { - margin-left: 66.66667%; } - - .column.small-push-8 { - left: 66.66667%; } - - .column.small-pull-8 { - right: 66.66667%; } - - .column.small-order-8 { - -webkit-box-ordinal-group: 9; - -ms-flex-order: 8; - order: 8; } - - .column.small-9 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 75%; } - - .column.small-offset-9 { - margin-left: 75%; } - - .column.small-push-9 { - left: 75%; } - - .column.small-pull-9 { - right: 75%; } - - .column.small-order-9 { - -webkit-box-ordinal-group: 10; - -ms-flex-order: 9; - order: 9; } - - .column.small-10 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 83.33333%; } - - .column.small-offset-10 { - margin-left: 83.33333%; } - - .column.small-push-10 { - left: 83.33333%; } - - .column.small-pull-10 { - right: 83.33333%; } - - .column.small-order-10 { - -webkit-box-ordinal-group: 11; - -ms-flex-order: 10; - order: 10; } - - .column.small-11 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 91.66667%; } - - .column.small-offset-11 { - margin-left: 91.66667%; } - - .column.small-push-11 { - left: 91.66667%; } - - .column.small-pull-11 { - right: 91.66667%; } - - .column.small-order-11 { - -webkit-box-ordinal-group: 12; - -ms-flex-order: 11; - order: 11; } - - .column.small-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 100%; } - - .column.small-offset-12 { - margin-left: 100%; } - - .column.small-push-12 { - left: 100%; } - - .column.small-pull-12 { - right: 100%; } - - .column.small-order-12 { - -webkit-box-ordinal-group: 13; - -ms-flex-order: 12; - order: 12; } - - .show-from-small-up { - display: inherit !important; } - - .hide-from-small-up { - display: none !important; } } - -@media only screen and (min-width: 45em) { - - .row.medium-top { - -webkit-box-align: start; - -ms-flex-align: start; - align-items: flex-start; } - - .row.medium-middle { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; } - - .row.medium-bottom { - -webkit-box-align: end; - -ms-flex-align: end; - align-items: flex-end; } - - .row.medium-baseline { - -webkit-box-align: baseline; - -ms-flex-align: baseline; - align-items: baseline; } - - .row.medium-stretch { - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; } - - .row.medium-start { - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; } - - .row.medium-center { - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; } - - .row.medium-end { - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; } - - .row.medium-around { - -ms-flex-pack: distribute; - justify-content: space-around; } - - .row.medium-between { - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; } - - .row.medium-horizontal { - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; } - - .row.medium-horizontal-reverse { - -webkit-box-orient: horizontal; - -webkit-box-direction: reverse; - -ms-flex-direction: row-reverse; - flex-direction: row-reverse; } - - .row.medium-vertical { - -webkit-box-flex: 1; - -ms-flex: 1; - flex: 1; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; } - - .row.medium-vertical-reverse { - -webkit-box-flex: 1; - -ms-flex: 1; - flex: 1; - -webkit-box-orient: vertical; - -webkit-box-direction: reverse; - -ms-flex-direction: column-reverse; - flex-direction: column-reverse; } - - .row.medium-single-line { - -ms-flex-flow: nowrap; - flex-flow: nowrap; } - - .column.medium-collapse { - padding-left: 0; - padding-right: 0; } - - .column.medium-top { - -ms-flex-item-align: start; - align-self: flex-start; } - - .column.medium-middle { - -ms-flex-item-align: center; - align-self: center; } - - .column.medium-bottom { - -ms-flex-item-align: end; - align-self: flex-end; } - - .column.medium-baseline { - -ms-flex-item-align: baseline; - align-self: baseline; } - - .column.medium-stretch { - -ms-flex-item-align: stretch; - align-self: stretch; } - - .column.medium-auto { - -webkit-box-flex: 1; - -ms-flex: 1 1 0%; - flex: 1 1 0%; - width: auto; } - - .column.medium-auto-reset { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; } - - .column.medium-auto { - -webkit-box-flex: 1; - -ms-flex: 1 1 0%; - flex: 1 1 0%; - width: auto; } - - .column.medium-0 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: auto; } - - .column.medium-offset-0 { - margin-left: 0%; } - - .column.medium-push-0 { - left: 0%; } - - .column.medium-pull-0 { - right: 0%; } - - .column.medium-order-0 { - -webkit-box-ordinal-group: 1; - -ms-flex-order: 0; - order: 0; } - - .column.medium-1 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 8.33333%; } - - .column.medium-offset-1 { - margin-left: 8.33333%; } - - .column.medium-push-1 { - left: 8.33333%; } - - .column.medium-pull-1 { - right: 8.33333%; } - - .column.medium-order-1 { - -webkit-box-ordinal-group: 2; - -ms-flex-order: 1; - order: 1; } - - .column.medium-2 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 16.66667%; } - - .column.medium-offset-2 { - margin-left: 16.66667%; } - - .column.medium-push-2 { - left: 16.66667%; } - - .column.medium-pull-2 { - right: 16.66667%; } - - .column.medium-order-2 { - -webkit-box-ordinal-group: 3; - -ms-flex-order: 2; - order: 2; } - - .column.medium-3 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 25%; } - - .column.medium-offset-3 { - margin-left: 25%; } - - .column.medium-push-3 { - left: 25%; } - - .column.medium-pull-3 { - right: 25%; } - - .column.medium-order-3 { - -webkit-box-ordinal-group: 4; - -ms-flex-order: 3; - order: 3; } - - .column.medium-4 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 33.33333%; } - - .column.medium-offset-4 { - margin-left: 33.33333%; } - - .column.medium-push-4 { - left: 33.33333%; } - - .column.medium-pull-4 { - right: 33.33333%; } - - .column.medium-order-4 { - -webkit-box-ordinal-group: 5; - -ms-flex-order: 4; - order: 4; } - - .column.medium-5 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 41.66667%; } - - .column.medium-offset-5 { - margin-left: 41.66667%; } - - .column.medium-push-5 { - left: 41.66667%; } - - .column.medium-pull-5 { - right: 41.66667%; } - - .column.medium-order-5 { - -webkit-box-ordinal-group: 6; - -ms-flex-order: 5; - order: 5; } - - .column.medium-6 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 50%; } - - .column.medium-offset-6 { - margin-left: 50%; } - - .column.medium-push-6 { - left: 50%; } - - .column.medium-pull-6 { - right: 50%; } - - .column.medium-order-6 { - -webkit-box-ordinal-group: 7; - -ms-flex-order: 6; - order: 6; } - - .column.medium-7 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 58.33333%; } - - .column.medium-offset-7 { - margin-left: 58.33333%; } - - .column.medium-push-7 { - left: 58.33333%; } - - .column.medium-pull-7 { - right: 58.33333%; } - - .column.medium-order-7 { - -webkit-box-ordinal-group: 8; - -ms-flex-order: 7; - order: 7; } - - .column.medium-8 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 66.66667%; } - - .column.medium-offset-8 { - margin-left: 66.66667%; } - - .column.medium-push-8 { - left: 66.66667%; } - - .column.medium-pull-8 { - right: 66.66667%; } - - .column.medium-order-8 { - -webkit-box-ordinal-group: 9; - -ms-flex-order: 8; - order: 8; } - - .column.medium-9 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 75%; } - - .column.medium-offset-9 { - margin-left: 75%; } - - .column.medium-push-9 { - left: 75%; } - - .column.medium-pull-9 { - right: 75%; } - - .column.medium-order-9 { - -webkit-box-ordinal-group: 10; - -ms-flex-order: 9; - order: 9; } - - .column.medium-10 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 83.33333%; } - - .column.medium-offset-10 { - margin-left: 83.33333%; } - - .column.medium-push-10 { - left: 83.33333%; } - - .column.medium-pull-10 { - right: 83.33333%; } - - .column.medium-order-10 { - -webkit-box-ordinal-group: 11; - -ms-flex-order: 10; - order: 10; } - - .column.medium-11 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 91.66667%; } - - .column.medium-offset-11 { - margin-left: 91.66667%; } - - .column.medium-push-11 { - left: 91.66667%; } - - .column.medium-pull-11 { - right: 91.66667%; } - - .column.medium-order-11 { - -webkit-box-ordinal-group: 12; - -ms-flex-order: 11; - order: 11; } - - .column.medium-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 100%; } - - .column.medium-offset-12 { - margin-left: 100%; } - - .column.medium-push-12 { - left: 100%; } - - .column.medium-pull-12 { - right: 100%; } - - .column.medium-order-12 { - -webkit-box-ordinal-group: 13; - -ms-flex-order: 12; - order: 12; } - - .show-from-medium-up { - display: inherit !important; } - - .hide-from-medium-up { - display: none !important; } } - -@media only screen and (min-width: 45em) and (max-width: 63.9375em) { - - .show-for-medium-only { - display: inherit !important; } - - .hide-for-medium-only { - display: none !important; } } - -@media only screen and (min-width: 64em) { - - .row.large-top { - -webkit-box-align: start; - -ms-flex-align: start; - align-items: flex-start; } - - .row.large-middle { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; } - - .row.large-bottom { - -webkit-box-align: end; - -ms-flex-align: end; - align-items: flex-end; } - - .row.large-baseline { - -webkit-box-align: baseline; - -ms-flex-align: baseline; - align-items: baseline; } - - .row.large-stretch { - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; } - - .row.large-start { - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; } - - .row.large-center { - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; } - - .row.large-end { - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; } - - .row.large-around { - -ms-flex-pack: distribute; - justify-content: space-around; } - - .row.large-between { - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; } - - .row.large-horizontal { - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; } - - .row.large-horizontal-reverse { - -webkit-box-orient: horizontal; - -webkit-box-direction: reverse; - -ms-flex-direction: row-reverse; - flex-direction: row-reverse; } - - .row.large-vertical { - -webkit-box-flex: 1; - -ms-flex: 1; - flex: 1; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; } - - .row.large-vertical-reverse { - -webkit-box-flex: 1; - -ms-flex: 1; - flex: 1; - -webkit-box-orient: vertical; - -webkit-box-direction: reverse; - -ms-flex-direction: column-reverse; - flex-direction: column-reverse; } - - .row.large-single-line { - -ms-flex-flow: nowrap; - flex-flow: nowrap; } - - .column.large-collapse { - padding-left: 0; - padding-right: 0; } - - .column.large-top { - -ms-flex-item-align: start; - align-self: flex-start; } - - .column.large-middle { - -ms-flex-item-align: center; - align-self: center; } - - .column.large-bottom { - -ms-flex-item-align: end; - align-self: flex-end; } - - .column.large-baseline { - -ms-flex-item-align: baseline; - align-self: baseline; } - - .column.large-stretch { - -ms-flex-item-align: stretch; - align-self: stretch; } - - .column.large-auto { - -webkit-box-flex: 1; - -ms-flex: 1 1 0%; - flex: 1 1 0%; - width: auto; } - - .column.large-auto-reset { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; } - - .column.large-auto { - -webkit-box-flex: 1; - -ms-flex: 1 1 0%; - flex: 1 1 0%; - width: auto; } - - .column.large-0 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: auto; } - - .column.large-offset-0 { - margin-left: 0%; } - - .column.large-push-0 { - left: 0%; } - - .column.large-pull-0 { - right: 0%; } - - .column.large-order-0 { - -webkit-box-ordinal-group: 1; - -ms-flex-order: 0; - order: 0; } - - .column.large-1 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 8.33333%; } - - .column.large-offset-1 { - margin-left: 8.33333%; } - - .column.large-push-1 { - left: 8.33333%; } - - .column.large-pull-1 { - right: 8.33333%; } - - .column.large-order-1 { - -webkit-box-ordinal-group: 2; - -ms-flex-order: 1; - order: 1; } - - .column.large-2 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 16.66667%; } - - .column.large-offset-2 { - margin-left: 16.66667%; } - - .column.large-push-2 { - left: 16.66667%; } - - .column.large-pull-2 { - right: 16.66667%; } - - .column.large-order-2 { - -webkit-box-ordinal-group: 3; - -ms-flex-order: 2; - order: 2; } - - .column.large-3 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 25%; } - - .column.large-offset-3 { - margin-left: 25%; } - - .column.large-push-3 { - left: 25%; } - - .column.large-pull-3 { - right: 25%; } - - .column.large-order-3 { - -webkit-box-ordinal-group: 4; - -ms-flex-order: 3; - order: 3; } - - .column.large-4 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 33.33333%; } - - .column.large-offset-4 { - margin-left: 33.33333%; } - - .column.large-push-4 { - left: 33.33333%; } - - .column.large-pull-4 { - right: 33.33333%; } - - .column.large-order-4 { - -webkit-box-ordinal-group: 5; - -ms-flex-order: 4; - order: 4; } - - .column.large-5 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 41.66667%; } - - .column.large-offset-5 { - margin-left: 41.66667%; } - - .column.large-push-5 { - left: 41.66667%; } - - .column.large-pull-5 { - right: 41.66667%; } - - .column.large-order-5 { - -webkit-box-ordinal-group: 6; - -ms-flex-order: 5; - order: 5; } - - .column.large-6 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 50%; } - - .column.large-offset-6 { - margin-left: 50%; } - - .column.large-push-6 { - left: 50%; } - - .column.large-pull-6 { - right: 50%; } - - .column.large-order-6 { - -webkit-box-ordinal-group: 7; - -ms-flex-order: 6; - order: 6; } - - .column.large-7 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 58.33333%; } - - .column.large-offset-7 { - margin-left: 58.33333%; } - - .column.large-push-7 { - left: 58.33333%; } - - .column.large-pull-7 { - right: 58.33333%; } - - .column.large-order-7 { - -webkit-box-ordinal-group: 8; - -ms-flex-order: 7; - order: 7; } - - .column.large-8 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 66.66667%; } - - .column.large-offset-8 { - margin-left: 66.66667%; } - - .column.large-push-8 { - left: 66.66667%; } - - .column.large-pull-8 { - right: 66.66667%; } - - .column.large-order-8 { - -webkit-box-ordinal-group: 9; - -ms-flex-order: 8; - order: 8; } - - .column.large-9 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 75%; } - - .column.large-offset-9 { - margin-left: 75%; } - - .column.large-push-9 { - left: 75%; } - - .column.large-pull-9 { - right: 75%; } - - .column.large-order-9 { - -webkit-box-ordinal-group: 10; - -ms-flex-order: 9; - order: 9; } - - .column.large-10 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 83.33333%; } - - .column.large-offset-10 { - margin-left: 83.33333%; } - - .column.large-push-10 { - left: 83.33333%; } - - .column.large-pull-10 { - right: 83.33333%; } - - .column.large-order-10 { - -webkit-box-ordinal-group: 11; - -ms-flex-order: 10; - order: 10; } - - .column.large-11 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 91.66667%; } - - .column.large-offset-11 { - margin-left: 91.66667%; } - - .column.large-push-11 { - left: 91.66667%; } - - .column.large-pull-11 { - right: 91.66667%; } - - .column.large-order-11 { - -webkit-box-ordinal-group: 12; - -ms-flex-order: 11; - order: 11; } - - .column.large-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 100%; } - - .column.large-offset-12 { - margin-left: 100%; } - - .column.large-push-12 { - left: 100%; } - - .column.large-pull-12 { - right: 100%; } - - .column.large-order-12 { - -webkit-box-ordinal-group: 13; - -ms-flex-order: 12; - order: 12; } - - .show-from-large-up { - display: inherit !important; } - - .hide-from-large-up { - display: none !important; } } - -@media only screen and (min-width: 64em) and (max-width: 79.9375em) { - - .show-for-large-only { - display: inherit !important; } - - .hide-for-large-only { - display: none !important; } } - -@media only screen and (min-width: 80em) { - - .row.xlarge-top { - -webkit-box-align: start; - -ms-flex-align: start; - align-items: flex-start; } - - .row.xlarge-middle { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; } - - .row.xlarge-bottom { - -webkit-box-align: end; - -ms-flex-align: end; - align-items: flex-end; } - - .row.xlarge-baseline { - -webkit-box-align: baseline; - -ms-flex-align: baseline; - align-items: baseline; } - - .row.xlarge-stretch { - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; } - - .row.xlarge-start { - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; } - - .row.xlarge-center { - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; } - - .row.xlarge-end { - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; } - - .row.xlarge-around { - -ms-flex-pack: distribute; - justify-content: space-around; } - - .row.xlarge-between { - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; } - - .row.xlarge-horizontal { - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; } - - .row.xlarge-horizontal-reverse { - -webkit-box-orient: horizontal; - -webkit-box-direction: reverse; - -ms-flex-direction: row-reverse; - flex-direction: row-reverse; } - - .row.xlarge-vertical { - -webkit-box-flex: 1; - -ms-flex: 1; - flex: 1; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; } - - .row.xlarge-vertical-reverse { - -webkit-box-flex: 1; - -ms-flex: 1; - flex: 1; - -webkit-box-orient: vertical; - -webkit-box-direction: reverse; - -ms-flex-direction: column-reverse; - flex-direction: column-reverse; } - - .row.xlarge-single-line { - -ms-flex-flow: nowrap; - flex-flow: nowrap; } - - .column.xlarge-collapse { - padding-left: 0; - padding-right: 0; } - - .column.xlarge-top { - -ms-flex-item-align: start; - align-self: flex-start; } - - .column.xlarge-middle { - -ms-flex-item-align: center; - align-self: center; } - - .column.xlarge-bottom { - -ms-flex-item-align: end; - align-self: flex-end; } - - .column.xlarge-baseline { - -ms-flex-item-align: baseline; - align-self: baseline; } - - .column.xlarge-stretch { - -ms-flex-item-align: stretch; - align-self: stretch; } - - .column.xlarge-auto { - -webkit-box-flex: 1; - -ms-flex: 1 1 0%; - flex: 1 1 0%; - width: auto; } - - .column.xlarge-auto-reset { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; } - - .column.xlarge-auto { - -webkit-box-flex: 1; - -ms-flex: 1 1 0%; - flex: 1 1 0%; - width: auto; } - - .column.xlarge-0 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: auto; } - - .column.xlarge-offset-0 { - margin-left: 0%; } - - .column.xlarge-push-0 { - left: 0%; } - - .column.xlarge-pull-0 { - right: 0%; } - - .column.xlarge-order-0 { - -webkit-box-ordinal-group: 1; - -ms-flex-order: 0; - order: 0; } - - .column.xlarge-1 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 8.33333%; } - - .column.xlarge-offset-1 { - margin-left: 8.33333%; } - - .column.xlarge-push-1 { - left: 8.33333%; } - - .column.xlarge-pull-1 { - right: 8.33333%; } - - .column.xlarge-order-1 { - -webkit-box-ordinal-group: 2; - -ms-flex-order: 1; - order: 1; } - - .column.xlarge-2 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 16.66667%; } - - .column.xlarge-offset-2 { - margin-left: 16.66667%; } - - .column.xlarge-push-2 { - left: 16.66667%; } - - .column.xlarge-pull-2 { - right: 16.66667%; } - - .column.xlarge-order-2 { - -webkit-box-ordinal-group: 3; - -ms-flex-order: 2; - order: 2; } - - .column.xlarge-3 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 25%; } - - .column.xlarge-offset-3 { - margin-left: 25%; } - - .column.xlarge-push-3 { - left: 25%; } - - .column.xlarge-pull-3 { - right: 25%; } - - .column.xlarge-order-3 { - -webkit-box-ordinal-group: 4; - -ms-flex-order: 3; - order: 3; } - - .column.xlarge-4 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 33.33333%; } - - .column.xlarge-offset-4 { - margin-left: 33.33333%; } - - .column.xlarge-push-4 { - left: 33.33333%; } - - .column.xlarge-pull-4 { - right: 33.33333%; } - - .column.xlarge-order-4 { - -webkit-box-ordinal-group: 5; - -ms-flex-order: 4; - order: 4; } - - .column.xlarge-5 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 41.66667%; } - - .column.xlarge-offset-5 { - margin-left: 41.66667%; } - - .column.xlarge-push-5 { - left: 41.66667%; } - - .column.xlarge-pull-5 { - right: 41.66667%; } - - .column.xlarge-order-5 { - -webkit-box-ordinal-group: 6; - -ms-flex-order: 5; - order: 5; } - - .column.xlarge-6 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 50%; } - - .column.xlarge-offset-6 { - margin-left: 50%; } - - .column.xlarge-push-6 { - left: 50%; } - - .column.xlarge-pull-6 { - right: 50%; } - - .column.xlarge-order-6 { - -webkit-box-ordinal-group: 7; - -ms-flex-order: 6; - order: 6; } - - .column.xlarge-7 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 58.33333%; } - - .column.xlarge-offset-7 { - margin-left: 58.33333%; } - - .column.xlarge-push-7 { - left: 58.33333%; } - - .column.xlarge-pull-7 { - right: 58.33333%; } - - .column.xlarge-order-7 { - -webkit-box-ordinal-group: 8; - -ms-flex-order: 7; - order: 7; } - - .column.xlarge-8 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 66.66667%; } - - .column.xlarge-offset-8 { - margin-left: 66.66667%; } - - .column.xlarge-push-8 { - left: 66.66667%; } - - .column.xlarge-pull-8 { - right: 66.66667%; } - - .column.xlarge-order-8 { - -webkit-box-ordinal-group: 9; - -ms-flex-order: 8; - order: 8; } - - .column.xlarge-9 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 75%; } - - .column.xlarge-offset-9 { - margin-left: 75%; } - - .column.xlarge-push-9 { - left: 75%; } - - .column.xlarge-pull-9 { - right: 75%; } - - .column.xlarge-order-9 { - -webkit-box-ordinal-group: 10; - -ms-flex-order: 9; - order: 9; } - - .column.xlarge-10 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 83.33333%; } - - .column.xlarge-offset-10 { - margin-left: 83.33333%; } - - .column.xlarge-push-10 { - left: 83.33333%; } - - .column.xlarge-pull-10 { - right: 83.33333%; } - - .column.xlarge-order-10 { - -webkit-box-ordinal-group: 11; - -ms-flex-order: 10; - order: 10; } - - .column.xlarge-11 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 91.66667%; } - - .column.xlarge-offset-11 { - margin-left: 91.66667%; } - - .column.xlarge-push-11 { - left: 91.66667%; } - - .column.xlarge-pull-11 { - right: 91.66667%; } - - .column.xlarge-order-11 { - -webkit-box-ordinal-group: 12; - -ms-flex-order: 11; - order: 11; } - - .column.xlarge-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 100%; } - - .column.xlarge-offset-12 { - margin-left: 100%; } - - .column.xlarge-push-12 { - left: 100%; } - - .column.xlarge-pull-12 { - right: 100%; } - - .column.xlarge-order-12 { - -webkit-box-ordinal-group: 13; - -ms-flex-order: 12; - order: 12; } - - .show-from-xlarge-up { - display: inherit !important; } - - .hide-from-xlarge-up { - display: none !important; } } - -@media only screen and (min-width: 80em) and (max-width: 89.9375em) { - - .show-for-xlarge-only { - display: inherit !important; } - - .hide-for-xlarge-only { - display: none !important; } } - -@media only screen and (min-width: 90em) { - - .row.xxlarge-top { - -webkit-box-align: start; - -ms-flex-align: start; - align-items: flex-start; } - - .row.xxlarge-middle { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; } - - .row.xxlarge-bottom { - -webkit-box-align: end; - -ms-flex-align: end; - align-items: flex-end; } - - .row.xxlarge-baseline { - -webkit-box-align: baseline; - -ms-flex-align: baseline; - align-items: baseline; } - - .row.xxlarge-stretch { - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; } - - .row.xxlarge-start { - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; } - - .row.xxlarge-center { - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; } - - .row.xxlarge-end { - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; } - - .row.xxlarge-around { - -ms-flex-pack: distribute; - justify-content: space-around; } - - .row.xxlarge-between { - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; } - - .row.xxlarge-horizontal { - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; } - - .row.xxlarge-horizontal-reverse { - -webkit-box-orient: horizontal; - -webkit-box-direction: reverse; - -ms-flex-direction: row-reverse; - flex-direction: row-reverse; } - - .row.xxlarge-vertical { - -webkit-box-flex: 1; - -ms-flex: 1; - flex: 1; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; } - - .row.xxlarge-vertical-reverse { - -webkit-box-flex: 1; - -ms-flex: 1; - flex: 1; - -webkit-box-orient: vertical; - -webkit-box-direction: reverse; - -ms-flex-direction: column-reverse; - flex-direction: column-reverse; } - - .row.xxlarge-single-line { - -ms-flex-flow: nowrap; - flex-flow: nowrap; } - - .column.xxlarge-collapse { - padding-left: 0; - padding-right: 0; } - - .column.xxlarge-top { - -ms-flex-item-align: start; - align-self: flex-start; } - - .column.xxlarge-middle { - -ms-flex-item-align: center; - align-self: center; } - - .column.xxlarge-bottom { - -ms-flex-item-align: end; - align-self: flex-end; } - - .column.xxlarge-baseline { - -ms-flex-item-align: baseline; - align-self: baseline; } - - .column.xxlarge-stretch { - -ms-flex-item-align: stretch; - align-self: stretch; } - - .column.xxlarge-auto { - -webkit-box-flex: 1; - -ms-flex: 1 1 0%; - flex: 1 1 0%; - width: auto; } - - .column.xxlarge-auto-reset { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; } - - .column.xxlarge-auto { - -webkit-box-flex: 1; - -ms-flex: 1 1 0%; - flex: 1 1 0%; - width: auto; } - - .column.xxlarge-0 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: auto; } - - .column.xxlarge-offset-0 { - margin-left: 0%; } - - .column.xxlarge-push-0 { - left: 0%; } - - .column.xxlarge-pull-0 { - right: 0%; } - - .column.xxlarge-order-0 { - -webkit-box-ordinal-group: 1; - -ms-flex-order: 0; - order: 0; } - - .column.xxlarge-1 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 8.33333%; } - - .column.xxlarge-offset-1 { - margin-left: 8.33333%; } - - .column.xxlarge-push-1 { - left: 8.33333%; } - - .column.xxlarge-pull-1 { - right: 8.33333%; } - - .column.xxlarge-order-1 { - -webkit-box-ordinal-group: 2; - -ms-flex-order: 1; - order: 1; } - - .column.xxlarge-2 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 16.66667%; } - - .column.xxlarge-offset-2 { - margin-left: 16.66667%; } - - .column.xxlarge-push-2 { - left: 16.66667%; } - - .column.xxlarge-pull-2 { - right: 16.66667%; } - - .column.xxlarge-order-2 { - -webkit-box-ordinal-group: 3; - -ms-flex-order: 2; - order: 2; } - - .column.xxlarge-3 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 25%; } - - .column.xxlarge-offset-3 { - margin-left: 25%; } - - .column.xxlarge-push-3 { - left: 25%; } - - .column.xxlarge-pull-3 { - right: 25%; } - - .column.xxlarge-order-3 { - -webkit-box-ordinal-group: 4; - -ms-flex-order: 3; - order: 3; } - - .column.xxlarge-4 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 33.33333%; } - - .column.xxlarge-offset-4 { - margin-left: 33.33333%; } - - .column.xxlarge-push-4 { - left: 33.33333%; } - - .column.xxlarge-pull-4 { - right: 33.33333%; } - - .column.xxlarge-order-4 { - -webkit-box-ordinal-group: 5; - -ms-flex-order: 4; - order: 4; } - - .column.xxlarge-5 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 41.66667%; } - - .column.xxlarge-offset-5 { - margin-left: 41.66667%; } - - .column.xxlarge-push-5 { - left: 41.66667%; } - - .column.xxlarge-pull-5 { - right: 41.66667%; } - - .column.xxlarge-order-5 { - -webkit-box-ordinal-group: 6; - -ms-flex-order: 5; - order: 5; } - - .column.xxlarge-6 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 50%; } - - .column.xxlarge-offset-6 { - margin-left: 50%; } - - .column.xxlarge-push-6 { - left: 50%; } - - .column.xxlarge-pull-6 { - right: 50%; } - - .column.xxlarge-order-6 { - -webkit-box-ordinal-group: 7; - -ms-flex-order: 6; - order: 6; } - - .column.xxlarge-7 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 58.33333%; } - - .column.xxlarge-offset-7 { - margin-left: 58.33333%; } - - .column.xxlarge-push-7 { - left: 58.33333%; } - - .column.xxlarge-pull-7 { - right: 58.33333%; } - - .column.xxlarge-order-7 { - -webkit-box-ordinal-group: 8; - -ms-flex-order: 7; - order: 7; } - - .column.xxlarge-8 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 66.66667%; } - - .column.xxlarge-offset-8 { - margin-left: 66.66667%; } - - .column.xxlarge-push-8 { - left: 66.66667%; } - - .column.xxlarge-pull-8 { - right: 66.66667%; } - - .column.xxlarge-order-8 { - -webkit-box-ordinal-group: 9; - -ms-flex-order: 8; - order: 8; } - - .column.xxlarge-9 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 75%; } - - .column.xxlarge-offset-9 { - margin-left: 75%; } - - .column.xxlarge-push-9 { - left: 75%; } - - .column.xxlarge-pull-9 { - right: 75%; } - - .column.xxlarge-order-9 { - -webkit-box-ordinal-group: 10; - -ms-flex-order: 9; - order: 9; } - - .column.xxlarge-10 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 83.33333%; } - - .column.xxlarge-offset-10 { - margin-left: 83.33333%; } - - .column.xxlarge-push-10 { - left: 83.33333%; } - - .column.xxlarge-pull-10 { - right: 83.33333%; } - - .column.xxlarge-order-10 { - -webkit-box-ordinal-group: 11; - -ms-flex-order: 10; - order: 10; } - - .column.xxlarge-11 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 91.66667%; } - - .column.xxlarge-offset-11 { - margin-left: 91.66667%; } - - .column.xxlarge-push-11 { - left: 91.66667%; } - - .column.xxlarge-pull-11 { - right: 91.66667%; } - - .column.xxlarge-order-11 { - -webkit-box-ordinal-group: 12; - -ms-flex-order: 11; - order: 11; } - - .column.xxlarge-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 100%; } - - .column.xxlarge-offset-12 { - margin-left: 100%; } - - .column.xxlarge-push-12 { - left: 100%; } - - .column.xxlarge-pull-12 { - right: 100%; } - - .column.xxlarge-order-12 { - -webkit-box-ordinal-group: 13; - -ms-flex-order: 12; - order: 12; } - - .show-from-xxlarge-up { - display: inherit !important; } - - .hide-from-xxlarge-up { - display: none !important; } } - -@media only screen and (min-width: 90em) and (max-width: 99999999em) { - - .show-for-xxlarge-only { - display: inherit !important; } - - .hide-for-xxlarge-only { - display: none !important; } } + flex: 0 0 auto; + width: 116.66667%; } /*# sourceMappingURL=../sourcemaps/supergigi.css.map */ \ No newline at end of file diff --git a/src/assets/styles/helpers/_grid.scss b/src/assets/styles/helpers/_grid.scss index cf74bcf..8e55e62 100644 --- a/src/assets/styles/helpers/_grid.scss +++ b/src/assets/styles/helpers/_grid.scss @@ -14,7 +14,7 @@ } @if $margin == 'margin-#{$grid-start}' { - @return calc(#{($dividend / $divisor * 100%)} + #{$column-gutter / 2}); + @return calc(#{($dividend / $divisor * 100%)} + (#{$column-gutter} / 2)); } @return $dividend / $divisor * 100%; @@ -27,17 +27,20 @@ // If the property is the width, it will add the relative flex properties to // the returned block. // ----------------------------------------------------------------------------- -@mixin grid-calc($property, $attr, $margin: false, $query: false) { +@mixin grid-calc($property, $attr, $margin: false, $query: false, $loop: 0) { // Width property needs flex attributes @if $property == width { - @if $attr == auto { - flex: 1 1 0%; + $prev: if($loop > 1, nth(map-values($query), $loop - 1), null); - } @else { - flex: 0 0 auto; - } + @if type-of($prev) != type-of($attr){ + @if $attr == auto { + flex: 1 1 0%; + } @else { + flex: 0 0 auto; + } + } @if $attr == 0 { $attr: auto; } @@ -48,13 +51,8 @@ // (N of X) syntax @if length($attr) == 3 and nth($attr, 2) == 'of' { - @if $query and $use-dry { - @error "You can't use n of N syntax with query parameter. Use mediaquery mixin instead!"; - - } @else { - @include responsive-gutter { - #{$property}: sg-dimension(nth($attr, 1), nth($attr, 3), $margin); - } + @include responsive-gutter { + #{$property}: sg-dimension(nth($attr, 1), nth($attr, 3), $margin); } // Standard syntax @@ -85,20 +83,22 @@ } @else { + $counter: 0; @each $query, $value in $attr { $set: #{$query}#{$value}#{$eq-grid}-#{$margin}; + $counter: $counter + 1; @if $inmedia != false{ - @include dry-it('#{$property}-#{$set}') { - @include grid-calc($property, $value, $margin); + @include dry-it('#{$property}-#{$set}-#{$attr}-#{$counter}') { + @include grid-calc($property, $value, $margin, $attr, $counter); } } @else { @include media-query($query, $eq-grid: $eq-grid) { - @include dry-it('#{$property}-#{$set}-#{$margin}') { - @include grid-calc($property, $value, $margin); + @include dry-it('#{$property}-#{$set}-#{$margin}-#{$attr}-#{$counter}') { + @include grid-calc($property, $value, $margin, $attr, $counter); } } @@ -132,8 +132,8 @@ @if $nested { @if not $sg-collapse { @include responsive-gutter { - margin-left: (-$column-gutter / 2); - margin-right: (-$column-gutter / 2); + margin-left: calc(-#{$column-gutter} / 2); + margin-right: calc(-#{$column-gutter} / 2); width: calc(100% + #{$column-gutter}); } } @else { @@ -245,8 +245,8 @@ @if $global == true { @include dry-it('paddingGlob') { @include responsive-gutter { - padding-left: ($column-gutter / 2); - padding-right: ($column-gutter / 2); + padding-left: calc(#{$column-gutter} / 2); + padding-right: calc(#{$column-gutter} / 2); } } } @@ -263,8 +263,8 @@ @if $margin { @include dry-it('marginGlob') { @include responsive-gutter{ - margin-left: ($column-gutter / 2); - margin-right: ($column-gutter / 2); + margin-left: calc(#{$column-gutter} / 2); + margin-right: calc(#{$column-gutter} / 2); } } } @@ -281,20 +281,16 @@ // Push ------------- @if $push != null { - @include dry-it('colPush') { - position: relative; - #{$grid-end}: auto; - } + position: relative; + #{$grid-end}: auto; @include grid-space($grid-start, $push, $eq-grid); } // Pull ------------- @if $pull != null { - @include dry-it('colPull') { - position: relative; - #{$grid-start}: auto; - } + position: relative; + #{$grid-start}: auto; @include grid-space($grid-end, $pull, $eq-grid); } diff --git a/src/assets/styles/helpers/_mediaquery.scss b/src/assets/styles/helpers/_mediaquery.scss index 4435241..d7a1e5c 100644 --- a/src/assets/styles/helpers/_mediaquery.scss +++ b/src/assets/styles/helpers/_mediaquery.scss @@ -22,6 +22,13 @@ @if not variable-exists(min-unit) { $unit: unit(nth(map-values($breakpoints), 1)); + @each $breakpoint in map-values($breakpoints) { + @if $unit != unit($breakpoint) { + @warn 'All breakpoints must have the same unit!'; + $unit: unit($breakpoint); + } + } + $min-unit: em-calc(1, $rem-base) !global; @if $unit == "rem" { @@ -128,7 +135,11 @@ $query-end: nth($query-direction, 2); @content; } } @else { - @media #{$screen} and (#{$query-start}: #{$cur-bp}) { + @if index(map-keys($breakpoints), $query) != 1 { + @media #{$screen} and (#{$query-start}: #{$cur-bp}) { + @content; + } + } @else { @content; } } diff --git a/src/assets/styles/helpers/_static.scss b/src/assets/styles/helpers/_static.scss index 9851b13..8005f31 100644 --- a/src/assets/styles/helpers/_static.scss +++ b/src/assets/styles/helpers/_static.scss @@ -187,7 +187,7 @@ $type: if($use-classes, '.', '%'); #{$type}#{$row-name}, &#{grid-class-name(nested)} { - margin: 0 (-$column-gutter / 2); + margin: 0 calc(-#{$column-gutter} / 2); width: auto; } diff --git a/src/assets/styles/supergigi.scss b/src/assets/styles/supergigi.scss index 1ace3e3..027cb90 100644 --- a/src/assets/styles/supergigi.scss +++ b/src/assets/styles/supergigi.scss @@ -1,4 +1,8 @@ -$use-classes: true; -$use-dry: true; +$use-classes: false; +$use-dry: false; @import 'main'; + +.pippo { + @include grid-column(14) +} diff --git a/test/_test.scss b/test/_test.scss index 925ffc9..e9849cb 100644 --- a/test/_test.scss +++ b/test/_test.scss @@ -290,9 +290,9 @@ @include expect { box-sizing: border-box; - margin-left: (-$column-gutter / 2); - margin-right: (-$column-gutter / 2); - width: calc(100% + #{$column-gutter}); + margin-left: calc(-1.875rem / 2); + margin-right: calc(-1.875rem / 2); + width: calc(100% + 1.875rem); flex: 1 0 auto; display: flex; flex-wrap: wrap; @@ -349,8 +349,8 @@ box-sizing: border-box; display: flex; flex-direction: column; - padding-left: 0.9375rem; - padding-right: 0.9375rem; + padding-left: calc(1.875rem / 2); + padding-right: calc(1.875rem / 2); margin-left: 41.66667%; position: relative; right: auto; @@ -377,9 +377,9 @@ flex-direction: column; padding-left: 0; padding-right: 0; - margin-left: 0.9375rem; - margin-right: 0.9375rem; - margin-left: calc(41.66667% + 0.9375rem); + margin-left: calc(1.875rem / 2); + margin-right: calc(1.875rem / 2); + margin-left: calc(41.66667% + (1.875rem / 2)); } } @@ -393,8 +393,8 @@ box-sizing: border-box; display: flex; flex-direction: column; - padding-left: 0.9375rem; - padding-right: 0.9375rem; + padding-left: calc(1.875rem / 2); + padding-right: calc(1.875rem / 2); order: 5; } }