FIX: @primaryButton and Sidebar Variable Updates

Created by: jackieshaffer

Currently there is only a dummy @primaryButtonColor variable in variables.less, however it is not called from patterns.less. This updates patterns.less to pull from primaryButton Variable color

Sidebar width is currently statically set at 240px; Added a new variable @sidebarWidth; to allow user to specify sidebar width; Scaffolding.less has been updated to use @gridGutterWidth variable instead of the 20px static.

I also wanted to make sure the width of the sidebar stayed true to the width set by the variable So the content div will contract for padding/gutters and not the sidebar (as it is currently set to).

For example, if you set your sidebar width to 300px and place a 300px wide ad in the sidebar, I wanted to make sure the sidebar inner width was actually 300px and not 280px, which it will do now.

lib/patterns.less

@@ -408,7 +408,7 @@ footer {
   // Primary Button Type
   &.primary {
     color: @white;
-    .gradientBar(@blue, @blueDark)
+    .gradientBar(@primaryButtonColor, darken(@primaryButtonColor, 10%))
   }
 
    // Transitions

lib/scaffolding.less

@@ -25,25 +25,25 @@ body {
 .fluid-container {
   position: relative;
   min-width: 940px;
-  padding-left: 20px;
-  padding-right: 20px;
+  padding-left: @gridGutterWidth;
+  padding-right: @gridGutterWidth;
   .clearfix();
 }
 // Sidebars (left and right options)
 .fluid-sidebar-left,
 .fluid-sidebar-right {
-  width: 220px;
+  width: @sidebarWidth;
 }
 .fluid-sidebar-left   { float: left; }
 .fluid-sidebar-right  { float: right; }
 // The main content area
 .fluid-content {
-  margin-left: 240px;
+  margin-left: @sidebarWidth;
 }
 // Reverse layout for sidebar on right
 .fluid-container.reverse .fluid-content {
   margin-left: 0;
-  margin-right: 240px;
+  margin-right: (@sidebarWidth + @gridGutterWidth);
 }
 
 

lib/variables.less

@@ -42,6 +42,7 @@
 @gridColumnWidth:   60px;
 @gridGutterWidth:   20px;
 @siteWidth:         (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
+@sidebarWidth:      240px;
 
 
 // THEME VARIABLES