Included in:

Not included in any file!

Depends from:

BreakpointMixins.mobile('max')

BreakpointMixins.tablet('max')

BuilderMixins.build-properties($spacings-map, 'space')

Local variables:

$size-gap-tablet: 0.8

$size-gap-mobile: 0.6

$spacings-map: ( 'none': 0, 'xxs' : .5rem, 'xs' : .75rem, 'sm' : 1rem, 'md' : 2rem, 'lg' : 4rem, 'xl' : 6rem, 'xxl' : 8rem, )

--space-xxs: #{ calc(map-get($spacings-map, 'xxs') * $size-gap-tablet) }

--space-xs: #{ calc(map-get($spacings-map, 'xs') * $size-gap-tablet) }

--space-sm: #{ calc(map-get($spacings-map, 'sm') * $size-gap-tablet) }

--space-md: #{ calc(map-get($spacings-map, 'md') * $size-gap-tablet) }

--space-lg: #{ calc(map-get($spacings-map, 'lg') * $size-gap-tablet) }

--space-xl: #{ calc(map-get($spacings-map, 'xl') * $size-gap-tablet) }

--space-xxl: #{ calc(map-get($spacings-map, 'xxl') * $size-gap-tablet) }

--space-xs: #{ calc(map-get($spacings-map, 'xxs') * $size-gap-mobile) }

--space-xs: #{ calc(map-get($spacings-map, 'xs') * $size-gap-mobile) }

--space-sm: #{ calc(map-get($spacings-map, 'sm') * $size-gap-mobile) }

--space-md: #{ calc(map-get($spacings-map, 'md') * $size-gap-mobile) }

--space-lg: #{ calc(map-get($spacings-map, 'lg') * $size-gap-mobile) }

--space-xl: #{ calc(map-get($spacings-map, 'xl') * $size-gap-mobile) }

--space-xxl: #{ calc(map-get($spacings-map, 'xxl') * $size-gap-mobile) }

component

Spacing

...

Customizable properties

:root {
  --space-none: 0;
  --space-xxs : .5rem;
  --space-xs  : .75rem;
  --space-sm  : 1rem;
  --space-md  : 2rem;
  --space-lg  : 4rem;
  --space-xl  : 6rem;
  --space-xxl : 8rem;
}

Total declarations

Important
declarations

Vendor
prefixes

--space-xxs#{ calc(map-get($spacings-map, 'xxs') * $size-gap-tablet) }

--space-xs#{ calc(map-get($spacings-map, 'xs') * $size-gap-tablet) }

--space-sm#{ calc(map-get($spacings-map, 'sm') * $size-gap-tablet) }

--space-md#{ calc(map-get($spacings-map, 'md') * $size-gap-tablet) }

--space-lg#{ calc(map-get($spacings-map, 'lg') * $size-gap-tablet) }

--space-xl#{ calc(map-get($spacings-map, 'xl') * $size-gap-tablet) }

--space-xxl#{ calc(map-get($spacings-map, 'xxl') * $size-gap-tablet) }

--space-xs#{ calc(map-get($spacings-map, 'xxs') * $size-gap-mobile) }

--space-xs#{ calc(map-get($spacings-map, 'xs') * $size-gap-mobile) }

--space-sm#{ calc(map-get($spacings-map, 'sm') * $size-gap-mobile) }

--space-md#{ calc(map-get($spacings-map, 'md') * $size-gap-mobile) }

--space-lg#{ calc(map-get($spacings-map, 'lg') * $size-gap-mobile) }

--space-xl#{ calc(map-get($spacings-map, 'xl') * $size-gap-mobile) }

--space-xxl#{ calc(map-get($spacings-map, 'xxl') * $size-gap-mobile) }

Floats
declared

3 --space-xs

2 --space-lg

2 --space-md

2 --space-sm

2 --space-xl

2 --space-xxl

1 $size-gap-mobile

1 $size-gap-tablet

1 $spacings-map

Component structure

use '../utilities/mixins/builders' as BuilderMixins {...}

use '../utilities/mixins/breakpoints' as BreakpointMixins {...}

:root {...}

include BuilderMixins.build-properties($spacings-map, 'space');

include BreakpointMixins.tablet('max');

include BreakpointMixins.mobile('max');