bulma-rails 0.4.3 → 0.5.1

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

@@ -1,35 +1,59 @@
-$navbar-background: $white !default
+$navbar-background-color: $white !default
 $navbar-height: 3.25rem !default
 
-$navbar-item: $grey-dark !default
-$navbar-item-hover: $black !default
-$navbar-item-hover-background: $background !default
-$navbar-item-active: $black !default
-$navbar-item-active-background: transparent !default
-
-$navbar-dropdown-background: $white !default
-$navbar-dropdown-border: $border !default
+$navbar-item-color: $grey-dark !default
+$navbar-item-hover-color: $black !default
+$navbar-item-hover-background-color: $background !default
+$navbar-item-active-color: $black !default
+$navbar-item-active-background-color: transparent !default
+$navbar-item-img-max-height: 1.75rem !default
+
+$navbar-tab-hover-background-color: transparent !default
+$navbar-tab-hover-border-bottom-color: $primary !default
+$navbar-tab-active-color: $primary !default
+$navbar-tab-active-background-color: transparent !default
+$navbar-tab-active-border-bottom-color: $primary !default
+$navbar-tab-active-border-bottom-style: solid !default
+$navbar-tab-active-border-bottom-width: 3px !default
+
+$navbar-dropdown-background-color: $white !default
+$navbar-dropdown-border-top: 1px solid $border !default
 $navbar-dropdown-offset: -4px !default
 $navbar-dropdown-arrow: $link !default
 $navbar-dropdown-radius: $radius-large !default
 $navbar-dropdown-z: 20 !default
 
-$navbar-dropdown-item-hover: $black !default
-$navbar-dropdown-item-hover-background: $background !default
-$navbar-dropdown-item-active: $primary !default
-$navbar-dropdown-item-active-background: $background !default
+$navbar-dropdown-boxed-radius: $radius-large !default
+$navbar-dropdown-boxed-shadow: 0 8px 8px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
+
+$navbar-dropdown-item-hover-color: $black !default
+$navbar-dropdown-item-hover-background-color: $background !default
+$navbar-dropdown-item-active-color: $primary !default
+$navbar-dropdown-item-active-background-color: $background !default
 
-$navbar-divider-background: $border !default
+$navbar-divider-background-color: $border !default
 
 .navbar
-  background-color: $navbar-background
+  background-color: $navbar-background-color
   min-height: $navbar-height
   position: relative
+  & > .container
+    align-items: stretch
+    display: flex
+    min-height: $navbar-height
+    width: 100%
+  &.has-shadow
+    box-shadow: 0 2px 3px rgba($black, 0.1)
 
 .navbar-brand
+  +overflow-touch
   align-items: stretch
-  height: $navbar-height
   display: flex
+  flex-shrink: 0
+  max-width: 100vw
+  min-height: $navbar-height
+  overflow-x: auto
+  overflow-y: hidden
 
 .navbar-burger
   +hamburger($navbar-height)
@@ -40,7 +64,7 @@ $navbar-divider-background: $border !default
 
 .navbar-item,
 .navbar-link
-  color: $navbar-item
+  color: $navbar-item-color
   display: block
   line-height: 1.5
   padding: 0.5rem 1rem
@@ -50,16 +74,30 @@ a.navbar-item,
 .navbar-link
   &:hover,
   &.is-active
-    background-color: $navbar-item-hover-background
-    color: $navbar-item-hover
+    background-color: $navbar-item-hover-background-color
+    color: $navbar-item-hover-color
 
 .navbar-item
   flex-grow: 0
   flex-shrink: 0
   img
-    max-height: 1.75rem
+    max-height: $navbar-item-img-max-height
   &.has-dropdown
     padding: 0
+  &.is-tab
+    border-bottom: 1px solid transparent
+    min-height: $navbar-height
+    padding-bottom: calc(0.5rem - 1px)
+    &:hover
+      background-color: $navbar-tab-hover-background-color
+      border-bottom-color: $navbar-tab-hover-border-bottom-color
+    &.is-active
+      background-color: $navbar-tab-active-background-color
+      border-bottom-color: $navbar-tab-active-border-bottom-color
+      border-bottom-style: $navbar-tab-active-border-bottom-style
+      border-bottom-width: $navbar-tab-active-border-bottom-width
+      color: $navbar-tab-active-color
+      padding-bottom: calc(0.5rem - #{$navbar-tab-active-border-bottom-width})
 
 .navbar-content
   flex-grow: 1
@@ -77,13 +115,15 @@ a.navbar-item,
     padding-right: 1.5rem
 
 .navbar-divider
-  background-color: $navbar-divider-background
+  background-color: $navbar-divider-background-color
   border: none
   display: none
   height: 1px
   margin: 0.5rem 0
 
 +touch
+  .navbar > .container
+    display: block
   .navbar-brand
     .navbar-item
       align-items: center
@@ -102,7 +142,7 @@ a.navbar-item,
     align-items: stretch
     display: flex
   .navbar
-    height: $navbar-height
+    min-height: $navbar-height
     &.is-transparent
       a.navbar-item,
       .navbar-link
@@ -117,11 +157,11 @@ a.navbar-item,
       .navbar-dropdown
         a.navbar-item
           &:hover
-            background-color: $navbar-dropdown-item-hover-background
-            color: $navbar-dropdown-item-hover
+            background-color: $navbar-dropdown-item-hover-background-color
+            color: $navbar-dropdown-item-hover-color
           &.is-active
-            background-color: $navbar-dropdown-item-active-background
-            color: $navbar-dropdown-item-active
+            background-color: $navbar-dropdown-item-active-background-color
+            color: $navbar-dropdown-item-active-color
   .navbar-burger
     display: none
   .navbar-item,
@@ -155,10 +195,10 @@ a.navbar-item,
     justify-content: flex-end
     margin-left: auto
   .navbar-dropdown
-    background-color: $navbar-dropdown-background
+    background-color: $navbar-dropdown-background-color
     border-bottom-left-radius: $navbar-dropdown-radius
     border-bottom-right-radius: $navbar-dropdown-radius
-    border-top: 1px solid $navbar-dropdown-border
+    border-top: $navbar-dropdown-border-top
     box-shadow: 0 8px 8px rgba($black, 0.1)
     display: none
     font-size: 0.875rem
@@ -173,15 +213,15 @@ a.navbar-item,
     a.navbar-item
       padding-right: 3rem
       &:hover
-        background-color: $navbar-dropdown-item-hover-background
-        color: $navbar-dropdown-item-hover
+        background-color: $navbar-dropdown-item-hover-background-color
+        color: $navbar-dropdown-item-hover-color
       &.is-active
-        background-color: $navbar-dropdown-item-active-background
-        color: $navbar-dropdown-item-active
+        background-color: $navbar-dropdown-item-active-background-color
+        color: $navbar-dropdown-item-active-color
     &.is-boxed
-      border-radius: $navbar-dropdown-radius
+      border-radius: $navbar-dropdown-boxed-radius
       border-top: none
-      box-shadow: 0 8px 8px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
+      box-shadow: $navbar-dropdown-boxed-shadow
       display: block
       opacity: 0
       pointer-events: none
@@ -189,6 +229,9 @@ a.navbar-item,
       transform: translateY(-5px)
       transition-duration: $speed
       transition-property: opacity, transform
+    &.is-right
+      left: auto
+      right: 0
   .navbar-divider
     display: block
   .container > .navbar
@@ -198,11 +241,11 @@ a.navbar-item,
   a.navbar-item,
   .navbar-link
     &.is-active
-      color: $navbar-item-active
+      color: $navbar-item-active-color
     &.is-active:not(:hover)
-      background-color: $navbar-item-active-background
+      background-color: $navbar-item-active-background-color
   .navbar-item.has-dropdown
     &:hover,
     &.is-active
       .navbar-link
-        background-color: $navbar-item-hover-background
+        background-color: $navbar-item-hover-background-color

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

@@ -1,31 +1,31 @@
-$pagination: $grey-darker !default
-$pagination-background: $white !default
-$pagination-border: $grey-lighter !default
+$pagination-color: $grey-darker !default
+$pagination-border-color: $grey-lighter !default
+$pagination-margin: -0.25rem !default
 
-$pagination-hover: $link-hover !default
-$pagination-hover-border: $link-hover-border !default
+$pagination-hover-color: $link-hover !default
+$pagination-hover-border-color: $link-hover-border !default
 
-$pagination-focus: $link-focus !default
-$pagination-focus-border: $link-focus-border !default
+$pagination-focus-color: $link-focus !default
+$pagination-focus-border-color: $link-focus-border !default
 
-$pagination-active: $link-active !default
-$pagination-active-border: $link-active-border !default
+$pagination-active-color: $link-active !default
+$pagination-active-border-color: $link-active-border !default
 
-$pagination-disabled: $grey !default
-$pagination-disabled-background: $grey-lighter !default
-$pagination-disabled-border: $grey-lighter !default
+$pagination-disabled-color: $grey !default
+$pagination-disabled-background-color: $grey-lighter !default
+$pagination-disabled-border-color: $grey-lighter !default
 
-$pagination-current: $link-invert !default
-$pagination-current-background: $link !default
-$pagination-current-border: $link !default
+$pagination-current-color: $link-invert !default
+$pagination-current-background-color: $link !default
+$pagination-current-border-color: $link !default
 
-$pagination-ellipsis: $grey-light !default
+$pagination-ellipsis-color: $grey-light !default
 
 $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
 
 .pagination
   font-size: $size-normal
-  margin: -0.25rem
+  margin: $pagination-margin
   // Sizes
   &.is-small
     font-size: $size-small
@@ -57,20 +57,20 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
 .pagination-previous,
 .pagination-next,
 .pagination-link
-  border-color: $pagination-border
+  border-color: $pagination-border-color
   min-width: 2.25em
   &:hover
-    border-color: $pagination-hover-border
-    color: $pagination-hover
+    border-color: $pagination-hover-border-color
+    color: $pagination-hover-color
   &:focus
-    border-color: $pagination-focus-border
+    border-color: $pagination-focus-border-color
   &:active
     box-shadow: $pagination-shadow-inset
   &[disabled]
-    background-color: $pagination-disabled-background
-    border-color: $pagination-border
+    background-color: $pagination-disabled-background-color
+    border-color: $pagination-disabled-border-color
     box-shadow: none
-    color: $pagination-disabled
+    color: $pagination-disabled-color
     opacity: 0.5
 
 .pagination-previous,
@@ -81,12 +81,12 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
 
 .pagination-link
   &.is-current
-    background-color: $pagination-current-background
-    border-color: $pagination-current-border
-    color: $pagination-current
+    background-color: $pagination-current-background-color
+    border-color: $pagination-current-border-color
+    color: $pagination-current-color
 
 .pagination-ellipsis
-  color: $pagination-ellipsis
+  color: $pagination-ellipsis-color
   pointer-events: none
 
 .pagination-list

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

@@ -1,3 +1,28 @@
+$panel-item-border: 1px solid $border !default
+
+$panel-heading-background-color: $background !default
+$panel-heading-color: $text-strong !default
+$panel-heading-line-height: 1.25 !default
+$panel-heading-padding: 0.5em 0.75em !default
+$panel-heading-radius: $radius !default
+$panel-heading-size: 1.25em !default
+$panel-heading-weight: $weight-light !default
+
+$panel-tab-border-bottom: 1px solid $border !default
+$panel-tab-active-border-bottom-color: $link-active-border !default
+$panel-tab-active-color: $link-active !default
+
+$panel-list-item-color: $text !default
+$panel-list-item-hover-color: $link !default
+
+$panel-block-color: $text-strong !default
+$panel-block-hover-background-color: $background !default
+$panel-block-active-border-left-color: $link !default
+$panel-block-active-color: $link-active !default
+$panel-block-active-icon-color: $link !default
+
+$panel-icon-color: $text-light !default
+
 .panel
   font-size: $size-normal
   &:not(:last-child)
@@ -6,20 +31,20 @@
 .panel-heading,
 .panel-tabs,
 .panel-block
-  border-bottom: 1px solid $border
-  border-left: 1px solid $border
-  border-right: 1px solid $border
+  border-bottom: $panel-item-border
+  border-left: $panel-item-border
+  border-right: $panel-item-border
   &:first-child
-    border-top: 1px solid $border
+    border-top: $panel-item-border
 
 .panel-heading
-  background-color: $background
-  border-radius: $radius $radius 0 0
-  color: $text-strong
-  font-size: 1.25em
-  font-weight: $weight-light
-  line-height: 1.25
-  padding: 0.5em 0.75em
+  background-color: $panel-heading-background-color
+  border-radius: $panel-heading-radius $panel-heading-radius 0 0
+  color: $panel-heading-color
+  font-size: $panel-heading-size
+  font-weight: $panel-heading-weight
+  line-height: $panel-heading-line-height
+  padding: $panel-heading-padding
 
 .panel-tabs
   align-items: flex-end
@@ -27,23 +52,23 @@
   font-size: 0.875em
   justify-content: center
   a
-    border-bottom: 1px solid $border
+    border-bottom: $panel-tab-border-bottom
     margin-bottom: -1px
     padding: 0.5em
     // Modifiers
     &.is-active
-      border-bottom-color: $link-active-border
-      color: $link-active
+      border-bottom-color: $panel-tab-active-border-bottom-color
+      color: $panel-tab-active-color
 
 .panel-list
   a
-    color: $text
+    color: $panel-list-item-color
     &:hover
-      color: $link
+      color: $panel-list-item-hover-color
 
 .panel-block
   align-items: center
-  color: $text-strong
+  color: $panel-block-color
   display: flex
   justify-content: flex-start
   padding: 0.5em 0.75em
@@ -56,20 +81,20 @@
   &.is-wrapped
     flex-wrap: wrap
   &.is-active
-    border-left-color: $link
-    color: $link-active
+    border-left-color: $panel-block-active-border-left-color
+    color: $panel-block-active-color
     .panel-icon
-      color: $link
+      color: $panel-block-active-icon-color
 
 a.panel-block,
 label.panel-block
   cursor: pointer
   &:hover
-    background-color: $background
+    background-color: $panel-block-hover-background-color
 
 .panel-icon
   +fa(14px, 1em)
-  color: $text-light
+  color: $panel-icon-color
   margin-right: 0.75em
   .fa
     font-size: inherit

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

@@ -1,3 +1,31 @@
+$tabs-border-bottom-color: $border !default
+$tabs-border-bottom-style: solid !default
+$tabs-border-bottom-width: 1px !default
+$tabs-link-color: $text !default
+$tabs-link-hover-border-bottom-color: $text-strong !default
+$tabs-link-hover-color: $text-strong !default
+$tabs-link-active-border-bottom-color: $primary !default
+$tabs-link-active-color: $primary !default
+$tabs-link-padding: 0.5em 1em !default
+
+$tabs-boxed-link-radius: $radius !default
+$tabs-boxed-link-hover-background-color: $background !default
+$tabs-boxed-link-hover-border-bottom-color: $border !default
+
+$tabs-boxed-link-active-background-color: $white !default
+$tabs-boxed-link-active-border-color: $border !default
+$tabs-boxed-link-active-border-bottom-color: transparent !default
+
+$tabs-toggle-link-border-color: $border !default
+$tabs-toggle-link-border-style: solid !default
+$tabs-toggle-link-border-width: 1px !default
+$tabs-toggle-link-hover-background-color: $background !default
+$tabs-toggle-link-hover-border-color: $border-hover !default
+$tabs-toggle-link-radius: $radius !default
+$tabs-toggle-link-active-background-color: $primary !default
+$tabs-toggle-link-active-border-color: $primary !default
+$tabs-toggle-link-active-color: $primary-invert !default
+
 .tabs
   +block
   +overflow-touch
@@ -11,25 +39,29 @@
   white-space: nowrap
   a
     align-items: center
-    border-bottom: 1px solid $border
-    color: $text
+    border-bottom-color: $tabs-border-bottom-color
+    border-bottom-style: $tabs-border-bottom-style
+    border-bottom-width: $tabs-border-bottom-width
+    color: $tabs-link-color
     display: flex
     justify-content: center
-    margin-bottom: -1px
-    padding: 0.5em 1em
+    margin-bottom: -#{$tabs-border-bottom-width}
+    padding: $tabs-link-padding
     vertical-align: top
     &:hover
-      border-bottom-color: $text-strong
-      color: $text-strong
+      border-bottom-color: $tabs-link-hover-border-bottom-color
+      color: $tabs-link-hover-color
   li
     display: block
     &.is-active
       a
-        border-bottom-color: $primary
-        color: $primary
+        border-bottom-color: $tabs-link-active-border-bottom-color
+        color: $tabs-link-active-color
   ul
     align-items: center
-    border-bottom: 1px solid $border
+    border-bottom-color: $tabs-border-bottom-color
+    border-bottom-style: $tabs-border-bottom-style
+    border-bottom-width: $tabs-border-bottom-width
     display: flex
     flex-grow: 1
     flex-shrink: 0
@@ -60,41 +92,43 @@
   &.is-boxed
     a
       border: 1px solid transparent
-      border-radius: $radius $radius 0 0
+      border-radius: $tabs-boxed-link-radius $tabs-boxed-link-radius 0 0
       &:hover
-        background-color: $background
-        border-bottom-color: $border
+        background-color: $tabs-boxed-link-hover-background-color
+        border-bottom-color: $tabs-boxed-link-hover-border-bottom-color
     li
       &.is-active
         a
-          background-color: $white
-          border-color: $border
-          border-bottom-color: transparent !important
+          background-color: $tabs-boxed-link-active-background-color
+          border-color: $tabs-boxed-link-active-border-color
+          border-bottom-color: $tabs-boxed-link-active-border-bottom-color !important
   &.is-fullwidth
     li
       flex-grow: 1
       flex-shrink: 0
   &.is-toggle
     a
-      border: 1px solid $border
+      border-color: $tabs-toggle-link-border-color
+      border-style: $tabs-toggle-link-border-style
+      border-width: $tabs-toggle-link-border-width
       margin-bottom: 0
       position: relative
       &:hover
-        background-color: $background
-        border-color: $border-hover
+        background-color: $tabs-toggle-link-hover-background-color
+        border-color: $tabs-toggle-link-hover-border-color
         z-index: 2
     li
       & + li
-        margin-left: -1px
+        margin-left: -#{$tabs-toggle-link-border-width}
       &:first-child a
-        border-radius: $radius 0 0 $radius
+        border-radius: $tabs-toggle-link-radius 0 0 $tabs-toggle-link-radius
       &:last-child a
-        border-radius: 0 $radius $radius 0
+        border-radius: 0 $tabs-toggle-link-radius $tabs-toggle-link-radius 0
       &.is-active
         a
-          background-color: $primary
-          border-color: $primary
-          color: $primary-invert
+          background-color: $tabs-toggle-link-active-background-color
+          border-color: $tabs-toggle-link-active-border-color
+          color: $tabs-toggle-link-active-color
           z-index: 1
     ul
       border-bottom: none