Merge branch 'master' into develop

2 files changed, 134 insertions, 42 deletions

diff --git a/assets/stylesheets/responsive/custom.scss b/assets/stylesheets/responsive/custom.scss
index b0a1d6c..9debf2f 100644
--- a/assets/stylesheets/responsive/custom.scss
+++ b/assets/stylesheets/responsive/custom.scss
@@ -1,47 +1,76 @@
-$locale-bg: #333;
-$locale-color: #999999;
-$locale-hover-color: #fff;
-$link-color: #336C86;
-$body-font-color: #333;
-$body-bg: #f7eee1;
-$button-bg: #8b9352;
-$button-color: #fff;
-$heading-color: #3d3b38;
+$color_sand: #f7eee1;
+$color_light_blue: #67848C;
+$color_blue: #336C86;
+$color_dark_blue: #2c5d74;
+$color_darker_blue: #354C56;
+$color_red: #8c6673;
+$color_dark_red: #A1432C;
+$color_teal: #6d918d;
+$color_green: #8b9352;
+$color_bright_green: #839310;
+$color_light_green: #AAB26E;
+$color_pale_green: #D7DABD;
+$color_orange: #CC8245;
+$color_bright_orange: #FF7959;
+$color_pale_orange: #EBC3A9;
+$color_yellow: #E69E5D;
+$color_pale_yellow: #EDD3B8;
+$color_black_alt: #3d3b38;
+$color_black: #333333;
+$color_mid_grey: #999999;
+$color_light_grey: #CCCCCC;
+$color_lighter_grey: #D3D3D3;
+$color_mid_cold_grey: #9AA6AB;
+$color_white: #ffffff;
+
+$body-bg: $color_sand;
+
+$locale-bg: $color_black;
+$locale-color: $color_mid_grey;
+$locale-hover-color: $color_white;
+
+$body-font-color: $color_black;
+$link-color: $color-blue;
+$heading-color: $color_black-alt;
 $font-family: "Roboto Slab", Georgia, serif;
 $sans-serif-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+$form_input-bg: $color_white;
 
-$main_menu-bg: #2c5d74;
-$main_menu-search_text: #333;
-$main_menu-link_text: #fff;
-$main_menu-search_bg: #67848c;
-$banner_bg: #354c56;
-$submenu-color: #9aa6ab;
+$button-bg: $color_green;
+$button-color: $color_white;
 
-$main_menu-link_bg: #2c5d74;
+$banner_bg: $color_darker_blue;
+
+$main_menu-bg: $color_dark_blue;
+$main_menu-search_text: $color_black;
+$main_menu-link_text: $color_white;
+$main_menu-search_bg: $color_light_blue;
+$main_menu-link_bg: $color_dark_blue;
 $main_menu-active_link_text: $main_menu-link_bg;
 $main_menu-active_link_bg: $body-bg;
+$submenu-color: $color_mid_cold_grey;
 
-$footer-bg: #333;
-$footer-color: #ccc;
-$footer-link-color: #fff;
+$footer-bg: $color_black;
+$footer-color: $color_light_grey;
+$footer-link-color: $color_white;
 
-$incoming-correspondence-color: #8c6673;
-$outgoing-correspondence-color: #6d918d;
-$correspondence-bg: #fff;
-$correspondence-shadow: #d3d3d3;
+$incoming-correspondence-color: $color_red;
+$outgoing-correspondence-color: $color_teal;
+$correspondence-bg: $color_white;
+$correspondence-shadow: $color_light_grey;
 
-$status-success: #aab26e;
-$status-failure: #ff7959;
-$status-pending: #e69e5d;
+$status-success: $color_light_green;
+$status-failure: $color_bright_orange;
+$status-pending: $color_yellow;
 
-$notice-bg: #D7DABD;
-$notice-border: #839310;
+$notice-bg: $color_pale_green;
+$notice-border: $color_bright_green;
 
-$error-bg: #ebc3a9;
-$error-border: #a1432c;
+$error-bg: $color_pale_orange;
+$error-border: $color_dark_red;
 
-$action-bg: #edd3b8;
-$action-border: #d69457;
+$action-bg: $color_pale_yellow;
+$action-border: $color_orange;
 
 /* Mixin styles */
 
@@ -126,7 +155,7 @@ form input[type="url"],
 form input[type="tel"],
 form input[type="number"] {
     border-radius: 0;
-    background-color: $main_menu-link_text;
+    background-color: $form_input-bg;
     /* Set a fixed height for text inputs in older IE 8 */
     @include ie8{
         height: 2.3125em;
@@ -139,7 +168,7 @@ form input[type="number"] {
 
 input.use-datepicker[type=text] {
   width: 130px;
-  background:image-url('calendar.png') no-repeat 100px 5px $main_menu-link_text;
+  background:image-url('calendar.png') no-repeat 100px 5px $form_input-bg;
 }
 
 form input[type=submit], a.link_button_green, a.link_button_green_large {
@@ -252,7 +281,7 @@ a.link_button_green_large {
     border-radius: 0;
     font-size: inherit;
     &:focus{
-        background-color: $main_menu-link_text;
+        background-color: $form_input-bg;
     }
   }
 }
@@ -551,3 +580,5 @@ dt {
   padding: 3px;
   font-size: 1.1rem;
 }
+
+
diff --git a/assets/stylesheets/widget.scss b/assets/stylesheets/widget.scss
index bbd3a9f..e0fa302 100644
--- a/assets/stylesheets/widget.scss
+++ b/assets/stylesheets/widget.scss
@@ -1,4 +1,3 @@
-
 $body-bg: #f7eee1;
 $button-bg: #8b9352;
 $heading-color: #3d3b38;
@@ -6,7 +5,6 @@ $status-success: #aab26e;
 $status-failure: #ff7959;
 $status-pending: #e69e5d;
 
-
 /* CSS Mini Reset */
 
 html, body, div, form, fieldset, legend, label
@@ -45,7 +43,7 @@ body {
     font-size: 1em;
 }
 
-a{ 
+a{
   color: #336c86;
   text-decoration: none;
 }
@@ -56,6 +54,40 @@ a:active {
     color: #333;
 }
 
+/* Button styles */
+.button-base {
+    padding: 0.5em 1.25em;
+    border-radius: 3px;
+    display: inline-block;
+    font-weight: 600;
+    text-decoration: none;
+    transition: background-color 300ms ease-out;
+    margin-bottom: 0;
+    font-size: 0.875em;
+    text-align: center;
+    &:hover,
+    &:active,
+    &:focus {
+        text-decoration: none;
+        transition: background-color 300ms ease-out;
+        cursor: pointer;
+    }
+}
+
+.button-disabled {
+  background-color: #f4f4f4 !important;
+  border: 1px solid #e9e9e9 !important;
+  cursor: default !important;
+  color: #333 !important;
+  font-weight: normal;
+  &:hover,
+  &:active,
+  &:focus {
+    background-color: #f4f4f4 !important;
+    color: #333 !important;
+  }
+}
+
 .alaveteli-widget {
     width: 318px;
     height: 213px;
@@ -129,6 +161,7 @@ a:active {
   text-align: center;
   line-height: 1.3em;
 }
+
 .alaveteli-widget__count {
     font-size: 55px;
     line-height: 55px;
@@ -137,15 +170,43 @@ a:active {
     color: $button-bg;
 }
 
+.alaveteli-widget__bottom {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 72%;
+  padding: 1em 0 0.9em 1em;
+}
+
 .alaveteli-widget__bottom a {
     text-decoration: none;
 }
 
 .alaveteli-widget__button {
-    position: absolute;
-    left: 16px;
-    text-align: center;
-    top: 167px;
+    @extend .button-base;
+    color: #fff;
+    background-color: $button-bg;
+    border: none;
+    position: relative;
+    top: 0.375em;
+    &:hover,
+    &:active,
+    &:focus,
+    &:visited:hover,
+    &:visited:active,
+    &:visited:focus {
+        background-color: darken($button-bg, 10%);
+        color: #fff;
+    }
 }
 
+.alaveteli-widget__button--sign-in-to-track {
+  @extend .alaveteli-widget__button;
+  font-size: 13px;
+}
 
+.alaveteli-widget__button--unsubscribe,
+.alaveteli-widget__button--create-track,
+.alaveteli-widget__button--create-vote {
+  @extend .alaveteli-widget__button;
+}