sass/elements/container.sass

@import "../utilities/mixins"

$container-offset: (2 * $gap) !default
$container-max-width: $fullhd !default

.container
  flex-grow: 1
  margin: 0 auto
  position: relative
  width: auto
  &.is-fluid
    max-width: none !important
    padding-left: $gap
    padding-right: $gap
    width: 100%
  +desktop
    max-width: $desktop - $container-offset
  +until-widescreen
    &.is-widescreen:not(.is-max-desktop)
      max-width: min($widescreen, $container-max-width) - $container-offset
  +until-fullhd
    &.is-fullhd:not(.is-max-desktop):not(.is-max-widescreen)
      max-width: min($fullhd, $container-max-width) - $container-offset
  +widescreen
    &:not(.is-max-desktop)
      max-width: min($widescreen, $container-max-width) - $container-offset
  +fullhd
    &:not(.is-max-desktop):not(.is-max-widescreen)
      max-width: min($fullhd, $container-max-width) - $container-offset
Use imports everywhere 2020-10-31 23:52:27 +00:00			`@import "../utilities/mixins"`

Add more variables 2019-05-17 13:50:39 +01:00			`$container-offset: (2 * $gap) !default`
Add new container docs 2020-09-27 23:50:12 +01:00			`$container-max-width: $fullhd !default`
Add more variables 2019-05-17 13:50:39 +01:00
Fix container docs 2017-08-01 21:05:10 +01:00			`.container`
Fix #2297 2019-05-17 12:51:52 +01:00			`flex-grow: 1`
Fix container docs 2017-08-01 21:05:10 +01:00			`margin: 0 auto`
			`position: relative`
Fix #2297 2019-05-17 12:51:52 +01:00			`width: auto`
Fixes #1552 > `.container.is-fluid` margins (#1608) Changing the default behaviour of `.is-fluid` container: removing media breakpoint from the rule, so the behaviour is consistent with described in docs: ``` This container is fluid: it will have a 32px gap on either side, on any viewport size. ``` 2019-09-20 00:04:09 +10:00			`&.is-fluid`
Add new container docs 2020-09-27 23:50:12 +01:00			`max-width: none !important`
Fix #1552 2019-09-19 15:18:04 +01:00			`padding-left: $gap`
			`padding-right: $gap`
			`width: 100%`
Fix #1759 2018-04-08 20:11:48 +01:00			`+desktop`
Add more variables 2019-05-17 13:50:39 +01:00			`max-width: $desktop - $container-offset`
Fix #1759 2018-04-08 20:11:48 +01:00			`+until-widescreen`
Add new container docs 2020-09-27 23:50:12 +01:00			`&.is-widescreen:not(.is-max-desktop)`
			`max-width: min($widescreen, $container-max-width) - $container-offset`
Fix #1759 2018-04-08 20:11:48 +01:00			`+until-fullhd`
Add new container docs 2020-09-27 23:50:12 +01:00			`&.is-fullhd:not(.is-max-desktop):not(.is-max-widescreen)`
			`max-width: min($fullhd, $container-max-width) - $container-offset`
Fix #1759 2018-04-08 20:11:48 +01:00			`+widescreen`
Add new container docs 2020-09-27 23:50:12 +01:00			`&:not(.is-max-desktop)`
			`max-width: min($widescreen, $container-max-width) - $container-offset`
Fix #1759 2018-04-08 20:11:48 +01:00			`+fullhd`
Add new container docs 2020-09-27 23:50:12 +01:00			`&:not(.is-max-desktop):not(.is-max-widescreen)`
			`max-width: min($fullhd, $container-max-width) - $container-offset`