brouilleursdeblanc/_sass/_mixins.scss
Michael Rose 56494a09af Cleanup stylesheets
- Add Bourbon and Neat
2014-09-04 14:49:14 -04:00

225 lines
No EOL
5.7 KiB
SCSS

// UTILITY MIXINS
// --------------------------------------------------
// Webkit-style focus
// --------------------
@mixin tab-focus() {
// Default
outline: thin dotted #333;
// Webkit
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
// Center-align a block level element
// ----------------------------------
@mixin center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// TYPOGRAPHY
// --------------------------------------------------
// Full-fat vertical rhythm
// ------------------------
@mixin font-size($size) {
font-size: 0px + $size;
font-size: 0rem + $size / $doc-font-size;
line-height: 0 + round($doc-line-height / $size*10000) / 10000;
margin-bottom: 0px + $doc-line-height;
margin-bottom: 0rem + ($doc-line-height / $doc-font-size);
}
// Just the REMs
// -------------
@mixin font-rem($size) {
font-size: 0px + $size;
font-size: 0rem + $size / $doc-font-size;
}
// Just font-size and line-height
// ------------------------------
@mixin font($size) {
font-size: 0px + $size;
font-size: 0rem + $size / $doc-font-size;
line-height: 0 + round($doc-line-height / $size*10000) / 10000;
}
@mixin text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; }
// MIXINS
// --------------------------------------------------
%tab-focus {
// Default
outline: thin dotted #333;
// Webkit
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
// Typography
// --------------------------------------------------
/* Vertical Rhythm
https://github.com/sturobson/Sassifaction
In this mixin you can specify the font size in PX and
it will calculate the REM based on your $doc-font-size
& $doc-line-height variables.
@include font-size(24);
It will also create a bottom margin based on the
$doc-font-size & $doc-line-height variables unless you
specify that it shouldn't have one.
@include font-size(24, no);
Or if you want to specify a different bottom margin to
be generated.
@include font-size(24,32);
This mixin also generates a pixel-less line height by
default unless you specify that you either don't want
one where I'd suggest declaring 1 within the mixin.
@include font-size(24, yes, 1);
There's also the option to specify a different line-height
for it to generate to, where you would specify the
line-height in (effectively) it's pixel value.
@include font-size(24, yes, 40);
*/
@mixin font-size($size, $margin: yes, $line-height: $doc-line-height) {
// generates the font-size in REMs with a PX fallback
font-size: 0px + $size;
font-size: 0rem + $size / $doc-font-size;
// line-height functions
////////////////////////
// if you a line-height is specified in the mixin
@if $line-height != $doc-line-height and $line-height != 1 {
line-height: ceil($size / $line-height) * ($line-height / $size);
}
// if $line-height == 1
// because, typing 1 is quicker than 16
@else if $line-height == 1 {
line-height: 1;
}
// normal $line-height
// if the line-height is left.
@else {
line-height: ceil($size / $doc-line-height) * ($doc-line-height / $size);
}
// margin-bottom functions
//////////////////////////
// if no is bottom margin is required
@if $margin == no {
margin-bottom: 0;
}
// if a specific bottom margin is required
@else if $margin != yes and $margin != no {
margin-bottom: 0px + $margin;
margin-bottom: 0rem + ($margin / $doc-font-size);
}
// if you're keeping the vertical rhythm with the margin
@else {
margin-bottom: 0px + $doc-line-height;
margin-bottom: 0rem + ($doc-line-height / $doc-font-size);
}
}
// ROUND CORNERS
// --------------------------------------------------
// @include rounded(VALUE);
@mixin rounded($radius:4px) {
border-radius : $radius; }
// @include border-radius(VALUE,VALUE,VALUE,VALUE);
@mixin border-radius($topright: 0, $bottomright: 0, $bottomleft: 0, $topleft: 0) {
border-top-right-radius : $topright;
border-bottom-right-radius : $bottomright;
border-bottom-left-radius : $bottomleft;
border-top-left-radius : $topleft;
background-clip : padding-box; }
// @include box-shadow(HORIZONTAL VERTICAL BLUR COLOR))
@mixin box-shadow($shadow: 0 1px 3px rgba(0,0,0,.25)) {
-webkit-box-shadow : $shadow;
-moz-box-shadow : $shadow;
box-shadow : $shadow; }
// @include drop-shadow(HORIZONTAL, VERTICAL, BLUR, ALPHA);
@mixin drop-shadow($x-axis: 0, $y-axis: 1px, $blur: 2px, $alpha: 0.1) {
-webkit-box-shadow : $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
-moz-box-shadow : $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
box-shadow : $x-axis $y-axis $blur rgba(0, 0, 0, $alpha); }
// @include text-shadow();
@mixin text-shadow($shadow: 0 2px 3px rgba(0,0,0,.25)) {
text-shadow : $shadow; }
// @include opacity(VALUE);
@mixin opacity($opacity : .5) {
opacity : $opacity; }
// For image replacement
@mixin hide-text() {
text-indent : 100%;
white-space : nowrap;
overflow : hidden; }
// Hide from visual and speaking browsers
@mixin hidden() {
display : none !important;
visibility : hidden; }
.hidden {
display: none;
visibility: hidden;
}
// Hide but maintain layout
@mixin invisible() {
visibility : hidden; }
// @include resize(VALUE) (none, both, horizontal, vertical, inherit)
@mixin resize($direction: both) {
resize : $direction;
overflow : auto; }
// @include userselect(VALUE) (all, element, none, text)
@mixin user-select($select) {
-webkit-user-select : $select;
-moz-user-select : $select;
-o-user-select : $select;
user-select : $select; }
// Hidden but available to speaking browsers
@mixin visuallyhidden() {
overflow : hidden;
position : absolute;
clip : rect(0 0 0 0);
height : 1px;
width : 1px;
margin : -1px;
padding : 0;
border : 0; }