WebUI[MD refresh]: style cr-radio-button closer to paper-radio-button

A min-height was only supposed to apply within settings, so this CL
moves that back.

Even after that though, the cr-radio-button would have a forced 40px
height due to how disc-wrapper and ripples were styled. This CL adjusts
the styling such that the circle only takes up 16x16 space in the layout,
and instead the ripple is absolutely positioned and out of the layout.

Note that settings has styling to override min-height and padding
of cr-radio-buttons, so visuals before and after this CL is unchanged, but
this will make replacing paper-radio-button with cr-radio-button
outside of settings easier.

Bug: 840527
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: Idc7d52cd8ced581bd81ac682cadf97ae4948fb55
Reviewed-on: https://chromium-review.googlesource.com/1060517Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Commit-Queue: Scott Chen <scottchen@chromium.org>
Cr-Commit-Position: refs/heads/master@{#559341}

chrome/browser/resources/settings/settings_shared_css.html

@@ -105,6 +105,11 @@
         color: var(--google-blue-500);
       }
 
+      controlled-radio-button,
+      cr-radio-button {
+        min-height: var(--settings-row-min-height);
+      }
+
       paper-radio-group {
         width: 100%;
       }

ui/webui/resources/cr_elements/cr_radio_button/cr_radio_button_style_css.html

@@ -17,7 +17,6 @@
         align-items: center;
         display: flex;
         flex-shrink: 0;
-        min-height: 48px;
         outline: none;
       }
 
@@ -51,19 +50,15 @@
       }
 
       .disc-wrapper {
-        height: var(--cr-radio-button-ink-size);
-        margin: 0 calc(-1 * var(--ink-to-circle));
+        height: var(--cr-radio-button-size);
         position: relative;
-        width: var(--cr-radio-button-ink-size);
+        width: var(--cr-radio-button-size);
       }
 
       .disc-border,
       .disc {
         box-sizing: border-box;
         height: var(--cr-radio-button-size);
-        left: var(--ink-to-circle);
-        position: absolute;
-        top: var(--ink-to-circle);
         width: var(--cr-radio-button-size);
       }
 
@@ -77,6 +72,8 @@
 
       .disc {
         background-color: transparent;
+        position: absolute;
+        top: 0;
         transform: scale(0);
         transition: border-color 200ms, transform 200ms;
       }
@@ -89,6 +86,18 @@
       paper-ripple {
         --paper-ripple-opacity: 0.1;
         color: var(--google-grey-900);
+        height: var(--cr-radio-button-ink-size);
+        left: calc(-1 * var(--ink-to-circle));
+        pointer-events: none;
+        position: absolute;
+        top: calc(-1 * var(--ink-to-circle));
+        transition: color linear 80ms;
+        width: var(--cr-radio-button-ink-size);
+      }
+
+      :host-context([dir=rtl]) paper-ripple {
+        left: auto;
+        right: calc(-1 * var(--ink-to-circle));
       }
 
       :host([checked]) paper-ripple {