Add rounded focus rings to cr-buttons

Sizes the buttons to 36px and styles them round.

Adds an outline when the cr-button gets focus using box-shadow.

Changes <files-ripple> and <files-toggle-ripple> to display:none
when files-ng is enabled, so they don't render.

Bug: 992823
Change-Id: Ia97652f330a7a721557fcc963ddb6787ec675d69
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2026768
Commit-Queue: Alex Danilo <adanilo@chromium.org>
Reviewed-by: Noel Gordon <noel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#740560}

ui/file_manager/file_manager/foreground/css/file_manager.css

@@ -467,6 +467,25 @@ body[type='open-multi-file'].check-select .dialog-header {
   z-index: 1;
 }
 
+.dialog-header.files-ng cr-button {
+  border: 1px solid transparent;
+  border-radius: 18px;
+  color: var(--google-grey-700);
+  height: 36px;
+  margin: 0 6px;
+  min-width: 36px;
+  --text-color: currentColor;
+}
+
+.dialog-header.files-ng cr-button:focus {
+  border: 1px solid var(--google-blue-600);
+}
+
+.dialog-header.files-ng files-ripple,
+.dialog-header.files-ng files-toggle-ripple {
+  display: none;
+}
+
 .dialog-header:not(.files-ng) button,
 .dialog-header:not(.files-ng) button:hover {
   color: white;
@@ -568,6 +587,12 @@ html[dir='rtl'] .dialog-header button.icon-button > files-toggle-ripple {
       url(../images/files/ui/2x/search_white.png) 2x);
 }
 
+.dialog-header.files-ng cr-button > .icon {
+  height: 20px;
+  padding: calc(8px - 1px);
+  width: 20px;
+}
+
 .dialog-header.files-ng #search-button > .icon {
   -webkit-mask-image: url(../images/files/ui/search.svg);
 }