alter test on sign button to include gradient and flat versions, chan…

…ge border on buttons

app/assets/stylesheets/application.css.scss

@@ -207,20 +207,24 @@ th, td .numeric {
   background: -ms-linear-gradient(90deg,  $color1 0%,$color2 100%); /* IE10+ */
   background: linear-gradient(90deg,  $color1 0%,$color2 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$color2}', endColorstr='#{$color1}',GradientType=0 ); /* IE6-8 fallback on horizontal gradient */
-  border: 1px solid #{$color1};
+  border: {
+    width: 1px;
+    style: solid;
+    color: #{$color1} #{$color1} darken($color1, 10%);
+  }
   &:hover {
     background: $color2; /* Old browsers */
-    background: -moz-linear-gradient(90deg,  $color1 100%, $color2 0%); /* FF3.6+ */
-    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,$color1), color-stop(100%,$color2)); /* Chrome,Safari4+ */
-    background: -webkit-linear-gradient(90deg,  $color1 100%,$color2 0%); /* Chrome10+,Safari5.1+ */
-    background: -o-linear-gradient(90deg,  $color1 100%,$color2 0%); /* Opera 11.10+ */
-    background: -ms-linear-gradient(90deg,  $color1 100%,$color2 0%); /* IE10+ */
-    background: linear-gradient(90deg,  $color1 100%,$color2 0%); /* W3C */
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$color1}', endColorstr='#{$color2}',GradientType=0 ); /* IE6-8 fallback on horizontal gradient */
+    background: -moz-linear-gradient(90deg,  $color2 0%, $color1 100%); /* FF3.6+ */
+    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, $color2), color-stop(100%,$color1)); /* Chrome,Safari4+ */
+    background: -webkit-linear-gradient(90deg,  $color1 0%,$color2 100%); /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(90deg,  $color2 0%,$color1 100%); /* Opera 11.10+ */
+    background: -ms-linear-gradient(90deg,  $color2 0%,$color1 100%); /* IE10+ */
+    background: linear-gradient(90deg,  $color2 0%,$color1 100%); /* W3C */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$color2}', endColorstr='#{$color1}',GradientType=0 ); /* IE6-8 fallback on horizontal gradient */
   }
 }
 
-.btn.btn-red0 {
+.btn.btn-red0_flat {
   @include button(#ff0000, #ff0000);
 }
 .btn.btn-red1 {
@@ -232,12 +236,27 @@ th, td .numeric {
 .btn.btn-red3 {
   @include button(#B22222, #CD2626);
 }
-.btn.btn-red4 {
-  @include button(#CD3333, #CC3232);
+.btn.btn-red4_with-gradient {
+  @include button(#b11c1c, #CC3232);
 }
 .btn.btn-red5 {
   @include button(#bd3c2d, #ea6156);
 }
+.btn.btn-red1_flat {
+  @include button(#cc1100, #cc1100);
+}
+.btn.btn-red2_flat {
+  @include button(#CD0000, #CD0000);
+}
+.btn.btn-red3_flat {
+  @include button(#B22222, #B22222);
+}
+.btn.btn-red4_flat {
+  @include button(#CD3333, #CD3333);
+}
+.btn.btn-red5_flat {
+  @include button(#bd3c2d, #bd3c2d);
+}
 .progress_box {
   padding: 15px 20px;
   margin-bottom: 10px;

app/helpers/petitions_helper.rb

@@ -89,7 +89,20 @@ def progress_bar_color
   end
 
   def sign_button_color
-    spin! 'change button brightness for sign button (number goes bright to dull, 0 being brightest)', :signature, ["btn-red0", "btn-red1", "btn-red2", "btn-red3", "btn-red4", "btn-red5", "btn-danger"]
+    spin! 'change button brightness and gradient use for sign button (number goes bright to dull, 0 being brightest, flat indicates no gradient)', :signature, [
+      "btn-red1",
+      "btn-red2",
+      "btn-red3",
+      "btn-red4_with-gradient",
+      "btn-red5",
+      "btn-red0_flat",
+      "btn-red1_flat",
+      "btn-red2_flat",
+      "btn-red3_flat",
+      "btn-red4_flat",
+      "btn-red5_flat",
+      "btn-danger"
+    ]
   end
 
   def privacy_policy_position_and_color