revamp the mixins file to organize things a bit more, make placeholder text use a new variable instead of relying solely on @grayLight

This commit is contained in:
Mark Otto 2012-01-17 23:52:49 -08:00
parent 8c1a908754
commit dd4140319a
4 changed files with 74 additions and 31 deletions

2
bootstrap.css vendored
View File

@ -6,7 +6,7 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
* *
* Designed and built with all the love in the world @twitter by @mdo and @fat. * Designed and built with all the love in the world @twitter by @mdo and @fat.
* Date: Tue Jan 17 23:38:42 PST 2012 * Date: Tue Jan 17 23:52:18 PST 2012
*/ */
html, body { html, body {
margin: 0; margin: 0;

View File

@ -3,7 +3,12 @@
// ----------------------------------------------------------------- // -----------------------------------------------------------------
// Clearfix for clearing floats like a boss h5bp.com/q // UTILITY MIXINS
// --------------------------------------------------
// Clearfix
// -------------------------
// For clearing floats like a boss h5bp.com/q
.clearfix() { .clearfix() {
zoom: 1; zoom: 1;
&:before, &:before,
@ -19,6 +24,7 @@
} }
// Center-align a block level element // Center-align a block level element
// -------------------------
.center-block() { .center-block() {
display: block; display: block;
margin-left: auto; margin-left: auto;
@ -26,12 +32,14 @@
} }
// IE7 inline-block // IE7 inline-block
// -------------------------
.ie7-inline-block() { .ie7-inline-block() {
*display: inline; /* IE7 inline-block hack */ *display: inline; /* IE7 inline-block hack */
*zoom: 1; *zoom: 1;
} }
// Sizing shortcuts // Sizing shortcuts
// -------------------------
.size(@height: 5px, @width: 5px) { .size(@height: 5px, @width: 5px) {
width: @width; width: @width;
height: @height; height: @height;
@ -40,8 +48,9 @@
.size(@size, @size); .size(@size, @size);
} }
// Input placeholder text // Placeholder text
.placeholder(@color: @grayLight) { // -------------------------
.placeholder(@color: @placeHolderText) {
:-moz-placeholder { :-moz-placeholder {
color: @color; color: @color;
} }
@ -50,7 +59,11 @@
} }
} }
// Font Stacks
// FONTS
// --------------------------------------------------
#font { #font {
#family { #family {
.serif() { .serif() {
@ -82,20 +95,28 @@
} }
} }
// Grid System
// GRID SYSTEM
// --------------------------------------------------
// Site container
// -------------------------
.fixed-container() { .fixed-container() {
width: @siteWidth; width: @siteWidth;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
.clearfix(); .clearfix();
} }
// Columns and offseting
// -------------------------
.columns(@columns: 1) { .columns(@columns: 1) {
width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
} }
.offset(@columns: 1) { .offset(@columns: 1) {
margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2); margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
} }
// Necessary grid styles for every column to make them appear next to each other horizontally // Necessary grid styles for every column to make them appear next to each other horizontally
.gridColumn() { .gridColumn() {
float: left; float: left;
@ -107,6 +128,11 @@
.columns(@columnSpan); .columns(@columnSpan);
} }
// CSS3 PROPERTIES
// --------------------------------------------------
// Border Radius // Border Radius
.border-radius(@radius: 5px) { .border-radius(@radius: 5px) {
-webkit-border-radius: @radius; -webkit-border-radius: @radius;
@ -170,15 +196,6 @@
transform: translate(@x, @y); transform: translate(@x, @y);
} }
// User select
// For selecting text on the page
.user-select(@select) {
-webkit-user-select: @select;
-moz-user-select: @select;
-o-user-select: @select;
user-select: @select;
}
// Background clipping // Background clipping
// Heads up: FF 3.6 and under need padding instead of padding-box // Heads up: FF 3.6 and under need padding instead of padding-box
.background-clip(@clip) { .background-clip(@clip) {
@ -187,6 +204,15 @@
background-clip: @clip; background-clip: @clip;
} }
// Background sizing
.background-size(@size){
-webkit-background-size: @size;
-moz-background-size: @size;
-o-background-size: @size;
background-size: @size;
}
// Box sizing // Box sizing
.box-sizing(@boxmodel) { .box-sizing(@boxmodel) {
-webkit-box-sizing: @boxmodel; -webkit-box-sizing: @boxmodel;
@ -194,6 +220,15 @@
box-sizing: @boxmodel; box-sizing: @boxmodel;
} }
// User select
// For selecting text on the page
.user-select(@select) {
-webkit-user-select: @select;
-moz-user-select: @select;
-o-user-select: @select;
user-select: @select;
}
// Resize anything // Resize anything
.resizable(@direction: both) { .resizable(@direction: both) {
resize: @direction; // Options: horizontal, vertical, both resize: @direction; // Options: horizontal, vertical, both
@ -210,6 +245,18 @@
column-gap: @columnGap; column-gap: @columnGap;
} }
// Opacity
.opacity(@opacity: 100) {
filter: e(%("alpha(opacity=%d)", @opacity));
-moz-opacity: @opacity / 100;
opacity: @opacity / 100;
}
// BACKGROUNDS
// --------------------------------------------------
// Add an alphatransparency value to any background or border color (via Elyse Holladay) // Add an alphatransparency value to any background or border color (via Elyse Holladay)
#translucent { #translucent {
.background(@color: @white, @alpha: 1) { .background(@color: @white, @alpha: 1) {
@ -301,14 +348,13 @@
filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)")); filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
} }
// Opacity
.opacity(@opacity: 100) {
filter: e(%("alpha(opacity=%d)", @opacity));
-moz-opacity: @opacity / 100;
opacity: @opacity / 100;
}
// Popover arrows
// COMPONENT MIXINS
// --------------------------------------------------
// POPOVER ARROWS
// -------------------------
// For tipsies and popovers // For tipsies and popovers
#popoverArrow { #popoverArrow {
.top(@arrowWidth: 5px) { .top(@arrowWidth: 5px) {
@ -344,10 +390,3 @@
border-right: @arrowWidth solid @black; border-right: @arrowWidth solid @black;
} }
} }
.background-size(@width, @height){
-webkit-background-size: @width @height;
-moz-background-size: @width @height;
-o-background-size: @width @height;
background-size: @width @height;
}

View File

@ -55,7 +55,7 @@
// Striped bars // Striped bars
.progress.striped .bar { .progress.striped .bar {
#gradient > .striped(#62c462); #gradient > .striped(#62c462);
.background-size(40px, 40px); .background-size(40px 40px);
} }
// Call animation for the active one // Call animation for the active one

View File

@ -68,3 +68,7 @@
// Visuals // Visuals
@primaryButtonColor: @blue; @primaryButtonColor: @blue;
@placeHolderText: @grayLight;