bulma-rails 0.4.2 → 0.4.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 63031c5b67fe906b4ece2c285933cd1896574586
-  data.tar.gz: cc9d9dda4cfcd250481fafdc4e9d50c5f1a157c6
+  metadata.gz: 304ff4863cd6ff7ee159e64e0aebe30b29220598
+  data.tar.gz: 641b22c7c509c6e215e29e9c854d06c5ae4015a2
 SHA512:
-  metadata.gz: 19b09662db1036c41b1bd6c76fad8ee951c2e40684f49ca7a8c60d60c01d540fce5967c20628cecb6da997db5fb717d92d34339b2e5ea24968918f13f9e07d43
-  data.tar.gz: 10682b3ed37bb55e4fe1715287055695811481cea6a55cc8066ded953bf5f4e9b118263bd5c0dd06b944aaa6a46e25106b3d30eb59ed844e82cb3130c8201284
+  metadata.gz: d12d402f4c60d0de96fcd7fbf60e01bb3d4f8e4efd130d9331039b1a8b87e181f901ba4b92296c5defeee64e57dccda14ecc3d144da150edb585e6771493bcd8
+  data.tar.gz: 35056f12a2d51aa1700e764d15dd19eb0f5627deb504ae26615b0df1acdb61762639a91d9886d722742c427eb6590bde3b562f0c808413e4f89c32348f50780e

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

data/app/assets/stylesheets/bulma.sass

@@ -1,4 +1,4 @@
-/*! bulma.io v0.4.2 | MIT License | github.com/jgthms/bulma */
+/*! bulma.io v0.4.3 | MIT License | github.com/jgthms/bulma */
 @charset "utf-8"
 
 @import "sass/utilities/_all"

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

@@ -35,6 +35,7 @@ body
   font-size: 1rem
   font-weight: $weight-normal
   line-height: 1.5
+  overflow-x: hidden
 
 // Inline
 
@@ -68,7 +69,7 @@ input[type="radio"]
   vertical-align: baseline
 
 small
-  font-size: 0.8em
+  font-size: 0.875em
 
 span
   font-style: inherit

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

@@ -63,7 +63,6 @@ embed,
 object,
 audio,
 video
-  height: auto
   max-width: 100%
 
 // Iframe

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

@@ -1,5 +1,6 @@
 @charset "utf-8"
 
+@import "breadcrumb.sass"
 @import "card.sass"
 @import "level.sass"
 @import "media.sass"
@@ -7,6 +8,7 @@
 @import "message.sass"
 @import "modal.sass"
 @import "nav.sass"
+@import "navbar.sass"
 @import "pagination.sass"
 @import "panel.sass"
-@import "tabs.sass"
+@import "tabs.sass"

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

@@ -0,0 +1,66 @@
+.breadcrumb
+  +block
+  +unselectable
+  align-items: stretch
+  display: flex
+  font-size: $size-normal
+  overflow: hidden
+  overflow-x: auto
+  white-space: nowrap
+  a
+    align-items: center
+    color: $text-light
+    display: flex
+    justify-content: center
+    padding: 0.5em 0.75em
+    &:hover
+      color: $link-hover
+  li
+    align-items: center
+    display: flex
+    &.is-active
+      a
+        color: $text-strong
+        cursor: default
+        pointer-events: none
+    & + li:before
+      color: $text
+      content: '\0002f'
+  ul, ol
+    align-items: center
+    display: flex
+    flex-grow: 1
+    flex-shrink: 0
+    justify-content: flex-start
+  .icon
+    &:first-child
+      margin-right: 0.5em
+    &:last-child
+      margin-left: 0.5em
+  // Alignment
+  &.is-centered
+    ol, ul
+      justify-content: center
+  &.is-right
+    ol, ul
+      justify-content: flex-end
+  // Sizes
+  &.is-small
+    font-size: $size-small
+  &.is-medium
+    font-size: $size-medium
+  &.is-large
+    font-size: $size-large
+  // Styles
+  &.has-arrow-separator
+    li + li:before
+      content: '\02192'
+  &.has-bullet-separator
+    li + li:before
+      content: '\02022'
+  &.has-dot-separator
+    li + li:before
+      content: '\000b7'
+  &.has-succeeds-separator
+    li + li:before
+      content: '\0227B'

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

@@ -31,8 +31,8 @@ $nav-height: 3.25rem !default
   +mobile
     justify-content: flex-start
 
-.nav-item a,
-a.nav-item
+.nav-item a:not(.button),
+a.nav-item:not(.button)
   color: $text-light
   &:hover
     color: $link-hover

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

@@ -0,0 +1,208 @@
+$navbar-background: $white !default
+$navbar-height: 3.25rem !default
+
+$navbar-item: $grey-dark !default
+$navbar-item-hover: $black !default
+$navbar-item-hover-background: $background !default
+$navbar-item-active: $black !default
+$navbar-item-active-background: transparent !default
+
+$navbar-dropdown-background: $white !default
+$navbar-dropdown-border: $border !default
+$navbar-dropdown-offset: -4px !default
+$navbar-dropdown-arrow: $link !default
+$navbar-dropdown-radius: $radius-large !default
+$navbar-dropdown-z: 20 !default
+
+$navbar-dropdown-item-hover: $black !default
+$navbar-dropdown-item-hover-background: $background !default
+$navbar-dropdown-item-active: $primary !default
+$navbar-dropdown-item-active-background: $background !default
+
+$navbar-divider-background: $border !default
+
+.navbar
+  background-color: $navbar-background
+  min-height: $navbar-height
+  position: relative
+
+.navbar-brand
+  align-items: stretch
+  height: $navbar-height
+  display: flex
+
+.navbar-burger
+  +hamburger($navbar-height)
+  margin-left: auto
+
+.navbar-menu
+  display: none
+
+.navbar-item,
+.navbar-link
+  color: $navbar-item
+  display: block
+  line-height: 1.5
+  padding: 0.5rem 1rem
+  position: relative
+
+a.navbar-item,
+.navbar-link
+  &:hover,
+  &.is-active
+    background-color: $navbar-item-hover-background
+    color: $navbar-item-hover
+
+.navbar-item
+  flex-grow: 0
+  flex-shrink: 0
+  img
+    max-height: 1.75rem
+  &.has-dropdown
+    padding: 0
+
+.navbar-content
+  flex-grow: 1
+  flex-shrink: 1
+
+.navbar-link
+  padding-right: 2.5em
+
+.navbar-dropdown
+  font-size: 0.875rem
+  padding-bottom: 0.5rem
+  padding-top: 0.5rem
+  .navbar-item
+    padding-left: 1.5rem
+    padding-right: 1.5rem
+
+.navbar-divider
+  background-color: $navbar-divider-background
+  border: none
+  display: none
+  height: 1px
+  margin: 0.5rem 0
+
++touch
+  .navbar-brand
+    .navbar-item
+      align-items: center
+      display: flex
+  .navbar-menu
+    box-shadow: 0 8px 16px rgba($black, 0.1)
+    padding: 0.5rem 0
+    &.is-active
+      display: block
+
++desktop
+  .navbar,
+  .navbar-menu,
+  .navbar-start,
+  .navbar-end
+    align-items: stretch
+    display: flex
+  .navbar
+    height: $navbar-height
+    &.is-transparent
+      a.navbar-item,
+      .navbar-link
+        &:hover,
+        &.is-active
+          background-color: transparent
+      .navbar-item.has-dropdown
+        &.is-active,
+        &.is-hoverable:hover
+          .navbar-link
+            background-color: transparent
+      .navbar-dropdown
+        a.navbar-item
+          &:hover
+            background-color: $navbar-dropdown-item-hover-background
+            color: $navbar-dropdown-item-hover
+          &.is-active
+            background-color: $navbar-dropdown-item-active-background
+            color: $navbar-dropdown-item-active
+  .navbar-burger
+    display: none
+  .navbar-item,
+  .navbar-link
+    align-items: center
+    display: flex
+  .navbar-item
+    &.has-dropdown
+      align-items: stretch
+    &.is-active,
+    &.is-hoverable:hover
+      .navbar-dropdown
+        display: block
+        &.is-boxed
+          opacity: 1
+          pointer-events: auto
+          transform: translateY(0)
+  .navbar-link
+    &::after
+      +arrow($navbar-dropdown-arrow)
+      margin-top: -0.375em
+      right: 1.125em
+      top: 50%
+  .navbar-menu
+    flex-grow: 1
+    flex-shrink: 0
+  .navbar-start
+    justify-content: flex-start
+    margin-right: auto
+  .navbar-end
+    justify-content: flex-end
+    margin-left: auto
+  .navbar-dropdown
+    background-color: $navbar-dropdown-background
+    border-bottom-left-radius: $navbar-dropdown-radius
+    border-bottom-right-radius: $navbar-dropdown-radius
+    border-top: 1px solid $navbar-dropdown-border
+    box-shadow: 0 8px 8px rgba($black, 0.1)
+    display: none
+    font-size: 0.875rem
+    left: 0
+    min-width: 100%
+    position: absolute
+    top: 100%
+    z-index: $navbar-dropdown-z
+    .navbar-item
+      padding: 0.375rem 1rem
+      white-space: nowrap
+    a.navbar-item
+      padding-right: 3rem
+      &:hover
+        background-color: $navbar-dropdown-item-hover-background
+        color: $navbar-dropdown-item-hover
+      &.is-active
+        background-color: $navbar-dropdown-item-active-background
+        color: $navbar-dropdown-item-active
+    &.is-boxed
+      border-radius: $navbar-dropdown-radius
+      border-top: none
+      box-shadow: 0 8px 8px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
+      display: block
+      opacity: 0
+      pointer-events: none
+      top: calc(100% + (#{$navbar-dropdown-offset}))
+      transform: translateY(-5px)
+      transition-duration: $speed
+      transition-property: opacity, transform
+  .navbar-divider
+    display: block
+  .container > .navbar
+    margin-left: -1rem
+    margin-right: -1rem
+  // Hover/Active states
+  a.navbar-item,
+  .navbar-link
+    &.is-active
+      color: $navbar-item-active
+    &.is-active:not(:hover)
+      background-color: $navbar-item-active-background
+  .navbar-item.has-dropdown
+    &:hover,
+    &.is-active
+      .navbar-link
+        background-color: $navbar-item-hover-background

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

@@ -54,12 +54,10 @@
   ol
     list-style: decimal outside
     margin-left: 2em
-    margin-right: 2em
     margin-top: 1em
   ul
     list-style: disc outside
     margin-left: 2em
-    margin-right: 2em
     margin-top: 1em
     ul
       list-style-type: circle
@@ -68,12 +66,21 @@
         list-style-type: square
   dd
     margin-left: 2em
+  figure
+    text-align: center
+    img
+      display: inline-block
+    figcaption
+      font-style: italic
   pre
     +overflow-touch
     overflow-x: auto
     padding: 1.25em 1.5em
     white-space: pre
     word-wrap: normal
+  sup,
+  sub
+    font-size: 70%
   table
     width: 100%
     td,

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

@@ -153,6 +153,12 @@ $input-radius:              $radius !default
       right: 0.625em
       top: 0.625em
       transform: none
+    &.is-small:after
+      font-size: $size-small
+    &.is-medium:after
+      font-size: $size-medium
+    &.is-large:after
+      font-size: $size-large
 
 .label
   color: $input
@@ -358,3 +364,9 @@ $input-radius:              $radius !default
       position: absolute !important
       right: 0.625em
       top: 0.625em
+    &.is-small:after
+      font-size: $size-small
+    &.is-medium:after
+      font-size: $size-medium
+    &.is-large:after
+      font-size: $size-large

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

@@ -128,6 +128,43 @@
       &.is-offset-#{$i},
       &.is-offset-#{$i}-tablet
         margin-left: ($i / 12) * 100%
+  +touch
+    &.is-narrow-touch
+      flex: none
+    &.is-full-touch
+      flex: none
+      width: 100%
+    &.is-three-quarters-touch
+      flex: none
+      width: 75%
+    &.is-two-thirds-touch
+      flex: none
+      width: 66.6666%
+    &.is-half-touch
+      flex: none
+      width: 50%
+    &.is-one-third-touch
+      flex: none
+      width: 33.3333%
+    &.is-one-quarter-touch
+      flex: none
+      width: 25%
+    &.is-offset-three-quarters-touch
+      margin-left: 75%
+    &.is-offset-two-thirds-touch
+      margin-left: 66.6666%
+    &.is-offset-half-touch
+      margin-left: 50%
+    &.is-offset-one-third-touch
+      margin-left: 33.3333%
+    &.is-offset-one-quarter-touch
+      margin-left: 25%
+    @for $i from 1 through 12
+      &.is-#{$i}-touch
+        flex: none
+        width: ($i / 12) * 100%
+      &.is-offset-#{$i}-touch
+        margin-left: ($i / 12) * 100%
   +desktop
     &.is-narrow-desktop
       flex: none
@@ -202,6 +239,43 @@
         width: ($i / 12) * 100%
       &.is-offset-#{$i}-widescreen
         margin-left: ($i / 12) * 100%
+  +fullhd
+    &.is-narrow-fullhd
+      flex: none
+    &.is-full-fullhd
+      flex: none
+      width: 100%
+    &.is-three-quarters-fullhd
+      flex: none
+      width: 75%
+    &.is-two-thirds-fullhd
+      flex: none
+      width: 66.6666%
+    &.is-half-fullhd
+      flex: none
+      width: 50%
+    &.is-one-third-fullhd
+      flex: none
+      width: 33.3333%
+    &.is-one-quarter-fullhd
+      flex: none
+      width: 25%
+    &.is-offset-three-quarters-fullhd
+      margin-left: 75%
+    &.is-offset-two-thirds-fullhd
+      margin-left: 66.6666%
+    &.is-offset-half-fullhd
+      margin-left: 50%
+    &.is-offset-one-third-fullhd
+      margin-left: 33.3333%
+    &.is-offset-one-quarter-fullhd
+      margin-left: 25%
+    @for $i from 1 through 12
+      &.is-#{$i}-fullhd
+        flex: none
+        width: ($i / 12) * 100%
+      &.is-offset-#{$i}-fullhd
+        margin-left: ($i / 12) * 100%
 
 .columns
   margin-left: -0.75rem

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

@@ -42,10 +42,6 @@
   flex-grow: 1
   flex-shrink: 0
   padding: 3rem 1.5rem
-  // Responsiveness
-  +from($widescreen)
-    padding-left: 0
-    padding-right: 0
 
 // Main container
 
@@ -142,11 +138,15 @@
       .hero-body
         padding-bottom: 18rem
         padding-top: 18rem
+  &.is-halfheight,
   &.is-fullheight
-    min-height: 100vh
     .hero-body
       align-items: center
       display: flex
       & > .container
         flex-grow: 1
         flex-shrink: 1
+  &.is-halfheight
+    min-height: 50vh
+  &.is-fullheight
+    min-height: 100vh

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

@@ -74,12 +74,24 @@
   // Sizes
   &.is-small
     height: 16px
+    max-height: 16px
+    max-width: 16px
+    min-height: 16px
+    min-width: 16px
     width: 16px
   &.is-medium
     height: 24px
+    max-height: 24px
+    max-width: 24px
+    min-height: 24px
+    min-width: 24px
     width: 24px
   &.is-large
     height: 32px
+    max-height: 32px
+    max-width: 32px
+    min-height: 32px
+    min-width: 32px
     width: 32px
 
 =fa($size, $dimensions)

data/bulma-rails.gemspec

@@ -2,8 +2,7 @@
 
 Gem::Specification.new do |gem|
   gem.name          = 'bulma-rails'
-  gem.version       = '0.4.2'
-  gem.date          = Date.today
+  gem.version       = '0.4.3'
   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.4.2
+  version: 0.4.3
 platform: ruby
 authors:
 - Joshua Jansen
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-06-07 00:00:00.000000000 Z
+date: 2017-07-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -39,6 +39,7 @@ files:
 - app/assets/stylesheets/sass/base/helpers.sass
 - app/assets/stylesheets/sass/base/minireset.sass
 - app/assets/stylesheets/sass/components/_all.sass
+- app/assets/stylesheets/sass/components/breadcrumb.sass
 - app/assets/stylesheets/sass/components/card.sass
 - app/assets/stylesheets/sass/components/level.sass
 - app/assets/stylesheets/sass/components/media.sass
@@ -46,6 +47,7 @@ files:
 - app/assets/stylesheets/sass/components/message.sass
 - app/assets/stylesheets/sass/components/modal.sass
 - app/assets/stylesheets/sass/components/nav.sass
+- app/assets/stylesheets/sass/components/navbar.sass
 - app/assets/stylesheets/sass/components/pagination.sass
 - app/assets/stylesheets/sass/components/panel.sass
 - app/assets/stylesheets/sass/components/tabs.sass
@@ -99,7 +101,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.5.1
+rubygems_version: 2.6.11
 signing_key: 
 specification_version: 4
 summary: This gem adds the bulma.io assets to your asset pipeline so you can import