summaryrefslogtreecommitdiff
path: root/web-ui/app
diff options
context:
space:
mode:
authorGabriel Albo <gabriel@albo.com.br>2015-02-27 12:09:10 -0300
committerGabriel Albo <gabriel@albo.com.br>2015-02-27 14:16:09 -0300
commitc9a6c938557d64e1ad997476aadb2f7684f6f2d8 (patch)
tree5fb3568923eb14eaa1fa6405f8a69d7f468ddc47 /web-ui/app
parent1a4ab72b9d355cc1d224edac36bee2a2bbe8ebc5 (diff)
Refactoring colors: better defining variable names, extracting hard-coded hex codes, normalizing link styles, organizing _colors files.
Diffstat (limited to 'web-ui/app')
-rw-r--r--web-ui/app/scss/_colors.scss25
-rw-r--r--web-ui/app/scss/_mixins.scss2
-rw-r--r--web-ui/app/scss/_read.scss10
-rw-r--r--web-ui/app/scss/styles.scss24
4 files changed, 38 insertions, 23 deletions
diff --git a/web-ui/app/scss/_colors.scss b/web-ui/app/scss/_colors.scss
index 22897ac0..7e90d6ae 100644
--- a/web-ui/app/scss/_colors.scss
+++ b/web-ui/app/scss/_colors.scss
@@ -1,19 +1,24 @@
-$warning: #F7E8AF;
-$search-highlight: #FFEF29;
+/* Side nav background color */
+$navigation_background: #3E3A37;
-$total_count_bg: #C0B9B9;
+/* Action buttons and links */
+$action_buttons: #3dabc4;
-$error: #D72A25;
-$attention: #F6A40A;
-$success: #2DAB49;
+/* Unread count dialog bubble background color */
+$secondary_callout: #FF7902;
+/* Grayscale */
$contrast: #EEE;
$top_pane: #EAEAEA;
-$secondary: #3E3A37;
-$primary_color: #EF4E2F;
-$action_buttons: #2ba6cb;
+$total_count_bg: #C0B9B9;
-$secondary_callout: #FF7902;
+/* Feedback to Users */
+$warning: #F7E8AF;
+$search-highlight: #FFEF29;
+
+$error: #D72A25;
+$attention: #F6A40A;
+$success: #2DAB49;
$will_be_encrypted: #41cd60;
$wont_be_encrypted: #F6A40A;
diff --git a/web-ui/app/scss/_mixins.scss b/web-ui/app/scss/_mixins.scss
index 2d1f8f23..5b59cad6 100644
--- a/web-ui/app/scss/_mixins.scss
+++ b/web-ui/app/scss/_mixins.scss
@@ -76,7 +76,7 @@
position: absolute;
bottom: -2px;
left: 1px;
- color: $secondary;
+ color: $navigation_background;
}
}
diff --git a/web-ui/app/scss/_read.scss b/web-ui/app/scss/_read.scss
index bd30552c..34d7993c 100644
--- a/web-ui/app/scss/_read.scss
+++ b/web-ui/app/scss/_read.scss
@@ -64,6 +64,16 @@
.attachmentsArea {
border-top: 1px solid #DDD;
padding: 10px 0 0;
+
+ a {
+ color: $action_buttons;
+ text-decoration: none;
+ line-height: inherit;
+ &:hover, &:focus {
+ color: lighten($action_buttons, 10);
+ outline: none;
+ }
+ }
}
}
diff --git a/web-ui/app/scss/styles.scss b/web-ui/app/scss/styles.scss
index e1186cef..71427af5 100644
--- a/web-ui/app/scss/styles.scss
+++ b/web-ui/app/scss/styles.scss
@@ -223,7 +223,7 @@ section {
input {
margin: 0;
padding: 8px 30px;
- color: $secondary;
+ color: $navigation_background;
background: white;
border: none;
transition: background-color 150ms ease-out;
@@ -246,10 +246,10 @@ section {
}
&#left-pane {
- background-color: $secondary;
+ background-color: $navigation_background;
color: white;
nav {
- border-right: 1px solid lighten($secondary, 10%);
+ border-right: 1px solid lighten($navigation_background, 10%);
ul#default-tag-list, #custom-tag-list {
li {
transition: background-color 150ms ease-out;
@@ -257,12 +257,12 @@ section {
cursor: pointer;
&:hover {
background: #CCC;
- color: $secondary;
+ color: $navigation_background;
}
&.selected {
font-weight: bold;
background: $contrast;
- color: $secondary;
+ color: $navigation_background;
}
}
}
@@ -370,14 +370,14 @@ section {
ul#logout {
li {
color: $action_buttons;
- background-color: $secondary;
+ background-color: $navigation_background;
padding: 5px 10px;
position: relative;
@include searching(4px, 19px, #333, 0.7em);
&:hover {
background-color: $action_buttons;
- color: $secondary;
+ color: $navigation_background;
}
div {
@@ -401,7 +401,7 @@ section {
padding: 5px;
font-weight: 600;
margin: 0 10px;
- border-bottom: 1px dotted lighten($secondary, 10%);
+ border-bottom: 1px dotted lighten($navigation_background, 10%);
}
}
}
@@ -524,7 +524,7 @@ button {
&:hover, &:focus {
color: white;
}
- background: $secondary;
+ background: $navigation_background;
&.logout {
color: $action_buttons;
}
@@ -550,7 +550,7 @@ button {
width: 50px;
position: absolute;
height: 100vh;
- background: $secondary;
+ background: $navigation_background;
ul.shortcuts {
li {
@@ -562,7 +562,7 @@ button {
opacity: 1;
cursor: default;
a {
- color: $secondary;
+ color: $navigation_background;
}
}
@include searching(6px, 26px, #666, 0.9em);
@@ -575,7 +575,7 @@ button {
text-align: center;
&:hover {
background: darken($contrast, 10%);
- color: $secondary;
+ color: $navigation_background;
@include btn-transition;
&.logout{
color: #000000;