bulma-rails 0.4.3 → 0.5.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 304ff4863cd6ff7ee159e64e0aebe30b29220598
-  data.tar.gz: 641b22c7c509c6e215e29e9c854d06c5ae4015a2
+  metadata.gz: 48dad017d7592d692af1c1ee8930beabd11f3705
+  data.tar.gz: c6a979b9db08188e07cdb176a8f7eb4cb471f444
 SHA512:
-  metadata.gz: d12d402f4c60d0de96fcd7fbf60e01bb3d4f8e4efd130d9331039b1a8b87e181f901ba4b92296c5defeee64e57dccda14ecc3d144da150edb585e6771493bcd8
-  data.tar.gz: 35056f12a2d51aa1700e764d15dd19eb0f5627deb504ae26615b0df1acdb61762639a91d9886d722742c427eb6590bde3b562f0c808413e4f89c32348f50780e
+  metadata.gz: 5aeacefcf06fefc3c240f614d17a37e5358019a62c5a5512ede8571de06e102e998635cebb8c6b82db2179f6cdcae525043d6e865fa723f7f4147858f1a50b13
+  data.tar.gz: f4e4a1dab089774f17c6607e27bd1d263ed0acbeb4d364f8952bb05cee529ba72479c9e8f275fa72b9d7425f2addbb7e60e6364bee299a3971f170d9ebb49cf6

data/README.md

@@ -8,7 +8,7 @@ A modern CSS framework based on Flexbox.
 
 Add this line to your application's Gemfile:
 
-    gem "bulma-rails", "~> 0.4.3"
+    gem "bulma-rails", "~> 0.5.1"
 
 And then execute:
 

data/app/assets/stylesheets/bulma.sass

@@ -1,6 +1,5 @@
-/*! bulma.io v0.4.3 | MIT License | github.com/jgthms/bulma */
 @charset "utf-8"
-
+/*! bulma.io v0.5.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

@@ -1,12 +1,32 @@
+$body-background-color: #fff !default
+$body-size: 16px !default
+$body-rendering: optimizeLegibility !default
+$body-family: $family-sans-serif !default
+$body-color: $text !default
+$body-weight: $weight-normal !default
+$body-line-height: 1.5 !default
+
+$code-family: $family-monospace !default
+$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-margin: 1.5rem 0 !default
+
+$strong-color: $text-strong !default
+$strong-weight: $weight-bold !default
+
 html
-  background-color: $body-background
+  background-color: $body-background-color
   font-size: $body-size
   -moz-osx-font-smoothing: grayscale
   -webkit-font-smoothing: antialiased
   min-width: 300px
   overflow-x: hidden
   overflow-y: scroll
-  text-rendering: $render-mode
+  text-rendering: $body-rendering
 
 article,
 aside,
@@ -22,20 +42,19 @@ button,
 input,
 select,
 textarea
-  font-family: $family-primary
+  font-family: $body-family
 
 code,
 pre
   -moz-osx-font-smoothing: auto
   -webkit-font-smoothing: auto
-  font-family: $family-code
+  font-family: $code-family
 
 body
-  color: $text
+  color: $body-color
   font-size: 1rem
-  font-weight: $weight-normal
-  line-height: 1.5
-  overflow-x: hidden
+  font-weight: $body-weight
+  line-height: $body-line-height
 
 // Inline
 
@@ -43,25 +62,27 @@ a
   color: $link
   cursor: pointer
   text-decoration: none
-  transition: none $speed $easing
+  strong
+    color: currentColor
   &:hover
     color: $link-hover
 
 code
   background-color: $code-background
   color: $code
-  font-size: 0.8em
-  font-weight: normal
-  padding: 0.25em 0.5em 0.25em
+  font-size: $code-size
+  font-weight: $code-weight
+  padding: $code-padding
 
 hr
-  background-color: $border
+  background-color: $hr-background-color
   border: none
   display: block
-  height: 1px
-  margin: 1.5rem 0
+  height: $hr-height
+  margin: $hr-margin
 
 img
+  height: auto
   max-width: 100%
 
 input[type="checkbox"],
@@ -76,15 +97,15 @@ span
   font-weight: inherit
 
 strong
-  color: $text-strong
-  font-weight: $weight-bold
+  color: $strong-color
+  font-weight: $strong-weight
 
 // Block
 
 pre
   background-color: $pre-background
   color: $pre
-  font-size: 0.8em
+  font-size: 0.875em
   white-space: pre
   word-wrap: normal
   code
@@ -97,7 +118,6 @@ pre
     padding: 1.25rem 1.5rem
 
 table
-  width: 100%
   td,
   th
     text-align: left

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

@@ -1,42 +1,13 @@
-// Display
-
-$displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
-
-@each $display in $displays
-  .is-#{$display}
-    display: #{$display}
-  .is-#{$display}-mobile
-    +mobile
-      display: #{$display} !important
-  .is-#{$display}-tablet
-    +tablet
-      display: #{$display} !important
-  .is-#{$display}-tablet-only
-    +tablet-only
-      display: #{$display} !important
-  .is-#{$display}-touch
-    +touch
-      display: #{$display} !important
-  .is-#{$display}-desktop
-    +desktop
-      display: #{$display} !important
-  .is-#{$display}-desktop-only
-    +desktop-only
-      display: #{$display} !important
-  .is-#{$display}-widescreen
-    +widescreen
-      display: #{$display} !important
-
 // Float
 
 .is-clearfix
   +clearfix
 
 .is-pulled-left
-  float: left
+  float: left !important
 
 .is-pulled-right
-  float: right
+  float: right !important
 
 // Overflow
 
@@ -48,57 +19,158 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
 .is-overlay
   +overlay
 
-// Text
+// Typography
+
+@each $size in $sizes
+  $i: index($sizes, $size)
+  .is-size-#{$i}
+    font-size: $size !important
+  +mobile
+    .is-size-#{$i}-mobile
+      font-size: $size !important
+  +tablet
+    .is-size-#{$i}-tablet
+      font-size: $size !important
+  +touch
+    .is-size-#{$i}-touch
+      font-size: $size !important
+  +desktop
+    .is-size-#{$i}-desktop
+      font-size: $size !important
+  +widescreen
+    .is-size-#{$i}-widescreen
+      font-size: $size !important
+  +fullhd
+    .is-size-#{$i}-fullhd
+      font-size: $size !important
+
+$alignments: ('centered': 'center', 'left': 'left', 'right': 'right')
+
+@each $alignment, $text-align in $alignments
+  .has-text-#{$alignment}
+    text-align: #{$text-align} !important
+  +mobile
+    .has-text-#{$alignment}-mobile
+      text-align: #{$text-align} !important
+  +tablet
+    .has-text-#{$alignment}-tablet
+      text-align: #{$text-align} !important
+  +tablet-only
+    .has-text-#{$alignment}-tablet-only
+      text-align: #{$text-align} !important
+  +touch
+    .has-text-#{$alignment}-touch
+      text-align: #{$text-align} !important
+  +desktop
+    .has-text-#{$alignment}-desktop
+      text-align: #{$text-align} !important
+  +desktop-only
+    .has-text-#{$alignment}-desktop-only
+      text-align: #{$text-align} !important
+  +widescreen
+    .has-text-#{$alignment}-widescreen
+      text-align: #{$text-align} !important
+  +widescreen-only
+    .has-text-#{$alignment}-widescreen-only
+      text-align: #{$text-align} !important
+  +fullhd
+    .has-text-#{$alignment}-fullhd
+      text-align: #{$text-align} !important
 
-.has-text-centered
-  text-align: center
+.is-capitalized
+  text-transform: capitalize !important
 
-.has-text-left
-  text-align: left
+.is-lowercase
+  text-transform: lowercase !important
 
-.has-text-right
-  text-align: right
+.is-uppercase
+  text-transform: uppercase !important
 
 @each $name, $pair in $colors
   $color: nth($pair, 1)
   .has-text-#{$name}
-    color: $color
+    color: $color !important
   a.has-text-#{$name}
     &:hover,
     &:focus
-      color: darken($color, 10%)
+      color: darken($color, 10%) !important
+
+@each $name, $shade in $shades
+  .has-text-#{$name}
+    color: $shade !important
 
 // Visibility
 
+$displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
+
+@each $display in $displays
+  .is-#{$display}
+    display: #{$display} !important
+  +mobile
+    .is-#{$display}-mobile
+      display: #{$display} !important
+  +tablet
+    .is-#{$display}-tablet
+      display: #{$display} !important
+  +tablet-only
+    .is-#{$display}-tablet-only
+      display: #{$display} !important
+  +touch
+    .is-#{$display}-touch
+      display: #{$display} !important
+  +desktop
+    .is-#{$display}-desktop
+      display: #{$display} !important
+  +desktop-only
+    .is-#{$display}-desktop-only
+      display: #{$display} !important
+  +widescreen
+    .is-#{$display}-widescreen
+      display: #{$display} !important
+  +widescreen-only
+    .is-#{$display}-widescreen-only
+      display: #{$display} !important
+  +fullhd
+    .is-#{$display}-fullhd
+      display: #{$display} !important
+
 .is-hidden
   display: none !important
 
-.is-hidden-mobile
-  +mobile
++mobile
+  .is-hidden-mobile
     display: none !important
 
-.is-hidden-tablet
-  +tablet
++tablet
+  .is-hidden-tablet
     display: none !important
 
-.is-hidden-tablet-only
-  +tablet-only
++tablet-only
+  .is-hidden-tablet-only
     display: none !important
 
-.is-hidden-touch
-  +touch
++touch
+  .is-hidden-touch
     display: none !important
 
-.is-hidden-desktop
-  +desktop
++desktop
+  .is-hidden-desktop
     display: none !important
 
-.is-hidden-desktop-only
-  +desktop-only
++desktop-only
+  .is-hidden-desktop-only
     display: none !important
 
-.is-hidden-widescreen
-  +widescreen
++widescreen
+  .is-hidden-widescreen
+    display: none !important
+
++widescreen-only
+  .is-hidden-widescreen-only
+    display: none !important
+
++fullhd
+  .is-hidden-fullhd
     display: none !important
 
 // Other
@@ -109,5 +181,11 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
 .is-paddingless
   padding: 0 !important
 
+.is-radiusless
+  border-radius: 0 !important
+
+.is-shadowless
+  box-shadow: none !important
+
 .is-unselectable
   +unselectable

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

@@ -2,6 +2,7 @@
 
 @import "breadcrumb.sass"
 @import "card.sass"
+@import "dropdown.sass"
 @import "level.sass"
 @import "media.sass"
 @import "menu.sass"
@@ -11,4 +12,4 @@
 @import "navbar.sass"
 @import "pagination.sass"
 @import "panel.sass"
-@import "tabs.sass"
+@import "tabs.sass"

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

@@ -1,3 +1,9 @@
+$breadcrumb-item-color: $text-light !default
+$breadcrumb-item-hover-color: $link-hover !default
+$breadcrumb-item-active-color: $text-strong !default
+
+$breadcrumb-item-separator-color: $text !default
+
 .breadcrumb
   +block
   +unselectable
@@ -9,23 +15,23 @@
   white-space: nowrap
   a
     align-items: center
-    color: $text-light
+    color: $breadcrumb-item-color
     display: flex
     justify-content: center
     padding: 0.5em 0.75em
     &:hover
-      color: $link-hover
+      color: $breadcrumb-item-hover-color
   li
     align-items: center
     display: flex
     &.is-active
       a
-        color: $text-strong
+        color: $breadcrumb-item-active-color
         cursor: default
         pointer-events: none
-    & + li:before
-      color: $text
-      content: '\0002f'
+    & + li::before
+      color: $breadcrumb-item-separator-color
+      content: "\0002f"
   ul, ol
     align-items: center
     display: flex
@@ -53,14 +59,14 @@
     font-size: $size-large
   // Styles
   &.has-arrow-separator
-    li + li:before
-      content: '\02192'
+    li + li::before
+      content: "\02192"
   &.has-bullet-separator
-    li + li:before
-      content: '\02022'
+    li + li::before
+      content: "\02022"
   &.has-dot-separator
-    li + li:before
-      content: '\000b7'
+    li + li::before
+      content: "\000b7"
   &.has-succeeds-separator
-    li + li:before
-      content: '\0227B'
+    li + li::before
+      content: "\0227B"