From 3ba391654cfe85c4b337de3c404d327327cca588 Mon Sep 17 00:00:00 2001 From: Adam Tomat Date: Mon, 14 Feb 2022 16:26:53 +0000 Subject: [PATCH] Tweak UI - Hide tabs by default and tweak their styling - Reduce how often clicking search results fails to trigger --- frontend/dist/css/primer.css | 16 +- frontend/dist/css/primer.min.css | 2 +- frontend/dist/js/primer.js | 2412 ++++++++++++++++------ frontend/dist/js/primer.min.js | 2 +- frontend/src/js/partials/pattern.js | 22 +- frontend/src/js/partials/search.js | 2 +- frontend/src/sass/partials/_pattern.scss | 8 +- 7 files changed, 1842 insertions(+), 622 deletions(-) diff --git a/frontend/dist/css/primer.css b/frontend/dist/css/primer.css index 78f5bf6..eba3b69 100644 --- a/frontend/dist/css/primer.css +++ b/frontend/dist/css/primer.css @@ -820,7 +820,7 @@ } .primer-pattern__content { - margin: 0 12px 12px; + margin: 0 12px; padding: 16px; border: 1px solid rgba(151, 151, 151, 0.17); } @@ -829,6 +829,12 @@ padding: 0 12px 12px; } +.primer-tabs-toc { + border-right: 1px solid rgba(151, 151, 151, 0.17); + border-left: 1px solid rgba(151, 151, 151, 0.17); + background: #fdfdfd; +} + .primer-tab__title, .primer-tabs-toc__link { -webkit-font-smoothing: antialiased; @@ -1036,6 +1042,14 @@ code[class*="language-"] { hyphens: none; } +pre[class*="language-"]::-moz-selection, +code[class*="language-"]::-moz-selection, +pre[class*="language-"]::mozselection, +code[class*="language-"]::mozselection { + text-shadow: none; + background: #b3d4fc; +} + pre[class*="language-"]::selection, code[class*="language-"]::selection, pre[class*="language-"]::mozselection, diff --git a/frontend/dist/css/primer.min.css b/frontend/dist/css/primer.min.css index 5cebb68..d1c5aaf 100644 --- a/frontend/dist/css/primer.min.css +++ b/frontend/dist/css/primer.min.css @@ -1 +1 @@ -.primer-burger,.primer-enhanced .primer-nav-item__link,.primer-enhanced .primer-sidebar-group{cursor:pointer}.primer-pattern__header,.primer-sidebar{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Roboto,sans-serif}.primer-sidebar{overflow:visible;background:#fff;font-weight:400}.primer-logo{overflow:hidden;display:block;margin:24px 16px;height:60px;text-indent:-600px;background:url(../img/logo.svg) center no-repeat}.primer-sidebar__nav{-webkit-transition:opacity 150ms ease;transition:opacity 150ms ease}.primer-sidebar-group>.primer-nav-items{display:none;border-bottom:1px solid rgba(151,151,151,.17)}.primer-sidebar-group--open>.primer-nav-items{display:block}.primer-sidebar-group__title{position:relative;display:block;padding:17.6px 16px 17.6px 44.8px;font-size:14.4px;font-weight:500;color:#606163;background-color:#fff;border-bottom:1px solid rgba(151,151,151,.17)}.primer-sidebar-group__title:before{position:absolute;top:0;left:0;width:44.8px;height:96%;background-position:center;background-repeat:no-repeat;content:'';opacity:.7}.primer-sidebar-group__title+.primer-nav-items{position:relative;padding:8px 0;background:#F9FAFC}.primer-sidebar-group__title+.primer-nav-items:before{position:absolute;top:0;left:0;height:100%;width:6px;background:#D8DDE3;content:''}.primer-nav-item__group-link{width:22px;height:15px;overflow:hidden;text-indent:-1000%;background:url(../img/eye.svg) center no-repeat;opacity:0;-webkit-transition:opacity .3s ease;transition:opacity .3s ease}.primer-nav-item__group-link:hover{background-image:url(../img/eye-highlight.svg)}.primer-sidebar-group--documentation .primer-sidebar-group__title:before{background-image:url(../img/document.svg)}.primer-sidebar-group--patterns .primer-sidebar-group__title:before{background-image:url(../img/pattern.svg)}.primer-sidebar-group--templates .primer-sidebar-group__title:before{background-image:url(../img/template.svg)}.primer-nav-items{margin:0;padding:0;font-size:14.4px;list-style:none}.primer-nav-item__link{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:14.4px 16px;color:#7a7c7d;text-decoration:none;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.primer-nav-item--current>.primer-nav-item__link{color:#000;font-weight:500}.primer-nav-item--current>.primer-nav-item__link:hover{color:#000}.primer-nav-item__link:hover{background:rgba(0,0,0,.02);color:#7a7c7d;text-decoration:none}.primer-nav-item__link:hover .primer-nav-item__group-link{opacity:1}.primer-nav-item__link:before{position:absolute;top:0;left:0;height:100%;width:6px;background:#D8DDE3;content:''}.primer-nav-items--level-1 .primer-nav-item__link{padding-left:41.6px}.primer-nav-items--level-2 .primer-nav-item__link{padding-left:67.2px}.primer-nav-items--level-3 .primer-nav-item__link{padding-left:92.8px}.primer-nav-items--level-4 .primer-nav-item__link{padding-left:118.4px}.primer-nav-items--level-5 .primer-nav-item__link{padding-left:144px}.primer-nav-items--level-6 .primer-nav-item__link{padding-left:169.6px}.primer-nav-items--level-7 .primer-nav-item__link{padding-left:195.2px}.primer-nav-items--level-8 .primer-nav-item__link{padding-left:220.8px}.primer-nav-items--level-9 .primer-nav-item__link{padding-left:246.4px}.primer-nav-items--level-10 .primer-nav-item__link{padding-left:272px}.primer-nav-item__link-title{position:relative;overflow:hidden;display:block;padding-left:28.8px;padding-right:8px;white-space:nowrap;text-overflow:ellipsis;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.primer-nav-item--has-children>.primer-nav-item__link>.primer-nav-item__link-title:before{position:absolute;top:0;left:0;width:16px;height:92%;background:url(../img/chevron.svg) center no-repeat;-webkit-transform-origin:center;transform-origin:center;-webkit-transition:-webkit-transform 150ms ease;transition:-webkit-transform 150ms ease;transition:transform 150ms ease;transition:transform 150ms ease,-webkit-transform 150ms ease;opacity:.4;content:''}.primer-search,.primer-search__control{position:relative}.primer-nav-item--has-children.primer-nav-item--open>.primer-nav-item__link>.primer-nav-item__link-title:before{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.primer-nav-item--current>.primer-nav-item__link:before{background:#809cb9}.primer-nav-item--has-children .primer-nav-items{display:none}.primer-nav-item--has-children.primer-nav-item--open>.primer-nav-items{display:block}.primer-sidebar--searching .primer-sidebar__nav{opacity:.2}.primer-search-container{min-height:52px}.primer-search{padding:0 16px 16px}.primer-search__label{position:absolute;top:0;left:0;padding:8px 16px;width:100%;width:calc(100% - 32px);height:100%;height:calc(100% - 16px);font-size:16px;color:rgba(0,0,0,.55)}.primer-search__input{display:block;padding:8px 16px;width:100%;width:calc(100% - 32px);font-size:16px;background:#EEF2F5;border:1px solid #EEF2F5;border-radius:5px;-webkit-transition:border-color 150ms ease;transition:border-color 150ms ease}.primer-search__input:focus{outline:0;border-color:#ced9e2}.primer-search--focus .primer-search__label{display:none}.primer-search__results{position:absolute;right:16px;left:16px;left:calc($primer-search-padding-horizontal + 1px);z-index:100;padding:0;margin:8px 0 0;width:100%;width:calc(100% - 32px);max-height:400px;overflow:scroll;opacity:0;background:#fff;-webkit-box-shadow:0 2px 14px rgba(0,0,0,.16);box-shadow:0 2px 14px rgba(0,0,0,.16);border-radius:4px;list-style:none}.primer-sidebar--searching .primer-search__results{opacity:1}.primer-search__result+.primer-search__result{border-top:1px solid rgba(151,151,151,.17)}.primer-search__result--empty{padding:16px;font-size:9.6px;text-align:center;color:rgba(0,0,0,.5)}.primer-search__result-link{display:block;padding:12px;color:#7a7c7d;text-decoration:none}.primer-search__result--current .primer-search__result-link .primer-search__result-title,.primer-search__result-link:hover .primer-search__result-title{color:#000}.primer-search__result-link:hover{background:rgba(0,0,0,.02)}.primer-search__result--current .primer-search__result-link{background:rgba(188,194,200,.5)}.primer-search__result-title{display:block;font-size:14.4px}.primer-search__result-id{display:block;margin-top:4px;font-size:12.8px;opacity:.7}.primer-pattern__header,.primer-sidebar--small{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox}.primer-search__result-id,.primer-search__result-title{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.primer-sidebar--small{position:relative;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.primer-sidebar--small .primer-logo{margin-top:0;margin-bottom:0;min-width:100px;background-size:contain;background-position-x:left}.primer-sidebar--small .primer-search-container{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.primer-sidebar--small .primer-search{padding-bottom:0}.primer-sidebar--small .primer-sidebar__nav{width:100%}.primer-sidebar--small .primer-sidebar__nav[hidden]{display:none}@media (max-width:400px){.primer-sidebar--small{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.primer-sidebar--small .primer-search-container{width:100%;-webkit-box-flex:initial;-webkit-flex:initial;-ms-flex:initial;flex:initial;-webkit-box-ordinal-group:4;-webkit-order:3;-ms-flex-order:3;order:3}.primer-sidebar--small .primer-search{padding-right:19.2px;padding-left:19.2px;margin-bottom:16px}.primer-sidebar--small .primer-sidebar__nav{-webkit-box-ordinal-group:5;-webkit-order:4;-ms-flex-order:4;order:4}}.primer-burger{position:relative;overflow:hidden;height:60px;width:40px;width:calc(24px + 19.2px);text-indent:-400%;background:0 0;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0}.primer-burger:after,.primer-burger:before,.primer-burger__text:before{position:absolute;left:0;width:24px;height:2px;background:#56606A;content:''}.primer-burger:before{top:calc(50% - 1px - 5px)}.primer-burger:after{top:calc(50% - 1px)}.primer-burger__text:before{top:calc(50% - 1px + 5px)}.primer-burger--closed:before{-webkit-animation:primer-burger-top-close 320ms ease-in-out forwards;animation:primer-burger-top-close 320ms ease-in-out forwards}.primer-burger--closed:after{-webkit-animation:primer-burger-middle-close 320ms ease-in-out forwards;animation:primer-burger-middle-close 320ms ease-in-out forwards}.primer-burger--closed .primer-burger__text:before{-webkit-animation:primer-burger-bottom-close 320ms ease-in-out forwards;animation:primer-burger-bottom-close 320ms ease-in-out forwards}.primer-burger--open:before{-webkit-animation:primer-burger-top 320ms ease-in-out forwards;animation:primer-burger-top 320ms ease-in-out forwards}.primer-burger--open:after{-webkit-animation:primer-burger-middle 320ms ease-in-out forwards;animation:primer-burger-middle 320ms ease-in-out forwards}.primer-burger--open .primer-burger__text:before{-webkit-animation:primer-burger-bottom 320ms ease-in-out forwards;animation:primer-burger-bottom 320ms ease-in-out forwards}@-webkit-keyframes primer-burger-top{0%{-webkit-transform:none;transform:none}50%{-webkit-transform:translateY(5px);transform:translateY(5px)}100%{-webkit-transform:translateY(5px) rotate(-45deg);transform:translateY(5px) rotate(-45deg)}}@keyframes primer-burger-top{0%{-webkit-transform:none;transform:none}50%{-webkit-transform:translateY(5px);transform:translateY(5px)}100%{-webkit-transform:translateY(5px) rotate(-45deg);transform:translateY(5px) rotate(-45deg)}}@-webkit-keyframes primer-burger-top-close{100%{-webkit-transform:none;transform:none}50%{-webkit-transform:translateY(5px);transform:translateY(5px)}0%{-webkit-transform:translateY(5px) rotate(-45deg);transform:translateY(5px) rotate(-45deg)}}@keyframes primer-burger-top-close{100%{-webkit-transform:none;transform:none}50%{-webkit-transform:translateY(5px);transform:translateY(5px)}0%{-webkit-transform:translateY(5px) rotate(-45deg);transform:translateY(5px) rotate(-45deg)}}@-webkit-keyframes primer-burger-middle{0%,50%{-webkit-transform:none;transform:none}100%{-webkit-transform:rotate(45deg);transform:rotate(45deg)}}@keyframes primer-burger-middle{0%,50%{-webkit-transform:none;transform:none}100%{-webkit-transform:rotate(45deg);transform:rotate(45deg)}}@-webkit-keyframes primer-burger-middle-close{100%,50%{-webkit-transform:none;transform:none}0%{-webkit-transform:rotate(45deg);transform:rotate(45deg)}}@keyframes primer-burger-middle-close{100%,50%{-webkit-transform:none;transform:none}0%{-webkit-transform:rotate(45deg);transform:rotate(45deg)}}@-webkit-keyframes primer-burger-bottom{0%{-webkit-transform:none;transform:none}50%{-webkit-transform:translateY(-5px);transform:translateY(-5px)}100%{-webkit-transform:translateY(-5px) rotate(45deg);transform:translateY(-5px) rotate(45deg)}}@keyframes primer-burger-bottom{0%{-webkit-transform:none;transform:none}50%{-webkit-transform:translateY(-5px);transform:translateY(-5px)}100%{-webkit-transform:translateY(-5px) rotate(45deg);transform:translateY(-5px) rotate(45deg)}}@-webkit-keyframes primer-burger-bottom-close{100%{-webkit-transform:none;transform:none}50%{-webkit-transform:translateY(-5px);transform:translateY(-5px)}0%{-webkit-transform:translateY(-5px) rotate(45deg);transform:translateY(-5px) rotate(45deg)}}@keyframes primer-burger-bottom-close{100%{-webkit-transform:none;transform:none}50%{-webkit-transform:translateY(-5px);transform:translateY(-5px)}0%{-webkit-transform:translateY(-5px) rotate(45deg);transform:translateY(-5px) rotate(45deg)}}.primer-pattern{background:#FFF;border-radius:7px;-webkit-box-shadow:0 2px 14px rgba(0,0,0,.06);box-shadow:0 2px 14px rgba(0,0,0,.06)}.primer-pattern+.primer-pattern{margin-top:25.6px}.primer-pattern__header{display:flex;font-weight:500;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.primer-pattern__title{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:24px;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;font-size:19px}.primer-pattern__id{display:inline-block;margin-left:1em;font-size:13px;font-family:courier;opacity:0;-webkit-transition:opacity .1s ease;transition:opacity .1s ease}.primer-pattern__states-select,.primer-tab__title,.primer-tabs-toc__link{font-family:Roboto,sans-serif;font-weight:500;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.primer-pattern:hover .primer-pattern__id{opacity:.4}.primer-pattern__actions{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding-right:16px;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.primer-pattern__link{display:block;width:45px;height:50px;overflow:hidden;text-indent:-200%;background-repeat:no-repeat;background-position:center}.primer-pattern__states-select-container{position:relative;margin-right:11.2px}.primer-pattern__states-select-container:after{position:absolute;top:0;right:8px;width:15px;height:100%;background:url(../img/select-arrow.svg) center no-repeat;content:'';pointer-events:none}.primer-pattern__states-select{padding:8px 33.6px 8px 12px;color:rgba(0,0,0,.45);font-size:13.5px;background:#eef2f5;border:none;-webkit-appearance:none}.primer-pattern__link--isolate{background-image:url(../img/eye.svg)}.primer-pattern__link--isolate:hover{background-image:url(../img/eye-highlight.svg)}.primer-pattern__link--fullscreen{background-image:url(../img/fullscreen.svg)}.primer-pattern__link--fullscreen:hover{background-image:url(../img/fullscreen-highlight.svg)}.primer-pattern__content{margin:0 12px 12px;padding:16px;border:1px solid rgba(151,151,151,.17)}.primer-tabs{padding:0 12px 12px}.primer-tab__title,.primer-tabs-toc__link{display:block;padding:16px 0 25.6px;font-size:14.4px}.primer-tab__content{padding:16px;background:#56606A;font-family:courier;font-size:14.4px;color:#fff}.primer-tab__pre{margin:0}.primer-tab__pre[class*=language-]{padding:0;margin:0;background:0 0}.primer-tab__code{display:block}.primer-enhanced .primer-pattern__states,.primer-enhanced .primer-tab__title{display:none}.primer-enhanced .primer-tabs-toc{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0;padding:0;list-style:none}.primer-enhanced .primer-tabs-toc:before{position:absolute;bottom:0;left:0;width:100%;height:6px;background:#E6E6E6;content:''}.primer-enhanced .primer-tabs-toc__item{min-width:20%}.primer-enhanced .primer-tabs-toc__link{position:relative;padding-right:16px;padding-left:16px;text-align:center;color:#000;text-decoration:none;-webkit-transition:opacity .1s linear;transition:opacity .1s linear}.primer-enhanced .primer-tabs-toc__link:before{position:absolute;bottom:0;left:0;width:100%;height:6px;background:#BCC2C8;content:'';opacity:0;-webkit-transition:opacity .1s linear;transition:opacity .1s linear}.primer-enhanced .primer-tabs-toc__link[aria-selected=true]:before{opacity:1}.primer-enhanced .primer-tabs-toc__link[aria-selected=false]{opacity:.4}.primer-enhanced .primer-tab:not([hidden])+.primer-tab:not([hidden]){display:none}@media (max-width:700px){.primer-pattern__title{padding-left:12px;font-size:14.4px;display:block}.primer-pattern__actions{padding-right:3.2px}.primer-pattern__link{width:40px}.primer-pattern__id{display:none;margin:0;opacity:.4}}.primer-typography>h1,.primer-typography>h2,.primer-typography>h3,.primer-typography>h4,.primer-typography>h5,.primer-typography>h6{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Roboto,sans-serif;font-weight:400;color:#101010}.primer-typography>blockquote,.primer-typography>ol li,.primer-typography>p,.primer-typography>ul li{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Roboto,sans-serif;font-weight:400;font-size:17px;color:#737373;line-height:2em}.primer-typography{margin:0 auto;padding:32px 0;max-width:850px}.primer-typography>:first-child{margin-top:0}.primer-typography>h1{font-size:45px}.primer-typography>h2{font-size:25px}.primer-typography>h3{font-size:18px;-webkit-text-decoration:uppercase;text-decoration:uppercase}.primer-typography>blockquote{margin-left:0;margin-right:0;padding-left:2em;border-left:5px solid #D8DDE3}code[class*=language-],pre[class*=language-]{color:#d9e3ee;font-size:13px;text-shadow:none;font-family:Consolas,Monaco,'Andale Mono','Ubuntu 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-]::mozselection,code[class*=language-]::selection,pre[class*=language-]::mozselection,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;background:#3c4753}:not(pre)>code[class*=language-]{padding:.1em .3em;border-radius:.3em;color:#db4c69;background:#f9f2f4}.namespace{opacity:.7}.token.cdata,.token.comment,.token.doctype,.token.prolog,.token.punctuation{color:#aec0d2}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#66adf7}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#D7DEAF}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#aec0d2}.token.atrule,.token.attr-value,.token.keyword{color:#f66b7d}.token.function{color:#9ca2ff}.token.important,.token.regex,.token.variable{color:#f9ca76}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}pre[data-line]{position:relative}pre[class*=language-]>code[class*=language-]{position:relative;z-index:1}.line-highlight{position:absolute;left:0;right:0;padding:inherit 0;margin-top:1em;background:#1c252f;-webkit-box-shadow:inset 5px 0 0 #66adf7;box-shadow:inset 5px 0 0 #66adf7;z-index:0;pointer-events:none;line-height:inherit;white-space:pre}.primer-html{background:#eef2f5}.primer-body{margin:0}.primer-body--document{background:#fff}.primer-main{padding:19.2px}@media (min-width:1000px){.primer-html{width:100%;height:100%}.primer-body{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%}.primer-container{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;max-width:100%;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.primer-sidebar{width:260px;overflow-x:hidden;overflow-y:scroll;border-right:1px solid rgba(151,151,151,.18);-webkit-overflow-scrolling:touch}.primer-main{padding-left:32px;overflow:scroll;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-overflow-scrolling:touch}} \ No newline at end of file +.primer-burger,.primer-enhanced .primer-nav-item__link,.primer-enhanced .primer-sidebar-group{cursor:pointer}.primer-pattern__header,.primer-sidebar{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Roboto,sans-serif}.primer-sidebar{overflow:visible;background:#fff;font-weight:400}.primer-logo{overflow:hidden;display:block;margin:24px 16px;height:60px;text-indent:-600px;background:url(../img/logo.svg) center no-repeat}.primer-sidebar__nav{-webkit-transition:opacity 150ms ease;transition:opacity 150ms ease}.primer-sidebar-group>.primer-nav-items{display:none;border-bottom:1px solid rgba(151,151,151,.17)}.primer-sidebar-group--open>.primer-nav-items{display:block}.primer-sidebar-group__title{position:relative;display:block;padding:17.6px 16px 17.6px 44.8px;font-size:14.4px;font-weight:500;color:#606163;background-color:#fff;border-bottom:1px solid rgba(151,151,151,.17)}.primer-sidebar-group__title:before{position:absolute;top:0;left:0;width:44.8px;height:96%;background-position:center;background-repeat:no-repeat;content:'';opacity:.7}.primer-sidebar-group__title+.primer-nav-items{position:relative;padding:8px 0;background:#F9FAFC}.primer-sidebar-group__title+.primer-nav-items:before{position:absolute;top:0;left:0;height:100%;width:6px;background:#D8DDE3;content:''}.primer-nav-item__group-link{width:22px;height:15px;overflow:hidden;text-indent:-1000%;background:url(../img/eye.svg) center no-repeat;opacity:0;-webkit-transition:opacity .3s ease;transition:opacity .3s ease}.primer-nav-item__group-link:hover{background-image:url(../img/eye-highlight.svg)}.primer-sidebar-group--documentation .primer-sidebar-group__title:before{background-image:url(../img/document.svg)}.primer-sidebar-group--patterns .primer-sidebar-group__title:before{background-image:url(../img/pattern.svg)}.primer-sidebar-group--templates .primer-sidebar-group__title:before{background-image:url(../img/template.svg)}.primer-nav-items{margin:0;padding:0;font-size:14.4px;list-style:none}.primer-nav-item__link{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:14.4px 16px;color:#7a7c7d;text-decoration:none;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.primer-nav-item--current>.primer-nav-item__link{color:#000;font-weight:500}.primer-nav-item--current>.primer-nav-item__link:hover{color:#000}.primer-nav-item__link:hover{background:rgba(0,0,0,.02);color:#7a7c7d;text-decoration:none}.primer-nav-item__link:hover .primer-nav-item__group-link{opacity:1}.primer-nav-item__link:before{position:absolute;top:0;left:0;height:100%;width:6px;background:#D8DDE3;content:''}.primer-nav-items--level-1 .primer-nav-item__link{padding-left:41.6px}.primer-nav-items--level-2 .primer-nav-item__link{padding-left:67.2px}.primer-nav-items--level-3 .primer-nav-item__link{padding-left:92.8px}.primer-nav-items--level-4 .primer-nav-item__link{padding-left:118.4px}.primer-nav-items--level-5 .primer-nav-item__link{padding-left:144px}.primer-nav-items--level-6 .primer-nav-item__link{padding-left:169.6px}.primer-nav-items--level-7 .primer-nav-item__link{padding-left:195.2px}.primer-nav-items--level-8 .primer-nav-item__link{padding-left:220.8px}.primer-nav-items--level-9 .primer-nav-item__link{padding-left:246.4px}.primer-nav-items--level-10 .primer-nav-item__link{padding-left:272px}.primer-nav-item__link-title{position:relative;overflow:hidden;display:block;padding-left:28.8px;padding-right:8px;white-space:nowrap;text-overflow:ellipsis;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.primer-nav-item--has-children>.primer-nav-item__link>.primer-nav-item__link-title:before{position:absolute;top:0;left:0;width:16px;height:92%;background:url(../img/chevron.svg) center no-repeat;-webkit-transform-origin:center;transform-origin:center;-webkit-transition:-webkit-transform 150ms ease;transition:-webkit-transform 150ms ease;transition:transform 150ms ease;transition:transform 150ms ease,-webkit-transform 150ms ease;opacity:.4;content:''}.primer-search,.primer-search__control{position:relative}.primer-nav-item--has-children.primer-nav-item--open>.primer-nav-item__link>.primer-nav-item__link-title:before{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.primer-nav-item--current>.primer-nav-item__link:before{background:#809cb9}.primer-nav-item--has-children .primer-nav-items{display:none}.primer-nav-item--has-children.primer-nav-item--open>.primer-nav-items{display:block}.primer-sidebar--searching .primer-sidebar__nav{opacity:.2}.primer-search-container{min-height:52px}.primer-search{padding:0 16px 16px}.primer-search__label{position:absolute;top:0;left:0;padding:8px 16px;width:100%;width:calc(100% - 32px);height:100%;height:calc(100% - 16px);font-size:16px;color:rgba(0,0,0,.55)}.primer-search__input{display:block;padding:8px 16px;width:100%;width:calc(100% - 32px);font-size:16px;background:#EEF2F5;border:1px solid #EEF2F5;border-radius:5px;-webkit-transition:border-color 150ms ease;transition:border-color 150ms ease}.primer-search__input:focus{outline:0;border-color:#ced9e2}.primer-search--focus .primer-search__label{display:none}.primer-search__results{position:absolute;right:16px;left:16px;left:calc($primer-search-padding-horizontal + 1px);z-index:100;padding:0;margin:8px 0 0;width:100%;width:calc(100% - 32px);max-height:400px;overflow:scroll;opacity:0;background:#fff;-webkit-box-shadow:0 2px 14px rgba(0,0,0,.16);box-shadow:0 2px 14px rgba(0,0,0,.16);border-radius:4px;list-style:none}.primer-sidebar--searching .primer-search__results{opacity:1}.primer-search__result+.primer-search__result{border-top:1px solid rgba(151,151,151,.17)}.primer-search__result--empty{padding:16px;font-size:9.6px;text-align:center;color:rgba(0,0,0,.5)}.primer-search__result-link{display:block;padding:12px;color:#7a7c7d;text-decoration:none}.primer-search__result--current .primer-search__result-link .primer-search__result-title,.primer-search__result-link:hover .primer-search__result-title{color:#000}.primer-search__result-link:hover{background:rgba(0,0,0,.02)}.primer-search__result--current .primer-search__result-link{background:rgba(188,194,200,.5)}.primer-search__result-title{display:block;font-size:14.4px}.primer-search__result-id{display:block;margin-top:4px;font-size:12.8px;opacity:.7}.primer-pattern__header,.primer-sidebar--small{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox}.primer-search__result-id,.primer-search__result-title{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.primer-sidebar--small{position:relative;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.primer-sidebar--small .primer-logo{margin-top:0;margin-bottom:0;min-width:100px;background-size:contain;background-position-x:left}.primer-sidebar--small .primer-search-container{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.primer-sidebar--small .primer-search{padding-bottom:0}.primer-sidebar--small .primer-sidebar__nav{width:100%}.primer-sidebar--small .primer-sidebar__nav[hidden]{display:none}@media (max-width:400px){.primer-sidebar--small{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.primer-sidebar--small .primer-search-container{width:100%;-webkit-box-flex:initial;-webkit-flex:initial;-ms-flex:initial;flex:initial;-webkit-box-ordinal-group:4;-webkit-order:3;-ms-flex-order:3;order:3}.primer-sidebar--small .primer-search{padding-right:19.2px;padding-left:19.2px;margin-bottom:16px}.primer-sidebar--small .primer-sidebar__nav{-webkit-box-ordinal-group:5;-webkit-order:4;-ms-flex-order:4;order:4}}.primer-burger{position:relative;overflow:hidden;height:60px;width:40px;width:calc(24px + 19.2px);text-indent:-400%;background:0 0;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0}.primer-burger:after,.primer-burger:before,.primer-burger__text:before{position:absolute;left:0;width:24px;height:2px;background:#56606A;content:''}.primer-burger:before{top:calc(50% - 1px - 5px)}.primer-burger:after{top:calc(50% - 1px)}.primer-burger__text:before{top:calc(50% - 1px + 5px)}.primer-burger--closed:before{-webkit-animation:primer-burger-top-close 320ms ease-in-out forwards;animation:primer-burger-top-close 320ms ease-in-out forwards}.primer-burger--closed:after{-webkit-animation:primer-burger-middle-close 320ms ease-in-out forwards;animation:primer-burger-middle-close 320ms ease-in-out forwards}.primer-burger--closed .primer-burger__text:before{-webkit-animation:primer-burger-bottom-close 320ms ease-in-out forwards;animation:primer-burger-bottom-close 320ms ease-in-out forwards}.primer-burger--open:before{-webkit-animation:primer-burger-top 320ms ease-in-out forwards;animation:primer-burger-top 320ms ease-in-out forwards}.primer-burger--open:after{-webkit-animation:primer-burger-middle 320ms ease-in-out forwards;animation:primer-burger-middle 320ms ease-in-out forwards}.primer-burger--open .primer-burger__text:before{-webkit-animation:primer-burger-bottom 320ms ease-in-out forwards;animation:primer-burger-bottom 320ms ease-in-out forwards}@-webkit-keyframes primer-burger-top{0%{-webkit-transform:none;transform:none}50%{-webkit-transform:translateY(5px);transform:translateY(5px)}100%{-webkit-transform:translateY(5px) rotate(-45deg);transform:translateY(5px) rotate(-45deg)}}@keyframes primer-burger-top{0%{-webkit-transform:none;transform:none}50%{-webkit-transform:translateY(5px);transform:translateY(5px)}100%{-webkit-transform:translateY(5px) rotate(-45deg);transform:translateY(5px) rotate(-45deg)}}@-webkit-keyframes primer-burger-top-close{100%{-webkit-transform:none;transform:none}50%{-webkit-transform:translateY(5px);transform:translateY(5px)}0%{-webkit-transform:translateY(5px) rotate(-45deg);transform:translateY(5px) rotate(-45deg)}}@keyframes primer-burger-top-close{100%{-webkit-transform:none;transform:none}50%{-webkit-transform:translateY(5px);transform:translateY(5px)}0%{-webkit-transform:translateY(5px) rotate(-45deg);transform:translateY(5px) rotate(-45deg)}}@-webkit-keyframes primer-burger-middle{0%,50%{-webkit-transform:none;transform:none}100%{-webkit-transform:rotate(45deg);transform:rotate(45deg)}}@keyframes primer-burger-middle{0%,50%{-webkit-transform:none;transform:none}100%{-webkit-transform:rotate(45deg);transform:rotate(45deg)}}@-webkit-keyframes primer-burger-middle-close{100%,50%{-webkit-transform:none;transform:none}0%{-webkit-transform:rotate(45deg);transform:rotate(45deg)}}@keyframes primer-burger-middle-close{100%,50%{-webkit-transform:none;transform:none}0%{-webkit-transform:rotate(45deg);transform:rotate(45deg)}}@-webkit-keyframes primer-burger-bottom{0%{-webkit-transform:none;transform:none}50%{-webkit-transform:translateY(-5px);transform:translateY(-5px)}100%{-webkit-transform:translateY(-5px) rotate(45deg);transform:translateY(-5px) rotate(45deg)}}@keyframes primer-burger-bottom{0%{-webkit-transform:none;transform:none}50%{-webkit-transform:translateY(-5px);transform:translateY(-5px)}100%{-webkit-transform:translateY(-5px) rotate(45deg);transform:translateY(-5px) rotate(45deg)}}@-webkit-keyframes primer-burger-bottom-close{100%{-webkit-transform:none;transform:none}50%{-webkit-transform:translateY(-5px);transform:translateY(-5px)}0%{-webkit-transform:translateY(-5px) rotate(45deg);transform:translateY(-5px) rotate(45deg)}}@keyframes primer-burger-bottom-close{100%{-webkit-transform:none;transform:none}50%{-webkit-transform:translateY(-5px);transform:translateY(-5px)}0%{-webkit-transform:translateY(-5px) rotate(45deg);transform:translateY(-5px) rotate(45deg)}}.primer-pattern{background:#FFF;border-radius:7px;-webkit-box-shadow:0 2px 14px rgba(0,0,0,.06);box-shadow:0 2px 14px rgba(0,0,0,.06)}.primer-pattern+.primer-pattern{margin-top:25.6px}.primer-pattern__header{display:flex;font-weight:500;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.primer-pattern__title{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:24px;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;font-size:19px}.primer-pattern__id{display:inline-block;margin-left:1em;font-size:13px;font-family:courier;opacity:0;-webkit-transition:opacity .1s ease;transition:opacity .1s ease}.primer-pattern__states-select,.primer-tab__title,.primer-tabs-toc__link{font-family:Roboto,sans-serif;font-weight:500;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.primer-pattern:hover .primer-pattern__id{opacity:.4}.primer-pattern__actions{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding-right:16px;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.primer-pattern__link{display:block;width:45px;height:50px;overflow:hidden;text-indent:-200%;background-repeat:no-repeat;background-position:center}.primer-pattern__states-select-container{position:relative;margin-right:11.2px}.primer-pattern__states-select-container:after{position:absolute;top:0;right:8px;width:15px;height:100%;background:url(../img/select-arrow.svg) center no-repeat;content:'';pointer-events:none}.primer-pattern__states-select{padding:8px 33.6px 8px 12px;color:rgba(0,0,0,.45);font-size:13.5px;background:#eef2f5;border:none;-webkit-appearance:none}.primer-pattern__link--isolate{background-image:url(../img/eye.svg)}.primer-pattern__link--isolate:hover{background-image:url(../img/eye-highlight.svg)}.primer-pattern__link--fullscreen{background-image:url(../img/fullscreen.svg)}.primer-pattern__link--fullscreen:hover{background-image:url(../img/fullscreen-highlight.svg)}.primer-pattern__content{margin:0 12px;padding:16px;border:1px solid rgba(151,151,151,.17)}.primer-tabs{padding:0 12px 12px}.primer-tabs-toc{border-right:1px solid rgba(151,151,151,.17);border-left:1px solid rgba(151,151,151,.17);background:#fdfdfd}.primer-tab__title,.primer-tabs-toc__link{display:block;padding:16px 0 25.6px;font-size:14.4px}.primer-tab__content{padding:16px;background:#56606A;font-family:courier;font-size:14.4px;color:#fff}.primer-tab__pre{margin:0}.primer-tab__pre[class*=language-]{padding:0;margin:0;background:0 0}.primer-tab__code{display:block}.primer-enhanced .primer-pattern__states,.primer-enhanced .primer-tab__title{display:none}.primer-enhanced .primer-tabs-toc{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0;padding:0;list-style:none}.primer-enhanced .primer-tabs-toc:before{position:absolute;bottom:0;left:0;width:100%;height:6px;background:#E6E6E6;content:''}.primer-enhanced .primer-tabs-toc__item{min-width:20%}.primer-enhanced .primer-tabs-toc__link{position:relative;padding-right:16px;padding-left:16px;text-align:center;color:#000;text-decoration:none;-webkit-transition:opacity .1s linear;transition:opacity .1s linear}.primer-enhanced .primer-tabs-toc__link:before{position:absolute;bottom:0;left:0;width:100%;height:6px;background:#BCC2C8;content:'';opacity:0;-webkit-transition:opacity .1s linear;transition:opacity .1s linear}.primer-enhanced .primer-tabs-toc__link[aria-selected=true]:before{opacity:1}.primer-enhanced .primer-tabs-toc__link[aria-selected=false]{opacity:.4}.primer-enhanced .primer-tab:not([hidden])+.primer-tab:not([hidden]){display:none}@media (max-width:700px){.primer-pattern__title{padding-left:12px;font-size:14.4px;display:block}.primer-pattern__actions{padding-right:3.2px}.primer-pattern__link{width:40px}.primer-pattern__id{display:none;margin:0;opacity:.4}}.primer-typography>h1,.primer-typography>h2,.primer-typography>h3,.primer-typography>h4,.primer-typography>h5,.primer-typography>h6{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Roboto,sans-serif;font-weight:400;color:#101010}.primer-typography>blockquote,.primer-typography>ol li,.primer-typography>p,.primer-typography>ul li{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Roboto,sans-serif;font-weight:400;font-size:17px;color:#737373;line-height:2em}.primer-typography{margin:0 auto;padding:32px 0;max-width:850px}.primer-typography>:first-child{margin-top:0}.primer-typography>h1{font-size:45px}.primer-typography>h2{font-size:25px}.primer-typography>h3{font-size:18px;-webkit-text-decoration:uppercase;text-decoration:uppercase}.primer-typography>blockquote{margin-left:0;margin-right:0;padding-left:2em;border-left:5px solid #D8DDE3}code[class*=language-],pre[class*=language-]{color:#d9e3ee;font-size:13px;text-shadow:none;font-family:Consolas,Monaco,'Andale Mono','Ubuntu 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-]::mozselection,pre[class*=language-]::-moz-selection,pre[class*=language-]::mozselection{text-shadow:none;background:#b3d4fc}code[class*=language-]::mozselection,code[class*=language-]::selection,pre[class*=language-]::mozselection,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;background:#3c4753}:not(pre)>code[class*=language-]{padding:.1em .3em;border-radius:.3em;color:#db4c69;background:#f9f2f4}.namespace{opacity:.7}.token.cdata,.token.comment,.token.doctype,.token.prolog,.token.punctuation{color:#aec0d2}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#66adf7}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#D7DEAF}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#aec0d2}.token.atrule,.token.attr-value,.token.keyword{color:#f66b7d}.token.function{color:#9ca2ff}.token.important,.token.regex,.token.variable{color:#f9ca76}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}pre[data-line]{position:relative}pre[class*=language-]>code[class*=language-]{position:relative;z-index:1}.line-highlight{position:absolute;left:0;right:0;padding:inherit 0;margin-top:1em;background:#1c252f;-webkit-box-shadow:inset 5px 0 0 #66adf7;box-shadow:inset 5px 0 0 #66adf7;z-index:0;pointer-events:none;line-height:inherit;white-space:pre}.primer-html{background:#eef2f5}.primer-body{margin:0}.primer-body--document{background:#fff}.primer-main{padding:19.2px}@media (min-width:1000px){.primer-html{width:100%;height:100%}.primer-body{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%}.primer-container{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;max-width:100%;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.primer-sidebar{width:260px;overflow-x:hidden;overflow-y:scroll;border-right:1px solid rgba(151,151,151,.18);-webkit-overflow-scrolling:touch}.primer-main{padding-left:32px;overflow:scroll;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-overflow-scrolling:touch}} \ No newline at end of file diff --git a/frontend/dist/js/primer.js b/frontend/dist/js/primer.js index 7e0fe62..7f02b96 100644 --- a/frontend/dist/js/primer.js +++ b/frontend/dist/js/primer.js @@ -1,396 +1,1165 @@ (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i boolean} [replaceFilter] + */ + value: function (env, language, placeholderPattern, replaceFilter) { + if (env.language !== language) { + return; } - }, - 'rd': { - pattern: /-?(?:%\}|\}\})$/, - inside: { - 'punctuation': /.*/ + + var tokenStack = env.tokenStack = []; + + env.code = env.code.replace(placeholderPattern, function (match) { + if (typeof replaceFilter === 'function' && !replaceFilter(match)) { + return match; + } + var i = tokenStack.length; + var placeholder; + + // Check for existing strings + while (env.code.indexOf(placeholder = getPlaceholder(language, i)) !== -1) { + ++i; + } + + // Create a sparse array + tokenStack[i] = match; + + return placeholder; + }); + + // Switch the grammar to markup + env.grammar = Prism.languages.markup; + } + }, + tokenizePlaceholders: { + /** + * Replace placeholders with proper tokens after tokenizing. + * + * @param {object} env The environment of the `after-tokenize` hook. + * @param {string} language The language id. + */ + value: function (env, language) { + if (env.language !== language || !env.tokenStack) { + return; } - }, - 'string': { - pattern: /("|')(?:\\.|(?!\1)[^\\\r\n])*\1/, - inside: { - 'punctuation': /^['"]|['"]$/ + + // Switch the grammar back + env.grammar = Prism.languages[language]; + + var j = 0; + var keys = Object.keys(env.tokenStack); + + function walkTokens(tokens) { + for (var i = 0; i < tokens.length; i++) { + // all placeholders are replaced already + if (j >= keys.length) { + break; + } + + var token = tokens[i]; + if (typeof token === 'string' || (token.content && typeof token.content === 'string')) { + var k = keys[j]; + var t = env.tokenStack[k]; + var s = typeof token === 'string' ? token : token.content; + var placeholder = getPlaceholder(language, k); + + var index = s.indexOf(placeholder); + if (index > -1) { + ++j; + + var before = s.substring(0, index); + var middle = new Prism.Token(language, Prism.tokenize(t, env.grammar), 'language-' + language, t); + var after = s.substring(index + placeholder.length); + + var replacement = []; + if (before) { + replacement.push.apply(replacement, walkTokens([before])); + } + replacement.push(middle); + if (after) { + replacement.push.apply(replacement, walkTokens([after])); + } + + if (typeof token === 'string') { + tokens.splice.apply(tokens, [i, 1].concat(replacement)); + } else { + token.content = replacement; + } + } + } else if (token.content /* && typeof token.content !== 'string' */) { + walkTokens(token.content); + } + } + + return tokens; } - }, - 'keyword': /\b(?:even|if|odd)\b/, - 'boolean': /\b(?:true|false|null)\b/, - 'number': /\b0x[\dA-Fa-f]+|(?:\b\d+\.?\d*|\B\.\d+)(?:[Ee][-+]?\d+)?/, - 'operator': [ - { - pattern: /(\s)(?:and|b-and|b-xor|b-or|ends with|in|is|matches|not|or|same as|starts with)(?=\s)/, - lookbehind: true - }, - /[=<>]=?|!=|\*\*?|\/\/?|\?:?|[-+~%|]/ - ], - 'property': /\b[a-zA-Z_]\w*\b/, - 'punctuation': /[()\[\]{}:.,]/ + + walkTokens(env.tokens); + } } + }); + +}(Prism)); + +},{}],3:[function(require,module,exports){ +Prism.languages.twig = { + 'comment': /^\{#[\s\S]*?#\}$/, + + 'tag-name': { + pattern: /(^\{%-?\s*)\w+/, + lookbehind: true, + alias: 'keyword' + }, + 'delimiter': { + pattern: /^\{[{%]-?|-?[%}]\}$/, + alias: 'punctuation' }, - // The rest can be parsed as HTML - 'other': { - // We want non-blank matches - pattern: /\S(?:[\s\S]*\S)?/, - inside: Prism.languages.markup - } + 'string': { + pattern: /("|')(?:\\.|(?!\1)[^\\\r\n])*\1/, + inside: { + 'punctuation': /^['"]|['"]$/ + } + }, + 'keyword': /\b(?:even|if|odd)\b/, + 'boolean': /\b(?:false|null|true)\b/, + 'number': /\b0x[\dA-Fa-f]+|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:[Ee][-+]?\d+)?/, + 'operator': [ + { + pattern: /(\s)(?:and|b-and|b-or|b-xor|ends with|in|is|matches|not|or|same as|starts with)(?=\s)/, + lookbehind: true + }, + /[=<>]=?|!=|\*\*?|\/\/?|\?:?|[-+~%|]/ + ], + 'punctuation': /[()\[\]{}:.,]/ }; -},{}],3:[function(require,module,exports){ -(function (global){ +Prism.hooks.add('before-tokenize', function (env) { + if (env.language !== 'twig') { + return; + } + + var pattern = /\{(?:#[\s\S]*?#|%[\s\S]*?%|\{[\s\S]*?\})\}/g; + Prism.languages['markup-templating'].buildPlaceholders(env, 'twig', pattern); +}); + +Prism.hooks.add('after-tokenize', function (env) { + Prism.languages['markup-templating'].tokenizePlaceholders(env, 'twig'); +}); + +},{}],4:[function(require,module,exports){ +(function (global){(function (){ /* ********************************************** Begin prism-core.js ********************************************** */ +/// + var _self = (typeof window !== 'undefined') ? window // if in browser : ( (typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope) - ? self // if in worker - : {} // if in node js + ? self // if in worker + : {} // if in node js ); /** * Prism: Lightweight, robust, elegant syntax highlighting - * MIT license http://www.opensource.org/licenses/mit-license.php/ - * @author Lea Verou http://lea.verou.me + * + * @license MIT + * @author Lea Verou + * @namespace + * @public */ +var Prism = (function (_self) { -var Prism = (function(){ - -// Private helper vars -var lang = /\blang(?:uage)?-([\w-]+)\b/i; -var uniqueId = 0; - -var _ = _self.Prism = { - manual: _self.Prism && _self.Prism.manual, - disableWorkerMessageHandler: _self.Prism && _self.Prism.disableWorkerMessageHandler, - util: { - encode: function (tokens) { - if (tokens instanceof Token) { - return new Token(tokens.type, _.util.encode(tokens.content), tokens.alias); - } else if (_.util.type(tokens) === 'Array') { - return tokens.map(_.util.encode); - } else { - return tokens.replace(/&/g, '&').replace(/ to load Prism's script + * ``` + * + * @default false + * @type {boolean} + * @memberof Prism + * @public + */ + manual: _self.Prism && _self.Prism.manual, + /** + * By default, if Prism is in a web worker, it assumes that it is in a worker it created itself, so it uses + * `addEventListener` to communicate with its parent instance. However, if you're using Prism manually in your + * own worker, you don't want it to do this. + * + * By setting this value to `true`, Prism will not add its own listeners to the worker. + * + * You obviously have to change this value before Prism executes. To do this, you can add an + * empty Prism object into the global scope before loading the Prism script like this: + * + * ```js + * window.Prism = window.Prism || {}; + * Prism.disableWorkerMessageHandler = true; + * // Load Prism's script + * ``` + * + * @default false + * @type {boolean} + * @memberof Prism + * @public + */ + disableWorkerMessageHandler: _self.Prism && _self.Prism.disableWorkerMessageHandler, - switch (type) { - case 'Object': - if (visited[_.util.objId(o)]) { - return visited[_.util.objId(o)]; - } - var clone = {}; - visited[_.util.objId(o)] = clone; + /** + * A namespace for utility methods. + * + * All function in this namespace that are not explicitly marked as _public_ are for __internal use only__ and may + * change or disappear at any time. + * + * @namespace + * @memberof Prism + */ + util: { + encode: function encode(tokens) { + if (tokens instanceof Token) { + return new Token(tokens.type, encode(tokens.content), tokens.alias); + } else if (Array.isArray(tokens)) { + return tokens.map(encode); + } else { + return tokens.replace(/&/g, '&').replace(/} [visited] + * @returns {T} + * @template T + */ + clone: function deepClone(o, visited) { + visited = visited || {}; + + var clone; var id; + switch (_.util.type(o)) { + case 'Object': + id = _.util.objId(o); + if (visited[id]) { + return visited[id]; } - } + clone = /** @type {Record} */ ({}); + visited[id] = clone; - return clone; + for (var key in o) { + if (o.hasOwnProperty(key)) { + clone[key] = deepClone(o[key], visited); + } + } - case 'Array': - if (visited[_.util.objId(o)]) { - return visited[_.util.objId(o)]; - } - var clone = []; - visited[_.util.objId(o)] = clone; + return /** @type {any} */ (clone); - o.forEach(function (v, i) { - clone[i] = _.util.clone(v, visited); - }); + case 'Array': + id = _.util.objId(o); + if (visited[id]) { + return visited[id]; + } + clone = []; + visited[id] = clone; - return clone; - } + (/** @type {Array} */(/** @type {any} */(o))).forEach(function (v, i) { + clone[i] = deepClone(v, visited); + }); - return o; - } - }, + return /** @type {any} */ (clone); - languages: { - extend: function (id, redef) { - var lang = _.util.clone(_.languages[id]); + default: + return o; + } + }, - for (var key in redef) { - lang[key] = redef[key]; - } + /** + * Returns the Prism language of the given element set by a `language-xxxx` or `lang-xxxx` class. + * + * If no language is set for the element or the element is `null` or `undefined`, `none` will be returned. + * + * @param {Element} element + * @returns {string} + */ + getLanguage: function (element) { + while (element) { + var m = lang.exec(element.className); + if (m) { + return m[1].toLowerCase(); + } + element = element.parentElement; + } + return 'none'; + }, - return lang; + /** + * Sets the Prism `language-xxxx` class of the given element. + * + * @param {Element} element + * @param {string} language + * @returns {void} + */ + setLanguage: function (element, language) { + // remove all `language-xxxx` classes + // (this might leave behind a leading space) + element.className = element.className.replace(RegExp(lang, 'gi'), ''); + + // add the new `language-xxxx` class + // (using `classList` will automatically clean up spaces for us) + element.classList.add('language-' + language); + }, + + /** + * Returns the script element that is currently executing. + * + * This does __not__ work for line script element. + * + * @returns {HTMLScriptElement | null} + */ + currentScript: function () { + if (typeof document === 'undefined') { + return null; + } + if ('currentScript' in document && 1 < 2 /* hack to trip TS' flow analysis */) { + return /** @type {any} */ (document.currentScript); + } + + // IE11 workaround + // we'll get the src of the current script by parsing IE11's error stack trace + // this will not work for inline scripts + + try { + throw new Error(); + } catch (err) { + // Get file src url from stack. Specifically works with the format of stack traces in IE. + // A stack will look like this: + // + // Error + // at _.util.currentScript (http://localhost/components/prism-core.js:119:5) + // at Global code (http://localhost/components/prism-core.js:606:1) + + var src = (/at [^(\r\n]*\((.*):[^:]+:[^:]+\)$/i.exec(err.stack) || [])[1]; + if (src) { + var scripts = document.getElementsByTagName('script'); + for (var i in scripts) { + if (scripts[i].src == src) { + return scripts[i]; + } + } + } + return null; + } + }, + + /** + * Returns whether a given class is active for `element`. + * + * The class can be activated if `element` or one of its ancestors has the given class and it can be deactivated + * if `element` or one of its ancestors has the negated version of the given class. The _negated version_ of the + * given class is just the given class with a `no-` prefix. + * + * Whether the class is active is determined by the closest ancestor of `element` (where `element` itself is + * closest ancestor) that has the given class or the negated version of it. If neither `element` nor any of its + * ancestors have the given class or the negated version of it, then the default activation will be returned. + * + * In the paradoxical situation where the closest ancestor contains __both__ the given class and the negated + * version of it, the class is considered active. + * + * @param {Element} element + * @param {string} className + * @param {boolean} [defaultActivation=false] + * @returns {boolean} + */ + isActive: function (element, className, defaultActivation) { + var no = 'no-' + className; + + while (element) { + var classList = element.classList; + if (classList.contains(className)) { + return true; + } + if (classList.contains(no)) { + return false; + } + element = element.parentElement; + } + return !!defaultActivation; + } }, /** - * Insert a token before another token in a language literal - * As this needs to recreate the object (we cannot actually insert before keys in object literals), - * we cannot just provide an object, we need anobject and a key. - * @param inside The key (or language id) of the parent - * @param before The key to insert before. If not provided, the function appends instead. - * @param insert Object with the key/value pairs to insert - * @param root The object that contains `inside`. If equal to Prism.languages, it can be omitted. + * This namespace contains all currently loaded languages and the some helper functions to create and modify languages. + * + * @namespace + * @memberof Prism + * @public */ - insertBefore: function (inside, before, insert, root) { - root = root || _.languages; - var grammar = root[inside]; + languages: { + /** + * The grammar for plain, unformatted text. + */ + plain: plainTextGrammar, + plaintext: plainTextGrammar, + text: plainTextGrammar, + txt: plainTextGrammar, + + /** + * Creates a deep copy of the language with the given id and appends the given tokens. + * + * If a token in `redef` also appears in the copied language, then the existing token in the copied language + * will be overwritten at its original position. + * + * ## Best practices + * + * Since the position of overwriting tokens (token in `redef` that overwrite tokens in the copied language) + * doesn't matter, they can technically be in any order. However, this can be confusing to others that trying to + * understand the language definition because, normally, the order of tokens matters in Prism grammars. + * + * Therefore, it is encouraged to order overwriting tokens according to the positions of the overwritten tokens. + * Furthermore, all non-overwriting tokens should be placed after the overwriting ones. + * + * @param {string} id The id of the language to extend. This has to be a key in `Prism.languages`. + * @param {Grammar} redef The new tokens to append. + * @returns {Grammar} The new language created. + * @public + * @example + * Prism.languages['css-with-colors'] = Prism.languages.extend('css', { + * // Prism.languages.css already has a 'comment' token, so this token will overwrite CSS' 'comment' token + * // at its original position + * 'comment': { ... }, + * // CSS doesn't have a 'color' token, so this token will be appended + * 'color': /\b(?:red|green|blue)\b/ + * }); + */ + extend: function (id, redef) { + var lang = _.util.clone(_.languages[id]); + + for (var key in redef) { + lang[key] = redef[key]; + } - if (arguments.length == 2) { - insert = arguments[1]; + return lang; + }, + + /** + * Inserts tokens _before_ another token in a language definition or any other grammar. + * + * ## Usage + * + * This helper method makes it easy to modify existing languages. For example, the CSS language definition + * not only defines CSS highlighting for CSS documents, but also needs to define highlighting for CSS embedded + * in HTML through `