Fix button, input, and select line-height

This commit is contained in:
Jeremy Thomas 2017-03-12 23:31:56 +00:00
parent 718bbdbfd0
commit d2d9515dfa
5 changed files with 58 additions and 19 deletions

View File

@ -583,10 +583,10 @@ a.box:active {
height: 2.25em;
justify-content: flex-start;
line-height: 1.5;
padding-bottom: 0.375em;
padding-bottom: 0.425em;
padding-left: 0.625em;
padding-right: 0.625em;
padding-top: 0.375em;
padding-top: 0.325em;
position: relative;
vertical-align: top;
-webkit-touch-callout: none;
@ -1297,6 +1297,10 @@ a.box:active {
position: absolute !important;
}
button.button {
line-height: 1;
}
.content {
color: #4a4a4a;
}
@ -1462,10 +1466,10 @@ a.box:active {
height: 2.25em;
justify-content: flex-start;
line-height: 1.5;
padding-bottom: 0.375em;
padding-bottom: 0.425em;
padding-left: 0.625em;
padding-right: 0.625em;
padding-top: 0.375em;
padding-top: 0.325em;
position: relative;
vertical-align: top;
background-color: white;
@ -1699,10 +1703,10 @@ a.box:active {
height: 2.25em;
justify-content: flex-start;
line-height: 1.5;
padding-bottom: 0.375em;
padding-bottom: 0.425em;
padding-left: 0.625em;
padding-right: 0.625em;
padding-top: 0.375em;
padding-top: 0.325em;
position: relative;
vertical-align: top;
background-color: white;
@ -1839,6 +1843,11 @@ a.box:active {
color: #ff3860;
}
input[type="submit"].input,
.select select {
line-height: 1;
}
.field:not(:last-child) {
margin-bottom: 0.75rem;
}
@ -1957,9 +1966,11 @@ a.box:active {
flex-shrink: 1;
}
.field-body .field {
flex-grow: 1;
flex-shrink: 1;
}
.field-body .field:not(.is-narrow) {
flex-grow: 1;
}
.field-body .field:not(:last-child) {
margin-bottom: 0;
margin-right: 0.75rem;
@ -1967,6 +1978,7 @@ a.box:active {
}
.control {
font-size: 1rem;
position: relative;
text-align: left;
}
@ -3635,10 +3647,10 @@ a.nav-item.is-tab.is-active {
height: 2.25em;
justify-content: flex-start;
line-height: 1.5;
padding-bottom: 0.375em;
padding-bottom: 0.425em;
padding-left: 0.625em;
padding-right: 0.625em;
padding-top: 0.375em;
padding-top: 0.325em;
position: relative;
vertical-align: top;
-webkit-touch-callout: none;

View File

@ -759,13 +759,32 @@ doc-subtab: form
</p>
</div>
<div class="field">
<p class="control is-expanded has-icon">
<p class="control is-expanded has-icon has-icon-right">
<input class="input is-success" type="email" placeholder="Email" value="alex@smith.com">
<span class="icon is-small">
<i class="fa fa-check"></i>
</span>
</p>
<p class="help is-success">This username is available</p>
<p class="help is-success">This email is correct</p>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label">
<label class="label">Department</label>
</div>
<div class="field-body">
<div class="field is-narrow">
<div class="control">
<div class="select is-fullwidth">
<select>
<option>Business development</option>
<option>Marketing</option>
<option>Sales</option>
</select>
</div>
</div>
</div>
</div>
</div>
@ -777,12 +796,11 @@ doc-subtab: form
<div class="field-body">
<div class="field">
<div class="control">
<div class="select is-fullwidth">
<select>
<option>General enquiry</option>
</select>
</div>
<input class="input is-danger" type="text" placeholder="e.g. Partnership opportunity">
</div>
<p class="help is-danger">
This field is required
</p>
</div>
</div>
</div>

View File

@ -153,3 +153,6 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
+loader
+center(1em)
position: absolute !important
button.button
line-height: 1

View File

@ -158,6 +158,10 @@ $input-radius: $radius !default
&.is-#{$name}
color: $color
input[type="submit"].input,
.select select
line-height: 1
// Containers
.field
@ -254,13 +258,15 @@ $input-radius: $radius !default
flex-grow: 5
flex-shrink: 1
.field
flex-grow: 1
flex-shrink: 1
&:not(.is-narrow)
flex-grow: 1
&:not(:last-child)
margin-bottom: 0
margin-right: 0.75rem
.control
font-size: $size-normal
position: relative
text-align: left
// Modifiers

View File

@ -13,10 +13,10 @@ $control-radius-small: $radius-small !default
height: 2.25em
justify-content: flex-start
line-height: 1.5
padding-bottom: 0.375em
padding-bottom: 0.425em
padding-left: 0.625em
padding-right: 0.625em
padding-top: 0.375em
padding-top: 0.325em
position: relative
vertical-align: top
// States