From 0ea44f8d276fd6036eaa14478773e3d3eca1d75c Mon Sep 17 00:00:00 2001 From: Salem Ghoweri Date: Fri, 24 Aug 2018 16:58:30 -0400 Subject: [PATCH 1/8] refactor: add number prefixes to PL's Sass imports so files are organized based off of specificity --- .../src/sass/scss/01-abstracts/_mixins.scss | 98 +++++++++ .../_variables.scss | 16 +- .../sass/scss/{base => 02-base}/_body.scss | 10 +- .../sass/scss/{base => 02-base}/_reset.scss | 8 +- .../src/sass/scss/03-vendor/_prism.scss | 183 +++++++++++++++++ .../src/sass/scss/03-vendor/_typeahead.scss | 94 +++++++++ .../sass/scss/04-components/_annotations.scss | 131 ++++++++++++ .../sass/scss/04-components/_breadcrumbs.scss | 32 +++ .../_controls.scss | 14 +- .../_header.scss | 34 ++-- .../sass/scss/04-components/_ish-sizing.scss | 86 ++++++++ .../src/sass/scss/04-components/_logo.scss | 27 +++ .../src/sass/scss/04-components/_modal.scss | 145 ++++++++++++++ .../sass/scss/04-components/_navigation.scss | 189 ++++++++++++++++++ .../_pattern-category.scss | 34 ++-- .../scss/04-components/_pattern-info.scss | 145 ++++++++++++++ .../scss/04-components/_pattern-lineage.scss | 29 +++ .../scss/04-components/_pattern-states.scss | 40 ++++ .../src/sass/scss/04-components/_pattern.scss | 131 ++++++++++++ .../src/sass/scss/04-components/_tabs.scss | 137 +++++++++++++ .../scss/04-components/_text-passage.scss | 135 +++++++++++++ .../{components => 04-components}/_tools.scss | 52 ++--- .../_viewport.scss | 0 .../{themes => 05-themes}/_density-theme.scss | 147 +++++++------- .../src/sass/scss/05-themes/_light-theme.scss | 136 +++++++++++++ .../{themes => 05-themes}/_sidebar-theme.scss | 0 .../_visibility.scss | 16 +- .../src/sass/scss/abstracts/_mixins.scss | 96 --------- .../sass/scss/components/_annotations.scss | 135 ------------- .../sass/scss/components/_breadcrumbs.scss | 32 --- .../src/sass/scss/components/_ish-sizing.scss | 85 -------- .../src/sass/scss/components/_logo.scss | 27 --- .../src/sass/scss/components/_modal.scss | 144 ------------- .../src/sass/scss/components/_navigation.scss | 189 ------------------ .../sass/scss/components/_pattern-info.scss | 148 -------------- .../scss/components/_pattern-lineage.scss | 28 --- .../sass/scss/components/_pattern-states.scss | 40 ---- .../src/sass/scss/components/_pattern.scss | 131 ------------ .../src/sass/scss/components/_tabs.scss | 136 ------------- .../sass/scss/components/_text-passage.scss | 134 ------------- .../src/sass/scss/themes/_light-theme.scss | 136 ------------- .../src/sass/scss/vendor/_prism.scss | 180 ----------------- .../src/sass/scss/vendor/_typeahead.scss | 95 --------- 43 files changed, 1901 insertions(+), 1904 deletions(-) create mode 100644 packages/uikit-workshop/src/sass/scss/01-abstracts/_mixins.scss rename packages/uikit-workshop/src/sass/scss/{abstracts => 01-abstracts}/_variables.scss (73%) rename packages/uikit-workshop/src/sass/scss/{base => 02-base}/_body.scss (74%) rename packages/uikit-workshop/src/sass/scss/{base => 02-base}/_reset.scss (78%) create mode 100644 packages/uikit-workshop/src/sass/scss/03-vendor/_prism.scss create mode 100644 packages/uikit-workshop/src/sass/scss/03-vendor/_typeahead.scss create mode 100644 packages/uikit-workshop/src/sass/scss/04-components/_annotations.scss create mode 100644 packages/uikit-workshop/src/sass/scss/04-components/_breadcrumbs.scss rename packages/uikit-workshop/src/sass/scss/{components => 04-components}/_controls.scss (65%) rename packages/uikit-workshop/src/sass/scss/{components => 04-components}/_header.scss (54%) create mode 100644 packages/uikit-workshop/src/sass/scss/04-components/_ish-sizing.scss create mode 100644 packages/uikit-workshop/src/sass/scss/04-components/_logo.scss create mode 100644 packages/uikit-workshop/src/sass/scss/04-components/_modal.scss create mode 100644 packages/uikit-workshop/src/sass/scss/04-components/_navigation.scss rename packages/uikit-workshop/src/sass/scss/{components => 04-components}/_pattern-category.scss (60%) create mode 100644 packages/uikit-workshop/src/sass/scss/04-components/_pattern-info.scss create mode 100644 packages/uikit-workshop/src/sass/scss/04-components/_pattern-lineage.scss create mode 100644 packages/uikit-workshop/src/sass/scss/04-components/_pattern-states.scss create mode 100644 packages/uikit-workshop/src/sass/scss/04-components/_pattern.scss create mode 100644 packages/uikit-workshop/src/sass/scss/04-components/_tabs.scss create mode 100644 packages/uikit-workshop/src/sass/scss/04-components/_text-passage.scss rename packages/uikit-workshop/src/sass/scss/{components => 04-components}/_tools.scss (54%) rename packages/uikit-workshop/src/sass/scss/{components => 04-components}/_viewport.scss (100%) rename packages/uikit-workshop/src/sass/scss/{themes => 05-themes}/_density-theme.scss (50%) create mode 100644 packages/uikit-workshop/src/sass/scss/05-themes/_light-theme.scss rename packages/uikit-workshop/src/sass/scss/{themes => 05-themes}/_sidebar-theme.scss (100%) rename packages/uikit-workshop/src/sass/scss/{utilities => 06-utilities}/_visibility.scss (52%) delete mode 100644 packages/uikit-workshop/src/sass/scss/abstracts/_mixins.scss delete mode 100644 packages/uikit-workshop/src/sass/scss/components/_annotations.scss delete mode 100644 packages/uikit-workshop/src/sass/scss/components/_breadcrumbs.scss delete mode 100644 packages/uikit-workshop/src/sass/scss/components/_ish-sizing.scss delete mode 100644 packages/uikit-workshop/src/sass/scss/components/_logo.scss delete mode 100644 packages/uikit-workshop/src/sass/scss/components/_modal.scss delete mode 100644 packages/uikit-workshop/src/sass/scss/components/_navigation.scss delete mode 100644 packages/uikit-workshop/src/sass/scss/components/_pattern-info.scss delete mode 100644 packages/uikit-workshop/src/sass/scss/components/_pattern-lineage.scss delete mode 100644 packages/uikit-workshop/src/sass/scss/components/_pattern-states.scss delete mode 100644 packages/uikit-workshop/src/sass/scss/components/_pattern.scss delete mode 100644 packages/uikit-workshop/src/sass/scss/components/_tabs.scss delete mode 100644 packages/uikit-workshop/src/sass/scss/components/_text-passage.scss delete mode 100644 packages/uikit-workshop/src/sass/scss/themes/_light-theme.scss delete mode 100644 packages/uikit-workshop/src/sass/scss/vendor/_prism.scss delete mode 100644 packages/uikit-workshop/src/sass/scss/vendor/_typeahead.scss diff --git a/packages/uikit-workshop/src/sass/scss/01-abstracts/_mixins.scss b/packages/uikit-workshop/src/sass/scss/01-abstracts/_mixins.scss new file mode 100644 index 000000000..a3f4ec65b --- /dev/null +++ b/packages/uikit-workshop/src/sass/scss/01-abstracts/_mixins.scss @@ -0,0 +1,98 @@ +/*------------------------------------*\ + #VARIABLES +\*------------------------------------*/ + +/** + * List Reset + */ +@mixin listReset() { + list-style: none; + margin: 0; + padding: 0; +} + +/** + * Hide scrollbar + * 1) This hides scrollbars on Windows devices + */ +@mixin hideScrollBar() { + -ms-overflow-style: -ms-autohiding-scrollbar; + + &::-webkit-scrollbar { + width: 0 !important; + } +} + +/** + * Header Link Style + */ +@mixin linkStyle() { + background: $pl-color-black; + color: $pl-color-gray-50; + text-decoration: none; + line-height: 1; + padding: 0.7rem 0.5rem; + border: 0; + text-align: left; + transition: background $pl-animate-quick ease-out, + color $pl-animate-quick ease-out; + + &:hover { + color: $pl-color-white; + background: $pl-color-gray-87; + } + + &:focus, + &.active { + color: $pl-color-white; + background: $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: $pl-color-white; + color: $pl-color-gray-70; + } + + /** + * Header link styles inside cozy theme + */ + .pl-c-body--theme-density-cozy & { + font-size: $pl-font-size-sm-2; + padding: 1.2rem 0.8rem; + } + + /** + * Header link styles inside comfortable theme + */ + .pl-c-body--theme-density-comfortable & { + font-size: $pl-font-size-sm-2; + padding: 1.5rem 1rem; + } +} + +/** + * Accordion panel + */ +@mixin accordionPanel() { + overflow: hidden; + max-height: 0; + transition: max-height $pl-animate-quick ease-out; + + /** + * Active is when accordion panel is open + */ + &.pl-is-active { + max-height: none; + overflow: auto; + @include hideScrollBar(); + + @media all and (min-width: $pl-bp-med) { + max-height: 120rem; + } + } +} diff --git a/packages/uikit-workshop/src/sass/scss/abstracts/_variables.scss b/packages/uikit-workshop/src/sass/scss/01-abstracts/_variables.scss similarity index 73% rename from packages/uikit-workshop/src/sass/scss/abstracts/_variables.scss rename to packages/uikit-workshop/src/sass/scss/01-abstracts/_variables.scss index 2f21048fa..3e663d412 100644 --- a/packages/uikit-workshop/src/sass/scss/abstracts/_variables.scss +++ b/packages/uikit-workshop/src/sass/scss/01-abstracts/_variables.scss @@ -18,15 +18,15 @@ $pl-color-gray-70: #4d4c4c; $pl-color-gray-87: #222; $pl-color-black: #000; -$pl-color-trans-white-25: rgba(255,255,255,0.25); +$pl-color-trans-white-25: rgba(255, 255, 255, 0.25); -$pl-color-state-info: #02A4D5; -$pl-color-state-complete: #03790F; -$pl-color-state-inreview: #C7A118; -$pl-color-state-deprecated: #B00B02; +$pl-color-state-info: #02a4d5; +$pl-color-state-complete: #03790f; +$pl-color-state-inreview: #c7a118; +$pl-color-state-deprecated: #b00b02; // Font Family -$pl-font: "HelveticaNeue", "Helvetica", "Arial", sans-serif; +$pl-font: 'HelveticaNeue', 'Helvetica', 'Arial', sans-serif; // Font sizes $pl-font-size-sm: 0.7rem; @@ -36,7 +36,7 @@ $pl-font-size-large: 1.2rem; // Spacing & Padding $pl-space: 1rem; -$pl-doublespace: $pl-space*2; +$pl-doublespace: $pl-space * 2; $pl-pad: 1rem; $pl-pad-half: $pl-pad/2; $offset-top: 2rem; @@ -51,4 +51,4 @@ $pl-animate-quick: 0.1s; // Borders $pl-border-radius: 3px; -$pl-border-radius-med: 6px; \ No newline at end of file +$pl-border-radius-med: 6px; diff --git a/packages/uikit-workshop/src/sass/scss/base/_body.scss b/packages/uikit-workshop/src/sass/scss/02-base/_body.scss similarity index 74% rename from packages/uikit-workshop/src/sass/scss/base/_body.scss rename to packages/uikit-workshop/src/sass/scss/02-base/_body.scss index 67fc00a39..a9e70d81e 100644 --- a/packages/uikit-workshop/src/sass/scss/base/_body.scss +++ b/packages/uikit-workshop/src/sass/scss/02-base/_body.scss @@ -8,8 +8,8 @@ * 2) Styled as IDs to avoid collisions with user tag */ .pl-c-body { - margin: 0; - padding: 0; - background: $pl-color-gray-13; - -webkit-text-size-adjust: 100%; -} \ No newline at end of file + margin: 0; + padding: 0; + background: $pl-color-gray-13; + -webkit-text-size-adjust: 100%; +} diff --git a/packages/uikit-workshop/src/sass/scss/base/_reset.scss b/packages/uikit-workshop/src/sass/scss/02-base/_reset.scss similarity index 78% rename from packages/uikit-workshop/src/sass/scss/base/_reset.scss rename to packages/uikit-workshop/src/sass/scss/02-base/_reset.scss index 8e8487f63..203b0f8fb 100644 --- a/packages/uikit-workshop/src/sass/scss/base/_reset.scss +++ b/packages/uikit-workshop/src/sass/scss/02-base/_reset.scss @@ -11,7 +11,7 @@ * going to default to this. */ .pl-c-body * { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} \ No newline at end of file + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} diff --git a/packages/uikit-workshop/src/sass/scss/03-vendor/_prism.scss b/packages/uikit-workshop/src/sass/scss/03-vendor/_prism.scss new file mode 100644 index 000000000..75b13e0f4 --- /dev/null +++ b/packages/uikit-workshop/src/sass/scss/03-vendor/_prism.scss @@ -0,0 +1,183 @@ +/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+handlebars+php+php-extras+twig&plugins=line-numbers+autolinker */ +/** + * prism.js default theme for JavaScript, CSS and HTML + * Based on dabblet (http://dabblet.com) + * @author Lea Verou + */ + +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; + + -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: #b3d4fc; +} + +pre[class*='language-']::selection, +pre[class*='language-'] ::selection, +code[class*='language-']::selection, +code[class*='language-'] ::selection { + text-shadow: none; + background: #b3d4fc; +} + +@media print { + code[class*='language-'], + pre[class*='language-'] { + text-shadow: none; + } +} + +/* Code blocks */ +pre[class*='language-'] { + padding: 1em; + margin: 0.5em 0; + overflow: auto; +} + +:not(pre) > code[class*='language-'], +pre[class*='language-'] { + background: #f5f2f0; +} + +/* Inline code */ +:not(pre) > code[class*='language-'] { + padding: 0.1em; + border-radius: 0.3em; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: slategray; +} + +.token.punctuation { + color: #999; +} + +.namespace { + opacity: 0.7; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: #905; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #690; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #a67f59; + background: hsla(0, 0%, 100%, 0.5); +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #07a; +} + +.token.function { + color: #dd4a68; +} + +.token.regex, +.token.important, +.token.variable { + color: #e90; +} + +.token.important, +.token.bold { + font-weight: bold; +} +.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; /* 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/03-vendor/_typeahead.scss b/packages/uikit-workshop/src/sass/scss/03-vendor/_typeahead.scss new file mode 100644 index 000000000..0356ad9da --- /dev/null +++ b/packages/uikit-workshop/src/sass/scss/03-vendor/_typeahead.scss @@ -0,0 +1,94 @@ +/*------------------------------------*\ + #TWITTER TYPEAHEAD +\*------------------------------------*/ +/** + * Using Twitter Typeahead to autocomplete pattern + * searches. https://twitter.github.io/typeahead.js/ + * 1) Wrapped in pl-c-header to contain styles for projects that + * might already be using Typeahead +*/ + +.pl-c-header { + /** + * Typeahead input + * 1) the primary DOM element that initiates the JS library + */ + .pl-c-typeahead { + border: 0; + background: $pl-color-gray-87 !important; + color: $pl-color-gray-50; + width: 100%; + right: 0; + padding: 0.61rem 0.5rem; + font-size: inherit; + + &:focus { + background: $pl-color-gray-50; + color: $pl-color-white; + } + } + + /** + * Typeahead wrapper + * 1) This is the JS-generated wrapper around the input + * 2) Display after nav list items for horizontal theme + */ + .twitter-typeahead { + display: flex !important; + order: 2; /* 2 */ + width: 100%; + } + + .tt-input { + background: $pl-color-gray-50; + color: $pl-color-white; + + &:hover { + color: $pl-color-white; + background: $pl-color-gray-87 !important; + + &::-webkit-input-placeholder { + color: $pl-color-white; + } + + &::-moz-input-placeholder { + color: $pl-color-white; + } + } + + &:focus { + border-radius: 0; + text-transform: lowercase; + color: $pl-color-white; + background: $pl-color-gray-87; + outline: 1px dotted $pl-color-gray-50; + outline-offset: -1px; + } + } + + .tt-hint { + text-transform: lowercase; + } + + .tt-dropdown-menu { + text-transform: lowercase; + background-color: $pl-color-gray-50; + width: 100%; + border-bottom-right-radius: $pl-border-radius-med; + border-bottom-left-radius: $pl-border-radius-med; + } + + .tt-suggestion { + color: $pl-color-gray-07; + padding: 0.8em; + } + + .tt-suggestion.tt-cursor { + color: $pl-color-white; + background: $pl-color-trans-white-25; + } + + .tt-suggestion p { + margin: 0; + } +} diff --git a/packages/uikit-workshop/src/sass/scss/04-components/_annotations.scss b/packages/uikit-workshop/src/sass/scss/04-components/_annotations.scss new file mode 100644 index 000000000..54ac10c9b --- /dev/null +++ b/packages/uikit-workshop/src/sass/scss/04-components/_annotations.scss @@ -0,0 +1,131 @@ +@charset "UTF-8"; + +/*------------------------------------*\ + #ANNOTATIONS +\*------------------------------------*/ + +/** + * Annotated elements styles + * 1) Annotation styles that appear inside the iframe + * 2) For elements in the DOM that have an annotation, we want to + * provide styles that help the user understand that annotations are available. + * We do this with some cursor helpers and a + */ +.pl-has-annotation { + cursor: help !important; + outline: 1px dotted $pl-color-gray-50; + outline-offset: -4px; + transition: box-shadow $pl-animate-quick ease; + + a, + input { + cursor: help !important; + } + + &:hover { + box-shadow: 0 0 3px $pl-color-gray-50; + } + + &.active { + box-shadow: inset 0 0 6px $pl-color-gray-70; + outline: 1px dotted $pl-color-gray-50; + outline-offset: -1px; + } +} + +/** + * Annotation tooltip + * 1) Appears inside the iframe over any element that has an + * anootation attached to it. + * 2) Annotation tip gets dynamically set to `display: none` via + * JavaScript + */ +.pl-c-annotation-tip { + display: flex; /* 2 */ + align-items: center; + justify-content: center; + width: 24px !important; + height: 24px !important; + margin-top: 6px !important; + margin-left: 6px !important; + border-radius: 50% !important; + background: $pl-color-gray-87 !important; + color: $pl-color-white !important; + font-size: 16px !important; + position: absolute; + z-index: 100; +} + +/*------------------------------------*\ + #ANNOTATIONS INSIDE MODAL +\*------------------------------------*/ + +/** + * Annotations area + * 1) Appears inside of modal + */ +.pl-c-annotations { + margin: 1rem 0; +} + +/** + * Annotations Title + * Says the word "Annotations" + */ +.pl-c-annotations__title { + font-size: 1.2rem !important; + margin: 0 0 0.5rem; +} + +/** + * Annotations list + * 1) Ordered list of annotations + * 2) Presented with parent selector to force styles + * over pl-c-text-passage + */ +.pl-c-annotations .pl-c-annotations__list { + counter-reset: the-count; + padding: 0; + margin: 0; + list-style: none; +} + +/** + * Annotations list item + * 1) Displays each item as a number + */ +.pl-c-annotations__item { + position: relative; + padding-left: 1.5rem; + margin-bottom: 1rem; + border-radius: $pl-border-radius-med; + transition: background $pl-animate-quick ease; + + &:before { + content: counter(the-count); + counter-increment: the-count; + font-size: 85%; + display: flex; + align-items: center; + justify-content: center; + width: 14px; + height: 14px; + border-radius: 50%; + padding: 2px; + text-align: center; + background: $pl-color-gray-50; + color: $pl-color-white; + position: absolute; + top: 4px; + left: 0; + } + + &.pl-is-active { + outline: 1px dotted $pl-color-gray-50; + outline-offset: -1px; + } +} + +.pl-c-annotations .pl-c-annotations__item-title { + margin-bottom: 0; +} diff --git a/packages/uikit-workshop/src/sass/scss/04-components/_breadcrumbs.scss b/packages/uikit-workshop/src/sass/scss/04-components/_breadcrumbs.scss new file mode 100644 index 000000000..ae1cb8f19 --- /dev/null +++ b/packages/uikit-workshop/src/sass/scss/04-components/_breadcrumbs.scss @@ -0,0 +1,32 @@ +@charset "UTF-8"; + +/*------------------------------------*\ + #BREADCRUMBS +\*------------------------------------*/ + +/** + * 1) Breadcrumbs display a pattern's path inside the modal + */ +.pl-c-breadcrumb { + @include listReset(); + margin-bottom: 0.5rem; + display: flex; + font-size: $pl-font-size-sm; + color: $pl-color-gray-50; + text-transform: capitalize; +} + +/** + * Breadcrumb Item + */ +.pl-c-breadcrumb__item { + &:after { + content: '\25b6'; + opacity: 0.4; + font-size: 6px; + display: inline-block; + margin: 0 0.2rem; + position: relative; + top: -1px; + } +} diff --git a/packages/uikit-workshop/src/sass/scss/components/_controls.scss b/packages/uikit-workshop/src/sass/scss/04-components/_controls.scss similarity index 65% rename from packages/uikit-workshop/src/sass/scss/components/_controls.scss rename to packages/uikit-workshop/src/sass/scss/04-components/_controls.scss index f209922a7..224c5dc76 100644 --- a/packages/uikit-workshop/src/sass/scss/components/_controls.scss +++ b/packages/uikit-workshop/src/sass/scss/04-components/_controls.scss @@ -7,16 +7,16 @@ * 2) Right-align inside of header */ .pl-c-controls { - margin-left: auto; /* 2 */ - display: flex; - flex-wrap: nowrap; + margin-left: auto; /* 2 */ + display: flex; + flex-wrap: nowrap; } /** * Control list */ .pl-c-controls__list { - @include listReset(); - display: flex; - flex-wrap: nowrap; -} \ No newline at end of file + @include listReset(); + display: flex; + flex-wrap: nowrap; +} diff --git a/packages/uikit-workshop/src/sass/scss/components/_header.scss b/packages/uikit-workshop/src/sass/scss/04-components/_header.scss similarity index 54% rename from packages/uikit-workshop/src/sass/scss/components/_header.scss rename to packages/uikit-workshop/src/sass/scss/04-components/_header.scss index cc91bd608..18faecb1e 100644 --- a/packages/uikit-workshop/src/sass/scss/components/_header.scss +++ b/packages/uikit-workshop/src/sass/scss/04-components/_header.scss @@ -9,16 +9,16 @@ * 2) Display nav and controls horizontally */ .pl-c-header { - position: fixed; - top: 0; - left: 0; - z-index: 4; - display: flex; /* 2 */ - width: 100%; - background: $pl-color-black; - color: $pl-color-gray-50; - font-family: $pl-font; - font-size: $pl-font-size-sm; + position: fixed; + top: 0; + left: 0; + z-index: 4; + display: flex; /* 2 */ + width: 100%; + background: $pl-color-black; + color: $pl-color-gray-50; + font-family: $pl-font; + font-size: $pl-font-size-sm; } /** @@ -26,11 +26,11 @@ * 1) Styles for the general nav toggle button, which * only appears on small screens */ - .pl-c-header__nav-toggle { - @include linkStyle(); - border: 0; +.pl-c-header__nav-toggle { + @include linkStyle(); + border: 0; - @media all and (min-width: $pl-bp-med) { - display: none; - } -} \ No newline at end of file + @media all and (min-width: $pl-bp-med) { + display: none; + } +} diff --git a/packages/uikit-workshop/src/sass/scss/04-components/_ish-sizing.scss b/packages/uikit-workshop/src/sass/scss/04-components/_ish-sizing.scss new file mode 100644 index 000000000..0d373123f --- /dev/null +++ b/packages/uikit-workshop/src/sass/scss/04-components/_ish-sizing.scss @@ -0,0 +1,86 @@ +/*------------------------------------*\ + #ISH SIZING +\*------------------------------------*/ + +/** + * Viewport size form + * 1) This is the form for the form that houses the current + * viewport size in px and em + */ +.pl-c-viewport-size { + margin: 0; + border: 0; + padding: 0.3rem 0.5rem 0.4rem; + line-height: 1; + display: flex; + align-items: center; +} + +/** + * Size input fields + */ +.pl-c-viewport-size__input { + padding: 0.1rem; + margin: 0; + border: 0; + border-radius: $pl-border-radius; + background: transparent; + font-size: inherit; + color: $pl-color-gray-50; + width: 35px; + text-align: right; + transition: all $pl-animate-quick ease-out; + + &::-moz-focus-inner { + padding: 0; + border: 0; + } + + &:hover { + color: $pl-color-white; + background: $pl-color-gray-87; + } + + &:active, + &:focus { + color: $pl-color-white; + background: $pl-color-gray-87; + outline: 1px dotted $pl-color-gray-50; + outline-offset: -1px; + } +} + +/** + * Size input labels + */ +.pl-c-viewport-size__label { + display: block; + margin: 0; + padding: 0; +} + +/** + * Size options + * 1) This holds the S, M, L, Rand, Disco links + * 2) Depending on the config, these number of options may be + * larger or smaller. + */ +.pl-c-size-list { + display: none; + list-style: none; + margin: 0; + padding: 0; + + @media all and (min-width: $pl-bp-large) { + display: block; + display: flex; + } +} + +/** + * Size actions + * 1) These are the buttons that control the viewport resizing + */ +.pl-c-size-list__action { + @include linkStyle(); +} diff --git a/packages/uikit-workshop/src/sass/scss/04-components/_logo.scss b/packages/uikit-workshop/src/sass/scss/04-components/_logo.scss new file mode 100644 index 000000000..4e1fd867c --- /dev/null +++ b/packages/uikit-workshop/src/sass/scss/04-components/_logo.scss @@ -0,0 +1,27 @@ +/*------------------------------------*\ + #LOGO +\*------------------------------------*/ + +/** + * 1) An optional logo that lives in PL's header. + * 2) Displayed as a link + */ +.pl-c-logo { + max-width: 2rem; + margin: 0 1rem; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + &:focus { + outline: 1px dotted $pl-color-gray-50; + outline-offset: -1px; + } +} + +.pl-c-logo__img { + display: block; + max-width: 100%; + height: auto; +} diff --git a/packages/uikit-workshop/src/sass/scss/04-components/_modal.scss b/packages/uikit-workshop/src/sass/scss/04-components/_modal.scss new file mode 100644 index 000000000..5d24ec2d6 --- /dev/null +++ b/packages/uikit-workshop/src/sass/scss/04-components/_modal.scss @@ -0,0 +1,145 @@ +/*------------------------------------*\ + #MODAL +\*------------------------------------*/ + +/** + * 1) The modal slides up from the bottom of the viewport when + * "show pattern info" is selected on the pattern detail screen. + */ +.pl-c-modal { + display: none; + font-family: $pl-font; + background: $pl-color-black; + color: $pl-color-gray-20; + position: relative; + top: auto; + bottom: 0; + left: 0; + z-index: 5; + width: 100%; + height: 50%; + transition: bottom 0.3s ease-out; + + /** + * Active modal + */ + &.pl-is-active { + display: flex; + flex-direction: column; + bottom: 0; + } +} + +.pl-c-modal__toolbar { + display: flex; +} + +/** + * Modal close button + * 1) Closes the modal popup + */ +.pl-c-modal__close-btn { + font-size: 70%; + background: $pl-color-black; + color: $pl-color-gray-50; + border: 0; + border-radius: $pl-border-radius-med $pl-border-radius-med 0 0; + display: inline-block; + padding: 0.5rem 0.5rem 0.3rem; + margin: 0; + text-decoration: none; + cursor: pointer; + z-index: 2; + transition: all $pl-animate-quick ease-out; + + &:hover, + &:focus { + background: $pl-color-gray-87; + color: $pl-color-white; + } + + &:focus, + &:active { + outline: 1px dotted $pl-color-gray-50; + outline-offset: -2px; + } + + /** + * Modal close button inside active modal + * 1) Move modal button outside of the modal window + */ + .pl-c-modal.pl-is-active & { + bottom: 100%; /* 1 */ + } +} + +.pl-c-modal__cover { + width: 100%; + height: 100%; + display: none; + position: absolute; + z-index: 20; + cursor: move; +} + +.pl-c-modal__resizer { + display: flex; + align-items: center; + justify-content: center; + left: 0; + height: 14px; + width: 100%; + background: $pl-color-black; + z-index: 2; + cursor: ns-resize; + + &:after { + content: ''; + height: 3px; + width: 50px; + border-top: 1px solid $pl-color-gray-50; + border-bottom: 1px solid $pl-color-gray-50; + transition: border-color $pl-animate-quick ease-out; + } + + &:hover:after, + &:focus:after { + border-color: $pl-color-white; + } +} + +/** + * Close button icon + * 1) Displayed as an e + */ +.pl-c-modal__close-btn-icon { + width: 12px; + height: 12px; + color: currentColor; + fill: currentColor; + transition: fill $pl-animate-quick ease-out; +} + +.pl-c-code-copy-btn { + display: inline-block; + position: absolute; + top: 0.5rem; + right: 0.5rem; + padding: 0.2rem 0.4rem; + background: $pl-color-gray-07; + color: $pl-color-gray-87; + border: 1px solid $pl-color-gray-13; + border-radius: $pl-border-radius-med; + font-family: $pl-font; + font-size: $pl-font-size-norm; + text-transform: lowercase; + line-height: 1; + cursor: pointer; + z-index: 2; + transition: background $pl-animate-quick ease-out; + + &:hover, + &:focus { + background: $pl-color-gray-20; + } +} diff --git a/packages/uikit-workshop/src/sass/scss/04-components/_navigation.scss b/packages/uikit-workshop/src/sass/scss/04-components/_navigation.scss new file mode 100644 index 000000000..0ce861cea --- /dev/null +++ b/packages/uikit-workshop/src/sass/scss/04-components/_navigation.scss @@ -0,0 +1,189 @@ +/*------------------------------------*\ + #NAVIGATION +\*------------------------------------*/ + +/** + * Navigation container + * 1) Collapse height on small screens. Menu trigger button + * activates nav + */ +.pl-c-nav { + @media all and (max-width: $pl-bp-med) { + position: absolute; + top: 100%; + width: 100%; + overflow: hidden; + max-height: 0; /* 1 */ + background: $pl-color-black; + display: flex; + flex-direction: column; + transition: max-height $pl-animate-quick ease-out; + + /** + * Active navigaiton + * 1) Slide + * 2) Set the height to the vierport height minus the height + * of the header + */ + &.pl-is-active { + max-height: 50rem; /* 1 */ + height: calc(100vh - #{$offset-top}); /* 2 */ + overflow: auto; + @include hideScrollBar(); + } + } + + @media all and (min-width: $pl-bp-med) { + display: flex; + } +} + +/** + * Nav list + * 1) appears as an
    + * 2) display as a horizontal list on larger screens + * 3) On small screens, move the nav list after the typeahead form field + */ +.pl-c-nav__list { + z-index: 1; + margin: 0; + padding: 0; + list-style: none; + + @media all and (max-width: $pl-bp-med) { + order: 2; /* 3 */ + } + + @media all and (min-width: $pl-bp-med) { + display: flex; /* 2 */ + } +} + +/** + * Nav list item + */ +.pl-c-nav__item { + cursor: pointer; + position: relative; +} + +/** + * 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; + } +} + +/** + * Nav link + */ +.pl-c-nav__link { + display: flex; + align-items: center; + @include linkStyle(); +} + +/** + * Nav sublink + * 1) Visually differentiate sub-item links from + * the other links. Creates better hierarchy. + */ +.pl-c-nav__link--sublink { + text-transform: none; + padding-left: 1rem; +} + +/** + * Nav link + */ +.pl-c-nav__link--dropdown { + /** + * 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; + } + } + + /** + * Active dropdown + */ + &.pl-is-active { + color: $pl-color-white; + background: $pl-color-gray-87; + + /** + * Caret rotation and positioning in active dropdown + */ + &:after { + color: $pl-color-gray-50; + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); + } + } +} + +/** + * Nav sublist + * 1) On larger screens, display as dropdowns that + * hang over the header + */ +.pl-c-nav__sublist { + @include listReset(); + + @media all and (min-width: $pl-bp-med) { + position: absolute; + top: 100%; /* 1 */ + left: 0; + min-width: 10rem; + overflow: hidden; + border-bottom-left-radius: $pl-border-radius-med; + border-bottom-right-radius: $pl-border-radius-med; + } +} + +/** + * Dropdown sublist + */ +.pl-c-nav__sublist--dropdown, +.pl-c-nav__subsublist--dropdown { + @include listReset(); + @include accordionPanel(); +} + +/** + * Dropdown sublist + * 1) Set the height to the viewport height minus the height of the header + */ +.pl-c-nav__sublist--dropdown.pl-is-active { + @media all and (min-width: $pl-bp-med) { + height: calc(100vh - #{$offset-top}); /* 1 */ + } +} + +/** + * Sub-navigation + * 1) Third-level links are stylistically different + * than first and second nav links. + */ +.pl-c-nav__subsublist { + @include listReset(); +} diff --git a/packages/uikit-workshop/src/sass/scss/components/_pattern-category.scss b/packages/uikit-workshop/src/sass/scss/04-components/_pattern-category.scss similarity index 60% rename from packages/uikit-workshop/src/sass/scss/components/_pattern-category.scss rename to packages/uikit-workshop/src/sass/scss/04-components/_pattern-category.scss index 331006f18..abe9d6142 100644 --- a/packages/uikit-workshop/src/sass/scss/components/_pattern-category.scss +++ b/packages/uikit-workshop/src/sass/scss/04-components/_pattern-category.scss @@ -9,29 +9,29 @@ * 2) The category contains a title and optional description */ .pl-c-category { - margin-top: 6rem; - font: $pl-font !important; + margin-top: 6rem; + font: $pl-font !important; - &:first-of-type { - margin-top: 2rem; - } + &:first-of-type { + margin-top: 2rem; + } } /** * Pattern Category Title */ .pl-c-category__title { - font-size: 1.4rem !important; - color: $pl-color-gray-87 !important; - margin: 0 0 0.2rem; - text-transform: capitalize; + font-size: 1.4rem !important; + color: $pl-color-gray-87 !important; + margin: 0 0 0.2rem; + text-transform: capitalize; } /** * Pattern Category Link */ .pl-c-category__title-link { - transition: color $pl-animate-quick ease-out; + transition: color $pl-animate-quick ease-out; } /** @@ -40,11 +40,11 @@ * 2) Hide the pattern category description is it's empty */ .pl-c-category__description { - font-size: $pl-font-size-sm-2; - line-height: 1.5; - max-width: 30rem; + font-size: $pl-font-size-sm-2; + line-height: 1.5; + max-width: 30rem; - &:empty { - display: none; /* 2 */ - } -} \ No newline at end of file + &:empty { + display: none; /* 2 */ + } +} 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 new file mode 100644 index 000000000..5e6c28700 --- /dev/null +++ b/packages/uikit-workshop/src/sass/scss/04-components/_pattern-info.scss @@ -0,0 +1,145 @@ +/*------------------------------------*\ + #PATTERN INFO +\*------------------------------------*/ + +/** + * 1) Pattern info contains two side-by-side panels that + * house a pattern's information, such as title, lineage, + * code, annotations, and more. + */ +.pl-c-pattern-info { + @media all and (min-width: $pl-bp-large) { + display: flex; + } + + /** + * Pattern info inside the "view all" template + */ + .pl-c-pattern & { + max-height: 20rem; + overflow: scroll; + @include hideScrollBar(); + + @media all and (min-width: $pl-bp-large) { + max-height: none; + height: 18rem; + overflow: visible; + } + } + + /** + * Pattern info inside modal + */ + .pl-c-modal & { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + overflow: scroll; + @include hideScrollBar(); + + @media all and (min-width: $pl-bp-large) { + position: static; + overflow: visible; + } + } +} + +/** + * Pattern Info Panel + * 1) Individual panel. Left side contains pattern info + * Right side contains pattern code + */ +.pl-c-pattern-info__panel { + padding: 1rem; + + @media all and (min-width: $pl-bp-large) { + flex: auto; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + } + + .pl-c-modal & { + @media all and (min-width: $pl-bp-xl) { + padding-left: 2rem; + } + } +} + +/** + * Pattern Info Panel + * 1) Left panel that contains pattern title, lineage, description, annotations + */ +.pl-c-pattern-info__panel--info { + padding-top: 2rem; + + @media all and (min-width: $pl-bp-large) { + left: 0; + right: 50%; + overflow: scroll; + @include hideScrollBar(); + } + + @media all and (min-width: $pl-bp-xl) { + right: 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 { + @media all and (min-width: $pl-bp-large) { + right: 0; + left: 50%; + top: 1.2rem; + } + + @media all and (min-width: $pl-bp-xl) { + left: 45%; + } +} + +/** + * Pattern Header inside modal + */ +.pl-c-pattern-info__header { + margin-bottom: 0.5rem; +} + +/** + * Pattern Title inside modal + */ +.pl-c-pattern-info__title { + font-size: 1.4rem !important; + font-weight: normal; + margin-top: 0; + margin-bottom: 0; + color: inherit; + text-transform: capitalize; + display: inline-flex; + align-items: center; +} + +/** + * Pattern Description inside modal + */ +.pl-c-pattern-info__description { + border-bottom-color: $pl-color-gray-50; +} + +/** + * Pattern Annotations inside modal + */ +.pl-c-annotations { + border-top-color: $pl-color-gray-50; +} diff --git a/packages/uikit-workshop/src/sass/scss/04-components/_pattern-lineage.scss b/packages/uikit-workshop/src/sass/scss/04-components/_pattern-lineage.scss new file mode 100644 index 000000000..a3e12f881 --- /dev/null +++ b/packages/uikit-workshop/src/sass/scss/04-components/_pattern-lineage.scss @@ -0,0 +1,29 @@ +/*------------------------------------*\ + #PATTERN LINEAGE +\*------------------------------------*/ + +/** + * Pattern Lineage info + */ +.pl-c-lineage { + font-size: $pl-font-size-sm-2; + line-height: 1.7; + margin-top: 0; +} + +/** + * Lineage link + */ +.pl-c-lineage__link { + font-style: italic; + color: $pl-color-gray-50; + text-decoration: underline; + display: inline-flex; + align-items: center; + transition: opacity $pl-animate-quick ease; + + &:hover, + &:focus { + opacity: 0.8; + } +} diff --git a/packages/uikit-workshop/src/sass/scss/04-components/_pattern-states.scss b/packages/uikit-workshop/src/sass/scss/04-components/_pattern-states.scss new file mode 100644 index 000000000..82f2663bb --- /dev/null +++ b/packages/uikit-workshop/src/sass/scss/04-components/_pattern-states.scss @@ -0,0 +1,40 @@ +/*------------------------------------*\ + #PATTERN STATES +\*------------------------------------*/ + +/** +* Pattern states add color-coded dots next to patterns +* in the dropdown navigation. +*/ +.pl-c-pattern-state { + display: inline-block; + width: 5px; + height: 5px; + margin-left: 10px; + position: relative; + top: 5px; + left: 0; + border-radius: 50%; + background: $pl-color-state-info; + line-height: 4px; + text-indent: 10px; + + &--complete { + background: $pl-color-state-complete; + } + + &--inreview { + background: $pl-color-state-inreview; + } + + &--deprecated { + background: $pl-color-state-deprecated; + } +} + +/** +* Complete state +*/ +.complete:before { + color: #03790f !important; +} diff --git a/packages/uikit-workshop/src/sass/scss/04-components/_pattern.scss b/packages/uikit-workshop/src/sass/scss/04-components/_pattern.scss new file mode 100644 index 000000000..c07706733 --- /dev/null +++ b/packages/uikit-workshop/src/sass/scss/04-components/_pattern.scss @@ -0,0 +1,131 @@ +/*------------------------------------*\ + #PATTERN +\*------------------------------------*/ + +/** +* Pattern +* 1) This is an individual pattern that appears in the "view all" template. +* It contains pattern title and toggle to view more information, such as +* description, lineage, code, etc. +* 2) Prevents absolutely-positioned elements from floating to the top +* 3) Prevents floated patterns from floating wraps +*/ +.pl-c-pattern { + margin-bottom: $pl-doublespace; + position: relative; /* 2 */ + clear: both; /* 3 */ +} + +/** +* Pattern Header +*/ +.pl-c-pattern__header { + position: relative; + padding: 0.5rem 0 0; + line-height: 1.3; + font-size: 90%; + color: $pl-color-gray-50; + + &:empty { + padding: 0; + } +} + +/** + * Pattern Title + */ +.pl-c-pattern__title { + font-family: $pl-font !important; + font-size: 0.85rem !important; + line-height: 1 !important; + font-weight: normal !important; + margin: 0 !important; + padding: 0 !important; + text-transform: capitalize !important; +} + +/** + * Pattern Title Link + * 1) Vertically align pattern label and pattern state badge + */ +.pl-c-pattern__title-link { + display: inline-flex; /* 1 */ + align-items: flex-start; /* 1 */ + padding: $pl-pad 0 0.3rem; + color: $pl-color-gray-50 !important; + text-decoration: none; + cursor: pointer; + + &:hover, + &:focus { + color: $pl-color-black !important; + } +} + +/** +* Pattern Extra Toggle Button +* 1) This is the button that twirls down extra pattern info +*/ +.pl-c-pattern__extra-toggle { + font-size: 9px; + position: absolute; + bottom: -1px; + right: 0; + z-index: 1; + padding: 0.65em 0.65em 0.5em; + line-height: 1; + color: $pl-color-gray-50; + background: transparent; + font-weight: normal; + border: 1px solid $pl-color-gray-13; + border-top-left-radius: $pl-border-radius-med; + border-top-right-radius: $pl-border-radius-med; + transition: background $pl-animate-quick ease-out; + + .pl-c-pattern__toggle-icon { + display: inline-block; + } + + &:hover, + &:focus, + &.pl-is-active { + background: $pl-color-gray-02; + color: $pl-color-black; + } + + &:focus { + outline: 1px dotted $pl-color-gray-70; + } + + &.pl-is-active { + border-bottom-color: $pl-color-gray-02; + + .pl-c-pattern__toggle-icon { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); + } + } +} + +/** +* Pattern Extra +* 1) This is the info panel that contains extra pattern info +* like pattern description, lineage, code, and more +*/ +.pl-c-pattern__extra { + background: $pl-color-gray-02; + border-top: 1px solid $pl-color-gray-13; + margin-bottom: $pl-space; + overflow: hidden; + max-height: 1px; + position: relative; + transition: all $pl-animate-quick ease-out; + + &.pl-is-active { + border: 1px solid $pl-color-gray-13; + border-radius: $pl-border-radius-med; + border-top-right-radius: 0; + max-height: 150rem; + } +} diff --git a/packages/uikit-workshop/src/sass/scss/04-components/_tabs.scss b/packages/uikit-workshop/src/sass/scss/04-components/_tabs.scss new file mode 100644 index 000000000..51740b3d1 --- /dev/null +++ b/packages/uikit-workshop/src/sass/scss/04-components/_tabs.scss @@ -0,0 +1,137 @@ +/*------------------------------------*\ + #TABS +\*------------------------------------*/ + +/** + * 1) Tabs contain a set of horizontally-arranged tabs + * with accompanying panels. When a tab link is clicked + * the corresponding panel becomes visible + */ +.pl-c-tabs { + padding: 0 0.5rem 0.5rem; + background: $pl-color-white; + border: 1px solid $pl-color-gray-13; + border-radius: $pl-border-radius-med; + font-family: $pl-font; + position: relative; + display: flex; + flex-direction: column; + overflow: hidden; + + /** + * Tabs inside a code panel + */ + .pl-c-pattern-info__panel--code & { + @media all and (min-width: $pl-bp-large) { + position: absolute; + top: 1rem; + bottom: 1rem; + left: 1rem; + right: 1rem; + } + } + + .pl-c-modal & { + @media all and (min-width: $pl-bp-xl) { + right: 2rem; + left: 2rem; + } + } +} + +/** + * Tab List + * 1) A unordered list that contains the tab links + */ +.pl-c-tabs__list { + display: flex; + width: 100%; + list-style: none; + margin: 0; + padding: 0.5rem 0; + background: $pl-color-white; +} + +/** + * Tab Link + */ +.pl-c-tabs__link { + display: block; + line-height: 1; + padding: 0.2rem 0.4rem; + border: 1px solid transparent; + border-radius: $pl-border-radius-med; + background: $pl-color-white; + color: $pl-color-gray-50; + cursor: pointer; + text-decoration: none; + text-transform: lowercase; + transition: all $pl-animate-quick ease-out; + + &:hover { + color: $pl-color-gray-87; + } + + /** + * Active Tab + * 1) Note: the active tab color corresponds with the Prism code block + * background color, which is why it doesn't use a Sass variable + */ + &.pl-is-active-tab { + color: $pl-color-gray-87; + background: $pl-color-gray-07; + border: 1px solid $pl-color-gray-13; + } +} + +/** + * Tab Content + * 1) Tab content contains the tab panels + */ +.pl-c-tabs__content { + flex: 1 0 auto; + overflow: scroll; + @include hideScrollBar(); + height: 100%; + padding-top: 0.5rem; + + /** + * Tab content inside modal + */ + .pl-c-modal & { + border: 0; + } +} + +/** + * Tab panel + * 1) Note: the active tab color corresponds with the Prism code block + * background color, which is why it doesn't use a Sass variable + */ +.pl-c-tabs__panel { + display: none; + min-height: 12rem; + + &.pl-is-active-tab { + display: block; + } + + /** + * Tab code + * 1) Targeting pre tag in here as Prism is being used for the majority of the styles + */ + pre[class*='language-'], + :not(pre) > code[class*='language-'], + pre[class*='language-'] { + background: transparent; + margin: 0; + padding: 0; + border: 0; + display: block; + } + + code[class*='language-'] { + background: transparent; + margin: 0; + } +} 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 new file mode 100644 index 000000000..82d9eb4e8 --- /dev/null +++ b/packages/uikit-workshop/src/sass/scss/04-components/_text-passage.scss @@ -0,0 +1,135 @@ +/*------------------------------------*\ + #TEXT PASSAGE +\*------------------------------------*/ + +/** + * 1) A passage of text which includes free-form tags (ul, blockquote, p, h2, etc) + * generated by markdown + */ +.pl-c-text-passage { + font-size: $pl-font-size-sm-2; + line-height: 1.7; + + p { + margin-top: 0; + margin-bottom: 1rem; + } + + /** + * Link within the text passage + */ + a { + color: $pl-color-gray-50; + text-decoration: underline; + transition: opacity $pl-animate-quick ease; + + &:hover, + &:focus { + opacity: 0.8; + } + } + + /** + * Code + */ + code[class*='language-'], + pre[class*='language-'] { + color: inherit; + } + + /** + * Blockquote within text passage + */ + blockquote { + padding-left: 0.8rem; + border-left: 3px solid inherit; + } + + /** + * Horizontal rule + */ + hr { + height: 1px; + background: $pl-color-gray-50; + margin: 2rem 0; + border: 0; + } + + /** + * First-level heading within text passage + */ + h1 { + margin-bottom: 1rem; + font-weight: normal; + } + + /** + * Second-level heading within text passage + */ + h2 { + margin: 1rem 0 1rem; + font-weight: normal; + } + + /** + * Third-level heading within text passage + */ + h3 { + margin: 1rem 0 1rem; + font-weight: normal; + } + + /** + * Fourth-level heading within text passage + */ + h4 { + margin: 1rem 0 1rem; + font-weight: normal; + } + + /** + * Fifth-level heading within text passage + */ + h5 { + margin: 1rem 0 1rem; + font-weight: normal; + } + + /** + * Sixth-level heading within text passage + */ + h6 { + margin: 1rem 0 1rem; + font-weight: normal; + } + + /** + * Unordered list within text passage + */ + ul { + list-style: square; + margin-left: 0.9rem; + margin-bottom: 1rem; + + li:last-child { + margin-bottom: 0; + } + } + + /** + * Ordered list within text passage + */ + ol { + list-style: decimal; + margin-left: 0.9rem; + margin-bottom: 1rem; + + li:last-child { + margin-bottom: 0; + } + } + + li { + margin-bottom: 0.5rem; + } +} diff --git a/packages/uikit-workshop/src/sass/scss/components/_tools.scss b/packages/uikit-workshop/src/sass/scss/04-components/_tools.scss similarity index 54% rename from packages/uikit-workshop/src/sass/scss/components/_tools.scss rename to packages/uikit-workshop/src/sass/scss/04-components/_tools.scss index 3a9d688e7..992e0370f 100644 --- a/packages/uikit-workshop/src/sass/scss/components/_tools.scss +++ b/packages/uikit-workshop/src/sass/scss/04-components/_tools.scss @@ -8,8 +8,8 @@ * new window and view the documentation */ .pl-c-tools { - position: relative; - display: flex; + position: relative; + display: flex; } /** @@ -18,15 +18,15 @@ * triggers the tools dropdown list */ .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; - position: relative; - min-width: 30px; + @include linkStyle(); + margin: 0; + padding-top: 0.6rem; + padding-bottom: 0.5rem; + display: inline-flex; + align-items: center; + justify-content: center; + position: relative; + min-width: 30px; } /** @@ -35,22 +35,22 @@ * 2) Set the width and height of the icon to be the same height of font */ .pl-c-tools__toggle-icon { - position: absolute; + position: absolute; } /** * Tools dropdown list */ .pl-c-tools__list { - @include listReset(); - @include accordionPanel(); - position: absolute; - top: 100%; - right: 0; - z-index: 1; - width: 10rem; - border-bottom-left-radius: $pl-border-radius-med; - border-bottom-right-radius: $pl-border-radius-med; + @include listReset(); + @include accordionPanel(); + position: absolute; + top: 100%; + right: 0; + z-index: 1; + width: 10rem; + border-bottom-left-radius: $pl-border-radius-med; + border-bottom-right-radius: $pl-border-radius-med; } /** @@ -58,8 +58,8 @@ * 1) Links and buttons inside of the tools dropdown */ .pl-c-tools__action { - @include linkStyle(); - display: block; - width: 100%; - margin: 0; -} \ No newline at end of file + @include linkStyle(); + display: block; + width: 100%; + margin: 0; +} diff --git a/packages/uikit-workshop/src/sass/scss/components/_viewport.scss b/packages/uikit-workshop/src/sass/scss/04-components/_viewport.scss similarity index 100% rename from packages/uikit-workshop/src/sass/scss/components/_viewport.scss rename to packages/uikit-workshop/src/sass/scss/04-components/_viewport.scss diff --git a/packages/uikit-workshop/src/sass/scss/themes/_density-theme.scss b/packages/uikit-workshop/src/sass/scss/05-themes/_density-theme.scss similarity index 50% rename from packages/uikit-workshop/src/sass/scss/themes/_density-theme.scss rename to packages/uikit-workshop/src/sass/scss/05-themes/_density-theme.scss index e97ea896b..bdd6227f5 100644 --- a/packages/uikit-workshop/src/sass/scss/themes/_density-theme.scss +++ b/packages/uikit-workshop/src/sass/scss/05-themes/_density-theme.scss @@ -6,71 +6,67 @@ * A theme that adjusts the density of the PL UI. * Options are compact (default), cozy, and comfortable */ - .pl-c-body--theme-density-cozy { - - /** +.pl-c-body--theme-density-cozy { + /** * Header */ - .pl-c-header { - font-size: $pl-font-size-sm-2; - } + .pl-c-header { + font-size: $pl-font-size-sm-2; + } - /** + /** * Size input fields */ - .pl-c-viewport-size__input { - width: 44px; - } + .pl-c-viewport-size__input { + width: 44px; + } - /** + /** * Typeahead */ - .pl-c-typeahead { - padding: 0.9rem 0.8rem; - } + .pl-c-typeahead { + padding: 0.9rem 0.8rem; + } - /** + /** * Ish sizing controls * 1) Hide on smaller screens */ - .pl-c-size-list { - @media all and (max-width: 78em) { - display: none; - } + .pl-c-size-list { + @media all and (max-width: 78em) { + display: none; } + } - /** + /** * Viewport sizing inputs * 1) Hide these controls on */ - .pl-c-viewport-size { - @media all and (max-width: 78em) { - display: none; /* 1 */ - } + .pl-c-viewport-size { + @media all and (max-width: 78em) { + display: none; /* 1 */ } + } - /** + /** * Tools menu button * 1) This is the button that contains the toggle and * triggers the tools dropdown list */ - .pl-c-tools__toggle { - min-width: 44px; - } + .pl-c-tools__toggle { + min-width: 44px; + } - /** + /** * Viewport * 1) Offset the viewport to account for the adjusted * PL header height */ - .pl-c-viewport { - top: 3.28rem; - } + .pl-c-viewport { + top: 3.28rem; + } } - - - /*------------------------------------*\ #COMFORTABLE DENSITY \*------------------------------------*/ @@ -79,78 +75,77 @@ * Biggest */ - .pl-c-body--theme-density-comfortable { - - /** +.pl-c-body--theme-density-comfortable { + /** * Header * 1) Change the font size of everything in the header */ - .pl-c-header { - font-size: $pl-font-size-sm-2; - } + .pl-c-header { + font-size: $pl-font-size-sm-2; + } - /** + /** * Logo */ - .pl-c-logo { - max-width: 4rem; - } + .pl-c-logo { + max-width: 4rem; + } - /** + /** * Typeahead dropdown list suggestion */ - .pl-c-header .tt-suggestion { - padding: 1.5rem 1rem; - } + .pl-c-header .tt-suggestion { + padding: 1.5rem 1rem; + } - /** + /** * Size input fields */ - .pl-c-viewport-size__input { - width: 44px; - } + .pl-c-viewport-size__input { + width: 44px; + } - /** + /** * Typeahead */ - .pl-c-typeahead { - padding: 0.9rem 1rem; - } + .pl-c-typeahead { + padding: 0.9rem 1rem; + } - /** + /** * Ish sizing controls * 1) Hide on smaller screens */ - .pl-c-size-list { - @media all and (max-width: 78em) { - display: none; /* 1 */ - } + .pl-c-size-list { + @media all and (max-width: 78em) { + display: none; /* 1 */ } + } - /** + /** * Viewport sizing inputs */ - .pl-c-viewport-size { - @media all and (max-width: 78em) { - display: none; /* 1 */ - } + .pl-c-viewport-size { + @media all and (max-width: 78em) { + display: none; /* 1 */ } + } - /** + /** * Tools menu button * 1) This is the button that contains the toggle and * triggers the tools dropdown list */ - .pl-c-tools__toggle { - min-width: 44px; - } + .pl-c-tools__toggle { + min-width: 44px; + } - /** + /** * Viewport * 1) Offset the viewport to account for the adjusted * PL header height */ - .pl-c-viewport { - top: 3.8rem; /* 1 */ - } -} \ No newline at end of file + .pl-c-viewport { + top: 3.8rem; /* 1 */ + } +} 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 new file mode 100644 index 000000000..64df02529 --- /dev/null +++ b/packages/uikit-workshop/src/sass/scss/05-themes/_light-theme.scss @@ -0,0 +1,136 @@ +/*------------------------------------*\ + #LIGHT THEME +\*------------------------------------*/ + +/** + * A light-color theme for Pattern Lab, where the + * PL header and modal are light instead of dark + */ +.pl-c-body--theme-light { + /** + * Header + */ + .pl-c-header { + background: $pl-color-white; + border-bottom: 1px solid $pl-color-gray-20; + } + + /** + * Nav Sublist dropdown + */ + .pl-c-nav__sublist { + background: transparent; + } + + /** + * Tools dropdown + */ + .pl-c-tools__list.pl-is-active { + border-bottom: 1px solid $pl-color-gray-20; + border-left: 1px solid $pl-color-gray-20; + } + + /** + * Nav link dropdown + */ + .pl-c-nav__link--dropdown { + color: $pl-color-gray-70; + background: $pl-color-white; + + &:after { + color: $pl-color-gray-20; + } + } + + /** + * All Nav links inside of subnav dropdown + */ + .pl-c-nav__sublist .pl-c-nav__link { + border-left: 1px solid $pl-color-gray-20; + border-right: 1px solid $pl-color-gray-20; + } + + /** + * Last sublist item + */ + .pl-c-nav__sublist > .pl-c-nav__item:last-child .pl-c-nav__link { + @media all and (min-width: $pl-bp-med) { + border-bottom-left-radius: $pl-border-radius-med; + border-bottom-right-radius: $pl-border-radius-med; + border-bottom: 1px solid $pl-color-gray-20; + } + } + + /** + * Size input + */ + .pl-c-viewport-size__input { + color: $pl-color-gray-70; + + &:hover, + &:focus { + background: $pl-color-gray-13; + } + } + + /** + * Typeahead container + */ + .typeahead { + background: $pl-color-gray-13 !important; + } + + /** + * Typeahead input + */ + .pl-c-typeahead { + background: $pl-color-gray-13 !important; + color: $pl-color-gray-70 !important; + } + + /** + * Typeahead input + */ + .tt-input { + background: $pl-color-gray-07 !important; + color: $pl-color-gray-70 !important; + + &:hover { + color: $pl-color-gray-87; + background: $pl-color-gray-13 !important; + + &::-webkit-input-placeholder { + color: $pl-color-gray-87; + } + + &::-moz-input-placeholder { + color: $pl-color-gray-87; + } + } + } + + /** + * Modal inside a light theme + */ + .pl-c-modal { + background: $pl-color-white; + color: $pl-color-gray-70; + border-top: 1px solid $pl-color-gray-20; + } + + /** + * Modal close button + * 1) Closes the modal popup + */ + .pl-c-modal__close-btn { + background: $pl-color-white; + border-top: 1px solid $pl-color-gray-20; + border-left: 1px solid $pl-color-gray-20; + + &:hover, + &:focus { + background: $pl-color-gray-02; + color: $pl-color-gray-70; + } + } +} diff --git a/packages/uikit-workshop/src/sass/scss/themes/_sidebar-theme.scss b/packages/uikit-workshop/src/sass/scss/05-themes/_sidebar-theme.scss similarity index 100% rename from packages/uikit-workshop/src/sass/scss/themes/_sidebar-theme.scss rename to packages/uikit-workshop/src/sass/scss/05-themes/_sidebar-theme.scss diff --git a/packages/uikit-workshop/src/sass/scss/utilities/_visibility.scss b/packages/uikit-workshop/src/sass/scss/06-utilities/_visibility.scss similarity index 52% rename from packages/uikit-workshop/src/sass/scss/utilities/_visibility.scss rename to packages/uikit-workshop/src/sass/scss/06-utilities/_visibility.scss index de2ca7d46..dc59b5312 100644 --- a/packages/uikit-workshop/src/sass/scss/utilities/_visibility.scss +++ b/packages/uikit-workshop/src/sass/scss/06-utilities/_visibility.scss @@ -6,11 +6,11 @@ * Visibly hidden but still accessible to screen readers */ .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 + 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/src/sass/scss/abstracts/_mixins.scss b/packages/uikit-workshop/src/sass/scss/abstracts/_mixins.scss deleted file mode 100644 index 64d6cc6d8..000000000 --- a/packages/uikit-workshop/src/sass/scss/abstracts/_mixins.scss +++ /dev/null @@ -1,96 +0,0 @@ -/*------------------------------------*\ - #VARIABLES -\*------------------------------------*/ - -/** - * List Reset - */ -@mixin listReset() { - list-style: none; - margin: 0; - padding: 0; -} - -/** - * Hide scrollbar - * 1) This hides scrollbars on Windows devices - */ - @mixin hideScrollBar() { - -ms-overflow-style: -ms-autohiding-scrollbar; - - &::-webkit-scrollbar { - width: 0 !important - } -} - -/** - * Header Link Style - */ -@mixin linkStyle() { - background: $pl-color-black; - color: $pl-color-gray-50; - text-decoration: none; - line-height: 1; - padding: 0.7rem 0.5rem; - border: 0; - text-align: left; - transition: background $pl-animate-quick ease-out, color $pl-animate-quick ease-out; - - &:hover { - color: $pl-color-white; - background: $pl-color-gray-87; - } - - &:focus, &.active { - color: $pl-color-white; - background: $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: $pl-color-white; - color: $pl-color-gray-70; - } - - /** - * Header link styles inside cozy theme - */ - .pl-c-body--theme-density-cozy & { - font-size: $pl-font-size-sm-2; - padding: 1.2rem 0.8rem; - } - - /** - * Header link styles inside comfortable theme - */ - .pl-c-body--theme-density-comfortable & { - font-size: $pl-font-size-sm-2; - padding: 1.5rem 1rem; - } -} - -/** - * Accordion panel - */ -@mixin accordionPanel() { - overflow: hidden; - max-height: 0; - transition: max-height $pl-animate-quick ease-out; - - /** - * Active is when accordion panel is open - */ - &.pl-is-active { - max-height: none; - overflow: auto; - @include hideScrollBar(); - - @media all and (min-width: $pl-bp-med) { - max-height: 120rem; - } - } -} \ No newline at end of file diff --git a/packages/uikit-workshop/src/sass/scss/components/_annotations.scss b/packages/uikit-workshop/src/sass/scss/components/_annotations.scss deleted file mode 100644 index 4854d1bc9..000000000 --- a/packages/uikit-workshop/src/sass/scss/components/_annotations.scss +++ /dev/null @@ -1,135 +0,0 @@ -@charset "UTF-8"; - -/*------------------------------------*\ - #ANNOTATIONS -\*------------------------------------*/ - -/** - * Annotated elements styles - * 1) Annotation styles that appear inside the iframe - * 2) For elements in the DOM that have an annotation, we want to - * provide styles that help the user understand that annotations are available. - * We do this with some cursor helpers and a - */ -.pl-has-annotation { - cursor: help !important; - outline: 1px dotted $pl-color-gray-50; - outline-offset: -4px; - transition: box-shadow $pl-animate-quick ease; - - a, - input { - cursor: help !important; - } - - &:hover { - box-shadow: 0 0 3px $pl-color-gray-50; - } - - &.active { - box-shadow: inset 0 0 6px $pl-color-gray-70; - outline: 1px dotted $pl-color-gray-50; - outline-offset: -1px; - } -} - -/** - * Annotation tooltip - * 1) Appears inside the iframe over any element that has an - * anootation attached to it. - * 2) Annotation tip gets dynamically set to `display: none` via - * JavaScript - */ -.pl-c-annotation-tip { - display: flex; /* 2 */ - align-items: center; - justify-content: center; - width: 24px !important; - height: 24px !important; - margin-top: 6px !important; - margin-left: 6px !important; - border-radius: 50% !important; - background: $pl-color-gray-87 !important; - color: $pl-color-white !important; - font-size: 16px !important; - position: absolute; - z-index: 100; -} - - - - - -/*------------------------------------*\ - #ANNOTATIONS INSIDE MODAL -\*------------------------------------*/ - -/** - * Annotations area - * 1) Appears inside of modal - */ -.pl-c-annotations { - margin: 1rem 0; -} - -/** - * Annotations Title - * Says the word "Annotations" - */ -.pl-c-annotations__title { - font-size: 1.2rem !important; - margin: 0 0 0.5rem; -} - -/** - * Annotations list - * 1) Ordered list of annotations - * 2) Presented with parent selector to force styles - * over pl-c-text-passage - */ -.pl-c-annotations .pl-c-annotations__list { - counter-reset: the-count; - padding: 0; - margin: 0; - list-style: none; -} - -/** - * Annotations list item - * 1) Displays each item as a number - */ -.pl-c-annotations__item { - position: relative; - padding-left: 1.5rem; - margin-bottom: 1rem; - border-radius: $pl-border-radius-med; - transition: background $pl-animate-quick ease; - - &:before { - content: counter(the-count); - counter-increment: the-count; - font-size: 85%; - display: flex; - align-items: center; - justify-content: center; - width: 14px; - height: 14px; - border-radius: 50%; - padding: 2px; - text-align: center; - background: $pl-color-gray-50; - color: $pl-color-white; - position: absolute; - top: 4px; - left: 0; - } - - &.pl-is-active { - outline: 1px dotted $pl-color-gray-50; - outline-offset: -1px; - } -} - -.pl-c-annotations .pl-c-annotations__item-title { - margin-bottom: 0; -} diff --git a/packages/uikit-workshop/src/sass/scss/components/_breadcrumbs.scss b/packages/uikit-workshop/src/sass/scss/components/_breadcrumbs.scss deleted file mode 100644 index 6e27eb1a2..000000000 --- a/packages/uikit-workshop/src/sass/scss/components/_breadcrumbs.scss +++ /dev/null @@ -1,32 +0,0 @@ -@charset "UTF-8"; - -/*------------------------------------*\ - #BREADCRUMBS -\*------------------------------------*/ - -/** - * 1) Breadcrumbs display a pattern's path inside the modal - */ -.pl-c-breadcrumb { - @include listReset(); - margin-bottom: 0.5rem; - display: flex; - font-size: $pl-font-size-sm; - color: $pl-color-gray-50; - text-transform: capitalize; -} - -/** - * Breadcrumb Item - */ -.pl-c-breadcrumb__item { - &:after { - content: "\25b6"; - opacity: 0.4; - font-size: 6px; - display: inline-block; - margin: 0 0.2rem; - position: relative; - top: -1px; - } -} diff --git a/packages/uikit-workshop/src/sass/scss/components/_ish-sizing.scss b/packages/uikit-workshop/src/sass/scss/components/_ish-sizing.scss deleted file mode 100644 index a7fbb2da9..000000000 --- a/packages/uikit-workshop/src/sass/scss/components/_ish-sizing.scss +++ /dev/null @@ -1,85 +0,0 @@ -/*------------------------------------*\ - #ISH SIZING -\*------------------------------------*/ - -/** - * Viewport size form - * 1) This is the form for the form that houses the current - * viewport size in px and em - */ -.pl-c-viewport-size { - margin: 0; - border: 0; - padding: 0.3rem 0.5rem 0.4rem; - line-height: 1; - display: flex; - align-items: center; -} - -/** - * Size input fields - */ -.pl-c-viewport-size__input { - padding: 0.1rem; - margin: 0; - border: 0; - border-radius: $pl-border-radius; - background: transparent; - font-size: inherit; - color: $pl-color-gray-50; - width: 35px; - text-align: right; - transition: all $pl-animate-quick ease-out; - - &::-moz-focus-inner { - padding: 0; - border: 0; - } - - &:hover { - color: $pl-color-white; - background: $pl-color-gray-87; - } - - &:active, &:focus { - color: $pl-color-white; - background: $pl-color-gray-87; - outline: 1px dotted $pl-color-gray-50; - outline-offset: -1px; - } -} - -/** - * Size input labels - */ -.pl-c-viewport-size__label { - display: block; - margin: 0; - padding: 0; -} - -/** - * Size options - * 1) This holds the S, M, L, Rand, Disco links - * 2) Depending on the config, these number of options may be - * larger or smaller. - */ -.pl-c-size-list { - display: none; - list-style: none; - margin: 0; - padding: 0; - - @media all and (min-width: $pl-bp-large) { - display: block; - display: flex; - } -} - -/** - * Size actions - * 1) These are the buttons that control the viewport resizing - */ -.pl-c-size-list__action { - @include linkStyle(); -} \ No newline at end of file diff --git a/packages/uikit-workshop/src/sass/scss/components/_logo.scss b/packages/uikit-workshop/src/sass/scss/components/_logo.scss deleted file mode 100644 index 20290f604..000000000 --- a/packages/uikit-workshop/src/sass/scss/components/_logo.scss +++ /dev/null @@ -1,27 +0,0 @@ -/*------------------------------------*\ - #LOGO -\*------------------------------------*/ - -/** - * 1) An optional logo that lives in PL's header. - * 2) Displayed as a link - */ -.pl-c-logo { - max-width: 2rem; - margin: 0 1rem; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - - &:focus { - outline: 1px dotted $pl-color-gray-50; - outline-offset: -1px; - } -} - -.pl-c-logo__img { - display: block; - max-width: 100%; - height: auto; -} \ No newline at end of file diff --git a/packages/uikit-workshop/src/sass/scss/components/_modal.scss b/packages/uikit-workshop/src/sass/scss/components/_modal.scss deleted file mode 100644 index 3fa1934b5..000000000 --- a/packages/uikit-workshop/src/sass/scss/components/_modal.scss +++ /dev/null @@ -1,144 +0,0 @@ -/*------------------------------------*\ - #MODAL -\*------------------------------------*/ - -/** - * 1) The modal slides up from the bottom of the viewport when - * "show pattern info" is selected on the pattern detail screen. - */ -.pl-c-modal { - display: none; - font-family: $pl-font; - background: $pl-color-black; - color: $pl-color-gray-20; - position: relative; - top: auto; - bottom: 0; - left: 0; - z-index: 5; - width: 100%; - height: 50%; - transition: bottom 0.3s ease-out; - - /** - * Active modal - */ - &.pl-is-active { - display: flex; - flex-direction: column; - bottom: 0; - } -} - -.pl-c-modal__toolbar { - display: flex; -} - -/** - * Modal close button - * 1) Closes the modal popup - */ -.pl-c-modal__close-btn { - font-size: 70%; - background: $pl-color-black; - color: $pl-color-gray-50; - border: 0; - border-radius: $pl-border-radius-med $pl-border-radius-med 0 0; - display: inline-block; - padding: 0.5rem 0.5rem 0.3rem; - margin: 0; - text-decoration: none; - cursor: pointer; - z-index: 2; - transition: all $pl-animate-quick ease-out; - - &:hover, - &:focus { - background: $pl-color-gray-87; - color: $pl-color-white; - } - - &:focus, - &:active { - outline: 1px dotted $pl-color-gray-50; - outline-offset: -2px; - } - - /** - * Modal close button inside active modal - * 1) Move modal button outside of the modal window - */ - .pl-c-modal.pl-is-active & { - bottom: 100%; /* 1 */ - } -} - -.pl-c-modal__cover { - width: 100%; - height: 100%; - display: none; - position: absolute; - z-index: 20; - cursor: move; -} - -.pl-c-modal__resizer { - display: flex; - align-items: center; - justify-content: center; - left: 0; - height: 14px; - width: 100%; - background: $pl-color-black; - z-index: 2; - cursor: ns-resize; - - &:after { - content: ""; - height: 3px; - width: 50px; - border-top: 1px solid $pl-color-gray-50; - border-bottom: 1px solid $pl-color-gray-50; - transition: border-color $pl-animate-quick ease-out; - } - - &:hover:after, - &:focus:after { - border-color: $pl-color-white; - } -} - -/** - * Close button icon - * 1) Displayed as an e - */ -.pl-c-modal__close-btn-icon { - width: 12px; - height: 12px; - color: currentColor; - fill: currentColor; - transition: fill $pl-animate-quick ease-out; -} - -.pl-c-code-copy-btn { - display: inline-block; - position: absolute; - top: 0.5rem; - right: 0.5rem; - padding: 0.2rem 0.4rem; - background: $pl-color-gray-07; - color: $pl-color-gray-87; - border: 1px solid $pl-color-gray-13; - border-radius: $pl-border-radius-med; - font-family: $pl-font; - font-size: $pl-font-size-norm; - text-transform: lowercase; - line-height: 1; - cursor: pointer; - z-index: 2; - transition: background $pl-animate-quick ease-out; - - &:hover, &:focus { - background: $pl-color-gray-20; - } -} diff --git a/packages/uikit-workshop/src/sass/scss/components/_navigation.scss b/packages/uikit-workshop/src/sass/scss/components/_navigation.scss deleted file mode 100644 index fdf636143..000000000 --- a/packages/uikit-workshop/src/sass/scss/components/_navigation.scss +++ /dev/null @@ -1,189 +0,0 @@ -/*------------------------------------*\ - #NAVIGATION -\*------------------------------------*/ - -/** - * Navigation container - * 1) Collapse height on small screens. Menu trigger button - * activates nav - */ -.pl-c-nav { - @media all and (max-width: $pl-bp-med) { - position: absolute; - top: 100%; - width: 100%; - overflow: hidden; - max-height: 0; /* 1 */ - background: $pl-color-black; - display: flex; - flex-direction: column; - transition: max-height $pl-animate-quick ease-out; - - /** - * Active navigaiton - * 1) Slide - * 2) Set the height to the vierport height minus the height - * of the header - */ - &.pl-is-active { - max-height: 50rem; /* 1 */ - height: calc(100vh - #{$offset-top}); /* 2 */ - overflow: auto; - @include hideScrollBar(); - } - } - - @media all and (min-width: $pl-bp-med) { - display: flex; - } -} - -/** - * Nav list - * 1) appears as an
      - * 2) display as a horizontal list on larger screens - * 3) On small screens, move the nav list after the typeahead form field - */ -.pl-c-nav__list { - z-index: 1; - margin: 0; - padding: 0; - list-style: none; - - @media all and (max-width: $pl-bp-med) { - order: 2; /* 3 */ - } - - @media all and (min-width: $pl-bp-med) { - display: flex; /* 2 */ - } -} - -/** - * Nav list item - */ -.pl-c-nav__item { - cursor: pointer; - position: relative; -} - -/** - * 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; - } -} - -/** - * Nav link - */ -.pl-c-nav__link { - display: flex; - align-items: center; - @include linkStyle(); -} - -/** - * Nav sublink - * 1) Visually differentiate sub-item links from - * the other links. Creates better hierarchy. - */ -.pl-c-nav__link--sublink { - text-transform: none; - padding-left: 1rem; -} - -/** - * Nav link - */ -.pl-c-nav__link--dropdown { - - /** - * 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; - } - } - - /** - * Active dropdown - */ - &.pl-is-active { - color: $pl-color-white; - background: $pl-color-gray-87; - - /** - * Caret rotation and positioning in active dropdown - */ - &:after { - color: $pl-color-gray-50; - -webkit-transform: rotate(180deg); - -ms-transform: rotate(180deg); - transform: rotate(180deg); - } - } -} - -/** - * Nav sublist - * 1) On larger screens, display as dropdowns that - * hang over the header - */ -.pl-c-nav__sublist { - @include listReset(); - - @media all and (min-width: $pl-bp-med) { - position: absolute; - top: 100%; /* 1 */ - left: 0; - min-width: 10rem; - overflow: hidden; - border-bottom-left-radius: $pl-border-radius-med; - border-bottom-right-radius: $pl-border-radius-med; - } -} - -/** - * Dropdown sublist - */ -.pl-c-nav__sublist--dropdown, .pl-c-nav__subsublist--dropdown { - @include listReset(); - @include accordionPanel(); -} - -/** - * Dropdown sublist - * 1) Set the height to the viewport height minus the height of the header - */ -.pl-c-nav__sublist--dropdown.pl-is-active { - @media all and (min-width: $pl-bp-med) { - height: calc(100vh - #{$offset-top}); /* 1 */ - } -} - -/** - * Sub-navigation - * 1) Third-level links are stylistically different - * than first and second nav links. - */ -.pl-c-nav__subsublist { - @include listReset(); -} - diff --git a/packages/uikit-workshop/src/sass/scss/components/_pattern-info.scss b/packages/uikit-workshop/src/sass/scss/components/_pattern-info.scss deleted file mode 100644 index 4c43f8619..000000000 --- a/packages/uikit-workshop/src/sass/scss/components/_pattern-info.scss +++ /dev/null @@ -1,148 +0,0 @@ -/*------------------------------------*\ - #PATTERN INFO -\*------------------------------------*/ - -/** - * 1) Pattern info contains two side-by-side panels that - * house a pattern's information, such as title, lineage, - * code, annotations, and more. - */ -.pl-c-pattern-info { - - @media all and (min-width: $pl-bp-large) { - display: flex; - } - - /** - * Pattern info inside the "view all" template - */ - .pl-c-pattern & { - max-height: 20rem; - overflow: scroll; - @include hideScrollBar(); - - @media all and (min-width: $pl-bp-large) { - max-height: none; - height: 18rem; - overflow: visible; - } - } - - /** - * Pattern info inside modal - */ - .pl-c-modal & { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - overflow: scroll; - @include hideScrollBar(); - - @media all and (min-width: $pl-bp-large) { - position: static; - overflow: visible; - } - } -} - -/** - * Pattern Info Panel - * 1) Individual panel. Left side contains pattern info - * Right side contains pattern code - */ -.pl-c-pattern-info__panel { - padding: 1rem; - - @media all and (min-width: $pl-bp-large) { - flex: auto; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - } - - .pl-c-modal & { - @media all and (min-width: $pl-bp-xl) { - padding-left: 2rem; - } - } -} - -/** - * Pattern Info Panel - * 1) Left panel that contains pattern title, lineage, description, annotations - */ -.pl-c-pattern-info__panel--info { - padding-top: 2rem; - - @media all and (min-width: $pl-bp-large) { - left: 0; - right: 50%; - overflow: scroll; - @include hideScrollBar(); - } - - @media all and (min-width: $pl-bp-xl) { - right: 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 { - - @media all and (min-width: $pl-bp-large) { - right: 0; - left: 50%; - top: 1.2rem; - } - - @media all and (min-width: $pl-bp-xl) { - left: 45%; - } -} - - -/** - * Pattern Header inside modal - */ - .pl-c-pattern-info__header { - margin-bottom: 0.5rem; -} - -/** - * Pattern Title inside modal - */ -.pl-c-pattern-info__title { - font-size: 1.4rem !important; - font-weight: normal; - margin-top: 0; - margin-bottom: 0; - color: inherit; - text-transform: capitalize; - display: inline-flex; - align-items: center; -} - -/** - * Pattern Description inside modal - */ - .pl-c-pattern-info__description { - border-bottom-color: $pl-color-gray-50; -} - -/** - * Pattern Annotations inside modal - */ -.pl-c-annotations { - border-top-color: $pl-color-gray-50; -} diff --git a/packages/uikit-workshop/src/sass/scss/components/_pattern-lineage.scss b/packages/uikit-workshop/src/sass/scss/components/_pattern-lineage.scss deleted file mode 100644 index 7fd144889..000000000 --- a/packages/uikit-workshop/src/sass/scss/components/_pattern-lineage.scss +++ /dev/null @@ -1,28 +0,0 @@ -/*------------------------------------*\ - #PATTERN LINEAGE -\*------------------------------------*/ - -/** - * Pattern Lineage info - */ -.pl-c-lineage { - font-size: $pl-font-size-sm-2; - line-height: 1.7; - margin-top: 0; -} - -/** - * Lineage link - */ -.pl-c-lineage__link { - font-style: italic; - color: $pl-color-gray-50; - text-decoration: underline; - display: inline-flex; - align-items: center; - transition: opacity $pl-animate-quick ease; - - &:hover, &:focus { - opacity: 0.8; - } -} \ No newline at end of file diff --git a/packages/uikit-workshop/src/sass/scss/components/_pattern-states.scss b/packages/uikit-workshop/src/sass/scss/components/_pattern-states.scss deleted file mode 100644 index 408abc62d..000000000 --- a/packages/uikit-workshop/src/sass/scss/components/_pattern-states.scss +++ /dev/null @@ -1,40 +0,0 @@ -/*------------------------------------*\ - #PATTERN STATES -\*------------------------------------*/ - -/** -* Pattern states add color-coded dots next to patterns -* in the dropdown navigation. -*/ -.pl-c-pattern-state { - display: inline-block; - width: 5px; - height: 5px; - margin-left: 10px; - position: relative; - top: 5px; - left: 0; - border-radius: 50%; - background: $pl-color-state-info; - line-height: 4px; - text-indent: 10px; - - &--complete { - background: $pl-color-state-complete; - } - - &--inreview { - background: $pl-color-state-inreview; - } - - &--deprecated { - background: $pl-color-state-deprecated; - } -} - -/** -* Complete state -*/ -.complete:before { - color: #03790F !important; -} diff --git a/packages/uikit-workshop/src/sass/scss/components/_pattern.scss b/packages/uikit-workshop/src/sass/scss/components/_pattern.scss deleted file mode 100644 index 4515c6d05..000000000 --- a/packages/uikit-workshop/src/sass/scss/components/_pattern.scss +++ /dev/null @@ -1,131 +0,0 @@ -/*------------------------------------*\ - #PATTERN -\*------------------------------------*/ - -/** -* Pattern -* 1) This is an individual pattern that appears in the "view all" template. -* It contains pattern title and toggle to view more information, such as -* description, lineage, code, etc. -* 2) Prevents absolutely-positioned elements from floating to the top -* 3) Prevents floated patterns from floating wraps -*/ -.pl-c-pattern { - margin-bottom: $pl-doublespace; - position: relative; /* 2 */ - clear: both; /* 3 */ -} - - -/** -* Pattern Header -*/ -.pl-c-pattern__header { - position: relative; - padding: 0.5rem 0 0; - line-height: 1.3; - font-size: 90%; - color: $pl-color-gray-50; - - &:empty { - padding: 0; - } -} - - -/** - * Pattern Title - */ -.pl-c-pattern__title { - font-family: $pl-font !important; - font-size: 0.85rem !important; - line-height: 1 !important; - font-weight: normal !important; - margin: 0 !important; - padding: 0 !important; - text-transform: capitalize !important; -} - -/** - * Pattern Title Link - * 1) Vertically align pattern label and pattern state badge - */ -.pl-c-pattern__title-link { - display: inline-flex; /* 1 */ - align-items: flex-start; /* 1 */ - padding: $pl-pad 0 0.3rem; - color: $pl-color-gray-50 !important; - text-decoration: none; - cursor: pointer; - - &:hover, &:focus { - color: $pl-color-black !important; - } -} - -/** -* Pattern Extra Toggle Button -* 1) This is the button that twirls down extra pattern info -*/ -.pl-c-pattern__extra-toggle { - font-size: 9px; - position: absolute; - bottom: -1px; - right: 0; - z-index: 1; - padding: 0.65em 0.65em 0.5em; - line-height: 1; - color: $pl-color-gray-50; - background: transparent; - font-weight: normal; - border: 1px solid $pl-color-gray-13; - border-top-left-radius: $pl-border-radius-med; - border-top-right-radius: $pl-border-radius-med; - transition: background $pl-animate-quick ease-out; - - .pl-c-pattern__toggle-icon { - display: inline-block; - } - - &:hover, &:focus, &.pl-is-active { - background: $pl-color-gray-02; - color: $pl-color-black; - } - - &:focus { - outline: 1px dotted $pl-color-gray-70; - } - - &.pl-is-active { - border-bottom-color: $pl-color-gray-02; - - .pl-c-pattern__toggle-icon { - -webkit-transform: rotate(180deg); - -ms-transform: rotate(180deg); - transform: rotate(180deg); - } - } -} - - -/** -* Pattern Extra -* 1) This is the info panel that contains extra pattern info -* like pattern description, lineage, code, and more -*/ -.pl-c-pattern__extra { - background: $pl-color-gray-02; - border-top: 1px solid $pl-color-gray-13; - margin-bottom: $pl-space; - overflow: hidden; - max-height: 1px; - position: relative; - transition: all $pl-animate-quick ease-out; - - &.pl-is-active { - border: 1px solid $pl-color-gray-13; - border-radius: $pl-border-radius-med; - border-top-right-radius: 0; - max-height: 150rem; - } -} diff --git a/packages/uikit-workshop/src/sass/scss/components/_tabs.scss b/packages/uikit-workshop/src/sass/scss/components/_tabs.scss deleted file mode 100644 index 2efb2534f..000000000 --- a/packages/uikit-workshop/src/sass/scss/components/_tabs.scss +++ /dev/null @@ -1,136 +0,0 @@ -/*------------------------------------*\ - #TABS -\*------------------------------------*/ - -/** - * 1) Tabs contain a set of horizontally-arranged tabs - * with accompanying panels. When a tab link is clicked - * the corresponding panel becomes visible - */ -.pl-c-tabs { - padding: 0 0.5rem 0.5rem; - background: $pl-color-white; - border: 1px solid $pl-color-gray-13; - border-radius: $pl-border-radius-med; - font-family: $pl-font; - position: relative; - display: flex; - flex-direction: column; - overflow: hidden; - - /** - * Tabs inside a code panel - */ - .pl-c-pattern-info__panel--code & { - - @media all and (min-width: $pl-bp-large) { - position: absolute; - top: 1rem; - bottom: 1rem; - left: 1rem; - right: 1rem; - } - } - - .pl-c-modal & { - @media all and (min-width: $pl-bp-xl) { - right: 2rem; - left: 2rem; - } - } -} - -/** - * Tab List - * 1) A unordered list that contains the tab links - */ -.pl-c-tabs__list { - display: flex; - width: 100%; - list-style: none; - margin: 0; - padding: 0.5rem 0; - background: $pl-color-white; -} - -/** - * Tab Link - */ -.pl-c-tabs__link { - display: block; - line-height: 1; - padding: 0.2rem 0.4rem; - border: 1px solid transparent; - border-radius: $pl-border-radius-med; - background: $pl-color-white; - color: $pl-color-gray-50; - cursor: pointer; - text-decoration: none; - text-transform: lowercase; - transition: all $pl-animate-quick ease-out; - - &:hover { - color: $pl-color-gray-87; - } - - /** - * Active Tab - * 1) Note: the active tab color corresponds with the Prism code block - * background color, which is why it doesn't use a Sass variable - */ - &.pl-is-active-tab { - color: $pl-color-gray-87; - background: $pl-color-gray-07; - border: 1px solid $pl-color-gray-13; - } -} - -/** - * Tab Content - * 1) Tab content contains the tab panels - */ -.pl-c-tabs__content { - flex: 1 0 auto; - overflow: scroll; - @include hideScrollBar(); - height: 100%; - padding-top: 0.5rem; - - /** - * Tab content inside modal - */ - .pl-c-modal & { - border: 0; - } -} - -/** - * Tab panel - * 1) Note: the active tab color corresponds with the Prism code block - * background color, which is why it doesn't use a Sass variable - */ -.pl-c-tabs__panel { - display: none; - min-height: 12rem; - - &.pl-is-active-tab { - display: block; - } - - /** - * Tab code - * 1) Targeting pre tag in here as Prism is being used for the majority of the styles - */ - pre[class*=language-], :not(pre) > code[class*="language-"], pre[class*="language-"] { - background: transparent; - margin: 0; - padding: 0; - border: 0; - display: block; - } - - code[class*=language-] { - background: transparent; - margin: 0; - } -} diff --git a/packages/uikit-workshop/src/sass/scss/components/_text-passage.scss b/packages/uikit-workshop/src/sass/scss/components/_text-passage.scss deleted file mode 100644 index 63e99156a..000000000 --- a/packages/uikit-workshop/src/sass/scss/components/_text-passage.scss +++ /dev/null @@ -1,134 +0,0 @@ -/*------------------------------------*\ - #TEXT PASSAGE -\*------------------------------------*/ - -/** - * 1) A passage of text which includes free-form tags (ul, blockquote, p, h2, etc) - * generated by markdown - */ - .pl-c-text-passage { - font-size: $pl-font-size-sm-2; - line-height: 1.7; - - p { - margin-top: 0; - margin-bottom: 1rem; - } - - /** - * Link within the text passage - */ - a { - color: $pl-color-gray-50; - text-decoration: underline; - transition: opacity $pl-animate-quick ease; - - &:hover, &:focus { - opacity: 0.8; - } - } - - /** - * Code - */ - code[class*="language-"], pre[class*="language-"] { - color: inherit; - } - - /** - * Blockquote within text passage - */ - blockquote { - padding-left: 0.8rem; - border-left: 3px solid inherit; - } - - /** - * Horizontal rule - */ - hr { - height: 1px; - background: $pl-color-gray-50; - margin: 2rem 0; - border: 0; - } - - /** - * First-level heading within text passage - */ - h1 { - margin-bottom: 1rem; - font-weight: normal; - } - - /** - * Second-level heading within text passage - */ - h2 { - margin: 1rem 0 1rem; - font-weight: normal; - } - - /** - * Third-level heading within text passage - */ - h3 { - margin: 1rem 0 1rem; - font-weight: normal; - } - - /** - * Fourth-level heading within text passage - */ - h4 { - margin: 1rem 0 1rem; - font-weight: normal; - } - - /** - * Fifth-level heading within text passage - */ - h5 { - margin: 1rem 0 1rem; - font-weight: normal; - } - - /** - * Sixth-level heading within text passage - */ - h6 { - margin: 1rem 0 1rem; - font-weight: normal; - } - - - /** - * Unordered list within text passage - */ - ul { - list-style: square; - margin-left: 0.9rem; - margin-bottom: 1rem; - - li:last-child { - margin-bottom: 0; - } - } - - /** - * Ordered list within text passage - */ - ol { - list-style: decimal; - margin-left: 0.9rem; - margin-bottom: 1rem; - - li:last-child { - margin-bottom: 0; - } - } - - li { - margin-bottom: 0.5rem; - } -} diff --git a/packages/uikit-workshop/src/sass/scss/themes/_light-theme.scss b/packages/uikit-workshop/src/sass/scss/themes/_light-theme.scss deleted file mode 100644 index ff2c1858f..000000000 --- a/packages/uikit-workshop/src/sass/scss/themes/_light-theme.scss +++ /dev/null @@ -1,136 +0,0 @@ -/*------------------------------------*\ - #LIGHT THEME -\*------------------------------------*/ - -/** - * A light-color theme for Pattern Lab, where the - * PL header and modal are light instead of dark - */ -.pl-c-body--theme-light { - - /** - * Header - */ - .pl-c-header { - background: $pl-color-white; - border-bottom: 1px solid $pl-color-gray-20; - } - - /** - * Nav Sublist dropdown - */ - .pl-c-nav__sublist { - background: transparent; - } - - /** - * Tools dropdown - */ - .pl-c-tools__list.pl-is-active { - border-bottom: 1px solid $pl-color-gray-20; - border-left: 1px solid $pl-color-gray-20; - } - - /** - * Nav link dropdown - */ - .pl-c-nav__link--dropdown { - color: $pl-color-gray-70; - background: $pl-color-white; - - &:after { - color: $pl-color-gray-20; - } - } - - /** - * All Nav links inside of subnav dropdown - */ - .pl-c-nav__sublist .pl-c-nav__link { - border-left: 1px solid $pl-color-gray-20; - border-right: 1px solid $pl-color-gray-20; - } - - /** - * Last sublist item - */ - .pl-c-nav__sublist > .pl-c-nav__item:last-child .pl-c-nav__link { - @media all and (min-width: $pl-bp-med) { - border-bottom-left-radius: $pl-border-radius-med; - border-bottom-right-radius: $pl-border-radius-med; - border-bottom: 1px solid $pl-color-gray-20; - } - } - - /** - * Size input - */ - .pl-c-viewport-size__input { - color: $pl-color-gray-70; - - &:hover, &:focus { - background: $pl-color-gray-13; - } - } - - /** - * Typeahead container - */ - .typeahead { - background: $pl-color-gray-13 !important; - } - - /** - * Typeahead input - */ - .pl-c-typeahead { - background: $pl-color-gray-13 !important; - color: $pl-color-gray-70 !important; - } - - /** - * Typeahead input - */ - .tt-input { - background: $pl-color-gray-07 !important; - color: $pl-color-gray-70 !important; - - &:hover { - color: $pl-color-gray-87; - background: $pl-color-gray-13 !important; - - &::-webkit-input-placeholder { - color: $pl-color-gray-87; - } - - &::-moz-input-placeholder { - color: $pl-color-gray-87; - } - } - } - - /** - * Modal inside a light theme - */ - .pl-c-modal { - background: $pl-color-white; - color: $pl-color-gray-70; - border-top: 1px solid $pl-color-gray-20; - } - - - /** - * Modal close button - * 1) Closes the modal popup - */ - .pl-c-modal__close-btn { - background: $pl-color-white; - border-top: 1px solid $pl-color-gray-20; - border-left: 1px solid $pl-color-gray-20; - - &:hover, &:focus { - background: $pl-color-gray-02; - color: $pl-color-gray-70; - } - } -} \ No newline at end of file diff --git a/packages/uikit-workshop/src/sass/scss/vendor/_prism.scss b/packages/uikit-workshop/src/sass/scss/vendor/_prism.scss deleted file mode 100644 index fbf2b8412..000000000 --- a/packages/uikit-workshop/src/sass/scss/vendor/_prism.scss +++ /dev/null @@ -1,180 +0,0 @@ -/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+handlebars+php+php-extras+twig&plugins=line-numbers+autolinker */ -/** - * prism.js default theme for JavaScript, CSS and HTML - * Based on dabblet (http://dabblet.com) - * @author Lea Verou - */ - - 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; - - -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: #b3d4fc; - } - - pre[class*="language-"]::selection, pre[class*="language-"] ::selection, - code[class*="language-"]::selection, code[class*="language-"] ::selection { - text-shadow: none; - background: #b3d4fc; - } - - @media print { - code[class*="language-"], - pre[class*="language-"] { - text-shadow: none; - } - } - - /* Code blocks */ - pre[class*="language-"] { - padding: 1em; - margin: .5em 0; - overflow: auto; - } - - :not(pre) > code[class*="language-"], - pre[class*="language-"] { - background: #f5f2f0; - } - - /* Inline code */ - :not(pre) > code[class*="language-"] { - padding: .1em; - border-radius: .3em; - } - - .token.comment, - .token.prolog, - .token.doctype, - .token.cdata { - color: slategray; - } - - .token.punctuation { - color: #999; - } - - .namespace { - opacity: .7; - } - - .token.property, - .token.tag, - .token.boolean, - .token.number, - .token.constant, - .token.symbol, - .token.deleted { - color: #905; - } - - .token.selector, - .token.attr-name, - .token.string, - .token.char, - .token.builtin, - .token.inserted { - color: #690; - } - - .token.operator, - .token.entity, - .token.url, - .language-css .token.string, - .style .token.string { - color: #a67f59; - background: hsla(0, 0%, 100%, .5); - } - - .token.atrule, - .token.attr-value, - .token.keyword { - color: #07a; - } - - .token.function { - color: #DD4A68; - } - - .token.regex, - .token.important, - .token.variable { - color: #e90; - } - - .token.important, - .token.bold { - font-weight: bold; - } - .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; /* 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; - } \ No newline at end of file diff --git a/packages/uikit-workshop/src/sass/scss/vendor/_typeahead.scss b/packages/uikit-workshop/src/sass/scss/vendor/_typeahead.scss deleted file mode 100644 index 6af3ab814..000000000 --- a/packages/uikit-workshop/src/sass/scss/vendor/_typeahead.scss +++ /dev/null @@ -1,95 +0,0 @@ -/*------------------------------------*\ - #TWITTER TYPEAHEAD -\*------------------------------------*/ -/** - * Using Twitter Typeahead to autocomplete pattern - * searches. https://twitter.github.io/typeahead.js/ - * 1) Wrapped in pl-c-header to contain styles for projects that - * might already be using Typeahead -*/ - -.pl-c-header { - - /** - * Typeahead input - * 1) the primary DOM element that initiates the JS library - */ - .pl-c-typeahead { - border: 0; - background: $pl-color-gray-87 !important; - color: $pl-color-gray-50; - width: 100%; - right: 0; - padding: 0.61rem 0.5rem; - font-size: inherit; - - &:focus { - background: $pl-color-gray-50; - color: $pl-color-white; - } - } - - /** - * Typeahead wrapper - * 1) This is the JS-generated wrapper around the input - * 2) Display after nav list items for horizontal theme - */ - .twitter-typeahead { - display: flex !important; - order: 2; /* 2 */ - width: 100%; - } - - .tt-input { - background: $pl-color-gray-50; - color: $pl-color-white; - - &:hover { - color: $pl-color-white; - background: $pl-color-gray-87 !important; - - &::-webkit-input-placeholder { - color: $pl-color-white; - } - - &::-moz-input-placeholder { - color: $pl-color-white; - } - } - - &:focus { - border-radius: 0; - text-transform: lowercase; - color: $pl-color-white; - background: $pl-color-gray-87; - outline: 1px dotted $pl-color-gray-50; - outline-offset: -1px; - } - } - - .tt-hint { - text-transform: lowercase; - } - - .tt-dropdown-menu { - text-transform: lowercase; - background-color: $pl-color-gray-50; - width: 100%; - border-bottom-right-radius: $pl-border-radius-med; - border-bottom-left-radius: $pl-border-radius-med; - } - - .tt-suggestion { - color: $pl-color-gray-07; - padding: 0.8em; - } - - .tt-suggestion.tt-cursor { - color: $pl-color-white; - background: $pl-color-trans-white-25; - } - - .tt-suggestion p { - margin: 0; - } -} \ No newline at end of file From 4f09e356ed73ed90d8cdc13f32b28c4c918ee422 Mon Sep 17 00:00:00 2001 From: Salem Ghoweri Date: Fri, 24 Aug 2018 16:59:46 -0400 Subject: [PATCH 2/8] refactor: reorder Sass imports for utilities, themes, and vendor to get imported in the correct ITCSS order --- .../src/sass/pattern-lab--iframe-loader.scss | 4 +- .../uikit-workshop/src/sass/pattern-lab.scss | 91 ++++++++----------- 2 files changed, 38 insertions(+), 57 deletions(-) diff --git a/packages/uikit-workshop/src/sass/pattern-lab--iframe-loader.scss b/packages/uikit-workshop/src/sass/pattern-lab--iframe-loader.scss index acef6edda..b23c481bc 100644 --- a/packages/uikit-workshop/src/sass/pattern-lab--iframe-loader.scss +++ b/packages/uikit-workshop/src/sass/pattern-lab--iframe-loader.scss @@ -1,5 +1,5 @@ -@import 'scss/abstracts/variables'; -@import 'scss/abstracts/mixins'; +@import 'scss/01-abstracts/variables'; +@import 'scss/01-abstracts/mixins'; @keyframes animateIn { from { diff --git a/packages/uikit-workshop/src/sass/pattern-lab.scss b/packages/uikit-workshop/src/sass/pattern-lab.scss index c6002f803..360f8d1e8 100755 --- a/packages/uikit-workshop/src/sass/pattern-lab.scss +++ b/packages/uikit-workshop/src/sass/pattern-lab.scss @@ -15,32 +15,31 @@ #TABLE OF CONTENTS \*------------------------------------*/ /** - * ABSTRACTS.................Variables + * ABSTRACTS.................Variables and mixins * BASE......................Reset & Base elements + * VENDOR....................Styles out of PL control * COMPONENTS................Components + * THEMES....................Theming variations * UTILITIES.................Helper classes - * VENDOR....................Styles out of PL control */ /*------------------------------------*\ #ABSTRACTS \*------------------------------------*/ -@import "scss/abstracts/variables"; -@import "scss/abstracts/mixins"; - - - - +@import 'scss/01-abstracts/variables'; +@import 'scss/01-abstracts/mixins'; /*------------------------------------*\ #BASE \*------------------------------------*/ -@import "scss/base/reset"; -@import "scss/base/body"; - - - +@import 'scss/02-base/reset'; +@import 'scss/02-base/body'; +/*------------------------------------*\ + #VENDOR +\*------------------------------------*/ +@import 'scss/03-vendor/typeahead'; +@import 'scss/03-vendor/prism'; /*------------------------------------*\ #COMPONENTS @@ -49,59 +48,41 @@ /** * Pattern Lab Header */ -@import "scss/components/header"; -@import "scss/components/logo"; -@import "scss/components/navigation"; -@import "scss/components/ish-sizing"; -@import "scss/components/controls"; -@import "scss/components/tools"; +@import 'scss/04-components/header'; +@import 'scss/04-components/logo'; +@import 'scss/04-components/navigation'; +@import 'scss/04-components/ish-sizing'; +@import 'scss/04-components/controls'; +@import 'scss/04-components/tools'; /** * Viewport */ -@import "scss/components/viewport"; +@import 'scss/04-components/viewport'; /** * Pattern Styles */ -@import "scss/components/pattern"; -@import "scss/components/pattern-category"; -@import "scss/components/pattern-info"; -@import "scss/components/pattern-states"; -@import "scss/components/pattern-lineage"; -@import "scss/components/breadcrumbs"; -@import "scss/components/tabs"; -@import "scss/components/tools"; -@import "scss/components/annotations"; -@import "scss/components/modal"; -@import "scss/components/text-passage"; - - - - +@import 'scss/04-components/pattern'; +@import 'scss/04-components/pattern-category'; +@import 'scss/04-components/pattern-info'; +@import 'scss/04-components/pattern-states'; +@import 'scss/04-components/pattern-lineage'; +@import 'scss/04-components/breadcrumbs'; +@import 'scss/04-components/tabs'; +@import 'scss/04-components/tools'; +@import 'scss/04-components/annotations'; +@import 'scss/04-components/modal'; +@import 'scss/04-components/text-passage'; /*------------------------------------*\ - #UTILITIES -\*------------------------------------*/ -@import "scss/utilities/visibility"; - - - - - -/*------------------------------------*\ - #VENDOR + #THEMES \*------------------------------------*/ -@import "scss/vendor/typeahead"; -@import "scss/vendor/prism"; - - - - +@import 'scss/05-themes/light-theme'; +@import 'scss/05-themes/density-theme'; +@import 'scss/05-themes/sidebar-theme'; /*------------------------------------*\ - #THEMES + #UTILITIES \*------------------------------------*/ -@import "scss/themes/light-theme"; -@import "scss/themes/density-theme"; -@import "scss/themes/sidebar-theme"; \ No newline at end of file +@import 'scss/06-utilities/visibility'; From 40f2c0961fe821aa5c36570691a0aa5fc59dbd3a Mon Sep 17 00:00:00 2001 From: Salem Ghoweri Date: Fri, 24 Aug 2018 17:08:29 -0400 Subject: [PATCH 3/8] chore: fresh build of PL assets --- packages/uikit-workshop/dist/index.html | 6 +++--- .../dist/styleguide/css/pattern-lab.5251243c.css | 1 - .../dist/styleguide/css/pattern-lab.97fc8203.css | 1 + packages/uikit-workshop/dist/styleguide/css/pattern-lab.css | 2 +- .../uikit-workshop/dist/styleguide/js/patternlab-pattern.js | 2 +- .../uikit-workshop/dist/styleguide/js/patternlab-viewer.js | 2 +- 6 files changed, 7 insertions(+), 7 deletions(-) delete mode 100644 packages/uikit-workshop/dist/styleguide/css/pattern-lab.5251243c.css create mode 100644 packages/uikit-workshop/dist/styleguide/css/pattern-lab.97fc8203.css diff --git a/packages/uikit-workshop/dist/index.html b/packages/uikit-workshop/dist/index.html index fa04705d1..136c0307b 100644 --- a/packages/uikit-workshop/dist/index.html +++ b/packages/uikit-workshop/dist/index.html @@ -1,8 +1,8 @@ Pattern Lab - - + +
      \ No newline at end of file diff --git a/packages/uikit-workshop/dist/styleguide/css/pattern-lab.5251243c.css b/packages/uikit-workshop/dist/styleguide/css/pattern-lab.5251243c.css deleted file mode 100644 index be2bee127..000000000 --- a/packages/uikit-workshop/dist/styleguide/css/pattern-lab.5251243c.css +++ /dev/null @@ -1 +0,0 @@ -.pl-c-header__nav-toggle{background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out;border:0}.pl-c-header__nav-toggle:hover{color:#fff;background:#222}.pl-c-header__nav-toggle.active,.pl-c-header__nav-toggle:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-header__nav-toggle{background:#fff;color:#4d4c4c}.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}.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}@media all and (max-width:42em){.pl-c-nav{position:absolute;top:100%;width:100%;overflow:hidden;max-height:0;background:#000;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-transition:max-height .1s ease-out;transition:max-height .1s ease-out}.pl-c-nav.pl-is-active{max-height:50rem;height:calc(100vh - 2rem);overflow:auto;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-nav.pl-is-active::-webkit-scrollbar{width:0!important}}.pl-c-nav__item{cursor:pointer;position:relative}@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{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out}.pl-c-nav__link:hover{color:#fff;background:#222}.pl-c-nav__link.active,.pl-c-nav__link:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-nav__link{background:#fff;color:#4d4c4c}.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-nav__link--sublink{text-transform:none;padding-left:1rem}.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:#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{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;overflow:hidden;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}.pl-c-nav__sublist--dropdown.pl-is-active,.pl-c-nav__subsublist--dropdown.pl-is-active{max-height:none;overflow:auto;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-nav__sublist--dropdown.pl-is-active::-webkit-scrollbar,.pl-c-nav__subsublist--dropdown.pl-is-active::-webkit-scrollbar{width:0!important}@media all and (min-width:42em){.pl-c-nav__sublist--dropdown.pl-is-active,.pl-c-nav__subsublist--dropdown.pl-is-active{max-height:120rem}}@media all and (min-width:42em){.pl-c-nav__sublist--dropdown.pl-is-active{height:calc(100vh - 2rem)}}.pl-c-nav__subsublist{list-style:none;margin:0;padding:0}.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:0 0;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:#222}.pl-c-viewport-size__input:active,.pl-c-viewport-size__input:focus{color:#fff;background:#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}@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:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out}.pl-c-size-list__action:hover{color:#fff;background:#222}.pl-c-size-list__action.active,.pl-c-size-list__action:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-size-list__action{background:#fff;color:#4d4c4c}.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-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-c-tools{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex}.pl-c-tools__toggle{background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out;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:#222}.pl-c-tools__toggle.active,.pl-c-tools__toggle:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-tools__toggle{background:#fff;color:#4d4c4c}.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{position:absolute}.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:1;width:10rem;border-bottom-left-radius:6px;border-bottom-right-radius:6px}.pl-c-tools__list.pl-is-active{max-height:none;overflow:auto;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-tools__list.pl-is-active::-webkit-scrollbar{width:0!important}@media all and (min-width:42em){.pl-c-tools__list.pl-is-active{max-height:120rem}}.pl-c-tools__action{background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out;display:block;width:100%;margin:0}.pl-c-tools__action:hover{color:#fff;background:#222}.pl-c-tools__action.active,.pl-c-tools__action:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-tools__action{background:#fff;color:#4d4c4c}.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-viewport__cover{width:100%;height:100%;display:none;position:absolute;z-index:20;cursor:move}.pl-c-viewport__iframe-wrapper.hay-mode{-webkit-transition:all 40s linear;transition:all 40s linear}.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:#ccc;-webkit-transition:background .1s ease-out;transition:background .1s ease-out}.pl-c-viewport__resizer-handle:hover{background:grey}.pl-c-viewport__resizer-handle:active{cursor:move;background:#4d4c4c}.vp-animate{-webkit-transition:width .8s ease-out;transition:width .8s ease-out}.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:0 0;font-weight:400;border:1px solid #ddd;border-top-left-radius:6px;border-top-right-radius:6px;-webkit-transition:background .1s ease-out;transition:background .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:#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:#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-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}@media all and (min-width:53em){.pl-c-pattern-info{display:-webkit-box;display:-ms-flexbox;display:flex}}.pl-c-pattern .pl-c-pattern-info{max-height:20rem;overflow:scroll;-ms-overflow-style:-ms-autohiding-scrollbar}.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;height:18rem;overflow:visible}}.pl-c-modal .pl-c-pattern-info{position:absolute;top:0;right:0;bottom:0;left:0;overflow:scroll;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-modal .pl-c-pattern-info::-webkit-scrollbar{width:0!important}@media all and (min-width:53em){.pl-c-modal .pl-c-pattern-info{position:static;overflow:visible}}.pl-c-pattern-info__panel{padding:1rem}@media all and (min-width:53em){.pl-c-pattern-info__panel{-webkit-box-flex:1;-ms-flex:auto;flex:auto;position:absolute;top:0;bottom:0;left:0;right:0}}@media all and (min-width:62em){.pl-c-modal .pl-c-pattern-info__panel{padding-left:2rem}}.pl-c-pattern-info__panel--info{padding-top:2rem}@media all and (min-width:53em){.pl-c-pattern-info__panel--info{left:0;right:50%;overflow:scroll;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-pattern-info__panel--info::-webkit-scrollbar{width:0!important}}@media all and (min-width:62em){.pl-c-pattern-info__panel--info{right:55%}}@media all and (min-width:53em){.pl-c-pattern-info__panel--info+.pl-c-pattern-info__panel--code{right:0;left:50%;top:1.2rem}}@media all and (min-width:62em){.pl-c-pattern-info__panel--info+.pl-c-pattern-info__panel--code{left:45%}}.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-pattern-state{display:inline-block;width:5px;height:5px;margin-left:10px;position:relative;top:5px;left:0;border-radius:50%;background:#02a4d5;line-height:4px;text-indent:10px}.pl-c-pattern-state--complete{background:#03790f}.pl-c-pattern-state--inreview{background:#c7a118}.pl-c-pattern-state--deprecated{background:#b00b02}.complete:before{color:#03790f!important}.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-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-tabs{padding:0 .5rem .5rem;background:#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}@media all and (min-width:53em){.pl-c-pattern-info__panel--code .pl-c-tabs{position:absolute;top:1rem;bottom:1rem;left:1rem;right:1rem}}@media all and (min-width:62em){.pl-c-modal .pl-c-tabs{right:2rem;left:2rem}}.pl-c-tabs__list{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;list-style:none;margin:0;padding:.5rem 0;background:#fff}.pl-c-tabs__link{display:block;line-height:1;padding:.2rem .4rem;border:1px solid transparent;border-radius:6px;background:#fff;color:grey;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:#eee;border:1px solid #ddd}.pl-c-tabs__content{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;overflow:scroll;-ms-overflow-style:-ms-autohiding-scrollbar;height:100%;padding-top:.5rem}.pl-c-tabs__content::-webkit-scrollbar{width:0!important}.pl-c-modal .pl-c-tabs__content{border:0}.pl-c-tabs__panel{display:none;min-height:12rem}.pl-c-tabs__panel.pl-is-active-tab{display:block}.pl-c-tabs__panel :not(pre)>code[class*=language-],.pl-c-tabs__panel pre[class*=language-]{background:0 0;margin:0;padding:0;border:0;display:block}.pl-c-tabs__panel code[class*=language-]{background:0 0;margin:0}.pl-c-tools{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex}.pl-c-tools__toggle{background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out;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:#222}.pl-c-tools__toggle.active,.pl-c-tools__toggle:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-tools__toggle{background:#fff;color:#4d4c4c}.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{position:absolute}.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:1;width:10rem;border-bottom-left-radius:6px;border-bottom-right-radius:6px}.pl-c-tools__list.pl-is-active{max-height:none;overflow:auto;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-tools__list.pl-is-active::-webkit-scrollbar{width:0!important}@media all and (min-width:42em){.pl-c-tools__list.pl-is-active{max-height:120rem}}.pl-c-tools__action{background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out;display:block;width:100%;margin:0}.pl-c-tools__action:hover{color:#fff;background:#222}.pl-c-tools__action.active,.pl-c-tools__action:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-tools__action{background:#fff;color:#4d4c4c}.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-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:#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 .1s ease;transition:background .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: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-modal{display:none;font-family:HelveticaNeue,Helvetica,Arial,sans-serif;background:#000;color:#ccc;position:relative;top:auto;bottom:0;left:0;z-index:5;width:100%;height:50%;-webkit-transition:bottom .3s ease-out;transition:bottom .3s ease-out}.pl-c-modal.pl-is-active{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;bottom:0}.pl-c-modal__close-btn{font-size:70%;background:#000;color:grey;border:0;border-radius:6px 6px 0 0;display:inline-block;padding:.5rem .5rem .3rem;margin:0;text-decoration:none;cursor:pointer;z-index:2;-webkit-transition:all .1s ease-out;transition:all .1s ease-out}.pl-c-modal__close-btn:focus,.pl-c-modal__close-btn:hover{background:#222;color:#fff}.pl-c-modal__close-btn:active,.pl-c-modal__close-btn:focus{outline:1px dotted grey;outline-offset:-2px}.pl-c-modal.pl-is-active .pl-c-modal__close-btn{bottom:100%}.pl-c-modal__cover{width:100%;height:100%;display:none;position:absolute;z-index:20;cursor:move}.pl-c-modal__resizer{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;left:0;height:14px;width:100%;background:#000;z-index:2;cursor:ns-resize}.pl-c-modal__resizer:after{content:"";height:3px;width:50px;border-top:1px solid grey;border-bottom:1px solid grey;-webkit-transition:border-color .1s ease-out;transition:border-color .1s ease-out}.pl-c-modal__resizer:focus:after,.pl-c-modal__resizer:hover:after{border-color:#fff}.pl-c-modal__close-btn-icon{width:12px;height:12px;color:currentColor;fill:currentColor;-webkit-transition:fill .1s ease-out;transition:fill .1s ease-out}.pl-c-code-copy-btn{display:inline-block;position:absolute;top:.5rem;right:.5rem;padding:.2rem .4rem;background:#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 .1s ease-out;transition:background .1s ease-out}.pl-c-code-copy-btn:focus,.pl-c-code-copy-btn:hover{background:#ccc}.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: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}.is-vishidden{position:absolute!important;overflow:hidden;width:1px;height:1px;padding:0;border:0;clip:rect(1px,1px,1px,1px)}.pl-c-header .pl-c-typeahead:focus{background:grey;color:#fff}.pl-c-header .twitter-typeahead{display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;width:100%}.pl-c-header .tt-input{background:grey;color:#fff}.pl-c-header .tt-input:hover{color:#fff;background:#222!important}.pl-c-header .tt-input:hover::-webkit-input-placeholder{color:#fff}.pl-c-header .tt-input:hover::-moz-input-placeholder{color:#fff}.pl-c-header .tt-input:focus{border-radius:0;text-transform:lowercase;color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-header .tt-hint{text-transform:lowercase}.pl-c-header .tt-dropdown-menu{text-transform:lowercase;background-color:grey;width:100%;border-bottom-right-radius:6px;border-bottom-left-radius:6px}.pl-c-header .tt-suggestion{color:#eee;padding:.8em}.pl-c-header .tt-suggestion.tt-cursor{color:#fff;background:rgba(255,255,255,.25)}.pl-c-header .tt-suggestion p{margin:0}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;-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:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#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:#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: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-c-body--theme-light .pl-c-header{background:#fff;border-bottom:1px solid #ccc}.pl-c-body--theme-light .pl-c-nav__sublist{background:0 0}.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 .pl-c-nav__link--dropdown{color:#4d4c4c;background:#fff}.pl-c-body--theme-light .pl-c-nav__link--dropdown:after{color:#ccc}.pl-c-body--theme-light .pl-c-nav__sublist .pl-c-nav__link{border-left:1px solid #ccc;border-right:1px solid #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;border-bottom:1px solid #ccc}}.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:#ddd}.pl-c-body--theme-light .typeahead{background:#ddd!important}.pl-c-body--theme-light .pl-c-typeahead{background:#ddd!important;color:#4d4c4c!important}.pl-c-body--theme-light .tt-input{background:#eee!important;color:#4d4c4c!important}.pl-c-body--theme-light .tt-input:hover{color:#222;background:#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-modal{background:#fff;color:#4d4c4c;border-top:1px solid #ccc}.pl-c-body--theme-light .pl-c-modal__close-btn{background:#fff;border-top:1px solid #ccc;border-left:1px solid #ccc}.pl-c-body--theme-light .pl-c-modal__close-btn:focus,.pl-c-body--theme-light .pl-c-modal__close-btn:hover{background:#fafafa;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:48em){.pl-c-body--theme-sidebar .pl-c-header{width:14rem;height:100vh;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;border-bottom:0;padding:1rem;overflow:auto;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-body--theme-sidebar .pl-c-header::-webkit-scrollbar{width:0!important}.pl-c-body--theme-sidebar.pl-c-body--theme-light .pl-c-header{border-right:1px solid #ccc}.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__link{font-size:.85rem;padding-left:0;padding-right:0}.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}}@media all and (min-width:48em) and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-nav__sublist--dropdown.pl-is-active{height:auto}}@media all and (min-width:48em){.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:48em) 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:48em){.pl-c-body--theme-sidebar .pl-c-controls{margin-top:auto;margin-left:0;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.pl-c-body--theme-sidebar .pl-c-size-list{display:none}.pl-c-body--theme-sidebar .pl-c-viewport-size{display:none}.pl-c-body--theme-sidebar .pl-c-typeahead{border-radius:6px}.pl-c-body--theme-sidebar .pl-c-header .twitter-typeahead{display:block!important;margin-bottom:.5rem}.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-tools__action{padding-left:0;padding-right:0}.pl-c-body--theme-sidebar .pl-c-viewport__iframe-wrapper{width:100%!important}.pl-c-body--theme-sidebar .pl-c-viewport__iframe{width:100%!important}.pl-c-body--theme-sidebar .pl-c-modal{left:14rem;right:0;width:auto}} \ No newline at end of file diff --git a/packages/uikit-workshop/dist/styleguide/css/pattern-lab.97fc8203.css b/packages/uikit-workshop/dist/styleguide/css/pattern-lab.97fc8203.css new file mode 100644 index 000000000..cabcfef64 --- /dev/null +++ b/packages/uikit-workshop/dist/styleguide/css/pattern-lab.97fc8203.css @@ -0,0 +1 @@ +.pl-c-header .pl-c-typeahead:focus{background:grey;color:#fff}.pl-c-header .twitter-typeahead{display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;width:100%}.pl-c-header .tt-input{background:grey;color:#fff}.pl-c-header .tt-input:hover{color:#fff;background:#222!important}.pl-c-header .tt-input:hover::-webkit-input-placeholder{color:#fff}.pl-c-header .tt-input:hover::-moz-input-placeholder{color:#fff}.pl-c-header .tt-input:focus{border-radius:0;text-transform:lowercase;color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-header .tt-hint{text-transform:lowercase}.pl-c-header .tt-dropdown-menu{text-transform:lowercase;background-color:grey;width:100%;border-bottom-right-radius:6px;border-bottom-left-radius:6px}.pl-c-header .tt-suggestion{color:#eee;padding:.8em}.pl-c-header .tt-suggestion.tt-cursor{color:#fff;background:rgba(255,255,255,.25)}.pl-c-header .tt-suggestion p{margin:0}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;-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:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#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:#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: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-c-header__nav-toggle{background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out;border:0}.pl-c-header__nav-toggle:hover{color:#fff;background:#222}.pl-c-header__nav-toggle.active,.pl-c-header__nav-toggle:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-header__nav-toggle{background:#fff;color:#4d4c4c}.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}.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}@media all and (max-width:42em){.pl-c-nav{position:absolute;top:100%;width:100%;overflow:hidden;max-height:0;background:#000;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-transition:max-height .1s ease-out;transition:max-height .1s ease-out}.pl-c-nav.pl-is-active{max-height:50rem;height:calc(100vh - 2rem);overflow:auto;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-nav.pl-is-active::-webkit-scrollbar{width:0!important}}.pl-c-nav__item{cursor:pointer;position:relative}@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{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out}.pl-c-nav__link:hover{color:#fff;background:#222}.pl-c-nav__link.active,.pl-c-nav__link:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-nav__link{background:#fff;color:#4d4c4c}.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-nav__link--sublink{text-transform:none;padding-left:1rem}.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:#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{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;overflow:hidden;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}.pl-c-nav__sublist--dropdown.pl-is-active,.pl-c-nav__subsublist--dropdown.pl-is-active{max-height:none;overflow:auto;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-nav__sublist--dropdown.pl-is-active::-webkit-scrollbar,.pl-c-nav__subsublist--dropdown.pl-is-active::-webkit-scrollbar{width:0!important}@media all and (min-width:42em){.pl-c-nav__sublist--dropdown.pl-is-active,.pl-c-nav__subsublist--dropdown.pl-is-active{max-height:120rem}}@media all and (min-width:42em){.pl-c-nav__sublist--dropdown.pl-is-active{height:calc(100vh - 2rem)}}.pl-c-nav__subsublist{list-style:none;margin:0;padding:0}.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:0 0;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:#222}.pl-c-viewport-size__input:active,.pl-c-viewport-size__input:focus{color:#fff;background:#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}@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:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out}.pl-c-size-list__action:hover{color:#fff;background:#222}.pl-c-size-list__action.active,.pl-c-size-list__action:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-size-list__action{background:#fff;color:#4d4c4c}.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-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-c-tools{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex}.pl-c-tools__toggle{background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out;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:#222}.pl-c-tools__toggle.active,.pl-c-tools__toggle:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-tools__toggle{background:#fff;color:#4d4c4c}.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{position:absolute}.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:1;width:10rem;border-bottom-left-radius:6px;border-bottom-right-radius:6px}.pl-c-tools__list.pl-is-active{max-height:none;overflow:auto;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-tools__list.pl-is-active::-webkit-scrollbar{width:0!important}@media all and (min-width:42em){.pl-c-tools__list.pl-is-active{max-height:120rem}}.pl-c-tools__action{background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out;display:block;width:100%;margin:0}.pl-c-tools__action:hover{color:#fff;background:#222}.pl-c-tools__action.active,.pl-c-tools__action:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-tools__action{background:#fff;color:#4d4c4c}.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-viewport__cover{width:100%;height:100%;display:none;position:absolute;z-index:20;cursor:move}.pl-c-viewport__iframe-wrapper.hay-mode{-webkit-transition:all 40s linear;transition:all 40s linear}.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:#ccc;-webkit-transition:background .1s ease-out;transition:background .1s ease-out}.pl-c-viewport__resizer-handle:hover{background:grey}.pl-c-viewport__resizer-handle:active{cursor:move;background:#4d4c4c}.vp-animate{-webkit-transition:width .8s ease-out;transition:width .8s ease-out}.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:0 0;font-weight:400;border:1px solid #ddd;border-top-left-radius:6px;border-top-right-radius:6px;-webkit-transition:background .1s ease-out;transition:background .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:#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:#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-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}@media all and (min-width:53em){.pl-c-pattern-info{display:-webkit-box;display:-ms-flexbox;display:flex}}.pl-c-pattern .pl-c-pattern-info{max-height:20rem;overflow:scroll;-ms-overflow-style:-ms-autohiding-scrollbar}.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;height:18rem;overflow:visible}}.pl-c-modal .pl-c-pattern-info{position:absolute;top:0;right:0;bottom:0;left:0;overflow:scroll;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-modal .pl-c-pattern-info::-webkit-scrollbar{width:0!important}@media all and (min-width:53em){.pl-c-modal .pl-c-pattern-info{position:static;overflow:visible}}.pl-c-pattern-info__panel{padding:1rem}@media all and (min-width:53em){.pl-c-pattern-info__panel{-webkit-box-flex:1;-ms-flex:auto;flex:auto;position:absolute;top:0;bottom:0;left:0;right:0}}@media all and (min-width:62em){.pl-c-modal .pl-c-pattern-info__panel{padding-left:2rem}}.pl-c-pattern-info__panel--info{padding-top:2rem}@media all and (min-width:53em){.pl-c-pattern-info__panel--info{left:0;right:50%;overflow:scroll;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-pattern-info__panel--info::-webkit-scrollbar{width:0!important}}@media all and (min-width:62em){.pl-c-pattern-info__panel--info{right:55%}}@media all and (min-width:53em){.pl-c-pattern-info__panel--info+.pl-c-pattern-info__panel--code{right:0;left:50%;top:1.2rem}}@media all and (min-width:62em){.pl-c-pattern-info__panel--info+.pl-c-pattern-info__panel--code{left:45%}}.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-pattern-state{display:inline-block;width:5px;height:5px;margin-left:10px;position:relative;top:5px;left:0;border-radius:50%;background:#02a4d5;line-height:4px;text-indent:10px}.pl-c-pattern-state--complete{background:#03790f}.pl-c-pattern-state--inreview{background:#c7a118}.pl-c-pattern-state--deprecated{background:#b00b02}.complete:before{color:#03790f!important}.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-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-tabs{padding:0 .5rem .5rem;background:#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}@media all and (min-width:53em){.pl-c-pattern-info__panel--code .pl-c-tabs{position:absolute;top:1rem;bottom:1rem;left:1rem;right:1rem}}@media all and (min-width:62em){.pl-c-modal .pl-c-tabs{right:2rem;left:2rem}}.pl-c-tabs__list{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;list-style:none;margin:0;padding:.5rem 0;background:#fff}.pl-c-tabs__link{display:block;line-height:1;padding:.2rem .4rem;border:1px solid transparent;border-radius:6px;background:#fff;color:grey;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:#eee;border:1px solid #ddd}.pl-c-tabs__content{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;overflow:scroll;-ms-overflow-style:-ms-autohiding-scrollbar;height:100%;padding-top:.5rem}.pl-c-tabs__content::-webkit-scrollbar{width:0!important}.pl-c-modal .pl-c-tabs__content{border:0}.pl-c-tabs__panel{display:none;min-height:12rem}.pl-c-tabs__panel.pl-is-active-tab{display:block}.pl-c-tabs__panel :not(pre)>code[class*=language-],.pl-c-tabs__panel pre[class*=language-]{background:0 0;margin:0;padding:0;border:0;display:block}.pl-c-tabs__panel code[class*=language-]{background:0 0;margin:0}.pl-c-tools{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex}.pl-c-tools__toggle{background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out;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:#222}.pl-c-tools__toggle.active,.pl-c-tools__toggle:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-tools__toggle{background:#fff;color:#4d4c4c}.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{position:absolute}.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:1;width:10rem;border-bottom-left-radius:6px;border-bottom-right-radius:6px}.pl-c-tools__list.pl-is-active{max-height:none;overflow:auto;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-tools__list.pl-is-active::-webkit-scrollbar{width:0!important}@media all and (min-width:42em){.pl-c-tools__list.pl-is-active{max-height:120rem}}.pl-c-tools__action{background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out;display:block;width:100%;margin:0}.pl-c-tools__action:hover{color:#fff;background:#222}.pl-c-tools__action.active,.pl-c-tools__action:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-tools__action{background:#fff;color:#4d4c4c}.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-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:#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 .1s ease;transition:background .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: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-modal{display:none;font-family:HelveticaNeue,Helvetica,Arial,sans-serif;background:#000;color:#ccc;position:relative;top:auto;bottom:0;left:0;z-index:5;width:100%;height:50%;-webkit-transition:bottom .3s ease-out;transition:bottom .3s ease-out}.pl-c-modal.pl-is-active{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;bottom:0}.pl-c-modal__close-btn{font-size:70%;background:#000;color:grey;border:0;border-radius:6px 6px 0 0;display:inline-block;padding:.5rem .5rem .3rem;margin:0;text-decoration:none;cursor:pointer;z-index:2;-webkit-transition:all .1s ease-out;transition:all .1s ease-out}.pl-c-modal__close-btn:focus,.pl-c-modal__close-btn:hover{background:#222;color:#fff}.pl-c-modal__close-btn:active,.pl-c-modal__close-btn:focus{outline:1px dotted grey;outline-offset:-2px}.pl-c-modal.pl-is-active .pl-c-modal__close-btn{bottom:100%}.pl-c-modal__cover{width:100%;height:100%;display:none;position:absolute;z-index:20;cursor:move}.pl-c-modal__resizer{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;left:0;height:14px;width:100%;background:#000;z-index:2;cursor:ns-resize}.pl-c-modal__resizer:after{content:'';height:3px;width:50px;border-top:1px solid grey;border-bottom:1px solid grey;-webkit-transition:border-color .1s ease-out;transition:border-color .1s ease-out}.pl-c-modal__resizer:focus:after,.pl-c-modal__resizer:hover:after{border-color:#fff}.pl-c-modal__close-btn-icon{width:12px;height:12px;color:currentColor;fill:currentColor;-webkit-transition:fill .1s ease-out;transition:fill .1s ease-out}.pl-c-code-copy-btn{display:inline-block;position:absolute;top:.5rem;right:.5rem;padding:.2rem .4rem;background:#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 .1s ease-out;transition:background .1s ease-out}.pl-c-code-copy-btn:focus,.pl-c-code-copy-btn:hover{background:#ccc}.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: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-body--theme-light .pl-c-header{background:#fff;border-bottom:1px solid #ccc}.pl-c-body--theme-light .pl-c-nav__sublist{background:0 0}.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 .pl-c-nav__link--dropdown{color:#4d4c4c;background:#fff}.pl-c-body--theme-light .pl-c-nav__link--dropdown:after{color:#ccc}.pl-c-body--theme-light .pl-c-nav__sublist .pl-c-nav__link{border-left:1px solid #ccc;border-right:1px solid #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;border-bottom:1px solid #ccc}}.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:#ddd}.pl-c-body--theme-light .typeahead{background:#ddd!important}.pl-c-body--theme-light .pl-c-typeahead{background:#ddd!important;color:#4d4c4c!important}.pl-c-body--theme-light .tt-input{background:#eee!important;color:#4d4c4c!important}.pl-c-body--theme-light .tt-input:hover{color:#222;background:#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-modal{background:#fff;color:#4d4c4c;border-top:1px solid #ccc}.pl-c-body--theme-light .pl-c-modal__close-btn{background:#fff;border-top:1px solid #ccc;border-left:1px solid #ccc}.pl-c-body--theme-light .pl-c-modal__close-btn:focus,.pl-c-body--theme-light .pl-c-modal__close-btn:hover{background:#fafafa;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:48em){.pl-c-body--theme-sidebar .pl-c-header{width:14rem;height:100vh;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;border-bottom:0;padding:1rem;overflow:auto;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-body--theme-sidebar .pl-c-header::-webkit-scrollbar{width:0!important}.pl-c-body--theme-sidebar.pl-c-body--theme-light .pl-c-header{border-right:1px solid #ccc}.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__link{font-size:.85rem;padding-left:0;padding-right:0}.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}}@media all and (min-width:48em) and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-nav__sublist--dropdown.pl-is-active{height:auto}}@media all and (min-width:48em){.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:48em) 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:48em){.pl-c-body--theme-sidebar .pl-c-controls{margin-top:auto;margin-left:0;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.pl-c-body--theme-sidebar .pl-c-size-list{display:none}.pl-c-body--theme-sidebar .pl-c-viewport-size{display:none}.pl-c-body--theme-sidebar .pl-c-typeahead{border-radius:6px}.pl-c-body--theme-sidebar .pl-c-header .twitter-typeahead{display:block!important;margin-bottom:.5rem}.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-tools__action{padding-left:0;padding-right:0}.pl-c-body--theme-sidebar .pl-c-viewport__iframe-wrapper{width:100%!important}.pl-c-body--theme-sidebar .pl-c-viewport__iframe{width:100%!important}.pl-c-body--theme-sidebar .pl-c-modal{left:14rem;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 098323da5..55c17b4be 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}.pl-c-body{margin:0;padding:0;background:#ddd;-webkit-text-size-adjust:100%}.pl-c-header{position:fixed;top:0;left:0;z-index:4;display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;background:#000;color:grey;font-family:HelveticaNeue,Helvetica,Arial,sans-serif;font-size:.7rem}.pl-c-header__nav-toggle{background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out;border:0}.pl-c-header__nav-toggle:hover{color:#fff;background:#222}.pl-c-header__nav-toggle.active,.pl-c-header__nav-toggle:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-header__nav-toggle{background:#fff;color:#4d4c4c}.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-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}@media all and (max-width:42em){.pl-c-nav{position:absolute;top:100%;width:100%;overflow:hidden;max-height:0;background:#000;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-transition:max-height .1s ease-out;transition:max-height .1s ease-out}.pl-c-nav.pl-is-active{max-height:50rem;height:calc(100vh - 2rem);overflow:auto;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-nav.pl-is-active::-webkit-scrollbar{width:0!important}}@media all and (min-width:42em){.pl-c-nav{display:-webkit-box;display:-ms-flexbox;display:flex}}.pl-c-nav__list{z-index:1;margin:0;padding:0;list-style:none}@media all and (max-width:42em){.pl-c-nav__list{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}}@media all and (min-width:42em){.pl-c-nav__list{display:-webkit-box;display:-ms-flexbox;display:flex}}.pl-c-nav__item{cursor:pointer;position:relative}@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{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out}.pl-c-nav__link:hover{color:#fff;background:#222}.pl-c-nav__link.active,.pl-c-nav__link:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-nav__link{background:#fff;color:#4d4c4c}.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-nav__link--sublink{text-transform:none;padding-left:1rem}.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:#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{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;overflow:hidden;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}.pl-c-nav__sublist--dropdown.pl-is-active,.pl-c-nav__subsublist--dropdown.pl-is-active{max-height:none;overflow:auto;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-nav__sublist--dropdown.pl-is-active::-webkit-scrollbar,.pl-c-nav__subsublist--dropdown.pl-is-active::-webkit-scrollbar{width:0!important}@media all and (min-width:42em){.pl-c-nav__sublist--dropdown.pl-is-active,.pl-c-nav__subsublist--dropdown.pl-is-active{max-height:120rem}}@media all and (min-width:42em){.pl-c-nav__sublist--dropdown.pl-is-active{height:calc(100vh - 2rem)}}.pl-c-nav__subsublist{list-style:none;margin:0;padding:0}.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:0 0;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:#222}.pl-c-viewport-size__input:active,.pl-c-viewport-size__input:focus{color:#fff;background:#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}@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:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out}.pl-c-size-list__action:hover{color:#fff;background:#222}.pl-c-size-list__action.active,.pl-c-size-list__action:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-size-list__action{background:#fff;color:#4d4c4c}.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-controls{margin-left:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.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-c-tools{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex}.pl-c-tools__toggle{background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out;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:#222}.pl-c-tools__toggle.active,.pl-c-tools__toggle:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-tools__toggle{background:#fff;color:#4d4c4c}.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{position:absolute}.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:1;width:10rem;border-bottom-left-radius:6px;border-bottom-right-radius:6px}.pl-c-tools__list.pl-is-active{max-height:none;overflow:auto;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-tools__list.pl-is-active::-webkit-scrollbar{width:0!important}@media all and (min-width:42em){.pl-c-tools__list.pl-is-active{max-height:120rem}}.pl-c-tools__action{background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out;display:block;width:100%;margin:0}.pl-c-tools__action:hover{color:#fff;background:#222}.pl-c-tools__action.active,.pl-c-tools__action:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-tools__action{background:#fff;color:#4d4c4c}.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-viewport{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:100vh;width:100%;position:relative;top:2rem;bottom:0;left:0;right:0;z-index:0;overflow:hidden}.pl-c-viewport__cover{width:100%;height:100%;display:none;position:absolute;z-index:20;cursor:move}.pl-c-viewport__iframe-wrapper{height:100%;width:100%;position:relative;margin:0 auto;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-overflow-scrolling:touch;overflow-y:auto;overflow-x:hidden;width:100%}.pl-c-viewport__iframe-wrapper.hay-mode{-webkit-transition:all 40s linear;transition:all 40s linear}.pl-c-viewport__iframe{position:absolute;height:100%;width:100%;border:0;padding:0;margin:0;top:0;bottom:0;left:0;right:0;background-color:#fff}.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:#ccc;-webkit-transition:background .1s ease-out;transition:background .1s ease-out}.pl-c-viewport__resizer-handle:hover{background:grey}.pl-c-viewport__resizer-handle:active{cursor:move;background:#4d4c4c}.vp-animate{-webkit-transition:width .8s ease-out;transition:width .8s ease-out}.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:0 0;font-weight:400;border:1px solid #ddd;border-top-left-radius:6px;border-top-right-radius:6px;-webkit-transition:background .1s ease-out;transition:background .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:#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:#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-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}@media all and (min-width:53em){.pl-c-pattern-info{display:-webkit-box;display:-ms-flexbox;display:flex}}.pl-c-pattern .pl-c-pattern-info{max-height:20rem;overflow:scroll;-ms-overflow-style:-ms-autohiding-scrollbar}.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;height:18rem;overflow:visible}}.pl-c-modal .pl-c-pattern-info{position:absolute;top:0;right:0;bottom:0;left:0;overflow:scroll;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-modal .pl-c-pattern-info::-webkit-scrollbar{width:0!important}@media all and (min-width:53em){.pl-c-modal .pl-c-pattern-info{position:static;overflow:visible}}.pl-c-pattern-info__panel{padding:1rem}@media all and (min-width:53em){.pl-c-pattern-info__panel{-webkit-box-flex:1;-ms-flex:auto;flex:auto;position:absolute;top:0;bottom:0;left:0;right:0}}@media all and (min-width:62em){.pl-c-modal .pl-c-pattern-info__panel{padding-left:2rem}}.pl-c-pattern-info__panel--info{padding-top:2rem}@media all and (min-width:53em){.pl-c-pattern-info__panel--info{left:0;right:50%;overflow:scroll;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-pattern-info__panel--info::-webkit-scrollbar{width:0!important}}@media all and (min-width:62em){.pl-c-pattern-info__panel--info{right:55%}}@media all and (min-width:53em){.pl-c-pattern-info__panel--info+.pl-c-pattern-info__panel--code{right:0;left:50%;top:1.2rem}}@media all and (min-width:62em){.pl-c-pattern-info__panel--info+.pl-c-pattern-info__panel--code{left:45%}}.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-pattern-state{display:inline-block;width:5px;height:5px;margin-left:10px;position:relative;top:5px;left:0;border-radius:50%;background:#02a4d5;line-height:4px;text-indent:10px}.pl-c-pattern-state--complete{background:#03790f}.pl-c-pattern-state--inreview{background:#c7a118}.pl-c-pattern-state--deprecated{background:#b00b02}.complete:before{color:#03790f!important}.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-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-tabs{padding:0 .5rem .5rem;background:#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}@media all and (min-width:53em){.pl-c-pattern-info__panel--code .pl-c-tabs{position:absolute;top:1rem;bottom:1rem;left:1rem;right:1rem}}@media all and (min-width:62em){.pl-c-modal .pl-c-tabs{right:2rem;left:2rem}}.pl-c-tabs__list{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;list-style:none;margin:0;padding:.5rem 0;background:#fff}.pl-c-tabs__link{display:block;line-height:1;padding:.2rem .4rem;border:1px solid transparent;border-radius:6px;background:#fff;color:grey;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:#eee;border:1px solid #ddd}.pl-c-tabs__content{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;overflow:scroll;-ms-overflow-style:-ms-autohiding-scrollbar;height:100%;padding-top:.5rem}.pl-c-tabs__content::-webkit-scrollbar{width:0!important}.pl-c-modal .pl-c-tabs__content{border:0}.pl-c-tabs__panel{display:none;min-height:12rem}.pl-c-tabs__panel.pl-is-active-tab{display:block}.pl-c-tabs__panel :not(pre)>code[class*=language-],.pl-c-tabs__panel pre[class*=language-]{background:0 0;margin:0;padding:0;border:0;display:block}.pl-c-tabs__panel code[class*=language-]{background:0 0;margin:0}.pl-c-tools{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex}.pl-c-tools__toggle{background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out;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:#222}.pl-c-tools__toggle.active,.pl-c-tools__toggle:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-tools__toggle{background:#fff;color:#4d4c4c}.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{position:absolute}.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:1;width:10rem;border-bottom-left-radius:6px;border-bottom-right-radius:6px}.pl-c-tools__list.pl-is-active{max-height:none;overflow:auto;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-tools__list.pl-is-active::-webkit-scrollbar{width:0!important}@media all and (min-width:42em){.pl-c-tools__list.pl-is-active{max-height:120rem}}.pl-c-tools__action{background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out;display:block;width:100%;margin:0}.pl-c-tools__action:hover{color:#fff;background:#222}.pl-c-tools__action.active,.pl-c-tools__action:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-tools__action{background:#fff;color:#4d4c4c}.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-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:#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 .1s ease;transition:background .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: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-modal{display:none;font-family:HelveticaNeue,Helvetica,Arial,sans-serif;background:#000;color:#ccc;position:relative;top:auto;bottom:0;left:0;z-index:5;width:100%;height:50%;-webkit-transition:bottom .3s ease-out;transition:bottom .3s ease-out}.pl-c-modal.pl-is-active{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;bottom:0}.pl-c-modal__toolbar{display:-webkit-box;display:-ms-flexbox;display:flex}.pl-c-modal__close-btn{font-size:70%;background:#000;color:grey;border:0;border-radius:6px 6px 0 0;display:inline-block;padding:.5rem .5rem .3rem;margin:0;text-decoration:none;cursor:pointer;z-index:2;-webkit-transition:all .1s ease-out;transition:all .1s ease-out}.pl-c-modal__close-btn:focus,.pl-c-modal__close-btn:hover{background:#222;color:#fff}.pl-c-modal__close-btn:active,.pl-c-modal__close-btn:focus{outline:1px dotted grey;outline-offset:-2px}.pl-c-modal.pl-is-active .pl-c-modal__close-btn{bottom:100%}.pl-c-modal__cover{width:100%;height:100%;display:none;position:absolute;z-index:20;cursor:move}.pl-c-modal__resizer{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;left:0;height:14px;width:100%;background:#000;z-index:2;cursor:ns-resize}.pl-c-modal__resizer:after{content:"";height:3px;width:50px;border-top:1px solid grey;border-bottom:1px solid grey;-webkit-transition:border-color .1s ease-out;transition:border-color .1s ease-out}.pl-c-modal__resizer:focus:after,.pl-c-modal__resizer:hover:after{border-color:#fff}.pl-c-modal__close-btn-icon{width:12px;height:12px;color:currentColor;fill:currentColor;-webkit-transition:fill .1s ease-out;transition:fill .1s ease-out}.pl-c-code-copy-btn{display:inline-block;position:absolute;top:.5rem;right:.5rem;padding:.2rem .4rem;background:#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 .1s ease-out;transition:background .1s ease-out}.pl-c-code-copy-btn:focus,.pl-c-code-copy-btn:hover{background:#ccc}.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: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}.is-vishidden{position:absolute!important;overflow:hidden;width:1px;height:1px;padding:0;border:0;clip:rect(1px,1px,1px,1px)}.pl-c-header .pl-c-typeahead{border:0;background:#222!important;color:grey;width:100%;right:0;padding:.61rem .5rem;font-size:inherit}.pl-c-header .pl-c-typeahead:focus{background:grey;color:#fff}.pl-c-header .twitter-typeahead{display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;width:100%}.pl-c-header .tt-input{background:grey;color:#fff}.pl-c-header .tt-input:hover{color:#fff;background:#222!important}.pl-c-header .tt-input:hover::-webkit-input-placeholder{color:#fff}.pl-c-header .tt-input:hover::-moz-input-placeholder{color:#fff}.pl-c-header .tt-input:focus{border-radius:0;text-transform:lowercase;color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-header .tt-hint{text-transform:lowercase}.pl-c-header .tt-dropdown-menu{text-transform:lowercase;background-color:grey;width:100%;border-bottom-right-radius:6px;border-bottom-left-radius:6px}.pl-c-header .tt-suggestion{color:#eee;padding:.8em}.pl-c-header .tt-suggestion.tt-cursor{color:#fff;background:rgba(255,255,255,.25)}.pl-c-header .tt-suggestion p{margin:0}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;-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:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#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:#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: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-c-body--theme-light .pl-c-header{background:#fff;border-bottom:1px solid #ccc}.pl-c-body--theme-light .pl-c-nav__sublist{background:0 0}.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 .pl-c-nav__link--dropdown{color:#4d4c4c;background:#fff}.pl-c-body--theme-light .pl-c-nav__link--dropdown:after{color:#ccc}.pl-c-body--theme-light .pl-c-nav__sublist .pl-c-nav__link{border-left:1px solid #ccc;border-right:1px solid #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;border-bottom:1px solid #ccc}}.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:#ddd}.pl-c-body--theme-light .typeahead{background:#ddd!important}.pl-c-body--theme-light .pl-c-typeahead{background:#ddd!important;color:#4d4c4c!important}.pl-c-body--theme-light .tt-input{background:#eee!important;color:#4d4c4c!important}.pl-c-body--theme-light .tt-input:hover{color:#222;background:#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-modal{background:#fff;color:#4d4c4c;border-top:1px solid #ccc}.pl-c-body--theme-light .pl-c-modal__close-btn{background:#fff;border-top:1px solid #ccc;border-left:1px solid #ccc}.pl-c-body--theme-light .pl-c-modal__close-btn:focus,.pl-c-body--theme-light .pl-c-modal__close-btn:hover{background:#fafafa;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:48em){.pl-c-body--theme-sidebar .pl-c-header{width:14rem;height:100vh;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;border-bottom:0;padding:1rem;overflow:auto;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-body--theme-sidebar .pl-c-header::-webkit-scrollbar{width:0!important}.pl-c-body--theme-sidebar.pl-c-body--theme-light .pl-c-header{border-right:1px solid #ccc}.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__link{font-size:.85rem;padding-left:0;padding-right:0}.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}}@media all and (min-width:48em) and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-nav__sublist--dropdown.pl-is-active{height:auto}}@media all and (min-width:48em){.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:48em) 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:48em){.pl-c-body--theme-sidebar .pl-c-controls{margin-top:auto;margin-left:0;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.pl-c-body--theme-sidebar .pl-c-size-list{display:none}.pl-c-body--theme-sidebar .pl-c-viewport-size{display:none}.pl-c-body--theme-sidebar .pl-c-typeahead{border-radius:6px}.pl-c-body--theme-sidebar .pl-c-header .twitter-typeahead{display:block!important;margin-bottom:.5rem}.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-tools__action{padding-left:0;padding-right:0}.pl-c-body--theme-sidebar .pl-c-viewport{top:0;margin-left:auto;width:calc(100% - 14rem)}.pl-c-body--theme-sidebar .pl-c-viewport__iframe-wrapper{width:100%!important}.pl-c-body--theme-sidebar .pl-c-viewport__iframe{width:100%!important}.pl-c-body--theme-sidebar .pl-c-modal{left:14rem;right:0;width:auto}} +.pl-c-body *{-webkit-box-sizing:border-box;box-sizing:border-box}.pl-c-body{margin:0;padding:0;background:#ddd;-webkit-text-size-adjust:100%}.pl-c-header .pl-c-typeahead{border:0;background:#222!important;color:grey;width:100%;right:0;padding:.61rem .5rem;font-size:inherit}.pl-c-header .pl-c-typeahead:focus{background:grey;color:#fff}.pl-c-header .twitter-typeahead{display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;width:100%}.pl-c-header .tt-input{background:grey;color:#fff}.pl-c-header .tt-input:hover{color:#fff;background:#222!important}.pl-c-header .tt-input:hover::-webkit-input-placeholder{color:#fff}.pl-c-header .tt-input:hover::-moz-input-placeholder{color:#fff}.pl-c-header .tt-input:focus{border-radius:0;text-transform:lowercase;color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-header .tt-hint{text-transform:lowercase}.pl-c-header .tt-dropdown-menu{text-transform:lowercase;background-color:grey;width:100%;border-bottom-right-radius:6px;border-bottom-left-radius:6px}.pl-c-header .tt-suggestion{color:#eee;padding:.8em}.pl-c-header .tt-suggestion.tt-cursor{color:#fff;background:rgba(255,255,255,.25)}.pl-c-header .tt-suggestion p{margin:0}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;-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:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#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:#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: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-c-header{position:fixed;top:0;left:0;z-index:4;display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;background:#000;color:grey;font-family:HelveticaNeue,Helvetica,Arial,sans-serif;font-size:.7rem}.pl-c-header__nav-toggle{background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out;border:0}.pl-c-header__nav-toggle:hover{color:#fff;background:#222}.pl-c-header__nav-toggle.active,.pl-c-header__nav-toggle:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-header__nav-toggle{background:#fff;color:#4d4c4c}.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-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}@media all and (max-width:42em){.pl-c-nav{position:absolute;top:100%;width:100%;overflow:hidden;max-height:0;background:#000;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-transition:max-height .1s ease-out;transition:max-height .1s ease-out}.pl-c-nav.pl-is-active{max-height:50rem;height:calc(100vh - 2rem);overflow:auto;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-nav.pl-is-active::-webkit-scrollbar{width:0!important}}@media all and (min-width:42em){.pl-c-nav{display:-webkit-box;display:-ms-flexbox;display:flex}}.pl-c-nav__list{z-index:1;margin:0;padding:0;list-style:none}@media all and (max-width:42em){.pl-c-nav__list{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}}@media all and (min-width:42em){.pl-c-nav__list{display:-webkit-box;display:-ms-flexbox;display:flex}}.pl-c-nav__item{cursor:pointer;position:relative}@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{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out}.pl-c-nav__link:hover{color:#fff;background:#222}.pl-c-nav__link.active,.pl-c-nav__link:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-nav__link{background:#fff;color:#4d4c4c}.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-nav__link--sublink{text-transform:none;padding-left:1rem}.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:#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{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;overflow:hidden;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}.pl-c-nav__sublist--dropdown.pl-is-active,.pl-c-nav__subsublist--dropdown.pl-is-active{max-height:none;overflow:auto;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-nav__sublist--dropdown.pl-is-active::-webkit-scrollbar,.pl-c-nav__subsublist--dropdown.pl-is-active::-webkit-scrollbar{width:0!important}@media all and (min-width:42em){.pl-c-nav__sublist--dropdown.pl-is-active,.pl-c-nav__subsublist--dropdown.pl-is-active{max-height:120rem}}@media all and (min-width:42em){.pl-c-nav__sublist--dropdown.pl-is-active{height:calc(100vh - 2rem)}}.pl-c-nav__subsublist{list-style:none;margin:0;padding:0}.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:0 0;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:#222}.pl-c-viewport-size__input:active,.pl-c-viewport-size__input:focus{color:#fff;background:#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}@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:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out}.pl-c-size-list__action:hover{color:#fff;background:#222}.pl-c-size-list__action.active,.pl-c-size-list__action:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-size-list__action{background:#fff;color:#4d4c4c}.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-controls{margin-left:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.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-c-tools{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex}.pl-c-tools__toggle{background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out;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:#222}.pl-c-tools__toggle.active,.pl-c-tools__toggle:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-tools__toggle{background:#fff;color:#4d4c4c}.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{position:absolute}.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:1;width:10rem;border-bottom-left-radius:6px;border-bottom-right-radius:6px}.pl-c-tools__list.pl-is-active{max-height:none;overflow:auto;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-tools__list.pl-is-active::-webkit-scrollbar{width:0!important}@media all and (min-width:42em){.pl-c-tools__list.pl-is-active{max-height:120rem}}.pl-c-tools__action{background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out;display:block;width:100%;margin:0}.pl-c-tools__action:hover{color:#fff;background:#222}.pl-c-tools__action.active,.pl-c-tools__action:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-tools__action{background:#fff;color:#4d4c4c}.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-viewport{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:100vh;width:100%;position:relative;top:2rem;bottom:0;left:0;right:0;z-index:0;overflow:hidden}.pl-c-viewport__cover{width:100%;height:100%;display:none;position:absolute;z-index:20;cursor:move}.pl-c-viewport__iframe-wrapper{height:100%;width:100%;position:relative;margin:0 auto;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-overflow-scrolling:touch;overflow-y:auto;overflow-x:hidden;width:100%}.pl-c-viewport__iframe-wrapper.hay-mode{-webkit-transition:all 40s linear;transition:all 40s linear}.pl-c-viewport__iframe{position:absolute;height:100%;width:100%;border:0;padding:0;margin:0;top:0;bottom:0;left:0;right:0;background-color:#fff}.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:#ccc;-webkit-transition:background .1s ease-out;transition:background .1s ease-out}.pl-c-viewport__resizer-handle:hover{background:grey}.pl-c-viewport__resizer-handle:active{cursor:move;background:#4d4c4c}.vp-animate{-webkit-transition:width .8s ease-out;transition:width .8s ease-out}.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:0 0;font-weight:400;border:1px solid #ddd;border-top-left-radius:6px;border-top-right-radius:6px;-webkit-transition:background .1s ease-out;transition:background .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:#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:#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-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}@media all and (min-width:53em){.pl-c-pattern-info{display:-webkit-box;display:-ms-flexbox;display:flex}}.pl-c-pattern .pl-c-pattern-info{max-height:20rem;overflow:scroll;-ms-overflow-style:-ms-autohiding-scrollbar}.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;height:18rem;overflow:visible}}.pl-c-modal .pl-c-pattern-info{position:absolute;top:0;right:0;bottom:0;left:0;overflow:scroll;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-modal .pl-c-pattern-info::-webkit-scrollbar{width:0!important}@media all and (min-width:53em){.pl-c-modal .pl-c-pattern-info{position:static;overflow:visible}}.pl-c-pattern-info__panel{padding:1rem}@media all and (min-width:53em){.pl-c-pattern-info__panel{-webkit-box-flex:1;-ms-flex:auto;flex:auto;position:absolute;top:0;bottom:0;left:0;right:0}}@media all and (min-width:62em){.pl-c-modal .pl-c-pattern-info__panel{padding-left:2rem}}.pl-c-pattern-info__panel--info{padding-top:2rem}@media all and (min-width:53em){.pl-c-pattern-info__panel--info{left:0;right:50%;overflow:scroll;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-pattern-info__panel--info::-webkit-scrollbar{width:0!important}}@media all and (min-width:62em){.pl-c-pattern-info__panel--info{right:55%}}@media all and (min-width:53em){.pl-c-pattern-info__panel--info+.pl-c-pattern-info__panel--code{right:0;left:50%;top:1.2rem}}@media all and (min-width:62em){.pl-c-pattern-info__panel--info+.pl-c-pattern-info__panel--code{left:45%}}.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-pattern-state{display:inline-block;width:5px;height:5px;margin-left:10px;position:relative;top:5px;left:0;border-radius:50%;background:#02a4d5;line-height:4px;text-indent:10px}.pl-c-pattern-state--complete{background:#03790f}.pl-c-pattern-state--inreview{background:#c7a118}.pl-c-pattern-state--deprecated{background:#b00b02}.complete:before{color:#03790f!important}.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-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-tabs{padding:0 .5rem .5rem;background:#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}@media all and (min-width:53em){.pl-c-pattern-info__panel--code .pl-c-tabs{position:absolute;top:1rem;bottom:1rem;left:1rem;right:1rem}}@media all and (min-width:62em){.pl-c-modal .pl-c-tabs{right:2rem;left:2rem}}.pl-c-tabs__list{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;list-style:none;margin:0;padding:.5rem 0;background:#fff}.pl-c-tabs__link{display:block;line-height:1;padding:.2rem .4rem;border:1px solid transparent;border-radius:6px;background:#fff;color:grey;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:#eee;border:1px solid #ddd}.pl-c-tabs__content{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;overflow:scroll;-ms-overflow-style:-ms-autohiding-scrollbar;height:100%;padding-top:.5rem}.pl-c-tabs__content::-webkit-scrollbar{width:0!important}.pl-c-modal .pl-c-tabs__content{border:0}.pl-c-tabs__panel{display:none;min-height:12rem}.pl-c-tabs__panel.pl-is-active-tab{display:block}.pl-c-tabs__panel :not(pre)>code[class*=language-],.pl-c-tabs__panel pre[class*=language-]{background:0 0;margin:0;padding:0;border:0;display:block}.pl-c-tabs__panel code[class*=language-]{background:0 0;margin:0}.pl-c-tools{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex}.pl-c-tools__toggle{background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out;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:#222}.pl-c-tools__toggle.active,.pl-c-tools__toggle:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-tools__toggle{background:#fff;color:#4d4c4c}.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{position:absolute}.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:1;width:10rem;border-bottom-left-radius:6px;border-bottom-right-radius:6px}.pl-c-tools__list.pl-is-active{max-height:none;overflow:auto;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-tools__list.pl-is-active::-webkit-scrollbar{width:0!important}@media all and (min-width:42em){.pl-c-tools__list.pl-is-active{max-height:120rem}}.pl-c-tools__action{background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out;display:block;width:100%;margin:0}.pl-c-tools__action:hover{color:#fff;background:#222}.pl-c-tools__action.active,.pl-c-tools__action:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-tools__action{background:#fff;color:#4d4c4c}.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-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:#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 .1s ease;transition:background .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: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-modal{display:none;font-family:HelveticaNeue,Helvetica,Arial,sans-serif;background:#000;color:#ccc;position:relative;top:auto;bottom:0;left:0;z-index:5;width:100%;height:50%;-webkit-transition:bottom .3s ease-out;transition:bottom .3s ease-out}.pl-c-modal.pl-is-active{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;bottom:0}.pl-c-modal__toolbar{display:-webkit-box;display:-ms-flexbox;display:flex}.pl-c-modal__close-btn{font-size:70%;background:#000;color:grey;border:0;border-radius:6px 6px 0 0;display:inline-block;padding:.5rem .5rem .3rem;margin:0;text-decoration:none;cursor:pointer;z-index:2;-webkit-transition:all .1s ease-out;transition:all .1s ease-out}.pl-c-modal__close-btn:focus,.pl-c-modal__close-btn:hover{background:#222;color:#fff}.pl-c-modal__close-btn:active,.pl-c-modal__close-btn:focus{outline:1px dotted grey;outline-offset:-2px}.pl-c-modal.pl-is-active .pl-c-modal__close-btn{bottom:100%}.pl-c-modal__cover{width:100%;height:100%;display:none;position:absolute;z-index:20;cursor:move}.pl-c-modal__resizer{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;left:0;height:14px;width:100%;background:#000;z-index:2;cursor:ns-resize}.pl-c-modal__resizer:after{content:'';height:3px;width:50px;border-top:1px solid grey;border-bottom:1px solid grey;-webkit-transition:border-color .1s ease-out;transition:border-color .1s ease-out}.pl-c-modal__resizer:focus:after,.pl-c-modal__resizer:hover:after{border-color:#fff}.pl-c-modal__close-btn-icon{width:12px;height:12px;color:currentColor;fill:currentColor;-webkit-transition:fill .1s ease-out;transition:fill .1s ease-out}.pl-c-code-copy-btn{display:inline-block;position:absolute;top:.5rem;right:.5rem;padding:.2rem .4rem;background:#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 .1s ease-out;transition:background .1s ease-out}.pl-c-code-copy-btn:focus,.pl-c-code-copy-btn:hover{background:#ccc}.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: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-body--theme-light .pl-c-header{background:#fff;border-bottom:1px solid #ccc}.pl-c-body--theme-light .pl-c-nav__sublist{background:0 0}.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 .pl-c-nav__link--dropdown{color:#4d4c4c;background:#fff}.pl-c-body--theme-light .pl-c-nav__link--dropdown:after{color:#ccc}.pl-c-body--theme-light .pl-c-nav__sublist .pl-c-nav__link{border-left:1px solid #ccc;border-right:1px solid #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;border-bottom:1px solid #ccc}}.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:#ddd}.pl-c-body--theme-light .typeahead{background:#ddd!important}.pl-c-body--theme-light .pl-c-typeahead{background:#ddd!important;color:#4d4c4c!important}.pl-c-body--theme-light .tt-input{background:#eee!important;color:#4d4c4c!important}.pl-c-body--theme-light .tt-input:hover{color:#222;background:#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-modal{background:#fff;color:#4d4c4c;border-top:1px solid #ccc}.pl-c-body--theme-light .pl-c-modal__close-btn{background:#fff;border-top:1px solid #ccc;border-left:1px solid #ccc}.pl-c-body--theme-light .pl-c-modal__close-btn:focus,.pl-c-body--theme-light .pl-c-modal__close-btn:hover{background:#fafafa;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:48em){.pl-c-body--theme-sidebar .pl-c-header{width:14rem;height:100vh;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;border-bottom:0;padding:1rem;overflow:auto;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-body--theme-sidebar .pl-c-header::-webkit-scrollbar{width:0!important}.pl-c-body--theme-sidebar.pl-c-body--theme-light .pl-c-header{border-right:1px solid #ccc}.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__link{font-size:.85rem;padding-left:0;padding-right:0}.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}}@media all and (min-width:48em) and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-nav__sublist--dropdown.pl-is-active{height:auto}}@media all and (min-width:48em){.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:48em) 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:48em){.pl-c-body--theme-sidebar .pl-c-controls{margin-top:auto;margin-left:0;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.pl-c-body--theme-sidebar .pl-c-size-list{display:none}.pl-c-body--theme-sidebar .pl-c-viewport-size{display:none}.pl-c-body--theme-sidebar .pl-c-typeahead{border-radius:6px}.pl-c-body--theme-sidebar .pl-c-header .twitter-typeahead{display:block!important;margin-bottom:.5rem}.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-tools__action{padding-left:0;padding-right:0}.pl-c-body--theme-sidebar .pl-c-viewport{top:0;margin-left:auto;width:calc(100% - 14rem)}.pl-c-body--theme-sidebar .pl-c-viewport__iframe-wrapper{width:100%!important}.pl-c-body--theme-sidebar .pl-c-viewport__iframe{width:100%!important}.pl-c-body--theme-sidebar .pl-c-modal{left:14rem;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/js/patternlab-pattern.js b/packages/uikit-workshop/dist/styleguide/js/patternlab-pattern.js index d4d72027e..d3726dc8a 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 t={};function n(r){if(t[r])return t[r].exports;var i=t[r]={i:r,l:!1,exports:{}};return e[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)n.d(r,i,function(t){return e[t]}.bind(null,i));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=15)}([function(e,t,n){var r;!function(t,n){"use strict";"object"==typeof e&&"object"==typeof e.exports?e.exports=t.document?n(t,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return n(e)}:n(t)}("undefined"!=typeof window?window:this,function(n,i){"use strict";var o=[],a=n.document,s=Object.getPrototypeOf,u=o.slice,l=o.concat,c=o.push,f=o.indexOf,p={},d=p.toString,h=p.hasOwnProperty,v=h.toString,g=v.call(Object),y={},m=function(e){return"function"==typeof e&&"number"!=typeof e.nodeType},b=function(e){return null!=e&&e===e.window},x={type:!0,src:!0,noModule:!0};function w(e,t,n){var r,i=(t=t||a).createElement("script");if(i.text=e,n)for(r in x)n[r]&&(i[r]=n[r]);t.head.appendChild(i).parentNode.removeChild(i)}function T(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?p[d.call(e)]||"object":typeof e}var k=function(e,t){return new k.fn.init(e,t)},E=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;function S(e){var t=!!e&&"length"in e&&e.length,n=T(e);return!m(e)&&!b(e)&&("array"===n||0===t||"number"==typeof t&&t>0&&t-1 in e)}k.fn=k.prototype={jquery:"3.3.1",constructor:k,length:0,toArray:function(){return u.call(this)},get:function(e){return null==e?u.call(this):e<0?this[e+this.length]:this[e]},pushStack:function(e){var t=k.merge(this.constructor(),e);return t.prevObject=this,t},each:function(e){return k.each(this,e)},map:function(e){return this.pushStack(k.map(this,function(t,n){return e.call(t,n,t)}))},slice:function(){return this.pushStack(u.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},eq:function(e){var t=this.length,n=+e+(e<0?t:0);return this.pushStack(n>=0&&n+~]|"+M+")"+M+"*"),U=new RegExp("="+M+"*([^\\]'\"]*?)"+M+"*\\]","g"),V=new RegExp(I),z=new RegExp("^"+_+"$"),X={ID:new RegExp("^#("+_+")"),CLASS:new RegExp("^\\.("+_+")"),TAG:new RegExp("^("+_+"|[*])"),ATTR:new RegExp("^"+R),PSEUDO:new RegExp("^"+I),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+M+"*(even|odd|(([+-]|)(\\d*)n|)"+M+"*(?:([+-]|)"+M+"*(\\d+)|))"+M+"*\\)|)","i"),bool:new RegExp("^(?:"+H+")$","i"),needsContext:new RegExp("^"+M+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+M+"*((?:-\\d)?\\d*)"+M+"*\\)|)(?=[^-]|$)","i")},J=/^(?:input|select|textarea|button)$/i,Q=/^h\d$/i,Y=/^[^{]+\{\s*\[native \w/,G=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,K=/[+~]/,Z=new RegExp("\\\\([\\da-f]{1,6}"+M+"?|("+M+")|.)","ig"),ee=function(e,t,n){var r="0x"+t-65536;return r!=r||n?t:r<0?String.fromCharCode(r+65536):String.fromCharCode(r>>10|55296,1023&r|56320)},te=/([\0-\x1f\x7f]|^-?\d)|^-$|[^\0-\x1f\x7f-\uFFFF\w-]/g,ne=function(e,t){return t?"\0"===e?"�":e.slice(0,-1)+"\\"+e.charCodeAt(e.length-1).toString(16)+" ":"\\"+e},re=function(){p()},ie=me(function(e){return!0===e.disabled&&("form"in e||"label"in e)},{dir:"parentNode",next:"legend"});try{O.apply(L=q.call(w.childNodes),w.childNodes),L[w.childNodes.length].nodeType}catch(e){O={apply:L.length?function(e,t){D.apply(e,q.call(t))}:function(e,t){for(var n=e.length,r=0;e[n++]=t[r++];);e.length=n-1}}}function oe(e,t,r,i){var o,s,l,c,f,h,y,m=t&&t.ownerDocument,T=t?t.nodeType:9;if(r=r||[],"string"!=typeof e||!e||1!==T&&9!==T&&11!==T)return r;if(!i&&((t?t.ownerDocument||t:w)!==d&&p(t),t=t||d,v)){if(11!==T&&(f=G.exec(e)))if(o=f[1]){if(9===T){if(!(l=t.getElementById(o)))return r;if(l.id===o)return r.push(l),r}else if(m&&(l=m.getElementById(o))&&b(t,l)&&l.id===o)return r.push(l),r}else{if(f[2])return O.apply(r,t.getElementsByTagName(e)),r;if((o=f[3])&&n.getElementsByClassName&&t.getElementsByClassName)return O.apply(r,t.getElementsByClassName(o)),r}if(n.qsa&&!C[e+" "]&&(!g||!g.test(e))){if(1!==T)m=t,y=e;else if("object"!==t.nodeName.toLowerCase()){for((c=t.getAttribute("id"))?c=c.replace(te,ne):t.setAttribute("id",c=x),s=(h=a(e)).length;s--;)h[s]="#"+c+" "+ye(h[s]);y=h.join(","),m=K.test(e)&&ve(t.parentNode)||t}if(y)try{return O.apply(r,m.querySelectorAll(y)),r}catch(e){}finally{c===x&&t.removeAttribute("id")}}}return u(e.replace(B,"$1"),t,r,i)}function ae(){var e=[];return function t(n,i){return e.push(n+" ")>r.cacheLength&&delete t[e.shift()],t[n+" "]=i}}function se(e){return e[x]=!0,e}function ue(e){var t=d.createElement("fieldset");try{return!!e(t)}catch(e){return!1}finally{t.parentNode&&t.parentNode.removeChild(t),t=null}}function le(e,t){for(var n=e.split("|"),i=n.length;i--;)r.attrHandle[n[i]]=t}function ce(e,t){var n=t&&e,r=n&&1===e.nodeType&&1===t.nodeType&&e.sourceIndex-t.sourceIndex;if(r)return r;if(n)for(;n=n.nextSibling;)if(n===t)return-1;return e?1:-1}function fe(e){return function(t){return"input"===t.nodeName.toLowerCase()&&t.type===e}}function pe(e){return function(t){var n=t.nodeName.toLowerCase();return("input"===n||"button"===n)&&t.type===e}}function de(e){return function(t){return"form"in t?t.parentNode&&!1===t.disabled?"label"in t?"label"in t.parentNode?t.parentNode.disabled===e:t.disabled===e:t.isDisabled===e||t.isDisabled!==!e&&ie(t)===e:t.disabled===e:"label"in t&&t.disabled===e}}function he(e){return se(function(t){return t=+t,se(function(n,r){for(var i,o=e([],n.length,t),a=o.length;a--;)n[i=o[a]]&&(n[i]=!(r[i]=n[i]))})})}function ve(e){return e&&void 0!==e.getElementsByTagName&&e}for(t in n=oe.support={},o=oe.isXML=function(e){var t=e&&(e.ownerDocument||e).documentElement;return!!t&&"HTML"!==t.nodeName},p=oe.setDocument=function(e){var t,i,a=e?e.ownerDocument||e:w;return a!==d&&9===a.nodeType&&a.documentElement?(h=(d=a).documentElement,v=!o(d),w!==d&&(i=d.defaultView)&&i.top!==i&&(i.addEventListener?i.addEventListener("unload",re,!1):i.attachEvent&&i.attachEvent("onunload",re)),n.attributes=ue(function(e){return e.className="i",!e.getAttribute("className")}),n.getElementsByTagName=ue(function(e){return e.appendChild(d.createComment("")),!e.getElementsByTagName("*").length}),n.getElementsByClassName=Y.test(d.getElementsByClassName),n.getById=ue(function(e){return h.appendChild(e).id=x,!d.getElementsByName||!d.getElementsByName(x).length}),n.getById?(r.filter.ID=function(e){var t=e.replace(Z,ee);return function(e){return e.getAttribute("id")===t}},r.find.ID=function(e,t){if(void 0!==t.getElementById&&v){var n=t.getElementById(e);return n?[n]:[]}}):(r.filter.ID=function(e){var t=e.replace(Z,ee);return function(e){var n=void 0!==e.getAttributeNode&&e.getAttributeNode("id");return n&&n.value===t}},r.find.ID=function(e,t){if(void 0!==t.getElementById&&v){var n,r,i,o=t.getElementById(e);if(o){if((n=o.getAttributeNode("id"))&&n.value===e)return[o];for(i=t.getElementsByName(e),r=0;o=i[r++];)if((n=o.getAttributeNode("id"))&&n.value===e)return[o]}return[]}}),r.find.TAG=n.getElementsByTagName?function(e,t){return void 0!==t.getElementsByTagName?t.getElementsByTagName(e):n.qsa?t.querySelectorAll(e):void 0}:function(e,t){var n,r=[],i=0,o=t.getElementsByTagName(e);if("*"===e){for(;n=o[i++];)1===n.nodeType&&r.push(n);return r}return o},r.find.CLASS=n.getElementsByClassName&&function(e,t){if(void 0!==t.getElementsByClassName&&v)return t.getElementsByClassName(e)},y=[],g=[],(n.qsa=Y.test(d.querySelectorAll))&&(ue(function(e){h.appendChild(e).innerHTML="",e.querySelectorAll("[msallowcapture^='']").length&&g.push("[*^$]="+M+"*(?:''|\"\")"),e.querySelectorAll("[selected]").length||g.push("\\["+M+"*(?:value|"+H+")"),e.querySelectorAll("[id~="+x+"-]").length||g.push("~="),e.querySelectorAll(":checked").length||g.push(":checked"),e.querySelectorAll("a#"+x+"+*").length||g.push(".#.+[+~]")}),ue(function(e){e.innerHTML="";var t=d.createElement("input");t.setAttribute("type","hidden"),e.appendChild(t).setAttribute("name","D"),e.querySelectorAll("[name=d]").length&&g.push("name"+M+"*[*^$|!~]?="),2!==e.querySelectorAll(":enabled").length&&g.push(":enabled",":disabled"),h.appendChild(e).disabled=!0,2!==e.querySelectorAll(":disabled").length&&g.push(":enabled",":disabled"),e.querySelectorAll("*,:x"),g.push(",.*:")})),(n.matchesSelector=Y.test(m=h.matches||h.webkitMatchesSelector||h.mozMatchesSelector||h.oMatchesSelector||h.msMatchesSelector))&&ue(function(e){n.disconnectedMatch=m.call(e,"*"),m.call(e,"[s!='']:x"),y.push("!=",I)}),g=g.length&&new RegExp(g.join("|")),y=y.length&&new RegExp(y.join("|")),t=Y.test(h.compareDocumentPosition),b=t||Y.test(h.contains)?function(e,t){var n=9===e.nodeType?e.documentElement:e,r=t&&t.parentNode;return e===r||!(!r||1!==r.nodeType||!(n.contains?n.contains(r):e.compareDocumentPosition&&16&e.compareDocumentPosition(r)))}:function(e,t){if(t)for(;t=t.parentNode;)if(t===e)return!0;return!1},j=t?function(e,t){if(e===t)return f=!0,0;var r=!e.compareDocumentPosition-!t.compareDocumentPosition;return r||(1&(r=(e.ownerDocument||e)===(t.ownerDocument||t)?e.compareDocumentPosition(t):1)||!n.sortDetached&&t.compareDocumentPosition(e)===r?e===d||e.ownerDocument===w&&b(w,e)?-1:t===d||t.ownerDocument===w&&b(w,t)?1:c?P(c,e)-P(c,t):0:4&r?-1:1)}:function(e,t){if(e===t)return f=!0,0;var n,r=0,i=e.parentNode,o=t.parentNode,a=[e],s=[t];if(!i||!o)return e===d?-1:t===d?1:i?-1:o?1:c?P(c,e)-P(c,t):0;if(i===o)return ce(e,t);for(n=e;n=n.parentNode;)a.unshift(n);for(n=t;n=n.parentNode;)s.unshift(n);for(;a[r]===s[r];)r++;return r?ce(a[r],s[r]):a[r]===w?-1:s[r]===w?1:0},d):d},oe.matches=function(e,t){return oe(e,null,null,t)},oe.matchesSelector=function(e,t){if((e.ownerDocument||e)!==d&&p(e),t=t.replace(U,"='$1']"),n.matchesSelector&&v&&!C[t+" "]&&(!y||!y.test(t))&&(!g||!g.test(t)))try{var r=m.call(e,t);if(r||n.disconnectedMatch||e.document&&11!==e.document.nodeType)return r}catch(e){}return oe(t,d,null,[e]).length>0},oe.contains=function(e,t){return(e.ownerDocument||e)!==d&&p(e),b(e,t)},oe.attr=function(e,t){(e.ownerDocument||e)!==d&&p(e);var i=r.attrHandle[t.toLowerCase()],o=i&&A.call(r.attrHandle,t.toLowerCase())?i(e,t,!v):void 0;return void 0!==o?o:n.attributes||!v?e.getAttribute(t):(o=e.getAttributeNode(t))&&o.specified?o.value:null},oe.escape=function(e){return(e+"").replace(te,ne)},oe.error=function(e){throw new Error("Syntax error, unrecognized expression: "+e)},oe.uniqueSort=function(e){var t,r=[],i=0,o=0;if(f=!n.detectDuplicates,c=!n.sortStable&&e.slice(0),e.sort(j),f){for(;t=e[o++];)t===e[o]&&(i=r.push(o));for(;i--;)e.splice(r[i],1)}return c=null,e},i=oe.getText=function(e){var t,n="",r=0,o=e.nodeType;if(o){if(1===o||9===o||11===o){if("string"==typeof e.textContent)return e.textContent;for(e=e.firstChild;e;e=e.nextSibling)n+=i(e)}else if(3===o||4===o)return e.nodeValue}else for(;t=e[r++];)n+=i(t);return n},(r=oe.selectors={cacheLength:50,createPseudo:se,match:X,attrHandle:{},find:{},relative:{">":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(e){return e[1]=e[1].replace(Z,ee),e[3]=(e[3]||e[4]||e[5]||"").replace(Z,ee),"~="===e[2]&&(e[3]=" "+e[3]+" "),e.slice(0,4)},CHILD:function(e){return e[1]=e[1].toLowerCase(),"nth"===e[1].slice(0,3)?(e[3]||oe.error(e[0]),e[4]=+(e[4]?e[5]+(e[6]||1):2*("even"===e[3]||"odd"===e[3])),e[5]=+(e[7]+e[8]||"odd"===e[3])):e[3]&&oe.error(e[0]),e},PSEUDO:function(e){var t,n=!e[6]&&e[2];return X.CHILD.test(e[0])?null:(e[3]?e[2]=e[4]||e[5]||"":n&&V.test(n)&&(t=a(n,!0))&&(t=n.indexOf(")",n.length-t)-n.length)&&(e[0]=e[0].slice(0,t),e[2]=n.slice(0,t)),e.slice(0,3))}},filter:{TAG:function(e){var t=e.replace(Z,ee).toLowerCase();return"*"===e?function(){return!0}:function(e){return e.nodeName&&e.nodeName.toLowerCase()===t}},CLASS:function(e){var t=E[e+" "];return t||(t=new RegExp("(^|"+M+")"+e+"("+M+"|$)"))&&E(e,function(e){return t.test("string"==typeof e.className&&e.className||void 0!==e.getAttribute&&e.getAttribute("class")||"")})},ATTR:function(e,t,n){return function(r){var i=oe.attr(r,e);return null==i?"!="===t:!t||(i+="","="===t?i===n:"!="===t?i!==n:"^="===t?n&&0===i.indexOf(n):"*="===t?n&&i.indexOf(n)>-1:"$="===t?n&&i.slice(-n.length)===n:"~="===t?(" "+i.replace(F," ")+" ").indexOf(n)>-1:"|="===t&&(i===n||i.slice(0,n.length+1)===n+"-"))}},CHILD:function(e,t,n,r,i){var o="nth"!==e.slice(0,3),a="last"!==e.slice(-4),s="of-type"===t;return 1===r&&0===i?function(e){return!!e.parentNode}:function(t,n,u){var l,c,f,p,d,h,v=o!==a?"nextSibling":"previousSibling",g=t.parentNode,y=s&&t.nodeName.toLowerCase(),m=!u&&!s,b=!1;if(g){if(o){for(;v;){for(p=t;p=p[v];)if(s?p.nodeName.toLowerCase()===y:1===p.nodeType)return!1;h=v="only"===e&&!h&&"nextSibling"}return!0}if(h=[a?g.firstChild:g.lastChild],a&&m){for(b=(d=(l=(c=(f=(p=g)[x]||(p[x]={}))[p.uniqueID]||(f[p.uniqueID]={}))[e]||[])[0]===T&&l[1])&&l[2],p=d&&g.childNodes[d];p=++d&&p&&p[v]||(b=d=0)||h.pop();)if(1===p.nodeType&&++b&&p===t){c[e]=[T,d,b];break}}else if(m&&(b=d=(l=(c=(f=(p=t)[x]||(p[x]={}))[p.uniqueID]||(f[p.uniqueID]={}))[e]||[])[0]===T&&l[1]),!1===b)for(;(p=++d&&p&&p[v]||(b=d=0)||h.pop())&&((s?p.nodeName.toLowerCase()!==y:1!==p.nodeType)||!++b||(m&&((c=(f=p[x]||(p[x]={}))[p.uniqueID]||(f[p.uniqueID]={}))[e]=[T,b]),p!==t)););return(b-=i)===r||b%r==0&&b/r>=0}}},PSEUDO:function(e,t){var n,i=r.pseudos[e]||r.setFilters[e.toLowerCase()]||oe.error("unsupported pseudo: "+e);return i[x]?i(t):i.length>1?(n=[e,e,"",t],r.setFilters.hasOwnProperty(e.toLowerCase())?se(function(e,n){for(var r,o=i(e,t),a=o.length;a--;)e[r=P(e,o[a])]=!(n[r]=o[a])}):function(e){return i(e,0,n)}):i}},pseudos:{not:se(function(e){var t=[],n=[],r=s(e.replace(B,"$1"));return r[x]?se(function(e,t,n,i){for(var o,a=r(e,null,i,[]),s=e.length;s--;)(o=a[s])&&(e[s]=!(t[s]=o))}):function(e,i,o){return t[0]=e,r(t,null,o,n),t[0]=null,!n.pop()}}),has:se(function(e){return function(t){return oe(e,t).length>0}}),contains:se(function(e){return e=e.replace(Z,ee),function(t){return(t.textContent||t.innerText||i(t)).indexOf(e)>-1}}),lang:se(function(e){return z.test(e||"")||oe.error("unsupported lang: "+e),e=e.replace(Z,ee).toLowerCase(),function(t){var n;do{if(n=v?t.lang:t.getAttribute("xml:lang")||t.getAttribute("lang"))return(n=n.toLowerCase())===e||0===n.indexOf(e+"-")}while((t=t.parentNode)&&1===t.nodeType);return!1}}),target:function(t){var n=e.location&&e.location.hash;return n&&n.slice(1)===t.id},root:function(e){return e===h},focus:function(e){return e===d.activeElement&&(!d.hasFocus||d.hasFocus())&&!!(e.type||e.href||~e.tabIndex)},enabled:de(!1),disabled:de(!0),checked:function(e){var t=e.nodeName.toLowerCase();return"input"===t&&!!e.checked||"option"===t&&!!e.selected},selected:function(e){return e.parentNode&&e.parentNode.selectedIndex,!0===e.selected},empty:function(e){for(e=e.firstChild;e;e=e.nextSibling)if(e.nodeType<6)return!1;return!0},parent:function(e){return!r.pseudos.empty(e)},header:function(e){return Q.test(e.nodeName)},input:function(e){return J.test(e.nodeName)},button:function(e){var t=e.nodeName.toLowerCase();return"input"===t&&"button"===e.type||"button"===t},text:function(e){var t;return"input"===e.nodeName.toLowerCase()&&"text"===e.type&&(null==(t=e.getAttribute("type"))||"text"===t.toLowerCase())},first:he(function(){return[0]}),last:he(function(e,t){return[t-1]}),eq:he(function(e,t,n){return[n<0?n+t:n]}),even:he(function(e,t){for(var n=0;n=0;)e.push(r);return e}),gt:he(function(e,t,n){for(var r=n<0?n+t:n;++r1?function(t,n,r){for(var i=e.length;i--;)if(!e[i](t,n,r))return!1;return!0}:e[0]}function xe(e,t,n,r,i){for(var o,a=[],s=0,u=e.length,l=null!=t;s-1&&(o[l]=!(a[l]=f))}}else y=xe(y===a?y.splice(h,y.length):y),i?i(null,a,y,u):O.apply(a,y)})}function Te(e){for(var t,n,i,o=e.length,a=r.relative[e[0].type],s=a||r.relative[" "],u=a?1:0,c=me(function(e){return e===t},s,!0),f=me(function(e){return P(t,e)>-1},s,!0),p=[function(e,n,r){var i=!a&&(r||n!==l)||((t=n).nodeType?c(e,n,r):f(e,n,r));return t=null,i}];u1&&be(p),u>1&&ye(e.slice(0,u-1).concat({value:" "===e[u-2].type?"*":""})).replace(B,"$1"),n,u0,i=e.length>0,o=function(o,a,s,u,c){var f,h,g,y=0,m="0",b=o&&[],x=[],w=l,k=o||i&&r.find.TAG("*",c),E=T+=null==w?1:Math.random()||.1,S=k.length;for(c&&(l=a===d||a||c);m!==S&&null!=(f=k[m]);m++){if(i&&f){for(h=0,a||f.ownerDocument===d||(p(f),s=!v);g=e[h++];)if(g(f,a||d,s)){u.push(f);break}c&&(T=E)}n&&((f=!g&&f)&&y--,o&&b.push(f))}if(y+=m,n&&m!==y){for(h=0;g=t[h++];)g(b,x,a,s);if(o){if(y>0)for(;m--;)b[m]||x[m]||(x[m]=N.call(u));x=xe(x)}O.apply(u,x),c&&!o&&x.length>0&&y+t.length>1&&oe.uniqueSort(u)}return c&&(T=E,l=w),b};return n?se(o):o}(o,i))).selector=e}return s},u=oe.select=function(e,t,n,i){var o,u,l,c,f,p="function"==typeof e&&e,d=!i&&a(e=p.selector||e);if(n=n||[],1===d.length){if((u=d[0]=d[0].slice(0)).length>2&&"ID"===(l=u[0]).type&&9===t.nodeType&&v&&r.relative[u[1].type]){if(!(t=(r.find.ID(l.matches[0].replace(Z,ee),t)||[])[0]))return n;p&&(t=t.parentNode),e=e.slice(u.shift().value.length)}for(o=X.needsContext.test(e)?0:u.length;o--&&(l=u[o],!r.relative[c=l.type]);)if((f=r.find[c])&&(i=f(l.matches[0].replace(Z,ee),K.test(u[0].type)&&ve(t.parentNode)||t))){if(u.splice(o,1),!(e=i.length&&ye(u)))return O.apply(n,i),n;break}}return(p||s(e,d))(i,t,!v,n,!t||K.test(e)&&ve(t.parentNode)||t),n},n.sortStable=x.split("").sort(j).join("")===x,n.detectDuplicates=!!f,p(),n.sortDetached=ue(function(e){return 1&e.compareDocumentPosition(d.createElement("fieldset"))}),ue(function(e){return e.innerHTML="","#"===e.firstChild.getAttribute("href")})||le("type|href|height|width",function(e,t,n){if(!n)return e.getAttribute(t,"type"===t.toLowerCase()?1:2)}),n.attributes&&ue(function(e){return e.innerHTML="",e.firstChild.setAttribute("value",""),""===e.firstChild.getAttribute("value")})||le("value",function(e,t,n){if(!n&&"input"===e.nodeName.toLowerCase())return e.defaultValue}),ue(function(e){return null==e.getAttribute("disabled")})||le(H,function(e,t,n){var r;if(!n)return!0===e[t]?t.toLowerCase():(r=e.getAttributeNode(t))&&r.specified?r.value:null}),oe}(n);k.find=C,k.expr=C.selectors,k.expr[":"]=k.expr.pseudos,k.uniqueSort=k.unique=C.uniqueSort,k.text=C.getText,k.isXMLDoc=C.isXML,k.contains=C.contains,k.escapeSelector=C.escape;var j=function(e,t,n){for(var r=[],i=void 0!==n;(e=e[t])&&9!==e.nodeType;)if(1===e.nodeType){if(i&&k(e).is(n))break;r.push(e)}return r},A=function(e,t){for(var n=[];e;e=e.nextSibling)1===e.nodeType&&e!==t&&n.push(e);return n},L=k.expr.match.needsContext;function N(e,t){return e.nodeName&&e.nodeName.toLowerCase()===t.toLowerCase()}var D=/^<([a-z][^\/\0>:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i;function O(e,t,n){return m(t)?k.grep(e,function(e,r){return!!t.call(e,r,e)!==n}):t.nodeType?k.grep(e,function(e){return e===t!==n}):"string"!=typeof t?k.grep(e,function(e){return f.call(t,e)>-1!==n}):k.filter(t,e,n)}k.filter=function(e,t,n){var r=t[0];return n&&(e=":not("+e+")"),1===t.length&&1===r.nodeType?k.find.matchesSelector(r,e)?[r]:[]:k.find.matches(e,k.grep(t,function(e){return 1===e.nodeType}))},k.fn.extend({find:function(e){var t,n,r=this.length,i=this;if("string"!=typeof e)return this.pushStack(k(e).filter(function(){for(t=0;t1?k.uniqueSort(n):n},filter:function(e){return this.pushStack(O(this,e||[],!1))},not:function(e){return this.pushStack(O(this,e||[],!0))},is:function(e){return!!O(this,"string"==typeof e&&L.test(e)?k(e):e||[],!1).length}});var q,P=/^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]+))$/;(k.fn.init=function(e,t,n){var r,i;if(!e)return this;if(n=n||q,"string"==typeof e){if(!(r="<"===e[0]&&">"===e[e.length-1]&&e.length>=3?[null,e,null]:P.exec(e))||!r[1]&&t)return!t||t.jquery?(t||n).find(e):this.constructor(t).find(e);if(r[1]){if(t=t instanceof k?t[0]:t,k.merge(this,k.parseHTML(r[1],t&&t.nodeType?t.ownerDocument||t:a,!0)),D.test(r[1])&&k.isPlainObject(t))for(r in t)m(this[r])?this[r](t[r]):this.attr(r,t[r]);return this}return(i=a.getElementById(r[2]))&&(this[0]=i,this.length=1),this}return e.nodeType?(this[0]=e,this.length=1,this):m(e)?void 0!==n.ready?n.ready(e):e(k):k.makeArray(e,this)}).prototype=k.fn,q=k(a);var H=/^(?:parents|prev(?:Until|All))/,M={children:!0,contents:!0,next:!0,prev:!0};function _(e,t){for(;(e=e[t])&&1!==e.nodeType;);return e}k.fn.extend({has:function(e){var t=k(e,this),n=t.length;return this.filter(function(){for(var e=0;e-1:1===n.nodeType&&k.find.matchesSelector(n,e))){o.push(n);break}return this.pushStack(o.length>1?k.uniqueSort(o):o)},index:function(e){return e?"string"==typeof e?f.call(k(e),this[0]):f.call(this,e.jquery?e[0]:e):this[0]&&this[0].parentNode?this.first().prevAll().length:-1},add:function(e,t){return this.pushStack(k.uniqueSort(k.merge(this.get(),k(e,t))))},addBack:function(e){return this.add(null==e?this.prevObject:this.prevObject.filter(e))}}),k.each({parent:function(e){var t=e.parentNode;return t&&11!==t.nodeType?t:null},parents:function(e){return j(e,"parentNode")},parentsUntil:function(e,t,n){return j(e,"parentNode",n)},next:function(e){return _(e,"nextSibling")},prev:function(e){return _(e,"previousSibling")},nextAll:function(e){return j(e,"nextSibling")},prevAll:function(e){return j(e,"previousSibling")},nextUntil:function(e,t,n){return j(e,"nextSibling",n)},prevUntil:function(e,t,n){return j(e,"previousSibling",n)},siblings:function(e){return A((e.parentNode||{}).firstChild,e)},children:function(e){return A(e.firstChild)},contents:function(e){return N(e,"iframe")?e.contentDocument:(N(e,"template")&&(e=e.content||e),k.merge([],e.childNodes))}},function(e,t){k.fn[e]=function(n,r){var i=k.map(this,t,n);return"Until"!==e.slice(-5)&&(r=n),r&&"string"==typeof r&&(i=k.filter(r,i)),this.length>1&&(M[e]||k.uniqueSort(i),H.test(e)&&i.reverse()),this.pushStack(i)}});var R=/[^\x20\t\r\n\f]+/g;function I(e){return e}function F(e){throw e}function B(e,t,n,r){var i;try{e&&m(i=e.promise)?i.call(e).done(t).fail(n):e&&m(i=e.then)?i.call(e,t,n):t.apply(void 0,[e].slice(r))}catch(e){n.apply(void 0,[e])}}k.Callbacks=function(e){e="string"==typeof e?function(e){var t={};return k.each(e.match(R)||[],function(e,n){t[n]=!0}),t}(e):k.extend({},e);var t,n,r,i,o=[],a=[],s=-1,u=function(){for(i=i||e.once,r=t=!0;a.length;s=-1)for(n=a.shift();++s-1;)o.splice(n,1),n<=s&&s--}),this},has:function(e){return e?k.inArray(e,o)>-1:o.length>0},empty:function(){return o&&(o=[]),this},disable:function(){return i=a=[],o=n="",this},disabled:function(){return!o},lock:function(){return i=a=[],n||t||(o=n=""),this},locked:function(){return!!i},fireWith:function(e,n){return i||(n=[e,(n=n||[]).slice?n.slice():n],a.push(n),t||u()),this},fire:function(){return l.fireWith(this,arguments),this},fired:function(){return!!r}};return l},k.extend({Deferred:function(e){var t=[["notify","progress",k.Callbacks("memory"),k.Callbacks("memory"),2],["resolve","done",k.Callbacks("once memory"),k.Callbacks("once memory"),0,"resolved"],["reject","fail",k.Callbacks("once memory"),k.Callbacks("once memory"),1,"rejected"]],r="pending",i={state:function(){return r},always:function(){return o.done(arguments).fail(arguments),this},catch:function(e){return i.then(null,e)},pipe:function(){var e=arguments;return k.Deferred(function(n){k.each(t,function(t,r){var i=m(e[r[4]])&&e[r[4]];o[r[1]](function(){var e=i&&i.apply(this,arguments);e&&m(e.promise)?e.promise().progress(n.notify).done(n.resolve).fail(n.reject):n[r[0]+"With"](this,i?[e]:arguments)})}),e=null}).promise()},then:function(e,r,i){var o=0;function a(e,t,r,i){return function(){var s=this,u=arguments,l=function(){var n,l;if(!(e=o&&(r!==F&&(s=void 0,u=[n]),t.rejectWith(s,u))}};e?c():(k.Deferred.getStackHook&&(c.stackTrace=k.Deferred.getStackHook()),n.setTimeout(c))}}return k.Deferred(function(n){t[0][3].add(a(0,n,m(i)?i:I,n.notifyWith)),t[1][3].add(a(0,n,m(e)?e:I)),t[2][3].add(a(0,n,m(r)?r:F))}).promise()},promise:function(e){return null!=e?k.extend(e,i):i}},o={};return k.each(t,function(e,n){var a=n[2],s=n[5];i[n[1]]=a.add,s&&a.add(function(){r=s},t[3-e][2].disable,t[3-e][3].disable,t[0][2].lock,t[0][3].lock),a.add(n[3].fire),o[n[0]]=function(){return o[n[0]+"With"](this===o?void 0:this,arguments),this},o[n[0]+"With"]=a.fireWith}),i.promise(o),e&&e.call(o,o),o},when:function(e){var t=arguments.length,n=t,r=Array(n),i=u.call(arguments),o=k.Deferred(),a=function(e){return function(n){r[e]=this,i[e]=arguments.length>1?u.call(arguments):n,--t||o.resolveWith(r,i)}};if(t<=1&&(B(e,o.done(a(n)).resolve,o.reject,!t),"pending"===o.state()||m(i[n]&&i[n].then)))return o.then();for(;n--;)B(i[n],a(n),o.reject);return o.promise()}});var W=/^(Eval|Internal|Range|Reference|Syntax|Type|URI)Error$/;k.Deferred.exceptionHook=function(e,t){n.console&&n.console.warn&&e&&W.test(e.name)&&n.console.warn("jQuery.Deferred exception: "+e.message,e.stack,t)},k.readyException=function(e){n.setTimeout(function(){throw e})};var $=k.Deferred();function U(){a.removeEventListener("DOMContentLoaded",U),n.removeEventListener("load",U),k.ready()}k.fn.ready=function(e){return $.then(e).catch(function(e){k.readyException(e)}),this},k.extend({isReady:!1,readyWait:1,ready:function(e){(!0===e?--k.readyWait:k.isReady)||(k.isReady=!0,!0!==e&&--k.readyWait>0||$.resolveWith(a,[k]))}}),k.ready.then=$.then,"complete"===a.readyState||"loading"!==a.readyState&&!a.documentElement.doScroll?n.setTimeout(k.ready):(a.addEventListener("DOMContentLoaded",U),n.addEventListener("load",U));var V=function(e,t,n,r,i,o,a){var s=0,u=e.length,l=null==n;if("object"===T(n))for(s in i=!0,n)V(e,t,s,n[s],!0,o,a);else if(void 0!==r&&(i=!0,m(r)||(a=!0),l&&(a?(t.call(e,r),t=null):(l=t,t=function(e,t,n){return l.call(k(e),n)})),t))for(;s1,null,!0)},removeData:function(e){return this.each(function(){Z.remove(this,e)})}}),k.extend({queue:function(e,t,n){var r;if(e)return t=(t||"fx")+"queue",r=K.get(e,t),n&&(!r||Array.isArray(n)?r=K.access(e,t,k.makeArray(n)):r.push(n)),r||[]},dequeue:function(e,t){t=t||"fx";var n=k.queue(e,t),r=n.length,i=n.shift(),o=k._queueHooks(e,t);"inprogress"===i&&(i=n.shift(),r--),i&&("fx"===t&&n.unshift("inprogress"),delete o.stop,i.call(e,function(){k.dequeue(e,t)},o)),!r&&o&&o.empty.fire()},_queueHooks:function(e,t){var n=t+"queueHooks";return K.get(e,n)||K.access(e,n,{empty:k.Callbacks("once memory").add(function(){K.remove(e,[t+"queue",n])})})}}),k.fn.extend({queue:function(e,t){var n=2;return"string"!=typeof e&&(t=e,e="fx",n--),arguments.length\x20\t\r\n\f]+)/i,he=/^$|^module$|\/(?:java|ecma)script/i,ve={option:[1,""],thead:[1,"","
      "],col:[2,"","
      "],tr:[2,"","
      "],td:[3,"","
      "],_default:[0,"",""]};function ge(e,t){var n;return n=void 0!==e.getElementsByTagName?e.getElementsByTagName(t||"*"):void 0!==e.querySelectorAll?e.querySelectorAll(t||"*"):[],void 0===t||t&&N(e,t)?k.merge([e],n):n}function ye(e,t){for(var n=0,r=e.length;n-1)i&&i.push(o);else if(l=k.contains(o.ownerDocument,o),a=ge(f.appendChild(o),"script"),l&&ye(a),n)for(c=0;o=a[c++];)he.test(o.type||"")&&n.push(o);return f}me=a.createDocumentFragment().appendChild(a.createElement("div")),(be=a.createElement("input")).setAttribute("type","radio"),be.setAttribute("checked","checked"),be.setAttribute("name","t"),me.appendChild(be),y.checkClone=me.cloneNode(!0).cloneNode(!0).lastChild.checked,me.innerHTML="",y.noCloneChecked=!!me.cloneNode(!0).lastChild.defaultValue;var Te=a.documentElement,ke=/^key/,Ee=/^(?:mouse|pointer|contextmenu|drag|drop)|click/,Se=/^([^.]*)(?:\.(.+)|)/;function Ce(){return!0}function je(){return!1}function Ae(){try{return a.activeElement}catch(e){}}function Le(e,t,n,r,i,o){var a,s;if("object"==typeof t){for(s in"string"!=typeof n&&(r=r||n,n=void 0),t)Le(e,s,n,r,t[s],o);return e}if(null==r&&null==i?(i=n,r=n=void 0):null==i&&("string"==typeof n?(i=r,r=void 0):(i=r,r=n,n=void 0)),!1===i)i=je;else if(!i)return e;return 1===o&&(a=i,(i=function(e){return k().off(e),a.apply(this,arguments)}).guid=a.guid||(a.guid=k.guid++)),e.each(function(){k.event.add(this,t,i,r,n)})}k.event={global:{},add:function(e,t,n,r,i){var o,a,s,u,l,c,f,p,d,h,v,g=K.get(e);if(g)for(n.handler&&(n=(o=n).handler,i=o.selector),i&&k.find.matchesSelector(Te,i),n.guid||(n.guid=k.guid++),(u=g.events)||(u=g.events={}),(a=g.handle)||(a=g.handle=function(t){return void 0!==k&&k.event.triggered!==t.type?k.event.dispatch.apply(e,arguments):void 0}),l=(t=(t||"").match(R)||[""]).length;l--;)d=v=(s=Se.exec(t[l])||[])[1],h=(s[2]||"").split(".").sort(),d&&(f=k.event.special[d]||{},d=(i?f.delegateType:f.bindType)||d,f=k.event.special[d]||{},c=k.extend({type:d,origType:v,data:r,handler:n,guid:n.guid,selector:i,needsContext:i&&k.expr.match.needsContext.test(i),namespace:h.join(".")},o),(p=u[d])||((p=u[d]=[]).delegateCount=0,f.setup&&!1!==f.setup.call(e,r,h,a)||e.addEventListener&&e.addEventListener(d,a)),f.add&&(f.add.call(e,c),c.handler.guid||(c.handler.guid=n.guid)),i?p.splice(p.delegateCount++,0,c):p.push(c),k.event.global[d]=!0)},remove:function(e,t,n,r,i){var o,a,s,u,l,c,f,p,d,h,v,g=K.hasData(e)&&K.get(e);if(g&&(u=g.events)){for(l=(t=(t||"").match(R)||[""]).length;l--;)if(d=v=(s=Se.exec(t[l])||[])[1],h=(s[2]||"").split(".").sort(),d){for(f=k.event.special[d]||{},p=u[d=(r?f.delegateType:f.bindType)||d]||[],s=s[2]&&new RegExp("(^|\\.)"+h.join("\\.(?:.*\\.|)")+"(\\.|$)"),a=o=p.length;o--;)c=p[o],!i&&v!==c.origType||n&&n.guid!==c.guid||s&&!s.test(c.namespace)||r&&r!==c.selector&&("**"!==r||!c.selector)||(p.splice(o,1),c.selector&&p.delegateCount--,f.remove&&f.remove.call(e,c));a&&!p.length&&(f.teardown&&!1!==f.teardown.call(e,h,g.handle)||k.removeEvent(e,d,g.handle),delete u[d])}else for(d in u)k.event.remove(e,d+t[l],n,r,!0);k.isEmptyObject(u)&&K.remove(e,"handle events")}},dispatch:function(e){var t,n,r,i,o,a,s=k.event.fix(e),u=new Array(arguments.length),l=(K.get(this,"events")||{})[s.type]||[],c=k.event.special[s.type]||{};for(u[0]=s,t=1;t=1))for(;l!==this;l=l.parentNode||this)if(1===l.nodeType&&("click"!==e.type||!0!==l.disabled)){for(o=[],a={},n=0;n-1:k.find(i,this,null,[l]).length),a[i]&&o.push(r);o.length&&s.push({elem:l,handlers:o})}return l=this,u\x20\t\r\n\f]*)[^>]*)\/>/gi,De=/\s*$/g;function Pe(e,t){return N(e,"table")&&N(11!==t.nodeType?t:t.firstChild,"tr")&&k(e).children("tbody")[0]||e}function He(e){return e.type=(null!==e.getAttribute("type"))+"/"+e.type,e}function Me(e){return"true/"===(e.type||"").slice(0,5)?e.type=e.type.slice(5):e.removeAttribute("type"),e}function _e(e,t){var n,r,i,o,a,s,u,l;if(1===t.nodeType){if(K.hasData(e)&&(o=K.access(e),a=K.set(t,o),l=o.events))for(i in delete a.handle,a.events={},l)for(n=0,r=l[i].length;n1&&"string"==typeof h&&!y.checkClone&&Oe.test(h))return e.each(function(i){var o=e.eq(i);v&&(t[0]=h.call(this,i,o.html())),Re(o,t,n,r)});if(p&&(o=(i=we(t,e[0].ownerDocument,!1,e,r)).firstChild,1===i.childNodes.length&&(i=o),o||r)){for(s=(a=k.map(ge(i,"script"),He)).length;f")},clone:function(e,t,n){var r,i,o,a,s,u,l,c=e.cloneNode(!0),f=k.contains(e.ownerDocument,e);if(!(y.noCloneChecked||1!==e.nodeType&&11!==e.nodeType||k.isXMLDoc(e)))for(a=ge(c),r=0,i=(o=ge(e)).length;r0&&ye(a,!f&&ge(e,"script")),c},cleanData:function(e){for(var t,n,r,i=k.event.special,o=0;void 0!==(n=e[o]);o++)if(Y(n)){if(t=n[K.expando]){if(t.events)for(r in t.events)i[r]?k.event.remove(n,r):k.removeEvent(n,r,t.handle);n[K.expando]=void 0}n[Z.expando]&&(n[Z.expando]=void 0)}}}),k.fn.extend({detach:function(e){return Ie(this,e,!0)},remove:function(e){return Ie(this,e)},text:function(e){return V(this,function(e){return void 0===e?k.text(this):this.empty().each(function(){1!==this.nodeType&&11!==this.nodeType&&9!==this.nodeType||(this.textContent=e)})},null,e,arguments.length)},append:function(){return Re(this,arguments,function(e){1!==this.nodeType&&11!==this.nodeType&&9!==this.nodeType||Pe(this,e).appendChild(e)})},prepend:function(){return Re(this,arguments,function(e){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var t=Pe(this,e);t.insertBefore(e,t.firstChild)}})},before:function(){return Re(this,arguments,function(e){this.parentNode&&this.parentNode.insertBefore(e,this)})},after:function(){return Re(this,arguments,function(e){this.parentNode&&this.parentNode.insertBefore(e,this.nextSibling)})},empty:function(){for(var e,t=0;null!=(e=this[t]);t++)1===e.nodeType&&(k.cleanData(ge(e,!1)),e.textContent="");return this},clone:function(e,t){return e=null!=e&&e,t=null==t?e:t,this.map(function(){return k.clone(this,e,t)})},html:function(e){return V(this,function(e){var t=this[0]||{},n=0,r=this.length;if(void 0===e&&1===t.nodeType)return t.innerHTML;if("string"==typeof e&&!De.test(e)&&!ve[(de.exec(e)||["",""])[1].toLowerCase()]){e=k.htmlPrefilter(e);try{for(;n=0&&(u+=Math.max(0,Math.ceil(e["offset"+t[0].toUpperCase()+t.slice(1)]-o-u-s-.5))),u}function et(e,t,n){var r=Be(e),i=$e(e,t,r),o="border-box"===k.css(e,"boxSizing",!1,r),a=o;if(Fe.test(i)){if(!n)return i;i="auto"}return a=a&&(y.boxSizingReliable()||i===e.style[t]),("auto"===i||!parseFloat(i)&&"inline"===k.css(e,"display",!1,r))&&(i=e["offset"+t[0].toUpperCase()+t.slice(1)],a=!0),(i=parseFloat(i)||0)+Ze(e,t,n||(o?"border":"content"),a,r,i)+"px"}function tt(e,t,n,r,i){return new tt.prototype.init(e,t,n,r,i)}k.extend({cssHooks:{opacity:{get:function(e,t){if(t){var n=$e(e,"opacity");return""===n?"1":n}}}},cssNumber:{animationIterationCount:!0,columnCount:!0,fillOpacity:!0,flexGrow:!0,flexShrink:!0,fontWeight:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{},style:function(e,t,n,r){if(e&&3!==e.nodeType&&8!==e.nodeType&&e.style){var i,o,a,s=Q(t),u=ze.test(t),l=e.style;if(u||(t=Ge(s)),a=k.cssHooks[t]||k.cssHooks[s],void 0===n)return a&&"get"in a&&void 0!==(i=a.get(e,!1,r))?i:l[t];"string"===(o=typeof n)&&(i=ie.exec(n))&&i[1]&&(n=ue(e,t,i),o="number"),null!=n&&n==n&&("number"===o&&(n+=i&&i[3]||(k.cssNumber[s]?"":"px")),y.clearCloneStyle||""!==n||0!==t.indexOf("background")||(l[t]="inherit"),a&&"set"in a&&void 0===(n=a.set(e,n,r))||(u?l.setProperty(t,n):l[t]=n))}},css:function(e,t,n,r){var i,o,a,s=Q(t);return ze.test(t)||(t=Ge(s)),(a=k.cssHooks[t]||k.cssHooks[s])&&"get"in a&&(i=a.get(e,!0,n)),void 0===i&&(i=$e(e,t,r)),"normal"===i&&t in Je&&(i=Je[t]),""===n||n?(o=parseFloat(i),!0===n||isFinite(o)?o||0:i):i}}),k.each(["height","width"],function(e,t){k.cssHooks[t]={get:function(e,n,r){if(n)return!Ve.test(k.css(e,"display"))||e.getClientRects().length&&e.getBoundingClientRect().width?et(e,t,r):se(e,Xe,function(){return et(e,t,r)})},set:function(e,n,r){var i,o=Be(e),a="border-box"===k.css(e,"boxSizing",!1,o),s=r&&Ze(e,t,r,a,o);return a&&y.scrollboxSize()===o.position&&(s-=Math.ceil(e["offset"+t[0].toUpperCase()+t.slice(1)]-parseFloat(o[t])-Ze(e,t,"border",!1,o)-.5)),s&&(i=ie.exec(n))&&"px"!==(i[3]||"px")&&(e.style[t]=n,n=k.css(e,t)),Ke(0,n,s)}}}),k.cssHooks.marginLeft=Ue(y.reliableMarginLeft,function(e,t){if(t)return(parseFloat($e(e,"marginLeft"))||e.getBoundingClientRect().left-se(e,{marginLeft:0},function(){return e.getBoundingClientRect().left}))+"px"}),k.each({margin:"",padding:"",border:"Width"},function(e,t){k.cssHooks[e+t]={expand:function(n){for(var r=0,i={},o="string"==typeof n?n.split(" "):[n];r<4;r++)i[e+oe[r]+t]=o[r]||o[r-2]||o[0];return i}},"margin"!==e&&(k.cssHooks[e+t].set=Ke)}),k.fn.extend({css:function(e,t){return V(this,function(e,t,n){var r,i,o={},a=0;if(Array.isArray(t)){for(r=Be(e),i=t.length;a1)}}),k.Tween=tt,tt.prototype={constructor:tt,init:function(e,t,n,r,i,o){this.elem=e,this.prop=n,this.easing=i||k.easing._default,this.options=t,this.start=this.now=this.cur(),this.end=r,this.unit=o||(k.cssNumber[n]?"":"px")},cur:function(){var e=tt.propHooks[this.prop];return e&&e.get?e.get(this):tt.propHooks._default.get(this)},run:function(e){var t,n=tt.propHooks[this.prop];return this.options.duration?this.pos=t=k.easing[this.easing](e,this.options.duration*e,0,1,this.options.duration):this.pos=t=e,this.now=(this.end-this.start)*t+this.start,this.options.step&&this.options.step.call(this.elem,this.now,this),n&&n.set?n.set(this):tt.propHooks._default.set(this),this}},tt.prototype.init.prototype=tt.prototype,tt.propHooks={_default:{get:function(e){var t;return 1!==e.elem.nodeType||null!=e.elem[e.prop]&&null==e.elem.style[e.prop]?e.elem[e.prop]:(t=k.css(e.elem,e.prop,""))&&"auto"!==t?t:0},set:function(e){k.fx.step[e.prop]?k.fx.step[e.prop](e):1!==e.elem.nodeType||null==e.elem.style[k.cssProps[e.prop]]&&!k.cssHooks[e.prop]?e.elem[e.prop]=e.now:k.style(e.elem,e.prop,e.now+e.unit)}}},tt.propHooks.scrollTop=tt.propHooks.scrollLeft={set:function(e){e.elem.nodeType&&e.elem.parentNode&&(e.elem[e.prop]=e.now)}},k.easing={linear:function(e){return e},swing:function(e){return.5-Math.cos(e*Math.PI)/2},_default:"swing"},k.fx=tt.prototype.init,k.fx.step={};var nt,rt,it=/^(?:toggle|show|hide)$/,ot=/queueHooks$/;function at(){rt&&(!1===a.hidden&&n.requestAnimationFrame?n.requestAnimationFrame(at):n.setTimeout(at,k.fx.interval),k.fx.tick())}function st(){return n.setTimeout(function(){nt=void 0}),nt=Date.now()}function ut(e,t){var n,r=0,i={height:e};for(t=t?1:0;r<4;r+=2-t)i["margin"+(n=oe[r])]=i["padding"+n]=e;return t&&(i.opacity=i.width=e),i}function lt(e,t,n){for(var r,i=(ct.tweeners[t]||[]).concat(ct.tweeners["*"]),o=0,a=i.length;o1)},removeAttr:function(e){return this.each(function(){k.removeAttr(this,e)})}}),k.extend({attr:function(e,t,n){var r,i,o=e.nodeType;if(3!==o&&8!==o&&2!==o)return void 0===e.getAttribute?k.prop(e,t,n):(1===o&&k.isXMLDoc(e)||(i=k.attrHooks[t.toLowerCase()]||(k.expr.match.bool.test(t)?ft:void 0)),void 0!==n?null===n?void k.removeAttr(e,t):i&&"set"in i&&void 0!==(r=i.set(e,n,t))?r:(e.setAttribute(t,n+""),n):i&&"get"in i&&null!==(r=i.get(e,t))?r:null==(r=k.find.attr(e,t))?void 0:r)},attrHooks:{type:{set:function(e,t){if(!y.radioValue&&"radio"===t&&N(e,"input")){var n=e.value;return e.setAttribute("type",t),n&&(e.value=n),t}}}},removeAttr:function(e,t){var n,r=0,i=t&&t.match(R);if(i&&1===e.nodeType)for(;n=i[r++];)e.removeAttribute(n)}}),ft={set:function(e,t,n){return!1===t?k.removeAttr(e,n):e.setAttribute(n,n),n}},k.each(k.expr.match.bool.source.match(/\w+/g),function(e,t){var n=pt[t]||k.find.attr;pt[t]=function(e,t,r){var i,o,a=t.toLowerCase();return r||(o=pt[a],pt[a]=i,i=null!=n(e,t,r)?a:null,pt[a]=o),i}});var dt=/^(?:input|select|textarea|button)$/i,ht=/^(?:a|area)$/i;function vt(e){return(e.match(R)||[]).join(" ")}function gt(e){return e.getAttribute&&e.getAttribute("class")||""}function yt(e){return Array.isArray(e)?e:"string"==typeof e&&e.match(R)||[]}k.fn.extend({prop:function(e,t){return V(this,k.prop,e,t,arguments.length>1)},removeProp:function(e){return this.each(function(){delete this[k.propFix[e]||e]})}}),k.extend({prop:function(e,t,n){var r,i,o=e.nodeType;if(3!==o&&8!==o&&2!==o)return 1===o&&k.isXMLDoc(e)||(t=k.propFix[t]||t,i=k.propHooks[t]),void 0!==n?i&&"set"in i&&void 0!==(r=i.set(e,n,t))?r:e[t]=n:i&&"get"in i&&null!==(r=i.get(e,t))?r:e[t]},propHooks:{tabIndex:{get:function(e){var t=k.find.attr(e,"tabindex");return t?parseInt(t,10):dt.test(e.nodeName)||ht.test(e.nodeName)&&e.href?0:-1}}},propFix:{for:"htmlFor",class:"className"}}),y.optSelected||(k.propHooks.selected={get:function(e){var t=e.parentNode;return t&&t.parentNode&&t.parentNode.selectedIndex,null},set:function(e){var t=e.parentNode;t&&(t.selectedIndex,t.parentNode&&t.parentNode.selectedIndex)}}),k.each(["tabIndex","readOnly","maxLength","cellSpacing","cellPadding","rowSpan","colSpan","useMap","frameBorder","contentEditable"],function(){k.propFix[this.toLowerCase()]=this}),k.fn.extend({addClass:function(e){var t,n,r,i,o,a,s,u=0;if(m(e))return this.each(function(t){k(this).addClass(e.call(this,t,gt(this)))});if((t=yt(e)).length)for(;n=this[u++];)if(i=gt(n),r=1===n.nodeType&&" "+vt(i)+" "){for(a=0;o=t[a++];)r.indexOf(" "+o+" ")<0&&(r+=o+" ");i!==(s=vt(r))&&n.setAttribute("class",s)}return this},removeClass:function(e){var t,n,r,i,o,a,s,u=0;if(m(e))return this.each(function(t){k(this).removeClass(e.call(this,t,gt(this)))});if(!arguments.length)return this.attr("class","");if((t=yt(e)).length)for(;n=this[u++];)if(i=gt(n),r=1===n.nodeType&&" "+vt(i)+" "){for(a=0;o=t[a++];)for(;r.indexOf(" "+o+" ")>-1;)r=r.replace(" "+o+" "," ");i!==(s=vt(r))&&n.setAttribute("class",s)}return this},toggleClass:function(e,t){var n=typeof e,r="string"===n||Array.isArray(e);return"boolean"==typeof t&&r?t?this.addClass(e):this.removeClass(e):m(e)?this.each(function(n){k(this).toggleClass(e.call(this,n,gt(this),t),t)}):this.each(function(){var t,i,o,a;if(r)for(i=0,o=k(this),a=yt(e);t=a[i++];)o.hasClass(t)?o.removeClass(t):o.addClass(t);else void 0!==e&&"boolean"!==n||((t=gt(this))&&K.set(this,"__className__",t),this.setAttribute&&this.setAttribute("class",t||!1===e?"":K.get(this,"__className__")||""))})},hasClass:function(e){var t,n,r=0;for(t=" "+e+" ";n=this[r++];)if(1===n.nodeType&&(" "+vt(gt(n))+" ").indexOf(t)>-1)return!0;return!1}});var mt=/\r/g;k.fn.extend({val:function(e){var t,n,r,i=this[0];return arguments.length?(r=m(e),this.each(function(n){var i;1===this.nodeType&&(null==(i=r?e.call(this,n,k(this).val()):e)?i="":"number"==typeof i?i+="":Array.isArray(i)&&(i=k.map(i,function(e){return null==e?"":e+""})),(t=k.valHooks[this.type]||k.valHooks[this.nodeName.toLowerCase()])&&"set"in t&&void 0!==t.set(this,i,"value")||(this.value=i))})):i?(t=k.valHooks[i.type]||k.valHooks[i.nodeName.toLowerCase()])&&"get"in t&&void 0!==(n=t.get(i,"value"))?n:"string"==typeof(n=i.value)?n.replace(mt,""):null==n?"":n:void 0}}),k.extend({valHooks:{option:{get:function(e){var t=k.find.attr(e,"value");return null!=t?t:vt(k.text(e))}},select:{get:function(e){var t,n,r,i=e.options,o=e.selectedIndex,a="select-one"===e.type,s=a?null:[],u=a?o+1:i.length;for(r=o<0?u:a?o:0;r-1)&&(n=!0);return n||(e.selectedIndex=-1),o}}}}),k.each(["radio","checkbox"],function(){k.valHooks[this]={set:function(e,t){if(Array.isArray(t))return e.checked=k.inArray(k(e).val(),t)>-1}},y.checkOn||(k.valHooks[this].get=function(e){return null===e.getAttribute("value")?"on":e.value})}),y.focusin="onfocusin"in n;var bt=/^(?:focusinfocus|focusoutblur)$/,xt=function(e){e.stopPropagation()};k.extend(k.event,{trigger:function(e,t,r,i){var o,s,u,l,c,f,p,d,v=[r||a],g=h.call(e,"type")?e.type:e,y=h.call(e,"namespace")?e.namespace.split("."):[];if(s=d=u=r=r||a,3!==r.nodeType&&8!==r.nodeType&&!bt.test(g+k.event.triggered)&&(g.indexOf(".")>-1&&(g=(y=g.split(".")).shift(),y.sort()),c=g.indexOf(":")<0&&"on"+g,(e=e[k.expando]?e:new k.Event(g,"object"==typeof e&&e)).isTrigger=i?2:3,e.namespace=y.join("."),e.rnamespace=e.namespace?new RegExp("(^|\\.)"+y.join("\\.(?:.*\\.|)")+"(\\.|$)"):null,e.result=void 0,e.target||(e.target=r),t=null==t?[e]:k.makeArray(t,[e]),p=k.event.special[g]||{},i||!p.trigger||!1!==p.trigger.apply(r,t))){if(!i&&!p.noBubble&&!b(r)){for(l=p.delegateType||g,bt.test(l+g)||(s=s.parentNode);s;s=s.parentNode)v.push(s),u=s;u===(r.ownerDocument||a)&&v.push(u.defaultView||u.parentWindow||n)}for(o=0;(s=v[o++])&&!e.isPropagationStopped();)d=s,e.type=o>1?l:p.bindType||g,(f=(K.get(s,"events")||{})[e.type]&&K.get(s,"handle"))&&f.apply(s,t),(f=c&&s[c])&&f.apply&&Y(s)&&(e.result=f.apply(s,t),!1===e.result&&e.preventDefault());return e.type=g,i||e.isDefaultPrevented()||p._default&&!1!==p._default.apply(v.pop(),t)||!Y(r)||c&&m(r[g])&&!b(r)&&((u=r[c])&&(r[c]=null),k.event.triggered=g,e.isPropagationStopped()&&d.addEventListener(g,xt),r[g](),e.isPropagationStopped()&&d.removeEventListener(g,xt),k.event.triggered=void 0,u&&(r[c]=u)),e.result}},simulate:function(e,t,n){var r=k.extend(new k.Event,n,{type:e,isSimulated:!0});k.event.trigger(r,null,t)}}),k.fn.extend({trigger:function(e,t){return this.each(function(){k.event.trigger(e,t,this)})},triggerHandler:function(e,t){var n=this[0];if(n)return k.event.trigger(e,t,n,!0)}}),y.focusin||k.each({focus:"focusin",blur:"focusout"},function(e,t){var n=function(e){k.event.simulate(t,e.target,k.event.fix(e))};k.event.special[t]={setup:function(){var r=this.ownerDocument||this,i=K.access(r,t);i||r.addEventListener(e,n,!0),K.access(r,t,(i||0)+1)},teardown:function(){var r=this.ownerDocument||this,i=K.access(r,t)-1;i?K.access(r,t,i):(r.removeEventListener(e,n,!0),K.remove(r,t))}}});var wt=n.location,Tt=Date.now(),kt=/\?/;k.parseXML=function(e){var t;if(!e||"string"!=typeof e)return null;try{t=(new n.DOMParser).parseFromString(e,"text/xml")}catch(e){t=void 0}return t&&!t.getElementsByTagName("parsererror").length||k.error("Invalid XML: "+e),t};var Et=/\[\]$/,St=/\r?\n/g,Ct=/^(?:submit|button|image|reset|file)$/i,jt=/^(?:input|select|textarea|keygen)/i;function At(e,t,n,r){var i;if(Array.isArray(t))k.each(t,function(t,i){n||Et.test(e)?r(e,i):At(e+"["+("object"==typeof i&&null!=i?t:"")+"]",i,n,r)});else if(n||"object"!==T(t))r(e,t);else for(i in t)At(e+"["+i+"]",t[i],n,r)}k.param=function(e,t){var n,r=[],i=function(e,t){var n=m(t)?t():t;r[r.length]=encodeURIComponent(e)+"="+encodeURIComponent(null==n?"":n)};if(Array.isArray(e)||e.jquery&&!k.isPlainObject(e))k.each(e,function(){i(this.name,this.value)});else for(n in e)At(n,e[n],t,i);return r.join("&")},k.fn.extend({serialize:function(){return k.param(this.serializeArray())},serializeArray:function(){return this.map(function(){var e=k.prop(this,"elements");return e?k.makeArray(e):this}).filter(function(){var e=this.type;return this.name&&!k(this).is(":disabled")&&jt.test(this.nodeName)&&!Ct.test(e)&&(this.checked||!pe.test(e))}).map(function(e,t){var n=k(this).val();return null==n?null:Array.isArray(n)?k.map(n,function(e){return{name:t.name,value:e.replace(St,"\r\n")}}):{name:t.name,value:n.replace(St,"\r\n")}}).get()}});var Lt=/%20/g,Nt=/#.*$/,Dt=/([?&])_=[^&]*/,Ot=/^(.*?):[ \t]*([^\r\n]*)$/gm,qt=/^(?:GET|HEAD)$/,Pt=/^\/\//,Ht={},Mt={},_t="*/".concat("*"),Rt=a.createElement("a");function It(e){return function(t,n){"string"!=typeof t&&(n=t,t="*");var r,i=0,o=t.toLowerCase().match(R)||[];if(m(n))for(;r=o[i++];)"+"===r[0]?(r=r.slice(1)||"*",(e[r]=e[r]||[]).unshift(n)):(e[r]=e[r]||[]).push(n)}}function Ft(e,t,n,r){var i={},o=e===Mt;function a(s){var u;return i[s]=!0,k.each(e[s]||[],function(e,s){var l=s(t,n,r);return"string"!=typeof l||o||i[l]?o?!(u=l):void 0:(t.dataTypes.unshift(l),a(l),!1)}),u}return a(t.dataTypes[0])||!i["*"]&&a("*")}function Bt(e,t){var n,r,i=k.ajaxSettings.flatOptions||{};for(n in t)void 0!==t[n]&&((i[n]?e:r||(r={}))[n]=t[n]);return r&&k.extend(!0,e,r),e}Rt.href=wt.href,k.extend({active:0,lastModified:{},etag:{},ajaxSettings:{url:wt.href,type:"GET",isLocal:/^(?:about|app|app-storage|.+-extension|file|res|widget):$/.test(wt.protocol),global:!0,processData:!0,async:!0,contentType:"application/x-www-form-urlencoded; charset=UTF-8",accepts:{"*":_t,text:"text/plain",html:"text/html",xml:"application/xml, text/xml",json:"application/json, text/javascript"},contents:{xml:/\bxml\b/,html:/\bhtml/,json:/\bjson\b/},responseFields:{xml:"responseXML",text:"responseText",json:"responseJSON"},converters:{"* text":String,"text html":!0,"text json":JSON.parse,"text xml":k.parseXML},flatOptions:{url:!0,context:!0}},ajaxSetup:function(e,t){return t?Bt(Bt(e,k.ajaxSettings),t):Bt(k.ajaxSettings,e)},ajaxPrefilter:It(Ht),ajaxTransport:It(Mt),ajax:function(e,t){"object"==typeof e&&(t=e,e=void 0),t=t||{};var r,i,o,s,u,l,c,f,p,d,h=k.ajaxSetup({},t),v=h.context||h,g=h.context&&(v.nodeType||v.jquery)?k(v):k.event,y=k.Deferred(),m=k.Callbacks("once memory"),b=h.statusCode||{},x={},w={},T="canceled",E={readyState:0,getResponseHeader:function(e){var t;if(c){if(!s)for(s={};t=Ot.exec(o);)s[t[1].toLowerCase()]=t[2];t=s[e.toLowerCase()]}return null==t?null:t},getAllResponseHeaders:function(){return c?o:null},setRequestHeader:function(e,t){return null==c&&(e=w[e.toLowerCase()]=w[e.toLowerCase()]||e,x[e]=t),this},overrideMimeType:function(e){return null==c&&(h.mimeType=e),this},statusCode:function(e){var t;if(e)if(c)E.always(e[E.status]);else for(t in e)b[t]=[b[t],e[t]];return this},abort:function(e){var t=e||T;return r&&r.abort(t),S(0,t),this}};if(y.promise(E),h.url=((e||h.url||wt.href)+"").replace(Pt,wt.protocol+"//"),h.type=t.method||t.type||h.method||h.type,h.dataTypes=(h.dataType||"*").toLowerCase().match(R)||[""],null==h.crossDomain){l=a.createElement("a");try{l.href=h.url,l.href=l.href,h.crossDomain=Rt.protocol+"//"+Rt.host!=l.protocol+"//"+l.host}catch(e){h.crossDomain=!0}}if(h.data&&h.processData&&"string"!=typeof h.data&&(h.data=k.param(h.data,h.traditional)),Ft(Ht,h,t,E),c)return E;for(p in(f=k.event&&h.global)&&0==k.active++&&k.event.trigger("ajaxStart"),h.type=h.type.toUpperCase(),h.hasContent=!qt.test(h.type),i=h.url.replace(Nt,""),h.hasContent?h.data&&h.processData&&0===(h.contentType||"").indexOf("application/x-www-form-urlencoded")&&(h.data=h.data.replace(Lt,"+")):(d=h.url.slice(i.length),h.data&&(h.processData||"string"==typeof h.data)&&(i+=(kt.test(i)?"&":"?")+h.data,delete h.data),!1===h.cache&&(i=i.replace(Dt,"$1"),d=(kt.test(i)?"&":"?")+"_="+Tt+++d),h.url=i+d),h.ifModified&&(k.lastModified[i]&&E.setRequestHeader("If-Modified-Since",k.lastModified[i]),k.etag[i]&&E.setRequestHeader("If-None-Match",k.etag[i])),(h.data&&h.hasContent&&!1!==h.contentType||t.contentType)&&E.setRequestHeader("Content-Type",h.contentType),E.setRequestHeader("Accept",h.dataTypes[0]&&h.accepts[h.dataTypes[0]]?h.accepts[h.dataTypes[0]]+("*"!==h.dataTypes[0]?", "+_t+"; q=0.01":""):h.accepts["*"]),h.headers)E.setRequestHeader(p,h.headers[p]);if(h.beforeSend&&(!1===h.beforeSend.call(v,E,h)||c))return E.abort();if(T="abort",m.add(h.complete),E.done(h.success),E.fail(h.error),r=Ft(Mt,h,t,E)){if(E.readyState=1,f&&g.trigger("ajaxSend",[E,h]),c)return E;h.async&&h.timeout>0&&(u=n.setTimeout(function(){E.abort("timeout")},h.timeout));try{c=!1,r.send(x,S)}catch(e){if(c)throw e;S(-1,e)}}else S(-1,"No Transport");function S(e,t,a,s){var l,p,d,x,w,T=t;c||(c=!0,u&&n.clearTimeout(u),r=void 0,o=s||"",E.readyState=e>0?4:0,l=e>=200&&e<300||304===e,a&&(x=function(e,t,n){for(var r,i,o,a,s=e.contents,u=e.dataTypes;"*"===u[0];)u.shift(),void 0===r&&(r=e.mimeType||t.getResponseHeader("Content-Type"));if(r)for(i in s)if(s[i]&&s[i].test(r)){u.unshift(i);break}if(u[0]in n)o=u[0];else{for(i in n){if(!u[0]||e.converters[i+" "+u[0]]){o=i;break}a||(a=i)}o=o||a}if(o)return o!==u[0]&&u.unshift(o),n[o]}(h,E,a)),x=function(e,t,n,r){var i,o,a,s,u,l={},c=e.dataTypes.slice();if(c[1])for(a in e.converters)l[a.toLowerCase()]=e.converters[a];for(o=c.shift();o;)if(e.responseFields[o]&&(n[e.responseFields[o]]=t),!u&&r&&e.dataFilter&&(t=e.dataFilter(t,e.dataType)),u=o,o=c.shift())if("*"===o)o=u;else if("*"!==u&&u!==o){if(!(a=l[u+" "+o]||l["* "+o]))for(i in l)if((s=i.split(" "))[1]===o&&(a=l[u+" "+s[0]]||l["* "+s[0]])){!0===a?a=l[i]:!0!==l[i]&&(o=s[0],c.unshift(s[1]));break}if(!0!==a)if(a&&e.throws)t=a(t);else try{t=a(t)}catch(e){return{state:"parsererror",error:a?e:"No conversion from "+u+" to "+o}}}return{state:"success",data:t}}(h,x,E,l),l?(h.ifModified&&((w=E.getResponseHeader("Last-Modified"))&&(k.lastModified[i]=w),(w=E.getResponseHeader("etag"))&&(k.etag[i]=w)),204===e||"HEAD"===h.type?T="nocontent":304===e?T="notmodified":(T=x.state,p=x.data,l=!(d=x.error))):(d=T,!e&&T||(T="error",e<0&&(e=0))),E.status=e,E.statusText=(t||T)+"",l?y.resolveWith(v,[p,T,E]):y.rejectWith(v,[E,T,d]),E.statusCode(b),b=void 0,f&&g.trigger(l?"ajaxSuccess":"ajaxError",[E,h,l?p:d]),m.fireWith(v,[E,T]),f&&(g.trigger("ajaxComplete",[E,h]),--k.active||k.event.trigger("ajaxStop")))}return E},getJSON:function(e,t,n){return k.get(e,t,n,"json")},getScript:function(e,t){return k.get(e,void 0,t,"script")}}),k.each(["get","post"],function(e,t){k[t]=function(e,n,r,i){return m(n)&&(i=i||r,r=n,n=void 0),k.ajax(k.extend({url:e,type:t,dataType:i,data:n,success:r},k.isPlainObject(e)&&e))}}),k._evalUrl=function(e){return k.ajax({url:e,type:"GET",dataType:"script",cache:!0,async:!1,global:!1,throws:!0})},k.fn.extend({wrapAll:function(e){var t;return this[0]&&(m(e)&&(e=e.call(this[0])),t=k(e,this[0].ownerDocument).eq(0).clone(!0),this[0].parentNode&&t.insertBefore(this[0]),t.map(function(){for(var e=this;e.firstElementChild;)e=e.firstElementChild;return e}).append(this)),this},wrapInner:function(e){return m(e)?this.each(function(t){k(this).wrapInner(e.call(this,t))}):this.each(function(){var t=k(this),n=t.contents();n.length?n.wrapAll(e):t.append(e)})},wrap:function(e){var t=m(e);return this.each(function(n){k(this).wrapAll(t?e.call(this,n):e)})},unwrap:function(e){return this.parent(e).not("body").each(function(){k(this).replaceWith(this.childNodes)}),this}}),k.expr.pseudos.hidden=function(e){return!k.expr.pseudos.visible(e)},k.expr.pseudos.visible=function(e){return!!(e.offsetWidth||e.offsetHeight||e.getClientRects().length)},k.ajaxSettings.xhr=function(){try{return new n.XMLHttpRequest}catch(e){}};var Wt={0:200,1223:204},$t=k.ajaxSettings.xhr();y.cors=!!$t&&"withCredentials"in $t,y.ajax=$t=!!$t,k.ajaxTransport(function(e){var t,r;if(y.cors||$t&&!e.crossDomain)return{send:function(i,o){var a,s=e.xhr();if(s.open(e.type,e.url,e.async,e.username,e.password),e.xhrFields)for(a in e.xhrFields)s[a]=e.xhrFields[a];for(a in e.mimeType&&s.overrideMimeType&&s.overrideMimeType(e.mimeType),e.crossDomain||i["X-Requested-With"]||(i["X-Requested-With"]="XMLHttpRequest"),i)s.setRequestHeader(a,i[a]);t=function(e){return function(){t&&(t=r=s.onload=s.onerror=s.onabort=s.ontimeout=s.onreadystatechange=null,"abort"===e?s.abort():"error"===e?"number"!=typeof s.status?o(0,"error"):o(s.status,s.statusText):o(Wt[s.status]||s.status,s.statusText,"text"!==(s.responseType||"text")||"string"!=typeof s.responseText?{binary:s.response}:{text:s.responseText},s.getAllResponseHeaders()))}},s.onload=t(),r=s.onerror=s.ontimeout=t("error"),void 0!==s.onabort?s.onabort=r:s.onreadystatechange=function(){4===s.readyState&&n.setTimeout(function(){t&&r()})},t=t("abort");try{s.send(e.hasContent&&e.data||null)}catch(e){if(t)throw e}},abort:function(){t&&t()}}}),k.ajaxPrefilter(function(e){e.crossDomain&&(e.contents.script=!1)}),k.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/\b(?:java|ecma)script\b/},converters:{"text script":function(e){return k.globalEval(e),e}}}),k.ajaxPrefilter("script",function(e){void 0===e.cache&&(e.cache=!1),e.crossDomain&&(e.type="GET")}),k.ajaxTransport("script",function(e){var t,n;if(e.crossDomain)return{send:function(r,i){t=k("
      \ No newline at end of file diff --git a/packages/uikit-workshop/dist/styleguide/css/pattern-lab.97fc8203.css b/packages/uikit-workshop/dist/styleguide/css/pattern-lab.97fc8203.css deleted file mode 100644 index cabcfef64..000000000 --- a/packages/uikit-workshop/dist/styleguide/css/pattern-lab.97fc8203.css +++ /dev/null @@ -1 +0,0 @@ -.pl-c-header .pl-c-typeahead:focus{background:grey;color:#fff}.pl-c-header .twitter-typeahead{display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;width:100%}.pl-c-header .tt-input{background:grey;color:#fff}.pl-c-header .tt-input:hover{color:#fff;background:#222!important}.pl-c-header .tt-input:hover::-webkit-input-placeholder{color:#fff}.pl-c-header .tt-input:hover::-moz-input-placeholder{color:#fff}.pl-c-header .tt-input:focus{border-radius:0;text-transform:lowercase;color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-header .tt-hint{text-transform:lowercase}.pl-c-header .tt-dropdown-menu{text-transform:lowercase;background-color:grey;width:100%;border-bottom-right-radius:6px;border-bottom-left-radius:6px}.pl-c-header .tt-suggestion{color:#eee;padding:.8em}.pl-c-header .tt-suggestion.tt-cursor{color:#fff;background:rgba(255,255,255,.25)}.pl-c-header .tt-suggestion p{margin:0}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;-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:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#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:#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: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-c-header__nav-toggle{background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out;border:0}.pl-c-header__nav-toggle:hover{color:#fff;background:#222}.pl-c-header__nav-toggle.active,.pl-c-header__nav-toggle:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-header__nav-toggle{background:#fff;color:#4d4c4c}.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}.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}@media all and (max-width:42em){.pl-c-nav{position:absolute;top:100%;width:100%;overflow:hidden;max-height:0;background:#000;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-transition:max-height .1s ease-out;transition:max-height .1s ease-out}.pl-c-nav.pl-is-active{max-height:50rem;height:calc(100vh - 2rem);overflow:auto;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-nav.pl-is-active::-webkit-scrollbar{width:0!important}}.pl-c-nav__item{cursor:pointer;position:relative}@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{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out}.pl-c-nav__link:hover{color:#fff;background:#222}.pl-c-nav__link.active,.pl-c-nav__link:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-nav__link{background:#fff;color:#4d4c4c}.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-nav__link--sublink{text-transform:none;padding-left:1rem}.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:#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{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;overflow:hidden;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}.pl-c-nav__sublist--dropdown.pl-is-active,.pl-c-nav__subsublist--dropdown.pl-is-active{max-height:none;overflow:auto;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-nav__sublist--dropdown.pl-is-active::-webkit-scrollbar,.pl-c-nav__subsublist--dropdown.pl-is-active::-webkit-scrollbar{width:0!important}@media all and (min-width:42em){.pl-c-nav__sublist--dropdown.pl-is-active,.pl-c-nav__subsublist--dropdown.pl-is-active{max-height:120rem}}@media all and (min-width:42em){.pl-c-nav__sublist--dropdown.pl-is-active{height:calc(100vh - 2rem)}}.pl-c-nav__subsublist{list-style:none;margin:0;padding:0}.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:0 0;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:#222}.pl-c-viewport-size__input:active,.pl-c-viewport-size__input:focus{color:#fff;background:#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}@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:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out}.pl-c-size-list__action:hover{color:#fff;background:#222}.pl-c-size-list__action.active,.pl-c-size-list__action:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-size-list__action{background:#fff;color:#4d4c4c}.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-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-c-tools{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex}.pl-c-tools__toggle{background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out;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:#222}.pl-c-tools__toggle.active,.pl-c-tools__toggle:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-tools__toggle{background:#fff;color:#4d4c4c}.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{position:absolute}.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:1;width:10rem;border-bottom-left-radius:6px;border-bottom-right-radius:6px}.pl-c-tools__list.pl-is-active{max-height:none;overflow:auto;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-tools__list.pl-is-active::-webkit-scrollbar{width:0!important}@media all and (min-width:42em){.pl-c-tools__list.pl-is-active{max-height:120rem}}.pl-c-tools__action{background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out;display:block;width:100%;margin:0}.pl-c-tools__action:hover{color:#fff;background:#222}.pl-c-tools__action.active,.pl-c-tools__action:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-tools__action{background:#fff;color:#4d4c4c}.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-viewport__cover{width:100%;height:100%;display:none;position:absolute;z-index:20;cursor:move}.pl-c-viewport__iframe-wrapper.hay-mode{-webkit-transition:all 40s linear;transition:all 40s linear}.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:#ccc;-webkit-transition:background .1s ease-out;transition:background .1s ease-out}.pl-c-viewport__resizer-handle:hover{background:grey}.pl-c-viewport__resizer-handle:active{cursor:move;background:#4d4c4c}.vp-animate{-webkit-transition:width .8s ease-out;transition:width .8s ease-out}.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:0 0;font-weight:400;border:1px solid #ddd;border-top-left-radius:6px;border-top-right-radius:6px;-webkit-transition:background .1s ease-out;transition:background .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:#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:#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-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}@media all and (min-width:53em){.pl-c-pattern-info{display:-webkit-box;display:-ms-flexbox;display:flex}}.pl-c-pattern .pl-c-pattern-info{max-height:20rem;overflow:scroll;-ms-overflow-style:-ms-autohiding-scrollbar}.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;height:18rem;overflow:visible}}.pl-c-modal .pl-c-pattern-info{position:absolute;top:0;right:0;bottom:0;left:0;overflow:scroll;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-modal .pl-c-pattern-info::-webkit-scrollbar{width:0!important}@media all and (min-width:53em){.pl-c-modal .pl-c-pattern-info{position:static;overflow:visible}}.pl-c-pattern-info__panel{padding:1rem}@media all and (min-width:53em){.pl-c-pattern-info__panel{-webkit-box-flex:1;-ms-flex:auto;flex:auto;position:absolute;top:0;bottom:0;left:0;right:0}}@media all and (min-width:62em){.pl-c-modal .pl-c-pattern-info__panel{padding-left:2rem}}.pl-c-pattern-info__panel--info{padding-top:2rem}@media all and (min-width:53em){.pl-c-pattern-info__panel--info{left:0;right:50%;overflow:scroll;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-pattern-info__panel--info::-webkit-scrollbar{width:0!important}}@media all and (min-width:62em){.pl-c-pattern-info__panel--info{right:55%}}@media all and (min-width:53em){.pl-c-pattern-info__panel--info+.pl-c-pattern-info__panel--code{right:0;left:50%;top:1.2rem}}@media all and (min-width:62em){.pl-c-pattern-info__panel--info+.pl-c-pattern-info__panel--code{left:45%}}.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-pattern-state{display:inline-block;width:5px;height:5px;margin-left:10px;position:relative;top:5px;left:0;border-radius:50%;background:#02a4d5;line-height:4px;text-indent:10px}.pl-c-pattern-state--complete{background:#03790f}.pl-c-pattern-state--inreview{background:#c7a118}.pl-c-pattern-state--deprecated{background:#b00b02}.complete:before{color:#03790f!important}.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-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-tabs{padding:0 .5rem .5rem;background:#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}@media all and (min-width:53em){.pl-c-pattern-info__panel--code .pl-c-tabs{position:absolute;top:1rem;bottom:1rem;left:1rem;right:1rem}}@media all and (min-width:62em){.pl-c-modal .pl-c-tabs{right:2rem;left:2rem}}.pl-c-tabs__list{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;list-style:none;margin:0;padding:.5rem 0;background:#fff}.pl-c-tabs__link{display:block;line-height:1;padding:.2rem .4rem;border:1px solid transparent;border-radius:6px;background:#fff;color:grey;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:#eee;border:1px solid #ddd}.pl-c-tabs__content{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;overflow:scroll;-ms-overflow-style:-ms-autohiding-scrollbar;height:100%;padding-top:.5rem}.pl-c-tabs__content::-webkit-scrollbar{width:0!important}.pl-c-modal .pl-c-tabs__content{border:0}.pl-c-tabs__panel{display:none;min-height:12rem}.pl-c-tabs__panel.pl-is-active-tab{display:block}.pl-c-tabs__panel :not(pre)>code[class*=language-],.pl-c-tabs__panel pre[class*=language-]{background:0 0;margin:0;padding:0;border:0;display:block}.pl-c-tabs__panel code[class*=language-]{background:0 0;margin:0}.pl-c-tools{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex}.pl-c-tools__toggle{background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out;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:#222}.pl-c-tools__toggle.active,.pl-c-tools__toggle:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-tools__toggle{background:#fff;color:#4d4c4c}.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{position:absolute}.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:1;width:10rem;border-bottom-left-radius:6px;border-bottom-right-radius:6px}.pl-c-tools__list.pl-is-active{max-height:none;overflow:auto;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-tools__list.pl-is-active::-webkit-scrollbar{width:0!important}@media all and (min-width:42em){.pl-c-tools__list.pl-is-active{max-height:120rem}}.pl-c-tools__action{background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out;display:block;width:100%;margin:0}.pl-c-tools__action:hover{color:#fff;background:#222}.pl-c-tools__action.active,.pl-c-tools__action:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-tools__action{background:#fff;color:#4d4c4c}.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-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:#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 .1s ease;transition:background .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: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-modal{display:none;font-family:HelveticaNeue,Helvetica,Arial,sans-serif;background:#000;color:#ccc;position:relative;top:auto;bottom:0;left:0;z-index:5;width:100%;height:50%;-webkit-transition:bottom .3s ease-out;transition:bottom .3s ease-out}.pl-c-modal.pl-is-active{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;bottom:0}.pl-c-modal__close-btn{font-size:70%;background:#000;color:grey;border:0;border-radius:6px 6px 0 0;display:inline-block;padding:.5rem .5rem .3rem;margin:0;text-decoration:none;cursor:pointer;z-index:2;-webkit-transition:all .1s ease-out;transition:all .1s ease-out}.pl-c-modal__close-btn:focus,.pl-c-modal__close-btn:hover{background:#222;color:#fff}.pl-c-modal__close-btn:active,.pl-c-modal__close-btn:focus{outline:1px dotted grey;outline-offset:-2px}.pl-c-modal.pl-is-active .pl-c-modal__close-btn{bottom:100%}.pl-c-modal__cover{width:100%;height:100%;display:none;position:absolute;z-index:20;cursor:move}.pl-c-modal__resizer{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;left:0;height:14px;width:100%;background:#000;z-index:2;cursor:ns-resize}.pl-c-modal__resizer:after{content:'';height:3px;width:50px;border-top:1px solid grey;border-bottom:1px solid grey;-webkit-transition:border-color .1s ease-out;transition:border-color .1s ease-out}.pl-c-modal__resizer:focus:after,.pl-c-modal__resizer:hover:after{border-color:#fff}.pl-c-modal__close-btn-icon{width:12px;height:12px;color:currentColor;fill:currentColor;-webkit-transition:fill .1s ease-out;transition:fill .1s ease-out}.pl-c-code-copy-btn{display:inline-block;position:absolute;top:.5rem;right:.5rem;padding:.2rem .4rem;background:#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 .1s ease-out;transition:background .1s ease-out}.pl-c-code-copy-btn:focus,.pl-c-code-copy-btn:hover{background:#ccc}.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: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-body--theme-light .pl-c-header{background:#fff;border-bottom:1px solid #ccc}.pl-c-body--theme-light .pl-c-nav__sublist{background:0 0}.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 .pl-c-nav__link--dropdown{color:#4d4c4c;background:#fff}.pl-c-body--theme-light .pl-c-nav__link--dropdown:after{color:#ccc}.pl-c-body--theme-light .pl-c-nav__sublist .pl-c-nav__link{border-left:1px solid #ccc;border-right:1px solid #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;border-bottom:1px solid #ccc}}.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:#ddd}.pl-c-body--theme-light .typeahead{background:#ddd!important}.pl-c-body--theme-light .pl-c-typeahead{background:#ddd!important;color:#4d4c4c!important}.pl-c-body--theme-light .tt-input{background:#eee!important;color:#4d4c4c!important}.pl-c-body--theme-light .tt-input:hover{color:#222;background:#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-modal{background:#fff;color:#4d4c4c;border-top:1px solid #ccc}.pl-c-body--theme-light .pl-c-modal__close-btn{background:#fff;border-top:1px solid #ccc;border-left:1px solid #ccc}.pl-c-body--theme-light .pl-c-modal__close-btn:focus,.pl-c-body--theme-light .pl-c-modal__close-btn:hover{background:#fafafa;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:48em){.pl-c-body--theme-sidebar .pl-c-header{width:14rem;height:100vh;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;border-bottom:0;padding:1rem;overflow:auto;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-body--theme-sidebar .pl-c-header::-webkit-scrollbar{width:0!important}.pl-c-body--theme-sidebar.pl-c-body--theme-light .pl-c-header{border-right:1px solid #ccc}.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__link{font-size:.85rem;padding-left:0;padding-right:0}.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}}@media all and (min-width:48em) and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-nav__sublist--dropdown.pl-is-active{height:auto}}@media all and (min-width:48em){.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:48em) 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:48em){.pl-c-body--theme-sidebar .pl-c-controls{margin-top:auto;margin-left:0;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.pl-c-body--theme-sidebar .pl-c-size-list{display:none}.pl-c-body--theme-sidebar .pl-c-viewport-size{display:none}.pl-c-body--theme-sidebar .pl-c-typeahead{border-radius:6px}.pl-c-body--theme-sidebar .pl-c-header .twitter-typeahead{display:block!important;margin-bottom:.5rem}.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-tools__action{padding-left:0;padding-right:0}.pl-c-body--theme-sidebar .pl-c-viewport__iframe-wrapper{width:100%!important}.pl-c-body--theme-sidebar .pl-c-viewport__iframe{width:100%!important}.pl-c-body--theme-sidebar .pl-c-modal{left:14rem;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 55c17b4be..f2f3906b2 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}.pl-c-body{margin:0;padding:0;background:#ddd;-webkit-text-size-adjust:100%}.pl-c-header .pl-c-typeahead{border:0;background:#222!important;color:grey;width:100%;right:0;padding:.61rem .5rem;font-size:inherit}.pl-c-header .pl-c-typeahead:focus{background:grey;color:#fff}.pl-c-header .twitter-typeahead{display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;width:100%}.pl-c-header .tt-input{background:grey;color:#fff}.pl-c-header .tt-input:hover{color:#fff;background:#222!important}.pl-c-header .tt-input:hover::-webkit-input-placeholder{color:#fff}.pl-c-header .tt-input:hover::-moz-input-placeholder{color:#fff}.pl-c-header .tt-input:focus{border-radius:0;text-transform:lowercase;color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-header .tt-hint{text-transform:lowercase}.pl-c-header .tt-dropdown-menu{text-transform:lowercase;background-color:grey;width:100%;border-bottom-right-radius:6px;border-bottom-left-radius:6px}.pl-c-header .tt-suggestion{color:#eee;padding:.8em}.pl-c-header .tt-suggestion.tt-cursor{color:#fff;background:rgba(255,255,255,.25)}.pl-c-header .tt-suggestion p{margin:0}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;-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:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#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:#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: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-c-header{position:fixed;top:0;left:0;z-index:4;display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;background:#000;color:grey;font-family:HelveticaNeue,Helvetica,Arial,sans-serif;font-size:.7rem}.pl-c-header__nav-toggle{background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out;border:0}.pl-c-header__nav-toggle:hover{color:#fff;background:#222}.pl-c-header__nav-toggle.active,.pl-c-header__nav-toggle:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-header__nav-toggle{background:#fff;color:#4d4c4c}.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-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}@media all and (max-width:42em){.pl-c-nav{position:absolute;top:100%;width:100%;overflow:hidden;max-height:0;background:#000;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-transition:max-height .1s ease-out;transition:max-height .1s ease-out}.pl-c-nav.pl-is-active{max-height:50rem;height:calc(100vh - 2rem);overflow:auto;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-nav.pl-is-active::-webkit-scrollbar{width:0!important}}@media all and (min-width:42em){.pl-c-nav{display:-webkit-box;display:-ms-flexbox;display:flex}}.pl-c-nav__list{z-index:1;margin:0;padding:0;list-style:none}@media all and (max-width:42em){.pl-c-nav__list{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}}@media all and (min-width:42em){.pl-c-nav__list{display:-webkit-box;display:-ms-flexbox;display:flex}}.pl-c-nav__item{cursor:pointer;position:relative}@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{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out}.pl-c-nav__link:hover{color:#fff;background:#222}.pl-c-nav__link.active,.pl-c-nav__link:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-nav__link{background:#fff;color:#4d4c4c}.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-nav__link--sublink{text-transform:none;padding-left:1rem}.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:#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{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;overflow:hidden;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}.pl-c-nav__sublist--dropdown.pl-is-active,.pl-c-nav__subsublist--dropdown.pl-is-active{max-height:none;overflow:auto;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-nav__sublist--dropdown.pl-is-active::-webkit-scrollbar,.pl-c-nav__subsublist--dropdown.pl-is-active::-webkit-scrollbar{width:0!important}@media all and (min-width:42em){.pl-c-nav__sublist--dropdown.pl-is-active,.pl-c-nav__subsublist--dropdown.pl-is-active{max-height:120rem}}@media all and (min-width:42em){.pl-c-nav__sublist--dropdown.pl-is-active{height:calc(100vh - 2rem)}}.pl-c-nav__subsublist{list-style:none;margin:0;padding:0}.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:0 0;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:#222}.pl-c-viewport-size__input:active,.pl-c-viewport-size__input:focus{color:#fff;background:#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}@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:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out}.pl-c-size-list__action:hover{color:#fff;background:#222}.pl-c-size-list__action.active,.pl-c-size-list__action:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-size-list__action{background:#fff;color:#4d4c4c}.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-controls{margin-left:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.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-c-tools{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex}.pl-c-tools__toggle{background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out;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:#222}.pl-c-tools__toggle.active,.pl-c-tools__toggle:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-tools__toggle{background:#fff;color:#4d4c4c}.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{position:absolute}.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:1;width:10rem;border-bottom-left-radius:6px;border-bottom-right-radius:6px}.pl-c-tools__list.pl-is-active{max-height:none;overflow:auto;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-tools__list.pl-is-active::-webkit-scrollbar{width:0!important}@media all and (min-width:42em){.pl-c-tools__list.pl-is-active{max-height:120rem}}.pl-c-tools__action{background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out;display:block;width:100%;margin:0}.pl-c-tools__action:hover{color:#fff;background:#222}.pl-c-tools__action.active,.pl-c-tools__action:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-tools__action{background:#fff;color:#4d4c4c}.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-viewport{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:100vh;width:100%;position:relative;top:2rem;bottom:0;left:0;right:0;z-index:0;overflow:hidden}.pl-c-viewport__cover{width:100%;height:100%;display:none;position:absolute;z-index:20;cursor:move}.pl-c-viewport__iframe-wrapper{height:100%;width:100%;position:relative;margin:0 auto;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-overflow-scrolling:touch;overflow-y:auto;overflow-x:hidden;width:100%}.pl-c-viewport__iframe-wrapper.hay-mode{-webkit-transition:all 40s linear;transition:all 40s linear}.pl-c-viewport__iframe{position:absolute;height:100%;width:100%;border:0;padding:0;margin:0;top:0;bottom:0;left:0;right:0;background-color:#fff}.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:#ccc;-webkit-transition:background .1s ease-out;transition:background .1s ease-out}.pl-c-viewport__resizer-handle:hover{background:grey}.pl-c-viewport__resizer-handle:active{cursor:move;background:#4d4c4c}.vp-animate{-webkit-transition:width .8s ease-out;transition:width .8s ease-out}.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:0 0;font-weight:400;border:1px solid #ddd;border-top-left-radius:6px;border-top-right-radius:6px;-webkit-transition:background .1s ease-out;transition:background .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:#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:#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-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}@media all and (min-width:53em){.pl-c-pattern-info{display:-webkit-box;display:-ms-flexbox;display:flex}}.pl-c-pattern .pl-c-pattern-info{max-height:20rem;overflow:scroll;-ms-overflow-style:-ms-autohiding-scrollbar}.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;height:18rem;overflow:visible}}.pl-c-modal .pl-c-pattern-info{position:absolute;top:0;right:0;bottom:0;left:0;overflow:scroll;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-modal .pl-c-pattern-info::-webkit-scrollbar{width:0!important}@media all and (min-width:53em){.pl-c-modal .pl-c-pattern-info{position:static;overflow:visible}}.pl-c-pattern-info__panel{padding:1rem}@media all and (min-width:53em){.pl-c-pattern-info__panel{-webkit-box-flex:1;-ms-flex:auto;flex:auto;position:absolute;top:0;bottom:0;left:0;right:0}}@media all and (min-width:62em){.pl-c-modal .pl-c-pattern-info__panel{padding-left:2rem}}.pl-c-pattern-info__panel--info{padding-top:2rem}@media all and (min-width:53em){.pl-c-pattern-info__panel--info{left:0;right:50%;overflow:scroll;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-pattern-info__panel--info::-webkit-scrollbar{width:0!important}}@media all and (min-width:62em){.pl-c-pattern-info__panel--info{right:55%}}@media all and (min-width:53em){.pl-c-pattern-info__panel--info+.pl-c-pattern-info__panel--code{right:0;left:50%;top:1.2rem}}@media all and (min-width:62em){.pl-c-pattern-info__panel--info+.pl-c-pattern-info__panel--code{left:45%}}.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-pattern-state{display:inline-block;width:5px;height:5px;margin-left:10px;position:relative;top:5px;left:0;border-radius:50%;background:#02a4d5;line-height:4px;text-indent:10px}.pl-c-pattern-state--complete{background:#03790f}.pl-c-pattern-state--inreview{background:#c7a118}.pl-c-pattern-state--deprecated{background:#b00b02}.complete:before{color:#03790f!important}.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-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-tabs{padding:0 .5rem .5rem;background:#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}@media all and (min-width:53em){.pl-c-pattern-info__panel--code .pl-c-tabs{position:absolute;top:1rem;bottom:1rem;left:1rem;right:1rem}}@media all and (min-width:62em){.pl-c-modal .pl-c-tabs{right:2rem;left:2rem}}.pl-c-tabs__list{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;list-style:none;margin:0;padding:.5rem 0;background:#fff}.pl-c-tabs__link{display:block;line-height:1;padding:.2rem .4rem;border:1px solid transparent;border-radius:6px;background:#fff;color:grey;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:#eee;border:1px solid #ddd}.pl-c-tabs__content{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;overflow:scroll;-ms-overflow-style:-ms-autohiding-scrollbar;height:100%;padding-top:.5rem}.pl-c-tabs__content::-webkit-scrollbar{width:0!important}.pl-c-modal .pl-c-tabs__content{border:0}.pl-c-tabs__panel{display:none;min-height:12rem}.pl-c-tabs__panel.pl-is-active-tab{display:block}.pl-c-tabs__panel :not(pre)>code[class*=language-],.pl-c-tabs__panel pre[class*=language-]{background:0 0;margin:0;padding:0;border:0;display:block}.pl-c-tabs__panel code[class*=language-]{background:0 0;margin:0}.pl-c-tools{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex}.pl-c-tools__toggle{background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out;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:#222}.pl-c-tools__toggle.active,.pl-c-tools__toggle:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-tools__toggle{background:#fff;color:#4d4c4c}.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{position:absolute}.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:1;width:10rem;border-bottom-left-radius:6px;border-bottom-right-radius:6px}.pl-c-tools__list.pl-is-active{max-height:none;overflow:auto;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-tools__list.pl-is-active::-webkit-scrollbar{width:0!important}@media all and (min-width:42em){.pl-c-tools__list.pl-is-active{max-height:120rem}}.pl-c-tools__action{background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out;display:block;width:100%;margin:0}.pl-c-tools__action:hover{color:#fff;background:#222}.pl-c-tools__action.active,.pl-c-tools__action:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-tools__action{background:#fff;color:#4d4c4c}.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-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:#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 .1s ease;transition:background .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: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-modal{display:none;font-family:HelveticaNeue,Helvetica,Arial,sans-serif;background:#000;color:#ccc;position:relative;top:auto;bottom:0;left:0;z-index:5;width:100%;height:50%;-webkit-transition:bottom .3s ease-out;transition:bottom .3s ease-out}.pl-c-modal.pl-is-active{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;bottom:0}.pl-c-modal__toolbar{display:-webkit-box;display:-ms-flexbox;display:flex}.pl-c-modal__close-btn{font-size:70%;background:#000;color:grey;border:0;border-radius:6px 6px 0 0;display:inline-block;padding:.5rem .5rem .3rem;margin:0;text-decoration:none;cursor:pointer;z-index:2;-webkit-transition:all .1s ease-out;transition:all .1s ease-out}.pl-c-modal__close-btn:focus,.pl-c-modal__close-btn:hover{background:#222;color:#fff}.pl-c-modal__close-btn:active,.pl-c-modal__close-btn:focus{outline:1px dotted grey;outline-offset:-2px}.pl-c-modal.pl-is-active .pl-c-modal__close-btn{bottom:100%}.pl-c-modal__cover{width:100%;height:100%;display:none;position:absolute;z-index:20;cursor:move}.pl-c-modal__resizer{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;left:0;height:14px;width:100%;background:#000;z-index:2;cursor:ns-resize}.pl-c-modal__resizer:after{content:'';height:3px;width:50px;border-top:1px solid grey;border-bottom:1px solid grey;-webkit-transition:border-color .1s ease-out;transition:border-color .1s ease-out}.pl-c-modal__resizer:focus:after,.pl-c-modal__resizer:hover:after{border-color:#fff}.pl-c-modal__close-btn-icon{width:12px;height:12px;color:currentColor;fill:currentColor;-webkit-transition:fill .1s ease-out;transition:fill .1s ease-out}.pl-c-code-copy-btn{display:inline-block;position:absolute;top:.5rem;right:.5rem;padding:.2rem .4rem;background:#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 .1s ease-out;transition:background .1s ease-out}.pl-c-code-copy-btn:focus,.pl-c-code-copy-btn:hover{background:#ccc}.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: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-body--theme-light .pl-c-header{background:#fff;border-bottom:1px solid #ccc}.pl-c-body--theme-light .pl-c-nav__sublist{background:0 0}.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 .pl-c-nav__link--dropdown{color:#4d4c4c;background:#fff}.pl-c-body--theme-light .pl-c-nav__link--dropdown:after{color:#ccc}.pl-c-body--theme-light .pl-c-nav__sublist .pl-c-nav__link{border-left:1px solid #ccc;border-right:1px solid #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;border-bottom:1px solid #ccc}}.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:#ddd}.pl-c-body--theme-light .typeahead{background:#ddd!important}.pl-c-body--theme-light .pl-c-typeahead{background:#ddd!important;color:#4d4c4c!important}.pl-c-body--theme-light .tt-input{background:#eee!important;color:#4d4c4c!important}.pl-c-body--theme-light .tt-input:hover{color:#222;background:#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-modal{background:#fff;color:#4d4c4c;border-top:1px solid #ccc}.pl-c-body--theme-light .pl-c-modal__close-btn{background:#fff;border-top:1px solid #ccc;border-left:1px solid #ccc}.pl-c-body--theme-light .pl-c-modal__close-btn:focus,.pl-c-body--theme-light .pl-c-modal__close-btn:hover{background:#fafafa;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:48em){.pl-c-body--theme-sidebar .pl-c-header{width:14rem;height:100vh;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;border-bottom:0;padding:1rem;overflow:auto;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-body--theme-sidebar .pl-c-header::-webkit-scrollbar{width:0!important}.pl-c-body--theme-sidebar.pl-c-body--theme-light .pl-c-header{border-right:1px solid #ccc}.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__link{font-size:.85rem;padding-left:0;padding-right:0}.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}}@media all and (min-width:48em) and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-nav__sublist--dropdown.pl-is-active{height:auto}}@media all and (min-width:48em){.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:48em) 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:48em){.pl-c-body--theme-sidebar .pl-c-controls{margin-top:auto;margin-left:0;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.pl-c-body--theme-sidebar .pl-c-size-list{display:none}.pl-c-body--theme-sidebar .pl-c-viewport-size{display:none}.pl-c-body--theme-sidebar .pl-c-typeahead{border-radius:6px}.pl-c-body--theme-sidebar .pl-c-header .twitter-typeahead{display:block!important;margin-bottom:.5rem}.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-tools__action{padding-left:0;padding-right:0}.pl-c-body--theme-sidebar .pl-c-viewport{top:0;margin-left:auto;width:calc(100% - 14rem)}.pl-c-body--theme-sidebar .pl-c-viewport__iframe-wrapper{width:100%!important}.pl-c-body--theme-sidebar .pl-c-viewport__iframe{width:100%!important}.pl-c-body--theme-sidebar .pl-c-modal{left:14rem;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}.pl-c-body{margin:0;padding:0;background:#ddd;-webkit-text-size-adjust:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:100vh}.pl-c-header .pl-c-typeahead{border:0;background:#222!important;color:grey;width:100%;right:0;padding:.61rem .5rem;font-size:inherit}.pl-c-header .pl-c-typeahead:focus{background:grey;color:#fff}.pl-c-header .twitter-typeahead{display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;width:100%}.pl-c-header .tt-input{background:grey;color:#fff}.pl-c-header .tt-input:hover{color:#fff;background:#222!important}.pl-c-header .tt-input:hover::-webkit-input-placeholder{color:#fff}.pl-c-header .tt-input:hover::-moz-input-placeholder{color:#fff}.pl-c-header .tt-input:focus{border-radius:0;text-transform:lowercase;color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-header .tt-hint{text-transform:lowercase}.pl-c-header .tt-menu{text-transform:lowercase;background-color:grey;width:100%;border-bottom-right-radius:6px;border-bottom-left-radius:6px}.pl-c-header .tt-suggestion{color:#eee;padding:.8em}.pl-c-header .tt-suggestion.tt-cursor{color:#fff;background:rgba(255,255,255,.25)}.pl-c-header .tt-suggestion p{margin:0}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;-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:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#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:#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: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-c-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:#000;color:grey;font-family:HelveticaNeue,Helvetica,Arial,sans-serif;font-size:.7rem}.pl-c-header__nav-toggle{background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out;border:0}.pl-c-header__nav-toggle:hover{color:#fff;background:#222}.pl-c-header__nav-toggle.active,.pl-c-header__nav-toggle:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-header__nav-toggle{background:#fff;color:#4d4c4c}.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-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}@media all and (max-width:42em){.pl-c-nav{position:absolute;top:100%;width:100%;overflow:hidden;max-height:0;background:#000;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-transition:max-height .1s ease-out;transition:max-height .1s ease-out}.pl-c-nav.pl-is-active{max-height:50rem;height:calc(100vh - 2rem);overflow:auto;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-nav.pl-is-active::-webkit-scrollbar{width:0!important}}@media all and (min-width:42em){.pl-c-nav{display:-webkit-box;display:-ms-flexbox;display:flex}}.pl-c-nav__list{z-index:1;margin:0;padding:0;list-style:none}@media all and (max-width:42em){.pl-c-nav__list{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}}@media all and (min-width:42em){.pl-c-nav__list{display:-webkit-box;display:-ms-flexbox;display:flex}}.pl-c-nav__item{cursor:pointer;position:relative}@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{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out}.pl-c-nav__link:hover{color:#fff;background:#222}.pl-c-nav__link.active,.pl-c-nav__link:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-nav__link{background:#fff;color:#4d4c4c}.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-nav__link--sublink{text-transform:none;padding-left:1rem}.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:#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{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;overflow:hidden;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}.pl-c-nav__sublist--dropdown.pl-is-active,.pl-c-nav__subsublist--dropdown.pl-is-active{max-height:none;overflow:auto;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-nav__sublist--dropdown.pl-is-active::-webkit-scrollbar,.pl-c-nav__subsublist--dropdown.pl-is-active::-webkit-scrollbar{width:0!important}@media all and (min-width:42em){.pl-c-nav__sublist--dropdown.pl-is-active,.pl-c-nav__subsublist--dropdown.pl-is-active{max-height:120rem}}@media all and (min-width:42em){.pl-c-nav__sublist--dropdown.pl-is-active{height:calc(100vh - 2rem)}}.pl-c-nav__subsublist{list-style:none;margin:0;padding:0}.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:0 0;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:#222}.pl-c-viewport-size__input:active,.pl-c-viewport-size__input:focus{color:#fff;background:#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}@media all and (min-width:53em){.pl-c-size-list{display:block;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}}.pl-c-size-list__action{background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out}.pl-c-size-list__action:hover{color:#fff;background:#222}.pl-c-size-list__action.active,.pl-c-size-list__action:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-size-list__action{background:#fff;color:#4d4c4c}.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-controls{margin-left:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.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-c-tools{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex}.pl-c-tools__toggle{background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out;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:#222}.pl-c-tools__toggle.active,.pl-c-tools__toggle:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-tools__toggle{background:#fff;color:#4d4c4c}.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{position:absolute}.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:1;width:10rem;border-bottom-left-radius:6px;border-bottom-right-radius:6px}.pl-c-tools__list.pl-is-active{max-height:none;overflow:auto;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-tools__list.pl-is-active::-webkit-scrollbar{width:0!important}@media all and (min-width:42em){.pl-c-tools__list.pl-is-active{max-height:120rem}}.pl-c-tools__action{background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out;display:block;width:100%;margin:0}.pl-c-tools__action:hover{color:#fff;background:#222}.pl-c-tools__action.active,.pl-c-tools__action:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-tools__action{background:#fff;color:#4d4c4c}.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-viewport{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;flex-direction:column;height:auto;width:100%;position:relative;top:2rem;bottom:0;left:0;right:0;z-index:0;overflow:hidden;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-transition:height .3s ease;transition:height .3s ease;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);will-change:height}@supports ((position: -webkit-sticky) or (position: sticky)){.pl-c-viewport{top:0}}.pl-c-viewport__cover{width:100%;height:100%;display:none;position:absolute;z-index:20;cursor:move}.pl-c-viewport__iframe-wrapper{height:100%;width:100%;position:relative;margin:0 auto;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-overflow-scrolling:touch;overflow-y:auto;overflow-x:hidden;width:100%}.pl-c-viewport__iframe-wrapper.hay-mode{-webkit-transition:all 40s linear;transition:all 40s linear}.pl-c-viewport__iframe{position:absolute;height:100%;width:100%;border:0;padding:0;margin:0;top:0;bottom:0;left:0;right:0;background-color:#fff}.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:#ccc;-webkit-transition:background .1s ease-out;transition:background .1s ease-out}.pl-c-viewport__resizer-handle:hover{background:grey}.pl-c-viewport__resizer-handle:active{cursor:move;background:#4d4c4c}.vp-animate{-webkit-transition:width .8s ease-out;transition:width .8s ease-out}.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:0 0;font-weight:400;border:1px solid #ddd;border-top-left-radius:6px;border-top-right-radius:6px;-webkit-transition:background .1s ease-out;transition:background .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:#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:#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-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}@media all and (min-width:53em){.pl-c-pattern-info{display:-webkit-box;display:-ms-flexbox;display:flex}}.pl-c-pattern .pl-c-pattern-info{max-height:20rem;overflow:scroll;-ms-overflow-style:-ms-autohiding-scrollbar}.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;height:18rem;overflow:visible}}.pl-c-modal .pl-c-pattern-info{position:absolute;top:0;right:0;bottom:0;left:0;overflow:scroll;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-modal .pl-c-pattern-info::-webkit-scrollbar{width:0!important}@media all and (min-width:53em){.pl-c-modal .pl-c-pattern-info{position:static;overflow:visible}}.pl-c-pattern-info__panel{padding:1rem}@media all and (min-width:53em){.pl-c-pattern-info__panel{-webkit-box-flex:1;-ms-flex:auto;flex:auto;position:absolute;top:0;bottom:0;left:0;right:0}}@media all and (min-width:62em){.pl-c-modal .pl-c-pattern-info__panel{padding-left:2rem}}.pl-c-pattern-info__panel--info{padding-top:2rem}@media all and (min-width:53em){.pl-c-pattern-info__panel--info{left:0;right:50%;overflow:scroll;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-pattern-info__panel--info::-webkit-scrollbar{width:0!important}}@media all and (min-width:62em){.pl-c-pattern-info__panel--info{right:55%}}@media all and (min-width:53em){.pl-c-pattern-info__panel--info+.pl-c-pattern-info__panel--code{right:0;left:50%;top:1.2rem}}@media all and (min-width:62em){.pl-c-pattern-info__panel--info+.pl-c-pattern-info__panel--code{left:45%}}.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-pattern-state{display:inline-block;width:5px;height:5px;margin-left:10px;position:relative;top:5px;left:0;border-radius:50%;background:#02a4d5;line-height:4px;text-indent:10px}.pl-c-pattern-state--complete{background:#03790f}.pl-c-pattern-state--inreview{background:#c7a118}.pl-c-pattern-state--deprecated{background:#b00b02}.complete:before{color:#03790f!important}.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-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-tabs{padding:0 .5rem .5rem;background:#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}@media all and (min-width:53em){.pl-c-pattern-info__panel--code .pl-c-tabs{position:absolute;top:1rem;bottom:1rem;left:1rem;right:1rem}}@media all and (min-width:62em){.pl-c-modal .pl-c-tabs{right:2rem;left:2rem}}.pl-c-tabs__list{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;list-style:none;margin:0;padding:.5rem 0;background:#fff}.pl-c-tabs__link{display:block;line-height:1;padding:.2rem .4rem;border:1px solid transparent;border-radius:6px;background:#fff;color:grey;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:#eee;border:1px solid #ddd}.pl-c-tabs__content{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;overflow:scroll;-ms-overflow-style:-ms-autohiding-scrollbar;height:100%;padding-top:.5rem}.pl-c-tabs__content::-webkit-scrollbar{width:0!important}.pl-c-modal .pl-c-tabs__content{border:0}.pl-c-tabs__panel{display:none;min-height:12rem}.pl-c-tabs__panel.pl-is-active-tab{display:block}.pl-c-tabs__panel :not(pre)>code[class*=language-],.pl-c-tabs__panel pre[class*=language-]{background:0 0;margin:0;padding:0;border:0;display:block}.pl-c-tabs__panel code[class*=language-]{background:0 0;margin:0}.pl-c-tools{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex}.pl-c-tools__toggle{background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out;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:#222}.pl-c-tools__toggle.active,.pl-c-tools__toggle:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-tools__toggle{background:#fff;color:#4d4c4c}.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{position:absolute}.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:1;width:10rem;border-bottom-left-radius:6px;border-bottom-right-radius:6px}.pl-c-tools__list.pl-is-active{max-height:none;overflow:auto;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-tools__list.pl-is-active::-webkit-scrollbar{width:0!important}@media all and (min-width:42em){.pl-c-tools__list.pl-is-active{max-height:120rem}}.pl-c-tools__action{background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out;display:block;width:100%;margin:0}.pl-c-tools__action:hover{color:#fff;background:#222}.pl-c-tools__action.active,.pl-c-tools__action:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-tools__action{background:#fff;color:#4d4c4c}.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-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:#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 .1s ease;transition:background .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: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-modal{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:#000;color:#ccc;position:relative;top:auto;bottom:0;left:0;z-index:5;width:100%;height:0;-webkit-transition:height .3s ease,-webkit-transform .3s ease;transition:height .3s ease,-webkit-transform .3s ease;transition:transform .3s ease,height .3s ease;transition:transform .3s ease,height .3s ease,-webkit-transform .3s ease;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);pointer-events:none;will-change:height,transform;overflow:hidden}.pl-c-modal.pl-is-active{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);height:50vh;-webkit-transition:-webkit-transform .3s ease;transition:-webkit-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease, -webkit-transform .3s ease;pointer-events:auto}.pl-c-modal__toolbar{display:-webkit-box;display:-ms-flexbox;display:flex}.pl-c-modal__close-btn{font-size:70%;background:#000;color:grey;border:0;border-radius:6px 6px 0 0;display:inline-block;padding:.5rem .5rem .3rem;margin:0;text-decoration:none;cursor:pointer;z-index:2;-webkit-transition:all .1s ease-out;transition:all .1s ease-out}.pl-c-modal__close-btn:focus,.pl-c-modal__close-btn:hover{background:#222;color:#fff}.pl-c-modal__close-btn:active,.pl-c-modal__close-btn:focus{outline:1px dotted grey;outline-offset:-2px}.pl-c-modal.pl-is-active .pl-c-modal__close-btn{bottom:100%}.pl-c-modal__cover{width:100%;height:100%;display:none;position:absolute;z-index:20;cursor:move}.pl-c-modal__resizer{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;left:0;height:14px;width:100%;background:#000;z-index:2;cursor:ns-resize}.pl-c-modal__resizer:after{content:'';height:3px;width:50px;border-top:1px solid grey;border-bottom:1px solid grey;-webkit-transition:border-color .1s ease-out;transition:border-color .1s ease-out}.pl-c-modal__resizer:focus:after,.pl-c-modal__resizer:hover:after{border-color:#fff}.pl-c-modal__close-btn-icon{width:12px;height:12px;color:currentColor;fill:currentColor;-webkit-transition:fill .1s ease-out;transition:fill .1s ease-out}.pl-c-code-copy-btn{display:inline-block;position:absolute;top:.5rem;right:.5rem;padding:.2rem .4rem;background:#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 .1s ease-out;transition:background .1s ease-out}.pl-c-code-copy-btn:focus,.pl-c-code-copy-btn:hover{background:#ccc}.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: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-body--theme-light .pl-c-header{background:#fff;border-bottom:1px solid #ccc}.pl-c-body--theme-light .pl-c-nav__sublist{background:0 0}.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 .pl-c-nav__link--dropdown{color:#4d4c4c;background:#fff}.pl-c-body--theme-light .pl-c-nav__link--dropdown:after{color:#ccc}.pl-c-body--theme-light .pl-c-nav__sublist .pl-c-nav__link{border-left:1px solid #ccc;border-right:1px solid #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;border-bottom:1px solid #ccc}}.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:#ddd}.pl-c-body--theme-light .typeahead{background:#ddd!important}.pl-c-body--theme-light .pl-c-typeahead{background:#ddd!important;color:#4d4c4c!important}.pl-c-body--theme-light .tt-input{background:#eee!important;color:#4d4c4c!important}.pl-c-body--theme-light .tt-input:hover{color:#222;background:#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-modal{background:#fff;color:#4d4c4c;border-top:1px solid #ccc}.pl-c-body--theme-light .pl-c-modal__close-btn{background:#fff;border-top:1px solid #ccc;border-left:1px solid #ccc}.pl-c-body--theme-light .pl-c-modal__close-btn:focus,.pl-c-body--theme-light .pl-c-modal__close-btn:hover{background:#fafafa;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:48em){.pl-c-body--theme-sidebar .pl-c-header{width:14rem;height:100vh;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;border-bottom:0;padding:1rem;overflow:auto;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-body--theme-sidebar .pl-c-header::-webkit-scrollbar{width:0!important}.pl-c-body--theme-sidebar.pl-c-body--theme-light .pl-c-header{border-right:1px solid #ccc}.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__link{font-size:.85rem;padding-left:0;padding-right:0}.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}}@media all and (min-width:48em) and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-nav__sublist--dropdown.pl-is-active{height:auto}}@media all and (min-width:48em){.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:48em) 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:48em){.pl-c-body--theme-sidebar .pl-c-controls{margin-top:auto;margin-left:0;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.pl-c-body--theme-sidebar .pl-c-size-list{display:none}.pl-c-body--theme-sidebar .pl-c-viewport-size{display:none}.pl-c-body--theme-sidebar .pl-c-typeahead{border-radius:6px}.pl-c-body--theme-sidebar .pl-c-header .twitter-typeahead{display:block!important;margin-bottom:.5rem}.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-tools__action{padding-left:0;padding-right:0}.pl-c-body--theme-sidebar .pl-c-viewport{top:0;margin-left:auto;width:calc(100% - 14rem)}.pl-c-body--theme-sidebar .pl-c-viewport__iframe-wrapper{width:100%!important}.pl-c-body--theme-sidebar .pl-c-viewport__iframe{width:100%!important}.pl-c-body--theme-sidebar .pl-c-modal{left:14rem;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/css/pattern-lab.fade4ea7.css b/packages/uikit-workshop/dist/styleguide/css/pattern-lab.fade4ea7.css new file mode 100644 index 000000000..9bde74442 --- /dev/null +++ b/packages/uikit-workshop/dist/styleguide/css/pattern-lab.fade4ea7.css @@ -0,0 +1 @@ +.pl-c-header .pl-c-typeahead:focus{background:grey;color:#fff}.pl-c-header .twitter-typeahead{display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;width:100%}.pl-c-header .tt-input{background:grey;color:#fff}.pl-c-header .tt-input:hover{color:#fff;background:#222!important}.pl-c-header .tt-input:hover::-webkit-input-placeholder{color:#fff}.pl-c-header .tt-input:hover::-moz-input-placeholder{color:#fff}.pl-c-header .tt-input:focus{border-radius:0;text-transform:lowercase;color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-header .tt-hint{text-transform:lowercase}.pl-c-header .tt-menu{text-transform:lowercase;background-color:grey;width:100%;border-bottom-right-radius:6px;border-bottom-left-radius:6px}.pl-c-header .tt-suggestion{color:#eee;padding:.8em}.pl-c-header .tt-suggestion.tt-cursor{color:#fff;background:rgba(255,255,255,.25)}.pl-c-header .tt-suggestion p{margin:0}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;-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:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#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:#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: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-c-header__nav-toggle{background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out;border:0}.pl-c-header__nav-toggle:hover{color:#fff;background:#222}.pl-c-header__nav-toggle.active,.pl-c-header__nav-toggle:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-header__nav-toggle{background:#fff;color:#4d4c4c}.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}.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}@media all and (max-width:42em){.pl-c-nav{position:absolute;top:100%;width:100%;overflow:hidden;max-height:0;background:#000;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-transition:max-height .1s ease-out;transition:max-height .1s ease-out}.pl-c-nav.pl-is-active{max-height:50rem;height:calc(100vh - 2rem);overflow:auto;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-nav.pl-is-active::-webkit-scrollbar{width:0!important}}.pl-c-nav__item{cursor:pointer;position:relative}@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{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out}.pl-c-nav__link:hover{color:#fff;background:#222}.pl-c-nav__link.active,.pl-c-nav__link:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-nav__link{background:#fff;color:#4d4c4c}.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-nav__link--sublink{text-transform:none;padding-left:1rem}.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:#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{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;overflow:hidden;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}.pl-c-nav__sublist--dropdown.pl-is-active,.pl-c-nav__subsublist--dropdown.pl-is-active{max-height:none;overflow:auto;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-nav__sublist--dropdown.pl-is-active::-webkit-scrollbar,.pl-c-nav__subsublist--dropdown.pl-is-active::-webkit-scrollbar{width:0!important}@media all and (min-width:42em){.pl-c-nav__sublist--dropdown.pl-is-active,.pl-c-nav__subsublist--dropdown.pl-is-active{max-height:120rem}}@media all and (min-width:42em){.pl-c-nav__sublist--dropdown.pl-is-active{height:calc(100vh - 2rem)}}.pl-c-nav__subsublist{list-style:none;margin:0;padding:0}.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:0 0;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:#222}.pl-c-viewport-size__input:active,.pl-c-viewport-size__input:focus{color:#fff;background:#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}@media all and (min-width:53em){.pl-c-size-list{display:block;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}}.pl-c-size-list__action{background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out}.pl-c-size-list__action:hover{color:#fff;background:#222}.pl-c-size-list__action.active,.pl-c-size-list__action:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-size-list__action{background:#fff;color:#4d4c4c}.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-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-c-tools{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex}.pl-c-tools__toggle{background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out;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:#222}.pl-c-tools__toggle.active,.pl-c-tools__toggle:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-tools__toggle{background:#fff;color:#4d4c4c}.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{position:absolute}.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:1;width:10rem;border-bottom-left-radius:6px;border-bottom-right-radius:6px}.pl-c-tools__list.pl-is-active{max-height:none;overflow:auto;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-tools__list.pl-is-active::-webkit-scrollbar{width:0!important}@media all and (min-width:42em){.pl-c-tools__list.pl-is-active{max-height:120rem}}.pl-c-tools__action{background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out;display:block;width:100%;margin:0}.pl-c-tools__action:hover{color:#fff;background:#222}.pl-c-tools__action.active,.pl-c-tools__action:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-tools__action{background:#fff;color:#4d4c4c}.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-viewport{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;flex-direction:column;height:auto;width:100%;position:relative;top:2rem;bottom:0;left:0;right:0;z-index:0;overflow:hidden;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-transition:height .3s ease;transition:height .3s ease;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);will-change:height}@supports ((position:-webkit-sticky) or (position:sticky)){.pl-c-viewport{top:0}}.pl-c-viewport__cover{width:100%;height:100%;display:none;position:absolute;z-index:20;cursor:move}.pl-c-viewport__iframe-wrapper.hay-mode{-webkit-transition:all 40s linear;transition:all 40s linear}.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:#ccc;-webkit-transition:background .1s ease-out;transition:background .1s ease-out}.pl-c-viewport__resizer-handle:hover{background:grey}.pl-c-viewport__resizer-handle:active{cursor:move;background:#4d4c4c}.vp-animate{-webkit-transition:width .8s ease-out;transition:width .8s ease-out}.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:0 0;font-weight:400;border:1px solid #ddd;border-top-left-radius:6px;border-top-right-radius:6px;-webkit-transition:background .1s ease-out;transition:background .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:#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:#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-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}@media all and (min-width:53em){.pl-c-pattern-info{display:-webkit-box;display:-ms-flexbox;display:flex}}.pl-c-pattern .pl-c-pattern-info{max-height:20rem;overflow:scroll;-ms-overflow-style:-ms-autohiding-scrollbar}.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;height:18rem;overflow:visible}}.pl-c-modal .pl-c-pattern-info{position:absolute;top:0;right:0;bottom:0;left:0;overflow:scroll;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-modal .pl-c-pattern-info::-webkit-scrollbar{width:0!important}@media all and (min-width:53em){.pl-c-modal .pl-c-pattern-info{position:static;overflow:visible}}.pl-c-pattern-info__panel{padding:1rem}@media all and (min-width:53em){.pl-c-pattern-info__panel{-webkit-box-flex:1;-ms-flex:auto;flex:auto;position:absolute;top:0;bottom:0;left:0;right:0}}@media all and (min-width:62em){.pl-c-modal .pl-c-pattern-info__panel{padding-left:2rem}}.pl-c-pattern-info__panel--info{padding-top:2rem}@media all and (min-width:53em){.pl-c-pattern-info__panel--info{left:0;right:50%;overflow:scroll;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-pattern-info__panel--info::-webkit-scrollbar{width:0!important}}@media all and (min-width:62em){.pl-c-pattern-info__panel--info{right:55%}}@media all and (min-width:53em){.pl-c-pattern-info__panel--info+.pl-c-pattern-info__panel--code{right:0;left:50%;top:1.2rem}}@media all and (min-width:62em){.pl-c-pattern-info__panel--info+.pl-c-pattern-info__panel--code{left:45%}}.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-pattern-state{display:inline-block;width:5px;height:5px;margin-left:10px;position:relative;top:5px;left:0;border-radius:50%;background:#02a4d5;line-height:4px;text-indent:10px}.pl-c-pattern-state--complete{background:#03790f}.pl-c-pattern-state--inreview{background:#c7a118}.pl-c-pattern-state--deprecated{background:#b00b02}.complete:before{color:#03790f!important}.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-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-tabs{padding:0 .5rem .5rem;background:#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}@media all and (min-width:53em){.pl-c-pattern-info__panel--code .pl-c-tabs{position:absolute;top:1rem;bottom:1rem;left:1rem;right:1rem}}@media all and (min-width:62em){.pl-c-modal .pl-c-tabs{right:2rem;left:2rem}}.pl-c-tabs__list{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;list-style:none;margin:0;padding:.5rem 0;background:#fff}.pl-c-tabs__link{display:block;line-height:1;padding:.2rem .4rem;border:1px solid transparent;border-radius:6px;background:#fff;color:grey;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:#eee;border:1px solid #ddd}.pl-c-tabs__content{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;overflow:scroll;-ms-overflow-style:-ms-autohiding-scrollbar;height:100%;padding-top:.5rem}.pl-c-tabs__content::-webkit-scrollbar{width:0!important}.pl-c-modal .pl-c-tabs__content{border:0}.pl-c-tabs__panel{display:none;min-height:12rem}.pl-c-tabs__panel.pl-is-active-tab{display:block}.pl-c-tabs__panel :not(pre)>code[class*=language-],.pl-c-tabs__panel pre[class*=language-]{background:0 0;margin:0;padding:0;border:0;display:block}.pl-c-tabs__panel code[class*=language-]{background:0 0;margin:0}.pl-c-tools{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex}.pl-c-tools__toggle{background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out;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:#222}.pl-c-tools__toggle.active,.pl-c-tools__toggle:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-tools__toggle{background:#fff;color:#4d4c4c}.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{position:absolute}.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:1;width:10rem;border-bottom-left-radius:6px;border-bottom-right-radius:6px}.pl-c-tools__list.pl-is-active{max-height:none;overflow:auto;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-tools__list.pl-is-active::-webkit-scrollbar{width:0!important}@media all and (min-width:42em){.pl-c-tools__list.pl-is-active{max-height:120rem}}.pl-c-tools__action{background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out;display:block;width:100%;margin:0}.pl-c-tools__action:hover{color:#fff;background:#222}.pl-c-tools__action.active,.pl-c-tools__action:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-tools__action{background:#fff;color:#4d4c4c}.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-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:#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 .1s ease;transition:background .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: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-modal{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:#000;color:#ccc;position:relative;top:auto;bottom:0;left:0;z-index:5;width:100%;height:0;-webkit-transition:height .3s ease,-webkit-transform .3s ease;transition:height .3s ease,-webkit-transform .3s ease;transition:transform .3s ease,height .3s ease;transition:transform .3s ease,height .3s ease,-webkit-transform .3s ease;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);pointer-events:none;will-change:height,transform;overflow:hidden}.pl-c-modal.pl-is-active{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);height:50vh;-webkit-transition:-webkit-transform .3s ease;transition:-webkit-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease,-webkit-transform .3s ease;pointer-events:auto}.pl-c-modal__toolbar{display:-webkit-box;display:-ms-flexbox;display:flex}.pl-c-modal__close-btn{font-size:70%;background:#000;color:grey;border:0;border-radius:6px 6px 0 0;display:inline-block;padding:.5rem .5rem .3rem;margin:0;text-decoration:none;cursor:pointer;z-index:2;-webkit-transition:all .1s ease-out;transition:all .1s ease-out}.pl-c-modal__close-btn:focus,.pl-c-modal__close-btn:hover{background:#222;color:#fff}.pl-c-modal__close-btn:active,.pl-c-modal__close-btn:focus{outline:1px dotted grey;outline-offset:-2px}.pl-c-modal.pl-is-active .pl-c-modal__close-btn{bottom:100%}.pl-c-modal__cover{width:100%;height:100%;display:none;position:absolute;z-index:20;cursor:move}.pl-c-modal__resizer{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;left:0;height:14px;width:100%;background:#000;z-index:2;cursor:ns-resize}.pl-c-modal__resizer:after{content:'';height:3px;width:50px;border-top:1px solid grey;border-bottom:1px solid grey;-webkit-transition:border-color .1s ease-out;transition:border-color .1s ease-out}.pl-c-modal__resizer:focus:after,.pl-c-modal__resizer:hover:after{border-color:#fff}.pl-c-modal__close-btn-icon{width:12px;height:12px;color:currentColor;fill:currentColor;-webkit-transition:fill .1s ease-out;transition:fill .1s ease-out}.pl-c-code-copy-btn{display:inline-block;position:absolute;top:.5rem;right:.5rem;padding:.2rem .4rem;background:#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 .1s ease-out;transition:background .1s ease-out}.pl-c-code-copy-btn:focus,.pl-c-code-copy-btn:hover{background:#ccc}.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: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-body--theme-light .pl-c-header{background:#fff;border-bottom:1px solid #ccc}.pl-c-body--theme-light .pl-c-nav__sublist{background:0 0}.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 .pl-c-nav__link--dropdown{color:#4d4c4c;background:#fff}.pl-c-body--theme-light .pl-c-nav__link--dropdown:after{color:#ccc}.pl-c-body--theme-light .pl-c-nav__sublist .pl-c-nav__link{border-left:1px solid #ccc;border-right:1px solid #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;border-bottom:1px solid #ccc}}.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:#ddd}.pl-c-body--theme-light .typeahead{background:#ddd!important}.pl-c-body--theme-light .pl-c-typeahead{background:#ddd!important;color:#4d4c4c!important}.pl-c-body--theme-light .tt-input{background:#eee!important;color:#4d4c4c!important}.pl-c-body--theme-light .tt-input:hover{color:#222;background:#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-modal{background:#fff;color:#4d4c4c;border-top:1px solid #ccc}.pl-c-body--theme-light .pl-c-modal__close-btn{background:#fff;border-top:1px solid #ccc;border-left:1px solid #ccc}.pl-c-body--theme-light .pl-c-modal__close-btn:focus,.pl-c-body--theme-light .pl-c-modal__close-btn:hover{background:#fafafa;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:48em){.pl-c-body--theme-sidebar .pl-c-header{width:14rem;height:100vh;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;border-bottom:0;padding:1rem;overflow:auto;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-body--theme-sidebar .pl-c-header::-webkit-scrollbar{width:0!important}.pl-c-body--theme-sidebar.pl-c-body--theme-light .pl-c-header{border-right:1px solid #ccc}.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__link{font-size:.85rem;padding-left:0;padding-right:0}.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}}@media all and (min-width:48em) and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-nav__sublist--dropdown.pl-is-active{height:auto}}@media all and (min-width:48em){.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:48em) 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:48em){.pl-c-body--theme-sidebar .pl-c-controls{margin-top:auto;margin-left:0;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.pl-c-body--theme-sidebar .pl-c-size-list{display:none}.pl-c-body--theme-sidebar .pl-c-viewport-size{display:none}.pl-c-body--theme-sidebar .pl-c-typeahead{border-radius:6px}.pl-c-body--theme-sidebar .pl-c-header .twitter-typeahead{display:block!important;margin-bottom:.5rem}.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-tools__action{padding-left:0;padding-right:0}.pl-c-body--theme-sidebar .pl-c-viewport__iframe-wrapper{width:100%!important}.pl-c-body--theme-sidebar .pl-c-viewport__iframe{width:100%!important}.pl-c-body--theme-sidebar .pl-c-modal{left:14rem;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/js/patternlab-viewer.js b/packages/uikit-workshop/dist/styleguide/js/patternlab-viewer.js index 89eb76964..27abceda5 100644 --- a/packages/uikit-workshop/dist/styleguide/js/patternlab-viewer.js +++ b/packages/uikit-workshop/dist/styleguide/js/patternlab-viewer.js @@ -1 +1 @@ -!function(e){var t={};function n(i){if(t[i])return t[i].exports;var r=t[i]={i:i,l:!1,exports:{}};return e[i].call(r.exports,r,r.exports,n),r.l=!0,r.exports}n.m=e,n.c=t,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(i,r,function(t){return e[t]}.bind(null,r));return i},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=14)}([function(e,t,n){var i;!function(t,n){"use strict";"object"==typeof e&&"object"==typeof e.exports?e.exports=t.document?n(t,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return n(e)}:n(t)}("undefined"!=typeof window?window:this,function(n,r){"use strict";var o=[],a=n.document,s=Object.getPrototypeOf,u=o.slice,l=o.concat,c=o.push,f=o.indexOf,p={},h=p.toString,d=p.hasOwnProperty,g=d.toString,m=g.call(Object),v={},y=function(e){return"function"==typeof e&&"number"!=typeof e.nodeType},b=function(e){return null!=e&&e===e.window},w={type:!0,src:!0,noModule:!0};function x(e,t,n){var i,r=(t=t||a).createElement("script");if(r.text=e,n)for(i in w)n[i]&&(r[i]=n[i]);t.head.appendChild(r).parentNode.removeChild(r)}function k(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?p[h.call(e)]||"object":typeof e}var S=function(e,t){return new S.fn.init(e,t)},T=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;function C(e){var t=!!e&&"length"in e&&e.length,n=k(e);return!y(e)&&!b(e)&&("array"===n||0===t||"number"==typeof t&&t>0&&t-1 in e)}S.fn=S.prototype={jquery:"3.3.1",constructor:S,length:0,toArray:function(){return u.call(this)},get:function(e){return null==e?u.call(this):e<0?this[e+this.length]:this[e]},pushStack:function(e){var t=S.merge(this.constructor(),e);return t.prevObject=this,t},each:function(e){return S.each(this,e)},map:function(e){return this.pushStack(S.map(this,function(t,n){return e.call(t,n,t)}))},slice:function(){return this.pushStack(u.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},eq:function(e){var t=this.length,n=+e+(e<0?t:0);return this.pushStack(n>=0&&n+~]|"+I+")"+I+"*"),W=new RegExp("="+I+"*([^\\]'\"]*?)"+I+"*\\]","g"),V=new RegExp(R),K=new RegExp("^"+F+"$"),U={ID:new RegExp("^#("+F+")"),CLASS:new RegExp("^\\.("+F+")"),TAG:new RegExp("^("+F+"|[*])"),ATTR:new RegExp("^"+M),PSEUDO:new RegExp("^"+R),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+I+"*(even|odd|(([+-]|)(\\d*)n|)"+I+"*(?:([+-]|)"+I+"*(\\d+)|))"+I+"*\\)|)","i"),bool:new RegExp("^(?:"+P+")$","i"),needsContext:new RegExp("^"+I+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+I+"*((?:-\\d)?\\d*)"+I+"*\\)|)(?=[^-]|$)","i")},Q=/^(?:input|select|textarea|button)$/i,J=/^h\d$/i,X=/^[^{]+\{\s*\[native \w/,G=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,Y=/[+~]/,Z=new RegExp("\\\\([\\da-f]{1,6}"+I+"?|("+I+")|.)","ig"),ee=function(e,t,n){var i="0x"+t-65536;return i!=i||n?t:i<0?String.fromCharCode(i+65536):String.fromCharCode(i>>10|55296,1023&i|56320)},te=/([\0-\x1f\x7f]|^-?\d)|^-$|[^\0-\x1f\x7f-\uFFFF\w-]/g,ne=function(e,t){return t?"\0"===e?"�":e.slice(0,-1)+"\\"+e.charCodeAt(e.length-1).toString(16)+" ":"\\"+e},ie=function(){p()},re=ye(function(e){return!0===e.disabled&&("form"in e||"label"in e)},{dir:"parentNode",next:"legend"});try{D.apply(j=q.call(x.childNodes),x.childNodes),j[x.childNodes.length].nodeType}catch(e){D={apply:j.length?function(e,t){N.apply(e,q.call(t))}:function(e,t){for(var n=e.length,i=0;e[n++]=t[i++];);e.length=n-1}}}function oe(e,t,i,r){var o,s,l,c,f,d,v,y=t&&t.ownerDocument,k=t?t.nodeType:9;if(i=i||[],"string"!=typeof e||!e||1!==k&&9!==k&&11!==k)return i;if(!r&&((t?t.ownerDocument||t:x)!==h&&p(t),t=t||h,g)){if(11!==k&&(f=G.exec(e)))if(o=f[1]){if(9===k){if(!(l=t.getElementById(o)))return i;if(l.id===o)return i.push(l),i}else if(y&&(l=y.getElementById(o))&&b(t,l)&&l.id===o)return i.push(l),i}else{if(f[2])return D.apply(i,t.getElementsByTagName(e)),i;if((o=f[3])&&n.getElementsByClassName&&t.getElementsByClassName)return D.apply(i,t.getElementsByClassName(o)),i}if(n.qsa&&!E[e+" "]&&(!m||!m.test(e))){if(1!==k)y=t,v=e;else if("object"!==t.nodeName.toLowerCase()){for((c=t.getAttribute("id"))?c=c.replace(te,ne):t.setAttribute("id",c=w),s=(d=a(e)).length;s--;)d[s]="#"+c+" "+ve(d[s]);v=d.join(","),y=Y.test(e)&&ge(t.parentNode)||t}if(v)try{return D.apply(i,y.querySelectorAll(v)),i}catch(e){}finally{c===w&&t.removeAttribute("id")}}}return u(e.replace($,"$1"),t,i,r)}function ae(){var e=[];return function t(n,r){return e.push(n+" ")>i.cacheLength&&delete t[e.shift()],t[n+" "]=r}}function se(e){return e[w]=!0,e}function ue(e){var t=h.createElement("fieldset");try{return!!e(t)}catch(e){return!1}finally{t.parentNode&&t.parentNode.removeChild(t),t=null}}function le(e,t){for(var n=e.split("|"),r=n.length;r--;)i.attrHandle[n[r]]=t}function ce(e,t){var n=t&&e,i=n&&1===e.nodeType&&1===t.nodeType&&e.sourceIndex-t.sourceIndex;if(i)return i;if(n)for(;n=n.nextSibling;)if(n===t)return-1;return e?1:-1}function fe(e){return function(t){return"input"===t.nodeName.toLowerCase()&&t.type===e}}function pe(e){return function(t){var n=t.nodeName.toLowerCase();return("input"===n||"button"===n)&&t.type===e}}function he(e){return function(t){return"form"in t?t.parentNode&&!1===t.disabled?"label"in t?"label"in t.parentNode?t.parentNode.disabled===e:t.disabled===e:t.isDisabled===e||t.isDisabled!==!e&&re(t)===e:t.disabled===e:"label"in t&&t.disabled===e}}function de(e){return se(function(t){return t=+t,se(function(n,i){for(var r,o=e([],n.length,t),a=o.length;a--;)n[r=o[a]]&&(n[r]=!(i[r]=n[r]))})})}function ge(e){return e&&void 0!==e.getElementsByTagName&&e}for(t in n=oe.support={},o=oe.isXML=function(e){var t=e&&(e.ownerDocument||e).documentElement;return!!t&&"HTML"!==t.nodeName},p=oe.setDocument=function(e){var t,r,a=e?e.ownerDocument||e:x;return a!==h&&9===a.nodeType&&a.documentElement?(d=(h=a).documentElement,g=!o(h),x!==h&&(r=h.defaultView)&&r.top!==r&&(r.addEventListener?r.addEventListener("unload",ie,!1):r.attachEvent&&r.attachEvent("onunload",ie)),n.attributes=ue(function(e){return e.className="i",!e.getAttribute("className")}),n.getElementsByTagName=ue(function(e){return e.appendChild(h.createComment("")),!e.getElementsByTagName("*").length}),n.getElementsByClassName=X.test(h.getElementsByClassName),n.getById=ue(function(e){return d.appendChild(e).id=w,!h.getElementsByName||!h.getElementsByName(w).length}),n.getById?(i.filter.ID=function(e){var t=e.replace(Z,ee);return function(e){return e.getAttribute("id")===t}},i.find.ID=function(e,t){if(void 0!==t.getElementById&&g){var n=t.getElementById(e);return n?[n]:[]}}):(i.filter.ID=function(e){var t=e.replace(Z,ee);return function(e){var n=void 0!==e.getAttributeNode&&e.getAttributeNode("id");return n&&n.value===t}},i.find.ID=function(e,t){if(void 0!==t.getElementById&&g){var n,i,r,o=t.getElementById(e);if(o){if((n=o.getAttributeNode("id"))&&n.value===e)return[o];for(r=t.getElementsByName(e),i=0;o=r[i++];)if((n=o.getAttributeNode("id"))&&n.value===e)return[o]}return[]}}),i.find.TAG=n.getElementsByTagName?function(e,t){return void 0!==t.getElementsByTagName?t.getElementsByTagName(e):n.qsa?t.querySelectorAll(e):void 0}:function(e,t){var n,i=[],r=0,o=t.getElementsByTagName(e);if("*"===e){for(;n=o[r++];)1===n.nodeType&&i.push(n);return i}return o},i.find.CLASS=n.getElementsByClassName&&function(e,t){if(void 0!==t.getElementsByClassName&&g)return t.getElementsByClassName(e)},v=[],m=[],(n.qsa=X.test(h.querySelectorAll))&&(ue(function(e){d.appendChild(e).innerHTML="",e.querySelectorAll("[msallowcapture^='']").length&&m.push("[*^$]="+I+"*(?:''|\"\")"),e.querySelectorAll("[selected]").length||m.push("\\["+I+"*(?:value|"+P+")"),e.querySelectorAll("[id~="+w+"-]").length||m.push("~="),e.querySelectorAll(":checked").length||m.push(":checked"),e.querySelectorAll("a#"+w+"+*").length||m.push(".#.+[+~]")}),ue(function(e){e.innerHTML="";var t=h.createElement("input");t.setAttribute("type","hidden"),e.appendChild(t).setAttribute("name","D"),e.querySelectorAll("[name=d]").length&&m.push("name"+I+"*[*^$|!~]?="),2!==e.querySelectorAll(":enabled").length&&m.push(":enabled",":disabled"),d.appendChild(e).disabled=!0,2!==e.querySelectorAll(":disabled").length&&m.push(":enabled",":disabled"),e.querySelectorAll("*,:x"),m.push(",.*:")})),(n.matchesSelector=X.test(y=d.matches||d.webkitMatchesSelector||d.mozMatchesSelector||d.oMatchesSelector||d.msMatchesSelector))&&ue(function(e){n.disconnectedMatch=y.call(e,"*"),y.call(e,"[s!='']:x"),v.push("!=",R)}),m=m.length&&new RegExp(m.join("|")),v=v.length&&new RegExp(v.join("|")),t=X.test(d.compareDocumentPosition),b=t||X.test(d.contains)?function(e,t){var n=9===e.nodeType?e.documentElement:e,i=t&&t.parentNode;return e===i||!(!i||1!==i.nodeType||!(n.contains?n.contains(i):e.compareDocumentPosition&&16&e.compareDocumentPosition(i)))}:function(e,t){if(t)for(;t=t.parentNode;)if(t===e)return!0;return!1},A=t?function(e,t){if(e===t)return f=!0,0;var i=!e.compareDocumentPosition-!t.compareDocumentPosition;return i||(1&(i=(e.ownerDocument||e)===(t.ownerDocument||t)?e.compareDocumentPosition(t):1)||!n.sortDetached&&t.compareDocumentPosition(e)===i?e===h||e.ownerDocument===x&&b(x,e)?-1:t===h||t.ownerDocument===x&&b(x,t)?1:c?O(c,e)-O(c,t):0:4&i?-1:1)}:function(e,t){if(e===t)return f=!0,0;var n,i=0,r=e.parentNode,o=t.parentNode,a=[e],s=[t];if(!r||!o)return e===h?-1:t===h?1:r?-1:o?1:c?O(c,e)-O(c,t):0;if(r===o)return ce(e,t);for(n=e;n=n.parentNode;)a.unshift(n);for(n=t;n=n.parentNode;)s.unshift(n);for(;a[i]===s[i];)i++;return i?ce(a[i],s[i]):a[i]===x?-1:s[i]===x?1:0},h):h},oe.matches=function(e,t){return oe(e,null,null,t)},oe.matchesSelector=function(e,t){if((e.ownerDocument||e)!==h&&p(e),t=t.replace(W,"='$1']"),n.matchesSelector&&g&&!E[t+" "]&&(!v||!v.test(t))&&(!m||!m.test(t)))try{var i=y.call(e,t);if(i||n.disconnectedMatch||e.document&&11!==e.document.nodeType)return i}catch(e){}return oe(t,h,null,[e]).length>0},oe.contains=function(e,t){return(e.ownerDocument||e)!==h&&p(e),b(e,t)},oe.attr=function(e,t){(e.ownerDocument||e)!==h&&p(e);var r=i.attrHandle[t.toLowerCase()],o=r&&_.call(i.attrHandle,t.toLowerCase())?r(e,t,!g):void 0;return void 0!==o?o:n.attributes||!g?e.getAttribute(t):(o=e.getAttributeNode(t))&&o.specified?o.value:null},oe.escape=function(e){return(e+"").replace(te,ne)},oe.error=function(e){throw new Error("Syntax error, unrecognized expression: "+e)},oe.uniqueSort=function(e){var t,i=[],r=0,o=0;if(f=!n.detectDuplicates,c=!n.sortStable&&e.slice(0),e.sort(A),f){for(;t=e[o++];)t===e[o]&&(r=i.push(o));for(;r--;)e.splice(i[r],1)}return c=null,e},r=oe.getText=function(e){var t,n="",i=0,o=e.nodeType;if(o){if(1===o||9===o||11===o){if("string"==typeof e.textContent)return e.textContent;for(e=e.firstChild;e;e=e.nextSibling)n+=r(e)}else if(3===o||4===o)return e.nodeValue}else for(;t=e[i++];)n+=r(t);return n},(i=oe.selectors={cacheLength:50,createPseudo:se,match:U,attrHandle:{},find:{},relative:{">":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(e){return e[1]=e[1].replace(Z,ee),e[3]=(e[3]||e[4]||e[5]||"").replace(Z,ee),"~="===e[2]&&(e[3]=" "+e[3]+" "),e.slice(0,4)},CHILD:function(e){return e[1]=e[1].toLowerCase(),"nth"===e[1].slice(0,3)?(e[3]||oe.error(e[0]),e[4]=+(e[4]?e[5]+(e[6]||1):2*("even"===e[3]||"odd"===e[3])),e[5]=+(e[7]+e[8]||"odd"===e[3])):e[3]&&oe.error(e[0]),e},PSEUDO:function(e){var t,n=!e[6]&&e[2];return U.CHILD.test(e[0])?null:(e[3]?e[2]=e[4]||e[5]||"":n&&V.test(n)&&(t=a(n,!0))&&(t=n.indexOf(")",n.length-t)-n.length)&&(e[0]=e[0].slice(0,t),e[2]=n.slice(0,t)),e.slice(0,3))}},filter:{TAG:function(e){var t=e.replace(Z,ee).toLowerCase();return"*"===e?function(){return!0}:function(e){return e.nodeName&&e.nodeName.toLowerCase()===t}},CLASS:function(e){var t=T[e+" "];return t||(t=new RegExp("(^|"+I+")"+e+"("+I+"|$)"))&&T(e,function(e){return t.test("string"==typeof e.className&&e.className||void 0!==e.getAttribute&&e.getAttribute("class")||"")})},ATTR:function(e,t,n){return function(i){var r=oe.attr(i,e);return null==r?"!="===t:!t||(r+="","="===t?r===n:"!="===t?r!==n:"^="===t?n&&0===r.indexOf(n):"*="===t?n&&r.indexOf(n)>-1:"$="===t?n&&r.slice(-n.length)===n:"~="===t?(" "+r.replace(H," ")+" ").indexOf(n)>-1:"|="===t&&(r===n||r.slice(0,n.length+1)===n+"-"))}},CHILD:function(e,t,n,i,r){var o="nth"!==e.slice(0,3),a="last"!==e.slice(-4),s="of-type"===t;return 1===i&&0===r?function(e){return!!e.parentNode}:function(t,n,u){var l,c,f,p,h,d,g=o!==a?"nextSibling":"previousSibling",m=t.parentNode,v=s&&t.nodeName.toLowerCase(),y=!u&&!s,b=!1;if(m){if(o){for(;g;){for(p=t;p=p[g];)if(s?p.nodeName.toLowerCase()===v:1===p.nodeType)return!1;d=g="only"===e&&!d&&"nextSibling"}return!0}if(d=[a?m.firstChild:m.lastChild],a&&y){for(b=(h=(l=(c=(f=(p=m)[w]||(p[w]={}))[p.uniqueID]||(f[p.uniqueID]={}))[e]||[])[0]===k&&l[1])&&l[2],p=h&&m.childNodes[h];p=++h&&p&&p[g]||(b=h=0)||d.pop();)if(1===p.nodeType&&++b&&p===t){c[e]=[k,h,b];break}}else if(y&&(b=h=(l=(c=(f=(p=t)[w]||(p[w]={}))[p.uniqueID]||(f[p.uniqueID]={}))[e]||[])[0]===k&&l[1]),!1===b)for(;(p=++h&&p&&p[g]||(b=h=0)||d.pop())&&((s?p.nodeName.toLowerCase()!==v:1!==p.nodeType)||!++b||(y&&((c=(f=p[w]||(p[w]={}))[p.uniqueID]||(f[p.uniqueID]={}))[e]=[k,b]),p!==t)););return(b-=r)===i||b%i==0&&b/i>=0}}},PSEUDO:function(e,t){var n,r=i.pseudos[e]||i.setFilters[e.toLowerCase()]||oe.error("unsupported pseudo: "+e);return r[w]?r(t):r.length>1?(n=[e,e,"",t],i.setFilters.hasOwnProperty(e.toLowerCase())?se(function(e,n){for(var i,o=r(e,t),a=o.length;a--;)e[i=O(e,o[a])]=!(n[i]=o[a])}):function(e){return r(e,0,n)}):r}},pseudos:{not:se(function(e){var t=[],n=[],i=s(e.replace($,"$1"));return i[w]?se(function(e,t,n,r){for(var o,a=i(e,null,r,[]),s=e.length;s--;)(o=a[s])&&(e[s]=!(t[s]=o))}):function(e,r,o){return t[0]=e,i(t,null,o,n),t[0]=null,!n.pop()}}),has:se(function(e){return function(t){return oe(e,t).length>0}}),contains:se(function(e){return e=e.replace(Z,ee),function(t){return(t.textContent||t.innerText||r(t)).indexOf(e)>-1}}),lang:se(function(e){return K.test(e||"")||oe.error("unsupported lang: "+e),e=e.replace(Z,ee).toLowerCase(),function(t){var n;do{if(n=g?t.lang:t.getAttribute("xml:lang")||t.getAttribute("lang"))return(n=n.toLowerCase())===e||0===n.indexOf(e+"-")}while((t=t.parentNode)&&1===t.nodeType);return!1}}),target:function(t){var n=e.location&&e.location.hash;return n&&n.slice(1)===t.id},root:function(e){return e===d},focus:function(e){return e===h.activeElement&&(!h.hasFocus||h.hasFocus())&&!!(e.type||e.href||~e.tabIndex)},enabled:he(!1),disabled:he(!0),checked:function(e){var t=e.nodeName.toLowerCase();return"input"===t&&!!e.checked||"option"===t&&!!e.selected},selected:function(e){return e.parentNode&&e.parentNode.selectedIndex,!0===e.selected},empty:function(e){for(e=e.firstChild;e;e=e.nextSibling)if(e.nodeType<6)return!1;return!0},parent:function(e){return!i.pseudos.empty(e)},header:function(e){return J.test(e.nodeName)},input:function(e){return Q.test(e.nodeName)},button:function(e){var t=e.nodeName.toLowerCase();return"input"===t&&"button"===e.type||"button"===t},text:function(e){var t;return"input"===e.nodeName.toLowerCase()&&"text"===e.type&&(null==(t=e.getAttribute("type"))||"text"===t.toLowerCase())},first:de(function(){return[0]}),last:de(function(e,t){return[t-1]}),eq:de(function(e,t,n){return[n<0?n+t:n]}),even:de(function(e,t){for(var n=0;n=0;)e.push(i);return e}),gt:de(function(e,t,n){for(var i=n<0?n+t:n;++i1?function(t,n,i){for(var r=e.length;r--;)if(!e[r](t,n,i))return!1;return!0}:e[0]}function we(e,t,n,i,r){for(var o,a=[],s=0,u=e.length,l=null!=t;s-1&&(o[l]=!(a[l]=f))}}else v=we(v===a?v.splice(d,v.length):v),r?r(null,a,v,u):D.apply(a,v)})}function ke(e){for(var t,n,r,o=e.length,a=i.relative[e[0].type],s=a||i.relative[" "],u=a?1:0,c=ye(function(e){return e===t},s,!0),f=ye(function(e){return O(t,e)>-1},s,!0),p=[function(e,n,i){var r=!a&&(i||n!==l)||((t=n).nodeType?c(e,n,i):f(e,n,i));return t=null,r}];u1&&be(p),u>1&&ve(e.slice(0,u-1).concat({value:" "===e[u-2].type?"*":""})).replace($,"$1"),n,u0,r=e.length>0,o=function(o,a,s,u,c){var f,d,m,v=0,y="0",b=o&&[],w=[],x=l,S=o||r&&i.find.TAG("*",c),T=k+=null==x?1:Math.random()||.1,C=S.length;for(c&&(l=a===h||a||c);y!==C&&null!=(f=S[y]);y++){if(r&&f){for(d=0,a||f.ownerDocument===h||(p(f),s=!g);m=e[d++];)if(m(f,a||h,s)){u.push(f);break}c&&(k=T)}n&&((f=!m&&f)&&v--,o&&b.push(f))}if(v+=y,n&&y!==v){for(d=0;m=t[d++];)m(b,w,a,s);if(o){if(v>0)for(;y--;)b[y]||w[y]||(w[y]=L.call(u));w=we(w)}D.apply(u,w),c&&!o&&w.length>0&&v+t.length>1&&oe.uniqueSort(u)}return c&&(k=T,l=x),b};return n?se(o):o}(o,r))).selector=e}return s},u=oe.select=function(e,t,n,r){var o,u,l,c,f,p="function"==typeof e&&e,h=!r&&a(e=p.selector||e);if(n=n||[],1===h.length){if((u=h[0]=h[0].slice(0)).length>2&&"ID"===(l=u[0]).type&&9===t.nodeType&&g&&i.relative[u[1].type]){if(!(t=(i.find.ID(l.matches[0].replace(Z,ee),t)||[])[0]))return n;p&&(t=t.parentNode),e=e.slice(u.shift().value.length)}for(o=U.needsContext.test(e)?0:u.length;o--&&(l=u[o],!i.relative[c=l.type]);)if((f=i.find[c])&&(r=f(l.matches[0].replace(Z,ee),Y.test(u[0].type)&&ge(t.parentNode)||t))){if(u.splice(o,1),!(e=r.length&&ve(u)))return D.apply(n,r),n;break}}return(p||s(e,h))(r,t,!g,n,!t||Y.test(e)&&ge(t.parentNode)||t),n},n.sortStable=w.split("").sort(A).join("")===w,n.detectDuplicates=!!f,p(),n.sortDetached=ue(function(e){return 1&e.compareDocumentPosition(h.createElement("fieldset"))}),ue(function(e){return e.innerHTML="","#"===e.firstChild.getAttribute("href")})||le("type|href|height|width",function(e,t,n){if(!n)return e.getAttribute(t,"type"===t.toLowerCase()?1:2)}),n.attributes&&ue(function(e){return e.innerHTML="",e.firstChild.setAttribute("value",""),""===e.firstChild.getAttribute("value")})||le("value",function(e,t,n){if(!n&&"input"===e.nodeName.toLowerCase())return e.defaultValue}),ue(function(e){return null==e.getAttribute("disabled")})||le(P,function(e,t,n){var i;if(!n)return!0===e[t]?t.toLowerCase():(i=e.getAttributeNode(t))&&i.specified?i.value:null}),oe}(n);S.find=E,S.expr=E.selectors,S.expr[":"]=S.expr.pseudos,S.uniqueSort=S.unique=E.uniqueSort,S.text=E.getText,S.isXMLDoc=E.isXML,S.contains=E.contains,S.escapeSelector=E.escape;var A=function(e,t,n){for(var i=[],r=void 0!==n;(e=e[t])&&9!==e.nodeType;)if(1===e.nodeType){if(r&&S(e).is(n))break;i.push(e)}return i},_=function(e,t){for(var n=[];e;e=e.nextSibling)1===e.nodeType&&e!==t&&n.push(e);return n},j=S.expr.match.needsContext;function L(e,t){return e.nodeName&&e.nodeName.toLowerCase()===t.toLowerCase()}var N=/^<([a-z][^\/\0>:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i;function D(e,t,n){return y(t)?S.grep(e,function(e,i){return!!t.call(e,i,e)!==n}):t.nodeType?S.grep(e,function(e){return e===t!==n}):"string"!=typeof t?S.grep(e,function(e){return f.call(t,e)>-1!==n}):S.filter(t,e,n)}S.filter=function(e,t,n){var i=t[0];return n&&(e=":not("+e+")"),1===t.length&&1===i.nodeType?S.find.matchesSelector(i,e)?[i]:[]:S.find.matches(e,S.grep(t,function(e){return 1===e.nodeType}))},S.fn.extend({find:function(e){var t,n,i=this.length,r=this;if("string"!=typeof e)return this.pushStack(S(e).filter(function(){for(t=0;t1?S.uniqueSort(n):n},filter:function(e){return this.pushStack(D(this,e||[],!1))},not:function(e){return this.pushStack(D(this,e||[],!0))},is:function(e){return!!D(this,"string"==typeof e&&j.test(e)?S(e):e||[],!1).length}});var q,O=/^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]+))$/;(S.fn.init=function(e,t,n){var i,r;if(!e)return this;if(n=n||q,"string"==typeof e){if(!(i="<"===e[0]&&">"===e[e.length-1]&&e.length>=3?[null,e,null]:O.exec(e))||!i[1]&&t)return!t||t.jquery?(t||n).find(e):this.constructor(t).find(e);if(i[1]){if(t=t instanceof S?t[0]:t,S.merge(this,S.parseHTML(i[1],t&&t.nodeType?t.ownerDocument||t:a,!0)),N.test(i[1])&&S.isPlainObject(t))for(i in t)y(this[i])?this[i](t[i]):this.attr(i,t[i]);return this}return(r=a.getElementById(i[2]))&&(this[0]=r,this.length=1),this}return e.nodeType?(this[0]=e,this.length=1,this):y(e)?void 0!==n.ready?n.ready(e):e(S):S.makeArray(e,this)}).prototype=S.fn,q=S(a);var P=/^(?:parents|prev(?:Until|All))/,I={children:!0,contents:!0,next:!0,prev:!0};function F(e,t){for(;(e=e[t])&&1!==e.nodeType;);return e}S.fn.extend({has:function(e){var t=S(e,this),n=t.length;return this.filter(function(){for(var e=0;e-1:1===n.nodeType&&S.find.matchesSelector(n,e))){o.push(n);break}return this.pushStack(o.length>1?S.uniqueSort(o):o)},index:function(e){return e?"string"==typeof e?f.call(S(e),this[0]):f.call(this,e.jquery?e[0]:e):this[0]&&this[0].parentNode?this.first().prevAll().length:-1},add:function(e,t){return this.pushStack(S.uniqueSort(S.merge(this.get(),S(e,t))))},addBack:function(e){return this.add(null==e?this.prevObject:this.prevObject.filter(e))}}),S.each({parent:function(e){var t=e.parentNode;return t&&11!==t.nodeType?t:null},parents:function(e){return A(e,"parentNode")},parentsUntil:function(e,t,n){return A(e,"parentNode",n)},next:function(e){return F(e,"nextSibling")},prev:function(e){return F(e,"previousSibling")},nextAll:function(e){return A(e,"nextSibling")},prevAll:function(e){return A(e,"previousSibling")},nextUntil:function(e,t,n){return A(e,"nextSibling",n)},prevUntil:function(e,t,n){return A(e,"previousSibling",n)},siblings:function(e){return _((e.parentNode||{}).firstChild,e)},children:function(e){return _(e.firstChild)},contents:function(e){return L(e,"iframe")?e.contentDocument:(L(e,"template")&&(e=e.content||e),S.merge([],e.childNodes))}},function(e,t){S.fn[e]=function(n,i){var r=S.map(this,t,n);return"Until"!==e.slice(-5)&&(i=n),i&&"string"==typeof i&&(r=S.filter(i,r)),this.length>1&&(I[e]||S.uniqueSort(r),P.test(e)&&r.reverse()),this.pushStack(r)}});var M=/[^\x20\t\r\n\f]+/g;function R(e){return e}function H(e){throw e}function $(e,t,n,i){var r;try{e&&y(r=e.promise)?r.call(e).done(t).fail(n):e&&y(r=e.then)?r.call(e,t,n):t.apply(void 0,[e].slice(i))}catch(e){n.apply(void 0,[e])}}S.Callbacks=function(e){e="string"==typeof e?function(e){var t={};return S.each(e.match(M)||[],function(e,n){t[n]=!0}),t}(e):S.extend({},e);var t,n,i,r,o=[],a=[],s=-1,u=function(){for(r=r||e.once,i=t=!0;a.length;s=-1)for(n=a.shift();++s-1;)o.splice(n,1),n<=s&&s--}),this},has:function(e){return e?S.inArray(e,o)>-1:o.length>0},empty:function(){return o&&(o=[]),this},disable:function(){return r=a=[],o=n="",this},disabled:function(){return!o},lock:function(){return r=a=[],n||t||(o=n=""),this},locked:function(){return!!r},fireWith:function(e,n){return r||(n=[e,(n=n||[]).slice?n.slice():n],a.push(n),t||u()),this},fire:function(){return l.fireWith(this,arguments),this},fired:function(){return!!i}};return l},S.extend({Deferred:function(e){var t=[["notify","progress",S.Callbacks("memory"),S.Callbacks("memory"),2],["resolve","done",S.Callbacks("once memory"),S.Callbacks("once memory"),0,"resolved"],["reject","fail",S.Callbacks("once memory"),S.Callbacks("once memory"),1,"rejected"]],i="pending",r={state:function(){return i},always:function(){return o.done(arguments).fail(arguments),this},catch:function(e){return r.then(null,e)},pipe:function(){var e=arguments;return S.Deferred(function(n){S.each(t,function(t,i){var r=y(e[i[4]])&&e[i[4]];o[i[1]](function(){var e=r&&r.apply(this,arguments);e&&y(e.promise)?e.promise().progress(n.notify).done(n.resolve).fail(n.reject):n[i[0]+"With"](this,r?[e]:arguments)})}),e=null}).promise()},then:function(e,i,r){var o=0;function a(e,t,i,r){return function(){var s=this,u=arguments,l=function(){var n,l;if(!(e=o&&(i!==H&&(s=void 0,u=[n]),t.rejectWith(s,u))}};e?c():(S.Deferred.getStackHook&&(c.stackTrace=S.Deferred.getStackHook()),n.setTimeout(c))}}return S.Deferred(function(n){t[0][3].add(a(0,n,y(r)?r:R,n.notifyWith)),t[1][3].add(a(0,n,y(e)?e:R)),t[2][3].add(a(0,n,y(i)?i:H))}).promise()},promise:function(e){return null!=e?S.extend(e,r):r}},o={};return S.each(t,function(e,n){var a=n[2],s=n[5];r[n[1]]=a.add,s&&a.add(function(){i=s},t[3-e][2].disable,t[3-e][3].disable,t[0][2].lock,t[0][3].lock),a.add(n[3].fire),o[n[0]]=function(){return o[n[0]+"With"](this===o?void 0:this,arguments),this},o[n[0]+"With"]=a.fireWith}),r.promise(o),e&&e.call(o,o),o},when:function(e){var t=arguments.length,n=t,i=Array(n),r=u.call(arguments),o=S.Deferred(),a=function(e){return function(n){i[e]=this,r[e]=arguments.length>1?u.call(arguments):n,--t||o.resolveWith(i,r)}};if(t<=1&&($(e,o.done(a(n)).resolve,o.reject,!t),"pending"===o.state()||y(r[n]&&r[n].then)))return o.then();for(;n--;)$(r[n],a(n),o.reject);return o.promise()}});var B=/^(Eval|Internal|Range|Reference|Syntax|Type|URI)Error$/;S.Deferred.exceptionHook=function(e,t){n.console&&n.console.warn&&e&&B.test(e.name)&&n.console.warn("jQuery.Deferred exception: "+e.message,e.stack,t)},S.readyException=function(e){n.setTimeout(function(){throw e})};var z=S.Deferred();function W(){a.removeEventListener("DOMContentLoaded",W),n.removeEventListener("load",W),S.ready()}S.fn.ready=function(e){return z.then(e).catch(function(e){S.readyException(e)}),this},S.extend({isReady:!1,readyWait:1,ready:function(e){(!0===e?--S.readyWait:S.isReady)||(S.isReady=!0,!0!==e&&--S.readyWait>0||z.resolveWith(a,[S]))}}),S.ready.then=z.then,"complete"===a.readyState||"loading"!==a.readyState&&!a.documentElement.doScroll?n.setTimeout(S.ready):(a.addEventListener("DOMContentLoaded",W),n.addEventListener("load",W));var V=function(e,t,n,i,r,o,a){var s=0,u=e.length,l=null==n;if("object"===k(n))for(s in r=!0,n)V(e,t,s,n[s],!0,o,a);else if(void 0!==i&&(r=!0,y(i)||(a=!0),l&&(a?(t.call(e,i),t=null):(l=t,t=function(e,t,n){return l.call(S(e),n)})),t))for(;s1,null,!0)},removeData:function(e){return this.each(function(){Z.remove(this,e)})}}),S.extend({queue:function(e,t,n){var i;if(e)return t=(t||"fx")+"queue",i=Y.get(e,t),n&&(!i||Array.isArray(n)?i=Y.access(e,t,S.makeArray(n)):i.push(n)),i||[]},dequeue:function(e,t){t=t||"fx";var n=S.queue(e,t),i=n.length,r=n.shift(),o=S._queueHooks(e,t);"inprogress"===r&&(r=n.shift(),i--),r&&("fx"===t&&n.unshift("inprogress"),delete o.stop,r.call(e,function(){S.dequeue(e,t)},o)),!i&&o&&o.empty.fire()},_queueHooks:function(e,t){var n=t+"queueHooks";return Y.get(e,n)||Y.access(e,n,{empty:S.Callbacks("once memory").add(function(){Y.remove(e,[t+"queue",n])})})}}),S.fn.extend({queue:function(e,t){var n=2;return"string"!=typeof e&&(t=e,e="fx",n--),arguments.length\x20\t\r\n\f]+)/i,de=/^$|^module$|\/(?:java|ecma)script/i,ge={option:[1,""],thead:[1,"","
      "],col:[2,"","
      "],tr:[2,"","
      "],td:[3,"","
      "],_default:[0,"",""]};function me(e,t){var n;return n=void 0!==e.getElementsByTagName?e.getElementsByTagName(t||"*"):void 0!==e.querySelectorAll?e.querySelectorAll(t||"*"):[],void 0===t||t&&L(e,t)?S.merge([e],n):n}function ve(e,t){for(var n=0,i=e.length;n-1)r&&r.push(o);else if(l=S.contains(o.ownerDocument,o),a=me(f.appendChild(o),"script"),l&&ve(a),n)for(c=0;o=a[c++];)de.test(o.type||"")&&n.push(o);return f}ye=a.createDocumentFragment().appendChild(a.createElement("div")),(be=a.createElement("input")).setAttribute("type","radio"),be.setAttribute("checked","checked"),be.setAttribute("name","t"),ye.appendChild(be),v.checkClone=ye.cloneNode(!0).cloneNode(!0).lastChild.checked,ye.innerHTML="",v.noCloneChecked=!!ye.cloneNode(!0).lastChild.defaultValue;var ke=a.documentElement,Se=/^key/,Te=/^(?:mouse|pointer|contextmenu|drag|drop)|click/,Ce=/^([^.]*)(?:\.(.+)|)/;function Ee(){return!0}function Ae(){return!1}function _e(){try{return a.activeElement}catch(e){}}function je(e,t,n,i,r,o){var a,s;if("object"==typeof t){for(s in"string"!=typeof n&&(i=i||n,n=void 0),t)je(e,s,n,i,t[s],o);return e}if(null==i&&null==r?(r=n,i=n=void 0):null==r&&("string"==typeof n?(r=i,i=void 0):(r=i,i=n,n=void 0)),!1===r)r=Ae;else if(!r)return e;return 1===o&&(a=r,(r=function(e){return S().off(e),a.apply(this,arguments)}).guid=a.guid||(a.guid=S.guid++)),e.each(function(){S.event.add(this,t,r,i,n)})}S.event={global:{},add:function(e,t,n,i,r){var o,a,s,u,l,c,f,p,h,d,g,m=Y.get(e);if(m)for(n.handler&&(n=(o=n).handler,r=o.selector),r&&S.find.matchesSelector(ke,r),n.guid||(n.guid=S.guid++),(u=m.events)||(u=m.events={}),(a=m.handle)||(a=m.handle=function(t){return void 0!==S&&S.event.triggered!==t.type?S.event.dispatch.apply(e,arguments):void 0}),l=(t=(t||"").match(M)||[""]).length;l--;)h=g=(s=Ce.exec(t[l])||[])[1],d=(s[2]||"").split(".").sort(),h&&(f=S.event.special[h]||{},h=(r?f.delegateType:f.bindType)||h,f=S.event.special[h]||{},c=S.extend({type:h,origType:g,data:i,handler:n,guid:n.guid,selector:r,needsContext:r&&S.expr.match.needsContext.test(r),namespace:d.join(".")},o),(p=u[h])||((p=u[h]=[]).delegateCount=0,f.setup&&!1!==f.setup.call(e,i,d,a)||e.addEventListener&&e.addEventListener(h,a)),f.add&&(f.add.call(e,c),c.handler.guid||(c.handler.guid=n.guid)),r?p.splice(p.delegateCount++,0,c):p.push(c),S.event.global[h]=!0)},remove:function(e,t,n,i,r){var o,a,s,u,l,c,f,p,h,d,g,m=Y.hasData(e)&&Y.get(e);if(m&&(u=m.events)){for(l=(t=(t||"").match(M)||[""]).length;l--;)if(h=g=(s=Ce.exec(t[l])||[])[1],d=(s[2]||"").split(".").sort(),h){for(f=S.event.special[h]||{},p=u[h=(i?f.delegateType:f.bindType)||h]||[],s=s[2]&&new RegExp("(^|\\.)"+d.join("\\.(?:.*\\.|)")+"(\\.|$)"),a=o=p.length;o--;)c=p[o],!r&&g!==c.origType||n&&n.guid!==c.guid||s&&!s.test(c.namespace)||i&&i!==c.selector&&("**"!==i||!c.selector)||(p.splice(o,1),c.selector&&p.delegateCount--,f.remove&&f.remove.call(e,c));a&&!p.length&&(f.teardown&&!1!==f.teardown.call(e,d,m.handle)||S.removeEvent(e,h,m.handle),delete u[h])}else for(h in u)S.event.remove(e,h+t[l],n,i,!0);S.isEmptyObject(u)&&Y.remove(e,"handle events")}},dispatch:function(e){var t,n,i,r,o,a,s=S.event.fix(e),u=new Array(arguments.length),l=(Y.get(this,"events")||{})[s.type]||[],c=S.event.special[s.type]||{};for(u[0]=s,t=1;t=1))for(;l!==this;l=l.parentNode||this)if(1===l.nodeType&&("click"!==e.type||!0!==l.disabled)){for(o=[],a={},n=0;n-1:S.find(r,this,null,[l]).length),a[r]&&o.push(i);o.length&&s.push({elem:l,handlers:o})}return l=this,u\x20\t\r\n\f]*)[^>]*)\/>/gi,Ne=/\s*$/g;function Oe(e,t){return L(e,"table")&&L(11!==t.nodeType?t:t.firstChild,"tr")&&S(e).children("tbody")[0]||e}function Pe(e){return e.type=(null!==e.getAttribute("type"))+"/"+e.type,e}function Ie(e){return"true/"===(e.type||"").slice(0,5)?e.type=e.type.slice(5):e.removeAttribute("type"),e}function Fe(e,t){var n,i,r,o,a,s,u,l;if(1===t.nodeType){if(Y.hasData(e)&&(o=Y.access(e),a=Y.set(t,o),l=o.events))for(r in delete a.handle,a.events={},l)for(n=0,i=l[r].length;n1&&"string"==typeof d&&!v.checkClone&&De.test(d))return e.each(function(r){var o=e.eq(r);g&&(t[0]=d.call(this,r,o.html())),Me(o,t,n,i)});if(p&&(o=(r=xe(t,e[0].ownerDocument,!1,e,i)).firstChild,1===r.childNodes.length&&(r=o),o||i)){for(s=(a=S.map(me(r,"script"),Pe)).length;f")},clone:function(e,t,n){var i,r,o,a,s,u,l,c=e.cloneNode(!0),f=S.contains(e.ownerDocument,e);if(!(v.noCloneChecked||1!==e.nodeType&&11!==e.nodeType||S.isXMLDoc(e)))for(a=me(c),i=0,r=(o=me(e)).length;i0&&ve(a,!f&&me(e,"script")),c},cleanData:function(e){for(var t,n,i,r=S.event.special,o=0;void 0!==(n=e[o]);o++)if(X(n)){if(t=n[Y.expando]){if(t.events)for(i in t.events)r[i]?S.event.remove(n,i):S.removeEvent(n,i,t.handle);n[Y.expando]=void 0}n[Z.expando]&&(n[Z.expando]=void 0)}}}),S.fn.extend({detach:function(e){return Re(this,e,!0)},remove:function(e){return Re(this,e)},text:function(e){return V(this,function(e){return void 0===e?S.text(this):this.empty().each(function(){1!==this.nodeType&&11!==this.nodeType&&9!==this.nodeType||(this.textContent=e)})},null,e,arguments.length)},append:function(){return Me(this,arguments,function(e){1!==this.nodeType&&11!==this.nodeType&&9!==this.nodeType||Oe(this,e).appendChild(e)})},prepend:function(){return Me(this,arguments,function(e){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var t=Oe(this,e);t.insertBefore(e,t.firstChild)}})},before:function(){return Me(this,arguments,function(e){this.parentNode&&this.parentNode.insertBefore(e,this)})},after:function(){return Me(this,arguments,function(e){this.parentNode&&this.parentNode.insertBefore(e,this.nextSibling)})},empty:function(){for(var e,t=0;null!=(e=this[t]);t++)1===e.nodeType&&(S.cleanData(me(e,!1)),e.textContent="");return this},clone:function(e,t){return e=null!=e&&e,t=null==t?e:t,this.map(function(){return S.clone(this,e,t)})},html:function(e){return V(this,function(e){var t=this[0]||{},n=0,i=this.length;if(void 0===e&&1===t.nodeType)return t.innerHTML;if("string"==typeof e&&!Ne.test(e)&&!ge[(he.exec(e)||["",""])[1].toLowerCase()]){e=S.htmlPrefilter(e);try{for(;n=0&&(u+=Math.max(0,Math.ceil(e["offset"+t[0].toUpperCase()+t.slice(1)]-o-u-s-.5))),u}function et(e,t,n){var i=$e(e),r=ze(e,t,i),o="border-box"===S.css(e,"boxSizing",!1,i),a=o;if(He.test(r)){if(!n)return r;r="auto"}return a=a&&(v.boxSizingReliable()||r===e.style[t]),("auto"===r||!parseFloat(r)&&"inline"===S.css(e,"display",!1,i))&&(r=e["offset"+t[0].toUpperCase()+t.slice(1)],a=!0),(r=parseFloat(r)||0)+Ze(e,t,n||(o?"border":"content"),a,i,r)+"px"}function tt(e,t,n,i,r){return new tt.prototype.init(e,t,n,i,r)}S.extend({cssHooks:{opacity:{get:function(e,t){if(t){var n=ze(e,"opacity");return""===n?"1":n}}}},cssNumber:{animationIterationCount:!0,columnCount:!0,fillOpacity:!0,flexGrow:!0,flexShrink:!0,fontWeight:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{},style:function(e,t,n,i){if(e&&3!==e.nodeType&&8!==e.nodeType&&e.style){var r,o,a,s=J(t),u=Ke.test(t),l=e.style;if(u||(t=Ge(s)),a=S.cssHooks[t]||S.cssHooks[s],void 0===n)return a&&"get"in a&&void 0!==(r=a.get(e,!1,i))?r:l[t];"string"===(o=typeof n)&&(r=re.exec(n))&&r[1]&&(n=ue(e,t,r),o="number"),null!=n&&n==n&&("number"===o&&(n+=r&&r[3]||(S.cssNumber[s]?"":"px")),v.clearCloneStyle||""!==n||0!==t.indexOf("background")||(l[t]="inherit"),a&&"set"in a&&void 0===(n=a.set(e,n,i))||(u?l.setProperty(t,n):l[t]=n))}},css:function(e,t,n,i){var r,o,a,s=J(t);return Ke.test(t)||(t=Ge(s)),(a=S.cssHooks[t]||S.cssHooks[s])&&"get"in a&&(r=a.get(e,!0,n)),void 0===r&&(r=ze(e,t,i)),"normal"===r&&t in Qe&&(r=Qe[t]),""===n||n?(o=parseFloat(r),!0===n||isFinite(o)?o||0:r):r}}),S.each(["height","width"],function(e,t){S.cssHooks[t]={get:function(e,n,i){if(n)return!Ve.test(S.css(e,"display"))||e.getClientRects().length&&e.getBoundingClientRect().width?et(e,t,i):se(e,Ue,function(){return et(e,t,i)})},set:function(e,n,i){var r,o=$e(e),a="border-box"===S.css(e,"boxSizing",!1,o),s=i&&Ze(e,t,i,a,o);return a&&v.scrollboxSize()===o.position&&(s-=Math.ceil(e["offset"+t[0].toUpperCase()+t.slice(1)]-parseFloat(o[t])-Ze(e,t,"border",!1,o)-.5)),s&&(r=re.exec(n))&&"px"!==(r[3]||"px")&&(e.style[t]=n,n=S.css(e,t)),Ye(0,n,s)}}}),S.cssHooks.marginLeft=We(v.reliableMarginLeft,function(e,t){if(t)return(parseFloat(ze(e,"marginLeft"))||e.getBoundingClientRect().left-se(e,{marginLeft:0},function(){return e.getBoundingClientRect().left}))+"px"}),S.each({margin:"",padding:"",border:"Width"},function(e,t){S.cssHooks[e+t]={expand:function(n){for(var i=0,r={},o="string"==typeof n?n.split(" "):[n];i<4;i++)r[e+oe[i]+t]=o[i]||o[i-2]||o[0];return r}},"margin"!==e&&(S.cssHooks[e+t].set=Ye)}),S.fn.extend({css:function(e,t){return V(this,function(e,t,n){var i,r,o={},a=0;if(Array.isArray(t)){for(i=$e(e),r=t.length;a1)}}),S.Tween=tt,tt.prototype={constructor:tt,init:function(e,t,n,i,r,o){this.elem=e,this.prop=n,this.easing=r||S.easing._default,this.options=t,this.start=this.now=this.cur(),this.end=i,this.unit=o||(S.cssNumber[n]?"":"px")},cur:function(){var e=tt.propHooks[this.prop];return e&&e.get?e.get(this):tt.propHooks._default.get(this)},run:function(e){var t,n=tt.propHooks[this.prop];return this.options.duration?this.pos=t=S.easing[this.easing](e,this.options.duration*e,0,1,this.options.duration):this.pos=t=e,this.now=(this.end-this.start)*t+this.start,this.options.step&&this.options.step.call(this.elem,this.now,this),n&&n.set?n.set(this):tt.propHooks._default.set(this),this}},tt.prototype.init.prototype=tt.prototype,tt.propHooks={_default:{get:function(e){var t;return 1!==e.elem.nodeType||null!=e.elem[e.prop]&&null==e.elem.style[e.prop]?e.elem[e.prop]:(t=S.css(e.elem,e.prop,""))&&"auto"!==t?t:0},set:function(e){S.fx.step[e.prop]?S.fx.step[e.prop](e):1!==e.elem.nodeType||null==e.elem.style[S.cssProps[e.prop]]&&!S.cssHooks[e.prop]?e.elem[e.prop]=e.now:S.style(e.elem,e.prop,e.now+e.unit)}}},tt.propHooks.scrollTop=tt.propHooks.scrollLeft={set:function(e){e.elem.nodeType&&e.elem.parentNode&&(e.elem[e.prop]=e.now)}},S.easing={linear:function(e){return e},swing:function(e){return.5-Math.cos(e*Math.PI)/2},_default:"swing"},S.fx=tt.prototype.init,S.fx.step={};var nt,it,rt=/^(?:toggle|show|hide)$/,ot=/queueHooks$/;function at(){it&&(!1===a.hidden&&n.requestAnimationFrame?n.requestAnimationFrame(at):n.setTimeout(at,S.fx.interval),S.fx.tick())}function st(){return n.setTimeout(function(){nt=void 0}),nt=Date.now()}function ut(e,t){var n,i=0,r={height:e};for(t=t?1:0;i<4;i+=2-t)r["margin"+(n=oe[i])]=r["padding"+n]=e;return t&&(r.opacity=r.width=e),r}function lt(e,t,n){for(var i,r=(ct.tweeners[t]||[]).concat(ct.tweeners["*"]),o=0,a=r.length;o1)},removeAttr:function(e){return this.each(function(){S.removeAttr(this,e)})}}),S.extend({attr:function(e,t,n){var i,r,o=e.nodeType;if(3!==o&&8!==o&&2!==o)return void 0===e.getAttribute?S.prop(e,t,n):(1===o&&S.isXMLDoc(e)||(r=S.attrHooks[t.toLowerCase()]||(S.expr.match.bool.test(t)?ft:void 0)),void 0!==n?null===n?void S.removeAttr(e,t):r&&"set"in r&&void 0!==(i=r.set(e,n,t))?i:(e.setAttribute(t,n+""),n):r&&"get"in r&&null!==(i=r.get(e,t))?i:null==(i=S.find.attr(e,t))?void 0:i)},attrHooks:{type:{set:function(e,t){if(!v.radioValue&&"radio"===t&&L(e,"input")){var n=e.value;return e.setAttribute("type",t),n&&(e.value=n),t}}}},removeAttr:function(e,t){var n,i=0,r=t&&t.match(M);if(r&&1===e.nodeType)for(;n=r[i++];)e.removeAttribute(n)}}),ft={set:function(e,t,n){return!1===t?S.removeAttr(e,n):e.setAttribute(n,n),n}},S.each(S.expr.match.bool.source.match(/\w+/g),function(e,t){var n=pt[t]||S.find.attr;pt[t]=function(e,t,i){var r,o,a=t.toLowerCase();return i||(o=pt[a],pt[a]=r,r=null!=n(e,t,i)?a:null,pt[a]=o),r}});var ht=/^(?:input|select|textarea|button)$/i,dt=/^(?:a|area)$/i;function gt(e){return(e.match(M)||[]).join(" ")}function mt(e){return e.getAttribute&&e.getAttribute("class")||""}function vt(e){return Array.isArray(e)?e:"string"==typeof e&&e.match(M)||[]}S.fn.extend({prop:function(e,t){return V(this,S.prop,e,t,arguments.length>1)},removeProp:function(e){return this.each(function(){delete this[S.propFix[e]||e]})}}),S.extend({prop:function(e,t,n){var i,r,o=e.nodeType;if(3!==o&&8!==o&&2!==o)return 1===o&&S.isXMLDoc(e)||(t=S.propFix[t]||t,r=S.propHooks[t]),void 0!==n?r&&"set"in r&&void 0!==(i=r.set(e,n,t))?i:e[t]=n:r&&"get"in r&&null!==(i=r.get(e,t))?i:e[t]},propHooks:{tabIndex:{get:function(e){var t=S.find.attr(e,"tabindex");return t?parseInt(t,10):ht.test(e.nodeName)||dt.test(e.nodeName)&&e.href?0:-1}}},propFix:{for:"htmlFor",class:"className"}}),v.optSelected||(S.propHooks.selected={get:function(e){var t=e.parentNode;return t&&t.parentNode&&t.parentNode.selectedIndex,null},set:function(e){var t=e.parentNode;t&&(t.selectedIndex,t.parentNode&&t.parentNode.selectedIndex)}}),S.each(["tabIndex","readOnly","maxLength","cellSpacing","cellPadding","rowSpan","colSpan","useMap","frameBorder","contentEditable"],function(){S.propFix[this.toLowerCase()]=this}),S.fn.extend({addClass:function(e){var t,n,i,r,o,a,s,u=0;if(y(e))return this.each(function(t){S(this).addClass(e.call(this,t,mt(this)))});if((t=vt(e)).length)for(;n=this[u++];)if(r=mt(n),i=1===n.nodeType&&" "+gt(r)+" "){for(a=0;o=t[a++];)i.indexOf(" "+o+" ")<0&&(i+=o+" ");r!==(s=gt(i))&&n.setAttribute("class",s)}return this},removeClass:function(e){var t,n,i,r,o,a,s,u=0;if(y(e))return this.each(function(t){S(this).removeClass(e.call(this,t,mt(this)))});if(!arguments.length)return this.attr("class","");if((t=vt(e)).length)for(;n=this[u++];)if(r=mt(n),i=1===n.nodeType&&" "+gt(r)+" "){for(a=0;o=t[a++];)for(;i.indexOf(" "+o+" ")>-1;)i=i.replace(" "+o+" "," ");r!==(s=gt(i))&&n.setAttribute("class",s)}return this},toggleClass:function(e,t){var n=typeof e,i="string"===n||Array.isArray(e);return"boolean"==typeof t&&i?t?this.addClass(e):this.removeClass(e):y(e)?this.each(function(n){S(this).toggleClass(e.call(this,n,mt(this),t),t)}):this.each(function(){var t,r,o,a;if(i)for(r=0,o=S(this),a=vt(e);t=a[r++];)o.hasClass(t)?o.removeClass(t):o.addClass(t);else void 0!==e&&"boolean"!==n||((t=mt(this))&&Y.set(this,"__className__",t),this.setAttribute&&this.setAttribute("class",t||!1===e?"":Y.get(this,"__className__")||""))})},hasClass:function(e){var t,n,i=0;for(t=" "+e+" ";n=this[i++];)if(1===n.nodeType&&(" "+gt(mt(n))+" ").indexOf(t)>-1)return!0;return!1}});var yt=/\r/g;S.fn.extend({val:function(e){var t,n,i,r=this[0];return arguments.length?(i=y(e),this.each(function(n){var r;1===this.nodeType&&(null==(r=i?e.call(this,n,S(this).val()):e)?r="":"number"==typeof r?r+="":Array.isArray(r)&&(r=S.map(r,function(e){return null==e?"":e+""})),(t=S.valHooks[this.type]||S.valHooks[this.nodeName.toLowerCase()])&&"set"in t&&void 0!==t.set(this,r,"value")||(this.value=r))})):r?(t=S.valHooks[r.type]||S.valHooks[r.nodeName.toLowerCase()])&&"get"in t&&void 0!==(n=t.get(r,"value"))?n:"string"==typeof(n=r.value)?n.replace(yt,""):null==n?"":n:void 0}}),S.extend({valHooks:{option:{get:function(e){var t=S.find.attr(e,"value");return null!=t?t:gt(S.text(e))}},select:{get:function(e){var t,n,i,r=e.options,o=e.selectedIndex,a="select-one"===e.type,s=a?null:[],u=a?o+1:r.length;for(i=o<0?u:a?o:0;i-1)&&(n=!0);return n||(e.selectedIndex=-1),o}}}}),S.each(["radio","checkbox"],function(){S.valHooks[this]={set:function(e,t){if(Array.isArray(t))return e.checked=S.inArray(S(e).val(),t)>-1}},v.checkOn||(S.valHooks[this].get=function(e){return null===e.getAttribute("value")?"on":e.value})}),v.focusin="onfocusin"in n;var bt=/^(?:focusinfocus|focusoutblur)$/,wt=function(e){e.stopPropagation()};S.extend(S.event,{trigger:function(e,t,i,r){var o,s,u,l,c,f,p,h,g=[i||a],m=d.call(e,"type")?e.type:e,v=d.call(e,"namespace")?e.namespace.split("."):[];if(s=h=u=i=i||a,3!==i.nodeType&&8!==i.nodeType&&!bt.test(m+S.event.triggered)&&(m.indexOf(".")>-1&&(m=(v=m.split(".")).shift(),v.sort()),c=m.indexOf(":")<0&&"on"+m,(e=e[S.expando]?e:new S.Event(m,"object"==typeof e&&e)).isTrigger=r?2:3,e.namespace=v.join("."),e.rnamespace=e.namespace?new RegExp("(^|\\.)"+v.join("\\.(?:.*\\.|)")+"(\\.|$)"):null,e.result=void 0,e.target||(e.target=i),t=null==t?[e]:S.makeArray(t,[e]),p=S.event.special[m]||{},r||!p.trigger||!1!==p.trigger.apply(i,t))){if(!r&&!p.noBubble&&!b(i)){for(l=p.delegateType||m,bt.test(l+m)||(s=s.parentNode);s;s=s.parentNode)g.push(s),u=s;u===(i.ownerDocument||a)&&g.push(u.defaultView||u.parentWindow||n)}for(o=0;(s=g[o++])&&!e.isPropagationStopped();)h=s,e.type=o>1?l:p.bindType||m,(f=(Y.get(s,"events")||{})[e.type]&&Y.get(s,"handle"))&&f.apply(s,t),(f=c&&s[c])&&f.apply&&X(s)&&(e.result=f.apply(s,t),!1===e.result&&e.preventDefault());return e.type=m,r||e.isDefaultPrevented()||p._default&&!1!==p._default.apply(g.pop(),t)||!X(i)||c&&y(i[m])&&!b(i)&&((u=i[c])&&(i[c]=null),S.event.triggered=m,e.isPropagationStopped()&&h.addEventListener(m,wt),i[m](),e.isPropagationStopped()&&h.removeEventListener(m,wt),S.event.triggered=void 0,u&&(i[c]=u)),e.result}},simulate:function(e,t,n){var i=S.extend(new S.Event,n,{type:e,isSimulated:!0});S.event.trigger(i,null,t)}}),S.fn.extend({trigger:function(e,t){return this.each(function(){S.event.trigger(e,t,this)})},triggerHandler:function(e,t){var n=this[0];if(n)return S.event.trigger(e,t,n,!0)}}),v.focusin||S.each({focus:"focusin",blur:"focusout"},function(e,t){var n=function(e){S.event.simulate(t,e.target,S.event.fix(e))};S.event.special[t]={setup:function(){var i=this.ownerDocument||this,r=Y.access(i,t);r||i.addEventListener(e,n,!0),Y.access(i,t,(r||0)+1)},teardown:function(){var i=this.ownerDocument||this,r=Y.access(i,t)-1;r?Y.access(i,t,r):(i.removeEventListener(e,n,!0),Y.remove(i,t))}}});var xt=n.location,kt=Date.now(),St=/\?/;S.parseXML=function(e){var t;if(!e||"string"!=typeof e)return null;try{t=(new n.DOMParser).parseFromString(e,"text/xml")}catch(e){t=void 0}return t&&!t.getElementsByTagName("parsererror").length||S.error("Invalid XML: "+e),t};var Tt=/\[\]$/,Ct=/\r?\n/g,Et=/^(?:submit|button|image|reset|file)$/i,At=/^(?:input|select|textarea|keygen)/i;function _t(e,t,n,i){var r;if(Array.isArray(t))S.each(t,function(t,r){n||Tt.test(e)?i(e,r):_t(e+"["+("object"==typeof r&&null!=r?t:"")+"]",r,n,i)});else if(n||"object"!==k(t))i(e,t);else for(r in t)_t(e+"["+r+"]",t[r],n,i)}S.param=function(e,t){var n,i=[],r=function(e,t){var n=y(t)?t():t;i[i.length]=encodeURIComponent(e)+"="+encodeURIComponent(null==n?"":n)};if(Array.isArray(e)||e.jquery&&!S.isPlainObject(e))S.each(e,function(){r(this.name,this.value)});else for(n in e)_t(n,e[n],t,r);return i.join("&")},S.fn.extend({serialize:function(){return S.param(this.serializeArray())},serializeArray:function(){return this.map(function(){var e=S.prop(this,"elements");return e?S.makeArray(e):this}).filter(function(){var e=this.type;return this.name&&!S(this).is(":disabled")&&At.test(this.nodeName)&&!Et.test(e)&&(this.checked||!pe.test(e))}).map(function(e,t){var n=S(this).val();return null==n?null:Array.isArray(n)?S.map(n,function(e){return{name:t.name,value:e.replace(Ct,"\r\n")}}):{name:t.name,value:n.replace(Ct,"\r\n")}}).get()}});var jt=/%20/g,Lt=/#.*$/,Nt=/([?&])_=[^&]*/,Dt=/^(.*?):[ \t]*([^\r\n]*)$/gm,qt=/^(?:GET|HEAD)$/,Ot=/^\/\//,Pt={},It={},Ft="*/".concat("*"),Mt=a.createElement("a");function Rt(e){return function(t,n){"string"!=typeof t&&(n=t,t="*");var i,r=0,o=t.toLowerCase().match(M)||[];if(y(n))for(;i=o[r++];)"+"===i[0]?(i=i.slice(1)||"*",(e[i]=e[i]||[]).unshift(n)):(e[i]=e[i]||[]).push(n)}}function Ht(e,t,n,i){var r={},o=e===It;function a(s){var u;return r[s]=!0,S.each(e[s]||[],function(e,s){var l=s(t,n,i);return"string"!=typeof l||o||r[l]?o?!(u=l):void 0:(t.dataTypes.unshift(l),a(l),!1)}),u}return a(t.dataTypes[0])||!r["*"]&&a("*")}function $t(e,t){var n,i,r=S.ajaxSettings.flatOptions||{};for(n in t)void 0!==t[n]&&((r[n]?e:i||(i={}))[n]=t[n]);return i&&S.extend(!0,e,i),e}Mt.href=xt.href,S.extend({active:0,lastModified:{},etag:{},ajaxSettings:{url:xt.href,type:"GET",isLocal:/^(?:about|app|app-storage|.+-extension|file|res|widget):$/.test(xt.protocol),global:!0,processData:!0,async:!0,contentType:"application/x-www-form-urlencoded; charset=UTF-8",accepts:{"*":Ft,text:"text/plain",html:"text/html",xml:"application/xml, text/xml",json:"application/json, text/javascript"},contents:{xml:/\bxml\b/,html:/\bhtml/,json:/\bjson\b/},responseFields:{xml:"responseXML",text:"responseText",json:"responseJSON"},converters:{"* text":String,"text html":!0,"text json":JSON.parse,"text xml":S.parseXML},flatOptions:{url:!0,context:!0}},ajaxSetup:function(e,t){return t?$t($t(e,S.ajaxSettings),t):$t(S.ajaxSettings,e)},ajaxPrefilter:Rt(Pt),ajaxTransport:Rt(It),ajax:function(e,t){"object"==typeof e&&(t=e,e=void 0),t=t||{};var i,r,o,s,u,l,c,f,p,h,d=S.ajaxSetup({},t),g=d.context||d,m=d.context&&(g.nodeType||g.jquery)?S(g):S.event,v=S.Deferred(),y=S.Callbacks("once memory"),b=d.statusCode||{},w={},x={},k="canceled",T={readyState:0,getResponseHeader:function(e){var t;if(c){if(!s)for(s={};t=Dt.exec(o);)s[t[1].toLowerCase()]=t[2];t=s[e.toLowerCase()]}return null==t?null:t},getAllResponseHeaders:function(){return c?o:null},setRequestHeader:function(e,t){return null==c&&(e=x[e.toLowerCase()]=x[e.toLowerCase()]||e,w[e]=t),this},overrideMimeType:function(e){return null==c&&(d.mimeType=e),this},statusCode:function(e){var t;if(e)if(c)T.always(e[T.status]);else for(t in e)b[t]=[b[t],e[t]];return this},abort:function(e){var t=e||k;return i&&i.abort(t),C(0,t),this}};if(v.promise(T),d.url=((e||d.url||xt.href)+"").replace(Ot,xt.protocol+"//"),d.type=t.method||t.type||d.method||d.type,d.dataTypes=(d.dataType||"*").toLowerCase().match(M)||[""],null==d.crossDomain){l=a.createElement("a");try{l.href=d.url,l.href=l.href,d.crossDomain=Mt.protocol+"//"+Mt.host!=l.protocol+"//"+l.host}catch(e){d.crossDomain=!0}}if(d.data&&d.processData&&"string"!=typeof d.data&&(d.data=S.param(d.data,d.traditional)),Ht(Pt,d,t,T),c)return T;for(p in(f=S.event&&d.global)&&0==S.active++&&S.event.trigger("ajaxStart"),d.type=d.type.toUpperCase(),d.hasContent=!qt.test(d.type),r=d.url.replace(Lt,""),d.hasContent?d.data&&d.processData&&0===(d.contentType||"").indexOf("application/x-www-form-urlencoded")&&(d.data=d.data.replace(jt,"+")):(h=d.url.slice(r.length),d.data&&(d.processData||"string"==typeof d.data)&&(r+=(St.test(r)?"&":"?")+d.data,delete d.data),!1===d.cache&&(r=r.replace(Nt,"$1"),h=(St.test(r)?"&":"?")+"_="+kt+++h),d.url=r+h),d.ifModified&&(S.lastModified[r]&&T.setRequestHeader("If-Modified-Since",S.lastModified[r]),S.etag[r]&&T.setRequestHeader("If-None-Match",S.etag[r])),(d.data&&d.hasContent&&!1!==d.contentType||t.contentType)&&T.setRequestHeader("Content-Type",d.contentType),T.setRequestHeader("Accept",d.dataTypes[0]&&d.accepts[d.dataTypes[0]]?d.accepts[d.dataTypes[0]]+("*"!==d.dataTypes[0]?", "+Ft+"; q=0.01":""):d.accepts["*"]),d.headers)T.setRequestHeader(p,d.headers[p]);if(d.beforeSend&&(!1===d.beforeSend.call(g,T,d)||c))return T.abort();if(k="abort",y.add(d.complete),T.done(d.success),T.fail(d.error),i=Ht(It,d,t,T)){if(T.readyState=1,f&&m.trigger("ajaxSend",[T,d]),c)return T;d.async&&d.timeout>0&&(u=n.setTimeout(function(){T.abort("timeout")},d.timeout));try{c=!1,i.send(w,C)}catch(e){if(c)throw e;C(-1,e)}}else C(-1,"No Transport");function C(e,t,a,s){var l,p,h,w,x,k=t;c||(c=!0,u&&n.clearTimeout(u),i=void 0,o=s||"",T.readyState=e>0?4:0,l=e>=200&&e<300||304===e,a&&(w=function(e,t,n){for(var i,r,o,a,s=e.contents,u=e.dataTypes;"*"===u[0];)u.shift(),void 0===i&&(i=e.mimeType||t.getResponseHeader("Content-Type"));if(i)for(r in s)if(s[r]&&s[r].test(i)){u.unshift(r);break}if(u[0]in n)o=u[0];else{for(r in n){if(!u[0]||e.converters[r+" "+u[0]]){o=r;break}a||(a=r)}o=o||a}if(o)return o!==u[0]&&u.unshift(o),n[o]}(d,T,a)),w=function(e,t,n,i){var r,o,a,s,u,l={},c=e.dataTypes.slice();if(c[1])for(a in e.converters)l[a.toLowerCase()]=e.converters[a];for(o=c.shift();o;)if(e.responseFields[o]&&(n[e.responseFields[o]]=t),!u&&i&&e.dataFilter&&(t=e.dataFilter(t,e.dataType)),u=o,o=c.shift())if("*"===o)o=u;else if("*"!==u&&u!==o){if(!(a=l[u+" "+o]||l["* "+o]))for(r in l)if((s=r.split(" "))[1]===o&&(a=l[u+" "+s[0]]||l["* "+s[0]])){!0===a?a=l[r]:!0!==l[r]&&(o=s[0],c.unshift(s[1]));break}if(!0!==a)if(a&&e.throws)t=a(t);else try{t=a(t)}catch(e){return{state:"parsererror",error:a?e:"No conversion from "+u+" to "+o}}}return{state:"success",data:t}}(d,w,T,l),l?(d.ifModified&&((x=T.getResponseHeader("Last-Modified"))&&(S.lastModified[r]=x),(x=T.getResponseHeader("etag"))&&(S.etag[r]=x)),204===e||"HEAD"===d.type?k="nocontent":304===e?k="notmodified":(k=w.state,p=w.data,l=!(h=w.error))):(h=k,!e&&k||(k="error",e<0&&(e=0))),T.status=e,T.statusText=(t||k)+"",l?v.resolveWith(g,[p,k,T]):v.rejectWith(g,[T,k,h]),T.statusCode(b),b=void 0,f&&m.trigger(l?"ajaxSuccess":"ajaxError",[T,d,l?p:h]),y.fireWith(g,[T,k]),f&&(m.trigger("ajaxComplete",[T,d]),--S.active||S.event.trigger("ajaxStop")))}return T},getJSON:function(e,t,n){return S.get(e,t,n,"json")},getScript:function(e,t){return S.get(e,void 0,t,"script")}}),S.each(["get","post"],function(e,t){S[t]=function(e,n,i,r){return y(n)&&(r=r||i,i=n,n=void 0),S.ajax(S.extend({url:e,type:t,dataType:r,data:n,success:i},S.isPlainObject(e)&&e))}}),S._evalUrl=function(e){return S.ajax({url:e,type:"GET",dataType:"script",cache:!0,async:!1,global:!1,throws:!0})},S.fn.extend({wrapAll:function(e){var t;return this[0]&&(y(e)&&(e=e.call(this[0])),t=S(e,this[0].ownerDocument).eq(0).clone(!0),this[0].parentNode&&t.insertBefore(this[0]),t.map(function(){for(var e=this;e.firstElementChild;)e=e.firstElementChild;return e}).append(this)),this},wrapInner:function(e){return y(e)?this.each(function(t){S(this).wrapInner(e.call(this,t))}):this.each(function(){var t=S(this),n=t.contents();n.length?n.wrapAll(e):t.append(e)})},wrap:function(e){var t=y(e);return this.each(function(n){S(this).wrapAll(t?e.call(this,n):e)})},unwrap:function(e){return this.parent(e).not("body").each(function(){S(this).replaceWith(this.childNodes)}),this}}),S.expr.pseudos.hidden=function(e){return!S.expr.pseudos.visible(e)},S.expr.pseudos.visible=function(e){return!!(e.offsetWidth||e.offsetHeight||e.getClientRects().length)},S.ajaxSettings.xhr=function(){try{return new n.XMLHttpRequest}catch(e){}};var Bt={0:200,1223:204},zt=S.ajaxSettings.xhr();v.cors=!!zt&&"withCredentials"in zt,v.ajax=zt=!!zt,S.ajaxTransport(function(e){var t,i;if(v.cors||zt&&!e.crossDomain)return{send:function(r,o){var a,s=e.xhr();if(s.open(e.type,e.url,e.async,e.username,e.password),e.xhrFields)for(a in e.xhrFields)s[a]=e.xhrFields[a];for(a in e.mimeType&&s.overrideMimeType&&s.overrideMimeType(e.mimeType),e.crossDomain||r["X-Requested-With"]||(r["X-Requested-With"]="XMLHttpRequest"),r)s.setRequestHeader(a,r[a]);t=function(e){return function(){t&&(t=i=s.onload=s.onerror=s.onabort=s.ontimeout=s.onreadystatechange=null,"abort"===e?s.abort():"error"===e?"number"!=typeof s.status?o(0,"error"):o(s.status,s.statusText):o(Bt[s.status]||s.status,s.statusText,"text"!==(s.responseType||"text")||"string"!=typeof s.responseText?{binary:s.response}:{text:s.responseText},s.getAllResponseHeaders()))}},s.onload=t(),i=s.onerror=s.ontimeout=t("error"),void 0!==s.onabort?s.onabort=i:s.onreadystatechange=function(){4===s.readyState&&n.setTimeout(function(){t&&i()})},t=t("abort");try{s.send(e.hasContent&&e.data||null)}catch(e){if(t)throw e}},abort:function(){t&&t()}}}),S.ajaxPrefilter(function(e){e.crossDomain&&(e.contents.script=!1)}),S.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/\b(?:java|ecma)script\b/},converters:{"text script":function(e){return S.globalEval(e),e}}}),S.ajaxPrefilter("script",function(e){void 0===e.cache&&(e.cache=!1),e.crossDomain&&(e.type="GET")}),S.ajaxTransport("script",function(e){var t,n;if(e.crossDomain)return{send:function(i,r){t=S("