MD Settings: Fix alignment issues after adding left/right padding to md-select.

ui/webui/resources/html/md_select_css.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
 
 <dom-module id="md-select">
   <template>
     <style>
       .md-select,
       .md-select-underline {
         --md-side-padding: 12px;
       }
 
       .md-select {
         --md-arrow-width: 0.9em;
         -webkit-appearance: none;
+        -webkit-margin-end: calc(-1 * var(--md-side-padding));
         /* Ensure that the text does not overlap with the down arrow. */
         -webkit-padding-end: calc(var(--md-side-padding) +
             var(--md-arrow-width) * 1.8);
         -webkit-padding-start: var(--md-side-padding);
         background: url(
             chrome://resources/images/arrow_down.svg)
             calc(97% - var(--md-side-padding)) center no-repeat;
         background-size: var(--md-arrow-width);
         border: none;
         color: var(--primary-text-color);
         cursor: pointer;
         font-family: inherit;
         font-size: inherit;
         outline: none;
         padding-bottom: 4px;
         padding-top: 3px;
         width: var(--md-select-width, 200px);

[dpapad, 2017/04/12 18:30:52]

I think we should change 200px to 224px.

Previously the select was 200px (both visible part and click target).

Now our select's click target is still 200px, but the visible part of the select
is smaller because of the padding. If we want to preserve that the "visible part
of select should be 200px" we need to increase that value.

[Dan Beam, 2017/04/12 18:33:20]

width: calc(var(--md-select-width, 200px) + 2 * var(--md-side-padding));

[dpapad, 2017/04/12 20:48:26]

Done.

       }
 
       /* Mirroring paper-dropdown-menu disabled style. */
       .md-select[disabled] {
         border-bottom: 1px dashed var(--secondary-text-color);
         color: var(--secondary-text-color);
         opacity: 0.65;
         pointer-events: none;
       }
 
       :host-context([dir=rtl]) .md-select {
         background-position-x: calc(var(--md-side-padding) + 3%);
       }
 
       /* Persistent underline */
       .md-select-underline {
+        -webkit-margin-end: 0;
+        -webkit-margin-start: var(--md-side-padding);
         border-top: 1px solid var(--paper-grey-300);
         display: block;
-        margin: 0 var(--md-side-padding);
+        margin-bottom: 0;
+        margin-top: 0;
       }
 
       /* Focus underline */
       .md-select-underline::after {
         border-top: 2px solid var(--google-blue-500);
         content: '';
         display: block;
         transform: scale3d(0, 1, 1);
         transition: transform 200ms ease-in;
       }
@@ skipping 12 matching lines @@
         transition: transform 200ms ease-out;
       }
 
       .md-select-wrapper {
         display: inline-block;
         max-width: 100%;
       }
     </style>
   </template>
 </dom-module>