bulma-rails 0.8.0 → 0.9.2

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

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 $navbar-background-color: $scheme-main !default
 $navbar-box-shadow-size: 0 2px 0 0 !default
 $navbar-box-shadow-color: $background !default
@@ -32,7 +34,7 @@ $navbar-dropdown-radius: $radius-large !default
 $navbar-dropdown-z: 20 !default
 
 $navbar-dropdown-boxed-radius: $radius-large !default
-$navbar-dropdown-boxed-shadow: 0 8px 8px rgba($scheme-invert, 0.1), 0 0 0 1px rgba($scheme-invert, 0.1) !default
+$navbar-dropdown-boxed-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1), 0 0 0 1px bulmaRgba($scheme-invert, 0.1) !default
 
 $navbar-dropdown-item-hover-color: $scheme-invert !default
 $navbar-dropdown-item-hover-background-color: $background !default
@@ -46,6 +48,8 @@ $navbar-bottom-box-shadow-size: 0 -2px 0 0 !default
 
 $navbar-breakpoint: $desktop !default
 
+$navbar-colors: $colors !default
+
 =navbar-fixed
   left: 0
   position: fixed
@@ -57,7 +61,7 @@ $navbar-breakpoint: $desktop !default
   min-height: $navbar-height
   position: relative
   z-index: $navbar-z
-  @each $name, $pair in $colors
+  @each $name, $pair in $navbar-colors
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
     &.is-#{$name}
@@ -72,7 +76,7 @@ $navbar-breakpoint: $desktop !default
           &:focus,
           &:hover,
           &.is-active
-            background-color: darken($color, 5%)
+            background-color: bulmaDarken($color, 5%)
             color: $color-invert
         .navbar-link
           &::after
@@ -90,7 +94,7 @@ $navbar-breakpoint: $desktop !default
             &:focus,
             &:hover,
             &.is-active
-              background-color: darken($color, 5%)
+              background-color: bulmaDarken($color, 5%)
               color: $color-invert
           .navbar-link
             &::after
@@ -98,7 +102,7 @@ $navbar-breakpoint: $desktop !default
         .navbar-item.has-dropdown:focus .navbar-link,
         .navbar-item.has-dropdown:hover .navbar-link,
         .navbar-item.has-dropdown.is-active .navbar-link
-          background-color: darken($color, 5%)
+          background-color: bulmaDarken($color, 5%)
           color: $color-invert
         .navbar-dropdown
           a.navbar-item
@@ -151,7 +155,7 @@ body
 .navbar-burger
   color: $navbar-burger-color
   +hamburger($navbar-height)
-  margin-left: auto
+  +ltr-property("margin", auto, false)
 
 .navbar-menu
   display: none
@@ -179,7 +183,6 @@ a.navbar-item,
     color: $navbar-item-hover-color
 
 .navbar-item
-  display: block
   flex-grow: 0
   flex-shrink: 0
   img
@@ -210,12 +213,12 @@ a.navbar-item,
   flex-shrink: 1
 
 .navbar-link:not(.is-arrowless)
-  padding-right: 2.5em
+  +ltr-property("padding", 2.5em)
   &::after
     @extend %arrow
     border-color: $navbar-dropdown-arrow
     margin-top: -0.375em
-    right: 1.125em
+    +ltr-position(1.125em)
 
 .navbar-dropdown
   font-size: 0.875rem
@@ -245,7 +248,7 @@ a.navbar-item,
       display: none
   .navbar-menu
     background-color: $navbar-background-color
-    box-shadow: 0 8px 16px rgba($scheme-invert, 0.1)
+    box-shadow: 0 8px 16px bulmaRgba($scheme-invert, 0.1)
     padding: 0.5rem 0
     &.is-active
       display: block
@@ -257,7 +260,7 @@ a.navbar-item,
     &.is-fixed-bottom-touch
       bottom: 0
       &.has-shadow
-        box-shadow: 0 -2px 3px rgba($scheme-invert, 0.1)
+        box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1)
     &.is-fixed-top-touch
       top: 0
     &.is-fixed-top,
@@ -320,7 +323,6 @@ a.navbar-item,
     align-items: center
     display: flex
   .navbar-item
-    display: flex
     &.has-dropdown
       align-items: stretch
     &.has-dropdown-up
@@ -331,7 +333,7 @@ a.navbar-item,
         border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0
         border-top: none
         bottom: 100%
-        box-shadow: 0 -8px 8px rgba($scheme-invert, 0.1)
+        box-shadow: 0 -8px 8px bulmaRgba($scheme-invert, 0.1)
         top: auto
     &.is-active,
     &.is-hoverable:focus,
@@ -349,19 +351,19 @@ a.navbar-item,
     flex-shrink: 0
   .navbar-start
     justify-content: flex-start
-    margin-right: auto
+    +ltr-property("margin", auto)
   .navbar-end
     justify-content: flex-end
-    margin-left: auto
+    +ltr-property("margin", auto, false)
   .navbar-dropdown
     background-color: $navbar-dropdown-background-color
     border-bottom-left-radius: $navbar-dropdown-radius
     border-bottom-right-radius: $navbar-dropdown-radius
     border-top: $navbar-dropdown-border-top
-    box-shadow: 0 8px 8px rgba($scheme-invert, 0.1)
+    box-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1)
     display: none
     font-size: 0.875rem
-    left: 0
+    +ltr-position(0, false)
     min-width: 100%
     position: absolute
     top: 100%
@@ -370,7 +372,7 @@ a.navbar-item,
       padding: 0.375rem 1rem
       white-space: nowrap
     a.navbar-item
-      padding-right: 3rem
+      +ltr-property("padding", 3rem)
       &:focus,
       &:hover
         background-color: $navbar-dropdown-item-hover-background-color
@@ -398,9 +400,9 @@ a.navbar-item,
   .navbar > .container,
   .container > .navbar
     .navbar-brand
-      margin-left: -.75rem
+      +ltr-property("margin", -.75rem, false)
     .navbar-menu
-      margin-right: -.75rem
+      +ltr-property("margin", -.75rem)
   // Fixed navbar
   .navbar
     &.is-fixed-bottom-desktop,
@@ -409,7 +411,7 @@ a.navbar-item,
     &.is-fixed-bottom-desktop
       bottom: 0
       &.has-shadow
-        box-shadow: 0 -2px 3px rgba($scheme-invert, 0.1)
+        box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1)
     &.is-fixed-top-desktop
       top: 0
   html,

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

@@ -1,3 +1,6 @@
+@import "../utilities/controls"
+@import "../utilities/mixins"
+
 $pagination-color: $text-strong !default
 $pagination-border-color: $border !default
 $pagination-margin: -0.25rem !default
@@ -8,6 +11,9 @@ $pagination-item-margin: 0.25rem !default
 $pagination-item-padding-left: 0.5em !default
 $pagination-item-padding-right: 0.5em !default
 
+$pagination-nav-padding-left: 0.75em !default
+$pagination-nav-padding-right: 0.75em !default
+
 $pagination-hover-color: $link-hover !default
 $pagination-hover-border-color: $link-hover-border !default
 
@@ -27,7 +33,7 @@ $pagination-current-border-color: $link !default
 
 $pagination-ellipsis-color: $grey-light !default
 
-$pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2)
+$pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2) !default
 
 .pagination
   @extend %block
@@ -91,8 +97,8 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2)
 
 .pagination-previous,
 .pagination-next
-  padding-left: 0.75em
-  padding-right: 0.75em
+  padding-left: $pagination-nav-padding-left
+  padding-right: $pagination-nav-padding-right
   white-space: nowrap
 
 .pagination-link
@@ -107,6 +113,8 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2)
 
 .pagination-list
   flex-wrap: wrap
+  li
+    list-style: none
 
 +mobile
   .pagination

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

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 $panel-margin: $block-spacing !default
 $panel-item-border: 1px solid $border-light !default
 $panel-radius: $radius-large !default
@@ -88,7 +90,7 @@ $panel-colors: $colors !default
   justify-content: flex-start
   padding: 0.5em 0.75em
   input[type="checkbox"]
-    margin-right: 0.75em
+    +ltr-property("margin", 0.75em)
   & > .control
     flex-grow: 1
     flex-shrink: 1
@@ -113,7 +115,7 @@ label.panel-block
 .panel-icon
   +fa(14px, 1em)
   color: $panel-icon-color
-  margin-right: 0.75em
+  +ltr-property("margin", 0.75em)
   .fa
     font-size: inherit
     line-height: inherit

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

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 $tabs-border-bottom-color: $border !default
 $tabs-border-bottom-style: solid !default
 $tabs-border-bottom-width: 1px !default
@@ -78,9 +80,9 @@ $tabs-toggle-link-active-color: $link-invert !default
       padding-left: 0.75em
   .icon
     &:first-child
-      margin-right: 0.5em
+      +ltr-property("margin", 0.5em)
     &:last-child
-      margin-left: 0.5em
+      +ltr-property("margin", 0.5em, false)
   // Alignment
   &.is-centered
     ul
@@ -92,7 +94,10 @@ $tabs-toggle-link-active-color: $link-invert !default
   &.is-boxed
     a
       border: 1px solid transparent
-      border-radius: $tabs-boxed-link-radius $tabs-boxed-link-radius 0 0
+      +ltr
+        border-radius: $tabs-boxed-link-radius $tabs-boxed-link-radius 0 0
+      +rtl
+        border-radius: 0 0 $tabs-boxed-link-radius $tabs-boxed-link-radius
       &:hover
         background-color: $tabs-boxed-link-hover-background-color
         border-bottom-color: $tabs-boxed-link-hover-border-bottom-color
@@ -119,11 +124,21 @@ $tabs-toggle-link-active-color: $link-invert !default
         z-index: 2
     li
       & + li
-        margin-left: -#{$tabs-toggle-link-border-width}
+        +ltr-property("margin", -#{$tabs-toggle-link-border-width}, false)
       &:first-child a
-        border-radius: $tabs-toggle-link-radius 0 0 $tabs-toggle-link-radius
+        +ltr
+          border-top-left-radius: $tabs-toggle-link-radius
+          border-bottom-left-radius: $tabs-toggle-link-radius
+        +rtl
+          border-top-right-radius: $tabs-toggle-link-radius
+          border-bottom-right-radius: $tabs-toggle-link-radius
       &:last-child a
-        border-radius: 0 $tabs-toggle-link-radius $tabs-toggle-link-radius 0
+        +ltr
+          border-top-right-radius: $tabs-toggle-link-radius
+          border-bottom-right-radius: $tabs-toggle-link-radius
+        +rtl
+          border-top-left-radius: $tabs-toggle-link-radius
+          border-bottom-left-radius: $tabs-toggle-link-radius
       &.is-active
         a
           background-color: $tabs-toggle-link-active-background-color
@@ -135,13 +150,23 @@ $tabs-toggle-link-active-color: $link-invert !default
     &.is-toggle-rounded
       li
         &:first-child a
-          border-bottom-left-radius: $radius-rounded
-          border-top-left-radius: $radius-rounded
-          padding-left: 1.25em
+          +ltr
+            border-bottom-left-radius: $radius-rounded
+            border-top-left-radius: $radius-rounded
+            padding-left: 1.25em
+          +rtl
+            border-bottom-right-radius: $radius-rounded
+            border-top-right-radius: $radius-rounded
+            padding-right: 1.25em
         &:last-child a
-          border-bottom-right-radius: $radius-rounded
-          border-top-right-radius: $radius-rounded
-          padding-right: 1.25em
+          +ltr
+            border-bottom-right-radius: $radius-rounded
+            border-top-right-radius: $radius-rounded
+            padding-right: 1.25em
+          +rtl
+            border-bottom-left-radius: $radius-rounded
+            border-top-left-radius: $radius-rounded
+            padding-left: 1.25em
   // Sizes
   &.is-small
     font-size: $size-small

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

@@ -1,15 +1,16 @@
+/* Bulma Elements */
 @charset "utf-8"
 
-@import "box.sass"
-@import "button.sass"
-@import "container.sass"
-@import "content.sass"
-@import "icon.sass"
-@import "image.sass"
-@import "notification.sass"
-@import "progress.sass"
-@import "table.sass"
-@import "tag.sass"
-@import "title.sass"
+@import "box"
+@import "button"
+@import "container"
+@import "content"
+@import "icon"
+@import "image"
+@import "notification"
+@import "progress"
+@import "table"
+@import "tag"
+@import "title"
 
-@import "other.sass"
+@import "other"

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

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 $box-color: $text !default
 $box-background-color: $scheme-main !default
 $box-radius: $radius-large !default

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

@@ -1,3 +1,6 @@
+@import "../utilities/controls"
+@import "../utilities/mixins"
+
 $button-color: $text-strong !default
 $button-background-color: $scheme-main !default
 $button-family: false !default
@@ -14,15 +17,23 @@ $button-hover-border-color: $link-hover-border !default
 $button-focus-color: $link-focus !default
 $button-focus-border-color: $link-focus-border !default
 $button-focus-box-shadow-size: 0 0 0 0.125em !default
-$button-focus-box-shadow-color: rgba($link, 0.25) !default
+$button-focus-box-shadow-color: bulmaRgba($link, 0.25) !default
 
 $button-active-color: $link-active !default
 $button-active-border-color: $link-active-border !default
 
 $button-text-color: $text !default
+$button-text-decoration: underline !default
 $button-text-hover-background-color: $background !default
 $button-text-hover-color: $text-strong !default
 
+$button-ghost-background: none !default
+$button-ghost-border-color: transparent !default
+$button-ghost-color: $link !default
+$button-ghost-decoration: none !default
+$button-ghost-hover-color: $link !default
+$button-ghost-hover-decoration: underline !default
+
 $button-disabled-background-color: $scheme-main !default
 $button-disabled-border-color: $border !default
 $button-disabled-shadow: none !default
@@ -32,9 +43,12 @@ $button-static-color: $text-light !default
 $button-static-background-color: $scheme-main-ter !default
 $button-static-border-color: $border !default
 
+$button-colors: $colors !default
+
 // The button sizes use mixins so they can be used at different breakpoints
 =button-small
-  border-radius: $radius-small
+  &:not(.is-rounded)
+    border-radius: $radius-small
   font-size: $size-small
 =button-normal
   font-size: $size-normal
@@ -70,11 +84,11 @@ $button-static-border-color: $border !default
       height: 1.5em
       width: 1.5em
     &:first-child:not(:last-child)
-      margin-left: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
-      margin-right: $button-padding-horizontal / 4
+      +ltr-property("margin", calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width}), false)
+      +ltr-property("margin", $button-padding-horizontal / 4)
     &:last-child:not(:first-child)
-      margin-left: $button-padding-horizontal / 4
-      margin-right: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
+      +ltr-property("margin", $button-padding-horizontal / 4, false)
+      +ltr-property("margin", calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width}))
     &:first-child:last-child
       margin-left: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
       margin-right: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
@@ -98,7 +112,7 @@ $button-static-border-color: $border !default
     background-color: transparent
     border-color: transparent
     color: $button-text-color
-    text-decoration: underline
+    text-decoration: $button-text-decoration
     &:hover,
     &.is-hovered,
     &:focus,
@@ -107,14 +121,23 @@ $button-static-border-color: $border !default
       color: $button-text-hover-color
     &:active,
     &.is-active
-      background-color: darken($button-text-hover-background-color, 5%)
+      background-color: bulmaDarken($button-text-hover-background-color, 5%)
       color: $button-text-hover-color
     &[disabled],
     fieldset[disabled] &
       background-color: transparent
       border-color: transparent
       box-shadow: none
-  @each $name, $pair in $colors
+  &.is-ghost
+    background: $button-ghost-background
+    border-color: $button-ghost-border-color
+    color: $button-ghost-color
+    text-decoration: $button-ghost-decoration
+    &:hover,
+    &.is-hovered
+      color: $button-ghost-hover-color
+      text-decoration: $button-ghost-hover-decoration
+  @each $name, $pair in $button-colors
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
     &.is-#{$name}
@@ -123,7 +146,7 @@ $button-static-border-color: $border !default
       color: $color-invert
       &:hover,
       &.is-hovered
-        background-color: darken($color, 2.5%)
+        background-color: bulmaDarken($color, 2.5%)
         border-color: transparent
         color: $color-invert
       &:focus,
@@ -131,10 +154,10 @@ $button-static-border-color: $border !default
         border-color: transparent
         color: $color-invert
         &:not(:active)
-          box-shadow: $button-focus-box-shadow-size rgba($color, 0.25)
+          box-shadow: $button-focus-box-shadow-size bulmaRgba($color, 0.25)
       &:active,
       &.is-active
-        background-color: darken($color, 5%)
+        background-color: bulmaDarken($color, 5%)
         border-color: transparent
         color: $color-invert
       &[disabled],
@@ -147,7 +170,7 @@ $button-static-border-color: $border !default
         color: $color
         &:hover,
         &.is-hovered
-          background-color: darken($color-invert, 5%)
+          background-color: bulmaDarken($color-invert, 5%)
         &[disabled],
         fieldset[disabled] &
           background-color: $color-invert
@@ -215,12 +238,12 @@ $button-static-border-color: $border !default
           color: $color-dark
           &:hover,
           &.is-hovered
-            background-color: darken($color-light, 2.5%)
+            background-color: bulmaDarken($color-light, 2.5%)
             border-color: transparent
             color: $color-dark
           &:active,
           &.is-active
-            background-color: darken($color-light, 5%)
+            background-color: bulmaDarken($color-light, 5%)
             border-color: transparent
             color: $color-dark
   // Sizes
@@ -268,7 +291,7 @@ $button-static-border-color: $border !default
   .button
     margin-bottom: 0.5rem
     &:not(:last-child):not(.is-fullwidth)
-      margin-right: 0.5rem
+      +ltr-property("margin", 0.5rem)
   &:last-child
     margin-bottom: -0.5rem
   &:not(:last-child)
@@ -291,9 +314,9 @@ $button-static-border-color: $border !default
       &:not(:last-child)
         border-bottom-right-radius: 0
         border-top-right-radius: 0
-        margin-right: -1px
+        +ltr-property("margin", -1px)
       &:last-child
-        margin-right: 0
+        +ltr-property("margin", 0)
       &:hover,
       &.is-hovered
         z-index: 2

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

@@ -1,4 +1,7 @@
+@import "../utilities/mixins"
+
 $container-offset: (2 * $gap) !default
+$container-max-width: $fullhd !default
 
 .container
   flex-grow: 1
@@ -6,19 +9,21 @@ $container-offset: (2 * $gap) !default
   position: relative
   width: auto
   &.is-fluid
-    max-width: none
+    max-width: none !important
     padding-left: $gap
     padding-right: $gap
     width: 100%
   +desktop
     max-width: $desktop - $container-offset
   +until-widescreen
-    &.is-widescreen
-      max-width: $widescreen - $container-offset
+    &.is-widescreen:not(.is-max-desktop)
+      max-width: min($widescreen, $container-max-width) - $container-offset
   +until-fullhd
-    &.is-fullhd
-      max-width: $fullhd - $container-offset
+    &.is-fullhd:not(.is-max-desktop):not(.is-max-widescreen)
+      max-width: min($fullhd, $container-max-width) - $container-offset
   +widescreen
-    max-width: $widescreen - $container-offset
+    &:not(.is-max-desktop)
+      max-width: min($widescreen, $container-max-width) - $container-offset
   +fullhd
-    max-width: $fullhd - $container-offset
+    &:not(.is-max-desktop):not(.is-max-widescreen)
+      max-width: min($fullhd, $container-max-width) - $container-offset

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

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 $content-heading-color: $text-strong !default
 $content-heading-weight: $weight-semibold !default
 $content-heading-line-height: 1.125 !default
@@ -67,11 +69,11 @@ $content-table-foot-cell-color: $text-strong !default
     margin-bottom: 1em
   blockquote
     background-color: $content-blockquote-background-color
-    border-left: $content-blockquote-border-left
+    +ltr-property("border", $content-blockquote-border-left, false)
     padding: $content-blockquote-padding
   ol
     list-style-position: outside
-    margin-left: 2em
+    +ltr-property("margin", 2em, false)
     margin-top: 1em
     &:not([type])
       list-style-type: decimal
@@ -85,7 +87,7 @@ $content-table-foot-cell-color: $text-strong !default
         list-style-type: upper-roman
   ul
     list-style: disc outside
-    margin-left: 2em
+    +ltr-property("margin", 2em, false)
     margin-top: 1em
     ul
       list-style-type: circle
@@ -93,7 +95,7 @@ $content-table-foot-cell-color: $text-strong !default
       ul
         list-style-type: square
   dd
-    margin-left: 2em
+    +ltr-property("margin", 2em, false)
   figure
     margin-left: 2em
     margin-right: 2em
@@ -126,7 +128,7 @@ $content-table-foot-cell-color: $text-strong !default
     th
       color: $content-table-cell-heading-color
       &:not([align])
-        text-align: left
+        text-align: inherit
     thead
       td,
       th

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

@@ -2,6 +2,7 @@ $icon-dimensions: 1.5rem !default
 $icon-dimensions-small: 1rem !default
 $icon-dimensions-medium: 2rem !default
 $icon-dimensions-large: 3rem !default
+$icon-text-spacing: 0.25em !default
 
 .icon
   align-items: center
@@ -19,3 +20,21 @@ $icon-dimensions-large: 3rem !default
   &.is-large
     height: $icon-dimensions-large
     width: $icon-dimensions-large
+
+.icon-text
+  align-items: flex-start
+  color: inherit
+  display: inline-flex
+  flex-wrap: wrap
+  line-height: $icon-dimensions
+  vertical-align: top
+  .icon
+    flex-grow: 0
+    flex-shrink: 0
+    &:not(:last-child)
+      margin-right: $icon-text-spacing
+    &:not(:first-child)
+      margin-left: $icon-text-spacing
+
+div.icon-text
+  display: flex

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

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 $dimensions: 16 24 32 48 64 96 128 !default
 
 .image