Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-22 05:04:28 -07:00
Code Issues Packages Projects Releases Wiki Activity

Add elements CSS variables

Browse Source
This commit is contained in:
Jeremy Thomas
2022-12-06 10:46:03 +00:00
parent 8508af010a
commit 89a8b8f208
15 changed files with 868 additions and 487 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
sass/elements/container.scss
View File

@@ -1,8 +1,16 @@
@import "../utilities/mixins";
$container-offset: 2 * $gap !default;
$container-offset: calc(2 * #{getVar("gap")}) !default;
$container-max-width: $fullhd !default;
:root {
@include register-vars(
(
container-offset: #{$container-offset},
)
);
}
.#{$class-prefix}container {
flex-grow: 1;
margin: 0 auto;
@@ -11,36 +19,48 @@ $container-max-width: $fullhd !default;
&.is-fluid {
max-width: none !important;
padding-left: $gap;
padding-right: $gap;
padding-left: getVar("gap");
padding-right: getVar("gap");
width: 100%;
}
@include desktop {
max-width: $desktop - $container-offset;
max-width: calc(#{$desktop} - #{getVar("container-offset")});
}
@include until-widescreen {
&.is-widescreen:not(.is-max-desktop) {
max-width: min($widescreen, $container-max-width) - $container-offset;
max-width: calc(
#{min($widescreen, $container-max-width)} - #{getVar(
"container-offset"
)}
);
}
}
@include until-fullhd {
&.is-fullhd:not(.is-max-desktop):not(.is-max-widescreen) {
max-width: min($fullhd, $container-max-width) - $container-offset;
max-width: calc(
#{min($fullhd, $container-max-width)} - #{getVar("container-offset")}
);
}
}
@include widescreen {
&:not(.is-max-desktop) {
max-width: min($widescreen, $container-max-width) - $container-offset;
max-width: calc(
#{min($widescreen, $container-max-width)} - #{getVar(
"container-offset"
)}
);
}
}
@include fullhd {
&:not(.is-max-desktop):not(.is-max-widescreen) {
max-width: min($fullhd, $container-max-width) - $container-offset;
max-width: calc(
#{min($fullhd, $container-max-width)} - #{getVar("container-offset")}
);
}
}
}