docs: adjust element spacing within examples (#15369)

swseverance · josephperrott · commit c8f9475151c2 · 2019-03-04T11:17:00.000-08:00
* Adjusts the amount of spacing between crowded UI elements in the following
  examples: button-toggle-appearance, datepicker-api, datepicker-color,
  datepicker-locale, datepicker-value, expansion-steps, focus-monitor-directives,
  focus-monitor-focus-via, focus-monitor-overview, form-field-label, input-form,
  paginator-configurable, sidenav-backdrop, snack-bar-overview, snack-bar-position,
  text-field-autofill-directive, text-field-autofill-monitor, text-field-autosize-textarea
diff --git a/src/material-examples/button-toggle-appearance/button-toggle-appearance-example.css b/src/material-examples/button-toggle-appearance/button-toggle-appearance-example.css
@@ -1 +1,3 @@
-/** No CSS for this example */
+mat-button-toggle-group {
+  margin-left: 12px;
+}
diff --git a/src/material-examples/datepicker-api/datepicker-api-example.css b/src/material-examples/datepicker-api/datepicker-api-example.css
@@ -1 +1,3 @@
-/** No CSS for this example */
+mat-form-field {
+  margin-right: 12px;
+}
diff --git a/src/material-examples/datepicker-color/datepicker-color-example.css b/src/material-examples/datepicker-color/datepicker-color-example.css
@@ -1 +1,3 @@
-/** No CSS for this example */
+mat-form-field {
+  margin-right: 12px;
+}
diff --git a/src/material-examples/datepicker-locale/datepicker-locale-example.css b/src/material-examples/datepicker-locale/datepicker-locale-example.css
@@ -1 +1,3 @@
-/** No CSS for this example */
+mat-form-field {
+  margin-right: 12px;
+}
diff --git a/src/material-examples/datepicker-value/datepicker-value-example.css b/src/material-examples/datepicker-value/datepicker-value-example.css
@@ -1 +1,3 @@
-/** No CSS for this example */
+mat-form-field {
+  margin-right: 12px;
+}
diff --git a/src/material-examples/expansion-steps/expansion-steps-example.css b/src/material-examples/expansion-steps/expansion-steps-example.css
@@ -7,3 +7,7 @@
   justify-content: space-between;
   align-items: center;
 }
+
+mat-form-field {
+  margin-right: 12px;
+}
diff --git a/src/material-examples/focus-monitor-directives/focus-monitor-directives-example.css b/src/material-examples/focus-monitor-directives/focus-monitor-directives-example.css
@@ -17,3 +17,7 @@
 .example-focus-monitor .cdk-program-focused {
   background: rgba(255, 0, 255, 0.5);
 }
+
+button {
+  margin-right: 12px;
+}
diff --git a/src/material-examples/focus-monitor-focus-via/focus-monitor-focus-via-example.css b/src/material-examples/focus-monitor-focus-via/focus-monitor-focus-via-example.css
@@ -21,3 +21,8 @@
 .example-focus-monitor button:focus {
   box-shadow: 0 0 30px cyan;
 }
+
+mat-form-field,
+button {
+  margin-right: 12px;
+}
diff --git a/src/material-examples/focus-monitor-overview/focus-monitor-overview-example.css b/src/material-examples/focus-monitor-overview/focus-monitor-overview-example.css
@@ -17,3 +17,7 @@
 .example-focus-monitor .cdk-program-focused {
   background: rgba(255, 0, 255, 0.5);
 }
+
+button {
+  margin-right: 12px;
+}
diff --git a/src/material-examples/form-field-label/form-field-label-example.css b/src/material-examples/form-field-label/form-field-label-example.css
@@ -16,5 +16,5 @@
 }
 
 .example-container .mat-radio-button {
-  margin: 0 5px;
+  margin: 0 12px;
 }
diff --git a/src/material-examples/input-form/input-form-example.css b/src/material-examples/input-form/input-form-example.css
@@ -7,3 +7,7 @@
 .example-full-width {
   width: 100%;
 }
+
+td {
+  padding-right: 8px;
+}
diff --git a/src/material-examples/paginator-configurable/paginator-configurable-example.css b/src/material-examples/paginator-configurable/paginator-configurable-example.css
@@ -1 +1,3 @@
-/** No CSS for this example */
+mat-form-field {
+  margin-right: 12px;
+}
diff --git a/src/material-examples/sidenav-backdrop/sidenav-backdrop-example.css b/src/material-examples/sidenav-backdrop/sidenav-backdrop-example.css
@@ -1,6 +1,13 @@
 .example-container {
   width: 400px;
   height: 200px;
-  margin: 10px;
+  margin: 12px;
   border: 1px solid #555;
 }
+
+mat-drawer-content {
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
diff --git a/src/material-examples/snack-bar-overview/snack-bar-overview-example.css b/src/material-examples/snack-bar-overview/snack-bar-overview-example.css
@@ -1 +1,3 @@
-/** No CSS for this example */
+mat-form-field {
+  margin-right: 12px;
+}
diff --git a/src/material-examples/snack-bar-position/snack-bar-position-example.css b/src/material-examples/snack-bar-position/snack-bar-position-example.css
@@ -1 +1,3 @@
-/** No CSS for this example */
+mat-form-field {
+  margin-right: 12px;
+}
diff --git a/src/material-examples/text-field-autofill-directive/text-field-autofill-directive-example.css b/src/material-examples/text-field-autofill-directive/text-field-autofill-directive-example.css
@@ -1 +1,3 @@
-/** No CSS for this example */
+mat-form-field {
+  margin-right: 12px;
+}
diff --git a/src/material-examples/text-field-autofill-monitor/text-field-autofill-monitor-example.css b/src/material-examples/text-field-autofill-monitor/text-field-autofill-monitor-example.css
@@ -1 +1,3 @@
-/** No CSS for this example */
+mat-form-field {
+  margin-right: 12px;
+}
diff --git a/src/material-examples/text-field-autosize-textarea/text-field-autosize-textarea-example.css b/src/material-examples/text-field-autosize-textarea/text-field-autosize-textarea-example.css
@@ -1 +1,3 @@
-/** No CSS for this example */
+mat-form-field {
+  margin-right: 12px;
+}

Original file line number	Diff line number	Diff line change
`@@ -7,3 +7,7 @@`
`7`	`7`	`justify-content: space-between;`
`8`	`8`	`align-items: center;`
`9`	`9`	`}`
	`10`	`+`
	`11`	`+mat-form-field {`
	`12`	`+ margin-right: 12px;`
	`13`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -17,3 +17,7 @@`
`17`	`17`	`.example-focus-monitor .cdk-program-focused {`
`18`	`18`	`background: rgba(255, 0, 255, 0.5);`
`19`	`19`	`}`
	`20`	`+`
	`21`	`+button {`
	`22`	`+ margin-right: 12px;`
	`23`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -21,3 +21,8 @@`
`21`	`21`	`.example-focus-monitor button:focus {`
`22`	`22`	`box-shadow: 0 0 30px cyan;`
`23`	`23`	`}`
	`24`	`+`
	`25`	`+mat-form-field,`
	`26`	`+button {`
	`27`	`+ margin-right: 12px;`
	`28`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -16,5 +16,5 @@`
`16`	`16`	`}`
`17`	`17`
`18`	`18`	`.example-container .mat-radio-button {`
`19`		`- margin: 0 5px;`
	`19`	`+ margin: 0 12px;`
`20`	`20`	`}`