mirror of
https://github.com/clearleft/clearless.git
synced 2026-01-08 21:28:05 -05:00
91 lines
2.8 KiB
Plaintext
91 lines
2.8 KiB
Plaintext
// ==============================================
|
|
// Generated content icon helpers
|
|
// ----------------------------------------------
|
|
// These can only be used on block or inline-block elements.
|
|
// ==============================================
|
|
|
|
.icon(@x, @y, @width, @height, @pad:10, @nudge-left:0, @nudge-top:0, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) when (@using-modernizr) {
|
|
.generatedcontent & {
|
|
position: relative;
|
|
padding-left: (@width + @pad) * 1px;
|
|
}
|
|
.generatedcontent &:before {
|
|
._generated-icon( @x, @y, @width, @height, @sprite-image, @sprite-grid );
|
|
top: @nudge-top;
|
|
left: @nudge-left;
|
|
}
|
|
}
|
|
|
|
.icon(@x, @y, @width, @height, @pad:10, @nudge-left:0, @nudge-top:0, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) when (@using-modernizr = false) {
|
|
position: relative;
|
|
padding-left: (@width + @pad) * 1px;
|
|
&:before {
|
|
._generated-icon( @x, @y, @width, @height, @sprite-image, @sprite-grid );
|
|
top: @nudge-top;
|
|
left: @nudge-left;
|
|
}
|
|
}
|
|
|
|
.right-icon(@x, @y, @width, @height, @pad:10, @nudge-right:0, @nudge-top:0, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) when (@using-modernizr) {
|
|
.generatedcontent & {
|
|
padding-right: (@width + @pad) * 1px;
|
|
position: relative;
|
|
}
|
|
.generatedcontent &:before {
|
|
._generated-icon( @x, @y, @width, @height, @sprite-image, @sprite-grid );
|
|
top: @nudge-top;
|
|
right: @nudge-right;
|
|
}
|
|
}
|
|
|
|
.right-icon(@x, @y, @width, @height, @pad:10, @nudge-right:0, @nudge-top:0, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) when (@using-modernizr = false) {
|
|
position: relative;
|
|
padding-right: (@width + @pad) * 1px;
|
|
&:before {
|
|
._generated-icon( @x, @y, @width, @height, @sprite-image, @sprite-grid );
|
|
top: @nudge-top;
|
|
right: @nudge-right;
|
|
}
|
|
}
|
|
|
|
.icon-pos(@x, @y, @nudge-left:0, @nudge-top:0, @sprite-grid:@sprite-grid) when (@using-modernizr) {
|
|
.generatedcontent &:before {
|
|
.sprite-pos(@x, @y, @sprite-grid);
|
|
.nudge-l(@nudge-left);
|
|
.nudge-t(@nudge-top);
|
|
}
|
|
}
|
|
|
|
.icon-pos(@x, @y, @nudge-left:0, @nudge-top:0, @sprite-grid:@sprite-grid) {
|
|
&:before {
|
|
.sprite-pos(@x, @y, @sprite-grid);
|
|
.nudge-l(@nudge-left);
|
|
.nudge-t(@nudge-top);
|
|
}
|
|
}
|
|
|
|
.right-icon-pos(@x, @y, @nudge-right:0, @nudge-top:0, @sprite-grid:@sprite-grid) when (@using-modernizr) {
|
|
.generatedcontent &:before {
|
|
.sprite-pos(@x, @y, @sprite-grid);
|
|
.nudge-r(@nudge-right);
|
|
.nudge-t(@nudge-top);
|
|
}
|
|
}
|
|
|
|
.right-icon-pos(@x, @y, @nudge-right:0, @nudge-top:0, @sprite-grid:@sprite-grid) {
|
|
&:before {
|
|
.sprite-pos(@x, @y, @sprite-grid);
|
|
.nudge-r(@nudge-right);
|
|
.nudge-t(@nudge-top);
|
|
}
|
|
}
|
|
|
|
// ---- internal use mixins -----------------------
|
|
|
|
._generated-icon(@x, @y, @width, @height, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) {
|
|
position: absolute;
|
|
display: block;
|
|
content: ' ';
|
|
.sprite-sized(@x, @y, @width, @height, @sprite-image, @sprite-grid);
|
|
}
|