| OLD | NEW |
|---|
| (Empty) | |
| 1 <html><head><!-- |
| 2 @license |
| 3 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. |
| 4 This code may only be used under the BSD style license found at http://polymer.g
ithub.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/CONTRI
BUTORS.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/PATEN
TS.txt |
| 9 --><!-- |
| 10 @license |
| 11 Copyright (c) 2016 The Polymer Project Authors. All rights reserved. |
| 12 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
| 13 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| 14 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
| 15 Code distributed by Google as part of the polymer project is also |
| 16 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 17 --><!-- |
| 18 @license |
| 19 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |
| 20 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
| 21 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| 22 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
| 23 Code distributed by Google as part of the polymer project is also |
| 24 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 25 --><meta charset="UTF-8"><link rel="import" href="chrome://resources/html/polyme
r.html"> |
| 26 <style> |
| 27 /* Copyright 2016 The Chromium Authors. All rights reserved. |
| 28 * Use of this source code is governed by a BSD-style license that can be |
| 29 * found in the LICENSE file. */ |
| 30 |
| 31 :root { |
| 32 /* This is a custom, Chrome-specific color that does not have a --paper or |
| 33 * --google equivalent. */ |
| 34 --md-background-color: rgb(241, 241, 241); |
| 35 /* This is --google-blue-700, rewritten as a native custom property for speed. |
| 36 */ |
| 37 --md-toolbar-color: rgb(51, 103, 214); |
| 38 } |
| 39 |
| 40 </style> |
| 41 |
| 42 </head><body><div hidden="" by-vulcanize=""><style> |
| 43 /* IE 10 support for HTML5 hidden attr */ |
| 44 [hidden] { |
| 45 display: none !important; |
| 46 } |
| 47 </style> |
| 48 |
| 49 <style is="custom-style"> |
| 50 :root { |
| 51 |
| 52 --layout: { |
| 53 display: -ms-flexbox; |
| 54 display: -webkit-flex; |
| 55 display: flex; |
| 56 }; |
| 57 |
| 58 --layout-inline: { |
| 59 display: -ms-inline-flexbox; |
| 60 display: -webkit-inline-flex; |
| 61 display: inline-flex; |
| 62 }; |
| 63 |
| 64 --layout-horizontal: { |
| 65 @apply(--layout); |
| 66 |
| 67 -ms-flex-direction: row; |
| 68 -webkit-flex-direction: row; |
| 69 flex-direction: row; |
| 70 }; |
| 71 |
| 72 --layout-horizontal-reverse: { |
| 73 @apply(--layout); |
| 74 |
| 75 -ms-flex-direction: row-reverse; |
| 76 -webkit-flex-direction: row-reverse; |
| 77 flex-direction: row-reverse; |
| 78 }; |
| 79 |
| 80 --layout-vertical: { |
| 81 @apply(--layout); |
| 82 |
| 83 -ms-flex-direction: column; |
| 84 -webkit-flex-direction: column; |
| 85 flex-direction: column; |
| 86 }; |
| 87 |
| 88 --layout-vertical-reverse: { |
| 89 @apply(--layout); |
| 90 |
| 91 -ms-flex-direction: column-reverse; |
| 92 -webkit-flex-direction: column-reverse; |
| 93 flex-direction: column-reverse; |
| 94 }; |
| 95 |
| 96 --layout-wrap: { |
| 97 -ms-flex-wrap: wrap; |
| 98 -webkit-flex-wrap: wrap; |
| 99 flex-wrap: wrap; |
| 100 }; |
| 101 |
| 102 --layout-wrap-reverse: { |
| 103 -ms-flex-wrap: wrap-reverse; |
| 104 -webkit-flex-wrap: wrap-reverse; |
| 105 flex-wrap: wrap-reverse; |
| 106 }; |
| 107 |
| 108 --layout-flex-auto: { |
| 109 -ms-flex: 1 1 auto; |
| 110 -webkit-flex: 1 1 auto; |
| 111 flex: 1 1 auto; |
| 112 }; |
| 113 |
| 114 --layout-flex-none: { |
| 115 -ms-flex: none; |
| 116 -webkit-flex: none; |
| 117 flex: none; |
| 118 }; |
| 119 |
| 120 --layout-flex: { |
| 121 -ms-flex: 1 1 0.000000001px; |
| 122 -webkit-flex: 1; |
| 123 flex: 1; |
| 124 -webkit-flex-basis: 0.000000001px; |
| 125 flex-basis: 0.000000001px; |
| 126 }; |
| 127 |
| 128 --layout-flex-2: { |
| 129 -ms-flex: 2; |
| 130 -webkit-flex: 2; |
| 131 flex: 2; |
| 132 }; |
| 133 |
| 134 --layout-flex-3: { |
| 135 -ms-flex: 3; |
| 136 -webkit-flex: 3; |
| 137 flex: 3; |
| 138 }; |
| 139 |
| 140 --layout-flex-4: { |
| 141 -ms-flex: 4; |
| 142 -webkit-flex: 4; |
| 143 flex: 4; |
| 144 }; |
| 145 |
| 146 --layout-flex-5: { |
| 147 -ms-flex: 5; |
| 148 -webkit-flex: 5; |
| 149 flex: 5; |
| 150 }; |
| 151 |
| 152 --layout-flex-6: { |
| 153 -ms-flex: 6; |
| 154 -webkit-flex: 6; |
| 155 flex: 6; |
| 156 }; |
| 157 |
| 158 --layout-flex-7: { |
| 159 -ms-flex: 7; |
| 160 -webkit-flex: 7; |
| 161 flex: 7; |
| 162 }; |
| 163 |
| 164 --layout-flex-8: { |
| 165 -ms-flex: 8; |
| 166 -webkit-flex: 8; |
| 167 flex: 8; |
| 168 }; |
| 169 |
| 170 --layout-flex-9: { |
| 171 -ms-flex: 9; |
| 172 -webkit-flex: 9; |
| 173 flex: 9; |
| 174 }; |
| 175 |
| 176 --layout-flex-10: { |
| 177 -ms-flex: 10; |
| 178 -webkit-flex: 10; |
| 179 flex: 10; |
| 180 }; |
| 181 |
| 182 --layout-flex-11: { |
| 183 -ms-flex: 11; |
| 184 -webkit-flex: 11; |
| 185 flex: 11; |
| 186 }; |
| 187 |
| 188 --layout-flex-12: { |
| 189 -ms-flex: 12; |
| 190 -webkit-flex: 12; |
| 191 flex: 12; |
| 192 }; |
| 193 |
| 194 /* alignment in cross axis */ |
| 195 |
| 196 --layout-start: { |
| 197 -ms-flex-align: start; |
| 198 -webkit-align-items: flex-start; |
| 199 align-items: flex-start; |
| 200 }; |
| 201 |
| 202 --layout-center: { |
| 203 -ms-flex-align: center; |
| 204 -webkit-align-items: center; |
| 205 align-items: center; |
| 206 }; |
| 207 |
| 208 --layout-end: { |
| 209 -ms-flex-align: end; |
| 210 -webkit-align-items: flex-end; |
| 211 align-items: flex-end; |
| 212 }; |
| 213 |
| 214 --layout-baseline: { |
| 215 -ms-flex-align: baseline; |
| 216 -webkit-align-items: baseline; |
| 217 align-items: baseline; |
| 218 }; |
| 219 |
| 220 /* alignment in main axis */ |
| 221 |
| 222 --layout-start-justified: { |
| 223 -ms-flex-pack: start; |
| 224 -webkit-justify-content: flex-start; |
| 225 justify-content: flex-start; |
| 226 }; |
| 227 |
| 228 --layout-center-justified: { |
| 229 -ms-flex-pack: center; |
| 230 -webkit-justify-content: center; |
| 231 justify-content: center; |
| 232 }; |
| 233 |
| 234 --layout-end-justified: { |
| 235 -ms-flex-pack: end; |
| 236 -webkit-justify-content: flex-end; |
| 237 justify-content: flex-end; |
| 238 }; |
| 239 |
| 240 --layout-around-justified: { |
| 241 -ms-flex-pack: distribute; |
| 242 -webkit-justify-content: space-around; |
| 243 justify-content: space-around; |
| 244 }; |
| 245 |
| 246 --layout-justified: { |
| 247 -ms-flex-pack: justify; |
| 248 -webkit-justify-content: space-between; |
| 249 justify-content: space-between; |
| 250 }; |
| 251 |
| 252 --layout-center-center: { |
| 253 @apply(--layout-center); |
| 254 @apply(--layout-center-justified); |
| 255 }; |
| 256 |
| 257 /* self alignment */ |
| 258 |
| 259 --layout-self-start: { |
| 260 -ms-align-self: flex-start; |
| 261 -webkit-align-self: flex-start; |
| 262 align-self: flex-start; |
| 263 }; |
| 264 |
| 265 --layout-self-center: { |
| 266 -ms-align-self: center; |
| 267 -webkit-align-self: center; |
| 268 align-self: center; |
| 269 }; |
| 270 |
| 271 --layout-self-end: { |
| 272 -ms-align-self: flex-end; |
| 273 -webkit-align-self: flex-end; |
| 274 align-self: flex-end; |
| 275 }; |
| 276 |
| 277 --layout-self-stretch: { |
| 278 -ms-align-self: stretch; |
| 279 -webkit-align-self: stretch; |
| 280 align-self: stretch; |
| 281 }; |
| 282 |
| 283 --layout-self-baseline: { |
| 284 -ms-align-self: baseline; |
| 285 -webkit-align-self: baseline; |
| 286 align-self: baseline; |
| 287 }; |
| 288 |
| 289 /* multi-line alignment in main axis */ |
| 290 |
| 291 --layout-start-aligned: { |
| 292 -ms-flex-line-pack: start; /* IE10 */ |
| 293 -ms-align-content: flex-start; |
| 294 -webkit-align-content: flex-start; |
| 295 align-content: flex-start; |
| 296 }; |
| 297 |
| 298 --layout-end-aligned: { |
| 299 -ms-flex-line-pack: end; /* IE10 */ |
| 300 -ms-align-content: flex-end; |
| 301 -webkit-align-content: flex-end; |
| 302 align-content: flex-end; |
| 303 }; |
| 304 |
| 305 --layout-center-aligned: { |
| 306 -ms-flex-line-pack: center; /* IE10 */ |
| 307 -ms-align-content: center; |
| 308 -webkit-align-content: center; |
| 309 align-content: center; |
| 310 }; |
| 311 |
| 312 --layout-between-aligned: { |
| 313 -ms-flex-line-pack: justify; /* IE10 */ |
| 314 -ms-align-content: space-between; |
| 315 -webkit-align-content: space-between; |
| 316 align-content: space-between; |
| 317 }; |
| 318 |
| 319 --layout-around-aligned: { |
| 320 -ms-flex-line-pack: distribute; /* IE10 */ |
| 321 -ms-align-content: space-around; |
| 322 -webkit-align-content: space-around; |
| 323 align-content: space-around; |
| 324 }; |
| 325 |
| 326 /******************************* |
| 327 Other Layout |
| 328 *******************************/ |
| 329 |
| 330 --layout-block: { |
| 331 display: block; |
| 332 }; |
| 333 |
| 334 --layout-invisible: { |
| 335 visibility: hidden !important; |
| 336 }; |
| 337 |
| 338 --layout-relative: { |
| 339 position: relative; |
| 340 }; |
| 341 |
| 342 --layout-fit: { |
| 343 position: absolute; |
| 344 top: 0; |
| 345 right: 0; |
| 346 bottom: 0; |
| 347 left: 0; |
| 348 }; |
| 349 |
| 350 --layout-scroll: { |
| 351 -webkit-overflow-scrolling: touch; |
| 352 overflow: auto; |
| 353 }; |
| 354 |
| 355 --layout-fullbleed: { |
| 356 margin: 0; |
| 357 height: 100vh; |
| 358 }; |
| 359 |
| 360 /* fixed position */ |
| 361 |
| 362 --layout-fixed-top: { |
| 363 position: fixed; |
| 364 top: 0; |
| 365 left: 0; |
| 366 right: 0; |
| 367 }; |
| 368 |
| 369 --layout-fixed-right: { |
| 370 position: fixed; |
| 371 top: 0; |
| 372 right: 0; |
| 373 bottom: 0; |
| 374 }; |
| 375 |
| 376 --layout-fixed-bottom: { |
| 377 position: fixed; |
| 378 right: 0; |
| 379 bottom: 0; |
| 380 left: 0; |
| 381 }; |
| 382 |
| 383 --layout-fixed-left: { |
| 384 position: fixed; |
| 385 top: 0; |
| 386 bottom: 0; |
| 387 left: 0; |
| 388 }; |
| 389 |
| 390 } |
| 391 |
| 392 </style> |
| 393 |
| 394 |
| 395 <dom-module id="app-drawer" assetpath="chrome://resources/polymer/v1_0/app-layou
t/app-drawer/"> |
| 396 <template> |
| 397 <style> |
| 398 :host { |
| 399 position: fixed; |
| 400 top: -120px; |
| 401 right: 0; |
| 402 bottom: -120px; |
| 403 left: 0; |
| 404 |
| 405 visibility: hidden; |
| 406 |
| 407 transition: visibility 0.2s ease; |
| 408 } |
| 409 |
| 410 :host([opened]) { |
| 411 visibility: visible; |
| 412 } |
| 413 |
| 414 :host([persistent]) { |
| 415 width: var(--app-drawer-width, 256px); |
| 416 } |
| 417 |
| 418 :host([persistent][position=left]) { |
| 419 right: auto; |
| 420 } |
| 421 |
| 422 :host([persistent][position=right]) { |
| 423 left: auto; |
| 424 } |
| 425 |
| 426 #contentContainer { |
| 427 position: absolute; |
| 428 top: 0; |
| 429 bottom: 0; |
| 430 left: 0; |
| 431 |
| 432 width: var(--app-drawer-width, 256px); |
| 433 padding: 120px 0; |
| 434 |
| 435 transition: 0.2s ease; |
| 436 transition-property: -webkit-transform; |
| 437 transition-property: transform; |
| 438 -webkit-transform: translate3d(-100%, 0, 0); |
| 439 transform: translate3d(-100%, 0, 0); |
| 440 |
| 441 background-color: #FFF; |
| 442 |
| 443 @apply(--app-drawer-content-container); |
| 444 } |
| 445 |
| 446 :host([position=right]) > #contentContainer { |
| 447 right: 0; |
| 448 left: auto; |
| 449 |
| 450 -webkit-transform: translate3d(100%, 0, 0); |
| 451 transform: translate3d(100%, 0, 0); |
| 452 } |
| 453 |
| 454 :host([swipe-open]) > #contentContainer::after { |
| 455 position: fixed; |
| 456 top: 0; |
| 457 bottom: 0; |
| 458 left: 100%; |
| 459 |
| 460 visibility: visible; |
| 461 |
| 462 width: 20px; |
| 463 |
| 464 content: ''; |
| 465 } |
| 466 |
| 467 :host([swipe-open][position=right]) > #contentContainer::after { |
| 468 right: 100%; |
| 469 left: auto; |
| 470 } |
| 471 |
| 472 :host([opened]) > #contentContainer { |
| 473 -webkit-transform: translate3d(0, 0, 0); |
| 474 transform: translate3d(0, 0, 0); |
| 475 } |
| 476 |
| 477 #scrim { |
| 478 position: absolute; |
| 479 top: 0; |
| 480 right: 0; |
| 481 bottom: 0; |
| 482 left: 0; |
| 483 |
| 484 transition: opacity 0.2s ease; |
| 485 -webkit-transform: translateZ(0); |
| 486 transform: translateZ(0); |
| 487 |
| 488 opacity: 0; |
| 489 background: var(--app-drawer-scrim-background, rgba(0, 0, 0, 0.5)); |
| 490 } |
| 491 |
| 492 :host([opened]) > #scrim { |
| 493 opacity: 1; |
| 494 } |
| 495 |
| 496 :host([opened][persistent]) > #scrim { |
| 497 visibility: hidden; |
| 498 /** |
| 499 * NOTE(keanulee): Keep both opacity: 0 and visibility: hidden to preven
t the |
| 500 * scrim from showing when toggling between closed and opened/persistent
. |
| 501 */ |
| 502 |
| 503 opacity: 0; |
| 504 } |
| 505 </style> |
| 506 |
| 507 <div id="scrim" on-tap="close"></div> |
| 508 |
| 509 <div id="contentContainer"> |
| 510 <content></content> |
| 511 </div> |
| 512 </template> |
| 513 |
| 514 </dom-module> |
| 515 <dom-module id="app-location" assetpath="chrome://resources/polymer/v1_0/app-rou
te/"> |
| 516 <template> |
| 517 <iron-location path="{{__path}}" query="{{__query}}" hash="{{__hash}}" url-s
pace-regex="{{urlSpaceRegex}}"> |
| 518 </iron-location> |
| 519 <iron-query-params params-string="{{__query}}" params-object="{{queryParams}
}"> |
| 520 </iron-query-params> |
| 521 </template> |
| 522 </dom-module> |
| 523 <dom-module id="iron-pages" assetpath="chrome://resources/polymer/v1_0/iron-page
s/"> |
| 524 |
| 525 <template> |
| 526 <style> |
| 527 :host { |
| 528 display: block; |
| 529 } |
| 530 |
| 531 :host > ::content > :not(.iron-selected) { |
| 532 display: none !important; |
| 533 } |
| 534 </style> |
| 535 |
| 536 <content></content> |
| 537 </template> |
| 538 |
| 539 </dom-module> |
| 540 <dom-module id="paper-ripple" assetpath="chrome://resources/polymer/v1_0/paper-r
ipple/"> |
| 541 |
| 542 <template> |
| 543 <style> |
| 544 :host { |
| 545 display: block; |
| 546 position: absolute; |
| 547 border-radius: inherit; |
| 548 overflow: hidden; |
| 549 top: 0; |
| 550 left: 0; |
| 551 right: 0; |
| 552 bottom: 0; |
| 553 |
| 554 /* See PolymerElements/paper-behaviors/issues/34. On non-Chrome browsers
, |
| 555 * creating a node (with a position:absolute) in the middle of an event |
| 556 * handler "interrupts" that event handler (which happens when the |
| 557 * ripple is created on demand) */ |
| 558 pointer-events: none; |
| 559 } |
| 560 |
| 561 :host([animating]) { |
| 562 /* This resolves a rendering issue in Chrome (as of 40) where the |
| 563 ripple is not properly clipped by its parent (which may have |
| 564 rounded corners). See: http://jsbin.com/temexa/4 |
| 565 |
| 566 Note: We only apply this style conditionally. Otherwise, the browser |
| 567 will create a new compositing layer for every ripple element on the |
| 568 page, and that would be bad. */ |
| 569 -webkit-transform: translate(0, 0); |
| 570 transform: translate3d(0, 0, 0); |
| 571 } |
| 572 |
| 573 #background, |
| 574 #waves, |
| 575 .wave-container, |
| 576 .wave { |
| 577 pointer-events: none; |
| 578 position: absolute; |
| 579 top: 0; |
| 580 left: 0; |
| 581 width: 100%; |
| 582 height: 100%; |
| 583 } |
| 584 |
| 585 #background, |
| 586 .wave { |
| 587 opacity: 0; |
| 588 } |
| 589 |
| 590 #waves, |
| 591 .wave { |
| 592 overflow: hidden; |
| 593 } |
| 594 |
| 595 .wave-container, |
| 596 .wave { |
| 597 border-radius: 50%; |
| 598 } |
| 599 |
| 600 :host(.circle) #background, |
| 601 :host(.circle) #waves { |
| 602 border-radius: 50%; |
| 603 } |
| 604 |
| 605 :host(.circle) .wave-container { |
| 606 overflow: hidden; |
| 607 } |
| 608 </style> |
| 609 |
| 610 <div id="background"></div> |
| 611 <div id="waves"></div> |
| 612 </template> |
| 613 </dom-module> |
| 614 <style is="custom-style"> |
| 615 |
| 616 :root { |
| 617 |
| 618 --shadow-transition: { |
| 619 transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1); |
| 620 }; |
| 621 |
| 622 --shadow-none: { |
| 623 box-shadow: none; |
| 624 }; |
| 625 |
| 626 /* from http://codepen.io/shyndman/pen/c5394ddf2e8b2a5c9185904b57421cdb */ |
| 627 |
| 628 --shadow-elevation-2dp: { |
| 629 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), |
| 630 0 1px 5px 0 rgba(0, 0, 0, 0.12), |
| 631 0 3px 1px -2px rgba(0, 0, 0, 0.2); |
| 632 }; |
| 633 |
| 634 --shadow-elevation-3dp: { |
| 635 box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), |
| 636 0 1px 8px 0 rgba(0, 0, 0, 0.12), |
| 637 0 3px 3px -2px rgba(0, 0, 0, 0.4); |
| 638 }; |
| 639 |
| 640 --shadow-elevation-4dp: { |
| 641 box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), |
| 642 0 1px 10px 0 rgba(0, 0, 0, 0.12), |
| 643 0 2px 4px -1px rgba(0, 0, 0, 0.4); |
| 644 }; |
| 645 |
| 646 --shadow-elevation-6dp: { |
| 647 box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), |
| 648 0 1px 18px 0 rgba(0, 0, 0, 0.12), |
| 649 0 3px 5px -1px rgba(0, 0, 0, 0.4); |
| 650 }; |
| 651 |
| 652 --shadow-elevation-8dp: { |
| 653 box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), |
| 654 0 3px 14px 2px rgba(0, 0, 0, 0.12), |
| 655 0 5px 5px -3px rgba(0, 0, 0, 0.4); |
| 656 }; |
| 657 |
| 658 --shadow-elevation-12dp: { |
| 659 box-shadow: 0 12px 16px 1px rgba(0, 0, 0, 0.14), |
| 660 0 4px 22px 3px rgba(0, 0, 0, 0.12), |
| 661 0 6px 7px -4px rgba(0, 0, 0, 0.4); |
| 662 }; |
| 663 |
| 664 --shadow-elevation-16dp: { |
| 665 box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), |
| 666 0 6px 30px 5px rgba(0, 0, 0, 0.12), |
| 667 0 8px 10px -5px rgba(0, 0, 0, 0.4); |
| 668 }; |
| 669 |
| 670 } |
| 671 |
| 672 </style> |
| 673 <dom-module id="paper-material-shared-styles" assetpath="chrome://resources/poly
mer/v1_0/paper-material/"> |
| 674 <template> |
| 675 <style> |
| 676 :host { |
| 677 display: block; |
| 678 position: relative; |
| 679 } |
| 680 |
| 681 :host([elevation="1"]) { |
| 682 @apply(--shadow-elevation-2dp); |
| 683 } |
| 684 |
| 685 :host([elevation="2"]) { |
| 686 @apply(--shadow-elevation-4dp); |
| 687 } |
| 688 |
| 689 :host([elevation="3"]) { |
| 690 @apply(--shadow-elevation-6dp); |
| 691 } |
| 692 |
| 693 :host([elevation="4"]) { |
| 694 @apply(--shadow-elevation-8dp); |
| 695 } |
| 696 |
| 697 :host([elevation="5"]) { |
| 698 @apply(--shadow-elevation-16dp); |
| 699 } |
| 700 </style> |
| 701 </template> |
| 702 </dom-module> |
| 703 |
| 704 |
| 705 <dom-module id="paper-button" assetpath="chrome://resources/polymer/v1_0/paper-b
utton/"> |
| 706 <template strip-whitespace=""> |
| 707 <style include="paper-material-shared-styles"> |
| 708 :host { |
| 709 @apply(--layout-inline); |
| 710 @apply(--layout-center-center); |
| 711 position: relative; |
| 712 box-sizing: border-box; |
| 713 min-width: 5.14em; |
| 714 margin: 0 0.29em; |
| 715 background: transparent; |
| 716 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); |
| 717 -webkit-tap-highlight-color: transparent; |
| 718 font: inherit; |
| 719 text-transform: uppercase; |
| 720 outline-width: 0; |
| 721 border-radius: 3px; |
| 722 -moz-user-select: none; |
| 723 -ms-user-select: none; |
| 724 -webkit-user-select: none; |
| 725 user-select: none; |
| 726 cursor: pointer; |
| 727 z-index: 0; |
| 728 padding: 0.7em 0.57em; |
| 729 |
| 730 @apply(--paper-font-common-base); |
| 731 @apply(--paper-button); |
| 732 } |
| 733 |
| 734 :host([hidden]) { |
| 735 display: none !important; |
| 736 } |
| 737 |
| 738 :host([raised].keyboard-focus) { |
| 739 font-weight: bold; |
| 740 @apply(--paper-button-raised-keyboard-focus); |
| 741 } |
| 742 |
| 743 :host(:not([raised]).keyboard-focus) { |
| 744 font-weight: bold; |
| 745 @apply(--paper-button-flat-keyboard-focus); |
| 746 } |
| 747 |
| 748 :host([disabled]) { |
| 749 background: #eaeaea; |
| 750 color: #a8a8a8; |
| 751 cursor: auto; |
| 752 pointer-events: none; |
| 753 |
| 754 @apply(--paper-button-disabled); |
| 755 } |
| 756 |
| 757 :host([animated]) { |
| 758 @apply(--shadow-transition); |
| 759 } |
| 760 |
| 761 paper-ripple { |
| 762 color: var(--paper-button-ink-color); |
| 763 } |
| 764 </style> |
| 765 |
| 766 <content></content> |
| 767 </template> |
| 768 |
| 769 </dom-module> |
| 770 <dom-module id="iron-icon" assetpath="chrome://resources/polymer/v1_0/iron-icon/
"> |
| 771 <template> |
| 772 <style> |
| 773 :host { |
| 774 @apply(--layout-inline); |
| 775 @apply(--layout-center-center); |
| 776 position: relative; |
| 777 |
| 778 vertical-align: middle; |
| 779 |
| 780 fill: var(--iron-icon-fill-color, currentcolor); |
| 781 stroke: var(--iron-icon-stroke-color, none); |
| 782 |
| 783 width: var(--iron-icon-width, 24px); |
| 784 height: var(--iron-icon-height, 24px); |
| 785 } |
| 786 </style> |
| 787 </template> |
| 788 |
| 789 </dom-module> |
| 790 <style is="custom-style"> |
| 791 |
| 792 :root { |
| 793 |
| 794 /* Material Design color palette for Google products */ |
| 795 |
| 796 --google-red-100: #f4c7c3; |
| 797 --google-red-300: #e67c73; |
| 798 --google-red-500: #db4437; |
| 799 --google-red-700: #c53929; |
| 800 |
| 801 --google-blue-100: #c6dafc; |
| 802 --google-blue-300: #7baaf7; |
| 803 --google-blue-500: #4285f4; |
| 804 --google-blue-700: #3367d6; |
| 805 |
| 806 --google-green-100: #b7e1cd; |
| 807 --google-green-300: #57bb8a; |
| 808 --google-green-500: #0f9d58; |
| 809 --google-green-700: #0b8043; |
| 810 |
| 811 --google-yellow-100: #fce8b2; |
| 812 --google-yellow-300: #f7cb4d; |
| 813 --google-yellow-500: #f4b400; |
| 814 --google-yellow-700: #f09300; |
| 815 |
| 816 --google-grey-100: #f5f5f5; |
| 817 --google-grey-300: #e0e0e0; |
| 818 --google-grey-500: #9e9e9e; |
| 819 --google-grey-700: #616161; |
| 820 |
| 821 /* Material Design color palette from online spec document */ |
| 822 |
| 823 --paper-red-50: #ffebee; |
| 824 --paper-red-100: #ffcdd2; |
| 825 --paper-red-200: #ef9a9a; |
| 826 --paper-red-300: #e57373; |
| 827 --paper-red-400: #ef5350; |
| 828 --paper-red-500: #f44336; |
| 829 --paper-red-600: #e53935; |
| 830 --paper-red-700: #d32f2f; |
| 831 --paper-red-800: #c62828; |
| 832 --paper-red-900: #b71c1c; |
| 833 --paper-red-a100: #ff8a80; |
| 834 --paper-red-a200: #ff5252; |
| 835 --paper-red-a400: #ff1744; |
| 836 --paper-red-a700: #d50000; |
| 837 |
| 838 --paper-pink-50: #fce4ec; |
| 839 --paper-pink-100: #f8bbd0; |
| 840 --paper-pink-200: #f48fb1; |
| 841 --paper-pink-300: #f06292; |
| 842 --paper-pink-400: #ec407a; |
| 843 --paper-pink-500: #e91e63; |
| 844 --paper-pink-600: #d81b60; |
| 845 --paper-pink-700: #c2185b; |
| 846 --paper-pink-800: #ad1457; |
| 847 --paper-pink-900: #880e4f; |
| 848 --paper-pink-a100: #ff80ab; |
| 849 --paper-pink-a200: #ff4081; |
| 850 --paper-pink-a400: #f50057; |
| 851 --paper-pink-a700: #c51162; |
| 852 |
| 853 --paper-purple-50: #f3e5f5; |
| 854 --paper-purple-100: #e1bee7; |
| 855 --paper-purple-200: #ce93d8; |
| 856 --paper-purple-300: #ba68c8; |
| 857 --paper-purple-400: #ab47bc; |
| 858 --paper-purple-500: #9c27b0; |
| 859 --paper-purple-600: #8e24aa; |
| 860 --paper-purple-700: #7b1fa2; |
| 861 --paper-purple-800: #6a1b9a; |
| 862 --paper-purple-900: #4a148c; |
| 863 --paper-purple-a100: #ea80fc; |
| 864 --paper-purple-a200: #e040fb; |
| 865 --paper-purple-a400: #d500f9; |
| 866 --paper-purple-a700: #aa00ff; |
| 867 |
| 868 --paper-deep-purple-50: #ede7f6; |
| 869 --paper-deep-purple-100: #d1c4e9; |
| 870 --paper-deep-purple-200: #b39ddb; |
| 871 --paper-deep-purple-300: #9575cd; |
| 872 --paper-deep-purple-400: #7e57c2; |
| 873 --paper-deep-purple-500: #673ab7; |
| 874 --paper-deep-purple-600: #5e35b1; |
| 875 --paper-deep-purple-700: #512da8; |
| 876 --paper-deep-purple-800: #4527a0; |
| 877 --paper-deep-purple-900: #311b92; |
| 878 --paper-deep-purple-a100: #b388ff; |
| 879 --paper-deep-purple-a200: #7c4dff; |
| 880 --paper-deep-purple-a400: #651fff; |
| 881 --paper-deep-purple-a700: #6200ea; |
| 882 |
| 883 --paper-indigo-50: #e8eaf6; |
| 884 --paper-indigo-100: #c5cae9; |
| 885 --paper-indigo-200: #9fa8da; |
| 886 --paper-indigo-300: #7986cb; |
| 887 --paper-indigo-400: #5c6bc0; |
| 888 --paper-indigo-500: #3f51b5; |
| 889 --paper-indigo-600: #3949ab; |
| 890 --paper-indigo-700: #303f9f; |
| 891 --paper-indigo-800: #283593; |
| 892 --paper-indigo-900: #1a237e; |
| 893 --paper-indigo-a100: #8c9eff; |
| 894 --paper-indigo-a200: #536dfe; |
| 895 --paper-indigo-a400: #3d5afe; |
| 896 --paper-indigo-a700: #304ffe; |
| 897 |
| 898 --paper-blue-50: #e3f2fd; |
| 899 --paper-blue-100: #bbdefb; |
| 900 --paper-blue-200: #90caf9; |
| 901 --paper-blue-300: #64b5f6; |
| 902 --paper-blue-400: #42a5f5; |
| 903 --paper-blue-500: #2196f3; |
| 904 --paper-blue-600: #1e88e5; |
| 905 --paper-blue-700: #1976d2; |
| 906 --paper-blue-800: #1565c0; |
| 907 --paper-blue-900: #0d47a1; |
| 908 --paper-blue-a100: #82b1ff; |
| 909 --paper-blue-a200: #448aff; |
| 910 --paper-blue-a400: #2979ff; |
| 911 --paper-blue-a700: #2962ff; |
| 912 |
| 913 --paper-light-blue-50: #e1f5fe; |
| 914 --paper-light-blue-100: #b3e5fc; |
| 915 --paper-light-blue-200: #81d4fa; |
| 916 --paper-light-blue-300: #4fc3f7; |
| 917 --paper-light-blue-400: #29b6f6; |
| 918 --paper-light-blue-500: #03a9f4; |
| 919 --paper-light-blue-600: #039be5; |
| 920 --paper-light-blue-700: #0288d1; |
| 921 --paper-light-blue-800: #0277bd; |
| 922 --paper-light-blue-900: #01579b; |
| 923 --paper-light-blue-a100: #80d8ff; |
| 924 --paper-light-blue-a200: #40c4ff; |
| 925 --paper-light-blue-a400: #00b0ff; |
| 926 --paper-light-blue-a700: #0091ea; |
| 927 |
| 928 --paper-cyan-50: #e0f7fa; |
| 929 --paper-cyan-100: #b2ebf2; |
| 930 --paper-cyan-200: #80deea; |
| 931 --paper-cyan-300: #4dd0e1; |
| 932 --paper-cyan-400: #26c6da; |
| 933 --paper-cyan-500: #00bcd4; |
| 934 --paper-cyan-600: #00acc1; |
| 935 --paper-cyan-700: #0097a7; |
| 936 --paper-cyan-800: #00838f; |
| 937 --paper-cyan-900: #006064; |
| 938 --paper-cyan-a100: #84ffff; |
| 939 --paper-cyan-a200: #18ffff; |
| 940 --paper-cyan-a400: #00e5ff; |
| 941 --paper-cyan-a700: #00b8d4; |
| 942 |
| 943 --paper-teal-50: #e0f2f1; |
| 944 --paper-teal-100: #b2dfdb; |
| 945 --paper-teal-200: #80cbc4; |
| 946 --paper-teal-300: #4db6ac; |
| 947 --paper-teal-400: #26a69a; |
| 948 --paper-teal-500: #009688; |
| 949 --paper-teal-600: #00897b; |
| 950 --paper-teal-700: #00796b; |
| 951 --paper-teal-800: #00695c; |
| 952 --paper-teal-900: #004d40; |
| 953 --paper-teal-a100: #a7ffeb; |
| 954 --paper-teal-a200: #64ffda; |
| 955 --paper-teal-a400: #1de9b6; |
| 956 --paper-teal-a700: #00bfa5; |
| 957 |
| 958 --paper-green-50: #e8f5e9; |
| 959 --paper-green-100: #c8e6c9; |
| 960 --paper-green-200: #a5d6a7; |
| 961 --paper-green-300: #81c784; |
| 962 --paper-green-400: #66bb6a; |
| 963 --paper-green-500: #4caf50; |
| 964 --paper-green-600: #43a047; |
| 965 --paper-green-700: #388e3c; |
| 966 --paper-green-800: #2e7d32; |
| 967 --paper-green-900: #1b5e20; |
| 968 --paper-green-a100: #b9f6ca; |
| 969 --paper-green-a200: #69f0ae; |
| 970 --paper-green-a400: #00e676; |
| 971 --paper-green-a700: #00c853; |
| 972 |
| 973 --paper-light-green-50: #f1f8e9; |
| 974 --paper-light-green-100: #dcedc8; |
| 975 --paper-light-green-200: #c5e1a5; |
| 976 --paper-light-green-300: #aed581; |
| 977 --paper-light-green-400: #9ccc65; |
| 978 --paper-light-green-500: #8bc34a; |
| 979 --paper-light-green-600: #7cb342; |
| 980 --paper-light-green-700: #689f38; |
| 981 --paper-light-green-800: #558b2f; |
| 982 --paper-light-green-900: #33691e; |
| 983 --paper-light-green-a100: #ccff90; |
| 984 --paper-light-green-a200: #b2ff59; |
| 985 --paper-light-green-a400: #76ff03; |
| 986 --paper-light-green-a700: #64dd17; |
| 987 |
| 988 --paper-lime-50: #f9fbe7; |
| 989 --paper-lime-100: #f0f4c3; |
| 990 --paper-lime-200: #e6ee9c; |
| 991 --paper-lime-300: #dce775; |
| 992 --paper-lime-400: #d4e157; |
| 993 --paper-lime-500: #cddc39; |
| 994 --paper-lime-600: #c0ca33; |
| 995 --paper-lime-700: #afb42b; |
| 996 --paper-lime-800: #9e9d24; |
| 997 --paper-lime-900: #827717; |
| 998 --paper-lime-a100: #f4ff81; |
| 999 --paper-lime-a200: #eeff41; |
| 1000 --paper-lime-a400: #c6ff00; |
| 1001 --paper-lime-a700: #aeea00; |
| 1002 |
| 1003 --paper-yellow-50: #fffde7; |
| 1004 --paper-yellow-100: #fff9c4; |
| 1005 --paper-yellow-200: #fff59d; |
| 1006 --paper-yellow-300: #fff176; |
| 1007 --paper-yellow-400: #ffee58; |
| 1008 --paper-yellow-500: #ffeb3b; |
| 1009 --paper-yellow-600: #fdd835; |
| 1010 --paper-yellow-700: #fbc02d; |
| 1011 --paper-yellow-800: #f9a825; |
| 1012 --paper-yellow-900: #f57f17; |
| 1013 --paper-yellow-a100: #ffff8d; |
| 1014 --paper-yellow-a200: #ffff00; |
| 1015 --paper-yellow-a400: #ffea00; |
| 1016 --paper-yellow-a700: #ffd600; |
| 1017 |
| 1018 --paper-amber-50: #fff8e1; |
| 1019 --paper-amber-100: #ffecb3; |
| 1020 --paper-amber-200: #ffe082; |
| 1021 --paper-amber-300: #ffd54f; |
| 1022 --paper-amber-400: #ffca28; |
| 1023 --paper-amber-500: #ffc107; |
| 1024 --paper-amber-600: #ffb300; |
| 1025 --paper-amber-700: #ffa000; |
| 1026 --paper-amber-800: #ff8f00; |
| 1027 --paper-amber-900: #ff6f00; |
| 1028 --paper-amber-a100: #ffe57f; |
| 1029 --paper-amber-a200: #ffd740; |
| 1030 --paper-amber-a400: #ffc400; |
| 1031 --paper-amber-a700: #ffab00; |
| 1032 |
| 1033 --paper-orange-50: #fff3e0; |
| 1034 --paper-orange-100: #ffe0b2; |
| 1035 --paper-orange-200: #ffcc80; |
| 1036 --paper-orange-300: #ffb74d; |
| 1037 --paper-orange-400: #ffa726; |
| 1038 --paper-orange-500: #ff9800; |
| 1039 --paper-orange-600: #fb8c00; |
| 1040 --paper-orange-700: #f57c00; |
| 1041 --paper-orange-800: #ef6c00; |
| 1042 --paper-orange-900: #e65100; |
| 1043 --paper-orange-a100: #ffd180; |
| 1044 --paper-orange-a200: #ffab40; |
| 1045 --paper-orange-a400: #ff9100; |
| 1046 --paper-orange-a700: #ff6500; |
| 1047 |
| 1048 --paper-deep-orange-50: #fbe9e7; |
| 1049 --paper-deep-orange-100: #ffccbc; |
| 1050 --paper-deep-orange-200: #ffab91; |
| 1051 --paper-deep-orange-300: #ff8a65; |
| 1052 --paper-deep-orange-400: #ff7043; |
| 1053 --paper-deep-orange-500: #ff5722; |
| 1054 --paper-deep-orange-600: #f4511e; |
| 1055 --paper-deep-orange-700: #e64a19; |
| 1056 --paper-deep-orange-800: #d84315; |
| 1057 --paper-deep-orange-900: #bf360c; |
| 1058 --paper-deep-orange-a100: #ff9e80; |
| 1059 --paper-deep-orange-a200: #ff6e40; |
| 1060 --paper-deep-orange-a400: #ff3d00; |
| 1061 --paper-deep-orange-a700: #dd2c00; |
| 1062 |
| 1063 --paper-brown-50: #efebe9; |
| 1064 --paper-brown-100: #d7ccc8; |
| 1065 --paper-brown-200: #bcaaa4; |
| 1066 --paper-brown-300: #a1887f; |
| 1067 --paper-brown-400: #8d6e63; |
| 1068 --paper-brown-500: #795548; |
| 1069 --paper-brown-600: #6d4c41; |
| 1070 --paper-brown-700: #5d4037; |
| 1071 --paper-brown-800: #4e342e; |
| 1072 --paper-brown-900: #3e2723; |
| 1073 |
| 1074 --paper-grey-50: #fafafa; |
| 1075 --paper-grey-100: #f5f5f5; |
| 1076 --paper-grey-200: #eeeeee; |
| 1077 --paper-grey-300: #e0e0e0; |
| 1078 --paper-grey-400: #bdbdbd; |
| 1079 --paper-grey-500: #9e9e9e; |
| 1080 --paper-grey-600: #757575; |
| 1081 --paper-grey-700: #616161; |
| 1082 --paper-grey-800: #424242; |
| 1083 --paper-grey-900: #212121; |
| 1084 |
| 1085 --paper-blue-grey-50: #eceff1; |
| 1086 --paper-blue-grey-100: #cfd8dc; |
| 1087 --paper-blue-grey-200: #b0bec5; |
| 1088 --paper-blue-grey-300: #90a4ae; |
| 1089 --paper-blue-grey-400: #78909c; |
| 1090 --paper-blue-grey-500: #607d8b; |
| 1091 --paper-blue-grey-600: #546e7a; |
| 1092 --paper-blue-grey-700: #455a64; |
| 1093 --paper-blue-grey-800: #37474f; |
| 1094 --paper-blue-grey-900: #263238; |
| 1095 |
| 1096 /* opacity for dark text on a light background */ |
| 1097 --dark-divider-opacity: 0.12; |
| 1098 --dark-disabled-opacity: 0.38; /* or hint text or icon */ |
| 1099 --dark-secondary-opacity: 0.54; |
| 1100 --dark-primary-opacity: 0.87; |
| 1101 |
| 1102 /* opacity for light text on a dark background */ |
| 1103 --light-divider-opacity: 0.12; |
| 1104 --light-disabled-opacity: 0.3; /* or hint text or icon */ |
| 1105 --light-secondary-opacity: 0.7; |
| 1106 --light-primary-opacity: 1.0; |
| 1107 |
| 1108 } |
| 1109 |
| 1110 </style> |
| 1111 |
| 1112 |
| 1113 <style is="custom-style"> |
| 1114 |
| 1115 :root { |
| 1116 /* |
| 1117 * You can use these generic variables in your elements for easy theming. |
| 1118 * For example, if all your elements use `--primary-text-color` as its main |
| 1119 * color, then switching from a light to a dark theme is just a matter of |
| 1120 * changing the value of `--primary-text-color` in your application. |
| 1121 */ |
| 1122 --primary-text-color: var(--light-theme-text-color); |
| 1123 --primary-background-color: var(--light-theme-background-color); |
| 1124 --secondary-text-color: var(--light-theme-secondary-color); |
| 1125 --disabled-text-color: var(--light-theme-disabled-color); |
| 1126 --divider-color: var(--light-theme-divider-color); |
| 1127 --error-color: var(--paper-deep-orange-a700); |
| 1128 |
| 1129 /* |
| 1130 * Primary and accent colors. Also see color.html for more colors. |
| 1131 */ |
| 1132 --primary-color: var(--paper-indigo-500); |
| 1133 --light-primary-color: var(--paper-indigo-100); |
| 1134 --dark-primary-color: var(--paper-indigo-700); |
| 1135 |
| 1136 --accent-color: var(--paper-pink-a200); |
| 1137 --light-accent-color: var(--paper-pink-a100); |
| 1138 --dark-accent-color: var(--paper-pink-a400); |
| 1139 |
| 1140 |
| 1141 /* |
| 1142 * Material Design Light background theme |
| 1143 */ |
| 1144 --light-theme-background-color: #ffffff; |
| 1145 --light-theme-base-color: #000000; |
| 1146 --light-theme-text-color: var(--paper-grey-900); |
| 1147 --light-theme-secondary-color: #737373; /* for secondary text and icons */ |
| 1148 --light-theme-disabled-color: #9b9b9b; /* disabled/hint text */ |
| 1149 --light-theme-divider-color: #dbdbdb; |
| 1150 |
| 1151 /* |
| 1152 * Material Design Dark background theme |
| 1153 */ |
| 1154 --dark-theme-background-color: var(--paper-grey-900); |
| 1155 --dark-theme-base-color: #ffffff; |
| 1156 --dark-theme-text-color: #ffffff; |
| 1157 --dark-theme-secondary-color: #bcbcbc; /* for secondary text and icons */ |
| 1158 --dark-theme-disabled-color: #646464; /* disabled/hint text */ |
| 1159 --dark-theme-divider-color: #3c3c3c; |
| 1160 |
| 1161 /* |
| 1162 * Deprecated values because of their confusing names. |
| 1163 */ |
| 1164 --text-primary-color: var(--dark-theme-text-color); |
| 1165 --default-primary-color: var(--primary-color); |
| 1166 |
| 1167 } |
| 1168 |
| 1169 </style> |
| 1170 |
| 1171 |
| 1172 <dom-module id="paper-icon-button" assetpath="chrome://resources/polymer/v1_0/pa
per-icon-button/"> |
| 1173 <template strip-whitespace=""> |
| 1174 <style> |
| 1175 :host { |
| 1176 display: inline-block; |
| 1177 position: relative; |
| 1178 padding: 8px; |
| 1179 outline: none; |
| 1180 -webkit-user-select: none; |
| 1181 -moz-user-select: none; |
| 1182 -ms-user-select: none; |
| 1183 user-select: none; |
| 1184 cursor: pointer; |
| 1185 z-index: 0; |
| 1186 line-height: 1; |
| 1187 |
| 1188 width: 40px; |
| 1189 height: 40px; |
| 1190 |
| 1191 /* NOTE: Both values are needed, since some phones require the value to
be `transparent`. */ |
| 1192 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); |
| 1193 -webkit-tap-highlight-color: transparent; |
| 1194 |
| 1195 /* Because of polymer/2558, this style has lower specificity than * */ |
| 1196 box-sizing: border-box !important; |
| 1197 |
| 1198 @apply(--paper-icon-button); |
| 1199 } |
| 1200 |
| 1201 :host #ink { |
| 1202 color: var(--paper-icon-button-ink-color, --primary-text-color); |
| 1203 opacity: 0.6; |
| 1204 } |
| 1205 |
| 1206 :host([disabled]) { |
| 1207 color: var(--paper-icon-button-disabled-text, --disabled-text-color); |
| 1208 pointer-events: none; |
| 1209 cursor: auto; |
| 1210 |
| 1211 @apply(--paper-icon-button-disabled); |
| 1212 } |
| 1213 |
| 1214 :host(:hover) { |
| 1215 @apply(--paper-icon-button-hover); |
| 1216 } |
| 1217 |
| 1218 iron-icon { |
| 1219 --iron-icon-width: 100%; |
| 1220 --iron-icon-height: 100%; |
| 1221 } |
| 1222 </style> |
| 1223 |
| 1224 <iron-icon id="icon" src="[[src]]" icon="[[icon]]" alt$="[[alt]]"></iron-ico
n> |
| 1225 </template> |
| 1226 |
| 1227 </dom-module> |
| 1228 <dom-module id="paper-tab" assetpath="chrome://resources/polymer/v1_0/paper-tabs
/"> |
| 1229 <template> |
| 1230 <style> |
| 1231 :host { |
| 1232 @apply(--layout-inline); |
| 1233 @apply(--layout-center); |
| 1234 @apply(--layout-center-justified); |
| 1235 @apply(--layout-flex-auto); |
| 1236 |
| 1237 position: relative; |
| 1238 padding: 0 12px; |
| 1239 overflow: hidden; |
| 1240 cursor: pointer; |
| 1241 vertical-align: middle; |
| 1242 |
| 1243 @apply(--paper-font-common-base); |
| 1244 @apply(--paper-tab); |
| 1245 } |
| 1246 |
| 1247 :host(:focus) { |
| 1248 outline: none; |
| 1249 } |
| 1250 |
| 1251 :host([link]) { |
| 1252 padding: 0; |
| 1253 } |
| 1254 |
| 1255 .tab-content { |
| 1256 height: 100%; |
| 1257 transform: translateZ(0); |
| 1258 -webkit-transform: translateZ(0); |
| 1259 transition: opacity 0.1s cubic-bezier(0.4, 0.0, 1, 1); |
| 1260 @apply(--layout-horizontal); |
| 1261 @apply(--layout-center-center); |
| 1262 @apply(--layout-flex-auto); |
| 1263 @apply(--paper-tab-content); |
| 1264 } |
| 1265 |
| 1266 :host(:not(.iron-selected)) > .tab-content { |
| 1267 opacity: 0.8; |
| 1268 |
| 1269 @apply(--paper-tab-content-unselected); |
| 1270 } |
| 1271 |
| 1272 :host(:focus) .tab-content { |
| 1273 opacity: 1; |
| 1274 font-weight: 700; |
| 1275 } |
| 1276 |
| 1277 paper-ripple { |
| 1278 color: var(--paper-tab-ink, --paper-yellow-a100); |
| 1279 } |
| 1280 |
| 1281 .tab-content > ::content > a { |
| 1282 @apply(--layout-flex-auto); |
| 1283 |
| 1284 height: 100%; |
| 1285 } |
| 1286 </style> |
| 1287 |
| 1288 <div class="tab-content"> |
| 1289 <content></content> |
| 1290 </div> |
| 1291 </template> |
| 1292 |
| 1293 </dom-module> |
| 1294 <iron-iconset-svg name="paper-tabs" size="24"> |
| 1295 <svg><defs> |
| 1296 <g id="chevron-left"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"></p
ath></g> |
| 1297 <g id="chevron-right"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"><
/path></g> |
| 1298 </defs></svg> |
| 1299 </iron-iconset-svg> |
| 1300 |
| 1301 |
| 1302 <dom-module id="paper-tabs" assetpath="chrome://resources/polymer/v1_0/paper-tab
s/"> |
| 1303 <template> |
| 1304 <style> |
| 1305 :host { |
| 1306 @apply(--layout); |
| 1307 @apply(--layout-center); |
| 1308 |
| 1309 height: 48px; |
| 1310 font-size: 14px; |
| 1311 font-weight: 500; |
| 1312 overflow: hidden; |
| 1313 -moz-user-select: none; |
| 1314 -ms-user-select: none; |
| 1315 -webkit-user-select: none; |
| 1316 user-select: none; |
| 1317 |
| 1318 /* NOTE: Both values are needed, since some phones require the value to
be `transparent`. */ |
| 1319 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); |
| 1320 -webkit-tap-highlight-color: transparent; |
| 1321 |
| 1322 @apply(--paper-tabs); |
| 1323 } |
| 1324 |
| 1325 :host-context([dir=rtl]) { |
| 1326 @apply(--layout-horizontal-reverse); |
| 1327 } |
| 1328 |
| 1329 #tabsContainer { |
| 1330 position: relative; |
| 1331 height: 100%; |
| 1332 white-space: nowrap; |
| 1333 overflow: hidden; |
| 1334 @apply(--layout-flex-auto); |
| 1335 } |
| 1336 |
| 1337 #tabsContent { |
| 1338 height: 100%; |
| 1339 -moz-flex-basis: auto; |
| 1340 -ms-flex-basis: auto; |
| 1341 flex-basis: auto; |
| 1342 } |
| 1343 |
| 1344 #tabsContent.scrollable { |
| 1345 position: absolute; |
| 1346 white-space: nowrap; |
| 1347 } |
| 1348 |
| 1349 #tabsContent:not(.scrollable), |
| 1350 #tabsContent.scrollable.fit-container { |
| 1351 @apply(--layout-horizontal); |
| 1352 } |
| 1353 |
| 1354 #tabsContent.scrollable.fit-container { |
| 1355 min-width: 100%; |
| 1356 } |
| 1357 |
| 1358 #tabsContent.scrollable.fit-container > ::content > * { |
| 1359 /* IE - prevent tabs from compressing when they should scroll. */ |
| 1360 -ms-flex: 1 0 auto; |
| 1361 -webkit-flex: 1 0 auto; |
| 1362 flex: 1 0 auto; |
| 1363 } |
| 1364 |
| 1365 .hidden { |
| 1366 display: none; |
| 1367 } |
| 1368 |
| 1369 .not-visible { |
| 1370 opacity: 0; |
| 1371 cursor: default; |
| 1372 } |
| 1373 |
| 1374 paper-icon-button { |
| 1375 width: 48px; |
| 1376 height: 48px; |
| 1377 padding: 12px; |
| 1378 margin: 0 4px; |
| 1379 } |
| 1380 |
| 1381 #selectionBar { |
| 1382 position: absolute; |
| 1383 height: 2px; |
| 1384 bottom: 0; |
| 1385 left: 0; |
| 1386 right: 0; |
| 1387 background-color: var(--paper-tabs-selection-bar-color, --paper-yellow-a
100); |
| 1388 -webkit-transform: scale(0); |
| 1389 transform: scale(0); |
| 1390 -webkit-transform-origin: left center; |
| 1391 transform-origin: left center; |
| 1392 transition: -webkit-transform; |
| 1393 transition: transform; |
| 1394 |
| 1395 @apply(--paper-tabs-selection-bar); |
| 1396 } |
| 1397 |
| 1398 #selectionBar.align-bottom { |
| 1399 top: 0; |
| 1400 bottom: auto; |
| 1401 } |
| 1402 |
| 1403 #selectionBar.expand { |
| 1404 transition-duration: 0.15s; |
| 1405 transition-timing-function: cubic-bezier(0.4, 0.0, 1, 1); |
| 1406 } |
| 1407 |
| 1408 #selectionBar.contract { |
| 1409 transition-duration: 0.18s; |
| 1410 transition-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1); |
| 1411 } |
| 1412 |
| 1413 #tabsContent > ::content > *:not(#selectionBar) { |
| 1414 height: 100%; |
| 1415 } |
| 1416 </style> |
| 1417 |
| 1418 <paper-icon-button icon="paper-tabs:chevron-left" class$="[[_computeScrollBu
ttonClass(_leftHidden, scrollable, hideScrollButtons)]]" on-up="_onScrollButtonU
p" on-down="_onLeftScrollButtonDown" tabindex="-1"></paper-icon-button> |
| 1419 |
| 1420 <div id="tabsContainer" on-track="_scroll" on-down="_down"> |
| 1421 <div id="tabsContent" class$="[[_computeTabsContentClass(scrollable, fitCo
ntainer)]]"> |
| 1422 <div id="selectionBar" class$="[[_computeSelectionBarClass(noBar, alignB
ottom)]]" on-transitionend="_onBarTransitionEnd"></div> |
| 1423 <content select="*"></content> |
| 1424 </div> |
| 1425 </div> |
| 1426 |
| 1427 <paper-icon-button icon="paper-tabs:chevron-right" class$="[[_computeScrollB
uttonClass(_rightHidden, scrollable, hideScrollButtons)]]" on-up="_onScrollButto
nUp" on-down="_onRightScrollButtonDown" tabindex="-1"></paper-icon-button> |
| 1428 |
| 1429 </template> |
| 1430 |
| 1431 </dom-module> |
| 1432 <iron-iconset-svg name="cr" size="24"> |
| 1433 <svg> |
| 1434 <defs> |
| 1435 |
| 1436 <g id="add"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path></g> |
| 1437 <g id="arrow-drop-down"><path d="M7 10l5 5 5-5z"></path></g> |
| 1438 <g id="cancel"><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-
10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41
7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"></path></g> |
| 1439 <if expr="chromeos"> |
| 1440 <g id="check"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z">
</path></g> |
| 1441 </if> |
| 1442 <g id="chevron-right"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6
-6z"></path></g> |
| 1443 <g id="clear"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5
17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path></g> |
| 1444 <g id="close"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5
17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path></g> |
| 1445 <g id="domain"><path d="M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2z
m0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2
zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z"></path>
</g> |
| 1446 <g id="expand-less"><path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14
z"></path></g> |
| 1447 <g id="expand-more"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
></path></g> |
| 1448 <g id="extension"><path d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.
88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.
7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2
.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.
5 11z"></path></g> |
| 1449 <g id="file-download"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z">
</path></g> |
| 1450 <g id="fullscreen"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3
v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"></path></g> |
| 1451 <g id="group"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0
-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5
8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.2
9 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z">
</path></g> |
| 1452 <g id="menu"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></pat
h></g> |
| 1453 <g id="more-vert"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2
2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2
2-.9 2-2-.9-2-2-2z"></path></g> |
| 1454 <g id="person"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.
79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"></path></g> |
| 1455 <g id="print"><path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-
1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm
-1-9H6v4h12V3z"></path></g> |
| 1456 <g id="search"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5
16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27
.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01
14 9.5 11.99 14 9.5 14z"></path></g> |
| 1457 <g id="settings"><path d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-
.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52
-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l
-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-
.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24
.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24
.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.2
3.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-
1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"></path></g> |
| 1458 <g id="star"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2
9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path></g> |
| 1459 <g id="warning"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4
z"></path></g> |
| 1460 <if expr="chromeos"> |
| 1461 <g id="star-border"><path d="M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46
4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.
32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z"></path></g> |
| 1462 </if> |
| 1463 </defs> |
| 1464 </svg> |
| 1465 </iron-iconset-svg> |
| 1466 |
| 1467 |
| 1468 <dom-module id="iron-a11y-announcer" assetpath="chrome://resources/polymer/v1_0/
iron-a11y-announcer/"> |
| 1469 <template> |
| 1470 <style> |
| 1471 :host { |
| 1472 display: inline-block; |
| 1473 position: fixed; |
| 1474 clip: rect(0px,0px,0px,0px); |
| 1475 } |
| 1476 </style> |
| 1477 <div aria-live$="[[mode]]">[[_text]]</div> |
| 1478 </template> |
| 1479 |
| 1480 </dom-module> |
| 1481 <style> |
| 1482 /* Copyright 2015 The Chromium Authors. All rights reserved. |
| 1483 * Use of this source code is governed by a BSD-style license that can be |
| 1484 * found in the LICENSE file. */ |
| 1485 |
| 1486 <if expr="not chromeos"> |
| 1487 @font-face { |
| 1488 font-family: 'Roboto'; |
| 1489 font-style: normal; |
| 1490 font-weight: 400; |
| 1491 src: local('Roboto'), local('Roboto-Regular'), |
| 1492 url("chrome://resources/roboto/roboto-regular.woff2") format('woff2'); |
| 1493 } |
| 1494 |
| 1495 @font-face { |
| 1496 font-family: 'Roboto'; |
| 1497 font-style: normal; |
| 1498 font-weight: 500; |
| 1499 src: local('Roboto Medium'), local('Roboto-Medium'), |
| 1500 url("chrome://resources/roboto/roboto-medium.woff2") format('woff2'); |
| 1501 } |
| 1502 |
| 1503 @font-face { |
| 1504 font-family: 'Roboto'; |
| 1505 font-style: normal; |
| 1506 font-weight: 700; |
| 1507 src: local('Roboto Bold'), local('Roboto-Bold'), |
| 1508 url("chrome://resources/roboto/roboto-bold.woff2") format('woff2'); |
| 1509 } |
| 1510 </if> |
| 1511 |
| 1512 </style> |
| 1513 <style is="custom-style"> |
| 1514 |
| 1515 :root { |
| 1516 |
| 1517 /* Shared Styles */ |
| 1518 --paper-font-common-base: { |
| 1519 font-family: 'Roboto', 'Noto', sans-serif; |
| 1520 -webkit-font-smoothing: antialiased; |
| 1521 }; |
| 1522 |
| 1523 --paper-font-common-code: { |
| 1524 font-family: 'Roboto Mono', 'Consolas', 'Menlo', monospace; |
| 1525 -webkit-font-smoothing: antialiased; |
| 1526 }; |
| 1527 |
| 1528 --paper-font-common-expensive-kerning: { |
| 1529 text-rendering: optimizeLegibility; |
| 1530 }; |
| 1531 |
| 1532 --paper-font-common-nowrap: { |
| 1533 white-space: nowrap; |
| 1534 overflow: hidden; |
| 1535 text-overflow: ellipsis; |
| 1536 }; |
| 1537 |
| 1538 /* Material Font Styles */ |
| 1539 |
| 1540 --paper-font-display4: { |
| 1541 @apply(--paper-font-common-base); |
| 1542 @apply(--paper-font-common-nowrap); |
| 1543 |
| 1544 font-size: 112px; |
| 1545 font-weight: 300; |
| 1546 letter-spacing: -.044em; |
| 1547 line-height: 120px; |
| 1548 }; |
| 1549 |
| 1550 --paper-font-display3: { |
| 1551 @apply(--paper-font-common-base); |
| 1552 @apply(--paper-font-common-nowrap); |
| 1553 |
| 1554 font-size: 56px; |
| 1555 font-weight: 400; |
| 1556 letter-spacing: -.026em; |
| 1557 line-height: 60px; |
| 1558 }; |
| 1559 |
| 1560 --paper-font-display2: { |
| 1561 @apply(--paper-font-common-base); |
| 1562 |
| 1563 font-size: 45px; |
| 1564 font-weight: 400; |
| 1565 letter-spacing: -.018em; |
| 1566 line-height: 48px; |
| 1567 }; |
| 1568 |
| 1569 --paper-font-display1: { |
| 1570 @apply(--paper-font-common-base); |
| 1571 |
| 1572 font-size: 34px; |
| 1573 font-weight: 400; |
| 1574 letter-spacing: -.01em; |
| 1575 line-height: 40px; |
| 1576 }; |
| 1577 |
| 1578 --paper-font-headline: { |
| 1579 @apply(--paper-font-common-base); |
| 1580 |
| 1581 font-size: 24px; |
| 1582 font-weight: 400; |
| 1583 letter-spacing: -.012em; |
| 1584 line-height: 32px; |
| 1585 }; |
| 1586 |
| 1587 --paper-font-title: { |
| 1588 @apply(--paper-font-common-base); |
| 1589 @apply(--paper-font-common-nowrap); |
| 1590 |
| 1591 font-size: 20px; |
| 1592 font-weight: 500; |
| 1593 line-height: 28px; |
| 1594 }; |
| 1595 |
| 1596 --paper-font-subhead: { |
| 1597 @apply(--paper-font-common-base); |
| 1598 |
| 1599 font-size: 16px; |
| 1600 font-weight: 400; |
| 1601 line-height: 24px; |
| 1602 }; |
| 1603 |
| 1604 --paper-font-body2: { |
| 1605 @apply(--paper-font-common-base); |
| 1606 |
| 1607 font-size: 14px; |
| 1608 font-weight: 500; |
| 1609 line-height: 24px; |
| 1610 }; |
| 1611 |
| 1612 --paper-font-body1: { |
| 1613 @apply(--paper-font-common-base); |
| 1614 |
| 1615 font-size: 14px; |
| 1616 font-weight: 400; |
| 1617 line-height: 20px; |
| 1618 }; |
| 1619 |
| 1620 --paper-font-caption: { |
| 1621 @apply(--paper-font-common-base); |
| 1622 @apply(--paper-font-common-nowrap); |
| 1623 |
| 1624 font-size: 12px; |
| 1625 font-weight: 400; |
| 1626 letter-spacing: 0.011em; |
| 1627 line-height: 20px; |
| 1628 }; |
| 1629 |
| 1630 --paper-font-menu: { |
| 1631 @apply(--paper-font-common-base); |
| 1632 @apply(--paper-font-common-nowrap); |
| 1633 |
| 1634 font-size: 13px; |
| 1635 font-weight: 500; |
| 1636 line-height: 24px; |
| 1637 }; |
| 1638 |
| 1639 --paper-font-button: { |
| 1640 @apply(--paper-font-common-base); |
| 1641 @apply(--paper-font-common-nowrap); |
| 1642 |
| 1643 font-size: 14px; |
| 1644 font-weight: 500; |
| 1645 letter-spacing: 0.018em; |
| 1646 line-height: 24px; |
| 1647 text-transform: uppercase; |
| 1648 }; |
| 1649 |
| 1650 --paper-font-code2: { |
| 1651 @apply(--paper-font-common-code); |
| 1652 |
| 1653 font-size: 14px; |
| 1654 font-weight: 700; |
| 1655 line-height: 20px; |
| 1656 }; |
| 1657 |
| 1658 --paper-font-code1: { |
| 1659 @apply(--paper-font-common-code); |
| 1660 |
| 1661 font-size: 14px; |
| 1662 font-weight: 500; |
| 1663 line-height: 20px; |
| 1664 }; |
| 1665 |
| 1666 } |
| 1667 |
| 1668 </style> |
| 1669 |
| 1670 |
| 1671 <dom-module id="paper-input-container" assetpath="chrome://resources/polymer/v1_
0/paper-input/"> |
| 1672 <template> |
| 1673 <style> |
| 1674 :host { |
| 1675 display: block; |
| 1676 padding: 8px 0; |
| 1677 |
| 1678 @apply(--paper-input-container); |
| 1679 } |
| 1680 |
| 1681 :host([inline]) { |
| 1682 display: inline-block; |
| 1683 } |
| 1684 |
| 1685 :host([disabled]) { |
| 1686 pointer-events: none; |
| 1687 opacity: 0.33; |
| 1688 |
| 1689 @apply(--paper-input-container-disabled); |
| 1690 } |
| 1691 |
| 1692 :host([hidden]) { |
| 1693 display: none !important; |
| 1694 } |
| 1695 |
| 1696 .floated-label-placeholder { |
| 1697 @apply(--paper-font-caption); |
| 1698 } |
| 1699 |
| 1700 .underline { |
| 1701 position: relative; |
| 1702 } |
| 1703 |
| 1704 .focused-line { |
| 1705 @apply(--layout-fit); |
| 1706 |
| 1707 background: var(--paper-input-container-focus-color, --primary-color); |
| 1708 height: 2px; |
| 1709 |
| 1710 -webkit-transform-origin: center center; |
| 1711 transform-origin: center center; |
| 1712 -webkit-transform: scale3d(0,1,1); |
| 1713 transform: scale3d(0,1,1); |
| 1714 |
| 1715 @apply(--paper-input-container-underline-focus); |
| 1716 } |
| 1717 |
| 1718 .underline.is-highlighted .focused-line { |
| 1719 -webkit-transform: none; |
| 1720 transform: none; |
| 1721 -webkit-transition: -webkit-transform 0.25s; |
| 1722 transition: transform 0.25s; |
| 1723 |
| 1724 @apply(--paper-transition-easing); |
| 1725 } |
| 1726 |
| 1727 .underline.is-invalid .focused-line { |
| 1728 background: var(--paper-input-container-invalid-color, --error-color); |
| 1729 -webkit-transform: none; |
| 1730 transform: none; |
| 1731 -webkit-transition: -webkit-transform 0.25s; |
| 1732 transition: transform 0.25s; |
| 1733 |
| 1734 @apply(--paper-transition-easing); |
| 1735 } |
| 1736 |
| 1737 .unfocused-line { |
| 1738 @apply(--layout-fit); |
| 1739 |
| 1740 background: var(--paper-input-container-color, --secondary-text-color); |
| 1741 height: 1px; |
| 1742 |
| 1743 @apply(--paper-input-container-underline); |
| 1744 } |
| 1745 |
| 1746 :host([disabled]) .unfocused-line { |
| 1747 border-bottom: 1px dashed; |
| 1748 border-color: var(--paper-input-container-color, --secondary-text-color)
; |
| 1749 background: transparent; |
| 1750 |
| 1751 @apply(--paper-input-container-underline-disabled); |
| 1752 } |
| 1753 |
| 1754 .label-and-input-container { |
| 1755 @apply(--layout-flex-auto); |
| 1756 @apply(--layout-relative); |
| 1757 |
| 1758 width: 100%; |
| 1759 max-width: 100%; |
| 1760 } |
| 1761 |
| 1762 .input-content { |
| 1763 @apply(--layout-horizontal); |
| 1764 @apply(--layout-center); |
| 1765 |
| 1766 position: relative; |
| 1767 } |
| 1768 |
| 1769 .input-content ::content label, |
| 1770 .input-content ::content .paper-input-label { |
| 1771 position: absolute; |
| 1772 top: 0; |
| 1773 right: 0; |
| 1774 left: 0; |
| 1775 width: 100%; |
| 1776 font: inherit; |
| 1777 color: var(--paper-input-container-color, --secondary-text-color); |
| 1778 -webkit-transition: -webkit-transform 0.25s, width 0.25s; |
| 1779 transition: transform 0.25s, width 0.25s; |
| 1780 -webkit-transform-origin: left top; |
| 1781 transform-origin: left top; |
| 1782 |
| 1783 @apply(--paper-font-common-nowrap); |
| 1784 @apply(--paper-font-subhead); |
| 1785 @apply(--paper-input-container-label); |
| 1786 @apply(--paper-transition-easing); |
| 1787 } |
| 1788 |
| 1789 .input-content.label-is-floating ::content label, |
| 1790 .input-content.label-is-floating ::content .paper-input-label { |
| 1791 -webkit-transform: translateY(-75%) scale(0.75); |
| 1792 transform: translateY(-75%) scale(0.75); |
| 1793 |
| 1794 /* Since we scale to 75/100 of the size, we actually have 100/75 of the |
| 1795 original space now available */ |
| 1796 width: 133%; |
| 1797 |
| 1798 @apply(--paper-input-container-label-floating); |
| 1799 } |
| 1800 |
| 1801 :host-context([dir="rtl"]) .input-content.label-is-floating ::content labe
l, |
| 1802 :host-context([dir="rtl"]) .input-content.label-is-floating ::content .pap
er-input-label { |
| 1803 /* TODO(noms): Figure out why leaving the width at 133% before the anima
tion |
| 1804 * actually makes |
| 1805 * it wider on the right side, not left side, as you would expect in RTL
*/ |
| 1806 width: 100%; |
| 1807 -webkit-transform-origin: right top; |
| 1808 transform-origin: right top; |
| 1809 } |
| 1810 |
| 1811 .input-content.label-is-highlighted ::content label, |
| 1812 .input-content.label-is-highlighted ::content .paper-input-label { |
| 1813 color: var(--paper-input-container-focus-color, --primary-color); |
| 1814 |
| 1815 @apply(--paper-input-container-label-focus); |
| 1816 } |
| 1817 |
| 1818 .input-content.is-invalid ::content label, |
| 1819 .input-content.is-invalid ::content .paper-input-label { |
| 1820 color: var(--paper-input-container-invalid-color, --error-color); |
| 1821 } |
| 1822 |
| 1823 .input-content.label-is-hidden ::content label, |
| 1824 .input-content.label-is-hidden ::content .paper-input-label { |
| 1825 visibility: hidden; |
| 1826 } |
| 1827 |
| 1828 .input-content ::content input, |
| 1829 .input-content ::content textarea, |
| 1830 .input-content ::content iron-autogrow-textarea, |
| 1831 .input-content ::content .paper-input-input { |
| 1832 position: relative; /* to make a stacking context */ |
| 1833 outline: none; |
| 1834 box-shadow: none; |
| 1835 padding: 0; |
| 1836 width: 100%; |
| 1837 max-width: 100%; |
| 1838 background: transparent; |
| 1839 border: none; |
| 1840 color: var(--paper-input-container-input-color, --primary-text-color); |
| 1841 -webkit-appearance: none; |
| 1842 text-align: inherit; |
| 1843 |
| 1844 @apply(--paper-font-subhead); |
| 1845 @apply(--paper-input-container-input); |
| 1846 } |
| 1847 |
| 1848 ::content [prefix] { |
| 1849 @apply(--paper-font-subhead); |
| 1850 |
| 1851 @apply(--paper-input-prefix); |
| 1852 @apply(--layout-flex-none); |
| 1853 } |
| 1854 |
| 1855 ::content [suffix] { |
| 1856 @apply(--paper-font-subhead); |
| 1857 |
| 1858 @apply(--paper-input-suffix); |
| 1859 @apply(--layout-flex-none); |
| 1860 } |
| 1861 |
| 1862 /* Firefox sets a min-width on the input, which can cause layout issues */ |
| 1863 .input-content ::content input { |
| 1864 min-width: 0; |
| 1865 } |
| 1866 |
| 1867 .input-content ::content textarea { |
| 1868 resize: none; |
| 1869 } |
| 1870 |
| 1871 .add-on-content { |
| 1872 position: relative; |
| 1873 } |
| 1874 |
| 1875 .add-on-content.is-invalid ::content * { |
| 1876 color: var(--paper-input-container-invalid-color, --error-color); |
| 1877 } |
| 1878 |
| 1879 .add-on-content.is-highlighted ::content * { |
| 1880 color: var(--paper-input-container-focus-color, --primary-color); |
| 1881 } |
| 1882 </style> |
| 1883 |
| 1884 <template is="dom-if" if="[[!noLabelFloat]]"> |
| 1885 <div class="floated-label-placeholder" aria-hidden="true"> </div> |
| 1886 </template> |
| 1887 |
| 1888 <div class$="[[_computeInputContentClass(noLabelFloat,alwaysFloatLabel,focus
ed,invalid,_inputHasContent)]]"> |
| 1889 <content select="[prefix]" id="prefix"></content> |
| 1890 |
| 1891 <div class="label-and-input-container" id="labelAndInputContainer"> |
| 1892 <content select=":not([add-on]):not([prefix]):not([suffix])"></content> |
| 1893 </div> |
| 1894 |
| 1895 <content select="[suffix]"></content> |
| 1896 </div> |
| 1897 |
| 1898 <div class$="[[_computeUnderlineClass(focused,invalid)]]"> |
| 1899 <div class="unfocused-line"></div> |
| 1900 <div class="focused-line"></div> |
| 1901 </div> |
| 1902 |
| 1903 <div class$="[[_computeAddOnContentClass(focused,invalid)]]"> |
| 1904 <content id="addOnContent" select="[add-on]"></content> |
| 1905 </div> |
| 1906 </template> |
| 1907 </dom-module> |
| 1908 |
| 1909 <dom-module id="paper-spinner-styles" assetpath="chrome://resources/polymer/v1_0
/paper-spinner/"> |
| 1910 <template> |
| 1911 <style> |
| 1912 /* |
| 1913 /**************************/ |
| 1914 /* STYLES FOR THE SPINNER */ |
| 1915 /**************************/ |
| 1916 |
| 1917 /* |
| 1918 * Constants: |
| 1919 * ARCSIZE = 270 degrees (amount of circle the arc takes up) |
| 1920 * ARCTIME = 1333ms (time it takes to expand and contract arc) |
| 1921 * ARCSTARTROT = 216 degrees (how much the start location of the arc |
| 1922 * should rotate each time, 216 gives us a |
| 1923 * 5 pointed star shape (it's 360/5 * 3). |
| 1924 * For a 7 pointed star, we might do |
| 1925 * 360/7 * 3 = 154.286) |
| 1926 * SHRINK_TIME = 400ms |
| 1927 */ |
| 1928 |
| 1929 :host { |
| 1930 display: inline-block; |
| 1931 position: relative; |
| 1932 width: 28px; |
| 1933 height: 28px; |
| 1934 |
| 1935 /* 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */ |
| 1936 --paper-spinner-container-rotation-duration: 1568ms; |
| 1937 |
| 1938 /* ARCTIME */ |
| 1939 --paper-spinner-expand-contract-duration: 1333ms; |
| 1940 |
| 1941 /* 4 * ARCTIME */ |
| 1942 --paper-spinner-full-cycle-duration: 5332ms; |
| 1943 |
| 1944 /* SHRINK_TIME */ |
| 1945 --paper-spinner-cooldown-duration: 400ms; |
| 1946 } |
| 1947 |
| 1948 #spinnerContainer { |
| 1949 width: 100%; |
| 1950 height: 100%; |
| 1951 |
| 1952 /* The spinner does not have any contents that would have to be |
| 1953 * flipped if the direction changes. Always use ltr so that the |
| 1954 * style works out correctly in both cases. */ |
| 1955 direction: ltr; |
| 1956 } |
| 1957 |
| 1958 #spinnerContainer.active { |
| 1959 -webkit-animation: container-rotate var(--paper-spinner-container-rotati
on-duration) linear infinite; |
| 1960 animation: container-rotate var(--paper-spinner-container-rotation-durat
ion) linear infinite; |
| 1961 } |
| 1962 |
| 1963 @-webkit-keyframes container-rotate { |
| 1964 to { -webkit-transform: rotate(360deg) } |
| 1965 } |
| 1966 |
| 1967 @keyframes container-rotate { |
| 1968 to { transform: rotate(360deg) } |
| 1969 } |
| 1970 |
| 1971 .spinner-layer { |
| 1972 position: absolute; |
| 1973 width: 100%; |
| 1974 height: 100%; |
| 1975 opacity: 0; |
| 1976 white-space: nowrap; |
| 1977 border-color: var(--paper-spinner-color, --google-blue-500); |
| 1978 } |
| 1979 |
| 1980 .layer-1 { |
| 1981 border-color: var(--paper-spinner-layer-1-color, --google-blue-500); |
| 1982 } |
| 1983 |
| 1984 .layer-2 { |
| 1985 border-color: var(--paper-spinner-layer-2-color, --google-red-500); |
| 1986 } |
| 1987 |
| 1988 .layer-3 { |
| 1989 border-color: var(--paper-spinner-layer-3-color, --google-yellow-500); |
| 1990 } |
| 1991 |
| 1992 .layer-4 { |
| 1993 border-color: var(--paper-spinner-layer-4-color, --google-green-500); |
| 1994 } |
| 1995 |
| 1996 /** |
| 1997 * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee): |
| 1998 * |
| 1999 * iOS Safari (tested on iOS 8.1) does not handle animation-delay very wel
l - it doesn't |
| 2000 * guarantee that the animation will start _exactly_ after that value. So
we avoid using |
| 2001 * animation-delay and instead set custom keyframes for each color (as lay
er-2undant as it |
| 2002 * seems). |
| 2003 */ |
| 2004 .active .spinner-layer { |
| 2005 -webkit-animation-name: fill-unfill-rotate; |
| 2006 -webkit-animation-duration: var(--paper-spinner-full-cycle-duration); |
| 2007 -webkit-animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); |
| 2008 -webkit-animation-iteration-count: infinite; |
| 2009 animation-name: fill-unfill-rotate; |
| 2010 animation-duration: var(--paper-spinner-full-cycle-duration); |
| 2011 animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); |
| 2012 animation-iteration-count: infinite; |
| 2013 opacity: 1; |
| 2014 } |
| 2015 |
| 2016 .active .spinner-layer.layer-1 { |
| 2017 -webkit-animation-name: fill-unfill-rotate, layer-1-fade-in-out; |
| 2018 animation-name: fill-unfill-rotate, layer-1-fade-in-out; |
| 2019 } |
| 2020 |
| 2021 .active .spinner-layer.layer-2 { |
| 2022 -webkit-animation-name: fill-unfill-rotate, layer-2-fade-in-out; |
| 2023 animation-name: fill-unfill-rotate, layer-2-fade-in-out; |
| 2024 } |
| 2025 |
| 2026 .active .spinner-layer.layer-3 { |
| 2027 -webkit-animation-name: fill-unfill-rotate, layer-3-fade-in-out; |
| 2028 animation-name: fill-unfill-rotate, layer-3-fade-in-out; |
| 2029 } |
| 2030 |
| 2031 .active .spinner-layer.layer-4 { |
| 2032 -webkit-animation-name: fill-unfill-rotate, layer-4-fade-in-out; |
| 2033 animation-name: fill-unfill-rotate, layer-4-fade-in-out; |
| 2034 } |
| 2035 |
| 2036 @-webkit-keyframes fill-unfill-rotate { |
| 2037 12.5% { -webkit-transform: rotate(135deg) } /* 0.5 * ARCSIZE */ |
| 2038 25% { -webkit-transform: rotate(270deg) } /* 1 * ARCSIZE */ |
| 2039 37.5% { -webkit-transform: rotate(405deg) } /* 1.5 * ARCSIZE */ |
| 2040 50% { -webkit-transform: rotate(540deg) } /* 2 * ARCSIZE */ |
| 2041 62.5% { -webkit-transform: rotate(675deg) } /* 2.5 * ARCSIZE */ |
| 2042 75% { -webkit-transform: rotate(810deg) } /* 3 * ARCSIZE */ |
| 2043 87.5% { -webkit-transform: rotate(945deg) } /* 3.5 * ARCSIZE */ |
| 2044 to { -webkit-transform: rotate(1080deg) } /* 4 * ARCSIZE */ |
| 2045 } |
| 2046 |
| 2047 @keyframes fill-unfill-rotate { |
| 2048 12.5% { transform: rotate(135deg) } /* 0.5 * ARCSIZE */ |
| 2049 25% { transform: rotate(270deg) } /* 1 * ARCSIZE */ |
| 2050 37.5% { transform: rotate(405deg) } /* 1.5 * ARCSIZE */ |
| 2051 50% { transform: rotate(540deg) } /* 2 * ARCSIZE */ |
| 2052 62.5% { transform: rotate(675deg) } /* 2.5 * ARCSIZE */ |
| 2053 75% { transform: rotate(810deg) } /* 3 * ARCSIZE */ |
| 2054 87.5% { transform: rotate(945deg) } /* 3.5 * ARCSIZE */ |
| 2055 to { transform: rotate(1080deg) } /* 4 * ARCSIZE */ |
| 2056 } |
| 2057 |
| 2058 @-webkit-keyframes layer-1-fade-in-out { |
| 2059 0% { opacity: 1 } |
| 2060 25% { opacity: 1 } |
| 2061 26% { opacity: 0 } |
| 2062 89% { opacity: 0 } |
| 2063 90% { opacity: 1 } |
| 2064 to { opacity: 1 } |
| 2065 } |
| 2066 |
| 2067 @keyframes layer-1-fade-in-out { |
| 2068 0% { opacity: 1 } |
| 2069 25% { opacity: 1 } |
| 2070 26% { opacity: 0 } |
| 2071 89% { opacity: 0 } |
| 2072 90% { opacity: 1 } |
| 2073 to { opacity: 1 } |
| 2074 } |
| 2075 |
| 2076 @-webkit-keyframes layer-2-fade-in-out { |
| 2077 0% { opacity: 0 } |
| 2078 15% { opacity: 0 } |
| 2079 25% { opacity: 1 } |
| 2080 50% { opacity: 1 } |
| 2081 51% { opacity: 0 } |
| 2082 to { opacity: 0 } |
| 2083 } |
| 2084 |
| 2085 @keyframes layer-2-fade-in-out { |
| 2086 0% { opacity: 0 } |
| 2087 15% { opacity: 0 } |
| 2088 25% { opacity: 1 } |
| 2089 50% { opacity: 1 } |
| 2090 51% { opacity: 0 } |
| 2091 to { opacity: 0 } |
| 2092 } |
| 2093 |
| 2094 @-webkit-keyframes layer-3-fade-in-out { |
| 2095 0% { opacity: 0 } |
| 2096 40% { opacity: 0 } |
| 2097 50% { opacity: 1 } |
| 2098 75% { opacity: 1 } |
| 2099 76% { opacity: 0 } |
| 2100 to { opacity: 0 } |
| 2101 } |
| 2102 |
| 2103 @keyframes layer-3-fade-in-out { |
| 2104 0% { opacity: 0 } |
| 2105 40% { opacity: 0 } |
| 2106 50% { opacity: 1 } |
| 2107 75% { opacity: 1 } |
| 2108 76% { opacity: 0 } |
| 2109 to { opacity: 0 } |
| 2110 } |
| 2111 |
| 2112 @-webkit-keyframes layer-4-fade-in-out { |
| 2113 0% { opacity: 0 } |
| 2114 65% { opacity: 0 } |
| 2115 75% { opacity: 1 } |
| 2116 90% { opacity: 1 } |
| 2117 to { opacity: 0 } |
| 2118 } |
| 2119 |
| 2120 @keyframes layer-4-fade-in-out { |
| 2121 0% { opacity: 0 } |
| 2122 65% { opacity: 0 } |
| 2123 75% { opacity: 1 } |
| 2124 90% { opacity: 1 } |
| 2125 to { opacity: 0 } |
| 2126 } |
| 2127 |
| 2128 .circle-clipper { |
| 2129 display: inline-block; |
| 2130 position: relative; |
| 2131 width: 50%; |
| 2132 height: 100%; |
| 2133 overflow: hidden; |
| 2134 border-color: inherit; |
| 2135 } |
| 2136 |
| 2137 /** |
| 2138 * Patch the gap that appear between the two adjacent div.circle-clipper w
hile the |
| 2139 * spinner is rotating (appears on Chrome 50, Safari 9.1.1, and Edge). |
| 2140 */ |
| 2141 .spinner-layer::after { |
| 2142 left: 45%; |
| 2143 width: 10%; |
| 2144 border-top-style: solid; |
| 2145 } |
| 2146 |
| 2147 .spinner-layer::after, |
| 2148 .circle-clipper::after { |
| 2149 content: ''; |
| 2150 box-sizing: border-box; |
| 2151 position: absolute; |
| 2152 top: 0; |
| 2153 border-width: var(--paper-spinner-stroke-width, 3px); |
| 2154 border-color: inherit; |
| 2155 border-radius: 50%; |
| 2156 } |
| 2157 |
| 2158 .circle-clipper::after { |
| 2159 bottom: 0; |
| 2160 width: 200%; |
| 2161 border-style: solid; |
| 2162 border-bottom-color: transparent !important; |
| 2163 } |
| 2164 |
| 2165 .circle-clipper.left::after { |
| 2166 left: 0; |
| 2167 border-right-color: transparent !important; |
| 2168 -webkit-transform: rotate(129deg); |
| 2169 transform: rotate(129deg); |
| 2170 } |
| 2171 |
| 2172 .circle-clipper.right::after { |
| 2173 left: -100%; |
| 2174 border-left-color: transparent !important; |
| 2175 -webkit-transform: rotate(-129deg); |
| 2176 transform: rotate(-129deg); |
| 2177 } |
| 2178 |
| 2179 .active .gap-patch::after, |
| 2180 .active .circle-clipper::after { |
| 2181 -webkit-animation-duration: var(--paper-spinner-expand-contract-duration
); |
| 2182 -webkit-animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); |
| 2183 -webkit-animation-iteration-count: infinite; |
| 2184 animation-duration: var(--paper-spinner-expand-contract-duration); |
| 2185 animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); |
| 2186 animation-iteration-count: infinite; |
| 2187 } |
| 2188 |
| 2189 .active .circle-clipper.left::after { |
| 2190 -webkit-animation-name: left-spin; |
| 2191 animation-name: left-spin; |
| 2192 } |
| 2193 |
| 2194 .active .circle-clipper.right::after { |
| 2195 -webkit-animation-name: right-spin; |
| 2196 animation-name: right-spin; |
| 2197 } |
| 2198 |
| 2199 @-webkit-keyframes left-spin { |
| 2200 0% { -webkit-transform: rotate(130deg) } |
| 2201 50% { -webkit-transform: rotate(-5deg) } |
| 2202 to { -webkit-transform: rotate(130deg) } |
| 2203 } |
| 2204 |
| 2205 @keyframes left-spin { |
| 2206 0% { transform: rotate(130deg) } |
| 2207 50% { transform: rotate(-5deg) } |
| 2208 to { transform: rotate(130deg) } |
| 2209 } |
| 2210 |
| 2211 @-webkit-keyframes right-spin { |
| 2212 0% { -webkit-transform: rotate(-130deg) } |
| 2213 50% { -webkit-transform: rotate(5deg) } |
| 2214 to { -webkit-transform: rotate(-130deg) } |
| 2215 } |
| 2216 |
| 2217 @keyframes right-spin { |
| 2218 0% { transform: rotate(-130deg) } |
| 2219 50% { transform: rotate(5deg) } |
| 2220 to { transform: rotate(-130deg) } |
| 2221 } |
| 2222 |
| 2223 #spinnerContainer.cooldown { |
| 2224 -webkit-animation: container-rotate var(--paper-spinner-container-rotati
on-duration) linear infinite, fade-out var(--paper-spinner-cooldown-duration) cu
bic-bezier(0.4, 0.0, 0.2, 1); |
| 2225 animation: container-rotate var(--paper-spinner-container-rotation-durat
ion) linear infinite, fade-out var(--paper-spinner-cooldown-duration) cubic-bezi
er(0.4, 0.0, 0.2, 1); |
| 2226 } |
| 2227 |
| 2228 @-webkit-keyframes fade-out { |
| 2229 0% { opacity: 1 } |
| 2230 to { opacity: 0 } |
| 2231 } |
| 2232 |
| 2233 @keyframes fade-out { |
| 2234 0% { opacity: 1 } |
| 2235 to { opacity: 0 } |
| 2236 } |
| 2237 </style> |
| 2238 </template> |
| 2239 </dom-module> |
| 2240 |
| 2241 |
| 2242 <dom-module id="paper-spinner-lite" assetpath="chrome://resources/polymer/v1_0/p
aper-spinner/"> |
| 2243 <template strip-whitespace=""> |
| 2244 <style include="paper-spinner-styles"></style> |
| 2245 |
| 2246 <div id="spinnerContainer" class-name="[[__computeContainerClasses(active, _
_coolingDown)]]"> |
| 2247 <div class="spinner-layer"> |
| 2248 <div class="circle-clipper left"></div> |
| 2249 <div class="circle-clipper right"></div> |
| 2250 </div> |
| 2251 </div> |
| 2252 </template> |
| 2253 |
| 2254 </dom-module> |
| 2255 <dom-module id="cr-toolbar-search-field" assetpath="chrome://resources/cr_elemen
ts/cr_toolbar/"> |
| 2256 <template> |
| 2257 <style> |
| 2258 :host { |
| 2259 align-items: center; |
| 2260 display: flex; |
| 2261 height: 40px; |
| 2262 transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), |
| 2263 width 150ms cubic-bezier(0.4, 0, 0.2, 1); |
| 2264 width: 44px; |
| 2265 } |
| 2266 |
| 2267 [hidden] { |
| 2268 display: none !important; |
| 2269 } |
| 2270 |
| 2271 paper-icon-button { |
| 2272 height: 32px; |
| 2273 margin: 6px; |
| 2274 min-width: 32px; |
| 2275 padding: 6px; |
| 2276 width: 32px; |
| 2277 } |
| 2278 |
| 2279 #icon { |
| 2280 --paper-icon-button-ink-color: white; |
| 2281 transition: margin 150ms, opacity 200ms; |
| 2282 } |
| 2283 |
| 2284 #prompt { |
| 2285 opacity: 0; |
| 2286 } |
| 2287 |
| 2288 paper-spinner-lite { |
| 2289 --paper-spinner-color: white; |
| 2290 height: 20px; |
| 2291 margin: 0 6px; |
| 2292 opacity: 0; |
| 2293 padding: 6px; |
| 2294 position: absolute; |
| 2295 width: 20px; |
| 2296 } |
| 2297 |
| 2298 paper-spinner-lite[active] { |
| 2299 opacity: 1; |
| 2300 } |
| 2301 |
| 2302 #prompt, |
| 2303 paper-spinner-lite { |
| 2304 transition: opacity 200ms; |
| 2305 } |
| 2306 |
| 2307 paper-input-container { |
| 2308 --paper-input-container-input-color: white; |
| 2309 --paper-input-container-underline: { |
| 2310 display: none; |
| 2311 }; |
| 2312 --paper-input-container-underline-focus: { |
| 2313 display: none; |
| 2314 }; |
| 2315 --paper-input-container-label: { |
| 2316 color: inherit; |
| 2317 font-size: inherit; |
| 2318 }; |
| 2319 -webkit-padding-start: 2px; |
| 2320 flex: 1; |
| 2321 } |
| 2322 |
| 2323 input[type='search']::-webkit-search-decoration, |
| 2324 input[type='search']::-webkit-search-cancel-button, |
| 2325 input[type='search']::-webkit-search-results-button { |
| 2326 -webkit-appearance: none; |
| 2327 } |
| 2328 |
| 2329 /** Wide layout. */ |
| 2330 :host(:not([narrow])) { |
| 2331 -webkit-padding-end: 0; |
| 2332 background: rgba(0, 0, 0, 0.22); |
| 2333 border-radius: 2px; |
| 2334 cursor: text; |
| 2335 width: var(--cr-toolbar-field-width); |
| 2336 } |
| 2337 |
| 2338 :host(:not([narrow]):not([showing-search])) #icon, |
| 2339 :host(:not([narrow]):not([showing-search])) #prompt { |
| 2340 opacity: 0.6; |
| 2341 } |
| 2342 |
| 2343 :host([narrow]:not([showing-search])) paper-input-container { |
| 2344 display: none; |
| 2345 } |
| 2346 |
| 2347 /* Search open. */ |
| 2348 :host([showing-search][spinner-active]) #icon { |
| 2349 opacity: 0; |
| 2350 } |
| 2351 |
| 2352 :host([narrow][showing-search]) { |
| 2353 width: 100%; |
| 2354 } |
| 2355 |
| 2356 /* |
| 2357 * Margin needs to be animated to prevent jumping around during |
| 2358 * opening/closing. -webkit-margin-start is not animatable, so we have to |
| 2359 * use regular margin-left/right instead. |
| 2360 */ |
| 2361 :host-context([dir=ltr]):host([narrow][showing-search]) #icon { |
| 2362 margin-left: 18px; |
| 2363 } |
| 2364 |
| 2365 :host-context([dir=rtl]):host([narrow][showing-search]) #icon { |
| 2366 margin-right: 18px; |
| 2367 } |
| 2368 </style> |
| 2369 <paper-spinner-lite active="[[isSpinnerShown_(spinnerActive, showingSearch)]
]"> |
| 2370 </paper-spinner-lite> |
| 2371 <paper-icon-button id="icon" icon="cr:search" title="[[label]]" tabindex$="[
[computeIconTabIndex_(narrow)]]"> |
| 2372 </paper-icon-button> |
| 2373 <paper-input-container id="searchTerm" on-search="onSearchTermSearch" on-key
down="onSearchTermKeydown" no-label-float=""> |
| 2374 <label id="prompt" for="searchInput">[[label]]</label> |
| 2375 <input is="iron-input" id="searchInput" type="search" on-blur="onInputBlur
_" incremental=""> |
| 2376 </paper-input-container> |
| 2377 <paper-icon-button icon="cr:cancel" id="clearSearch" title="[[clearLabel]]"
hidden$="[[!hasSearchText_]]" on-tap="hideSearch_"> |
| 2378 </paper-icon-button> |
| 2379 </template> |
| 2380 </dom-module> |
| 2381 <dom-module id="cr-toolbar" assetpath="chrome://resources/cr_elements/cr_toolbar
/"> |
| 2382 <template> |
| 2383 <style> |
| 2384 :host { |
| 2385 --cr-toolbar-field-width: 580px; |
| 2386 color: #fff; |
| 2387 display: flex; |
| 2388 height: 56px; |
| 2389 } |
| 2390 |
| 2391 h1 { |
| 2392 @apply(--layout-flex); |
| 2393 -webkit-margin-start: 6px; |
| 2394 font-size: 123%; |
| 2395 font-weight: 400; |
| 2396 text-overflow: ellipsis; |
| 2397 overflow: hidden; |
| 2398 white-space: nowrap; |
| 2399 } |
| 2400 |
| 2401 #leftContent { |
| 2402 -webkit-margin-start: 18px; |
| 2403 align-items: center; |
| 2404 display: flex; |
| 2405 position: absolute; |
| 2406 transition: opacity 100ms; |
| 2407 } |
| 2408 |
| 2409 #menuButton { |
| 2410 height: 32px; |
| 2411 margin-bottom: 6px; |
| 2412 margin-top: 6px; |
| 2413 min-width: 32px; |
| 2414 padding: 6px; |
| 2415 width: 32px; |
| 2416 } |
| 2417 |
| 2418 :host(:not([show-menu])) #menuButton { |
| 2419 display: none; |
| 2420 } |
| 2421 |
| 2422 #centeredContent { |
| 2423 -webkit-margin-start: var(--cr-toolbar-field-margin, 0); |
| 2424 -webkit-padding-end: 12px; |
| 2425 display: flex; |
| 2426 flex: 1 1 0; |
| 2427 justify-content: center; |
| 2428 } |
| 2429 |
| 2430 :host(:not([narrow_])) #leftContent { |
| 2431 max-width: calc((100% - var(--cr-toolbar-field-width) - 18px) / 2); |
| 2432 } |
| 2433 |
| 2434 :host([narrow_]) #centeredContent { |
| 2435 justify-content: flex-end; |
| 2436 } |
| 2437 |
| 2438 :host([narrow_][showing-search_]) #leftContent { |
| 2439 opacity: 0; |
| 2440 } |
| 2441 </style> |
| 2442 <div id="leftContent"> |
| 2443 <paper-icon-button id="menuButton" icon="cr:menu" on-tap="onMenuTap_"> |
| 2444 </paper-icon-button> |
| 2445 <h1>[[pageName]]</h1> |
| 2446 </div> |
| 2447 |
| 2448 <div id="centeredContent"> |
| 2449 <cr-toolbar-search-field id="search" narrow="[[narrow_]]" label="[[searchP
rompt]]" clear-label="[[clearLabel]]" spinner-active="[[spinnerActive]]" showing
-search="{{showingSearch_}}"> |
| 2450 </cr-toolbar-search-field> |
| 2451 <iron-media-query query="(max-width: 900px)" query-matches="{{narrow_}}"> |
| 2452 </iron-media-query> |
| 2453 </div> |
| 2454 </template> |
| 2455 </dom-module> |
| 2456 <iron-iconset-svg size="24" name="history"> |
| 2457 <svg> |
| 2458 <defs> |
| 2459 |
| 2460 <g id="chevron-left"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12
z"></path></g> |
| 2461 <g id="today"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 1
9c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z
"></path></g> |
| 2462 </defs> |
| 2463 </svg> |
| 2464 </iron-iconset-svg> |
| 2465 <dom-module id="shared-style" assetpath="chrome://history/"> |
| 2466 <template> |
| 2467 <style> |
| 2468 :root { |
| 2469 --card-border-color: rgba(0, 0, 0, 0.14); |
| 2470 --card-first-last-item-padding: 8px; |
| 2471 --card-max-width: 960px; |
| 2472 --card-min-width: 550px; |
| 2473 --card-padding-between: 20px; |
| 2474 --card-padding-side: 24px; |
| 2475 --card-sizing: { |
| 2476 margin: 0 auto; |
| 2477 max-width: var(--card-max-width); |
| 2478 min-width: var(--card-min-width); |
| 2479 padding: 0 var(--card-padding-side); |
| 2480 width: calc(100% - 2 * var(--card-padding-side)); |
| 2481 }; |
| 2482 --first-card-padding-top: 24px; |
| 2483 --item-height: 44px; |
| 2484 --primary-text-color: #333; |
| 2485 --secondary-text-color: #757575; |
| 2486 --side-bar-width: 256px; |
| 2487 --toolbar-grouped-height: 101px; |
| 2488 --toolbar-height: 56px; |
| 2489 } |
| 2490 |
| 2491 [hidden] { |
| 2492 display: none !important; |
| 2493 } |
| 2494 |
| 2495 .card-title { |
| 2496 @apply(--layout-center); |
| 2497 @apply(--layout-horizontal); |
| 2498 -webkit-padding-start: 20px; |
| 2499 border-bottom: 1px solid var(--card-border-color); |
| 2500 border-radius: 2px 2px 0 0; |
| 2501 color: var(--primary-text-color); |
| 2502 font-size: 14px; |
| 2503 font-weight: 500; |
| 2504 height: 48px; |
| 2505 } |
| 2506 |
| 2507 .centered-message { |
| 2508 align-items: center; |
| 2509 color: #b4b4b4; |
| 2510 display: flex; |
| 2511 flex: 1; |
| 2512 font-size: 14px; |
| 2513 font-weight: 500; |
| 2514 height: 100%; |
| 2515 justify-content: center; |
| 2516 } |
| 2517 |
| 2518 .menu-item { |
| 2519 -webkit-user-select: none; |
| 2520 cursor: pointer; |
| 2521 font: inherit; |
| 2522 white-space: nowrap; |
| 2523 } |
| 2524 |
| 2525 .website-icon { |
| 2526 -webkit-margin-end: 16px; |
| 2527 background-repeat: no-repeat; |
| 2528 background-size: 16px; |
| 2529 height: 16px; |
| 2530 width: 16px; |
| 2531 } |
| 2532 |
| 2533 .website-title { |
| 2534 color: var(--primary-text-color); |
| 2535 overflow: hidden; |
| 2536 text-decoration: none; |
| 2537 text-overflow: ellipsis; |
| 2538 white-space: nowrap; |
| 2539 } |
| 2540 |
| 2541 button.icon-button { |
| 2542 height: 36px; |
| 2543 width: 36px; |
| 2544 } |
| 2545 |
| 2546 button.icon-button iron-icon { |
| 2547 color: var(--secondary-text-color); |
| 2548 height: 20px; |
| 2549 width: 20px; |
| 2550 } |
| 2551 </style> |
| 2552 </template> |
| 2553 </dom-module> |
| 2554 <dom-module id="history-toolbar" assetpath="chrome://history/"> |
| 2555 <template> |
| 2556 <style include="shared-style"> |
| 2557 :host { |
| 2558 color: #fff; |
| 2559 display: block; |
| 2560 transition: background-color 150ms; |
| 2561 width: 100%; |
| 2562 } |
| 2563 |
| 2564 cr-toolbar, |
| 2565 #overlay-buttons, |
| 2566 #overlay-wrapper, |
| 2567 #toolbar-container { |
| 2568 @apply(--layout-center); |
| 2569 @apply(--layout-horizontal); |
| 2570 width: 100%; |
| 2571 } |
| 2572 |
| 2573 :host([items-selected_]) { |
| 2574 background: rgb(68, 136, 255); |
| 2575 } |
| 2576 |
| 2577 #toolbar-container { |
| 2578 height: var(--toolbar-height); |
| 2579 } |
| 2580 |
| 2581 cr-toolbar { |
| 2582 --cr-toolbar-field-margin: var(--side-bar-width); |
| 2583 } |
| 2584 |
| 2585 cr-toolbar[show-menu] { |
| 2586 --cr-toolbar-field-margin: 0; |
| 2587 } |
| 2588 |
| 2589 :host(:not([has-drawer])) #overlay-wrapper { |
| 2590 -webkit-margin-start: var(--side-bar-width); |
| 2591 } |
| 2592 |
| 2593 #overlay-buttons { |
| 2594 margin: 0 auto; |
| 2595 max-width: var(--card-max-width); |
| 2596 padding: 0 var(--card-padding-side); |
| 2597 } |
| 2598 |
| 2599 paper-button { |
| 2600 font-weight: 500; |
| 2601 } |
| 2602 |
| 2603 #number-selected { |
| 2604 @apply(--layout-flex); |
| 2605 } |
| 2606 |
| 2607 #cancel-icon-button { |
| 2608 -webkit-margin-end: 24px; |
| 2609 -webkit-margin-start: 2px; |
| 2610 height: 36px; |
| 2611 min-width: 36px; |
| 2612 width: 36px; |
| 2613 } |
| 2614 |
| 2615 #grouped-nav-container paper-icon-button { |
| 2616 --paper-icon-button-ink-color: rgba(255, 255, 255, 0.4); |
| 2617 -webkit-margin-start: 24px; |
| 2618 flex: 0 0 auto; |
| 2619 } |
| 2620 |
| 2621 paper-tab { |
| 2622 --paper-tab-ink: rgba(255, 255, 255, 0.4); |
| 2623 font-size: 13px; |
| 2624 text-transform: uppercase; |
| 2625 } |
| 2626 |
| 2627 paper-tabs { |
| 2628 --paper-tabs-selection-bar-color: var(--google-blue-500); |
| 2629 height: calc(var(--toolbar-grouped-height) - var(--toolbar-height)); |
| 2630 min-width: 300px; |
| 2631 } |
| 2632 |
| 2633 #grouped-buttons-container { |
| 2634 @apply(--layout-center); |
| 2635 @apply(--layout-horizontal); |
| 2636 } |
| 2637 |
| 2638 #grouped-range-buttons { |
| 2639 -webkit-margin-start: 32px; |
| 2640 } |
| 2641 |
| 2642 #grouped-nav-container { |
| 2643 @apply(--layout-center); |
| 2644 @apply(--layout-end-justified); |
| 2645 @apply(--layout-flex); |
| 2646 @apply(--layout-horizontal); |
| 2647 -webkit-margin-end: 24px; |
| 2648 overflow: hidden; |
| 2649 transition: opacity 150ms; |
| 2650 } |
| 2651 |
| 2652 :host([grouped-range='0']) #grouped-nav-container { |
| 2653 opacity: 0; |
| 2654 pointer-events: none; |
| 2655 } |
| 2656 |
| 2657 #grouped-date { |
| 2658 flex: 0 1 auto; |
| 2659 opacity: 0.7; |
| 2660 overflow: hidden; |
| 2661 text-align: right; |
| 2662 text-overflow: ellipsis; |
| 2663 white-space: nowrap; |
| 2664 } |
| 2665 |
| 2666 :host-context([dir=rtl]) .rtl-reversible { |
| 2667 transform: rotate(180deg); |
| 2668 } |
| 2669 </style> |
| 2670 <div id="toolbar-container"> |
| 2671 <cr-toolbar id="main-toolbar" page-name="$i18n{title}" clear-label="$i18n{
clearSearch}" search-prompt="$i18n{searchPrompt}" hidden$="[[itemsSelected_]]" s
pinner-active="[[spinnerActive]]" show-menu="[[hasDrawer]]" on-search-changed="o
nSearchChanged_"> |
| 2672 </cr-toolbar> |
| 2673 <div id="overlay-wrapper" hidden$="[[!itemsSelected_]]"> |
| 2674 <div id="overlay-buttons"> |
| 2675 <paper-icon-button icon="cr:clear" id="cancel-icon-button" on-tap="onC
learSelectionTap_"></paper-icon-button> |
| 2676 <div id="number-selected">[[numberOfItemsSelected_(count)]]</div> |
| 2677 <paper-button id="cancel-button" on-tap="onClearSelectionTap_"> |
| 2678 $i18n{cancel} |
| 2679 </paper-button> |
| 2680 <paper-button id="delete-button" on-tap="onDeleteTap_"> |
| 2681 $i18n{delete} |
| 2682 </paper-button> |
| 2683 </div> |
| 2684 </div> |
| 2685 </div> |
| 2686 <template is="dom-if" if="[[isGroupedMode]]"> |
| 2687 <div id="grouped-buttons-container"> |
| 2688 <paper-tabs attr-for-selected="value" selected="{{groupedRange}}" id="gr
ouped-range-buttons"> |
| 2689 <paper-tab value="0">$i18n{rangeAllTime}</paper-tab> |
| 2690 <paper-tab value="1">$i18n{rangeWeek}</paper-tab> |
| 2691 <paper-tab value="2">$i18n{rangeMonth}</paper-tab> |
| 2692 </paper-tabs> |
| 2693 <div id="grouped-nav-container"> |
| 2694 <span id="grouped-date"> |
| 2695 {{getHistoryInterval_(queryStartTime, queryEndTime)}} |
| 2696 </span> |
| 2697 <paper-icon-button icon="history:today" alt="$i18n{rangeToday}" title=
"$i18n{rangeToday}"></paper-icon-button> |
| 2698 <paper-icon-button icon="history:chevron-left" alt="$i18n{rangePreviou
s}" title="$i18n{rangePrevious}" class="rtl-reversible"></paper-icon-button> |
| 2699 <paper-icon-button icon="cr:chevron-right" alt="$i18n{rangeNext}" titl
e="$i18n{rangeNext}" class="rtl-reversible"></paper-icon-button> |
| 2700 </div> |
| 2701 </div> |
| 2702 </template> |
| 2703 </template> |
| 2704 </dom-module> |
| 2705 <dom-module id="cr-dialog" assetpath="chrome://resources/cr_elements/cr_dialog/"
> |
| 2706 <template> |
| 2707 <style> |
| 2708 :host { |
| 2709 border: 0; |
| 2710 border-radius: 2px; |
| 2711 bottom: 0; |
| 2712 color: inherit; |
| 2713 padding: 0; |
| 2714 top: 0; |
| 2715 } |
| 2716 |
| 2717 :host::backdrop { |
| 2718 background-color: rgba(0, 0, 0, 0.6); |
| 2719 bottom: 0; |
| 2720 left: 0; |
| 2721 position: fixed; |
| 2722 right: 0; |
| 2723 top: 0; |
| 2724 } |
| 2725 |
| 2726 .title-container { |
| 2727 align-items: center; |
| 2728 /* TODO(dbeam): should this be a --settings-separator-line? */ |
| 2729 border-bottom: 1px solid rgba(0, 0, 0, 0.14); |
| 2730 display: flex; |
| 2731 min-height: 52px; |
| 2732 } |
| 2733 |
| 2734 :host ::content .title { |
| 2735 font-size: 123.07%; /* (16px / 13px) * 100 */ |
| 2736 } |
| 2737 |
| 2738 #close { |
| 2739 --paper-icon-button: { |
| 2740 height: 40px; |
| 2741 width: 40px; |
| 2742 }; |
| 2743 -webkit-margin-end: 6px; |
| 2744 /* <paper-icon-button> overrides --iron-icon-{height,width}, so this |
| 2745 * padding essentially reduces 40x40 to 20x20. */ |
| 2746 padding: 10px; |
| 2747 } |
| 2748 |
| 2749 .body-container { |
| 2750 display: flex; |
| 2751 flex-direction: column; |
| 2752 max-width: 800px; |
| 2753 min-width: 512px; |
| 2754 /* TODO(dbeam): use <paper-dialog-scrollable> to get dividers? */ |
| 2755 overflow: auto; |
| 2756 } |
| 2757 |
| 2758 :host ::content .body { |
| 2759 margin: 12px 0; |
| 2760 } |
| 2761 |
| 2762 :host ::content .body, |
| 2763 :host ::content .title { |
| 2764 -webkit-padding-end: 24px; |
| 2765 -webkit-padding-start: 24px; |
| 2766 flex: 1; |
| 2767 } |
| 2768 |
| 2769 :host ::content .button-container { |
| 2770 -webkit-padding-end: 16px; |
| 2771 -webkit-padding-start: 16px; |
| 2772 display: flex; |
| 2773 justify-content: flex-end; |
| 2774 margin-bottom: 12px; |
| 2775 margin-top: 12px; |
| 2776 } |
| 2777 |
| 2778 :host ::content .button-container .cancel-button { |
| 2779 -webkit-margin-end: 8px; |
| 2780 color: var(--paper-grey-600); |
| 2781 } |
| 2782 |
| 2783 :host ::content .footer { |
| 2784 background-color: var(--paper-grey-200); |
| 2785 border-bottom-left-radius: inherit; |
| 2786 border-bottom-right-radius: inherit; |
| 2787 margin: 0; |
| 2788 padding: 12px 20px; |
| 2789 } |
| 2790 </style> |
| 2791 <div class="title-container"> |
| 2792 <content select=".title"></content> |
| 2793 <paper-icon-button icon="cr:clear" on-tap="cancel" id="close"> |
| 2794 </paper-icon-button> |
| 2795 </div> |
| 2796 <div class="body-container"> |
| 2797 <content select=".body"></content> |
| 2798 </div> |
| 2799 <content select=".button-container"></content> |
| 2800 <content select=".footer"></content> |
| 2801 </template> |
| 2802 </dom-module> |
| 2803 <dom-module id="iron-overlay-backdrop" assetpath="chrome://resources/polymer/v1_
0/iron-overlay-behavior/"> |
| 2804 |
| 2805 <template> |
| 2806 <style> |
| 2807 :host { |
| 2808 position: fixed; |
| 2809 top: 0; |
| 2810 left: 0; |
| 2811 width: 100%; |
| 2812 height: 100%; |
| 2813 background-color: var(--iron-overlay-backdrop-background-color, #000); |
| 2814 opacity: 0; |
| 2815 transition: opacity 0.2s; |
| 2816 pointer-events: none; |
| 2817 @apply(--iron-overlay-backdrop); |
| 2818 } |
| 2819 |
| 2820 :host(.opened) { |
| 2821 opacity: var(--iron-overlay-backdrop-opacity, 0.6); |
| 2822 pointer-events: auto; |
| 2823 @apply(--iron-overlay-backdrop-opened); |
| 2824 } |
| 2825 </style> |
| 2826 |
| 2827 <content></content> |
| 2828 </template> |
| 2829 |
| 2830 </dom-module> |
| 2831 |
| 2832 <script src="chrome://resources/polymer/v1_0/web-animations-js/web-animations-ne
xt-lite.min.js"></script> |
| 2833 |
| 2834 |
| 2835 <dom-module id="iron-dropdown" assetpath="chrome://resources/polymer/v1_0/iron-d
ropdown/"> |
| 2836 <template> |
| 2837 <style> |
| 2838 :host { |
| 2839 position: fixed; |
| 2840 } |
| 2841 |
| 2842 #contentWrapper ::content > * { |
| 2843 overflow: auto; |
| 2844 } |
| 2845 |
| 2846 #contentWrapper.animating ::content > * { |
| 2847 overflow: hidden; |
| 2848 } |
| 2849 </style> |
| 2850 |
| 2851 <div id="contentWrapper"> |
| 2852 <content id="content" select=".dropdown-content"></content> |
| 2853 </div> |
| 2854 </template> |
| 2855 |
| 2856 </dom-module> |
| 2857 <link rel="import" href="chrome://resources/html/util.html"> |
| 2858 <dom-module id="cr-shared-menu" assetpath="chrome://resources/cr_elements/cr_sha
red_menu/"> |
| 2859 <template> |
| 2860 <style> |
| 2861 #menu { |
| 2862 @apply(--shadow-elevation-2dp); |
| 2863 background-color: white; |
| 2864 overflow: hidden; |
| 2865 padding: 8px 0; |
| 2866 position: relative; |
| 2867 } |
| 2868 </style> |
| 2869 <iron-dropdown id="dropdown" allow-outside-scroll="" restore-focus-on-close=
"" vertical-align="auto" horizontal-align="right" opened="{{menuOpen}}" open-ani
mation-config="[[openAnimationConfig]]" close-animation-config="[[closeAnimation
Config]]"> |
| 2870 <div id="menu" class="dropdown-content" role="menu"> |
| 2871 <content></content> |
| 2872 </div> |
| 2873 </iron-dropdown> |
| 2874 </template> |
| 2875 </dom-module> |
| 2876 |
| 2877 <style is="custom-style"> |
| 2878 :root { |
| 2879 --cr-actionable: { |
| 2880 cursor: pointer; |
| 2881 }; |
| 2882 --cr-focused-item-color: var(--google-grey-300); |
| 2883 --cr-separator-line: 1px solid rgba(0, 0, 0, 0.06); |
| 2884 } |
| 2885 </style> |
| 2886 |
| 2887 <dom-module id="cr-shared-style" assetpath="chrome://resources/cr_elements/"> |
| 2888 <template> |
| 2889 <style> |
| 2890 .action-button { |
| 2891 background: var(--google-blue-500); |
| 2892 color: white; |
| 2893 --paper-button-flat-keyboard-focus: { |
| 2894 background: rgb(58, 117, 215); /* 88% of --google-blue-500 */ |
| 2895 }; |
| 2896 } |
| 2897 |
| 2898 .action-button[disabled] { |
| 2899 opacity: .25; /* TODO(dbeam): check this value with bettes. */ |
| 2900 } |
| 2901 |
| 2902 .cancel-button { |
| 2903 --paper-button-flat-keyboard-focus: { |
| 2904 background: rgba(0, 0, 0, .12); |
| 2905 }; |
| 2906 } |
| 2907 |
| 2908 .action-button, |
| 2909 .cancel-button { |
| 2910 font-weight: 500; |
| 2911 } |
| 2912 |
| 2913 [actionable] { |
| 2914 @apply(--cr-actionable); |
| 2915 } |
| 2916 </style> |
| 2917 </template> |
| 2918 </dom-module> |
| 2919 |
| 2920 |
| 2921 <dom-module id="paper-item-shared-styles" assetpath="chrome://resources/polymer/
v1_0/paper-item/"> |
| 2922 <template> |
| 2923 <style> |
| 2924 :host, .paper-item { |
| 2925 display: block; |
| 2926 position: relative; |
| 2927 min-height: var(--paper-item-min-height, 48px); |
| 2928 padding: 0px 16px; |
| 2929 } |
| 2930 |
| 2931 .paper-item { |
| 2932 @apply(--paper-font-subhead); |
| 2933 border:none; |
| 2934 outline: none; |
| 2935 background: white; |
| 2936 width: 100%; |
| 2937 text-align: left; |
| 2938 } |
| 2939 |
| 2940 :host([hidden]), .paper-item[hidden] { |
| 2941 display: none !important; |
| 2942 } |
| 2943 |
| 2944 :host(.iron-selected), .paper-item.iron-selected { |
| 2945 font-weight: var(--paper-item-selected-weight, bold); |
| 2946 |
| 2947 @apply(--paper-item-selected); |
| 2948 } |
| 2949 |
| 2950 :host([disabled]), .paper-item[disabled] { |
| 2951 color: var(--paper-item-disabled-color, --disabled-text-color); |
| 2952 |
| 2953 @apply(--paper-item-disabled); |
| 2954 } |
| 2955 |
| 2956 :host(:focus), .paper-item:focus { |
| 2957 position: relative; |
| 2958 outline: 0; |
| 2959 |
| 2960 @apply(--paper-item-focused); |
| 2961 } |
| 2962 |
| 2963 :host(:focus):before, .paper-item:focus:before { |
| 2964 @apply(--layout-fit); |
| 2965 |
| 2966 background: currentColor; |
| 2967 content: ''; |
| 2968 opacity: var(--dark-divider-opacity); |
| 2969 pointer-events: none; |
| 2970 |
| 2971 @apply(--paper-item-focused-before); |
| 2972 } |
| 2973 </style> |
| 2974 </template> |
| 2975 </dom-module> |
| 2976 |
| 2977 |
| 2978 <dom-module id="paper-item" assetpath="chrome://resources/polymer/v1_0/paper-ite
m/"> |
| 2979 <template> |
| 2980 <style include="paper-item-shared-styles"></style> |
| 2981 <style> |
| 2982 :host { |
| 2983 @apply(--layout-horizontal); |
| 2984 @apply(--layout-center); |
| 2985 @apply(--paper-font-subhead); |
| 2986 |
| 2987 @apply(--paper-item); |
| 2988 } |
| 2989 </style> |
| 2990 |
| 2991 <content></content> |
| 2992 </template> |
| 2993 |
| 2994 </dom-module> |
| 2995 <dom-module id="iron-collapse" assetpath="chrome://resources/polymer/v1_0/iron-c
ollapse/"> |
| 2996 |
| 2997 <template> |
| 2998 |
| 2999 <style> |
| 3000 :host { |
| 3001 display: block; |
| 3002 transition-duration: var(--iron-collapse-transition-duration, 300ms); |
| 3003 overflow: visible; |
| 3004 } |
| 3005 |
| 3006 :host(.iron-collapse-closed) { |
| 3007 display: none; |
| 3008 } |
| 3009 |
| 3010 :host(:not(.iron-collapse-opened)) { |
| 3011 overflow: hidden; |
| 3012 } |
| 3013 </style> |
| 3014 |
| 3015 <content></content> |
| 3016 |
| 3017 </template> |
| 3018 |
| 3019 </dom-module> |
| 3020 |
| 3021 <dom-module id="paper-checkbox" assetpath="chrome://resources/polymer/v1_0/paper
-checkbox/"> |
| 3022 <template strip-whitespace=""> |
| 3023 <style> |
| 3024 :host { |
| 3025 display: inline-block; |
| 3026 white-space: nowrap; |
| 3027 cursor: pointer; |
| 3028 --calculated-paper-checkbox-size: var(--paper-checkbox-size, 18px); |
| 3029 @apply(--paper-font-common-base); |
| 3030 line-height: 0; |
| 3031 -webkit-tap-highlight-color: transparent; |
| 3032 } |
| 3033 |
| 3034 :host([hidden]) { |
| 3035 display: none !important; |
| 3036 } |
| 3037 |
| 3038 :host(:focus) { |
| 3039 outline: none; |
| 3040 } |
| 3041 |
| 3042 .hidden { |
| 3043 display: none; |
| 3044 } |
| 3045 |
| 3046 #checkboxContainer { |
| 3047 display: inline-block; |
| 3048 position: relative; |
| 3049 width: var(--calculated-paper-checkbox-size); |
| 3050 height: var(--calculated-paper-checkbox-size); |
| 3051 min-width: var(--calculated-paper-checkbox-size); |
| 3052 margin: var(--paper-checkbox-margin, initial); |
| 3053 vertical-align: var(--paper-checkbox-vertical-align, middle); |
| 3054 background-color: var(--paper-checkbox-unchecked-background-color, trans
parent); |
| 3055 } |
| 3056 |
| 3057 #ink { |
| 3058 position: absolute; |
| 3059 |
| 3060 /* Center the ripple in the checkbox by negative offsetting it by |
| 3061 * (inkWidth - rippleWidth) / 2 */ |
| 3062 top: calc(0px - (2.66 * var(--calculated-paper-checkbox-size) - var(--ca
lculated-paper-checkbox-size)) / 2); |
| 3063 left: calc(0px - (2.66 * var(--calculated-paper-checkbox-size) - var(--c
alculated-paper-checkbox-size)) / 2); |
| 3064 width: calc(2.66 * var(--calculated-paper-checkbox-size)); |
| 3065 height: calc(2.66 * var(--calculated-paper-checkbox-size)); |
| 3066 color: var(--paper-checkbox-unchecked-ink-color, --primary-text-color); |
| 3067 opacity: 0.6; |
| 3068 pointer-events: none; |
| 3069 } |
| 3070 |
| 3071 :host-context([dir="rtl"]) #ink { |
| 3072 right: calc(0px - (2.66 * var(--calculated-paper-checkbox-size) - var(--
calculated-paper-checkbox-size)) / 2); |
| 3073 left: auto; |
| 3074 } |
| 3075 |
| 3076 #ink[checked] { |
| 3077 color: var(--paper-checkbox-checked-ink-color, --primary-color); |
| 3078 } |
| 3079 |
| 3080 #checkbox { |
| 3081 position: relative; |
| 3082 box-sizing: border-box; |
| 3083 height: 100%; |
| 3084 border: solid 2px; |
| 3085 border-color: var(--paper-checkbox-unchecked-color, --primary-text-color
); |
| 3086 border-radius: 2px; |
| 3087 pointer-events: none; |
| 3088 -webkit-transition: background-color 140ms, border-color 140ms; |
| 3089 transition: background-color 140ms, border-color 140ms; |
| 3090 } |
| 3091 |
| 3092 /* checkbox checked animations */ |
| 3093 #checkbox.checked #checkmark { |
| 3094 -webkit-animation: checkmark-expand 140ms ease-out forwards; |
| 3095 animation: checkmark-expand 140ms ease-out forwards; |
| 3096 } |
| 3097 |
| 3098 @-webkit-keyframes checkmark-expand { |
| 3099 0% { |
| 3100 -webkit-transform: scale(0, 0) rotate(45deg); |
| 3101 } |
| 3102 100% { |
| 3103 -webkit-transform: scale(1, 1) rotate(45deg); |
| 3104 } |
| 3105 } |
| 3106 |
| 3107 @keyframes checkmark-expand { |
| 3108 0% { |
| 3109 transform: scale(0, 0) rotate(45deg); |
| 3110 } |
| 3111 100% { |
| 3112 transform: scale(1, 1) rotate(45deg); |
| 3113 } |
| 3114 } |
| 3115 |
| 3116 #checkbox.checked { |
| 3117 background-color: var(--paper-checkbox-checked-color, --primary-color); |
| 3118 border-color: var(--paper-checkbox-checked-color, --primary-color); |
| 3119 } |
| 3120 |
| 3121 #checkmark { |
| 3122 position: absolute; |
| 3123 width: 36%; |
| 3124 height: 70%; |
| 3125 border-style: solid; |
| 3126 border-top: none; |
| 3127 border-left: none; |
| 3128 border-right-width: calc(2/15 * var(--calculated-paper-checkbox-size)); |
| 3129 border-bottom-width: calc(2/15 * var(--calculated-paper-checkbox-size)); |
| 3130 border-color: var(--paper-checkbox-checkmark-color, white); |
| 3131 -webkit-transform-origin: 97% 86%; |
| 3132 transform-origin: 97% 86%; |
| 3133 box-sizing: content-box; /* protect against page-level box-sizing */ |
| 3134 } |
| 3135 |
| 3136 :host-context([dir="rtl"]) #checkmark { |
| 3137 -webkit-transform-origin: 50% 14%; |
| 3138 transform-origin: 50% 14%; |
| 3139 } |
| 3140 |
| 3141 /* label */ |
| 3142 #checkboxLabel { |
| 3143 position: relative; |
| 3144 display: inline-block; |
| 3145 vertical-align: middle; |
| 3146 padding-left: var(--paper-checkbox-label-spacing, 8px); |
| 3147 white-space: normal; |
| 3148 line-height: normal; |
| 3149 color: var(--paper-checkbox-label-color, --primary-text-color); |
| 3150 @apply(--paper-checkbox-label); |
| 3151 } |
| 3152 |
| 3153 :host([checked]) #checkboxLabel { |
| 3154 color: var(--paper-checkbox-label-checked-color, --paper-checkbox-label-
color); |
| 3155 @apply(--paper-checkbox-label-checked); |
| 3156 } |
| 3157 |
| 3158 :host-context([dir="rtl"]) #checkboxLabel { |
| 3159 padding-right: var(--paper-checkbox-label-spacing, 8px); |
| 3160 padding-left: 0; |
| 3161 } |
| 3162 |
| 3163 #checkboxLabel[hidden] { |
| 3164 display: none; |
| 3165 } |
| 3166 |
| 3167 /* disabled state */ |
| 3168 |
| 3169 :host([disabled]) #checkbox { |
| 3170 opacity: 0.5; |
| 3171 border-color: var(--paper-checkbox-unchecked-color, --primary-text-color
); |
| 3172 } |
| 3173 |
| 3174 :host([disabled][checked]) #checkbox { |
| 3175 background-color: var(--paper-checkbox-unchecked-color, --primary-text-c
olor); |
| 3176 opacity: 0.5; |
| 3177 } |
| 3178 |
| 3179 :host([disabled]) #checkboxLabel { |
| 3180 opacity: 0.65; |
| 3181 } |
| 3182 |
| 3183 /* invalid state */ |
| 3184 #checkbox.invalid:not(.checked) { |
| 3185 border-color: var(--paper-checkbox-error-color, --error-color); |
| 3186 } |
| 3187 </style> |
| 3188 |
| 3189 <div id="checkboxContainer"> |
| 3190 <div id="checkbox" class$="[[_computeCheckboxClass(checked, invalid)]]"> |
| 3191 <div id="checkmark" class$="[[_computeCheckmarkClass(checked)]]"></div> |
| 3192 </div> |
| 3193 </div> |
| 3194 |
| 3195 <div id="checkboxLabel"><content></content></div> |
| 3196 </template> |
| 3197 |
| 3198 </dom-module> |
| 3199 <dom-module id="paper-icon-button-light" assetpath="chrome://resources/polymer/v
1_0/paper-icon-button/"> |
| 3200 <template strip-whitespace=""> |
| 3201 <style> |
| 3202 :host { |
| 3203 vertical-align: middle; |
| 3204 color: inherit; |
| 3205 outline: none; |
| 3206 width: 24px; |
| 3207 height: 24px; |
| 3208 background: none; |
| 3209 margin: 0; |
| 3210 border: none; |
| 3211 padding: 0; |
| 3212 |
| 3213 position: relative; |
| 3214 cursor: pointer; |
| 3215 |
| 3216 /* NOTE: Both values are needed, since some phones require the value to
be `transparent`. */ |
| 3217 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); |
| 3218 -webkit-tap-highlight-color: transparent; |
| 3219 } |
| 3220 |
| 3221 :host([disabled]) { |
| 3222 color: #9b9b9b; |
| 3223 pointer-events: none; |
| 3224 cursor: auto; |
| 3225 } |
| 3226 |
| 3227 paper-ripple { |
| 3228 opacity: 0.6; |
| 3229 color: currentColor; |
| 3230 } |
| 3231 </style> |
| 3232 <content></content> |
| 3233 </template> |
| 3234 </dom-module> |
| 3235 <dom-module id="history-searched-label" assetpath="chrome://history/"> |
| 3236 <template> |
| 3237 <span id="container"></span> |
| 3238 </template> |
| 3239 </dom-module> |
| 3240 <dom-module id="history-item" assetpath="chrome://history/"> |
| 3241 <template> |
| 3242 <style include="shared-style"> |
| 3243 :host { |
| 3244 display: block; |
| 3245 } |
| 3246 |
| 3247 :host(:not([embedded])) #main-container { |
| 3248 background: #fff; |
| 3249 border-color: var(--card-border-color); |
| 3250 border-style: solid; |
| 3251 border-width: 0 1px; |
| 3252 } |
| 3253 |
| 3254 :host(:not([embedded])) #sizing-container { |
| 3255 @apply(--card-sizing); |
| 3256 } |
| 3257 |
| 3258 :host([is-first-item]) #main-container { |
| 3259 margin-top: var(--first-card-padding-top); |
| 3260 } |
| 3261 |
| 3262 :host([is-card-start]) #main-container { |
| 3263 border-radius: 2px 2px 0 0; |
| 3264 border-top-width: 1px; |
| 3265 } |
| 3266 |
| 3267 :host([is-card-end]) #main-container { |
| 3268 border-bottom-width: 2px; |
| 3269 border-radius: 0 0 2px 2px; |
| 3270 margin-bottom: var(--card-padding-between); |
| 3271 } |
| 3272 |
| 3273 :host([is-card-start][is-card-end]) #main-container { |
| 3274 border-radius: 2px; |
| 3275 } |
| 3276 |
| 3277 #date-accessed { |
| 3278 display: none; |
| 3279 } |
| 3280 |
| 3281 :host([is-card-start]) #date-accessed { |
| 3282 display: flex; |
| 3283 } |
| 3284 |
| 3285 #item-container { |
| 3286 @apply(--layout-center); |
| 3287 @apply(--layout-horizontal); |
| 3288 min-height: var(--item-height); |
| 3289 } |
| 3290 |
| 3291 :host([is-card-start]) #item-container { |
| 3292 padding-top: var(--card-first-last-item-padding); |
| 3293 } |
| 3294 |
| 3295 :host([is-card-end]) #item-container { |
| 3296 padding-bottom: var(--card-first-last-item-padding); |
| 3297 } |
| 3298 |
| 3299 #title-and-domain { |
| 3300 @apply(--layout-center); |
| 3301 @apply(--layout-flex); |
| 3302 @apply(--layout-horizontal); |
| 3303 height: var(--item-height); |
| 3304 overflow: hidden; |
| 3305 } |
| 3306 |
| 3307 paper-checkbox { |
| 3308 --paper-checkbox-checked-color: rgb(68, 136, 255); |
| 3309 --paper-checkbox-size: 16px; |
| 3310 --paper-checkbox-unchecked-color: var(--secondary-text-color); |
| 3311 height: 16px; |
| 3312 margin: 0 16px 0 20px; |
| 3313 padding: 2px; |
| 3314 width: 16px; |
| 3315 } |
| 3316 |
| 3317 #time-accessed { |
| 3318 color: #646464; |
| 3319 min-width: 96px; |
| 3320 } |
| 3321 |
| 3322 #domain { |
| 3323 -webkit-margin-start: 16px; |
| 3324 color: var(--secondary-text-color); |
| 3325 flex-shrink: 0; |
| 3326 } |
| 3327 |
| 3328 #menu-button { |
| 3329 -webkit-margin-end: 12px; |
| 3330 } |
| 3331 |
| 3332 #star-container { |
| 3333 -webkit-margin-end: 4px; |
| 3334 -webkit-margin-start: 12px; |
| 3335 width: 32px; |
| 3336 } |
| 3337 |
| 3338 #bookmark-star { |
| 3339 color: rgb(68, 136, 255); |
| 3340 height: 32px; |
| 3341 width: 32px; |
| 3342 } |
| 3343 |
| 3344 #bookmark-star iron-icon { |
| 3345 height: 16px; |
| 3346 width: 16px; |
| 3347 } |
| 3348 |
| 3349 #time-gap-separator { |
| 3350 -webkit-border-start: 1px solid #888; |
| 3351 -webkit-margin-start: 77px; |
| 3352 height: 15px; |
| 3353 } |
| 3354 </style> |
| 3355 |
| 3356 <div id="sizing-container"> |
| 3357 <div id="main-container"> |
| 3358 <div id="date-accessed" class="card-title"> |
| 3359 [[cardTitle_(numberOfItems, item.dateRelativeDay, searchTerm)]] |
| 3360 </div> |
| 3361 <div id="item-container"> |
| 3362 <paper-checkbox id="checkbox" on-tap="onCheckboxSelected_" checked="{{
selected}}" disabled="[[selectionNotAllowed_()]]"> |
| 3363 </paper-checkbox> |
| 3364 <span id="time-accessed">[[item.readableTimestamp]]</span> |
| 3365 <div class="website-icon" id="icon"></div> |
| 3366 <div id="title-and-domain"> |
| 3367 <a href="[[item.url]]" id="title" class="website-title" title="[[cro
pItemTitle_(item.title)]]"> |
| 3368 <history-searched-label title="[[cropItemTitle_(item.title)]]" sea
rch-term="[[searchTerm]]"></history-searched-label> |
| 3369 </a> |
| 3370 <span id="domain">[[item.domain]]</span> |
| 3371 </div> |
| 3372 <div id="star-container"> |
| 3373 <template is="dom-if" if="[[item.starred]]"> |
| 3374 <button is="paper-icon-button-light" id="bookmark-star" title="$i1
8n{removeBookmark}" on-tap="onRemoveBookmarkTap_"> |
| 3375 <iron-icon icon="cr:star"></iron-icon> |
| 3376 </button> |
| 3377 </template> |
| 3378 </div> |
| 3379 <button is="paper-icon-button-light" id="menu-button" class="icon-butt
on" title="$i18n{moreActionsButton}" on-tap="onMenuButtonTap_"> |
| 3380 <iron-icon icon="cr:more-vert"></iron-icon> |
| 3381 </button> |
| 3382 </div> |
| 3383 <div id="time-gap-separator" hidden="[[!hasTimeGap]]"></div> |
| 3384 </div> |
| 3385 </div> |
| 3386 </template> |
| 3387 </dom-module> |
| 3388 <link rel="import" href="chrome://history/constants.html"> |
| 3389 <dom-module id="history-grouped-list" assetpath="chrome://history/"> |
| 3390 <template> |
| 3391 <style include="shared-style"> |
| 3392 :host { |
| 3393 display: block; |
| 3394 overflow: auto; |
| 3395 position: relative; |
| 3396 } |
| 3397 |
| 3398 #main-container { |
| 3399 @apply(--card-sizing); |
| 3400 align-items: center; |
| 3401 display: flex; |
| 3402 flex-direction: column; |
| 3403 padding-top: var(--first-card-padding-top); |
| 3404 } |
| 3405 |
| 3406 .domain-heading { |
| 3407 align-items: center; |
| 3408 display: flex; |
| 3409 height: var(--item-height); |
| 3410 padding: 0 20px; |
| 3411 } |
| 3412 |
| 3413 .domain-count { |
| 3414 color: rgb(151, 156, 160); |
| 3415 padding-left: 10px; |
| 3416 } |
| 3417 |
| 3418 .domain-heading-text { |
| 3419 display: flex; |
| 3420 } |
| 3421 |
| 3422 .group-container { |
| 3423 background: #fff; |
| 3424 border: 1px solid var(--card-border-color); |
| 3425 border-bottom-width: 2px; |
| 3426 border-radius: 2px; |
| 3427 margin-bottom: var(--card-padding-between); |
| 3428 max-width: var(--card-max-width); |
| 3429 min-width: var(--card-min-width); |
| 3430 width: 100%; |
| 3431 } |
| 3432 |
| 3433 .card-title { |
| 3434 margin-bottom: var(--card-first-last-item-padding); |
| 3435 } |
| 3436 |
| 3437 .domain-heading-text { |
| 3438 flex: 1 1 0; |
| 3439 } |
| 3440 |
| 3441 .dropdown-indicator { |
| 3442 max-width: 16px; |
| 3443 } |
| 3444 |
| 3445 history-item { |
| 3446 padding-left: 20px; |
| 3447 } |
| 3448 </style> |
| 3449 <div id="no-results" class="centered-message" hidden$="[[hasResults(groupedH
istoryData_.length)]]"> |
| 3450 [[noResultsMessage(searchedTerm, querying)]] |
| 3451 </div> |
| 3452 <div id="main-container" hidden$="[[!hasResults(groupedHistoryData_.length)]
]"> |
| 3453 <template is="dom-repeat" items="[[groupedHistoryData_]]" as="group" initi
al-count="1" index-as="groupIndex"> |
| 3454 <div class="group-container"> |
| 3455 <div class="card-title"> |
| 3456 [[group.title]] |
| 3457 </div> |
| 3458 |
| 3459 <template is="dom-repeat" items="[[group.domains]]" as="domain" initia
l-count="10" index-as="domainIndex"> |
| 3460 <div> |
| 3461 <div class="domain-heading" on-tap="toggleDomainExpanded_"> |
| 3462 <div class="domain-heading-text"> |
| 3463 <div class="website-icon" style="[[getWebsiteIconStyle_(domain
)]]"></div> |
| 3464 <span>[[domain.domain]]</span> |
| 3465 <span class="domain-count">[[domain.visits.length]]</span> |
| 3466 </div> |
| 3467 <iron-icon icon="[[getDropdownIcon_(domain.expanded)]]" class="d
ropdown-indicator"></iron-icon> |
| 3468 </div> |
| 3469 <iron-collapse opened="{{domain.expanded}}" id="collapse"> |
| 3470 <template is="dom-if" if="[[domain.rendered]]"> |
| 3471 <template is="dom-repeat" items="[[domain.visits]]" as="item"
initial-count="5" index-as="itemIndex"> |
| 3472 <history-item item="[[item]]" selected="{{item.selected}}" h
as-time-gap="[[needsTimeGap_( |
| 3473 groupIndex, domainIndex, itemIndex)]]" search-term="
[[searchedTerm]]" number-of-items="[[historyData.length]]" path="[[pathForItem_( |
| 3474 groupIndex, domainIndex, itemIndex)]]" embedded=""> |
| 3475 </history-item> |
| 3476 </template> |
| 3477 </template> |
| 3478 </iron-collapse> |
| 3479 </div> |
| 3480 </template> |
| 3481 </div> |
| 3482 </template> |
| 3483 </div> |
| 3484 </template> |
| 3485 </dom-module> |
| 3486 <dom-module id="iron-list" assetpath="chrome://resources/polymer/v1_0/iron-list/
"> |
| 3487 <template> |
| 3488 <style> |
| 3489 :host { |
| 3490 display: block; |
| 3491 position: relative; |
| 3492 } |
| 3493 |
| 3494 @media only screen and (-webkit-max-device-pixel-ratio: 1) { |
| 3495 :host { |
| 3496 will-change: transform; |
| 3497 } |
| 3498 } |
| 3499 |
| 3500 #items { |
| 3501 @apply(--iron-list-items-container); |
| 3502 position: relative; |
| 3503 } |
| 3504 |
| 3505 :host(:not([grid])) #items > ::content > * { |
| 3506 width: 100%; |
| 3507 }; |
| 3508 |
| 3509 #items > ::content > * { |
| 3510 box-sizing: border-box; |
| 3511 margin: 0; |
| 3512 position: absolute; |
| 3513 top: 0; |
| 3514 will-change: transform; |
| 3515 } |
| 3516 </style> |
| 3517 |
| 3518 <array-selector id="selector" items="{{items}}" selected="{{selectedItems}}"
selected-item="{{selectedItem}}"> |
| 3519 </array-selector> |
| 3520 |
| 3521 <div id="items"> |
| 3522 <content></content> |
| 3523 </div> |
| 3524 |
| 3525 </template> |
| 3526 </dom-module> |
| 3527 |
| 3528 <dom-module id="iron-scroll-threshold" assetpath="chrome://resources/polymer/v1_
0/iron-scroll-threshold/"> |
| 3529 <template> |
| 3530 <style> |
| 3531 :host { |
| 3532 display: block; |
| 3533 } |
| 3534 </style> |
| 3535 |
| 3536 <content></content> |
| 3537 |
| 3538 </template> |
| 3539 </dom-module> |
| 3540 |
| 3541 <dom-module id="history-list" assetpath="chrome://history/"> |
| 3542 <template> |
| 3543 <style include="shared-style"> |
| 3544 :host { |
| 3545 display: block; |
| 3546 } |
| 3547 |
| 3548 #infinite-list { |
| 3549 height: 100%; |
| 3550 } |
| 3551 |
| 3552 history-item { |
| 3553 --history-item-padding-side: var(--card-padding-side); |
| 3554 } |
| 3555 </style> |
| 3556 <div id="no-results" class="centered-message" hidden$="[[hasResults(historyD
ata_.length)]]"> |
| 3557 {{noResultsMessage(searchedTerm, querying)}} |
| 3558 </div> |
| 3559 <iron-list items="{{historyData_}}" as="item" id="infinite-list" hidden$="[[
!hasResults(historyData_.length)]]"> |
| 3560 <template> |
| 3561 <history-item item="[[item]]" selected="{{item.selected}}" is-first-item
="[[isFirstItem_(index)]]" is-card-start="[[isCardStart_(item, index, historyDat
a_.length)]]" is-card-end="[[isCardEnd_(item, index, historyData_.length)]]" has
-time-gap="[[needsTimeGap_(item, index, historyData_.length)]]" search-term="[[s
earchedTerm]]" number-of-items="[[historyData_.length]]" path="[[pathForItem_(in
dex)]]"> |
| 3562 </history-item> |
| 3563 </template> |
| 3564 </iron-list> |
| 3565 <iron-scroll-threshold id="scroll-threshold" scroll-target="infinite-list" l
ower-threshold="500" on-lower-threshold="loadMoreData_"> |
| 3566 </iron-scroll-threshold> |
| 3567 </template> |
| 3568 </dom-module> |
| 3569 <dom-module id="history-list-container" assetpath="chrome://history/"> |
| 3570 <template> |
| 3571 <style include="shared-style cr-shared-style"> |
| 3572 :host { |
| 3573 display: block; |
| 3574 height: 100%; |
| 3575 overflow: hidden; |
| 3576 } |
| 3577 |
| 3578 #content, |
| 3579 #content > * { |
| 3580 height: 100%; |
| 3581 } |
| 3582 |
| 3583 #dialog .body { |
| 3584 white-space: pre-wrap; |
| 3585 } |
| 3586 </style> |
| 3587 <iron-pages id="content" attr-for-selected="id" selected="[[selectedPage_]]"
> |
| 3588 <history-list id="infinite-list" querying="[[queryState.querying]]" search
ed-term="[[queryResult.info.term]]"></history-list> |
| 3589 <template is="dom-if" if="[[grouped]]"> |
| 3590 <history-grouped-list id="grouped-list" range="[[queryState.range]]" que
ry-start-time="[[queryResult.info.queryStartTime]]" query-end-time="[[queryResul
t.info.queryEndTime]]" searched-term="[[queryResult.info.term]]"> |
| 3591 </history-grouped-list> |
| 3592 </template> |
| 3593 </iron-pages> |
| 3594 |
| 3595 <dialog is="cr-dialog" id="dialog"> |
| 3596 <div class="title">$i18n{removeSelected}</div> |
| 3597 <div class="body">$i18n{deleteWarning}</div> |
| 3598 <div class="button-container"> |
| 3599 <paper-button class="cancel-button" on-tap="onDialogCancelTap_"> |
| 3600 $i18n{cancel} |
| 3601 </paper-button> |
| 3602 <paper-button class="action-button" on-tap="onDialogConfirmTap_" autofoc
us=""> |
| 3603 $i18n{deleteConfirm} |
| 3604 </paper-button> |
| 3605 </div> |
| 3606 </dialog> |
| 3607 |
| 3608 <cr-shared-menu id="sharedMenu"> |
| 3609 <paper-item id="menuMoreButton" class="menu-item" on-tap="onMoreFromSiteTa
p_"> |
| 3610 $i18n{moreFromSite} |
| 3611 </paper-item> |
| 3612 <paper-item id="menuRemoveButton" class="menu-item" on-tap="onRemoveFromHi
storyTap_"> |
| 3613 $i18n{removeFromHistory} |
| 3614 </paper-item> |
| 3615 </cr-shared-menu> |
| 3616 </template> |
| 3617 </dom-module> |
| 3618 <dom-module id="history-synced-device-card" assetpath="chrome://history/"> |
| 3619 <template> |
| 3620 <style include="shared-style"> |
| 3621 :host { |
| 3622 @apply(--card-sizing); |
| 3623 display: block; |
| 3624 padding-bottom: var(--card-padding-between); |
| 3625 } |
| 3626 |
| 3627 #card-heading { |
| 3628 @apply(--layout-justified); |
| 3629 cursor: pointer; |
| 3630 } |
| 3631 |
| 3632 #icon { |
| 3633 -webkit-margin-start: 20px; |
| 3634 } |
| 3635 |
| 3636 #tab-item-list { |
| 3637 padding: 8px 0; |
| 3638 } |
| 3639 |
| 3640 #last-update-time { |
| 3641 color: var(--secondary-text-color); |
| 3642 } |
| 3643 |
| 3644 #right-buttons { |
| 3645 -webkit-margin-end: 4px; |
| 3646 } |
| 3647 |
| 3648 #menu-button { |
| 3649 -webkit-margin-end: 8px; |
| 3650 } |
| 3651 |
| 3652 #collapse { |
| 3653 border-bottom: 1px solid var(--card-border-color); |
| 3654 overflow: hidden; |
| 3655 } |
| 3656 |
| 3657 #history-item-container { |
| 3658 background: #fff; |
| 3659 border: 1px solid var(--card-border-color); |
| 3660 border-radius: 2px; |
| 3661 } |
| 3662 |
| 3663 #item-container { |
| 3664 @apply(--layout-center); |
| 3665 @apply(--layout-horizontal); |
| 3666 min-height: var(--item-height); |
| 3667 } |
| 3668 |
| 3669 #window-separator { |
| 3670 background-color: var(--card-border-color); |
| 3671 height: 1px; |
| 3672 margin: 5px auto; |
| 3673 width: 80%; |
| 3674 } |
| 3675 </style> |
| 3676 <div id="history-item-container"> |
| 3677 <div class="card-title" id="card-heading" aria-expanded$="[[cardOpen_]]" a
ria-controls="collapse" on-tap="toggleTabCard"> |
| 3678 <div> |
| 3679 [[device]] |
| 3680 <span id="last-update-time">[[lastUpdateTime]]</span> |
| 3681 </div> |
| 3682 <div id="right-buttons"> |
| 3683 <button is="paper-icon-button-light" id="menu-button" class="icon-butt
on" on-tap="onMenuButtonTap_"> |
| 3684 <iron-icon icon="cr:more-vert"></iron-icon> |
| 3685 </button> |
| 3686 <button is="paper-icon-button-light" class="icon-button" title$="[[get
CollapseTitle_(cardOpen_)]]"> |
| 3687 <iron-icon icon="cr:expand-less" id="dropdown-indicator"> |
| 3688 </iron-icon> |
| 3689 </button> |
| 3690 </div> |
| 3691 </div> |
| 3692 |
| 3693 <iron-collapse opened="{{cardOpen_}}" id="collapse"> |
| 3694 <div id="tab-item-list"> |
| 3695 <template is="dom-repeat" items="[[tabs]]" as="tab" id="tab-list"> |
| 3696 <div id="item-container"> |
| 3697 <div id="icon" class="website-icon"></div> |
| 3698 <a href="[[tab.url]]" class="website-title" title="[[tab.title]]"
on-click="openTab_"> |
| 3699 <history-searched-label title="[[tab.title]]" search-term="[[sea
rchTerm]]"></history-searched-label> |
| 3700 </a> |
| 3701 </div> |
| 3702 <div id="window-separator" hidden$="[[!isWindowSeparatorIndex_(index
, separatorIndexes)]]"> |
| 3703 </div> |
| 3704 </template> |
| 3705 </div> |
| 3706 </iron-collapse> |
| 3707 </div> |
| 3708 </template> |
| 3709 </dom-module> |
| 3710 <dom-module id="history-synced-device-manager" assetpath="chrome://history/"> |
| 3711 <template> |
| 3712 <style include="shared-style"> |
| 3713 :host { |
| 3714 display: block; |
| 3715 overflow: auto; |
| 3716 } |
| 3717 |
| 3718 #illustration { |
| 3719 background: -webkit-image-set( |
| 3720 url("chrome://history/images/100/sign_in_promo.png") 1x, |
| 3721 url("chrome://history/images/200/sign_in_promo.png") 2x) |
| 3722 no-repeat center center; |
| 3723 height: 222px; |
| 3724 margin-top: 100px; |
| 3725 width: 594px; |
| 3726 } |
| 3727 |
| 3728 #no-synced-tabs { |
| 3729 height: 100%; |
| 3730 } |
| 3731 |
| 3732 #sign-in-guide { |
| 3733 align-items: center; |
| 3734 display: flex; |
| 3735 flex-direction: column; |
| 3736 justify-content: center; |
| 3737 overflow-x: hidden; |
| 3738 text-align: center; |
| 3739 } |
| 3740 |
| 3741 #sign-in-promo { |
| 3742 color: var(--primary-text-color); |
| 3743 font-size: 28px; |
| 3744 margin-top: 40px; |
| 3745 } |
| 3746 |
| 3747 #sign-in-promo-desc { |
| 3748 color: #848484; |
| 3749 font-size: 16px; |
| 3750 margin-top: 10px; |
| 3751 } |
| 3752 |
| 3753 #sign-in-button { |
| 3754 background-color: var(--google-blue-500); |
| 3755 color: white; |
| 3756 font-size: 14px; |
| 3757 margin-top: 24px; |
| 3758 } |
| 3759 |
| 3760 #synced-device-list { |
| 3761 padding-top: var(--first-card-padding-top); |
| 3762 } |
| 3763 </style> |
| 3764 <div id="synced-device-list" hidden="[[!syncedDevices_.length]]"> |
| 3765 <template is="dom-repeat" items="[[syncedDevices_]]" as="syncedDevice"> |
| 3766 <history-synced-device-card device="[[syncedDevice.device]]" last-update
-time="[[syncedDevice.lastUpdateTime]]" tabs="[[syncedDevice.tabs]]" separator-i
ndexes="[[syncedDevice.separatorIndexes]]" search-term="[[searchTerm]]" session-
tag="[[syncedDevice.tag]]"> |
| 3767 </history-synced-device-card> |
| 3768 </template> |
| 3769 </div> |
| 3770 <div id="no-synced-tabs" class="centered-message" hidden="[[!showNoSyncedMes
sage(signInState_, syncedDevices_.length, |
| 3771 guestSession_)]]"> |
| 3772 [[noSyncedTabsMessage(fetchingSyncedTabs_)]] |
| 3773 </div> |
| 3774 <div id="sign-in-guide" hidden="[[!showSignInGuide(signInState_, guestSessio
n_)]]"> |
| 3775 <div id="illustration"></div> |
| 3776 <div id="sign-in-promo">$i18n{signInPromo}</div> |
| 3777 <div id="sign-in-promo-desc">$i18n{signInPromoDesc}</div> |
| 3778 <paper-button id="sign-in-button" on-tap="onSignInTap_"> |
| 3779 $i18n{signInButton} |
| 3780 </paper-button> |
| 3781 </div> |
| 3782 |
| 3783 <cr-shared-menu id="menu"> |
| 3784 <paper-item class="menu-item" on-tap="onOpenAllTap_"> |
| 3785 $i18n{openAll} |
| 3786 </paper-item> |
| 3787 <paper-item class="menu-item" on-tap="onDeleteSessionTap_"> |
| 3788 $i18n{deleteSession} |
| 3789 </paper-item> |
| 3790 </cr-shared-menu> |
| 3791 </template> |
| 3792 </dom-module> |
| 3793 <dom-module id="history-side-bar" assetpath="chrome://history/"> |
| 3794 <template> |
| 3795 <style include="shared-style"> |
| 3796 :host { |
| 3797 display: block; |
| 3798 height: 100%; |
| 3799 padding-top: 5px; |
| 3800 width: var(--side-bar-width); |
| 3801 } |
| 3802 |
| 3803 div.separator { |
| 3804 background-color: rgba(0, 0, 0, 0.08); |
| 3805 height: 1px; |
| 3806 margin: 8px 0; |
| 3807 } |
| 3808 |
| 3809 #clear-browsing-data { |
| 3810 text-transform: uppercase; |
| 3811 } |
| 3812 |
| 3813 iron-selector { |
| 3814 -webkit-user-select: none; |
| 3815 background-color: transparent; |
| 3816 color: #5a5a5a; |
| 3817 } |
| 3818 |
| 3819 iron-selector > a { |
| 3820 @apply(--paper-font-subhead); |
| 3821 -webkit-padding-start: 24px; |
| 3822 align-items: center; |
| 3823 box-sizing: border-box; |
| 3824 color: inherit; |
| 3825 cursor: pointer; |
| 3826 display: flex; |
| 3827 font-size: 14px; |
| 3828 font-weight: 500; |
| 3829 min-height: 48px; |
| 3830 position: relative; |
| 3831 text-decoration: none; |
| 3832 } |
| 3833 |
| 3834 iron-selector > a.iron-selected { |
| 3835 color: var(--google-blue-500); |
| 3836 font-weight: 500; |
| 3837 } |
| 3838 |
| 3839 #footer { |
| 3840 bottom: 0; |
| 3841 color: var(--paper-grey-600); |
| 3842 position: absolute; |
| 3843 width: var(--side-bar-width); |
| 3844 } |
| 3845 |
| 3846 :host([drawer]) #footer { |
| 3847 /* This compensates the 120px by which app-drawer protrudes under |
| 3848 * the viewport. */ |
| 3849 bottom: 120px; |
| 3850 } |
| 3851 |
| 3852 #footer-text { |
| 3853 -webkit-padding-end: 16px; |
| 3854 -webkit-padding-start: 24px; |
| 3855 line-height: 20px; |
| 3856 margin: 24px 0; |
| 3857 } |
| 3858 |
| 3859 #footer a { |
| 3860 color: var(--google-blue-700); |
| 3861 text-decoration: none; |
| 3862 } |
| 3863 </style> |
| 3864 |
| 3865 <iron-selector id="menu" selected="{{selectedPage}}" selectable=".page-item"
attr-for-selected="path" fallback-selection="history" on-iron-activate="onSelec
torActivate_"> |
| 3866 <a href="/[[getQueryString_(route)]]" class="page-item" path="history"> |
| 3867 $i18n{historyMenuItem} |
| 3868 <paper-ripple></paper-ripple> |
| 3869 </a> |
| 3870 <a href="/syncedTabs[[getQueryString_(route)]]" class="page-item" path="sy
ncedTabs"> |
| 3871 $i18n{openTabsMenuItem} |
| 3872 <paper-ripple></paper-ripple> |
| 3873 </a> |
| 3874 <div class="separator"></div> |
| 3875 <a href="chrome://settings/clearBrowserData" on-tap="onClearBrowsingDataTa
p_" id="clear-browsing-data"> |
| 3876 $i18n{clearBrowsingData} |
| 3877 <paper-ripple></paper-ripple> |
| 3878 </a> |
| 3879 <div id="footer" hidden="[[!showFooter]]"> |
| 3880 <div class="separator"></div> |
| 3881 <div id="footer-text">$i18nRaw{sidebarFooter}</div> |
| 3882 </div> |
| 3883 </iron-selector> |
| 3884 </template> |
| 3885 </dom-module> |
| 3886 </div><dom-module id="history-app"> |
| 3887 <template> |
| 3888 <style no-process=""> |
| 3889 history-toolbar { |
| 3890 background: var(--md-toolbar-color); |
| 3891 } |
| 3892 </style> |
| 3893 <style include="shared-style"> |
| 3894 :host { |
| 3895 display: block; |
| 3896 height: 100%; |
| 3897 overflow: hidden; |
| 3898 } |
| 3899 |
| 3900 /* Sizing this with flex causes slow load performance, see |
| 3901 crbug.com/618153. */ |
| 3902 #main-container { |
| 3903 height: calc(100% - var(--toolbar-height)); |
| 3904 } |
| 3905 |
| 3906 :host([grouped_]) #main-container { |
| 3907 height: calc(100% - var(--toolbar-grouped-height)); |
| 3908 } |
| 3909 |
| 3910 #content-side-bar { |
| 3911 float: left; |
| 3912 } |
| 3913 |
| 3914 #content, |
| 3915 #content > * { |
| 3916 height: 100%; |
| 3917 } |
| 3918 |
| 3919 #drawer-header { |
| 3920 align-items: center; |
| 3921 border-bottom: 1px solid rgba(0, 0, 0, 0.08); |
| 3922 display: flex; |
| 3923 height: var(--toolbar-height); |
| 3924 margin-bottom: 5px; |
| 3925 } |
| 3926 |
| 3927 h1 { |
| 3928 -webkit-padding-start: 24px; |
| 3929 color: rgb(66, 66, 66); |
| 3930 font-size: 123%; |
| 3931 font-weight: 400; |
| 3932 } |
| 3933 </style> |
| 3934 <app-location route="{{route_}}"></app-location> |
| 3935 <app-route route="{{route_}}" pattern="/:page" data="{{routeData_}}" query-p
arams="{{queryParams_}}"> |
| 3936 </app-route> |
| 3937 <history-toolbar id="toolbar" spinner-active="[[shouldShowSpinner_(queryStat
e_.querying, |
| 3938 queryState_.incremental, |
| 3939 queryState_.searchTerm)]]" is-group
ed-mode="{{grouped_}}" grouped-range="{{queryState_.range}}" search-term="{{quer
yState_.searchTerm}}" query-start-time="[[queryResult_.info.queryStartTime]]" qu
ery-end-time="[[queryResult_.info.queryEndTime]]" has-drawer="[[hasDrawer_]]"> |
| 3940 </history-toolbar> |
| 3941 |
| 3942 <div id="main-container"> |
| 3943 <history-side-bar id="content-side-bar" selected-page="[[selectedPage_]]"
route="[[route_]]" show-footer="[[showSidebarFooter]]" hidden$="[[hasDrawer_]]"> |
| 3944 </history-side-bar> |
| 3945 <iron-pages id="content" attr-for-selected="path" fallback-selection="hist
ory" selected="[[getSelectedPage_(selectedPage_, items)]]" items="{{items}}"> |
| 3946 <history-list-container id="history" query-state="{{queryState_}}" query
-result="[[queryResult_]]" grouped="[[grouped_]]" path="history"> |
| 3947 </history-list-container> |
| 3948 <template is="dom-if" if="[[syncedTabsSelected_(selectedPage_)]]"> |
| 3949 <history-synced-device-manager id="synced-devices" session-list="[[que
ryResult_.sessionList]]" search-term="[[queryState_.searchTerm]]" path="syncedTa
bs"> |
| 3950 </history-synced-device-manager> |
| 3951 </template> |
| 3952 </iron-pages> |
| 3953 </div> |
| 3954 |
| 3955 <template is="dom-if" if="[[hasDrawer_]]"> |
| 3956 <app-drawer id="drawer" swipe-open="" align="start" tabindex="0"> |
| 3957 <div id="drawer-header"> |
| 3958 <h1>$i18n{title}</h1> |
| 3959 </div> |
| 3960 <history-side-bar id="drawer-side-bar" selected-page="[[selectedPage_]]"
route="[[route_]]" show-footer="[[showSidebarFooter]]" drawer=""> |
| 3961 </history-side-bar> |
| 3962 </app-drawer> |
| 3963 </template> |
| 3964 |
| 3965 <iron-media-query query="(max-width: 1023px)" query-matches="{{hasDrawer_}}"
> |
| 3966 </iron-media-query> |
| 3967 </template> |
| 3968 </dom-module> |
| 3969 <script src="app.crisper.js"></script></body></html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2224003003:
Vulcanize MD History to improve page-load performance (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master