Last active
May 18, 2016 08:24
-
-
Save MartinMuzatko/ed9877462232d65b366a598394da453c to your computer and use it in GitHub Desktop.
Flexproperties - ~4053 Lines
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
// ---- | |
// Sass (v3.4.21) | |
// Compass (v1.0.3) | |
// ---- | |
$breakpoints: ( | |
(sm, 600px) | |
(md, 960px) | |
(lg, 1200px) | |
); | |
$layout-gutter-width: 1em; | |
$flex-step: 5; | |
$flex-steps: (100 / $flex-step); | |
@mixin flex-order-for-name($sizes:null) { | |
@if $sizes == null { | |
$sizes : ''; | |
} | |
@for $i from 0 through $flex-steps { | |
$order : ''; | |
$suffix : ''; | |
@each $s in $sizes { | |
@if $s != '' { $suffix : '-#{$s}="#{$i}"'; } | |
@else { $suffix : '="#{$i}"'; } | |
$order : '[flex-order#{$suffix}]'; | |
} | |
#{$order} { | |
order: #{$i}; | |
} | |
} | |
} | |
@mixin offset-for-name($sizes:null) { | |
@if $sizes == null { $sizes : ''; } | |
@for $i from 0 through $flex-steps - 1 { | |
$offsets : ''; | |
$suffix : ''; | |
@each $s in $sizes { | |
@if $s != '' { $suffix : '-#{$s}="#{$i * $flex-step}"'; } | |
@else { $suffix : '="#{$i * $flex-step}"'; } | |
$offsets : $offsets + '[flex-offset#{$suffix}], '; | |
} | |
#{$offsets} { | |
margin-left: #{$i * $flex-step + '%'}; | |
} | |
} | |
@each $i in 33 { | |
$offsets : ''; | |
$suffix : ''; | |
@each $s in $sizes { | |
@if $s != '' { $suffix : '-#{$s}="#{$i}"'; } | |
@else { $suffix : '="#{$i}"'; } | |
$offsets : '[flex-offset#{$suffix}], '; | |
} | |
#{$offsets} { | |
margin-left: calc(100% / 3); | |
} | |
} | |
@each $i in 66 { | |
$offsets : ''; | |
$suffix : ''; | |
@each $s in $sizes { | |
@if $s != '' { $suffix : '-#{$s}="#{$i}"'; } | |
@else { $suffix : '="#{$i}"'; } | |
$offsets : '[flex-offset#{$suffix}]'; | |
} | |
#{$offsets} { | |
margin-left: calc(200% / 3); | |
} | |
} | |
} | |
@mixin layout-for-name($name: null) { | |
@if $name == null { $name : ''; } | |
@if $name != '' { $name : '-#{$name}'; } | |
[layout#{$name}] { | |
display: flex; | |
} | |
[layout#{$name}] > * { | |
box-sizing: border-box; | |
} | |
[layout#{$name}="column"] { flex-direction: column; } | |
[layout#{$name}="row"] { flex-direction: row; } | |
} | |
@mixin flex-properties-for-name($name: null) { | |
$flexName: 'flex'; | |
@if $name != null { | |
$flexName: 'flex-#{$name}'; | |
$name : '-#{$name}'; | |
} @else { | |
$name : ''; | |
} | |
[#{$flexName}] { | |
flex: 1; | |
} | |
// IE mediaQuery hack for 8,9,10 to set the flex-basis properly for 'flex' values | |
// Details: | |
// Do not use unitless flex-basis values in the flex shorthand because IE 10-11 will error. | |
// Also use 0% instead of 0px since minifiers will often convert 0px to 0 (which is unitless and will have the same problem). | |
// Safari, however, fails with flex-basis : 0% and requires flex-basis : 0px | |
@if $name != '-print' { | |
@media screen\0 { | |
[#{$flexName}] { | |
flex: 1 1 0%; | |
} | |
} | |
} | |
[#{$flexName}-start] { margin-bottom: auto; } | |
[#{$flexName}-end] { margin-top: auto; } | |
[#{$flexName}-none] { flex: 0 0 auto; } | |
[#{$flexName}-initial] { flex: 0 1 auto; } | |
[#{$flexName}-noshrink] { flex: 1 0 auto; } | |
[#{$flexName}-auto] { flex: 1 1 auto; } | |
[#{$flexName}-grow] { flex: 1 1 100%; } | |
// (1-20) * $flex-step = 0-100% | |
[#{$flexName}], | |
[layout="row"] > [#{$flexName}], | |
[layout#{$name}="row"] > [#{$flexName}], { | |
max-height: 100%; | |
flex-wrap: wrap; | |
} | |
[layout#{$name}="column"] > [#{$flexName}], | |
[layout="column"] > [#{$flexName}] { | |
max-width: 100%; | |
flex-wrap: wrap; | |
} | |
@for $i from 1 through 20 { | |
$value : #{$i * $flex-step + '%'}; | |
[layout="row"] > [#{$flexName}="#{$i * $flex-step}"], | |
[layout#{$name}="row"] > [#{$flexName}="#{$i * $flex-step}"], | |
[#{$flexName}="#{$i * $flex-step}"] { | |
flex: 1 1 #{$value}; | |
max-width: #{$value}; | |
} | |
[layout="column"] > [#{$flexName}="#{$i * $flex-step}"], | |
[layout#{$name}="column"] > [#{$flexName}="#{$i * $flex-step}"] { | |
flex: 1 1 #{$value}; | |
max-height: #{$value}; | |
} | |
} | |
[layout="row"], [layout#{$name}="row"] { | |
> [#{$flexName}="33"] { | |
flex: 1 1 33.33%; | |
max-width: 33.33%; | |
} | |
> [#{$flexName}="66"] { | |
flex: 1 1 66.66%; | |
max-width: 66.66%; | |
} | |
} | |
[layout="column"], [layout#{$name}="column"] { | |
> [#{$flexName}="33"] { | |
flex: 1 1 33.33%; | |
max-height: 33.33%; | |
} | |
> [#{$flexName}="66"] { | |
flex: 1 1 66.66%; | |
max-height: 66.66%; | |
} | |
} | |
} | |
@mixin layout-align-for-name($suffix: null) { | |
// Alignment attributes for layout containers' children | |
// Arrange on the Main Axis | |
// center, start, end, space-between, space-around | |
// flex-start is the default for justify-content | |
// ------------------------------ | |
$name: 'layout-align'; | |
@if $suffix != null { | |
$name: 'layout-align-#{$suffix}'; | |
} | |
// Default | |
[#{$name}] | |
{ | |
justify-content :flex-start; | |
align-content : stretch; | |
align-items: stretch; | |
} | |
// Main Axis Center | |
[#{$name}^="start"] | |
{ | |
justify-content: flex-start; | |
} | |
// Main Axis Center | |
[#{$name}^="center"] | |
{ | |
justify-content: center; | |
} | |
// Main Axis End | |
[#{$name}^="end"] | |
{ | |
justify-content: flex-end; | |
} | |
// Main Axis Space Around | |
[#{$name}^="space-around"] | |
{ | |
justify-content: space-around; | |
} | |
// Main Axis Space Between | |
[#{$name}^="space-between"] | |
{ | |
justify-content: space-between; | |
} | |
// Arrange on the Cross Axis | |
// center, start, end | |
// stretch is the default for align-items | |
// ------------------------------ | |
// Cross Axis Start | |
[#{$name}$="start"] | |
{ | |
align-items: flex-start; | |
align-content: flex-start; | |
} | |
// Cross Axis Center | |
[#{$name}$="center"], | |
{ | |
align-items: center; | |
align-content: center; | |
max-width: 100%; | |
} | |
// Cross Axis Center IE overflow fix | |
[#{$name}$="center"] > * | |
{ | |
max-width: 100%; | |
} | |
// Cross Axis End | |
[#{$name}$="end"] | |
{ | |
align-items: flex-end; | |
align-content: flex-end; | |
} | |
[#{$name}="start"], | |
[#{$name}="end"], | |
[#{$name}="center"], | |
[#{$name}="space-around"], | |
[#{$name}="space-between"] | |
{ | |
align-items: stretch; | |
align-content : stretch; | |
} | |
} | |
@mixin layout-padding-margin-wrap() { | |
[layout-padding] > [flex-sm], [layout-padding] > [flex-lt-md] { | |
padding: $layout-gutter-width / 4; | |
} | |
[layout-padding], | |
[layout-padding] > [flex], | |
[layout-padding] > [flex-gt-sm], | |
[layout-padding] > [flex-md], | |
[layout-padding] > [flex-lt-lg] | |
{ | |
padding: $layout-gutter-width / 2; | |
} | |
[layout-padding] > [flex-gt-md], | |
[layout-padding] > [flex-lg] | |
{ | |
padding: $layout-gutter-width / 1; | |
} | |
[layout-margin] > [flex-sm], | |
[layout-margin] > [flex-lt-md] | |
{ | |
margin: $layout-gutter-width / 4; | |
} | |
[layout-margin], | |
[layout-margin] > [flex], | |
[layout-margin] > [flex-gt-sm], | |
[layout-margin] > [flex-md], | |
[layout-margin] > [flex-lt-lg] | |
{ | |
margin: $layout-gutter-width / 2; | |
} | |
[layout-margin] > [flex-gt-md], | |
[layout-margin] > [flex-lg] | |
{ | |
margin: $layout-gutter-width / 1; | |
} | |
[layout-nowrap] { | |
flex-wrap: nowrap; | |
} | |
} | |
@mixin layouts-for-breakpoint($name:null) { | |
@include offset-for-name($name); | |
@include layout-align-for-name($name); | |
@include flex-order-for-name($name); | |
@include flex-properties-for-name($name); | |
@include layout-for-name($name); | |
} | |
@mixin flexproperties() { | |
@include layout-padding-margin-wrap(); | |
@include layouts-for-breakpoint(); | |
@each $label, $value in $breakpoints { | |
$first: nth($breakpoints, 1); | |
$index: index($breakpoints, ($label, $value)); | |
/* #{$label} */ | |
@if $label == nth($first, 1) { | |
@media (max-width: $value - 1) { | |
@include layouts_for_breakpoint($label); | |
} | |
} @else { | |
@media (min-width: nth(nth($breakpoints, $index - 1), 2) ) and (max-width: $value - 1) { | |
@include layouts_for_breakpoint($label); | |
} | |
} | |
@media (min-width: $value) { | |
@include layouts_for_breakpoint("gt-#{$label}"); | |
} | |
} | |
} | |
@include flexproperties; |
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
[layout-padding] > [flex-sm], [layout-padding] > [flex-lt-md] { | |
padding: 0.25em; | |
} | |
[layout-padding], | |
[layout-padding] > [flex], | |
[layout-padding] > [flex-gt-sm], | |
[layout-padding] > [flex-md], | |
[layout-padding] > [flex-lt-lg] { | |
padding: 0.5em; | |
} | |
[layout-padding] > [flex-gt-md], | |
[layout-padding] > [flex-lg] { | |
padding: 1em; | |
} | |
[layout-margin] > [flex-sm], | |
[layout-margin] > [flex-lt-md] { | |
margin: 0.25em; | |
} | |
[layout-margin], | |
[layout-margin] > [flex], | |
[layout-margin] > [flex-gt-sm], | |
[layout-margin] > [flex-md], | |
[layout-margin] > [flex-lt-lg] { | |
margin: 0.5em; | |
} | |
[layout-margin] > [flex-gt-md], | |
[layout-margin] > [flex-lg] { | |
margin: 1em; | |
} | |
[layout-nowrap] { | |
flex-wrap: nowrap; | |
} | |
[flex-offset="0"] { | |
margin-left: 0%; | |
} | |
[flex-offset="5"] { | |
margin-left: 5%; | |
} | |
[flex-offset="10"] { | |
margin-left: 10%; | |
} | |
[flex-offset="15"] { | |
margin-left: 15%; | |
} | |
[flex-offset="20"] { | |
margin-left: 20%; | |
} | |
[flex-offset="25"] { | |
margin-left: 25%; | |
} | |
[flex-offset="30"] { | |
margin-left: 30%; | |
} | |
[flex-offset="35"] { | |
margin-left: 35%; | |
} | |
[flex-offset="40"] { | |
margin-left: 40%; | |
} | |
[flex-offset="45"] { | |
margin-left: 45%; | |
} | |
[flex-offset="50"] { | |
margin-left: 50%; | |
} | |
[flex-offset="55"] { | |
margin-left: 55%; | |
} | |
[flex-offset="60"] { | |
margin-left: 60%; | |
} | |
[flex-offset="65"] { | |
margin-left: 65%; | |
} | |
[flex-offset="70"] { | |
margin-left: 70%; | |
} | |
[flex-offset="75"] { | |
margin-left: 75%; | |
} | |
[flex-offset="80"] { | |
margin-left: 80%; | |
} | |
[flex-offset="85"] { | |
margin-left: 85%; | |
} | |
[flex-offset="90"] { | |
margin-left: 90%; | |
} | |
[flex-offset="95"] { | |
margin-left: 95%; | |
} | |
[flex-offset="33"] { | |
margin-left: calc(100% / 3); | |
} | |
[flex-offset="66"] { | |
margin-left: calc(200% / 3); | |
} | |
[layout-align] { | |
justify-content: flex-start; | |
align-content: stretch; | |
align-items: stretch; | |
} | |
[layout-align^="start"] { | |
justify-content: flex-start; | |
} | |
[layout-align^="center"] { | |
justify-content: center; | |
} | |
[layout-align^="end"] { | |
justify-content: flex-end; | |
} | |
[layout-align^="space-around"] { | |
justify-content: space-around; | |
} | |
[layout-align^="space-between"] { | |
justify-content: space-between; | |
} | |
[layout-align$="start"] { | |
align-items: flex-start; | |
align-content: flex-start; | |
} | |
[layout-align$="center"] { | |
align-items: center; | |
align-content: center; | |
max-width: 100%; | |
} | |
[layout-align$="center"] > * { | |
max-width: 100%; | |
} | |
[layout-align$="end"] { | |
align-items: flex-end; | |
align-content: flex-end; | |
} | |
[layout-align="start"], | |
[layout-align="end"], | |
[layout-align="center"], | |
[layout-align="space-around"], | |
[layout-align="space-between"] { | |
align-items: stretch; | |
align-content: stretch; | |
} | |
[flex-order="0"] { | |
order: 0; | |
} | |
[flex-order="1"] { | |
order: 1; | |
} | |
[flex-order="2"] { | |
order: 2; | |
} | |
[flex-order="3"] { | |
order: 3; | |
} | |
[flex-order="4"] { | |
order: 4; | |
} | |
[flex-order="5"] { | |
order: 5; | |
} | |
[flex-order="6"] { | |
order: 6; | |
} | |
[flex-order="7"] { | |
order: 7; | |
} | |
[flex-order="8"] { | |
order: 8; | |
} | |
[flex-order="9"] { | |
order: 9; | |
} | |
[flex-order="10"] { | |
order: 10; | |
} | |
[flex-order="11"] { | |
order: 11; | |
} | |
[flex-order="12"] { | |
order: 12; | |
} | |
[flex-order="13"] { | |
order: 13; | |
} | |
[flex-order="14"] { | |
order: 14; | |
} | |
[flex-order="15"] { | |
order: 15; | |
} | |
[flex-order="16"] { | |
order: 16; | |
} | |
[flex-order="17"] { | |
order: 17; | |
} | |
[flex-order="18"] { | |
order: 18; | |
} | |
[flex-order="19"] { | |
order: 19; | |
} | |
[flex-order="20"] { | |
order: 20; | |
} | |
[flex] { | |
flex: 1; | |
} | |
@media screen\0 { | |
[flex] { | |
flex: 1 1 0%; | |
} | |
} | |
[flex-start] { | |
margin-bottom: auto; | |
} | |
[flex-end] { | |
margin-top: auto; | |
} | |
[flex-none] { | |
flex: 0 0 auto; | |
} | |
[flex-initial] { | |
flex: 0 1 auto; | |
} | |
[flex-noshrink] { | |
flex: 1 0 auto; | |
} | |
[flex-auto] { | |
flex: 1 1 auto; | |
} | |
[flex-grow] { | |
flex: 1 1 100%; | |
} | |
[flex], | |
[layout="row"] > [flex], | |
[layout="row"] > [flex] { | |
max-height: 100%; | |
flex-wrap: wrap; | |
} | |
[layout="column"] > [flex], | |
[layout="column"] > [flex] { | |
max-width: 100%; | |
flex-wrap: wrap; | |
} | |
[layout="row"] > [flex="5"], | |
[layout="row"] > [flex="5"], | |
[flex="5"] { | |
flex: 1 1 5%; | |
max-width: 5%; | |
} | |
[layout="column"] > [flex="5"], | |
[layout="column"] > [flex="5"] { | |
flex: 1 1 5%; | |
max-height: 5%; | |
} | |
[layout="row"] > [flex="10"], | |
[layout="row"] > [flex="10"], | |
[flex="10"] { | |
flex: 1 1 10%; | |
max-width: 10%; | |
} | |
[layout="column"] > [flex="10"], | |
[layout="column"] > [flex="10"] { | |
flex: 1 1 10%; | |
max-height: 10%; | |
} | |
[layout="row"] > [flex="15"], | |
[layout="row"] > [flex="15"], | |
[flex="15"] { | |
flex: 1 1 15%; | |
max-width: 15%; | |
} | |
[layout="column"] > [flex="15"], | |
[layout="column"] > [flex="15"] { | |
flex: 1 1 15%; | |
max-height: 15%; | |
} | |
[layout="row"] > [flex="20"], | |
[layout="row"] > [flex="20"], | |
[flex="20"] { | |
flex: 1 1 20%; | |
max-width: 20%; | |
} | |
[layout="column"] > [flex="20"], | |
[layout="column"] > [flex="20"] { | |
flex: 1 1 20%; | |
max-height: 20%; | |
} | |
[layout="row"] > [flex="25"], | |
[layout="row"] > [flex="25"], | |
[flex="25"] { | |
flex: 1 1 25%; | |
max-width: 25%; | |
} | |
[layout="column"] > [flex="25"], | |
[layout="column"] > [flex="25"] { | |
flex: 1 1 25%; | |
max-height: 25%; | |
} | |
[layout="row"] > [flex="30"], | |
[layout="row"] > [flex="30"], | |
[flex="30"] { | |
flex: 1 1 30%; | |
max-width: 30%; | |
} | |
[layout="column"] > [flex="30"], | |
[layout="column"] > [flex="30"] { | |
flex: 1 1 30%; | |
max-height: 30%; | |
} | |
[layout="row"] > [flex="35"], | |
[layout="row"] > [flex="35"], | |
[flex="35"] { | |
flex: 1 1 35%; | |
max-width: 35%; | |
} | |
[layout="column"] > [flex="35"], | |
[layout="column"] > [flex="35"] { | |
flex: 1 1 35%; | |
max-height: 35%; | |
} | |
[layout="row"] > [flex="40"], | |
[layout="row"] > [flex="40"], | |
[flex="40"] { | |
flex: 1 1 40%; | |
max-width: 40%; | |
} | |
[layout="column"] > [flex="40"], | |
[layout="column"] > [flex="40"] { | |
flex: 1 1 40%; | |
max-height: 40%; | |
} | |
[layout="row"] > [flex="45"], | |
[layout="row"] > [flex="45"], | |
[flex="45"] { | |
flex: 1 1 45%; | |
max-width: 45%; | |
} | |
[layout="column"] > [flex="45"], | |
[layout="column"] > [flex="45"] { | |
flex: 1 1 45%; | |
max-height: 45%; | |
} | |
[layout="row"] > [flex="50"], | |
[layout="row"] > [flex="50"], | |
[flex="50"] { | |
flex: 1 1 50%; | |
max-width: 50%; | |
} | |
[layout="column"] > [flex="50"], | |
[layout="column"] > [flex="50"] { | |
flex: 1 1 50%; | |
max-height: 50%; | |
} | |
[layout="row"] > [flex="55"], | |
[layout="row"] > [flex="55"], | |
[flex="55"] { | |
flex: 1 1 55%; | |
max-width: 55%; | |
} | |
[layout="column"] > [flex="55"], | |
[layout="column"] > [flex="55"] { | |
flex: 1 1 55%; | |
max-height: 55%; | |
} | |
[layout="row"] > [flex="60"], | |
[layout="row"] > [flex="60"], | |
[flex="60"] { | |
flex: 1 1 60%; | |
max-width: 60%; | |
} | |
[layout="column"] > [flex="60"], | |
[layout="column"] > [flex="60"] { | |
flex: 1 1 60%; | |
max-height: 60%; | |
} | |
[layout="row"] > [flex="65"], | |
[layout="row"] > [flex="65"], | |
[flex="65"] { | |
flex: 1 1 65%; | |
max-width: 65%; | |
} | |
[layout="column"] > [flex="65"], | |
[layout="column"] > [flex="65"] { | |
flex: 1 1 65%; | |
max-height: 65%; | |
} | |
[layout="row"] > [flex="70"], | |
[layout="row"] > [flex="70"], | |
[flex="70"] { | |
flex: 1 1 70%; | |
max-width: 70%; | |
} | |
[layout="column"] > [flex="70"], | |
[layout="column"] > [flex="70"] { | |
flex: 1 1 70%; | |
max-height: 70%; | |
} | |
[layout="row"] > [flex="75"], | |
[layout="row"] > [flex="75"], | |
[flex="75"] { | |
flex: 1 1 75%; | |
max-width: 75%; | |
} | |
[layout="column"] > [flex="75"], | |
[layout="column"] > [flex="75"] { | |
flex: 1 1 75%; | |
max-height: 75%; | |
} | |
[layout="row"] > [flex="80"], | |
[layout="row"] > [flex="80"], | |
[flex="80"] { | |
flex: 1 1 80%; | |
max-width: 80%; | |
} | |
[layout="column"] > [flex="80"], | |
[layout="column"] > [flex="80"] { | |
flex: 1 1 80%; | |
max-height: 80%; | |
} | |
[layout="row"] > [flex="85"], | |
[layout="row"] > [flex="85"], | |
[flex="85"] { | |
flex: 1 1 85%; | |
max-width: 85%; | |
} | |
[layout="column"] > [flex="85"], | |
[layout="column"] > [flex="85"] { | |
flex: 1 1 85%; | |
max-height: 85%; | |
} | |
[layout="row"] > [flex="90"], | |
[layout="row"] > [flex="90"], | |
[flex="90"] { | |
flex: 1 1 90%; | |
max-width: 90%; | |
} | |
[layout="column"] > [flex="90"], | |
[layout="column"] > [flex="90"] { | |
flex: 1 1 90%; | |
max-height: 90%; | |
} | |
[layout="row"] > [flex="95"], | |
[layout="row"] > [flex="95"], | |
[flex="95"] { | |
flex: 1 1 95%; | |
max-width: 95%; | |
} | |
[layout="column"] > [flex="95"], | |
[layout="column"] > [flex="95"] { | |
flex: 1 1 95%; | |
max-height: 95%; | |
} | |
[layout="row"] > [flex="100"], | |
[layout="row"] > [flex="100"], | |
[flex="100"] { | |
flex: 1 1 100%; | |
max-width: 100%; | |
} | |
[layout="column"] > [flex="100"], | |
[layout="column"] > [flex="100"] { | |
flex: 1 1 100%; | |
max-height: 100%; | |
} | |
[layout="row"] > [flex="33"], [layout="row"] > [flex="33"] { | |
flex: 1 1 33.33%; | |
max-width: 33.33%; | |
} | |
[layout="row"] > [flex="66"], [layout="row"] > [flex="66"] { | |
flex: 1 1 66.66%; | |
max-width: 66.66%; | |
} | |
[layout="column"] > [flex="33"], [layout="column"] > [flex="33"] { | |
flex: 1 1 33.33%; | |
max-height: 33.33%; | |
} | |
[layout="column"] > [flex="66"], [layout="column"] > [flex="66"] { | |
flex: 1 1 66.66%; | |
max-height: 66.66%; | |
} | |
[layout] { | |
display: flex; | |
} | |
[layout] > * { | |
box-sizing: border-box; | |
} | |
[layout="column"] { | |
flex-direction: column; | |
} | |
[layout="row"] { | |
flex-direction: row; | |
} | |
/* sm */ | |
@media (max-width: 599px) { | |
[flex-offset-sm="0"] { | |
margin-left: 0%; | |
} | |
[flex-offset-sm="5"] { | |
margin-left: 5%; | |
} | |
[flex-offset-sm="10"] { | |
margin-left: 10%; | |
} | |
[flex-offset-sm="15"] { | |
margin-left: 15%; | |
} | |
[flex-offset-sm="20"] { | |
margin-left: 20%; | |
} | |
[flex-offset-sm="25"] { | |
margin-left: 25%; | |
} | |
[flex-offset-sm="30"] { | |
margin-left: 30%; | |
} | |
[flex-offset-sm="35"] { | |
margin-left: 35%; | |
} | |
[flex-offset-sm="40"] { | |
margin-left: 40%; | |
} | |
[flex-offset-sm="45"] { | |
margin-left: 45%; | |
} | |
[flex-offset-sm="50"] { | |
margin-left: 50%; | |
} | |
[flex-offset-sm="55"] { | |
margin-left: 55%; | |
} | |
[flex-offset-sm="60"] { | |
margin-left: 60%; | |
} | |
[flex-offset-sm="65"] { | |
margin-left: 65%; | |
} | |
[flex-offset-sm="70"] { | |
margin-left: 70%; | |
} | |
[flex-offset-sm="75"] { | |
margin-left: 75%; | |
} | |
[flex-offset-sm="80"] { | |
margin-left: 80%; | |
} | |
[flex-offset-sm="85"] { | |
margin-left: 85%; | |
} | |
[flex-offset-sm="90"] { | |
margin-left: 90%; | |
} | |
[flex-offset-sm="95"] { | |
margin-left: 95%; | |
} | |
[flex-offset-sm="33"] { | |
margin-left: calc(100% / 3); | |
} | |
[flex-offset-sm="66"] { | |
margin-left: calc(200% / 3); | |
} | |
[layout-align-sm] { | |
justify-content: flex-start; | |
align-content: stretch; | |
align-items: stretch; | |
} | |
[layout-align-sm^="start"] { | |
justify-content: flex-start; | |
} | |
[layout-align-sm^="center"] { | |
justify-content: center; | |
} | |
[layout-align-sm^="end"] { | |
justify-content: flex-end; | |
} | |
[layout-align-sm^="space-around"] { | |
justify-content: space-around; | |
} | |
[layout-align-sm^="space-between"] { | |
justify-content: space-between; | |
} | |
[layout-align-sm$="start"] { | |
align-items: flex-start; | |
align-content: flex-start; | |
} | |
[layout-align-sm$="center"] { | |
align-items: center; | |
align-content: center; | |
max-width: 100%; | |
} | |
[layout-align-sm$="center"] > * { | |
max-width: 100%; | |
} | |
[layout-align-sm$="end"] { | |
align-items: flex-end; | |
align-content: flex-end; | |
} | |
[layout-align-sm="start"], | |
[layout-align-sm="end"], | |
[layout-align-sm="center"], | |
[layout-align-sm="space-around"], | |
[layout-align-sm="space-between"] { | |
align-items: stretch; | |
align-content: stretch; | |
} | |
[flex-order-sm="0"] { | |
order: 0; | |
} | |
[flex-order-sm="1"] { | |
order: 1; | |
} | |
[flex-order-sm="2"] { | |
order: 2; | |
} | |
[flex-order-sm="3"] { | |
order: 3; | |
} | |
[flex-order-sm="4"] { | |
order: 4; | |
} | |
[flex-order-sm="5"] { | |
order: 5; | |
} | |
[flex-order-sm="6"] { | |
order: 6; | |
} | |
[flex-order-sm="7"] { | |
order: 7; | |
} | |
[flex-order-sm="8"] { | |
order: 8; | |
} | |
[flex-order-sm="9"] { | |
order: 9; | |
} | |
[flex-order-sm="10"] { | |
order: 10; | |
} | |
[flex-order-sm="11"] { | |
order: 11; | |
} | |
[flex-order-sm="12"] { | |
order: 12; | |
} | |
[flex-order-sm="13"] { | |
order: 13; | |
} | |
[flex-order-sm="14"] { | |
order: 14; | |
} | |
[flex-order-sm="15"] { | |
order: 15; | |
} | |
[flex-order-sm="16"] { | |
order: 16; | |
} | |
[flex-order-sm="17"] { | |
order: 17; | |
} | |
[flex-order-sm="18"] { | |
order: 18; | |
} | |
[flex-order-sm="19"] { | |
order: 19; | |
} | |
[flex-order-sm="20"] { | |
order: 20; | |
} | |
[flex-sm] { | |
flex: 1; | |
} | |
} | |
@media screen\0 and (max-width: 599px) { | |
[flex-sm] { | |
flex: 1 1 0%; | |
} | |
} | |
@media (max-width: 599px) { | |
[flex-sm-start] { | |
margin-bottom: auto; | |
} | |
[flex-sm-end] { | |
margin-top: auto; | |
} | |
[flex-sm-none] { | |
flex: 0 0 auto; | |
} | |
[flex-sm-initial] { | |
flex: 0 1 auto; | |
} | |
[flex-sm-noshrink] { | |
flex: 1 0 auto; | |
} | |
[flex-sm-auto] { | |
flex: 1 1 auto; | |
} | |
[flex-sm-grow] { | |
flex: 1 1 100%; | |
} | |
[flex-sm], | |
[layout="row"] > [flex-sm], | |
[layout-sm="row"] > [flex-sm] { | |
max-height: 100%; | |
flex-wrap: wrap; | |
} | |
[layout-sm="column"] > [flex-sm], | |
[layout="column"] > [flex-sm] { | |
max-width: 100%; | |
flex-wrap: wrap; | |
} | |
[layout="row"] > [flex-sm="5"], | |
[layout-sm="row"] > [flex-sm="5"], | |
[flex-sm="5"] { | |
flex: 1 1 5%; | |
max-width: 5%; | |
} | |
[layout="column"] > [flex-sm="5"], | |
[layout-sm="column"] > [flex-sm="5"] { | |
flex: 1 1 5%; | |
max-height: 5%; | |
} | |
[layout="row"] > [flex-sm="10"], | |
[layout-sm="row"] > [flex-sm="10"], | |
[flex-sm="10"] { | |
flex: 1 1 10%; | |
max-width: 10%; | |
} | |
[layout="column"] > [flex-sm="10"], | |
[layout-sm="column"] > [flex-sm="10"] { | |
flex: 1 1 10%; | |
max-height: 10%; | |
} | |
[layout="row"] > [flex-sm="15"], | |
[layout-sm="row"] > [flex-sm="15"], | |
[flex-sm="15"] { | |
flex: 1 1 15%; | |
max-width: 15%; | |
} | |
[layout="column"] > [flex-sm="15"], | |
[layout-sm="column"] > [flex-sm="15"] { | |
flex: 1 1 15%; | |
max-height: 15%; | |
} | |
[layout="row"] > [flex-sm="20"], | |
[layout-sm="row"] > [flex-sm="20"], | |
[flex-sm="20"] { | |
flex: 1 1 20%; | |
max-width: 20%; | |
} | |
[layout="column"] > [flex-sm="20"], | |
[layout-sm="column"] > [flex-sm="20"] { | |
flex: 1 1 20%; | |
max-height: 20%; | |
} | |
[layout="row"] > [flex-sm="25"], | |
[layout-sm="row"] > [flex-sm="25"], | |
[flex-sm="25"] { | |
flex: 1 1 25%; | |
max-width: 25%; | |
} | |
[layout="column"] > [flex-sm="25"], | |
[layout-sm="column"] > [flex-sm="25"] { | |
flex: 1 1 25%; | |
max-height: 25%; | |
} | |
[layout="row"] > [flex-sm="30"], | |
[layout-sm="row"] > [flex-sm="30"], | |
[flex-sm="30"] { | |
flex: 1 1 30%; | |
max-width: 30%; | |
} | |
[layout="column"] > [flex-sm="30"], | |
[layout-sm="column"] > [flex-sm="30"] { | |
flex: 1 1 30%; | |
max-height: 30%; | |
} | |
[layout="row"] > [flex-sm="35"], | |
[layout-sm="row"] > [flex-sm="35"], | |
[flex-sm="35"] { | |
flex: 1 1 35%; | |
max-width: 35%; | |
} | |
[layout="column"] > [flex-sm="35"], | |
[layout-sm="column"] > [flex-sm="35"] { | |
flex: 1 1 35%; | |
max-height: 35%; | |
} | |
[layout="row"] > [flex-sm="40"], | |
[layout-sm="row"] > [flex-sm="40"], | |
[flex-sm="40"] { | |
flex: 1 1 40%; | |
max-width: 40%; | |
} | |
[layout="column"] > [flex-sm="40"], | |
[layout-sm="column"] > [flex-sm="40"] { | |
flex: 1 1 40%; | |
max-height: 40%; | |
} | |
[layout="row"] > [flex-sm="45"], | |
[layout-sm="row"] > [flex-sm="45"], | |
[flex-sm="45"] { | |
flex: 1 1 45%; | |
max-width: 45%; | |
} | |
[layout="column"] > [flex-sm="45"], | |
[layout-sm="column"] > [flex-sm="45"] { | |
flex: 1 1 45%; | |
max-height: 45%; | |
} | |
[layout="row"] > [flex-sm="50"], | |
[layout-sm="row"] > [flex-sm="50"], | |
[flex-sm="50"] { | |
flex: 1 1 50%; | |
max-width: 50%; | |
} | |
[layout="column"] > [flex-sm="50"], | |
[layout-sm="column"] > [flex-sm="50"] { | |
flex: 1 1 50%; | |
max-height: 50%; | |
} | |
[layout="row"] > [flex-sm="55"], | |
[layout-sm="row"] > [flex-sm="55"], | |
[flex-sm="55"] { | |
flex: 1 1 55%; | |
max-width: 55%; | |
} | |
[layout="column"] > [flex-sm="55"], | |
[layout-sm="column"] > [flex-sm="55"] { | |
flex: 1 1 55%; | |
max-height: 55%; | |
} | |
[layout="row"] > [flex-sm="60"], | |
[layout-sm="row"] > [flex-sm="60"], | |
[flex-sm="60"] { | |
flex: 1 1 60%; | |
max-width: 60%; | |
} | |
[layout="column"] > [flex-sm="60"], | |
[layout-sm="column"] > [flex-sm="60"] { | |
flex: 1 1 60%; | |
max-height: 60%; | |
} | |
[layout="row"] > [flex-sm="65"], | |
[layout-sm="row"] > [flex-sm="65"], | |
[flex-sm="65"] { | |
flex: 1 1 65%; | |
max-width: 65%; | |
} | |
[layout="column"] > [flex-sm="65"], | |
[layout-sm="column"] > [flex-sm="65"] { | |
flex: 1 1 65%; | |
max-height: 65%; | |
} | |
[layout="row"] > [flex-sm="70"], | |
[layout-sm="row"] > [flex-sm="70"], | |
[flex-sm="70"] { | |
flex: 1 1 70%; | |
max-width: 70%; | |
} | |
[layout="column"] > [flex-sm="70"], | |
[layout-sm="column"] > [flex-sm="70"] { | |
flex: 1 1 70%; | |
max-height: 70%; | |
} | |
[layout="row"] > [flex-sm="75"], | |
[layout-sm="row"] > [flex-sm="75"], | |
[flex-sm="75"] { | |
flex: 1 1 75%; | |
max-width: 75%; | |
} | |
[layout="column"] > [flex-sm="75"], | |
[layout-sm="column"] > [flex-sm="75"] { | |
flex: 1 1 75%; | |
max-height: 75%; | |
} | |
[layout="row"] > [flex-sm="80"], | |
[layout-sm="row"] > [flex-sm="80"], | |
[flex-sm="80"] { | |
flex: 1 1 80%; | |
max-width: 80%; | |
} | |
[layout="column"] > [flex-sm="80"], | |
[layout-sm="column"] > [flex-sm="80"] { | |
flex: 1 1 80%; | |
max-height: 80%; | |
} | |
[layout="row"] > [flex-sm="85"], | |
[layout-sm="row"] > [flex-sm="85"], | |
[flex-sm="85"] { | |
flex: 1 1 85%; | |
max-width: 85%; | |
} | |
[layout="column"] > [flex-sm="85"], | |
[layout-sm="column"] > [flex-sm="85"] { | |
flex: 1 1 85%; | |
max-height: 85%; | |
} | |
[layout="row"] > [flex-sm="90"], | |
[layout-sm="row"] > [flex-sm="90"], | |
[flex-sm="90"] { | |
flex: 1 1 90%; | |
max-width: 90%; | |
} | |
[layout="column"] > [flex-sm="90"], | |
[layout-sm="column"] > [flex-sm="90"] { | |
flex: 1 1 90%; | |
max-height: 90%; | |
} | |
[layout="row"] > [flex-sm="95"], | |
[layout-sm="row"] > [flex-sm="95"], | |
[flex-sm="95"] { | |
flex: 1 1 95%; | |
max-width: 95%; | |
} | |
[layout="column"] > [flex-sm="95"], | |
[layout-sm="column"] > [flex-sm="95"] { | |
flex: 1 1 95%; | |
max-height: 95%; | |
} | |
[layout="row"] > [flex-sm="100"], | |
[layout-sm="row"] > [flex-sm="100"], | |
[flex-sm="100"] { | |
flex: 1 1 100%; | |
max-width: 100%; | |
} | |
[layout="column"] > [flex-sm="100"], | |
[layout-sm="column"] > [flex-sm="100"] { | |
flex: 1 1 100%; | |
max-height: 100%; | |
} | |
[layout="row"] > [flex-sm="33"], [layout-sm="row"] > [flex-sm="33"] { | |
flex: 1 1 33.33%; | |
max-width: 33.33%; | |
} | |
[layout="row"] > [flex-sm="66"], [layout-sm="row"] > [flex-sm="66"] { | |
flex: 1 1 66.66%; | |
max-width: 66.66%; | |
} | |
[layout="column"] > [flex-sm="33"], [layout-sm="column"] > [flex-sm="33"] { | |
flex: 1 1 33.33%; | |
max-height: 33.33%; | |
} | |
[layout="column"] > [flex-sm="66"], [layout-sm="column"] > [flex-sm="66"] { | |
flex: 1 1 66.66%; | |
max-height: 66.66%; | |
} | |
[layout-sm] { | |
display: flex; | |
} | |
[layout-sm] > * { | |
box-sizing: border-box; | |
} | |
[layout-sm="column"] { | |
flex-direction: column; | |
} | |
[layout-sm="row"] { | |
flex-direction: row; | |
} | |
} | |
@media (min-width: 600px) { | |
[flex-offset-gt-sm="0"] { | |
margin-left: 0%; | |
} | |
[flex-offset-gt-sm="5"] { | |
margin-left: 5%; | |
} | |
[flex-offset-gt-sm="10"] { | |
margin-left: 10%; | |
} | |
[flex-offset-gt-sm="15"] { | |
margin-left: 15%; | |
} | |
[flex-offset-gt-sm="20"] { | |
margin-left: 20%; | |
} | |
[flex-offset-gt-sm="25"] { | |
margin-left: 25%; | |
} | |
[flex-offset-gt-sm="30"] { | |
margin-left: 30%; | |
} | |
[flex-offset-gt-sm="35"] { | |
margin-left: 35%; | |
} | |
[flex-offset-gt-sm="40"] { | |
margin-left: 40%; | |
} | |
[flex-offset-gt-sm="45"] { | |
margin-left: 45%; | |
} | |
[flex-offset-gt-sm="50"] { | |
margin-left: 50%; | |
} | |
[flex-offset-gt-sm="55"] { | |
margin-left: 55%; | |
} | |
[flex-offset-gt-sm="60"] { | |
margin-left: 60%; | |
} | |
[flex-offset-gt-sm="65"] { | |
margin-left: 65%; | |
} | |
[flex-offset-gt-sm="70"] { | |
margin-left: 70%; | |
} | |
[flex-offset-gt-sm="75"] { | |
margin-left: 75%; | |
} | |
[flex-offset-gt-sm="80"] { | |
margin-left: 80%; | |
} | |
[flex-offset-gt-sm="85"] { | |
margin-left: 85%; | |
} | |
[flex-offset-gt-sm="90"] { | |
margin-left: 90%; | |
} | |
[flex-offset-gt-sm="95"] { | |
margin-left: 95%; | |
} | |
[flex-offset-gt-sm="33"] { | |
margin-left: calc(100% / 3); | |
} | |
[flex-offset-gt-sm="66"] { | |
margin-left: calc(200% / 3); | |
} | |
[layout-align-gt-sm] { | |
justify-content: flex-start; | |
align-content: stretch; | |
align-items: stretch; | |
} | |
[layout-align-gt-sm^="start"] { | |
justify-content: flex-start; | |
} | |
[layout-align-gt-sm^="center"] { | |
justify-content: center; | |
} | |
[layout-align-gt-sm^="end"] { | |
justify-content: flex-end; | |
} | |
[layout-align-gt-sm^="space-around"] { | |
justify-content: space-around; | |
} | |
[layout-align-gt-sm^="space-between"] { | |
justify-content: space-between; | |
} | |
[layout-align-gt-sm$="start"] { | |
align-items: flex-start; | |
align-content: flex-start; | |
} | |
[layout-align-gt-sm$="center"] { | |
align-items: center; | |
align-content: center; | |
max-width: 100%; | |
} | |
[layout-align-gt-sm$="center"] > * { | |
max-width: 100%; | |
} | |
[layout-align-gt-sm$="end"] { | |
align-items: flex-end; | |
align-content: flex-end; | |
} | |
[layout-align-gt-sm="start"], | |
[layout-align-gt-sm="end"], | |
[layout-align-gt-sm="center"], | |
[layout-align-gt-sm="space-around"], | |
[layout-align-gt-sm="space-between"] { | |
align-items: stretch; | |
align-content: stretch; | |
} | |
[flex-order-gt-sm="0"] { | |
order: 0; | |
} | |
[flex-order-gt-sm="1"] { | |
order: 1; | |
} | |
[flex-order-gt-sm="2"] { | |
order: 2; | |
} | |
[flex-order-gt-sm="3"] { | |
order: 3; | |
} | |
[flex-order-gt-sm="4"] { | |
order: 4; | |
} | |
[flex-order-gt-sm="5"] { | |
order: 5; | |
} | |
[flex-order-gt-sm="6"] { | |
order: 6; | |
} | |
[flex-order-gt-sm="7"] { | |
order: 7; | |
} | |
[flex-order-gt-sm="8"] { | |
order: 8; | |
} | |
[flex-order-gt-sm="9"] { | |
order: 9; | |
} | |
[flex-order-gt-sm="10"] { | |
order: 10; | |
} | |
[flex-order-gt-sm="11"] { | |
order: 11; | |
} | |
[flex-order-gt-sm="12"] { | |
order: 12; | |
} | |
[flex-order-gt-sm="13"] { | |
order: 13; | |
} | |
[flex-order-gt-sm="14"] { | |
order: 14; | |
} | |
[flex-order-gt-sm="15"] { | |
order: 15; | |
} | |
[flex-order-gt-sm="16"] { | |
order: 16; | |
} | |
[flex-order-gt-sm="17"] { | |
order: 17; | |
} | |
[flex-order-gt-sm="18"] { | |
order: 18; | |
} | |
[flex-order-gt-sm="19"] { | |
order: 19; | |
} | |
[flex-order-gt-sm="20"] { | |
order: 20; | |
} | |
[flex-gt-sm] { | |
flex: 1; | |
} | |
} | |
@media screen\0 and (min-width: 600px) { | |
[flex-gt-sm] { | |
flex: 1 1 0%; | |
} | |
} | |
@media (min-width: 600px) { | |
[flex-gt-sm-start] { | |
margin-bottom: auto; | |
} | |
[flex-gt-sm-end] { | |
margin-top: auto; | |
} | |
[flex-gt-sm-none] { | |
flex: 0 0 auto; | |
} | |
[flex-gt-sm-initial] { | |
flex: 0 1 auto; | |
} | |
[flex-gt-sm-noshrink] { | |
flex: 1 0 auto; | |
} | |
[flex-gt-sm-auto] { | |
flex: 1 1 auto; | |
} | |
[flex-gt-sm-grow] { | |
flex: 1 1 100%; | |
} | |
[flex-gt-sm], | |
[layout="row"] > [flex-gt-sm], | |
[layout-gt-sm="row"] > [flex-gt-sm] { | |
max-height: 100%; | |
flex-wrap: wrap; | |
} | |
[layout-gt-sm="column"] > [flex-gt-sm], | |
[layout="column"] > [flex-gt-sm] { | |
max-width: 100%; | |
flex-wrap: wrap; | |
} | |
[layout="row"] > [flex-gt-sm="5"], | |
[layout-gt-sm="row"] > [flex-gt-sm="5"], | |
[flex-gt-sm="5"] { | |
flex: 1 1 5%; | |
max-width: 5%; | |
} | |
[layout="column"] > [flex-gt-sm="5"], | |
[layout-gt-sm="column"] > [flex-gt-sm="5"] { | |
flex: 1 1 5%; | |
max-height: 5%; | |
} | |
[layout="row"] > [flex-gt-sm="10"], | |
[layout-gt-sm="row"] > [flex-gt-sm="10"], | |
[flex-gt-sm="10"] { | |
flex: 1 1 10%; | |
max-width: 10%; | |
} | |
[layout="column"] > [flex-gt-sm="10"], | |
[layout-gt-sm="column"] > [flex-gt-sm="10"] { | |
flex: 1 1 10%; | |
max-height: 10%; | |
} | |
[layout="row"] > [flex-gt-sm="15"], | |
[layout-gt-sm="row"] > [flex-gt-sm="15"], | |
[flex-gt-sm="15"] { | |
flex: 1 1 15%; | |
max-width: 15%; | |
} | |
[layout="column"] > [flex-gt-sm="15"], | |
[layout-gt-sm="column"] > [flex-gt-sm="15"] { | |
flex: 1 1 15%; | |
max-height: 15%; | |
} | |
[layout="row"] > [flex-gt-sm="20"], | |
[layout-gt-sm="row"] > [flex-gt-sm="20"], | |
[flex-gt-sm="20"] { | |
flex: 1 1 20%; | |
max-width: 20%; | |
} | |
[layout="column"] > [flex-gt-sm="20"], | |
[layout-gt-sm="column"] > [flex-gt-sm="20"] { | |
flex: 1 1 20%; | |
max-height: 20%; | |
} | |
[layout="row"] > [flex-gt-sm="25"], | |
[layout-gt-sm="row"] > [flex-gt-sm="25"], | |
[flex-gt-sm="25"] { | |
flex: 1 1 25%; | |
max-width: 25%; | |
} | |
[layout="column"] > [flex-gt-sm="25"], | |
[layout-gt-sm="column"] > [flex-gt-sm="25"] { | |
flex: 1 1 25%; | |
max-height: 25%; | |
} | |
[layout="row"] > [flex-gt-sm="30"], | |
[layout-gt-sm="row"] > [flex-gt-sm="30"], | |
[flex-gt-sm="30"] { | |
flex: 1 1 30%; | |
max-width: 30%; | |
} | |
[layout="column"] > [flex-gt-sm="30"], | |
[layout-gt-sm="column"] > [flex-gt-sm="30"] { | |
flex: 1 1 30%; | |
max-height: 30%; | |
} | |
[layout="row"] > [flex-gt-sm="35"], | |
[layout-gt-sm="row"] > [flex-gt-sm="35"], | |
[flex-gt-sm="35"] { | |
flex: 1 1 35%; | |
max-width: 35%; | |
} | |
[layout="column"] > [flex-gt-sm="35"], | |
[layout-gt-sm="column"] > [flex-gt-sm="35"] { | |
flex: 1 1 35%; | |
max-height: 35%; | |
} | |
[layout="row"] > [flex-gt-sm="40"], | |
[layout-gt-sm="row"] > [flex-gt-sm="40"], | |
[flex-gt-sm="40"] { | |
flex: 1 1 40%; | |
max-width: 40%; | |
} | |
[layout="column"] > [flex-gt-sm="40"], | |
[layout-gt-sm="column"] > [flex-gt-sm="40"] { | |
flex: 1 1 40%; | |
max-height: 40%; | |
} | |
[layout="row"] > [flex-gt-sm="45"], | |
[layout-gt-sm="row"] > [flex-gt-sm="45"], | |
[flex-gt-sm="45"] { | |
flex: 1 1 45%; | |
max-width: 45%; | |
} | |
[layout="column"] > [flex-gt-sm="45"], | |
[layout-gt-sm="column"] > [flex-gt-sm="45"] { | |
flex: 1 1 45%; | |
max-height: 45%; | |
} | |
[layout="row"] > [flex-gt-sm="50"], | |
[layout-gt-sm="row"] > [flex-gt-sm="50"], | |
[flex-gt-sm="50"] { | |
flex: 1 1 50%; | |
max-width: 50%; | |
} | |
[layout="column"] > [flex-gt-sm="50"], | |
[layout-gt-sm="column"] > [flex-gt-sm="50"] { | |
flex: 1 1 50%; | |
max-height: 50%; | |
} | |
[layout="row"] > [flex-gt-sm="55"], | |
[layout-gt-sm="row"] > [flex-gt-sm="55"], | |
[flex-gt-sm="55"] { | |
flex: 1 1 55%; | |
max-width: 55%; | |
} | |
[layout="column"] > [flex-gt-sm="55"], | |
[layout-gt-sm="column"] > [flex-gt-sm="55"] { | |
flex: 1 1 55%; | |
max-height: 55%; | |
} | |
[layout="row"] > [flex-gt-sm="60"], | |
[layout-gt-sm="row"] > [flex-gt-sm="60"], | |
[flex-gt-sm="60"] { | |
flex: 1 1 60%; | |
max-width: 60%; | |
} | |
[layout="column"] > [flex-gt-sm="60"], | |
[layout-gt-sm="column"] > [flex-gt-sm="60"] { | |
flex: 1 1 60%; | |
max-height: 60%; | |
} | |
[layout="row"] > [flex-gt-sm="65"], | |
[layout-gt-sm="row"] > [flex-gt-sm="65"], | |
[flex-gt-sm="65"] { | |
flex: 1 1 65%; | |
max-width: 65%; | |
} | |
[layout="column"] > [flex-gt-sm="65"], | |
[layout-gt-sm="column"] > [flex-gt-sm="65"] { | |
flex: 1 1 65%; | |
max-height: 65%; | |
} | |
[layout="row"] > [flex-gt-sm="70"], | |
[layout-gt-sm="row"] > [flex-gt-sm="70"], | |
[flex-gt-sm="70"] { | |
flex: 1 1 70%; | |
max-width: 70%; | |
} | |
[layout="column"] > [flex-gt-sm="70"], | |
[layout-gt-sm="column"] > [flex-gt-sm="70"] { | |
flex: 1 1 70%; | |
max-height: 70%; | |
} | |
[layout="row"] > [flex-gt-sm="75"], | |
[layout-gt-sm="row"] > [flex-gt-sm="75"], | |
[flex-gt-sm="75"] { | |
flex: 1 1 75%; | |
max-width: 75%; | |
} | |
[layout="column"] > [flex-gt-sm="75"], | |
[layout-gt-sm="column"] > [flex-gt-sm="75"] { | |
flex: 1 1 75%; | |
max-height: 75%; | |
} | |
[layout="row"] > [flex-gt-sm="80"], | |
[layout-gt-sm="row"] > [flex-gt-sm="80"], | |
[flex-gt-sm="80"] { | |
flex: 1 1 80%; | |
max-width: 80%; | |
} | |
[layout="column"] > [flex-gt-sm="80"], | |
[layout-gt-sm="column"] > [flex-gt-sm="80"] { | |
flex: 1 1 80%; | |
max-height: 80%; | |
} | |
[layout="row"] > [flex-gt-sm="85"], | |
[layout-gt-sm="row"] > [flex-gt-sm="85"], | |
[flex-gt-sm="85"] { | |
flex: 1 1 85%; | |
max-width: 85%; | |
} | |
[layout="column"] > [flex-gt-sm="85"], | |
[layout-gt-sm="column"] > [flex-gt-sm="85"] { | |
flex: 1 1 85%; | |
max-height: 85%; | |
} | |
[layout="row"] > [flex-gt-sm="90"], | |
[layout-gt-sm="row"] > [flex-gt-sm="90"], | |
[flex-gt-sm="90"] { | |
flex: 1 1 90%; | |
max-width: 90%; | |
} | |
[layout="column"] > [flex-gt-sm="90"], | |
[layout-gt-sm="column"] > [flex-gt-sm="90"] { | |
flex: 1 1 90%; | |
max-height: 90%; | |
} | |
[layout="row"] > [flex-gt-sm="95"], | |
[layout-gt-sm="row"] > [flex-gt-sm="95"], | |
[flex-gt-sm="95"] { | |
flex: 1 1 95%; | |
max-width: 95%; | |
} | |
[layout="column"] > [flex-gt-sm="95"], | |
[layout-gt-sm="column"] > [flex-gt-sm="95"] { | |
flex: 1 1 95%; | |
max-height: 95%; | |
} | |
[layout="row"] > [flex-gt-sm="100"], | |
[layout-gt-sm="row"] > [flex-gt-sm="100"], | |
[flex-gt-sm="100"] { | |
flex: 1 1 100%; | |
max-width: 100%; | |
} | |
[layout="column"] > [flex-gt-sm="100"], | |
[layout-gt-sm="column"] > [flex-gt-sm="100"] { | |
flex: 1 1 100%; | |
max-height: 100%; | |
} | |
[layout="row"] > [flex-gt-sm="33"], [layout-gt-sm="row"] > [flex-gt-sm="33"] { | |
flex: 1 1 33.33%; | |
max-width: 33.33%; | |
} | |
[layout="row"] > [flex-gt-sm="66"], [layout-gt-sm="row"] > [flex-gt-sm="66"] { | |
flex: 1 1 66.66%; | |
max-width: 66.66%; | |
} | |
[layout="column"] > [flex-gt-sm="33"], [layout-gt-sm="column"] > [flex-gt-sm="33"] { | |
flex: 1 1 33.33%; | |
max-height: 33.33%; | |
} | |
[layout="column"] > [flex-gt-sm="66"], [layout-gt-sm="column"] > [flex-gt-sm="66"] { | |
flex: 1 1 66.66%; | |
max-height: 66.66%; | |
} | |
[layout-gt-sm] { | |
display: flex; | |
} | |
[layout-gt-sm] > * { | |
box-sizing: border-box; | |
} | |
[layout-gt-sm="column"] { | |
flex-direction: column; | |
} | |
[layout-gt-sm="row"] { | |
flex-direction: row; | |
} | |
} | |
/* md */ | |
@media (min-width: 600px) and (max-width: 959px) { | |
[flex-offset-md="0"] { | |
margin-left: 0%; | |
} | |
[flex-offset-md="5"] { | |
margin-left: 5%; | |
} | |
[flex-offset-md="10"] { | |
margin-left: 10%; | |
} | |
[flex-offset-md="15"] { | |
margin-left: 15%; | |
} | |
[flex-offset-md="20"] { | |
margin-left: 20%; | |
} | |
[flex-offset-md="25"] { | |
margin-left: 25%; | |
} | |
[flex-offset-md="30"] { | |
margin-left: 30%; | |
} | |
[flex-offset-md="35"] { | |
margin-left: 35%; | |
} | |
[flex-offset-md="40"] { | |
margin-left: 40%; | |
} | |
[flex-offset-md="45"] { | |
margin-left: 45%; | |
} | |
[flex-offset-md="50"] { | |
margin-left: 50%; | |
} | |
[flex-offset-md="55"] { | |
margin-left: 55%; | |
} | |
[flex-offset-md="60"] { | |
margin-left: 60%; | |
} | |
[flex-offset-md="65"] { | |
margin-left: 65%; | |
} | |
[flex-offset-md="70"] { | |
margin-left: 70%; | |
} | |
[flex-offset-md="75"] { | |
margin-left: 75%; | |
} | |
[flex-offset-md="80"] { | |
margin-left: 80%; | |
} | |
[flex-offset-md="85"] { | |
margin-left: 85%; | |
} | |
[flex-offset-md="90"] { | |
margin-left: 90%; | |
} | |
[flex-offset-md="95"] { | |
margin-left: 95%; | |
} | |
[flex-offset-md="33"] { | |
margin-left: calc(100% / 3); | |
} | |
[flex-offset-md="66"] { | |
margin-left: calc(200% / 3); | |
} | |
[layout-align-md] { | |
justify-content: flex-start; | |
align-content: stretch; | |
align-items: stretch; | |
} | |
[layout-align-md^="start"] { | |
justify-content: flex-start; | |
} | |
[layout-align-md^="center"] { | |
justify-content: center; | |
} | |
[layout-align-md^="end"] { | |
justify-content: flex-end; | |
} | |
[layout-align-md^="space-around"] { | |
justify-content: space-around; | |
} | |
[layout-align-md^="space-between"] { | |
justify-content: space-between; | |
} | |
[layout-align-md$="start"] { | |
align-items: flex-start; | |
align-content: flex-start; | |
} | |
[layout-align-md$="center"] { | |
align-items: center; | |
align-content: center; | |
max-width: 100%; | |
} | |
[layout-align-md$="center"] > * { | |
max-width: 100%; | |
} | |
[layout-align-md$="end"] { | |
align-items: flex-end; | |
align-content: flex-end; | |
} | |
[layout-align-md="start"], | |
[layout-align-md="end"], | |
[layout-align-md="center"], | |
[layout-align-md="space-around"], | |
[layout-align-md="space-between"] { | |
align-items: stretch; | |
align-content: stretch; | |
} | |
[flex-order-md="0"] { | |
order: 0; | |
} | |
[flex-order-md="1"] { | |
order: 1; | |
} | |
[flex-order-md="2"] { | |
order: 2; | |
} | |
[flex-order-md="3"] { | |
order: 3; | |
} | |
[flex-order-md="4"] { | |
order: 4; | |
} | |
[flex-order-md="5"] { | |
order: 5; | |
} | |
[flex-order-md="6"] { | |
order: 6; | |
} | |
[flex-order-md="7"] { | |
order: 7; | |
} | |
[flex-order-md="8"] { | |
order: 8; | |
} | |
[flex-order-md="9"] { | |
order: 9; | |
} | |
[flex-order-md="10"] { | |
order: 10; | |
} | |
[flex-order-md="11"] { | |
order: 11; | |
} | |
[flex-order-md="12"] { | |
order: 12; | |
} | |
[flex-order-md="13"] { | |
order: 13; | |
} | |
[flex-order-md="14"] { | |
order: 14; | |
} | |
[flex-order-md="15"] { | |
order: 15; | |
} | |
[flex-order-md="16"] { | |
order: 16; | |
} | |
[flex-order-md="17"] { | |
order: 17; | |
} | |
[flex-order-md="18"] { | |
order: 18; | |
} | |
[flex-order-md="19"] { | |
order: 19; | |
} | |
[flex-order-md="20"] { | |
order: 20; | |
} | |
[flex-md] { | |
flex: 1; | |
} | |
} | |
@media screen\0 and (min-width: 600px) and (max-width: 959px) { | |
[flex-md] { | |
flex: 1 1 0%; | |
} | |
} | |
@media (min-width: 600px) and (max-width: 959px) { | |
[flex-md-start] { | |
margin-bottom: auto; | |
} | |
[flex-md-end] { | |
margin-top: auto; | |
} | |
[flex-md-none] { | |
flex: 0 0 auto; | |
} | |
[flex-md-initial] { | |
flex: 0 1 auto; | |
} | |
[flex-md-noshrink] { | |
flex: 1 0 auto; | |
} | |
[flex-md-auto] { | |
flex: 1 1 auto; | |
} | |
[flex-md-grow] { | |
flex: 1 1 100%; | |
} | |
[flex-md], | |
[layout="row"] > [flex-md], | |
[layout-md="row"] > [flex-md] { | |
max-height: 100%; | |
flex-wrap: wrap; | |
} | |
[layout-md="column"] > [flex-md], | |
[layout="column"] > [flex-md] { | |
max-width: 100%; | |
flex-wrap: wrap; | |
} | |
[layout="row"] > [flex-md="5"], | |
[layout-md="row"] > [flex-md="5"], | |
[flex-md="5"] { | |
flex: 1 1 5%; | |
max-width: 5%; | |
} | |
[layout="column"] > [flex-md="5"], | |
[layout-md="column"] > [flex-md="5"] { | |
flex: 1 1 5%; | |
max-height: 5%; | |
} | |
[layout="row"] > [flex-md="10"], | |
[layout-md="row"] > [flex-md="10"], | |
[flex-md="10"] { | |
flex: 1 1 10%; | |
max-width: 10%; | |
} | |
[layout="column"] > [flex-md="10"], | |
[layout-md="column"] > [flex-md="10"] { | |
flex: 1 1 10%; | |
max-height: 10%; | |
} | |
[layout="row"] > [flex-md="15"], | |
[layout-md="row"] > [flex-md="15"], | |
[flex-md="15"] { | |
flex: 1 1 15%; | |
max-width: 15%; | |
} | |
[layout="column"] > [flex-md="15"], | |
[layout-md="column"] > [flex-md="15"] { | |
flex: 1 1 15%; | |
max-height: 15%; | |
} | |
[layout="row"] > [flex-md="20"], | |
[layout-md="row"] > [flex-md="20"], | |
[flex-md="20"] { | |
flex: 1 1 20%; | |
max-width: 20%; | |
} | |
[layout="column"] > [flex-md="20"], | |
[layout-md="column"] > [flex-md="20"] { | |
flex: 1 1 20%; | |
max-height: 20%; | |
} | |
[layout="row"] > [flex-md="25"], | |
[layout-md="row"] > [flex-md="25"], | |
[flex-md="25"] { | |
flex: 1 1 25%; | |
max-width: 25%; | |
} | |
[layout="column"] > [flex-md="25"], | |
[layout-md="column"] > [flex-md="25"] { | |
flex: 1 1 25%; | |
max-height: 25%; | |
} | |
[layout="row"] > [flex-md="30"], | |
[layout-md="row"] > [flex-md="30"], | |
[flex-md="30"] { | |
flex: 1 1 30%; | |
max-width: 30%; | |
} | |
[layout="column"] > [flex-md="30"], | |
[layout-md="column"] > [flex-md="30"] { | |
flex: 1 1 30%; | |
max-height: 30%; | |
} | |
[layout="row"] > [flex-md="35"], | |
[layout-md="row"] > [flex-md="35"], | |
[flex-md="35"] { | |
flex: 1 1 35%; | |
max-width: 35%; | |
} | |
[layout="column"] > [flex-md="35"], | |
[layout-md="column"] > [flex-md="35"] { | |
flex: 1 1 35%; | |
max-height: 35%; | |
} | |
[layout="row"] > [flex-md="40"], | |
[layout-md="row"] > [flex-md="40"], | |
[flex-md="40"] { | |
flex: 1 1 40%; | |
max-width: 40%; | |
} | |
[layout="column"] > [flex-md="40"], | |
[layout-md="column"] > [flex-md="40"] { | |
flex: 1 1 40%; | |
max-height: 40%; | |
} | |
[layout="row"] > [flex-md="45"], | |
[layout-md="row"] > [flex-md="45"], | |
[flex-md="45"] { | |
flex: 1 1 45%; | |
max-width: 45%; | |
} | |
[layout="column"] > [flex-md="45"], | |
[layout-md="column"] > [flex-md="45"] { | |
flex: 1 1 45%; | |
max-height: 45%; | |
} | |
[layout="row"] > [flex-md="50"], | |
[layout-md="row"] > [flex-md="50"], | |
[flex-md="50"] { | |
flex: 1 1 50%; | |
max-width: 50%; | |
} | |
[layout="column"] > [flex-md="50"], | |
[layout-md="column"] > [flex-md="50"] { | |
flex: 1 1 50%; | |
max-height: 50%; | |
} | |
[layout="row"] > [flex-md="55"], | |
[layout-md="row"] > [flex-md="55"], | |
[flex-md="55"] { | |
flex: 1 1 55%; | |
max-width: 55%; | |
} | |
[layout="column"] > [flex-md="55"], | |
[layout-md="column"] > [flex-md="55"] { | |
flex: 1 1 55%; | |
max-height: 55%; | |
} | |
[layout="row"] > [flex-md="60"], | |
[layout-md="row"] > [flex-md="60"], | |
[flex-md="60"] { | |
flex: 1 1 60%; | |
max-width: 60%; | |
} | |
[layout="column"] > [flex-md="60"], | |
[layout-md="column"] > [flex-md="60"] { | |
flex: 1 1 60%; | |
max-height: 60%; | |
} | |
[layout="row"] > [flex-md="65"], | |
[layout-md="row"] > [flex-md="65"], | |
[flex-md="65"] { | |
flex: 1 1 65%; | |
max-width: 65%; | |
} | |
[layout="column"] > [flex-md="65"], | |
[layout-md="column"] > [flex-md="65"] { | |
flex: 1 1 65%; | |
max-height: 65%; | |
} | |
[layout="row"] > [flex-md="70"], | |
[layout-md="row"] > [flex-md="70"], | |
[flex-md="70"] { | |
flex: 1 1 70%; | |
max-width: 70%; | |
} | |
[layout="column"] > [flex-md="70"], | |
[layout-md="column"] > [flex-md="70"] { | |
flex: 1 1 70%; | |
max-height: 70%; | |
} | |
[layout="row"] > [flex-md="75"], | |
[layout-md="row"] > [flex-md="75"], | |
[flex-md="75"] { | |
flex: 1 1 75%; | |
max-width: 75%; | |
} | |
[layout="column"] > [flex-md="75"], | |
[layout-md="column"] > [flex-md="75"] { | |
flex: 1 1 75%; | |
max-height: 75%; | |
} | |
[layout="row"] > [flex-md="80"], | |
[layout-md="row"] > [flex-md="80"], | |
[flex-md="80"] { | |
flex: 1 1 80%; | |
max-width: 80%; | |
} | |
[layout="column"] > [flex-md="80"], | |
[layout-md="column"] > [flex-md="80"] { | |
flex: 1 1 80%; | |
max-height: 80%; | |
} | |
[layout="row"] > [flex-md="85"], | |
[layout-md="row"] > [flex-md="85"], | |
[flex-md="85"] { | |
flex: 1 1 85%; | |
max-width: 85%; | |
} | |
[layout="column"] > [flex-md="85"], | |
[layout-md="column"] > [flex-md="85"] { | |
flex: 1 1 85%; | |
max-height: 85%; | |
} | |
[layout="row"] > [flex-md="90"], | |
[layout-md="row"] > [flex-md="90"], | |
[flex-md="90"] { | |
flex: 1 1 90%; | |
max-width: 90%; | |
} | |
[layout="column"] > [flex-md="90"], | |
[layout-md="column"] > [flex-md="90"] { | |
flex: 1 1 90%; | |
max-height: 90%; | |
} | |
[layout="row"] > [flex-md="95"], | |
[layout-md="row"] > [flex-md="95"], | |
[flex-md="95"] { | |
flex: 1 1 95%; | |
max-width: 95%; | |
} | |
[layout="column"] > [flex-md="95"], | |
[layout-md="column"] > [flex-md="95"] { | |
flex: 1 1 95%; | |
max-height: 95%; | |
} | |
[layout="row"] > [flex-md="100"], | |
[layout-md="row"] > [flex-md="100"], | |
[flex-md="100"] { | |
flex: 1 1 100%; | |
max-width: 100%; | |
} | |
[layout="column"] > [flex-md="100"], | |
[layout-md="column"] > [flex-md="100"] { | |
flex: 1 1 100%; | |
max-height: 100%; | |
} | |
[layout="row"] > [flex-md="33"], [layout-md="row"] > [flex-md="33"] { | |
flex: 1 1 33.33%; | |
max-width: 33.33%; | |
} | |
[layout="row"] > [flex-md="66"], [layout-md="row"] > [flex-md="66"] { | |
flex: 1 1 66.66%; | |
max-width: 66.66%; | |
} | |
[layout="column"] > [flex-md="33"], [layout-md="column"] > [flex-md="33"] { | |
flex: 1 1 33.33%; | |
max-height: 33.33%; | |
} | |
[layout="column"] > [flex-md="66"], [layout-md="column"] > [flex-md="66"] { | |
flex: 1 1 66.66%; | |
max-height: 66.66%; | |
} | |
[layout-md] { | |
display: flex; | |
} | |
[layout-md] > * { | |
box-sizing: border-box; | |
} | |
[layout-md="column"] { | |
flex-direction: column; | |
} | |
[layout-md="row"] { | |
flex-direction: row; | |
} | |
} | |
@media (min-width: 960px) { | |
[flex-offset-gt-md="0"] { | |
margin-left: 0%; | |
} | |
[flex-offset-gt-md="5"] { | |
margin-left: 5%; | |
} | |
[flex-offset-gt-md="10"] { | |
margin-left: 10%; | |
} | |
[flex-offset-gt-md="15"] { | |
margin-left: 15%; | |
} | |
[flex-offset-gt-md="20"] { | |
margin-left: 20%; | |
} | |
[flex-offset-gt-md="25"] { | |
margin-left: 25%; | |
} | |
[flex-offset-gt-md="30"] { | |
margin-left: 30%; | |
} | |
[flex-offset-gt-md="35"] { | |
margin-left: 35%; | |
} | |
[flex-offset-gt-md="40"] { | |
margin-left: 40%; | |
} | |
[flex-offset-gt-md="45"] { | |
margin-left: 45%; | |
} | |
[flex-offset-gt-md="50"] { | |
margin-left: 50%; | |
} | |
[flex-offset-gt-md="55"] { | |
margin-left: 55%; | |
} | |
[flex-offset-gt-md="60"] { | |
margin-left: 60%; | |
} | |
[flex-offset-gt-md="65"] { | |
margin-left: 65%; | |
} | |
[flex-offset-gt-md="70"] { | |
margin-left: 70%; | |
} | |
[flex-offset-gt-md="75"] { | |
margin-left: 75%; | |
} | |
[flex-offset-gt-md="80"] { | |
margin-left: 80%; | |
} | |
[flex-offset-gt-md="85"] { | |
margin-left: 85%; | |
} | |
[flex-offset-gt-md="90"] { | |
margin-left: 90%; | |
} | |
[flex-offset-gt-md="95"] { | |
margin-left: 95%; | |
} | |
[flex-offset-gt-md="33"] { | |
margin-left: calc(100% / 3); | |
} | |
[flex-offset-gt-md="66"] { | |
margin-left: calc(200% / 3); | |
} | |
[layout-align-gt-md] { | |
justify-content: flex-start; | |
align-content: stretch; | |
align-items: stretch; | |
} | |
[layout-align-gt-md^="start"] { | |
justify-content: flex-start; | |
} | |
[layout-align-gt-md^="center"] { | |
justify-content: center; | |
} | |
[layout-align-gt-md^="end"] { | |
justify-content: flex-end; | |
} | |
[layout-align-gt-md^="space-around"] { | |
justify-content: space-around; | |
} | |
[layout-align-gt-md^="space-between"] { | |
justify-content: space-between; | |
} | |
[layout-align-gt-md$="start"] { | |
align-items: flex-start; | |
align-content: flex-start; | |
} | |
[layout-align-gt-md$="center"] { | |
align-items: center; | |
align-content: center; | |
max-width: 100%; | |
} | |
[layout-align-gt-md$="center"] > * { | |
max-width: 100%; | |
} | |
[layout-align-gt-md$="end"] { | |
align-items: flex-end; | |
align-content: flex-end; | |
} | |
[layout-align-gt-md="start"], | |
[layout-align-gt-md="end"], | |
[layout-align-gt-md="center"], | |
[layout-align-gt-md="space-around"], | |
[layout-align-gt-md="space-between"] { | |
align-items: stretch; | |
align-content: stretch; | |
} | |
[flex-order-gt-md="0"] { | |
order: 0; | |
} | |
[flex-order-gt-md="1"] { | |
order: 1; | |
} | |
[flex-order-gt-md="2"] { | |
order: 2; | |
} | |
[flex-order-gt-md="3"] { | |
order: 3; | |
} | |
[flex-order-gt-md="4"] { | |
order: 4; | |
} | |
[flex-order-gt-md="5"] { | |
order: 5; | |
} | |
[flex-order-gt-md="6"] { | |
order: 6; | |
} | |
[flex-order-gt-md="7"] { | |
order: 7; | |
} | |
[flex-order-gt-md="8"] { | |
order: 8; | |
} | |
[flex-order-gt-md="9"] { | |
order: 9; | |
} | |
[flex-order-gt-md="10"] { | |
order: 10; | |
} | |
[flex-order-gt-md="11"] { | |
order: 11; | |
} | |
[flex-order-gt-md="12"] { | |
order: 12; | |
} | |
[flex-order-gt-md="13"] { | |
order: 13; | |
} | |
[flex-order-gt-md="14"] { | |
order: 14; | |
} | |
[flex-order-gt-md="15"] { | |
order: 15; | |
} | |
[flex-order-gt-md="16"] { | |
order: 16; | |
} | |
[flex-order-gt-md="17"] { | |
order: 17; | |
} | |
[flex-order-gt-md="18"] { | |
order: 18; | |
} | |
[flex-order-gt-md="19"] { | |
order: 19; | |
} | |
[flex-order-gt-md="20"] { | |
order: 20; | |
} | |
[flex-gt-md] { | |
flex: 1; | |
} | |
} | |
@media screen\0 and (min-width: 960px) { | |
[flex-gt-md] { | |
flex: 1 1 0%; | |
} | |
} | |
@media (min-width: 960px) { | |
[flex-gt-md-start] { | |
margin-bottom: auto; | |
} | |
[flex-gt-md-end] { | |
margin-top: auto; | |
} | |
[flex-gt-md-none] { | |
flex: 0 0 auto; | |
} | |
[flex-gt-md-initial] { | |
flex: 0 1 auto; | |
} | |
[flex-gt-md-noshrink] { | |
flex: 1 0 auto; | |
} | |
[flex-gt-md-auto] { | |
flex: 1 1 auto; | |
} | |
[flex-gt-md-grow] { | |
flex: 1 1 100%; | |
} | |
[flex-gt-md], | |
[layout="row"] > [flex-gt-md], | |
[layout-gt-md="row"] > [flex-gt-md] { | |
max-height: 100%; | |
flex-wrap: wrap; | |
} | |
[layout-gt-md="column"] > [flex-gt-md], | |
[layout="column"] > [flex-gt-md] { | |
max-width: 100%; | |
flex-wrap: wrap; | |
} | |
[layout="row"] > [flex-gt-md="5"], | |
[layout-gt-md="row"] > [flex-gt-md="5"], | |
[flex-gt-md="5"] { | |
flex: 1 1 5%; | |
max-width: 5%; | |
} | |
[layout="column"] > [flex-gt-md="5"], | |
[layout-gt-md="column"] > [flex-gt-md="5"] { | |
flex: 1 1 5%; | |
max-height: 5%; | |
} | |
[layout="row"] > [flex-gt-md="10"], | |
[layout-gt-md="row"] > [flex-gt-md="10"], | |
[flex-gt-md="10"] { | |
flex: 1 1 10%; | |
max-width: 10%; | |
} | |
[layout="column"] > [flex-gt-md="10"], | |
[layout-gt-md="column"] > [flex-gt-md="10"] { | |
flex: 1 1 10%; | |
max-height: 10%; | |
} | |
[layout="row"] > [flex-gt-md="15"], | |
[layout-gt-md="row"] > [flex-gt-md="15"], | |
[flex-gt-md="15"] { | |
flex: 1 1 15%; | |
max-width: 15%; | |
} | |
[layout="column"] > [flex-gt-md="15"], | |
[layout-gt-md="column"] > [flex-gt-md="15"] { | |
flex: 1 1 15%; | |
max-height: 15%; | |
} | |
[layout="row"] > [flex-gt-md="20"], | |
[layout-gt-md="row"] > [flex-gt-md="20"], | |
[flex-gt-md="20"] { | |
flex: 1 1 20%; | |
max-width: 20%; | |
} | |
[layout="column"] > [flex-gt-md="20"], | |
[layout-gt-md="column"] > [flex-gt-md="20"] { | |
flex: 1 1 20%; | |
max-height: 20%; | |
} | |
[layout="row"] > [flex-gt-md="25"], | |
[layout-gt-md="row"] > [flex-gt-md="25"], | |
[flex-gt-md="25"] { | |
flex: 1 1 25%; | |
max-width: 25%; | |
} | |
[layout="column"] > [flex-gt-md="25"], | |
[layout-gt-md="column"] > [flex-gt-md="25"] { | |
flex: 1 1 25%; | |
max-height: 25%; | |
} | |
[layout="row"] > [flex-gt-md="30"], | |
[layout-gt-md="row"] > [flex-gt-md="30"], | |
[flex-gt-md="30"] { | |
flex: 1 1 30%; | |
max-width: 30%; | |
} | |
[layout="column"] > [flex-gt-md="30"], | |
[layout-gt-md="column"] > [flex-gt-md="30"] { | |
flex: 1 1 30%; | |
max-height: 30%; | |
} | |
[layout="row"] > [flex-gt-md="35"], | |
[layout-gt-md="row"] > [flex-gt-md="35"], | |
[flex-gt-md="35"] { | |
flex: 1 1 35%; | |
max-width: 35%; | |
} | |
[layout="column"] > [flex-gt-md="35"], | |
[layout-gt-md="column"] > [flex-gt-md="35"] { | |
flex: 1 1 35%; | |
max-height: 35%; | |
} | |
[layout="row"] > [flex-gt-md="40"], | |
[layout-gt-md="row"] > [flex-gt-md="40"], | |
[flex-gt-md="40"] { | |
flex: 1 1 40%; | |
max-width: 40%; | |
} | |
[layout="column"] > [flex-gt-md="40"], | |
[layout-gt-md="column"] > [flex-gt-md="40"] { | |
flex: 1 1 40%; | |
max-height: 40%; | |
} | |
[layout="row"] > [flex-gt-md="45"], | |
[layout-gt-md="row"] > [flex-gt-md="45"], | |
[flex-gt-md="45"] { | |
flex: 1 1 45%; | |
max-width: 45%; | |
} | |
[layout="column"] > [flex-gt-md="45"], | |
[layout-gt-md="column"] > [flex-gt-md="45"] { | |
flex: 1 1 45%; | |
max-height: 45%; | |
} | |
[layout="row"] > [flex-gt-md="50"], | |
[layout-gt-md="row"] > [flex-gt-md="50"], | |
[flex-gt-md="50"] { | |
flex: 1 1 50%; | |
max-width: 50%; | |
} | |
[layout="column"] > [flex-gt-md="50"], | |
[layout-gt-md="column"] > [flex-gt-md="50"] { | |
flex: 1 1 50%; | |
max-height: 50%; | |
} | |
[layout="row"] > [flex-gt-md="55"], | |
[layout-gt-md="row"] > [flex-gt-md="55"], | |
[flex-gt-md="55"] { | |
flex: 1 1 55%; | |
max-width: 55%; | |
} | |
[layout="column"] > [flex-gt-md="55"], | |
[layout-gt-md="column"] > [flex-gt-md="55"] { | |
flex: 1 1 55%; | |
max-height: 55%; | |
} | |
[layout="row"] > [flex-gt-md="60"], | |
[layout-gt-md="row"] > [flex-gt-md="60"], | |
[flex-gt-md="60"] { | |
flex: 1 1 60%; | |
max-width: 60%; | |
} | |
[layout="column"] > [flex-gt-md="60"], | |
[layout-gt-md="column"] > [flex-gt-md="60"] { | |
flex: 1 1 60%; | |
max-height: 60%; | |
} | |
[layout="row"] > [flex-gt-md="65"], | |
[layout-gt-md="row"] > [flex-gt-md="65"], | |
[flex-gt-md="65"] { | |
flex: 1 1 65%; | |
max-width: 65%; | |
} | |
[layout="column"] > [flex-gt-md="65"], | |
[layout-gt-md="column"] > [flex-gt-md="65"] { | |
flex: 1 1 65%; | |
max-height: 65%; | |
} | |
[layout="row"] > [flex-gt-md="70"], | |
[layout-gt-md="row"] > [flex-gt-md="70"], | |
[flex-gt-md="70"] { | |
flex: 1 1 70%; | |
max-width: 70%; | |
} | |
[layout="column"] > [flex-gt-md="70"], | |
[layout-gt-md="column"] > [flex-gt-md="70"] { | |
flex: 1 1 70%; | |
max-height: 70%; | |
} | |
[layout="row"] > [flex-gt-md="75"], | |
[layout-gt-md="row"] > [flex-gt-md="75"], | |
[flex-gt-md="75"] { | |
flex: 1 1 75%; | |
max-width: 75%; | |
} | |
[layout="column"] > [flex-gt-md="75"], | |
[layout-gt-md="column"] > [flex-gt-md="75"] { | |
flex: 1 1 75%; | |
max-height: 75%; | |
} | |
[layout="row"] > [flex-gt-md="80"], | |
[layout-gt-md="row"] > [flex-gt-md="80"], | |
[flex-gt-md="80"] { | |
flex: 1 1 80%; | |
max-width: 80%; | |
} | |
[layout="column"] > [flex-gt-md="80"], | |
[layout-gt-md="column"] > [flex-gt-md="80"] { | |
flex: 1 1 80%; | |
max-height: 80%; | |
} | |
[layout="row"] > [flex-gt-md="85"], | |
[layout-gt-md="row"] > [flex-gt-md="85"], | |
[flex-gt-md="85"] { | |
flex: 1 1 85%; | |
max-width: 85%; | |
} | |
[layout="column"] > [flex-gt-md="85"], | |
[layout-gt-md="column"] > [flex-gt-md="85"] { | |
flex: 1 1 85%; | |
max-height: 85%; | |
} | |
[layout="row"] > [flex-gt-md="90"], | |
[layout-gt-md="row"] > [flex-gt-md="90"], | |
[flex-gt-md="90"] { | |
flex: 1 1 90%; | |
max-width: 90%; | |
} | |
[layout="column"] > [flex-gt-md="90"], | |
[layout-gt-md="column"] > [flex-gt-md="90"] { | |
flex: 1 1 90%; | |
max-height: 90%; | |
} | |
[layout="row"] > [flex-gt-md="95"], | |
[layout-gt-md="row"] > [flex-gt-md="95"], | |
[flex-gt-md="95"] { | |
flex: 1 1 95%; | |
max-width: 95%; | |
} | |
[layout="column"] > [flex-gt-md="95"], | |
[layout-gt-md="column"] > [flex-gt-md="95"] { | |
flex: 1 1 95%; | |
max-height: 95%; | |
} | |
[layout="row"] > [flex-gt-md="100"], | |
[layout-gt-md="row"] > [flex-gt-md="100"], | |
[flex-gt-md="100"] { | |
flex: 1 1 100%; | |
max-width: 100%; | |
} | |
[layout="column"] > [flex-gt-md="100"], | |
[layout-gt-md="column"] > [flex-gt-md="100"] { | |
flex: 1 1 100%; | |
max-height: 100%; | |
} | |
[layout="row"] > [flex-gt-md="33"], [layout-gt-md="row"] > [flex-gt-md="33"] { | |
flex: 1 1 33.33%; | |
max-width: 33.33%; | |
} | |
[layout="row"] > [flex-gt-md="66"], [layout-gt-md="row"] > [flex-gt-md="66"] { | |
flex: 1 1 66.66%; | |
max-width: 66.66%; | |
} | |
[layout="column"] > [flex-gt-md="33"], [layout-gt-md="column"] > [flex-gt-md="33"] { | |
flex: 1 1 33.33%; | |
max-height: 33.33%; | |
} | |
[layout="column"] > [flex-gt-md="66"], [layout-gt-md="column"] > [flex-gt-md="66"] { | |
flex: 1 1 66.66%; | |
max-height: 66.66%; | |
} | |
[layout-gt-md] { | |
display: flex; | |
} | |
[layout-gt-md] > * { | |
box-sizing: border-box; | |
} | |
[layout-gt-md="column"] { | |
flex-direction: column; | |
} | |
[layout-gt-md="row"] { | |
flex-direction: row; | |
} | |
} | |
/* lg */ | |
@media (min-width: 960px) and (max-width: 1199px) { | |
[flex-offset-lg="0"] { | |
margin-left: 0%; | |
} | |
[flex-offset-lg="5"] { | |
margin-left: 5%; | |
} | |
[flex-offset-lg="10"] { | |
margin-left: 10%; | |
} | |
[flex-offset-lg="15"] { | |
margin-left: 15%; | |
} | |
[flex-offset-lg="20"] { | |
margin-left: 20%; | |
} | |
[flex-offset-lg="25"] { | |
margin-left: 25%; | |
} | |
[flex-offset-lg="30"] { | |
margin-left: 30%; | |
} | |
[flex-offset-lg="35"] { | |
margin-left: 35%; | |
} | |
[flex-offset-lg="40"] { | |
margin-left: 40%; | |
} | |
[flex-offset-lg="45"] { | |
margin-left: 45%; | |
} | |
[flex-offset-lg="50"] { | |
margin-left: 50%; | |
} | |
[flex-offset-lg="55"] { | |
margin-left: 55%; | |
} | |
[flex-offset-lg="60"] { | |
margin-left: 60%; | |
} | |
[flex-offset-lg="65"] { | |
margin-left: 65%; | |
} | |
[flex-offset-lg="70"] { | |
margin-left: 70%; | |
} | |
[flex-offset-lg="75"] { | |
margin-left: 75%; | |
} | |
[flex-offset-lg="80"] { | |
margin-left: 80%; | |
} | |
[flex-offset-lg="85"] { | |
margin-left: 85%; | |
} | |
[flex-offset-lg="90"] { | |
margin-left: 90%; | |
} | |
[flex-offset-lg="95"] { | |
margin-left: 95%; | |
} | |
[flex-offset-lg="33"] { | |
margin-left: calc(100% / 3); | |
} | |
[flex-offset-lg="66"] { | |
margin-left: calc(200% / 3); | |
} | |
[layout-align-lg] { | |
justify-content: flex-start; | |
align-content: stretch; | |
align-items: stretch; | |
} | |
[layout-align-lg^="start"] { | |
justify-content: flex-start; | |
} | |
[layout-align-lg^="center"] { | |
justify-content: center; | |
} | |
[layout-align-lg^="end"] { | |
justify-content: flex-end; | |
} | |
[layout-align-lg^="space-around"] { | |
justify-content: space-around; | |
} | |
[layout-align-lg^="space-between"] { | |
justify-content: space-between; | |
} | |
[layout-align-lg$="start"] { | |
align-items: flex-start; | |
align-content: flex-start; | |
} | |
[layout-align-lg$="center"] { | |
align-items: center; | |
align-content: center; | |
max-width: 100%; | |
} | |
[layout-align-lg$="center"] > * { | |
max-width: 100%; | |
} | |
[layout-align-lg$="end"] { | |
align-items: flex-end; | |
align-content: flex-end; | |
} | |
[layout-align-lg="start"], | |
[layout-align-lg="end"], | |
[layout-align-lg="center"], | |
[layout-align-lg="space-around"], | |
[layout-align-lg="space-between"] { | |
align-items: stretch; | |
align-content: stretch; | |
} | |
[flex-order-lg="0"] { | |
order: 0; | |
} | |
[flex-order-lg="1"] { | |
order: 1; | |
} | |
[flex-order-lg="2"] { | |
order: 2; | |
} | |
[flex-order-lg="3"] { | |
order: 3; | |
} | |
[flex-order-lg="4"] { | |
order: 4; | |
} | |
[flex-order-lg="5"] { | |
order: 5; | |
} | |
[flex-order-lg="6"] { | |
order: 6; | |
} | |
[flex-order-lg="7"] { | |
order: 7; | |
} | |
[flex-order-lg="8"] { | |
order: 8; | |
} | |
[flex-order-lg="9"] { | |
order: 9; | |
} | |
[flex-order-lg="10"] { | |
order: 10; | |
} | |
[flex-order-lg="11"] { | |
order: 11; | |
} | |
[flex-order-lg="12"] { | |
order: 12; | |
} | |
[flex-order-lg="13"] { | |
order: 13; | |
} | |
[flex-order-lg="14"] { | |
order: 14; | |
} | |
[flex-order-lg="15"] { | |
order: 15; | |
} | |
[flex-order-lg="16"] { | |
order: 16; | |
} | |
[flex-order-lg="17"] { | |
order: 17; | |
} | |
[flex-order-lg="18"] { | |
order: 18; | |
} | |
[flex-order-lg="19"] { | |
order: 19; | |
} | |
[flex-order-lg="20"] { | |
order: 20; | |
} | |
[flex-lg] { | |
flex: 1; | |
} | |
} | |
@media screen\0 and (min-width: 960px) and (max-width: 1199px) { | |
[flex-lg] { | |
flex: 1 1 0%; | |
} | |
} | |
@media (min-width: 960px) and (max-width: 1199px) { | |
[flex-lg-start] { | |
margin-bottom: auto; | |
} | |
[flex-lg-end] { | |
margin-top: auto; | |
} | |
[flex-lg-none] { | |
flex: 0 0 auto; | |
} | |
[flex-lg-initial] { | |
flex: 0 1 auto; | |
} | |
[flex-lg-noshrink] { | |
flex: 1 0 auto; | |
} | |
[flex-lg-auto] { | |
flex: 1 1 auto; | |
} | |
[flex-lg-grow] { | |
flex: 1 1 100%; | |
} | |
[flex-lg], | |
[layout="row"] > [flex-lg], | |
[layout-lg="row"] > [flex-lg] { | |
max-height: 100%; | |
flex-wrap: wrap; | |
} | |
[layout-lg="column"] > [flex-lg], | |
[layout="column"] > [flex-lg] { | |
max-width: 100%; | |
flex-wrap: wrap; | |
} | |
[layout="row"] > [flex-lg="5"], | |
[layout-lg="row"] > [flex-lg="5"], | |
[flex-lg="5"] { | |
flex: 1 1 5%; | |
max-width: 5%; | |
} | |
[layout="column"] > [flex-lg="5"], | |
[layout-lg="column"] > [flex-lg="5"] { | |
flex: 1 1 5%; | |
max-height: 5%; | |
} | |
[layout="row"] > [flex-lg="10"], | |
[layout-lg="row"] > [flex-lg="10"], | |
[flex-lg="10"] { | |
flex: 1 1 10%; | |
max-width: 10%; | |
} | |
[layout="column"] > [flex-lg="10"], | |
[layout-lg="column"] > [flex-lg="10"] { | |
flex: 1 1 10%; | |
max-height: 10%; | |
} | |
[layout="row"] > [flex-lg="15"], | |
[layout-lg="row"] > [flex-lg="15"], | |
[flex-lg="15"] { | |
flex: 1 1 15%; | |
max-width: 15%; | |
} | |
[layout="column"] > [flex-lg="15"], | |
[layout-lg="column"] > [flex-lg="15"] { | |
flex: 1 1 15%; | |
max-height: 15%; | |
} | |
[layout="row"] > [flex-lg="20"], | |
[layout-lg="row"] > [flex-lg="20"], | |
[flex-lg="20"] { | |
flex: 1 1 20%; | |
max-width: 20%; | |
} | |
[layout="column"] > [flex-lg="20"], | |
[layout-lg="column"] > [flex-lg="20"] { | |
flex: 1 1 20%; | |
max-height: 20%; | |
} | |
[layout="row"] > [flex-lg="25"], | |
[layout-lg="row"] > [flex-lg="25"], | |
[flex-lg="25"] { | |
flex: 1 1 25%; | |
max-width: 25%; | |
} | |
[layout="column"] > [flex-lg="25"], | |
[layout-lg="column"] > [flex-lg="25"] { | |
flex: 1 1 25%; | |
max-height: 25%; | |
} | |
[layout="row"] > [flex-lg="30"], | |
[layout-lg="row"] > [flex-lg="30"], | |
[flex-lg="30"] { | |
flex: 1 1 30%; | |
max-width: 30%; | |
} | |
[layout="column"] > [flex-lg="30"], | |
[layout-lg="column"] > [flex-lg="30"] { | |
flex: 1 1 30%; | |
max-height: 30%; | |
} | |
[layout="row"] > [flex-lg="35"], | |
[layout-lg="row"] > [flex-lg="35"], | |
[flex-lg="35"] { | |
flex: 1 1 35%; | |
max-width: 35%; | |
} | |
[layout="column"] > [flex-lg="35"], | |
[layout-lg="column"] > [flex-lg="35"] { | |
flex: 1 1 35%; | |
max-height: 35%; | |
} | |
[layout="row"] > [flex-lg="40"], | |
[layout-lg="row"] > [flex-lg="40"], | |
[flex-lg="40"] { | |
flex: 1 1 40%; | |
max-width: 40%; | |
} | |
[layout="column"] > [flex-lg="40"], | |
[layout-lg="column"] > [flex-lg="40"] { | |
flex: 1 1 40%; | |
max-height: 40%; | |
} | |
[layout="row"] > [flex-lg="45"], | |
[layout-lg="row"] > [flex-lg="45"], | |
[flex-lg="45"] { | |
flex: 1 1 45%; | |
max-width: 45%; | |
} | |
[layout="column"] > [flex-lg="45"], | |
[layout-lg="column"] > [flex-lg="45"] { | |
flex: 1 1 45%; | |
max-height: 45%; | |
} | |
[layout="row"] > [flex-lg="50"], | |
[layout-lg="row"] > [flex-lg="50"], | |
[flex-lg="50"] { | |
flex: 1 1 50%; | |
max-width: 50%; | |
} | |
[layout="column"] > [flex-lg="50"], | |
[layout-lg="column"] > [flex-lg="50"] { | |
flex: 1 1 50%; | |
max-height: 50%; | |
} | |
[layout="row"] > [flex-lg="55"], | |
[layout-lg="row"] > [flex-lg="55"], | |
[flex-lg="55"] { | |
flex: 1 1 55%; | |
max-width: 55%; | |
} | |
[layout="column"] > [flex-lg="55"], | |
[layout-lg="column"] > [flex-lg="55"] { | |
flex: 1 1 55%; | |
max-height: 55%; | |
} | |
[layout="row"] > [flex-lg="60"], | |
[layout-lg="row"] > [flex-lg="60"], | |
[flex-lg="60"] { | |
flex: 1 1 60%; | |
max-width: 60%; | |
} | |
[layout="column"] > [flex-lg="60"], | |
[layout-lg="column"] > [flex-lg="60"] { | |
flex: 1 1 60%; | |
max-height: 60%; | |
} | |
[layout="row"] > [flex-lg="65"], | |
[layout-lg="row"] > [flex-lg="65"], | |
[flex-lg="65"] { | |
flex: 1 1 65%; | |
max-width: 65%; | |
} | |
[layout="column"] > [flex-lg="65"], | |
[layout-lg="column"] > [flex-lg="65"] { | |
flex: 1 1 65%; | |
max-height: 65%; | |
} | |
[layout="row"] > [flex-lg="70"], | |
[layout-lg="row"] > [flex-lg="70"], | |
[flex-lg="70"] { | |
flex: 1 1 70%; | |
max-width: 70%; | |
} | |
[layout="column"] > [flex-lg="70"], | |
[layout-lg="column"] > [flex-lg="70"] { | |
flex: 1 1 70%; | |
max-height: 70%; | |
} | |
[layout="row"] > [flex-lg="75"], | |
[layout-lg="row"] > [flex-lg="75"], | |
[flex-lg="75"] { | |
flex: 1 1 75%; | |
max-width: 75%; | |
} | |
[layout="column"] > [flex-lg="75"], | |
[layout-lg="column"] > [flex-lg="75"] { | |
flex: 1 1 75%; | |
max-height: 75%; | |
} | |
[layout="row"] > [flex-lg="80"], | |
[layout-lg="row"] > [flex-lg="80"], | |
[flex-lg="80"] { | |
flex: 1 1 80%; | |
max-width: 80%; | |
} | |
[layout="column"] > [flex-lg="80"], | |
[layout-lg="column"] > [flex-lg="80"] { | |
flex: 1 1 80%; | |
max-height: 80%; | |
} | |
[layout="row"] > [flex-lg="85"], | |
[layout-lg="row"] > [flex-lg="85"], | |
[flex-lg="85"] { | |
flex: 1 1 85%; | |
max-width: 85%; | |
} | |
[layout="column"] > [flex-lg="85"], | |
[layout-lg="column"] > [flex-lg="85"] { | |
flex: 1 1 85%; | |
max-height: 85%; | |
} | |
[layout="row"] > [flex-lg="90"], | |
[layout-lg="row"] > [flex-lg="90"], | |
[flex-lg="90"] { | |
flex: 1 1 90%; | |
max-width: 90%; | |
} | |
[layout="column"] > [flex-lg="90"], | |
[layout-lg="column"] > [flex-lg="90"] { | |
flex: 1 1 90%; | |
max-height: 90%; | |
} | |
[layout="row"] > [flex-lg="95"], | |
[layout-lg="row"] > [flex-lg="95"], | |
[flex-lg="95"] { | |
flex: 1 1 95%; | |
max-width: 95%; | |
} | |
[layout="column"] > [flex-lg="95"], | |
[layout-lg="column"] > [flex-lg="95"] { | |
flex: 1 1 95%; | |
max-height: 95%; | |
} | |
[layout="row"] > [flex-lg="100"], | |
[layout-lg="row"] > [flex-lg="100"], | |
[flex-lg="100"] { | |
flex: 1 1 100%; | |
max-width: 100%; | |
} | |
[layout="column"] > [flex-lg="100"], | |
[layout-lg="column"] > [flex-lg="100"] { | |
flex: 1 1 100%; | |
max-height: 100%; | |
} | |
[layout="row"] > [flex-lg="33"], [layout-lg="row"] > [flex-lg="33"] { | |
flex: 1 1 33.33%; | |
max-width: 33.33%; | |
} | |
[layout="row"] > [flex-lg="66"], [layout-lg="row"] > [flex-lg="66"] { | |
flex: 1 1 66.66%; | |
max-width: 66.66%; | |
} | |
[layout="column"] > [flex-lg="33"], [layout-lg="column"] > [flex-lg="33"] { | |
flex: 1 1 33.33%; | |
max-height: 33.33%; | |
} | |
[layout="column"] > [flex-lg="66"], [layout-lg="column"] > [flex-lg="66"] { | |
flex: 1 1 66.66%; | |
max-height: 66.66%; | |
} | |
[layout-lg] { | |
display: flex; | |
} | |
[layout-lg] > * { | |
box-sizing: border-box; | |
} | |
[layout-lg="column"] { | |
flex-direction: column; | |
} | |
[layout-lg="row"] { | |
flex-direction: row; | |
} | |
} | |
@media (min-width: 1200px) { | |
[flex-offset-gt-lg="0"] { | |
margin-left: 0%; | |
} | |
[flex-offset-gt-lg="5"] { | |
margin-left: 5%; | |
} | |
[flex-offset-gt-lg="10"] { | |
margin-left: 10%; | |
} | |
[flex-offset-gt-lg="15"] { | |
margin-left: 15%; | |
} | |
[flex-offset-gt-lg="20"] { | |
margin-left: 20%; | |
} | |
[flex-offset-gt-lg="25"] { | |
margin-left: 25%; | |
} | |
[flex-offset-gt-lg="30"] { | |
margin-left: 30%; | |
} | |
[flex-offset-gt-lg="35"] { | |
margin-left: 35%; | |
} | |
[flex-offset-gt-lg="40"] { | |
margin-left: 40%; | |
} | |
[flex-offset-gt-lg="45"] { | |
margin-left: 45%; | |
} | |
[flex-offset-gt-lg="50"] { | |
margin-left: 50%; | |
} | |
[flex-offset-gt-lg="55"] { | |
margin-left: 55%; | |
} | |
[flex-offset-gt-lg="60"] { | |
margin-left: 60%; | |
} | |
[flex-offset-gt-lg="65"] { | |
margin-left: 65%; | |
} | |
[flex-offset-gt-lg="70"] { | |
margin-left: 70%; | |
} | |
[flex-offset-gt-lg="75"] { | |
margin-left: 75%; | |
} | |
[flex-offset-gt-lg="80"] { | |
margin-left: 80%; | |
} | |
[flex-offset-gt-lg="85"] { | |
margin-left: 85%; | |
} | |
[flex-offset-gt-lg="90"] { | |
margin-left: 90%; | |
} | |
[flex-offset-gt-lg="95"] { | |
margin-left: 95%; | |
} | |
[flex-offset-gt-lg="33"] { | |
margin-left: calc(100% / 3); | |
} | |
[flex-offset-gt-lg="66"] { | |
margin-left: calc(200% / 3); | |
} | |
[layout-align-gt-lg] { | |
justify-content: flex-start; | |
align-content: stretch; | |
align-items: stretch; | |
} | |
[layout-align-gt-lg^="start"] { | |
justify-content: flex-start; | |
} | |
[layout-align-gt-lg^="center"] { | |
justify-content: center; | |
} | |
[layout-align-gt-lg^="end"] { | |
justify-content: flex-end; | |
} | |
[layout-align-gt-lg^="space-around"] { | |
justify-content: space-around; | |
} | |
[layout-align-gt-lg^="space-between"] { | |
justify-content: space-between; | |
} | |
[layout-align-gt-lg$="start"] { | |
align-items: flex-start; | |
align-content: flex-start; | |
} | |
[layout-align-gt-lg$="center"] { | |
align-items: center; | |
align-content: center; | |
max-width: 100%; | |
} | |
[layout-align-gt-lg$="center"] > * { | |
max-width: 100%; | |
} | |
[layout-align-gt-lg$="end"] { | |
align-items: flex-end; | |
align-content: flex-end; | |
} | |
[layout-align-gt-lg="start"], | |
[layout-align-gt-lg="end"], | |
[layout-align-gt-lg="center"], | |
[layout-align-gt-lg="space-around"], | |
[layout-align-gt-lg="space-between"] { | |
align-items: stretch; | |
align-content: stretch; | |
} | |
[flex-order-gt-lg="0"] { | |
order: 0; | |
} | |
[flex-order-gt-lg="1"] { | |
order: 1; | |
} | |
[flex-order-gt-lg="2"] { | |
order: 2; | |
} | |
[flex-order-gt-lg="3"] { | |
order: 3; | |
} | |
[flex-order-gt-lg="4"] { | |
order: 4; | |
} | |
[flex-order-gt-lg="5"] { | |
order: 5; | |
} | |
[flex-order-gt-lg="6"] { | |
order: 6; | |
} | |
[flex-order-gt-lg="7"] { | |
order: 7; | |
} | |
[flex-order-gt-lg="8"] { | |
order: 8; | |
} | |
[flex-order-gt-lg="9"] { | |
order: 9; | |
} | |
[flex-order-gt-lg="10"] { | |
order: 10; | |
} | |
[flex-order-gt-lg="11"] { | |
order: 11; | |
} | |
[flex-order-gt-lg="12"] { | |
order: 12; | |
} | |
[flex-order-gt-lg="13"] { | |
order: 13; | |
} | |
[flex-order-gt-lg="14"] { | |
order: 14; | |
} | |
[flex-order-gt-lg="15"] { | |
order: 15; | |
} | |
[flex-order-gt-lg="16"] { | |
order: 16; | |
} | |
[flex-order-gt-lg="17"] { | |
order: 17; | |
} | |
[flex-order-gt-lg="18"] { | |
order: 18; | |
} | |
[flex-order-gt-lg="19"] { | |
order: 19; | |
} | |
[flex-order-gt-lg="20"] { | |
order: 20; | |
} | |
[flex-gt-lg] { | |
flex: 1; | |
} | |
} | |
@media screen\0 and (min-width: 1200px) { | |
[flex-gt-lg] { | |
flex: 1 1 0%; | |
} | |
} | |
@media (min-width: 1200px) { | |
[flex-gt-lg-start] { | |
margin-bottom: auto; | |
} | |
[flex-gt-lg-end] { | |
margin-top: auto; | |
} | |
[flex-gt-lg-none] { | |
flex: 0 0 auto; | |
} | |
[flex-gt-lg-initial] { | |
flex: 0 1 auto; | |
} | |
[flex-gt-lg-noshrink] { | |
flex: 1 0 auto; | |
} | |
[flex-gt-lg-auto] { | |
flex: 1 1 auto; | |
} | |
[flex-gt-lg-grow] { | |
flex: 1 1 100%; | |
} | |
[flex-gt-lg], | |
[layout="row"] > [flex-gt-lg], | |
[layout-gt-lg="row"] > [flex-gt-lg] { | |
max-height: 100%; | |
flex-wrap: wrap; | |
} | |
[layout-gt-lg="column"] > [flex-gt-lg], | |
[layout="column"] > [flex-gt-lg] { | |
max-width: 100%; | |
flex-wrap: wrap; | |
} | |
[layout="row"] > [flex-gt-lg="5"], | |
[layout-gt-lg="row"] > [flex-gt-lg="5"], | |
[flex-gt-lg="5"] { | |
flex: 1 1 5%; | |
max-width: 5%; | |
} | |
[layout="column"] > [flex-gt-lg="5"], | |
[layout-gt-lg="column"] > [flex-gt-lg="5"] { | |
flex: 1 1 5%; | |
max-height: 5%; | |
} | |
[layout="row"] > [flex-gt-lg="10"], | |
[layout-gt-lg="row"] > [flex-gt-lg="10"], | |
[flex-gt-lg="10"] { | |
flex: 1 1 10%; | |
max-width: 10%; | |
} | |
[layout="column"] > [flex-gt-lg="10"], | |
[layout-gt-lg="column"] > [flex-gt-lg="10"] { | |
flex: 1 1 10%; | |
max-height: 10%; | |
} | |
[layout="row"] > [flex-gt-lg="15"], | |
[layout-gt-lg="row"] > [flex-gt-lg="15"], | |
[flex-gt-lg="15"] { | |
flex: 1 1 15%; | |
max-width: 15%; | |
} | |
[layout="column"] > [flex-gt-lg="15"], | |
[layout-gt-lg="column"] > [flex-gt-lg="15"] { | |
flex: 1 1 15%; | |
max-height: 15%; | |
} | |
[layout="row"] > [flex-gt-lg="20"], | |
[layout-gt-lg="row"] > [flex-gt-lg="20"], | |
[flex-gt-lg="20"] { | |
flex: 1 1 20%; | |
max-width: 20%; | |
} | |
[layout="column"] > [flex-gt-lg="20"], | |
[layout-gt-lg="column"] > [flex-gt-lg="20"] { | |
flex: 1 1 20%; | |
max-height: 20%; | |
} | |
[layout="row"] > [flex-gt-lg="25"], | |
[layout-gt-lg="row"] > [flex-gt-lg="25"], | |
[flex-gt-lg="25"] { | |
flex: 1 1 25%; | |
max-width: 25%; | |
} | |
[layout="column"] > [flex-gt-lg="25"], | |
[layout-gt-lg="column"] > [flex-gt-lg="25"] { | |
flex: 1 1 25%; | |
max-height: 25%; | |
} | |
[layout="row"] > [flex-gt-lg="30"], | |
[layout-gt-lg="row"] > [flex-gt-lg="30"], | |
[flex-gt-lg="30"] { | |
flex: 1 1 30%; | |
max-width: 30%; | |
} | |
[layout="column"] > [flex-gt-lg="30"], | |
[layout-gt-lg="column"] > [flex-gt-lg="30"] { | |
flex: 1 1 30%; | |
max-height: 30%; | |
} | |
[layout="row"] > [flex-gt-lg="35"], | |
[layout-gt-lg="row"] > [flex-gt-lg="35"], | |
[flex-gt-lg="35"] { | |
flex: 1 1 35%; | |
max-width: 35%; | |
} | |
[layout="column"] > [flex-gt-lg="35"], | |
[layout-gt-lg="column"] > [flex-gt-lg="35"] { | |
flex: 1 1 35%; | |
max-height: 35%; | |
} | |
[layout="row"] > [flex-gt-lg="40"], | |
[layout-gt-lg="row"] > [flex-gt-lg="40"], | |
[flex-gt-lg="40"] { | |
flex: 1 1 40%; | |
max-width: 40%; | |
} | |
[layout="column"] > [flex-gt-lg="40"], | |
[layout-gt-lg="column"] > [flex-gt-lg="40"] { | |
flex: 1 1 40%; | |
max-height: 40%; | |
} | |
[layout="row"] > [flex-gt-lg="45"], | |
[layout-gt-lg="row"] > [flex-gt-lg="45"], | |
[flex-gt-lg="45"] { | |
flex: 1 1 45%; | |
max-width: 45%; | |
} | |
[layout="column"] > [flex-gt-lg="45"], | |
[layout-gt-lg="column"] > [flex-gt-lg="45"] { | |
flex: 1 1 45%; | |
max-height: 45%; | |
} | |
[layout="row"] > [flex-gt-lg="50"], | |
[layout-gt-lg="row"] > [flex-gt-lg="50"], | |
[flex-gt-lg="50"] { | |
flex: 1 1 50%; | |
max-width: 50%; | |
} | |
[layout="column"] > [flex-gt-lg="50"], | |
[layout-gt-lg="column"] > [flex-gt-lg="50"] { | |
flex: 1 1 50%; | |
max-height: 50%; | |
} | |
[layout="row"] > [flex-gt-lg="55"], | |
[layout-gt-lg="row"] > [flex-gt-lg="55"], | |
[flex-gt-lg="55"] { | |
flex: 1 1 55%; | |
max-width: 55%; | |
} | |
[layout="column"] > [flex-gt-lg="55"], | |
[layout-gt-lg="column"] > [flex-gt-lg="55"] { | |
flex: 1 1 55%; | |
max-height: 55%; | |
} | |
[layout="row"] > [flex-gt-lg="60"], | |
[layout-gt-lg="row"] > [flex-gt-lg="60"], | |
[flex-gt-lg="60"] { | |
flex: 1 1 60%; | |
max-width: 60%; | |
} | |
[layout="column"] > [flex-gt-lg="60"], | |
[layout-gt-lg="column"] > [flex-gt-lg="60"] { | |
flex: 1 1 60%; | |
max-height: 60%; | |
} | |
[layout="row"] > [flex-gt-lg="65"], | |
[layout-gt-lg="row"] > [flex-gt-lg="65"], | |
[flex-gt-lg="65"] { | |
flex: 1 1 65%; | |
max-width: 65%; | |
} | |
[layout="column"] > [flex-gt-lg="65"], | |
[layout-gt-lg="column"] > [flex-gt-lg="65"] { | |
flex: 1 1 65%; | |
max-height: 65%; | |
} | |
[layout="row"] > [flex-gt-lg="70"], | |
[layout-gt-lg="row"] > [flex-gt-lg="70"], | |
[flex-gt-lg="70"] { | |
flex: 1 1 70%; | |
max-width: 70%; | |
} | |
[layout="column"] > [flex-gt-lg="70"], | |
[layout-gt-lg="column"] > [flex-gt-lg="70"] { | |
flex: 1 1 70%; | |
max-height: 70%; | |
} | |
[layout="row"] > [flex-gt-lg="75"], | |
[layout-gt-lg="row"] > [flex-gt-lg="75"], | |
[flex-gt-lg="75"] { | |
flex: 1 1 75%; | |
max-width: 75%; | |
} | |
[layout="column"] > [flex-gt-lg="75"], | |
[layout-gt-lg="column"] > [flex-gt-lg="75"] { | |
flex: 1 1 75%; | |
max-height: 75%; | |
} | |
[layout="row"] > [flex-gt-lg="80"], | |
[layout-gt-lg="row"] > [flex-gt-lg="80"], | |
[flex-gt-lg="80"] { | |
flex: 1 1 80%; | |
max-width: 80%; | |
} | |
[layout="column"] > [flex-gt-lg="80"], | |
[layout-gt-lg="column"] > [flex-gt-lg="80"] { | |
flex: 1 1 80%; | |
max-height: 80%; | |
} | |
[layout="row"] > [flex-gt-lg="85"], | |
[layout-gt-lg="row"] > [flex-gt-lg="85"], | |
[flex-gt-lg="85"] { | |
flex: 1 1 85%; | |
max-width: 85%; | |
} | |
[layout="column"] > [flex-gt-lg="85"], | |
[layout-gt-lg="column"] > [flex-gt-lg="85"] { | |
flex: 1 1 85%; | |
max-height: 85%; | |
} | |
[layout="row"] > [flex-gt-lg="90"], | |
[layout-gt-lg="row"] > [flex-gt-lg="90"], | |
[flex-gt-lg="90"] { | |
flex: 1 1 90%; | |
max-width: 90%; | |
} | |
[layout="column"] > [flex-gt-lg="90"], | |
[layout-gt-lg="column"] > [flex-gt-lg="90"] { | |
flex: 1 1 90%; | |
max-height: 90%; | |
} | |
[layout="row"] > [flex-gt-lg="95"], | |
[layout-gt-lg="row"] > [flex-gt-lg="95"], | |
[flex-gt-lg="95"] { | |
flex: 1 1 95%; | |
max-width: 95%; | |
} | |
[layout="column"] > [flex-gt-lg="95"], | |
[layout-gt-lg="column"] > [flex-gt-lg="95"] { | |
flex: 1 1 95%; | |
max-height: 95%; | |
} | |
[layout="row"] > [flex-gt-lg="100"], | |
[layout-gt-lg="row"] > [flex-gt-lg="100"], | |
[flex-gt-lg="100"] { | |
flex: 1 1 100%; | |
max-width: 100%; | |
} | |
[layout="column"] > [flex-gt-lg="100"], | |
[layout-gt-lg="column"] > [flex-gt-lg="100"] { | |
flex: 1 1 100%; | |
max-height: 100%; | |
} | |
[layout="row"] > [flex-gt-lg="33"], [layout-gt-lg="row"] > [flex-gt-lg="33"] { | |
flex: 1 1 33.33%; | |
max-width: 33.33%; | |
} | |
[layout="row"] > [flex-gt-lg="66"], [layout-gt-lg="row"] > [flex-gt-lg="66"] { | |
flex: 1 1 66.66%; | |
max-width: 66.66%; | |
} | |
[layout="column"] > [flex-gt-lg="33"], [layout-gt-lg="column"] > [flex-gt-lg="33"] { | |
flex: 1 1 33.33%; | |
max-height: 33.33%; | |
} | |
[layout="column"] > [flex-gt-lg="66"], [layout-gt-lg="column"] > [flex-gt-lg="66"] { | |
flex: 1 1 66.66%; | |
max-height: 66.66%; | |
} | |
[layout-gt-lg] { | |
display: flex; | |
} | |
[layout-gt-lg] > * { | |
box-sizing: border-box; | |
} | |
[layout-gt-lg="column"] { | |
flex-direction: column; | |
} | |
[layout-gt-lg="row"] { | |
flex-direction: row; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment