ui/webui/resources/cr_elements/cr_link_row/cr_link_row.html

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

<link rel="import" href="chrome://resources/cr_elements/cr_icons_css.html">
<link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-behaviors/paper-ripple-behavior.html">

<dom-module id="cr-link-row">
  <template strip-whitespace="">
    <style include="cr-hidden-style cr-icons">
      :host {
        align-items: center;
        align-self: stretch;
        display: block;
        flex: 1;
      }

      :host > button {
        background: none;
        border: none;
        color: inherit;
        cursor: pointer;
        display: flex;
        font-family: inherit;
        font-size: 100%;  /* Specifically for Mac OSX, harmless elsewhere. */
        line-height: 154%;  /* 20px. */
        margin: 0;
        min-height: var(--cr-section-min-height);
        outline: none;
        padding: 0;
        width: 100%;
      }

      :host(:not([embedded])) > button {
        padding: 0 var(--cr-section-padding);
      }

      :host([disabled]) {
        color: var(--paper-grey-500);
        cursor: auto;
        pointer-events: none;
      }

      #startIcon {
        -webkit-padding-end: var(--cr-icon-button-margin-start);
        display: flex;
        flex-shrink: 0;
        width: var(--cr-link-row-icon-width, var(--cr-icon-size));
      }

      #icon {
        /* The |_rippleContainer| must be position relative. */
        position: relative;
      }

      #label,
      #subLabel {
        display: flex;
      }

      #labelWrapper {
        flex: 1;
        flex-basis: 0.000000001px;
        text-align: start;
      }

      #outer {
        align-items: center;
        display: flex;
        min-height: var(--cr-section-two-line-min-height);
        width: 100%;
      }

      #outer[noSubLabel] {
        min-height: var(--cr-section-min-height);
      }

      paper-ripple {
        opacity: 0.6;
      }

      #subLabel {
        @apply --cr-secondary-text;
      }
    </style>
    <button disabled="[[disabled]]">
      <div id="outer" noSubLabel$="[[!subLabel]]">
        <iron-icon id="startIcon" icon="[[startIcon]]" hidden="[[!startIcon]]"
            aria-hidden="true">
        </iron-icon>
        <div id="labelWrapper" hidden="[[!label]]">
          <div id="label" class="label">[[label]]</div>
          <div id="subLabel" class="secondary label">[[subLabel]]</div>
        </div>
        <slot></slot>
        <div id="icon" class$="cr-icon [[iconClass]]" aria-hidden="true">
        </div>
      </div>
    </button>
  </template>
  <script src="cr_link_row.js"></script>
</dom-module>