Revert "WebUI: Remove --cr-section mixin"

This reverts commit c222db59.

Reason for revert: Breaks layout of some Chrome OS settings pages
including network details and displays.

Original change's description:
> WebUI: Remove --cr-section mixin
>
> The CSS rules in the --cr-section mixin are moved into the only CSS
> class left using it. A TODO has been added to address the similarity
> of cr-row and settings-box, but this should not be considered high
> priority.
>
> Bug: 973674
> Change-Id: I34437c39cb38b6fe0568a243a1eee41900ab6490
> Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2216646
> Reviewed-by: dpapad <dpapad@chromium.org>
> Commit-Queue: John Lee <johntlee@chromium.org>
> Cr-Commit-Position: refs/heads/master@{#773978}

TBR=dpapad@chromium.org,johntlee@chromium.org

# Not skipping CQ checks because original CL landed > 1 day ago.

Bug: 973674
Fixed: 1091386, 1091389
Change-Id: Ief47ae2ffb0f7cbfb0e5e0c7331544214a6ac0e8
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2231462Reviewed-by: Jon Mann <jonmann@chromium.org>
Commit-Queue: Jon Mann <jonmann@chromium.org>
Cr-Commit-Position: refs/heads/master@{#775249}

chrome/browser/resources/settings/settings_shared_css.html

@@ -222,10 +222,54 @@
         min-height: var(--settings-row-three-line-min-height);
       }
 
+      /* A settings-box is a horizontal row of text or controls within a
+       * setting section (page or subpage). */
+      .settings-box {
+        @apply --cr-section;
+      }
+
+      .settings-box.no-padding {
+        padding: 0;
+      }
+
+      .settings-box.no-padding .margin-matches-padding {
+        margin: 0 var(--cr-section-padding);
+      }
+
+      .settings-box.no-padding > .link-wrapper {
+        padding: 0 var(--cr-section-padding);
+      }
+
+      .settings-box.two-line {
+        min-height: var(--settings-row-two-line-min-height);
+      }
+
+      .settings-box.three-line {
+        min-height: var(--settings-row-three-line-min-height);
+      }
+
+      .settings-box-text {
+        box-sizing: border-box;
+        padding-bottom: var(--cr-section-vertical-padding);
+        padding-top: var(--cr-section-vertical-padding);
+      }
+
+      /* We use an explicit tag to remove the top border, rather than a
+       * :first-of-type modifier. This is a conscious choice, please consult
+       * with dbeam@ or dschuyler@ prior to changing it. */
+      .settings-box.first,
+      .settings-box.continuation {
+        border-top: none;
+      }
+
       h2.first {
         padding-top: 0;
       }
 
+      .settings-box.block {
+        display: block;
+      }
+
       /* A start-aligned column. */
       .single-column {
         align-items: flex-start;
@@ -233,6 +277,17 @@
         justify-content: center;
       }
 
+      /* A settings-box with no height other than the separator line. */
+      .settings-box.line-only {
+        min-height: 0;
+      }
+
+      /* A settings-box that is embedded in another settings-box (e.g. a control
+       * that is associated with a toggle button). */
+      .settings-box.embedded {
+        padding-inline-start: var(--cr-section-indent-padding);
+      }
+
       /* The lower line of text in a two-line row. */
       /* TODO: Remove and merge with .cr-secondary-text. */
       .secondary {
@@ -249,6 +304,24 @@
         margin: 0;
       }
 
+      /* The middle part (horizontally) of a row. */
+      .settings-box .middle {
+        align-items: center;
+        flex: auto;
+        padding-inline-start: 16px;
+      }
+
+      .settings-box .middle.two-line,
+      .settings-box .start.two-line {
+        display: flex;
+      }
+
+      /* The start (left in LTR) part (horizontally) of a row. */
+      .settings-box .start {
+        align-items: center;
+        flex: auto;
+      }
+
       /* For grouping elements with common flex options. */
       .settings-row {
         align-items: center;
@@ -287,6 +360,10 @@
         margin: 0 16px;
       }
 
+      .settings-box.no-padding > .link-wrapper ~ .separator {
+        margin: 0;
+      }
+
       .column-header {
         color: var(--cr-secondary-text-color);
         font-size: inherit;
@@ -310,91 +387,6 @@
         direction: ltr;
         unicode-bidi: embed;
       }
-
-<if expr='chromeos'>
-      /* A settings-box is a horizontal row of text or controls within a
-       * setting section (page or subpage).
-       * TODO: Merge with cr-row since these classes share the same styles.
-       * The settings-box class is only used on the OS Settings pages. */
-      :host-context([cros]) .settings-box {
-        align-items: center;
-        border-top: var(--cr-separator-line);
-        display: flex;
-        min-height: var(--cr-section-min-height);
-        padding: 0 var(--cr-section-padding);
-      }
-
-      :host-context([cros]) .settings-box.no-padding {
-        padding: 0;
-      }
-
-      :host-context([cros]) .settings-box.no-padding .margin-matches-padding {
-        margin: 0 var(--cr-section-padding);
-      }
-
-      :host-context([cros]) .settings-box.no-padding > .link-wrapper {
-        padding: 0 var(--cr-section-padding);
-      }
-
-      :host-context([cros]) .settings-box.two-line {
-        min-height: var(--settings-row-two-line-min-height);
-      }
-
-      :host-context([cros]) .settings-box.three-line {
-        min-height: var(--settings-row-three-line-min-height);
-      }
-
-      :host-context([cros]) .settings-box-text {
-        box-sizing: border-box;
-        padding-bottom: var(--cr-section-vertical-padding);
-        padding-top: var(--cr-section-vertical-padding);
-      }
-
-      /* We use an explicit tag to remove the top border, rather than a
-       * :first-of-type modifier. This is a conscious choice, please consult
-       * with dbeam@ or dschuyler@ prior to changing it. */
-      :host-context([cros]) .settings-box.first,
-      :host-context([cros]) .settings-box.continuation {
-        border-top: none;
-      }
-
-      :host-context([cros]) .settings-box.block {
-        display: block;
-      }
-
-      /* A settings-box with no height other than the separator line. */
-      :host-context([cros]) .settings-box.line-only {
-        min-height: 0;
-      }
-
-      /* A settings-box that is embedded in another settings-box (e.g. a control
-       * that is associated with a toggle button). */
-      :host-context([cros]) .settings-box.embedded {
-        padding-inline-start: var(--cr-section-indent-padding);
-      }
-
-      /* The middle part (horizontally) of a row. */
-      :host-context([cros]) .settings-box .middle {
-        align-items: center;
-        flex: auto;
-        padding-inline-start: 16px;
-      }
-
-      :host-context([cros]) .settings-box .middle.two-line,
-      :host-context([cros]) .settings-box .start.two-line {
-        display: flex;
-      }
-
-      /* The start (left in LTR) part (horizontally) of a row. */
-      :host-context([cros]) .settings-box .start {
-        align-items: center;
-        flex: auto;
-      }
-
-      :host-context([cros]) .settings-box.no-padding > .link-wrapper ~ .separator {
-        margin: 0;
-      }
-</if>
     </style>
   </template>
 </dom-module>

ui/webui/resources/cr_elements/shared_vars_css.html

@@ -155,6 +155,16 @@
     --cr-section-indent-padding: calc(
         var(--cr-section-padding) + var(--cr-section-indent-width));
 
+    /* TODO(crbug.com/973674): Do not use this mixin. Use the class cr-row
+     * from shared_style_css.html instead. */
+    --cr-section: {
+      align-items: center;
+      border-top: var(--cr-separator-line);
+      display: flex;
+      min-height: var(--cr-section-min-height);
+      padding: 0 var(--cr-section-padding);
+    }
+
     --cr-section-vertical-margin: 21px;
 
     --cr-centered-card-max-width: 680px;