WebCompDev / COMPONENTS

  <!--
  @license
  Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
  This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  Code distributed by Google as part of the polymer project is also
  subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  -->
  
  <link rel="import" href="../polymer/polymer.html">

  <link rel="import" href="../iron-behaviors/iron-button-state.html">

  <link rel="import" href="../iron-behaviors/iron-control-state.html">
  <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
  <link rel="import" href="../paper-behaviors/paper-ripple-behavior.html">

  
  <!--
  `paper-tab` is styled to look like a tab.  It should be used in conjunction with
  `paper-tabs`.
  
  Example:
  
      <paper-tabs selected="0">
        <paper-tab>TAB 1</paper-tab>
        <paper-tab>TAB 2</paper-tab>
        <paper-tab>TAB 3</paper-tab>
      </paper-tabs>
  
  ### Styling
  
  The following custom properties and mixins are available for styling:
  
  Custom property | Description | Default
  ----------------|-------------|----------
  `--paper-tab-ink` | Ink color | `--paper-yellow-a100`
  `--paper-tab` | Mixin applied to the tab | `{}`
  `--paper-tab-content` | Mixin applied to the tab content | `{}`

  `--paper-tab-content-unselected` | Mixin applied to the tab content when the tab is not selected | `{}`

  
  -->
  
  <dom-module id="paper-tab">

    <template>

      <style>
        :host {
          @apply(--layout-inline);
          @apply(--layout-center);
          @apply(--layout-center-justified);
          @apply(--layout-flex);
  
          position: relative;
          padding: 0 12px;
          overflow: hidden;
          cursor: pointer;
  
          @apply(--paper-tab);
        }

        :host(:focus) {
          outline: none;
        }

        :host([link]) {
          padding: 0;
        }

        .tab-content {
          height: 100%;
          transform: translateZ(0);
            -webkit-transform: translateZ(0);
          transition: opacity 0.1s cubic-bezier(0.4, 0.0, 1, 1);
          @apply(--layout-horizontal);
          @apply(--layout-center-center);
          @apply(--layout-flex-auto);
          @apply(--paper-tab-content);
        }

        :host(:not(.iron-selected)) > .tab-content {
          opacity: 0.8;

          @apply(--paper-tab-content-unselected);
        }

        :host(:focus) .tab-content {
          opacity: 1;
          font-weight: 700;
        }

        paper-ripple {
          color: var(--paper-tab-ink, --paper-yellow-a100);
        }

        .tab-content > ::content > a {
          @apply(--layout-flex)

          height: 100%;

        }

      </style>

      <div class="tab-content">
        <content></content>
      </div>
    </template>

    <script>
      Polymer({
        is: 'paper-tab',

        behaviors: [
          Polymer.IronControlState,
          Polymer.IronButtonState,
          Polymer.PaperRippleBehavior
        ],

        hostAttributes: {
          role: 'tab'
        },

        listeners: {
          down: '_updateNoink'
        },

        attached: function() {
          this._updateNoink();
        },

        get _parentNoink () {
          var parent = Polymer.dom(this).parentNode;
          return !!parent && !!parent.noink;
        },
  
        _updateNoink: function() {
          this.noink = !!this.noink || !!this._parentNoink;
        }
      });
    </script>
  </dom-module>