56 lines
2.2 KiB
SCSS
56 lines
2.2 KiB
SCSS
|
/*
|
||
|
|
* Image sprite for elements module
|
||
|
|
*/
|
||
|
|
|
||
|
|
@import "compass/utilities/sprites/base";
|
||
|
|
|
||
|
|
// General Sprite Defaults
|
||
|
|
// You can override them before you import this file.
|
||
|
|
$elements-sprite-base-class: ".elements-sprite" !default;
|
||
|
|
$elements-sprite-dimensions: false !default;
|
||
|
|
$elements-sprites: sprite-map(
|
||
|
|
"sprites/elements/*.png",
|
||
|
|
$position: 0%,
|
||
|
|
$spacing: 0,
|
||
|
|
$repeat: no-repeat,
|
||
|
|
$readonly-spacing: 0,
|
||
|
|
$elements-question-spacing: 10px,
|
||
|
|
$elements-image_color-spacing: 5px,
|
||
|
|
$elements-image_fill-spacing: 15px,
|
||
|
|
$elements-custom_text_combo_icons-spacing: 10px
|
||
|
|
);
|
||
|
|
|
||
|
|
// All sprites should extend this class
|
||
|
|
// The elements-sprite mixin will do so for you.
|
||
|
|
#{$elements-sprite-base-class} {
|
||
|
|
background: $elements-sprites no-repeat;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Use this to set the dimensions of an element
|
||
|
|
// based on the size of the original image.
|
||
|
|
@mixin elements-sprite-dimensions($name) {
|
||
|
|
@include sprite-dimensions($elements-sprites, $name);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Move the background position to display the sprite.
|
||
|
|
@mixin elements-sprite-position($name, $offset-x: 0, $offset-y: 0) {
|
||
|
|
@include sprite-position($elements-sprites, $name, $offset-x, $offset-y);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Extends the sprite base class and set the background position for the desired sprite.
|
||
|
|
// It will also apply the image dimensions if $dimensions is true.
|
||
|
|
@mixin elements-sprite($name, $dimensions: $elements-sprite-dimensions, $offset-x: 0, $offset-y: 0) {
|
||
|
|
@extend #{$elements-sprite-base-class};
|
||
|
|
|
||
|
|
@include sprite($elements-sprites, $name, $dimensions, $offset-x, $offset-y);
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin elements-sprites($sprite-names, $dimensions: $elements-sprite-dimensions, $prefix: sprite-map-name($elements-sprites)) {
|
||
|
|
@include sprites($elements-sprites, $sprite-names, $elements-sprite-base-class, $dimensions, $prefix);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Generates a class for each sprited image.
|
||
|
|
@mixin all-elements-sprites($dimensions: $elements-sprite-dimensions, $prefix: sprite-map-name($elements-sprites)) {
|
||
|
|
@include elements-sprites(favorite important photos readonly symbolic-link system unreadable, $dimensions, $prefix);
|
||
|
|
}
|