mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Jeremy Thomas
parent
2ee921aa91
commit
ea8b26ed12
@ -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
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user