gnui 1.2.13 → 1.2.14

package/styleguide/assets/theme.css

@@ -0,0 +1,596 @@
+@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap');
+
+/*
+---
+name: Paragraph
+category: body
+---
+
+```html
+<p>
+The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
+</p>
+```
+
+*/
+
+/*
+---
+name: Heading
+category: body
+---
+
+```html
+<h1>Heading1</h1>
+<h2>Heading2</h2>
+<h3>Heading3</h3>
+<h4>Heading4</h4>
+<h5>Heading5</h5>
+<h6>Heading6</h6>
+```
+
+*/
+
+/*
+---
+name: Header
+category: layout/header
+tag:
+  - deprecated
+---
+
+```html
+<header class="aigis-header">
+  <a href="#">Styleguide</a>
+</header>
+```
+
+*/
+.aigis-header {
+  position: fixed;
+  top: 0;
+  padding: 10px 30px;
+  width: 100%;
+  height: 50px;
+  background-color: #486491;
+  z-index: 10000;
+}
+
+.aigis-header span a {
+  color: #fff;
+  font-size: 2.6em;
+  font-family: 'Noto Sans KR', 'Nanum Gothic';
+  text-decoration: none;
+  line-height: 110%;
+}
+
+.aigis-header div {
+  float: right;
+}
+
+/*
+---
+name: Footer
+category: layout/footer
+tag: latest
+---
+
+```html
+<footer class="aigis-footer">Last update at 2016/03/23 20:48</footer>
+```
+
+*/
+.aigis-footer {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+  margin-top: 2rem;
+  line-height: 1.75;
+  /* color: #7a7a7a; */
+  border-top: 1px solid #eee;
+  text-align: center;
+  font-size: 16px;
+}
+
+/*
+---
+name: Preview
+category: body
+tag: latest
+---
+
+```html
+<div class="aigis-preview">
+  <a class="ex-ag-btn">Button</a>
+  <button class="ex-ag-btn ex-ag-btn--primary">Button</button>
+</div>
+```
+
+*/
+.aigis-codeblock,
+.aigis-preview {
+  position: relative;
+  margin: 0;
+  overflow: visible;
+  /* background: url( 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAAAAAA6mKC9AAAAF0lEQVR4AWP4DwVvoWCgBGAMmMQACQAAuK72AWHjK4wAAAAASUVORK5CYII=' ); */
+}
+
+.aigis-preview::before {
+  content: 'preview';
+  position: absolute;
+  right: 0;
+  top: 0;
+  font-size: 10px;
+  padding: 2px 4px 2px 5px;
+  border-bottom-left-radius: 3px;
+  color: #fff;
+  background: #181818;
+}
+
+.aigis-preview::after {
+  content: '';
+  clear: both;
+  display: block;
+}
+
+.ex-ag-btn {
+  -webkit-appearance: none;
+  display: inline-block;
+  border: none;
+  background-color: #3db680;
+  color: #fff;
+  padding: 10px 20px;
+  text-align: center;
+  line-height: 40px;
+  min-width: 200px;
+  font-size: 20px;
+  box-sizing: border-box;
+}
+
+.ex-ag-btn--primary {
+  color: black;
+  background-color: #ffea3a;
+}
+
+/*
+---
+name: Codeblock
+category: body
+tag: latest
+---
+
+```html
+<pre><code class="lang-html"><pre class="editor editor-colors"><div class="line"><span class="text html gohtml"><span class="meta tag block any html"><span class="punctuation definition tag begin html"><span>&lt;</span></span><span class="entity name tag block any html"><span>div</span></span><span>&nbsp;</span><span class="entity other attribute-name html"><span>class</span></span><span>=</span><span class="string quoted double html"><span class="punctuation definition string begin html"><span>"</span></span><span>aigis-header</span><span class="punctuation definition string end html"><span>"</span></span></span><span class="punctuation definition tag end html"><span>&gt;</span></span></span></span></div><div class="line"><span class="text html gohtml"><span>&nbsp;&nbsp;hoge</span></span></div><div class="line"><span class="text html gohtml"><span class="meta tag block any html"><span class="punctuation definition tag begin html"><span>&lt;/</span></span><span class="entity name tag block any html"><span>div</span></span><span class="punctuation definition tag end html"><span>&gt;</span></span></span></span></div></pre>
+</code></pre>
+```
+
+*/
+.aigis-module>pre:not([aria-hidden='true']) {
+  background-color: #272822;
+  color: #f8f8f2;
+  font-size: 14px;
+  position: relative;
+  padding: 0.5em;
+  border-radius: 3px;
+  margin: 0 auto 3em;
+  border: 1px solid #a0a0a0;
+  max-height: 300px;
+  overflow: auto;
+}
+
+.aigis-module>pre+pre {
+  margin-top: -3em;
+  margin-bottom: 3em;
+}
+
+.aigis-module>ul:not([class]) {
+  list-style: disc;
+  margin: 10px 30px;
+}
+
+.aigis-preview {
+  border: 1px solid #a0a0a0;
+  border-radius: 3px;
+  border-radius: 3px 3px 0 0;
+  padding: 20px 10px;
+  padding: 16px;
+  margin: 0;
+  margin-top: 10px;
+}
+
+.aigis-preview p+p {
+  margin-top: 10px;
+}
+
+.aigis-preview+pre {
+  position: relative;
+  border-radius: 0 0 3px 3px;
+  border-top: none;
+  margin-top: 0;
+  height: auto;
+  overflow-x: auto;
+}
+
+.aigis-module.Chart .aigis-preview {
+  display: block;
+}
+
+.aigis-module.Chart .aigis-preview>div,
+.aigis-module.Chart table,
+.aigis-module.Chart table+pre,
+.aigis-module.Chart pre+pre {
+  display: inline-block;
+  width: 49%;
+  margin-right: 5px;
+  vertical-align: middle;
+}
+
+.aigis-module.JsonView table:not(:last-of-type) td>pre {
+  max-width: 270px;
+}
+
+/*
+---
+name: Sidemenu
+category: layout/sidemenu
+tag: latest
+---
+
+```html
+<div class="aigis-sidemenu">
+  <header class="aigis-header">
+    <a href="../../index.html">Styleguide</a>
+  </header>
+  <h2 class="aigis-sidemenu__heading">Category</h2>
+  <nav class="aigis-categoryList">
+
+  </nav>
+  <h2 class="aigis-sidemenu__heading">Tag</h2>
+  <nav class="aigis-tags aigis-tagList">
+
+  </nav>
+  <h2 class="aigis-sidemenu__heading"><a href="../../color.html">All Colors</a></h2>
+</div>
+```
+
+*/
+.aigis-sidemenu {
+  position: fixed;
+  top: 50px;
+  bottom: 0;
+  left: 0;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  width: 280px;
+  border-right: 1px solid #d4dbe4;
+  box-sizing: border-box;
+  background-color: #fff;
+  color: #33331a;
+  -ms-overflow-style: none;
+  overflow-x: auto;
+}
+
+.aigis-sidemenu::-webkit-scrollbar {
+  display: none;
+}
+
+.aigis-sidemenu__heading {
+  font-size: 30px;
+  margin: 12px 0;
+  color: #33331a;
+  font-weight: normal;
+  padding-left: 10px;
+  line-height: 1em;
+}
+
+.aigis-sidemenu__heading a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.aigis-preview .aigis-sidemenu {
+  position: relative;
+}
+
+/*
+---
+name: Category list
+category: layout/sidemenu
+tag: latest
+---
+
+```html
+<h2 class="aigis-sidemenu__heading">Category</h2>
+<nav class="aigis-categoryList">
+  <ul data-path-depth="0">
+    <li data-path-depth="0">body</li>
+    <li data-path-depth="0"><a href="#">layout</a>
+      <ul data-path-depth="1">
+        <li data-path-depth="1"><a href="#">sidemenu</a></li>
+      </ul>
+    </li>
+  </ul>
+</nav>
+```
+
+*/
+.aigis-categoryList ul li {
+  padding: 3px 10px;
+  font-size: 14px;
+  list-style: none;
+}
+
+.aigis-categoryList li a {
+  display: block;
+  position: relative;
+  padding: 3px 10px 3px 10px;
+  color: #454545;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  border-radius: 0px;
+  outline: none;
+  text-decoration: none;
+}
+
+.aigis-categoryList li:hover a[href]:hover {
+  text-decoration: underline;
+  color: #2a436b;
+}
+
+.aigis-categoryList li[data-path-depth] a:before {
+  content: '';
+  margin-right: 10px;
+}
+
+.aigis-categoryList li[data-path-depth='1'] a:before {
+  margin-left: 1em;
+}
+
+.aigis-categoryList li[data-path-depth='2'] a:before {
+  margin-left: 2em;
+}
+
+.aigis-categoryList li[data-path-depth='3'] a:before {
+  margin-left: 3em;
+}
+
+.aigis-categoryList li[data-path-depth='4'] a:before {
+  margin-left: 4em;
+}
+
+.aigis-categoryList li[data-path-depth] [data-tree-current],
+.aigis-categoryList .current>a {
+  background-color: #d2d2d2;
+  color: #004ba9 !important;
+  text-decoration: none !important;
+}
+
+/*
+---
+name: Tag list
+category: layout/sidemenu
+tag: latest
+---
+
+```html
+<nav class="aigis-tags aigis-tagList">
+  <a class="aigis-tags__item aigis-tags__item--deprecated" href="#">deprecated</a>
+  <a class="aigis-tags__item aigis-tags__item--latest" href="#">latest</a>
+</nav>
+```
+
+*/
+.aigis-tags {
+  padding: 10px;
+  padding-left: 0;
+  margin: 0;
+}
+
+/*
+---
+name: Module list
+category: body
+tag: latest
+---
+
+```html
+<nav>
+  <h2 class="aigis-module__heading">Modules</h2>
+  <ul class="aigis-moduleList">
+    <li class="aigis-moduleList__item">
+      <a href="#header">header</a>
+    </li>
+    <li class="aigis-moduleList__item">
+      <a href="#sidemenu">sidemenu</a>
+    </li>
+    <li class="aigis-moduleList__item">
+      <a href="#category list">category list</a>
+    </li>
+    <li class="aigis-moduleList__item">
+      <a href="#tags">tags</a>
+    </li>
+  </ul>
+</nav>
+```
+
+*/
+.aigis-moduleList {
+  line-height: 1.6;
+  font-size: 16px;
+}
+
+.aigis-moduleList__item a {
+  color: #08f;
+  text-decoration: none;
+}
+
+.aigis-moduleList__item a:hover {
+  text-decoration: underline;
+}
+
+.aigis-module__heading {
+  padding-bottom: 0.3em;
+  font-size: 1.75em;
+  line-height: 1.225;
+  border-bottom: 1px solid #eee;
+  position: relative;
+}
+
+.aigis-module__heading:hover a {
+  position: relative;
+}
+
+.aigis-module__heading:hover a:before {
+  content: '\00a7';
+  position: absolute;
+  right: 100%;
+  bottom: 5px;
+  font-size: 20px;
+  color: #000;
+  padding-right: 5px;
+  padding-left: 5px;
+}
+
+/*
+---
+name: File path
+category: body
+---
+
+```html
+<div class="aigis-module__filepath">
+  /aigis_assets/css/theme.css
+</div>
+```
+
+*/
+
+.aigis-module__filepath {
+  display: block;
+  text-align: right;
+  font-size: 12px;
+  color: #adadad;
+}
+
+/*
+---
+name: Color palette
+category: layout/special
+tag: special
+---
+
+```html
+<div class="aigis-contents__body">
+  <h2 class="aigis-module__heading">colors</h2>
+  <div class="aigis-colorPalette"><div class="aigis-colorPalette__color" style="background-color: #428b1c;"></div><div class="aigis-colorPalette__label">#428b1c</div></div>
+  <div class="aigis-colorPalette"><div class="aigis-colorPalette__color" style="background-color: #55b5db;"></div><div class="aigis-colorPalette__label">#55b5db</div></div>
+  <div class="aigis-colorPalette"><div class="aigis-colorPalette__color" style="background-color: #5B594B;"></div><div class="aigis-colorPalette__label">#5B594B</div></div>
+  <div class="aigis-colorPalette"><div class="aigis-colorPalette__color" style="background-color: #6272a4;"></div><div class="aigis-colorPalette__label">#6272a4</div></div>
+  <div class="aigis-colorPalette"><div class="aigis-colorPalette__color" style="background-color: #666;"></div><div class="aigis-colorPalette__label">#666</div></div>
+  <div class="aigis-colorPalette"><div class="aigis-colorPalette__color" style="background-color: #66d9ef;"></div><div class="aigis-colorPalette__label">#66d9ef</div></div>
+  <div class="aigis-colorPalette"><div class="aigis-colorPalette__color" style="background-color: #66D9EF;"></div><div class="aigis-colorPalette__label">#66D9EF</div></div>
+  <div class="aigis-colorPalette"><div class="aigis-colorPalette__color" style="background-color: #6be5fd;"></div><div class="aigis-colorPalette__label">#6be5fd</div></div>
+  <div class="aigis-colorPalette"><div class="aigis-colorPalette__color" style="background-color: #728fcb;"></div><div class="aigis-colorPalette__label">#728fcb</div></div>
+  <div class="aigis-colorPalette"><div class="aigis-colorPalette__color" style="background-color: #75715E;"></div><div class="aigis-colorPalette__label">#75715E</div></div>
+</div>
+```
+
+*/
+.aigis-colorPalette {
+  margin-top: 5px;
+}
+
+.aigis-colorPalette__color {
+  display: inline-block;
+  vertical-align: middle;
+  height: 40px;
+  width: 50%;
+  margin-right: 5px;
+}
+
+.aigis-colorPalette__label {
+  display: inline-block;
+  vertical-align: middle;
+  line-height: 40px;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-size: 1rem;
+  font-family:
+    BlinkMacSystemFont,
+    -apple-system,
+    Dhurjati 'Nanum Gothic' 'Segoe UI',
+    'Roboto',
+    'Oxygen',
+    'Ubuntu',
+    'Cantarell',
+    'Fira Sans',
+    'Droid Sans',
+    'Helvetica Neue',
+    'Helvetica',
+    'Arial',
+    sans-serif;
+}
+
+.aigis-module>ul code,
+.aigis-module>p code,
+.aigis-contents__body>ul code,
+.aigis-contents__body>p code,
+.aigis-contents__body>h2 code,
+.aigis-contents__body>h3 code {
+  color: #666;
+  background-color: #f7f7f7;
+  padding: 0 3px;
+  font-size: 1.2em;
+  border-radius: 3px;
+}
+
+.aigis-container {
+  box-sizing: border-box;
+  width: auto;
+  min-width: 960px;
+  margin-right: auto;
+}
+
+.aigis-container:after {
+  content: '';
+  display: table;
+  clear: both;
+}
+
+.aigis-contents {
+  box-sizing: border-box;
+  padding-right: 10px;
+  padding-left: 280px;
+  padding-top: 50px;
+  margin: 0 auto;
+  /* font-size: 18px; */
+}
+
+.aigis-contents__body {
+  /* color: #33331a; */
+  max-width: 960px;
+  min-width: 600px;
+  padding: 20px 20px;
+  margin: 0 auto;
+}
+
+.aigis-contents__body>p {
+  margin-bottom: 1em;
+}
+
+/*
+main
+*/
+.aigis-main-page {
+  padding: 10px;
+}
+
+/*
+components 
+*/
+.aigis-contents .type-checkbox {
+  height: 215px;
+}