/** * Container **/ @if $enable-grid-classes { .ur-container, .ur-container-full { @include create-container(); } // Responsive containers that are 100% wide until a breakpoint @each $breakpoint, $container-max-width in $container-max-widths { .ur-container-#{$breakpoint} { @extend .ur-container-full; } @include media-breakpoint-up($breakpoint, $grid-breakpoints) { %responsive-container-#{$breakpoint} { max-width: $container-max-width; } // Extend each breakpoint which is smaller or equal to the current breakpoint $extend-breakpoint: true; @each $name, $width in $grid-breakpoints { @if ($extend-breakpoint) { .ur-container#{breakpoint-infix($name, $grid-breakpoints)} { @extend %responsive-container-#{$breakpoint}; } // Once the current breakpoint is reached, stop extending @if ($breakpoint == $name) { $extend-breakpoint: false; } } } } } }