bulma-rails 0.0.24 → 0.0.26

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

@@ -34,16 +34,24 @@
 
 .navbar
   @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
+    & > .navbar-item
+      &:not(:last-child)
+        margin-bottom: 0
+      &:not(.is-narrow)
+        flex: 1
   // Responsiveness
   +tablet
-    align-items: center
     display: flex
-    justify-content: space-between
     & > .navbar-item
       &:not(.is-narrow)
         flex: 1

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

@@ -43,11 +43,13 @@
   display: block
   line-height: 16px
   padding: 10px
-  &:hover
-    background: $background
   &:not(:last-child)
     border-bottom: 1px solid $border
 
+a.panel-block
+  &:hover
+    background: $background
+
 .panel
   border: 1px solid $border
   border-radius: 5px

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

@@ -1,86 +1,84 @@
 .tabs
   @extend .block
+  @extend .unselectable
+  align-items: stretch
+  display: flex
+  justify-content: space-between
   line-height: 24px
   overflow: hidden
   overflow-x: auto
   white-space: nowrap
   a
+    align-items: center
     border-bottom: 1px solid $border
     color: $text
-    display: block
+    display: flex
+    justify-content: center
     margin-bottom: -1px
-    padding: 5px 0
+    padding: 6px 12px
     vertical-align: top
     &:hover
       border-bottom-color: $text-strong
       color: $text-strong
   li
     display: block
-    vertical-align: top
-    & + li
-      margin-left: 20px
-    // Modifiers
     &.is-active
       a
         border-bottom-color: $link
         color: $link
   ul
+    align-items: center
     border-bottom: 1px solid $border
     display: flex
-  .fa
-    font-size: 14px
-    line-height: 20px
-    margin: 2px -2px
-    width: 20px
-  // Modifiers
+    flex: 1
+    justify-content: flex-start
+    &.is-left
+      padding-right: 10px
+    &.is-center
+      flex: none
+      justify-content: center
+      padding-left: 10px
+      padding-right: 10px
+    &.is-right
+      justify-content: flex-end
+      padding-left: 10px
+  .icon
+    &:first-child
+      margin-right: 8px
+    &:last-child
+      margin-left: 8px
+  // Alignment
+  &.is-centered
+    ul
+      justify-content: center
+  &.is-right
+    ul
+      justify-content: flex-end
+  // Styles
   &.is-boxed
     a
       border: 1px solid transparent
       border-radius: $radius $radius 0 0
-      padding: 5px 15px
+      padding-bottom: 5px
+      padding-top: 5px
       &:hover
         background: $background
         border-bottom-color: $border
     li
-      & + li
-        margin-left: 5px
-      // Modifiers
       &.is-active
         a
-          background: white
+          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
+          border-bottom-color: transparent !important
   &.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
       margin-bottom: 0
-      padding: 5px 10px
+      padding-bottom: 5px
+      padding-top: 5px
       position: relative
       &:hover
         background: $background
@@ -93,7 +91,6 @@
         border-radius: $radius 0 0 $radius
       &:last-child a
         border-radius: 0 $radius $radius 0
-      // Modifiers
       &.is-active
         a
           background: $primary
@@ -102,3 +99,31 @@
           z-index: 1
     ul
       border-bottom: none
+  // Sizes
+  &.is-small
+    font-size: $size-small
+    a
+      padding: 2px 8px
+    &.is-boxed,
+    &.is-toggle
+      a
+        padding-bottom: 1px
+        padding-top: 1px
+  &.is-medium
+    font-size: $size-medium
+    a
+      padding: 10px 16px
+    &.is-boxed,
+    &.is-toggle
+      a
+        padding-bottom: 9px
+        padding-top: 9px
+  &.is-large
+    font-size: $size-large
+    a
+      padding: 14px 20px
+    &.is-boxed,
+    &.is-toggle
+      a
+        padding-bottom: 13px
+        padding-top: 13px

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

@@ -1,14 +1,14 @@
 .box
   @extend .block
-  background: white
+  background: $white
   border-radius: 5px
-  box-shadow: 0 2px 3px rgba(black, 0.1), 0 0 0 1px rgba(black, 0.1)
+  box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
   display: block
   padding: 20px
 
 a.box
   &:hover,
   &:focus
-    box-shadow: 0 2px 3px rgba(black, 0.1), 0 0 0 1px $link
+    box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $link
   &:active
-    box-shadow: inset 0 1px 2px rgba(black, 0.2), 0 0 0 1px $link
+    box-shadow: inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link

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

@@ -3,21 +3,25 @@
   font-size: 11px
   height: 24px
   line-height: 16px
-  padding: 3px 6px
+  padding-left: 6px
+  padding-right: 6px
 =button-medium
   font-size: 18px
   height: 40px
-  padding: 7px 14px
+  padding-left: 14px
+  padding-right: 14px
 =button-large
   font-size: 22px
   height: 48px
-  padding: 11px 20px
+  padding-left: 20px
+  padding-right: 20px
 
 .button
   +control
-  +unselectable
+  @extend .unselectable
   justify-content: center
-  padding: 3px 10px
+  padding-left: 10px
+  padding-right: 10px
   text-align: center
   white-space: nowrap
   strong
@@ -38,7 +42,7 @@
   &:hover
     color: $control-hover
   &:active
-    box-shadow: inset 0 1px 2px rgba(black, 0.2)
+    box-shadow: inset 0 1px 2px rgba($black, 0.2)
   // Colors
   @each $name, $pair in $colors
     $color: nth($pair, 1)
@@ -59,14 +63,6 @@
         color: $color
         &:hover
           background: darken($color-invert, 5%)
-        &.is-outlined
-          background-color: transparent
-          border-color: $color-invert
-          color: $color-invert
-          &:hover
-            background: rgba(black, 0.05)
-            border-color: $color-invert
-            color: $color-invert
       &.is-loading
         &:after
           border-color: transparent transparent $color-invert $color-invert !important
@@ -76,8 +72,9 @@
         color: $color
         &:hover,
         &:focus
-          border-color: darken($color, 10%)
-          color: darken($color, 10%)
+          background: $color
+          border-color: $color
+          color: $color-invert
   &.is-link
     background: transparent
     border-color: transparent
@@ -98,13 +95,11 @@
   &[disabled],
   &.is-disabled
     opacity: 0.5
-  &.is-flexible
-    height: auto
   &.is-fullwidth
     display: block
     width: 100%
   &.is-loading
-    color: transparent
+    color: transparent !important
     pointer-events: none
     &:after
       @extend .loader

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

@@ -1,6 +1,12 @@
 .content
   @extend .block
   // Inline
+  a
+    border-bottom: 1px solid $border
+    &:visited
+      color: $link-visited
+    &:hover
+      border-bottom-color: $link
   li + li
     margin-top: 0.25em
   // Block

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

@@ -1,10 +1,9 @@
 @charset "utf-8"
 
-@import "controls"
-
 @import "box"
 @import "button"
 @import "content"
+@import "form"
 @import "image"
 @import "notification"
 @import "progress"

data/app/assets/stylesheets/sass/elements/{controls.sass → form.sass}

@@ -1,33 +1,3 @@
-=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-flex
-  font-size: $size-normal
-  height: 32px
-  line-height: 24px
-  padding: 3px 8px
-  position: relative
-  vertical-align: top
-  &:hover
-    border-color: $control-hover-border
-  &:active,
-  &:focus
-    border-color: $control-active-border
-    outline: none
-  &[disabled],
-  &.is-disabled
-    background: $background
-    border-color: $control-border
-    cursor: not-allowed
-    pointer-events: none
-    +placeholder
-      color: rgba($control, 0.3)
-
 =form-control
   +control
   @each $name, $pair in $colors
@@ -35,27 +5,9 @@
     &.is-#{$name}
       border-color: $color
 
-=control-small
-  border-radius: 2px
-  font-size: 11px
-  height: 24px
-  line-height: 16px
-  padding: 3px 6px
-=control-medium
-  font-size: 18px
-  height: 40px
-  line-height: 32px
-  padding: 3px 10px
-=control-large
-  font-size: 24px
-  height: 48px
-  line-height: 40px
-  padding: 3px 12px
-
 .input
   +form-control
-  box-shadow: inset 0 1px 2px rgba(black, 0.1)
-  display: block
+  box-shadow: inset 0 1px 2px rgba($black, 0.1)
   max-width: 100%
   width: 100%
   &[type="search"]
@@ -77,7 +29,6 @@
   &.is-flat
     border: none
     box-shadow: none
-    padding: 4px 8px
   &.is-fullwidth
     display: block
     width: 100%
@@ -87,6 +38,7 @@
 
 .textarea
   @extend .input
+  display: block
   line-height: 1.2
   max-height: 600px
   max-width: 100%

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

@@ -1,8 +1,8 @@
 .delete
-  +unselectable
+  @extend .unselectable
   -moz-appearance: none
   -webkit-appearance: none
-  background: rgba(black, 0.2)
+  background: rgba($black, 0.2)
   border: none
   border-radius: 290486px
   cursor: pointer
@@ -13,7 +13,7 @@
   width: 24px
   &:before,
   &:after
-    background: white
+    background: $white
     content: ""
     display: block
     height: 2px
@@ -28,7 +28,7 @@
   &:after
     transform: rotate(-45deg)
   &:hover
-    background: rgba(black, 0.5)
+    background: rgba($black, 0.5)
   // Sizes
   &.is-small
     height: 16px
@@ -56,9 +56,9 @@
 .hamburger
   cursor: pointer
   display: block
-  height: 50px
+  height: $nav-height
   position: relative
-  width: 50px
+  width: $nav-height
   span
     background: $text
     display: block
@@ -92,9 +92,6 @@
         margin-left: -5px
         transform: rotate(-45deg)
         transform-origin: left bottom
-  +tablet
-    height: $header-height
-    width: $header-height
 
 .heading
   display: block
@@ -143,7 +140,8 @@
   height: 24px
   justify-content: center
   line-height: 16px
-  padding: 4px 10px
+  padding-left: 10px
+  padding-right: 10px
   vertical-align: top
   white-space: nowrap
   .delete
@@ -159,23 +157,31 @@
     &.is-#{$name}
       background: $color
       color: $color-invert
-  &.is-dark
-    background: $text
-    color: $text-invert
   // Sizes
   &.is-small
     font-size: $size-small
     height: 20px
-    padding: 2px 8px
+    padding-left: 8px
+    padding-right: 8px
   &.is-medium
     font-size: $size-normal
     height: 32px
-    padding: 8px 14px
+    padding-left: 14px
+    padding-right: 14px
   &.is-large
     font-size: $size-5
     height: 40px
     line-height: 24px
-    padding: 8px 18px
+    padding-left: 18px
+    padding-right: 18px
     .delete
       margin-left: 4px
       margin-right: -8px
+
+.unselectable
+  -webkit-touch-callout: none
+  -webkit-user-select: none
+  -moz-user-select: none
+  -ms-user-select: none
+  user-select: none
+