// vf-ui-fullbleed @import 'package.variables.scss'; /*! * Component: #{map-get($componentInfo, 'name')} * Version: #{map-get($componentInfo, 'version')} * Location: #{map-get($componentInfo, 'location')} */ /* * 1. we set the variable for the @at-root directive here. * 2. position: relative is needed for the pseudo element. * 3. make the background colour inherit from classanmes in use. * 4. if we can a full bleed background inline with other content we need to reset * the grid to fill all that space. * 5. make the pseudo element 100% of the element so we can see it. * 6. push the pseudo element away from the left of the viewport but allows for potential * 'context customisation'. * 7. If the component has vertical padding we need to make sure the pseudo element * is set to the top of the containing box. * 8. make the pseudo element full-width but allows for potential 'context customisation'. * 9. put the pseudo element 'underneath' the element so it doesn't block. * 10. Because Windows always shows scrollbars this technique creats a horizontal * scroll bar, we need to apply position: relative; to a parent element. Encapsulating this CSS rule inside the component means it would only be set if the site includes this component and it's CSS. */ .vf-u-fullbleed { $vf-u-fullbleed-parent: body !default; /* 1 */ background-position: center center; background-repeat: no-repeat; background-size: 0 0; position: relative; /* 2 */ &::before { background-color: inherit; /* 3 */ background-image: inherit; background-position: inherit; background-repeat: inherit; background-size: cover; content: ''; grid-column: 1 / -1; /* 4 */ height: 100%; /* 5 */ margin-left: calc(50% - 50vw); margin-left: calc(50% - calc(50vw - var(--context-margin--inline, 0px))); /* 6 */ position: absolute; top: 0; /* 7 */ width: 100vw; width: calc(100vw - (var(--context-margin--inline, 0px) * 2)); /* 8 */ z-index: set-layer(vf-z-index--negative); /* 9 */ } @at-root #{$vf-u-fullbleed-parent} { position: relative; /* 10 */ } }