bulma-rails 0.7.4 → 0.7.5

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

@@ -0,0 +1,55 @@
+$input-color: $grey-darker !default
+$input-background-color: $white !default
+$input-border-color: $grey-lighter !default
+$input-height: $control-height !default
+$input-shadow: inset 0 1px 2px rgba($black, 0.1) !default
+$input-placeholder-color: rgba($input-color, 0.3) !default
+
+$input-hover-color: $grey-darker !default
+$input-hover-border-color: $grey-light !default
+
+$input-focus-color: $grey-darker !default
+$input-focus-border-color: $link !default
+$input-focus-box-shadow-size: 0 0 0 0.125em !default
+$input-focus-box-shadow-color: rgba($link, 0.25) !default
+
+$input-disabled-color: $text-light !default
+$input-disabled-background-color: $background !default
+$input-disabled-border-color: $background !default
+$input-disabled-placeholder-color: rgba($input-disabled-color, 0.3) !default
+
+$input-arrow: $link !default
+
+$input-icon-color: $grey-lighter !default
+$input-icon-active-color: $grey !default
+
+$input-radius: $radius !default
+
+=input
+  @extend %control
+  background-color: $input-background-color
+  border-color: $input-border-color
+  border-radius: $input-radius
+  color: $input-color
+  +placeholder
+    color: $input-placeholder-color
+  &:hover,
+  &.is-hovered
+    border-color: $input-hover-border-color
+  &:focus,
+  &.is-focused,
+  &:active,
+  &.is-active
+    border-color: $input-focus-border-color
+    box-shadow: $input-focus-box-shadow-size $input-focus-box-shadow-color
+  &[disabled],
+  fieldset[disabled] &
+    background-color: $input-disabled-background-color
+    border-color: $input-disabled-border-color
+    box-shadow: none
+    color: $input-disabled-color
+    +placeholder
+      color: $input-disabled-placeholder-color
+
+%input
+  +input

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

@@ -0,0 +1,205 @@
+$label-color: $grey-darker !default
+$label-weight: $weight-bold !default
+
+$help-size: $size-small !default
+
+.label
+  color: $label-color
+  display: block
+  font-size: $size-normal
+  font-weight: $label-weight
+  &:not(:last-child)
+    margin-bottom: 0.5em
+  // Sizes
+  &.is-small
+    font-size: $size-small
+  &.is-medium
+    font-size: $size-medium
+  &.is-large
+    font-size: $size-large
+
+.help
+  display: block
+  font-size: $help-size
+  margin-top: 0.25rem
+  @each $name, $pair in $colors
+    $color: nth($pair, 1)
+    &.is-#{$name}
+      color: $color
+
+// Containers
+
+.field
+  &:not(:last-child)
+    margin-bottom: 0.75rem
+  // Modifiers
+  &.has-addons
+    display: flex
+    justify-content: flex-start
+    .control
+      &:not(:last-child)
+        margin-right: -1px
+      &:not(:first-child):not(:last-child)
+        .button,
+        .input,
+        .select select
+          border-radius: 0
+      &:first-child:not(:only-child)
+        .button,
+        .input,
+        .select select
+          border-bottom-right-radius: 0
+          border-top-right-radius: 0
+      &:last-child:not(:only-child)
+        .button,
+        .input,
+        .select select
+          border-bottom-left-radius: 0
+          border-top-left-radius: 0
+      .button,
+      .input,
+      .select select
+        &:not([disabled])
+          &:hover,
+          &.is-hovered
+            z-index: 2
+          &:focus,
+          &.is-focused,
+          &:active,
+          &.is-active
+            z-index: 3
+            &:hover
+              z-index: 4
+      &.is-expanded
+        flex-grow: 1
+        flex-shrink: 1
+    &.has-addons-centered
+      justify-content: center
+    &.has-addons-right
+      justify-content: flex-end
+    &.has-addons-fullwidth
+      .control
+        flex-grow: 1
+        flex-shrink: 0
+  &.is-grouped
+    display: flex
+    justify-content: flex-start
+    & > .control
+      flex-shrink: 0
+      &:not(:last-child)
+        margin-bottom: 0
+        margin-right: 0.75rem
+      &.is-expanded
+        flex-grow: 1
+        flex-shrink: 1
+    &.is-grouped-centered
+      justify-content: center
+    &.is-grouped-right
+      justify-content: flex-end
+    &.is-grouped-multiline
+      flex-wrap: wrap
+      & > .control
+        &:last-child,
+        &:not(:last-child)
+          margin-bottom: 0.75rem
+      &:last-child
+        margin-bottom: -0.75rem
+      &:not(:last-child)
+        margin-bottom: 0
+  &.is-horizontal
+    +tablet
+      display: flex
+
+.field-label
+  .label
+    font-size: inherit
+  +mobile
+    margin-bottom: 0.5rem
+  +tablet
+    flex-basis: 0
+    flex-grow: 1
+    flex-shrink: 0
+    margin-right: 1.5rem
+    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
+  .field .field
+    margin-bottom: 0
+  +tablet
+    display: flex
+    flex-basis: 0
+    flex-grow: 5
+    flex-shrink: 1
+    .field
+      margin-bottom: 0
+    & > .field
+      flex-shrink: 1
+      &:not(.is-narrow)
+        flex-grow: 1
+      &:not(:last-child)
+        margin-right: 0.75rem
+
+.control
+  box-sizing: border-box
+  clear: both
+  font-size: $size-normal
+  position: relative
+  text-align: left
+  // Modifiers
+  &.has-icons-left,
+  &.has-icons-right
+    .input,
+    .select
+      &:focus
+        & ~ .icon
+          color: $input-icon-active-color
+      &.is-small ~ .icon
+        font-size: $size-small
+      &.is-medium ~ .icon
+        font-size: $size-medium
+      &.is-large ~ .icon
+        font-size: $size-large
+    .icon
+      color: $input-icon-color
+      height: $input-height
+      pointer-events: none
+      position: absolute
+      top: 0
+      width: $input-height
+      z-index: 4
+  &.has-icons-left
+    .input,
+    .select select
+      padding-left: $input-height
+    .icon.is-left
+      left: 0
+  &.has-icons-right
+    .input,
+    .select select
+      padding-right: $input-height
+    .icon.is-right
+      right: 0
+  &.is-loading
+    &::after
+      @extend %loader
+      position: absolute !important
+      right: 0.625em
+      top: 0.625em
+      z-index: 4
+    &.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

@@ -56,7 +56,7 @@ $column-gap: 0.75rem !default
     margin-left: 60%
   .columns.is-mobile > &.is-offset-four-fifths
     margin-left: 80%
-  @for $i from 1 through 12
+  @for $i from 0 through 12
     .columns.is-mobile > &.is-#{$i}
       flex: none
       width: percentage($i / 12)
@@ -113,7 +113,7 @@ $column-gap: 0.75rem !default
       margin-left: 60%
     &.is-offset-four-fifths-mobile
       margin-left: 80%
-    @for $i from 1 through 12
+    @for $i from 0 through 12
       &.is-#{$i}-mobile
         flex: none
         width: percentage($i / 12)
@@ -190,7 +190,7 @@ $column-gap: 0.75rem !default
     &.is-offset-four-fifths,
     &.is-offset-four-fifths-tablet
       margin-left: 80%
-    @for $i from 1 through 12
+    @for $i from 0 through 12
       &.is-#{$i},
       &.is-#{$i}-tablet
         flex: none
@@ -249,7 +249,7 @@ $column-gap: 0.75rem !default
       margin-left: 60%
     &.is-offset-four-fifths-touch
       margin-left: 80%
-    @for $i from 1 through 12
+    @for $i from 0 through 12
       &.is-#{$i}-touch
         flex: none
         width: percentage($i / 12)
@@ -306,7 +306,7 @@ $column-gap: 0.75rem !default
       margin-left: 60%
     &.is-offset-four-fifths-desktop
       margin-left: 80%
-    @for $i from 1 through 12
+    @for $i from 0 through 12
       &.is-#{$i}-desktop
         flex: none
         width: percentage($i / 12)
@@ -363,7 +363,7 @@ $column-gap: 0.75rem !default
       margin-left: 60%
     &.is-offset-four-fifths-widescreen
       margin-left: 80%
-    @for $i from 1 through 12
+    @for $i from 0 through 12
       &.is-#{$i}-widescreen
         flex: none
         width: percentage($i / 12)
@@ -420,7 +420,7 @@ $column-gap: 0.75rem !default
       margin-left: 60%
     &.is-offset-four-fifths-fullhd
       margin-left: 80%
-    @for $i from 1 through 12
+    @for $i from 0 through 12
       &.is-#{$i}-fullhd
         flex: none
         width: percentage($i / 12)

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

@@ -1,3 +1,5 @@
+$tile-spacing: 0.75rem !default
+
 .tile
   align-items: stretch
   display: block
@@ -7,17 +9,17 @@
   min-height: min-content
   // Modifiers
   &.is-ancestor
-    margin-left: -0.75rem
-    margin-right: -0.75rem
-    margin-top: -0.75rem
+    margin-left: $tile-spacing * -1
+    margin-right: $tile-spacing * -1
+    margin-top: $tile-spacing * -1
     &:last-child
-      margin-bottom: -0.75rem
+      margin-bottom: $tile-spacing * -1
     &:not(:last-child)
-      margin-bottom: 0.75rem
+      margin-bottom: $tile-spacing
   &.is-child
     margin: 0 !important
   &.is-parent
-    padding: 0.75rem
+    padding: $tile-spacing
   &.is-vertical
     flex-direction: column
     & > .tile.is-child:not(:last-child)

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

@@ -1,6 +1,9 @@
 $footer-background-color: $white-bis !default
+$footer-color: false !default
 $footer-padding: 3rem 1.5rem 6rem !default
 
 .footer
   background-color: $footer-background-color
   padding: $footer-padding
+  @if $footer-color
+    color: $footer-color

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

@@ -17,7 +17,7 @@
     &.is-#{$name}
       background-color: $color
       color: $color-invert
-      a:not(.button):not(.dropdown-item):not(.tag),
+      a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current),
       strong
         color: inherit
       .title
@@ -68,19 +68,6 @@
         +mobile
           .navbar-menu
             background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
-      // Responsiveness
-      // +mobile
-      //   .nav-toggle
-      //     span
-      //       background-color: $color-invert
-      //     &:hover
-      //       background-color: rgba($black, 0.1)
-      //     &.is-active
-      //       span
-      //         background-color: $color-invert
-      //   .nav-menu
-      //     .nav-item
-      //       border-top-color: rgba($color-invert, 0.2)
   // Sizes
   &.is-small
     .hero-body

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

@@ -43,10 +43,14 @@ $weight-medium: 500 !default
 $weight-semibold: 600 !default
 $weight-bold: 700 !default
 
+// Spacing
+
+$block-spacing: 1.5rem !default
+
 // Responsiveness
 
 // The container horizontal gap, which acts as the offset for breakpoints
-$gap: 64px !default
+$gap: 32px !default
 // 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
 $tablet: 769px !default
 // 960px container + 4rem

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

@@ -159,9 +159,9 @@
 %arrow
   +arrow
 
-=block
+=block($spacing: $block-spacing)
   &:not(:last-child)
-    margin-bottom: 1.5rem
+    margin-bottom: $spacing
 
 %block
   +block

data/bulma-rails.gemspec

@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |gem|
   gem.name          = 'bulma-rails'
-  gem.version       = '0.7.4'
+  gem.version       = '0.7.5'
   gem.authors       = ["Joshua Jansen"]
   gem.email         = ["joshuajansen88@gmail.com"]
   gem.description   = %q{A modern CSS framework based on Flexbox}
@@ -13,5 +13,5 @@ Gem::Specification.new do |gem|
   gem.require_paths = ["lib"]
   gem.license       = 'MIT'
 
-  gem.add_runtime_dependency 'sass', '~> 3.5'
+  gem.add_runtime_dependency 'sassc', '~> 2.0'
 end

metadata

@@ -1,29 +1,29 @@
 --- !ruby/object:Gem::Specification
 name: bulma-rails
 version: !ruby/object:Gem::Version
-  version: 0.7.4
+  version: 0.7.5
 platform: ruby
 authors:
 - Joshua Jansen
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-02-09 00:00:00.000000000 Z
+date: 2019-05-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
-  name: sass
+  name: sassc
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '3.5'
+        version: '2.0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '3.5'
+        version: '2.0'
 description: A modern CSS framework based on Flexbox
 email:
 - joshuajansen88@gmail.com
@@ -66,6 +66,13 @@ files:
 - app/assets/stylesheets/sass/elements/table.sass
 - app/assets/stylesheets/sass/elements/tag.sass
 - app/assets/stylesheets/sass/elements/title.sass
+- app/assets/stylesheets/sass/form/_all.sass
+- app/assets/stylesheets/sass/form/checkbox-radio.sass
+- app/assets/stylesheets/sass/form/file.sass
+- app/assets/stylesheets/sass/form/input-textarea.sass
+- app/assets/stylesheets/sass/form/select.sass
+- app/assets/stylesheets/sass/form/shared.sass
+- app/assets/stylesheets/sass/form/tools.sass
 - app/assets/stylesheets/sass/grid/_all.sass
 - app/assets/stylesheets/sass/grid/columns.sass
 - app/assets/stylesheets/sass/grid/tiles.sass
@@ -101,7 +108,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.0.1
+rubygems_version: 3.0.3
 signing_key: 
 specification_version: 4
 summary: This gem adds the bulma.io assets to your asset pipeline so you can import