Browse Source

Moved Mixins back to their own file

pull/185/head
Zach Wise 13 years ago
parent
commit
ec9c397088
  1. 166
      source/less/Mixins.less
  2. 30
      source/less/Variables.less

166
source/less/Mixins.less

@ -1,46 +1,95 @@
/* Mixins.less /* Mixins.less
* Snippets of reusable CSS to develop faster and keep code readable * Snippets of reusable CSS to develop faster and keep code readable
* ----------------------------------------------------------------- */ * ----------------------------------------------------------------- */
// Text Font
// Clearfix for clearing floats like a boss h5bp.com/q .text-font(@fontsize: 15px) {
.clearfix() { font-size: @fontsize;
zoom: 1; line-height: round((@fontsize/100) * 130);
&:before,
&:after {
display: table;
content: "";
zoom: 1;
}
&:after {
clear: both;
}
} }
// Border Radius
// Center-align a block level element .border-radius(@radius: 5px) {
.center-block() { -webkit-border-radius: @radius;
display: block; -moz-border-radius: @radius;
margin-left: auto; border-radius: @radius;
margin-right: auto;
} }
// User Select
// Sizing shortcuts .user-select(@userselect) {
.size(@height: 5px, @width: 5px) { -webkit-user-select: @userselect;
height: @height; -moz-user-select: @userselect;
width: @width; user-select: @userselect;
} }
.square(@size: 5px) { // Box Shadow
.size(@size, @size); .box-shadow(@shadow: 1px 1px 7px rgba(0,0,0,.30)) {
-webkit-box-shadow: @shadow;
-moz-box-shadow: @shadow;
box-shadow: @shadow;
} }
// Media Shadow
// Input placeholder text .media-shadow(@shadow: 0 1px 3px 0px @color-dark-fourth) {
.placeholder(@color: @grayLight) { -webkit-box-shadow: @shadow;
:-moz-placeholder { -moz-box-shadow: @shadow;
color: @color; box-shadow: @shadow;
} border: 1px solid;
::-webkit-input-placeholder { border-color: @color-line @color-dark-fourth @color-dark-fourth @color-line;
color: @color; }
} // Transform
.transform(@transform) {
-webkit-transform: @transform;
-moz-transform: @transform;
-ms-transform: @transform;
-o-transform: @transform;
transform: @transform;
}
// Transitions
.transition(@transition) {
-webkit-transition: @transition;
-moz-transition: @transition;
-ms-transition: @transition;
-o-transition: @transition;
transition: @transition;
}
// Background clipping
.background-clip(@clip) {
-webkit-background-clip: @clip;
-moz-background-clip: @clip;
background-clip: @clip;
}
// Opacity
.opacity(@opacity: 100) {
filter: e(%("alpha(opacity=%d)", @opacity));
-khtml-opacity: @opacity / 100;
-moz-opacity: @opacity / 100;
opacity: @opacity / 100;
}
// Hyphens
.hyphens(@hyphens: auto) {
-webkit-hyphens:@hyphens;
-moz-hyphens:@hyphens;
-ms-hyphens:@hyphens;
hyphens:@hyphens;
}
// Clear Fix
.clearfix() {
*zoom: 1;
&:before,
&:after {
display: table;
content: "";
}
&:after {
clear: both;
}
}
// Reset filters for IE
.reset-filter() {
filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
}
// Center-align a block level element
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
} }
// Font Stacks // Font Stacks
@ -89,32 +138,6 @@
} }
} }
// Border Radius
.border-radius(@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
// Drop shadows
// Transitions
.transition(@transition) {
-webkit-transition: @transition;
-moz-transition: @transition;
-ms-transition: @transition;
-o-transition: @transition;
transition: @transition;
}
// Background clipping
.background-clip(@clip) {
-webkit-background-clip: @clip;
-moz-background-clip: @clip;
background-clip: @clip;
}
// CSS3 Content Columns // CSS3 Content Columns
.content-columns(@columnCount, @columnGap: 20px) { .content-columns(@columnCount, @columnGap: 20px) {
-webkit-column-count: @columnCount; -webkit-column-count: @columnCount;
@ -125,12 +148,6 @@
column-gap: @columnGap; column-gap: @columnGap;
} }
// Make any element resizable for prototyping
.resizable(@direction: both) {
resize: @direction; // Options are horizontal, vertical, both
overflow: auto; // Safari fix
}
// 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) {
@ -196,17 +213,4 @@
background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor); background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down, gets no color-stop at all for proper fallback filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down, gets no color-stop at all for proper fallback
} }
}
// Reset filters for IE
.reset-filter() {
filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
}
// Opacity
.opacity(@opacity: 100) {
filter: e(%("alpha(opacity=%d)", @opacity));
-khtml-opacity: @opacity / 100;
-moz-opacity: @opacity / 100;
opacity: @opacity / 100;
} }

30
source/less/Variables.less

@ -84,33 +84,3 @@
@navigation-content-height: @navigation-height - @navigation-time-height; @navigation-content-height: @navigation-height - @navigation-time-height;
@navigation-marker-height: 6px; @navigation-marker-height: 6px;
/* MIXINS
================================================== */
.box-shadow(@shadow: 1px 1px 7px rgba(0,0,0,.30)) {
-webkit-box-shadow: @shadow;
-moz-box-shadow: @shadow;
box-shadow: @shadow;
}
.media-shadow(@shadow: 0 1px 3px 0px @color-dark-fourth) {
-webkit-box-shadow: @shadow;
-moz-box-shadow: @shadow;
box-shadow: @shadow;
border: 1px solid;
border-color: @color-line @color-dark-fourth @color-dark-fourth @color-line;
}
.text-font(@fontsize: 15px) {
font-size: @fontsize;
line-height: round((@fontsize/100) * 130);
}
.clearfix() {
*zoom: 1;
&:before,
&:after {
display: table;
content: "";
}
&:after {
clear: both;
}
}

Loading…
Cancel
Save