Use flex layout for fields

wpmetabox · Jul 1, 2021 · b07658e · b07658e
1 parent db06ef9
commit b07658e
Showing 1 changed file with 19 additions and 24 deletions.
diff --git a/css/style.css b/css/style.css
@@ -2,23 +2,19 @@
 -------------------------------------------------------------- */
 
 /* Clearfix for field */
-.rwmb-field:after {
-	content: " ";
-	display: table;
-	clear: both;
+.rwmb-field {
+	display: flex;
 }
 .rwmb-field:not(:last-of-type) {
 	margin: 0 0 12px;
 }
-.rwmb-label,
-.rwmb-input {
-	vertical-align: top;
-	float: left;
-	box-sizing: border-box;
-}
 .rwmb-label {
 	width: 25%;
 }
+.rwmb-input {
+	flex: 1;
+}
+
 .rwmb-label > label {
 	font-weight: 600;
 }
@@ -28,13 +24,6 @@
 	margin-left: 3px;
 }
 
-/* 75% if field has label, 100% if no label */
-.rwmb-input {
-	width: 100%;
-}
-.rwmb-label ~ .rwmb-input {
-	width: 75%;
-}
 .rwmb-input h4 {
 	margin: 0;
 }
@@ -88,7 +77,7 @@
 	box-shadow: none;
 }
 .rwmb-button.add-clone {
-	margin-top: 5px;
+	margin-top: 4px;
 }
 .rwmb-clone-icon {
 	cursor: move;
@@ -108,7 +97,7 @@
 /* jQuery validation */
 p.rwmb-error {
 	color: #dc3232;
-	margin: 2px 0 5px;
+	margin: 4px 0;
 	clear: both;
 }
 input.rwmb-error.rwmb-error,
@@ -135,17 +124,23 @@ select.rwmb-error {
 	width: 100%;
 }
 #side-sortables .rwmb-label {
-	margin-bottom: 3px;
+	margin-bottom: 4px;
 }
 
 /* Mobile style */
 @media (max-width: 1023px) {
-	.rwmb-label,
-	.rwmb-label ~ .rwmb-input {
-		width: 100%;
+	.rwmb-field {
+		flex-direction: column;
 	}
 	.rwmb-label {
-		margin-bottom: 3px;
+		width: 100%;
+		margin-bottom: 4px;
+	}
+}
+@media (max-width: 782px) {
+	.rwmb-input input[type="radio"],
+	.rwmb-input input[type="checkbox"] {
+		width: 1.5625em;
 	}
 }