library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2025-01-09 15:44:25 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #768 from jgthms/release/0.4.2

Browse Source 
Release/0.4.2
This commit is contained in:
Jeremy Thomas 2017-05-28 16:18:14 +01:00 committed by GitHub
commit bbb841863d
9 changed files with 164 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
CHANGELOG.md
View File

@ -1,5 +1,13 @@
# Bulma Changelog
## 0.4.2
* Fix #728 selected row on striped table
* Fix #747 remove flex-shrink for is-expanded
* Fix #702 add icons support for select dropdown
* Fix #712 delete button as flexbox item
* Fix #759 static button
## 0.4.1
* Fix #568 max-width container

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

@ -1617,6 +1617,14 @@ a.box:active {
position: absolute !important;
}
.button.is-static {
background-color: whitesmoke;
border-color: #dbdbdb;
color: #7a7a7a;
box-shadow: none;
pointer-events: none;
}
button.button,
input[type="submit"].button {
line-height: 1;
@ -2308,7 +2316,6 @@ input[type="submit"].button {
.field.has-addons .control.is-expanded {
flex-grow: 1;
flex-shrink: 0;
}
.field.has-addons.has-addons-centered {
@ -2459,19 +2466,27 @@ input[type="submit"].button {
padding-right: 2.25em;
}
.control.has-icons-left .input:focus ~ .icon, .control.has-icons-right .input:focus ~ .icon {
.control.has-icons-left .input:focus ~ .icon,
.control.has-icons-left .select select:focus ~ .icon, .control.has-icons-right .input:focus ~ .icon,
.control.has-icons-right .select select:focus ~ .icon {
color: #7a7a7a;
}
.control.has-icons-left .input.is-small ~ .icon, .control.has-icons-right .input.is-small ~ .icon {
.control.has-icons-left .input.is-small ~ .icon,
.control.has-icons-left .select select.is-small ~ .icon, .control.has-icons-right .input.is-small ~ .icon,
.control.has-icons-right .select select.is-small ~ .icon {
font-size: 0.75rem;
}
.control.has-icons-left .input.is-medium ~ .icon, .control.has-icons-right .input.is-medium ~ .icon {
.control.has-icons-left .input.is-medium ~ .icon,
.control.has-icons-left .select select.is-medium ~ .icon, .control.has-icons-right .input.is-medium ~ .icon,
.control.has-icons-right .select select.is-medium ~ .icon {
font-size: 1.25rem;
}
.control.has-icons-left .input.is-large ~ .icon, .control.has-icons-right .input.is-large ~ .icon {
.control.has-icons-left .input.is-large ~ .icon,
.control.has-icons-left .select select.is-large ~ .icon, .control.has-icons-right .input.is-large ~ .icon,
.control.has-icons-right .select select.is-large ~ .icon {
font-size: 1.5rem;
}
@ -2485,7 +2500,8 @@ input[type="submit"].button {
z-index: 4;
}
.control.has-icons-left .input {
.control.has-icons-left .input,
.control.has-icons-left .select select {
padding-left: 2.25em;
}
@ -2493,7 +2509,8 @@ input[type="submit"].button {
left: 0;
}
.control.has-icons-right .input {
.control.has-icons-right .input,
.control.has-icons-right .select select {
padding-right: 2.25em;
}
@ -2904,11 +2921,11 @@ input[type="submit"].button {
padding: 0.25em 0.5em;
}
.table.is-striped tbody tr:nth-child(even) {
.table.is-striped tbody tr:not(.is-selected):nth-child(even) {
background-color: #fafafa;
}
.table.is-striped tbody tr:nth-child(even):hover {
.table.is-striped tbody tr:not(.is-selected):nth-child(even):hover {
background-color: whitesmoke;
}
@ -3142,8 +3159,14 @@ input[type="submit"].button {
border-radius: 290486px;
cursor: pointer;
display: inline-block;
flex-grow: 0;
flex-shrink: 0;
font-size: 1rem;
height: 20px;
max-height: 20px;
max-width: 20px;
min-height: 20px;
min-width: 20px;
outline: none;
position: relative;
vertical-align: top;
@ -3771,8 +3794,14 @@ input[type="submit"].button {
border-radius: 290486px;
cursor: pointer;
display: inline-block;
flex-grow: 0;
flex-shrink: 0;
font-size: 1rem;
height: 20px;
max-height: 20px;
max-width: 20px;
min-height: 20px;
min-width: 20px;
outline: none;
position: relative;
vertical-align: top;

29
docs/documentation/elements/button.html
View File

@ -232,6 +232,35 @@ doc-subtab: button
<div class="column">
{% highlight html %}
{{button_loading_example}}
{% endhighlight %}
</div>
</div>
<p id="static-button" style="margin-bottom: 0.5rem;">
<span class="tag is-success">New!</span>
<span class="tag is-info">0.4.2</span>
</p>
<h4 class="subtitle">
Static
</h4>
{% capture button_static_example %}
<span class="button is-static">Static</span>
{% endcapture %}
<div class="columns">
<div class="column">
<div class="content">
<p>
You can create a <strong>non-interactive button</strong> by using the <code>is-static</code> modifier. This is useful to align a text label with an input, for example when using <a href="{{site.url}}/documentation/elements/form#form-addons">form addons</a>.
</p>
</div>
{{button_static_example}}
</div>
<div class="column">
{% highlight html %}
{{button_static_example}}
{% endhighlight %}
</div>
</div>

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

@ -476,11 +476,44 @@ doc-subtab: form
</div>
</div>
{% capture select_icons_example %}
<div class="field">
<p class="control has-icons-left">
<span class="select">
<select>
<option selected>Country</option>
<option>Select dropdown</option>
<option>With options</option>
</select>
</span>
<span class="icon is-small is-left">
<i class="fa fa-globe"></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>
You can now append icons to <strong>select dropdowns</strong> as well.
</p>
</div>
{{select_icons_example}}
</div>
<div class="column is-half">
{% highlight html %}
{{select_icons_example}}
{% endhighlight %}
</div>
</div>
<div class="content">
<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>
@ -663,7 +696,7 @@ doc-subtab: form
<hr>
<h3 class="title">Form addons</h3>
<h3 id="form-addons" class="title">Form addons</h3>
<div class="content">
<p>If you want to <strong>attach</strong> controls together, use the <code>has-addons</code> modifier on the <code>control</code> container:</p>
</div>
@ -687,6 +720,37 @@ doc-subtab: form
{% endhighlight %}
<div class="content">
<p>You can attach inputs, buttons, and dropdowns <strong>only</strong>.</p>
</div>
<p style="margin-bottom: 0.5rem;">
<span class="tag is-success">New!</span>
<span class="tag is-info">0.4.2</span>
</p>
<div class="content">
<p>It can be useful to append a <a href="{{site.url}}/documentation/elements/button#static-button">static button</a>.</p>
</div>
{% capture addons_static_example %}
<div class="field has-addons">
<p class="control">
<input class="input" type="text" placeholder="Your email">
</p>
<p class="control">
<a class="button is-static">
@gmail.com
</a>
</p>
</div>
{% endcapture %}
<div class="example">
{{addons_static_example}}
</div>
{% highlight html %}
{{addons_static_example}}
{% endhighlight %}
<div class="content">
<p>Use the <code>is-expanded</code> modifier on the element you want to fill up the remaining space (in this case, the input):</p>
</div>
{% capture addons_expanded_example %}

1
docs/sass/specific.sass
View File

@ -11,3 +11,4 @@
height: 24px
margin-right: 8px
width: 24px

10
sass/elements/button.sass
View File

@ -11,6 +11,10 @@ $button-focus-border: $link-focus-border !default
$button-active: $link-active !default
$button-active-border: $link-active-border !default
$button-static: $grey !default
$button-static-background: $white-ter !default
$button-static-border: $grey-lighter !default
$button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
// The button sizes use mixins so they can be used at different breakpoints
@ -178,6 +182,12 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
+loader
+center(1em)
position: absolute !important
&.is-static
background-color: $button-static-background
border-color: $button-static-border
color: $button-static
box-shadow: none
pointer-events: none
// Adjustment for vertical spacing
button.button,

10
sass/elements/form.sass
View File

@ -217,7 +217,6 @@ $input-radius: $radius !default
z-index: 4
&.is-expanded
flex-grow: 1
flex-shrink: 0
&.has-addons-centered
justify-content: center
&.has-addons-right
@ -322,7 +321,8 @@ $input-radius: $radius !default
padding-right: 2.25em
&.has-icons-left,
&.has-icons-right
.input
.input,
.select select
&:focus
& ~ .icon
color: $input-icon-active
@ -341,12 +341,14 @@ $input-radius: $radius !default
width: 2.25em
z-index: 4
&.has-icons-left
.input
.input,
.select select
padding-left: 2.25em
.icon.is-left
left: 0
&.has-icons-right
.input
.input,
.select select
padding-right: 2.25em
.icon.is-right
right: 0

2
sass/elements/table.sass
View File

@ -75,7 +75,7 @@ $table-row-even-hover-background: $white-ter !default
padding: 0.25em 0.5em
&.is-striped
tbody
tr
tr:not(.is-selected)
&:nth-child(even)
background-color: $table-row-even-background
&:hover

6
sass/utilities/mixins.sass
View File

@ -38,8 +38,14 @@
border-radius: 290486px
cursor: pointer
display: inline-block
flex-grow: 0
flex-shrink: 0
font-size: $size-normal
height: 20px
max-height: 20px
max-width: 20px
min-height: 20px
min-width: 20px
outline: none
position: relative
vertical-align: top