Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(523)

Side by Side Diff: third_party/polymer/components-chromium/paper-tabs/demo.html

Issue 592593002: Inline scripts were extracted from Polymer elements. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: s/echo ""/echo/ Created 6 years, 2 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
(Empty)
1 <!doctype html>
2 <html>
3 <head>
4 <title>paper-tabs</title>
5 <meta name="viewport" content="width=device-width; initial-scale=1.0; max-scal e=1.0; user-scalable=yes">
6 <script src="../platform/platform.js"></script>
7
8 <link rel="import" href="../core-icons/core-icons.html">
9 <link rel="import" href="paper-tabs.html">
10 <link rel="import" href="../core-toolbar/core-toolbar.html">
11 <link rel="import" href="../paper-icon-button/paper-icon-button.html">
12 <link rel="import" href="../font-roboto/roboto.html">
13
14 <style shim-shadowdom>
15
16 body {
17 font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
18 margin: 0;
19 padding: 24px;
20 color: #333;
21 -webkit-user-select: none;
22 -moz-user-select: none;
23 -ms-user-select: none;
24 user-select: none;
25 -webkit-tap-highlight-color: rgba(0,0,0,0);
26 -webkit-touch-callout: none;
27 }
28
29 paper-tabs, core-toolbar {
30 background-color: #00bcd4;
31 color: #fff;
32 box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.2);
33 }
34
35 core-toolbar paper-tabs {
36 box-shadow: none;
37 }
38
39 paper-tabs[noink][nobar] paper-tab.core-selected {
40 color: #ffff8d;
41 }
42
43 paper-tabs.transparent-teal {
44 background-color: transparent;
45 color: #00bcd4;
46 box-shadow: none;
47 }
48
49 paper-tabs.transparent-teal::shadow #selectionBar {
50 background-color: #00bcd4;
51 }
52
53 paper-tabs.transparent-teal paper-tab::shadow #ink {
54 color: #00bcd4;
55 }
56
57 h3 {
58 font-size: 16px;
59 font-weight: 400;
60 }
61
62 </style>
63
64 </head>
65 <body unresolved>
66
67 <h3>A. No ink effect and no sliding bar</h3>
68
69 <paper-tabs selected="0" noink nobar>
70
71 <paper-tab>ITEM ONE</paper-tab>
72 <paper-tab>ITEM TWO</paper-tab>
73 <paper-tab>ITEM THREE</paper-tab>
74
75 </paper-tabs>
76
77 <br>
78 <br>
79
80 <h3>B. The bar slides to the selected tab</h3>
81
82 <paper-tabs selected="0" noink>
83
84 <paper-tab>ITEM ONE</paper-tab>
85 <paper-tab>ITEM TWO</paper-tab>
86 <paper-tab>ITEM THREE</paper-tab>
87
88 </paper-tabs>
89
90 <br>
91 <br>
92
93 <h3>C. Inky Tabs</h3>
94
95 <paper-tabs selected="0">
96
97 <paper-tab>ITEM ONE</paper-tab>
98 <paper-tab>ITEM TWO</paper-tab>
99 <paper-tab>ITEM THREE</paper-tab>
100
101 </paper-tabs>
102
103 <br>
104 <br>
105
106 <paper-tabs selected="0" class="transparent-teal">
107
108 <paper-tab>ITEM ONE</paper-tab>
109 <paper-tab>ITEM TWO</paper-tab>
110 <paper-tab>ITEM THREE</paper-tab>
111
112 </paper-tabs>
113
114 <br>
115 <br>
116
117 <core-toolbar class="medium-tall">
118
119 <paper-icon-button icon="menu"></paper-icon-button>
120 <div flex>Title</div>
121 <paper-icon-button icon="search"></paper-icon-button>
122 <paper-icon-button icon="more-vert"></paper-icon-button>
123
124 <div class="bottom fit" horizontal layout>
125
126 <paper-tabs selected="0" flex style="max-width: 600px;">
127
128 <paper-tab>ITEM ONE</paper-tab>
129 <paper-tab>ITEM TWO</paper-tab>
130 <paper-tab>ITEM THREE</paper-tab>
131
132 </paper-tabs>
133
134 </div>
135
136 </core-toolbar>
137
138 <br>
139 <br>
140
141 <core-toolbar class="tall">
142
143 <paper-tabs selected="0" class="bottom indent" style="width: 200px;" self-en d>
144
145 <paper-tab>ITEM ONE</paper-tab>
146 <paper-tab>ITEM TWO</paper-tab>
147
148 </paper-tabs>
149
150 <div class="bottom" flex></div>
151
152 <paper-icon-button class="bottom" icon="search"></paper-icon-button>
153
154 </core-toolbar>
155
156 </body>
157 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698