less-rails-liftkit 0.1

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

@@ -0,0 +1,401 @@
+@extraSpace:        (@gridGutterWidth * 2); // For our grid calculations
+
+/*
+ * 1. Corrects font size not being inherited in all browsers
+ * 2. Addresses margins set differently in IE6/7, FF3/4, S5, Chrome
+ * 3. Improves appearance and consistency in all browsers
+ */
+
+button,
+input,
+select,
+textarea {
+    font-size: 100%; /* 1 */
+    margin: 0; /* 2 */
+    vertical-align: baseline; /* 3 */
+    *vertical-align: middle; /* 3 */
+    -webkit-font-smoothing: antialiased;
+}
+
+/*
+ * Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet
+ */
+
+button,
+input {
+    line-height: normal; /* 1 */
+}
+
+/*
+ * 1. Improves usability and consistency of cursor style between image-type 'input' and others
+ * 2. Corrects inability to style clickable 'input' types in iOS
+ * 3. Corrects inner spacing displayed oddly in IE7 without effecting normal text inputs
+ *    Known issue: inner spacing remains in IE6
+ */
+
+button,
+input[type="button"], 
+input[type="reset"], 
+input[type="submit"] {
+    cursor: pointer; /* 1 */
+    *overflow: visible;  /* 3 */
+}
+
+/*
+ * 1. Addresses box sizing set to content-box in IE8/9
+ * 2. Addresses excess padding in IE8/9
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+}
+
+/*
+ * 1. Addresses appearance set to searchfield in S5, Chrome
+ * 2. Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof)
+ */
+
+input[type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    -moz-box-sizing: content-box;
+    -webkit-box-sizing: content-box; /* 2 */
+    box-sizing: content-box;
+}
+
+/*
+ * Corrects inner padding displayed oddly in S5, Chrome on OSX
+ */
+
+input[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+/*
+ * Corrects inner padding and border displayed oddly in FF3/4
+ * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+
+form {
+  margin: 0 0 @basespace;
+}
+
+// Groups of fields with labels on top (legends)
+fieldset {
+  margin: 0 0 @basespace;
+  padding: @basespace 0 0;
+  border: none;
+  
+  legend {
+    border: 0;
+    display: block;
+    font-size: @basesize * 1.5;
+    line-height: 1;
+    color: @typeColor;
+    padding: @basespace 0 0;
+    *margin-left: -10px;
+    *line-height: 1.5; /* IE6-7 */
+  }
+}
+
+// Parent element that clears floats and wraps labels and fields together
+form .field {
+  margin-bottom: @basespace;
+  margin-left: -1 * @gridGutterWidth;
+  .clearfix();
+}
+
+// Set font for forms
+label,
+input,
+select,
+textarea {
+  @basesize:  15px;
+  @baseline:  1.3;
+  @basefont:  Helvetica, Arial, sans-serif;
+}
+
+// Float labels left
+label {
+  padding-top: 5px;
+  font-size: @basesize;
+  line-height: @baseline;
+  text-align: right;
+  color: @typeColor;
+  .formColumns(3);
+}
+
+// Checkboxs and radio buttons
+input[type=checkbox],
+input[type=radio] {
+  cursor: pointer;
+}
+
+// Inputs, Textareas, Selects
+input,
+textarea,
+select,
+.uneditable-input {
+  display: inline-block;
+  padding: 7px 7px 6px;
+  font-size: @basesize - 1;
+  line-height: @baseline;
+  color: @typeColor;
+  border: 1px solid @grayLight;
+  .border-radius(3px);
+  .formColumns(5);
+}
+
+input[type=search]{
+  padding-right: 0;
+}
+
+/* mini reset for non-html5 file types */
+input[type=checkbox],
+input[type=radio] {
+  width: auto;
+  height: auto;
+  padding: 0;
+  margin: 2px 5px 0 0;
+  *margin-top: 0; /* IE6-7 */
+  line-height: normal;
+  border: none;
+}
+
+input[type=file] {
+  background-color: @white;
+  padding: initial;
+  border: initial;
+  line-height: initial;
+  .box-shadow(none);
+}
+
+select,
+input[type=file] {
+  height: @basespace * 1.5; // In IE7, the height of the select element cannot be changed by height, only font-size
+  line-height: @baseline * 1.5;
+  *margin-top: 4px; /* For IE7, add top margin to align select with labels */
+}
+
+// Make multiple select elements height not fixed
+select[multiple] {
+  height: inherit;
+}
+
+textarea {
+  overflow: auto;
+  vertical-align: top;
+  height: auto;
+}
+
+// Placeholder text gets special styles; can't be bundled together though for some reason
+:-moz-placeholder {
+  color: @grayLight;
+}
+::-webkit-input-placeholder {
+  color: @grayLight;
+}
+
+// Focus states
+input[type=text],
+textarea {
+  @transition: border linear .2s, box-shadow linear .2s;
+  .transition(@transition);
+  .box-shadow(inset 0 1px 3px rgba(0,0,0,.1));
+}
+input[type=text]:focus,
+textarea:focus {
+  outline: 0;
+  border-color: @gray;
+  @shadow: inset 0 1px 3px rgba(0,0,0,.1);
+  .box-shadow(@shadow);
+}
+input[type=file]:focus,
+input[type=checkbox]:focus,
+select:focus {
+  .box-shadow(none); // override for file inputs
+  outline: 1px dotted #666; // Selet elements don't get box-shadow styles, so instead we do outline
+}
+
+// Error styles
+form .field.error {
+  .border-radius(4px);
+  @error-text: desaturate(@danger, 25%);
+  > label {
+    color: @danger;
+  }
+  span.help-inline {
+    color: @danger;
+  }
+  input,
+  textarea {
+    border-color: @error-text;
+    &:focus {
+      border-color: darken(@error-text, 10%);
+    }
+  }
+}
+
+// Form element sizes
+
+// Grid style input sizes
+// This is a duplication of the main grid .columns() mixin, but subtracts 10px to account for input padding and border
+
+.formColumns(@columnSpan: 1) {
+  width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
+  display: inline;
+  float: left;
+  margin-left: @gridGutterWidth; 
+  .box-sizing();
+}
+
+.formOffset(@columnOffset: 1) {
+  margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @extraSpace;
+}
+
+.help-inline,
+label,
+input,
+textarea,
+select {
+  // Default columns
+  &.s0     { .formColumns(0); }
+  &.s1     { .formColumns(1); }
+  &.s2     { .formColumns(2); }
+  &.s3     { .formColumns(3); }
+  &.s4     { .formColumns(4); }
+  &.s5     { .formColumns(5); }
+  &.s6     { .formColumns(6); }
+  &.s7     { .formColumns(7); }
+  &.s8     { .formColumns(8); }
+  &.s9     { .formColumns(9); }
+  &.s10    { .formColumns(10); }
+  &.s11    { .formColumns(11); }
+  &.s12    { .formColumns(12); }
+  &.s13    { .formColumns(13); }
+  &.s14    { .formColumns(14); }
+  &.s15    { .formColumns(15); }
+  &.s16    { .formColumns(16); }
+}
+
+.help-inline,
+label,
+input,
+textarea,
+select {
+  // Default columns
+  &.o0     { .formOffset(0); }
+  &.o1     { .formOffset(1); }
+  &.o2     { .formOffset(2); }
+  &.o3     { .formOffset(3); }
+  &.o4     { .formOffset(4); }
+  &.o5     { .formOffset(5); }
+  &.o6     { .formOffset(6); }
+  &.o7     { .formOffset(7); }
+  &.o8     { .formOffset(8); }
+  &.o9     { .formOffset(9); }
+  &.o10    { .formOffset(10); }
+  &.o11    { .formOffset(11); }
+  &.o12    { .formOffset(12); }
+  &.o13    { .formOffset(13); }
+  &.o14    { .formOffset(14); }
+  &.o15    { .formOffset(15); }
+  &.o16    { .formOffset(16); }
+}
+
+// Disabled and read-only inputs
+input[disabled],
+select[disabled],
+textarea[disabled],
+input[readonly],
+select[readonly],
+textarea[readonly] {
+  background-color: #f9f9f9;
+  border-color: @grayLight;
+  cursor: not-allowed;
+}
+
+// Actions (the buttons)
+.actions {
+  .clearfix();
+  margin: 0 0 @basespace;
+  padding: (@basespace - 1) 0 @basespace;
+  border-top: 1px solid #ddd;
+  input[type="submit"],
+  input[type="button"],
+  button {
+    margin-right: @basespace/2;
+  }
+  .right {
+    float: right;
+    input[type="submit"],
+    input[type="button"],
+    button {
+      margin-right: 0;
+      margin-left: @basespace/2;
+    }
+  }
+}
+
+
+// Help Text
+.help-inline {
+  font-size: @basesize - 1;
+  line-height: @baseline;
+  color: @grayLight;
+  clear: both;
+  display: block;
+  padding-top: 5px;
+  .formOffset(3);
+  *position: relative; /* IE6-7 */
+  *top: -5px; /* IE6-7 */
+}
+
+
+form .field.stack {
+  label {
+    padding-bottom: @basespace / 3;
+    display: block;
+    text-align: left;
+  }
+}
+
+form.stacked .field {
+  label {
+    padding-bottom: @basespace / 3;
+    display: block;
+    width: 100%;
+    text-align: left;
+  }
+  
+  .help-inline {
+    .formOffset(0);
+  }
+  
+}
+
+.list {
+  .formColumns(5);
+  label {
+    .formColumns(5);
+    .clearfix();
+    text-align: left;
+    font-size: @basesize - 1;
+    margin-left: 0;
+    padding-left: 20px;
+  }
+  input {
+    margin: 2px 5px 0 -18px;
+  }
+  span {
+    display: block;
+  }
+}

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

@@ -0,0 +1,64 @@
+/*!
+ * Liftkit
+ * Copyright 2011 Lift Interactive
+ * Licensed under the Apache License v2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+
+@import "liftkit/core.less"; // Must import core.less
+@import "liftkit/scaffolding.less";
+@import "liftkit/type.less";
+@import "liftkit/tables.less";
+@import "liftkit/forms.less";
+@import "liftkit/buttons.less";
+@import "liftkit/alerts.less";
+@import "liftkit/navigation.less";
+
+@baseColor: #425eef;
+@typeColor: @grayDark;
+@headerColor: @grayDarker;
+@linkColor: #425eef;
+@linkColorHover: darken(@linkColor, 15);
+
+@black:             #000;
+@grayDarker:        lighten(@black, 10%);
+@grayDark:          lighten(@black, 25%);
+@gray:              lighten(@black, 50%);
+@grayLight:         lighten(@black, 75%);
+@grayLighter:       lighten(@black, 90%);
+@white:             #fff;
+
+@primary:           #425eef;
+@secondary:         #4297ef;
+@success:           #71b44c;
+@warning:           #f9b53f;
+@danger:            #da5444;
+
+// Font-Families
+@serif: Garamond, Georgia, Times, "Times New Roman", sans-serif;
+@sansserif: Helvetica, Arial, sans-serif;
+
+// Required for type, tables, forms
+@basesize:  15px;
+@baseline:  1.3;
+@basefont:  @sansserif;
+@baseheaderfont:  @sansserif;
+
+// Required for scaffolding & forms
+@gridColumns:     16;
+@gridColumnWidth: 40px;
+@gridGutterWidth: 20px;
+@gridMarginWidth: 20px;
+
+/*!
+ * Put your styles under here.
+ */
+
+
+body {
+  background: #ddd;
+}
+
+.container {
+  background: #fff;
+}

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

@@ -0,0 +1,34 @@
+.modal {
+  display: none;
+  width: 500px;
+  background: #fff;
+  padding: 15px 30px;
+  .border-radius(5px);
+  .box-shadow(0 3px 6px rgba(0,0,0,0.25));
+
+  a.close-modal {
+    position: absolute;
+    top: -14px;
+    right: -14px;
+    display: block;
+    width: 28px;
+    height: 28px;
+    text-indent: -9999px;
+    background: #333;
+    border: 2px solid #fff;
+    .border-radius(20px);
+    .box-shadow(0 1px 3px rgba(0,0,0,0.2));
+
+    &:before {
+      content: "×";
+      font-size: 27px;
+      color: #fff;
+      line-height: 0;
+      text-indent: 0px;
+      font-weight: bold;
+      position: absolute;
+      top: 11px;
+      left: 6px;
+    }
+  }
+}

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

@@ -0,0 +1,159 @@
+// 
+// Navigation
+
+// using display:inline-block; instead of float:left; in here. if you NEED floats, build a custom menu.
+
+.nav
+ {
+  margin: 0 0 @basespace;
+  padding: 0;
+  list-style: none;
+  .clearfix();
+  &.center {
+    text-align: center;
+  }
+  > li {
+    margin: 0;
+    display: inline-block;
+    position: relative;
+    > a {
+      display: block;
+    }
+  }
+  a {
+    display: block;
+    color: @linkColor;
+    padding: (@basespace/2) @basespace;
+    line-height: 1;
+    text-decoration: none;
+    .transition(all 0.3s ease-in-out);
+    .border-radius(3px);
+    &:hover {
+      text-decoration: none;
+      background-color: lighten(@black, 90%);
+    }
+  }
+  .active > a {
+    color: @white;
+    background: @linkColor;
+    text-shadow: 0 1px 1px rgba(0,0,0,.25);
+  }
+  
+  // dropdowns
+  li.dropdown {
+    ul {
+      top: @basespace;
+      left: -9999px;
+      height: 0;
+      overflow: hidden;
+      .opacity(0);
+      list-style-type: none;
+      padding: @basespace 0;
+      position: absolute;
+      .transition(opacity 0.3s ease-in-out);
+      a {
+        background: 0;
+        padding: (@basespace/4) @basespace;
+        white-space: nowrap;
+        &:hover {
+          color: @linkColorHover;
+        }
+      }
+    }
+    &:hover {
+      ul {
+        left: 0;
+        height: auto;
+        .opacity(100);
+      }
+      > a {
+        //  replicate hovered style here so it is retained as pointer goes down into the dropdown list
+      }
+    }
+  }
+  
+  
+  // Basic Tabs
+  &.tabs {
+    border-bottom: 1px solid @grayLighter;
+    > li {
+      position: relative; // For the dropdowns mostly
+      top: 1px;
+      > a {
+        padding: (@basespace / 1.5) @basespace;
+        display: inline-block;
+        border: 1px solid transparent;
+        .border-radius(4px 4px 0 0);
+        &:hover {
+          text-decoration: none;
+          background-color: #eee;
+        }
+      }
+      &.active > a {
+        color: @gray;
+        background-color: @white;
+        border: 1px solid #ddd;
+        border-bottom-color: transparent;
+        text-shadow: none;
+      }
+    }
+  }
+
+  // Basic pill nav
+  &.pills {
+    > li{
+      margin: 0;
+      &:first-child {
+        margin-left: -(@basesize/2);
+      }
+      > a {
+        margin: 0;
+        padding: (@basespace/2) @basespace;
+        text-shadow: 0 1px 1px @white;
+        .border-radius(@basespace+5);
+        &:hover {
+          text-decoration: none;
+          background-color: #eee;
+          border-color: #eee #eee #ddd;
+        }
+      }
+      &.active a {
+        background: @linkColor;
+        color: @white;
+        text-shadow: 0 1px 1px rgba(0,0,0,.25);
+      }
+    }
+  }
+
+  &.vert {
+    a {
+      padding: @basespace/2;
+      .transition(0.25s);
+      
+      &:hover {
+        .transition(0s);
+      }
+    }
+    
+    li{
+      display: block;
+      ul {
+        margin: 0 0 0 20px;
+        padding: 0;
+      }
+    }
+    &.focused {
+      > li {
+        ul {
+          display: none;
+        }
+        &.active {
+          ul { 
+            display: block;
+          }
+        }
+      }
+    }
+  }
+  
+}