From a385cde264be4124c296ae6b932ec792c3fe3604 Mon Sep 17 00:00:00 2001
From: Chris Lawton <chris.lawton@torchbox.com>
Date: Thu, 8 Mar 2018 12:11:34 +0000
Subject: [PATCH] small spacing changes to form styling, primarily single
checkboxes so the input and checkbox will display on the same line
---
.../src/sass/public/components/_form.scss | 46 ++++++++++++++++---
.../sass/public/components/_rich-text.scss | 4 ++
2 files changed, 44 insertions(+), 6 deletions(-)
diff --git a/opentech/static_src/src/sass/public/components/_form.scss b/opentech/static_src/src/sass/public/components/_form.scss
index cb57a3c91..1d8166740 100644
--- a/opentech/static_src/src/sass/public/components/_form.scss
+++ b/opentech/static_src/src/sass/public/components/_form.scss
@@ -25,16 +25,12 @@
position: relative;
margin: 1rem 0;
- &:nth-of-type(1) {
- margin-top: 0;
- }
-
@include media-query(tablet-portrait) {
margin: 2rem 0;
}
- input[type='date']:last-child {
- max-width: 385px;
+ &:nth-of-type(1) {
+ margin-top: 0;
}
&:last-child {
@@ -43,6 +39,36 @@
margin-bottom: 0;
}
}
+
+ &--wrap {
+ flex-wrap: wrap;
+ }
+
+ &--checkbox {
+ display: flex;
+ align-items: center;
+ margin: 20px 0;
+
+ .form__question {
+ margin: 0;
+ }
+
+ .form__item {
+ position: relative;
+ top: -10px;
+ order: -1;
+ padding: 0;
+ }
+
+ .form__help {
+ order: -2;
+ width: 100%;
+ }
+ }
+
+ input[type='date']:last-child {
+ max-width: 385px;
+ }
}
&__question {
@@ -73,6 +99,10 @@
}
}
}
+
+ &--boolean_field {
+ font-size: 17px;
+ }
// sass-lint:enddisable
}
@@ -266,6 +296,10 @@
// Checkbox specific
input[type='checkbox'] {
+ & + label {
+ display: block;
+ }
+
& + label::before {
transition: background-color $transition;
}
diff --git a/opentech/static_src/src/sass/public/components/_rich-text.scss b/opentech/static_src/src/sass/public/components/_rich-text.scss
index b979962ba..27d689e8d 100644
--- a/opentech/static_src/src/sass/public/components/_rich-text.scss
+++ b/opentech/static_src/src/sass/public/components/_rich-text.scss
@@ -1,6 +1,10 @@
.rich-text {
margin-bottom: 2rem;
+ .form & {
+ margin-bottom: 0;
+ }
+
a {
font-weight: $weight--bold;
border-bottom: 1px solid transparent;
--
GitLab