_box.scss needs to be wrapped in a mixin

[Nicole Sullivan]

Hey Fi,

_box.scss needs to be wrapped in a mixin so that the CSS it generates is only included if invoked. See the example below to see roughly how it should work.

Notice that it takes a parameter $ie-corner-tag which lets the mixin know if it needs to generate the code for '''' tags for rounded corners in IE8 and older. It defaults to false because we want to discourage people from forcing rounding in older browsers.

$ie-corner-tags should be set in a variables file.

    @import "compass/utilities/general/hacks";
    @import "utils/clearfix-me";
    @import "compass/css3/border-radius";

    @mixin oobox($ie-corner-tag: false){ // can be any HTML tag including; div, b, span, etc.
        // Box structure
        .box {
            .box-head,.box-body,.box-foot{
                //@include clearfix-me(micro);
                border: 1px solid red;//debug
                @include clearfix-me(micro);
            }
            @if $ie-corner-tag { // this code only ever executes if you want rounded corners in IE<8. Better without.
                %corners-and-wrappers {
                    display:block;
                    background-repeat:no-repeat;
                    font-size:1%; // make sure IE doesn't get "helpful" and increase the box size to match the font-size
                    position:relative;
                    z-index:10;
                }
                %corner {
                    @extend %corners-and-wrappers;
                    height:10px; 
                    width:10px;
                }
                %corner-right {
                    float:right;
                }
                %corner-left {
                    float:left;
                }
                %corner-top {
                    overflow:hidden;
                    margin-bottom:-32000px;// margin bottom needs to be < -9px 
                }
                %corner-bottom {
                    margin-top:-10px;
                }
                .tl{background-position: left top;
                    @extend %corner;
                    @extend %corner-left;
                    @extend %corner-top;
                }
                .tr{
                    background-position: right top;
                    @extend %corner;
                    @extend %corner-right;
                    @extend %corner-top;
                }
                .bl {
                    background-position: left bottom;
                    @extend %corner;
                    @extend %corner-left;
                    @extend %corner-bottom;
                }
                .br {background-position: right bottom;
                    @extend %corner;
                    @extend %corner-right;
                    @extend %corner-bottom;
                }
                .top{
                    background-position:center top;
                    @extend %corners-and-wrappers;
                }
                .bottom{
                    background-position:center bottom;
                    _zoom:1; // zoom required for IE5.5 only
                    @extend %corners-and-wrappers;
                }
            }
        }
        @if $ie-corner-tag {
            .complex { // need images for borders. (you probably don't, think borders, inner and outer multiple shadows)
                //@extend .box; can't extend, output is too large. Use multiple classes
                overflow:hidden;
                *position:relative; //required for IE7, 6, 5.5
                *zoom:1; //required for IE7, 6, 5.5
                %corner-top {
                    height:32000px; 
                    margin-bottom:-32000px;
                    width:10px;
                }
                .top,.bottom {
                    height: 5px;
                }
            }
            .pop { // transparent on the outside
                //@extend .box; Can't extend, use multiple classes
                overflow:visible;
                margin: 10px 20px 20px 10px; 
                background-position:left top;
                .inner {
                    right:-10px; 
                    bottom:-10px; 
                    background-position:right bottom;
                    padding:0 10px 10px 0;
                }
                .tl, .br {
                    display:none;
                }
                .bl {
                    bottom: -10px;
                }
                .tr{
                    float:right;
                    margin-right:-10px;
                    _display:inline; //fix double margin bug 
                }
                    }
                }

        // Box skins
    
        /* ----- simple (extends box) ----- */
        
        .box-simple {
            border:1px solid #D7D7D7;
            @include border-radius(7px);
            @if $ie-corner-tag {
                b {background-image:url(skin/simple_corners.png)\9;}
                @warn "You will need to include the class 'box' in your HTML whenever you use a box style because you have $ie-corner-tag enabled. Consider defaulting to square corners for IE6, 7, and 8.";
            } @else {
                //@extend .box; // even this is too damn long... a site with 20 boxes will have a whole pile of stupid css.
            }
        } 
    }