From ab5baa6483313db4ef1296188a9eee806222b834 Mon Sep 17 00:00:00 2001
From: Chris Lawton <chris.lawton@torchbox.com>
Date: Tue, 16 Jan 2018 12:41:44 +0000
Subject: [PATCH] fixing issue with login/language buttons breaking on to two
lines when the viewport is at the tablet portrait width
---
.../src/sass/components/_button.scss | 18 +++++++++++++++---
.../static_src/src/sass/components/_nav.scss | 2 +-
2 files changed, 16 insertions(+), 4 deletions(-)
diff --git a/opentech/static_src/src/sass/components/_button.scss b/opentech/static_src/src/sass/components/_button.scss
index 19e7322e6..5d59d72e8 100644
--- a/opentech/static_src/src/sass/components/_button.scss
+++ b/opentech/static_src/src/sass/components/_button.scss
@@ -27,24 +27,36 @@
}
&--narrow {
- padding: 5px 15px;
+ padding: 5px;
font-size: 15px;
+
+ @include media-query(tablet-landscape) {
+ padding: 5px 15px;
+ }
}
// cannot conform to BEM here in order to be able to override google button styles
&--google-translate {
- width: 180px;
+ width: 160px;
margin-left: 10px;
+ @include media-query(tablet-landscape) {
+ width: 180px;
+ }
+
.goog-te-gadget-simple {
@include button(transparent, $color--white);
- padding: 5px 15px;
+ padding: 5px;
font-family: $font--primary;
font-size: 15px;
font-weight: $weight--bold;
border: 1px solid $color--white;
transition: background, color, $transition;
+ @include media-query(tablet-landscape) {
+ padding: 5px 15px;
+ }
+
&:hover {
.goog-te-menu-value {
span {
diff --git a/opentech/static_src/src/sass/components/_nav.scss b/opentech/static_src/src/sass/components/_nav.scss
index b4d94ecac..1cc45182e 100644
--- a/opentech/static_src/src/sass/components/_nav.scss
+++ b/opentech/static_src/src/sass/components/_nav.scss
@@ -144,7 +144,7 @@
&__link {
display: inline-block;
- padding: 20px 15px;
+ padding: 20px 10px;
color: $color--white;
border-bottom: 1px solid transparent;
transition: color, border $transition;
--
GitLab