bulma-rails 0.7.4 → 0.7.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a29096458e722e8e8573f5d1160c5ea8053b612342dea6accc7e2c51901d7a9d
-  data.tar.gz: 48db36bed7b027a21036aae1fafbb282da1d37d6b619d150c77118852490968a
+  metadata.gz: 5891e5010055ad7a4fd0cfb1c5c0aea95e5eb40e1790c46c7c36548822203550
+  data.tar.gz: b2245af51d52fb493b3ec05fd7cdadcad22ee53e157eaa111a18be9164b58817
 SHA512:
-  metadata.gz: aeefad281fbd84cfdfa6e09ee248ebada5cac4d1d1b6f18755e3bd3cf72e260b7b6487740ae455a5b99b0f700e45832de88ba0062cb48669b521f608aa83439e
-  data.tar.gz: a34fa2f5d6d97ebd4f062b4d892f7ef1cc493f750601e1b1f2a1fd81d18f5359e6630b6925c335295ff14ad0a9b0652d7a4810248fcfcfa7c9e15e94a7c7c754
+  metadata.gz: 4591196de8b24930a2cf2d9ec1cb01ee6306961944eab1a591d8bce2acb307dc156b83b4143c747de70f85ffe8f3cffd07e4b5c436371c1db8b852d350d86f4d
+  data.tar.gz: ba3fdd43de4a616c6c2f5e1287332ed93094567bbeef5d4df497a79250edb7437b9b34c2cc088293d742ffad9420b132bb6976745de425bf1df73aaa6bb8546d

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.4"
+    gem "bulma-rails", "~> 0.7.5"
 
 And then execute:
 

data/app/assets/stylesheets/bulma.sass

@@ -1,8 +1,9 @@
 @charset "utf-8"
-/*! bulma.io v0.7.4 | MIT License | github.com/jgthms/bulma */
+/*! bulma.io v0.7.5 | MIT License | github.com/jgthms/bulma */
 @import "sass/utilities/_all"
 @import "sass/base/_all"
 @import "sass/elements/_all"
+@import "sass/form/_all"
 @import "sass/components/_all"
 @import "sass/grid/_all"
 @import "sass/layout/_all"

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

@@ -1,8 +1,13 @@
 $body-background-color: $white !default
 $body-size: 16px !default
+$body-min-width: 300px !default
 $body-rendering: optimizeLegibility !default
 $body-family: $family-primary !default
+$body-overflow-x: hidden !default
+$body-overflow-y: scroll !default
+
 $body-color: $text !default
+$body-font-size: 1em !default
 $body-weight: $weight-normal !default
 $body-line-height: 1.5 !default
 
@@ -11,6 +16,8 @@ $code-padding: 0.25em 0.5em 0.25em !default
 $code-weight: normal !default
 $code-size: 0.875em !default
 
+$small-font-size: 0.875em !default
+
 $hr-background-color: $background !default
 $hr-height: 2px !default
 $hr-margin: 1.5rem 0 !default
@@ -18,14 +25,18 @@ $hr-margin: 1.5rem 0 !default
 $strong-color: $text-strong !default
 $strong-weight: $weight-bold !default
 
+$pre-font-size: 0.875em !default
+$pre-padding: 1.25rem 1.5rem !default
+$pre-code-font-size: 1em !default
+
 html
   background-color: $body-background-color
   font-size: $body-size
   -moz-osx-font-smoothing: grayscale
   -webkit-font-smoothing: antialiased
-  min-width: 300px
-  overflow-x: hidden
-  overflow-y: scroll
+  min-width: $body-min-width
+  overflow-x: $body-overflow-x
+  overflow-y: $body-overflow-y
   text-rendering: $body-rendering
   text-size-adjust: 100%
 
@@ -53,7 +64,7 @@ pre
 
 body
   color: $body-color
-  font-size: 1rem
+  font-size: $body-font-size
   font-weight: $body-weight
   line-height: $body-line-height
 
@@ -91,7 +102,7 @@ input[type="radio"]
   vertical-align: baseline
 
 small
-  font-size: 0.875em
+  font-size: $small-font-size
 
 span
   font-style: inherit
@@ -110,21 +121,22 @@ pre
   +overflow-touch
   background-color: $pre-background
   color: $pre
-  font-size: 0.875em
+  font-size: $pre-font-size
   overflow-x: auto
-  padding: 1.25rem 1.5rem
+  padding: $pre-padding
   white-space: pre
   word-wrap: normal
   code
     background-color: transparent
     color: currentColor
-    font-size: 1em
+    font-size: $pre-code-font-size
     padding: 0
 
 table
   td,
   th
-    text-align: left
     vertical-align: top
+    &:not([align])
+      text-align: left
   th
     color: $text-strong

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

@@ -115,6 +115,8 @@ $alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'rig
   font-weight: $weight-light !important
 .has-text-weight-normal
   font-weight: $weight-normal !important
+.has-text-weight-medium
+  font-weight: $weight-medium !important
 .has-text-weight-semibold
   font-weight: $weight-semibold !important
 .has-text-weight-bold
@@ -274,3 +276,6 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
 
 .is-unselectable
   @extend %unselectable
+
+.is-relative
+  position: relative !important

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

@@ -81,4 +81,5 @@ table
 td,
 th
   padding: 0
-  text-align: left
+  &:not([align])
+    text-align: left

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

@@ -4,13 +4,18 @@ $card-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
 
 $card-header-background-color: transparent !default
 $card-header-color: $text-strong !default
+$card-header-padding: 0.75rem !default
 $card-header-shadow: 0 1px 2px rgba($black, 0.1) !default
 $card-header-weight: $weight-bold !default
 
 $card-content-background-color: transparent !default
+$card-content-padding: 1.5rem !default
 
 $card-footer-background-color: transparent !default
 $card-footer-border-top: 1px solid $border !default
+$card-footer-padding: 0.75rem !default
+
+$card-media-margin: $block-spacing !default
 
 .card
   background-color: $card-background-color
@@ -31,7 +36,7 @@ $card-footer-border-top: 1px solid $border !default
   display: flex
   flex-grow: 1
   font-weight: $card-header-weight
-  padding: 0.75rem
+  padding: $card-header-padding
   &.is-centered
     justify-content: center
 
@@ -40,7 +45,7 @@ $card-footer-border-top: 1px solid $border !default
   cursor: pointer
   display: flex
   justify-content: center
-  padding: 0.75rem
+  padding: $card-header-padding
 
 .card-image
   display: block
@@ -48,7 +53,7 @@ $card-footer-border-top: 1px solid $border !default
 
 .card-content
   background-color: $card-content-background-color
-  padding: 1.5rem
+  padding: $card-content-padding
 
 .card-footer
   background-color: $card-footer-background-color
@@ -63,7 +68,7 @@ $card-footer-border-top: 1px solid $border !default
   flex-grow: 1
   flex-shrink: 0
   justify-content: center
-  padding: 0.75rem
+  padding: $card-footer-padding
   &:not(:last-child)
     border-right: $card-footer-border-top
 
@@ -71,4 +76,4 @@ $card-footer-border-top: 1px solid $border !default
 
 .card
   .media:not(:last-child)
-    margin-bottom: 0.75rem
+    margin-bottom: $card-media-margin

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

@@ -1,6 +1,10 @@
+$dropdown-menu-min-width: 12rem !default
+
 $dropdown-content-background-color: $white !default
 $dropdown-content-arrow: $link !default
 $dropdown-content-offset: 4px !default
+$dropdown-content-padding-bottom: 0.5rem !default
+$dropdown-content-padding-top: 0.5rem !default
 $dropdown-content-radius: $radius !default
 $dropdown-content-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
 $dropdown-content-z: 20 !default
@@ -35,7 +39,7 @@ $dropdown-divider-background-color: $border !default
 .dropdown-menu
   display: none
   left: 0
-  min-width: 12rem
+  min-width: $dropdown-menu-min-width
   padding-top: $dropdown-content-offset
   position: absolute
   top: 100%
@@ -45,8 +49,8 @@ $dropdown-divider-background-color: $border !default
   background-color: $dropdown-content-background-color
   border-radius: $dropdown-content-radius
   box-shadow: $dropdown-content-shadow
-  padding-bottom: 0.5rem
-  padding-top: 0.5rem
+  padding-bottom: $dropdown-content-padding-bottom
+  padding-top: $dropdown-content-padding-top
 
 .dropdown-item
   color: $dropdown-item-color

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

@@ -1,3 +1,5 @@
+$level-item-spacing: ($block-spacing / 2) !default
+
 .level
   @extend %block
   align-items: center
@@ -18,7 +20,7 @@
     .level-item
       &:not(:last-child)
         margin-bottom: 0
-        margin-right: 0.75rem
+        margin-right: $level-item-spacing
       &:not(.is-narrow)
         flex-grow: 1
   // Responsiveness
@@ -41,7 +43,7 @@
   // Responsiveness
   +mobile
     &:not(:last-child)
-      margin-bottom: 0.75rem
+      margin-bottom: $level-item-spacing
 
 .level-left,
 .level-right
@@ -55,7 +57,7 @@
     // Responsiveness
     +tablet
       &:not(:last-child)
-        margin-right: 0.75rem
+        margin-right: $level-item-spacing
 
 .level-left
   align-items: center

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

@@ -26,8 +26,8 @@ $list-item-hover-background-color: $background !default
     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
+    border-bottom-left-radius: $list-radius
+    border-bottom-right-radius: $list-radius
   &:not(:last-child)
     border-bottom: $list-item-border
   &.is-active
@@ -36,4 +36,4 @@ $list-item-hover-background-color: $background !default
 
 a.list-item
   background-color: $list-item-hover-background-color
-  cursor: pointer
+  cursor: pointer

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

@@ -6,8 +6,15 @@ $menu-item-active-color: $link-invert !default
 $menu-item-active-background-color: $link !default
 
 $menu-list-border-left: 1px solid $border !default
+$menu-list-line-height: 1.25 !default
+$menu-list-link-padding: 0.5em 0.75em !default
+$menu-nested-list-margin: 0.75em !default
+$menu-nested-list-padding-left: 0.75em !default
 
 $menu-label-color: $text-light !default
+$menu-label-font-size: 0.75em !default
+$menu-label-letter-spacing: 0.1em !default
+$menu-label-spacing: 1em !default
 
 .menu
   font-size: $size-normal
@@ -20,12 +27,12 @@ $menu-label-color: $text-light !default
     font-size: $size-large
 
 .menu-list
-  line-height: 1.25
+  line-height: $menu-list-line-height
   a
     border-radius: $menu-item-radius
     color: $menu-item-color
     display: block
-    padding: 0.5em 0.75em
+    padding: $menu-list-link-padding
     &:hover
       background-color: $menu-item-hover-background-color
       color: $menu-item-hover-color
@@ -36,15 +43,15 @@ $menu-label-color: $text-light !default
   li
     ul
       border-left: $menu-list-border-left
-      margin: 0.75em
-      padding-left: 0.75em
+      margin: $menu-nested-list-margin
+      padding-left: $menu-nested-list-padding-left
 
 .menu-label
   color: $menu-label-color
-  font-size: 0.75em
-  letter-spacing: 0.1em
+  font-size: $menu-label-font-size
+  letter-spacing: $menu-label-letter-spacing
   text-transform: uppercase
   &:not(:first-child)
-    margin-top: 1em
+    margin-top: $menu-label-spacing
   &:not(:last-child)
-    margin-bottom: 1em
+    margin-bottom: $menu-label-spacing

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

@@ -17,6 +17,7 @@ $message-body-pre-background-color: $white !default
 $message-body-pre-code-background-color: transparent !default
 
 $message-header-body-border-width: 0 !default
+$message-colors: $colors !default
 
 .message
   @extend %block
@@ -36,7 +37,7 @@ $message-header-body-border-width: 0 !default
   &.is-large
     font-size: $size-large
   // Colors
-  @each $name, $pair in $colors
+  @each $name, $pair in $message-colors
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
     $color-lightning: max((100% - lightness($color)) - 2%, 0%)

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

@@ -102,7 +102,7 @@ $modal-card-body-padding: 20px !default
   border-top: $modal-card-foot-border-top
   .button
     &:not(:last-child)
-      margin-right: 10px
+      margin-right: 0.5em
 
 .modal-card-body
   +overflow-touch

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

@@ -69,6 +69,7 @@ $navbar-breakpoint: $desktop !default
           color: $color-invert
         & > a.navbar-item,
         .navbar-link
+          &:focus,
           &:hover,
           &.is-active
             background-color: darken($color, 5%)
@@ -86,6 +87,7 @@ $navbar-breakpoint: $desktop !default
             color: $color-invert
           & > a.navbar-item,
           .navbar-link
+            &:focus,
             &:hover,
             &.is-active
               background-color: darken($color, 5%)
@@ -93,6 +95,7 @@ $navbar-breakpoint: $desktop !default
           .navbar-link
             &::after
               border-color: $color-invert
+        .navbar-item.has-dropdown:focus .navbar-link,
         .navbar-item.has-dropdown:hover .navbar-link,
         .navbar-item.has-dropdown.is-active .navbar-link
           background-color: darken($color, 5%)
@@ -135,6 +138,7 @@ body
 
 .navbar-brand
   a.navbar-item
+    &:focus,
     &:hover
       background-color: transparent
 
@@ -167,6 +171,8 @@ body
 a.navbar-item,
 .navbar-link
   cursor: pointer
+  &:focus,
+  &:focus-within,
   &:hover,
   &.is-active
     background-color: $navbar-item-hover-background-color
@@ -187,6 +193,7 @@ a.navbar-item,
     border-bottom: 1px solid transparent
     min-height: $navbar-height
     padding-bottom: calc(0.5rem - 1px)
+    &:focus,
     &:hover
       background-color: $navbar-tab-hover-background-color
       border-bottom-color: $navbar-tab-hover-border-bottom-color
@@ -286,16 +293,20 @@ a.navbar-item,
     &.is-transparent
       a.navbar-item,
       .navbar-link
+        &:focus,
         &:hover,
         &.is-active
           background-color: transparent !important
       .navbar-item.has-dropdown
         &.is-active,
+        &.is-hoverable:focus,
+        &.is-hoverable:focus-within,
         &.is-hoverable:hover
           .navbar-link
             background-color: transparent !important
       .navbar-dropdown
         a.navbar-item
+          &:focus,
           &:hover
             background-color: $navbar-dropdown-item-hover-background-color
             color: $navbar-dropdown-item-hover-color
@@ -323,6 +334,8 @@ a.navbar-item,
         box-shadow: 0 -8px 8px rgba($black, 0.1)
         top: auto
     &.is-active,
+    &.is-hoverable:focus,
+    &.is-hoverable:focus-within,
     &.is-hoverable:hover
       .navbar-dropdown
         display: block
@@ -358,6 +371,7 @@ a.navbar-item,
       white-space: nowrap
     a.navbar-item
       padding-right: 3rem
+      &:focus,
       &:hover
         background-color: $navbar-dropdown-item-hover-background-color
         color: $navbar-dropdown-item-hover-color
@@ -413,9 +427,10 @@ a.navbar-item,
   .navbar-link
     &.is-active
       color: $navbar-item-active-color
-    &.is-active:not(:hover)
+    &.is-active:not(:focus):not(:hover)
       background-color: $navbar-item-active-background-color
   .navbar-item.has-dropdown
+    &:focus,
     &:hover,
     &.is-active
       .navbar-link