← Back to branch summary

~didrocks/+junk/face-detection-15.04

« back to all changes in this revision

Viewing changes to facedetection/www/bower_components/paper-tabs/paper-tab.html

  • Committer: Didier Roche
  • Date: 2016-05-10 23:09:11 UTC
  • Revision ID: didier.roche@canonical.com-20160510230911-c7xr490zrj3yrzxd
New version

Show diffs side-by-side

added added

removed removed

Lines of Context:
facedetection/www/bower_components/paper-tabs/paper-tab.html
 
1
<!--
 
2
@license
 
3
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 
4
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 
5
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 
6
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 
7
Code distributed by Google as part of the polymer project is also
 
8
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 
9
-->
 
10
 
 
11
<link rel="import" href="../polymer/polymer.html">
 
12
<link rel="import" href="../iron-behaviors/iron-button-state.html">
 
13
<link rel="import" href="../iron-behaviors/iron-control-state.html">
 
14
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
 
15
<link rel="import" href="../paper-behaviors/paper-ripple-behavior.html">
 
16
 
 
17
<!--
 
18
`paper-tab` is styled to look like a tab.  It should be used in conjunction with
 
19
`paper-tabs`.
 
20
 
 
21
Example:
 
22
 
 
23
    <paper-tabs selected="0">
 
24
      <paper-tab>TAB 1</paper-tab>
 
25
      <paper-tab>TAB 2</paper-tab>
 
26
      <paper-tab>TAB 3</paper-tab>
 
27
    </paper-tabs>
 
28
 
 
29
### Styling
 
30
 
 
31
The following custom properties and mixins are available for styling:
 
32
 
 
33
Custom property | Description | Default
 
34
----------------|-------------|----------
 
35
`--paper-tab-ink` | Ink color | `--paper-yellow-a100`
 
36
`--paper-tab` | Mixin applied to the tab | `{}`
 
37
`--paper-tab-content` | Mixin applied to the tab content | `{}`
 
38
`--paper-tab-content-unselected` | Mixin applied to the tab content when the tab is not selected | `{}`
 
39
 
 
40
This element applies the mixin `--paper-font-common-base` but does not import `paper-styles/typography.html`.
 
41
In order to apply the `Roboto` font to this element, make sure you've imported `paper-styles/typography.html`.
 
42
 
 
43
-->
 
44
 
 
45
<dom-module id="paper-tab">
 
46
  <template>
 
47
    <style>
 
48
      :host {
 
49
        @apply(--layout-inline);
 
50
        @apply(--layout-center);
 
51
        @apply(--layout-center-justified);
 
52
        @apply(--layout-flex-auto);
 
53
 
 
54
        position: relative;
 
55
        padding: 0 12px;
 
56
        overflow: hidden;
 
57
        cursor: pointer;
 
58
        vertical-align: middle;
 
59
 
 
60
        @apply(--paper-font-common-base);
 
61
        @apply(--paper-tab);
 
62
      }
 
63
 
 
64
      :host(:focus) {
 
65
        outline: none;
 
66
      }
 
67
 
 
68
      :host([link]) {
 
69
        padding: 0;
 
70
      }
 
71
 
 
72
      .tab-content {
 
73
        height: 100%;
 
74
        transform: translateZ(0);
 
75
          -webkit-transform: translateZ(0);
 
76
        transition: opacity 0.1s cubic-bezier(0.4, 0.0, 1, 1);
 
77
        @apply(--layout-horizontal);
 
78
        @apply(--layout-center-center);
 
79
        @apply(--layout-flex-auto);
 
80
        @apply(--paper-tab-content);
 
81
      }
 
82
 
 
83
      :host(:not(.iron-selected)) > .tab-content {
 
84
        opacity: 0.8;
 
85
 
 
86
        @apply(--paper-tab-content-unselected);
 
87
      }
 
88
 
 
89
      :host(:focus) .tab-content {
 
90
        opacity: 1;
 
91
        font-weight: 700;
 
92
      }
 
93
 
 
94
      paper-ripple {
 
95
        color: var(--paper-tab-ink, --paper-yellow-a100);
 
96
      }
 
97
 
 
98
      .tab-content > ::content > a {
 
99
        @apply(--layout-flex-auto);
 
100
 
 
101
        height: 100%;
 
102
      }
 
103
    </style>
 
104
 
 
105
    <div class="tab-content">
 
106
      <content></content>
 
107
    </div>
 
108
  </template>
 
109
 
 
110
  <script>
 
111
    Polymer({
 
112
      is: 'paper-tab',
 
113
 
 
114
      behaviors: [
 
115
        Polymer.IronControlState,
 
116
        Polymer.IronButtonState,
 
117
        Polymer.PaperRippleBehavior
 
118
      ],
 
119
 
 
120
      properties: {
 
121
 
 
122
        /**
 
123
         * If true, the tab will forward keyboard clicks (enter/space) to
 
124
         * the first anchor element found in its descendants
 
125
         */
 
126
        link: {
 
127
          type: Boolean,
 
128
          value: false,
 
129
          reflectToAttribute: true
 
130
        }
 
131
 
 
132
      },
 
133
 
 
134
      hostAttributes: {
 
135
        role: 'tab'
 
136
      },
 
137
 
 
138
      listeners: {
 
139
        down: '_updateNoink',
 
140
        tap: '_onTap'
 
141
      },
 
142
 
 
143
      attached: function() {
 
144
        this._updateNoink();
 
145
      },
 
146
 
 
147
      get _parentNoink () {
 
148
        var parent = Polymer.dom(this).parentNode;
 
149
        return !!parent && !!parent.noink;
 
150
      },
 
151
 
 
152
      _updateNoink: function() {
 
153
        this.noink = !!this.noink || !!this._parentNoink;
 
154
      },
 
155
 
 
156
      _onTap: function(event) {
 
157
        if (this.link) {
 
158
          var anchor = this.queryEffectiveChildren('a');
 
159
 
 
160
          if (!anchor) {
 
161
            return;
 
162
          }
 
163
 
 
164
          // Don't get stuck in a loop delegating
 
165
          // the listener from the child anchor
 
166
          if (event.target === anchor) {
 
167
            return;
 
168
          }
 
169
 
 
170
          anchor.click();
 
171
        }
 
172
      }
 
173
 
 
174
    });
 
175
  </script>
 
176
</dom-module>