jellyfin-web/dashboard-ui/bower_components/paper-tabs/paper-tab.html

<!--
@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-flex-layout/classes/iron-flex-layout.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../iron-behaviors/iron-control-state.html">
<link rel="import" href="../paper-ripple/paper-ripple.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 | `{}`

-->

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

  <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%;
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
      transition: opacity 0.1s cubic-bezier(0.4, 0.0, 1, 1);

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

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

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

    #ink {
      color: var(--paper-tab-ink, --paper-yellow-a100);
      pointer-events: none;
    }

    .tab-content > ::content > a {
      height: 100%;
      /* flex */
      -ms-flex: 1 1 0.000000001px;
      -webkit-flex: 1;
      flex: 1;
      -webkit-flex-basis: 0.000000001px;
      flex-basis: 0.000000001px;
    }

  </style>

  <template>

    <div class="tab-content flex-auto center-center horizontal layout">
      <content></content>
    </div>

    <template is="dom-if" if="[[!noink]]">
      <paper-ripple id="ink" initial-opacity="0.95" opacity-decay-velocity="0.98"></paper-ripple>
    </template>

  </template>

</dom-module>

<script>

  Polymer({

    is: 'paper-tab',

    behaviors: [
      Polymer.IronControlState
    ],

    properties: {

      /**
       * If true, ink ripple effect is disabled.
       *
       * @attribute noink
       */
      noink: {
        type: Boolean,
        value: false
      }

    },

    hostAttributes: {
      role: 'tab'
    },

    listeners: {
      down: '_onDown'
    },

    get _parentNoink () {
      var parent = Polymer.dom(this).parentNode;
      return !!parent && !!parent.noink;
    },

    _onDown: function(e) {
      this.noink = !!this.noink || !!this._parentNoink;
    }
  });

</script>