1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
// Survival ✚ Kit
@import "compass/typography/text/replacement";
// Replace an A tag with an a background-image.
// @var $image string path to the image
// @var $inline boolean embed via data.
@mixin image-link($image, $inline:false) {
@include image-background($image, $inline);
cursor:pointer;
@extend .ext-hide-text;
}
// Replace an A tag with an a background-image sprite. You need to provide it with
// the dimentions of the image and the x-pos/y-pos
//
// @var $image string path to the image, inherit is useful.
// @var $height width
// @var $height pixels
// @var $x-pos pixels
// @var $y-pos pixels
// @var $inline boolean embed via data.
@mixin image-sprite-link($image, $width, $height, $x-pos, $y-pos, $inline: false) {
@include sk-background(transparent, $image, $x-pos, $y-pos, no-repeat, $inline);
width:$width;
height:$height;
@extend .ext-hide-text;
}
// Replace a Header>a tag with a background image. Made specifically for logos.
// @var $image string path to the image
// @var $inline boolean embed via data.
@mixin logo($image, $inline:false) {
@include no-mp;
width: image-width($image);
height: image-height($image);
a {
@include image-link($image, $inline);
&:hover { opacity: 0.7;}
}
}
// Area for a header link, meant to be used when it inherits a background image.
// This should be invoked on the H1-6 Tag and not in the link, the needed structure is:2
// <h1><a href=""></a></h1>
@mixin logo-area($width, $height, $debugging: false) {
@include no-mp;
width:$width;
height:$height;
a {
@include link-area($width, $height, $debugging);
}
}
// An area which should be clickable. It's meant to be a low level mixin, you should
// use the alternatuves.
// - debugging enables a background color to know the position.
@mixin link-area($width, $height, $debugging: false) {
width:$width;
height:$height;
@if $debugging {
@include debug($debugging);
}
@extend .ext-hide-text;
}
// Mixin for quickly replacing images for any given element.
// @var $image string path to the image
// @var $inline boolean embed via data.
@mixin image-replace($image, $inline:false) {
@include image-background($image, $inline);
@extend .ext-hide-text;
}
@mixin image-replace-url($image, $width, $height) {
background:transparent url($image) left top no-repeat;
@include link-area($width, $height);
}
// Just adds the image as a background and sets the width/height accordingly.
// @var $image string path to the image
// @var $inline boolean embed via data.
@mixin image-background($image, $inline:false) {
@include sk-background(transparent, $image, no-repeat, top, left, $inline);
width: image-width($image);
height: image-height($image);
}
// Add a background by passing the exact same parameters as a normal one. With
// one more parameter $inline. Which will use inline-image and add backward
// compatibility to IE7 via *background.
//
// @var $color
// @var $image string can be a path to an image or inherit (will insert tags separately)
// @var $horizontal
// @var $vertical
// @var $repeat
// @var $inline
@mixin sk-background($color, $image, $horizontal, $vertical, $repeat, $inline: false) {
@if $image == inherit {
background-color: $color;
background-repeat: $repeat;
background-position: $horizontal $vertical;
} @else {
@if $inline == true {
background : $color inline-image($image) $horizontal $vertical $repeat;
*background : $color image-url($image) $horizontal $vertical $repeat;
} @else {
background: $color image-url($image) $horizontal $vertical $repeat;
}
}
}
// Common styles needed by our Image Mixins.
// Depends on Compass.
.ext-hide-text {
@include hide-text;
display:block;
direction: ltr;
outline:none;
}
|
