Contact Form: Update CSS stylesheet (#12219)

* Display input elements full-width on small screen and when using the column block
* On large screens, set input elements to 50% and texture to 100%
* Replace px with em
* Add style for Checkbox Multiple
* Set font-weight of Radio/Checkbox labels to normal so we can differentiate with actual labels

modules/contact-form/css/grunion.css

@@ -14,47 +14,59 @@
 
 .contact-form input[type='text'],
 .contact-form input[type='email'],
+.contact-form input[type='tel'],
 .contact-form input[type='url'] {
-	width: 300px;
-	max-width: 98%;
-	margin-bottom: 13px;
+	box-sizing: border-box;
+	margin-bottom: 0.75em;
+	width: 100%;
 }
 
 .contact-form select {
-	margin-bottom: 13px;
+	margin-bottom: 0.75em;
 }
 
 .contact-form textarea {
-	height: 200px;
-	width: 80%;
+	box-sizing: border-box;
 	float: none;
-	margin-bottom: 13px;
+	height: 200px;
+	margin-bottom: 0.75em;
+	width: 100%;
 }
 
 .contact-form input[type='radio'],
 .contact-form input[type='checkbox'] {
 	float: none;
-	margin-bottom: 13px;
+	margin-bottom: 0.75em;
+	vertical-align: bottom;
+	vertical-align: -webkit-baseline-middle;
+	vertical-align: -moz-middle-with-baseline;
 }
 
 .contact-form label {
-	margin-bottom: 3px;
+	margin-bottom: 0.25em;
 	float: none;
 	font-weight: bold;
 	display: block;
 }
 
 .contact-form label.checkbox,
+.contact-form label.checkbox-multiple,
 .contact-form label.radio {
-	margin-bottom: 3px;
+	margin-bottom: 0.25em;
 	float: none;
-	font-weight: bold;
+	font-weight: normal;
 	display: inline-block;
 }
 
+.contact-form .grunion-field-checkbox-wrap,
+.contact-form .grunion-field-checkbox-multiple-wrap,
+.contact-form .grunion-field-radio-wrap {
+	margin-bottom: 0.5em;
+}
+
 .contact-form label span {
 	color: #AAA;
-	margin-left: 4px;
+	margin-left: 0.25em;
 	font-weight: normal;
 }
 
@@ -74,11 +86,15 @@
 
 .textwidget .contact-form input[type='text'],
 .textwidget .contact-form input[type='email'],
+.textwidget .contact-form input[type='tel'],
 .textwidget .contact-form input[type='url'],
-.textwidget .contact-form textarea {
-	width: 250px;
-	max-width: 100%;
-	box-sizing: border-box;
+.textwidget .contact-form textarea,
+.wp-block-column .contact-form input[type='text'],
+.wp-block-column .contact-form input[type='email'],
+.wp-block-column .contact-form input[type='tel'],
+.wp-block-column .contact-form input[type='url'],
+.wp-block-column .contact-form textarea {
+	width: 100%;
 }
 
 #jetpack-check-feedback-spam {
@@ -89,3 +105,12 @@
 	display: inline-block;
 	margin-top: 7px;
 }
+
+@media only screen and (min-width: 600px) {
+	.contact-form input[type='text'],
+	.contact-form input[type='email'],
+	.contact-form input[type='tel'],
+	.contact-form input[type='url'] {
+		width: 50%;
+	}
+}