consul/grecia
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adjust icon margins on small screens

Browse Source 
On these screens, sometimes the icons will be `$sdg-icon-min-width`
wide, but the margins were not taking this into account.

We can use CSS `max` function to set minimum margins just like we set
minimum width. However, there are two things to take into account:

* LibSass does not support these functions as it tries to use Sass own
  functionst at compile time, so we need to hack them writing `Max()`
  (which works in CSS because it is not case sensitive)
* Not all browsers support it (90% at the time of writing), so we write
  the rules twice (the first time for browsers not supporting it); we
  could use `@supports` but then we would have to overwrite some of the
  rules in the `.sdg-goals-index .sdg-goal-list` selector using
  `!important` or adding a `@supports` clause there as well
This commit is contained in:
Javi Martín
2021-01-29 16:56:40 +01:00
parent adc66cb28e
commit cdfa23fc6f
1 changed files with 8 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/assets/stylesheets/mixins.scss
View File

@@ -228,16 +228,24 @@
} }
@mixin sdg-goal-list($spacing: 1ch) { @mixin sdg-goal-list($spacing: 1ch) {
$min-spacing: $sdg-icon-min-width / 10;
$max-spacing: #{"Max(#{$min-spacing}, #{$spacing})"};
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
list-style: none; list-style: none;
margin: -$spacing 0 $line-height / 3 -#{$spacing}; margin: -$spacing 0 $line-height / 3 -#{$spacing};
margin-left: calc(-1 * #{$max-spacing});
margin-top: calc(-1 * #{$max-spacing});
width: calc(100% + #{$spacing}); width: calc(100% + #{$spacing});
width: calc(100% + #{$max-spacing});
li { li {
margin-bottom: 0; margin-bottom: 0;
margin-left: $spacing; margin-left: $spacing;
margin-left: $max-spacing;
margin-top: $spacing; margin-top: $spacing;
margin-top: $max-spacing;
} }
} }