e35ebb8046
Author: Christian Montoya <sirokai@gmail.com>
Date: Wed Sep 29 16:43:55 2010 -0400
Fixed IE label alignment issue
112 lines
2.7 KiB
SCSS
112 lines
2.7 KiB
SCSS
// @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"><![endif]-->
|
|
// @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($nested: false) {
|
|
@if $nested {
|
|
@include blueprint-ie-body;
|
|
@include blueprint-ie-defaults;
|
|
} @else {
|
|
body { @include blueprint-ie-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; }
|
|
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; }
|
|
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; } }
|