form

banacorn · Feb 16, 2013 · 89b5e41 · 89b5e41
1 parent 9eb9f37
commit 89b5e41
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 6 deletions.
diff --git a/less/buttons.less b/less/buttons.less
@@ -235,5 +235,23 @@ input[type="submit"].btn {
 
 // Core
 .btn {
+  .buttonBackground(@btnBackground, @btnBackgroundHighlight, @white, 0 1px 1px rgba(255,255,255,.75));
   border: none;
 }
+
+// Set the backgrounds
+// -------------------------
+.btn-primary {
+  .buttonBackground(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight);
+}
+
+
+// Button Sizes
+// --------------------------------------------------
+
+// Extra-Large
+.btn-extra-large {
+  padding: @paddingExtraLarge;
+  font-size: @fontSizeExtraLarge;
+  .border-radius(@borderRadiusLarge);
+}
diff --git a/less/forms.less b/less/forms.less
@@ -688,3 +688,44 @@ legend + .control-group {
     padding-left: @horizontalComponentOffset;
   }
 }
+
+
+/////////////////////////////////////
+//  OVERRIDE
+/////////////////////////////////////
+
+
+// Form controls
+// -------------------------
+
+// Everything else
+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"],
+.uneditable-input {
+  background-color: @inputBackground;
+  border: none;
+  .box-shadow(~"0 1px 0 white, inset 0 1px 3px rgba(0, 0, 0, 0.5)");
+  // .transition(~"border linear .2s, box-shadow linear .2s");
+
+  // Focus state
+  &:focus {
+    border-color: rgba(82,168,236,.8);
+    outline: 0;
+    outline: thin dotted \9; /* IE6-9 */
+    // .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
+  }
+}
+
diff --git a/less/mixins.less b/less/mixins.less
@@ -729,3 +729,15 @@
     background-color: darken(@endColor, 10%) e("\9");
   }
 }
+
+
+/////////////////////////////////////
+//  OVERRIDE
+/////////////////////////////////////
+
+// Drop shadows
+.box-shadow() {
+  -webkit-box-shadow: @arguments;
+     -moz-box-shadow: @arguments;
+          box-shadow: @arguments;
+}
diff --git a/less/variables.less b/less/variables.less
@@ -306,7 +306,8 @@
 
 // Accent colors
 // -------------------------
-@blue:  #345;
+@blue: #345;
+@gold: darken(gold, 5%);
 
 // Navbar
 // -------------------------
@@ -315,9 +316,22 @@
 
 // Buttons
 // -------------------------
-@btnBackground:                     @white;
-@btnBackgroundHighlight:            darken(@white, 10%);
-@btnBorder:                         #ccc;
+@btnBackground:                     @blue;
+@btnBackgroundHighlight:            lighten(@btnBackground, 10%);
+
+@btnPrimaryBackground:              @gold;
+@btnPrimaryBackgroundHighlight:     lighten(@btnPrimaryBackground, 10%);
+
+
+// Component sizing
+// -------------------------
+// Based on 14px font-size and 20px line-height
+
+@fontSizeExtraLarge:         @baseFontSize * 1.6; // ~18px
+
+@paddingExtraLarge:          16px 28px; // 44px
 
-@btnPrimaryBackground:              @blue;
-@btnPrimaryBackgroundHighlight:     darken(@btnPrimaryBackground, 10%);
+
+// Forms
+// -------------------------
+// @inputBackground:               @grayLighter;