mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-17 19:21:23 +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);
}
}
}