Skip to content

Instantly share code, notes, and snippets.

@MartinMuzatko
Last active May 18, 2016 08:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save MartinMuzatko/ed9877462232d65b366a598394da453c to your computer and use it in GitHub Desktop.
Save MartinMuzatko/ed9877462232d65b366a598394da453c to your computer and use it in GitHub Desktop.
Flexproperties - ~4053 Lines
// ----
// 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;
[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