summaryrefslogtreecommitdiff
path: root/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass/_mixins.scss
diff options
context:
space:
mode:
Diffstat (limited to 'sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass/_mixins.scss')
-rw-r--r--sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass/_mixins.scss37
1 files changed, 37 insertions, 0 deletions
diff --git a/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass/_mixins.scss b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass/_mixins.scss
new file mode 100644
index 000000000..b9cb09aee
--- /dev/null
+++ b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass/_mixins.scss
@@ -0,0 +1,37 @@
+// @file
+// Custom sass mixins
+//
+// Define the custom mixins for your project here.
+// http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#defining_a_mixin
+
+// Makes an element visually hidden, but accessible.
+// @see http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
+@mixin element-invisible {
+ position: absolute !important;
+ height: 1px;
+ width: 1px;
+ overflow: hidden;
+ @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
+ clip: rect(1px 1px 1px 1px); // IE6 and IE7 use the wrong syntax.
+ }
+ clip: rect(1px, 1px, 1px, 1px);
+}
+
+// Turns off the element-invisible effect.
+@mixin element-invisible-off {
+ position: static !important;
+ clip: auto;
+ height: auto;
+ width: auto;
+ overflow: auto;
+}
+
+// Makes an element visually hidden by default, but visible when focused.
+@mixin element-focusable {
+ @include element-invisible;
+
+ &:active,
+ &:focus {
+ @include element-invisible-off;
+ }
+}