├── pattern-library
    ├── components
    │   ├── button
    │   │   ├── description.md
    │   │   └── default
    │   │   │   ├── description.md
    │   │   │   └── markup.html
    │   ├── label
    │   │   ├── description.md
    │   │   └── default
    │   │   │   ├── description.md
    │   │   │   └── markup.html
    │   ├── check-field
    │   │   ├── description.md
    │   │   ├── checkbox
    │   │   │   ├── description.md
    │   │   │   └── markup.html
    │   │   ├── radio
    │   │   │   ├── description.md
    │   │   │   └── markup.html
    │   │   └── error-state
    │   │   │   ├── description.md
    │   │   │   └── markup.html
    │   ├── input-field
    │   │   ├── tel
    │   │   │   ├── description.md
    │   │   │   └── markup.html
    │   │   ├── text
    │   │   │   ├── description.md
    │   │   │   └── markup.html
    │   │   ├── email
    │   │   │   ├── description.md
    │   │   │   └── markup.html
    │   │   ├── number
    │   │   │   ├── description.md
    │   │   │   └── markup.html
    │   │   ├── search
    │   │   │   ├── description.md
    │   │   │   └── markup.html
    │   │   ├── text-area
    │   │   │   ├── description.md
    │   │   │   └── markup.html
    │   │   ├── error-state
    │   │   │   ├── description.md
    │   │   │   └── markup.html
    │   │   └── description.md
    │   └── select-field
    │   │   ├── description.md
    │   │   ├── error-state
    │   │       ├── description.md
    │   │       └── markup.html
    │   │   └── select-menu
    │   │       ├── description.md
    │   │       └── markup.html
    ├── favicon.png
    ├── assets
    │   ├── js
    │   │   └── patterns.js
    │   └── images
    │   │   └── logo
    │   │       └── logo.svg
    ├── LICENSE.txt
    ├── data.json
    ├── app
    │   ├── js
    │   │   ├── main.min.js
    │   │   └── main.js
    │   └── css
    │   │   ├── styles.min.css
    │   │   └── styles.css
    └── index.html
├── .env.sample
├── astrum-config.json
├── dist
    ├── markup
    │   ├── button
    │   │   └── default
    │   │   │   └── markup.html
    │   ├── input-field
    │   │   ├── tel
    │   │   │   └── markup.html
    │   │   ├── text
    │   │   │   └── markup.html
    │   │   ├── error-state
    │   │   │   └── markup.html
    │   │   ├── number
    │   │   │   └── markup.html
    │   │   ├── search
    │   │   │   └── markup.html
    │   │   ├── text-area
    │   │   │   └── markup.html
    │   │   └── email
    │   │   │   └── markup.html
    │   ├── label
    │   │   └── default
    │   │   │   └── markup.html
    │   ├── check-field
    │   │   ├── checkbox
    │   │   │   └── markup.html
    │   │   ├── radio
    │   │   │   └── markup.html
    │   │   └── error-state
    │   │   │   └── markup.html
    │   └── select-field
    │   │   ├── select-menu
    │   │       └── markup.html
    │   │   └── error-state
    │   │       └── markup.html
    ├── css
    │   ├── boilerform.css.map
    │   ├── boilerform.min.css
    │   └── boilerform.css
    └── js
    │   ├── boilerform.min.js
    │   ├── boilerform.min.js.map
    │   ├── boilerform.js.map
    │   └── boilerform.js
├── .babelrc
├── .github
    ├── PULL_REQUEST_TEMPLATE.md
    └── ISSUE_TEMPLATE.md
├── .gitignore
├── assets
    ├── scss
    │   ├── layouts
    │   │   └── _l-form.scss
    │   ├── _functions.scss
    │   ├── mixins
    │   │   └── _namespace.scss
    │   ├── _helpers.scss
    │   ├── components
    │   │   ├── _c-input-field.scss
    │   │   ├── _c-label.scss
    │   │   ├── _c-button.scss
    │   │   ├── _c-select-field.scss
    │   │   └── _c-check-field.scss
    │   ├── boilerform.scss
    │   ├── _config.scss
    │   └── _reset.scss
    └── js
    │   ├── boilerform.js
    │   └── modules
    │       └── validation.js
├── .eslintrc
├── generator
    └── dist.js
├── LICENSE.txt
├── package.json
├── webpack.config.js
├── readme.md
└── CONTRIBUTING.md


/pattern-library/components/button/description.md:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/pattern-library/components/label/description.md:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.env.sample:
--------------------------------------------------------------------------------
1 | CSS_OUTPUT_PATH=
2 | JS_OUTPUT_PATH=
3 | 


--------------------------------------------------------------------------------
/pattern-library/components/check-field/description.md:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/pattern-library/components/button/default/description.md:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/pattern-library/components/input-field/tel/description.md:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/pattern-library/components/input-field/text/description.md:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/pattern-library/components/label/default/description.md:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/pattern-library/components/select-field/description.md:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/astrum-config.json:
--------------------------------------------------------------------------------
1 | {
2 |     "path": "pattern-library"
3 | }


--------------------------------------------------------------------------------
/pattern-library/components/check-field/checkbox/description.md:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/pattern-library/components/check-field/radio/description.md:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/pattern-library/components/input-field/email/description.md:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/pattern-library/components/input-field/number/description.md:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/pattern-library/components/input-field/search/description.md:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/pattern-library/components/input-field/text-area/description.md:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/pattern-library/components/check-field/error-state/description.md:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/pattern-library/components/input-field/error-state/description.md:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/pattern-library/components/select-field/error-state/description.md:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/pattern-library/components/select-field/select-menu/description.md:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/dist/markup/button/default/markup.html:
--------------------------------------------------------------------------------
1 | <button class="c-button">A button</button>


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |     "presets": ["env"],
3 |     "plugins": ["babel-plugin-add-module-exports"]
4 | }


--------------------------------------------------------------------------------
/pattern-library/components/button/default/markup.html:
--------------------------------------------------------------------------------
1 | <button class="c-button">A button</button>


--------------------------------------------------------------------------------
/dist/markup/input-field/tel/markup.html:
--------------------------------------------------------------------------------
1 | <input type="tel" name="" id="" class="c-input-field" value="01234 567 890" />


--------------------------------------------------------------------------------
/dist/markup/input-field/text/markup.html:
--------------------------------------------------------------------------------
1 | <input type="text" name="" id="" class="c-input-field" value="Generic text" />


--------------------------------------------------------------------------------
/pattern-library/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Andy-set-studio/boilerform/HEAD/pattern-library/favicon.png


--------------------------------------------------------------------------------
/dist/css/boilerform.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":[],"names":[],"mappings":"","file":"../css/boilerform.css","sourceRoot":""}


--------------------------------------------------------------------------------
/pattern-library/components/input-field/tel/markup.html:
--------------------------------------------------------------------------------
1 | <input type="tel" name="" id="" class="c-input-field" value="01234 567 890" />


--------------------------------------------------------------------------------
/pattern-library/components/input-field/text/markup.html:
--------------------------------------------------------------------------------
1 | <input type="text" name="" id="" class="c-input-field" value="Generic text" />


--------------------------------------------------------------------------------
/dist/markup/input-field/error-state/markup.html:
--------------------------------------------------------------------------------
1 | <input type="text" name="" id="" class="[ c-input-field ] [ is-error ]" value="Generic text" />


--------------------------------------------------------------------------------
/dist/markup/input-field/number/markup.html:
--------------------------------------------------------------------------------
1 | <input type="number" name="" id="" min="1" max="999" step="1" class="c-input-field" value="123" />


--------------------------------------------------------------------------------
/dist/markup/input-field/search/markup.html:
--------------------------------------------------------------------------------
1 | <input type="search" name="" id="" autocorrect="off" class="c-input-field" value="Some search terms" />


--------------------------------------------------------------------------------
/dist/markup/input-field/text-area/markup.html:
--------------------------------------------------------------------------------
1 | <textarea name="" id="" class="c-input-field c-input-field--multiline">Some multiline text</textarea>


--------------------------------------------------------------------------------
/dist/markup/label/default/markup.html:
--------------------------------------------------------------------------------
1 | <label for="" class="c-label">A label for a field</label>
2 | <input class="c-input-field" value="fdsfds" />


--------------------------------------------------------------------------------
/pattern-library/components/input-field/error-state/markup.html:
--------------------------------------------------------------------------------
1 | <input type="text" name="" id="" class="[ c-input-field ] [ is-error ]" value="Generic text" />


--------------------------------------------------------------------------------
/pattern-library/components/input-field/number/markup.html:
--------------------------------------------------------------------------------
1 | <input type="number" name="" id="" min="1" max="999" step="1" class="c-input-field" value="123" />


--------------------------------------------------------------------------------
/dist/markup/input-field/email/markup.html:
--------------------------------------------------------------------------------
1 | <input type="email" name="" id="" autocapitalize="none" autocorrect="off" class="c-input-field" value="user@email.com" />


--------------------------------------------------------------------------------
/pattern-library/components/input-field/search/markup.html:
--------------------------------------------------------------------------------
1 | <input type="search" name="" id="" autocorrect="off" class="c-input-field" value="Some search terms" />


--------------------------------------------------------------------------------
/pattern-library/components/input-field/text-area/markup.html:
--------------------------------------------------------------------------------
1 | <textarea name="" id="" class="c-input-field c-input-field--multiline">Some multiline text</textarea>


--------------------------------------------------------------------------------
/pattern-library/components/label/default/markup.html:
--------------------------------------------------------------------------------
1 | <label for="" class="c-label">A label for a field</label>
2 | <input class="c-input-field" value="fdsfds" />


--------------------------------------------------------------------------------
/pattern-library/components/input-field/email/markup.html:
--------------------------------------------------------------------------------
1 | <input type="email" name="" id="" autocapitalize="none" autocorrect="off" class="c-input-field" value="user@email.com" />


--------------------------------------------------------------------------------
/pattern-library/components/input-field/description.md:
--------------------------------------------------------------------------------
1 | Generic input fields with variations for size, placeholders and validation states. Relevant attributes are added to help users input data as efficiently as possible.


--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
 1 | Fixes Issue # (Delete if not applicable)
 2 | 
 3 | ## Proposed Changes
 4 | 
 5 | -
 6 | -
 7 | -
 8 | 
 9 | ## Add a GIF that demonstrates how this Pull Request makes you feel (optional)
10 | ![alt text](Path to image) 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE.md:
--------------------------------------------------------------------------------
 1 | ## Expected Behavior
 2 | 
 3 | 
 4 | ## Actual Behavior
 5 | 
 6 | 
 7 | ## Steps to Reproduce the Problem
 8 | 
 9 | 1.
10 | 1.
11 | 1.
12 | 
13 | ## Specifications
14 | 
15 | - Version:
16 | - Platform:
17 | - Browser:
18 | - Environment/Url: 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Common
 2 | node_modules
 3 | .DS_Store
 4 | .sass-cache
 5 | *.log
 6 | *.scssc
 7 | npm-debug.*
 8 | .env
 9 | 
10 | # Compiled assets
11 | pattern-library/assets/css
12 | 
13 | # Ignore 'sandbox'. This is where you can play around with features etc
14 | sandbox/
15 | 


--------------------------------------------------------------------------------
/pattern-library/assets/js/patterns.js:
--------------------------------------------------------------------------------
1 | (function() {
2 |     var componentSamples = [].slice.call(document.querySelectorAll('.ndpl-component__sample'));
3 | 
4 |     if(componentSamples.length) {
5 |         componentSamples.map(function(item) {
6 |             item.classList.add('boilerform');
7 |         });
8 |     }
9 | }());


--------------------------------------------------------------------------------
/assets/scss/layouts/_l-form.scss:
--------------------------------------------------------------------------------
 1 | /*------------------------------------*\
 2 |     FORM LAYOUT
 3 | 
 4 |     The main form layout that gives
 5 |     you rythm, alignment and flow
 6 | \*------------------------------------*/
 7 | $namespace: ".l-form";
 8 | 
 9 | #{ $namespace } {
10 | 
11 |     @include namespace() {
12 | 
13 |     }
14 | }


--------------------------------------------------------------------------------
/dist/markup/check-field/checkbox/markup.html:
--------------------------------------------------------------------------------
1 | <div class="c-check-field">
2 |     <input type="checkbox" name="checkbox-field" id="checkbox-field" class="c-check-field__input" />
3 |     <label for="checkbox-field" class="c-check-field__decor" aria-hidden="true" role="presentation"></label>
4 |     <label for="checkbox-field" class="c-check-field__label">A checkbox field</label>
5 | </div>


--------------------------------------------------------------------------------
/pattern-library/components/check-field/checkbox/markup.html:
--------------------------------------------------------------------------------
1 | <div class="c-check-field">
2 |     <input type="checkbox" name="checkbox-field" id="checkbox-field" class="c-check-field__input" />
3 |     <label for="checkbox-field" class="c-check-field__decor" aria-hidden="true" role="presentation"></label>
4 |     <label for="checkbox-field" class="c-check-field__label">A checkbox field</label>
5 | </div>


--------------------------------------------------------------------------------
/assets/scss/_functions.scss:
--------------------------------------------------------------------------------
 1 | /*------------------------------------*\
 2 |     COLOR
 3 | 
 4 |     Pass in a group name and a key
 5 |     to get a value. 
 6 | 
 7 |     E.G color(field, background) will return
 8 |     the background item in the field group.
 9 | 
10 |     Colors are defined in $colors in _config.scss
11 | \*------------------------------------*/
12 | @function color($group, $color) {
13 |     @return map-get(map-get($colors, $group), $color);
14 | }


--------------------------------------------------------------------------------
/dist/markup/select-field/select-menu/markup.html:
--------------------------------------------------------------------------------
 1 | <div class="c-select-field">
 2 |     <select name="" id="" class="c-select-field__menu">
 3 |         <option>Select an item</option>
 4 |         <option value="1">Item 1</option>
 5 |         <option value="2">Item 2</option>
 6 |         <option value="3">Item 3</option>
 7 |         <option value="4">Item 5</option>
 8 |     </select>
 9 |     <span class="c-select-field__decor" aria-hidden="true" role="presentation">&dtrif;</span>
10 | </div>


--------------------------------------------------------------------------------
/dist/markup/select-field/error-state/markup.html:
--------------------------------------------------------------------------------
 1 | <div class="[ c-select-field ] [ is-error ]">
 2 |     <select name="" id="" class="c-select-field__menu">
 3 |         <option>Select an item</option>
 4 |         <option value="1">Item 1</option>
 5 |         <option value="2">Item 2</option>
 6 |         <option value="3">Item 3</option>
 7 |         <option value="4">Item 5</option>
 8 |     </select>
 9 |     <span class="c-select-field__decor" aria-hidden="true" role="presentation">&dtrif;</span>
10 | </div>


--------------------------------------------------------------------------------
/pattern-library/components/select-field/select-menu/markup.html:
--------------------------------------------------------------------------------
 1 | <div class="c-select-field">
 2 |     <select name="" id="" class="c-select-field__menu">
 3 |         <option>Select an item</option>
 4 |         <option value="1">Item 1</option>
 5 |         <option value="2">Item 2</option>
 6 |         <option value="3">Item 3</option>
 7 |         <option value="4">Item 5</option>
 8 |     </select>
 9 |     <span class="c-select-field__decor" aria-hidden="true" role="presentation">&dtrif;</span>
10 | </div>


--------------------------------------------------------------------------------
/pattern-library/components/select-field/error-state/markup.html:
--------------------------------------------------------------------------------
 1 | <div class="[ c-select-field ] [ is-error ]">
 2 |     <select name="" id="" class="c-select-field__menu">
 3 |         <option>Select an item</option>
 4 |         <option value="1">Item 1</option>
 5 |         <option value="2">Item 2</option>
 6 |         <option value="3">Item 3</option>
 7 |         <option value="4">Item 5</option>
 8 |     </select>
 9 |     <span class="c-select-field__decor" aria-hidden="true" role="presentation">&dtrif;</span>
10 | </div>


--------------------------------------------------------------------------------
/assets/scss/mixins/_namespace.scss:
--------------------------------------------------------------------------------
 1 | /*------------------------------------*\
 2 |     NAMESPACE
 3 | 
 4 |     This mixin encapsulates CSS within 
 5 |     a namespace to prevent outside
 6 |     conflicts as much as possible.
 7 | \*------------------------------------*/
 8 | @mixin namespace($isRoot: false) {
 9 | 
10 |     @if ($isRoot == true) {
11 |         .boilerform {
12 |             @content;
13 |         }
14 |     }
15 |     @else {
16 |         .boilerform & {
17 |             @content;
18 |         }
19 |     }
20 | }


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |     "parser": "babel-eslint",
 3 |     "env": {
 4 |         "browser": true,
 5 |         "commonjs": true,
 6 |         "es6": true,
 7 |         "node": true
 8 |     },
 9 |     "rules": {
10 |         "no-const-assign": "warn",
11 |         "no-this-before-super": "warn",
12 |         "no-unreachable": "warn",
13 |         "no-unused-vars": "warn",
14 |         "constructor-super": "warn",
15 |         "valid-typeof": "warn",
16 |         "quotes": [2, "single", { "allowTemplateLiterals": true }]
17 |     }
18 | }
19 | 


--------------------------------------------------------------------------------
/assets/js/boilerform.js:
--------------------------------------------------------------------------------
 1 | import Validation from './modules/validation';
 2 | 
 3 | // Import Sass so that webpack picks it up
 4 | require('../scss/boilerform.scss');
 5 | 
 6 | (function() {
 7 | 
 8 |     // Look for child and root forms 
 9 |     const boilerforms = [...document.querySelectorAll('.boilerform form, form.boilerform')];
10 |     
11 |     if(boilerforms.length) {
12 | 
13 |         // Add a validator to each form instance
14 |         boilerforms.map(item => {
15 |             let validationInstance = new Validation(item);
16 | 
17 |             validationInstance.init();
18 |         });  
19 |     }
20 | }());
21 | 


--------------------------------------------------------------------------------
/generator/dist.js:
--------------------------------------------------------------------------------
 1 | var findRemoveSync = require('find-remove');
 2 | var fs = require('fs');
 3 | var ncp  = require('ncp');
 4 | var path = require('path');
 5 | var rimraf = require('rimraf');
 6 | 
 7 | // Delete the markup dist dir
 8 | rimraf(path.join(__dirname, '../dist/markup'), function() {
 9 | 
10 |     // Copy the components from the pattern lib
11 |     ncp(path.join(__dirname, '../pattern-library/components'), path.join(__dirname, '../dist/markup'), function(error) {
12 |         
13 |         if(error) return console.log(error);
14 | 
15 |         // Remove all markdown files
16 |         findRemoveSync(path.join(__dirname, '../dist/markup'), { extensions: '.md' });
17 |     });
18 | });


--------------------------------------------------------------------------------
/assets/scss/_helpers.scss:
--------------------------------------------------------------------------------
 1 | // All input fields share these styles. Also includes select menus
 2 | %c-field-shared-inputs {
 3 |     background: color(field, background);
 4 |     border: 1px solid color(base, border);
 5 |     padding: $input-field-padding;
 6 |     border-radius: $border-radius;
 7 |     font-size: $input-field-font-size;
 8 | }
 9 | 
10 | // Visually hide an element, but allow a screen-reader to see it
11 | %visually-hidden {
12 |     display: block;
13 |     height: 1px;
14 |     width: 1px;
15 |     overflow: hidden;
16 |     clip: rect(1px 1px 1px 1px);
17 |     clip: rect(1px, 1px, 1px, 1px);
18 |     clip-path: inset(1px);
19 |     white-space: nowrap;
20 |     position: absolute;
21 | }
22 | 


--------------------------------------------------------------------------------
/dist/markup/check-field/radio/markup.html:
--------------------------------------------------------------------------------
 1 | <div class="c-check-field c-check-field--radio">
 2 |     <input type="radio" name="checkbox-field" id="checkbox-radio-field-1" class="c-check-field__input" />
 3 |     <label for="checkbox-radio-field-1" class="c-check-field__decor" aria-hidden="true" role="presentation"></label>
 4 |     <label for="checkbox-radio-field-1" class="c-check-field__label">A radio button</label>
 5 | </div>
 6 | <div class="c-check-field c-check-field--radio">
 7 |     <input type="radio" name="checkbox-field" id="checkbox-radio-field-2" class="c-check-field__input" />
 8 |     <label for="checkbox-radio-field-2" class="c-check-field__decor" aria-hidden="true" role="presentation"></label>
 9 |     <label for="checkbox-radio-field-2" class="c-check-field__label">Another radio button</label>
10 | </div>


--------------------------------------------------------------------------------
/dist/markup/check-field/error-state/markup.html:
--------------------------------------------------------------------------------
 1 | <div class="[ c-check-field ] [ is-error ]">
 2 |     <input type="checkbox" name="checkbox-error-field" id="checkbox-error-field" class="c-check-field__input" />
 3 |     <label for="checkbox-error-field" class="c-check-field__decor" aria-hidden="true" role="presentation"></label>
 4 |     <label for="checkbox-error-field" class="c-check-field__label">A checkbox field</label>
 5 | </div>
 6 | <div class="[ c-check-field c-check-field--radio ] [ is-error ]">
 7 |     <input type="radio" name="radio-error-field" id="radio-error-field" class="c-check-field__input" />
 8 |     <label for="radio-error-field" class="c-check-field__decor" aria-hidden="true" role="presentation"></label>
 9 |     <label for="radio-error-field" class="c-check-field__label">A radio button</label>
10 | </div>
11 | 


--------------------------------------------------------------------------------
/pattern-library/components/check-field/radio/markup.html:
--------------------------------------------------------------------------------
 1 | <div class="c-check-field c-check-field--radio">
 2 |     <input type="radio" name="checkbox-field" id="checkbox-radio-field-1" class="c-check-field__input" />
 3 |     <label for="checkbox-radio-field-1" class="c-check-field__decor" aria-hidden="true" role="presentation"></label>
 4 |     <label for="checkbox-radio-field-1" class="c-check-field__label">A radio button</label>
 5 | </div>
 6 | <div class="c-check-field c-check-field--radio">
 7 |     <input type="radio" name="checkbox-field" id="checkbox-radio-field-2" class="c-check-field__input" />
 8 |     <label for="checkbox-radio-field-2" class="c-check-field__decor" aria-hidden="true" role="presentation"></label>
 9 |     <label for="checkbox-radio-field-2" class="c-check-field__label">Another radio button</label>
10 | </div>


--------------------------------------------------------------------------------
/pattern-library/components/check-field/error-state/markup.html:
--------------------------------------------------------------------------------
 1 | <div class="[ c-check-field ] [ is-error ]">
 2 |     <input type="checkbox" name="checkbox-error-field" id="checkbox-error-field" class="c-check-field__input" />
 3 |     <label for="checkbox-error-field" class="c-check-field__decor" aria-hidden="true" role="presentation"></label>
 4 |     <label for="checkbox-error-field" class="c-check-field__label">A checkbox field</label>
 5 | </div>
 6 | <div class="[ c-check-field c-check-field--radio ] [ is-error ]">
 7 |     <input type="radio" name="radio-error-field" id="radio-error-field" class="c-check-field__input" />
 8 |     <label for="radio-error-field" class="c-check-field__decor" aria-hidden="true" role="presentation"></label>
 9 |     <label for="radio-error-field" class="c-check-field__label">A radio button</label>
10 | </div>
11 | 


--------------------------------------------------------------------------------
/assets/scss/components/_c-input-field.scss:
--------------------------------------------------------------------------------
 1 | /*------------------------------------*\
 2 |     INPUT FIELD COMPONENT
 3 | 
 4 |     All input based form field elements
 5 | \*------------------------------------*/
 6 | $namespace: ".c-input-field";
 7 | 
 8 | #{ $namespace } {
 9 | 
10 |     @include namespace() {
11 | 
12 |         @extend %c-field-shared-inputs;
13 | 
14 |         // Reduce right-hand padding for number inputs
15 |         &[type="number"] {
16 |             padding-right: #{ $input-field-padding / 2 };
17 |         }
18 | 
19 |         // Multiline fields like <textarea> etc
20 |         &--multiline {
21 |             vertical-align: top;
22 |             overflow: auto;
23 |             width: 100%;
24 | 
25 |             &:not([rows]) {
26 |                 min-height: $multiline-min-height;
27 |             }
28 |         }
29 |     }
30 | }


--------------------------------------------------------------------------------
/assets/scss/components/_c-label.scss:
--------------------------------------------------------------------------------
 1 | /*------------------------------------*\
 2 |     LABEL COMPONENT
 3 | 
 4 |     A simple form label
 5 | \*------------------------------------*/
 6 | $namespace: ".c-label";
 7 | 
 8 | #{ $namespace } {
 9 |     
10 |     @include namespace() {
11 |         display: inline;
12 |         font-family: $base-font-family;
13 |         font-weight: 700;
14 |         font-size: 0.88rem;
15 | 
16 |         // Only add a pointer cursor if there's a for attribute
17 |         &[for] {
18 |             cursor: pointer;
19 |         }
20 | 
21 |         // Create a line break
22 |         &:after {
23 |             content: "\A";
24 |             white-space: pre;
25 |         }
26 | 
27 |         // Add space between a label and a field
28 |         & + [class*="field"] {
29 |             margin-top: 2px;
30 |         }
31 |     }
32 | }


--------------------------------------------------------------------------------
/assets/scss/components/_c-button.scss:
--------------------------------------------------------------------------------
 1 | /*------------------------------------*\
 2 |     BUTTON COMPONENT
 3 | 
 4 |     Base button styles and reset
 5 | \*------------------------------------*/
 6 | $namespace: ".c-button";
 7 | 
 8 | #{ $namespace } {
 9 | 
10 |     @include namespace() {
11 |         
12 |         display: inline-block;
13 |         border: none;
14 |         padding: 0;
15 |         margin: 0;
16 |         text-decoration: none;
17 |         background: color(button, background);
18 |         color: color(button, text);
19 |         padding: $button-padding;
20 |         font-family: $base-font-family;
21 |         font-size: 1rem;
22 |         border-radius: $border-radius;
23 |         cursor: pointer;
24 |         text-align: center;
25 |         -webkit-appearance: none;
26 |         -moz-appearance: none;
27 | 
28 |         &:hover,
29 |         &:focus {
30 |             background: color(button, background--hover);
31 |         }
32 |     }
33 | }


--------------------------------------------------------------------------------
/assets/scss/boilerform.scss:
--------------------------------------------------------------------------------
 1 | // Pull config 
 2 | @import "config";
 3 | 
 4 | // Mixins
 5 | @import "mixins/namespace";
 6 | 
 7 | // Functions
 8 | @import "functions";
 9 | 
10 | // Helpers
11 | @import "helpers";
12 | 
13 | // Resets 
14 | @import "reset";
15 | 
16 | // Components
17 | @import "components/c-button";
18 | @import "components/c-check-field";
19 | @import "components/c-input-field";
20 | @import "components/c-label";
21 | @import "components/c-select-field";
22 | 
23 | // Layouts
24 | @import "layouts/l-form";
25 | 
26 | // Shared styles
27 | @include namespace(true) {
28 | 
29 |     // Override border color for errors
30 |     .is-error {
31 |         &,
32 |         [class*="menu"],
33 |         [class*="check"] {
34 |             border-color: color(state, error);
35 |             
36 |             // Remove default focus and replace with a heavy shadow if invalid
37 |             &:focus {
38 |                 outline: none;
39 |                 box-shadow: 0 0 0 2px color(state, error);
40 |             }
41 |         }
42 |     }
43 | }


--------------------------------------------------------------------------------
/assets/scss/_config.scss:
--------------------------------------------------------------------------------
 1 | // Colors
 2 | $colors: (
 3 |     base: (
 4 |         text: #141414,
 5 |         border: #cccccc 
 6 |     ),
 7 |     button: (
 8 |         background: #666666,
 9 |         background--hover: #888888,
10 |         text: #ffffff
11 |     ),
12 |     check: (
13 |         decor: #eeeeee,
14 |         decor--active: #aaaaaa,
15 |         decor__inner: #888888
16 |     ),
17 |     field: (
18 |         background: #ffffff
19 |     ),
20 |     state: (
21 |         error: #cf0b00
22 |     )
23 | );
24 | 
25 | // Metrics
26 | $button-padding: 11px 25px 10px 25px;
27 | $check-field-decor-size: 20px;
28 | $check-field-flow: 10px;
29 | $check-field-label-padding: 3px 0 0 10px;
30 | $input-field-vertical-padding: 10px;
31 | $input-field-horizontal-padding: 15px;
32 | $input-field-padding: #{ $input-field-vertical-padding + 1 } $input-field-horizontal-padding $input-field-vertical-padding $input-field-horizontal-padding;
33 | $multiline-min-height: 80px;
34 | 
35 | // Decorative
36 | $border-radius: 2px;
37 | 
38 | // Typography 
39 | $base-font-family: sans-serif;
40 | $base-font-size: 16px;
41 | $input-field-font-size: 1rem;


--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 hankchizljaw.io and other contributors
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/pattern-library/LICENSE.txt:
--------------------------------------------------------------------------------
 1 | Copyright (c) Astrum by No Divide Studio Ltd (http://nodividestudio.com)
 2 | 
 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of
 4 | this software and associated documentation files (the "Software"), to deal in
 5 | the Software without restriction, including without limitation the rights to
 6 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
 7 | of the Software, and to permit persons to whom the Software is furnished to do
 8 | so, subject to the following conditions:
 9 | 
10 | The above copyright notice and this permission notice shall be included in all
11 | copies or substantial portions of the Software.
12 | 
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19 | SOFTWARE.


--------------------------------------------------------------------------------
/assets/scss/components/_c-select-field.scss:
--------------------------------------------------------------------------------
 1 | /*------------------------------------*\
 2 |     SELECT FIELD
 3 | 
 4 |     Option driven fields such as 
 5 |     <select> menus
 6 | \*------------------------------------*/
 7 | $namespace: ".c-select-field";
 8 | 
 9 | #{ $namespace } {
10 |     
11 |     @include namespace() {
12 |         
13 |         display: inline-block;
14 |         position: relative;
15 | 
16 |         &__menu {
17 |             @extend %c-field-shared-inputs;
18 | 
19 |             -webkit-appearance: none;
20 |             -moz-appearance: none;
21 |             padding-right: #{ $input-field-horizontal-padding * 3 };
22 | 
23 |             // Undo Firefox focus ring 
24 |             &:-moz-focusring {
25 |                 color: transparent;
26 |                 text-shadow: 0 0 0 color(base, text);
27 |             }
28 | 
29 |             // Remove arrow in IE
30 |             &::-ms-expand {
31 |                 display: none;
32 |             }
33 |         }
34 | 
35 |         &__decor {
36 |             position: absolute;
37 |             top: 50%;
38 |             right: $input-field-horizontal-padding;
39 |             pointer-events: none;
40 |         }
41 |     }
42 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "boilerform",
 3 |   "version": "1.1.1",
 4 |   "description": "A little collection of common form elements that have base markup and CSS set up for you.",
 5 |   "scripts": {
 6 |     "sass:dist-min": "uglifycss dist/css/boilerform.css > dist/css/boilerform.min.css",
 7 |     "watch": "webpack --watch",
 8 |     "build": "NODE_ENV=production webpack && npm run sass:dist-min && node generator/dist.js && echo Done 👍🏼"
 9 |   },
10 |   "repository": {
11 |     "type": "git",
12 |     "url": "git+https://github.com/hankchizljaw/boilerform.git"
13 |   },
14 |   "author": "hankchizljaw",
15 |   "license": "MIT",
16 |   "bugs": {
17 |     "url": "https://github.com/hankchizljaw/boilerform/issues"
18 |   },
19 |   "homepage": "https://github.com/hankchizljaw/boilerform#readme",
20 |   "devDependencies": {
21 |     "babel-core": "^6.26.0",
22 |     "babel-loader": "^7.1.2",
23 |     "babel-plugin-add-module-exports": "^0.2.1",
24 |     "babel-preset-env": "^1.6.1",
25 |     "css-loader": "^0.28.7",
26 |     "dotenv": "^5.0.1",
27 |     "extract-text-webpack-plugin": "^3.0.2",
28 |     "find-remove": "^1.2.0",
29 |     "ncp": "^2.0.0",
30 |     "node-sass": "^4.7.2",
31 |     "rimraf": "^2.6.2",
32 |     "sass-loader": "^6.0.6",
33 |     "uglifycss": "0.0.27",
34 |     "webpack": "^3.10.0"
35 |   }
36 | }
37 | 


--------------------------------------------------------------------------------
/assets/scss/_reset.scss:
--------------------------------------------------------------------------------
 1 | @include namespace(true) {
 2 |     
 3 |     // Set base pixel size for REM units to work off
 4 |     font-size: $base-font-size;
 5 |     
 6 |     // Set the base color 
 7 |     color: color(base, text);
 8 | 
 9 |     // Set base border color
10 |     border-color: color(base, border);
11 | 
12 |     // Box sizing border-box FTW
13 |     &,
14 |     & * {
15 |         box-sizing: border-box;
16 |     }
17 |     
18 |     // All field elements
19 |     [class*="-field"] {
20 |         margin: 0;
21 |         display: inline-block;
22 |         vertical-align: middle;
23 |         white-space: normal;
24 |         line-height: 1.1;
25 |         font-family: $base-font-family;
26 |     }
27 | 
28 |     // All decorative elements 
29 |     [class*="decor"] {
30 |         line-height: 0;
31 |     }
32 | 
33 |     // Turn off the recent search in WebKit.
34 |     ::-webkit-search-decoration {
35 |         display: none;
36 |     }
37 | 
38 |     // Normalise form field line-height in WebKit
39 |     input::-webkit-input-placeholder,
40 |     textarea::-webkit-input-placeholder,
41 |     select::-webkit-input-placeholder {
42 |         line-height: normal;
43 |     }
44 | 
45 |     // Make a search box appear like a text box
46 |     input[type="search"] {
47 |         -webkit-appearance: textfield;
48 |     }
49 | }


--------------------------------------------------------------------------------
/assets/scss/components/_c-check-field.scss:
--------------------------------------------------------------------------------
 1 | /*------------------------------------*\
 2 |     CHECK FIELD COMPONENT
 3 | 
 4 |     Radio buttons and checkboxes
 5 | \*------------------------------------*/
 6 | $namespace: ".c-check-field";
 7 | 
 8 | #{ $namespace } {
 9 | 
10 |     @include namespace() {
11 |         display: flex;
12 |         flex-direction: row;
13 |         align-items: flex-start;
14 | 
15 |         // Visually hide the input
16 |         &__input {
17 |             @extend %visually-hidden;
18 |         }
19 | 
20 |         &__decor {
21 |             display: block;
22 |             width: $check-field-decor-size;
23 |             height: $check-field-decor-size;
24 |             flex-shrink: 0;
25 |             background: color(check, decor);
26 |             border: 1px solid color(base, border);
27 |             border-radius: $border-radius;
28 |             position: relative;
29 |             cursor: pointer;
30 | 
31 |             &:after {
32 |                 content: "";
33 |                 speak: none;
34 |                 display: block;
35 |                 opacity: 0;
36 |                 width: 70%;
37 |                 height: 70%;
38 |                 position: absolute;
39 |                 top: 15%;
40 |                 left: 15%;
41 |                 background: color(check, decor__inner);
42 |                 border-radius: #{ $border-radius / 2 };
43 |             }
44 |         }
45 | 
46 |         &__label {
47 |             padding: $check-field-label-padding;
48 |             cursor: pointer;
49 |         }
50 | 
51 |         // Radio modifier
52 |         &--radio #{ $namespace }__decor {
53 |             &,
54 |             &:after {
55 |                 border-radius: 50%;
56 |             }
57 |         }
58 | 
59 |         // Checked state
60 |         &__input:checked ~ [class*="decor"] {
61 |             &:after {
62 |                 opacity: 1;
63 |             }
64 |         }
65 | 
66 |         // Focused state
67 |         &__input:focus ~ [class*="decor"] {
68 |             outline: 1px dotted #212121;
69 |             outline: 5px auto -webkit-focus-ring-color;
70 |         }
71 | 
72 |         // Flow between instances
73 |         & + #{ $namespace } {
74 |             padding-top: $check-field-flow;
75 |         }
76 |     }
77 | }
78 | 


--------------------------------------------------------------------------------
/assets/js/modules/validation.js:
--------------------------------------------------------------------------------
 1 | export default class Validation {
 2 | 
 3 |     /**
 4 |      * Load up an instance of Validation
 5 |      * @param {HTMLFormElement} baseForm 
 6 |      */
 7 |     constructor(baseForm) {
 8 |         this.baseForm = baseForm;
 9 | 
10 |         // Load child input elements
11 |         this.inputElems = [...baseForm.querySelectorAll('input, textarea, select')];
12 |     }
13 | 
14 |     /**
15 |      * Public init method
16 |      */
17 |     init() {
18 |         let self = this;
19 | 
20 |         self.bind();
21 |     }
22 | 
23 |     /**
24 |      * Bind events to input elements
25 |      */
26 |     bind() {
27 |         let self = this;
28 | 
29 |         // Add an invalid listener that 
30 |         self.inputElems.map(item => {
31 |             item.addEventListener('invalid', () => {
32 |                 self.processValidity(item);
33 |                 self.checkSiblings(item);
34 |             }, false);
35 |         });
36 |     }
37 | 
38 |     /**
39 |      * Toggle the visual state of an item based on the based state key
40 |      * @param {HTMLElement} item 
41 |      * @param {String} state 
42 |      */
43 |     process(item, state = 'invalid') {
44 | 
45 |         switch(state) {
46 |             case 'invalid':
47 |                 item.classList.add('is-error');
48 |                 break;
49 |             default: 
50 |                 item.classList.remove('is-error');
51 |                 break;
52 |         }
53 |     }
54 | 
55 |     /**
56 |      * Filter sibling elements and run them through the validity checker
57 |      *
58 |      * @param {HTMLFormElement} exludedField
59 |      */
60 |     checkSiblings(exludedField) {
61 |         let self = this;
62 | 
63 |         self.inputElems
64 |             .filter(item => item !== exludedField)
65 |             .map(item => self.processValidity(item));
66 |     }
67 | 
68 |     /**
69 |      * Run some checks to determine if the passed item is valid or not
70 |      * @param {HTMLElement} item 
71 |      */
72 |     processValidity(item) {
73 |         let self = this;
74 | 
75 |         // If an item is valid, run the processor and bail
76 |         if(item.validity.valid) {
77 |             self.process(item, 'valid');
78 |             return;
79 |         }
80 | 
81 |         // If we're here, it's invalid
82 |         self.process(item, 'invalid');
83 |     }
84 | };
85 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | // Pull in .env settings 
 2 | require('dotenv').config();
 3 | 
 4 | // Create CSS and JS output paths 
 5 | var CSS_OUTPUT_PATH = process.env.CSS_OUTPUT_PATH ? process.env.CSS_OUTPUT_PATH : '../css/boilerform.css';
 6 | var JS_OUTPUT_PATH = process.env.JS_OUTPUT_PATH ? process.env.JS_OUTPUT_PATH : '/dist/js';
 7 | 
 8 | // Define webpack stuff
 9 | var ExtractTextPlugin = require('extract-text-webpack-plugin');
10 | var isProduction = process.env.NODE_ENV === 'production';
11 | var path = require('path');
12 | var plugins = [];
13 | var settings = {
14 |     libraryName: 'boilerform',
15 |     inputs: {
16 |         js: {
17 |             entryPath: '/assets/js/boilerform.js'
18 |         }
19 |     },
20 |     outputs: {
21 |         js: {
22 |             fileName: 'boilerform.js',
23 |             minFileName: 'boilerform.min.js',
24 |             path: JS_OUTPUT_PATH
25 |         },
26 |         css: {
27 |             path: CSS_OUTPUT_PATH 
28 |         }
29 |     }
30 | };
31 | var webpack = require('webpack');
32 | 
33 | if(isProduction) {
34 |     plugins.push(new webpack.optimize.UglifyJsPlugin({ minimize: true }));
35 | }
36 | 
37 | // Create an extract text plugin instance for Sass
38 | var extractPlugin = new ExtractTextPlugin(settings.outputs.css.path);
39 | 
40 | plugins.push(extractPlugin);
41 | 
42 | module.exports = {
43 |     entry: path.join(__dirname, settings.inputs.js.entryPath),
44 |     devtool: 'source-map',
45 |     output: {
46 |         path: path.join(__dirname, settings.outputs.js.path),
47 |         filename: (isProduction ? settings.outputs.js.minFileName : settings.outputs.js.fileName),
48 |         library: settings.libraryName,
49 |         libraryTarget: 'umd',
50 |         umdNamedDefine: true
51 |     },
52 |     module: {
53 |         rules: [
54 |             {
55 |                 test: /\.js$/,
56 |                 exclude: /node_modules/,
57 |                 use: [
58 |                     {
59 |                         loader: 'babel-loader'
60 |                     }
61 |                 ]
62 |             },
63 |             {
64 |                 test: /\.scss$/,
65 |                 use: extractPlugin.extract({
66 |                     use: ['css-loader', 'sass-loader']
67 |                 })
68 |             }
69 |         ]
70 |     },
71 |     resolve: {
72 |         extensions: ['.js']
73 |     },
74 |     plugins: plugins
75 | };
76 | 


--------------------------------------------------------------------------------
/dist/js/boilerform.min.js:
--------------------------------------------------------------------------------
1 | !function(e,r){"object"==typeof exports&&"object"==typeof module?module.exports=r():"function"==typeof define&&define.amd?define("boilerform",[],r):"object"==typeof exports?exports.boilerform=r():e.boilerform=r()}("undefined"!=typeof self?self:this,function(){return function(e){function r(n){if(t[n])return t[n].exports;var i=t[n]={i:n,l:!1,exports:{}};return e[n].call(i.exports,i,i.exports,r),i.l=!0,i.exports}var t={};return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:n})},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},r.p="",r(r.s=0)}([function(e,r,t){"use strict";function n(e){if(Array.isArray(e)){for(var r=0,t=Array(e.length);r<e.length;r++)t[r]=e[r];return t}return Array.from(e)}var i=t(1),o=function(e){return e&&e.__esModule?e:{default:e}}(i);t(2),function(){var e=[].concat(n(document.querySelectorAll(".boilerform form, form.boilerform")));e.length&&e.map(function(e){new o.default(e).init()})}()},function(e,r,t){"use strict";function n(e){if(Array.isArray(e)){for(var r=0,t=Array(e.length);r<e.length;r++)t[r]=e[r];return t}return Array.from(e)}function i(e,r){if(!(e instanceof r))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(r,"__esModule",{value:!0});var o=function(){function e(e,r){for(var t=0;t<r.length;t++){var n=r[t];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(r,t,n){return t&&e(r.prototype,t),n&&e(r,n),r}}(),u=function(){function e(r){i(this,e),this.baseForm=r,this.inputElems=[].concat(n(r.querySelectorAll("input, textarea, select")))}return o(e,[{key:"init",value:function(){this.bind()}},{key:"bind",value:function(){var e=this;e.inputElems.map(function(r){r.addEventListener("invalid",function(){e.processValidity(r),e.checkSiblings(r)},!1)})}},{key:"process",value:function(e){switch(arguments.length>1&&void 0!==arguments[1]?arguments[1]:"invalid"){case"invalid":e.classList.add("is-error");break;default:e.classList.remove("is-error")}}},{key:"checkSiblings",value:function(e){var r=this;r.inputElems.filter(function(r){return r!==e}).map(function(e){return r.processValidity(e)})}},{key:"processValidity",value:function(e){var r=this;if(e.validity.valid)return void r.process(e,"valid");r.process(e,"invalid")}}]),e}();r.default=u,e.exports=r.default},function(e,r){}])});


--------------------------------------------------------------------------------
/dist/js/boilerform.min.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["webpack:///webpack/universalModuleDefinition","webpack:///webpack/bootstrap 3f861ba7b195c39a98d4"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AACD,O;ACVA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;;AAGA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAK;AACL;AACA;;AAEA;AACA;AACA;AACA,mCAA2B,0BAA0B,EAAE;AACvD,yCAAiC,eAAe;AAChD;AACA;AACA;;AAEA;AACA,8DAAsD,+DAA+D;;AAErH;AACA;;AAEA;AACA","file":"boilerform.min.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"boilerform\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"boilerform\"] = factory();\n\telse\n\t\troot[\"boilerform\"] = factory();\n})(typeof self !== 'undefined' ? self : this, function() {\nreturn \n\n\n// WEBPACK FOOTER //\n// webpack/universalModuleDefinition"," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 0);\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap 3f861ba7b195c39a98d4"],"sourceRoot":""}


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
 1 | # Boilerform
 2 | 
 3 | <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/174183/share.png" style="max-width: 100%" alt="The Boilerform logo" />
 4 | 
 5 | Boilerform is a little HTML and CSS boilerplate to take the pain away from working with forms.
 6 | 
 7 | By providing baseline BEM structured CSS and appropriate attributes on elements: Boilerform gives you a head start building forms in the best possible way with a view to being dropped into most projects.
 8 | 
 9 | The idea was first thought-up by [@chriscoyier](https://twitter.com/chriscoyier) on [CSS Tricks](https://css-tricks.com/boilerform).
10 | 
11 | 🌍 <https://boilerform.hankchizljaw.com>
12 | 
13 | 
14 | ## Getting started
15 | Boilerform is designed to be straight-forward to implement. In its most basic form, you can drop a CSS file into your head with the following snippet:
16 | 
17 | ```html
18 | <link rel="stylesheet" media="all" href="https://cdn.jsdelivr.net/gh/hankchizljaw/boilerform@master/dist/css/boilerform.min.css?v=1.1.1" />
19 | ```
20 | 
21 | Then all you need to do is wrap your elements in a `.boilerform` wrapper. It could be something like this:
22 | 
23 | ```html
24 | <div class="boilerform">
25 |     <!-- Add all of your boilerform elements in here 👍 -->
26 | </div>
27 | ```
28 | 
29 | You can also take compiled CSS and HTML from the [dist directory](https://github.com/hankchizljaw/boilerform/tree/master/dist/) of this repository, if that's what you prefer.
30 | 
31 | If you want a bit more control, you can work with the [Sass](https://github.com/hankchizljaw/boilerform/tree/master/assets/scss) and [Pattern Library](https://github.com/hankchizljaw/boilerform/tree/master/pattern-library). This is where the source of Boilerform lives.
32 | 
33 | To compile assets, you can run the following commands in your terminal:
34 | 
35 | - `npm run watch` will compile your assets and watch for further changes
36 | - `npm run build` will compile your assets into a production ready state in the `dist` directory
37 | 
38 | The pattern library is powered by [Astrum](http://astrum.nodividestudio.com/). You can find [detailed documentation here](https://github.com/NoDivide/Astrum).
39 | 
40 | ## Validation interface
41 | 
42 | There's a basic validation interface available with Boilerform which extends the native HTML validation facility with a few visual tweaks.
43 | ### Getting started
44 | 
45 | First of all, you need the JavaScript in your project. You can either take the [source code](https://github.com/hankchizljaw/boilerform/blob/master/assets/js/modules/validation.js) and add to your project, or add the dist version to bottom of your page.
46 | 
47 | ```html
48 | <script src="https://cdn.jsdelivr.net/gh/hankchizljaw/boilerform@master/dist/js/boilerform.min.js?v=1.1.1" async defer></script>
49 | ```
50 | 
51 | Now that you've got the script, it'll work, as long as your elements have the `required` attribute, which will allow them to fire an `invalid` event. You'll also need to make sure your `<form>` elements either live in a `.boilerform` parent element or have the `.boilerform` class.
52 | 
53 | ---
54 | 
55 | Made with ❤️ by [HankChizlJaw](https://twitter.com/hankchizljaw) and [friends](https://github.com/hankchizljaw/boilerform/graphs/contributors).
56 | 


--------------------------------------------------------------------------------
/dist/css/boilerform.min.css:
--------------------------------------------------------------------------------
1 | .boilerform .c-input-field,.boilerform .c-select-field__menu{background:#fff;border:1px solid #ccc;padding:11px 15px 10px 15px;border-radius:2px;font-size:1rem}.boilerform .c-check-field__input{display:block;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px);clip-path:inset(1px);white-space:nowrap;position:absolute}.boilerform{font-size:16px;color:#141414;border-color:#ccc}.boilerform,.boilerform *{box-sizing:border-box}.boilerform [class*="-field"]{margin:0;display:inline-block;vertical-align:middle;white-space:normal;line-height:1.1;font-family:sans-serif}.boilerform [class*="decor"]{line-height:0}.boilerform ::-webkit-search-decoration{display:none}.boilerform input::-webkit-input-placeholder,.boilerform textarea::-webkit-input-placeholder,.boilerform select::-webkit-input-placeholder{line-height:normal}.boilerform input[type="search"]{-webkit-appearance:textfield}.boilerform .c-button{display:inline-block;border:0;padding:0;margin:0;text-decoration:none;background:#666;color:#fff;padding:11px 25px 10px 25px;font-family:sans-serif;font-size:1rem;border-radius:2px;cursor:pointer;text-align:center;-webkit-appearance:none;-moz-appearance:none}.boilerform .c-button:hover,.boilerform .c-button:focus{background:#888}.boilerform .c-check-field{display:flex;flex-direction:row;align-items:flex-start}.boilerform .c-check-field__decor{display:block;width:20px;height:20px;flex-shrink:0;background:#eee;border:1px solid #ccc;border-radius:2px;position:relative;cursor:pointer}.boilerform .c-check-field__decor:after{content:"";speak:none;display:block;opacity:0;width:70%;height:70%;position:absolute;top:15%;left:15%;background:#888;border-radius:1px}.boilerform .c-check-field__label{padding:3px 0 0 10px;cursor:pointer}.boilerform .c-check-field--radio .c-check-field__decor,.boilerform .c-check-field--radio .c-check-field__decor:after{border-radius:50%}.boilerform .c-check-field__input:checked ~ [class*="decor"]:after{opacity:1}.boilerform .c-check-field__input:focus ~ [class*="decor"]{outline:1px dotted #212121;outline:5px auto -webkit-focus-ring-color}.boilerform .c-check-field+.c-check-field{padding-top:10px}.boilerform .c-input-field[type="number"]{padding-right:11px 15px 10px 15px / 2}.boilerform .c-input-field--multiline{vertical-align:top;overflow:auto;width:100%}.boilerform .c-input-field--multiline:not([rows]){min-height:80px}.boilerform .c-label{display:inline;font-family:sans-serif;font-weight:700;font-size:.88rem}.boilerform .c-label[for]{cursor:pointer}.boilerform .c-label:after{content:"\A";white-space:pre}.boilerform .c-label+[class*="field"]{margin-top:2px}.boilerform .c-select-field{display:inline-block;position:relative}.boilerform .c-select-field__menu{-webkit-appearance:none;-moz-appearance:none;padding-right:45px}.boilerform .c-select-field__menu:-moz-focusring{color:transparent;text-shadow:0 0 0 #141414}.boilerform .c-select-field__menu::-ms-expand{display:none}.boilerform .c-select-field__decor{position:absolute;top:50%;right:15px;pointer-events:none}.boilerform .is-error,.boilerform .is-error [class*="menu"],.boilerform .is-error [class*="check"]{border-color:#cf0b00}.boilerform .is-error:focus,.boilerform .is-error [class*="menu"]:focus,.boilerform .is-error [class*="check"]:focus{outline:0;box-shadow:0 0 0 2px #cf0b00}
2 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # Contributing
 2 | 
 3 | When contributing to this repository, please first discuss the change you wish to make via issue,
 4 | email, or any other method with the owners of this repository before making a change. 
 5 | 
 6 | Please note we have a code of conduct, please follow it in all your interactions with the project.
 7 | 
 8 | ## Pull Request Process
 9 | 
10 | 1. Ensure any install or build dependencies are removed before the end of the layer when doing a 
11 |    build.
12 | 2. Ensure your work is thoroughly tested, to the best of your abilities
13 | 2. You may merge the Pull Request in once you have the sign-off from a maintainer
14 | 
15 | ## Code of Conduct
16 | 
17 | ### Our Pledge
18 | 
19 | In the interest of fostering an open and welcoming environment, we as
20 | contributors and maintainers pledge to making participation in our project and
21 | our community a harassment-free experience for everyone, regardless of age, body
22 | size, disability, ethnicity, gender identity and expression, level of experience,
23 | nationality, personal appearance, race, religion, or sexual identity and
24 | orientation.
25 | 
26 | ### Our Standards
27 | 
28 | Examples of behavior that contributes to creating a positive environment
29 | include:
30 | 
31 | - Using welcoming and inclusive language
32 | - Being respectful of differing viewpoints and experiences
33 | - Gracefully accepting constructive criticism
34 | - Focusing on what is best for the community
35 | - Showing empathy towards other community members
36 | 
37 | Examples of unacceptable behavior by participants include:
38 | 
39 | - The use of sexualized language or imagery and unwelcome sexual attention or
40 | advances
41 | - Trolling, insulting/derogatory comments, and personal or political attacks
42 | - Public or private harassment
43 | - Publishing others' private information, such as a physical or electronic
44 |   address, without explicit permission
45 | - Other conduct which could reasonably be considered inappropriate in a
46 |   professional setting
47 | 
48 | ### Our Responsibilities
49 | 
50 | Project maintainers are responsible for clarifying the standards of acceptable
51 | behavior and are expected to take appropriate and fair corrective action in
52 | response to any instances of unacceptable behavior.
53 | 
54 | Project maintainers have the right and responsibility to remove, edit, or
55 | reject comments, commits, code, wiki edits, issues, and other contributions
56 | that are not aligned to this Code of Conduct, or to ban temporarily or
57 | permanently any contributor for other behaviors that they deem inappropriate,
58 | threatening, offensive, or harmful.
59 | 
60 | ### Scope
61 | 
62 | This Code of Conduct applies both within project spaces and in public spaces
63 | when an individual is representing the project or its community. Examples of
64 | representing a project or community include using an official project e-mail
65 | address, posting via an official social media account, or acting as an appointed
66 | representative at an online or offline event. Representation of a project may be
67 | further defined and clarified by project maintainers.
68 | 
69 | ### Enforcement
70 | 
71 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
72 | reported by contacting the project team at andy@hankchizljaw.io. All
73 | complaints will be reviewed and investigated and will result in a response that
74 | is deemed necessary and appropriate to the circumstances. The project team is
75 | obligated to maintain confidentiality with regard to the reporter of an incident.
76 | Further details of specific enforcement policies may be posted separately.
77 | 
78 | Project maintainers who do not follow or enforce the Code of Conduct in good
79 | faith may face temporary or permanent repercussions as determined by other
80 | members of the project's leadership.
81 | 
82 | ### Attribution
83 | 
84 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
85 | available at [http://contributor-covenant.org/version/1/4][version]
86 | 
87 | [homepage]: http://contributor-covenant.org
88 | [version]: http://contributor-covenant.org/version/1/4/


--------------------------------------------------------------------------------
/pattern-library/data.json:
--------------------------------------------------------------------------------
  1 | {
  2 |     "project_logo": "/assets/images/logo/logo.svg",
  3 |     "project_favicon": "favicon.png",
  4 |     "project_name": "Boilerform",
  5 |     "project_url": null,
  6 |     "copyright_start_year": null,
  7 |     "client_name": null,
  8 |     "client_url": null,
  9 |     "creators": [
 10 |         {
 11 |             "name": "Boilerform site",
 12 |             "url": "//boilerform.hankchizljaw.com"
 13 |         },
 14 |         {
 15 |             "name": "Boilerform repo",
 16 |             "url": "//github.com/hankchizljaw/boilerform"
 17 |         },
 18 |         {
 19 |             "name": "By hankchizljaw",
 20 |             "url": "//hankchizljaw.com"
 21 |         }
 22 |     ],
 23 |     "theme": {
 24 |         "border_color": "#E0E6ED",
 25 |         "highlight_color": "#F9FAFC",
 26 |         "brand_color": "#A03EA0",
 27 |         "background_color": "#FFFFFF",
 28 |         "code_highlight_theme": "github",
 29 |         "override_code_highlight_bg": "#F9FAFC",
 30 |         "sample_dark_background": "#333333",
 31 |         "show_project_name": false,
 32 |         "show_version": true,
 33 |         "max_width": null,
 34 |         "titles": {
 35 |             "library_title": "Patterns",
 36 |             "pages_title": "Overview",
 37 |             "components_title": "Components"
 38 |         }
 39 |     },
 40 |     "assets": {
 41 |         "css": [
 42 |             "https://cdn.statically.io/gh/hankchizljaw/boilerform/70a13a07/dist/css/boilerform.min.css"
 43 |         ],
 44 |         "js": [
 45 |             "/assets/js/patterns.js?v=1.1.1"
 46 |         ]
 47 |     },
 48 |     "font_libraries": {
 49 |         "typekit_code": null,
 50 |         "typography_web_fonts": null,
 51 |         "google_web_fonts": null
 52 |     },
 53 |     "content": null,
 54 |     "groups": [
 55 |         {
 56 |             "name": "input-field",
 57 |             "title": "Input Field",
 58 |             "components": [
 59 |                 {
 60 |                     "group": "input-field",
 61 |                     "name": "text",
 62 |                     "title": "Text",
 63 |                     "width": "half"
 64 |                 },
 65 |                 {
 66 |                     "group": "input-field",
 67 |                     "name": "email",
 68 |                     "title": "Email",
 69 |                     "width": "half"
 70 |                 },
 71 |                 {
 72 |                     "group": "input-field",
 73 |                     "name": "search",
 74 |                     "title": "Search",
 75 |                     "width": "half"
 76 |                 },
 77 |                 {
 78 |                     "group": "input-field",
 79 |                     "name": "number",
 80 |                     "title": "Number",
 81 |                     "width": "half"
 82 |                 },
 83 |                 {
 84 |                     "group": "input-field",
 85 |                     "name": "tel",
 86 |                     "title": "Tel",
 87 |                     "width": "half"
 88 |                 },
 89 |                 {
 90 |                     "group": "input-field",
 91 |                     "name": "text-area",
 92 |                     "title": "Textarea / Multiline",
 93 |                     "width": "half"
 94 |                 },
 95 |                 {
 96 |                     "group": "input-field",
 97 |                     "name": "error-state",
 98 |                     "title": "Error State",
 99 |                     "width": "half"
100 |                 }
101 |             ]
102 |         },
103 |         {
104 |             "name": "select-field",
105 |             "title": "Select Field",
106 |             "components": [
107 |                 {
108 |                     "group": "select-field",
109 |                     "name": "select-menu",
110 |                     "title": "Select Menu",
111 |                     "width": "half"
112 |                 },
113 |                 {
114 |                     "group": "select-field",
115 |                     "name": "error-state",
116 |                     "title": "Error State",
117 |                     "width": "half"
118 |                 }
119 |             ]
120 |         },
121 |         {
122 |             "name": "check-field",
123 |             "title": "Check Field",
124 |             "components": [
125 |                 {
126 |                     "group": "check-field",
127 |                     "name": "checkbox",
128 |                     "title": "Checkbox",
129 |                     "width": "half"
130 |                 },
131 |                 {
132 |                     "group": "check-field",
133 |                     "name": "radio",
134 |                     "title": "Radio",
135 |                     "width": "half"
136 |                 },
137 |                 {
138 |                     "group": "check-field",
139 |                     "name": "error-state",
140 |                     "title": "Error State",
141 |                     "width": "half"
142 |                 }
143 |             ]
144 |         },
145 |         {
146 |             "name": "button",
147 |             "title": "Button",
148 |             "components": [
149 |                 {
150 |                     "group": "button",
151 |                     "name": "default",
152 |                     "title": "Default",
153 |                     "width": "half"
154 |                 }
155 |             ]
156 |         },
157 |         {
158 |             "name": "label",
159 |             "title": "Label",
160 |             "components": [
161 |                 {
162 |                     "group": "label",
163 |                     "name": "default",
164 |                     "title": "Default",
165 |                     "width": "half"
166 |                 }
167 |             ]
168 |         }
169 |     ],
170 |     "version": "1.9.5"
171 | }
172 | 


--------------------------------------------------------------------------------
/dist/css/boilerform.css:
--------------------------------------------------------------------------------
  1 | /*------------------------------------*    NAMESPACE
  2 | 
  3 |     This mixin encapsulates CSS within 
  4 |     a namespace to prevent outside
  5 |     conflicts as much as possible.
  6 | \*------------------------------------*/
  7 | /*------------------------------------*    COLOR
  8 | 
  9 |     Pass in a group name and a key
 10 |     to get a value. 
 11 | 
 12 |     E.G color(field, background) will return
 13 |     the background item in the field group.
 14 | 
 15 |     Colors are defined in $colors in _config.scss
 16 | \*------------------------------------*/
 17 | .boilerform .c-input-field, .boilerform .c-select-field__menu {
 18 |   background: #ffffff;
 19 |   border: 1px solid #cccccc;
 20 |   padding: 11px 15px 10px 15px;
 21 |   border-radius: 2px;
 22 |   font-size: 1rem; }
 23 | 
 24 | .boilerform .c-check-field__input {
 25 |   display: block;
 26 |   height: 1px;
 27 |   width: 1px;
 28 |   overflow: hidden;
 29 |   clip: rect(1px 1px 1px 1px);
 30 |   clip: rect(1px, 1px, 1px, 1px);
 31 |   clip-path: inset(1px);
 32 |   white-space: nowrap;
 33 |   position: absolute; }
 34 | 
 35 | .boilerform {
 36 |   font-size: 16px;
 37 |   color: #141414;
 38 |   border-color: #cccccc; }
 39 |   .boilerform,
 40 |   .boilerform * {
 41 |     box-sizing: border-box; }
 42 |   .boilerform [class*="-field"] {
 43 |     margin: 0;
 44 |     display: inline-block;
 45 |     vertical-align: middle;
 46 |     white-space: normal;
 47 |     line-height: 1.1;
 48 |     font-family: sans-serif; }
 49 |   .boilerform [class*="decor"] {
 50 |     line-height: 0; }
 51 |   .boilerform ::-webkit-search-decoration {
 52 |     display: none; }
 53 |   .boilerform input::-webkit-input-placeholder,
 54 |   .boilerform textarea::-webkit-input-placeholder,
 55 |   .boilerform select::-webkit-input-placeholder {
 56 |     line-height: normal; }
 57 |   .boilerform input[type="search"] {
 58 |     -webkit-appearance: textfield; }
 59 | 
 60 | /*------------------------------------*    BUTTON COMPONENT
 61 | 
 62 |     Base button styles and reset
 63 | \*------------------------------------*/
 64 | .boilerform .c-button {
 65 |   display: inline-block;
 66 |   border: none;
 67 |   padding: 0;
 68 |   margin: 0;
 69 |   text-decoration: none;
 70 |   background: #666666;
 71 |   color: #ffffff;
 72 |   padding: 11px 25px 10px 25px;
 73 |   font-family: sans-serif;
 74 |   font-size: 1rem;
 75 |   border-radius: 2px;
 76 |   cursor: pointer;
 77 |   text-align: center;
 78 |   -webkit-appearance: none;
 79 |   -moz-appearance: none; }
 80 |   .boilerform .c-button:hover, .boilerform .c-button:focus {
 81 |     background: #888888; }
 82 | 
 83 | /*------------------------------------*    CHECK FIELD COMPONENT
 84 | 
 85 |     Radio buttons and checkboxes
 86 | \*------------------------------------*/
 87 | .boilerform .c-check-field {
 88 |   display: flex;
 89 |   flex-direction: row;
 90 |   align-items: flex-start; }
 91 |   .boilerform .c-check-field__decor {
 92 |     display: block;
 93 |     width: 20px;
 94 |     height: 20px;
 95 |     flex-shrink: 0;
 96 |     background: #eeeeee;
 97 |     border: 1px solid #cccccc;
 98 |     border-radius: 2px;
 99 |     position: relative;
100 |     cursor: pointer; }
101 |     .boilerform .c-check-field__decor:after {
102 |       content: "";
103 |       speak: none;
104 |       display: block;
105 |       opacity: 0;
106 |       width: 70%;
107 |       height: 70%;
108 |       position: absolute;
109 |       top: 15%;
110 |       left: 15%;
111 |       background: #888888;
112 |       border-radius: 1px; }
113 |   .boilerform .c-check-field__label {
114 |     padding: 3px 0 0 10px;
115 |     cursor: pointer; }
116 |   .boilerform .c-check-field--radio .c-check-field__decor, .boilerform .c-check-field--radio .c-check-field__decor:after {
117 |     border-radius: 50%; }
118 |   .boilerform .c-check-field__input:checked ~ [class*="decor"]:after {
119 |     opacity: 1; }
120 |   .boilerform .c-check-field__input:focus ~ [class*="decor"] {
121 |     outline: 1px dotted #212121;
122 |     outline: 5px auto -webkit-focus-ring-color; }
123 |   .boilerform .c-check-field + .c-check-field {
124 |     padding-top: 10px; }
125 | 
126 | /*------------------------------------*    INPUT FIELD COMPONENT
127 | 
128 |     All input based form field elements
129 | \*------------------------------------*/
130 | .boilerform .c-input-field[type="number"] {
131 |   padding-right: 11px 15px 10px 15px / 2; }
132 | 
133 | .boilerform .c-input-field--multiline {
134 |   vertical-align: top;
135 |   overflow: auto;
136 |   width: 100%; }
137 |   .boilerform .c-input-field--multiline:not([rows]) {
138 |     min-height: 80px; }
139 | 
140 | /*------------------------------------*    LABEL COMPONENT
141 | 
142 |     A simple form label
143 | \*------------------------------------*/
144 | .boilerform .c-label {
145 |   display: inline;
146 |   font-family: sans-serif;
147 |   font-weight: 700;
148 |   font-size: 0.88rem; }
149 |   .boilerform .c-label[for] {
150 |     cursor: pointer; }
151 |   .boilerform .c-label:after {
152 |     content: "\A";
153 |     white-space: pre; }
154 |   .boilerform .c-label + [class*="field"] {
155 |     margin-top: 2px; }
156 | 
157 | /*------------------------------------*    SELECT FIELD
158 | 
159 |     Option driven fields such as 
160 |     <select> menus
161 | \*------------------------------------*/
162 | .boilerform .c-select-field {
163 |   display: inline-block;
164 |   position: relative; }
165 |   .boilerform .c-select-field__menu {
166 |     -webkit-appearance: none;
167 |     -moz-appearance: none;
168 |     padding-right: 45px; }
169 |     .boilerform .c-select-field__menu:-moz-focusring {
170 |       color: transparent;
171 |       text-shadow: 0 0 0 #141414; }
172 |     .boilerform .c-select-field__menu::-ms-expand {
173 |       display: none; }
174 |   .boilerform .c-select-field__decor {
175 |     position: absolute;
176 |     top: 50%;
177 |     right: 15px;
178 |     pointer-events: none; }
179 | 
180 | /*------------------------------------*    FORM LAYOUT
181 | 
182 |     The main form layout that gives
183 |     you rythm, alignment and flow
184 | \*------------------------------------*/
185 | .boilerform .is-error,
186 | .boilerform .is-error [class*="menu"],
187 | .boilerform .is-error [class*="check"] {
188 |   border-color: #cf0b00; }
189 |   .boilerform .is-error:focus,
190 |   .boilerform .is-error [class*="menu"]:focus,
191 |   .boilerform .is-error [class*="check"]:focus {
192 |     outline: none;
193 |     box-shadow: 0 0 0 2px #cf0b00; }
194 | 
195 | /*# sourceMappingURL=boilerform.css.map*/


--------------------------------------------------------------------------------
/dist/js/boilerform.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["webpack:///webpack/universalModuleDefinition","webpack:///webpack/bootstrap acdcaa4ad943aa057841","webpack:///./assets/js/boilerform.js","webpack:///./assets/js/modules/validation.js","webpack:///./assets/scss/boilerform.scss"],"names":["boilerforms","document","querySelector","length","map","validationInstance","item","init","Validation","baseForm","inputElems","querySelectorAll","self","bind","setCustomValidationMessages","addEventListener","processValidity","setCustomValidationMessage","hasAttribute","setCustomValidity","getAttribute","state","classList","add","remove","validity","valid","process","checkSiblings","customError","badInput","patternMismatch","rangeOverflow","rangeUnderflow","stepMismatch","tooLong","tooShort","typeMismatch","valueMissing","filter","elem"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AACD,O;ACVA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;;AAGA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAK;AACL;AACA;;AAEA;AACA;AACA;AACA,mCAA2B,0BAA0B,EAAE;AACvD,yCAAiC,eAAe;AAChD;AACA;AACA;;AAEA;AACA,8DAAsD,+DAA+D;;AAErH;AACA;;AAEA;AACA;;;;;;;;;;AC7DA;;;;AAGA;;;;;;;;AADA;;;AAGC,aAAW;;AAER;AACA,QAAMA,2CAAkBC,SAASC,aAAT,CAAuB,mCAAvB,CAAlB,EAAN;;AAEA,QAAGF,YAAYG,MAAf,EAAuB;;AAEnB;AACAH,oBAAYI,GAAZ,CAAgB,gBAAQ;AACpB,gBAAIC,qBAAqB,yBAAeC,IAAf,CAAzB;;AAEAD,+BAAmBE,IAAnB;AACH,SAJD;AAKH;AACJ,CAdA,GAAD,C;;;;;;;;;;;;;;;;;;;ICLqBC,U;;AAEjB;;;;AAIA,wBAAYC,QAAZ,EAAsB;AAAA;;AAClB,aAAKA,QAAL,GAAgBA,QAAhB;;AAEA;AACA,aAAKC,UAAL,gCAAsBD,SAASE,gBAAT,CAA0B,yBAA1B,CAAtB;AACH;;AAED;;;;;;;+BAGO;AACH,gBAAIC,OAAO,IAAX;;AAEAA,iBAAKC,IAAL;AACAD,iBAAKE,2BAAL;AACH;;AAED;;;;;;+BAGO;AACH,gBAAIF,OAAO,IAAX;;AAEA;AACAA,iBAAKF,UAAL,CAAgBN,GAAhB,CAAoB,gBAAQ;AACxBE,qBAAKS,gBAAL,CAAsB,SAAtB,EAAiC,eAAO;AACpCH,yBAAKI,eAAL,CAAqBV,IAArB;AACH,iBAFD,EAEG,KAFH;AAGH,aAJD;AAKH;;AAED;;;;;;;sDAI8B;AAC1B,gBAAIM,OAAO,IAAX;;AAEAA,iBAAKF,UAAL,CAAgBN,GAAhB,CAAoB,gBAAQ;AACxBQ,qBAAKK,0BAAL,CAAgCX,IAAhC;AACH,aAFD;AAGH;;AAED;;;;;;;mDAI2BA,I,EAAM;AAC7B,gBAAIM,OAAO,IAAX;;AAEA,gBAAGN,KAAKY,YAAL,CAAkB,yBAAlB,CAAH,EAAiD;AAC7CZ,qBAAKa,iBAAL,CAAuBb,KAAKc,YAAL,CAAkB,yBAAlB,CAAvB;AACH;AACJ;;AAED;;;;;;;;gCAKQd,I,EAAyB;AAAA,gBAAnBe,KAAmB,uEAAX,SAAW;;AAC7B,gBAAIT,OAAO,IAAX;;AAEA,oBAAOS,KAAP;AACI,qBAAK,SAAL;AACIf,yBAAKgB,SAAL,CAAeC,GAAf,CAAmB,UAAnB;AACAX,yBAAKK,0BAAL,CAAgCX,IAAhC;AACA;AACJ;AACIA,yBAAKgB,SAAL,CAAeE,MAAf,CAAsB,UAAtB;AACA;AAPR;AASH;;AAED;;;;;;;wCAIgBlB,I,EAAM;AAClB,gBAAIM,OAAO,IAAX;;AAEA;AACA,gBAAGN,KAAKmB,QAAL,CAAcC,KAAjB,EAAwB;AACpBd,qBAAKe,OAAL,CAAarB,IAAb,EAAmB,OAAnB;AACAM,qBAAKgB,aAAL,CAAmBtB,IAAnB;AACA;AACH;;AAED;AACA,gBAAGA,KAAKmB,QAAL,CAAcI,WAAjB,EAA8B;;AAE1B;AACA,oBAAG,CAACvB,KAAKmB,QAAL,CAAcK,QAAf,IACI,CAACxB,KAAKmB,QAAL,CAAcM,eADnB,IAEI,CAACzB,KAAKmB,QAAL,CAAcO,aAFnB,IAGI,CAAC1B,KAAKmB,QAAL,CAAcQ,cAHnB,IAII,CAAC3B,KAAKmB,QAAL,CAAcS,YAJnB,IAKI,CAAC5B,KAAKmB,QAAL,CAAcU,OALnB,IAMI,CAAC7B,KAAKmB,QAAL,CAAcW,QANnB,IAOI,CAAC9B,KAAKmB,QAAL,CAAcY,YAPnB,IAQI,CAAC/B,KAAKmB,QAAL,CAAca,YARtB,EAQoC;;AAEhC;AACAhC,yBAAKa,iBAAL,CAAuB,EAAvB;AACAP,yBAAKe,OAAL,CAAarB,IAAb,EAAmB,OAAnB;;AAEAM,yBAAKgB,aAAL,CAAmBtB,IAAnB;AACA;AACH;AACJ;;AAED;AACAM,iBAAKe,OAAL,CAAarB,IAAb,EAAmB,SAAnB;AACAM,iBAAKgB,aAAL,CAAmBtB,IAAnB;AACH;;AAED;;;;;;;sCAIcA,I,EAAM;AAChB,gBAAIM,OAAO,IAAX;;AAEA;AACA,gBAAIF,aAAaE,KAAKF,UAAL,CAAgB6B,MAAhB,CAAuB;AAAA,uBAAQC,QAAQlC,IAAR,IAAgBkC,KAAKtB,YAAL,CAAkB,UAAlB,CAAxB;AAAA,aAAvB,CAAjB;;AAEA,gBAAGR,WAAWP,MAAd,EAAsB;;AAElB;AACAO,2BAAWN,GAAX,CAAe,gBAAQ;AACnBQ,yBAAKI,eAAL,CAAqBV,IAArB;AACH,iBAFD;AAGH;AACJ;;;;;;kBA3IgBE,U;AA4IpB;;;;;;;AC5ID,yC","file":"boilerform.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"boilerform\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"boilerform\"] = factory();\n\telse\n\t\troot[\"boilerform\"] = factory();\n})(typeof self !== 'undefined' ? self : this, function() {\nreturn \n\n\n// WEBPACK FOOTER //\n// webpack/universalModuleDefinition"," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 0);\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap acdcaa4ad943aa057841","import Validation from './modules/validation';\n\n// Import Sass so that webpack picks it up\nimport BoilerFormCSS from '../scss/boilerform.scss';\n\n(function() {\n\n    // Look for child and root forms \n    const boilerforms = [...document.querySelector('.boilerform form, form.boilerform')];\n\n    if(boilerforms.length) {\n\n        // Add a validator to each form instance\n        boilerforms.map(item => {\n            let validationInstance = new Validation(item);\n\n            validationInstance.init();\n        });  \n    }\n}());\n\n\n// WEBPACK FOOTER //\n// ./assets/js/boilerform.js","export default class Validation {\n\n    /**\n     * Load up an instance of Validation\n     * @param {HTMLFormElement} baseForm \n     */\n    constructor(baseForm) {\n        this.baseForm = baseForm;\n\n        // Load child input elements\n        this.inputElems = [...baseForm.querySelectorAll('input, textarea, select')];\n    }\n\n    /**\n     * Public init method\n     */\n    init() {\n        let self = this;\n\n        self.bind();\n        self.setCustomValidationMessages();\n    }\n\n    /**\n     * Bind events to input elements\n     */\n    bind() {\n        let self = this;\n\n        // Add an invalid listener that \n        self.inputElems.map(item => {\n            item.addEventListener('invalid', evt => {\n                self.processValidity(item);\n            }, false);\n        });\n    }\n\n    /**\n     * Run through each item and check they have a `data-validation-message` attribute.\n     * If so, set a custom validation message with that value\n     */\n    setCustomValidationMessages() {\n        let self = this;\n\n        self.inputElems.map(item => {\n            self.setCustomValidationMessage(item);\n        });\n    }\n\n    /**\n     * Set a custom validation message if item needs it\n     * @param {HTMLElement} item \n     */\n    setCustomValidationMessage(item) {\n        let self = this;\n        \n        if(item.hasAttribute('data-validation-message')) {\n            item.setCustomValidity(item.getAttribute('data-validation-message'));\n        }\n    }\n\n    /**\n     * Toggle the visual state of an item based on the based state key\n     * @param {HTMLElement} item \n     * @param {String} state \n     */\n    process(item, state = 'invalid') {\n        let self = this;\n\n        switch(state) {\n            case 'invalid':\n                item.classList.add('is-error');\n                self.setCustomValidationMessage(item);\n                break;\n            default: \n                item.classList.remove('is-error');\n                break;\n        } \n    }\n\n    /**\n     * Run some checks to determine if the passed item is valid or not\n     * @param {HTMLElement} item \n     */\n    processValidity(item) {\n        let self = this;\n\n        // If an item is valid, run the processor and bail\n        if(item.validity.valid) {\n            self.process(item, 'valid');\n            self.checkSiblings(item);\n            return;\n        }\n\n        // Before we determine it as invalid, check to see if there's a custom error\n        if(item.validity.customError) {\n\n            // Now let's check against some states\n            if(!item.validity.badInput \n                && !item.validity.patternMismatch \n                && !item.validity.rangeOverflow\n                && !item.validity.rangeUnderflow\n                && !item.validity.stepMismatch\n                && !item.validity.tooLong\n                && !item.validity.tooShort\n                && !item.validity.typeMismatch\n                && !item.validity.valueMissing) {\n                \n                // It's valid, so process accordingly\n                item.setCustomValidity('');\n                self.process(item, 'valid');\n\n                self.checkSiblings(item);\n                return;\n            }\n        }\n\n        // If we're here, it's invalid\n        self.process(item, 'invalid');\n        self.checkSiblings(item);\n    }\n\n    /**\n     * Check an item's siblings validty state\n     * @param {HTMLElement} item \n     */\n    checkSiblings(item) {\n        let self = this;\n\n        // Find siblings that aren't this item and that are required\n        let inputElems = self.inputElems.filter(elem => elem != item && elem.hasAttribute('required'));\n        \n        if(inputElems.length) {\n\n            // Run each item through the processor\n            inputElems.map(item => {\n                self.processValidity(item);\n            });\n        }\n    }\n};\n\n\n// WEBPACK FOOTER //\n// ./assets/js/modules/validation.js","// removed by extract-text-webpack-plugin\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./assets/scss/boilerform.scss\n// module id = 2\n// module chunks = 0"],"sourceRoot":""}


--------------------------------------------------------------------------------
/pattern-library/app/js/main.min.js:
--------------------------------------------------------------------------------
1 | var ndplComponent=Vue.extend({data:function(){return{loaded:!1,hide_sample_code:!1}},props:{component:{required:!0}},computed:{inline_styles:function(){var o=this,t="";return o.loaded&&o.component.options.sample_min_height&&(t+="min-height:"+o.component.options.sample_min_height+"px;"),o.component.options.sample_overflow_hidden&&(t+="overflow: hidden;"),o.component.options.sample_background_color&&(t+="background-color:"+o.component.options.sample_background_color+" !important;"),t}},watch:{"component.html":function(){var o=this;this.component.html.length&&o.$root.applySyntaxHighlighting(o.$el)}},ready:function(){var o=this;o.$on("loaded",function(){window.addEventListener("scroll",o.updateActive),window.addEventListener("resize",o.updateActive),o.setHideSample(function(){o.loaded=!0})}),o.$on("resizing",function(t){o.loaded=!1,t||o.setHideSample(function(){o.loaded=!0})}),o.component.html&&o.$root.applySyntaxHighlighting(o.$el)},methods:{updateActive:function(){var o=this;if(o.$root&&o.$root.scroll_position>=o.$el.offsetTop-60&&o.$root.scroll_position<o.$el.offsetTop+o.$el.offsetHeight)o.$root.scrolling_to||o.isActive(o.component)||(o.$root.active_components.push(o.component),o.$root.open_group=null,o.$root.updateHash(o.component.id));else if(o.$root&&!o.$root.scrolling_to)for(var t=0;t<o.$root.active_components.length;t++){var e=o.$root.active_components[t];if(e.id===o.component.id)return void o.$root.active_components.splice(t,1)}},isActive:function(o){for(var t=this,e=0;e<t.$root.active_components.length;e++){var n=t.$root.active_components[e];if(o.id===n.id)return!0}return!1},shouldInvertText:function(o){var t=this.$root.convertHexToRgb(o),e=this.$root.getColorBrightness(t);return e>210},shouldApplyBorder:function(o){var t=this.$root.convertHexToRgb(o),e=this.$root.getColorBrightness(t);return e>240},setHideSample:function(o){o="undefined"!=typeof o?o:function(){};var t=this;t.hide_sample_code=!1,setTimeout(function(){t.$el.querySelector(".ndpl-component__code")&&(t.$el.querySelector(".ndpl-component__sample").offsetHeight<=74&&!t.component.options.disabled_auto_sample_hiding&&(t.hide_sample_code=!0),t.component.options.disabled_auto_sample_hiding&&t.component.options.disabled_auto_sample_hiding.hasOwnProperty("show_on_mobile")&&t.component.options.disabled_auto_sample_hiding.hasOwnProperty("show_on_desktop")&&(t.$root.mobile_view?t.hide_sample_code=!t.component.options.disabled_auto_sample_hiding.show_on_mobile:t.hide_sample_code=!t.component.options.disabled_auto_sample_hiding.show_on_desktop)),o()},0)},isCodeVisible:function(){var o=this;return!o.hide_sample_code}}});Vue.component("ndpl-component",ndplComponent);var ndplGroup=Vue.extend({props:{group:{required:!0}}});Vue.component("ndpl-group",ndplGroup);var ndplScript=Vue.extend({props:{script:{required:!0}},methods:{loadTypekit:function(){try{Typekit.load({async:!0})}catch(o){}}}});Vue.component("ndpl-script",ndplScript),new Vue({el:"html",data:{intro:null,project_logo:null,project_favicon:null,project_name:null,project_url:null,copyright_start_year:null,client_name:null,client_url:null,creators:{},content:{},groups:{},theme:{},assets:{css:[],js:[]},font_libraries:{typekit_code:null,google_web_fonts:null,typography_web_fonts:null},log:{error:[],info:[]},components_count:0,groups_count:0,components_loaded_count:0,groups_loaded_count:0,groups_loaded:!1,loaded:!1,resizing:!1,typekit_loaded:!1,scroll_position:0,prev_scroll_position:0,active_group:null,active_components:[],active_page:null,open_group:null,show_first_page_on_load:!1,scrolling_to:!1,sidebar_scrolling:!1,window_outer_width:0,breakpoint:960,mobile_view:!1,open_nav:!1,rtime:new Date(1,1,2e3,12,0,0),timeout:!1,delta:200,version:null},computed:{project:function(){return this.project_name&&this.project_url?'<a href="'+this.project_url+'" target="_blank"><span>'+this.project_name+"</span></a>":this.project_name&&!this.project_url?this.project_name:null},copyright_year:function(){var o=new Date;return o.getFullYear()==this.copyright_start_year?this.copyright_start_year:this.copyright_start_year+" - "+o.getFullYear()},client:function(){return this.client_name&&this.client_url?'<a href="'+this.client_url+'" target="_blank">'+this.client_name+"</a>":this.client_name&&!this.client_url?this.client_name:null},all_creators:function(){var o="";if(this.creators.length&&this.creators[0].name){for(var t=0;t<this.creators.length;t++)prefix=t===this.creators.length-1?" & ":", ",url=this.creators[t].url,name=this.creators[t].name.replace(" ","&nbsp;"),o+=prefix+'<a href="'+url+'" target="_blank">'+name+"</a>";return o.substring(2)}return null},library_inline_styles:function(){var o=this,t="";return o.theme.max_width&&(t+="max-width:"+o.theme.max_width+"px;"),t}},watch:{groups_loaded:function(){var o=this;o.setupComponents()},loaded:function(){var o=this;o.scrollTo(window.location.hash),o.$broadcast("loaded")}},ready:function(){var o=this;o.loadDataFile(),o.window_outer_width=window.outerWidth,o.mobile_view=o.window_outer_width>=o.breakpoint?!1:!0,window.addEventListener("scroll",o.setScrollPosition),window.addEventListener("resize",function(){o.window_outer_width=window.outerWidth,o.setScrollPosition(),o.mobile_view=o.window_outer_width>=o.breakpoint?!1:!0,o.rtime=new Date,o.timeout!==!1||o.mobile_view||(o.timeout=!0,setTimeout(o.trackResizing,o.delta))});var t=document.querySelector(".ndpl-sidebar");t.addEventListener("mouseover",function(t){o.sidebar_scrolling=!0}),t.addEventListener("mouseleave",function(t){o.sidebar_scrolling=!1}),setTimeout(function(){var t=o.isLoadingPage();t&&o.loadPage(t)},0)},methods:{applySyntaxHighlighting:function(o){setTimeout(function(){for(var t=o.querySelectorAll("pre code"),e=0;e<t.length;e++){var n=t[e];hljs.highlightBlock(n)}},0)},loadDataFile:function(){var o=this;o.$http.get("./data.json?cb="+new Date).then(function(t){o.initData(t.data,function(){o.$data.groups.length?o.setupGroups():o.logInfo("You need to add a component to your library before it can be loaded.<br/>You can either do this manually by editing your <code>data.json</code> file,<br/> or you can use the command line helper: <code>astrum new [group_name/component_name]</code>")})})},isLoadingPage:function(){var o=this,t=location.hash;if(void 0!==o.content.pages&&o.content.pages.length)if(t)for(var e=0;e<o.content.pages.length;e++){var n=o.content.pages[e];if(n.name==t.replace("#",""))return n}else if(o.content.show_first_page_on_load)return o.content.pages[0];return!1},initData:function(o,t){t="undefined"!=typeof t?t:function(){};var e=this;for(var n in o)e.$set(n,o[n]);t()},updateHash:function(o){history.pushState?history.pushState(null,null,"#"+o):location.hash=o},setupGroups:function(){for(var o=this,t=0;t<o.groups.length;t++){var e=o.groups[t];o.$set("groups["+t+"].id","group-"+e.name),o.$set("groups["+t+"].active",!1),o.$set("groups["+t+"].description",""),o.groups_count=o.groups.length,o.loadGroup(o.groups[t])}},setupComponents:function(){for(var o=this,t=0;t<o.groups.length;t++){var e=o.groups[t];o.components_count+=e.components.length;for(var n=0;n<e.components.length;n++)o.$set("groups["+t+"].components["+n+"].id","group-"+e.name+"-component-"+e.components[n].name),o.$set("groups["+t+"].components["+n+"].group_id","group-"+e.name),o.$set("groups["+t+"].components["+n+"].active",!1),o.$set("groups["+t+"].components["+n+"].options",e.components[n].options?e.components[n].options:!1),o.$set("groups["+t+"].components["+n+"].options.sample_always_show",e.components[n].options.sample_always_show?e.components[n].options.sample_always_show:!1),o.$set("groups["+t+"].components["+n+"].options.sample_mobile_hidden",e.components[n].options.sample_mobile_hidden?e.components[n].options.sample_mobile_hidden:!1),o.$set("groups["+t+"].components["+n+"].options.sample_dark_background",e.components[n].options.sample_dark_background?e.components[n].options.sample_dark_background:!1),o.$set("groups["+t+"].components["+n+"].options.disable_code_sample",e.components[n].options.disable_code_sample?e.components[n].options.disable_code_sample:!1),o.$set("groups["+t+"].components["+n+"].code_show",!1),o.$set("groups["+t+"].components["+n+"].type",e.components[n].type?e.components[n].type:"standard"),o.$set("groups["+t+"].components["+n+"].width",e.components[n].width?e.components[n].width:"full"),o.$set("groups["+t+"].components["+n+"].html",""),o.$set("groups["+t+"].components["+n+"].description",""),o.loadComponent(o.groups[t].components[n])}},loadGroup:function(o){var t=this,e="./components/"+o.name;t.$http.get(e+"/description.md?cb="+new Date).then(function(e){o.description=marked(e.data),t.areGroupsLoaded()},function(){t.logError("Description file for <strong>"+o.name+"</strong> group failed to load from <code>"+e+"/description.md</code>")})},loadComponent:function(o){var t=this,e="./components/"+o.group+"/"+o.name;t.$http.get(e+"/markup.html?cb="+new Date).then(function(e){o.html=e.data,t.areComponentsLoaded()},function(){t.logError("HTML file for <strong>"+o.name+"</strong> component failed to load from <code>"+e+"/html.md</code>")}),t.$http.get(e+"/description.md?cb="+new Date).then(function(e){o.description=marked(e.data),t.areComponentsLoaded()},function(){t.logError("Description file for <strong>"+o.name+"</strong> component failed to load from <code>"+e+"/description.md</code>")})},areGroupsLoaded:function(){var o=this;o.groups_loaded_count+=1,o.groups_loaded_count===o.groups_count&&setTimeout(function(){o.groups_loaded=!0},1e3)},areComponentsLoaded:function(){var o=this;o.components_loaded_count+=1,o.components_loaded_count===2*o.components_count&&setTimeout(function(){o.loaded=!0},2e3)},addLog:function(o,t,e){var n=this;e="undefined"!=typeof e?e:"error",t="undefined"!=typeof t?t:null,n.log[e].push(o),console[e]("[Pattern Library warn]: "+o),t&&console[e](t)},logError:function(o,t){var e=this;e.addLog(o,t,"error")},logInfo:function(o,t){var e=this;e.addLog(o,t,"info")},setScrollPosition:function(){var o=this,t=document.documentElement,e=t&&t.scrollTop||document.body.scrollTop;o.prev_scroll_position=o.scroll_position,o.scroll_position=e},getScrollDirection:function(){var o=this;return o.prev_scroll_position<o.scroll_position?"down":"up"},scrollToHref:function(o){var t=this;t.scrollTo(o.target.hash),t.active_page=null},scrollTo:function(o){var t=this,e=t.mobile_view?79:30;o&&(t.scrolling_to=!0,smoothScroll.animateScroll(o,null,{offset:e,callback:function(){t.scrolling_to=!1,t.open_nav=!1}}))},toggleNav:function(){var o=this;o.open_nav=!o.open_nav},toggleOpenGroups:function(o){var t=this;t.open_group=t.open_group==o.id?null:o.id,t.active_page=null},loadPage:function(o){var t=this;t.active_page=o,t.active_components=[],t.open_group=null,t.open_nav=!1,t.$http.get(o.file+"?cb="+new Date).then(function(o){t.$set("active_page.markup",marked(o.data)),t.applySyntaxHighlighting(document)}),t.updateHash(o.name)},trackResizing:function(){var o=this;o.resizing=!0,o.$broadcast("resizing",!0),new Date-o.rtime<o.delta?setTimeout(o.trackResizing,o.delta):(o.timeout=!1,setTimeout(function(){o.resizing=!1,o.$broadcast("resizing",!1)},1e3))},convertHexToRgb:function(o){var t=/^#?([a-f\d])([a-f\d])([a-f\d])$/i;o=o.replace(t,function(o,t,e,n){return t+t+e+e+n+n});var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(o);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null},getColorBrightness:function(o){return Math.round((299*parseInt(o.r)+587*parseInt(o.g)+114*parseInt(o.b))/1e3)}}});


--------------------------------------------------------------------------------
/dist/js/boilerform.js:
--------------------------------------------------------------------------------
  1 | (function webpackUniversalModuleDefinition(root, factory) {
  2 | 	if(typeof exports === 'object' && typeof module === 'object')
  3 | 		module.exports = factory();
  4 | 	else if(typeof define === 'function' && define.amd)
  5 | 		define("boilerform", [], factory);
  6 | 	else if(typeof exports === 'object')
  7 | 		exports["boilerform"] = factory();
  8 | 	else
  9 | 		root["boilerform"] = factory();
 10 | })(typeof self !== 'undefined' ? self : this, function() {
 11 | return /******/ (function(modules) { // webpackBootstrap
 12 | /******/ 	// The module cache
 13 | /******/ 	var installedModules = {};
 14 | /******/
 15 | /******/ 	// The require function
 16 | /******/ 	function __webpack_require__(moduleId) {
 17 | /******/
 18 | /******/ 		// Check if module is in cache
 19 | /******/ 		if(installedModules[moduleId]) {
 20 | /******/ 			return installedModules[moduleId].exports;
 21 | /******/ 		}
 22 | /******/ 		// Create a new module (and put it into the cache)
 23 | /******/ 		var module = installedModules[moduleId] = {
 24 | /******/ 			i: moduleId,
 25 | /******/ 			l: false,
 26 | /******/ 			exports: {}
 27 | /******/ 		};
 28 | /******/
 29 | /******/ 		// Execute the module function
 30 | /******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
 31 | /******/
 32 | /******/ 		// Flag the module as loaded
 33 | /******/ 		module.l = true;
 34 | /******/
 35 | /******/ 		// Return the exports of the module
 36 | /******/ 		return module.exports;
 37 | /******/ 	}
 38 | /******/
 39 | /******/
 40 | /******/ 	// expose the modules object (__webpack_modules__)
 41 | /******/ 	__webpack_require__.m = modules;
 42 | /******/
 43 | /******/ 	// expose the module cache
 44 | /******/ 	__webpack_require__.c = installedModules;
 45 | /******/
 46 | /******/ 	// define getter function for harmony exports
 47 | /******/ 	__webpack_require__.d = function(exports, name, getter) {
 48 | /******/ 		if(!__webpack_require__.o(exports, name)) {
 49 | /******/ 			Object.defineProperty(exports, name, {
 50 | /******/ 				configurable: false,
 51 | /******/ 				enumerable: true,
 52 | /******/ 				get: getter
 53 | /******/ 			});
 54 | /******/ 		}
 55 | /******/ 	};
 56 | /******/
 57 | /******/ 	// getDefaultExport function for compatibility with non-harmony modules
 58 | /******/ 	__webpack_require__.n = function(module) {
 59 | /******/ 		var getter = module && module.__esModule ?
 60 | /******/ 			function getDefault() { return module['default']; } :
 61 | /******/ 			function getModuleExports() { return module; };
 62 | /******/ 		__webpack_require__.d(getter, 'a', getter);
 63 | /******/ 		return getter;
 64 | /******/ 	};
 65 | /******/
 66 | /******/ 	// Object.prototype.hasOwnProperty.call
 67 | /******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
 68 | /******/
 69 | /******/ 	// __webpack_public_path__
 70 | /******/ 	__webpack_require__.p = "";
 71 | /******/
 72 | /******/ 	// Load entry module and return exports
 73 | /******/ 	return __webpack_require__(__webpack_require__.s = 0);
 74 | /******/ })
 75 | /************************************************************************/
 76 | /******/ ([
 77 | /* 0 */
 78 | /***/ (function(module, exports, __webpack_require__) {
 79 | 
 80 | "use strict";
 81 | 
 82 | 
 83 | var _validation = __webpack_require__(1);
 84 | 
 85 | var _validation2 = _interopRequireDefault(_validation);
 86 | 
 87 | var _boilerform = __webpack_require__(2);
 88 | 
 89 | var _boilerform2 = _interopRequireDefault(_boilerform);
 90 | 
 91 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 92 | 
 93 | function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
 94 | 
 95 | // Import Sass so that webpack picks it up
 96 | 
 97 | 
 98 | (function () {
 99 | 
100 |     // Look for child and root forms 
101 |     var boilerforms = [].concat(_toConsumableArray(document.querySelector('.boilerform form, form.boilerform')));
102 | 
103 |     if (boilerforms.length) {
104 | 
105 |         // Add a validator to each form instance
106 |         boilerforms.map(function (item) {
107 |             var validationInstance = new _validation2.default(item);
108 | 
109 |             validationInstance.init();
110 |         });
111 |     }
112 | })();
113 | 
114 | /***/ }),
115 | /* 1 */
116 | /***/ (function(module, exports, __webpack_require__) {
117 | 
118 | "use strict";
119 | 
120 | 
121 | Object.defineProperty(exports, "__esModule", {
122 |     value: true
123 | });
124 | 
125 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
126 | 
127 | function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
128 | 
129 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
130 | 
131 | var Validation = function () {
132 | 
133 |     /**
134 |      * Load up an instance of Validation
135 |      * @param {HTMLFormElement} baseForm 
136 |      */
137 |     function Validation(baseForm) {
138 |         _classCallCheck(this, Validation);
139 | 
140 |         this.baseForm = baseForm;
141 | 
142 |         // Load child input elements
143 |         this.inputElems = [].concat(_toConsumableArray(baseForm.querySelectorAll('input, textarea, select')));
144 |     }
145 | 
146 |     /**
147 |      * Public init method
148 |      */
149 | 
150 | 
151 |     _createClass(Validation, [{
152 |         key: 'init',
153 |         value: function init() {
154 |             var self = this;
155 | 
156 |             self.bind();
157 |             self.setCustomValidationMessages();
158 |         }
159 | 
160 |         /**
161 |          * Bind events to input elements
162 |          */
163 | 
164 |     }, {
165 |         key: 'bind',
166 |         value: function bind() {
167 |             var self = this;
168 | 
169 |             // Add an invalid listener that 
170 |             self.inputElems.map(function (item) {
171 |                 item.addEventListener('invalid', function (evt) {
172 |                     self.processValidity(item);
173 |                 }, false);
174 |             });
175 |         }
176 | 
177 |         /**
178 |          * Run through each item and check they have a `data-validation-message` attribute.
179 |          * If so, set a custom validation message with that value
180 |          */
181 | 
182 |     }, {
183 |         key: 'setCustomValidationMessages',
184 |         value: function setCustomValidationMessages() {
185 |             var self = this;
186 | 
187 |             self.inputElems.map(function (item) {
188 |                 self.setCustomValidationMessage(item);
189 |             });
190 |         }
191 | 
192 |         /**
193 |          * Set a custom validation message if item needs it
194 |          * @param {HTMLElement} item 
195 |          */
196 | 
197 |     }, {
198 |         key: 'setCustomValidationMessage',
199 |         value: function setCustomValidationMessage(item) {
200 |             var self = this;
201 | 
202 |             if (item.hasAttribute('data-validation-message')) {
203 |                 item.setCustomValidity(item.getAttribute('data-validation-message'));
204 |             }
205 |         }
206 | 
207 |         /**
208 |          * Toggle the visual state of an item based on the based state key
209 |          * @param {HTMLElement} item 
210 |          * @param {String} state 
211 |          */
212 | 
213 |     }, {
214 |         key: 'process',
215 |         value: function process(item) {
216 |             var state = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'invalid';
217 | 
218 |             var self = this;
219 | 
220 |             switch (state) {
221 |                 case 'invalid':
222 |                     item.classList.add('is-error');
223 |                     self.setCustomValidationMessage(item);
224 |                     break;
225 |                 default:
226 |                     item.classList.remove('is-error');
227 |                     break;
228 |             }
229 |         }
230 | 
231 |         /**
232 |          * Run some checks to determine if the passed item is valid or not
233 |          * @param {HTMLElement} item 
234 |          */
235 | 
236 |     }, {
237 |         key: 'processValidity',
238 |         value: function processValidity(item) {
239 |             var self = this;
240 | 
241 |             // If an item is valid, run the processor and bail
242 |             if (item.validity.valid) {
243 |                 self.process(item, 'valid');
244 |                 self.checkSiblings(item);
245 |                 return;
246 |             }
247 | 
248 |             // Before we determine it as invalid, check to see if there's a custom error
249 |             if (item.validity.customError) {
250 | 
251 |                 // Now let's check against some states
252 |                 if (!item.validity.badInput && !item.validity.patternMismatch && !item.validity.rangeOverflow && !item.validity.rangeUnderflow && !item.validity.stepMismatch && !item.validity.tooLong && !item.validity.tooShort && !item.validity.typeMismatch && !item.validity.valueMissing) {
253 | 
254 |                     // It's valid, so process accordingly
255 |                     item.setCustomValidity('');
256 |                     self.process(item, 'valid');
257 | 
258 |                     self.checkSiblings(item);
259 |                     return;
260 |                 }
261 |             }
262 | 
263 |             // If we're here, it's invalid
264 |             self.process(item, 'invalid');
265 |             self.checkSiblings(item);
266 |         }
267 | 
268 |         /**
269 |          * Check an item's siblings validty state
270 |          * @param {HTMLElement} item 
271 |          */
272 | 
273 |     }, {
274 |         key: 'checkSiblings',
275 |         value: function checkSiblings(item) {
276 |             var self = this;
277 | 
278 |             // Find siblings that aren't this item and that are required
279 |             var inputElems = self.inputElems.filter(function (elem) {
280 |                 return elem != item && elem.hasAttribute('required');
281 |             });
282 | 
283 |             if (inputElems.length) {
284 | 
285 |                 // Run each item through the processor
286 |                 inputElems.map(function (item) {
287 |                     self.processValidity(item);
288 |                 });
289 |             }
290 |         }
291 |     }]);
292 | 
293 |     return Validation;
294 | }();
295 | 
296 | exports.default = Validation;
297 | ;
298 | module.exports = exports['default'];
299 | 
300 | /***/ }),
301 | /* 2 */
302 | /***/ (function(module, exports) {
303 | 
304 | // removed by extract-text-webpack-plugin
305 | 
306 | /***/ })
307 | /******/ ]);
308 | });
309 | //# sourceMappingURL=boilerform.js.map


--------------------------------------------------------------------------------
/pattern-library/assets/images/logo/logo.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <svg width="1000px" height="85px" viewBox="0 0 1000 85" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 3 |     <!-- Generator: Sketch 48.1 (47250) - http://www.bohemiancoding.com/sketch -->
 4 |     <title>Logo</title>
 5 |     <desc>Created with Sketch.</desc>
 6 |     <defs></defs>
 7 |     <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
 8 |         <g id="Logo">
 9 |             <g id="Headline">
10 |                 <path d="M6.12304688,53.84375 L6.12304688,20.0351562 L1.78710938,19.15625 L1.78710938,14.4101562 L11.9824219,14.4101562 C13.4082103,14.4101562 15.2343639,14.3515631 17.4609375,14.234375 C19.1211021,14.1367183 20.5761656,14.0878906 21.8261719,14.0878906 C26.494164,14.0878906 30.1122918,14.4882772 32.6806641,15.2890625 C35.2490363,16.0898478 37.0214795,17.2226489 37.9980469,18.6875 C38.9746143,20.1523511 39.4628906,22.0175668 39.4628906,24.2832031 C39.4628906,26.353526 39.0039108,28.1747968 38.0859375,29.7470703 C37.1679642,31.3193438 35.932625,32.5644485 34.3798828,33.4824219 C32.8271407,34.4003952 31.1132906,34.9667958 29.2382812,35.1816406 C31.9140759,35.201172 34.2480369,35.5966758 36.2402344,36.3681641 C38.2324318,37.1396523 39.7753852,38.2871018 40.8691406,39.8105469 C41.9628961,41.333992 42.5097656,43.2089732 42.5097656,45.4355469 C42.5097656,48.2871236 41.8994202,50.7333882 40.6787109,52.7744141 C39.4580017,54.8154399 37.3779444,56.4218691 34.4384766,57.59375 C31.4990087,58.7656309 27.5390874,59.3515625 22.5585938,59.3515625 C20.4296769,59.3515625 18.4277438,59.2832038 16.5527344,59.1464844 C16.2207015,59.126953 15.6298871,59.0976564 14.7802734,59.0585938 C13.9306598,59.0195311 13.0761762,59 12.2167969,59 L1.7578125,59 L1.7578125,54.546875 L6.12304688,53.84375 Z M18.1347656,33.4824219 C18.8378941,33.5800786 20.1464748,33.6289062 22.0605469,33.6289062 C23.9941503,33.6289062 25.3759724,32.9013745 26.2060547,31.4462891 C27.036137,29.9912037 27.4511719,27.9257946 27.4511719,25.25 C27.4511719,22.8867069 26.972661,21.1582086 26.015625,20.0644531 C25.058589,18.9706977 23.5742288,18.4238281 21.5625,18.4238281 C21.2109357,18.4433595 20.6152386,18.4775388 19.7753906,18.5263672 C18.9355427,18.5751956 18.3886731,18.628906 18.1347656,18.6875 L18.1347656,33.4824219 Z M18.1054688,54.2832031 C18.4375017,54.4394539 18.9941367,54.5664058 19.7753906,54.6640625 C20.5566445,54.7617192 21.3476522,54.8105469 22.1484375,54.8105469 C24.589856,54.8105469 26.3574164,54.043953 27.4511719,52.5107422 C28.5449273,50.9775314 29.0917969,48.7851705 29.0917969,45.9335938 C29.0917969,43.2577991 28.5498101,41.3681696 27.4658203,40.2646484 C26.3818305,39.1611273 24.6972771,38.609375 22.4121094,38.609375 C20.9667896,38.609375 19.5312571,38.6582026 18.1054688,38.7558594 L18.1054688,54.2832031 Z M63.0175781,24.78125 C66.2988445,24.78125 69.1845579,25.420892 71.6748047,26.7001953 C74.1650515,27.9794986 76.1083915,29.8935419 77.5048828,32.4423828 C78.9013742,34.9912237 79.5996094,38.1210752 79.5996094,41.8320312 C79.5996094,45.9531456 78.8281327,49.3417836 77.2851562,51.9980469 C75.7421798,54.6543102 73.6572397,56.5976501 71.0302734,57.828125 C68.4033072,59.0585999 65.4297041,59.6738281 62.109375,59.6738281 C58.8476399,59.6738281 55.9716921,59.0341861 53.4814453,57.7548828 C50.9911985,56.4755795 49.0429758,54.5566534 47.6367188,51.9980469 C46.2304617,49.4394403 45.5273438,46.3144716 45.5273438,42.6230469 C45.5273438,38.6581833 46.3037032,35.3427868 47.8564453,32.6767578 C49.4091875,30.0107289 51.5038931,28.0283268 54.140625,26.7294922 C56.7773569,25.4306576 59.7363117,24.78125 63.0175781,24.78125 Z M67.0898438,42.6523438 C67.0898438,39.4492027 66.9433608,36.8857518 66.6503906,34.9619141 C66.3574204,33.0380763 65.8740268,31.6269576 65.2001953,30.7285156 C64.5263638,29.8300736 63.6230525,29.3808594 62.4902344,29.3808594 C60.9863206,29.3808594 59.8584022,30.3671776 59.1064453,32.3398438 C58.3544884,34.3125099 57.9785156,37.4667752 57.9785156,41.8027344 C57.9785156,44.9668127 58.1445296,47.5204981 58.4765625,49.4638672 C58.8085954,51.4072363 59.3261684,52.8281205 60.0292969,53.7265625 C60.7324254,54.6250045 61.650385,55.0742188 62.7832031,55.0742188 C64.2675855,55.0742188 65.3564418,54.097666 66.0498047,52.1445312 C66.7431675,50.1913965 67.0898438,47.0273656 67.0898438,42.6523438 Z M86.8066406,53.9609375 L86.8066406,32.7792969 L82.96875,31.6074219 L82.96875,26.421875 L96.328125,24.8105469 L96.4746094,24.8105469 L98.4667969,26.1875 L98.4667969,53.9609375 L101.572266,54.546875 L101.572266,59 L83.5253906,59 L83.5253906,54.546875 L86.8066406,53.9609375 Z M85.1953125,15.4648438 C85.1953125,14.2539002 85.4589817,13.1552784 85.9863281,12.1689453 C86.5136745,11.1826123 87.2753856,10.4062528 88.2714844,9.83984375 C89.2675831,9.27343467 90.4296809,8.99023438 91.7578125,8.99023438 L91.7871094,8.99023438 C93.0957097,8.99023438 94.2138625,9.22948979 95.1416016,9.70800781 C96.0693406,10.1865258 96.7724585,10.8408162 97.2509766,11.6708984 C97.7294946,12.5009807 97.96875,13.4335886 97.96875,14.46875 C97.96875,15.6992249 97.7099635,16.7978467 97.1923828,17.7646484 C96.6748021,18.7314501 95.9033254,19.4931613 94.8779297,20.0498047 C93.8525339,20.6064481 92.5976637,20.8847656 91.1132812,20.8847656 L91.0839844,20.8847656 C89.9511662,20.8847656 88.9404341,20.650393 88.0517578,20.1816406 C87.1630815,19.7128883 86.4648463,19.0634807 85.9570312,18.2333984 C85.4492162,17.4033162 85.1953125,16.4804738 85.1953125,15.4648438 Z M108.046875,53.9316406 L108.046875,16.3730469 L104.150391,15.4941406 L104.150391,11.3339844 L117.392578,9.78125 L117.568359,9.78125 L119.560547,11.2460938 L119.560547,53.9316406 L122.8125,54.546875 L122.8125,59 L104.794922,59 L104.794922,54.546875 L108.046875,53.9316406 Z M125.654297,42.3886719 C125.654297,38.6386531 126.333001,35.4502084 127.69043,32.8232422 C129.047858,30.1962759 130.986316,28.2041083 133.505859,26.8466797 C136.025403,25.489251 139.003889,24.8105469 142.441406,24.8105469 C146.855491,24.8105469 150.214832,25.8847549 152.519531,28.0332031 C154.82423,30.1816514 156.005859,33.2089648 156.064453,37.1152344 C156.064453,39.5566528 155.878908,41.7050688 155.507812,43.5605469 L137.578125,43.5605469 C137.871095,46.7050938 138.662103,49.0146411 139.951172,50.4892578 C141.240241,51.9638746 143.07616,52.7011719 145.458984,52.7011719 C146.826179,52.7011719 148.27636,52.4667992 149.80957,51.9980469 C151.342781,51.5292945 152.66601,51.0019561 153.779297,50.4160156 L155.712891,54.546875 C155.107419,55.2304722 154.111335,55.9726522 152.724609,56.7734375 C151.337884,57.5742228 149.726572,58.2578097 147.890625,58.8242188 C146.054678,59.3906278 144.199228,59.6738281 142.324219,59.6738281 C136.523408,59.6738281 132.294935,58.1406403 129.638672,55.0742188 C126.982409,52.0077972 125.654297,47.7793238 125.654297,42.3886719 Z M145.048828,39.1953125 L145.078125,36.734375 C145.078125,34.2734252 144.833987,32.4326233 144.345703,31.2119141 C143.857419,29.9912048 142.978522,29.3808594 141.708984,29.3808594 C140.791011,29.3808594 140.034183,29.6298803 139.438477,30.1279297 C138.84277,30.6259791 138.369142,31.5878835 138.017578,33.0136719 C137.666014,34.4394603 137.480469,36.4999865 137.460938,39.1953125 L145.048828,39.1953125 Z M163.330078,53.9609375 L163.330078,32.7792969 L160.136719,31.6367188 L160.136719,26.2460938 L170.947266,24.8105469 L171.09375,24.8105469 L173.027344,26.1875 L173.027344,27.828125 L172.822266,32.9550781 L173.056641,32.9550781 C173.310548,31.8417913 173.920894,30.6455142 174.887695,29.3662109 C175.854497,28.0869077 177.080071,27.0029341 178.564453,26.1142578 C180.048836,25.2255815 181.650382,24.78125 183.369141,24.78125 C183.955081,24.78125 184.477537,24.8300776 184.936523,24.9277344 C185.39551,25.0253911 185.742186,25.152343 185.976562,25.3085938 L185.976562,37.4960938 C185.21484,36.9296847 184.418949,36.4853532 183.588867,36.1630859 C182.758785,35.8408187 181.660163,35.6796875 180.292969,35.6796875 C179.121088,35.6796875 178.04688,35.7968738 177.070312,36.03125 C176.093745,36.2656262 175.371096,36.5488265 174.902344,36.8808594 L174.902344,53.9316406 L181.025391,54.5761719 L181.025391,59 L160.078125,59 L160.078125,54.546875 L163.330078,53.9609375 Z M192.949219,53.9316406 L192.949219,31.1679688 L188.759766,31.1679688 L188.759766,27.0371094 L192.949219,25.7773438 L192.949219,23.375 C192.949219,20.6015486 193.706047,18.0771598 195.219727,15.8017578 C196.733406,13.5263558 198.774401,11.7343815 201.342773,10.4257812 C203.911146,9.11718096 206.718735,8.46289062 209.765625,8.46289062 C210.820318,8.46289062 211.660153,8.53124932 212.285156,8.66796875 C212.910159,8.80468818 213.496091,8.96093662 214.042969,9.13671875 L214.042969,19.2441406 C213.749999,18.8925764 213.237308,18.5214863 212.504883,18.1308594 C211.772457,17.7402324 210.942387,17.4130873 210.014648,17.1494141 C209.086909,16.8857409 208.212895,16.7539062 207.392578,16.7539062 C206.298823,16.7539062 205.537112,17.0126927 205.107422,17.5302734 C204.677732,18.0478542 204.462891,18.8925723 204.462891,20.0644531 L204.462891,25.6894531 L211.230469,25.6894531 L211.230469,31.1679688 L204.462891,31.1679688 L204.462891,53.9609375 L210.292969,54.5761719 L210.292969,59 L188.671875,59 L188.671875,54.5761719 L192.949219,53.9316406 Z M231.240234,24.78125 C234.521501,24.78125 237.407214,25.420892 239.897461,26.7001953 C242.387708,27.9794986 244.331048,29.8935419 245.727539,32.4423828 C247.12403,34.9912237 247.822266,38.1210752 247.822266,41.8320312 C247.822266,45.9531456 247.050789,49.3417836 245.507812,51.9980469 C243.964836,54.6543102 241.879896,56.5976501 239.25293,57.828125 C236.625963,59.0585999 233.65236,59.6738281 230.332031,59.6738281 C227.070296,59.6738281 224.194348,59.0341861 221.704102,57.7548828 C219.213855,56.4755795 217.265632,54.5566534 215.859375,51.9980469 C214.453118,49.4394403 213.75,46.3144716 213.75,42.6230469 C213.75,38.6581833 214.526359,35.3427868 216.079102,32.6767578 C217.631844,30.0107289 219.726549,28.0283268 222.363281,26.7294922 C225.000013,25.4306576 227.958968,24.78125 231.240234,24.78125 Z M235.3125,42.6523438 C235.3125,39.4492027 235.166017,36.8857518 234.873047,34.9619141 C234.580077,33.0380763 234.096683,31.6269576 233.422852,30.7285156 C232.74902,29.8300736 231.845709,29.3808594 230.712891,29.3808594 C229.208977,29.3808594 228.081058,30.3671776 227.329102,32.3398438 C226.577145,34.3125099 226.201172,37.4667752 226.201172,41.8027344 C226.201172,44.9668127 226.367186,47.5204981 226.699219,49.4638672 C227.031252,51.4072363 227.548825,52.8281205 228.251953,53.7265625 C228.955082,54.6250045 229.873041,55.0742188 231.005859,55.0742188 C232.490242,55.0742188 233.579098,54.097666 234.272461,52.1445312 C234.965824,50.1913965 235.3125,47.0273656 235.3125,42.6523438 Z M255.087891,53.9609375 L255.087891,32.7792969 L251.894531,31.6367188 L251.894531,26.2460938 L262.705078,24.8105469 L262.851563,24.8105469 L264.785156,26.1875 L264.785156,27.828125 L264.580078,32.9550781 L264.814453,32.9550781 C265.068361,31.8417913 265.678706,30.6455142 266.645508,29.3662109 C267.61231,28.0869077 268.837883,27.0029341 270.322266,26.1142578 C271.806648,25.2255815 273.408195,24.78125 275.126953,24.78125 C275.712894,24.78125 276.235349,24.8300776 276.694336,24.9277344 C277.153323,25.0253911 277.499999,25.152343 277.734375,25.3085938 L277.734375,37.4960938 C276.972652,36.9296847 276.176762,36.4853532 275.34668,36.1630859 C274.516597,35.8408187 273.417976,35.6796875 272.050781,35.6796875 C270.8789,35.6796875 269.804692,35.7968738 268.828125,36.03125 C267.851558,36.2656262 267.128909,36.5488265 266.660156,36.8808594 L266.660156,53.9316406 L272.783203,54.5761719 L272.783203,59 L251.835938,59 L251.835938,54.546875 L255.087891,53.9609375 Z M284.472656,53.9609375 L284.472656,32.7792969 L281.279297,31.6367188 L281.279297,26.2460938 L293.378906,24.8105469 L293.525391,24.8105469 L295.253906,26.1875 L295.253906,28.2089844 L295.224609,29.6445312 C296.083989,28.7460893 297.246086,27.9404333 298.710938,27.2275391 C300.175789,26.5146449 301.674797,25.9580098 303.208008,25.5576172 C304.741219,25.1572246 306.025385,24.9570312 307.060547,24.9570312 C309.228526,24.9570312 310.986321,25.3281213 312.333984,26.0703125 C313.681647,26.8125037 314.707028,27.9550704 315.410156,29.4980469 C316.796882,28.0917898 318.466787,26.9834025 320.419922,26.1728516 C322.373057,25.3623006 324.433583,24.9570312 326.601562,24.9570312 C328.925793,24.9570312 330.820305,25.39648 332.285156,26.2753906 C333.750007,27.1543013 334.838864,28.5361234 335.551758,30.4208984 C336.264652,32.3056735 336.621094,34.7617036 336.621094,37.7890625 L336.621094,53.9609375 L339.84375,54.5761719 L339.84375,59 L322.587891,59 L322.587891,54.5761719 L324.785156,53.9609375 L324.785156,38.0820312 C324.785156,36.32421 324.663087,34.9619189 324.418945,33.9951172 C324.174803,33.0283155 323.789065,32.3447286 323.261719,31.9443359 C322.734372,31.5439433 322.001958,31.34375 321.064453,31.34375 C319.560539,31.34375 318.017586,32.0273369 316.435547,33.3945312 C316.63086,34.6445375 316.728516,36.1093666 316.728516,37.7890625 L316.728516,53.9609375 L319.658203,54.5761719 L319.658203,59 L302.34375,59 L302.34375,54.5761719 L304.833984,53.9609375 L304.833984,37.8183594 C304.833984,36.1191321 304.721681,34.8105515 304.49707,33.8925781 C304.27246,32.9746048 303.896487,32.3203145 303.369141,31.9296875 C302.841794,31.5390605 302.099614,31.34375 301.142578,31.34375 C300.185542,31.34375 299.296879,31.5439433 298.476562,31.9443359 C297.656246,32.3447286 296.943362,32.8281222 296.337891,33.3945312 L296.337891,53.9609375 L299.208984,54.5761719 L299.208984,59 L281.542969,59 L281.542969,54.5761719 L284.472656,53.9609375 Z" id="Boilerform" fill="#232323"></path>
11 |                 <rect id="Rectangle-2" fill="#A03EA0" x="0" y="80" width="185" height="5"></rect>
12 |             </g>
13 |         </g>
14 |     </g>
15 | </svg>


--------------------------------------------------------------------------------
/pattern-library/app/css/styles.min.css:
--------------------------------------------------------------------------------
1 | .ndpl-body{background-color:#FFF;-ms-overflow-style:-ms-autohiding-scrollbar;margin:0;padding:0}[class^="ndpl-"],[class*=" ndpl-"]{box-sizing:border-box}.ndpl-disable-scrolling{overflow:hidden}.ndpl-body.nav-open{overflow-y:hidden}.ndpl-loading__title,.ndpl-error,.ndpl-info,.ndpl-header,.ndpl-sidebar,.ndpl-intro,.ndpl-library__title,.ndpl-group__description,.ndpl-component__title,.ndpl-component__description,.ndpl-component__label,.ndpl-component__code-toggle,.ndpl-component__color,.ndpl-page,.ndpl-nav__title,.ndpl-sidebar__title{font-family:'Open Sans','Trebuchet MS','Lucida Grande','Lucida Sans Unicode','Lucida Sans',Tahoma,sans-serif}.ndpl-library__title{font-size:27px;font-weight:400;line-height:36px}.ndpl-component__title{font-size:18px;font-weight:300;line-height:32px}.ndpl-page,.ndpl-intro,.ndpl-group__description,.ndpl-component__description{font-size:12px;font-weight:300;line-height:24px}.ndpl-page h1{margin-bottom:24px}.ndpl-page h2,.ndpl-page h3,.ndpl-page h4,.ndpl-page h5,.ndpl-page h6{margin:24px 0 12px}.ndpl-page h2:first-child,.ndpl-page h3:first-child,.ndpl-page h4:first-child,.ndpl-page h5:first-child,.ndpl-page h6:first-child{margin-top:0}.ndpl-page h1{font-size:26px;font-weight:400;line-height:36px}.ndpl-page h2{font-size:21px;font-weight:300;line-height:36px}.ndpl-page h3{font-size:18px;font-weight:300;line-height:32px}.ndpl-page h4{font-size:16px;font-weight:300;line-height:27px}.ndpl-page h5{font-size:14px;font-weight:300;line-height:24px}.ndpl-page h6{font-size:14px;font-weight:400;line-height:24px}.ndpl-page code,.ndpl-component__description code,.ndpl-group__description code{display:inline-block;color:#BABEC7;border:1px solid #E1E1E1;border-radius:3px;line-height:18px;padding:0 3px}.ndpl-page a,.ndpl-page a[href]{text-decoration:none}.ndpl-page a:hover,.ndpl-page a[href]:hover{text-decoration:underline}.ndpl-page p{margin-bottom:24px}@media only screen and (min-width: 60em){.ndpl-page h1{margin-bottom:48px}.ndpl-page h2,.ndpl-page h3,.ndpl-page h4,.ndpl-page h5,.ndpl-page h6{margin:48px 0 24px}.ndpl-library__title{font-size:36px;line-height:36px}.ndpl-component__title{font-size:21px;line-height:32px}.ndpl-page,.ndpl-intro,.ndpl-group__description,.ndpl-component__description{font-size:14px;line-height:21px}.ndpl-page h1{font-size:36px;line-height:36px}.ndpl-page h2{font-size:28px;line-height:36px}.ndpl-page h3{font-size:21px;line-height:32px}.ndpl-page h4{font-size:18px;line-height:27px}.ndpl-page h5{font-size:16px;line-height:24px}.ndpl-page h6{font-size:16px;line-height:24px}}.ndpl-c-background{background-color:#FFF}.ndpl-c-border{border-color:#E0E6ED}.ndpl-c-highlight{background-color:#F9FAFC}.ndpl-c-brand-c{color:#FEA1AC}.ndpl-c-brand-bg{background-color:#FEA1AC}.ndpl-c-brand-b{border-color:#FEA1AC}.ndpl-c-brand-a:hover{color:#FEA1AC}.ndpl-c-brand-ca a,.ndpl-c-brand-ca a[href],.ndpl-c-brand-ca a[href]:focus,.ndpl-c-brand-ca a:focus,.ndpl-c-brand-ca a[href]:active,.ndpl-c-brand-ca a:active,.ndpl-c-brand-ca a[href]:visited,.ndpl-c-brand-ca a:visited{color:#303637}.ndpl-c-brand-ca a[href]:hover,.ndpl-c-brand-ca a:hover{color:#FEA1AC}.ndpl-c-brand-cai a,.ndpl-c-brand-cai a[href],.ndpl-c-brand-cai a[href]:focus,.ndpl-c-brand-cai a:focus,.ndpl-c-brand-cai a[href]:active,.ndpl-c-brand-cai a:active,.ndpl-c-brand-cai a[href]:visited,.ndpl-c-brand-cai a:visited{color:#FEA1AC}.ndpl-c-brand-cai a[href]:hover,.ndpl-c-brand-cai a:hover{color:#303637!important}.ndpl-nsc,.ndpl-nsc:focus,.ndpl-nsc[href]:focus,.ndpl-nsc:hover,.ndpl-nsc[href]:hover,.ndpl-nsc:active,.ndpl-nsc[href]:active,.ndpl-nsc:visited,.ndpl-nsc[href]:visited{color:#303637!important;text-decoration:none}.ndpl-cf:after{content:"";display:block;clear:both}.ndpl-dark-text{color:#616367!important}.ndpl-light-text{color:#FFF!important}.ndpl-apply-border{border:1px solid #E0E6ED}.ndpl-apply-border + .ndpl-apply-border{border-top:none}.ndpl-loading__title{color:#303637;font-weight:300;margin:0 24px 24px;opacity:0;transition:opacity .5s ease}.wf-opensans-n4-active .ndpl-loading__title{opacity:1}.ndpl-container{opacity:0;transition:opacity .5s ease .5s}.ndpl-container.loaded{opacity:1}.ndpl-container.resizing{visibility:hidden}.ndpl-loading{left:-9999px;opacity:0;padding:96px 0;position:fixed;text-align:center;transition:opacity .5s ease;width:100%}.ndpl-loading.in-progress{left:0;opacity:1}.ndpl-loading__title{font-size:27px;padding-top:24px}@media only screen and (min-width: 60em){.ndpl-loading__title{font-size:36px;padding-top:24px}}.ndpl-error,.ndpl-info{border-radius:6px;color:#FFF;display:inline-block;list-style:none;margin:0 12px;padding:24px;font-size:14px}.ndpl-error{background-color:#f97d7d}.ndpl-info{background-color:#7da9f9}.ndpl-error code,.ndpl-info code{padding:0 3px}.ndpl-error code{background-color:#e07070}.ndpl-info code{background-color:#7098e0}.ndpl-error .ndpl-pre,.ndpl-info .ndpl-pre{margin-bottom:0}@media only screen and (min-width: 60em){.ndpl-error,.ndpl-info{margin:0}}.ndpl-folding-cube{margin:20px auto;width:40px;height:40px;position:relative;-webkit-transform:rotateZ(45deg);transform:rotateZ(45deg)}.ndpl-folding-cube .ndpl-cube{float:left;width:50%;height:50%;position:relative;-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}.ndpl-folding-cube .ndpl-cube:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:#303637;-webkit-animation:ndpl-foldCubeAngle 2.4s infinite linear both;animation:ndpl-foldCubeAngle 2.4s infinite linear both;-webkit-transform-origin:100% 100%;-ms-transform-origin:100% 100%;transform-origin:100% 100%}.ndpl-folding-cube .ndpl-cube2{-webkit-transform:scale(1.1) rotateZ(90deg);transform:scale(1.1) rotateZ(90deg)}.ndpl-folding-cube .ndpl-cube3{-webkit-transform:scale(1.1) rotateZ(180deg);transform:scale(1.1) rotateZ(180deg)}.ndpl-folding-cube .ndpl-cube4{-webkit-transform:scale(1.1) rotateZ(270deg);transform:scale(1.1) rotateZ(270deg)}.ndpl-folding-cube .ndpl-cube2:before{-webkit-animation-delay:.3s;animation-delay:.3s}.ndpl-folding-cube .ndpl-cube3:before{-webkit-animation-delay:.6s;animation-delay:.6s}.ndpl-folding-cube .ndpl-cube4:before{-webkit-animation-delay:.9s;animation-delay:.9s}@-webkit-keyframes ndpl-foldCubeAngle{0%,10%{-webkit-transform:perspective(140px) rotateX(-180deg);transform:perspective(140px) rotateX(-180deg);opacity:0}25%,75%{-webkit-transform:perspective(140px) rotateX(0deg);transform:perspective(140px) rotateX(0deg);opacity:1}90%,100%{-webkit-transform:perspective(140px) rotateY(180deg);transform:perspective(140px) rotateY(180deg);opacity:0}}@keyframes ndpl-foldCubeAngle{0%,10%{-webkit-transform:perspective(140px) rotateX(-180deg);transform:perspective(140px) rotateX(-180deg);opacity:0}25%,75%{-webkit-transform:perspective(140px) rotateX(0deg);transform:perspective(140px) rotateX(0deg);opacity:1}90%,100%{-webkit-transform:perspective(140px) rotateY(180deg);transform:perspective(140px) rotateY(180deg);opacity:0}}.ndpl-header{background-color:#FFF;border-bottom:1px solid #DDD;box-shadow:0 0 1px rgba(0,0,0,0.1);margin:0 0 36px;padding:12px;position:fixed;top:0;width:100%;z-index:9998}.ndpl-header:after{display:none}.ndpl-header__logo{float:left;height:28px;margin:0 6px 0 0}.ndpl-header__title{color:#303637;font-size:18px;font-weight:700;line-height:28px;float:left;margin:0}.ndpl-header__title a{display:none}.ndpl-header__title a,.ndpl-header__title a:hover{text-decoration:none!important}.ndpl-header__title small{font-size:60%;font-weight:300;margin-left:6px}@media only screen and (min-width: 60em){.ndpl-header{display:none}.ndpl-header__title a{display:block}}.ndpl-sidebar{background-color:#FFF;bottom:0;box-shadow:1px 0 2px rgba(0,0,0,0.2);height:100%;left:-100%;overflow-y:auto;overflow-x:hidden;padding:103px 0 24px;position:fixed;right:0;top:0;width:100%;z-index:9997}.ndpl-mobile .ndpl-sidebar{transition:left .5s ease}.ndpl-sidebar.open{left:0}.ndpl-sidebar__header{display:none}.ndpl-sidebar__logo{float:left;margin:0 0 24px;height:50px}@media only screen and (min-width: 60em){.ndpl-sidebar{background-color:#FFF;bottom:0;display:block;left:-264px;padding:0;position:fixed;top:0;width:264px}.loaded .ndpl-sidebar{left:0}.ndpl-sidebar__header{display:block;padding:24px 24px 36px}.ndpl-sidebar__title{color:#303637;clear:left;display:block;font-size:18px;line-height:24px;font-weight:700;margin:0}.ndpl-sidebar__title a{text-decoration:none}.ndpl-sidebar__title a:hover{color:#FEA1AC}.ndpl-sidebar__title small{display:block;font-size:16px;font-weight:400}}.ndpl-copyright{display:block;padding:0 24px 24px}.ndpl-copyright p{color:#B0B1B3;font-size:12px;font-weight:300;line-height:21px}.ndpl-copyright p:last-of-type{margin:0}.ndpl-copyright a{text-decoration:none}.ndpl-nav__title{color:#303637;font-size:12px;font-weight:700;letter-spacing:1px;margin:0 0 21px;padding:0 24px;text-transform:uppercase}.ndpl-nav__items{border-top:1px solid transparent;font-size:14px;font-weight:400;line-height:24px;list-style:none;margin:0 0 72px;padding:0}.ndpl-nav__item{position:relative}.ndpl-nav__item.active .ndpl-nav__group{font-weight:700}.ndpl-nav__child-items{display:none;font-size:14px;list-style:none;min-height:0;padding:0;margin:0}.active .ndpl-nav__child-items{display:block}.ndpl-nav__child-item{border-bottom:1px solid transparent;border-radius:4px}.ndpl-nav__page{border-bottom:1px solid #E0E6ED;border-left:6px solid transparent;cursor:pointer;display:block;font-weight:400;padding:6px 24px 6px 18px;position:relative;text-decoration:none}.ndpl-nav__page.active,.ndpl-nav__page:hover{border-left-color:#FEA1AC}.ndpl-nav__group{border-bottom:1px solid #E0E6ED;display:block;font-weight:400;padding:6px 24px;position:relative;text-decoration:none}.ndpl-nav__group:after{background:transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5IiBoZWlnaHQ9IjE1IiB2aWV3Qm94PSIwIDAgOSAxNSI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbH MtMSB7CiAgICAgICAgZmlsbDogIzIzMWYyMDsKICAgICAgICBmaWxsLXJ1bGU6IGV2ZW5vZGQ7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTQ2MC40NDgsNDkxLjAwOUw0NjgsNDk4LjVsLTcuNTQ4LDcuNDkyTDQ1OSw1MDQuNTU3bDYuMS02LjA1NS02LjEtNi4wNTdaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNDU5IC00OTEpIi8+Cjwvc3ZnPgo=") center no-repeat;background-size:100% auto;content:"";display:block;height:8px;margin-top:-4px;position:absolute;right:24px;top:50%;transform:rotate(90deg);transition:transform .25s ease;width:5px}.active .ndpl-nav__group:after{transform:rotate(-90deg)}.ndpl-nav__component{border-left:6px solid transparent;color:#616367!important;display:block;font-size:14px;font-weight:300;padding:6px 24px 6px 30px;text-decoration:none}.ndpl-nav__component.active,.ndpl-nav__component:hover{border-left-color:#FEA1AC}.ndpl-nav__arrow{margin:-4px 0 0;opacity:.25;position:absolute;right:12px;top:18px;width:16px}.active .ndpl-nav__arrow{transform:rotate(180deg)}.ndpl-nav-handle{display:block;cursor:pointer;height:27px;overflow:hidden;position:fixed;right:0;transform:rotate(0deg);transition:.5s ease-in-out;top:15px;width:48px;z-index:9999}.ndpl-nav-handle.open{position:fixed}.ndpl-nav-handle__container{padding:12px 0 0}.ndpl-nav-handle span{background-color:#303637;display:block;height:3px;opacity:1;position:absolute;right:12px;transform:rotate(0deg);transition:.25s ease-in-out;width:27px}.ndpl-nav-handle span:nth-child(1){top:0}.ndpl-nav-handle span:nth-child(2){top:9px}.ndpl-nav-handle span:nth-child(3){top:18px}.ndpl-nav-handle.open span:nth-child(1){top:11px;transform:rotate(-45deg)}.ndpl-nav-handle.open span:nth-child(2){opacity:0;right:-60px}.ndpl-nav-handle.open span:nth-child(3){top:11px;transform:rotate(45deg)}@media only screen and (min-width: 60em){.ndpl-nav-handle{display:none}}.ndpl-page,.ndpl-library{padding-top:79px}.ndpl-page{color:#616367;padding-left:12px;padding-right:12px}.ndpl-page h1,.ndpl-page h2,.ndpl-page h3,.ndpl-page h4,.ndpl-page h5,.ndpl-page h6{color:#303637}.ndpl-preloaded{left:-9999px;position:absolute;top:-9999px}@media only screen and (min-width: 35em){.ndpl-page{max-width:580px;margin:0 auto}}@media only screen and (min-width: 60em){.ndpl-page,.ndpl-library{margin:0 auto;padding:56px 0}.ndpl-page h1:first-child,.ndpl-page h2:first-child,.ndpl-page h3:first-child,.ndpl-page h4:first-child,.ndpl-page h5:first-child,.ndpl-page h6:first-child,.ndpl-library h1:first-child,.ndpl-library h2:first-child,.ndpl-library h3:first-child,.ndpl-library h4:first-child,.ndpl-library h5:first-child,.ndpl-library h6:first-child{margin-top:0}.ndpl-content{padding:36px 48px 36px 312px}}.ndpl-library__group{overflow:auto;zoom:1}.ndpl-library__title{color:#303637;padding-left:12px;padding-right:12px;margin-bottom:24px}@media only screen and (min-width: 60em){.ndpl-library__title{padding-left:0;padding-right:0;margin-bottom:24px}}.ndpl-group__description{color:#616367;margin-bottom:48px;padding:0 12px}@media only screen and (min-width: 60em){.ndpl-group__description{padding:0}}.ndpl-component{clear:both;margin-bottom:60px}.ndpl-component__title,.ndpl-component__description{color:#616367;padding:0 12px}.ndpl-component__title{margin-bottom:12px}.ndpl-component__description{padding-bottom:24px}@media only screen and (min-width: 60em){.ndpl-component__title,.ndpl-component__description{padding:0}}@media only screen and (min-width: 60em){.ndpl-components{display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-direction:row;-webkit-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap;margin-left:-36px}.ndpl-component{padding-left:36px}.ndpl-component--half{-ms-flex-grow:2;-webkit-flex-grow:2;flex-grow:2;max-width:50%;width:50%}.ndpl-component--full{-ms-flex-grow:1;-webkit-flex-grow:1;flex-grow:1;width:100%}}.ndpl-component__colors{padding:0 12px}.ndpl-component__color-container{float:left;margin-top:24px;width:100%}.ndpl-component__color-container:first-of-type{margin-top:0}.ndpl-component__color-container:nth-child(even){margin-right:0}.ndpl-component__color{float:left;line-height:1;padding:24px 0;text-align:center;width:50%}.ndpl-component__color:first-of-type{border-radius:6px 0 0 6px}.ndpl-component__color:last-of-type{border-radius:0 6px 6px 0}.ndpl-component__color:first-of-type:last-of-type{border-radius:6px;width:100%}.ndpl-component__color div{border:1px solid #FFF;border-radius:3px;color:#FFF;display:inline-block;font-size:13px;letter-spacing:1px;line-height:13px;padding:6px 9px;text-transform:uppercase}.ndpl-component__color div.ndpl-dark-text{color:#B0B1B3!important;border-color:#B0B1B3}@media only screen and (min-width: 60em){.ndpl-component__colors{padding:0}.ndpl-component__color-container{margin-right:3%;width:17.5%}.ndpl-component__color-container:nth-child(even){margin-right:3%}.ndpl-component__color-container:nth-child(5n){margin-right:0}.ndpl-component__color-container:nth-child(-n + 5){margin-top:0}.ndpl-component__color{padding:48px 0;width:100%}.ndpl-component__color:first-of-type{border-radius:6px 6px 0 0}.ndpl-component__color:last-of-type{border-radius:0 0 6px 6px}}.ndpl-component__sample{background-color:#FFF;border-top:1px solid #E0E6ED;border-bottom:1px solid #E0E6ED;padding:36px 12px;position:relative}.ndpl-component__sample:after{display:block;clear:both;content:""}.ndpl-component__sample--inverted{background-color:#333}.ndpl-component__sample-missing,.ndpl-component__sample-hidden{display:block;margin:0 12px;text-align:center}.ndpl-component__code{border-bottom:1px solid #E0E6ED}.ndpl-component__code .ndpl-pre{margin:0}.ndpl-page pre code,.ndpl-component__description pre code,.ndpl-component__code .ndpl-code{box-sizing:border-box;color:#616367;font-size:12px;line-height:18px;opacity:.75;overflow-x:auto;overflow-y:hidden;-ms-overflow-style:-ms-autohiding-scrollbar;padding:36px 12px;white-space:pre;width:100%}.ndpl-page pre code,.ndpl-component__description pre code{padding:12px}.ndpl-component__code-toggle{border-bottom:1px solid transparent;color:#B0B1B3;cursor:pointer;display:block;font-size:12px;letter-spacing:1px;padding:9px 12px;text-align:center;text-transform:uppercase}@media only screen and (min-width: 60em){.ndpl-component__sample{border:1px solid #E0E6ED;border-radius:6px 6px 0 0;padding:36px}.ndpl-component__sample--disabled-code{border-radius:6px}.ndpl-component__sample-missing,.ndpl-component__sample-hidden{margin:0}.ndpl-component__code{border:1px solid #E0E6ED;border-top:none}.ndpl-page pre code,.ndpl-component__description pre code,.ndpl-component__code .ndpl-code{font-size:15px;line-height:21px;padding:36px}.ndpl-page pre code,.ndpl-component__description pre code{padding:12px}.ndpl-component__code-toggle{border-left:1px solid transparent;border-right:1px solid transparent;border-radius:0 0 6px 6px}}


--------------------------------------------------------------------------------
/pattern-library/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en" class="ndpl-c-background">
  3 |     <head>
  4 |         <meta charset="UTF-8">
  5 |         <meta name="viewport" content="width=device-width">
  6 | 
  7 |         <title v-text="project_name ? project_name + ' | Pattern Library' : 'Pattern Library'"></title>
  8 | 
  9 |         <!-- Astrum (https://github.com/NoDivide/astrum) -->
 10 |         <meta name="application-name" content="Astrum {{ version }}" />
 11 | 
 12 |         <!-- Favicon -->
 13 |         <link rel="shortcut icon" type="image/png" :href="project_favicon" />
 14 | 
 15 |         <!-- Pattern Library Stylesheets: DO NOT CHANGE -->
 16 |         <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel='stylesheet' type='text/css'>
 17 |         <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>
 18 |         <script>
 19 |             WebFont.load({
 20 |                 google: {
 21 |                     families: ['Open Sans']
 22 |                 }
 23 |             });
 24 |         </script>
 25 |         <style>
 26 |             /* Targeted theme styles */
 27 |             .ndpl-folding-cube .ndpl-cube:before { background-color: {{ theme.brand_color }} !important; }
 28 |             .ndpl-component__sample--inverted    { background-color: {{ theme.sample_dark_background }} !important }
 29 |             .ndpl-c-background                   { background-color: {{ theme.background_color }} !important; }
 30 |             .ndpl-c-border                       { border-color: {{ theme.border_color }} !important; }
 31 |             .ndpl-c-border-b                     { border-bottom-color: {{ theme.border_color }} !important; }
 32 |             .ndpl-c-highlight                    { background-color: {{ theme.highlight_color }} !important; }
 33 |             .ndpl-c-highlight-ca a.active,
 34 |             .ndpl-c-highlight-ca a:hover         { background-color: {{ theme.highlight_color }} !important; }
 35 |             .ndpl-c-brand-c                      { color: {{ theme.brand_color }} !important; }
 36 |             .ndpl-c-brand-bg                     { background-color: {{ theme.brand_color }} !important; }
 37 |             .ndpl-c-brand-b                      { border-color: {{ theme.brand_color }} !important; }
 38 |             .ndpl-c-brand-bl-ca a.active,
 39 |             .ndpl-c-brand-bl-ca a:hover          { border-left-color: {{ theme.brand_color }} !important; }
 40 |             .ndpl-c-brand-a:hover                { color: {{ theme.brand_color }} !important; }
 41 |             .ndpl-c-brand-ca a:hover             { color: {{ theme.brand_color }} !important; }
 42 |             .ndpl-c-brand-cai a                  { color: {{ theme.brand_color }} !important; }
 43 |         </style>
 44 |         <link rel="stylesheet" v-if="theme.code_highlight_theme" :href="'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/' + theme.code_highlight_theme + '.min.css'">
 45 |         <style v-if="theme.override_code_highlight_bg">.hljs { background: {{ theme.override_code_highlight_bg }}} !important; }</style>
 46 |         <link rel="stylesheet" href="app/css/styles.min.css">
 47 | 
 48 |         <!-- Font Libraries -->
 49 |         <link rel="stylesheet" v-if="font_libraries.google_web_fonts" :href="font_libraries.google_web_fonts">
 50 |         <link rel="stylesheet" v-if="font_libraries.typography_web_fonts" :href="font_libraries.typography_web_fonts">
 51 |         <ndpl-script :script="'https://use.typekit.net/' + font_libraries.typekit_code + '.js'" v-if="font_libraries.typekit_code" inline-template>
 52 |             <script :src="script" @load="loadTypekit"></script>
 53 |         </ndpl-script>
 54 | 
 55 |         <!-- Custom stylesheets are loaded from the assets.css array in data.json -->
 56 |         <link rel="stylesheet" v-for="css in assets.css" :href="css">
 57 |     </head>
 58 |     <body id="top"
 59 |           class="ndpl-body ndpl-c-background"
 60 |           :class="{ 'ndpl-inverted': theme.invert_text, 'ndpl-desktop': !mobile_view, 'ndpl-mobile': mobile_view, 'ndpl-disable-scrolling': sidebar_scrolling }">
 61 | 
 62 |     <div class="ndpl-loading" :class="{ 'in-progress': ! loaded }">
 63 |         <div class="ndpl-folding-cube" v-if="!log.error.length && !log.info.length">
 64 |             <div class="ndpl-cube1 ndpl-cube"></div>
 65 |             <div class="ndpl-cube2 ndpl-cube"></div>
 66 |             <div class="ndpl-cube4 ndpl-cube"></div>
 67 |             <div class="ndpl-cube3 ndpl-cube"></div>
 68 |         </div>
 69 | 
 70 |         <h3 class="ndpl-loading__title" v-if="! loaded && !log.error.length && !log.info.length">Building pattern library...</h3>
 71 |         <h3 class="ndpl-loading__title" v-if="log.error.length">Hold up! We have some errors...</h3>
 72 |         <h3 class="ndpl-loading__title" v-if="log.info.length && !log.error.length">Looks like you have some setup to do...</h3>
 73 | 
 74 |         <ul class="ndpl-error" v-if="log.error.length">
 75 |             <li class="ndpl-error__item" v-for="error in log.error">{{{ error }}}</li>
 76 |         </ul>
 77 |         <ul class="ndpl-info" v-if="log.info.length && !log.error.length">
 78 |             <li class="ndpl-info__item" v-for="info in log.info">{{{ info }}}</li>
 79 |         </ul>
 80 |     </div>
 81 | 
 82 |     <div class="ndpl-container"
 83 |          :class="{ 'loaded': loaded }">
 84 | 
 85 |         <header class="ndpl-header">
 86 | 
 87 |             <img class="ndpl-header__logo"
 88 |                  :src="project_logo"
 89 |                  :alt="project_name"
 90 |                  v-if="project_logo"/>
 91 | 
 92 |             <h1 class="ndpl-header__title ndpl-c-brand-ca">
 93 |                 <span v-if="theme.show_project_name">{{{ project }}}</span>
 94 |                 <small v-if="theme.titles.library_title"
 95 |                        v-text="theme.titles.library_title"></small>
 96 |             </h1>
 97 | 
 98 |             <div class="ndpl-nav-handle"
 99 |                  :class="{ 'open': open_nav }"
100 |                  @click="toggleNav">
101 |                 <div class="ndpl-nav-handle__container">
102 |                     <span></span>
103 |                     <span></span>
104 |                     <span></span>
105 |                 </div>
106 |             </div>
107 |         </header>
108 | 
109 |         <div class="ndpl-sidebar"
110 |              :class="{ 'open': open_nav }">
111 | 
112 |             <header class="ndpl-sidebar__header">
113 | 
114 |                 <img class="ndpl-sidebar__logo"
115 |                      :src="project_logo"
116 |                      :alt="project_name"
117 |                      v-if="project_logo"/>
118 | 
119 |                 <h1 class="ndpl-sidebar__title ndpl-c-brand-ca">
120 |                     <span v-if="theme.show_project_name">{{{ project }}}</span>
121 |                     <small v-if="theme.titles.library_title"
122 |                            v-text="theme.titles.library_title"></small>
123 |                 </h1>
124 | 
125 |             </header>
126 | 
127 |             <nav class="ndpl-nav">
128 |                 <template v-if="content">
129 |                     <h2 class="ndpl-nav__title"
130 |                         v-if="theme.titles.pages_title"
131 |                         v-text="theme.titles.pages_title"></h2>
132 | 
133 |                     <ul class="ndpl-nav__items ndpl-c-border ndpl-c-highlight-ca ndpl-c-brand-bl-ca">
134 |                         <li class="ndpl-nav__item" v-for="page in content.pages">
135 |                             <a class="ndpl-nav__page ndpl-nsc ndpl-c-border-b"
136 |                                :class="{ 'active': active_page && active_page.title === page.title }"
137 |                                v-text="page.title"
138 |                                @click.prevent="loadPage(page)">
139 |                             </a>
140 |                         </li>
141 |                     </ul>
142 |                 </template>
143 | 
144 |                 <h2 class="ndpl-nav__title">
145 |                     <a class="ndpl-nsc"
146 |                        href="#top"
147 |                        @click.prevent="scrollToHref"
148 |                        v-if="theme.titles.components_title"
149 |                        v-text="theme.titles.components_title"></a>
150 |                 </h2>
151 | 
152 |                 <ul class="ndpl-nav__items ndpl-c-border">
153 |                     <li class="ndpl-nav__item"
154 |                         v-for="group in groups"
155 |                         :class="{ 'active': active_components.length > 0 && group.id == active_components[0].group_id || group.id == open_group }">
156 | 
157 |                         <a :href="'#' + group.id"
158 |                            class="ndpl-nav__group ndpl-nsc ndpl-c-border-b"
159 |                            v-text="group.title"
160 |                            @click.prevent="toggleOpenGroups(group)">
161 |                         </a>
162 | 
163 |                         <ul class="ndpl-nav__child-items ndpl-c-highlight"
164 |                             v-if="group.components.length">
165 | 
166 |                             <li class="ndpl-nav__child-item ndpl-c-border-b ndpl-c-brand-bl-ca"
167 |                                 v-for="component in group.components">
168 |                                 <a :href="'#' + component.id"
169 |                                    class="ndpl-nav__component ndpl-nsc"
170 |                                    :class="{ 'active': active_components.indexOf(component) >= 0 }"
171 |                                    v-text="component.title"
172 |                                    @click.prevent="scrollToHref">
173 |                                 </a>
174 |                             </li>
175 |                         </ul>
176 |                     </li>
177 |                 </ul>
178 | 
179 |             </nav>
180 | 
181 |             <div class="ndpl-copyright ndpl-c-brand-ca">
182 | 
183 |                 <p v-if="copyright_start_year && client || all_creators">
184 |                     <template v-if="copyright_start_year && client">
185 |                         &copy; {{ copyright_year }} {{{ client }}}.
186 |                     </template>
187 |                     <template v-if="all_creators">
188 |                         <br/>Pattern library created by {{{ all_creators }}}.
189 |                     </template>
190 |                 </p>
191 | 
192 |                 <p v-if="theme.show_version">Astrum v{{ version }}</p>
193 | 
194 |             </div>
195 |         </div>
196 | 
197 |         <div class="ndpl-content" data-app="astrum">
198 |             <div class="ndpl-page ndpl-c-brand-cai" :style="library_inline_styles" v-if="active_page">{{{ active_page.markup }}}</div>
199 |             <div class="ndpl-library" :style="library_inline_styles" :class="{ 'ndpl-preloaded': active_page }">
200 | 
201 |                 <ndpl-group v-for="group in groups"
202 |                             :group="group"
203 |                             inline-template>
204 | 
205 |                     <div class="ndpl-library__group"
206 |                          :id="group.id">
207 | 
208 |                         <h2 class="ndpl-library__title">{{ group.title }}</h2>
209 | 
210 |                         <div class="ndpl-group__description ndpl-c-brand-ca"
211 |                              v-html="group.description"
212 |                              v-if="group.description"></div>
213 | 
214 |                         <div class="ndpl-components">
215 |                             <ndpl-component v-for="component in group.components"
216 |                                             :component="component"
217 |                                             inline-template>
218 | 
219 |                                 <div class="ndpl-component"
220 |                                      :id="component.id"
221 |                                      :group-id="component.group_id"
222 |                                      :class="'ndpl-component--' + component.width">
223 | 
224 |                                     <h3 class="ndpl-component__title">{{ component.title }}</h3>
225 | 
226 |                                     <div class="ndpl-component__description ndpl-c-brand-ca"
227 |                                          v-html="component.description"></div>
228 | 
229 |                                     <template v-if="component.type == 'colors'">
230 |                                         <div v-if="component.colors.length" class="ndpl-component__colors ndpl-cf">
231 | 
232 |                                             <div class="ndpl-component__color-container"
233 |                                                  v-for="color in component.colors">
234 | 
235 |                                                 <div class="ndpl-component__color"
236 |                                                      v-for="item in color.split(',')"
237 |                                                      :class="{ 'ndpl-apply-border ndpl-c-border': shouldApplyBorder(item), }"
238 |                                                      :style="'background-color:' + item">
239 |                                                     <div :class="{ 'ndpl-dark-text': shouldInvertText(item) }">{{ item }}</div>
240 |                                                 </div>
241 | 
242 |                                             </div>
243 | 
244 |                                         </div>
245 |                                         <ul v-else class="ndpl-component__sample-missing ndpl-info">
246 |                                             <li class="ndpl-info__item">Locate this component in your <code>data.json</code> file and add your colors to the "colors" array that has been created for you e.g.:</li>
247 |                                             <li><pre class="ndpl-pre">"colors": ["#4c4c4c","#7d8284","#a6b1b5","#e6eaf2","#FFFFFF"]</pre></li>
248 |                                         </ul>
249 |                                     </template>
250 |                                     <template v-else>
251 |                                         <div class="ndpl-component__container"
252 |                                              v-show="isCodeVisible()">
253 | 
254 |                                             <div class="ndpl-component__sample ndpl-c-border"
255 |                                                  :class="{
256 |                                                     'ndpl-component__sample--inverted': component.options.sample_dark_background,
257 |                                                     'ndpl-component__sample--disabled-code': component.options.disable_code_sample
258 |                                                  }"
259 |                                                  :style="inline_styles"
260 |                                                  v-if="component.html">
261 |                                                 {{{ component.html }}}
262 |                                             </div>
263 | 
264 |                                             <template v-if="component.html">
265 |                                                 <div class="ndpl-component__code ndpl-c-border"
266 |                                                      v-show="component.code_show">
267 |                                                     <pre class="ndpl-pre"><code class="ndpl-code html" v-text="component.html"></code></pre>
268 |                                                 </div>
269 |                                                 <a v-if="!component.options.disable_code_sample"
270 |                                                    class="ndpl-component__code-toggle ndpl-c-highlight ndpl-c-border"
271 |                                                    @click.prevent="component.code_show = ! component.code_show"
272 |                                                    v-text="component.code_show ? 'Hide code sample' : 'Show code sample'"></a>
273 |                                             </template>
274 |                                             <ul v-else class="ndpl-component__sample-missing ndpl-info">
275 |                                                 <li class="ndpl-info__item">Add your component markup to <code>/components/{{ component.group }}/{{ component.name }}/markup.html</code></li>
276 |                                             </ul>
277 | 
278 |                                         </div>
279 | 
280 |                                         <div class="ndpl-component__sample-hidden ndpl-info"
281 |                                              v-show="!isCodeVisible()">
282 |                                             This component is hidden at this resolution.
283 |                                         </div>
284 |                                     </template>
285 |                                 </div>
286 |                             </ndpl-component>
287 |                         </div>
288 |                     </div>
289 |                 </ndpl-group>
290 |             </div>
291 |         </div>
292 |     </div>
293 | 
294 |     <ndpl-script v-for="script in assets.js"
295 |                  :script="script"
296 |                  v-if="loaded"
297 |                  inline-template>
298 |         <script :src="script"></script>
299 |     </ndpl-script>
300 | 
301 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.25/vue.min.js"></script>
302 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.8.0/vue-resource.min.js"></script>
303 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
304 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js"></script>
305 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/smooth-scroll/10.0.0/js/smooth-scroll.min.js"></script>
306 |     <script src="app/js/main.min.js"></script>
307 |     </body>
308 | </html>
309 | 


--------------------------------------------------------------------------------
/pattern-library/app/css/styles.css:
--------------------------------------------------------------------------------
   1 | /**
   2 |  * Base styles
   3 |  * ----------------------------------------//
   4 |  */
   5 | .ndpl-body {
   6 |     background-color: #FFF;
   7 |     -ms-overflow-style: -ms-autohiding-scrollbar;
   8 |     margin: 0;
   9 |     padding: 0;
  10 | }
  11 | [class^="ndpl-"], [class*=" ndpl-"] {
  12 |     box-sizing: border-box;
  13 | }
  14 | .ndpl-disable-scrolling {
  15 |     overflow: hidden;
  16 | }
  17 | .ndpl-body.nav-open {
  18 |     overflow-y: hidden;
  19 | }
  20 | 
  21 | .ndpl-loading__title,
  22 | .ndpl-error,
  23 | .ndpl-info,
  24 | .ndpl-header,
  25 | .ndpl-sidebar,
  26 | .ndpl-intro,
  27 | .ndpl-library__title,
  28 | .ndpl-group__description,
  29 | .ndpl-component__title,
  30 | .ndpl-component__description,
  31 | .ndpl-component__label,
  32 | .ndpl-component__code-toggle,
  33 | .ndpl-component__color,
  34 | .ndpl-page,
  35 | .ndpl-nav__title,
  36 | .ndpl-sidebar__title {
  37 |     font-family: 'Open Sans', 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif;
  38 | }
  39 | 
  40 | /* Heading type sizes */
  41 | .ndpl-library__title {
  42 |     font-size: 27px;
  43 |     font-weight: 400;
  44 |     line-height: 36px;
  45 | }
  46 | .ndpl-component__title {
  47 |     font-size: 18px;
  48 |     font-weight: 300;
  49 |     line-height: 32px;
  50 | }
  51 | 
  52 | /* Body type size */
  53 | .ndpl-page,
  54 | .ndpl-intro,
  55 | .ndpl-group__description,
  56 | .ndpl-component__description {
  57 |     font-size: 12px;
  58 |     font-weight: 300;
  59 |     line-height: 24px;
  60 | }
  61 | 
  62 | /* Page sizes */
  63 | .ndpl-page h1 { margin-bottom: 24px; }
  64 | .ndpl-page h2,
  65 | .ndpl-page h3,
  66 | .ndpl-page h4,
  67 | .ndpl-page h5,
  68 | .ndpl-page h6 { margin: 24px 0 12px; }
  69 | .ndpl-page h2:first-child,
  70 | .ndpl-page h3:first-child,
  71 | .ndpl-page h4:first-child,
  72 | .ndpl-page h5:first-child,
  73 | .ndpl-page h6:first-child { margin-top: 0; }
  74 | .ndpl-page h1 { font-size: 26px; font-weight: 400; line-height: 36px; }
  75 | .ndpl-page h2 { font-size: 21px; font-weight: 300; line-height: 36px; }
  76 | .ndpl-page h3 { font-size: 18px; font-weight: 300; line-height: 32px; }
  77 | .ndpl-page h4 { font-size: 16px; font-weight: 300; line-height: 27px; }
  78 | .ndpl-page h5 { font-size: 14px; font-weight: 300; line-height: 24px; }
  79 | .ndpl-page h6 { font-size: 14px; font-weight: 400; line-height: 24px; }
  80 | .ndpl-page code,
  81 | .ndpl-component__description code,
  82 | .ndpl-group__description code {
  83 |     display: inline-block;
  84 |     color: #BABEC7;
  85 |     border: 1px solid #E1E1E1;
  86 |     border-radius: 3px;
  87 |     line-height: 18px;
  88 |     padding: 0 3px;
  89 | }
  90 | .ndpl-page a,
  91 | .ndpl-page a[href] {
  92 |     text-decoration: none;
  93 | }
  94 | .ndpl-page a:hover,
  95 | .ndpl-page a[href]:hover {
  96 |     text-decoration: underline;
  97 | }
  98 | .ndpl-page p {
  99 |     margin-bottom: 24px;
 100 | }
 101 | 
 102 | @media only screen and (min-width: 60em) {
 103 | 
 104 |     .ndpl-page h1 { margin-bottom: 48px; }
 105 |     .ndpl-page h2,
 106 |     .ndpl-page h3,
 107 |     .ndpl-page h4,
 108 |     .ndpl-page h5,
 109 |     .ndpl-page h6 { margin: 48px 0 24px; }
 110 | 
 111 |     /* Heading type sizes */
 112 |     .ndpl-library__title {
 113 |         font-size: 36px;
 114 |         line-height: 36px;
 115 |     }
 116 |     .ndpl-component__title {
 117 |         font-size: 21px;
 118 |         line-height: 32px;
 119 |     }
 120 | 
 121 |     /* Body type size */
 122 |     .ndpl-page,
 123 |     .ndpl-intro,
 124 |     .ndpl-group__description,
 125 |     .ndpl-component__description {
 126 |         font-size: 14px;
 127 |         line-height: 21px;
 128 |     }
 129 | 
 130 |     /* Page sizes */
 131 |     .ndpl-page h1 { font-size: 36px; line-height: 36px; }
 132 |     .ndpl-page h2 { font-size: 28px; line-height: 36px; }
 133 |     .ndpl-page h3 { font-size: 21px; line-height: 32px; }
 134 |     .ndpl-page h4 { font-size: 18px; line-height: 27px; }
 135 |     .ndpl-page h5 { font-size: 16px; line-height: 24px; }
 136 |     .ndpl-page h6 { font-size: 16px; line-height: 24px; }
 137 | }
 138 | 
 139 | /**
 140 |  * #303637 - Heading color
 141 |  * #616367 - Body color
 142 |  * #B0B1B3 - Dimmed color
 143 |  *
 144 |  * Theme colors
 145 |  * ----------------------------------------//
 146 |  */
 147 | .ndpl-c-background               { background-color: #FFF; }    /* Background color */
 148 | .ndpl-c-border                   { border-color: #E0E6ED; }     /* Border color */
 149 | .ndpl-c-highlight                { background-color: #F9FAFC; } /* Highlight background */
 150 | .ndpl-c-brand-c                  { color: #FEA1AC; }            /* Brand color */
 151 | .ndpl-c-brand-bg                 { background-color: #FEA1AC; } /* Brand background color */
 152 | .ndpl-c-brand-b                  { border-color: #FEA1AC; }     /* Brand border color */
 153 | .ndpl-c-brand-a:hover            { color: #FEA1AC; }            /* Brand anchor on hover */
 154 | .ndpl-c-brand-ca a,
 155 | .ndpl-c-brand-ca a[href],
 156 | .ndpl-c-brand-ca a[href]:focus,
 157 | .ndpl-c-brand-ca a:focus,
 158 | .ndpl-c-brand-ca a[href]:active,
 159 | .ndpl-c-brand-ca a:active,
 160 | .ndpl-c-brand-ca a[href]:visited,
 161 | .ndpl-c-brand-ca a:visited        { color: #303637; }            /* Brand child anchors */
 162 | .ndpl-c-brand-ca a[href]:hover,
 163 | .ndpl-c-brand-ca a:hover          { color: #FEA1AC; }            /* Brand child anchors on hover */
 164 | .ndpl-c-brand-cai a,
 165 | .ndpl-c-brand-cai a[href],
 166 | .ndpl-c-brand-cai a[href]:focus,
 167 | .ndpl-c-brand-cai a:focus,
 168 | .ndpl-c-brand-cai a[href]:active,
 169 | .ndpl-c-brand-cai a:active,
 170 | .ndpl-c-brand-cai a[href]:visited,
 171 | .ndpl-c-brand-cai a:visited        { color: #FEA1AC; }            /* Brand child anchors */
 172 | .ndpl-c-brand-cai a[href]:hover,
 173 | .ndpl-c-brand-cai a:hover          { color: #303637 !important; }            /* Brand child anchors on hover */
 174 | 
 175 | /**
 176 |  * Helpers
 177 |  * ----------------------------------------//
 178 |  */
 179 | /* No state change for anchors */
 180 | .ndpl-nsc,
 181 | .ndpl-nsc:focus,
 182 | .ndpl-nsc[href]:focus,
 183 | .ndpl-nsc:hover,
 184 | .ndpl-nsc[href]:hover,
 185 | .ndpl-nsc:active,
 186 | .ndpl-nsc[href]:active,
 187 | .ndpl-nsc:visited,
 188 | .ndpl-nsc[href]:visited {
 189 |     color: #303637 !important;
 190 |     text-decoration: none;
 191 | }
 192 | 
 193 | .ndpl-cf:after {
 194 |     content: "";
 195 |     display: block;
 196 |     clear: both;
 197 | }
 198 | 
 199 | .ndpl-dark-text {
 200 |     color: #616367 !important;
 201 | }
 202 | .ndpl-light-text {
 203 |     color: #FFF !important;
 204 | }
 205 | .ndpl-apply-border {
 206 |     border: 1px solid #E0E6ED;
 207 | }
 208 | .ndpl-apply-border + .ndpl-apply-border {
 209 |     border-top: none;
 210 | }
 211 | 
 212 | /**
 213 |  * Loading
 214 |  * ----------------------------------------//
 215 |  */
 216 | .ndpl-loading__title {
 217 |     color: #303637;
 218 |     font-weight: 300;
 219 |     margin: 0 24px 24px;
 220 |     opacity: 0;
 221 |     transition: opacity .5s ease;
 222 | }
 223 | .wf-opensans-n4-active .ndpl-loading__title {
 224 |     opacity: 1;
 225 | }
 226 | 
 227 | .ndpl-container {
 228 |     opacity: 0;
 229 |     transition: opacity .5s ease .5s;
 230 | }
 231 | .ndpl-container.loaded {
 232 |     opacity: 1;
 233 | }
 234 | .ndpl-container.resizing {
 235 |     visibility: hidden;
 236 | }
 237 | 
 238 | .ndpl-loading {
 239 |     left: -9999px;
 240 |     opacity: 0;
 241 |     padding: 96px 0;
 242 |     position: fixed;
 243 |     text-align: center;
 244 |     transition: opacity .5s ease;
 245 |     width: 100%;
 246 | }
 247 | .ndpl-loading.in-progress {
 248 |     left: 0;
 249 |     opacity: 1;
 250 | }
 251 | .ndpl-loading__title {
 252 |     font-size: 27px;
 253 |     padding-top: 24px;
 254 | }
 255 | 
 256 | @media only screen and (min-width: 60em) {
 257 | 
 258 |     .ndpl-loading__title {
 259 |         font-size: 36px;
 260 |         padding-top: 24px;
 261 |     }
 262 | }
 263 | 
 264 | /**
 265 |  * Errors
 266 |  * ----------------------------------------//
 267 |  */
 268 | .ndpl-error,
 269 | .ndpl-info {
 270 |     border-radius: 6px;
 271 |     color: #FFF;
 272 |     display: inline-block;
 273 |     list-style: none;
 274 |     margin: 0 12px;
 275 |     padding: 24px;
 276 |     font-size: 14px;
 277 | }
 278 | .ndpl-error {
 279 |     background-color: #f97d7d;
 280 | }
 281 | .ndpl-info {
 282 |     background-color: #7da9f9;
 283 | }
 284 | .ndpl-error code,
 285 | .ndpl-info code {
 286 |     padding: 0 3px;
 287 | }
 288 | .ndpl-error code { background-color: #e07070; }
 289 | .ndpl-info code  { background-color: #7098e0; }
 290 | 
 291 | .ndpl-error .ndpl-pre,
 292 | .ndpl-info .ndpl-pre {
 293 |     margin-bottom: 0;
 294 | }
 295 | 
 296 | @media only screen and (min-width: 60em) {
 297 | 
 298 |     .ndpl-error,
 299 |     .ndpl-info {
 300 |         margin: 0;
 301 |     }
 302 | }
 303 | 
 304 | /**
 305 |  * Folding cube animation
 306 |  * Created by Tobias Ahlin
 307 |  * http://tobiasahlin.com/spinkit/
 308 |  * ----------------------------------------//
 309 |  */
 310 | .ndpl-folding-cube {
 311 |     margin: 20px auto;
 312 |     width: 40px;
 313 |     height: 40px;
 314 |     position: relative;
 315 |     -webkit-transform: rotateZ(45deg);
 316 |     transform: rotateZ(45deg);
 317 | }
 318 | 
 319 | .ndpl-folding-cube .ndpl-cube {
 320 |     float: left;
 321 |     width: 50%;
 322 |     height: 50%;
 323 |     position: relative;
 324 |     -webkit-transform: scale(1.1);
 325 |     -ms-transform: scale(1.1);
 326 |     transform: scale(1.1);
 327 | }
 328 | .ndpl-folding-cube .ndpl-cube:before {
 329 |     content: '';
 330 |     position: absolute;
 331 |     top: 0;
 332 |     left: 0;
 333 |     width: 100%;
 334 |     height: 100%;
 335 |     background-color: #303637;
 336 |     -webkit-animation: ndpl-foldCubeAngle 2.4s infinite linear both;
 337 |     animation: ndpl-foldCubeAngle 2.4s infinite linear both;
 338 |     -webkit-transform-origin: 100% 100%;
 339 |     -ms-transform-origin: 100% 100%;
 340 |     transform-origin: 100% 100%;
 341 | }
 342 | .ndpl-folding-cube .ndpl-cube2 {
 343 |     -webkit-transform: scale(1.1) rotateZ(90deg);
 344 |     transform: scale(1.1) rotateZ(90deg);
 345 | }
 346 | .ndpl-folding-cube .ndpl-cube3 {
 347 |     -webkit-transform: scale(1.1) rotateZ(180deg);
 348 |     transform: scale(1.1) rotateZ(180deg);
 349 | }
 350 | .ndpl-folding-cube .ndpl-cube4 {
 351 |     -webkit-transform: scale(1.1) rotateZ(270deg);
 352 |     transform: scale(1.1) rotateZ(270deg);
 353 | }
 354 | .ndpl-folding-cube .ndpl-cube2:before {
 355 |     -webkit-animation-delay: 0.3s;
 356 |     animation-delay: 0.3s;
 357 | }
 358 | .ndpl-folding-cube .ndpl-cube3:before {
 359 |     -webkit-animation-delay: 0.6s;
 360 |     animation-delay: 0.6s;
 361 | }
 362 | .ndpl-folding-cube .ndpl-cube4:before {
 363 |     -webkit-animation-delay: 0.9s;
 364 |     animation-delay: 0.9s;
 365 | }
 366 | @-webkit-keyframes ndpl-foldCubeAngle {
 367 |     0%, 10% {
 368 |         -webkit-transform: perspective(140px) rotateX(-180deg);
 369 |         transform: perspective(140px) rotateX(-180deg);
 370 |         opacity: 0;
 371 |     } 25%, 75% {
 372 |           -webkit-transform: perspective(140px) rotateX(0deg);
 373 |           transform: perspective(140px) rotateX(0deg);
 374 |           opacity: 1;
 375 |       } 90%, 100% {
 376 |             -webkit-transform: perspective(140px) rotateY(180deg);
 377 |             transform: perspective(140px) rotateY(180deg);
 378 |             opacity: 0;
 379 |         }
 380 | }
 381 | 
 382 | @keyframes ndpl-foldCubeAngle {
 383 |     0%, 10% {
 384 |         -webkit-transform: perspective(140px) rotateX(-180deg);
 385 |         transform: perspective(140px) rotateX(-180deg);
 386 |         opacity: 0;
 387 |     } 25%, 75% {
 388 |           -webkit-transform: perspective(140px) rotateX(0deg);
 389 |           transform: perspective(140px) rotateX(0deg);
 390 |           opacity: 1;
 391 |       } 90%, 100% {
 392 |             -webkit-transform: perspective(140px) rotateY(180deg);
 393 |             transform: perspective(140px) rotateY(180deg);
 394 |             opacity: 0;
 395 |         }
 396 | }
 397 | 
 398 | /**
 399 |  * Header
 400 |  * ----------------------------------------//
 401 |  */
 402 | .ndpl-header {
 403 |     background-color: #FFF;
 404 |     border-bottom: 1px solid #DDD;
 405 |     box-shadow: 0 0 1px rgba(0,0,0,0.1);
 406 |     margin:0 0 36px;
 407 |     padding: 12px;
 408 |     position: fixed;
 409 |     top: 0;
 410 |     width: 100%;
 411 |     z-index: 9998;
 412 | }
 413 | .ndpl-header:after {
 414 |     display: none;
 415 | }
 416 | .ndpl-header__logo {
 417 |     float: left;
 418 |     height: 28px;
 419 |     margin: 0 6px 0 0;
 420 | }
 421 | .ndpl-header__title {
 422 |     color: #303637;
 423 |     font-size: 18px;
 424 |     font-weight: 700;
 425 |     line-height: 28px;
 426 |     float: left;
 427 |     margin: 0;
 428 | }
 429 | .ndpl-header__title a {
 430 |     display: none;
 431 | }
 432 | .ndpl-header__title a,
 433 | .ndpl-header__title a:hover {
 434 |     text-decoration: none !important;
 435 | }
 436 | .ndpl-header__title small {
 437 |     font-size: 60%;
 438 |     font-weight: 300;
 439 |     margin-left: 6px;
 440 | }
 441 | 
 442 | @media only screen and (min-width: 60em) {
 443 | 
 444 |     .ndpl-header {
 445 |         display: none;
 446 |     }
 447 | 
 448 |     .ndpl-header__title a {
 449 |         display: block;
 450 |     }
 451 | }
 452 | 
 453 | /**
 454 |  * Sidebar
 455 |  * ----------------------------------------//
 456 |  */
 457 | .ndpl-sidebar {
 458 |     background-color: #FFF;
 459 |     bottom: 0;
 460 |     box-shadow: 1px 0 2px rgba(0,0,0,0.2);
 461 |     height: 100%;
 462 |     left: -100%;
 463 |     overflow-y: auto;
 464 |     overflow-x: hidden;
 465 |     padding: 103px 0 24px;
 466 |     position: fixed;
 467 |     right: 0;
 468 |     top: 0;
 469 |     width: 100%;
 470 |     z-index: 9997;
 471 | }
 472 | .ndpl-mobile .ndpl-sidebar {
 473 |     transition: left .5s ease;
 474 | }
 475 | .ndpl-sidebar.open {
 476 |     left: 0;
 477 | }
 478 | .ndpl-sidebar__header {
 479 |     display: none;
 480 | }
 481 | .ndpl-sidebar__logo {
 482 |     float: left;
 483 |     margin: 0 0 24px 0;
 484 |     height: 50px;
 485 | }
 486 | 
 487 | @media only screen and (min-width: 60em) {
 488 | 
 489 |     .ndpl-sidebar {
 490 |         background-color: #FFF;
 491 |         bottom: 0;
 492 |         display: block;
 493 |         left: -264px;
 494 |         padding: 0;
 495 |         position: fixed;
 496 |         top: 0;
 497 |         width: 264px;
 498 |     }
 499 |     .loaded .ndpl-sidebar {
 500 |         left: 0;
 501 |     }
 502 | 
 503 |     /**
 504 |      * Sidebar - Header
 505 |      * ----------------------------------------//
 506 |      */
 507 |     .ndpl-sidebar__header {
 508 |         display: block;
 509 |         padding: 24px 24px 36px;
 510 |     }
 511 |     .ndpl-sidebar__title {
 512 |         color: #303637;
 513 |         clear: left;
 514 |         display: block;
 515 |         font-size: 18px;
 516 |         line-height: 24px;
 517 |         font-weight: 700;
 518 |         margin: 0;
 519 |     }
 520 |     .ndpl-sidebar__title a {
 521 |         text-decoration: none;
 522 |     }
 523 |     .ndpl-sidebar__title a:hover {
 524 |         color: #FEA1AC;
 525 |     }
 526 |     .ndpl-sidebar__title small {
 527 |         display: block;
 528 |         font-size: 16px;
 529 |         font-weight: 400;
 530 |     }
 531 | }
 532 | 
 533 | /**
 534 |  * Copyright info
 535 |  * ----------------------------------------//
 536 |  */
 537 | .ndpl-copyright {
 538 |     display: block;
 539 |     padding: 0 24px 24px;
 540 | }
 541 | .ndpl-copyright p {
 542 |     color: #B0B1B3;
 543 |     font-size: 12px;
 544 |     font-weight: 300;
 545 |     line-height: 21px;
 546 | }
 547 | .ndpl-copyright p:last-of-type {
 548 |     margin: 0;
 549 | }
 550 | .ndpl-copyright a {
 551 |     text-decoration: none;
 552 | }
 553 | 
 554 | /**
 555 |  * Navigation - Title
 556 |  * ----------------------------------------//
 557 |  */
 558 | .ndpl-nav__title {
 559 |     color: #303637;
 560 |     font-size: 12px;
 561 |     font-weight: 700;
 562 |     letter-spacing: 1px;
 563 |     margin: 0 0 21px;
 564 |     padding: 0 24px;
 565 |     text-transform: uppercase;
 566 | }
 567 | 
 568 | /**
 569 |  * Navigation - Structure
 570 |  * ----------------------------------------//
 571 |  */
 572 | .ndpl-nav__items {
 573 |     border-top: 1px solid transparent;
 574 |     font-size: 14px;
 575 |     font-weight: 400;
 576 |     line-height: 24px;
 577 |     list-style: none;
 578 |     margin: 0 0 72px;
 579 |     padding: 0;
 580 | }
 581 | .ndpl-nav__item {
 582 |     position: relative;
 583 | }
 584 | .ndpl-nav__item.active .ndpl-nav__group {
 585 |     font-weight: 700;
 586 | }
 587 | 
 588 | .ndpl-nav__child-items {
 589 |     display: none;
 590 |     font-size: 14px;
 591 |     list-style: none;
 592 |     min-height: 0;
 593 |     padding: 0;
 594 |     margin: 0;
 595 | }
 596 | .active .ndpl-nav__child-items {
 597 |     display: block;
 598 | }
 599 | .ndpl-nav__child-item {
 600 |     border-bottom: 1px solid transparent;
 601 |     border-radius: 4px;
 602 | }
 603 | 
 604 | /**
 605 |  * Navigation - Page
 606 |  * ----------------------------------------//
 607 |  */
 608 | .ndpl-nav__page {
 609 |     border-bottom: 1px solid #E0E6ED;
 610 |     border-left: 6px solid transparent;
 611 |     cursor: pointer;
 612 |     display: block;
 613 |     font-weight: 400;
 614 |     padding: 6px 24px 6px 18px;
 615 |     position: relative;
 616 |     text-decoration: none;
 617 | }
 618 | .ndpl-nav__page.active,
 619 | .ndpl-nav__page:hover {
 620 |     border-left-color: #FEA1AC;
 621 | }
 622 | 
 623 | 
 624 | /**
 625 |  * Navigation - Group
 626 |  * ----------------------------------------//
 627 |  */
 628 | .ndpl-nav__group {
 629 |     border-bottom: 1px solid #E0E6ED;
 630 |     display: block;
 631 |     font-weight: 400;
 632 |     padding: 6px 24px;
 633 |     position: relative;
 634 |     text-decoration: none;
 635 | }
 636 | .ndpl-nav__group:after {
 637 |     background: transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5IiBoZWlnaHQ9IjE1IiB2aWV3Qm94PSIwIDAgOSAxNSI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbH MtMSB7CiAgICAgICAgZmlsbDogIzIzMWYyMDsKICAgICAgICBmaWxsLXJ1bGU6IGV2ZW5vZGQ7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTQ2MC40NDgsNDkxLjAwOUw0NjgsNDk4LjVsLTcuNTQ4LDcuNDkyTDQ1OSw1MDQuNTU3bDYuMS02LjA1NS02LjEtNi4wNTdaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNDU5IC00OTEpIi8+Cjwvc3ZnPgo=") center no-repeat;
 638 |     background-size: 100% auto;
 639 |     content: "";
 640 |     display: block;
 641 |     height: 8px;
 642 |     margin-top: -4px;
 643 |     position: absolute;
 644 |     right: 24px;
 645 |     top: 50%;
 646 |     transform: rotate(90deg);
 647 |     transition: transform .25s ease;
 648 |     width: 5px;
 649 | }
 650 | .active .ndpl-nav__group:after {
 651 |     transform: rotate(-90deg);
 652 | }
 653 | 
 654 | /**
 655 |  * Navigation - Component
 656 |  * ----------------------------------------//
 657 |  */
 658 | .ndpl-nav__component {
 659 |     border-left: 6px solid transparent;
 660 |     color: #616367 !important;
 661 |     display: block;
 662 |     font-size: 14px;
 663 |     font-weight: 300;
 664 |     padding: 6px 24px 6px 30px;
 665 |     text-decoration: none;
 666 | }
 667 | .ndpl-nav__component.active,
 668 | .ndpl-nav__component:hover {
 669 |     border-left-color: #FEA1AC;
 670 | }
 671 | .ndpl-nav__arrow {
 672 |     margin: -4px 0 0;
 673 |     opacity: 0.25;
 674 |     position: absolute;
 675 |     right: 12px;
 676 |     top: 18px;
 677 |     width: 16px;
 678 | }
 679 | .active .ndpl-nav__arrow {
 680 |     transform: rotate(180deg);
 681 | }
 682 | 
 683 | /*
 684 |  * Navigation
 685 |  * ----------------------------------------//
 686 |  */
 687 | .ndpl-nav-handle {
 688 |     display: block;
 689 |     cursor: pointer;
 690 |     height: 27px;
 691 |     overflow: hidden;
 692 |     position: fixed;
 693 |     right: 0;
 694 |     transform: rotate(0deg);
 695 |     transition: .5s ease-in-out;
 696 |     top: 15px;
 697 |     width: 48px;
 698 |     z-index: 9999;
 699 | }
 700 | .ndpl-nav-handle.open {
 701 |     position: fixed;
 702 | }
 703 | .ndpl-nav-handle__container {
 704 |     padding: 12px 0 0;
 705 | }
 706 | .ndpl-nav-handle span {
 707 |     background-color: #303637;
 708 |     display: block;
 709 |     height: 3px;
 710 |     opacity: 1;
 711 |     position: absolute;
 712 |     right: 12px;
 713 |     transform: rotate(0deg);
 714 |     transition: .25s ease-in-out;
 715 |     width: 27px;
 716 | }
 717 | .ndpl-nav-handle span:nth-child(1) {
 718 |     top: 0px;
 719 | }
 720 | .ndpl-nav-handle span:nth-child(2) {
 721 |     top: 9px;
 722 | }
 723 | .ndpl-nav-handle span:nth-child(3) {
 724 |     top: 18px;
 725 | }
 726 | .ndpl-nav-handle.open span:nth-child(1) {
 727 |     top: 11px;
 728 |     transform: rotate(-45deg);
 729 | }
 730 | .ndpl-nav-handle.open span:nth-child(2) {
 731 |     opacity: 0;
 732 |     right: -60px;
 733 | }
 734 | .ndpl-nav-handle.open span:nth-child(3) {
 735 |     top: 11px;
 736 |     transform: rotate(45deg);
 737 | }
 738 | 
 739 | @media only screen and (min-width: 60em) {
 740 | 
 741 |     .ndpl-nav-handle {
 742 |         display: none;
 743 |     }
 744 | }
 745 | 
 746 | /**
 747 |  * Content containers
 748 |  * ----------------------------------------//
 749 |  */
 750 | .ndpl-page,
 751 | .ndpl-library {
 752 |     padding-top: 79px;
 753 | }
 754 | .ndpl-page {
 755 |     color: #616367;
 756 |     padding-left: 12px;
 757 |     padding-right: 12px;
 758 | }
 759 | .ndpl-page h1,
 760 | .ndpl-page h2,
 761 | .ndpl-page h3,
 762 | .ndpl-page h4,
 763 | .ndpl-page h5,
 764 | .ndpl-page h6 {
 765 |     color: #303637;
 766 | }
 767 | .ndpl-preloaded {
 768 |     left: -9999px;
 769 |     position: absolute;
 770 |     top: -9999px;
 771 | }
 772 | 
 773 | @media only screen and (min-width: 35em) {
 774 |     .ndpl-page {
 775 |         max-width: 580px;
 776 |         margin: 0 auto;
 777 |     }
 778 | }
 779 | 
 780 | @media only screen and (min-width: 60em) {
 781 |     .ndpl-page,
 782 |     .ndpl-library {
 783 |         margin: 0 auto;
 784 |         padding: 56px 0;
 785 |     }
 786 |     .ndpl-page h1:first-child,
 787 |     .ndpl-page h2:first-child,
 788 |     .ndpl-page h3:first-child,
 789 |     .ndpl-page h4:first-child,
 790 |     .ndpl-page h5:first-child,
 791 |     .ndpl-page h6:first-child,
 792 |     .ndpl-library h1:first-child,
 793 |     .ndpl-library h2:first-child,
 794 |     .ndpl-library h3:first-child,
 795 |     .ndpl-library h4:first-child,
 796 |     .ndpl-library h5:first-child,
 797 |     .ndpl-library h6:first-child {
 798 |         margin-top: 0;
 799 |     }
 800 |     .ndpl-content {
 801 |         padding: 36px 48px 36px 312px;
 802 |     }
 803 | }
 804 | 
 805 | /**
 806 |  * Component Group
 807 |  * ----------------------------------------//
 808 |  */
 809 | .ndpl-library__group {
 810 |     overflow: auto;
 811 |     zoom: 1;
 812 | }
 813 | .ndpl-library__title {
 814 |     color: #303637;
 815 |     padding-left: 12px;
 816 |     padding-right: 12px;
 817 |     margin-bottom: 24px;
 818 | }
 819 | 
 820 | @media only screen and (min-width: 60em) {
 821 | 
 822 |     .ndpl-library__title {
 823 |         padding-left: 0;
 824 |         padding-right: 0;
 825 |         margin-bottom: 24px;
 826 |     }
 827 | }
 828 | 
 829 | /**
 830 |  * Group
 831 |  * ----------------------------------------//
 832 |  */
 833 | .ndpl-group__description {
 834 |     color: #616367;
 835 |     margin-bottom: 48px;
 836 |     padding: 0 12px;
 837 | }
 838 | 
 839 | @media only screen and (min-width: 60em) {
 840 | 
 841 |     .ndpl-group__description {
 842 |         padding: 0;
 843 |     }
 844 | }
 845 | 
 846 | /**
 847 |  * Component
 848 |  * ----------------------------------------//
 849 |  */
 850 | .ndpl-component {
 851 |     clear: both;
 852 |     margin-bottom: 60px;
 853 | }
 854 | .ndpl-component__title,
 855 | .ndpl-component__description {
 856 |     color: #616367;
 857 |     padding: 0 12px;
 858 | }
 859 | .ndpl-component__title {
 860 |     margin-bottom: 12px;
 861 | }
 862 | .ndpl-component__description {
 863 |     padding-bottom: 24px;
 864 | }
 865 | 
 866 | @media only screen and (min-width: 60em) {
 867 | 
 868 |     .ndpl-component__title,
 869 |     .ndpl-component__description {
 870 |         padding: 0;
 871 |     }
 872 | }
 873 | 
 874 | /**
 875 |  * Component - Half Width
 876 |  * ----------------------------------------//
 877 |  */
 878 | @media only screen and (min-width: 60em) {
 879 | 
 880 |     .ndpl-components {
 881 |         display: -ms-flexbox;
 882 |         display: -webkit-flex;
 883 |         display: flex;
 884 | 
 885 |         -ms-flex-direction: row;
 886 |         -webkit-flex-direction: row;
 887 |         flex-direction: row;
 888 | 
 889 |         -ms-flex-wrap: wrap;
 890 |         -webkit-flex-wrap: wrap;
 891 |         flex-wrap: wrap;
 892 | 
 893 |         margin-left: -36px;
 894 |     }
 895 | 
 896 |     .ndpl-component {
 897 |         padding-left: 36px;
 898 |     }
 899 | 
 900 |     .ndpl-component--half {
 901 |         -ms-flex-grow: 2;
 902 |         -webkit-flex-grow: 2;
 903 |         flex-grow: 2;
 904 | 
 905 |         max-width: 50%;
 906 |         width: 50%;
 907 |     }
 908 | 
 909 |     .ndpl-component--full {
 910 |         -ms-flex-grow: 1;
 911 |         -webkit-flex-grow: 1;
 912 |         flex-grow: 1;
 913 |         width: 100%;
 914 |     }
 915 | }
 916 | 
 917 | /**
 918 |  * Component - Colours
 919 |  * ----------------------------------------//
 920 |  */
 921 | .ndpl-component__colors {
 922 |     padding: 0 12px;
 923 | }
 924 | .ndpl-component__color-container {
 925 |     float: left;
 926 |     margin-top: 24px;
 927 |     width: 100%;
 928 | }
 929 | .ndpl-component__color-container:first-of-type {
 930 |     margin-top: 0;
 931 | }
 932 | .ndpl-component__color-container:nth-child(even) {
 933 |     margin-right: 0;
 934 | }
 935 | .ndpl-component__color {
 936 |     float: left;
 937 |     line-height: 1;
 938 |     padding: 24px 0;
 939 |     text-align: center;
 940 |     width: 50%;
 941 | }
 942 | .ndpl-component__color:first-of-type {
 943 |     border-radius: 6px 0 0 6px;
 944 | }
 945 | .ndpl-component__color:last-of-type {
 946 |     border-radius: 0 6px 6px 0;
 947 | }
 948 | .ndpl-component__color:first-of-type:last-of-type {
 949 |     border-radius: 6px;
 950 |     width: 100%;
 951 | }
 952 | .ndpl-component__color div {
 953 |     border: 1px solid #FFF;
 954 |     border-radius: 3px;
 955 |     color: #FFF;
 956 |     display: inline-block;
 957 |     font-size: 13px;
 958 |     letter-spacing: 1px;
 959 |     line-height: 13px;
 960 |     padding: 6px 9px;
 961 |     text-transform: uppercase;
 962 | }
 963 | .ndpl-component__color div.ndpl-dark-text {
 964 |     color: #B0B1B3 !important;
 965 |     border-color: #B0B1B3;
 966 | }
 967 | 
 968 | @media only screen and (min-width: 60em) {
 969 | 
 970 |     .ndpl-component__colors {
 971 |         padding: 0;
 972 |     }
 973 |     .ndpl-component__color-container {
 974 |         margin-right: 3%;
 975 |         width: 17.5%;
 976 |     }
 977 |     .ndpl-component__color-container:nth-child(even) {
 978 |         margin-right: 3%;
 979 |     }
 980 |     .ndpl-component__color-container:nth-child(5n) {
 981 |         margin-right: 0;
 982 |     }
 983 |     .ndpl-component__color-container:nth-child(-n + 5) {
 984 |         margin-top: 0;
 985 |     }
 986 |     .ndpl-component__color {
 987 |         padding: 48px 0;
 988 |         width: 100%;
 989 |     }
 990 |     .ndpl-component__color:first-of-type {
 991 |         border-radius: 6px 6px 0 0;
 992 |     }
 993 |     .ndpl-component__color:last-of-type {
 994 |         border-radius: 0 0 6px 6px;
 995 |     }
 996 | }
 997 | 
 998 | /**
 999 |  * Component - Preview & code sample
1000 |  * ----------------------------------------//
1001 |  */
1002 | .ndpl-component__sample {
1003 |     background-color: #FFF;
1004 |     border-top: 1px solid #E0E6ED;
1005 |     border-bottom: 1px solid #E0E6ED;
1006 |     padding: 36px 12px;
1007 |     position: relative;
1008 | }
1009 | .ndpl-component__sample:after {
1010 |     display: block;
1011 |     clear: both;
1012 |     content: "";
1013 | }
1014 | .ndpl-component__sample--inverted {
1015 |     background-color: #333;
1016 | }
1017 | .ndpl-component__sample-missing,
1018 | .ndpl-component__sample-hidden {
1019 |     display: block;
1020 |     margin: 0 12px;
1021 |     text-align: center;
1022 | }
1023 | .ndpl-component__code {
1024 |     border-bottom: 1px solid #E0E6ED;
1025 | }
1026 | .ndpl-component__code .ndpl-pre {
1027 |     margin: 0;
1028 | }
1029 | 
1030 | /* We apply the same code styling to page, description and component elements. */
1031 | .ndpl-page pre code,
1032 | .ndpl-component__description pre code,
1033 | .ndpl-component__code .ndpl-code {
1034 |     box-sizing: border-box;
1035 |     color: #616367;
1036 |     font-size: 12px;
1037 |     line-height: 18px;
1038 |     opacity: 0.75;
1039 |     overflow-x: auto;
1040 |     overflow-y: hidden;
1041 |     -ms-overflow-style: -ms-autohiding-scrollbar;
1042 |     padding: 36px 12px;
1043 |     white-space: pre;
1044 |     width: 100%;
1045 | }
1046 | .ndpl-page pre code,
1047 | .ndpl-component__description pre code {
1048 |     padding: 12px;
1049 | }
1050 | 
1051 | .ndpl-component__code-toggle {
1052 |     border-bottom: 1px solid transparent;
1053 |     color: #B0B1B3;
1054 |     cursor: pointer;
1055 |     display: block;
1056 |     font-size: 12px;
1057 |     letter-spacing: 1px;
1058 |     padding: 9px 12px 9px 12px;
1059 |     text-align: center;
1060 |     text-transform: uppercase;
1061 | }
1062 | 
1063 | @media only screen and (min-width: 60em) {
1064 | 
1065 |     .ndpl-component__sample {
1066 |         border: 1px solid #E0E6ED;
1067 |         border-radius: 6px 6px 0 0;
1068 |         padding: 36px;
1069 |     }
1070 |     .ndpl-component__sample--disabled-code {
1071 |         border-radius: 6px;
1072 |     }
1073 |     .ndpl-component__sample-missing,
1074 |     .ndpl-component__sample-hidden {
1075 |         margin: 0;
1076 |     }
1077 |     .ndpl-component__code {
1078 |         border: 1px solid #E0E6ED;
1079 |         border-top: none;
1080 |     }
1081 |     .ndpl-page pre code,
1082 |     .ndpl-component__description pre code,
1083 |     .ndpl-component__code .ndpl-code {
1084 |         font-size: 15px;
1085 |         line-height: 21px;
1086 |         padding: 36px;
1087 |     }
1088 |     .ndpl-page pre code,
1089 |     .ndpl-component__description pre code {
1090 |         padding: 12px;
1091 |     }
1092 |     .ndpl-component__code-toggle {
1093 |         border-left: 1px solid transparent;
1094 |         border-right: 1px solid transparent;
1095 |         border-radius: 0 0 6px 6px;
1096 |     }
1097 | }
1098 | 


--------------------------------------------------------------------------------
/pattern-library/app/js/main.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Component component
  3 |  */
  4 | var ndplComponent = Vue.extend({
  5 | 
  6 |     data: function() {
  7 |         return {
  8 |             loaded: false,
  9 |             hide_sample_code: false
 10 |         }
 11 |     },
 12 | 
 13 |     props: {
 14 |         component: {
 15 |             required: true
 16 |         }
 17 |     },
 18 | 
 19 |     computed: {
 20 |         inline_styles: function() {
 21 |             var _this = this,
 22 |                 styles = '';
 23 | 
 24 |             // These inline style are only applied after the component has fully loaded
 25 |             if(_this.loaded) {
 26 |                 if(_this.component.options.sample_min_height) {
 27 |                     styles += 'min-height:' + _this.component.options.sample_min_height + 'px;';
 28 |                 }
 29 |             }
 30 | 
 31 |             if(_this.component.options.sample_overflow_hidden) {
 32 |                 styles += 'overflow: hidden;';
 33 |             }
 34 |             if(_this.component.options.sample_background_color) {
 35 |                 styles += 'background-color:' + _this.component.options.sample_background_color + ' !important;';
 36 |             }
 37 | 
 38 |             return styles;
 39 |         }
 40 |     },
 41 | 
 42 |     watch: {
 43 |         'component.html': function() {
 44 |             var _this = this;
 45 | 
 46 |             // Apply syntax highlighting when component html is loaded
 47 |             if(this.component.html.length) {
 48 |                 _this.$root.applySyntaxHighlighting(_this.$el);
 49 |             }
 50 |         }
 51 |     },
 52 | 
 53 |     ready: function() {
 54 |         var _this = this;
 55 | 
 56 |         // Listen for loaded event
 57 |         _this.$on('loaded', function() {
 58 | 
 59 |             // Monitor scroll and resize events and update navigation active state appropirately
 60 |             window.addEventListener('scroll', _this.updateActive);
 61 |             window.addEventListener('resize', _this.updateActive);
 62 | 
 63 |             _this.setHideSample(function() {
 64 |                 _this.loaded = true;
 65 |             });
 66 |         });
 67 | 
 68 |         // Listen for resizing event
 69 |         _this.$on('resizing', function(is_resizing) {
 70 |             _this.loaded = false;
 71 | 
 72 |             if(! is_resizing) {
 73 |                 _this.setHideSample(function() {
 74 |                     _this.loaded = true;
 75 |                 });
 76 |             }
 77 |         });
 78 | 
 79 |         if (_this.component.html) {
 80 |             _this.$root.applySyntaxHighlighting(_this.$el);
 81 |         }
 82 |     },
 83 | 
 84 |     methods: {
 85 | 
 86 |         /**
 87 |          * Update component active in navigation.
 88 |          */
 89 |         updateActive: function() {
 90 |             var _this = this;
 91 | 
 92 |             // If scroll position is great than or equal to component offset top - 60 pixels
 93 |             // and scroll position is less than component offset top plus component height plus 60 pixels
 94 |             // and active component is not this component
 95 |             if(_this.$root && _this.$root.scroll_position >= _this.$el.offsetTop - 60 &&
 96 |                 _this.$root.scroll_position < _this.$el.offsetTop + _this.$el.offsetHeight) {
 97 | 
 98 |                 // If not currently auto scrolling to component
 99 |                 // and component is not active
100 |                 if(!_this.$root.scrolling_to &&
101 |                     !_this.isActive(_this.component)) {
102 | 
103 |                     // Set this component to active
104 |                     _this.$root.active_components.push(_this.component);
105 |                     _this.$root.open_group = null;
106 |                     _this.$root.updateHash(_this.component.id);
107 |                 }
108 |             } else {
109 | 
110 |                 // If not currently auto scrolling to component
111 |                 if(_this.$root && !_this.$root.scrolling_to) {
112 | 
113 |                     // Loop through active components and remove this component
114 |                     for (var i = 0; i < _this.$root.active_components.length; i++) {
115 |                         var component = _this.$root.active_components[i];
116 | 
117 |                         if (component.id === _this.component.id) {
118 |                             _this.$root.active_components.splice(i, 1);
119 | 
120 |                             return;
121 |                         }
122 |                     }
123 |                 }
124 |             }
125 |         },
126 | 
127 |         /**
128 |          * Is component active in navigation.
129 |          *
130 |          * @param component
131 |          * @returns {boolean}
132 |          */
133 |         isActive: function(component) {
134 |             var _this = this;
135 | 
136 |             for (var i = 0; i < _this.$root.active_components.length; i++) {
137 |                 var c = _this.$root.active_components[i];
138 | 
139 |                 if (component.id === c.id) {
140 |                     return true;
141 |                 }
142 |             }
143 | 
144 |             return false;
145 |         },
146 | 
147 |         /**
148 |          * Should invert text based on hex brightness.
149 |          *
150 |          * @param hex
151 |          * @returns {boolean}
152 |          */
153 |         shouldInvertText: function(hex) {
154 |             var rgb = this.$root.convertHexToRgb(hex),
155 |                 brightness = this.$root.getColorBrightness(rgb);
156 | 
157 |             return brightness > 210;
158 |         },
159 | 
160 |         /**
161 |          * Should apply border based on hex brightness.
162 |          *
163 |          * @param hex
164 |          * @returns {boolean}
165 |          */
166 |         shouldApplyBorder: function(hex) {
167 |             var rgb = this.$root.convertHexToRgb(hex),
168 |                 brightness = this.$root.getColorBrightness(rgb);
169 | 
170 |             return brightness > 240;
171 |         },
172 | 
173 |         /**
174 |          * Set component sample element to be hidden if the sample
175 |          * itself is hidden in the assets CSS stylesheet.
176 |          *
177 |          * @param callback
178 |          */
179 |         setHideSample: function(callback) {
180 |             callback = typeof callback !== 'undefined' ?  callback : function() {};
181 | 
182 |             var _this = this;
183 | 
184 |             _this.hide_sample_code = false;
185 | 
186 |             setTimeout(function() {
187 |                 if(_this.$el.querySelector('.ndpl-component__code')) {
188 | 
189 |                     /**
190 |                      * Auto-detect hidden sample.
191 |                      */
192 |                     if (_this.$el.querySelector('.ndpl-component__sample').offsetHeight <= 74 &&
193 |                         !_this.component.options.disabled_auto_sample_hiding) {
194 |                         _this.hide_sample_code = true;
195 |                     }
196 | 
197 |                     /**
198 |                      * If manually specifying when to show nad hide samples.
199 |                      */
200 |                     if (_this.component.options.disabled_auto_sample_hiding &&
201 |                         _this.component.options.disabled_auto_sample_hiding.hasOwnProperty('show_on_mobile') &&
202 |                         _this.component.options.disabled_auto_sample_hiding.hasOwnProperty('show_on_desktop')) {
203 | 
204 | 
205 |                         if(_this.$root.mobile_view) {
206 |                             _this.hide_sample_code = !_this.component.options.disabled_auto_sample_hiding.show_on_mobile;
207 |                         } else {
208 |                             _this.hide_sample_code = !_this.component.options.disabled_auto_sample_hiding.show_on_desktop;
209 |                         }
210 |                     }
211 |                 }
212 | 
213 |                 callback();
214 |             }, 0);
215 |         },
216 | 
217 |         /**
218 |          * Is sample code visible.
219 |          *
220 |          * @returns {boolean}
221 |          */
222 |         isCodeVisible: function() {
223 |             var _this = this;
224 | 
225 |             return ! _this.hide_sample_code;
226 |         }
227 |     }
228 | });
229 | Vue.component('ndpl-component', ndplComponent);
230 | 
231 | /**
232 |  * Group component
233 |  */
234 | var ndplGroup = Vue.extend({
235 | 
236 |     props: {
237 |         group: {
238 |             required: true
239 |         }
240 |     }
241 | });
242 | Vue.component('ndpl-group', ndplGroup);
243 | 
244 | /**
245 |  * Script component
246 |  */
247 | var ndplScript = Vue.extend({
248 | 
249 |     props: {
250 |         script: {
251 |             required: true
252 |         }
253 |     },
254 | 
255 |     methods: {
256 | 
257 |         /**
258 |          * Loads TypeKit.
259 |          */
260 |         loadTypekit: function() {
261 |             try {
262 |                 Typekit.load({
263 |                     async: true
264 |                 });
265 |             } catch(e) {};
266 |         }
267 |     }
268 | });
269 | Vue.component('ndpl-script', ndplScript);
270 | 
271 | /**
272 |  * Vue instance
273 |  */
274 | new Vue({
275 |     el: 'html',
276 | 
277 |     data: {
278 |         intro: null,
279 |         project_logo: null,
280 |         project_favicon: null,
281 |         project_name: null,
282 |         project_url: null,
283 |         copyright_start_year: null,
284 |         client_name: null,
285 |         client_url: null,
286 |         creators: {},
287 |         content: {},
288 |         groups: {},
289 |         theme: {},
290 |         assets: {
291 |             css: [],
292 |             js: []
293 |         },
294 |         font_libraries: {
295 |             typekit_code: null,
296 |             google_web_fonts: null,
297 |             typography_web_fonts: null
298 |         },
299 |         log: {
300 |             error: [],
301 |             info: []
302 |         },
303 |         components_count: 0,
304 |         groups_count: 0,
305 |         components_loaded_count: 0,
306 |         groups_loaded_count: 0,
307 |         groups_loaded: false,
308 |         loaded: false,
309 |         resizing: false,
310 |         typekit_loaded: false,
311 |         scroll_position: 0,
312 |         prev_scroll_position: 0,
313 |         active_group: null,
314 |         active_components: [],
315 |         active_page: null,
316 |         open_group: null,
317 |         show_first_page_on_load: false,
318 |         scrolling_to: false,
319 |         sidebar_scrolling: false,
320 |         window_outer_width: 0,
321 |         breakpoint: 960,
322 |         mobile_view: false,
323 |         open_nav: false,
324 |         rtime: new Date(1, 1, 2000, 12,00,00),
325 |         timeout: false,
326 |         delta: 200,
327 |         version: null
328 |     },
329 | 
330 |     computed: {
331 |         project: function() {
332 |             if(this.project_name && this.project_url) {
333 |                 return '<a href="' + this.project_url + '" target="_blank"><span>' + this.project_name + '</span></a>';
334 |             }
335 | 
336 |             if(this.project_name && !this.project_url) {
337 |                 return this.project_name;
338 |             }
339 | 
340 |             return null;
341 |         },
342 | 
343 |         copyright_year: function() {
344 |             var date = new Date();
345 | 
346 |             if(date.getFullYear() == this.copyright_start_year) {
347 |                 return this.copyright_start_year;
348 |             }
349 | 
350 |             return this.copyright_start_year + ' - ' + date.getFullYear();
351 |         },
352 | 
353 |         client: function() {
354 |             if(this.client_name && this.client_url) {
355 |                 return '<a href="' + this.client_url + '" target="_blank">' + this.client_name + '</a>';
356 |             }
357 | 
358 |             if(this.client_name && !this.client_url) {
359 |                 return this.client_name;
360 |             }
361 | 
362 |             return null;
363 |         },
364 | 
365 |         all_creators: function() {
366 |             var formattedCreators = '';
367 | 
368 |             if(this.creators.length && this.creators[0].name) {
369 |                 for (var i = 0; i < this.creators.length; i++) {
370 |                     prefix = i === this.creators.length - 1 ? ' & ' : ', ';
371 |                     url = this.creators[i].url;
372 |                     name = this.creators[i].name.replace(' ', '&nbsp;');
373 | 
374 |                     formattedCreators += prefix + '<a href="' + url + '" target="_blank">' + name + '</a>';
375 |                 }
376 | 
377 |                 return formattedCreators.substring(2);
378 |             }
379 | 
380 |             return null;
381 |         },
382 | 
383 |         library_inline_styles: function() {
384 |             var _this = this,
385 |                 styles = '';
386 | 
387 |             if(_this.theme.max_width) {
388 |                 styles += 'max-width:' + _this.theme.max_width + 'px;';
389 |             }
390 | 
391 |             return styles;
392 |         }
393 |     },
394 | 
395 |     watch: {
396 |         groups_loaded: function() {
397 |             var _this = this;
398 | 
399 |             _this.setupComponents();
400 |         },
401 |         loaded: function() {
402 |             var _this = this;
403 | 
404 |             _this.scrollTo(window.location.hash);
405 | 
406 |             _this.$broadcast('loaded');
407 |         }
408 |     },
409 | 
410 |     ready: function() {
411 |         var _this = this;
412 | 
413 |         _this.loadDataFile();
414 | 
415 |         _this.window_outer_width = window.outerWidth;
416 | 
417 |         _this.mobile_view = _this.window_outer_width >= _this.breakpoint ? false : true;
418 | 
419 |         window.addEventListener('scroll', _this.setScrollPosition);
420 |         window.addEventListener('resize', function() {
421 |             _this.window_outer_width = window.outerWidth;
422 |             _this.setScrollPosition();
423 | 
424 |             _this.mobile_view = _this.window_outer_width >= _this.breakpoint ? false : true;
425 | 
426 |             _this.rtime = new Date();
427 | 
428 |             if (_this.timeout === false && !_this.mobile_view) {
429 |                 _this.timeout = true;
430 |                 setTimeout(_this.trackResizing, _this.delta);
431 |             }
432 |         });
433 | 
434 |         /**
435 |          * Disable body scrolling when mouseover/mouseleave
436 |          * sidebar to prevent library scroll jumping.
437 |          */
438 |         var sidebar = document.querySelector('.ndpl-sidebar');
439 |         sidebar.addEventListener('mouseover', function(e) {
440 |             _this.sidebar_scrolling = true;
441 |         })
442 |         sidebar.addEventListener('mouseleave', function(e) {
443 |             _this.sidebar_scrolling = false;
444 |         });
445 | 
446 |         /**
447 |          * Set active page based on hash or show first
448 |          * page on load variable.
449 |          */
450 |         setTimeout(function() {
451 |             var page = _this.isLoadingPage();
452 | 
453 |             if(page) {
454 |                 _this.loadPage(page);
455 |             }
456 |         }, 0);
457 |     },
458 | 
459 |     methods: {
460 | 
461 |         /**
462 |          * Apply syntax highlighting to pre code elements
463 |          * within passed element.
464 |          *
465 |          * @param el
466 |          */
467 |         applySyntaxHighlighting: function(el) {
468 | 
469 |             setTimeout(function() {
470 |                 var blocks = el.querySelectorAll('pre code');
471 | 
472 |                 for(var i = 0; i < blocks.length; i++) {
473 |                     var block = blocks[i];
474 | 
475 |                     hljs.highlightBlock(block);
476 |                 }
477 |             }, 0);
478 |         },
479 | 
480 |         /**
481 |          * Reads the data.json file.
482 |          */
483 |         loadDataFile: function () {
484 |             var _this = this;
485 | 
486 |             _this.$http.get('./data.json' + '?cb=' + new Date()).then(function (response) {
487 |                 _this.initData(response.data, function() {
488 |                     if(_this.$data.groups.length) {
489 |                         _this.setupGroups();
490 |                     } else {
491 |                         _this.logInfo('You need to add a component to your library before it can be loaded.<br/>You can either do this manually by editing your <code>data.json</code> file,<br/> or you can use the command line helper: <code>astrum new [group_name/component_name]</code>');
492 |                     }
493 |                 });
494 |             });
495 |         },
496 | 
497 |         /**
498 |          * Determine if a page should be loaded.
499 |          */
500 |         isLoadingPage: function() {
501 |             var _this = this,
502 |                 hash = location.hash;
503 | 
504 |             if(_this.content.pages !== undefined && _this.content.pages.length) {
505 | 
506 |                 if(hash) {
507 |                     for (var i = 0; i < _this.content.pages.length; i++) {
508 |                         var page = _this.content.pages[i];
509 | 
510 |                         if (page.name == hash.replace('#', '')) return page;
511 |                     }
512 |                 } else if(_this.content.show_first_page_on_load) {
513 |                     return _this.content.pages[0];
514 |                 }
515 |             }
516 | 
517 |             return false;
518 |         },
519 | 
520 |         /**
521 |          * Initilise data bindings.
522 |          *
523 |          * @param data
524 |          */
525 |         initData: function(data, callback) {
526 |             callback = typeof callback !== 'undefined' ?  callback : function() {};
527 | 
528 |             var _this = this;
529 | 
530 |             for(var key in data) {
531 |                 _this.$set(key, data[key]);
532 |             }
533 | 
534 |             callback();
535 |         },
536 | 
537 |         /**
538 |          * Update URL hash.
539 |          *
540 |          * @param hash
541 |          */
542 |         updateHash: function(hash) {
543 |             history.pushState ? history.pushState(null, null, '#' + hash) : location.hash = hash;
544 |         },
545 | 
546 |         /**
547 |          * Setup component groups.
548 |          */
549 |         setupGroups: function() {
550 |             var _this = this;
551 | 
552 |             // Loop through the groups
553 |             for (var i = 0; i < _this.groups.length; i++) {
554 |                 var group = _this.groups[i];
555 | 
556 |                 // Set group navigation navigation
557 |                 _this.$set('groups[' + i + '].id', 'group-' + group.name);
558 |                 _this.$set('groups[' + i + '].active', false);
559 | 
560 |                 // Set default variables
561 |                 _this.$set('groups[' + i + '].description', '');
562 | 
563 |                 // Count groups
564 |                 _this.groups_count = _this.groups.length;
565 | 
566 |                 // Load group
567 |                 _this.loadGroup(_this.groups[i]);
568 |             }
569 |         },
570 | 
571 |         setupComponents: function() {
572 |             var _this = this;
573 | 
574 |             // Loop through the components
575 |             for (var i = 0; i < _this.groups.length; i++) {
576 |                 var group = _this.groups[i];
577 | 
578 |                 // Count components
579 |                 _this.components_count += group.components.length;
580 | 
581 |                 // Add group components to group
582 |                 for (var j = 0; j < group.components.length; j++) {
583 | 
584 |                     // Set default variables
585 |                     _this.$set('groups[' + i + '].components[' + j + '].id', 'group-' + group.name + '-component-' + group.components[j].name);
586 |                     _this.$set('groups[' + i + '].components[' + j + '].group_id', 'group-' + group.name);
587 |                     _this.$set('groups[' + i + '].components[' + j + '].active', false);
588 |                     _this.$set('groups[' + i + '].components[' + j + '].options', group.components[j].options ? group.components[j].options : false);
589 |                     _this.$set('groups[' + i + '].components[' + j + '].options.sample_always_show', group.components[j].options.sample_always_show ? group.components[j].options.sample_always_show : false);
590 |                     _this.$set('groups[' + i + '].components[' + j + '].options.sample_mobile_hidden', group.components[j].options.sample_mobile_hidden ? group.components[j].options.sample_mobile_hidden : false);
591 |                     _this.$set('groups[' + i + '].components[' + j + '].options.sample_dark_background', group.components[j].options.sample_dark_background ? group.components[j].options.sample_dark_background : false);
592 |                     _this.$set('groups[' + i + '].components[' + j + '].options.disable_code_sample', group.components[j].options.disable_code_sample ? group.components[j].options.disable_code_sample : false);
593 |                     _this.$set('groups[' + i + '].components[' + j + '].code_show', false);
594 |                     _this.$set('groups[' + i + '].components[' + j + '].type', group.components[j].type ? group.components[j].type : 'standard');
595 |                     _this.$set('groups[' + i + '].components[' + j + '].width', group.components[j].width ? group.components[j].width : 'full');
596 | 
597 |                     // Add html and description properties to the component object.
598 |                     _this.$set('groups[' + i + '].components[' + j + '].html', '');
599 |                     _this.$set('groups[' + i + '].components[' + j + '].description', '');
600 | 
601 |                     _this.loadComponent(_this.groups[i].components[j]);
602 |                 }
603 |             }
604 |         },
605 | 
606 |         /**
607 |          * Load group files.
608 |          *
609 |          * @param group
610 |          */
611 |         loadGroup: function(group) {
612 |             var _this = this,
613 |                 group_path = './components/' + group.name;
614 | 
615 |             // Get and set component description
616 |             _this.$http.get(group_path + '/description.md' + '?cb=' + new Date()).then(function (response) {
617 |                 group.description = marked(response.data);
618 |                 _this.areGroupsLoaded();
619 |             }, function () {
620 |                 _this.logError('Description file for <strong>' + group.name + '</strong> group failed to load from <code>' + group_path + '/description.md</code>');
621 |             });
622 |         },
623 | 
624 |         /**
625 |          * Load component files.
626 |          *
627 |          * @param component
628 |          */
629 |         loadComponent: function(component) {
630 |             var _this = this,
631 |                 component_path = './components/' + component.group + '/' + component.name;
632 | 
633 |             // Get and set component markup
634 |             _this.$http.get(component_path + '/markup.html' + '?cb=' + new Date()).then(function (response) {
635 |                 component.html = response.data;
636 |                 _this.areComponentsLoaded();
637 |             }, function () {
638 |                 _this.logError('HTML file for <strong>' + component.name + '</strong> component failed to load from <code>' + component_path + '/html.md</code>');
639 |             });
640 | 
641 |             // Get and set component description
642 |             _this.$http.get(component_path + '/description.md' + '?cb=' + new Date()).then(function (response) {
643 |                 component.description = marked(response.data);
644 |                 _this.areComponentsLoaded();
645 |             }, function () {
646 |                 _this.logError('Description file for <strong>' + component.name + '</strong> component failed to load from <code>' + component_path + '/description.md</code>');
647 |             });
648 |         },
649 | 
650 |         /**
651 |          * Increment groups loaded.
652 |          */
653 |         areGroupsLoaded: function() {
654 |             var _this = this;
655 | 
656 |             _this.groups_loaded_count += 1;
657 | 
658 |             if (_this.groups_loaded_count === _this.groups_count) {
659 | 
660 |                 setTimeout(function() {
661 |                     _this.groups_loaded = true;
662 |                 }, 1000);
663 |             }
664 |         },
665 | 
666 |         /**
667 |          * Increment components loaded.
668 |          */
669 |         areComponentsLoaded: function() {
670 |             var _this = this;
671 | 
672 |             _this.components_loaded_count += 1;
673 | 
674 |             if (_this.components_loaded_count === _this.components_count * 2) {
675 | 
676 |                 setTimeout(function() {
677 |                     _this.loaded = true;
678 |                 }, 2000);
679 |             }
680 |         },
681 | 
682 |         /**
683 |          * Add to log.
684 |          *
685 |          * @param message
686 |          * @param data
687 |          * @param type
688 |          */
689 |         addLog: function(message, data, type) {
690 |             var _this = this;
691 | 
692 |             type = typeof type !== 'undefined' ? type : 'error';
693 |             data = typeof data !== 'undefined' ? data : null;
694 | 
695 |             _this.log[type].push(message);
696 |             console[type]('[Pattern Library warn]: ' + message);
697 | 
698 |             if(data) {
699 |                 console[type](data);
700 |             }
701 |         },
702 | 
703 |         /**
704 |          * Log error helper.
705 |          *
706 |          * @param message
707 |          * @param data
708 |          */
709 |         logError: function(message, data) {
710 |             var _this = this;
711 | 
712 |             _this.addLog(message, data, 'error');
713 |         },
714 | 
715 |         /**
716 |          * Log info helper.
717 |          *
718 |          * @param message
719 |          * @param data
720 |          */
721 |         logInfo: function(message, data) {
722 |             var _this = this;
723 | 
724 |             _this.addLog(message, data, 'info');
725 |         },
726 | 
727 |         /**
728 |          * Set scroll position.
729 |          */
730 |         setScrollPosition: function() {
731 |             var _this = this,
732 |                 doc = document.documentElement,
733 |                 top = doc && doc.scrollTop || document.body.scrollTop;
734 | 
735 |             _this.prev_scroll_position = _this.scroll_position;
736 |             _this.scroll_position = top;
737 |         },
738 | 
739 |         /**
740 |          * Get scroll direction.
741 |          *
742 |          * @returns {string}
743 |          */
744 |         getScrollDirection: function() {
745 |             var _this = this;
746 | 
747 |             return _this.prev_scroll_position < _this.scroll_position ? 'down' : 'up';
748 |         },
749 | 
750 |         /**
751 |          * Scroll to element.
752 |          *
753 |          * @param e
754 |          */
755 |         scrollToHref: function(e) {
756 |             var _this = this;
757 | 
758 |             _this.scrollTo(e.target.hash);
759 |             _this.active_page = null;
760 |         },
761 | 
762 |         /**
763 |          * Animate scroll to.
764 |          *
765 |          * @param hash
766 |          */
767 |         scrollTo: function(hash) {
768 |             var _this = this,
769 |                 offset = _this.mobile_view ? 79 : 30;
770 | 
771 |             if(!hash) return;
772 | 
773 |             _this.scrolling_to = true;
774 | 
775 |             smoothScroll.animateScroll(hash, null, {
776 |                 offset: offset,
777 |                 callback: function() {
778 |                     _this.scrolling_to = false;
779 |                     _this.open_nav = false;
780 |                 }
781 |             });
782 |         },
783 | 
784 |         /**
785 |          * Toggle navigation.
786 |          */
787 |         toggleNav: function() {
788 |             var _this = this;
789 | 
790 |             _this.open_nav = ! _this.open_nav;
791 |         },
792 | 
793 |         /**
794 |          * Toggle open groups.
795 |          *
796 |          * @param group
797 |          */
798 |         toggleOpenGroups: function(group) {
799 |             var _this = this;
800 | 
801 |             _this.open_group = _this.open_group == group.id ? null : group.id;
802 |             _this.active_page = null;
803 |         },
804 | 
805 |         /**
806 |          * Load content page.
807 |          * @param page
808 |          */
809 |         loadPage: function(page) {
810 |             var _this = this;
811 | 
812 |             _this.active_page = page;
813 |             _this.active_components = [];
814 |             _this.open_group = null;
815 |             _this.open_nav = false;
816 | 
817 |             _this.$http.get(page.file + '?cb=' + new Date()).then(function (response) {
818 |                 _this.$set('active_page.markup', marked(response.data));
819 | 
820 |                 _this.applySyntaxHighlighting(document);
821 |             });
822 | 
823 |             _this.updateHash(page.name);
824 |         },
825 | 
826 |         /**
827 |          * Track resizing and broadcast resizing events.
828 |       */
829 |         trackResizing: function() {
830 |             var _this = this;
831 | 
832 |             _this.resizing = true;
833 |             _this.$broadcast('resizing', true);
834 | 
835 |             if (new Date() - _this.rtime < _this.delta) {
836 |                 setTimeout(_this.trackResizing, _this.delta);
837 |             } else {
838 |                 _this.timeout = false;
839 | 
840 |                 setTimeout(function() {
841 |                     _this.resizing = false;
842 |                     _this.$broadcast('resizing', false);
843 |                 }, 1000);
844 |             }
845 |         },
846 | 
847 |         /**
848 |          * Convert hex color value to rgb color values.
849 |          *
850 |          * @param hex
851 |          * @returns {{r: number, g: number, b: number}}
852 |          */
853 |         convertHexToRgb: function(hex) {
854 |             // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
855 |             var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
856 |             hex = hex.replace(shorthandRegex, function(m, r, g, b) {
857 |                 return r + r + g + g + b + b;
858 |             });
859 | 
860 |             var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
861 |             return result ? {
862 |                 r: parseInt(result[1], 16),
863 |                 g: parseInt(result[2], 16),
864 |                 b: parseInt(result[3], 16)
865 |             } : null;
866 |         },
867 | 
868 |         /**
869 |          * Get color brightness value from rgb color values.
870 |          *
871 |          * @param rgb
872 |          * @returns {number}
873 |          */
874 |         getColorBrightness: function(rgb) {
875 |             return Math.round(((parseInt(rgb.r) * 299) + (parseInt(rgb.g) * 587) + (parseInt(rgb.b) * 114)) /1000);
876 |         }
877 |     }
878 | });


--------------------------------------------------------------------------------