less-rails-liftkit 0.1

data/vendor/frameworks/lift/liftkit/responsive-fixed.less

@@ -0,0 +1,238 @@
+// Required for scaffolding
+@gridColumns:     16;
+@gridColumnWidth: 40px;
+@gridGutterWidth: 20px;
+@gridMarginWidth: 20px;
+@siteWidth:       (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
+
+// Center-align a block level element
+.center-blockcolumns() {
+	display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+// Grid System
+.fixed-container() {
+  width: @siteWidth;
+  margin-left: auto;
+  margin-right: auto;
+  .clearfix();
+}
+.columns(@columnSpan: 1) {
+  width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
+}
+
+// Necessary grid styles for every column to make them appear next to each other horizontally
+.gridColumn() {
+  display: inline;
+  float: left;
+  margin-left: @gridGutterWidth;
+}
+
+// makeColumn can be used to mark any element (e.g., .content-primary) as a column without changing markup to .span something
+.makeColumn(@columnSpan: 1) {
+  .gridColumn();
+  .columns(@columnSpan);
+}
+
+// Container (centered, fixed-width layouts)
+.container {
+  padding: 0 @gridMarginWidth;
+  .fixed-container();
+}
+
+// Fluid layouts (left aligned, with sidebar, min- & max-width content)
+.container-fluid {
+  position: relative;
+  min-width: 940px;
+  padding-left: 20px;
+  padding-right: 20px;
+  .clearfix();
+  > .sidebar {
+    float: left;
+    width: 220px;
+  }
+  // TODO in v2: rename this and .popover .content to be more specific
+  > .content {
+    margin-left: 240px;
+  }
+}
+
+.row {
+  .clearfix();
+  margin-left: -1 * @gridGutterWidth;
+}
+
+// Default columns
+.span1     { .gridColumn(); .columns(1); }
+.span2     { .gridColumn(); .columns(2); }
+.span3     { .gridColumn(); .columns(3); }
+.span4     { .gridColumn(); .columns(4); }
+.span5     { .gridColumn(); .columns(5); }
+.span6     { .gridColumn(); .columns(6); }
+.span7     { .gridColumn(); .columns(7); }
+.span8     { .gridColumn(); .columns(8); }
+.span9     { .gridColumn(); .columns(9); }
+.span10    { .gridColumn(); .columns(10); }
+.span11    { .gridColumn(); .columns(11); }
+.span12    { .gridColumn(); .columns(12); }
+.span13    { .gridColumn(); .columns(13); }
+.span14    { .gridColumn(); .columns(14); }
+.span15    { .gridColumn(); .columns(15); }
+.span16    { .gridColumn(); .columns(16); }
+.span17    { .gridColumn(); .columns(17); }
+.span18    { .gridColumn(); .columns(18); }
+.span19    { .gridColumn(); .columns(19); }
+.span20    { .gridColumn(); .columns(20); }
+.span21    { .gridColumn(); .columns(21); }
+.span22    { .gridColumn(); .columns(22); }
+.span23    { .gridColumn(); .columns(23); }
+.span24    { .gridColumn(); .columns(24); }
+
+@media (min-width: 800px) and (max-width: 960px) {
+
+  @scale: 1.25;
+  
+  // Recalculate widths
+  @siteWidth:       (@gridColumns * (@gridColumnWidth / @scale )) + ((@gridGutterWidth / @scale) * (@gridColumns - 1));
+
+  .columns(@columnSpan: 1) {
+    width: ((@gridColumnWidth / @scale ) * @columnSpan) + ((@gridGutterWidth / @scale) * (@columnSpan - 1));
+  }
+  .gridColumn() {
+    display: inline;
+    float: left;
+    margin-left: @gridGutterWidth / @scale;
+  }
+  .row {
+    .clearfix();
+    margin-left: -1 * (@gridGutterWidth / @scale);
+  }
+  .container {
+    width: @siteWidth;
+  }
+
+  // Recalculate column widths
+  .span1     { .gridColumn(); .columns(1); }
+  .span2     { .gridColumn(); .columns(2); }
+  .span3     { .gridColumn(); .columns(3); }
+  .span4     { .gridColumn(); .columns(4); }
+  .span5     { .gridColumn(); .columns(5); }
+  .span6     { .gridColumn(); .columns(6); }
+  .span7     { .gridColumn(); .columns(7); }
+  .span8     { .gridColumn(); .columns(8); }
+  .span9     { .gridColumn(); .columns(9); }
+  .span10    { .gridColumn(); .columns(10); }
+  .span11    { .gridColumn(); .columns(11); }
+  .span12    { .gridColumn(); .columns(12); }
+  .span13    { .gridColumn(); .columns(13); }
+  .span14    { .gridColumn(); .columns(14); }
+  .span15    { .gridColumn(); .columns(15); }
+  .span16    { .gridColumn(); .columns(16); }
+  .span17    { .gridColumn(); .columns(17); }
+  .span18    { .gridColumn(); .columns(18); }
+  .span19    { .gridColumn(); .columns(19); }
+  .span20    { .gridColumn(); .columns(20); }
+  .span21    { .gridColumn(); .columns(21); }
+  .span22    { .gridColumn(); .columns(22); }
+  .span23    { .gridColumn(); .columns(23); }
+  .span24    { .gridColumn(); .columns(24); }
+
+}
+
+@media (min-width: 480px) and (max-width: 800px) {
+
+  @scale: 1.66;
+  
+  // Recalculate widths
+  @siteWidth:       (@gridColumns * (@gridColumnWidth / @scale )) + ((@gridGutterWidth / @scale) * (@gridColumns - 1));
+
+  .columns(@columnSpan: 1) {
+    width: ((@gridColumnWidth / @scale ) * @columnSpan) + ((@gridGutterWidth / @scale) * (@columnSpan - 1));
+  }
+  .gridColumn() {
+    display: inline;
+    float: left;
+    margin-left: @gridGutterWidth / @scale;
+  }
+  .row {
+    .clearfix();
+    margin-left: -1 * (@gridGutterWidth / @scale);
+  }
+  .container {
+    width: @siteWidth;
+  }
+
+  // Recalculate column widths
+  .span1     { .gridColumn(); .columns(1); }
+  .span2     { .gridColumn(); .columns(2); }
+  .span3     { .gridColumn(); .columns(3); }
+  .span4     { .gridColumn(); .columns(4); }
+  .span5     { .gridColumn(); .columns(5); }
+  .span6     { .gridColumn(); .columns(6); }
+  .span7     { .gridColumn(); .columns(7); }
+  .span8     { .gridColumn(); .columns(8); }
+  .span9     { .gridColumn(); .columns(9); }
+  .span10    { .gridColumn(); .columns(10); }
+  .span11    { .gridColumn(); .columns(11); }
+  .span12    { .gridColumn(); .columns(12); }
+  .span13    { .gridColumn(); .columns(13); }
+  .span14    { .gridColumn(); .columns(14); }
+  .span15    { .gridColumn(); .columns(15); }
+  .span16    { .gridColumn(); .columns(16); }
+  .span17    { .gridColumn(); .columns(17); }
+  .span18    { .gridColumn(); .columns(18); }
+  .span19    { .gridColumn(); .columns(19); }
+  .span20    { .gridColumn(); .columns(20); }
+  .span21    { .gridColumn(); .columns(21); }
+  .span22    { .gridColumn(); .columns(22); }
+  .span23    { .gridColumn(); .columns(23); }
+  .span24    { .gridColumn(); .columns(24); }
+
+}
+
+@media (max-width: 480px) {
+  // Remove width from containers
+  .container {
+    width: auto;
+    padding: 0 15px;
+  }
+  // Undo negative margin on rows
+  .row {
+    margin-left: 0;
+  }
+  // Make all columns even
+  [class*="span"] {
+    float: none;
+    display: block;
+    width: auto;
+    margin: 0;
+  }
+  // Resize modals
+  .modal {
+    width: auto;
+    margin: 0;
+  }
+
+  // Remove the horizontal form styles
+  .form-horizontal .control-group > label {
+    float: none;
+    width: auto;
+    padding-top: 0;
+    text-align: left;
+  }
+  // Move over all input controls and content
+  .form-horizontal .controls {
+    margin-left: 0;
+  }
+  // Move the options list down to align with labels
+  .form-horizontal .control-list {
+    padding-top: 0; // has to be padding because margin collaspes
+  }
+  // Move over buttons in .form-actions to align with .controls
+  .form-horizontal .form-actions {
+    padding-left: 0;
+  }
+
+}

data/vendor/frameworks/lift/liftkit/responsive-fluid.less

@@ -0,0 +1,89 @@
+@siteWidth        : 940px;
+@gridWidth        : 100%;
+@siteMargin       : 20px;
+@gridColumns      : 16;
+@gridColumnWidth  : (@gridWidth / @gridColumns);
+
+.row {
+  width: 100%;
+	.clearfix();
+}
+
+.columns(@columnSpan: 1) {
+  width: (@gridColumnWidth * @columnSpan);
+}
+
+.span1     { .gridColumn(); .columns(1); }
+.span2     { .gridColumn(); .columns(2); }
+.span3     { .gridColumn(); .columns(3); }
+.span4     { .gridColumn(); .columns(4); }
+.span5     { .gridColumn(); .columns(5); }
+.span6     { .gridColumn(); .columns(6); }
+.span7     { .gridColumn(); .columns(7); }
+.span8     { .gridColumn(); .columns(8); }
+.span9     { .gridColumn(); .columns(9); }
+.span10    { .gridColumn(); .columns(10); }
+.span11    { .gridColumn(); .columns(11); }
+.span12    { .gridColumn(); .columns(12); }
+.span13    { .gridColumn(); .columns(13); }
+.span14    { .gridColumn(); .columns(14); }
+.span15    { .gridColumn(); .columns(15); }
+.span16    { .gridColumn(); .columns(16); }
+.span17    { .gridColumn(); .columns(17); }
+.span18    { .gridColumn(); .columns(18); }
+.span19    { .gridColumn(); .columns(19); }
+.span20    { .gridColumn(); .columns(20); }
+.span21    { .gridColumn(); .columns(21); }
+.span22    { .gridColumn(); .columns(22); }
+.span23    { .gridColumn(); .columns(23); }
+.span24    { .gridColumn(); .columns(24); }
+
+.gridColumn() {
+ display: inline;
+ float: left;
+ .box-sizing();
+}
+
+.container {
+  padding: 0 @siteMargin;
+}
+
+@media only screen and (min-width: 960px) {
+  .container {
+    width: @siteWidth;
+    .center-block();
+  }
+}
+
+@media only screen and (max-width: 400px) {
+  .container {
+    width: auto;
+  }
+  
+  .span1,
+  .span2,
+  .span3,
+  .span4,
+  .span5,
+  .span6,
+  .span7,
+  .span8,
+  .span9,
+  .span10,
+  .span11,
+  .span12,
+  .span13,
+  .span14,
+  .span15,
+  .span16,
+  .span17,
+  .span18,
+  .span19,
+  .span20,
+  .span21,
+  .span22,
+  .span23,
+  .span24 {
+    width: 100% !important;
+  }
+}

data/vendor/frameworks/lift/liftkit/scaffolding.less

@@ -0,0 +1,116 @@
+// Required for scaffolding
+@gridColumns:     16;
+@gridColumnWidth: 40px;
+@gridGutterWidth: 20px;
+@gridMarginWidth: 20px;
+@extraSpace:      (@gridGutterWidth * 2); // For our grid calculations
+@siteWidth:       (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
+
+//
+// Scaffoling
+
+// Center-align a block level element
+.center-blockcolumns() {
+	display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+// Grid System
+.fixed-container() {
+  width: @siteWidth;
+  margin-left: auto;
+  margin-right: auto;
+  .clearfix();
+}
+.columns(@columnSpan: 1) {
+  width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
+}
+.offset(@columnOffset: 1) {
+  margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @extraSpace;
+}
+
+// Necessary grid styles for every column to make them appear next to each other horizontally
+.gridColumn() {
+  display: inline;
+  float: left;
+  margin-left: @gridGutterWidth;
+}
+
+// makeColumn can be used to mark any element (e.g., .content-primary) as a column without changing markup to .span something
+.makeColumn(@columnSpan: 1) {
+  .gridColumn();
+  .columns(@columnSpan);
+}
+
+// Container (centered, fixed-width layouts)
+.container {
+  padding: 0 @gridMarginWidth;
+  .fixed-container();
+}
+
+.new-width(@columns, @removePixels){
+  width: ((@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1))) - @removePixels;
+}
+
+// Fluid layouts (left aligned, with sidebar, min- & max-width content)
+.container-fluid {
+  position: relative;
+  min-width: 940px;
+  padding-left: 20px;
+  padding-right: 20px;
+  .clearfix();
+  > .sidebar {
+    float: left;
+    width: 220px;
+  }
+  // TODO in v2: rename this and .popover .content to be more specific
+  > .content {
+    margin-left: 240px;
+  }
+}
+
+.row {
+  .clearfix();
+  margin-left: -1 * @gridGutterWidth;
+}
+
+// Default columns
+.span1,.s1     { .gridColumn(); .columns(1); }
+.span2,.s2     { .gridColumn(); .columns(2); }
+.span3,.s3     { .gridColumn(); .columns(3); }
+.span4,.s4     { .gridColumn(); .columns(4); }
+.span5,.s5     { .gridColumn(); .columns(5); }
+.span6,.s6     { .gridColumn(); .columns(6); }
+.span7,.s7     { .gridColumn(); .columns(7); }
+.span8,.s8     { .gridColumn(); .columns(8); }
+.span9,.s9     { .gridColumn(); .columns(9); }
+.span10,.s10    { .gridColumn(); .columns(10); }
+.span11,.s11    { .gridColumn(); .columns(11); }
+.span12,.s12    { .gridColumn(); .columns(12); }
+.span13,.s13    { .gridColumn(); .columns(13); }
+.span14,.s14    { .gridColumn(); .columns(14); }
+.span15,.s15    { .gridColumn(); .columns(15); }
+.span16,.s16    { .gridColumn(); .columns(16); }
+.span17,.s17    { .gridColumn(); .columns(17); }
+.span18,.s18    { .gridColumn(); .columns(18); }
+.span19,.s19    { .gridColumn(); .columns(19); }
+.span20,.s20    { .gridColumn(); .columns(20); }
+.span21,.s21    { .gridColumn(); .columns(21); }
+.span22,.s22    { .gridColumn(); .columns(22); }
+.span23,.s23    { .gridColumn(); .columns(23); }
+.span24,.s24    { .gridColumn(); .columns(24); }
+
+// Offset column options
+.offset1, .o1   { .offset(1); }
+.offset2, .o2   { .offset(2); }
+.offset3, .o3   { .offset(3); }
+.offset4, .o4   { .offset(4); }
+.offset5, .o5   { .offset(5); }
+.offset6, .o6   { .offset(6); }
+.offset7, .o7   { .offset(7); }
+.offset8, .o8   { .offset(8); }
+.offset9, .o9   { .offset(9); }
+.offset10, .o10  { .offset(10); }
+.offset11, .o11  { .offset(11); }
+.offset12, .o12  { .offset(12); }

data/vendor/frameworks/lift/liftkit/tables.less

@@ -0,0 +1,54 @@
+//
+// Tables
+
+// BASELINE STYLES
+// ---------------
+table {
+  color: @typeColor;
+  width: 100%;
+  margin-bottom: @basespace;
+  padding: 0;
+  border-spacing: 0;
+  border-collapse: separate; // Done so we can round those corners!
+  *border-collapse: collapse; /* IE7, collapse table to remove spacing */
+  font-size: @basesize;
+  border: 1px solid #ddd;
+  th, td {
+    padding: 10px 10px 9px;
+    line-height: @baseline;
+    text-align: left;
+  }
+  th {
+    padding-top: 9px;
+    font-weight: bold;
+    vertical-align: middle;
+    border-bottom: 1px solid #ddd;
+    color: @headerColor;
+  }
+  td {
+    vertical-align: top;
+  }
+  th + th,
+  td + td {
+    border-left: 1px solid #ddd;
+  }
+  tr + tr td {
+    border-top: 1px solid #ddd;
+  }
+}
+
+
+// ZEBRA-STRIPING
+// --------------
+
+// Default zebra-stripe styles (alternating gray and transparent backgrounds)
+.striped {
+  tbody {
+    tr:nth-child(odd) td {
+      background-color: #f9f9f9;
+    }
+    tr:hover td {
+      background-color: #f5f5f5;
+    }
+  }
+}