diff --git a/bootstrap.css b/bootstrap.css index c184d1332a..e2fd3539d1 100644 --- a/bootstrap.css +++ b/bootstrap.css @@ -6,7 +6,7 @@ * http://www.apache.org/licenses/LICENSE-2.0 * * 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 { margin: 0; diff --git a/lib/mixins.less b/lib/mixins.less index 67e0c27de2..bcc67954af 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -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() { zoom: 1; &:before, @@ -19,6 +24,7 @@ } // Center-align a block level element +// ------------------------- .center-block() { display: block; margin-left: auto; @@ -26,12 +32,14 @@ } // IE7 inline-block +// ------------------------- .ie7-inline-block() { *display: inline; /* IE7 inline-block hack */ *zoom: 1; } // Sizing shortcuts +// ------------------------- .size(@height: 5px, @width: 5px) { width: @width; height: @height; @@ -40,8 +48,9 @@ .size(@size, @size); } -// Input placeholder text -.placeholder(@color: @grayLight) { +// Placeholder text +// ------------------------- +.placeholder(@color: @placeHolderText) { :-moz-placeholder { color: @color; } @@ -50,7 +59,11 @@ } } -// Font Stacks + + +// FONTS +// -------------------------------------------------- + #font { #family { .serif() { @@ -82,20 +95,28 @@ } } -// Grid System + + +// GRID SYSTEM +// -------------------------------------------------- + +// Site container +// ------------------------- .fixed-container() { width: @siteWidth; margin-left: auto; margin-right: auto; .clearfix(); } + +// Columns and offseting +// ------------------------- .columns(@columns: 1) { width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); } .offset(@columns: 1) { margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2); } - // Necessary grid styles for every column to make them appear next to each other horizontally .gridColumn() { float: left; @@ -107,6 +128,11 @@ .columns(@columnSpan); } + + +// CSS3 PROPERTIES +// -------------------------------------------------- + // Border Radius .border-radius(@radius: 5px) { -webkit-border-radius: @radius; @@ -170,15 +196,6 @@ 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 // Heads up: FF 3.6 and under need padding instead of padding-box .background-clip(@clip) { @@ -187,6 +204,15 @@ 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(@boxmodel) { -webkit-box-sizing: @boxmodel; @@ -194,6 +220,15 @@ 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 .resizable(@direction: both) { resize: @direction; // Options: horizontal, vertical, both @@ -210,6 +245,18 @@ 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) #translucent { .background(@color: @white, @alpha: 1) { @@ -301,14 +348,13 @@ 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 #popoverArrow { .top(@arrowWidth: 5px) { @@ -344,10 +390,3 @@ 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; -} diff --git a/lib/progress-bars.less b/lib/progress-bars.less index fd9d3f4271..e8557a99e7 100644 --- a/lib/progress-bars.less +++ b/lib/progress-bars.less @@ -55,7 +55,7 @@ // Striped bars .progress.striped .bar { #gradient > .striped(#62c462); - .background-size(40px, 40px); + .background-size(40px 40px); } // Call animation for the active one diff --git a/lib/variables.less b/lib/variables.less index 3f32c36f4d..3709d598d1 100644 --- a/lib/variables.less +++ b/lib/variables.less @@ -68,3 +68,7 @@ // Visuals @primaryButtonColor: @blue; + + + +@placeHolderText: @grayLight;