// @doc off // The blueprint IE mixins should be mixed into a stylesheet that gets conditionally included // into IE like so: // <!–[if lt IE 8]><link rel=“stylesheet” href=“ie.css” // type=“text/css” media=“screen, projection”>–> // @doc on
//| Usage Examples //| ————– //| //| As a top-level mixin, apply to any page that includes the stylesheet: //| <pre class=“source-code sass”> //| +blueprint-ie //| </pre> //| Scoped by a presentational class: //| <pre class=“source-code sass”> //| body.blueprint //| +blueprint-ie(true) //| </pre> //| Scoped by semantic selectors: //| <pre class=“source-code sass”> //| body#page-1, body#page-2, body.a-special-page-type //| +blueprint-ie(true) //| </pre> //| Deprecated: You can pass the body selector as the first argument when used as a top-level mixin //| <pre class=“source-code sass”> //| +blueprint-ie(“body#page-1, body#page-2, body.a-special-page-type”) //| </pre> @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; } } }
@mixin blueprint-ie-body {
text-align: center; @include blueprint-ie-hacks; }
@mixin blueprint-ie-hacks {
* html & { legend { margin: 0px -8px 16px 0; padding: 0; } } html>& { p code { *white-space: normal; } } }
// Fixes for Blueprint “inline” forms in IE @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; } } }
@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; } }