Skip to content
Browse files

what i have so far

  • Loading branch information...
1 parent cc8dc0f commit d3a3177ea89cd3242ced1c38e357f70f533444a9 @jperrine committed Mar 28, 2012
Showing with 5,522 additions and 4 deletions.
  1. +1 −0 .gitignore
  2. +1 −0 Procfile
  3. +8 −3 project.clj
  4. +69 −0 public/css/lib/alerts.less
  5. +63 −0 public/css/lib/bootstrap.less
  6. +22 −0 public/css/lib/breadcrumbs.less
  7. +117 −0 public/css/lib/button-groups.less
  8. +116 −0 public/css/lib/buttons.less
  9. +18 −0 public/css/lib/close.less
  10. +18 −0 public/css/lib/component-animations.less
  11. +103 −0 public/css/lib/dropdowns.less
  12. +484 −0 public/css/lib/forms.less
  13. +16 −0 public/css/lib/labels.less
  14. +353 −0 public/css/lib/mixins.less
  15. +64 −0 public/css/lib/modals.less
  16. +256 −0 public/css/lib/navbar.less
  17. +338 −0 public/css/lib/navs.less
  18. +25 −0 public/css/lib/pager.less
  19. +52 −0 public/css/lib/pagination.less
  20. +30 −0 public/css/lib/patterns.less
  21. +49 −0 public/css/lib/popovers.less
  22. +18 −0 public/css/lib/print.less
  23. +95 −0 public/css/lib/progress-bars.less
  24. +149 −0 public/css/lib/reset.less
  25. +259 −0 public/css/lib/responsive.less
  26. +113 −0 public/css/lib/scaffolding.less
  27. +118 −0 public/css/lib/sprites.less
  28. +184 −0 public/css/lib/tables.less
  29. +86 −0 public/css/lib/thumbnails.less
  30. +35 −0 public/css/lib/tooltip.less
  31. +223 −0 public/css/lib/type.less
  32. +23 −0 public/css/lib/utilities.less
  33. +70 −0 public/css/lib/variables.less
  34. +17 −0 public/css/lib/wells.less
  35. +106 −0 public/js/README.md
  36. +86 −0 public/js/bootstrap-alert.js
  37. +98 −0 public/js/bootstrap-button.js
  38. +131 −0 public/js/bootstrap-carousel.js
  39. +135 −0 public/js/bootstrap-collapse.js
  40. +83 −0 public/js/bootstrap-dropdown.js
  41. +205 −0 public/js/bootstrap-modal.js
  42. +95 −0 public/js/bootstrap-popover.js
  43. +114 −0 public/js/bootstrap-scrollspy.js
  44. +125 −0 public/js/bootstrap-tab.js
  45. +270 −0 public/js/bootstrap-tooltip.js
  46. +47 −0 public/js/bootstrap-transition.js
  47. +241 −0 public/js/bootstrap-typeahead.js
  48. +9 −0 public/js/less-1.2.0.min.js
  49. +6 −0 src/jimmyapi/controllers/images.clj
  50. +22 −1 src/jimmyapi/core.clj
  51. +29 −0 src/jimmyapi/models/image.clj
  52. +16 −0 src/jimmyapi/models/migration.clj
  53. +24 −0 src/jimmyapi/views/images.clj
  54. +52 −0 src/jimmyapi/views/layout.clj
  55. +35 −0 src/jimmyapi/views/utils.clj
View
1 .gitignore
@@ -6,3 +6,4 @@
/.lein-failures
/checkouts
/.lein-deps-sum
+/.env
View
1 Procfile
@@ -0,0 +1 @@
+web: lein run -m jimmyapi.core
View
11 project.clj
@@ -1,3 +1,8 @@
-(defproject jimmyapi "1.0.0-SNAPSHOT"
- :description "FIXME: write description"
- :dependencies [[org.clojure/clojure "1.3.0"]])
+(defproject jimmyapi "0.0.1"
+ :description "Funny picture API"
+ :dependencies [[org.clojure/clojure "1.3.0"]
+ [compojure "1.0.1"]
+ [ring/ring-jetty-adapter "1.0.1"]
+ [hiccup "0.3.8"]
+ [org.clojure/java.jdbc "0.1.1"]
+ [postgresql/postgresql "8.4-702.jdbc4"]])
View
69 public/css/lib/alerts.less
@@ -0,0 +1,69 @@
+// ALERT STYLES
+// ------------
+
+// Base alert styles
+.alert {
+ position: relative;
+ padding: 8px 35px 8px 14px;
+ margin-bottom: @baseLineHeight;
+ text-shadow: 0 1px 0 rgba(255,255,255,.5);
+ background-color: #fcf8e3;
+ border: 1px solid #f3edd2;
+ .border-radius(4px);
+}
+.alert,
+.alert-heading {
+ color: #c09853;
+}
+
+// Adjust close link position
+.alert > .close {
+ *margin-top: 3px; /* IE7 spacing */
+ margin-right: -21px;
+}
+
+// Alternate styles
+// ----------------
+
+.alert-success {
+ background-color: #dff0d8;
+ border-color: #cfe8c4;
+}
+.alert-success,
+.alert-success .alert-heading {
+ color: #468847;
+}
+.alert-danger,
+.alert-error {
+ background-color: #f2dede;
+ border-color: #e9c7c7;
+}
+.alert-danger,
+.alert-error,
+.alert-danger .alert-heading,
+.alert-error .alert-heading {
+ color: #B94A48;
+}
+.alert-info {
+ background-color: #d9edf7;
+ border-color: #bfe1f2;
+}
+.alert-info,
+.alert-info .alert-heading {
+ color: #3a87ad;
+}
+
+
+// Block alerts
+// ------------------------
+.alert-block {
+ padding-top: 14px;
+ padding-bottom: 14px;
+}
+.alert-block > p,
+.alert-block > ul {
+ margin-bottom: 0;
+}
+.alert-block p + p {
+ margin-top: 5px;
+}
View
63 public/css/lib/bootstrap.less
@@ -0,0 +1,63 @@
+/*!
+ * Bootstrap @VERSION
+ *
+ * Copyright 2012 Twitter, Inc
+ * Licensed under the Apache License v2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Designed and built with all the love in the world @twitter by @mdo and @fat.
+ * Date: @DATE
+ */
+
+// CSS Reset
+@import "reset.less";
+
+// Core variables and mixins
+@import "variables.less"; // Modify this for custom colors, font-sizes, etc
+@import "mixins.less";
+
+// Grid system and page structure
+@import "scaffolding.less";
+
+// Base CSS
+@import "type.less";
+@import "forms.less";
+@import "tables.less";
+
+// Patterns
+@import "patterns.less";
+
+// Components: common
+@import "sprites.less";
+@import "dropdowns.less";
+@import "wells.less";
+@import "component-animations.less";
+@import "close.less";
+
+// Components: Nav
+@import "navbar.less";
+@import "navs.less";
+@import "breadcrumbs.less";
+@import "pagination.less";
+@import "pager.less";
+
+// Components: Popovers
+@import "modals.less";
+@import "tooltip.less";
+@import "popovers.less";
+
+// Components: Buttons & Alerts
+@import "buttons.less";
+@import "button-groups.less";
+@import "alerts.less"; // Note: alerts share common CSS with buttons and thus have styles in buttons.less
+
+// Components: Misc
+@import "thumbnails.less";
+@import "labels.less";
+@import "progress-bars.less";
+
+// Utility classes
+@import "utilities.less"; // Has to be last to override when necessary
+
+// Responsive
+@import "responsive.less";
View
22 public/css/lib/breadcrumbs.less
@@ -0,0 +1,22 @@
+// BREADCRUMBS
+// -----------
+
+.breadcrumb {
+ padding: 7px 14px;
+ margin: 0 0 @baseLineHeight;
+ #gradient > .vertical(#ffffff, #f5f5f5);
+ border: 1px solid #ddd;
+ .border-radius(3px);
+ .box-shadow(inset 0 1px 0 @white);
+ li {
+ display: inline;
+ text-shadow: 0 1px 0 @white;
+ }
+ .divider {
+ padding: 0 5px;
+ color: @grayLight;
+ }
+ .active a {
+ color: @grayDark;
+ }
+}
View
117 public/css/lib/button-groups.less
@@ -0,0 +1,117 @@
+// BUTTON GROUPS
+// -------------
+
+
+// Make the div behave like a button
+.btn-group {
+ position: relative;
+ .clearfix(); // clears the floated buttons
+}
+
+// Space out series of button groups
+.btn-group + .btn-group {
+ margin-left: 5px;
+}
+
+// Optional: Group multiple button groups together for a toolbar
+.btn-toolbar {
+ .btn-group {
+ display: inline-block;
+ }
+}
+
+// Float them, remove border radius, then re-add to first and last elements
+.btn-group .btn {
+ position: relative;
+ float: left;
+ margin-left: -1px;
+ .border-radius(0);
+}
+// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
+.btn-group .btn:first-child {
+ margin-left: 0;
+ -webkit-border-top-left-radius: 4px;
+ -moz-border-radius-topleft: 4px;
+ border-top-left-radius: 4px;
+ -webkit-border-bottom-left-radius: 4px;
+ -moz-border-radius-bottomleft: 4px;
+ border-bottom-left-radius: 4px;
+}
+.btn-group .btn:last-child,
+.btn-group .dropdown-toggle {
+ -webkit-border-top-right-radius: 4px;
+ -moz-border-radius-topright: 4px;
+ border-top-right-radius: 4px;
+ -webkit-border-bottom-right-radius: 4px;
+ -moz-border-radius-bottomright: 4px;
+ border-bottom-right-radius: 4px;
+}
+// Reset corners for large buttons
+.btn-group .btn.large:first-child {
+ margin-left: 0;
+ -webkit-border-top-left-radius: 6px;
+ -moz-border-radius-topleft: 6px;
+ border-top-left-radius: 6px;
+ -webkit-border-bottom-left-radius: 6px;
+ -moz-border-radius-bottomleft: 6px;
+ border-bottom-left-radius: 6px;
+}
+.btn-group .btn.large:last-child,
+.btn-group .large.dropdown-toggle {
+ -webkit-border-top-right-radius: 6px;
+ -moz-border-radius-topright: 6px;
+ border-top-right-radius: 6px;
+ -webkit-border-bottom-right-radius: 6px;
+ -moz-border-radius-bottomright: 6px;
+ border-bottom-right-radius: 6px;
+}
+
+// On hover/focus/active, bring the proper btn to front
+.btn-group .btn:hover,
+.btn-group .btn:focus,
+.btn-group .btn:active {
+ z-index: 2;
+}
+
+
+// Split button dropdowns
+// ----------------------
+
+// Give the line between buttons some depth
+.btn-group .dropdown-toggle {
+ padding-left: 8px;
+ padding-right: 8px;
+ @shadow: inset 1px 0 0 rgba(255,255,255,.125), 0 1px 2px rgba(0,0,0,.05);
+ .box-shadow(@shadow);
+}
+
+// Reposition menu on open and round all corners
+.btn-group.open .dropdown-menu {
+ display: block;
+ top: 30px;
+ .border-radius(5px);
+ &.large { top: 40px; }
+}
+.btn-group.open .dropdown-toggle {
+ background-image: none;
+ @shadow: inset 0 1px 6px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
+ .box-shadow(@shadow);
+}
+
+// Reposition the caret
+.btn .caret {
+ margin-top: 6px;
+ margin-left: 0;
+}
+
+// Account for other colors
+.primary,
+.danger,
+.info,
+.success {
+ .caret {
+ border-top-color: #fff;
+ .opacity(75);
+ }
+}
+
View
116 public/css/lib/buttons.less
@@ -0,0 +1,116 @@
+// BUTTON STYLES
+// -------------
+
+// Shared colors for buttons and alerts
+.btn {
+ // Set text color
+ &.danger,
+ &.danger:hover,
+ &.success,
+ &.success:hover,
+ &.info,
+ &.info:hover {
+ text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+ color: @white
+ }
+ // Danger and error appear as red
+ &.danger {
+ .gradientBar(#ee5f5b, #c43c35);
+ }
+ // Success appears as green
+ &.success {
+ .gradientBar(#62c462, #57a957);
+ }
+ // Info appears as a neutral blue
+ &.info {
+ .gradientBar(#5bc0de, #339bb9);
+ }
+}
+
+// Base .btn styles
+.btn {
+ // Button Base
+ display: inline-block;
+ padding: 5px 10px 6px;
+ font-size: @baseFontSize;
+ line-height: normal;
+ color: #333;
+ text-shadow: 0 1px 1px rgba(255,255,255,.75);
+ #gradient > .vertical-three-colors(#ffffff, #ffffff, 25%, darken(#ffffff, 10%)); // Don't use .gradientbar() here since it does a three-color gradient
+ 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);
+ cursor: pointer;
+
+ &:hover {
+ color: @grayDark;
+ text-decoration: none;
+ background-position: 0 -15px;
+ }
+
+ // Focus state for keyboard and accessibility
+ &:focus {
+ outline: 1px dotted #666;
+ }
+
+ // Primary Button Type
+ &.primary {
+ color: @white;
+ text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+ .gradientBar(@blue, @blueDark)
+ }
+
+ // Transitions
+ .transition(.1s linear all);
+
+ // Active and Disabled states
+ &.active,
+ &:active {
+ @shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.05);
+ .box-shadow(@shadow);
+ }
+ &.disabled {
+ cursor: default;
+ background-image: none;
+ .reset-filter();
+ .opacity(65);
+ .box-shadow(none);
+ }
+ &[disabled] {
+ // disabled pseudo can't be included with .disabled
+ // def because IE8 and below will drop it ;_;
+ cursor: default;
+ background-image: none;
+ .reset-filter();
+ .opacity(65);
+ .box-shadow(none);
+ }
+
+ // Button Sizes
+ &.large {
+ padding: 9px 14px 9px;
+ font-size: @baseFontSize + 2px;
+ line-height: normal;
+ .border-radius(5px);
+ }
+ &.small {
+ padding: 7px 9px 7px;
+ font-size: @baseFontSize - 2px;
+ }
+}
+// Super jank hack for removing border-radius from IE9 so we can keep filter gradients on alerts and buttons
+:root .alert-message,
+:root .btn {
+ border-radius: 0 \0;
+}
+
+// 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;
+ }
+}
View
18 public/css/lib/close.less
@@ -0,0 +1,18 @@
+// CLOSE ICONS
+// -----------
+
+.close {
+ float: right;
+ font-size: 20px;
+ font-weight: bold;
+ line-height: 12px;
+ color: @black;
+ text-shadow: 0 1px 0 rgba(255,255,255,1);
+ .opacity(20);
+ &:hover {
+ color: @black;
+ text-decoration: none;
+ .opacity(40);
+ cursor: pointer;
+ }
+}
View
18 public/css/lib/component-animations.less
@@ -0,0 +1,18 @@
+// COMPONENT ANIMATIONS
+// --------------------
+
+.fade {
+ .transition(opacity .15s linear);
+ opacity: 0;
+ &.in {
+ opacity: 1;
+ }
+}
+
+.collapse {
+ .transition(height .35s ease);
+ position:relative;
+ overflow:hidden;
+ height: 0;
+ &.in { height: auto; }
+}
View
103 public/css/lib/dropdowns.less
@@ -0,0 +1,103 @@
+// DROPDOWN MENUS
+// --------------
+
+// Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
+.dropdown {
+ position: relative;
+}
+// Dropdown arrow/caret
+.caret {
+ display: inline-block;
+ width: 0;
+ height: 0;
+ text-indent: -99999px;
+ vertical-align: top;
+ border-left: 4px solid transparent;
+ border-right: 4px solid transparent;
+ border-top: 4px solid #000;
+ .opacity(30);
+ content: "\2193";
+}
+.dropdown .caret {
+ margin-top: 8px;
+ margin-left: 2px;
+ *margin-top: 7px;
+}
+.dropdown:hover .caret,
+.open.dropdown .caret {
+ .opacity(100);
+}
+// The dropdown menu (ul)
+.dropdown-menu {
+ position: absolute;
+ top: 40px;
+ z-index: @zindexDropdown;
+ float: left;
+ display: none; // none by default, but block on "open" of the menu
+ min-width: 160px;
+ max-width: 220px;
+ _width: 160px;
+ padding: 4px 0;
+ margin: 0; // override default ul
+ list-style: none;
+ background-color: @white;
+ border-color: #ccc;
+ border-color: rgba(0,0,0,.2);
+ border-style: solid;
+ border-width: 1px;
+ .border-radius(0 0 5px 5px);
+ .box-shadow(0 5px 10px rgba(0,0,0,.2));
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding;
+ background-clip: padding-box;
+ zoom: 1; // do we need this?
+ *border-right-width: 2px;
+ *border-bottom-width: 2px;
+
+ // Dividers (basically an hr) within the dropdown
+ .divider {
+ height: 1px;
+ margin: 5px 1px;
+ overflow: hidden;
+ background-color: #e5e5e5;
+ border-bottom: 1px solid @white;
+ }
+
+ // Links within the dropdown menu
+ a {
+ display: block;
+ padding: 3px 15px;
+ clear: both;
+ font-weight: normal;
+ line-height: 18px;
+ color: @gray;
+ white-space: nowrap;
+ }
+}
+
+// Hover state
+.dropdown-menu li > a:hover,
+.dropdown-menu .active > a,
+.dropdown-menu .active > a:hover {
+ color: #fff;
+ text-decoration: none;
+ background-color: @linkColor;
+}
+
+// Open state for the dropdown
+.dropdown.open {
+ .dropdown-toggle {
+ color: @white;
+ background: #ccc;
+ background: rgba(0,0,0,.3);
+ }
+ .dropdown-menu {
+ display: block;
+ }
+}
+
+// Typeahead
+.typeahead {
+ margin-top: 2px; // give it some space to breathe
+ .border-radius(4px);
+}
View
484 public/css/lib/forms.less
@@ -0,0 +1,484 @@
+// Forms.less
+// Base styles for various input types, form layouts, and states
+// -------------------------------------------------------------
+
+
+// GENERAL STYLES
+// --------------
+
+// Make all forms have space below them
+form {
+ margin-bottom: @baseLineHeight;
+}
+
+// Groups of fields with labels on top (legends)
+legend {
+ display: block;
+ width: 100%;
+ margin-bottom: @baseLineHeight * 1.5;
+ font-size: @baseFontSize * 1.5;
+ line-height: @baseLineHeight * 2;
+ color: @grayDark;
+ border-bottom: 1px solid #eee;
+ -webkit-margin-collapse: separate;
+}
+
+// Set font for forms
+label,
+input,
+select,
+textarea {
+ #font > .sans-serif(normal,@baseFontSize,@baseLineHeight);
+}
+
+// Identify controls by their labels
+label {
+ display: block;
+ margin-bottom: 5px;
+ color: @grayDark;
+}
+
+// Inputs, Textareas, Selects
+input,
+textarea,
+select,
+.uneditable-input {
+ display: block;
+ width: 210px;
+ height: @baseLineHeight;
+ padding: 4px;
+ margin-bottom: 9px;
+ font-size: @baseFontSize;
+ line-height: @baseLineHeight;
+ color: @gray;
+ border: 1px solid #ccc;
+ .border-radius(3px);
+}
+
+// Mini reset for unique input types
+input[type=image],
+input[type=checkbox],
+input[type=radio] {
+ width: auto;
+ height: auto;
+ padding: 0;
+ margin: 3px 0;
+ *margin-top: 0; /* IE6-7 */
+ line-height: normal;
+ border: none;
+ cursor: pointer;
+}
+
+// Reset the file input to browser defaults
+input[type=file] {
+ padding: initial;
+ line-height: initial;
+ border: initial;
+ background-color: @white;
+ background-color: initial;
+ .box-shadow(none);
+}
+
+// Help out input buttons
+input[type=button],
+input[type=reset],
+input[type=submit] {
+ width: auto;
+ height: auto;
+}
+
+// Set the height of select and file controls to match text inputs
+select,
+input[type=file] {
+ height: @baseLineHeight * 1.5; // In IE7, the height of the select element cannot be changed by height, only font-size
+ *margin-top: 4px; /* For IE7, add top margin to align select with labels */
+ line-height: @baseLineHeight * 1.5;
+}
+
+// Chrome on Linux and Mobile Safari need background-color
+select {
+ width: 220px; // default input width + 10px of padding that doesn't get applied
+ padding: 0;
+ vertical-align: middle;
+ background-color: @white;
+}
+
+// Make multiple select elements height not fixed
+select[multiple],
+select[size] {
+ height: inherit;
+}
+
+// Remove shadow from image inputs
+input[type=image] {
+ .box-shadow(none);
+}
+
+textarea {
+ height: auto;
+}
+
+
+
+// CHECKBOXES & RADIOS
+// -------------------
+
+// Indent the labels to position radios/checkboxes as hanging
+.radio,
+.checkbox {
+ padding-left: 18px;
+}
+.radio input[type=radio],
+.checkbox input[type=checkbox] {
+ float: left;
+ margin-left: -18px;
+}
+
+// Move the options list down to align with labels
+.controls > .radio:first-child,
+.controls > .checkbox:first-child {
+ padding-top: 6px; // has to be padding because margin collaspes
+}
+
+// Radios and checkboxes on same line
+.radio.inline,
+.checkbox.inline {
+ display: inline-block;
+ margin-bottom: 0;
+}
+.radio.inline + .radio.inline,
+.checkbox.inline + .checkbox.inline {
+ margin-left: 10px; // space out consecutive inline controls
+}
+
+
+
+// FOCUS STATE
+// -----------
+
+input,
+textarea {
+ .box-shadow(inset 0 1px 1px rgba(0,0,0,.1));
+ @transition: border linear .2s, box-shadow linear .2s;
+ .transition(@transition);
+}
+input:focus,
+textarea:focus {
+ border-color: rgba(82,168,236,.8);
+ @shadow: inset 0 1px 1px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
+ .box-shadow(@shadow);
+ outline: 0;
+}
+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
+}
+
+
+
+// INPUT SIZES
+// -----------
+
+// General classes for quick sizes
+.input-mini { width: 60px; }
+.input-small { width: 90px; }
+.input-medium { width: 150px; }
+.input-large { width: 210px; }
+.input-xlarge { width: 270px; }
+.input-xxlarge { width: 530px; }
+
+// Grid style input sizes
+input[class*="span"],
+select[class*="span"],
+textarea[class*="span"],
+.uneditable-input {
+ float: none;
+ margin-left: 0;
+}
+
+// This is a duplication of the main grid .columns() mixin, but subtracts 10px to account for input padding and border
+.inputColumns(@columnSpan: 1) {
+ width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 10;
+}
+input,
+textarea,
+.uneditable-input {
+ // Default columns
+ &.span1 { .inputColumns(1); }
+ &.span2 { .inputColumns(2); }
+ &.span3 { .inputColumns(3); }
+ &.span4 { .inputColumns(4); }
+ &.span5 { .inputColumns(5); }
+ &.span6 { .inputColumns(6); }
+ &.span7 { .inputColumns(7); }
+ &.span8 { .inputColumns(8); }
+ &.span9 { .inputColumns(9); }
+ &.span10 { .inputColumns(10); }
+ &.span11 { .inputColumns(11); }
+ &.span12 { .inputColumns(12); }
+}
+
+.selectColumns(@columnSpan: 1) {
+ width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) + 10;
+}
+select {
+ &.span1 { .selectColumns(1); }
+ &.span2 { .selectColumns(2); }
+ &.span3 { .selectColumns(3); }
+ &.span4 { .selectColumns(4); }
+ &.span5 { .selectColumns(5); }
+ &.span6 { .selectColumns(6); }
+ &.span7 { .selectColumns(7); }
+ &.span8 { .selectColumns(8); }
+ &.span9 { .selectColumns(9); }
+ &.span10 { .selectColumns(10); }
+ &.span11 { .selectColumns(11); }
+ &.span12 { .selectColumns(12); }
+}
+
+
+
+// DISABLED STATE
+// --------------
+
+// Disabled and read-only inputs
+input[disabled],
+select[disabled],
+textarea[disabled],
+input[readonly],
+select[readonly],
+textarea[readonly] {
+ background-color: #f5f5f5;
+ border-color: #ddd;
+ cursor: not-allowed;
+}
+
+
+
+
+// FORM FIELD FEEDBACK STATES
+// --------------------------
+
+// Mixin for form field states
+.formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
+ // Set the text color
+ > label,
+ .help-block,
+ .help-inline {
+ color: @textColor;
+ }
+ // Style inputs accordingly
+ input,
+ textarea {
+ color: @textColor;
+ border-color: @borderColor;
+ &:focus {
+ border-color: darken(@borderColor, 10%);
+ .box-shadow(0 0 6px lighten(@borderColor, 20%));
+ }
+ }
+ // Give a small background color for input-prepend/-append
+ .input-prepend .add-on,
+ .input-append .add-on {
+ color: @textColor;
+ background-color: @backgroundColor;
+ border-color: @textColor;
+ }
+}
+// Error
+.control-group.error {
+ .formFieldState(#b94a48, #ee5f5b, lighten(#ee5f5b, 30%));
+}
+// Warning
+.control-group.warning {
+ .formFieldState(#c09853, #ccae64, lighten(#CCAE64, 5%));
+}
+// Success
+.control-group.success {
+ .formFieldState(#468847, #57a957, lighten(#57a957, 30%));
+}
+
+// HTML5 invalid states
+// Shares styles with the .control-group.error above
+input:invalid,
+textarea:invalid,
+select:invalid {
+ color: #b94a48;
+ border-color: #ee5f5b;
+ &:focus {
+ border-color: darken(#ee5f5b, 10%);
+ .box-shadow(0 0 6px lighten(#ee5f5b, 20%));
+ }
+}
+
+
+
+// FORM ACTIONS
+// ------------
+
+.form-actions {
+ padding: (@baseLineHeight - 1) 20px @baseLineHeight;
+ margin-top: @baseLineHeight;
+ margin-bottom: @baseLineHeight;
+ background-color: #f5f5f5;
+ border-top: 1px solid #ddd;
+}
+
+// For text that needs to appear as an input but should not be an input
+.uneditable-input {
+ display: block;
+ background-color: @white;
+ border-color: #eee;
+ .box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
+ cursor: not-allowed;
+}
+
+// Placeholder text gets special styles; can't be bundled together though for some reason
+input:-moz-placeholder {
+ color: @grayLight;
+}
+input::-webkit-input-placeholder {
+ color: @grayLight;
+}
+
+
+
+// HELP TEXT
+// ---------
+
+.help-block {
+ margin-top: 5px;
+ margin-bottom: 0;
+ color: @grayLight;
+}
+
+.help-inline {
+ *position: relative; /* IE6-7 */
+ *top: -5px; /* IE6-7 */
+ display: inline;
+ padding-left: 5px;
+}
+
+
+
+// INPUT GROUPS
+// ------------
+
+// Allow us to put symbols and text within the input field for a cleaner look
+.input-prepend,
+.input-append {
+ margin-bottom: 5px;
+ .clearfix(); // Clear the float to prevent wrapping
+ input,
+ .uneditable-input {
+ .border-radius(0 3px 3px 0);
+ }
+ .uneditable-input {
+ border-left-color: #ccc;
+ }
+ .add-on {
+ float: left;
+ display: block;
+ width: auto;
+ min-width: 16px;
+ height: @baseLineHeight;
+ margin-right: -1px;
+ padding: 4px 4px 4px 5px;
+ font-weight: normal;
+ line-height: @baseLineHeight;
+ color: @grayLight;
+ text-align: center;
+ text-shadow: 0 1px 0 @white;
+ background-color: #f5f5f5;
+ border: 1px solid #ccc;
+ .border-radius(3px 0 0 3px);
+ }
+ .active {
+ background-color: lighten(@green, 30);
+ border-color: @green;
+ }
+}
+.input-prepend {
+ .add-on {
+ *margin-top: 1px; /* IE6-7 */
+ }
+}
+.input-append {
+ input,
+ .uneditable-input {
+ float: left;
+ .border-radius(3px 0 0 3px);
+ }
+ .uneditable-input {
+ border-right-color: #ccc;
+ }
+ .add-on {
+ margin-right: 0;
+ margin-left: -1px;
+ .border-radius(0 3px 3px 0);
+ }
+}
+
+
+
+// SEARCH FORM
+// -----------
+
+.search-query {
+ padding-left: 14px;
+ padding-right: 14px;
+ margin-bottom: 0; // remove the default margin on all inputs
+ .border-radius(14px);
+}
+
+
+
+// HORIZONTAL & VERTICAL FORMS
+// ---------------------------
+
+// Common properties
+// -----------------
+
+.form-search,
+.form-inline,
+.form-horizontal {
+ input,
+ textarea,
+ select,
+ .uneditable-input {
+ display: inline-block;
+ margin-bottom: 0;
+ }
+}
+.form-search label,
+.form-inline label {
+ display: inline-block;
+}
+
+// Margin to space out fieldsets
+.control-group {
+ margin-bottom: @baseLineHeight;
+}
+
+// Horizontal-specific styles
+// --------------------------
+
+.form-horizontal {
+ // Float the labels left
+ .control-group > label {
+ float: left;
+ width: 140px;
+ padding-top: 5px;
+ text-align: right;
+ }
+ // Move over all input controls and content
+ .controls {
+ margin-left: 160px;
+ }
+ // Move over buttons in .form-actions to align with .controls
+ .form-actions {
+ padding-left: 160px;
+ }
+}
View
16 public/css/lib/labels.less
@@ -0,0 +1,16 @@
+// LABELS
+// ------
+
+.label {
+ padding: 1px 3px 2px;
+ font-size: @baseFontSize * .75;
+ font-weight: bold;
+ color: @white;
+ text-transform: uppercase;
+ background-color: @grayLight;
+ .border-radius(3px);
+ &.important { background-color: #c43c35; }
+ &.warning { background-color: @orange; }
+ &.success { background-color: @green; }
+ &.notice { background-color: lighten(@blue, 25%); }
+}
View
353 public/css/lib/mixins.less
@@ -0,0 +1,353 @@
+// Mixins.less
+// Snippets of reusable CSS to develop faster and keep code readable
+// -----------------------------------------------------------------
+
+
+// Clearfix for clearing floats like a boss h5bp.com/q
+.clearfix() {
+ zoom: 1;
+ &:before,
+ &:after {
+ display: table;
+ *display: inline;
+ content: "";
+ zoom: 1;
+ }
+ &:after {
+ clear: both;
+ }
+}
+
+// Center-align a block level element
+.center-block() {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+// IE7 inline-block
+.ie7-inline-block() {
+ *display: inline; /* IE7 inline-block hack */
+ *zoom: 1;
+}
+
+// Sizing shortcuts
+.size(@height: 5px, @width: 5px) {
+ width: @width;
+ height: @height;
+}
+.square(@size: 5px) {
+ .size(@size, @size);
+}
+
+// Input placeholder text
+.placeholder(@color: @grayLight) {
+ :-moz-placeholder {
+ color: @color;
+ }
+ ::-webkit-input-placeholder {
+ color: @color;
+ }
+}
+
+// Font Stacks
+#font {
+ #family {
+ .serif() {
+ font-family: Georgia, "Times New Roman", Times, serif;
+ }
+ .sans-serif() {
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ }
+ .monospace() {
+ font-family: Menlo, Monaco, "Courier New", monospace;
+ }
+ }
+ .shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
+ font-size: @size;
+ font-weight: @weight;
+ line-height: @lineHeight;
+ }
+ .serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
+ #font > #family > .serif;
+ #font > .shorthand(@size, @weight, @lineHeight);
+ }
+ .sans-serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
+ #font > #family > .sans-serif;
+ #font > .shorthand(@size, @weight, @lineHeight);
+ }
+ .monospace(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
+ #font > #family > .monospace;
+ #font > .shorthand(@size, @weight, @lineHeight);
+ }
+}
+
+// Grid System
+.fixed-container() {
+ width: @siteWidth;
+ margin-left: auto;
+ margin-right: auto;
+ .clearfix();
+}
+.columns(@columns: 1) {
+ width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
+}
+.offset(@columns: 1) {
+ margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
+}
+
+// Necessary grid styles for every column to make them appear next to each other horizontally
+.gridColumn() {
+ 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);
+}
+
+// Border Radius
+.border-radius(@radius: 5px) {
+ -webkit-border-radius: @radius;
+ -moz-border-radius: @radius;
+ border-radius: @radius;
+}
+.border-radius-custom(@topLeft, @topRight, @bottomRight, @bottomLeft) {
+ -webkit-border-top-left-radius: @topLeft;
+ -moz-border-radius-topleft: @topLeft;
+ border-top-left-radius: @topLeft;
+ -webkit-border-top-right-radius: @topRight;
+ -moz-border-radius-topright: @topRight;
+ border-top-right-radius: @topRight;
+ -webkit-border-bottom-right-radius: @bottomRight;
+ -moz-border-radius-bottomright: @bottomRight;
+ border-bottom-right-radius: @bottomRight;
+ -webkit-border-bottom-left-radius: @bottomLeft;
+ -moz-border-radius-bottomleft: @bottomLeft;
+ border-bottom-left-radius: @bottomLeft;
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding;
+ background-clip: padding-box;
+}
+
+// Drop shadows
+.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
+ -webkit-box-shadow: @shadow;
+ -moz-box-shadow: @shadow;
+ box-shadow: @shadow;
+}
+
+// Transitions
+.transition(@transition) {
+ -webkit-transition: @transition;
+ -moz-transition: @transition;
+ -ms-transition: @transition;
+ -o-transition: @transition;
+ transition: @transition;
+}
+
+// Transformations
+.rotate(@degrees: 5deg) {
+ -webkit-transform: rotate(@degrees);
+ -moz-transform: rotate(@degrees);
+ -ms-transform: rotate(@degrees);
+ -o-transform: rotate(@degrees);
+ transform: rotate(@degrees);
+}
+.scale(@value: 1.5) {
+ -webkit-transform: scale(@value);
+ -moz-transform: scale(@value);
+ -ms-transform: scale(@value);
+ -o-transform: scale(@value);
+ transform: scale(@value);
+}
+.translate(@x: 0, @y: 0) {
+ -webkit-transform: translate(@x, @y);
+ -moz-transform: translate(@x, @y);
+ -ms-transform: translate(@x, @y);
+ -o-transform: translate(@x, @y);
+ transform: translate(@x, @y);
+}
+
+// User select
+// For selecting text on the page
+.user-select(@select) {
+ -webkit-user-select: @select;
+ -moz-user-select: @select;
+ -o-user-select: @select;
+ user-select: @select;
+}
+
+// Background clipping
+// Heads up: FF 3.6 and under need padding instead of padding-box
+.background-clip(@clip) {
+ -webkit-background-clip: @clip;
+ -moz-background-clip: @clip;
+ background-clip: @clip;
+}
+
+// Box sizing
+.box-sizing(@boxmodel) {
+ -webkit-box-sizing: @boxmodel;
+ -moz-box-sizing: @boxmodel;
+ box-sizing: @boxmodel;
+}
+
+// Resize anything
+.resizable(@direction: both) {
+ resize: @direction; // Options: horizontal, vertical, both
+ overflow: auto; // Safari fix
+}
+
+// CSS3 Content Columns
+.content-columns(@columnCount, @columnGap: 20px) {
+ -webkit-column-count: @columnCount;
+ -moz-column-count: @columnCount;
+ column-count: @columnCount;
+ -webkit-column-gap: @columnGap;
+ -moz-column-gap: @columnGap;
+ column-gap: @columnGap;
+}
+
+// Add an alphatransparency value to any background or border color (via Elyse Holladay)
+#translucent {
+ .background(@color: @white, @alpha: 1) {
+ background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
+ }
+ .border(@color: @white, @alpha: 1) {
+ border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding;
+ background-clip: padding-box;
+ }
+}
+
+// Gradient Bar Colors for buttons and alerts
+.gradientBar(@primaryColor, @secondaryColor) {
+ #gradient > .vertical(@primaryColor, @secondaryColor);
+ border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
+ border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
+}
+
+// Gradients
+#gradient {
+ .horizontal(@startColor: #555, @endColor: #333) {
+ background-color: @endColor;
+ background-image: -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor)); // Konqueror
+ background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
+ background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10
+ background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
+ background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
+ background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
+ background-image: linear-gradient(left, @startColor, @endColor); // Le standard
+ background-repeat: repeat-x;
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE9 and down
+ }
+ .vertical(@startColor: #555, @endColor: #333) {
+ background-color: @endColor;
+ background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); // Konqueror
+ background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
+ background-image: -ms-linear-gradient(top, @startColor, @endColor); // IE10
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
+ background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
+ background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
+ background-image: linear-gradient(top, @startColor, @endColor); // The standard
+ background-repeat: repeat-x;
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down
+ }
+ .directional(@startColor: #555, @endColor: #333, @deg: 45deg) {
+ background-color: @endColor;
+ background-repeat: repeat-x;
+ background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
+ background-image: -ms-linear-gradient(@deg, @startColor, @endColor); // IE10
+ background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
+ background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
+ background-image: linear-gradient(@deg, @startColor, @endColor); // The standard
+ }
+ .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
+ background-color: @endColor;
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
+ background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
+ background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
+ background-image: -ms-linear-gradient(@startColor, @midColor @colorStop, @endColor);
+ background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
+ background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
+ background-repeat: no-repeat;
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down, gets no color-stop at all for proper fallback
+ }
+ .radial(@centerColor: #555, @outsideColor: #333) {
+ background-color: @outsideColor;
+ background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@centerColor), to(@outsideColor));
+ background-image: -webkit-radial-gradient(circle, @centerColor, @outsideColor);
+ background-image: -moz-radial-gradient(circle, @centerColor, @outsideColor);
+ background-image: -ms-radial-gradient(circle, @centerColor, @outsideColor);
+ background-repeat: no-repeat;
+ // Opera cannot do radial gradients yet
+ }
+ .striped(@color,@angle: -45deg) {
+ background-color: @color;
+ background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
+ background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
+ background-image: -moz-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
+ background-image: -ms-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
+ background-image: -o-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
+ background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
+ }
+}
+
+// Reset filters for IE
+.reset-filter() {
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
+}
+
+// Opacity
+.opacity(@opacity: 100) {
+ filter: e(%("alpha(opacity=%d)", @opacity));
+ -moz-opacity: @opacity / 100;
+ opacity: @opacity / 100;
+}
+
+// Popover arrows
+// For tipsies and popovers
+#popoverArrow {
+ .top(@arrowWidth: 5px) {
+ bottom: 0;
+ left: 50%;
+ margin-left: -@arrowWidth;
+ border-left: @arrowWidth solid transparent;
+ border-right: @arrowWidth solid transparent;
+ border-top: @arrowWidth solid @black;
+ }
+ .left(@arrowWidth: 5px) {
+ top: 50%;
+ right: 0;
+ margin-top: -@arrowWidth;
+ border-top: @arrowWidth solid transparent;
+ border-bottom: @arrowWidth solid transparent;
+ border-left: @arrowWidth solid @black;
+ }
+ .bottom(@arrowWidth: 5px) {
+ top: 0;
+ left: 50%;
+ margin-left: -@arrowWidth;
+ border-left: @arrowWidth solid transparent;
+ border-right: @arrowWidth solid transparent;
+ border-bottom: @arrowWidth solid @black;
+ }
+ .right(@arrowWidth: 5px) {
+ top: 50%;
+ left: 0;
+ margin-top: -@arrowWidth;
+ border-top: @arrowWidth solid transparent;
+ border-bottom: @arrowWidth solid transparent;
+ border-right: @arrowWidth solid @black;
+ }
+}
+
+.background-size(@width, @height){
+ -webkit-background-size: @width @height;
+ -moz-background-size: @width @height;
+ -o-background-size: @width @height;
+ background-size: @width @height;
+}
View
64 public/css/lib/modals.less
@@ -0,0 +1,64 @@
+// MODALS
+// ------
+
+.modal-backdrop {
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: @zindexModalBackdrop;
+ background-color: @black;
+ // Fade for backdrop
+ &.fade { opacity: 0; }
+}
+
+.modal-backdrop,
+.modal-backdrop.fade.in {
+ .opacity(80);
+}
+
+.modal {
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ z-index: @zindexModal;
+ max-height: 500px;
+ overflow: auto;
+ width: 560px;
+ margin: -250px 0 0 -280px;
+ background-color: @white;
+ border: 1px solid #999;
+ border: 1px solid rgba(0,0,0,.3);
+ *border: 1px solid #999; /* IE6-7 */
+ .border-radius(6px);
+ .box-shadow(0 3px 7px rgba(0,0,0,0.3));
+ .background-clip(padding-box);
+ &.fade {
+ .transition(e('opacity .3s linear, top .3s ease-out'));
+ top: -25%;
+ }
+ &.fade.in { top: 50%; }
+}
+.modal-header {
+ padding: 5px 15px;
+ border-bottom: 1px solid #eee;
+ // Close icon
+ .close { margin-top: 7px; }
+}
+.modal-body {
+ padding: 15px;
+}
+.modal-footer {
+ padding: 14px 15px 15px;
+ margin-bottom: 0;
+ background-color: #f5f5f5;
+ border-top: 1px solid #ddd;
+ .border-radius(0 0 6px 6px);
+ .box-shadow(inset 0 1px 0 @white);
+ .clearfix();
+ .btn {
+ float: right;
+ margin-left: 5px;
+ }
+}
View
256 public/css/lib/navbar.less
@@ -0,0 +1,256 @@
+// NAVBAR (FIXED AND STATIC)
+// -------------------------
+
+// Navbar variables
+@navBarHeight: 40px;
+@navBarBgStart: #333;
+@navBarBgEnd: #222;
+
+// Common styles
+.navbar {
+ overflow: visible;
+}
+// gradient is applied to it's own element because overflow visible is not honored by IE when filter is present
+.navbar-inner {
+ background-color: @navBarBgEnd;
+ #gradient > .vertical(@navBarBgStart, @navBarBgEnd);
+ @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
+ .box-shadow(@shadow);
+}
+// Text and links
+.navbar {
+ // Hover and active states
+ .brand:hover {
+ color: @white;
+ text-decoration: none;
+ }
+ // Website or project name
+ .brand {
+ float: left;
+ display: block;
+ padding: 8px 20px 12px;
+ margin-left: -20px; // negative indent to left-align the text down the page
+ font-size: 20px;
+ font-weight: 200;
+ line-height: 1;
+ color: @white;
+ }
+ // Plain text in topbar
+ p {
+ margin: 0;
+ line-height: 40px;
+ a:hover {
+ color: @white;
+ background-color: transparent;
+ }
+ }
+ // Buttons in navbar
+ .btn,
+ .btn-group {
+ margin-top: 5px; // make buttons vertically centered in navbar
+ }
+ .btn-group .btn {
+ margin-top: 0;
+ }
+}
+
+// Navbar forms
+.navbar-form {
+ margin-bottom: 0; // remove default bottom margin
+ input,
+ select {
+ display: inline-block;
+ margin-bottom: 0;
+ }
+}
+
+// Navbar search
+.navbar-search {
+ position: relative;
+ float: left;
+ margin-top: 6px;
+ margin-bottom: 0;
+ .search-query {
+ padding: 4px 9px;
+ #font > .sans-serif(13px, normal, 1);
+ color: @white;
+ color: rgba(255,255,255,.75);
+ background-color: #444;
+ background-color: rgba(255,255,255,.3);
+ border: 1px solid #111;
+ @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15);
+ .box-shadow(@shadow);
+ .transition(none);
+
+ // Placeholder text gets special styles; can't be bundled together though for some reason
+ &:-moz-placeholder {
+ color: @grayLighter;
+ }
+ &::-webkit-input-placeholder {
+ color: @grayLighter;
+ }
+ // Hover states
+ &:hover {
+ color: @white;
+ background-color: @grayLight;
+ background-color: rgba(255,255,255,.5);
+ }
+ // Focus states (we use .focused since IE8 and down doesn't support :focus)
+ &:focus,
+ &.focused {
+ padding: 5px 10px;
+ color: @grayDark;
+ text-shadow: 0 1px 0 @white;
+ background-color: @white;
+ border: 0;
+ .box-shadow(0 0 3px rgba(0,0,0,.15));
+ outline: 0;
+ }
+ }
+}
+
+
+// Static navbar
+.navbar-static {
+ margin-bottom: @baseLineHeight;
+}
+.navbar-static .navbar-inner {
+ padding-left: 20px;
+ padding-right: 20px;
+ .border-radius(4px);
+}
+
+// Fixed navbar
+.navbar-fixed {
+ position: fixed;
+ top: 0;
+ right: 0;
+ left: 0;
+ z-index: @zindexFixedNavbar;
+}
+
+
+
+// NAVIGATION
+// ----------
+
+.navbar .nav {
+ position: relative;
+ left: 0;
+ display: block;
+ float: left;
+ margin: 0 10px 0 0;
+}
+.navbar .nav.pull-right {
+ float: right; // redeclare due to specificity
+}
+.navbar .nav > li {
+ display: block;
+ float: left;
+}
+
+// Links
+.navbar .nav > li > a {
+ float: none;
+ padding: 10px 10px 11px;
+ line-height: 19px;
+ color: @grayLight;
+ text-decoration: none;
+ text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+}
+// Hover
+.navbar .nav > li > a:hover {
+ background-color: transparent;
+ color: @white;
+ text-decoration: none;
+}
+
+// Active nav items
+.navbar .nav .active > a {
+ color: @white;
+ text-decoration: none;
+ background-color: #222;
+ background-color: rgba(0,0,0,.5);
+}
+
+// Dividers (basically a vertical hr)
+.navbar .vertical-divider {
+ height: 40px;
+ width: 1px;
+ margin: 0 5px;
+ overflow: hidden;
+ background-color: #222;
+ border-right: 1px solid #444;
+}
+
+// Secondary (floated right) nav in topbar
+.navbar .nav.pull-right {
+ margin-left: 10px;
+ margin-right: 0;
+}
+
+
+
+// Dropdown menus
+// --------------
+
+// Menu position and menu carets
+.navbar .dropdown-menu {
+ top: 41px;
+ .border-radius(4px);
+ &:before {
+ content: '';
+ display: inline-block;
+ border-left: 7px solid transparent;
+ border-right: 7px solid transparent;
+ border-bottom: 7px solid #ccc;
+ border-bottom-color: rgba(0,0,0,.2);
+ position: absolute;
+ top: -7px;
+ left: 9px;
+ }
+ &:after {
+ content: '';
+ display: inline-block;
+ border-left: 6px solid transparent;
+ border-right: 6px solid transparent;
+ border-bottom: 6px solid #fff;
+ position: absolute;
+ top: -6px;
+ left: 10px;
+ }
+}
+
+// Dropdown toggle caret
+.navbar .nav .dropdown-toggle .caret,
+.navbar .nav .open.dropdown .caret {
+ border-top-color: #fff;
+}
+.navbar .nav .active .caret {
+ .opacity(100);
+}
+
+// Remove background color from open dropdown
+.navbar .nav .open > .dropdown-toggle,
+.navbar .nav .active > .dropdown-toggle,
+.navbar .nav .open.active > .dropdown-toggle {
+ background-color: transparent;
+}
+
+// Dropdown link on hover
+.navbar .nav .active > .dropdown-toggle:hover {
+ color: #fff;
+}
+
+// Right aligned menus need alt position
+.navbar .nav.pull-right .dropdown-menu {
+ right: 0;
+ &:before {
+ left: auto;
+ right: 12px;
+ }
+ &:after {
+ left: auto;
+ right: 13px;
+ }
+}
View
338 public/css/lib/navs.less
@@ -0,0 +1,338 @@
+// NAVIGATIONS
+// -----------
+
+
+
+// BASE CLASS
+// ----------
+
+.nav {
+ margin-left: 0;
+ margin-bottom: @baseLineHeight;
+ list-style: none;
+}
+
+// Make links block level
+.nav > li > a {
+ display: block;
+}
+.nav > li > a:hover {
+ text-decoration: none;
+ background-color: #eee;
+}
+
+
+
+// NAV LIST
+// --------
+
+.nav.list {
+ padding-left: 14px;
+ padding-right: 14px;
+ margin-bottom: 0;
+}
+.nav.list > li > a,
+.nav.list .nav-header {
+ display: block;
+ padding: 3px 15px;
+ margin-left: -15px;
+ margin-right: -15px;
+ text-shadow: 0 1px 0 rgba(255,255,255,.5);
+}
+.nav.list .nav-header {
+ font-size: 11px;
+ font-weight: bold;
+ line-height: @baseLineHeight;
+ color: @grayLight;
+ text-transform: uppercase;
+}
+.nav.list > li + .nav-header {
+ margin-top: 9px;
+}
+.nav.list .active > a {
+ color: @white;
+ text-shadow: 0 -1px 0 rgba(0,0,0,.2);
+ background-color: @linkColor;
+}
+
+
+
+// TABS AND PILLS
+// -------------
+
+// Common styles
+.tabs,
+.pills {
+ .clearfix();
+}
+.tabs > li,
+.pills > li {
+ float: left;
+}
+.tabs > li > a,
+.pills > li > a {
+ padding-right: 12px;
+ padding-left: 12px;
+ margin-right: 2px;
+ line-height: 14px; // keeps the overall height an even number
+}
+
+// TABS
+// ----
+
+// Give the tabs something to sit on
+.tabs {
+ border-bottom: 1px solid #ddd;
+}
+
+// Make the list-items overlay the bottom border
+.tabs > li {
+ margin-bottom: -1px;
+}
+
+// Actual tabs (as links)
+.tabs > li > a {
+ padding-top: 9px;
+ padding-bottom: 9px;
+ border: 1px solid transparent;
+ .border-radius(4px 4px 0 0);
+ &:hover {
+ border-color: #eee #eee #ddd;
+ }
+}
+// Active state, and it's :hover to override normal :hover
+.tabs > .active > a,
+.tabs > .active > a:hover {
+ color: @gray;
+ background-color: @white;
+ border: 1px solid #ddd;
+ border-bottom-color: transparent;
+ cursor: default;
+}
+
+// PILLS
+// -----
+
+// Links rendered as pills
+.pills > li > a {
+ padding-top: 8px;
+ padding-bottom: 8px;
+ margin-top: 2px;
+ margin-bottom: 2px;
+ .border-radius(5px);
+}
+
+// Active state
+.pills .active > a,
+.pills .active > a:hover {
+ color: @white;
+ background-color: @linkColor;
+}
+
+
+
+// STACKED NAV
+// -----------
+
+// Stacked tabs and pills
+.nav.stacked > li {
+ float: none;
+}
+.nav.stacked > li > a {
+ margin-right: 0; // no need for the gap between nav items
+}
+
+// Tabs
+.tabs.stacked {
+ border-bottom: 0;
+}
+.tabs.stacked > li > a {
+ border: 1px solid #ddd;
+ .border-radius(0);
+}
+.tabs.stacked > li:first-child > a {
+ .border-radius(4px 4px 0 0);
+}
+.tabs.stacked > li:last-child > a {
+ .border-radius(0 0 4px 4px);
+}
+.tabs.stacked > li > a:hover {
+ border-color: #ddd;
+ z-index: 2;
+}
+
+// Pills
+.pills.stacked > li > a {
+ margin-bottom: 3px;
+}
+.pills.stacked > li:last-child > a {
+ margin-bottom: 1px; // decrease margin to match sizing of stacked tabs
+}
+
+
+
+// DROPDOWNS
+// ---------
+
+// Position the menu
+.pills .dropdown-menu,
+.tabs .dropdown-menu {
+ top: 33px;
+ border-width: 1px;
+}
+.pills .dropdown-menu {
+ .border-radius(4px);
+}
+
+// Default dropdown links
+// -------------------------
+// Make carets use linkColor to start
+.tabs .dropdown-toggle .caret,
+.pills .dropdown-toggle .caret {
+ border-top-color: @linkColor;
+ margin-top: 6px;
+}
+.tabs .dropdown-toggle:hover .caret,
+.pills .dropdown-toggle:hover .caret {
+ border-top-color: @linkColorHover;
+}
+
+// Active dropdown links
+// -------------------------
+.tabs .active .dropdown-toggle .caret,
+.pills .active .dropdown-toggle .caret {
+ border-top-color: #333;
+}
+
+// Active:hover dropdown links
+// -------------------------
+.nav > .dropdown.active > a:hover {
+ color: #000;
+ cursor: pointer;
+}
+
+// Open dropdowns
+// -------------------------
+.tabs .open .dropdown-toggle,
+.pills .open .dropdown-toggle,
+.nav > .open.active > a:hover {
+ color: #fff;
+ background-color: #999;
+ border-color: #999;
+}
+.nav .open .caret,
+.nav .open.active .caret,
+.nav .open a:hover .caret {
+ border-top-color: #fff;
+ .opacity(100);
+}
+
+// Dropdowns in stacked tabs
+.tabs.stacked .open > a:hover {
+ border-color: #999;
+}
+
+
+
+// TABBABLE
+// --------
+
+
+// COMMON STYLES
+// -------------
+
+// Clear any floats
+.tabbable {
+ .clearfix();
+}
+
+// Remove border on bottom, left, right
+.tabs-below .tabs,
+.tabs-right .tabs,
+.tabs-left .tabs {
+ border-bottom: 0;
+}
+
+// Show/hide tabbable areas
+.tab-content > .tab-pane,
+.pill-content > .pill-pane {
+ display: none;
+}
+.tab-content > .active,
+.pill-content > .active {
+ display: block;
+}
+
+
+// BOTTOM
+// ------
+
+.tabs-below .tabs {
+ border-top: 1px solid #ddd;
+}
+.tabs-below .tabs > li {
+ margin-top: -1px;
+ margin-bottom: 0;
+}
+.tabs-below .tabs > li > a {
+ .border-radius(0 0 4px 4px);
+ &:hover {
+ border-bottom-color: transparent;
+ border-top-color: #ddd;
+ }
+}
+.tabs-below .tabs .active > a,
+.tabs-below .tabs .active > a:hover {
+ border-color: transparent #ddd #ddd #ddd;
+}
+
+// LEFT & RIGHT
+// ------------
+
+// Common styles
+.tabs-left .tabs > li,
+.tabs-right .tabs > li {
+ float: none;
+}
+.tabs-left .tabs > li > a,
+.tabs-right .tabs > li > a {
+ min-width: 74px;
+ margin-right: 0;
+ margin-bottom: 3px;
+}
+
+// Tabs on the left
+.tabs-left .tabs {
+ float: left;
+ margin-right: 19px;
+ border-right: 1px solid #ddd;
+}
+.tabs-left .tabs > li > a {
+ margin-right: -1px;
+ .border-radius(4px 0 0 4px);
+}
+.tabs-left .tabs > li > a:hover {
+ border-color: #eee #ddd #eee #eee;
+}
+.tabs-left .tabs .active > a,
+.tabs-left .tabs .active > a:hover {
+ border-color: #ddd transparent #ddd #ddd;
+}
+
+// Tabs on the right
+.tabs-right .tabs {
+ float: right;
+ margin-left: 19px;
+ border-left: 1px solid #ddd;
+}
+.tabs-right .tabs > li > a {
+ margin-left: -1px;
+ .border-radius(0 4px 4px 0);
+}
+.tabs-right .tabs > li > a:hover {
+ border-color: #eee #eee #eee #ddd;
+}
+.tabs-right .tabs .active > a,
+.tabs-right .tabs .active > a:hover {
+ border-color: #ddd #ddd #ddd transparent;
+}
View
25 public/css/lib/pager.less
@@ -0,0 +1,25 @@
+// PAGER
+// -----
+
+.pager {
+ margin-left: 0;
+ margin-bottom: @baseLineHeight;
+ list-style: none;
+ text-align: center;
+ .clearfix();
+}
+.pager li {
+ display: inline;
+}
+.pager a {
+ display: inline-block;
+ padding: 6px 15px;
+ background-color: #f5f5f5;
+ .border-radius(15px);
+}
+.pager .next a {
+ float: right;
+}
+.pager .previous a {
+ float: left;
+}
View
52 public/css/lib/pagination.less
@@ -0,0 +1,52 @@
+// PAGINATION
+// ----------
+
+.pagination {
+ height: @baseLineHeight * 2;
+ margin: @baseLineHeight 0;
+ }
+.pagination ul {
+ display: inline-block;
+ .ie7-inline-block();
+ margin-left: 0;
+ margin-bottom: 0;
+ border: 1px solid #ddd;
+ border: 1px solid rgba(0,0,0,.15);
+ .border-radius(3px);
+ .box-shadow(0 1px 2px rgba(0,0,0,.05));
+}
+.pagination li {
+ display: inline;
+ }
+.pagination a {
+ float: left;
+ padding: 0 14px;
+ line-height: (@baseLineHeight * 2) - 2;
+ text-decoration: none;
+ border-right: 1px solid #ddd;
+ border-right: 1px solid rgba(0,0,0,.15);
+}
+.pagination a:hover,
+.pagination .active a {
+ background-color: #f5f5f5;
+}
+.pagination .active a {
+ color: @grayLight;
+}
+.pagination .disabled a,
+.pagination .disabled a:hover {
+ color: @grayLight;
+ background-color: transparent;
+ cursor: default;
+}
+.pagination li:last-child a {
+ border: 0;
+}
+
+// Centered
+.pagination-centered {
+ text-align: center;
+}
+.pagination-right {
+ text-align: right;
+}
View
30 public/css/lib/patterns.less
@@ -0,0 +1,30 @@
+// Patterns.less
+// Repeatable UI elements outside the base styles provided from the scaffolding
+// ----------------------------------------------------------------------------
+
+
+// PAGE HEADERS
+// ------------
+
+.hero-unit {
+ padding: 60px;
+ margin-bottom: 30px;
+ background-color: #f5f5f5;
+ .border-radius(6px);
+ h1 {
+ margin-bottom: 0;
+ font-size: 60px;
+ line-height: 1;
+ letter-spacing: -1px;
+ }
+ p {
+ font-size: 18px;
+ font-weight: 200;
+ line-height: @baseLineHeight * 1.5;
+ }
+}
+footer {
+ padding-top: @baseLineHeight - 1;
+ margin-top: @baseLineHeight - 1;
+ border-top: 1px solid #eee;
+}
View
49 public/css/lib/popovers.less
@@ -0,0 +1,49 @@
+// POPOVERS
+// --------
+
+.popover {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: @zindexPopover;
+ display: none;
+ padding: 5px;
+ &.top { margin-top: -5px; }
+ &.right { margin-left: 5px; }
+ &.bottom { margin-top: 5px; }
+ &.left { margin-left: -5px; }
+ &.top .arrow { #popoverArrow > .top(); }
+ &.right .arrow { #popoverArrow > .right(); }
+ &.bottom .arrow { #popoverArrow > .bottom(); }
+ &.left .arrow { #popoverArrow > .left(); }
+ .arrow {
+ position: absolute;
+ width: 0;
+ height: 0;
+ }
+ .inner {
+ padding: 3px;
+ width: 280px;
+ overflow: hidden;
+ background-color: @black;
+ background-color: rgba(0,0,0,.8);
+ .border-radius(6px);
+ .box-shadow(0 3px 7px rgba(0,0,0,0.3));
+ }
+ .title {
+ padding: 9px 15px;
+ line-height: 1;
+ background-color: #f5f5f5;
+ border-bottom:1px solid #eee;
+ .border-radius(3px 3px 0 0);
+ }
+ .content {
+ padding: 14px;
+ background-color: @white;
+ .border-radius(0 0 3px 3px);
+ .background-clip(padding-box);
+ p, ul, ol {
+ margin-bottom: 0;
+ }
+ }
+}
View
18 public/css/lib/print.less
@@ -0,0 +1,18 @@
+/*!
+ * Bootstrap @VERSION for Print
+ *
+ * Copyright 2012 Twitter, Inc
+ * Licensed under the Apache License v2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Designed and built with all the love in the world @twitter by @mdo and @fat.
+ * Date: @DATE
+ */
+
+
+// HIDE UNECESSARY COMPONENTS
+// --------------------------
+
+.navbar-fixed {
+ display: none;
+}
View
95 public/css/lib/progress-bars.less
@@ -0,0 +1,95 @@
+// PROGRESS BARS
+// -------------
+
+
+// ANIMATIONS
+// ----------
+
+// Webkit
+@-webkit-keyframes progress-bar-stripes {
+ from { background-position: 0 0; }
+ to { background-position: 40px 0; }
+}
+
+// Temporarily commented out since LESS won't compile with this
+// @-moz-keyframes progress-bar-stripes {
+// from { background-position: 0 0; }
+// to { background-position: 40px 0; }
+// }
+
+// Spec
+@keyframes progress-bar-stripes {
+ from { background-position: 0 0; }
+ to { background-position: 40px 0; }
+}
+
+
+
+// THE BARS
+// --------
+
+// Common styles
+.progress,
+.progress .bar {
+ .border-radius(4px);