Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

_box.scss needs to be wrapped in a mixin #125

Open
stubbornella opened this Issue · 0 comments

2 participants

@stubbornella
Owner

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.
            }
        } 
    }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.