introducing button modifier that reduces padding on mobile for buttons with...

introducing button modifier that reduces padding on mobile for buttons with long titles so they don't break on to multiple lines on smaller screens

opentech/apply/users/templates/users/login.html

@@ -21,7 +21,7 @@
 
 
       <div class="wrapper wrapper--top-bottom-space">
-        <a class="link link--button" href="{% url "social:begin" "google-oauth2" %}?next={% url "users:account" %}">Log in with your OTF email</a>
+        <a class="link link--button link--button-long-text" href="{% url "social:begin" "google-oauth2" %}?next={% url "users:account" %}">Log in with your OTF email</a>
       </div>
 
   </div>

opentech/static_src/src/sass/components/_link.scss

@@ -17,6 +17,14 @@
         }
     }
 
+    &--button-long-text {
+        padding: 10px;
+
+        @include media-query(tablet-portrait) {
+            padding: 10px 60px;
+        }
+    }
+
     &--underlined {
         text-decoration: underline;
     }