/*
# Settings (_settings)
*/
/*
## Variables
### General
$phi: 1.618033988749 - Golden ratio
*/
/*
### Colours
$colour-base - #333 $colour-base - #333
$colour-highlight - #339 $colour-highlight - #339
$colour-link - #339 $colour-link - #339
*/
/*
### Fonts
$font-size - 13
$line-height - 1.4
$font-base - sans-serif
$font-header - sans-serif
*/
/*
### Layout
$width - 960
$columns - 24
$gutter - 12
*/
/*
## Functions
### em($size: $font-size, $context: $fs)
Will convert a pixel based size to an em value.
First value is the target size, the second value is the font-size of the context it is in.
Examples:
`em(26)` // 2em if base font-size is 13px
`em(18, 12)` // 1.5em
*/
/*
### lh($size: $font-size, $context: $fs)
Will provide the same function as 'em' above buth without appending 'em' to the result.
This makes it more suitable to use as a line-height value.
Examples:
`lh(26)` // 2 if base font-size is 13px
`lh(18, 12)` // 1.5
*/
/*
### fluid($columns: 1, $total-columns: $columns)
Will provide the % result of the first value divided by the second.
Suitable for working out columns and general % values.
Examples:
`fluid(2, 6)` // 12.5%
`fluid(10px, 960px)` // 1.041666666666667%
*/
/*
## Mixins
Mixins must to be called using @include (scss) or + (sass)
### vendor($property, $value)
Add vendor prefixes to a property and provide the value for the property
`@include vendor(box-shadow, 0 0 10px 0 #000);`
Outputs:
`-webkit-box-shadow: 0 0 10px 0 #000`
`-moz-box-shadow: 0 0 10px 0 #000`
`-ms-box-shadow: 0 0 10px 0 #000`
`-o-box-shadow: 0 0 10px 0 #000`
`box-shadow: 0 0 10px 0 #000`
*/
/*
### list-reset
Resets current list only
ul {
@include list-reset;
}
Outputs:
ul {
margin: 0;
padding: 0;
}
ul > li {
list-style: none;
list-style-image: none;
}
*/
/*
### list-reset-full
Reset current and all child lists
ul {
@include list-reset-full;
}
Outputs:
ul, ul ul, ul ol {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
list-style-image: none;
}
*/
/*
### clearfix
Clear an elements floated children
div {
@include clearfix;
}
Outputs:
div {
*zoom: 1;
}
div:before, div:after {
content: "";
display: table;
}
div:after {
clear: both;
}
*/
/*
### keyframes($name)
Set animation keyframes over multiple browser extensions
.box {
@include keyframes(my-animation) {
0% { opacity: 0; }
100% { opacity: 1; }
}
}
Outputs:
.box {
@-webkit-keyframes my-animation {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-moz-keyframes my-animation {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-ms-keyframes my-animation {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-o-keyframes my-animation {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes my-animation {
0% { opacity: 0; }
100% { opacity: 1; }
}
}
*/
/*
### hidden-full
Completely hide an element
div {
@include hidden-full;
}
Outputs:
div {
display: none !important;
visibility: hidden;
}
*/
/*
### max($maxwidth: $width)
A simple max-width media query
div {
@include max(768px) {
display: none;
}
}
Outputs:
@media (max-width: 768px) {
div {
display: none;
}
}
*/
/*
### min($minwidth: $width)
A simple min-width media query
div {
@include min(768px) {
display: block;
}
}
Outputs:
@media (min-width: 768px) {
div {
display: block;
}
}
*/
/*
### minmax($minwidth: $width, $maxwidth: $width)
A min-max-width media query.
USeful for getting around respond.js issues in IE8
div {
@include minmax(768px) {
display: block;
}
}
Outputs:
@media (min-width: 768px) {
div {
display: block;
}
}
*/
/*
### pixel-ratio($pixelratio: 2, $basedpi: 96)
A simple pixel-ratio media query
$basedpi is used for fine control over the dpi query value
div {
@include pixel-ratio {
background-image: url(image@2x.png);
}
}
Outputs:
@media
(-webkit-min-device-pixel-ratio: 2),
( min--moz-device-pixel-ratio: 2),
( -o-min-device-pixel-ratio: 2/1),
( min-device-pixel-ratio: 2),
( min-resolution: 192dpi),
( min-resolution: 2dppx) {
div {
background-image: url(image@2x.png);
}
}
*/
/*
### generate($width: 10px, $height: 10px, $position: static)
Create generic styling for :before/:after
$height / $width / $position all control their namesake CSS properties
div:after {
@include generate;
}
Outputs:
div:after {
content: "";
overflow: hidden;
text-indent: -9999em;
display: block;
width: 10px;
height: 10px;
position: static;
}
*/
/*
### opacity($o: 0.5)
Handle standard & IE opacity
div {
@include opacity(.75);
}
Outputs:
div {
opacity: .75;
filter: alpha(opacity=75);
}
*/
/*
### border-radius($val: 10px)
Friendly interface to vendor(border-radius)
*/
/*
### box-shadow($val: 0 0 10px #000)
Friendly interface to vendor(box-shadow)
*/
/*
### box-shadows($shadow1, $shadow2, $shadow3, $shadow4, $shadow5, $shadow6)
Allow multiple box-shadows (up to 6) via a mixin
*/
/*
### gradient($direction:vertical, $start-color: #fff, $start-position: 0%, $end-color: #000, $end-position: 100%)
Create horizontal / vertical gradients
Note : Does not include IE9 data uri support
div {
@include gradient($start-color: #F00, $end-color: #0F0);
}
Outputs:
div {
background-image: -moz-linear-gradient(top, #F00 0%, #0F0 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #F00), color-stop(100%, #0F0));
background-image: -webkit-linear-gradient(top, #F00 0%, #0F0 100%);
background-image: -o-linear-gradient(top, #F00 0%, #0F0 100%);
background-image: -ms-linear-gradient(top, #F00 0%, #0F0 100%);
background-image: linear-gradient(to bottom, #F00 0%, #0F0 100%);
background-repeat: repeat-y;
}
*/
/*
### transform($arguments)
Friendly interface to vendor(transform) w/backface-visibility: hidden
*/
/*
### transition($arguments)
Friendly interface to vendor(transition)
*/
/*
### perspective($val: 0)
Friendly interface to vendor(perspective)
*/
/*
### perspective-origin($val: 50% 50%)
Friendly interface to vendor(perspective-origin)
*/
/*
### transform-origin($val: 50% 50%)
Friendly interface to vendor(transform-origin)
*/
/*
### transform-style($val: preserve-3d)
Friendly interface to vendor(transform-style)
*/
/*
### Placeholders
*/
/*
### boxes($cols: 3, $gutter: 10px, $selector: ".col")
Set the container and its children (as selected by the selector argument) to be a set of columns.
*/
/*
## Extend
Use these placeholder styles with @extend.
### %debug
Used to highlight items via background-color.
Can be useful for debugging.
*/
/*
### %ellipsis
If the element has overflowing text the text will be truncated and an ellipsis appended to the end.
*/
/*
### %ir
Use when setting an element such as an input button to use a background-image.
Not recommended to use this method unless necessary.
Try and use appropriate elements where possible (`