handysass 0.1.3 → 0.1.4
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/lib/handysass.rb +2 -2
- data/stylesheets/handysass/_mixins.scss +2 -1
- data/stylesheets/handysass/mixins/_sprite.scss +29 -20
- data/stylesheets/handysass/mixins/_textdir.scss +57 -0
- metadata +2 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 984afb2d650c7896bdbb9e28804dad110bfa1f34
|
4
|
+
data.tar.gz: 44b2171f9275ba6c28fc3dd6ad95587bbbb7af11
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 77e67229ae79606f381ee3199096640053071202b80a924e34c3816d352d8db0b2d3766cb102cedfadb630b5e6d13a9d221bbd6a392992747084ad261941ec2a
|
7
|
+
data.tar.gz: f7fb1d90ed63b54c7fe0a6864ce38dc8773c546c69456d1dd7850d2e4a4f7b51d527d41802a8294bbb2280206e75f8d3db8ffc2e16d42fb215dbb4e3b0717ab1
|
data/lib/handysass.rb
CHANGED
@@ -1,39 +1,48 @@
|
|
1
|
-
//
|
2
|
-
@mixin -handy-sprite($left, $top, $width, $height) {
|
3
|
-
background-position: (-1 * ($left - 1) * $width) (-1 * ($top - 1) * $height);
|
4
|
-
}
|
5
|
-
|
6
|
-
// Sprite position builder.
|
1
|
+
// Strict or hoverable sprite position builder.
|
7
2
|
//
|
8
3
|
// Sets the background position of your sprite,
|
9
|
-
// based on the
|
10
|
-
// handles hover position if desired.
|
4
|
+
// based on the x/y location, size, and offset you provide.
|
11
5
|
//
|
12
6
|
// $left/$top are 1-indexed, meant to represent col/row coords.
|
13
7
|
//
|
14
|
-
// Meant for sprites where each image is the same width/height.
|
8
|
+
// Meant for sprites where each image is the same width and/or height.
|
9
|
+
//
|
10
|
+
// @param pixels $left The left offset
|
11
|
+
// @param pixels $top The top offset
|
12
|
+
// @param pixels $width The width of the image
|
13
|
+
// @param pixels $height The height of the image
|
14
|
+
// @param pixels $start-left The left offset within the sprite
|
15
|
+
// @param pixels $start-top The top offset within the sprite
|
16
|
+
|
17
|
+
@mixin handy-sprite($col, $row, $width, $height, $start-left:0, $start-top:0) {
|
18
|
+
background-position: ((($col - 1) * $width + $start-left) * -1) ((($row - 1) * $height + $start-top) * -1);
|
19
|
+
}
|
20
|
+
|
21
|
+
// Hoverable sprite position builder.
|
22
|
+
//
|
23
|
+
// Instead of speci
|
15
24
|
//
|
16
|
-
// @uses
|
25
|
+
// @uses handy-sprite()
|
17
26
|
//
|
18
27
|
// @param pixels $left The left offset
|
19
28
|
// @param pixels $top The top offset
|
20
29
|
// @param pixels $width The width of the image
|
21
30
|
// @param pixels $height The height of the image
|
22
|
-
// @param pixels $
|
23
|
-
// @param pixels $
|
31
|
+
// @param pixels $hover-left The left offset on hover
|
32
|
+
// @param pixels $hover-top The top offset on hover
|
24
33
|
|
25
|
-
@mixin
|
26
|
-
@include
|
34
|
+
@mixin hover-sprite($left, $top, $width, $height, $hover-left:0, $hover-top:0, $start-left:0, $start-top:0) {
|
35
|
+
@include handy-sprite($left, $top, $width, $height);
|
27
36
|
|
28
|
-
@if $
|
29
|
-
@if $
|
30
|
-
$
|
37
|
+
@if $hover-left != 0 or $hover-top != 0 {
|
38
|
+
@if $hover-left == 0 {
|
39
|
+
$hover-left: $left;
|
31
40
|
}
|
32
|
-
@if $
|
33
|
-
$
|
41
|
+
@if $hover-top == 0 {
|
42
|
+
$hover-top: $top;
|
34
43
|
}
|
35
44
|
&:hover {
|
36
|
-
@include
|
45
|
+
@include handy-sprite($hover-left, $hover-top, $width, $height);
|
37
46
|
}
|
38
47
|
}
|
39
48
|
}
|
@@ -0,0 +1,57 @@
|
|
1
|
+
// Create LTR/RTL dependent variants for a specific property
|
2
|
+
//
|
3
|
+
// Example usage:
|
4
|
+
//
|
5
|
+
// .mydiv{
|
6
|
+
// this...
|
7
|
+
// @include dirdep();
|
8
|
+
//
|
9
|
+
// becomes...
|
10
|
+
// .ltr &{float: left;}
|
11
|
+
// .rtl &{float: right;}
|
12
|
+
//
|
13
|
+
// this...
|
14
|
+
// @include dirdep(margin, 20px);
|
15
|
+
//
|
16
|
+
// becomes...
|
17
|
+
// .ltr &{margin-left: 20px;}
|
18
|
+
// .rtl &{margin-right: 20px;}
|
19
|
+
//
|
20
|
+
// this...
|
21
|
+
// @include dirdep(10px, false);
|
22
|
+
//
|
23
|
+
// becomes...
|
24
|
+
// .ltr &{right: 10px;}
|
25
|
+
// .rtl &{left: 10px;}
|
26
|
+
// }
|
27
|
+
//
|
28
|
+
// @param mixed $property The property to use.
|
29
|
+
// @param mixed $value The value for the poperty.
|
30
|
+
// @param mixed $lvr True for Left on LTR, Right on RTL (false for reverse)
|
31
|
+
|
32
|
+
@mixin dirdep($property:float, $value:true, $lvr:true) {
|
33
|
+
@if $property == 'float' {
|
34
|
+
// Floating; $value becomse $lvr
|
35
|
+
.ltr &{
|
36
|
+
float: if($value, left, right);
|
37
|
+
}
|
38
|
+
.rtl &{
|
39
|
+
float: if($value, right, left);
|
40
|
+
}
|
41
|
+
} @else if type-of($property) == 'number' {
|
42
|
+
// Positioning; $property is the value, $value is $lvr
|
43
|
+
.ltr &{
|
44
|
+
#{if($value, left, right)}: $property;
|
45
|
+
}
|
46
|
+
.rtl &{
|
47
|
+
#{if($value, right, left)}: $property;
|
48
|
+
}
|
49
|
+
} @else {
|
50
|
+
.ltr &{
|
51
|
+
#{$property}-#{if($lvr, left, right)}: $value;
|
52
|
+
}
|
53
|
+
.rtl &{
|
54
|
+
#{$property}-#{if($lvr, right, left)}: $value;
|
55
|
+
}
|
56
|
+
}
|
57
|
+
}
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: handysass
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.1.
|
4
|
+
version: 0.1.4
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Doug Wollison
|
@@ -42,6 +42,7 @@ files:
|
|
42
42
|
- stylesheets/handysass/mixins/_responsive.scss
|
43
43
|
- stylesheets/handysass/mixins/_sizing.scss
|
44
44
|
- stylesheets/handysass/mixins/_sprite.scss
|
45
|
+
- stylesheets/handysass/mixins/_textdir.scss
|
45
46
|
homepage: http://github.com/dougwollison/handysass
|
46
47
|
licenses:
|
47
48
|
- GPL-2.0
|