• No results

Spacing

Installation

  yarn add @chewy/kib-foundations

Import

  @use '~@chewy/kib-foundations/src/spacing';

Mixins

custom-properties

@mixin custom-properties($overrides) { ... }@mixin custom-properties($overrides) { 
  $spacing-properies: functions.get-properties($theme);

  @if $overrides {
    $spacing-properies: map.deep-merge($spacing-properies, $overrides);
  }

  @each $key, $value in $spacing-properies {
    #{common.get-property-name($key)}: $value;
  }
 }
Description

Generates CSS Custom Properties for a Chirp's theme set of spacings

Parameters
Parameters
NameDescriptionTypeDefault value
$overrides

Map that overrides any matching values within the theme

Map—
Example

Apply all available properties to the :root of the page

@use '~@chewy/kib-foundations/src/spacing';

:root {
  @include spacing.custom-properties;
}

Apply properties to a selector

@use '~@chewy/kib-foundations/src/spacing';

.chirp-spacings {
  @include spacing.custom-properties;
}

Override a spacing property

@use '~@chewy/kib-foundations/src/spacing';

.chirp-spacings-custom {
  @include spacing.custom-properties($overrides: ('s3': 12px));
}
Requires