docs: adjust element spacing within examples (#15369)

* 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

Author: swseverance

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;
+}

src/material-examples/datepicker-api/datepicker-api-example.css

@@ -1 +1,3 @@
-/** No CSS for this example */
+mat-form-field {
+  margin-right: 12px;
+}

src/material-examples/datepicker-color/datepicker-color-example.css

@@ -1 +1,3 @@
-/** No CSS for this example */
+mat-form-field {
+  margin-right: 12px;
+}

src/material-examples/datepicker-locale/datepicker-locale-example.css

@@ -1 +1,3 @@
-/** No CSS for this example */
+mat-form-field {
+  margin-right: 12px;
+}

src/material-examples/datepicker-value/datepicker-value-example.css

@@ -1 +1,3 @@
-/** No CSS for this example */
+mat-form-field {
+  margin-right: 12px;
+}

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;
+}

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;
+}

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;
+}

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;
+}

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;
 }

src/material-examples/input-form/input-form-example.css

@@ -7,3 +7,7 @@
 .example-full-width {
   width: 100%;
 }
+
+td {
+  padding-right: 8px;
+}

src/material-examples/paginator-configurable/paginator-configurable-example.css

@@ -1 +1,3 @@
-/** No CSS for this example */
+mat-form-field {
+  margin-right: 12px;
+}

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;
+}

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;
+}

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;
+}

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;
+}

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;
+}

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;
+}