mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Fix #569
This commit is contained in:
Jeremy Thomas
parent
ad283d8264
commit
3590dc18aa
46
css/bulma.css
vendored
46
css/bulma.css
vendored
@ -633,11 +633,11 @@ a.box:active {
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
line-height: 1.25;
|
||||
padding-bottom: 0.5em;
|
||||
line-height: 1.5;
|
||||
padding-bottom: 0.375em;
|
||||
padding-left: 0.625em;
|
||||
padding-right: 0.625em;
|
||||
padding-top: 0.5em;
|
||||
padding-top: 0.375em;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
-webkit-touch-callout: none;
|
||||
@ -1530,11 +1530,11 @@ input[type="submit"].button {
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
line-height: 1.25;
|
||||
padding-bottom: 0.5em;
|
||||
line-height: 1.5;
|
||||
padding-bottom: 0.375em;
|
||||
padding-left: 0.625em;
|
||||
padding-right: 0.625em;
|
||||
padding-top: 0.5em;
|
||||
padding-top: 0.375em;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
background-color: white;
|
||||
@ -1686,7 +1686,6 @@ input[type="submit"].button {
|
||||
|
||||
.textarea {
|
||||
display: block;
|
||||
line-height: 1.25;
|
||||
max-height: 600px;
|
||||
max-width: 100%;
|
||||
min-height: 120px;
|
||||
@ -1709,6 +1708,7 @@ input[type="submit"].button {
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
line-height: 1.5;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
}
|
||||
@ -1781,11 +1781,11 @@ input[type="submit"].button {
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
line-height: 1.25;
|
||||
padding-bottom: 0.5em;
|
||||
line-height: 1.5;
|
||||
padding-bottom: 0.375em;
|
||||
padding-left: 0.625em;
|
||||
padding-right: 0.625em;
|
||||
padding-top: 0.5em;
|
||||
padding-top: 0.375em;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
background-color: white;
|
||||
@ -2055,6 +2055,10 @@ input[type="submit"].button {
|
||||
}
|
||||
}
|
||||
|
||||
.field-label .label {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.field-label {
|
||||
margin-bottom: 0.5rem;
|
||||
@ -2071,9 +2075,23 @@ input[type="submit"].button {
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
margin-right: 1.5rem;
|
||||
padding-top: 0.375em;
|
||||
text-align: right;
|
||||
}
|
||||
.field-label.is-small {
|
||||
font-size: 0.75rem;
|
||||
padding-top: 0.375em;
|
||||
}
|
||||
.field-label.is-normal {
|
||||
padding-top: 0.375em;
|
||||
}
|
||||
.field-label.is-medium {
|
||||
font-size: 1.25rem;
|
||||
padding-top: 0.375em;
|
||||
}
|
||||
.field-label.is-large {
|
||||
font-size: 1.5rem;
|
||||
padding-top: 0.375em;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 769px) {
|
||||
@ -4006,11 +4024,11 @@ a.nav-item.is-tab.is-active {
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
line-height: 1.25;
|
||||
padding-bottom: 0.5em;
|
||||
line-height: 1.5;
|
||||
padding-bottom: 0.375em;
|
||||
padding-left: 0.625em;
|
||||
padding-right: 0.625em;
|
||||
padding-top: 0.5em;
|
||||
padding-top: 0.375em;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
-webkit-touch-callout: none;
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -633,11 +633,11 @@ a.box:active {
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
line-height: 1.25;
|
||||
padding-bottom: 0.5em;
|
||||
line-height: 1.5;
|
||||
padding-bottom: 0.375em;
|
||||
padding-left: 0.625em;
|
||||
padding-right: 0.625em;
|
||||
padding-top: 0.5em;
|
||||
padding-top: 0.375em;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
-webkit-touch-callout: none;
|
||||
@ -1530,11 +1530,11 @@ input[type="submit"].button {
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
line-height: 1.25;
|
||||
padding-bottom: 0.5em;
|
||||
line-height: 1.5;
|
||||
padding-bottom: 0.375em;
|
||||
padding-left: 0.625em;
|
||||
padding-right: 0.625em;
|
||||
padding-top: 0.5em;
|
||||
padding-top: 0.375em;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
background-color: white;
|
||||
@ -1686,7 +1686,6 @@ input[type="submit"].button {
|
||||
|
||||
.textarea {
|
||||
display: block;
|
||||
line-height: 1.25;
|
||||
max-height: 600px;
|
||||
max-width: 100%;
|
||||
min-height: 120px;
|
||||
@ -1709,6 +1708,7 @@ input[type="submit"].button {
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
line-height: 1.5;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
}
|
||||
@ -1781,11 +1781,11 @@ input[type="submit"].button {
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
line-height: 1.25;
|
||||
padding-bottom: 0.5em;
|
||||
line-height: 1.5;
|
||||
padding-bottom: 0.375em;
|
||||
padding-left: 0.625em;
|
||||
padding-right: 0.625em;
|
||||
padding-top: 0.5em;
|
||||
padding-top: 0.375em;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
background-color: white;
|
||||
@ -2055,6 +2055,10 @@ input[type="submit"].button {
|
||||
}
|
||||
}
|
||||
|
||||
.field-label .label {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.field-label {
|
||||
margin-bottom: 0.5rem;
|
||||
@ -2071,9 +2075,23 @@ input[type="submit"].button {
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
margin-right: 1.5rem;
|
||||
padding-top: 0.375em;
|
||||
text-align: right;
|
||||
}
|
||||
.field-label.is-small {
|
||||
font-size: 0.75rem;
|
||||
padding-top: 0.375em;
|
||||
}
|
||||
.field-label.is-normal {
|
||||
padding-top: 0.375em;
|
||||
}
|
||||
.field-label.is-medium {
|
||||
font-size: 1.25rem;
|
||||
padding-top: 0.375em;
|
||||
}
|
||||
.field-label.is-large {
|
||||
font-size: 1.5rem;
|
||||
padding-top: 0.375em;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 769px) {
|
||||
@ -4006,11 +4024,11 @@ a.nav-item.is-tab.is-active {
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
line-height: 1.25;
|
||||
padding-bottom: 0.5em;
|
||||
line-height: 1.5;
|
||||
padding-bottom: 0.375em;
|
||||
padding-left: 0.625em;
|
||||
padding-right: 0.625em;
|
||||
padding-top: 0.5em;
|
||||
padding-top: 0.375em;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
-webkit-touch-callout: none;
|
||||
@ -7437,14 +7455,14 @@ html.route-index #carbon {
|
||||
margin-top: -1.5rem;
|
||||
}
|
||||
|
||||
.example + .highlight pre {
|
||||
max-height: 50vh;
|
||||
}
|
||||
|
||||
.example + .highlight:not(:last-child) {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.highlight pre {
|
||||
max-height: 600px;
|
||||
}
|
||||
|
||||
.structure {
|
||||
border-color: #ff3860;
|
||||
border-radius: 3px;
|
||||
|
||||
@ -587,7 +587,7 @@ doc-subtab: form
|
||||
Search
|
||||
</a>
|
||||
</p>
|
||||
</div
|
||||
</div>
|
||||
{% endcapture %}
|
||||
<div class="example">
|
||||
{{addons_example}}
|
||||
@ -750,7 +750,7 @@ doc-subtab: form
|
||||
</div>
|
||||
{% capture horizontal_form_example %}
|
||||
<div class="field is-horizontal">
|
||||
<div class="field-label">
|
||||
<div class="field-label is-normal">
|
||||
<label class="label">From</label>
|
||||
</div>
|
||||
<div class="field-body">
|
||||
@ -772,7 +772,7 @@ doc-subtab: form
|
||||
</div>
|
||||
|
||||
<div class="field is-horizontal">
|
||||
<div class="field-label">
|
||||
<div class="field-label is-normal">
|
||||
<label class="label">Department</label>
|
||||
</div>
|
||||
<div class="field-body">
|
||||
@ -792,6 +792,26 @@ doc-subtab: form
|
||||
|
||||
<div class="field is-horizontal">
|
||||
<div class="field-label">
|
||||
<label class="label">Already a member?</label>
|
||||
</div>
|
||||
<div class="field-body">
|
||||
<div class="field is-narrow">
|
||||
<div class="control">
|
||||
<label class="radio">
|
||||
<input type="radio" name="member">
|
||||
Yes
|
||||
</label>
|
||||
<label class="radio">
|
||||
<input type="radio" name="member">
|
||||
No
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field is-horizontal">
|
||||
<div class="field-label is-normal">
|
||||
<label class="label">Subject</label>
|
||||
</div>
|
||||
<div class="field-body">
|
||||
@ -807,7 +827,7 @@ doc-subtab: form
|
||||
</div>
|
||||
|
||||
<div class="field is-horizontal">
|
||||
<div class="field-label">
|
||||
<div class="field-label is-normal">
|
||||
<label class="label">Question</label>
|
||||
</div>
|
||||
<div class="field-body">
|
||||
@ -834,9 +854,109 @@ doc-subtab: form
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
<div class="example">
|
||||
{{horizontal_form_example}}
|
||||
</div>
|
||||
{% highlight html %}
|
||||
{{horizontal_form_example}}
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
<span class="tag is-success">New!</span>
|
||||
<br>
|
||||
To preserve the <strong>vertical alignment</strong> of labels with each type and size of control, the <code>.field-label</code> comes with <strong>4 size modifiers</strong>:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>.is-small</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>.is-normal</code> for any <code>.input</code> or <code>.button</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>.is-medium</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>.is-large</code>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% capture field_label_example %}
|
||||
<div class="field is-horizontal">
|
||||
<div class="field-label">
|
||||
<label class="label">No padding</label>
|
||||
</div>
|
||||
<div class="field-body">
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<label class="checkbox">
|
||||
<input type="checkbox">
|
||||
Checkbox
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field is-horizontal">
|
||||
<div class="field-label is-small">
|
||||
<label class="label">Small padding</label>
|
||||
</div>
|
||||
<div class="field-body">
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input class="input is-small" type="text" placeholder="Small sized input">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field is-horizontal">
|
||||
<div class="field-label is-normal">
|
||||
<label class="label">Normal label</label>
|
||||
</div>
|
||||
<div class="field-body">
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input class="input" type="text" placeholder="Normal sized input">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field is-horizontal">
|
||||
<div class="field-label is-medium">
|
||||
<label class="label">Medium label</label>
|
||||
</div>
|
||||
<div class="field-body">
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input class="input is-medium" type="text" placeholder="Medium sized input">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field is-horizontal">
|
||||
<div class="field-label is-large">
|
||||
<label class="label">Large label</label>
|
||||
</div>
|
||||
<div class="field-body">
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input class="input is-large" type="text" placeholder="Large sized input">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
<div class="example">
|
||||
{{field_label_example}}
|
||||
</div>
|
||||
{% highlight html %}
|
||||
{{field_label_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -35,11 +35,12 @@
|
||||
border-radius: 0 0 $radius $radius
|
||||
border-top: none
|
||||
margin-top: -1.5rem
|
||||
pre
|
||||
max-height: 50vh
|
||||
&:not(:last-child)
|
||||
margin-bottom: 1.5rem
|
||||
|
||||
.highlight pre
|
||||
max-height: 600px
|
||||
|
||||
$structure: $danger
|
||||
$structure-invert: $danger-invert
|
||||
|
||||
|
||||
@ -71,7 +71,6 @@ $input-radius: $radius !default
|
||||
|
||||
.textarea
|
||||
display: block
|
||||
line-height: 1.25
|
||||
max-height: 600px
|
||||
max-width: 100%
|
||||
min-height: 120px
|
||||
@ -86,6 +85,7 @@ $input-radius: $radius !default
|
||||
display: inline-flex
|
||||
flex-wrap: wrap
|
||||
justify-content: flex-start
|
||||
line-height: 1.5
|
||||
position: relative
|
||||
vertical-align: top
|
||||
input
|
||||
@ -226,6 +226,8 @@ $input-radius: $radius !default
|
||||
display: flex
|
||||
|
||||
.field-label
|
||||
.label
|
||||
font-size: inherit
|
||||
+mobile
|
||||
margin-bottom: 0.5rem
|
||||
+tablet
|
||||
@ -233,8 +235,18 @@ $input-radius: $radius !default
|
||||
flex-grow: 1
|
||||
flex-shrink: 0
|
||||
margin-right: 1.5rem
|
||||
padding-top: 0.375em
|
||||
text-align: right
|
||||
&.is-small
|
||||
font-size: $size-small
|
||||
padding-top: 0.375em
|
||||
&.is-normal
|
||||
padding-top: 0.375em
|
||||
&.is-medium
|
||||
font-size: $size-medium
|
||||
padding-top: 0.375em
|
||||
&.is-large
|
||||
font-size: $size-large
|
||||
padding-top: 0.375em
|
||||
|
||||
.field-body
|
||||
+tablet
|
||||
|
||||
@ -12,11 +12,11 @@ $control-radius-small: $radius-small !default
|
||||
font-size: $size-normal
|
||||
height: 2.25em
|
||||
justify-content: flex-start
|
||||
line-height: 1.25
|
||||
padding-bottom: 0.5em
|
||||
line-height: 1.5
|
||||
padding-bottom: 0.375em
|
||||
padding-left: 0.625em
|
||||
padding-right: 0.625em
|
||||
padding-top: 0.5em
|
||||
padding-top: 0.375em
|
||||
position: relative
|
||||
vertical-align: top
|
||||
// States
|
||||
|
||||
Loading…
Reference in New Issue
Block a user