RubyGems - bulma-rails - Versions diffs - 0.0.24 → 0.0.26 - Mend

bulma-rails 0.0.24 → 0.0.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (35) hide show

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

@@ -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 CHANGED

@@ -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 CHANGED

@@ -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 CHANGED

@@ -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 CHANGED

@@ -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 CHANGED

@@ -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 CHANGED

@@ -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} RENAMED

@@ -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 CHANGED

@@ -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