MD Settings: Fix side navigation bar background color for RTL.

chrome/browser/resources/settings/settings_ui/settings_ui.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-drawer-panel/paper-drawer-panel.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/shadow.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/typography.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-toolbar/paper-toolbar.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-flex-layout.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="chrome://md-settings/direction_delegate.html">
 <link rel="import" href="chrome://md-settings/i18n_setup.html">
@@ skipping 28 matching lines @@
         position: relative;
         z-index: 10;
       }
 
       paper-drawer-panel {
         @apply(--layout-center);
         --paper-drawer-panel-left-drawer-container: {
           background-color: var(--settings-background-color);
           margin-top: 8px;
         };
+        --paper-drawer-panel-right-drawer-container: {
+          background-color: var(--settings-background-color);

[michaelpg, 2016/03/23 00:18:32]

it would be nice if we didn't have to duplicate this

I guess we can't comma-separate the mixins like we can with toplevel CSS rules,
but wdyt about creating a separate common mixin to @apply in each of these
mixins?

or would that be terrible in itself?

[dpapad, 2016/03/23 00:40:18]

I am not very familiar with CSS mixins. Can you use @apply within a mixin? Also,
if I understand your suggestion it would look something as follows,

--side-nav-background: {
  background-color: var(--settings-background-color);
}
--paper-drawer-panel-left-drawer-container: {
  @apply(--side-nav-background);
}
--paper-drawer-panel-right-drawer-container: {
  @apply(--side-nav-background);
}

So now instead of repeating the CSS variable twice, we have an extra level of
indirection, so we repeat the new mixin twice. Is that any better (or am I
misunderstanding the suggestion)?

+          margin-top: 8px;
+        };
         position: relative;
       }
 
       settings-main paper-icon-button {
         z-index: 10;
       }
     </style>
     <settings-router current-route="{{currentRoute}}"
         current-route-titles="{{currentRouteTitles}}">
     </settings-router>
     <paper-toolbar>
       <div class="title" i18n-content="settings"></div>
       <!-- TODO(dschuyler): implement internal search. -->
       <iron-icon icon="md-settings-icons:search"></iron-icon>
     </paper-toolbar>
     <paper-drawer-panel drawer-width="256px" id="panel">
       <settings-menu drawer class="flex" current-route="{{currentRoute}}">
       </settings-menu>
       <settings-main main prefs="{{prefs}}" current-route="{{currentRoute}}">
         <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
       </settings-main>
     </paper-drawer-panel>
   </template>
   <script src="settings_ui.js"></script>
 </dom-module>