bulma-rails 0.0.16 → 0.0.17.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 9dbaf4ca3046063bf1bdeac1621a4d346f540440
-  data.tar.gz: dca3ed5c677d15069139ad626316bd9339f4915e
+  metadata.gz: 4d301838a70878cdbe59a68e49a8f94d5d002a72
+  data.tar.gz: f7764db67f2419659742b63b71643603ea19095d
 SHA512:
-  metadata.gz: 93b51adfa84f2056413fb7fe8bf8ae544f1bff5ddcf3d4df446903e76395b7e076de11afdd8e9e53175821b9ed8e35f8e98616a927c531e328814a34953f03c8
-  data.tar.gz: 80ca991c3cfa8d58ba2aae12721c2a7e489440e262e60f2ba850eb7d2e83e5ac987c5f878c68a904081508c5c6144c045c4fc2d5ce313ede4c945b8416ff09de
+  metadata.gz: ee000e39bad1cc3f0d31716e10db577079a54aa64ca5758033658bfe99dba7d4059d30db6731ad7837de34cbed585a6941e2733f3f1f0897d432d1b759641775
+  data.tar.gz: 1ac59afcf75741a40235bdc583cfa8e0e8e6f27f9e2e76181617532eba997c27a121bababfa3bf269fb39c8e4b0cc688c1ca7ee83418ff3812c478d2c2fe9980

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

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

@@ -1,11 +1,5 @@
 // Display
 
-.is-block
-  display: block
-
-.is-inline
-  display: inline
-
 .is-flex
   display: flex
 

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

@@ -1,3 +1,24 @@
+.card-header
+  align-items: stretch
+  box-shadow: 0 1px 2px rgba(black, 0.1)
+  display: flex
+  min-height: 40px
+
+.card-header-title
+  align-items: flex-start
+  color: $text-strong
+  display: flex
+  flex: 1
+  font-weight: bold
+  padding: 10px
+
+.card-header-icon
+  align-items: center
+  cursor: pointer
+  display: flex
+  justify-content: center
+  width: 40px
+
 .card-image
   display: block
   position: relative
@@ -9,8 +30,18 @@
 
 .card-footer
   background: $background
-  display: block
+  border-top: 1px solid $border
+  align-items: stretch
+  display: flex
+
+.card-footer-item
+  align-items: center
+  display: flex
+  flex: 1
+  justify-content: center
   padding: 10px
+  &:not(:last-child)
+    border-right: 1px solid $border
 
 .card
   background: white
@@ -22,3 +53,5 @@
     margin-bottom: 10px
   &.is-rounded
     border-radius: 5px
+  &.is-fullwidth
+    width: 100%

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

@@ -7,4 +7,13 @@
 @import "tabs"
 @import "media"
 @import "menu"
+@import "pagination"
+@import "panel"
 @import "modal"
+
+.box
+  @extend .block
+  background: white
+  border-radius: 5px
+  box-shadow: 0 2px 3px rgba(black, 0.1), 0 0 0 1px rgba(black, 0.1)
+  padding: 20px

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

@@ -1,76 +1,30 @@
-.menu-icon
-  +fa(14px, 16px)
-  color: $text-light
-  float: left
-  margin: 0 4px 0 -2px
-  .fa
-    font-size: inherit
-    line-height: inherit
-
-.menu-heading
-  background: $background
-  border-bottom: 1px solid $border
-  border-radius: 4px 4px 0 0
-  color: $text-strong
-  font-size: $size-medium
-  font-weight: 300
-  padding: 10px
+.menu-nav
+  a
+    display: block
+    padding: 5px 10px
 
 .menu-list
   a
+    border-radius: 2px
     color: $text
+    display: block
+    padding: 5px 10px
     &:hover
+      background: $background
       color: $link
-
-.menu-tabs
-  display: flex
-  font-size: $size-small
-  padding: 5px 10px 0
-  justify-content: center
-  &:not(:last-child)
-    border-bottom: 1px solid $border
-  a
-    border-bottom: 1px solid $border
-    margin-bottom: -1px
-    padding: 5px
     &.is-active
-      border-bottom-color: $link-active-border
-      color: $link-active
+      background: $link
+      color: $link-invert
+  li ul
+    border-left: 1px solid $border
+    margin: 10px
+    padding-left: 10px
 
-.menu-block
-  color: $text-strong
-  display: block
-  line-height: 16px
-  padding: 10px
-  &:not(:last-child)
-    border-bottom: 1px solid $border
-  .checkbox
-    border: 1px solid transparent
-    border-radius: $radius
-    display: block
-    padding: 8px
-    padding-left: 32px
-    input
-      left: 9px
-      top: 9px
-    &:hover
-      border-color: $link
-
-a.menu-block:hover
-  background: $background
-
-.menu-checkbox
-  @extend .checkbox
-  display: block
-  padding: 9px 10px 9px 30px
-  &:not(:last-child)
-    border-bottom: 1px solid $border
-  input
-    left: 8px
-    top: 10px
-
-.menu
-  border: 1px solid $border
-  border-radius: 5px
-  &:not(:last-child)
-    margin-bottom: 20px
+.menu-label
+  color: $text-light
+  font-size: $size-small
+  letter-spacing: 1px
+  margin-bottom: 5px
+  text-transform: uppercase
+  &:not(:first-child)
+    margin-top: 20px

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

@@ -0,0 +1,39 @@
+.pagination
+  align-items: center
+  display: flex
+  justify-content: center
+  text-align: center
+  a
+    @extend .button
+    display: block
+    min-width: 32px
+    padding: 3px 8px
+    &.is-active
+      background: $link
+      border-color: $link
+      color: $link-invert
+  span
+    color: $text-light
+    display: block
+    margin: 0 4px
+  li
+    margin: 0 2px
+  ul
+    align-items: center
+    display: flex
+    flex: 1
+    justify-content: center
+  +mobile
+    flex-wrap: wrap
+    & > a
+      width: calc(50% - 5px)
+      &:not(:first-child)
+        margin-left: 10px
+    li
+      flex: 1
+    ul
+      margin-top: 10px
+  +tablet
+    & > a
+      &:not(:first-child)
+        order: 1

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

@@ -0,0 +1,76 @@
+.panel-icon
+  +fa(14px, 16px)
+  color: $text-light
+  float: left
+  margin: 0 4px 0 -2px
+  .fa
+    font-size: inherit
+    line-height: inherit
+
+.panel-heading
+  background: $background
+  border-bottom: 1px solid $border
+  border-radius: 4px 4px 0 0
+  color: $text-strong
+  font-size: $size-medium
+  font-weight: 300
+  padding: 10px
+
+.panel-list
+  a
+    color: $text
+    &:hover
+      color: $link
+
+.panel-tabs
+  display: flex
+  font-size: $size-small
+  padding: 5px 10px 0
+  justify-content: center
+  &:not(:last-child)
+    border-bottom: 1px solid $border
+  a
+    border-bottom: 1px solid $border
+    margin-bottom: -1px
+    padding: 5px
+    &.is-active
+      border-bottom-color: $link-active-border
+      color: $link-active
+
+.panel-block
+  color: $text-strong
+  display: block
+  line-height: 16px
+  padding: 10px
+  &:not(:last-child)
+    border-bottom: 1px solid $border
+  .checkbox
+    border: 1px solid transparent
+    border-radius: $radius
+    display: block
+    padding: 8px
+    padding-left: 32px
+    input
+      left: 9px
+      top: 9px
+    &:hover
+      border-color: $link
+
+a.panel-block:hover
+  background: $background
+
+.panel-checkbox
+  @extend .checkbox
+  display: block
+  padding: 9px 10px 9px 30px
+  &:not(:last-child)
+    border-bottom: 1px solid $border
+  input
+    left: 8px
+    top: 10px
+
+.panel
+  border: 1px solid $border
+  border-radius: 5px
+  &:not(:last-child)
+    margin-bottom: 20px

data/app/assets/stylesheets/bulma/elements/buttons.sass

@@ -16,6 +16,7 @@
 .button
   +control
   +unselectable
+  justify-content: center
   padding: 3px 10px
   text-align: center
   white-space: nowrap
@@ -26,10 +27,11 @@
     font-size: $size-small
     line-height: 1
     margin-top: 5px
-  .fa
-    line-height: 24px
-    margin: 0 -2px
-    width: 24px
+  .icon
+    &:first-child
+      margin-right: 4px
+    &:last-child
+      margin-left: 4px
   &:hover
     color: $control-hover
   &:active
@@ -69,6 +71,14 @@
             background: rgba(black, 0.05)
       &.is-loading:after
         border-color: transparent transparent $color-invert $color-invert !important
+  &.is-link
+    border-color: transparent
+    color: $text
+    text-decoration: underline
+    &:hover,
+    &:focus
+      background: $border
+      color: $text-strong
   &.is-small
     +button-small
   &.is-medium
@@ -91,12 +101,3 @@
   &[disabled]
     opacity: 0.5
     pointer-events: none
-  +tablet
-    small
-      color: $text
-      left: 0
-      margin-top: 10px
-      position: absolute
-      top: 100%
-      width: 100%
-

data/app/assets/stylesheets/bulma/elements/controls.sass

@@ -1,11 +1,12 @@
 =control
   -moz-appearance: none
   -webkit-appearance: none
+  align-items: center
   background: $control-background
   border: 1px solid $control-border
   border-radius: $radius
   color: $control
-  display: inline-block
+  display: inline-flex
   font-size: $size-normal
   height: 32px
   line-height: 24px
@@ -31,10 +32,8 @@
   +control
   @each $name, $pair in $colors
     $color: nth($pair, 1)
-    $color-invert: nth($pair, 2)
     &.is-#{$name}
       border-color: $color
-      color: $color
 
 =control-small
   border-radius: 2px
@@ -172,6 +171,10 @@
       border-color: $control-hover-border
     &::ms-expand
       display: none
+  &.is-fullwidth
+    width: 100%
+    select
+      width: 100%
   &:after
     +arrow($link)
     margin-top: -6px
@@ -184,9 +187,30 @@
 .label
   color: $text-strong
   display: block
+  font-weight: bold
   &:not(:last-child)
     margin-bottom: 5px
 
+.help
+  display: block
+  font-size: $size-small
+  margin-top: 5px
+  @each $name, $pair in $colors
+    $color: nth($pair, 1)
+    &.is-#{$name}
+      color: $color
+
+// Containers
+
+.control-label
+  +mobile
+    margin-bottom: 5px
+  +tablet
+    flex: 1
+    margin-right: 20px
+    padding-top: 7px
+    text-align: right
+
 .control
   position: relative
   text-align: left
@@ -200,27 +224,26 @@
     margin-bottom: 10px
   &.has-icon
     & > .fa
-      +fa(14px, 20px)
+      +fa(14px, 16px)
       color: $text-light
-      left: 6px
       pointer-events: none
       position: absolute
-      top: 6px
+      top: 8px
       z-index: 4
     .input
-      padding-left: 32px
       &:focus + .fa
-        color: $control-active
-  &.is-horizontal
-    display: flex
-    & > .button,
-    & > .input,
-    & > .select
-      &:not(:last-child)
-        margin-right: 10px
-    & > .input
-      flex: 1
-  &.is-grouped
+        color: $text-strong
+    &:not(.has-icon-right)
+      & > .fa
+        left: 8px
+      .input
+        padding-left: 32px
+  &.has-icon-right
+    & > .fa
+      right: 8px
+    .input
+      padding-right: 32px
+  &.has-addons
     display: flex
     .input,
     .button,
@@ -240,3 +263,18 @@
         border-radius: 0 $radius $radius 0
     &.is-centered
       justify-content: center
+  &.is-grouped
+    display: flex
+    & > .button,
+    & > .input,
+    & > .select
+      &:not(:last-child)
+        margin-right: 10px
+    & > .input
+      flex: 1
+  &.is-horizontal
+    +tablet
+      display: flex
+      & > .control
+        display: flex
+        flex: 5

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

@@ -6,13 +6,7 @@
 @import "images"
 @import "messages"
 @import "notifications"
-
-.box
-  @extend .block
-  background: white
-  border-radius: 5px
-  box-shadow: 0 2px 3px rgba(black, 0.1), 0 0 0 1px rgba(black, 0.1)
-  padding: 20px
+@import "progress"
 
 .delete
   +unselectable
@@ -61,7 +55,7 @@
     font-size: inherit
     line-height: inherit
   &.is-small
-    +fa(14px, 20px)
+    +fa(14px, 16px)
   &.is-medium
     +fa(28px, 32px)
   &.is-large

data/app/assets/stylesheets/bulma/elements/progress.sass

@@ -0,0 +1,30 @@
+.progress
+  -moz-appearance: none
+  -webkit-appearance: none
+  @extend .block
+  border: none
+  border-radius: 290486px
+  display: block
+  height: 12px
+  overflow: hidden
+  padding: 0
+  width: 100%
+  &::-webkit-progress-bar
+    background: $border
+  &::-webkit-progress-value
+    background: $text
+  &::-moz-progress-bar
+    background: $text
+  &.is-small
+    height: 8px
+  &.is-medium
+    height: 16px
+  &.is-large
+    height: 20px
+  @each $name, $pair in $colors
+    $color: nth($pair, 1)
+    &.is-#{$name}
+      &::-webkit-progress-value
+        background: $color
+      &::-moz-progress-bar
+        background: $color

data/app/assets/stylesheets/bulma/layout/header.sass

@@ -35,12 +35,7 @@
   img
     max-height: 24px
   a
-    color: $text
-    flex: 1
-    &:hover
-      color: $link-hover
-    &.is-active
-      color: $link-active
+    flex-grow: 1
   .fa
     font-size: 21px
     line-height: 24px
@@ -49,6 +44,14 @@
   +mobile
     text-align: left
 
+.header-item a,
+a.header-item
+  color: $text
+  &:hover
+    color: $link-hover
+  &.is-active
+    color: $link-active
+
 .header-icon
   +fa(14px, 24px)
   color: $text
@@ -143,4 +146,3 @@
     &:hover,
     &.is-active
       border-bottom-width: 2px
-

data/app/assets/stylesheets/bulma/layout/hero.sass

@@ -64,12 +64,12 @@
       .header .container
         box-shadow: 0 1px 0 rgba($color-invert, 0.2)
       .header-icon,
+      a.header-item,
       .header-item > a:not(.button)
-        color: $color-invert
-        opacity: 0.5
+        color: rgba($color-invert, 0.5)
         &:hover,
         &.is-active
-          opacity: 1
+          color: $color-invert
       .tabs
         a
           color: $color-invert

data/bulma-rails.gemspec

@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |gem|
   gem.name          = 'bulma-rails'
-  gem.version       = '0.0.16'
+  gem.version       = '0.0.17.1'
   gem.date          = Date.today
   gem.authors       = ["Joshua Jansen"]
   gem.email         = ["joshuajansen88@gmail.com"]

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: bulma-rails
 version: !ruby/object:Gem::Version
-  version: 0.0.16
+  version: 0.0.17.1
 platform: ruby
 authors:
 - Joshua Jansen
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-03-01 00:00:00.000000000 Z
+date: 2016-03-30 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -46,6 +46,8 @@ files:
 - app/assets/stylesheets/bulma/components/menu.sass
 - app/assets/stylesheets/bulma/components/modal.sass
 - app/assets/stylesheets/bulma/components/navbar.sass
+- app/assets/stylesheets/bulma/components/pagination.sass
+- app/assets/stylesheets/bulma/components/panel.sass
 - app/assets/stylesheets/bulma/components/table.sass
 - app/assets/stylesheets/bulma/components/tabs.sass
 - app/assets/stylesheets/bulma/config/generated-variables.sass
@@ -56,6 +58,7 @@ files:
 - app/assets/stylesheets/bulma/elements/images.sass
 - app/assets/stylesheets/bulma/elements/messages.sass
 - app/assets/stylesheets/bulma/elements/notifications.sass
+- app/assets/stylesheets/bulma/elements/progress.sass
 - app/assets/stylesheets/bulma/elements/titles.sass
 - app/assets/stylesheets/bulma/layout/footer.sass
 - app/assets/stylesheets/bulma/layout/header.sass