<!DOCTYPE html>
<html>
<head>
<link data-require="fontawesome@*" data-semver="4.5.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="jquery@*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script data-require="prefixfree@*" data-semver="1.0.7" src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script data-require="riot.js@*" data-semver="2.2.4" src="https://cdnjs.cloudflare.com/ajax/libs/riot/2.2.4/riot+compiler.js"></script>
</head>
<body>
<header>
<h1>Riot Ravel</h1>
<span>Find the components you need</span>
</header>
<rr-nav>
<a href="#">Search</a>
<a href="#most-loved">Most loved</a>
<a href="#recently-added">Recently Added</a>
</rr-nav>
<main>
<div>
<h2 id="most-loved">Most loved</h2>
<rr-component-list criteria="stars" limit="9"></rr-component-list>
</div>
<div>
<h2 id="recently-added">Recently Added</h2>
<rr-component-list criteria="created" limit="9"></rr-component-list>
</div>
</main>
<script type="riot/tag" src="rr-nav.js"></script>
<script type="riot/tag" src="rr-component.js"></script>
<script type="riot/tag" src="rr-component-list.js"></script>
<script type="text/javascript">
riot.mount('*')
</script>
</body>
</html>
<my-tag>
<h1>{ message }</h1>
<script>
this.message = 'hello there'
</script>
</my-tag>
# Riot Bug Reporter
This is a template for bug reporting.
## How to report
1. [Open this template on Plunker](http://riotjs.com/examples/plunker/?app=bug-reporter)
2. Edit & save
3. Share the url
@charset "UTF-8";
/* DON'T CHANGE THE STYLE.CSS !!!
* ------------------------------
* PLEASE REFER TO THE LESS FILES
* FOUND IN less/
* ------------------------------
* MAIN: IMPORTING ALL SUBMODULES AND TOOLS
* LAYOUT: APPLYING EVERY COMPONENT
*/
/* VENDOR STYLES */
/*! normalize v3.0.1 | MIT License | git.io/normalize */
html {
font-family: sans-serif;
/* 1 */
-ms-text-size-adjust: 100%;
/* 2 */
-webkit-text-size-adjust: 100%;
/* 2 */
}
html,
body {
height: 100%;
width: 100%;
}
body {
margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
audio,
canvas,
progress,
video {
display: inline-block;
/* 1 */
vertical-align: baseline;
/* 2 */
}
audio:not([controls]) {
display: none;
height: 0;
}
[hidden],
template {
display: none;
}
a {
background: transparent;
}
a:active,
a:hover {
outline: 0;
}
abbr[title] {
border-bottom: 1px dotted;
}
b,
strong {
font-weight: bold;
}
dfn {
font-style: italic;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
mark {
background: #ff0;
color: #000;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
img {
border: 0;
}
svg:not(:root) {
overflow: hidden;
}
figure {
margin: 1em 40px;
}
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
pre {
overflow: auto;
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
button,
input,
optgroup,
select,
textarea {
color: inherit;
/* 1 */
font: inherit;
/* 2 */
margin: 0;
/* 3 */
}
button {
overflow: visible;
}
button,
select {
text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
/* 2 */
cursor: pointer;
/* 3 */
}
button[disabled],
html input[disabled] {
cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
input {
line-height: normal;
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
input[type="search"] {
-webkit-appearance: textfield;
/* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
/* 2 */
box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
legend {
border: 0;
/* 1 */
padding: 0;
/* 2 */
}
textarea {
overflow: auto;
}
optgroup {
font-weight: bold;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
.progress {
overflow: hidden;
height: 2px;
background-color: #8bb8df;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
.progress-bar {
float: left;
width: 0%;
height: 100%;
font-size: 12px;
line-height: 20px;
color: #ffffff;
text-align: center;
background-color: #337ab7;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
transition: width 0.6s ease;
}
.progress-striped .progress-bar,
.progress-bar-striped {
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-size: 40px 40px;
}
.progress-bar-success {
background-color: #5cb85c;
}
.progress-striped .progress-bar-success {
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.progress-bar-info {
background-color: #5bc0de;
}
.progress-striped .progress-bar-info {
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.progress-bar-warning {
background-color: #f0ad4e;
}
.progress-striped .progress-bar-warning {
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.progress-bar-danger {
background-color: #d9534f;
}
.progress-striped .progress-bar-danger {
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
@-moz-document url-prefix() {
[layout-fill] {
margin: 0;
width: 100%;
min-height: 100%;
height: 100%;
}
}
/*
* Apply Mixins to create Layout/Flexbox styles
*
*/
[flex-order] {
order: 0;
}
[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;
}
[offset="0"] {
margin-left: 0%;
}
[offset="5"] {
margin-left: 5%;
}
[offset="10"] {
margin-left: 10%;
}
[offset="15"] {
margin-left: 15%;
}
[offset="20"] {
margin-left: 20%;
}
[offset="25"] {
margin-left: 25%;
}
[offset="30"] {
margin-left: 30%;
}
[offset="35"] {
margin-left: 35%;
}
[offset="40"] {
margin-left: 40%;
}
[offset="45"] {
margin-left: 45%;
}
[offset="50"] {
margin-left: 50%;
}
[offset="55"] {
margin-left: 55%;
}
[offset="60"] {
margin-left: 60%;
}
[offset="65"] {
margin-left: 65%;
}
[offset="70"] {
margin-left: 70%;
}
[offset="75"] {
margin-left: 75%;
}
[offset="80"] {
margin-left: 80%;
}
[offset="85"] {
margin-left: 85%;
}
[offset="90"] {
margin-left: 90%;
}
[offset="95"] {
margin-left: 95%;
}
[offset-="33"],
[offset-="34"] {
margin-left: 33%;
}
[offset-="66"],
[offset-="67"] {
margin-left: 67%;
}
[layout-align="center"],
[layout-align="center center"],
[layout-align="center start"],
[layout-align="center end"] {
justify-content: center;
}
[layout-align="end"],
[layout-align="end center"],
[layout-align="end start"],
[layout-align="end end"] {
justify-content: flex-end;
}
[layout-align="space-around"],
[layout-align="space-around center"],
[layout-align="space-around start"],
[layout-align="space-around end"] {
justify-content: space-around;
}
[layout-align="space-between"],
[layout-align="space-between center"],
[layout-align="space-between start"],
[layout-align="space-between end"] {
justify-content: space-between;
}
[layout-align="center start"],
[layout-align="start start"],
[layout-align="end start"],
[layout-align="space-between start"],
[layout-align="space-around start"] {
align-items: flex-start;
}
[layout-align="center center"],
[layout-align="start center"],
[layout-align="end center"],
[layout-align="space-between center"],
[layout-align="space-around center"] {
align-items: center;
max-width: 100%;
}
[layout-align="center end"],
[layout-align="start end"],
[layout-align="end end"],
[layout-align="space-between end"],
[layout-align="space-around end"] {
align-items: flex-end;
}
[flex] {
box-sizing: border-box;
}
[flex] {
flex: 1 1 0%;
}
[flex="initial"] {
flex: 0 1 auto;
}
[flex="auto"] {
flex: 1 1 auto;
}
[flex="none"] {
flex: 0 0 auto;
}
[flex="5"] {
flex: 0 0 5%;
}
[layout="row"] > [flex="5"] {
max-width: 5%;
max-height: 100%;
}
[layout="column"] > [flex="5"] {
max-width: 100%;
max-height: 5%;
}
[flex="10"] {
flex: 0 0 10%;
}
[layout="row"] > [flex="10"] {
max-width: 10%;
max-height: 100%;
}
[layout="column"] > [flex="10"] {
max-width: 100%;
max-height: 10%;
}
[flex="15"] {
flex: 0 0 15%;
}
[layout="row"] > [flex="15"] {
max-width: 15%;
max-height: 100%;
}
[layout="column"] > [flex="15"] {
max-width: 100%;
max-height: 15%;
}
[flex="20"] {
flex: 0 0 20%;
}
[layout="row"] > [flex="20"] {
max-width: 20%;
max-height: 100%;
}
[layout="column"] > [flex="20"] {
max-width: 100%;
max-height: 20%;
}
[flex="25"] {
flex: 0 0 25%;
}
[layout="row"] > [flex="25"] {
max-width: 25%;
max-height: 100%;
}
[layout="column"] > [flex="25"] {
max-width: 100%;
max-height: 25%;
}
[flex="30"] {
flex: 0 0 30%;
}
[layout="row"] > [flex="30"] {
max-width: 30%;
max-height: 100%;
}
[layout="column"] > [flex="30"] {
max-width: 100%;
max-height: 30%;
}
[flex="35"] {
flex: 0 0 35%;
}
[layout="row"] > [flex="35"] {
max-width: 35%;
max-height: 100%;
}
[layout="column"] > [flex="35"] {
max-width: 100%;
max-height: 35%;
}
[flex="40"] {
flex: 0 0 40%;
}
[layout="row"] > [flex="40"] {
max-width: 40%;
max-height: 100%;
}
[layout="column"] > [flex="40"] {
max-width: 100%;
max-height: 40%;
}
[flex="45"] {
flex: 0 0 45%;
}
[layout="row"] > [flex="45"] {
max-width: 45%;
max-height: 100%;
}
[layout="column"] > [flex="45"] {
max-width: 100%;
max-height: 45%;
}
[flex="50"] {
flex: 0 0 50%;
}
[layout="row"] > [flex="50"] {
max-width: 50%;
max-height: 100%;
}
[layout="column"] > [flex="50"] {
max-width: 100%;
max-height: 50%;
}
[flex="55"] {
flex: 0 0 55%;
}
[layout="row"] > [flex="55"] {
max-width: 55%;
max-height: 100%;
}
[layout="column"] > [flex="55"] {
max-width: 100%;
max-height: 55%;
}
[flex="60"] {
flex: 0 0 60%;
}
[layout="row"] > [flex="60"] {
max-width: 60%;
max-height: 100%;
}
[layout="column"] > [flex="60"] {
max-width: 100%;
max-height: 60%;
}
[flex="65"] {
flex: 0 0 65%;
}
[layout="row"] > [flex="65"] {
max-width: 65%;
max-height: 100%;
}
[layout="column"] > [flex="65"] {
max-width: 100%;
max-height: 65%;
}
[flex="70"] {
flex: 0 0 70%;
}
[layout="row"] > [flex="70"] {
max-width: 70%;
max-height: 100%;
}
[layout="column"] > [flex="70"] {
max-width: 100%;
max-height: 70%;
}
[flex="75"] {
flex: 0 0 75%;
}
[layout="row"] > [flex="75"] {
max-width: 75%;
max-height: 100%;
}
[layout="column"] > [flex="75"] {
max-width: 100%;
max-height: 75%;
}
[flex="80"] {
flex: 0 0 80%;
}
[layout="row"] > [flex="80"] {
max-width: 80%;
max-height: 100%;
}
[layout="column"] > [flex="80"] {
max-width: 100%;
max-height: 80%;
}
[flex="85"] {
flex: 0 0 85%;
}
[layout="row"] > [flex="85"] {
max-width: 85%;
max-height: 100%;
}
[layout="column"] > [flex="85"] {
max-width: 100%;
max-height: 85%;
}
[flex="90"] {
flex: 0 0 90%;
}
[layout="row"] > [flex="90"] {
max-width: 90%;
max-height: 100%;
}
[layout="column"] > [flex="90"] {
max-width: 100%;
max-height: 90%;
}
[flex="95"] {
flex: 0 0 95%;
}
[layout="row"] > [flex="95"] {
max-width: 95%;
max-height: 100%;
}
[layout="column"] > [flex="95"] {
max-width: 100%;
max-height: 95%;
}
[flex="100"] {
flex: 0 0 100%;
}
[layout="row"] > [flex="100"] {
max-width: 100%;
max-height: 100%;
}
[layout="column"] > [flex="100"] {
max-width: 100%;
max-height: 100%;
}
[flex="33"],
[flex="34"] {
flex: 1 1 33%;
}
[flex="66"],
[flex="67"] {
flex: 1 1 67%;
}
[layout="row"] > [flex="33"],
[layout="row"] > [flex="34"] {
max-width: 33%;
max-height: 100%;
}
[layout="row"] > [flex="66"],
[layout="row"] > [flex="67"] {
max-width: 67%;
max-height: 100%;
}
[layout="column"] > [flex="33"],
[layout="column"] > [flex="34"] {
max-width: 100%;
max-height: 33%;
}
[layout="column"] > [flex="66"],
[layout="column"] > [flex="67"] {
max-width: 100%;
max-height: 67%;
}
[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-wrap] {
flex-wrap: wrap;
}
[layout-nowrap] {
flex-wrap: nowrap;
}
[layout-fill] {
margin: 0;
width: 100%;
min-height: 100%;
height: 100%;
}
[layout] {
box-sizing: border-box;
display: flex;
}
[layout=column] {
flex-direction: column;
}
[layout=row] {
flex-direction: row;
flex-wrap: wrap;
}
/**
* `hide-gt-sm show-gt-lg` should hide from 600px to 1200px
* `show-md hide-gt-sm` should show from 0px to 960px and hide at >960px
* `hide-gt-md show-gt-sm` should show everywhere (show overrides hide)`
*
* hide means hide everywhere
* Sizes:
* 0 <= size < 600 Phone
* 600 <= size < 960 Tablet
* 960 <= size < 1200 Tablet-Landscape
*/
@media (max-width: 37.5em) {
[hide-sm]:not([show-sm]):not([show]),
[hide]:not([show-sm]):not([show]) {
display: none;
}
[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;
}
[offset-sm="0"] {
margin-left: 0%;
}
[offset-sm="5"] {
margin-left: 5%;
}
[offset-sm="10"] {
margin-left: 10%;
}
[offset-sm="15"] {
margin-left: 15%;
}
[offset-sm="20"] {
margin-left: 20%;
}
[offset-sm="25"] {
margin-left: 25%;
}
[offset-sm="30"] {
margin-left: 30%;
}
[offset-sm="35"] {
margin-left: 35%;
}
[offset-sm="40"] {
margin-left: 40%;
}
[offset-sm="45"] {
margin-left: 45%;
}
[offset-sm="50"] {
margin-left: 50%;
}
[offset-sm="55"] {
margin-left: 55%;
}
[offset-sm="60"] {
margin-left: 60%;
}
[offset-sm="65"] {
margin-left: 65%;
}
[offset-sm="70"] {
margin-left: 70%;
}
[offset-sm="75"] {
margin-left: 75%;
}
[offset-sm="80"] {
margin-left: 80%;
}
[offset-sm="85"] {
margin-left: 85%;
}
[offset-sm="90"] {
margin-left: 90%;
}
[offset-sm="95"] {
margin-left: 95%;
}
[offset-sm="33"],
[offset-sm="34"] {
margin-left: 33%;
}
[offset-sm="66"],
[offset-sm="67"] {
margin-left: 67%;
}
[layout-align-sm="center"],
[layout-align-sm="center center"],
[layout-align-sm="center start"],
[layout-align-sm="center end"] {
justify-content: center;
}
[layout-align-sm="end"],
[layout-align-sm="end center"],
[layout-align-sm="end start"],
[layout-align-sm="end end"] {
justify-content: flex-end;
}
[layout-align-sm="space-around"],
[layout-align-sm="space-around center"],
[layout-align-sm="space-around start"],
[layout-align-sm="space-around end"] {
justify-content: space-around;
}
[layout-align-sm="space-between"],
[layout-align-sm="space-between center"],
[layout-align-sm="space-between start"],
[layout-align-sm="space-between end"] {
justify-content: space-between;
}
[layout-align-sm="center start"],
[layout-align-sm="start start"],
[layout-align-sm="end start"],
[layout-align-sm="space-between start"],
[layout-align-sm="space-around start"] {
align-items: flex-start;
}
[layout-align-sm="center center"],
[layout-align-sm="start center"],
[layout-align-sm="end center"],
[layout-align-sm="space-between center"],
[layout-align-sm="space-around center"] {
align-items: center;
max-width: 100%;
}
[layout-align-sm="center end"],
[layout-align-sm="start end"],
[layout-align-sm="end end"],
[layout-align-sm="space-between end"],
[layout-align-sm="space-around end"] {
align-items: flex-end;
}
[flex-sm] {
box-sizing: border-box;
}
[flex-sm] {
flex: 1 1 0%;
}
[flex-sm="initial"] {
flex: 0 1 auto;
}
[flex-sm="auto"] {
flex: 1 1 auto;
}
[flex-sm="none"] {
flex: 0 0 auto;
}
[flex-sm="5"] {
flex: 0 0 5%;
}
[layout="row"] > [flex-sm="5"] {
max-width: 5%;
max-height: 100%;
}
[layout="column"] > [flex-sm="5"] {
max-width: 100%;
max-height: 5%;
}
[flex-sm="10"] {
flex: 0 0 10%;
}
[layout="row"] > [flex-sm="10"] {
max-width: 10%;
max-height: 100%;
}
[layout="column"] > [flex-sm="10"] {
max-width: 100%;
max-height: 10%;
}
[flex-sm="15"] {
flex: 0 0 15%;
}
[layout="row"] > [flex-sm="15"] {
max-width: 15%;
max-height: 100%;
}
[layout="column"] > [flex-sm="15"] {
max-width: 100%;
max-height: 15%;
}
[flex-sm="20"] {
flex: 0 0 20%;
}
[layout="row"] > [flex-sm="20"] {
max-width: 20%;
max-height: 100%;
}
[layout="column"] > [flex-sm="20"] {
max-width: 100%;
max-height: 20%;
}
[flex-sm="25"] {
flex: 0 0 25%;
}
[layout="row"] > [flex-sm="25"] {
max-width: 25%;
max-height: 100%;
}
[layout="column"] > [flex-sm="25"] {
max-width: 100%;
max-height: 25%;
}
[flex-sm="30"] {
flex: 0 0 30%;
}
[layout="row"] > [flex-sm="30"] {
max-width: 30%;
max-height: 100%;
}
[layout="column"] > [flex-sm="30"] {
max-width: 100%;
max-height: 30%;
}
[flex-sm="35"] {
flex: 0 0 35%;
}
[layout="row"] > [flex-sm="35"] {
max-width: 35%;
max-height: 100%;
}
[layout="column"] > [flex-sm="35"] {
max-width: 100%;
max-height: 35%;
}
[flex-sm="40"] {
flex: 0 0 40%;
}
[layout="row"] > [flex-sm="40"] {
max-width: 40%;
max-height: 100%;
}
[layout="column"] > [flex-sm="40"] {
max-width: 100%;
max-height: 40%;
}
[flex-sm="45"] {
flex: 0 0 45%;
}
[layout="row"] > [flex-sm="45"] {
max-width: 45%;
max-height: 100%;
}
[layout="column"] > [flex-sm="45"] {
max-width: 100%;
max-height: 45%;
}
[flex-sm="50"] {
flex: 0 0 50%;
}
[layout="row"] > [flex-sm="50"] {
max-width: 50%;
max-height: 100%;
}
[layout="column"] > [flex-sm="50"] {
max-width: 100%;
max-height: 50%;
}
[flex-sm="55"] {
flex: 0 0 55%;
}
[layout="row"] > [flex-sm="55"] {
max-width: 55%;
max-height: 100%;
}
[layout="column"] > [flex-sm="55"] {
max-width: 100%;
max-height: 55%;
}
[flex-sm="60"] {
flex: 0 0 60%;
}
[layout="row"] > [flex-sm="60"] {
max-width: 60%;
max-height: 100%;
}
[layout="column"] > [flex-sm="60"] {
max-width: 100%;
max-height: 60%;
}
[flex-sm="65"] {
flex: 0 0 65%;
}
[layout="row"] > [flex-sm="65"] {
max-width: 65%;
max-height: 100%;
}
[layout="column"] > [flex-sm="65"] {
max-width: 100%;
max-height: 65%;
}
[flex-sm="70"] {
flex: 0 0 70%;
}
[layout="row"] > [flex-sm="70"] {
max-width: 70%;
max-height: 100%;
}
[layout="column"] > [flex-sm="70"] {
max-width: 100%;
max-height: 70%;
}
[flex-sm="75"] {
flex: 0 0 75%;
}
[layout="row"] > [flex-sm="75"] {
max-width: 75%;
max-height: 100%;
}
[layout="column"] > [flex-sm="75"] {
max-width: 100%;
max-height: 75%;
}
[flex-sm="80"] {
flex: 0 0 80%;
}
[layout="row"] > [flex-sm="80"] {
max-width: 80%;
max-height: 100%;
}
[layout="column"] > [flex-sm="80"] {
max-width: 100%;
max-height: 80%;
}
[flex-sm="85"] {
flex: 0 0 85%;
}
[layout="row"] > [flex-sm="85"] {
max-width: 85%;
max-height: 100%;
}
[layout="column"] > [flex-sm="85"] {
max-width: 100%;
max-height: 85%;
}
[flex-sm="90"] {
flex: 0 0 90%;
}
[layout="row"] > [flex-sm="90"] {
max-width: 90%;
max-height: 100%;
}
[layout="column"] > [flex-sm="90"] {
max-width: 100%;
max-height: 90%;
}
[flex-sm="95"] {
flex: 0 0 95%;
}
[layout="row"] > [flex-sm="95"] {
max-width: 95%;
max-height: 100%;
}
[layout="column"] > [flex-sm="95"] {
max-width: 100%;
max-height: 95%;
}
[flex-sm="100"] {
flex: 0 0 100%;
}
[layout="row"] > [flex-sm="100"] {
max-width: 100%;
max-height: 100%;
}
[layout="column"] > [flex-sm="100"] {
max-width: 100%;
max-height: 100%;
}
[flex-sm="33"],
[flex-sm="34"] {
flex: 1 1 33%;
}
[flex-sm="66"],
[flex-sm="67"] {
flex: 1 1 67%;
}
[layout="row"] > [flex-sm="33"],
[layout="row"] > [flex-sm="34"] {
max-width: 33%;
max-height: 100%;
}
[layout="row"] > [flex-sm="66"],
[layout="row"] > [flex-sm="67"] {
max-width: 67%;
max-height: 100%;
}
[layout="column"] > [flex-sm="33"],
[layout="column"] > [flex-sm="34"] {
max-width: 100%;
max-height: 33%;
}
[layout="column"] > [flex-sm="66"],
[layout="column"] > [flex-sm="67"] {
max-width: 100%;
max-height: 67%;
}
}
@media (min-width: 37.5em) {
[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;
}
[offset-gt-sm="0"] {
margin-left: 0%;
}
[offset-gt-sm="5"] {
margin-left: 5%;
}
[offset-gt-sm="10"] {
margin-left: 10%;
}
[offset-gt-sm="15"] {
margin-left: 15%;
}
[offset-gt-sm="20"] {
margin-left: 20%;
}
[offset-gt-sm="25"] {
margin-left: 25%;
}
[offset-gt-sm="30"] {
margin-left: 30%;
}
[offset-gt-sm="35"] {
margin-left: 35%;
}
[offset-gt-sm="40"] {
margin-left: 40%;
}
[offset-gt-sm="45"] {
margin-left: 45%;
}
[offset-gt-sm="50"] {
margin-left: 50%;
}
[offset-gt-sm="55"] {
margin-left: 55%;
}
[offset-gt-sm="60"] {
margin-left: 60%;
}
[offset-gt-sm="65"] {
margin-left: 65%;
}
[offset-gt-sm="70"] {
margin-left: 70%;
}
[offset-gt-sm="75"] {
margin-left: 75%;
}
[offset-gt-sm="80"] {
margin-left: 80%;
}
[offset-gt-sm="85"] {
margin-left: 85%;
}
[offset-gt-sm="90"] {
margin-left: 90%;
}
[offset-gt-sm="95"] {
margin-left: 95%;
}
[offset-gt-sm="33"],
[offset-gt-sm="34"] {
margin-left: 33%;
}
[offset-gt-sm="66"],
[offset-gt-sm="67"] {
margin-left: 67%;
}
[layout-align-gt-sm="center"],
[layout-align-gt-sm="center center"],
[layout-align-gt-sm="center start"],
[layout-align-gt-sm="center end"] {
justify-content: center;
}
[layout-align-gt-sm="end"],
[layout-align-gt-sm="end center"],
[layout-align-gt-sm="end start"],
[layout-align-gt-sm="end end"] {
justify-content: flex-end;
}
[layout-align-gt-sm="space-around"],
[layout-align-gt-sm="space-around center"],
[layout-align-gt-sm="space-around start"],
[layout-align-gt-sm="space-around end"] {
justify-content: space-around;
}
[layout-align-gt-sm="space-between"],
[layout-align-gt-sm="space-between center"],
[layout-align-gt-sm="space-between start"],
[layout-align-gt-sm="space-between end"] {
justify-content: space-between;
}
[layout-align-gt-sm="center start"],
[layout-align-gt-sm="start start"],
[layout-align-gt-sm="end start"],
[layout-align-gt-sm="space-between start"],
[layout-align-gt-sm="space-around start"] {
align-items: flex-start;
}
[layout-align-gt-sm="center center"],
[layout-align-gt-sm="start center"],
[layout-align-gt-sm="end center"],
[layout-align-gt-sm="space-between center"],
[layout-align-gt-sm="space-around center"] {
align-items: center;
max-width: 100%;
}
[layout-align-gt-sm="center end"],
[layout-align-gt-sm="start end"],
[layout-align-gt-sm="end end"],
[layout-align-gt-sm="space-between end"],
[layout-align-gt-sm="space-around end"] {
align-items: flex-end;
}
[flex-gt-sm] {
box-sizing: border-box;
}
[flex-gt-sm] {
flex: 1 1 0%;
}
[flex-gt-sm="initial"] {
flex: 0 1 auto;
}
[flex-gt-sm="auto"] {
flex: 1 1 auto;
}
[flex-gt-sm="none"] {
flex: 0 0 auto;
}
[flex-gt-sm="5"] {
flex: 0 0 5%;
}
[layout="row"] > [flex-gt-sm="5"] {
max-width: 5%;
max-height: 100%;
}
[layout="column"] > [flex-gt-sm="5"] {
max-width: 100%;
max-height: 5%;
}
[flex-gt-sm="10"] {
flex: 0 0 10%;
}
[layout="row"] > [flex-gt-sm="10"] {
max-width: 10%;
max-height: 100%;
}
[layout="column"] > [flex-gt-sm="10"] {
max-width: 100%;
max-height: 10%;
}
[flex-gt-sm="15"] {
flex: 0 0 15%;
}
[layout="row"] > [flex-gt-sm="15"] {
max-width: 15%;
max-height: 100%;
}
[layout="column"] > [flex-gt-sm="15"] {
max-width: 100%;
max-height: 15%;
}
[flex-gt-sm="20"] {
flex: 0 0 20%;
}
[layout="row"] > [flex-gt-sm="20"] {
max-width: 20%;
max-height: 100%;
}
[layout="column"] > [flex-gt-sm="20"] {
max-width: 100%;
max-height: 20%;
}
[flex-gt-sm="25"] {
flex: 0 0 25%;
}
[layout="row"] > [flex-gt-sm="25"] {
max-width: 25%;
max-height: 100%;
}
[layout="column"] > [flex-gt-sm="25"] {
max-width: 100%;
max-height: 25%;
}
[flex-gt-sm="30"] {
flex: 0 0 30%;
}
[layout="row"] > [flex-gt-sm="30"] {
max-width: 30%;
max-height: 100%;
}
[layout="column"] > [flex-gt-sm="30"] {
max-width: 100%;
max-height: 30%;
}
[flex-gt-sm="35"] {
flex: 0 0 35%;
}
[layout="row"] > [flex-gt-sm="35"] {
max-width: 35%;
max-height: 100%;
}
[layout="column"] > [flex-gt-sm="35"] {
max-width: 100%;
max-height: 35%;
}
[flex-gt-sm="40"] {
flex: 0 0 40%;
}
[layout="row"] > [flex-gt-sm="40"] {
max-width: 40%;
max-height: 100%;
}
[layout="column"] > [flex-gt-sm="40"] {
max-width: 100%;
max-height: 40%;
}
[flex-gt-sm="45"] {
flex: 0 0 45%;
}
[layout="row"] > [flex-gt-sm="45"] {
max-width: 45%;
max-height: 100%;
}
[layout="column"] > [flex-gt-sm="45"] {
max-width: 100%;
max-height: 45%;
}
[flex-gt-sm="50"] {
flex: 0 0 50%;
}
[layout="row"] > [flex-gt-sm="50"] {
max-width: 50%;
max-height: 100%;
}
[layout="column"] > [flex-gt-sm="50"] {
max-width: 100%;
max-height: 50%;
}
[flex-gt-sm="55"] {
flex: 0 0 55%;
}
[layout="row"] > [flex-gt-sm="55"] {
max-width: 55%;
max-height: 100%;
}
[layout="column"] > [flex-gt-sm="55"] {
max-width: 100%;
max-height: 55%;
}
[flex-gt-sm="60"] {
flex: 0 0 60%;
}
[layout="row"] > [flex-gt-sm="60"] {
max-width: 60%;
max-height: 100%;
}
[layout="column"] > [flex-gt-sm="60"] {
max-width: 100%;
max-height: 60%;
}
[flex-gt-sm="65"] {
flex: 0 0 65%;
}
[layout="row"] > [flex-gt-sm="65"] {
max-width: 65%;
max-height: 100%;
}
[layout="column"] > [flex-gt-sm="65"] {
max-width: 100%;
max-height: 65%;
}
[flex-gt-sm="70"] {
flex: 0 0 70%;
}
[layout="row"] > [flex-gt-sm="70"] {
max-width: 70%;
max-height: 100%;
}
[layout="column"] > [flex-gt-sm="70"] {
max-width: 100%;
max-height: 70%;
}
[flex-gt-sm="75"] {
flex: 0 0 75%;
}
[layout="row"] > [flex-gt-sm="75"] {
max-width: 75%;
max-height: 100%;
}
[layout="column"] > [flex-gt-sm="75"] {
max-width: 100%;
max-height: 75%;
}
[flex-gt-sm="80"] {
flex: 0 0 80%;
}
[layout="row"] > [flex-gt-sm="80"] {
max-width: 80%;
max-height: 100%;
}
[layout="column"] > [flex-gt-sm="80"] {
max-width: 100%;
max-height: 80%;
}
[flex-gt-sm="85"] {
flex: 0 0 85%;
}
[layout="row"] > [flex-gt-sm="85"] {
max-width: 85%;
max-height: 100%;
}
[layout="column"] > [flex-gt-sm="85"] {
max-width: 100%;
max-height: 85%;
}
[flex-gt-sm="90"] {
flex: 0 0 90%;
}
[layout="row"] > [flex-gt-sm="90"] {
max-width: 90%;
max-height: 100%;
}
[layout="column"] > [flex-gt-sm="90"] {
max-width: 100%;
max-height: 90%;
}
[flex-gt-sm="95"] {
flex: 0 0 95%;
}
[layout="row"] > [flex-gt-sm="95"] {
max-width: 95%;
max-height: 100%;
}
[layout="column"] > [flex-gt-sm="95"] {
max-width: 100%;
max-height: 95%;
}
[flex-gt-sm="100"] {
flex: 0 0 100%;
}
[layout="row"] > [flex-gt-sm="100"] {
max-width: 100%;
max-height: 100%;
}
[layout="column"] > [flex-gt-sm="100"] {
max-width: 100%;
max-height: 100%;
}
[flex-gt-sm="33"],
[flex-gt-sm="34"] {
flex: 1 1 33%;
}
[flex-gt-sm="66"],
[flex-gt-sm="67"] {
flex: 1 1 67%;
}
[layout="row"] > [flex-gt-sm="33"],
[layout="row"] > [flex-gt-sm="34"] {
max-width: 33%;
max-height: 100%;
}
[layout="row"] > [flex-gt-sm="66"],
[layout="row"] > [flex-gt-sm="67"] {
max-width: 67%;
max-height: 100%;
}
[layout="column"] > [flex-gt-sm="33"],
[layout="column"] > [flex-gt-sm="34"] {
max-width: 100%;
max-height: 33%;
}
[layout="column"] > [flex-gt-sm="66"],
[layout="column"] > [flex-gt-sm="67"] {
max-width: 100%;
max-height: 67%;
}
}
@media (min-width: 37.5em) and (max-width: 60em) {
[hide]:not([show-gt-sm]):not([show-md]):not([show]),
[hide-gt-sm]:not([show-gt-sm]):not([show-md]):not([show]) {
display: none;
}
[hide-md]:not([show-md]):not([show]) {
display: none;
}
[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;
}
[offset-md="0"] {
margin-left: 0%;
}
[offset-md="5"] {
margin-left: 5%;
}
[offset-md="10"] {
margin-left: 10%;
}
[offset-md="15"] {
margin-left: 15%;
}
[offset-md="20"] {
margin-left: 20%;
}
[offset-md="25"] {
margin-left: 25%;
}
[offset-md="30"] {
margin-left: 30%;
}
[offset-md="35"] {
margin-left: 35%;
}
[offset-md="40"] {
margin-left: 40%;
}
[offset-md="45"] {
margin-left: 45%;
}
[offset-md="50"] {
margin-left: 50%;
}
[offset-md="55"] {
margin-left: 55%;
}
[offset-md="60"] {
margin-left: 60%;
}
[offset-md="65"] {
margin-left: 65%;
}
[offset-md="70"] {
margin-left: 70%;
}
[offset-md="75"] {
margin-left: 75%;
}
[offset-md="80"] {
margin-left: 80%;
}
[offset-md="85"] {
margin-left: 85%;
}
[offset-md="90"] {
margin-left: 90%;
}
[offset-md="95"] {
margin-left: 95%;
}
[offset-md="33"],
[offset-md="34"] {
margin-left: 33%;
}
[offset-md="66"],
[offset-md="67"] {
margin-left: 67%;
}
[layout-align-md="center"],
[layout-align-md="center center"],
[layout-align-md="center start"],
[layout-align-md="center end"] {
justify-content: center;
}
[layout-align-md="end"],
[layout-align-md="end center"],
[layout-align-md="end start"],
[layout-align-md="end end"] {
justify-content: flex-end;
}
[layout-align-md="space-around"],
[layout-align-md="space-around center"],
[layout-align-md="space-around start"],
[layout-align-md="space-around end"] {
justify-content: space-around;
}
[layout-align-md="space-between"],
[layout-align-md="space-between center"],
[layout-align-md="space-between start"],
[layout-align-md="space-between end"] {
justify-content: space-between;
}
[layout-align-md="center start"],
[layout-align-md="start start"],
[layout-align-md="end start"],
[layout-align-md="space-between start"],
[layout-align-md="space-around start"] {
align-items: flex-start;
}
[layout-align-md="center center"],
[layout-align-md="start center"],
[layout-align-md="end center"],
[layout-align-md="space-between center"],
[layout-align-md="space-around center"] {
align-items: center;
max-width: 100%;
}
[layout-align-md="center end"],
[layout-align-md="start end"],
[layout-align-md="end end"],
[layout-align-md="space-between end"],
[layout-align-md="space-around end"] {
align-items: flex-end;
}
[flex-md] {
box-sizing: border-box;
}
[flex-md] {
flex: 1 1 0%;
}
[flex-md="initial"] {
flex: 0 1 auto;
}
[flex-md="auto"] {
flex: 1 1 auto;
}
[flex-md="none"] {
flex: 0 0 auto;
}
[flex-md="5"] {
flex: 0 0 5%;
}
[layout="row"] > [flex-md="5"] {
max-width: 5%;
max-height: 100%;
}
[layout="column"] > [flex-md="5"] {
max-width: 100%;
max-height: 5%;
}
[flex-md="10"] {
flex: 0 0 10%;
}
[layout="row"] > [flex-md="10"] {
max-width: 10%;
max-height: 100%;
}
[layout="column"] > [flex-md="10"] {
max-width: 100%;
max-height: 10%;
}
[flex-md="15"] {
flex: 0 0 15%;
}
[layout="row"] > [flex-md="15"] {
max-width: 15%;
max-height: 100%;
}
[layout="column"] > [flex-md="15"] {
max-width: 100%;
max-height: 15%;
}
[flex-md="20"] {
flex: 0 0 20%;
}
[layout="row"] > [flex-md="20"] {
max-width: 20%;
max-height: 100%;
}
[layout="column"] > [flex-md="20"] {
max-width: 100%;
max-height: 20%;
}
[flex-md="25"] {
flex: 0 0 25%;
}
[layout="row"] > [flex-md="25"] {
max-width: 25%;
max-height: 100%;
}
[layout="column"] > [flex-md="25"] {
max-width: 100%;
max-height: 25%;
}
[flex-md="30"] {
flex: 0 0 30%;
}
[layout="row"] > [flex-md="30"] {
max-width: 30%;
max-height: 100%;
}
[layout="column"] > [flex-md="30"] {
max-width: 100%;
max-height: 30%;
}
[flex-md="35"] {
flex: 0 0 35%;
}
[layout="row"] > [flex-md="35"] {
max-width: 35%;
max-height: 100%;
}
[layout="column"] > [flex-md="35"] {
max-width: 100%;
max-height: 35%;
}
[flex-md="40"] {
flex: 0 0 40%;
}
[layout="row"] > [flex-md="40"] {
max-width: 40%;
max-height: 100%;
}
[layout="column"] > [flex-md="40"] {
max-width: 100%;
max-height: 40%;
}
[flex-md="45"] {
flex: 0 0 45%;
}
[layout="row"] > [flex-md="45"] {
max-width: 45%;
max-height: 100%;
}
[layout="column"] > [flex-md="45"] {
max-width: 100%;
max-height: 45%;
}
[flex-md="50"] {
flex: 0 0 50%;
}
[layout="row"] > [flex-md="50"] {
max-width: 50%;
max-height: 100%;
}
[layout="column"] > [flex-md="50"] {
max-width: 100%;
max-height: 50%;
}
[flex-md="55"] {
flex: 0 0 55%;
}
[layout="row"] > [flex-md="55"] {
max-width: 55%;
max-height: 100%;
}
[layout="column"] > [flex-md="55"] {
max-width: 100%;
max-height: 55%;
}
[flex-md="60"] {
flex: 0 0 60%;
}
[layout="row"] > [flex-md="60"] {
max-width: 60%;
max-height: 100%;
}
[layout="column"] > [flex-md="60"] {
max-width: 100%;
max-height: 60%;
}
[flex-md="65"] {
flex: 0 0 65%;
}
[layout="row"] > [flex-md="65"] {
max-width: 65%;
max-height: 100%;
}
[layout="column"] > [flex-md="65"] {
max-width: 100%;
max-height: 65%;
}
[flex-md="70"] {
flex: 0 0 70%;
}
[layout="row"] > [flex-md="70"] {
max-width: 70%;
max-height: 100%;
}
[layout="column"] > [flex-md="70"] {
max-width: 100%;
max-height: 70%;
}
[flex-md="75"] {
flex: 0 0 75%;
}
[layout="row"] > [flex-md="75"] {
max-width: 75%;
max-height: 100%;
}
[layout="column"] > [flex-md="75"] {
max-width: 100%;
max-height: 75%;
}
[flex-md="80"] {
flex: 0 0 80%;
}
[layout="row"] > [flex-md="80"] {
max-width: 80%;
max-height: 100%;
}
[layout="column"] > [flex-md="80"] {
max-width: 100%;
max-height: 80%;
}
[flex-md="85"] {
flex: 0 0 85%;
}
[layout="row"] > [flex-md="85"] {
max-width: 85%;
max-height: 100%;
}
[layout="column"] > [flex-md="85"] {
max-width: 100%;
max-height: 85%;
}
[flex-md="90"] {
flex: 0 0 90%;
}
[layout="row"] > [flex-md="90"] {
max-width: 90%;
max-height: 100%;
}
[layout="column"] > [flex-md="90"] {
max-width: 100%;
max-height: 90%;
}
[flex-md="95"] {
flex: 0 0 95%;
}
[layout="row"] > [flex-md="95"] {
max-width: 95%;
max-height: 100%;
}
[layout="column"] > [flex-md="95"] {
max-width: 100%;
max-height: 95%;
}
[flex-md="100"] {
flex: 0 0 100%;
}
[layout="row"] > [flex-md="100"] {
max-width: 100%;
max-height: 100%;
}
[layout="column"] > [flex-md="100"] {
max-width: 100%;
max-height: 100%;
}
[flex-md="33"],
[flex-md="34"] {
flex: 1 1 33%;
}
[flex-md="66"],
[flex-md="67"] {
flex: 1 1 67%;
}
[layout="row"] > [flex-md="33"],
[layout="row"] > [flex-md="34"] {
max-width: 33%;
max-height: 100%;
}
[layout="row"] > [flex-md="66"],
[layout="row"] > [flex-md="67"] {
max-width: 67%;
max-height: 100%;
}
[layout="column"] > [flex-md="33"],
[layout="column"] > [flex-md="34"] {
max-width: 100%;
max-height: 33%;
}
[layout="column"] > [flex-md="66"],
[layout="column"] > [flex-md="67"] {
max-width: 100%;
max-height: 67%;
}
}
@media (min-width: 60em) {
[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;
}
[offset-gt-md="0"] {
margin-left: 0%;
}
[offset-gt-md="5"] {
margin-left: 5%;
}
[offset-gt-md="10"] {
margin-left: 10%;
}
[offset-gt-md="15"] {
margin-left: 15%;
}
[offset-gt-md="20"] {
margin-left: 20%;
}
[offset-gt-md="25"] {
margin-left: 25%;
}
[offset-gt-md="30"] {
margin-left: 30%;
}
[offset-gt-md="35"] {
margin-left: 35%;
}
[offset-gt-md="40"] {
margin-left: 40%;
}
[offset-gt-md="45"] {
margin-left: 45%;
}
[offset-gt-md="50"] {
margin-left: 50%;
}
[offset-gt-md="55"] {
margin-left: 55%;
}
[offset-gt-md="60"] {
margin-left: 60%;
}
[offset-gt-md="65"] {
margin-left: 65%;
}
[offset-gt-md="70"] {
margin-left: 70%;
}
[offset-gt-md="75"] {
margin-left: 75%;
}
[offset-gt-md="80"] {
margin-left: 80%;
}
[offset-gt-md="85"] {
margin-left: 85%;
}
[offset-gt-md="90"] {
margin-left: 90%;
}
[offset-gt-md="95"] {
margin-left: 95%;
}
[offset-gt-md="33"],
[offset-gt-md="34"] {
margin-left: 33%;
}
[offset-gt-md="66"],
[offset-gt-md="67"] {
margin-left: 67%;
}
[layout-align-gt-md="center"],
[layout-align-gt-md="center center"],
[layout-align-gt-md="center start"],
[layout-align-gt-md="center end"] {
justify-content: center;
}
[layout-align-gt-md="end"],
[layout-align-gt-md="end center"],
[layout-align-gt-md="end start"],
[layout-align-gt-md="end end"] {
justify-content: flex-end;
}
[layout-align-gt-md="space-around"],
[layout-align-gt-md="space-around center"],
[layout-align-gt-md="space-around start"],
[layout-align-gt-md="space-around end"] {
justify-content: space-around;
}
[layout-align-gt-md="space-between"],
[layout-align-gt-md="space-between center"],
[layout-align-gt-md="space-between start"],
[layout-align-gt-md="space-between end"] {
justify-content: space-between;
}
[layout-align-gt-md="center start"],
[layout-align-gt-md="start start"],
[layout-align-gt-md="end start"],
[layout-align-gt-md="space-between start"],
[layout-align-gt-md="space-around start"] {
align-items: flex-start;
}
[layout-align-gt-md="center center"],
[layout-align-gt-md="start center"],
[layout-align-gt-md="end center"],
[layout-align-gt-md="space-between center"],
[layout-align-gt-md="space-around center"] {
align-items: center;
max-width: 100%;
}
[layout-align-gt-md="center end"],
[layout-align-gt-md="start end"],
[layout-align-gt-md="end end"],
[layout-align-gt-md="space-between end"],
[layout-align-gt-md="space-around end"] {
align-items: flex-end;
}
[flex-gt-md] {
box-sizing: border-box;
}
[flex-gt-md] {
flex: 1 1 0%;
}
[flex-gt-md="initial"] {
flex: 0 1 auto;
}
[flex-gt-md="auto"] {
flex: 1 1 auto;
}
[flex-gt-md="none"] {
flex: 0 0 auto;
}
[flex-gt-md="5"] {
flex: 0 0 5%;
}
[layout="row"] > [flex-gt-md="5"] {
max-width: 5%;
max-height: 100%;
}
[layout="column"] > [flex-gt-md="5"] {
max-width: 100%;
max-height: 5%;
}
[flex-gt-md="10"] {
flex: 0 0 10%;
}
[layout="row"] > [flex-gt-md="10"] {
max-width: 10%;
max-height: 100%;
}
[layout="column"] > [flex-gt-md="10"] {
max-width: 100%;
max-height: 10%;
}
[flex-gt-md="15"] {
flex: 0 0 15%;
}
[layout="row"] > [flex-gt-md="15"] {
max-width: 15%;
max-height: 100%;
}
[layout="column"] > [flex-gt-md="15"] {
max-width: 100%;
max-height: 15%;
}
[flex-gt-md="20"] {
flex: 0 0 20%;
}
[layout="row"] > [flex-gt-md="20"] {
max-width: 20%;
max-height: 100%;
}
[layout="column"] > [flex-gt-md="20"] {
max-width: 100%;
max-height: 20%;
}
[flex-gt-md="25"] {
flex: 0 0 25%;
}
[layout="row"] > [flex-gt-md="25"] {
max-width: 25%;
max-height: 100%;
}
[layout="column"] > [flex-gt-md="25"] {
max-width: 100%;
max-height: 25%;
}
[flex-gt-md="30"] {
flex: 0 0 30%;
}
[layout="row"] > [flex-gt-md="30"] {
max-width: 30%;
max-height: 100%;
}
[layout="column"] > [flex-gt-md="30"] {
max-width: 100%;
max-height: 30%;
}
[flex-gt-md="35"] {
flex: 0 0 35%;
}
[layout="row"] > [flex-gt-md="35"] {
max-width: 35%;
max-height: 100%;
}
[layout="column"] > [flex-gt-md="35"] {
max-width: 100%;
max-height: 35%;
}
[flex-gt-md="40"] {
flex: 0 0 40%;
}
[layout="row"] > [flex-gt-md="40"] {
max-width: 40%;
max-height: 100%;
}
[layout="column"] > [flex-gt-md="40"] {
max-width: 100%;
max-height: 40%;
}
[flex-gt-md="45"] {
flex: 0 0 45%;
}
[layout="row"] > [flex-gt-md="45"] {
max-width: 45%;
max-height: 100%;
}
[layout="column"] > [flex-gt-md="45"] {
max-width: 100%;
max-height: 45%;
}
[flex-gt-md="50"] {
flex: 0 0 50%;
}
[layout="row"] > [flex-gt-md="50"] {
max-width: 50%;
max-height: 100%;
}
[layout="column"] > [flex-gt-md="50"] {
max-width: 100%;
max-height: 50%;
}
[flex-gt-md="55"] {
flex: 0 0 55%;
}
[layout="row"] > [flex-gt-md="55"] {
max-width: 55%;
max-height: 100%;
}
[layout="column"] > [flex-gt-md="55"] {
max-width: 100%;
max-height: 55%;
}
[flex-gt-md="60"] {
flex: 0 0 60%;
}
[layout="row"] > [flex-gt-md="60"] {
max-width: 60%;
max-height: 100%;
}
[layout="column"] > [flex-gt-md="60"] {
max-width: 100%;
max-height: 60%;
}
[flex-gt-md="65"] {
flex: 0 0 65%;
}
[layout="row"] > [flex-gt-md="65"] {
max-width: 65%;
max-height: 100%;
}
[layout="column"] > [flex-gt-md="65"] {
max-width: 100%;
max-height: 65%;
}
[flex-gt-md="70"] {
flex: 0 0 70%;
}
[layout="row"] > [flex-gt-md="70"] {
max-width: 70%;
max-height: 100%;
}
[layout="column"] > [flex-gt-md="70"] {
max-width: 100%;
max-height: 70%;
}
[flex-gt-md="75"] {
flex: 0 0 75%;
}
[layout="row"] > [flex-gt-md="75"] {
max-width: 75%;
max-height: 100%;
}
[layout="column"] > [flex-gt-md="75"] {
max-width: 100%;
max-height: 75%;
}
[flex-gt-md="80"] {
flex: 0 0 80%;
}
[layout="row"] > [flex-gt-md="80"] {
max-width: 80%;
max-height: 100%;
}
[layout="column"] > [flex-gt-md="80"] {
max-width: 100%;
max-height: 80%;
}
[flex-gt-md="85"] {
flex: 0 0 85%;
}
[layout="row"] > [flex-gt-md="85"] {
max-width: 85%;
max-height: 100%;
}
[layout="column"] > [flex-gt-md="85"] {
max-width: 100%;
max-height: 85%;
}
[flex-gt-md="90"] {
flex: 0 0 90%;
}
[layout="row"] > [flex-gt-md="90"] {
max-width: 90%;
max-height: 100%;
}
[layout="column"] > [flex-gt-md="90"] {
max-width: 100%;
max-height: 90%;
}
[flex-gt-md="95"] {
flex: 0 0 95%;
}
[layout="row"] > [flex-gt-md="95"] {
max-width: 95%;
max-height: 100%;
}
[layout="column"] > [flex-gt-md="95"] {
max-width: 100%;
max-height: 95%;
}
[flex-gt-md="100"] {
flex: 0 0 100%;
}
[layout="row"] > [flex-gt-md="100"] {
max-width: 100%;
max-height: 100%;
}
[layout="column"] > [flex-gt-md="100"] {
max-width: 100%;
max-height: 100%;
}
[flex-gt-md="33"],
[flex-gt-md="34"] {
flex: 1 1 33%;
}
[flex-gt-md="66"],
[flex-gt-md="67"] {
flex: 1 1 67%;
}
[layout="row"] > [flex-gt-md="33"],
[layout="row"] > [flex-gt-md="34"] {
max-width: 33%;
max-height: 100%;
}
[layout="row"] > [flex-gt-md="66"],
[layout="row"] > [flex-gt-md="67"] {
max-width: 67%;
max-height: 100%;
}
[layout="column"] > [flex-gt-md="33"],
[layout="column"] > [flex-gt-md="34"] {
max-width: 100%;
max-height: 33%;
}
[layout="column"] > [flex-gt-md="66"],
[layout="column"] > [flex-gt-md="67"] {
max-width: 100%;
max-height: 67%;
}
}
@media (min-width: 60em) and (max-width: 75em) {
[hide]:not([show-gt-sm]):not([show-gt-md]):not([show-lg]):not([show]),
[hide-gt-sm]:not([show-gt-sm]):not([show-gt-md]):not([show-lg]):not([show]),
[hide-gt-md]:not([show-gt-sm]):not([show-gt-md]):not([show-lg]):not([show]) {
display: none;
}
[hide-lg]:not([show-lg]):not([show]) {
display: none;
}
[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;
}
[offset-lg="0"] {
margin-left: 0%;
}
[offset-lg="5"] {
margin-left: 5%;
}
[offset-lg="10"] {
margin-left: 10%;
}
[offset-lg="15"] {
margin-left: 15%;
}
[offset-lg="20"] {
margin-left: 20%;
}
[offset-lg="25"] {
margin-left: 25%;
}
[offset-lg="30"] {
margin-left: 30%;
}
[offset-lg="35"] {
margin-left: 35%;
}
[offset-lg="40"] {
margin-left: 40%;
}
[offset-lg="45"] {
margin-left: 45%;
}
[offset-lg="50"] {
margin-left: 50%;
}
[offset-lg="55"] {
margin-left: 55%;
}
[offset-lg="60"] {
margin-left: 60%;
}
[offset-lg="65"] {
margin-left: 65%;
}
[offset-lg="70"] {
margin-left: 70%;
}
[offset-lg="75"] {
margin-left: 75%;
}
[offset-lg="80"] {
margin-left: 80%;
}
[offset-lg="85"] {
margin-left: 85%;
}
[offset-lg="90"] {
margin-left: 90%;
}
[offset-lg="95"] {
margin-left: 95%;
}
[offset-lg="33"],
[offset-lg="34"] {
margin-left: 33%;
}
[offset-lg="66"],
[offset-lg="67"] {
margin-left: 67%;
}
[layout-align-lg="center"],
[layout-align-lg="center center"],
[layout-align-lg="center start"],
[layout-align-lg="center end"] {
justify-content: center;
}
[layout-align-lg="end"],
[layout-align-lg="end center"],
[layout-align-lg="end start"],
[layout-align-lg="end end"] {
justify-content: flex-end;
}
[layout-align-lg="space-around"],
[layout-align-lg="space-around center"],
[layout-align-lg="space-around start"],
[layout-align-lg="space-around end"] {
justify-content: space-around;
}
[layout-align-lg="space-between"],
[layout-align-lg="space-between center"],
[layout-align-lg="space-between start"],
[layout-align-lg="space-between end"] {
justify-content: space-between;
}
[layout-align-lg="center start"],
[layout-align-lg="start start"],
[layout-align-lg="end start"],
[layout-align-lg="space-between start"],
[layout-align-lg="space-around start"] {
align-items: flex-start;
}
[layout-align-lg="center center"],
[layout-align-lg="start center"],
[layout-align-lg="end center"],
[layout-align-lg="space-between center"],
[layout-align-lg="space-around center"] {
align-items: center;
max-width: 100%;
}
[layout-align-lg="center end"],
[layout-align-lg="start end"],
[layout-align-lg="end end"],
[layout-align-lg="space-between end"],
[layout-align-lg="space-around end"] {
align-items: flex-end;
}
[flex-lg] {
box-sizing: border-box;
}
[flex-lg] {
flex: 1 1 0%;
}
[flex-lg="initial"] {
flex: 0 1 auto;
}
[flex-lg="auto"] {
flex: 1 1 auto;
}
[flex-lg="none"] {
flex: 0 0 auto;
}
[flex-lg="5"] {
flex: 0 0 5%;
}
[layout="row"] > [flex-lg="5"] {
max-width: 5%;
max-height: 100%;
}
[layout="column"] > [flex-lg="5"] {
max-width: 100%;
max-height: 5%;
}
[flex-lg="10"] {
flex: 0 0 10%;
}
[layout="row"] > [flex-lg="10"] {
max-width: 10%;
max-height: 100%;
}
[layout="column"] > [flex-lg="10"] {
max-width: 100%;
max-height: 10%;
}
[flex-lg="15"] {
flex: 0 0 15%;
}
[layout="row"] > [flex-lg="15"] {
max-width: 15%;
max-height: 100%;
}
[layout="column"] > [flex-lg="15"] {
max-width: 100%;
max-height: 15%;
}
[flex-lg="20"] {
flex: 0 0 20%;
}
[layout="row"] > [flex-lg="20"] {
max-width: 20%;
max-height: 100%;
}
[layout="column"] > [flex-lg="20"] {
max-width: 100%;
max-height: 20%;
}
[flex-lg="25"] {
flex: 0 0 25%;
}
[layout="row"] > [flex-lg="25"] {
max-width: 25%;
max-height: 100%;
}
[layout="column"] > [flex-lg="25"] {
max-width: 100%;
max-height: 25%;
}
[flex-lg="30"] {
flex: 0 0 30%;
}
[layout="row"] > [flex-lg="30"] {
max-width: 30%;
max-height: 100%;
}
[layout="column"] > [flex-lg="30"] {
max-width: 100%;
max-height: 30%;
}
[flex-lg="35"] {
flex: 0 0 35%;
}
[layout="row"] > [flex-lg="35"] {
max-width: 35%;
max-height: 100%;
}
[layout="column"] > [flex-lg="35"] {
max-width: 100%;
max-height: 35%;
}
[flex-lg="40"] {
flex: 0 0 40%;
}
[layout="row"] > [flex-lg="40"] {
max-width: 40%;
max-height: 100%;
}
[layout="column"] > [flex-lg="40"] {
max-width: 100%;
max-height: 40%;
}
[flex-lg="45"] {
flex: 0 0 45%;
}
[layout="row"] > [flex-lg="45"] {
max-width: 45%;
max-height: 100%;
}
[layout="column"] > [flex-lg="45"] {
max-width: 100%;
max-height: 45%;
}
[flex-lg="50"] {
flex: 0 0 50%;
}
[layout="row"] > [flex-lg="50"] {
max-width: 50%;
max-height: 100%;
}
[layout="column"] > [flex-lg="50"] {
max-width: 100%;
max-height: 50%;
}
[flex-lg="55"] {
flex: 0 0 55%;
}
[layout="row"] > [flex-lg="55"] {
max-width: 55%;
max-height: 100%;
}
[layout="column"] > [flex-lg="55"] {
max-width: 100%;
max-height: 55%;
}
[flex-lg="60"] {
flex: 0 0 60%;
}
[layout="row"] > [flex-lg="60"] {
max-width: 60%;
max-height: 100%;
}
[layout="column"] > [flex-lg="60"] {
max-width: 100%;
max-height: 60%;
}
[flex-lg="65"] {
flex: 0 0 65%;
}
[layout="row"] > [flex-lg="65"] {
max-width: 65%;
max-height: 100%;
}
[layout="column"] > [flex-lg="65"] {
max-width: 100%;
max-height: 65%;
}
[flex-lg="70"] {
flex: 0 0 70%;
}
[layout="row"] > [flex-lg="70"] {
max-width: 70%;
max-height: 100%;
}
[layout="column"] > [flex-lg="70"] {
max-width: 100%;
max-height: 70%;
}
[flex-lg="75"] {
flex: 0 0 75%;
}
[layout="row"] > [flex-lg="75"] {
max-width: 75%;
max-height: 100%;
}
[layout="column"] > [flex-lg="75"] {
max-width: 100%;
max-height: 75%;
}
[flex-lg="80"] {
flex: 0 0 80%;
}
[layout="row"] > [flex-lg="80"] {
max-width: 80%;
max-height: 100%;
}
[layout="column"] > [flex-lg="80"] {
max-width: 100%;
max-height: 80%;
}
[flex-lg="85"] {
flex: 0 0 85%;
}
[layout="row"] > [flex-lg="85"] {
max-width: 85%;
max-height: 100%;
}
[layout="column"] > [flex-lg="85"] {
max-width: 100%;
max-height: 85%;
}
[flex-lg="90"] {
flex: 0 0 90%;
}
[layout="row"] > [flex-lg="90"] {
max-width: 90%;
max-height: 100%;
}
[layout="column"] > [flex-lg="90"] {
max-width: 100%;
max-height: 90%;
}
[flex-lg="95"] {
flex: 0 0 95%;
}
[layout="row"] > [flex-lg="95"] {
max-width: 95%;
max-height: 100%;
}
[layout="column"] > [flex-lg="95"] {
max-width: 100%;
max-height: 95%;
}
[flex-lg="100"] {
flex: 0 0 100%;
}
[layout="row"] > [flex-lg="100"] {
max-width: 100%;
max-height: 100%;
}
[layout="column"] > [flex-lg="100"] {
max-width: 100%;
max-height: 100%;
}
[flex-lg="33"],
[flex-lg="34"] {
flex: 1 1 33%;
}
[flex-lg="66"],
[flex-lg="67"] {
flex: 1 1 67%;
}
[layout="row"] > [flex-lg="33"],
[layout="row"] > [flex-lg="34"] {
max-width: 33%;
max-height: 100%;
}
[layout="row"] > [flex-lg="66"],
[layout="row"] > [flex-lg="67"] {
max-width: 67%;
max-height: 100%;
}
[layout="column"] > [flex-lg="33"],
[layout="column"] > [flex-lg="34"] {
max-width: 100%;
max-height: 33%;
}
[layout="column"] > [flex-lg="66"],
[layout="column"] > [flex-lg="67"] {
max-width: 100%;
max-height: 67%;
}
}
@media (min-width: 75em) {
[hide-gt-sm]:not([show-gt-sm]):not([show-gt-md]):not([show-gt-lg]):not([show]),
[hide-gt-md]:not([show-gt-sm]):not([show-gt-md]):not([show-gt-lg]):not([show]),
[hide-gt-lg]:not([show-gt-sm]):not([show-gt-md]):not([show-gt-lg]):not([show]),
[hide]:not([show-gt-sm]):not([show-gt-md]):not([show-gt-lg]):not([show]) {
display: none;
}
[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;
}
[offset-gt-lg="0"] {
margin-left: 0%;
}
[offset-gt-lg="5"] {
margin-left: 5%;
}
[offset-gt-lg="10"] {
margin-left: 10%;
}
[offset-gt-lg="15"] {
margin-left: 15%;
}
[offset-gt-lg="20"] {
margin-left: 20%;
}
[offset-gt-lg="25"] {
margin-left: 25%;
}
[offset-gt-lg="30"] {
margin-left: 30%;
}
[offset-gt-lg="35"] {
margin-left: 35%;
}
[offset-gt-lg="40"] {
margin-left: 40%;
}
[offset-gt-lg="45"] {
margin-left: 45%;
}
[offset-gt-lg="50"] {
margin-left: 50%;
}
[offset-gt-lg="55"] {
margin-left: 55%;
}
[offset-gt-lg="60"] {
margin-left: 60%;
}
[offset-gt-lg="65"] {
margin-left: 65%;
}
[offset-gt-lg="70"] {
margin-left: 70%;
}
[offset-gt-lg="75"] {
margin-left: 75%;
}
[offset-gt-lg="80"] {
margin-left: 80%;
}
[offset-gt-lg="85"] {
margin-left: 85%;
}
[offset-gt-lg="90"] {
margin-left: 90%;
}
[offset-gt-lg="95"] {
margin-left: 95%;
}
[offset-gt-lg="33"],
[offset-gt-lg="34"] {
margin-left: 33%;
}
[offset-gt-lg="66"],
[offset-gt-lg="67"] {
margin-left: 67%;
}
[layout-align-gt-lg="center"],
[layout-align-gt-lg="center center"],
[layout-align-gt-lg="center start"],
[layout-align-gt-lg="center end"] {
justify-content: center;
}
[layout-align-gt-lg="end"],
[layout-align-gt-lg="end center"],
[layout-align-gt-lg="end start"],
[layout-align-gt-lg="end end"] {
justify-content: flex-end;
}
[layout-align-gt-lg="space-around"],
[layout-align-gt-lg="space-around center"],
[layout-align-gt-lg="space-around start"],
[layout-align-gt-lg="space-around end"] {
justify-content: space-around;
}
[layout-align-gt-lg="space-between"],
[layout-align-gt-lg="space-between center"],
[layout-align-gt-lg="space-between start"],
[layout-align-gt-lg="space-between end"] {
justify-content: space-between;
}
[layout-align-gt-lg="center start"],
[layout-align-gt-lg="start start"],
[layout-align-gt-lg="end start"],
[layout-align-gt-lg="space-between start"],
[layout-align-gt-lg="space-around start"] {
align-items: flex-start;
}
[layout-align-gt-lg="center center"],
[layout-align-gt-lg="start center"],
[layout-align-gt-lg="end center"],
[layout-align-gt-lg="space-between center"],
[layout-align-gt-lg="space-around center"] {
align-items: center;
max-width: 100%;
}
[layout-align-gt-lg="center end"],
[layout-align-gt-lg="start end"],
[layout-align-gt-lg="end end"],
[layout-align-gt-lg="space-between end"],
[layout-align-gt-lg="space-around end"] {
align-items: flex-end;
}
[flex-gt-lg] {
box-sizing: border-box;
}
[flex-gt-lg] {
flex: 1 1 0%;
}
[flex-gt-lg="initial"] {
flex: 0 1 auto;
}
[flex-gt-lg="auto"] {
flex: 1 1 auto;
}
[flex-gt-lg="none"] {
flex: 0 0 auto;
}
[flex-gt-lg="5"] {
flex: 0 0 5%;
}
[layout="row"] > [flex-gt-lg="5"] {
max-width: 5%;
max-height: 100%;
}
[layout="column"] > [flex-gt-lg="5"] {
max-width: 100%;
max-height: 5%;
}
[flex-gt-lg="10"] {
flex: 0 0 10%;
}
[layout="row"] > [flex-gt-lg="10"] {
max-width: 10%;
max-height: 100%;
}
[layout="column"] > [flex-gt-lg="10"] {
max-width: 100%;
max-height: 10%;
}
[flex-gt-lg="15"] {
flex: 0 0 15%;
}
[layout="row"] > [flex-gt-lg="15"] {
max-width: 15%;
max-height: 100%;
}
[layout="column"] > [flex-gt-lg="15"] {
max-width: 100%;
max-height: 15%;
}
[flex-gt-lg="20"] {
flex: 0 0 20%;
}
[layout="row"] > [flex-gt-lg="20"] {
max-width: 20%;
max-height: 100%;
}
[layout="column"] > [flex-gt-lg="20"] {
max-width: 100%;
max-height: 20%;
}
[flex-gt-lg="25"] {
flex: 0 0 25%;
}
[layout="row"] > [flex-gt-lg="25"] {
max-width: 25%;
max-height: 100%;
}
[layout="column"] > [flex-gt-lg="25"] {
max-width: 100%;
max-height: 25%;
}
[flex-gt-lg="30"] {
flex: 0 0 30%;
}
[layout="row"] > [flex-gt-lg="30"] {
max-width: 30%;
max-height: 100%;
}
[layout="column"] > [flex-gt-lg="30"] {
max-width: 100%;
max-height: 30%;
}
[flex-gt-lg="35"] {
flex: 0 0 35%;
}
[layout="row"] > [flex-gt-lg="35"] {
max-width: 35%;
max-height: 100%;
}
[layout="column"] > [flex-gt-lg="35"] {
max-width: 100%;
max-height: 35%;
}
[flex-gt-lg="40"] {
flex: 0 0 40%;
}
[layout="row"] > [flex-gt-lg="40"] {
max-width: 40%;
max-height: 100%;
}
[layout="column"] > [flex-gt-lg="40"] {
max-width: 100%;
max-height: 40%;
}
[flex-gt-lg="45"] {
flex: 0 0 45%;
}
[layout="row"] > [flex-gt-lg="45"] {
max-width: 45%;
max-height: 100%;
}
[layout="column"] > [flex-gt-lg="45"] {
max-width: 100%;
max-height: 45%;
}
[flex-gt-lg="50"] {
flex: 0 0 50%;
}
[layout="row"] > [flex-gt-lg="50"] {
max-width: 50%;
max-height: 100%;
}
[layout="column"] > [flex-gt-lg="50"] {
max-width: 100%;
max-height: 50%;
}
[flex-gt-lg="55"] {
flex: 0 0 55%;
}
[layout="row"] > [flex-gt-lg="55"] {
max-width: 55%;
max-height: 100%;
}
[layout="column"] > [flex-gt-lg="55"] {
max-width: 100%;
max-height: 55%;
}
[flex-gt-lg="60"] {
flex: 0 0 60%;
}
[layout="row"] > [flex-gt-lg="60"] {
max-width: 60%;
max-height: 100%;
}
[layout="column"] > [flex-gt-lg="60"] {
max-width: 100%;
max-height: 60%;
}
[flex-gt-lg="65"] {
flex: 0 0 65%;
}
[layout="row"] > [flex-gt-lg="65"] {
max-width: 65%;
max-height: 100%;
}
[layout="column"] > [flex-gt-lg="65"] {
max-width: 100%;
max-height: 65%;
}
[flex-gt-lg="70"] {
flex: 0 0 70%;
}
[layout="row"] > [flex-gt-lg="70"] {
max-width: 70%;
max-height: 100%;
}
[layout="column"] > [flex-gt-lg="70"] {
max-width: 100%;
max-height: 70%;
}
[flex-gt-lg="75"] {
flex: 0 0 75%;
}
[layout="row"] > [flex-gt-lg="75"] {
max-width: 75%;
max-height: 100%;
}
[layout="column"] > [flex-gt-lg="75"] {
max-width: 100%;
max-height: 75%;
}
[flex-gt-lg="80"] {
flex: 0 0 80%;
}
[layout="row"] > [flex-gt-lg="80"] {
max-width: 80%;
max-height: 100%;
}
[layout="column"] > [flex-gt-lg="80"] {
max-width: 100%;
max-height: 80%;
}
[flex-gt-lg="85"] {
flex: 0 0 85%;
}
[layout="row"] > [flex-gt-lg="85"] {
max-width: 85%;
max-height: 100%;
}
[layout="column"] > [flex-gt-lg="85"] {
max-width: 100%;
max-height: 85%;
}
[flex-gt-lg="90"] {
flex: 0 0 90%;
}
[layout="row"] > [flex-gt-lg="90"] {
max-width: 90%;
max-height: 100%;
}
[layout="column"] > [flex-gt-lg="90"] {
max-width: 100%;
max-height: 90%;
}
[flex-gt-lg="95"] {
flex: 0 0 95%;
}
[layout="row"] > [flex-gt-lg="95"] {
max-width: 95%;
max-height: 100%;
}
[layout="column"] > [flex-gt-lg="95"] {
max-width: 100%;
max-height: 95%;
}
[flex-gt-lg="100"] {
flex: 0 0 100%;
}
[layout="row"] > [flex-gt-lg="100"] {
max-width: 100%;
max-height: 100%;
}
[layout="column"] > [flex-gt-lg="100"] {
max-width: 100%;
max-height: 100%;
}
[flex-gt-lg="33"],
[flex-gt-lg="34"] {
flex: 1 1 33%;
}
[flex-gt-lg="66"],
[flex-gt-lg="67"] {
flex: 1 1 67%;
}
[layout="row"] > [flex-gt-lg="33"],
[layout="row"] > [flex-gt-lg="34"] {
max-width: 33%;
max-height: 100%;
}
[layout="row"] > [flex-gt-lg="66"],
[layout="row"] > [flex-gt-lg="67"] {
max-width: 67%;
max-height: 100%;
}
[layout="column"] > [flex-gt-lg="33"],
[layout="column"] > [flex-gt-lg="34"] {
max-width: 100%;
max-height: 33%;
}
[layout="column"] > [flex-gt-lg="66"],
[layout="column"] > [flex-gt-lg="67"] {
max-width: 100%;
max-height: 67%;
}
}
/* FONTS */
/* UTILITIES */
/* VARIABLES */
/* COLORS */
/* BACKGROUND */
/* RADI TOOLS*/
/* FONTS */
/* -moz-GRID */
/* PADDING */
/* BOX-SHADOW BORDER */
/* TOOLS */
.centerContainer {
display: block;
margin: 0 auto;
}
.alignleft {
float: left;
margin-right: 1em;
}
.invert {
color: #1f1f1f;
}
.invert a {
color: #bf4040;
text-shadow: 0 1px 0 #f2f2f2;
}
.light {
background: #f2f2f2;
color: #1f1f1f;
}
.input {
background: #f2f2f2;
color: #1f1f1f;
width: 100%;
display: block;
border: 1px solid #1f1f1f;
line-height: 2;
padding: 0 1em;
margin-bottom: 1em;
}
.rounded {
border-radius: 50%;
}
.section {
margin: 0 0 4em;
padding: 1em 10%;
background: #f2f2f2;
}
/* MAIN */
/* BASE */
* {
box-sizing: border-box;
}
body,
html {
background: #f2f2f2;
background-repeat: repeat-y;
background-size: cover;
color: #1f1f1f;
font-family: Cambria;
font-size: 100%;
height: 100%;
}
a,
.link {
text-decoration: none;
color: #bf4040;
text-shadow: 0 1px 0 #1f1f1f;
}
h1,
h2,
h3 {
margin: 0;
padding: .5em 0;
font-family: 'Advent Pro';
}
h1 a,
h2 a,
h3 a {
text-decoration: none;
color: #bf4040;
text-shadow: 0 1px 0 #1f1f1f;
}
p > code {
background: rgba(0, 0, 0, 0.03);
padding: 0 .2em;
}
p:first-child {
font-size: 1.1em;
}
article img,
p img,
footer img {
max-width: 100%;
}
/* FORMS */
.inputtext {
border: 0.4em solid transparent;
}
.inputtext:focus {
border: 0.4em solid #bf4040;
border-radius: .2em;
}
@keyframes blink {
0% {
border: 0.4em solid #bf4040;
}
100% {
border: 0.4em solid #c65353;
}
}
label {
display: block;
width: 100%;
line-height: 2;
}
input[type=text],
input[type=email] {
background: #f2f2f2;
color: #1f1f1f;
width: 100%;
display: block;
border: 1px solid #1f1f1f;
line-height: 2;
padding: 0 1em;
margin-bottom: 1em;
border: 0.4em solid transparent;
}
input[type=text]:focus,
input[type=email]:focus {
border: 0.4em solid #bf4040;
border-radius: .2em;
}
input[type=submit],
.search {
width: 30%;
}
.button {
box-shadow: inset 0 -0.3em 0 rgba(0, 0, 0, 0.5);
background: #f2f2f2;
color: #1f1f1f;
width: 100%;
display: block;
border: 1px solid #1f1f1f;
line-height: 2;
padding: 0 1em;
margin-bottom: 1em;
background: #bf4040;
color: #f2f2f2;
border: 0;
border-radius: .2em;
padding: .2em 1em .5em;
font-family: 'Advent Pro';
text-transform: uppercase;
cursor: pointer;
font-size: 1rem;
display: inline-block;
width: auto;
}
.button .small {
line-height: 1.1;
}
.button:hover {
background: #c65353;
color: #ffffff;
}
.button:focus {
box-shadow: none;
top: 0.3em;
background: #ac3939;
color: #e5e5e5;
}
.button.main {
box-shadow: inset 0 -0.3em 0 rgba(0, 0, 0, 0.5);
background: #f2f2f2;
color: #1f1f1f;
width: 100%;
display: block;
border: 1px solid #1f1f1f;
line-height: 2;
padding: 0 1em;
margin-bottom: 1em;
background: #bf4040;
color: #f2f2f2;
border: 0;
border-radius: .2em;
padding: .2em 1em .5em;
font-family: 'Advent Pro';
text-transform: uppercase;
cursor: pointer;
font-size: 1rem;
display: inline-block;
width: auto;
}
.button.main .small {
line-height: 1.1;
}
.button.main:hover {
background: #c65353;
color: #ffffff;
}
.button.main:focus {
box-shadow: none;
top: 0.3em;
background: #ac3939;
color: #e5e5e5;
}
.button.secondary {
box-shadow: inset 0 -0.3em 0 rgba(0, 0, 0, 0.5);
background: #f2f2f2;
width: 100%;
display: block;
border: 1px solid #1f1f1f;
line-height: 2;
padding: 0 1em;
margin-bottom: 1em;
transition-duration: 0.5s;
transition-delay: 0s;
transition-timing-function: ease;
transition-property: all;
background: #add65c;
color: #1f1f1f;
border: 0;
border-radius: .2em;
padding: .2em 1em .5em;
font-family: 'Advent Pro';
text-transform: uppercase;
cursor: pointer;
font-size: 1rem;
display: inline-block;
width: auto;
}
.button.secondary .small {
line-height: 1.1;
}
.button.secondary:hover {
background: #b8db70;
color: #2c2c2c;
}
.button.secondary:focus {
box-shadow: none;
top: 0.3em;
background: #a3d147;
color: #121212;
}
.tile {
padding: 0 2em;
line-height: 5em;
font-size: 1.5em;
display: inline-block;
border-radius: .1em;
margin: 1em;
color: #f2f2f2;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
box-shadow: inset 0 -0.1em 0 rgba(0, 0, 0, 0.5);
transition-duration: 0.2s;
transition-delay: 0s;
transition-timing-function: ease;
transition-property: all;
-webkit-animation-name: fadeIn;
animation-iteration-count: 1;
animation-fill-mode: both;
animation-name: fadeIn;
animation-duration: .5s;
}
.tile:hover {
transform: scale(1.2);
}
header {
background: #bf4040;
text-align: center;
padding: .5em;
color: #f2f2f2;
}
main {
margin: 0 auto;
width: 60%;
}
.rr-nav-results {
background: #1f1f1f;
padding: 0 20%;
min-height: 0%;
}
.rr-expanded {
padding: .5em 20% 2em;
}
.rr-component {
text-align: center;
height: 15em;
margin-bottom: 1em;
box-shadow: 0.25rem 0.2rem 0.05rem rgba(0, 0, 0, 0.5);
background: #e5e5e5;
}
nav {
background: #1f1f1f;
color: #f2f2f2;
padding: 1.5em;
}
nav .rr-nav-links a:hover {
color: #cc6666;
}
nav .rr-nav-links a:after {
content: '|';
padding: 0 1em;
color: #f2f2f2;
}
nav .rr-nav-links a:last-child:after {
content: '';
}
nav .rr-nav-search {
font-size: .8rem;
}
nav .rr-nav-search label {
font-size: .8rem;
}
nav .rr-nav-expand {
font-size: 1.2em;
}
/* MODULE */
<rr-nav>
<nav layout="row" layout-align="space-between">
<div flex="50" class="rr-nav-links">
<yield/>
</div>
<div flex="50" layout="column" layout-align="end" class="rr-nav-search {rr-nav-expand: navExpanded}">
<label for="searchInput">Search for Components, Libraries or Authors</label>
<input id="searchInput" oninput={search} onblur={closeSearch} onfocus={prepareSearch} type="text">
</div>
</nav>
<div class="rr-nav-results {rr-expanded: searching}">
<rr-component-list items={items} limit="9" criteria="title" filter />
<div layout="row" layout-wrap layout-margin layout-align="center space-between">
<div
if={!getFilteredItems() && searching}
layout="column"
layout-align="center" layout-margin
flex-sm="100" flex-md="40" flex-lg="25"
class="rr-component animated fadeInLeft">
<i class="fa fa-plus-circle fa-5x"></i>
<span>
This component does not exist yet, but you can create yours!
</span>
<h3>{searchInput.value}</h3>
</div>
</div>
</div>
<script>
this.navExpanded = false
this.getFilteredItems = function()
{
return this.items.filter(function(item){return item.filtered}).length
}
this.items = [
{
title: 'Bubble',
library: 'RiotGear',
component: 'rg-bubble',
author: 'gregorypratt',
stars: 18,
created: 1448e9,
},
{
title: 'Datepicker',
library: 'RiotGear',
component: 'rg-datepicker',
author: 'gregorypratt',
stars: 18,
created: 1450e9,
},
{
title: 'Toast',
library: 'RiotGear',
component: 'rg-toast',
author: 'gregorypratt',
stars: 18,
created: 1449e9,
},
]
this.labels = Object.keys(this.items[0])
window.rn = this
prepareSearch() {
this.navExpanded = true
}
closeSearch() {
this.navExpanded = false
}
search(event) {
for (var item in this.items)
{
item = this.items[item]
var combinedValue = ''
for (var label in this.labels)
{
label = this.labels[label]
combinedValue += item[label]
}
item.filtered = !!~combinedValue.toLowerCase().indexOf(event.target.value.toLowerCase())
if (event.target.value == '')
{
item.filtered = false
}
}
this.searching = true
if (event.target.value == '')
{
this.searching = false
}
}
this.on('mount', function(){this.search({target: {value: ''}})})
</script>
</rr-nav>
<rr-component-list>
<div if={filter} layout="row" layout-margin layout-wrap layout-align="space-between">
<rr-component
if={key < limit && item.filtered}
each={item, key in items}
item={item}
flex-sm="100" flex-md="40" flex-lg="25" animate />
</div>
<div if={!filter} layout="row" layout-margin layout-wrap layout-align="space-between">
<rr-component
if={key < limit}
each={item, key in items}
item={item}
flex-sm="100" flex-md="40" flex-lg="25" />
</div>
<script>
this.items = opts.items || [
{
title: 'Bubble',
library: 'RiotGear',
component: 'rg-bubble',
author: 'gregorypratt',
stars: 7,
created: 1449e9
},
{
title: 'Datepicker',
library: 'RiotGear',
component: 'rg-datepicker',
author: 'gregorypratt',
stars: 33,
created: 1450e9
},
{
title: 'Toast',
library: 'RiotGear',
component: 'rg-toast',
author: 'gregorypratt',
stars: 18,
created: 1448e9
},
]
this.limit = opts.limit
this.filter = !isNaN(+opts.filter)
</script>
</rr-component-list>
<rr-component
flex="{opts.flex}"
class="rr-component {animated:animate} {zoomIn: animate}">
<div className="rr-preview">
{item.created}
</div>
<div className="rr-title">
{item.library} - {item.title} | <i class="fa fa-star"></i> {item.stars}
</div>
<script>
this.item = opts.item
this.animate = !isNaN(+opts.animate)
</script>
</rr-component>