diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 588adb90..ff8dc59d 100644
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -2185,6 +2185,18 @@ input[type="submit"].button {
margin-bottom: 0.5em;
}
+.label.is-small {
+ font-size: 0.75rem;
+}
+
+.label.is-medium {
+ font-size: 1.25rem;
+}
+
+.label.is-large {
+ font-size: 1.5rem;
+}
+
.help {
display: block;
font-size: 0.75rem;
@@ -2445,6 +2457,48 @@ input[type="submit"].button {
padding-right: 2.25em;
}
+.control.has-icons-left .input:focus ~ .icon, .control.has-icons-right .input:focus ~ .icon {
+ color: #7a7a7a;
+}
+
+.control.has-icons-left .input.is-small ~ .icon, .control.has-icons-right .input.is-small ~ .icon {
+ font-size: 0.75rem;
+}
+
+.control.has-icons-left .input.is-medium ~ .icon, .control.has-icons-right .input.is-medium ~ .icon {
+ font-size: 1.25rem;
+}
+
+.control.has-icons-left .input.is-large ~ .icon, .control.has-icons-right .input.is-large ~ .icon {
+ font-size: 1.5rem;
+}
+
+.control.has-icons-left .icon, .control.has-icons-right .icon {
+ color: #dbdbdb;
+ height: 2.25em;
+ pointer-events: none;
+ position: absolute;
+ top: 0;
+ width: 2.25em;
+ z-index: 4;
+}
+
+.control.has-icons-left .input {
+ padding-left: 2.25em;
+}
+
+.control.has-icons-left .icon.is-left {
+ left: 0;
+}
+
+.control.has-icons-right .input {
+ padding-right: 2.25em;
+}
+
+.control.has-icons-right .icon.is-right {
+ right: 0;
+}
+
.control.is-loading:after {
animation: spinAround 500ms infinite linear;
border: 2px solid #dbdbdb;
@@ -2852,7 +2906,6 @@ input[type="submit"].button {
line-height: 1.5;
padding-left: 0.875em;
padding-right: 0.875em;
- vertical-align: top;
white-space: nowrap;
}
diff --git a/docs/documentation/elements/form.html b/docs/documentation/elements/form.html
index 2352e803..f22b6624 100644
--- a/docs/documentation/elements/form.html
+++ b/docs/documentation/elements/form.html
@@ -409,20 +409,44 @@ doc-subtab: form
-
With Font Awesome icons
+
+
+
+ With icons
+
+
You can append one of 2 modifiers on a control:
+
+ -
+
has-icons-left
+
+ -
+ and/or
has-icons-right
+
+
+
You also need to add a modifier on the icon:
+
+ -
+
icon is-left
if has-icons-left
is used
+
+ -
+
icon is-right
if has-icons-right
is used
+
+
+
The size of the input will define the size of the icon container.
+
{% capture icons_example %}
-
+
-
+
@@ -446,149 +470,191 @@ doc-subtab: form
-{% capture icons_sizes_example %}
-
-
-
-
-
-
-
-
-
-{% endcapture %}
-
-
New!
+ 0.4.2
If the control contains an icon, Bulma will make sure the icon remains centered, no matter the size of the input or of the icon.
- {{icons_sizes_example}}
-
-
-{% highlight html %}
-{{icons_sizes_example}}
-{% endhighlight %}
-
-
-{% capture icons_sizes_right_example %}
+{% capture has_icons_small_example %}
-
+
+
-
-
+
+
-
-
-
-
-
{% endcapture %}
-
-
-
-
- By appending the has-icon-right
, the icon will be placed on the right side instead.
-
-
- {{icons_sizes_right_example}}
-
-
-{% highlight html %}
-{{icons_sizes_right_example}}
-{% endhighlight %}
-
+
+{% capture has_icons_normal_example %}
+
+
+
+
+
+
+
+
+
+
+
+
+{% endcapture %}
+
+{% capture has_icons_medium_example %}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+{% endcapture %}
+
+{% capture has_icons_large_example %}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+{% endcapture %}
+
+
+{{has_icons_small_example}}
+
+
+{% highlight html %}
+{{has_icons_small_example}}
+{% endhighlight %}
+
+
+
+
+
+{{has_icons_normal_example}}
+
+
+{% highlight html %}
+{{has_icons_normal_example}}
+{% endhighlight %}
+
+
+
+
+
+{{has_icons_medium_example}}
+
+
+{% highlight html %}
+{{has_icons_medium_example}}
+{% endhighlight %}
+
+
+
+
+
+{{has_icons_large_example}}
+
+
+{% highlight html %}
+{{has_icons_large_example}}
+{% endhighlight %}
+
+
+
Form addons
diff --git a/sass/elements/form.sass b/sass/elements/form.sass
index 63ed41b2..21494fdb 100644
--- a/sass/elements/form.sass
+++ b/sass/elements/form.sass
@@ -159,6 +159,13 @@ $input-radius: $radius !default
font-weight: $weight-bold
&:not(:last-child)
margin-bottom: 0.5em
+ // Sizes
+ &.is-small
+ font-size: $size-small
+ &.is-medium
+ font-size: $size-medium
+ &.is-large
+ font-size: $size-large
.help
display: block
@@ -278,6 +285,7 @@ $input-radius: $radius !default
position: relative
text-align: left
// Modifiers
+ // DEPRECATED
&.has-icon
.icon
color: $input-icon
@@ -310,6 +318,36 @@ $input-radius: $radius !default
right: 0
.input
padding-right: 2.25em
+ &.has-icons-left,
+ &.has-icons-right
+ .input
+ &:focus
+ & ~ .icon
+ color: $input-icon-active
+ &.is-small ~ .icon
+ font-size: $size-small
+ &.is-medium ~ .icon
+ font-size: $size-medium
+ &.is-large ~ .icon
+ font-size: $size-large
+ .icon
+ color: $input-icon
+ height: 2.25em
+ pointer-events: none
+ position: absolute
+ top: 0
+ width: 2.25em
+ z-index: 4
+ &.has-icons-left
+ .input
+ padding-left: 2.25em
+ .icon.is-left
+ left: 0
+ &.has-icons-right
+ .input
+ padding-right: 2.25em
+ .icon.is-right
+ right: 0
&.is-loading
&:after
+loader
diff --git a/sass/elements/icon.sass b/sass/elements/icon.sass
index e1c3735a..b23c27e0 100644
--- a/sass/elements/icon.sass
+++ b/sass/elements/icon.sass
@@ -1,5 +1,6 @@
.icon
align-items: center
+ // background-color: coral
display: inline-flex
justify-content: center
height: 1.5rem
diff --git a/sass/elements/tag.sass b/sass/elements/tag.sass
index db940904..477c6622 100644
--- a/sass/elements/tag.sass
+++ b/sass/elements/tag.sass
@@ -10,7 +10,6 @@
line-height: 1.5
padding-left: 0.875em
padding-right: 0.875em
- vertical-align: top
white-space: nowrap
.delete
margin-left: 0.25em