From 20b06d59d38050445fb385efc19e655640de8538 Mon Sep 17 00:00:00 2001
From: Chris Lawton <chris.lawton@torchbox.com>
Date: Tue, 7 Aug 2018 10:50:12 +0100
Subject: [PATCH] add mobile gutter variable
---
opentech/apply/users/templates/users/account.html | 3 +--
.../static_src/src/sass/apply/abstracts/_variables.scss | 3 +++
.../static_src/src/sass/apply/components/_admin-bar.scss | 8 +++++++-
.../static_src/src/sass/apply/components/_section.scss | 2 +-
.../static_src/src/sass/apply/components/_wrapper.scss | 6 +++++-
5 files changed, 17 insertions(+), 5 deletions(-)
diff --git a/opentech/apply/users/templates/users/account.html b/opentech/apply/users/templates/users/account.html
index fec9e9160..4b5cae87b 100644
--- a/opentech/apply/users/templates/users/account.html
+++ b/opentech/apply/users/templates/users/account.html
@@ -3,11 +3,10 @@
{% block title %}Account{% endblock %}
-
{% block content %}
<div class="admin-bar">
<div class="admin-bar__inner wrapper--search">
- <h3>Welcome {{ user }}</h3>
+ <h3 class="admin-bar__heading">Welcome {{ user }}</h3>
</div>
</div>
diff --git a/opentech/static_src/src/sass/apply/abstracts/_variables.scss b/opentech/static_src/src/sass/apply/abstracts/_variables.scss
index 0b869a8bb..e51f1f81e 100755
--- a/opentech/static_src/src/sass/apply/abstracts/_variables.scss
+++ b/opentech/static_src/src/sass/apply/abstracts/_variables.scss
@@ -87,3 +87,6 @@ $breakpoints: (
// Transition
$transition: 0.25s ease-out;
$quick-transition: 0.15s ease;
+
+// Spacing
+$mobile-gutter: 20px;
diff --git a/opentech/static_src/src/sass/apply/components/_admin-bar.scss b/opentech/static_src/src/sass/apply/components/_admin-bar.scss
index d73851de6..9cc8a34af 100644
--- a/opentech/static_src/src/sass/apply/components/_admin-bar.scss
+++ b/opentech/static_src/src/sass/apply/components/_admin-bar.scss
@@ -3,7 +3,7 @@
right: 50%;
left: 50%;
width: 100vw;
- padding: 20px;
+ padding: $mobile-gutter;
margin-right: -50vw;
margin-left: -50vw;
color: $color--white;
@@ -22,4 +22,10 @@
}
}
}
+
+ &__heading {
+ &:only-child {
+ margin-bottom: 0;
+ }
+ }
}
diff --git a/opentech/static_src/src/sass/apply/components/_section.scss b/opentech/static_src/src/sass/apply/components/_section.scss
index 8137fac1c..4b7d3979b 100644
--- a/opentech/static_src/src/sass/apply/components/_section.scss
+++ b/opentech/static_src/src/sass/apply/components/_section.scss
@@ -1,7 +1,7 @@
.section {
&--has-sidebar {
flex-grow: 1;
- margin: 20px 0;
+ margin: $mobile-gutter 0;
@include media-query(tablet-portrait) {
padding-right: 20px;
diff --git a/opentech/static_src/src/sass/apply/components/_wrapper.scss b/opentech/static_src/src/sass/apply/components/_wrapper.scss
index fe5c73668..cd3161730 100644
--- a/opentech/static_src/src/sass/apply/components/_wrapper.scss
+++ b/opentech/static_src/src/sass/apply/components/_wrapper.scss
@@ -17,7 +17,11 @@
}
&--main {
- padding: 0 20px;
+ padding: 0 $mobile-gutter;
+
+ @include media-query(desktop) {
+ padding: 0;
+ }
}
&--blockquote {
--
GitLab