// vf-stack @import 'package.variables.scss'; // Debug information from component's `package.json`: // --- /*! * Component: #{map-get($componentInfo, 'name')} * Version: #{map-get($componentInfo, 'version')} * Location: #{map-get($componentInfo, 'location')} */ @import 'vf-stack.variables.scss'; /* * * vf-stack * heavily inspired by: https://every-layout.dev/layouts/stack/ * * 1. removes bottom margin for any child of the vf-stack component. * 2. default for when browsers don't support CSS custom properties. * 3. removes top margin for any child of the vf-stack component. * */ [class^='vf-stack'] > * { margin-bottom: 0; /* [1] */ margin-top: 0; /* [2] */ } // Sets a null vf-stack at the lowest css specificity .vf-stack > * + * > * { --vf-stack-margin: 0; } .vf-stack > * + * { --vf-stack-margin: #{map-get($vf-spacing-map, vf-spacing--400)}; margin-top: #{map-get($vf-spacing-map, vf-spacing--400)}; /* IE Fallback */ margin-top: var(--vf-stack-margin--custom, var(--vf-stack-margin, #{map-get($vf-spacing-map, vf-spacing--400)})); /* [3] */ } .vf-stack--200 > * + * { --vf-stack-margin: #{map-get($vf-spacing-map, vf-spacing--200)}; } .vf-stack--400 > * + * { --vf-stack-margin: #{map-get($vf-spacing-map, vf-spacing--400)}; } .vf-stack--500 > * + * { --vf-stack-margin: #{map-get($vf-spacing-map, vf-spacing--500)}; } .vf-stack--600 > * + * { --vf-stack-margin: #{map-get($vf-spacing-map, vf-spacing--600)}; } .vf-stack--800 > * + * { --vf-stack-margin: #{map-get($vf-spacing-map, vf-spacing--800)}; } .vf-stack--1200 > * + * { --vf-stack-margin: #{map-get($vf-spacing-map, vf-spacing--1200)}; } .vf-stack--1600 > * + * { --vf-stack-margin: #{map-get($vf-spacing-map, vf-spacing--1600)}; } // vf-stack should not apply between a hero and vf-u-fullbleed .vf-stack > .vf-hero + .vf-u-fullbleed { margin-top: unset !important; }