sass-site/source/assets/stylesheets/structure/_mixins.css.scss
Bermon Painter a07743bbb4 Cleaned up assets.
* Moved CSS, JS, Images into an assets folder
* Adjusted the file structure a bit for CSS, JS, Images.
* Added a fonts folder
* Cleaned up the config a bit so it's easier to read through
* Added some KSS placeholders to tinker with a bit
* Added zepto.js so we can be a bit more friendly on mobile devices/modern browsers
* Added some basic responsive breakpoints
* Added a scaffold.css and theme.css so we can separate out layout pieces from the theme. This will let us retheme the site easier, or have multiple themes if we're feeling frisky
* Removed some HTML5 boilerplate pieces that we don't need
* Added some basic structural css partials
2012-10-30 00:19:53 -04:00

78 lines
1.7 KiB
SCSS

// --------------------------------------------------
// Mixins
// --------------------------------------------------
// --------------------------------------------------
// CLEARFIX
// --------------------------------------------------
// For clearing floats like a boss h5bp.com/q
@mixin clearfix {
*zoom: 1;
&:before,
&:after {
display: table;
content: "";
}
&:after {
clear: both;
}
}
// --------------------------------------------------
// tab focus
// mimics webkit
// --------------------------------------------------
@mixin tab-focus() {
// Default
outline: thin dotted #333;
// Webkit
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
// --------------------------------------------------
// center align
// --------------------------------------------------
@mixin center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// --------------------------------------------------
// inline block - IE7
// --------------------------------------------------
@mixin ie7-inline-block() {
*display: inline; // IE7 inline-block hack
*zoom: 1;
}
// --------------------------------------------------
// whitespace fix for inline block elements - IE7
// --------------------------------------------------
@mixin ie7-restore-left-whitespace() {
*margin-left: .3em;
&:first-child {
*margin-left: 0;
}
}
@mixin ie7-restore-right-whitespace() {
*margin-right: .3em;
&:last-child {
*margin-left: 0;
}
}
// --------------------------------------------------
// image replacement
// --------------------------------------------------
@mixin hide-text {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}