diff --git a/.eslintrc.json b/.eslintrc.json index 97eec591f..335572829 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -6,7 +6,7 @@ "es6": true }, "parserOptions": { - "ecmaVersion": 6, + "ecmaVersion": 2017, "sourceType": "module" }, "globals": {}, diff --git a/.travis.yml b/.travis.yml index e019fca93..b5144d2cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,5 +1,8 @@ language: node_js +addons: + chrome: stable + before_install: - phantomjs --version @@ -13,6 +16,8 @@ before_script: - lerna add @pattern-lab/engine-twig --scope=@pattern-lab/core - lerna add @pattern-lab/engine-react --scope=@pattern-lab/core +script: travis_wait npm run test + branches: only: - master diff --git a/packages/core/src/lib/annotation_exporter.js b/packages/core/src/lib/annotation_exporter.js index 8fb22470d..7ed86da28 100644 --- a/packages/core/src/lib/annotation_exporter.js +++ b/packages/core/src/lib/annotation_exporter.js @@ -23,9 +23,7 @@ const annotations_exporter = function(pl) { ); } catch (ex) { logger.debug( - `annotations.js file missing from ${ - paths.source.annotations - }. This may be expected if you do not use annotations or are using markdown.` + `annotations.js file missing from ${paths.source.annotations}. This may be expected if you do not use annotations or are using markdown.` ); return []; } @@ -39,9 +37,7 @@ const annotations_exporter = function(pl) { return oldAnnotationsJSON.comments; } catch (ex) { logger.error( - `There was an error parsing JSON for ${ - paths.source.annotations - }annotations.js` + `There was an error parsing JSON for ${paths.source.annotations}annotations.js` ); return []; } diff --git a/packages/core/src/lib/buildPatterns.js b/packages/core/src/lib/buildPatterns.js index 51dcea8b3..824d6840e 100644 --- a/packages/core/src/lib/buildPatterns.js +++ b/packages/core/src/lib/buildPatterns.js @@ -141,7 +141,10 @@ module.exports = (deletePatternDir, patternlab, additionalData) => { } //render all patterns last, so lineageR works const allPatternsPromise = patternsToBuild.map(pattern => - compose(pattern, patternlab) + compose( + pattern, + patternlab + ) ); //copy non-pattern files like JavaScript const allJS = patternsToBuild.map(pattern => { diff --git a/packages/core/src/lib/expandPartials.js b/packages/core/src/lib/expandPartials.js index a42df2cbc..0a9200052 100644 --- a/packages/core/src/lib/expandPartials.js +++ b/packages/core/src/lib/expandPartials.js @@ -60,11 +60,7 @@ module.exports = function(currentPattern, patternlab) { //this is what we came here for logger.debug( - `within ${ - currentPattern.patternPartial - }, replacing extendedTemplate partial ${foundPartial} with ${ - cleanPartialPattern.patternPartial - }'s extendedTemplate` + `within ${currentPattern.patternPartial}, replacing extendedTemplate partial ${foundPartial} with ${cleanPartialPattern.patternPartial}'s extendedTemplate` ); currentPattern.extendedTemplate = currentPattern.extendedTemplate.replace( diff --git a/packages/core/src/lib/lineage_hunter.js b/packages/core/src/lib/lineage_hunter.js index 0b844fcc9..657897d21 100644 --- a/packages/core/src/lib/lineage_hunter.js +++ b/packages/core/src/lib/lineage_hunter.js @@ -131,13 +131,7 @@ const lineage_hunter = function() { ? '<>' : lineageRPattern.patternState; logger.info( - `Found a lower common denominator pattern state: ${ - pattern.patternState - } on ${ - pattern.patternPartial - }. Setting reverse lineage pattern ${ - lineageRPattern.patternPartial - } from ${oldState}` + `Found a lower common denominator pattern state: ${pattern.patternState} on ${pattern.patternPartial}. Setting reverse lineage pattern ${lineageRPattern.patternPartial} from ${oldState}` ); lineageRPattern.patternState = pattern.patternState; diff --git a/packages/core/src/lib/list_item_hunter.js b/packages/core/src/lib/list_item_hunter.js index 167c8e55c..e6fd3818b 100644 --- a/packages/core/src/lib/list_item_hunter.js +++ b/packages/core/src/lib/list_item_hunter.js @@ -11,9 +11,7 @@ const list_item_hunter = function() { return matches.reduce((previousMatchPromise, liMatchStart) => { return previousMatchPromise.then(() => { logger.debug( - `found listItem of size ${liMatchStart} inside ${ - pattern.patternPartial - }` + `found listItem of size ${liMatchStart} inside ${pattern.patternPartial}` ); //we found a listitem match diff --git a/packages/core/src/lib/loadPattern.js b/packages/core/src/lib/loadPattern.js index 3cf43a7b1..c0fb1d6a5 100644 --- a/packages/core/src/lib/loadPattern.js +++ b/packages/core/src/lib/loadPattern.js @@ -152,18 +152,14 @@ module.exports = function(relPath, patternlab) { if (listItemsData) { logger.debug( - `found pattern-specific listitems data for ${ - currentPattern.patternPartial - }` + `found pattern-specific listitems data for ${currentPattern.patternPartial}` ); currentPattern.listitems = listItemsData; buildListItems(currentPattern); } } catch (err) { logger.warning( - `There was an error parsing sibling listitem JSON for ${ - currentPattern.relPath - }` + `There was an error parsing sibling listitem JSON for ${currentPattern.relPath}` ); logger.warning(err); } diff --git a/packages/core/src/lib/loaduikits.js b/packages/core/src/lib/loaduikits.js index 1f97564a2..1b976e7da 100644 --- a/packages/core/src/lib/loaduikits.js +++ b/packages/core/src/lib/loaduikits.js @@ -53,9 +53,7 @@ module.exports = patternlab => { if (!configEntry) { logger.warning( - `Could not find uikit with name uikit-${ - kit.name - } defined within patternlab-config.json, or it is not enabled.` + `Could not find uikit with name uikit-${kit.name} defined within patternlab-config.json, or it is not enabled.` ); return; } diff --git a/packages/core/src/lib/markModifiedPatterns.js b/packages/core/src/lib/markModifiedPatterns.js index 00ed51de1..aa80b25bb 100644 --- a/packages/core/src/lib/markModifiedPatterns.js +++ b/packages/core/src/lib/markModifiedPatterns.js @@ -28,10 +28,8 @@ module.exports = function(lastModified, patternlab) { array.forEach(func); } }; - const modifiedOrNot = _.groupBy( - patternlab.patterns, - p => - changes_hunter.needsRebuild(lastModified, p) ? 'modified' : 'notModified' + const modifiedOrNot = _.groupBy(patternlab.patterns, p => + changes_hunter.needsRebuild(lastModified, p) ? 'modified' : 'notModified' ); // For all unmodified patterns load their rendered template output diff --git a/packages/core/src/lib/object_factory.js b/packages/core/src/lib/object_factory.js index 8135e3988..2b595c71b 100644 --- a/packages/core/src/lib/object_factory.js +++ b/packages/core/src/lib/object_factory.js @@ -98,7 +98,9 @@ const Pattern = function(relPath, data, patternlab) { // (rendered!) html file for this pattern, to be shown in the iframe this.patternLink = this.patternSectionSubtype ? `$${this.name}/index.html` - : patternlab ? this.getPatternLink(patternlab, 'rendered') : null; + : patternlab + ? this.getPatternLink(patternlab, 'rendered') + : null; // The canonical "key" by which this pattern is known. This is the callable // name of the pattern. UPDATE: this.key is now known as this.patternPartial diff --git a/packages/core/src/lib/patternlab.js b/packages/core/src/lib/patternlab.js index 2b8cc3d43..8fff50376 100644 --- a/packages/core/src/lib/patternlab.js +++ b/packages/core/src/lib/patternlab.js @@ -107,9 +107,7 @@ module.exports = class PatternLab { if (typeof patternlab.config.paths.source.patternlabFiles === 'string') { logger.warning(''); logger.warning( - `Configuration key [paths.source.patternlabFiles] inside patternlab-config.json was found as the string '${ - patternlab.config.paths.source.patternlabFiles - }'` + `Configuration key [paths.source.patternlabFiles] inside patternlab-config.json was found as the string '${patternlab.config.paths.source.patternlabFiles}'` ); logger.warning( 'Since Pattern Lab Node Core 3.0.0 this key is an object. Suggest you update this key following this issue: https://github.com/pattern-lab/patternlab-node/issues/683.' diff --git a/packages/core/src/lib/processMetaPattern.js b/packages/core/src/lib/processMetaPattern.js index 66ca99586..f793a103a 100644 --- a/packages/core/src/lib/processMetaPattern.js +++ b/packages/core/src/lib/processMetaPattern.js @@ -21,9 +21,7 @@ module.exports = function(fileName, metaType, patternlab) { }) .catch(reason => { logger.warning( - `Could not find the user-editable template ${fileName}, currently configured to be at ${ - patternlab.config.paths.source.meta - }. Your configured path may be incorrect (check paths.source.meta in your config file), the file may have been deleted, or it may have been left in the wrong place during a migration or update.` + `Could not find the user-editable template ${fileName}, currently configured to be at ${patternlab.config.paths.source.meta}. Your configured path may be incorrect (check paths.source.meta in your config file), the file may have been deleted, or it may have been left in the wrong place during a migration or update.` ); logger.warning(reason); }); diff --git a/packages/core/src/lib/pseudopattern_hunter.js b/packages/core/src/lib/pseudopattern_hunter.js index c57379405..b95dd37f1 100644 --- a/packages/core/src/lib/pseudopattern_hunter.js +++ b/packages/core/src/lib/pseudopattern_hunter.js @@ -54,9 +54,7 @@ pseudopattern_hunter.prototype.find_pseudopatterns = function( ); } catch (err) { logger.warning( - `There was an error parsing pseudopattern JSON for ${ - currentPattern.relPath - }` + `There was an error parsing pseudopattern JSON for ${currentPattern.relPath}` ); logger.warning(err); } diff --git a/packages/core/src/lib/readDocumentation.js b/packages/core/src/lib/readDocumentation.js index d22c6fa88..2670bb307 100644 --- a/packages/core/src/lib/readDocumentation.js +++ b/packages/core/src/lib/readDocumentation.js @@ -64,9 +64,7 @@ module.exports = function(pattern, patternlab) { // do nothing when file not found if (err.code !== 'ENOENT') { logger.warning( - `'there was an error setting pattern keys after markdown parsing of the companion file for pattern ${ - pattern.patternPartial - }` + `'there was an error setting pattern keys after markdown parsing of the companion file for pattern ${pattern.patternPartial}` ); logger.warning(err); } diff --git a/packages/core/src/lib/server.js b/packages/core/src/lib/server.js index 7b5a9cecd..f5101c5a4 100644 --- a/packages/core/src/lib/server.js +++ b/packages/core/src/lib/server.js @@ -63,9 +63,7 @@ const server = patternlab => { setTimeout(() => { try { liveServer.start(liveServerConfig); - resolveMsg = `Pattern Lab is being served from http://127.0.0.1:${ - liveServerConfig.port - }`; + resolveMsg = `Pattern Lab is being served from http://127.0.0.1:${liveServerConfig.port}`; logger.info(resolveMsg); } catch (e) { const err = `Pattern Lab serve failed to start: ${e}`; diff --git a/packages/core/src/lib/starterkit_manager.js b/packages/core/src/lib/starterkit_manager.js index c00b33bbe..d11e5f2a4 100644 --- a/packages/core/src/lib/starterkit_manager.js +++ b/packages/core/src/lib/starterkit_manager.js @@ -38,16 +38,12 @@ const starterkit_manager = function(config) { if (kitPathDirExists) { if (clean) { logger.info( - `Deleting contents of ${ - paths.source.root - } prior to starterkit load.` + `Deleting contents of ${paths.source.root} prior to starterkit load.` ); fs.emptyDirSync(paths.source.root); } else { logger.info( - `Overwriting contents of ${ - paths.source.root - } during starterkit load.` + `Overwriting contents of ${paths.source.root} during starterkit load.` ); } diff --git a/packages/core/src/lib/ui_builder.js b/packages/core/src/lib/ui_builder.js index 433a7914c..5dcb36986 100644 --- a/packages/core/src/lib/ui_builder.js +++ b/packages/core/src/lib/ui_builder.js @@ -75,11 +75,7 @@ const ui_builder = function() { isOmitted = uikitExcludePattern(pattern, uikit); if (isOmitted) { logger.info( - `Omitting ${ - pattern.patternPartial - } from styleguide patterns because its pattern state or tag is excluded within ${ - uikit.name - }.` + `Omitting ${pattern.patternPartial} from styleguide patterns because its pattern state or tag is excluded within ${uikit.name}.` ); return true; } @@ -88,9 +84,7 @@ const ui_builder = function() { isOmitted = pattern.isPattern && pattern.fileName.charAt(0) === '_'; if (isOmitted) { logger.info( - `Omitting ${ - pattern.patternPartial - } from styleguide patterns because it has an underscore prefix.` + `Omitting ${pattern.patternPartial} from styleguide patterns because it has an underscore prefix.` ); return true; } @@ -99,9 +93,7 @@ const ui_builder = function() { isOmitted = pattern.patternPartial === patternlab.config.defaultPattern; if (isOmitted) { logger.info( - `Omitting ${ - pattern.patternPartial - } from styleguide patterns because it is defined as a defaultPattern.` + `Omitting ${pattern.patternPartial} from styleguide patterns because it is defined as a defaultPattern.` ); patternlab.defaultPattern = pattern; return true; @@ -113,9 +105,7 @@ const ui_builder = function() { pattern.relPath.indexOf(path.sep + '_') > -1; if (isOmitted) { logger.info( - `Omitting ${ - pattern.patternPartial - } from styleguide patterns because its contained within an underscored directory.` + `Omitting ${pattern.patternPartial} from styleguide patterns because its contained within an underscored directory.` ); return true; } @@ -124,9 +114,7 @@ const ui_builder = function() { isOmitted = pattern.isMetaPattern; if (isOmitted) { logger.info( - `Omitting ${ - pattern.patternPartial - } from styleguide patterns because its a meta pattern.` + `Omitting ${pattern.patternPartial} from styleguide patterns because its a meta pattern.` ); return true; } @@ -212,9 +200,7 @@ const ui_builder = function() { if (!patternType) { logger.error( - `Could not find patternType ${ - pattern.patternType - }. This is a critical error.` + `Could not find patternType ${pattern.patternType}. This is a critical error.` ); } @@ -236,9 +222,7 @@ const ui_builder = function() { if (!patternSubType) { logger.error( - `Could not find patternType ${pattern.patternType}-${ - pattern.patternType - }. This is a critical error.` + `Could not find patternType ${pattern.patternType}-${pattern.patternType}. This is a critical error.` ); } @@ -348,9 +332,7 @@ const ui_builder = function() { const patternType = getPatternType(patternlab, pattern); if (!patternType) { logger.error( - `Could not find patternType ${ - pattern.patternType - }. This is a critical error.` + `Could not find patternType ${pattern.patternType}. This is a critical error.` ); } @@ -867,9 +849,7 @@ const ui_builder = function() { ); } catch (err) { logger.error( - `Could not load one or more styleguidekit assets from ${ - paths.source.styleguide - }` + `Could not load one or more styleguidekit assets from ${paths.source.styleguide}` ); } fs.outputFileSync( diff --git a/packages/core/src/lib/watchPatternLabFiles.js b/packages/core/src/lib/watchPatternLabFiles.js index 7a1c390c2..2da7e14f0 100644 --- a/packages/core/src/lib/watchPatternLabFiles.js +++ b/packages/core/src/lib/watchPatternLabFiles.js @@ -110,9 +110,7 @@ const watchPatternLabFiles = ( }); logger.info( - `Pattern Lab is watching for changes to files under ${ - assetDirectories.source.root - }` + `Pattern Lab is watching for changes to files under ${assetDirectories.source.root}` ); return Promise.resolve(); }; diff --git a/packages/edition-twig/.patternlabrc.js b/packages/edition-twig/.patternlabrc.js new file mode 100644 index 000000000..f7c2ff8fa --- /dev/null +++ b/packages/edition-twig/.patternlabrc.js @@ -0,0 +1,5 @@ +module.exports = { + buildDir: __dirname + '/public', + wwwDir: __dirname + '/public/', + publicPath: '/public/styleguide/', +}; diff --git a/packages/edition-twig/package.json b/packages/edition-twig/package.json index 9b90f83ef..a92309c96 100644 --- a/packages/edition-twig/package.json +++ b/packages/edition-twig/package.json @@ -13,6 +13,7 @@ ], "main": "patternlab-config.json", "scripts": { + "build:uikit": "npm run build --prefix node_modules/@pattern-lab/uikit-workshop -- --patternlabrc $INIT_CWD/.patternlabrc.js", "build": "patternlab build --config ./patternlab-config.json", "help": "patternlab --help", "install": "patternlab install --config ./patternlab-config.json", diff --git a/packages/uikit-workshop/dist/index.html b/packages/uikit-workshop/dist/index.html index 502830aba..2f7a0973a 100644 --- a/packages/uikit-workshop/dist/index.html +++ b/packages/uikit-workshop/dist/index.html @@ -1,8 +1,6 @@ - Pattern Lab - - -
\ No newline at end of file + + + \ No newline at end of file diff --git a/packages/uikit-workshop/dist/styleguide/css/pattern-lab.7f4901f0.css b/packages/uikit-workshop/dist/styleguide/css/pattern-lab.7f4901f0.css deleted file mode 100644 index 4ba4db0d0..000000000 --- a/packages/uikit-workshop/dist/styleguide/css/pattern-lab.7f4901f0.css +++ /dev/null @@ -1 +0,0 @@ -button{font-size:inherit;background-color:transparent}pre[class*=language-]{background-image:-webkit-gradient(linear,left top,right top,from(#fff),to(rgba(255,255,255,0))),-webkit-gradient(linear,right top,left top,from(#fff),to(rgba(255,255,255,0))),-webkit-gradient(linear,left top,right top,from(#eaf0f6),to(rgba(238,238,238,0))),-webkit-gradient(linear,right top,left top,from(#eaf0f6),to(rgba(238,238,238,0))),-webkit-gradient(linear,left top,left bottom,from(#fff),to(rgba(255,255,255,0))),-webkit-gradient(linear,left bottom,left top,from(#fff),to(rgba(255,255,255,0))),-webkit-gradient(linear,left top,left bottom,from(#eaf0f6),to(rgba(238,238,238,0))),-webkit-gradient(linear,left bottom,left top,from(#eaf0f6),to(rgba(238,238,238,0)));background-image:-webkit-linear-gradient(left,#fff,rgba(255,255,255,0)),-webkit-linear-gradient(right,#fff,rgba(255,255,255,0)),-webkit-linear-gradient(left,#eaf0f6,rgba(238,238,238,0)),-webkit-linear-gradient(right,#eaf0f6,rgba(238,238,238,0)),-webkit-linear-gradient(top,#fff,rgba(255,255,255,0)),-webkit-linear-gradient(bottom,#fff,rgba(255,255,255,0)),-webkit-linear-gradient(top,#eaf0f6,rgba(238,238,238,0)),-webkit-linear-gradient(bottom,#eaf0f6,rgba(238,238,238,0));background-image:linear-gradient(to right,#fff,rgba(255,255,255,0)),linear-gradient(to left,#fff,rgba(255,255,255,0)),linear-gradient(to right,#eaf0f6,rgba(238,238,238,0)),linear-gradient(to left,#eaf0f6,rgba(238,238,238,0)),linear-gradient(to bottom,#fff,rgba(255,255,255,0)),linear-gradient(to top,#fff,rgba(255,255,255,0)),linear-gradient(to bottom,#eaf0f6,rgba(238,238,238,0)),linear-gradient(to top,#eaf0f6,rgba(238,238,238,0));background-color:#fff;background-attachment:local,local,scroll,scroll,local,local,scroll,scroll;background-position:0 0,100% 0,0 0,100% 0,0 0,0 100%,0 0,0 100%;background-size:4em 100%,4em 100%,1em 100%,1em 100%,100% 4em,100% 4em,100% 1em,100% 1em;background-repeat:no-repeat;-ms-overflow-style:-ms-autohiding-scrollbar;-webkit-overflow-scrolling:touch;overflow:auto}code[class*=language-],pre[class*=language-]{color:#000;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono',monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;word-wrap:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background-color:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background-color:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background-color:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#a67f59;background-color:rgba(255,255,255,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}pre.line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}pre.line-numbers>code{position:relative}.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.line-numbers-rows>span{pointer-events:none;display:block;counter-increment:linenumber}.line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right}.token a{color:inherit}pl-controls{margin-left:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.pl-c-body--theme-sidebar pl-controls{display:block}@media all and (min-width:42em){.pl-c-body--theme-sidebar pl-controls{width:100%}}.pl-c-controls{margin-left:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap}@media all and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-controls{display:block}}.pl-c-controls__list{list-style:none;margin:0;padding:0;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap}pl-drawer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative;position:-webkit-sticky;position:sticky;top:auto;bottom:0;left:0;right:0;z-index:20;overflow:visible}.pl-c-body--theme-light pl-drawer{background-color:#fff;color:#4d4c4c;border-top:1.1px solid #ccc}.pl-c-drawer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;font-family:HelveticaNeue,Helvetica,Arial,sans-serif;background-color:#222;color:#ccc;width:100%;height:100%;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);pointer-events:none;overflow:hidden;max-width:100vw}@media all and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-drawer{max-width:calc(100vw - 14rem)}}.pl-c-body--theme-light .pl-c-drawer{background-color:#fff;color:#4d4c4c}.pl-c-drawer.pl-is-active{pointer-events:auto}.pl-c-drawer__wrapper{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.pl-c-drawer__wrapper>*{height:100%}.pl-c-drawer__content{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;overflow:hidden}.pl-c-drawer__toolbar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-negative:0;flex-shrink:0}.pl-c-drawer__content-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;overflow:hidden}@supports (padding:env(safe-area-inset-top)){.pl-c-drawer__content-wrapper{padding-right:calc(env(safe-area-inset-right) - .9rem)}}.pl-c-drawer__toolbar-controls{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-item-align:end;align-self:flex-end;position:relative;z-index:10;-ms-flex-negative:0;flex-shrink:0}.pl-c-drawer__close-btn{background-color:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background-color .1s ease-out,color .1s ease-out;transition:background-color .1s ease-out,color .1s ease-out;cursor:pointer;outline-offset:-3px;outline-width:2px;margin:0;-webkit-appearance:none;-ms-flex-negative:0;flex-shrink:0;z-index:2;opacity:.85;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.pl-c-drawer__close-btn:hover{color:#fff;background-color:#222}.pl-c-drawer__close-btn.pl-is-active,.pl-c-drawer__close-btn:active{color:#fff;background-color:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-drawer__close-btn{background-color:#fff;color:#4d4c4c}.pl-c-body--theme-light .pl-c-drawer__close-btn:hover{background-color:#eee}.pl-c-body--theme-light .pl-c-drawer__close-btn:active,.pl-c-body--theme-light .pl-c-drawer__close-btn:focus{background-color:#ddd}.pl-c-body--theme-density-cozy .pl-c-drawer__close-btn{font-size:.85rem;padding:1.2rem .8rem}.pl-c-body--theme-density-comfortable .pl-c-drawer__close-btn{font-size:.85rem;padding:1.5rem 1rem}@media all and (max-width:41em){.pl-c-drawer__close-btn{border-radius:20rem;padding-top:.5rem;padding-bottom:.5rem}}.pl-c-drawer__close-btn:focus,.pl-c-drawer__close-btn:hover{opacity:1}.pl-c-drawer__close-btn:active,.pl-c-drawer__close-btn:focus{opacity:1}.pl-c-drawer__cover{width:100%;height:100%;top:0;left:0;display:none;position:fixed;z-index:20;cursor:move}.pl-c-drawer__resizer{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;top:0;left:0;right:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;height:14px;width:100%;background-color:inherit;z-index:2;cursor:ns-resize}.pl-c-drawer__resizer:after{content:'';height:3px;width:50px;border-top:1px solid currentColor;border-bottom:1px solid currentColor;-webkit-transition:opacity .3s ease-out;transition:opacity .3s ease-out;opacity:.5;background-color:currentColor;border-radius:3px;display:block}.pl-c-drawer__resizer:hover:after{opacity:.8}.pl-c-drawer__resizer:active:after,.pl-c-drawer__resizer:focus:after{opacity:.95}.pl-c-drawer__close-btn-icon{width:12px;height:12px;color:currentColor;fill:currentColor;-webkit-transition:fill .1s ease-out;transition:fill .1s ease-out;-ms-flex-negative:0;flex-shrink:0;-ms-flex-item-align:center;align-self:center}.pl-c-code-copy-btn{display:inline-block;position:absolute;top:.5rem;right:.5rem;padding:.2rem .4rem;background-color:#eee;color:#222;border:1px solid #ddd;border-radius:6px;font-family:HelveticaNeue,Helvetica,Arial,sans-serif;font-size:1rem;text-transform:lowercase;line-height:1;cursor:pointer;z-index:2;-webkit-transition:background-color .1s ease-out;transition:background-color .1s ease-out}.pl-c-code-copy-btn:focus,.pl-c-code-copy-btn:hover{background-color:#ccc}@media all and (min-width:42em){.pl-c-body--theme-sidebar pl-header{width:14rem;height:100vh;overflow:auto;padding:1rem;-webkit-overflow-scrolling:touch;border-bottom:0}}.pl-c-body--theme-light pl-header{border-right:1px solid #ccc;background-color:#fff;border-bottom:1px solid #ccc}.pl-c-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;width:100%;font-family:HelveticaNeue,Helvetica,Arial,sans-serif;font-size:.7rem;min-height:30px;background-color:inherit}@supports (padding:0px){.pl-c-header{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}}@media all and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-header{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}}.pl-c-header__nav-toggle{background-color:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background-color .1s ease-out,color .1s ease-out;transition:background-color .1s ease-out,color .1s ease-out;cursor:pointer;outline-offset:-3px;outline-width:2px;border:0}.pl-c-header__nav-toggle:hover{color:#fff;background-color:#222}.pl-c-header__nav-toggle.pl-is-active,.pl-c-header__nav-toggle:active{color:#fff;background-color:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-header__nav-toggle{background-color:#fff;color:#4d4c4c}.pl-c-body--theme-light .pl-c-header__nav-toggle:hover{background-color:#eee}.pl-c-body--theme-light .pl-c-header__nav-toggle:active,.pl-c-body--theme-light .pl-c-header__nav-toggle:focus{background-color:#ddd}.pl-c-body--theme-density-cozy .pl-c-header__nav-toggle{font-size:.85rem;padding:1.2rem .8rem}.pl-c-body--theme-density-comfortable .pl-c-header__nav-toggle{font-size:.85rem;padding:1.5rem 1rem}@media all and (min-width:42em){.pl-c-header__nav-toggle{display:none}}pl-layout .pl-c-layout{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}@media all and (min-width:42em){pl-layout.pl-c-body--theme-sidebar{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}}pl-layout.pl-c-body--theme-light{background-color:#fff}pl-nav{background-color:inherit;display:-webkit-box;display:-ms-flexbox;display:flex}.pl-c-nav{overflow:hidden;max-height:0;-webkit-transition:max-height .1s ease-out;transition:max-height .1s ease-out;background-color:inherit;position:absolute;left:0;top:100%;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;transition:max-height .1s ease-out}.pl-c-nav.pl-is-active{max-height:calc(100vh - 2rem - 1rem);max-height:calc(var(--pl-viewport-height,calc(100vh - 2rem)) - 1rem);overflow:auto;-webkit-overflow-scrolling:touch}@media all and (min-width:42em){.pl-c-nav{overflow:visible;max-height:none}}.pl-c-nav.pl-is-active{-webkit-box-shadow:0 1px 1px #000;box-shadow:0 1px 1px #000}.pl-c-body--theme-light .pl-c-nav.pl-is-active{-webkit-box-shadow:0 1px 1px #a6a6a6;box-shadow:0 1px 1px #a6a6a6}@media all and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-nav.pl-is-active{-webkit-box-shadow:none;box-shadow:none}}@media all and (min-width:42em){.pl-c-nav.pl-is-active{overflow:visible;max-height:none}}@media all and (min-width:42em){.pl-c-nav{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;position:relative;top:auto;width:auto;-webkit-box-shadow:none;box-shadow:none}}.pl-c-nav__list{z-index:1;margin:0;padding:0;list-style:none;-ms-flex-negative:0;flex-shrink:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-width:100%;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;background-color:inherit}@media all and (min-width:42em){.pl-c-nav__list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.pl-c-body--theme-sidebar .pl-c-nav__list{display:block}}.pl-c-nav__item{background-color:inherit;-webkit-transform:translateZ(0);transform:translateZ(0);cursor:pointer;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.pl-c-body--theme-sidebar .pl-c-nav__item{display:block}@media all and (min-width:42em){.pl-c-nav__sublist>.pl-c-nav__item:last-child{overflow:hidden;border-bottom-left-radius:6px;border-bottom-right-radius:6px}}.pl-c-nav__link{background-color:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background-color .1s ease-out,color .1s ease-out;transition:background-color .1s ease-out,color .1s ease-out;cursor:pointer;outline-offset:-3px;outline-width:2px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:0}.pl-c-nav__link:hover{color:#fff;background-color:#222}.pl-c-nav__link.pl-is-active,.pl-c-nav__link:active{color:#fff;background-color:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-nav__link{background-color:#fff;color:#4d4c4c}.pl-c-body--theme-light .pl-c-nav__link:hover{background-color:#eee}.pl-c-body--theme-light .pl-c-nav__link:active,.pl-c-body--theme-light .pl-c-nav__link:focus{background-color:#ddd}.pl-c-body--theme-density-cozy .pl-c-nav__link{font-size:.85rem;padding:1.2rem .8rem}.pl-c-body--theme-density-comfortable .pl-c-nav__link{font-size:.85rem;padding:1.5rem 1rem}.pl-c-body--theme-sidebar .pl-c-nav__link{width:100%}.pl-c-nav__link--sublink{text-transform:none;padding-left:.5rem}.pl-c-nav__link--dropdown{-webkit-appearance:none;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.pl-c-nav__link--dropdown:after{content:'\25BC';color:rgba(255,255,255,.25);display:inline-block;font-size:7px;position:relative;top:1px;right:-2px;-webkit-transition:all .1s ease-out;transition:all .1s ease-out}.pl-c-nav__link--dropdown:focus:after,.pl-c-nav__link--dropdown:hover:after{color:grey}.pl-c-nav__link--dropdown.pl-is-active{color:#fff;background-color:#222}.pl-c-nav__link--dropdown.pl-is-active:after{color:grey;-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.pl-c-nav__sublist{background-color:inherit;list-style:none;margin:0;padding:0}@media all and (min-width:42em){.pl-c-nav__sublist{position:absolute;top:100%;left:0;min-width:10rem;border-bottom-left-radius:6px;border-bottom-right-radius:6px}}.pl-c-nav__sublist--dropdown,.pl-c-nav__subsublist--dropdown{list-style:none;margin:0;padding:0;overflow:hidden;max-height:0;-webkit-transition:max-height .1s ease-out;transition:max-height .1s ease-out;visibility:hidden}.pl-c-nav__sublist--dropdown.pl-is-active,.pl-c-nav__subsublist--dropdown.pl-is-active{max-height:calc(100vh - 2rem - 1rem);max-height:calc(var(--pl-viewport-height,calc(100vh - 2rem)) - 1rem);overflow:auto;-webkit-overflow-scrolling:touch}.pl-c-nav__sublist--dropdown.pl-is-active,.pl-c-nav__subsublist--dropdown.pl-is-active{margin-left:.5rem;visibility:visible;max-height:none}@media all and (min-width:42em){.pl-c-nav__sublist--dropdown.pl-is-active,.pl-c-nav__subsublist--dropdown.pl-is-active{height:auto;max-height:calc(100vh - 2rem - 1rem)}}.pl-c-body--theme-sidebar .pl-c-nav__sublist--dropdown.pl-is-active,.pl-c-body--theme-sidebar .pl-c-nav__subsublist--dropdown.pl-is-active{max-height:none}@media all and (min-width:42em){.pl-c-nav__sublist--dropdown.pl-is-active{margin-left:0;border-width:1px;border-style:solid;border-color:#000}.pl-c-body--theme-light .pl-c-nav__sublist--dropdown.pl-is-active{border-color:#ccc}}.pl-c-nav__subsublist{list-style:none;margin:0;padding:0}pl-search{background-color:inherit;top:0;z-index:10;-ms-flex-negative:0;flex-shrink:0;padding:.3rem .5rem;display:inline-block}@media screen and (min-width:42em){pl-search{margin-left:1rem;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-negative:1;flex-shrink:1;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.pl-c-body--theme-sidebar pl-search{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin-left:0;padding-left:0;padding-right:0;width:100%}}.pl-c-typeahead{width:100%;background-color:inherit;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important;z-index:10;text-transform:capitalize;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;color:#fafafa;position:relative}.pl-c-body--theme-light .pl-c-typeahead{color:#222}@media screen and (min-width:42em){.pl-c-typeahead{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.pl-c-body--theme-sidebar .pl-c-typeahead{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}}.pl-c-typeahead__hint{top:0;left:0;right:0;width:100%}.pl-c-typeahead__hint,.pl-c-typeahead__input{text-transform:capitalize;background-color:#222;color:#fff;border-color:#090909;text-overflow:ellipsis;border-width:1px;border-style:solid;-webkit-transition:all .1s ease;transition:all .1s ease;max-width:100%;padding:.31rem .5rem;font-size:16px;width:100%;outline-offset:-3px;outline-width:2px;-webkit-appearance:none}@media all and (min-width:900px){.pl-c-typeahead__hint,.pl-c-typeahead__input{font-size:inherit}}.pl-c-typeahead__hint::-ms-clear,.pl-c-typeahead__input::-ms-clear{display:none}.pl-c-body--theme-sidebar .pl-c-typeahead__hint,.pl-c-body--theme-sidebar .pl-c-typeahead__input{border-radius:0}.pl-c-typeahead__input-wrapper--with-clear-button .pl-c-typeahead__hint,.pl-c-typeahead__input-wrapper--with-clear-button .pl-c-typeahead__input{padding-right:1.7rem}@media all and (min-width:42em){.pl-c-typeahead__input-wrapper--with-clear-button .pl-c-typeahead__hint,.pl-c-typeahead__input-wrapper--with-clear-button .pl-c-typeahead__input{padding-right:1.4rem}}@media all and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-typeahead__hint,.pl-c-body--theme-sidebar .pl-c-typeahead__input{max-width:none}}.pl-c-body--theme-light .pl-c-typeahead__hint,.pl-c-body--theme-light .pl-c-typeahead__input{background-color:#eee;color:#4d4c4c!important;border-color:#ddd!important}.pl-c-typeahead__hint::-moz-input-placeholder,.pl-c-typeahead__hint::-webkit-input-placeholder,.pl-c-typeahead__input::-moz-input-placeholder,.pl-c-typeahead__input::-webkit-input-placeholder{color:#fff!important;-webkit-transition:all .1s ease;transition:all .1s ease}.pl-c-typeahead__hint:focus,.pl-c-typeahead__hint:hover,.pl-c-typeahead__input:focus,.pl-c-typeahead__input:hover{color:#fff;background-color:#1d1d1d!important}.pl-c-body--theme-light .pl-c-typeahead__hint:focus,.pl-c-body--theme-light .pl-c-typeahead__hint:hover,.pl-c-body--theme-light .pl-c-typeahead__input:focus,.pl-c-body--theme-light .pl-c-typeahead__input:hover{color:#222!important;background-color:#ddd!important;border-color:#ccc!important}.pl-c-typeahead__hint:focus::-moz-input-placeholder,.pl-c-typeahead__hint:focus::-webkit-input-placeholder,.pl-c-typeahead__hint:hover::-moz-input-placeholder,.pl-c-typeahead__hint:hover::-webkit-input-placeholder,.pl-c-typeahead__input:focus::-moz-input-placeholder,.pl-c-typeahead__input:focus::-webkit-input-placeholder,.pl-c-typeahead__input:hover::-moz-input-placeholder,.pl-c-typeahead__input:hover::-webkit-input-placeholder{color:#fff!important}.pl-c-body--theme-light .pl-c-typeahead__hint:focus::-moz-input-placeholder,.pl-c-body--theme-light .pl-c-typeahead__hint:focus::-webkit-input-placeholder,.pl-c-body--theme-light .pl-c-typeahead__hint:hover::-moz-input-placeholder,.pl-c-body--theme-light .pl-c-typeahead__hint:hover::-webkit-input-placeholder,.pl-c-body--theme-light .pl-c-typeahead__input:focus::-moz-input-placeholder,.pl-c-body--theme-light .pl-c-typeahead__input:focus::-webkit-input-placeholder,.pl-c-body--theme-light .pl-c-typeahead__input:hover::-moz-input-placeholder,.pl-c-body--theme-light .pl-c-typeahead__input:hover::-webkit-input-placeholder{color:#222!important}.pl-c-typeahead__menu{overflow:hidden;max-height:0;-webkit-transition:max-height .1s ease-out;transition:max-height .1s ease-out;background-color:#222;text-transform:capitalize;position:absolute;min-width:100%;width:100%;overflow:hidden;top:100%;right:0;max-height:0;display:block!important;-webkit-transition:max-height .3s ease,opacity .3s ease;transition:max-height .3s ease,opacity .3s ease;opacity:0}.pl-c-typeahead__menu.pl-is-active{max-height:calc(100vh - 2rem - 1rem);max-height:calc(var(--pl-viewport-height,calc(100vh - 2rem)) - 1rem);overflow:auto;-webkit-overflow-scrolling:touch}@media all and (min-width:42em){.pl-c-typeahead__menu{border-bottom-right-radius:6px;border-bottom-left-radius:6px}}.pl-c-body--theme-light .pl-c-typeahead__menu{background-color:#fafafa}.pl-c-typeahead__menu.pl-is-open{max-height:120rem;max-height:calc(var(--viewport-height) - 4rem);opacity:1}@media all and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-typeahead__menu{position:relative!important;border-radius:0}}@media all and (max-width:41em){.pl-c-typeahead__menu{position:relative!important}}.pl-c-typeahead__results{list-style:none;margin:0;padding:0;background-color:inherit;border-color:transparent;border-width:1px;border-style:solid;overflow:hidden;border-color:#151515}@media all and (min-width:42em){.pl-c-typeahead__results{border-bottom-right-radius:6px;border-bottom-left-radius:6px}}.pl-c-typeahead__results:empty{border-width:0;max-height:0}.pl-c-body--theme-light .pl-c-typeahead__results{border-color:#ccc}@media all and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-typeahead__results{border-radius:0}}.pl-c-typeahead__result{-webkit-transition:all .3s ease;transition:all .3s ease;background-color:inherit;padding:.8em;cursor:pointer;overflow:hidden}.pl-c-typeahead__result:last-child{border-bottom-right-radius:6px;border-bottom-left-radius:6px}.pl-c-body--theme-sidebar .pl-c-typeahead__result:last-child{border-radius:0}.pl-c-typeahead__result:hover{background-color:rgba(255,255,255,.15)}.pl-c-body--theme-light .pl-c-typeahead__result:hover{background-color:#eee}.pl-c-typeahead__result:active,.pl-c-typeahead__result:focus{background-color:rgba(255,255,255,.18)}.pl-c-body--theme-light .pl-c-typeahead__result:active,.pl-c-body--theme-light .pl-c-typeahead__result:focus{background-color:#ddd}.pl-c-typeahead__result.pl-has-cursor{color:#fff;background-color:rgba(255,255,255,.25)}.pl-c-body--theme-light .pl-c-typeahead__result.pl-has-cursor{color:#000;background-color:#ddd}.pl-c-typeahead__input-wrapper{position:relative}.pl-c-typeahead__clear-button{background-color:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background-color .1s ease-out,color .1s ease-out;transition:background-color .1s ease-out,color .1s ease-out;cursor:pointer;outline-offset:-3px;outline-width:2px;height:1.7rem;width:1.7rem;background-color:transparent;border-radius:20rem;overflow:hidden;position:absolute;right:0;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);z-index:100;cursor:pointer;border:0;-webkit-transition:opacity .1s ease;transition:opacity .1s ease;opacity:0;visibility:hidden}.pl-c-typeahead__clear-button:hover{color:#fff;background-color:#222}.pl-c-typeahead__clear-button.pl-is-active,.pl-c-typeahead__clear-button:active{color:#fff;background-color:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-typeahead__clear-button{background-color:#fff;color:#4d4c4c}.pl-c-body--theme-light .pl-c-typeahead__clear-button:hover{background-color:#eee}.pl-c-body--theme-light .pl-c-typeahead__clear-button:active,.pl-c-body--theme-light .pl-c-typeahead__clear-button:focus{background-color:#ddd}.pl-c-body--theme-density-cozy .pl-c-typeahead__clear-button{font-size:.85rem;padding:1.2rem .8rem}.pl-c-body--theme-density-comfortable .pl-c-typeahead__clear-button{font-size:.85rem;padding:1.5rem 1rem}.pl-c-typeahead__clear-button:active,.pl-c-typeahead__clear-button:hover{background-color:transparent}@media all and (min-width:42em){.pl-c-typeahead__clear-button{height:1.4rem;width:1.4rem}}.pl-c-body--theme-light .pl-c-typeahead__clear-button{background-color:transparent}.pl-c-body--theme-light .pl-c-typeahead__clear-button:active,.pl-c-body--theme-light .pl-c-typeahead__clear-button:hover{background-color:transparent}.pl-c-typeahead__clear-button.pl-is-visible{opacity:1;visibility:visible}.pl-c-typeahead__clear-button-icon{fill:currentColor;line-height:0;font-size:0;position:absolute;top:50%;left:50%;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0)}pl-toggle-info{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-item-align:center;align-self:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;z-index:10;width:100%;cursor:pointer}.pl-c-toggle-info,.pl-c-toggle-info__action{width:100%}pl-toggle-layout{display:none;-ms-flex-item-align:center;align-self:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;z-index:10;width:100%;cursor:pointer}@media all and (min-width:42em){pl-toggle-layout{display:-webkit-box;display:-ms-flexbox;display:flex}}.pl-c-toggle-layout,.pl-c-toggle-layout__action{width:100%}pl-toggle-theme{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-item-align:center;align-self:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;z-index:10;width:100%;cursor:pointer}.pl-c-toggle-theme,.pl-c-toggle-theme__action{width:100%}pl-tools-menu{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.pl-c-tools{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex}.pl-c-tools__toggle{background-color:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background-color .1s ease-out,color .1s ease-out;transition:background-color .1s ease-out,color .1s ease-out;cursor:pointer;outline-offset:-3px;outline-width:2px;margin:0;padding-top:.6rem;padding-bottom:.5rem;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative;min-width:30px}.pl-c-tools__toggle:hover{color:#fff;background-color:#222}.pl-c-tools__toggle.pl-is-active,.pl-c-tools__toggle:active{color:#fff;background-color:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-tools__toggle{background-color:#fff;color:#4d4c4c}.pl-c-body--theme-light .pl-c-tools__toggle:hover{background-color:#eee}.pl-c-body--theme-light .pl-c-tools__toggle:active,.pl-c-body--theme-light .pl-c-tools__toggle:focus{background-color:#ddd}.pl-c-body--theme-density-cozy .pl-c-tools__toggle{font-size:.85rem;padding:1.2rem .8rem}.pl-c-body--theme-density-comfortable .pl-c-tools__toggle{font-size:.85rem;padding:1.5rem 1rem}.pl-c-tools__toggle-icon{-webkit-transition:inherit;transition:inherit}.pl-c-tools__list{list-style:none;margin:0;padding:0;overflow:hidden;max-height:0;-webkit-transition:max-height .1s ease-out;transition:max-height .1s ease-out;position:absolute;top:100%;right:0;z-index:10;width:10rem;border-bottom-left-radius:6px;border-bottom-right-radius:6px}.pl-c-tools__list.pl-is-active{max-height:calc(100vh - 2rem - 1rem);max-height:calc(var(--pl-viewport-height,calc(100vh - 2rem)) - 1rem);overflow:auto;-webkit-overflow-scrolling:touch}.pl-c-tools__action{background-color:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background-color .1s ease-out,color .1s ease-out;transition:background-color .1s ease-out,color .1s ease-out;cursor:pointer;outline-offset:-3px;outline-width:2px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;margin:0}.pl-c-tools__action:hover{color:#fff;background-color:#222}.pl-c-tools__action.pl-is-active,.pl-c-tools__action:active{color:#fff;background-color:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-tools__action{background-color:#fff;color:#4d4c4c}.pl-c-body--theme-light .pl-c-tools__action:hover{background-color:#eee}.pl-c-body--theme-light .pl-c-tools__action:active,.pl-c-body--theme-light .pl-c-tools__action:focus{background-color:#ddd}.pl-c-body--theme-density-cozy .pl-c-tools__action{font-size:.85rem;padding:1.2rem .8rem}.pl-c-body--theme-density-comfortable .pl-c-tools__action{font-size:.85rem;padding:1.5rem 1rem}.pl-c-tools__action-icon{margin-left:auto}.pl-c-viewport{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%;position:relative;top:2rem;bottom:0;left:0;right:0;z-index:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-transition:height .3s ease;transition:height .3s ease}@supports ((position:-webkit-sticky) or (position:sticky)){.pl-c-viewport{top:0}}.pl-c-viewport__cover{width:100%;height:100%;display:none;position:fixed;top:0;left:0;z-index:200;cursor:move;pointer-events:auto}.pl-c-viewport__iframe-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;max-width:100vw;width:100%;position:relative;margin:0 auto;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-overflow-scrolling:touch;width:100%}.pl-c-viewport__iframe-wrapper.hay-mode{-webkit-transition:all 40s linear;transition:all 40s linear}@media all and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-viewport__iframe-wrapper{max-width:calc(100vw - 14rem)}}.pl-c-viewport__iframe{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;width:100%;border:0;padding:0;margin:0;top:0;bottom:0;left:0;right:0;background-color:#fff;max-width:100vw}.pl-c-viewport__iframe.is-ready{min-height:0}@media all and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-viewport__iframe{max-width:calc(100vw - 14rem)}}.pl-c-viewport__iframe.hay-mode{-webkit-transition:all 40s linear;transition:all 40s linear}.pl-c-viewport__resizer{position:absolute;right:0;top:0;bottom:0;width:14px;margin:0;height:100%;cursor:ew-resize}.pl-c-viewport__resizer-handle{margin:0;width:100%;height:100%;background-color:#ccc;-webkit-transition:background-color .1s ease-out;transition:background-color .1s ease-out}.pl-c-viewport__resizer-handle:hover{background-color:grey}.pl-c-viewport__resizer-handle:active{cursor:move;background-color:#4d4c4c}.vp-animate{-webkit-transition:width .8s ease-out;transition:width .8s ease-out}@media all and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-viewport-modal-wrapper{max-width:calc(100vw - 14rem)}}@media all and (min-width:42em) and (-ms-high-contrast:none),all and (min-width:42em) and (-ms-high-contrast:active){.pl-c-body--theme-sidebar .pl-c-viewport-modal-wrapper{margin-left:14rem}}.pl-c-viewport-size{margin:0;border:0;padding:.3rem .5rem .4rem;line-height:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.pl-c-viewport-size__input{padding:.1rem;margin:0;border:0;border-radius:3px;background-color:transparent;font-size:inherit;color:grey;width:35px;text-align:right;-webkit-transition:all .1s ease-out;transition:all .1s ease-out}.pl-c-viewport-size__input::-moz-focus-inner{padding:0;border:0}.pl-c-viewport-size__input:hover{color:#fff;background-color:#222}.pl-c-viewport-size__input:active,.pl-c-viewport-size__input:focus{color:#fff;background-color:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-viewport-size__label{display:block;margin:0;padding:0}.pl-c-size-list{display:none;list-style:none;margin:0;padding:0;overflow-x:auto;padding:0 .25rem}@media all and (min-width:42em){.pl-c-size-list{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-overflow-scrolling:touch}}@media all and (min-width:53em){.pl-c-size-list{display:block;display:-webkit-box;display:-ms-flexbox;display:flex}}.pl-c-size-list__action{background-color:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background-color .1s ease-out,color .1s ease-out;transition:background-color .1s ease-out,color .1s ease-out;cursor:pointer;outline-offset:-3px;outline-width:2px}.pl-c-size-list__action:hover{color:#fff;background-color:#222}.pl-c-size-list__action.pl-is-active,.pl-c-size-list__action:active{color:#fff;background-color:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-size-list__action{background-color:#fff;color:#4d4c4c}.pl-c-body--theme-light .pl-c-size-list__action:hover{background-color:#eee}.pl-c-body--theme-light .pl-c-size-list__action:active,.pl-c-body--theme-light .pl-c-size-list__action:focus{background-color:#ddd}.pl-c-body--theme-density-cozy .pl-c-size-list__action{font-size:.85rem;padding:1.2rem .8rem}.pl-c-body--theme-density-comfortable .pl-c-size-list__action{font-size:.85rem;padding:1.5rem 1rem}.pl-c-size-list__item:first-child{margin-left:auto}.pl-c-size-list__item:last-child{margin-right:auto}.pl-has-annotation{cursor:help!important;outline:1px dotted grey;outline-offset:-4px;-webkit-transition:-webkit-box-shadow .1s ease;transition:-webkit-box-shadow .1s ease;transition:box-shadow .1s ease;transition:box-shadow .1s ease,-webkit-box-shadow .1s ease}.pl-has-annotation a,.pl-has-annotation input{cursor:help!important}.pl-has-annotation:hover{-webkit-box-shadow:0 0 3px grey;box-shadow:0 0 3px grey}.pl-has-annotation.active{-webkit-box-shadow:inset 0 0 6px #4d4c4c;box-shadow:inset 0 0 6px #4d4c4c;outline:1px dotted grey;outline-offset:-1px}.pl-c-annotation-tip{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:24px!important;height:24px!important;margin-top:6px!important;margin-left:6px!important;border-radius:50%!important;background-color:#222!important;color:#fff!important;font-size:16px!important;position:absolute;z-index:100}.pl-c-annotations{margin:1rem 0}.pl-c-annotations__title{font-size:1.2rem!important;margin:0 0 .5rem}.pl-c-annotations .pl-c-annotations__list{counter-reset:the-count;padding:0;margin:0;list-style:none}.pl-c-annotations__item{position:relative;padding-left:1.5rem;margin-bottom:1rem;border-radius:6px;-webkit-transition:background-color .1s ease;transition:background-color .1s ease}.pl-c-annotations__item:before{content:counter(the-count);counter-increment:the-count;font-size:85%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:14px;height:14px;border-radius:50%;padding:2px;text-align:center;background-color:grey;color:#fff;position:absolute;top:4px;left:0}.pl-c-annotations__item.pl-is-active{outline:1px dotted grey;outline-offset:-1px}.pl-c-annotations .pl-c-annotations__item-title{margin-bottom:0}.pl-c-breadcrumb{list-style:none;margin:0;padding:0;margin-bottom:.5rem;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:.7rem;color:grey;text-transform:capitalize}.pl-c-breadcrumb__item:after{content:'\25B6';opacity:.4;font-size:6px;display:inline-block;margin:0 .2rem;position:relative;top:-1px}.pl-c-logo{max-width:2rem;margin:0 1rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.pl-c-logo:focus{outline:1px dotted grey;outline-offset:-1px}.pl-c-logo__img{display:block;max-width:100%;height:auto}.pl-c-category{margin-top:6rem;font:HelveticaNeue,Helvetica,Arial,sans-serif!important}.pl-c-category:first-of-type{margin-top:2rem}.pl-c-category__title{font-size:1.4rem!important;color:#222!important;margin:0 0 .2rem;text-transform:capitalize}.pl-c-category__title-link{-webkit-transition:color .1s ease-out;transition:color .1s ease-out}.pl-c-category__description{font-size:.85rem;line-height:1.5;max-width:30rem}.pl-c-category__description:empty{display:none}.pl-c-pattern-info{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-flow:row wrap;flex-flow:row wrap;width:100%;overflow:auto;-webkit-overflow-scrolling:touch}.pl-c-pattern .pl-c-pattern-info{overflow:scroll;-ms-overflow-style:-ms-autohiding-scrollbar;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-overflow-scrolling:touch}.pl-c-pattern .pl-c-pattern-info::-webkit-scrollbar{width:0!important}@media all and (min-width:53em){.pl-c-pattern .pl-c-pattern-info{max-height:none;overflow:visible}}.pl-c-pattern-info__panel{-ms-flex-preferred-size:40%;flex-basis:40%;padding-top:1rem;padding-right:1rem;padding-bottom:0;padding-left:1rem;margin-bottom:1rem;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-width:100%;max-height:30rem;min-width:300px;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow:auto;-webkit-overflow-scrolling:touch}.pl-c-pattern-info__header{margin-bottom:.5rem}.pl-c-pattern-info__title{font-size:1.4rem!important;font-weight:400;margin-top:0;margin-bottom:0;color:inherit;text-transform:capitalize;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.pl-c-pattern-info__description{border-bottom-color:grey}.pl-c-annotations{border-top-color:grey}.pl-c-lineage{font-size:.85rem;line-height:1.7;margin-top:0}.pl-c-lineage__link{font-style:italic;color:grey;text-decoration:underline;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transition:opacity .1s ease;transition:opacity .1s ease}.pl-c-lineage__link:focus,.pl-c-lineage__link:hover{opacity:.8}.pl-c-pattern-state{display:inline-block;width:5px;height:5px;margin-left:10px;position:relative;top:5px;left:0;border-radius:50%;background-color:#02a4d5;line-height:4px;text-indent:10px}.pl-c-pattern-state--complete{background-color:#03790f}.pl-c-pattern-state--inreview{background-color:#c7a118}.pl-c-pattern-state--deprecated{background-color:#b00b02}.complete:before{color:#03790f!important}.pl-c-pattern{margin-bottom:2rem;position:relative;clear:both}.pl-c-pattern__header{position:relative;padding:.5rem 0 0;line-height:1.3;font-size:90%;color:grey}.pl-c-pattern__header:empty{padding:0}.pl-c-pattern__title{font-family:HelveticaNeue,Helvetica,Arial,sans-serif!important;font-size:.85rem!important;line-height:1!important;font-weight:400!important;margin:0!important;padding:0!important;text-transform:capitalize!important}.pl-c-pattern__title-link{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;padding:1rem 0 .3rem;color:grey!important;text-decoration:none;cursor:pointer}.pl-c-pattern__title-link:focus,.pl-c-pattern__title-link:hover{color:#000!important}.pl-c-pattern__extra-toggle{font-size:9px;position:absolute;bottom:-1px;right:0;z-index:1;padding:.65em .65em .5em;line-height:1;color:grey;background-color:transparent;font-weight:400;border:1px solid #ddd;border-top-left-radius:6px;border-top-right-radius:6px;-webkit-transition:background-color .1s ease-out;transition:background-color .1s ease-out}.pl-c-pattern__extra-toggle .pl-c-pattern__toggle-icon{display:inline-block}.pl-c-pattern__extra-toggle.pl-is-active,.pl-c-pattern__extra-toggle:focus,.pl-c-pattern__extra-toggle:hover{background-color:#fafafa;color:#000}.pl-c-pattern__extra-toggle:focus{outline:1px dotted #4d4c4c}.pl-c-pattern__extra-toggle.pl-is-active{border-bottom-color:#fafafa}.pl-c-pattern__extra-toggle.pl-is-active .pl-c-pattern__toggle-icon{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.pl-c-pattern__extra{background-color:#fafafa;border-top:1px solid #ddd;margin-bottom:1rem;overflow:hidden;max-height:1px;position:relative;-webkit-transition:all .1s ease-out;transition:all .1s ease-out}.pl-c-pattern__extra.pl-is-active{border:1px solid #ddd;border-radius:6px;border-top-right-radius:0;max-height:150rem}.pl-c-tabs{padding:0 .5rem .5rem;background-color:#fff;border:1px solid #ddd;border-radius:6px;font-family:HelveticaNeue,Helvetica,Arial,sans-serif;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow:hidden;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.pl-c-tabs__list{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;list-style:none;margin:0;padding:.5rem 0;padding-bottom:0;background-color:#fff;border-bottom:1px solid rgba(0,0,0,.1)}.pl-c-tabs__link{display:block;line-height:1;border-bottom:4px solid transparent;color:grey;background-color:#fff;cursor:pointer;text-decoration:none;text-transform:uppercase;-webkit-transition:all .1s ease-out;transition:all .1s ease-out;padding:8px;font-size:13px}.pl-c-tabs__link:hover{color:#222}.pl-c-tabs__link.pl-is-active-tab{color:#222;border-bottom-color:#bf6500}.pl-c-tabs__content{overflow:auto;-webkit-overflow-scrolling:touch;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.pl-c-tabs__panel{display:none}.pl-c-tabs__panel.pl-is-active-tab{display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.pl-c-tabs__panel :not(pre)>code[class*=language-],.pl-c-tabs__panel pre[class*=language-]{background-color:transparent;margin:0;padding-top:1rem;padding-right:.5rem;padding-bottom:.5rem;padding-left:.5rem;border:0;display:block;width:100%}.pl-c-tabs__panel code[class*=language-]{background-color:transparent;margin:0}.pl-c-text-passage{font-size:.85rem;line-height:1.7}.pl-c-text-passage p{margin-top:0;margin-bottom:1rem}.pl-c-text-passage a{color:grey;text-decoration:underline;-webkit-transition:opacity .1s ease;transition:opacity .1s ease}.pl-c-text-passage a:focus,.pl-c-text-passage a:hover{opacity:.8}.pl-c-text-passage code[class*=language-],.pl-c-text-passage pre[class*=language-]{color:inherit}.pl-c-text-passage blockquote{padding-left:.8rem;border-left:3px solid inherit}.pl-c-text-passage hr{height:1px;background-color:grey;margin:2rem 0;border:0}.pl-c-text-passage h1{margin-bottom:1rem;font-weight:400}.pl-c-text-passage h2{margin:1rem 0 1rem;font-weight:400}.pl-c-text-passage h3{margin:1rem 0 1rem;font-weight:400}.pl-c-text-passage h4{margin:1rem 0 1rem;font-weight:400}.pl-c-text-passage h5{margin:1rem 0 1rem;font-weight:400}.pl-c-text-passage h6{margin:1rem 0 1rem;font-weight:400}.pl-c-text-passage ul{list-style:square;margin-left:.9rem;margin-bottom:1rem}.pl-c-text-passage ul li:last-child{margin-bottom:0}.pl-c-text-passage ol{list-style:decimal;margin-left:.9rem;margin-bottom:1rem}.pl-c-text-passage ol li:last-child{margin-bottom:0}.pl-c-text-passage li{margin-bottom:.5rem}@media all and (max-width:41em){.pl-c-body--theme-light .pl-c-tools__list.pl-is-active{border-bottom:1px solid #ccc;border-left:1px solid #ccc}}.pl-c-body--theme-light:not(.pl-c-body--theme-sidebar) .pl-c-tools__list.pl-is-active{border-bottom:1px solid #ccc;border-left:1px solid #ccc}.pl-c-body--theme-light .pl-c-nav__link--dropdown{color:#4d4c4c;background-color:#fff}.pl-c-body--theme-light .pl-c-nav__link--dropdown:after{color:#ccc}@media all and (min-width:42em){.pl-c-body--theme-light .pl-c-nav__sublist>.pl-c-nav__item:last-child .pl-c-nav__link{border-bottom-left-radius:6px;border-bottom-right-radius:6px}}.pl-c-body--theme-light .pl-c-viewport-size__input{color:#4d4c4c}.pl-c-body--theme-light .pl-c-viewport-size__input:focus,.pl-c-body--theme-light .pl-c-viewport-size__input:hover{background-color:#ddd}.pl-c-body--theme-light .typeahead{background-color:#ddd!important}.pl-c-body--theme-light .tt-input{background-color:#eee!important;color:#4d4c4c!important}.pl-c-body--theme-light .tt-input:hover{color:#222;background-color:#ddd!important}.pl-c-body--theme-light .tt-input:hover::-webkit-input-placeholder{color:#222}.pl-c-body--theme-light .tt-input:hover::-moz-input-placeholder{color:#222}.pl-c-body--theme-light .pl-c-drawer__close-btn,.pl-c-body--theme-light .pl-c-tools__action{background-color:#fff}.pl-c-body--theme-light .pl-c-drawer__close-btn:focus,.pl-c-body--theme-light .pl-c-drawer__close-btn:hover,.pl-c-body--theme-light .pl-c-tools__action:focus,.pl-c-body--theme-light .pl-c-tools__action:hover{background-color:#eee;color:#4d4c4c}.pl-c-body--theme-density-cozy .pl-c-header{font-size:.85rem}.pl-c-body--theme-density-cozy .pl-c-viewport-size__input{width:44px}.pl-c-body--theme-density-cozy .pl-c-typeahead{padding:.9rem .8rem}@media all and (max-width:78em){.pl-c-body--theme-density-cozy .pl-c-size-list{display:none}}@media all and (max-width:78em){.pl-c-body--theme-density-cozy .pl-c-viewport-size{display:none}}.pl-c-body--theme-density-cozy .pl-c-tools__toggle{min-width:44px}.pl-c-body--theme-density-cozy .pl-c-viewport{top:3.28rem}.pl-c-body--theme-density-comfortable .pl-c-header{font-size:.85rem}.pl-c-body--theme-density-comfortable .pl-c-logo{max-width:4rem}.pl-c-body--theme-density-comfortable .pl-c-header .tt-suggestion{padding:1.5rem 1rem}.pl-c-body--theme-density-comfortable .pl-c-viewport-size__input{width:44px}.pl-c-body--theme-density-comfortable .pl-c-typeahead{padding:.9rem 1rem}@media all and (max-width:78em){.pl-c-body--theme-density-comfortable .pl-c-size-list{display:none}}@media all and (max-width:78em){.pl-c-body--theme-density-comfortable .pl-c-viewport-size{display:none}}.pl-c-body--theme-density-comfortable .pl-c-tools__toggle{min-width:44px}.pl-c-body--theme-density-comfortable .pl-c-viewport{top:3.8rem}@media all and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-logo{max-width:7rem;margin:0 auto 1rem}.pl-c-body--theme-sidebar .pl-c-nav{display:block;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.pl-c-body--theme-sidebar .pl-c-nav__list{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.pl-c-body--theme-sidebar .pl-c-nav__sublist{position:relative;border-radius:0}.pl-c-body--theme-sidebar .pl-c-nav__sublist .pl-c-nav__link{padding-left:1rem}.pl-c-body--theme-sidebar .pl-c-nav__sublist--dropdown.pl-is-active{border:0;border-left:1px solid #4d4c4c}.pl-c-body--theme-sidebar.pl-c-body--theme-light .pl-c-nav__sublist--dropdown.pl-is-active{border-left-color:#eee}.pl-c-body--theme-sidebar .pl-c-nav__subsublist{border-left:1px solid #4d4c4c;margin-left:1rem}.pl-c-body--theme-sidebar.pl-c-body--theme-light .pl-c-nav__subsublist{border-left-color:#eee}.pl-c-body--theme-sidebar .pl-c-nav__sublist .pl-c-nav__link{border-left:0;border-right:0}}@media all and (min-width:42em) and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-nav__sublist>.pl-c-nav__item:last-child .pl-c-nav__link{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:0}}@media all and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-controls{display:block;justify-self:flex-end;margin-left:0}.pl-c-body--theme-sidebar .pl-c-viewport-size{display:none}.pl-c-body--theme-sidebar .pl-c-tools__toggle{display:none}.pl-c-body--theme-sidebar .pl-c-tools__list{max-height:none;overflow:visible;position:relative;border-radius:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%}.pl-c-body--theme-sidebar .pl-c-drawer{right:0;width:auto}}.is-vishidden{position:absolute!important;overflow:hidden;width:1px;height:1px;padding:0;border:0;clip:rect(1px,1px,1px,1px)} \ No newline at end of file diff --git a/packages/uikit-workshop/dist/styleguide/css/pattern-lab.css b/packages/uikit-workshop/dist/styleguide/css/pattern-lab.css index 0ecfdbab2..f2011df25 100644 --- a/packages/uikit-workshop/dist/styleguide/css/pattern-lab.css +++ b/packages/uikit-workshop/dist/styleguide/css/pattern-lab.css @@ -1 +1 @@ -.pl-c-body *{-webkit-box-sizing:border-box;box-sizing:border-box}button{font-size:inherit;background-color:transparent}.pl-c-html{min-height:100%}.pl-c-body{margin:0;padding:0;-webkit-text-size-adjust:100%;display:-webkit-box;display:-ms-flexbox;display:flex}pre[class*=language-]{background-image:-webkit-gradient(linear,left top, right top,from(#fff),to(rgba(255,255,255,0))),-webkit-gradient(linear,right top, left top,from(#fff),to(rgba(255,255,255,0))),-webkit-gradient(linear,left top, right top,from(#eaf0f6),to(rgba(238,238,238,0))),-webkit-gradient(linear,right top, left top,from(#eaf0f6),to(rgba(238,238,238,0))),-webkit-gradient(linear,left top, left bottom,from(#fff),to(rgba(255,255,255,0))),-webkit-gradient(linear,left bottom, left top,from(#fff),to(rgba(255,255,255,0))),-webkit-gradient(linear,left top, left bottom,from(#eaf0f6),to(rgba(238,238,238,0))),-webkit-gradient(linear,left bottom, left top,from(#eaf0f6),to(rgba(238,238,238,0)));background-image:-webkit-linear-gradient(left,#fff,rgba(255,255,255,0)),-webkit-linear-gradient(right,#fff,rgba(255,255,255,0)),-webkit-linear-gradient(left,#eaf0f6,rgba(238,238,238,0)),-webkit-linear-gradient(right,#eaf0f6,rgba(238,238,238,0)),-webkit-linear-gradient(top,#fff,rgba(255,255,255,0)),-webkit-linear-gradient(bottom,#fff,rgba(255,255,255,0)),-webkit-linear-gradient(top,#eaf0f6,rgba(238,238,238,0)),-webkit-linear-gradient(bottom,#eaf0f6,rgba(238,238,238,0));background-image:linear-gradient(to right,#fff,rgba(255,255,255,0)),linear-gradient(to left,#fff,rgba(255,255,255,0)),linear-gradient(to right,#eaf0f6,rgba(238,238,238,0)),linear-gradient(to left,#eaf0f6,rgba(238,238,238,0)),linear-gradient(to bottom,#fff,rgba(255,255,255,0)),linear-gradient(to top,#fff,rgba(255,255,255,0)),linear-gradient(to bottom,#eaf0f6,rgba(238,238,238,0)),linear-gradient(to top,#eaf0f6,rgba(238,238,238,0));background-color:#fff;background-attachment:local,local,scroll,scroll,local,local,scroll,scroll;background-position:0 0,100% 0,0 0,100% 0,0 0,0 100%,0 0,0 100%;background-size:4em 100%,4em 100%,1em 100%,1em 100%,100% 4em,100% 4em,100% 1em,100% 1em;background-repeat:no-repeat;-ms-overflow-style:-ms-autohiding-scrollbar;-webkit-overflow-scrolling:touch;overflow:auto}code[class*=language-],pre[class*=language-]{color:#000;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono',monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;word-wrap:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background-color:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background-color:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background-color:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#a67f59;background-color:rgba(255,255,255,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}pre.line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}pre.line-numbers>code{position:relative}.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.line-numbers-rows>span{pointer-events:none;display:block;counter-increment:linenumber}.line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right}.token a{color:inherit}pl-controls{margin-left:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.pl-c-body--theme-sidebar pl-controls{display:block}@media all and (min-width:42em){.pl-c-body--theme-sidebar pl-controls{width:100%}}.pl-c-controls{margin-left:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap}@media all and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-controls{display:block}}.pl-c-controls__list{list-style:none;margin:0;padding:0;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap}pl-drawer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative;position:-webkit-sticky;position:sticky;top:auto;bottom:0;left:0;right:0;z-index:20;overflow:visible}.pl-c-body--theme-light pl-drawer{background-color:#fff;color:#4d4c4c;border-top:1.1px solid #ccc}.pl-c-drawer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;font-family:HelveticaNeue,Helvetica,Arial,sans-serif;background-color:#222;color:#ccc;width:100%;height:100%;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);pointer-events:none;overflow:hidden;max-width:100vw}@media all and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-drawer{max-width:calc(100vw - 14rem)}}.pl-c-body--theme-light .pl-c-drawer{background-color:#fff;color:#4d4c4c}.pl-c-drawer.pl-is-active{pointer-events:auto}.pl-c-drawer__wrapper{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.pl-c-drawer__wrapper>*{height:100%}.pl-c-drawer__content{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;overflow:hidden}.pl-c-drawer__toolbar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-negative:0;flex-shrink:0}.pl-c-drawer__content-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;overflow:hidden}@supports (padding:env(safe-area-inset-top)){.pl-c-drawer__content-wrapper{padding-right:calc(env(safe-area-inset-right) - .9rem)}}.pl-c-drawer__toolbar-controls{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-item-align:end;align-self:flex-end;position:relative;z-index:10;-ms-flex-negative:0;flex-shrink:0}.pl-c-drawer__close-btn{background-color:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background-color .1s ease-out,color .1s ease-out;transition:background-color .1s ease-out,color .1s ease-out;cursor:pointer;outline-offset:-3px;outline-width:2px;margin:0;-webkit-appearance:none;-ms-flex-negative:0;flex-shrink:0;z-index:2;opacity:.85;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.pl-c-drawer__close-btn:hover{color:#fff;background-color:#222}.pl-c-drawer__close-btn.pl-is-active,.pl-c-drawer__close-btn:active{color:#fff;background-color:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-drawer__close-btn{background-color:#fff;color:#4d4c4c}.pl-c-body--theme-light .pl-c-drawer__close-btn:hover{background-color:#eee}.pl-c-body--theme-light .pl-c-drawer__close-btn:active,.pl-c-body--theme-light .pl-c-drawer__close-btn:focus{background-color:#ddd}.pl-c-body--theme-density-cozy .pl-c-drawer__close-btn{font-size:.85rem;padding:1.2rem .8rem}.pl-c-body--theme-density-comfortable .pl-c-drawer__close-btn{font-size:.85rem;padding:1.5rem 1rem}@media all and (max-width:41em){.pl-c-drawer__close-btn{border-radius:20rem;padding-top:.5rem;padding-bottom:.5rem}}.pl-c-drawer__close-btn:focus,.pl-c-drawer__close-btn:hover{opacity:1}.pl-c-drawer__close-btn:active,.pl-c-drawer__close-btn:focus{opacity:1}.pl-c-drawer__cover{width:100%;height:100%;top:0;left:0;display:none;position:fixed;z-index:20;cursor:move}.pl-c-drawer__resizer{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;top:0;left:0;right:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;height:14px;width:100%;background-color:inherit;z-index:2;cursor:ns-resize}.pl-c-drawer__resizer:after{content:'';height:3px;width:50px;border-top:1px solid currentColor;border-bottom:1px solid currentColor;-webkit-transition:opacity .3s ease-out;transition:opacity .3s ease-out;opacity:.5;background-color:currentColor;border-radius:3px;display:block}.pl-c-drawer__resizer:hover:after{opacity:.8}.pl-c-drawer__resizer:active:after,.pl-c-drawer__resizer:focus:after{opacity:.95}.pl-c-drawer__close-btn-icon{width:12px;height:12px;color:currentColor;fill:currentColor;-webkit-transition:fill .1s ease-out;transition:fill .1s ease-out;-ms-flex-negative:0;flex-shrink:0;-ms-flex-item-align:center;align-self:center}.pl-c-code-copy-btn{display:inline-block;position:absolute;top:.5rem;right:.5rem;padding:.2rem .4rem;background-color:#eee;color:#222;border:1px solid #ddd;border-radius:6px;font-family:HelveticaNeue,Helvetica,Arial,sans-serif;font-size:1rem;text-transform:lowercase;line-height:1;cursor:pointer;z-index:2;-webkit-transition:background-color .1s ease-out;transition:background-color .1s ease-out}.pl-c-code-copy-btn:focus,.pl-c-code-copy-btn:hover{background-color:#ccc}pl-header{position:fixed;position:-webkit-sticky;position:sticky;top:0;left:0;z-index:4;display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;background-color:#000;color:grey}@media all and (min-width:42em){.pl-c-body--theme-sidebar pl-header{width:14rem;height:100vh;overflow:auto;padding:1rem;-webkit-overflow-scrolling:touch;border-bottom:0}}.pl-c-body--theme-light pl-header{border-right:1px solid #ccc;background-color:#fff;border-bottom:1px solid #ccc}.pl-c-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;width:100%;font-family:HelveticaNeue,Helvetica,Arial,sans-serif;font-size:.7rem;min-height:30px;background-color:inherit}@supports (padding:0px){.pl-c-header{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}}@media all and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-header{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}}.pl-c-header__nav-toggle{background-color:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background-color .1s ease-out,color .1s ease-out;transition:background-color .1s ease-out,color .1s ease-out;cursor:pointer;outline-offset:-3px;outline-width:2px;border:0}.pl-c-header__nav-toggle:hover{color:#fff;background-color:#222}.pl-c-header__nav-toggle.pl-is-active,.pl-c-header__nav-toggle:active{color:#fff;background-color:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-header__nav-toggle{background-color:#fff;color:#4d4c4c}.pl-c-body--theme-light .pl-c-header__nav-toggle:hover{background-color:#eee}.pl-c-body--theme-light .pl-c-header__nav-toggle:active,.pl-c-body--theme-light .pl-c-header__nav-toggle:focus{background-color:#ddd}.pl-c-body--theme-density-cozy .pl-c-header__nav-toggle{font-size:.85rem;padding:1.2rem .8rem}.pl-c-body--theme-density-comfortable .pl-c-header__nav-toggle{font-size:.85rem;padding:1.5rem 1rem}@media all and (min-width:42em){.pl-c-header__nav-toggle{display:none}}pl-layout{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%;min-height:100vh;max-width:100vw;background-color:#ddd}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){pl-layout{overflow:hidden}}pl-layout .pl-c-layout{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}@media all and (min-width:42em){pl-layout.pl-c-body--theme-sidebar{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}}pl-layout.pl-c-body--theme-light{background-color:#fff}pl-nav{background-color:inherit;display:-webkit-box;display:-ms-flexbox;display:flex}.pl-c-nav{overflow:hidden;max-height:0;-webkit-transition:max-height .1s ease-out;transition:max-height .1s ease-out;background-color:inherit;position:absolute;left:0;top:100%;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;transition:max-height .1s ease-out}.pl-c-nav.pl-is-active{max-height:calc(100vh - 2rem - 1rem);max-height:calc(var(--pl-viewport-height,calc(100vh - 2rem)) - 1rem);overflow:auto;-webkit-overflow-scrolling:touch}@media all and (min-width:42em){.pl-c-nav{overflow:visible;max-height:none}}.pl-c-nav.pl-is-active{-webkit-box-shadow:0 1px 1px #000;box-shadow:0 1px 1px #000}.pl-c-body--theme-light .pl-c-nav.pl-is-active{-webkit-box-shadow:0 1px 1px #a6a6a6;box-shadow:0 1px 1px #a6a6a6}@media all and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-nav.pl-is-active{-webkit-box-shadow:none;box-shadow:none}}@media all and (min-width:42em){.pl-c-nav.pl-is-active{overflow:visible;max-height:none}}@media all and (min-width:42em){.pl-c-nav{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;position:relative;top:auto;width:auto;-webkit-box-shadow:none;box-shadow:none}}.pl-c-nav__list{z-index:1;margin:0;padding:0;list-style:none;-ms-flex-negative:0;flex-shrink:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-width:100%;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;background-color:inherit}@media all and (min-width:42em){.pl-c-nav__list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.pl-c-body--theme-sidebar .pl-c-nav__list{display:block}}.pl-c-nav__item{background-color:inherit;-webkit-transform:translateZ(0);transform:translateZ(0);cursor:pointer;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.pl-c-body--theme-sidebar .pl-c-nav__item{display:block}@media all and (min-width:42em){.pl-c-nav__sublist>.pl-c-nav__item:last-child{overflow:hidden;border-bottom-left-radius:6px;border-bottom-right-radius:6px}}.pl-c-nav__link{background-color:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background-color .1s ease-out,color .1s ease-out;transition:background-color .1s ease-out,color .1s ease-out;cursor:pointer;outline-offset:-3px;outline-width:2px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:0}.pl-c-nav__link:hover{color:#fff;background-color:#222}.pl-c-nav__link.pl-is-active,.pl-c-nav__link:active{color:#fff;background-color:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-nav__link{background-color:#fff;color:#4d4c4c}.pl-c-body--theme-light .pl-c-nav__link:hover{background-color:#eee}.pl-c-body--theme-light .pl-c-nav__link:active,.pl-c-body--theme-light .pl-c-nav__link:focus{background-color:#ddd}.pl-c-body--theme-density-cozy .pl-c-nav__link{font-size:.85rem;padding:1.2rem .8rem}.pl-c-body--theme-density-comfortable .pl-c-nav__link{font-size:.85rem;padding:1.5rem 1rem}.pl-c-body--theme-sidebar .pl-c-nav__link{width:100%}.pl-c-nav__link--sublink{text-transform:none;padding-left:.5rem}.pl-c-nav__link--dropdown{-webkit-appearance:none;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.pl-c-nav__link--dropdown:after{content:'\25BC';color:rgba(255,255,255,.25);display:inline-block;font-size:7px;position:relative;top:1px;right:-2px;-webkit-transition:all .1s ease-out;transition:all .1s ease-out}.pl-c-nav__link--dropdown:focus:after,.pl-c-nav__link--dropdown:hover:after{color:grey}.pl-c-nav__link--dropdown.pl-is-active{color:#fff;background-color:#222}.pl-c-nav__link--dropdown.pl-is-active:after{color:grey;-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.pl-c-nav__sublist{background-color:inherit;list-style:none;margin:0;padding:0}@media all and (min-width:42em){.pl-c-nav__sublist{position:absolute;top:100%;left:0;min-width:10rem;border-bottom-left-radius:6px;border-bottom-right-radius:6px}}.pl-c-nav__sublist--dropdown,.pl-c-nav__subsublist--dropdown{list-style:none;margin:0;padding:0;overflow:hidden;max-height:0;-webkit-transition:max-height .1s ease-out;transition:max-height .1s ease-out;visibility:hidden}.pl-c-nav__sublist--dropdown.pl-is-active,.pl-c-nav__subsublist--dropdown.pl-is-active{max-height:calc(100vh - 2rem - 1rem);max-height:calc(var(--pl-viewport-height,calc(100vh - 2rem)) - 1rem);overflow:auto;-webkit-overflow-scrolling:touch}.pl-c-nav__sublist--dropdown.pl-is-active,.pl-c-nav__subsublist--dropdown.pl-is-active{margin-left:.5rem;visibility:visible;max-height:none}@media all and (min-width:42em){.pl-c-nav__sublist--dropdown.pl-is-active,.pl-c-nav__subsublist--dropdown.pl-is-active{height:auto;max-height:calc(100vh - 2rem - 1rem)}}.pl-c-body--theme-sidebar .pl-c-nav__sublist--dropdown.pl-is-active,.pl-c-body--theme-sidebar .pl-c-nav__subsublist--dropdown.pl-is-active{max-height:none}@media all and (min-width:42em){.pl-c-nav__sublist--dropdown.pl-is-active{margin-left:0;border-width:1px;border-style:solid;border-color:#000}.pl-c-body--theme-light .pl-c-nav__sublist--dropdown.pl-is-active{border-color:#ccc}}.pl-c-nav__subsublist{list-style:none;margin:0;padding:0}pl-search{background-color:inherit;top:0;z-index:10;-ms-flex-negative:0;flex-shrink:0;padding:.3rem .5rem;display:inline-block}@media screen and (min-width:42em){pl-search{margin-left:1rem;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-negative:1;flex-shrink:1;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.pl-c-body--theme-sidebar pl-search{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin-left:0;padding-left:0;padding-right:0;width:100%}}.pl-c-typeahead{width:100%;background-color:inherit;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important;z-index:10;text-transform:capitalize;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;color:#fafafa;position:relative}.pl-c-body--theme-light .pl-c-typeahead{color:#222}@media screen and (min-width:42em){.pl-c-typeahead{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.pl-c-body--theme-sidebar .pl-c-typeahead{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}}.pl-c-typeahead__hint{top:0;left:0;right:0;width:100%}.pl-c-typeahead__hint,.pl-c-typeahead__input{text-transform:capitalize;background-color:#222;color:#fff;border-color:#090909;text-overflow:ellipsis;border-width:1px;border-style:solid;-webkit-transition:all .1s ease;transition:all .1s ease;max-width:100%;padding:.31rem .5rem;font-size:16px;width:100%;outline-offset:-3px;outline-width:2px;-webkit-appearance:none}@media all and (min-width:900px){.pl-c-typeahead__hint,.pl-c-typeahead__input{font-size:inherit}}.pl-c-typeahead__hint::-ms-clear,.pl-c-typeahead__input::-ms-clear{display:none}.pl-c-body--theme-sidebar .pl-c-typeahead__hint,.pl-c-body--theme-sidebar .pl-c-typeahead__input{border-radius:0}.pl-c-typeahead__input-wrapper--with-clear-button .pl-c-typeahead__hint,.pl-c-typeahead__input-wrapper--with-clear-button .pl-c-typeahead__input{padding-right:1.7rem}@media all and (min-width:42em){.pl-c-typeahead__input-wrapper--with-clear-button .pl-c-typeahead__hint,.pl-c-typeahead__input-wrapper--with-clear-button .pl-c-typeahead__input{padding-right:1.4rem}}@media all and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-typeahead__hint,.pl-c-body--theme-sidebar .pl-c-typeahead__input{max-width:none}}.pl-c-body--theme-light .pl-c-typeahead__hint,.pl-c-body--theme-light .pl-c-typeahead__input{background-color:#eee;color:#4d4c4c!important;border-color:#ddd!important}.pl-c-typeahead__hint::-moz-input-placeholder,.pl-c-typeahead__hint::-webkit-input-placeholder,.pl-c-typeahead__input::-moz-input-placeholder,.pl-c-typeahead__input::-webkit-input-placeholder{color:#fff!important;-webkit-transition:all .1s ease;transition:all .1s ease}.pl-c-typeahead__hint:focus,.pl-c-typeahead__hint:hover,.pl-c-typeahead__input:focus,.pl-c-typeahead__input:hover{color:#fff;background-color:#1d1d1d!important}.pl-c-body--theme-light .pl-c-typeahead__hint:focus,.pl-c-body--theme-light .pl-c-typeahead__hint:hover,.pl-c-body--theme-light .pl-c-typeahead__input:focus,.pl-c-body--theme-light .pl-c-typeahead__input:hover{color:#222!important;background-color:#ddd!important;border-color:#ccc!important}.pl-c-typeahead__hint:focus::-moz-input-placeholder,.pl-c-typeahead__hint:focus::-webkit-input-placeholder,.pl-c-typeahead__hint:hover::-moz-input-placeholder,.pl-c-typeahead__hint:hover::-webkit-input-placeholder,.pl-c-typeahead__input:focus::-moz-input-placeholder,.pl-c-typeahead__input:focus::-webkit-input-placeholder,.pl-c-typeahead__input:hover::-moz-input-placeholder,.pl-c-typeahead__input:hover::-webkit-input-placeholder{color:#fff!important}.pl-c-body--theme-light .pl-c-typeahead__hint:focus::-moz-input-placeholder,.pl-c-body--theme-light .pl-c-typeahead__hint:focus::-webkit-input-placeholder,.pl-c-body--theme-light .pl-c-typeahead__hint:hover::-moz-input-placeholder,.pl-c-body--theme-light .pl-c-typeahead__hint:hover::-webkit-input-placeholder,.pl-c-body--theme-light .pl-c-typeahead__input:focus::-moz-input-placeholder,.pl-c-body--theme-light .pl-c-typeahead__input:focus::-webkit-input-placeholder,.pl-c-body--theme-light .pl-c-typeahead__input:hover::-moz-input-placeholder,.pl-c-body--theme-light .pl-c-typeahead__input:hover::-webkit-input-placeholder{color:#222!important}.pl-c-typeahead__menu{overflow:hidden;max-height:0;-webkit-transition:max-height .1s ease-out;transition:max-height .1s ease-out;background-color:#222;text-transform:capitalize;position:absolute;min-width:100%;width:100%;overflow:hidden;top:100%;right:0;max-height:0;display:block!important;-webkit-transition:max-height .3s ease,opacity .3s ease;transition:max-height .3s ease,opacity .3s ease;opacity:0}.pl-c-typeahead__menu.pl-is-active{max-height:calc(100vh - 2rem - 1rem);max-height:calc(var(--pl-viewport-height,calc(100vh - 2rem)) - 1rem);overflow:auto;-webkit-overflow-scrolling:touch}@media all and (min-width:42em){.pl-c-typeahead__menu{border-bottom-right-radius:6px;border-bottom-left-radius:6px}}.pl-c-body--theme-light .pl-c-typeahead__menu{background-color:#fafafa}.pl-c-typeahead__menu.pl-is-open{max-height:120rem;max-height:calc(var(--viewport-height) - 4rem);opacity:1}@media all and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-typeahead__menu{position:relative!important;border-radius:0}}@media all and (max-width:41em){.pl-c-typeahead__menu{position:relative!important}}.pl-c-typeahead__results{list-style:none;margin:0;padding:0;background-color:inherit;border-color:transparent;border-width:1px;border-style:solid;overflow:hidden;border-color:#151515}@media all and (min-width:42em){.pl-c-typeahead__results{border-bottom-right-radius:6px;border-bottom-left-radius:6px}}.pl-c-typeahead__results:empty{border-width:0;max-height:0}.pl-c-body--theme-light .pl-c-typeahead__results{border-color:#ccc}@media all and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-typeahead__results{border-radius:0}}.pl-c-typeahead__result{-webkit-transition:all .3s ease;transition:all .3s ease;background-color:inherit;padding:.8em;cursor:pointer;overflow:hidden}.pl-c-typeahead__result:last-child{border-bottom-right-radius:6px;border-bottom-left-radius:6px}.pl-c-body--theme-sidebar .pl-c-typeahead__result:last-child{border-radius:0}.pl-c-typeahead__result:hover{background-color:rgba(255,255,255,.15)}.pl-c-body--theme-light .pl-c-typeahead__result:hover{background-color:#eee}.pl-c-typeahead__result:active,.pl-c-typeahead__result:focus{background-color:rgba(255,255,255,.18)}.pl-c-body--theme-light .pl-c-typeahead__result:active,.pl-c-body--theme-light .pl-c-typeahead__result:focus{background-color:#ddd}.pl-c-typeahead__result.pl-has-cursor{color:#fff;background-color:rgba(255,255,255,.25)}.pl-c-body--theme-light .pl-c-typeahead__result.pl-has-cursor{color:#000;background-color:#ddd}.pl-c-typeahead__input-wrapper{position:relative}.pl-c-typeahead__clear-button{background-color:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background-color .1s ease-out,color .1s ease-out;transition:background-color .1s ease-out,color .1s ease-out;cursor:pointer;outline-offset:-3px;outline-width:2px;height:1.7rem;width:1.7rem;background-color:transparent;border-radius:20rem;overflow:hidden;position:absolute;right:0;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);z-index:100;cursor:pointer;border:0;-webkit-transition:opacity .1s ease;transition:opacity .1s ease;opacity:0;visibility:hidden}.pl-c-typeahead__clear-button:hover{color:#fff;background-color:#222}.pl-c-typeahead__clear-button.pl-is-active,.pl-c-typeahead__clear-button:active{color:#fff;background-color:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-typeahead__clear-button{background-color:#fff;color:#4d4c4c}.pl-c-body--theme-light .pl-c-typeahead__clear-button:hover{background-color:#eee}.pl-c-body--theme-light .pl-c-typeahead__clear-button:active,.pl-c-body--theme-light .pl-c-typeahead__clear-button:focus{background-color:#ddd}.pl-c-body--theme-density-cozy .pl-c-typeahead__clear-button{font-size:.85rem;padding:1.2rem .8rem}.pl-c-body--theme-density-comfortable .pl-c-typeahead__clear-button{font-size:.85rem;padding:1.5rem 1rem}.pl-c-typeahead__clear-button:active,.pl-c-typeahead__clear-button:hover{background-color:transparent}@media all and (min-width:42em){.pl-c-typeahead__clear-button{height:1.4rem;width:1.4rem}}.pl-c-body--theme-light .pl-c-typeahead__clear-button{background-color:transparent}.pl-c-body--theme-light .pl-c-typeahead__clear-button:active,.pl-c-body--theme-light .pl-c-typeahead__clear-button:hover{background-color:transparent}.pl-c-typeahead__clear-button.pl-is-visible{opacity:1;visibility:visible}.pl-c-typeahead__clear-button-icon{fill:currentColor;line-height:0;font-size:0;position:absolute;top:50%;left:50%;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0)}pl-toggle-info{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-item-align:center;align-self:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;z-index:10;width:100%;cursor:pointer}.pl-c-toggle-info,.pl-c-toggle-info__action{width:100%}pl-toggle-layout{display:none;-ms-flex-item-align:center;align-self:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;z-index:10;width:100%;cursor:pointer}@media all and (min-width:42em){pl-toggle-layout{display:-webkit-box;display:-ms-flexbox;display:flex}}.pl-c-toggle-layout,.pl-c-toggle-layout__action{width:100%}pl-toggle-theme{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-item-align:center;align-self:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;z-index:10;width:100%;cursor:pointer}.pl-c-toggle-theme,.pl-c-toggle-theme__action{width:100%}pl-tools-menu{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.pl-c-tools{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex}.pl-c-tools__toggle{background-color:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background-color .1s ease-out,color .1s ease-out;transition:background-color .1s ease-out,color .1s ease-out;cursor:pointer;outline-offset:-3px;outline-width:2px;margin:0;padding-top:.6rem;padding-bottom:.5rem;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative;min-width:30px}.pl-c-tools__toggle:hover{color:#fff;background-color:#222}.pl-c-tools__toggle.pl-is-active,.pl-c-tools__toggle:active{color:#fff;background-color:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-tools__toggle{background-color:#fff;color:#4d4c4c}.pl-c-body--theme-light .pl-c-tools__toggle:hover{background-color:#eee}.pl-c-body--theme-light .pl-c-tools__toggle:active,.pl-c-body--theme-light .pl-c-tools__toggle:focus{background-color:#ddd}.pl-c-body--theme-density-cozy .pl-c-tools__toggle{font-size:.85rem;padding:1.2rem .8rem}.pl-c-body--theme-density-comfortable .pl-c-tools__toggle{font-size:.85rem;padding:1.5rem 1rem}.pl-c-tools__toggle-icon{-webkit-transition:inherit;transition:inherit}.pl-c-tools__list{list-style:none;margin:0;padding:0;overflow:hidden;max-height:0;-webkit-transition:max-height .1s ease-out;transition:max-height .1s ease-out;position:absolute;top:100%;right:0;z-index:10;width:10rem;border-bottom-left-radius:6px;border-bottom-right-radius:6px}.pl-c-tools__list.pl-is-active{max-height:calc(100vh - 2rem - 1rem);max-height:calc(var(--pl-viewport-height,calc(100vh - 2rem)) - 1rem);overflow:auto;-webkit-overflow-scrolling:touch}.pl-c-tools__action{background-color:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background-color .1s ease-out,color .1s ease-out;transition:background-color .1s ease-out,color .1s ease-out;cursor:pointer;outline-offset:-3px;outline-width:2px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;margin:0}.pl-c-tools__action:hover{color:#fff;background-color:#222}.pl-c-tools__action.pl-is-active,.pl-c-tools__action:active{color:#fff;background-color:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-tools__action{background-color:#fff;color:#4d4c4c}.pl-c-body--theme-light .pl-c-tools__action:hover{background-color:#eee}.pl-c-body--theme-light .pl-c-tools__action:active,.pl-c-body--theme-light .pl-c-tools__action:focus{background-color:#ddd}.pl-c-body--theme-density-cozy .pl-c-tools__action{font-size:.85rem;padding:1.2rem .8rem}.pl-c-body--theme-density-comfortable .pl-c-tools__action{font-size:.85rem;padding:1.5rem 1rem}.pl-c-tools__action-icon{margin-left:auto}pl-iframe{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.pl-c-viewport{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%;position:relative;top:2rem;bottom:0;left:0;right:0;z-index:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-transition:height .3s ease;transition:height .3s ease}@supports ((position: -webkit-sticky) or (position: sticky)){.pl-c-viewport{top:0}}.pl-c-body--theme-sidebar .pl-c-viewport{top:0}.pl-c-viewport__cover{width:100%;height:100%;display:none;position:fixed;top:0;left:0;z-index:200;cursor:move;pointer-events:auto}.pl-c-viewport__iframe-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;max-width:100vw;width:100%;position:relative;margin:0 auto;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-overflow-scrolling:touch;width:100%}.pl-c-viewport__iframe-wrapper.hay-mode{-webkit-transition:all 40s linear;transition:all 40s linear}@media all and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-viewport__iframe-wrapper{max-width:calc(100vw - 14rem)}}.pl-c-viewport__iframe{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;width:100%;border:0;padding:0;margin:0;top:0;bottom:0;left:0;right:0;background-color:#fff;max-width:100vw}.pl-c-viewport__iframe.is-ready{min-height:0}@media all and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-viewport__iframe{max-width:calc(100vw - 14rem)}}.pl-c-viewport__iframe.hay-mode{-webkit-transition:all 40s linear;transition:all 40s linear}.pl-c-viewport__resizer{position:absolute;right:0;top:0;bottom:0;width:14px;margin:0;height:100%;cursor:ew-resize}.pl-c-viewport__resizer-handle{margin:0;width:100%;height:100%;background-color:#ccc;-webkit-transition:background-color .1s ease-out;transition:background-color .1s ease-out}.pl-c-viewport__resizer-handle:hover{background-color:grey}.pl-c-viewport__resizer-handle:active{cursor:move;background-color:#4d4c4c}.vp-animate{-webkit-transition:width .8s ease-out;transition:width .8s ease-out}.pl-c-viewport-modal-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;max-width:100vw;position:relative}@media all and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-viewport-modal-wrapper{max-width:calc(100vw - 14rem)}}@media all and (min-width:42em) and (-ms-high-contrast:none),all and (min-width:42em) and (-ms-high-contrast:active){.pl-c-body--theme-sidebar .pl-c-viewport-modal-wrapper{margin-left:14rem}}.pl-c-viewport-size{margin:0;border:0;padding:.3rem .5rem .4rem;line-height:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.pl-c-viewport-size__input{padding:.1rem;margin:0;border:0;border-radius:3px;background-color:transparent;font-size:inherit;color:grey;width:35px;text-align:right;-webkit-transition:all .1s ease-out;transition:all .1s ease-out}.pl-c-viewport-size__input::-moz-focus-inner{padding:0;border:0}.pl-c-viewport-size__input:hover{color:#fff;background-color:#222}.pl-c-viewport-size__input:active,.pl-c-viewport-size__input:focus{color:#fff;background-color:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-viewport-size__label{display:block;margin:0;padding:0}.pl-c-size-list{display:none;list-style:none;margin:0;padding:0;overflow-x:auto;padding:0 .25rem}@media all and (min-width:42em){.pl-c-size-list{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-overflow-scrolling:touch}}@media all and (min-width:53em){.pl-c-size-list{display:block;display:-webkit-box;display:-ms-flexbox;display:flex}}.pl-c-size-list__action{background-color:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background-color .1s ease-out,color .1s ease-out;transition:background-color .1s ease-out,color .1s ease-out;cursor:pointer;outline-offset:-3px;outline-width:2px}.pl-c-size-list__action:hover{color:#fff;background-color:#222}.pl-c-size-list__action.pl-is-active,.pl-c-size-list__action:active{color:#fff;background-color:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-size-list__action{background-color:#fff;color:#4d4c4c}.pl-c-body--theme-light .pl-c-size-list__action:hover{background-color:#eee}.pl-c-body--theme-light .pl-c-size-list__action:active,.pl-c-body--theme-light .pl-c-size-list__action:focus{background-color:#ddd}.pl-c-body--theme-density-cozy .pl-c-size-list__action{font-size:.85rem;padding:1.2rem .8rem}.pl-c-body--theme-density-comfortable .pl-c-size-list__action{font-size:.85rem;padding:1.5rem 1rem}.pl-c-size-list__item:first-child{margin-left:auto}.pl-c-size-list__item:last-child{margin-right:auto}.pl-has-annotation{cursor:help!important;outline:1px dotted grey;outline-offset:-4px;-webkit-transition:-webkit-box-shadow .1s ease;transition:-webkit-box-shadow .1s ease;transition:box-shadow .1s ease;transition:box-shadow .1s ease, -webkit-box-shadow .1s ease}.pl-has-annotation a,.pl-has-annotation input{cursor:help!important}.pl-has-annotation:hover{-webkit-box-shadow:0 0 3px grey;box-shadow:0 0 3px grey}.pl-has-annotation.active{-webkit-box-shadow:inset 0 0 6px #4d4c4c;box-shadow:inset 0 0 6px #4d4c4c;outline:1px dotted grey;outline-offset:-1px}.pl-c-annotation-tip{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:24px!important;height:24px!important;margin-top:6px!important;margin-left:6px!important;border-radius:50%!important;background-color:#222!important;color:#fff!important;font-size:16px!important;position:absolute;z-index:100}.pl-c-annotations{margin:1rem 0}.pl-c-annotations__title{font-size:1.2rem!important;margin:0 0 .5rem}.pl-c-annotations .pl-c-annotations__list{counter-reset:the-count;padding:0;margin:0;list-style:none}.pl-c-annotations__item{position:relative;padding-left:1.5rem;margin-bottom:1rem;border-radius:6px;-webkit-transition:background-color .1s ease;transition:background-color .1s ease}.pl-c-annotations__item:before{content:counter(the-count);counter-increment:the-count;font-size:85%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:14px;height:14px;border-radius:50%;padding:2px;text-align:center;background-color:grey;color:#fff;position:absolute;top:4px;left:0}.pl-c-annotations__item.pl-is-active{outline:1px dotted grey;outline-offset:-1px}.pl-c-annotations .pl-c-annotations__item-title{margin-bottom:0}.pl-c-breadcrumb{list-style:none;margin:0;padding:0;margin-bottom:.5rem;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:.7rem;color:grey;text-transform:capitalize}.pl-c-breadcrumb__item:after{content:'\25B6';opacity:.4;font-size:6px;display:inline-block;margin:0 .2rem;position:relative;top:-1px}.pl-c-logo{max-width:2rem;margin:0 1rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.pl-c-logo:focus{outline:1px dotted grey;outline-offset:-1px}.pl-c-logo__img{display:block;max-width:100%;height:auto}.pl-c-category{margin-top:6rem;font:HelveticaNeue,Helvetica,Arial,sans-serif!important}.pl-c-category:first-of-type{margin-top:2rem}.pl-c-category__title{font-size:1.4rem!important;color:#222!important;margin:0 0 .2rem;text-transform:capitalize}.pl-c-category__title-link{-webkit-transition:color .1s ease-out;transition:color .1s ease-out}.pl-c-category__description{font-size:.85rem;line-height:1.5;max-width:30rem}.pl-c-category__description:empty{display:none}.pl-c-pattern-info{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-flow:row wrap;flex-flow:row wrap;width:100%;overflow:auto;-webkit-overflow-scrolling:touch}.pl-c-pattern .pl-c-pattern-info{overflow:scroll;-ms-overflow-style:-ms-autohiding-scrollbar;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-overflow-scrolling:touch}.pl-c-pattern .pl-c-pattern-info::-webkit-scrollbar{width:0!important}@media all and (min-width:53em){.pl-c-pattern .pl-c-pattern-info{max-height:none;overflow:visible}}.pl-c-pattern-info__panel{-ms-flex-preferred-size:40%;flex-basis:40%;padding-top:1rem;padding-right:1rem;padding-bottom:0;padding-left:1rem;margin-bottom:1rem;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-width:100%;max-height:30rem;min-width:300px;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow:auto;-webkit-overflow-scrolling:touch}.pl-c-pattern-info__header{margin-bottom:.5rem}.pl-c-pattern-info__title{font-size:1.4rem!important;font-weight:400;margin-top:0;margin-bottom:0;color:inherit;text-transform:capitalize;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.pl-c-pattern-info__description{border-bottom-color:grey}.pl-c-annotations{border-top-color:grey}.pl-c-lineage{font-size:.85rem;line-height:1.7;margin-top:0}.pl-c-lineage__link{font-style:italic;color:grey;text-decoration:underline;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transition:opacity .1s ease;transition:opacity .1s ease}.pl-c-lineage__link:focus,.pl-c-lineage__link:hover{opacity:.8}.pl-c-pattern-state{display:inline-block;width:5px;height:5px;margin-left:10px;position:relative;top:5px;left:0;border-radius:50%;background-color:#02a4d5;line-height:4px;text-indent:10px}.pl-c-pattern-state--complete{background-color:#03790f}.pl-c-pattern-state--inreview{background-color:#c7a118}.pl-c-pattern-state--deprecated{background-color:#b00b02}.complete:before{color:#03790f!important}.pl-c-pattern{margin-bottom:2rem;position:relative;clear:both}.pl-c-pattern__header{position:relative;padding:.5rem 0 0;line-height:1.3;font-size:90%;color:grey}.pl-c-pattern__header:empty{padding:0}.pl-c-pattern__title{font-family:HelveticaNeue,Helvetica,Arial,sans-serif!important;font-size:.85rem!important;line-height:1!important;font-weight:400!important;margin:0!important;padding:0!important;text-transform:capitalize!important}.pl-c-pattern__title-link{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;padding:1rem 0 .3rem;color:grey!important;text-decoration:none;cursor:pointer}.pl-c-pattern__title-link:focus,.pl-c-pattern__title-link:hover{color:#000!important}.pl-c-pattern__extra-toggle{font-size:9px;position:absolute;bottom:-1px;right:0;z-index:1;padding:.65em .65em .5em;line-height:1;color:grey;background-color:transparent;font-weight:400;border:1px solid #ddd;border-top-left-radius:6px;border-top-right-radius:6px;-webkit-transition:background-color .1s ease-out;transition:background-color .1s ease-out}.pl-c-pattern__extra-toggle .pl-c-pattern__toggle-icon{display:inline-block}.pl-c-pattern__extra-toggle.pl-is-active,.pl-c-pattern__extra-toggle:focus,.pl-c-pattern__extra-toggle:hover{background-color:#fafafa;color:#000}.pl-c-pattern__extra-toggle:focus{outline:1px dotted #4d4c4c}.pl-c-pattern__extra-toggle.pl-is-active{border-bottom-color:#fafafa}.pl-c-pattern__extra-toggle.pl-is-active .pl-c-pattern__toggle-icon{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.pl-c-pattern__extra{background-color:#fafafa;border-top:1px solid #ddd;margin-bottom:1rem;overflow:hidden;max-height:1px;position:relative;-webkit-transition:all .1s ease-out;transition:all .1s ease-out}.pl-c-pattern__extra.pl-is-active{border:1px solid #ddd;border-radius:6px;border-top-right-radius:0;max-height:150rem}.pl-c-tabs{padding:0 .5rem .5rem;background-color:#fff;border:1px solid #ddd;border-radius:6px;font-family:HelveticaNeue,Helvetica,Arial,sans-serif;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow:hidden;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.pl-c-tabs__list{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;list-style:none;margin:0;padding:.5rem 0;padding-bottom:0;background-color:#fff;border-bottom:1px solid rgba(0,0,0,.1)}.pl-c-tabs__link{display:block;line-height:1;border-bottom:4px solid transparent;color:grey;background-color:#fff;cursor:pointer;text-decoration:none;text-transform:uppercase;-webkit-transition:all .1s ease-out;transition:all .1s ease-out;padding:8px;font-size:13px}.pl-c-tabs__link:hover{color:#222}.pl-c-tabs__link.pl-is-active-tab{color:#222;border-bottom-color:#bf6500}.pl-c-tabs__content{overflow:auto;-webkit-overflow-scrolling:touch;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.pl-c-tabs__panel{display:none}.pl-c-tabs__panel.pl-is-active-tab{display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.pl-c-tabs__panel :not(pre)>code[class*=language-],.pl-c-tabs__panel pre[class*=language-]{background-color:transparent;margin:0;padding-top:1rem;padding-right:.5rem;padding-bottom:.5rem;padding-left:.5rem;border:0;display:block;width:100%}.pl-c-tabs__panel code[class*=language-]{background-color:transparent;margin:0}.pl-c-text-passage{font-size:.85rem;line-height:1.7}.pl-c-text-passage p{margin-top:0;margin-bottom:1rem}.pl-c-text-passage a{color:grey;text-decoration:underline;-webkit-transition:opacity .1s ease;transition:opacity .1s ease}.pl-c-text-passage a:focus,.pl-c-text-passage a:hover{opacity:.8}.pl-c-text-passage code[class*=language-],.pl-c-text-passage pre[class*=language-]{color:inherit}.pl-c-text-passage blockquote{padding-left:.8rem;border-left:3px solid inherit}.pl-c-text-passage hr{height:1px;background-color:grey;margin:2rem 0;border:0}.pl-c-text-passage h1{margin-bottom:1rem;font-weight:400}.pl-c-text-passage h2{margin:1rem 0 1rem;font-weight:400}.pl-c-text-passage h3{margin:1rem 0 1rem;font-weight:400}.pl-c-text-passage h4{margin:1rem 0 1rem;font-weight:400}.pl-c-text-passage h5{margin:1rem 0 1rem;font-weight:400}.pl-c-text-passage h6{margin:1rem 0 1rem;font-weight:400}.pl-c-text-passage ul{list-style:square;margin-left:.9rem;margin-bottom:1rem}.pl-c-text-passage ul li:last-child{margin-bottom:0}.pl-c-text-passage ol{list-style:decimal;margin-left:.9rem;margin-bottom:1rem}.pl-c-text-passage ol li:last-child{margin-bottom:0}.pl-c-text-passage li{margin-bottom:.5rem}@media all and (max-width:41em){.pl-c-body--theme-light .pl-c-tools__list.pl-is-active{border-bottom:1px solid #ccc;border-left:1px solid #ccc}}.pl-c-body--theme-light:not(.pl-c-body--theme-sidebar) .pl-c-tools__list.pl-is-active{border-bottom:1px solid #ccc;border-left:1px solid #ccc}.pl-c-body--theme-light .pl-c-nav__link--dropdown{color:#4d4c4c;background-color:#fff}.pl-c-body--theme-light .pl-c-nav__link--dropdown:after{color:#ccc}@media all and (min-width:42em){.pl-c-body--theme-light .pl-c-nav__sublist>.pl-c-nav__item:last-child .pl-c-nav__link{border-bottom-left-radius:6px;border-bottom-right-radius:6px}}.pl-c-body--theme-light .pl-c-viewport-size__input{color:#4d4c4c}.pl-c-body--theme-light .pl-c-viewport-size__input:focus,.pl-c-body--theme-light .pl-c-viewport-size__input:hover{background-color:#ddd}.pl-c-body--theme-light .typeahead{background-color:#ddd!important}.pl-c-body--theme-light .tt-input{background-color:#eee!important;color:#4d4c4c!important}.pl-c-body--theme-light .tt-input:hover{color:#222;background-color:#ddd!important}.pl-c-body--theme-light .tt-input:hover::-webkit-input-placeholder{color:#222}.pl-c-body--theme-light .tt-input:hover::-moz-input-placeholder{color:#222}.pl-c-body--theme-light .pl-c-drawer__close-btn,.pl-c-body--theme-light .pl-c-tools__action{background-color:#fff}.pl-c-body--theme-light .pl-c-drawer__close-btn:focus,.pl-c-body--theme-light .pl-c-drawer__close-btn:hover,.pl-c-body--theme-light .pl-c-tools__action:focus,.pl-c-body--theme-light .pl-c-tools__action:hover{background-color:#eee;color:#4d4c4c}.pl-c-body--theme-density-cozy .pl-c-header{font-size:.85rem}.pl-c-body--theme-density-cozy .pl-c-viewport-size__input{width:44px}.pl-c-body--theme-density-cozy .pl-c-typeahead{padding:.9rem .8rem}@media all and (max-width:78em){.pl-c-body--theme-density-cozy .pl-c-size-list{display:none}}@media all and (max-width:78em){.pl-c-body--theme-density-cozy .pl-c-viewport-size{display:none}}.pl-c-body--theme-density-cozy .pl-c-tools__toggle{min-width:44px}.pl-c-body--theme-density-cozy .pl-c-viewport{top:3.28rem}.pl-c-body--theme-density-comfortable .pl-c-header{font-size:.85rem}.pl-c-body--theme-density-comfortable .pl-c-logo{max-width:4rem}.pl-c-body--theme-density-comfortable .pl-c-header .tt-suggestion{padding:1.5rem 1rem}.pl-c-body--theme-density-comfortable .pl-c-viewport-size__input{width:44px}.pl-c-body--theme-density-comfortable .pl-c-typeahead{padding:.9rem 1rem}@media all and (max-width:78em){.pl-c-body--theme-density-comfortable .pl-c-size-list{display:none}}@media all and (max-width:78em){.pl-c-body--theme-density-comfortable .pl-c-viewport-size{display:none}}.pl-c-body--theme-density-comfortable .pl-c-tools__toggle{min-width:44px}.pl-c-body--theme-density-comfortable .pl-c-viewport{top:3.8rem}@media all and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-logo{max-width:7rem;margin:0 auto 1rem}.pl-c-body--theme-sidebar .pl-c-nav{display:block;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.pl-c-body--theme-sidebar .pl-c-nav__list{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.pl-c-body--theme-sidebar .pl-c-nav__sublist{position:relative;border-radius:0}.pl-c-body--theme-sidebar .pl-c-nav__sublist .pl-c-nav__link{padding-left:1rem}.pl-c-body--theme-sidebar .pl-c-nav__sublist--dropdown.pl-is-active{border:0;border-left:1px solid #4d4c4c}.pl-c-body--theme-sidebar.pl-c-body--theme-light .pl-c-nav__sublist--dropdown.pl-is-active{border-left-color:#eee}.pl-c-body--theme-sidebar .pl-c-nav__subsublist{border-left:1px solid #4d4c4c;margin-left:1rem}.pl-c-body--theme-sidebar.pl-c-body--theme-light .pl-c-nav__subsublist{border-left-color:#eee}.pl-c-body--theme-sidebar .pl-c-nav__sublist .pl-c-nav__link{border-left:0;border-right:0}}@media all and (min-width:42em) and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-nav__sublist>.pl-c-nav__item:last-child .pl-c-nav__link{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:0}}@media all and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-controls{display:block;justify-self:flex-end;margin-left:0}.pl-c-body--theme-sidebar .pl-c-viewport-size{display:none}.pl-c-body--theme-sidebar .pl-c-tools__toggle{display:none}.pl-c-body--theme-sidebar .pl-c-tools__list{max-height:none;overflow:visible;position:relative;border-radius:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%}.pl-c-body--theme-sidebar .pl-c-drawer{right:0;width:auto}}.is-vishidden{position:absolute!important;overflow:hidden;width:1px;height:1px;padding:0;border:0;clip:rect(1px,1px,1px,1px)} +.pl-c-body *{-webkit-box-sizing:border-box;box-sizing:border-box}button{font-size:inherit;background-color:transparent}.pl-c-html{min-height:100%}.pl-c-body{margin:0;padding:0;-webkit-text-size-adjust:100%;display:-webkit-box;display:-ms-flexbox;display:flex}.pl-c-body--theme-dark,:root{--theme-bg:#161b3c;--theme-primary:#464a6d;--theme-secondary:#161f50;--theme-text:white;--theme-text-rgb:255,255,255;--theme-border:rgba(255, 255, 255, 0.2)}.pl-c-body--theme-light{--theme-bg:white;--theme-secondary:white;--theme-text:#262829;--theme-text-rgb:38,40,41;--theme-primary:white;--theme-border:#ddd}.pl-c-tabs__panel pre[class*=language-]{background-image:-webkit-gradient(linear,left top, right top,from(#fff),to(rgba(255,255,255,0))),-webkit-gradient(linear,right top, left top,from(#fff),to(rgba(255,255,255,0))),-webkit-gradient(linear,left top, right top,from(#eaf0f6),to(rgba(238,238,238,0))),-webkit-gradient(linear,right top, left top,from(#eaf0f6),to(rgba(238,238,238,0))),-webkit-gradient(linear,left top, left bottom,from(#fff),to(rgba(255,255,255,0))),-webkit-gradient(linear,left bottom, left top,from(#fff),to(rgba(255,255,255,0))),-webkit-gradient(linear,left top, left bottom,from(#eaf0f6),to(rgba(238,238,238,0))),-webkit-gradient(linear,left bottom, left top,from(#eaf0f6),to(rgba(238,238,238,0)));background-image:-webkit-linear-gradient(left,#fff,rgba(255,255,255,0)),-webkit-linear-gradient(right,#fff,rgba(255,255,255,0)),-webkit-linear-gradient(left,#eaf0f6,rgba(238,238,238,0)),-webkit-linear-gradient(right,#eaf0f6,rgba(238,238,238,0)),-webkit-linear-gradient(top,#fff,rgba(255,255,255,0)),-webkit-linear-gradient(bottom,#fff,rgba(255,255,255,0)),-webkit-linear-gradient(top,#eaf0f6,rgba(238,238,238,0)),-webkit-linear-gradient(bottom,#eaf0f6,rgba(238,238,238,0));background-image:linear-gradient(to right,#fff,rgba(255,255,255,0)),linear-gradient(to left,#fff,rgba(255,255,255,0)),linear-gradient(to right,#eaf0f6,rgba(238,238,238,0)),linear-gradient(to left,#eaf0f6,rgba(238,238,238,0)),linear-gradient(to bottom,#fff,rgba(255,255,255,0)),linear-gradient(to top,#fff,rgba(255,255,255,0)),linear-gradient(to bottom,#eaf0f6,rgba(238,238,238,0)),linear-gradient(to top,#eaf0f6,rgba(238,238,238,0));background-color:#fff;background-attachment:local,local,scroll,scroll,local,local,scroll,scroll;background-position:0 0,100% 0,0 0,100% 0,0 0,0 100%,0 0,0 100%;background-size:4em 100%,4em 100%,1em 100%,1em 100%,100% 4em,100% 4em,100% 1em,100% 1em;background-repeat:no-repeat;-ms-overflow-style:-ms-autohiding-scrollbar;-webkit-overflow-scrolling:touch;overflow:auto;max-height:100%}.pl-c-tabs__panel code[class*=language-],.pl-c-tabs__panel pre[class*=language-]{color:#000;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono',monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;word-wrap:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none}.pl-c-tabs__panel code[class*=language-] ::-moz-selection,.pl-c-tabs__panel code[class*=language-]::-moz-selection,.pl-c-tabs__panel pre[class*=language-] ::-moz-selection,.pl-c-tabs__panel pre[class*=language-]::-moz-selection{text-shadow:none;background-color:#b3d4fc}.pl-c-tabs__panel code[class*=language-] ::selection,.pl-c-tabs__panel code[class*=language-]::selection,.pl-c-tabs__panel pre[class*=language-] ::selection,.pl-c-tabs__panel pre[class*=language-]::selection{text-shadow:none;background-color:#b3d4fc}@media print{.pl-c-tabs__panel code[class*=language-],.pl-c-tabs__panel pre[class*=language-]{text-shadow:none}}.pl-c-tabs__panel pre[class*=language-]{padding:1em;margin:.5em 0;overflow:scroll}.pl-c-tabs__panel :not(pre)>code[class*=language-],.pl-c-tabs__panel pre[class*=language-]{background-color:#f5f2f0}.pl-c-tabs__panel :not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em}.pl-c-tabs__panel .token.cdata,.pl-c-tabs__panel .token.comment,.pl-c-tabs__panel .token.doctype,.pl-c-tabs__panel .token.prolog{color:#708090}.pl-c-tabs__panel .token.punctuation{color:#999}.pl-c-tabs__panel .namespace{opacity:.7}.pl-c-tabs__panel .token.boolean,.pl-c-tabs__panel .token.constant,.pl-c-tabs__panel .token.deleted,.pl-c-tabs__panel .token.number,.pl-c-tabs__panel .token.property,.pl-c-tabs__panel .token.symbol,.pl-c-tabs__panel .token.tag{color:#905}.pl-c-tabs__panel .token.attr-name,.pl-c-tabs__panel .token.builtin,.pl-c-tabs__panel .token.char,.pl-c-tabs__panel .token.inserted,.pl-c-tabs__panel .token.selector,.pl-c-tabs__panel .token.string{color:#690}.pl-c-tabs__panel .language-css .token.string,.pl-c-tabs__panel .style .token.string,.pl-c-tabs__panel .token.entity,.pl-c-tabs__panel .token.operator,.pl-c-tabs__panel .token.url{color:#a67f59;background-color:rgba(255,255,255,.5)}.pl-c-tabs__panel .token.atrule,.pl-c-tabs__panel .token.attr-value,.pl-c-tabs__panel .token.keyword{color:#07a}.pl-c-tabs__panel .token.function{color:#dd4a68}.pl-c-tabs__panel .token.important,.pl-c-tabs__panel .token.regex,.pl-c-tabs__panel .token.variable{color:#e90}.pl-c-tabs__panel .token.bold,.pl-c-tabs__panel .token.important{font-weight:700}.pl-c-tabs__panel .token.italic{font-style:italic}.pl-c-tabs__panel .token.entity{cursor:help}.pl-c-tabs__panel pre.line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}.pl-c-tabs__panel pre.line-numbers>code{position:relative}.pl-c-tabs__panel .line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.pl-c-tabs__panel .line-numbers-rows>span{pointer-events:none;display:block;counter-increment:linenumber}.pl-c-tabs__panel .line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right}.pl-c-tabs__panel .token a{color:inherit}pl-controls{margin-left:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-item-align:center;align-self:center;padding:0 .5rem}.pl-c-body--theme-sidebar pl-controls{display:block}@media all and (min-width:42em){.pl-c-body--theme-sidebar pl-controls{width:100%;position:relative;padding-top:.5rem;padding-bottom:.5rem;-webkit-box-shadow:0 -2px 5px rgba(0,0,0,.1);box-shadow:0 -2px 5px rgba(0,0,0,.1)}.pl-c-body--theme-sidebar pl-controls:before{position:absolute;left:0;right:0;top:0;border-top:1px solid;border-top-color:#ccc;border-top-color:var(--theme-border,#ccc);height:1px;content:'';width:auto}}.pl-c-controls{margin-left:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap}@media all and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-controls{display:block}}.pl-c-controls__list{list-style:none;margin:0;padding:0;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap}pl-drawer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative;position:-webkit-sticky;position:sticky;top:auto;bottom:0;left:0;right:0;z-index:20;overflow:visible;border-top:1.1px solid #ccc;border-top-color:#ccc;border-top-color:var(--theme-border,#ccc)}.pl-c-drawer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;font-family:"Open Sans",HelveticaNeue,Helvetica,Arial,sans-serif;background-color:#222;background-color:var(--theme-secondary,#222);color:#ccc;width:100%;height:100%;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);pointer-events:none;overflow:hidden;max-width:100vw}@media all and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-drawer{max-width:calc(100vw - 16rem)}}.pl-c-body--theme-light .pl-c-drawer{background-color:#fff;color:#4d4c4c}.pl-c-drawer.pl-is-active{pointer-events:auto}.pl-c-drawer__wrapper{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.pl-c-drawer__wrapper>*{height:100%}.pl-c-drawer__content{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;overflow:hidden}.pl-c-drawer__toolbar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-negative:0;flex-shrink:0}.pl-c-drawer__content-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;overflow:hidden}@supports (padding:env(safe-area-inset-top)){.pl-c-drawer__content-wrapper{padding-right:calc(env(safe-area-inset-right) - .9rem)}}.pl-c-drawer__toolbar-controls{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-item-align:end;align-self:flex-end;position:relative;z-index:10;-ms-flex-negative:0;flex-shrink:0}.pl-c-drawer__close-btn{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:inherit;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background-color .1s ease-out,color .1s ease-out;transition:background-color .1s ease-out,color .1s ease-out;cursor:pointer;outline:0;margin:0;padding:.2rem;-webkit-appearance:none;-ms-flex-negative:0;flex-shrink:0;z-index:2;opacity:.85;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.pl-c-drawer__close-btn.pl-is-active:hover,.pl-c-drawer__close-btn:hover{background-color:rgba(0,0,0,.1)}.pl-c-body--theme-density-cozy .pl-c-drawer__close-btn{font-size:.85rem;padding:1.2rem .8rem}.pl-c-body--theme-density-comfortable .pl-c-drawer__close-btn{font-size:.85rem;padding:1.5rem 1rem}@media all and (max-width:41em){.pl-c-drawer__close-btn{border-radius:20rem;padding-top:.5rem;padding-bottom:.5rem}}.pl-c-drawer__close-btn:focus,.pl-c-drawer__close-btn:hover{opacity:1}.pl-c-drawer__close-btn:active,.pl-c-drawer__close-btn:focus{opacity:1}.pl-c-drawer__cover{width:100%;height:100%;top:0;left:0;display:none;position:fixed;z-index:20;cursor:move}.pl-c-drawer__resizer{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;top:0;left:0;right:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;height:14px;width:100%;background-color:inherit;z-index:2;cursor:ns-resize}.pl-c-drawer__resizer:after{content:'';height:3px;width:50px;border-top:1px solid currentColor;border-bottom:1px solid currentColor;-webkit-transition:opacity .3s ease-out;transition:opacity .3s ease-out;opacity:.5;background-color:currentColor;border-radius:3px;display:block}.pl-c-drawer__resizer:hover:after{opacity:.8}.pl-c-drawer__resizer:active:after,.pl-c-drawer__resizer:focus:after{opacity:.95}.pl-c-drawer__close-btn-icon{width:20px;height:20px;color:currentColor;fill:currentColor;-webkit-transition:fill .1s ease-out;transition:fill .1s ease-out;-ms-flex-negative:0;flex-shrink:0;-ms-flex-item-align:center;align-self:center}.pl-c-code-copy-btn{display:inline-block;position:absolute;top:.5rem;right:.5rem;padding:.2rem .4rem;background-color:#eee;color:#222;border:1px solid #ddd;border-radius:6px;font-family:"Open Sans",HelveticaNeue,Helvetica,Arial,sans-serif;font-size:1rem;text-transform:lowercase;line-height:1;cursor:pointer;z-index:2;-webkit-transition:background-color .1s ease-out;transition:background-color .1s ease-out}.pl-c-code-copy-btn:focus,.pl-c-code-copy-btn:hover{background-color:#ccc}pl-header{position:relative;position:-webkit-sticky;position:sticky;top:0;left:0;z-index:100;display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;background-color:#000;background-color:var(--theme-secondary,#000);max-height:100vh;color:#ccc;color:var(--theme-text,#ccc);border-right:1px solid;border-bottom:1px solid;border-right-color:#ccc;border-right-color:var(--theme-border,#ccc);border-bottom-color:#ccc;border-bottom-color:var(--theme-border,#ccc);-webkit-box-shadow:0 8px 15px 1px rgba(6,10,36,.1),0 18px 24px 1px rgba(6,10,36,.12);box-shadow:0 8px 15px 1px rgba(6,10,36,.1),0 18px 24px 1px rgba(6,10,36,.12)}.pl-c-body--theme-light pl-header{color:#000;background-color:#fff;border-bottom:1px solid #ccc}@media all and (min-width:42em){.pl-c-body--theme-sidebar pl-header{position:fixed;position:-webkit-sticky;position:sticky;width:16rem;border-bottom:0}}.pl-c-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;width:100%;font-family:"Open Sans",HelveticaNeue,Helvetica,Arial,sans-serif;font-size:.9rem;min-height:30px;background-color:inherit}@supports (padding:0px){.pl-c-header{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}}@media all and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-header{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}}.pl-c-header__nav-toggle{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:inherit;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background-color .1s ease-out,color .1s ease-out;transition:background-color .1s ease-out,color .1s ease-out;cursor:pointer;outline:0;border:0}.pl-c-header__nav-toggle.pl-is-active:hover,.pl-c-header__nav-toggle:hover{background-color:rgba(0,0,0,.1)}.pl-c-body--theme-density-cozy .pl-c-header__nav-toggle{font-size:.85rem;padding:1.2rem .8rem}.pl-c-body--theme-density-comfortable .pl-c-header__nav-toggle{font-size:.85rem;padding:1.5rem 1rem}@media all and (min-width:42em){.pl-c-header__nav-toggle{display:none}}pl-layout{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%;min-height:100vh;max-width:100vw;background-color:#fff;overflow:initial}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){pl-layout{overflow:hidden}}pl-layout .pl-c-layout{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}@media all and (min-width:42em){pl-layout.pl-c-body--theme-sidebar{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}}pl-layout.pl-c-body--theme-light{background-color:#fff}pl-logo{max-width:12rem;-ms-flex-item-align:center;align-self:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-negative:0;flex-shrink:0;position:relative;z-index:100}@media all and (min-width:42em){.pl-c-body--theme-sidebar pl-logo{max-width:none;width:7rem;padding:.5rem}}.pl-c-logo{width:auto;padding:.5rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;color:inherit;text-decoration:none;outline:0;text-transform:lowercase;font-size:1.4rem;font-weight:700;line-height:1;margin:0;-webkit-transition:color .2s ease;transition:color .2s ease}.pl-c-logo:focus{outline:1px dotted grey;outline-offset:-1px}.pl-c-logo__img{display:block;height:auto;max-height:2.5rem}.pl-c-logo__img:not(:last-child){margin-right:.25rem}.pl-c-logo__text{display:-webkit-box;display:-ms-flexbox;display:flex;white-space:nowrap}pl-nav{background-color:inherit;display:block;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center}@media all and (min-width:42em){pl-nav{padding:0;display:-webkit-box;display:-ms-flexbox;display:flex}}@media all and (min-width:42em){.pl-c-body--theme-sidebar pl-nav{display:block;max-height:100%;overflow-y:scroll}}.pl-c-nav{overflow:hidden;max-height:0;-webkit-transition:max-height .1s ease-out;transition:max-height .1s ease-out;background-color:inherit;position:absolute;left:0;top:100%;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;transition:max-height .1s ease-out;-ms-flex-negative:0;flex-shrink:0}.pl-c-nav.pl-is-active{max-height:calc(100vh - 2rem - 1rem);max-height:calc(var(--pl-viewport-height,calc(100vh - 2rem)) - 1rem);overflow:auto;-webkit-overflow-scrolling:touch}@media all and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-nav{padding-bottom:.5rem;display:block;display:-webkit-box;display:-ms-flexbox;display:flex;overflow:hidden;-ms-flex-negative:1;flex-shrink:1}}@media all and (min-width:42em){.pl-c-nav{overflow:visible;max-height:none}.pl-c-nav.pl-is-active{overflow:visible}}@media all and (max-width:41em){.pl-c-nav.pl-is-active{-webkit-box-shadow:0 1px 1px #000;box-shadow:0 1px 1px #000}.pl-c-body--theme-light .pl-c-nav.pl-is-active{-webkit-box-shadow:0 1px 1px #a6a6a6;box-shadow:0 1px 1px #a6a6a6}}@media all and (min-width:42em){.pl-c-nav.pl-is-active{max-height:none}}@media all and (min-width:42em){.pl-c-nav{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;position:relative;top:auto;width:auto;-webkit-box-shadow:none;box-shadow:none}}.pl-c-nav__list{z-index:1;margin:0;padding:0;list-style:none;-ms-flex-negative:0;flex-shrink:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-width:100%;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;background-color:inherit}@media all and (min-width:42em){.pl-c-nav__list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.pl-c-body--theme-sidebar .pl-c-nav__list{display:block}}.pl-c-nav__item{background-color:inherit;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.pl-c-body--theme-sidebar .pl-c-nav__item{display:block}.pl-c-nav__item-inner{position:relative}.pl-c-nav__link{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:inherit;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background-color .1s ease-out,color .1s ease-out;transition:background-color .1s ease-out,color .1s ease-out;cursor:pointer;outline:0;color:inherit;line-height:1.5;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:0;color:inherit;padding:.7rem .5rem}.pl-c-nav__link.pl-is-active:hover,.pl-c-nav__link:hover{background-color:rgba(0,0,0,.1)}.pl-c-body--theme-density-cozy .pl-c-nav__link{font-size:.85rem;padding:1.2rem .8rem}.pl-c-body--theme-density-comfortable .pl-c-nav__link{font-size:.85rem;padding:1.5rem 1rem}.pl-c-body--theme-sidebar .pl-c-nav__link{width:100%}.pl-c-nav__link,.pl-c-nav__link--overview,.pl-c-nav__link--section-dropdown,.pl-c-nav__link--sublink{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:inherit;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background-color .1s ease-out,color .1s ease-out;transition:background-color .1s ease-out,color .1s ease-out;cursor:pointer;outline:0;position:relative;color:inherit}.pl-c-nav__link--overview.pl-is-active:hover,.pl-c-nav__link--overview:hover,.pl-c-nav__link--section-dropdown.pl-is-active:hover,.pl-c-nav__link--section-dropdown:hover,.pl-c-nav__link--sublink.pl-is-active:hover,.pl-c-nav__link--sublink:hover,.pl-c-nav__link.pl-is-active:hover,.pl-c-nav__link:hover{background-color:rgba(0,0,0,.1)}.pl-c-body--theme-density-cozy .pl-c-nav__link,.pl-c-body--theme-density-cozy .pl-c-nav__link--overview,.pl-c-body--theme-density-cozy .pl-c-nav__link--section-dropdown,.pl-c-body--theme-density-cozy .pl-c-nav__link--sublink{font-size:.85rem;padding:1.2rem .8rem}.pl-c-body--theme-density-comfortable .pl-c-nav__link,.pl-c-body--theme-density-comfortable .pl-c-nav__link--overview,.pl-c-body--theme-density-comfortable .pl-c-nav__link--section-dropdown,.pl-c-body--theme-density-comfortable .pl-c-nav__link--sublink{font-size:.85rem;padding:1.5rem 1rem}.pl-c-nav__link--overview:after,.pl-c-nav__link--section-dropdown:after,.pl-c-nav__link--sublink:after,.pl-c-nav__link:after{content:'';pointer-events:none;opacity:0;background-color:currentColor;-webkit-transition:opacity .1s ease-out;transition:opacity .1s ease-out;position:absolute;top:0;left:0;bottom:0;right:0;display:block}.pl-c-nav__link--overview:hover:after,.pl-c-nav__link--section-dropdown:hover:after,.pl-c-nav__link--sublink:hover:after,.pl-c-nav__link:hover:after{opacity:.1}.pl-c-nav__link--overview:focus:after,.pl-c-nav__link--section-dropdown:focus:after,.pl-c-nav__link--sublink:focus:after,.pl-c-nav__link:focus:after{opacity:.1}.pl-c-nav__link--sublink{text-transform:none;font-size:.78rem;line-height:1;padding-left:1.5rem;padding-right:1.5rem}.pl-c-nav__link--sublink.pl-is-active{-webkit-box-shadow:inset 4px 0 0 #6c79d9;box-shadow:inset 4px 0 0 #6c79d9;font-weight:700;pointer-events:none}.pl-c-nav__link--dropdown{-webkit-appearance:none;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.pl-c-nav__link--pattern{padding-left:.75rem;padding-right:.75rem;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.pl-c-nav__link-text{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;pointer-events:none}.pl-c-nav__link-icon{margin-top:-.5rem;margin-bottom:-.5rem;pointer-events:none;color:currentColor;display:inline;-webkit-transition:all .1s ease-out;transition:all .1s ease-out;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;line-height:0}.pl-c-nav__link--overview-wrapper.pl-is-active>.pl-c-nav__link--section-dropdown>.pl-c-nav__link-icon,.pl-is-active>.pl-c-nav__link-icon{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}.pl-c-nav__sublist{background-color:inherit;list-style:none;margin:0;padding:0}@media all and (min-width:42em){.pl-c-nav__sublist{position:absolute;top:100%;left:0;min-width:12rem;border-bottom-left-radius:6px;border-bottom-right-radius:6px}}@media all and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-nav__subsublist--dropdow>.pl-c-nav__item{padding-bottom:.5rem}}.pl-c-nav__sublist--dropdown,.pl-c-nav__subsublist--dropdown{list-style:none;margin:0;padding:0;overflow:hidden;max-height:0;-webkit-transition:max-height .1s ease-out;transition:max-height .1s ease-out;visibility:hidden}.pl-c-nav__sublist--dropdown.pl-is-active,.pl-c-nav__subsublist--dropdown.pl-is-active{max-height:calc(100vh - 2rem - 1rem);max-height:calc(var(--pl-viewport-height,calc(100vh - 2rem)) - 1rem);overflow:auto;-webkit-overflow-scrolling:touch}@media all and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-nav__sublist--dropdown,.pl-c-body--theme-sidebar .pl-c-nav__subsublist--dropdown{position:relative}}.pl-c-nav__sublist--dropdown .pl-c-nav__link,.pl-c-nav__subsublist--dropdown .pl-c-nav__link{padding-left:1.5rem}.pl-c-nav__sublist--dropdown .pl-c-nav__link--sublink,.pl-c-nav__subsublist--dropdown .pl-c-nav__link--sublink{padding-left:2.25rem}@media all and (max-width:41em){.pl-c-nav__sublist--dropdown .pl-c-nav__link,.pl-c-nav__subsublist--dropdown .pl-c-nav__link{padding-left:1.5rem}.pl-c-nav__sublist--dropdown .pl-c-nav__link--sublink,.pl-c-nav__subsublist--dropdown .pl-c-nav__link--sublink{padding-left:2.25rem}}.pl-c-nav__sublist--dropdown.pl-is-active,.pl-c-nav__subsublist--dropdown.pl-is-active{visibility:visible;max-height:none}@media all and (min-width:42em){.pl-c-nav__sublist--dropdown.pl-is-active,.pl-c-nav__subsublist--dropdown.pl-is-active{height:auto;max-height:calc(100vh - 2rem - 2rem)}}.pl-c-body--theme-sidebar .pl-c-nav__sublist--dropdown.pl-is-active,.pl-c-body--theme-sidebar .pl-c-nav__subsublist--dropdown.pl-is-active{max-height:none}@media all and (min-width:42em){.pl-c-nav__sublist--dropdown.pl-is-active{-webkit-box-shadow:0 1px 3px rgba(0,0,0,.1);box-shadow:0 1px 3px rgba(0,0,0,.1);border-left:1px solid #222;border-right:1px solid #222;border-left-color:#222;border-right-color:#222;border-left-color:rgba(var(--theme-text-rgb),.1);border-right-color:rgba(var(--theme-text-rgb),.1)}}.pl-c-body--theme-sidebar .pl-c-nav__sublist--dropdown.pl-is-active{-webkit-box-shadow:none;box-shadow:none;border:none}.pl-c-nav__link--overview.pl-is-active:hover:before{opacity:.1}.pl-c-nav__link--overview-wrapper:before,.pl-c-nav__link--overview:before,.pl-c-nav__subsublist--dropdown:before{content:'';position:absolute;left:0;right:0;-webkit-transition:opacity .1s ease-out;transition:opacity .1s ease-out;opacity:0;top:0;bottom:0;background-color:currentColor;z-index:1;pointer-events:none}.pl-c-nav__link--overview-wrapper:after,.pl-c-nav__link--overview:after,.pl-c-nav__subsublist--dropdown:after{content:'';position:absolute;left:0;right:0;-webkit-transition:opacity .1s ease-out;transition:opacity .1s ease-out;opacity:0;top:0;bottom:0;border-top:1px solid rgba(0,0,0,.1);border-bottom:1px solid rgba(0,0,0,.1);z-index:1;pointer-events:none}.pl-c-nav__link--overview-wrapper.pl-is-active:after,.pl-c-nav__link--overview-wrapper.pl-is-active:before,.pl-c-nav__link--overview.pl-is-active:after,.pl-c-nav__link--overview.pl-is-active:before,.pl-c-nav__subsublist--dropdown.pl-is-active:after,.pl-c-nav__subsublist--dropdown.pl-is-active:before{opacity:.025}.pl-c-body--theme-dark .pl-c-nav__link--overview-wrapper:after,.pl-c-body--theme-dark .pl-c-nav__link--overview:after,.pl-c-body--theme-dark .pl-c-nav__subsublist--dropdown:after{border-bottom:1px solid rgba(255,255,255,.1)}.pl-c-nav__subsublist{list-style:none;margin:0;padding:0}.pl-c-nav__link--overview.pl-c-nav__link--overview.pl-c-nav__link--overview{font-size:.85rem;line-height:1;padding-right:.5rem;padding-left:1.5rem;position:relative;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.pl-c-nav__link--overview.pl-c-nav__link--overview.pl-c-nav__link--overview:not(:only-child){margin-right:2.5rem}.pl-c-nav__link--title{font-size:.85rem;line-height:1;color:#ccc;color:var(--theme-text,#ccc)}.pl-c-nav__link--title.pl-is-active{font-weight:700}.pl-c-body--theme-light .pl-c-nav__link--title{color:#000;color:var(--theme-text)}@media all and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-nav__list>.pl-c-nav__item:not(:last-child){margin-bottom:.5rem;margin-top:.5rem}}.pl-c-nav__link--section-dropdown{width:2.5rem!important;height:2.5rem!important;padding:0!important;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;font-size:0;position:absolute;right:0;top:50%;border:2px solid transparent!important;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:currentColor}.pl-c-nav__link--section-dropdown:before{opacity:.1;right:2.4rem;width:1px;left:auto;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.pl-c-nav__link--section-dropdown:after{opacity:0;width:2.5rem;left:50%;-webkit-transform:translateY(-50%) translateX(-50%);-ms-transform:translateY(-50%) translateX(-50%);transform:translateY(-50%) translateX(-50%)}.pl-c-nav__link--section-dropdown:after,.pl-c-nav__link--section-dropdown:before{height:2.5rem;-webkit-transition:opacity .1s ease-out;transition:opacity .1s ease-out;content:'';display:block;position:absolute;top:50%;background-color:currentColor}.pl-c-nav__link--section-dropdown:hover:after,.pl-c-nav__link--section-dropdown:hover:focus:after{opacity:.1}.pl-c-nav__link--section-dropdown:active:not(:hover):after,.pl-c-nav__link--section-dropdown:focus:not(:hover):after{opacity:0}.pl-c-nav__link--overview-wrapper{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex}pl-search{background-color:inherit;top:0;z-index:10;-ms-flex-negative:0;flex-shrink:0;padding:.4rem .5rem;display:inline-block;-ms-flex-item-align:stretch;align-self:stretch}@media screen and (min-width:42em){pl-search{margin-left:1rem;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-negative:1;flex-shrink:1;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;-ms-flex-item-align:center;align-self:center}.pl-c-body--theme-sidebar pl-search{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin-left:0;width:100%}}.pl-c-typeahead{width:100%;background-color:inherit;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important;z-index:10;text-transform:capitalize;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;color:#fafafa;position:relative}.pl-c-body--theme-light .pl-c-typeahead{color:#222}@media screen and (min-width:42em){.pl-c-typeahead{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.pl-c-body--theme-sidebar .pl-c-typeahead{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}}.pl-c-typeahead__hint{top:0;left:0;right:0;width:100%}.pl-c-typeahead__hint,.pl-c-typeahead__input{text-transform:capitalize;background-color:#222;color:#fff;background-color:rgba(var(--theme-text-rgb),.1);color:rgba(var(--theme-text-rgb),.67);border-color:rgba(0,0,0,.1);text-overflow:ellipsis;border-width:1px;border-style:solid;-webkit-transition:all .1s ease;transition:all .1s ease;max-width:100%;padding:.4rem .5rem;font-size:16px;width:100%;outline-offset:-3px;outline-width:2px;-webkit-appearance:none}@media all and (min-width:900px){.pl-c-typeahead__hint,.pl-c-typeahead__input{font-size:inherit}}.pl-c-typeahead__hint::-ms-clear,.pl-c-typeahead__input::-ms-clear{display:none}.pl-c-body--theme-sidebar .pl-c-typeahead__hint,.pl-c-body--theme-sidebar .pl-c-typeahead__input{border-radius:0}.pl-c-typeahead__input-wrapper--with-clear-button .pl-c-typeahead__hint,.pl-c-typeahead__input-wrapper--with-clear-button .pl-c-typeahead__input{padding-right:1.7rem}@media all and (min-width:42em){.pl-c-typeahead__input-wrapper--with-clear-button .pl-c-typeahead__hint,.pl-c-typeahead__input-wrapper--with-clear-button .pl-c-typeahead__input{padding-right:1.4rem}}@media all and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-typeahead__hint,.pl-c-body--theme-sidebar .pl-c-typeahead__input{max-width:none}}.pl-c-body--theme-light .pl-c-typeahead__hint,.pl-c-body--theme-light .pl-c-typeahead__input{background-color:#eee;background-color:rgba(var(--theme-text-rgb),.1);color:#4d4c4c;color:rgba(var(--theme-text-rgb),.67)}.pl-c-typeahead__hint::-moz-input-placeholder,.pl-c-typeahead__hint::-webkit-input-placeholder,.pl-c-typeahead__input::-moz-input-placeholder,.pl-c-typeahead__input::-webkit-input-placeholder{color:#fff!important;-webkit-transition:all .1s ease;transition:all .1s ease}.pl-c-typeahead__hint:focus,.pl-c-typeahead__hint:hover,.pl-c-typeahead__input:focus,.pl-c-typeahead__input:hover{color:#fff}.pl-c-body--theme-light .pl-c-typeahead__hint:focus,.pl-c-body--theme-light .pl-c-typeahead__hint:hover,.pl-c-body--theme-light .pl-c-typeahead__input:focus,.pl-c-body--theme-light .pl-c-typeahead__input:hover{color:#222!important}.pl-c-typeahead__hint:focus::-moz-input-placeholder,.pl-c-typeahead__hint:focus::-webkit-input-placeholder,.pl-c-typeahead__hint:hover::-moz-input-placeholder,.pl-c-typeahead__hint:hover::-webkit-input-placeholder,.pl-c-typeahead__input:focus::-moz-input-placeholder,.pl-c-typeahead__input:focus::-webkit-input-placeholder,.pl-c-typeahead__input:hover::-moz-input-placeholder,.pl-c-typeahead__input:hover::-webkit-input-placeholder{color:#fff!important}.pl-c-body--theme-light .pl-c-typeahead__hint:focus::-moz-input-placeholder,.pl-c-body--theme-light .pl-c-typeahead__hint:focus::-webkit-input-placeholder,.pl-c-body--theme-light .pl-c-typeahead__hint:hover::-moz-input-placeholder,.pl-c-body--theme-light .pl-c-typeahead__hint:hover::-webkit-input-placeholder,.pl-c-body--theme-light .pl-c-typeahead__input:focus::-moz-input-placeholder,.pl-c-body--theme-light .pl-c-typeahead__input:focus::-webkit-input-placeholder,.pl-c-body--theme-light .pl-c-typeahead__input:hover::-moz-input-placeholder,.pl-c-body--theme-light .pl-c-typeahead__input:hover::-webkit-input-placeholder{color:#222!important}.pl-c-typeahead__menu{overflow:hidden;max-height:0;-webkit-transition:max-height .1s ease-out;transition:max-height .1s ease-out;background-color:#222;background-color:var(--theme-primary);color:var(--theme-text);text-transform:capitalize;position:absolute;min-width:100%;width:100%;overflow:hidden;top:100%;right:0;max-height:0;display:block!important;-webkit-transition:max-height .3s ease,opacity .3s ease;transition:max-height .3s ease,opacity .3s ease;opacity:0}.pl-c-typeahead__menu.pl-is-active{max-height:calc(100vh - 2rem - 1rem);max-height:calc(var(--pl-viewport-height,calc(100vh - 2rem)) - 1rem);overflow:auto;-webkit-overflow-scrolling:touch}@media all and (min-width:42em){.pl-c-typeahead__menu{border-bottom-right-radius:6px;border-bottom-left-radius:6px}}.pl-c-body--theme-light .pl-c-typeahead__menu{background-color:#fafafa}.pl-c-typeahead__menu.pl-is-open{max-height:120rem;max-height:calc(var(--viewport-height) - 4rem);opacity:1}@media all and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-typeahead__menu{position:relative!important;border-radius:0}}@media all and (max-width:41em){.pl-c-typeahead__menu{position:relative!important}}.pl-c-typeahead__results{list-style:none;margin:0;padding:0;background-color:inherit;border-color:transparent;border-width:1px;border-style:solid;overflow:hidden;border-color:#151515}@media all and (min-width:42em){.pl-c-typeahead__results{border-bottom-right-radius:6px;border-bottom-left-radius:6px}}.pl-c-typeahead__results:empty{border-width:0;max-height:0}.pl-c-body--theme-light .pl-c-typeahead__results{border-color:#ccc}@media all and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-typeahead__results{border-radius:0}}.pl-c-typeahead__result{-webkit-transition:all .3s ease;transition:all .3s ease;background-color:inherit;padding:.5rem .75rem;cursor:pointer;overflow:hidden;font-size:.8rem;color:inherit}.pl-c-typeahead__result:last-child{border-bottom-right-radius:6px;border-bottom-left-radius:6px}@media all and (max-width:41em){.pl-c-typeahead__result:last-child{border-radius:0}}.pl-c-body--theme-sidebar .pl-c-typeahead__result:last-child{border-radius:0}.pl-c-typeahead__result:hover{background-color:rgba(255,255,255,.15)}.pl-c-body--theme-light .pl-c-typeahead__result:hover{background-color:#eee}.pl-c-typeahead__result:active,.pl-c-typeahead__result:focus{background-color:rgba(255,255,255,.18)}.pl-c-body--theme-light .pl-c-typeahead__result:active,.pl-c-body--theme-light .pl-c-typeahead__result:focus{background-color:#ddd}.pl-c-typeahead__result.pl-has-cursor{color:#fff;background-color:rgba(255,255,255,.25)}.pl-c-body--theme-light .pl-c-typeahead__result.pl-has-cursor{color:#000;background-color:#ddd}.pl-c-typeahead__input-wrapper{position:relative;-ms-flex-negative:0;flex-shrink:0}.pl-c-typeahead__clear-button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:inherit;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background-color .1s ease-out,color .1s ease-out;transition:background-color .1s ease-out,color .1s ease-out;cursor:pointer;outline:0;height:1.7rem;width:1.7rem;background-color:transparent;border-radius:20rem;overflow:hidden;position:absolute;right:0;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);z-index:100;cursor:pointer;border:0;-webkit-transition:opacity .1s ease;transition:opacity .1s ease;opacity:0;visibility:hidden}.pl-c-typeahead__clear-button.pl-is-active:hover,.pl-c-typeahead__clear-button:hover{background-color:rgba(0,0,0,.1)}.pl-c-body--theme-density-cozy .pl-c-typeahead__clear-button{font-size:.85rem;padding:1.2rem .8rem}.pl-c-body--theme-density-comfortable .pl-c-typeahead__clear-button{font-size:.85rem;padding:1.5rem 1rem}.pl-c-typeahead__clear-button:active,.pl-c-typeahead__clear-button:hover{background-color:transparent}@media all and (min-width:42em){.pl-c-typeahead__clear-button{height:1.4rem;width:1.4rem}}.pl-c-body--theme-light .pl-c-typeahead__clear-button{background-color:transparent}.pl-c-body--theme-light .pl-c-typeahead__clear-button:active,.pl-c-body--theme-light .pl-c-typeahead__clear-button:hover{background-color:transparent}.pl-c-typeahead__clear-button.pl-is-visible{opacity:1;visibility:visible}.pl-c-typeahead__clear-button-icon{fill:currentColor;line-height:0;font-size:0;position:absolute;top:50%;left:50%;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0)}pl-toggle-info{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-item-align:center;align-self:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;z-index:10;width:100%;cursor:pointer}.pl-c-toggle-info,.pl-c-toggle-info__action{width:100%}pl-toggle-layout{display:none;-ms-flex-item-align:center;align-self:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;z-index:10;width:100%;cursor:pointer}@media all and (min-width:42em){pl-toggle-layout{display:-webkit-box;display:-ms-flexbox;display:flex}}.pl-c-toggle-layout,.pl-c-toggle-layout__action{width:100%}pl-toggle-theme{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-item-align:center;align-self:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;z-index:10;width:100%;cursor:pointer}.pl-c-toggle-theme,.pl-c-toggle-theme__action{width:100%}pl-tools-menu{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.pl-c-tools{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex}.pl-c-tools__toggle{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:inherit;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background-color .1s ease-out,color .1s ease-out;transition:background-color .1s ease-out,color .1s ease-out;cursor:pointer;outline:0;margin:0;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative;min-width:30px}.pl-c-tools__toggle.pl-is-active:hover,.pl-c-tools__toggle:hover{background-color:rgba(0,0,0,.1)}.pl-c-body--theme-density-cozy .pl-c-tools__toggle{font-size:.85rem;padding:1.2rem .8rem}.pl-c-body--theme-density-comfortable .pl-c-tools__toggle{font-size:.85rem;padding:1.5rem 1rem}.pl-c-tools__toggle-icon{-webkit-transition:inherit;transition:inherit}.pl-c-tools__list{list-style:none;margin:0;padding:0;overflow:hidden;max-height:0;-webkit-transition:max-height .1s ease-out;transition:max-height .1s ease-out;-webkit-transform:translateY(-10px);-ms-transform:translateY(-10px);transform:translateY(-10px);position:absolute;right:3px;z-index:10;width:12rem;border-radius:6px;top:calc(100% + 4px);-webkit-box-shadow:0 0 5px rgba(0,0,0,.1);box-shadow:0 0 5px rgba(0,0,0,.1);background-color:#222;background-color:var(--theme-primary,#222)}.pl-c-tools__list.pl-is-active{max-height:calc(100vh - 2rem - 1rem);max-height:calc(var(--pl-viewport-height,calc(100vh - 2rem)) - 1rem);overflow:auto;-webkit-overflow-scrolling:touch}.pl-c-body--theme-light .pl-c-tools__list{background-color:#fff;background-color:var(--theme-primary,#fff)}@media all and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-tools__list{-webkit-box-shadow:none;box-shadow:none;top:0;-webkit-transform:none;-ms-transform:none;transform:none;border-radius:0;background-color:transparent}}.pl-c-tools__list.pl-is-active{overflow:visible}.pl-c-tools__list:before{content:'';height:14px;width:14px;background-color:#222;background-color:var(--theme-primary,#222);position:absolute;right:0;top:-10px;-webkit-transform:translateY(50%) translateX(-50%) rotate(45deg);-ms-transform:translateY(50%) translateX(-50%) rotate(45deg);transform:translateY(50%) translateX(-50%) rotate(45deg);-webkit-transition:opacity .1s ease-out;transition:opacity .1s ease-out;opacity:0;visibility:hidden;-webkit-box-shadow:0 0 5px rgba(0,0,0,.1);box-shadow:0 0 5px rgba(0,0,0,.1)}@media all and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-tools__list:before{display:none}}.pl-c-tools__list.pl-is-active:before{opacity:1;visibility:visible}.pl-c-tools__item{position:relative;overflow:hidden}.pl-c-tools__item:first-child{border-top-left-radius:6px;border-top-right-radius:6px}@media all and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-tools__item:first-child{border-radius:0}}.pl-c-tools__item:last-child{border-bottom-left-radius:6px;border-bottom-right-radius:6px}@media all and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-tools__item:last-child{border-radius:0}}.pl-c-tools__action{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:inherit;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background-color .1s ease-out,color .1s ease-out;transition:background-color .1s ease-out,color .1s ease-out;cursor:pointer;outline:0;padding-top:.4rem;padding-bottom:.4rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;margin:0;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.pl-c-tools__action.pl-is-active:hover,.pl-c-tools__action:hover{background-color:rgba(0,0,0,.1)}.pl-c-body--theme-density-cozy .pl-c-tools__action{font-size:.85rem;padding:1.2rem .8rem}.pl-c-body--theme-density-comfortable .pl-c-tools__action{font-size:.85rem;padding:1.5rem 1rem}.pl-c-tools__action-icon{margin-right:.5rem}.pl-c-tools__action-icon:first-child:last-child{margin-right:0}.tooltip-container{color:#222}.pl-c-size-list{display:none;list-style:none;margin:0;padding:0;overflow-x:auto;padding:0 .25rem}@media all and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-size-list{padding-bottom:.5rem}}@media all and (min-width:42em){.pl-c-size-list{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-overflow-scrolling:touch}}@media all and (min-width:42em){.pl-c-size-list{display:block;display:-webkit-box;display:-ms-flexbox;display:flex}}.pl-c-size-list__action{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:inherit;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background-color .1s ease-out,color .1s ease-out;transition:background-color .1s ease-out,color .1s ease-out;cursor:pointer;outline:0;padding-left:.3rem;padding-right:.3rem}.pl-c-size-list__action.pl-is-active:hover,.pl-c-size-list__action:hover{background-color:rgba(0,0,0,.1)}.pl-c-body--theme-density-cozy .pl-c-size-list__action{font-size:.85rem;padding:1.2rem .8rem}.pl-c-body--theme-density-comfortable .pl-c-size-list__action{font-size:.85rem;padding:1.5rem 1rem}.pl-c-size-list__item:first-child{margin-left:auto}.pl-c-size-list__item:last-child{margin-right:auto}.pl-c-viewport-size{margin:0;border:0;padding:.3rem .5rem .4rem;line-height:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.pl-c-viewport-size__input{padding:.1rem;margin:0;border:0;border-radius:3px;background-color:transparent;font-size:.8rem;color:inherit;width:2.4rem;text-align:right;-webkit-transition:all .1s ease-out;transition:all .1s ease-out;pointer-events:none}.pl-c-viewport-size__input::-moz-focus-inner{padding:0;border:0}.pl-c-viewport-size__input:hover{color:#fff;background-color:#222}.pl-c-viewport-size__input:active,.pl-c-viewport-size__input:focus{color:#fff;background-color:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-viewport-size__label{display:block;margin:0;padding:0;font-size:.7rem;pointer-events:none}pl-iframe{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;background-color:#fff}.pl-c-viewport{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%;position:relative;top:2rem;bottom:0;left:0;right:0;z-index:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-transition:height .3s ease;transition:height .3s ease;background-color:#f6f6f9}@supports ((position: -webkit-sticky) or (position: sticky)){.pl-c-viewport{top:0}}.pl-c-body--theme-sidebar .pl-c-viewport{top:0}.pl-c-viewport__cover{width:100%;height:100%;display:none;position:fixed;top:0;left:0;z-index:200;cursor:move;pointer-events:auto}.pl-c-viewport__iframe-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100vw;max-width:100vw;position:relative;margin:0 auto;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-overflow-scrolling:touch;min-width:240px;max-width:100vw;background:#fff;-webkit-box-shadow:0 3px 6px rgba(21,22,25,.16),0 3px 6px rgba(21,22,25,.23);box-shadow:0 3px 6px rgba(21,22,25,.16),0 3px 6px rgba(21,22,25,.23)}.pl-c-viewport__iframe-wrapper.hay-mode{-webkit-transition:all 40s linear;transition:all 40s linear}@media all and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-viewport__iframe-wrapper{max-width:calc(100vw - 16rem);width:calc(100vw - 16rem)}}.pl-c-viewport__iframe{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;width:100%;border:0;padding:0;margin:0;top:0;bottom:0;left:0;right:0;background-color:#fff;max-width:100vw;width:100%;padding-right:30px;overflow:hidden}.pl-c-viewport__iframe.is-ready{min-height:0}@media all and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-viewport__iframe{width:100%;max-width:calc(100vw - 16rem)}}.pl-c-viewport__iframe.hay-mode{-webkit-transition:all 40s linear;transition:all 40s linear}.pl-c-viewport__resizer{position:absolute;width:30px;right:0;top:0;bottom:0;margin:0;height:100%;cursor:ew-resize}.pl-c-viewport__resizer-handle{margin:0;width:100%;height:100%;-webkit-transition:opacity .1s ease-out;transition:opacity .1s ease-out;position:relative;color:#4d4c4c}.pl-c-viewport__resizer-handle.is-resizing:after,.pl-c-viewport__resizer-handle:hover:after{background-color:#f6f6f9}.pl-c-viewport__resizer-handle:after{content:'';-webkit-box-shadow:0 1px 4px 1px rgba(6,10,36,.1),0 5px 10px 0 rgba(6,10,36,.08);box-shadow:0 1px 4px 1px rgba(6,10,36,.1),0 5px 10px 0 rgba(6,10,36,.08);-webkit-transition:.3s cubic-bezier(.25,.8,.25,1)!important;transition:.3s cubic-bezier(.25,.8,.25,1)!important;cursor:ew-resize;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;height:100%;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:fixed;top:50vh;bottom:0;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0);width:30px;background:#fff}.pl-c-viewport__resizer-handle:active{cursor:move}.vp-animate{-webkit-transition:width .8s ease-out;transition:width .8s ease-out}.pl-c-viewport-modal-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;max-width:100vw;position:relative}@media all and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-viewport-modal-wrapper{max-width:calc(100vw - 16rem)}}@media all and (min-width:42em) and (-ms-high-contrast:none),all and (min-width:42em) and (-ms-high-contrast:active){.pl-c-body--theme-sidebar .pl-c-viewport-modal-wrapper{margin-left:16rem}}.pl-has-annotation{cursor:help!important;outline:1px dotted grey;outline-offset:-4px;-webkit-transition:-webkit-box-shadow .1s ease;transition:-webkit-box-shadow .1s ease;transition:box-shadow .1s ease;transition:box-shadow .1s ease, -webkit-box-shadow .1s ease}.pl-has-annotation a,.pl-has-annotation input{cursor:help!important}.pl-has-annotation:hover{-webkit-box-shadow:0 0 3px grey;box-shadow:0 0 3px grey}.pl-has-annotation.active{-webkit-box-shadow:inset 0 0 6px #4d4c4c;box-shadow:inset 0 0 6px #4d4c4c;outline:1px dotted grey;outline-offset:-1px}.pl-c-annotation-tip{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:24px!important;height:24px!important;margin-top:6px!important;margin-left:6px!important;border-radius:50%!important;background-color:#222!important;color:#fff!important;font-size:16px!important;position:absolute;z-index:100}.pl-c-annotations{margin:1rem 0}.pl-c-annotations__title{font-size:1.2rem!important;margin:0 0 .5rem}.pl-c-annotations .pl-c-annotations__list{counter-reset:the-count;padding:0;margin:0;list-style:none}.pl-c-annotations__item{position:relative;padding-left:1.5rem;margin-bottom:1rem;border-radius:6px;-webkit-transition:background-color .1s ease;transition:background-color .1s ease}.pl-c-annotations__item:before{content:counter(the-count);counter-increment:the-count;font-size:85%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:14px;height:14px;border-radius:50%;padding:2px;text-align:center;background-color:grey;color:#fff;position:absolute;top:4px;left:0}.pl-c-annotations__item.pl-is-active{outline:1px dotted grey;outline-offset:-1px}.pl-c-annotations .pl-c-annotations__item-title{margin-bottom:0}.pl-c-breadcrumb{list-style:none;margin:0;padding:0;margin-bottom:.5rem;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:.9rem;color:grey;text-transform:capitalize}.pl-c-breadcrumb__item:after{content:'\25B6';opacity:.4;font-size:6px;display:inline-block;margin:0 .2rem;position:relative;top:-1px}.pl-c-category{margin-top:6rem;font:"Open Sans",HelveticaNeue,Helvetica,Arial,sans-serif!important}.pl-c-category:first-of-type{margin-top:2rem}.pl-c-category__title{font-size:1.4rem!important;color:#222!important;margin:0 0 .2rem;text-transform:capitalize}.pl-c-category__title-link{-webkit-transition:color .1s ease-out;transition:color .1s ease-out}.pl-c-category__description{font-size:.85rem;line-height:1.5;max-width:30rem}.pl-c-category__description:empty{display:none}.pl-c-pattern-info{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.pl-c-pattern .pl-c-pattern-info{max-height:30rem;overflow:scroll;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-overflow-scrolling:touch}@media all and (min-width:53em){.pl-c-pattern .pl-c-pattern-info{max-height:none;height:18rem;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;overflow:visible}}.pl-c-drawer .pl-c-pattern-info{overflow:auto;-webkit-overflow-scrolling:touch;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}@media all and (min-width:53em){.pl-c-drawer .pl-c-pattern-info{position:static;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}}.pl-c-pattern-info__panel{padding:1rem;width:100%;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;max-height:100%;overflow:auto}@media all and (min-width:42em){.pl-c-pattern-info__panel{-ms-flex-preferred-size:50%;flex-basis:50%;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}}@media all and (min-width:53em){.pl-c-pattern-info__panel--info{overflow:auto;-webkit-overflow-scrolling:touch}}@media all and (min-width:62em){.pl-c-pattern-info__panel--info{width:55%}}.pl-c-pattern-info__panel--code:first-child,.pl-c-pattern-info__panel--info+.pl-c-pattern-info__panel--code{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1}.pl-c-pattern-info__header{margin-bottom:.5rem}.pl-c-pattern-info__title{font-size:1.4rem!important;font-weight:400;margin-top:0;margin-bottom:0;color:inherit;text-transform:capitalize;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.pl-c-pattern-info__description{border-bottom-color:grey}.pl-c-annotations{border-top-color:grey}.pl-c-lineage{font-size:.85rem;line-height:1.7;margin-top:0}.pl-c-lineage__link{font-style:italic;color:grey;text-decoration:underline;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transition:opacity .1s ease;transition:opacity .1s ease}.pl-c-lineage__link:focus,.pl-c-lineage__link:hover{opacity:.8}.pl-c-pattern-state{display:inline-block;width:5px;height:5px;margin-left:10px;position:relative;top:5px;left:0;border-radius:50%;background-color:#02a4d5;line-height:4px;text-indent:10px}.pl-c-pattern-state--complete{background-color:#03790f}.pl-c-pattern-state--inreview{background-color:#c7a118}.pl-c-pattern-state--deprecated{background-color:#b00b02}.complete:before{color:#03790f!important}.pl-c-pattern{margin-bottom:2rem;position:relative;clear:both}.pl-c-pattern__header{position:relative;padding:.5rem 0 0;line-height:1.3;font-size:90%;color:grey}.pl-c-pattern__header:empty{padding:0}.pl-c-pattern__title{font-family:"Open Sans",HelveticaNeue,Helvetica,Arial,sans-serif!important;font-size:.85rem!important;line-height:1!important;font-weight:400!important;margin:0!important;padding:0!important;text-transform:capitalize!important}.pl-c-pattern__title-link{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;padding:1rem 0 .3rem;color:grey!important;text-decoration:none;cursor:pointer}.pl-c-pattern__title-link:focus,.pl-c-pattern__title-link:hover{color:#000!important}.pl-c-pattern__extra-toggle{font-size:9px;position:absolute;bottom:-1px;right:0;z-index:1;padding:.65em .65em .5em;line-height:1;color:grey;background-color:transparent;font-weight:400;border:1px solid #ddd;border-top-left-radius:6px;border-top-right-radius:6px;-webkit-transition:background-color .1s ease-out;transition:background-color .1s ease-out}.pl-c-pattern__extra-toggle .pl-c-pattern__toggle-icon{display:inline-block}.pl-c-pattern__extra-toggle.pl-is-active,.pl-c-pattern__extra-toggle:focus,.pl-c-pattern__extra-toggle:hover{background-color:#fafafa;color:#000}.pl-c-pattern__extra-toggle:focus{outline:1px dotted #4d4c4c}.pl-c-pattern__extra-toggle.pl-is-active{border-bottom-color:#fafafa}.pl-c-pattern__extra-toggle.pl-is-active .pl-c-pattern__toggle-icon{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.pl-c-pattern__extra{background-color:#fafafa;border-top:1px solid #ddd;margin-bottom:1rem;overflow:hidden;max-height:1px;position:relative;-webkit-transition:all .1s ease-out;transition:all .1s ease-out}.pl-c-pattern__extra.pl-is-active{border:1px solid #ddd;border-radius:6px;border-top-right-radius:0;max-height:150rem}.pl-c-tabs{padding:0 .5rem .5rem;background-color:#fff;border:1px solid #ddd;border-radius:6px;font-family:"Open Sans",HelveticaNeue,Helvetica,Arial,sans-serif;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow:hidden;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.pl-c-tabs__list{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;list-style:none;margin:0;padding:.5rem 0;background-color:#fff}.pl-c-tabs__link{display:block;line-height:1;padding:.2rem .4rem;border:1px solid transparent;border-radius:6px;color:grey;background-color:#fff;cursor:pointer;text-decoration:none;text-transform:lowercase;-webkit-transition:all .1s ease-out;transition:all .1s ease-out}.pl-c-tabs__link:hover{color:#222}.pl-c-tabs__link.pl-is-active-tab{color:#222;background-color:#eee;border:1px solid #ddd}.pl-c-tabs__content{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-preferred-size:auto;flex-basis:auto;overflow:auto;-webkit-overflow-scrolling:touch;height:100%}.pl-c-drawer .pl-c-tabs__content{border:0}.pl-c-tabs__panel{display:none;width:100%;max-height:100%}.pl-c-tabs__panel.pl-is-active-tab{display:block;display:-webkit-box;display:-ms-flexbox;display:flex}.pl-c-tabs__panel :not(pre)>code[class*=language-],.pl-c-tabs__panel pre[class*=language-]{background-color:transparent;margin:0;padding:0;border:0;display:block;width:100%}.pl-c-tabs__panel code[class*=language-]{background-color:transparent;margin:0}.pl-c-text-passage{font-size:.85rem;line-height:1.7}.pl-c-text-passage p{margin-top:0;margin-bottom:1rem}.pl-c-text-passage p:last-child{margin-bottom:0}.pl-c-text-passage a{color:grey;text-decoration:underline;-webkit-transition:opacity .1s ease;transition:opacity .1s ease}.pl-c-text-passage a:focus,.pl-c-text-passage a:hover{opacity:.8}.pl-c-text-passage code[class*=language-],.pl-c-text-passage pre[class*=language-]{color:inherit}.pl-c-text-passage blockquote{padding-left:.8rem;border-left:3px solid inherit}.pl-c-text-passage hr{height:1px;background-color:grey;margin:2rem 0;border:0}.pl-c-text-passage h1{margin-bottom:1rem;font-weight:400}.pl-c-text-passage h2{margin:1rem 0 1rem;font-weight:400}.pl-c-text-passage h3{margin:1rem 0 1rem;font-weight:400}.pl-c-text-passage h4{margin:1rem 0 1rem;font-weight:400}.pl-c-text-passage h5{margin:1rem 0 1rem;font-weight:400}.pl-c-text-passage h6{margin:1rem 0 1rem;font-weight:400}.pl-c-text-passage ul{list-style:square;margin-left:.9rem;margin-bottom:1rem}.pl-c-text-passage ul li:last-child{margin-bottom:0}.pl-c-text-passage ol{list-style:decimal;margin-left:.9rem;margin-bottom:1rem}.pl-c-text-passage ol li:last-child{margin-bottom:0}.pl-c-text-passage li{margin-bottom:.5rem}.pl-c-main{overflow:hidden;max-width:100vw}.pl-c-body--theme-light .pl-c-header{background-color:#fff;border-bottom:1px solid #ccc}@media all and (max-width:41em){.pl-c-body--theme-light .pl-c-tools__list.pl-is-active{border-bottom:1px solid #ccc;border-left:1px solid #ccc}}.pl-c-body--theme-light:not(.pl-c-body--theme-sidebar) .pl-c-tools__list.pl-is-active{border-bottom:1px solid #ccc;border-left:1px solid #ccc}.pl-c-body--theme-light .pl-c-nav__link--dropdown{color:inherit}.pl-c-body--theme-light .pl-c-nav__link--dropdown:after{color:inherit}@media all and (min-width:42em){.pl-c-body--theme-light .pl-c-nav__sublist>.pl-c-nav__item:last-child .pl-c-nav__link{border-bottom-left-radius:6px;border-bottom-right-radius:6px}}.pl-c-body--theme-light .pl-c-viewport-size__input{color:#4d4c4c}.pl-c-body--theme-light .pl-c-viewport-size__input:focus,.pl-c-body--theme-light .pl-c-viewport-size__input:hover{background-color:#ddd}.pl-c-body--theme-light .typeahead{background-color:#ddd!important}.pl-c-body--theme-light .tt-input{background-color:#eee!important;color:#4d4c4c!important}.pl-c-body--theme-light .tt-input:hover{color:#222;background-color:#ddd!important}.pl-c-body--theme-light .tt-input:hover::-webkit-input-placeholder{color:#222}.pl-c-body--theme-light .tt-input:hover::-moz-input-placeholder{color:#222}.pl-c-body--theme-light .pl-c-drawer{background-color:#fff;color:#4d4c4c;border-top:1px solid #ccc}.pl-c-body--theme-light .pl-c-drawer__close-btn,.pl-c-body--theme-light .pl-c-tools__action{background-color:#fff}.pl-c-body--theme-light .pl-c-drawer__close-btn:focus,.pl-c-body--theme-light .pl-c-drawer__close-btn:hover,.pl-c-body--theme-light .pl-c-tools__action:focus,.pl-c-body--theme-light .pl-c-tools__action:hover{background-color:#eee;color:#4d4c4c}.pl-c-body--theme-density-cozy .pl-c-header{font-size:.85rem}.pl-c-body--theme-density-cozy .pl-c-viewport-size__input{width:44px}.pl-c-body--theme-density-cozy .pl-c-typeahead{padding:.9rem .8rem}@media all and (max-width:78em){.pl-c-body--theme-density-cozy .pl-c-size-list{display:none}}@media all and (max-width:78em){.pl-c-body--theme-density-cozy .pl-c-viewport-size{display:none}}.pl-c-body--theme-density-cozy .pl-c-tools__toggle{min-width:44px}.pl-c-body--theme-density-cozy .pl-c-viewport{top:3.28rem}.pl-c-body--theme-density-comfortable .pl-c-header{font-size:.85rem}.pl-c-body--theme-density-comfortable .pl-c-logo{max-width:4rem}.pl-c-body--theme-density-comfortable .pl-c-header .tt-suggestion{padding:1.5rem 1rem}.pl-c-body--theme-density-comfortable .pl-c-viewport-size__input{width:44px}.pl-c-body--theme-density-comfortable .pl-c-typeahead{padding:.9rem 1rem}@media all and (max-width:78em){.pl-c-body--theme-density-comfortable .pl-c-size-list{display:none}}@media all and (max-width:78em){.pl-c-body--theme-density-comfortable .pl-c-viewport-size{display:none}}.pl-c-body--theme-density-comfortable .pl-c-tools__toggle{min-width:44px}.pl-c-body--theme-density-comfortable .pl-c-viewport{top:3.8rem}@media all and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-header{width:16rem;height:100vh;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;border-bottom:0;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.pl-c-body--theme-sidebar .pl-c-nav{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-flow:column-reverse;flex-flow:column-reverse}.pl-c-body--theme-sidebar .pl-c-nav__list{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.pl-c-body--theme-sidebar .pl-c-nav__sublist{position:relative;border-radius:0}.pl-c-body--theme-sidebar.pl-c-body--theme-light .pl-c-nav__subsublist{border-left-color:#eee}.pl-c-body--theme-sidebar .pl-c-nav__sublist .pl-c-nav__link{border-left:0;border-right:0}}@media all and (min-width:42em) and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-nav__sublist>.pl-c-nav__item:last-child .pl-c-nav__link{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:0}}@media all and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-controls{display:block;justify-self:flex-end;margin-left:0}.pl-c-body--theme-sidebar .pl-c-tools__toggle{display:none}.pl-c-body--theme-sidebar .pl-c-tools__list{max-height:none;overflow:visible;position:relative;border-radius:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%}.pl-c-body--theme-sidebar .pl-c-drawer{right:0;width:auto}}.is-vishidden{position:absolute!important;overflow:hidden;width:1px;height:1px;padding:0;border:0;clip:rect(1px,1px,1px,1px)} diff --git a/packages/uikit-workshop/dist/styleguide/images/pattern-lab-logo--on-dark.svg b/packages/uikit-workshop/dist/styleguide/images/pattern-lab-logo--on-dark.svg new file mode 100644 index 000000000..59cc46b0a --- /dev/null +++ b/packages/uikit-workshop/dist/styleguide/images/pattern-lab-logo--on-dark.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/uikit-workshop/dist/styleguide/images/pattern-lab-logo--on-light.svg b/packages/uikit-workshop/dist/styleguide/images/pattern-lab-logo--on-light.svg new file mode 100644 index 000000000..549f60c02 --- /dev/null +++ b/packages/uikit-workshop/dist/styleguide/images/pattern-lab-logo--on-light.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/uikit-workshop/dist/styleguide/js/patternlab-pattern.js b/packages/uikit-workshop/dist/styleguide/js/patternlab-pattern.js index e2137b5ca..90239c114 100644 --- a/packages/uikit-workshop/dist/styleguide/js/patternlab-pattern.js +++ b/packages/uikit-workshop/dist/styleguide/js/patternlab-pattern.js @@ -1 +1 @@ -!function(e){var n={};function t(r){if(n[r])return n[r].exports;var a=n[r]={i:r,l:!1,exports:{}};return e[r].call(a.exports,a,a.exports,t),a.l=!0,a.exports}t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:r})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,n){if(1&n&&(e=t(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(t.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var a in e)t.d(r,a,function(n){return e[n]}.bind(null,a));return r},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p="./styleguide/",t(t.s="./src/scripts/patternlab-pattern.js")}({"./node_modules/clipboard/dist/clipboard.js":function(module,exports,__webpack_require__){eval("/* WEBPACK VAR INJECTION */(function(module) {var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;function _typeof2(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof2 = function _typeof2(obj) { return typeof obj; }; } else { _typeof2 = function _typeof2(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof2(obj); }\n\n/*!\n * clipboard.js v2.0.1\n * https://zenorocha.github.io/clipboard.js\n * \n * Licensed MIT © Zeno Rocha\n */\n(function webpackUniversalModuleDefinition(root, factory) {\n if (( false ? undefined : _typeof2(exports)) === 'object' && ( false ? undefined : _typeof2(module)) === 'object') module.exports = factory();else if (true) !(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),\n\t\t\t\t__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?\n\t\t\t\t(__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__),\n\t\t\t\t__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));else {}\n})(this, function () {\n return (\n /******/\n function (modules) {\n // webpackBootstrap\n\n /******/\n // The module cache\n\n /******/\n var installedModules = {};\n /******/\n\n /******/\n // The require function\n\n /******/\n\n function __webpack_require__(moduleId) {\n /******/\n\n /******/\n // Check if module is in cache\n\n /******/\n if (installedModules[moduleId]) {\n /******/\n return installedModules[moduleId].exports;\n /******/\n }\n /******/\n // Create a new module (and put it into the cache)\n\n /******/\n\n\n var module = installedModules[moduleId] = {\n /******/\n i: moduleId,\n\n /******/\n l: false,\n\n /******/\n exports: {}\n /******/\n\n };\n /******/\n\n /******/\n // Execute the module function\n\n /******/\n\n modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n /******/\n\n /******/\n // Flag the module as loaded\n\n /******/\n\n module.l = true;\n /******/\n\n /******/\n // Return the exports of the module\n\n /******/\n\n return module.exports;\n /******/\n }\n /******/\n\n /******/\n\n /******/\n // expose the modules object (__webpack_modules__)\n\n /******/\n\n\n __webpack_require__.m = modules;\n /******/\n\n /******/\n // expose the module cache\n\n /******/\n\n __webpack_require__.c = installedModules;\n /******/\n\n /******/\n // identity function for calling harmony imports with the correct context\n\n /******/\n\n __webpack_require__.i = function (value) {\n return value;\n };\n /******/\n\n /******/\n // define getter function for harmony exports\n\n /******/\n\n\n __webpack_require__.d = function (exports, name, getter) {\n /******/\n if (!__webpack_require__.o(exports, name)) {\n /******/\n Object.defineProperty(exports, name, {\n /******/\n configurable: false,\n\n /******/\n enumerable: true,\n\n /******/\n get: getter\n /******/\n\n });\n /******/\n }\n /******/\n\n };\n /******/\n\n /******/\n // getDefaultExport function for compatibility with non-harmony modules\n\n /******/\n\n\n __webpack_require__.n = function (module) {\n /******/\n var getter = module && module.__esModule ?\n /******/\n function getDefault() {\n return module['default'];\n } :\n /******/\n function getModuleExports() {\n return module;\n };\n /******/\n\n __webpack_require__.d(getter, 'a', getter);\n /******/\n\n\n return getter;\n /******/\n };\n /******/\n\n /******/\n // Object.prototype.hasOwnProperty.call\n\n /******/\n\n\n __webpack_require__.o = function (object, property) {\n return Object.prototype.hasOwnProperty.call(object, property);\n };\n /******/\n\n /******/\n // __webpack_public_path__\n\n /******/\n\n\n __webpack_require__.p = \"\";\n /******/\n\n /******/\n // Load entry module and return exports\n\n /******/\n\n return __webpack_require__(__webpack_require__.s = 3);\n /******/\n }(\n /************************************************************************/\n\n /******/\n [\n /* 0 */\n\n /***/\n function (module, exports, __webpack_require__) {\n var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;\n\n (function (global, factory) {\n if (true) {\n !(__WEBPACK_AMD_DEFINE_ARRAY__ = [module, __webpack_require__(7)], __WEBPACK_AMD_DEFINE_FACTORY__ = factory, __WEBPACK_AMD_DEFINE_RESULT__ = typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ? __WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__) : __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));\n } else { var mod; }\n })(this, function (module, _select) {\n 'use strict';\n\n var _select2 = _interopRequireDefault(_select);\n\n function _interopRequireDefault(obj) {\n return obj && obj.__esModule ? obj : {\n default: obj\n };\n }\n\n var _typeof = typeof Symbol === \"function\" && _typeof2(Symbol.iterator) === \"symbol\" ? function (obj) {\n return _typeof2(obj);\n } : function (obj) {\n return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : _typeof2(obj);\n };\n\n function _classCallCheck(instance, Constructor) {\n if (!(instance instanceof Constructor)) {\n throw new TypeError(\"Cannot call a class as a function\");\n }\n }\n\n var _createClass = function () {\n function defineProperties(target, props) {\n for (var i = 0; i < props.length; i++) {\n var descriptor = props[i];\n descriptor.enumerable = descriptor.enumerable || false;\n descriptor.configurable = true;\n if (\"value\" in descriptor) descriptor.writable = true;\n Object.defineProperty(target, descriptor.key, descriptor);\n }\n }\n\n return function (Constructor, protoProps, staticProps) {\n if (protoProps) defineProperties(Constructor.prototype, protoProps);\n if (staticProps) defineProperties(Constructor, staticProps);\n return Constructor;\n };\n }();\n\n var ClipboardAction = function () {\n /**\n * @param {Object} options\n */\n function ClipboardAction(options) {\n _classCallCheck(this, ClipboardAction);\n\n this.resolveOptions(options);\n this.initSelection();\n }\n /**\n * Defines base properties passed from constructor.\n * @param {Object} options\n */\n\n\n _createClass(ClipboardAction, [{\n key: 'resolveOptions',\n value: function resolveOptions() {\n var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n this.action = options.action;\n this.container = options.container;\n this.emitter = options.emitter;\n this.target = options.target;\n this.text = options.text;\n this.trigger = options.trigger;\n this.selectedText = '';\n }\n }, {\n key: 'initSelection',\n value: function initSelection() {\n if (this.text) {\n this.selectFake();\n } else if (this.target) {\n this.selectTarget();\n }\n }\n }, {\n key: 'selectFake',\n value: function selectFake() {\n var _this = this;\n\n var isRTL = document.documentElement.getAttribute('dir') == 'rtl';\n this.removeFake();\n\n this.fakeHandlerCallback = function () {\n return _this.removeFake();\n };\n\n this.fakeHandler = this.container.addEventListener('click', this.fakeHandlerCallback) || true;\n this.fakeElem = document.createElement('textarea'); // Prevent zooming on iOS\n\n this.fakeElem.style.fontSize = '12pt'; // Reset box model\n\n this.fakeElem.style.border = '0';\n this.fakeElem.style.padding = '0';\n this.fakeElem.style.margin = '0'; // Move element out of screen horizontally\n\n this.fakeElem.style.position = 'absolute';\n this.fakeElem.style[isRTL ? 'right' : 'left'] = '-9999px'; // Move element to the same position vertically\n\n var yPosition = window.pageYOffset || document.documentElement.scrollTop;\n this.fakeElem.style.top = yPosition + 'px';\n this.fakeElem.setAttribute('readonly', '');\n this.fakeElem.value = this.text;\n this.container.appendChild(this.fakeElem);\n this.selectedText = (0, _select2.default)(this.fakeElem);\n this.copyText();\n }\n }, {\n key: 'removeFake',\n value: function removeFake() {\n if (this.fakeHandler) {\n this.container.removeEventListener('click', this.fakeHandlerCallback);\n this.fakeHandler = null;\n this.fakeHandlerCallback = null;\n }\n\n if (this.fakeElem) {\n this.container.removeChild(this.fakeElem);\n this.fakeElem = null;\n }\n }\n }, {\n key: 'selectTarget',\n value: function selectTarget() {\n this.selectedText = (0, _select2.default)(this.target);\n this.copyText();\n }\n }, {\n key: 'copyText',\n value: function copyText() {\n var succeeded = void 0;\n\n try {\n succeeded = document.execCommand(this.action);\n } catch (err) {\n succeeded = false;\n }\n\n this.handleResult(succeeded);\n }\n }, {\n key: 'handleResult',\n value: function handleResult(succeeded) {\n this.emitter.emit(succeeded ? 'success' : 'error', {\n action: this.action,\n text: this.selectedText,\n trigger: this.trigger,\n clearSelection: this.clearSelection.bind(this)\n });\n }\n }, {\n key: 'clearSelection',\n value: function clearSelection() {\n if (this.trigger) {\n this.trigger.focus();\n }\n\n window.getSelection().removeAllRanges();\n }\n }, {\n key: 'destroy',\n value: function destroy() {\n this.removeFake();\n }\n }, {\n key: 'action',\n set: function set() {\n var action = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'copy';\n this._action = action;\n\n if (this._action !== 'copy' && this._action !== 'cut') {\n throw new Error('Invalid \"action\" value, use either \"copy\" or \"cut\"');\n }\n },\n get: function get() {\n return this._action;\n }\n }, {\n key: 'target',\n set: function set(target) {\n if (target !== undefined) {\n if (target && (typeof target === 'undefined' ? 'undefined' : _typeof(target)) === 'object' && target.nodeType === 1) {\n if (this.action === 'copy' && target.hasAttribute('disabled')) {\n throw new Error('Invalid \"target\" attribute. Please use \"readonly\" instead of \"disabled\" attribute');\n }\n\n if (this.action === 'cut' && (target.hasAttribute('readonly') || target.hasAttribute('disabled'))) {\n throw new Error('Invalid \"target\" attribute. You can\\'t cut text from elements with \"readonly\" or \"disabled\" attributes');\n }\n\n this._target = target;\n } else {\n throw new Error('Invalid \"target\" value, use a valid Element');\n }\n }\n },\n get: function get() {\n return this._target;\n }\n }]);\n\n return ClipboardAction;\n }();\n\n module.exports = ClipboardAction;\n });\n /***/\n\n },\n /* 1 */\n\n /***/\n function (module, exports, __webpack_require__) {\n var is = __webpack_require__(6);\n\n var delegate = __webpack_require__(5);\n /**\n * Validates all params and calls the right\n * listener function based on its target type.\n *\n * @param {String|HTMLElement|HTMLCollection|NodeList} target\n * @param {String} type\n * @param {Function} callback\n * @return {Object}\n */\n\n\n function listen(target, type, callback) {\n if (!target && !type && !callback) {\n throw new Error('Missing required arguments');\n }\n\n if (!is.string(type)) {\n throw new TypeError('Second argument must be a String');\n }\n\n if (!is.fn(callback)) {\n throw new TypeError('Third argument must be a Function');\n }\n\n if (is.node(target)) {\n return listenNode(target, type, callback);\n } else if (is.nodeList(target)) {\n return listenNodeList(target, type, callback);\n } else if (is.string(target)) {\n return listenSelector(target, type, callback);\n } else {\n throw new TypeError('First argument must be a String, HTMLElement, HTMLCollection, or NodeList');\n }\n }\n /**\n * Adds an event listener to a HTML element\n * and returns a remove listener function.\n *\n * @param {HTMLElement} node\n * @param {String} type\n * @param {Function} callback\n * @return {Object}\n */\n\n\n function listenNode(node, type, callback) {\n node.addEventListener(type, callback);\n return {\n destroy: function destroy() {\n node.removeEventListener(type, callback);\n }\n };\n }\n /**\n * Add an event listener to a list of HTML elements\n * and returns a remove listener function.\n *\n * @param {NodeList|HTMLCollection} nodeList\n * @param {String} type\n * @param {Function} callback\n * @return {Object}\n */\n\n\n function listenNodeList(nodeList, type, callback) {\n Array.prototype.forEach.call(nodeList, function (node) {\n node.addEventListener(type, callback);\n });\n return {\n destroy: function destroy() {\n Array.prototype.forEach.call(nodeList, function (node) {\n node.removeEventListener(type, callback);\n });\n }\n };\n }\n /**\n * Add an event listener to a selector\n * and returns a remove listener function.\n *\n * @param {String} selector\n * @param {String} type\n * @param {Function} callback\n * @return {Object}\n */\n\n\n function listenSelector(selector, type, callback) {\n return delegate(document.body, selector, type, callback);\n }\n\n module.exports = listen;\n /***/\n },\n /* 2 */\n\n /***/\n function (module, exports) {\n function E() {// Keep this empty so it's easier to inherit from\n // (via https://github.com/lipsmack from https://github.com/scottcorgan/tiny-emitter/issues/3)\n }\n\n E.prototype = {\n on: function on(name, callback, ctx) {\n var e = this.e || (this.e = {});\n (e[name] || (e[name] = [])).push({\n fn: callback,\n ctx: ctx\n });\n return this;\n },\n once: function once(name, callback, ctx) {\n var self = this;\n\n function listener() {\n self.off(name, listener);\n callback.apply(ctx, arguments);\n }\n\n ;\n listener._ = callback;\n return this.on(name, listener, ctx);\n },\n emit: function emit(name) {\n var data = [].slice.call(arguments, 1);\n var evtArr = ((this.e || (this.e = {}))[name] || []).slice();\n var i = 0;\n var len = evtArr.length;\n\n for (i; i < len; i++) {\n evtArr[i].fn.apply(evtArr[i].ctx, data);\n }\n\n return this;\n },\n off: function off(name, callback) {\n var e = this.e || (this.e = {});\n var evts = e[name];\n var liveEvents = [];\n\n if (evts && callback) {\n for (var i = 0, len = evts.length; i < len; i++) {\n if (evts[i].fn !== callback && evts[i].fn._ !== callback) liveEvents.push(evts[i]);\n }\n } // Remove event from queue to prevent memory leak\n // Suggested by https://github.com/lazd\n // Ref: https://github.com/scottcorgan/tiny-emitter/commit/c6ebfaa9bc973b33d110a84a307742b7cf94c953#commitcomment-5024910\n\n\n liveEvents.length ? e[name] = liveEvents : delete e[name];\n return this;\n }\n };\n module.exports = E;\n /***/\n },\n /* 3 */\n\n /***/\n function (module, exports, __webpack_require__) {\n var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;\n\n (function (global, factory) {\n if (true) {\n !(__WEBPACK_AMD_DEFINE_ARRAY__ = [module, __webpack_require__(0), __webpack_require__(2), __webpack_require__(1)], __WEBPACK_AMD_DEFINE_FACTORY__ = factory, __WEBPACK_AMD_DEFINE_RESULT__ = typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ? __WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__) : __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));\n } else { var mod; }\n })(this, function (module, _clipboardAction, _tinyEmitter, _goodListener) {\n 'use strict';\n\n var _clipboardAction2 = _interopRequireDefault(_clipboardAction);\n\n var _tinyEmitter2 = _interopRequireDefault(_tinyEmitter);\n\n var _goodListener2 = _interopRequireDefault(_goodListener);\n\n function _interopRequireDefault(obj) {\n return obj && obj.__esModule ? obj : {\n default: obj\n };\n }\n\n var _typeof = typeof Symbol === \"function\" && _typeof2(Symbol.iterator) === \"symbol\" ? function (obj) {\n return _typeof2(obj);\n } : function (obj) {\n return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : _typeof2(obj);\n };\n\n function _classCallCheck(instance, Constructor) {\n if (!(instance instanceof Constructor)) {\n throw new TypeError(\"Cannot call a class as a function\");\n }\n }\n\n var _createClass = function () {\n function defineProperties(target, props) {\n for (var i = 0; i < props.length; i++) {\n var descriptor = props[i];\n descriptor.enumerable = descriptor.enumerable || false;\n descriptor.configurable = true;\n if (\"value\" in descriptor) descriptor.writable = true;\n Object.defineProperty(target, descriptor.key, descriptor);\n }\n }\n\n return function (Constructor, protoProps, staticProps) {\n if (protoProps) defineProperties(Constructor.prototype, protoProps);\n if (staticProps) defineProperties(Constructor, staticProps);\n return Constructor;\n };\n }();\n\n function _possibleConstructorReturn(self, call) {\n if (!self) {\n throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\n }\n\n return call && (_typeof2(call) === \"object\" || typeof call === \"function\") ? call : self;\n }\n\n function _inherits(subClass, superClass) {\n if (typeof superClass !== \"function\" && superClass !== null) {\n throw new TypeError(\"Super expression must either be null or a function, not \" + _typeof2(superClass));\n }\n\n subClass.prototype = Object.create(superClass && superClass.prototype, {\n constructor: {\n value: subClass,\n enumerable: false,\n writable: true,\n configurable: true\n }\n });\n if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;\n }\n\n var Clipboard = function (_Emitter) {\n _inherits(Clipboard, _Emitter);\n /**\n * @param {String|HTMLElement|HTMLCollection|NodeList} trigger\n * @param {Object} options\n */\n\n\n function Clipboard(trigger, options) {\n _classCallCheck(this, Clipboard);\n\n var _this = _possibleConstructorReturn(this, (Clipboard.__proto__ || Object.getPrototypeOf(Clipboard)).call(this));\n\n _this.resolveOptions(options);\n\n _this.listenClick(trigger);\n\n return _this;\n }\n /**\n * Defines if attributes would be resolved using internal setter functions\n * or custom functions that were passed in the constructor.\n * @param {Object} options\n */\n\n\n _createClass(Clipboard, [{\n key: 'resolveOptions',\n value: function resolveOptions() {\n var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n this.action = typeof options.action === 'function' ? options.action : this.defaultAction;\n this.target = typeof options.target === 'function' ? options.target : this.defaultTarget;\n this.text = typeof options.text === 'function' ? options.text : this.defaultText;\n this.container = _typeof(options.container) === 'object' ? options.container : document.body;\n }\n }, {\n key: 'listenClick',\n value: function listenClick(trigger) {\n var _this2 = this;\n\n this.listener = (0, _goodListener2.default)(trigger, 'click', function (e) {\n return _this2.onClick(e);\n });\n }\n }, {\n key: 'onClick',\n value: function onClick(e) {\n var trigger = e.delegateTarget || e.currentTarget;\n\n if (this.clipboardAction) {\n this.clipboardAction = null;\n }\n\n this.clipboardAction = new _clipboardAction2.default({\n action: this.action(trigger),\n target: this.target(trigger),\n text: this.text(trigger),\n container: this.container,\n trigger: trigger,\n emitter: this\n });\n }\n }, {\n key: 'defaultAction',\n value: function defaultAction(trigger) {\n return getAttributeValue('action', trigger);\n }\n }, {\n key: 'defaultTarget',\n value: function defaultTarget(trigger) {\n var selector = getAttributeValue('target', trigger);\n\n if (selector) {\n return document.querySelector(selector);\n }\n }\n }, {\n key: 'defaultText',\n value: function defaultText(trigger) {\n return getAttributeValue('text', trigger);\n }\n }, {\n key: 'destroy',\n value: function destroy() {\n this.listener.destroy();\n\n if (this.clipboardAction) {\n this.clipboardAction.destroy();\n this.clipboardAction = null;\n }\n }\n }], [{\n key: 'isSupported',\n value: function isSupported() {\n var action = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ['copy', 'cut'];\n var actions = typeof action === 'string' ? [action] : action;\n var support = !!document.queryCommandSupported;\n actions.forEach(function (action) {\n support = support && !!document.queryCommandSupported(action);\n });\n return support;\n }\n }]);\n\n return Clipboard;\n }(_tinyEmitter2.default);\n /**\n * Helper function to retrieve attribute value.\n * @param {String} suffix\n * @param {Element} element\n */\n\n\n function getAttributeValue(suffix, element) {\n var attribute = 'data-clipboard-' + suffix;\n\n if (!element.hasAttribute(attribute)) {\n return;\n }\n\n return element.getAttribute(attribute);\n }\n\n module.exports = Clipboard;\n });\n /***/\n\n },\n /* 4 */\n\n /***/\n function (module, exports) {\n var DOCUMENT_NODE_TYPE = 9;\n /**\n * A polyfill for Element.matches()\n */\n\n if (typeof Element !== 'undefined' && !Element.prototype.matches) {\n var proto = Element.prototype;\n proto.matches = proto.matchesSelector || proto.mozMatchesSelector || proto.msMatchesSelector || proto.oMatchesSelector || proto.webkitMatchesSelector;\n }\n /**\n * Finds the closest parent that matches a selector.\n *\n * @param {Element} element\n * @param {String} selector\n * @return {Function}\n */\n\n\n function closest(element, selector) {\n while (element && element.nodeType !== DOCUMENT_NODE_TYPE) {\n if (typeof element.matches === 'function' && element.matches(selector)) {\n return element;\n }\n\n element = element.parentNode;\n }\n }\n\n module.exports = closest;\n /***/\n },\n /* 5 */\n\n /***/\n function (module, exports, __webpack_require__) {\n var closest = __webpack_require__(4);\n /**\n * Delegates event to a selector.\n *\n * @param {Element} element\n * @param {String} selector\n * @param {String} type\n * @param {Function} callback\n * @param {Boolean} useCapture\n * @return {Object}\n */\n\n\n function _delegate(element, selector, type, callback, useCapture) {\n var listenerFn = listener.apply(this, arguments);\n element.addEventListener(type, listenerFn, useCapture);\n return {\n destroy: function destroy() {\n element.removeEventListener(type, listenerFn, useCapture);\n }\n };\n }\n /**\n * Delegates event to a selector.\n *\n * @param {Element|String|Array} [elements]\n * @param {String} selector\n * @param {String} type\n * @param {Function} callback\n * @param {Boolean} useCapture\n * @return {Object}\n */\n\n\n function delegate(elements, selector, type, callback, useCapture) {\n // Handle the regular Element usage\n if (typeof elements.addEventListener === 'function') {\n return _delegate.apply(null, arguments);\n } // Handle Element-less usage, it defaults to global delegation\n\n\n if (typeof type === 'function') {\n // Use `document` as the first parameter, then apply arguments\n // This is a short way to .unshift `arguments` without running into deoptimizations\n return _delegate.bind(null, document).apply(null, arguments);\n } // Handle Selector-based usage\n\n\n if (typeof elements === 'string') {\n elements = document.querySelectorAll(elements);\n } // Handle Array-like based usage\n\n\n return Array.prototype.map.call(elements, function (element) {\n return _delegate(element, selector, type, callback, useCapture);\n });\n }\n /**\n * Finds closest match and invokes callback.\n *\n * @param {Element} element\n * @param {String} selector\n * @param {String} type\n * @param {Function} callback\n * @return {Function}\n */\n\n\n function listener(element, selector, type, callback) {\n return function (e) {\n e.delegateTarget = closest(e.target, selector);\n\n if (e.delegateTarget) {\n callback.call(element, e);\n }\n };\n }\n\n module.exports = delegate;\n /***/\n },\n /* 6 */\n\n /***/\n function (module, exports) {\n /**\n * Check if argument is a HTML element.\n *\n * @param {Object} value\n * @return {Boolean}\n */\n exports.node = function (value) {\n return value !== undefined && value instanceof HTMLElement && value.nodeType === 1;\n };\n /**\n * Check if argument is a list of HTML elements.\n *\n * @param {Object} value\n * @return {Boolean}\n */\n\n\n exports.nodeList = function (value) {\n var type = Object.prototype.toString.call(value);\n return value !== undefined && (type === '[object NodeList]' || type === '[object HTMLCollection]') && 'length' in value && (value.length === 0 || exports.node(value[0]));\n };\n /**\n * Check if argument is a string.\n *\n * @param {Object} value\n * @return {Boolean}\n */\n\n\n exports.string = function (value) {\n return typeof value === 'string' || value instanceof String;\n };\n /**\n * Check if argument is a function.\n *\n * @param {Object} value\n * @return {Boolean}\n */\n\n\n exports.fn = function (value) {\n var type = Object.prototype.toString.call(value);\n return type === '[object Function]';\n };\n /***/\n\n },\n /* 7 */\n\n /***/\n function (module, exports) {\n function select(element) {\n var selectedText;\n\n if (element.nodeName === 'SELECT') {\n element.focus();\n selectedText = element.value;\n } else if (element.nodeName === 'INPUT' || element.nodeName === 'TEXTAREA') {\n var isReadOnly = element.hasAttribute('readonly');\n\n if (!isReadOnly) {\n element.setAttribute('readonly', '');\n }\n\n element.select();\n element.setSelectionRange(0, element.value.length);\n\n if (!isReadOnly) {\n element.removeAttribute('readonly');\n }\n\n selectedText = element.value;\n } else {\n if (element.hasAttribute('contenteditable')) {\n element.focus();\n }\n\n var selection = window.getSelection();\n var range = document.createRange();\n range.selectNodeContents(element);\n selection.removeAllRanges();\n selection.addRange(range);\n selectedText = selection.toString();\n }\n\n return selectedText;\n }\n\n module.exports = select;\n /***/\n }])\n );\n});\n/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./../../webpack/buildin/module.js */ \"./node_modules/webpack/buildin/module.js\")(module)))\n\n//# sourceURL=webpack:///./node_modules/clipboard/dist/clipboard.js?")},"./node_modules/iframe-resizer/js/iframeResizer.contentWindow.min.js":function(module,exports,__webpack_require__){eval('function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }\n\n/*! iFrame Resizer (iframeSizer.contentWindow.min.js) - v3.6.6 - 2019-02-26\n * Desc: Include this file in any page being loaded into an iframe\n * to force the iframe to resize to the content size.\n * Requires: iframeResizer.min.js on host page.\n * Copyright: (c) 2019 David J. Bradshaw - dave@bradshaw.net\n * License: MIT\n */\n!function (d) {\n "use strict";\n\n if ("undefined" != typeof window) {\n var n = !0,\n i = 10,\n o = "",\n r = 0,\n a = "",\n t = null,\n u = "",\n c = !1,\n s = {\n resize: 1,\n click: 1\n },\n l = 128,\n f = !0,\n m = 1,\n g = "bodyOffset",\n h = g,\n p = !0,\n v = "",\n y = {},\n w = 32,\n e = null,\n b = !1,\n T = "[iFrameSizer]",\n E = T.length,\n S = "",\n O = {\n max: 1,\n min: 1,\n bodyScroll: 1,\n documentElementScroll: 1\n },\n M = "child",\n I = !0,\n N = window.parent,\n C = "*",\n k = 0,\n A = !1,\n x = null,\n z = 16,\n L = 1,\n R = "scroll",\n F = R,\n P = window,\n D = function D() {\n ue("MessageCallback function not defined");\n },\n q = function q() {},\n H = function H() {},\n W = {\n height: function height() {\n return ue("Custom height calculation function not defined"), document.documentElement.offsetHeight;\n },\n width: function width() {\n return ue("Custom width calculation function not defined"), document.body.scrollWidth;\n }\n },\n j = {},\n B = !1;\n\n try {\n var V = Object.create({}, {\n passive: {\n get: function get() {\n B = !0;\n }\n },\n once: {\n get: function get() {\n !0;\n }\n }\n });\n window.addEventListener("test", te, V), window.removeEventListener("test", te, V);\n } catch (e) {}\n\n var J,\n U,\n K,\n Q,\n X,\n Y,\n $,\n G = Date.now || function () {\n return new Date().getTime();\n },\n Z = {\n bodyOffset: function bodyOffset() {\n return document.body.offsetHeight + ye("marginTop") + ye("marginBottom");\n },\n offset: function offset() {\n return Z.bodyOffset();\n },\n bodyScroll: function bodyScroll() {\n return document.body.scrollHeight;\n },\n custom: function custom() {\n return W.height();\n },\n documentElementOffset: function documentElementOffset() {\n return document.documentElement.offsetHeight;\n },\n documentElementScroll: function documentElementScroll() {\n return document.documentElement.scrollHeight;\n },\n max: function max() {\n return Math.max.apply(null, be(Z));\n },\n min: function min() {\n return Math.min.apply(null, be(Z));\n },\n grow: function grow() {\n return Z.max();\n },\n lowestElement: function lowestElement() {\n return Math.max(Z.bodyOffset() || Z.documentElementOffset(), we("bottom", Ee()));\n },\n taggedElement: function taggedElement() {\n return Te("bottom", "data-iframe-height");\n }\n },\n _ = {\n bodyScroll: function bodyScroll() {\n return document.body.scrollWidth;\n },\n bodyOffset: function bodyOffset() {\n return document.body.offsetWidth;\n },\n custom: function custom() {\n return W.width();\n },\n documentElementScroll: function documentElementScroll() {\n return document.documentElement.scrollWidth;\n },\n documentElementOffset: function documentElementOffset() {\n return document.documentElement.offsetWidth;\n },\n scroll: function scroll() {\n return Math.max(_.bodyScroll(), _.documentElementScroll());\n },\n max: function max() {\n return Math.max.apply(null, be(_));\n },\n min: function min() {\n return Math.min.apply(null, be(_));\n },\n rightMostElement: function rightMostElement() {\n return we("right", Ee());\n },\n taggedElement: function taggedElement() {\n return Te("right", "data-iframe-width");\n }\n },\n ee = (J = Se, X = null, Y = 0, $ = function $() {\n Y = G(), X = null, Q = J.apply(U, K), X || (U = K = null);\n }, function () {\n var e = G();\n Y || (Y = e);\n var t = z - (e - Y);\n return U = this, K = arguments, t <= 0 || z < t ? (X && (clearTimeout(X), X = null), Y = e, Q = J.apply(U, K), X || (U = K = null)) : X || (X = setTimeout($, t)), Q;\n });\n\n ne(window, "message", ke), ne(window, "readystatechange", Ae), Ae();\n }\n\n function te() {}\n\n function ne(e, t, n, o) {\n "addEventListener" in window ? e.addEventListener(t, n, !!B && (o || {})) : "attachEvent" in window && e.attachEvent("on" + t, n);\n }\n\n function oe(e, t, n) {\n "removeEventListener" in window ? e.removeEventListener(t, n, !1) : "detachEvent" in window && e.detachEvent("on" + t, n);\n }\n\n function ie(e) {\n return e.charAt(0).toUpperCase() + e.slice(1);\n }\n\n function re(e) {\n return T + "[" + S + "] " + e;\n }\n\n function ae(e) {\n b && "object" == _typeof(window.console) && console.log(re(e));\n }\n\n function ue(e) {\n "object" == _typeof(window.console) && console.warn(re(e));\n }\n\n function ce() {\n var e;\n !function () {\n function e(e) {\n return "true" === e;\n }\n\n var t = v.substr(E).split(":");\n S = t[0], r = d !== t[1] ? Number(t[1]) : r, c = d !== t[2] ? e(t[2]) : c, b = d !== t[3] ? e(t[3]) : b, w = d !== t[4] ? Number(t[4]) : w, n = d !== t[6] ? e(t[6]) : n, a = t[7], h = d !== t[8] ? t[8] : h, o = t[9], u = t[10], k = d !== t[11] ? Number(t[11]) : k, y.enable = d !== t[12] && e(t[12]), M = d !== t[13] ? t[13] : M, F = d !== t[14] ? t[14] : F;\n }(), ae("Initialising iFrame (" + location.href + ")"), function () {\n function e(e, t) {\n return "function" == typeof e && (ae("Setup custom " + t + "CalcMethod"), W[t] = e, e = "custom"), e;\n }\n\n "iFrameResizer" in window && Object === window.iFrameResizer.constructor && (t = window.iFrameResizer, ae("Reading data from page: " + JSON.stringify(t)), D = "messageCallback" in t ? t.messageCallback : D, q = "readyCallback" in t ? t.readyCallback : q, C = "targetOrigin" in t ? t.targetOrigin : C, h = "heightCalculationMethod" in t ? t.heightCalculationMethod : h, F = "widthCalculationMethod" in t ? t.widthCalculationMethod : F, h = e(h, "height"), F = e(F, "width"));\n var t;\n ae("TargetOrigin for parent set to: " + C);\n }(), function () {\n d === a && (a = r + "px");\n se("margin", function (e, t) {\n -1 !== t.indexOf("-") && (ue("Negative CSS value ignored for " + e), t = "");\n return t;\n }("margin", a));\n }(), se("background", o), se("padding", u), (e = document.createElement("div")).style.clear = "both", e.style.display = "block", document.body.appendChild(e), me(), ge(), document.documentElement.style.height = "", document.body.style.height = "", ae(\'HTML & body height set to "auto"\'), ae("Enable public methods"), P.parentIFrame = {\n autoResize: function autoResize(e) {\n return !0 === e && !1 === n ? (n = !0, he()) : !1 === e && !0 === n && (n = !1, pe()), n;\n },\n close: function close() {\n Ce(0, 0, "close"), ae("Disable outgoing messages"), I = !1, ae("Remove event listener: Message"), oe(window, "message", ke), !0 === n && pe();\n },\n getId: function getId() {\n return S;\n },\n getPageInfo: function getPageInfo(e) {\n "function" == typeof e ? (H = e, Ce(0, 0, "pageInfo")) : (H = function H() {}, Ce(0, 0, "pageInfoStop"));\n },\n moveToAnchor: function moveToAnchor(e) {\n y.findTarget(e);\n },\n reset: function reset() {\n Ne("parentIFrame.reset");\n },\n scrollTo: function scrollTo(e, t) {\n Ce(t, e, "scrollTo");\n },\n scrollToOffset: function scrollToOffset(e, t) {\n Ce(t, e, "scrollToOffset");\n },\n sendMessage: function sendMessage(e, t) {\n Ce(0, 0, "message", JSON.stringify(e), t);\n },\n setHeightCalculationMethod: function setHeightCalculationMethod(e) {\n h = e, me();\n },\n setWidthCalculationMethod: function setWidthCalculationMethod(e) {\n F = e, ge();\n },\n setTargetOrigin: function setTargetOrigin(e) {\n ae("Set targetOrigin: " + e), C = e;\n },\n size: function size(e, t) {\n var n = (e || "") + (t ? "," + t : "");\n Oe("size", "parentIFrame.size(" + n + ")", e, t);\n }\n }, he(), y = function () {\n function r(e) {\n var t = e.getBoundingClientRect(),\n n = {\n x: window.pageXOffset !== d ? window.pageXOffset : document.documentElement.scrollLeft,\n y: window.pageYOffset !== d ? window.pageYOffset : document.documentElement.scrollTop\n };\n return {\n x: parseInt(t.left, 10) + parseInt(n.x, 10),\n y: parseInt(t.top, 10) + parseInt(n.y, 10)\n };\n }\n\n function n(e) {\n var t,\n n = e.split("#")[1] || e,\n o = decodeURIComponent(n),\n i = document.getElementById(o) || document.getElementsByName(o)[0];\n d !== i ? (t = r(i), ae("Moving to in page link (#" + n + ") at x: " + t.x + " y: " + t.y), Ce(t.y, t.x, "scrollToOffset")) : (ae("In page link (#" + n + ") not found in iFrame, so sending to parent"), Ce(0, 0, "inPageLink", "#" + n));\n }\n\n function e() {\n "" !== location.hash && "#" !== location.hash && n(location.href);\n }\n\n function t() {\n Array.prototype.forEach.call(document.querySelectorAll(\'a[href^="#"]\'), function (e) {\n function t(e) {\n e.preventDefault(), n(this.getAttribute("href"));\n }\n\n "#" !== e.getAttribute("href") && ne(e, "click", t);\n });\n }\n\n y.enable ? Array.prototype.forEach && document.querySelectorAll ? (ae("Setting up location.hash handlers"), t(), ne(window, "hashchange", e), setTimeout(e, l)) : ue("In page linking not fully supported in this browser! (See README.md for IE8 workaround)") : ae("In page linking not enabled");\n return {\n findTarget: n\n };\n }(), Oe("init", "Init message from host page"), q();\n }\n\n function se(e, t) {\n d !== t && "" !== t && "null" !== t && ae("Body " + e + \' set to "\' + (document.body.style[e] = t) + \'"\');\n }\n\n function le(n) {\n var e = {\n add: function add(e) {\n function t() {\n Oe(n.eventName, n.eventType);\n }\n\n j[e] = t, ne(window, e, t, {\n passive: !0\n });\n },\n remove: function remove(e) {\n var t = j[e];\n delete j[e], oe(window, e, t);\n }\n };\n n.eventNames && Array.prototype.map ? (n.eventName = n.eventNames[0], n.eventNames.map(e[n.method])) : e[n.method](n.eventName), ae(ie(n.method) + " event listener: " + n.eventType);\n }\n\n function de(e) {\n le({\n method: e,\n eventType: "Animation Start",\n eventNames: ["animationstart", "webkitAnimationStart"]\n }), le({\n method: e,\n eventType: "Animation Iteration",\n eventNames: ["animationiteration", "webkitAnimationIteration"]\n }), le({\n method: e,\n eventType: "Animation End",\n eventNames: ["animationend", "webkitAnimationEnd"]\n }), le({\n method: e,\n eventType: "Input",\n eventName: "input"\n }), le({\n method: e,\n eventType: "Mouse Up",\n eventName: "mouseup"\n }), le({\n method: e,\n eventType: "Mouse Down",\n eventName: "mousedown"\n }), le({\n method: e,\n eventType: "Orientation Change",\n eventName: "orientationchange"\n }), le({\n method: e,\n eventType: "Print",\n eventName: ["afterprint", "beforeprint"]\n }), le({\n method: e,\n eventType: "Ready State Change",\n eventName: "readystatechange"\n }), le({\n method: e,\n eventType: "Touch Start",\n eventName: "touchstart"\n }), le({\n method: e,\n eventType: "Touch End",\n eventName: "touchend"\n }), le({\n method: e,\n eventType: "Touch Cancel",\n eventName: "touchcancel"\n }), le({\n method: e,\n eventType: "Transition Start",\n eventNames: ["transitionstart", "webkitTransitionStart", "MSTransitionStart", "oTransitionStart", "otransitionstart"]\n }), le({\n method: e,\n eventType: "Transition Iteration",\n eventNames: ["transitioniteration", "webkitTransitionIteration", "MSTransitionIteration", "oTransitionIteration", "otransitioniteration"]\n }), le({\n method: e,\n eventType: "Transition End",\n eventNames: ["transitionend", "webkitTransitionEnd", "MSTransitionEnd", "oTransitionEnd", "otransitionend"]\n }), "child" === M && le({\n method: e,\n eventType: "IFrame Resized",\n eventName: "resize"\n });\n }\n\n function fe(e, t, n, o) {\n return t !== e && (e in n || (ue(e + " is not a valid option for " + o + "CalculationMethod."), e = t), ae(o + \' calculation method set to "\' + e + \'"\')), e;\n }\n\n function me() {\n h = fe(h, g, Z, "height");\n }\n\n function ge() {\n F = fe(F, R, _, "width");\n }\n\n function he() {\n var e;\n !0 === n ? (de("add"), e = w < 0, window.MutationObserver || window.WebKitMutationObserver ? e ? ve() : t = function () {\n function t(e) {\n function t(e) {\n !1 === e.complete && (ae("Attach listeners to " + e.src), e.addEventListener("load", i, !1), e.addEventListener("error", r, !1), c.push(e));\n }\n\n "attributes" === e.type && "src" === e.attributeName ? t(e.target) : "childList" === e.type && Array.prototype.forEach.call(e.target.querySelectorAll("img"), t);\n }\n\n function o(e) {\n var t;\n ae("Remove listeners from " + e.src), e.removeEventListener("load", i, !1), e.removeEventListener("error", r, !1), t = e, c.splice(c.indexOf(t), 1);\n }\n\n function n(e, t, n) {\n o(e.target), Oe(t, n + ": " + e.target.src, d, d);\n }\n\n function i(e) {\n n(e, "imageLoad", "Image loaded");\n }\n\n function r(e) {\n n(e, "imageLoadFailed", "Image load failed");\n }\n\n function e(e) {\n Oe("mutationObserver", "mutationObserver: " + e[0].target + " " + e[0].type), e.forEach(t);\n }\n\n var a,\n u,\n c = [],\n s = window.MutationObserver || window.WebKitMutationObserver,\n l = (a = document.querySelector("body"), u = {\n attributes: !0,\n attributeOldValue: !1,\n characterData: !0,\n characterDataOldValue: !1,\n childList: !0,\n subtree: !0\n }, l = new s(e), ae("Create body MutationObserver"), l.observe(a, u), l);\n return {\n disconnect: function disconnect() {\n "disconnect" in l && (ae("Disconnect body MutationObserver"), l.disconnect(), c.forEach(o));\n }\n };\n }() : (ae("MutationObserver not supported in this browser!"), ve())) : ae("Auto Resize disabled");\n }\n\n function pe() {\n de("remove"), null !== t && t.disconnect(), clearInterval(e);\n }\n\n function ve() {\n 0 !== w && (ae("setInterval: " + w + "ms"), e = setInterval(function () {\n Oe("interval", "setInterval: " + w);\n }, Math.abs(w)));\n }\n\n function ye(e, o) {\n var t = 0;\n return o = o || document.body, t = "defaultView" in document && "getComputedStyle" in document.defaultView ? null !== (t = document.defaultView.getComputedStyle(o, null)) ? t[e] : 0 : function (e) {\n if (/^\\d+(px)?$/i.test(e)) return parseInt(e, i);\n var t = o.style.left,\n n = o.runtimeStyle.left;\n return o.runtimeStyle.left = o.currentStyle.left, o.style.left = e || 0, e = o.style.pixelLeft, o.style.left = t, o.runtimeStyle.left = n, e;\n }(o.currentStyle[e]), parseInt(t, i);\n }\n\n function we(e, t) {\n for (var n, o = t.length, i = 0, r = 0, a = ie(e), u = G(), c = 0; c < o; c++) {\n r < (i = t[c].getBoundingClientRect()[e] + ye("margin" + a, t[c])) && (r = i);\n }\n\n return u = G() - u, ae("Parsed " + o + " HTML elements"), ae("Element position calculated in " + u + "ms"), z / 2 < (n = u) && ae("Event throttle increased to " + (z = 2 * n) + "ms"), r;\n }\n\n function be(e) {\n return [e.bodyOffset(), e.bodyScroll(), e.documentElementOffset(), e.documentElementScroll()];\n }\n\n function Te(e, t) {\n var n = document.querySelectorAll("[" + t + "]");\n return 0 === n.length && (ue("No tagged elements (" + t + ") found on page"), document.querySelectorAll("body *")), we(e, n);\n }\n\n function Ee() {\n return document.querySelectorAll("body *");\n }\n\n function Se(e, t, n, o) {\n var i, r;\n !function () {\n function e(e, t) {\n return !(Math.abs(e - t) <= k);\n }\n\n return i = d !== n ? n : Z[h](), r = d !== o ? o : _[F](), e(m, i) || c && e(L, r);\n }() && "init" !== e ? e in {\n init: 1,\n interval: 1,\n size: 1\n } || !(h in O || c && F in O) ? e in {\n interval: 1\n } || ae("No change in size detected") : Ne(t) : (Me(), Ce(m = i, L = r, e));\n }\n\n function Oe(e, t, n, o) {\n A && e in s ? ae("Trigger event cancelled: " + e) : (e in {\n reset: 1,\n resetPage: 1,\n init: 1\n } || ae("Trigger event: " + t), "init" === e ? Se(e, t, n, o) : ee(e, t, n, o));\n }\n\n function Me() {\n A || (A = !0, ae("Trigger event lock on")), clearTimeout(x), x = setTimeout(function () {\n A = !1, ae("Trigger event lock off"), ae("--");\n }, l);\n }\n\n function Ie(e) {\n m = Z[h](), L = _[F](), Ce(m, L, e);\n }\n\n function Ne(e) {\n var t = h;\n h = g, ae("Reset trigger event: " + e), Me(), Ie("reset"), h = t;\n }\n\n function Ce(e, t, n, o, i) {\n var r;\n !0 === I && (d === i ? i = C : ae("Message targetOrigin: " + i), ae("Sending message to host page (" + (r = S + ":" + e + ":" + t + ":" + n + (d !== o ? ":" + o : "")) + ")"), N.postMessage(T + r, i));\n }\n\n function ke(t) {\n var n = {\n init: function init() {\n v = t.data, N = t.source, ce(), f = !1, setTimeout(function () {\n p = !1;\n }, l);\n },\n reset: function reset() {\n p ? ae("Page reset ignored by init") : (ae("Page size reset by host page"), Ie("resetPage"));\n },\n resize: function resize() {\n Oe("resizeParent", "Parent window requested size check");\n },\n moveToAnchor: function moveToAnchor() {\n y.findTarget(i());\n },\n inPageLink: function inPageLink() {\n this.moveToAnchor();\n },\n pageInfo: function pageInfo() {\n var e = i();\n ae("PageInfoFromParent called from parent: " + e), H(JSON.parse(e)), ae(" --");\n },\n message: function message() {\n var e = i();\n ae("MessageCallback called from parent: " + e), D(JSON.parse(e)), ae(" --");\n }\n };\n\n function o() {\n return t.data.split("]")[1].split(":")[0];\n }\n\n function i() {\n return t.data.substr(t.data.indexOf(":") + 1);\n }\n\n function r() {\n return t.data.split(":")[2] in {\n true: 1,\n false: 1\n };\n }\n\n function e() {\n var e = o();\n e in n ? n[e]() : ( false || !module.exports) && "iFrameResize" in window || "jQuery" in window && "iFrameResize" in window.jQuery.prototype || r() || ue("Unexpected message (" + t.data + ")");\n }\n\n T === ("" + t.data).substr(0, E) && (!1 === f ? e() : r() ? n.init() : ae(\'Ignored message of type "\' + o() + \'". Received before initialization.\'));\n }\n\n function Ae() {\n "loading" !== document.readyState && window.parent.postMessage("[iFrameResizerChild]Ready", "*");\n }\n}();\n\n//# sourceURL=webpack:///./node_modules/iframe-resizer/js/iframeResizer.contentWindow.min.js?')},"./node_modules/js-cookie/src/js.cookie.js":function(module,exports,__webpack_require__){eval("var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_RESULT__;function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n/*!\n * JavaScript Cookie v2.2.0\n * https://github.com/js-cookie/js-cookie\n *\n * Copyright 2006, 2015 Klaus Hartl & Fagner Brack\n * Released under the MIT license\n */\n;\n\n(function (factory) {\n var registeredInModuleLoader = false;\n\n if (true) {\n !(__WEBPACK_AMD_DEFINE_FACTORY__ = (factory),\n\t\t\t\t__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?\n\t\t\t\t(__WEBPACK_AMD_DEFINE_FACTORY__.call(exports, __webpack_require__, exports, module)) :\n\t\t\t\t__WEBPACK_AMD_DEFINE_FACTORY__),\n\t\t\t\t__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));\n registeredInModuleLoader = true;\n }\n\n if (( false ? undefined : _typeof(exports)) === 'object') {\n module.exports = factory();\n registeredInModuleLoader = true;\n }\n\n if (!registeredInModuleLoader) {\n var OldCookies = window.Cookies;\n var api = window.Cookies = factory();\n\n api.noConflict = function () {\n window.Cookies = OldCookies;\n return api;\n };\n }\n})(function () {\n function extend() {\n var i = 0;\n var result = {};\n\n for (; i < arguments.length; i++) {\n var attributes = arguments[i];\n\n for (var key in attributes) {\n result[key] = attributes[key];\n }\n }\n\n return result;\n }\n\n function init(converter) {\n function api(key, value, attributes) {\n var result;\n\n if (typeof document === 'undefined') {\n return;\n } // Write\n\n\n if (arguments.length > 1) {\n attributes = extend({\n path: '/'\n }, api.defaults, attributes);\n\n if (typeof attributes.expires === 'number') {\n var expires = new Date();\n expires.setMilliseconds(expires.getMilliseconds() + attributes.expires * 864e+5);\n attributes.expires = expires;\n } // We're using \"expires\" because \"max-age\" is not supported by IE\n\n\n attributes.expires = attributes.expires ? attributes.expires.toUTCString() : '';\n\n try {\n result = JSON.stringify(value);\n\n if (/^[\\{\\[]/.test(result)) {\n value = result;\n }\n } catch (e) {}\n\n if (!converter.write) {\n value = encodeURIComponent(String(value)).replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g, decodeURIComponent);\n } else {\n value = converter.write(value, key);\n }\n\n key = encodeURIComponent(String(key));\n key = key.replace(/%(23|24|26|2B|5E|60|7C)/g, decodeURIComponent);\n key = key.replace(/[\\(\\)]/g, escape);\n var stringifiedAttributes = '';\n\n for (var attributeName in attributes) {\n if (!attributes[attributeName]) {\n continue;\n }\n\n stringifiedAttributes += '; ' + attributeName;\n\n if (attributes[attributeName] === true) {\n continue;\n }\n\n stringifiedAttributes += '=' + attributes[attributeName];\n }\n\n return document.cookie = key + '=' + value + stringifiedAttributes;\n } // Read\n\n\n if (!key) {\n result = {};\n } // To prevent the for loop in the first place assign an empty array\n // in case there are no cookies at all. Also prevents odd result when\n // calling \"get()\"\n\n\n var cookies = document.cookie ? document.cookie.split('; ') : [];\n var rdecode = /(%[0-9A-Z]{2})+/g;\n var i = 0;\n\n for (; i < cookies.length; i++) {\n var parts = cookies[i].split('=');\n var cookie = parts.slice(1).join('=');\n\n if (!this.json && cookie.charAt(0) === '\"') {\n cookie = cookie.slice(1, -1);\n }\n\n try {\n var name = parts[0].replace(rdecode, decodeURIComponent);\n cookie = converter.read ? converter.read(cookie, name) : converter(cookie, name) || cookie.replace(rdecode, decodeURIComponent);\n\n if (this.json) {\n try {\n cookie = JSON.parse(cookie);\n } catch (e) {}\n }\n\n if (key === name) {\n result = cookie;\n break;\n }\n\n if (!key) {\n result[name] = cookie;\n }\n } catch (e) {}\n }\n\n return result;\n }\n\n api.set = api;\n\n api.get = function (key) {\n return api.call(api, key);\n };\n\n api.getJSON = function () {\n return api.apply({\n json: true\n }, [].slice.call(arguments));\n };\n\n api.defaults = {};\n\n api.remove = function (key, attributes) {\n api(key, '', extend(attributes, {\n expires: -1\n }));\n };\n\n api.withConverter = init;\n return api;\n }\n\n return init(function () {});\n});\n\n//# sourceURL=webpack:///./node_modules/js-cookie/src/js.cookie.js?")},"./node_modules/mousetrap/mousetrap.js":function(module,exports,__webpack_require__){eval("var __WEBPACK_AMD_DEFINE_RESULT__;/*global define:false */\n\n/**\n * Copyright 2012-2017 Craig Campbell\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * Mousetrap is a simple keyboard shortcut library for Javascript with\n * no external dependencies\n *\n * @version 1.6.2\n * @url craig.is/killing/mice\n */\n(function (window, document, undefined) {\n // Check if mousetrap is used inside browser, if not, return\n if (!window) {\n return;\n }\n /**\n * mapping of special keycodes to their corresponding keys\n *\n * everything in this dictionary cannot use keypress events\n * so it has to be here to map to the correct keycodes for\n * keyup/keydown events\n *\n * @type {Object}\n */\n\n\n var _MAP = {\n 8: 'backspace',\n 9: 'tab',\n 13: 'enter',\n 16: 'shift',\n 17: 'ctrl',\n 18: 'alt',\n 20: 'capslock',\n 27: 'esc',\n 32: 'space',\n 33: 'pageup',\n 34: 'pagedown',\n 35: 'end',\n 36: 'home',\n 37: 'left',\n 38: 'up',\n 39: 'right',\n 40: 'down',\n 45: 'ins',\n 46: 'del',\n 91: 'meta',\n 93: 'meta',\n 224: 'meta'\n };\n /**\n * mapping for special characters so they can support\n *\n * this dictionary is only used incase you want to bind a\n * keyup or keydown event to one of these keys\n *\n * @type {Object}\n */\n\n var _KEYCODE_MAP = {\n 106: '*',\n 107: '+',\n 109: '-',\n 110: '.',\n 111: '/',\n 186: ';',\n 187: '=',\n 188: ',',\n 189: '-',\n 190: '.',\n 191: '/',\n 192: '`',\n 219: '[',\n 220: '\\\\',\n 221: ']',\n 222: '\\''\n };\n /**\n * this is a mapping of keys that require shift on a US keypad\n * back to the non shift equivelents\n *\n * this is so you can use keyup events with these keys\n *\n * note that this will only work reliably on US keyboards\n *\n * @type {Object}\n */\n\n var _SHIFT_MAP = {\n '~': '`',\n '!': '1',\n '@': '2',\n '#': '3',\n '$': '4',\n '%': '5',\n '^': '6',\n '&': '7',\n '*': '8',\n '(': '9',\n ')': '0',\n '_': '-',\n '+': '=',\n ':': ';',\n '\\\"': '\\'',\n '<': ',',\n '>': '.',\n '?': '/',\n '|': '\\\\'\n };\n /**\n * this is a list of special strings you can use to map\n * to modifier keys when you specify your keyboard shortcuts\n *\n * @type {Object}\n */\n\n var _SPECIAL_ALIASES = {\n 'option': 'alt',\n 'command': 'meta',\n 'return': 'enter',\n 'escape': 'esc',\n 'plus': '+',\n 'mod': /Mac|iPod|iPhone|iPad/.test(navigator.platform) ? 'meta' : 'ctrl'\n };\n /**\n * variable to store the flipped version of _MAP from above\n * needed to check if we should use keypress or not when no action\n * is specified\n *\n * @type {Object|undefined}\n */\n\n var _REVERSE_MAP;\n /**\n * loop through the f keys, f1 to f19 and add them to the map\n * programatically\n */\n\n\n for (var i = 1; i < 20; ++i) {\n _MAP[111 + i] = 'f' + i;\n }\n /**\n * loop through to map numbers on the numeric keypad\n */\n\n\n for (i = 0; i <= 9; ++i) {\n // This needs to use a string cause otherwise since 0 is falsey\n // mousetrap will never fire for numpad 0 pressed as part of a keydown\n // event.\n //\n // @see https://github.com/ccampbell/mousetrap/pull/258\n _MAP[i + 96] = i.toString();\n }\n /**\n * cross browser add event method\n *\n * @param {Element|HTMLDocument} object\n * @param {string} type\n * @param {Function} callback\n * @returns void\n */\n\n\n function _addEvent(object, type, callback) {\n if (object.addEventListener) {\n object.addEventListener(type, callback, false);\n return;\n }\n\n object.attachEvent('on' + type, callback);\n }\n /**\n * takes the event and returns the key character\n *\n * @param {Event} e\n * @return {string}\n */\n\n\n function _characterFromEvent(e) {\n // for keypress events we should return the character as is\n if (e.type == 'keypress') {\n var character = String.fromCharCode(e.which); // if the shift key is not pressed then it is safe to assume\n // that we want the character to be lowercase. this means if\n // you accidentally have caps lock on then your key bindings\n // will continue to work\n //\n // the only side effect that might not be desired is if you\n // bind something like 'A' cause you want to trigger an\n // event when capital A is pressed caps lock will no longer\n // trigger the event. shift+a will though.\n\n if (!e.shiftKey) {\n character = character.toLowerCase();\n }\n\n return character;\n } // for non keypress events the special maps are needed\n\n\n if (_MAP[e.which]) {\n return _MAP[e.which];\n }\n\n if (_KEYCODE_MAP[e.which]) {\n return _KEYCODE_MAP[e.which];\n } // if it is not in the special map\n // with keydown and keyup events the character seems to always\n // come in as an uppercase character whether you are pressing shift\n // or not. we should make sure it is always lowercase for comparisons\n\n\n return String.fromCharCode(e.which).toLowerCase();\n }\n /**\n * checks if two arrays are equal\n *\n * @param {Array} modifiers1\n * @param {Array} modifiers2\n * @returns {boolean}\n */\n\n\n function _modifiersMatch(modifiers1, modifiers2) {\n return modifiers1.sort().join(',') === modifiers2.sort().join(',');\n }\n /**\n * takes a key event and figures out what the modifiers are\n *\n * @param {Event} e\n * @returns {Array}\n */\n\n\n function _eventModifiers(e) {\n var modifiers = [];\n\n if (e.shiftKey) {\n modifiers.push('shift');\n }\n\n if (e.altKey) {\n modifiers.push('alt');\n }\n\n if (e.ctrlKey) {\n modifiers.push('ctrl');\n }\n\n if (e.metaKey) {\n modifiers.push('meta');\n }\n\n return modifiers;\n }\n /**\n * prevents default for this event\n *\n * @param {Event} e\n * @returns void\n */\n\n\n function _preventDefault(e) {\n if (e.preventDefault) {\n e.preventDefault();\n return;\n }\n\n e.returnValue = false;\n }\n /**\n * stops propogation for this event\n *\n * @param {Event} e\n * @returns void\n */\n\n\n function _stopPropagation(e) {\n if (e.stopPropagation) {\n e.stopPropagation();\n return;\n }\n\n e.cancelBubble = true;\n }\n /**\n * determines if the keycode specified is a modifier key or not\n *\n * @param {string} key\n * @returns {boolean}\n */\n\n\n function _isModifier(key) {\n return key == 'shift' || key == 'ctrl' || key == 'alt' || key == 'meta';\n }\n /**\n * reverses the map lookup so that we can look for specific keys\n * to see what can and can't use keypress\n *\n * @return {Object}\n */\n\n\n function _getReverseMap() {\n if (!_REVERSE_MAP) {\n _REVERSE_MAP = {};\n\n for (var key in _MAP) {\n // pull out the numeric keypad from here cause keypress should\n // be able to detect the keys from the character\n if (key > 95 && key < 112) {\n continue;\n }\n\n if (_MAP.hasOwnProperty(key)) {\n _REVERSE_MAP[_MAP[key]] = key;\n }\n }\n }\n\n return _REVERSE_MAP;\n }\n /**\n * picks the best action based on the key combination\n *\n * @param {string} key - character for key\n * @param {Array} modifiers\n * @param {string=} action passed in\n */\n\n\n function _pickBestAction(key, modifiers, action) {\n // if no action was picked in we should try to pick the one\n // that we think would work best for this key\n if (!action) {\n action = _getReverseMap()[key] ? 'keydown' : 'keypress';\n } // modifier keys don't work as expected with keypress,\n // switch to keydown\n\n\n if (action == 'keypress' && modifiers.length) {\n action = 'keydown';\n }\n\n return action;\n }\n /**\n * Converts from a string key combination to an array\n *\n * @param {string} combination like \"command+shift+l\"\n * @return {Array}\n */\n\n\n function _keysFromString(combination) {\n if (combination === '+') {\n return ['+'];\n }\n\n combination = combination.replace(/\\+{2}/g, '+plus');\n return combination.split('+');\n }\n /**\n * Gets info for a specific key combination\n *\n * @param {string} combination key combination (\"command+s\" or \"a\" or \"*\")\n * @param {string=} action\n * @returns {Object}\n */\n\n\n function _getKeyInfo(combination, action) {\n var keys;\n var key;\n var i;\n var modifiers = []; // take the keys from this pattern and figure out what the actual\n // pattern is all about\n\n keys = _keysFromString(combination);\n\n for (i = 0; i < keys.length; ++i) {\n key = keys[i]; // normalize key names\n\n if (_SPECIAL_ALIASES[key]) {\n key = _SPECIAL_ALIASES[key];\n } // if this is not a keypress event then we should\n // be smart about using shift keys\n // this will only work for US keyboards however\n\n\n if (action && action != 'keypress' && _SHIFT_MAP[key]) {\n key = _SHIFT_MAP[key];\n modifiers.push('shift');\n } // if this key is a modifier then add it to the list of modifiers\n\n\n if (_isModifier(key)) {\n modifiers.push(key);\n }\n } // depending on what the key combination is\n // we will try to pick the best event for it\n\n\n action = _pickBestAction(key, modifiers, action);\n return {\n key: key,\n modifiers: modifiers,\n action: action\n };\n }\n\n function _belongsTo(element, ancestor) {\n if (element === null || element === document) {\n return false;\n }\n\n if (element === ancestor) {\n return true;\n }\n\n return _belongsTo(element.parentNode, ancestor);\n }\n\n function Mousetrap(targetElement) {\n var self = this;\n targetElement = targetElement || document;\n\n if (!(self instanceof Mousetrap)) {\n return new Mousetrap(targetElement);\n }\n /**\n * element to attach key events to\n *\n * @type {Element}\n */\n\n\n self.target = targetElement;\n /**\n * a list of all the callbacks setup via Mousetrap.bind()\n *\n * @type {Object}\n */\n\n self._callbacks = {};\n /**\n * direct map of string combinations to callbacks used for trigger()\n *\n * @type {Object}\n */\n\n self._directMap = {};\n /**\n * keeps track of what level each sequence is at since multiple\n * sequences can start out with the same sequence\n *\n * @type {Object}\n */\n\n var _sequenceLevels = {};\n /**\n * variable to store the setTimeout call\n *\n * @type {null|number}\n */\n\n var _resetTimer;\n /**\n * temporary state where we will ignore the next keyup\n *\n * @type {boolean|string}\n */\n\n\n var _ignoreNextKeyup = false;\n /**\n * temporary state where we will ignore the next keypress\n *\n * @type {boolean}\n */\n\n var _ignoreNextKeypress = false;\n /**\n * are we currently inside of a sequence?\n * type of action (\"keyup\" or \"keydown\" or \"keypress\") or false\n *\n * @type {boolean|string}\n */\n\n var _nextExpectedAction = false;\n /**\n * resets all sequence counters except for the ones passed in\n *\n * @param {Object} doNotReset\n * @returns void\n */\n\n function _resetSequences(doNotReset) {\n doNotReset = doNotReset || {};\n var activeSequences = false,\n key;\n\n for (key in _sequenceLevels) {\n if (doNotReset[key]) {\n activeSequences = true;\n continue;\n }\n\n _sequenceLevels[key] = 0;\n }\n\n if (!activeSequences) {\n _nextExpectedAction = false;\n }\n }\n /**\n * finds all callbacks that match based on the keycode, modifiers,\n * and action\n *\n * @param {string} character\n * @param {Array} modifiers\n * @param {Event|Object} e\n * @param {string=} sequenceName - name of the sequence we are looking for\n * @param {string=} combination\n * @param {number=} level\n * @returns {Array}\n */\n\n\n function _getMatches(character, modifiers, e, sequenceName, combination, level) {\n var i;\n var callback;\n var matches = [];\n var action = e.type; // if there are no events related to this keycode\n\n if (!self._callbacks[character]) {\n return [];\n } // if a modifier key is coming up on its own we should allow it\n\n\n if (action == 'keyup' && _isModifier(character)) {\n modifiers = [character];\n } // loop through all callbacks for the key that was pressed\n // and see if any of them match\n\n\n for (i = 0; i < self._callbacks[character].length; ++i) {\n callback = self._callbacks[character][i]; // if a sequence name is not specified, but this is a sequence at\n // the wrong level then move onto the next match\n\n if (!sequenceName && callback.seq && _sequenceLevels[callback.seq] != callback.level) {\n continue;\n } // if the action we are looking for doesn't match the action we got\n // then we should keep going\n\n\n if (action != callback.action) {\n continue;\n } // if this is a keypress event and the meta key and control key\n // are not pressed that means that we need to only look at the\n // character, otherwise check the modifiers as well\n //\n // chrome will not fire a keypress if meta or control is down\n // safari will fire a keypress if meta or meta+shift is down\n // firefox will fire a keypress if meta or control is down\n\n\n if (action == 'keypress' && !e.metaKey && !e.ctrlKey || _modifiersMatch(modifiers, callback.modifiers)) {\n // when you bind a combination or sequence a second time it\n // should overwrite the first one. if a sequenceName or\n // combination is specified in this call it does just that\n //\n // @todo make deleting its own method?\n var deleteCombo = !sequenceName && callback.combo == combination;\n var deleteSequence = sequenceName && callback.seq == sequenceName && callback.level == level;\n\n if (deleteCombo || deleteSequence) {\n self._callbacks[character].splice(i, 1);\n }\n\n matches.push(callback);\n }\n }\n\n return matches;\n }\n /**\n * actually calls the callback function\n *\n * if your callback function returns false this will use the jquery\n * convention - prevent default and stop propogation on the event\n *\n * @param {Function} callback\n * @param {Event} e\n * @returns void\n */\n\n\n function _fireCallback(callback, e, combo, sequence) {\n // if this event should not happen stop here\n if (self.stopCallback(e, e.target || e.srcElement, combo, sequence)) {\n return;\n }\n\n if (callback(e, combo) === false) {\n _preventDefault(e);\n\n _stopPropagation(e);\n }\n }\n /**\n * handles a character key event\n *\n * @param {string} character\n * @param {Array} modifiers\n * @param {Event} e\n * @returns void\n */\n\n\n self._handleKey = function (character, modifiers, e) {\n var callbacks = _getMatches(character, modifiers, e);\n\n var i;\n var doNotReset = {};\n var maxLevel = 0;\n var processedSequenceCallback = false; // Calculate the maxLevel for sequences so we can only execute the longest callback sequence\n\n for (i = 0; i < callbacks.length; ++i) {\n if (callbacks[i].seq) {\n maxLevel = Math.max(maxLevel, callbacks[i].level);\n }\n } // loop through matching callbacks for this key event\n\n\n for (i = 0; i < callbacks.length; ++i) {\n // fire for all sequence callbacks\n // this is because if for example you have multiple sequences\n // bound such as \"g i\" and \"g t\" they both need to fire the\n // callback for matching g cause otherwise you can only ever\n // match the first one\n if (callbacks[i].seq) {\n // only fire callbacks for the maxLevel to prevent\n // subsequences from also firing\n //\n // for example 'a option b' should not cause 'option b' to fire\n // even though 'option b' is part of the other sequence\n //\n // any sequences that do not match here will be discarded\n // below by the _resetSequences call\n if (callbacks[i].level != maxLevel) {\n continue;\n }\n\n processedSequenceCallback = true; // keep a list of which sequences were matches for later\n\n doNotReset[callbacks[i].seq] = 1;\n\n _fireCallback(callbacks[i].callback, e, callbacks[i].combo, callbacks[i].seq);\n\n continue;\n } // if there were no sequence matches but we are still here\n // that means this is a regular match so we should fire that\n\n\n if (!processedSequenceCallback) {\n _fireCallback(callbacks[i].callback, e, callbacks[i].combo);\n }\n } // if the key you pressed matches the type of sequence without\n // being a modifier (ie \"keyup\" or \"keypress\") then we should\n // reset all sequences that were not matched by this event\n //\n // this is so, for example, if you have the sequence \"h a t\" and you\n // type \"h e a r t\" it does not match. in this case the \"e\" will\n // cause the sequence to reset\n //\n // modifier keys are ignored because you can have a sequence\n // that contains modifiers such as \"enter ctrl+space\" and in most\n // cases the modifier key will be pressed before the next key\n //\n // also if you have a sequence such as \"ctrl+b a\" then pressing the\n // \"b\" key will trigger a \"keypress\" and a \"keydown\"\n //\n // the \"keydown\" is expected when there is a modifier, but the\n // \"keypress\" ends up matching the _nextExpectedAction since it occurs\n // after and that causes the sequence to reset\n //\n // we ignore keypresses in a sequence that directly follow a keydown\n // for the same character\n\n\n var ignoreThisKeypress = e.type == 'keypress' && _ignoreNextKeypress;\n\n if (e.type == _nextExpectedAction && !_isModifier(character) && !ignoreThisKeypress) {\n _resetSequences(doNotReset);\n }\n\n _ignoreNextKeypress = processedSequenceCallback && e.type == 'keydown';\n };\n /**\n * handles a keydown event\n *\n * @param {Event} e\n * @returns void\n */\n\n\n function _handleKeyEvent(e) {\n // normalize e.which for key events\n // @see http://stackoverflow.com/questions/4285627/javascript-keycode-vs-charcode-utter-confusion\n if (typeof e.which !== 'number') {\n e.which = e.keyCode;\n }\n\n var character = _characterFromEvent(e); // no character found then stop\n\n\n if (!character) {\n return;\n } // need to use === for the character check because the character can be 0\n\n\n if (e.type == 'keyup' && _ignoreNextKeyup === character) {\n _ignoreNextKeyup = false;\n return;\n }\n\n self.handleKey(character, _eventModifiers(e), e);\n }\n /**\n * called to set a 1 second timeout on the specified sequence\n *\n * this is so after each key press in the sequence you have 1 second\n * to press the next key before you have to start over\n *\n * @returns void\n */\n\n\n function _resetSequenceTimer() {\n clearTimeout(_resetTimer);\n _resetTimer = setTimeout(_resetSequences, 1000);\n }\n /**\n * binds a key sequence to an event\n *\n * @param {string} combo - combo specified in bind call\n * @param {Array} keys\n * @param {Function} callback\n * @param {string=} action\n * @returns void\n */\n\n\n function _bindSequence(combo, keys, callback, action) {\n // start off by adding a sequence level record for this combination\n // and setting the level to 0\n _sequenceLevels[combo] = 0;\n /**\n * callback to increase the sequence level for this sequence and reset\n * all other sequences that were active\n *\n * @param {string} nextAction\n * @returns {Function}\n */\n\n function _increaseSequence(nextAction) {\n return function () {\n _nextExpectedAction = nextAction;\n ++_sequenceLevels[combo];\n\n _resetSequenceTimer();\n };\n }\n /**\n * wraps the specified callback inside of another function in order\n * to reset all sequence counters as soon as this sequence is done\n *\n * @param {Event} e\n * @returns void\n */\n\n\n function _callbackAndReset(e) {\n _fireCallback(callback, e, combo); // we should ignore the next key up if the action is key down\n // or keypress. this is so if you finish a sequence and\n // release the key the final key will not trigger a keyup\n\n\n if (action !== 'keyup') {\n _ignoreNextKeyup = _characterFromEvent(e);\n } // weird race condition if a sequence ends with the key\n // another sequence begins with\n\n\n setTimeout(_resetSequences, 10);\n } // loop through keys one at a time and bind the appropriate callback\n // function. for any key leading up to the final one it should\n // increase the sequence. after the final, it should reset all sequences\n //\n // if an action is specified in the original bind call then that will\n // be used throughout. otherwise we will pass the action that the\n // next key in the sequence should match. this allows a sequence\n // to mix and match keypress and keydown events depending on which\n // ones are better suited to the key provided\n\n\n for (var i = 0; i < keys.length; ++i) {\n var isFinal = i + 1 === keys.length;\n var wrappedCallback = isFinal ? _callbackAndReset : _increaseSequence(action || _getKeyInfo(keys[i + 1]).action);\n\n _bindSingle(keys[i], wrappedCallback, action, combo, i);\n }\n }\n /**\n * binds a single keyboard combination\n *\n * @param {string} combination\n * @param {Function} callback\n * @param {string=} action\n * @param {string=} sequenceName - name of sequence if part of sequence\n * @param {number=} level - what part of the sequence the command is\n * @returns void\n */\n\n\n function _bindSingle(combination, callback, action, sequenceName, level) {\n // store a direct mapped reference for use with Mousetrap.trigger\n self._directMap[combination + ':' + action] = callback; // make sure multiple spaces in a row become a single space\n\n combination = combination.replace(/\\s+/g, ' ');\n var sequence = combination.split(' ');\n var info; // if this pattern is a sequence of keys then run through this method\n // to reprocess each pattern one key at a time\n\n if (sequence.length > 1) {\n _bindSequence(combination, sequence, callback, action);\n\n return;\n }\n\n info = _getKeyInfo(combination, action); // make sure to initialize array if this is the first time\n // a callback is added for this key\n\n self._callbacks[info.key] = self._callbacks[info.key] || []; // remove an existing match if there is one\n\n _getMatches(info.key, info.modifiers, {\n type: info.action\n }, sequenceName, combination, level); // add this call back to the array\n // if it is a sequence put it at the beginning\n // if not put it at the end\n //\n // this is important because the way these are processed expects\n // the sequence ones to come first\n\n\n self._callbacks[info.key][sequenceName ? 'unshift' : 'push']({\n callback: callback,\n modifiers: info.modifiers,\n action: info.action,\n seq: sequenceName,\n level: level,\n combo: combination\n });\n }\n /**\n * binds multiple combinations to the same callback\n *\n * @param {Array} combinations\n * @param {Function} callback\n * @param {string|undefined} action\n * @returns void\n */\n\n\n self._bindMultiple = function (combinations, callback, action) {\n for (var i = 0; i < combinations.length; ++i) {\n _bindSingle(combinations[i], callback, action);\n }\n }; // start!\n\n\n _addEvent(targetElement, 'keypress', _handleKeyEvent);\n\n _addEvent(targetElement, 'keydown', _handleKeyEvent);\n\n _addEvent(targetElement, 'keyup', _handleKeyEvent);\n }\n /**\n * binds an event to mousetrap\n *\n * can be a single key, a combination of keys separated with +,\n * an array of keys, or a sequence of keys separated by spaces\n *\n * be sure to list the modifier keys first to make sure that the\n * correct key ends up getting bound (the last key in the pattern)\n *\n * @param {string|Array} keys\n * @param {Function} callback\n * @param {string=} action - 'keypress', 'keydown', or 'keyup'\n * @returns void\n */\n\n\n Mousetrap.prototype.bind = function (keys, callback, action) {\n var self = this;\n keys = keys instanceof Array ? keys : [keys];\n\n self._bindMultiple.call(self, keys, callback, action);\n\n return self;\n };\n /**\n * unbinds an event to mousetrap\n *\n * the unbinding sets the callback function of the specified key combo\n * to an empty function and deletes the corresponding key in the\n * _directMap dict.\n *\n * TODO: actually remove this from the _callbacks dictionary instead\n * of binding an empty function\n *\n * the keycombo+action has to be exactly the same as\n * it was defined in the bind method\n *\n * @param {string|Array} keys\n * @param {string} action\n * @returns void\n */\n\n\n Mousetrap.prototype.unbind = function (keys, action) {\n var self = this;\n return self.bind.call(self, keys, function () {}, action);\n };\n /**\n * triggers an event that has already been bound\n *\n * @param {string} keys\n * @param {string=} action\n * @returns void\n */\n\n\n Mousetrap.prototype.trigger = function (keys, action) {\n var self = this;\n\n if (self._directMap[keys + ':' + action]) {\n self._directMap[keys + ':' + action]({}, keys);\n }\n\n return self;\n };\n /**\n * resets the library back to its initial state. this is useful\n * if you want to clear out the current keyboard shortcuts and bind\n * new ones - for example if you switch to another page\n *\n * @returns void\n */\n\n\n Mousetrap.prototype.reset = function () {\n var self = this;\n self._callbacks = {};\n self._directMap = {};\n return self;\n };\n /**\n * should we stop this event before firing off callbacks\n *\n * @param {Event} e\n * @param {Element} element\n * @return {boolean}\n */\n\n\n Mousetrap.prototype.stopCallback = function (e, element) {\n var self = this; // if the element has the class \"mousetrap\" then no need to stop\n\n if ((' ' + element.className + ' ').indexOf(' mousetrap ') > -1) {\n return false;\n }\n\n if (_belongsTo(element, self.target)) {\n return false;\n } // stop for input, select, and textarea\n\n\n return element.tagName == 'INPUT' || element.tagName == 'SELECT' || element.tagName == 'TEXTAREA' || element.isContentEditable;\n };\n /**\n * exposes _handleKey publicly so it can be overwritten by extensions\n */\n\n\n Mousetrap.prototype.handleKey = function () {\n var self = this;\n return self._handleKey.apply(self, arguments);\n };\n /**\n * allow custom key mappings\n */\n\n\n Mousetrap.addKeycodes = function (object) {\n for (var key in object) {\n if (object.hasOwnProperty(key)) {\n _MAP[key] = object[key];\n }\n }\n\n _REVERSE_MAP = null;\n };\n /**\n * Init the global mousetrap functions\n *\n * This method is needed to allow the global mousetrap functions to work\n * now that mousetrap is a constructor function.\n */\n\n\n Mousetrap.init = function () {\n var documentMousetrap = Mousetrap(document);\n\n for (var method in documentMousetrap) {\n if (method.charAt(0) !== '_') {\n Mousetrap[method] = function (method) {\n return function () {\n return documentMousetrap[method].apply(documentMousetrap, arguments);\n };\n }(method);\n }\n }\n };\n\n Mousetrap.init(); // expose mousetrap to the global object\n\n window.Mousetrap = Mousetrap; // expose as a common js module\n\n if ( true && module.exports) {\n module.exports = Mousetrap;\n } // expose mousetrap as an AMD module\n\n\n if (true) {\n !(__WEBPACK_AMD_DEFINE_RESULT__ = (function () {\n return Mousetrap;\n }).call(exports, __webpack_require__, exports, module),\n\t\t\t\t__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));\n }\n})(typeof window !== 'undefined' ? window : null, typeof window !== 'undefined' ? document : null);\n\n//# sourceURL=webpack:///./node_modules/mousetrap/mousetrap.js?")},"./node_modules/webpack/buildin/module.js":function(module,exports){eval('module.exports = function (module) {\n if (!module.webpackPolyfill) {\n module.deprecate = function () {};\n\n module.paths = []; // module.parent = undefined by default\n\n if (!module.children) module.children = [];\n Object.defineProperty(module, "loaded", {\n enumerable: true,\n get: function get() {\n return module.l;\n }\n });\n Object.defineProperty(module, "id", {\n enumerable: true,\n get: function get() {\n return module.i;\n }\n });\n module.webpackPolyfill = 1;\n }\n\n return module;\n};\n\n//# sourceURL=webpack:///(webpack)/buildin/module.js?')},"./node_modules/wolfy87-eventemitter/EventEmitter.js":function(module,exports,__webpack_require__){eval("var __WEBPACK_AMD_DEFINE_RESULT__;function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n/*!\n * EventEmitter v5.2.5 - git.io/ee\n * Unlicense - http://unlicense.org/\n * Oliver Caldwell - http://oli.me.uk/\n * @preserve\n */\n;\n\n(function (exports) {\n 'use strict';\n /**\n * Class for managing events.\n * Can be extended to provide event functionality in other classes.\n *\n * @class EventEmitter Manages event registering and emitting.\n */\n\n function EventEmitter() {} // Shortcuts to improve speed and size\n\n\n var proto = EventEmitter.prototype;\n var originalGlobalValue = exports.EventEmitter;\n /**\n * Finds the index of the listener for the event in its storage array.\n *\n * @param {Function[]} listeners Array of listeners to search through.\n * @param {Function} listener Method to look for.\n * @return {Number} Index of the specified listener, -1 if not found\n * @api private\n */\n\n function indexOfListener(listeners, listener) {\n var i = listeners.length;\n\n while (i--) {\n if (listeners[i].listener === listener) {\n return i;\n }\n }\n\n return -1;\n }\n /**\n * Alias a method while keeping the context correct, to allow for overwriting of target method.\n *\n * @param {String} name The name of the target method.\n * @return {Function} The aliased method\n * @api private\n */\n\n\n function alias(name) {\n return function aliasClosure() {\n return this[name].apply(this, arguments);\n };\n }\n /**\n * Returns the listener array for the specified event.\n * Will initialise the event object and listener arrays if required.\n * Will return an object if you use a regex search. The object contains keys for each matched event. So /ba[rz]/ might return an object containing bar and baz. But only if you have either defined them with defineEvent or added some listeners to them.\n * Each property in the object response is an array of listener functions.\n *\n * @param {String|RegExp} evt Name of the event to return the listeners from.\n * @return {Function[]|Object} All listener functions for the event.\n */\n\n\n proto.getListeners = function getListeners(evt) {\n var events = this._getEvents();\n\n var response;\n var key; // Return a concatenated array of all matching events if\n // the selector is a regular expression.\n\n if (evt instanceof RegExp) {\n response = {};\n\n for (key in events) {\n if (events.hasOwnProperty(key) && evt.test(key)) {\n response[key] = events[key];\n }\n }\n } else {\n response = events[evt] || (events[evt] = []);\n }\n\n return response;\n };\n /**\n * Takes a list of listener objects and flattens it into a list of listener functions.\n *\n * @param {Object[]} listeners Raw listener objects.\n * @return {Function[]} Just the listener functions.\n */\n\n\n proto.flattenListeners = function flattenListeners(listeners) {\n var flatListeners = [];\n var i;\n\n for (i = 0; i < listeners.length; i += 1) {\n flatListeners.push(listeners[i].listener);\n }\n\n return flatListeners;\n };\n /**\n * Fetches the requested listeners via getListeners but will always return the results inside an object. This is mainly for internal use but others may find it useful.\n *\n * @param {String|RegExp} evt Name of the event to return the listeners from.\n * @return {Object} All listener functions for an event in an object.\n */\n\n\n proto.getListenersAsObject = function getListenersAsObject(evt) {\n var listeners = this.getListeners(evt);\n var response;\n\n if (listeners instanceof Array) {\n response = {};\n response[evt] = listeners;\n }\n\n return response || listeners;\n };\n\n function isValidListener(listener) {\n if (typeof listener === 'function' || listener instanceof RegExp) {\n return true;\n } else if (listener && _typeof(listener) === 'object') {\n return isValidListener(listener.listener);\n } else {\n return false;\n }\n }\n /**\n * Adds a listener function to the specified event.\n * The listener will not be added if it is a duplicate.\n * If the listener returns true then it will be removed after it is called.\n * If you pass a regular expression as the event name then the listener will be added to all events that match it.\n *\n * @param {String|RegExp} evt Name of the event to attach the listener to.\n * @param {Function} listener Method to be called when the event is emitted. If the function returns true then it will be removed after calling.\n * @return {Object} Current instance of EventEmitter for chaining.\n */\n\n\n proto.addListener = function addListener(evt, listener) {\n if (!isValidListener(listener)) {\n throw new TypeError('listener must be a function');\n }\n\n var listeners = this.getListenersAsObject(evt);\n var listenerIsWrapped = _typeof(listener) === 'object';\n var key;\n\n for (key in listeners) {\n if (listeners.hasOwnProperty(key) && indexOfListener(listeners[key], listener) === -1) {\n listeners[key].push(listenerIsWrapped ? listener : {\n listener: listener,\n once: false\n });\n }\n }\n\n return this;\n };\n /**\n * Alias of addListener\n */\n\n\n proto.on = alias('addListener');\n /**\n * Semi-alias of addListener. It will add a listener that will be\n * automatically removed after its first execution.\n *\n * @param {String|RegExp} evt Name of the event to attach the listener to.\n * @param {Function} listener Method to be called when the event is emitted. If the function returns true then it will be removed after calling.\n * @return {Object} Current instance of EventEmitter for chaining.\n */\n\n proto.addOnceListener = function addOnceListener(evt, listener) {\n return this.addListener(evt, {\n listener: listener,\n once: true\n });\n };\n /**\n * Alias of addOnceListener.\n */\n\n\n proto.once = alias('addOnceListener');\n /**\n * Defines an event name. This is required if you want to use a regex to add a listener to multiple events at once. If you don't do this then how do you expect it to know what event to add to? Should it just add to every possible match for a regex? No. That is scary and bad.\n * You need to tell it what event names should be matched by a regex.\n *\n * @param {String} evt Name of the event to create.\n * @return {Object} Current instance of EventEmitter for chaining.\n */\n\n proto.defineEvent = function defineEvent(evt) {\n this.getListeners(evt);\n return this;\n };\n /**\n * Uses defineEvent to define multiple events.\n *\n * @param {String[]} evts An array of event names to define.\n * @return {Object} Current instance of EventEmitter for chaining.\n */\n\n\n proto.defineEvents = function defineEvents(evts) {\n for (var i = 0; i < evts.length; i += 1) {\n this.defineEvent(evts[i]);\n }\n\n return this;\n };\n /**\n * Removes a listener function from the specified event.\n * When passed a regular expression as the event name, it will remove the listener from all events that match it.\n *\n * @param {String|RegExp} evt Name of the event to remove the listener from.\n * @param {Function} listener Method to remove from the event.\n * @return {Object} Current instance of EventEmitter for chaining.\n */\n\n\n proto.removeListener = function removeListener(evt, listener) {\n var listeners = this.getListenersAsObject(evt);\n var index;\n var key;\n\n for (key in listeners) {\n if (listeners.hasOwnProperty(key)) {\n index = indexOfListener(listeners[key], listener);\n\n if (index !== -1) {\n listeners[key].splice(index, 1);\n }\n }\n }\n\n return this;\n };\n /**\n * Alias of removeListener\n */\n\n\n proto.off = alias('removeListener');\n /**\n * Adds listeners in bulk using the manipulateListeners method.\n * If you pass an object as the first argument you can add to multiple events at once. The object should contain key value pairs of events and listeners or listener arrays. You can also pass it an event name and an array of listeners to be added.\n * You can also pass it a regular expression to add the array of listeners to all events that match it.\n * Yeah, this function does quite a bit. That's probably a bad thing.\n *\n * @param {String|Object|RegExp} evt An event name if you will pass an array of listeners next. An object if you wish to add to multiple events at once.\n * @param {Function[]} [listeners] An optional array of listener functions to add.\n * @return {Object} Current instance of EventEmitter for chaining.\n */\n\n proto.addListeners = function addListeners(evt, listeners) {\n // Pass through to manipulateListeners\n return this.manipulateListeners(false, evt, listeners);\n };\n /**\n * Removes listeners in bulk using the manipulateListeners method.\n * If you pass an object as the first argument you can remove from multiple events at once. The object should contain key value pairs of events and listeners or listener arrays.\n * You can also pass it an event name and an array of listeners to be removed.\n * You can also pass it a regular expression to remove the listeners from all events that match it.\n *\n * @param {String|Object|RegExp} evt An event name if you will pass an array of listeners next. An object if you wish to remove from multiple events at once.\n * @param {Function[]} [listeners] An optional array of listener functions to remove.\n * @return {Object} Current instance of EventEmitter for chaining.\n */\n\n\n proto.removeListeners = function removeListeners(evt, listeners) {\n // Pass through to manipulateListeners\n return this.manipulateListeners(true, evt, listeners);\n };\n /**\n * Edits listeners in bulk. The addListeners and removeListeners methods both use this to do their job. You should really use those instead, this is a little lower level.\n * The first argument will determine if the listeners are removed (true) or added (false).\n * If you pass an object as the second argument you can add/remove from multiple events at once. The object should contain key value pairs of events and listeners or listener arrays.\n * You can also pass it an event name and an array of listeners to be added/removed.\n * You can also pass it a regular expression to manipulate the listeners of all events that match it.\n *\n * @param {Boolean} remove True if you want to remove listeners, false if you want to add.\n * @param {String|Object|RegExp} evt An event name if you will pass an array of listeners next. An object if you wish to add/remove from multiple events at once.\n * @param {Function[]} [listeners] An optional array of listener functions to add/remove.\n * @return {Object} Current instance of EventEmitter for chaining.\n */\n\n\n proto.manipulateListeners = function manipulateListeners(remove, evt, listeners) {\n var i;\n var value;\n var single = remove ? this.removeListener : this.addListener;\n var multiple = remove ? this.removeListeners : this.addListeners; // If evt is an object then pass each of its properties to this method\n\n if (_typeof(evt) === 'object' && !(evt instanceof RegExp)) {\n for (i in evt) {\n if (evt.hasOwnProperty(i) && (value = evt[i])) {\n // Pass the single listener straight through to the singular method\n if (typeof value === 'function') {\n single.call(this, i, value);\n } else {\n // Otherwise pass back to the multiple function\n multiple.call(this, i, value);\n }\n }\n }\n } else {\n // So evt must be a string\n // And listeners must be an array of listeners\n // Loop over it and pass each one to the multiple method\n i = listeners.length;\n\n while (i--) {\n single.call(this, evt, listeners[i]);\n }\n }\n\n return this;\n };\n /**\n * Removes all listeners from a specified event.\n * If you do not specify an event then all listeners will be removed.\n * That means every event will be emptied.\n * You can also pass a regex to remove all events that match it.\n *\n * @param {String|RegExp} [evt] Optional name of the event to remove all listeners for. Will remove from every event if not passed.\n * @return {Object} Current instance of EventEmitter for chaining.\n */\n\n\n proto.removeEvent = function removeEvent(evt) {\n var type = _typeof(evt);\n\n var events = this._getEvents();\n\n var key; // Remove different things depending on the state of evt\n\n if (type === 'string') {\n // Remove all listeners for the specified event\n delete events[evt];\n } else if (evt instanceof RegExp) {\n // Remove all events matching the regex.\n for (key in events) {\n if (events.hasOwnProperty(key) && evt.test(key)) {\n delete events[key];\n }\n }\n } else {\n // Remove all listeners in all events\n delete this._events;\n }\n\n return this;\n };\n /**\n * Alias of removeEvent.\n *\n * Added to mirror the node API.\n */\n\n\n proto.removeAllListeners = alias('removeEvent');\n /**\n * Emits an event of your choice.\n * When emitted, every listener attached to that event will be executed.\n * If you pass the optional argument array then those arguments will be passed to every listener upon execution.\n * Because it uses `apply`, your array of arguments will be passed as if you wrote them out separately.\n * So they will not arrive within the array on the other side, they will be separate.\n * You can also pass a regular expression to emit to all events that match it.\n *\n * @param {String|RegExp} evt Name of the event to emit and execute listeners for.\n * @param {Array} [args] Optional array of arguments to be passed to each listener.\n * @return {Object} Current instance of EventEmitter for chaining.\n */\n\n proto.emitEvent = function emitEvent(evt, args) {\n var listenersMap = this.getListenersAsObject(evt);\n var listeners;\n var listener;\n var i;\n var key;\n var response;\n\n for (key in listenersMap) {\n if (listenersMap.hasOwnProperty(key)) {\n listeners = listenersMap[key].slice(0);\n\n for (i = 0; i < listeners.length; i++) {\n // If the listener returns true then it shall be removed from the event\n // The function is executed either with a basic call or an apply if there is an args array\n listener = listeners[i];\n\n if (listener.once === true) {\n this.removeListener(evt, listener.listener);\n }\n\n response = listener.listener.apply(this, args || []);\n\n if (response === this._getOnceReturnValue()) {\n this.removeListener(evt, listener.listener);\n }\n }\n }\n }\n\n return this;\n };\n /**\n * Alias of emitEvent\n */\n\n\n proto.trigger = alias('emitEvent');\n /**\n * Subtly different from emitEvent in that it will pass its arguments on to the listeners, as opposed to taking a single array of arguments to pass on.\n * As with emitEvent, you can pass a regex in place of the event name to emit to all events that match it.\n *\n * @param {String|RegExp} evt Name of the event to emit and execute listeners for.\n * @param {...*} Optional additional arguments to be passed to each listener.\n * @return {Object} Current instance of EventEmitter for chaining.\n */\n\n proto.emit = function emit(evt) {\n var args = Array.prototype.slice.call(arguments, 1);\n return this.emitEvent(evt, args);\n };\n /**\n * Sets the current value to check against when executing listeners. If a\n * listeners return value matches the one set here then it will be removed\n * after execution. This value defaults to true.\n *\n * @param {*} value The new value to check for when executing listeners.\n * @return {Object} Current instance of EventEmitter for chaining.\n */\n\n\n proto.setOnceReturnValue = function setOnceReturnValue(value) {\n this._onceReturnValue = value;\n return this;\n };\n /**\n * Fetches the current value to check against when executing listeners. If\n * the listeners return value matches this one then it should be removed\n * automatically. It will return true by default.\n *\n * @return {*|Boolean} The current value to check for or the default, true.\n * @api private\n */\n\n\n proto._getOnceReturnValue = function _getOnceReturnValue() {\n if (this.hasOwnProperty('_onceReturnValue')) {\n return this._onceReturnValue;\n } else {\n return true;\n }\n };\n /**\n * Fetches the events object and creates one if required.\n *\n * @return {Object} The events storage object.\n * @api private\n */\n\n\n proto._getEvents = function _getEvents() {\n return this._events || (this._events = {});\n };\n /**\n * Reverts the global {@link EventEmitter} to its previous value and returns a reference to this version.\n *\n * @return {Function} Non conflicting EventEmitter class.\n */\n\n\n EventEmitter.noConflict = function noConflict() {\n exports.EventEmitter = originalGlobalValue;\n return EventEmitter;\n }; // Expose the class either via AMD, CommonJS or the global object\n\n\n if (true) {\n !(__WEBPACK_AMD_DEFINE_RESULT__ = (function () {\n return EventEmitter;\n }).call(exports, __webpack_require__, exports, module),\n\t\t\t\t__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));\n } else {}\n})(typeof window !== 'undefined' ? window : this || {});\n\n//# sourceURL=webpack:///./node_modules/wolfy87-eventemitter/EventEmitter.js?")},"./src/scripts/components/panels-util.js":function(module,__webpack_exports__,__webpack_require__){"use strict";eval('__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "panelsUtil", function() { return panelsUtil; });\n/**\r\n * Panels Util - for both styleguide and viewer\r\n */\nvar panelsUtil = {\n /**\r\n * Add click events to the template that was rendered\r\n * @param {String} the rendered template for the modal\r\n * @param {String} the pattern partial for the modal\r\n */\n addClickEvents: function addClickEvents(templateRendered, patternPartial) {\n var els = templateRendered.querySelectorAll(\'.pl-js-tab-link\');\n\n for (var i = 0; i < els.length; ++i) {\n els[i].onclick = function (e) {\n e.preventDefault();\n var partial = this.getAttribute(\'data-patternpartial\');\n var panelID = this.getAttribute(\'data-panelid\');\n panelsUtil.show(partial, panelID);\n };\n }\n\n return templateRendered;\n },\n\n /**\r\n * Show a specific modal\r\n * @param {String} the pattern partial for the modal\r\n * @param {String} the ID of the panel to be shown\r\n */\n show: function show(patternPartial, panelID) {\n var activeTabClass = \'pl-is-active-tab\'; // turn off all of the active tabs\n\n var allTabLinks = document.querySelectorAll(".pl-js-tab-link"); // hide all of the panels\n\n var allTabPanels = document.querySelectorAll(".pl-js-tab-panel"); // tabLink about to become active\n\n var activeTabLink = document.querySelector("#pl-".concat(patternPartial, "-").concat(panelID, "-tab")); // tabPanelabout to become active\n\n var activeTabPanel = document.querySelector("#pl-".concat(patternPartial, "-").concat(panelID, "-panel"));\n\n for (var i = 0; i < allTabLinks.length; ++i) {\n allTabLinks[i].classList.remove(activeTabClass);\n }\n\n for (var _i = 0; _i < allTabPanels.length; ++_i) {\n allTabPanels[_i].classList.remove(activeTabClass);\n }\n\n activeTabLink.classList.add(activeTabClass);\n activeTabPanel.classList.add(activeTabClass);\n }\n};\n\n//# sourceURL=webpack:///./src/scripts/components/panels-util.js?')},"./src/scripts/components/pl-copy-to-clipboard/pl-copy-to-clipboard.js":function(module,__webpack_exports__,__webpack_require__){"use strict";eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var clipboard__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! clipboard */ \"./node_modules/clipboard/dist/clipboard.js\");\n/* harmony import */ var clipboard__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(clipboard__WEBPACK_IMPORTED_MODULE_0__);\n/**\r\n * Copy to clipboard functionality for code snippet examples\r\n */\n\nvar clipboard = new clipboard__WEBPACK_IMPORTED_MODULE_0___default.a('.pl-js-code-copy-btn');\nclipboard.on('success', function (e) {\n var copyButton = document.querySelectorAll('.pl-js-code-copy-btn');\n\n for (var i = 0; i < copyButton.length; i++) {\n copyButton[i].innerText = 'Copy';\n }\n\n e.trigger.textContent = 'Copied';\n});\n\n//# sourceURL=webpack:///./src/scripts/components/pl-copy-to-clipboard/pl-copy-to-clipboard.js?")},"./src/scripts/patternlab-pattern.js":function(module,__webpack_exports__,__webpack_require__){"use strict";eval("\n// EXTERNAL MODULE: ./src/scripts/utils/postmessage.js\nvar postmessage = __webpack_require__(\"./src/scripts/utils/postmessage.js\");\n\n// EXTERNAL MODULE: ./src/scripts/components/panels-util.js\nvar panels_util = __webpack_require__(\"./src/scripts/components/panels-util.js\");\n\n// EXTERNAL MODULE: ./src/scripts/components/pl-copy-to-clipboard/pl-copy-to-clipboard.js\nvar pl_copy_to_clipboard = __webpack_require__(\"./src/scripts/components/pl-copy-to-clipboard/pl-copy-to-clipboard.js\");\n\n// CONCATENATED MODULE: ./src/scripts/components/modal-styleguide.js\n/**\r\n * \"Modal\" (aka Panel UI) for the Styleguide Layer - for both annotations and code/info\r\n */\n\n\nvar modalStyleguide = {\n // set up some defaults\n active: [],\n targetOrigin: window.location.protocol === 'file:' ? '*' : window.location.protocol + '//' + window.location.host,\n\n /**\r\n * initialize the modal window\r\n */\n onReady: function onReady() {\n // go through the panel toggles and add click event to the pattern extra toggle button\n var els = document.querySelectorAll('.pl-js-pattern-extra-toggle');\n\n for (var i = 0; i < els.length; ++i) {\n els[i].onclick = function (e) {\n var patternPartial = this.getAttribute('data-patternpartial');\n modalStyleguide.toggle(patternPartial);\n };\n }\n },\n\n /**\r\n * toggle the modal window open and closed based on clicking the pip\r\n * @param {String} the patternPartial that identifies what needs to be toggled\r\n */\n toggle: function toggle(patternPartial) {\n if (modalStyleguide.active[patternPartial] === undefined || !modalStyleguide.active[patternPartial]) {\n var el = document.getElementById('pl-pattern-data-' + patternPartial);\n modalStyleguide.collectAndSend(el, true, false);\n } else {\n modalStyleguide.highlightsHide();\n modalStyleguide.close(patternPartial);\n }\n },\n\n /**\r\n * open the modal window for a view-all entry\r\n * @param {String} the patternPartial that identifies what needs to be opened\r\n * @param {String} the content that should be inserted\r\n */\n open: function open(patternPartial, content) {\n // make sure templateRendered is modified to be an HTML element\n var div = document.createElement('div');\n div.innerHTML = content;\n content = document.createElement('div').appendChild(div).querySelector('div'); // add click events\n\n content = panels_util[\"panelsUtil\"].addClickEvents(content, patternPartial); // make sure the modal viewer and other options are off just in case\n\n modalStyleguide.close(patternPartial); // note it's turned on in the viewer\n\n modalStyleguide.active[patternPartial] = true; // make sure there's no content\n\n div = document.getElementById('pl-pattern-extra-' + patternPartial);\n\n if (div.childNodes.length > 0) {\n div.removeChild(div.childNodes[0]);\n } // add the content\n\n\n document.getElementById('pl-pattern-extra-' + patternPartial).appendChild(content); // show the modal\n\n document.getElementById('pl-pattern-extra-toggle-' + patternPartial).classList.add('pl-is-active');\n document.getElementById('pl-pattern-extra-' + patternPartial).classList.add('pl-is-active');\n },\n\n /**\r\n * close the modal window for a view-all entry\r\n * @param {String} the patternPartial that identifies what needs to be closed\r\n */\n close: function close(patternPartial) {\n // note that the modal viewer is no longer active\n modalStyleguide.active[patternPartial] = false; // hide the modal, look at info-panel.js\n\n document.getElementById('pl-pattern-extra-toggle-' + patternPartial).classList.remove('pl-is-active');\n document.getElementById('pl-pattern-extra-' + patternPartial).classList.remove('pl-is-active');\n },\n\n /**\r\n * get the data that needs to be send to the viewer for rendering\r\n * @param {Element} the identifier for the element that needs to be collected\r\n * @param {Boolean} if the refresh is of a view-all view and the content should be sent back\r\n * @param {Boolean} if the text in the dropdown should be switched\r\n */\n collectAndSend: function collectAndSend(el, iframePassback, switchText) {\n /**\r\n * Verify - - - diff --git a/packages/uikit-workshop/src/html/partials/base-template.html b/packages/uikit-workshop/src/html/partials/base-template.html index 025683798..eefa7ceeb 100755 --- a/packages/uikit-workshop/src/html/partials/base-template.html +++ b/packages/uikit-workshop/src/html/partials/base-template.html @@ -1,121 +1,140 @@ {{# descBlockExists }} -
- - {{# isPatternView }} - -
- -
    - - {{# patternBreadcrumb }} - -
  • {{ patternType }}
  • - - {{# patternSubtype }} -
  • {{ patternSubtype }}
  • - {{/ patternSubtype }} - - {{/ patternBreadcrumb }} - -
- -

- {{ patternName }} - - {{# patternState }} - - {{/ patternState }} -

- -
- {{/ isPatternView }} - - {{# patternDescExists }} -
- {{{ patternDesc }}} {{# patternDescAdditions }} {{{ patternDescAdditions }}} {{/ patternDescAdditions }} -
- {{/ patternDescExists }} - - {{# lineageExists }} -

- The {{ patternName }} pattern contains the following patterns: - {{# lineage }} - - {{ lineagePattern }} - {{# lineageState }}{{/ lineageState }} - - {{# hasComma }}, {{/ hasComma }} - {{/ lineage }} - -

- {{/ lineageExists }} - - {{# lineageRExists }} -

- The {{ patternName }} pattern is included in the following patterns: - {{# lineageR }} - - {{ lineagePattern }} - {{# lineageState }}{{/ lineageState }} - - {{# hasComma }}, {{/ hasComma }} - {{/ lineageR }} -

- {{/ lineageRExists }} - - {{# annotationExists }} -
-

Annotations

-
    - - {{# annotations }} -
  1. - -

    {{ title }}

    - -
    - {{{ comment }}} -
    - -
  2. - {{/ annotations }} - -
- -
- {{/ annotationExists }} - -
+
+ {{# isPatternView }} + +
+
    + {{# patternBreadcrumb }} + +
  • {{ patternType }}
  • + + {{# patternSubtype }} +
  • {{ patternSubtype }}
  • + {{/ patternSubtype }} {{/ patternBreadcrumb }} +
+ + +

+ {{ patternName }} {{# patternState }} + + {{/ patternState }} +

+ +
+ + {{/ isPatternView }} {{# patternDescExists }} +
+ {{{ patternDesc }}} {{# patternDescAdditions }} {{{ patternDescAdditions }}} + {{/ patternDescAdditions }} +
+ + {{/ patternDescExists }} {{# lineageExists }} +

+ The {{ patternName }} pattern contains the following patterns: {{# + lineage }} + + {{ lineagePattern }} {{# lineageState }}{{/ lineageState }} + {{# hasComma }}, {{/ hasComma }} {{/ lineage }} +

+ + {{/ lineageExists }} {{# lineageRExists }} +

+ The {{ patternName }} pattern is included in the following + patterns: {{# lineageR }} + + {{ lineagePattern }} {{# lineageState }}{{/ lineageState }} + {{# hasComma }}, {{/ hasComma }} {{/ lineageR }} +

+ + {{/ lineageRExists }} {{# annotationExists }} +
+

Annotations

+
    + {{# annotations }} +
  1. +

    {{ title }}

    + +
    + {{{ comment }}} +
    + +
  2. + + {{/ annotations }} +
+ +
+ + {{/ annotationExists }} +
+ {{/ descBlockExists }}
- -
-
-
    - {{# panels }} -
  • - {{ name }} -
  • - {{/ panels }} -
-
- -
- - {{# panels }} -
- - - {{{ content }}} -
- {{/ panels }} - -
- -
- -
+
+
+
    + {{# panels }} +
  • + {{ name }} +
  • + + {{/ panels }} +
+ +
+ + +
+ {{# panels }} +
+ + + {{{ content }}} +
+ + {{/ panels }} +
+ +
+ + + diff --git a/packages/uikit-workshop/src/icons/arrow-down.svg b/packages/uikit-workshop/src/icons/arrow-down.svg new file mode 100755 index 000000000..e37dff879 --- /dev/null +++ b/packages/uikit-workshop/src/icons/arrow-down.svg @@ -0,0 +1,5 @@ + + +arrow_drop_down + + diff --git a/packages/uikit-workshop/src/icons/close.svg b/packages/uikit-workshop/src/icons/close.svg new file mode 100755 index 000000000..fb4be45bb --- /dev/null +++ b/packages/uikit-workshop/src/icons/close.svg @@ -0,0 +1,5 @@ + + +close + + diff --git a/packages/uikit-workshop/src/icons/desktop.svg b/packages/uikit-workshop/src/icons/desktop.svg new file mode 100755 index 000000000..c175122e6 --- /dev/null +++ b/packages/uikit-workshop/src/icons/desktop.svg @@ -0,0 +1,5 @@ + + +desktop_mac + + diff --git a/packages/uikit-workshop/src/icons/disco-ball.svg b/packages/uikit-workshop/src/icons/disco-ball.svg new file mode 100755 index 000000000..6ec7b3bfb --- /dev/null +++ b/packages/uikit-workshop/src/icons/disco-ball.svg @@ -0,0 +1,15 @@ + + + + Artboard + Created with Sketch. + + + + + + + + + + diff --git a/packages/uikit-workshop/src/icons/help.svg b/packages/uikit-workshop/src/icons/help.svg new file mode 100755 index 000000000..5289573ca --- /dev/null +++ b/packages/uikit-workshop/src/icons/help.svg @@ -0,0 +1,5 @@ + + +help_outline + + diff --git a/packages/uikit-workshop/src/icons/hide.svg b/packages/uikit-workshop/src/icons/hide.svg new file mode 100755 index 000000000..fd370e451 --- /dev/null +++ b/packages/uikit-workshop/src/icons/hide.svg @@ -0,0 +1,5 @@ + + +view-hide + + diff --git a/packages/uikit-workshop/src/icons/laptop.svg b/packages/uikit-workshop/src/icons/laptop.svg new file mode 100755 index 000000000..9ad3077f7 --- /dev/null +++ b/packages/uikit-workshop/src/icons/laptop.svg @@ -0,0 +1,5 @@ + + +laptop_mac + + diff --git a/packages/uikit-workshop/src/icons/menu.svg b/packages/uikit-workshop/src/icons/menu.svg new file mode 100755 index 000000000..620494ef8 --- /dev/null +++ b/packages/uikit-workshop/src/icons/menu.svg @@ -0,0 +1,5 @@ + + +menu + + diff --git a/packages/uikit-workshop/src/icons/new-tab.svg b/packages/uikit-workshop/src/icons/new-tab.svg new file mode 100755 index 000000000..ea59a1cb2 --- /dev/null +++ b/packages/uikit-workshop/src/icons/new-tab.svg @@ -0,0 +1,5 @@ + + +open_in_new + + diff --git a/packages/uikit-workshop/src/icons/phone.svg b/packages/uikit-workshop/src/icons/phone.svg new file mode 100755 index 000000000..b47123560 --- /dev/null +++ b/packages/uikit-workshop/src/icons/phone.svg @@ -0,0 +1,5 @@ + + +phone_iphone + + diff --git a/packages/uikit-workshop/src/icons/random.svg b/packages/uikit-workshop/src/icons/random.svg new file mode 100755 index 000000000..c42db187a --- /dev/null +++ b/packages/uikit-workshop/src/icons/random.svg @@ -0,0 +1,11 @@ + + + + casino + Created with Sketch. + + + + + + \ No newline at end of file diff --git a/packages/uikit-workshop/src/icons/settings.svg b/packages/uikit-workshop/src/icons/settings.svg new file mode 100755 index 000000000..0ffd7ff4a --- /dev/null +++ b/packages/uikit-workshop/src/icons/settings.svg @@ -0,0 +1,5 @@ + + +settings + + diff --git a/packages/uikit-workshop/src/icons/show.svg b/packages/uikit-workshop/src/icons/show.svg new file mode 100755 index 000000000..3b4bcfcb3 --- /dev/null +++ b/packages/uikit-workshop/src/icons/show.svg @@ -0,0 +1,5 @@ + + +view-show + + diff --git a/packages/uikit-workshop/src/icons/tablet.svg b/packages/uikit-workshop/src/icons/tablet.svg new file mode 100755 index 000000000..8a2174385 --- /dev/null +++ b/packages/uikit-workshop/src/icons/tablet.svg @@ -0,0 +1,5 @@ + + +tablet_mac + + diff --git a/packages/uikit-workshop/src/images/pattern-lab-logo--on-dark.svg b/packages/uikit-workshop/src/images/pattern-lab-logo--on-dark.svg new file mode 100644 index 000000000..59cc46b0a --- /dev/null +++ b/packages/uikit-workshop/src/images/pattern-lab-logo--on-dark.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/uikit-workshop/src/images/pattern-lab-logo--on-light.svg b/packages/uikit-workshop/src/images/pattern-lab-logo--on-light.svg new file mode 100644 index 000000000..549f60c02 --- /dev/null +++ b/packages/uikit-workshop/src/images/pattern-lab-logo--on-light.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/uikit-workshop/src/sass/pattern-lab.scss b/packages/uikit-workshop/src/sass/pattern-lab.scss index ea72bc5fb..823a0d287 100755 --- a/packages/uikit-workshop/src/sass/pattern-lab.scss +++ b/packages/uikit-workshop/src/sass/pattern-lab.scss @@ -48,18 +48,19 @@ @import '../scripts/components/pl-drawer/pl-drawer.scss'; @import '../scripts/components/pl-header/pl-header.scss'; @import '../scripts/components/pl-layout/pl-layout.scss'; +@import '../scripts/components/pl-logo/pl-logo.scss'; @import '../scripts/components/pl-nav/pl-nav.scss'; @import '../scripts/components/pl-search/pl-search.scss'; @import '../scripts/components/pl-toggle-info/pl-toggle-info.scss'; @import '../scripts/components/pl-toggle-layout/pl-toggle-layout.scss'; @import '../scripts/components/pl-toggle-theme/pl-toggle-theme.scss'; @import '../scripts/components/pl-tools-menu/pl-tools-menu.scss'; -@import '../scripts/components/pl-viewport/pl-viewport.scss'; -@import '../scripts/components/pl-viewport-size/pl-viewport-size.scss'; +@import '../scripts/components/pl-tooltip/pl-tooltip.scss'; @import '../scripts/components/pl-viewport-size-list/pl-viewport-size-list.scss'; +@import '../scripts/components/pl-viewport-size/pl-viewport-size.scss'; +@import '../scripts/components/pl-viewport/pl-viewport.scss'; @import 'scss/04-components/annotations'; @import 'scss/04-components/breadcrumbs'; -@import 'scss/04-components/logo'; @import 'scss/04-components/pattern-category'; @import 'scss/04-components/pattern-info'; @import 'scss/04-components/pattern-lineage'; @@ -68,6 +69,11 @@ @import 'scss/04-components/tabs'; @import 'scss/04-components/text-passage'; +.pl-c-main { + overflow: hidden; + max-width: 100vw; +} + /*------------------------------------*\ #THEMES \*------------------------------------*/ diff --git a/packages/uikit-workshop/src/sass/scss/01-abstracts/_mixins.scss b/packages/uikit-workshop/src/sass/scss/01-abstracts/_mixins.scss index c06101c06..6b1dfb5b9 100644 --- a/packages/uikit-workshop/src/sass/scss/01-abstracts/_mixins.scss +++ b/packages/uikit-workshop/src/sass/scss/01-abstracts/_mixins.scss @@ -27,8 +27,8 @@ * Header Link Style */ @mixin linkStyle() { - background-color: $pl-color-black; - color: $pl-color-gray-50; + @include noSelect; + color: inherit; text-decoration: none; line-height: 1; padding: 0.7rem 0.5rem; @@ -37,38 +37,19 @@ transition: background-color $pl-animate-quick ease-out, color $pl-animate-quick ease-out; cursor: pointer; - outline-offset: -3px; - outline-width: 2px; + outline: 0; - &:hover { - color: $pl-color-white; - background-color: $pl-color-gray-87; + &:hover, + &.pl-is-active:hover { + background-color: rgba(0, 0, 0, .1); } - &.pl-is-active, - &:active { - color: $pl-color-white; - background-color: $pl-color-gray-87; - outline: 1px dotted $pl-color-gray-50; - outline-offset: -1px; - } /** * Header link styles inside light theme */ - .pl-c-body--theme-light & { - background-color: $pl-color-white; - color: $pl-color-gray-70; - &:hover { - background-color: $pl-color-gray-07; - } - &:active, - &:focus { - background-color: $pl-color-gray-13; - } - } /** * Header link styles inside cozy theme diff --git a/packages/uikit-workshop/src/sass/scss/01-abstracts/_variables.scss b/packages/uikit-workshop/src/sass/scss/01-abstracts/_variables.scss index 364b3aab4..fb8499ec4 100644 --- a/packages/uikit-workshop/src/sass/scss/01-abstracts/_variables.scss +++ b/packages/uikit-workshop/src/sass/scss/01-abstracts/_variables.scss @@ -26,10 +26,10 @@ $pl-color-state-inreview: #c7a118; $pl-color-state-deprecated: #b00b02; // Font Family -$pl-font: 'HelveticaNeue', 'Helvetica', 'Arial', sans-serif; +$pl-font: 'Open Sans', 'HelveticaNeue', 'Helvetica', 'Arial', sans-serif !default; // Font sizes -$pl-font-size-sm: 0.7rem; +$pl-font-size-sm: 0.9rem; $pl-font-size-sm-2: 0.85rem; $pl-font-size-norm: 1rem; $pl-font-size-large: 1.2rem; @@ -55,4 +55,4 @@ $pl-border-radius: 3px; $pl-border-radius-med: 6px; -$pl-sidebar-width: 14rem; //Define sidebar width for calculating dimensions \ No newline at end of file +$pl-sidebar-width: 16rem; //Define sidebar width for calculating dimensions \ No newline at end of file diff --git a/packages/uikit-workshop/src/sass/scss/02-base/_body.scss b/packages/uikit-workshop/src/sass/scss/02-base/_body.scss index 90bc557f0..bda277ca3 100644 --- a/packages/uikit-workshop/src/sass/scss/02-base/_body.scss +++ b/packages/uikit-workshop/src/sass/scss/02-base/_body.scss @@ -17,3 +17,23 @@ -webkit-text-size-adjust: 100%; display: flex; // Required for IE 11 to display overall PL layout correctly } + +// @todo: refactor to make colors more generic to PL: +.pl-c-body--theme-dark, +:root { + --theme-bg: #161b3c; + --theme-primary: #464a6d; + --theme-secondary: #161f50; + --theme-text: white; + --theme-text-rgb: 255,255,255; + --theme-border: rgba(255, 255, 255, 0.2); +} + +.pl-c-body--theme-light { + --theme-bg: white; + --theme-secondary: white; + --theme-text: #262829; + --theme-text-rgb: 38, 40, 41; + --theme-primary: white; + --theme-border: #ddd; +} \ No newline at end of file diff --git a/packages/uikit-workshop/src/sass/scss/03-vendor/_prism.scss b/packages/uikit-workshop/src/sass/scss/03-vendor/_prism.scss index 1e7968b17..417be58ad 100644 --- a/packages/uikit-workshop/src/sass/scss/03-vendor/_prism.scss +++ b/packages/uikit-workshop/src/sass/scss/03-vendor/_prism.scss @@ -4,205 +4,208 @@ * Based on dabblet (http://dabblet.com) * @author Lea Verou */ -pre[class*='language-'] { - background-image: linear-gradient( - to right, - $pl-color-white, - rgba($pl-color-white, 0) - ), - linear-gradient(to left, $pl-color-white, rgba($pl-color-white, 0)), - linear-gradient(to right, #eaf0f6, rgba($pl-color-gray-07, 0)), - linear-gradient(to left, #eaf0f6, rgba($pl-color-gray-07, 0)), - linear-gradient(to bottom, $pl-color-white, rgba($pl-color-white, 0)), - linear-gradient(to top, $pl-color-white, rgba($pl-color-white, 0)), - linear-gradient(to bottom, #eaf0f6, rgba($pl-color-gray-07, 0)), - linear-gradient(to top, #eaf0f6, rgba($pl-color-gray-07, 0)); - background-color: $pl-color-white; - background-attachment: local, local, scroll, scroll, local, local, scroll, - scroll; - background-position: 0 0, 100% 0, 0 0, 100% 0, 0 0, 0 100%, 0 0, 0 100%; - background-size: 4em 100%, 4em 100%, 1em 100%, 1em 100%, 100% 4em, 100% 4em, - 100% 1em, 100% 1em; - background-repeat: no-repeat; - -ms-overflow-style: -ms-autohiding-scrollbar; - -webkit-overflow-scrolling: touch; - overflow: auto; -} - -code[class*='language-'], -pre[class*='language-'] { - color: black; - text-shadow: 0 1px white; - font-family: Consolas, Monaco, 'Andale Mono', monospace; - direction: ltr; - text-align: left; - white-space: pre; - word-spacing: normal; - word-break: normal; - line-height: 1.5; - word-wrap: normal; // fixes issue in Safari where code blocks can't scroll due to the code breaking into multiple lines unexpectedly - - -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; - - -webkit-hyphens: none; - -moz-hyphens: none; - -ms-hyphens: none; - hyphens: none; -} - -pre[class*='language-']::-moz-selection, -pre[class*='language-'] ::-moz-selection, -code[class*='language-']::-moz-selection, -code[class*='language-'] ::-moz-selection { - text-shadow: none; - background-color: #b3d4fc; -} - -pre[class*='language-']::selection, -pre[class*='language-'] ::selection, -code[class*='language-']::selection, -code[class*='language-'] ::selection { - text-shadow: none; - background-color: #b3d4fc; -} +.pl-c-tabs__panel { + pre[class*='language-'] { + background-image: linear-gradient( + to right, + $pl-color-white, + rgba($pl-color-white, 0) + ), + linear-gradient(to left, $pl-color-white, rgba($pl-color-white, 0)), + linear-gradient(to right, #eaf0f6, rgba($pl-color-gray-07, 0)), + linear-gradient(to left, #eaf0f6, rgba($pl-color-gray-07, 0)), + linear-gradient(to bottom, $pl-color-white, rgba($pl-color-white, 0)), + linear-gradient(to top, $pl-color-white, rgba($pl-color-white, 0)), + linear-gradient(to bottom, #eaf0f6, rgba($pl-color-gray-07, 0)), + linear-gradient(to top, #eaf0f6, rgba($pl-color-gray-07, 0)); + background-color: $pl-color-white; + background-attachment: local, local, scroll, scroll, local, local, scroll, + scroll; + background-position: 0 0, 100% 0, 0 0, 100% 0, 0 0, 0 100%, 0 0, 0 100%; + background-size: 4em 100%, 4em 100%, 1em 100%, 1em 100%, 100% 4em, 100% 4em, + 100% 1em, 100% 1em; + background-repeat: no-repeat; + -ms-overflow-style: -ms-autohiding-scrollbar; + -webkit-overflow-scrolling: touch; + overflow: auto; + max-height: 100%; + } -@media print { code[class*='language-'], pre[class*='language-'] { + color: black; + text-shadow: 0 1px white; + font-family: Consolas, Monaco, 'Andale Mono', monospace; + direction: ltr; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + line-height: 1.5; + word-wrap: normal; // fixes issue in Safari where code blocks can't scroll due to the code breaking into multiple lines unexpectedly + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; + } + + pre[class*='language-']::-moz-selection, + pre[class*='language-'] ::-moz-selection, + code[class*='language-']::-moz-selection, + code[class*='language-'] ::-moz-selection { text-shadow: none; + background-color: #b3d4fc; } -} -/* Code blocks */ -pre[class*='language-'] { - padding: 1em; - margin: 0.5em 0; - overflow: auto; -} + pre[class*='language-']::selection, + pre[class*='language-'] ::selection, + code[class*='language-']::selection, + code[class*='language-'] ::selection { + text-shadow: none; + background-color: #b3d4fc; + } -:not(pre) > code[class*='language-'], -pre[class*='language-'] { - background-color: #f5f2f0; -} + @media print { + code[class*='language-'], + pre[class*='language-'] { + text-shadow: none; + } + } -/* Inline code */ -:not(pre) > code[class*='language-'] { - padding: 0.1em; - border-radius: 0.3em; -} + /* Code blocks */ + pre[class*='language-'] { + padding: 1em; + margin: 0.5em 0; + overflow: scroll; + } -.token.comment, -.token.prolog, -.token.doctype, -.token.cdata { - color: slategray; -} + :not(pre) > code[class*='language-'], + pre[class*='language-'] { + background-color: #f5f2f0; + } -.token.punctuation { - color: #999; -} + /* Inline code */ + :not(pre) > code[class*='language-'] { + padding: 0.1em; + border-radius: 0.3em; + } -.namespace { - opacity: 0.7; -} + .token.comment, + .token.prolog, + .token.doctype, + .token.cdata { + color: slategray; + } -.token.property, -.token.tag, -.token.boolean, -.token.number, -.token.constant, -.token.symbol, -.token.deleted { - color: #905; -} + .token.punctuation { + color: #999; + } -.token.selector, -.token.attr-name, -.token.string, -.token.char, -.token.builtin, -.token.inserted { - color: #690; -} + .namespace { + opacity: 0.7; + } -.token.operator, -.token.entity, -.token.url, -.language-css .token.string, -.style .token.string { - color: #a67f59; - background-color: hsla(0, 0%, 100%, 0.5); -} + .token.property, + .token.tag, + .token.boolean, + .token.number, + .token.constant, + .token.symbol, + .token.deleted { + color: #905; + } -.token.atrule, -.token.attr-value, -.token.keyword { - color: #07a; -} + .token.selector, + .token.attr-name, + .token.string, + .token.char, + .token.builtin, + .token.inserted { + color: #690; + } -.token.function { - color: #dd4a68; -} + .token.operator, + .token.entity, + .token.url, + .language-css .token.string, + .style .token.string { + color: #a67f59; + background-color: hsla(0, 0%, 100%, 0.5); + } -.token.regex, -.token.important, -.token.variable { - color: #e90; -} + .token.atrule, + .token.attr-value, + .token.keyword { + color: #07a; + } -.token.important, -.token.bold { - font-weight: bold; -} -.token.italic { - font-style: italic; -} + .token.function { + color: #dd4a68; + } -.token.entity { - cursor: help; -} + .token.regex, + .token.important, + .token.variable { + color: #e90; + } -pre.line-numbers { - position: relative; - padding-left: 3.8em; - counter-reset: linenumber; -} + .token.important, + .token.bold { + font-weight: bold; + } + .token.italic { + font-style: italic; + } -pre.line-numbers > code { - position: relative; -} + .token.entity { + cursor: help; + } -.line-numbers .line-numbers-rows { - position: absolute; - pointer-events: none; - top: 0; - font-size: 100%; - left: -3.8em; - width: 3em; /* works for line-numbers below 1000 lines */ - letter-spacing: -1px; - border-right: 1px solid #999; - - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} + pre.line-numbers { + position: relative; + padding-left: 3.8em; + counter-reset: linenumber; + } -.line-numbers-rows > span { - pointer-events: none; - display: block; - counter-increment: linenumber; -} + pre.line-numbers > code { + position: relative; + } -.line-numbers-rows > span:before { - content: counter(linenumber); - color: #999; - display: block; - padding-right: 0.8em; - text-align: right; -} -.token a { - color: inherit; + .line-numbers .line-numbers-rows { + position: absolute; + pointer-events: none; + top: 0; + font-size: 100%; + left: -3.8em; + width: 3em; /* works for line-numbers below 1000 lines */ + letter-spacing: -1px; + border-right: 1px solid #999; + + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + } + + .line-numbers-rows > span { + pointer-events: none; + display: block; + counter-increment: linenumber; + } + + .line-numbers-rows > span:before { + content: counter(linenumber); + color: #999; + display: block; + padding-right: 0.8em; + text-align: right; + } + .token a { + color: inherit; + } } diff --git a/packages/uikit-workshop/src/sass/scss/04-components/_pattern-info.scss b/packages/uikit-workshop/src/sass/scss/04-components/_pattern-info.scss index c4e322a7f..221bf64a2 100644 --- a/packages/uikit-workshop/src/sass/scss/04-components/_pattern-info.scss +++ b/packages/uikit-workshop/src/sass/scss/04-components/_pattern-info.scss @@ -10,26 +10,40 @@ .pl-c-pattern-info { flex-grow: 1; // fills space available when placed in the parent flex container display: flex; - flex-direction: row; - flex-flow: row wrap; - width: 100%; - overflow: auto; - -webkit-overflow-scrolling: touch; + flex-direction: column; + /** * Pattern info inside the "view all" template */ .pl-c-pattern & { + max-height: 30rem; overflow: scroll; - @include hideScrollBar(); display: flex; -webkit-overflow-scrolling: touch; @media all and (min-width: $pl-bp-large) { max-height: none; + height: 18rem; + flex-direction: row; overflow: visible; } } + + /** + * Pattern info inside modal + */ + .pl-c-drawer & { + overflow: auto; + -webkit-overflow-scrolling: touch; + flex-grow: 1; + + + @media all and (min-width: $pl-bp-large) { + position: static; + flex-direction: row; + } + } } /** @@ -38,20 +52,50 @@ * Right side contains pattern code */ .pl-c-pattern-info__panel { - flex-basis: 40%; // fills up 100% if only one panel exists. using 40% vs 50% due to quirky behavior in IE 11 - padding-top: 1rem; - padding-right: 1rem; - padding-bottom: 0; - padding-left: 1rem; - margin-bottom: 1rem; - flex-grow: 1; - max-width: 100%; - max-height: 30rem; - min-width: 300px; // so panels stack automatically - display: inline-flex; + padding: 1rem; + width: 100%; + flex-shrink: 0; + display: flex; flex-direction: column; + max-height: 100%; overflow: auto; - -webkit-overflow-scrolling: touch; + + @media all and (min-width: $pl-bp-med) { + flex-basis: 50%; + flex-grow: 1; + } + + +} + +/** + * Pattern Info Panel + * 1) Left panel that contains pattern title, lineage, description, annotations + */ +.pl-c-pattern-info__panel--info { + + @media all and (min-width: $pl-bp-large) { + overflow: auto; + -webkit-overflow-scrolling: touch; + } + + @media all and (min-width: $pl-bp-xl) { + width: 55%; + } +} + +/** + * Pattern Code Panel + * 1) Right panel that displays the pattern's code (found in _tabs.scss) + * 2) Using a sibling selector because the pattern info isn't always present. + * The sibling selector allows the code panel to occupy the full width of + * the modal + * 1) Cap the height of the code panel in the modal + */ +.pl-c-pattern-info__panel--info + .pl-c-pattern-info__panel--code, +.pl-c-pattern-info__panel--code:first-child { + flex-grow: 1; + flex-shrink: 1; } /** diff --git a/packages/uikit-workshop/src/sass/scss/04-components/_tabs.scss b/packages/uikit-workshop/src/sass/scss/04-components/_tabs.scss index 09c36e122..86380c946 100644 --- a/packages/uikit-workshop/src/sass/scss/04-components/_tabs.scss +++ b/packages/uikit-workshop/src/sass/scss/04-components/_tabs.scss @@ -30,9 +30,7 @@ list-style: none; margin: 0; padding: 0.5rem 0; - padding-bottom: 0; background-color: $pl-color-white; - border-bottom: 1px solid rgba(0, 0, 0, .1); } /** @@ -41,15 +39,15 @@ .pl-c-tabs__link { display: block; line-height: 1; - border-bottom: 4px solid transparent; + padding: 0.2rem 0.4rem; + border: 1px solid transparent; + border-radius: $pl-border-radius-med; color: $pl-color-gray-50; background-color: $pl-color-white; cursor: pointer; text-decoration: none; - text-transform: uppercase; + text-transform: lowercase; transition: all $pl-animate-quick ease-out; - padding: 8px; - font-size: 13px; &:hover { color: $pl-color-gray-87; @@ -62,7 +60,8 @@ */ &.pl-is-active-tab { color: $pl-color-gray-87; - border-bottom-color: #bf6500; + background-color: $pl-color-gray-07; + border: 1px solid $pl-color-gray-13; } } @@ -71,11 +70,20 @@ * 1) Tab content contains the tab panels */ .pl-c-tabs__content { - overflow: auto; - -webkit-overflow-scrolling: touch; flex-grow: 1; + flex-shrink: 1; display: flex; - flex-direction: column; + flex-basis: auto; + overflow: auto; + -webkit-overflow-scrolling: touch; + height: 100%; + + /** + * Tab content inside modal + */ + .pl-c-drawer & { + border: 0; + } } /** @@ -85,11 +93,12 @@ */ .pl-c-tabs__panel { display: none; + width: 100%; + max-height: 100%; &.pl-is-active-tab { + display: block; display: flex; - height: 100%; - flex-grow: 1; } /** @@ -101,13 +110,10 @@ pre[class*='language-'] { background-color: transparent; margin: 0; - padding-top: 1rem; - padding-right: 0.5rem; - padding-bottom: 0.5rem; - padding-left: 0.5rem; + padding: 0; border: 0; display: block; - width: 100%; // fill parent container + width: 100%; } code[class*='language-'] { diff --git a/packages/uikit-workshop/src/sass/scss/04-components/_text-passage.scss b/packages/uikit-workshop/src/sass/scss/04-components/_text-passage.scss index 208332563..aac670507 100644 --- a/packages/uikit-workshop/src/sass/scss/04-components/_text-passage.scss +++ b/packages/uikit-workshop/src/sass/scss/04-components/_text-passage.scss @@ -13,6 +13,10 @@ p { margin-top: 0; margin-bottom: 1rem; + + &:last-child { + margin-bottom: 0; + } } /** diff --git a/packages/uikit-workshop/src/sass/scss/05-themes/_light-theme.scss b/packages/uikit-workshop/src/sass/scss/05-themes/_light-theme.scss index b74379c37..80f787e8b 100644 --- a/packages/uikit-workshop/src/sass/scss/05-themes/_light-theme.scss +++ b/packages/uikit-workshop/src/sass/scss/05-themes/_light-theme.scss @@ -7,6 +7,14 @@ * PL header and modal are light instead of dark */ .pl-c-body--theme-light { + /** + * Header + */ + .pl-c-header { + background-color: $pl-color-white; + border-bottom: 1px solid $pl-color-gray-20; + } + /** * Tools dropdown */ @@ -30,11 +38,10 @@ * Nav link dropdown */ .pl-c-nav__link--dropdown { - color: $pl-color-gray-70; - background-color: $pl-color-white; + color: inherit; &:after { - color: $pl-color-gray-20; + color: inherit; } } @@ -92,6 +99,15 @@ } } + /** + * Modal inside a light theme + */ + .pl-c-drawer { + background-color: $pl-color-white; + color: $pl-color-gray-70; + border-top: 1px solid $pl-color-gray-20; + } + /** * Modal close button * 1) Closes the modal popup diff --git a/packages/uikit-workshop/src/sass/scss/05-themes/_sidebar-theme.scss b/packages/uikit-workshop/src/sass/scss/05-themes/_sidebar-theme.scss index 9169d2577..fe80035a5 100644 --- a/packages/uikit-workshop/src/sass/scss/05-themes/_sidebar-theme.scss +++ b/packages/uikit-workshop/src/sass/scss/05-themes/_sidebar-theme.scss @@ -8,19 +8,27 @@ */ .pl-c-body--theme-sidebar { /** - * Logo - */ - .pl-c-logo { - max-width: 7rem; - margin: 0 auto 1rem; + * Header + * 1) Set width to sidebar width defined above + * 2) Make header 100% of the viewport height + * 3) Stack header items on top of each other + * 4) void bottom border for light theme + */ + .pl-c-header { + width: $pl-sidebar-width; /* 1 */ + height: 100vh; /* 2 */ + flex-direction: column; /* 3 */ + border-bottom: 0; /* 4 */ + justify-content: space-between; } /** * Nav sub sub list */ .pl-c-nav { - display: block; + flex-grow: 1; flex-direction: column; + flex-flow: column-reverse; } /** @@ -41,43 +49,6 @@ border-radius: 0; } - /** - * Nav sublist - */ - .pl-c-nav__sublist .pl-c-nav__link { - padding-left: 1rem; - } - - /** - * Nav sublist - */ - .pl-c-nav__sublist--dropdown.pl-is-active { - border: 0; - border-left: 1px solid $pl-color-gray-70; - } - - /** - * Nav sublist inside the light theme - */ - &.pl-c-body--theme-light { - .pl-c-nav__sublist--dropdown.pl-is-active { - border-left-color: $pl-color-gray-07; - } - } - - /** - * Dropdown sublist - * 1) Undo fixed height - */ - - /** - * Nav sub sub list - */ - .pl-c-nav__subsublist { - border-left: 1px solid $pl-color-gray-70; - margin-left: 1rem; - } - /** * Nav sublist inside the light theme */ @@ -118,10 +89,6 @@ margin-left: 0; } - .pl-c-viewport-size { - display: none; - } - /** * Tools toggle button */ diff --git a/packages/uikit-workshop/src/scripts/actions/app.js b/packages/uikit-workshop/src/scripts/actions/app.js old mode 100644 new mode 100755 index 899efce21..2b2f9813c --- a/packages/uikit-workshop/src/scripts/actions/app.js +++ b/packages/uikit-workshop/src/scripts/actions/app.js @@ -2,9 +2,31 @@ export const UPDATE_THEME_MODE = 'UPDATE_THEME_MODE'; export const UPDATE_LAYOUT_MODE = 'UPDATE_LAYOUT_MODE'; export const UPDATE_DRAWER_ANIMATION_STATE = 'UPDATE_DRAWER_ANIMATION_STATE'; export const UPDATE_DRAWER_STATE = 'UPDATE_DRAWER_STATE'; +export const UPDATE_VIEWPORT_PX = 'UPDATE_VIEWPORT_PX'; +export const UPDATE_VIEWPORT_EM = 'UPDATE_VIEWPORT_EM'; export const UPDATE_DRAWER_HEIGHT = 'UPDATE_DRAWER_HEIGHT'; +export const UPDATE_CURRENT_URL = 'UPDATE_CURRENT_URL'; +export const UPDATE_CURRENT_PATTERN = 'UPDATE_CURRENT_PATTERN'; export const IS_VIEWALL_PAGE = 'IS_VIEWALL_PAGE'; +export const updateCurrentPattern = currentPattern => (dispatch, getState) => { + if (getState().app.currentPattern !== currentPattern) { + dispatch({ + type: UPDATE_CURRENT_PATTERN, + currentPattern, + }); + } +}; + +export const updateCurrentUrl = currentUrl => (dispatch, getState) => { + if (getState().app.currentUrl !== currentUrl) { + dispatch({ + type: UPDATE_CURRENT_URL, + currentUrl, + }); + } +}; + export const updateLayoutMode = layoutMode => (dispatch, getState) => { if (getState().app.layoutMode !== layoutMode) { dispatch({ @@ -14,6 +36,24 @@ export const updateLayoutMode = layoutMode => (dispatch, getState) => { } }; +export const updateViewportPx = viewportPx => (dispatch, getState) => { + if (getState().app.viewportPx !== viewportPx) { + dispatch({ + type: UPDATE_VIEWPORT_PX, + viewportPx, + }); + } +}; + +export const updateViewportEm = viewportEm => (dispatch, getState) => { + if (getState().app.viewportEm !== viewportEm) { + dispatch({ + type: UPDATE_VIEWPORT_EM, + viewportEm, + }); + } +}; + export const updateThemeMode = themeMode => (dispatch, getState) => { if (getState().app.themeMode !== themeMode) { dispatch({ diff --git a/packages/uikit-workshop/src/scripts/components/base-component.js b/packages/uikit-workshop/src/scripts/components/base-component.js old mode 100644 new mode 100755 index 1e1594993..08073c7be --- a/packages/uikit-workshop/src/scripts/components/base-component.js +++ b/packages/uikit-workshop/src/scripts/components/base-component.js @@ -3,18 +3,21 @@ import withPreact from '@skatejs/renderer-preact'; import { store } from '../store.js'; import { extend, supportsShadowDom } from '../utils/index.js'; import { h } from 'preact'; +import withLitHtml from './with-lit-html'; export class BaseComponent extends withComponent(withPreact()) { get renderRoot() { - if (this.useShadow === true && supportsShadowDom) { - return super.renderRoot || shadow(this); - } else { - return this; - } + return this; + // @todo: re-enable Shadow DOM conditionally after further testing + making sure PL components have inline styles needed + // if (this.useShadow === true && supportsShadowDom) { + // return super.renderRoot || shadow(this); + // } else { + // return this; + // } } disconnectedCallback() { - this.__storeUnsubscribe(); + this.__storeUnsubscribe && this.__storeUnsubscribe(); if (super.disconnectedCallback) { super.disconnectedCallback(); @@ -32,7 +35,8 @@ export class BaseComponent extends withComponent(withPreact()) { } _stateChanged(state) { - throw new Error('_stateChanged() not implemented', this); + // throw new Error('_stateChanged() not implemented', this); + this.triggerUpdate(); } /** @@ -44,20 +48,7 @@ export class BaseComponent extends withComponent(withPreact()) { * updated */ setState(state, callback) { - if (!this._prevState) { - this._prevState = this.state; - } - - this.state = extend( - extend({}, this.state), - typeof state === 'function' ? state(this.state, this.props) : state - ); - - if (callback) { - this._renderCallbacks.push(callback); - } - - this.triggerUpdate(); + this.state = Object.assign({}, this.state, state); } _renderStyles(stylesheets) { @@ -71,3 +62,43 @@ export class BaseComponent extends withComponent(withPreact()) { } } } + +export class BaseLitComponent extends withComponent(withLitHtml()) { + get renderRoot() { + return this; + } + + disconnectedCallback() { + this.__storeUnsubscribe(); + + if (super.disconnectedCallback) { + super.disconnectedCallback(); + } + } + + connectedCallback() { + this.__storeUnsubscribe = store.subscribe(() => + this._stateChanged(store.getState()) + ); + this._stateChanged(store.getState()); + if (super.connectedCallback) { + super.connectedCallback(); + } + } + + _stateChanged(state) { + this.triggerUpdate(); + } + + /** + * Update component state and schedule a re-render. + * @param {object} state A dict of state properties to be shallowly merged + * into the current state, or a function that will produce such a dict. The + * function is called with the current state and props. + * @param {() => void} callback A function to be called once component state is + * updated + */ + setState(state, callback) { + this.state = Object.assign({}, this.state, state); + } +} diff --git a/packages/uikit-workshop/src/scripts/components/copy-to-clipboard.js b/packages/uikit-workshop/src/scripts/components/copy-to-clipboard.js new file mode 100644 index 000000000..3cc09ed68 --- /dev/null +++ b/packages/uikit-workshop/src/scripts/components/copy-to-clipboard.js @@ -0,0 +1,14 @@ +/** + * Copy to clipboard functionality for code snippet examples + */ + +import Clipboard from 'clipboard'; + +const clipboard = new Clipboard('.pl-js-code-copy-btn'); +clipboard.on('success', function(e) { + const copyButton = document.querySelectorAll('.pl-js-code-copy-btn'); + for (let i = 0; i < copyButton.length; i++) { + copyButton[i].innerText = 'Copy'; + } + e.trigger.textContent = 'Copied'; +}); diff --git a/packages/uikit-workshop/src/scripts/components/modal-styleguide.js b/packages/uikit-workshop/src/scripts/components/modal-styleguide.js old mode 100644 new mode 100755 index 7c31a3eba..c3006251c --- a/packages/uikit-workshop/src/scripts/components/modal-styleguide.js +++ b/packages/uikit-workshop/src/scripts/components/modal-styleguide.js @@ -79,9 +79,13 @@ export const modalStyleguide = { .appendChild(content); // show the modal - document - .getElementById('pl-pattern-extra-toggle-' + patternPartial) - .classList.add('pl-is-active'); + const toggle = document.getElementById( + 'pl-pattern-extra-toggle-' + patternPartial + ); + if (toggle) { + toggle.classList.add('pl-is-active'); + } + document .getElementById('pl-pattern-extra-' + patternPartial) .classList.add('pl-is-active'); @@ -96,9 +100,13 @@ export const modalStyleguide = { modalStyleguide.active[patternPartial] = false; // hide the modal, look at info-panel.js - document - .getElementById('pl-pattern-extra-toggle-' + patternPartial) - .classList.remove('pl-is-active'); + const toggle = document.getElementById( + 'pl-pattern-extra-toggle-' + patternPartial + ); + if (toggle) { + toggle.classList.remove('pl-is-active'); + } + document .getElementById('pl-pattern-extra-' + patternPartial) .classList.remove('pl-is-active'); diff --git a/packages/uikit-workshop/src/scripts/components/modal-viewer.js b/packages/uikit-workshop/src/scripts/components/modal-viewer.js index c2bf7cabb..f639b9426 100644 --- a/packages/uikit-workshop/src/scripts/components/modal-viewer.js +++ b/packages/uikit-workshop/src/scripts/components/modal-viewer.js @@ -2,7 +2,7 @@ * "Modal" (aka Panel UI) for the Viewer Layer - for both annotations and code/info */ -import Scroll from 'scroll-js'; +import { scrollTo } from 'scroll-js'; import { urlHandler, Dispatcher } from '../utils'; import { panelsViewer } from './panels-viewer'; import { store } from '../store.js'; @@ -11,6 +11,7 @@ import { updateDrawerState, isViewallPage } from '../actions/app.js'; export const modalViewer = { // set up some defaults + delayCheckingModalViewer: false, iframeElement: document.querySelector('.pl-js-iframe'), active: false, switchText: true, @@ -25,6 +26,7 @@ export const modalViewer = { * initialize the modal window */ onReady() { + window.addEventListener('message', modalViewer.receiveIframeMessage, false); // make sure the listener for checkpanels is set-up Dispatcher.addListener('insertPanels', modalViewer.insert); @@ -75,10 +77,21 @@ export const modalViewer = { event: 'patternLab.annotationsHighlightShow', annotations: modalViewer.patternData.annotations, }); - modalViewer.iframeElement.contentWindow.postMessage( - obj, - modalViewer.targetOrigin - ); + + if (modalViewer.iframeElement.contentWindow) { + modalViewer.iframeElement.contentWindow.postMessage( + obj, + modalViewer.targetOrigin + ); + } else { + modalViewer.iframeElement = document.querySelector('.pl-js-iframe'); + + if (modalViewer.iframeElement.contentWindow) { + modalViewer.open(); + } else { + console.log('modelViewer open cannot find the iframeElement...'); + } + } } } }, @@ -91,18 +104,31 @@ export const modalViewer = { const obj = JSON.stringify({ event: 'patternLab.patternModalClose', }); - modalViewer.iframeElement.contentWindow.postMessage( - obj, - modalViewer.targetOrigin - ); - const obj2 = JSON.stringify({ - event: 'patternLab.annotationsHighlightHide', - }); - modalViewer.iframeElement.contentWindow.postMessage( - obj2, - modalViewer.targetOrigin - ); + if (modalViewer.iframeElement) { + if (modalViewer.iframeElement.contentWindow) { + modalViewer.iframeElement.contentWindow.postMessage( + obj, + modalViewer.targetOrigin + ); + + const obj2 = JSON.stringify({ + event: 'patternLab.annotationsHighlightHide', + }); + modalViewer.iframeElement.contentWindow.postMessage( + obj2, + modalViewer.targetOrigin + ); + } else { + modalViewer.iframeElement = document.querySelector('.pl-js-iframe'); + + if (modalViewer.iframeElement.contentWindow) { + modalViewer.close(); + } else { + console.log('modelViewer close cannot find the iframeElement...'); + } + } + } }, /** @@ -120,10 +146,20 @@ export const modalViewer = { patternPartial, modalContent: templateRendered.outerHTML, }); - modalViewer.iframeElement.contentWindow.postMessage( - obj, - modalViewer.targetOrigin - ); + if (modalViewer.iframeElement.contentWindow) { + modalViewer.iframeElement.contentWindow.postMessage( + obj, + modalViewer.targetOrigin + ); + } else { + modalViewer.iframeElement = document.querySelector('.pl-js-iframe'); + + if (modalViewer.iframeElement.contentWindow) { + modalViewer.insert(templateRendered, patternPartial, iframePassback); + } else { + console.log('modelViewer insert cannot find the iframeElement...'); + } + } } else { const contentContainer = document.querySelector('.pl-js-drawer-content'); @@ -174,20 +210,19 @@ export const modalViewer = { } const patternInfoElem = document.querySelector('.pl-js-pattern-info'); - const scroll = new Scroll(patternInfoElem); + // const scroll = new Scroll(patternInfoElem); // add active class to called element and scroll to it for (let i = 0; i < els.length; ++i) { if (i + 1 === pos) { els[i].classList.add('pl-is-active'); - scroll - .to(patternInfoElem.offsetTop, els[i].offsetTop - 14, { - duration: 600, - }) - .then(function() { - // console.log('finished scrolling'); - }); + scrollTo(patternInfoElem, document.body, { + top: els[i].offsetTop - 14, + behavior: 'smooth', + }).then(function() { + // console.log('finished scrolling'); + }); } } }, @@ -202,10 +237,34 @@ export const modalViewer = { event: 'patternLab.patternQuery', switchText, }); - modalViewer.iframeElement.contentWindow.postMessage( - obj, - modalViewer.targetOrigin - ); + + // only emit this when the iframe element exists. + // @todo: refactor to better handle async UI rendering + if (modalViewer.iframeElement) { + if (modalViewer.iframeElement.contentWindow) { + modalViewer.iframeElement.contentWindow.postMessage( + obj, + modalViewer.targetOrigin + ); + } else { + modalViewer.iframeElement = document.querySelector('.pl-js-iframe'); + + if (modalViewer.iframeElement.contentWindow) { + modalViewer.queryPattern(switchText); + } else { + console.log('queryPattern cannot find the iframeElement...'); + } + } + } else { + modalViewer.iframeElement = document.querySelector('.pl-js-iframe'); + + if (modalViewer.iframeElement.contentWindow) { + modalViewer.iframeElement.contentWindow.postMessage( + obj, + modalViewer.targetOrigin + ); + } + } }, /** @@ -232,6 +291,12 @@ export const modalViewer = { } if (data.event !== undefined && data.event === 'patternLab.pageLoad') { + // @todo: refactor to better handle async iframe loading + // extra check to make sure the PL drawer will always render even if the iframe gets async loaded / rendered. + if (modalViewer.delayCheckingModalViewer) { + modalViewer._handleInitialModalViewerState(); + } + if ( data.patternpartial.indexOf('viewall-') === 0 || data.patternpartial.indexOf('all') === 0 @@ -280,17 +345,32 @@ export const modalViewer = { } }, - _stateChanged(state) { - modalViewer.active = state.app.drawerOpened; + _handleInitialModalViewerState() { + // try to re-locate the iframe element if this UI logic ran too early and the iframe component wasn't yet rendered + if (!modalViewer.iframeElement) { + modalViewer.iframeElement = document.querySelector('.pl-js-iframe'); + } - if (modalViewer.active) { - modalViewer.open(); + // only try to auto-open / auto-close the drawer UI if the iframe element exists + // @todo: refactor to better handle async UI rendering + if (modalViewer.iframeElement) { + modalViewer.delayCheckingModalViewer = false; + if (modalViewer.active) { + modalViewer.open(); + } else { + modalViewer.close(); + } } else { - modalViewer.close(); + modalViewer.delayCheckingModalViewer = true; + } + }, + + _stateChanged(state) { + modalViewer.active = state.app.drawerOpened; + if (modalViewer.iframeElement) { + modalViewer._handleInitialModalViewerState(); } }, }; modalViewer.onReady(); - -window.addEventListener('message', modalViewer.receiveIframeMessage, false); diff --git a/packages/uikit-workshop/src/scripts/components/panels-util.js b/packages/uikit-workshop/src/scripts/components/panels-util.js index 8a9c6d0ac..0e896f4a5 100644 --- a/packages/uikit-workshop/src/scripts/components/panels-util.js +++ b/packages/uikit-workshop/src/scripts/components/panels-util.js @@ -31,22 +31,24 @@ export const panelsUtil = { show(patternPartial, panelID) { const activeTabClass = 'pl-is-active-tab'; + // tabPanelabout to become active + const activeTabPanel = document.querySelector( + `#pl-${patternPartial}-${panelID}-panel` + ); + + const parentTabs = activeTabPanel.closest('.pl-js-tabs'); + // turn off all of the active tabs - const allTabLinks = document.querySelectorAll(`.pl-js-tab-link`); + const allTabLinks = parentTabs.querySelectorAll(`.pl-js-tab-link`); // hide all of the panels - const allTabPanels = document.querySelectorAll(`.pl-js-tab-panel`); + const allTabPanels = parentTabs.querySelectorAll(`.pl-js-tab-panel`); // tabLink about to become active - const activeTabLink = document.querySelector( + const activeTabLink = parentTabs.querySelector( `#pl-${patternPartial}-${panelID}-tab` ); - // tabPanelabout to become active - const activeTabPanel = document.querySelector( - `#pl-${patternPartial}-${panelID}-panel` - ); - for (let i = 0; i < allTabLinks.length; ++i) { allTabLinks[i].classList.remove(activeTabClass); } diff --git a/packages/uikit-workshop/src/scripts/components/panels-viewer.js b/packages/uikit-workshop/src/scripts/components/panels-viewer.js old mode 100644 new mode 100755 index 3471cd7ae..86455c6f3 --- a/packages/uikit-workshop/src/scripts/components/panels-viewer.js +++ b/packages/uikit-workshop/src/scripts/components/panels-viewer.js @@ -2,13 +2,28 @@ * Panel Builder - supports building the panels to be included in the modal or styleguide */ -import $ from 'jquery'; import Hogan from 'hogan.js'; -import Prism from 'prismjs'; +import Normalizer from 'prismjs/plugins/normalize-whitespace/prism-normalize-whitespace.js'; +import pretty from 'pretty'; +import { html, render } from 'lit-html'; +import { unsafeHTML } from 'lit-html/directives/unsafe-html.js'; import { Panels } from './panels'; import { panelsUtil } from './panels-util'; import { urlHandler, Dispatcher } from '../utils'; import './pl-copy-to-clipboard/pl-copy-to-clipboard'; +import { PrismLanguages as Prism } from './prism-languages'; + +const normalizeWhitespace = new Normalizer({ + 'remove-trailing': true, + 'remove-indent': true, + 'left-trim': true, + 'right-trim': true, + 'break-lines': 100, + indent: 2, + 'remove-initial-line-feed': true, + 'tabs-to-spaces': 2, + 'spaces-to-tabs': 2, +}); export const panelsViewer = { // set up some defaults @@ -54,7 +69,7 @@ export const panelsViewer = { Dispatcher.addListener('checkPanels', panelsViewer.checkPanels); // set-up defaults - let template, templateCompiled, templateRendered; + let template, templateCompiled, templateRendered, templateFormatted; // get the base panels const panels = Panels.get(); @@ -71,6 +86,10 @@ export const panelsViewer = { } // if httpRequestReplace has not been set, use the extension. this is likely for the raw template + if (panel.httpRequestReplace === undefined) { + panel.httpRequestReplace = ''; + } + if (panel.httpRequestReplace === '') { panel.httpRequestReplace = panel.httpRequestReplace + '.' + patternData.patternExtension; @@ -88,17 +107,47 @@ export const panelsViewer = { /* eslint-disable */ e.onload = (function(i, panels, patternData, iframeRequest) { return function() { - const prismedContent = Prism.highlight( - this.responseText, - Prism.languages.html + // use pretty to format HTML + if (panels[i].name === 'HTML') { + templateFormatted = pretty(this.responseText, { ocd: true }); + } else { + templateFormatted = this.responseText; + } + + const templateHighlighted = Prism.highlight( + templateFormatted, + Prism.languages[panels[i].name.toLowerCase()] || 'markup' + // Prism.languages[panels[i].name.toLowerCase()], ); - template = document.getElementById(panels[i].templateID); - templateCompiled = Hogan.compile(template.innerHTML); - templateRendered = templateCompiled.render({ - language: 'html', - code: prismedContent, - }); - panels[i].content = templateRendered; + + const codeTemplate = (code, language) => + html` +
${unsafeHTML(
+                    code
+                  )}
+ `; + + const result = document.createDocumentFragment(); + const fallBackResult = document.createDocumentFragment(); + + render(codeTemplate(templateHighlighted, 'html'), result); + render(codeTemplate(templateFormatted, 'html'), fallBackResult); + + if (result.children) { + panels[i].content = result.children[0].outerHTML; + } else if (fallBackResult.children) { + panels[i].content = fallBackResult.children[0].outerHTML; + } else { + panels[i].content = + '
' +
+                  templateFormatted
+                    .replace(//g, '>') +
+                  '
'; + } + Dispatcher.trigger('checkPanels', [ panels, patternData, @@ -119,7 +168,15 @@ export const panelsViewer = { template = document.getElementById(panel.templateID); templateCompiled = Hogan.compile(template.innerHTML); templateRendered = templateCompiled.render(patternData); - panels[i].content = templateRendered; + const normalizedCode = normalizeWhitespace.normalize( + templateRendered + ); + normalizedCode.replace(/[\r\n]+/g, '\n\n'); + const highlightedCode = Prism.highlight( + normalizedCode, + Prism.languages.html + ); + panels[i].content = highlightedCode; Dispatcher.trigger('checkPanels', [ panels, patternData, @@ -274,16 +331,17 @@ export const panelsViewer = { } // find lineage links in the rendered content and add postmessage handlers in case it's in the modal - $('.pl-js-lineage-link', templateRendered).on('click', function(e) { - e.preventDefault(); - const obj = JSON.stringify({ - event: 'patternLab.updatePath', - path: urlHandler.getFileName($(this).attr('data-patternpartial')), - }); - document - .querySelector('.pl-js-iframe') - .contentWindow.postMessage(obj, panelsViewer.targetOrigin); - }); + // @todo: refactor and re-enable + // $('.pl-js-lineage-link', templateRendered).on('click', function(e) { + // e.preventDefault(); + // const obj = JSON.stringify({ + // event: 'patternLab.updatePath', + // path: urlHandler.getFileName($(this).attr('data-patternpartial')), + // }); + // document + // .querySelector('.pl-js-iframe') + // .contentWindow.postMessage(obj, panelsViewer.targetOrigin); + // }); // gather panels from plugins Dispatcher.trigger('insertPanels', [ @@ -307,19 +365,3 @@ export const panelsViewer = { * 5) Add mouseup event to the body so that when drag is released, the modal * stops resizing and modal cover doesn't display anymore. */ -$('.pl-js-modal-resizer').mousedown(function(event) { - /* 1 */ - - $('.pl-js-modal-cover').css('display', 'block'); /* 2 */ - - $('.pl-js-modal-cover').mousemove(function(e) { - /* 3 */ - const panelHeight = window.innerHeight - e.clientY + 32; /* 4 */ - $('.pl-js-modal').css('height', panelHeight + 'px'); /* 4 */ - }); -}); - -$('body').mouseup(function() { - $('.pl-js-modal').unbind('mousemove'); /* 5 */ - $('.pl-js-modal-cover').css('display', 'none'); /* 5 */ -}); diff --git a/packages/uikit-workshop/src/scripts/components/panels.js b/packages/uikit-workshop/src/scripts/components/panels.js index 1b37959aa..cfa45a6aa 100644 --- a/packages/uikit-workshop/src/scripts/components/panels.js +++ b/packages/uikit-workshop/src/scripts/components/panels.js @@ -4,7 +4,7 @@ * note: config is coming from the default viewer and is passed through from PL's config */ -import { PrismLanguages } from './prism-languages'; +import { PrismLanguages as Prism } from './prism-languages'; import { Dispatcher } from '../utils'; export const Panels = { @@ -15,7 +15,7 @@ export const Panels = { }, get() { - return JSON.parse(JSON.stringify(this.panels)); + return JSON.parse(JSON.stringify(Panels.panels)); }, add(panel) { @@ -46,45 +46,53 @@ export const Panels = { }, }; -const fileSuffixPattern = - window.config.outputFileSuffixes !== undefined && - window.config.outputFileSuffixes.rawTemplate !== undefined - ? window.config.outputFileSuffixes.rawTemplate - : ''; -const fileSuffixMarkup = - window.config.outputFileSuffixes !== undefined && - window.config.outputFileSuffixes.markupOnly !== undefined - ? window.config.outputFileSuffixes.markupOnly - : '.markup-only'; +function init(event) { + // does the origin sending the message match the current host? if not dev/null the request -// add the default panels -// Panels.add({ 'id': 'pl-panel-info', 'name': 'info', 'default': true, 'templateID': 'pl-panel-template-info', 'httpRequest': false, 'prismHighlight': false, 'keyCombo': '' }); -// TODO: sort out pl-panel-html -Panels.add({ - id: 'pl-panel-pattern', - name: window.config.patternExtension.toUpperCase(), - default: true, - templateID: 'pl-panel-template-code', - httpRequest: true, - httpRequestReplace: fileSuffixPattern, - httpRequestCompleted: false, - prismHighlight: true, - language: PrismLanguages.get(window.config.patternExtension), - keyCombo: 'ctrl+shift+u', -}); + const fileSuffixPattern = + window.config.outputFileSuffixes !== undefined && + window.config.outputFileSuffixes.rawTemplate !== undefined + ? window.config.outputFileSuffixes.rawTemplate + : ''; -Panels.add({ - id: 'pl-panel-html', - name: 'HTML', - default: false, - templateID: 'pl-panel-template-code', - httpRequest: true, - httpRequestReplace: fileSuffixMarkup + '.html', - httpRequestCompleted: false, - prismHighlight: true, - language: 'markup', - keyCombo: 'ctrl+shift+y', -}); + const fileSuffixMarkup = + window.config.outputFileSuffixes !== undefined && + window.config.outputFileSuffixes.markupOnly !== undefined + ? window.config.outputFileSuffixes.markupOnly + : '.markup-only'; + + // add the default panels + // Panels.add({ 'id': 'pl-panel-info', 'name': 'info', 'default': true, 'templateID': 'pl-panel-template-info', 'httpRequest': false, 'prismHighlight': false, 'keyCombo': '' }); + const languages = Object.keys(Prism.languages); + // TODO: sort out pl-panel-html + Panels.add({ + id: 'pl-panel-pattern', + name: window.config.patternExtension.toUpperCase(), + default: true, + templateID: 'pl-panel-template-code', + httpRequest: true, + httpRequestReplace: fileSuffixPattern, + httpRequestCompleted: false, + prismHighlight: true, + language: languages[window.config.patternExtension], + keyCombo: 'ctrl+shift+u', + }); + + Panels.add({ + id: 'pl-panel-html', + name: 'HTML', + default: false, + templateID: 'pl-panel-template-code', + httpRequest: true, + httpRequestReplace: fileSuffixMarkup + '.html', + httpRequestCompleted: false, + prismHighlight: true, + language: 'markup', + keyCombo: 'ctrl+shift+y', + }); +} // gather panels from plugins Dispatcher.trigger('setupPanels'); + +init(); diff --git a/packages/uikit-workshop/src/scripts/components/pl-controls/pl-controls.js b/packages/uikit-workshop/src/scripts/components/pl-controls/pl-controls.js old mode 100644 new mode 100755 index eda96d7e0..ea1be3a16 --- a/packages/uikit-workshop/src/scripts/components/pl-controls/pl-controls.js +++ b/packages/uikit-workshop/src/scripts/components/pl-controls/pl-controls.js @@ -1,5 +1,6 @@ import { define, props } from 'skatejs'; import { h } from 'preact'; + const classNames = require('classnames'); import { urlHandler, patternName } from '../../utils'; @@ -7,7 +8,7 @@ import { store } from '../../store.js'; // connect to redux import { BaseComponent } from '../base-component.js'; import { ViewportSize } from '../pl-viewport-size/pl-viewport-size'; -import { ViewportSizeList } from '../pl-viewport-size-list/pl-viewport-size-list'; +import { ViewportSizes } from '../pl-viewport-size-list/pl-viewport-size-list'; @define class Controls extends BaseComponent { @@ -15,19 +16,37 @@ class Controls extends BaseComponent { constructor(self) { self = super(self); - this.useShadow = false; + self.useShadow = false; + self.state = { + pxSize: '', + emSize: '', + }; return self; } - _stateChanged(state) {} + _stateChanged(state) { + this.setState({ + pxSize: state.app.viewportPx || '', + emSize: state.app.viewportEm || '', + }); + } + + connected() { + const state = store.getState(); + + this.setState({ + pxSize: state.app.viewportPx || '', + emSize: state.app.viewportEm || '', + }); + } render() { - const { ishControlsHide } = window.ishControls; + const { pxSize, emSize } = this.state; return (
- - + +
); diff --git a/packages/uikit-workshop/src/scripts/components/pl-controls/pl-controls.scss b/packages/uikit-workshop/src/scripts/components/pl-controls/pl-controls.scss old mode 100644 new mode 100755 index 19d725145..61f23a368 --- a/packages/uikit-workshop/src/scripts/components/pl-controls/pl-controls.scss +++ b/packages/uikit-workshop/src/scripts/components/pl-controls/pl-controls.scss @@ -6,12 +6,31 @@ pl-controls { margin-left: auto; /* 2 */ display: flex; flex-wrap: nowrap; + align-self: center; + padding: 0 0.5rem; .pl-c-body--theme-sidebar & { display: block; @media all and (min-width: $pl-bp-med) { width: 100%; + position: relative; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + box-shadow: 0 -2px 5px rgba($pl-color-black, 0.1); + + &:before { + position: absolute; + left: 0; + right: 0; + top: 0; + border-top: 1px solid; + border-top-color: $pl-color-gray-20; + border-top-color: var(--theme-border, $pl-color-gray-20); + height: 1px; + content: ''; + width: auto; + } } } } diff --git a/packages/uikit-workshop/src/scripts/components/pl-drawer/pl-drawer.js b/packages/uikit-workshop/src/scripts/components/pl-drawer/pl-drawer.js old mode 100644 new mode 100755 index 1c35b77cb..d2e22d495 --- a/packages/uikit-workshop/src/scripts/components/pl-drawer/pl-drawer.js +++ b/packages/uikit-workshop/src/scripts/components/pl-drawer/pl-drawer.js @@ -1,16 +1,16 @@ import { define, props } from 'skatejs'; import { h } from 'preact'; + import { store } from '../../store.js'; // redux store import { updateDrawerState, updateDrawerHeight, updateDrawerAnimationState, - // updateAppHeight, - // updateViewportHeight, } from '../../actions/app.js'; // redux actions needed by this element. import { css } from '../../utils'; import { BaseComponent } from '../base-component.js'; import AnimateHeight from 'react-animate-height'; +import CloseIcon from '../../../icons/close.svg'; @define export class Drawer extends BaseComponent { @@ -18,9 +18,10 @@ export class Drawer extends BaseComponent { constructor(self) { self = super(self); - this.onMouseDown = this.onMouseDown.bind(this); // fix bindings so "this" works properly - this.onMouseUp = this.onMouseUp.bind(this); // fix bindings so "this" works properly - this.onMouseMove = this.onMouseMove.bind(this); // fix bindings so "this" works properly + self.onMouseDown = self.onMouseDown.bind(self); // fix bindings so "self" works properly + self.onMouseUp = self.onMouseUp.bind(self); // fix bindings so "self" works properly + self.onMouseMove = self.onMouseMove.bind(self); // fix bindings so "this" works properly + self.useShadow = false; return self; } @@ -79,10 +80,6 @@ export class Drawer extends BaseComponent { drawerOpened: props.boolean, }; - get renderRoot() { - return this; - } - render({ drawerOpened, drawerHeight, isViewallPage }) { const classes = css( 'pl-c-drawer', @@ -92,7 +89,9 @@ export class Drawer extends BaseComponent { const height = drawerOpened && !isViewallPage - ? drawerHeight > 20 ? drawerHeight : 300 + ? drawerHeight > 20 + ? drawerHeight + : 300 : 0; return ( @@ -113,27 +112,21 @@ export class Drawer extends BaseComponent { onMouseDown={this.onMouseDown} />
- {/* @todo: look into why this isn't re-rendering correctly */} + {/* */} +
diff --git a/packages/uikit-workshop/src/scripts/components/pl-drawer/pl-drawer.scss b/packages/uikit-workshop/src/scripts/components/pl-drawer/pl-drawer.scss index 375200769..7b0d9d228 100755 --- a/packages/uikit-workshop/src/scripts/components/pl-drawer/pl-drawer.scss +++ b/packages/uikit-workshop/src/scripts/components/pl-drawer/pl-drawer.scss @@ -15,13 +15,9 @@ pl-drawer { right: 0; z-index: 20; overflow: visible; - - .pl-c-body--theme-light & { - // Modal / Drawer inside a light theme - background-color: $pl-color-white; - color: $pl-color-gray-70; - border-top: 1.1px solid $pl-color-gray-20; // sub-pixel bug in Chrome. border disappears sometimes when set to 1px - } + border-top: 1.1px solid $pl-color-gray-20; // sub-pixel bug in Chrome. border disappears sometimes when set to 1px + border-top-color: $pl-color-gray-20; + border-top-color: var(--theme-border, $pl-color-gray-20); } @@ -34,6 +30,7 @@ pl-drawer { flex-direction: column; font-family: $pl-font; background-color: $pl-color-gray-87; + background-color: var(--theme-secondary, $pl-color-gray-87); color: $pl-color-gray-20; width: 100%; height: 100%; @@ -110,9 +107,10 @@ pl-drawer { .pl-c-drawer__close-btn { @include linkStyle; margin: 0; + padding: 0.2rem; -webkit-appearance: none; flex-shrink: 0; // needed for IE 11 - + @media all and (max-width: $pl-bp-med - 1) { border-radius: 20rem; padding-top: 0.5rem; @@ -188,8 +186,8 @@ pl-drawer { * 1) Displayed as an e */ .pl-c-drawer__close-btn-icon { - width: 12px; - height: 12px; + width: 20px; + height: 20px; color: currentColor; fill: currentColor; transition: fill $pl-animate-quick ease-out; diff --git a/packages/uikit-workshop/src/scripts/components/pl-header/pl-header.js b/packages/uikit-workshop/src/scripts/components/pl-header/pl-header.js old mode 100644 new mode 100755 index 1d56add10..ed28ab9ee --- a/packages/uikit-workshop/src/scripts/components/pl-header/pl-header.js +++ b/packages/uikit-workshop/src/scripts/components/pl-header/pl-header.js @@ -4,6 +4,8 @@ const classNames = require('classnames'); import { store } from '../../store.js'; // connect to redux import { BaseComponent } from '../base-component.js'; +import MenuIcon from '../../../icons/menu.svg'; +import VisuallyHidden from '@reach/visually-hidden'; @define class Header extends BaseComponent { @@ -11,27 +13,51 @@ class Header extends BaseComponent { constructor(self) { self = super(self); - this.useShadow = false; - this.toggleNav = this.toggleNav.bind(this); + self.useShadow = false; + self.toggleNav = self.toggleNav.bind(self); return self; } - _stateChanged(state) {} + connected() { + const state = store.getState(); + this.themeMode = state.app.themeMode || 'dark'; + } + + static props = { + themeMode: props.string, + }; + + _stateChanged(state) { + this.themeMode = state.app.themeMode || 'dark'; + this.triggerUpdate(); + } + + shouldUpdate(prevProps, prevState) { + return true; + } toggleNav() { const navTarget = this.querySelector('.pl-js-nav-target'); navTarget.classList.toggle('pl-is-active'); // @todo: refactor to have this add based on the component's state } - render() { + render({ themeMode }) { return ( ); } diff --git a/packages/uikit-workshop/src/scripts/components/pl-header/pl-header.scss b/packages/uikit-workshop/src/scripts/components/pl-header/pl-header.scss old mode 100644 new mode 100755 index bd275661e..4a53f4805 --- a/packages/uikit-workshop/src/scripts/components/pl-header/pl-header.scss +++ b/packages/uikit-workshop/src/scripts/components/pl-header/pl-header.scss @@ -3,18 +3,37 @@ \*------------------------------------*/ pl-header { - position: fixed; + position: relative; position: sticky; top: 0; left: 0; - z-index: 4; + z-index: 100; display: flex; /* 2 */ width: 100%; background-color: $pl-color-black; - color: $pl-color-gray-50; + background-color: var(--theme-secondary, $pl-color-black); + max-height: 100vh; + + color: $pl-color-gray-20; + color: var(--theme-text, $pl-color-gray-20); + border-right: 1px solid; + border-bottom: 1px solid; + border-right-color: $pl-color-gray-20; + border-right-color: var(--theme-border, $pl-color-gray-20); + border-bottom-color: $pl-color-gray-20; + border-bottom-color: var(--theme-border, $pl-color-gray-20); + box-shadow: 0 8px 15px 1px rgba(6, 10, 36, 0.1),0 18px 24px 1px rgba(6, 10, 36, 0.12); + + .pl-c-body--theme-light & { + color: $pl-color-black; + background-color: $pl-color-white; + border-bottom: 1px solid $pl-color-gray-20; + } @media all and (min-width: $pl-bp-med) { .pl-c-body--theme-sidebar & { + position: fixed; + position: sticky; /** * Header * 1) Set width to sidebar width defined above @@ -23,19 +42,10 @@ pl-header { * 4) void bottom border for light theme */ width: $pl-sidebar-width; /* 1 */ - height: 100vh; /* 2 */ - overflow: auto; - padding: 1rem; - -webkit-overflow-scrolling: touch; border-bottom: 0; /* 4 */ } } - .pl-c-body--theme-light & { - border-right: 1px solid $pl-color-gray-20; - background-color: $pl-color-white; - border-bottom: 1px solid $pl-color-gray-20; - } } /** diff --git a/packages/uikit-workshop/src/scripts/components/pl-layout/pl-layout.js b/packages/uikit-workshop/src/scripts/components/pl-layout/pl-layout.js old mode 100644 new mode 100755 index 856e9a3ce..f41f2005e --- a/packages/uikit-workshop/src/scripts/components/pl-layout/pl-layout.js +++ b/packages/uikit-workshop/src/scripts/components/pl-layout/pl-layout.js @@ -1,27 +1,21 @@ import { define, props } from 'skatejs'; -import { h } from 'preact'; const classNames = require('classnames'); +import { html } from 'lit-html'; import { store } from '../../store.js'; // connect to redux -import { BaseComponent } from '../base-component.js'; - -import iFrameResize from 'iframe-resizer/js/iframeResizer.js'; -iFrameResize({ - checkOrigin: false, - scrolling: false, - heightCalculationMethod: 'documentElementOffset', // most accurate calculation in testing available options - initCallback() { - document.querySelector('.pl-js-iframe').classList.add('is-ready'); // toggles class that removes initial min-height styling - }, -}); +import { BaseLitComponent } from '../base-component.js'; @define -class Layout extends BaseComponent { +class Layout extends BaseLitComponent { static is = 'pl-layout'; constructor(self) { self = super(self); - this.useShadow = false; + self.useShadow = false; + self.targetOrigin = + window.location.protocol === 'file:' + ? '*' + : window.location.protocol + '//' + window.location.host; return self; } @@ -32,22 +26,44 @@ class Layout extends BaseComponent { connected() { const state = store.getState(); - this.layoutMode = state.app.layoutMode; + this.layoutMode = state.app.layoutMode || 'vertical'; this.themeMode = state.app.themeMode; } + rendered() { + this.iframeElement = this.renderRoot.querySelector('.pl-js-iframe'); + } + _stateChanged(state) { - this.layoutMode = state.app.layoutMode; + this.layoutMode = state.app.layoutMode || 'vertical'; this.themeMode = state.app.themeMode; + this.iframeElement = document.querySelector('.pl-js-iframe'); + const layoutModeClass = + this.layoutMode === 'vertical' ? 'sidebar' : 'horizontal'; - const classes = classNames({ + const classes = classNames(`pl-c-body--theme-${layoutModeClass}`, { [`pl-c-body--theme-${this.themeMode}`]: this.themeMode !== undefined, - [`pl-c-body--theme-${ - this.layoutMode === 'vertical' ? 'sidebar' : 'horizontal' - }`]: this.layoutMode !== undefined, }); this.className = classes; + + if (this.iframeElement) { + const obj = JSON.stringify({ + event: 'patternLab.stateChange', + state, + }); + this.iframeElement.contentWindow.postMessage(obj, this.targetOrigin); + } + } + + render() { + return html` + +
+ + +
+ `; } } diff --git a/packages/uikit-workshop/src/scripts/components/pl-layout/pl-layout.scss b/packages/uikit-workshop/src/scripts/components/pl-layout/pl-layout.scss old mode 100644 new mode 100755 index 1917cdf37..d841f0fda --- a/packages/uikit-workshop/src/scripts/components/pl-layout/pl-layout.scss +++ b/packages/uikit-workshop/src/scripts/components/pl-layout/pl-layout.scss @@ -6,7 +6,8 @@ pl-layout { width: 100%; min-height: 100vh; max-width: 100vw; - background-color: $pl-color-gray-13; + background-color: $pl-color-white; + overflow: initial; // Prevent extra scrollbars in just IE 11 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { diff --git a/packages/uikit-workshop/src/scripts/components/pl-logo/pl-logo.js b/packages/uikit-workshop/src/scripts/components/pl-logo/pl-logo.js new file mode 100755 index 000000000..be0f78155 --- /dev/null +++ b/packages/uikit-workshop/src/scripts/components/pl-logo/pl-logo.js @@ -0,0 +1,44 @@ +import { define, props } from 'skatejs'; +import { h } from 'preact'; +import { store } from '../../store.js'; // connect to redux + +const classNames = require('classnames'); +import { BaseComponent } from '../base-component.js'; + +@define +class Logo extends BaseComponent { + static is = 'pl-logo'; + + constructor(self) { + self = super(self); + return self; + } + + connected() { + const state = store.getState(); + this.themeMode = state.app.themeMode || 'dark'; + } + + shouldUpdate(prevProps, prevState) { + return true; + } + + static props = { + url: props.string, + text: props.string, + src: props.string, + }; + + render({ themeMode }) { + return ( + + + {this.props.text && ( + {this.props.text} + )} + + ); + } +} + +export { Logo }; diff --git a/packages/uikit-workshop/src/scripts/components/pl-logo/pl-logo.scss b/packages/uikit-workshop/src/scripts/components/pl-logo/pl-logo.scss new file mode 100755 index 000000000..5b2385ba9 --- /dev/null +++ b/packages/uikit-workshop/src/scripts/components/pl-logo/pl-logo.scss @@ -0,0 +1,61 @@ +/*------------------------------------*\ + #LOGO +\*------------------------------------*/ + +pl-logo { + max-width: 12rem; + align-self: center; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + flex-shrink: 0; + position: relative; + z-index: 100; + + @media all and (min-width: $pl-bp-med) { + .pl-c-body--theme-sidebar & { + max-width: none; + width: 7rem; + padding: 0.5rem; + } + } +} + +.pl-c-logo { + width: auto; + padding: 0.5rem; + display: flex; + align-items: center; + justify-content: center; + color: inherit; + text-decoration: none; + + outline: 0; + text-transform: lowercase; + font-size: 1.4rem; + font-weight: bold; + line-height: 1; + margin: 0; + transition: color .2s ease; + + &:focus { + outline: 1px dotted $pl-color-gray-50; + outline-offset: -1px; + } +} + +.pl-c-logo__img { + display: block; + height: auto; + max-height: 2.5rem; + + &:not(:last-child){ + margin-right: 0.25rem; + } +} + +.pl-c-logo__text { + display: flex; + white-space: nowrap; +} diff --git a/packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.js b/packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.js old mode 100644 new mode 100755 index 941739a1d..eb22dc888 --- a/packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.js +++ b/packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.js @@ -1,18 +1,181 @@ import { define, props } from 'skatejs'; import { h } from 'preact'; + const classNames = require('classnames'); +import { store } from '../../store.js'; // redux store +import ArrowIcon from '../../../icons/arrow-down.svg'; import { BaseComponent } from '../base-component.js'; -import $ from 'jquery'; +import 'url-search-params-polyfill'; -const Button = props => { +const SubSubList = props => { + const { children, category, elem } = props; + const reorderedChildren = []; + + const nonViewAllItems = children.filter( + item => + item.patternName !== 'View All' && !item.patternName.includes(' Docs') + ); + // const nonViewAllItems = children.filter((item => (item.patternName !== 'View All'))); + const viewAllItems = children.filter(item => item.patternName === 'View All'); + + reorderedChildren.push(...viewAllItems, ...nonViewAllItems); + + return ( +
  • + {viewAllItems.length > 0 ? ( + viewAllItems.map(patternSubtypeItem => ( + + )) + ) : ( + + )} + + {((viewAllItems.length > 0 && nonViewAllItems.length > 1) || + viewAllItems.length === 0) && ( +
      + {nonViewAllItems.map(patternSubtypeItem => ( +
    1. + + elem.handleClick(e, patternSubtypeItem.patternPartial) + } + data-patternpartial={patternSubtypeItem.patternPartial} + > + {patternSubtypeItem.patternName === 'View All' + ? `${category} Overview` + : patternSubtypeItem.patternName} + {patternSubtypeItem.patternState && ( + + )} + +
    2. + ))} +
    + )} +
  • + ); +}; + +const SpecialButton = props => { return ( + ); +}; + +const Button = props => { + return ( + + ); +}; + +const ButtonTitle = props => { + return ( + ); }; @@ -21,39 +184,326 @@ const Button = props => { class Nav extends BaseComponent { static is = 'pl-nav'; - _stateChanged(state) {} + constructor(self) { + self = super(self); + self.toggleNavPanel = self.toggleNavPanel.bind(self); + self.toggleSpecialNavPanel = self.toggleSpecialNavPanel.bind(self); + self.handleClick = self.handleClick.bind(self); + self.handleURLChange = self.handleURLChange.bind(self); + self._hasInitiallyRendered = false; + self.handleURLChangeOnRender = false; + self.receiveIframeMessage = self.receiveIframeMessage.bind(self); + self.useShadow = false; + return self; + } + + connected() { + this.isOpenClass = 'pl-is-active'; + const self = this; + const state = store.getState(); + this.layoutMode = state.app.layoutMode || ''; + this.currentPattern = state.app.currentPattern || ''; + this.elem = this; + this.previousActiveLinks = []; + this.iframeElem = document.querySelector('pl-iframe'); + window.addEventListener('message', this.receiveIframeMessage, false); + + document.body.addEventListener('click', function(e) { + if ( + e.target.closest('pl-header') === null && + e.target.closest('svg') === null + ) { + self.cleanupActiveNav(); + } + }); + } + + _stateChanged(state) { + this.layoutMode = state.app.layoutMode || ''; + + if (this.currentPattern !== state.app.currentPattern) { + this.currentPattern = state.app.currentPattern; + } + + this.handleURLChange(); // so the nav logic is always correct (ex. layout changes) + } + + receiveIframeMessage(event) { + const self = this; + + // does the origin sending the message match the current host? if not dev/null the request + if ( + window.location.protocol !== 'file:' && + event.origin !== window.location.protocol + '//' + window.location.host + ) { + return; + } + + let data = {}; + try { + data = + typeof event.data !== 'string' ? event.data : JSON.parse(event.data); + } catch (e) { + // @todo: how do we want to handle exceptions here? + } + + if (data.event !== undefined && data.event === 'patternLab.pageClick') { + try { + if ( + window.matchMedia('(min-width: calc(42em))').matches && + self.layoutMode !== 'vertical' + ) { + self.cleanupActiveNav(); + } + } catch (error) { + console.log(error); + } + } + } + + cleanupActiveNav(topLevelOnly) { + this.navContainer = document.querySelector('.pl-js-nav-container'); + this.navAccordionTriggers = document.querySelectorAll('.pl-js-acc-handle'); + this.navAccordionPanels = document.querySelectorAll('.pl-js-acc-panel'); + this.topLevelTriggers = document.querySelectorAll( + '.pl-c-nav__link--title.pl-is-active' + ); - constructor() { - super(); - this.toggleNavPanel = this.toggleNavPanel.bind(this); + if (topLevelOnly === true) { + this.navContainer.classList.remove('pl-is-active'); + this.topLevelTriggers.forEach(trigger => { + trigger.classList.remove('pl-is-active'); + }); + } else { + if ( + window.matchMedia('(max-width: calc(42em - 1px))').matches || + this.layoutMode !== 'vertical' + ) { + this.navContainer.classList.remove('pl-is-active'); + this.navAccordionTriggers.forEach(trigger => { + trigger.classList.remove('pl-is-active'); + }); + this.navAccordionPanels.forEach(panel => { + panel.classList.remove('pl-is-active'); + }); + } else { + this.navContainer.classList.remove('pl-is-active'); + } + } + } + + handleClick(event, pattern) { + event.preventDefault(); + this.iframeElem.navigateTo(pattern); + this.cleanupActiveNav(); + } + + handleURLChange() { + if (!this._hasInitiallyRendered) { + this.handleURLChangeOnRender = true; + return; + } + + const shouldAutoOpenNav = + window.matchMedia('(min-width: calc(42em))').matches && + this.layoutMode === 'vertical'; + + const currentPattern = this.currentPattern; + const activeLink = document.querySelector( + `[data-patternpartial="${currentPattern}"]` + ); + const self = this; + + if (this.previousActiveLinks) { + this.previousActiveLinks.forEach(function(link, index) { + self.previousActiveLinks[index].classList.remove('pl-is-active'); + }); + } + this.previousActiveLinks = []; + + if (activeLink) { + activeLink.classList.add('pl-is-active'); + this.previousActiveLinks.push(activeLink); + + // handle overview links vs nested links + if (activeLink.classList.contains('pl-js-link-overview')) { + const childDropdownTrigger = activeLink.nextSibling; + const childDropdown = activeLink.parentNode.nextSibling; + + if (childDropdown && shouldAutoOpenNav) { + if (childDropdown.tagName) { + childDropdown.classList.add('pl-is-active'); + this.previousActiveLinks.push(childDropdown); + } + } + + if (childDropdownTrigger && shouldAutoOpenNav) { + if (childDropdownTrigger.tagName) { + childDropdownTrigger.classList.add('pl-is-active'); + this.previousActiveLinks.push(childDropdownTrigger); + } + } + } + + const parentDropdown = activeLink.closest('.pl-js-acc-panel'); + let parentDropdownTrigger; + + if (parentDropdown) { + if (parentDropdown.previousSibling) { + parentDropdownTrigger = parentDropdown.previousSibling; + + if ( + parentDropdown.previousSibling.classList.contains( + 'pl-c-nav__link--overview-wrapper' + ) && + shouldAutoOpenNav + ) { + this.previousActiveLinks.push(parentDropdown.previousSibling); + parentDropdown.previousSibling.classList.add('pl-is-active'); + parentDropdownTrigger = parentDropdown.previousSibling.querySelector( + '.pl-js-acc-handle' + ); + } + + const grandparentDropdown = parentDropdown.closest( + '.pl-c-nav__sublist--dropdown' + ); + const grandparentDropdownTrigger = + grandparentDropdown.previousSibling; + + if (parentDropdown && shouldAutoOpenNav) { + parentDropdown.classList.add('pl-is-active'); + this.previousActiveLinks.push(parentDropdown); + } + + // don't auto-open + if (parentDropdownTrigger) { + if ( + shouldAutoOpenNav === true || + parentDropdownTrigger.classList.contains( + 'pl-c-nav__link--title' + ) === false + ) { + parentDropdownTrigger.classList.add('pl-is-active'); + this.previousActiveLinks.push(parentDropdownTrigger); + } + } + + if (grandparentDropdown && shouldAutoOpenNav) { + if (shouldAutoOpenNav) { + grandparentDropdown.classList.add('pl-is-active'); + } + this.previousActiveLinks.push(grandparentDropdown); + } + + if (grandparentDropdownTrigger && shouldAutoOpenNav) { + if (shouldAutoOpenNav) { + grandparentDropdownTrigger.classList.add('pl-is-active'); + } + this.previousActiveLinks.push(grandparentDropdownTrigger); + } + } + } + } else { + this.cleanupActiveNav(); + } + } + + static props = { + autoClose: { + ...props.boolean, + ...{ default: true }, + }, + layoutMode: props.string, + collapsedByDefault: { + ...props.boolean, + ...{ default: true }, + }, + }; + + toggleSpecialNavPanel(e) { + const target = e.target; + const panel = target.parentNode.nextSibling; + const subnav = panel.parentNode.parentNode.classList.contains( + 'pl-js-acc-panel' + ); + + if (!subnav) { + const navTriggers = document.querySelectorAll( + `.pl-js-acc-handle.pl-is-active` + ); + const navPanels = document.querySelectorAll( + `.pl-js-acc-panel.pl-is-active` + ); + + navTriggers.forEach(navTrigger => { + if (navTrigger !== target) { + navTrigger.classList.remove('pl-is-active'); + } + }); + + navPanels.forEach(navPanel => { + if (navPanel !== target) { + navPanel.classList.remove('pl-is-active'); + } + }); + } + + if (target.classList.contains('pl-is-active')) { + target.classList.remove('pl-is-active'); + panel.classList.remove('pl-is-active'); + } else { + target.classList.add('pl-is-active'); + panel.classList.add('pl-is-active'); + } } toggleNavPanel(e) { - const $this = $(e.target); - const $panel = $this.next('.pl-js-acc-panel'); - const subnav = $this - .parent() - .parent() - .hasClass('pl-js-acc-panel'); - - //Close other panels if link isn't a subnavigation item + const target = e.target; + const panel = target.nextSibling; + const subnav = target.parentNode.parentNode.classList.contains( + 'pl-js-acc-panel' + ); + if (!subnav) { - $('.pl-js-acc-handle') - .not($this) - .removeClass('pl-is-active'); - $('.pl-js-acc-panel') - .not($panel) - .removeClass('pl-is-active'); + const navTriggers = document.querySelectorAll('.pl-js-acc-handle'); + const navPanels = document.querySelectorAll('.pl-js-acc-panel'); + + navTriggers.forEach(navTrigger => { + if (navTrigger !== target) { + navTrigger.classList.remove('pl-is-active'); + } + }); + + navPanels.forEach(navPanel => { + if (navPanel !== target) { + navPanel.classList.remove('pl-is-active'); + } + }); + } + + if (target.classList.contains('pl-is-active')) { + target.classList.remove('pl-is-active'); + panel.classList.remove('pl-is-active'); + } else { + target.classList.add('pl-is-active'); + panel.classList.add('pl-is-active'); + } + } + + rendered() { + if (this._hasInitiallyRendered === false) { + this._hasInitiallyRendered = true; } - //Activate selected panel - $this.toggleClass('pl-is-active'); - $panel.toggleClass('pl-is-active'); + if (this.handleURLChangeOnRender === true) { + this.handleURLChangeOnRender = false; + this.handleURLChange(); + } } - render() { + render({ layoutMode }) { const patternTypes = window.navItems.patternTypes; - // const patternItems = window.navItems.patternItems; return (
      @@ -66,59 +516,27 @@ class Nav extends BaseComponent { return (
    1. - +
        {item.patternTypeItems.map((patternSubtype, i) => { return ( -
      1. - - -
          - {patternSubtype.patternSubtypeItems.map( - (patternSubtypeItem, i) => { - return ( -
        1. - - {patternSubtypeItem.patternName} - - {patternSubtypeItem.patternState && ( - - )} - -
        2. - ); - } - )} -
        -
      2. + {patternSubtype.patternSubtypeItems} + ); })} @@ -128,12 +546,16 @@ class Nav extends BaseComponent {
      3. + this.handleClick(e, patternItem.patternPartial) + } data-patternpartial={patternItem.patternPartial} tabindex="0" > - {patternItem.patternName} - + {patternItem.patternName === 'View All' + ? patternItem.patternName + ' ' + item.patternTypeUC + : patternItem.patternName} {patternItem.patternState && ( + {/*
      4. All -
      5. + */}
      ); } diff --git a/packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.scss b/packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.scss old mode 100644 new mode 100755 index 79544f8d1..0b0e1bebb --- a/packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.scss +++ b/packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.scss @@ -4,7 +4,22 @@ pl-nav { background-color: inherit; // so the inside of dropdowns inherits the correct color - display: flex; // vertically align children + display: block; // vertically align children + flex-grow: 1; + align-items: center; + + @media all and (min-width: $pl-bp-med) { + padding: 0; + display: flex; // vertically align children + } + + @media all and (min-width: $pl-bp-med) { + .pl-c-body--theme-sidebar & { + display: block; + max-height: 100%; + overflow-y: scroll; + } + } } /** @@ -22,35 +37,45 @@ pl-nav { display: flex; flex-direction: column; transition: max-height $pl-animate-quick ease-out; + flex-shrink: 0; + + @media all and (min-width: $pl-bp-med) { + .pl-c-body--theme-sidebar & { + padding-bottom: 0.5rem; + display: block; + display: flex; + overflow: hidden; + flex-shrink: 1; + } + } // if nav was opened on smaller screen and screen is resized, it'll be cut off otherwise @media all and (min-width: $pl-bp-med) { overflow: visible; max-height: none; + + &.pl-is-active { + overflow: visible; + } } /** * Active navigaiton - * 1) Slide + * 1) Slide * 2) Set the height to the vierport height minus the height * of the header */ &.pl-is-active { - box-shadow: 0 1px 1px $pl-color-black; - - .pl-c-body--theme-light & { - box-shadow: 0 1px 1px darken($pl-color-gray-20, 15%); - } + @media all and (max-width: $pl-bp-med - 1) { + box-shadow: 0 1px 1px $pl-color-black; - .pl-c-body--theme-sidebar & { - @media all and (min-width: $pl-bp-med) { - box-shadow: none; + .pl-c-body--theme-light & { + box-shadow: 0 1px 1px darken($pl-color-gray-20, 15%); } } // if nav was opened on smaller screen and screen is resized, it'll be cut off otherwise @media all and (min-width: $pl-bp-med) { - overflow: visible; max-height: none; } } @@ -97,8 +122,6 @@ pl-nav { */ .pl-c-nav__item { background-color: inherit; // allows the nav's children inherit from the parent header - transform: translateZ(0); // helps with more consistent rendering in Safari - cursor: pointer; position: relative; display: flex; flex-direction: column; @@ -109,15 +132,8 @@ pl-nav { } } -/** - * Last sublist item - */ -.pl-c-nav__sublist > .pl-c-nav__item:last-child { - @media all and (min-width: $pl-bp-med) { - overflow: hidden; - border-bottom-left-radius: $pl-border-radius-med; - border-bottom-right-radius: $pl-border-radius-med; - } +.pl-c-nav__item-inner { + position: relative; } /** @@ -125,9 +141,13 @@ pl-nav { */ .pl-c-nav__link { @include linkStyle; + color: inherit; + line-height: 1.5; display: flex; align-items: center; margin: 0; // remove default button margin in Safari + color: inherit; + padding: 0.7rem 0.5rem; // makes link layout / size more consistent in the sidebar layout, especially when display: flex styles are removed for more consistent IE 11 rendering .pl-c-body--theme-sidebar & { @@ -135,6 +155,37 @@ pl-nav { } } +.pl-c-nav__link, +.pl-c-nav__link--section-dropdown, +.pl-c-nav__link--sublink, +.pl-c-nav__link--overview { + @include linkStyle; + position: relative; + color: inherit; + + &:after { + content: ''; + pointer-events: none; + opacity: 0; + background-color: currentColor; + transition: opacity $pl-animate-quick ease-out; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + display: block; + } + + &:hover:after { + opacity: 0.1; + } + + &:focus:after { + opacity: 0.1; + } +} + /** * Nav sublink * 1) Visually differentiate sub-item links from @@ -142,7 +193,16 @@ pl-nav { */ .pl-c-nav__link--sublink { text-transform: none; - padding-left: $pl-space / 2; + font-size: 0.78rem; + line-height: 1; + padding-left: $pl-space + ($pl-space / 2); + padding-right: $pl-space + ($pl-space / 2); + + &.pl-is-active { + box-shadow: inset 4px 0 0 #6c79d9; + font-weight: bold; + pointer-events: none; + } } /** @@ -151,42 +211,34 @@ pl-nav { .pl-c-nav__link--dropdown { -webkit-appearance: none; // remove default button styling flex-grow: 1; // fill up extra space in parent nav item, if available - /** - * Dropdown caret after accordion handle - */ - &:after { - content: '\25bc'; - color: $pl-color-trans-white-25; - display: inline-block; - font-size: 7px; - position: relative; - top: 1px; - right: -2px; - transition: all $pl-animate-quick ease-out; - } +} - &:hover, - &:focus { - &:after { - color: $pl-color-gray-50; - } - } +.pl-c-nav__link--pattern { + padding-left: 0.75rem; + padding-right: 0.75rem; + flex-grow: 1; +} - /** - * Active dropdown - */ - &.pl-is-active { - color: $pl-color-white; - background-color: $pl-color-gray-87; +.pl-c-nav__link-text { + flex-grow: 1; + pointer-events: none; +} - /** - * Caret rotation and positioning in active dropdown - */ - &:after { - color: $pl-color-gray-50; - transform: rotate(180deg); - } - } +.pl-c-nav__link-icon { + margin-top: -0.5rem; + margin-bottom: -0.5rem; + pointer-events: none; + color: currentColor; + display: inline; + transition: all $pl-animate-quick ease-out; + transform: rotate(-90deg); + flex-grow: 0; + line-height: 0; +} + +.pl-c-nav__link--overview-wrapper.pl-is-active > .pl-c-nav__link--section-dropdown > .pl-c-nav__link-icon, +.pl-is-active > .pl-c-nav__link-icon { + transform: rotate(0); } /** @@ -202,12 +254,23 @@ pl-nav { position: absolute; top: 100%; /* 1 */ left: 0; - min-width: 10rem; + min-width: 12rem; border-bottom-left-radius: $pl-border-radius-med; border-bottom-right-radius: $pl-border-radius-med; } } + +.pl-c-nav__subsublist--dropdow { + @media all and (min-width: $pl-bp-med) { + .pl-c-body--theme-sidebar & { + > .pl-c-nav__item { + padding-bottom: 0.5rem; + } + } + } +} + /** * Dropdown sublist */ @@ -216,6 +279,30 @@ pl-nav { @include listReset(); @include accordionPanel(); visibility: hidden; + + @media all and (min-width: $pl-bp-med) { + .pl-c-body--theme-sidebar & { + position: relative; + } + } + + .pl-c-nav__link { + padding-left: 1.5rem; + } + + .pl-c-nav__link--sublink { + padding-left: 1.5rem + .75rem; + } + + @media all and (max-width: $pl-bp-med - 1) { + .pl-c-nav__link { + padding-left: 1.5rem; + } + + .pl-c-nav__link--sublink { + padding-left: 1.5rem + .75rem; + } + } } /** @@ -224,13 +311,12 @@ pl-nav { */ .pl-c-nav__sublist--dropdown.pl-is-active, .pl-c-nav__subsublist--dropdown.pl-is-active { - margin-left: $pl-space / 2; visibility: visible; max-height: none; @media all and (min-width: $pl-bp-med) { height: auto; - max-height: calc(100vh - #{$offset-top} - 1rem); /* 1 */ + max-height: calc(100vh - #{$offset-top} - 2rem); /* 1 */ } .pl-c-body--theme-sidebar & { @@ -240,13 +326,74 @@ pl-nav { .pl-c-nav__sublist--dropdown.pl-is-active { @media all and (min-width: $pl-bp-med) { - margin-left: 0; - border-width: 1px; - border-style: solid; - border-color: $pl-color-black; + box-shadow: 0 1px 3px rgba(0, 0, 0, .1); + border-left: 1px solid $pl-color-gray-87; + border-right: 1px solid $pl-color-gray-87; + + border-left-color: $pl-color-gray-87; + border-right-color: $pl-color-gray-87; + border-left-color: rgba(var(--theme-text-rgb), 0.1); + border-right-color: rgba(var(--theme-text-rgb), 0.1); + } + + .pl-c-body--theme-sidebar & { + box-shadow: none; + border: none; + } +} + - .pl-c-body--theme-light & { - border-color: $pl-color-gray-20; +.pl-c-nav__link--overview.pl-is-active { + &:hover:before { + opacity: 0.1; + } +} +.pl-c-nav__link--overview-wrapper, +.pl-c-nav__subsublist--dropdown, +.pl-c-nav__link--overview { + &:before { + content: ''; + position: absolute; + left: 0; + right: 0; + transition: opacity $pl-animate-quick ease-out; + opacity: 0; + top: 0; + bottom: 0; + background-color: currentColor; + z-index: 1; + pointer-events: none; + } + + &:after { + content: ''; + position: absolute; + left: 0; + right: 0; + transition: opacity $pl-animate-quick ease-out; + opacity: 0; + top: 0; + bottom: 0; + border-top: 1px solid rgba(0, 0, 0, .1); + border-bottom: 1px solid rgba(0, 0, 0, .1); + z-index: 1; + pointer-events: none; + } + + &.pl-is-active { + &:before, + &:after { + opacity: 0.025; + } + } + + .pl-c-body--theme-dark & { + &:before { + // background-color: rgba(255, 255, 255, .1); + } + + &:after { + border-bottom: 1px solid rgba(255, 255, 255, .1); } } } @@ -259,3 +406,105 @@ pl-nav { .pl-c-nav__subsublist { @include listReset(); } + +.pl-c-nav__link--overview.pl-c-nav__link--overview.pl-c-nav__link--overview { + font-size: 0.85rem; + line-height: 1; + padding-right: 0.5rem; + padding-left: 1.5rem; + position: relative; + flex-grow: 1; + + &:not(:only-child) { + margin-right: 2.5rem; + } +} + +.pl-c-nav__link--title { + font-size: 0.85rem; + line-height: 1; + color: $pl-color-gray-20; + color: var(--theme-text, $pl-color-gray-20); + + &.pl-is-active { + font-weight: 700; + } + + .pl-c-body--theme-light & { + color: $pl-color-black; + color: var(--theme-text); + } +} + +.pl-c-nav__list > .pl-c-nav__item:not(:last-child) { + @media all and (min-width: $pl-bp-med) { + .pl-c-body--theme-sidebar & { + margin-bottom: 0.5rem; + margin-top: 0.5rem; + + } + } +} + +.pl-c-nav__link--section-dropdown { + width: 2.5rem !important; + height: 2.5rem !important; + padding: 0 !important; + display: flex; + justify-content: center; + font-size: 0; + position: absolute; + right: 0; + top: 50%; + border: 2px solid transparent !important; + transform: translateY(-50%); + justify-content: center; + align-items: center; + color: currentColor; + + // border to indicate which nav links have two specific actions + &:before { + opacity: 0.1; + right: 2.4rem; + width: 1px; + left: auto; + transform: translateY(-50%); + } + + &:after { + opacity: 0; + width: 2.5rem; + left: 50%; + transform: translateY(-50%) translateX(-50%); + } + + &:before, + &:after { + height: 2.5rem; + transition: opacity $pl-animate-quick ease-out; + content: ''; + display: block; + position: absolute; + top: 50%; + background-color: currentColor; + } + + &:hover { + // background-color: transparent !important; + + &:after, + &:focus:after { + opacity: 0.1; + } + } + + &:active:not(:hover):after, + &:focus:not(:hover):after { + opacity: 0; + } +} + +.pl-c-nav__link--overview-wrapper { + position: relative; + display: flex; +} diff --git a/packages/uikit-workshop/src/scripts/components/pl-search/pl-search.iframe-helper.js b/packages/uikit-workshop/src/scripts/components/pl-search/pl-search.iframe-helper.js old mode 100644 new mode 100755 diff --git a/packages/uikit-workshop/src/scripts/components/pl-search/pl-search.js b/packages/uikit-workshop/src/scripts/components/pl-search/pl-search.js old mode 100644 new mode 100755 index c27480a44..90eb90e0c --- a/packages/uikit-workshop/src/scripts/components/pl-search/pl-search.js +++ b/packages/uikit-workshop/src/scripts/components/pl-search/pl-search.js @@ -1,10 +1,11 @@ import { define, props } from 'skatejs'; import { h } from 'preact'; +import { store } from '../../store.js'; // connect to redux + import Fuse from 'fuse.js'; import ReactHtmlParser from 'react-html-parser'; import classNames from 'classnames'; import Mousetrap from 'mousetrap'; - import VisuallyHidden from '@reach/visually-hidden'; import Autosuggest from 'react-autosuggest'; @@ -17,26 +18,31 @@ class Search extends BaseComponent { constructor(self) { self = super(self); - this.useShadow = false; - this.defaultMaxResults = 10; + self.useShadow = false; + self.defaultMaxResults = 10; // Autosuggest is a controlled component. // This means that you need to provide an input value // and an onChange handler that updates this value (see below). // Suggestions also need to be provided to the Autosuggest, // and they are initially empty because the Autosuggest is closed. - this.state = { + self.state = { value: '', suggestions: [], + isFocused: false, }; - this.receiveIframeMessage = this.receiveIframeMessage.bind(this); - this.onChange = this.onChange.bind(this); - this.toggleSearch = this.toggleSearch.bind(this); - // this.clearSearch = this.clearSearch.bind(this); - this.closeSearch = this.closeSearch.bind(this); - this.renderInputComponent = this.renderInputComponent.bind(this); - this.openSearch = this.openSearch.bind(this); + self.receiveIframeMessage = self.receiveIframeMessage.bind(self); + self.onChange = self.onChange.bind(self); + self.toggleSearch = self.toggleSearch.bind(self); + self.closeSearch = self.closeSearch.bind(self); + self.renderInputComponent = self.renderInputComponent.bind(self); + self.openSearch = self.openSearch.bind(self); + return self; + } + + connecting() { + super.connecting && super.connecting(); this.items = []; for (const patternType in window.patternPaths) { @@ -51,8 +57,6 @@ class Search extends BaseComponent { } } } - - return self; } connected() { @@ -64,6 +68,11 @@ class Search extends BaseComponent { window.addEventListener('message', this.receiveIframeMessage, false); } + _stateChanged(state) { + // throw new Error('_stateChanged() not implemented', this); + this.triggerUpdate(); + } + rendered() { this.inputElement = this.querySelector('.js-c-typeahead__input'); } @@ -85,9 +94,6 @@ class Search extends BaseComponent { this.onSuggestionsFetchRequested({ value }); // re-render search results immediately based on latest input value }; - // External Redux store not yet in use - _stateChanged(state) {} - toggleSearch() { if (!this.state.isOpen) { this.openSearch(); @@ -215,14 +221,7 @@ class Search extends BaseComponent { const patternName = urlHandler.getFileName(newValue); if (patternName) { - const obj = JSON.stringify({ - event: 'patternLab.updatePath', - path: patternName, - }); - - document - .querySelector('.pl-js-iframe') - .contentWindow.postMessage(obj, urlHandler.targetOrigin); + document.querySelector('pl-iframe').navigateTo(newValue); } this.setState({ @@ -339,16 +338,18 @@ class Search extends BaseComponent { }; return ( - +
      + +
      ); } } diff --git a/packages/uikit-workshop/src/scripts/components/pl-search/pl-search.scss b/packages/uikit-workshop/src/scripts/components/pl-search/pl-search.scss old mode 100644 new mode 100755 index ebe88bc9f..cbd045ea8 --- a/packages/uikit-workshop/src/scripts/components/pl-search/pl-search.scss +++ b/packages/uikit-workshop/src/scripts/components/pl-search/pl-search.scss @@ -16,20 +16,20 @@ pl-search { top: 0; z-index: 10; flex-shrink: 0; - padding: 0.3rem 0.5rem; + padding: 0.4rem 0.5rem; display: inline-block; - + align-self: stretch; + @media screen and (min-width: $pl-bp-med) { margin-left: 1rem; flex-direction: row; flex-shrink: 1; order: 2; // Display after nav list items on wider screens + align-self: center; .pl-c-body--theme-sidebar & { flex-direction: column; margin-left: 0; - padding-left: 0; - padding-right: 0; width: 100%; } } @@ -75,13 +75,15 @@ pl-search { text-transform: capitalize; background-color: $pl-color-gray-87; color: $pl-color-white; - border-color: darken($pl-color-gray-87, 10%); + background-color: rgba(var(--theme-text-rgb), 0.1); + color: rgba(var(--theme-text-rgb), 0.67); + border-color: rgba(0, 0, 0, .1); text-overflow: ellipsis; border-width: 1px; border-style: solid; transition: all 0.1s ease; max-width: 100%; - padding: 0.31rem 0.5rem; + padding: 0.4rem 0.5rem; font-size: 16px; // prevent zooming in on mobile width: 100%; outline-offset: -3px; @@ -118,8 +120,9 @@ pl-search { .pl-c-body--theme-light & { background-color: $pl-color-gray-07; - color: $pl-color-gray-70 !important; - border-color: $pl-color-gray-13 !important; + background-color: rgba(var(--theme-text-rgb), 0.1); + color: $pl-color-gray-70; + color: rgba(var(--theme-text-rgb), 0.67); } &::-webkit-input-placeholder, @@ -131,12 +134,9 @@ pl-search { &:hover, &:focus { color: $pl-color-white; - background-color: darken($pl-color-gray-87, 2%) !important; .pl-c-body--theme-light & { color: $pl-color-gray-87 !important; - background-color: $pl-color-gray-13 !important; - border-color: $pl-color-gray-20 !important; } &::-moz-input-placeholder, @@ -153,6 +153,8 @@ pl-search { .pl-c-typeahead__menu { @include accordionPanel; background-color: $pl-color-gray-87; + background-color: var(--theme-primary); + color: var(--theme-text); text-transform: capitalize; position: absolute; min-width: 100%; @@ -228,14 +230,20 @@ pl-search { .pl-c-typeahead__result { transition: all 0.3s ease; background-color: inherit; - padding: 0.8em; + padding: 0.5rem 0.75rem; cursor: pointer; overflow: hidden; + font-size: 0.8rem; + color: inherit; &:last-child { border-bottom-right-radius: $pl-border-radius-med; border-bottom-left-radius: $pl-border-radius-med; + @media all and (max-width: $pl-bp-med - 1) { + border-radius: 0; + } + .pl-c-body--theme-sidebar & { border-radius: 0; } @@ -271,6 +279,7 @@ pl-search { .pl-c-typeahead__input-wrapper { position: relative; // used for positioning search clear button in relation to the + flex-shrink: 0; } .pl-c-typeahead__clear-button { diff --git a/packages/uikit-workshop/src/scripts/components/pl-toggle-info/pl-toggle-info.js b/packages/uikit-workshop/src/scripts/components/pl-toggle-info/pl-toggle-info.js old mode 100644 new mode 100755 index 748314da5..ff65501ed --- a/packages/uikit-workshop/src/scripts/components/pl-toggle-info/pl-toggle-info.js +++ b/packages/uikit-workshop/src/scripts/components/pl-toggle-info/pl-toggle-info.js @@ -1,6 +1,9 @@ import { define, props } from 'skatejs'; import { h } from 'preact'; +import ShowIcon from '../../../icons/show.svg'; +import HideIcon from '../../../icons/hide.svg'; + import { store } from '../../store.js'; // connect to the Redux store. import { updateDrawerState } from '../../actions/app.js'; // redux actions import { BaseComponent } from '../base-component.js'; @@ -29,9 +32,18 @@ class InfoToggle extends BaseComponent { class="pl-c-tools__action" onClick={_ => store.dispatch(updateDrawerState(!_drawerOpened))} > - {_drawerOpened - ? `Hide ${isViewallPage ? 'all ' : ''}Pattern Info` - : `Show ${isViewallPage ? 'all ' : ''}Pattern Info`} + + {_drawerOpened + ? `Hide ${isViewallPage ? 'all ' : ''}Pattern Info` + : `Show ${isViewallPage ? 'all ' : ''}Pattern Info`} + + + {_drawerOpened ? ( + + ) : ( + + )} + ); } diff --git a/packages/uikit-workshop/src/scripts/components/pl-toggle-layout/pl-toggle-layout.js b/packages/uikit-workshop/src/scripts/components/pl-toggle-layout/pl-toggle-layout.js old mode 100644 new mode 100755 index 24ab5402a..bcc33cd00 --- a/packages/uikit-workshop/src/scripts/components/pl-toggle-layout/pl-toggle-layout.js +++ b/packages/uikit-workshop/src/scripts/components/pl-toggle-layout/pl-toggle-layout.js @@ -11,7 +11,7 @@ class LayoutToggle extends BaseComponent { constructor(self) { self = super(self); - this.useShadow = false; + self.useShadow = false; return self; } @@ -27,14 +27,14 @@ class LayoutToggle extends BaseComponent { }; _stateChanged(state) { - if (this.layoutMode !== state.app.layoutMode) { - this.layoutMode = state.app.layoutMode; - } + this.layoutMode = state.app.layoutMode; + this.triggerUpdate(); } render({ layoutMode, text }) { const toggleLayoutMode = layoutMode !== 'vertical' ? 'vertical' : 'horizontal'; + return (
      • @@ -67,11 +71,19 @@ class ToolsMenu extends BaseComponent { {!this.ishControlsHide['views-new'] && (
      • - Open In New Tab + Open In New Tab + + +
      • )} @@ -83,7 +95,15 @@ class ToolsMenu extends BaseComponent { class="pl-c-tools__action" target="_blank" > - Pattern Lab Docs + Pattern Lab Docs + + + )} diff --git a/packages/uikit-workshop/src/scripts/components/pl-tools-menu/pl-tools-menu.scss b/packages/uikit-workshop/src/scripts/components/pl-tools-menu/pl-tools-menu.scss old mode 100644 new mode 100755 index 7510d9214..b152ed94d --- a/packages/uikit-workshop/src/scripts/components/pl-tools-menu/pl-tools-menu.scss +++ b/packages/uikit-workshop/src/scripts/components/pl-tools-menu/pl-tools-menu.scss @@ -27,8 +27,6 @@ pl-tools-menu { .pl-c-tools__toggle { @include linkStyle(); margin: 0; - padding-top: 0.6rem; - padding-bottom: 0.5rem; display: inline-flex; align-items: center; justify-content: center; @@ -52,28 +50,114 @@ pl-tools-menu { .pl-c-tools__list { @include listReset(); @include accordionPanel(); + transform: translateY(-10px); position: absolute; - top: 100%; - right: 0; + right: 3px; z-index: 10; // make sure context dropdown z-index is higher than nav dropdown z-index - width: 10rem; - border-bottom-left-radius: $pl-border-radius-med; - border-bottom-right-radius: $pl-border-radius-med; + width: 12rem; + border-radius: 6px; + top: calc(100% + 4px); + box-shadow: 0 0 5px rgba(0, 0, 0, .1); + background-color: $pl-color-gray-87; + background-color: var(--theme-primary, $pl-color-gray-87); + + .pl-c-body--theme-light & { + background-color: $pl-color-white; + background-color: var(--theme-primary, $pl-color-white); + } + + .pl-c-body--theme-sidebar & { + @media all and (min-width: $pl-bp-med) { + box-shadow: none; + top: 0; + transform: none; + border-radius: 0; + background-color: transparent; + } + } + + &.pl-is-active { + overflow: visible; + } + + &:before { + content: ''; + height: 14px; + width: 14px; + background-color: $pl-color-gray-87; + background-color: var(--theme-primary, $pl-color-gray-87); + position: absolute; + right: 0px; + top: -10px; + transform: translateY(50%) translateX(-50%) rotate(45deg); + transition: opacity 0.1s ease-out; + opacity: 0; + visibility: hidden; + box-shadow: 0 0 5px rgba(0, 0, 0, .1); + + .pl-c-body--theme-sidebar & { + @media all and (min-width: $pl-bp-med) { + display: none; + } + } + } + + &.pl-is-active:before { + opacity: 1; + visibility: visible; + } } +.pl-c-tools__item { + position: relative; + overflow: hidden; + + // crop list item when hover + &:first-child { + border-top-left-radius: 6px; + border-top-right-radius: 6px; + + .pl-c-body--theme-sidebar & { + @media all and (min-width: $pl-bp-med) { + border-radius: 0; + } + } + } + + &:last-child { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + + .pl-c-body--theme-sidebar & { + @media all and (min-width: $pl-bp-med) { + border-radius: 0; + } + } + } +} + + /** * Tools dropdown actions * 1) Links and buttons inside of the tools dropdown */ .pl-c-tools__action { @include linkStyle(); + padding-top: 0.4rem; + padding-bottom: 0.4rem; display: flex; align-items: center; width: 100%; margin: 0; + flex-direction: row-reverse; + justify-content: flex-end; } // Make sure the text and icon align to the opposite ends .pl-c-tools__action-icon { - margin-left: auto; + margin-right: 0.5rem; + + &:first-child:last-child { + margin-right: 0; + } } diff --git a/packages/uikit-workshop/src/scripts/components/pl-tooltip/pl-tooltip.js b/packages/uikit-workshop/src/scripts/components/pl-tooltip/pl-tooltip.js new file mode 100755 index 000000000..f785df5b1 --- /dev/null +++ b/packages/uikit-workshop/src/scripts/components/pl-tooltip/pl-tooltip.js @@ -0,0 +1,38 @@ +import TooltipTrigger from 'react-popper-tooltip'; +import { h } from 'preact'; +import 'react-popper-tooltip/dist/styles.css'; + +export const Tooltip = function({ tooltip, children, hideArrow, ...props }) { + return ( + ( +
        + {!hideArrow && ( +
        + )} + {tooltip} +
        + )} + > + {children} + + ); +}; diff --git a/packages/uikit-workshop/src/scripts/components/pl-tooltip/pl-tooltip.scss b/packages/uikit-workshop/src/scripts/components/pl-tooltip/pl-tooltip.scss new file mode 100755 index 000000000..b1ec2906b --- /dev/null +++ b/packages/uikit-workshop/src/scripts/components/pl-tooltip/pl-tooltip.scss @@ -0,0 +1,5 @@ +@import '../../../sass/scss/core.scss'; + +.tooltip-container { + color: $pl-color-gray-87; +} \ No newline at end of file diff --git a/packages/uikit-workshop/src/scripts/components/pl-viewport-size-list/pl-viewport-size-list.js b/packages/uikit-workshop/src/scripts/components/pl-viewport-size-list/pl-viewport-size-list.js old mode 100644 new mode 100755 index 1b5f8ab78..2c4d7fc4a --- a/packages/uikit-workshop/src/scripts/components/pl-viewport-size-list/pl-viewport-size-list.js +++ b/packages/uikit-workshop/src/scripts/components/pl-viewport-size-list/pl-viewport-size-list.js @@ -1,57 +1,291 @@ import { h } from 'preact'; +import { define, props } from 'skatejs'; +import { BaseComponent } from '../base-component.js'; +import { store } from '../../store.js'; // connect to redux -export const ViewportSizeList = ishControlsHide => { - return ( -
          - {!ishControlsHide.s && ( -
        • - -
        • - )} - {!ishControlsHide.m && ( -
        • - -
        • - )} - {!ishControlsHide.l && ( -
        • - -
        • - )} - {!ishControlsHide.full && ( -
        • - -
        • - )} - {!ishControlsHide.random && ( -
        • - -
        • - )} - {!ishControlsHide.disco && ( -
        • - -
        • - )} - {!ishControlsHide.hay && ( -
        • - -
        • - )} -
        - ); -}; +import { Tooltip } from '../pl-tooltip/pl-tooltip'; +import VisuallyHidden from '@reach/visually-hidden'; + +import PhoneIcon from '../../../icons/phone.svg'; +import TabletIcon from '../../../icons/tablet.svg'; +import LaptopIcon from '../../../icons/laptop.svg'; +import DesktopIcon from '../../../icons/desktop.svg'; +import DiscoIcon from '../../../icons/disco-ball.svg'; +import RandomIcon from '../../../icons/random.svg'; + +import { minViewportWidth, maxViewportWidth, getRandom } from '../../utils'; + +// @todo: re-add keyboard shortcuts to these +@define +class ViewportSizes extends BaseComponent { + static is = 'pl-viewport-sizes'; + + _stateChanged(state) { + this.triggerUpdate(); + } + + constructor(self) { + self = super(self); + self.resizeViewport = self.resizeViewport.bind(self); + self.useShadow = false; + return self; + } + + connecting() { + const state = store.getState(); + const { ishControlsHide } = window.ishControls; + this.ishControlsHide = ishControlsHide; + } + + shouldUpdate(prevProps, prevState) { + return true; + } + + resizeViewport(size) { + if (this.iframe) { + switch (size) { + case 'small': + this.iframe.fullMode = false; + this.iframe.sizeiframe( + getRandom( + minViewportWidth, + window.config.ishViewportRange !== undefined + ? parseInt(window.config.ishViewportRange.s[1], 10) + : 500 + ), + true + ); + break; + case 'medium': + this.iframe.fullMode = false; + this.iframe.sizeiframe( + getRandom( + window.config.ishViewportRange !== undefined + ? parseInt(window.config.ishViewportRange.m[0], 10) + : 500, + window.config.ishViewportRange !== undefined + ? parseInt(window.config.ishViewportRange.m[1], 10) + : 800 + ), + true + ); + break; + case 'large': + this.iframe.fullMode = false; + this.iframe.sizeiframe( + getRandom( + window.config.ishViewportRange !== undefined + ? parseInt(window.config.ishViewportRange.l[0], 10) + : 800, + maxViewportWidth + ), + true + ); + break; + case 'full': + this.iframe.fullMode = true; + this.iframe.sizeiframe(maxViewportWidth, true); + break; + } + } + } + + rendered() { + this.iframe = document.querySelector('pl-iframe'); + } + + render() { + return ( +
          + {!this.ishControlsHide.s && ( +
        • + + {({ getTriggerProps, triggerRef }) => ( + + )} + +
        • + )} + {!this.ishControlsHide.m && ( +
        • + + {({ getTriggerProps, triggerRef }) => ( + + )} + +
        • + )} + {!this.ishControlsHide.l && ( +
        • + + {({ getTriggerProps, triggerRef }) => ( + + )} + +
        • + )} + {!this.ishControlsHide.full && ( +
        • + + {({ getTriggerProps, triggerRef }) => ( + + )} + +
        • + )} + {!this.ishControlsHide.random && ( +
        • + {/* */} + + + {({ getTriggerProps, triggerRef }) => ( + + )} + +
        • + )} + {!this.ishControlsHide.disco && ( +
        • + + {({ getTriggerProps, triggerRef }) => ( + + )} + +
        • + )} + {!this.ishControlsHide.hay && ( +
        • + +
        • + )} +
        + ); + } +} diff --git a/packages/uikit-workshop/src/scripts/components/pl-viewport-size-list/pl-viewport-size-list.scss b/packages/uikit-workshop/src/scripts/components/pl-viewport-size-list/pl-viewport-size-list.scss old mode 100644 new mode 100755 index 2e3f02aa8..e3020046d --- a/packages/uikit-workshop/src/scripts/components/pl-viewport-size-list/pl-viewport-size-list.scss +++ b/packages/uikit-workshop/src/scripts/components/pl-viewport-size-list/pl-viewport-size-list.scss @@ -10,6 +10,13 @@ margin: 0; padding: 0; overflow-x: auto; + padding: 0 0.25rem; + + .pl-c-body--theme-sidebar & { + @media all and (min-width: $pl-bp-med) { + padding-bottom: 0.5rem; + } + } @media all and (min-width: $pl-bp-med) { align-items: center; @@ -17,7 +24,7 @@ } - @media all and (min-width: $pl-bp-large) { + @media all and (min-width: $pl-bp-med) { display: block; display: flex; } @@ -29,6 +36,8 @@ */ .pl-c-size-list__action { @include linkStyle(); + padding-left: 0.3rem; + padding-right: 0.3rem; } // Force list items to center align if not overflow scrolling @@ -38,4 +47,4 @@ .pl-c-size-list__item:last-child { margin-right: auto; -} +} \ No newline at end of file diff --git a/packages/uikit-workshop/src/scripts/components/pl-viewport-size/pl-viewport-size.js b/packages/uikit-workshop/src/scripts/components/pl-viewport-size/pl-viewport-size.js old mode 100644 new mode 100755 index 8a405cead..bfc305038 --- a/packages/uikit-workshop/src/scripts/components/pl-viewport-size/pl-viewport-size.js +++ b/packages/uikit-workshop/src/scripts/components/pl-viewport-size/pl-viewport-size.js @@ -1,13 +1,14 @@ import { h } from 'preact'; -export const ViewportSize = ishControlsHide => { +export const ViewportSize = props => { return (