mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-08 17:22:31 +03:00
Code Activity

Unitless line-height

Browse Source 
* Instead of 20px as @line-height-base, use 1.5
* Update typographic scale for headings to use unitless as well--required some twerking of decimals a bit and some rounding
* Introduce new @line-height-computed value, which takes base font-size and multiplies it by 1.5, for use in padding and margin on components
This commit is contained in:
Mark Otto
2013-05-09 17:20:46 -07:00
parent 7b6352d2cf
commit 6fba68eb8b
8 changed files with 124 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files
less/alerts.less
+4 -4
View File
@@ -7,8 +7,8 @@
// -------------------------
.alert {
padding: 8px 35px 8px 14px;
margin-bottom: @line-height-base;
padding: 10px 35px 10px 15px;
margin-bottom: @line-height-computed;
color: @alert-text;
background-color: @alert-bg;
border: 1px solid @alert-border;
@@ -84,8 +84,8 @@
// -------------------------
.alert-block {
padding-top: 14px;
padding-bottom: 14px;
padding-top: 15px;
padding-bottom: 15px;
}
.alert-block > p,
.alert-block > ul {
less/forms.less
+6 -6
View File
@@ -20,9 +20,9 @@ legend {
display: block;
width: 100%;
padding: 0;
margin-bottom: @line-height-base;
margin-bottom: @line-height-computed;
font-size: (@font-size-base * 1.5);
line-height: (@line-height-base * 2);
line-height: @line-height-headings;
color: @gray-dark;
border: 0;
border-bottom: 1px solid #e5e5e5;
@@ -170,7 +170,7 @@ textarea {
.radio,
.checkbox {
display: block;
min-height: @line-height-base; // clear the floating input if there is no label text
min-height: @line-height-computed; // clear the floating input if there is no label text
margin-top: 10px;
margin-bottom: 10px;
padding-left: 20px;
@@ -320,9 +320,9 @@ select:focus:invalid {
// ------------
.form-actions {
padding: (@line-height-base - 1) 20px @line-height-base;
margin-top: @line-height-base;
margin-bottom: @line-height-base;
padding: @line-height-computed 20px;
margin-top: @line-height-computed;
margin-bottom: @line-height-computed;
background-color: @form-actions-bg;
border-top: 1px solid #e5e5e5;
.clearfix(); // Adding clearfix to allow for .pull-right button containers
less/navbar.less
+4 -4
View File
@@ -24,8 +24,8 @@
margin-top: 10px;
> li > a {
padding-top: ((@navbar-height - @line-height-base) / 2);
padding-bottom: ((@navbar-height - @line-height-base) / 2);
padding-top: ((@navbar-height - @line-height-computed) / 2);
padding-bottom: ((@navbar-height - @line-height-computed) / 2);
color: @navbar-link-color;
line-height: 20px;
}
@@ -91,7 +91,7 @@
padding: 15px;
font-size: @font-size-large;
font-weight: 500;
line-height: @line-height-base;
line-height: @line-height-computed;
color: @navbar-brand-color;
text-align: center;
&:hover,
@@ -323,7 +323,7 @@
// Add a class to make any element properly align itself vertically within the navbars.
.navbar-text {
.navbar-vertical-align(@line-height-computed);
}
less/progress-bars.less
+2 -2
View File
@@ -44,8 +44,8 @@
// Outer container
.progress {
overflow: hidden;
height: @line-height-base;
margin-bottom: @line-height-base;
height: @line-height-computed;
margin-bottom: @line-height-computed;
background-color: @progress-bg;
border-radius: @border-radius-base;
.box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
less/type.less
+24 -28
View File
@@ -7,10 +7,10 @@
// -------------------------
p {
margin: 0 0 (@line-height-base / 2);
margin: 0 0 (@line-height-computed / 2);
}
.lead {
margin-bottom: @line-height-base;
margin-bottom: @line-height-computed;
font-size: (@font-size-base * 1.5);
font-weight: 200;
line-height: 1.4;
@@ -56,7 +56,7 @@ 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-base;
line-height: @line-height-headings;
small {
font-weight: normal;
line-height: 1;
@@ -67,30 +67,26 @@ h1, h2, h3, h4, h5, h6,
h1,
h2,
h3 {
margin-top: @line-height-base;
margin-bottom: (@line-height-base / 2);
line-height: (@line-height-base * 2);
}
h3 {
line-height: (@line-height-base * 1.5);
margin-top: @line-height-computed;
margin-bottom: (@line-height-computed / 2);
}
h4,
h5,
h6 {
margin-top: (@line-height-base / 2);
margin-bottom: (@line-height-base / 2);
margin-top: (@line-height-computed / 2);
margin-bottom: (@line-height-computed / 2);
}
h1, .h1 { font-size: (@font-size-base * 2.75); } // ~38px
h2, .h2 { font-size: (@font-size-base * 2.25); } // ~32px
h3, .h3 { font-size: (@font-size-base * 1.75); } // ~24px
h4, .h4 { font-size: (@font-size-base * 1.25); } // ~18px
h1, .h1 { font-size: ceil(@font-size-base * 2.70); } // ~38px
h2, .h2 { font-size: ceil(@font-size-base * 2.25); } // ~32px
h3, .h3 { font-size: ceil(@font-size-base * 1.70); } // ~24px
h4, .h4 { font-size: ceil(@font-size-base * 1.25); } // ~18px
h5, .h5 { font-size: @font-size-base; }
h6, .h6 { font-size: (@font-size-base * 0.85); } // ~12px
h6, .h6 { font-size: ceil(@font-size-base * 0.85); } // ~12px
h1 small, .h1 small { font-size: (@font-size-base * 1.75); } // ~24px
h2 small, .h2 small { font-size: (@font-size-base * 1.25); } // ~18px
h3 small, .h3 small { font-size: @font-size-base; }
h1 small, .h1 small { font-size: ceil(@font-size-base * 1.70); } // ~24px
h2 small, .h2 small { font-size: ceil(@font-size-base * 1.25); } // ~18px
h3 small, .h3 small,
h4 small, .h4 small { font-size: @font-size-base; }
@@ -98,8 +94,8 @@ h4 small, .h4 small { font-size: @font-size-base; }
// -------------------------
.page-header {
padding-bottom: ((@line-height-base / 2) - 1);
margin: (@line-height-base * 2) 0 @line-height-base;
padding-bottom: ((@line-height-computed / 2) - 1);
margin: (@line-height-computed * 2) 0 @line-height-computed;
border-bottom: 1px solid @gray-lighter;
}
@@ -112,7 +108,7 @@ h4 small, .h4 small { font-size: @font-size-base; }
ul,
ol {
padding: 0;
margin: 0 0 (@line-height-base / 2) 25px;
margin: 0 0 (@line-height-computed / 2) 25px;
}
ul ul,
ul ol,
@@ -143,7 +139,7 @@ li {
// Description Lists
dl {
margin-bottom: @line-height-base;
margin-bottom: @line-height-computed;
}
dt,
dd {
@@ -153,7 +149,7 @@ dt {
font-weight: bold;
}
dd {
margin-left: (@line-height-base / 2);
margin-left: (@line-height-computed / 2);
}
// Horizontal layout (like forms)
.dl-horizontal {
@@ -175,7 +171,7 @@ dd {
// Horizontal rules
hr {
margin: @line-height-base 0;
margin: @line-height-computed 0;
border: 0;
border-top: 1px solid @hr-border;
border-bottom: 1px solid #fff;
@@ -196,8 +192,8 @@ abbr.initialism {
// Blockquotes
blockquote {
padding: (@line-height-base/2) @line-height-base;
margin: 0 0 @line-height-base;
padding: (@line-height-computed / 2) @line-height-computed;
margin: 0 0 @line-height-computed;
border-left: 5px solid @gray-lighter;
p {
font-size: (@font-size-base * 1.25);
@@ -249,7 +245,7 @@ blockquote:after {
// Addresses
address {
display: block;
margin-bottom: @line-height-base;
margin-bottom: @line-height-computed;
font-style: normal;
line-height: @line-height-base;
}
less/variables.less
+6 -4
View File
@@ -50,7 +50,9 @@
@font-size-small: (@font-size-base * 0.85); // ~12px
@font-size-mini: (@font-size-base * 0.75); // ~11px
@line-height-base: 20px;
@line-height-base: 1.5;
@line-height-computed: (@font-size-base * @line-height-base);
@line-height-headings: 1.1;
@headings-font-family: inherit; // empty to use BS default, @font-family-base
@headings-font-weight: 500;
@@ -121,9 +123,9 @@
@input-color-placeholder: @gray-light;
@input-height-base: (@line-height-base + 14px); // base line-height + 12px vertical padding + 2px top/bottom border
@input-height-large: (@line-height-base + 24px); // base line-height + 22px vertical padding + 2px top/bottom border
@input-height-small: (@line-height-base + 6px); // base line-height + 4px vertical padding + 2px top/bottom border
@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
@form-actions-bg: #f5f5f5;