[MD History] Extract shared stylesheet.

chrome/browser/resources/md_history/history_toolbar.html

 <link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_search_field/cr_search_field.html">
 
+<link rel="import" href="chrome://history/shared_style.html">

[tsergeant, 2016/02/23 04:52:26]

Same here.

[calamity, 2016/02/23 05:33:43]

Done.

 <dom-module id="history-toolbar">
   <template>
-
+    <style include="shared-style"></style>
     <style>
       :host {
         background: rgb(63, 85, 102);
         color: #fff;
         height: 56px;
         transition: background-color 150ms;
       }
 
       :host,
       #items,
@@ skipping 11 matching lines @@
 
       h1 {
         @apply(--layout-flex);
         font-size: 16px;
         font-weight: 400;
         padding-left: 24px;
       }
 
       #items {
         margin: 0 auto;
-        max-width: 960px;
+        max-width: var(--card-max-width);
       }
 
       #number-selected {
         @apply(--layout-flex);
       }
 
       paper-icon-button {
         height: 36px;
         margin: 0 24px 0 2px;
         min-width: 36px;
         width: 36px;
       }
 
       #centered-buttons {
-        flex: 1 1 960px;
-        max-width: 960px;
+        flex: 0 1 var(--card-max-width);

[tsergeant, 2016/02/23 04:52:26]

Huh, I'm kinda surprised this works.

[calamity, 2016/02/23 05:33:43]

Acknowledged.

[Dan Beam, 2016/02/23 18:32:03]

why are you surprised by this working?

[tsergeant, 2016/02/23 22:35:14]

I expected that the variables polyfill would only replace entire property
values, not individual sections of shorthand properties like this.

       }
 
       paper-button {
         pointer-events: auto;
       }
 
       .toolbar-overlay  {
         height: inherit;
         left: 0;
         pointer-events: none;
@@ skipping 40 matching lines @@
         <paper-button on-tap="onClearBrowsingDataTap_"
             i18n-content="clearBrowsingData"
             id="clear-browsing-data-button">
         </paper-button>
       </div>
       <div id="back-padding"></div>
     </div>
   </template>
   <script src="chrome://history/history_toolbar.js"></script>
 </dom-module>