From 977081b9265634f2c5de119d46256d2e7b01a878 Mon Sep 17 00:00:00 2001
From: Fredrik Jonsson <frjo@xdeb.org>
Date: Fri, 23 Nov 2018 11:37:21 +0100
Subject: [PATCH] CSS text size cleanup.
---
.../src/sass/apply/abstracts/_mixins.scss | 10 +---
.../src/sass/apply/abstracts/_variables.scss | 6 +-
.../src/sass/apply/base/_typography.scss | 9 +--
.../src/sass/apply/components/_form.scss | 55 +++++++------------
.../src/sass/apply/components/_grid.scss | 4 ++
.../src/sass/public/abstracts/_mixins.scss | 10 +---
.../src/sass/public/abstracts/_variables.scss | 6 +-
.../src/sass/public/base/_typography.scss | 9 +--
.../src/sass/public/components/_form.scss | 31 +++++------
.../src/sass/public/components/_grid.scss | 4 --
.../src/sass/public/components/_nav.scss | 2 -
.../django/forms/widgets/multiple_input.html | 2 +-
12 files changed, 59 insertions(+), 89 deletions(-)
diff --git a/opentech/static_src/src/sass/apply/abstracts/_mixins.scss b/opentech/static_src/src/sass/apply/abstracts/_mixins.scss
index 914ef8b12..24509a3ef 100644
--- a/opentech/static_src/src/sass/apply/abstracts/_mixins.scss
+++ b/opentech/static_src/src/sass/apply/abstracts/_mixins.scss
@@ -41,26 +41,20 @@
-webkit-overflow-scrolling: touch; // sass-lint:disable-line no-misspelled-properties
}
-// Output a rem and px fallback value for the given property
+// Output a rem value for the given property
@mixin rem($property, $values) {
- $px: ();
$rem: ();
@each $value in $values {
@if $value == 0 or $value == auto or $value == inherit {
- $px: append($px, $value);
$rem: append($rem, $value);
}
@else {
- $px: append($px, $value);
$rem: append($rem, rem(strip-unit($value)));
}
}
- // sass-lint:disable no-duplicate-properties
- #{$property}: $px;
#{$property}: $rem;
- // sass-lint:enddisable
}
// Output a `font-size: [x]rem;` declaration for the given px value
@@ -83,7 +77,7 @@
// Button mixin
@mixin button($bg, $hover-bg) {
width: 100%;
- padding: 10px 60px;
+ padding: .5em 60px;
font-weight: $weight--bold;
color: $color--white;
text-align: center;
diff --git a/opentech/static_src/src/sass/apply/abstracts/_variables.scss b/opentech/static_src/src/sass/apply/abstracts/_variables.scss
index 73760616e..8f6c71137 100644
--- a/opentech/static_src/src/sass/apply/abstracts/_variables.scss
+++ b/opentech/static_src/src/sass/apply/abstracts/_variables.scss
@@ -65,8 +65,10 @@ $weight--normal: 400;
$weight--light: 200;
// Font sizes
-$base-font-size: 19px;
-$base-line-height: 29px;
+$base-font-size: 16px;
+$base-font-size-large: 19px;
+$base-line-height: 24px;
+$base-line-height-large: 29px;
$font-sizes: (
alpha: 72px,
beta: 42px,
diff --git a/opentech/static_src/src/sass/apply/base/_typography.scss b/opentech/static_src/src/sass/apply/base/_typography.scss
index d75226549..4eefbfe42 100644
--- a/opentech/static_src/src/sass/apply/base/_typography.scss
+++ b/opentech/static_src/src/sass/apply/base/_typography.scss
@@ -32,9 +32,8 @@ h1, h2, h3, h4, h5, h6,
}
// sass-lint:enddisable
-html,
.body-text {
- font-size: 16px;
+ @include responsive-font-sizes($base-font-size, $base-font-size-large);
}
// Default sizes
@@ -60,10 +59,12 @@ h5, %h5, .epsilon {
}
h6, %h6, .zeta {
- font-size: 15px;
+ @include font-size(zeta);
}
-small, .milli { @include font-size(milli); }
+small, .milli {
+ @include font-size(milli);
+}
// thin
@font-face {
diff --git a/opentech/static_src/src/sass/apply/components/_form.scss b/opentech/static_src/src/sass/apply/components/_form.scss
index 00ae2f53b..44c94c9ae 100644
--- a/opentech/static_src/src/sass/apply/components/_form.scss
+++ b/opentech/static_src/src/sass/apply/components/_form.scss
@@ -6,9 +6,8 @@
margin: 0 0 10px;
label {
- @extend %h4;
display: block;
- margin-bottom: 10px;
+ margin-bottom: .5em;
font-weight: $weight--bold;
}
}
@@ -31,15 +30,6 @@
position: relative;
margin: 1rem 0;
- @include media-query(tablet-portrait) {
- margin: 2rem 0;
-
- // reduce spacing on the profile page
- .profile & {
- margin: 1rem 0;
- }
- }
-
&:nth-of-type(1) {
margin-top: 0;
}
@@ -83,9 +73,8 @@
}
&__question {
- @extend %h4;
display: block;
- margin-bottom: 10px;
+ margin-bottom: .5em;
font-weight: $weight--bold;
// sass-lint:disable class-name-format
@@ -118,7 +107,6 @@
}
&__filters {
- @extend %h6;
display: flex;
padding: 10px 0 30px;
@@ -156,9 +144,6 @@
}
&__label {
- @extend %h5;
- font-weight: $weight--bold;
-
.wrapper--comments & {
font-size: 15px;
}
@@ -169,8 +154,6 @@
}
&__help {
- @extend %h6;
-
.profile & {
margin-top: 0;
}
@@ -182,7 +165,7 @@
> label {
display: block;
- margin-bottom: 10px;
+ margin-bottom: .5em;
}
}
@@ -231,7 +214,7 @@
input[type='datetime-local'] {
width: 100%;
max-width: 385px;
- padding: 10px;
+ padding: .4em;
border: 1px solid $color--mid-grey;
&:disabled {
@@ -298,10 +281,18 @@
}
}
- textarea {
+ textarea,
+ &__textarea {
+ display: block;
width: 100%;
- padding: 10px;
- border: 1px solid $color--light-grey;
+ padding: .4em;
+ margin-bottom: 1em;
+ border: 1px solid $color--mid-grey;
+ line-height: $base-line-height / $base-font-size;
+
+ @include media-query(tablet-portrait) {
+ max-width: 70%;
+ }
}
// Radio + Checkbox
@@ -383,23 +374,15 @@
.errorlist {
padding: 5px;
- margin-bottom: 5px;
+ margin-bottom: .2em;
background: $color--light-pink;
border: 1px solid $color--tomato;
}
- textarea,
- &__textarea {
- display: block;
- width: 100%;
- height: 100px;
- padding: 10px;
- margin-bottom: 20px;
+ .address {
+ padding: .4em;
border: 1px solid $color--mid-grey;
-
- @include media-query(tablet-portrait) {
- max-width: 70%;
- }
+ max-width: 410px;
}
}
diff --git a/opentech/static_src/src/sass/apply/components/_grid.scss b/opentech/static_src/src/sass/apply/components/_grid.scss
index 4a078d7bd..f2196f686 100644
--- a/opentech/static_src/src/sass/apply/components/_grid.scss
+++ b/opentech/static_src/src/sass/apply/components/_grid.scss
@@ -70,6 +70,10 @@
}
}
+ &--no-margin {
+ margin: 0;
+ }
+
&--proposal-info {
padding-bottom: 30px;
margin: 0 0 30px;
diff --git a/opentech/static_src/src/sass/public/abstracts/_mixins.scss b/opentech/static_src/src/sass/public/abstracts/_mixins.scss
index 59f09d333..6fdf746fc 100644
--- a/opentech/static_src/src/sass/public/abstracts/_mixins.scss
+++ b/opentech/static_src/src/sass/public/abstracts/_mixins.scss
@@ -41,26 +41,20 @@
-webkit-overflow-scrolling: touch; // sass-lint:disable-line no-misspelled-properties
}
-// Output a rem and px fallback value for the given property
+// Output a rem value for the given property
@mixin rem($property, $values) {
- $px: ();
$rem: ();
@each $value in $values {
@if $value == 0 or $value == auto or $value == inherit {
- $px: append($px, $value);
$rem: append($rem, $value);
}
@else {
- $px: append($px, $value);
$rem: append($rem, rem(strip-unit($value)));
}
}
- // sass-lint:disable no-duplicate-properties
- #{$property}: $px;
#{$property}: $rem;
- // sass-lint:enddisable
}
// Output a `font-size: [x]rem;` declaration for the given px value
@@ -82,7 +76,7 @@
// Button mixin
@mixin button($bg, $hover-bg) {
- padding: 10px 60px;
+ padding: .5em 60px;
font-weight: $weight--bold;
color: $color--white;
background: $bg;
diff --git a/opentech/static_src/src/sass/public/abstracts/_variables.scss b/opentech/static_src/src/sass/public/abstracts/_variables.scss
index 73760616e..8f6c71137 100644
--- a/opentech/static_src/src/sass/public/abstracts/_variables.scss
+++ b/opentech/static_src/src/sass/public/abstracts/_variables.scss
@@ -65,8 +65,10 @@ $weight--normal: 400;
$weight--light: 200;
// Font sizes
-$base-font-size: 19px;
-$base-line-height: 29px;
+$base-font-size: 16px;
+$base-font-size-large: 19px;
+$base-line-height: 24px;
+$base-line-height-large: 29px;
$font-sizes: (
alpha: 72px,
beta: 42px,
diff --git a/opentech/static_src/src/sass/public/base/_typography.scss b/opentech/static_src/src/sass/public/base/_typography.scss
index 4fe29ffed..4eefbfe42 100644
--- a/opentech/static_src/src/sass/public/base/_typography.scss
+++ b/opentech/static_src/src/sass/public/base/_typography.scss
@@ -32,9 +32,8 @@ h1, h2, h3, h4, h5, h6,
}
// sass-lint:enddisable
-html,
.body-text {
- @include responsive-font-sizes(16px, 19px);
+ @include responsive-font-sizes($base-font-size, $base-font-size-large);
}
// Default sizes
@@ -60,10 +59,12 @@ h5, %h5, .epsilon {
}
h6, %h6, .zeta {
- font-size: 15px;
+ @include font-size(zeta);
}
-small, .milli { @include font-size(milli); }
+small, .milli {
+ @include font-size(milli);
+}
// thin
@font-face {
diff --git a/opentech/static_src/src/sass/public/components/_form.scss b/opentech/static_src/src/sass/public/components/_form.scss
index 611b07aed..92050609b 100644
--- a/opentech/static_src/src/sass/public/components/_form.scss
+++ b/opentech/static_src/src/sass/public/components/_form.scss
@@ -9,9 +9,8 @@
margin: 0 0 10px;
label {
- @extend %h4;
display: block;
- margin-bottom: 10px;
+ margin-bottom: .5em;
font-weight: $weight--bold;
}
}
@@ -25,10 +24,6 @@
position: relative;
margin: 1rem 0;
- @include media-query(tablet-portrait) {
- margin: 2rem 0;
- }
-
&:nth-of-type(1) {
margin-top: 0;
}
@@ -72,9 +67,8 @@
}
&__question {
- @extend %h4;
display: block;
- margin-bottom: 10px;
+ margin-bottom: .5em;
font-weight: $weight--bold;
// sass-lint:disable class-name-format
@@ -106,17 +100,11 @@
// sass-lint:enddisable
}
- &__label {
- @extend %h5;
- font-weight: $weight--bold;
- }
-
&__required {
color: $color--purple;
}
&__help {
- @extend %h6;
}
&__item {
@@ -169,7 +157,7 @@
input[type='datetime-local'] {
width: 100%;
max-width: 385px;
- padding: 10px;
+ padding: .4em;
border: 1px solid $color--mid-grey;
}
@@ -234,8 +222,9 @@
textarea {
width: 100%;
- padding: 10px;
- border: 1px solid $color--light-grey;
+ padding: .4em;
+ border: 1px solid $color--mid-grey;
+ line-height: $base-line-height / $base-font-size;
}
// Radio + Checkbox
@@ -318,8 +307,14 @@
.errorlist {
padding: 5px;
- margin-bottom: 5px;
+ margin-bottom: .2em;
background: $color--light-pink;
border: 1px solid $color--tomato;
}
+
+ .address {
+ padding: .4em;
+ border: 1px solid $color--mid-grey;
+ max-width: 410px;
+ }
}
diff --git a/opentech/static_src/src/sass/public/components/_grid.scss b/opentech/static_src/src/sass/public/components/_grid.scss
index ffffac7b0..27b722c11 100644
--- a/opentech/static_src/src/sass/public/components/_grid.scss
+++ b/opentech/static_src/src/sass/public/components/_grid.scss
@@ -71,10 +71,6 @@
grid-gap: 10px; // sass-lint:disable-line no-misspelled-properties
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
- .form & {
- margin: 0;
- }
-
> * {
flex-basis: initial;
width: auto;
diff --git a/opentech/static_src/src/sass/public/components/_nav.scss b/opentech/static_src/src/sass/public/components/_nav.scss
index d7ba92bde..64dba10c0 100644
--- a/opentech/static_src/src/sass/public/components/_nav.scss
+++ b/opentech/static_src/src/sass/public/components/_nav.scss
@@ -71,12 +71,10 @@
}
&--primary {
- @include font-size(epsilon);
margin: 0;
letter-spacing: 1px;
@include media-query(tablet-landscape) {
- @include font-size(zeta);
margin: 0 18px;
}
}
diff --git a/opentech/templates/django/forms/widgets/multiple_input.html b/opentech/templates/django/forms/widgets/multiple_input.html
index a78adea4e..7917a4ca0 100644
--- a/opentech/templates/django/forms/widgets/multiple_input.html
+++ b/opentech/templates/django/forms/widgets/multiple_input.html
@@ -1,5 +1,5 @@
{% with id=widget.attrs.id %}
- <ul{% if id %} id="{{ id }}"{% endif %} class="grid grid--two{% if widget.attrs.class %} {{ widget.attrs.class }} {% endif %}">
+ <ul{% if id %} id="{{ id }}"{% endif %} class="grid grid--no-margin grid--two{% if widget.attrs.class %} {{ widget.attrs.class }} {% endif %}">
{% for group, options, index in widget.optgroups %}
{% if group %}
<li>{{ group }}<ul{% if id %} id="{{ id }}_{{ index }}"{% endif %}>
--
GitLab