ui/webui/resources/cr_elements/search_highlight_style_css.html

<link rel="import" href="../html/polymer.html">

<link rel="import" href="shared_vars_css.html">

<dom-module id="search-highlight-style">
  <template>
    <style>
      .search-bubble {
        /* RGB value matches var(--paper-yellow-500). */
        --search-bubble-color: rgba(255, 235, 59, 0.9);
        position: absolute;
        z-index: 1;
      }

      .search-bubble-innards {
        align-items: center;
        background-color: var(--search-bubble-color);
        border-radius: 2px;
        max-width: 100px;
        min-width: 64px;
        padding: 4px 10px;
        text-align: center;
        @apply --cr-text-elide;
      }

      /* Provides the arrow which points at the anchor element. */
      .search-bubble-innards::after {
        background-color: var(--search-bubble-color);
        content: '';
        height: 10px;
        left: calc(50% - 5px);
        position: absolute;
        top: -5px;
        transform: rotate(-45deg);
        width: 10px;
        z-index: -1;
      }

      /* Turns the arrow direction downwards, when the bubble is placed above
       * the anchor element */
      .search-bubble-innards.above::after {
        bottom: -5px;
        top: auto;
        transform: rotate(-135deg);
      }
    </style>
  </template>
</dom-module>