// Outputs flex
$flex-utililies: (
align-items: map-collect( map-deep-get($system-properties, align-items, standard), map-deep-get($system-properties, align-items, extended) ), align-self: map-collect( map-deep-get($system-properties, align-self, standard), map-deep-get($system-properties, align-self, extended) ), flex: map-collect( map-deep-get($system-properties, flex, standard), map-deep-get($system-properties, flex, extended) ), flex-direction: map-collect( map-deep-get($system-properties, flex-direction, standard), map-deep-get($system-properties, flex-direction, extended) ), flex-wrap: map-collect( map-deep-get($system-properties, flex-wrap, standard), map-deep-get($system-properties, flex-wrap, extended) ), justify-content: map-collect( map-deep-get($system-properties, justify-content, standard), map-deep-get($system-properties, justify-content, extended) ),
);
@mixin u-flex($value…) {
$value: unpack($value); $important: null; @if has-important($value) { $value: remove($value, "!important"); $important: " !important"; } @each $this-value in $value { $match: false; @each $property, $map in $flex-utililies { @if not $match and map-has-key($map, $this-value) { #{$property}: get-uswds-value($property, $this-value...) #{$important}; $match: true; } } @if not $match { @error '`#{$this-value}` is not a valid `flex` value.'; } }
}