bulma-rails 0.0.24 → 0.0.26

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

@@ -1,5 +1,5 @@
 .table
-  background: white
+  background: $white
   color: $text-strong
   margin-bottom: 20px
   width: 100%
@@ -83,7 +83,9 @@
   &.is-striped
     tbody
       tr
+        &:hover
+          background: darken($background, 5%)
         &:nth-child(2n)
           background: $background
           &:hover
-            background: $border
+            background: darken($background, 5%)

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

@@ -2,10 +2,12 @@
   background: $background
   padding: 40px 20px 80px
   a
-    color: $text
-    &:hover
-      color: $text-strong
-    &:not(.icon)
-      border-bottom: 1px solid $border
+    &,
+    &:visited
+      color: $text
       &:hover
-        border-bottom-color: $link
+        color: $text-strong
+      &:not(.icon)
+        border-bottom: 1px solid $border
+        &:hover
+          border-bottom-color: $link

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

@@ -1,18 +1,22 @@
+$header-height: 50px !default
+
 .header
   +clearfix
-  background: white
+  background: $white
   display: flex
   line-height: 24px
+  min-height: $header-height
   position: relative
   text-align: center
   z-index: 2
   .container
     align-items: stretch
     display: flex
+    min-height: $header-height
     width: 100%
   // Modifiers
   &.has-shadow
-    box-shadow: 0 1px 2px rgba(black, 0.1)
+    box-shadow: 0 2px 3px rgba($black, 0.1)
   // Responsiveness
   +mobile
     .container
@@ -62,13 +66,6 @@ a.header-item
   &.is-active
     color: $link-active
 
-.header-icon
-  +fa(14px, 24px)
-  color: $text
-  margin: 0 5px
-  &:hover
-    color: $link-hover
-
 .header-tab
   align-items: center
   border-bottom: 1px solid transparent
@@ -128,7 +125,7 @@ a.header-item
 .header-menu
   // Responsiveness
   +mobile
-    box-shadow: 0 4px 7px rgba(black, 0.1)
+    box-shadow: 0 4px 7px rgba($black, 0.1)
     display: none
     .header-item
       border-top: 1px solid rgba($border, 0.5)

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

@@ -1,3 +1,5 @@
+// Components
+
 .hero-video
   +overlay
   overflow: hidden
@@ -15,18 +17,12 @@
   +mobile
     display: none
 
-.hero-content
-  padding: 40px 20px
-  // Responsiveness
-  +desktop
-    padding: 40px 0
-
 .hero-buttons
   margin-top: 20px
   // Responsiveness
   +mobile
     .button
-      display: block
+      display: flex
       &:not(:last-child)
         margin-bottom: 10px
   +tablet
@@ -35,21 +31,34 @@
     .button:not(:last-child)
       margin-right: 20px
 
+// Containers
+
+.hero-head,
+.hero-foot
+  flex-shrink: 0
+
+.hero-body
+  flex: 1
+  padding: 40px 20px
+  // Responsiveness
+  +desktop
+    padding-left: 0
+    padding-right: 0
+
+// Main container
+
 .hero
-  background: white
-  .header
+  align-items: stretch
+  background: $white
+  display: flex
+  flex-direction: column
+  justify-content: space-between
+  .nav
     background: none
-    .container
-      box-shadow: 0 1px 0 rgba($border, 0.3)
+    box-shadow: 0 1px 0 rgba($border, 0.3)
   .tabs
-    a
-      border: none
     ul
       border-bottom: none
-    // Modifiers
-    &.is-boxed
-      a
-        padding: 8px 15px
   // Colors
   @each $name, $pair in $colors
     $color: nth($pair, 1)
@@ -67,11 +76,13 @@
         a,
         strong
           color: $color-invert
-      .header .container
+      .nav
         box-shadow: 0 1px 0 rgba($color-invert, 0.2)
-      .header-icon,
-      a.header-item,
-      .header-item > a:not(.button)
+      .nav-menu
+        +mobile
+          background: $color
+      a.nav-item,
+      .nav-item a:not(.button)
         color: rgba($color-invert, 0.5)
         &:hover,
         &.is-active
@@ -82,18 +93,20 @@
           opacity: 0.5
           &:hover
             opacity: 1
-        li.is-active a
-          opacity: 1
+        li
+          &.is-active a
+            opacity: 1
         &.is-boxed,
         &.is-toggle
           a
             color: $color-invert
             &:hover
-              background: rgba(black, 0.1)
+              background: rgba($black, 0.1)
           li.is-active a
             &,
             &:hover
               background: $color-invert
+              border-color: $color-invert
               color: $color
       // Modifiers
       &.is-bold
@@ -102,54 +115,36 @@
         background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
       // Responsiveness
       +mobile
-        .header-toggle
+        .nav-toggle
           span
             background: $color-invert
           &:hover
-            background: rgba(black, 0.1)
+            background: rgba($black, 0.1)
           &.is-active
             span
               background: $color-invert
-        .header-menu
-          .header-item
+        .nav-menu
+          .nav-item
             border-top-color: rgba($color-invert, 0.2)
   // Sizes
-  &.is-fullheight,
-  &.is-large
-    // Responsiveness
-    +tablet
-      .tabs
-        font-size: $size-medium
   &.is-medium
-    // Responsiveness
     +tablet
-      .hero-content
-        padding: 120px 20px
-    +desktop
-      .hero-content
-        padding: 120px 0
+      .hero-body
+        padding-bottom: 120px
+        padding-top: 120px
+  &.is-large
+    +tablet
+      .hero-body
+        padding-bottom: 240px
+        padding-top: 240px
   &.is-fullheight
-    align-items: stretch
-    display: flex
-    flex-direction: column
-    justify-content: space-between
     min-height: 100vh
-    .tabs
-      a
-        padding: 15px 20px
-    .hero-content
+    .hero-body
+      align-items: center
       display: flex
-      flex: 1
-      flex-direction: column
-      justify-content: center
-  &.is-large
-    .tabs
-      a
-        padding: 10px 15px
-    // Responsiveness
-    +tablet
-      .hero-content
-        padding: 240px 20px
-    +desktop
-      .hero-content
-        padding: 240px 0
+      & > .container
+        align-items: stretch
+        display: flex
+        flex: 1
+        flex-direction: column
+        justify-content: center

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

@@ -1,6 +1,5 @@
 @charset "utf-8"
 
-@import "header"
 @import "hero"
 @import "section"
 @import "footer"

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

@@ -1,8 +1,6 @@
 .section
-  background: white
+  background: $white
   padding: 40px 20px
-  & + .section
-    border-top: 1px solid rgba($border, 0.5)
   // Responsiveness
   +desktop
     padding: 40px 0

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

@@ -0,0 +1,51 @@
+=control
+  -moz-appearance: none
+  -webkit-appearance: none
+  align-items: center
+  background: $control-background
+  border: 1px solid $control-border
+  border-radius: $radius
+  color: $control
+  display: inline-flex
+  font-size: $size-normal
+  height: 32px
+  justify-content: flex-start
+  line-height: 24px
+  padding-left: 8px
+  padding-right: 8px
+  position: relative
+  vertical-align: top
+  &:hover
+    border-color: $control-hover-border
+  &:active,
+  &:focus
+    border-color: $control-active-border
+    outline: none
+  &[disabled],
+  &.is-disabled
+    background: $background
+    border-color: $control-border
+    cursor: not-allowed
+    pointer-events: none
+    +placeholder
+      color: rgba($control, 0.3)
+
+=control-small
+  border-radius: 2px
+  font-size: 11px
+  height: 24px
+  line-height: 16px
+  padding-left: 6px
+  padding-right: 6px
+=control-medium
+  font-size: 18px
+  height: 40px
+  line-height: 32px
+  padding-left: 10px
+  padding-right: 10px
+=control-large
+  font-size: 24px
+  height: 48px
+  line-height: 40px
+  padding-left: 12px
+  padding-right: 12px

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

@@ -29,6 +29,6 @@
 
 @function findColorInvert($color)
   @if (colorLuminance($color) > 0.8)
-    @return rgba(black, 0.5)
+    @return rgba($black, 0.5)
   @else
     @return white

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

@@ -55,13 +55,6 @@
   text-indent: -290486px
   width: $width
 
-=unselectable
-  -webkit-touch-callout: none
-  -webkit-user-select: none
-  -moz-user-select: none
-  -ms-user-select: none
-  user-select: none
-
 =from($device)
   @media screen and (min-width: $device)
     @content
@@ -78,6 +71,10 @@
   @media screen and (min-width: $tablet)
     @content
 
+=tablet-only
+  @media screen and (min-width: $tablet) and (max-width: $desktop - 1px)
+    @content
+
 =touch
   @media screen and (max-width: $desktop - 1px)
     @content
@@ -86,6 +83,10 @@
   @media screen and (min-width: $desktop)
     @content
 
+=desktop-only
+  @media screen and (min-width: $desktop) and (max-width: $widescreen - 1px)
+    @content
+
 =widescreen
   @media screen and (min-width: $widescreen)
     @content

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

@@ -4,4 +4,5 @@
 @import "functions"
 @import "mixins"
 @import "animations"
+@import "controls"
 @import "variables"

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

@@ -2,11 +2,13 @@
 
 // Colors
 
+$black: #111 !default
 $grey-darker: #222324 !default
 $grey-dark: #69707a !default
 $grey: #aeb1b5 !default
 $grey-light: #d3d6db !default
 $grey-lighter: #f5f7fa !default
+$white: #fff !default
 
 $blue: #42afe3 !default
 $green: #97cd76 !default
@@ -45,7 +47,7 @@ $widescreen: 1180px !default
 
 $column-gap: 20px !default
 
-$header-height: 50px !default
+$nav-height: 50px !default
 
 // Miscellaneous
 
@@ -62,7 +64,8 @@ $success: $green !default
 $warning: $yellow !default
 $danger: $red !default
 
-$dark: $grey-darker !default
+$light: $grey-lighter !default
+$dark: $grey-dark !default
 
 $text: $grey-dark !default
 
@@ -77,7 +80,8 @@ $success-invert: findColorInvert($success) !default
 $warning-invert: findColorInvert($warning) !default
 $danger-invert: findColorInvert($danger) !default
 
-$dark-invert: findColorInvert($dark) !default
+$light-invert: $dark !default
+$dark-invert: $light !default
 
 // General colors
 
@@ -142,6 +146,6 @@ $size-huge: $size-1 !default
 
 // 4. Lists and maps
 
-$colors: (dark: ($dark, $dark-invert), primary: ($primary, $primary-invert), info: ($info, $info-invert), success: ($success, $success-invert), warning: ($warning, $warning-invert), danger: ($danger, $danger-invert)) !default
+$colors: (white: ($white, $black), black: ($black, $white), light: ($light, $light-invert), dark: ($dark, $dark-invert), primary: ($primary, $primary-invert), info: ($info, $info-invert), success: ($success, $success-invert), warning: ($warning, $warning-invert), danger: ($danger, $danger-invert)) !default
 
 $sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 !default

data/bulma-rails.gemspec

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