bulma-rails 0.4.0 → 0.4.1.pre

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: db16d2faf9db0b9807a60d466dbffcea0d826a04
-  data.tar.gz: dda2dff29fb0b32c1ae6492baee6a7a12de8f443
+  metadata.gz: ac2a0fd37b8b5607dfe82c3e119e6e6c920c16c9
+  data.tar.gz: 2af6f24eeea3ada82488adc55ec2bdf26f8b1c5c
 SHA512:
-  metadata.gz: 29e752ca65c94363206d6df6eb5eab7af8c306b8707eae87c91ebd4346a06c390191f552d50cd9cf8c341d2cb4d282f30629be88c89c854934360652a437648d
-  data.tar.gz: fc816a8708f338b8d7d0524b7e21caf97d45ba9ac1d6658ad7cf13c81a3665ab2527f121283e7613b59d5927b0b3268606a297bee11a2ddae0ec5bb69c5c9354
+  metadata.gz: 7fc1711e6934940216eeb70137a66849d4ed94c6d0a7351ce24e9a1ed888b34dc0e9290411fea5d45efb60ea2c3a1e56991067ec94468ec28be3534c9903489d
+  data.tar.gz: 3c7437bbb24dc8f8c51de120e7683ec99fbae99a7640b194587d02a8f1d353e79c73a5076e0ea611c2ce4d1525bf68e9fefdac3dae87c06124397abcc4460598

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

@@ -6,7 +6,7 @@ html
   min-width: 300px
   overflow-x: hidden
   overflow-y: scroll
-  text-rendering: optimizeLegibility
+  text-rendering: $render-mode
 
 article,
 aside,
@@ -87,6 +87,7 @@ pre
   white-space: pre
   word-wrap: normal
   code
+    +overflow-touch
     background: none
     color: inherit
     display: block

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

@@ -59,6 +59,15 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
 .has-text-right
   text-align: right
 
+@each $name, $pair in $colors
+  $color: nth($pair, 1)
+  .has-text-#{$name}
+    color: $color
+  a.has-text-#{$name}
+    &:hover,
+    &:focus
+      color: darken($color, 10%)
+
 // Visibility
 
 .is-hidden
@@ -94,9 +103,6 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
 
 // Other
 
-.is-disabled
-  pointer-events: none
-
 .is-marginless
   margin: 0 !important
 

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

@@ -22,8 +22,6 @@ $nav-height: 3.25rem !default
     flex-shrink: 0
   img
     max-height: 1.75rem
-  .button + .button
-    margin-left: 0.75rem
   .tag
     &:first-child:not(:last-child)
       margin-right: 0.5rem
@@ -62,39 +60,21 @@ a.nav-item
 
 // Containers
 
-.nav-menu
-  // Responsiveness
-  +mobile
-    background-color: $white
-    box-shadow: 0 4px 7px rgba($black, 0.1)
-    left: 0
-    display: none
-    right: 0
-    top: 100%
-    position: absolute
-    .nav-item
-      border-top: 1px solid rgba($border, 0.5)
-      padding: 0.75rem
-    &.is-active
-      display: block
-  +tablet-only
-    padding-right: 1.5rem
-
-
 .nav-left,
 .nav-right
   align-items: stretch
+  display: flex
   flex-basis: 0
   flex-grow: 1
   flex-shrink: 0
 
 .nav-left
-  display: flex
   justify-content: flex-start
-  overflow: hidden
-  overflow-x: auto
   white-space: nowrap
 
+.nav-right
+  justify-content: flex-end
+
 .nav-center
   align-items: stretch
   display: flex
@@ -104,11 +84,22 @@ a.nav-item
   margin-left: auto
   margin-right: auto
 
-.nav-right
-  justify-content: flex-end
+.nav-menu
   // Responsiveness
-  +tablet
-    display: flex
+  +mobile
+    &.nav-right
+      background-color: $white
+      box-shadow: 0 4px 7px rgba($black, 0.1)
+      left: 0
+      display: none
+      right: 0
+      top: 100%
+      position: absolute
+      .nav-item
+        border-top: 1px solid rgba($border, 0.5)
+        padding: 0.75rem
+      &.is-active
+        display: block
 
 // Main container
 
@@ -124,10 +115,7 @@ a.nav-item
     align-items: stretch
     display: flex
     min-height: $nav-height
+    width: 100%
   // Modifiers
   &.has-shadow
     box-shadow: 0 2px 3px rgba($black, 0.1)
-  // Responsiveness
-  +mobile
-    & > .container
-      width: 100%

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

@@ -64,12 +64,12 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
     border-color: $pagination-focus-border
   &:active
     box-shadow: $pagination-shadow-inset
-  &[disabled],
-  &.is-disabled
-    background: $pagination-disabled-background
+  &[disabled]
+    background-color: $pagination-disabled-background
+    border-color: $pagination-border
+    box-shadow: none
     color: $pagination-disabled
     opacity: 0.5
-    pointer-events: none
 
 .pagination-previous,
 .pagination-next

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

@@ -53,6 +53,8 @@
     flex-grow: 1
     flex-shrink: 1
     width: 100%
+  &.is-wrapped
+    flex-wrap: wrap
   &.is-active
     border-left-color: $link
     color: $link-active

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

@@ -81,6 +81,10 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
     &.is-active
       background-color: $background
       color: $text-strong
+    &[disabled]
+      background-color: transparent
+      border-color: transparent
+      box-shadow: none
   @each $name, $pair in $colors
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
@@ -104,11 +108,20 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
         border-color: transparent
         box-shadow: $button-shadow-inset
         color: $color-invert
+      &[disabled]
+        background-color: $color
+        border-color: transparent
+        box-shadow: none
       &.is-inverted
         background-color: $color-invert
         color: $color
         &:hover
           background-color: darken($color-invert, 5%)
+        &[disabled]
+          background-color: $color-invert
+          border-color: transparent
+          box-shadow: none
+          color: $color
       &.is-loading
         &:after
           border-color: transparent transparent $color-invert $color-invert !important
@@ -124,6 +137,11 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
         &.is-loading
           &:after
             border-color: transparent transparent $color $color !important
+        &[disabled]
+          background-color: transparent
+          border-color: $color
+          box-shadow: none
+          color: $color
       &.is-inverted.is-outlined
         background-color: transparent
         border-color: $color-invert
@@ -132,6 +150,11 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
         &:focus
           background-color: $color-invert
           color: $color
+        &[disabled]
+          background-color: transparent
+          border-color: $color-invert
+          box-shadow: none
+          color: $color-invert
   // Sizes
   &.is-small
     +button-small
@@ -140,8 +163,10 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
   &.is-large
     +button-large
   // Modifiers
-  &[disabled],
-  &.is-disabled
+  &[disabled]
+    background-color: $button-background
+    border-color: $button-border
+    box-shadow: none
     opacity: 0.5
   &.is-fullwidth
     display: flex

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

@@ -6,9 +6,11 @@
     margin-top: 0.25em
   // Block
   p,
+  dl,
   ol,
   ul,
   blockquote,
+  pre,
   table
     &:not(:last-child)
       margin-bottom: 1em
@@ -64,6 +66,14 @@
       margin-top: 0.5em
       ul
         list-style-type: square
+  dd
+    margin-left: 2em
+  pre
+    +overflow-touch
+    overflow-x: auto
+    padding: 1.25em 1.5em
+    white-space: pre
+    word-wrap: normal
   table
     width: 100%
     td,

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

@@ -32,8 +32,7 @@ $input-radius:              $radius !default
   &:active,
   &.is-active
     border-color: $input-focus-border
-  &[disabled],
-  &.is-disabled
+  &[disabled]
     background-color: $input-disabled-background
     border-color: $input-disabled-border
     box-shadow: none
@@ -71,7 +70,6 @@ $input-radius:              $radius !default
 
 .textarea
   display: block
-  line-height: 1.25
   max-height: 600px
   max-width: 100%
   min-height: 120px
@@ -86,6 +84,7 @@ $input-radius:              $radius !default
   display: inline-flex
   flex-wrap: wrap
   justify-content: flex-start
+  line-height: 1.5
   position: relative
   vertical-align: top
   input
@@ -93,11 +92,9 @@ $input-radius:              $radius !default
     margin-right: 0.5em
   &:hover
     color: $input-hover
-  &.is-disabled
+  &[disabled]
     color: $input-disabled
-    pointer-events: none
-    input
-      pointer-events: none
+    cursor: not-allowed
 
 .radio
   & + .radio
@@ -123,12 +120,17 @@ $input-radius:              $radius !default
     padding-right: 2.5em
     &:hover
       border-color: $input-hover-border
-    &::ms-expand
+    &::-ms-expand
       display: none
   // States
   &:hover
     &:after
       border-color: $input-hover
+  // Colors
+  @each $name, $pair in $colors
+    $color: nth($pair, 1)
+    &.is-#{$name} select
+      border-color: $color
   // Sizes
   &.is-small
     +control-small
@@ -189,11 +191,16 @@ $input-radius:              $radius !default
       .input,
       .select select
         border-radius: 0
-        &:hover
+        &:hover,
+        &.is-hovered
           z-index: 2
         &:focus,
-        &:active
+        &.is-focused,
+        &:active,
+        &.is-active
           z-index: 3
+          &:hover
+            z-index: 4
       &.is-expanded
         flex-grow: 1
         flex-shrink: 0
@@ -226,6 +233,8 @@ $input-radius:              $radius !default
       display: flex
 
 .field-label
+  .label
+    font-size: inherit
   +mobile
     margin-bottom: 0.5rem
   +tablet
@@ -233,8 +242,18 @@ $input-radius:              $radius !default
     flex-grow: 1
     flex-shrink: 0
     margin-right: 1.5rem
-    padding-top: 0.375em
     text-align: right
+    &.is-small
+      font-size: $size-small
+      padding-top: 0.375em
+    &.is-normal
+      padding-top: 0.375em
+    &.is-medium
+      font-size: $size-medium
+      padding-top: 0.375em
+    &.is-large
+      font-size: $size-large
+      padding-top: 0.375em
 
 .field-body
   +tablet
@@ -280,33 +299,13 @@ $input-radius:              $radius !default
     &:not(.has-icon-right)
       .icon
         left: 0
-        // transform: translateX(-50%) translateY(-50%)
       .input
         padding-left: 2.25em
-        // &.is-small
-        //   & + .icon
-        //     left: ($size-small * 2.5) / 2
-        // &.is-medium
-        //   & + .icon
-        //     left: ($size-medium * 2.5) / 2
-        // &.is-large
-        //   & + .icon
-        //     left: ($size-large * 2.5) / 2
     &.has-icon-right
       .icon
         right: 0
-        // transform: translateX(50%) translateY(-50%)
       .input
         padding-right: 2.25em
-        // &.is-small
-        //   & + .icon
-        //     right: ($size-small * 2.5) / 2
-        // &.is-medium
-        //   & + .icon
-        //     right: ($size-medium * 2.5) / 2
-        // &.is-large
-        //   & + .icon
-        //     right: ($size-large * 2.5) / 2
   &.is-loading
     &:after
       +loader

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

@@ -3,7 +3,6 @@
   display: inline-flex
   justify-content: center
   height: 1.5rem
-  vertical-align: top
   width: 1.5rem
   .fa
     font-size: 21px

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

@@ -4,12 +4,15 @@
   border-radius: $radius
   padding: 1.25rem 2.5rem 1.25rem 1.5rem
   position: relative
+  a:not(.button)
+    color: currentColor
+    text-decoration: underline
   code,
   pre
     background: $white
   pre code
     background: transparent
-  .delete
+  & > .delete
     position: absolute
     right: 0.5em
     top: 0.5em

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

@@ -5,6 +5,7 @@
   position: relative
   +desktop
     margin: 0 auto
+    max-width: $desktop - 40px
     width: $desktop - 40px
     // Modifiers
     &.is-fluid
@@ -12,8 +13,10 @@
       max-width: none
       width: auto
   +widescreen
+    max-width: $widescreen - 40px
     width: $widescreen - 40px
   +fullhd
+    max-width: $fullhd - 40px
     width: $fullhd - 40px
 
 .delete

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

@@ -68,14 +68,14 @@
     &.is-#{$name}
       background-color: $color
       color: $color-invert
-      a,
+      a:not(.button),
       strong
         color: inherit
       .title
         color: $color-invert
       .subtitle
         color: rgba($color-invert, 0.9)
-        a,
+        a:not(.button),
         strong
           color: $color-invert
       .nav
@@ -115,6 +115,9 @@
         $gradient-top-left: darken(saturate(adjust-hue($color, -10deg), 10%), 10%)
         $gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%)
         background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
+        +mobile
+          .nav-menu
+            background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
       // Responsiveness
       +mobile
         .nav-toggle

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

@@ -2,5 +2,6 @@
 
 @import "functions.sass"
 @import "variables.sass"
+@import "animations.sass"
 @import "mixins.sass"
 @import "controls.sass"

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

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

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

@@ -12,11 +12,11 @@ $control-radius-small: $radius-small !default
   font-size: $size-normal
   height: 2.25em
   justify-content: flex-start
-  line-height: 1.25
-  padding-bottom: 0.5em
+  line-height: 1.5
+  padding-bottom: 0.375em
   padding-left: 0.625em
   padding-right: 0.625em
-  padding-top: 0.5em
+  padding-top: 0.375em
   position: relative
   vertical-align: top
   // States
@@ -25,9 +25,8 @@ $control-radius-small: $radius-small !default
   &:active,
   &.is-active
     outline: none
-  &[disabled],
-  &.is-disabled
-    pointer-events: none
+  &[disabled]
+    cursor: not-allowed
 
 // The controls sizes use mixins so they can be used at different breakpoints
 =control-small

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

@@ -20,12 +20,14 @@
     content: " "
     display: table
 
-=center($size)
-  left: 50%
-  margin-left: -($size / 2)
-  margin-top: -($size / 2)
+=center($width, $height: 0)
   position: absolute
-  top: 50%
+  @if $height != 0
+    left: calc(50% - (#{$width} / 2))
+    top: calc(50% - (#{$height} / 2))
+  @else
+    left: calc(50% - (#{$width} / 2))
+    top: calc(50% - (#{$width} / 2))
 
 =delete
   +unselectable
@@ -123,12 +125,6 @@
         transform: rotate(-45deg)
         transform-origin: left bottom
 
-@keyframes spinAround
-  from
-    transform: rotate(0deg)
-  to
-    transform: rotate(359deg)
-
 =loader
   animation: spinAround 500ms infinite linear
   border: 2px solid $border
@@ -179,7 +175,7 @@
     @content
 
 =tablet
-  @media screen and (min-width: $tablet)
+  @media screen and (min-width: $tablet), print
     @content
 
 =tablet-only

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

@@ -27,7 +27,8 @@ $red:          hsl(348, 100%, 61%) !default
 
 // Typography
 $family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
-$family-monospace: monospace !default
+$family-monospace: monospace !default
+$render-mode: optimizeLegibility !default
 
 $size-1: 3rem !default
 $size-2: 2.5rem !default

data/bulma-rails.gemspec

@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |gem|
   gem.name          = 'bulma-rails'
-  gem.version       = '0.4.0'
+  gem.version       = '0.4.1.pre'
   gem.date          = Date.today
   gem.authors       = ["Joshua Jansen"]
   gem.email         = ["joshuajansen88@gmail.com"]

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: bulma-rails
 version: !ruby/object:Gem::Version
-  version: 0.4.0
+  version: 0.4.1.pre
 platform: ruby
 authors:
 - Joshua Jansen
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-03-20 00:00:00.000000000 Z
+date: 2017-04-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -70,6 +70,7 @@ files:
 - app/assets/stylesheets/sass/layout/hero.sass
 - app/assets/stylesheets/sass/layout/section.sass
 - app/assets/stylesheets/sass/utilities/_all.sass
+- app/assets/stylesheets/sass/utilities/animations.sass
 - app/assets/stylesheets/sass/utilities/controls.sass
 - app/assets/stylesheets/sass/utilities/functions.sass
 - app/assets/stylesheets/sass/utilities/mixins.sass
@@ -91,9 +92,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
 rubyforge_project: 
 rubygems_version: 2.6.8