<!DOCTYPE html>
<!--
Copyright 2017 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->

<dom-module id="base-style">
  <template>
    <style>
      a {
        color: var(--paper-indigo-500);
        text-decoration: none;
      }

      a:hover {
        color: var(--paper-pink-a200);
      }

      h1,
      h2,
      h3 {
        font-weight: lighter;
      }

      h2,
      h3 {
        margin: 1em 0 0.5em 0;
      }

      p {
        margin: 0;
      }

      table {
        border-collapse: collapse;
      }

      th,
      td {
        padding: 0.5em;
      }

      .badge {
        border-radius: 1em;
        font-size: 0.5em;
        padding: 0.25em 0.5em;
        vertical-align: middle;
      }

      .byline {
        color: var(--paper-grey-500);
      }

      .middle-dot::after {
        content: "·";
        padding: 0 0.8em;
      }
    </style>
  </template>
</dom-module>

<!DOCTYPE html>
<!--
Copyright 2017 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->

<dom-module id="base-style">
  <template>
    <style>
      :root {
        /* Dropdown menus should always be on top of dialogs. */
        --layer-menus: 300;

        /* Dialogs like chart-tooltip and triage-dialog */
        --layer-dialogs: 200;

        /* Misc information that might be positioned over inline DOM, but shouldn't
           overshadow dialogs. E.g. alert-icons.
         */
        --layer-highlights: 100;
      }

      a {
        color: var(--paper-indigo-500);
        text-decoration: none;
      }

      a:hover {
        color: var(--paper-pink-a200);
      }

      h1,
      h2,
      h3 {
        font-weight: lighter;
      }

      h2,
      h3 {
        margin: 1em 0 0.5em 0;
      }

      p {
        margin: 0;
      }

      table {
        border-collapse: collapse;
      }

      th,
      td {
        padding: 0.5em;
      }

      .badge {
        border-radius: 1em;
        font-size: 0.5em;
        padding: 0.25em 0.5em;
        vertical-align: middle;
      }

      .byline {
        color: var(--paper-grey-500);
      }

      .middle-dot::after {
        content: "·";
        padding: 0 0.8em;
      }
    </style>
  </template>
</dom-module>

Set CSS config for autocomplete elements
Pinpoint: Set CSS config for autocomplete elements

This change ensures that the UI for the new job fab dialog gets the
dropdown elements raised/layered appropriately. This is cargo-cult
copied from the Dashboard CSS into Pinpoint.

R=abennetts@google.com, e609d4c46132d2dea94acf5ac2b9f229ffc1f245@chromium.org, simonhatch@chromium.org

Bug: chromium:986704
Change-Id: If3be5407d0139fe339261d1c7737699db97c27b6
Reviewed-on: https://chromium-review.googlesource.com/c/catapult/+/1712932
Reviewed-by: Joey Scarr <e609d4c46132d2dea94acf5ac2b9f229ffc1f245@chromium.org>
Commit-Queue: Dean Berris <34a37f59e4ade3cf49221306f04217acf3e86255@chromium.org>
