bulma-rails 0.0.17.1 → 0.0.18

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

@@ -19,14 +19,14 @@
   &:focus
     border-color: $control-active-border
     outline: none
-  &[disabled]
-    &,
-    &:hover
-      background: $background
-      border-color: $control-border
-      cursor: not-allowed
-      +placeholder
-        color: rgba($control, 0.3)
+  &[disabled],
+  &.is-disabled
+    background: $background
+    border-color: $control-border
+    cursor: not-allowed
+    pointer-events: none
+    +placeholder
+      color: rgba($control, 0.3)
 
 =form-control
   +control
@@ -60,10 +60,7 @@
   width: 100%
   &[type="search"]
     border-radius: 290486px
-  &.is-flat
-    border: none
-    box-shadow: none
-    padding: 4px 8px
+  // Sizes
   &.is-small
     +control-small
     &.is-flat
@@ -76,6 +73,11 @@
     +control-large
     &.is-flat
       padding: 4px 12px
+  // Modifiers
+  &.is-flat
+    border: none
+    box-shadow: none
+    padding: 4px 8px
   &.is-fullwidth
     display: block
     width: 100%
@@ -97,46 +99,17 @@
   cursor: pointer
   display: inline-block
   line-height: 16px
-  padding-left: 18px
   position: relative
   vertical-align: top
   input
-    +form-control
-    border-radius: 1px
-    box-shadow: inset 0 1px 1px rgba(black, 0.1)
     cursor: pointer
-    float: left
-    height: 14px
-    left: 0
-    outline: none
-    padding: 0
-    position: absolute
-    top: 1px
-    width: 14px
-    &:after
-      +arrow($control-active-background-invert)
-      height: 4px
-      left: 3px
-      opacity: 0
-      position: absolute
-      top: 3px
-      transform: rotate(-45deg) scale(1)
-    &:checked
-      background: $control-active-background
-      border-color: $control-active-background
-      box-shadow: none
-      &:after
-        opacity: 1
   &:hover
     color: $control-hover
-    input
-      border-color: $control-hover-border
-      &:checked
-        border-color: $control-active-border
   &.is-disabled
-    &,
-    &:hover
-      color: $text-light
+    color: $text-light
+    pointer-events: none
+    input
+      pointer-events: none
 
 .checkbox
   @extend %control-with-element
@@ -145,16 +118,6 @@
   @extend %control-with-element
   & + .radio
     margin-left: 10px
-  input
-    border-radius: 8px
-    &:after
-      background: $link-invert
-      border: 0
-      border-radius: 2px
-      left: 4px
-      top: 4px
-      transform: none
-      width: 4px
 
 .select
   display: inline-block
@@ -214,39 +177,14 @@
 .control
   position: relative
   text-align: left
-  &.is-loading
-    &:after
-      @extend .loader
-      position: absolute !important
-      right: 8px
-      top: 8px
   &:not(:last-child)
     margin-bottom: 10px
-  &.has-icon
-    & > .fa
-      +fa(14px, 16px)
-      color: $text-light
-      pointer-events: none
-      position: absolute
-      top: 8px
-      z-index: 4
-    .input
-      &:focus + .fa
-        color: $text-strong
-    &:not(.has-icon-right)
-      & > .fa
-        left: 8px
-      .input
-        padding-left: 32px
-  &.has-icon-right
-    & > .fa
-      right: 8px
-    .input
-      padding-right: 32px
+  // Modifiers
   &.has-addons
     display: flex
-    .input,
+    justify-content: flex-start
     .button,
+    .input,
     .select
       border-radius: 0
       margin-right: -1px
@@ -261,10 +199,36 @@
           border-radius: $radius 0 0 $radius
       &:last-child
         border-radius: 0 $radius $radius 0
-    &.is-centered
+        select
+          border-radius: 0 $radius $radius 0
+    &.has-addons-centered
       justify-content: center
+    &.has-addons-right
+      justify-content: flex-end
+  &.has-icon
+    & > .fa
+      +fa(14px, 16px)
+      color: $text-light
+      pointer-events: none
+      position: absolute
+      top: 8px
+      z-index: 4
+    .input
+      &:focus + .fa
+        color: $text-strong
+    &:not(.has-icon-right)
+      & > .fa
+        left: 8px
+      .input
+        padding-left: 32px
+    &.has-icon-right
+      & > .fa
+        right: 8px
+      .input
+        padding-right: 32px
   &.is-grouped
     display: flex
+    justify-content: flex-start
     & > .button,
     & > .input,
     & > .select
@@ -272,9 +236,19 @@
         margin-right: 10px
     & > .input
       flex: 1
+    &.is-grouped-centered
+      justify-content: center
+    &.is-grouped-right
+      justify-content: flex-end
   &.is-horizontal
     +tablet
       display: flex
       & > .control
         display: flex
         flex: 5
+  &.is-loading
+    &:after
+      @extend .loader
+      position: absolute !important
+      right: 8px
+      top: 8px

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

@@ -39,6 +39,7 @@
     transform: rotate(-45deg)
   &:hover
     background: $red
+  // Sizes
   &.is-small
     height: 16px
     width: 16px
@@ -54,6 +55,7 @@
   .fa
     font-size: inherit
     line-height: inherit
+  // Sizes
   &.is-small
     +fa(14px, 16px)
   &.is-medium
@@ -86,6 +88,7 @@
       margin-top: 4px
   &:hover
     background: $background
+  // Modifers
   &.is-active
     span
       background: $link
@@ -121,17 +124,6 @@
     overflow: auto
     max-width: 100%
 
-.image
-  display: block
-  position: relative
-  vertical-align: top
-  img
-    +overlay
-    display: block
-    width: 100%
-  &.is-3x2
-    padding-top: 66.6666%
-
 .loader
   animation: spin-around 500ms infinite linear
   border: 2px solid $border
@@ -152,44 +144,48 @@
   vertical-align: top
 
 .tag
+  align-items: center
   background: $background
-  border-radius: $radius
-  box-shadow: inset 0 -1px 0 rgba(black, 0.1)
+  border-radius: 290486px
   color: $text
-  display: inline-block
+  display: inline-flex
   font-size: 12px
   height: 24px
+  justify-content: center
   line-height: 16px
   padding: 4px 10px
   vertical-align: top
   white-space: nowrap
+  .delete
+    margin-left: 4px
+    margin-right: -6px
+  &:not(.is-large)
+    .delete
+      @extend .delete.is-small
+  // Colors
+  @each $name, $pair in $colors
+    $color: nth($pair, 1)
+    $color-invert: nth($pair, 2)
+    &.is-#{$name}
+      background: $color
+      color: $color-invert
   &.is-dark
     background: $text
     color: $text-invert
-  &.is-rounded
-    border-radius: 290486px
+  // Sizes
+  &.is-small
+    font-size: $size-small
+    height: 20px
+    padding: 2px 8px
   &.is-medium
-    box-shadow: inset 0 -2px 0 rgba(black, 0.1)
     font-size: $size-normal
     height: 32px
-    padding: 7px 14px 9px
-  &:not(.is-large)
-    .delete
-      @extend .delete.is-small
-      margin-left: 4px
-      margin-right: -6px
+    padding: 8px 14px
   &.is-large
-    box-shadow: inset 0 -2px 0 rgba(black, 0.1)
     font-size: $size-5
     height: 40px
     line-height: 24px
-    padding: 7px 18px 9px
+    padding: 8px 18px
     .delete
       margin-left: 4px
       margin-right: -8px
-  @each $name, $pair in $colors
-    $color: nth($pair, 1)
-    $color-invert: nth($pair, 2)
-    &.is-#{$name}
-      background: $color
-      color: $color-invert

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

@@ -5,6 +5,7 @@ $dimensions: 16 24 32 48 64 96 128
   position: relative
   img
     display: block
+  // Ratio
   &.is-square,
   &.is-1by1,
   &.is-4by3,
@@ -26,6 +27,7 @@ $dimensions: 16 24 32 48 64 96 128
     padding-top: 56.25%
   &.is-2by1
     padding-top: 50%
+  // Sizes
   @each $dimension in $dimensions
     &.is-#{$dimension}x#{$dimension}
       height: $dimension * 1px

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

@@ -9,11 +9,9 @@
   background: $text
   border-radius: $radius $radius 0 0
   color: $text-invert
-  font-size: 10px
-  font-weight: bold
-  letter-spacing: 1px
-  padding: 3px 8px
-  text-transform: uppercase
+  padding: 7px 10px
+  strong
+    color: inherit
   & + .message-body
     border-radius: 0 0 $radius $radius
     border-top: none
@@ -22,6 +20,7 @@
   @extend .block
   background: $background
   border-radius: $radius
+  // Colors
   @each $name, $pair in $colors
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)

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

@@ -5,19 +5,19 @@
   border-radius: $radius
   padding: 16px 20px
   position: relative
+  .delete
+    background: rgba(black, 0.2)
+    border-radius: 0 $radius
+    float: right
+    margin: -16px -20px 0 20px
+    &:hover
+      background: rgba(black, 0.5)
   .title
     color: inherit
+  // Colors
   @each $name, $pair in $colors
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
     &.is-#{$name}
       background: $color
       color: $color-invert
-  .delete
-    background: rgba(black, 0.2)
-    border-radius: 0 $radius
-    float: right
-    margin: -16px -20px 0 20px
-    &:hover
-      background: rgba(black, 0.5)
-

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

@@ -1,7 +1,7 @@
 .progress
+  @extend .block
   -moz-appearance: none
   -webkit-appearance: none
-  @extend .block
   border: none
   border-radius: 290486px
   display: block
@@ -15,12 +15,7 @@
     background: $text
   &::-moz-progress-bar
     background: $text
-  &.is-small
-    height: 8px
-  &.is-medium
-    height: 16px
-  &.is-large
-    height: 20px
+  // Colors
   @each $name, $pair in $colors
     $color: nth($pair, 1)
     &.is-#{$name}
@@ -28,3 +23,10 @@
         background: $color
       &::-moz-progress-bar
         background: $color
+  // Sizes
+  &.is-small
+    height: 8px
+  &.is-medium
+    height: 16px
+  &.is-large
+    height: 20px

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

@@ -5,11 +5,11 @@
   em,
   span
     font-weight: $weight-title-normal
-  strong
-    font-weight: $weight-title-bold
   a
     &:hover
       border-bottom: 1px solid
+  strong
+    font-weight: $weight-title-bold
   .tag
     vertical-align: bottom
 
@@ -17,51 +17,55 @@
   color: $text-strong
   font-size: $size-large
   line-height: 1
-  strong
-    color: inherit
   code
     display: inline-block
     font-size: $size-large
-  & + .subtitle
-    margin-top: -10px
+  strong
+    color: inherit
   & + .highlight
     margin-top: -10px
-  &.is-normal
-    font-weight: 400
-    strong
-      font-weight: 700
+  & + .subtitle
+    margin-top: -10px
+  // Colors
   @each $size in $sizes
     $i: index($sizes, $size)
     &.is-#{$i}
       font-size: $size
       code
         font-size: nth($sizes, min($i + 1, 6))
+  // Modifiers
+  &.is-normal
+    font-weight: 400
+    strong
+      font-weight: 700
+  // Responsiveness
   +tablet
     & + .subtitle
       margin-top: -15px
 
 .subtitle
+  color: $text
   font-size: $size-medium
   line-height: 1.125
-  & + .title
-    margin-top: -20px
-  strong
-    color: $text-strong
   code
     border-radius: $radius
     display: inline-block
     font-size: $size-normal
     padding: 2px 3px
     vertical-align: top
-  & + .text
-    margin-top: 20px
-  &.is-normal
-    font-weight: 400
-    strong
-      font-weight: 700
+  strong
+    color: $text-strong
+  & + .title
+    margin-top: -20px
+  // Colors
   @each $size in $sizes
     $i: index($sizes, $size)
     &.is-#{$i}
       font-size: $size
       code
         font-size: nth($sizes, min($i + 1, 6))
+  // Modifiers
+  &.is-normal
+    font-weight: 400
+    strong
+      font-weight: 700