// ## Sticky Footer // // This must be a top-level mixin. // // Usage: // // <body> // <div id=“root”> // Your content here. // <div id=“rootfooter”></div> // </div> // <div id=“footer”> // This is the footer. // </div> // </body> // // And then in the SCSS: // // @include sticky-footer(100px, “#root”, “#rootfooter”, “#footer”); @mixin sticky-footer($height,$root,$rootfooter,$footer) {
html,body { height: 100%; } #{$root} { @include minheight(100%); clear: both; margin-bottom: -#{$height}; #{$rootfooter} { clear: both; height: #{$height}; } } #{$footer} { clear: both; position: relative; height: #{$height}; }
}
// Change the color of the text selection. // // If you want to be cool you should use hot pink here. @mixin selectioncolor($color) {
::-moz-selection { background: $color; color: #fff; text-shadow: none; } ::selection { background: $color; color: #fff; text-shadow: none; } a:link { -webkit-tap-highlight-color: $color; }
}
// Perform an image replacement technique by hiding the text in favor of // the background image url. @mixin imagereplacement {
display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr;
}
// Apply this mixin to hide something, even from screen readers. @mixin hidden {
display: none; visibility: hidden;
}
// Apply pre-style wrapping. @mixin prewrapping {
white-space: pre; white-space: pre-wrap; white-space: pre-line; word-wrap: break-word;
}