bulma-rails 0.7.1 → 0.7.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 33553ebbe5d42c58a8175a756de87688b1f98af1
-  data.tar.gz: c04e1e6f2322aafe2a3d442cc37bcd113915f001
+  metadata.gz: a7b7ff4967e67945435f1d062859419b81da30b1
+  data.tar.gz: d4496c3ba9469ab211a791cb9f3569185dab84e5
 SHA512:
-  metadata.gz: 0a7a7ff55b7cf7f198a79e3bed7bf2decb1b354af7e068a83ef1aef3ec2d8f1045a54bb75fd4d289a793bb269fe4f14ef16c54ca8601bf34a8da5f32d063e3e4
-  data.tar.gz: 03f2d472a0c57af7c5f4543ccc7be6f8808ea9b7b33f6402e3b1370d65b3a52bcb54ad84a614d0896d01c47e297bc0ac77f0585547b61b4b6438f30dcef411bb
+  metadata.gz: ef0677e8aba946260b34926f5c1d029293254479efec2023653b762006b90e9a1fc1702b08ad9127f01c68fb13264a1926a58ab17576ad8d7f60599380a1e161
+  data.tar.gz: cb74f0dfd8bc4c172084c9489ae775778424f9db2b1fde50296d601af72c8807c046df52199f9563634717081dbd365a5d86b7d6b55dfcfe81c26ac7c50d552a

data/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.7.1"
+    gem "bulma-rails", "~> 0.7.2"
 
 And then execute:
 

data/app/assets/stylesheets/bulma.sass

@@ -1,5 +1,5 @@
 @charset "utf-8"
-/*! bulma.io v0.7.1 | MIT License | github.com/jgthms/bulma */
+/*! bulma.io v0.7.2 | MIT License | github.com/jgthms/bulma */
 @import "sass/utilities/_all"
 @import "sass/base/_all"
 @import "sass/elements/_all"

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

@@ -17,7 +17,7 @@
 // Overlay
 
 .is-overlay
-  +overlay
+  @extend %overlay
 
 // Typography
 
@@ -158,6 +158,16 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
 .is-hidden
   display: none !important
 
+.is-sr-only
+  border: none !important
+  clip: rect(0, 0, 0, 0) !important
+  height: 0.01em !important
+  overflow: hidden !important
+  padding: 0 !important
+  position: absolute !important
+  white-space: nowrap !important
+  width: 0.01em !important
+
 +mobile
   .is-hidden-mobile
     display: none !important
@@ -248,4 +258,4 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
   box-shadow: none !important
 
 .is-unselectable
-  +unselectable
+  @extend %unselectable

data/app/assets/stylesheets/sass/components/_all.sass

@@ -4,6 +4,7 @@
 @import "card.sass"
 @import "dropdown.sass"
 @import "level.sass"
+@import "list.sass"
 @import "media.sass"
 @import "menu.sass"
 @import "message.sass"

data/app/assets/stylesheets/sass/components/breadcrumb.sass

@@ -8,8 +8,8 @@ $breadcrumb-item-padding-horizontal: 0.75em !default
 $breadcrumb-item-separator-color: $grey-light !default
 
 .breadcrumb
-  +block
-  +unselectable
+  @extend %block
+  @extend %unselectable
   font-size: $size-normal
   white-space: nowrap
   a

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

@@ -2,14 +2,14 @@ $card-color: $text !default
 $card-background-color: $white !default
 $card-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
 
-$card-header-background-color: none !default
+$card-header-background-color: transparent !default
 $card-header-color: $text-strong !default
 $card-header-shadow: 0 1px 2px rgba($black, 0.1) !default
 $card-header-weight: $weight-bold !default
 
-$card-content-background-color: none !default
+$card-content-background-color: transparent !default
 
-$card-footer-background-color: none !default
+$card-footer-background-color: transparent !default
 $card-footer-border-top: 1px solid $border !default
 
 .card

data/app/assets/stylesheets/sass/components/dropdown.sass

@@ -56,9 +56,12 @@ $dropdown-divider-background-color: $border !default
   padding: 0.375rem 1rem
   position: relative
 
-a.dropdown-item
+a.dropdown-item,
+button.dropdown-item
   padding-right: 3rem
+  text-align: left
   white-space: nowrap
+  width: 100%
   &:hover
     background-color: $dropdown-item-hover-background-color
     color: $dropdown-item-hover-color

data/app/assets/stylesheets/sass/components/level.sass

@@ -1,5 +1,5 @@
 .level
-  +block
+  @extend %block
   align-items: center
   justify-content: space-between
   code
@@ -18,9 +18,9 @@
     .level-item
       &:not(:last-child)
         margin-bottom: 0
+        margin-right: 0.75rem
       &:not(.is-narrow)
         flex-grow: 1
-      margin-right: 0.75rem
   // Responsiveness
   +tablet
     display: flex

data/app/assets/stylesheets/sass/components/list.sass

@@ -0,0 +1,39 @@
+$list-background-color: $white !default
+$list-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
+$list-radius: $radius !default
+
+$list-item-border: 1px solid $border !default
+$list-item-color: $text !default
+$list-item-active-background-color: $link !default
+$list-item-active-color: $link-invert !default
+$list-item-hover-background-color: $background !default
+
+.list
+  @extend %block
+  background-color: $list-background-color
+  border-radius: $list-radius
+  box-shadow: $list-shadow
+  // &.is-hoverable > .list-item:hover:not(.is-active)
+  //   background-color: $list-item-hover-background-color
+  //   cursor: pointer
+
+.list-item
+  display: block
+  padding: 0.5em 1em
+  &:not(a)
+    color: $list-item-color
+  &:first-child
+    border-top-left-radius: $list-radius
+    border-top-right-radius: $list-radius
+  &:last-child
+    border-top-left-radius: $list-radius
+    border-top-right-radius: $list-radius
+  &:not(:last-child)
+    border-bottom: $list-item-border
+  &.is-active
+    background-color: $list-item-active-background-color
+    color: $list-item-active-color
+
+a.list-item
+  background-color: $list-item-hover-background-color
+  cursor: pointer

data/app/assets/stylesheets/sass/components/media.sass

@@ -42,3 +42,7 @@
   flex-grow: 1
   flex-shrink: 1
   text-align: left
+
++mobile
+  .media-content
+    overflow-x: auto

data/app/assets/stylesheets/sass/components/message.sass

@@ -19,7 +19,7 @@ $message-body-pre-code-background-color: transparent !default
 $message-header-body-border-width: 0 !default
 
 .message
-  +block
+  @extend %block
   background-color: $message-background-color
   border-radius: $message-radius
   font-size: $size-normal

data/app/assets/stylesheets/sass/components/modal.sass

@@ -29,9 +29,10 @@ $modal-card-body-background-color: $white !default
 $modal-card-body-padding: 20px !default
 
 .modal
-  +overlay
+  @extend %overlay
   align-items: center
   display: none
+  flex-direction: column
   justify-content: center
   overflow: hidden
   position: fixed
@@ -41,7 +42,7 @@ $modal-card-body-padding: 20px !default
     display: flex
 
 .modal-background
-  +overlay
+  @extend %overlay
   background-color: $modal-background-background-color
 
 .modal-content,
@@ -58,7 +59,7 @@ $modal-card-body-padding: 20px !default
     width: $modal-content-width
 
 .modal-close
-  +delete
+  @extend %delete
   background: none
   height: $modal-close-dimensions
   position: fixed
@@ -71,6 +72,7 @@ $modal-card-body-padding: 20px !default
   flex-direction: column
   max-height: calc(100vh - #{$modal-card-spacing})
   overflow: hidden
+  -ms-overflow-y: visible
 
 .modal-card-head,
 .modal-card-foot

data/app/assets/stylesheets/sass/components/navbar.sass

@@ -14,6 +14,8 @@ $navbar-item-active-color: $black !default
 $navbar-item-active-background-color: transparent !default
 $navbar-item-img-max-height: 1.75rem !default
 
+$navbar-burger-color: $navbar-item-color !default
+
 $navbar-tab-hover-background-color: transparent !default
 $navbar-tab-hover-border-bottom-color: $link !default
 $navbar-tab-active-color: $link !default
@@ -42,6 +44,8 @@ $navbar-divider-height: 2px !default
 
 $navbar-bottom-box-shadow-size: 0 -2px 0 0 !default
 
+$navbar-breakpoint: $desktop !default
+
 =navbar-fixed
   left: 0
   position: fixed
@@ -72,7 +76,9 @@ $navbar-bottom-box-shadow-size: 0 -2px 0 0 !default
         .navbar-link
           &::after
             border-color: $color-invert
-      +desktop
+      .navbar-burger
+        color: $color-invert
+      +from($navbar-breakpoint)
         .navbar-start,
         .navbar-end
           & > .navbar-item,
@@ -139,6 +145,7 @@ body
   overflow-y: hidden
 
 .navbar-burger
+  color: $navbar-burger-color
   +hamburger($navbar-height)
   margin-left: auto
 
@@ -195,10 +202,11 @@ a.navbar-item,
   flex-grow: 1
   flex-shrink: 1
 
-.navbar-link
+.navbar-link:not(.is-arrowless)
   padding-right: 2.5em
   &::after
-    +arrow($navbar-dropdown-arrow)
+    @extend %arrow
+    border-color: $navbar-dropdown-arrow
     margin-top: -0.375em
     right: 1.125em
 
@@ -217,7 +225,7 @@ a.navbar-item,
   height: $navbar-divider-height
   margin: 0.5rem 0
 
-+touch
++until($navbar-breakpoint)
   .navbar > .container
     display: block
   .navbar-brand,
@@ -258,7 +266,7 @@ a.navbar-item,
     &.has-navbar-fixed-bottom-touch
       padding-bottom: $navbar-height
 
-+desktop
++from($navbar-breakpoint)
   .navbar,
   .navbar-menu,
   .navbar-start,
@@ -376,9 +384,9 @@ a.navbar-item,
   .navbar > .container,
   .container > .navbar
     .navbar-brand
-      margin-left: -1rem
+      margin-left: -.75rem
     .navbar-menu
-      margin-right: -1rem
+      margin-right: -.75rem
   // Fixed navbar
   .navbar
     &.is-fixed-bottom-desktop,

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

@@ -1,6 +1,7 @@
 $pagination-color: $grey-darker !default
 $pagination-border-color: $grey-lighter !default
 $pagination-margin: -0.25rem !default
+$pagination-min-width: $control-height !default
 
 $pagination-hover-color: $link-hover !default
 $pagination-hover-border-color: $link-hover-border !default
@@ -53,8 +54,8 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
 .pagination-next,
 .pagination-link,
 .pagination-ellipsis
-  +control
-  +unselectable
+  @extend %control
+  @extend %unselectable
   font-size: 1em
   padding-left: 0.5em
   padding-right: 0.5em
@@ -67,7 +68,7 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
 .pagination-link
   border-color: $pagination-border-color
   color: $pagination-color
-  min-width: 2.25em
+  min-width: $pagination-min-width
   &:hover
     border-color: $pagination-hover-border-color
     color: $pagination-hover-color

data/app/assets/stylesheets/sass/components/tabs.sass

@@ -27,9 +27,9 @@ $tabs-toggle-link-active-border-color: $link !default
 $tabs-toggle-link-active-color: $link-invert !default
 
 .tabs
-  +block
+  @extend %block
   +overflow-touch
-  +unselectable
+  @extend %unselectable
   align-items: stretch
   display: flex
   font-size: $size-normal

data/app/assets/stylesheets/sass/elements/box.sass

@@ -8,7 +8,7 @@ $box-link-hover-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $link !default
 $box-link-active-shadow: inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link !default
 
 .box
-  +block
+  @extend %block
   background-color: $box-background-color
   border-radius: $box-radius
   box-shadow: $box-shadow

data/app/assets/stylesheets/sass/elements/button.sass

@@ -41,8 +41,8 @@ $button-static-border-color: $grey-lighter !default
   font-size: $size-large
 
 .button
-  +control
-  +unselectable
+  @extend %control
+  @extend %unselectable
   background-color: $button-background-color
   border-color: $button-border-color
   border-width: $button-border-width
@@ -198,7 +198,7 @@ $button-static-border-color: $grey-lighter !default
     color: transparent !important
     pointer-events: none
     &::after
-      +loader
+      @extend %loader
       +center(1em)
       position: absolute !important
   &.is-static
@@ -219,7 +219,7 @@ $button-static-border-color: $grey-lighter !default
   justify-content: flex-start
   .button
     margin-bottom: 0.5rem
-    &:not(:last-child)
+    &:not(:last-child):not(.is-fullwidth)
       margin-right: 0.5rem
   &:last-child
     margin-bottom: -0.5rem

data/app/assets/stylesheets/sass/elements/content.sass

@@ -18,7 +18,7 @@ $content-table-foot-cell-border-width: 2px 0 0 !default
 $content-table-foot-cell-color: $text-strong !default
 
 .content
-  +block
+  @extend %block
   // Inline
   li + li
     margin-top: 0.25em
@@ -70,9 +70,19 @@ $content-table-foot-cell-color: $text-strong !default
     border-left: $content-blockquote-border-left
     padding: $content-blockquote-padding
   ol
-    list-style: decimal outside
+    list-style-position: outside
     margin-left: 2em
     margin-top: 1em
+    &:not([type])
+      list-style-type: decimal
+      &.is-lower-alpha
+        list-style-type: lower-alpha
+      &.is-lower-roman
+        list-style-type: lower-roman
+      &.is-upper-alpha
+        list-style-type: upper-alpha
+      &.is-upper-roman
+        list-style-type: upper-roman
   ul
     list-style: disc outside
     margin-left: 2em

data/app/assets/stylesheets/sass/elements/form.sass

@@ -1,6 +1,7 @@
 $input-color: $grey-darker !default
 $input-background-color: $white !default
 $input-border-color: $grey-lighter !default
+$input-height: $control-height !default
 $input-shadow: inset 0 1px 2px rgba($black, 0.1) !default
 
 $input-hover-color: $grey-darker !default
@@ -41,7 +42,7 @@ $label-weight: $weight-bold !default
 $help-size: $size-small !default
 
 =input
-  +control
+  @extend %control
   background-color: $input-background-color
   border-color: $input-border-color
   color: $input-color
@@ -148,10 +149,11 @@ $help-size: $size-small !default
   position: relative
   vertical-align: top
   &:not(.is-multiple)
-    height: 2.25em
+    height: $input-height
   &:not(.is-multiple):not(.is-loading)
     &::after
-      +arrow($input-arrow)
+      @extend %arrow
+      border-color: $input-arrow
       right: 1.125em
       z-index: 4
   &.is-rounded
@@ -172,7 +174,7 @@ $help-size: $size-small !default
     &:not([multiple])
       padding-right: 2.5em
     &[multiple]
-      height: initial
+      height: auto
       padding: 0
       option
         padding: 0.5em 1em
@@ -213,7 +215,7 @@ $help-size: $size-small !default
       width: 100%
   &.is-loading
     &::after
-      +loader
+      @extend %loader
       margin-top: 0
       position: absolute
       right: 0.625em
@@ -227,7 +229,7 @@ $help-size: $size-small !default
       font-size: $size-large
 
 .file
-  +unselectable
+  @extend %unselectable
   align-items: stretch
   display: flex
   justify-content: flex-start
@@ -352,16 +354,17 @@ $help-size: $size-small !default
       border-color: darken($file-name-border-color, 5%)
 
 .file-input
-  height: 0.01em
+  height: 100%
   left: 0
+  opacity: 0
   outline: none
   position: absolute
   top: 0
-  width: 0.01em
+  width: 100%
 
 .file-cta,
 .file-name
-  +control
+  @extend %control
   border-color: $file-border-color
   border-radius: $file-radius
   font-size: 1em
@@ -449,16 +452,17 @@ $help-size: $size-small !default
       .button,
       .input,
       .select select
-        &:hover,
-        &.is-hovered
-          z-index: 2
-        &:focus,
-        &.is-focused,
-        &:active,
-        &.is-active
-          z-index: 3
-          &:hover
-            z-index: 4
+        &:not([disabled])
+          &:hover,
+          &.is-hovered
+            z-index: 2
+          &:focus,
+          &.is-focused,
+          &:active,
+          &.is-active
+            z-index: 3
+            &:hover
+              z-index: 4
       &.is-expanded
         flex-grow: 1
     &.has-addons-centered
@@ -540,6 +544,7 @@ $help-size: $size-small !default
         margin-right: 0.75rem
 
 .control
+  clear: both //fixes the icon floating out of the input when help text is floated right
   font-size: $size-normal
   position: relative
   text-align: left
@@ -548,11 +553,11 @@ $help-size: $size-small !default
   &.has-icon
     .icon
       color: $input-icon-color
-      height: 2.25em
+      height: $input-height
       pointer-events: none
       position: absolute
       top: 0
-      width: 2.25em
+      width: $input-height
       z-index: 4
     .input
       &:focus
@@ -571,12 +576,12 @@ $help-size: $size-small !default
       .icon
         left: 0
       .input
-        padding-left: 2.25em
+        padding-left: $input-height
     &.has-icon-right
       .icon
         right: 0
       .input
-        padding-right: 2.25em
+        padding-right: $input-height
   &.has-icons-left,
   &.has-icons-right
     .input,
@@ -592,27 +597,27 @@ $help-size: $size-small !default
         font-size: $size-large
     .icon
       color: $input-icon-color
-      height: 2.25em
+      height: $input-height
       pointer-events: none
       position: absolute
       top: 0
-      width: 2.25em
+      width: $input-height
       z-index: 4
   &.has-icons-left
     .input,
     .select select
-      padding-left: 2.25em
+      padding-left: $input-height
     .icon.is-left
       left: 0
   &.has-icons-right
     .input,
     .select select
-      padding-right: 2.25em
+      padding-right: $input-height
     .icon.is-right
       right: 0
   &.is-loading
     &::after
-      +loader
+      @extend %loader
       position: absolute !important
       right: 0.625em
       top: 0.625em

data/app/assets/stylesheets/sass/elements/image.sass

@@ -27,7 +27,7 @@ $dimensions: 16 24 32 48 64 96 128 !default
   &.is-1by2,
   &.is-1by3
     img
-      +overlay
+      @extend %overlay
       height: 100%
       width: 100%
   &.is-square,

data/app/assets/stylesheets/sass/elements/notification.sass

@@ -3,12 +3,12 @@ $notification-radius: $radius !default
 $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
 
 .notification
-  +block
+  @extend %block
   background-color: $notification-background-color
   border-radius: $notification-radius
   padding: $notification-padding
   position: relative
-  a:not(.button)
+  a:not(.button):not(.dropdown-item)
     color: currentColor
     text-decoration: underline
   strong

data/app/assets/stylesheets/sass/elements/other.sass

@@ -1,8 +1,8 @@
 .block
-  +block
+  @extend %block
 
 .delete
-  +delete
+  @extend %delete
 
 .heading
   display: block
@@ -12,7 +12,7 @@
   text-transform: uppercase
 
 .highlight
-  +block
+  @extend %block
   font-weight: $weight-normal
   max-width: 100%
   overflow: hidden
@@ -22,7 +22,7 @@
     max-width: 100%
 
 .loader
-  +loader
+  @extend %loader
 
 .number
   align-items: center

data/app/assets/stylesheets/sass/elements/progress.sass

@@ -2,7 +2,7 @@ $progress-bar-background-color: $border !default
 $progress-value-background-color: $text !default
 
 .progress
-  +block
+  @extend %block
   -moz-appearance: none
   -webkit-appearance: none
   border: none

data/app/assets/stylesheets/sass/elements/table.sass

@@ -20,7 +20,7 @@ $table-striped-row-even-background-color: $white-bis !default
 $table-striped-row-even-hover-background-color: $white-ter !default
 
 .table
-  +block
+  @extend %block
   background-color: $table-background-color
   color: $table-color
   td,
@@ -98,7 +98,9 @@ $table-striped-row-even-hover-background-color: $white-ter !default
       tbody
         tr:not(.is-selected)
           &:hover
-            background-color: $table-striped-row-even-hover-background-color
+            background-color: $table-row-hover-background-color
+            &:nth-child(even)
+              background-color: $table-striped-row-even-hover-background-color
   &.is-narrow
     td,
     th
@@ -110,7 +112,7 @@ $table-striped-row-even-hover-background-color: $white-ter !default
           background-color: $table-striped-row-even-background-color
 
 .table-container
-  +block
+  @extend %block
   +overflow-touch
   overflow: auto
   overflow-y: hidden

data/app/assets/stylesheets/sass/elements/title.sass

@@ -17,7 +17,7 @@ $subtitle-negative-margin: -1.25rem !default
 
 .title,
 .subtitle
-  +block
+  @extend %block
   word-break: break-word
   em,
   span

data/app/assets/stylesheets/sass/grid/columns.sass

@@ -475,3 +475,30 @@ $column-gap: 0.75rem !default
     @for $i from 0 through 8
       &.is-#{$i}
         --columnGap: #{$i * 0.25rem}
+      +mobile
+        &.is-#{$i}-mobile
+          --columnGap: #{$i * 0.25rem}
+      +tablet
+        &.is-#{$i}-tablet
+          --columnGap: #{$i * 0.25rem}
+      +tablet-only
+        &.is-#{$i}-tablet-only
+          --columnGap: #{$i * 0.25rem}
+      +touch
+        &.is-#{$i}-touch
+          --columnGap: #{$i * 0.25rem}
+      +desktop
+        &.is-#{$i}-desktop
+          --columnGap: #{$i * 0.25rem}
+      +desktop-only
+        &.is-#{$i}-desktop-only
+          --columnGap: #{$i * 0.25rem}
+      +widescreen
+        &.is-#{$i}-widescreen
+          --columnGap: #{$i * 0.25rem}
+      +widescreen-only
+        &.is-#{$i}-widescreen-only
+          --columnGap: #{$i * 0.25rem}
+      +fullhd
+        &.is-#{$i}-fullhd
+          --columnGap: #{$i * 0.25rem}

data/app/assets/stylesheets/sass/layout/hero.sass

@@ -97,7 +97,8 @@
         padding-bottom: 18rem
         padding-top: 18rem
   &.is-halfheight,
-  &.is-fullheight
+  &.is-fullheight,
+  &.is-fullheight-with-navbar
     .hero-body
       align-items: center
       display: flex
@@ -108,11 +109,13 @@
     min-height: 50vh
   &.is-fullheight
     min-height: 100vh
+  &.is-fullheight-with-navbar
+    min-height: calc(100vh - #{$navbar-height})
 
 // Components
 
 .hero-video
-  +overlay
+  @extend %overlay
   overflow: hidden
   video
     left: 50%

data/app/assets/stylesheets/sass/utilities/controls.sass

@@ -3,10 +3,13 @@ $control-radius-small: $radius-small !default
 
 $control-border-width: 1px !default
 
+$control-height: 2.25em !default
+$control-line-height: 1.5 !default
+
 $control-padding-vertical: calc(0.375em - #{$control-border-width}) !default
 $control-padding-horizontal: calc(0.625em - #{$control-border-width}) !default
 
-%control
+=control
   -moz-appearance: none
   -webkit-appearance: none
   align-items: center
@@ -15,9 +18,9 @@ $control-padding-horizontal: calc(0.625em - #{$control-border-width}) !default
   box-shadow: none
   display: inline-flex
   font-size: $size-normal
-  height: 2.25em
+  height: $control-height
   justify-content: flex-start
-  line-height: 1.5
+  line-height: $control-line-height
   padding-bottom: $control-padding-vertical
   padding-left: $control-padding-horizontal
   padding-right: $control-padding-horizontal
@@ -33,8 +36,8 @@ $control-padding-horizontal: calc(0.625em - #{$control-border-width}) !default
   &[disabled]
     cursor: not-allowed
 
-=control
-  @extend %control
+%control
+  +control
 
 // The controls sizes use mixins so they can be used at different breakpoints
 =control-small

data/app/assets/stylesheets/sass/utilities/mixins.sass

@@ -130,18 +130,18 @@
 
 // Placeholders
 
-%unselectable
+=unselectable
   -webkit-touch-callout: none
   -webkit-user-select: none
   -moz-user-select: none
   -ms-user-select: none
   user-select: none
 
-=unselectable
-  @extend %unselectable
+%unselectable
+  +unselectable
 
-%arrow
-  border: 3px solid transparent
+=arrow($color: transparent)
+  border: 3px solid $color
   border-radius: 2px
   border-right: 0
   border-top: 0
@@ -156,18 +156,17 @@
   transform-origin: center
   width: 0.625em
 
-=arrow($color)
-  @extend %arrow
-  border-color: $color
+%arrow
+  +arrow
 
-%block
+=block
   &:not(:last-child)
     margin-bottom: 1.5rem
 
-=block
-  @extend %block
+%block
+  +block
 
-%delete
+=delete
   @extend %unselectable
   -moz-appearance: none
   -webkit-appearance: none
@@ -175,6 +174,7 @@
   border: none
   border-radius: $radius-rounded
   cursor: pointer
+  pointer-events: auto
   display: inline-block
   flex-grow: 0
   flex-shrink: 0
@@ -232,12 +232,12 @@
     min-width: 32px
     width: 32px
 
-=delete
-  @extend %delete
+%delete
+  +delete
 
-%loader
+=loader
   animation: spinAround 500ms infinite linear
-  border: 2px solid $border
+  border: 2px solid $grey-lighter
   border-radius: $radius-rounded
   border-right-color: transparent
   border-top-color: transparent
@@ -247,20 +247,15 @@
   position: relative
   width: 1em
 
-=loader
-  @extend %loader
+%loader
+  +loader
 
-%overlay
-  bottom: 0
-  left: 0
+=overlay($offset: 0)
+  bottom: $offset
+  left: $offset
   position: absolute
-  right: 0
-  top: 0
+  right: $offset
+  top: $offset
 
-=overlay($offset: 0)
-  @extend %overlay
-  @if $offset != 0
-    bottom: $offset
-    left: $offset
-    right: $offset
-    top: $offset
+%overlay
+  +overlay

data/bulma-rails.gemspec

@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |gem|
   gem.name          = 'bulma-rails'
-  gem.version       = '0.7.1'
+  gem.version       = '0.7.2'
   gem.authors       = ["Joshua Jansen"]
   gem.email         = ["joshuajansen88@gmail.com"]
   gem.description   = %q{A modern CSS framework based on Flexbox}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: bulma-rails
 version: !ruby/object:Gem::Version
-  version: 0.7.1
+  version: 0.7.2
 platform: ruby
 authors:
 - Joshua Jansen
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-04-18 00:00:00.000000000 Z
+date: 2018-10-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -43,6 +43,7 @@ files:
 - app/assets/stylesheets/sass/components/card.sass
 - app/assets/stylesheets/sass/components/dropdown.sass
 - app/assets/stylesheets/sass/components/level.sass
+- app/assets/stylesheets/sass/components/list.sass
 - app/assets/stylesheets/sass/components/media.sass
 - app/assets/stylesheets/sass/components/menu.sass
 - app/assets/stylesheets/sass/components/message.sass
@@ -101,7 +102,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.6.11
+rubygems_version: 2.6.13
 signing_key: 
 specification_version: 4
 summary: This gem adds the bulma.io assets to your asset pipeline so you can import