scaffolding.less 4.05 KiB
/*
 * Scaffolding
 * Basic and global styles for generating a grid system, structural layout, and page templates
 * ------------------------------------------------------------------------------------------- */
// GRID SYSTEM
// -----------
.row {
  .clearfix();
  margin-left: -20px;
  // Default columns
  .span1,
  .span2,
  .span3,
  .span4,
  .span5,
  .span6,
  .span7,
  .span8,
  .span9,
  .span10,
  .span11,
  .span12,
  .span13,
  .span14,
  .span15,
  .span16 {
    display: inline;
    float: left;
    margin-left: 20px;
  // 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(9); }
  .offset10  { .offset(10); }
  .offset11  { .offset(11); }
  .offset12  { .offset(12); }
// STRUCTURAL LAYOUT
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
// ----------------- html, body { background-color: #fff; } body { margin: 0; #font > .sans-serif(normal,@basefont,@baseline); color: @gray; text-rendering: optimizeLegibility; } // Container (centered, fixed-width layouts) .container { width: 940px; margin: 0 auto; } // Fluid layouts (left aligned, with sidebar, min- & max-width content) .container-fluid { padding: 0 20px; .clearfix(); .sidebar { float: left; width: 220px; } .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 { display: inline-block; #gradient > .vertical-three-colors(#fff, #fff, 0.25, darken(#fff, 10%)); padding: 4px 14px; text-shadow: 0 1px 1px rgba(255,255,255,.75); color: #333; font-size: 13px; line-height: @baseline; 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; } } .primary {
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205
#gradient > .vertical(#049CDB, #0064CD); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.25); border: 1px solid darken(#0064CD, 10%); border-bottom-color: darken(#0064CD, 15%); &:hover { color: #fff; } } .btn { //.button(#1174C6); .transition(.1s linear all); &.primary { //#gradient > .vertical(@blue, @blueDark); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.25); border-color: @blueDark @blueDark darken(@blueDark, 15%); border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%); &:hover { color: #fff; } } &.large { font-size: 16px; line-height: 28px; .border-radius(6px); } &.small { padding-right: 9px; padding-left: 9px; font-size: 11px; } &.disabled { background-image: none; .opacity(65); cursor: default; .box-shadow(none); } // this can't be included with the .disabled def because IE8 and below will drop it ;_; &:disabled { background-image: none; .opacity(65); cursor: default; .box-shadow(none); &.primary { color: #fff; } } &:active { @shadow: inset 0 3px 7px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); .box-shadow(@shadow); } } // 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; } }