RubyGems - bulma-rails - Versions diffs - 0.0.24 → 0.0.26 - Mend

bulma-rails 0.0.24 → 0.0.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (35) hide show

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

@@ -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 CHANGED

@@ -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 CHANGED

@@ -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 CHANGED

@@ -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 CHANGED

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

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

@@ -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 ADDED

@@ -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 CHANGED

@@ -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 CHANGED

@@ -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 CHANGED

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

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

@@ -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 CHANGED

@@ -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"]