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
|
@ -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;
|
||||||
|
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -68,3 +68,7 @@
|
||||||
|
|
||||||
// Visuals
|
// Visuals
|
||||||
@primaryButtonColor: @blue;
|
@primaryButtonColor: @blue;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@placeHolderText: @grayLight;
|
||||||
|
|
Loading…
Reference in New Issue