bulma-rails 0.9.0 → 0.9.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7c187d8e95e7482bbecab4a5e320ccdce88f049367e3d639054d1845fc99d0f4
-  data.tar.gz: 020c68825cef7a2d45a64d59f61b008326a99bd8cad9b6bd41a17a5c39b5edcf
+  metadata.gz: 0f23802006ea243e64255a3d2ba2c9bd82e4c6350fbbd8f9cf9a3feb700d1f56
+  data.tar.gz: 40de97f9bff592255f906be8eb1704a3b6f8514625536a1c17b8c7b10911feb0
 SHA512:
-  metadata.gz: 01e0140a8537b859ea5ca35a1b31a93fd93a25737a69d42ce8d6f25ab4de50be9a7b3c8aedfeae6bfe1937475b620f4ad62dc97f1be3d0088080b3728e8b8650
-  data.tar.gz: a84d032d4f015c10933c1d3cdf6a6a616da806c8301e887da6134c19a257f7c8941a126f4dd2157cf9ab8f23d93920495db9f54d2d9a0d4b3e675e556f98a782
+  metadata.gz: 6593971d948f8acfe1d51e6f431ab8ca3c31219c521ac6225da8017790b1e54bb3b1df61d1ceded04470d2777ec7e00edf25b92b334c1b6d145fe72a7b4f93cf
+  data.tar.gz: c4671fbe80312a4f2b5b169788126cd4cc2f576ecfbf573127dcbb3489878e195f1fafc5c6388fae04cb5d321acd4ae324ad21752d5fc8c060bfb83e708ce4c5

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

data/app/assets/stylesheets/bulma.sass

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

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

@@ -1,4 +1,6 @@
+/* Bulma Base */
 @charset "utf-8"
 
-@import "minireset.sass"
-@import "generic.sass"
+@import "minireset"
+@import "generic"
+@import "animations"

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

@@ -0,0 +1,5 @@
+@keyframes spinAround
+  from
+    transform: rotate(0deg)
+  to
+    transform: rotate(359deg)

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

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 $body-background-color: $scheme-main !default
 $body-size: 16px !default
 $body-min-width: 300px !default
@@ -52,6 +54,7 @@ section
 body,
 button,
 input,
+optgroup,
 select,
 textarea
   font-family: $body-family

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

@@ -1,14 +1,15 @@
+/* Bulma Components */
 @charset "utf-8"
 
-@import "breadcrumb.sass"
-@import "card.sass"
-@import "dropdown.sass"
-@import "level.sass"
-@import "media.sass"
-@import "menu.sass"
-@import "message.sass"
-@import "modal.sass"
-@import "navbar.sass"
-@import "pagination.sass"
-@import "panel.sass"
-@import "tabs.sass"
+@import "breadcrumb"
+@import "card"
+@import "dropdown"
+@import "level"
+@import "media"
+@import "menu"
+@import "message"
+@import "modal"
+@import "navbar"
+@import "pagination"
+@import "panel"
+@import "tabs"

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

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 $breadcrumb-item-color: $link !default
 $breadcrumb-item-hover-color: $link-hover !default
 $breadcrumb-item-active-color: $text-strong !default

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

@@ -1,6 +1,9 @@
+@import "../utilities/mixins"
+
 $card-color: $text !default
 $card-background-color: $scheme-main !default
-$card-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
+$card-shadow: $shadow !default
+$card-radius: 0.25rem !default
 
 $card-header-background-color: transparent !default
 $card-header-color: $text-strong !default
@@ -19,12 +22,22 @@ $card-media-margin: $block-spacing !default
 
 .card
   background-color: $card-background-color
+  border-radius: $card-radius
   box-shadow: $card-shadow
   color: $card-color
   max-width: 100%
   position: relative
 
+%card-item
+  &:first-child
+    border-top-left-radius: $card-radius
+    border-top-right-radius: $card-radius
+  &:last-child
+    border-bottom-left-radius: $card-radius
+    border-bottom-right-radius: $card-radius
+
 .card-header
+  @extend %card-item
   background-color: $card-header-background-color
   align-items: stretch
   box-shadow: $card-header-shadow
@@ -41,6 +54,7 @@ $card-media-margin: $block-spacing !default
     justify-content: center
 
 .card-header-icon
+  +reset
   align-items: center
   cursor: pointer
   display: flex
@@ -50,12 +64,22 @@ $card-media-margin: $block-spacing !default
 .card-image
   display: block
   position: relative
+  &:first-child
+    img
+      border-top-left-radius: $card-radius
+      border-top-right-radius: $card-radius
+  &:last-child
+    img
+      border-bottom-left-radius: $card-radius
+      border-bottom-right-radius: $card-radius
 
 .card-content
+  @extend %card-item
   background-color: $card-content-background-color
   padding: $card-content-padding
 
 .card-footer
+  @extend %card-item
   background-color: $card-footer-background-color
   border-top: $card-footer-border-top
   align-items: stretch

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

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 $dropdown-menu-min-width: 12rem !default
 
 $dropdown-content-background-color: $scheme-main !default
@@ -6,7 +8,7 @@ $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 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
+$dropdown-content-shadow: $shadow !default
 $dropdown-content-z: 20 !default
 
 $dropdown-item-color: $text !default

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

@@ -1,4 +1,6 @@
-$level-item-spacing: ($block-spacing / 2) !default
+@import "../utilities/mixins"
+
+$level-item-spacing: ($block-spacing * 0.5) !default
 
 .level
   @extend %block

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

@@ -1,26 +1,33 @@
+@import "../utilities/mixins"
+
 $media-border-color: bulmaRgba($border, 0.5) !default
-$media-spacing: 1rem
-$media-spacing-large: 1.5rem
+$media-border-size: 1px !default
+$media-spacing: 1rem !default
+$media-spacing-large: 1.5rem !default
+$media-content-spacing: 0.75rem !default
+$media-level-1-spacing: 0.75rem !default
+$media-level-1-content-spacing: 0.5rem !default
+$media-level-2-spacing: 0.5rem !default
 
 .media
   align-items: flex-start
   display: flex
   text-align: inherit
   .content:not(:last-child)
-    margin-bottom: 0.75rem
+    margin-bottom: $media-content-spacing
   .media
-    border-top: 1px solid $media-border-color
+    border-top: $media-border-size solid $media-border-color
     display: flex
-    padding-top: 0.75rem
+    padding-top: $media-level-1-spacing
     .content:not(:last-child),
     .control:not(:last-child)
-      margin-bottom: 0.5rem
+      margin-bottom: $media-level-1-content-spacing
     .media
-      padding-top: 0.5rem
+      padding-top: $media-level-2-spacing
       & + .media
-        margin-top: 0.5rem
+        margin-top: $media-level-2-spacing
   & + .media
-    border-top: 1px solid $media-border-color
+    border-top: $media-border-size solid $media-border-color
     margin-top: $media-spacing
     padding-top: $media-spacing
   // Sizes

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

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 $menu-item-color: $text !default
 $menu-item-radius: $radius-small !default
 $menu-item-hover-color: $text-strong !default

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

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 $message-background-color: $background !default
 $message-radius: $radius !default
 

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

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 $modal-z: 40 !default
 
 $modal-background-background-color: bulmaRgba($scheme-invert, 0.86) !default
@@ -28,6 +30,8 @@ $modal-card-foot-border-top: 1px solid $border !default
 $modal-card-body-background-color: $scheme-main !default
 $modal-card-body-padding: 20px !default
 
+$modal-breakpoint: $tablet !default
+
 .modal
   @extend %overlay
   align-items: center
@@ -53,7 +57,7 @@ $modal-card-body-padding: 20px !default
   position: relative
   width: 100%
   // Responsiveness
-  +tablet
+  +from($modal-breakpoint)
     margin: 0 auto
     max-height: calc(100vh - #{$modal-content-spacing-tablet})
     width: $modal-content-width

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

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 $navbar-background-color: $scheme-main !default
 $navbar-box-shadow-size: 0 2px 0 0 !default
 $navbar-box-shadow-color: $background !default
@@ -46,6 +48,8 @@ $navbar-bottom-box-shadow-size: 0 -2px 0 0 !default
 
 $navbar-breakpoint: $desktop !default
 
+$navbar-colors: $colors !default
+
 =navbar-fixed
   left: 0
   position: fixed
@@ -57,7 +61,7 @@ $navbar-breakpoint: $desktop !default
   min-height: $navbar-height
   position: relative
   z-index: $navbar-z
-  @each $name, $pair in $colors
+  @each $name, $pair in $navbar-colors
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
     &.is-#{$name}
@@ -149,6 +153,7 @@ body
   overflow-y: hidden
 
 .navbar-burger
+  @extend %reset
   color: $navbar-burger-color
   +hamburger($navbar-height)
   +ltr-property("margin", auto, false)

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

@@ -1,3 +1,6 @@
+@import "../utilities/controls"
+@import "../utilities/mixins"
+
 $pagination-color: $text-strong !default
 $pagination-border-color: $border !default
 $pagination-margin: -0.25rem !default
@@ -8,6 +11,9 @@ $pagination-item-margin: 0.25rem !default
 $pagination-item-padding-left: 0.5em !default
 $pagination-item-padding-right: 0.5em !default
 
+$pagination-nav-padding-left: 0.75em !default
+$pagination-nav-padding-right: 0.75em !default
+
 $pagination-hover-color: $link-hover !default
 $pagination-hover-border-color: $link-hover-border !default
 
@@ -27,7 +33,7 @@ $pagination-current-border-color: $link !default
 
 $pagination-ellipsis-color: $grey-light !default
 
-$pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2)
+$pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2) !default
 
 .pagination
   @extend %block
@@ -91,8 +97,8 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2)
 
 .pagination-previous,
 .pagination-next
-  padding-left: 0.75em
-  padding-right: 0.75em
+  padding-left: $pagination-nav-padding-left
+  padding-right: $pagination-nav-padding-right
   white-space: nowrap
 
 .pagination-link
@@ -107,6 +113,8 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2)
 
 .pagination-list
   flex-wrap: wrap
+  li
+    list-style: none
 
 +mobile
   .pagination
@@ -126,12 +134,20 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2)
     flex-shrink: 1
     justify-content: flex-start
     order: 1
+  .pagination-previous,
+  .pagination-next,
+  .pagination-link,
+  .pagination-ellipsis
+    margin-bottom: 0
+    margin-top: 0
   .pagination-previous
     order: 2
   .pagination-next
     order: 3
   .pagination
     justify-content: space-between
+    margin-bottom: 0
+    margin-top: 0
     &.is-centered
       .pagination-previous
         order: 1

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

@@ -1,7 +1,9 @@
+@import "../utilities/mixins"
+
 $panel-margin: $block-spacing !default
 $panel-item-border: 1px solid $border-light !default
 $panel-radius: $radius-large !default
-$panel-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
+$panel-shadow: $shadow !default
 
 $panel-heading-background-color: $border-light !default
 $panel-heading-color: $text-strong !default

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

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 $tabs-border-bottom-color: $border !default
 $tabs-border-bottom-style: solid !default
 $tabs-border-bottom-width: 1px !default

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

@@ -1,15 +1,16 @@
+/* Bulma Elements */
 @charset "utf-8"
 
-@import "box.sass"
-@import "button.sass"
-@import "container.sass"
-@import "content.sass"
-@import "icon.sass"
-@import "image.sass"
-@import "notification.sass"
-@import "progress.sass"
-@import "table.sass"
-@import "tag.sass"
-@import "title.sass"
+@import "box"
+@import "button"
+@import "container"
+@import "content"
+@import "icon"
+@import "image"
+@import "notification"
+@import "progress"
+@import "table"
+@import "tag"
+@import "title"
 
-@import "other.sass"
+@import "other"

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

@@ -1,7 +1,9 @@
+@import "../utilities/mixins"
+
 $box-color: $text !default
 $box-background-color: $scheme-main !default
 $box-radius: $radius-large !default
-$box-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
+$box-shadow: $shadow !default
 $box-padding: 1.25rem !default
 
 $box-link-hover-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0 0 1px $link !default

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

@@ -1,3 +1,6 @@
+@import "../utilities/controls"
+@import "../utilities/mixins"
+
 $button-color: $text-strong !default
 $button-background-color: $scheme-main !default
 $button-family: false !default
@@ -24,6 +27,13 @@ $button-text-decoration: underline !default
 $button-text-hover-background-color: $background !default
 $button-text-hover-color: $text-strong !default
 
+$button-ghost-background: none !default
+$button-ghost-border-color: transparent !default
+$button-ghost-color: $link !default
+$button-ghost-decoration: none !default
+$button-ghost-hover-color: $link !default
+$button-ghost-hover-decoration: underline !default
+
 $button-disabled-background-color: $scheme-main !default
 $button-disabled-border-color: $border !default
 $button-disabled-shadow: none !default
@@ -33,9 +43,12 @@ $button-static-color: $text-light !default
 $button-static-background-color: $scheme-main-ter !default
 $button-static-border-color: $border !default
 
+$button-colors: $colors !default
+
 // The button sizes use mixins so they can be used at different breakpoints
 =button-small
-  border-radius: $radius-small
+  &:not(.is-rounded)
+    border-radius: $radius-small
   font-size: $size-small
 =button-normal
   font-size: $size-normal
@@ -71,14 +84,14 @@ $button-static-border-color: $border !default
       height: 1.5em
       width: 1.5em
     &:first-child:not(:last-child)
-      +ltr-property("margin", calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width}), false)
-      +ltr-property("margin", $button-padding-horizontal / 4)
+      +ltr-property("margin", calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}), false)
+      +ltr-property("margin", $button-padding-horizontal * 0.25)
     &:last-child:not(:first-child)
-      +ltr-property("margin", $button-padding-horizontal / 4, false)
-      +ltr-property("margin", calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width}))
+      +ltr-property("margin", $button-padding-horizontal * 0.25, false)
+      +ltr-property("margin", calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}))
     &:first-child:last-child
-      margin-left: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
-      margin-right: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
+      margin-left: calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width})
+      margin-right: calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width})
   // States
   &:hover,
   &.is-hovered
@@ -115,7 +128,16 @@ $button-static-border-color: $border !default
       background-color: transparent
       border-color: transparent
       box-shadow: none
-  @each $name, $pair in $colors
+  &.is-ghost
+    background: $button-ghost-background
+    border-color: $button-ghost-border-color
+    color: $button-ghost-color
+    text-decoration: $button-ghost-decoration
+    &:hover,
+    &.is-hovered
+      color: $button-ghost-hover-color
+      text-decoration: $button-ghost-hover-decoration
+  @each $name, $pair in $button-colors
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
     &.is-#{$name}

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

@@ -1,4 +1,7 @@
+@import "../utilities/mixins"
+
 $container-offset: (2 * $gap) !default
+$container-max-width: $fullhd !default
 
 .container
   flex-grow: 1
@@ -6,19 +9,21 @@ $container-offset: (2 * $gap) !default
   position: relative
   width: auto
   &.is-fluid
-    max-width: none
+    max-width: none !important
     padding-left: $gap
     padding-right: $gap
     width: 100%
   +desktop
     max-width: $desktop - $container-offset
   +until-widescreen
-    &.is-widescreen
-      max-width: $widescreen - $container-offset
+    &.is-widescreen:not(.is-max-desktop)
+      max-width: min($widescreen, $container-max-width) - $container-offset
   +until-fullhd
-    &.is-fullhd
-      max-width: $fullhd - $container-offset
+    &.is-fullhd:not(.is-max-desktop):not(.is-max-widescreen)
+      max-width: min($fullhd, $container-max-width) - $container-offset
   +widescreen
-    max-width: $widescreen - $container-offset
+    &:not(.is-max-desktop)
+      max-width: min($widescreen, $container-max-width) - $container-offset
   +fullhd
-    max-width: $fullhd - $container-offset
+    &:not(.is-max-desktop):not(.is-max-widescreen)
+      max-width: min($fullhd, $container-max-width) - $container-offset

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

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 $content-heading-color: $text-strong !default
 $content-heading-weight: $weight-semibold !default
 $content-heading-line-height: 1.125 !default
@@ -149,6 +151,8 @@ $content-table-foot-cell-color: $text-strong !default
   // Sizes
   &.is-small
     font-size: $size-small
+  &.is-normal
+    font-size: $size-normal
   &.is-medium
     font-size: $size-medium
   &.is-large

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

@@ -2,6 +2,7 @@ $icon-dimensions: 1.5rem !default
 $icon-dimensions-small: 1rem !default
 $icon-dimensions-medium: 2rem !default
 $icon-dimensions-large: 3rem !default
+$icon-text-spacing: 0.25em !default
 
 .icon
   align-items: center
@@ -19,3 +20,27 @@ $icon-dimensions-large: 3rem !default
   &.is-large
     height: $icon-dimensions-large
     width: $icon-dimensions-large
+
+.icon-text
+  align-items: flex-start
+  color: inherit
+  display: inline-flex
+  flex-wrap: wrap
+  line-height: $icon-dimensions
+  vertical-align: top
+  .icon
+    flex-grow: 0
+    flex-shrink: 0
+    &:not(:last-child)
+      +ltr
+        margin-right: $icon-text-spacing
+      +rtl
+        margin-left: $icon-text-spacing
+    &:not(:first-child)
+      +ltr
+        margin-left: $icon-text-spacing
+      +rtl
+        margin-right: $icon-text-spacing
+
+div.icon-text
+  display: flex

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

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 $dimensions: 16 24 32 48 64 96 128 !default
 
 .image

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

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 $notification-background-color: $background !default
 $notification-code-background-color: $scheme-main !default
 $notification-radius: $radius !default
@@ -5,6 +7,8 @@ $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
 $notification-padding-ltr: 1.25rem 2.5rem 1.25rem 1.5rem !default
 $notification-padding-rtl: 1.25rem 1.5rem 1.25rem 2.5rem !default
 
+$notification-colors: $colors !default
+
 .notification
   @extend %block
   background-color: $notification-background-color
@@ -33,7 +37,7 @@ $notification-padding-rtl: 1.25rem 1.5rem 1.25rem 2.5rem !default
   .content
     color: currentColor
   // Colors
-  @each $name, $pair in $colors
+  @each $name, $pair in $notification-colors
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
     &.is-#{$name}

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

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 .block
   @extend %block
 
@@ -11,16 +13,6 @@
   margin-bottom: 5px
   text-transform: uppercase
 
-.highlight
-  @extend %block
-  font-weight: $weight-normal
-  max-width: 100%
-  overflow: hidden
-  padding: 0
-  pre
-    overflow: auto
-    max-width: 100%
-
 .loader
   @extend %loader