-
Notifications
You must be signed in to change notification settings - Fork 0
/
guards.less
54 lines (42 loc) · 1.2 KB
/
guards.less
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
//////////////////////////////////////////////
// GUARDS
//////////////////////////////////////////////
#ba-guard {
// Content
.ba-width (@pl-content-width) when (@pl-content-width < 500) {
background:red;
}
// Text Shadow
.ba-textshadow (@pl-headers) when (lightness(@pl-headers) >= 50%) {
text-shadow:0 1px 0 @black;
}
.ba-textshadow (@pl-headers) when (lightness(@pl-headers) < 50%) {
text-shadow:0 1px 0 @white;
}
// Text Shadow with multiple conditions
.ba-textshadow (@pl-headers) when (lightness(@pl-headers) >= 50%) and (lightness(@my-var) >= 50%){
text-shadow:0 1px 0 @black;
}
.ba-textshadow (@pl-headers) when (lightness(@pl-headers) < 50%) and (lightness(@my-var) < 50%){
text-shadow:0 1px 0 @white;
}
// Box Shadow
.ba-boxshadow (@pl-base) when (lightness(@pl-base) >= 50%) {
.box-shadow(0 1px 0 @white);
}
.ba-boxshadow (@pl-base) when (lightness(@pl-base) < 50%) {
.box-shadow(0 1px 0 @black);
}
}
//////////////////////////////////////////////
// USEAGE
//////////////////////////////////////////////
.mydiv {
#ba-guard > .ba-boxshadow (@pl-base);
}
.mydiv {
#ba-guard > .ba-width (@pl-content-width);
}
.myheader {
#ba-guard > .ba-textshadow (@ibp-headers);
}