mirror of
https://github.com/clearleft/clearless.git
synced 2026-01-09 13:47:55 -05:00
Add icon partials and documentation
This commit is contained in:
Mark Perkins
133
README.md
133
README.md
@@ -846,7 +846,7 @@ Appends an icon after the element it's called on.
|
||||
* `@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`
|
||||
* `@pad`: Right-padding (in addition to the width of the icon) to apply to the element. Defaults to `10px`
|
||||
|
||||
```css
|
||||
/* Usage: */
|
||||
@@ -926,7 +926,7 @@ Appends an icon taken from the sprite after the element it's called on.
|
||||
* `@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`
|
||||
* `@pad`: Right-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.
|
||||
|
||||
@@ -989,7 +989,7 @@ Adjusts the positioning of a appended sprite icon.
|
||||
|
||||
* `@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-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`.
|
||||
* `@sprite-grid`: The grid size used in the sprite. Defaults to the globally defined `@sprite-grid` value.
|
||||
|
||||
@@ -1004,8 +1004,135 @@ Adjusts the positioning of a appended sprite icon.
|
||||
}
|
||||
```
|
||||
|
||||
### .prepend-icon-setup()
|
||||
|
||||
A [partial mixin](#optimising-output-using-partial-mixins) to generate common properties for prepended icon mixins.
|
||||
|
||||
```css
|
||||
.prepend-icon-setup( [<@width>[, <@height>[, <@nudge-left>[, <@nudge-top>[, <@pad>]]]]] );
|
||||
```
|
||||
|
||||
* `@width`: Width of the image. Defaults to not being set.
|
||||
* `@height`: Height of the image. Defaults to not being set.
|
||||
* `@nudge-left`: The value of the `left` property for the icon. Defaults to not being set.
|
||||
* `@nudge-top`: The value of the `top` property for the icon. Defaults to not being set.
|
||||
* `@pad`: Left-padding (in addition to the width of the icon) to apply to the element. Defaults to `10px`
|
||||
|
||||
```css
|
||||
/* Usage: */
|
||||
.example {
|
||||
.prepend-icon-setup( 32px, 15px );
|
||||
}
|
||||
/* Example output: */
|
||||
.example {
|
||||
position: relative;
|
||||
}
|
||||
.example:before {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: ' ';
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 32px;
|
||||
height: 15px;
|
||||
}
|
||||
```
|
||||
|
||||
### .append-icon-setup()
|
||||
|
||||
A [partial mixin](#optimising-output-using-partial-mixins) to generate common properties for appended icon mixins.
|
||||
|
||||
```css
|
||||
.append-icon-setup( [<@width>[, <@height>[, <@nudge-right>[, <@nudge-top>[, <@pad>]]]]] );
|
||||
```
|
||||
|
||||
* `@width`: Width of the image. Defaults to not being set.
|
||||
* `@height`: Height of the image. Defaults to not being set.
|
||||
* `@nudge-right`: The value of the `right` property for the icon. Defaults to not being set.
|
||||
* `@nudge-top`: The value of the `top` property for the icon. Defaults to not being set.
|
||||
* `@pad`: Right-padding (in addition to the width of the icon) to apply to the element. Defaults to `10px`
|
||||
|
||||
```css
|
||||
/* Usage: */
|
||||
.example {
|
||||
.append-icon-setup( 32px, 15px );
|
||||
}
|
||||
/* Example output: */
|
||||
.example {
|
||||
position: relative;
|
||||
}
|
||||
.example:after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: ' ';
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 32px;
|
||||
height: 15px;
|
||||
}
|
||||
```
|
||||
|
||||
### .prepend-icon-image()
|
||||
|
||||
A [partial mixin](#optimising-output-using-partial-mixins) to generate image-specific properties for prepended icon mixins. Likely to be used in combination with the `.prepend-icon-setup()` mixin above.
|
||||
|
||||
```css
|
||||
.prepend-icon-image( <@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. Defaults to not being set.
|
||||
* `@height`: Height of the image. Defaults to not being set.
|
||||
* `@nudge-left`: The value of the `left` property for the icon. Defaults to not being set.
|
||||
* `@nudge-top`: The value of the `top` property for the icon. Defaults to not being set.
|
||||
* `@pad`: Left-padding (in addition to the width of the icon) to apply to the element. Defaults to `10px`
|
||||
|
||||
```css
|
||||
/* Usage: */
|
||||
.example {
|
||||
.prepend-icon-image( 'img/icon.png', 12px, 12px );
|
||||
}
|
||||
/* Example output: */
|
||||
.example {
|
||||
padding-left: 22px;
|
||||
}
|
||||
.example:before {
|
||||
background: url('img/icon.png') no-repeat 0 0;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
```
|
||||
|
||||
### .append-icon-image()
|
||||
|
||||
A [partial mixin](#optimising-output-using-partial-mixins) to generate image-specific properties for appended icon mixins. Likely to be used in combination with the `.append-icon-setup()` mixin above.
|
||||
|
||||
```css
|
||||
.append-icon-image( <@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. Defaults to not being set.
|
||||
* `@height`: Height of the image. Defaults to not being set.
|
||||
* `@nudge-right`: The value of the `right` property for the icon. Defaults to not being set.
|
||||
* `@nudge-top`: The value of the `top` property for the icon. Defaults to not being set.
|
||||
* `@pad`: Right-padding (in addition to the width of the icon) to apply to the element. Defaults to `10px`
|
||||
|
||||
```css
|
||||
/* Usage: */
|
||||
.example {
|
||||
.append-icon-image( 'img/icon.png', 12px, 12px );
|
||||
}
|
||||
/* Example output: */
|
||||
.example {
|
||||
padding-right: 22px;
|
||||
}
|
||||
.example:after {
|
||||
background: url('img/icon.png') no-repeat 0 0;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
```
|
||||
|
||||
Grids
|
||||
-------
|
||||
|
||||
@@ -513,18 +513,39 @@ h2 {
|
||||
.icon-nav .ghosts a:hover:before {
|
||||
background-position: -50px -150px;
|
||||
}
|
||||
.icon.twitter {
|
||||
.social {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding-left: 42px;
|
||||
padding-top: 7px;
|
||||
padding-bottom: 7px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.icon.twitter:before {
|
||||
.ie7 .social {
|
||||
display: inline;
|
||||
zoom: 1;
|
||||
}
|
||||
.social:before {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: ' ';
|
||||
background: url('../img/twitter-32x32.png') no-repeat 0 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
top: -8px;
|
||||
left: 0;
|
||||
}
|
||||
.social--twitter {
|
||||
padding-left: 22px;
|
||||
}
|
||||
.social--twitter:before {
|
||||
background: url('../img/twitter-32x32.png') no-repeat 0 0;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
.social--feed:before {
|
||||
background: url('../img/feed-32x32.png') no-repeat 0 0;
|
||||
}
|
||||
.social--huffduffer:before {
|
||||
background: url('../img/huffduffer-32x32.png') no-repeat 0 0;
|
||||
}
|
||||
/* Other Helpers */
|
||||
|
||||
BIN
examples/img/feed-32x32.png
Normal file
BIN
examples/img/feed-32x32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
examples/img/huffduffer-32x32.png
Normal file
BIN
examples/img/huffduffer-32x32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
@@ -276,10 +276,26 @@ h2 {
|
||||
}
|
||||
}
|
||||
|
||||
.icon.twitter {
|
||||
.prepend-icon('../img/twitter-32x32.png', 32px, 32px, 0, -8px);
|
||||
|
||||
.social {
|
||||
.inline-block();
|
||||
.prepend-icon-setup(32px, 32px, 10px);
|
||||
padding-top: 7px;
|
||||
padding-bottom: 7px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.social--twitter {
|
||||
.prepend-icon-image('../img/twitter-32x32.png', 12px, 12px);
|
||||
}
|
||||
.social--feed {
|
||||
.prepend-icon-image('../img/feed-32x32.png');
|
||||
}
|
||||
.social--huffduffer {
|
||||
.prepend-icon-image('../img/huffduffer-32x32.png');
|
||||
}
|
||||
|
||||
|
||||
/* Other Helpers */
|
||||
|
||||
|
||||
|
||||
@@ -36,8 +36,12 @@
|
||||
|
||||
<div class="receptacle">
|
||||
|
||||
<p><a href="#" class="icon twitter">Twitter</a></p>
|
||||
|
||||
<ul>
|
||||
<li><a href="#" class="social social--twitter">Twitter</a></li>
|
||||
<li><a href="#" class="social social--feed">RSS</a></li>
|
||||
<li><a href="#" class="social social--huffduffer">Huffduffer</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@@ -202,10 +202,10 @@
|
||||
// System --------------------------------
|
||||
|
||||
.nudge-l( @pos ) when ( @pos = 0 ) {}
|
||||
.nudge-l( @pos ) when ( @pos > 0 ) { left: @pos; }
|
||||
.nudge-l( @pos ) when not ( @pos = 0 ) { left: @pos; }
|
||||
.nudge-r( @pos ) when ( @pos = 0 ) {}
|
||||
.nudge-r( @pos ) when ( @pos > 0 ) { right: @pos; }
|
||||
.nudge-r( @pos ) when not ( @pos = 0 ) { right: @pos; }
|
||||
.nudge-t( @pos ) when ( @pos = 0 ) {}
|
||||
.nudge-t( @pos ) when ( @pos > 0 ) { top: @pos; }
|
||||
.nudge-t( @pos ) when not ( @pos = 0 ) { top: @pos; }
|
||||
.nudge-b( @pos ) when ( @pos = 0 ) {}
|
||||
.nudge-b( @pos ) when ( @pos > 0 ) { top: @pos; }
|
||||
.nudge-b( @pos ) when not ( @pos = 0 ) { bottom: @pos; }
|
||||
|
||||
@@ -6,10 +6,10 @@
|
||||
|
||||
// Non-sprited icons --------------------------------
|
||||
|
||||
.prepend-icon( @icon-image, @width, @height, @nudge-left:0, @nudge-top:0, @pad:10 ) when (@using-modernizr) {
|
||||
.prepend-icon( @icon-image, @width, @height, @nudge-left:0, @nudge-top:0, @pad:10px ) when (@using-modernizr) {
|
||||
.generatedcontent & {
|
||||
position: relative;
|
||||
padding-left: (@width + @pad) * 1px;
|
||||
padding-left: @width + @pad;
|
||||
}
|
||||
.generatedcontent &:before {
|
||||
._generated-icon( @width, @height, @icon-image );
|
||||
@@ -18,9 +18,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
.prepend-icon( @icon-image, @width, @height, @nudge-left:0, @nudge-top:0, @pad:10 ) when not (@using-modernizr) {
|
||||
.prepend-icon( @icon-image, @width, @height, @nudge-left:0, @nudge-top:0, @pad:10px ) when not (@using-modernizr) {
|
||||
position: relative;
|
||||
padding-left: (@width + @pad) * 1px;
|
||||
padding-left: @width + @pad;
|
||||
&:before {
|
||||
._generated-icon( @width, @height, @icon-image );
|
||||
top: @nudge-top;
|
||||
@@ -28,10 +28,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
.append-icon( @icon-image, @width, @height, @nudge-right:0, @nudge-top:0, @pad:10 ) when (@using-modernizr) {
|
||||
.append-icon( @icon-image, @width, @height, @nudge-right:0, @nudge-top:0, @pad:10px ) when (@using-modernizr) {
|
||||
.generatedcontent & {
|
||||
position: relative;
|
||||
padding-right: (@width + @pad) * 1px;
|
||||
padding-right: @width + @pad;
|
||||
}
|
||||
.generatedcontent &:after {
|
||||
._generated-icon( @width, @height, @icon-image );
|
||||
@@ -40,9 +40,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
.append-icon( @icon-image, @width, @height, @nudge-right:0, @nudge-top:0, @pad:10 ) when not (@using-modernizr) {
|
||||
.append-icon( @icon-image, @width, @height, @nudge-right:0, @nudge-top:0, @pad:10px ) when not (@using-modernizr) {
|
||||
position: relative;
|
||||
padding-right: (@width + @pad) * 1px;
|
||||
padding-right: @width + @pad;
|
||||
.generatedcontent &:after {
|
||||
._generated-icon( @width, @height, @icon-image );
|
||||
top: @nudge-top;
|
||||
@@ -52,10 +52,10 @@
|
||||
|
||||
// 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) {
|
||||
.prepend-sprite-icon(@x, @y, @width, @height, @nudge-left:0, @nudge-top:0, @pad:10px, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) when (@using-modernizr) {
|
||||
.generatedcontent & {
|
||||
position: relative;
|
||||
padding-left: (@width + @pad) * 1px;
|
||||
padding-left: @width + @pad;
|
||||
}
|
||||
.generatedcontent &:before {
|
||||
._generated-sprite-icon( @x, @y, @width, @height, @sprite-image, @sprite-grid );
|
||||
@@ -64,9 +64,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
.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) {
|
||||
.prepend-sprite-icon(@x, @y, @width, @height, @nudge-left:0, @nudge-top:0, @pad:10px, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) when not (@using-modernizr) {
|
||||
position: relative;
|
||||
padding-left: (@width + @pad) * 1px;
|
||||
padding-left: @width + @pad;
|
||||
&:before {
|
||||
._generated-sprite-icon( @x, @y, @width, @height, @sprite-image, @sprite-grid );
|
||||
top: @nudge-top;
|
||||
@@ -74,9 +74,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
.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) {
|
||||
.append-sprite-icon(@x, @y, @width, @height, @nudge-right:0, @nudge-top:0, @pad:10px, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) when (@using-modernizr) {
|
||||
.generatedcontent & {
|
||||
padding-right: (@width + @pad) * 1px;
|
||||
padding-right: @width + @pad;
|
||||
position: relative;
|
||||
}
|
||||
.generatedcontent &:after {
|
||||
@@ -86,9 +86,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
.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) {
|
||||
.append-sprite-icon(@x, @y, @width, @height, @nudge-right:0, @nudge-top:0, @pad:10px, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) when not (@using-modernizr) {
|
||||
position: relative;
|
||||
padding-right: (@width + @pad) * 1px;
|
||||
padding-right: @width + @pad;
|
||||
&:after {
|
||||
._generated-sprite-icon( @x, @y, @width, @height, @sprite-image, @sprite-grid );
|
||||
top: @nudge-top;
|
||||
@@ -128,6 +128,105 @@
|
||||
}
|
||||
}
|
||||
|
||||
// ---- Partials -----------------------
|
||||
|
||||
.prepend-icon-setup(@width:0, @height:0, @nudge-left:0, @nudge-top:0, @pad:10px) when (@using-modernizr) {
|
||||
.generatedcontent & {
|
||||
position: relative;
|
||||
._pad-left(@width, @pad);
|
||||
}
|
||||
.generatedcontent &:before {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: ' ';
|
||||
top: 0;
|
||||
left: 0;
|
||||
._size(@width, @height);
|
||||
}
|
||||
}
|
||||
|
||||
.prepend-icon-setup(@width:0, @height:0, @nudge-left:0, @nudge-top:0, @pad:10px) when not (@using-modernizr) {
|
||||
position: relative;
|
||||
._pad-left(@width, @pad);
|
||||
&:before {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: ' ';
|
||||
top: 0;
|
||||
left: 0;
|
||||
._size(@width, @height);
|
||||
}
|
||||
}
|
||||
|
||||
.append-icon-setup(@width:0, @height:0, @nudge-left:0, @nudge-top:0, @pad:10px) when (@using-modernizr) {
|
||||
.generatedcontent & {
|
||||
position: relative;
|
||||
._pad-right(@width, @pad);
|
||||
}
|
||||
.generatedcontent &:after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: ' ';
|
||||
top: 0;
|
||||
right: 0;
|
||||
._size(@width, @height);
|
||||
}
|
||||
}
|
||||
|
||||
.append-icon-setup(@width:0, @height:0, @nudge-left:0, @nudge-top:0, @pad:10px) when not (@using-modernizr) {
|
||||
position: relative;
|
||||
._pad-right(@width, @pad);
|
||||
&:after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: ' ';
|
||||
top: 0;
|
||||
right: 0;
|
||||
._size(@width, @height);
|
||||
}
|
||||
}
|
||||
|
||||
.prepend-icon-image(@icon-image, @width:0, @height:0, @nudge-left:0, @nudge-top:0, @pad:10px) when (@using-modernizr) {
|
||||
._gc-pad-left(@width, @pad);
|
||||
.generatedcontent &:before {
|
||||
background: url(@icon-image) no-repeat 0 0;
|
||||
._size(@width, @height);
|
||||
.nudge-l(@nudge-left);
|
||||
.nudge-t(@nudge-top);
|
||||
}
|
||||
}
|
||||
|
||||
.prepend-icon-image(@icon-image, @width:0, @height:0, @nudge-left:0, @nudge-top:0, @pad:10px) when not (@using-modernizr) {
|
||||
._pad-left(@width, @pad);
|
||||
&:before {
|
||||
background: url(@icon-image) no-repeat 0 0;
|
||||
._size(@width, @height);
|
||||
.nudge-l(@nudge-left);
|
||||
.nudge-t(@nudge-top);
|
||||
}
|
||||
}
|
||||
|
||||
.append-icon-image(@icon-image, @width:0, @height:0, @nudge-right:0, @nudge-top:0, @pad:10px) when (@using-modernizr) {
|
||||
._gc-pad-right(@width, @pad);
|
||||
.generatedcontent &:after {
|
||||
background: url(@icon-image) no-repeat 0 0;
|
||||
._size(@width, @height);
|
||||
.nudge-r(@nudge-right);
|
||||
.nudge-t(@nudge-top);
|
||||
}
|
||||
}
|
||||
|
||||
.append-icon-image(@icon-image, @width:0, @height:0, @nudge-right:0, @nudge-top:0, @pad:10px) when not (@using-modernizr) {
|
||||
._pad-right(@width, @pad);
|
||||
&:after {
|
||||
background: url(@icon-image) no-repeat 0 0;
|
||||
._size(@width, @height);
|
||||
.nudge-r(@nudge-right);
|
||||
.nudge-t(@nudge-top);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ---- internal use mixins -----------------------
|
||||
|
||||
._generated-icon(@width, @height, @icon-image) {
|
||||
@@ -144,3 +243,43 @@
|
||||
content: ' ';
|
||||
.sprite-sized(@x, @y, @width, @height, @sprite-image, @sprite-grid);
|
||||
}
|
||||
|
||||
._pad-left(@width, @pad) when (@width = 0) {}
|
||||
._pad-left(@width, @pad) when not (@width = 0) { padding-left: @width + @pad; }
|
||||
._pad-right(@width, @pad) when (@width = 0) {}
|
||||
._pad-right(@width, @pad) when not (@width = 0) { padding-right: @width + @pad; }
|
||||
|
||||
._gc-pad-left(@width, @pad) when (@width = 0) {}
|
||||
._gc-pad-right(@width, @pad) when (@width = 0) {}
|
||||
|
||||
._gc-pad-left(@width, @pad) when not (@width = 0) and (@using-modernizr) {
|
||||
.generatedcontent & {
|
||||
._pad-left(@width, @pad);
|
||||
}
|
||||
}
|
||||
._gc-pad-left(@width, @pad) when not (@width = 0) and not (@using-modernizr) {
|
||||
._pad-left(@width, @pad);
|
||||
}
|
||||
._gc-pad-right(@width, @pad) when not (@width = 0) {
|
||||
.generatedcontent & {
|
||||
._pad-right(@width, @pad);
|
||||
}
|
||||
}
|
||||
._gc-pad-right(@width, @pad) when not (@width = 0) and not (@using-modernizr) {
|
||||
._pad-right(@width, @pad);
|
||||
}
|
||||
|
||||
._size(@width, @height) when (@width = 0) and (@height = 0) {}
|
||||
._size(@width, @height) when (@width = 0) and not (@height = 0) {
|
||||
height: @height;
|
||||
}
|
||||
._size(@width, @height) when not (@width = 0) and (@height = 0) {
|
||||
width: @width;
|
||||
}
|
||||
._size(@width, @height) when not (@width = 0) and not (@height = 0) {
|
||||
width: @width;
|
||||
height: @height;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user