diff --git a/stylesheets/forms.css b/stylesheets/forms.css index b954a16eb7..cbea89e6ae 100644 --- a/stylesheets/forms.css +++ b/stylesheets/forms.css @@ -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 ----------------------------------------- */ diff --git a/stylesheets/mobile.css b/stylesheets/mobile.css index 9930b93a71..b02c2ecf46 100644 --- a/stylesheets/mobile.css +++ b/stylesheets/mobile.css @@ -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; } } @@ -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; } @@ -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; } - } \ No newline at end of file + dl.contained.tabs.mobile dd a { padding: 18px 20px; } + dl.nice.contained.tabs.mobile dd a { padding: 18px 20px; } + }