├── .gitignore ├── favicon.ico ├── README.md ├── index.js ├── index.html ├── js └── tags │ ├── markdown.html │ ├── highlight.html │ └── app.html ├── .eslintrc ├── less ├── main.less ├── mixins.less ├── components │ ├── card.less │ ├── button.less │ └── stripe.less ├── variables.less ├── layout.less ├── base.less └── vendor │ └── flex-grid.less ├── docs ├── 2.6.7 │ ├── mixin.md │ ├── observable.md │ ├── riot.md │ ├── tag.md │ ├── router.md │ └── templating.md └── 3.0.0 │ ├── mixin.md │ ├── observable.md │ ├── riot.md │ ├── tag.md │ ├── router.md │ └── templating.md ├── package.json └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MartinMuzatko/riot-cheatsheet/HEAD/favicon.ico -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # riot-cheatsheet 2 | Riot at a glance 3 | 4 | http://martinmuzatko.github.io/riot-cheatsheet 5 | 6 | 7 | ## Building the source 8 | 9 | `npm i` 10 | 11 | `webpack` 12 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | import riot from 'riot' 2 | import 'zenscroll' 3 | import Waypoint from './node_modules/waypoints/lib/noframework.waypoints.js' 4 | import './less/main.less' 5 | import './js/tags/app.html' 6 | import './js/tags/markdown.html' 7 | import './js/tags/highlight.html' 8 | 9 | document.body.innerHTML = '' 10 | riot.mount('*') 11 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Riot Cheatsheet | by MartinMuzatko 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /js/tags/markdown.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 16 | 17 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parserOptions": { 3 | "ecmaVersion": 6, 4 | "sourceType": "module", 5 | "ecmaFeatures": { 6 | "jsx": false 7 | } 8 | }, 9 | "extends": "eslint:recommended", 10 | "rules": { 11 | "semi": [2, "never"], 12 | "no-unreachable": 2, 13 | "no-console": 0, 14 | "no-debugger": 0, 15 | "no-unused-vars": 0 16 | 17 | }, 18 | "env": { 19 | "browser": true, 20 | "node": true, 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /less/main.less: -------------------------------------------------------------------------------- 1 | @import (less) url(../node_modules/normalize.css/normalize.css); 2 | @import (less) url(../node_modules/prismjs/themes/prism-coy.css); 3 | 4 | @import url(https://fonts.googleapis.com/css?family=Cousine); 5 | @import url(https://fonts.googleapis.com/css?family=Merriweather+Sans:400,700); 6 | 7 | @import url('vendor/flex-grid.less'); 8 | 9 | @import url('variables.less'); 10 | @import url('mixins.less'); 11 | 12 | @import url('components/button.less'); 13 | @import url('components/card.less'); 14 | @import url('components/stripe.less'); 15 | 16 | @import url('base.less'); 17 | @import url('layout.less'); 18 | -------------------------------------------------------------------------------- /docs/2.6.7/mixin.md: -------------------------------------------------------------------------------- 1 | # Mixins 2 | 3 | ## Mixin anatomy 4 | 5 | A mixin can be a `function`, `object` or `class` 6 | Mixins have, after initializing them, access to your tag 7 | 8 | ```js 9 | var authService = { 10 | init: () => { 11 | // Called upon initializing the mixin 12 | }, 13 | login: (user, pass) => {//...} 14 | } 15 | ``` 16 | 17 | ## Initializing 18 | 19 | ### Inline Usage 20 | 21 | For global objects or dynamic mixins within the tag 22 | 23 | ```js 24 | this.mixin(authService) 25 | ``` 26 | 27 | ### Shared Mixin 28 | 29 | Share your mixin across tags 30 | 31 | ```js 32 | // In global scope 33 | riot.mixin('auth-service', authService) 34 | // In your tag 35 | this.mixin('auth-service') 36 | ``` 37 | 38 | ### Global Mixin 39 | 40 | Add mixin to every mounted tag 41 | 42 | ```js 43 | // In global scope BEFORE mounting 44 | riot.mixin(authService) 45 | ``` 46 | -------------------------------------------------------------------------------- /docs/3.0.0/mixin.md: -------------------------------------------------------------------------------- 1 | # Mixins 2 | 3 | ## Mixin anatomy 4 | 5 | A mixin can be a `function`, `object` or `class` 6 | Mixins have, after initializing them, access to your tag 7 | 8 | ```js 9 | var authService = { 10 | init: () => { 11 | // Called upon initializing the mixin 12 | }, 13 | login: (user, pass) => {//...} 14 | } 15 | ``` 16 | 17 | ## Initializing 18 | 19 | ### Inline Usage 20 | 21 | For global objects or dynamic mixins within the tag 22 | 23 | ```js 24 | this.mixin(authService) 25 | ``` 26 | 27 | ### Shared Mixin 28 | 29 | Share your mixin across tags 30 | 31 | ```js 32 | // In global scope 33 | riot.mixin('auth-service', authService) 34 | // In your tag 35 | this.mixin('auth-service') 36 | ``` 37 | 38 | ### Global Mixin 39 | 40 | Add mixin to every mounted tag 41 | 42 | ```js 43 | // In global scope BEFORE mounting 44 | riot.mixin(authService) 45 | ``` 46 | -------------------------------------------------------------------------------- /docs/2.6.7/observable.md: -------------------------------------------------------------------------------- 1 | # Observable 2 | 3 | Great to create tag-based API 4 | For use outside tags, see [](#riot-observable) 5 | 6 | ## Trigger 7 | 8 | Trigger custom events similar `update` 9 | 10 | ### Simple trigger 11 | 12 | ```js 13 | this.trigger('selected', items) 14 | ``` 15 | 16 | ### Trigger with data 17 | 18 | ```js 19 | this.trigger('selected', items) 20 | ``` 21 | 22 | ## Listening to triggers 23 | 24 | From inside the tag or parent/child tag 25 | You can use them for [lifecycle events](#tag-lifecycle-events) too. 26 | 27 | ### Always listen 28 | 29 | ```js 30 | this.on('selected', (items) => { 31 | // Do something with the selected items 32 | }) 33 | ``` 34 | 35 | ### Listen once 36 | 37 | ```js 38 | this.one('selected', (items) => { 39 | // Do something with the selected items 40 | }) 41 | ``` 42 | 43 | ### Stop listening 44 | 45 | ```js 46 | this.off('selected') 47 | ``` 48 | -------------------------------------------------------------------------------- /docs/3.0.0/observable.md: -------------------------------------------------------------------------------- 1 | # Observable 2 | 3 | Great to create tag-based API 4 | For use outside tags, see [](#riot-observable) 5 | 6 | ## Trigger 7 | 8 | Trigger custom events similar `update` 9 | 10 | ### Simple trigger 11 | 12 | ```js 13 | this.trigger('selected', items) 14 | ``` 15 | 16 | ### Trigger with data 17 | 18 | ```js 19 | this.trigger('selected', items) 20 | ``` 21 | 22 | ## Listening to triggers 23 | 24 | From inside the tag or parent/child tag 25 | You can use them for [lifecycle events](#tag-lifecycle-events) too. 26 | 27 | ### Always listen 28 | 29 | ```js 30 | this.on('selected', (items) => { 31 | // Do something with the selected items 32 | }) 33 | ``` 34 | 35 | ### Listen once 36 | 37 | ```js 38 | this.one('selected', (items) => { 39 | // Do something with the selected items 40 | }) 41 | ``` 42 | 43 | ### Stop listening 44 | 45 | ```js 46 | this.off('selected') 47 | ``` 48 | -------------------------------------------------------------------------------- /less/mixins.less: -------------------------------------------------------------------------------- 1 | /* ======================================== 2 | MIXINS 3 | * General Use Mixins to ease up reoccuring styles 4 | * No Components! 5 | ======================================== */ 6 | 7 | 8 | .padding-vertical(@amount: 2em) { 9 | padding-top: @amount; 10 | padding-bottom: @amount; 11 | } 12 | 13 | .padding-horizontal(@amount: 5%) { 14 | padding-left: @amount; 15 | padding-right: @amount; 16 | } 17 | 18 | .border(@size: -.25em, @color: @color-dark-shadow) { 19 | box-shadow: inset 0 @size 0 @color; 20 | } 21 | 22 | .responsiveWidth(@width) { 23 | @media screen and (min-width: @breakpoint-sm) { 24 | width: @breakpoint-sm - @width / 3; 25 | } 26 | @media screen and (min-width: @breakpoint-md) { 27 | width: @breakpoint-md - @width / 2; 28 | } 29 | @media screen and (min-width: @breakpoint-lg) { 30 | width: @breakpoint-lg - @width; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /js/tags/highlight.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 | 5 |
6 | 25 | 26 | -------------------------------------------------------------------------------- /less/components/card.less: -------------------------------------------------------------------------------- 1 | /* ======================================== 2 | CARD COMPONENT 3 | * Defines a rectangular area, used for a specific kind of content 4 | * containing a title, description and actions (buttons/icons) 5 | * a card is often used together with grid systems to evenly 6 | * distribute related content. 7 | * Cards contain little and scannable content to quickly get to the desired 8 | * full content. Thus, a description should contain not more than 140 letters 9 | * 10 | * @type 11 | ======================================== */ 12 | 13 | .card(@color: @color-primary, @size: small, @action: false, @action-color: lighten(@color, 10%)) { 14 | background-color: @color; 15 | & when (@action = true) { 16 | transition: all @duration-action ease; 17 | cursor: pointer; 18 | &:hover 19 | { 20 | background-color: lighten(@color, 10%); 21 | & when (iscolor(@action-color)) { 22 | background-color: @action-color; 23 | } 24 | } 25 | } 26 | 27 | & when (@size = small) { 28 | padding: 1em; 29 | } 30 | & when (@size = medium) { 31 | padding: 2.5em; 32 | } 33 | & when (@size = large) { 34 | padding: 4em; 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /docs/2.6.7/riot.md: -------------------------------------------------------------------------------- 1 | # Riot 2 | 3 | ## mount 4 | 5 | Mounting a tag will make it appear on your webpage/app 6 | There are various ways to mount your tags 7 | 8 | ### All 9 | 10 | This will mount all tags and their children tags 11 | 12 | **Notice:** This will not mount dynamically loaded tags such as with a router 13 | 14 | ```js 15 | riot.mount('*') 16 | ``` 17 | 18 | ### Specific with options 19 | 20 | When mounting a tag, you can pass options, accessible as `opts` 21 | 22 | ```html 23 | 24 | 32 | ``` 33 | 34 | ### Data attribute 35 | 36 | **Notice:** This feature is supported in **Riot 2.3.17** or later 37 | With a `data` attribute, you can mount a tag into an element 38 | 39 | ```html 40 | 41 | 45 | ``` 46 | 47 | 48 | ### Mount to DOM node 49 | 50 | You can also use a DOM node to mount your tag 51 | 52 | ```html 53 |
54 | 58 | ``` 59 | 60 | 61 | ## observable 62 | 63 | Turns a non-riot object/class into an observable, being capable of triggering and listening to events 64 | This will add `trigger`, `on`, `one` and `off` to the provided object 65 | See [Observable](#observable) for all methods 66 | 67 | ```js 68 | class AuthService { 69 | constructor() { 70 | riot.observable(this) 71 | } 72 | } 73 | ``` 74 | -------------------------------------------------------------------------------- /docs/3.0.0/riot.md: -------------------------------------------------------------------------------- 1 | # Riot 2 | 3 | ## mount 4 | 5 | Mounting a tag will make it appear on your webpage/app 6 | There are various ways to mount your tags 7 | 8 | ### All 9 | 10 | This will mount all tags and their children tags 11 | 12 | **Notice:** This will not mount dynamically loaded tags such as with a router 13 | 14 | ```js 15 | riot.mount('*') 16 | ``` 17 | 18 | ### Specific with options 19 | 20 | When mounting a tag, you can pass options, accessible as `opts` 21 | 22 | ```html 23 | 24 | 32 | ``` 33 | 34 | ### Data attribute 35 | 36 | **Notice:** This feature is supported in **Riot 2.3.17** or later 37 | With a `data` attribute, you can mount a tag into an element 38 | 39 | ```html 40 | 41 | 45 | ``` 46 | 47 | 48 | ### Mount to DOM node 49 | 50 | You can also use a DOM node to mount your tag 51 | 52 | ```html 53 |
54 | 58 | ``` 59 | 60 | 61 | ## observable 62 | 63 | Turns a non-riot object/class into an observable, being capable of triggering and listening to events 64 | This will add `trigger`, `on`, `one` and `off` to the provided object 65 | See [Observable](#observable) for all methods 66 | 67 | ```js 68 | class AuthService { 69 | constructor() { 70 | riot.observable(this) 71 | } 72 | } 73 | ``` 74 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "riot-cheatsheet", 3 | "version": "1.0.0", 4 | "description": "Riot at a glance", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/MartinMuzatko/riot-cheatsheet.git" 12 | }, 13 | "author": "Martin Muzatko (http://happy-css.com/)", 14 | "license": "MIT", 15 | "bugs": { 16 | "url": "https://github.com/MartinMuzatko/riot-cheatsheet/issues" 17 | }, 18 | "homepage": "https://github.com/MartinMuzatko/riot-cheatsheet#readme", 19 | "devDependencies": { 20 | "autoprefixer": "^6.3.6", 21 | "babel": "^6.5.2", 22 | "babel-core": "^6.10.4", 23 | "babel-loader": "^6.2.4", 24 | "babel-preset-es2015": "^6.9.0", 25 | "babel-preset-es2015-riot": "^1.1.0", 26 | "browser-sync": "^2.16.0", 27 | "browser-sync-webpack-plugin": "^1.1.3", 28 | "css-loader": "^0.23.1", 29 | "eslint": "^2.13.1", 30 | "eslint-loader": "^1.3.0", 31 | "file-loader": "^0.9.0", 32 | "html-loader": "^0.4.3", 33 | "less": "^2.7.1", 34 | "less-loader": "^2.2.3", 35 | "markdown-loader": "^0.1.7", 36 | "marked": "^0.3.5", 37 | "postcss": "^5.0.21", 38 | "postcss-loader": "^0.9.1", 39 | "prismjs": "^1.5.1", 40 | "riot": "^2.6.1", 41 | "riot-loader": "^1.0.0", 42 | "riotjs-loader": "^3.0.0", 43 | "source-map-loader": "^0.1.5", 44 | "style-loader": "^0.13.1", 45 | "url-loader": "^0.5.7", 46 | "webpack": "^1.13.1", 47 | "webpack-dev-server": "^1.14.1" 48 | }, 49 | "dependencies": { 50 | "normalize.css": "^4.1.1", 51 | "waypoints": "^4.0.0", 52 | "zenscroll": "^3.1.0" 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack') 2 | var prism = require('prismjs') 3 | var autoprefixer = require('autoprefixer') 4 | var BrowserSyncPlugin = require('browser-sync-webpack-plugin') 5 | 6 | var marked = require('marked') 7 | var renderer = new marked.Renderer() 8 | renderer.code = (code, language) => { 9 | var html = prism.highlight(code, prism.languages.javascript) 10 | return `
${html}
` 11 | } 12 | 13 | 14 | module.exports = { 15 | entry: './index.js', 16 | output: { 17 | path: './', 18 | filename: 'bundle.js', 19 | sourceMapFilename: "[name].js.map", 20 | }, 21 | module: { 22 | preLoaders: [ 23 | { test: /\.html$/, loader: 'riotjs' }, 24 | { test: /\.js$/, loader: 'eslint!source-map' }, 25 | ], 26 | loaders: [ 27 | { test: /\.md$/, loader: 'html!markdown'}, 28 | { test: /\.(jpe?g|png|gif|svg|mp4)$/i, loader: 'file'}, 29 | { test: /\.html$|\.js$/, loader: 'babel', query: { presets: 'es2015-riot' }}, 30 | { test: /\.less$/, loader: 'style!css?minimize!postcss!less'}, 31 | ] 32 | }, 33 | markdownLoader: { 34 | renderer: renderer 35 | }, 36 | postcss: () => { 37 | return [ 38 | autoprefixer({browsers: 'last 2 versions'}) 39 | ]; 40 | }, 41 | plugins: [ 42 | new webpack.ProvidePlugin({ 43 | riot: 'riot' 44 | }), 45 | new BrowserSyncPlugin( 46 | { 47 | host: 'localhost', 48 | port: 8081, 49 | proxy: 'http://localhost:8080/' 50 | }, 51 | { 52 | reload: true 53 | } 54 | ) 55 | ], 56 | eslint: { 57 | configFile: './.eslintrc' 58 | }, 59 | devtool: 'source-map' 60 | } 61 | -------------------------------------------------------------------------------- /less/components/button.less: -------------------------------------------------------------------------------- 1 | /* ======================================== 2 | BUTTON COMPONENT 3 | * Defines a full-width colorful container 4 | * 5 | * @size: small|medium|large|custom(e.g.:5%) 6 | * @indent: small|medium|large|custom(e.g.:5%) 7 | * @color: color 8 | ======================================== */ 9 | 10 | .button(@color: @color-primary, @type: outline) { 11 | display: inline-block; 12 | user-select: none; 13 | width: auto; 14 | margin-top: 1em; 15 | border-radius: .1em; 16 | font-size: 1em; 17 | cursor: pointer; 18 | line-height: 1; 19 | text-transform: uppercase; 20 | transition: all @duration-action ease; 21 | font-family: @font-body; 22 | & when (@type = outline) { 23 | background-color: transparent; 24 | color: @color-light; 25 | border: 1px solid @color-light; 26 | &:hover { 27 | background-color: @color-light; 28 | color: @color; 29 | } 30 | } 31 | & when (@type = outline-reverse) { 32 | background-color: transparent; 33 | color: @color; 34 | border: 1px solid @color; 35 | &:hover { 36 | color: @color-light; 37 | background-color: @color; 38 | } 39 | } 40 | & when (@type = full) { 41 | background-color: @color; 42 | color: contrast(@color, @color-dark, @color-light); 43 | 44 | &:hover { 45 | box-sizing: border-box; 46 | @color-hover: lighten(@color, 10%); 47 | animation-name: lsd-background; 48 | animation-duration: 3s; 49 | animation-iteration-count: infinite; 50 | color: contrast(@color-hover, @color-dark, @color-light); 51 | } 52 | } 53 | } 54 | 55 | .button { 56 | &.outline { 57 | .button(@color-primary, @type: outline); 58 | } 59 | &.reverse { 60 | .button(@color-primary, @type: outline-reverse); 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /less/variables.less: -------------------------------------------------------------------------------- 1 | /* ======================================== 2 | COLORS 3 | ======================================== */ 4 | 5 | @color-primary: hsl(344, 100%, 50%); 6 | 7 | @color-dark: hsl(344, 10%, 20%); 8 | @color-light: hsl(344, 10%, 95%); 9 | @color-dark-shadow: fadeout(@color-dark, 50%); 10 | @color-dark-shadow-faded: fadeout(@color-dark-shadow, 40%); 11 | @color-light-shadow: fadeout(@color-light, 50%); 12 | 13 | /* ======================================== 14 | FONTS 15 | ======================================== */ 16 | 17 | @font-code: 'Cousine', monospace; 18 | @font-body: 'Merriweather Sans', verdana; 19 | @font-heading: 'Merriweather Sans', sans-serif; 20 | @font-replacement: sans serif; 21 | 22 | /* ======================================== 23 | BREAKPOINTS 24 | ======================================== */ 25 | 26 | @breakpoint-sm: 600px; 27 | @breakpoint-md: 960px; 28 | @breakpoint-lg: 1200px; 29 | 30 | // ALIAS 31 | @breakpoint-mobile-nav : @breakpoint-md; 32 | 33 | /* ======================================== 34 | Z-INDEXES 35 | ======================================== */ 36 | 37 | @z-index-overlay: 200; 38 | @z-index-blanket: 300; 39 | @z-index-header: 400; 40 | @z-index-modal: 500; 41 | @z-index-popup: 600; 42 | 43 | /* ======================================== 44 | DURATIONS 45 | ======================================== */ 46 | 47 | @duration-hover: .33s; 48 | @duration-action: .5s; 49 | @duration-animation: 1s; 50 | 51 | /* ======================================== 52 | INDENTATIONS 53 | ======================================== */ 54 | 55 | @indent-outer: 6em; 56 | @indent-larger: 4em; 57 | @indent-large: 2em; 58 | @indent-medium: 1em; 59 | @indent-small: .25em; 60 | 61 | @width-small: 40*16; 62 | @width-medium: 20*16; 63 | @width-large: 10*16; 64 | 65 | /* ======================================== 66 | INDENTATIONS 67 | ======================================== */ 68 | 69 | @border-width: @indent-small; 70 | -------------------------------------------------------------------------------- /docs/2.6.7/tag.md: -------------------------------------------------------------------------------- 1 | # Tag 2 | 3 | ## Lifecycle events 4 | 5 | ### before-mount 6 | 7 | Before the tag is mounted 8 | 9 | ```js 10 | this.on('before-mount', () => { 11 | }) 12 | ``` 13 | 14 | ### mount 15 | 16 | 17 | After all expressions are evaluated on mount 18 | 19 | ```js 20 | this.on('mount', () => { 21 | }) 22 | ``` 23 | 24 | ### update 25 | 26 | Allows recalculation of data before updating 27 | 28 | ```js 29 | this.on('update', () => { 30 | }) 31 | ``` 32 | 33 | ### updated 34 | 35 | After updates 36 | 37 | ```js 38 | this.on('updated', () => { 39 | }) 40 | ``` 41 | 42 | ### before-unmount 43 | 44 | Before the tag is removed 45 | 46 | ```js 47 | this.on('before-unmount', () => { 48 | }) 49 | ``` 50 | 51 | ### unmount 52 | 53 | After the tag is removed 54 | 55 | ```js 56 | this.on('unmount', () => { 57 | }) 58 | ``` 59 | 60 | ### all events 61 | 62 | Listen to all events 63 | You can fetch the event name if desired 64 | 65 | ```js 66 | this.on('*', (eventName) => { 67 | }) 68 | ``` 69 | 70 | ## Tag Methods & Properties 71 | 72 | ### on, one, off, trigger 73 | 74 | A riot tag already implements a `riot.observable` 75 | See [observable](#observable) 76 | 77 | ### Update 78 | 79 | Shortcut for [trigger](#observable-trigger) `this.trigger('update')` 80 | 81 | ```js 82 | this.update() 83 | ``` 84 | 85 | ### isMounted 86 | 87 | Attribute to tell whether or not the tag is mounted 88 | 89 | ```js 90 | this.isMounted 91 | ``` 92 | 93 | ### root 94 | 95 | Points to it's own tag element 96 | 97 | ```js 98 | this.root // reference to riot tag 99 | ``` 100 | 101 | ### opts 102 | 103 | Options passed via HTML or on mount, See [options](#templating-options) 104 | 105 | ### mixin 106 | 107 | See [Mixins](#mixins) 108 | 109 | 110 | ### tags 111 | 112 | See [Child tags](#templating-child-tags) 113 | 114 | ### parent 115 | 116 | Access the parent tag, if there is one 117 | 118 | ```js 119 | this.parent // 120 | ``` 121 | -------------------------------------------------------------------------------- /docs/3.0.0/tag.md: -------------------------------------------------------------------------------- 1 | # Tag 2 | 3 | ## Lifecycle events 4 | 5 | ### before-mount 6 | 7 | Before the tag is mounted 8 | 9 | ```js 10 | this.on('before-mount', () => { 11 | }) 12 | ``` 13 | 14 | ### mount 15 | 16 | 17 | After all expressions are evaluated on mount 18 | 19 | ```js 20 | this.on('mount', () => { 21 | }) 22 | ``` 23 | 24 | ### update 25 | 26 | Allows recalculation of data before updating 27 | 28 | ```js 29 | this.on('update', () => { 30 | }) 31 | ``` 32 | 33 | ### updated 34 | 35 | After updates 36 | 37 | ```js 38 | this.on('updated', () => { 39 | }) 40 | ``` 41 | 42 | ### before-unmount 43 | 44 | Before the tag is removed 45 | 46 | ```js 47 | this.on('before-unmount', () => { 48 | }) 49 | ``` 50 | 51 | ### unmount 52 | 53 | After the tag is removed 54 | 55 | ```js 56 | this.on('unmount', () => { 57 | }) 58 | ``` 59 | 60 | ### all events 61 | 62 | Listen to all events 63 | You can fetch the event name if desired 64 | 65 | ```js 66 | this.on('*', (eventName) => { 67 | }) 68 | ``` 69 | 70 | ## Tag Methods & Properties 71 | 72 | ### on, one, off, trigger 73 | 74 | A riot tag already implements a `riot.observable` 75 | See [observable](#observable) 76 | 77 | ### Update 78 | 79 | Shortcut for [trigger](#observable-trigger) `this.trigger('update')` 80 | 81 | ```js 82 | this.update() 83 | ``` 84 | 85 | ### isMounted 86 | 87 | Attribute to tell whether or not the tag is mounted 88 | 89 | ```js 90 | this.isMounted 91 | ``` 92 | 93 | ### root 94 | 95 | Points to it's own tag element 96 | 97 | ```js 98 | this.root // reference to riot tag 99 | ``` 100 | 101 | ### opts 102 | 103 | Options passed via HTML or on mount, See [options](#templating-options) 104 | 105 | ### mixin 106 | 107 | See [Mixins](#mixins) 108 | 109 | 110 | ### tags 111 | 112 | See [Child tags](#templating-child-tags) 113 | 114 | ### parent 115 | 116 | Access the parent tag, if there is one 117 | 118 | ```js 119 | this.parent // 120 | ``` 121 | -------------------------------------------------------------------------------- /less/components/stripe.less: -------------------------------------------------------------------------------- 1 | /* ======================================== 2 | STRIPE COMPONENT 3 | * Defines a full-width colorful container 4 | * 5 | * @padding: small|medium|large|custom(e.g.:5%) 6 | * @width: small|medium|large|custom(e.g.:300) 7 | * this value is substracted from the current breakpoint 8 | * @color: color 9 | ======================================== */ 10 | 11 | .stripe(@padding: medium, @width: 10*16, @color: inherit) { 12 | padding: @indent-large 0; 13 | width: 100%; 14 | & when not(@color = inherit) { 15 | background-color: @color; 16 | } 17 | & when (iscolor(@color)) { 18 | color: contrast(@color, @color-dark, @color-light); 19 | } 20 | 21 | & when (isnumber(@padding)) { 22 | .padding-vertical(@padding); 23 | } 24 | & when (@padding = small) { 25 | .padding-vertical(@indent-medium); 26 | } 27 | & when (@padding = medium) { 28 | .padding-vertical(@indent-large); 29 | } 30 | & when (@padding = large) { 31 | .padding-vertical(@indent-larger); 32 | } 33 | // width 34 | & when 35 | (@width = small), 36 | (@width = medium), 37 | (@width = large), 38 | (isnumber(@width)) { 39 | // width 40 | > * { 41 | margin-left: auto; 42 | margin-right: auto; 43 | //width: 60em; 44 | @media screen and (max-width: @breakpoint-sm) { 45 | .padding-horizontal(5%); 46 | } 47 | } 48 | } 49 | 50 | // Breakpoint - @var 51 | & when (@width = small) { 52 | > * { 53 | .responsiveWidth(@width-small); 54 | } 55 | } 56 | & when (@width = medium) { 57 | > * { 58 | .responsiveWidth(@width-medium); 59 | } 60 | } 61 | & when (@width = large) { 62 | > * { 63 | .responsiveWidth(@width-large); 64 | } 65 | } 66 | & when (isnumber(@width)) { 67 | > * { 68 | .responsiveWidth(@width); 69 | } 70 | } 71 | } 72 | 73 | .striped(@size: @indent-larger, @color-odd: darken(@color-light, 5%), @color-even: @color-light) { 74 | > *:nth-child(2n+1) { 75 | .stripe(@size, @indent-primary, @color-odd); 76 | } 77 | > *:nth-child(2n) { 78 | .stripe(@size, @indent-primary, @color-even); 79 | } 80 | } 81 | 82 | .stripe.fluid { 83 | padding: 0; 84 | > * { 85 | width: 100%; 86 | } 87 | } 88 | 89 | 90 | .stripe { 91 | &.medium { 92 | .stripe(large, medium, inherit) 93 | } 94 | &.small { 95 | .stripe(large, small, inherit) 96 | } 97 | } 98 | -------------------------------------------------------------------------------- /docs/2.6.7/router.md: -------------------------------------------------------------------------------- 1 | # Router 2 | 3 | The router takes care of the history `pushState` 4 | 5 | Depending on route, you can mount different tags, update data and so on. 6 | 7 | ## Minimal setup 8 | 9 | ### Setup 10 | 11 | The function works with any amount of parameters 12 | 13 | **Recommendation:** Put your routing setup within `this.on('mount', () => {})` in your main tag, that controls everything (e.g. `app.html`) 14 | 15 | ```html 16 |
17 | 23 | ``` 24 | 25 | ### Go to Route 26 | 27 | This will call the route method defined above 28 | Where `customer` is `collection`, `edit` is `action` and `289` is `id` 29 | 30 | ```js 31 | riot.route('customer/edit/289') 32 | ``` 33 | 34 | ### Start listening 35 | 36 | This starts the router, and examines the hash that is already in place 37 | **Notice:** This feature is supported in **Riot 2.3** or later 38 | 39 | ```js 40 | riot.route.start(true) 41 | ``` 42 | 43 | In earlier versions of riot, this was done with 44 | 45 | ```js 46 | riot.route.start() 47 | riot.route.exec() 48 | ``` 49 | 50 | You can also separately set them up, if you like to 51 | 52 | ## Advanced setup 53 | 54 | In the advanced setup, you can set up a function per route call and you are more flexible with wildcard support 55 | 56 | **Notice:** These features are only supported on **Riot 2.3** or later 57 | 58 | ### Route without wildcard 59 | 60 | ```js 61 | riot.route('/index', () => {}) 62 | ``` 63 | 64 | ### Route with wildcard 65 | 66 | Regex for wildcards: 67 | 68 | \* `([^/?#]+?)` 69 | 70 | .. `.*` 71 | 72 | This route will catch everything that is a subroute of `blog` 73 | 74 | ```js 75 | riot.route('/blog/*', (entry) => {}) 76 | ``` 77 | 78 | You can setup more distinct variables, other than splitting `/` 79 | 80 | ```js 81 | riot.route('/blog/*-*/*', (month, year, entry) => { 82 | // route might look like /blog/06-2012/give-me-lasagna 83 | }) 84 | ``` 85 | 86 | Everything after a keyword 87 | 88 | ```js 89 | riot.route('/old..', () => { 90 | // Sorry, this page has been removed 91 | }) 92 | ``` 93 | 94 | ## Subroutes 95 | 96 | Subroutes overwrite existing routes, based on context 97 | 98 | ```js 99 | var subRoute = riot.route.create() 100 | subRoute('/blog/tags', () => { 101 | // Instead of looking for a post named tags 102 | // List all tags used in posts 103 | }) 104 | ``` 105 | -------------------------------------------------------------------------------- /docs/3.0.0/router.md: -------------------------------------------------------------------------------- 1 | # Router 2 | 3 | The router takes care of the history `pushState` 4 | 5 | Depending on route, you can mount different tags, update data and so on. 6 | 7 | ## Minimal setup 8 | 9 | ### Setup 10 | 11 | The function works with any amount of parameters 12 | 13 | **Recommendation:** Put your routing setup within `this.on('mount', () => {})` in your main tag, that controls everything (e.g. `app.html`) 14 | 15 | ```html 16 |
17 | 23 | ``` 24 | 25 | ### Go to Route 26 | 27 | This will call the route method defined above 28 | Where `customer` is `collection`, `edit` is `action` and `289` is `id` 29 | 30 | ```js 31 | riot.route('customer/edit/289') 32 | ``` 33 | 34 | ### Start listening 35 | 36 | This starts the router, and examines the hash that is already in place 37 | **Notice:** This feature is supported in **Riot 2.3** or later 38 | 39 | ```js 40 | riot.route.start(true) 41 | ``` 42 | 43 | In earlier versions of riot, this was done with 44 | 45 | ```js 46 | riot.route.start() 47 | riot.route.exec() 48 | ``` 49 | 50 | You can also separately set them up, if you like to 51 | 52 | ## Advanced setup 53 | 54 | In the advanced setup, you can set up a function per route call and you are more flexible with wildcard support 55 | 56 | **Notice:** These features are only supported on **Riot 2.3** or later 57 | 58 | ### Route without wildcard 59 | 60 | ```js 61 | riot.route('/index', () => {}) 62 | ``` 63 | 64 | ### Route with wildcard 65 | 66 | Regex for wildcards: 67 | 68 | \* `([^/?#]+?)` 69 | 70 | .. `.*` 71 | 72 | This route will catch everything that is a subroute of `blog` 73 | 74 | ```js 75 | riot.route('/blog/*', (entry) => {}) 76 | ``` 77 | 78 | You can setup more distinct variables, other than splitting `/` 79 | 80 | ```js 81 | riot.route('/blog/*-*/*', (month, year, entry) => { 82 | // route might look like /blog/06-2012/give-me-lasagna 83 | }) 84 | ``` 85 | 86 | Everything after a keyword 87 | 88 | ```js 89 | riot.route('/old..', () => { 90 | // Sorry, this page has been removed 91 | }) 92 | ``` 93 | 94 | ## Subroutes 95 | 96 | Subroutes overwrite existing routes, based on context 97 | 98 | ```js 99 | var subRoute = riot.route.create() 100 | subRoute('/blog/tags', () => { 101 | // Instead of looking for a post named tags 102 | // List all tags used in posts 103 | }) 104 | ``` 105 | -------------------------------------------------------------------------------- /less/layout.less: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | @navigation-indent: 10em; 6 | 7 | .versionpicker { 8 | color: @color-light; 9 | padding: .5em 0; 10 | img { 11 | border: 1px solid @color-light; 12 | border-radius: 2px; 13 | margin-right: .5eml 14 | } 15 | &:hover, &.active { 16 | color: @color-primary; 17 | > * { 18 | color: @color-primary; 19 | } 20 | box-shadow: inset -.125em 0 @color-primary; 21 | background: @color-light; 22 | } 23 | } 24 | 25 | menu { 26 | @media screen and (max-width: @breakpoint-sm) { 27 | display: none; 28 | } 29 | position: fixed; 30 | margin: 0; 31 | margin-left: @navigation-indent; 32 | padding: 0; 33 | background: @color-dark-shadow; 34 | z-index: @z-index-overlay; 35 | transition: all @duration-hover ease; 36 | overflow-y: auto; 37 | max-height: 100%; 38 | b { 39 | color: @color-primary; 40 | } 41 | a { 42 | font-size: .8em; 43 | &:hover { 44 | color: @color-primary; 45 | background: @color-light; 46 | } 47 | color: @color-light; 48 | display: block; 49 | padding: .25em .5em; 50 | } 51 | input { 52 | width: 100%; 53 | padding: .25em .5em; 54 | } 55 | } 56 | 57 | header { 58 | @media screen and (max-width: @breakpoint-sm) { 59 | .stripe(large, medium); 60 | text-align: center; 61 | } 62 | @media screen and (min-width: @breakpoint-sm) { 63 | position: fixed; 64 | width: @navigation-indent; 65 | left: 0; 66 | top: 0; 67 | padding: 1em 0; 68 | height: 100%; 69 | box-shadow: inset -.125em 0 @color-dark-shadow; 70 | } 71 | p { 72 | color: @color-dark; 73 | background: @color-light; 74 | box-shadow: inset -.125em 0 @color-dark-shadow; 75 | 76 | } 77 | background: @color-primary; 78 | color: @color-light; 79 | padding: @indent-large 0; 80 | p { 81 | padding: .5em 1em; 82 | } 83 | nav a { 84 | display: block; 85 | color: @color-light; 86 | padding: 1em; 87 | text-transform: uppercase; 88 | &:hover, &.active { 89 | background: @color-light; 90 | color: @color-primary; 91 | box-shadow: inset -.125em 0 @color-primary; 92 | } 93 | } 94 | } 95 | 96 | .top { 97 | @media screen and (min-width: @breakpoint-sm) { 98 | display: none; 99 | } 100 | transition: all @duration-animation ease; 101 | opacity: 0; 102 | &.active { 103 | opacity: 1; 104 | } 105 | border-radius: 100%; 106 | position: fixed; 107 | background: @color-dark-shadow; 108 | color: @color-light; 109 | font-size: 5em; 110 | left: calc(~'50% - .5em'); 111 | bottom: -.5em; 112 | padding-top: .4em; 113 | height: 1em; 114 | width: 1em; 115 | z-index: @z-index-overlay; 116 | text-align: center; 117 | vertical-align: bottom; 118 | box-shadow: 0 0 .1em @color-light-shadow; 119 | } 120 | 121 | .container(@color) { 122 | .stripe(large, 30*16, @color); 123 | @media screen and (min-width: @breakpoint-sm) { 124 | width: calc(~'100% - @{navigation-indent}'); 125 | margin-left: @navigation-indent; 126 | } 127 | } 128 | 129 | main { 130 | .container(@color-light); 131 | a { 132 | border-bottom: 1px dashed @color-primary; 133 | &:hover { 134 | border-bottom: 1px solid @color-primary; 135 | } 136 | } 137 | h1,h2,h3,h4,h5,h6 { 138 | a, a:hover { 139 | border-bottom: none; 140 | } 141 | } 142 | } 143 | 144 | footer { 145 | .container(@color-dark); 146 | color: @color-light; 147 | } 148 | 149 | article { 150 | padding: .5em; 151 | } 152 | 153 | 154 | .github-corner { 155 | top: 0; 156 | right: 0; 157 | position: absolute; 158 | z-index: 100; 159 | @media screen and (min-width:@breakpoint-sm) { 160 | position: fixed; 161 | } 162 | } 163 | 164 | code[class*=language] { 165 | padding: 0 .5em; 166 | } 167 | 168 | pre[class*=language] { 169 | border-left-width: 0; 170 | } 171 | -------------------------------------------------------------------------------- /less/base.less: -------------------------------------------------------------------------------- 1 | /* ======================================== 2 | BASE 3 | * Contains HTML default elements (b,i,u,table...) 4 | * Does not contain classes, ids 5 | * Can implement mixins 6 | ======================================== */ 7 | 8 | * 9 | { 10 | box-sizing: border-box; 11 | } 12 | 13 | ::-webkit-scrollbar { 14 | width: .5em; 15 | } 16 | 17 | ::-webkit-scrollbar-thumb { 18 | background: @color-dark-shadow; 19 | } 20 | 21 | ::-webkit-scrollbar-track { 22 | background: @color-light-shadow; 23 | } 24 | 25 | /* ======================================== 26 | BLOCK ELEMENTS 27 | ======================================== */ 28 | 29 | code, pre { 30 | font-family: @font-code; 31 | } 32 | 33 | code { 34 | color: @color-primary; 35 | } 36 | 37 | body, html 38 | { 39 | scroll-behavior: smooth; 40 | background-color: @color-light; 41 | min-width: 320px; 42 | font-family: @font-body; 43 | font-weight: 300; 44 | font-size: 16px; 45 | line-height: 1.5em; // 24px / 150% 46 | color: @color-dark; 47 | margin: 0; 48 | padding: 0; 49 | height: 100%; 50 | width: 100%; 51 | } 52 | 53 | app { 54 | height: 100%; 55 | width: 100%; 56 | } 57 | 58 | table { 59 | margin: 1em 0 2em 0; 60 | border-spacing: 0; 61 | width: 100%; 62 | 63 | thead { 64 | background: darken(@color-light, 5%); 65 | } 66 | 67 | th { 68 | font-family: @font-body, sans-serif; 69 | font-weight: normal; 70 | text-align: left; 71 | background: darken(@color-light, 5%); 72 | vertical-align: top; 73 | } 74 | 75 | tr { 76 | th, 77 | td { 78 | vertical-align: top; 79 | padding: .75em .75em .25em .5em; 80 | border-bottom: 1px solid darken(@color-light, 10%); 81 | } 82 | } 83 | } 84 | 85 | 86 | /* ======================================== 87 | TEXTUAL/CONTENT ELEMENTS 88 | ======================================== */ 89 | 90 | h1, h2, h3, h4, h5, h6 91 | { 92 | margin: 0; 93 | margin: 1em 0; 94 | line-height: 1.25em; 95 | text-transform: none; 96 | font-family: @font-heading; 97 | font-weight: 400; 98 | a { 99 | text-decoration: none; 100 | } 101 | } 102 | 103 | h1,h2,h3,h4 { 104 | position: relative; 105 | a { 106 | position: absolute; 107 | left: -1em; 108 | width: calc(~'100% + 1em'); 109 | opacity: 0; 110 | transition: @duration-hover all ease; 111 | } 112 | &:hover a { 113 | opacity: 1; 114 | } 115 | } 116 | 117 | h1 { 118 | font-size: 2.5em; 119 | margin: 0; 120 | padding-top: 1.5em; 121 | text-transform: uppercase; 122 | } 123 | 124 | h2 { 125 | font-size: 1.5em; 126 | color: @color-primary; 127 | } 128 | 129 | h3, h3 a { 130 | font-size: 1.15em; 131 | color: @color-primary; 132 | } 133 | 134 | h4 { 135 | font-size: 1rem; 136 | color: @color-primary; 137 | } 138 | 139 | hr 140 | { 141 | margin: 1em 0; 142 | border: none; 143 | width: 100%; 144 | height: .1rem; 145 | background-color: lighten(@color-dark, 50%); 146 | } 147 | 148 | p 149 | { 150 | padding: 0; 151 | margin: 1em 0; 152 | line-height: 1.5em; 153 | word-wrap: break-word; 154 | &:first-child { 155 | margin-top: 0; 156 | } 157 | 158 | &:last-child { 159 | margin-bottom: 0; 160 | } 161 | } 162 | 163 | a 164 | { 165 | position: relative; 166 | transition: all @duration-action ease; 167 | color: @color-primary; 168 | text-decoration: none; 169 | cursor: pointer; 170 | outline: 0; 171 | &:hover { 172 | color: @color-primary; 173 | } 174 | 175 | img 176 | { 177 | border: none; 178 | outline: none; 179 | } 180 | 181 | p, 182 | span 183 | { 184 | cursor: pointer; 185 | } 186 | } 187 | 188 | img 189 | { 190 | max-width: 100%; 191 | height: auto; 192 | } 193 | 194 | ul 195 | { 196 | list-style: square; 197 | } 198 | 199 | ul,ol 200 | { 201 | padding: 0 0 0 1em; 202 | margin-bottom: 0; 203 | } 204 | 205 | ol 206 | { 207 | list-style-type: decimal; 208 | ol { 209 | list-style-type: lower-alpha; 210 | } 211 | } 212 | 213 | b, strong { 214 | font-weight: 700; 215 | font-family: @font-body, sans-serif; 216 | } 217 | 218 | /* ======================================== 219 | FORM ELEMENTS 220 | ======================================== */ 221 | 222 | fieldset 223 | { 224 | margin: 0; 225 | padding: 0; 226 | border: 0; 227 | } 228 | 229 | input[type=submit] { 230 | .button(@color-primary, outline-reverse); 231 | margin: 0; 232 | } 233 | -------------------------------------------------------------------------------- /docs/2.6.7/templating.md: -------------------------------------------------------------------------------- 1 | 2.6.7 2 | # Templating 3 | 4 | ## Anatomy 5 | 6 | Everything is a component, Riot refers to them as tags 7 | Tags have to be [mounted](#riot-mount) 8 | 9 | ```html 10 | 11 | Markup 12 | 15 | 16 | ``` 17 | 18 | ## Expressions 19 | 20 | ### Pure JavaScript 21 | 22 | Can contain any javascript except curly brackets 23 | 24 | ```html 25 | Random number: {Math.random() * 10} 26 | © 27 | How long is a day in seconds? {60*60*24} 28 | ``` 29 | 30 | ### Accessing tag properties 31 | 32 | ```html 33 | My name is {author.name} 34 | and I'm {author.age} {unit}s old 35 | 42 | ``` 43 | ## Foreach - loop data 44 | 45 | ### Array 46 | 47 | ```html 48 | 53 | 62 | ``` 63 | 64 | You can access both index and value by providing a second argument 65 | 66 | ```html 67 | 72 | ``` 73 | 74 | ### Object 75 | 76 | Used for more complex structures, where each item has a distinct key 77 | 78 | Objects use different order of `key, value` in the each statement 79 | 80 | ```html 81 | 83 | 84 | 96 | ``` 97 | 98 | ### Virtual 99 | 100 | The virtual tag is used for loops that should generate no wrapper markup 101 | 102 | ```html 103 |
104 | 105 |
{item.key}
106 |
{item.value}
107 | 108 |
109 | ``` 110 | 111 | ## Conditionals 112 | 113 | ### Shorthand ternary 114 | 115 | ```html 116 |
117 | ``` 118 | 119 | ### Ternary 120 | 121 | ```html 122 |
123 | ``` 124 | 125 | ### Blocklevel 126 | 127 | Does not write HTML if condition is false 128 | 129 | ```html 130 |
131 | ``` 132 | 133 | ### Hide 134 | 135 | Writes HTML, just sets `display` style to `none` if condition is true 136 | 137 | ```html 138 | 139 | ``` 140 | 141 | ### Show 142 | 143 | Opposite of Hide `display` 144 | 145 | ```html 146 | 147 | ``` 148 | 149 | ## Access elements and tags 150 | 151 | ### HTML Elements 152 | 153 | You can also use `id` if you are not comfortable with `name` 154 | 155 | ```html 156 | 157 | 160 | ``` 161 | 162 | ### Child tags 163 | 164 | Access via `name` or `id` 165 | 166 | ```html 167 | 168 | 171 | ``` 172 | 173 | If there are more instances, you get an array of tags 174 | 175 | ```html 176 | 177 | 178 | 179 | 183 | ``` 184 | 185 | ## Options 186 | 187 | Options can be passed via html params or on mount 188 | 189 | Options only accept `boolean`, `number`, `string` or simple `array`, when passing values directly 190 | 191 | ### Passing values directly per HTML 192 | 193 | ```html 194 | 195 | 196 | 201 | ``` 202 | 203 | ### Passing variables per HTML 204 | 205 | ```html 206 | 207 | 213 | ``` 214 | 215 | ### Passing values on Mount 216 | 217 | On mount, we are more flexible, since we are in js 218 | See [mount](#riot-mount) 219 | 220 | ```js 221 | var items = [ 222 | {name: 'Share', done: true}, 223 | {name: 'Star', done: true}, 224 | {name: 'Work', done: false}, 225 | ] 226 | riot.mount('todo-list', items) 227 | ``` 228 | 229 | ## Yield 230 | 231 | Yielding is like [options](#templating-options), just that it accepts HTML and other riot tags 232 | 233 | Definition 234 | ```html 235 | 236 | 237 | 238 | ``` 239 | 240 | Usage 241 | ```html 242 | 243 | Hi! I'm supporting 244 | HTML 245 | 246 | ``` 247 | 248 | ### Multiple Yieldpoints 249 | 250 | **Notice:** This feature is supported in **Riot 2.3.12** or later 251 | 252 | #### Usage 253 | 254 | ```html 255 | 256 | 257 | Add post 258 | Recently published 259 | 260 | 261 | Posts 262 | 263 | 264 | ``` 265 | 266 | #### Definition 267 | 268 | ```html 269 | 270 |

271 | 272 |

273 |
274 | 275 |
276 | 277 | ``` 278 | -------------------------------------------------------------------------------- /docs/3.0.0/templating.md: -------------------------------------------------------------------------------- 1 | 3.0.0 2 | # Templating 3 | 4 | ## Anatomy 5 | 6 | Everything is a component, Riot refers to them as tags 7 | Tags have to be [mounted](#riot-mount) 8 | 9 | ```html 10 | 11 | Markup 12 | 15 | 16 | ``` 17 | 18 | ## Expressions 19 | 20 | ### Pure JavaScript 21 | 22 | Expressions `{}` can contain any javascript except curly brackets (object literals) 23 | 24 | ```html 25 | Random number: {Math.random() * 10} 26 | © 27 | How long is a day in seconds? {60*60*24} 28 | ``` 29 | 30 | ### Accessing tag properties 31 | 32 | ```html 33 | My name is {author.name} 34 | and I'm {author.age} {unit}s old 35 | 42 | ``` 43 | ## Foreach - loop data 44 | 45 | ### Array 46 | 47 | ```html 48 | 53 | 62 | ``` 63 | 64 | You can access both index and value by providing a second argument 65 | 66 | ```html 67 | 72 | ``` 73 | 74 | ### Object 75 | 76 | Used for more complex structures, where each item has a distinct key 77 | 78 | Objects use different order of `key, value` in the each statement 79 | 80 | ```html 81 | 83 | 84 | 96 | ``` 97 | 98 | ### Virtual 99 | 100 | The virtual tag is used for loops that should generate no wrapper markup 101 | 102 | ```html 103 |
104 | 105 |
{item.key}
106 |
{item.value}
107 | 108 |
109 | ``` 110 | 111 | ### Context 112 | 113 | Loops have their own context. Instead of `item.key`, you could obtain the property just with `key`. Because of this, methods and properties of the tag instance itself, have to be accessed with for example `parent.removeItem` 114 | 115 | ## Conditionals 116 | 117 | ### Shorthand ternary 118 | 119 | ```html 120 |
121 | ``` 122 | 123 | ### Ternary 124 | 125 | ```html 126 |
127 | ``` 128 | 129 | ### Blocklevel 130 | 131 | Does not write HTML if condition is false 132 | 133 | ```html 134 |
135 | ``` 136 | 137 | ### Hide 138 | 139 | Writes HTML, just sets `display` style to `none` if condition is true 140 | 141 | ```html 142 | 143 | ``` 144 | 145 | ### Show 146 | 147 | Opposite of Hide `display` 148 | 149 | ```html 150 | 151 | ``` 152 | 153 | ## Access elements and tags 154 | 155 | ### HTML Elements 156 | 157 | To access your elements, use the `ref` attribute. References can then be accessed with `this.refs` 158 | 159 | ```html 160 | 161 | 164 | ``` 165 | 166 | ### Child tags 167 | 168 | These are also accessed via the `refs` 169 | 170 | ```html 171 | 172 | 175 | ``` 176 | 177 | If there are more instances, you get an array of tags 178 | 179 | ```html 180 | 181 | 182 | 183 | 187 | ``` 188 | 189 | ## Options 190 | 191 | Options can be passed via html params or on mount 192 | 193 | Options only accept `boolean`, `number`, `string` or simple `array`, when passing values directly 194 | 195 | ### Passing values directly per HTML 196 | 197 | ```html 198 | 199 | 200 | 205 | ``` 206 | 207 | ### Passing variables per HTML 208 | 209 | ```html 210 | 211 | 217 | ``` 218 | 219 | ### Passing values on Mount 220 | 221 | On mount, we are more flexible, since we are in js 222 | See [mount](#riot-mount) 223 | 224 | ```js 225 | var items = [ 226 | {name: 'Share', done: true}, 227 | {name: 'Star', done: true}, 228 | {name: 'Work', done: false}, 229 | ] 230 | riot.mount('todo-list', items) 231 | ``` 232 | 233 | ## Yield 234 | 235 | Yielding is like [options](#templating-options), just that it accepts HTML and other riot tags 236 | 237 | Definition 238 | ```html 239 | 240 | 241 | 242 | ``` 243 | 244 | Usage 245 | ```html 246 | 247 | Hi! I'm supporting 248 | HTML 249 | 250 | ``` 251 | 252 | ### Multiple Yieldpoints 253 | 254 | **Notice:** This feature is supported in **Riot 2.3.12** or later 255 | 256 | #### Usage 257 | 258 | ```html 259 | 260 | 261 | Add post 262 | Recently published 263 | 264 | 265 | Posts 266 | 267 | 268 | ``` 269 | 270 | #### Definition 271 | 272 | ```html 273 | 274 |

275 | 276 |

277 |
278 | 279 |
280 | 281 | ``` 282 | -------------------------------------------------------------------------------- /js/tags/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 21 | 22 | 23 | 29 | 34 | {shortcut.name} 35 | 36 | 37 | 38 | 39 | ̑ 40 | 41 | 42 |
43 |
44 |
47 | 48 |
49 |
50 |
51 | 52 |
53 |
54 |

55 | Created with ♥ by 56 | @MartinMuzatko with Riot {builtwith} 57 |

58 |

59 | Learn how to use Riot in the real world. Visit 60 | happy-css.com 61 |

62 |
63 |
64 | 237 | 238 | -------------------------------------------------------------------------------- /less/vendor/flex-grid.less: -------------------------------------------------------------------------------- 1 | [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)}[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}[layout]{display:flex;flex-wrap:wrap}[layout]>*{box-sizing:border-box}[layout="column"]{flex-direction:column}[layout="row"]{flex-direction:row}[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]{flex:1}[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%}[layout="column"]>[flex],[layout="column"]>[flex]{max-width:100%}[layout="row"]>[flex="5"],[layout="row"]>[flex="5"],[layout="row"]>[flex="5"]{flex:1 1 5%;max-width:5%}[layout="column"]>[flex="5"],[layout="column"]>[flex="5"],[layout="column"]>[flex="5"]{flex:1 1 5%;max-height:5%}[layout="row"]>[flex="10"],[layout="row"]>[flex="10"],[layout="row"]>[flex="10"]{flex:1 1 10%;max-width:10%}[layout="column"]>[flex="10"],[layout="column"]>[flex="10"],[layout="column"]>[flex="10"]{flex:1 1 10%;max-height:10%}[layout="row"]>[flex="15"],[layout="row"]>[flex="15"],[layout="row"]>[flex="15"]{flex:1 1 15%;max-width:15%}[layout="column"]>[flex="15"],[layout="column"]>[flex="15"],[layout="column"]>[flex="15"]{flex:1 1 15%;max-height:15%}[layout="row"]>[flex="20"],[layout="row"]>[flex="20"],[layout="row"]>[flex="20"]{flex:1 1 20%;max-width:20%}[layout="column"]>[flex="20"],[layout="column"]>[flex="20"],[layout="column"]>[flex="20"]{flex:1 1 20%;max-height:20%}[layout="row"]>[flex="25"],[layout="row"]>[flex="25"],[layout="row"]>[flex="25"]{flex:1 1 25%;max-width:25%}[layout="column"]>[flex="25"],[layout="column"]>[flex="25"],[layout="column"]>[flex="25"]{flex:1 1 25%;max-height:25%}[layout="row"]>[flex="30"],[layout="row"]>[flex="30"],[layout="row"]>[flex="30"]{flex:1 1 30%;max-width:30%}[layout="column"]>[flex="30"],[layout="column"]>[flex="30"],[layout="column"]>[flex="30"]{flex:1 1 30%;max-height:30%}[layout="row"]>[flex="35"],[layout="row"]>[flex="35"],[layout="row"]>[flex="35"]{flex:1 1 35%;max-width:35%}[layout="column"]>[flex="35"],[layout="column"]>[flex="35"],[layout="column"]>[flex="35"]{flex:1 1 35%;max-height:35%}[layout="row"]>[flex="40"],[layout="row"]>[flex="40"],[layout="row"]>[flex="40"]{flex:1 1 40%;max-width:40%}[layout="column"]>[flex="40"],[layout="column"]>[flex="40"],[layout="column"]>[flex="40"]{flex:1 1 40%;max-height:40%}[layout="row"]>[flex="45"],[layout="row"]>[flex="45"],[layout="row"]>[flex="45"]{flex:1 1 45%;max-width:45%}[layout="column"]>[flex="45"],[layout="column"]>[flex="45"],[layout="column"]>[flex="45"]{flex:1 1 45%;max-height:45%}[layout="row"]>[flex="50"],[layout="row"]>[flex="50"],[layout="row"]>[flex="50"]{flex:1 1 50%;max-width:50%}[layout="column"]>[flex="50"],[layout="column"]>[flex="50"],[layout="column"]>[flex="50"]{flex:1 1 50%;max-height:50%}[layout="row"]>[flex="55"],[layout="row"]>[flex="55"],[layout="row"]>[flex="55"]{flex:1 1 55%;max-width:55%}[layout="column"]>[flex="55"],[layout="column"]>[flex="55"],[layout="column"]>[flex="55"]{flex:1 1 55%;max-height:55%}[layout="row"]>[flex="60"],[layout="row"]>[flex="60"],[layout="row"]>[flex="60"]{flex:1 1 60%;max-width:60%}[layout="column"]>[flex="60"],[layout="column"]>[flex="60"],[layout="column"]>[flex="60"]{flex:1 1 60%;max-height:60%}[layout="row"]>[flex="65"],[layout="row"]>[flex="65"],[layout="row"]>[flex="65"]{flex:1 1 65%;max-width:65%}[layout="column"]>[flex="65"],[layout="column"]>[flex="65"],[layout="column"]>[flex="65"]{flex:1 1 65%;max-height:65%}[layout="row"]>[flex="70"],[layout="row"]>[flex="70"],[layout="row"]>[flex="70"]{flex:1 1 70%;max-width:70%}[layout="column"]>[flex="70"],[layout="column"]>[flex="70"],[layout="column"]>[flex="70"]{flex:1 1 70%;max-height:70%}[layout="row"]>[flex="75"],[layout="row"]>[flex="75"],[layout="row"]>[flex="75"]{flex:1 1 75%;max-width:75%}[layout="column"]>[flex="75"],[layout="column"]>[flex="75"],[layout="column"]>[flex="75"]{flex:1 1 75%;max-height:75%}[layout="row"]>[flex="80"],[layout="row"]>[flex="80"],[layout="row"]>[flex="80"]{flex:1 1 80%;max-width:80%}[layout="column"]>[flex="80"],[layout="column"]>[flex="80"],[layout="column"]>[flex="80"]{flex:1 1 80%;max-height:80%}[layout="row"]>[flex="85"],[layout="row"]>[flex="85"],[layout="row"]>[flex="85"]{flex:1 1 85%;max-width:85%}[layout="column"]>[flex="85"],[layout="column"]>[flex="85"],[layout="column"]>[flex="85"]{flex:1 1 85%;max-height:85%}[layout="row"]>[flex="90"],[layout="row"]>[flex="90"],[layout="row"]>[flex="90"]{flex:1 1 90%;max-width:90%}[layout="column"]>[flex="90"],[layout="column"]>[flex="90"],[layout="column"]>[flex="90"]{flex:1 1 90%;max-height:90%}[layout="row"]>[flex="95"],[layout="row"]>[flex="95"],[layout="row"]>[flex="95"]{flex:1 1 95%;max-width:95%}[layout="column"]>[flex="95"],[layout="column"]>[flex="95"],[layout="column"]>[flex="95"]{flex:1 1 95%;max-height:95%}[layout="row"]>[flex="100"],[layout="row"]>[flex="100"],[layout="row"]>[flex="100"]{flex:1 1 100%;max-width:100%}[layout="column"]>[flex="100"],[layout="column"]>[flex="100"],[layout="column"]>[flex="100"]{flex:1 1 100%;max-height:100%}[layout="row"]>[flex="33"],[layout="row"]>[flex="33"],[layout="row"]>[flex="33"]{flex:1 1 33.33%;max-width:33.33%}[layout="column"]>[flex="33"],[layout="column"]>[flex="33"],[layout="column"]>[flex="33"]{flex:1 1 33.33%;max-height:33.33%}[layout="row"]>[flex="66"],[layout="row"]>[flex="66"],[layout="row"]>[flex="66"]{flex:1 1 66.66%;max-width:66.66%}[layout="column"]>[flex="66"],[layout="column"]>[flex="66"],[layout="column"]>[flex="66"]{flex:1 1 66.66%;max-height:66.66%}[hide]{display:none}@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)}[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}[layout-sm]{display:flex;flex-wrap:wrap}[layout-sm]>*{box-sizing:border-box}[layout-sm="column"]{flex-direction:column}[layout-sm="row"]{flex-direction:row}[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-sm]{flex:1}[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%}[layout-sm="column"]>[flex-sm],[layout="column"]>[flex-sm]{max-width:100%}[layout="row"]>[flex-sm="5"],[layout-sm="row"]>[flex-sm="5"],[layout-sm="row"]>[flex="5"]{flex:1 1 5%;max-width:5%}[layout="column"]>[flex-sm="5"],[layout-sm="column"]>[flex-sm="5"],[layout-sm="column"]>[flex="5"]{flex:1 1 5%;max-height:5%}[layout="row"]>[flex-sm="10"],[layout-sm="row"]>[flex-sm="10"],[layout-sm="row"]>[flex="10"]{flex:1 1 10%;max-width:10%}[layout="column"]>[flex-sm="10"],[layout-sm="column"]>[flex-sm="10"],[layout-sm="column"]>[flex="10"]{flex:1 1 10%;max-height:10%}[layout="row"]>[flex-sm="15"],[layout-sm="row"]>[flex-sm="15"],[layout-sm="row"]>[flex="15"]{flex:1 1 15%;max-width:15%}[layout="column"]>[flex-sm="15"],[layout-sm="column"]>[flex-sm="15"],[layout-sm="column"]>[flex="15"]{flex:1 1 15%;max-height:15%}[layout="row"]>[flex-sm="20"],[layout-sm="row"]>[flex-sm="20"],[layout-sm="row"]>[flex="20"]{flex:1 1 20%;max-width:20%}[layout="column"]>[flex-sm="20"],[layout-sm="column"]>[flex-sm="20"],[layout-sm="column"]>[flex="20"]{flex:1 1 20%;max-height:20%}[layout="row"]>[flex-sm="25"],[layout-sm="row"]>[flex-sm="25"],[layout-sm="row"]>[flex="25"]{flex:1 1 25%;max-width:25%}[layout="column"]>[flex-sm="25"],[layout-sm="column"]>[flex-sm="25"],[layout-sm="column"]>[flex="25"]{flex:1 1 25%;max-height:25%}[layout="row"]>[flex-sm="30"],[layout-sm="row"]>[flex-sm="30"],[layout-sm="row"]>[flex="30"]{flex:1 1 30%;max-width:30%}[layout="column"]>[flex-sm="30"],[layout-sm="column"]>[flex-sm="30"],[layout-sm="column"]>[flex="30"]{flex:1 1 30%;max-height:30%}[layout="row"]>[flex-sm="35"],[layout-sm="row"]>[flex-sm="35"],[layout-sm="row"]>[flex="35"]{flex:1 1 35%;max-width:35%}[layout="column"]>[flex-sm="35"],[layout-sm="column"]>[flex-sm="35"],[layout-sm="column"]>[flex="35"]{flex:1 1 35%;max-height:35%}[layout="row"]>[flex-sm="40"],[layout-sm="row"]>[flex-sm="40"],[layout-sm="row"]>[flex="40"]{flex:1 1 40%;max-width:40%}[layout="column"]>[flex-sm="40"],[layout-sm="column"]>[flex-sm="40"],[layout-sm="column"]>[flex="40"]{flex:1 1 40%;max-height:40%}[layout="row"]>[flex-sm="45"],[layout-sm="row"]>[flex-sm="45"],[layout-sm="row"]>[flex="45"]{flex:1 1 45%;max-width:45%}[layout="column"]>[flex-sm="45"],[layout-sm="column"]>[flex-sm="45"],[layout-sm="column"]>[flex="45"]{flex:1 1 45%;max-height:45%}[layout="row"]>[flex-sm="50"],[layout-sm="row"]>[flex-sm="50"],[layout-sm="row"]>[flex="50"]{flex:1 1 50%;max-width:50%}[layout="column"]>[flex-sm="50"],[layout-sm="column"]>[flex-sm="50"],[layout-sm="column"]>[flex="50"]{flex:1 1 50%;max-height:50%}[layout="row"]>[flex-sm="55"],[layout-sm="row"]>[flex-sm="55"],[layout-sm="row"]>[flex="55"]{flex:1 1 55%;max-width:55%}[layout="column"]>[flex-sm="55"],[layout-sm="column"]>[flex-sm="55"],[layout-sm="column"]>[flex="55"]{flex:1 1 55%;max-height:55%}[layout="row"]>[flex-sm="60"],[layout-sm="row"]>[flex-sm="60"],[layout-sm="row"]>[flex="60"]{flex:1 1 60%;max-width:60%}[layout="column"]>[flex-sm="60"],[layout-sm="column"]>[flex-sm="60"],[layout-sm="column"]>[flex="60"]{flex:1 1 60%;max-height:60%}[layout="row"]>[flex-sm="65"],[layout-sm="row"]>[flex-sm="65"],[layout-sm="row"]>[flex="65"]{flex:1 1 65%;max-width:65%}[layout="column"]>[flex-sm="65"],[layout-sm="column"]>[flex-sm="65"],[layout-sm="column"]>[flex="65"]{flex:1 1 65%;max-height:65%}[layout="row"]>[flex-sm="70"],[layout-sm="row"]>[flex-sm="70"],[layout-sm="row"]>[flex="70"]{flex:1 1 70%;max-width:70%}[layout="column"]>[flex-sm="70"],[layout-sm="column"]>[flex-sm="70"],[layout-sm="column"]>[flex="70"]{flex:1 1 70%;max-height:70%}[layout="row"]>[flex-sm="75"],[layout-sm="row"]>[flex-sm="75"],[layout-sm="row"]>[flex="75"]{flex:1 1 75%;max-width:75%}[layout="column"]>[flex-sm="75"],[layout-sm="column"]>[flex-sm="75"],[layout-sm="column"]>[flex="75"]{flex:1 1 75%;max-height:75%}[layout="row"]>[flex-sm="80"],[layout-sm="row"]>[flex-sm="80"],[layout-sm="row"]>[flex="80"]{flex:1 1 80%;max-width:80%}[layout="column"]>[flex-sm="80"],[layout-sm="column"]>[flex-sm="80"],[layout-sm="column"]>[flex="80"]{flex:1 1 80%;max-height:80%}[layout="row"]>[flex-sm="85"],[layout-sm="row"]>[flex-sm="85"],[layout-sm="row"]>[flex="85"]{flex:1 1 85%;max-width:85%}[layout="column"]>[flex-sm="85"],[layout-sm="column"]>[flex-sm="85"],[layout-sm="column"]>[flex="85"]{flex:1 1 85%;max-height:85%}[layout="row"]>[flex-sm="90"],[layout-sm="row"]>[flex-sm="90"],[layout-sm="row"]>[flex="90"]{flex:1 1 90%;max-width:90%}[layout="column"]>[flex-sm="90"],[layout-sm="column"]>[flex-sm="90"],[layout-sm="column"]>[flex="90"]{flex:1 1 90%;max-height:90%}[layout="row"]>[flex-sm="95"],[layout-sm="row"]>[flex-sm="95"],[layout-sm="row"]>[flex="95"]{flex:1 1 95%;max-width:95%}[layout="column"]>[flex-sm="95"],[layout-sm="column"]>[flex-sm="95"],[layout-sm="column"]>[flex="95"]{flex:1 1 95%;max-height:95%}[layout="row"]>[flex-sm="100"],[layout-sm="row"]>[flex-sm="100"],[layout-sm="row"]>[flex="100"]{flex:1 1 100%;max-width:100%}[layout="column"]>[flex-sm="100"],[layout-sm="column"]>[flex-sm="100"],[layout-sm="column"]>[flex="100"]{flex:1 1 100%;max-height:100%}[layout="row"]>[flex-sm="33"],[layout-sm="row"]>[flex-sm="33"],[layout-sm="row"]>[flex="33"]{flex:1 1 33.33%;max-width:33.33%}[layout="column"]>[flex-sm="33"],[layout-sm="column"]>[flex-sm="33"],[layout-sm="column"]>[flex="33"]{flex:1 1 33.33%;max-height:33.33%}[layout="row"]>[flex-sm="66"],[layout-sm="row"]>[flex-sm="66"],[layout-sm="row"]>[flex="66"]{flex:1 1 66.66%;max-width:66.66%}[layout="column"]>[flex-sm="66"],[layout-sm="column"]>[flex-sm="66"],[layout-sm="column"]>[flex="66"]{flex:1 1 66.66%;max-height:66.66%}[hide-sm]{display:none}}@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)}[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}[layout-gt-sm]{display:flex;flex-wrap:wrap}[layout-gt-sm]>*{box-sizing:border-box}[layout-gt-sm="column"]{flex-direction:column}[layout-gt-sm="row"]{flex-direction:row}[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-gt-sm]{flex:1}[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%}[layout-gt-sm="column"]>[flex-gt-sm],[layout="column"]>[flex-gt-sm]{max-width:100%}[layout="row"]>[flex-gt-sm="5"],[layout-gt-sm="row"]>[flex-gt-sm="5"],[layout-gt-sm="row"]>[flex="5"]{flex:1 1 5%;max-width:5%}[layout="column"]>[flex-gt-sm="5"],[layout-gt-sm="column"]>[flex-gt-sm="5"],[layout-gt-sm="column"]>[flex="5"]{flex:1 1 5%;max-height:5%}[layout="row"]>[flex-gt-sm="10"],[layout-gt-sm="row"]>[flex-gt-sm="10"],[layout-gt-sm="row"]>[flex="10"]{flex:1 1 10%;max-width:10%}[layout="column"]>[flex-gt-sm="10"],[layout-gt-sm="column"]>[flex-gt-sm="10"],[layout-gt-sm="column"]>[flex="10"]{flex:1 1 10%;max-height:10%}[layout="row"]>[flex-gt-sm="15"],[layout-gt-sm="row"]>[flex-gt-sm="15"],[layout-gt-sm="row"]>[flex="15"]{flex:1 1 15%;max-width:15%}[layout="column"]>[flex-gt-sm="15"],[layout-gt-sm="column"]>[flex-gt-sm="15"],[layout-gt-sm="column"]>[flex="15"]{flex:1 1 15%;max-height:15%}[layout="row"]>[flex-gt-sm="20"],[layout-gt-sm="row"]>[flex-gt-sm="20"],[layout-gt-sm="row"]>[flex="20"]{flex:1 1 20%;max-width:20%}[layout="column"]>[flex-gt-sm="20"],[layout-gt-sm="column"]>[flex-gt-sm="20"],[layout-gt-sm="column"]>[flex="20"]{flex:1 1 20%;max-height:20%}[layout="row"]>[flex-gt-sm="25"],[layout-gt-sm="row"]>[flex-gt-sm="25"],[layout-gt-sm="row"]>[flex="25"]{flex:1 1 25%;max-width:25%}[layout="column"]>[flex-gt-sm="25"],[layout-gt-sm="column"]>[flex-gt-sm="25"],[layout-gt-sm="column"]>[flex="25"]{flex:1 1 25%;max-height:25%}[layout="row"]>[flex-gt-sm="30"],[layout-gt-sm="row"]>[flex-gt-sm="30"],[layout-gt-sm="row"]>[flex="30"]{flex:1 1 30%;max-width:30%}[layout="column"]>[flex-gt-sm="30"],[layout-gt-sm="column"]>[flex-gt-sm="30"],[layout-gt-sm="column"]>[flex="30"]{flex:1 1 30%;max-height:30%}[layout="row"]>[flex-gt-sm="35"],[layout-gt-sm="row"]>[flex-gt-sm="35"],[layout-gt-sm="row"]>[flex="35"]{flex:1 1 35%;max-width:35%}[layout="column"]>[flex-gt-sm="35"],[layout-gt-sm="column"]>[flex-gt-sm="35"],[layout-gt-sm="column"]>[flex="35"]{flex:1 1 35%;max-height:35%}[layout="row"]>[flex-gt-sm="40"],[layout-gt-sm="row"]>[flex-gt-sm="40"],[layout-gt-sm="row"]>[flex="40"]{flex:1 1 40%;max-width:40%}[layout="column"]>[flex-gt-sm="40"],[layout-gt-sm="column"]>[flex-gt-sm="40"],[layout-gt-sm="column"]>[flex="40"]{flex:1 1 40%;max-height:40%}[layout="row"]>[flex-gt-sm="45"],[layout-gt-sm="row"]>[flex-gt-sm="45"],[layout-gt-sm="row"]>[flex="45"]{flex:1 1 45%;max-width:45%}[layout="column"]>[flex-gt-sm="45"],[layout-gt-sm="column"]>[flex-gt-sm="45"],[layout-gt-sm="column"]>[flex="45"]{flex:1 1 45%;max-height:45%}[layout="row"]>[flex-gt-sm="50"],[layout-gt-sm="row"]>[flex-gt-sm="50"],[layout-gt-sm="row"]>[flex="50"]{flex:1 1 50%;max-width:50%}[layout="column"]>[flex-gt-sm="50"],[layout-gt-sm="column"]>[flex-gt-sm="50"],[layout-gt-sm="column"]>[flex="50"]{flex:1 1 50%;max-height:50%}[layout="row"]>[flex-gt-sm="55"],[layout-gt-sm="row"]>[flex-gt-sm="55"],[layout-gt-sm="row"]>[flex="55"]{flex:1 1 55%;max-width:55%}[layout="column"]>[flex-gt-sm="55"],[layout-gt-sm="column"]>[flex-gt-sm="55"],[layout-gt-sm="column"]>[flex="55"]{flex:1 1 55%;max-height:55%}[layout="row"]>[flex-gt-sm="60"],[layout-gt-sm="row"]>[flex-gt-sm="60"],[layout-gt-sm="row"]>[flex="60"]{flex:1 1 60%;max-width:60%}[layout="column"]>[flex-gt-sm="60"],[layout-gt-sm="column"]>[flex-gt-sm="60"],[layout-gt-sm="column"]>[flex="60"]{flex:1 1 60%;max-height:60%}[layout="row"]>[flex-gt-sm="65"],[layout-gt-sm="row"]>[flex-gt-sm="65"],[layout-gt-sm="row"]>[flex="65"]{flex:1 1 65%;max-width:65%}[layout="column"]>[flex-gt-sm="65"],[layout-gt-sm="column"]>[flex-gt-sm="65"],[layout-gt-sm="column"]>[flex="65"]{flex:1 1 65%;max-height:65%}[layout="row"]>[flex-gt-sm="70"],[layout-gt-sm="row"]>[flex-gt-sm="70"],[layout-gt-sm="row"]>[flex="70"]{flex:1 1 70%;max-width:70%}[layout="column"]>[flex-gt-sm="70"],[layout-gt-sm="column"]>[flex-gt-sm="70"],[layout-gt-sm="column"]>[flex="70"]{flex:1 1 70%;max-height:70%}[layout="row"]>[flex-gt-sm="75"],[layout-gt-sm="row"]>[flex-gt-sm="75"],[layout-gt-sm="row"]>[flex="75"]{flex:1 1 75%;max-width:75%}[layout="column"]>[flex-gt-sm="75"],[layout-gt-sm="column"]>[flex-gt-sm="75"],[layout-gt-sm="column"]>[flex="75"]{flex:1 1 75%;max-height:75%}[layout="row"]>[flex-gt-sm="80"],[layout-gt-sm="row"]>[flex-gt-sm="80"],[layout-gt-sm="row"]>[flex="80"]{flex:1 1 80%;max-width:80%}[layout="column"]>[flex-gt-sm="80"],[layout-gt-sm="column"]>[flex-gt-sm="80"],[layout-gt-sm="column"]>[flex="80"]{flex:1 1 80%;max-height:80%}[layout="row"]>[flex-gt-sm="85"],[layout-gt-sm="row"]>[flex-gt-sm="85"],[layout-gt-sm="row"]>[flex="85"]{flex:1 1 85%;max-width:85%}[layout="column"]>[flex-gt-sm="85"],[layout-gt-sm="column"]>[flex-gt-sm="85"],[layout-gt-sm="column"]>[flex="85"]{flex:1 1 85%;max-height:85%}[layout="row"]>[flex-gt-sm="90"],[layout-gt-sm="row"]>[flex-gt-sm="90"],[layout-gt-sm="row"]>[flex="90"]{flex:1 1 90%;max-width:90%}[layout="column"]>[flex-gt-sm="90"],[layout-gt-sm="column"]>[flex-gt-sm="90"],[layout-gt-sm="column"]>[flex="90"]{flex:1 1 90%;max-height:90%}[layout="row"]>[flex-gt-sm="95"],[layout-gt-sm="row"]>[flex-gt-sm="95"],[layout-gt-sm="row"]>[flex="95"]{flex:1 1 95%;max-width:95%}[layout="column"]>[flex-gt-sm="95"],[layout-gt-sm="column"]>[flex-gt-sm="95"],[layout-gt-sm="column"]>[flex="95"]{flex:1 1 95%;max-height:95%}[layout="row"]>[flex-gt-sm="100"],[layout-gt-sm="row"]>[flex-gt-sm="100"],[layout-gt-sm="row"]>[flex="100"]{flex:1 1 100%;max-width:100%}[layout="column"]>[flex-gt-sm="100"],[layout-gt-sm="column"]>[flex-gt-sm="100"],[layout-gt-sm="column"]>[flex="100"]{flex:1 1 100%;max-height:100%}[layout="row"]>[flex-gt-sm="33"],[layout-gt-sm="row"]>[flex-gt-sm="33"],[layout-gt-sm="row"]>[flex="33"]{flex:1 1 33.33%;max-width:33.33%}[layout="column"]>[flex-gt-sm="33"],[layout-gt-sm="column"]>[flex-gt-sm="33"],[layout-gt-sm="column"]>[flex="33"]{flex:1 1 33.33%;max-height:33.33%}[layout="row"]>[flex-gt-sm="66"],[layout-gt-sm="row"]>[flex-gt-sm="66"],[layout-gt-sm="row"]>[flex="66"]{flex:1 1 66.66%;max-width:66.66%}[layout="column"]>[flex-gt-sm="66"],[layout-gt-sm="column"]>[flex-gt-sm="66"],[layout-gt-sm="column"]>[flex="66"]{flex:1 1 66.66%;max-height:66.66%}[hide-gt-sm]{display:none}}@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)}[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}[layout-md]{display:flex;flex-wrap:wrap}[layout-md]>*{box-sizing:border-box}[layout-md="column"]{flex-direction:column}[layout-md="row"]{flex-direction:row}[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-md]{flex:1}[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%}[layout-md="column"]>[flex-md],[layout="column"]>[flex-md]{max-width:100%}[layout="row"]>[flex-md="5"],[layout-md="row"]>[flex-md="5"],[layout-md="row"]>[flex="5"]{flex:1 1 5%;max-width:5%}[layout="column"]>[flex-md="5"],[layout-md="column"]>[flex-md="5"],[layout-md="column"]>[flex="5"]{flex:1 1 5%;max-height:5%}[layout="row"]>[flex-md="10"],[layout-md="row"]>[flex-md="10"],[layout-md="row"]>[flex="10"]{flex:1 1 10%;max-width:10%}[layout="column"]>[flex-md="10"],[layout-md="column"]>[flex-md="10"],[layout-md="column"]>[flex="10"]{flex:1 1 10%;max-height:10%}[layout="row"]>[flex-md="15"],[layout-md="row"]>[flex-md="15"],[layout-md="row"]>[flex="15"]{flex:1 1 15%;max-width:15%}[layout="column"]>[flex-md="15"],[layout-md="column"]>[flex-md="15"],[layout-md="column"]>[flex="15"]{flex:1 1 15%;max-height:15%}[layout="row"]>[flex-md="20"],[layout-md="row"]>[flex-md="20"],[layout-md="row"]>[flex="20"]{flex:1 1 20%;max-width:20%}[layout="column"]>[flex-md="20"],[layout-md="column"]>[flex-md="20"],[layout-md="column"]>[flex="20"]{flex:1 1 20%;max-height:20%}[layout="row"]>[flex-md="25"],[layout-md="row"]>[flex-md="25"],[layout-md="row"]>[flex="25"]{flex:1 1 25%;max-width:25%}[layout="column"]>[flex-md="25"],[layout-md="column"]>[flex-md="25"],[layout-md="column"]>[flex="25"]{flex:1 1 25%;max-height:25%}[layout="row"]>[flex-md="30"],[layout-md="row"]>[flex-md="30"],[layout-md="row"]>[flex="30"]{flex:1 1 30%;max-width:30%}[layout="column"]>[flex-md="30"],[layout-md="column"]>[flex-md="30"],[layout-md="column"]>[flex="30"]{flex:1 1 30%;max-height:30%}[layout="row"]>[flex-md="35"],[layout-md="row"]>[flex-md="35"],[layout-md="row"]>[flex="35"]{flex:1 1 35%;max-width:35%}[layout="column"]>[flex-md="35"],[layout-md="column"]>[flex-md="35"],[layout-md="column"]>[flex="35"]{flex:1 1 35%;max-height:35%}[layout="row"]>[flex-md="40"],[layout-md="row"]>[flex-md="40"],[layout-md="row"]>[flex="40"]{flex:1 1 40%;max-width:40%}[layout="column"]>[flex-md="40"],[layout-md="column"]>[flex-md="40"],[layout-md="column"]>[flex="40"]{flex:1 1 40%;max-height:40%}[layout="row"]>[flex-md="45"],[layout-md="row"]>[flex-md="45"],[layout-md="row"]>[flex="45"]{flex:1 1 45%;max-width:45%}[layout="column"]>[flex-md="45"],[layout-md="column"]>[flex-md="45"],[layout-md="column"]>[flex="45"]{flex:1 1 45%;max-height:45%}[layout="row"]>[flex-md="50"],[layout-md="row"]>[flex-md="50"],[layout-md="row"]>[flex="50"]{flex:1 1 50%;max-width:50%}[layout="column"]>[flex-md="50"],[layout-md="column"]>[flex-md="50"],[layout-md="column"]>[flex="50"]{flex:1 1 50%;max-height:50%}[layout="row"]>[flex-md="55"],[layout-md="row"]>[flex-md="55"],[layout-md="row"]>[flex="55"]{flex:1 1 55%;max-width:55%}[layout="column"]>[flex-md="55"],[layout-md="column"]>[flex-md="55"],[layout-md="column"]>[flex="55"]{flex:1 1 55%;max-height:55%}[layout="row"]>[flex-md="60"],[layout-md="row"]>[flex-md="60"],[layout-md="row"]>[flex="60"]{flex:1 1 60%;max-width:60%}[layout="column"]>[flex-md="60"],[layout-md="column"]>[flex-md="60"],[layout-md="column"]>[flex="60"]{flex:1 1 60%;max-height:60%}[layout="row"]>[flex-md="65"],[layout-md="row"]>[flex-md="65"],[layout-md="row"]>[flex="65"]{flex:1 1 65%;max-width:65%}[layout="column"]>[flex-md="65"],[layout-md="column"]>[flex-md="65"],[layout-md="column"]>[flex="65"]{flex:1 1 65%;max-height:65%}[layout="row"]>[flex-md="70"],[layout-md="row"]>[flex-md="70"],[layout-md="row"]>[flex="70"]{flex:1 1 70%;max-width:70%}[layout="column"]>[flex-md="70"],[layout-md="column"]>[flex-md="70"],[layout-md="column"]>[flex="70"]{flex:1 1 70%;max-height:70%}[layout="row"]>[flex-md="75"],[layout-md="row"]>[flex-md="75"],[layout-md="row"]>[flex="75"]{flex:1 1 75%;max-width:75%}[layout="column"]>[flex-md="75"],[layout-md="column"]>[flex-md="75"],[layout-md="column"]>[flex="75"]{flex:1 1 75%;max-height:75%}[layout="row"]>[flex-md="80"],[layout-md="row"]>[flex-md="80"],[layout-md="row"]>[flex="80"]{flex:1 1 80%;max-width:80%}[layout="column"]>[flex-md="80"],[layout-md="column"]>[flex-md="80"],[layout-md="column"]>[flex="80"]{flex:1 1 80%;max-height:80%}[layout="row"]>[flex-md="85"],[layout-md="row"]>[flex-md="85"],[layout-md="row"]>[flex="85"]{flex:1 1 85%;max-width:85%}[layout="column"]>[flex-md="85"],[layout-md="column"]>[flex-md="85"],[layout-md="column"]>[flex="85"]{flex:1 1 85%;max-height:85%}[layout="row"]>[flex-md="90"],[layout-md="row"]>[flex-md="90"],[layout-md="row"]>[flex="90"]{flex:1 1 90%;max-width:90%}[layout="column"]>[flex-md="90"],[layout-md="column"]>[flex-md="90"],[layout-md="column"]>[flex="90"]{flex:1 1 90%;max-height:90%}[layout="row"]>[flex-md="95"],[layout-md="row"]>[flex-md="95"],[layout-md="row"]>[flex="95"]{flex:1 1 95%;max-width:95%}[layout="column"]>[flex-md="95"],[layout-md="column"]>[flex-md="95"],[layout-md="column"]>[flex="95"]{flex:1 1 95%;max-height:95%}[layout="row"]>[flex-md="100"],[layout-md="row"]>[flex-md="100"],[layout-md="row"]>[flex="100"]{flex:1 1 100%;max-width:100%}[layout="column"]>[flex-md="100"],[layout-md="column"]>[flex-md="100"],[layout-md="column"]>[flex="100"]{flex:1 1 100%;max-height:100%}[layout="row"]>[flex-md="33"],[layout-md="row"]>[flex-md="33"],[layout-md="row"]>[flex="33"]{flex:1 1 33.33%;max-width:33.33%}[layout="column"]>[flex-md="33"],[layout-md="column"]>[flex-md="33"],[layout-md="column"]>[flex="33"]{flex:1 1 33.33%;max-height:33.33%}[layout="row"]>[flex-md="66"],[layout-md="row"]>[flex-md="66"],[layout-md="row"]>[flex="66"]{flex:1 1 66.66%;max-width:66.66%}[layout="column"]>[flex-md="66"],[layout-md="column"]>[flex-md="66"],[layout-md="column"]>[flex="66"]{flex:1 1 66.66%;max-height:66.66%}[hide-md]{display:none}}@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)}[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}[layout-gt-md]{display:flex;flex-wrap:wrap}[layout-gt-md]>*{box-sizing:border-box}[layout-gt-md="column"]{flex-direction:column}[layout-gt-md="row"]{flex-direction:row}[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-gt-md]{flex:1}[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%}[layout-gt-md="column"]>[flex-gt-md],[layout="column"]>[flex-gt-md]{max-width:100%}[layout="row"]>[flex-gt-md="5"],[layout-gt-md="row"]>[flex-gt-md="5"],[layout-gt-md="row"]>[flex="5"]{flex:1 1 5%;max-width:5%}[layout="column"]>[flex-gt-md="5"],[layout-gt-md="column"]>[flex-gt-md="5"],[layout-gt-md="column"]>[flex="5"]{flex:1 1 5%;max-height:5%}[layout="row"]>[flex-gt-md="10"],[layout-gt-md="row"]>[flex-gt-md="10"],[layout-gt-md="row"]>[flex="10"]{flex:1 1 10%;max-width:10%}[layout="column"]>[flex-gt-md="10"],[layout-gt-md="column"]>[flex-gt-md="10"],[layout-gt-md="column"]>[flex="10"]{flex:1 1 10%;max-height:10%}[layout="row"]>[flex-gt-md="15"],[layout-gt-md="row"]>[flex-gt-md="15"],[layout-gt-md="row"]>[flex="15"]{flex:1 1 15%;max-width:15%}[layout="column"]>[flex-gt-md="15"],[layout-gt-md="column"]>[flex-gt-md="15"],[layout-gt-md="column"]>[flex="15"]{flex:1 1 15%;max-height:15%}[layout="row"]>[flex-gt-md="20"],[layout-gt-md="row"]>[flex-gt-md="20"],[layout-gt-md="row"]>[flex="20"]{flex:1 1 20%;max-width:20%}[layout="column"]>[flex-gt-md="20"],[layout-gt-md="column"]>[flex-gt-md="20"],[layout-gt-md="column"]>[flex="20"]{flex:1 1 20%;max-height:20%}[layout="row"]>[flex-gt-md="25"],[layout-gt-md="row"]>[flex-gt-md="25"],[layout-gt-md="row"]>[flex="25"]{flex:1 1 25%;max-width:25%}[layout="column"]>[flex-gt-md="25"],[layout-gt-md="column"]>[flex-gt-md="25"],[layout-gt-md="column"]>[flex="25"]{flex:1 1 25%;max-height:25%}[layout="row"]>[flex-gt-md="30"],[layout-gt-md="row"]>[flex-gt-md="30"],[layout-gt-md="row"]>[flex="30"]{flex:1 1 30%;max-width:30%}[layout="column"]>[flex-gt-md="30"],[layout-gt-md="column"]>[flex-gt-md="30"],[layout-gt-md="column"]>[flex="30"]{flex:1 1 30%;max-height:30%}[layout="row"]>[flex-gt-md="35"],[layout-gt-md="row"]>[flex-gt-md="35"],[layout-gt-md="row"]>[flex="35"]{flex:1 1 35%;max-width:35%}[layout="column"]>[flex-gt-md="35"],[layout-gt-md="column"]>[flex-gt-md="35"],[layout-gt-md="column"]>[flex="35"]{flex:1 1 35%;max-height:35%}[layout="row"]>[flex-gt-md="40"],[layout-gt-md="row"]>[flex-gt-md="40"],[layout-gt-md="row"]>[flex="40"]{flex:1 1 40%;max-width:40%}[layout="column"]>[flex-gt-md="40"],[layout-gt-md="column"]>[flex-gt-md="40"],[layout-gt-md="column"]>[flex="40"]{flex:1 1 40%;max-height:40%}[layout="row"]>[flex-gt-md="45"],[layout-gt-md="row"]>[flex-gt-md="45"],[layout-gt-md="row"]>[flex="45"]{flex:1 1 45%;max-width:45%}[layout="column"]>[flex-gt-md="45"],[layout-gt-md="column"]>[flex-gt-md="45"],[layout-gt-md="column"]>[flex="45"]{flex:1 1 45%;max-height:45%}[layout="row"]>[flex-gt-md="50"],[layout-gt-md="row"]>[flex-gt-md="50"],[layout-gt-md="row"]>[flex="50"]{flex:1 1 50%;max-width:50%}[layout="column"]>[flex-gt-md="50"],[layout-gt-md="column"]>[flex-gt-md="50"],[layout-gt-md="column"]>[flex="50"]{flex:1 1 50%;max-height:50%}[layout="row"]>[flex-gt-md="55"],[layout-gt-md="row"]>[flex-gt-md="55"],[layout-gt-md="row"]>[flex="55"]{flex:1 1 55%;max-width:55%}[layout="column"]>[flex-gt-md="55"],[layout-gt-md="column"]>[flex-gt-md="55"],[layout-gt-md="column"]>[flex="55"]{flex:1 1 55%;max-height:55%}[layout="row"]>[flex-gt-md="60"],[layout-gt-md="row"]>[flex-gt-md="60"],[layout-gt-md="row"]>[flex="60"]{flex:1 1 60%;max-width:60%}[layout="column"]>[flex-gt-md="60"],[layout-gt-md="column"]>[flex-gt-md="60"],[layout-gt-md="column"]>[flex="60"]{flex:1 1 60%;max-height:60%}[layout="row"]>[flex-gt-md="65"],[layout-gt-md="row"]>[flex-gt-md="65"],[layout-gt-md="row"]>[flex="65"]{flex:1 1 65%;max-width:65%}[layout="column"]>[flex-gt-md="65"],[layout-gt-md="column"]>[flex-gt-md="65"],[layout-gt-md="column"]>[flex="65"]{flex:1 1 65%;max-height:65%}[layout="row"]>[flex-gt-md="70"],[layout-gt-md="row"]>[flex-gt-md="70"],[layout-gt-md="row"]>[flex="70"]{flex:1 1 70%;max-width:70%}[layout="column"]>[flex-gt-md="70"],[layout-gt-md="column"]>[flex-gt-md="70"],[layout-gt-md="column"]>[flex="70"]{flex:1 1 70%;max-height:70%}[layout="row"]>[flex-gt-md="75"],[layout-gt-md="row"]>[flex-gt-md="75"],[layout-gt-md="row"]>[flex="75"]{flex:1 1 75%;max-width:75%}[layout="column"]>[flex-gt-md="75"],[layout-gt-md="column"]>[flex-gt-md="75"],[layout-gt-md="column"]>[flex="75"]{flex:1 1 75%;max-height:75%}[layout="row"]>[flex-gt-md="80"],[layout-gt-md="row"]>[flex-gt-md="80"],[layout-gt-md="row"]>[flex="80"]{flex:1 1 80%;max-width:80%}[layout="column"]>[flex-gt-md="80"],[layout-gt-md="column"]>[flex-gt-md="80"],[layout-gt-md="column"]>[flex="80"]{flex:1 1 80%;max-height:80%}[layout="row"]>[flex-gt-md="85"],[layout-gt-md="row"]>[flex-gt-md="85"],[layout-gt-md="row"]>[flex="85"]{flex:1 1 85%;max-width:85%}[layout="column"]>[flex-gt-md="85"],[layout-gt-md="column"]>[flex-gt-md="85"],[layout-gt-md="column"]>[flex="85"]{flex:1 1 85%;max-height:85%}[layout="row"]>[flex-gt-md="90"],[layout-gt-md="row"]>[flex-gt-md="90"],[layout-gt-md="row"]>[flex="90"]{flex:1 1 90%;max-width:90%}[layout="column"]>[flex-gt-md="90"],[layout-gt-md="column"]>[flex-gt-md="90"],[layout-gt-md="column"]>[flex="90"]{flex:1 1 90%;max-height:90%}[layout="row"]>[flex-gt-md="95"],[layout-gt-md="row"]>[flex-gt-md="95"],[layout-gt-md="row"]>[flex="95"]{flex:1 1 95%;max-width:95%}[layout="column"]>[flex-gt-md="95"],[layout-gt-md="column"]>[flex-gt-md="95"],[layout-gt-md="column"]>[flex="95"]{flex:1 1 95%;max-height:95%}[layout="row"]>[flex-gt-md="100"],[layout-gt-md="row"]>[flex-gt-md="100"],[layout-gt-md="row"]>[flex="100"]{flex:1 1 100%;max-width:100%}[layout="column"]>[flex-gt-md="100"],[layout-gt-md="column"]>[flex-gt-md="100"],[layout-gt-md="column"]>[flex="100"]{flex:1 1 100%;max-height:100%}[layout="row"]>[flex-gt-md="33"],[layout-gt-md="row"]>[flex-gt-md="33"],[layout-gt-md="row"]>[flex="33"]{flex:1 1 33.33%;max-width:33.33%}[layout="column"]>[flex-gt-md="33"],[layout-gt-md="column"]>[flex-gt-md="33"],[layout-gt-md="column"]>[flex="33"]{flex:1 1 33.33%;max-height:33.33%}[layout="row"]>[flex-gt-md="66"],[layout-gt-md="row"]>[flex-gt-md="66"],[layout-gt-md="row"]>[flex="66"]{flex:1 1 66.66%;max-width:66.66%}[layout="column"]>[flex-gt-md="66"],[layout-gt-md="column"]>[flex-gt-md="66"],[layout-gt-md="column"]>[flex="66"]{flex:1 1 66.66%;max-height:66.66%}[hide-gt-md]{display:none}}@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)}[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}[layout-lg]{display:flex;flex-wrap:wrap}[layout-lg]>*{box-sizing:border-box}[layout-lg="column"]{flex-direction:column}[layout-lg="row"]{flex-direction:row}[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-lg]{flex:1}[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%}[layout-lg="column"]>[flex-lg],[layout="column"]>[flex-lg]{max-width:100%}[layout="row"]>[flex-lg="5"],[layout-lg="row"]>[flex-lg="5"],[layout-lg="row"]>[flex="5"]{flex:1 1 5%;max-width:5%}[layout="column"]>[flex-lg="5"],[layout-lg="column"]>[flex-lg="5"],[layout-lg="column"]>[flex="5"]{flex:1 1 5%;max-height:5%}[layout="row"]>[flex-lg="10"],[layout-lg="row"]>[flex-lg="10"],[layout-lg="row"]>[flex="10"]{flex:1 1 10%;max-width:10%}[layout="column"]>[flex-lg="10"],[layout-lg="column"]>[flex-lg="10"],[layout-lg="column"]>[flex="10"]{flex:1 1 10%;max-height:10%}[layout="row"]>[flex-lg="15"],[layout-lg="row"]>[flex-lg="15"],[layout-lg="row"]>[flex="15"]{flex:1 1 15%;max-width:15%}[layout="column"]>[flex-lg="15"],[layout-lg="column"]>[flex-lg="15"],[layout-lg="column"]>[flex="15"]{flex:1 1 15%;max-height:15%}[layout="row"]>[flex-lg="20"],[layout-lg="row"]>[flex-lg="20"],[layout-lg="row"]>[flex="20"]{flex:1 1 20%;max-width:20%}[layout="column"]>[flex-lg="20"],[layout-lg="column"]>[flex-lg="20"],[layout-lg="column"]>[flex="20"]{flex:1 1 20%;max-height:20%}[layout="row"]>[flex-lg="25"],[layout-lg="row"]>[flex-lg="25"],[layout-lg="row"]>[flex="25"]{flex:1 1 25%;max-width:25%}[layout="column"]>[flex-lg="25"],[layout-lg="column"]>[flex-lg="25"],[layout-lg="column"]>[flex="25"]{flex:1 1 25%;max-height:25%}[layout="row"]>[flex-lg="30"],[layout-lg="row"]>[flex-lg="30"],[layout-lg="row"]>[flex="30"]{flex:1 1 30%;max-width:30%}[layout="column"]>[flex-lg="30"],[layout-lg="column"]>[flex-lg="30"],[layout-lg="column"]>[flex="30"]{flex:1 1 30%;max-height:30%}[layout="row"]>[flex-lg="35"],[layout-lg="row"]>[flex-lg="35"],[layout-lg="row"]>[flex="35"]{flex:1 1 35%;max-width:35%}[layout="column"]>[flex-lg="35"],[layout-lg="column"]>[flex-lg="35"],[layout-lg="column"]>[flex="35"]{flex:1 1 35%;max-height:35%}[layout="row"]>[flex-lg="40"],[layout-lg="row"]>[flex-lg="40"],[layout-lg="row"]>[flex="40"]{flex:1 1 40%;max-width:40%}[layout="column"]>[flex-lg="40"],[layout-lg="column"]>[flex-lg="40"],[layout-lg="column"]>[flex="40"]{flex:1 1 40%;max-height:40%}[layout="row"]>[flex-lg="45"],[layout-lg="row"]>[flex-lg="45"],[layout-lg="row"]>[flex="45"]{flex:1 1 45%;max-width:45%}[layout="column"]>[flex-lg="45"],[layout-lg="column"]>[flex-lg="45"],[layout-lg="column"]>[flex="45"]{flex:1 1 45%;max-height:45%}[layout="row"]>[flex-lg="50"],[layout-lg="row"]>[flex-lg="50"],[layout-lg="row"]>[flex="50"]{flex:1 1 50%;max-width:50%}[layout="column"]>[flex-lg="50"],[layout-lg="column"]>[flex-lg="50"],[layout-lg="column"]>[flex="50"]{flex:1 1 50%;max-height:50%}[layout="row"]>[flex-lg="55"],[layout-lg="row"]>[flex-lg="55"],[layout-lg="row"]>[flex="55"]{flex:1 1 55%;max-width:55%}[layout="column"]>[flex-lg="55"],[layout-lg="column"]>[flex-lg="55"],[layout-lg="column"]>[flex="55"]{flex:1 1 55%;max-height:55%}[layout="row"]>[flex-lg="60"],[layout-lg="row"]>[flex-lg="60"],[layout-lg="row"]>[flex="60"]{flex:1 1 60%;max-width:60%}[layout="column"]>[flex-lg="60"],[layout-lg="column"]>[flex-lg="60"],[layout-lg="column"]>[flex="60"]{flex:1 1 60%;max-height:60%}[layout="row"]>[flex-lg="65"],[layout-lg="row"]>[flex-lg="65"],[layout-lg="row"]>[flex="65"]{flex:1 1 65%;max-width:65%}[layout="column"]>[flex-lg="65"],[layout-lg="column"]>[flex-lg="65"],[layout-lg="column"]>[flex="65"]{flex:1 1 65%;max-height:65%}[layout="row"]>[flex-lg="70"],[layout-lg="row"]>[flex-lg="70"],[layout-lg="row"]>[flex="70"]{flex:1 1 70%;max-width:70%}[layout="column"]>[flex-lg="70"],[layout-lg="column"]>[flex-lg="70"],[layout-lg="column"]>[flex="70"]{flex:1 1 70%;max-height:70%}[layout="row"]>[flex-lg="75"],[layout-lg="row"]>[flex-lg="75"],[layout-lg="row"]>[flex="75"]{flex:1 1 75%;max-width:75%}[layout="column"]>[flex-lg="75"],[layout-lg="column"]>[flex-lg="75"],[layout-lg="column"]>[flex="75"]{flex:1 1 75%;max-height:75%}[layout="row"]>[flex-lg="80"],[layout-lg="row"]>[flex-lg="80"],[layout-lg="row"]>[flex="80"]{flex:1 1 80%;max-width:80%}[layout="column"]>[flex-lg="80"],[layout-lg="column"]>[flex-lg="80"],[layout-lg="column"]>[flex="80"]{flex:1 1 80%;max-height:80%}[layout="row"]>[flex-lg="85"],[layout-lg="row"]>[flex-lg="85"],[layout-lg="row"]>[flex="85"]{flex:1 1 85%;max-width:85%}[layout="column"]>[flex-lg="85"],[layout-lg="column"]>[flex-lg="85"],[layout-lg="column"]>[flex="85"]{flex:1 1 85%;max-height:85%}[layout="row"]>[flex-lg="90"],[layout-lg="row"]>[flex-lg="90"],[layout-lg="row"]>[flex="90"]{flex:1 1 90%;max-width:90%}[layout="column"]>[flex-lg="90"],[layout-lg="column"]>[flex-lg="90"],[layout-lg="column"]>[flex="90"]{flex:1 1 90%;max-height:90%}[layout="row"]>[flex-lg="95"],[layout-lg="row"]>[flex-lg="95"],[layout-lg="row"]>[flex="95"]{flex:1 1 95%;max-width:95%}[layout="column"]>[flex-lg="95"],[layout-lg="column"]>[flex-lg="95"],[layout-lg="column"]>[flex="95"]{flex:1 1 95%;max-height:95%}[layout="row"]>[flex-lg="100"],[layout-lg="row"]>[flex-lg="100"],[layout-lg="row"]>[flex="100"]{flex:1 1 100%;max-width:100%}[layout="column"]>[flex-lg="100"],[layout-lg="column"]>[flex-lg="100"],[layout-lg="column"]>[flex="100"]{flex:1 1 100%;max-height:100%}[layout="row"]>[flex-lg="33"],[layout-lg="row"]>[flex-lg="33"],[layout-lg="row"]>[flex="33"]{flex:1 1 33.33%;max-width:33.33%}[layout="column"]>[flex-lg="33"],[layout-lg="column"]>[flex-lg="33"],[layout-lg="column"]>[flex="33"]{flex:1 1 33.33%;max-height:33.33%}[layout="row"]>[flex-lg="66"],[layout-lg="row"]>[flex-lg="66"],[layout-lg="row"]>[flex="66"]{flex:1 1 66.66%;max-width:66.66%}[layout="column"]>[flex-lg="66"],[layout-lg="column"]>[flex-lg="66"],[layout-lg="column"]>[flex="66"]{flex:1 1 66.66%;max-height:66.66%}[hide-lg]{display:none}}@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)}[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}[layout-gt-lg]{display:flex;flex-wrap:wrap}[layout-gt-lg]>*{box-sizing:border-box}[layout-gt-lg="column"]{flex-direction:column}[layout-gt-lg="row"]{flex-direction:row}[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-gt-lg]{flex:1}[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%}[layout-gt-lg="column"]>[flex-gt-lg],[layout="column"]>[flex-gt-lg]{max-width:100%}[layout="row"]>[flex-gt-lg="5"],[layout-gt-lg="row"]>[flex-gt-lg="5"],[layout-gt-lg="row"]>[flex="5"]{flex:1 1 5%;max-width:5%}[layout="column"]>[flex-gt-lg="5"],[layout-gt-lg="column"]>[flex-gt-lg="5"],[layout-gt-lg="column"]>[flex="5"]{flex:1 1 5%;max-height:5%}[layout="row"]>[flex-gt-lg="10"],[layout-gt-lg="row"]>[flex-gt-lg="10"],[layout-gt-lg="row"]>[flex="10"]{flex:1 1 10%;max-width:10%}[layout="column"]>[flex-gt-lg="10"],[layout-gt-lg="column"]>[flex-gt-lg="10"],[layout-gt-lg="column"]>[flex="10"]{flex:1 1 10%;max-height:10%}[layout="row"]>[flex-gt-lg="15"],[layout-gt-lg="row"]>[flex-gt-lg="15"],[layout-gt-lg="row"]>[flex="15"]{flex:1 1 15%;max-width:15%}[layout="column"]>[flex-gt-lg="15"],[layout-gt-lg="column"]>[flex-gt-lg="15"],[layout-gt-lg="column"]>[flex="15"]{flex:1 1 15%;max-height:15%}[layout="row"]>[flex-gt-lg="20"],[layout-gt-lg="row"]>[flex-gt-lg="20"],[layout-gt-lg="row"]>[flex="20"]{flex:1 1 20%;max-width:20%}[layout="column"]>[flex-gt-lg="20"],[layout-gt-lg="column"]>[flex-gt-lg="20"],[layout-gt-lg="column"]>[flex="20"]{flex:1 1 20%;max-height:20%}[layout="row"]>[flex-gt-lg="25"],[layout-gt-lg="row"]>[flex-gt-lg="25"],[layout-gt-lg="row"]>[flex="25"]{flex:1 1 25%;max-width:25%}[layout="column"]>[flex-gt-lg="25"],[layout-gt-lg="column"]>[flex-gt-lg="25"],[layout-gt-lg="column"]>[flex="25"]{flex:1 1 25%;max-height:25%}[layout="row"]>[flex-gt-lg="30"],[layout-gt-lg="row"]>[flex-gt-lg="30"],[layout-gt-lg="row"]>[flex="30"]{flex:1 1 30%;max-width:30%}[layout="column"]>[flex-gt-lg="30"],[layout-gt-lg="column"]>[flex-gt-lg="30"],[layout-gt-lg="column"]>[flex="30"]{flex:1 1 30%;max-height:30%}[layout="row"]>[flex-gt-lg="35"],[layout-gt-lg="row"]>[flex-gt-lg="35"],[layout-gt-lg="row"]>[flex="35"]{flex:1 1 35%;max-width:35%}[layout="column"]>[flex-gt-lg="35"],[layout-gt-lg="column"]>[flex-gt-lg="35"],[layout-gt-lg="column"]>[flex="35"]{flex:1 1 35%;max-height:35%}[layout="row"]>[flex-gt-lg="40"],[layout-gt-lg="row"]>[flex-gt-lg="40"],[layout-gt-lg="row"]>[flex="40"]{flex:1 1 40%;max-width:40%}[layout="column"]>[flex-gt-lg="40"],[layout-gt-lg="column"]>[flex-gt-lg="40"],[layout-gt-lg="column"]>[flex="40"]{flex:1 1 40%;max-height:40%}[layout="row"]>[flex-gt-lg="45"],[layout-gt-lg="row"]>[flex-gt-lg="45"],[layout-gt-lg="row"]>[flex="45"]{flex:1 1 45%;max-width:45%}[layout="column"]>[flex-gt-lg="45"],[layout-gt-lg="column"]>[flex-gt-lg="45"],[layout-gt-lg="column"]>[flex="45"]{flex:1 1 45%;max-height:45%}[layout="row"]>[flex-gt-lg="50"],[layout-gt-lg="row"]>[flex-gt-lg="50"],[layout-gt-lg="row"]>[flex="50"]{flex:1 1 50%;max-width:50%}[layout="column"]>[flex-gt-lg="50"],[layout-gt-lg="column"]>[flex-gt-lg="50"],[layout-gt-lg="column"]>[flex="50"]{flex:1 1 50%;max-height:50%}[layout="row"]>[flex-gt-lg="55"],[layout-gt-lg="row"]>[flex-gt-lg="55"],[layout-gt-lg="row"]>[flex="55"]{flex:1 1 55%;max-width:55%}[layout="column"]>[flex-gt-lg="55"],[layout-gt-lg="column"]>[flex-gt-lg="55"],[layout-gt-lg="column"]>[flex="55"]{flex:1 1 55%;max-height:55%}[layout="row"]>[flex-gt-lg="60"],[layout-gt-lg="row"]>[flex-gt-lg="60"],[layout-gt-lg="row"]>[flex="60"]{flex:1 1 60%;max-width:60%}[layout="column"]>[flex-gt-lg="60"],[layout-gt-lg="column"]>[flex-gt-lg="60"],[layout-gt-lg="column"]>[flex="60"]{flex:1 1 60%;max-height:60%}[layout="row"]>[flex-gt-lg="65"],[layout-gt-lg="row"]>[flex-gt-lg="65"],[layout-gt-lg="row"]>[flex="65"]{flex:1 1 65%;max-width:65%}[layout="column"]>[flex-gt-lg="65"],[layout-gt-lg="column"]>[flex-gt-lg="65"],[layout-gt-lg="column"]>[flex="65"]{flex:1 1 65%;max-height:65%}[layout="row"]>[flex-gt-lg="70"],[layout-gt-lg="row"]>[flex-gt-lg="70"],[layout-gt-lg="row"]>[flex="70"]{flex:1 1 70%;max-width:70%}[layout="column"]>[flex-gt-lg="70"],[layout-gt-lg="column"]>[flex-gt-lg="70"],[layout-gt-lg="column"]>[flex="70"]{flex:1 1 70%;max-height:70%}[layout="row"]>[flex-gt-lg="75"],[layout-gt-lg="row"]>[flex-gt-lg="75"],[layout-gt-lg="row"]>[flex="75"]{flex:1 1 75%;max-width:75%}[layout="column"]>[flex-gt-lg="75"],[layout-gt-lg="column"]>[flex-gt-lg="75"],[layout-gt-lg="column"]>[flex="75"]{flex:1 1 75%;max-height:75%}[layout="row"]>[flex-gt-lg="80"],[layout-gt-lg="row"]>[flex-gt-lg="80"],[layout-gt-lg="row"]>[flex="80"]{flex:1 1 80%;max-width:80%}[layout="column"]>[flex-gt-lg="80"],[layout-gt-lg="column"]>[flex-gt-lg="80"],[layout-gt-lg="column"]>[flex="80"]{flex:1 1 80%;max-height:80%}[layout="row"]>[flex-gt-lg="85"],[layout-gt-lg="row"]>[flex-gt-lg="85"],[layout-gt-lg="row"]>[flex="85"]{flex:1 1 85%;max-width:85%}[layout="column"]>[flex-gt-lg="85"],[layout-gt-lg="column"]>[flex-gt-lg="85"],[layout-gt-lg="column"]>[flex="85"]{flex:1 1 85%;max-height:85%}[layout="row"]>[flex-gt-lg="90"],[layout-gt-lg="row"]>[flex-gt-lg="90"],[layout-gt-lg="row"]>[flex="90"]{flex:1 1 90%;max-width:90%}[layout="column"]>[flex-gt-lg="90"],[layout-gt-lg="column"]>[flex-gt-lg="90"],[layout-gt-lg="column"]>[flex="90"]{flex:1 1 90%;max-height:90%}[layout="row"]>[flex-gt-lg="95"],[layout-gt-lg="row"]>[flex-gt-lg="95"],[layout-gt-lg="row"]>[flex="95"]{flex:1 1 95%;max-width:95%}[layout="column"]>[flex-gt-lg="95"],[layout-gt-lg="column"]>[flex-gt-lg="95"],[layout-gt-lg="column"]>[flex="95"]{flex:1 1 95%;max-height:95%}[layout="row"]>[flex-gt-lg="100"],[layout-gt-lg="row"]>[flex-gt-lg="100"],[layout-gt-lg="row"]>[flex="100"]{flex:1 1 100%;max-width:100%}[layout="column"]>[flex-gt-lg="100"],[layout-gt-lg="column"]>[flex-gt-lg="100"],[layout-gt-lg="column"]>[flex="100"]{flex:1 1 100%;max-height:100%}[layout="row"]>[flex-gt-lg="33"],[layout-gt-lg="row"]>[flex-gt-lg="33"],[layout-gt-lg="row"]>[flex="33"]{flex:1 1 33.33%;max-width:33.33%}[layout="column"]>[flex-gt-lg="33"],[layout-gt-lg="column"]>[flex-gt-lg="33"],[layout-gt-lg="column"]>[flex="33"]{flex:1 1 33.33%;max-height:33.33%}[layout="row"]>[flex-gt-lg="66"],[layout-gt-lg="row"]>[flex-gt-lg="66"],[layout-gt-lg="row"]>[flex="66"]{flex:1 1 66.66%;max-width:66.66%}[layout="column"]>[flex-gt-lg="66"],[layout-gt-lg="column"]>[flex-gt-lg="66"],[layout-gt-lg="column"]>[flex="66"]{flex:1 1 66.66%;max-height:66.66%}[hide-gt-lg]{display:none}}[layout-padding]>[flex-sm]{padding:.25em}[layout-padding],[layout-padding]>[flex],[layout-padding]>[flex-gt-sm],[layout-padding]>[flex-md]{padding:.5em}[layout-padding]>[flex-gt-md],[layout-padding]>[flex-lg]{padding:1em}[layout-margin]>[flex-sm]{margin:.25em}[layout-margin],[layout-margin]>[flex],[layout-margin]>[flex-gt-sm],[layout-margin]>[flex-md]{margin:.5em}[layout-margin]>[flex-gt-md],[layout-margin]>[flex-lg]{margin:1em}[layout-nowrap]{flex-wrap:nowrap} 2 | --------------------------------------------------------------------------------