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

Exploring rems as font-size unit

Browse Source 
* 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
2013-03-17 11:33:07 -07:00
parent 47f69c0d9e
commit 6012d8221b
5 changed files with 64 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
less/mixins.less
+32 -22
View File
@@ -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);
}
}
}
less/scaffolding.less
+1 -6
View File
@@ -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;
}
less/type.less
+1 -1
View File
@@ -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;
}
less/variables.less
+1 -1
View File
@@ -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