// // sizing.scss // Extended from Bootstrap //
@each $size, $sizeValue in $sizes {
// Percentage .mw-#{$size} { max-width: $sizeValue !important; } // Viewport units .vw-#{$size} { width: #{$size}vw !important; }
}
// Responsive
@each $width, $widthValue in $container-max-widths {
@include media-breakpoint-up($width) { @each $size, $sizeValue in $sizes { // Percentage .h-#{$width}-#{$size} { height: $sizeValue !important; } .w-#{$width}-#{$size} { width: $sizeValue !important; } .mw-#{$width}-#{$size} { max-width: $sizeValue !important; } // Viewport units .vh-#{$width}-#{$size} { height: #{$size}vh; } .vw-#{$width}-#{$size} { width: #{$size}vw; } } }
}
// Cover // // Spans the container till the edge of the viewport
.w-cover {
@each $width, $value in $container-max-widths { @include media-breakpoint-up(#{$width}) { // width: calc(100% + (100vw - #{$value}) / 2 + #{$grid-gutter-width}); width: 100%; } }
}