bulma-sass 0.6.2 → 0.7.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
-SHA1:
-  metadata.gz: 60c061dad8b1739060e906b8de651d08f7966c72
-  data.tar.gz: 0e7066949f8186ccbd78ed48994120d595cdf1fe
+SHA256:
+  metadata.gz: 75073f801c5bfd7b483790c4b19fd71661a3e9d8d444c5a7048c6f881cbbf6c8
+  data.tar.gz: 2ff3c9a45f0e4c4b1a81e136b0935e11426d7d2a57fc768997356f34e96319c6
 SHA512:
-  metadata.gz: 546496e3cdf267ced595843f7eb92abacb3458041c2e42dde3ecd95a2731b72035259f12db73eedbf7dacbb08c13681f5ee3620357851d8288a212ef8bdf041e
-  data.tar.gz: 71707aa3fda3978e4a6ffc0163727c60a68b22cb7d3f8a72aa5ae9ce03c5d24fdecc7f7c9961e14cfd58db33fe5ae00706dfcd6b88139e2e02d059d6fd1099d8
+  metadata.gz: cae9a859acd6aa44381cc92901c3ac64c4bcc8dc554fe0ea3e9af8c686b238e8031588c72a0a07c75a21029094c7b8b955e623bd132cc82157e5a0ff3e6ac7f6
+  data.tar.gz: ccf82f66d994f67d557a10aff975e0ab099cb0f606da4a22938572c0440ca55b9a99f47baf912c0fc21e35eb2e7f99fd79efc0538b430ada070f91e244f488e0

data/README.md

@@ -4,7 +4,9 @@ Bulma, modern CSS framework based on Flexbox
 
 `bulma-sass` gem supports Rails and Sprockets
 
-## Installation
+## Rails 
+
+### Installation
 
 Add this line to your application's Gemfile:
 
@@ -20,10 +22,14 @@ Or install it yourself as:
 
     $ gem install bulma-sass
 
-## Usage
+### Usage
 
 Import Bulma styles in `app/assets/stylesheets/application.scss`
 
 ```css
 @import "bulma";
 ```
+
+## Jekyll
+
+See [example](./docs)

data/app/assets/stylesheets/bulma.sass

@@ -1,5 +1,5 @@
 @charset "utf-8"
-/*! bulma.io v0.6.0 | MIT License | github.com/jgthms/bulma */
+/*! bulma.io v0.7.1 | MIT License | github.com/jgthms/bulma */
 @import "sass/utilities/_all"
 @import "sass/base/_all"
 @import "sass/elements/_all"

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

@@ -11,8 +11,8 @@ $code-padding: 0.25em 0.5em 0.25em !default
 $code-weight: normal !default
 $code-size: 0.875em !default
 
-$hr-background-color: $border !default
-$hr-height: 1px !default
+$hr-background-color: $background !default
+$hr-height: 2px !default
 $hr-margin: 1.5rem 0 !default
 
 $strong-color: $text-strong !default

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

@@ -52,6 +52,8 @@ $alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'rig
 @each $alignment, $text-align in $alignments
   .has-text-#{$alignment}
     text-align: #{$text-align} !important
+
+@each $alignment, $text-align in $alignments
   +mobile
     .has-text-#{$alignment}-mobile
       text-align: #{$text-align} !important
@@ -100,10 +102,14 @@ $alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'rig
     &:hover,
     &:focus
       color: darken($color, 10%) !important
+  .has-background-#{$name}
+    background-color: $color !important
 
 @each $name, $shade in $shades
   .has-text-#{$name}
     color: $shade !important
+  .has-background-#{$name}
+    background-color: $shade !important
 
 .has-text-weight-light
   font-weight: $weight-light !important

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

@@ -1,4 +1,4 @@
-/*! minireset.css v0.0.2 | MIT License | github.com/jgthms/minireset.css */
+/*! minireset.css v0.0.3 | MIT License | github.com/jgthms/minireset.css */
 // Blocks
 html,
 body,
@@ -52,17 +52,16 @@ html
   box-sizing: border-box
 
 *
-  box-sizing: inherit
-  &:before,
-  &:after
+  &,
+  &::before,
+  &::after
     box-sizing: inherit
 
 // Media
 img,
-embed,
-object,
 audio,
 video
+  height: auto
   max-width: 100%
 
 // Iframe

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

@@ -2,23 +2,22 @@ $breadcrumb-item-color: $link !default
 $breadcrumb-item-hover-color: $link-hover !default
 $breadcrumb-item-active-color: $text-strong !default
 
-$breadcrumb-item-separator-color: $text !default
+$breadcrumb-item-padding-vertical: 0 !default
+$breadcrumb-item-padding-horizontal: 0.75em !default
+
+$breadcrumb-item-separator-color: $grey-light !default
 
 .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: $breadcrumb-item-color
     display: flex
     justify-content: center
-    padding: 0.5em 0.75em
+    padding: $breadcrumb-item-padding-vertical $breadcrumb-item-padding-horizontal
     &:hover
       color: $breadcrumb-item-hover-color
   li
@@ -34,11 +33,11 @@ $breadcrumb-item-separator-color: $text !default
     & + li::before
       color: $breadcrumb-item-separator-color
       content: "\0002f"
-  ul, ol
-    align-items: center
+  ul,
+  ol
+    align-items: flex-start
     display: flex
-    flex-grow: 1
-    flex-shrink: 0
+    flex-wrap: wrap
     justify-content: flex-start
   .icon
     &:first-child
@@ -47,10 +46,12 @@ $breadcrumb-item-separator-color: $text !default
       margin-left: 0.5em
   // Alignment
   &.is-centered
-    ol, ul
+    ol,
+    ul
       justify-content: center
   &.is-right
-    ol, ul
+    ol,
+    ul
       justify-content: flex-end
   // Sizes
   &.is-small

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

@@ -2,10 +2,14 @@ $card-color: $text !default
 $card-background-color: $white !default
 $card-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
 
+$card-header-background-color: none !default
 $card-header-color: $text-strong !default
 $card-header-shadow: 0 1px 2px rgba($black, 0.1) !default
 $card-header-weight: $weight-bold !default
 
+$card-content-background-color: none !default
+
+$card-footer-background-color: none !default
 $card-footer-border-top: 1px solid $border !default
 
 .card
@@ -16,6 +20,7 @@ $card-footer-border-top: 1px solid $border !default
   position: relative
 
 .card-header
+  background-color: $card-header-background-color
   align-items: stretch
   box-shadow: $card-header-shadow
   display: flex
@@ -42,9 +47,11 @@ $card-footer-border-top: 1px solid $border !default
   position: relative
 
 .card-content
+  background-color: $card-content-background-color
   padding: 1.5rem
 
 .card-footer
+  background-color: $card-footer-background-color
   border-top: $card-footer-border-top
   align-items: stretch
   display: flex

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

@@ -29,7 +29,7 @@ $dropdown-divider-background-color: $border !default
     .dropdown-menu
       bottom: 100%
       padding-bottom: $dropdown-content-offset
-      padding-top: unset
+      padding-top: initial
       top: auto
 
 .dropdown-menu

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

@@ -41,5 +41,4 @@
   flex-basis: auto
   flex-grow: 1
   flex-shrink: 1
-  overflow: auto
   text-align: left

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

@@ -3,17 +3,21 @@ $message-radius: $radius !default
 
 $message-header-background-color: $text !default
 $message-header-color: $text-invert !default
-$message-header-padding: 0.5em 0.75em !default
+$message-header-weight: $weight-bold !default
+$message-header-padding: 0.75em 1em !default
 $message-header-radius: $radius !default
 
-$message-body-border: 1px solid $border !default
+$message-body-border-color: $border !default
+$message-body-border-width: 0 0 0 4px !default
 $message-body-color: $text !default
-$message-body-padding: 1em 1.25em !default
+$message-body-padding: 1.25em 1.5em !default
 $message-body-radius: $radius !default
 
 $message-body-pre-background-color: $white !default
 $message-body-pre-code-background-color: transparent !default
 
+$message-header-body-border-width: 0 !default
+
 .message
   +block
   background-color: $message-background-color
@@ -54,6 +58,7 @@ $message-body-pre-code-background-color: transparent !default
   border-radius: $message-header-radius $message-header-radius 0 0
   color: $message-header-color
   display: flex
+  font-weight: $message-header-weight
   justify-content: space-between
   line-height: 1.25
   padding: $message-header-padding
@@ -63,13 +68,15 @@ $message-body-pre-code-background-color: transparent !default
     flex-shrink: 0
     margin-left: 0.75em
   & + .message-body
+    border-width: $message-header-body-border-width
     border-top-left-radius: 0
     border-top-right-radius: 0
-    border-top: none
 
 .message-body
-  border: $message-body-border
+  border-color: $message-body-border-color
   border-radius: $message-body-radius
+  border-style: solid
+  border-width: $message-body-border-width
   color: $message-body-color
   padding: $message-body-padding
   code,

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

@@ -1,10 +1,15 @@
 $navbar-background-color: $white !default
+$navbar-box-shadow-size: 0 2px 0 0 !default
+$navbar-box-shadow-color: $background !default
 $navbar-height: 3.25rem !default
+$navbar-padding-vertical: 1rem !default
+$navbar-padding-horizontal: 2rem !default
+$navbar-z: 30 !default
 $navbar-fixed-z: 30 !default
 
 $navbar-item-color: $grey-dark !default
 $navbar-item-hover-color: $link !default
-$navbar-item-hover-background-color: $background !default
+$navbar-item-hover-background-color: $white-bis !default
 $navbar-item-active-color: $black !default
 $navbar-item-active-background-color: transparent !default
 $navbar-item-img-max-height: 1.75rem !default
@@ -18,7 +23,7 @@ $navbar-tab-active-border-bottom-style: solid !default
 $navbar-tab-active-border-bottom-width: 3px !default
 
 $navbar-dropdown-background-color: $white !default
-$navbar-dropdown-border-top: 1px solid $border !default
+$navbar-dropdown-border-top: 2px solid $border !default
 $navbar-dropdown-offset: -4px !default
 $navbar-dropdown-arrow: $link !default
 $navbar-dropdown-radius: $radius-large !default
@@ -32,7 +37,10 @@ $navbar-dropdown-item-hover-background-color: $background !default
 $navbar-dropdown-item-active-color: $link !default
 $navbar-dropdown-item-active-background-color: $background !default
 
-$navbar-divider-background-color: $border !default
+$navbar-divider-background-color: $background !default
+$navbar-divider-height: 2px !default
+
+$navbar-bottom-box-shadow-size: 0 -2px 0 0 !default
 
 =navbar-fixed
   left: 0
@@ -40,15 +48,11 @@ $navbar-divider-background-color: $border !default
   right: 0
   z-index: $navbar-fixed-z
 
-=navbar-fixed-html
-  left: 0
-  position: fixed
-  right: 0
-
 .navbar
   background-color: $navbar-background-color
   min-height: $navbar-height
   position: relative
+  z-index: $navbar-z
   @each $name, $pair in $colors
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
@@ -98,22 +102,23 @@ $navbar-divider-background-color: $border !default
     min-height: $navbar-height
     width: 100%
   &.has-shadow
-    box-shadow: 0 2px 3px rgba($black, 0.1)
+    box-shadow: $navbar-box-shadow-size $navbar-box-shadow-color
   &.is-fixed-bottom,
   &.is-fixed-top
     +navbar-fixed
   &.is-fixed-bottom
     bottom: 0
     &.has-shadow
-      box-shadow: 0 -2px 3px rgba($black, 0.1)
+      box-shadow: $navbar-bottom-box-shadow-size $navbar-box-shadow-color
   &.is-fixed-top
     top: 0
 
-html.has-navbar-fixed-top
-  padding-top: $navbar-height
-
-html.has-navbar-fixed-bottom
-  padding-bottom: $navbar-height
+html,
+body
+  &.has-navbar-fixed-top
+    padding-top: $navbar-height
+  &.has-navbar-fixed-bottom
+    padding-bottom: $navbar-height
 
 .navbar-brand,
 .navbar-tabs
@@ -122,6 +127,11 @@ html.has-navbar-fixed-bottom
   flex-shrink: 0
   min-height: $navbar-height
 
+.navbar-brand
+  a.navbar-item
+    &:hover
+      background-color: transparent
+
 .navbar-tabs
   +overflow-touch
   max-width: 100vw
@@ -140,17 +150,23 @@ html.has-navbar-fixed-bottom
   color: $navbar-item-color
   display: block
   line-height: 1.5
-  padding: 0.5rem 1rem
+  padding: 0.5rem 0.75rem
   position: relative
+  .icon
+    &:only-child
+      margin-left: -0.25rem
+      margin-right: -0.25rem
 
 a.navbar-item,
-a.navbar-link
+.navbar-link
+  cursor: pointer
   &:hover,
   &.is-active
     background-color: $navbar-item-hover-background-color
     color: $navbar-item-hover-color
 
 .navbar-item
+  display: block
   flex-grow: 0
   flex-shrink: 0
   img
@@ -181,6 +197,10 @@ a.navbar-link
 
 .navbar-link
   padding-right: 2.5em
+  &::after
+    +arrow($navbar-dropdown-arrow)
+    margin-top: -0.375em
+    right: 1.125em
 
 .navbar-dropdown
   font-size: 0.875rem
@@ -194,7 +214,7 @@ a.navbar-link
   background-color: $navbar-divider-background-color
   border: none
   display: none
-  height: 1px
+  height: $navbar-divider-height
   margin: 0.5rem 0
 
 +touch
@@ -205,6 +225,9 @@ a.navbar-link
     .navbar-item
       align-items: center
       display: flex
+  .navbar-link
+    &::after
+      display: none
   .navbar-menu
     background-color: $navbar-background-color
     box-shadow: 0 8px 16px rgba($black, 0.1)
@@ -228,10 +251,12 @@ a.navbar-link
         +overflow-touch
         max-height: calc(100vh - #{$navbar-height})
         overflow: auto
-  html.has-navbar-fixed-top-touch
-    padding-top: $navbar-height
-  html.has-navbar-fixed-bottom-touch
-    padding-bottom: $navbar-height
+  html,
+  body
+    &.has-navbar-fixed-top-touch
+      padding-top: $navbar-height
+    &.has-navbar-fixed-bottom-touch
+      padding-bottom: $navbar-height
 
 +desktop
   .navbar,
@@ -242,9 +267,17 @@ a.navbar-link
     display: flex
   .navbar
     min-height: $navbar-height
+    &.is-spaced
+      padding: $navbar-padding-vertical $navbar-padding-horizontal
+      .navbar-start,
+      .navbar-end
+        align-items: center
+      a.navbar-item,
+      .navbar-link
+        border-radius: $radius
     &.is-transparent
       a.navbar-item,
-      a.navbar-link
+      .navbar-link
         &:hover,
         &.is-active
           background-color: transparent !important
@@ -268,6 +301,7 @@ a.navbar-link
     align-items: center
     display: flex
   .navbar-item
+    display: flex
     &.has-dropdown
       align-items: stretch
     &.has-dropdown-up
@@ -284,16 +318,11 @@ a.navbar-link
     &.is-hoverable:hover
       .navbar-dropdown
         display: block
+        .navbar.is-spaced &,
         &.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
@@ -327,6 +356,7 @@ a.navbar-link
       &.is-active
         background-color: $navbar-dropdown-item-active-background-color
         color: $navbar-dropdown-item-active-color
+    .navbar.is-spaced &,
     &.is-boxed
       border-radius: $navbar-dropdown-boxed-radius
       border-top: none
@@ -360,13 +390,19 @@ a.navbar-link
         box-shadow: 0 -2px 3px rgba($black, 0.1)
     &.is-fixed-top-desktop
       top: 0
-  html.has-navbar-fixed-top-desktop
-    padding-top: $navbar-height
-  html.has-navbar-fixed-bottom-desktop
-    padding-bottom: $navbar-height
+  html,
+  body
+    &.has-navbar-fixed-top-desktop
+      padding-top: $navbar-height
+    &.has-navbar-fixed-bottom-desktop
+      padding-bottom: $navbar-height
+    &.has-spaced-navbar-fixed-top
+      padding-top: $navbar-height + ($navbar-padding-vertical * 2)
+    &.has-spaced-navbar-fixed-bottom
+      padding-bottom: $navbar-height + ($navbar-padding-vertical * 2)
   // Hover/Active states
   a.navbar-item,
-  a.navbar-link
+  .navbar-link
     &.is-active
       color: $navbar-item-active-color
     &.is-active:not(:hover)