eriiicam avatar eriiicam committed fdea969

better form defaults

Comments (0)

Files changed (5)

 
 // OTHER MIXINS --------------------------------------------------------------
 // Mixins set here will be available in defaults, screen, print and IE
-// Or anywhere you import either base.sass or defaults.sass
+// Or anywhere you import either base.sass or defaults.sass
+
+=hpadding($l:$gutter-width,$r:$l)
+  padding:
+    left: $l
+    right: $r

sass/_defaults.sass

   
 /* Forms --------------------------------------------------------------
 
+::-moz-focus-inner
+  border: 0
+
 fieldset
   +trailer
   +rhythm-borders(1px)
   +adjust-font-size-to(18px)
   font-weight: bold
 
-input[type="radio"], input[type="checkbox"]
-  vertical-align: baseline
+label
+  font-weight: bold
 
 label, input[type=button], input[type=submit], button
   cursor: pointer
 
-label
-  font-weight: bold
+input[type="radio"], input[type="checkbox"]
+  vertical-align: baseline
 
-input, button, textarea, select, optgroup
-  +reset-box-model
+input, button, textarea, select
+  +border-radius(0)
+  vertical-align: middle
+  &:focus, &:active
+    +box-shadow(#06f 0 0 7px)
+    z-index: 1
+  &, optgroup
+    +reset-box-model
+
+optgroup
+  color: $base
+  font-style: normal
+  font-weight: normal
 
 // box-sizing helps us control the width of inputs
 // which are otherwise very hard to manage in the grid.
   +sans-family
   +adjust-font-size-to(14px,1,16px)
   +rhythm-borders(1px,.25,14px)
-  +trailer(.5)
+  +trailer(.5,14px)
   +box-sizing(border-box)
   width: 100%
+  background-color: #fff
+  color: $base
   border-color: $base
   height: $base-line-height/14px*1.5em
+  outline: 0
+  -webkit-appearance: none
+  .ie7 &
+    height: auto
+  [disabled]
+    background-color: #eee
+    color: lighten($base,15)
 
 input, textarea
   &:invalid
     .no-boxshadow &
       background-color: #f0dddd
 
+textarea, select
+  @extend .textinput
+
 textarea
-  @extend .textinput
-  height: $base-line-height/14px*6.5em
-  vertical-align: text-bottom
+  height: auto
+  overflow: auto
+  resize: vertical
+
+select
+  background-image: image-url('forms/select_arrow.gif')
+  background-repeat: no-repeat
+  background-position: right center
+  padding-right: 20px
+  &[multiple]
+    height: auto
+    background-image: none
+    padding: 0
+
+.button
+  +border-radius(1em)
+  +background(#dddddd image-url('forms/button.png') repeat-x)
+  +background(linear-gradient(top center, white 0%, #dddddd 100%))
+  +rhythm-borders(1px,.25)
+  +hpadding
+  +text-shadow(#fff 0 1px 1px)
+  +trailer(.5)
+  border-color: #ddd #bbb #999
+  cursor: pointer
+  color: #333
+  font: inherit
+  outline: 0
+  overflow: visible
+  width: auto
+  &[disabled]
+    color: #888
+
+button
+  @extend .button
 
 input
-  &[type=text], &[type=password], &[type=email], &[type=url], &[type=tel],
-  &[type=date], &[type=datetime], &[type=datetime-local], &[type=month], &[type=week], &[type=time],
-  &[type=number], &[type=range], &[type=search], &[type=color]
+  vertical-align: middle
+  &[type="text"], &[type="password"], &[type="email"], &[type="url"], &[type="tel"],
+  &[type="date"], &[type="datetime"], &[type="datetime-local"], &[type="month"], &[type="week"], &[type="time"],
+  &[type="number"], &[type="search"], &[type="color"]
     @extend .textinput
-  // reset webkit search styles
-  &[type=search]
+  &[type="range"]
+    width: 100%
+  &[type="reset"], &[type="submit"], &[type="button"]
+    @extend .button
+  &[type="search"]
     -webkit-appearance: none
     &::-webkit-search-decoration
       display: none
 
-// manage buttons in IE
-button
-  width: auto
-  overflow: visible

static/css/screen.css

 tfoot { font-size: 0.875em; line-height: 1.714em; }
 
 /* Forms -------------------------------------------------------------- */
+::-moz-focus-inner { border: 0; }
+
 fieldset { margin-bottom: 1.5em; border-style: solid; border-width: 0.063em; padding: 1.438em; }
 
 legend { font-size: 1.125em; line-height: 1.333em; font-weight: bold; }
 
-input[type="radio"], input[type="checkbox"] { vertical-align: baseline; }
+label { font-weight: bold; }
 
 label, input[type=button], input[type=submit], button { cursor: pointer; }
 
-label { font-weight: bold; }
+input[type="radio"], input[type="checkbox"] { vertical-align: baseline; }
 
-input, button, textarea, select, optgroup { margin: 0; padding: 0; border: 0; outline: 0; }
+input, button, textarea, select { -moz-border-radius: 0; -webkit-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; -khtml-border-radius: 0; border-radius: 0; vertical-align: middle; }
+input:focus, input:active, button:focus, button:active, textarea:focus, textarea:active, select:focus, select:active { -moz-box-shadow: #0066ff 0 0 7px; -webkit-box-shadow: #0066ff 0 0 7px; -o-box-shadow: #0066ff 0 0 7px; box-shadow: #0066ff 0 0 7px; z-index: 1; }
+input, input optgroup, button, button optgroup, textarea, textarea optgroup, select, select optgroup { margin: 0; padding: 0; border: 0; outline: 0; }
 
-.textinput, textarea, input[type=text], input[type=password], input[type=email], input[type=url], input[type=tel], input[type=date], input[type=datetime], input[type=datetime-local], input[type=month], input[type=week], input[type=time], input[type=number], input[type=range], input[type=search], input[type=color] { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 0.875em; line-height: 1.714em; border-style: solid; border-width: 0.071em; padding: 0.357em; margin-bottom: 0.75em; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; width: 100%; border-color: #4c4c4c; height: 2.571em; }
+optgroup { color: #4c4c4c; font-style: normal; font-weight: normal; }
+
+.textinput, textarea, select, input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="tel"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="time"], input[type="number"], input[type="search"], input[type="color"] { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 0.875em; line-height: 1.714em; border-style: solid; border-width: 0.071em; padding: 0.357em; margin-bottom: 0.857em; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; width: 100%; background-color: white; color: #4c4c4c; border-color: #4c4c4c; height: 2.571em; outline: 0; -webkit-appearance: none; }
+.ie7 .textinput, .ie7 textarea, .ie7 select, .ie7 input[type="text"], .ie7 input[type="password"], .ie7 input[type="email"], .ie7 input[type="url"], .ie7 input[type="tel"], .ie7 input[type="date"], .ie7 input[type="datetime"], .ie7 input[type="datetime-local"], .ie7 input[type="month"], .ie7 input[type="week"], .ie7 input[type="time"], .ie7 input[type="number"], .ie7 input[type="search"], .ie7 input[type="color"] { height: auto; }
+.textinput [disabled], textarea [disabled], select [disabled], input[type="text"] [disabled], input[type="password"] [disabled], input[type="email"] [disabled], input[type="url"] [disabled], input[type="tel"] [disabled], input[type="date"] [disabled], input[type="datetime"] [disabled], input[type="datetime-local"] [disabled], input[type="month"] [disabled], input[type="week"] [disabled], input[type="time"] [disabled], input[type="number"] [disabled], input[type="search"] [disabled], input[type="color"] [disabled] { background-color: #eeeeee; color: #727272; }
 
 input:invalid, textarea:invalid { -moz-border-radius: 1px; -webkit-border-radius: 1px; -o-border-radius: 1px; -ms-border-radius: 1px; -khtml-border-radius: 1px; border-radius: 1px; -moz-box-shadow: 0 0 0.25em red; -webkit-box-shadow: 0 0 0.25em red; -o-box-shadow: 0 0 0.25em red; box-shadow: 0 0 0.25em red; }
 .no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; }
 
-textarea { height: 11.143em; vertical-align: text-bottom; }
+textarea { height: auto; overflow: auto; resize: vertical; }
 
-input[type=search] { -webkit-appearance: none; }
-input[type=search]::-webkit-search-decoration { display: none; }
+select { background-image: url('../images/forms/select_arrow.gif?1295396421'); background-repeat: no-repeat; background-position: right center; padding-right: 20px; }
+select[multiple] { height: auto; background-image: none; padding: 0; }
 
-button { width: auto; overflow: visible; }
+.button, button, input[type="reset"], input[type="submit"], input[type="button"] { -moz-border-radius: 1em; -webkit-border-radius: 1em; -o-border-radius: 1em; -ms-border-radius: 1em; -khtml-border-radius: 1em; border-radius: 1em; background: #dddddd url('../images/forms/button.png?1295396398') repeat-x; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #dddddd)); background: -moz-linear-gradient(top center, #ffffff 0%, #dddddd 100%); background: linear-gradient(top center, #ffffff 0%, #dddddd 100%); border-style: solid; border-width: 0.063em; padding: 0.313em; padding-left: 1em; padding-right: 1em; text-shadow: white 0 1px 1px; margin-bottom: 0.75em; border-color: #dddddd #bbbbbb #999999; cursor: pointer; color: #333333; font: inherit; outline: 0; overflow: visible; width: auto; }
+.button[disabled], button[disabled], input[disabled][type="reset"], input[disabled][type="submit"], input[disabled][type="button"] { color: #888888; }
+
+input { vertical-align: middle; }
+input[type="range"] { width: 100%; }
+input[type="search"] { -webkit-appearance: none; }
+input[type="search"]::-webkit-search-decoration { display: none; }
 
 /* Helpers ------------------------------------------------------------------- */
 .full, header[role="banner"], div[role="main"], footer[role="contentinfo"] { clear: both; margin-right: 1.639%; margin-left: 1.639%; *zoom: 1; }
Add a comment to this file

static/images/forms/button.png

Added
New image
Add a comment to this file

static/images/forms/select_arrow.gif

Added
New image
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.