Merge remote-tracking branch 'origin/refactor-buttons' into develop

1 files changed, 135 insertions, 42 deletions

diff --git a/assets/stylesheets/responsive/custom.scss b/assets/stylesheets/responsive/custom.scss
index 3f44501..8c61de7 100644
--- a/assets/stylesheets/responsive/custom.scss
+++ b/assets/stylesheets/responsive/custom.scss
@@ -121,57 +121,90 @@ input.use-datepicker[type=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 {
-  text-decoration: none;
-  color: $button-color;
-  background-color: darken($button-bg, 5%);
+/* Button styles */
+
+@mixin button-base($size: normal, $disabled: false) {
+  padding: 0.5em 1.25em;
+  border-radius: 3px;
   display: inline-block;
-  cursor: pointer;
-  /* This style is expressed for all borders to avoid triggering an IE9 border rendering bug */
-  border-style: solid; border-color: darken($button-bg, 15%); border-width: 0 0 4px 0;
-  border-radius: 0;
-  padding: 3px 7px;
-  line-height: normal;
-  font-size: 1.1rem;
-  /* Same height as form elements */
-  height: 2.3125rem;
-  @include ie8 {
-     height: 2.3125em;
-     font-size: 1.1em;
-   }
-  vertical-align: top;
-  &:focus, &:hover{
+  font-weight: 600;
+  text-decoration: none;
+  transition: background-color 300ms ease-out;
+  margin-bottom: 0;
+  font-family: $font-family;
+  @if $size == large {
+    font-size: 2.2em;
+  }
+  &:hover,
+  &:active,
+  &:focus {
     text-decoration: none;
-    background-color: darken($button-bg, 10%);
-    border-bottom: 4px solid darken($button-bg, 20%);
+    transition: background-color 300ms ease-out;
+  }
+  @if $disabled {
+    opacity: 0.333;
+    transition: none;
+    &:hover,
+    &:active,
+    &:focus {
+      background-color: inherit;
+      color: inherit;
+      cursor: default;
+      transition: none;
+    }
   }
 }
 
-@include lte-ie7{
+@mixin button-primary($args...) {
+  @include button-base($args...);
+  color: $color_white;
+  background-color: $button-bg;
+  border: none;
+  &:hover,
+  &:active,
+  &:focus,
+  &:visited:hover,
+  &:visited:active,
+  &:visited:focus {
+    background-color: darken($button-bg, 10%);
+    color: $color_white;
+  }
+}
 
-  a.link_button_green, a.link_button_green_large {
-    padding: 0 7px;
-    height: 31px;
-    font-weight: bold;
+@mixin button-secondary($args...) {
+  @include button-base($args...);
+  background-color: desaturate(darken($color_sand, 10%), 5%);
+  color: $color_black;
+  font-weight: normal;
+  &:hover,
+  &:active,
+  &:focus {
+    color: $color_black;
+    background-color: desaturate(darken($color_sand, 20%), 5%);
   }
+}
 
-  form input[type=submit] {
-    padding: 0;
-    height: 35px;
+@mixin button-tertiary($args...) {
+  @include button-base($args...);
+  background-color: desaturate(darken($color_sand, 5%), 5%);;
+  color: $color_black;
+  font-weight: normal;
+  border: 1px solid desaturate(darken($color_sand, 15%),5%);
+  &:hover,
+  &:active,
+  &:focus {
+    background-color: darken($color_sand, 7.5%);
+    border: 1px solid desaturate(darken($color_sand, 25%),5%);
   }
 }
 
+form input[type=submit], a.link_button_green, a.link_button_green_large {
+  @include button-primary;
+  text-decoration: none;
+}
+
 a.link_button_green_large {
-  font-size: 2.2rem;
-  height: inherit;
-  padding: 0 10px;
-  @include ie8 {
-     font-size: 2.2em;
-     height: 66px;
-   }
-   @include lte-ie7 {
-     height: 50px;
-   }
+  @include button-primary($size: large);
 }
 
 /* Popups */
@@ -604,6 +637,18 @@ a.link_to_this {
   }
 }
 
+.feed_link_sidebar .link_button_green {
+  @include button-primary();
+}
+
+.report-this-request {
+  @include button-secondary();
+  color: $color_black !important;
+  /* Using !important here as a temporary fix for a bad declaration (a:link)
+    in Alaveteli core. When this is fixed it can be removed.
+  */
+}
+
 /* Status lines and icons */
 .icon_waiting_classification,
 .icon_waiting_response,
@@ -647,6 +692,12 @@ a.link_to_this {
   }
 }
 
+#header_right {
+  .link_button_green {
+    @include button-secondary;
+  }
+}
+
 /* User page */
 #user_photo_on_profile {
   img, #set_photo {
@@ -666,11 +717,16 @@ dt {
 
 /* Front page */
 /* Drop the extract indentation on small screens */
-#frontpage_examples .excerpt {
+#frontpage_examples {
+  .excerpt {
     padding: 0.2em 0 0 0;
     @include respond-min( $main_menu-mobile_menu_cutoff ){
       padding: 0 0 0 2em;
     }
+  }
+  p strong a {
+    @include button-secondary;
+  }
 }
 
 /* How it works section */
@@ -713,9 +769,26 @@ dt {
 }
 
 .learn-more-foi {
-  @extend .button-secondary;
   @include respond-min( $main_menu-mobile_menu_cutoff ){
-    margin-top: 2em;
+    margin-top: 3em;
+  }
+  a {
+    @include button-secondary;
+  }
+}
+
+.learn-more-foi {
+  @include respond-min( $main_menu-mobile_menu_cutoff ){
+    margin-top: 3em;
+  }
+  a {
+    @include button-secondary;
+  }
+}
+
+.latest-requests {
+  .button-secondary {
+    @include button-secondary;
   }
 }
 
@@ -725,6 +798,15 @@ dt {
   font-size: 1.1rem;
 }
 
+.action-bar__follow-button {
+  .link_button_green {
+    @include button-secondary();
+  }
+}
+
+.authority__body__sidebar form input[type=submit] {
+  @include button-secondary();
+}
 
 .homepage-hero {
   background-color: $color_neutral_dark;
@@ -748,6 +830,17 @@ dt {
       color: $color_white;
     }
   }
+
+  .new-request__make-new-requests {
+    @include button-base;
+    background-color: desaturate(darken($color_secondary, 10%), 5%);
+    color: $color_white;
+    &:hover,
+    &:active,
+    &:focus {
+      background-color: darken($color_secondary, 20%);
+    }
+  }
 }
 
 .intro__title {