bulma-rails 0.0.17.1 → 0.0.18

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

@@ -8,6 +8,7 @@
   overflow: auto
   position: relative
   width: 100%
+  // Responsiveness
   +tablet
     margin: 0 auto
     max-height: calc(100vh - 40px)
@@ -30,5 +31,6 @@
   overflow: hidden
   position: fixed
   z-index: 1986
+  // Modifiers
   &.is-active
     display: flex

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

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

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

@@ -8,6 +8,7 @@
     display: block
     min-width: 32px
     padding: 3px 8px
+    // Modifiers
     &.is-active
       background: $link
       border-color: $link
@@ -23,6 +24,7 @@
     display: flex
     flex: 1
     justify-content: center
+  // Responsiveness
   +mobile
     flex-wrap: wrap
     & > a

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

@@ -27,47 +27,26 @@
   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
+    // Modifiers
     &.is-active
       border-bottom-color: $link-active-border
       color: $link-active
+  &:not(:last-child)
+    border-bottom: 1px solid $border
 
 .panel-block
   color: $text-strong
   display: block
   line-height: 16px
   padding: 10px
+  &:hover
+    background: $background
   &: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

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

@@ -3,15 +3,24 @@
   color: $text-strong
   margin-bottom: 20px
   width: 100%
-  th,
-  td
+  td,
+  th
     border: 1px solid $border
     border-width: 0 0 1px
     padding: 8px 10px
     vertical-align: top
-    &.table-narrow
+    // Modifiers
+    &.table-icon
+      padding: 5px
+      text-align: center
       white-space: nowrap
       width: 1%
+      .fa
+        +fa(21px, 24px)
+      &.table-link
+        padding: 0
+        & > a
+          padding: 5px
     &.table-link
       padding: 0
       & > a
@@ -20,60 +29,61 @@
         &:hover
           background: $link
           color: $link-invert
-    &.table-icon
-      padding: 5px
-      text-align: center
+    &.table-narrow
       white-space: nowrap
       width: 1%
-      .fa
-        +fa(21px, 24px)
-      &.table-link
-        padding: 0
-        & > a
-          padding: 5px
   th
     color: $text-strong
     text-align: left
   tr
     &:hover
-      background: rgba($background, 0.5)
+      background: $background
       color: $text-strong
-    &:last-child td
-      border-bottom-width: 0
   thead
-    th,
-    td
+    td,
+    th
       border-width: 0 0 2px
       color: $text-light
+  tbody
+    tr
+      &:last-child
+        td,
+        th
+          border-bottom-width: 0
   tfoot
-    th,
-    td
+    td,
+    th
       border-width: 2px 0 0
       color: $text-light
+  // Modifiers
   &.is-bordered
-    th,
-    td
+    td,
+    th
       border-width: 1px
     tr
-      &:last-child td
-        border-bottom-width: 1px
+      &:last-child
+        td,
+        th
+          border-bottom-width: 1px
   &.is-narrow
-    th,
-    td
+    td,
+    th
       padding: 5px 10px
-      &.table-link
-        padding: 0
-        & > a
-          padding: 5px 10px
+      // Modifiers
       &.table-icon
         padding: 2px
         &.table-link
           padding: 0
           & > a
             padding: 2px
+      &.table-link
+        padding: 0
+        & > a
+          padding: 5px 10px
   &.is-striped
     tbody
-      tr:nth-child(2n)
-        background: rgba($background, 0.5)
-        &:hover
+      tr
+        &:nth-child(2n)
           background: $background
+          &:hover
+            background: $border

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

@@ -4,11 +4,6 @@
   overflow: hidden
   overflow-x: auto
   white-space: nowrap
-  .fa
-    font-size: 14px
-    line-height: 20px
-    margin: 2px -2px
-    width: 20px
   a
     border-bottom: 1px solid $border
     color: $text
@@ -24,6 +19,7 @@
     vertical-align: top
     & + li
       margin-left: 20px
+    // Modifiers
     &.is-active
       a
         border-bottom-color: $link
@@ -31,18 +27,12 @@
   ul
     border-bottom: 1px solid $border
     display: flex
-  &.is-centered
-    a
-      padding: 5px 10px
-    li
-      & + li
-        margin-left: 0
-    ul
-      justify-content: center
-      text-align: center
-  &.is-right
-    ul
-      justify-content: flex-end
+  .fa
+    font-size: 14px
+    line-height: 20px
+    margin: 2px -2px
+    width: 20px
+  // Modifiers
   &.is-boxed
     a
       border: 1px solid transparent
@@ -54,16 +44,38 @@
     li
       & + li
         margin-left: 5px
+      // Modifiers
       &.is-active
         a
           background: white
           border-color: $border
           border-bottom-color: transparent
+    // Modifiers
     &.is-centered
       li
         &,
         & + li
           margin: 0 2px
+  &.is-centered
+    a
+      padding: 5px 10px
+    li
+      & + li
+        margin-left: 0
+    ul
+      justify-content: center
+      text-align: center
+  &.is-fullwidth
+    li
+      flex: 1
+      & + li
+        margin-left: 0
+    ul
+      justify-content: center
+      text-align: center
+  &.is-right
+    ul
+      justify-content: flex-end
   &.is-toggle
     a
       border: 1px solid $border
@@ -81,6 +93,7 @@
         border-radius: $radius 0 0 $radius
       &:last-child a
         border-radius: 0 $radius $radius 0
+      // Modifiers
       &.is-active
         a
           background: $primary
@@ -89,12 +102,3 @@
           z-index: 1
     ul
       border-bottom: none
-  &.is-fullwidth
-    +tablet
-      li
-        flex: 1
-        & + li
-          margin-left: 0
-      ul
-        justify-content: center
-        text-align: center

data/app/assets/stylesheets/bulma/config/generated-variables.sass

@@ -67,6 +67,7 @@ $control-active-border: $link
 // Typography
 
 $family-primary: $family-sans-serif
+$family-code: $family-monospace
 
 $size-small: $size-7
 $size-normal: $size-6

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

@@ -27,15 +27,19 @@
     font-size: $size-small
     line-height: 1
     margin-top: 5px
-  .icon
+  .icon,
+  .tag
     &:first-child
+      margin-left: -2px
       margin-right: 4px
     &:last-child
       margin-left: 4px
+      margin-right: -2px
   &:hover
     color: $control-hover
   &:active
     box-shadow: inset 0 1px 2px rgba(black, 0.2)
+  // Colors
   @each $name, $pair in $colors
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
@@ -50,14 +54,6 @@
         color: $color-invert
       &:active
         border-color: transparent
-      &.is-outlined
-        background: transparent
-        border-color: $color
-        color: $color
-        &:hover,
-        &:focus
-          border-color: darken($color, 10%)
-          color: darken($color, 10%)
       &.is-inverted
         background: $color-invert
         color: $color
@@ -69,8 +65,19 @@
           color: $color-invert
           &:hover
             background: rgba(black, 0.05)
-      &.is-loading:after
-        border-color: transparent transparent $color-invert $color-invert !important
+            border-color: $color-invert
+            color: $color-invert
+      &.is-loading
+        &:after
+          border-color: transparent transparent $color-invert $color-invert !important
+      &.is-outlined
+        background: transparent
+        border-color: $color
+        color: $color
+        &:hover,
+        &:focus
+          border-color: darken($color, 10%)
+          color: darken($color, 10%)
   &.is-link
     border-color: transparent
     color: $text
@@ -79,17 +86,22 @@
     &:focus
       background: $border
       color: $text-strong
+  // Sizes
   &.is-small
     +button-small
   &.is-medium
     +button-medium
   &.is-large
     +button-large
+  // Modifiers
+  &[disabled],
+  &.is-disabled
+    opacity: 0.5
+  &.is-flexible
+    height: auto
   &.is-fullwidth
     display: block
     width: 100%
-  &.is-flexible
-    height: auto
   &.is-loading
     color: transparent
     pointer-events: none
@@ -97,7 +109,3 @@
       @extend .loader
       +center(16px)
       position: absolute !important
-  &.is-disabled,
-  &[disabled]
-    opacity: 0.5
-    pointer-events: none