forked from cliftonc/calipso
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add helper file
- Loading branch information
Showing
1 changed file
with
90 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } |