mirror of https://github.com/twbs/bootstrap.git
Font-size and line-height tweaks
* Use 1.428 for line-height instead of 1.5 * Use function for full pixel values instead of decimals
This commit is contained in:
Mark Otto
parent
8261866ff2
commit
76ecfdfdc1
|
|
@ -283,7 +283,7 @@ html {
|
|||
body {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
line-height: 1.428;
|
||||
color: #333333;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
|
@ -329,11 +329,11 @@ img {
|
|||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 10.5px;
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
.lead {
|
||||
margin-bottom: 21px;
|
||||
margin-bottom: 20px;
|
||||
font-size: 21px;
|
||||
font-weight: 200;
|
||||
line-height: 1.4;
|
||||
|
|
@ -440,15 +440,15 @@ h6 small,
|
|||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
margin-top: 21px;
|
||||
margin-bottom: 10.5px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-top: 10.5px;
|
||||
margin-bottom: 10.5px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
h1,
|
||||
|
|
@ -499,15 +499,15 @@ h4 small,
|
|||
}
|
||||
|
||||
.page-header {
|
||||
padding-bottom: 9.5px;
|
||||
margin: 42px 0 21px;
|
||||
padding-bottom: 9px;
|
||||
margin: 40px 0 20px;
|
||||
border-bottom: 1px solid #eeeeee;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding: 0;
|
||||
margin: 0 0 10.5px 25px;
|
||||
margin: 0 0 10px 25px;
|
||||
}
|
||||
|
||||
ul ul,
|
||||
|
|
@ -518,7 +518,7 @@ ol ul {
|
|||
}
|
||||
|
||||
li {
|
||||
line-height: 1.5;
|
||||
line-height: 1.428;
|
||||
}
|
||||
|
||||
.list-unstyled {
|
||||
|
|
@ -538,12 +538,12 @@ li {
|
|||
}
|
||||
|
||||
dl {
|
||||
margin-bottom: 21px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
dt,
|
||||
dd {
|
||||
line-height: 1.5;
|
||||
line-height: 1.428;
|
||||
}
|
||||
|
||||
dt {
|
||||
|
|
@ -551,7 +551,7 @@ dt {
|
|||
}
|
||||
|
||||
dd {
|
||||
margin-left: 10.5px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.dl-horizontal:before,
|
||||
|
|
@ -589,7 +589,7 @@ dd {
|
|||
}
|
||||
|
||||
hr {
|
||||
margin: 21px 0;
|
||||
margin: 20px 0;
|
||||
border: 0;
|
||||
border-top: 1px solid #eeeeee;
|
||||
border-bottom: 1px solid #fff;
|
||||
|
|
@ -608,8 +608,8 @@ abbr.initialism {
|
|||
}
|
||||
|
||||
blockquote {
|
||||
padding: 10.5px 21px;
|
||||
margin: 0 0 21px;
|
||||
padding: 10px 20px;
|
||||
margin: 0 0 20px;
|
||||
border-left: 5px solid #eeeeee;
|
||||
}
|
||||
|
||||
|
|
@ -625,7 +625,7 @@ blockquote p:last-child {
|
|||
|
||||
blockquote small {
|
||||
display: block;
|
||||
line-height: 1.5;
|
||||
line-height: 1.428;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
|
|
@ -663,9 +663,9 @@ blockquote:after {
|
|||
|
||||
address {
|
||||
display: block;
|
||||
margin-bottom: 21px;
|
||||
margin-bottom: 20px;
|
||||
font-style: normal;
|
||||
line-height: 1.5;
|
||||
line-height: 1.428;
|
||||
}
|
||||
|
||||
code,
|
||||
|
|
@ -687,10 +687,10 @@ code {
|
|||
|
||||
pre {
|
||||
display: block;
|
||||
padding: 0.25;
|
||||
margin: 0 0 0.75;
|
||||
padding: 9.5px;
|
||||
margin: 0 0 10px;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
line-height: 1.428;
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
white-space: pre;
|
||||
|
|
@ -702,7 +702,7 @@ pre {
|
|||
}
|
||||
|
||||
pre.prettyprint {
|
||||
margin-bottom: 1.5;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
pre code {
|
||||
|
|
@ -1010,7 +1010,7 @@ th {
|
|||
|
||||
.table {
|
||||
width: 100%;
|
||||
margin-bottom: 1.5;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.table thead > tr > th,
|
||||
|
|
@ -1018,7 +1018,7 @@ th {
|
|||
.table thead > tr > td,
|
||||
.table tbody > tr > td {
|
||||
padding: 8px;
|
||||
line-height: 1.5;
|
||||
line-height: 1.428;
|
||||
vertical-align: top;
|
||||
border-top: 1px solid #dddddd;
|
||||
}
|
||||
|
|
@ -1204,7 +1204,7 @@ legend {
|
|||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin-bottom: 21px;
|
||||
margin-bottom: 20px;
|
||||
font-size: 21px;
|
||||
line-height: 1.1;
|
||||
color: #333333;
|
||||
|
|
@ -1235,10 +1235,10 @@ input[type="search"],
|
|||
input[type="tel"],
|
||||
input[type="color"] {
|
||||
display: block;
|
||||
min-height: 35px;
|
||||
min-height: 34px;
|
||||
padding: 6px 9px;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
line-height: 1.428;
|
||||
color: #555555;
|
||||
vertical-align: middle;
|
||||
background-color: #ffffff;
|
||||
|
|
@ -1313,10 +1313,10 @@ input[type="checkbox"] {
|
|||
|
||||
select,
|
||||
input[type="file"] {
|
||||
height: 35px;
|
||||
height: 34px;
|
||||
/* 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: 35px;
|
||||
line-height: 34px;
|
||||
}
|
||||
|
||||
select[multiple],
|
||||
|
|
@ -1356,7 +1356,7 @@ textarea::-webkit-input-placeholder {
|
|||
.radio,
|
||||
.checkbox {
|
||||
display: block;
|
||||
min-height: 21px;
|
||||
min-height: 20px;
|
||||
padding-left: 20px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
|
|
@ -1425,7 +1425,7 @@ input[type="search"].input-large,
|
|||
input[type="tel"].input-large,
|
||||
input[type="color"].input-large {
|
||||
padding: 11px 14px;
|
||||
font-size: 17.5px;
|
||||
font-size: 18px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
|
|
@ -1445,9 +1445,9 @@ input[type="url"].input-small,
|
|||
input[type="search"].input-small,
|
||||
input[type="tel"].input-small,
|
||||
input[type="color"].input-small {
|
||||
min-height: 27px;
|
||||
min-height: 26px;
|
||||
padding: 2px 10px;
|
||||
font-size: 11.9px;
|
||||
font-size: 12px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
|
|
@ -1540,9 +1540,9 @@ select:focus:invalid:focus {
|
|||
}
|
||||
|
||||
.form-actions {
|
||||
padding: 21px 20px;
|
||||
margin-top: 21px;
|
||||
margin-bottom: 21px;
|
||||
padding: 20px 20px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
background-color: #f5f5f5;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
}
|
||||
|
|
@ -1612,7 +1612,7 @@ select:focus:invalid:focus {
|
|||
padding: 6px 8px;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
line-height: 1.5;
|
||||
line-height: 1.428;
|
||||
text-align: center;
|
||||
text-shadow: 0 1px 0 #fff;
|
||||
background-color: #eeeeee;
|
||||
|
|
@ -1625,13 +1625,13 @@ select:focus:invalid:focus {
|
|||
|
||||
.input-group-addon.input-small {
|
||||
padding: 2px 10px;
|
||||
font-size: 11.9px;
|
||||
font-size: 12px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.input-group-addon.input-large {
|
||||
padding: 11px 14px;
|
||||
font-size: 17.5px;
|
||||
font-size: 18px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
|
|
@ -1707,7 +1707,7 @@ select:focus:invalid:focus {
|
|||
margin-bottom: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
line-height: 1.428;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
|
|
@ -1968,19 +1968,19 @@ fieldset[disabled] .btn-link:focus {
|
|||
|
||||
.btn-large {
|
||||
padding: 11px 14px;
|
||||
font-size: 17.5px;
|
||||
font-size: 18px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.btn-small {
|
||||
padding: 2px 10px;
|
||||
font-size: 11.9px;
|
||||
font-size: 12px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.btn-mini {
|
||||
padding: 0 6px;
|
||||
font-size: 10.5px;
|
||||
font-size: 11px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
|
|
@ -2746,7 +2746,7 @@ input[type="button"].btn-block {
|
|||
|
||||
.dropdown-menu .divider {
|
||||
height: 2px;
|
||||
margin: -0.25 0;
|
||||
margin: 9px 0;
|
||||
overflow: hidden;
|
||||
background-color: #e5e5e5;
|
||||
border-bottom: 1px solid #ffffff;
|
||||
|
|
@ -2757,7 +2757,7 @@ input[type="button"].btn-block {
|
|||
padding: 3px 20px;
|
||||
clear: both;
|
||||
font-weight: normal;
|
||||
line-height: 1.5;
|
||||
line-height: 1.428;
|
||||
color: #333333;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
@ -3175,7 +3175,7 @@ button.close {
|
|||
|
||||
.nav .nav-divider {
|
||||
height: 2px;
|
||||
margin: -0.25 0;
|
||||
margin: 9px 0;
|
||||
overflow: hidden;
|
||||
background-color: #e5e5e5;
|
||||
border-bottom: 1px solid #ffffff;
|
||||
|
|
@ -3192,7 +3192,7 @@ button.close {
|
|||
|
||||
.nav-tabs > li > a {
|
||||
margin-right: 2px;
|
||||
line-height: 1.5;
|
||||
line-height: 1.428;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
|
@ -3280,9 +3280,9 @@ button.close {
|
|||
.nav-header {
|
||||
display: block;
|
||||
padding: 3px 15px;
|
||||
font-size: 10.5px;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
line-height: 1.5;
|
||||
line-height: 1.428;
|
||||
color: #999999;
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
text-transform: uppercase;
|
||||
|
|
@ -3421,8 +3421,8 @@ button.close {
|
|||
}
|
||||
|
||||
.navbar-nav > li > a {
|
||||
padding-top: 14.5px;
|
||||
padding-bottom: 14.5px;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
line-height: 20px;
|
||||
color: #777777;
|
||||
}
|
||||
|
|
@ -3475,9 +3475,9 @@ button.close {
|
|||
padding: 15px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
font-size: 17.5px;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
line-height: 21px;
|
||||
line-height: 20px;
|
||||
color: #777777;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -3685,12 +3685,12 @@ button.close {
|
|||
}
|
||||
|
||||
.navbar-btn {
|
||||
margin-top: 7.5px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.navbar-text {
|
||||
margin-top: 14.5px;
|
||||
margin-bottom: 14.5px;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.navbar-link {
|
||||
|
|
@ -3901,7 +3901,7 @@ button.close {
|
|||
|
||||
.breadcrumb {
|
||||
padding: 8px 15px;
|
||||
margin: 0 0 1.5;
|
||||
margin: 0 0 20px;
|
||||
list-style: none;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 4px;
|
||||
|
|
@ -3929,7 +3929,7 @@ button.close {
|
|||
|
||||
.pagination {
|
||||
display: inline-block;
|
||||
margin: 1.5 0;
|
||||
margin: 20px 0;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
|
|
@ -3941,7 +3941,7 @@ button.close {
|
|||
.pagination > li > span {
|
||||
float: left;
|
||||
padding: 4px 12px;
|
||||
line-height: 1.5;
|
||||
line-height: 1.428;
|
||||
text-decoration: none;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #dddddd;
|
||||
|
|
@ -3986,7 +3986,7 @@ button.close {
|
|||
.pagination-large > li > a,
|
||||
.pagination-large > li > span {
|
||||
padding: 11px 14px;
|
||||
font-size: 17.5px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.pagination-large > li:first-child > a,
|
||||
|
|
@ -4020,17 +4020,17 @@ button.close {
|
|||
.pagination-small > li > a,
|
||||
.pagination-small > li > span {
|
||||
padding: 2px 10px;
|
||||
font-size: 11.9px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.pagination-mini > li > a,
|
||||
.pagination-mini > li > span {
|
||||
padding: 0 6px;
|
||||
font-size: 10.5px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.pager {
|
||||
margin: 1.5 0;
|
||||
margin: 20px 0;
|
||||
text-align: center;
|
||||
list-style: none;
|
||||
}
|
||||
|
|
@ -4167,7 +4167,7 @@ button.close {
|
|||
}
|
||||
|
||||
.modal-header {
|
||||
min-height: 16.5px;
|
||||
min-height: 16.428px;
|
||||
padding: 15px;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
|
|
@ -4178,7 +4178,7 @@ button.close {
|
|||
|
||||
.modal-title {
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
line-height: 1.428;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
|
|
@ -4245,7 +4245,7 @@ button.close {
|
|||
position: absolute;
|
||||
z-index: 1030;
|
||||
display: block;
|
||||
font-size: 10.5px;
|
||||
font-size: 11px;
|
||||
line-height: 1.4;
|
||||
opacity: 0;
|
||||
filter: alpha(opacity=0);
|
||||
|
|
@ -4468,7 +4468,7 @@ button.close {
|
|||
|
||||
.alert {
|
||||
padding: 10px 35px 10px 15px;
|
||||
margin-bottom: 21px;
|
||||
margin-bottom: 20px;
|
||||
color: #c09853;
|
||||
background-color: #fcf8e3;
|
||||
border: 1px solid #fbeed5;
|
||||
|
|
@ -4559,7 +4559,7 @@ button.close {
|
|||
.thumbnail,
|
||||
.img-thumbnail {
|
||||
padding: 4px;
|
||||
line-height: 1.5;
|
||||
line-height: 1.428;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #dddddd;
|
||||
border-radius: 4px;
|
||||
|
|
@ -4692,7 +4692,7 @@ a.thumbnail:focus {
|
|||
display: inline-block;
|
||||
min-width: 10px;
|
||||
padding: 3px 7px;
|
||||
font-size: 11.9px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
color: #fff;
|
||||
|
|
@ -4779,8 +4779,8 @@ a.list-group-item.active > .badge,
|
|||
}
|
||||
|
||||
.progress {
|
||||
height: 21px;
|
||||
margin-bottom: 21px;
|
||||
height: 20px;
|
||||
margin-bottom: 20px;
|
||||
overflow: hidden;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 4px;
|
||||
|
|
@ -4792,7 +4792,7 @@ a.list-group-item.active > .badge,
|
|||
float: left;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
font-size: 11.9px;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
|
|
@ -4874,7 +4874,7 @@ a.list-group-item.active > .badge,
|
|||
}
|
||||
|
||||
.accordion {
|
||||
margin-bottom: 1.5;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.accordion-group {
|
||||
|
|
@ -5086,7 +5086,7 @@ a.list-group-item.active > .badge,
|
|||
margin-bottom: 30px;
|
||||
font-size: 21px;
|
||||
font-weight: 200;
|
||||
line-height: 2.25;
|
||||
line-height: 2.142;
|
||||
color: inherit;
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -331,7 +331,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
|
|||
|
||||
<!-- Body copy -->
|
||||
<h2 id="type-body-copy">Body copy</h2>
|
||||
<p>Bootstrap's global default <code>font-size</code> is <strong>14px</strong>, with a <code>line-height</code> of <strong>1.5</strong>. This is applied to the <code><body></code> and all paragraphs. In addition, <code><p></code> (paragraphs) receive a bottom margin of half their line-height (10px by default).</p>
|
||||
<p>Bootstrap's global default <code>font-size</code> is <strong>14px</strong>, with a <code>line-height</code> of <strong>1.428</strong>. This is applied to the <code><body></code> and all paragraphs. In addition, <code><p></code> (paragraphs) receive a bottom margin of half their computed line-height (10px by default).</p>
|
||||
<div class="bs-example">
|
||||
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
|
||||
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||
|
|
|
|||
|
|
@ -444,9 +444,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// Small grid columns
|
||||
.generate-grid-columns(@grid-columns) {
|
||||
|
||||
|
|
|
|||
|
|
@ -46,12 +46,12 @@
|
|||
@font-family-base: @font-family-sans-serif;
|
||||
|
||||
@font-size-base: 14px;
|
||||
@font-size-large: (@font-size-base * 1.25); // ~18px
|
||||
@font-size-small: (@font-size-base * 0.85); // ~12px
|
||||
@font-size-mini: (@font-size-base * 0.75); // ~11px
|
||||
@font-size-large: ceil(@font-size-base * 1.25); // ~18px
|
||||
@font-size-small: ceil(@font-size-base * 0.85); // ~12px
|
||||
@font-size-mini: ceil(@font-size-base * 0.75); // ~11px
|
||||
|
||||
@line-height-base: 1.5;
|
||||
@line-height-computed: (@font-size-base * @line-height-base);
|
||||
@line-height-base: 1.428; // 20/14
|
||||
@line-height-computed: ceil(@font-size-base * @line-height-base); // ~20px
|
||||
@line-height-headings: 1.1;
|
||||
|
||||
@headings-font-family: inherit; // empty to use BS default, @font-family-base
|
||||
|
|
|
|||
Loading…
Reference in New Issue