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"
=blueprint-ie($nested: false)
@if $nested
+blueprint-ie-body
+blueprint-ie-defaults
@else
body
+blueprint-ie-body
+blueprint-ie-defaults
@mixin blueprint-ie($nested: false) {
@if $nested {
@include blueprint-ie-body;
@include blueprint-ie-defaults;
}
@else {
body {
@include blueprint-ie-body;
}
@include blueprint-ie-defaults;
}
}
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")
=blueprint-ie-body text-align: center +blueprint-ie-hacks
@mixin blueprint-ie-body {
text-align: center;
@include blueprint-ie-hacks;
}
=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;
}
}
}
=blueprint-inline-form-ie
div, p
vertical-align: middle
input
&.checkbox, &.radio, &.button, button
margin: 0.5em 0
@mixin blueprint-inline-form-ie {
div, p {
vertical-align: middle;
}
input {
&.checkbox, &.radio, &.button, button {
margin: 0.5em 0;
}
}
}
Fixes for Blueprint "inline" forms in IE
=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
legend
margin-top: -0.2em
margin-bottom: 1em
margin-left: -0.5em
fieldset, #IE8#HACK
padding-top: 1.4em
legend, #IE8#HACK
margin-top: 0
margin-bottom: 0
textarea
overflow: auto
label
position: relative
top: -0.25em
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;
}
legend {
margin-top: -0.2em;
margin-bottom: 1em;
margin-left: -0.5em;
}
fieldset, #IE8#HACK {
padding-top: 1.4em;
}
legend, #IE8#HACK {
margin-top: 0;
margin-bottom: 0;
}
textarea {
overflow: auto;
}
label {
position: relative;
top: -0.25em;
}
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;
}
}