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 }