Blueprint IE Compatibility

This module should be imported into a stylesheet that will only be served to legacy versions of Internet Explorer. If you’ve used the blueprint project generator, this will be done for you. In a standard blueprint project you’ll need the following:

@import blueprint/ie
+blueprint-ie

Or if you prefer to use blueprint on only some pages you can nest these styles. E.g.

@import blueprint/ie
body.blueprint
  +blueprint-ie(true)

The stylesheet should then be linked like so:

<!--[if lt IE 8]><link rel="stylesheet" href="/stylesheets/ie.css"
   type="text/css" media="screen, projection"><![endif]-->

This file can be imported using: @import "blueprint/ie"

View the Source for this module on Github.

Mixins

View Source: Sass | SCSS 

=blueprint-ie($body_selector: body)
  @if $body_selector == true
    +blueprint-ie-body
    +blueprint-ie-defaults
  @else
    #{$body_selector}
      +blueprint-ie-body
      @if $body_selector != "body"
        @warn "[DEPRECATED] To specify a the selector \"#{$body_selector}\\" to +blueprint-ie, pass true as the first argument and mix it into #{$body_selector}."
        +blueprint-ie-defaults
    @if $body_selector == "body"
      +blueprint-ie-defaults

@mixin blueprint-ie($body_selector: body) {
  @if $body_selector == true {
    @include blueprint-ie-body;
    @include blueprint-ie-defaults; }
  @else {
    #{$body_selector} {
      @include blueprint-ie-body;
      @if $body_selector != "body" {
        @warn "[DEPRECATED] To specify a the selector \"#{$body_selector}\\" to +blueprint-ie, pass true as the first argument and mix it into #{$body_selector}.";
        @include blueprint-ie-defaults; } }
    @if $body_selector == "body" {
      @include blueprint-ie-defaults; } } }

Usage Examples

As a top-level mixin, apply to any page that includes the stylesheet:

+blueprint-ie

Scoped by a presentational class:

body.blueprint
 +blueprint-ie(true)

Scoped by semantic selectors:

body#page-1, body#page-2, body.a-special-page-type
  +blueprint-ie(true)

Deprecated: You can pass the body selector as the first argument when used as a top-level mixin

+blueprint-ie("body#page-1, body#page-2, body.a-special-page-type")
View Source: Sass | SCSS 

=blueprint-ie-body
  text-align: center
  +blueprint-ie-hacks

@mixin blueprint-ie-body {
  text-align: center;
  @include blueprint-ie-hacks; }
View Source: Sass | SCSS 

=blueprint-ie-hacks
  * html &
    legend
      margin: 0px -8px 16px 0
      padding: 0
  html > &
    p code
      *white-space: normal

@mixin blueprint-ie-hacks {
  * html & {
    legend {
      margin: 0px -8px 16px 0;
      padding: 0; } }
  html > & {
    p code {
      *white-space: normal; } } }
View Source: Sass | SCSS 

=blueprint-inline-form-ie
  div, p
    vertical-align: middle
  label
    position: relative
    top: -0.25em
  input
    &.checkbox, &.radio, &.button, button
      margin: 0.5em 0

@mixin blueprint-inline-form-ie {
  div, p {
    vertical-align: middle; }
  label {
    position: relative;
    top: -0.25em; }
  input {
    &.checkbox, &.radio, &.button, button {
      margin: 0.5em 0; } } }

Fixes for Blueprint “inline” forms in IE

View Source: Sass | SCSS 

=blueprint-ie-defaults
  .container
    text-align: left
  sup
    vertical-align: text-top
  sub
    vertical-align: text-bottom
  hr
    margin: -8px auto 11px
  img
    -ms-interpolation-mode: bicubic
  fieldset
    padding-top: 0
  textarea
    overflow: auto
  input
    &.text
      margin: 0.5em 0
      background-color: white
      border: 1px solid #bbbbbb
      &:focus
        border: 1px solid #666666
    &.title
      margin: 0.5em 0
      background-color: white
      border: 1px solid #bbbbbb
      &:focus
        border: 1px solid #666666
    &.checkbox
      position: relative
      top: 0.25em
    &.radio
      position: relative
      top: 0.25em
    &.button
      position: relative
      top: 0.25em
  textarea
    margin: 0.5em 0
  select
    margin: 0.5em 0
  button
    position: relative
    top: 0.25em

@mixin blueprint-ie-defaults {
  .container {
    text-align: left; }
  sup {
    vertical-align: text-top; }
  sub {
    vertical-align: text-bottom; }
  hr {
    margin: -8px auto 11px; }
  img {
    -ms-interpolation-mode: bicubic; }
  fieldset {
    padding-top: 0; }
  textarea {
    overflow: auto; }
  input {
    &.text {
      margin: 0.5em 0;
      background-color: white;
      border: 1px solid #bbbbbb;
      &:focus {
        border: 1px solid #666666; } }
    &.title {
      margin: 0.5em 0;
      background-color: white;
      border: 1px solid #bbbbbb;
      &:focus {
        border: 1px solid #666666; } }
    &.checkbox {
      position: relative;
      top: 0.25em; }
    &.radio {
      position: relative;
      top: 0.25em; }
    &.button {
      position: relative;
      top: 0.25em; } }
  textarea {
    margin: 0.5em 0; }
  select {
    margin: 0.5em 0; }
  button {
    position: relative;
    top: 0.25em; } }