WebUI: Remove --cr-text-elide mixin

The CSS for cropping overflowing text with an ellipsis is common
standard and never-changing, so having it as a mixin isn't as necessary.
So this CL just copies the CSS to the common classes and other specific
classes.

Bug: 973674
Change-Id: I1fdfbd4715cb6fcd31c82745edc6e0751bb181e0
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2116595Reviewed-by: Esmael Elmoslimany <aee@chromium.org>
Commit-Queue: John Lee <johntlee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#752676}

chrome/browser/resources/chromeos/edu_login/edu_login_css.html

@@ -24,7 +24,9 @@
     }
 
     .text-elide {
-      @apply --cr-text-elide;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
 
     .secondary {

chrome/browser/resources/settings/controls/settings_toggle_button.html

@@ -26,7 +26,9 @@
       }
 
       :host([elide-label]) .label {
-        @apply --cr-text-elide;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
 
       #outerRow {

chrome/browser/resources/settings/settings_shared_css.html

@@ -126,7 +126,9 @@
 
       /* See also: .no-min-width below. */
       .text-elide {
-        @apply --cr-text-elide;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
 
       /* By default, flexbox children have min-width calculated to be the width

ui/webui/resources/cr_elements/search_highlight_style_css.html

@@ -18,9 +18,11 @@
         color: var(--google-grey-900);
         max-width: 100px;
         min-width: 64px;
+        overflow: hidden;
         padding: 4px 10px;
         text-align: center;
-        @apply --cr-text-elide;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
 
       /* Provides the arrow which points at the anchor element. */

ui/webui/resources/cr_elements/shared_vars_css.html

@@ -178,12 +178,6 @@
       width: calc(100% * var(--cr-centered-card-width-percentage));
     }
 
-    --cr-text-elide: {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
     --cr-tooltip: {
       font-size: 92.31%;  /* Effectively 12px if the host default is 13px. */
       font-weight: 500;