bulma/sass/layout/container.scss

60 lines
1.6 KiB
SCSS
Raw Normal View History

2024-03-21 16:11:54 +00:00
@use "../utilities/initial-variables" as iv;
@use "../utilities/mixins" as mx;
$container-offset: 2 * iv.$gap !default;
$container-max-width: iv.$fullhd !default;
.#{iv.$class-prefix}container {
flex-grow: 1;
margin: 0 auto;
position: relative;
width: 100%;
&.#{iv.$class-prefix}is-fluid {
max-width: none !important;
padding-left: iv.$gap;
padding-right: iv.$gap;
width: 100%;
}
&.#{iv.$class-prefix}is-max-tablet {
max-width: iv.$tablet - $container-offset;
}
2024-03-21 16:11:54 +00:00
@include mx.desktop {
max-width: iv.$desktop - $container-offset;
}
@include mx.until-widescreen {
&.#{iv.$class-prefix}is-widescreen:not(
.#{iv.$class-prefix}is-max-tablet
):not(.#{iv.$class-prefix}is-max-desktop) {
2024-03-21 16:11:54 +00:00
max-width: min(iv.$widescreen, $container-max-width) - $container-offset;
}
}
@include mx.until-fullhd {
&.#{iv.$class-prefix}is-fullhd:not(.#{iv.$class-prefix}is-max-tablet):not(
.#{iv.$class-prefix}is-max-desktop
):not(.#{iv.$class-prefix}is-max-widescreen) {
2024-03-21 16:11:54 +00:00
max-width: min(iv.$fullhd, $container-max-width) - $container-offset;
}
}
@include mx.widescreen {
&:not(.#{iv.$class-prefix}is-max-tablet):not(
.#{iv.$class-prefix}is-max-desktop
) {
2024-03-21 16:11:54 +00:00
max-width: min(iv.$widescreen, $container-max-width) - $container-offset;
}
}
@include mx.fullhd {
&:not(.#{iv.$class-prefix}is-max-tablet):not(
.#{iv.$class-prefix}is-max-desktop
):not(.#{iv.$class-prefix}is-max-widescreen) {
2024-03-21 16:11:54 +00:00
max-width: min(iv.$fullhd, $container-max-width) - $container-offset;
}
}
}