summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorGabriel Albo <gabriel@albo.com.br>2014-08-19 14:43:02 -0300
committerGabriel Albo <gabriel@albo.com.br>2014-08-19 14:43:02 -0300
commitc2079b687ee88632f24fdf31a251c11f7d695a13 (patch)
treee3040bad7ccd569367d662c4e5b8f71d68134043
parent8c0be9560972af7a5562bc39d7e8a7bbb6e4f0c7 (diff)
Adding (hard-coded) color palette section plus a few minor style changes
-rw-r--r--web-ui/app/scss/style-guide.scss43
-rw-r--r--web-ui/app/style-guide.html118
2 files changed, 122 insertions, 39 deletions
diff --git a/web-ui/app/scss/style-guide.scss b/web-ui/app/scss/style-guide.scss
index f6b957df..77efdfa8 100644
--- a/web-ui/app/scss/style-guide.scss
+++ b/web-ui/app/scss/style-guide.scss
@@ -1,4 +1,5 @@
@import "compass/css3";
+@import "styles.scss";
body {
display: block;
@@ -12,10 +13,18 @@ nav {
width: 100%;
background-color: #3e3a37;
color: white;
+ opacity: 0.95;
}
ul li {
display: inline;
+
+ a {
+ color: $primary_color;
+ }
+ a:hover {
+ color: lighten($primary_color, 15%);
+ }
}
ul.left, ul.right {
@@ -32,15 +41,33 @@ ul.right {
section.guide-section {
display: block;
- height: 550px;
+ height: 100%;
overflow-y: auto;
padding: 82px 32px;
+}
- &:nth-child(even) {
- background: white
- }
-
- &:nth-child(odd) {
- background: #E5E5E3
- }
+.color-swatch {
+ width: 160px;
+ height: 230px;
+ background-color: #344a5f;
+ border-radius: 5px;
+ display: inline-block;
+ margin-right: 15px;
}
+
+.color-label {
+ position: relative;
+ top: 173px;
+ 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;
+}
+
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>