mirror of
https://github.com/twbs/bootstrap.git
synced 2024-11-28 10:24:19 +01:00
Exploring rems as font-size unit
* Added a new mixin to calculate rems and pixels for IE fallback * Updated the body, p, and .lead elements to use the new .font-size() mixin * New mixin has default value of 14px or 1.4rem * Still needs exploration, and change this means lots of work rejiggering margins and line-heights * Related, started to reorganize the mixins a bit to call out mixins that are used by the framework and not utilities or snippets
This commit is contained in:
Mark Otto
parent
47f69c0d9e
commit
6012d8221b
61
docs/assets/css/bootstrap.css
vendored
61
docs/assets/css/bootstrap.css
vendored
@ -288,11 +288,6 @@ html {
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.5;
|
||||
color: #333333;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
@ -304,6 +299,7 @@ select,
|
||||
textarea {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
font-size: 1.4rem;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
@ -346,6 +342,7 @@ p {
|
||||
.lead {
|
||||
margin-bottom: 20px;
|
||||
font-size: 21px;
|
||||
font-size: 2.1rem;
|
||||
font-weight: 200;
|
||||
line-height: 1.25;
|
||||
}
|
||||
@ -470,58 +467,58 @@ h6 {
|
||||
|
||||
h1,
|
||||
.h1 {
|
||||
font-size: 38.5px;
|
||||
font-size: 38.5;
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
h2,
|
||||
.h2 {
|
||||
font-size: 31.5px;
|
||||
font-size: 31.5;
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
h3,
|
||||
.h3 {
|
||||
font-size: 24.5px;
|
||||
font-size: 24.5;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
h4,
|
||||
.h4 {
|
||||
font-size: 17.5px;
|
||||
font-size: 17.5;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h5,
|
||||
.h5 {
|
||||
font-size: 14px;
|
||||
font-size: 14;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
h6,
|
||||
.h6 {
|
||||
font-size: 11.9px;
|
||||
font-size: 11.9;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
h1 small,
|
||||
.h1 small {
|
||||
font-size: 24.5px;
|
||||
font-size: 24.5;
|
||||
}
|
||||
|
||||
h2 small,
|
||||
.h2 small {
|
||||
font-size: 17.5px;
|
||||
font-size: 17.5;
|
||||
}
|
||||
|
||||
h3 small,
|
||||
.h3 small {
|
||||
font-size: 14px;
|
||||
font-size: 14;
|
||||
}
|
||||
|
||||
h4 small,
|
||||
.h4 small {
|
||||
font-size: 14px;
|
||||
font-size: 14;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
@ -627,7 +624,7 @@ blockquote {
|
||||
|
||||
blockquote p {
|
||||
margin-bottom: 0;
|
||||
font-size: 17.5px;
|
||||
font-size: 17.5;
|
||||
font-weight: 300;
|
||||
line-height: 1.25;
|
||||
}
|
||||
@ -681,7 +678,7 @@ code,
|
||||
pre {
|
||||
padding: 0 3px 2px;
|
||||
font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
|
||||
font-size: 12px;
|
||||
font-size: 12;
|
||||
color: #333333;
|
||||
border-radius: 4px;
|
||||
}
|
||||
@ -698,7 +695,7 @@ pre {
|
||||
display: block;
|
||||
padding: 9.5px;
|
||||
margin: 0 0 10px;
|
||||
font-size: 13px;
|
||||
font-size: 13;
|
||||
line-height: 20px;
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
@ -1118,7 +1115,7 @@ legend {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin-bottom: 20px;
|
||||
font-size: 21px;
|
||||
font-size: 21;
|
||||
line-height: 40px;
|
||||
color: #333333;
|
||||
border: 0;
|
||||
@ -1150,7 +1147,7 @@ input[type="color"] {
|
||||
display: inline-block;
|
||||
min-height: 34px;
|
||||
padding: 6px 9px;
|
||||
font-size: 14px;
|
||||
font-size: 14;
|
||||
line-height: 20px;
|
||||
color: #555555;
|
||||
vertical-align: middle;
|
||||
@ -1326,7 +1323,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: 17.5;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
@ -1348,7 +1345,7 @@ input[type="tel"].input-small,
|
||||
input[type="color"].input-small {
|
||||
min-height: 26px;
|
||||
padding: 2px 10px;
|
||||
font-size: 11.9px;
|
||||
font-size: 11.9;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
@ -1535,7 +1532,7 @@ select:focus:invalid:focus {
|
||||
|
||||
.input-group-addon {
|
||||
padding: 6px 8px;
|
||||
font-size: 14px;
|
||||
font-size: 14;
|
||||
font-weight: normal;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
@ -1549,12 +1546,12 @@ select:focus:invalid:focus {
|
||||
|
||||
.input-group-addon.input-small {
|
||||
padding: 2px 10px;
|
||||
font-size: 11.9px;
|
||||
font-size: 11.9;
|
||||
}
|
||||
|
||||
.input-group-addon.input-large {
|
||||
padding: 11px 14px;
|
||||
font-size: 17.5px;
|
||||
font-size: 17.5;
|
||||
}
|
||||
|
||||
.input-group input:first-child,
|
||||
@ -1690,7 +1687,7 @@ select:focus:invalid:focus {
|
||||
display: inline-block;
|
||||
padding: 6px 12px;
|
||||
margin-bottom: 0;
|
||||
font-size: 14px;
|
||||
font-size: 14;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
@ -1734,19 +1731,19 @@ fieldset[disabled] .btn {
|
||||
|
||||
.btn-large {
|
||||
padding: 11px 14px;
|
||||
font-size: 17.5px;
|
||||
font-size: 17.5;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.btn-small {
|
||||
padding: 2px 10px;
|
||||
font-size: 11.9px;
|
||||
font-size: 11.9;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.btn-mini {
|
||||
padding: 0 6px;
|
||||
font-size: 10.5px;
|
||||
font-size: 10.5;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
@ -3788,7 +3785,7 @@ button.close {
|
||||
.pagination-large > li > a,
|
||||
.pagination-large > li > span {
|
||||
padding: 11px 14px;
|
||||
font-size: 17.5px;
|
||||
font-size: 17.5;
|
||||
}
|
||||
|
||||
.pagination-large > li:first-child > a,
|
||||
@ -3822,13 +3819,13 @@ button.close {
|
||||
.pagination-small > li > a,
|
||||
.pagination-small > li > span {
|
||||
padding: 2px 10px;
|
||||
font-size: 11.9px;
|
||||
font-size: 11.9;
|
||||
}
|
||||
|
||||
.pagination-mini > li > a,
|
||||
.pagination-mini > li > span {
|
||||
padding: 0 6px;
|
||||
font-size: 10.5px;
|
||||
font-size: 10.5;
|
||||
}
|
||||
|
||||
.pager {
|
||||
|
||||
@ -114,28 +114,6 @@
|
||||
}
|
||||
|
||||
|
||||
// FORMS
|
||||
// --------------------------------------------------
|
||||
|
||||
.formFieldState(@text-color: #555, @border-color: #ccc, @background-color: #f5f5f5) {
|
||||
// Color the label text
|
||||
.control-label {
|
||||
color: @text-color;
|
||||
}
|
||||
// Set the border and box shadow on specific inputs to match
|
||||
.input-with-feedback {
|
||||
padding-right: 32px; // to account for the feedback icon
|
||||
border-color: @border-color;
|
||||
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
|
||||
&:focus {
|
||||
border-color: darken(@border-color, 10%);
|
||||
@shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%);
|
||||
.box-shadow(@shadow);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// CSS3 PROPERTIES
|
||||
// --------------------------------------------------
|
||||
@ -553,3 +531,35 @@
|
||||
.pushX(@grid-columns);
|
||||
.pullX(@grid-columns);
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Framework mixins
|
||||
// --------------------------------------------------
|
||||
|
||||
// Generate rem font-sizes with pixel fallbacks
|
||||
// By default uses `@font-size-base` with an initial value of 14 (1.4rem or 14px)
|
||||
.font-size(@font-size: @font-size-base) {
|
||||
@rem-size: (@font-size / 10);
|
||||
font-size: ~"@{font-size}px";
|
||||
font-size: ~"@{rem-size}rem";
|
||||
}
|
||||
|
||||
// Generate form validation states
|
||||
.formFieldState(@text-color: #555, @border-color: #ccc, @background-color: #f5f5f5) {
|
||||
// Color the label text
|
||||
.control-label {
|
||||
color: @text-color;
|
||||
}
|
||||
// Set the border and box shadow on specific inputs to match
|
||||
.input-with-feedback {
|
||||
padding-right: 32px; // to account for the feedback icon
|
||||
border-color: @border-color;
|
||||
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
|
||||
&:focus {
|
||||
border-color: darken(@border-color, 10%);
|
||||
@shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%);
|
||||
.box-shadow(@shadow);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -30,12 +30,7 @@ html {
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
color: @text-color;
|
||||
font-family: @font-family-base;
|
||||
font-size: 14px;
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.5;
|
||||
background-color: @body-background;
|
||||
}
|
||||
|
||||
@ -46,7 +41,7 @@ button,
|
||||
select,
|
||||
textarea {
|
||||
font-family: @font-family-base;
|
||||
font-size: @font-size-base;
|
||||
.font-size();
|
||||
line-height: @line-height-base;
|
||||
}
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@ p {
|
||||
}
|
||||
.lead {
|
||||
margin-bottom: @line-height-base;
|
||||
font-size: (@font-size-base * 1.5);
|
||||
.font-size((@font-size-base * 1.5));
|
||||
font-weight: 200;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
@ -45,7 +45,7 @@
|
||||
@font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace;
|
||||
@font-family-base: @font-family-sans-serif;
|
||||
|
||||
@font-size-base: 14px;
|
||||
@font-size-base: 14;
|
||||
@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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user