library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-10-17 09:04:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add has-icons modifier

Browse Source
This commit is contained in:
Jeremy Thomas 2017-04-15 15:49:38 +01:00
parent 656c7faedd
commit 17de5fb78f
5 changed files with 288 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
docs/css/bulma-docs.css
View File

@ -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;
}

324
docs/documentation/elements/form.html
View File

@ -409,20 +409,44 @@ doc-subtab: form
</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 %}
<div class="field">
<p class="control has-icon">
<p class="control has-icons-left">
<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>
</span>
</p>
</div>
<div class="field">
<p class="control has-icon">
<p class="control has-icons-left">
<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>
</span>
</p>
@ -446,149 +470,191 @@ doc-subtab: form
</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">
<p>
<span class="tag is-success">New!</span>
<span class="tag is-info">0.4.2</span>
</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.
</p>
</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">
<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">
<span class="icon is-small">
<i class="fa fa-check"></i>
<span class="icon is-small is-left">
<i class="fa fa-envelope"></i>
</span>
</p>
</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">
<span class="icon is-small is-right">
<i class="fa fa-check"></i>
</span>
</p>
</div>
{% endcapture %}
<div class="columns">
<div class="column is-half">
<div class="content">
<p>
By appending the <code>has-icon-right</code>, the icon will be placed on the right side instead.
</p>
</div>
{{icons_sizes_right_example}}
</div>
<div class="column is-half">
{% highlight html %}
{{icons_sizes_right_example}}
{% endhighlight %}
</div>
{% capture has_icons_normal_example %}
<div class="field">
<label class="label">Normal input</label>
<p class="control has-icons-left has-icons-right">
<input class="input" 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" 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>
<h3 class="title">Form addons</h3>

38
sass/elements/form.sass
View File

@ -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

1
sass/elements/icon.sass
View File

@ -1,5 +1,6 @@
.icon
align-items: center
// background-color: coral
display: inline-flex
justify-content: center
height: 1.5rem

1
sass/elements/tag.sass
View File

@ -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