Browse Source

Shoreditch: Adds cleaner styles and spacing to Jetpack contact forms; better alignment for radio and checkbox labels with their form elements; removes bold font face from radio and checkbox labels. All styles prefaced with the body tag to override Jetpack's styles. This is not quite "there" yet, but Shoreditch doesn't use bold to denote label headers, so things look a bit off when you use radio/checkbox inputs; there's no visual hierarchy, and it's not currently possible to target only those radio/checkbox set labels without affecting others, which will change the theme's appearance. See #2

Caroline Moore 7 years ago
parent
commit
ecfe28b8a6
1 changed files with 34 additions and 0 deletions
  1. 34 0
      shoreditch/style.css

+ 34 - 0
shoreditch/style.css

@@ -2529,6 +2529,40 @@ p video {
 	margin-top: 0;
 }
 
+/*--------------------------------------------------------------
+## Jetpack Contact Forms
+/*--------------------------------------------------------------*/
+
+.site-content .contact-form input[type="radio"],
+.site-content .contact-form input[type="checkbox"] {
+	margin-bottom: 6px;
+	margin-right: .3em;
+	vertical-align: middle;
+}
+.site-content .contact-form label.checkbox,
+.site-content .contact-form label.checkbox-multiple,
+.site-content .contact-form label.radio {
+	font-weight: normal;
+	font-style: normal;
+	margin-bottom: .1875em;
+	float: none;
+	font-size: inherit;
+}
+.site-content .contact-form label {
+	margin-bottom: .1875em;
+}
+.site-content .contact-form > div {
+	margin-bottom: .75em;
+}
+.site-content .contact-form textarea,
+.site-content .contact-form input[type='text'],
+.site-content .contact-form input[type='email'],
+.site-content .contact-form input[type='url'],
+.site-content .contact-form select {
+	margin-bottom: .1875em;
+	max-width: 100%;
+}
+
 /*--------------------------------------------------------------
 ## MailChimp Subscriber Popup
 --------------------------------------------------------------*/