Updates Bulma to 0.0.17

Author: joshuajansen

README.md

@@ -8,7 +8,7 @@ A modern CSS framework based on Flexbox.
 
 Add this line to your application's Gemfile:
 
-    gem "bulma-rails", "~> 0.0.14"
+    gem "bulma-rails", "~> 0.0.17"
 
 And then execute:
 

app/assets/stylesheets/bulma/base/helpers.sass

@@ -1,11 +1,5 @@
 // Display
 
-.is-block
-  display: block
-
-.is-inline
-  display: inline
-
 .is-flex
   display: flex
 

app/assets/stylesheets/bulma/components/card.sass

@@ -1,3 +1,24 @@
+.card-header
+  align-items: stretch
+  box-shadow: 0 1px 2px rgba(black, 0.1)
+  display: flex
+  min-height: 40px
+
+.card-header-title
+  align-items: flex-start
+  color: $text-strong
+  display: flex
+  flex: 1
+  font-weight: bold
+  padding: 10px
+
+.card-header-icon
+  align-items: center
+  cursor: pointer
+  display: flex
+  justify-content: center
+  width: 40px
+
 .card-image
   display: block
   position: relative
@@ -9,8 +30,18 @@
 
 .card-footer
   background: $background
-  display: block
+  border-top: 1px solid $border
+  align-items: stretch
+  display: flex
+
+.card-footer-item
+  align-items: center
+  display: flex
+  flex: 1
+  justify-content: center
   padding: 10px
+  &:not(:last-child)
+    border-right: 1px solid $border
 
 .card
   background: white
@@ -22,3 +53,5 @@
     margin-bottom: 10px
   &.is-rounded
     border-radius: 5px
+  &.is-fullwidth
+    width: 100%

app/assets/stylesheets/bulma/components/components.sass

@@ -7,4 +7,13 @@
 @import "tabs"
 @import "media"
 @import "menu"
+@import "pagination"
+@import "panel"
 @import "modal"
+
+.box
+  @extend .block
+  background: white
+  border-radius: 5px
+  box-shadow: 0 2px 3px rgba(black, 0.1), 0 0 0 1px rgba(black, 0.1)
+  padding: 20px

app/assets/stylesheets/bulma/components/menu.sass

@@ -1,76 +1,30 @@
-.menu-icon
-  +fa(14px, 16px)
-  color: $text-light
-  float: left
-  margin: 0 4px 0 -2px
-  .fa
-    font-size: inherit
-    line-height: inherit
-
-.menu-heading
-  background: $background
-  border-bottom: 1px solid $border
-  border-radius: 4px 4px 0 0
-  color: $text-strong
-  font-size: $size-medium
-  font-weight: 300
-  padding: 10px
+.menu-nav
+  a
+    display: block
+    padding: 5px 10px
 
 .menu-list
   a
+    border-radius: 2px
     color: $text
+    display: block
+    padding: 5px 10px
     &:hover
+      background: $background
       color: $link
-
-.menu-tabs
-  display: flex
-  font-size: $size-small
-  padding: 5px 10px 0
-  justify-content: center
-  &:not(:last-child)
-    border-bottom: 1px solid $border
-  a
-    border-bottom: 1px solid $border
-    margin-bottom: -1px
-    padding: 5px
     &.is-active
-      border-bottom-color: $link-active-border
-      color: $link-active
+      background: $link
+      color: $link-invert
+  li ul
+    border-left: 1px solid $border
+    margin: 10px
+    padding-left: 10px
 
-.menu-block
-  color: $text-strong
-  display: block
-  line-height: 16px
-  padding: 10px
-  &:not(:last-child)
-    border-bottom: 1px solid $border
-  .checkbox
-    border: 1px solid transparent
-    border-radius: $radius
-    display: block
-    padding: 8px
-    padding-left: 32px
-    input
-      left: 9px
-      top: 9px
-    &:hover
-      border-color: $link
-
-a.menu-block:hover
-  background: $background
-
-.menu-checkbox
-  @extend .checkbox
-  display: block
-  padding: 9px 10px 9px 30px
-  &:not(:last-child)
-    border-bottom: 1px solid $border
-  input
-    left: 8px
-    top: 10px
-
-.menu
-  border: 1px solid $border
-  border-radius: 5px
-  &:not(:last-child)
-    margin-bottom: 20px
+.menu-label
+  color: $text-light
+  font-size: $size-small
+  letter-spacing: 1px
+  margin-bottom: 5px
+  text-transform: uppercase
+  &:not(:first-child)
+    margin-top: 20px

app/assets/stylesheets/bulma/components/pagination.sass

@@ -0,0 +1,39 @@
+.pagination
+  align-items: center
+  display: flex
+  justify-content: center
+  text-align: center
+  a
+    @extend .button
+    display: block
+    min-width: 32px
+    padding: 3px 8px
+    &.is-active
+      background: $link
+      border-color: $link
+      color: $link-invert
+  span
+    color: $text-light
+    display: block
+    margin: 0 4px
+  li
+    margin: 0 2px
+  ul
+    align-items: center
+    display: flex
+    flex: 1
+    justify-content: center
+  +mobile
+    flex-wrap: wrap
+    & > a
+      width: calc(50% - 5px)
+      &:not(:first-child)
+        margin-left: 10px
+    li
+      flex: 1
+    ul
+      margin-top: 10px
+  +tablet
+    & > a
+      &:not(:first-child)
+        order: 1

app/assets/stylesheets/bulma/components/panel.sass

@@ -0,0 +1,76 @@
+.panel-icon
+  +fa(14px, 16px)
+  color: $text-light
+  float: left
+  margin: 0 4px 0 -2px
+  .fa
+    font-size: inherit
+    line-height: inherit
+
+.panel-heading
+  background: $background
+  border-bottom: 1px solid $border
+  border-radius: 4px 4px 0 0
+  color: $text-strong
+  font-size: $size-medium
+  font-weight: 300
+  padding: 10px
+
+.panel-list
+  a
+    color: $text
+    &:hover
+      color: $link
+
+.panel-tabs
+  display: flex
+  font-size: $size-small
+  padding: 5px 10px 0
+  justify-content: center
+  &:not(:last-child)
+    border-bottom: 1px solid $border
+  a
+    border-bottom: 1px solid $border
+    margin-bottom: -1px
+    padding: 5px
+    &.is-active
+      border-bottom-color: $link-active-border
+      color: $link-active
+
+.panel-block
+  color: $text-strong
+  display: block
+  line-height: 16px
+  padding: 10px
+  &:not(:last-child)
+    border-bottom: 1px solid $border
+  .checkbox
+    border: 1px solid transparent
+    border-radius: $radius
+    display: block
+    padding: 8px
+    padding-left: 32px
+    input
+      left: 9px
+      top: 9px
+    &:hover
+      border-color: $link
+
+a.panel-block:hover
+  background: $background
+
+.panel-checkbox
+  @extend .checkbox
+  display: block
+  padding: 9px 10px 9px 30px
+  &:not(:last-child)
+    border-bottom: 1px solid $border
+  input
+    left: 8px
+    top: 10px
+
+.panel
+  border: 1px solid $border
+  border-radius: 5px
+  &:not(:last-child)
+    margin-bottom: 20px

app/assets/stylesheets/bulma/elements/buttons.sass

@@ -16,6 +16,7 @@
 .button
   +control
   +unselectable
+  justify-content: center
   padding: 3px 10px
   text-align: center
   white-space: nowrap
@@ -26,10 +27,11 @@
     font-size: $size-small
     line-height: 1
     margin-top: 5px
-  .fa
-    line-height: 24px
-    margin: 0 -2px
-    width: 24px
+  .icon
+    &:first-child
+      margin-right: 4px
+    &:last-child
+      margin-left: 4px
   &:hover
     color: $control-hover
   &:active
@@ -69,6 +71,14 @@
             background: rgba(black, 0.05)
       &.is-loading:after
         border-color: transparent transparent $color-invert $color-invert !important
+  &.is-link
+    border-color: transparent
+    color: $text
+    text-decoration: underline
+    &:hover,
+    &:focus
+      background: $border
+      color: $text-strong
   &.is-small
     +button-small
   &.is-medium
@@ -91,12 +101,3 @@
   &[disabled]
     opacity: 0.5
     pointer-events: none
-  +tablet
-    small
-      color: $text
-      left: 0
-      margin-top: 10px
-      position: absolute
-      top: 100%
-      width: 100%
-