diff --git a/_template/app/css/styles.css b/_template/app/css/styles.css index 508d768..55592ab 100644 --- a/_template/app/css/styles.css +++ b/_template/app/css/styles.css @@ -1026,7 +1026,13 @@ .ndpl-component__code .ndpl-pre { margin: 0; } + +/* We apply the same code styling to page, description and component elements. */ +.ndpl-page pre code, +.ndpl-component__description pre code, .ndpl-component__code .ndpl-code { + box-sizing: border-box; + color: #616367; font-size: 12px; line-height: 18px; opacity: 0.75; @@ -1035,7 +1041,13 @@ -ms-overflow-style: -ms-autohiding-scrollbar; padding: 36px 12px; white-space: pre; + width: 100%; } +.ndpl-page pre code, +.ndpl-component__description pre code { + padding: 12px; +} + .ndpl-component__code-toggle { border-bottom: 1px solid transparent; color: #B0B1B3; @@ -1066,11 +1078,17 @@ border: 1px solid #E0E6ED; border-top: none; } + .ndpl-page pre code, + .ndpl-component__description pre code, .ndpl-component__code .ndpl-code { font-size: 15px; line-height: 21px; padding: 36px; } + .ndpl-page pre code, + .ndpl-component__description pre code { + padding: 12px; + } .ndpl-component__code-toggle { border-left: 1px solid transparent; border-right: 1px solid transparent; diff --git a/_template/app/css/styles.min.css b/_template/app/css/styles.min.css index e8192e3..1520bea 100644 --- a/_template/app/css/styles.min.css +++ b/_template/app/css/styles.min.css @@ -1 +1 @@ -.ndpl-body,.ndpl-c-background{background-color:#FFF}.ndpl-cf:after,.ndpl-component__sample:after,.ndpl-nav__group:after{content:""}.ndpl-body{-ms-overflow-style:-ms-autohiding-scrollbar;margin:0;padding:0}[class*=" ndpl-"],[class^=ndpl-]{box-sizing:border-box}.ndpl-disable-scrolling{overflow:hidden}.ndpl-body.nav-open{overflow-y:hidden}.ndpl-component__code-toggle,.ndpl-component__color,.ndpl-component__description,.ndpl-component__label,.ndpl-component__title,.ndpl-error,.ndpl-group__description,.ndpl-header,.ndpl-info,.ndpl-intro,.ndpl-library__title,.ndpl-loading__title,.ndpl-nav__title,.ndpl-page,.ndpl-sidebar,.ndpl-sidebar__title{font-family:'Open Sans','Trebuchet MS','Lucida Grande','Lucida Sans Unicode','Lucida Sans',Tahoma,sans-serif}.ndpl-library__title{font-size:27px;font-weight:400;line-height:36px}.ndpl-component__title{font-size:18px;font-weight:300;line-height:32px}.ndpl-component__description,.ndpl-group__description,.ndpl-intro,.ndpl-page{font-size:12px;font-weight:300;line-height:24px}.ndpl-page h1{margin-bottom:24px;font-size:26px;font-weight:400;line-height:36px}.ndpl-page h2,.ndpl-page h3,.ndpl-page h4,.ndpl-page h5{font-weight:300}.ndpl-page h2,.ndpl-page h3,.ndpl-page h4,.ndpl-page h5,.ndpl-page h6{margin:24px 0 12px}.ndpl-page h2:first-child,.ndpl-page h3:first-child,.ndpl-page h4:first-child,.ndpl-page h5:first-child,.ndpl-page h6:first-child{margin-top:0}.ndpl-page h2{font-size:21px;line-height:36px}.ndpl-page h3{font-size:18px;line-height:32px}.ndpl-page h4{font-size:16px;line-height:27px}.ndpl-page h5,.ndpl-page h6{font-size:14px;line-height:24px}.ndpl-page h6{font-weight:400}.ndpl-component__description code,.ndpl-group__description code,.ndpl-page code{display:inline-block;color:#BABEC7;border:1px solid #E1E1E1;border-radius:3px;line-height:18px;padding:0 3px}.ndpl-c-brand-a:hover,.ndpl-c-brand-c{color:#FEA1AC}.ndpl-page a,.ndpl-page a[href]{text-decoration:none}.ndpl-page a:hover,.ndpl-page a[href]:hover{text-decoration:underline}.ndpl-page p{margin-bottom:24px}@media only screen and (min-width:60em){.ndpl-page h1{margin-bottom:48px}.ndpl-page h2,.ndpl-page h3,.ndpl-page h4,.ndpl-page h5,.ndpl-page h6{margin:48px 0 24px}.ndpl-library__title{font-size:36px;line-height:36px}.ndpl-component__title{font-size:21px;line-height:32px}.ndpl-component__description,.ndpl-group__description,.ndpl-intro,.ndpl-page{font-size:14px;line-height:21px}.ndpl-page h1{font-size:36px;line-height:36px}.ndpl-page h2{font-size:28px;line-height:36px}.ndpl-page h3{font-size:21px;line-height:32px}.ndpl-page h4{font-size:18px;line-height:27px}.ndpl-page h5,.ndpl-page h6{font-size:16px;line-height:24px}}.ndpl-c-border{border-color:#E0E6ED}.ndpl-c-highlight{background-color:#F9FAFC}.ndpl-c-brand-bg{background-color:#FEA1AC}.ndpl-c-brand-b{border-color:#FEA1AC}.ndpl-c-brand-ca a,.ndpl-c-brand-ca a:active,.ndpl-c-brand-ca a:focus,.ndpl-c-brand-ca a:visited,.ndpl-c-brand-ca a[href],.ndpl-c-brand-ca a[href]:active,.ndpl-c-brand-ca a[href]:focus,.ndpl-c-brand-ca a[href]:visited{color:#303637}.ndpl-c-brand-ca a:hover,.ndpl-c-brand-ca a[href]:hover,.ndpl-c-brand-cai a,.ndpl-c-brand-cai a:active,.ndpl-c-brand-cai a:focus,.ndpl-c-brand-cai a:visited,.ndpl-c-brand-cai a[href],.ndpl-c-brand-cai a[href]:active,.ndpl-c-brand-cai a[href]:focus,.ndpl-c-brand-cai a[href]:visited{color:#FEA1AC}.ndpl-c-brand-cai a:hover,.ndpl-c-brand-cai a[href]:hover{color:#303637!important}.ndpl-nsc,.ndpl-nsc:active,.ndpl-nsc:focus,.ndpl-nsc:hover,.ndpl-nsc:visited,.ndpl-nsc[href]:active,.ndpl-nsc[href]:focus,.ndpl-nsc[href]:hover,.ndpl-nsc[href]:visited{color:#303637!important;text-decoration:none}.ndpl-cf:after{display:block;clear:both}.ndpl-dark-text{color:#616367!important}.ndpl-light-text{color:#FFF!important}.ndpl-apply-border{border:1px solid #E0E6ED}.ndpl-apply-border+.ndpl-apply-border{border-top:none}.ndpl-loading__title{color:#303637;font-weight:300;margin:0 24px 24px;opacity:0;transition:opacity .5s ease}.wf-opensans-n4-active .ndpl-loading__title{opacity:1}.ndpl-container{opacity:0;transition:opacity .5s ease .5s}.ndpl-container.loaded{opacity:1}.ndpl-container.resizing{visibility:hidden}.ndpl-loading{left:-9999px;opacity:0;padding:96px 0;position:fixed;text-align:center;transition:opacity .5s ease;width:100%}.ndpl-loading.in-progress{left:0;opacity:1}.ndpl-loading__title{font-size:27px;padding-top:24px}@media only screen and (min-width:60em){.ndpl-loading__title{font-size:36px;padding-top:24px}}.ndpl-error,.ndpl-info{border-radius:6px;color:#FFF;display:inline-block;list-style:none;margin:0 12px;padding:24px;font-size:14px}.ndpl-header:after,.ndpl-header__title a{display:none}.ndpl-error{background-color:#f97d7d}.ndpl-info{background-color:#7da9f9}.ndpl-error code,.ndpl-info code{padding:0 3px}.ndpl-error code{background-color:#e07070}.ndpl-info code{background-color:#7098e0}.ndpl-error .ndpl-pre,.ndpl-info .ndpl-pre{margin-bottom:0}@media only screen and (min-width:60em){.ndpl-error,.ndpl-info{margin:0}.ndpl-header{display:none}.ndpl-header__title a{display:block}}.ndpl-folding-cube{margin:20px auto;width:40px;height:40px;position:relative;-webkit-transform:rotateZ(45deg);transform:rotateZ(45deg)}.ndpl-folding-cube .ndpl-cube{float:left;width:50%;height:50%;position:relative;-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}.ndpl-folding-cube .ndpl-cube:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:#303637;-webkit-animation:ndpl-foldCubeAngle 2.4s infinite linear both;animation:ndpl-foldCubeAngle 2.4s infinite linear both;-webkit-transform-origin:100% 100%;-ms-transform-origin:100% 100%;transform-origin:100% 100%}.ndpl-header,.ndpl-sidebar{background-color:#FFF;position:fixed;top:0;width:100%}.ndpl-folding-cube .ndpl-cube2{-webkit-transform:scale(1.1) rotateZ(90deg);transform:scale(1.1) rotateZ(90deg)}.ndpl-folding-cube .ndpl-cube3{-webkit-transform:scale(1.1) rotateZ(180deg);transform:scale(1.1) rotateZ(180deg)}.ndpl-folding-cube .ndpl-cube4{-webkit-transform:scale(1.1) rotateZ(270deg);transform:scale(1.1) rotateZ(270deg)}.ndpl-folding-cube .ndpl-cube2:before{-webkit-animation-delay:.3s;animation-delay:.3s}.ndpl-folding-cube .ndpl-cube3:before{-webkit-animation-delay:.6s;animation-delay:.6s}.ndpl-folding-cube .ndpl-cube4:before{-webkit-animation-delay:.9s;animation-delay:.9s}@-webkit-keyframes ndpl-foldCubeAngle{0%,10%{-webkit-transform:perspective(140px) rotateX(-180deg);transform:perspective(140px) rotateX(-180deg);opacity:0}25%,75%{-webkit-transform:perspective(140px) rotateX(0);transform:perspective(140px) rotateX(0);opacity:1}100%,90%{-webkit-transform:perspective(140px) rotateY(180deg);transform:perspective(140px) rotateY(180deg);opacity:0}}@keyframes ndpl-foldCubeAngle{0%,10%{-webkit-transform:perspective(140px) rotateX(-180deg);transform:perspective(140px) rotateX(-180deg);opacity:0}25%,75%{-webkit-transform:perspective(140px) rotateX(0);transform:perspective(140px) rotateX(0);opacity:1}100%,90%{-webkit-transform:perspective(140px) rotateY(180deg);transform:perspective(140px) rotateY(180deg);opacity:0}}.ndpl-header{border-bottom:1px solid #DDD;box-shadow:0 0 1px rgba(0,0,0,.1);margin:0 0 36px;padding:12px;z-index:9998}.ndpl-header__logo{float:left;height:28px;margin:0 6px 0 0}.ndpl-header__title{color:#303637;font-size:18px;font-weight:700;line-height:28px;float:left;margin:0}.ndpl-header__title a,.ndpl-header__title a:hover{text-decoration:none!important}.ndpl-header__title small{font-size:60%;font-weight:300;margin-left:6px}.ndpl-sidebar{bottom:0;box-shadow:1px 0 2px rgba(0,0,0,.2);height:100%;left:-100%;overflow-y:auto;overflow-x:hidden;padding:103px 0 24px;right:0;z-index:9997}.ndpl-mobile .ndpl-sidebar{transition:left .5s ease}.ndpl-sidebar.open{left:0}.ndpl-sidebar__header{display:none}.ndpl-sidebar__logo{float:left;margin:0 0 24px;height:50px}@media only screen and (min-width:60em){.ndpl-sidebar{background-color:#FFF;bottom:0;display:block;left:-264px;padding:0;position:fixed;top:0;width:264px}.loaded .ndpl-sidebar{left:0}.ndpl-sidebar__header{display:block;padding:24px 24px 36px}.ndpl-sidebar__title{color:#303637;clear:left;display:block;font-size:18px;line-height:24px;font-weight:700;margin:0}.ndpl-sidebar__title a{text-decoration:none}.ndpl-sidebar__title a:hover{color:#FEA1AC}.ndpl-sidebar__title small{display:block;font-size:16px;font-weight:400}}.ndpl-copyright{display:block;padding:0 24px 24px}.ndpl-copyright p{color:#B0B1B3;font-size:12px;font-weight:300;line-height:21px}.ndpl-copyright p:last-of-type{margin:0}.ndpl-copyright a{text-decoration:none}.ndpl-nav__title{color:#303637;font-size:12px;font-weight:700;letter-spacing:1px;margin:0 0 21px;padding:0 24px;text-transform:uppercase}.ndpl-nav__child-items,.ndpl-nav__items{list-style:none;padding:0;font-size:14px}.ndpl-nav__items{border-top:1px solid transparent;font-weight:400;line-height:24px;margin:0 0 72px}.ndpl-nav__item{position:relative}.ndpl-nav__item.active .ndpl-nav__group{font-weight:700}.ndpl-nav__child-items{display:none;min-height:0;margin:0}.active .ndpl-nav__child-items{display:block}.ndpl-nav__child-item{border-bottom:1px solid transparent;border-radius:4px}.ndpl-nav__group,.ndpl-nav__page{border-bottom:1px solid #E0E6ED;font-weight:400;position:relative;text-decoration:none;display:block}.ndpl-nav__page{border-left:6px solid transparent;cursor:pointer;padding:6px 24px 6px 18px}.ndpl-nav__page.active,.ndpl-nav__page:hover{border-left-color:#FEA1AC}.ndpl-nav__group{padding:6px 24px}.ndpl-nav__group:after{background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5IiBoZWlnaHQ9IjE1IiB2aWV3Qm94PSIwIDAgOSAxNSI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbH MtMSB7CiAgICAgICAgZmlsbDogIzIzMWYyMDsKICAgICAgICBmaWxsLXJ1bGU6IGV2ZW5vZGQ7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTQ2MC40NDgsNDkxLjAwOUw0NjgsNDk4LjVsLTcuNTQ4LDcuNDkyTDQ1OSw1MDQuNTU3bDYuMS02LjA1NS02LjEtNi4wNTdaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNDU5IC00OTEpIi8+Cjwvc3ZnPgo=') center no-repeat;background-size:100% auto;display:block;height:8px;margin-top:-4px;position:absolute;right:24px;top:50%;transform:rotate(90deg);transition:transform .25s ease;width:5px}.active .ndpl-nav__group:after{transform:rotate(-90deg)}.ndpl-nav__component{border-left:6px solid transparent;color:#616367!important;display:block;font-size:14px;font-weight:300;padding:6px 24px 6px 30px;text-decoration:none}.ndpl-nav__component.active,.ndpl-nav__component:hover{border-left-color:#FEA1AC}.ndpl-nav__arrow{margin:-4px 0 0;opacity:.25;position:absolute;right:12px;top:18px;width:16px}.active .ndpl-nav__arrow{transform:rotate(180deg)}.ndpl-nav-handle{display:block;cursor:pointer;height:27px;overflow:hidden;position:fixed;right:0;transform:rotate(0);transition:.5s ease-in-out;top:15px;width:48px;z-index:9999}.ndpl-nav-handle.open{position:fixed}.ndpl-nav-handle__container{padding:12px 0 0}.ndpl-nav-handle span{background-color:#303637;display:block;height:3px;opacity:1;position:absolute;right:12px;transform:rotate(0);transition:.25s ease-in-out;width:27px}.ndpl-nav-handle span:nth-child(1){top:0}.ndpl-nav-handle span:nth-child(2){top:9px}.ndpl-nav-handle span:nth-child(3){top:18px}.ndpl-nav-handle.open span:nth-child(1){top:11px;transform:rotate(-45deg)}.ndpl-nav-handle.open span:nth-child(2){opacity:0;right:-60px}.ndpl-nav-handle.open span:nth-child(3){top:11px;transform:rotate(45deg)}.ndpl-library,.ndpl-page{padding-top:79px}.ndpl-page{color:#616367;padding-left:12px;padding-right:12px}.ndpl-page h1,.ndpl-page h2,.ndpl-page h3,.ndpl-page h4,.ndpl-page h5,.ndpl-page h6{color:#303637}.ndpl-preloaded{left:-9999px;position:absolute;top:-9999px}@media only screen and (min-width:35em){.ndpl-page{max-width:580px;margin:0 auto}}@media only screen and (min-width:60em){.ndpl-nav-handle{display:none}.ndpl-library,.ndpl-page{margin:0 auto;padding:56px 0}.ndpl-library h1:first-child,.ndpl-library h2:first-child,.ndpl-library h3:first-child,.ndpl-library h4:first-child,.ndpl-library h5:first-child,.ndpl-library h6:first-child,.ndpl-page h1:first-child,.ndpl-page h2:first-child,.ndpl-page h3:first-child,.ndpl-page h4:first-child,.ndpl-page h5:first-child,.ndpl-page h6:first-child{margin-top:0}.ndpl-content{padding:36px 48px 36px 312px}}.ndpl-library__group{overflow:auto;zoom:1}.ndpl-library__title{color:#303637;padding-left:12px;padding-right:12px;margin-bottom:24px}@media only screen and (min-width:60em){.ndpl-library__title{padding-left:0;padding-right:0;margin-bottom:24px}}.ndpl-group__description{color:#616367;margin-bottom:48px;padding:0 12px}@media only screen and (min-width:60em){.ndpl-group__description{padding:0}}.ndpl-component{clear:both;margin-bottom:60px}.ndpl-component__description,.ndpl-component__title{color:#616367;padding:0 12px}.ndpl-component__title{margin-bottom:12px}.ndpl-component__description{padding-bottom:24px}@media only screen and (min-width:60em){.ndpl-component__description,.ndpl-component__title{padding:0}.ndpl-components{display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-direction:row;-webkit-flex-direction:row;flex-direction:row;-ms-flew-wrap:wrap;-webkit-flew-wrap:wrap;flex-wrap:wrap;margin-left:-36px}.ndpl-component{padding-left:36px}.ndpl-component--half{-ms-flex-grow:2;-webkit-flex-grow:2;flex-grow:2;max-width:50%;width:50%}.ndpl-component--full{-ms-flex-grow:1;-webkit-flex-grow:1;flex-grow:1;width:100%}}.ndpl-component__colors{padding:0 12px}.ndpl-component__color-container{float:left;margin-top:24px;width:100%}.ndpl-component__color-container:first-of-type{margin-top:0}.ndpl-component__color-container:nth-child(even){margin-right:0}.ndpl-component__color{float:left;line-height:1;padding:24px 0;text-align:center;width:50%}.ndpl-component__color:first-of-type{border-radius:6px 0 0 6px}.ndpl-component__color:last-of-type{border-radius:0 6px 6px 0}.ndpl-component__color:first-of-type:last-of-type{border-radius:6px;width:100%}.ndpl-component__color div{border:1px solid #FFF;border-radius:3px;color:#FFF;display:inline-block;font-size:13px;letter-spacing:1px;line-height:13px;padding:6px 9px;text-transform:uppercase}.ndpl-component__color div.ndpl-dark-text{color:#B0B1B3!important;border-color:#B0B1B3}.ndpl-component__code,.ndpl-component__sample{border-bottom:1px solid #E0E6ED}@media only screen and (min-width:60em){.ndpl-component__colors{padding:0}.ndpl-component__color-container{margin-right:3%;width:17.5%}.ndpl-component__color-container:nth-child(even){margin-right:3%}.ndpl-component__color-container:nth-child(5n){margin-right:0}.ndpl-component__color-container:nth-child(-n+5){margin-top:0}.ndpl-component__color{padding:48px 0;width:100%}.ndpl-component__color:first-of-type{border-radius:6px 6px 0 0}.ndpl-component__color:last-of-type{border-radius:0 0 6px 6px}}.ndpl-component__sample{background-color:#FFF;border-top:1px solid #E0E6ED;padding:36px 12px;position:relative}.ndpl-component__sample:after{display:block;clear:both}.ndpl-component__sample--inverted{background-color:#333}.ndpl-component__sample-hidden,.ndpl-component__sample-missing{display:block;margin:0 12px;text-align:center}.ndpl-component__code .ndpl-pre{margin:0}.ndpl-component__code .ndpl-code{font-size:12px;line-height:18px;opacity:.75;overflow-x:scroll;overflow-y:hidden;-ms-overflow-style:-ms-autohiding-scrollbar;padding:36px 12px;white-space:pre}.ndpl-component__code-toggle{border-bottom:1px solid transparent;color:#B0B1B3;cursor:pointer;display:block;font-size:12px;letter-spacing:1px;padding:9px 12px;text-align:center;text-transform:uppercase}@media only screen and (min-width:60em){.ndpl-component__sample{border:1px solid #E0E6ED;border-radius:6px 6px 0 0;padding:36px}.ndpl-component__sample--disabled-code{border-radius:6px}.ndpl-component__sample-hidden,.ndpl-component__sample-missing{margin:0}.ndpl-component__code{border:1px solid #E0E6ED;border-top:none}.ndpl-component__code .ndpl-code{font-size:15px;line-height:21px;padding:36px}.ndpl-component__code-toggle{border-left:1px solid transparent;border-right:1px solid transparent;border-radius:0 0 6px 6px}} \ No newline at end of file +.ndpl-body,.ndpl-c-background{background-color:#FFF}.ndpl-cf:after,.ndpl-component__sample:after,.ndpl-nav__group:after{content:""}.ndpl-component__code-toggle,.ndpl-component__color div,.ndpl-nav__title{letter-spacing:1px;text-transform:uppercase}.ndpl-body{-ms-overflow-style:-ms-autohiding-scrollbar;margin:0;padding:0}[class*=" ndpl-"],[class^=ndpl-]{box-sizing:border-box}.ndpl-disable-scrolling{overflow:hidden}.ndpl-body.nav-open{overflow-y:hidden}.ndpl-component__code-toggle,.ndpl-component__color,.ndpl-component__description,.ndpl-component__label,.ndpl-component__title,.ndpl-error,.ndpl-group__description,.ndpl-header,.ndpl-info,.ndpl-intro,.ndpl-library__title,.ndpl-loading__title,.ndpl-nav__title,.ndpl-page,.ndpl-sidebar,.ndpl-sidebar__title{font-family:'Open Sans','Trebuchet MS','Lucida Grande','Lucida Sans Unicode','Lucida Sans',Tahoma,sans-serif}.ndpl-library__title{font-size:27px;font-weight:400;line-height:36px}.ndpl-component__title{font-size:18px;font-weight:300;line-height:32px}.ndpl-component__description,.ndpl-group__description,.ndpl-intro,.ndpl-page{font-size:12px;font-weight:300;line-height:24px}.ndpl-page h1{margin-bottom:24px;font-size:26px;font-weight:400;line-height:36px}.ndpl-page h2,.ndpl-page h3,.ndpl-page h4,.ndpl-page h5{font-weight:300}.ndpl-page h2,.ndpl-page h3,.ndpl-page h4,.ndpl-page h5,.ndpl-page h6{margin:24px 0 12px}.ndpl-page h2:first-child,.ndpl-page h3:first-child,.ndpl-page h4:first-child,.ndpl-page h5:first-child,.ndpl-page h6:first-child{margin-top:0}.ndpl-page h2{font-size:21px;line-height:36px}.ndpl-page h3{font-size:18px;line-height:32px}.ndpl-page h4{font-size:16px;line-height:27px}.ndpl-page h5,.ndpl-page h6{font-size:14px;line-height:24px}.ndpl-page h6{font-weight:400}.ndpl-component__description code,.ndpl-group__description code,.ndpl-page code{display:inline-block;color:#BABEC7;border:1px solid #E1E1E1;border-radius:3px;line-height:18px;padding:0 3px}.ndpl-c-brand-a:hover,.ndpl-c-brand-c{color:#FEA1AC}.ndpl-page a,.ndpl-page a[href]{text-decoration:none}.ndpl-page a:hover,.ndpl-page a[href]:hover{text-decoration:underline}.ndpl-page p{margin-bottom:24px}@media only screen and (min-width:60em){.ndpl-page h1{margin-bottom:48px}.ndpl-page h2,.ndpl-page h3,.ndpl-page h4,.ndpl-page h5,.ndpl-page h6{margin:48px 0 24px}.ndpl-library__title{font-size:36px;line-height:36px}.ndpl-component__title{font-size:21px;line-height:32px}.ndpl-component__description,.ndpl-group__description,.ndpl-intro,.ndpl-page{font-size:14px;line-height:21px}.ndpl-page h1{font-size:36px;line-height:36px}.ndpl-page h2{font-size:28px;line-height:36px}.ndpl-page h3{font-size:21px;line-height:32px}.ndpl-page h4{font-size:18px;line-height:27px}.ndpl-page h5,.ndpl-page h6{font-size:16px;line-height:24px}}.ndpl-c-border{border-color:#E0E6ED}.ndpl-c-highlight{background-color:#F9FAFC}.ndpl-c-brand-bg{background-color:#FEA1AC}.ndpl-c-brand-b{border-color:#FEA1AC}.ndpl-c-brand-ca a,.ndpl-c-brand-ca a:active,.ndpl-c-brand-ca a:focus,.ndpl-c-brand-ca a:visited,.ndpl-c-brand-ca a[href],.ndpl-c-brand-ca a[href]:active,.ndpl-c-brand-ca a[href]:focus,.ndpl-c-brand-ca a[href]:visited{color:#303637}.ndpl-c-brand-ca a:hover,.ndpl-c-brand-ca a[href]:hover,.ndpl-c-brand-cai a,.ndpl-c-brand-cai a:active,.ndpl-c-brand-cai a:focus,.ndpl-c-brand-cai a:visited,.ndpl-c-brand-cai a[href],.ndpl-c-brand-cai a[href]:active,.ndpl-c-brand-cai a[href]:focus,.ndpl-c-brand-cai a[href]:visited{color:#FEA1AC}.ndpl-c-brand-cai a:hover,.ndpl-c-brand-cai a[href]:hover{color:#303637!important}.ndpl-nsc,.ndpl-nsc:active,.ndpl-nsc:focus,.ndpl-nsc:hover,.ndpl-nsc:visited,.ndpl-nsc[href]:active,.ndpl-nsc[href]:focus,.ndpl-nsc[href]:hover,.ndpl-nsc[href]:visited{color:#303637!important;text-decoration:none}.ndpl-cf:after{display:block;clear:both}.ndpl-dark-text{color:#616367!important}.ndpl-light-text{color:#FFF!important}.ndpl-apply-border{border:1px solid #E0E6ED}.ndpl-apply-border+.ndpl-apply-border{border-top:none}.ndpl-loading__title{color:#303637;font-weight:300;margin:0 24px 24px;opacity:0;transition:opacity .5s ease}.wf-opensans-n4-active .ndpl-loading__title{opacity:1}.ndpl-container{opacity:0;transition:opacity .5s ease .5s}.ndpl-container.loaded{opacity:1}.ndpl-container.resizing{visibility:hidden}.ndpl-loading{left:-9999px;opacity:0;padding:96px 0;position:fixed;text-align:center;transition:opacity .5s ease;width:100%}.ndpl-loading.in-progress{left:0;opacity:1}.ndpl-loading__title{font-size:27px;padding-top:24px}@media only screen and (min-width:60em){.ndpl-loading__title{font-size:36px;padding-top:24px}}.ndpl-error,.ndpl-info{border-radius:6px;color:#FFF;display:inline-block;list-style:none;margin:0 12px;padding:24px;font-size:14px}.ndpl-header:after,.ndpl-header__title a{display:none}.ndpl-error{background-color:#f97d7d}.ndpl-info{background-color:#7da9f9}.ndpl-error code,.ndpl-info code{padding:0 3px}.ndpl-error code{background-color:#e07070}.ndpl-info code{background-color:#7098e0}.ndpl-error .ndpl-pre,.ndpl-info .ndpl-pre{margin-bottom:0}@media only screen and (min-width:60em){.ndpl-error,.ndpl-info{margin:0}.ndpl-header{display:none}.ndpl-header__title a{display:block}}.ndpl-folding-cube{margin:20px auto;width:40px;height:40px;position:relative;-webkit-transform:rotateZ(45deg);transform:rotateZ(45deg)}.ndpl-folding-cube .ndpl-cube{float:left;width:50%;height:50%;position:relative;-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}.ndpl-folding-cube .ndpl-cube:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:#303637;-webkit-animation:ndpl-foldCubeAngle 2.4s infinite linear both;animation:ndpl-foldCubeAngle 2.4s infinite linear both;-webkit-transform-origin:100% 100%;-ms-transform-origin:100% 100%;transform-origin:100% 100%}.ndpl-header,.ndpl-sidebar{background-color:#FFF;position:fixed;top:0;width:100%}.ndpl-folding-cube .ndpl-cube2{-webkit-transform:scale(1.1) rotateZ(90deg);transform:scale(1.1) rotateZ(90deg)}.ndpl-folding-cube .ndpl-cube3{-webkit-transform:scale(1.1) rotateZ(180deg);transform:scale(1.1) rotateZ(180deg)}.ndpl-folding-cube .ndpl-cube4{-webkit-transform:scale(1.1) rotateZ(270deg);transform:scale(1.1) rotateZ(270deg)}.ndpl-folding-cube .ndpl-cube2:before{-webkit-animation-delay:.3s;animation-delay:.3s}.ndpl-folding-cube .ndpl-cube3:before{-webkit-animation-delay:.6s;animation-delay:.6s}.ndpl-folding-cube .ndpl-cube4:before{-webkit-animation-delay:.9s;animation-delay:.9s}@-webkit-keyframes ndpl-foldCubeAngle{0%,10%{-webkit-transform:perspective(140px) rotateX(-180deg);transform:perspective(140px) rotateX(-180deg);opacity:0}25%,75%{-webkit-transform:perspective(140px) rotateX(0);transform:perspective(140px) rotateX(0);opacity:1}100%,90%{-webkit-transform:perspective(140px) rotateY(180deg);transform:perspective(140px) rotateY(180deg);opacity:0}}@keyframes ndpl-foldCubeAngle{0%,10%{-webkit-transform:perspective(140px) rotateX(-180deg);transform:perspective(140px) rotateX(-180deg);opacity:0}25%,75%{-webkit-transform:perspective(140px) rotateX(0);transform:perspective(140px) rotateX(0);opacity:1}100%,90%{-webkit-transform:perspective(140px) rotateY(180deg);transform:perspective(140px) rotateY(180deg);opacity:0}}.ndpl-header{border-bottom:1px solid #DDD;box-shadow:0 0 1px rgba(0,0,0,.1);margin:0 0 36px;padding:12px;z-index:9998}.ndpl-header__logo{float:left;height:28px;margin:0 6px 0 0}.ndpl-header__title{color:#303637;font-size:18px;font-weight:700;line-height:28px;float:left;margin:0}.ndpl-header__title a,.ndpl-header__title a:hover{text-decoration:none!important}.ndpl-header__title small{font-size:60%;font-weight:300;margin-left:6px}.ndpl-sidebar{bottom:0;box-shadow:1px 0 2px rgba(0,0,0,.2);height:100%;left:-100%;overflow-y:auto;overflow-x:hidden;padding:103px 0 24px;right:0;z-index:9997}.ndpl-mobile .ndpl-sidebar{transition:left .5s ease}.ndpl-sidebar.open{left:0}.ndpl-sidebar__header{display:none}.ndpl-sidebar__logo{float:left;margin:0 0 24px;height:50px}@media only screen and (min-width:60em){.ndpl-sidebar{background-color:#FFF;bottom:0;display:block;left:-264px;padding:0;position:fixed;top:0;width:264px}.loaded .ndpl-sidebar{left:0}.ndpl-sidebar__header{display:block;padding:24px 24px 36px}.ndpl-sidebar__title{color:#303637;clear:left;display:block;font-size:18px;line-height:24px;font-weight:700;margin:0}.ndpl-sidebar__title a{text-decoration:none}.ndpl-sidebar__title a:hover{color:#FEA1AC}.ndpl-sidebar__title small{display:block;font-size:16px;font-weight:400}}.ndpl-copyright{display:block;padding:0 24px 24px}.ndpl-copyright p{color:#B0B1B3;font-size:12px;font-weight:300;line-height:21px}.ndpl-copyright p:last-of-type{margin:0}.ndpl-copyright a{text-decoration:none}.ndpl-nav__title{color:#303637;font-size:12px;font-weight:700;margin:0 0 21px;padding:0 24px}.ndpl-nav__child-items,.ndpl-nav__items{list-style:none;padding:0;font-size:14px}.ndpl-nav__items{border-top:1px solid transparent;font-weight:400;line-height:24px;margin:0 0 72px}.ndpl-nav__item{position:relative}.ndpl-nav__item.active .ndpl-nav__group{font-weight:700}.ndpl-nav__child-items{display:none;min-height:0;margin:0}.active .ndpl-nav__child-items{display:block}.ndpl-nav__child-item{border-bottom:1px solid transparent;border-radius:4px}.ndpl-nav__group,.ndpl-nav__page{border-bottom:1px solid #E0E6ED;font-weight:400;position:relative;text-decoration:none;display:block}.ndpl-nav__page{border-left:6px solid transparent;cursor:pointer;padding:6px 24px 6px 18px}.ndpl-nav__page.active,.ndpl-nav__page:hover{border-left-color:#FEA1AC}.ndpl-nav__group{padding:6px 24px}.ndpl-nav__group:after{background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5IiBoZWlnaHQ9IjE1IiB2aWV3Qm94PSIwIDAgOSAxNSI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbH MtMSB7CiAgICAgICAgZmlsbDogIzIzMWYyMDsKICAgICAgICBmaWxsLXJ1bGU6IGV2ZW5vZGQ7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTQ2MC40NDgsNDkxLjAwOUw0NjgsNDk4LjVsLTcuNTQ4LDcuNDkyTDQ1OSw1MDQuNTU3bDYuMS02LjA1NS02LjEtNi4wNTdaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNDU5IC00OTEpIi8+Cjwvc3ZnPgo=') center no-repeat;background-size:100% auto;display:block;height:8px;margin-top:-4px;position:absolute;right:24px;top:50%;transform:rotate(90deg);transition:transform .25s ease;width:5px}.active .ndpl-nav__group:after{transform:rotate(-90deg)}.ndpl-nav__component{border-left:6px solid transparent;color:#616367!important;display:block;font-size:14px;font-weight:300;padding:6px 24px 6px 30px;text-decoration:none}.ndpl-nav__component.active,.ndpl-nav__component:hover{border-left-color:#FEA1AC}.ndpl-nav__arrow{margin:-4px 0 0;opacity:.25;position:absolute;right:12px;top:18px;width:16px}.active .ndpl-nav__arrow{transform:rotate(180deg)}.ndpl-nav-handle{display:block;cursor:pointer;height:27px;overflow:hidden;position:fixed;right:0;transform:rotate(0);transition:.5s ease-in-out;top:15px;width:48px;z-index:9999}.ndpl-nav-handle.open{position:fixed}.ndpl-nav-handle__container{padding:12px 0 0}.ndpl-nav-handle span{background-color:#303637;display:block;height:3px;opacity:1;position:absolute;right:12px;transform:rotate(0);transition:.25s ease-in-out;width:27px}.ndpl-nav-handle span:nth-child(1){top:0}.ndpl-nav-handle span:nth-child(2){top:9px}.ndpl-nav-handle span:nth-child(3){top:18px}.ndpl-nav-handle.open span:nth-child(1){top:11px;transform:rotate(-45deg)}.ndpl-nav-handle.open span:nth-child(2){opacity:0;right:-60px}.ndpl-nav-handle.open span:nth-child(3){top:11px;transform:rotate(45deg)}.ndpl-library,.ndpl-page{padding-top:79px}.ndpl-page{color:#616367;padding-left:12px;padding-right:12px}.ndpl-page h1,.ndpl-page h2,.ndpl-page h3,.ndpl-page h4,.ndpl-page h5,.ndpl-page h6{color:#303637}.ndpl-preloaded{left:-9999px;position:absolute;top:-9999px}@media only screen and (min-width:35em){.ndpl-page{max-width:580px;margin:0 auto}}@media only screen and (min-width:60em){.ndpl-nav-handle{display:none}.ndpl-library,.ndpl-page{margin:0 auto;padding:56px 0}.ndpl-library h1:first-child,.ndpl-library h2:first-child,.ndpl-library h3:first-child,.ndpl-library h4:first-child,.ndpl-library h5:first-child,.ndpl-library h6:first-child,.ndpl-page h1:first-child,.ndpl-page h2:first-child,.ndpl-page h3:first-child,.ndpl-page h4:first-child,.ndpl-page h5:first-child,.ndpl-page h6:first-child{margin-top:0}.ndpl-content{padding:36px 48px 36px 312px}}.ndpl-library__group{overflow:auto;zoom:1}.ndpl-library__title{color:#303637;padding-left:12px;padding-right:12px;margin-bottom:24px}@media only screen and (min-width:60em){.ndpl-library__title{padding-left:0;padding-right:0;margin-bottom:24px}}.ndpl-group__description{color:#616367;margin-bottom:48px;padding:0 12px}@media only screen and (min-width:60em){.ndpl-group__description{padding:0}}.ndpl-component{clear:both;margin-bottom:60px}.ndpl-component__description,.ndpl-component__title{color:#616367;padding:0 12px}.ndpl-component__title{margin-bottom:12px}.ndpl-component__description{padding-bottom:24px}@media only screen and (min-width:60em){.ndpl-component__description,.ndpl-component__title{padding:0}.ndpl-components{display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-direction:row;-webkit-flex-direction:row;flex-direction:row;-ms-flew-wrap:wrap;-webkit-flew-wrap:wrap;flex-wrap:wrap;margin-left:-36px}.ndpl-component{padding-left:36px}.ndpl-component--half{-ms-flex-grow:2;-webkit-flex-grow:2;flex-grow:2;max-width:50%;width:50%}.ndpl-component--full{-ms-flex-grow:1;-webkit-flex-grow:1;flex-grow:1;width:100%}}.ndpl-component__colors{padding:0 12px}.ndpl-component__color-container{float:left;margin-top:24px;width:100%}.ndpl-component__color-container:first-of-type{margin-top:0}.ndpl-component__color-container:nth-child(even){margin-right:0}.ndpl-component__color{float:left;line-height:1;padding:24px 0;text-align:center;width:50%}.ndpl-component__color:first-of-type{border-radius:6px 0 0 6px}.ndpl-component__color:last-of-type{border-radius:0 6px 6px 0}.ndpl-component__color:first-of-type:last-of-type{border-radius:6px;width:100%}.ndpl-component__color div{border:1px solid #FFF;border-radius:3px;color:#FFF;display:inline-block;font-size:13px;line-height:13px;padding:6px 9px}.ndpl-component__color div.ndpl-dark-text{color:#B0B1B3!important;border-color:#B0B1B3}.ndpl-component__code,.ndpl-component__sample{border-bottom:1px solid #E0E6ED}@media only screen and (min-width:60em){.ndpl-component__colors{padding:0}.ndpl-component__color-container{margin-right:3%;width:17.5%}.ndpl-component__color-container:nth-child(even){margin-right:3%}.ndpl-component__color-container:nth-child(5n){margin-right:0}.ndpl-component__color-container:nth-child(-n+5){margin-top:0}.ndpl-component__color{padding:48px 0;width:100%}.ndpl-component__color:first-of-type{border-radius:6px 6px 0 0}.ndpl-component__color:last-of-type{border-radius:0 0 6px 6px}}.ndpl-component__sample{background-color:#FFF;border-top:1px solid #E0E6ED;padding:36px 12px;position:relative}.ndpl-component__sample:after{display:block;clear:both}.ndpl-component__sample--inverted{background-color:#333}.ndpl-component__sample-hidden,.ndpl-component__sample-missing{display:block;margin:0 12px;text-align:center}.ndpl-component__code .ndpl-pre{margin:0}.ndpl-component__code .ndpl-code,.ndpl-component__description pre code,.ndpl-page pre code{box-sizing:border-box;color:#616367;font-size:12px;line-height:18px;opacity:.75;overflow-x:scroll;overflow-y:hidden;-ms-overflow-style:-ms-autohiding-scrollbar;padding:36px 12px;white-space:pre;width:100%}.ndpl-component__description pre code,.ndpl-page pre code{padding:12px}.ndpl-component__code-toggle{border-bottom:1px solid transparent;color:#B0B1B3;cursor:pointer;display:block;font-size:12px;padding:9px 12px;text-align:center}@media only screen and (min-width:60em){.ndpl-component__sample{border:1px solid #E0E6ED;border-radius:6px 6px 0 0;padding:36px}.ndpl-component__sample--disabled-code{border-radius:6px}.ndpl-component__sample-hidden,.ndpl-component__sample-missing{margin:0}.ndpl-component__code{border:1px solid #E0E6ED;border-top:none}.ndpl-component__code .ndpl-code,.ndpl-component__description pre code,.ndpl-page pre code{font-size:15px;line-height:21px;padding:36px}.ndpl-component__description pre code,.ndpl-page pre code{padding:12px}.ndpl-component__code-toggle{border-left:1px solid transparent;border-right:1px solid transparent;border-radius:0 0 6px 6px}} \ No newline at end of file diff --git a/_template/app/js/main.js b/_template/app/js/main.js index 52e633b..c9faa40 100644 --- a/_template/app/js/main.js +++ b/_template/app/js/main.js @@ -37,12 +37,11 @@ var ndplComponent = Vue.extend({ watch: { 'component.html': function() { + var _this = this; // Apply syntax highlighting when component html is loaded if(this.component.html.length) { - var block = this.$el.querySelector('pre code'); - - hljs.highlightBlock(block); + _this.$root.applySyntaxHighlighting(_this.$el); } } }, @@ -74,9 +73,7 @@ var ndplComponent = Vue.extend({ }); if (_this.component.html) { - var block = this.$el.querySelector('pre code'); - - hljs.highlightBlock(block); + _this.$root.applySyntaxHighlighting(_this.$el); } }, @@ -447,6 +444,25 @@ new Vue({ methods: { + /** + * Apply syntax highlighting to pre code elements + * within passed element. + * + * @param el + */ + applySyntaxHighlighting: function(el) { + + setTimeout(function() { + var blocks = el.querySelectorAll('pre code'); + + for(var i = 0; i < blocks.length; i++) { + var block = blocks[i]; + + hljs.highlightBlock(block); + } + }, 0); + }, + /** * Reads the data.json file. */ @@ -786,6 +802,8 @@ new Vue({ _this.$http.get(page.file + '?cb=' + new Date()).then(function (response) { _this.$set('active_page.markup', marked(response.data)); + + _this.applySyntaxHighlighting(document); }); _this.updateHash(page.name); diff --git a/_template/app/js/main.min.js b/_template/app/js/main.min.js index da1d246..75f1be8 100644 --- a/_template/app/js/main.min.js +++ b/_template/app/js/main.min.js @@ -1 +1 @@ -var ndplComponent=Vue.extend({data:function(){return{loaded:!1,hide_sample_code:!1}},props:{component:{required:!0}},computed:{inline_styles:function(){var o=this,e="";return o.loaded&&(o.component.options.sample_min_height&&(e+="min-height:"+o.component.options.sample_min_height+"px;"),o.component.options.sample_background_color&&(e+="background-color:"+o.component.options.sample_background_color+" !important;")),e}},watch:{"component.html":function(){if(this.component.html.length){var o=this.$el.querySelector("pre code");hljs.highlightBlock(o)}}},ready:function(){var o=this;if(o.$on("loaded",function(){window.addEventListener("scroll",o.updateActive),window.addEventListener("resize",o.updateActive),o.setHideSample(function(){o.loaded=!0})}),o.$on("resizing",function(e){o.loaded=!1,e||o.setHideSample(function(){o.loaded=!0})}),o.component.html){var e=this.$el.querySelector("pre code");hljs.highlightBlock(e)}},methods:{updateActive:function(){var o=this;if(o.$root&&o.$root.scroll_position>=o.$el.offsetTop-60&&o.$root.scroll_position210},shouldApplyBorder:function(o){var e=this.$root.convertHexToRgb(o),t=this.$root.getColorBrightness(e);return t>240},setHideSample:function(o){o="undefined"!=typeof o?o:function(){};var e=this;e.hide_sample_code=!1,setTimeout(function(){e.$el.querySelector(".ndpl-component__code")&&(e.$el.querySelector(".ndpl-component__sample").offsetHeight<=74&&!e.component.options.disabled_auto_sample_hiding&&(e.hide_sample_code=!0),e.component.options.disabled_auto_sample_hiding&&e.component.options.disabled_auto_sample_hiding.hasOwnProperty("show_on_mobile")&&e.component.options.disabled_auto_sample_hiding.hasOwnProperty("show_on_desktop")&&(e.$root.mobile_view?e.hide_sample_code=!e.component.options.disabled_auto_sample_hiding.show_on_mobile:e.hide_sample_code=!e.component.options.disabled_auto_sample_hiding.show_on_desktop)),o()},0)},isCodeVisible:function(){var o=this;return!o.hide_sample_code}}});Vue.component("ndpl-component",ndplComponent);var ndplGroup=Vue.extend({props:{group:{required:!0}}});Vue.component("ndpl-group",ndplGroup);var ndplScript=Vue.extend({props:{script:{required:!0}},methods:{loadTypekit:function(){try{Typekit.load({async:!0})}catch(o){}}}});Vue.component("ndpl-script",ndplScript),new Vue({el:"html",data:{intro:null,project_logo:null,project_favicon:null,project_name:null,project_url:null,copyright_start_year:null,client_name:null,client_url:null,creators:{},content:{},groups:{},theme:{},assets:{css:[],js:[]},font_libraries:{typekit_code:null,google_web_fonts:null,typography_web_fonts:null},log:{error:[],info:[]},components_count:0,groups_count:0,components_loaded_count:0,groups_loaded_count:0,groups_loaded:!1,loaded:!1,resizing:!1,typekit_loaded:!1,scroll_position:0,prev_scroll_position:0,active_group:null,active_components:[],active_page:null,open_group:null,show_first_page_on_load:!1,scrolling_to:!1,sidebar_scrolling:!1,window_outer_width:0,breakpoint:960,mobile_view:!1,open_nav:!1,version:null},computed:{project:function(){return this.project_name&&this.project_url?''+this.project_name+"":this.project_name&&!this.project_url?this.project_name:null},copyright_year:function(){var o=new Date;return o.getFullYear()==this.copyright_start_year?this.copyright_start_year:this.copyright_start_year+" - "+o.getFullYear()},client:function(){return this.client_name&&this.client_url?''+this.client_name+"":this.client_name&&!this.client_url?this.client_name:null},all_creators:function(){var o="";if(this.creators.length&&this.creators[0].name){for(var e=0;e'+name+"";return o.substring(2)}return null},library_inline_styles:function(){var o=this,e="";return o.theme.max_width&&(e+="max-width:"+o.theme.max_width+"px;"),e}},watch:{groups_loaded:function(){var o=this;o.setupComponents()},loaded:function(){var o=this;o.scrollTo(window.location.hash),o.$broadcast("loaded")}},ready:function(){var o=this;o.loadDataFile(),o.window_outer_width=window.outerWidth,o.mobile_view=o.window_outer_width>=o.breakpoint?!1:!0,window.addEventListener("scroll",o.setScrollPosition),window.addEventListener("resize",function(){o.window_outer_width=window.outerWidth,o.setScrollPosition(),o.mobile_view=o.window_outer_width>=o.breakpoint?!1:!0});var e=document.querySelector(".ndpl-sidebar");e.addEventListener("mouseover",function(e){o.sidebar_scrolling=!0}),e.addEventListener("mouseleave",function(e){o.sidebar_scrolling=!1}),setTimeout(function(){var e=o.isLoadingPage();e&&o.loadPage(e)},0)},methods:{loadDataFile:function(){var o=this;o.$http.get("./data.json?cb="+new Date).then(function(e){o.initData(e.data,function(){o.$data.groups.length?o.setupGroups():o.logInfo("You need to add a component to your library before it can be loaded.
You can either do this manually by editing your data.json file,
or you can use the command line helper: astrum new [group_name/component_name]")})})},isLoadingPage:function(){var o=this,e=location.hash;if(void 0!==o.content.page&&o.content.pages.length)if(e)for(var t=0;t"+o.name+" group failed to load from "+t+"/description.md")})},loadComponent:function(o){var e=this,t="./components/"+o.group+"/"+o.name;e.$http.get(t+"/markup.html?cb="+new Date).then(function(t){o.html=t.data,e.areComponentsLoaded()},function(){e.logError("HTML file for "+o.name+" component failed to load from "+t+"/html.md")}),e.$http.get(t+"/description.md?cb="+new Date).then(function(t){o.description=marked(t.data),e.areComponentsLoaded()},function(){e.logError("Description file for "+o.name+" component failed to load from "+t+"/description.md")})},areGroupsLoaded:function(){var o=this;o.groups_loaded_count+=1,o.groups_loaded_count===o.groups_count&&setTimeout(function(){o.groups_loaded=!0},1e3)},areComponentsLoaded:function(){var o=this;o.components_loaded_count+=1,o.components_loaded_count===2*o.components_count&&setTimeout(function(){o.loaded=!0},2e3)},addLog:function(o,e,t){var n=this;t="undefined"!=typeof t?t:"error",e="undefined"!=typeof e?e:null,n.log[t].push(o),console[t]("[Pattern Library warn]: "+o),e&&console[t](e)},logError:function(o,e){var t=this;t.addLog(o,e,"error")},logInfo:function(o,e){var t=this;t.addLog(o,e,"info")},setScrollPosition:function(){var o=this,e=document.documentElement,t=e&&e.scrollTop||document.body.scrollTop;o.prev_scroll_position=o.scroll_position,o.scroll_position=t},getScrollDirection:function(){var o=this;return o.prev_scroll_position=o.$el.offsetTop-60&&o.$root.scroll_position210},shouldApplyBorder:function(o){var t=this.$root.convertHexToRgb(o),e=this.$root.getColorBrightness(t);return e>240},setHideSample:function(o){o="undefined"!=typeof o?o:function(){};var t=this;t.hide_sample_code=!1,setTimeout(function(){t.$el.querySelector(".ndpl-component__code")&&(t.$el.querySelector(".ndpl-component__sample").offsetHeight<=74&&!t.component.options.disabled_auto_sample_hiding&&(t.hide_sample_code=!0),t.component.options.disabled_auto_sample_hiding&&t.component.options.disabled_auto_sample_hiding.hasOwnProperty("show_on_mobile")&&t.component.options.disabled_auto_sample_hiding.hasOwnProperty("show_on_desktop")&&(t.$root.mobile_view?t.hide_sample_code=!t.component.options.disabled_auto_sample_hiding.show_on_mobile:t.hide_sample_code=!t.component.options.disabled_auto_sample_hiding.show_on_desktop)),o()},0)},isCodeVisible:function(){var o=this;return!o.hide_sample_code}}});Vue.component("ndpl-component",ndplComponent);var ndplGroup=Vue.extend({props:{group:{required:!0}}});Vue.component("ndpl-group",ndplGroup);var ndplScript=Vue.extend({props:{script:{required:!0}},methods:{loadTypekit:function(){try{Typekit.load({async:!0})}catch(o){}}}});Vue.component("ndpl-script",ndplScript),new Vue({el:"html",data:{intro:null,project_logo:null,project_favicon:null,project_name:null,project_url:null,copyright_start_year:null,client_name:null,client_url:null,creators:{},content:{},groups:{},theme:{},assets:{css:[],js:[]},font_libraries:{typekit_code:null,google_web_fonts:null,typography_web_fonts:null},log:{error:[],info:[]},components_count:0,groups_count:0,components_loaded_count:0,groups_loaded_count:0,groups_loaded:!1,loaded:!1,resizing:!1,typekit_loaded:!1,scroll_position:0,prev_scroll_position:0,active_group:null,active_components:[],active_page:null,open_group:null,show_first_page_on_load:!1,scrolling_to:!1,sidebar_scrolling:!1,window_outer_width:0,breakpoint:960,mobile_view:!1,open_nav:!1,version:null},computed:{project:function(){return this.project_name&&this.project_url?''+this.project_name+"":this.project_name&&!this.project_url?this.project_name:null},copyright_year:function(){var o=new Date;return o.getFullYear()==this.copyright_start_year?this.copyright_start_year:this.copyright_start_year+" - "+o.getFullYear()},client:function(){return this.client_name&&this.client_url?''+this.client_name+"":this.client_name&&!this.client_url?this.client_name:null},all_creators:function(){var o="";if(this.creators.length&&this.creators[0].name){for(var t=0;t'+name+"";return o.substring(2)}return null},library_inline_styles:function(){var o=this,t="";return o.theme.max_width&&(t+="max-width:"+o.theme.max_width+"px;"),t}},watch:{groups_loaded:function(){var o=this;o.setupComponents()},loaded:function(){var o=this;o.scrollTo(window.location.hash),o.$broadcast("loaded")}},ready:function(){var o=this;o.loadDataFile(),o.window_outer_width=window.outerWidth,o.mobile_view=o.window_outer_width>=o.breakpoint?!1:!0,window.addEventListener("scroll",o.setScrollPosition),window.addEventListener("resize",function(){o.window_outer_width=window.outerWidth,o.setScrollPosition(),o.mobile_view=o.window_outer_width>=o.breakpoint?!1:!0});var t=document.querySelector(".ndpl-sidebar");t.addEventListener("mouseover",function(t){o.sidebar_scrolling=!0}),t.addEventListener("mouseleave",function(t){o.sidebar_scrolling=!1}),setTimeout(function(){var t=o.isLoadingPage();t&&o.loadPage(t)},0)},methods:{applySyntaxHighlighting:function(o){setTimeout(function(){for(var t=o.querySelectorAll("pre code"),e=0;eYou can either do this manually by editing your data.json file,
or you can use the command line helper: astrum new [group_name/component_name]")})})},isLoadingPage:function(){var o=this,t=location.hash;if(void 0!==o.content.page&&o.content.pages.length)if(t)for(var e=0;e"+o.name+" group failed to load from "+e+"/description.md")})},loadComponent:function(o){var t=this,e="./components/"+o.group+"/"+o.name;t.$http.get(e+"/markup.html?cb="+new Date).then(function(e){o.html=e.data,t.areComponentsLoaded()},function(){t.logError("HTML file for "+o.name+" component failed to load from "+e+"/html.md")}),t.$http.get(e+"/description.md?cb="+new Date).then(function(e){o.description=marked(e.data),t.areComponentsLoaded()},function(){t.logError("Description file for "+o.name+" component failed to load from "+e+"/description.md")})},areGroupsLoaded:function(){var o=this;o.groups_loaded_count+=1,o.groups_loaded_count===o.groups_count&&setTimeout(function(){o.groups_loaded=!0},1e3)},areComponentsLoaded:function(){var o=this;o.components_loaded_count+=1,o.components_loaded_count===2*o.components_count&&setTimeout(function(){o.loaded=!0},2e3)},addLog:function(o,t,e){var n=this;e="undefined"!=typeof e?e:"error",t="undefined"!=typeof t?t:null,n.log[e].push(o),console[e]("[Pattern Library warn]: "+o),t&&console[e](t)},logError:function(o,t){var e=this;e.addLog(o,t,"error")},logInfo:function(o,t){var e=this;e.addLog(o,t,"info")},setScrollPosition:function(){var o=this,t=document.documentElement,e=t&&t.scrollTop||document.body.scrollTop;o.prev_scroll_position=o.scroll_position,o.scroll_position=e},getScrollDirection:function(){var o=this;return o.prev_scroll_position