From 5cf239b8d403ae98bf71ee6b225a7fdd1be8dea1 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Thu, 16 Nov 2017 19:01:57 +0200 Subject: [PATCH] Halfway through grid's docs Missing best practices --- docs/build-docs.js | 3 + docs/doc-fragments/cardSections.js | 28 +++++ docs/doc-fragments/cards.js | 28 +++++ docs/doc-fragments/docFragments.js | 7 +- docs/doc-fragments/grid.js | 171 +++++++++++++++++++++++++++++ docs/v3/DEVLOG.md | 8 ++ docs/v3/docs.html | 144 ++++++++++++++++++++++++ docs/v3/style.min.css | 2 +- src/flavors/mini-doc.scss | 13 +++ src/mini/_input_control.scss | 5 +- src/mini/_layout.scss | 6 +- 11 files changed, 410 insertions(+), 5 deletions(-) create mode 100644 docs/doc-fragments/cardSections.js create mode 100644 docs/doc-fragments/cards.js create mode 100644 docs/doc-fragments/grid.js diff --git a/docs/build-docs.js b/docs/build-docs.js index 28e2062..8d6e4d2 100644 --- a/docs/build-docs.js +++ b/docs/build-docs.js @@ -54,6 +54,9 @@ function buildFragment(fragment){
${fragment.description}
${fragment.example?`

Example

${fragment.example}
`:''} ${fragment.samples.length?`

Sample code

${fragment.samples.join('')}
`:''} + ${fragment.modifiers.length? + `

Modifiers

+ ${fragment.modifiers.map(m => `

${m.title}

${m.description}${m.example?`
Example
${m.example}`:''}${m.samples.length?`
Sample code
${m.samples.join('')}`:''}`).join('
')}
`:''} ${fragment.dos.length||fragment.donts.length? `

Best practices

${[fragment.dos.map(d => `
${d.sample}

Do: ${d.description}

`).join('
'),fragment.donts.map(d => `
${d.sample}

Don't: ${d.description}

`).join('
')].join('')}
` :''} diff --git a/docs/doc-fragments/cardSections.js b/docs/doc-fragments/cardSections.js new file mode 100644 index 0000000..55c94d7 --- /dev/null +++ b/docs/doc-fragments/cardSections.js @@ -0,0 +1,28 @@ +module.exports = { + id: 'card-sections', + title: 'Card sections', + keywords: [], + description: '', + example: '', + samples: [], + notes: [], + customization: [], + modifiers: [], + dos: [], + donts: [] +} + +/* + Modifiers: + { + title : '', + description: '', + example: '', + samples: [] + } + Dos/Donts: + { + description: '', + sample: '' + } +*/ diff --git a/docs/doc-fragments/cards.js b/docs/doc-fragments/cards.js new file mode 100644 index 0000000..6706044 --- /dev/null +++ b/docs/doc-fragments/cards.js @@ -0,0 +1,28 @@ +module.exports = { + id: 'cards', + title: 'Cards', + keywords: [], + description: '', + example: '', + samples: [], + notes: [], + customization: [], + modifiers: [], + dos: [], + donts: [] +} + +/* + Modifiers: + { + title : '', + description: '', + example: '', + samples: [] + } + Dos/Donts: + { + description: '', + sample: '' + } +*/ diff --git a/docs/doc-fragments/docFragments.js b/docs/doc-fragments/docFragments.js index 751b1f8..f554c7c 100644 --- a/docs/doc-fragments/docFragments.js +++ b/docs/doc-fragments/docFragments.js @@ -4,7 +4,12 @@ var headings = require('./headings'); var lists = require('./lists'); var images = require('./images'); var codeAndQuotations = require('./codeAndQuotations'); +var grid = require('./grid'); +var cards = require('./cards'); +var cardSections = require('./cardSections'); module.exports = [ - gettingStarted, commonTextualElements, headings, images, lists, codeAndQuotations + gettingStarted, + commonTextualElements, headings, images, lists, codeAndQuotations, + grid, cards, cardSections ] diff --git a/docs/doc-fragments/grid.js b/docs/doc-fragments/grid.js new file mode 100644 index 0000000..b7bfb64 --- /dev/null +++ b/docs/doc-fragments/grid.js @@ -0,0 +1,171 @@ +module.exports = { + id: 'grid', + title: 'Grid system', + keywords: [`grid`, `grid system`, `col`, `column`, `layout`, `row`, `container`, `small`, `medium`, `large`, `sm`, `md`, `lg`, `cols`, `predefined`, `offset`, `order`, `reorder`, `first`, `last`, `normal`], + description: `

The grid system of mini.css utilizes the Flexbox layout to provide you with a simple, modern, responsive layout system for your web apps. Like most modern CSS frameworks' grid systems, it is composed of three main components - containers, rows and columns:

+ `, + example: `
+
1
11
+
2
10
+
3
9
+
4
8
+
5
7
+
6
6
+
12
+
fluid
fluid
+
`, + samples: [` +
<div class="container">
+  <div class="row">
+    <div class="col-sm-1"></div>  <div class="col-sm-11"></div>
+  </div>
+  <div class="row">
+    <div class="col-sm-2"></div>  <div class="col-sm-10"></div>
+  </div>
+  <div class="row">
+    <div class="col-sm-3"></div>  <div class="col-sm-9"></div>
+  </div>
+  <div class="row">
+    <div class="col-sm-4"></div>  <div class="col-sm-8"></div>
+  </div>
+  <div class="row">
+    <div class="col-sm-5"></div>  <div class="col-sm-7"></div>
+  </div>
+  <div class="row">
+    <div class="col-sm-6"></div>  <div class="col-sm-6"></div>
+  </div>
+  <div class="row">
+    <div class="col-sm-12"></div>
+  <div class="row">
+    <div class="col-sm"></div>  <div class="col-sm"></div>
+  </div>
+</div>
+ `], + notes: [ + `mini.css uses a mobile-first approach in its grid system, so you do not have to rewrite the same layout for all three screen sizes. Leaving a column's size, offset or order unspecified for a screen size will use the style applied for the previous largest screen size recursively. This also applies to predefined layouts.`, + `The specific breakpoints for small, medium and large screen sizes are as follows: + `, + `You can use fluid columns to create columns whose wide is not a multiple of 1/12th of the screen's width (e.g. if you have 7 fluid columns in a row, each one of them will be 1/7th of the screen's width).`, + `Predefined layouts can be combined with most of the features of the grid system, such as offsets and reordering, however they do not combine very well with regular columns.`, + `You should only apply offset and reordering modifiers to the columns that you need and for the screen sizes that are necessary. Remember to also specify a column width or use a predefined layout before applying these modifiers.` + ], + customization: [ + `Universal padding for elements can be changed globally by changing the value of the --universal-padding variable. This only affects the padding of the container.` +], + modifiers: [ + { + title: `Screen sizes and width`, + description: `

Each column class is defined by specifying a screen size (small - sm, medium - md or large - lg) and a column width (a value between 1 and 12 or you can omit it for a fluid column), separated by dashes (e.g. .col-sm-6 for a 6-wide column on a small screen). Using these you can apply different layouts for different screen sizes, by altering the width of columns, using multiple classes. Note that column widths are applied recursively, meaning that if you do not specify a width for a specific screen size the column will use the width applied for the previous largest screen size.

`, + example: `
+
+
+
Small screen layout
+
sm-12
+
sm-12 md-8
sm-12 md-4
+
sm-12
+
+
+
Medium/Large screen layout
+
sm-12
+
sm-12 md-8
sm-12 md-4
+
sm-12
+
+
+
`, + samples: [`
<div class="container">
+  <div class="row">
+    <div class="col-sm-12 col-md-3 col-lg-2"></div>
+    <div class="col-sm-12 col-md-5 col-lg-7"></div>
+    <div class="col-sm-12 col-md-4 col-lg-3"></div>
+  </div>
+  <div class="row">
+    <div class="col-sm col-lg-10"></div>
+    <div class="col-sm-4 col-md"></div>
+  </div>
+</div>
`] + }, + { + title: `Predefined layouts`, + description: `

Rows can be modified to apply predefined layouts to the columns inside them, effectively reducing the amount of work required for simple layouts. To create a predefined layout, you can add a class to a row (.cols-*-*), specifying a screen size and width for the columns inside it (or omitting the width for fluid columns), similarly to the way columns are defined (e.g. .row.cols-sm-6 will cause all elements inside the row to be 6-wide on a small screen). Columns inside a predefined layout do not require any further classes to display and, much like normal column layouts, their widths are applied recursively.

`, + example: '', + samples: [`
<div class="row cols-sm-6">
+  <div>
+    <p>This paragraph is inside a 6-wide column.</p>
+  </div>
+  <div>
+    <p>This paragraph is inside a 6-wide column.</p>
+  </div>
+</div>
`] + }, + { + title: `Column offsets`, + description: `

Columns can be moved to the right, by applying offset classes (.col-*-offset-*), defining a screen size and an offset (a value between 0 and 11, e.g. .col-sm-offset-3 will move a column 25% to the right on a small screen). Like all other column modifiers, offsets are applied recursively.

`, + example: `
+
11
+
10
+
9
+
8
+
7
+
6
+
5
+
4
+
3
+
2
+
1
+
0
+
`, + samples: [`
<div class="row">
+  <div class="col-sm-8 col-sm-offset-2 col-md-offset-1 col-lg-offset-0"></div></div>
+<div class="row">
+  <div class="col-sm col-sm-offset-3 col-md-offset-4 col-lg-offset-0"></div>
+</div>
+<div class="row">
+  <div class="col-sm-4 col-md-offset-5"></div>
+</div>
`] + }, + { + title: `Column reordering`, + description: `

Columns can be reordered on different screen sizes, by applying a reordering class (.col-*-*), defining a screen size and the order (first, normal or last, e.g. .col-sm-last will move a column to the end of its row on a small screen). Like all other column modifiers, reordering is applied recursively.

`, + example: `
+
+
+
Small screen layout
+
md-last
 
md-first
+
+
+
Medium/Large screen layout
+
md-first
 
md-last
+
+
+
`, + samples: [`
<div class="row">
+  <div class="col-sm col-md-last col-lg-normal"></div>
+  <div class="col-sm col-sm-first col-md-last"></div>
+  <div class="col-sm col-md-first col-lg-normal"></div>
+</div>
`] + } + ], + dos: [], + donts: [] +} + +/* + Modifiers: + { + title : '', + description: '', + example: '', + samples: [] + } + Dos/Donts: + { + description: '', + sample: '' + } +*/ diff --git a/docs/v3/DEVLOG.md b/docs/v3/DEVLOG.md index 6d154bd..79de940 100644 --- a/docs/v3/DEVLOG.md +++ b/docs/v3/DEVLOG.md @@ -163,3 +163,11 @@ - Documented lists. - Documented images. - Added `margin` to `figcaption` elements to reset the browser defaults. + +## 20171116 + +- Updated `layout` to make sure everything is bug-free. The `grid` in particular is not very friendly lately. +- Fixed a couple of bugs in `input_control` as well. +- Improved the build script to actually render the `modifiers` section, it should be complete now, I think. +- Documented `grid`. The whole old module has been merged into one long card with all the information readily available. Hopefully it's less complicated now. +- Changed the color of `main` in the documentation to help the cards pop out a little bit more. diff --git a/docs/v3/docs.html b/docs/v3/docs.html index 6fa06f5..ee4e178 100644 --- a/docs/v3/docs.html +++ b/docs/v3/docs.html @@ -43,6 +43,7 @@ +

Common textual elements

mini.css utilizes the ruleset of Normalize.css v7.0.0 to reliably deal with inconsistencies between browsers, ensuring that your web apps will look beatiful no matter on what browser or device you're at. On top of these rules, we have applied some tasteful rules, such as using native font stack to figure out the best font for each device, slightly altering the background and foreground colors, as well as setting the size of the text to 16px and its line height to 1.5.

@@ -54,6 +55,7 @@ <sub>Subscript</sub> <sup>Superscript</sup> <hr/>
+

Best practices

/* Do not do this (use Sass instead) */
 html {
   font-size: 14px;
@@ -78,6 +80,7 @@
+

Customization

  • Text color can be changed globally by changing the value of the --fore-color variable. This will affect the color of the headings' main text.
  • Secondary text color can be changed globally by changing the value of the --secondary-fore-color variable. This will affect the color of subheadings.
  • Universal margin for elements can be changed globally by changing the value of the --universal-margin variable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen.
  • You can change the ratio of headings' size by chaning the value of the --heading-ratio variable. Bear in mind that the value of this variable must be unitless to work properly.

Images & captions

@@ -89,6 +92,7 @@ <figcaption>Image caption</figcaption> </figure>
+

Notes

  • While not mandatory, it is considered a good practice to always add a alt attribute to image elements on your web apps.

Customization

  • You can change the text color of <figcaption> elements by changing the value of the --secondary-fore-color variable.
  • Universal margin for elements can be changed globally by changing the value of the --universal-margin variable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen.

@@ -108,6 +112,7 @@ </ol>
+

Customization

  • Text color can be changed globally by changing the value of the --fore-color variable.
  • Background color can be changed globally by changing the value of the --back-color variable.
  • Universal margin for elements can be changed globally by changing the value of the --universal-margin variable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen.
  • Universal padding for elements can be changed globally by changing the value of the --universal-padding variable.

Code & quotations

@@ -123,7 +128,146 @@ }</pre> <blockquote cite="www.quotation.source">This is some text quoted from elsewhere.</blockquote>
+

Notes

Customization

+
+

Grid system

+

The grid system of mini.css utilizes the Flexbox layout to provide you with a simple, modern, responsive layout system for your web apps. Like most modern CSS frameworks' grid systems, it is composed of three main components - containers, rows and columns:

+
  • The container (.container) is the outermost layer of the grid system and serves as a fluid wrapper, which can be used as the basis for your layout.
    • +
  • Inside the container, you can add one or more rows (.row), which will in turn house the columns.
    • +
  • Columns (col-*-*) are placed inside rows and they can be customized to display differently on different screen sizes, make use of fluid layouts, use offsets or change ordering.
+

Example

+
1
11
+
2
10
+
3
9
+
4
8
+
5
7
+
6
6
+
12
+
fluid
fluid
+
+

Sample code

+
<div class="container">
+  <div class="row">
+    <div class="col-sm-1"></div>  <div class="col-sm-11"></div>
+  </div>
+  <div class="row">
+    <div class="col-sm-2"></div>  <div class="col-sm-10"></div>
+  </div>
+  <div class="row">
+    <div class="col-sm-3"></div>  <div class="col-sm-9"></div>
+  </div>
+  <div class="row">
+    <div class="col-sm-4"></div>  <div class="col-sm-8"></div>
+  </div>
+  <div class="row">
+    <div class="col-sm-5"></div>  <div class="col-sm-7"></div>
+  </div>
+  <div class="row">
+    <div class="col-sm-6"></div>  <div class="col-sm-6"></div>
+  </div>
+  <div class="row">
+    <div class="col-sm-12"></div>
+  <div class="row">
+    <div class="col-sm"></div>  <div class="col-sm"></div>
+  </div>
+</div>
+
+

Modifiers

+

Screen sizes and width

Each column class is defined by specifying a screen size (small - sm, medium - md or large - lg) and a column width (a value between 1 and 12 or you can omit it for a fluid column), separated by dashes (e.g. .col-sm-6 for a 6-wide column on a small screen). Using these you can apply different layouts for different screen sizes, by altering the width of columns, using multiple classes. Note that column widths are applied recursively, meaning that if you do not specify a width for a specific screen size the column will use the width applied for the previous largest screen size.

Example
+
+
+
Small screen layout
+
sm-12
+
sm-12 md-8
sm-12 md-4
+
sm-12
+
+
+
Medium/Large screen layout
+
sm-12
+
sm-12 md-8
sm-12 md-4
+
sm-12
+
+
+
Sample code
<div class="container">
+  <div class="row">
+    <div class="col-sm-12 col-md-3 col-lg-2"></div>
+    <div class="col-sm-12 col-md-5 col-lg-7"></div>
+    <div class="col-sm-12 col-md-4 col-lg-3"></div>
+  </div>
+  <div class="row">
+    <div class="col-sm col-lg-10"></div>
+    <div class="col-sm-4 col-md"></div>
+  </div>
+</div>

Predefined layouts

Rows can be modified to apply predefined layouts to the columns inside them, effectively reducing the amount of work required for simple layouts. To create a predefined layout, you can add a class to a row (.cols-*-*), specifying a screen size and width for the columns inside it (or omitting the width for fluid columns), similarly to the way columns are defined (e.g. .row.cols-sm-6 will cause all elements inside the row to be 6-wide on a small screen). Columns inside a predefined layout do not require any further classes to display and, much like normal column layouts, their widths are applied recursively.

Sample code
<div class="row cols-sm-6">
+  <div>
+    <p>This paragraph is inside a 6-wide column.</p>
+  </div>
+  <div>
+    <p>This paragraph is inside a 6-wide column.</p>
+  </div>
+</div>

Column offsets

Columns can be moved to the right, by applying offset classes (.col-*-offset-*), defining a screen size and an offset (a value between 0 and 11, e.g. .col-sm-offset-3 will move a column 25% to the right on a small screen). Like all other column modifiers, offsets are applied recursively.

Example
+
11
+
10
+
9
+
8
+
7
+
6
+
5
+
4
+
3
+
2
+
1
+
0
+
Sample code
<div class="row">
+  <div class="col-sm-8 col-sm-offset-2 col-md-offset-1 col-lg-offset-0"></div></div>
+<div class="row">
+  <div class="col-sm col-sm-offset-3 col-md-offset-4 col-lg-offset-0"></div>
+</div>
+<div class="row">
+  <div class="col-sm-4 col-md-offset-5"></div>
+</div>

Column reordering

Columns can be reordered on different screen sizes, by applying a reordering class (.col-*-*), defining a screen size and the order (first, normal or last, e.g. .col-sm-last will move a column to the end of its row on a small screen). Like all other column modifiers, reordering is applied recursively.

Example
+
+
+
Small screen layout
+
md-last
 
md-first
+
+
+
Medium/Large screen layout
+
md-first
 
md-last
+
+
+
Sample code
<div class="row">
+  <div class="col-sm col-md-last col-lg-normal"></div>
+  <div class="col-sm col-sm-first col-md-last"></div>
+  <div class="col-sm col-md-first col-lg-normal"></div>
+</div>
+ +

Notes

  • mini.css uses a mobile-first approach in its grid system, so you do not have to rewrite the same layout for all three screen sizes. Leaving a column's size, offset or order unspecified for a screen size will use the style applied for the previous largest screen size recursively. This also applies to predefined layouts.
  • The specific breakpoints for small, medium and large screen sizes are as follows: +
      +
    • small: less than 768px wide
      • +
    • medium: more than or equal to 768px wide and less than 1280px wide
      • +
    • large: 1280px wide or more
      • +
  • You can use fluid columns to create columns whose wide is not a multiple of 1/12th of the screen's width (e.g. if you have 7 fluid columns in a row, each one of them will be 1/7th of the screen's width).
  • Predefined layouts can be combined with most of the features of the grid system, such as offsets and reordering, however they do not combine very well with regular columns.
  • You should only apply offset and reordering modifiers to the columns that you need and for the screen sizes that are necessary. Remember to also specify a column width or use a predefined layout before applying these modifiers.
+

Customization

  • Universal padding for elements can be changed globally by changing the value of the --universal-padding variable. This only affects the padding of the container.
+

+

Cards

+
+ + + + + + +

+

Card sections

+
+ + + + + +
\ No newline at end of file diff --git a/docs/v3/style.min.css b/docs/v3/style.min.css index c0c9652..9be6b33 100644 --- a/docs/v3/style.min.css +++ b/docs/v3/style.min.css @@ -1 +1 @@ -:root{--fore-color:#111;--secondary-fore-color:#444;--back-color:#f8f8f8;--secondary-back-color:#f0f0f0;--blockquote-color:#f57c00;--pre-color:#1565c0;--border-color:#aaa;--secondary-border-color:#ddd;--heading-ratio:1.19;--universal-margin:.5rem;--universal-padding:.5rem;--universal-border-radius:.125rem;--a-link-color:#0277bd;--a-visited-color:#01579b}html{font-size:16px}a,b,del,em,i,ins,q,span,strong,u{font-size:1em}html,*{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif;line-height:1.5;-webkit-text-size-adjust:100%}*{font-size:1rem}body{margin:0;color:var(--fore-color);background:var(--back-color)}details{display:block}summary{display:list-item}abbr[title]{border-bottom:none;text-decoration:underline dotted}input{overflow:visible}img{max-width:100%;height:auto}h1,h2,h3,h4,h5,h6{line-height:1.2;margin:calc(1.5 * var(--universal-margin)) var(--universal-margin);font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:var(--secondary-fore-color);display:block;margin-top:-.25rem}h1{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio))}h2{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio))}h3{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio))}h4{font-size:calc(1rem * var(--heading-ratio))}h5{font-size:1rem}h6{font-size:calc(1rem / var(--heading-ratio))}p{margin:var(--universal-margin)}ol,ul{margin:var(--universal-margin);padding-left:calc(2 * var(--universal-margin))}b,strong{font-weight:700}hr{box-sizing:content-box;border:0;line-height:1.25em;margin:var(--universal-margin);height:.0625rem;background:linear-gradient(to right, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent)}blockquote{display:block;position:relative;font-style:italic;color:var(--secondary-fore-color);margin:var(--universal-margin);padding:calc(3 * var(--universal-padding));border:.0625rem solid var(--secondary-border-color);border-left:.375rem solid var(--blockquote-color);border-radius:0 var(--universal-border-radius) var(--universal-border-radius) 0}blockquote:before{position:absolute;top:calc(0rem - var(--universal-padding));left:0;font-family:sans-serif;font-size:3rem;font-weight:700;content:"\201c";color:var(--blockquote-color)}blockquote[cite]:after{font-style:normal;font-size:.75em;font-weight:700;content:"\a— " attr(cite);white-space:pre}code,kbd,pre,samp{font-family:Menlo, Consolas, monospace;font-size:.85em}code{background:var(--secondary-back-color);border-radius:var(--universal-border-radius);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2)}kbd{background:var(--fore-color);color:var(--back-color);border-radius:var(--universal-border-radius);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2)}pre{overflow:auto;background:var(--secondary-back-color);padding:calc(1.5 * var(--universal-padding));margin:var(--universal-margin);border:.0625rem solid var(--secondary-border-color);border-left:.25rem solid var(--pre-color);border-radius:0 var(--universal-border-radius) var(--universal-border-radius) 0}sup,sub,code,kbd{line-height:0;position:relative;vertical-align:baseline}small,sup,sub,figcaption{font-size:.75em}sup{top:-.5em}sub{bottom:-.25em}figure{margin:var(--universal-margin)}figcaption{color:var(--secondary-fore-color)}a{text-decoration:none}a:link{color:var(--a-link-color)}a:visited{color:var(--a-visited-color)}a:hover,a:focus{text-decoration:underline}.container{margin:0 auto;padding:0 calc(1.5 * var(--universal-padding))}.row{box-sizing:border-box;display:flex;flex:0 1 auto;flex-flow:row wrap}.col-sm,[class^='col-sm-'],[class^='col-sm-offset-'],.row[class*='cols-sm-']>*{box-sizing:border-box;flex:0 0 auto;padding:0 calc(var(--universal-padding) / 2)}.col-sm,.row.cols-sm>*{flex-grow:1;flex-basis:0}.col-sm-1,.row.cols-sm-1>*{flex-basis:8.33333%;max-width:8.33333%}.col-sm-offset-0{margin-left:0}.col-sm-2,.row.cols-sm-2>*{flex-basis:16.66667%;max-width:16.66667%}.col-sm-offset-1{margin-left:8.33333%}.col-sm-3,.row.cols-sm-3>*{flex-basis:25%;max-width:25%}.col-sm-offset-2{margin-left:16.66667%}.col-sm-4,.row.cols-sm-4>*{flex-basis:33.33333%;max-width:33.33333%}.col-sm-offset-3{margin-left:25%}.col-sm-5,.row.cols-sm-5>*{flex-basis:41.66667%;max-width:41.66667%}.col-sm-offset-4{margin-left:33.33333%}.col-sm-6,.row.cols-sm-6>*{flex-basis:50%;max-width:50%}.col-sm-offset-5{margin-left:41.66667%}.col-sm-7,.row.cols-sm-7>*{flex-basis:58.33333%;max-width:58.33333%}.col-sm-offset-6{margin-left:50%}.col-sm-8,.row.cols-sm-8>*{flex-basis:66.66667%;max-width:66.66667%}.col-sm-offset-7{margin-left:58.33333%}.col-sm-9,.row.cols-sm-9>*{flex-basis:75%;max-width:75%}.col-sm-offset-8{margin-left:66.66667%}.col-sm-10,.row.cols-sm-10>*{flex-basis:83.33333%;max-width:83.33333%}.col-sm-offset-9{margin-left:75%}.col-sm-11,.row.cols-sm-11>*{flex-basis:91.66667%;max-width:91.66667%}.col-sm-offset-10{margin-left:83.33333%}.col-sm-12,.row.cols-sm-12>*{flex-basis:100%;max-width:100%}.col-sm-offset-11{margin-left:91.66667%}.col-sm-normal{order:initial}.col-sm-first{order:-999}.col-sm-last{order:999}@media screen and (min-width: 768px){.col-md,[class^='col-md-'],[class^='col-md-offset-'],.row[class*='cols-md-']>*{box-sizing:border-box;flex:0 0 auto;padding:0 calc(var(--universal-padding) / 2)}.col-md,.row.cols-md>*{flex-grow:1;flex-basis:0}.col-md-1,.row.cols-md-1>*{flex-basis:8.33333%;max-width:8.33333%}.col-md-offset-0{margin-left:0}.col-md-2,.row.cols-md-2>*{flex-basis:16.66667%;max-width:16.66667%}.col-md-offset-1{margin-left:8.33333%}.col-md-3,.row.cols-md-3>*{flex-basis:25%;max-width:25%}.col-md-offset-2{margin-left:16.66667%}.col-md-4,.row.cols-md-4>*{flex-basis:33.33333%;max-width:33.33333%}.col-md-offset-3{margin-left:25%}.col-md-5,.row.cols-md-5>*{flex-basis:41.66667%;max-width:41.66667%}.col-md-offset-4{margin-left:33.33333%}.col-md-6,.row.cols-md-6>*{flex-basis:50%;max-width:50%}.col-md-offset-5{margin-left:41.66667%}.col-md-7,.row.cols-md-7>*{flex-basis:58.33333%;max-width:58.33333%}.col-md-offset-6{margin-left:50%}.col-md-8,.row.cols-md-8>*{flex-basis:66.66667%;max-width:66.66667%}.col-md-offset-7{margin-left:58.33333%}.col-md-9,.row.cols-md-9>*{flex-basis:75%;max-width:75%}.col-md-offset-8{margin-left:66.66667%}.col-md-10,.row.cols-md-10>*{flex-basis:83.33333%;max-width:83.33333%}.col-md-offset-9{margin-left:75%}.col-md-11,.row.cols-md-11>*{flex-basis:91.66667%;max-width:91.66667%}.col-md-offset-10{margin-left:83.33333%}.col-md-12,.row.cols-md-12>*{flex-basis:100%;max-width:100%}.col-md-offset-11{margin-left:91.66667%}.col-md-normal{order:initial}.col-md-first{order:-999}.col-md-last{order:999}}@media screen and (min-width: 1280px){.col-lg,[class^='col-lg-'],[class^='col-lg-offset-'],.row[class*='cols-lg-']>*{box-sizing:border-box;flex:0 0 auto;padding:0 calc(var(--universal-padding) / 2)}.col-lg,.row.cols-lg>*{flex-grow:1;flex-basis:0}.col-lg-1,.row.cols-lg-1>*{flex-basis:8.33333%;max-width:8.33333%}.col-lg-offset-0{margin-left:0}.col-lg-2,.row.cols-lg-2>*{flex-basis:16.66667%;max-width:16.66667%}.col-lg-offset-1{margin-left:8.33333%}.col-lg-3,.row.cols-lg-3>*{flex-basis:25%;max-width:25%}.col-lg-offset-2{margin-left:16.66667%}.col-lg-4,.row.cols-lg-4>*{flex-basis:33.33333%;max-width:33.33333%}.col-lg-offset-3{margin-left:25%}.col-lg-5,.row.cols-lg-5>*{flex-basis:41.66667%;max-width:41.66667%}.col-lg-offset-4{margin-left:33.33333%}.col-lg-6,.row.cols-lg-6>*{flex-basis:50%;max-width:50%}.col-lg-offset-5{margin-left:41.66667%}.col-lg-7,.row.cols-lg-7>*{flex-basis:58.33333%;max-width:58.33333%}.col-lg-offset-6{margin-left:50%}.col-lg-8,.row.cols-lg-8>*{flex-basis:66.66667%;max-width:66.66667%}.col-lg-offset-7{margin-left:58.33333%}.col-lg-9,.row.cols-lg-9>*{flex-basis:75%;max-width:75%}.col-lg-offset-8{margin-left:66.66667%}.col-lg-10,.row.cols-lg-10>*{flex-basis:83.33333%;max-width:83.33333%}.col-lg-offset-9{margin-left:75%}.col-lg-11,.row.cols-lg-11>*{flex-basis:91.66667%;max-width:91.66667%}.col-lg-offset-10{margin-left:83.33333%}.col-lg-12,.row.cols-lg-12>*{flex-basis:100%;max-width:100%}.col-lg-offset-11{margin-left:91.66667%}.col-lg-normal{order:initial}.col-lg-first{order:-999}.col-lg-last{order:999}}:root{--card-back-color:#f8f8f8;--card-fore-color:#111;--card-border-color:#ddd}.card{display:flex;flex-direction:column;justify-content:space-between;align-self:center;position:relative;width:100%;background:var(--card-back-color);color:var(--card-fore-color);border:.0625rem solid var(--card-border-color);border-radius:var(--universal-border-radius);margin:var(--universal-margin);overflow:hidden}@media screen and (min-width: 320px){.card{max-width:320px}}.card>.section{background:var(--card-back-color);color:var(--card-fore-color);box-sizing:border-box;margin:0;border:0;border-radius:0;border-bottom:.0625rem solid var(--card-border-color);padding:var(--universal-padding);width:100%}.card>.section.media{height:200px;padding:0;-o-object-fit:cover;object-fit:cover}.card>.section:last-child{border-bottom:0}@media screen and (min-width: 240px){.card.small{max-width:240px}}@media screen and (min-width: 480px){.card.large{max-width:480px}}.card.fluid{max-width:100%;width:auto}.card.warning{--card-back-color:#ffca28;--card-border-color:#e8b825}.card.error{--card-back-color:#b71c1c;--card-fore-color:#f8f8f8;--card-border-color:#a71a1a}.card>.section.dark{--card-back-color:linear-gradient(135deg, #eceff1 10%, #90a4ae 100%)}.card>.section.double-padded{padding:calc(1.5 * var(--universal-padding))}:root{--form-back-color:#f0f0f0;--form-fore-color:#111;--form-border-color:#ddd;--input-back-color:#f8f8f8;--input-fore-color:#111;--input-border-color:#ddd;--input-focus-color:#0288d1;--input-invalid-color:#d32f2f;--button-back-color:#e2e2e2;--button-hover-back-color:#dcdcdc;--button-fore-color:#212121;--button-border-color:transparent;--button-hover-border-color:transparent;--button-group-border-color:rgba(124,124,124,0.54)}form{background:var(--form-back-color);color:var(--form-fore-color);border:.0625rem solid var(--form-border-color);border-radius:var(--universal-border-radius);margin:var(--universal-margin);padding:calc(2 * var(--universal-padding)) var(--universal-padding)}fieldset{border:.0625rem solid var(--form-border-color);border-radius:var(--universal-border-radius);margin:calc(var(--universal-margin) / 4);padding:var(--universal-padding)}legend{box-sizing:border-box;display:table;max-width:100%;white-space:normal;font-weight:700;padding:calc(var(--universal-padding) / 2)}label{padding:calc(var(--universal-padding) / 2) var(--universal-padding)}.input-group{display:inline-block}.input-group.fluid{display:flex;align-items:center;justify-content:center}.input-group.fluid>input{flex-grow:1;flex-basis:0px}@media screen and (max-width: 767px){.input-group.fluid{align-items:stretch;flex-direction:column}}.input-group.vertical{display:flex;align-items:stretch;flex-direction:column}.input-group.vertical>input{flex-grow:1;flex-basis:0px}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}input:not([type]),[type="text"],[type="email"],[type="number"],[type="search"],[type="password"],[type="url"],[type="tel"],[type="checkbox"],[type="radio"],textarea,select{box-sizing:border-box;background:var(--input-back-color);color:var(--input-fore-color);border:.0625rem solid var(--input-border-color);border-radius:var(--universal-border-radius);margin:calc(var(--universal-margin) / 2);padding:var(--universal-padding) calc(1.5 * var(--universal-padding))}input:not([type="button"]):not([type="submit"]):not([type="reset"]):hover,input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus,textarea:hover,textarea:focus,select:hover,select:focus{border-color:var(--input-focus-color);box-shadow:none}input:not([type="button"]):not([type="submit"]):not([type="reset"]):invalid,input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus:invalid,textarea:invalid,textarea:focus:invalid,select:invalid,select:focus:invalid{border-color:var(--input-invalid-color);box-shadow:none}input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly],textarea[readonly],select[readonly]{background:var(--secondary-back-color)}select{max-width:100%}option{overflow:hidden;text-overflow:ellipsis}[type="checkbox"],[type="radio"]{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;height:calc(1rem + var(--universal-padding) / 2);width:calc(1rem + var(--universal-padding) / 2);vertical-align:text-bottom;padding:0;flex-basis:calc(1rem + var(--universal-padding) / 2) !important;flex-grow:0 !important}[type="checkbox"]:checked:before,[type="radio"]:checked:before{position:absolute}[type="checkbox"]:checked:before{content:'\2713';font-family:sans-serif;font-size:calc(1rem + var(--universal-padding) / 2);top:calc(0rem - var(--universal-padding));left:calc(var(--universal-padding) / 4)}[type="radio"]{border-radius:100%}[type="radio"]:checked:before{border-radius:100%;content:'';top:calc(.0625rem + var(--universal-padding) / 2);left:calc(.0625rem + var(--universal-padding) / 2);background:var(--input-fore-color);width:0.5rem;height:0.5rem}:placeholder-shown{color:var(--input-fore-color)}::-ms-placeholder{color:var(--input-fore-color);opacity:0.54}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button{overflow:visible;text-transform:none}button,[type="button"],[type="submit"],[type="reset"],a.button,label.button,.button,a[role="button"],label[role="button"],[role="button"]{display:inline-block;background:var(--button-back-color);color:var(--button-fore-color);border:.0625rem solid var(--button-border-color);border-radius:var(--universal-border-radius);padding:var(--universal-padding) calc(1.5 * var(--universal-padding));margin:var(--universal-margin);text-decoration:none;cursor:pointer;transition:background 0.3s}button:hover,button:focus,[type="button"]:hover,[type="button"]:focus,[type="submit"]:hover,[type="submit"]:focus,[type="reset"]:hover,[type="reset"]:focus,a.button:hover,a.button:focus,label.button:hover,label.button:focus,.button:hover,.button:focus,a[role="button"]:hover,a[role="button"]:focus,label[role="button"]:hover,label[role="button"]:focus,[role="button"]:hover,[role="button"]:focus{background:var(--button-hover-back-color);border-color:var(--button-hover-border-color)}input:disabled,input[disabled],textarea:disabled,textarea[disabled],select:disabled,select[disabled],button:disabled,button[disabled],.button:disabled,.button[disabled],[role="button"]:disabled,[role="button"][disabled]{cursor:not-allowed;opacity:.75}.button-group{display:flex;border:.0625rem solid var(--button-group-border-color);border-radius:var(--universal-border-radius);margin:var(--universal-margin)}.button-group>button,.button-group [type="button"],.button-group>[type="submit"],.button-group>[type="reset"],.button-group>.button,.button-group>[role="button"]{margin:0;flex:1 1 auto;text-align:center;border:0;border-radius:0;box-shadow:none}.button-group>:not(:first-child){border-left:.0625rem solid var(--button-group-border-color)}@media screen and (max-width: 767px){.button-group{flex-direction:column}.button-group>:not(:first-child){border:0;border-top:.0625rem solid var(--button-group-border-color)}}button.primary,[type="button"].primary,[type="submit"].primary,[type="reset"].primary,.button.primary,[role="button"].primary{--button-back-color:#1976d2;--button-fore-color:#f8f8f8}button.primary:hover,button.primary:focus,[type="button"].primary:hover,[type="button"].primary:focus,[type="submit"].primary:hover,[type="submit"].primary:focus,[type="reset"].primary:hover,[type="reset"].primary:focus,.button.primary:hover,.button.primary:focus,[role="button"].primary:hover,[role="button"].primary:focus{--button-hover-back-color:#1565c0}button.secondary,[type="button"].secondary,[type="submit"].secondary,[type="reset"].secondary,.button.secondary,[role="button"].secondary{--button-back-color:#d32f2f;--button-fore-color:#f8f8f8}button.secondary:hover,button.secondary:focus,[type="button"].secondary:hover,[type="button"].secondary:focus,[type="submit"].secondary:hover,[type="submit"].secondary:focus,[type="reset"].secondary:hover,[type="reset"].secondary:focus,.button.secondary:hover,.button.secondary:focus,[role="button"].secondary:hover,[role="button"].secondary:focus{--button-hover-back-color:#c62828}button.tertiary,[type="button"].tertiary,[type="submit"].tertiary,[type="reset"].tertiary,.button.tertiary,[role="button"].tertiary{--button-back-color:#308732;--button-fore-color:#f8f8f8}button.tertiary:hover,button.tertiary:focus,[type="button"].tertiary:hover,[type="button"].tertiary:focus,[type="submit"].tertiary:hover,[type="submit"].tertiary:focus,[type="reset"].tertiary:hover,[type="reset"].tertiary:focus,.button.tertiary:hover,.button.tertiary:focus,[role="button"].tertiary:hover,[role="button"].tertiary:focus{--button-hover-back-color:#277529}button.inverse,[type="button"].inverse,[type="submit"].inverse,[type="reset"].inverse,.button.inverse,[role="button"].inverse{--button-back-color:#212121;--button-fore-color:#f8f8f8}button.inverse:hover,button.inverse:focus,[type="button"].inverse:hover,[type="button"].inverse:focus,[type="submit"].inverse:hover,[type="submit"].inverse:focus,[type="reset"].inverse:hover,[type="reset"].inverse:focus,.button.inverse:hover,.button.inverse:focus,[role="button"].inverse:hover,[role="button"].inverse:focus{--button-hover-back-color:#111}button.small,[type="button"].small,[type="submit"].small,[type="reset"].small,.button.small,[role="button"].small{padding:calc(0.5 * var(--universal-padding)) calc(0.75 * var(--universal-padding));margin:var(--universal-margin)}button.large,[type="button"].large,[type="submit"].large,[type="reset"].large,.button.large,[role="button"].large{padding:calc(1.5 * var(--universal-padding)) calc(2 * var(--universal-padding));margin:var(--universal-margin)}:root{--header-back-color:#f8f8f8;--header-hover-back-color:#f0f0f0;--header-fore-color:#444;--header-border-color:#ddd;--nav-back-color:#f8f8f8;--nav-hover-back-color:#f0f0f0;--nav-fore-color:#444;--nav-border-color:#ddd;--nav-link-color:#0277bd;--footer-fore-color:#444;--footer-back-color:#f8f8f8;--footer-border-color:#ddd;--footer-link-color:#0277bd;--drawer-back-color:#f8f8f8;--drawer-hover-back-color:#f0f0f0;--drawer-border-color:#ddd;--drawer-close-color:#444}header{height:3.1875rem;background:var(--header-back-color);color:var(--header-fore-color);border-bottom:.0625rem solid var(--header-border-color);padding:calc(var(--universal-padding) / 4) 0;white-space:nowrap;overflow-x:auto;overflow-y:hidden}header.row{box-sizing:content-box}header .logo{color:var(--header-fore-color);font-size:1.75rem;padding:var(--universal-padding) calc(2 * var(--universal-padding));text-decoration:none}header button,header [type="button"],header .button,header [role="button"]{box-sizing:border-box;position:relative;top:calc(0rem - var(--universal-padding) / 4);height:calc(3.1875rem + var(--universal-padding) / 2);background:var(--header-back-color);line-height:calc(3.1875rem - var(--universal-padding) * 1.5);text-align:center;color:var(--header-fore-color);border:0;border-radius:0;margin:0;text-transform:uppercase}header button:hover,header button:focus,header [type="button"]:hover,header [type="button"]:focus,header .button:hover,header .button:focus,header [role="button"]:hover,header [role="button"]:focus{background:var(--header-hover-back-color)}nav{background:var(--nav-back-color);color:var(--nav-fore-color);border:.0625rem solid var(--nav-border-color);border-radius:var(--universal-border-radius);margin:var(--universal-margin)}nav *{padding:var(--universal-padding) calc(1.5 * var(--universal-padding))}nav a,nav a:visited{display:block;color:var(--nav-link-color);border-radius:var(--universal-border-radius);transition:background 0.3s}nav a:hover,nav a:focus,nav a:visited:hover,nav a:visited:focus{text-decoration:none;background:var(--nav-hover-back-color)}nav .sublink-1{position:relative;margin-left:calc(2 * var(--universal-padding))}nav .sublink-1:before{position:absolute;left:calc(var(--universal-padding) - 1 * var(--universal-padding));top:-.0625rem;content:'';height:100%;border:.0625rem solid var(--nav-border-color);border-left:0}nav .sublink-2{position:relative;margin-left:calc(4 * var(--universal-padding))}nav .sublink-2:before{position:absolute;left:calc(var(--universal-padding) - 3 * var(--universal-padding));top:-.0625rem;content:'';height:100%;border:.0625rem solid var(--nav-border-color);border-left:0}footer{background:var(--footer-back-color);color:var(--footer-fore-color);border-top:.0625rem solid var(--footer-border-color);padding:calc(2 * var(--universal-padding)) var(--universal-padding);font-size:.875rem}footer a,footer a:visited{color:var(--footer-link-color)}header.sticky{position:-webkit-sticky;position:sticky;z-index:1101;top:0}footer.sticky{position:-webkit-sticky;position:sticky;z-index:1101;bottom:0}.drawer-toggle:before{display:inline-block;position:relative;vertical-align:bottom;content:'\00a0\2261\00a0';font-family:sans-serif;font-size:1.5em}@media screen and (min-width: 768px){.drawer-toggle:not(.persistent){display:none}}[type="checkbox"].drawer{height:1px;width:1px;margin:-1px;overflow:hidden;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%)}[type="checkbox"].drawer+*{display:block;box-sizing:border-box;position:fixed;top:0;width:320px;height:100vh;overflow-y:auto;background:var(--drawer-back-color);border:.0625rem solid var(--drawer-border-color);border-radius:0;margin:0;z-index:1110;right:-320px;transition:right 0.3s}[type="checkbox"].drawer+* .drawer-close{position:absolute;top:var(--universal-margin);right:var(--universal-margin);z-index:1111;width:2rem;height:2rem;border-radius:var(--universal-border-radius);padding:var(--universal-padding);margin:0;cursor:pointer;transition:background 0.3s}[type="checkbox"].drawer+* .drawer-close:before{display:block;content:'\00D7';color:var(--drawer-close-color);position:relative;font-family:sans-serif;font-size:2rem;line-height:1;text-align:center}[type="checkbox"].drawer+* .drawer-close:hover,[type="checkbox"].drawer+* .drawer-close:focus{background:var(--drawer-hover-back-color)}@media screen and (max-width: 320px){[type="checkbox"].drawer+*{width:100%}}[type="checkbox"].drawer:checked+*{right:0}@media screen and (min-width: 768px){[type="checkbox"].drawer:not(.persistent)+*{position:static;height:100%;z-index:1100}[type="checkbox"].drawer:not(.persistent)+* .drawer-close{display:none}}:not(.doc){font-family:'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif}code:not(.doc),kbd:not(.doc),pre:not(.doc),samp:not(.doc){font-family:'Inconsolata', Menlo, Consolas, monospace}.index-splash{width:100%;height:100vh}.index-splash-image{background-image:url("./index-splash.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;width:100%;height:100%;position:absolute}.index-splash-image:not(.no-filter){filter:blur(2px)}h1.splash{position:absolute;margin:0;width:100%;text-align:center;height:100%;line-height:60vh;font-size:3rem;font-weight:400;color:#f22f21}h1.splash small{display:initial;font-size:0.5em;color:#222}h1.splash::first-letter{font-size:1.33em;color:#fff;background:#f22f21;border-radius:6px;padding:0 10px}p.splash{margin:0;position:absolute;width:100%;text-align:center;padding-top:40vh}.card p:not(.doc),.card li:not(.doc){text-align:justify}#version-info{position:absolute;bottom:0;background:rgba(0,0,0,0.25);padding:2px 6px;border-radius:4px;color:#dc2b1e;right:8px;font-weight:500}.row.padded{padding-top:20px;padding-bottom:80px}.feature-image{display:block;margin:50px auto 20px}@media screen and (min-width: 768px){.feature-image{height:400px}}.feature-header{text-align:center;margin-left:0}.alt-back{background:#f3f3f3}.primary-section{background:#f22f21;color:#fff}.primary-section a:link{color:#76FF03}.primary-section a:visited{color:#64DD17}.primary-section a.centered{display:block;margin:0 auto;text-align:center}.primary-section button{background:transparent;border:1px solid #fff;border-radius:4px;padding:4px 8px;color:#fff;font-size:1.25rem;display:block;margin:20px auto 8px;cursor:pointer}#root,#App{height:100vh}#doc-wrapper{height:calc(100vh - 3.5625rem);overflow:hidden}#doc-drawer{height:100vh;overflow-y:auto}@media screen and (min-width: 768px){#doc-drawer{height:100%;border-top:0;border-bottom:0}}#doc-content{height:100%;overflow-y:auto}[type="checkbox"].drawer:not(.persistent)+nav{border-top:0}@media screen and (max-width: 767px){.hidden-sm{display:none !important}}@media screen and (min-width: 768px) and (max-width: 1279px){.hidden-md{display:none !important}}@media screen and (min-width: 1280px){.hidden-lg{display:none !important}}:root{--cc-padding-left:3.5rem;--cc-number-left:1rem;--cc-number-width:2rem;--cc-highlight-a-color:#4527a0;--cc-highlight-b-color:#1976d2;--cc-highlight-c-color:#388e3c}pre{counter-reset:line}pre>*{font-family:"Inconsolata",Menlo,Consolas,monospace;font-size:.85rem}pre>.code-line{font-family:"Inconsolata",Menlo,Consolas,monospace;padding-left:var(--cc-padding-left)}pre>.code-line:before{counter-increment:line;content:counter(line);display:inline-block;border-right:.0625rem solid var(--pre-color);padding:0 var(--universal-padding);margin-right:var(--universal-margin);color:var(--border-color);position:absolute;left:var(--cc-number-left);width:var(--cc-number-width);text-align:right}pre>.code-line>*{line-height:0;font-family:Inconsolata,Menlo,Consolas,monospace}pre .highlight-a{color:var(--cc-highlight-a-color)}pre .highlight-b{color:var(--cc-highlight-b-color)}pre .highlight-c{color:var(--cc-highlight-c-color)}mark.do{background:#689f38;color:#fafafa;font-size:.9375em;line-height:1em;border-radius:.125rem;padding:0.125em 0.25em}mark.dont{background:#e53935;color:#fafafa;font-size:.9375em;line-height:1em;border-radius:.125rem;padding:0.125em 0.25em}.row.dodos{align-items:center} +:root{--fore-color:#111;--secondary-fore-color:#444;--back-color:#f8f8f8;--secondary-back-color:#f0f0f0;--blockquote-color:#f57c00;--pre-color:#1565c0;--border-color:#aaa;--secondary-border-color:#ddd;--heading-ratio:1.19;--universal-margin:.5rem;--universal-padding:.5rem;--universal-border-radius:.125rem;--a-link-color:#0277bd;--a-visited-color:#01579b}html{font-size:16px}a,b,del,em,i,ins,q,span,strong,u{font-size:1em}html,*{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif;line-height:1.5;-webkit-text-size-adjust:100%}*{font-size:1rem}body{margin:0;color:var(--fore-color);background:var(--back-color)}details{display:block}summary{display:list-item}abbr[title]{border-bottom:none;text-decoration:underline dotted}input{overflow:visible}img{max-width:100%;height:auto}h1,h2,h3,h4,h5,h6{line-height:1.2;margin:calc(1.5 * var(--universal-margin)) var(--universal-margin);font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:var(--secondary-fore-color);display:block;margin-top:-.25rem}h1{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio))}h2{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio))}h3{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio))}h4{font-size:calc(1rem * var(--heading-ratio))}h5{font-size:1rem}h6{font-size:calc(1rem / var(--heading-ratio))}p{margin:var(--universal-margin)}ol,ul{margin:var(--universal-margin);padding-left:calc(2 * var(--universal-margin))}b,strong{font-weight:700}hr{box-sizing:content-box;border:0;line-height:1.25em;margin:var(--universal-margin);height:.0625rem;background:linear-gradient(to right, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent)}blockquote{display:block;position:relative;font-style:italic;color:var(--secondary-fore-color);margin:var(--universal-margin);padding:calc(3 * var(--universal-padding));border:.0625rem solid var(--secondary-border-color);border-left:.375rem solid var(--blockquote-color);border-radius:0 var(--universal-border-radius) var(--universal-border-radius) 0}blockquote:before{position:absolute;top:calc(0rem - var(--universal-padding));left:0;font-family:sans-serif;font-size:3rem;font-weight:700;content:"\201c";color:var(--blockquote-color)}blockquote[cite]:after{font-style:normal;font-size:.75em;font-weight:700;content:"\a— " attr(cite);white-space:pre}code,kbd,pre,samp{font-family:Menlo, Consolas, monospace;font-size:.85em}code{background:var(--secondary-back-color);border-radius:var(--universal-border-radius);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2)}kbd{background:var(--fore-color);color:var(--back-color);border-radius:var(--universal-border-radius);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2)}pre{overflow:auto;background:var(--secondary-back-color);padding:calc(1.5 * var(--universal-padding));margin:var(--universal-margin);border:.0625rem solid var(--secondary-border-color);border-left:.25rem solid var(--pre-color);border-radius:0 var(--universal-border-radius) var(--universal-border-radius) 0}sup,sub,code,kbd{line-height:0;position:relative;vertical-align:baseline}small,sup,sub,figcaption{font-size:.75em}sup{top:-.5em}sub{bottom:-.25em}figure{margin:var(--universal-margin)}figcaption{color:var(--secondary-fore-color)}a{text-decoration:none}a:link{color:var(--a-link-color)}a:visited{color:var(--a-visited-color)}a:hover,a:focus{text-decoration:underline}.container{margin:0 auto;padding:0 calc(1.5 * var(--universal-padding))}.row{box-sizing:border-box;display:flex;flex:0 1 auto;flex-flow:row wrap}.col-sm,[class^='col-sm-'],[class^='col-sm-offset-'],.row[class*='cols-sm-']>*{box-sizing:border-box;flex:0 0 auto;padding:0 calc(var(--universal-padding) / 2)}.col-sm,.row.cols-sm>*{max-width:100%;flex-grow:1;flex-basis:0}.col-sm-1,.row.cols-sm-1>*{max-width:8.33333%;flex-basis:8.33333%}.col-sm-offset-0{margin-left:0}.col-sm-2,.row.cols-sm-2>*{max-width:16.66667%;flex-basis:16.66667%}.col-sm-offset-1{margin-left:8.33333%}.col-sm-3,.row.cols-sm-3>*{max-width:25%;flex-basis:25%}.col-sm-offset-2{margin-left:16.66667%}.col-sm-4,.row.cols-sm-4>*{max-width:33.33333%;flex-basis:33.33333%}.col-sm-offset-3{margin-left:25%}.col-sm-5,.row.cols-sm-5>*{max-width:41.66667%;flex-basis:41.66667%}.col-sm-offset-4{margin-left:33.33333%}.col-sm-6,.row.cols-sm-6>*{max-width:50%;flex-basis:50%}.col-sm-offset-5{margin-left:41.66667%}.col-sm-7,.row.cols-sm-7>*{max-width:58.33333%;flex-basis:58.33333%}.col-sm-offset-6{margin-left:50%}.col-sm-8,.row.cols-sm-8>*{max-width:66.66667%;flex-basis:66.66667%}.col-sm-offset-7{margin-left:58.33333%}.col-sm-9,.row.cols-sm-9>*{max-width:75%;flex-basis:75%}.col-sm-offset-8{margin-left:66.66667%}.col-sm-10,.row.cols-sm-10>*{max-width:83.33333%;flex-basis:83.33333%}.col-sm-offset-9{margin-left:75%}.col-sm-11,.row.cols-sm-11>*{max-width:91.66667%;flex-basis:91.66667%}.col-sm-offset-10{margin-left:83.33333%}.col-sm-12,.row.cols-sm-12>*{max-width:100%;flex-basis:100%}.col-sm-offset-11{margin-left:91.66667%}.col-sm-normal{order:initial}.col-sm-first{order:-999}.col-sm-last{order:999}@media screen and (min-width: 768px){.col-md,[class^='col-md-'],[class^='col-md-offset-'],.row[class*='cols-md-']>*{box-sizing:border-box;flex:0 0 auto;padding:0 calc(var(--universal-padding) / 2)}.col-md,.row.cols-md>*{max-width:100%;flex-grow:1;flex-basis:0}.col-md-1,.row.cols-md-1>*{max-width:8.33333%;flex-basis:8.33333%}.col-md-offset-0{margin-left:0}.col-md-2,.row.cols-md-2>*{max-width:16.66667%;flex-basis:16.66667%}.col-md-offset-1{margin-left:8.33333%}.col-md-3,.row.cols-md-3>*{max-width:25%;flex-basis:25%}.col-md-offset-2{margin-left:16.66667%}.col-md-4,.row.cols-md-4>*{max-width:33.33333%;flex-basis:33.33333%}.col-md-offset-3{margin-left:25%}.col-md-5,.row.cols-md-5>*{max-width:41.66667%;flex-basis:41.66667%}.col-md-offset-4{margin-left:33.33333%}.col-md-6,.row.cols-md-6>*{max-width:50%;flex-basis:50%}.col-md-offset-5{margin-left:41.66667%}.col-md-7,.row.cols-md-7>*{max-width:58.33333%;flex-basis:58.33333%}.col-md-offset-6{margin-left:50%}.col-md-8,.row.cols-md-8>*{max-width:66.66667%;flex-basis:66.66667%}.col-md-offset-7{margin-left:58.33333%}.col-md-9,.row.cols-md-9>*{max-width:75%;flex-basis:75%}.col-md-offset-8{margin-left:66.66667%}.col-md-10,.row.cols-md-10>*{max-width:83.33333%;flex-basis:83.33333%}.col-md-offset-9{margin-left:75%}.col-md-11,.row.cols-md-11>*{max-width:91.66667%;flex-basis:91.66667%}.col-md-offset-10{margin-left:83.33333%}.col-md-12,.row.cols-md-12>*{max-width:100%;flex-basis:100%}.col-md-offset-11{margin-left:91.66667%}.col-md-normal{order:initial}.col-md-first{order:-999}.col-md-last{order:999}}@media screen and (min-width: 1280px){.col-lg,[class^='col-lg-'],[class^='col-lg-offset-'],.row[class*='cols-lg-']>*{box-sizing:border-box;flex:0 0 auto;padding:0 calc(var(--universal-padding) / 2)}.col-lg,.row.cols-lg>*{max-width:100%;flex-grow:1;flex-basis:0}.col-lg-1,.row.cols-lg-1>*{max-width:8.33333%;flex-basis:8.33333%}.col-lg-offset-0{margin-left:0}.col-lg-2,.row.cols-lg-2>*{max-width:16.66667%;flex-basis:16.66667%}.col-lg-offset-1{margin-left:8.33333%}.col-lg-3,.row.cols-lg-3>*{max-width:25%;flex-basis:25%}.col-lg-offset-2{margin-left:16.66667%}.col-lg-4,.row.cols-lg-4>*{max-width:33.33333%;flex-basis:33.33333%}.col-lg-offset-3{margin-left:25%}.col-lg-5,.row.cols-lg-5>*{max-width:41.66667%;flex-basis:41.66667%}.col-lg-offset-4{margin-left:33.33333%}.col-lg-6,.row.cols-lg-6>*{max-width:50%;flex-basis:50%}.col-lg-offset-5{margin-left:41.66667%}.col-lg-7,.row.cols-lg-7>*{max-width:58.33333%;flex-basis:58.33333%}.col-lg-offset-6{margin-left:50%}.col-lg-8,.row.cols-lg-8>*{max-width:66.66667%;flex-basis:66.66667%}.col-lg-offset-7{margin-left:58.33333%}.col-lg-9,.row.cols-lg-9>*{max-width:75%;flex-basis:75%}.col-lg-offset-8{margin-left:66.66667%}.col-lg-10,.row.cols-lg-10>*{max-width:83.33333%;flex-basis:83.33333%}.col-lg-offset-9{margin-left:75%}.col-lg-11,.row.cols-lg-11>*{max-width:91.66667%;flex-basis:91.66667%}.col-lg-offset-10{margin-left:83.33333%}.col-lg-12,.row.cols-lg-12>*{max-width:100%;flex-basis:100%}.col-lg-offset-11{margin-left:91.66667%}.col-lg-normal{order:initial}.col-lg-first{order:-999}.col-lg-last{order:999}}:root{--card-back-color:#f8f8f8;--card-fore-color:#111;--card-border-color:#ddd}.card{display:flex;flex-direction:column;justify-content:space-between;align-self:center;position:relative;width:100%;background:var(--card-back-color);color:var(--card-fore-color);border:.0625rem solid var(--card-border-color);border-radius:var(--universal-border-radius);margin:var(--universal-margin);overflow:hidden}@media screen and (min-width: 320px){.card{max-width:320px}}.card>.section{background:var(--card-back-color);color:var(--card-fore-color);box-sizing:border-box;margin:0;border:0;border-radius:0;border-bottom:.0625rem solid var(--card-border-color);padding:var(--universal-padding);width:100%}.card>.section.media{height:200px;padding:0;-o-object-fit:cover;object-fit:cover}.card>.section:last-child{border-bottom:0}@media screen and (min-width: 240px){.card.small{max-width:240px}}@media screen and (min-width: 480px){.card.large{max-width:480px}}.card.fluid{max-width:100%;width:auto}.card.warning{--card-back-color:#ffca28;--card-border-color:#e8b825}.card.error{--card-back-color:#b71c1c;--card-fore-color:#f8f8f8;--card-border-color:#a71a1a}.card>.section.dark{--card-back-color:linear-gradient(135deg, #eceff1 10%, #90a4ae 100%)}.card>.section.double-padded{padding:calc(1.5 * var(--universal-padding))}:root{--form-back-color:#f0f0f0;--form-fore-color:#111;--form-border-color:#ddd;--input-back-color:#f8f8f8;--input-fore-color:#111;--input-border-color:#ddd;--input-focus-color:#0288d1;--input-invalid-color:#d32f2f;--button-back-color:#e2e2e2;--button-hover-back-color:#dcdcdc;--button-fore-color:#212121;--button-border-color:transparent;--button-hover-border-color:transparent;--button-group-border-color:rgba(124,124,124,0.54)}form{background:var(--form-back-color);color:var(--form-fore-color);border:.0625rem solid var(--form-border-color);border-radius:var(--universal-border-radius);margin:var(--universal-margin);padding:calc(2 * var(--universal-padding)) var(--universal-padding)}fieldset{border:.0625rem solid var(--form-border-color);border-radius:var(--universal-border-radius);margin:calc(var(--universal-margin) / 4);padding:var(--universal-padding)}legend{box-sizing:border-box;display:table;max-width:100%;white-space:normal;font-weight:700;padding:calc(var(--universal-padding) / 2)}label{padding:calc(var(--universal-padding) / 2) var(--universal-padding)}.input-group{display:inline-block}.input-group.fluid{display:flex;align-items:center;justify-content:center}.input-group.fluid>input{max-width:100%;flex-grow:1;flex-basis:0px}@media screen and (max-width: 767px){.input-group.fluid{align-items:stretch;flex-direction:column}}.input-group.vertical{display:flex;align-items:stretch;flex-direction:column}.input-group.vertical>input{max-width:100%;flex-grow:1;flex-basis:0px}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}input:not([type]),[type="text"],[type="email"],[type="number"],[type="search"],[type="password"],[type="url"],[type="tel"],[type="checkbox"],[type="radio"],textarea,select{box-sizing:border-box;background:var(--input-back-color);color:var(--input-fore-color);border:.0625rem solid var(--input-border-color);border-radius:var(--universal-border-radius);margin:calc(var(--universal-margin) / 2);padding:var(--universal-padding) calc(1.5 * var(--universal-padding))}input:not([type="button"]):not([type="submit"]):not([type="reset"]):hover,input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus,textarea:hover,textarea:focus,select:hover,select:focus{border-color:var(--input-focus-color);box-shadow:none}input:not([type="button"]):not([type="submit"]):not([type="reset"]):invalid,input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus:invalid,textarea:invalid,textarea:focus:invalid,select:invalid,select:focus:invalid{border-color:var(--input-invalid-color);box-shadow:none}input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly],textarea[readonly],select[readonly]{background:var(--secondary-back-color)}select{max-width:100%}option{overflow:hidden;text-overflow:ellipsis}[type="checkbox"],[type="radio"]{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;height:calc(1rem + var(--universal-padding) / 2);width:calc(1rem + var(--universal-padding) / 2);vertical-align:text-bottom;padding:0;flex-basis:calc(1rem + var(--universal-padding) / 2) !important;flex-grow:0 !important}[type="checkbox"]:checked:before,[type="radio"]:checked:before{position:absolute}[type="checkbox"]:checked:before{content:'\2713';font-family:sans-serif;font-size:calc(1rem + var(--universal-padding) / 2);top:calc(0rem - var(--universal-padding));left:calc(var(--universal-padding) / 4)}[type="radio"]{border-radius:100%}[type="radio"]:checked:before{border-radius:100%;content:'';top:calc(.0625rem + var(--universal-padding) / 2);left:calc(.0625rem + var(--universal-padding) / 2);background:var(--input-fore-color);width:0.5rem;height:0.5rem}:placeholder-shown{color:var(--input-fore-color)}::-ms-placeholder{color:var(--input-fore-color);opacity:0.54}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button{overflow:visible;text-transform:none}button,[type="button"],[type="submit"],[type="reset"],a.button,label.button,.button,a[role="button"],label[role="button"],[role="button"]{display:inline-block;background:var(--button-back-color);color:var(--button-fore-color);border:.0625rem solid var(--button-border-color);border-radius:var(--universal-border-radius);padding:var(--universal-padding) calc(1.5 * var(--universal-padding));margin:var(--universal-margin);text-decoration:none;cursor:pointer;transition:background 0.3s}button:hover,button:focus,[type="button"]:hover,[type="button"]:focus,[type="submit"]:hover,[type="submit"]:focus,[type="reset"]:hover,[type="reset"]:focus,a.button:hover,a.button:focus,label.button:hover,label.button:focus,.button:hover,.button:focus,a[role="button"]:hover,a[role="button"]:focus,label[role="button"]:hover,label[role="button"]:focus,[role="button"]:hover,[role="button"]:focus{background:var(--button-hover-back-color);border-color:var(--button-hover-border-color)}input:disabled,input[disabled],textarea:disabled,textarea[disabled],select:disabled,select[disabled],button:disabled,button[disabled],.button:disabled,.button[disabled],[role="button"]:disabled,[role="button"][disabled]{cursor:not-allowed;opacity:.75}.button-group{display:flex;border:.0625rem solid var(--button-group-border-color);border-radius:var(--universal-border-radius);margin:var(--universal-margin)}.button-group>button,.button-group [type="button"],.button-group>[type="submit"],.button-group>[type="reset"],.button-group>.button,.button-group>[role="button"]{margin:0;max-width:100%;flex:1 1 auto;text-align:center;border:0;border-radius:0;box-shadow:none}.button-group>:not(:first-child){border-left:.0625rem solid var(--button-group-border-color)}@media screen and (max-width: 767px){.button-group{flex-direction:column}.button-group>:not(:first-child){border:0;border-top:.0625rem solid var(--button-group-border-color)}}button.primary,[type="button"].primary,[type="submit"].primary,[type="reset"].primary,.button.primary,[role="button"].primary{--button-back-color:#1976d2;--button-fore-color:#f8f8f8}button.primary:hover,button.primary:focus,[type="button"].primary:hover,[type="button"].primary:focus,[type="submit"].primary:hover,[type="submit"].primary:focus,[type="reset"].primary:hover,[type="reset"].primary:focus,.button.primary:hover,.button.primary:focus,[role="button"].primary:hover,[role="button"].primary:focus{--button-hover-back-color:#1565c0}button.secondary,[type="button"].secondary,[type="submit"].secondary,[type="reset"].secondary,.button.secondary,[role="button"].secondary{--button-back-color:#d32f2f;--button-fore-color:#f8f8f8}button.secondary:hover,button.secondary:focus,[type="button"].secondary:hover,[type="button"].secondary:focus,[type="submit"].secondary:hover,[type="submit"].secondary:focus,[type="reset"].secondary:hover,[type="reset"].secondary:focus,.button.secondary:hover,.button.secondary:focus,[role="button"].secondary:hover,[role="button"].secondary:focus{--button-hover-back-color:#c62828}button.tertiary,[type="button"].tertiary,[type="submit"].tertiary,[type="reset"].tertiary,.button.tertiary,[role="button"].tertiary{--button-back-color:#308732;--button-fore-color:#f8f8f8}button.tertiary:hover,button.tertiary:focus,[type="button"].tertiary:hover,[type="button"].tertiary:focus,[type="submit"].tertiary:hover,[type="submit"].tertiary:focus,[type="reset"].tertiary:hover,[type="reset"].tertiary:focus,.button.tertiary:hover,.button.tertiary:focus,[role="button"].tertiary:hover,[role="button"].tertiary:focus{--button-hover-back-color:#277529}button.inverse,[type="button"].inverse,[type="submit"].inverse,[type="reset"].inverse,.button.inverse,[role="button"].inverse{--button-back-color:#212121;--button-fore-color:#f8f8f8}button.inverse:hover,button.inverse:focus,[type="button"].inverse:hover,[type="button"].inverse:focus,[type="submit"].inverse:hover,[type="submit"].inverse:focus,[type="reset"].inverse:hover,[type="reset"].inverse:focus,.button.inverse:hover,.button.inverse:focus,[role="button"].inverse:hover,[role="button"].inverse:focus{--button-hover-back-color:#111}button.small,[type="button"].small,[type="submit"].small,[type="reset"].small,.button.small,[role="button"].small{padding:calc(0.5 * var(--universal-padding)) calc(0.75 * var(--universal-padding));margin:var(--universal-margin)}button.large,[type="button"].large,[type="submit"].large,[type="reset"].large,.button.large,[role="button"].large{padding:calc(1.5 * var(--universal-padding)) calc(2 * var(--universal-padding));margin:var(--universal-margin)}:root{--header-back-color:#f8f8f8;--header-hover-back-color:#f0f0f0;--header-fore-color:#444;--header-border-color:#ddd;--nav-back-color:#f8f8f8;--nav-hover-back-color:#f0f0f0;--nav-fore-color:#444;--nav-border-color:#ddd;--nav-link-color:#0277bd;--footer-fore-color:#444;--footer-back-color:#f8f8f8;--footer-border-color:#ddd;--footer-link-color:#0277bd;--drawer-back-color:#f8f8f8;--drawer-hover-back-color:#f0f0f0;--drawer-border-color:#ddd;--drawer-close-color:#444}header{height:3.1875rem;background:var(--header-back-color);color:var(--header-fore-color);border-bottom:.0625rem solid var(--header-border-color);padding:calc(var(--universal-padding) / 4) 0;white-space:nowrap;overflow-x:auto;overflow-y:hidden}header.row{box-sizing:content-box}header .logo{color:var(--header-fore-color);font-size:1.75rem;padding:var(--universal-padding) calc(2 * var(--universal-padding));text-decoration:none}header button,header [type="button"],header .button,header [role="button"]{box-sizing:border-box;position:relative;top:calc(0rem - var(--universal-padding) / 4);height:calc(3.1875rem + var(--universal-padding) / 2);background:var(--header-back-color);line-height:calc(3.1875rem - var(--universal-padding) * 1.5);text-align:center;color:var(--header-fore-color);border:0;border-radius:0;margin:0;text-transform:uppercase}header button:hover,header button:focus,header [type="button"]:hover,header [type="button"]:focus,header .button:hover,header .button:focus,header [role="button"]:hover,header [role="button"]:focus{background:var(--header-hover-back-color)}nav{background:var(--nav-back-color);color:var(--nav-fore-color);border:.0625rem solid var(--nav-border-color);border-radius:var(--universal-border-radius);margin:var(--universal-margin)}nav *{padding:var(--universal-padding) calc(1.5 * var(--universal-padding))}nav a,nav a:visited{display:block;color:var(--nav-link-color);border-radius:var(--universal-border-radius);transition:background 0.3s}nav a:hover,nav a:focus,nav a:visited:hover,nav a:visited:focus{text-decoration:none;background:var(--nav-hover-back-color)}nav .sublink-1{position:relative;margin-left:calc(2 * var(--universal-padding))}nav .sublink-1:before{position:absolute;left:calc(var(--universal-padding) - 1 * var(--universal-padding));top:-.0625rem;content:'';height:100%;border:.0625rem solid var(--nav-border-color);border-left:0}nav .sublink-2{position:relative;margin-left:calc(4 * var(--universal-padding))}nav .sublink-2:before{position:absolute;left:calc(var(--universal-padding) - 3 * var(--universal-padding));top:-.0625rem;content:'';height:100%;border:.0625rem solid var(--nav-border-color);border-left:0}footer{background:var(--footer-back-color);color:var(--footer-fore-color);border-top:.0625rem solid var(--footer-border-color);padding:calc(2 * var(--universal-padding)) var(--universal-padding);font-size:.875rem}footer a,footer a:visited{color:var(--footer-link-color)}header.sticky{position:-webkit-sticky;position:sticky;z-index:1101;top:0}footer.sticky{position:-webkit-sticky;position:sticky;z-index:1101;bottom:0}.drawer-toggle:before{display:inline-block;position:relative;vertical-align:bottom;content:'\00a0\2261\00a0';font-family:sans-serif;font-size:1.5em}@media screen and (min-width: 768px){.drawer-toggle:not(.persistent){display:none}}[type="checkbox"].drawer{height:1px;width:1px;margin:-1px;overflow:hidden;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%)}[type="checkbox"].drawer+*{display:block;box-sizing:border-box;position:fixed;top:0;width:320px;height:100vh;overflow-y:auto;background:var(--drawer-back-color);border:.0625rem solid var(--drawer-border-color);border-radius:0;margin:0;z-index:1110;right:-320px;transition:right 0.3s}[type="checkbox"].drawer+* .drawer-close{position:absolute;top:var(--universal-margin);right:var(--universal-margin);z-index:1111;width:2rem;height:2rem;border-radius:var(--universal-border-radius);padding:var(--universal-padding);margin:0;cursor:pointer;transition:background 0.3s}[type="checkbox"].drawer+* .drawer-close:before{display:block;content:'\00D7';color:var(--drawer-close-color);position:relative;font-family:sans-serif;font-size:2rem;line-height:1;text-align:center}[type="checkbox"].drawer+* .drawer-close:hover,[type="checkbox"].drawer+* .drawer-close:focus{background:var(--drawer-hover-back-color)}@media screen and (max-width: 320px){[type="checkbox"].drawer+*{width:100%}}[type="checkbox"].drawer:checked+*{right:0}@media screen and (min-width: 768px){[type="checkbox"].drawer:not(.persistent)+*{position:static;height:100%;z-index:1100}[type="checkbox"].drawer:not(.persistent)+* .drawer-close{display:none}}:not(.doc){font-family:'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif}code:not(.doc),kbd:not(.doc),pre:not(.doc),samp:not(.doc){font-family:'Inconsolata', Menlo, Consolas, monospace}.index-splash{width:100%;height:100vh}.index-splash-image{background-image:url("./index-splash.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;width:100%;height:100%;position:absolute}.index-splash-image:not(.no-filter){filter:blur(2px)}h1.splash{position:absolute;margin:0;width:100%;text-align:center;height:100%;line-height:60vh;font-size:3rem;font-weight:400;color:#f22f21}h1.splash small{display:initial;font-size:0.5em;color:#222}h1.splash::first-letter{font-size:1.33em;color:#fff;background:#f22f21;border-radius:6px;padding:0 10px}p.splash{margin:0;position:absolute;width:100%;text-align:center;padding-top:40vh}.card p:not(.doc),.card li:not(.doc){text-align:justify}#version-info{position:absolute;bottom:0;background:rgba(0,0,0,0.25);padding:2px 6px;border-radius:4px;color:#dc2b1e;right:8px;font-weight:500}.row.padded{padding-top:20px;padding-bottom:80px}.feature-image{display:block;margin:50px auto 20px}@media screen and (min-width: 768px){.feature-image{height:400px}}.feature-header{text-align:center;margin-left:0}.alt-back{background:#f3f3f3}.primary-section{background:#f22f21;color:#fff}.primary-section a:link{color:#76FF03}.primary-section a:visited{color:#64DD17}.primary-section a.centered{display:block;margin:0 auto;text-align:center}.primary-section button{background:transparent;border:1px solid #fff;border-radius:4px;padding:4px 8px;color:#fff;font-size:1.25rem;display:block;margin:20px auto 8px;cursor:pointer}#root,#App{height:100vh}#doc-wrapper{height:calc(100vh - 3.5625rem);overflow:hidden}#doc-drawer{height:100vh;overflow-y:auto}@media screen and (min-width: 768px){#doc-drawer{height:100%;border-top:0;border-bottom:0}}#doc-content{height:100%;overflow-y:auto}[type="checkbox"].drawer:not(.persistent)+nav{border-top:0}@media screen and (max-width: 767px){.hidden-sm{display:none !important}}@media screen and (min-width: 768px) and (max-width: 1279px){.hidden-md{display:none !important}}@media screen and (min-width: 1280px){.hidden-lg{display:none !important}}:root{--cc-padding-left:3.5rem;--cc-number-left:1rem;--cc-number-width:2rem;--cc-highlight-a-color:#4527a0;--cc-highlight-b-color:#1976d2;--cc-highlight-c-color:#388e3c}pre{counter-reset:line}pre>*{font-family:"Inconsolata",Menlo,Consolas,monospace;font-size:.85rem}pre>.code-line{font-family:"Inconsolata",Menlo,Consolas,monospace;padding-left:var(--cc-padding-left)}pre>.code-line:before{counter-increment:line;content:counter(line);display:inline-block;border-right:.0625rem solid var(--pre-color);padding:0 var(--universal-padding);margin-right:var(--universal-margin);color:var(--border-color);position:absolute;left:var(--cc-number-left);width:var(--cc-number-width);text-align:right}pre>.code-line>*{line-height:0;font-family:Inconsolata,Menlo,Consolas,monospace}pre .highlight-a{color:var(--cc-highlight-a-color)}pre .highlight-b{color:var(--cc-highlight-b-color)}pre .highlight-c{color:var(--cc-highlight-c-color)}mark.do{background:#689f38;color:#fafafa;font-size:.9375em;line-height:1em;border-radius:.125rem;padding:0.125em 0.25em}mark.dont{background:#e53935;color:#fafafa;font-size:.9375em;line-height:1em;border-radius:.125rem;padding:0.125em 0.25em}.row.dodos{align-items:center}.box-colored{background:#0277bd;border-radius:0.125rem;padding:0.875rem;margin-bottom:0.5rem;min-height:0.875rem;color:#f8f8f8}main{background:#eee} diff --git a/src/flavors/mini-doc.scss b/src/flavors/mini-doc.scss index 37c4204..b02876d 100644 --- a/src/flavors/mini-doc.scss +++ b/src/flavors/mini-doc.scss @@ -345,3 +345,16 @@ mark.dont { .row.dodos { align-items: center; } + +.box-colored { + background: #0277bd; + border-radius: 0.125rem; + padding: 0.875rem; + margin-bottom: 0.5rem; + min-height: 0.875rem; + color: #f8f8f8; +} + +main { + background: #eee; +} diff --git a/src/mini/_input_control.scss b/src/mini/_input_control.scss index 3cc0036..20abc88 100644 --- a/src/mini/_input_control.scss +++ b/src/mini/_input_control.scss @@ -126,6 +126,7 @@ label { align-items: center; justify-content: center; & > input { + max-width: 100%; flex-grow: 1; flex-basis: 0px; } @@ -135,12 +136,13 @@ label { flex-direction: column; } } - // Verical input groups + // Vertical input groups &.#{$input-group-vertical-name} { display: flex; align-items: stretch; flex-direction: column; & > input { + max-width: 100%; flex-grow: 1; flex-basis: 0px; } @@ -295,6 +297,7 @@ input, textarea, select, button, .#{$button-class-name}, [role="button"] { & > button, [type="button"], & > [type="submit"], & > [type="reset"], & > .#{$button-class-name}, & > [role="button"] { margin: 0; + max-width: 100%; flex: 1 1 auto; text-align: center; border: 0; diff --git a/src/mini/_layout.scss b/src/mini/_layout.scss index ffede15..df2dc8b 100644 --- a/src/mini/_layout.scss +++ b/src/mini/_layout.scss @@ -77,6 +77,7 @@ $card-border-color-var: '--card-border-color' !default; // Grid column specific definition for flexible column. .#{$grid-column-prefix}-#{$size-prefix}, .#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$size-prefix} > * { + max-width: 100%; flex-grow: 1; flex-basis: 0; } @@ -91,6 +92,7 @@ $card-border-color-var: '--card-border-color' !default; } // Grid column specific definition for flexible column. .#{$grid-column-prefix}-#{$size-prefix} { + max-width: 100%; flex-grow: 1; flex-basis: 0; } @@ -100,14 +102,14 @@ $card-border-color-var: '--card-border-color' !default; @if $_include-parent-layout { .#{$grid-column-prefix}-#{$size-prefix}-#{$i}, .#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$size-prefix}-#{$i} > * { - flex-basis: #{($i * 100% / $grid-column-count)}; max-width: #{($i * 100% / $grid-column-count)}; + flex-basis: #{($i * 100% / $grid-column-count)}; } } @else { .#{$grid-column-prefix}-#{$size-prefix}-#{$i} { - flex-basis: #{($i * 100% / $grid-column-count)}; max-width: #{($i * 100% / $grid-column-count)}; + flex-basis: #{($i * 100% / $grid-column-count)}; } } // Offest definitions.