| OLD | NEW |
| 1 <html><head><!-- | 1 <html><head><!-- |
| 2 @license | 2 @license |
| 3 Copyright (c) 2016 The Polymer Project Authors. All rights reserved. | 3 Copyright (c) 2016 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 | 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 | 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 | 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 | 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 | 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 9 --><!-- | 9 --><!-- |
| 10 @license | 10 @license |
| 11 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | 11 Copyright (c) 2015 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 | 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 | 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 | 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 | 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 | 16 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 17 --><meta charset="UTF-8"></head><body><div hidden="" by-vulcanize=""> | 17 --><meta charset="UTF-8"></head><body><div hidden="" by-vulcanize=""><dom-module
id="paper-material-shared-styles" assetpath="chrome://resources/polymer/v1_0/pa
per-material/" css-build="shadow"> |
| 18 | |
| 19 <dom-module id="iron-collapse" assetpath="chrome://resources/polymer/v1_0/iron-c
ollapse/" css-build="shadow"> | |
| 20 | |
| 21 <template> | |
| 22 | |
| 23 <style scope="iron-collapse">:host { | |
| 24 display: block; | |
| 25 transition-duration: var(--iron-collapse-transition-duration, 300ms); | |
| 26 overflow: visible; | |
| 27 } | |
| 28 | |
| 29 :host(.iron-collapse-closed) { | |
| 30 display: none; | |
| 31 } | |
| 32 | |
| 33 :host(:not(.iron-collapse-opened)) { | |
| 34 overflow: hidden; | |
| 35 } | |
| 36 | |
| 37 </style> | |
| 38 | |
| 39 <content></content> | |
| 40 | |
| 41 </template> | |
| 42 | |
| 43 </dom-module> | |
| 44 | |
| 45 <dom-module id="history-grouped-list" assetpath="chrome://history/" css-build="s
hadow"> | |
| 46 <template> | |
| 47 <style scope="history-grouped-list">[hidden] { | |
| 48 display: none !important; | |
| 49 } | |
| 50 | |
| 51 a { | |
| 52 color: var(--link-color); | |
| 53 } | |
| 54 | |
| 55 .card-title { | |
| 56 align-items: center; | |
| 57 border-bottom: 1px solid var(--card-border-color); | |
| 58 border-radius: 2px 2px 0 0; | |
| 59 display: flex; | |
| 60 font-size: 108%; | |
| 61 font-weight: 500; | |
| 62 height: 48px; | |
| 63 line-height: 48px; | |
| 64 overflow: hidden; | |
| 65 padding: 0 20px; | |
| 66 text-overflow: ellipsis; | |
| 67 white-space: nowrap; | |
| 68 } | |
| 69 | |
| 70 .centered-message { | |
| 71 align-items: center; | |
| 72 color: var(--md-loading-message-color); | |
| 73 display: flex; | |
| 74 flex: 1; | |
| 75 font-size: 108%; | |
| 76 font-weight: 500; | |
| 77 height: 100%; | |
| 78 justify-content: center; | |
| 79 } | |
| 80 | |
| 81 .website-icon { | |
| 82 -webkit-margin-end: 16px; | |
| 83 background-repeat: no-repeat; | |
| 84 background-size: 16px; | |
| 85 height: 16px; | |
| 86 width: 16px; | |
| 87 } | |
| 88 | |
| 89 .website-title { | |
| 90 color: var(--primary-text-color); | |
| 91 overflow: hidden; | |
| 92 text-decoration: none; | |
| 93 text-overflow: ellipsis; | |
| 94 white-space: nowrap; | |
| 95 } | |
| 96 | |
| 97 button.icon-button { | |
| 98 background: none; | |
| 99 border: none; | |
| 100 height: 36px; | |
| 101 outline: none; | |
| 102 width: 36px; | |
| 103 } | |
| 104 | |
| 105 button.icon-button iron-icon { | |
| 106 height: 20px; | |
| 107 width: 20px; | |
| 108 } | |
| 109 | |
| 110 button.more-vert-button { | |
| 111 height: 36px; | |
| 112 padding: 8px; | |
| 113 width: 36px; | |
| 114 } | |
| 115 | |
| 116 button.more-vert-button div { | |
| 117 border: 2px solid var(--secondary-text-color); | |
| 118 border-radius: 2px; | |
| 119 margin: 1px 8px; | |
| 120 pointer-events: none; | |
| 121 transform: scale(0.8); | |
| 122 } | |
| 123 | |
| 124 :host { | |
| 125 display: block; | |
| 126 overflow: auto; | |
| 127 position: relative; | |
| 128 } | |
| 129 | |
| 130 #main-container { | |
| 131 margin: var(--card-sizing_-_margin); max-width: var(--card-sizing_-_max-width)
; min-width: var(--card-sizing_-_min-width); padding: var(--card-sizing_-_paddin
g); width: var(--card-sizing_-_width); | |
| 132 align-items: center; | |
| 133 display: flex; | |
| 134 flex-direction: column; | |
| 135 padding-top: var(--first-card-padding-top); | |
| 136 } | |
| 137 | |
| 138 .domain-heading { | |
| 139 align-items: center; | |
| 140 display: flex; | |
| 141 height: var(--item-height); | |
| 142 padding: 0 20px; | |
| 143 } | |
| 144 | |
| 145 .domain-count { | |
| 146 color: var(--secondary-text-color); | |
| 147 padding-left: 10px; | |
| 148 } | |
| 149 | |
| 150 .domain-heading-text { | |
| 151 display: flex; | |
| 152 } | |
| 153 | |
| 154 .group-container { | |
| 155 box-shadow: var(--shadow-elevation-2dp_-_box-shadow); | |
| 156 background: #fff; | |
| 157 border-radius: 2px; | |
| 158 margin-bottom: var(--card-padding-between); | |
| 159 max-width: var(--card-max-width); | |
| 160 min-width: var(--card-min-width); | |
| 161 width: 100%; | |
| 162 } | |
| 163 | |
| 164 .card-title { | |
| 165 margin-bottom: var(--card-first-last-item-padding); | |
| 166 } | |
| 167 | |
| 168 .domain-heading-text { | |
| 169 flex: 1 1 0; | |
| 170 } | |
| 171 | |
| 172 .dropdown-indicator { | |
| 173 max-width: 16px; | |
| 174 } | |
| 175 | |
| 176 history-item { | |
| 177 padding-left: 20px; | |
| 178 } | |
| 179 | |
| 180 </style> | |
| 181 <div id="no-results" class="centered-message" hidden$="[[hasResults(groupedH
istoryData_.length)]]"> | |
| 182 [[noResultsMessage(searchedTerm, querying)]] | |
| 183 </div> | |
| 184 <div id="main-container" hidden$="[[!hasResults(groupedHistoryData_.length)]
]"> | |
| 185 <template is="dom-repeat" items="[[groupedHistoryData_]]" as="group" initi
al-count="1" index-as="groupIndex"> | |
| 186 <div class="group-container"> | |
| 187 <div class="card-title"> | |
| 188 [[group.title]] | |
| 189 </div> | |
| 190 | |
| 191 <template is="dom-repeat" items="[[group.domains]]" as="domain" initia
l-count="10" index-as="domainIndex"> | |
| 192 <div> | |
| 193 <div class="domain-heading" on-tap="toggleDomainExpanded_"> | |
| 194 <div class="domain-heading-text"> | |
| 195 <div class="website-icon" style="[[getWebsiteIconStyle_(domain
)]]"></div> | |
| 196 <span>[[domain.domain]]</span> | |
| 197 <span class="domain-count">[[domain.visits.length]]</span> | |
| 198 </div> | |
| 199 <iron-icon icon="[[getDropdownIcon_(domain.expanded)]]" class="d
ropdown-indicator"></iron-icon> | |
| 200 </div> | |
| 201 <iron-collapse opened="{{domain.expanded}}" id="collapse"> | |
| 202 <template is="dom-if" if="[[domain.rendered]]"> | |
| 203 <template is="dom-repeat" items="[[domain.visits]]" as="item"
initial-count="5" index-as="itemIndex"> | |
| 204 <history-item item="[[item]]" selected="{{item.selected}}" h
as-time-gap="[[needsTimeGap_( | |
| 205 groupIndex, domainIndex, itemIndex)]]" search-term="
[[searchedTerm]]" number-of-items="[[historyData.length]]" path="[[pathForItem_( | |
| 206 groupIndex, domainIndex, itemIndex)]]" embedded=""> | |
| 207 </history-item> | |
| 208 </template> | |
| 209 </template> | |
| 210 </iron-collapse> | |
| 211 </div> | |
| 212 </template> | |
| 213 </div> | |
| 214 </template> | |
| 215 </div> | |
| 216 </template> | |
| 217 </dom-module> | |
| 218 <dom-module id="paper-material-shared-styles" assetpath="chrome://resources/poly
mer/v1_0/paper-material/" css-build="shadow"> | |
| 219 <template> | 18 <template> |
| 220 <style scope="paper-material-shared-styles">:host { | 19 <style scope="paper-material-shared-styles">:host { |
| 221 display: block; | 20 display: block; |
| 222 position: relative; | 21 position: relative; |
| 223 } | 22 } |
| 224 | 23 |
| 225 :host([elevation="1"]) { | 24 :host([elevation="1"]) { |
| 226 box-shadow: var(--shadow-elevation-2dp_-_box-shadow); | 25 box-shadow: var(--shadow-elevation-2dp_-_box-shadow); |
| 227 } | 26 } |
| 228 | 27 |
| (...skipping 145 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 374 :host ::content .dropdown-item:focus { | 173 :host ::content .dropdown-item:focus { |
| 375 background-color: var(--paper-grey-300); | 174 background-color: var(--paper-grey-300); |
| 376 outline: none; | 175 outline: none; |
| 377 } | 176 } |
| 378 | 177 |
| 379 </style> | 178 </style> |
| 380 <content select=".dropdown-item,hr"></content> | 179 <content select=".dropdown-item,hr"></content> |
| 381 </template> | 180 </template> |
| 382 </dom-module> | 181 </dom-module> |
| 383 | 182 |
| 183 |
| 184 <dom-module id="iron-collapse" assetpath="chrome://resources/polymer/v1_0/iron-c
ollapse/" css-build="shadow"> |
| 185 |
| 186 <template> |
| 187 |
| 188 <style scope="iron-collapse">:host { |
| 189 display: block; |
| 190 transition-duration: var(--iron-collapse-transition-duration, 300ms); |
| 191 overflow: visible; |
| 192 } |
| 193 |
| 194 :host(.iron-collapse-closed) { |
| 195 display: none; |
| 196 } |
| 197 |
| 198 :host(:not(.iron-collapse-opened)) { |
| 199 overflow: hidden; |
| 200 } |
| 201 |
| 202 </style> |
| 203 |
| 204 <content></content> |
| 205 |
| 206 </template> |
| 207 |
| 208 </dom-module> |
| 209 |
| 384 <dom-module id="paper-icon-button-light" assetpath="chrome://resources/polymer/v
1_0/paper-icon-button/" css-build="shadow"> | 210 <dom-module id="paper-icon-button-light" assetpath="chrome://resources/polymer/v
1_0/paper-icon-button/" css-build="shadow"> |
| 385 <template strip-whitespace=""> | 211 <template strip-whitespace=""> |
| 386 <style scope="paper-icon-button-light">:host { | 212 <style scope="paper-icon-button-light">:host { |
| 387 vertical-align: middle; | 213 vertical-align: middle; |
| 388 color: inherit; | 214 color: inherit; |
| 389 outline: none; | 215 outline: none; |
| 390 width: 24px; | 216 width: 24px; |
| 391 height: 24px; | 217 height: 24px; |
| 392 background: none; | 218 background: none; |
| 393 margin: 0; | 219 margin: 0; |
| (...skipping 462 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 856 </dialog> | 682 </dialog> |
| 857 </template> | 683 </template> |
| 858 </template> | 684 </template> |
| 859 </dom-module> | 685 </dom-module> |
| 860 <dom-module id="cr-dialog" assetpath="chrome://resources/cr_elements/cr_dialog/"
css-build="shadow"> | 686 <dom-module id="cr-dialog" assetpath="chrome://resources/cr_elements/cr_dialog/"
css-build="shadow"> |
| 861 <template> | 687 <template> |
| 862 <style scope="cr-dialog">:host { | 688 <style scope="cr-dialog">:host { |
| 863 border: 0; | 689 border: 0; |
| 864 border-radius: 2px; | 690 border-radius: 2px; |
| 865 bottom: 0; | 691 bottom: 0; |
| 692 box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.12), |
| 693 0px 16px 16px rgba(0, 0, 0, 0.24); |
| 866 color: inherit; | 694 color: inherit; |
| 867 padding: 0; | 695 padding: 0; |
| 868 top: 0; | 696 top: 0; |
| 869 width: 512px; | 697 width: 512px; |
| 870 } | 698 } |
| 871 | 699 |
| 872 :host::backdrop { | 700 :host::backdrop { |
| 873 background-color: rgba(0, 0, 0, 0.6); | 701 background-color: rgba(0, 0, 0, 0.6); |
| 874 bottom: 0; | 702 bottom: 0; |
| 875 left: 0; | 703 left: 0; |
| 876 position: fixed; | 704 position: fixed; |
| 877 right: 0; | 705 right: 0; |
| 878 top: 0; | 706 top: 0; |
| 879 } | 707 } |
| 880 | 708 |
| 881 .title-container { | 709 .title-container { |
| 882 align-items: center; | 710 align-items: center; |
| 883 | 711 border-bottom: 1px solid var(--divider-color); |
| 884 border-bottom: 1px solid rgba(0, 0, 0, 0.14); | |
| 885 display: flex; | 712 display: flex; |
| 886 min-height: 52px; | 713 min-height: 52px; |
| 887 } | 714 } |
| 888 | 715 |
| 889 :host ::content .title { | 716 :host ::content .title { |
| 890 font-size: 123.07%; | 717 font-size: 123.07%; |
| 891 } | 718 } |
| 892 | 719 |
| 893 #close { | 720 #close { |
| 894 --paper-icon-button_-_height: 40px; --paper-icon-button_-_width: 40px;; | 721 --paper-icon-button_-_height: 40px; --paper-icon-button_-_width: 40px;; |
| (...skipping 28 matching lines...) Expand all Loading... |
| 923 margin-bottom: 12px; | 750 margin-bottom: 12px; |
| 924 margin-top: 12px; | 751 margin-top: 12px; |
| 925 } | 752 } |
| 926 | 753 |
| 927 :host ::content .button-container .cancel-button { | 754 :host ::content .button-container .cancel-button { |
| 928 -webkit-margin-end: 8px; | 755 -webkit-margin-end: 8px; |
| 929 color: var(--paper-grey-600); | 756 color: var(--paper-grey-600); |
| 930 } | 757 } |
| 931 | 758 |
| 932 :host ::content .footer { | 759 :host ::content .footer { |
| 933 background-color: var(--paper-grey-200); | 760 border-bottom-left-radius: inherit; |
| 934 border-bottom-left-radius: inherit; | |
| 935 border-bottom-right-radius: inherit; | 761 border-bottom-right-radius: inherit; |
| 936 margin: 0; | 762 margin: 0; |
| 937 padding: 12px 20px; | 763 padding: 12px 20px; |
| 938 } | 764 } |
| 939 | 765 |
| 766 :host ::content .border-top-divider { |
| 767 border-top: 1px solid var(--divider-color); |
| 768 } |
| 769 |
| 940 </style> | 770 </style> |
| 941 <div class="title-container"> | 771 <div class="title-container"> |
| 942 <content select=".title"></content> | 772 <content select=".title"></content> |
| 943 <paper-icon-button icon="cr:clear" on-tap="cancel" id="close" aria-label$=
"[[closeText]]"> | 773 <paper-icon-button icon="cr:clear" on-tap="cancel" id="close" aria-label$=
"[[closeText]]"> |
| 944 </paper-icon-button> | 774 </paper-icon-button> |
| 945 </div> | 775 </div> |
| 946 <div class="body-container"> | 776 <div class="body-container"> |
| 947 <content select=".body"></content> | 777 <content select=".body"></content> |
| 948 </div> | 778 </div> |
| 949 <content select=".button-container"></content> | 779 <content select=".button-container"></content> |
| (...skipping 65 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 1015 :host ::content .drawer-content { | 845 :host ::content .drawer-content { |
| 1016 height: calc(100% - 56px); | 846 height: calc(100% - 56px); |
| 1017 overflow: auto; | 847 overflow: auto; |
| 1018 } | 848 } |
| 1019 </style> | 849 </style> |
| 1020 <div id="container" on-tap="onContainerTap_"> | 850 <div id="container" on-tap="onContainerTap_"> |
| 1021 <content></content> | 851 <content></content> |
| 1022 </div> | 852 </div> |
| 1023 </template> | 853 </template> |
| 1024 </dom-module> | 854 </dom-module> |
| 1025 <dom-module id="paper-tab" assetpath="chrome://resources/polymer/v1_0/paper-tabs
/" css-build="shadow"> | |
| 1026 <template> | |
| 1027 <style scope="paper-tab">:host { | |
| 1028 display: var(--layout-inline_-_display); | |
| 1029 -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-ite
ms: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center
_-_align-items); | |
| 1030 -ms-flex-pack: var(--layout-center-justified_-_-ms-flex-pack); -webkit-j
ustify-content: var(--layout-center-justified_-_-webkit-justify-content); justif
y-content: var(--layout-center-justified_-_justify-content); | |
| 1031 -ms-flex: var(--layout-flex-auto_-_-ms-flex); -webkit-flex: var(--layout
-flex-auto_-_-webkit-flex); flex: var(--layout-flex-auto_-_flex); | |
| 1032 | |
| 1033 position: relative; | |
| 1034 padding: 0 12px; | |
| 1035 overflow: hidden; | |
| 1036 cursor: pointer; | |
| 1037 vertical-align: middle; | |
| 1038 | |
| 1039 font-family: var(--paper-font-common-base_-_font-family); -webkit-font-s
moothing: var(--paper-font-common-base_-_-webkit-font-smoothing); | |
| 1040 ; | |
| 1041 } | |
| 1042 | |
| 1043 :host(:focus) { | |
| 1044 outline: none; | |
| 1045 } | |
| 1046 | |
| 1047 :host([link]) { | |
| 1048 padding: 0; | |
| 1049 } | |
| 1050 | |
| 1051 .tab-content { | |
| 1052 height: 100%; | |
| 1053 transform: translateZ(0); | |
| 1054 -webkit-transform: translateZ(0); | |
| 1055 transition: opacity 0.1s cubic-bezier(0.4, 0.0, 1, 1); | |
| 1056 display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--l
ayout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-hor
izontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_fle
x-direction); | |
| 1057 -ms-flex-align: var(--layout-center-center_-_-ms-flex-align); -webkit-al
ign-items: var(--layout-center-center_-_-webkit-align-items); align-items: var(-
-layout-center-center_-_align-items); -ms-flex-pack: var(--layout-center-center_
-_-ms-flex-pack); -webkit-justify-content: var(--layout-center-center_-_-webkit-
justify-content); justify-content: var(--layout-center-center_-_justify-content)
; | |
| 1058 -ms-flex: var(--layout-flex-auto_-_-ms-flex); -webkit-flex: var(--layout
-flex-auto_-_-webkit-flex); flex: var(--layout-flex-auto_-_flex); | |
| 1059 ; | |
| 1060 } | |
| 1061 | |
| 1062 :host(:not(.iron-selected)) > .tab-content { | |
| 1063 opacity: 0.8; | |
| 1064 | |
| 1065 ; | |
| 1066 } | |
| 1067 | |
| 1068 :host(:focus) .tab-content { | |
| 1069 opacity: 1; | |
| 1070 font-weight: 700; | |
| 1071 } | |
| 1072 | |
| 1073 paper-ripple { | |
| 1074 color: var(--paper-tab-ink,var(--paper-yellow-a100)); | |
| 1075 } | |
| 1076 | |
| 1077 .tab-content > ::content > a { | |
| 1078 -ms-flex: var(--layout-flex-auto_-_-ms-flex); -webkit-flex: var(--layout-flex-
auto_-_-webkit-flex); flex: var(--layout-flex-auto_-_flex); | |
| 1079 | |
| 1080 height: 100%; | |
| 1081 } | |
| 1082 | |
| 1083 </style> | |
| 1084 | |
| 1085 <div class="tab-content"> | |
| 1086 <content></content> | |
| 1087 </div> | |
| 1088 </template> | |
| 1089 | |
| 1090 </dom-module> | |
| 1091 <iron-iconset-svg name="paper-tabs" size="24"> | |
| 1092 <svg><defs> | |
| 1093 <g id="chevron-left"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"></p
ath></g> | |
| 1094 <g id="chevron-right"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"><
/path></g> | |
| 1095 </defs></svg> | |
| 1096 </iron-iconset-svg> | |
| 1097 <dom-module id="paper-tabs" assetpath="chrome://resources/polymer/v1_0/paper-tab
s/" css-build="shadow"> | |
| 1098 <template> | |
| 1099 <style scope="paper-tabs">:host { | |
| 1100 display: var(--layout_-_display); | |
| 1101 -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-ite
ms: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center
_-_align-items); | |
| 1102 | |
| 1103 height: 48px; | |
| 1104 font-size: 14px; | |
| 1105 font-weight: 500; | |
| 1106 overflow: hidden; | |
| 1107 -moz-user-select: none; | |
| 1108 -ms-user-select: none; | |
| 1109 -webkit-user-select: none; | |
| 1110 user-select: none; | |
| 1111 | |
| 1112 | |
| 1113 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); | |
| 1114 -webkit-tap-highlight-color: transparent; | |
| 1115 | |
| 1116 font-size: var(--paper-tabs_-_font-size, 14px); | |
| 1117 } | |
| 1118 | |
| 1119 :host-context([dir=rtl]) { | |
| 1120 display: var(--layout-horizontal-reverse_-_display); -ms-flex-direction: var(-
-layout-horizontal-reverse_-_-ms-flex-direction); -webkit-flex-direction: var(--
layout-horizontal-reverse_-_-webkit-flex-direction); flex-direction: var(--layou
t-horizontal-reverse_-_flex-direction); | |
| 1121 } | |
| 1122 | |
| 1123 #tabsContainer { | |
| 1124 position: relative; | |
| 1125 height: 100%; | |
| 1126 white-space: nowrap; | |
| 1127 overflow: hidden; | |
| 1128 -ms-flex: var(--layout-flex-auto_-_-ms-flex); -webkit-flex: var(--layout
-flex-auto_-_-webkit-flex); flex: var(--layout-flex-auto_-_flex); | |
| 1129 } | |
| 1130 | |
| 1131 #tabsContent { | |
| 1132 height: 100%; | |
| 1133 -moz-flex-basis: auto; | |
| 1134 -ms-flex-basis: auto; | |
| 1135 flex-basis: auto; | |
| 1136 } | |
| 1137 | |
| 1138 #tabsContent.scrollable { | |
| 1139 position: absolute; | |
| 1140 white-space: nowrap; | |
| 1141 } | |
| 1142 | |
| 1143 #tabsContent:not(.scrollable), #tabsContent.scrollable.fit-container { | |
| 1144 display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-
horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizonta
l_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-dire
ction); | |
| 1145 } | |
| 1146 | |
| 1147 #tabsContent.scrollable.fit-container { | |
| 1148 min-width: 100%; | |
| 1149 } | |
| 1150 | |
| 1151 #tabsContent.scrollable.fit-container > ::content > * { | |
| 1152 -ms-flex: 1 0 auto; | |
| 1153 -webkit-flex: 1 0 auto; | |
| 1154 flex: 1 0 auto; | |
| 1155 } | |
| 1156 | |
| 1157 .hidden { | |
| 1158 display: none; | |
| 1159 } | |
| 1160 | |
| 1161 .not-visible { | |
| 1162 opacity: 0; | |
| 1163 cursor: default; | |
| 1164 } | |
| 1165 | |
| 1166 paper-icon-button { | |
| 1167 width: 48px; | |
| 1168 height: 48px; | |
| 1169 padding: 12px; | |
| 1170 margin: 0 4px; | |
| 1171 } | |
| 1172 | |
| 1173 #selectionBar { | |
| 1174 position: absolute; | |
| 1175 height: 2px; | |
| 1176 bottom: 0; | |
| 1177 left: 0; | |
| 1178 right: 0; | |
| 1179 background-color: var(--paper-tabs-selection-bar-color,var(--paper-yello
w-a100)); | |
| 1180 -webkit-transform: scale(0); | |
| 1181 transform: scale(0); | |
| 1182 -webkit-transform-origin: left center; | |
| 1183 transform-origin: left center; | |
| 1184 transition: -webkit-transform; | |
| 1185 transition: transform; | |
| 1186 | |
| 1187 ; | |
| 1188 } | |
| 1189 | |
| 1190 #selectionBar.align-bottom { | |
| 1191 top: 0; | |
| 1192 bottom: auto; | |
| 1193 } | |
| 1194 | |
| 1195 #selectionBar.expand { | |
| 1196 transition-duration: 0.15s; | |
| 1197 transition-timing-function: cubic-bezier(0.4, 0.0, 1, 1); | |
| 1198 } | |
| 1199 | |
| 1200 #selectionBar.contract { | |
| 1201 transition-duration: 0.18s; | |
| 1202 transition-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1); | |
| 1203 } | |
| 1204 | |
| 1205 #tabsContent > ::content > *:not(#selectionBar) { | |
| 1206 height: 100%; | |
| 1207 } | |
| 1208 | |
| 1209 </style> | |
| 1210 | |
| 1211 <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> | |
| 1212 | |
| 1213 <div id="tabsContainer" on-track="_scroll" on-down="_down"> | |
| 1214 <div id="tabsContent" class$="[[_computeTabsContentClass(scrollable, fitCo
ntainer)]]"> | |
| 1215 <div id="selectionBar" class$="[[_computeSelectionBarClass(noBar, alignB
ottom)]]" on-transitionend="_onBarTransitionEnd"></div> | |
| 1216 <content select="*"></content> | |
| 1217 </div> | |
| 1218 </div> | |
| 1219 | |
| 1220 <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> | |
| 1221 | |
| 1222 </template> | |
| 1223 | |
| 1224 </dom-module> | |
| 1225 </div><script src="lazy_load.crisper.js"></script></body></html> | 855 </div><script src="lazy_load.crisper.js"></script></body></html> |
| OLD | NEW |