mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-19 16:54:24 +01:00
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:
parent
8c1a908754
commit
dd4140319a
2
bootstrap.css
vendored
2
bootstrap.css
vendored
@ -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;
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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
|
||||
|
@ -68,3 +68,7 @@
|
||||
|
||||
// Visuals
|
||||
@primaryButtonColor: @blue;
|
||||
|
||||
|
||||
|
||||
@placeHolderText: @grayLight;
|
||||
|
Loading…
x
Reference in New Issue
Block a user