landingpage/themes/app-landingpage/assets/scss/_containers.scss

74 lines
1.7 KiB
SCSS
Raw Permalink Normal View History

2022-08-06 20:25:26 +02:00
// Container widths
//
// Set the container width, and override it for fixed navbars in media queries.
@if $enable-grid-classes {
// Single container class with breakpoint max-widths
.container {
@include make-container();
@include make-container-max-widths();
&-inner {
max-width: 860px;
margin-left: auto;
margin-right: auto;
padding-left: 0;
padding-right: 0;
&_lg {
max-width: 980px;
}
&_sm {
max-width: 680px;
}
}
@media (max-width: 360px){
padding-left: 1rem;
padding-right: 1rem;
}
}
video {
display: block;
width: 100%;
max-height: 100%;
}
#player-overlay {
background-color: #000;
z-index: 999;
}
// 100% wide container at all breakpoints
.container-fluid {
@include make-container();
}
// Responsive containers that are 100% wide until a breakpoint
@each $breakpoint, $container-max-width in $container-max-widths {
.container-#{$breakpoint} {
@extend .container-fluid;
}
@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) {
.container#{breakpoint-infix($name, $grid-breakpoints)} {
@extend %responsive-container-#{$breakpoint};
}
// Once the current breakpoint is reached, stop extending
@if ($breakpoint == $name) {
$extend-breakpoint: false;
}
}
}
}
}
}