From d280fc66cedd781ca9dda1a1392ebfc3ff4e942c Mon Sep 17 00:00:00 2001
From: Chris Lawton <chris.lawton@torchbox.com>
Date: Wed, 31 Jan 2018 14:44:16 +0000
Subject: [PATCH] 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 | 2 +-
opentech/static_src/src/sass/components/_link.scss | 8 ++++++++
2 files changed, 9 insertions(+), 1 deletion(-)
diff --git a/opentech/apply/users/templates/users/login.html b/opentech/apply/users/templates/users/login.html
index e698a8dca..ebc51c7d2 100644
--- a/opentech/apply/users/templates/users/login.html
+++ b/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>
diff --git a/opentech/static_src/src/sass/components/_link.scss b/opentech/static_src/src/sass/components/_link.scss
index 278bf68d0..29a92f8c5 100644
--- a/opentech/static_src/src/sass/components/_link.scss
+++ b/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;
}
--
GitLab