/**
* Flex layout attribute
* HTML layout helper based on CSS flexbox specification.
*
* VERSION: v1.0.3
* DATE: 2016-06-21
* URL: http://progressivered.com/fla/
* AUTHOR: Stefan Kovac | stef@progressivered.com | http://progressivered.com/
* LICENSE: MIT
*/
@charset "UTF-8";
html {
box-sizing: border-box; }
*, *:before, *:after {
box-sizing: inherit; }
/*
==========================================================
GENERAL DEFINITIONS
==========================================================
*/
[layout] {
display: -ms-flexbox;
display: flex; }
[layout*="row"],
[layout*="column"] {
width: 100%;
max-width: 100%; }
[layout^="row"] {
-ms-flex-direction: row;
flex-direction: row; }
[layout^="column"] {
-ms-flex-direction: column;
flex-direction: column; }
[layout*="row"][layout*="reverse"] {
-ms-flex-direction: row-reverse;
flex-direction: row-reverse; }
[layout*="column"][layout*="reverse"] {
-ms-flex-direction: column-reverse;
flex-direction: column-reverse; }
[layout*="rows"],
[layout*="columns"] {
-ms-flex-wrap: wrap;
flex-wrap: wrap; }
[layout="none"] {
-ms-flex: none;
flex: none; }
/*
==========================================================
MAIN AXIS ALIGNMENT
==========================================================
*/
[layout*="column"][layout*="top-"],
[layout*="row"][layout*="-left"] {
-ms-flex-pack: start;
justify-content: flex-start; }
[layout~="centered"],
[layout*="column"][layout*="center-"],
[layout*="row"][layout*="-center"] {
-ms-flex-pack: center;
justify-content: center; }
[layout*="column"][layout*="bottom-"],
[layout*="row"][layout*="-right"] {
-ms-flex-pack: end;
justify-content: flex-end; }
[layout*="column"][layout*="spread-"],
[layout*="row"][layout*="-spread"] {
-ms-flex-pack: distribute;
justify-content: space-around; }
[layout*="column"][layout*="justify-"],
[layout*="row"][layout*="-justify"] {
-ms-flex-pack: justify;
justify-content: space-between; }
/*
==========================================================
CROSS AXIS ALIGNMENT
==========================================================
*/
[layout*="column"][layout*="-left"],
[layout*="row"][layout*="top-"] {
-ms-flex-align: start;
-ms-grid-row-align: flex-start;
align-items: flex-start; }
[layout~="centered"],
[layout*="column"][layout*="-center"],
[layout*="row"][layout*="center-"] {
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center; }
[layout*="column"][layout*="-right"],
[layout*="row"][layout*="bottom-"] {
-ms-flex-align: end;
-ms-grid-row-align: flex-end;
align-items: flex-end; }
[layout*="column"][layout*="-stretch"],
[layout*="row"][layout*="stretch-"] {
-ms-flex-align: stretch;
-ms-grid-row-align: stretch;
align-items: stretch; }
/*
==========================================================
MULTI-LINE ALIGNMENT
==========================================================
*/
[layout*="rows"][layout*="top-"],
[layout*="columns"][layout*="-left"] {
-ms-flex-line-pack: start;
align-content: flex-start; }
[layout*="rows"][layout*="bottom-"],
[layout*="columns"][layout*="-right"] {
-ms-flex-line-pack: end;
align-content: flex-end; }
[layout*="rows"][layout*="center-"],
[layout*="columns"][layout*="-center"] {
-ms-flex-line-pack: center;
align-content: center; }
[layout*="rows"][layout*="justify-"],
[layout*="columns"][layout*="-justify"] {
-ms-flex-line-pack: justify;
align-content: space-between; }
[layout*="rows"][layout*="spread-"],
[layout*="columns"][layout*="-spread"] {
-ms-flex-line-pack: distribute;
align-content: space-around; }
[layout*="rows"][layout*="stretch-"],
[layout*="columns"][layout*="-stretch"] {
-ms-flex-line-pack: stretch;
align-content: stretch; }
/*
==========================================================
IE10+ HACKS
==========================================================
*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
[layout*="column"]:not([layout*="row"]) > * {
max-width: auto; }
[layout*="column"][self*="top"] {
height: auto !important; }
[self~="size-"] > * {
height: auto; } }
/*
==========================================================
SELF ALIGNMENT
==========================================================
*/
[layout*="column"]:not([layout*="row"]) [self*="left"],
[layout*="row"]:not([layout*="column"]) [self*="top"] {
-ms-flex-item-align: start;
align-self: flex-start; }
[self~="center"] {
-ms-flex-item-align: center;
align-self: center; }
[layout*="column"]:not([layout*="row"]) [self*="right"],
[layout*="row"]:not([layout*="column"]) [self*="bottom"] {
-ms-flex-item-align: end;
align-self: flex-end; }
[self*="stretch"] {
-ms-flex-item-align: stretch;
align-self: stretch; }
/* ALIGN VIA MARGINS
========================================================== */
/* Container: */
[layout][self*="center"] {
margin-left: auto;
margin-right: auto; }
[layout][self*="right"] {
margin-right: 0; }
[layout][self*="left"] {
margin-left: 0; }
/* Items: */
[layout*="column"] [self*="bottom"] {
margin-top: auto; }
[layout*="column"] [self*="top"] {
margin-bottom: auto; }
[layout*="row"] [self*="left"] {
margin-right: auto; }
[layout*="row"] [self*="right"] {
margin-left: auto; }
/*
==========================================================
SELF SIZE
==========================================================
*/
/* Relative size */
[self~="size-1of5"] {
width: 20%; }
[self~="size-1of4"] {
width: 25%; }
[self~="size-1of3"] {
width: 33.33333%; }
[self~="size-2of5"] {
width: 40%; }
[self~="size-1of2"] {
width: 50%; }
[self~="size-3of5"] {
width: 60%; }
[self~="size-2of3"] {
width: 66.6666%; }
[self~="size-3of4"] {
width: 75%; }
[self~="size-4of5"] {
width: 80%; }
[self~="size-1of1"] {
width: 100%; }
/* Proportional size*/
[layout*="row"][layout*="-stretch"] > *:not([self*="size-"]),
[layout*="column"][layout*="stretch-"] > *:not([self*="size-"]),
[self~="size-x1"] {
-ms-flex: 1 0 0% !important;
flex: 1 0 0% !important; }
[self~="size-x2"] {
-ms-flex: 2 0 0% !important;
flex: 2 0 0% !important; }
[self~="size-x3"] {
-ms-flex: 3 0 0% !important;
flex: 3 0 0% !important; }
[self~="size-x4"] {
-ms-flex: 4 0 0% !important;
flex: 4 0 0% !important; }
[self~="size-x5"] {
-ms-flex: 5 0 0% !important;
flex: 5 0 0% !important; }
[self~="size-x6"] {
-ms-flex: 6 0 0% !important;
flex: 6 0 0% !important; }
[self~="size-x7"] {
-ms-flex: 7 0 0% !important;
flex: 7 0 0% !important; }
[self~="size-x8"] {
-ms-flex: 8 0 0% !important;
flex: 8 0 0% !important; }
[self~="size-x9"] {
-ms-flex: 9 0 0% !important;
flex: 9 0 0% !important; }
[self*="size-auto"] {
-ms-flex: 1 1 auto;
flex: 1 1 auto; }
[self*="size-x0"] {
-ms-flex: 0 0 auto;
flex: 0 0 auto; }
/* Fixed max-width size */
[self~="size-xxlarge"] {
max-width: 1440px;
width: 100%; }
[self~="size-xlarge"] {
max-width: 1200px;
width: 100%; }
[self~="size-large"] {
max-width: 960px;
width: 100%; }
[self~="size-larger"] {
max-width: 840px;
width: 100%; }
[self~="size-medium"] {
max-width: 720px;
width: 100%; }
[self~="size-smaller"] {
max-width: 600px;
width: 100%; }
[self~="size-small"] {
max-width: 480px;
width: 100%; }
[self~="size-xsmall"] {
max-width: 360px;
width: 100%; }
[self~="size-xxsmall"] {
max-width: 240px;
width: 100%; }
[self*="size-x"]:not([self*="small"]):not([self*="large"]) {
-ms-flex-negative: 1;
flex-shrink: 1; }
[self~="first"] {
-ms-flex-order: -1;
order: -1; }
[self~="order-1"] {
-ms-flex-order: 1;
order: 1; }
[self~="order-2"] {
-ms-flex-order: 2;
order: 2; }
[self~="order-3"] {
-ms-flex-order: 3;
order: 3; }
[self~="last"] {
-ms-flex-order: 999;
order: 999; }
[layout*="column"]:not([layout*="row"]) > * {
-ms-flex-negative: 0;
flex-shrink: 0;
-ms-flex-preferred-size: auto;
flex-basis: auto; }
/* Optional additional features — (un)comment to include/exclude */
@media screen and (max-width: 64em) {
[layout*="lg-row"] {
-ms-flex-direction: row;
flex-direction: row; }
[layout*="lg-column"] {
-ms-flex-direction: column;
flex-direction: column; }
[layout*="lg-rows"],
[layout*="lg-columns"] {
-ms-flex-wrap: wrap;
flex-wrap: wrap; } }
@media screen and (max-width: 52em) {
[layout*="md-row"] {
-ms-flex-direction: row;
flex-direction: row; }
[layout*="md-column"] {
-ms-flex-direction: column;
flex-direction: column; }
[layout*="md-rows"],
[layout*="md-columns"] {
-ms-flex-wrap: wrap;
flex-wrap: wrap; } }
@media screen and (max-width: 40em) {
[layout*="sm-row"] {
-ms-flex-direction: row;
flex-direction: row; }
[layout*="sm-column"] {
-ms-flex-direction: column;
flex-direction: column; }
[layout*="sm-rows"],
[layout*="sm-columns"] {
-ms-flex-wrap: wrap;
flex-wrap: wrap; } }
@media screen and (max-width: 64em) {
[self*="lg-full"] {
-ms-flex: 1 1 100% !important;
flex: 1 1 100% !important;
width: 100%;
max-width: 100%; }
[self*="lg-half"] {
-ms-flex: 1 1 50% !important;
flex: 1 1 50% !important;
width: 50%;
max-width: 50%; }
[self~="lg-first"] {
-ms-flex-order: -1;
order: -1; }
[self~="lg-last"] {
-ms-flex-order: 999;
order: 999; }
[self~="lg-hide"] {
display: none; }
[self~="lg-show"] {
display: inherit; } }
@media screen and (max-width: 52em) {
[self*="md-full"] {
-ms-flex: 1 1 100% !important;
flex: 1 1 100% !important;
width: 100%;
max-width: 100%; }
[self*="md-half"] {
-ms-flex: 1 1 50% !important;
flex: 1 1 50% !important;
width: 50%;
max-width: 50%; }
[self~="md-first"] {
-ms-flex-order: -1;
order: -1; }
[self~="md-last"] {
-ms-flex-order: 999;
order: 999; }
[self~="md-hide"] {
display: none; }
[self~="md-show"] {
display: inherit; } }
@media screen and (max-width: 40em) {
[self*="sm-full"] {
-ms-flex: 1 1 100% !important;
flex: 1 1 100% !important;
width: 100%;
max-width: 100%; }
[self*="sm-half"] {
-ms-flex: 1 1 50% !important;
flex: 1 1 50% !important;
width: 50%;
max-width: 50%; }
[self~="sm-first"] {
-ms-flex-order: -1;
order: -1; }
[self~="sm-last"] {
-ms-flex-order: 999;
order: 999; }
[self~="sm-hide"] {
display: none; }
[self~="sm-show"] {
display: inherit; } }
/*# sourceMappingURL=maps/flex-layout-attribute.css.map */