This commit is contained in:
Jeremy Thomas 2019-05-17 12:51:52 +01:00
parent 1f7ac5344c
commit 97cb0311f1
3 changed files with 5 additions and 12 deletions

View File

@ -14,6 +14,7 @@
* #2396 Update docs with webpack 4 example * #2396 Update docs with webpack 4 example
* #2381 Make centered buttons have equal margin * #2381 Make centered buttons have equal margin
* Fix #2297 -> Remove `.container` fixed width values, use `flex-grow`
### Bug fixes ### Bug fixes

View File

@ -2778,48 +2778,44 @@ fieldset[disabled] .button {
} }
.container { .container {
flex-grow: 1;
margin: 0 auto; margin: 0 auto;
position: relative; position: relative;
width: auto;
} }
@media screen and (min-width: 1024px) { @media screen and (min-width: 1024px) {
.container { .container {
max-width: 960px; max-width: 960px;
width: 960px;
} }
.container.is-fluid { .container.is-fluid {
margin-left: 32px; margin-left: 32px;
margin-right: 32px; margin-right: 32px;
max-width: none; max-width: none;
width: auto;
} }
} }
@media screen and (max-width: 1215px) { @media screen and (max-width: 1215px) {
.container.is-widescreen { .container.is-widescreen {
max-width: 1152px; max-width: 1152px;
width: auto;
} }
} }
@media screen and (max-width: 1407px) { @media screen and (max-width: 1407px) {
.container.is-fullhd { .container.is-fullhd {
max-width: 1344px; max-width: 1344px;
width: auto;
} }
} }
@media screen and (min-width: 1216px) { @media screen and (min-width: 1216px) {
.container { .container {
max-width: 1152px; max-width: 1152px;
width: 1152px;
} }
} }
@media screen and (min-width: 1408px) { @media screen and (min-width: 1408px) {
.container { .container {
max-width: 1344px; max-width: 1344px;
width: 1344px;
} }
} }

View File

@ -1,25 +1,21 @@
.container .container
flex-grow: 1
margin: 0 auto margin: 0 auto
position: relative position: relative
width: auto
+desktop +desktop
max-width: $desktop - (2 * $gap) max-width: $desktop - (2 * $gap)
width: $desktop - (2 * $gap)
&.is-fluid &.is-fluid
margin-left: $gap margin-left: $gap
margin-right: $gap margin-right: $gap
max-width: none max-width: none
width: auto
+until-widescreen +until-widescreen
&.is-widescreen &.is-widescreen
max-width: $widescreen - (2 * $gap) max-width: $widescreen - (2 * $gap)
width: auto
+until-fullhd +until-fullhd
&.is-fullhd &.is-fullhd
max-width: $fullhd - (2 * $gap) max-width: $fullhd - (2 * $gap)
width: auto
+widescreen +widescreen
max-width: $widescreen - (2 * $gap) max-width: $widescreen - (2 * $gap)
width: $widescreen - (2 * $gap)
+fullhd +fullhd
max-width: $fullhd - (2 * $gap) max-width: $fullhd - (2 * $gap)
width: $fullhd - (2 * $gap)