mirror of
https://github.com/clearleft/clearless.git
synced 2026-01-07 21:03:51 -05:00
Add icon documentation, have a bit of a re-org
This commit is contained in:
Mark Perkins
249
README.md
249
README.md
@@ -555,7 +555,7 @@ The sprite mixins give you an easy way to use sprited background images. It assu
|
||||
### SETTING: @sprite-image
|
||||
|
||||
```css
|
||||
@sprite-image: url('/images/example-sprite.png');
|
||||
@sprite-image: '/images/example-sprite.png';
|
||||
```
|
||||
|
||||
The default image to use for the sprite mixins. Can be a Base64 encoded data-uri.
|
||||
@@ -625,6 +625,9 @@ The same as the `.sprite()` mixin above, but allows you to specify the height an
|
||||
.example {
|
||||
.sprite-sized( 2, 3, 16px, 32px );
|
||||
}
|
||||
.example2 {
|
||||
.sprite-sized( 2, 3, 16px );
|
||||
}
|
||||
/* Example output: */
|
||||
.example {
|
||||
background-image: url('/images/example-sprite.png');
|
||||
@@ -633,6 +636,13 @@ The same as the `.sprite()` mixin above, but allows you to specify the height an
|
||||
width: 16px;
|
||||
height: 32px;
|
||||
}
|
||||
.example2 {
|
||||
background-image: url('/images/example-sprite.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: -100px -150px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
```
|
||||
|
||||
### .sprite-ir()
|
||||
@@ -665,6 +675,9 @@ Augments the `.sprite-sized()` mixin to include image replacement properties as
|
||||
.example {
|
||||
.sprite-ir( 2, 3, 16px, 32px );
|
||||
}
|
||||
.example2 {
|
||||
.sprite-ir( 2, 3, 16px );
|
||||
}
|
||||
/* Example output: */
|
||||
.example {
|
||||
background-image: url('/images/example-sprite.png');
|
||||
@@ -678,6 +691,18 @@ Augments the `.sprite-sized()` mixin to include image replacement properties as
|
||||
color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
.example2 {
|
||||
background-image: url('/images/example-sprite.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: -100px -150px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 0;
|
||||
font: 0/0 a;
|
||||
text-shadow: none;
|
||||
color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
```
|
||||
|
||||
### .sprite-image()
|
||||
@@ -748,7 +773,10 @@ Similar to the `.sprite-pos()` [partial mixin](#optimising-output-using-partial-
|
||||
```css
|
||||
/* Usage: */
|
||||
.example {
|
||||
.sprite-pos-sized(2,3, 16px, 32px);
|
||||
.sprite-pos-sized( 2, 3, 16px, 32px );
|
||||
}
|
||||
.example2 {
|
||||
.sprite-pos-sized( 2, 3, 16px );
|
||||
}
|
||||
/* Example output: */
|
||||
.example {
|
||||
@@ -756,12 +784,227 @@ Similar to the `.sprite-pos()` [partial mixin](#optimising-output-using-partial-
|
||||
width: 16px;
|
||||
height: 32px;
|
||||
}
|
||||
.example2 {
|
||||
background-position: -100px -150px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
```
|
||||
|
||||
Icons
|
||||
-------
|
||||
|
||||
Documentation coming soon.
|
||||
The icons mixins let you easily place an icon before or after an element, using absolutely positioned :before and :after pseudo elements to display them. There are also sprited icon mixins build on the sprite mixins above.
|
||||
|
||||
### .prepend-icon()
|
||||
|
||||
Prepends an icon to the element it's called on.
|
||||
|
||||
```css
|
||||
.prepend-icon( <@icon-image>, <@width>, <@height>[, <@nudge-left>[, <@nudge-top>[, <@pad>]]] );
|
||||
```
|
||||
|
||||
* `@icon-image`: URL or data URI of an image to use for the prepended icon
|
||||
* `@width`: Width of the image
|
||||
* `@height`: Height of the image
|
||||
* `@nudge-left`: The value of the `left` property for the icon. Defaults to `0`.
|
||||
* `@nudge-top`: The value of the `top` property for the icon. Defaults to `0`.
|
||||
* `@pad`: Left-padding (in addition to the width of the icon) to apply to the element. Defaults to `10px`
|
||||
|
||||
```css
|
||||
/* Usage: */
|
||||
.example {
|
||||
.prepend-icon( 'img/icon.png', 16px, 32px );
|
||||
}
|
||||
/* Example output: */
|
||||
.example {
|
||||
position: relative;
|
||||
padding-left: 42px;
|
||||
}
|
||||
.example:before {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: ' ';
|
||||
background: url('img/icon.png') no-repeat 0 0;
|
||||
width: 16px;
|
||||
height: 32px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
```
|
||||
|
||||
### .append-icon()
|
||||
|
||||
Appends an icon after the element it's called on.
|
||||
|
||||
```css
|
||||
.append-icon( <@icon-image>, <@width>, <@height>[, <@nudge-right>[, <@nudge-top>[, <@pad>]]] );
|
||||
```
|
||||
|
||||
* `@icon-image`: URL or data URI of an image to use for the prepended icon
|
||||
* `@width`: Width of the image
|
||||
* `@height`: Height of the image
|
||||
* `@nudge-right`: The value of the `right` property for the icon. Defaults to `0`.
|
||||
* `@nudge-top`: The value of the `top` property for the icon. Defaults to `0`.
|
||||
* `@pad`: Left-padding (in addition to the width of the icon) to apply to the element. Defaults to `10px`
|
||||
|
||||
```css
|
||||
/* Usage: */
|
||||
.example {
|
||||
.append-icon( 'img/icon.png', 16px, 32px );
|
||||
}
|
||||
/* Example output: */
|
||||
.example {
|
||||
position: relative;
|
||||
padding-right: 42px;
|
||||
}
|
||||
.example:after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: ' ';
|
||||
background: url('img/icon.png') no-repeat 0 0;
|
||||
width: 16px;
|
||||
height: 32px;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
```
|
||||
|
||||
### .prepend-sprite-icon()
|
||||
|
||||
Prepends an icon taken from the sprite to the element it's called on.
|
||||
|
||||
```css
|
||||
.prepend-sprite-icon( <@x>, <@y>, <@width>, <@height>[, <@nudge-left>[, <@nudge-top>[, <@pad>[, <@sprite-image>[, <@sprite-grid>]]]]] );
|
||||
```
|
||||
|
||||
* `@x`: The x coordinate of the desired image on the grid.
|
||||
* `@y`: The y coordinate of the desired image on the grid.
|
||||
* `@width`: Width of the image
|
||||
* `@height`: Height of the image
|
||||
* `@nudge-left`: The value of the `left` property for the icon. Defaults to `0`.
|
||||
* `@nudge-top`: The value of the `top` property for the icon. Defaults to `0`.
|
||||
* `@pad`: Left-padding (in addition to the width of the icon) to apply to the element. Defaults to `10px`
|
||||
* `@sprite-image`: The sprite image to use. Defaults to the globally defined `@sprite-image` value.
|
||||
* `@sprite-grid`: The grid size used in the sprite. Defaults to the globally defined `@sprite-grid` value.
|
||||
|
||||
```css
|
||||
/* Usage: */
|
||||
.example {
|
||||
.prepend-sprite-icon( 1, 2, 16px, 32px );
|
||||
}
|
||||
/* Example output: */
|
||||
.example {
|
||||
position: relative;
|
||||
padding-left: 42px;
|
||||
}
|
||||
.example:before {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: ' ';
|
||||
background-image: url('/images/example-sprite.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: -50px -100px;
|
||||
width: 16px;
|
||||
height: 32px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
```
|
||||
|
||||
### .append-sprite-icon()
|
||||
|
||||
Appends an icon taken from the sprite after the element it's called on.
|
||||
|
||||
```css
|
||||
.append-sprite-icon( <@x>, <@y>, <@width>, <@height>[, <@nudge-right>[, <@nudge-top>[, <@pad>[, <@sprite-image>[, <@sprite-grid>]]]]] );
|
||||
```
|
||||
|
||||
* `@x`: The x coordinate of the desired image on the grid.
|
||||
* `@y`: The y coordinate of the desired image on the grid.
|
||||
* `@width`: Width of the image
|
||||
* `@height`: Height of the image
|
||||
* `@nudge-right`: The value of the `right` property for the icon. Defaults to `0`.
|
||||
* `@nudge-top`: The value of the `top` property for the icon. Defaults to `0`.
|
||||
* `@pad`: Left-padding (in addition to the width of the icon) to apply to the element. Defaults to `10px`
|
||||
* `@sprite-image`: The sprite image to use. Defaults to the globally defined `@sprite-image` value.
|
||||
* `@sprite-grid`: The grid size used in the sprite. Defaults to the globally defined `@sprite-grid` value.
|
||||
|
||||
```css
|
||||
/* Usage: */
|
||||
.example {
|
||||
.append-sprite-icon( 1, 2, 16px, 32px );
|
||||
}
|
||||
/* Example output: */
|
||||
.example {
|
||||
position: relative;
|
||||
padding-right: 42px;
|
||||
}
|
||||
.example:after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: ' ';
|
||||
background-image: url('/images/example-sprite.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: -50px -100px;
|
||||
width: 16px;
|
||||
height: 32px;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
```
|
||||
|
||||
### .prepend-sprite-icon-pos()
|
||||
|
||||
Adjusts the positioning of a prepended sprite icon.
|
||||
|
||||
```css
|
||||
.prepend-sprite-icon-pos( <@x>, <@y>[, <@nudge-left>[, <@nudge-top>[, <@sprite-grid>]]] );
|
||||
```
|
||||
|
||||
* `@x`: The x coordinate of the desired image on the grid.
|
||||
* `@y`: The y coordinate of the desired image on the grid.
|
||||
* `@nudge-left`: The value of the `left` property for the icon. Defaults to `0`.
|
||||
* `@nudge-top`: The value of the `top` property for the icon. Defaults to `0`.
|
||||
* `@sprite-grid`: The grid size used in the sprite. Defaults to the globally defined `@sprite-grid` value.
|
||||
|
||||
```css
|
||||
/* Usage: */
|
||||
.example {
|
||||
.prepend-sprite-icon-pos( 1, 2 );
|
||||
}
|
||||
/* Example output: */
|
||||
.example:before {
|
||||
background-position: -50px -100px;
|
||||
}
|
||||
```
|
||||
|
||||
### .append-sprite-icon-pos()
|
||||
|
||||
Adjusts the positioning of a appended sprite icon.
|
||||
|
||||
```css
|
||||
.append-sprite-icon-pos( <@x>, <@y>[, <@nudge-right>[, <@nudge-top>[, <@sprite-grid>]]] );
|
||||
```
|
||||
|
||||
* `@x`: The x coordinate of the desired image on the grid.
|
||||
* `@y`: The y coordinate of the desired image on the grid.
|
||||
* `@nudge-right`: The value of the `left` property for the icon. Defaults to `0`.
|
||||
* `@nudge-top`: The value of the `top` property for the icon. Defaults to `0`.
|
||||
* `@sprite-grid`: The grid size used in the sprite. Defaults to the globally defined `@sprite-grid` value.
|
||||
|
||||
```css
|
||||
/* Usage: */
|
||||
.example {
|
||||
.append-sprite-icon-pos( 1, 2 );
|
||||
}
|
||||
/* Example output: */
|
||||
.example:after {
|
||||
background-position: -50px -100px;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
Grids
|
||||
|
||||
@@ -276,7 +276,7 @@ h2 {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: ' ';
|
||||
background-image: url('../examples/sprite.png');
|
||||
background-image: url('../img/sprite.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: -100px -50px;
|
||||
width: 6px;
|
||||
@@ -454,11 +454,11 @@ h2 {
|
||||
display: inline;
|
||||
zoom: 1;
|
||||
}
|
||||
.more:before {
|
||||
.more:after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: ' ';
|
||||
background-image: url('../examples/sprite.png');
|
||||
background-image: url('../img/sprite.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: -100px -50px;
|
||||
width: 6px;
|
||||
@@ -481,7 +481,7 @@ h2 {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: ' ';
|
||||
background-image: url('../examples/sprite.png');
|
||||
background-image: url('../img/sprite.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0px 0px;
|
||||
width: 28px;
|
||||
@@ -513,4 +513,18 @@ h2 {
|
||||
.icon-nav .ghosts a:hover:before {
|
||||
background-position: -50px -150px;
|
||||
}
|
||||
.icon.twitter {
|
||||
position: relative;
|
||||
padding-left: 42px;
|
||||
}
|
||||
.icon.twitter:before {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: ' ';
|
||||
background: url('../img/twitter-32x32.png') no-repeat 0 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
top: -8px;
|
||||
left: 0;
|
||||
}
|
||||
/* Other Helpers */
|
||||
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="shortcut icon" href="http://clearleft.com/favicon.ico" type="image/x-icon" />
|
||||
|
||||
<link rel="stylesheet" href="../_compiled/example.css" type="text/css">
|
||||
<link rel="stylesheet" href="css/example.css" type="text/css">
|
||||
|
||||
<title>ClearLESS Examples</title>
|
||||
</head>
|
||||
|
||||
|
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 3.6 KiB |
BIN
examples/img/twitter-32x32.png
Normal file
BIN
examples/img/twitter-32x32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="shortcut icon" href="http://clearleft.com/favicon.ico" type="image/x-icon" />
|
||||
|
||||
<link rel="stylesheet" href="../_compiled/example.css" type="text/css">
|
||||
<link rel="stylesheet" href="css/example.css" type="text/css">
|
||||
|
||||
<title>ClearLESS Examples</title>
|
||||
</head>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -1,8 +1,8 @@
|
||||
@import "../mixins/all";
|
||||
@import "../../mixins/all";
|
||||
|
||||
// Default settings override
|
||||
|
||||
@sprite-image: url('../examples/sprite.png');
|
||||
@sprite-image: '../img/sprite.png';
|
||||
@using-modernizr: false;
|
||||
@using-ieclasses: true;
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
// Project settings
|
||||
|
||||
@mobile-width: 40em;
|
||||
|
||||
|
||||
/* ---- reset ---- */
|
||||
|
||||
.normalize();
|
||||
@@ -56,7 +56,7 @@ h2 {
|
||||
}
|
||||
a {
|
||||
.inline-block();
|
||||
.icon(2, 1, 6px, 11px, 10px, 0, 4px);
|
||||
.prepend-sprite-icon(2, 1, 6px, 11px, 0, 4px);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -240,7 +240,7 @@ h2 {
|
||||
|
||||
.more {
|
||||
.inline-block();
|
||||
.right-icon(2, 1, 6px, 11px, 10px, 0, 4px);
|
||||
.append-sprite-icon(2, 1, 6px, 11px, 0, 4px);
|
||||
}
|
||||
|
||||
.icon-nav {
|
||||
@@ -248,34 +248,38 @@ h2 {
|
||||
.inline-block();
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
.icon(0, 0, 28px, 28px, 10px, 0, 2px);
|
||||
.prepend-sprite-icon(0, 0, 28px, 28px, 0, 2px);
|
||||
}
|
||||
.robots a {
|
||||
.icon-pos(0,0);
|
||||
.prepend-sprite-icon-pos(0,0);
|
||||
&:hover {
|
||||
.icon-pos(1,0);
|
||||
.prepend-sprite-icon-pos(1,0);
|
||||
}
|
||||
}
|
||||
.rockets a {
|
||||
.icon-pos(0,1);
|
||||
.prepend-sprite-icon-pos(0,1);
|
||||
&:hover {
|
||||
.icon-pos(1,1);
|
||||
.prepend-sprite-icon-pos(1,1);
|
||||
}
|
||||
}
|
||||
.runners a {
|
||||
.icon-pos(0,2);
|
||||
.prepend-sprite-icon-pos(0,2);
|
||||
&:hover {
|
||||
.icon-pos(1,2);
|
||||
.prepend-sprite-icon-pos(1,2);
|
||||
}
|
||||
}
|
||||
.ghosts a {
|
||||
.icon-pos(0,3);
|
||||
.prepend-sprite-icon-pos(0,3);
|
||||
&:hover {
|
||||
.icon-pos(1,3);
|
||||
.prepend-sprite-icon-pos(1,3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon.twitter {
|
||||
.prepend-icon('../img/twitter-32x32.png', 32px, 32px, 0, -8px);
|
||||
}
|
||||
|
||||
/* Other Helpers */
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="shortcut icon" href="http://clearleft.com/favicon.ico" type="image/x-icon" />
|
||||
|
||||
<link rel="stylesheet" href="../_compiled/example.css" type="text/css">
|
||||
<link rel="stylesheet" href="css/example.css" type="text/css">
|
||||
|
||||
<title>ClearLESS Examples</title>
|
||||
</head>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="shortcut icon" href="http://clearleft.com/favicon.ico" type="image/x-icon" />
|
||||
|
||||
<link rel="stylesheet" href="../_compiled/example.css" type="text/css">
|
||||
<link rel="stylesheet" href="css/example.css" type="text/css">
|
||||
|
||||
<title>ClearLESS Examples</title>
|
||||
</head>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="shortcut icon" href="http://clearleft.com/favicon.ico" type="image/x-icon" />
|
||||
|
||||
<link rel="stylesheet" href="../_compiled/example.css" type="text/css">
|
||||
<link rel="stylesheet" href="css/example.css" type="text/css">
|
||||
|
||||
<title>ClearLESS Examples</title>
|
||||
</head>
|
||||
@@ -34,5 +34,12 @@
|
||||
|
||||
</div>
|
||||
|
||||
<div class="receptacle">
|
||||
|
||||
<p><a href="#" class="icon twitter">Twitter</a></p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -59,7 +59,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Gradients
|
||||
#gradient {
|
||||
.horizontal (@start-color, @end-color) when not (@disable-filters) {
|
||||
background-color: @end-color;
|
||||
@@ -113,7 +112,6 @@
|
||||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@start-color,@end-color)); /* IE6 & IE7 */
|
||||
-ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@start-color,@end-color); /* IE8+ */
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Helpers --------------------------------
|
||||
|
||||
@@ -4,51 +4,99 @@
|
||||
// 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) {
|
||||
// Non-sprited icons --------------------------------
|
||||
|
||||
.prepend-icon( @icon-image, @width, @height, @nudge-left:0, @nudge-top:0, @pad:10 ) when (@using-modernizr) {
|
||||
.generatedcontent & {
|
||||
position: relative;
|
||||
padding-left: (@width + @pad) * 1px;
|
||||
}
|
||||
.generatedcontent &:before {
|
||||
._generated-icon( @x, @y, @width, @height, @sprite-image, @sprite-grid );
|
||||
._generated-icon( @width, @height, @icon-image );
|
||||
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) {
|
||||
.prepend-icon( @icon-image, @width, @height, @nudge-left:0, @nudge-top:0, @pad:10 ) when not (@using-modernizr) {
|
||||
position: relative;
|
||||
padding-left: (@width + @pad) * 1px;
|
||||
&:before {
|
||||
._generated-icon( @x, @y, @width, @height, @sprite-image, @sprite-grid );
|
||||
._generated-icon( @width, @height, @icon-image );
|
||||
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) {
|
||||
.append-icon( @icon-image, @width, @height, @nudge-right:0, @nudge-top:0, @pad:10 ) when (@using-modernizr) {
|
||||
.generatedcontent & {
|
||||
position: relative;
|
||||
padding-right: (@width + @pad) * 1px;
|
||||
}
|
||||
.generatedcontent &:after {
|
||||
._generated-icon( @width, @height, @icon-image );
|
||||
top: @nudge-top;
|
||||
right: @nudge-right;
|
||||
}
|
||||
}
|
||||
|
||||
.append-icon( @icon-image, @width, @height, @nudge-right:0, @nudge-top:0, @pad:10 ) when not (@using-modernizr) {
|
||||
position: relative;
|
||||
padding-right: (@width + @pad) * 1px;
|
||||
.generatedcontent &:after {
|
||||
._generated-icon( @width, @height, @icon-image );
|
||||
top: @nudge-top;
|
||||
right: @nudge-right;
|
||||
}
|
||||
}
|
||||
|
||||
// Sprited icons --------------------------------
|
||||
|
||||
.prepend-sprite-icon(@x, @y, @width, @height, @nudge-left:0, @nudge-top:0, @pad:10, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) when (@using-modernizr) {
|
||||
.generatedcontent & {
|
||||
position: relative;
|
||||
padding-left: (@width + @pad) * 1px;
|
||||
}
|
||||
.generatedcontent &:before {
|
||||
._generated-sprite-icon( @x, @y, @width, @height, @sprite-image, @sprite-grid );
|
||||
top: @nudge-top;
|
||||
left: @nudge-left;
|
||||
}
|
||||
}
|
||||
|
||||
.prepend-sprite-icon(@x, @y, @width, @height, @nudge-left:0, @nudge-top:0, @pad:10, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) when not (@using-modernizr) {
|
||||
position: relative;
|
||||
padding-left: (@width + @pad) * 1px;
|
||||
&:before {
|
||||
._generated-sprite-icon( @x, @y, @width, @height, @sprite-image, @sprite-grid );
|
||||
top: @nudge-top;
|
||||
left: @nudge-left;
|
||||
}
|
||||
}
|
||||
|
||||
.append-sprite-icon(@x, @y, @width, @height, @nudge-right:0, @nudge-top:0, @pad:10, @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 );
|
||||
.generatedcontent &:after {
|
||||
._generated-sprite-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) {
|
||||
.append-sprite-icon(@x, @y, @width, @height, @nudge-right:0, @nudge-top:0, @pad:10, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) when not (@using-modernizr) {
|
||||
position: relative;
|
||||
padding-right: (@width + @pad) * 1px;
|
||||
&:before {
|
||||
._generated-icon( @x, @y, @width, @height, @sprite-image, @sprite-grid );
|
||||
&:after {
|
||||
._generated-sprite-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) {
|
||||
.prepend-sprite-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);
|
||||
@@ -56,7 +104,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.icon-pos(@x, @y, @nudge-left:0, @nudge-top:0, @sprite-grid:@sprite-grid) {
|
||||
.prepend-sprite-icon-pos(@x, @y, @nudge-left:0, @nudge-top:0, @sprite-grid:@sprite-grid) when not (@using-modernizr) {
|
||||
&:before {
|
||||
.sprite-pos(@x, @y, @sprite-grid);
|
||||
.nudge-l(@nudge-left);
|
||||
@@ -64,16 +112,16 @@
|
||||
}
|
||||
}
|
||||
|
||||
.right-icon-pos(@x, @y, @nudge-right:0, @nudge-top:0, @sprite-grid:@sprite-grid) when (@using-modernizr) {
|
||||
.generatedcontent &:before {
|
||||
.append-sprite-icon-pos(@x, @y, @nudge-right:0, @nudge-top:0, @sprite-grid:@sprite-grid) when (@using-modernizr) {
|
||||
.generatedcontent &:after {
|
||||
.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 {
|
||||
.append-sprite-icon-pos(@x, @y, @nudge-right:0, @nudge-top:0, @sprite-grid:@sprite-grid) when not (@using-modernizr) {
|
||||
&:after {
|
||||
.sprite-pos(@x, @y, @sprite-grid);
|
||||
.nudge-r(@nudge-right);
|
||||
.nudge-t(@nudge-top);
|
||||
@@ -82,7 +130,15 @@
|
||||
|
||||
// ---- internal use mixins -----------------------
|
||||
|
||||
._generated-icon(@x, @y, @width, @height, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) {
|
||||
._generated-icon(@width, @height, @icon-image) {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: ' ';
|
||||
background: url(@icon-image) no-repeat 0 0;
|
||||
.size(@width, @height);
|
||||
}
|
||||
|
||||
._generated-sprite-icon(@x, @y, @width, @height, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: ' ';
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
|
||||
// Sprites --------------------------------
|
||||
|
||||
@sprite-image: url('/example.png');
|
||||
@sprite-image: '/example.png';
|
||||
@sprite-grid: 50px;
|
||||
|
||||
// Grid --------------------------------
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
}
|
||||
|
||||
.sprite-image(@sprite-image:@sprite-image) {
|
||||
background-image: @sprite-image;
|
||||
background-image: url(@sprite-image);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user