bulma-rails 0.0.24 → 0.0.26

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: a8689a719d4414df33f407969a8b0a34642dbb8e
-  data.tar.gz: 1a020eebc90466db2d4fca369ceb5d1f6e92c1b4
+  metadata.gz: ed3444a73e5a373d05cdf16d22f6aa5a1b7b3151
+  data.tar.gz: f15af369eae758a17b5674aee5f5b3221ceceaf9
 SHA512:
-  metadata.gz: 88a24cad2e0f639944af056c4389ef765f5019a61b7c43d71cd074b7b0673e28a376e23f13063abdb0c771684fca83381e599c5436374ae647450fd758e1e6d6
-  data.tar.gz: 460123e1dfe947ea487a599b09baa8d03daf50baef31084a804f8d9874cf993f3c76d19dc7f0ea337f77f449e855881d2b5797a241795d9330fc2cceb1e723b8
+  metadata.gz: d5a93527343b77b5c9a9bec48d6f1ea93dff034ccfe8ea92bb5ffa0efbb4e8c1d8b4c40c04d1d9caf698e344a7f103f24a6250b24e2c4f735902eb25f5f1d664
+  data.tar.gz: aea072fc7a5133b09c68aa59edbef30b74fa8df07790f6f897d8ddab4d766e5f80aeea776c3c4e521ccffdae19a3c691f947f26a95ca13f53a72f1451946726e

data/.gitignore

@@ -1,2 +1,2 @@
-
+.bundle
 *.gem

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.0.24"
+    gem "bulma-rails", "~> 0.0.26"
 
 And then execute:
 
@@ -22,7 +22,7 @@ To import all assets in your Rails project, add the following line to your appli
 ```
 
 For information about customizing Bulma,
-see: [http://bulma.io/documentation/overview/](http://bulma.io/documentation/overview/)
+see: [http://bulma.io/documentation/overview/start/](http://bulma.io/documentation/overview/start/)
 
 ## Contributing
 

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

@@ -11,6 +11,8 @@
     &.is-fluid
       margin: 0 20px
       max-width: none
+  +widescreen
+    max-width: 1200px
 
 .fa
   font-size: 21px

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

@@ -7,9 +7,6 @@ html
   overflow-x: hidden
   overflow-y: scroll
   text-rendering: optimizeLegibility
-  // Modifiers
-  &.has-modal
-    overflow: hidden
 
 article,
 aside,
@@ -71,6 +68,10 @@ input[type="radio"]
 small
   font-size: $size-small
 
+span
+  font-style: inherit
+  font-weight: inherit
+
 strong
   color: $text-strong
   font-weight: $weight-bold

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

@@ -1,7 +1,31 @@
 // Display
 
-.is-flex
-  display: flex
+$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
 
@@ -14,6 +38,11 @@
 .is-pulled-right
   float: right
 
+// Overflow
+
+.is-clipped
+  overflow: hidden !important
+
 // Overlay
 
 .is-overlay
@@ -43,6 +72,10 @@
   +tablet
     display: none !important
 
+.is-hidden-tablet-only
+  +tablet-only
+    display: none !important
+
 .is-hidden-touch
   +touch
     display: none !important
@@ -51,6 +84,14 @@
   +desktop
     display: none !important
 
+.is-hidden-desktop-only
+  +desktop-only
+    display: none !important
+
+.is-hidden-widescreen
+  +widescreen
+    display: none !important
+
 // Other
 
 .is-disabled
@@ -60,4 +101,4 @@
   margin: 0 !important
 
 .is-unselectable
-  +unselectable
+  @extend .unselectable

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

@@ -1,6 +1,6 @@
 .card-header
   align-items: stretch
-  box-shadow: 0 1px 2px rgba(black, 0.1)
+  box-shadow: 0 1px 2px rgba($black, 0.1)
   display: flex
   min-height: 40px
 
@@ -29,7 +29,6 @@
     margin-top: -20px
 
 .card-footer
-  background: $background
   border-top: 1px solid $border
   align-items: stretch
   display: flex
@@ -44,8 +43,8 @@
     border-right: 1px solid $border
 
 .card
-  background: white
-  box-shadow: 0 2px 3px rgba(black, 0.1), 0 0 0 1px rgba(black, 0.1)
+  background: $white
+  box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
   color: $text
   max-width: 100%
   position: relative

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

@@ -3,11 +3,12 @@
 @import "card"
 @import "grid"
 @import "highlight"
+@import "level"
 @import "media"
 @import "menu"
 @import "message"
 @import "modal"
-@import "navbar"
+@import "nav"
 @import "pagination"
 @import "panel"
 @import "tabs"

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

@@ -211,19 +211,6 @@
     &.is-desktop
       display: flex
 
-.tilefiejsoif
-  flex: 1
-  // Modifiers
-  &.is-parent
-    padding: 10px
-  // Responsiveness
-  +tablet
-    // Sizes
-    @for $i from 1 through 12
-      &.is-#{$i}
-        flex: none
-        width: ($i / 12) * 100%
-
 .tile
   align-items: stretch
   flex: 1

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

@@ -0,0 +1,57 @@
+.level-item
+  .title,
+  .subtitle
+    margin-bottom: 0
+  // Responsiveness
+  +mobile
+    &:not(:last-child)
+      margin-bottom: 10px
+
+.level-left,
+.level-right
+  .level-item
+    &:not(:last-child)
+      margin-right: 10px
+    // Modifiers
+    &.is-flexible
+      flex: 1
+
+.level-left
+  // Responsiveness
+  +mobile
+    & + .level-right
+      margin-top: 20px
+  +tablet
+    align-items: center
+    display: flex
+
+.level-right
+  // Responsiveness
+  +tablet
+    align-items: center
+    display: flex
+    justify-content: flex-end
+
+.level
+  @extend .block
+  align-items: center
+  justify-content: space-between
+  code
+    border-radius: $radius
+  img
+    display: inline-block
+    vertical-align: top
+  // Modifiers
+  &.is-mobile
+    display: flex
+    & > .level-item
+      &:not(:last-child)
+        margin-bottom: 0
+      &:not(.is-narrow)
+        flex: 1
+  // Responsiveness
+  +tablet
+    display: flex
+    & > .level-item
+      &:not(.is-narrow)
+        flex: 1

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

@@ -24,7 +24,7 @@
   @each $name, $pair in $colors
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
-    $lightning: (100% - lightness($color)) - 4%
+    $lightning: max((100% - lightness($color)) - 4%, 0%)
     $darkness: max(lightness($color) - 10%, lightness($color))
     &.is-#{$name}
       background: lighten($color, $lightning)

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

@@ -1,6 +1,6 @@
 .modal-background
   +overlay
-  background: rgba(black, 0.86)
+  background: rgba($black, 0.86)
 
 .modal-content
   margin: 0 20px
@@ -23,6 +23,45 @@
   top: 20px
   width: 40px
 
+.modal-card
+  @extend .modal-content
+  background: $white
+  border-radius: 5px
+  display: flex
+  flex-direction: column
+  max-height: calc(100vh - 40px)
+  overflow: hidden
+
+.modal-card-head,
+.modal-card-foot
+  align-items: center
+  background: $background
+  display: flex
+  flex-shrink: 0
+  justify-content: flex-start
+  padding: 20px
+  position: relative
+
+.modal-card-head
+  border-bottom: 1px solid $border
+
+.modal-card-title
+  color: $text-strong
+  flex: 1
+  font-size: $size-4
+  line-height: 1
+
+.modal-card-foot
+  border-top: 1px solid $border
+  .button
+    &:not(:last-child)
+      margin-right: 10px
+
+.modal-card-body
+  flex: 1
+  overflow: auto
+  padding: 20px
+
 .modal
   +overlay
   align-items: center

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

@@ -0,0 +1,120 @@
+// Components
+
+.nav-toggle
+  @extend .hamburger
+  // Responsiveness
+  +tablet
+    display: none
+
+.nav-item
+  align-items: center
+  display: flex
+  justify-content: center
+  padding: 10px
+  a
+    flex-grow: 1
+  img
+    max-height: 24px
+  .button + .button
+    margin-left: 10px
+  .tag
+    &:first-child
+      margin-right: 5px
+    &:last-child
+      margin-left: 5px
+  // Responsiveness
+  +mobile
+    justify-content: flex-start
+
+.nav-item a,
+a.nav-item
+  color: $text
+  &:hover
+    color: $link-hover
+  // Modifiers
+  &.is-active
+    color: $link-active
+  &.is-tab
+    border-bottom: 1px solid transparent
+    border-top: 1px solid transparent
+    padding-left: 12px
+    padding-right: 12px
+    &:hover
+      border-bottom: 1px solid $link
+      border-top: 1px solid transparent
+    &.is-active
+      border-bottom: 3px solid $link
+      border-top: 3px solid transparent
+      color: $link
+
+// Containers
+
+.nav-menu
+  // Responsiveness
+  +mobile
+    background: $white
+    box-shadow: 0 4px 7px rgba($black, 0.1)
+    left: 0
+    display: none
+    right: 0
+    top: 100%
+    position: absolute
+    .nav-item
+      border-top: 1px solid rgba($border, 0.5)
+      padding: 10px
+    &.is-active
+      display: block
+
+.nav-left
+  align-items: stretch
+  display: flex
+  flex: 1
+  justify-content: flex-start
+  overflow: hidden
+  overflow-x: auto
+  white-space: nowrap
+
+.nav-center
+  align-items: stretch
+  display: flex
+  justify-content: center
+
+.nav-right
+  // Responsiveness
+  +tablet
+    align-items: stretch
+    display: flex
+    flex: 1
+    justify-content: flex-end
+
+// Main container
+
+.nav
+  align-items: stretch
+  background: $white
+  display: flex
+  min-height: $nav-height
+  position: relative
+  text-align: center
+  z-index: 2
+  & > .container
+    align-items: stretch
+    display: flex
+    min-height: $nav-height
+    width: 100%
+    & > .nav-left
+      & > .nav-item:first-child:not(.is-tab)
+        padding-left: 0
+    & > .nav-right
+      & > .nav-item:last-child:not(.is-tab)
+        padding-right: 0
+  .container > &
+    & > .nav-left
+      & > .nav-item:first-child:not(.is-tab)
+        padding-left: 0
+    & > .nav-right
+      & > .nav-item:last-child:not(.is-tab)
+        padding-right: 0
+  // Modifiers
+  &.has-shadow
+    box-shadow: 0 2px 3px rgba($black, 0.1)