initial commit

lib/scaffolding.less

@@ -0,0 +1,204 @@
+/*
+ * 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
+// -----------------
+
+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 {
+  #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;
+  }
+}