packages/styles/scss/utilities/_sizing.scss

   1 @use 'sass:math';
   2 @use 'sass:map';
   3
   4 // Usually used with `flex` when we want to avoid min sizes to 0 on direct children
   5 .\*\:min-size-auto > * {
   6         min-block-size: auto;
   7         min-inline-size: auto;
   8 }
   9
  10 // ----------------------------------------------------------------------------
  11
  12 @function pixel-to-rem($value) {
  13         @return if(type-of($value) == 'number' and unitless($value), rem($value), $value);
  14 }
  15
  16 $dummy-map: ();
  17
  18 /// These sizings were defined in collaboration with the Design team.
  19 /// Please contact the UXE team if you need any additional one.
  20 /// If you can't find what you need, please consider using custom sizing utilities:
  21 /// https://design-system.protontech.ch/?path=/docs/css-utilities-sizing--fractions#custom
  22
  23 @each $direction, $property in (w: inline, h: block) {
  24         @each $boundary in (min, '', max) {
  25                 // Common property name
  26                 $propname: dash-join($boundary, $property, 'size');
  27
  28                 // Framework
  29                 @each $sizingname,
  30                         $size in ('0': 0, 'px': '1px', '2': 8, '4': 16, '6': 20, 'full': 100%, 'auto': 'auto', 'none': 'none')
  31                 {
  32                         @if not(($sizingname == 'auto' and $boundary != '') or ($sizingname == 'none' and $boundary == '')) {
  33                                 $classname: dash-join($boundary, $direction, $sizingname);
  34                                 $value: pixel-to-rem($size);
  35                                 $dummy-map: map.merge($dummy-map, (#{$classname}: (#{$propname}: #{$value})));
  36                         }
  37                 }
  38
  39                 // Fractions
  40                 @if $direction == 'w' {
  41                         // Do not add any new value here without asking UXE team!
  42                         @each $i in (2, 3, 4, 5, 6, 10) {
  43                                 @for $j from 1 through $i - 1 {
  44                                         $classname: dash-join($boundary, $direction, $j + '\\\/' + $i);
  45                                         $value: math.div($j, $i) * 100%;
  46                                         $dummy-map: map.merge($dummy-map, (#{$classname}: (#{$propname}: #{$value})));
  47                                 }
  48                         }
  49                 }
  50
  51                 // Customs
  52                 $classname: dash-join($boundary, $direction, 'custom');
  53                 $value: var(--#{'[BPN]' + $classname});
  54                 $dummy-map: map.merge($dummy-map, (#{$classname}: (#{$propname}: #{$value})));
  55         }
  56 }
  57
  58 // We need to serialize the classes to avoid any cascade ordering issues
  59 @include responsive-classes($dummy-map);