diff options
| author | Gabriel Albo <gabriel@albo.com.br> | 2014-09-02 20:50:38 -0300 |
|---|---|---|
| committer | Gabriel Albo <gabriel@albo.com.br> | 2014-09-02 20:50:38 -0300 |
| commit | b3595f70fd50575655eabb4a82f51a2885566712 (patch) | |
| tree | b9af5928c34d72d3e3b4b61c2da56bb3c0c3e096 | |
| parent | b5760a9313e2007ab6785344c8b7f6aab79c6ff0 (diff) | |
Adding icons section and removing (currently) empty components section on the style guide
| -rw-r--r-- | web-ui/app/scss/style-guide.scss | 10 | ||||
| -rw-r--r-- | web-ui/app/style-guide.html | 38 |
2 files changed, 20 insertions, 28 deletions
diff --git a/web-ui/app/scss/style-guide.scss b/web-ui/app/scss/style-guide.scss index 689f32a2..7370aac6 100644 --- a/web-ui/app/scss/style-guide.scss +++ b/web-ui/app/scss/style-guide.scss @@ -69,13 +69,16 @@ ul.right { section.guide-section { display: block; height: 100%; - min-height: 666px; overflow-y: auto; padding: 66px 32px; &:nth-child(even) { background-color: $top_pane; } + + &:last-child { + min-height: 666px; + } } .color-card { @@ -131,4 +134,9 @@ ul.typography li h2 { ul.headers-and-sizes { margin: 20px 100px 0 0; display: inline-block; +} + +section#icons i { + font-size: xx-large; + margin-right: 20px; }
\ No newline at end of file diff --git a/web-ui/app/style-guide.html b/web-ui/app/style-guide.html index 4e038822..3c464ed6 100644 --- a/web-ui/app/style-guide.html +++ b/web-ui/app/style-guide.html @@ -20,10 +20,9 @@ </ul> <ul class="right"> - <li><a href="#welcome">Welcome</a></li> + <li><a href="#welcome">Home</a></li> <li><a href="#colors">Colors</a></li> <li><a href="#typography">Typography</a></li> - <li><a href="#components">Components</a></li> <li><a href="#icons">Icons</a></li> </ul> </nav> @@ -167,33 +166,18 @@ </li> </ul> </section> - <section id="components" class="guide-section" name="components"> - <h2>Components</h2> - </br> - Example of components, such as warnings, modals, buttons, etc.. - </br> - Example of components, such as warnings, modals, buttons, etc.. - </br> - Example of components, such as warnings, modals, buttons, etc.. - </br> - Example of components, such as warnings, modals, buttons, etc.. - </br> - Example of components, such as warnings, modals, buttons, etc.. - </br> - </section> <section id="icons" class="guide-section" name="icons"> <h2>Icons</h2> - </br> - Icons - style and usage. - </br> - Icons - style and usage. - </br> - Icons - style and usage. - </br> - Icons - style and usage. - </br> - Icons - style and usage. - </br> + <p>Every icon in Pixelated comes from a font called <a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome.</a> + <p>Here are some of the icons we're currently using on Pixelated</p> + <i class="fa fa-inbox"></i> + <i class="fa fa-send"></i> + <i class="fa fa-pencil"></i> + <i class="fa fa-trash-o"></i> + <i class="fa fa-archive"></i> + <i class="fa fa-tags"></i> + <i class="fa fa-navicon"></i> + <i class="fa fa-refresh"></i> </section> </div> |