Add element-invisible-off mixin.
[project/zen.git] / STARTERKIT / sass / _base.scss
1 //
2 // Partials to be shared with all .scss files.
3 //
4 // To make it easier to use all variables and mixins in any Sass file in this
5 // theme, each .scss file has a @import "base" declaration. And this _base.scss
6 // file is in charge of importing all the other partials needed for the theme.
7
8 @import "compass/support"; // Add Compass' IE and vendor prefix support variables.
9 @import "variables";       // Add your own shared variables here.
10
11 @import "zen";
12 @import "compass/css3";
13
14
15 //
16 // Sass mixins
17 //
18 // To use a mixin in this file, add this line to the top of your .scss file:
19 //   @import "base";
20 // Then to use a mixin for a particular rule, add this inside the ruleset's
21 // curly brackets:
22 //   @include mix-in-name;
23
24
25 // clearfix as defined by Drupal
26 @mixin clearfix {
27   &:after {
28     content: ".";
29     display: block;
30     height: 0;
31     clear: both;
32     visibility: hidden;
33   }
34   // IE6
35   @if $legacy-support-for-ie6 {
36     .ie6 & {
37       height: 1%;
38     }
39   }
40   // IE7
41   @if $legacy-support-for-ie7 {
42     .ie7 & {
43       min-height: 1%;
44     }
45   }
46 }
47
48 // element-invisible as defined by http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
49 @mixin element-invisible {
50   position: absolute !important;
51   height: 1px;
52   width: 1px;
53   overflow: hidden;
54   @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
55     clip: rect(1px 1px 1px 1px); // IE6 and IE7 use the wrong syntax.
56   }
57   clip: rect(1px, 1px, 1px, 1px);
58 }
59
60 // Turns off the element-invisible effect.
61 @mixin element-invisible-off {
62   position: static !important;
63   clip: auto;
64   height: auto;
65   width: auto;
66   overflow: auto;
67 }
68
69 @mixin element-focusable {
70   @include element-invisible;
71
72   &:active,
73   &:focus {
74     @include element-invisible-off;
75   }
76 }
77
78 // The word "Unpublished" displayed underneath unpublished nodes and comments.
79 @mixin unpublished-div {
80   height: 0;
81   overflow: visible;
82   color: #d8d8d8;
83   font-size: 75px;
84   line-height: 1;
85   font-family: Impact, "Arial Narrow", Helvetica, sans-serif;
86   font-weight: bold;
87   text-transform: uppercase;
88   text-align: center;
89   word-wrap: break-word; // A very nice CSS3 property
90
91   @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
92     .ie6-7 &>* {
93       position: relative; // Otherwise these elements will appear below the "Unpublished" text.
94     }
95   }
96 }