Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
219 lines (188 sloc) 7.38 KB
/* Mixins.scss
* Snippets of reusable CSS to develop faster and keep code readable
* -----------------------------------------------------------------
// Clearfix for clearing floats like a boss h5bp.com/q
=clearfix
zoom: 1
&:before,
&:after
display: table
content: ""
zoom: 1
*display: inline
&:after
clear: both
.clearfix
+clearfix
// Center-align a block level element
=center-block
display: block
margin-left: auto
margin-right: auto
// Sizing shortcuts
=size($height: 5px, $width: 5px)
height: $height
width: $width
=square($size: 5px)
+size($size, $size)
// Input placeholder text
=placeholder($color: $grayLight)
\:-moz-placeholder
color: $color
\::-webkit-input-placeholder
color: $color
// Font Stacks
=shorthand-font($weight: normal, $size: 14px, $lineHeight: 20px)
font-size: $size
font-weight: $weight
line-height: $lineHeight
=sans-serif-font($weight: normal, $size: 14px, $lineHeight: 20px)
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
font-size: $size
font-weight: $weight
line-height: $lineHeight
=serif-font($weight: normal, $size: 14px, $lineHeight: 20px)
font-family: "Georgia", Times New Roman, Times, serif
font-size: $size
font-weight: $weight
line-height: $lineHeight
=monospace-font($weight: normal, $size: 12px, $lineHeight: 20px)
font-family: "Monaco", Courier New, monospace
font-size: $size
font-weight: $weight
line-height: $lineHeight
// Grid System
=fixed-container
width: $siteWidth
margin-left: auto
margin-right: auto
+clearfix
.fixed-container
+fixed-container
=columns($columnSpan: 1)
width: $gridColumnWidth * $columnSpan + $gridGutterWidth * ($columnSpan - 1)
=offset($columnOffset: 1)
margin-left: $gridColumnWidth * $columnOffset + $gridGutterWidth * ($columnOffset - 1) + $extraSpace
// Necessary grid styles for every column to make them appear next to each other horizontally
=gridColumn
display: inline
float: left
margin-left: $gridGutterWidth
// makeColumn can be used to mark any element (e.g., .content-primary) as a column without changing markup to .span something
=makeColumn($columnSpan: 1)
+gridColumn
+columns($columnSapn)
// Border Radius
=border-radius($radius: 5px)
-webkit-border-radius: $radius
-moz-border-radius: $radius
border-radius: $radius
// Drop shadows
=box-shadow($shadow: 0 1px 3px rgba(0, 0, 0, 0.25))
-webkit-box-shadow: $shadow
-moz-box-shadow: $shadow
box-shadow: $shadow
// 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
=content-columns($columnCount, $columnGap: 20px)
-webkit-column-count: $columnCount
-moz-column-count: $columnCount
column-count: $columnCount
-webkit-column-gap: $columnGap
-moz-column-gap: $columnGap
column-gap: $columnGap
// Add an alphatransparency value to any background or border color (via Elyse Holladay)
=translucent-background($color: $white, $alpha: 1)
background-color: hsla(hue($color), saturation($color), lightness($color), $alpha)
=translucent-border($color: $white, $alpha: 1)
border-color: hsla(hue($color), saturation($color), lightness($color), $alpha)
background-clip: padding-box
// Gradients
=horizontal-gradient($startColor: #555555, $endColor: #333333)
background-color: $endColor
background-repeat: repeat-x
background-image: -khtml-gradient(linear, left top, right top, from($startColor), to($endColor))
// Konqueror
background-image: -moz-linear-gradient(left, $startColor, $endColor)
// FF 3.6+
background-image: -ms-linear-gradient(left, $startColor, $endColor)
// IE10
background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, $startColor), color-stop(100%, $endColor))
// Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(left, $startColor, $endColor)
// Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(left, $startColor, $endColor)
// Opera 11.10
background-image: linear-gradient(left, $startColor, $endColor)
// Le standard
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=1)
// IE9 and down
=vertical-gradient($startColor: #555555, $endColor: #333333)
background-color: $endColor
background-repeat: repeat-x
background-image: -khtml-gradient(linear, left top, left bottom, from($startColor), to($endColor))
// Konqueror
background-image: -moz-linear-gradient(top, $startColor, $endColor)
// FF 3.6+
background-image: -ms-linear-gradient(top, $startColor, $endColor)
// IE10
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $startColor), color-stop(100%, $endColor))
// Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(top, $startColor, $endColor)
// Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(top, $startColor, $endColor)
// Opera 11.10
background-image: linear-gradient(top, $startColor, $endColor)
// The standard
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=0)
// IE9 and down
=directional-gradient($startColor: #555555, $endColor: #333333, $deg: 45deg)
background-color: $endColor
background-repeat: repeat-x
background-image: -moz-linear-gradient($deg, $startColor, $endColor)
// FF 3.6+
background-image: -ms-linear-gradient($deg, $startColor, $endColor)
// IE10
background-image: -webkit-linear-gradient($deg, $startColor, $endColor)
// Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient($deg, $startColor, $endColor)
// Opera 11.10
background-image: linear-gradient($deg, $startColor, $endColor)
// The standard
=vertical-three-colors-gradient($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f)
background-color: $endColor
background-repeat: no-repeat
background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), color-stop($colorStop, $midColor), to($endColor))
background-image: -webkit-linear-gradient($startColor, $midColor $colorStop, $endColor)
background-image: -moz-linear-gradient($startColor, $midColor $colorStop, $endColor)
background-image: -ms-linear-gradient($startColor, $midColor $colorStop, $endColor)
background-image: -o-linear-gradient($startColor, $midColor $colorStop, $endColor)
background-image: linear-gradient($startColor, $midColor $colorStop, $endColor)
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=0)
// IE9 and down, gets no color-stop at all the proper fallback
// Gradient Bar Colors for buttons and allerts
=gradientBar($primaryColor, $secondaryColor)
+vertical-gradient($primaryColor, $secondaryColor)
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25)
border-color: $secondaryColor $secondaryColor darken($secondaryColor, 15%)
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) opacify(rgba(0, 0, 0, 0.1), 0.15)
// Reset filters for IE
=reset-filter
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false)
// Opacity
=opacity($opacity: 100)
filter: alpha(opacity = $opacity)
-khtml-opacity: $opacity / 100
-moz-opacity: $opacity / 100
opacity: $opacity / 100