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

View File

@ -759,13 +759,32 @@ doc-subtab: form
</p> </p>
</div> </div>
<div class="field"> <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"> <input class="input is-success" type="email" placeholder="Email" value="alex@smith.com">
<span class="icon is-small"> <span class="icon is-small">
<i class="fa fa-check"></i> <i class="fa fa-check"></i>
</span> </span>
</p> </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> </div>
</div> </div>
@ -777,12 +796,11 @@ doc-subtab: form
<div class="field-body"> <div class="field-body">
<div class="field"> <div class="field">
<div class="control"> <div class="control">
<div class="select is-fullwidth"> <input class="input is-danger" type="text" placeholder="e.g. Partnership opportunity">
<select>
<option>General enquiry</option>
</select>
</div>
</div> </div>
<p class="help is-danger">
This field is required
</p>
</div> </div>
</div> </div>
</div> </div>

View File

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

View File

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

View File

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