flatui-rails-less 1.0

data/vendor/assets/stylesheets/modules/dropdown.less

@@ -0,0 +1,249 @@
+//
+// Dropdown
+// --------------------------------------------------
+
+.dropdown-menu {
+  background-color: @dropdown-background;
+  border: none;
+  display: block;
+  margin-top: 8px;
+  opacity: 0;
+  padding: 0;
+  visibility: hidden;
+  width: 100%;
+  .box-shadow(none);
+  .transition(.25s);
+
+  // Typeahead
+  // ---------
+  &.typeahead {
+    display: none;
+    opacity: 1;
+    visibility: visible;
+    width: auto;
+    margin-top: 5px;    
+    border: 2px solid @brand-secondary;
+    padding: 5px 0;
+    background-color: @inverse;
+    border-radius: @border-radius-large;
+
+    li {
+      a {
+        padding: 6px 14px;
+      }
+      &:first-child,
+      &:last-child {
+        a {
+          padding: 6px 14px;
+          border-radius: 0;
+        }
+      }
+    }
+  }
+
+  // Opened state
+  .open > & {
+    margin-top: 18px !important;
+    opacity: 1;
+    visibility: visible;
+  }
+  li {
+    &:first-child {
+      dt + a {
+        border-radius: 0;
+      }
+      > a {
+        border-radius: @border-radius-large @border-radius-large 0 0;
+        padding-top: 8px;
+      }
+    }
+
+    &:last-child {
+      > a {
+        border-radius: 0 0 @border-radius-large @border-radius-large;
+        padding-bottom: 10px;
+      }
+    }
+
+    &.active,
+    &.selected {
+      > a,
+      > a.highlighted {
+        background: @brand-secondary;
+        color: @inverse;
+
+        &:hover,
+        &:focus {
+          background: mix(@brand-secondary, black, 85%);
+          color: @inverse;
+        }
+      }
+    }
+    > a {
+      color: fade(@brand-primary, 75%);
+      padding: 6px 15px 8px;
+      text-decoration: none;
+      .clearfix();
+      .transition(background-color .25s);
+
+      &:hover,
+      &:active,
+      &:focus {
+        background: mix(@inverse, @brand-primary, 85%);
+        color: inherit;
+        outline: none;
+      }
+
+      &.highlighted {
+        background: mix(@inverse, @brand-primary, 73.5%);
+        color: @inverse;
+
+        &:hover,
+        &:focus {
+          background: mix(@inverse, @brand-primary, 66%);
+          color: @inverse;
+        }
+      }
+
+      &:before {
+        float: right;
+        margin-top: 3px;
+      }
+    }
+
+    // Submenu title
+    dt {
+      font-weight: 300;
+      margin-bottom: 3px;
+      margin-top: 12px;
+      padding: 0 15px;
+    }
+  }
+  @media (max-width: 480px) {
+    & {
+      border-radius: 0 0 @border-radius-large @border-radius-large !important;
+    }
+  }
+}
+
+// Dropdown expands to top
+.dropup,
+.navbar-fixed-bottom .dropdown {
+  .dropdown-menu {
+    margin-bottom: 8px;
+  }
+  .dropdown-arrow {
+    border-bottom: none;
+    border-top: 8px outset mix(@inverse, @brand-primary, 94%);
+    bottom: 100%;
+    top: auto;
+  }
+}
+
+// Second level nav
+.navbar-fixed-bottom .nav > li > ul:before {
+  border-bottom: none;
+  border-top: 9px outset @brand-primary;
+  bottom: 4px;
+  top: auto;
+}
+
+.open {
+  &.dropup {
+    > .dropdown-menu {
+      margin-bottom: 18px;
+    }
+    > .dropdown-arrow {
+      margin-bottom: 10px;
+
+      &.dropdown-arrow-inverse {
+        border-top-color: @brand-primary;
+      }
+    }
+  }
+  > .dropdown-arrow {
+    margin-top: 9px;
+    opacity: 1;
+  }
+}
+
+// Arrows
+// --------------------------------------------------
+.dropdown-arrow {
+  border-style: solid;
+  border-width: 0 9px 9px 9px;
+  border-color: transparent transparent mix(@inverse, @brand-primary, 94%) transparent;
+  height: 0;
+  margin-top: 0;
+  opacity: 0;
+  position: absolute;
+  right: 13px;
+  top: 100%;
+  width: 0;
+  z-index: 10;
+  -webkit-transform: rotate(360deg); // Make corners smooth
+  .transition(.25s);
+}
+
+// Alternate Color
+// --------------------------------------------------
+.dropdown-inverse {
+  background-color: @brand-primary;
+  color: mix(@inverse, black, 80%);
+  padding: 4px 0 6px;
+
+  li {
+    margin: 0 4px -2px;
+    &:first-child,
+    &:last-child {
+      > a {
+        border-radius: 2px;
+        padding-bottom: 7px;
+        padding-top: 5px;
+      }
+      dt + a {
+        border-radius: 2px;
+      }
+    }
+
+    &.active,
+    &.selected {
+      > a {
+        background: @brand-secondary;
+        color: @inverse;
+        position: relative;
+        z-index: 1;
+      }
+    }
+    dt {
+      padding-left: 11px;
+      padding-right: 11px;
+    }
+    .divider {
+      margin-left: 11px;
+      margin-right: 11px;
+    }
+    > a {
+      border-radius: 2px;
+      color: @inverse;
+      padding: 5px 11px 7px;
+
+      &:hover,
+      &:active,
+      &:focus {
+        background: mix(@brand-primary, black, 85%);
+      }
+      &.highlighted {
+        background: mix(@brand-primary, @inverse, 85%);
+        &:hover,
+        &:focus {
+          background: mix(@brand-primary, @inverse, 75%);
+        }
+      }
+    }
+    .divider {
+      background-color: mix(@brand-primary, white, 85%);
+      border-bottom-color: mix(@brand-primary, white, 85%);
+    }
+  }
+}

data/vendor/assets/stylesheets/modules/footer.less

@@ -0,0 +1,76 @@
+//
+// Footer
+// --------------------------------------------------
+
+footer {
+  background-color: mix(@brand-primary, @inverse, 9%);
+  color: mix(@brand-primary, @inverse, 34%);
+  font-size: 15px;
+  padding: 0;
+
+  a {
+    color: mix(@brand-primary, @inverse, 50%);
+    font-weight: 700;
+  }
+  p {
+    font-size: 15px;
+    line-height: 20px;
+    margin-bottom: 10px;
+  }  
+}
+
+.footer-title {
+  margin: 0 0 22px;
+  padding-top: 21px;
+  font-size: 24px;
+  line-height: 40px;
+}
+
+.footer-brand {
+  display: block;
+  margin-bottom: 26px;
+  width: 220px;
+
+  img {
+    width: 216px;
+  }  
+}
+
+// FOOTER BANNER
+// ----------------------
+.footer-banner {
+  background-color: @brand-secondary;
+  color: mix(@brand-secondary, @inverse, 20%);
+  margin-left: 42px;
+  min-height: 316px;
+  padding: 0 30px 30px;
+
+  .footer-title {
+    color: @inverse;
+  }
+  a {
+    color: lighten(@brand-secondary, 42%);
+    text-decoration: underline;
+    
+    &:hover {
+      text-decoration: none;
+    }  
+  }
+  ul {
+    list-style-type: none;
+    margin: 0 0 26px;
+    padding: 0;
+
+    li {
+      border-top: 1px solid lighten(@brand-secondary, 2%);
+      line-height: 19px;
+      padding: 6px 0;
+      
+      &:first-child {
+        border-top: none;
+        padding-top: 1px;
+      }  
+    }    
+  }      
+}
+

data/vendor/assets/stylesheets/modules/forms.less

@@ -0,0 +1,127 @@
+//
+// Forms
+// --------------------------------------------------
+
+// Textarea
+textarea {
+  font-size: ceil(@font-size-base * 1.071); // ~15px
+  line-height: 24px;
+  padding: 5px 11px;
+}
+
+// Label
+label {
+	font-weight: normal;
+	line-height: @line-height-base * 1.1605em; // ~20px
+}
+
+// Placeholder
+//
+// Placeholder text gets special styles because when browsers invalidate entire
+// lines if it doesn't understand a selector/
+.form-control {
+  .placeholder(desaturate(lighten(@brand-primary, 45%), 15%));
+}
+
+// Common form controls
+//
+// Shared size and type resets for form controls. Apply `.form-control` to any
+// of the following form controls:
+//
+// select
+// textarea
+// input[type="text"]
+// input[type="password"]
+// input[type="datetime"]
+// input[type="datetime-local"]
+// input[type="date"]
+// input[type="month"]
+// input[type="time"]
+// input[type="week"]
+// input[type="number"]
+// input[type="email"]
+// input[type="url"]
+// input[type="search"]
+// input[type="tel"]
+// input[type="color"]
+
+.form-control {
+  border: 2px solid @gray-light;
+  color: @brand-primary;
+  font-family: @font-family-base;
+  font-size: @input-font-size-base;
+  padding: 8px 12px;
+  height: 42px;
+  -webkit-appearance: none;
+  border-radius: @input-border-radius;
+  .box-shadow(none);
+  .transition(~"border .25s linear, color .25s linear, background-color .25s linear");
+
+  // Customize the `:focus` state
+  .form-control-focus();
+
+	// Disabled and read-only inputs
+  // Note: HTML5 says that controls under a fieldset > legend:first-child won't
+  // be disabled if the fieldset is disabled. Due to implementation difficulty,
+  // we don't honor that edge case; we style them as disabled anyway.
+  &[disabled],
+  &[readonly],
+  fieldset[disabled] & {
+    background-color: @input-bg-disabled;
+	  border-color: mix(@gray, white, 40%);
+	  color: mix(@gray, white, 40%);
+	  cursor: default;
+  }  
+  
+  // Flat (without border)
+  &.flat {
+    border-color: transparent;
+    
+    &:hover {
+      border-color: @gray-light;
+    }
+    &:focus {
+      border-color: @brand-secondary;
+    }
+  }
+}
+
+// Form control sizing
+.input-sm {
+  .input-size(@input-height-small; 6px; 10px; @input-font-size-sm; @line-height-base);
+}
+
+.input-lg {
+  .input-size(@input-height-large; 10px; 15px; @input-font-size-lg; @line-height-base);
+}
+
+.input-hg {
+	.input-size(@input-height-huge; 10px; 16px; @input-font-size-hg; @line-height-base);
+}
+
+// Form control feedback states
+//
+// Apply contextual and semantic states to individual form controls.
+
+// Warning
+.has-warning {
+  .form-control-validation(@brand-warning; @brand-warning);
+}
+// Error
+.has-error {
+  .form-control-validation(@brand-danger; @brand-danger);
+}
+// Success
+.has-success {
+  .form-control-validation(@brand-success; @brand-success);
+}
+
+// Form groups
+//
+// Designed to help with the organization and spacing of vertical forms. For
+// horizontal forms, use the predefined grid classes.
+
+.form-group {
+	position: relative;
+  margin-bottom: 20px;
+}