|
/** |
|
* Bootstrap compatible breakpoint configuration |
|
* @see https://getbootstrap.com/docs/4.0/layout/grid/#grid-options |
|
*/ |
|
|
|
|
|
@import 'grid-functions'; |
|
|
|
// Grid breakpoints (default) |
|
// |
|
// Define the minimum dimensions at which your layout will change, |
|
// adapting to different screen sizes, for use in media queries. |
|
|
|
$xs: 0; |
|
$small: 576px; |
|
$medium: 768px; |
|
$large: 992px; |
|
$menu: 1050px; // Menu tweak |
|
$xl: 1200px; |
|
$max-width: $xl; |
|
|
|
$grid-breakpoints: ( |
|
xs: $xs, |
|
sm: $small, |
|
md: $medium, |
|
lg: $large, |
|
xl: $xl |
|
); |
|
|
|
|
|
// Default grid gutter width |
|
$grid-gutter-width: 30px; |
|
|
|
|
|
// @include-media breakpoints |
|
// |
|
// This is a required variable for that library. |
|
// This also includes any width tweaks. |
|
|
|
$breakpoints: ( |
|
xs: $xs, |
|
sm: $small, |
|
md: $medium, |
|
lg: $large, |
|
menu: $menu, |
|
xl: $xl |
|
); |
|
|
|
|
|
// Grid containers |
|
// |
|
// Define the maximum width of `.container` for different screen sizes. |
|
|
|
$container-max-widths: ( |
|
sm: $small - 36px, // 540px |
|
md: $medium - 48px, // 720px |
|
lg: $large - 32px, // 960px |
|
xl: $xl - 60px // 1140px |
|
); |
|
|
|
$container-max-widths--reversed: map-reverse($container-max-widths); |
|
|
|
$container-max-widths--main-menu: ( |
|
sm: $small - 36px, // 540px |
|
md: $medium - 48px, // 720px |
|
lg: $large - 32px, // 960px |
|
menu: $menu - 90px, // 960px |
|
xl: $xl - 60px // 1140px |
|
); |
|
|
|
$container-max-widths--gte-md: ( |
|
md: get-container-max-width('md'), |
|
lg: get-container-max-width('lg'), |
|
xl: get-container-max-width('xl'), |
|
); |
|
|
|
$container-max-widths--gte-lg: ( |
|
lg: get-container-max-width('lg'), |
|
xl: get-container-max-width('xl'), |
|
); |
|
|
|
$container-max-widths--gte-xl: ( |
|
xl: get-container-max-width('xl'), |
|
); |
|
|
|
$container-max-widths--lte-md: ( |
|
md: get-container-max-width('md'), |
|
sm: get-container-max-width('sm') |
|
); |
|
|
|
|
|
// Mixin to return a container widths. |
|
// >> container(80); // for 80% |
|
// >> container($max-widths: $container-max-widths--gte-lg); // for 100%, but only for lg & xl |
|
@mixin container($percent: 100, $max-widths: $container-max-widths) { |
|
@include make-container(); |
|
|
|
@each $breakpoint, $container-max-width in $max-widths { |
|
@include media('>=#{$breakpoint}') { |
|
max-width: get-container-max-width(#{$breakpoint}) * $percent * 0.01; |
|
} |
|
} |
|
} |
|
|
|
// Mixin to return a container widths in reverse. |
|
// >> container(80); // for 80% |
|
// >> container($max-widths: $container-max-widths--lt-md); // for 100%, but only for sm & xs |
|
@mixin container-down($percent: 100, $max-widths: $container-max-widths--reversed) { |
|
$widest: nth(map-keys($max-widths), 1); |
|
@include media('<#{$widest}') { |
|
@include make-container(); |
|
} |
|
|
|
@each $breakpoint, $container-max-width in $max-widths { |
|
$previous-breakpoint: breakpoint-previous($breakpoint); |
|
|
|
@if map-has-key($max-widths, $previous-breakpoint) { |
|
@include media('<#{$breakpoint}') { |
|
max-width: get-container-max-width(#{$previous-breakpoint}) * $percent * 0.01; |
|
} |
|
} |
|
} |
|
} |
|
|
|
// $gutter in 'px' |
|
@mixin row($gutter: $grid-gutter-width) { |
|
display: flex; |
|
flex-wrap: wrap; |
|
margin-right: -#{$gutter / 2}; |
|
margin-left: -#{$gutter / 2}; |
|
} |
|
|
|
// $size in '%' |
|
// $gutter in 'px' |
|
@mixin col($size: false, $gutter: $grid-gutter-width) { |
|
position: relative; |
|
width: 100%; |
|
padding-right: $gutter / 2; |
|
padding-left: $gutter / 2; |
|
|
|
@if $size { |
|
flex: 0 0 $size; |
|
max-width: $size; |
|
} |
|
} |
|
|
|
// $gutter in 'px' |
|
@mixin make-container($gutter: $grid-gutter-width) { |
|
width: 100%; |
|
margin-right: auto; |
|
margin-left: auto; |
|
padding-right: $gutter / 2; |
|
padding-left: $gutter / 2; |
|
} |
|
|
|
// Media of at least the minimum breakpoint width. No query for the smallest breakpoint. |
|
// Makes the @content apply to the given breakpoint and wider. |
|
@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) { |
|
$min: breakpoint-min($name, $breakpoints); |
|
@if $min { |
|
@include media('>=#{$min}') { |
|
@content; |
|
} |
|
} @else { |
|
@content; |
|
} |
|
} |
|
|
|
// Media of at most the maximum breakpoint width. No query for the largest breakpoint. |
|
// Makes the @content apply to the given breakpoint and narrower. |
|
@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) { |
|
$max: breakpoint-max($name, $breakpoints); |
|
@if $max { |
|
@include media('<#{$max}') { |
|
@content; |
|
} |
|
} @else { |
|
@content; |
|
} |
|
} |
|
|
|
// Media that spans multiple breakpoint widths. |
|
// Makes the @content apply between the min and max breakpoints |
|
@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) { |
|
$min: breakpoint-min($lower, $breakpoints); |
|
$max: breakpoint-max($upper, $breakpoints); |
|
|
|
@if $min != null and $max != null { |
|
@include media('>=#{$min}', '<#{$max}') { |
|
@content; |
|
} |
|
} @else if $max == null { |
|
@include media-breakpoint-up($lower, $breakpoints) { |
|
@content; |
|
} |
|
} @else if $min == null { |
|
@include media-breakpoint-down($upper, $breakpoints) { |
|
@content; |
|
} |
|
} |
|
} |
|
|
|
// Media between the breakpoint's minimum and maximum widths. |
|
// No minimum for the smallest breakpoint, and no maximum for the largest one. |
|
// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower. |
|
@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) { |
|
$min: breakpoint-min($name, $breakpoints); |
|
$max: breakpoint-max($name, $breakpoints); |
|
|
|
@if $min != null and $max != null { |
|
@include media('>=#{$min}', '<#{$max}') { |
|
@content; |
|
} |
|
} @else if $max == null { |
|
@include media-breakpoint-up($name, $breakpoints) { |
|
@content; |
|
} |
|
} @else if $min == null { |
|
@include media-breakpoint-down($name, $breakpoints) { |
|
@content; |
|
} |
|
} |
|
} |
|
|
|
// Display the active breakpoint's name in the bottom right of the viewport. |
|
@mixin display-breakpoints { |
|
body { |
|
&::before { |
|
position: fixed; |
|
right: 3px; |
|
bottom: 3px; |
|
padding: 1px 9px 3px; |
|
border-radius: 3px; |
|
background-color: #aaa; |
|
color: #fff; |
|
font-size: 13px; |
|
opacity: 0.5; |
|
z-index: 9999; |
|
|
|
// Loop through the breakpoint |
|
// @include-media breakpointss that should be shown |
|
@each $bp-name, $bp-width in $breakpoints { |
|
@include media('>=#{$bp-name}') { |
|
content: '#{$bp-name}'; |
|
} |
|
} |
|
} |
|
} |
|
} |