bulma-rails 0.1.2 → 0.2.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 569c0a6d1430ec07030abe8247228423343a7618
-  data.tar.gz: 4922e383a86f73e26893ad30da1f6a1d65d1db7f
+  metadata.gz: 049654e30381034feb5371e238dae3610de26490
+  data.tar.gz: 0d8ff083ba812298ae36a7ac903552020cb41773
 SHA512:
-  metadata.gz: 40604dedd9348e6768c567502d020aae4b683ae8cb39c54ae43c75e813a6dedb92a912756b72e61da7b17fa3550a4ed694f2a527e615e943326157746470e1b1
-  data.tar.gz: 6571dcf818cf5f1b5e9e04984f437e897edd1555b0f109356e786a5884d61a61793f8d96c17923c75c667bba962780bf469c8a8a197678f58a65163f30107d93
+  metadata.gz: e78d868dd9d930411b87df7dcf6ea70f2c07ee43e626e02d6aaf1238862c3a0dc9edc1e0622442566634ac7c295627dd8dccf2168ae10732a39c7b6835020cde
+  data.tar.gz: 286e4ab0caf98e5bdd9eb5b7014a5fd6207bc1f1558d23e1e33f940601976c76431d0274d1dcd0668241715a99be64644f620848cb3b4cd5be7c2e11b3bfd7b3

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

data/app/assets/stylesheets/bulma.sass

@@ -1,7 +1,9 @@
+/*! bulma.io v0.2.3 | MIT License | github.com/jgthms/bulma */
 @charset "utf-8"
 
-@import "sass/utilities/utilities"
-@import "sass/base/base"
-@import "sass/elements/elements"
-@import "sass/components/components"
-@import "sass/layout/layout"
+@import "sass/utilities/_all"
+@import "sass/base/_all"
+@import "sass/elements/_all"
+@import "sass/components/_all"
+@import "sass/grid/_all"
+@import "sass/layout/_all"

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

@@ -0,0 +1,5 @@
+@charset "utf-8"
+
+@import "minireset.sass"
+@import "generic.sass"
+@import "helpers.sass"

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

@@ -1,3 +1,5 @@
+$body-background: $white-ter !default
+
 html
   background-color: $body-background
   font-size: $size-normal
@@ -55,8 +57,11 @@ code
   padding: 1px 2px 2px
 
 hr
-  border-top-color: $border
-  margin: 40px 0
+  background-color: $border
+  border: none
+  display: block
+  height: 1px
+  margin: 20px 0
 
 img
   max-width: 100%

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

@@ -100,5 +100,8 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
 .is-marginless
   margin: 0 !important
 
+.is-paddingless
+  padding: 0 !important
+
 .is-unselectable
-  @extend .unselectable
+  +unselectable

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

@@ -0,0 +1,81 @@
+/*! minireset.css v0.0.2 | MIT License | github.com/jgthms/minireset.css */
+// Blocks
+html,
+body,
+p,
+ol,
+ul,
+li,
+dl,
+dt,
+dd,
+blockquote,
+figure,
+fieldset,
+legend,
+textarea,
+pre,
+iframe,
+hr,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6
+  margin: 0
+  padding: 0
+
+// Headings
+h1,
+h2,
+h3,
+h4,
+h5,
+h6
+  font-size: 100%
+  font-weight: normal
+
+// List
+ul
+  list-style: none
+
+// Form
+button,
+input,
+select,
+textarea
+  margin: 0
+
+// Box sizing
+html
+  box-sizing: border-box
+
+*
+  box-sizing: inherit
+  &:before,
+  &:after
+    box-sizing: inherit
+
+// Media
+img,
+embed,
+object,
+audio,
+video
+  height: auto
+  max-width: 100%
+
+// Iframe
+iframe
+  border: 0
+
+// Table
+table
+  border-collapse: collapse
+  border-spacing: 0
+
+td,
+th
+  padding: 0
+  text-align: left

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

@@ -0,0 +1,13 @@
+@charset "utf-8"
+
+@import "card.sass"
+@import "highlight.sass"
+@import "level.sass"
+@import "media.sass"
+@import "menu.sass"
+@import "message.sass"
+@import "modal.sass"
+@import "nav.sass"
+@import "pagination.sass"
+@import "panel.sass"
+@import "tabs.sass"

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

@@ -33,7 +33,7 @@
     justify-content: flex-end
 
 .level
-  @extend .block
+  +block
   align-items: center
   justify-content: space-between
   code

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

@@ -1,3 +1,9 @@
+.media-number,
+.media-left,
+.media-right
+  flex-grow: 0
+  flex-shrink: 0
+
 .media-number
   background-color: $background
   border-radius: 290486px
@@ -5,15 +11,11 @@
   font-size: $size-medium
   height: 32px
   line-height: 24px
+  margin-right: 10px
   min-width: 32px
   padding: 4px 8px
   text-align: center
   vertical-align: top
-  // Responsiveness
-  +mobile
-    margin-bottom: 10px
-  +tablet
-    margin-right: 10px
 
 .media-left
   margin-right: 10px
@@ -23,6 +25,7 @@
 
 .media-content
   flex-grow: 1
+  flex-shrink: 1
   text-align: left
 
 .media

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

@@ -17,7 +17,7 @@
     border-top: none
 
 .message
-  @extend .block
+  +block
   background-color: $background
   border-radius: $radius
   // Colors

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

@@ -2,7 +2,8 @@
   +overlay
   background-color: rgba($black, 0.86)
 
-.modal-content
+.modal-content,
+.modal-card
   margin: 0 20px
   max-height: calc(100vh - 160px)
   overflow: auto
@@ -15,7 +16,7 @@
     width: 640px
 
 .modal-close
-  @extend .delete
+  +delete
   background: none
   height: 40px
   position: fixed
@@ -24,9 +25,6 @@
   width: 40px
 
 .modal-card
-  @extend .modal-content
-  background-color: $white
-  border-radius: $radius-large
   display: flex
   flex-direction: column
   max-height: calc(100vh - 40px)
@@ -44,21 +42,28 @@
 
 .modal-card-head
   border-bottom: 1px solid $border
+  border-top-left-radius: $radius-large
+  border-top-right-radius: $radius-large
 
 .modal-card-title
   color: $text-strong
   flex-grow: 1
+  flex-shrink: 0
   font-size: $size-4
   line-height: 1
 
 .modal-card-foot
+  border-bottom-left-radius: $radius-large
+  border-bottom-right-radius: $radius-large
   border-top: 1px solid $border
   .button
     &:not(:last-child)
       margin-right: 10px
 
 .modal-card-body
+  background-color: $white
   flex-grow: 1
+  flex-shrink: 1
   overflow: auto
   padding: 20px
 

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

@@ -1,7 +1,9 @@
+$nav-height: 50px !default
+
 // Components
 
 .nav-toggle
-  @extend .hamburger
+  +hamburger($nav-height)
   // Responsiveness
   +tablet
     display: none
@@ -9,10 +11,13 @@
 .nav-item
   align-items: center
   display: flex
+  flex-grow: 0
+  flex-shrink: 0
   justify-content: center
   padding: 10px
   a
     flex-grow: 1
+    flex-shrink: 0
   img
     max-height: 24px
   .button + .button
@@ -28,7 +33,7 @@
 
 .nav-item a,
 a.nav-item
-  color: $text
+  color: $text-light
   &:hover
     color: $link-hover
   // Modifiers
@@ -72,6 +77,7 @@ a.nav-item
   display: flex
   flex-basis: 0
   flex-grow: 1
+  flex-shrink: 0
   justify-content: flex-start
   overflow: hidden
   overflow-x: auto
@@ -91,6 +97,7 @@ a.nav-item
     display: flex
     flex-basis: 0
     flex-grow: 1
+    flex-shrink: 0
     justify-content: flex-end
 
 // Main container

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

@@ -17,6 +17,7 @@
     align-items: center
     display: flex
     flex-grow: 1
+    flex-shrink: 0
     justify-content: center
   // Responsiveness
   +mobile
@@ -27,6 +28,7 @@
         margin-left: 10px
     li
       flex-grow: 1
+      flex-shrink: 0
     ul
       margin-top: 10px
   +tablet

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

@@ -1,6 +1,6 @@
 .tabs
-  @extend .block
-  @extend .unselectable
+  +block
+  +unselectable
   align-items: stretch
   display: flex
   justify-content: space-between
@@ -31,6 +31,7 @@
     border-bottom: 1px solid $border
     display: flex
     flex-grow: 1
+    flex-shrink: 0
     justify-content: flex-start
     &.is-left
       padding-right: 10px
@@ -73,6 +74,7 @@
   &.is-fullwidth
     li
       flex-grow: 1
+      flex-shrink: 0
   &.is-toggle
     a
       border: 1px solid $border

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

@@ -0,0 +1,13 @@
+@charset "utf-8"
+
+@import "box.sass"
+@import "button.sass"
+@import "content.sass"
+@import "form.sass"
+@import "image.sass"
+@import "notification.sass"
+@import "progress.sass"
+@import "table.sass"
+@import "title.sass"
+
+@import "other.sass"

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

@@ -1,5 +1,5 @@
 .box
-  @extend .block
+  +block
   background-color: $white
   border-radius: $radius-large
   box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)

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

@@ -18,7 +18,8 @@
 
 .button
   +control
-  @extend .unselectable
+  +unselectable
+  cursor: pointer
   justify-content: center
   padding-left: 10px
   padding-right: 10px
@@ -51,16 +52,14 @@
     $color-invert: nth($pair, 2)
     &.is-#{$name}
       background-color: $color
-      border-color: transparent
+      border-width: 0
       color: $color-invert
       &:hover,
       &:focus,
       &.is-active
-        background-color: darken($color, 10%)
+        background-color: darken($color, 5%)
         border-color: transparent
         color: $color-invert
-      &:active
-        border-color: transparent
       &.is-inverted
         background-color: $color-invert
         color: $color
@@ -72,6 +71,7 @@
       &.is-outlined
         background-color: transparent
         border-color: $color
+        border-width: 1px
         color: $color
         &:hover,
         &:focus
@@ -80,12 +80,12 @@
           color: $color-invert
   &.is-link
     background-color: transparent
-    border-color: transparent
+    border-width: 0
     color: $text
     text-decoration: underline
     &:hover,
     &:focus
-      background-color: $border
+      background-color: $background
       color: $text-strong
   // Sizes
   &.is-small
@@ -105,6 +105,6 @@
     color: transparent !important
     pointer-events: none
     &:after
-      @extend .loader
+      +loader
       +center(16px)
       position: absolute !important