packages/styles/scss/utilities/_flex.scss

   1 @use 'sass:map';
   2
   3 .\*\:items-center > * {
   4         align-items: center;
   5 }
   6
   7 .\*\:self-center > * {
   8         margin-block: auto;
   9         align-self: center;
  10 }
  11
  12 // Create an empty map to make it reachable outside of loops
  13 $dummy-map: ();
  14
  15 // Add `flex-direction` utilities to the map
  16 @each $direction in (row, row-reverse, column, column-reverse) {
  17         $dummy-map: map.merge(
  18                 $dummy-map,
  19                 (
  20                         flex-#{$direction}:
  21                                 (
  22                                         flex-direction: $direction,
  23                                 )
  24                 )
  25         );
  26 }
  27
  28 // Add `justify` utilities to the map
  29 @each $justify in (start, center, end, space-between, space-around, space-evenly) {
  30         // Remove prefix when 'start' and 'end' will be recognized by browsers
  31         $prefix: if($justify == start or $justify == end, 'flex', '');
  32         $dummy-map: map.merge(
  33                 $dummy-map,
  34                 (
  35                         justify-#{$justify}:
  36                                 (
  37                                         justify-content: #{dash-join($prefix, $justify)},
  38                                 )
  39                 )
  40         );
  41 }
  42
  43 // Add `flex-wrap` utilities to the map
  44 @each $wrap in (wrap, wrap-reverse, nowrap) {
  45         $dummy-map: map.merge(
  46                 $dummy-map,
  47                 (
  48                         flex-#{$wrap}:
  49                                 (
  50                                         flex-wrap: #{$wrap},
  51                                 )
  52                 )
  53         );
  54 }
  55
  56 // Add `order` utilities to the map
  57 // Use a for in case we need more
  58 @for $i from 0 through 3 {
  59         $dummy-map: map.merge(
  60                 $dummy-map,
  61                 (
  62                         order-#{$i}:
  63                                 (
  64                                         order: #{$i},
  65                                 )
  66                 )
  67         );
  68 }
  69
  70 @each $order in (initial) {
  71         $dummy-map: map.merge(
  72                 $dummy-map,
  73                 (
  74                         order-#{$order}:
  75                                 (
  76                                         order: #{$order},
  77                                 )
  78                 )
  79         );
  80 }
  81
  82 // Add `align-items` utilities to the map
  83 @each $align in (start, center, end, baseline, stretch, inherit) {
  84         // Remove prefix when 'start' and 'end' will be recognized by browsers
  85         $prefix: if($align == start or $align == end, 'flex', '');
  86         $dummy-map: map.merge(
  87                 $dummy-map,
  88                 (
  89                         items-#{$align}:
  90                                 (
  91                                         align-items: #{dash-join($prefix, $align)},
  92                                 ),
  93                         self-#{$align}:
  94                                 (
  95                                         align-self: #{dash-join($prefix, $align)},
  96                                 )
  97                 )
  98         );
  99 }
 100
 101 // Serialize the responsive utilities creation with the map to avoid any cascade ordering issues
 102 @include responsive-classes($dummy-map);
 103
 104 // ----------------------------------------------------------------------------
 105
 106 @include responsive-classes(
 107         (
 108                 flex-1: (
 109                         // Do not use `0%` for basis:
 110                         // Percentage depends on explicit size of the container, which causes issues with auto height
 111                         flex: 1 1 0,
 112                 ),
 113
 114                 flex-auto: (
 115                         flex: 1 1 auto,
 116                 ),
 117
 118                 flex-initial: (
 119                         flex: 0 1 auto,
 120                 ),
 121
 122                 flex-none: (
 123                         flex: none,
 124                 ),
 125
 126                 grow: (
 127                         flex-grow: 1,
 128                 ),
 129
 130                 grow-2: (
 131                         flex-grow: 2,
 132                 ),
 133
 134                 grow-0: (
 135                         flex-grow: 0,
 136                 ),
 137
 138                 grow-custom: (
 139                         flex-grow: var(--#{'[BPN]' + 'grow-custom'}),
 140                 ),
 141
 142                 shrink: (
 143                         flex-shrink: 1,
 144                 ),
 145
 146                 shrink-0: (
 147                         flex-shrink: 0,
 148                 ),
 149         )
 150 );