1
|
//
|
2
|
// Custom sass mixins
|
3
|
//
|
4
|
// To use a mixin in this file, add this line to the top of your .scss file:
|
5
|
// @import "base";
|
6
|
// Then to use a mixin for a particular rule, add this inside the ruleset's
|
7
|
// curly brackets:
|
8
|
// @include mix-in-name;
|
9
|
|
10
|
|
11
|
// element-invisible as defined by http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
|
12
|
@mixin element-invisible {
|
13
|
position: absolute !important;
|
14
|
height: 1px;
|
15
|
width: 1px;
|
16
|
overflow: hidden;
|
17
|
@if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
|
18
|
clip: rect(1px 1px 1px 1px); // IE6 and IE7 use the wrong syntax.
|
19
|
}
|
20
|
clip: rect(1px, 1px, 1px, 1px);
|
21
|
}
|
22
|
|
23
|
// Turns off the element-invisible effect.
|
24
|
@mixin element-invisible-off {
|
25
|
position: static !important;
|
26
|
clip: auto;
|
27
|
height: auto;
|
28
|
width: auto;
|
29
|
overflow: auto;
|
30
|
}
|
31
|
|
32
|
@mixin element-focusable {
|
33
|
@include element-invisible;
|
34
|
|
35
|
&:active,
|
36
|
&:focus {
|
37
|
@include element-invisible-off;
|
38
|
}
|
39
|
}
|
40
|
|
41
|
// The word "Unpublished" displayed underneath unpublished nodes and comments.
|
42
|
@mixin unpublished-div {
|
43
|
height: 0;
|
44
|
overflow: visible;
|
45
|
color: #d8d8d8;
|
46
|
font-size: 75px;
|
47
|
line-height: 1;
|
48
|
font-family: Impact, "Arial Narrow", Helvetica, sans-serif;
|
49
|
font-weight: bold;
|
50
|
text-transform: uppercase;
|
51
|
text-align: center;
|
52
|
word-wrap: break-word; // A very nice CSS3 property
|
53
|
|
54
|
@if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
|
55
|
.lt-ie8 &>* {
|
56
|
position: relative; // Otherwise these elements will appear below the "Unpublished" text.
|
57
|
}
|
58
|
}
|
59
|
}
|