75 lines
1.4 KiB
SCSS
75 lines
1.4 KiB
SCSS
@mixin min($bp, $max: "null", $device: "screen") {
|
|
@if $max == "null" {
|
|
@media only #{$device} and (min-width: #{$bp}) {
|
|
@content;
|
|
}
|
|
} @else {
|
|
@media only #{$device} and (min-width: #{$bp}) and (max-width: #{$max}) {
|
|
@content;
|
|
}
|
|
}
|
|
}
|
|
|
|
@function bp($bp) {
|
|
@return map-get($breakpoints, $bp);
|
|
}
|
|
|
|
$breakpoints: (
|
|
na: 0px,
|
|
// For BS grid
|
|
xs: 576px,
|
|
// Smartphone
|
|
sm: 768px,
|
|
// Tablets
|
|
md: 992px,
|
|
// Tablets Landscape and small desktops
|
|
lg: 1200px,
|
|
// Desktops
|
|
xl: 1532px,
|
|
// Large Desktop,,
|
|
);
|
|
|
|
@function container($container-size, $true-val: false) {
|
|
@return map-get($container-sizes, $container-size);
|
|
}
|
|
|
|
$container-sizes: (
|
|
sm: map-get($breakpoints, sm) - 30px,
|
|
md: map-get($breakpoints, md) - 40px,
|
|
lg: map-get($breakpoints, lg) - 50px,
|
|
xl: map-get($breakpoints, xl) - 100px,
|
|
);
|
|
|
|
.container {
|
|
padding-right: 1rem;
|
|
padding-left: 1rem;
|
|
|
|
&:not(.is-fluid) {
|
|
margin: 0 auto;
|
|
|
|
@each $bp, $container-size in $container-sizes {
|
|
@include min(#{bp(#{$bp})}) {
|
|
width: 100%;
|
|
max-width: container(#{$bp});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@each $bp, $container-size in $container-sizes {
|
|
.container-#{$bp} {
|
|
margin: 0 auto;
|
|
padding-right: 1rem;
|
|
padding-left: 1rem;
|
|
width: 100%;
|
|
|
|
$i: index($container-sizes, $bp $container-size);
|
|
|
|
@for $j from $i through length($container-sizes) {
|
|
@include min(#{bp(nth(nth($container-sizes, $j), 1))}) {
|
|
max-width: container(#{nth(nth($container-sizes, $j), 1)});
|
|
}
|
|
}
|
|
}
|
|
}
|