Remove flex shorthand

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Bulma Changelog
 
+## 0.1.1
+
+* Remove `flex: 1` shorthand
+
 ## 0.1.0
 
 * Fix #227

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)

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

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

sass/components/media.sass

@@ -22,7 +22,7 @@
   margin-left: 10px
 
 .media-content
-  flex: 1
+  flex-grow: 1
   text-align: left
 
 .media

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
 

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

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

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

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

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

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

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