darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-04-20 09:10:52 -04:00
Code Issues Packages Projects Releases Wiki Activity

Make vertical spacing CSS classes work with floats

Browse Source 
We have a bunch of helper classes (bottom gutter) which are used to
vertically separate components on the page.

This vertical spacing might get ignored if one of these containers
contains floated items. This is because:

> elements that contain floated items don't take those floated items
> into account in calculating their height
– https://css-tricks.com/containers-dont-clear-floats/

GOV.UK Frontend toolkit has a shim to prevent this from happening.
d15e738b92/stylesheets/_shims.scss (L38-L55)

So this commit uses that shim to make the spacing consistent in older
and newer browsers, irrespective of whether floats are being applied.

This hasn’t been a problem because we’re not using a lot of `float` in
Notify. But we are using it now to work around some other
inconsistencies in old browsers.
This commit is contained in:
Chris Hill-Scott
2017-01-23 10:58:13 +00:00
parent 7cdf6c2495
commit 04c17ecfc0
1 changed files with 6 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/assets/stylesheets/_grids.scss
View File

@@ -22,24 +22,30 @@
@include grid-column(7/8);
}
%bottom-gutter,
.bottom-gutter {
@extend %contain-floats;
margin-bottom: $gutter;
clear: both;
}
.bottom-gutter-2-3 {
@extend %bottom-gutter;
margin-bottom: $gutter-two-thirds;
}
.bottom-gutter-1-2 {
@extend %bottom-gutter;
margin-bottom: $gutter-half;
}
.bottom-gutter-3-2 {
@extend %bottom-gutter;
margin-bottom: $gutter * 3/2;
}
.bottom-gutter-2 {
@extend %bottom-gutter;
margin-bottom: $gutter * 2;
}