diff --git a/CHANGELOG.md b/CHANGELOG.md index 5a380f42..b6815fcb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ # Bulma Changelog +## 0.1.1 + +* Remove `flex: 1` shorthand + ## 0.1.0 * Fix #227 diff --git a/sass/components/card.sass b/sass/components/card.sass index d993667a..d5a980ad 100644 --- a/sass/components/card.sass +++ b/sass/components/card.sass @@ -8,7 +8,7 @@ align-items: flex-start color: $text-strong display: flex - flex: 1 + flex-grow: 1 font-weight: bold padding: 10px @@ -36,7 +36,7 @@ .card-footer-item align-items: center display: flex - flex: 1 + flex-grow: 1 justify-content: center padding: 10px &:not(:last-child) diff --git a/sass/components/grid.sass b/sass/components/grid.sass index d8e648b0..830d851c 100644 --- a/sass/components/grid.sass +++ b/sass/components/grid.sass @@ -1,5 +1,7 @@ .column - flex: 1 1 auto + flex-basis: 0 + flex-grow: 1 + flex-shrink: 1 padding: 10px .columns.is-mobile > &.is-narrow flex: none @@ -227,7 +229,6 @@ +tablet flex-wrap: wrap & > .column - flex-basis: 33.3333% max-width: 33.3333% padding: 10px width: 33.3333% @@ -250,7 +251,9 @@ .tile align-items: stretch - flex: 1 1 auto + flex-basis: 0 + flex-grow: 1 + flex-shrink: 1 min-height: min-content // Modifiers &.is-ancestor diff --git a/sass/components/level.sass b/sass/components/level.sass index 97960366..2bd01756 100644 --- a/sass/components/level.sass +++ b/sass/components/level.sass @@ -14,7 +14,7 @@ margin-right: 10px // Modifiers &.is-flexible - flex: 1 + flex-grow: 1 .level-left // Responsiveness @@ -48,10 +48,10 @@ &:not(:last-child) margin-bottom: 0 &:not(.is-narrow) - flex: 1 + flex-grow: 1 // Responsiveness +tablet display: flex & > .level-item &:not(.is-narrow) - flex: 1 + flex-grow: 1 diff --git a/sass/components/media.sass b/sass/components/media.sass index 5c5e799a..cf36578f 100644 --- a/sass/components/media.sass +++ b/sass/components/media.sass @@ -22,7 +22,7 @@ margin-left: 10px .media-content - flex: 1 + flex-grow: 1 text-align: left .media diff --git a/sass/components/modal.sass b/sass/components/modal.sass index b61945cb..a54a7529 100644 --- a/sass/components/modal.sass +++ b/sass/components/modal.sass @@ -47,7 +47,7 @@ .modal-card-title color: $text-strong - flex: 1 + flex-grow: 1 font-size: $size-4 line-height: 1 @@ -58,7 +58,7 @@ margin-right: 10px .modal-card-body - flex: 1 + flex-grow: 1 overflow: auto padding: 20px diff --git a/sass/components/nav.sass b/sass/components/nav.sass index f2c5ac1a..d1ce5a42 100644 --- a/sass/components/nav.sass +++ b/sass/components/nav.sass @@ -68,7 +68,8 @@ a.nav-item .nav-left align-items: stretch display: flex - flex: 1 + flex-basis: 0 + flex-grow: 1 justify-content: flex-start overflow: hidden overflow-x: auto @@ -78,13 +79,16 @@ a.nav-item align-items: stretch display: flex justify-content: center + margin-left: auto + margin-right: auto .nav-right // Responsiveness +tablet align-items: stretch display: flex - flex: 1 + flex-basis: 0 + flex-grow: 1 justify-content: flex-end // Main container diff --git a/sass/components/navbar.sass b/sass/components/navbar.sass index 1340a69e..70628edc 100644 --- a/sass/components/navbar.sass +++ b/sass/components/navbar.sass @@ -14,7 +14,7 @@ margin-right: 10px // Modifiers &.is-flexible - flex: 1 + flex-grow: 1 .navbar-left // Responsiveness @@ -48,10 +48,10 @@ &:not(:last-child) margin-bottom: 0 &:not(.is-narrow) - flex: 1 + flex-grow: 1 // Responsiveness +tablet display: flex & > .navbar-item &:not(.is-narrow) - flex: 1 + flex-grow: 1 diff --git a/sass/components/pagination.sass b/sass/components/pagination.sass index b513f4d8..a595c484 100644 --- a/sass/components/pagination.sass +++ b/sass/components/pagination.sass @@ -16,7 +16,7 @@ ul align-items: center display: flex - flex: 1 + flex-grow: 1 justify-content: center // Responsiveness +mobile @@ -26,7 +26,7 @@ &:not(:first-child) margin-left: 10px li - flex: 1 + flex-grow: 1 ul margin-top: 10px +tablet diff --git a/sass/components/tabs.sass b/sass/components/tabs.sass index 4138cc4d..5d17df37 100644 --- a/sass/components/tabs.sass +++ b/sass/components/tabs.sass @@ -30,7 +30,7 @@ align-items: center border-bottom: 1px solid $border display: flex - flex: 1 + flex-grow: 1 justify-content: flex-start &.is-left padding-right: 10px @@ -72,7 +72,7 @@ border-bottom-color: transparent !important &.is-fullwidth li - flex: 1 + flex-grow: 1 &.is-toggle a border: 1px solid $border diff --git a/sass/elements/form.sass b/sass/elements/form.sass index d506c7c9..6ebbb156 100644 --- a/sass/elements/form.sass +++ b/sass/elements/form.sass @@ -127,7 +127,7 @@ +mobile margin-bottom: 5px +tablet - flex: 1 + flex-grow: 1 margin-right: 20px padding-top: 7px text-align: right @@ -161,7 +161,7 @@ select border-radius: 0 $radius $radius 0 &.is-expanded - flex: 1 + flex-grow: 1 &.has-addons-centered justify-content: center &.has-addons-right @@ -170,7 +170,7 @@ .button, .input, .select - flex: 1 + flex-grow: 1 &.has-icon & > .fa +fa(14px, 24px) @@ -233,7 +233,7 @@ margin-bottom: 0 margin-right: 10px &.is-expanded - flex: 1 + flex-grow: 1 &.is-grouped-centered justify-content: center &.is-grouped-right @@ -243,7 +243,7 @@ display: flex & > .control display: flex - flex: 5 + flex-grow: 5 &.is-loading &:after @extend .loader diff --git a/sass/layout/header.sass b/sass/layout/header.sass index 37a9a3c0..29b4b56a 100644 --- a/sass/layout/header.sass +++ b/sass/layout/header.sass @@ -86,7 +86,7 @@ a.header-item .header-left align-items: stretch display: flex - flex: 1 + flex-grow: 1 overflow: hidden overflow-x: auto white-space: nowrap @@ -113,7 +113,7 @@ a.header-item & > .header-item align-items: stretch display: flex - flex: 1 + flex-grow: 1 justify-content: center padding: 0 & > a diff --git a/sass/layout/hero.sass b/sass/layout/hero.sass index d9a6fa4b..1ab13ed0 100644 --- a/sass/layout/hero.sass +++ b/sass/layout/hero.sass @@ -38,7 +38,7 @@ flex-shrink: 0 .hero-body - flex: 1 + flex-grow: 1 padding: 40px 20px // Responsiveness +desktop @@ -143,4 +143,4 @@ align-items: center display: flex & > .container - flex: 1 + flex-grow: 1