@use '../config'; @use 'sass:list'; @use 'sass:map'; @use './offset'; @use './rel-grid'; @use 'sass-mq' as mq; /// # Show relative grid /// Display the relative grid by adding a class-name to the html element. The /// class-name defaults to "show-rel-grid" but can be customized. /// @output /// A CSS rule to display the relative grid according to your configuration. /// @param {string} $class-name [show-rel-grid] - /// A custom class-name /// @example scss - Usually included once in your root stylesheet /// @use '@pixelherz/sassbox'; /// /// @include sassbox.show-rel-grid($class-name: 'show-grid'); /// @example html - Add the class to your `html` element to make the grid visible /// /// @since 1.0.0 /// @group layout @mixin show-rel-grid($class-name: 'show-rel-grid') { html.#{$class-name} { &::before, &::after { content: ''; display: block; z-index: 9999; pointer-events: none; } &::before { position: fixed; top: 0; left: 50%; right: 0; height: 100%; transform: translateX(-50%); width: 100%; max-width: #{config.$layout-max-width + (offset.get-layout-max-offset() * 2)}; background-color: transparent; background-repeat: no-repeat; background-image: repeating-linear-gradient( to right, rgba(cyan, 0.3) 0, rgba(cyan, 0.3) rel-grid.get-rel-grid-width($cols: 1), transparent rel-grid.get-rel-grid-width($cols: 1), transparent rel-grid.get-rel-grid-width($cols: 1, $gutters: 1) ); border: none; @each $offset in config.$layout-offset { $bp-name: list.nth($offset, 1); // Default (no breakpoint) @if $bp-name == 'default' { background-position: map.get(config.$layout-offset, $bp-name) 0; background-size: calc( 100% - #{map.get(config.$layout-offset, $bp-name) * 2} ); } // Breakpoint @else if map.has-key(mq.$breakpoints, $bp-name) { @include mq.mq($from: $bp-name) { background-position: map.get(config.$layout-offset, $bp-name) 0; background-size: calc( 100% - #{map.get(config.$layout-offset, $bp-name) * 2} ); } } // Breakpoint invalid @else { @warn "Breakpoint '#{$bp-name}' is not defined in $breakpoints. Check your configuration in $layout-offset, make sure $breakpoints is available or add the breakpoint to $breakpoints."; } } @media (min-width: #{config.$layout-max-width + (offset.get-layout-max-offset() * 2)}) { outline: 1px solid deepskyblue; } } } }