bulma-rails 0.8.0 → 0.9.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: dc4426115a7001ee1b6b870535ba81ce465969a56c623951e95eb8ffd2a6984e
-  data.tar.gz: dc03ed54bfb0078a801906a4f84f685727a87a28c1c8016020cce4e7473b9a6b
+  metadata.gz: ab8722d0592d514a63e177a4a3d060b320bd5902677793319dbd83f5a73f0cf3
+  data.tar.gz: a7b21a9651aeaea722a8247923741e75ecc3dff593f36dd4e3f80094459a23f1
 SHA512:
-  metadata.gz: e6d500ad28ced49cde648967b681219c8a731dbc20d099d06fdefe41dad44434278c3fb7e2c92e7e92386e94eb5cf4f03da06e34102581fd64ccdef0fcc8d483
-  data.tar.gz: cddec987c0d603bda62e35110f2c713e8be29c8296e0d3f50a907b20a3f5a1c482fa7cfdfede09fe11cf129c3e1fb5ced7ad46039ed0c1a3ed44e5de6d42977e
+  metadata.gz: 3f4a888d63dca6673ca7776699510a0dab6900d5d047f022950bf29073fc934fd139d0601b450fc451706360e9ab8057e930f2112bccec1d411f6f51d8337d39
+  data.tar.gz: 01f77a36af7b192105dc3d3613f1aa979f4e0f416ca693f8d69280b930e1d9088ce3989a56a31bf8da70d744b4d02c04b7538e268007c40b561dc5d11cf546b9

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

data/app/assets/stylesheets/bulma.sass

@@ -1,9 +1,10 @@
 @charset "utf-8"
-/*! bulma.io v0.8.0 | MIT License | github.com/jgthms/bulma */
+/*! bulma.io v0.9.2 | 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/helpers/_all"
 @import "sass/layout/_all"

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

@@ -1,5 +1,6 @@
+/* Bulma Base */
 @charset "utf-8"
 
-@import "minireset.sass"
-@import "generic.sass"
-@import "helpers.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
@@ -137,6 +140,6 @@ table
   th
     vertical-align: top
     &:not([align])
-      text-align: left
+      text-align: inherit
   th
     color: $text-strong

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

@@ -1,281 +1 @@
-// Float
-
-.is-clearfix
-  +clearfix
-
-.is-pulled-left
-  float: left !important
-
-.is-pulled-right
-  float: right !important
-
-// Overflow
-
-.is-clipped
-  overflow: hidden !important
-
-// Overlay
-
-.is-overlay
-  @extend %overlay
-
-// Typography
-
-=typography-size($target:'')
-  @each $size in $sizes
-    $i: index($sizes, $size)
-    .is-size-#{$i}#{if($target == '', '', '-' + $target)}
-      font-size: $size !important
-
-+typography-size()
-
-+mobile
-  +typography-size('mobile')
-
-+tablet
-  +typography-size('tablet')
-
-+touch
-  +typography-size('touch')
-
-+desktop
-  +typography-size('desktop')
-
-+widescreen
-  +typography-size('widescreen')
-
-+fullhd
-  +typography-size('fullhd')
-
-$alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'right': 'right')
-
-@each $alignment, $text-align in $alignments
-  .has-text-#{$alignment}
-    text-align: #{$text-align} !important
-
-@each $alignment, $text-align in $alignments
-  +mobile
-    .has-text-#{$alignment}-mobile
-      text-align: #{$text-align} !important
-  +tablet
-    .has-text-#{$alignment}-tablet
-      text-align: #{$text-align} !important
-  +tablet-only
-    .has-text-#{$alignment}-tablet-only
-      text-align: #{$text-align} !important
-  +touch
-    .has-text-#{$alignment}-touch
-      text-align: #{$text-align} !important
-  +desktop
-    .has-text-#{$alignment}-desktop
-      text-align: #{$text-align} !important
-  +desktop-only
-    .has-text-#{$alignment}-desktop-only
-      text-align: #{$text-align} !important
-  +widescreen
-    .has-text-#{$alignment}-widescreen
-      text-align: #{$text-align} !important
-  +widescreen-only
-    .has-text-#{$alignment}-widescreen-only
-      text-align: #{$text-align} !important
-  +fullhd
-    .has-text-#{$alignment}-fullhd
-      text-align: #{$text-align} !important
-
-.is-capitalized
-  text-transform: capitalize !important
-
-.is-lowercase
-  text-transform: lowercase !important
-
-.is-uppercase
-  text-transform: uppercase !important
-
-.is-italic
-  font-style: italic !important
-
-@each $name, $pair in $colors
-  $color: nth($pair, 1)
-  .has-text-#{$name}
-    color: $color !important
-  a.has-text-#{$name}
-    &:hover,
-    &:focus
-      color: darken($color, 10%) !important
-  .has-background-#{$name}
-    background-color: $color !important
-
-@each $name, $shade in $shades
-  .has-text-#{$name}
-    color: $shade !important
-  .has-background-#{$name}
-    background-color: $shade !important
-
-.has-text-weight-light
-  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
-  font-weight: $weight-bold !important
-
-.is-family-primary
-  font-family: $family-primary !important
-
-.is-family-secondary
-  font-family: $family-secondary !important
-
-.is-family-sans-serif
-  font-family: $family-sans-serif !important
-
-.is-family-monospace
-  font-family: $family-monospace !important
-
-.is-family-code
-  font-family: $family-code !important
-
-// Visibility
-
-$displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
-
-@each $display in $displays
-  .is-#{$display}
-    display: #{$display} !important
-  +mobile
-    .is-#{$display}-mobile
-      display: #{$display} !important
-  +tablet
-    .is-#{$display}-tablet
-      display: #{$display} !important
-  +tablet-only
-    .is-#{$display}-tablet-only
-      display: #{$display} !important
-  +touch
-    .is-#{$display}-touch
-      display: #{$display} !important
-  +desktop
-    .is-#{$display}-desktop
-      display: #{$display} !important
-  +desktop-only
-    .is-#{$display}-desktop-only
-      display: #{$display} !important
-  +widescreen
-    .is-#{$display}-widescreen
-      display: #{$display} !important
-  +widescreen-only
-    .is-#{$display}-widescreen-only
-      display: #{$display} !important
-  +fullhd
-    .is-#{$display}-fullhd
-      display: #{$display} !important
-
-.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
-
-+tablet
-  .is-hidden-tablet
-    display: none !important
-
-+tablet-only
-  .is-hidden-tablet-only
-    display: none !important
-
-+touch
-  .is-hidden-touch
-    display: none !important
-
-+desktop
-  .is-hidden-desktop
-    display: none !important
-
-+desktop-only
-  .is-hidden-desktop-only
-    display: none !important
-
-+widescreen
-  .is-hidden-widescreen
-    display: none !important
-
-+widescreen-only
-  .is-hidden-widescreen-only
-    display: none !important
-
-+fullhd
-  .is-hidden-fullhd
-    display: none !important
-
-.is-invisible
-  visibility: hidden !important
-
-+mobile
-  .is-invisible-mobile
-    visibility: hidden !important
-
-+tablet
-  .is-invisible-tablet
-    visibility: hidden !important
-
-+tablet-only
-  .is-invisible-tablet-only
-    visibility: hidden !important
-
-+touch
-  .is-invisible-touch
-    visibility: hidden !important
-
-+desktop
-  .is-invisible-desktop
-    visibility: hidden !important
-
-+desktop-only
-  .is-invisible-desktop-only
-    visibility: hidden !important
-
-+widescreen
-  .is-invisible-widescreen
-    visibility: hidden !important
-
-+widescreen-only
-  .is-invisible-widescreen-only
-    visibility: hidden !important
-
-+fullhd
-  .is-invisible-fullhd
-    visibility: hidden !important
-
-// Other
-
-.is-marginless
-  margin: 0 !important
-
-.is-paddingless
-  padding: 0 !important
-
-.is-radiusless
-  border-radius: 0 !important
-
-.is-shadowless
-  box-shadow: none !important
-
-.is-unselectable
-  @extend %unselectable
-
-.is-relative
-  position: relative !important
+@warn "The helpers.sass file is DEPRECATED. It has moved into its own /helpers folder. Please import sass/helpers/_all instead."

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

@@ -76,4 +76,4 @@ td,
 th
   padding: 0
   &:not([align])
-    text-align: left
+    text-align: inherit

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

@@ -1,15 +1,15 @@
+/* Bulma Components */
 @charset "utf-8"
 
-@import "breadcrumb.sass"
-@import "card.sass"
-@import "dropdown.sass"
-@import "level.sass"
-@import "list.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
@@ -24,7 +26,7 @@ $breadcrumb-item-separator-color: $border-hover !default
     align-items: center
     display: flex
     &:first-child a
-      padding-left: 0
+      +ltr-property("padding", 0, false)
     &.is-active
       a
         color: $breadcrumb-item-active-color
@@ -41,9 +43,9 @@ $breadcrumb-item-separator-color: $border-hover !default
     justify-content: flex-start
   .icon
     &:first-child
-      margin-right: 0.5em
+      +ltr-property("margin", 0.5em)
     &:last-child
-      margin-left: 0.5em
+      +ltr-property("margin", 0.5em, false)
   // Alignment
   &.is-centered
     ol,

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-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
@@ -50,12 +63,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
@@ -70,7 +93,7 @@ $card-media-margin: $block-spacing !default
   justify-content: center
   padding: $card-footer-padding
   &:not(:last-child)
-    border-right: $card-footer-border-top
+    +ltr-property("border", $card-footer-border-top)
 
 // Combinations
 

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
@@ -38,7 +40,7 @@ $dropdown-divider-background-color: $border-light !default
 
 .dropdown-menu
   display: none
-  left: 0
+  +ltr-position(0, false)
   min-width: $dropdown-menu-min-width
   padding-top: $dropdown-content-offset
   position: absolute
@@ -62,8 +64,8 @@ $dropdown-divider-background-color: $border-light !default
 
 a.dropdown-item,
 button.dropdown-item
-  padding-right: 3rem
-  text-align: left
+  +ltr-property("padding", 3rem)
+  text-align: inherit
   white-space: nowrap
   width: 100%
   &:hover

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

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 $level-item-spacing: ($block-spacing / 2) !default
 
 .level
@@ -20,7 +22,7 @@ $level-item-spacing: ($block-spacing / 2) !default
     .level-item
       &:not(:last-child)
         margin-bottom: 0
-        margin-right: $level-item-spacing
+        +ltr-property("margin", $level-item-spacing)
       &:not(.is-narrow)
         flex-grow: 1
   // Responsiveness
@@ -57,7 +59,7 @@ $level-item-spacing: ($block-spacing / 2) !default
     // Responsiveness
     +tablet
       &:not(:last-child)
-        margin-right: $level-item-spacing
+        +ltr-property("margin", $level-item-spacing)
 
 .level-left
   align-items: center

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

@@ -1,31 +1,40 @@
-$media-border-color: rgba($border, 0.5) !default
+@import "../utilities/mixins"
+
+$media-border-color: bulmaRgba($border, 0.5) !default
+$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: left
+  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
-    margin-top: 1rem
-    padding-top: 1rem
+    border-top: $media-border-size solid $media-border-color
+    margin-top: $media-spacing
+    padding-top: $media-spacing
   // Sizes
   &.is-large
     & + .media
-      margin-top: 1.5rem
-      padding-top: 1.5rem
+      margin-top: $media-spacing-large
+      padding-top: $media-spacing-large
 
 .media-left,
 .media-right
@@ -34,16 +43,16 @@ $media-border-color: rgba($border, 0.5) !default
   flex-shrink: 0
 
 .media-left
-  margin-right: 1rem
+  +ltr-property("margin", $media-spacing)
 
 .media-right
-  margin-left: 1rem
+  +ltr-property("margin", $media-spacing, false)
 
 .media-content
   flex-basis: auto
   flex-grow: 1
   flex-shrink: 1
-  text-align: left
+  text-align: inherit
 
 +mobile
   .media-content

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
@@ -42,9 +44,9 @@ $menu-label-spacing: 1em !default
       color: $menu-item-active-color
   li
     ul
-      border-left: $menu-list-border-left
+      +ltr-property("border", $menu-list-border-left, false)
       margin: $menu-nested-list-margin
-      padding-left: $menu-nested-list-padding-left
+      +ltr-property("padding", $menu-nested-list-padding-left, false)
 
 .menu-label
   color: $menu-label-color

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

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 $message-background-color: $background !default
 $message-radius: $radius !default
 
@@ -79,7 +81,7 @@ $message-colors: $colors !default
   .delete
     flex-grow: 0
     flex-shrink: 0
-    margin-left: 0.75em
+    +ltr-property("margin", 0.75em, false)
   & + .message-body
     border-width: $message-header-body-border-width
     border-top-left-radius: 0

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

@@ -1,6 +1,8 @@
+@import "../utilities/mixins"
+
 $modal-z: 40 !default
 
-$modal-background-background-color: rgba($scheme-invert, 0.86) !default
+$modal-background-background-color: bulmaRgba($scheme-invert, 0.86) !default
 
 $modal-content-width: 640px !default
 $modal-content-margin-mobile: 20px !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
@@ -63,7 +67,7 @@ $modal-card-body-padding: 20px !default
   background: none
   height: $modal-close-dimensions
   position: fixed
-  right: $modal-close-right
+  +ltr-position($modal-close-right)
   top: $modal-close-top
   width: $modal-close-dimensions
 
@@ -102,7 +106,7 @@ $modal-card-body-padding: 20px !default
   border-top: $modal-card-foot-border-top
   .button
     &:not(:last-child)
-      margin-right: 0.5em
+      +ltr-property("margin", 0.5em)
 
 .modal-card-body
   +overflow-touch