mixins.less
2.62 KB
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
.gray(@percent) {
color: hsl(0,0%,(@percent));
}
.ul-inline-no-style() {
margin: 0px;
list-style: none;
.clearfix;
li {
float: left;
display: block;
}
}
.ul-block-no-style() {
margin: 0px;
list-style: none;
.clearfix;
}
// 1 pixel black and white text shadows
.textShadowBlack(@shadow) {
text-shadow: 0 1px 1px hsla(0,0%,0%,@shadow);
}
.textShadowWhite(@shadow: 0 1px 0px hsla(0,0%,100%,0.8)) {
text-shadow: @shadow;
}
// easy background image mixin
.bgi(@src, @xpos: 0, @ypos: 0, @repeat: no-repeat) {
background-image: url(@src);
background-position: @xpos @ypos;
background-attachment: scroll;
background-repeat: @repeat;
}
// Background-cover mixin yay
.background-cover(@cover: cover) {
-webkit-background-size: @cover;
-moz-background-size: @cover;
-o-background-size: @cover;
background-size: @cover;
}
// CSS3 modern box sizing - padding is included in sum
.box-sizing(@type: border-box) {
-webkit-box-sizing: @type;
-moz-box-sizing: @type;
box-sizing: @type;
}
// H Rest - resets H tags margin and padding
.hreset() {
margin: 0;
padding: 0;
}
// the retina mixin. An example goes: .at2x(img/header@2x.png, 650px, 150px, top, left, no-repeat, scroll)
// Put the size that the image appears on a non-retina, e.g. if it's a 200px x 200px non-retina, that is the effective size. The @2x 400px x 400px is calculated automatically. The order to type it is width then height.
// A modification of the retina.js less mixin - https://github.com/imulus/retinajs
@highdpi: ~"(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx)";
.at2x(@path, @w: auto, @h: auto, @xpos: 0, @ypos: 0, @repeat: no-repeat, @attachment: scroll) {
background-image: url(@path);
background-position: @xpos @ypos;
background-repeat: @repeat;
background-attachment: @attachment;
@at2x_path: ~`"@{path}".split('.').slice(0, "@{path}".split('.').length - 1).join(".") + "@2x" + "." + "@{path}".split('.')["@{path}".split('.').length - 1]`;
@media @highdpi {
background-image: url(@at2x_path);
background-size: @w @h;
background-position: @xpos @ypos;
background-repeat: @repeat;
background-attachment: @attachment;
}
}
// the highlight color for the page
.highlight(@backgroundColor, @textColor) {
::selection, -moz::selection {
background: @backgroundColor;
color: @textColor;
}
}
.highlight(hsl(207, 100%, 52%), @white);
.noselect() {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}