diff options
Diffstat (limited to 'web-ui/app/style-guide.html')
| -rw-r--r-- | web-ui/app/style-guide.html | 118 |
1 files changed, 87 insertions, 31 deletions
diff --git a/web-ui/app/style-guide.html b/web-ui/app/style-guide.html index dc72b9a0..0f7b8e03 100644 --- a/web-ui/app/style-guide.html +++ b/web-ui/app/style-guide.html @@ -29,7 +29,7 @@ </ul> </nav> <section id="guidelines" class="guide-section" name="guidelines"> - Basic Guidelines section. + <h2>Basic Guidelines</h2> Guidelines, guidelines, guidelines. </br> @@ -45,59 +45,115 @@ </br> </section> <section id="colors" class="guide-section"> - Color palette. - </br> - Color palette. Primary and secondary colors. - </br> - Color palette. Primary and secondary colors. - </br> - Color palette. Primary and secondary colors. - </br> - Color palette. Primary and secondary colors. - </br> - Color palette. Primary and secondary colors. - </br> + <h2>Color Palette</h2> + </br> + <div class="color-grid"> + <div class="color-swatch" style="background-color: #EF4E2F"> + <p class="color-label"> + <span class="color-name">PRIMARY COLOR</span> + <br>#EF4E2F + </p> + </div> + <div class="color-swatch" style="background-color: #3E3A37"> + <p class="color-label"> + <span class="color-name">SECONDARY COLOR</span> + <br>#3E3A37 + </p> + </div> + <div class="color-swatch" style="background-color: #EAEAEA"> + <p class="color-label"> + <span class="color-name">TOP PANE</span> + <br>#EAEAEA + </p> + </div> + <div class="color-swatch" style="background-color: #F2F3ED"> + <p class="color-label"> + <span class="color-name">CONTRAST</span> + <br>#F2F3ED + </p> + </div> + </div> + <br> + <div class="color-grid"> + <div class="color-swatch" style="background-color: #2DAB49"> + <p class="color-label"> + <span class="color-name">SUCCESS</span> + <br>#2DAB49 + </p> + </div> + <div class="color-swatch" style="background-color: #F6A40A"> + <p class="color-label"> + <span class="color-name">ATTENTION</span> + <br>#F6A40A + </p> + </div> + <div class="color-swatch" style="background-color: #F7E8AF"> + <p class="color-label"> + <span class="color-name">WARNING</span> + <br>#F7E8AF + </p> + </div> + <div class="color-swatch" style="background-color: #D72A25"> + <p class="color-label"> + <span class="color-name">ERROR</span> + <br>#D72A25 + </p> + </div> + <div class="color-swatch" style="background-color: #FFEF29"> + <p class="color-label"> + <span class="color-name">SEARCH HIGHLIGHT</span> + <br>#FFEF29 + </p> + </div> + <div class="color-swatch" style="background-color: #C0B9B9"> + <p class="color-label"> + <span class="color-name">COUNT BACKGROUND</span> + <br>#C0B9B9 + </p> + </div> + </div> </section> <section id="typography" class="guide-section"> - Typography. Basic references to typefaces and sizes. + <h2>Typography</h2> + </br> - Typography. + Typography. Basic references to typefaces and sizes. </br> - Typography. + Typography. Basic references to typefaces and sizes. </br> - Typography. + Typography. Basic references to typefaces and sizes. </br> - Typography. + Typography. Basic references to typefaces and sizes. </br> - Typography. + Typography. Basic references to typefaces and sizes. </br> </section> <section id="components" class="guide-section" name="components"> - Example of components, such as warnings, modals, buttons, etc.. + <h2>Components</h2> </br> - Components. + Example of components, such as warnings, modals, buttons, etc.. </br> - Components. + Example of components, such as warnings, modals, buttons, etc.. </br> - Components. + Example of components, such as warnings, modals, buttons, etc.. </br> - Components. + Example of components, such as warnings, modals, buttons, etc.. </br> - Components. + Example of components, such as warnings, modals, buttons, etc.. </br> </section> <section id="icons" class="guide-section" name="icons"> - Icons - style and usage. + <h2>Icons</h2> </br> - Icons. + Icons - style and usage. </br> - Icons. + Icons - style and usage. </br> - Icons. + Icons - style and usage. </br> - Icons. + Icons - style and usage. </br> - Icons. + Icons - style and usage. </br> </section> </div> |