From: Jeremy Thomas <bbxdesign@gmail.com>
Date: Sun, 10 Apr 2016 15:00:32 +0000 (+0100)
Subject: Fix code styling, Fix helpers
X-Git-Tag: 0.0.18~5
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=560a15eda1b0e60dbbeee4431aa0d2cead123977;p=thirdparty%2Fbulma.git

Fix code styling, Fix helpers
---

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 402037458..627c6061b 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/bulma/base/helpers.sass b/bulma/base/helpers.sass
index 9a46b6e91..25a87d04a 100644
--- a/bulma/base/helpers.sass
+++ b/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
 
diff --git a/bulma/components/components.sass b/bulma/components/components.sass
index 6652a4051..9caf620a1 100644
--- a/bulma/components/components.sass
+++ b/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
+
diff --git a/bulma/components/grid.sass b/bulma/components/grid.sass
index 4d8cf862c..704dc3342 100644
--- a/bulma/components/grid.sass
+++ b/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)
diff --git a/bulma/components/tabs.sass b/bulma/components/tabs.sass
index 02218cc11..df7b934c3 100644
--- a/bulma/components/tabs.sass
+++ b/bulma/components/tabs.sass
@@ -90,11 +90,10 @@
     ul
       border-bottom: none
   &.is-fullwidth
-    +tablet
-      li
-        flex: 1
-        & + li
-          margin-left: 0
-      ul
-        justify-content: center
-        text-align: center
+    li
+      flex: 1
+      & + li
+        margin-left: 0
+    ul
+      justify-content: center
+      text-align: center
diff --git a/bulma/elements/buttons.sass b/bulma/elements/buttons.sass
index d67c6c83b..f1137e340 100644
--- a/bulma/elements/buttons.sass
+++ b/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
-        border-color: transparent transparent $color-invert $color-invert !important
+      &.is-loading
+        &: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
diff --git a/bulma/elements/controls.sass b/bulma/elements/controls.sass
index 08bf83882..8c3acd716 100644
--- a/bulma/elements/controls.sass
+++ b/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
diff --git a/bulma/elements/elements.sass b/bulma/elements/elements.sass
index 2c3d87117..4d13cf24e 100644
--- a/bulma/elements/elements.sass
+++ b/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
diff --git a/bulma/elements/images.sass b/bulma/elements/images.sass
index f5ff36e6d..90f996ece 100644
--- a/bulma/elements/images.sass
+++ b/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
diff --git a/bulma/elements/messages.sass b/bulma/elements/messages.sass
index f46e2de7d..33d5e8c3c 100644
--- a/bulma/elements/messages.sass
+++ b/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)
diff --git a/bulma/elements/notifications.sass b/bulma/elements/notifications.sass
index 67c424b0c..e9edfba07 100644
--- a/bulma/elements/notifications.sass
+++ b/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)
-
diff --git a/bulma/elements/progress.sass b/bulma/elements/progress.sass
index e58df2aa8..8136f5589 100644
--- a/bulma/elements/progress.sass
+++ b/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
diff --git a/bulma/elements/titles.sass b/bulma/elements/titles.sass
index a0eb9bbd1..617a8a71e 100644
--- a/bulma/elements/titles.sass
+++ b/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
diff --git a/bulma/layout/header.sass b/bulma/layout/header.sass
index 4b089d2c6..22fa42ff3 100644
--- a/bulma/layout/header.sass
+++ b/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
 
diff --git a/bulma/layout/hero.sass b/bulma/layout/hero.sass
index cbe589d74..4a3b21697 100644
--- a/bulma/layout/hero.sass
+++ b/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