Improve options page style

wakashige · Aug 4, 2017 · dc24726 · dc24726
1 parent 04141f6
commit dc24726
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 28 deletions.
diff --git a/css/sass/cmb2.scss b/css/sass/cmb2.scss
@@ -8,6 +8,7 @@
 @import "partials/main_wrap";
 @import "partials/post_metaboxes";
 @import "partials/context_metaboxes";
+@import "partials/options-page";
 @import "partials/misc";
 @import "partials/sidebar_placements";
 @import "partials/collapsible_ui";

diff --git a/css/sass/partials/_collapsible_ui.scss b/css/sass/partials/_collapsible_ui.scss
@@ -1,7 +1,4 @@
 .cmb2-metabox {
-	.cmb-type-group {
-		max-width: 1000px
-	}
 	.cmbhandle {
 		color: #aaa;
 		float: right;

diff --git a/css/sass/partials/_main_wrap.scss b/css/sass/partials/_main_wrap.scss
@@ -120,9 +120,7 @@ Main Wrap
 		}
 	}
 
-	// /**
-	//  * Color picker
-	//  */
+	// Color picker
 	.wp-color-result,
 	.wp-picker-input-wrap {
 		vertical-align: middle;
@@ -145,7 +143,7 @@ Main Wrap
 
 		&.cmb-repeat .cmb2-metabox-description {
 			padding-top: 0;
-			padding-bottom: 1.8em;
+			padding-bottom: 1em;
 		}
 	}
 
@@ -183,10 +181,11 @@ Main Wrap
 .cmb-repeatable-grouping {
 	border: 1px solid $light-gray;
 	padding: 0 1em;
-	max-width: 1000px;
+
 	&.cmb-row {
 		margin: 0 0 0.8em;
 	}
+
 	+ .cmb-repeatable-grouping {
 	}
 }

diff --git a/css/sass/partials/_misc.scss b/css/sass/partials/_misc.scss
@@ -14,22 +14,13 @@ Misc.
 	}
 }
 
-.cmb2-options-page {
-	.cmb2-metabox-title {
-		font-size: 1.3em;
-		margin: 1em 0;
-		+ p.cmb2-metabox-description {
-			margin-top: -1.6em;
-			margin-bottom: .8em;
-		}
-	}
-}
 .cmb2-postbox, .cmb2-no-box-wrap {
 	.cmb-spinner {
 		float: left;
 		display: none;
 	}
 }
+
 .cmb-spinner {
 	display: none;
 	&.is-active {

diff --git a/css/sass/partials/_mixins.scss b/css/sass/partials/_mixins.scss
@@ -26,16 +26,8 @@
 
 	label {
 		display: block;
-		margin-top: 0em;
-		padding-bottom: 5px;
-
-		&:after {
-			border-bottom: 1px solid $light-gray;
-			content: '';
-			clear: both;
-			display: block;
-			padding-top: .4em;
-		}
+		margin-top: 0;
+		margin-bottom: 0.5em;
 	}
 }
 

diff --git a/css/sass/partials/_options-page.scss b/css/sass/partials/_options-page.scss
@@ -0,0 +1,70 @@
+/*--------------------------------------------------------------
+Options page
+--------------------------------------------------------------*/
+.cmb2-options-page {
+	max-width: 1200px;
+
+	&.wrap > h2 {
+		margin-bottom: 1em;
+	}
+
+	.cmb2-metabox > .cmb-row {
+		padding: 1em;
+		margin-top: -1px;
+		background: $white;
+		border: 1px solid $light-gray;
+		box-shadow: 0 1px 1px rgba(black, 0.05);
+
+		> .cmb-th {
+			padding: 0;
+			font-weight: initial;
+		}
+
+		> .cmb-th + .cmb-td {
+			float: none;
+			padding: 0 0 0 1em;
+			margin-left: 200px;
+
+			@media (max-width: $mobile-break) {
+				padding: 0;
+				margin-left: 0;
+			}
+		}
+	}
+
+	// Title field style.
+	.cmb2-wrap .cmb-type-title {
+		margin-top: 1em;
+		padding: 0.6em 1em;
+		background-color: #fafafa;
+
+		.cmb2-metabox-title {
+			font-size: 12px;
+			margin-top: 0;
+			margin-bottom: 0;
+			text-transform: uppercase;
+		}
+
+		.cmb2-metabox-description {
+			padding-top: 0.25em;
+		}
+	}
+
+	.cmb-repeatable-group {
+		.cmb-group-description .cmb-th {
+			padding: 0 0 0.8em 0;
+		}
+
+		.cmb-group-name {
+			font-size: 16px;
+			margin-top: 0;
+			margin-bottom: 0;
+		}
+
+		.cmb-th > .cmb2-metabox-description {
+			font-weight: 400;
+			padding-bottom: 0 !important;
+		}
+	}
+
+}