bulma-rails 0.2.3 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 049654e30381034feb5371e238dae3610de26490
-  data.tar.gz: 0d8ff083ba812298ae36a7ac903552020cb41773
+  metadata.gz: 33e1923ea594bb811bb56eb6a6bce07d05493e91
+  data.tar.gz: 283b72f793a75eabfc4d1462853277543ca065e4
 SHA512:
-  metadata.gz: e78d868dd9d930411b87df7dcf6ea70f2c07ee43e626e02d6aaf1238862c3a0dc9edc1e0622442566634ac7c295627dd8dccf2168ae10732a39c7b6835020cde
-  data.tar.gz: 286e4ab0caf98e5bdd9eb5b7014a5fd6207bc1f1558d23e1e33f940601976c76431d0274d1dcd0668241715a99be64644f620848cb3b4cd5be7c2e11b3bfd7b3
+  metadata.gz: 6873d11f2cfc242f2ca16c2a6747fb23b8806ae588c3a8bcc45de6ac4f84be0dc5b0c9a4ef80a06de03c6f20dba0779597bd0c3016c4fd3383a7b4126d7717c5
+  data.tar.gz: 7755bd0c55d8c461e8235dbb0415053cfb10af5cbb397c50c70a422f9ba4e00431a77ebc79fc557b38ba475a54185a40e91153879d3ed68b80a70c0c06276b35

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.2.3"
+    gem "bulma-rails", "~> 0.3.0"
 
 And then execute:
 

data/app/assets/stylesheets/bulma.sass

@@ -1,4 +1,5 @@
-/*! bulma.io v0.2.3 | MIT License | github.com/jgthms/bulma */
+
+/*! bulma.io v0.3.0 | MIT License | github.com/jgthms/bulma */
 @charset "utf-8"
 
 @import "sass/utilities/_all"

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

@@ -1,8 +1,9 @@
-$body-background: $white-ter !default
+$body-background: $white !default
+$body-size: $size-6 !default
 
 html
   background-color: $body-background
-  font-size: $size-normal
+  font-size: $body-size
   -moz-osx-font-smoothing: grayscale
   -webkit-font-smoothing: antialiased
   min-width: 300px
@@ -31,13 +32,12 @@ pre
   -moz-osx-font-smoothing: auto
   -webkit-font-smoothing: auto
   font-family: $family-code
-  line-height: 1.25
 
 body
   color: $text
   font-size: 1rem
   font-weight: $weight-normal
-  line-height: 1.428571428571429
+  line-height: 1.5
 
 // Inline
 
@@ -52,16 +52,16 @@ a
 code
   background-color: $code-background
   color: $code
-  font-size: 12px
+  font-size: 0.8em
   font-weight: normal
-  padding: 1px 2px 2px
+  padding: 0.25em 0.5em 0.25em
 
 hr
   background-color: $border
   border: none
   display: block
   height: 1px
-  margin: 20px 0
+  margin: 1.5rem 0
 
 img
   max-width: 100%
@@ -71,7 +71,7 @@ input[type="radio"]
   vertical-align: baseline
 
 small
-  font-size: $size-small
+  font-size: 0.8em
 
 span
   font-style: inherit
@@ -86,14 +86,16 @@ strong
 pre
   background-color: $pre-background
   color: $pre
+  font-size: 0.8em
   white-space: pre
   word-wrap: normal
   code
-    background-color: $pre-background
-    color: $pre
+    background: none
+    color: inherit
     display: block
+    font-size: 1em
     overflow-x: auto
-    padding: 16px 20px
+    padding: 1.25rem 1.5rem
 
 table
   width: 100%

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

@@ -1,7 +1,6 @@
 @charset "utf-8"
 
 @import "card.sass"
-@import "highlight.sass"
 @import "level.sass"
 @import "media.sass"
 @import "menu.sass"

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

@@ -2,31 +2,30 @@
   align-items: stretch
   box-shadow: 0 1px 2px rgba($black, 0.1)
   display: flex
-  min-height: 40px
 
 .card-header-title
-  align-items: flex-start
+  align-items: center
   color: $text-strong
   display: flex
   flex-grow: 1
-  font-weight: bold
-  padding: 10px
+  font-weight: $weight-bold
+  padding: 0.75rem
 
 .card-header-icon
   align-items: center
   cursor: pointer
   display: flex
   justify-content: center
-  width: 40px
+  padding: 0.75rem
 
 .card-image
   display: block
   position: relative
 
 .card-content
-  padding: 20px
+  padding: 1.5rem
   .title + .subtitle
-    margin-top: -20px
+    margin-top: -1.5rem
 
 .card-footer
   border-top: 1px solid $border
@@ -36,9 +35,11 @@
 .card-footer-item
   align-items: center
   display: flex
+  flex-basis: 0
   flex-grow: 1
+  flex-shrink: 0
   justify-content: center
-  padding: 10px
+  padding: 0.75rem
   &:not(:last-child)
     border-right: 1px solid $border
 
@@ -48,11 +49,5 @@
   color: $text
   max-width: 100%
   position: relative
-  width: 300px
   .media:not(:last-child)
-    margin-bottom: 10px
-  // Modifiers
-  &.is-fullwidth
-    width: 100%
-  &.is-rounded
-    border-radius: $radius-large
+    margin-bottom: 0.75rem

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

@@ -1,36 +1,46 @@
 .level-item
+  align-items: center
+  display: flex
+  flex-basis: auto
+  flex-grow: 0
+  flex-shrink: 0
+  justify-content: center
   .title,
   .subtitle
     margin-bottom: 0
   // Responsiveness
   +mobile
     &:not(:last-child)
-      margin-bottom: 10px
+      margin-bottom: 0.75rem
 
 .level-left,
 .level-right
+  flex-basis: auto
+  flex-grow: 0
+  flex-shrink: 0
   .level-item
     &:not(:last-child)
-      margin-right: 10px
+      margin-right: 0.75rem
     // Modifiers
     &.is-flexible
       flex-grow: 1
 
 .level-left
+  align-items: center
+  justify-content: flex-start
   // Responsiveness
   +mobile
     & + .level-right
-      margin-top: 20px
+      margin-top: 1.5rem
   +tablet
-    align-items: center
     display: flex
 
 .level-right
+  align-items: center
+  justify-content: flex-end
   // Responsiveness
   +tablet
-    align-items: center
     display: flex
-    justify-content: flex-end
 
 .level
   +block

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

@@ -1,29 +1,17 @@
-.media-number,
 .media-left,
 .media-right
+  flex-basis: auto
   flex-grow: 0
   flex-shrink: 0
 
-.media-number
-  background-color: $background
-  border-radius: 290486px
-  display: inline-block
-  font-size: $size-medium
-  height: 32px
-  line-height: 24px
-  margin-right: 10px
-  min-width: 32px
-  padding: 4px 8px
-  text-align: center
-  vertical-align: top
-
 .media-left
-  margin-right: 10px
+  margin-right: 1rem
 
 .media-right
-  margin-left: 10px
+  margin-left: 1rem
 
 .media-content
+  flex-basis: auto
   flex-grow: 1
   flex-shrink: 1
   text-align: left
@@ -33,29 +21,24 @@
   display: flex
   text-align: left
   .content:not(:last-child)
-    margin-bottom: 10px
+    margin-bottom: 0.75rem
   .media
     border-top: 1px solid rgba($border, 0.5)
     display: flex
-    padding-top: 10px
+    padding-top: 0.75rem
     .content:not(:last-child),
     .control:not(:last-child)
-      margin-bottom: 5px
+      margin-bottom: 0.5rem
     .media
-      padding-top: 5px
+      padding-top: 0.5rem
       & + .media
-        margin-top: 5px
+        margin-top: 0.5rem
   & + .media
     border-top: 1px solid rgba($border, 0.5)
-    margin-top: 10px
-    padding-top: 10px
+    margin-top: 1rem
+    padding-top: 1rem
   // Sizes
   &.is-large
     & + .media
-      margin-top: 20px
-      padding-top: 20px
-  // Responsiveness
-  +tablet
-    &.is-large
-      .media-number
-        margin-right: 20px
+      margin-top: 1.5rem
+      padding-top: 1.5rem

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

@@ -1,14 +1,13 @@
-.menu-nav
-  a
-    display: block
-    padding: 5px 10px
+.menu
+  font-size: $size-normal
 
 .menu-list
+  line-height: 1.25
   a
     border-radius: $radius-small
     color: $text
     display: block
-    padding: 5px 10px
+    padding: 0.5em 0.75em
     &:hover
       background-color: $background
       color: $link
@@ -19,14 +18,15 @@
   li
     ul
       border-left: 1px solid $border
-      margin: 10px
-      padding-left: 10px
+      margin: 0.75em
+      padding-left: 0.75em
 
 .menu-label
   color: $text-light
-  font-size: $size-small
-  letter-spacing: 1px
-  margin-bottom: 5px
+  font-size: 0.8em
+  letter-spacing: 0.1em
   text-transform: uppercase
   &:not(:first-child)
-    margin-top: 20px
+    margin-top: 1em
+  &:not(:last-child)
+    margin-bottom: 1em

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

@@ -1,39 +1,61 @@
-.message-body
-  border: 1px solid $border
-  border-radius: $radius
-  padding: 12px 15px
-  strong
-    color: inherit
-
-.message-header
-  background-color: $text
-  border-radius: $radius $radius 0 0
-  color: $text-invert
-  padding: 7px 10px
-  strong
-    color: inherit
-  & + .message-body
-    border-radius: 0 0 $radius $radius
-    border-top: none
-
 .message
   +block
   background-color: $background
   border-radius: $radius
+  font-size: $size-normal
   // Colors
   @each $name, $pair in $colors
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
-    $lightning: max((100% - lightness($color)) - 4%, 0%)
-    $darkness: max(lightness($color) - 10%, lightness($color))
+    $color-lightning: max((100% - lightness($color)) - 2%, 0%)
+    $color-luminance: colorLuminance($color)
+    $darken-percentage: $color-luminance * 70%
+    $desaturate-percentage: $color-luminance * 30%
     &.is-#{$name}
-      background-color: lighten($color, $lightning)
+      background-color: lighten($color, $color-lightning)
       .message-header
         background-color: $color
         color: $color-invert
       .message-body
         border-color: $color
-        @if (colorLuminance($color) > 0.8)
-          color: desaturate(lighten(darken($color, 100%), 40%), 40%)
-        @else
-          color: desaturate(lighten(darken($color, 100%), 50%), 30%)
+        color: desaturate(darken($color, $darken-percentage), $desaturate-percentage)
+
+.message-header
+  align-items: center
+  background-color: $text
+  border-radius: $radius $radius 0 0
+  color: $text-invert
+  display: flex
+  justify-content: space-between
+  line-height: 1.25
+  padding: 0.5em 0.75em
+  position: relative
+  a,
+  strong
+    color: inherit
+  a
+    text-decoration: underline
+  .delete
+    flex-grow: 0
+    flex-shrink: 0
+    margin-left: 0.75em
+  & + .message-body
+    border-top-left-radius: 0
+    border-top-right-radius: 0
+    border-top: none
+
+.message-body
+  border: 1px solid $border
+  border-radius: $radius
+  color: $text
+  padding: 1em 1.25em
+  a,
+  strong
+    color: inherit
+  a
+    text-decoration: underline
+  code,
+  pre
+    background: $white
+  pre code
+    background: transparent

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

@@ -61,6 +61,7 @@
       margin-right: 10px
 
 .modal-card-body
+  +overflow-touch
   background-color: $white
   flex-grow: 1
   flex-shrink: 1