/* * Scaffolding * Basic and global styles for generating a grid system, structural layout, and page templates * ------------------------------------------------------------------------------------------- */ // GRID SYSTEM // ----------- .row { .clearfix(); margin: 0 -20px; // Default columns .span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12, .span13, .span14, .span15, .span16 { float: left; margin-left: 20px; *display: inline; // IE6 double margin bug fix. } // Default columns .span1 { .columns(1); } .span2 { .columns(2); } .span3 { .columns(3); } .span4 { .columns(4); } .span5 { .columns(5); } .span6 { .columns(6); } .span7 { .columns(7); } .span8 { .columns(8); } .span9 { .columns(9); } .span10 { .columns(10); } .span11 { .columns(11); } .span12 { .columns(12); } .span13 { .columns(13); } .span14 { .columns(14); } .span15 { .columns(15); } .span16 { .columns(16); } // Offset column options .offset1 { .offset(1); } .offset2 { .offset(2); } .offset3 { .offset(3); } .offset4 { .offset(4); } .offset5 { .offset(5); } .offset6 { .offset(6); } .offset7 { .offset(7); } .offset8 { .offset(8); } .offset9 { .offset(8); } .offset10 { .offset(10); } .offset11 { .offset(11); } .offset12 { .offset(12); } } // STRUCTURAL LAYOUT // ----------------- html, body { background-color: #fff; } body { margin: 0; #font > .sans-serif(normal,@basefont,@baseline); color: @gray; text-rendering: optimizeLegibility; } // Container (centered, fixed-width layouts) div.container { width: 940px; margin: 0 auto; } // Fluid layouts (left aligned, with sidebar, min- & max-width content) div.container-fluid { padding: 0 20px; .clearfix(); div.sidebar { float: left; width: 220px; } div.content { min-width: 700px; max-width: 1180px; margin-left: 240px; } } // BASE STYLES // ----------- // Links a { color: @linkColor; text-decoration: none; line-height: inherit; font-weight: inherit; &:hover { color: @linkColorHover; text-decoration: underline; } } // Buttons .btn { // Button Base cursor: pointer; display: inline-block; #gradient > .vertical-three-colors(#fff, #fff, 0.25, darken(#fff, 10%)); padding: 5px 14px 6px; text-shadow: 0 1px 1px rgba(255,255,255,.75); color: #333; font-size: 13px; line-height: normal; border: 1px solid #ccc; border-bottom-color: #bbb; .border-radius(4px); @shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); .box-shadow(@shadow); &:hover { background-position: 0 -15px; color: #333; text-decoration: none; } // Transitions .transition(.1s linear all); // Colored Button Types &.primary, &.danger, &.danger:hover, &.primary:hover { color: #fff; } &.primary { .btnColoring(@blue, @blueDark) } &.danger { .btnColoring(lighten(@red, 15%), @red) } // Active and Disabled states &.disabled { cursor: default; background-image: none; .opacity(65); } &:disabled { // disabled pseudo can't be included with .disabled // def because IE8 and below will drop it ;_; cursor: default; background-image: none; .opacity(65); } &:active { @shadow: inset 0 3px 7px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.05); .box-shadow(@shadow); } // Button Sizes &.large { font-size: 16px; line-height: normal; padding: 9px 14px 9px; .border-radius(6px); } &.small { padding: 7px 9px 7px; font-size: 11px; } } // Help Firefox not be a jerk about adding extra padding to buttons button.btn, input[type=submit].btn { &::-moz-focus-inner { padding: 0; border: 0; } }