Add link button

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 97aa595f1f6ce9c8fc4289402400589ff65492a7..64ece6b9a0389ebf16ef00478f315d2343554066 100644 (file)
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,8 +2,12 @@
 
 ### Added
 
-* `.control.is-inline` for horizontal forms
+* `.pagination`
+* `.control.is-horizontal` for horizontal forms
+* `.help` for controls
 
 ### Updated
 
+* `.button` needs an `.icon` now
 * `.control.is-grouped` renamed to `.control.has-addons`
+* `.control.is-inline` renamed to `.control.is-grouped`

diff --git a/bulma/elements/buttons.sass b/bulma/elements/buttons.sass
index 223f32e734aec086237a7941cd698ed14d8970c6..cf4081dc26db5b0885505dd379deb3187ab6eee1 100644 (file)
--- a/bulma/elements/buttons.sass
+++ b/bulma/elements/buttons.sass
@@ -67,6 +67,14 @@
             background: rgba(black, 0.05)
       &.is-loading:after
         border-color: transparent transparent $color-invert $color-invert !important
+  &.is-link
+    border-color: transparent
+    color: $text
+    text-decoration: underline
+    &:hover,
+    &:focus
+      background: $border
+      color: $text-strong
   &.is-small
     +button-small
     .icon.is-small

diff --git a/bulma/elements/controls.sass b/bulma/elements/controls.sass
index fb478da92958a08a6ac002a05bdd880128cc4603..4d341afd3adae8ee2750dd0e39fe70fb82ae7ccd 100644 (file)
--- a/bulma/elements/controls.sass
+++ b/bulma/elements/controls.sass
@@ -31,10 +31,8 @@
   +control
   @each $name, $pair in $colors
     $color: nth($pair, 1)
-    $color-invert: nth($pair, 2)
     &.is-#{$name}
       border-color: $color
-      color: $color
 
 =control-small
   border-radius: 2px
@@ -188,14 +186,29 @@
 .label
   color: $text-strong
   display: block
+  font-weight: bold
   &:not(:last-child)
     margin-bottom: 5px
 
+.help
+  display: block
+  font-size: $size-small
+  margin-top: 5px
+  @each $name, $pair in $colors
+    $color: nth($pair, 1)
+    &.is-#{$name}
+      color: $color
+
+// Containers
+
 .control-label
-  flex: 1
-  margin-right: 20px
-  padding-top: 7px
-  text-align: right
+  +mobile
+    margin-bottom: 5px
+  +tablet
+    flex: 1
+    margin-right: 20px
+    padding-top: 7px
+    text-align: right
 
 .control
   position: relative
@@ -210,17 +223,25 @@
     margin-bottom: 10px
   &.has-icon
     & > .fa
-      +fa(14px, 20px)
+      +fa(14px, 16px)
       color: $text-light
-      left: 6px
       pointer-events: none
       position: absolute
-      top: 6px
+      top: 8px
       z-index: 4
     .input
-      padding-left: 32px
       &:focus + .fa
-        color: $control-active
+        color: $text-strong
+    &:not(.has-icon-right)
+      & > .fa
+        left: 8px
+      .input
+        padding-left: 32px
+  &.has-icon-right
+    & > .fa
+      right: 8px
+    .input
+      padding-right: 32px
   &.has-addons
     display: flex
     .input,
@@ -251,7 +272,8 @@
     & > .input
       flex: 1
   &.is-horizontal
-    display: flex
-    & > .control
+    +tablet
       display: flex
-      flex: 5
+      & > .control
+        display: flex
+        flex: 5