ui/webui/resources/cr_elements/shared_style_css.html

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

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

<!-- Common styles for Material Design WebUI. Included directly in
  settings_shared_css.html. -->
<dom-module id="cr-shared-style">
  <template>
    <style include="cr-hidden-style cr-icons">
      [actionable] {
        @apply --cr-actionable;
      }

      .subpage-arrow,
      .icon-external {
        display: none;
      }

      [actionable] :-webkit-any(.subpage-arrow, .icon-external),
      [actionable]:-webkit-any(.subpage-arrow, .icon-external) {
        display: block;
      }

      /* Horizontal rule line. */
      .hr {
        border-top: var(--cr-separator-line);
      }

      iron-list.cr-separators > *:not([first]) {
        border-top: var(--cr-separator-line);
      }

      [scrollable] {
        border-color: transparent;
        border-style: solid;
        border-width: 1px 0;
        overflow-y: auto;
      }
      [scrollable].is-scrolled {
        border-top-color: var(--google-grey-300);
      }
      [scrollable].can-scroll:not(.scrolled-to-bottom) {
        border-bottom-color: var(--google-grey-300);
      }
      [scrollable] iron-list > :not(.no-outline):focus {
        @apply --cr-list-item-focus;
        @apply --cr-selectable-focus;
      }

      .scroll-container {
        display: flex;
        flex-direction: column;
        min-height: 1px;
      }

      [selectable]:not(paper-radio-group):focus,
      [selectable]:not(paper-radio-group) > :focus {
        @apply --cr-selectable-focus;
      }
      [selectable]:not(paper-radio-group) > * {
        @apply --cr-actionable;
      }

      /** Styles for elements that implement the CrContainerShadowBehavior */
      #cr-container-shadow {
        @apply --cr-container-shadow;
      }

      #cr-container-shadow.has-shadow {
        opacity: var(--cr-container-shadow-max-opacity);
      }
    </style>
  </template>
</dom-module>