1- <!doctype html> < html class ="pl-c-html "> < head > < title id ="title "> Pattern Lab</ title > < meta charset ="UTF-8 "> < meta name ="viewport " content ="initial-scale=1,width=device-width,viewport-fit=cover "> < meta name ="theme-color " content ="#ababab "> < style >
2- .pl-c-body * -webkit-box-sizing : border-box;box-sizing : border-box}.pl-c-html {min-height : 100% }.pl-c-body {margin : 0 ;padding : 0 ;-webkit-text-size-adjust : 100% ;display : -webkit-box;display : -ms-flexbox;display : flex}pl-header {position : fixed;position : -webkit-sticky;position : sticky;top : 0 ;left : 0 ;z-index : 4 ;display : -webkit-box;display : -ms-flexbox;display : flex;width : 100% ;background-color : # 000color : grey}pl-layout {display : -webkit-box;display : -ms-flexbox;display : flex;-webkit-box-orient : vertical;-webkit-box-direction : normal;-ms-flex-direction : column;flex-direction : column;width : 100% ;min-height : 100vh ;max-width : 100vw ;background-color : # ddd@media all and (-ms-high-contrast : none), (-ms-high-contrast : active){pl-layout {overflow : hidden}}pl-iframe {display : -webkit-box;display : -ms-flexbox;display : flex;-webkit-box-flex : 1 ;-ms-flex-positive : 1 ;flex-grow : 1 }.pl-c-body--theme-sidebar .pl-c-viewport {top : 0 }.pl-c-viewport-modal-wrapper {display : -webkit-box;display : -ms-flexbox;display : flex;-webkit-box-flex : 1 ;-ms-flex-positive : 1 ;flex-grow : 1 ;-webkit-box-orient : vertical;-webkit-box-direction : normal;-ms-flex-direction : column;flex-direction : column;max-width : 100vw ;position : relative}
1+ <!DOCTYPE html> < html class ="pl-c-html "> < head > < title id ="title "> Pattern Lab</ title > < meta charset ="UTF-8 "> < meta name ="viewport " content ="initial-scale=1,width=device-width,viewport-fit=cover "> < meta name ="theme-color " content ="#ababab "> < style >
2+ .pl-c-body * -webkit-box-sizing : border-box;box-sizing : border-box}.pl-c-html {min-height : 100% }.pl-c-body {margin : 0 ;padding : 0 ;-webkit-text-size-adjust : 100% ;display : -webkit-box;display : -ms-flexbox;display : flex}: root {--theme-bg : # 161b3c--theme-primary : # 464a6d--theme-secondary : # 161f50--theme-text : white;--theme-text-rgb : 255 , 255 , 255 ;--theme-border : rgba (255 , 255 , 255 , 0.2 )}.pl-c-body--theme-light {--theme-bg : white;--theme-secondary : white;--theme-text : # 262829--theme-text-rgb : 38 , 40 , 41 ;--theme-primary : white;--theme-border : # dddpl-layout {display : -webkit-box;display : -ms-flexbox;display : flex;-webkit-box-orient : vertical;-webkit-box-direction : normal;-ms-flex-direction : column;flex-direction : column;width : 100% ;min-height : 100vh ;max-width : 100vw ;background-color : # fffoverflow : initial}@media all and (-ms-high-contrast : none), (-ms-high-contrast : active){pl-layout {overflow : hidden}}pl-logo {max-width : 12rem ;-ms-flex-item-align : center;align-self : center;display : -webkit-box;display : -ms-flexbox;display : flex;-webkit-box-orient : vertical;-webkit-box-direction : normal;-ms-flex-direction : column;flex-direction : column;-webkit-box-align : center;-ms-flex-align : center;align-items : center;-webkit-box-pack : center;-ms-flex-pack : center;justify-content : center;-ms-flex-negative : 0 ;flex-shrink : 0 ;position : relative;z-index : 100 }.pl-c-logo {width : auto;padding : .5rem ;display : -webkit-box;display : -ms-flexbox;display : flex;-webkit-box-align : center;-ms-flex-align : center;align-items : center;-webkit-box-pack : center;-ms-flex-pack : center;justify-content : center;color : inherit;text-decoration : none;outline : 0 ;text-transform : lowercase;font-size : 1.4rem ;font-weight : 700 ;line-height : 1 ;margin : 0 }.pl-c-logo__img {display : block;height : auto;max-height : 2.5rem }.pl-c-body--theme-sidebar .pl-c-viewport {top : 0 }
33</ style >
4+ < < < < < < < HEAD
45< link rel ="preload " href ="styleguide/css/pattern-lab.3562851f.css " media ="all " as ="style " onload ="this.onload=null;this.rel='stylesheet' ">
56< noscript > < link rel ="stylesheet " href ="styleguide/css/pattern-lab.3562851f.css " media ="all "> </ noscript >
67< script > ! function ( n ) { "use strict" ; n . loadCSS || ( n . loadCSS = function ( ) { } ) ; var o = loadCSS . relpreload = { } ; if ( o . support = function ( ) { var e ; try { e = n . document . createElement ( "link" ) . relList . supports ( "preload" ) } catch ( t ) { e = ! 1 } return function ( ) { return e } } ( ) , o . bindMediaToggle = function ( t ) { var e = t . media || "all" ; function a ( ) { t . addEventListener ?t . removeEventListener ( "load" , a ) :t . attachEvent && t . detachEvent ( "onload" , a ) , t . setAttribute ( "onload" , null ) , t . media = e } t . addEventListener ?t . addEventListener ( "load" , a ) :t . attachEvent && t . attachEvent ( "onload" , a ) , setTimeout ( function ( ) { t . rel = "stylesheet" , t . media = "only x" } ) , setTimeout ( a , 3e3 ) } , o . poly = function ( ) { if ( ! o . support ( ) ) for ( var t = n . document . getElementsByTagName ( "link" ) , e = 0 ; e < t . length ; e ++ ) { var a = t [ e ] ; "preload" !== a . rel || "style" !== a . getAttribute ( "as" ) || a . getAttribute ( "data-loadcss" ) || ( a . setAttribute ( "data-loadcss" , ! 0 ) , o . bindMediaToggle ( a ) ) } } , ! o . support ( ) ) { o . poly ( ) ; var t = n . setInterval ( o . poly , 500 ) ; n . addEventListener ?n . addEventListener ( "load" , function ( ) { o . poly ( ) , n . clearInterval ( t ) } ) :n . attachEvent && n . attachEvent ( "onload" , function ( ) { o . poly ( ) , n . clearInterval ( t ) } ) } "undefined" != typeof exports ?exports . loadCSS = loadCSS :n . loadCSS = loadCSS } ( "undefined" != typeof global ?global :this ) ; </ script > </ head > < body class ="pl-c-body "> < pl-layout > < pl-header > </ pl-header > < div class ="pl-c-viewport-modal-wrapper "> < pl-iframe > </ pl-iframe > < pl-drawer > </ pl-drawer > </ div > </ pl-layout > < script type ="text/mustache " class ="pl-js-panel-template-base "> { { # descBlockExists } } < div class = "pl-c-pattern-info__panel pl-c-pattern-info__panel--info pl-js-pattern-info" > { { # isPatternView } } < div class = pl-c-pattern-info__header > < ul class = pl-c-breadcrumb > { { # patternBreadcrumb } } < li class = pl-c-breadcrumb__item > { { patternType } } </ li > { { # patternSubtype } } < li class = pl-c-breadcrumb__item > { { patternSubtype } } </ li > { { / p a t t e r n S u b t y p e } } { { / patternBreadcrumb } } </ ul > < h2 class = pl-c-pattern-info__title > { { patternName } } { { # patternState } } < span class = "pl-c-pattern-state pl-c-pattern-state--{{ patternState }}" title = "{{ patternState }}" > </ span > { { / patternState } } </ h2 > </ div > { { / i s P a t t e r n V i e w } } { { # p a t t e r n D e s c E x i s t s } } < d i v c l a s s = " p l - c - p a t t e r n - i n f o _ _ d e s c r i p t i o n p l - c - t e x t - p a s s a g e " > { { { p a t t e r n D e s c } } } { { # p a t t e r n D e s c A d d i t i o n s } } { { { p a t t e r n D e s c A d d i t i o n s } } } { { / patternDescAdditions } } </ div > { { / p a t t e r n D e s c E x i s t s } } { { # l i n e a g e E x i s t s } } < p c l a s s = " p l - c - l i n e a g e p l - j s - l i n e a g e " > T h e < e m > { { p a t t e r n N a m e } } < / em> pattern contains the following { { # lineage } } < a href = '{{ lineagePath }}' class = 'pl-c-lineage__link pl-js-lineage-link' data-patternpartial = '{{ lineagePattern }}' > { { lineagePattern } } { { # lineageState } } < span class = "pl-c-pattern-state pl-c-pattern-state--{{ lineageState }}" title = "{{ lineageState }}" /> { { / l i n e a g e S t a t e } } < / a> { { # hasComma } } , { { / h a s C o m m a } } { { / lineage } } </ p > { { / l i n e a g e E x i s t s } } { { # l i n e a g e R E x i s t s } } < p c l a s s = p l - c - l i n e a g e > T h e < e m > { { p a t t e r n N a m e } } < / em> pattern is included in the following patterns : { { # lineageR } } < a href = '{{ lineagePath }}' class = 'pl-c-lineage__link pl-js-lineage-link' data-patternpartial = '{{ lineagePattern }}' > { { lineagePattern } } { { # lineageState } } < span class = "pl-c-pattern-state pl-c-pattern-state--{{ lineageState }}" title = "{{ lineageState }}" /> { { / l i n e a g e S t a t e } } < / a> { { # hasComma } } , { { / h a s C o m m a } } { { / lineageR } } </ p > { { / l i n e a g e R E x i s t s } } { { # a n n o t a t i o n E x i s t s } } < d i v c l a s s = " p l - c - a n n o t a t i o n s p l - c - t e x t - p a s s a g e p l - j s - a n n o t a t i o n s " > < h 2 c l a s s = p l - c - a n n o t a t i o n s _ _ t i t l e > A n n o t a t i o n s < / h2 > < ol class = pl-c-annotations__list > { { # annotations } } < li class = pl-c-annotations__item > < h3 class = pl-c-annotations__item-title > { { title } } </ h3 > < div class = pl-c-annotations__item-body > { { { comment } } } </ div > </ li > { { / annotations } } </ ol > < / d i v > { { / annotationExists } } < / div > { { / d e s c B l o c k E x i s t s } } < d i v c l a s s = " p l - c - p a t t e r n - i n f o _ _ p a n e l p l - c - p a t t e r n - i n f o _ _ p a n e l - - c o d e " > < d i v i d = " p l - { { p a t t e r n P a r t i a l } } - t a b s " c l a s s = " p l - c - t a b s p l - j s - t a b s " > < d i v c l a s s = p l - c - t a b s _ _ h e a d e r > < u l c l a s s = p l - c - t a b s _ _ l i s t > { { # p a n e l s } } < l i c l a s s = p l - c - t a b s _ _ l i s t - i t e m > < a c l a s s = " p l - c - t a b s _ _ l i n k p l - j s - t a b - l i n k " h r e f = " # p l - { { p a t t e r n P a r t i a l } } - { { i d } } - p a n e l " i d = " p l - { { p a t t e r n P a r t i a l } } - { { i d } } - t a b " d a t a - p a t t e r n p a r t i a l = " { { p a t t e r n P a r t i a l } } " d a t a - p a n e l i d = " { { i d } } " > { { n a m e } } < / a> < / li > { { / panels } } </ ul > < / d i v > < d i v i d = " p l - { { p a t t e r n P a r t i a l } } - p a n e l s " c l a s s = p l - c - t a b s _ _ c o n t e n t > { { # p a n e l s } } < d i v i d = " p l - { { p a t t e r n P a r t i a l } } - { { i d } } - p a n e l " c l a s s = " p l - c - t a b s _ _ p a n e l p l - j s - t a b - p a n e l " > < b u t t o n c l a s s = " p l - c - c o d e - c o p y - b t n p l - j s - c o d e - c o p y - b t n " d a t a - c l i p b o a r d - t a r g e t = " # p l - { { p a t t e r n P a r t i a l } } - { { i d } } - p a n e l c o d e " > C o p y < / button> { { { content } } } </div > { { / p a n e l s } } < / div> < / div > </ div > </ script > < script type ="text/mustache " id ="pl-panel-template-code "> < pre class = language-markup >
78< code id = "pl-code-fill-{{ language }}" class = "language-{{ language }}" > { { { code } } } </ code >
8- </ pre > </ script > < script src ="styleguide/data/patternlab-data.js " defer ="defer "> </ script > < script src ="annotations/annotations.js " defer ="defer "> </ script > < script src ="styleguide/js/patternlab-viewer.js " defer ="defer "> </ script > < script > </ script > </ body > </ html >
9+ </ pre > </ script > < script src ="styleguide/data/patternlab-data.js " defer ="defer "> </ script > < script src ="annotations/annotations.js " defer ="defer "> </ script > < script src ="styleguide/js/patternlab-viewer.js " defer ="defer "> </ script > < script > </ script > </ body > </ html>
10+ =======
11+ < link rel ="preload " href ="styleguide/css/pattern-lab.css " media ="all " as ="style " onload ="this.onload=null;this.rel='stylesheet' ">
12+ < noscript > < link rel ="stylesheet " href ="styleguide/css/pattern-lab.css " media ="all "> </ noscript >
13+ < script > ! function ( n ) { "use strict" ; n . loadCSS || ( n . loadCSS = function ( ) { } ) ; var o = loadCSS . relpreload = { } ; if ( o . support = function ( ) { var e ; try { e = n . document . createElement ( "link" ) . relList . supports ( "preload" ) } catch ( t ) { e = ! 1 } return function ( ) { return e } } ( ) , o . bindMediaToggle = function ( t ) { var e = t . media || "all" ; function a ( ) { t . addEventListener ?t . removeEventListener ( "load" , a ) :t . attachEvent && t . detachEvent ( "onload" , a ) , t . setAttribute ( "onload" , null ) , t . media = e } t . addEventListener ?t . addEventListener ( "load" , a ) :t . attachEvent && t . attachEvent ( "onload" , a ) , setTimeout ( function ( ) { t . rel = "stylesheet" , t . media = "only x" } ) , setTimeout ( a , 3e3 ) } , o . poly = function ( ) { if ( ! o . support ( ) ) for ( var t = n . document . getElementsByTagName ( "link" ) , e = 0 ; e < t . length ; e ++ ) { var a = t [ e ] ; "preload" !== a . rel || "style" !== a . getAttribute ( "as" ) || a . getAttribute ( "data-loadcss" ) || ( a . setAttribute ( "data-loadcss" , ! 0 ) , o . bindMediaToggle ( a ) ) } } , ! o . support ( ) ) { o . poly ( ) ; var t = n . setInterval ( o . poly , 500 ) ; n . addEventListener ?n . addEventListener ( "load" , function ( ) { o . poly ( ) , n . clearInterval ( t ) } ) :n . attachEvent && n . attachEvent ( "onload" , function ( ) { o . poly ( ) , n . clearInterval ( t ) } ) } "undefined" != typeof exports ?exports . loadCSS = loadCSS :n . loadCSS = loadCSS } ( "undefined" != typeof global ?global :this ) ; </ script > < link rel ="prefetch " as ="image " href ="styleguide/images/pattern-lab-logo--on-dark.svg "> < link rel ="prefetch " as ="image " href ="styleguide/images/pattern-lab-logo--on-light.svg "> </ head > < body class ="pl-c-body "> < pl-layout > </ pl-layout > < script type ="text/mustache " class ="pl-js-panel-template-base "> { { # descBlockExists } } < div class = "pl-c-pattern-info__panel pl-c-pattern-info__panel--info pl-js-pattern-info" > { { # isPatternView } } < div class = pl-c-pattern-info__header > < ul class = pl-c-breadcrumb > { { # patternBreadcrumb } } < li class = pl-c-breadcrumb__item > { { patternType } } </ li > { { # patternSubtype } } < li class = pl-c-breadcrumb__item > { { patternSubtype } } </ li > { { / p a t t e r n S u b t y p e } } { { / patternBreadcrumb } } </ ul > < h2 class = pl-c-pattern-info__title > { { patternName } } { { # patternState } } < span class = "pl-c-pattern-state pl-c-pattern-state--{{ patternState }}" title = "{{ patternState }}" > </ span > { { / patternState } } </ h2 > </ div > { { / i s P a t t e r n V i e w } } { { # p a t t e r n D e s c E x i s t s } } < d i v c l a s s = " p l - c - p a t t e r n - i n f o _ _ d e s c r i p t i o n p l - c - t e x t - p a s s a g e " > { { { p a t t e r n D e s c } } } { { # p a t t e r n D e s c A d d i t i o n s } } { { { p a t t e r n D e s c A d d i t i o n s } } } { { / patternDescAdditions } } </ div > { { / p a t t e r n D e s c E x i s t s } } { { # l i n e a g e E x i s t s } } < p c l a s s = " p l - c - l i n e a g e p l - j s - l i n e a g e " > T h e < e m > { { p a t t e r n N a m e } } < / em> pattern contains the following { { # lineage } } < a href = "{{ lineagePath }}" class = "pl-c-lineage__link pl-js-lineage-link" data-patternpartial = "{{ lineagePattern }}" > { { lineagePattern } } { { # lineageState } } < span class = "pl-c-pattern-state pl-c-pattern-state--{{ lineageState }}" title = "{{ lineageState }}" /> { { / l i n e a g e S t a t e } } < / a> { { # hasComma } } , { { / h a s C o m m a } } { { / lineage } } </ p > { { / l i n e a g e E x i s t s } } { { # l i n e a g e R E x i s t s } } < p c l a s s = p l - c - l i n e a g e > T h e < e m > { { p a t t e r n N a m e } } < / em> pattern is included in the following patterns : { { # lineageR } } < a href = "{{ lineagePath }}" class = "pl-c-lineage__link pl-js-lineage-link" data-patternpartial = "{{ lineagePattern }}" > { { lineagePattern } } { { # lineageState } } < span class = "pl-c-pattern-state pl-c-pattern-state--{{ lineageState }}" title = "{{ lineageState }}" /> { { / l i n e a g e S t a t e } } < / a> { { # hasComma } } , { { / h a s C o m m a } } { { / lineageR } } </ p > { { / l i n e a g e R E x i s t s } } { { # a n n o t a t i o n E x i s t s } } < d i v c l a s s = " p l - c - a n n o t a t i o n s p l - c - t e x t - p a s s a g e p l - j s - a n n o t a t i o n s " > < h 2 c l a s s = p l - c - a n n o t a t i o n s _ _ t i t l e > A n n o t a t i o n s < / h2 > < ol class = pl-c-annotations__list > { { # annotations } } < li class = pl-c-annotations__item > < h3 class = pl-c-annotations__item-title > { { title } } </ h3 > < div class = pl-c-annotations__item-body > { { { comment } } } </ div > </ li > { { / annotations } } </ ol > < / d i v > { { / annotationExists } } < / div > { { / d e s c B l o c k E x i s t s } } < d i v c l a s s = " p l - c - p a t t e r n - i n f o _ _ p a n e l p l - c - p a t t e r n - i n f o _ _ p a n e l - - c o d e " > < d i v i d = " p l - { { p a t t e r n P a r t i a l } } - t a b s " c l a s s = " p l - c - t a b s p l - j s - t a b s " > < d i v c l a s s = p l - c - t a b s _ _ h e a d e r > < u l c l a s s = p l - c - t a b s _ _ l i s t > { { # p a n e l s } } < l i c l a s s = p l - c - t a b s _ _ l i s t - i t e m > < a c l a s s = " p l - c - t a b s _ _ l i n k p l - j s - t a b - l i n k " h r e f = " # p l - { { p a t t e r n P a r t i a l } } - { { i d } } - p a n e l " i d = " p l - { { p a t t e r n P a r t i a l } } - { { i d } } - t a b " d a t a - p a t t e r n p a r t i a l = " { { p a t t e r n P a r t i a l } } " d a t a - p a n e l i d = " { { i d } } " > { { n a m e } } < / a> < / li > { { / panels } } </ ul > < / d i v > < d i v i d = " p l - { { p a t t e r n P a r t i a l } } - p a n e l s " c l a s s = p l - c - t a b s _ _ c o n t e n t > { { # p a n e l s } } < d i v i d = " p l - { { p a t t e r n P a r t i a l } } - { { i d } } - p a n e l " c l a s s = " p l - c - t a b s _ _ p a n e l p l - j s - t a b - p a n e l " > < b u t t o n c l a s s = " p l - c - c o d e - c o p y - b t n p l - j s - c o d e - c o p y - b t n " d a t a - c l i p b o a r d - t a r g e t = " # p l - { { p a t t e r n P a r t i a l } } - { { i d } } - p a n e l c o d e " > C o p y < / button> { { { content } } } </div > { { / p a n e l s } } < / div> < / div > </ div > </ script > < script src ="styleguide/data/patternlab-data.js " defer ="defer "> </ script > < script src ="annotations/annotations.js " defer ="defer "> </ script > < script src ="styleguide/js/patternlab-viewer.js " defer ="defer "> </ script > < script > </ script > </ body > </ html>
14+ > > > > > > > feature/uikit-refactor--batched-updates
0 commit comments