mirror of
https://github.com/jgthms/bulma.git
synced 2025-01-09 15:44:25 +00:00
Add has-icons modifier
This commit is contained in:
Jeremy Thomas
parent
656c7faedd
commit
17de5fb78f
@ -2185,6 +2185,18 @@ input[type="submit"].button {
|
|||||||
margin-bottom: 0.5em;
|
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 {
|
.help {
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
@ -2445,6 +2457,48 @@ input[type="submit"].button {
|
|||||||
padding-right: 2.25em;
|
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 {
|
.control.is-loading:after {
|
||||||
animation: spinAround 500ms infinite linear;
|
animation: spinAround 500ms infinite linear;
|
||||||
border: 2px solid #dbdbdb;
|
border: 2px solid #dbdbdb;
|
||||||
@ -2852,7 +2906,6 @@ input[type="submit"].button {
|
|||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
padding-left: 0.875em;
|
padding-left: 0.875em;
|
||||||
padding-right: 0.875em;
|
padding-right: 0.875em;
|
||||||
vertical-align: top;
|
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -409,20 +409,44 @@ doc-subtab: form
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h4 class="subtitle">With Font Awesome icons</h4>
|
<!-- Font Awesome Icons -->
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h3 class="title">With icons</h3>
|
||||||
|
<div class="content">
|
||||||
|
<p>You can append one of 2 <strong>modifiers</strong> on a control:</p>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<code>has-icons-left</code>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
and/or <code>has-icons-right</code>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<p>You also need to add a modifier on the <strong>icon</strong>:</p>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<code>icon is-left</code> if <code>has-icons-left</code> is used
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<code>icon is-right</code> if <code>has-icons-right</code> is used
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<p>The size of the <strong>input</strong> will define the size of the icon container.</p>
|
||||||
|
</div>
|
||||||
{% capture icons_example %}
|
{% capture icons_example %}
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<p class="control has-icon">
|
<p class="control has-icons-left">
|
||||||
<input class="input" type="email" placeholder="Email">
|
<input class="input" type="email" placeholder="Email">
|
||||||
<span class="icon is-small">
|
<span class="icon is-small is-left">
|
||||||
<i class="fa fa-envelope"></i>
|
<i class="fa fa-envelope"></i>
|
||||||
</span>
|
</span>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<p class="control has-icon">
|
<p class="control has-icons-left">
|
||||||
<input class="input" type="password" placeholder="Password">
|
<input class="input" type="password" placeholder="Password">
|
||||||
<span class="icon is-small">
|
<span class="icon is-small is-left">
|
||||||
<i class="fa fa-lock"></i>
|
<i class="fa fa-lock"></i>
|
||||||
</span>
|
</span>
|
||||||
</p>
|
</p>
|
||||||
@ -446,149 +470,191 @@ doc-subtab: form
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% capture icons_sizes_example %}
|
|
||||||
<div class="field">
|
|
||||||
<p class="control has-icon">
|
|
||||||
<input class="input is-small" type="email" placeholder="Email">
|
|
||||||
<span class="icon is-small">
|
|
||||||
<i class="fa fa-envelope"></i>
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="field">
|
|
||||||
<p class="control has-icon">
|
|
||||||
<input class="input" type="email" placeholder="Email">
|
|
||||||
<span class="icon is-small">
|
|
||||||
<i class="fa fa-envelope"></i>
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="field">
|
|
||||||
<p class="control has-icon">
|
|
||||||
<input class="input" type="email" placeholder="Email">
|
|
||||||
<span class="icon">
|
|
||||||
<i class="fa fa-envelope"></i>
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="field">
|
|
||||||
<p class="control has-icon">
|
|
||||||
<input class="input is-medium" type="email" placeholder="Email">
|
|
||||||
<span class="icon is-small">
|
|
||||||
<i class="fa fa-envelope"></i>
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="field">
|
|
||||||
<p class="control has-icon">
|
|
||||||
<input class="input is-medium" type="email" placeholder="Email">
|
|
||||||
<span class="icon">
|
|
||||||
<i class="fa fa-envelope"></i>
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="field">
|
|
||||||
<p class="control has-icon">
|
|
||||||
<input class="input is-medium" type="email" placeholder="Email">
|
|
||||||
<span class="icon is-medium">
|
|
||||||
<i class="fa fa-envelope"></i>
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="field">
|
|
||||||
<p class="control has-icon">
|
|
||||||
<input class="input is-large" type="email" placeholder="Email">
|
|
||||||
<span class="icon is-small">
|
|
||||||
<i class="fa fa-envelope"></i>
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="field">
|
|
||||||
<p class="control has-icon">
|
|
||||||
<input class="input is-large" type="email" placeholder="Email">
|
|
||||||
<span class="icon">
|
|
||||||
<i class="fa fa-envelope"></i>
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="field">
|
|
||||||
<p class="control has-icon">
|
|
||||||
<input class="input is-large" type="email" placeholder="Email">
|
|
||||||
<span class="icon is-medium">
|
|
||||||
<i class="fa fa-envelope"></i>
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
{% endcapture %}
|
|
||||||
<div class="columns">
|
|
||||||
<div class="column is-half">
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
<span class="tag is-success">New!</span>
|
<span class="tag is-success">New!</span>
|
||||||
|
<span class="tag is-info">0.4.2</span>
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
If the control contains an icon, Bulma will make sure the icon remains <strong>centered</strong>, no matter the size of the input <em>or</em> of the icon.
|
If the control contains an icon, Bulma will make sure the icon remains <strong>centered</strong>, no matter the size of the input <em>or</em> of the icon.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
{{icons_sizes_example}}
|
|
||||||
</div>
|
|
||||||
<div class="column is-half">
|
|
||||||
{% highlight html %}
|
|
||||||
{{icons_sizes_example}}
|
|
||||||
{% endhighlight %}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{% capture icons_sizes_right_example %}
|
{% capture has_icons_small_example %}
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<p class="control has-icon has-icon-right">
|
<label class="label is-small">Small input</label>
|
||||||
|
<p class="control has-icons-left has-icons-right">
|
||||||
<input class="input is-small" type="email" placeholder="Email">
|
<input class="input is-small" type="email" placeholder="Email">
|
||||||
<span class="icon is-small">
|
<span class="icon is-small is-left">
|
||||||
<i class="fa fa-check"></i>
|
<i class="fa fa-envelope"></i>
|
||||||
</span>
|
</span>
|
||||||
</p>
|
<span class="icon is-small is-right">
|
||||||
</div>
|
|
||||||
<div class="field">
|
|
||||||
<p class="control has-icon has-icon-right">
|
|
||||||
<input class="input" type="email" placeholder="Email">
|
|
||||||
<span class="icon">
|
|
||||||
<i class="fa fa-check"></i>
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="field">
|
|
||||||
<p class="control has-icon has-icon-right">
|
|
||||||
<input class="input is-medium" type="email" placeholder="Email">
|
|
||||||
<span class="icon is-medium">
|
|
||||||
<i class="fa fa-check"></i>
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="field">
|
|
||||||
<p class="control has-icon has-icon-right">
|
|
||||||
<input class="input is-large" type="email" placeholder="Email">
|
|
||||||
<span class="icon is-large">
|
|
||||||
<i class="fa fa-check"></i>
|
<i class="fa fa-check"></i>
|
||||||
</span>
|
</span>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
{% endcapture %}
|
{% endcapture %}
|
||||||
<div class="columns">
|
|
||||||
<div class="column is-half">
|
{% capture has_icons_normal_example %}
|
||||||
<div class="content">
|
<div class="field">
|
||||||
<p>
|
<label class="label">Normal input</label>
|
||||||
By appending the <code>has-icon-right</code>, the icon will be placed on the right side instead.
|
<p class="control has-icons-left has-icons-right">
|
||||||
</p>
|
<input class="input" type="email" placeholder="Email">
|
||||||
</div>
|
<span class="icon is-small is-left">
|
||||||
{{icons_sizes_right_example}}
|
<i class="fa fa-envelope"></i>
|
||||||
</div>
|
</span>
|
||||||
<div class="column is-half">
|
<span class="icon is-small is-right">
|
||||||
{% highlight html %}
|
<i class="fa fa-check"></i>
|
||||||
{{icons_sizes_right_example}}
|
</span>
|
||||||
{% endhighlight %}
|
</p>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="field">
|
||||||
|
<p class="control has-icons-left has-icons-right">
|
||||||
|
<input class="input" type="email" placeholder="Email">
|
||||||
|
<span class="icon is-left">
|
||||||
|
<i class="fa fa-envelope"></i>
|
||||||
|
</span>
|
||||||
|
<span class="icon is-right">
|
||||||
|
<i class="fa fa-check"></i>
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture has_icons_medium_example %}
|
||||||
|
<div class="field">
|
||||||
|
<label class="label is-medium">Medium input</label>
|
||||||
|
<p class="control has-icons-left has-icons-right">
|
||||||
|
<input class="input is-medium" type="email" placeholder="Email">
|
||||||
|
<span class="icon is-small is-left">
|
||||||
|
<i class="fa fa-envelope"></i>
|
||||||
|
</span>
|
||||||
|
<span class="icon is-small is-right">
|
||||||
|
<i class="fa fa-check"></i>
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field">
|
||||||
|
<p class="control has-icons-left has-icons-right">
|
||||||
|
<input class="input is-medium" type="email" placeholder="Email">
|
||||||
|
<span class="icon is-left">
|
||||||
|
<i class="fa fa-envelope"></i>
|
||||||
|
</span>
|
||||||
|
<span class="icon is-right">
|
||||||
|
<i class="fa fa-check"></i>
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field">
|
||||||
|
<p class="control has-icons-left has-icons-right">
|
||||||
|
<input class="input is-medium" type="email" placeholder="Email">
|
||||||
|
<span class="icon is-medium is-left">
|
||||||
|
<i class="fa fa-envelope"></i>
|
||||||
|
</span>
|
||||||
|
<span class="icon is-medium is-right">
|
||||||
|
<i class="fa fa-check"></i>
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture has_icons_large_example %}
|
||||||
|
<div class="field">
|
||||||
|
<label class="label is-large">Large input</label>
|
||||||
|
<p class="control has-icons-left has-icons-right">
|
||||||
|
<input class="input is-large" type="email" placeholder="Email">
|
||||||
|
<span class="icon is-small is-left">
|
||||||
|
<i class="fa fa-envelope"></i>
|
||||||
|
</span>
|
||||||
|
<span class="icon is-small is-right">
|
||||||
|
<i class="fa fa-check"></i>
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field">
|
||||||
|
<p class="control has-icons-left has-icons-right">
|
||||||
|
<input class="input is-large" type="email" placeholder="Email">
|
||||||
|
<span class="icon is-left">
|
||||||
|
<i class="fa fa-envelope"></i>
|
||||||
|
</span>
|
||||||
|
<span class="icon is-right">
|
||||||
|
<i class="fa fa-check"></i>
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field">
|
||||||
|
<p class="control has-icons-left has-icons-right">
|
||||||
|
<input class="input is-large" type="email" placeholder="Email">
|
||||||
|
<span class="icon is-medium is-left">
|
||||||
|
<i class="fa fa-envelope"></i>
|
||||||
|
</span>
|
||||||
|
<span class="icon is-medium is-right">
|
||||||
|
<i class="fa fa-check"></i>
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field">
|
||||||
|
<p class="control has-icons-left has-icons-right">
|
||||||
|
<input class="input is-large" type="email" placeholder="Email">
|
||||||
|
<span class="icon is-large is-left">
|
||||||
|
<i class="fa fa-envelope"></i>
|
||||||
|
</span>
|
||||||
|
<span class="icon is-large is-right">
|
||||||
|
<i class="fa fa-check"></i>
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
{% endcapture %}
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-half">
|
||||||
|
{{has_icons_small_example}}
|
||||||
|
</div>
|
||||||
|
<div class="column is-half">
|
||||||
|
{% highlight html %}
|
||||||
|
{{has_icons_small_example}}
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-half">
|
||||||
|
{{has_icons_normal_example}}
|
||||||
|
</div>
|
||||||
|
<div class="column is-half">
|
||||||
|
{% highlight html %}
|
||||||
|
{{has_icons_normal_example}}
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-half">
|
||||||
|
{{has_icons_medium_example}}
|
||||||
|
</div>
|
||||||
|
<div class="column is-half">
|
||||||
|
{% highlight html %}
|
||||||
|
{{has_icons_medium_example}}
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-half">
|
||||||
|
{{has_icons_large_example}}
|
||||||
|
</div>
|
||||||
|
<div class="column is-half">
|
||||||
|
{% highlight html %}
|
||||||
|
{{has_icons_large_example}}
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
<h3 class="title">Form addons</h3>
|
<h3 class="title">Form addons</h3>
|
||||||
|
|||||||
@ -159,6 +159,13 @@ $input-radius: $radius !default
|
|||||||
font-weight: $weight-bold
|
font-weight: $weight-bold
|
||||||
&:not(:last-child)
|
&:not(:last-child)
|
||||||
margin-bottom: 0.5em
|
margin-bottom: 0.5em
|
||||||
|
// Sizes
|
||||||
|
&.is-small
|
||||||
|
font-size: $size-small
|
||||||
|
&.is-medium
|
||||||
|
font-size: $size-medium
|
||||||
|
&.is-large
|
||||||
|
font-size: $size-large
|
||||||
|
|
||||||
.help
|
.help
|
||||||
display: block
|
display: block
|
||||||
@ -278,6 +285,7 @@ $input-radius: $radius !default
|
|||||||
position: relative
|
position: relative
|
||||||
text-align: left
|
text-align: left
|
||||||
// Modifiers
|
// Modifiers
|
||||||
|
// DEPRECATED
|
||||||
&.has-icon
|
&.has-icon
|
||||||
.icon
|
.icon
|
||||||
color: $input-icon
|
color: $input-icon
|
||||||
@ -310,6 +318,36 @@ $input-radius: $radius !default
|
|||||||
right: 0
|
right: 0
|
||||||
.input
|
.input
|
||||||
padding-right: 2.25em
|
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
|
&.is-loading
|
||||||
&:after
|
&:after
|
||||||
+loader
|
+loader
|
||||||
|
|||||||
@ -1,5 +1,6 @@
|
|||||||
.icon
|
.icon
|
||||||
align-items: center
|
align-items: center
|
||||||
|
// background-color: coral
|
||||||
display: inline-flex
|
display: inline-flex
|
||||||
justify-content: center
|
justify-content: center
|
||||||
height: 1.5rem
|
height: 1.5rem
|
||||||
|
|||||||
@ -10,7 +10,6 @@
|
|||||||
line-height: 1.5
|
line-height: 1.5
|
||||||
padding-left: 0.875em
|
padding-left: 0.875em
|
||||||
padding-right: 0.875em
|
padding-right: 0.875em
|
||||||
vertical-align: top
|
|
||||||
white-space: nowrap
|
white-space: nowrap
|
||||||
.delete
|
.delete
|
||||||
margin-left: 0.25em
|
margin-left: 0.25em
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user