Fix code styling, Fix helpers

CHANGELOG.md

@@ -1,5 +1,30 @@
 # Bulma Changelog
 
+## 0.0.18
+
+### BREAKING
+
+* `.is-text-*` renamed to `.has-text-*`
+* `.is-gapless` renamed to `.has-no-gap`
+* `.is-marginless` renamed to `.has-no-margin`
+
+### Added
+
+* **small tag**: `.tag.is-small`
+
+### Fixed
+
+* disabled input with element
+
+### Removed
+
+* removed `box-shadow` from `.tag`
+* custom checkboxes and radio buttons
+
+### Updated
+
+* `.tag` uses `display: inline-flex` now
+
 ## 0.0.17
 
 ### Added

bulma/base/helpers.sass

@@ -26,13 +26,13 @@
 
 // Text
 
-.is-text-centered
+.has-text-centered
   text-align: center
 
-.is-text-left
+.has-text-left
   text-align: left
 
-.is-text-right
+.has-text-right
   text-align: right
 
 // Visibility
@@ -55,12 +55,12 @@
 
 // Other
 
+.has-no-margin
+  margin: 0 !important
+
 .is-disabled
   pointer-events: none
 
-.is-marginless
-  margin: 0 !important
-
 .is-unselectable
   +unselectable
 

bulma/components/components.sass

@@ -16,4 +16,13 @@
   background: white
   border-radius: 5px
   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
+  &:active
+    box-shadow: inset 0 1px 2px rgba(black, 0.2), 0 0 0 1px $link
+

bulma/components/grid.sass

@@ -109,7 +109,7 @@
     justify-content: center
   &.is-mobile
     display: flex
-  &.is-gapless
+  &.has-no-gap
     margin-left: 0
     margin-right: 0
     &:not(:last-child)

bulma/components/tabs.sass

@@ -90,11 +90,10 @@
     ul
       border-bottom: none
   &.is-fullwidth
-    +tablet
+    li
-      li
+      flex: 1
-        flex: 1
+      & + li
-        & + li
+        margin-left: 0
-          margin-left: 0
+    ul
-      ul
+      justify-content: center
-        justify-content: center
+      text-align: center
-        text-align: center

bulma/elements/buttons.sass

@@ -27,15 +27,19 @@
     font-size: $size-small
     line-height: 1
     margin-top: 5px
-  .icon
+  .icon,
+  .tag
     &:first-child
+      margin-left: -2px
       margin-right: 4px
     &:last-child
       margin-left: 4px
+      margin-right: -2px
   &:hover
     color: $control-hover
   &:active
     box-shadow: inset 0 1px 2px rgba(black, 0.2)
+  // Colors
   @each $name, $pair in $colors
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
@@ -50,14 +54,6 @@
         color: $color-invert
       &:active
         border-color: transparent
-      &.is-outlined
-        background: transparent
-        border-color: $color
-        color: $color
-        &:hover,
-        &:focus
-          border-color: darken($color, 10%)
-          color: darken($color, 10%)
       &.is-inverted
         background: $color-invert
         color: $color
@@ -69,8 +65,17 @@
           color: $color-invert
           &:hover
             background: rgba(black, 0.05)
-      &.is-loading:after
+      &.is-loading
-        border-color: transparent transparent $color-invert $color-invert !important
+        &:after
+          border-color: transparent transparent $color-invert $color-invert !important
+      &.is-outlined
+        background: transparent
+        border-color: $color
+        color: $color
+        &:hover,
+        &:focus
+          border-color: darken($color, 10%)
+          color: darken($color, 10%)
   &.is-link
     border-color: transparent
     color: $text
@@ -79,17 +84,22 @@
     &:focus
       background: $border
       color: $text-strong
+  // Sizes
   &.is-small
     +button-small
   &.is-medium
     +button-medium
   &.is-large
     +button-large
+  // Modifiers
+  &[disabled],
+  &.is-disabled
+    opacity: 0.5
+  &.is-flexible
+    height: auto
   &.is-fullwidth
     display: block
     width: 100%
-  &.is-flexible
-    height: auto
   &.is-loading
     color: transparent
     pointer-events: none
@@ -97,7 +107,3 @@
       @extend .loader
       +center(16px)
       position: absolute !important
-  &.is-disabled,
-  &[disabled]
-    opacity: 0.5
-    pointer-events: none

bulma/elements/controls.sass

@@ -19,14 +19,14 @@
   &:focus
     border-color: $control-active-border
     outline: none
-  &[disabled]
+  &[disabled],
-    &,
+  &.is-disabled
-    &:hover
+    background: $background
-      background: $background
+    border-color: $control-border
-      border-color: $control-border
+    cursor: not-allowed
-      cursor: not-allowed
+    pointer-events: none
-      +placeholder
+    +placeholder
-        color: rgba($control, 0.3)
+      color: rgba($control, 0.3)
 
 =form-control
   +control
@@ -60,10 +60,7 @@
   width: 100%
   &[type="search"]
     border-radius: 290486px
-  &.is-flat
+  // Sizes
-    border: none
-    box-shadow: none
-    padding: 4px 8px
   &.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
-    &,
+    color: $text-light
-    &:hover
+    pointer-events: none
-      color: $text-light
+    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,14 +177,34 @@
 .control
   position: relative
   text-align: left
-  &.is-loading
-    &:after
-      @extend .loader
-      position: absolute !important
-      right: 8px
-      top: 8px
   &:not(:last-child)
     margin-bottom: 10px
+  // Modifiers
+  &.has-addons
+    display: flex
+    justify-content: flex-start
+    .button,
+    .input,
+    .select
+      border-radius: 0
+      margin-right: -1px
+      &:hover
+        z-index: 2
+      &:active,
+      &:focus
+        z-index: 3
+      &:first-child
+        border-radius: $radius 0 0 $radius
+        select
+          border-radius: $radius 0 0 $radius
+      &:last-child
+        border-radius: 0 $radius $radius 0
+        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)
@@ -238,33 +221,14 @@
         left: 8px
       .input
         padding-left: 32px
-  &.has-icon-right
+    &.has-icon-right
-    & > .fa
+      & > .fa
-      right: 8px
+        right: 8px
-    .input
+      .input
-      padding-right: 32px
+        padding-right: 32px
-  &.has-addons
-    display: flex
-    .input,
-    .button,
-    .select
-      border-radius: 0
-      margin-right: -1px
-      &:hover
-        z-index: 2
-      &:active,
-      &:focus
-        z-index: 3
-      &:first-child
-        border-radius: $radius 0 0 $radius
-        select
-          border-radius: $radius 0 0 $radius
-      &:last-child
-        border-radius: 0 $radius $radius 0
-    &.is-centered
-      justify-content: center
   &.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

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
+  border-radius: 290486px
-  box-shadow: inset 0 -1px 0 rgba(black, 0.1)
   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
-  &.is-dark
+  .delete
-    background: $text
+    margin-left: 4px
-    color: $text-invert
+    margin-right: -6px
-  &.is-rounded
-    border-radius: 290486px
-  &.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
+  // Colors
-      margin-right: -6px
-  &.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
-    .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
+  &.is-dark
+    background: $text
+    color: $text-invert
+  // Sizes
+  &.is-small
+    font-size: $size-small
+    height: 20px
+    padding: 2px 8px
+  &.is-medium
+    font-size: $size-normal
+    height: 32px
+    padding: 8px 14px
+  &.is-large
+    font-size: $size-5
+    height: 40px
+    line-height: 24px
+    padding: 8px 18px
+    .delete
+      margin-left: 4px
+      margin-right: -8px

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

bulma/elements/messages.sass

@@ -9,11 +9,9 @@
   background: $text
   border-radius: $radius $radius 0 0
   color: $text-invert
-  font-size: 10px
+  padding: 7px 10px
-  font-weight: bold
+  strong
-  letter-spacing: 1px
+    color: inherit
-  padding: 3px 8px
-  text-transform: uppercase
   & + .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)

bulma/elements/notifications.sass

@@ -5,14 +5,6 @@
   border-radius: $radius
   padding: 16px 20px
   position: relative
-  .title
-    color: inherit
-  @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
@@ -20,4 +12,12 @@
     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

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
+  // Colors
-    height: 8px
-  &.is-medium
-    height: 16px
-  &.is-large
-    height: 20px
   @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

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
+  strong
-    margin-top: -10px
+    color: inherit
   & + .highlight
     margin-top: -10px
-  &.is-normal
+  & + .subtitle
-    font-weight: 400
+    margin-top: -10px
-    strong
+  // Colors
-      font-weight: 700
   @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
+  strong
-    margin-top: 20px
+    color: $text-strong
-  &.is-normal
+  & + .title
-    font-weight: 400
+    margin-top: -20px
-    strong
+  // Colors
-      font-weight: 700
   @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

bulma/layout/header.sass

@@ -41,6 +41,11 @@
     line-height: 24px
   .button + .button
     margin-left: 10px
+  .tag
+    &:first-child
+      margin-right: 5px
+    &:last-child
+      margin-left: 5px
   +mobile
     text-align: left
 

bulma/layout/hero.sass

@@ -33,7 +33,6 @@
 
 .hero
   background: white
-  text-align: center
   .header
     background: none
     .container
@@ -141,7 +140,3 @@
       flex: 1
       flex-direction: column
       justify-content: center
-  &.is-left
-    text-align: left
-  &.is-right
-    text-align: right