Skip to content

Commit

Permalink
Adding style selectors for semantic forms
Browse files Browse the repository at this point in the history 
Maintain existing CSS selectors and add to them selectors to work with semantic
forms so that the both types of form construction are supported.
  • Loading branch information
@xyu
xyu authored and Jonathan Smiley committed Oct 26, 2011
1 parent 5fa35fd commit 1c61574
Show file tree
Hide file tree
Showing 2 changed files with 51 additions and 46 deletions.
73 changes: 39 additions & 34 deletions stylesheets/forms.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,52 +10,57 @@

form { margin: 0 0 18px; }
form label { display: block; font-size: 13px; line-height: 18px; cursor: pointer; margin-bottom: 9px; }
input.input-text, textarea { border-right: 1px solid #bbb; border-bottom: 1px solid #bbb; }
input.input-text, textarea, select { display: block; margin-bottom: 9px; }
label + input.input-text, label + textarea, label + select, label + div.dropdown, select + div.dropdown { margin-top: -9px; }

div.form-field input, input.input-text, textarea { border-right: 1px solid #bbb; border-bottom: 1px solid #bbb; }
div.form-field input, input.input-text, textarea, select { display: block; margin-bottom: 9px; }
div.form-field label + input, label + input.input-text, label + textarea, label + select, label + div.dropdown, select + div.dropdown { margin-top: -9px; }

/* Text input and textarea font and padding */
input.input-text, textarea { font-size: 13px; padding: 4px 3px 2px; outline: none !important; background: #fff; }
input.input-text.oversize, textarea.oversize { font-size: 18px !important; padding: 4px 5px !important; }
input.input-text:focus, textarea:focus { background: #f9f9f9; }
div.form-field input, input.input-text, textarea { font-size: 13px; padding: 4px 3px 2px; outline: none !important; background: #fff; }
div.form-field input.oversize, input.input-text.oversize, textarea.oversize { font-size: 18px !important; padding: 4px 5px !important; }
div.form-field input:focus, input.input-text:focus, textarea:focus { background: #f9f9f9; }

/* Inlined Label Style */
input.placeholder, textarea.placeholder { color: #888; }

/* Text input and textarea sizes */
input.input-text, textarea { width: 254px; }
input.small, textarea.small { width: 134px; }
input.medium, textarea.medium { width: 254px; }
input.large, textarea.large { width: 434px; }
div.form-field input, input.input-text, textarea { width: 254px; }
div.form-field input.small, input.small, textarea.small { width: 134px; }
div.form-field input.medium, input.medium, textarea.medium { width: 254px; }
div.form-field input.large, input.large, textarea.large { width: 434px; }

/* Fieldsets */
form fieldset { padding: 9px 9px 2px 9px; border: solid 1px #ddd; margin: 18px 0; }


/* Inlined Radio & Checkbox */
div.form-field input[type=radio], div.form-field input[type=checkbox] { display: inline; width:auto; margin-bottom:0; }

/* Errors */
input.input-text.red { border-color: red; background-color: rgba(255,0,0,0.15); }
label.red { color: red; }
small.error { margin-top: -6px; display: block; margin-bottom: 9px; font-size: 11px; color: red; width: 260px; }
.small + .error { width: 140px; }
.medium + .error { width: 260px; }
.large + .error { width: 440px; }
div.form-field.error input, input.input-text.red { border-color: red; background-color: rgba(255,0,0,0.15); }
div.form-field.error label, label.red { color: red; }
div.form-field.error small, small.error { margin-top: -6px; display: block; margin-bottom: 9px; font-size: 11px; color: red; width: 260px; }

div.form-field.error .small + small, .small + .error { width: 140px; }
div.form-field.error .medium + small, .medium + .error { width: 260px; }
div.form-field.error .large + small, .large + .error { width: 440px; }

/* -----------------------------------------
Nicer Forms
----------------------------------------- */
form.nice input.input-text, form.nice textarea { border: solid 1px #bbb; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; }
form.nice input.input-text, form.nice textarea { font-size: 13px; padding: 6px 3px 4px; outline: none !important; background: url(../images/misc/input-bg.png) #fff; }
form.nice input.input-text:focus, form.nice textarea:focus { background-color: #f9f9f9; }
form.nice div.form-field input, form.nice input.input-text, form.nice textarea { border: solid 1px #bbb; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; }
form.nice div.form-field input, form.nice input.input-text, form.nice textarea { font-size: 13px; padding: 6px 3px 4px; outline: none !important; background: url(../images/misc/input-bg.png) #fff; }
form.nice div.form-field input:focus, form.nice input.input-text:focus, form.nice textarea:focus { background-color: #f9f9f9; }

form.nice fieldset { border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; }

form.nice small.error { padding: 6px 4px; border: solid 0px red; border-width: 0px 1px 1px 1px; margin-top: -10px; background: red; color: #fff; font-size: 12px; font-weight: bold; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; -webkit-border-bottom-left-radius: 2px; -webkit-border-bottom-right-radius: 2px; -moz-border-radius-bottomleft: 2px; -moz-border-radius-bottomright: 2px; }

form.nice .small + .error { width: 132px; }
form.nice .medium + .error { width: 252px; }
form.nice .large + .error { width: 432px; }


form.nice div.form-field input[type=radio], form.nice div.form-field input[type=checkbox] { display: inline; width:auto; margin-bottom:0; }

form.nice div.form-field.error small, form.nice small.error { padding: 6px 4px; border: solid 0px red; border-width: 0px 1px 1px 1px; margin-top: -10px; background: red; color: #fff; font-size: 12px; font-weight: bold; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; -webkit-border-bottom-left-radius: 2px; -webkit-border-bottom-right-radius: 2px; -moz-border-radius-bottomleft: 2px; -moz-border-radius-bottomright: 2px; }

form.nice div.form-field.error .small + small, form.nice .small + .error { width: 132px; }
form.nice div.form-field.error .medium + small, form.nice .medium + .error { width: 252px; }
form.nice div.form-field.error .large + small, form.nice .large + .error { width: 432px; }

/* -----------------------------------------
Custom Forms
----------------------------------------- */
Expand Down
24 changes: 12 additions & 12 deletions stylesheets/mobile.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,13 +72,13 @@


@media only screen and (max-width: 767px) {
input.input-text, input.input-text.oversize, textarea,
form.nice input.input-text, form.nice input.input-text.oversize, form.nice textarea { display: block; width: 96%; padding: 6px 2% 4px; font-size: 18px; }
form.nice input.input-text, form.nice input.input-text.oversize, form.nice textarea { -webkit-border-radius: 2px; -moz-border-radius: 2px; }
form.nice small.error { padding: 6px 2%; display: block; }
form.nice .small + .error { width: auto; }
form.nice .medium + .error { width: auto; }
form.nice .large + .error { width: auto; }
div.form-field input, div.form-field input.small, div.form-field input.medium, div.form-field input.large, div.form-field input.oversize, input.input-text, input.input-text.oversize, textarea,
form.nice div.form-field input, form.nice div.form-field input.oversize, form.nice input.input-text, form.nice input.input-text.oversize, form.nice textarea { display: block; width: 96%; padding: 6px 2% 4px; font-size: 18px; }
form.nice div.form-field input, form.nice div.form-field input.oversize, form.nice input.input-text, form.nice input.input-text.oversize, form.nice textarea { -webkit-border-radius: 2px; -moz-border-radius: 2px; }
form.nice div.form-field.error small, form.nice small.error { padding: 6px 2%; display: block; }
form.nice div.form-field.error .small + small, form.nice .small + .error { width: auto; }
form.nice div.form-field.error .medium + small, form.nice .medium + .error { width: auto; }
form.nice div.form-field.error .large + small, form.nice .large + .error { width: auto; }
}


Expand All @@ -97,8 +97,8 @@
@media only screen and (max-width: 767px) {
dl.tabs.mobile, dl.nice.tabs.mobile { width: auto; margin: 20px -20px 40px; height: auto; }
dl.tabs.mobile dt, dl.tabs.mobile dd, dl.nice.tabs.mobile dt, dl.nice.tabs.mobile dd { float: none; height: auto; }
dl.tabs.mobile dd a { display: block; width: auto; height: auto; padding: 18px 20px; line-height: 1; border: solid 0px #ccc; border-width: 1px 0px 0px; margin: 0; color: #555; background: #eee; font-size: 15px; font-size: 1.5rem; }

dl.tabs.mobile dd a { display: block; width: auto; height: auto; padding: 18px 20px; line-height: 1; border: solid 0px #ccc; border-width: 1px 0px 0px; margin: 0; color: #555; background: #eee; font-size: 15px; font-size: 1.5rem; }
dl.tabs.mobile dd a.active { height: auto; margin: 0; border-width: 1px 0px 0px; }

.nice.tabs.mobile { border-bottom: solid 1px #ccc; height: auto; }
Expand All @@ -107,6 +107,6 @@
.nice.tabs.mobile dd:first-child a.active { margin: 0; }

dl.contained.mobile, dl.nice.contained.mobile { margin-bottom: 0px; }
dl.contained.tabs.mobile dd a { padding: 18px 20px; }
dl.nice.contained.tabs.mobile dd a { padding: 18px 20px; }
}
dl.contained.tabs.mobile dd a { padding: 18px 20px; }
dl.nice.contained.tabs.mobile dd a { padding: 18px 20px; }
}

0 comments on commit 1c61574

Please sign in to comment.