WebUI: Convert --cr-container-shadow mixin to a class

Bug: 973674
Change-Id: I048d0894d93b1cf89f74bf000ecb701c8fc77514
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1705175Reviewed-by: Rebekah Potter <rbpotter@chromium.org>
Commit-Queue: John Lee <johntlee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#678356}

chrome/browser/resources/downloads/manager.html

@@ -9,6 +9,7 @@
 <link rel="import" href="chrome://resources/cr_components/managed_footnote/managed_footnote.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_toast/cr_toast_manager.html">
 <link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
+<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/html/cr/ui.html">
@@ -20,7 +21,7 @@
 
 <dom-module id="downloads-manager">
   <template>
-    <style include="cr-hidden-style">
+    <style include="cr-shared-style cr-hidden-style">
       :host {
         display: flex;
         flex: 1 0;
@@ -42,10 +43,6 @@
         z-index: 1;
       }
 
-      #drop-shadow {
-        @apply --cr-container-shadow;
-      }
-
       :host([has-shadow_]) #drop-shadow {
         opacity: var(--cr-container-shadow-max-opacity);
       }
@@ -125,7 +122,7 @@
     <downloads-toolbar id="toolbar" spinner-active="{{spinnerActive_}}"
         role="none" on-search-changed="onSearchChanged_">
     </downloads-toolbar>
-    <div id="drop-shadow"></div>
+    <div id="drop-shadow" class="cr-container-shadow"></div>
     <div id="mainContainer" on-scroll="onScroll_">
       <managed-footnote hidden="[[inSearchMode_]]"></managed-footnote>
       <iron-list id="downloadsList" items="[[items_]]"

chrome/browser/resources/history/app.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 <link rel="import" href="chrome://resources/html/cr/ui.html">
 <link rel="import" href="chrome://resources/html/cr/ui/command.html">
@@ -19,7 +20,7 @@
 
 <dom-module id="history-app">
   <template>
-    <style include="shared-style">
+    <style include="cr-shared-style shared-style">
       :host {
         color: var(--cr-primary-text-color);
         display: block;
@@ -48,10 +49,6 @@
         height: 100%;
       }
 
-      #drop-shadow {
-        @apply --cr-container-shadow;
-      }
-
       :host([toolbar-shadow_]) #drop-shadow {
         opacity: var(--cr-container-shadow-max-opacity);
       }
@@ -76,7 +73,7 @@
                                              queryState_.searchTerm)]]">
     </history-toolbar>
 
-    <div id="drop-shadow"></div>
+    <div id="drop-shadow" class="cr-container-shadow"></div>
     <div id="main-container">
       <history-side-bar id="content-side-bar" selected-page="{{selectedPage_}}"
           footer-info="[[footerInfo]]"

ui/webui/resources/cr_elements/cr_container_shadow_behavior.js

@@ -67,6 +67,7 @@ const CrContainerShadowBehavior = {
       // The element holding the drop shadow effect to be shown.
       const shadow = document.createElement('div');
       shadow.id = `cr-container-shadow-${side}`;
+      shadow.classList.add('cr-container-shadow');
       this.dropShadows_.set(side, shadow);
       this.intersectionProbes_.set(side, document.createElement('div'));
     });

ui/webui/resources/cr_elements/shared_style_css.html

@@ -75,12 +75,21 @@
         @apply --cr-actionable;
       }
 
-      /** Styles for elements that implement the CrContainerShadowBehavior */
-      #cr-container-shadow-top,
-      #cr-container-shadow-bottom {
-        @apply --cr-container-shadow;
+      .cr-container-shadow {
+        box-shadow: inset 0 5px 6px -3px rgba(0, 0, 0, .4);
+        height: var(--cr-container-shadow-height);
+        left: 0;
+        margin: 0 0 var(--cr-container-shadow-margin);
+        opacity: 0;
+        pointer-events: none;
+        position: relative;
+        right: 0;
+        top: 0;
+        transition: opacity 500ms;
+        z-index: 1;
       }
 
+      /** Styles for elements that implement the CrContainerShadowBehavior */
       #cr-container-shadow-bottom {
         margin-bottom: 0;
         margin-top: var(--cr-container-shadow-margin);

ui/webui/resources/cr_elements/shared_vars_css.html

@@ -239,19 +239,6 @@
 
     --cr-container-shadow-height: 6px;
     --cr-container-shadow-margin: calc(-1 * var(--cr-container-shadow-height));
-    --cr-container-shadow: {
-      box-shadow: inset 0 5px 6px -3px rgba(0, 0, 0, .4);
-      height: var(--cr-container-shadow-height);
-      left: 0;
-      margin: 0 0 var(--cr-container-shadow-margin);
-      opacity: 0;
-      pointer-events: none;
-      position: relative;
-      right: 0;
-      top: 0px;
-      transition: opacity 500ms;
-      z-index: 1;
-    }
 
     --cr-container-shadow-max-opacity: 1;