{"sections":[{"header":"Links","description":"","modifiers":[],"deprecated":false,"experimental":false,"reference":"1","markup":"<a href=\"#\" class=\"px2-link\">Default Link</a>","css":".px2-link{}","syntax":"scss","file":"_links.css.scss","wrapper":"<sg-wrapper-content/>","renderMarkup":"<a href=\"#\" class=\"px2-link\">Default Link</a>","variables":[],"fileHash":"f56cc0786a50f59c2e3cfbec8ac919dc"},{"header":"Bullet Link","description":"","modifiers":[],"deprecated":false,"experimental":false,"reference":"1.1","markup":"<a href=\"#\" class=\"px2-link px2-link--bullet\">Bullet Link</a>\n<div style=\"font-size: 130%;\"><a href=\"#\" class=\"px2-link px2-link--bullet\">Bullet Link</a></div>\n<div style=\"font-size: 160%;\"><a href=\"#\" class=\"px2-link px2-link--bullet\">Bullet Link</a></div>\n<div style=\"font-size: 220%;\"><a href=\"#\" class=\"px2-link px2-link--bullet\">Bullet Link</a></div>\n<a href=\"#\" class=\"px2-a\">Bullet Link</a>","css":".px2-a,\n.px2-link.px2-link--burette, // スペル誤り\n.px2-link.px2-link--bullet{ // 2.0.11 にて修正\n\t&:before{\n\t\tcontent:' ';\n\t\twidth: 0;\n\t\theight: 0;\n\t\tdisplay: inline-block;\n\t\tmargin-right: 0.2em;\n\t\tborder-width: 0.35em 0 0.35em 0.6em;\n\t\tborder-style: solid;\n\t\tborder-color: $px2-main-color; // fallback\n\t\tborder-color: var(--px2-main-color, $px2-main-color);\n\t\tborder-top-color: transparent;\n\t\tborder-bottom-color: transparent;\n\t}\n}","syntax":"scss","file":"_links.css.scss","parentReference":"1","wrapper":"<sg-wrapper-content/>","renderMarkup":"<a href=\"#\" class=\"px2-link px2-link--bullet\">Bullet Link</a>\n<div style=\"font-size: 130%;\"><a href=\"#\" class=\"px2-link px2-link--bullet\">Bullet Link</a></div>\n<div style=\"font-size: 160%;\"><a href=\"#\" class=\"px2-link px2-link--bullet\">Bullet Link</a></div>\n<div style=\"font-size: 220%;\"><a href=\"#\" class=\"px2-link px2-link--bullet\">Bullet Link</a></div>\n<a href=\"#\" class=\"px2-a\">Bullet Link</a>","variables":["px2-main-color","px2-main-color"],"fileHash":"f56cc0786a50f59c2e3cfbec8ac919dc"},{"header":"Open in new window","description":"","modifiers":[],"deprecated":false,"experimental":false,"reference":"1.2","markup":"<p><a href=\"#\"><span class=\"px2-open-in-new-window\">Open in new window</span></a></p>\n<p><a href=\"#\" class=\"px2-a\"><span class=\"px2-open-in-new-window\">Open in new window</span></a></p>","css":".px2-open-in-new-window {\n\t&:after {\n\t\tcontent: '';\n\t\tbackground-image: url(\"links/resources/link.png\");\n\t\twidth: 0.8em;\n\t\theight: 0.8em;\n\t\tdisplay: inline-block;\n\t\tbackground-size: contain;\n\t\tbackground-repeat: no-repeat;\n\t\tmargin-left: 0.3em;\n\t}\n}","syntax":"scss","file":"_links.css.scss","parentReference":"1","wrapper":"<sg-wrapper-content/>","renderMarkup":"<p><a href=\"#\"><span class=\"px2-open-in-new-window\">Open in new window</span></a></p>\n<p><a href=\"#\" class=\"px2-a\"><span class=\"px2-open-in-new-window\">Open in new window</span></a></p>","variables":[],"fileHash":"f56cc0786a50f59c2e3cfbec8ac919dc"},{"header":"Buttons","description":"","modifiers":[],"deprecated":false,"experimental":false,"reference":"2","markup":"<button class=\"px2-btn\">Default Button</button>","css":".px2-btn{\n\tdisplay: inline-block;\n\tborder-radius: 3px;\n\tbackground-color: $px2-background-color; // fallback\n\tbackground-color: var(--px2-background-color, $px2-background-color);\n\tcolor: $px2-text-color; // fallback\n\tcolor: var(--px2-text-color, $px2-text-color);\n\tborder: 1px solid $px2-text-color; // fallback\n\tborder: 1px solid var(--px2-text-color, $px2-text-color);\n\tbox-shadow: 0 2px 0px rgba(0,0,0,0.1);\n\t// text-shadow: 0px 0px 3px rgba(0,0,0,0.1);\n\tpadding: 0.5em 2em;\n\tfont-size:1em;\n\tfont-weight: normal;\n\tfont-family: $px2-font-family;\n\tline-height: 1;\n\ttext-decoration: none;\n\ttext-align: center;\n\tcursor: pointer;\n\tbox-sizing: border-box;\n\talign-items: stretch;\n\ttransition:\n\t\tcolor 0.1s,\n\t\tbackground-color 0.1s,\n\t\ttransform 0.1s\n\t;\n\n\t&:focus,\n\t&:hover{\n\t\ttext-decoration: none;\n\t\tfont-weight: normal;\n\t\tcolor: #666;\n\t\tbackground-color: #f3f3f3;\n\t\t// transform: scale(1.04, 1.04);\n\t}\n\t&:focus{\n\t\tbox-shadow: 0 0 0 .2rem rgba(0,123,255,.25);\n\t}\n\t&:hover{\n\t\tbackground-color: #f0f0f0;\n\t}\n\t&:active{\n\t\tbackground-color: $px2-text-color; // fallback\n\t\tbackground-color: var(--px2-text-color, $px2-text-color);\n\t\tcolor: $px2-background-color; // fallback\n\t\tcolor: var(--px2-background-color, $px2-background-color);\n\t\tbox-shadow: inset 0 3px 15px rgba(0,0,0,0.3);\n\t\ttransform: translateY(1px);\n\t\t// transform: translateY(1px) scale(1.04, 1.04);\n\t}\n}","syntax":"scss","file":"_buttons.css.scss","wrapper":"<sg-wrapper-content/>","renderMarkup":"<button class=\"px2-btn\">Default Button</button>","variables":["px2-background-color","px2-background-color","px2-text-color","px2-text-color","px2-text-color","px2-text-color","px2-font-family","px2-text-color","px2-text-color","px2-background-color","px2-background-color"],"fileHash":"ad93723045811b7adac50e29df1d3b99"},{"header":"Elements","description":"","modifiers":[],"deprecated":false,"experimental":false,"reference":"2.1","markup":"<p><button class=\"px2-btn\">Default Button</button></p>\n<p><input type=\"button\" class=\"px2-btn\" value=\"input type=button\" /></p>\n<p><input type=\"submit\" class=\"px2-btn\" value=\"input type=submit\" /></p>\n<p><a href=\"javascript:;\" class=\"px2-btn\">anchor</a></p>\n<p><label class=\"px2-btn\">label</label></p>","syntax":"scss","file":"_buttons.css.scss","parentReference":"2","wrapper":"<sg-wrapper-content/>","renderMarkup":"<p><button class=\"px2-btn\">Default Button</button></p>\n<p><input type=\"button\" class=\"px2-btn\" value=\"input type=button\" /></p>\n<p><input type=\"submit\" class=\"px2-btn\" value=\"input type=submit\" /></p>\n<p><a href=\"javascript:;\" class=\"px2-btn\">anchor</a></p>\n<p><label class=\"px2-btn\">label</label></p>","fileHash":"ad93723045811b7adac50e29df1d3b99"},{"header":"Intention","description":"","modifiers":[],"deprecated":false,"experimental":false,"reference":"2.2","markup":"<p><button class=\"px2-btn\">Default Button</button></p>\n<p><button class=\"px2-btn px2-btn--primary\">Primary Button</button></p>\n<p><button class=\"px2-btn px2-btn--secondary\">Secondary Button</button></p>\n<p><button class=\"px2-btn px2-btn--danger\">Danger Button</button></p>\n<p><button class=\"px2-btn px2-btn--download\">Download Button</button></p>\n<p><button class=\"px2-btn px2-btn--download px2-btn--block px2-btn--lg\">\n    <strong>Download</strong>\n    <div><small>Pickles 2 @2.0.0-beta.14</small></div>\n    <div><small>for macOS</small></div>\n</button></p>\n<p><button class=\"px2-btn\" disabled>Disabled Default Button</button></p>\n<p><button class=\"px2-btn px2-btn--primary\" disabled>Disabled Primary Button</button></p>\n<p><button class=\"px2-btn px2-btn--secondary\" disabled>Disabled Secondary Button</button></p>\n<p><button class=\"px2-btn px2-btn--danger\" disabled>Disabled Danger Button</button></p>\n<p><button class=\"px2-btn px2-btn--download\" disabled>Disabled Download Button</button></p>","css":".px2-btn{\n\n\t&.px2-btn--primary{\n\t\tborder-color: #00a0e6;\n\t\tbackground-color: #f5fbfe; // rgba(0,160,230,0.05);\n\t\tcolor: #00a0e6;\n\t\t&:focus,\n\t\t&:hover{\n\t\t\tbackground-color: #d9f1fb; // rgba(0,160,230,0.15);\n\t\t}\n\t\t&:hover{\n\t\t\tbackground-color: #ccecfa; // rgba(0,160,230,0.3);\n\t\t}\n\t\t&:active{\n\t\t\tbackground-color: #00a0e6;\n\t\t\tcolor: #fff;\n\t\t}\n\t}\n\t&.px2-btn--secondary{\n\t\tborder-color: $px2-text-color; // fallback\n\t\tborder-color: var(--px2-text-color, $px2-text-color);\n\t\tbackground: $px2-background-color; // fallback\n\t\tbackground: var(--px2-background-color, $px2-background-color);\n\t\tcolor: $px2-text-color; // fallback\n\t\tcolor: var(--px2-text-color, $px2-text-color);\n\t\t&:focus,\n\t\t&:hover{\n\t\t\tbackground-color: #f3f3f3;\n\t\t}\n\t\t&:hover{\n\t\t\tbackground-color: #f0f0f0;\n\t\t}\n\t\t&:active{\n\t\t\tbackground-color: $px2-text-color; // fallback\n\t\t\tbackground-color: var(--px2-text-color, $px2-text-color);\n\t\t\tcolor: $px2-background-color; // fallback\n\t\t\tcolor: var(--px2-background-color, $px2-background-color);\n\t\t}\n\t}\n\t&.px2-btn--danger{\n\t\tborder-color: #e86a60;\n\t\tbackground-color: #fdf8f8; // rgba(232,106,96,0.05);\n\t\tcolor: #e86a60;\n\t\t&:focus,\n\t\t&:hover{\n\t\t\tbackground-color: #fce9e7; // rgba(232,106,96,0.15);\n\t\t}\n\t\t&:hover{\n\t\t\tbackground-color: #fae1df; // rgba(232,106,96,0.3);\n\t\t}\n\t\t&:active{\n\t\t\tbackground-color: #e86a60;\n\t\t\tcolor: #fff;\n\t\t}\n\t}\n\t&.px2-btn--download{\n\t\tborder-color: #4ad64d;\n\t\tbackground-color: #f7fcf7; // rgba(74,214,77,0.05);\n\t\tcolor: #4ad64d;\n\t\t&:focus,\n\t\t&:hover{\n\t\t\tbackground-color: #e4f9e4; // rgba(74,214,77,0.15);\n\t\t}\n\t\t&:hover{\n\t\t\tbackground-color: #dbf7db; // rgba(74,214,77,0.3);\n\t\t}\n\t\t&:active{\n\t\t\tbackground-color: #4ad64d;\n\t\t\tcolor: #fff;\n\t\t}\n\t}\n\n\t&[disabled]{\n\t\tborder-color: #ddd;\n\t\tbackground-color: rgba(153,153,153,0.05);\n\t\tcolor: #ddd;\n\t\tcursor: default;\n\t\ttransform: none;\n\t\t&:focus,\n\t\t&:hover,\n\t\t&:active{\n\t\t\tborder-color: #ddd;\n\t\t\tbackground-color: rgba(153,153,153,0.05);\n\t\t\tcolor: #ddd;\n\t\t\tcursor: default;\n\t\t\tbox-shadow: 0 2px 0px rgba(0,0,0,0.1);\n\t\t\ttransform: none;\n\t\t}\n\t}\n}","syntax":"scss","file":"_buttons.css.scss","parentReference":"2","wrapper":"<sg-wrapper-content/>","renderMarkup":"<p><button class=\"px2-btn\">Default Button</button></p>\n<p><button class=\"px2-btn px2-btn--primary\">Primary Button</button></p>\n<p><button class=\"px2-btn px2-btn--secondary\">Secondary Button</button></p>\n<p><button class=\"px2-btn px2-btn--danger\">Danger Button</button></p>\n<p><button class=\"px2-btn px2-btn--download\">Download Button</button></p>\n<p><button class=\"px2-btn px2-btn--download px2-btn--block px2-btn--lg\">\n    <strong>Download</strong>\n    <div><small>Pickles 2 @2.0.0-beta.14</small></div>\n    <div><small>for macOS</small></div>\n</button></p>\n<p><button class=\"px2-btn\" disabled>Disabled Default Button</button></p>\n<p><button class=\"px2-btn px2-btn--primary\" disabled>Disabled Primary Button</button></p>\n<p><button class=\"px2-btn px2-btn--secondary\" disabled>Disabled Secondary Button</button></p>\n<p><button class=\"px2-btn px2-btn--danger\" disabled>Disabled Danger Button</button></p>\n<p><button class=\"px2-btn px2-btn--download\" disabled>Disabled Download Button</button></p>","variables":["px2-text-color","px2-text-color","px2-background-color","px2-background-color","px2-text-color","px2-text-color","px2-text-color","px2-text-color","px2-background-color","px2-background-color"],"fileHash":"ad93723045811b7adac50e29df1d3b99"},{"header":"Toggle ON","description":"","modifiers":[],"deprecated":false,"experimental":false,"reference":"2.3","markup":"<p><button class=\"px2-btn px2-btn--toggle-on\">Default Button</button></p>\n<p><button class=\"px2-btn px2-btn--primary px2-btn--toggle-on\">Primary Button</button></p>\n<p><button class=\"px2-btn px2-btn--secondary px2-btn--toggle-on\">Secondary Button</button></p>\n<p><button class=\"px2-btn px2-btn--danger px2-btn--toggle-on\">Danger Button</button></p>\n<p><button class=\"px2-btn px2-btn--download px2-btn--toggle-on\">Download Button</button></p>\n<hr />\n<p><button class=\"px2-btn px2-btn--toggle-on\" disabled>Default Button</button></p>\n<p><button class=\"px2-btn px2-btn--primary px2-btn--toggle-on\" disabled>Primary Button</button></p>\n<p><button class=\"px2-btn px2-btn--secondary px2-btn--toggle-on\" disabled>Secondary Button</button></p>\n<p><button class=\"px2-btn px2-btn--danger px2-btn--toggle-on\" disabled>Danger Button</button></p>\n<p><button class=\"px2-btn px2-btn--download px2-btn--toggle-on\" disabled>Download Button</button></p>","css":".px2-btn{\n\t&--toggle-on{\n\t\tbox-shadow: inset 0 3px 15px rgba(0,0,0,0.15);\n\t\ttransform: translateY(1px);\n\t\t// transform: translateY(1px) scale(1.04, 1.04);\n\n\t\t&[disabled]{\n\t\t\tbox-shadow: inset 0 3px 15px rgba(0,0,0,0.15);\n\t\t\ttransform: translateY(1px);\n\t\t\t&:focus,\n\t\t\t&:hover,\n\t\t\t&:active{\n\t\t\t\tbox-shadow: inset 0 3px 15px rgba(0,0,0,0.15);\n\t\t\t\ttransform: translateY(1px);\n\t\t\t}\n\t\t}\n\t}\n}","syntax":"scss","file":"_buttons.css.scss","parentReference":"2","wrapper":"<sg-wrapper-content/>","renderMarkup":"<p><button class=\"px2-btn px2-btn--toggle-on\">Default Button</button></p>\n<p><button class=\"px2-btn px2-btn--primary px2-btn--toggle-on\">Primary Button</button></p>\n<p><button class=\"px2-btn px2-btn--secondary px2-btn--toggle-on\">Secondary Button</button></p>\n<p><button class=\"px2-btn px2-btn--danger px2-btn--toggle-on\">Danger Button</button></p>\n<p><button class=\"px2-btn px2-btn--download px2-btn--toggle-on\">Download Button</button></p>\n<hr />\n<p><button class=\"px2-btn px2-btn--toggle-on\" disabled>Default Button</button></p>\n<p><button class=\"px2-btn px2-btn--primary px2-btn--toggle-on\" disabled>Primary Button</button></p>\n<p><button class=\"px2-btn px2-btn--secondary px2-btn--toggle-on\" disabled>Secondary Button</button></p>\n<p><button class=\"px2-btn px2-btn--danger px2-btn--toggle-on\" disabled>Danger Button</button></p>\n<p><button class=\"px2-btn px2-btn--download px2-btn--toggle-on\" disabled>Download Button</button></p>","variables":[],"fileHash":"ad93723045811b7adac50e29df1d3b99"},{"header":"Sizing","description":"","modifiers":[],"deprecated":false,"experimental":false,"reference":"2.4","markup":"<p><button class=\"px2-btn px2-btn--sm\">Default Button</button></p>\n<p><button class=\"px2-btn\">Default Button</button></p>\n<p><button class=\"px2-btn px2-btn--lg\">Default Button</button></p>\n<p><button class=\"px2-btn px2-btn--block px2-btn--sm\">Default Button</button></p>\n<p><button class=\"px2-btn px2-btn--block\">Default Button</button></p>\n<p><button class=\"px2-btn px2-btn--block px2-btn--lg\">Default Button</button></p>","css":".px2-btn{\n\n\t&--sm{\n\t\tfont-size:0.8em;\n\t}\n\t&--lg{\n\t\tfont-size:1.2em;\n\t}\n\t&--block{\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t}\n\n}","syntax":"scss","file":"_buttons.css.scss","parentReference":"2","wrapper":"<sg-wrapper-content/>","renderMarkup":"<p><button class=\"px2-btn px2-btn--sm\">Default Button</button></p>\n<p><button class=\"px2-btn\">Default Button</button></p>\n<p><button class=\"px2-btn px2-btn--lg\">Default Button</button></p>\n<p><button class=\"px2-btn px2-btn--block px2-btn--sm\">Default Button</button></p>\n<p><button class=\"px2-btn px2-btn--block\">Default Button</button></p>\n<p><button class=\"px2-btn px2-btn--block px2-btn--lg\">Default Button</button></p>","variables":[],"fileHash":"ad93723045811b7adac50e29df1d3b99"},{"header":"Lists","description":"","modifiers":[],"deprecated":false,"experimental":false,"reference":"3","markup":"<ul class=\"px2-list\">\n\t<li>list item 1</li>\n\t<li>list item 2</li>\n\t<li>list item 3</li>\n</ul>","css":".px2-list{\n\tpadding: 0 0 0 40px;\n\tli{\n\t\tlist-style-type: disc;\n\t}\n}","syntax":"scss","file":"_lists.css.scss","wrapper":"<sg-wrapper-content/>","renderMarkup":"<ul class=\"px2-list\">\n\t<li>list item 1</li>\n\t<li>list item 2</li>\n\t<li>list item 3</li>\n</ul>","variables":[],"fileHash":"be5f556e47f56c58d06017d31590f0c2"},{"header":"Horizontal List","description":"","modifiers":[],"deprecated":false,"experimental":false,"reference":"3.1","markup":"<ul class=\"px2-horizontal-list\">\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 1</a></li>\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 2</a></li>\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 3</a></li>\n</ul>","css":".px2-horizontal-list,\n.px2-horizontal-list>ul{\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tmargin-top: 1em;\n\tmargin-bottom: 1em;\n\tpadding-left: 0;\n\n\t>ul>li ,\n\t>li {\n\t\tlist-style-type: none;\n\t\tpadding-left: 0;\n\t\tpadding-right: 1em;\n\t\t>p{\n\t\t\tmargin: 0;\n\t\t}\n\t}\n}","syntax":"scss","file":"_lists.css.scss","parentReference":"3","wrapper":"<sg-wrapper-content/>","renderMarkup":"<ul class=\"px2-horizontal-list\">\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 1</a></li>\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 2</a></li>\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 3</a></li>\n</ul>","variables":[],"fileHash":"be5f556e47f56c58d06017d31590f0c2"},{"header":"Horizontal List aligning","description":"","modifiers":[],"deprecated":false,"experimental":false,"reference":"3.1.1","markup":"<ul class=\"px2-horizontal-list px2-horizontal-list--left\">\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 1</a></li>\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 2</a></li>\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 3</a></li>\n</ul>\n<ul class=\"px2-horizontal-list px2-horizontal-list--center\">\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 1</a></li>\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 2</a></li>\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 3</a></li>\n</ul>\n<ul class=\"px2-horizontal-list px2-horizontal-list--right\">\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 1</a></li>\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 2</a></li>\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 3</a></li>\n</ul>","css":".px2-horizontal-list{\n\t&--left{\n\t\tjustify-content: flex-start;\n\t}\n\t&--center{\n\t\tjustify-content: center;\n\t}\n\t&--right{\n\t\tjustify-content: flex-end;\n\t}\n}","syntax":"scss","file":"_lists.css.scss","parentReference":"3.1","wrapper":"<sg-wrapper-content/>","renderMarkup":"<ul class=\"px2-horizontal-list px2-horizontal-list--left\">\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 1</a></li>\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 2</a></li>\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 3</a></li>\n</ul>\n<ul class=\"px2-horizontal-list px2-horizontal-list--center\">\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 1</a></li>\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 2</a></li>\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 3</a></li>\n</ul>\n<ul class=\"px2-horizontal-list px2-horizontal-list--right\">\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 1</a></li>\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 2</a></li>\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 3</a></li>\n</ul>","variables":[],"fileHash":"be5f556e47f56c58d06017d31590f0c2"},{"header":"Vertical List","description":"","modifiers":[],"deprecated":false,"experimental":false,"reference":"3.2","markup":"<ul class=\"px2-vertical-list\">\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 1</a></li>\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 2</a></li>\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 3</a></li>\n</ul>","css":".px2-vertical-list,\n.px2-vertical-list>ul{\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tflex-direction: column;\n\tmargin-top: 0.2em;\n\tmargin-bottom: 0.2em;\n\tpadding-left: 0;\n\n\t>ul>li ,\n\t>li {\n\t\tlist-style-type: none;\n\t\tpadding-left: 0;\n\t\t>p{\n\t\t\tmargin: 0;\n\t\t}\n\t}\n}","syntax":"scss","file":"_lists.css.scss","parentReference":"3","wrapper":"<sg-wrapper-content/>","renderMarkup":"<ul class=\"px2-vertical-list\">\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 1</a></li>\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 2</a></li>\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 3</a></li>\n</ul>","variables":[],"fileHash":"be5f556e47f56c58d06017d31590f0c2"},{"header":"Ordered Lists","description":"","modifiers":[],"deprecated":false,"experimental":false,"reference":"3.3","markup":"<ol class=\"px2-ordered-list\">\n\t<li>list item 1</li>\n\t<li>list item 2</li>\n\t<li>list item 3</li>\n</ol>\n<ol class=\"px2-ordered-list\" start=\"4\">\n\t<li>list item 4</li>\n\t<li>list item 5</li>\n\t<li>list item 6</li>\n</ol>","css":".px2-ordered-list{\n\tpadding: 0 0 0 40px;\n\tli{\n\t\tlist-style-type: decimal;\n\t}\n}","syntax":"scss","file":"_lists.css.scss","parentReference":"3","wrapper":"<sg-wrapper-content/>","renderMarkup":"<ol class=\"px2-ordered-list\">\n\t<li>list item 1</li>\n\t<li>list item 2</li>\n\t<li>list item 3</li>\n</ol>\n<ol class=\"px2-ordered-list\" start=\"4\">\n\t<li>list item 4</li>\n\t<li>list item 5</li>\n\t<li>list item 6</li>\n</ol>","variables":[],"fileHash":"be5f556e47f56c58d06017d31590f0c2"},{"header":"Note Lists","description":"","modifiers":[],"deprecated":false,"experimental":false,"reference":"3.4","markup":"<ul class=\"px2-note-list\">\n\t<li>list item 1</li>\n\t<li>list item 2</li>\n\t<li>list item 3</li>\n</ul>","css":".px2-note-list,\n.px2-note-list>ul{\n\tmargin-top: 1em;\n\tmargin-bottom: 1em;\n\tpadding-left: 1.5em;\n\n\t>ul>li,\n\t>li {\n\t\tlist-style-type: none;\n\t\tcolor: #999;\n\t\tfont-size: 86%;\n\t\tposition: relative;\n\t\t&::before{\n\t\t\tcontent: \"※\";\n\t\t\tposition: absolute;\n\t\t\tleft: -1.5em;\n\t\t}\n\t}\n}","syntax":"scss","file":"_lists.css.scss","parentReference":"3","wrapper":"<sg-wrapper-content/>","renderMarkup":"<ul class=\"px2-note-list\">\n\t<li>list item 1</li>\n\t<li>list item 2</li>\n\t<li>list item 3</li>\n</ul>","variables":[],"fileHash":"be5f556e47f56c58d06017d31590f0c2"},{"header":"Tables","description":"","modifiers":[],"deprecated":false,"experimental":false,"reference":"4","markup":"<table class=\"px2-table\">\n    <thead>\n        <tr>\n            <th>head1</th>\n            <th>head2</th>\n            <th>head3</th>\n            <th>head4</th>\n        </tr>\n    </thead>\n    <tfoot>\n        <tr>\n            <th>foot1</th>\n            <th>foot2</th>\n            <th>foot3</th>\n            <th>foot4</th>\n        </tr>\n    </tfoot>\n    <tbody>\n        <tr>\n            <th>th</th>\n            <td>td2</td>\n            <td>td3</td>\n            <td>td4</td>\n        </tr>\n    </tbody>\n</table>","css":".px2-table{\n\tborder: none;\n\tborder-collapse: collapse;\n\ttext-align: left;\n\n\tth,\n\ttd {\n\t\tvertical-align: top;\n\t\tborder: 1px solid #999999;\n\t\tbackground: $px2-background-color; // fallback\n\t\tbackground: var(--px2-background-color, $px2-background-color);\n\t\tpadding: 10px;\n\t}\n\n\tth {\n\t\tbackground: #e7e7e7;\n\t}\n\n\tthead th,\n\ttfoot th {\n\t\tbackground: #d9d9d9;\n\t\ttext-align: center;\n\t}\n\n\tthead td,\n\ttfoot td {\n\t\tbackground: #eeeeee;\n\t}\n}","syntax":"scss","file":"_tables.css.scss","wrapper":"<sg-wrapper-content/>","renderMarkup":"<table class=\"px2-table\">\n    <thead>\n        <tr>\n            <th>head1</th>\n            <th>head2</th>\n            <th>head3</th>\n            <th>head4</th>\n        </tr>\n    </thead>\n    <tfoot>\n        <tr>\n            <th>foot1</th>\n            <th>foot2</th>\n            <th>foot3</th>\n            <th>foot4</th>\n        </tr>\n    </tfoot>\n    <tbody>\n        <tr>\n            <th>th</th>\n            <td>td2</td>\n            <td>td3</td>\n            <td>td4</td>\n        </tr>\n    </tbody>\n</table>","variables":["px2-background-color","px2-background-color"],"fileHash":"313412c369d2afe45497cd16798fa917"},{"header":"Notice","description":"<p class=\"sg\">&#x304A;&#x77E5;&#x3089;&#x305B;&#x3002;</p>\n","modifiers":[],"deprecated":false,"experimental":false,"reference":"5","markup":null,"syntax":"scss","file":"_notice.css.scss","wrapper":"<sg-wrapper-content/>","fileHash":"6b7aec9a77ca6ef98076e93d97de0057"},{"header":"Notice","description":"<p class=\"sg\">&#x5404;&#x7A2E;&#x306E;&#x304A;&#x77E5;&#x3089;&#x305B;&#x6B04;&#x3092;&#x8868;&#x793A;&#x3057;&#x307E;&#x3059;&#x3002;</p>\n","modifiers":[],"deprecated":false,"experimental":false,"reference":"5.1","markup":"<div class=\"px2-notice\"><p>Notice</p></div>\n<div class=\"px2-notice px2-notice--success\"><p>Success</p></div>\n<div class=\"px2-notice px2-notice--warning\"><p>Warning</p></div>\n<div class=\"px2-notice px2-notice--danger\"><p>Danger</p></div>\n<div class=\"px2-notice px2-notice--info\"><p>Info</p></div>","css":".px2-notice {\n\tmargin-top: 1.5em;\n\tmargin-bottom: 1.5em;\n\tpadding: 0.75em 1.25em;\n\tborder-radius: 0.25em;\n\n\tcolor: #004085;\n\tbackground-color: #cce5ff;\n\tborder: 1px solid #b8daff;\n\n\t*{\n\t\tmargin-top: 0;\n\t\tmargin-bottom: 0;\n\t}\n}\n.px2-notice.px2-notice--success{\n\tcolor: #155724;\n\tbackground-color: #d4edda;\n\tborder-color: #c3e6cb;\n}\n.px2-notice.px2-notice--warning{\n\tcolor: #856404;\n\tbackground-color: #fff3cd;\n\tborder-color: #ffeeba;\n}\n.px2-notice.px2-notice--danger{\n\tcolor: #721c24;\n\tbackground-color: #f8d7da;\n\tborder-color: #f5c6cb;\n}\n.px2-notice.px2-notice--info{\n\tcolor: #0c5460;\n\tbackground-color: #d1ecf1;\n\tborder-color: #bee5eb;\n}","syntax":"scss","file":"_notice.css.scss","parentReference":"5","wrapper":"<sg-wrapper-content/>","renderMarkup":"<div class=\"px2-notice\"><p>Notice</p></div>\n<div class=\"px2-notice px2-notice--success\"><p>Success</p></div>\n<div class=\"px2-notice px2-notice--warning\"><p>Warning</p></div>\n<div class=\"px2-notice px2-notice--danger\"><p>Danger</p></div>\n<div class=\"px2-notice px2-notice--info\"><p>Info</p></div>","variables":[],"fileHash":"6b7aec9a77ca6ef98076e93d97de0057"},{"header":"Flash Message","description":"<p class=\"sg\">Show Flash Message from JavaScript.</p>\n","modifiers":[],"deprecated":false,"experimental":false,"reference":"5.2","markup":"<ul>\n <li><a href=\"javascript:px2style.flashMessage(\n         'Flash Message',\n         function(){\n             console.log('done.');\n         }\n     );\">Show Flash Message.</a></li>\n <li><a href=\"javascript:px2style.flashMessage(\n         {\n             'message':'Flash Message',\n             'type':'success',\n         },\n         function(){\n             console.log('done.');\n         }\n     );\">Show Flash Message -- success.</a></li>\n <li><a href=\"javascript:px2style.flashMessage(\n         {\n             'message':'Flash Message',\n             'type':'warning',\n         },\n         function(){\n             console.log('done.');\n         }\n     );\">Show Flash Message -- warning.</a></li>\n <li><a href=\"javascript:px2style.flashMessage(\n         {\n             'message':'Flash Message',\n             'type':'danger',\n         },\n         function(){\n             console.log('done.');\n         }\n     );\">Show Flash Message -- danger.</a></li>\n <li><a href=\"javascript:px2style.flashMessage(\n         {\n             'message':'Flash Message',\n             'type':'info',\n         },\n         function(){\n             console.log('done.');\n         }\n     );\">Show Flash Message -- info.</a></li>\n</ul>","syntax":"scss","file":"_notice.css.scss","parentReference":"5","wrapper":"<sg-wrapper-content/>","renderMarkup":"<ul>\n <li><a href=\"javascript:px2style.flashMessage(\n         'Flash Message',\n         function(){\n             console.log('done.');\n         }\n     );\">Show Flash Message.</a></li>\n <li><a href=\"javascript:px2style.flashMessage(\n         {\n             'message':'Flash Message',\n             'type':'success',\n         },\n         function(){\n             console.log('done.');\n         }\n     );\">Show Flash Message -- success.</a></li>\n <li><a href=\"javascript:px2style.flashMessage(\n         {\n             'message':'Flash Message',\n             'type':'warning',\n         },\n         function(){\n             console.log('done.');\n         }\n     );\">Show Flash Message -- warning.</a></li>\n <li><a href=\"javascript:px2style.flashMessage(\n         {\n             'message':'Flash Message',\n             'type':'danger',\n         },\n         function(){\n             console.log('done.');\n         }\n     );\">Show Flash Message -- danger.</a></li>\n <li><a href=\"javascript:px2style.flashMessage(\n         {\n             'message':'Flash Message',\n             'type':'info',\n         },\n         function(){\n             console.log('done.');\n         }\n     );\">Show Flash Message -- info.</a></li>\n</ul>","fileHash":"6b7aec9a77ca6ef98076e93d97de0057"},{"header":"Form Elements","description":"<p class=\"sg\">General input elements.</p>\n","modifiers":[],"deprecated":false,"experimental":false,"reference":"6","markup":"<input type=\"text\" name=\"input-text\" value=\"Form Element: text input\" class=\"px2-input\" />\n<button class=\"px2-btn\">OK</button>\n<hr />\n<input type=\"password\" name=\"password\" value=\"password\" class=\"px2-input\" />\n<input type=\"number\" name=\"input-number\" value=\"200\" class=\"px2-input\" />\n<input type=\"search\" name=\"input-search\" value=\"Search Keyword\" class=\"px2-input\" />\n<input type=\"tel\" name=\"input-tel\" value=\"090-0000-0000\" class=\"px2-input\" />\n<input type=\"url\" name=\"input-url\" value=\"https://pickles2.pxt.jp/\" class=\"px2-input\" />\n<input type=\"email\" name=\"input-email\" value=\"pickles2@example.com\" class=\"px2-input\" />\n<input type=\"datetime\" name=\"input-datetime\" value=\"\" class=\"px2-input\" />\n<input type=\"date\" name=\"input-date\" value=\"\" class=\"px2-input\" />\n<input type=\"month\" name=\"input-month\" value=\"\" class=\"px2-input\" />\n<input type=\"week\" name=\"input-week\" value=\"\" class=\"px2-input\" />\n<input type=\"time\" name=\"input-time\" value=\"\" class=\"px2-input\" />\n<input type=\"color\" name=\"input-color\" value=\"\" class=\"px2-input\" />\n<input type=\"file\" name=\"input-file\" value=\"\" class=\"px2-input\" />\n<input type=\"datetime-local\" name=\"input-datetime-local\" value=\"\" class=\"px2-input\" />\n<select name=\"input-select\" class=\"px2-input\"><option value=\"1\">Select Option 1</option></select>\n<hr />\n<textarea name=\"input-textarea\" class=\"px2-input\">Text Area</textarea>\n<hr />\nReadonly:\n<input type=\"text\" name=\"input-text\" value=\"Form Element: text input\" class=\"px2-input\" readonly />\n<hr />\nDisabled:\n<input type=\"text\" name=\"input-text\" value=\"Form Element: text input\" class=\"px2-input\" disabled />\n<hr />\nBlock:\n<p><input type=\"text\" name=\"input-text\" value=\"Form Element: text input\" class=\"px2-input px2-input--block\" /></p>\n<p><textarea name=\"input-text\" class=\"px2-input px2-input--block\">Form Element: text input</textarea></p>\n<p><select name=\"input-select\" class=\"px2-input px2-input--block\"><option value=\"1\">Select Option 1</option></select></p>\n<hr />\nErrored:\n<p><input type=\"text\" name=\"input-text\" value=\"Form Element: text input\" class=\"px2-input px2-input--error\" /></p>\n<p><textarea name=\"input-text\" class=\"px2-input px2-input--error\">Form Element: text input</textarea></p>\n<p><select name=\"input-select\" class=\"px2-input px2-input--error\"><option value=\"1\">Select Option 1</option></select></p>","css":"input[type=text].px2-input,\ninput[type=password].px2-input,\ninput[type=number].px2-input,\ninput[type=search].px2-input,\ninput[type=tel].px2-input,\ninput[type=url].px2-input,\ninput[type=email].px2-input,\ninput[type=datetime].px2-input,\ninput[type=date].px2-input,\ninput[type=month].px2-input,\ninput[type=week].px2-input,\ninput[type=time].px2-input,\ninput[type=color].px2-input,\ninput[type=file].px2-input,\ninput[type=datetime-local].px2-input,\ntextarea.px2-input,\nselect.px2-input{\n    display: inline-block;\n    box-sizing: border-box;\n    width: auto;\n    min-width: 50px;\n    max-width: 100%;\n    padding: .375rem .75rem;\n    font-size: 1em;\n    font-weight: normal;\n    line-height: 1.5;\n    color: $px2-text-color; // fallback\n    color: var(--px2-text-color, $px2-text-color);\n    background-color: $px2-background-color; // fallback\n    background-color: var(--px2-background-color, $px2-background-color);\n    background-clip: padding-box;\n    border: 1px solid #ced4da;\n    border-radius: .25rem;\n    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;\n    &:focus{\n        color: #333;\n        background-color: #fff;\n        border-color: #80bdff;\n        outline: 0;\n        box-shadow: 0 0 0 .2rem rgba(0,123,255,.25);\n    }\n    &[readonly]{\n        background-color: #eee;\n        &:focus{\n            border-color: #ced4da;\n            box-shadow: none;\n        }\n    }\n    &[disabled]{\n        color: #8e959c;\n        background-color: #eee;\n    }\n    &--block{\n        display: block;\n        width: 100%;\n    }\n\n    &--error {\n        border-color: #721c24;\n        color: #721c24;\n        background-color: #f8d7da;\n    }\n}","syntax":"scss","file":"_form.css.scss","wrapper":"<sg-wrapper-content/>","renderMarkup":"<input type=\"text\" name=\"input-text\" value=\"Form Element: text input\" class=\"px2-input\" />\n<button class=\"px2-btn\">OK</button>\n<hr />\n<input type=\"password\" name=\"password\" value=\"password\" class=\"px2-input\" />\n<input type=\"number\" name=\"input-number\" value=\"200\" class=\"px2-input\" />\n<input type=\"search\" name=\"input-search\" value=\"Search Keyword\" class=\"px2-input\" />\n<input type=\"tel\" name=\"input-tel\" value=\"090-0000-0000\" class=\"px2-input\" />\n<input type=\"url\" name=\"input-url\" value=\"https://pickles2.pxt.jp/\" class=\"px2-input\" />\n<input type=\"email\" name=\"input-email\" value=\"pickles2@example.com\" class=\"px2-input\" />\n<input type=\"datetime\" name=\"input-datetime\" value=\"\" class=\"px2-input\" />\n<input type=\"date\" name=\"input-date\" value=\"\" class=\"px2-input\" />\n<input type=\"month\" name=\"input-month\" value=\"\" class=\"px2-input\" />\n<input type=\"week\" name=\"input-week\" value=\"\" class=\"px2-input\" />\n<input type=\"time\" name=\"input-time\" value=\"\" class=\"px2-input\" />\n<input type=\"color\" name=\"input-color\" value=\"\" class=\"px2-input\" />\n<input type=\"file\" name=\"input-file\" value=\"\" class=\"px2-input\" />\n<input type=\"datetime-local\" name=\"input-datetime-local\" value=\"\" class=\"px2-input\" />\n<select name=\"input-select\" class=\"px2-input\"><option value=\"1\">Select Option 1</option></select>\n<hr />\n<textarea name=\"input-textarea\" class=\"px2-input\">Text Area</textarea>\n<hr />\nReadonly:\n<input type=\"text\" name=\"input-text\" value=\"Form Element: text input\" class=\"px2-input\" readonly />\n<hr />\nDisabled:\n<input type=\"text\" name=\"input-text\" value=\"Form Element: text input\" class=\"px2-input\" disabled />\n<hr />\nBlock:\n<p><input type=\"text\" name=\"input-text\" value=\"Form Element: text input\" class=\"px2-input px2-input--block\" /></p>\n<p><textarea name=\"input-text\" class=\"px2-input px2-input--block\">Form Element: text input</textarea></p>\n<p><select name=\"input-select\" class=\"px2-input px2-input--block\"><option value=\"1\">Select Option 1</option></select></p>\n<hr />\nErrored:\n<p><input type=\"text\" name=\"input-text\" value=\"Form Element: text input\" class=\"px2-input px2-input--error\" /></p>\n<p><textarea name=\"input-text\" class=\"px2-input px2-input--error\">Form Element: text input</textarea></p>\n<p><select name=\"input-select\" class=\"px2-input px2-input--error\"><option value=\"1\">Select Option 1</option></select></p>","variables":["px2-text-color","px2-text-color","px2-background-color","px2-background-color"],"fileHash":"8809b33b057b7d8a23d17dbdb4203610"},{"header":"Input Group","description":"","modifiers":[],"deprecated":false,"experimental":false,"reference":"6.1","markup":"<div class=\"px2-p\">\n<div class=\"px2-input-group\">\n<input type=\"text\" name=\"input-text\" value=\"Form Element: text input\" class=\"px2-input\" />\n<button class=\"px2-btn\">OK</button>\n</div>\n</div>\n<div class=\"px2-p\">\n<div class=\"px2-input-group\">\n<input type=\"number\" name=\"input-number\" value=\"Form Element: number input\" class=\"px2-input\" />\n<span class=\"px2-input-group__text\">px</span>\n<button class=\"px2-btn\">OK</button>\n</div>\n</div>\n<div class=\"px2-p\">\n<p>Fluid</p>\n<div class=\"px2-input-group px2-input-group--fluid\">\n<input type=\"number\" name=\"input-number\" value=\"Form Element: number input\" class=\"px2-input\" />\n<span class=\"px2-input-group__text\">px</span>\n<button class=\"px2-btn\">OK</button>\n</div>\n</div>","css":".px2-input-group{\n    display: inline-flex;\n    box-sizing: border-box;\n    border-radius: 0px;\n    max-width: 100%;\n\n    &__text {\n        display: inline-block;\n        box-sizing: border-box;\n        padding: .375rem .75rem;\n        font-size: 1rem;\n        font-weight: normal;\n        line-height: 1.5;\n        color: $px2-text-color; // fallback\n        color: var(--px2-text-color, $px2-text-color);\n        background-color: $px2-background-color; // fallback\n        background-color: var(--px2-background-color, $px2-background-color);\n        border: 1px solid #ced4da;\n    }\n\n    >*,\n    >input.px2-input,\n    >select.px2-input,\n    >textarea.px2-input,\n    >.px2-btn{\n        border-right-width: 0px;\n        flex-grow: 1;\n    }\n\n    >:first-child,\n    >input:first-child.px2-input,\n    >select:first-child.px2-input,\n    >textarea:first-child.px2-input,\n    >:first-child.px2-btn{\n        border-radius: .25rem 0 0 .25rem / .25rem 0 0 .25rem;\n    }\n    >:last-child,\n    >input:last-child.px2-input,\n    >select:last-child.px2-input,\n    >textarea:last-child.px2-input,\n    >:last-child.px2-btn{\n        border-right-width: 1px;\n        border-radius: 0 .25rem .25rem 0 / 0 .25rem .25rem 0;\n    }\n\n    &--fluid {\n        display: flex;\n        width: 100%;\n    }\n\n}","syntax":"scss","file":"_form.css.scss","parentReference":"6","wrapper":"<sg-wrapper-content/>","renderMarkup":"<div class=\"px2-p\">\n<div class=\"px2-input-group\">\n<input type=\"text\" name=\"input-text\" value=\"Form Element: text input\" class=\"px2-input\" />\n<button class=\"px2-btn\">OK</button>\n</div>\n</div>\n<div class=\"px2-p\">\n<div class=\"px2-input-group\">\n<input type=\"number\" name=\"input-number\" value=\"Form Element: number input\" class=\"px2-input\" />\n<span class=\"px2-input-group__text\">px</span>\n<button class=\"px2-btn\">OK</button>\n</div>\n</div>\n<div class=\"px2-p\">\n<p>Fluid</p>\n<div class=\"px2-input-group px2-input-group--fluid\">\n<input type=\"number\" name=\"input-number\" value=\"Form Element: number input\" class=\"px2-input\" />\n<span class=\"px2-input-group__text\">px</span>\n<button class=\"px2-btn\">OK</button>\n</div>\n</div>","variables":["px2-text-color","px2-text-color","px2-background-color","px2-background-color"],"fileHash":"8809b33b057b7d8a23d17dbdb4203610"},{"header":"Form input list","description":"","modifiers":[],"deprecated":false,"experimental":false,"reference":"6.2","markup":"<div class=\"px2-form-input-list\">\n <ul class=\"px2-form-input-list__ul\">\n\t    <li class=\"px2-form-input-list__li\">\n\t        <div class=\"px2-form-input-list__label\"><label for=\"input-text-001\">Input Label</label></div>\n\t        <div class=\"px2-form-input-list__input\"><input type=\"text\" id=\"input-text-001\" name=\"input-text-001\" value=\"Form Element: text input\" class=\"px2-input\" /></div>\n\t    </li>\n\t    <li class=\"px2-form-input-list__li px2-form-input-list__li--required\">\n\t        <div class=\"px2-form-input-list__label\"><label for=\"input-text-002\">Input Label</label></div>\n\t        <div class=\"px2-form-input-list__input\"><input type=\"text\" id=\"input-text-002\" name=\"input-text-002\" value=\"Form Element: text input\" class=\"px2-input\" /></div>\n\t    </li>\n\t    <li class=\"px2-form-input-list__li px2-form-input-list__li--error\">\n\t        <div class=\"px2-form-input-list__label\"><label for=\"input-text-003\">Input Label</label></div>\n\t        <div class=\"px2-form-input-list__input\"><input type=\"text\" id=\"input-text-003\" name=\"input-text-003\" value=\"Form Element: text input\" class=\"px2-input px2-input--error\" /></div>\n\t    </li>\n </ul>\n</div>","css":".px2-form-input-list{\n\tmargin-top: 1em;\n\tmargin-bottom: 1em;\n\n\tul.px2-form-input-list__ul{\n\t\tdisplay: table;\n\t\tborder-collapse: collapse;\n\t\twidth: 100%;\n\t\tbox-sizing: border-box;\n\t\tborder: 1px solid #999999;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\n\t\tli.px2-form-input-list__li{\n\t\t\tdisplay: table-row;\n\t\t\tlist-style-type: none;\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\n\t\t\t.px2-form-input-list__label{\n\t\t\t\tdisplay: table-cell;\n                vertical-align: top;\n\t\t\t\tbackground-color: #e7e7e7;\n\t\t\t\tfont-weight: bold;\n\t\t\t\tpadding: 0.4em 1em;\n\t\t\t\twidth: 30%;\n\t\t\t\tborder: 1px solid #999999;\n\t\t\t}\n\t\t\t.px2-form-input-list__input{\n\t\t\t\tdisplay: table-cell;\n                vertical-align: top;\n                background-color: $px2-background-color; // fallback\n                background-color: var(--px2-background-color, $px2-background-color);\n\t\t\t\tpadding: 0.4em 1em;\n\t\t\t\twidth: 70%;\n\t\t\t\tborder: 1px solid #999999;\n\t\t\t}\n\t\t\tp, .px2-p {\n\t\t\t\tmargin-top: 0.2em;\n\t\t\t\tmargin-bottom: 0.2em;\n\t\t\t}\n\n            &--required {\n                .px2-form-input-list__label{\n                    &::after {\n                        content: \"*\";\n                        color: #e11;\n                        font-weight: bold;\n                        margin: 0 0 0 0.7em;\n                    }\n                }\n                .px2-form-input-list__input{\n                }\n            }\n            &--error {\n                .px2-form-input-list__label{\n                    color: #721c24;\n                    &::before {\n                        content: \"!!!\";\n                        color: #e11;\n                        margin: 0 0.7em 0 0;\n                    }\n                }\n                .px2-form-input-list__input{\n                }\n            }\n\t\t}\n\t}\n\n\t@media all and (max-width: 544px){\n\t\tul.px2-form-input-list__ul{\n\t\t\tdisplay: block;\n\t\t\tborder-bottom: 0 none;\n\n\t\t\tli.px2-form-input-list__li{\n\t\t\t\tdisplay: block;\n\n\t\t\t\t.px2-form-input-list__label{\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\tborder-left: 0 none;\n\t\t\t\t\tborder-top: 0 none;\n\t\t\t\t\tborder-right: 0 none;\n\t\t\t\t\tpadding: 0.4em 1em;\n\t\t\t\t\twidth: auto;\n\t\t\t\t}\n\t\t\t\t.px2-form-input-list__input{\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\tborder-left: 0 none;\n\t\t\t\t\tborder-top: 0 none;\n\t\t\t\t\tborder-right: 0 none;\n\t\t\t\t\tpadding: 0.4em 1em;\n\t\t\t\t\twidth: auto;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}","syntax":"scss","file":"_form.css.scss","parentReference":"6","wrapper":"<sg-wrapper-content/>","renderMarkup":"<div class=\"px2-form-input-list\">\n <ul class=\"px2-form-input-list__ul\">\n\t    <li class=\"px2-form-input-list__li\">\n\t        <div class=\"px2-form-input-list__label\"><label for=\"input-text-001\">Input Label</label></div>\n\t        <div class=\"px2-form-input-list__input\"><input type=\"text\" id=\"input-text-001\" name=\"input-text-001\" value=\"Form Element: text input\" class=\"px2-input\" /></div>\n\t    </li>\n\t    <li class=\"px2-form-input-list__li px2-form-input-list__li--required\">\n\t        <div class=\"px2-form-input-list__label\"><label for=\"input-text-002\">Input Label</label></div>\n\t        <div class=\"px2-form-input-list__input\"><input type=\"text\" id=\"input-text-002\" name=\"input-text-002\" value=\"Form Element: text input\" class=\"px2-input\" /></div>\n\t    </li>\n\t    <li class=\"px2-form-input-list__li px2-form-input-list__li--error\">\n\t        <div class=\"px2-form-input-list__label\"><label for=\"input-text-003\">Input Label</label></div>\n\t        <div class=\"px2-form-input-list__input\"><input type=\"text\" id=\"input-text-003\" name=\"input-text-003\" value=\"Form Element: text input\" class=\"px2-input px2-input--error\" /></div>\n\t    </li>\n </ul>\n</div>","variables":["px2-background-color","px2-background-color"],"fileHash":"8809b33b057b7d8a23d17dbdb4203610"},{"header":"Form submit buttons","description":"","modifiers":[],"deprecated":false,"experimental":false,"reference":"6.3","markup":"<div class=\"px2-form-submit-area\">\n<ul class=\"px2-form-submit-area__btns\">\n<li><button class=\"px2-btn px2-btn--primary\">OK 1</button></li>\n<li><button class=\"px2-btn px2-btn--primary\">OK 2</button></li>\n</ul>\n<ul class=\"px2-form-submit-area__backward-btns\">\n<li><button class=\"px2-btn px2-btn--secondary\">Back 1</button></li>\n<li><button class=\"px2-btn px2-btn--secondary\">Back 2</button></li>\n</ul>\n</div>","css":".px2-form-submit-area {\n    margin: 1em 0;\n    padding: 0;\n    display: flex;\n    flex-direction: row-reverse;\n    justify-content: space-between;\n\n    &__btns,\n    &__backward-btns {\n        display: flex;\n        flex-direction: row-reverse;\n        margin: 0;\n        padding: 0;\n        > li {\n            margin: 0;\n            padding: 0;\n            list-style-type: none;\n        }\n    }\n\n\t@media all and (max-width: 544px){\n        flex-direction: column;\n\n        &__btns,\n        &__backward-btns {\n            flex-direction: column;\n            > li {\n                margin: 0.2em auto;\n            }\n        }\n\n        &__backward-btns {\n            margin-top: 1em;\n            > li {\n                margin: 0.2em auto 0.2em 0;\n            }\n        }\n    }\n}","syntax":"scss","file":"_form.css.scss","parentReference":"6","wrapper":"<sg-wrapper-content/>","renderMarkup":"<div class=\"px2-form-submit-area\">\n<ul class=\"px2-form-submit-area__btns\">\n<li><button class=\"px2-btn px2-btn--primary\">OK 1</button></li>\n<li><button class=\"px2-btn px2-btn--primary\">OK 2</button></li>\n</ul>\n<ul class=\"px2-form-submit-area__backward-btns\">\n<li><button class=\"px2-btn px2-btn--secondary\">Back 1</button></li>\n<li><button class=\"px2-btn px2-btn--secondary\">Back 2</button></li>\n</ul>\n</div>","variables":[],"fileHash":"8809b33b057b7d8a23d17dbdb4203610"},{"header":"Modal Dialog","description":"<p class=\"sg\">Modal Dialog.</p>\n","modifiers":[],"deprecated":false,"experimental":false,"reference":"7","markup":"<div style=\"width: 100%; height: 400px;\">\n<div class=\"px2-modal\">\n <article class=\"px2-modal__dialog\">\n  <div class=\"px2-modal__header\">\n      <h1 class=\"px2-modal__title\">Dialog Title</h1>\n  </div>\n  <div class=\"px2-modal__body\">\n     <p>Dialog Content.</p>\n     <h2>Heading h2</h2>\n     <h3>Heading h3</h3>\n     <h4>Heading h4</h4>\n     <h5>Heading h5</h5>\n     <ul>\n         <li>List 1</li>\n         <li>List 2\n             <ul>\n                 <li>List 2-1</li>\n                 <li>List 2-2</li>\n             </ul>\n         </li>\n         <li>List 3</li>\n     </ul>\n     <ol>\n         <li>List 1</li>\n         <li>List 2\n             <ol>\n                 <li>List 2-1</li>\n                 <li>List 2-2</li>\n             </ol>\n         </li>\n         <li>List 3</li>\n     </ol>\n  </div>\n  <div class=\"px2-modal__footer\">\n     <div class=\"px2-modal__footer-primary\"><ul>\n         <li><button class=\"px2-btn px2-btn--primary\">OK</button></li>\n     </ul></div>\n     <div class=\"px2-modal__footer-secondary\"><ul>\n         <li><button class=\"px2-btn\">Cancel</button></li>\n     </ul></div>\n  </div>\n  <div class=\"px2-modal__close\"><button></button></div>\n </article>\n</div>\n</div>","css":".px2-modal{\n\tbackground: rgba(0,0,0,0.5);\n\tposition: absolute; left: 0; top: 0;\n\twidth: 100%;\n\theight: 100%;\n\tz-index: 1000000;\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tfont-family: $px2-font-family;\n\n\t> form{\n\t\t// display: inline;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t}\n\n\t&__close {\n\t\tposition: absolute;\n\t\tright: -0.5em;\n\t\ttop: -0.5em;\n\t\twidth: 1.4em; height: 1.4em;\n\t\tbutton {\n\t\t\tposition: absolute;\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t\tdisplay: block;\n\t\t\twidth: 100%; height: 100%;\n\t\t\tpadding: 0;\n\t\t\tmargin: 0;\n\t\t\tborder-radius: 50%;\n\t\t\tborder: 1px solid #999;\n\t\t\tbackground-color: #eee;\n\t\t\tcolor: #999;\n\t\t\tcursor: pointer;\n\t\t\t&::before,\n\t\t\t&::after {\n\t\t\t\tcontent: \"\";\n\t\t\t\tborder-bottom: 1px solid #999;\n\t\t\t\twidth: 70%;\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: 50%;\n\t\t\t\tleft: 15%;\n\t\t\t}\n\t\t\t&::before {\n\t\t\t\ttransform: rotate(45deg);\n\t\t\t}\n\t\t\t&::after {\n\t\t\t\ttransform: rotate(-45deg);\n\t\t\t}\n\t\t\t&:hover {\n\t\t\t\tborder: 1px solid #666;\n\t\t\t\tbackground-color: #f9f9f9;\n\t\t\t\t&::before,\n\t\t\t\t&::after {\n\t\t\t\t\tborder-bottom: 1px solid #666;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n    @keyframes px2-modal--initial {\n        0% {\n            transform: translateY(-10px);\n            opacity: 0;\n        }\n        100% {\n            transform: translateY(0);\n            opacity: 1;\n        }\n    }\n\n\t&__dialog{\n\t\tposition: relative;\n\t\ttop: 0; left: 0;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tflex-wrap: nowrap;\n\t\tcolor: $px2-text-color; // fallback\n\t\tcolor: var(--px2-text-color, $px2-text-color);\n\t\tbackground-color: $px2-background-color; // fallback\n\t\tbackground-color: var(--px2-background-color, $px2-background-color);\n\t\tbox-sizing: border-box;\n\t\tpadding: 10px 0;\n\t\tmargin: 20px auto;\n\t\twidth: calc(100% - 40px);\n\t\tmax-width: 520px;\n\t\theight: auto;\n\t\tmax-height: calc(100% - 40px);\n\t\toverflow: visible;\n\t\tborder-radius: 5px;\n\t\tfont-size: medium;\n\t\th1{ font-size: 124%; margin: 0; font-weight: bold; }\n\t\th2{ font-size: 124%; margin: 2em 0 0.5em 0; font-weight: bold; }\n\t\th3{ font-size: 112%; margin: 1em 0 0.5em 0; font-weight: bold; }\n\t\th4{ font-size: 104%; margin: 1em 0 0.5em 0; font-weight: bold; }\n\t\th5{ font-size: 100%; margin: 1em 0 0.5em 0; font-weight: bold; }\n\t\th6{ font-size: 100%; margin: 1em 0 0.5em 0; font-weight: bold; }\n\n\t\tanimation: px2-modal--initial .3s ease 0s 1 normal none running;\n\t\t&--closed {\n\t\t\tanimation: px2-modal--initial .3s ease 0s 1 reverse forwards running;\n\t\t}\n\t}\n\n\t&__header{\n\t\tborder-bottom: 1px solid #999;\n\t\tpadding: 8px 20px;\n\t\tmargin-bottom: 0.5em;\n\t\tbox-shadow: 0 5px 12px -5px rgba(0, 0, 0, .1);\n\t}\n\n\t&__body{\n\t\tposition: relative;\n\t\ttop: 0; left: 0;\n\t\tpadding: 0 20px;\n\t\toverflow: auto;\n\t\tflex-grow: 1;\n\t}\n\n\t&__title{\n\t\tfont-weight: bold;\n\t}\n\n\t&__footer{\n\t\tborder-top: 1px solid #999;\n\t\tmargin: 10px 0 0 0;\n\t\tpadding: 10px 20px 0 20px;\n\t\tdisplay: flex;\n\t\tflex-direction: row-reverse;\n\t\tjustify-content: space-between;\n\n\t\t&-primary>ul,\n\t\t&-secondary>ul,\n\t\t>ul{\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: flex-end;\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t\t>li{\n\t\t\t\tlist-style-type: none;\n\t\t\t\tmargin: 0 0 0 5px;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t}\n\t}\n}","syntax":"scss","file":"_modal.css.scss","wrapper":"<sg-wrapper-content/>","renderMarkup":"<div style=\"width: 100%; height: 400px;\">\n<div class=\"px2-modal\">\n <article class=\"px2-modal__dialog\">\n  <div class=\"px2-modal__header\">\n      <h1 class=\"px2-modal__title\">Dialog Title</h1>\n  </div>\n  <div class=\"px2-modal__body\">\n     <p>Dialog Content.</p>\n     <h2>Heading h2</h2>\n     <h3>Heading h3</h3>\n     <h4>Heading h4</h4>\n     <h5>Heading h5</h5>\n     <ul>\n         <li>List 1</li>\n         <li>List 2\n             <ul>\n                 <li>List 2-1</li>\n                 <li>List 2-2</li>\n             </ul>\n         </li>\n         <li>List 3</li>\n     </ul>\n     <ol>\n         <li>List 1</li>\n         <li>List 2\n             <ol>\n                 <li>List 2-1</li>\n                 <li>List 2-2</li>\n             </ol>\n         </li>\n         <li>List 3</li>\n     </ol>\n  </div>\n  <div class=\"px2-modal__footer\">\n     <div class=\"px2-modal__footer-primary\"><ul>\n         <li><button class=\"px2-btn px2-btn--primary\">OK</button></li>\n     </ul></div>\n     <div class=\"px2-modal__footer-secondary\"><ul>\n         <li><button class=\"px2-btn\">Cancel</button></li>\n     </ul></div>\n  </div>\n  <div class=\"px2-modal__close\"><button></button></div>\n </article>\n</div>\n</div>","variables":["px2-font-family","px2-text-color","px2-text-color","px2-background-color","px2-background-color"],"fileHash":"29d86f81f75421126cd972193a9f9d59"},{"header":"Opening Modal Dialog","description":"<p class=\"sg\">Opening Modal Dialog from JavaScript.</p>\n","modifiers":[],"deprecated":false,"experimental":false,"reference":"7.1","markup":"<ul>\n <li><a href=\"javascript:px2style.modal(\n         {\n             title: 'Sample Modal Dialog.',\n             body: '<div><p>Sample Content.</p><p>Sample Content.</p></div>',\n             buttons: [\n                 '<button class=&quot;px2-btn px2-btn--primary&quot; onclick=&quot;px2style.closeModal();&quot;>OK</button>'\n             ]\n         },\n         function(){\n             console.log('done.');\n         }\n     );\">Open normal modal dialog.</a></li>\n <li><a href=\"javascript:px2style.modal(\n         {\n             title: 'Sample Modal Dialog.',\n             body: '<div><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p></div>',\n             buttons: [\n                 '<button class=&quot;px2-btn px2-btn--primary&quot; onclick=&quot;px2style.closeModal();&quot;>OK</button>'\n             ]\n         },\n         function(){\n             console.log('done.');\n         }\n     );\">Open normal modal dialog contains long contents.</a></li>\n <li><a href=\"javascript:px2style.modal(\n         {\n             title: 'Sample Modal Dialog 700px.',\n             body: '<div><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p></div>',\n             buttons: [\n                 '<button class=&quot;px2-btn px2-btn--primary&quot; onclick=&quot;px2style.closeModal();&quot;>OK</button>'\n             ],\n             width: 700\n         },\n         function(){\n             console.log('done.');\n         }\n     );\">Open normal modal dialog with 700px width.</a></li>\n <li><a href=\"javascript:px2style.modal(\n         {\n             title: 'Sample Form Dialog.',\n             body: '<div><p>Sample Content.</p><p><input type=&quot;text&quot; name=&quot;modal-test&quot; value=&quot;&quot; /></p><p><input type=&quot;text&quot; name=&quot;modal-test&quot; value=&quot;&quot; disabled=&quot;true&quot; /></p><p><button class=&quot;btn-lock&quot; type=&quot;button&quot;>lock</button></p><p>Sample Content.</p></div>',\n             buttons: [\n                 '<button type=&quot;submit&quot; class=&quot;px2-btn px2-btn--primary&quot;>OK</button>'\n             ],\n             form: {\n                 action: 'javascript:alert(\\'form action\\');',\n                 method: 'get',\n                 submit: function(){alert('form submit');px2style.closeModal();}\n             },\n             width: 700\n         },\n         function(modalObj){\n             console.log('done.');\n             modalObj.$modal.find('.btn-lock').on('click',function(){\n                 modalObj.lock();\n                 setTimeout(function(){modalObj.unlock();}, 3000);\n             });\n         }\n     );\">Open normal modal dialog with form.</a></li>\n <li><a href=\"javascript:px2style.modal(\n         {\n             title: 'Sample Form Dialog.',\n             body: '<div><p>Sample Content.</p><p><input type=&quot;text&quot; name=&quot;modal-test&quot; value=&quot;&quot; /></p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p></div>',\n             buttons: [\n                 '<button type=&quot;submit&quot; class=&quot;px2-btn px2-btn--primary&quot;>OK</button>'\n             ],\n             form: {\n                 action: 'javascript:alert(\\'form action\\');',\n                 method: 'get',\n                 submit: function(){alert('form submit');px2style.closeModal();}\n             },\n             width: 700\n         },\n         function(){\n             console.log('done.');\n         }\n     );\">Open normal modal dialog with form contains long contents.</a></li>\n <li><a href=\"javascript:console.log(document.querySelectorAll('div.view-section'));px2style.modal(\n         {\n             title: 'Sample Modal Dialog.',\n             body: '<div><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p></div>',\n             buttons: [\n                 '<button class=&quot;px2-btn px2-btn--primary&quot; onclick=&quot;px2style.closeModal();&quot;>OK</button>'\n             ],\n             target: document.querySelectorAll('div.view-section')[0]\n         },\n         function(){\n             console.log('done.');\n         }\n     );\">Open modal dialog to target DIV element.</a></li>\n <li><a href=\"javascript:px2style.modal(\n         {\n             title: 'Sample Form Dialog.',\n             body: '<div><p>Sample Content. <button type=\\'button\\' onclick=\\''+\n                 'px2style.modal({'+\n                 '    title: &quot;2nd layer&quot;,'+\n                 '    body: &quot;<div><p>Sample Content on 2nd layer.</p></div>&quot;'+\n                 '}, function(){'+\n                 '    console.log(&quot;done2.&quot;);'+\n                 '});'+\n                 '\\'>open new layer</button></p></div>',\n             buttons: [\n                 '<button type=&quot;submit&quot; class=&quot;px2-btn px2-btn--primary&quot; onclick=&quot;px2style.closeModal();&quot;>OK</button>'\n             ],\n             buttonsSecondary: [\n                 document.createElement('button')\n             ],\n             onclose: function(){alert('onclose event');}\n         },\n         function(){\n             console.log('done.');\n         }\n     );\">Open normal modal dialog with secondary button.</a></li>\n</ul>","syntax":"scss","file":"_modal.css.scss","parentReference":"7","wrapper":"<sg-wrapper-content/>","renderMarkup":"<ul>\n <li><a href=\"javascript:px2style.modal(\n         {\n             title: 'Sample Modal Dialog.',\n             body: '<div><p>Sample Content.</p><p>Sample Content.</p></div>',\n             buttons: [\n                 '<button class=&quot;px2-btn px2-btn--primary&quot; onclick=&quot;px2style.closeModal();&quot;>OK</button>'\n             ]\n         },\n         function(){\n             console.log('done.');\n         }\n     );\">Open normal modal dialog.</a></li>\n <li><a href=\"javascript:px2style.modal(\n         {\n             title: 'Sample Modal Dialog.',\n             body: '<div><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p></div>',\n             buttons: [\n                 '<button class=&quot;px2-btn px2-btn--primary&quot; onclick=&quot;px2style.closeModal();&quot;>OK</button>'\n             ]\n         },\n         function(){\n             console.log('done.');\n         }\n     );\">Open normal modal dialog contains long contents.</a></li>\n <li><a href=\"javascript:px2style.modal(\n         {\n             title: 'Sample Modal Dialog 700px.',\n             body: '<div><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p></div>',\n             buttons: [\n                 '<button class=&quot;px2-btn px2-btn--primary&quot; onclick=&quot;px2style.closeModal();&quot;>OK</button>'\n             ],\n             width: 700\n         },\n         function(){\n             console.log('done.');\n         }\n     );\">Open normal modal dialog with 700px width.</a></li>\n <li><a href=\"javascript:px2style.modal(\n         {\n             title: 'Sample Form Dialog.',\n             body: '<div><p>Sample Content.</p><p><input type=&quot;text&quot; name=&quot;modal-test&quot; value=&quot;&quot; /></p><p><input type=&quot;text&quot; name=&quot;modal-test&quot; value=&quot;&quot; disabled=&quot;true&quot; /></p><p><button class=&quot;btn-lock&quot; type=&quot;button&quot;>lock</button></p><p>Sample Content.</p></div>',\n             buttons: [\n                 '<button type=&quot;submit&quot; class=&quot;px2-btn px2-btn--primary&quot;>OK</button>'\n             ],\n             form: {\n                 action: 'javascript:alert(\\'form action\\');',\n                 method: 'get',\n                 submit: function(){alert('form submit');px2style.closeModal();}\n             },\n             width: 700\n         },\n         function(modalObj){\n             console.log('done.');\n             modalObj.$modal.find('.btn-lock').on('click',function(){\n                 modalObj.lock();\n                 setTimeout(function(){modalObj.unlock();}, 3000);\n             });\n         }\n     );\">Open normal modal dialog with form.</a></li>\n <li><a href=\"javascript:px2style.modal(\n         {\n             title: 'Sample Form Dialog.',\n             body: '<div><p>Sample Content.</p><p><input type=&quot;text&quot; name=&quot;modal-test&quot; value=&quot;&quot; /></p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p></div>',\n             buttons: [\n                 '<button type=&quot;submit&quot; class=&quot;px2-btn px2-btn--primary&quot;>OK</button>'\n             ],\n             form: {\n                 action: 'javascript:alert(\\'form action\\');',\n                 method: 'get',\n                 submit: function(){alert('form submit');px2style.closeModal();}\n             },\n             width: 700\n         },\n         function(){\n             console.log('done.');\n         }\n     );\">Open normal modal dialog with form contains long contents.</a></li>\n <li><a href=\"javascript:console.log(document.querySelectorAll('div.view-section'));px2style.modal(\n         {\n             title: 'Sample Modal Dialog.',\n             body: '<div><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p></div>',\n             buttons: [\n                 '<button class=&quot;px2-btn px2-btn--primary&quot; onclick=&quot;px2style.closeModal();&quot;>OK</button>'\n             ],\n             target: document.querySelectorAll('div.view-section')[0]\n         },\n         function(){\n             console.log('done.');\n         }\n     );\">Open modal dialog to target DIV element.</a></li>\n <li><a href=\"javascript:px2style.modal(\n         {\n             title: 'Sample Form Dialog.',\n             body: '<div><p>Sample Content. <button type=\\'button\\' onclick=\\''+\n                 'px2style.modal({'+\n                 '    title: &quot;2nd layer&quot;,'+\n                 '    body: &quot;<div><p>Sample Content on 2nd layer.</p></div>&quot;'+\n                 '}, function(){'+\n                 '    console.log(&quot;done2.&quot;);'+\n                 '});'+\n                 '\\'>open new layer</button></p></div>',\n             buttons: [\n                 '<button type=&quot;submit&quot; class=&quot;px2-btn px2-btn--primary&quot; onclick=&quot;px2style.closeModal();&quot;>OK</button>'\n             ],\n             buttonsSecondary: [\n                 document.createElement('button')\n             ],\n             onclose: function(){alert('onclose event');}\n         },\n         function(){\n             console.log('done.');\n         }\n     );\">Open normal modal dialog with secondary button.</a></li>\n</ul>","fileHash":"29d86f81f75421126cd972193a9f9d59"},{"header":"Header","description":"<p class=\"sg\">&#x30A2;&#x30D7;&#x30EA;&#x30B1;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x30D8;&#x30C3;&#x30C0;&#x30FC;&#x3002;</p>\n","modifiers":[],"deprecated":false,"experimental":false,"reference":"8","markup":null,"syntax":"scss","file":"_header.css.scss","wrapper":"<sg-wrapper-content/>","fileHash":"75190e72ac3917521be093bb25bf0ee7"},{"header":"Standard Header","description":"","modifiers":[],"deprecated":false,"experimental":false,"reference":"8.1","markup":"<header class=\"px2-header\">\n    <div class=\"px2-header__inner\">\n        <div class=\"px2-header__px2logo\">\n            <a href=\"javascript:px2style.header.init({'current':''});\"><img src=\"https://okuden-labo.com/images/5/a/3/d/d/5a3dd3a06d3d74537be8f8a82fd58140f62dfc45-150x150.png\" alt=\"\" /></a>\n        </div>\n        <div class=\"px2-header__block\">\n            <div class=\"px2-header__id\">\n                <span>Pickles 2</span>\n            </div>\n            <div class=\"px2-header__global-menu\">\n                <ul>\n                    <li><a href=\"javascript:px2style.header.init({'current':''});\" data-name=\"\">HOME</a></li>\n                    <li><a href=\"javascript:px2style.header.init({'current':'sitemap'});\" data-name=\"sitemap\">Sitemap</a></li>\n                    <li><a href=\"javascript:px2style.header.init({'current':'theme'});\" data-name=\"theme\">Theme</a></li>\n                    <li><a href=\"javascript:px2style.header.init({'current':'contents'});\" data-name=\"contents\">Contents</a></li>\n                    <li><a href=\"javascript:;\">Profile 1</a>\n                        <ul>\n                            <li><a href=\"javascript:px2style.header.init({'current':'profile1'});\" data-name=\"profile1\">Profile</a></li>\n                            <li><a href=\"javascript:px2style.header.init({'current':'logout1'});\" data-name=\"logout1\">Logout</a></li>\n                        </ul>\n                    </li>\n                    <li><a href=\"javascript:;\">Profile 2</a>\n                        <ul>\n                            <li><a href=\"javascript:px2style.header.init({'current':'profile'2});\" data-name=\"profile2\">Profile</a></li>\n                            <li><a href=\"javascript:px2style.header.init({'current':'logout2'});\" data-name=\"logout2\">Logout</a></li>\n                        </ul>\n                    </li>\n                </ul>\n            </div>\n        </div>\n        <div class=\"px2-header__shoulder-menu\">\n            <button><span class=\"px2-header__hamburger\"></span></button>\n            <ul>\n                <li><a href=\"javascript:px2style.header.init({'current':'menu-a'});\" data-name=\"menu-a\">Menu A</a></li>\n                <li><a href=\"javascript:px2style.header.init({'current':'menu-b'});\" data-name=\"menu-b\">Menu B</a></li>\n                <li><a href=\"javascript:px2style.header.init({'current':'menu-c'});\" data-name=\"menu-c\">Menu C</a></li>\n                <li><a href=\"javascript:;\">Group A</a>\n                    <ul>\n                        <li><a href=\"javascript:px2style.header.init({'current':'menu-a-a'});\" data-name=\"menu-a-a\">Menu A-A</a></li>\n                        <li><a href=\"javascript:px2style.header.init({'current':'menu-a-b'});\" data-name=\"menu-a-b\">Menu A-B</a></li>\n                        <li><a href=\"javascript:px2style.header.init({'current':'menu-a-c'});\" data-name=\"menu-a-c\">Menu A-C</a></li>\n                    </ul>\n                </li>\n                <li><a href=\"javascript:;\">Group B</a>\n                    <ul>\n                        <li><a href=\"javascript:px2style.header.init({'current':'menu-b-a'});\" data-name=\"menu-b-a\">Menu B-A</a></li>\n                        <li><a href=\"javascript:px2style.header.init({'current':'menu-b-b'});\" data-name=\"menu-b-b\">Menu B-B</a></li>\n                        <li><a href=\"javascript:px2style.header.init({'current':'menu-b-c'});\" data-name=\"menu-b-c\">Menu B-C</a></li>\n                    </ul>\n                </li>\n                <li><a href=\"javascript:px2style.header.init({'current':'quit'});\" data-name=\"quit\">Quit</a></li>\n            </ul>\n        </div>\n    </div>\n</header>\n<div class=\"contents\">\n    <h1>Header</h1>\n    <p>Paragraph</p>\n    <p>Do <a href=\"javascript: px2style.header.init();\">px2style.header.init()</a> first for toppage.</p>\n    <p>Do <a href=\"javascript: px2style.header.init({'current':'sitemap'});\">px2style.header.init({'current':appName})</a> first for other pages.</p>\n</div>","css":".px2-header{\n\theight: 45px;\n\tfont-family: $px2-font-family;\n\n\t&__inner{\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t\tbackground-color: #fff;\n\t\tpadding: 0; margin:0;\n\t\tposition: fixed;\n\t\ttop: 0; left: 0;\n\t\twidth: 100%;\n\t\tmin-height: 10px;\n\t\tz-index: 100;\n\t\tborder-bottom: 3px solid $px2-main-color; // fallback\n\t\tborder-bottom: 3px solid var(--px2-main-color, $px2-main-color);\n\t\tbox-shadow: 0 5px 13px rgba(0, 0, 0, 0.1);\n\t\tcolor: #666;\n\t\tline-height: 1;\n\t\tbox-sizing: border-box;\n\t\tborder-bottom-color: $px2-main-color; // fallback\n\t\tborder-bottom-color: var(--px2-main-color, $px2-main-color);\n\t\tcolor: $px2-main-color; // fallback\n\t\tcolor: var(--px2-main-color, $px2-main-color);\n\t}\n\n\ta{\n\t\tcolor: #333;\n\t\ttext-decoration: underline;\n\t\t&:hover{\n\t\t\tcolor: #000;\n\t\t\ttext-decoration: none;\n\t\t}\n\t}\n\n\t// LOGO\n\t&__px2logo{\n\t\ttransition: min-width 0.3s ease-out 0s , width 0.3s ease-out 0s , height 0.3s ease-out 0s;\n\t\tposition: relative;\n\t\tleft: 0px; top: 0px;\n\t\tpadding: 6px;\n\t\tmargin-left: 6px;\n\t\twidth: 45px; height: auto;\n\t\tbox-sizing: border-box;\n\t\ta{\n\t\t\tdisplay: inline-block;\n\t\t\tposition: absolute;\n\t\t\tpadding: 6px;\n\t\t\tbackground-color: #fff;\n\t\t\tleft: 0; top: 0;\n\t\t\ttransition: min-width 0.3s ease-out 0s , width 0.3s ease-out 0s , height 0.3s ease-out 0s;\n\t\t\twidth: 45px; height: 45px;\n\t\t\tbox-sizing: border-box;\n\n\t\t\timg, svg{\n\t\t\t\twidth: 100%; height: 100%;\n\t\t\t}\n\t\t}\n\t} // px2logo\n\n\t&__block{\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t\tflex-grow: 100;\n\t\tjustify-content: space-between;\n\t}\n\n\t&__id{\n\t\twidth: auto;\n\t\tmargin: 0;\n\t\tpadding: 10px 0 0 0;\n\t\tfont-size: 13px;\n\t\ttransition: opacity 0.5s ease 0;\n\t\t*{\n\t\t\tcolor: $px2-main-color; // fallback\n\t\t\tcolor: var(--px2-main-color, $px2-main-color);\n\t\t\tmargin: 0 0.5em;\n\t\t\tdisplay: inline-block;\n\t\t\ttext-shadow: none;\n\t\t\tfont-weight: normal;\n\t\t}\n\t\ta{\n\t\t\tcolor: $px2-main-color; // fallback\n\t\t\tcolor: var(--px2-main-color, $px2-main-color);\n\t\t\ttext-decoration: none;\n\t\t\t&:hover{\n\t\t\t\tcolor: #000;\n\t\t\t\ttext-decoration: none;\n\t\t\t}\n\t\t}\n\t} // id\n\n\t// グローバルメニュー\n\t&__global-menu{\n\t\tpadding: 0;\n\t\tmargin: 0;\n\t\tmargin-right: 35px;\n\t\tmargin-bottom: -3px;\n\t\tline-height: 1;\n\t\tmin-height: calc(12px + 5px + 1em);\n\n\t\tul{\n\t\t\tdisplay:flex;\n\t\t\tflex-wrap: wrap;\n\t\t\tjustify-content: flex-end;\n\t\t\tmargin:0; padding:0;\n\n\t\t\tli{\n\t\t\t\tmargin: 0 1px 0 1px;\n\t\t\t\tpadding: 0;\n\t\t\t\tlist-style-type: none;\n\t\t\t\tfont-size: 13px;\n\t\t\t\tposition: relative;\n\n\t\t\t\ta,span{\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\tmargin:0;\n\t\t\t\t\tpadding:12px 2em 5px;\n\t\t\t\t\tcolor: #666;\n\t\t\t\t\tborder: none;\n\t\t\t\t\tfont-weight: normal;\n\t\t\t\t\ttext-decoration: none;\n\t\t\t\t\tborder-bottom: 3px solid transparent;\n\n\t\t\t\t\t&:hover{\n\t\t\t\t\t\tcolor: $px2-main-color; // fallback\n\t\t\t\t\t\tcolor: var(--px2-main-color, $px2-main-color);\n\t\t\t\t\t}\n\t\t\t\t\t&.current{\n\t\t\t\t\t\tfont-weight: bold;\n\t\t\t\t\t\tborder-bottom-color: rgba(255, 255, 255, 0.85);\n\t\t\t\t\t\tcolor: $px2-main-color; // fallback\n\t\t\t\t\t\tcolor: var(--px2-main-color, $px2-main-color);\n\t\t\t\t\t\tpadding-left: 1em;\n\t\t\t\t\t\t&:before{\n\t\t\t\t\t\t\tcontent: ' ';\n\t\t\t\t\t\t\twidth: 0;\n\t\t\t\t\t\t\theight: 0;\n\t\t\t\t\t\t\tdisplay: inline-block;\n\t\t\t\t\t\t\tmargin-right: 0.5em;\n\t\t\t\t\t\t\tborder-width: 0.3em 0 0.3em 0.5em;\n\t\t\t\t\t\t\tborder-style: solid;\n\t\t\t\t\t\t\tborder-color: $px2-main-color; // fallback\n\t\t\t\t\t\t\tborder-color: var(--px2-main-color, $px2-main-color);\n\t\t\t\t\t\t\tborder-top-color: transparent;\n\t\t\t\t\t\t\tborder-bottom-color: transparent;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tspan{\n\t\t\t\t\tpadding-left: 0;\n\t\t\t\t\tpadding-right: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t\tul{\n\t\t\t\tdisplay: none;\n\t\t\t\tposition: absolute;\n\t\t\t\tright: 0; top: 100%;\n\t\t\t}\n\n\t\t\tli.px2-header__global-menu-group{\n\t\t\t\t>a::after{\n\t\t\t\t\tcontent:' ';\n\t\t\t\t\twidth:0;\n\t\t\t\t\theight:0;\n\t\t\t\t\tdisplay: inline-block;\n\t\t\t\t\tmargin-left: 0.3em;\n\t\t\t\t\tborder-width:0.3em 0 0.3em 0.5em;\n\t\t\t\t\tborder-style:solid;\n\t\t\t\t\tborder-color:#666;\n\t\t\t\t\tborder-top-color:transparent;\n\t\t\t\t\tborder-bottom-color:transparent;\n\t\t\t\t\ttransition: transform 0.2s ease-in;\n\t\t\t\t\ttransform: rotate(90deg);\n\t\t\t\t}\n\t\t\t\tul{\n\t\t\t\t\tpadding: 0;\n\t\t\t\t\tbackground-color: #999;\n\n\t\t\t\t\tli{\n\t\t\t\t\t\tlist-style-type: none;\n\t\t\t\t\t\ta{\n\t\t\t\t\t\t\tfont-weight: normal;\n\t\t\t\t\t\t\tpadding: 0.8em 2em;\n\t\t\t\t\t\t\tcolor: #eee;\n\t\t\t\t\t\t\tbackground-color: #333;\n\t\t\t\t\t\t\ttext-decoration: none;\n\t\t\t\t\t\t\t&:hover{\n\t\t\t\t\t\t\t\tbackground-color: #666;\n\t\t\t\t\t\t\t\tcolor: #fff;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t&.current{\n\t\t\t\t\t\t\t\tfont-weight: bold;\n\t\t\t\t\t\t\t\tpadding: 0.8em 2em;\n\t\t\t\t\t\t\t\tbackground-color: $px2-main-color; // fallback\n\t\t\t\t\t\t\t\tbackground-color: var(--px2-main-color, $px2-main-color);\n\t\t\t\t\t\t\t\tcolor: #fff;\n\t\t\t\t\t\t\t\tborder: none;\n\t\t\t\t\t\t\t\t&:before{\n\t\t\t\t\t\t\t\t\tcontent:none;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\tli.px2-header__global-menu-group-opened {\n\t\t\t\tz-index: 10000;\n\t\t\t}\n\t\t\tli.px2-header__global-menu-group-opened > a::after{\n\t\t\t\ttransform: rotate(90deg);\n\t\t\t}\n\t\t}\n\t} // global-menu\n\n\t// ハンバーガーメニュー\n\t&__shoulder-menu{\n\t\tposition: fixed; top: 0; right: 0;\n\t\tpadding: 0; margin: 0;\n\t\toverflow: hidden;\n\t\t>button{\n\t\t\tbackground: #f9f9f9;\n\t\t\tborder: none;\n\t\t\tborder-radius: 0;\n\t\t\tborder-left: 1px solid $px2-main-color; // fallback\n\t\t\tborder-left: 1px solid var(--px2-main-color, $px2-main-color);\n\t\t\tposition: absolute; top:0; right:0;\n\t\t\theight: 30px;\n\t\t\twidth: 30px;\n\t\t\tbox-sizing: border-box;\n\t\t\tpadding: 0.5em;\n\t\t\tcursor: pointer;\n\t\t}\n\t\t>ul{\n\t\t\tposition: absolute;\n\t\t\ttop: 30px; right: 0;\n\t\t\tdisplay: none;\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t\tlist-style-type: none;\n\t\t\tbackground-color: #333;\n\t\t\tborder: 1px solid #aaa;\n\t\t\toverflow: auto;\n\t\t\twidth:280px;\n\t\t\tmax-width:100%;\n\t\t\topacity: 0.95;\n\n\t\t\tli{\n\t\t\t\tmargin: 0 0 1px 0;\n\t\t\t\tborder-bottom: 1px solid #555;\n\t\t\t\tfont-size: 13px;\n\t\t\t\t&:last-child{\n\t\t\t\t\tborder: none;\n\t\t\t\t}\n\t\t\t\ta{\n\t\t\t\t\tdisplay:block;\n\t\t\t\t\tfont-weight: normal;\n\t\t\t\t\tpadding: 0.8em 2em;\n\t\t\t\t\tcolor: #eee;\n\t\t\t\t\tbackground-color: #333;\n\t\t\t\t\ttext-decoration: none;\n\t\t\t\t\t&:hover{\n\t\t\t\t\t\tbackground-color: #444;\n\t\t\t\t\t\tcolor: #fff;\n\t\t\t\t\t}\n\t\t\t\t\t&.current{\n\t\t\t\t\t\tfont-weight: bold;\n\t\t\t\t\t\tbackground-color: $px2-main-color; // fallback\n\t\t\t\t\t\tbackground-color: var(--px2-main-color, $px2-main-color);\n\t\t\t\t\t\tcolor: #fff;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\tli.px2-header__shoulder-menu-group{\n\t\t\t\t>a::after{\n\t\t\t\t\tcontent:' ';\n\t\t\t\t\twidth:0;\n\t\t\t\t\theight:0;\n\t\t\t\t\tdisplay: inline-block;\n\t\t\t\t\tmargin-left: 1em;\n\t\t\t\t\tborder-width:0.3em 0 0.3em 0.5em;\n\t\t\t\t\tborder-style:solid;\n\t\t\t\t\tborder-color:#eee;\n\t\t\t\t\tborder-top-color:transparent;\n\t\t\t\t\tborder-bottom-color:transparent;\n\t\t\t\t\ttransition: transform 0.2s ease-in;\n\t\t\t\t}\n\t\t\t\tul{\n\t\t\t\t\tpadding: 0 0 0 15px;\n\t\t\t\t\tmargin: 0 0 0 0;\n\t\t\t\t\tdisplay:none;\n\t\t\t\t\tli{\n\t\t\t\t\t\tlist-style-type: none;\n\t\t\t\t\t\ta{\n\t\t\t\t\t\t\tbackground-color: #555;\n\t\t\t\t\t\t\tcolor: #ddd;\n\t\t\t\t\t\t\t&:hover{\n\t\t\t\t\t\t\t\tbackground-color: #666;\n\t\t\t\t\t\t\t\tcolor: #fff;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t&.current{\n\t\t\t\t\t\t\t\tfont-weight: bold;\n\t\t\t\t\t\t\t\tbackground-color: $px2-main-color; // fallback\n\t\t\t\t\t\t\t\tbackground-color: var(--px2-main-color, $px2-main-color);\n\t\t\t\t\t\t\t\tcolor: #fff;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\tli.px2-header__shoulder-menu-group-opened > a::after{\n\t\t\t\ttransform: rotate(90deg);\n\t\t\t}\n\t\t\t>li:last-child{\n\t\t\t\tmargin-bottom: 30px;\n\t\t\t}\n\t\t}\n\t} // shoulder-menu\n\n\t// ハンバーガーメニューアイコン\n\t&__hamburger,\n\t&__hamburger:before,\n\t&__hamburger:after {\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\theight: 2px;\n\t\twidth: calc(100% - 1em);\n\t\tborder-radius: 1px;\n\t\tmargin: 0 auto;\n\t\tbackground: $px2-main-color; // fallback\n\t\tbackground: var(--px2-main-color, $px2-main-color);\n\t\tcontent: '';\n\t}\n\t&__hamburger:before {\n\t\tbottom: -6px;\n\t\twidth: 100%;\n\t}\n\t&__hamburger:after {\n\t\tbottom: 6px;\n\t\twidth: 100%;\n\t}\n\n\t// Small Screen\n\t.px2-header__shoulder-global-menu{\n\t\tdisplay: none;\n\t}\n\t@media all and (max-width: 640px){\n\t\t&__global-menu ul{\n\t\t\tdisplay: none;\n\t\t}\n\t\t.px2-header__shoulder-global-menu{\n\t\t\tdisplay: block;\n\t\t}\n\t\t.px2-header__shoulder-global-menu--last{\n\t\t\tborder-bottom: 5px solid #aaa;\n\t\t}\n\t}\n\n}","syntax":"scss","file":"_header.css.scss","parentReference":"8","wrapper":"<sg-wrapper-content/>","renderMarkup":"<header class=\"px2-header\">\n    <div class=\"px2-header__inner\">\n        <div class=\"px2-header__px2logo\">\n            <a href=\"javascript:px2style.header.init({'current':''});\"><img src=\"https://okuden-labo.com/images/5/a/3/d/d/5a3dd3a06d3d74537be8f8a82fd58140f62dfc45-150x150.png\" alt=\"\" /></a>\n        </div>\n        <div class=\"px2-header__block\">\n            <div class=\"px2-header__id\">\n                <span>Pickles 2</span>\n            </div>\n            <div class=\"px2-header__global-menu\">\n                <ul>\n                    <li><a href=\"javascript:px2style.header.init({'current':''});\" data-name=\"\">HOME</a></li>\n                    <li><a href=\"javascript:px2style.header.init({'current':'sitemap'});\" data-name=\"sitemap\">Sitemap</a></li>\n                    <li><a href=\"javascript:px2style.header.init({'current':'theme'});\" data-name=\"theme\">Theme</a></li>\n                    <li><a href=\"javascript:px2style.header.init({'current':'contents'});\" data-name=\"contents\">Contents</a></li>\n                    <li><a href=\"javascript:;\">Profile 1</a>\n                        <ul>\n                            <li><a href=\"javascript:px2style.header.init({'current':'profile1'});\" data-name=\"profile1\">Profile</a></li>\n                            <li><a href=\"javascript:px2style.header.init({'current':'logout1'});\" data-name=\"logout1\">Logout</a></li>\n                        </ul>\n                    </li>\n                    <li><a href=\"javascript:;\">Profile 2</a>\n                        <ul>\n                            <li><a href=\"javascript:px2style.header.init({'current':'profile'2});\" data-name=\"profile2\">Profile</a></li>\n                            <li><a href=\"javascript:px2style.header.init({'current':'logout2'});\" data-name=\"logout2\">Logout</a></li>\n                        </ul>\n                    </li>\n                </ul>\n            </div>\n        </div>\n        <div class=\"px2-header__shoulder-menu\">\n            <button><span class=\"px2-header__hamburger\"></span></button>\n            <ul>\n                <li><a href=\"javascript:px2style.header.init({'current':'menu-a'});\" data-name=\"menu-a\">Menu A</a></li>\n                <li><a href=\"javascript:px2style.header.init({'current':'menu-b'});\" data-name=\"menu-b\">Menu B</a></li>\n                <li><a href=\"javascript:px2style.header.init({'current':'menu-c'});\" data-name=\"menu-c\">Menu C</a></li>\n                <li><a href=\"javascript:;\">Group A</a>\n                    <ul>\n                        <li><a href=\"javascript:px2style.header.init({'current':'menu-a-a'});\" data-name=\"menu-a-a\">Menu A-A</a></li>\n                        <li><a href=\"javascript:px2style.header.init({'current':'menu-a-b'});\" data-name=\"menu-a-b\">Menu A-B</a></li>\n                        <li><a href=\"javascript:px2style.header.init({'current':'menu-a-c'});\" data-name=\"menu-a-c\">Menu A-C</a></li>\n                    </ul>\n                </li>\n                <li><a href=\"javascript:;\">Group B</a>\n                    <ul>\n                        <li><a href=\"javascript:px2style.header.init({'current':'menu-b-a'});\" data-name=\"menu-b-a\">Menu B-A</a></li>\n                        <li><a href=\"javascript:px2style.header.init({'current':'menu-b-b'});\" data-name=\"menu-b-b\">Menu B-B</a></li>\n                        <li><a href=\"javascript:px2style.header.init({'current':'menu-b-c'});\" data-name=\"menu-b-c\">Menu B-C</a></li>\n                    </ul>\n                </li>\n                <li><a href=\"javascript:px2style.header.init({'current':'quit'});\" data-name=\"quit\">Quit</a></li>\n            </ul>\n        </div>\n    </div>\n</header>\n<div class=\"contents\">\n    <h1>Header</h1>\n    <p>Paragraph</p>\n    <p>Do <a href=\"javascript: px2style.header.init();\">px2style.header.init()</a> first for toppage.</p>\n    <p>Do <a href=\"javascript: px2style.header.init({'current':'sitemap'});\">px2style.header.init({'current':appName})</a> first for other pages.</p>\n</div>","variables":["px2-font-family","px2-main-color","px2-main-color","px2-main-color","px2-main-color","px2-main-color","px2-main-color","px2-main-color","px2-main-color","px2-main-color","px2-main-color","px2-main-color","px2-main-color","px2-main-color","px2-main-color","px2-main-color","px2-main-color","px2-main-color","px2-main-color","px2-main-color","px2-main-color","px2-main-color","px2-main-color","px2-main-color","px2-main-color","px2-main-color","px2-main-color"],"fileHash":"75190e72ac3917521be093bb25bf0ee7"},{"header":"Utilities","description":"<p class=\"sg\">&#x5404;&#x7A2E;&#x30E6;&#x30FC;&#x30C6;&#x30A3;&#x30EA;&#x30C6;&#x30A3;&#x3002;</p>\n","modifiers":[],"deprecated":false,"experimental":false,"reference":"9","markup":null,"syntax":"scss","file":"_utils.css.scss","wrapper":"<sg-wrapper-content/>","fileHash":"c26ee0c4839e88a9b1c96feb5f61d515"},{"header":"Editor Type Badge","description":"<p class=\"sg\">&#x7DE8;&#x96C6;&#x30E2;&#x30FC;&#x30C9;&#x3092;&#x8868;&#x793A;&#x3057;&#x307E;&#x3059;&#x3002;</p>\n","modifiers":[],"deprecated":false,"experimental":false,"reference":"9.1","markup":"<span class=\"px2-editor-type px2-editor-type--not-exists\"></span>\n<span class=\"px2-editor-type px2-editor-type--page-not-exists\"></span>\n<span class=\"px2-editor-type px2-editor-type--alias\"></span>\n<span class=\"px2-editor-type px2-editor-type--html\"></span>\n<span class=\"px2-editor-type px2-editor-type--html-gui\"></span>\n<span class=\"px2-editor-type px2-editor-type--txt\"></span>\n<span class=\"px2-editor-type px2-editor-type--md\"></span>\n<span class=\"px2-editor-type px2-editor-type--jade\"></span>\n<p><code>.px2-editor-type--fullwidth</code> を付加して最大幅にできます。</p>\n<span class=\"px2-editor-type px2-editor-type--html-gui px2-editor-type--fullwidth\"></span>","css":"@mixin px2-editor-type{\n\tdisplay: inline-block;\n\tfont-size: 12px;\n\tfont-family: sans-serif;\n\tline-height: 1;\n\tpadding: 0.4em 1em;\n\ttext-align: center;\n\tcolor: #fff;\n}\n.px2-editor-type{\n\t@include px2-editor-type;\n\n\t&__html, // <- deprecated (古い書き方ですが、後方互換のために残します)\n\t&--html{\n\t\t@include px2-editor-type;\n\t\tbackground-color: #4a8a98;\n\t\t&:before{\n\t\t\tcontent: \"HTML\";\n\t\t}\n\t}\n\t&__html-gui, // <- deprecated (古い書き方ですが、後方互換のために残します)\n\t&--html-gui{\n\t\t@include px2-editor-type;\n\t\tbackground-color: #9f5b75;\n\t\t&:before{\n\t\t\tcontent: \"Block\"; // 以前は GUI と表記していました。2021-08-01 改称\n\t\t}\n\t}\n\t&__txt, // <- deprecated (古い書き方ですが、後方互換のために残します)\n\t&--txt{\n\t\t@include px2-editor-type;\n\t\tbackground-color: #999;\n\t\t&:before{\n\t\t\tcontent: \"TEXT\";\n\t\t}\n\t}\n\t&__md, // <- deprecated (古い書き方ですが、後方互換のために残します)\n\t&--md{\n\t\t@include px2-editor-type;\n\t\tbackground-color: #ae9b59;\n\t\t&:before{\n\t\t\tcontent: \"Markdown\";\n\t\t}\n\t}\n\t&__jade, // <- deprecated (古い書き方ですが、後方互換のために残します)\n\t&--jade{\n\t\t@include px2-editor-type;\n\t\tbackground-color: #999;\n\t\t&:before{\n\t\t\tcontent: \"Jade\";\n\t\t}\n\t}\n\t&__not-exists, // <- deprecated (古い書き方ですが、後方互換のために残します)\n\t&--not-exists{\n\t\t@include px2-editor-type;\n\t\tbackground-color: #c3c3c3;\n\t\t&:before{\n\t\t\tcontent: \"未作成\";\n\t\t}\n\t}\n\t&__page-not-exists, // <- deprecated (古い書き方ですが、後方互換のために残します)\n\t&--page-not-exists{\n\t\t@include px2-editor-type;\n\t\tbackground-color: #c3c3c3;\n\t\t&:before{\n\t\t\tcontent: \"ページ未作成\";\n\t\t}\n\t}\n\t&__alias, // <- deprecated (古い書き方ですが、後方互換のために残します)\n\t&--alias{\n\t\t@include px2-editor-type;\n\t\tbackground-color: #c3c3c3;\n\t\t&:before{\n\t\t\tcontent: \"ALIAS\";\n\t\t}\n\t}\n\t&--fullwidth{\n\t\twidth: auto;\n\t\tdisplay: block;\n\t\tfloat:none;\n\t}\n}","syntax":"scss","file":"_utils.css.scss","parentReference":"9","wrapper":"<sg-wrapper-content/>","renderMarkup":"<span class=\"px2-editor-type px2-editor-type--not-exists\"></span>\n<span class=\"px2-editor-type px2-editor-type--page-not-exists\"></span>\n<span class=\"px2-editor-type px2-editor-type--alias\"></span>\n<span class=\"px2-editor-type px2-editor-type--html\"></span>\n<span class=\"px2-editor-type px2-editor-type--html-gui\"></span>\n<span class=\"px2-editor-type px2-editor-type--txt\"></span>\n<span class=\"px2-editor-type px2-editor-type--md\"></span>\n<span class=\"px2-editor-type px2-editor-type--jade\"></span>\n<p><code>.px2-editor-type--fullwidth</code> を付加して最大幅にできます。</p>\n<span class=\"px2-editor-type px2-editor-type--html-gui px2-editor-type--fullwidth\"></span>","variables":[],"fileHash":"c26ee0c4839e88a9b1c96feb5f61d515"},{"header":"Loading","description":"<p class=\"sg\">Thanks: <a href=\"https://github.com/ConnorAtherton/loaders.css\" class=\"sg\">https://github.com/ConnorAtherton/loaders.css</a></p>\n<p class=\"sg\"><a href=\"javascript:loadingDEMO();\" class=\"sg\">loadingDEMO</a></p>\n<script>\nfunction loadingDEMO(){\n    px2style.loading(); // Display Loading animation.\n    px2style.loadingMessage('Loading Message 1...'); // Update Loading message.\n    setTimeout(function(){\n        px2style.loadingMessage('Loading Message 2...'); // Update Loading message.\n        setTimeout(function(){\n            px2style.closeLoading(); // Remove Loading animation.\n        }, 5000);\n    }, 5000);\n}\n</script>","modifiers":[],"deprecated":false,"experimental":false,"reference":"9.2","markup":"<div class=\"px2-loading\"></div>","css":"@keyframes px2-loading {\n\t0% {\n\t\ttransform: scale(0.0);\n\t}\n\t100% {\n\t\ttransform: scale(1.0);\n\t\topacity: 0;\n\t}\n}\n\n.px2-loading{\n\tclear: both;\n\tfloat: none;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-content: center;\n\ttext-align:center;\n\tpadding:80px;\n\tz-index: 1010000;\n\n\t&::before{\n\t\tdisplay: block;\n\t\tcontent: \"\";\n\n\t\tbackground-color: $px2-main-color; // fallback\n\t\tbackground-color: var(--px2-main-color, $px2-main-color);\n\t\twidth: 15px;\n\t\theight: 15px;\n\t\tborder-radius: 100%;\n\t\tmargin: 2px;\n\t\tanimation-fill-mode: both;\n\n\t\tdisplay: inline-block;\n\t\theight: 60px;\n\t\twidth: 60px;\n\t\tanimation: px2-loading 1s 0s ease-in-out infinite;\n\n\t}\n}","syntax":"scss","file":"_utils.css.scss","parentReference":"9","wrapper":"<sg-wrapper-content/>","renderMarkup":"<div class=\"px2-loading\"></div>","variables":["px2-main-color","px2-main-color"],"fileHash":"c26ee0c4839e88a9b1c96feb5f61d515"},{"header":"Simple Document","description":"","modifiers":[],"deprecated":false,"experimental":false,"reference":"9.3","markup":"<div class=\"px2-document\">\n\t<h1>Header 1</h1>\n\t<p>\n\t\t標準的なドキュメントのための要素を記述します。<br />\n\t\tMarkdown などで描画された標準的なHTML要素によって構成されたドキュメントに、標準的なスタイルを適用します。<br />\n\t</p>\n\t<h2>Header 2</h2>\n\t<ul>\n\t\t<li>List Item 1</li>\n\t\t<li>List Item 2\n\t\t\t<ul>\n\t\t\t\t<li>List Item 1</li>\n\t\t\t\t<li>List Item 2\n\t\t\t\t</li>\n\t\t\t\t<li>List Item 3</li>\n\t\t\t</ul>\n\t\t</li>\n\t\t<li>List Item 3\n\t\t\t<ol>\n\t\t\t\t<li>List Item 1</li>\n\t\t\t\t<li>List Item 2\n\t\t\t\t</li>\n\t\t\t\t<li>List Item 3</li>\n\t\t\t</ol>\n\t\t</li>\n\t</ul>\n\t<h3>Header 3</h3>\n\t<h4>Header 4</h4>\n\t<h5>Header 5</h5>\n\t<h6>Header 6</h6>\n\t<ol>\n\t\t<li>List Item 1</li>\n\t\t<li>List Item 2\n\t\t\t<ol>\n\t\t\t\t<li>List Item 1</li>\n\t\t\t\t<li>List Item 2\n\t\t\t\t</li>\n\t\t\t\t<li>List Item 3</li>\n\t\t\t</ol>\n\t\t</li>\n\t\t<li>List Item 3\n\t\t\t<ul>\n\t\t\t\t<li>List Item 1</li>\n\t\t\t\t<li>List Item 2\n\t\t\t\t</li>\n\t\t\t\t<li>List Item 3</li>\n\t\t\t</ul>\n\t\t</li>\n\t</ol>\n\t<div class=\"px2-p\">\n\t\t<table class=\"px2-table\">\n\t\t\t<tbody>\n\t\t\t\t<tr>\n\t\t\t\t\t<th>th</th>\n\t\t\t\t\t<td>td</td>\n\t\t\t\t</tr>\n\t\t\t</tbody>\n\t\t</table>\n\t</div>\n\t<p class=\"px2-p\">Slim Paragraph.</p>\n</div>","css":".px2-document{\n\tfont-size: medium;\n\tline-height: 1.5;\n\n\t// paragraph\n\tp{\n\t\tmargin-top: 1em;\n\t\tmargin-bottom: 1em;\n\t}\n\n\t// headers\n\th1{\n\t\tfont-weight:bold;\n\t\tmargin-top: 2em;\n\t\tmargin-bottom: 0.5em;\n\t}\n\th2, h3, h4, h5, h6{\n\t\tfont-weight:bold;\n\t\tmargin-top: 1.5em;\n\t\tmargin-bottom: 0.5em;\n\t}\n\th1{font-size: 240%;}\n\th2{font-size: 180%;}\n\th3{font-size: 160%;}\n\th4{font-size: 130%;}\n\th5{font-size: 120%;}\n\th6{font-size: 110%;}\n\n\t// lists\n\tul, ol {\n\t\tdisplay: block;\n\t\tmargin-top: 1em;\n\t\tmargin-bottom: 1em;\n\t\tpadding-left: 40px;\n\t\tul, ol {\n\t\t\tmargin-top: 0;\n\t\t\tmargin-bottom: 0;\n\t\t}\n\t}\n}","syntax":"scss","file":"_utils.css.scss","parentReference":"9","wrapper":"<sg-wrapper-content/>","renderMarkup":"<div class=\"px2-document\">\n\t<h1>Header 1</h1>\n\t<p>\n\t\t標準的なドキュメントのための要素を記述します。<br />\n\t\tMarkdown などで描画された標準的なHTML要素によって構成されたドキュメントに、標準的なスタイルを適用します。<br />\n\t</p>\n\t<h2>Header 2</h2>\n\t<ul>\n\t\t<li>List Item 1</li>\n\t\t<li>List Item 2\n\t\t\t<ul>\n\t\t\t\t<li>List Item 1</li>\n\t\t\t\t<li>List Item 2\n\t\t\t\t</li>\n\t\t\t\t<li>List Item 3</li>\n\t\t\t</ul>\n\t\t</li>\n\t\t<li>List Item 3\n\t\t\t<ol>\n\t\t\t\t<li>List Item 1</li>\n\t\t\t\t<li>List Item 2\n\t\t\t\t</li>\n\t\t\t\t<li>List Item 3</li>\n\t\t\t</ol>\n\t\t</li>\n\t</ul>\n\t<h3>Header 3</h3>\n\t<h4>Header 4</h4>\n\t<h5>Header 5</h5>\n\t<h6>Header 6</h6>\n\t<ol>\n\t\t<li>List Item 1</li>\n\t\t<li>List Item 2\n\t\t\t<ol>\n\t\t\t\t<li>List Item 1</li>\n\t\t\t\t<li>List Item 2\n\t\t\t\t</li>\n\t\t\t\t<li>List Item 3</li>\n\t\t\t</ol>\n\t\t</li>\n\t\t<li>List Item 3\n\t\t\t<ul>\n\t\t\t\t<li>List Item 1</li>\n\t\t\t\t<li>List Item 2\n\t\t\t\t</li>\n\t\t\t\t<li>List Item 3</li>\n\t\t\t</ul>\n\t\t</li>\n\t</ol>\n\t<div class=\"px2-p\">\n\t\t<table class=\"px2-table\">\n\t\t\t<tbody>\n\t\t\t\t<tr>\n\t\t\t\t\t<th>th</th>\n\t\t\t\t\t<td>td</td>\n\t\t\t\t</tr>\n\t\t\t</tbody>\n\t\t</table>\n\t</div>\n\t<p class=\"px2-p\">Slim Paragraph.</p>\n</div>","variables":[],"fileHash":"c26ee0c4839e88a9b1c96feb5f61d515"},{"header":"Paragraph","description":"","modifiers":[],"deprecated":false,"experimental":false,"reference":"9.4","markup":"<div class=\"px2-p\">\n\t前後に、p要素と同等のマージンを付加します。\n</div>","css":".px2-p{\n\tmargin-top: 1em;\n\tmargin-bottom: 1em;\n}","syntax":"scss","file":"_utils.css.scss","parentReference":"9","wrapper":"<sg-wrapper-content/>","renderMarkup":"<div class=\"px2-p\">\n\t前後に、p要素と同等のマージンを付加します。\n</div>","variables":[],"fileHash":"c26ee0c4839e88a9b1c96feb5f61d515"},{"header":"&#x6587;&#x5B57;&#x7D44;&#x307F;","description":"","modifiers":[],"deprecated":false,"experimental":false,"reference":"9.5","markup":"<div class=\"px2-text-align-left\">\n\t左寄せ\n</div>\n<div class=\"px2-text-align-center\">\n\t中央寄せ\n</div>\n<div class=\"px2-text-align-right\">\n\t右寄せ\n</div>","css":".px2-text-align-left{\n\ttext-align: left;\n}\n.px2-text-align-center{\n\ttext-align: center;\n}\n.px2-text-align-right{\n\ttext-align: right;\n}","syntax":"scss","file":"_utils.css.scss","parentReference":"9","wrapper":"<sg-wrapper-content/>","renderMarkup":"<div class=\"px2-text-align-left\">\n\t左寄せ\n</div>\n<div class=\"px2-text-align-center\">\n\t中央寄せ\n</div>\n<div class=\"px2-text-align-right\">\n\t右寄せ\n</div>","variables":[],"fileHash":"c26ee0c4839e88a9b1c96feb5f61d515"},{"header":"&#x6587;&#x5B57;&#x30B5;&#x30A4;&#x30BA;","description":"","modifiers":[],"deprecated":false,"experimental":false,"reference":"9.6","markup":"<div class=\"px2-font-size-ss\">\n\t最も小さい文字サイズ\n</div>\n<div class=\"px2-font-size-s\">\n\t小さい文字サイズ\n</div>\n<div class=\"px2-font-size-l\">\n\t大きい文字サイズ\n</div>\n<div class=\"px2-font-size-ll\">\n\t最も大きい文字サイズ\n</div>","css":".px2-font-size-ss{\n\tfont-size: 74%;\n}\n.px2-font-size-s{\n\tfont-size: 88%;\n}\n.px2-font-size-l{\n\tfont-size: 112%;\n}\n.px2-font-size-ll{\n\tfont-size: 136%;\n}","syntax":"scss","file":"_utils.css.scss","parentReference":"9","wrapper":"<sg-wrapper-content/>","renderMarkup":"<div class=\"px2-font-size-ss\">\n\t最も小さい文字サイズ\n</div>\n<div class=\"px2-font-size-s\">\n\t小さい文字サイズ\n</div>\n<div class=\"px2-font-size-l\">\n\t大きい文字サイズ\n</div>\n<div class=\"px2-font-size-ll\">\n\t最も大きい文字サイズ\n</div>","variables":[],"fileHash":"c26ee0c4839e88a9b1c96feb5f61d515"},{"header":"Slimize","description":"","modifiers":[],"deprecated":false,"experimental":false,"reference":"9.7","markup":"<h1 class=\"px2-slim\">Header 1</h1>\n<h2 class=\"px2-slim\">Header 2</h2>\n<h3 class=\"px2-slim\">Header 3</h3>\n<h4 class=\"px2-slim\">Header 4</h4>\n<h5 class=\"px2-slim\">Header 5</h5>\n<h6 class=\"px2-slim\">Header 6</h6>\n<p class=\"px2-slim\">\n\tmargin と padding を 0 にします。\n</p>\n<ul class=\"px2-slim\">\n\t<li>margin と padding を 0 にします。</li>\n</ul>\n<ol class=\"px2-slim\">\n\t<li>margin と padding を 0 にします。</li>\n</ol>\n<div class=\"px2-slim px2-slim--r\">\n\t<p>子要素も含めて、margin と padding を再帰的に 0 にします。</p>\n\t<ul>\n\t\t<li>子要素も含めて、margin と padding を再帰的に 0 にします。</li>\n\t</ul>\n</div>","css":".px2-slim{\n\tmargin: 0;\n\tpadding: 0;\n\n\t&--r *{\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n}","syntax":"scss","file":"_utils.css.scss","parentReference":"9","wrapper":"<sg-wrapper-content/>","renderMarkup":"<h1 class=\"px2-slim\">Header 1</h1>\n<h2 class=\"px2-slim\">Header 2</h2>\n<h3 class=\"px2-slim\">Header 3</h3>\n<h4 class=\"px2-slim\">Header 4</h4>\n<h5 class=\"px2-slim\">Header 5</h5>\n<h6 class=\"px2-slim\">Header 6</h6>\n<p class=\"px2-slim\">\n\tmargin と padding を 0 にします。\n</p>\n<ul class=\"px2-slim\">\n\t<li>margin と padding を 0 にします。</li>\n</ul>\n<ol class=\"px2-slim\">\n\t<li>margin と padding を 0 にします。</li>\n</ol>\n<div class=\"px2-slim px2-slim--r\">\n\t<p>子要素も含めて、margin と padding を再帰的に 0 にします。</p>\n\t<ul>\n\t\t<li>子要素も含めて、margin と padding を再帰的に 0 にします。</li>\n\t</ul>\n</div>","variables":[],"fileHash":"c26ee0c4839e88a9b1c96feb5f61d515"},{"header":"Responsive Block","description":"","modifiers":[],"deprecated":false,"experimental":false,"reference":"9.8","markup":"<div class=\"px2-responsive\">\n\t<table class=\"px2-table\">\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t<th>th</th>\n\t\t\t\t<td>1000000000</td>\n\t\t\t\t<td>2000000000</td>\n\t\t\t\t<td>3000000000</td>\n\t\t\t\t<td>4000000000</td>\n\t\t\t\t<td>5000000000</td>\n\t\t\t\t<td>6000000000</td>\n\t\t\t\t<td>7000000000</td>\n\t\t\t\t<td>8000000000</td>\n\t\t\t\t<td>9000000000</td>\n\t\t\t\t<td>10000000000</td>\n\t\t\t\t<td>11000000000</td>\n\t\t\t\t<td>12000000000</td>\n\t\t\t\t<td>13000000000</td>\n\t\t\t</tr>\n\t\t</tbody>\n\t</table>\n</div>","css":".px2-responsive{\n\toverflow: auto;\n}","syntax":"scss","file":"_utils.css.scss","parentReference":"9","wrapper":"<sg-wrapper-content/>","renderMarkup":"<div class=\"px2-responsive\">\n\t<table class=\"px2-table\">\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t<th>th</th>\n\t\t\t\t<td>1000000000</td>\n\t\t\t\t<td>2000000000</td>\n\t\t\t\t<td>3000000000</td>\n\t\t\t\t<td>4000000000</td>\n\t\t\t\t<td>5000000000</td>\n\t\t\t\t<td>6000000000</td>\n\t\t\t\t<td>7000000000</td>\n\t\t\t\t<td>8000000000</td>\n\t\t\t\t<td>9000000000</td>\n\t\t\t\t<td>10000000000</td>\n\t\t\t\t<td>11000000000</td>\n\t\t\t\t<td>12000000000</td>\n\t\t\t\t<td>13000000000</td>\n\t\t\t</tr>\n\t\t</tbody>\n\t</table>\n</div>","variables":[],"fileHash":"c26ee0c4839e88a9b1c96feb5f61d515"},{"header":"Grids","description":"","modifiers":[],"deprecated":false,"experimental":false,"reference":"10","markup":"<div class=\"px2-grid\">\n    <div class=\"px2-grid__col-1of2\">\n        <p>Column 1</p>\n    </div>\n    <div class=\"px2-grid__col-1of2\">\n        <p>Column 2</p>\n    </div>\n</div>","css":"@mixin px2-grid__col(){\n    margin: 0 0.5rem 1em 0.5rem;\n    box-sizing: border-box;\n}\n.px2-grid {\n    display: flex;\n    flex-wrap: wrap;\n    margin: 1em -0.5rem 0 -0.5rem;\n        // 上下のマージンはその場に表示される文字の大きさが基準になるべきなので、 rem ではなく em を採用する。\n    box-sizing: border-box;\n\n    &__col-1of1{\n        @include px2-grid__col();\n        width: calc( 100% - 1rem );\n    }\n    &__col-1of2{\n        @include px2-grid__col();\n        width: calc( 50% - 1rem );\n    }\n    &__col-1of3{\n        @include px2-grid__col();\n        width: calc( 33.33% - 1rem );\n    }\n    &__col-2of3{\n        @include px2-grid__col();\n        width: calc( 66.66% - 1rem );\n    }\n    &__col-1of4{\n        @include px2-grid__col();\n        width: calc( 25% - 1rem );\n    }\n    &__col-1of5{\n        @include px2-grid__col();\n        width: calc( 20% - 1rem );\n    }\n    &__col-2of5{\n        @include px2-grid__col();\n        width: calc( 40% - 1rem );\n    }\n    &__col-3of5{\n        @include px2-grid__col();\n        width: calc( 60% - 1rem );\n    }\n    &__col-4of5{\n        @include px2-grid__col();\n        width: calc( 80% - 1rem );\n    }\n    &__col-1of6{\n        @include px2-grid__col();\n        width: calc( 16.66% - 1rem );\n    }\n\n    @media all and (max-width: 768px) {\n        // \"sm\" on Bootstrap 4\n        &__col-1of5,\n        &__col-2of5,\n        &__col-3of5,\n        &__col-4of5,\n        &__col-1of6{\n            width: calc( 33.33% - 1rem );\n        }\n    }\n\n    @media all and (max-width: 660px) {\n        &__col-1of4,\n        &__col-3of4,\n        &__col-1of5,\n        &__col-2of5,\n        &__col-3of5,\n        &__col-4of5,\n        &__col-1of6{\n            width: calc( 50% - 1rem );\n        }\n    }\n\n    @media all and (max-width: 544px) {\n        // \"xs\" on Bootstrap 4\n        &__col-1of3,\n        &__col-2of3,\n        &__col-1of4,\n        &__col-3of4,\n        &__col-1of5,\n        &__col-2of5,\n        &__col-3of5,\n        &__col-4of5,\n        &__col-1of6{\n            width: calc( 50% - 1rem );\n        }\n    }\n\n    @media all and (max-width: 440px) {\n        &__col-1of2,\n        &__col-1of3,\n        &__col-2of3,\n        &__col-1of4,\n        &__col-3of4,\n        &__col-1of5,\n        &__col-2of5,\n        &__col-3of5,\n        &__col-4of5,\n        &__col-1of6{\n            width: calc( 100% - 1rem );\n        }\n    }\n\n\n    // 大きい画面(PCサイズ)\n    @media all and (min-width: 993px) {\n        &__col-lg-1of1{\n            @include px2-grid__col();\n            width: calc( 100% - 1rem );\n        }\n        &__col-lg-1of2{\n            @include px2-grid__col();\n            width: calc( 50% - 1rem );\n        }\n        &__col-lg-1of3{\n            @include px2-grid__col();\n            width: calc( 33.33% - 1rem );\n        }\n        &__col-lg-2of3{\n            @include px2-grid__col();\n            width: calc( 66.66% - 1rem );\n        }\n        &__col-lg-1of4{\n            @include px2-grid__col();\n            width: calc( 25% - 1rem );\n        }\n        &__col-lg-1of5{\n            @include px2-grid__col();\n            width: calc( 20% - 1rem );\n        }\n        &__col-lg-2of5{\n            @include px2-grid__col();\n            width: calc( 40% - 1rem );\n        }\n        &__col-lg-3of5{\n            @include px2-grid__col();\n            width: calc( 60% - 1rem );\n        }\n        &__col-lg-4of5{\n            @include px2-grid__col();\n            width: calc( 80% - 1rem );\n        }\n        &__col-lg-1of6{\n            @include px2-grid__col();\n            width: calc( 16.66% - 1rem );\n        }\n    }\n\n    // 中サイズの画面(タブレットサイズ)\n    @media all and (min-width: 769px) and (max-width: 992px) {\n        &__col-md-1of1{\n            @include px2-grid__col();\n            width: calc( 100% - 1rem );\n        }\n        &__col-md-1of2{\n            @include px2-grid__col();\n            width: calc( 50% - 1rem );\n        }\n        &__col-md-1of3{\n            @include px2-grid__col();\n            width: calc( 33.33% - 1rem );\n        }\n        &__col-md-2of3{\n            @include px2-grid__col();\n            width: calc( 66.66% - 1rem );\n        }\n        &__col-md-1of4{\n            @include px2-grid__col();\n            width: calc( 25% - 1rem );\n        }\n        &__col-md-1of5{\n            @include px2-grid__col();\n            width: calc( 20% - 1rem );\n        }\n        &__col-md-2of5{\n            @include px2-grid__col();\n            width: calc( 40% - 1rem );\n        }\n        &__col-md-3of5{\n            @include px2-grid__col();\n            width: calc( 60% - 1rem );\n        }\n        &__col-md-4of5{\n            @include px2-grid__col();\n            width: calc( 80% - 1rem );\n        }\n        &__col-md-1of6{\n            @include px2-grid__col();\n            width: calc( 16.66% - 1rem );\n        }\n    }\n\n    // 小さい画面(スマートフォンサイズ)\n    @media all and (max-width: 768px) {\n        &__col-sm-1of1{\n            @include px2-grid__col();\n            width: calc( 100% - 1rem );\n        }\n        &__col-sm-1of2{\n            @include px2-grid__col();\n            width: calc( 50% - 1rem );\n        }\n        &__col-sm-1of3{\n            @include px2-grid__col();\n            width: calc( 33.33% - 1rem );\n        }\n        &__col-sm-2of3{\n            @include px2-grid__col();\n            width: calc( 66.66% - 1rem );\n        }\n        &__col-sm-1of4{\n            @include px2-grid__col();\n            width: calc( 25% - 1rem );\n        }\n        &__col-sm-1of5{\n            @include px2-grid__col();\n            width: calc( 20% - 1rem );\n        }\n        &__col-sm-2of5{\n            @include px2-grid__col();\n            width: calc( 40% - 1rem );\n        }\n        &__col-sm-3of5{\n            @include px2-grid__col();\n            width: calc( 60% - 1rem );\n        }\n        &__col-sm-4of5{\n            @include px2-grid__col();\n            width: calc( 80% - 1rem );\n        }\n        &__col-sm-1of6{\n            @include px2-grid__col();\n            width: calc( 16.66% - 1rem );\n        }\n    }\n}","syntax":"scss","file":"_grid.css.scss","wrapper":"<sg-wrapper-content/>","renderMarkup":"<div class=\"px2-grid\">\n    <div class=\"px2-grid__col-1of2\">\n        <p>Column 1</p>\n    </div>\n    <div class=\"px2-grid__col-1of2\">\n        <p>Column 2</p>\n    </div>\n</div>","variables":[],"fileHash":"8a56ff54914d3b899454a1f356e65929"}],"variables":[{"name":"px2-font-family","value":"\"Helvetica Neue\", Arial, \"Hiragino Kaku Gothic ProN\", \"Hiragino Sans\", Meiryo, sans-serif","line":1,"file":"px2style.css.scss","fileHash":"a81ecd80a9a29dd56ef3ea740a0858b7"},{"name":"px2-main-color","value":"#00a0e6","line":2,"file":"px2style.css.scss","fileHash":"a81ecd80a9a29dd56ef3ea740a0858b7"},{"name":"px2-text-color","value":"#333","line":3,"file":"px2style.css.scss","fileHash":"a81ecd80a9a29dd56ef3ea740a0858b7"},{"name":"px2-background-color","value":"#f9f9f9","line":4,"file":"px2style.css.scss","fileHash":"a81ecd80a9a29dd56ef3ea740a0858b7"},{"name":"darkmode-text-color","value":"#ccc","line":1,"file":"_darkmode.css.scss","fileHash":"710b1d27cecff8f2510ce11a8f90ef62"},{"name":"darkmode-background-color","value":"#242424","line":2,"file":"_darkmode.css.scss","fileHash":"710b1d27cecff8f2510ce11a8f90ef62"}],"section":[{"header":"Links","description":"","modifiers":[],"deprecated":false,"experimental":false,"reference":"1","markup":"<a href=\"#\" class=\"px2-link\">Default Link</a>","css":".px2-link{}","syntax":"scss","file":"_links.css.scss","wrapper":"<sg-wrapper-content/>","renderMarkup":"<a href=\"#\" class=\"px2-link\">Default Link</a>","variables":[],"fileHash":"f56cc0786a50f59c2e3cfbec8ac919dc"},{"header":"Bullet Link","description":"","modifiers":[],"deprecated":false,"experimental":false,"reference":"1.1","markup":"<a href=\"#\" class=\"px2-link px2-link--bullet\">Bullet Link</a>\n<div style=\"font-size: 130%;\"><a href=\"#\" class=\"px2-link px2-link--bullet\">Bullet Link</a></div>\n<div style=\"font-size: 160%;\"><a href=\"#\" class=\"px2-link px2-link--bullet\">Bullet Link</a></div>\n<div style=\"font-size: 220%;\"><a href=\"#\" class=\"px2-link px2-link--bullet\">Bullet Link</a></div>\n<a href=\"#\" class=\"px2-a\">Bullet Link</a>","css":".px2-a,\n.px2-link.px2-link--burette, // スペル誤り\n.px2-link.px2-link--bullet{ // 2.0.11 にて修正\n\t&:before{\n\t\tcontent:' ';\n\t\twidth: 0;\n\t\theight: 0;\n\t\tdisplay: inline-block;\n\t\tmargin-right: 0.2em;\n\t\tborder-width: 0.35em 0 0.35em 0.6em;\n\t\tborder-style: solid;\n\t\tborder-color: $px2-main-color; // fallback\n\t\tborder-color: var(--px2-main-color, $px2-main-color);\n\t\tborder-top-color: transparent;\n\t\tborder-bottom-color: transparent;\n\t}\n}","syntax":"scss","file":"_links.css.scss","parentReference":"1","wrapper":"<sg-wrapper-content/>","renderMarkup":"<a href=\"#\" class=\"px2-link px2-link--bullet\">Bullet Link</a>\n<div style=\"font-size: 130%;\"><a href=\"#\" class=\"px2-link px2-link--bullet\">Bullet Link</a></div>\n<div style=\"font-size: 160%;\"><a href=\"#\" class=\"px2-link px2-link--bullet\">Bullet Link</a></div>\n<div style=\"font-size: 220%;\"><a href=\"#\" class=\"px2-link px2-link--bullet\">Bullet Link</a></div>\n<a href=\"#\" class=\"px2-a\">Bullet Link</a>","variables":["px2-main-color","px2-main-color"],"fileHash":"f56cc0786a50f59c2e3cfbec8ac919dc"},{"header":"Open in new window","description":"","modifiers":[],"deprecated":false,"experimental":false,"reference":"1.2","markup":"<p><a href=\"#\"><span class=\"px2-open-in-new-window\">Open in new window</span></a></p>\n<p><a href=\"#\" class=\"px2-a\"><span class=\"px2-open-in-new-window\">Open in new window</span></a></p>","css":".px2-open-in-new-window {\n\t&:after {\n\t\tcontent: '';\n\t\tbackground-image: url(\"links/resources/link.png\");\n\t\twidth: 0.8em;\n\t\theight: 0.8em;\n\t\tdisplay: inline-block;\n\t\tbackground-size: contain;\n\t\tbackground-repeat: no-repeat;\n\t\tmargin-left: 0.3em;\n\t}\n}","syntax":"scss","file":"_links.css.scss","parentReference":"1","wrapper":"<sg-wrapper-content/>","renderMarkup":"<p><a href=\"#\"><span class=\"px2-open-in-new-window\">Open in new window</span></a></p>\n<p><a href=\"#\" class=\"px2-a\"><span class=\"px2-open-in-new-window\">Open in new window</span></a></p>","variables":[],"fileHash":"f56cc0786a50f59c2e3cfbec8ac919dc"},{"header":"Buttons","description":"","modifiers":[],"deprecated":false,"experimental":false,"reference":"2","markup":"<button class=\"px2-btn\">Default Button</button>","css":".px2-btn{\n\tdisplay: inline-block;\n\tborder-radius: 3px;\n\tbackground-color: $px2-background-color; // fallback\n\tbackground-color: var(--px2-background-color, $px2-background-color);\n\tcolor: $px2-text-color; // fallback\n\tcolor: var(--px2-text-color, $px2-text-color);\n\tborder: 1px solid $px2-text-color; // fallback\n\tborder: 1px solid var(--px2-text-color, $px2-text-color);\n\tbox-shadow: 0 2px 0px rgba(0,0,0,0.1);\n\t// text-shadow: 0px 0px 3px rgba(0,0,0,0.1);\n\tpadding: 0.5em 2em;\n\tfont-size:1em;\n\tfont-weight: normal;\n\tfont-family: $px2-font-family;\n\tline-height: 1;\n\ttext-decoration: none;\n\ttext-align: center;\n\tcursor: pointer;\n\tbox-sizing: border-box;\n\talign-items: stretch;\n\ttransition:\n\t\tcolor 0.1s,\n\t\tbackground-color 0.1s,\n\t\ttransform 0.1s\n\t;\n\n\t&:focus,\n\t&:hover{\n\t\ttext-decoration: none;\n\t\tfont-weight: normal;\n\t\tcolor: #666;\n\t\tbackground-color: #f3f3f3;\n\t\t// transform: scale(1.04, 1.04);\n\t}\n\t&:focus{\n\t\tbox-shadow: 0 0 0 .2rem rgba(0,123,255,.25);\n\t}\n\t&:hover{\n\t\tbackground-color: #f0f0f0;\n\t}\n\t&:active{\n\t\tbackground-color: $px2-text-color; // fallback\n\t\tbackground-color: var(--px2-text-color, $px2-text-color);\n\t\tcolor: $px2-background-color; // fallback\n\t\tcolor: var(--px2-background-color, $px2-background-color);\n\t\tbox-shadow: inset 0 3px 15px rgba(0,0,0,0.3);\n\t\ttransform: translateY(1px);\n\t\t// transform: translateY(1px) scale(1.04, 1.04);\n\t}\n}","syntax":"scss","file":"_buttons.css.scss","wrapper":"<sg-wrapper-content/>","renderMarkup":"<button class=\"px2-btn\">Default Button</button>","variables":["px2-background-color","px2-background-color","px2-text-color","px2-text-color","px2-text-color","px2-text-color","px2-font-family","px2-text-color","px2-text-color","px2-background-color","px2-background-color"],"fileHash":"ad93723045811b7adac50e29df1d3b99"},{"header":"Elements","description":"","modifiers":[],"deprecated":false,"experimental":false,"reference":"2.1","markup":"<p><button class=\"px2-btn\">Default Button</button></p>\n<p><input type=\"button\" class=\"px2-btn\" value=\"input type=button\" /></p>\n<p><input type=\"submit\" class=\"px2-btn\" value=\"input type=submit\" /></p>\n<p><a href=\"javascript:;\" class=\"px2-btn\">anchor</a></p>\n<p><label class=\"px2-btn\">label</label></p>","syntax":"scss","file":"_buttons.css.scss","parentReference":"2","wrapper":"<sg-wrapper-content/>","renderMarkup":"<p><button class=\"px2-btn\">Default Button</button></p>\n<p><input type=\"button\" class=\"px2-btn\" value=\"input type=button\" /></p>\n<p><input type=\"submit\" class=\"px2-btn\" value=\"input type=submit\" /></p>\n<p><a href=\"javascript:;\" class=\"px2-btn\">anchor</a></p>\n<p><label class=\"px2-btn\">label</label></p>","fileHash":"ad93723045811b7adac50e29df1d3b99"},{"header":"Intention","description":"","modifiers":[],"deprecated":false,"experimental":false,"reference":"2.2","markup":"<p><button class=\"px2-btn\">Default Button</button></p>\n<p><button class=\"px2-btn px2-btn--primary\">Primary Button</button></p>\n<p><button class=\"px2-btn px2-btn--secondary\">Secondary Button</button></p>\n<p><button class=\"px2-btn px2-btn--danger\">Danger Button</button></p>\n<p><button class=\"px2-btn px2-btn--download\">Download Button</button></p>\n<p><button class=\"px2-btn px2-btn--download px2-btn--block px2-btn--lg\">\n    <strong>Download</strong>\n    <div><small>Pickles 2 @2.0.0-beta.14</small></div>\n    <div><small>for macOS</small></div>\n</button></p>\n<p><button class=\"px2-btn\" disabled>Disabled Default Button</button></p>\n<p><button class=\"px2-btn px2-btn--primary\" disabled>Disabled Primary Button</button></p>\n<p><button class=\"px2-btn px2-btn--secondary\" disabled>Disabled Secondary Button</button></p>\n<p><button class=\"px2-btn px2-btn--danger\" disabled>Disabled Danger Button</button></p>\n<p><button class=\"px2-btn px2-btn--download\" disabled>Disabled Download Button</button></p>","css":".px2-btn{\n\n\t&.px2-btn--primary{\n\t\tborder-color: #00a0e6;\n\t\tbackground-color: #f5fbfe; // rgba(0,160,230,0.05);\n\t\tcolor: #00a0e6;\n\t\t&:focus,\n\t\t&:hover{\n\t\t\tbackground-color: #d9f1fb; // rgba(0,160,230,0.15);\n\t\t}\n\t\t&:hover{\n\t\t\tbackground-color: #ccecfa; // rgba(0,160,230,0.3);\n\t\t}\n\t\t&:active{\n\t\t\tbackground-color: #00a0e6;\n\t\t\tcolor: #fff;\n\t\t}\n\t}\n\t&.px2-btn--secondary{\n\t\tborder-color: $px2-text-color; // fallback\n\t\tborder-color: var(--px2-text-color, $px2-text-color);\n\t\tbackground: $px2-background-color; // fallback\n\t\tbackground: var(--px2-background-color, $px2-background-color);\n\t\tcolor: $px2-text-color; // fallback\n\t\tcolor: var(--px2-text-color, $px2-text-color);\n\t\t&:focus,\n\t\t&:hover{\n\t\t\tbackground-color: #f3f3f3;\n\t\t}\n\t\t&:hover{\n\t\t\tbackground-color: #f0f0f0;\n\t\t}\n\t\t&:active{\n\t\t\tbackground-color: $px2-text-color; // fallback\n\t\t\tbackground-color: var(--px2-text-color, $px2-text-color);\n\t\t\tcolor: $px2-background-color; // fallback\n\t\t\tcolor: var(--px2-background-color, $px2-background-color);\n\t\t}\n\t}\n\t&.px2-btn--danger{\n\t\tborder-color: #e86a60;\n\t\tbackground-color: #fdf8f8; // rgba(232,106,96,0.05);\n\t\tcolor: #e86a60;\n\t\t&:focus,\n\t\t&:hover{\n\t\t\tbackground-color: #fce9e7; // rgba(232,106,96,0.15);\n\t\t}\n\t\t&:hover{\n\t\t\tbackground-color: #fae1df; // rgba(232,106,96,0.3);\n\t\t}\n\t\t&:active{\n\t\t\tbackground-color: #e86a60;\n\t\t\tcolor: #fff;\n\t\t}\n\t}\n\t&.px2-btn--download{\n\t\tborder-color: #4ad64d;\n\t\tbackground-color: #f7fcf7; // rgba(74,214,77,0.05);\n\t\tcolor: #4ad64d;\n\t\t&:focus,\n\t\t&:hover{\n\t\t\tbackground-color: #e4f9e4; // rgba(74,214,77,0.15);\n\t\t}\n\t\t&:hover{\n\t\t\tbackground-color: #dbf7db; // rgba(74,214,77,0.3);\n\t\t}\n\t\t&:active{\n\t\t\tbackground-color: #4ad64d;\n\t\t\tcolor: #fff;\n\t\t}\n\t}\n\n\t&[disabled]{\n\t\tborder-color: #ddd;\n\t\tbackground-color: rgba(153,153,153,0.05);\n\t\tcolor: #ddd;\n\t\tcursor: default;\n\t\ttransform: none;\n\t\t&:focus,\n\t\t&:hover,\n\t\t&:active{\n\t\t\tborder-color: #ddd;\n\t\t\tbackground-color: rgba(153,153,153,0.05);\n\t\t\tcolor: #ddd;\n\t\t\tcursor: default;\n\t\t\tbox-shadow: 0 2px 0px rgba(0,0,0,0.1);\n\t\t\ttransform: none;\n\t\t}\n\t}\n}","syntax":"scss","file":"_buttons.css.scss","parentReference":"2","wrapper":"<sg-wrapper-content/>","renderMarkup":"<p><button class=\"px2-btn\">Default Button</button></p>\n<p><button class=\"px2-btn px2-btn--primary\">Primary Button</button></p>\n<p><button class=\"px2-btn px2-btn--secondary\">Secondary Button</button></p>\n<p><button class=\"px2-btn px2-btn--danger\">Danger Button</button></p>\n<p><button class=\"px2-btn px2-btn--download\">Download Button</button></p>\n<p><button class=\"px2-btn px2-btn--download px2-btn--block px2-btn--lg\">\n    <strong>Download</strong>\n    <div><small>Pickles 2 @2.0.0-beta.14</small></div>\n    <div><small>for macOS</small></div>\n</button></p>\n<p><button class=\"px2-btn\" disabled>Disabled Default Button</button></p>\n<p><button class=\"px2-btn px2-btn--primary\" disabled>Disabled Primary Button</button></p>\n<p><button class=\"px2-btn px2-btn--secondary\" disabled>Disabled Secondary Button</button></p>\n<p><button class=\"px2-btn px2-btn--danger\" disabled>Disabled Danger Button</button></p>\n<p><button class=\"px2-btn px2-btn--download\" disabled>Disabled Download Button</button></p>","variables":["px2-text-color","px2-text-color","px2-background-color","px2-background-color","px2-text-color","px2-text-color","px2-text-color","px2-text-color","px2-background-color","px2-background-color"],"fileHash":"ad93723045811b7adac50e29df1d3b99"},{"header":"Toggle ON","description":"","modifiers":[],"deprecated":false,"experimental":false,"reference":"2.3","markup":"<p><button class=\"px2-btn px2-btn--toggle-on\">Default Button</button></p>\n<p><button class=\"px2-btn px2-btn--primary px2-btn--toggle-on\">Primary Button</button></p>\n<p><button class=\"px2-btn px2-btn--secondary px2-btn--toggle-on\">Secondary Button</button></p>\n<p><button class=\"px2-btn px2-btn--danger px2-btn--toggle-on\">Danger Button</button></p>\n<p><button class=\"px2-btn px2-btn--download px2-btn--toggle-on\">Download Button</button></p>\n<hr />\n<p><button class=\"px2-btn px2-btn--toggle-on\" disabled>Default Button</button></p>\n<p><button class=\"px2-btn px2-btn--primary px2-btn--toggle-on\" disabled>Primary Button</button></p>\n<p><button class=\"px2-btn px2-btn--secondary px2-btn--toggle-on\" disabled>Secondary Button</button></p>\n<p><button class=\"px2-btn px2-btn--danger px2-btn--toggle-on\" disabled>Danger Button</button></p>\n<p><button class=\"px2-btn px2-btn--download px2-btn--toggle-on\" disabled>Download Button</button></p>","css":".px2-btn{\n\t&--toggle-on{\n\t\tbox-shadow: inset 0 3px 15px rgba(0,0,0,0.15);\n\t\ttransform: translateY(1px);\n\t\t// transform: translateY(1px) scale(1.04, 1.04);\n\n\t\t&[disabled]{\n\t\t\tbox-shadow: inset 0 3px 15px rgba(0,0,0,0.15);\n\t\t\ttransform: translateY(1px);\n\t\t\t&:focus,\n\t\t\t&:hover,\n\t\t\t&:active{\n\t\t\t\tbox-shadow: inset 0 3px 15px rgba(0,0,0,0.15);\n\t\t\t\ttransform: translateY(1px);\n\t\t\t}\n\t\t}\n\t}\n}","syntax":"scss","file":"_buttons.css.scss","parentReference":"2","wrapper":"<sg-wrapper-content/>","renderMarkup":"<p><button class=\"px2-btn px2-btn--toggle-on\">Default Button</button></p>\n<p><button class=\"px2-btn px2-btn--primary px2-btn--toggle-on\">Primary Button</button></p>\n<p><button class=\"px2-btn px2-btn--secondary px2-btn--toggle-on\">Secondary Button</button></p>\n<p><button class=\"px2-btn px2-btn--danger px2-btn--toggle-on\">Danger Button</button></p>\n<p><button class=\"px2-btn px2-btn--download px2-btn--toggle-on\">Download Button</button></p>\n<hr />\n<p><button class=\"px2-btn px2-btn--toggle-on\" disabled>Default Button</button></p>\n<p><button class=\"px2-btn px2-btn--primary px2-btn--toggle-on\" disabled>Primary Button</button></p>\n<p><button class=\"px2-btn px2-btn--secondary px2-btn--toggle-on\" disabled>Secondary Button</button></p>\n<p><button class=\"px2-btn px2-btn--danger px2-btn--toggle-on\" disabled>Danger Button</button></p>\n<p><button class=\"px2-btn px2-btn--download px2-btn--toggle-on\" disabled>Download Button</button></p>","variables":[],"fileHash":"ad93723045811b7adac50e29df1d3b99"},{"header":"Sizing","description":"","modifiers":[],"deprecated":false,"experimental":false,"reference":"2.4","markup":"<p><button class=\"px2-btn px2-btn--sm\">Default Button</button></p>\n<p><button class=\"px2-btn\">Default Button</button></p>\n<p><button class=\"px2-btn px2-btn--lg\">Default Button</button></p>\n<p><button class=\"px2-btn px2-btn--block px2-btn--sm\">Default Button</button></p>\n<p><button class=\"px2-btn px2-btn--block\">Default Button</button></p>\n<p><button class=\"px2-btn px2-btn--block px2-btn--lg\">Default Button</button></p>","css":".px2-btn{\n\n\t&--sm{\n\t\tfont-size:0.8em;\n\t}\n\t&--lg{\n\t\tfont-size:1.2em;\n\t}\n\t&--block{\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t}\n\n}","syntax":"scss","file":"_buttons.css.scss","parentReference":"2","wrapper":"<sg-wrapper-content/>","renderMarkup":"<p><button class=\"px2-btn px2-btn--sm\">Default Button</button></p>\n<p><button class=\"px2-btn\">Default Button</button></p>\n<p><button class=\"px2-btn px2-btn--lg\">Default Button</button></p>\n<p><button class=\"px2-btn px2-btn--block px2-btn--sm\">Default Button</button></p>\n<p><button class=\"px2-btn px2-btn--block\">Default Button</button></p>\n<p><button class=\"px2-btn px2-btn--block px2-btn--lg\">Default Button</button></p>","variables":[],"fileHash":"ad93723045811b7adac50e29df1d3b99"},{"header":"Lists","description":"","modifiers":[],"deprecated":false,"experimental":false,"reference":"3","markup":"<ul class=\"px2-list\">\n\t<li>list item 1</li>\n\t<li>list item 2</li>\n\t<li>list item 3</li>\n</ul>","css":".px2-list{\n\tpadding: 0 0 0 40px;\n\tli{\n\t\tlist-style-type: disc;\n\t}\n}","syntax":"scss","file":"_lists.css.scss","wrapper":"<sg-wrapper-content/>","renderMarkup":"<ul class=\"px2-list\">\n\t<li>list item 1</li>\n\t<li>list item 2</li>\n\t<li>list item 3</li>\n</ul>","variables":[],"fileHash":"be5f556e47f56c58d06017d31590f0c2"},{"header":"Horizontal List","description":"","modifiers":[],"deprecated":false,"experimental":false,"reference":"3.1","markup":"<ul class=\"px2-horizontal-list\">\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 1</a></li>\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 2</a></li>\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 3</a></li>\n</ul>","css":".px2-horizontal-list,\n.px2-horizontal-list>ul{\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tmargin-top: 1em;\n\tmargin-bottom: 1em;\n\tpadding-left: 0;\n\n\t>ul>li ,\n\t>li {\n\t\tlist-style-type: none;\n\t\tpadding-left: 0;\n\t\tpadding-right: 1em;\n\t\t>p{\n\t\t\tmargin: 0;\n\t\t}\n\t}\n}","syntax":"scss","file":"_lists.css.scss","parentReference":"3","wrapper":"<sg-wrapper-content/>","renderMarkup":"<ul class=\"px2-horizontal-list\">\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 1</a></li>\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 2</a></li>\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 3</a></li>\n</ul>","variables":[],"fileHash":"be5f556e47f56c58d06017d31590f0c2"},{"header":"Horizontal List aligning","description":"","modifiers":[],"deprecated":false,"experimental":false,"reference":"3.1.1","markup":"<ul class=\"px2-horizontal-list px2-horizontal-list--left\">\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 1</a></li>\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 2</a></li>\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 3</a></li>\n</ul>\n<ul class=\"px2-horizontal-list px2-horizontal-list--center\">\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 1</a></li>\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 2</a></li>\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 3</a></li>\n</ul>\n<ul class=\"px2-horizontal-list px2-horizontal-list--right\">\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 1</a></li>\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 2</a></li>\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 3</a></li>\n</ul>","css":".px2-horizontal-list{\n\t&--left{\n\t\tjustify-content: flex-start;\n\t}\n\t&--center{\n\t\tjustify-content: center;\n\t}\n\t&--right{\n\t\tjustify-content: flex-end;\n\t}\n}","syntax":"scss","file":"_lists.css.scss","parentReference":"3.1","wrapper":"<sg-wrapper-content/>","renderMarkup":"<ul class=\"px2-horizontal-list px2-horizontal-list--left\">\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 1</a></li>\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 2</a></li>\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 3</a></li>\n</ul>\n<ul class=\"px2-horizontal-list px2-horizontal-list--center\">\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 1</a></li>\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 2</a></li>\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 3</a></li>\n</ul>\n<ul class=\"px2-horizontal-list px2-horizontal-list--right\">\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 1</a></li>\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 2</a></li>\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 3</a></li>\n</ul>","variables":[],"fileHash":"be5f556e47f56c58d06017d31590f0c2"},{"header":"Vertical List","description":"","modifiers":[],"deprecated":false,"experimental":false,"reference":"3.2","markup":"<ul class=\"px2-vertical-list\">\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 1</a></li>\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 2</a></li>\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 3</a></li>\n</ul>","css":".px2-vertical-list,\n.px2-vertical-list>ul{\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tflex-direction: column;\n\tmargin-top: 0.2em;\n\tmargin-bottom: 0.2em;\n\tpadding-left: 0;\n\n\t>ul>li ,\n\t>li {\n\t\tlist-style-type: none;\n\t\tpadding-left: 0;\n\t\t>p{\n\t\t\tmargin: 0;\n\t\t}\n\t}\n}","syntax":"scss","file":"_lists.css.scss","parentReference":"3","wrapper":"<sg-wrapper-content/>","renderMarkup":"<ul class=\"px2-vertical-list\">\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 1</a></li>\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 2</a></li>\n\t<li><a href=\"#\" class=\"px2-link px2-link--burette\">list item 3</a></li>\n</ul>","variables":[],"fileHash":"be5f556e47f56c58d06017d31590f0c2"},{"header":"Ordered Lists","description":"","modifiers":[],"deprecated":false,"experimental":false,"reference":"3.3","markup":"<ol class=\"px2-ordered-list\">\n\t<li>list item 1</li>\n\t<li>list item 2</li>\n\t<li>list item 3</li>\n</ol>\n<ol class=\"px2-ordered-list\" start=\"4\">\n\t<li>list item 4</li>\n\t<li>list item 5</li>\n\t<li>list item 6</li>\n</ol>","css":".px2-ordered-list{\n\tpadding: 0 0 0 40px;\n\tli{\n\t\tlist-style-type: decimal;\n\t}\n}","syntax":"scss","file":"_lists.css.scss","parentReference":"3","wrapper":"<sg-wrapper-content/>","renderMarkup":"<ol class=\"px2-ordered-list\">\n\t<li>list item 1</li>\n\t<li>list item 2</li>\n\t<li>list item 3</li>\n</ol>\n<ol class=\"px2-ordered-list\" start=\"4\">\n\t<li>list item 4</li>\n\t<li>list item 5</li>\n\t<li>list item 6</li>\n</ol>","variables":[],"fileHash":"be5f556e47f56c58d06017d31590f0c2"},{"header":"Note Lists","description":"","modifiers":[],"deprecated":false,"experimental":false,"reference":"3.4","markup":"<ul class=\"px2-note-list\">\n\t<li>list item 1</li>\n\t<li>list item 2</li>\n\t<li>list item 3</li>\n</ul>","css":".px2-note-list,\n.px2-note-list>ul{\n\tmargin-top: 1em;\n\tmargin-bottom: 1em;\n\tpadding-left: 1.5em;\n\n\t>ul>li,\n\t>li {\n\t\tlist-style-type: none;\n\t\tcolor: #999;\n\t\tfont-size: 86%;\n\t\tposition: relative;\n\t\t&::before{\n\t\t\tcontent: \"※\";\n\t\t\tposition: absolute;\n\t\t\tleft: -1.5em;\n\t\t}\n\t}\n}","syntax":"scss","file":"_lists.css.scss","parentReference":"3","wrapper":"<sg-wrapper-content/>","renderMarkup":"<ul class=\"px2-note-list\">\n\t<li>list item 1</li>\n\t<li>list item 2</li>\n\t<li>list item 3</li>\n</ul>","variables":[],"fileHash":"be5f556e47f56c58d06017d31590f0c2"},{"header":"Tables","description":"","modifiers":[],"deprecated":false,"experimental":false,"reference":"4","markup":"<table class=\"px2-table\">\n    <thead>\n        <tr>\n            <th>head1</th>\n            <th>head2</th>\n            <th>head3</th>\n            <th>head4</th>\n        </tr>\n    </thead>\n    <tfoot>\n        <tr>\n            <th>foot1</th>\n            <th>foot2</th>\n            <th>foot3</th>\n            <th>foot4</th>\n        </tr>\n    </tfoot>\n    <tbody>\n        <tr>\n            <th>th</th>\n            <td>td2</td>\n            <td>td3</td>\n            <td>td4</td>\n        </tr>\n    </tbody>\n</table>","css":".px2-table{\n\tborder: none;\n\tborder-collapse: collapse;\n\ttext-align: left;\n\n\tth,\n\ttd {\n\t\tvertical-align: top;\n\t\tborder: 1px solid #999999;\n\t\tbackground: $px2-background-color; // fallback\n\t\tbackground: var(--px2-background-color, $px2-background-color);\n\t\tpadding: 10px;\n\t}\n\n\tth {\n\t\tbackground: #e7e7e7;\n\t}\n\n\tthead th,\n\ttfoot th {\n\t\tbackground: #d9d9d9;\n\t\ttext-align: center;\n\t}\n\n\tthead td,\n\ttfoot td {\n\t\tbackground: #eeeeee;\n\t}\n}","syntax":"scss","file":"_tables.css.scss","wrapper":"<sg-wrapper-content/>","renderMarkup":"<table class=\"px2-table\">\n    <thead>\n        <tr>\n            <th>head1</th>\n            <th>head2</th>\n            <th>head3</th>\n            <th>head4</th>\n        </tr>\n    </thead>\n    <tfoot>\n        <tr>\n            <th>foot1</th>\n            <th>foot2</th>\n            <th>foot3</th>\n            <th>foot4</th>\n        </tr>\n    </tfoot>\n    <tbody>\n        <tr>\n            <th>th</th>\n            <td>td2</td>\n            <td>td3</td>\n            <td>td4</td>\n        </tr>\n    </tbody>\n</table>","variables":["px2-background-color","px2-background-color"],"fileHash":"313412c369d2afe45497cd16798fa917"},{"header":"Notice","description":"<p class=\"sg\">&#x304A;&#x77E5;&#x3089;&#x305B;&#x3002;</p>\n","modifiers":[],"deprecated":false,"experimental":false,"reference":"5","markup":null,"syntax":"scss","file":"_notice.css.scss","wrapper":"<sg-wrapper-content/>","fileHash":"6b7aec9a77ca6ef98076e93d97de0057"},{"header":"Notice","description":"<p class=\"sg\">&#x5404;&#x7A2E;&#x306E;&#x304A;&#x77E5;&#x3089;&#x305B;&#x6B04;&#x3092;&#x8868;&#x793A;&#x3057;&#x307E;&#x3059;&#x3002;</p>\n","modifiers":[],"deprecated":false,"experimental":false,"reference":"5.1","markup":"<div class=\"px2-notice\"><p>Notice</p></div>\n<div class=\"px2-notice px2-notice--success\"><p>Success</p></div>\n<div class=\"px2-notice px2-notice--warning\"><p>Warning</p></div>\n<div class=\"px2-notice px2-notice--danger\"><p>Danger</p></div>\n<div class=\"px2-notice px2-notice--info\"><p>Info</p></div>","css":".px2-notice {\n\tmargin-top: 1.5em;\n\tmargin-bottom: 1.5em;\n\tpadding: 0.75em 1.25em;\n\tborder-radius: 0.25em;\n\n\tcolor: #004085;\n\tbackground-color: #cce5ff;\n\tborder: 1px solid #b8daff;\n\n\t*{\n\t\tmargin-top: 0;\n\t\tmargin-bottom: 0;\n\t}\n}\n.px2-notice.px2-notice--success{\n\tcolor: #155724;\n\tbackground-color: #d4edda;\n\tborder-color: #c3e6cb;\n}\n.px2-notice.px2-notice--warning{\n\tcolor: #856404;\n\tbackground-color: #fff3cd;\n\tborder-color: #ffeeba;\n}\n.px2-notice.px2-notice--danger{\n\tcolor: #721c24;\n\tbackground-color: #f8d7da;\n\tborder-color: #f5c6cb;\n}\n.px2-notice.px2-notice--info{\n\tcolor: #0c5460;\n\tbackground-color: #d1ecf1;\n\tborder-color: #bee5eb;\n}","syntax":"scss","file":"_notice.css.scss","parentReference":"5","wrapper":"<sg-wrapper-content/>","renderMarkup":"<div class=\"px2-notice\"><p>Notice</p></div>\n<div class=\"px2-notice px2-notice--success\"><p>Success</p></div>\n<div class=\"px2-notice px2-notice--warning\"><p>Warning</p></div>\n<div class=\"px2-notice px2-notice--danger\"><p>Danger</p></div>\n<div class=\"px2-notice px2-notice--info\"><p>Info</p></div>","variables":[],"fileHash":"6b7aec9a77ca6ef98076e93d97de0057"},{"header":"Flash Message","description":"<p class=\"sg\">Show Flash Message from JavaScript.</p>\n","modifiers":[],"deprecated":false,"experimental":false,"reference":"5.2","markup":"<ul>\n <li><a href=\"javascript:px2style.flashMessage(\n         'Flash Message',\n         function(){\n             console.log('done.');\n         }\n     );\">Show Flash Message.</a></li>\n <li><a href=\"javascript:px2style.flashMessage(\n         {\n             'message':'Flash Message',\n             'type':'success',\n         },\n         function(){\n             console.log('done.');\n         }\n     );\">Show Flash Message -- success.</a></li>\n <li><a href=\"javascript:px2style.flashMessage(\n         {\n             'message':'Flash Message',\n             'type':'warning',\n         },\n         function(){\n             console.log('done.');\n         }\n     );\">Show Flash Message -- warning.</a></li>\n <li><a href=\"javascript:px2style.flashMessage(\n         {\n             'message':'Flash Message',\n             'type':'danger',\n         },\n         function(){\n             console.log('done.');\n         }\n     );\">Show Flash Message -- danger.</a></li>\n <li><a href=\"javascript:px2style.flashMessage(\n         {\n             'message':'Flash Message',\n             'type':'info',\n         },\n         function(){\n             console.log('done.');\n         }\n     );\">Show Flash Message -- info.</a></li>\n</ul>","syntax":"scss","file":"_notice.css.scss","parentReference":"5","wrapper":"<sg-wrapper-content/>","renderMarkup":"<ul>\n <li><a href=\"javascript:px2style.flashMessage(\n         'Flash Message',\n         function(){\n             console.log('done.');\n         }\n     );\">Show Flash Message.</a></li>\n <li><a href=\"javascript:px2style.flashMessage(\n         {\n             'message':'Flash Message',\n             'type':'success',\n         },\n         function(){\n             console.log('done.');\n         }\n     );\">Show Flash Message -- success.</a></li>\n <li><a href=\"javascript:px2style.flashMessage(\n         {\n             'message':'Flash Message',\n             'type':'warning',\n         },\n         function(){\n             console.log('done.');\n         }\n     );\">Show Flash Message -- warning.</a></li>\n <li><a href=\"javascript:px2style.flashMessage(\n         {\n             'message':'Flash Message',\n             'type':'danger',\n         },\n         function(){\n             console.log('done.');\n         }\n     );\">Show Flash Message -- danger.</a></li>\n <li><a href=\"javascript:px2style.flashMessage(\n         {\n             'message':'Flash Message',\n             'type':'info',\n         },\n         function(){\n             console.log('done.');\n         }\n     );\">Show Flash Message -- info.</a></li>\n</ul>","fileHash":"6b7aec9a77ca6ef98076e93d97de0057"},{"header":"Form Elements","description":"<p class=\"sg\">General input elements.</p>\n","modifiers":[],"deprecated":false,"experimental":false,"reference":"6","markup":"<input type=\"text\" name=\"input-text\" value=\"Form Element: text input\" class=\"px2-input\" />\n<button class=\"px2-btn\">OK</button>\n<hr />\n<input type=\"password\" name=\"password\" value=\"password\" class=\"px2-input\" />\n<input type=\"number\" name=\"input-number\" value=\"200\" class=\"px2-input\" />\n<input type=\"search\" name=\"input-search\" value=\"Search Keyword\" class=\"px2-input\" />\n<input type=\"tel\" name=\"input-tel\" value=\"090-0000-0000\" class=\"px2-input\" />\n<input type=\"url\" name=\"input-url\" value=\"https://pickles2.pxt.jp/\" class=\"px2-input\" />\n<input type=\"email\" name=\"input-email\" value=\"pickles2@example.com\" class=\"px2-input\" />\n<input type=\"datetime\" name=\"input-datetime\" value=\"\" class=\"px2-input\" />\n<input type=\"date\" name=\"input-date\" value=\"\" class=\"px2-input\" />\n<input type=\"month\" name=\"input-month\" value=\"\" class=\"px2-input\" />\n<input type=\"week\" name=\"input-week\" value=\"\" class=\"px2-input\" />\n<input type=\"time\" name=\"input-time\" value=\"\" class=\"px2-input\" />\n<input type=\"color\" name=\"input-color\" value=\"\" class=\"px2-input\" />\n<input type=\"file\" name=\"input-file\" value=\"\" class=\"px2-input\" />\n<input type=\"datetime-local\" name=\"input-datetime-local\" value=\"\" class=\"px2-input\" />\n<select name=\"input-select\" class=\"px2-input\"><option value=\"1\">Select Option 1</option></select>\n<hr />\n<textarea name=\"input-textarea\" class=\"px2-input\">Text Area</textarea>\n<hr />\nReadonly:\n<input type=\"text\" name=\"input-text\" value=\"Form Element: text input\" class=\"px2-input\" readonly />\n<hr />\nDisabled:\n<input type=\"text\" name=\"input-text\" value=\"Form Element: text input\" class=\"px2-input\" disabled />\n<hr />\nBlock:\n<p><input type=\"text\" name=\"input-text\" value=\"Form Element: text input\" class=\"px2-input px2-input--block\" /></p>\n<p><textarea name=\"input-text\" class=\"px2-input px2-input--block\">Form Element: text input</textarea></p>\n<p><select name=\"input-select\" class=\"px2-input px2-input--block\"><option value=\"1\">Select Option 1</option></select></p>\n<hr />\nErrored:\n<p><input type=\"text\" name=\"input-text\" value=\"Form Element: text input\" class=\"px2-input px2-input--error\" /></p>\n<p><textarea name=\"input-text\" class=\"px2-input px2-input--error\">Form Element: text input</textarea></p>\n<p><select name=\"input-select\" class=\"px2-input px2-input--error\"><option value=\"1\">Select Option 1</option></select></p>","css":"input[type=text].px2-input,\ninput[type=password].px2-input,\ninput[type=number].px2-input,\ninput[type=search].px2-input,\ninput[type=tel].px2-input,\ninput[type=url].px2-input,\ninput[type=email].px2-input,\ninput[type=datetime].px2-input,\ninput[type=date].px2-input,\ninput[type=month].px2-input,\ninput[type=week].px2-input,\ninput[type=time].px2-input,\ninput[type=color].px2-input,\ninput[type=file].px2-input,\ninput[type=datetime-local].px2-input,\ntextarea.px2-input,\nselect.px2-input{\n    display: inline-block;\n    box-sizing: border-box;\n    width: auto;\n    min-width: 50px;\n    max-width: 100%;\n    padding: .375rem .75rem;\n    font-size: 1em;\n    font-weight: normal;\n    line-height: 1.5;\n    color: $px2-text-color; // fallback\n    color: var(--px2-text-color, $px2-text-color);\n    background-color: $px2-background-color; // fallback\n    background-color: var(--px2-background-color, $px2-background-color);\n    background-clip: padding-box;\n    border: 1px solid #ced4da;\n    border-radius: .25rem;\n    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;\n    &:focus{\n        color: #333;\n        background-color: #fff;\n        border-color: #80bdff;\n        outline: 0;\n        box-shadow: 0 0 0 .2rem rgba(0,123,255,.25);\n    }\n    &[readonly]{\n        background-color: #eee;\n        &:focus{\n            border-color: #ced4da;\n            box-shadow: none;\n        }\n    }\n    &[disabled]{\n        color: #8e959c;\n        background-color: #eee;\n    }\n    &--block{\n        display: block;\n        width: 100%;\n    }\n\n    &--error {\n        border-color: #721c24;\n        color: #721c24;\n        background-color: #f8d7da;\n    }\n}","syntax":"scss","file":"_form.css.scss","wrapper":"<sg-wrapper-content/>","renderMarkup":"<input type=\"text\" name=\"input-text\" value=\"Form Element: text input\" class=\"px2-input\" />\n<button class=\"px2-btn\">OK</button>\n<hr />\n<input type=\"password\" name=\"password\" value=\"password\" class=\"px2-input\" />\n<input type=\"number\" name=\"input-number\" value=\"200\" class=\"px2-input\" />\n<input type=\"search\" name=\"input-search\" value=\"Search Keyword\" class=\"px2-input\" />\n<input type=\"tel\" name=\"input-tel\" value=\"090-0000-0000\" class=\"px2-input\" />\n<input type=\"url\" name=\"input-url\" value=\"https://pickles2.pxt.jp/\" class=\"px2-input\" />\n<input type=\"email\" name=\"input-email\" value=\"pickles2@example.com\" class=\"px2-input\" />\n<input type=\"datetime\" name=\"input-datetime\" value=\"\" class=\"px2-input\" />\n<input type=\"date\" name=\"input-date\" value=\"\" class=\"px2-input\" />\n<input type=\"month\" name=\"input-month\" value=\"\" class=\"px2-input\" />\n<input type=\"week\" name=\"input-week\" value=\"\" class=\"px2-input\" />\n<input type=\"time\" name=\"input-time\" value=\"\" class=\"px2-input\" />\n<input type=\"color\" name=\"input-color\" value=\"\" class=\"px2-input\" />\n<input type=\"file\" name=\"input-file\" value=\"\" class=\"px2-input\" />\n<input type=\"datetime-local\" name=\"input-datetime-local\" value=\"\" class=\"px2-input\" />\n<select name=\"input-select\" class=\"px2-input\"><option value=\"1\">Select Option 1</option></select>\n<hr />\n<textarea name=\"input-textarea\" class=\"px2-input\">Text Area</textarea>\n<hr />\nReadonly:\n<input type=\"text\" name=\"input-text\" value=\"Form Element: text input\" class=\"px2-input\" readonly />\n<hr />\nDisabled:\n<input type=\"text\" name=\"input-text\" value=\"Form Element: text input\" class=\"px2-input\" disabled />\n<hr />\nBlock:\n<p><input type=\"text\" name=\"input-text\" value=\"Form Element: text input\" class=\"px2-input px2-input--block\" /></p>\n<p><textarea name=\"input-text\" class=\"px2-input px2-input--block\">Form Element: text input</textarea></p>\n<p><select name=\"input-select\" class=\"px2-input px2-input--block\"><option value=\"1\">Select Option 1</option></select></p>\n<hr />\nErrored:\n<p><input type=\"text\" name=\"input-text\" value=\"Form Element: text input\" class=\"px2-input px2-input--error\" /></p>\n<p><textarea name=\"input-text\" class=\"px2-input px2-input--error\">Form Element: text input</textarea></p>\n<p><select name=\"input-select\" class=\"px2-input px2-input--error\"><option value=\"1\">Select Option 1</option></select></p>","variables":["px2-text-color","px2-text-color","px2-background-color","px2-background-color"],"fileHash":"8809b33b057b7d8a23d17dbdb4203610"},{"header":"Input Group","description":"","modifiers":[],"deprecated":false,"experimental":false,"reference":"6.1","markup":"<div class=\"px2-p\">\n<div class=\"px2-input-group\">\n<input type=\"text\" name=\"input-text\" value=\"Form Element: text input\" class=\"px2-input\" />\n<button class=\"px2-btn\">OK</button>\n</div>\n</div>\n<div class=\"px2-p\">\n<div class=\"px2-input-group\">\n<input type=\"number\" name=\"input-number\" value=\"Form Element: number input\" class=\"px2-input\" />\n<span class=\"px2-input-group__text\">px</span>\n<button class=\"px2-btn\">OK</button>\n</div>\n</div>\n<div class=\"px2-p\">\n<p>Fluid</p>\n<div class=\"px2-input-group px2-input-group--fluid\">\n<input type=\"number\" name=\"input-number\" value=\"Form Element: number input\" class=\"px2-input\" />\n<span class=\"px2-input-group__text\">px</span>\n<button class=\"px2-btn\">OK</button>\n</div>\n</div>","css":".px2-input-group{\n    display: inline-flex;\n    box-sizing: border-box;\n    border-radius: 0px;\n    max-width: 100%;\n\n    &__text {\n        display: inline-block;\n        box-sizing: border-box;\n        padding: .375rem .75rem;\n        font-size: 1rem;\n        font-weight: normal;\n        line-height: 1.5;\n        color: $px2-text-color; // fallback\n        color: var(--px2-text-color, $px2-text-color);\n        background-color: $px2-background-color; // fallback\n        background-color: var(--px2-background-color, $px2-background-color);\n        border: 1px solid #ced4da;\n    }\n\n    >*,\n    >input.px2-input,\n    >select.px2-input,\n    >textarea.px2-input,\n    >.px2-btn{\n        border-right-width: 0px;\n        flex-grow: 1;\n    }\n\n    >:first-child,\n    >input:first-child.px2-input,\n    >select:first-child.px2-input,\n    >textarea:first-child.px2-input,\n    >:first-child.px2-btn{\n        border-radius: .25rem 0 0 .25rem / .25rem 0 0 .25rem;\n    }\n    >:last-child,\n    >input:last-child.px2-input,\n    >select:last-child.px2-input,\n    >textarea:last-child.px2-input,\n    >:last-child.px2-btn{\n        border-right-width: 1px;\n        border-radius: 0 .25rem .25rem 0 / 0 .25rem .25rem 0;\n    }\n\n    &--fluid {\n        display: flex;\n        width: 100%;\n    }\n\n}","syntax":"scss","file":"_form.css.scss","parentReference":"6","wrapper":"<sg-wrapper-content/>","renderMarkup":"<div class=\"px2-p\">\n<div class=\"px2-input-group\">\n<input type=\"text\" name=\"input-text\" value=\"Form Element: text input\" class=\"px2-input\" />\n<button class=\"px2-btn\">OK</button>\n</div>\n</div>\n<div class=\"px2-p\">\n<div class=\"px2-input-group\">\n<input type=\"number\" name=\"input-number\" value=\"Form Element: number input\" class=\"px2-input\" />\n<span class=\"px2-input-group__text\">px</span>\n<button class=\"px2-btn\">OK</button>\n</div>\n</div>\n<div class=\"px2-p\">\n<p>Fluid</p>\n<div class=\"px2-input-group px2-input-group--fluid\">\n<input type=\"number\" name=\"input-number\" value=\"Form Element: number input\" class=\"px2-input\" />\n<span class=\"px2-input-group__text\">px</span>\n<button class=\"px2-btn\">OK</button>\n</div>\n</div>","variables":["px2-text-color","px2-text-color","px2-background-color","px2-background-color"],"fileHash":"8809b33b057b7d8a23d17dbdb4203610"},{"header":"Form input list","description":"","modifiers":[],"deprecated":false,"experimental":false,"reference":"6.2","markup":"<div class=\"px2-form-input-list\">\n <ul class=\"px2-form-input-list__ul\">\n\t    <li class=\"px2-form-input-list__li\">\n\t        <div class=\"px2-form-input-list__label\"><label for=\"input-text-001\">Input Label</label></div>\n\t        <div class=\"px2-form-input-list__input\"><input type=\"text\" id=\"input-text-001\" name=\"input-text-001\" value=\"Form Element: text input\" class=\"px2-input\" /></div>\n\t    </li>\n\t    <li class=\"px2-form-input-list__li px2-form-input-list__li--required\">\n\t        <div class=\"px2-form-input-list__label\"><label for=\"input-text-002\">Input Label</label></div>\n\t        <div class=\"px2-form-input-list__input\"><input type=\"text\" id=\"input-text-002\" name=\"input-text-002\" value=\"Form Element: text input\" class=\"px2-input\" /></div>\n\t    </li>\n\t    <li class=\"px2-form-input-list__li px2-form-input-list__li--error\">\n\t        <div class=\"px2-form-input-list__label\"><label for=\"input-text-003\">Input Label</label></div>\n\t        <div class=\"px2-form-input-list__input\"><input type=\"text\" id=\"input-text-003\" name=\"input-text-003\" value=\"Form Element: text input\" class=\"px2-input px2-input--error\" /></div>\n\t    </li>\n </ul>\n</div>","css":".px2-form-input-list{\n\tmargin-top: 1em;\n\tmargin-bottom: 1em;\n\n\tul.px2-form-input-list__ul{\n\t\tdisplay: table;\n\t\tborder-collapse: collapse;\n\t\twidth: 100%;\n\t\tbox-sizing: border-box;\n\t\tborder: 1px solid #999999;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\n\t\tli.px2-form-input-list__li{\n\t\t\tdisplay: table-row;\n\t\t\tlist-style-type: none;\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\n\t\t\t.px2-form-input-list__label{\n\t\t\t\tdisplay: table-cell;\n                vertical-align: top;\n\t\t\t\tbackground-color: #e7e7e7;\n\t\t\t\tfont-weight: bold;\n\t\t\t\tpadding: 0.4em 1em;\n\t\t\t\twidth: 30%;\n\t\t\t\tborder: 1px solid #999999;\n\t\t\t}\n\t\t\t.px2-form-input-list__input{\n\t\t\t\tdisplay: table-cell;\n                vertical-align: top;\n                background-color: $px2-background-color; // fallback\n                background-color: var(--px2-background-color, $px2-background-color);\n\t\t\t\tpadding: 0.4em 1em;\n\t\t\t\twidth: 70%;\n\t\t\t\tborder: 1px solid #999999;\n\t\t\t}\n\t\t\tp, .px2-p {\n\t\t\t\tmargin-top: 0.2em;\n\t\t\t\tmargin-bottom: 0.2em;\n\t\t\t}\n\n            &--required {\n                .px2-form-input-list__label{\n                    &::after {\n                        content: \"*\";\n                        color: #e11;\n                        font-weight: bold;\n                        margin: 0 0 0 0.7em;\n                    }\n                }\n                .px2-form-input-list__input{\n                }\n            }\n            &--error {\n                .px2-form-input-list__label{\n                    color: #721c24;\n                    &::before {\n                        content: \"!!!\";\n                        color: #e11;\n                        margin: 0 0.7em 0 0;\n                    }\n                }\n                .px2-form-input-list__input{\n                }\n            }\n\t\t}\n\t}\n\n\t@media all and (max-width: 544px){\n\t\tul.px2-form-input-list__ul{\n\t\t\tdisplay: block;\n\t\t\tborder-bottom: 0 none;\n\n\t\t\tli.px2-form-input-list__li{\n\t\t\t\tdisplay: block;\n\n\t\t\t\t.px2-form-input-list__label{\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\tborder-left: 0 none;\n\t\t\t\t\tborder-top: 0 none;\n\t\t\t\t\tborder-right: 0 none;\n\t\t\t\t\tpadding: 0.4em 1em;\n\t\t\t\t\twidth: auto;\n\t\t\t\t}\n\t\t\t\t.px2-form-input-list__input{\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\tborder-left: 0 none;\n\t\t\t\t\tborder-top: 0 none;\n\t\t\t\t\tborder-right: 0 none;\n\t\t\t\t\tpadding: 0.4em 1em;\n\t\t\t\t\twidth: auto;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}","syntax":"scss","file":"_form.css.scss","parentReference":"6","wrapper":"<sg-wrapper-content/>","renderMarkup":"<div class=\"px2-form-input-list\">\n <ul class=\"px2-form-input-list__ul\">\n\t    <li class=\"px2-form-input-list__li\">\n\t        <div class=\"px2-form-input-list__label\"><label for=\"input-text-001\">Input Label</label></div>\n\t        <div class=\"px2-form-input-list__input\"><input type=\"text\" id=\"input-text-001\" name=\"input-text-001\" value=\"Form Element: text input\" class=\"px2-input\" /></div>\n\t    </li>\n\t    <li class=\"px2-form-input-list__li px2-form-input-list__li--required\">\n\t        <div class=\"px2-form-input-list__label\"><label for=\"input-text-002\">Input Label</label></div>\n\t        <div class=\"px2-form-input-list__input\"><input type=\"text\" id=\"input-text-002\" name=\"input-text-002\" value=\"Form Element: text input\" class=\"px2-input\" /></div>\n\t    </li>\n\t    <li class=\"px2-form-input-list__li px2-form-input-list__li--error\">\n\t        <div class=\"px2-form-input-list__label\"><label for=\"input-text-003\">Input Label</label></div>\n\t        <div class=\"px2-form-input-list__input\"><input type=\"text\" id=\"input-text-003\" name=\"input-text-003\" value=\"Form Element: text input\" class=\"px2-input px2-input--error\" /></div>\n\t    </li>\n </ul>\n</div>","variables":["px2-background-color","px2-background-color"],"fileHash":"8809b33b057b7d8a23d17dbdb4203610"},{"header":"Form submit buttons","description":"","modifiers":[],"deprecated":false,"experimental":false,"reference":"6.3","markup":"<div class=\"px2-form-submit-area\">\n<ul class=\"px2-form-submit-area__btns\">\n<li><button class=\"px2-btn px2-btn--primary\">OK 1</button></li>\n<li><button class=\"px2-btn px2-btn--primary\">OK 2</button></li>\n</ul>\n<ul class=\"px2-form-submit-area__backward-btns\">\n<li><button class=\"px2-btn px2-btn--secondary\">Back 1</button></li>\n<li><button class=\"px2-btn px2-btn--secondary\">Back 2</button></li>\n</ul>\n</div>","css":".px2-form-submit-area {\n    margin: 1em 0;\n    padding: 0;\n    display: flex;\n    flex-direction: row-reverse;\n    justify-content: space-between;\n\n    &__btns,\n    &__backward-btns {\n        display: flex;\n        flex-direction: row-reverse;\n        margin: 0;\n        padding: 0;\n        > li {\n            margin: 0;\n            padding: 0;\n            list-style-type: none;\n        }\n    }\n\n\t@media all and (max-width: 544px){\n        flex-direction: column;\n\n        &__btns,\n        &__backward-btns {\n            flex-direction: column;\n            > li {\n                margin: 0.2em auto;\n            }\n        }\n\n        &__backward-btns {\n            margin-top: 1em;\n            > li {\n                margin: 0.2em auto 0.2em 0;\n            }\n        }\n    }\n}","syntax":"scss","file":"_form.css.scss","parentReference":"6","wrapper":"<sg-wrapper-content/>","renderMarkup":"<div class=\"px2-form-submit-area\">\n<ul class=\"px2-form-submit-area__btns\">\n<li><button class=\"px2-btn px2-btn--primary\">OK 1</button></li>\n<li><button class=\"px2-btn px2-btn--primary\">OK 2</button></li>\n</ul>\n<ul class=\"px2-form-submit-area__backward-btns\">\n<li><button class=\"px2-btn px2-btn--secondary\">Back 1</button></li>\n<li><button class=\"px2-btn px2-btn--secondary\">Back 2</button></li>\n</ul>\n</div>","variables":[],"fileHash":"8809b33b057b7d8a23d17dbdb4203610"},{"header":"Modal Dialog","description":"<p class=\"sg\">Modal Dialog.</p>\n","modifiers":[],"deprecated":false,"experimental":false,"reference":"7","markup":"<div style=\"width: 100%; height: 400px;\">\n<div class=\"px2-modal\">\n <article class=\"px2-modal__dialog\">\n  <div class=\"px2-modal__header\">\n      <h1 class=\"px2-modal__title\">Dialog Title</h1>\n  </div>\n  <div class=\"px2-modal__body\">\n     <p>Dialog Content.</p>\n     <h2>Heading h2</h2>\n     <h3>Heading h3</h3>\n     <h4>Heading h4</h4>\n     <h5>Heading h5</h5>\n     <ul>\n         <li>List 1</li>\n         <li>List 2\n             <ul>\n                 <li>List 2-1</li>\n                 <li>List 2-2</li>\n             </ul>\n         </li>\n         <li>List 3</li>\n     </ul>\n     <ol>\n         <li>List 1</li>\n         <li>List 2\n             <ol>\n                 <li>List 2-1</li>\n                 <li>List 2-2</li>\n             </ol>\n         </li>\n         <li>List 3</li>\n     </ol>\n  </div>\n  <div class=\"px2-modal__footer\">\n     <div class=\"px2-modal__footer-primary\"><ul>\n         <li><button class=\"px2-btn px2-btn--primary\">OK</button></li>\n     </ul></div>\n     <div class=\"px2-modal__footer-secondary\"><ul>\n         <li><button class=\"px2-btn\">Cancel</button></li>\n     </ul></div>\n  </div>\n  <div class=\"px2-modal__close\"><button></button></div>\n </article>\n</div>\n</div>","css":".px2-modal{\n\tbackground: rgba(0,0,0,0.5);\n\tposition: absolute; left: 0; top: 0;\n\twidth: 100%;\n\theight: 100%;\n\tz-index: 1000000;\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tfont-family: $px2-font-family;\n\n\t> form{\n\t\t// display: inline;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t}\n\n\t&__close {\n\t\tposition: absolute;\n\t\tright: -0.5em;\n\t\ttop: -0.5em;\n\t\twidth: 1.4em; height: 1.4em;\n\t\tbutton {\n\t\t\tposition: absolute;\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t\tdisplay: block;\n\t\t\twidth: 100%; height: 100%;\n\t\t\tpadding: 0;\n\t\t\tmargin: 0;\n\t\t\tborder-radius: 50%;\n\t\t\tborder: 1px solid #999;\n\t\t\tbackground-color: #eee;\n\t\t\tcolor: #999;\n\t\t\tcursor: pointer;\n\t\t\t&::before,\n\t\t\t&::after {\n\t\t\t\tcontent: \"\";\n\t\t\t\tborder-bottom: 1px solid #999;\n\t\t\t\twidth: 70%;\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: 50%;\n\t\t\t\tleft: 15%;\n\t\t\t}\n\t\t\t&::before {\n\t\t\t\ttransform: rotate(45deg);\n\t\t\t}\n\t\t\t&::after {\n\t\t\t\ttransform: rotate(-45deg);\n\t\t\t}\n\t\t\t&:hover {\n\t\t\t\tborder: 1px solid #666;\n\t\t\t\tbackground-color: #f9f9f9;\n\t\t\t\t&::before,\n\t\t\t\t&::after {\n\t\t\t\t\tborder-bottom: 1px solid #666;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n    @keyframes px2-modal--initial {\n        0% {\n            transform: translateY(-10px);\n            opacity: 0;\n        }\n        100% {\n            transform: translateY(0);\n            opacity: 1;\n        }\n    }\n\n\t&__dialog{\n\t\tposition: relative;\n\t\ttop: 0; left: 0;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tflex-wrap: nowrap;\n\t\tcolor: $px2-text-color; // fallback\n\t\tcolor: var(--px2-text-color, $px2-text-color);\n\t\tbackground-color: $px2-background-color; // fallback\n\t\tbackground-color: var(--px2-background-color, $px2-background-color);\n\t\tbox-sizing: border-box;\n\t\tpadding: 10px 0;\n\t\tmargin: 20px auto;\n\t\twidth: calc(100% - 40px);\n\t\tmax-width: 520px;\n\t\theight: auto;\n\t\tmax-height: calc(100% - 40px);\n\t\toverflow: visible;\n\t\tborder-radius: 5px;\n\t\tfont-size: medium;\n\t\th1{ font-size: 124%; margin: 0; font-weight: bold; }\n\t\th2{ font-size: 124%; margin: 2em 0 0.5em 0; font-weight: bold; }\n\t\th3{ font-size: 112%; margin: 1em 0 0.5em 0; font-weight: bold; }\n\t\th4{ font-size: 104%; margin: 1em 0 0.5em 0; font-weight: bold; }\n\t\th5{ font-size: 100%; margin: 1em 0 0.5em 0; font-weight: bold; }\n\t\th6{ font-size: 100%; margin: 1em 0 0.5em 0; font-weight: bold; }\n\n\t\tanimation: px2-modal--initial .3s ease 0s 1 normal none running;\n\t\t&--closed {\n\t\t\tanimation: px2-modal--initial .3s ease 0s 1 reverse forwards running;\n\t\t}\n\t}\n\n\t&__header{\n\t\tborder-bottom: 1px solid #999;\n\t\tpadding: 8px 20px;\n\t\tmargin-bottom: 0.5em;\n\t\tbox-shadow: 0 5px 12px -5px rgba(0, 0, 0, .1);\n\t}\n\n\t&__body{\n\t\tposition: relative;\n\t\ttop: 0; left: 0;\n\t\tpadding: 0 20px;\n\t\toverflow: auto;\n\t\tflex-grow: 1;\n\t}\n\n\t&__title{\n\t\tfont-weight: bold;\n\t}\n\n\t&__footer{\n\t\tborder-top: 1px solid #999;\n\t\tmargin: 10px 0 0 0;\n\t\tpadding: 10px 20px 0 20px;\n\t\tdisplay: flex;\n\t\tflex-direction: row-reverse;\n\t\tjustify-content: space-between;\n\n\t\t&-primary>ul,\n\t\t&-secondary>ul,\n\t\t>ul{\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: flex-end;\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t\t>li{\n\t\t\t\tlist-style-type: none;\n\t\t\t\tmargin: 0 0 0 5px;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t}\n\t}\n}","syntax":"scss","file":"_modal.css.scss","wrapper":"<sg-wrapper-content/>","renderMarkup":"<div style=\"width: 100%; height: 400px;\">\n<div class=\"px2-modal\">\n <article class=\"px2-modal__dialog\">\n  <div class=\"px2-modal__header\">\n      <h1 class=\"px2-modal__title\">Dialog Title</h1>\n  </div>\n  <div class=\"px2-modal__body\">\n     <p>Dialog Content.</p>\n     <h2>Heading h2</h2>\n     <h3>Heading h3</h3>\n     <h4>Heading h4</h4>\n     <h5>Heading h5</h5>\n     <ul>\n         <li>List 1</li>\n         <li>List 2\n             <ul>\n                 <li>List 2-1</li>\n                 <li>List 2-2</li>\n             </ul>\n         </li>\n         <li>List 3</li>\n     </ul>\n     <ol>\n         <li>List 1</li>\n         <li>List 2\n             <ol>\n                 <li>List 2-1</li>\n                 <li>List 2-2</li>\n             </ol>\n         </li>\n         <li>List 3</li>\n     </ol>\n  </div>\n  <div class=\"px2-modal__footer\">\n     <div class=\"px2-modal__footer-primary\"><ul>\n         <li><button class=\"px2-btn px2-btn--primary\">OK</button></li>\n     </ul></div>\n     <div class=\"px2-modal__footer-secondary\"><ul>\n         <li><button class=\"px2-btn\">Cancel</button></li>\n     </ul></div>\n  </div>\n  <div class=\"px2-modal__close\"><button></button></div>\n </article>\n</div>\n</div>","variables":["px2-font-family","px2-text-color","px2-text-color","px2-background-color","px2-background-color"],"fileHash":"29d86f81f75421126cd972193a9f9d59"},{"header":"Opening Modal Dialog","description":"<p class=\"sg\">Opening Modal Dialog from JavaScript.</p>\n","modifiers":[],"deprecated":false,"experimental":false,"reference":"7.1","markup":"<ul>\n <li><a href=\"javascript:px2style.modal(\n         {\n             title: 'Sample Modal Dialog.',\n             body: '<div><p>Sample Content.</p><p>Sample Content.</p></div>',\n             buttons: [\n                 '<button class=&quot;px2-btn px2-btn--primary&quot; onclick=&quot;px2style.closeModal();&quot;>OK</button>'\n             ]\n         },\n         function(){\n             console.log('done.');\n         }\n     );\">Open normal modal dialog.</a></li>\n <li><a href=\"javascript:px2style.modal(\n         {\n             title: 'Sample Modal Dialog.',\n             body: '<div><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p></div>',\n             buttons: [\n                 '<button class=&quot;px2-btn px2-btn--primary&quot; onclick=&quot;px2style.closeModal();&quot;>OK</button>'\n             ]\n         },\n         function(){\n             console.log('done.');\n         }\n     );\">Open normal modal dialog contains long contents.</a></li>\n <li><a href=\"javascript:px2style.modal(\n         {\n             title: 'Sample Modal Dialog 700px.',\n             body: '<div><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p></div>',\n             buttons: [\n                 '<button class=&quot;px2-btn px2-btn--primary&quot; onclick=&quot;px2style.closeModal();&quot;>OK</button>'\n             ],\n             width: 700\n         },\n         function(){\n             console.log('done.');\n         }\n     );\">Open normal modal dialog with 700px width.</a></li>\n <li><a href=\"javascript:px2style.modal(\n         {\n             title: 'Sample Form Dialog.',\n             body: '<div><p>Sample Content.</p><p><input type=&quot;text&quot; name=&quot;modal-test&quot; value=&quot;&quot; /></p><p><input type=&quot;text&quot; name=&quot;modal-test&quot; value=&quot;&quot; disabled=&quot;true&quot; /></p><p><button class=&quot;btn-lock&quot; type=&quot;button&quot;>lock</button></p><p>Sample Content.</p></div>',\n             buttons: [\n                 '<button type=&quot;submit&quot; class=&quot;px2-btn px2-btn--primary&quot;>OK</button>'\n             ],\n             form: {\n                 action: 'javascript:alert(\\'form action\\');',\n                 method: 'get',\n                 submit: function(){alert('form submit');px2style.closeModal();}\n             },\n             width: 700\n         },\n         function(modalObj){\n             console.log('done.');\n             modalObj.$modal.find('.btn-lock').on('click',function(){\n                 modalObj.lock();\n                 setTimeout(function(){modalObj.unlock();}, 3000);\n             });\n         }\n     );\">Open normal modal dialog with form.</a></li>\n <li><a href=\"javascript:px2style.modal(\n         {\n             title: 'Sample Form Dialog.',\n             body: '<div><p>Sample Content.</p><p><input type=&quot;text&quot; name=&quot;modal-test&quot; value=&quot;&quot; /></p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p></div>',\n             buttons: [\n                 '<button type=&quot;submit&quot; class=&quot;px2-btn px2-btn--primary&quot;>OK</button>'\n             ],\n             form: {\n                 action: 'javascript:alert(\\'form action\\');',\n                 method: 'get',\n                 submit: function(){alert('form submit');px2style.closeModal();}\n             },\n             width: 700\n         },\n         function(){\n             console.log('done.');\n         }\n     );\">Open normal modal dialog with form contains long contents.</a></li>\n <li><a href=\"javascript:console.log(document.querySelectorAll('div.view-section'));px2style.modal(\n         {\n             title: 'Sample Modal Dialog.',\n             body: '<div><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p></div>',\n             buttons: [\n                 '<button class=&quot;px2-btn px2-btn--primary&quot; onclick=&quot;px2style.closeModal();&quot;>OK</button>'\n             ],\n             target: document.querySelectorAll('div.view-section')[0]\n         },\n         function(){\n             console.log('done.');\n         }\n     );\">Open modal dialog to target DIV element.</a></li>\n <li><a href=\"javascript:px2style.modal(\n         {\n             title: 'Sample Form Dialog.',\n             body: '<div><p>Sample Content. <button type=\\'button\\' onclick=\\''+\n                 'px2style.modal({'+\n                 '    title: &quot;2nd layer&quot;,'+\n                 '    body: &quot;<div><p>Sample Content on 2nd layer.</p></div>&quot;'+\n                 '}, function(){'+\n                 '    console.log(&quot;done2.&quot;);'+\n                 '});'+\n                 '\\'>open new layer</button></p></div>',\n             buttons: [\n                 '<button type=&quot;submit&quot; class=&quot;px2-btn px2-btn--primary&quot; onclick=&quot;px2style.closeModal();&quot;>OK</button>'\n             ],\n             buttonsSecondary: [\n                 document.createElement('button')\n             ],\n             onclose: function(){alert('onclose event');}\n         },\n         function(){\n             console.log('done.');\n         }\n     );\">Open normal modal dialog with secondary button.</a></li>\n</ul>","syntax":"scss","file":"_modal.css.scss","parentReference":"7","wrapper":"<sg-wrapper-content/>","renderMarkup":"<ul>\n <li><a href=\"javascript:px2style.modal(\n         {\n             title: 'Sample Modal Dialog.',\n             body: '<div><p>Sample Content.</p><p>Sample Content.</p></div>',\n             buttons: [\n                 '<button class=&quot;px2-btn px2-btn--primary&quot; onclick=&quot;px2style.closeModal();&quot;>OK</button>'\n             ]\n         },\n         function(){\n             console.log('done.');\n         }\n     );\">Open normal modal dialog.</a></li>\n <li><a href=\"javascript:px2style.modal(\n         {\n             title: 'Sample Modal Dialog.',\n             body: '<div><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p></div>',\n             buttons: [\n                 '<button class=&quot;px2-btn px2-btn--primary&quot; onclick=&quot;px2style.closeModal();&quot;>OK</button>'\n             ]\n         },\n         function(){\n             console.log('done.');\n         }\n     );\">Open normal modal dialog contains long contents.</a></li>\n <li><a href=\"javascript:px2style.modal(\n         {\n             title: 'Sample Modal Dialog 700px.',\n             body: '<div><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p></div>',\n             buttons: [\n                 '<button class=&quot;px2-btn px2-btn--primary&quot; onclick=&quot;px2style.closeModal();&quot;>OK</button>'\n             ],\n             width: 700\n         },\n         function(){\n             console.log('done.');\n         }\n     );\">Open normal modal dialog with 700px width.</a></li>\n <li><a href=\"javascript:px2style.modal(\n         {\n             title: 'Sample Form Dialog.',\n             body: '<div><p>Sample Content.</p><p><input type=&quot;text&quot; name=&quot;modal-test&quot; value=&quot;&quot; /></p><p><input type=&quot;text&quot; name=&quot;modal-test&quot; value=&quot;&quot; disabled=&quot;true&quot; /></p><p><button class=&quot;btn-lock&quot; type=&quot;button&quot;>lock</button></p><p>Sample Content.</p></div>',\n             buttons: [\n                 '<button type=&quot;submit&quot; class=&quot;px2-btn px2-btn--primary&quot;>OK</button>'\n             ],\n             form: {\n                 action: 'javascript:alert(\\'form action\\');',\n                 method: 'get',\n                 submit: function(){alert('form submit');px2style.closeModal();}\n             },\n             width: 700\n         },\n         function(modalObj){\n             console.log('done.');\n             modalObj.$modal.find('.btn-lock').on('click',function(){\n                 modalObj.lock();\n                 setTimeout(function(){modalObj.unlock();}, 3000);\n             });\n         }\n     );\">Open normal modal dialog with form.</a></li>\n <li><a href=\"javascript:px2style.modal(\n         {\n             title: 'Sample Form Dialog.',\n             body: '<div><p>Sample Content.</p><p><input type=&quot;text&quot; name=&quot;modal-test&quot; value=&quot;&quot; /></p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p></div>',\n             buttons: [\n                 '<button type=&quot;submit&quot; class=&quot;px2-btn px2-btn--primary&quot;>OK</button>'\n             ],\n             form: {\n                 action: 'javascript:alert(\\'form action\\');',\n                 method: 'get',\n                 submit: function(){alert('form submit');px2style.closeModal();}\n             },\n             width: 700\n         },\n         function(){\n             console.log('done.');\n         }\n     );\">Open normal modal dialog with form contains long contents.</a></li>\n <li><a href=\"javascript:console.log(document.querySelectorAll('div.view-section'));px2style.modal(\n         {\n             title: 'Sample Modal Dialog.',\n             body: '<div><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p></div>',\n             buttons: [\n                 '<button class=&quot;px2-btn px2-btn--primary&quot; onclick=&quot;px2style.closeModal();&quot;>OK</button>'\n             ],\n             target: document.querySelectorAll('div.view-section')[0]\n         },\n         function(){\n             console.log('done.');\n         }\n     );\">Open modal dialog to target DIV element.</a></li>\n <li><a href=\"javascript:px2style.modal(\n         {\n             title: 'Sample Form Dialog.',\n             body: '<div><p>Sample Content. <button type=\\'button\\' onclick=\\''+\n                 'px2style.modal({'+\n                 '    title: &quot;2nd layer&quot;,'+\n                 '    body: &quot;<div><p>Sample Content on 2nd layer.</p></div>&quot;'+\n                 '}, function(){'+\n                 '    console.log(&quot;done2.&quot;);'+\n                 '});'+\n                 '\\'>open new layer</button></p></div>',\n             buttons: [\n                 '<button type=&quot;submit&quot; class=&quot;px2-btn px2-btn--primary&quot; onclick=&quot;px2style.closeModal();&quot;>OK</button>'\n             ],\n             buttonsSecondary: [\n                 document.createElement('button')\n             ],\n             onclose: function(){alert('onclose event');}\n         },\n         function(){\n             console.log('done.');\n         }\n     );\">Open normal modal dialog with secondary button.</a></li>\n</ul>","fileHash":"29d86f81f75421126cd972193a9f9d59"},{"header":"Header","description":"<p class=\"sg\">&#x30A2;&#x30D7;&#x30EA;&#x30B1;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x30D8;&#x30C3;&#x30C0;&#x30FC;&#x3002;</p>\n","modifiers":[],"deprecated":false,"experimental":false,"reference":"8","markup":null,"syntax":"scss","file":"_header.css.scss","wrapper":"<sg-wrapper-content/>","fileHash":"75190e72ac3917521be093bb25bf0ee7"},{"header":"Standard Header","description":"","modifiers":[],"deprecated":false,"experimental":false,"reference":"8.1","markup":"<header class=\"px2-header\">\n    <div class=\"px2-header__inner\">\n        <div class=\"px2-header__px2logo\">\n            <a href=\"javascript:px2style.header.init({'current':''});\"><img src=\"https://okuden-labo.com/images/5/a/3/d/d/5a3dd3a06d3d74537be8f8a82fd58140f62dfc45-150x150.png\" alt=\"\" /></a>\n        </div>\n        <div class=\"px2-header__block\">\n            <div class=\"px2-header__id\">\n                <span>Pickles 2</span>\n            </div>\n            <div class=\"px2-header__global-menu\">\n                <ul>\n                    <li><a href=\"javascript:px2style.header.init({'current':''});\" data-name=\"\">HOME</a></li>\n                    <li><a href=\"javascript:px2style.header.init({'current':'sitemap'});\" data-name=\"sitemap\">Sitemap</a></li>\n                    <li><a href=\"javascript:px2style.header.init({'current':'theme'});\" data-name=\"theme\">Theme</a></li>\n                    <li><a href=\"javascript:px2style.header.init({'current':'contents'});\" data-name=\"contents\">Contents</a></li>\n                    <li><a href=\"javascript:;\">Profile 1</a>\n                        <ul>\n                            <li><a href=\"javascript:px2style.header.init({'current':'profile1'});\" data-name=\"profile1\">Profile</a></li>\n                            <li><a href=\"javascript:px2style.header.init({'current':'logout1'});\" data-name=\"logout1\">Logout</a></li>\n                        </ul>\n                    </li>\n                    <li><a href=\"javascript:;\">Profile 2</a>\n                        <ul>\n                            <li><a href=\"javascript:px2style.header.init({'current':'profile'2});\" data-name=\"profile2\">Profile</a></li>\n                            <li><a href=\"javascript:px2style.header.init({'current':'logout2'});\" data-name=\"logout2\">Logout</a></li>\n                        </ul>\n                    </li>\n                </ul>\n            </div>\n        </div>\n        <div class=\"px2-header__shoulder-menu\">\n            <button><span class=\"px2-header__hamburger\"></span></button>\n            <ul>\n                <li><a href=\"javascript:px2style.header.init({'current':'menu-a'});\" data-name=\"menu-a\">Menu A</a></li>\n                <li><a href=\"javascript:px2style.header.init({'current':'menu-b'});\" data-name=\"menu-b\">Menu B</a></li>\n                <li><a href=\"javascript:px2style.header.init({'current':'menu-c'});\" data-name=\"menu-c\">Menu C</a></li>\n                <li><a href=\"javascript:;\">Group A</a>\n                    <ul>\n                        <li><a href=\"javascript:px2style.header.init({'current':'menu-a-a'});\" data-name=\"menu-a-a\">Menu A-A</a></li>\n                        <li><a href=\"javascript:px2style.header.init({'current':'menu-a-b'});\" data-name=\"menu-a-b\">Menu A-B</a></li>\n                        <li><a href=\"javascript:px2style.header.init({'current':'menu-a-c'});\" data-name=\"menu-a-c\">Menu A-C</a></li>\n                    </ul>\n                </li>\n                <li><a href=\"javascript:;\">Group B</a>\n                    <ul>\n                        <li><a href=\"javascript:px2style.header.init({'current':'menu-b-a'});\" data-name=\"menu-b-a\">Menu B-A</a></li>\n                        <li><a href=\"javascript:px2style.header.init({'current':'menu-b-b'});\" data-name=\"menu-b-b\">Menu B-B</a></li>\n                        <li><a href=\"javascript:px2style.header.init({'current':'menu-b-c'});\" data-name=\"menu-b-c\">Menu B-C</a></li>\n                    </ul>\n                </li>\n                <li><a href=\"javascript:px2style.header.init({'current':'quit'});\" data-name=\"quit\">Quit</a></li>\n            </ul>\n        </div>\n    </div>\n</header>\n<div class=\"contents\">\n    <h1>Header</h1>\n    <p>Paragraph</p>\n    <p>Do <a href=\"javascript: px2style.header.init();\">px2style.header.init()</a> first for toppage.</p>\n    <p>Do <a href=\"javascript: px2style.header.init({'current':'sitemap'});\">px2style.header.init({'current':appName})</a> first for other pages.</p>\n</div>","css":".px2-header{\n\theight: 45px;\n\tfont-family: $px2-font-family;\n\n\t&__inner{\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t\tbackground-color: #fff;\n\t\tpadding: 0; margin:0;\n\t\tposition: fixed;\n\t\ttop: 0; left: 0;\n\t\twidth: 100%;\n\t\tmin-height: 10px;\n\t\tz-index: 100;\n\t\tborder-bottom: 3px solid $px2-main-color; // fallback\n\t\tborder-bottom: 3px solid var(--px2-main-color, $px2-main-color);\n\t\tbox-shadow: 0 5px 13px rgba(0, 0, 0, 0.1);\n\t\tcolor: #666;\n\t\tline-height: 1;\n\t\tbox-sizing: border-box;\n\t\tborder-bottom-color: $px2-main-color; // fallback\n\t\tborder-bottom-color: var(--px2-main-color, $px2-main-color);\n\t\tcolor: $px2-main-color; // fallback\n\t\tcolor: var(--px2-main-color, $px2-main-color);\n\t}\n\n\ta{\n\t\tcolor: #333;\n\t\ttext-decoration: underline;\n\t\t&:hover{\n\t\t\tcolor: #000;\n\t\t\ttext-decoration: none;\n\t\t}\n\t}\n\n\t// LOGO\n\t&__px2logo{\n\t\ttransition: min-width 0.3s ease-out 0s , width 0.3s ease-out 0s , height 0.3s ease-out 0s;\n\t\tposition: relative;\n\t\tleft: 0px; top: 0px;\n\t\tpadding: 6px;\n\t\tmargin-left: 6px;\n\t\twidth: 45px; height: auto;\n\t\tbox-sizing: border-box;\n\t\ta{\n\t\t\tdisplay: inline-block;\n\t\t\tposition: absolute;\n\t\t\tpadding: 6px;\n\t\t\tbackground-color: #fff;\n\t\t\tleft: 0; top: 0;\n\t\t\ttransition: min-width 0.3s ease-out 0s , width 0.3s ease-out 0s , height 0.3s ease-out 0s;\n\t\t\twidth: 45px; height: 45px;\n\t\t\tbox-sizing: border-box;\n\n\t\t\timg, svg{\n\t\t\t\twidth: 100%; height: 100%;\n\t\t\t}\n\t\t}\n\t} // px2logo\n\n\t&__block{\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t\tflex-grow: 100;\n\t\tjustify-content: space-between;\n\t}\n\n\t&__id{\n\t\twidth: auto;\n\t\tmargin: 0;\n\t\tpadding: 10px 0 0 0;\n\t\tfont-size: 13px;\n\t\ttransition: opacity 0.5s ease 0;\n\t\t*{\n\t\t\tcolor: $px2-main-color; // fallback\n\t\t\tcolor: var(--px2-main-color, $px2-main-color);\n\t\t\tmargin: 0 0.5em;\n\t\t\tdisplay: inline-block;\n\t\t\ttext-shadow: none;\n\t\t\tfont-weight: normal;\n\t\t}\n\t\ta{\n\t\t\tcolor: $px2-main-color; // fallback\n\t\t\tcolor: var(--px2-main-color, $px2-main-color);\n\t\t\ttext-decoration: none;\n\t\t\t&:hover{\n\t\t\t\tcolor: #000;\n\t\t\t\ttext-decoration: none;\n\t\t\t}\n\t\t}\n\t} // id\n\n\t// グローバルメニュー\n\t&__global-menu{\n\t\tpadding: 0;\n\t\tmargin: 0;\n\t\tmargin-right: 35px;\n\t\tmargin-bottom: -3px;\n\t\tline-height: 1;\n\t\tmin-height: calc(12px + 5px + 1em);\n\n\t\tul{\n\t\t\tdisplay:flex;\n\t\t\tflex-wrap: wrap;\n\t\t\tjustify-content: flex-end;\n\t\t\tmargin:0; padding:0;\n\n\t\t\tli{\n\t\t\t\tmargin: 0 1px 0 1px;\n\t\t\t\tpadding: 0;\n\t\t\t\tlist-style-type: none;\n\t\t\t\tfont-size: 13px;\n\t\t\t\tposition: relative;\n\n\t\t\t\ta,span{\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\tmargin:0;\n\t\t\t\t\tpadding:12px 2em 5px;\n\t\t\t\t\tcolor: #666;\n\t\t\t\t\tborder: none;\n\t\t\t\t\tfont-weight: normal;\n\t\t\t\t\ttext-decoration: none;\n\t\t\t\t\tborder-bottom: 3px solid transparent;\n\n\t\t\t\t\t&:hover{\n\t\t\t\t\t\tcolor: $px2-main-color; // fallback\n\t\t\t\t\t\tcolor: var(--px2-main-color, $px2-main-color);\n\t\t\t\t\t}\n\t\t\t\t\t&.current{\n\t\t\t\t\t\tfont-weight: bold;\n\t\t\t\t\t\tborder-bottom-color: rgba(255, 255, 255, 0.85);\n\t\t\t\t\t\tcolor: $px2-main-color; // fallback\n\t\t\t\t\t\tcolor: var(--px2-main-color, $px2-main-color);\n\t\t\t\t\t\tpadding-left: 1em;\n\t\t\t\t\t\t&:before{\n\t\t\t\t\t\t\tcontent: ' ';\n\t\t\t\t\t\t\twidth: 0;\n\t\t\t\t\t\t\theight: 0;\n\t\t\t\t\t\t\tdisplay: inline-block;\n\t\t\t\t\t\t\tmargin-right: 0.5em;\n\t\t\t\t\t\t\tborder-width: 0.3em 0 0.3em 0.5em;\n\t\t\t\t\t\t\tborder-style: solid;\n\t\t\t\t\t\t\tborder-color: $px2-main-color; // fallback\n\t\t\t\t\t\t\tborder-color: var(--px2-main-color, $px2-main-color);\n\t\t\t\t\t\t\tborder-top-color: transparent;\n\t\t\t\t\t\t\tborder-bottom-color: transparent;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tspan{\n\t\t\t\t\tpadding-left: 0;\n\t\t\t\t\tpadding-right: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t\tul{\n\t\t\t\tdisplay: none;\n\t\t\t\tposition: absolute;\n\t\t\t\tright: 0; top: 100%;\n\t\t\t}\n\n\t\t\tli.px2-header__global-menu-group{\n\t\t\t\t>a::after{\n\t\t\t\t\tcontent:' ';\n\t\t\t\t\twidth:0;\n\t\t\t\t\theight:0;\n\t\t\t\t\tdisplay: inline-block;\n\t\t\t\t\tmargin-left: 0.3em;\n\t\t\t\t\tborder-width:0.3em 0 0.3em 0.5em;\n\t\t\t\t\tborder-style:solid;\n\t\t\t\t\tborder-color:#666;\n\t\t\t\t\tborder-top-color:transparent;\n\t\t\t\t\tborder-bottom-color:transparent;\n\t\t\t\t\ttransition: transform 0.2s ease-in;\n\t\t\t\t\ttransform: rotate(90deg);\n\t\t\t\t}\n\t\t\t\tul{\n\t\t\t\t\tpadding: 0;\n\t\t\t\t\tbackground-color: #999;\n\n\t\t\t\t\tli{\n\t\t\t\t\t\tlist-style-type: none;\n\t\t\t\t\t\ta{\n\t\t\t\t\t\t\tfont-weight: normal;\n\t\t\t\t\t\t\tpadding: 0.8em 2em;\n\t\t\t\t\t\t\tcolor: #eee;\n\t\t\t\t\t\t\tbackground-color: #333;\n\t\t\t\t\t\t\ttext-decoration: none;\n\t\t\t\t\t\t\t&:hover{\n\t\t\t\t\t\t\t\tbackground-color: #666;\n\t\t\t\t\t\t\t\tcolor: #fff;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t&.current{\n\t\t\t\t\t\t\t\tfont-weight: bold;\n\t\t\t\t\t\t\t\tpadding: 0.8em 2em;\n\t\t\t\t\t\t\t\tbackground-color: $px2-main-color; // fallback\n\t\t\t\t\t\t\t\tbackground-color: var(--px2-main-color, $px2-main-color);\n\t\t\t\t\t\t\t\tcolor: #fff;\n\t\t\t\t\t\t\t\tborder: none;\n\t\t\t\t\t\t\t\t&:before{\n\t\t\t\t\t\t\t\t\tcontent:none;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\tli.px2-header__global-menu-group-opened {\n\t\t\t\tz-index: 10000;\n\t\t\t}\n\t\t\tli.px2-header__global-menu-group-opened > a::after{\n\t\t\t\ttransform: rotate(90deg);\n\t\t\t}\n\t\t}\n\t} // global-menu\n\n\t// ハンバーガーメニュー\n\t&__shoulder-menu{\n\t\tposition: fixed; top: 0; right: 0;\n\t\tpadding: 0; margin: 0;\n\t\toverflow: hidden;\n\t\t>button{\n\t\t\tbackground: #f9f9f9;\n\t\t\tborder: none;\n\t\t\tborder-radius: 0;\n\t\t\tborder-left: 1px solid $px2-main-color; // fallback\n\t\t\tborder-left: 1px solid var(--px2-main-color, $px2-main-color);\n\t\t\tposition: absolute; top:0; right:0;\n\t\t\theight: 30px;\n\t\t\twidth: 30px;\n\t\t\tbox-sizing: border-box;\n\t\t\tpadding: 0.5em;\n\t\t\tcursor: pointer;\n\t\t}\n\t\t>ul{\n\t\t\tposition: absolute;\n\t\t\ttop: 30px; right: 0;\n\t\t\tdisplay: none;\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t\tlist-style-type: none;\n\t\t\tbackground-color: #333;\n\t\t\tborder: 1px solid #aaa;\n\t\t\toverflow: auto;\n\t\t\twidth:280px;\n\t\t\tmax-width:100%;\n\t\t\topacity: 0.95;\n\n\t\t\tli{\n\t\t\t\tmargin: 0 0 1px 0;\n\t\t\t\tborder-bottom: 1px solid #555;\n\t\t\t\tfont-size: 13px;\n\t\t\t\t&:last-child{\n\t\t\t\t\tborder: none;\n\t\t\t\t}\n\t\t\t\ta{\n\t\t\t\t\tdisplay:block;\n\t\t\t\t\tfont-weight: normal;\n\t\t\t\t\tpadding: 0.8em 2em;\n\t\t\t\t\tcolor: #eee;\n\t\t\t\t\tbackground-color: #333;\n\t\t\t\t\ttext-decoration: none;\n\t\t\t\t\t&:hover{\n\t\t\t\t\t\tbackground-color: #444;\n\t\t\t\t\t\tcolor: #fff;\n\t\t\t\t\t}\n\t\t\t\t\t&.current{\n\t\t\t\t\t\tfont-weight: bold;\n\t\t\t\t\t\tbackground-color: $px2-main-color; // fallback\n\t\t\t\t\t\tbackground-color: var(--px2-main-color, $px2-main-color);\n\t\t\t\t\t\tcolor: #fff;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\tli.px2-header__shoulder-menu-group{\n\t\t\t\t>a::after{\n\t\t\t\t\tcontent:' ';\n\t\t\t\t\twidth:0;\n\t\t\t\t\theight:0;\n\t\t\t\t\tdisplay: inline-block;\n\t\t\t\t\tmargin-left: 1em;\n\t\t\t\t\tborder-width:0.3em 0 0.3em 0.5em;\n\t\t\t\t\tborder-style:solid;\n\t\t\t\t\tborder-color:#eee;\n\t\t\t\t\tborder-top-color:transparent;\n\t\t\t\t\tborder-bottom-color:transparent;\n\t\t\t\t\ttransition: transform 0.2s ease-in;\n\t\t\t\t}\n\t\t\t\tul{\n\t\t\t\t\tpadding: 0 0 0 15px;\n\t\t\t\t\tmargin: 0 0 0 0;\n\t\t\t\t\tdisplay:none;\n\t\t\t\t\tli{\n\t\t\t\t\t\tlist-style-type: none;\n\t\t\t\t\t\ta{\n\t\t\t\t\t\t\tbackground-color: #555;\n\t\t\t\t\t\t\tcolor: #ddd;\n\t\t\t\t\t\t\t&:hover{\n\t\t\t\t\t\t\t\tbackground-color: #666;\n\t\t\t\t\t\t\t\tcolor: #fff;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t&.current{\n\t\t\t\t\t\t\t\tfont-weight: bold;\n\t\t\t\t\t\t\t\tbackground-color: $px2-main-color; // fallback\n\t\t\t\t\t\t\t\tbackground-color: var(--px2-main-color, $px2-main-color);\n\t\t\t\t\t\t\t\tcolor: #fff;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\tli.px2-header__shoulder-menu-group-opened > a::after{\n\t\t\t\ttransform: rotate(90deg);\n\t\t\t}\n\t\t\t>li:last-child{\n\t\t\t\tmargin-bottom: 30px;\n\t\t\t}\n\t\t}\n\t} // shoulder-menu\n\n\t// ハンバーガーメニューアイコン\n\t&__hamburger,\n\t&__hamburger:before,\n\t&__hamburger:after {\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\theight: 2px;\n\t\twidth: calc(100% - 1em);\n\t\tborder-radius: 1px;\n\t\tmargin: 0 auto;\n\t\tbackground: $px2-main-color; // fallback\n\t\tbackground: var(--px2-main-color, $px2-main-color);\n\t\tcontent: '';\n\t}\n\t&__hamburger:before {\n\t\tbottom: -6px;\n\t\twidth: 100%;\n\t}\n\t&__hamburger:after {\n\t\tbottom: 6px;\n\t\twidth: 100%;\n\t}\n\n\t// Small Screen\n\t.px2-header__shoulder-global-menu{\n\t\tdisplay: none;\n\t}\n\t@media all and (max-width: 640px){\n\t\t&__global-menu ul{\n\t\t\tdisplay: none;\n\t\t}\n\t\t.px2-header__shoulder-global-menu{\n\t\t\tdisplay: block;\n\t\t}\n\t\t.px2-header__shoulder-global-menu--last{\n\t\t\tborder-bottom: 5px solid #aaa;\n\t\t}\n\t}\n\n}","syntax":"scss","file":"_header.css.scss","parentReference":"8","wrapper":"<sg-wrapper-content/>","renderMarkup":"<header class=\"px2-header\">\n    <div class=\"px2-header__inner\">\n        <div class=\"px2-header__px2logo\">\n            <a href=\"javascript:px2style.header.init({'current':''});\"><img src=\"https://okuden-labo.com/images/5/a/3/d/d/5a3dd3a06d3d74537be8f8a82fd58140f62dfc45-150x150.png\" alt=\"\" /></a>\n        </div>\n        <div class=\"px2-header__block\">\n            <div class=\"px2-header__id\">\n                <span>Pickles 2</span>\n            </div>\n            <div class=\"px2-header__global-menu\">\n                <ul>\n                    <li><a href=\"javascript:px2style.header.init({'current':''});\" data-name=\"\">HOME</a></li>\n                    <li><a href=\"javascript:px2style.header.init({'current':'sitemap'});\" data-name=\"sitemap\">Sitemap</a></li>\n                    <li><a href=\"javascript:px2style.header.init({'current':'theme'});\" data-name=\"theme\">Theme</a></li>\n                    <li><a href=\"javascript:px2style.header.init({'current':'contents'});\" data-name=\"contents\">Contents</a></li>\n                    <li><a href=\"javascript:;\">Profile 1</a>\n                        <ul>\n                            <li><a href=\"javascript:px2style.header.init({'current':'profile1'});\" data-name=\"profile1\">Profile</a></li>\n                            <li><a href=\"javascript:px2style.header.init({'current':'logout1'});\" data-name=\"logout1\">Logout</a></li>\n                        </ul>\n                    </li>\n                    <li><a href=\"javascript:;\">Profile 2</a>\n                        <ul>\n                            <li><a href=\"javascript:px2style.header.init({'current':'profile'2});\" data-name=\"profile2\">Profile</a></li>\n                            <li><a href=\"javascript:px2style.header.init({'current':'logout2'});\" data-name=\"logout2\">Logout</a></li>\n                        </ul>\n                    </li>\n                </ul>\n            </div>\n        </div>\n        <div class=\"px2-header__shoulder-menu\">\n            <button><span class=\"px2-header__hamburger\"></span></button>\n            <ul>\n                <li><a href=\"javascript:px2style.header.init({'current':'menu-a'});\" data-name=\"menu-a\">Menu A</a></li>\n                <li><a href=\"javascript:px2style.header.init({'current':'menu-b'});\" data-name=\"menu-b\">Menu B</a></li>\n                <li><a href=\"javascript:px2style.header.init({'current':'menu-c'});\" data-name=\"menu-c\">Menu C</a></li>\n                <li><a href=\"javascript:;\">Group A</a>\n                    <ul>\n                        <li><a href=\"javascript:px2style.header.init({'current':'menu-a-a'});\" data-name=\"menu-a-a\">Menu A-A</a></li>\n                        <li><a href=\"javascript:px2style.header.init({'current':'menu-a-b'});\" data-name=\"menu-a-b\">Menu A-B</a></li>\n                        <li><a href=\"javascript:px2style.header.init({'current':'menu-a-c'});\" data-name=\"menu-a-c\">Menu A-C</a></li>\n                    </ul>\n                </li>\n                <li><a href=\"javascript:;\">Group B</a>\n                    <ul>\n                        <li><a href=\"javascript:px2style.header.init({'current':'menu-b-a'});\" data-name=\"menu-b-a\">Menu B-A</a></li>\n                        <li><a href=\"javascript:px2style.header.init({'current':'menu-b-b'});\" data-name=\"menu-b-b\">Menu B-B</a></li>\n                        <li><a href=\"javascript:px2style.header.init({'current':'menu-b-c'});\" data-name=\"menu-b-c\">Menu B-C</a></li>\n                    </ul>\n                </li>\n                <li><a href=\"javascript:px2style.header.init({'current':'quit'});\" data-name=\"quit\">Quit</a></li>\n            </ul>\n        </div>\n    </div>\n</header>\n<div class=\"contents\">\n    <h1>Header</h1>\n    <p>Paragraph</p>\n    <p>Do <a href=\"javascript: px2style.header.init();\">px2style.header.init()</a> first for toppage.</p>\n    <p>Do <a href=\"javascript: px2style.header.init({'current':'sitemap'});\">px2style.header.init({'current':appName})</a> first for other pages.</p>\n</div>","variables":["px2-font-family","px2-main-color","px2-main-color","px2-main-color","px2-main-color","px2-main-color","px2-main-color","px2-main-color","px2-main-color","px2-main-color","px2-main-color","px2-main-color","px2-main-color","px2-main-color","px2-main-color","px2-main-color","px2-main-color","px2-main-color","px2-main-color","px2-main-color","px2-main-color","px2-main-color","px2-main-color","px2-main-color","px2-main-color","px2-main-color","px2-main-color"],"fileHash":"75190e72ac3917521be093bb25bf0ee7"},{"header":"Utilities","description":"<p class=\"sg\">&#x5404;&#x7A2E;&#x30E6;&#x30FC;&#x30C6;&#x30A3;&#x30EA;&#x30C6;&#x30A3;&#x3002;</p>\n","modifiers":[],"deprecated":false,"experimental":false,"reference":"9","markup":null,"syntax":"scss","file":"_utils.css.scss","wrapper":"<sg-wrapper-content/>","fileHash":"c26ee0c4839e88a9b1c96feb5f61d515"},{"header":"Editor Type Badge","description":"<p class=\"sg\">&#x7DE8;&#x96C6;&#x30E2;&#x30FC;&#x30C9;&#x3092;&#x8868;&#x793A;&#x3057;&#x307E;&#x3059;&#x3002;</p>\n","modifiers":[],"deprecated":false,"experimental":false,"reference":"9.1","markup":"<span class=\"px2-editor-type px2-editor-type--not-exists\"></span>\n<span class=\"px2-editor-type px2-editor-type--page-not-exists\"></span>\n<span class=\"px2-editor-type px2-editor-type--alias\"></span>\n<span class=\"px2-editor-type px2-editor-type--html\"></span>\n<span class=\"px2-editor-type px2-editor-type--html-gui\"></span>\n<span class=\"px2-editor-type px2-editor-type--txt\"></span>\n<span class=\"px2-editor-type px2-editor-type--md\"></span>\n<span class=\"px2-editor-type px2-editor-type--jade\"></span>\n<p><code>.px2-editor-type--fullwidth</code> を付加して最大幅にできます。</p>\n<span class=\"px2-editor-type px2-editor-type--html-gui px2-editor-type--fullwidth\"></span>","css":"@mixin px2-editor-type{\n\tdisplay: inline-block;\n\tfont-size: 12px;\n\tfont-family: sans-serif;\n\tline-height: 1;\n\tpadding: 0.4em 1em;\n\ttext-align: center;\n\tcolor: #fff;\n}\n.px2-editor-type{\n\t@include px2-editor-type;\n\n\t&__html, // <- deprecated (古い書き方ですが、後方互換のために残します)\n\t&--html{\n\t\t@include px2-editor-type;\n\t\tbackground-color: #4a8a98;\n\t\t&:before{\n\t\t\tcontent: \"HTML\";\n\t\t}\n\t}\n\t&__html-gui, // <- deprecated (古い書き方ですが、後方互換のために残します)\n\t&--html-gui{\n\t\t@include px2-editor-type;\n\t\tbackground-color: #9f5b75;\n\t\t&:before{\n\t\t\tcontent: \"Block\"; // 以前は GUI と表記していました。2021-08-01 改称\n\t\t}\n\t}\n\t&__txt, // <- deprecated (古い書き方ですが、後方互換のために残します)\n\t&--txt{\n\t\t@include px2-editor-type;\n\t\tbackground-color: #999;\n\t\t&:before{\n\t\t\tcontent: \"TEXT\";\n\t\t}\n\t}\n\t&__md, // <- deprecated (古い書き方ですが、後方互換のために残します)\n\t&--md{\n\t\t@include px2-editor-type;\n\t\tbackground-color: #ae9b59;\n\t\t&:before{\n\t\t\tcontent: \"Markdown\";\n\t\t}\n\t}\n\t&__jade, // <- deprecated (古い書き方ですが、後方互換のために残します)\n\t&--jade{\n\t\t@include px2-editor-type;\n\t\tbackground-color: #999;\n\t\t&:before{\n\t\t\tcontent: \"Jade\";\n\t\t}\n\t}\n\t&__not-exists, // <- deprecated (古い書き方ですが、後方互換のために残します)\n\t&--not-exists{\n\t\t@include px2-editor-type;\n\t\tbackground-color: #c3c3c3;\n\t\t&:before{\n\t\t\tcontent: \"未作成\";\n\t\t}\n\t}\n\t&__page-not-exists, // <- deprecated (古い書き方ですが、後方互換のために残します)\n\t&--page-not-exists{\n\t\t@include px2-editor-type;\n\t\tbackground-color: #c3c3c3;\n\t\t&:before{\n\t\t\tcontent: \"ページ未作成\";\n\t\t}\n\t}\n\t&__alias, // <- deprecated (古い書き方ですが、後方互換のために残します)\n\t&--alias{\n\t\t@include px2-editor-type;\n\t\tbackground-color: #c3c3c3;\n\t\t&:before{\n\t\t\tcontent: \"ALIAS\";\n\t\t}\n\t}\n\t&--fullwidth{\n\t\twidth: auto;\n\t\tdisplay: block;\n\t\tfloat:none;\n\t}\n}","syntax":"scss","file":"_utils.css.scss","parentReference":"9","wrapper":"<sg-wrapper-content/>","renderMarkup":"<span class=\"px2-editor-type px2-editor-type--not-exists\"></span>\n<span class=\"px2-editor-type px2-editor-type--page-not-exists\"></span>\n<span class=\"px2-editor-type px2-editor-type--alias\"></span>\n<span class=\"px2-editor-type px2-editor-type--html\"></span>\n<span class=\"px2-editor-type px2-editor-type--html-gui\"></span>\n<span class=\"px2-editor-type px2-editor-type--txt\"></span>\n<span class=\"px2-editor-type px2-editor-type--md\"></span>\n<span class=\"px2-editor-type px2-editor-type--jade\"></span>\n<p><code>.px2-editor-type--fullwidth</code> を付加して最大幅にできます。</p>\n<span class=\"px2-editor-type px2-editor-type--html-gui px2-editor-type--fullwidth\"></span>","variables":[],"fileHash":"c26ee0c4839e88a9b1c96feb5f61d515"},{"header":"Loading","description":"<p class=\"sg\">Thanks: <a href=\"https://github.com/ConnorAtherton/loaders.css\" class=\"sg\">https://github.com/ConnorAtherton/loaders.css</a></p>\n<p class=\"sg\"><a href=\"javascript:loadingDEMO();\" class=\"sg\">loadingDEMO</a></p>\n<script>\nfunction loadingDEMO(){\n    px2style.loading(); // Display Loading animation.\n    px2style.loadingMessage('Loading Message 1...'); // Update Loading message.\n    setTimeout(function(){\n        px2style.loadingMessage('Loading Message 2...'); // Update Loading message.\n        setTimeout(function(){\n            px2style.closeLoading(); // Remove Loading animation.\n        }, 5000);\n    }, 5000);\n}\n</script>","modifiers":[],"deprecated":false,"experimental":false,"reference":"9.2","markup":"<div class=\"px2-loading\"></div>","css":"@keyframes px2-loading {\n\t0% {\n\t\ttransform: scale(0.0);\n\t}\n\t100% {\n\t\ttransform: scale(1.0);\n\t\topacity: 0;\n\t}\n}\n\n.px2-loading{\n\tclear: both;\n\tfloat: none;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-content: center;\n\ttext-align:center;\n\tpadding:80px;\n\tz-index: 1010000;\n\n\t&::before{\n\t\tdisplay: block;\n\t\tcontent: \"\";\n\n\t\tbackground-color: $px2-main-color; // fallback\n\t\tbackground-color: var(--px2-main-color, $px2-main-color);\n\t\twidth: 15px;\n\t\theight: 15px;\n\t\tborder-radius: 100%;\n\t\tmargin: 2px;\n\t\tanimation-fill-mode: both;\n\n\t\tdisplay: inline-block;\n\t\theight: 60px;\n\t\twidth: 60px;\n\t\tanimation: px2-loading 1s 0s ease-in-out infinite;\n\n\t}\n}","syntax":"scss","file":"_utils.css.scss","parentReference":"9","wrapper":"<sg-wrapper-content/>","renderMarkup":"<div class=\"px2-loading\"></div>","variables":["px2-main-color","px2-main-color"],"fileHash":"c26ee0c4839e88a9b1c96feb5f61d515"},{"header":"Simple Document","description":"","modifiers":[],"deprecated":false,"experimental":false,"reference":"9.3","markup":"<div class=\"px2-document\">\n\t<h1>Header 1</h1>\n\t<p>\n\t\t標準的なドキュメントのための要素を記述します。<br />\n\t\tMarkdown などで描画された標準的なHTML要素によって構成されたドキュメントに、標準的なスタイルを適用します。<br />\n\t</p>\n\t<h2>Header 2</h2>\n\t<ul>\n\t\t<li>List Item 1</li>\n\t\t<li>List Item 2\n\t\t\t<ul>\n\t\t\t\t<li>List Item 1</li>\n\t\t\t\t<li>List Item 2\n\t\t\t\t</li>\n\t\t\t\t<li>List Item 3</li>\n\t\t\t</ul>\n\t\t</li>\n\t\t<li>List Item 3\n\t\t\t<ol>\n\t\t\t\t<li>List Item 1</li>\n\t\t\t\t<li>List Item 2\n\t\t\t\t</li>\n\t\t\t\t<li>List Item 3</li>\n\t\t\t</ol>\n\t\t</li>\n\t</ul>\n\t<h3>Header 3</h3>\n\t<h4>Header 4</h4>\n\t<h5>Header 5</h5>\n\t<h6>Header 6</h6>\n\t<ol>\n\t\t<li>List Item 1</li>\n\t\t<li>List Item 2\n\t\t\t<ol>\n\t\t\t\t<li>List Item 1</li>\n\t\t\t\t<li>List Item 2\n\t\t\t\t</li>\n\t\t\t\t<li>List Item 3</li>\n\t\t\t</ol>\n\t\t</li>\n\t\t<li>List Item 3\n\t\t\t<ul>\n\t\t\t\t<li>List Item 1</li>\n\t\t\t\t<li>List Item 2\n\t\t\t\t</li>\n\t\t\t\t<li>List Item 3</li>\n\t\t\t</ul>\n\t\t</li>\n\t</ol>\n\t<div class=\"px2-p\">\n\t\t<table class=\"px2-table\">\n\t\t\t<tbody>\n\t\t\t\t<tr>\n\t\t\t\t\t<th>th</th>\n\t\t\t\t\t<td>td</td>\n\t\t\t\t</tr>\n\t\t\t</tbody>\n\t\t</table>\n\t</div>\n\t<p class=\"px2-p\">Slim Paragraph.</p>\n</div>","css":".px2-document{\n\tfont-size: medium;\n\tline-height: 1.5;\n\n\t// paragraph\n\tp{\n\t\tmargin-top: 1em;\n\t\tmargin-bottom: 1em;\n\t}\n\n\t// headers\n\th1{\n\t\tfont-weight:bold;\n\t\tmargin-top: 2em;\n\t\tmargin-bottom: 0.5em;\n\t}\n\th2, h3, h4, h5, h6{\n\t\tfont-weight:bold;\n\t\tmargin-top: 1.5em;\n\t\tmargin-bottom: 0.5em;\n\t}\n\th1{font-size: 240%;}\n\th2{font-size: 180%;}\n\th3{font-size: 160%;}\n\th4{font-size: 130%;}\n\th5{font-size: 120%;}\n\th6{font-size: 110%;}\n\n\t// lists\n\tul, ol {\n\t\tdisplay: block;\n\t\tmargin-top: 1em;\n\t\tmargin-bottom: 1em;\n\t\tpadding-left: 40px;\n\t\tul, ol {\n\t\t\tmargin-top: 0;\n\t\t\tmargin-bottom: 0;\n\t\t}\n\t}\n}","syntax":"scss","file":"_utils.css.scss","parentReference":"9","wrapper":"<sg-wrapper-content/>","renderMarkup":"<div class=\"px2-document\">\n\t<h1>Header 1</h1>\n\t<p>\n\t\t標準的なドキュメントのための要素を記述します。<br />\n\t\tMarkdown などで描画された標準的なHTML要素によって構成されたドキュメントに、標準的なスタイルを適用します。<br />\n\t</p>\n\t<h2>Header 2</h2>\n\t<ul>\n\t\t<li>List Item 1</li>\n\t\t<li>List Item 2\n\t\t\t<ul>\n\t\t\t\t<li>List Item 1</li>\n\t\t\t\t<li>List Item 2\n\t\t\t\t</li>\n\t\t\t\t<li>List Item 3</li>\n\t\t\t</ul>\n\t\t</li>\n\t\t<li>List Item 3\n\t\t\t<ol>\n\t\t\t\t<li>List Item 1</li>\n\t\t\t\t<li>List Item 2\n\t\t\t\t</li>\n\t\t\t\t<li>List Item 3</li>\n\t\t\t</ol>\n\t\t</li>\n\t</ul>\n\t<h3>Header 3</h3>\n\t<h4>Header 4</h4>\n\t<h5>Header 5</h5>\n\t<h6>Header 6</h6>\n\t<ol>\n\t\t<li>List Item 1</li>\n\t\t<li>List Item 2\n\t\t\t<ol>\n\t\t\t\t<li>List Item 1</li>\n\t\t\t\t<li>List Item 2\n\t\t\t\t</li>\n\t\t\t\t<li>List Item 3</li>\n\t\t\t</ol>\n\t\t</li>\n\t\t<li>List Item 3\n\t\t\t<ul>\n\t\t\t\t<li>List Item 1</li>\n\t\t\t\t<li>List Item 2\n\t\t\t\t</li>\n\t\t\t\t<li>List Item 3</li>\n\t\t\t</ul>\n\t\t</li>\n\t</ol>\n\t<div class=\"px2-p\">\n\t\t<table class=\"px2-table\">\n\t\t\t<tbody>\n\t\t\t\t<tr>\n\t\t\t\t\t<th>th</th>\n\t\t\t\t\t<td>td</td>\n\t\t\t\t</tr>\n\t\t\t</tbody>\n\t\t</table>\n\t</div>\n\t<p class=\"px2-p\">Slim Paragraph.</p>\n</div>","variables":[],"fileHash":"c26ee0c4839e88a9b1c96feb5f61d515"},{"header":"Paragraph","description":"","modifiers":[],"deprecated":false,"experimental":false,"reference":"9.4","markup":"<div class=\"px2-p\">\n\t前後に、p要素と同等のマージンを付加します。\n</div>","css":".px2-p{\n\tmargin-top: 1em;\n\tmargin-bottom: 1em;\n}","syntax":"scss","file":"_utils.css.scss","parentReference":"9","wrapper":"<sg-wrapper-content/>","renderMarkup":"<div class=\"px2-p\">\n\t前後に、p要素と同等のマージンを付加します。\n</div>","variables":[],"fileHash":"c26ee0c4839e88a9b1c96feb5f61d515"},{"header":"&#x6587;&#x5B57;&#x7D44;&#x307F;","description":"","modifiers":[],"deprecated":false,"experimental":false,"reference":"9.5","markup":"<div class=\"px2-text-align-left\">\n\t左寄せ\n</div>\n<div class=\"px2-text-align-center\">\n\t中央寄せ\n</div>\n<div class=\"px2-text-align-right\">\n\t右寄せ\n</div>","css":".px2-text-align-left{\n\ttext-align: left;\n}\n.px2-text-align-center{\n\ttext-align: center;\n}\n.px2-text-align-right{\n\ttext-align: right;\n}","syntax":"scss","file":"_utils.css.scss","parentReference":"9","wrapper":"<sg-wrapper-content/>","renderMarkup":"<div class=\"px2-text-align-left\">\n\t左寄せ\n</div>\n<div class=\"px2-text-align-center\">\n\t中央寄せ\n</div>\n<div class=\"px2-text-align-right\">\n\t右寄せ\n</div>","variables":[],"fileHash":"c26ee0c4839e88a9b1c96feb5f61d515"},{"header":"&#x6587;&#x5B57;&#x30B5;&#x30A4;&#x30BA;","description":"","modifiers":[],"deprecated":false,"experimental":false,"reference":"9.6","markup":"<div class=\"px2-font-size-ss\">\n\t最も小さい文字サイズ\n</div>\n<div class=\"px2-font-size-s\">\n\t小さい文字サイズ\n</div>\n<div class=\"px2-font-size-l\">\n\t大きい文字サイズ\n</div>\n<div class=\"px2-font-size-ll\">\n\t最も大きい文字サイズ\n</div>","css":".px2-font-size-ss{\n\tfont-size: 74%;\n}\n.px2-font-size-s{\n\tfont-size: 88%;\n}\n.px2-font-size-l{\n\tfont-size: 112%;\n}\n.px2-font-size-ll{\n\tfont-size: 136%;\n}","syntax":"scss","file":"_utils.css.scss","parentReference":"9","wrapper":"<sg-wrapper-content/>","renderMarkup":"<div class=\"px2-font-size-ss\">\n\t最も小さい文字サイズ\n</div>\n<div class=\"px2-font-size-s\">\n\t小さい文字サイズ\n</div>\n<div class=\"px2-font-size-l\">\n\t大きい文字サイズ\n</div>\n<div class=\"px2-font-size-ll\">\n\t最も大きい文字サイズ\n</div>","variables":[],"fileHash":"c26ee0c4839e88a9b1c96feb5f61d515"},{"header":"Slimize","description":"","modifiers":[],"deprecated":false,"experimental":false,"reference":"9.7","markup":"<h1 class=\"px2-slim\">Header 1</h1>\n<h2 class=\"px2-slim\">Header 2</h2>\n<h3 class=\"px2-slim\">Header 3</h3>\n<h4 class=\"px2-slim\">Header 4</h4>\n<h5 class=\"px2-slim\">Header 5</h5>\n<h6 class=\"px2-slim\">Header 6</h6>\n<p class=\"px2-slim\">\n\tmargin と padding を 0 にします。\n</p>\n<ul class=\"px2-slim\">\n\t<li>margin と padding を 0 にします。</li>\n</ul>\n<ol class=\"px2-slim\">\n\t<li>margin と padding を 0 にします。</li>\n</ol>\n<div class=\"px2-slim px2-slim--r\">\n\t<p>子要素も含めて、margin と padding を再帰的に 0 にします。</p>\n\t<ul>\n\t\t<li>子要素も含めて、margin と padding を再帰的に 0 にします。</li>\n\t</ul>\n</div>","css":".px2-slim{\n\tmargin: 0;\n\tpadding: 0;\n\n\t&--r *{\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n}","syntax":"scss","file":"_utils.css.scss","parentReference":"9","wrapper":"<sg-wrapper-content/>","renderMarkup":"<h1 class=\"px2-slim\">Header 1</h1>\n<h2 class=\"px2-slim\">Header 2</h2>\n<h3 class=\"px2-slim\">Header 3</h3>\n<h4 class=\"px2-slim\">Header 4</h4>\n<h5 class=\"px2-slim\">Header 5</h5>\n<h6 class=\"px2-slim\">Header 6</h6>\n<p class=\"px2-slim\">\n\tmargin と padding を 0 にします。\n</p>\n<ul class=\"px2-slim\">\n\t<li>margin と padding を 0 にします。</li>\n</ul>\n<ol class=\"px2-slim\">\n\t<li>margin と padding を 0 にします。</li>\n</ol>\n<div class=\"px2-slim px2-slim--r\">\n\t<p>子要素も含めて、margin と padding を再帰的に 0 にします。</p>\n\t<ul>\n\t\t<li>子要素も含めて、margin と padding を再帰的に 0 にします。</li>\n\t</ul>\n</div>","variables":[],"fileHash":"c26ee0c4839e88a9b1c96feb5f61d515"},{"header":"Responsive Block","description":"","modifiers":[],"deprecated":false,"experimental":false,"reference":"9.8","markup":"<div class=\"px2-responsive\">\n\t<table class=\"px2-table\">\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t<th>th</th>\n\t\t\t\t<td>1000000000</td>\n\t\t\t\t<td>2000000000</td>\n\t\t\t\t<td>3000000000</td>\n\t\t\t\t<td>4000000000</td>\n\t\t\t\t<td>5000000000</td>\n\t\t\t\t<td>6000000000</td>\n\t\t\t\t<td>7000000000</td>\n\t\t\t\t<td>8000000000</td>\n\t\t\t\t<td>9000000000</td>\n\t\t\t\t<td>10000000000</td>\n\t\t\t\t<td>11000000000</td>\n\t\t\t\t<td>12000000000</td>\n\t\t\t\t<td>13000000000</td>\n\t\t\t</tr>\n\t\t</tbody>\n\t</table>\n</div>","css":".px2-responsive{\n\toverflow: auto;\n}","syntax":"scss","file":"_utils.css.scss","parentReference":"9","wrapper":"<sg-wrapper-content/>","renderMarkup":"<div class=\"px2-responsive\">\n\t<table class=\"px2-table\">\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t<th>th</th>\n\t\t\t\t<td>1000000000</td>\n\t\t\t\t<td>2000000000</td>\n\t\t\t\t<td>3000000000</td>\n\t\t\t\t<td>4000000000</td>\n\t\t\t\t<td>5000000000</td>\n\t\t\t\t<td>6000000000</td>\n\t\t\t\t<td>7000000000</td>\n\t\t\t\t<td>8000000000</td>\n\t\t\t\t<td>9000000000</td>\n\t\t\t\t<td>10000000000</td>\n\t\t\t\t<td>11000000000</td>\n\t\t\t\t<td>12000000000</td>\n\t\t\t\t<td>13000000000</td>\n\t\t\t</tr>\n\t\t</tbody>\n\t</table>\n</div>","variables":[],"fileHash":"c26ee0c4839e88a9b1c96feb5f61d515"},{"header":"Grids","description":"","modifiers":[],"deprecated":false,"experimental":false,"reference":"10","markup":"<div class=\"px2-grid\">\n    <div class=\"px2-grid__col-1of2\">\n        <p>Column 1</p>\n    </div>\n    <div class=\"px2-grid__col-1of2\">\n        <p>Column 2</p>\n    </div>\n</div>","css":"@mixin px2-grid__col(){\n    margin: 0 0.5rem 1em 0.5rem;\n    box-sizing: border-box;\n}\n.px2-grid {\n    display: flex;\n    flex-wrap: wrap;\n    margin: 1em -0.5rem 0 -0.5rem;\n        // 上下のマージンはその場に表示される文字の大きさが基準になるべきなので、 rem ではなく em を採用する。\n    box-sizing: border-box;\n\n    &__col-1of1{\n        @include px2-grid__col();\n        width: calc( 100% - 1rem );\n    }\n    &__col-1of2{\n        @include px2-grid__col();\n        width: calc( 50% - 1rem );\n    }\n    &__col-1of3{\n        @include px2-grid__col();\n        width: calc( 33.33% - 1rem );\n    }\n    &__col-2of3{\n        @include px2-grid__col();\n        width: calc( 66.66% - 1rem );\n    }\n    &__col-1of4{\n        @include px2-grid__col();\n        width: calc( 25% - 1rem );\n    }\n    &__col-1of5{\n        @include px2-grid__col();\n        width: calc( 20% - 1rem );\n    }\n    &__col-2of5{\n        @include px2-grid__col();\n        width: calc( 40% - 1rem );\n    }\n    &__col-3of5{\n        @include px2-grid__col();\n        width: calc( 60% - 1rem );\n    }\n    &__col-4of5{\n        @include px2-grid__col();\n        width: calc( 80% - 1rem );\n    }\n    &__col-1of6{\n        @include px2-grid__col();\n        width: calc( 16.66% - 1rem );\n    }\n\n    @media all and (max-width: 768px) {\n        // \"sm\" on Bootstrap 4\n        &__col-1of5,\n        &__col-2of5,\n        &__col-3of5,\n        &__col-4of5,\n        &__col-1of6{\n            width: calc( 33.33% - 1rem );\n        }\n    }\n\n    @media all and (max-width: 660px) {\n        &__col-1of4,\n        &__col-3of4,\n        &__col-1of5,\n        &__col-2of5,\n        &__col-3of5,\n        &__col-4of5,\n        &__col-1of6{\n            width: calc( 50% - 1rem );\n        }\n    }\n\n    @media all and (max-width: 544px) {\n        // \"xs\" on Bootstrap 4\n        &__col-1of3,\n        &__col-2of3,\n        &__col-1of4,\n        &__col-3of4,\n        &__col-1of5,\n        &__col-2of5,\n        &__col-3of5,\n        &__col-4of5,\n        &__col-1of6{\n            width: calc( 50% - 1rem );\n        }\n    }\n\n    @media all and (max-width: 440px) {\n        &__col-1of2,\n        &__col-1of3,\n        &__col-2of3,\n        &__col-1of4,\n        &__col-3of4,\n        &__col-1of5,\n        &__col-2of5,\n        &__col-3of5,\n        &__col-4of5,\n        &__col-1of6{\n            width: calc( 100% - 1rem );\n        }\n    }\n\n\n    // 大きい画面(PCサイズ)\n    @media all and (min-width: 993px) {\n        &__col-lg-1of1{\n            @include px2-grid__col();\n            width: calc( 100% - 1rem );\n        }\n        &__col-lg-1of2{\n            @include px2-grid__col();\n            width: calc( 50% - 1rem );\n        }\n        &__col-lg-1of3{\n            @include px2-grid__col();\n            width: calc( 33.33% - 1rem );\n        }\n        &__col-lg-2of3{\n            @include px2-grid__col();\n            width: calc( 66.66% - 1rem );\n        }\n        &__col-lg-1of4{\n            @include px2-grid__col();\n            width: calc( 25% - 1rem );\n        }\n        &__col-lg-1of5{\n            @include px2-grid__col();\n            width: calc( 20% - 1rem );\n        }\n        &__col-lg-2of5{\n            @include px2-grid__col();\n            width: calc( 40% - 1rem );\n        }\n        &__col-lg-3of5{\n            @include px2-grid__col();\n            width: calc( 60% - 1rem );\n        }\n        &__col-lg-4of5{\n            @include px2-grid__col();\n            width: calc( 80% - 1rem );\n        }\n        &__col-lg-1of6{\n            @include px2-grid__col();\n            width: calc( 16.66% - 1rem );\n        }\n    }\n\n    // 中サイズの画面(タブレットサイズ)\n    @media all and (min-width: 769px) and (max-width: 992px) {\n        &__col-md-1of1{\n            @include px2-grid__col();\n            width: calc( 100% - 1rem );\n        }\n        &__col-md-1of2{\n            @include px2-grid__col();\n            width: calc( 50% - 1rem );\n        }\n        &__col-md-1of3{\n            @include px2-grid__col();\n            width: calc( 33.33% - 1rem );\n        }\n        &__col-md-2of3{\n            @include px2-grid__col();\n            width: calc( 66.66% - 1rem );\n        }\n        &__col-md-1of4{\n            @include px2-grid__col();\n            width: calc( 25% - 1rem );\n        }\n        &__col-md-1of5{\n            @include px2-grid__col();\n            width: calc( 20% - 1rem );\n        }\n        &__col-md-2of5{\n            @include px2-grid__col();\n            width: calc( 40% - 1rem );\n        }\n        &__col-md-3of5{\n            @include px2-grid__col();\n            width: calc( 60% - 1rem );\n        }\n        &__col-md-4of5{\n            @include px2-grid__col();\n            width: calc( 80% - 1rem );\n        }\n        &__col-md-1of6{\n            @include px2-grid__col();\n            width: calc( 16.66% - 1rem );\n        }\n    }\n\n    // 小さい画面(スマートフォンサイズ)\n    @media all and (max-width: 768px) {\n        &__col-sm-1of1{\n            @include px2-grid__col();\n            width: calc( 100% - 1rem );\n        }\n        &__col-sm-1of2{\n            @include px2-grid__col();\n            width: calc( 50% - 1rem );\n        }\n        &__col-sm-1of3{\n            @include px2-grid__col();\n            width: calc( 33.33% - 1rem );\n        }\n        &__col-sm-2of3{\n            @include px2-grid__col();\n            width: calc( 66.66% - 1rem );\n        }\n        &__col-sm-1of4{\n            @include px2-grid__col();\n            width: calc( 25% - 1rem );\n        }\n        &__col-sm-1of5{\n            @include px2-grid__col();\n            width: calc( 20% - 1rem );\n        }\n        &__col-sm-2of5{\n            @include px2-grid__col();\n            width: calc( 40% - 1rem );\n        }\n        &__col-sm-3of5{\n            @include px2-grid__col();\n            width: calc( 60% - 1rem );\n        }\n        &__col-sm-4of5{\n            @include px2-grid__col();\n            width: calc( 80% - 1rem );\n        }\n        &__col-sm-1of6{\n            @include px2-grid__col();\n            width: calc( 16.66% - 1rem );\n        }\n    }\n}","syntax":"scss","file":"_grid.css.scss","wrapper":"<sg-wrapper-content/>","renderMarkup":"<div class=\"px2-grid\">\n    <div class=\"px2-grid__col-1of2\">\n        <p>Column 1</p>\n    </div>\n    <div class=\"px2-grid__col-1of2\">\n        <p>Column 2</p>\n    </div>\n</div>","variables":[],"fileHash":"8a56ff54914d3b899454a1f356e65929"}],"config":{"appRoot":"","extraHead":"<script src=\"/dist/px2style.js\"></script>\n<link rel=\"stylesheet\" href=\"/dist/px2style.css\" />","commonClass":"","title":"Pickles 2 CSS Components.","disableEncapsulation":false,"disableHtml5Mode":false,"readOnly":false,"sideNav":false,"showReferenceNumbers":false,"showMarkupSection":false,"hideSubsectionsOnMainSection":false,"includeDefaultStyles":true,"additionalNgDependencies":false}}