diff options
| -rw-r--r-- | web-ui/app/scss/style-guide.scss | 142 | ||||
| -rw-r--r-- | web-ui/app/style-guide.html | 187 |
2 files changed, 0 insertions, 329 deletions
diff --git a/web-ui/app/scss/style-guide.scss b/web-ui/app/scss/style-guide.scss deleted file mode 100644 index 7370aac6..00000000 --- a/web-ui/app/scss/style-guide.scss +++ /dev/null @@ -1,142 +0,0 @@ -@import "compass/css3"; -@import "styles.scss"; - -body { - display: block; - overflow: scroll !important; -} - -div#style-guide-wrap { - font-size: 1rem; -} - -div#style-guide-wrap p { - font-size: 1rem; -} - -img.screenshot { - max-width: 60%; - margin: 0 auto; - display: block; -} - -nav { - position: fixed; - z-index: 10; - height: 50px; - width: 100%; - background-color: #3e3a37; - color: white; - opacity: 0.95; -} - -a.logo-anchor { - color: white; - - &:hover { - color: darken(white, 30); - } -} - -ul li { - display: inline; -} - -ul.typography li { - display: inline-block; - text-align: center; - margin: 20px 10px 0 0; - padding: 30px; - min-height: 125px; - min-width: 130px; - border: 1px solid #EEE; - background-color: white; - border-radius: 5px; -} - -ul.left, ul.right { - padding: 12px; - margin: 0px 25px; - font-weight: bold; -} - -ul.right { - li { - margin: 8px; - } -} - -section.guide-section { - display: block; - height: 100%; - overflow-y: auto; - padding: 66px 32px; - - &:nth-child(even) { - background-color: $top_pane; - } - - &:last-child { - min-height: 666px; - } -} - -.color-card { - width: 160px; - height: 230px; - border-radius: 5px; - display: inline-block; - margin-right: 15px; -} - -.color-label { - position: relative; - top: 173px; -} - -.color-label, .typeface-sample { - background-color: white; - border: 1px solid #eee; - text-align: center; - color: #344a5f; - border-bottom-left-radius: 5px; - border-bottom-right-radius: 5px; - padding: 10px 0; -} - -.color-name { - font-size: small; -} - -/* Color Cards definition */ - -.color-grid { - margin-bottom: 25px; - #primary-color-card { background-color: $primary_color; } - #secondary-color-card { background-color: $secondary; } - #top-pane-card { background-color: $top_pane; } - #contrast-card { background-color: $contrast; } - #action-buttons-card { background-color: $action_buttons; } - #success-card { background-color: $success; } - #attention-card { background-color: $attention; } - #warning-card { background-color: $warning; } - #error-card { background-color: $error; } - #search-highlight-card { background-color: $search_highlight; } - #count-background-card { background-color: $total_count_bg; } -} -/* Typeface cards definition*/ -ul.typography li h2 { - &.bold-header { font-weight: bold; } - &.extra-bold-header { font-weight: 800; } - &.lighter-header { font-weight: lighter; } -} - -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 deleted file mode 100644 index 3c464ed6..00000000 --- a/web-ui/app/style-guide.html +++ /dev/null @@ -1,187 +0,0 @@ -<!DOCTYPE html> -<html> -<head> -<meta charset="utf-8"> -<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> -<title>Pixelated Style Guide</title> -<meta name="description" content=""> -<meta name="viewport" content="width=device-width"> -<link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> -<link href="css/opensans.css" rel="stylesheet" type="text/css"> -<link href="css/news-cycle.css" rel="stylesheet" type="text/css"/> -<link href="css/style-guide.css" rel="stylesheet" type="text/css"/> -<link rel="stylesheet" href="../css/main.css"> -</head> -<body> - <div id="style-guide-wrap" data-offcanvas> - <nav class="top-bar" data-topbar> - <ul class="left"> - <li><a class="logo-anchor" href="#welcome">Pixelated Style Guide</a></li> - </ul> - - <ul class="right"> - <li><a href="#welcome">Home</a></li> - <li><a href="#colors">Colors</a></li> - <li><a href="#typography">Typography</a></li> - <li><a href="#icons">Icons</a></li> - </ul> - </nav> - <section id="welcome" class="guide-section" name="welcome"> - <h2>Welcome to the Pixelated Style Guide</h2> - <p> - Here you'll find information about visual design and UI guidelines for Pixelated, such as colors, typography and components. - </p> - <p> - This is a live style guide - that means it's reflecting the actual application cascading stylesheets, but also that it will be continuously and automatically updated as our design evolves. - </p> - <img class="screenshot" src="/images/pixelated-screenshot.png" alt="Pixelated Screenshot" /> - </section> - <section id="colors" class="guide-section"> - <h2>Color Palette</h2> - </br> - <div class="color-grid"> - <div id="primary-color-card" class="color-card"> - <p class="color-label"> - <span class="color-name">PRIMARY COLOR</span> - <br>#EF4E2F - </p> - </div> - <div id="secondary-color-card" class="color-card"> - <p class="color-label"> - <span class="color-name">SECONDARY COLOR</span> - <br>#3E3A37 - </p> - </div> - <div id="top-pane-card" class="color-card"> - <p class="color-label"> - <span class="color-name">TOP PANE</span> - <br>#EAEAEA - </p> - </div> - <div id="contrast-card" class="color-card"> - <p class="color-label"> - <span class="color-name">CONTRAST</span> - <br>#F2F3ED - </p> - </div> - <div id="action-buttons-card" class="color-card"> - <p class="color-label"> - <span class="color-name">ACTION BUTTONS</span> - <br>#2ba6cb - </p> - </div> - </div> - <br> - - <div class="color-grid"> - <div id="success-card" class="color-card"> - <p class="color-label"> - <span class="color-name">SUCCESS</span> - <br>#2DAB49 - </p> - </div> - <div id="attention-card" class="color-card"> - <p class="color-label"> - <span class="color-name">ATTENTION</span> - <br>#F6A40A - </p> - </div> - <div id="warning-card" class="color-card"> - <p class="color-label"> - <span class="color-name">WARNING</span> - <br>#F7E8AF - </p> - </div> - <div id="error-card" class="color-card"> - <p class="color-label"> - <span class="color-name">ERROR</span> - <br>#D72A25 - </p> - </div> - <div id="search-highlight-card" class="color-card"> - <p class="color-label"> - <span class="color-name">SEARCH HIGHLIGHT</span> - <br>#FFEF29 - </p> - </div> - <div id="count-background-card" class="color-card"> - <p class="color-label"> - <span class="color-name">COUNT BACKGROUND</span> - <br>#C0B9B9 - </p> - </div> - </div> - </section> - <section id="typography" class="guide-section"> - <h2>Typography</h2> - - </br> - Pixelated uses Open Sans as its main font for its readability and wide range of variations. <a href="https://www.google.com/fonts/specimen/Open+Sans">Open Sans</a> is a humanist sans serif typeface created by Steve Matteson. - </br> - <ul class="typography"> - <li> - <h2>Aa</h2> - <span>Regular</span> - </li> - <li> - <h2 class="bold-header">Aa</h2> - <span>Bold</span> - </li> - <li> - <h2 class="extra-bold-header">Aa</h2> - <span>Extra Bold</span> - </li> - <li> - <h2 class="lighter-header">Aa</h2> - <span>Lighter</span> - </li> - </ul> - <ul class="headers-and-sizes"> - <li> - <h1>Header 1</h1> - </li> - <li> - <h2>Header 2</h2> - </li> - <li> - <h3>Header 3</h3> - </li> - <li> - <h4>Header 4</h4> - </li> - <li> - <h5>Header 5</h5> - </li> - <li> - <h6>Header 6</h6> - </li> - <li> - <i>Italics</i><br> - </li> - <li> - <strong>Strong / Emphasized</strong><br> - </li> - <li> - <small>Small Text</small> - </li> - </ul> - </section> - <section id="icons" class="guide-section" name="icons"> - <h2>Icons</h2> - <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> - -<script src="/bower_components/jquery/dist/jquery.js"></script> -<script src="/js/style_guide/main.js"></script> -</body> -</html> |