mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-17 21:49:09 +01:00
Overhaul form control and button sizing, and some type styles
* New padding approach with separate horizontal and vertical padding variables * Improved sizing in large and small buttons and form controls * Dropped the `.btn-mini` (since we have no `.input-mini` to match, and holy fuck those were small buttons) * Dropped the `.pagination-mini` as well because once again, to hell with such small components * Changed `@line-height-headings` to `@headings-line-height` * Removed the `@headings-font-family` because it was honestly kind of useless
This commit is contained in:
Mark Otto
parent
a41d566d5e
commit
28a081cb20
96
docs/assets/css/bootstrap.css
vendored
96
docs/assets/css/bootstrap.css
vendored
@ -283,7 +283,7 @@ html {
|
||||
body {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.428;
|
||||
line-height: 1.428571429;
|
||||
color: #333333;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
@ -415,7 +415,6 @@ h6,
|
||||
.h4,
|
||||
.h5,
|
||||
.h6 {
|
||||
font-family: inherit;
|
||||
font-weight: 500;
|
||||
line-height: 1.1;
|
||||
}
|
||||
@ -518,7 +517,7 @@ ol ul {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.428;
|
||||
line-height: 1.428571429;
|
||||
}
|
||||
|
||||
.list-unstyled {
|
||||
@ -543,7 +542,7 @@ dl {
|
||||
|
||||
dt,
|
||||
dd {
|
||||
line-height: 1.428;
|
||||
line-height: 1.428571429;
|
||||
}
|
||||
|
||||
dt {
|
||||
@ -625,7 +624,7 @@ blockquote p:last-child {
|
||||
|
||||
blockquote small {
|
||||
display: block;
|
||||
line-height: 1.428;
|
||||
line-height: 1.428571429;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
@ -665,7 +664,7 @@ address {
|
||||
display: block;
|
||||
margin-bottom: 20px;
|
||||
font-style: normal;
|
||||
line-height: 1.428;
|
||||
line-height: 1.428571429;
|
||||
}
|
||||
|
||||
code,
|
||||
@ -690,7 +689,7 @@ pre {
|
||||
padding: 9.5px;
|
||||
margin: 0 0 10px;
|
||||
font-size: 13px;
|
||||
line-height: 1.428;
|
||||
line-height: 1.428571429;
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
white-space: pre;
|
||||
@ -1018,7 +1017,7 @@ th {
|
||||
.table thead > tr > td,
|
||||
.table tbody > tr > td {
|
||||
padding: 8px;
|
||||
line-height: 1.428;
|
||||
line-height: 1.428571429;
|
||||
vertical-align: top;
|
||||
border-top: 1px solid #dddddd;
|
||||
}
|
||||
@ -1206,7 +1205,7 @@ legend {
|
||||
padding: 0;
|
||||
margin-bottom: 20px;
|
||||
font-size: 21px;
|
||||
line-height: 1.1;
|
||||
line-height: inherit;
|
||||
color: #333333;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
@ -1235,10 +1234,10 @@ input[type="search"],
|
||||
input[type="tel"],
|
||||
input[type="color"] {
|
||||
display: block;
|
||||
min-height: 34px;
|
||||
padding: 6px 9px;
|
||||
min-height: 36px;
|
||||
padding: 8px 12px;
|
||||
font-size: 14px;
|
||||
line-height: 1.428;
|
||||
line-height: 1.428571429;
|
||||
color: #555555;
|
||||
vertical-align: middle;
|
||||
background-color: #ffffff;
|
||||
@ -1313,10 +1312,10 @@ input[type="checkbox"] {
|
||||
|
||||
select,
|
||||
input[type="file"] {
|
||||
height: 34px;
|
||||
height: 36px;
|
||||
/* In IE7, the height of the select element cannot be changed by height, only font-size. TODO: Check if this is still needed when dropping IE7 support */
|
||||
|
||||
line-height: 34px;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
select[multiple],
|
||||
@ -1424,7 +1423,7 @@ input[type="url"].input-large,
|
||||
input[type="search"].input-large,
|
||||
input[type="tel"].input-large,
|
||||
input[type="color"].input-large {
|
||||
padding: 11px 14px;
|
||||
padding: 14px 16px;
|
||||
font-size: 18px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
@ -1445,8 +1444,8 @@ input[type="url"].input-small,
|
||||
input[type="search"].input-small,
|
||||
input[type="tel"].input-small,
|
||||
input[type="color"].input-small {
|
||||
min-height: 26px;
|
||||
padding: 2px 10px;
|
||||
min-height: 30px;
|
||||
padding: 5px 10px;
|
||||
font-size: 12px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
@ -1612,7 +1611,7 @@ select:focus:invalid:focus {
|
||||
padding: 6px 8px;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
line-height: 1.428;
|
||||
line-height: 1.428571429;
|
||||
text-align: center;
|
||||
text-shadow: 0 1px 0 #fff;
|
||||
background-color: #eeeeee;
|
||||
@ -1624,13 +1623,13 @@ select:focus:invalid:focus {
|
||||
}
|
||||
|
||||
.input-group-addon.input-small {
|
||||
padding: 2px 10px;
|
||||
padding: 5px 10px;
|
||||
font-size: 12px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.input-group-addon.input-large {
|
||||
padding: 11px 14px;
|
||||
padding: 14px 16px;
|
||||
font-size: 18px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
@ -1710,11 +1709,11 @@ select:focus:invalid:focus {
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 6px 12px;
|
||||
padding: 8px 12px;
|
||||
margin-bottom: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 1.428;
|
||||
line-height: 1.428571429;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
@ -1974,20 +1973,15 @@ fieldset[disabled] .btn-link:focus {
|
||||
}
|
||||
|
||||
.btn-large {
|
||||
padding: 11px 14px;
|
||||
padding: 14px 16px;
|
||||
font-size: 18px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.btn-small {
|
||||
padding: 2px 10px;
|
||||
padding: 5px 10px;
|
||||
font-size: 12px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.btn-mini {
|
||||
padding: 0 6px;
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
@ -2750,7 +2744,7 @@ input[type="button"].btn-block {
|
||||
padding: 3px 20px;
|
||||
clear: both;
|
||||
font-weight: normal;
|
||||
line-height: 1.428;
|
||||
line-height: 1.428571429;
|
||||
color: #333333;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@ -3214,7 +3208,7 @@ button.close {
|
||||
|
||||
.nav-tabs > li > a {
|
||||
margin-right: 2px;
|
||||
line-height: 1.428;
|
||||
line-height: 1.428571429;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
@ -3304,7 +3298,7 @@ button.close {
|
||||
padding: 3px 15px;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
line-height: 1.428;
|
||||
line-height: 1.428571429;
|
||||
color: #999999;
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
text-transform: uppercase;
|
||||
@ -3660,7 +3654,7 @@ button.close {
|
||||
}
|
||||
|
||||
.navbar-btn {
|
||||
margin-top: 8px;
|
||||
margin-top: 7px;
|
||||
}
|
||||
|
||||
.navbar-text {
|
||||
@ -3905,7 +3899,7 @@ button.close {
|
||||
.pagination > li > span {
|
||||
float: left;
|
||||
padding: 4px 12px;
|
||||
line-height: 1.428;
|
||||
line-height: 1.428571429;
|
||||
text-decoration: none;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #dddddd;
|
||||
@ -3949,7 +3943,7 @@ button.close {
|
||||
|
||||
.pagination-large > li > a,
|
||||
.pagination-large > li > span {
|
||||
padding: 11px 14px;
|
||||
padding: 14px 16px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
@ -3965,34 +3959,24 @@ button.close {
|
||||
border-bottom-right-radius: 6px;
|
||||
}
|
||||
|
||||
.pagination-mini > li:first-child > a,
|
||||
.pagination-small > li > a,
|
||||
.pagination-small > li > span {
|
||||
padding: 5px 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.pagination-small > li:first-child > a,
|
||||
.pagination-mini > li:first-child > span,
|
||||
.pagination-small > li:first-child > span {
|
||||
border-bottom-left-radius: 3px;
|
||||
border-top-left-radius: 3px;
|
||||
}
|
||||
|
||||
.pagination-mini > li:last-child > a,
|
||||
.pagination-small > li:last-child > a,
|
||||
.pagination-mini > li:last-child > span,
|
||||
.pagination-small > li:last-child > span {
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
}
|
||||
|
||||
.pagination-small > li > a,
|
||||
.pagination-small > li > span {
|
||||
padding: 2px 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.pagination-mini > li > a,
|
||||
.pagination-mini > li > span {
|
||||
padding: 0 6px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.pager {
|
||||
margin: 20px 0;
|
||||
text-align: center;
|
||||
@ -4131,7 +4115,7 @@ button.close {
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
min-height: 16.428px;
|
||||
min-height: 16.428571429px;
|
||||
padding: 15px;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
@ -4142,7 +4126,7 @@ button.close {
|
||||
|
||||
.modal-title {
|
||||
margin: 0;
|
||||
line-height: 1.428;
|
||||
line-height: 1.428571429;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
@ -4523,7 +4507,7 @@ button.close {
|
||||
.thumbnail,
|
||||
.img-thumbnail {
|
||||
padding: 4px;
|
||||
line-height: 1.428;
|
||||
line-height: 1.428571429;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #dddddd;
|
||||
border-radius: 4px;
|
||||
@ -5050,7 +5034,7 @@ a.list-group-item.active > .badge,
|
||||
margin-bottom: 30px;
|
||||
font-size: 21px;
|
||||
font-weight: 200;
|
||||
line-height: 2.142;
|
||||
line-height: 2.1428571435;
|
||||
color: inherit;
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
|
||||
@ -294,6 +294,11 @@ body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Forms */
|
||||
.bs-example-control-sizing input[type="text"] + input[type="text"] {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* List groups */
|
||||
.bs-example > .list-group {
|
||||
max-width: 400px;
|
||||
|
||||
@ -748,7 +748,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="btn-dropdowns-sizes">Works with all button sizes</h3>
|
||||
<p>Button dropdowns work at any size: <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code>.</p>
|
||||
<p>Button dropdowns work with buttons of all sizes.</p>
|
||||
<div class="bs-example">
|
||||
<div class="btn-toolbar" style="margin: 0;">
|
||||
<div class="btn-group">
|
||||
@ -775,18 +775,6 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-default btn-mini dropdown-toggle" type="button" data-toggle="dropdown">
|
||||
Mini button <span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
</div><!-- /btn-toolbar -->
|
||||
</div><!-- /example -->
|
||||
{% highlight html %}
|
||||
@ -809,15 +797,6 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Mini button group -->
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-default btn-mini dropdown-toggle" type="button" data-toggle="dropdown">
|
||||
Mini button <span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
@ -1540,7 +1519,7 @@ body {
|
||||
|
||||
|
||||
<h3>Sizes</h3>
|
||||
<p>Fancy larger or smaller pagination? Add <code>.pagination-large</code>, <code>.pagination-small</code>, or <code>.pagination-mini</code> for additional sizes.</p>
|
||||
<p>Fancy larger or smaller pagination? Add <code>.pagination-large</code> or <code>.pagination-small</code> for additional sizes.</p>
|
||||
<div class="bs-example">
|
||||
<div>
|
||||
<ul class="pagination pagination-large">
|
||||
@ -1575,23 +1554,11 @@ body {
|
||||
<li><a href="#">»</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<ul class="pagination pagination-mini">
|
||||
<li><a href="#">«</a></li>
|
||||
<li><a href="#">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">4</a></li>
|
||||
<li><a href="#">5</a></li>
|
||||
<li><a href="#">»</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<ul class="pagination pagination-large">...</ul>
|
||||
<ul class="pagination pagination">...</ul>
|
||||
<ul class="pagination pagination-small">...</ul>
|
||||
<ul class="pagination pagination-mini">...</ul>
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
|
||||
@ -1625,7 +1625,7 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
|
||||
<h4>Relative sizing</h4>
|
||||
<p>Create larger or smaller form controls that match button sizes.</p>
|
||||
<form class="bs-example" style="padding-bottom: 15px;">
|
||||
<form class="bs-example bs-example-control-sizing">
|
||||
<div class="controls docs-input-sizes">
|
||||
<input class="input-large" type="text" placeholder=".input-large">
|
||||
<input type="text" placeholder="Default input">
|
||||
@ -1738,7 +1738,7 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
{% endhighlight %}
|
||||
|
||||
<h2 id="buttons-sizes">Button sizes</h2>
|
||||
<p>Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code> for additional sizes.</p>
|
||||
<p>Fancy larger or smaller buttons? Add <code>.btn-large</code> or <code>.btn-small</code> for additional sizes.</p>
|
||||
<div class="bs-example">
|
||||
<p>
|
||||
<button type="button" class="btn btn-primary btn-large">Large button</button>
|
||||
@ -1752,10 +1752,6 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
<button type="button" class="btn btn-primary btn-small">Small button</button>
|
||||
<button type="button" class="btn btn-default btn-small">Small button</button>
|
||||
</p>
|
||||
<p>
|
||||
<button type="button" class="btn btn-primary btn-mini">Mini button</button>
|
||||
<button type="button" class="btn btn-default btn-mini">Mini button</button>
|
||||
</p>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<p>
|
||||
@ -1770,10 +1766,6 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
<button type="button" class="btn btn-primary btn-small">Small button</button>
|
||||
<button type="button" class="btn btn-default btn-small">Small button</button>
|
||||
</p>
|
||||
<p>
|
||||
<button type="button" class="btn btn-primary btn-mini">Mini button</button>
|
||||
<button type="button" class="btn btn-default btn-mini">Mini button</button>
|
||||
</p>
|
||||
{% endhighlight %}
|
||||
|
||||
<p>Create block level buttons—those that span the full width of a parent— by adding <code>.btn-block</code>.</p>
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
// Core styles
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 6px 12px;
|
||||
padding: @padding-base-vertical @padding-base-horizontal;
|
||||
margin-bottom: 0; // For input.btn
|
||||
font-size: @font-size-base;
|
||||
font-weight: 500;
|
||||
@ -123,18 +123,14 @@ fieldset[disabled] .btn-link {
|
||||
// --------------------------------------------------
|
||||
|
||||
.btn-large {
|
||||
padding: @padding-large;
|
||||
padding: @padding-large-vertical @padding-large-horizontal;
|
||||
font-size: @font-size-large;
|
||||
border-radius: @border-radius-large;
|
||||
}
|
||||
.btn-small {
|
||||
padding: @padding-small;
|
||||
padding: @padding-small-vertical @padding-small-horizontal;
|
||||
font-size: @font-size-small;
|
||||
border-radius: @border-radius-small;
|
||||
}
|
||||
.btn-mini {
|
||||
padding: @padding-mini;
|
||||
font-size: @font-size-mini;
|
||||
line-height: 1.5; // ensure proper height of button next to small input
|
||||
border-radius: @border-radius-small;
|
||||
}
|
||||
|
||||
|
||||
@ -22,7 +22,7 @@ legend {
|
||||
padding: 0;
|
||||
margin-bottom: @line-height-computed;
|
||||
font-size: (@font-size-base * 1.5);
|
||||
line-height: @line-height-headings;
|
||||
line-height: inherit;
|
||||
color: @gray-dark;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
@ -56,7 +56,7 @@ input[type="tel"],
|
||||
input[type="color"] {
|
||||
display: block;
|
||||
min-height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
|
||||
padding: 6px 9px;
|
||||
padding: @padding-base-vertical @padding-base-horizontal;
|
||||
font-size: @font-size-base;
|
||||
line-height: @line-height-base;
|
||||
color: @gray;
|
||||
@ -241,13 +241,13 @@ input[type="search"],
|
||||
input[type="tel"],
|
||||
input[type="color"] {
|
||||
&.input-large {
|
||||
padding: @padding-large;
|
||||
padding: @padding-large-vertical @padding-large-horizontal;
|
||||
font-size: @font-size-large;
|
||||
border-radius: @border-radius-large;
|
||||
}
|
||||
&.input-small {
|
||||
min-height: @input-height-small;
|
||||
padding: @padding-small;
|
||||
padding: @padding-small-vertical @padding-small-horizontal;
|
||||
font-size: @font-size-small;
|
||||
border-radius: @border-radius-small;
|
||||
}
|
||||
@ -397,11 +397,12 @@ select:focus:invalid {
|
||||
border-radius: @border-radius-base;
|
||||
|
||||
&.input-small {
|
||||
padding: @padding-small;
|
||||
padding: @padding-small-vertical @padding-small-horizontal;
|
||||
font-size: @font-size-small;
|
||||
border-radius: @border-radius-small; }
|
||||
border-radius: @border-radius-small;
|
||||
}
|
||||
&.input-large {
|
||||
padding: @padding-large;
|
||||
padding: @padding-large-vertical @padding-large-horizontal;
|
||||
font-size: @font-size-large;
|
||||
border-radius: @border-radius-large;
|
||||
}
|
||||
|
||||
@ -56,7 +56,7 @@
|
||||
.pagination-large {
|
||||
> li > a,
|
||||
> li > span {
|
||||
padding: @padding-large;
|
||||
padding: @padding-large-vertical @padding-large-horizontal;
|
||||
font-size: @font-size-large;
|
||||
}
|
||||
> li:first-child > a,
|
||||
@ -69,9 +69,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Small and mini
|
||||
.pagination-mini,
|
||||
// Small
|
||||
.pagination-small {
|
||||
> li > a,
|
||||
> li > span {
|
||||
padding: @padding-small-vertical @padding-small-horizontal;
|
||||
font-size: @font-size-small;
|
||||
}
|
||||
> li:first-child > a,
|
||||
> li:first-child > span {
|
||||
.border-left-radius(@border-radius-small);
|
||||
@ -81,20 +85,3 @@
|
||||
.border-right-radius(@border-radius-small);
|
||||
}
|
||||
}
|
||||
|
||||
// Small
|
||||
.pagination-small {
|
||||
> li > a,
|
||||
> li > span {
|
||||
padding: @padding-small;
|
||||
font-size: @font-size-small;
|
||||
}
|
||||
}
|
||||
// Mini
|
||||
.pagination-mini {
|
||||
> li > a,
|
||||
> li > span {
|
||||
padding: @padding-mini;
|
||||
font-size: @font-size-mini;
|
||||
}
|
||||
}
|
||||
|
||||
@ -54,9 +54,8 @@ a.text-success:focus { color: darken(@state-success-text, 10%); }
|
||||
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
.h1, .h2, .h3, .h4, .h5, .h6 {
|
||||
font-family: @headings-font-family;
|
||||
font-weight: @headings-font-weight;
|
||||
line-height: @line-height-headings;
|
||||
line-height: @headings-line-height;
|
||||
small {
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
|
||||
@ -50,25 +50,29 @@
|
||||
@font-size-small: ceil(@font-size-base * 0.85); // ~12px
|
||||
@font-size-mini: ceil(@font-size-base * 0.75); // ~11px
|
||||
|
||||
@line-height-base: 1.428; // 20/14
|
||||
@line-height-computed: ceil(@font-size-base * @line-height-base); // ~20px
|
||||
@line-height-headings: 1.1;
|
||||
@line-height-base: 1.428571429; // 20/14
|
||||
@line-height-computed: floor(@font-size-base * @line-height-base); // ~20px
|
||||
|
||||
@headings-font-family: inherit; // empty to use BS default, @font-family-base
|
||||
@headings-font-weight: 500;
|
||||
@headings-line-height: 1.1;
|
||||
|
||||
|
||||
// Components
|
||||
// -------------------------
|
||||
// Based on 14px font-size and 1.5 line-height
|
||||
// Based on 14px font-size and 1.428 line-height (~20px to start)
|
||||
|
||||
@padding-large: 11px 14px; // 44px
|
||||
@padding-small: 2px 10px; // 26px
|
||||
@padding-mini: 0 6px; // 22px
|
||||
@padding-base-vertical: 8px;
|
||||
@padding-base-horizontal: 12px;
|
||||
|
||||
@border-radius-base: 4px;
|
||||
@border-radius-large: 6px;
|
||||
@border-radius-small: 3px;
|
||||
@padding-large-vertical: 14px;
|
||||
@padding-large-horizontal: 16px;
|
||||
|
||||
@padding-small-vertical: 5px;
|
||||
@padding-small-horizontal: 10px;
|
||||
|
||||
@border-radius-base: 4px;
|
||||
@border-radius-large: 6px;
|
||||
@border-radius-small: 3px;
|
||||
|
||||
@component-active-bg: @brand-primary;
|
||||
|
||||
@ -123,11 +127,11 @@
|
||||
|
||||
@input-color-placeholder: @gray-light;
|
||||
|
||||
@input-height-base: (@line-height-computed + 14px); // base line-height + 12px vertical padding + 2px top/bottom border
|
||||
@input-height-large: (@line-height-computed + 24px); // base line-height + 22px vertical padding + 2px top/bottom border
|
||||
@input-height-small: (@line-height-computed + 6px); // base line-height + 4px vertical padding + 2px top/bottom border
|
||||
@input-height-base: (@line-height-computed + (@padding-base-vertical * 2));
|
||||
@input-height-large: (@line-height-computed + (@padding-large-vertical * 2));
|
||||
@input-height-small: (@line-height-computed + (@padding-small-vertical * 2));
|
||||
|
||||
@form-actions-bg: #f5f5f5;
|
||||
@form-actions-bg: #f5f5f5;
|
||||
|
||||
|
||||
// Dropdowns
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user