library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix #584, Fix #571

Browse Source
This commit is contained in:
Jeremy Thomas 2017-04-13 01:10:39 +01:00
parent 2ee921aa91
commit ea8b26ed12
7 changed files with 96 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGELOG.md
View File

@ -20,6 +20,8 @@
* Fix #458 select expanded
* Fix #403 separate animations
* Fix #637 customize Bulma
* Fix #584 loading select
* Fix #571 control height
## 0.4.0

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

@ -691,7 +691,7 @@ a.box:active {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border: none;
border: 1px solid transparent;
border-radius: 3px;
box-shadow: none;
display: -webkit-inline-box;
@ -703,10 +703,10 @@ a.box:active {
-ms-flex-pack: start;
justify-content: flex-start;
line-height: 1.5;
padding-bottom: 0.375em;
padding-left: 0.625em;
padding-right: 0.625em;
padding-top: 0.375em;
padding-bottom: calc(0.375em - 1px);
padding-left: calc(0.625em - 1px);
padding-right: calc(0.625em - 1px);
padding-top: calc(0.375em - 1px);
position: relative;
vertical-align: top;
-webkit-touch-callout: none;
@ -715,7 +715,7 @@ a.box:active {
-ms-user-select: none;
user-select: none;
background-color: white;
border: 1px solid #dbdbdb;
border-color: #dbdbdb;
color: #363636;
cursor: pointer;
-webkit-box-pack: center;
@ -1852,7 +1852,7 @@ input[type="submit"].button {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border: none;
border: 1px solid transparent;
border-radius: 3px;
box-shadow: none;
display: -webkit-inline-box;
@ -1864,14 +1864,14 @@ input[type="submit"].button {
-ms-flex-pack: start;
justify-content: flex-start;
line-height: 1.5;
padding-bottom: 0.375em;
padding-left: 0.625em;
padding-right: 0.625em;
padding-top: 0.375em;
padding-bottom: calc(0.375em - 1px);
padding-left: calc(0.625em - 1px);
padding-right: calc(0.625em - 1px);
padding-top: calc(0.375em - 1px);
position: relative;
vertical-align: top;
background-color: white;
border: 1px solid #dbdbdb;
border-color: #dbdbdb;
color: #363636;
box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1);
max-width: 100%;
@ -2092,7 +2092,7 @@ input[type="submit"].button {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border: none;
border: 1px solid transparent;
border-radius: 3px;
box-shadow: none;
display: -webkit-inline-box;
@ -2104,14 +2104,14 @@ input[type="submit"].button {
-ms-flex-pack: start;
justify-content: flex-start;
line-height: 1.5;
padding-bottom: 0.375em;
padding-left: 0.625em;
padding-right: 0.625em;
padding-top: 0.375em;
padding-bottom: calc(0.375em - 1px);
padding-left: calc(0.625em - 1px);
padding-right: calc(0.625em - 1px);
padding-top: calc(0.375em - 1px);
position: relative;
vertical-align: top;
background-color: white;
border: 1px solid #dbdbdb;
border-color: #dbdbdb;
color: #363636;
cursor: pointer;
display: block;
@ -2167,6 +2167,10 @@ input[type="submit"].button {
display: none;
}
.select select[disabled]:hover {
border-color: whitesmoke;
}
.select:hover:after {
border-color: #363636;
}
@ -2220,6 +2224,10 @@ input[type="submit"].button {
font-size: 1.5rem;
}
.select.is-disabled:after {
border-color: #7a7a7a;
}
.select.is-fullwidth {
width: 100%;
}
@ -2228,6 +2236,26 @@ input[type="submit"].button {
width: 100%;
}
.select.is-loading:after {
-webkit-animation: spinAround 500ms infinite linear;
animation: spinAround 500ms infinite linear;
border: 2px solid #dbdbdb;
border-radius: 290486px;
border-right-color: transparent;
border-top-color: transparent;
content: "";
display: block;
height: 1em;
position: relative;
width: 1em;
margin-top: 0;
position: absolute;
right: 0.625em;
top: 0.625em;
-webkit-transform: none;
transform: none;
}
.label {
color: #363636;
display: block;
@ -2281,10 +2309,6 @@ input[type="submit"].button {
color: #ff3860;
}
.select select {
line-height: 1;
}
.field:not(:last-child) {
margin-bottom: 0.75rem;
}
@ -4371,7 +4395,7 @@ a.nav-item.is-tab.is-active {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border: none;
border: 1px solid transparent;
border-radius: 3px;
box-shadow: none;
display: -webkit-inline-box;
@ -4383,10 +4407,10 @@ a.nav-item.is-tab.is-active {
-ms-flex-pack: start;
justify-content: flex-start;
line-height: 1.5;
padding-bottom: 0.375em;
padding-left: 0.625em;
padding-right: 0.625em;
padding-top: 0.375em;
padding-bottom: calc(0.375em - 1px);
padding-left: calc(0.625em - 1px);
padding-right: calc(0.625em - 1px);
padding-top: calc(0.375em - 1px);
position: relative;
vertical-align: top;
-webkit-touch-callout: none;
@ -4429,7 +4453,7 @@ a.nav-item.is-tab.is-active {
.pagination-previous,
.pagination-next,
.pagination-link {
border: 1px solid #dbdbdb;
border-color: #dbdbdb;
min-width: 2.25em;
}

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

@ -322,6 +322,15 @@ doc-subtab: form
<input class="input" type="text" placeholder="Loading input">
</p>
</div>
<div class="field">
<div class="control">
<div class="select is-loading">
<select>
<option>Loading dropdown</option>
</select>
</div>
</div>
</div>
<div class="field">
<p class="control is-loading">
<textarea class="textarea" placeholder="Loading textarea"></textarea>
@ -346,6 +355,15 @@ doc-subtab: form
<input class="input" type="text" placeholder="Disabled input" disabled>
</p>
</div>
<div class="field">
<div class="control">
<div class="select is-disabled">
<select disabled>
<option>Disabled dropdown</option>
</select>
</div>
</div>
</div>
<div class="field">
<p class="control">
<textarea class="textarea" placeholder="Disabled textarea" disabled></textarea>

2
sass/components/pagination.sass
View File

@ -55,7 +55,7 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
.pagination-previous,
.pagination-next,
.pagination-link
border: 1px solid $pagination-border
border-color: $pagination-border
min-width: 2.25em
&:hover
border-color: $pagination-hover-border

2
sass/elements/button.sass
View File

@ -26,7 +26,7 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
+control
+unselectable
background-color: $button-background
border: 1px solid $button-border
border-color: $button-border
color: $button
cursor: pointer
justify-content: center

18
sass/elements/form.sass
View File

@ -22,7 +22,7 @@ $input-radius: $radius !default
=input
+control
background-color: $input-background
border: 1px solid $input-border
border-color: $input-border
color: $input
&:hover,
&.is-hovered
@ -122,6 +122,8 @@ $input-radius: $radius !default
border-color: $input-hover-border
&::-ms-expand
display: none
&[disabled]:hover
border-color: $input-disabled-border
// States
&:hover
&:after
@ -139,10 +141,21 @@ $input-radius: $radius !default
&.is-large
+control-large
// Modifiers
&.is-disabled
&:after
border-color: $input-disabled
&.is-fullwidth
width: 100%
select
width: 100%
&.is-loading
&:after
+loader
margin-top: 0
position: absolute
right: 0.625em
top: 0.625em
transform: none
.label
color: $input
@ -161,9 +174,6 @@ $input-radius: $radius !default
&.is-#{$name}
color: $color
.select select
line-height: 1
// Containers
.field

13
sass/utilities/controls.sass
View File

@ -1,11 +1,14 @@
$control-radius: $radius !default
$control-radius-small: $radius-small !default
$control-padding-vertical: calc(0.375em - 1px) !default
$control-padding-horizontal: calc(0.625em - 1px) !default
=control
-moz-appearance: none
-webkit-appearance: none
align-items: center
border: none
border: 1px solid transparent
border-radius: $control-radius
box-shadow: none
display: inline-flex
@ -13,10 +16,10 @@ $control-radius-small: $radius-small !default
height: 2.25em
justify-content: flex-start
line-height: 1.5
padding-bottom: 0.375em
padding-left: 0.625em
padding-right: 0.625em
padding-top: 0.375em
padding-bottom: $control-padding-vertical
padding-left: $control-padding-horizontal
padding-right: $control-padding-horizontal
padding-top: $control-padding-vertical
position: relative
vertical-align: top
// States