diff --git a/themes/core/cleanslate/public/sass/partials/_helpers.scss b/themes/core/cleanslate/public/sass/partials/_helpers.scss new file mode 100644 index 000000000..f2c8363f9 --- /dev/null +++ b/themes/core/cleanslate/public/sass/partials/_helpers.scss @@ -0,0 +1,90 @@ +/** + * Non-semantic helper classes: please define your styles before this section. + */ +@import "compass/css3"; +@import "compass/css3/pie"; + + +/* For image replacement */ +.ir { + display: block; + text-indent: -99in; + overflow: hidden; + background-repeat: no-repeat; + text-align: left; + direction: ltr; +} + +/* Hide for both screenreaders and browsers: + css-discuss.incutio.com/wiki/Screenreader_Visibility */ +.hidden { + display: none; + visibility: hidden; +} + +/* Hide only visually, but have it available for screenreaders: by Jon Neal. + www.webaim.org/techniques/css/invisiblecontent/ & j.mp/visuallyhidden */ +.visuallyhidden { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} + +/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */ +.visuallyhidden.focusable:active, +.visuallyhidden.focusable:focus { + clip: auto; + height: auto; + margin: 0; + overflow: visible; + position: static; + width: auto; +} + +/* Hide visually and from screenreaders, but maintain layout */ +.invisible { + visibility: hidden; +} + +/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements in most situations. + nicolasgallagher.com/micro-clearfix-hack/ */ +.clearfix:before, +.clearfix:after { + content: ""; + display: table; +} + +.clearfix:after { + clear: both; +} + +.clearfix { + zoom: 1; +} + +.centred { + text-align: center; +} + +.pie-element { + // relative is the default, so passing relative + // is redundant, but we do it here for clarity. + @include pie-element(relative); +} + +// But sometimes this messes up your positioning +// So you can also use z-indexing. In this case +// an ancestor element before or having the first +// opaque background should be marked as a pie-container +// which gives it a z-index of 0 (actually any z-index +// can be provided to the pie-container mixin). +// And then the pie element itself should be given +// a z-index of -1. +.pie-container { + @include pie-container; +} \ No newline at end of file