Bug - Clearfix mixin not working in IE8

TrebBrennan commented 7 years ago

What I did

 background-color: red;
 @include clearfix;

Used @include clearfix; on an element whose children are floating, expecting that the element and it's padding will wrap those floated elements.

What browser and device I was using

IE8

What I saw

What I should see

Additional information (optional)

It appears to me that this is caused by UI-Kit using &::after [CSS3] rather than &:after [CSS2] ... The tricky thing is that it's written as &:after in the SCSS but its being compiled as &::after in the CSS.

Ref: http://caniuse.com/#feat=css-gencontent

petronbot commented 7 years ago

@TrebBrennan There's another clearfix mixin to use when IE8 support is needed:

https://github.com/AusDTO/gov-au-ui-kit/blob/develop/assets/sass/utils/_mixins.scss#L46

Edit: And here's an example of how it's used in UI-Kit

https://github.com/AusDTO/gov-au-ui-kit/blob/7eaa0fa26c2a89d813d69af2b6fd2d9dad460db9/assets/sass/components/_page-header.scss#L100

TrebBrennan commented 7 years ago

Cheers Petra.

AusDTO / gov-au-ui-kit