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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: chrome/browser/resources/md_history/app.vulcanized.html

Issue 2278383002: [MD History] Use box-shadow to render card shadows everywhere. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@disable_test
Patch Set: add comments Created 4 years, 3 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « chrome/browser/resources/md_history/app.crisper.js ('k') | chrome/browser/resources/md_history/grouped_list.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <html><head><!-- 1 <html><head><!--
2 @license 2 @license
3 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. 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 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
(...skipping 2779 matching lines...) Expand 10 before | Expand all | Expand 10 after
2790 <svg> 2790 <svg>
2791 <defs> 2791 <defs>
2792 2792
2793 <g id="chevron-left"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12 z"></path></g> 2793 <g id="chevron-left"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12 z"></path></g>
2794 <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> 2794 <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>
2795 </defs> 2795 </defs>
2796 </svg> 2796 </svg>
2797 </iron-iconset-svg> 2797 </iron-iconset-svg>
2798 <style is="custom-style" css-build="shadow">html { 2798 <style is="custom-style" css-build="shadow">html {
2799 --card-border-color: rgba(0, 0, 0, 0.14); 2799 --card-border-color: rgba(0, 0, 0, 0.14);
2800 --card-box-shadow_-_box-shadow: 0 2px 2px rgba(0, 0, 0, .05),
2801 0 1px 4px rgba(0, 0, 0, .08),
2802 0 1px 1px rgba(0, 0, 0, .2);;
2803 --card-container-filter_-_filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .05))
2804 drop-shadow(0 1px 0px rgba(0, 0, 0, .08))
2805 drop-shadow(0 1px 1px rgba(0, 0, 0, .2));;
2806 --card-first-last-item-padding: 8px; 2800 --card-first-last-item-padding: 8px;
2807 --card-max-width: 960px; 2801 --card-max-width: 960px;
2808 --card-min-width: 550px; 2802 --card-min-width: 550px;
2809 --card-padding-between: 20px; 2803 --card-padding-between: 20px;
2810 --card-padding-side: 24px; 2804 --card-padding-side: 24px;
2811 --card-sizing_-_margin: 0 auto; --card-sizing_-_max-width: var(--card-max- width); --card-sizing_-_min-width: var(--card-min-width); --card-sizing_-_paddi ng: 0 var(--card-padding-side); --card-sizing_-_width: calc(100% - 2 * var(--c ard-padding-side));; 2805 --card-sizing_-_margin: 0 auto; --card-sizing_-_max-width: var(--card-max- width); --card-sizing_-_min-width: var(--card-min-width); --card-sizing_-_paddi ng: 0 var(--card-padding-side); --card-sizing_-_width: calc(100% - 2 * var(--c ard-padding-side));;
2812 --first-card-padding-top: 24px; 2806 --first-card-padding-top: 24px;
2813 --item-height: 44px; 2807 --item-height: 44px;
2814 --primary-text-color: #333; 2808 --primary-text-color: #333;
2815 --secondary-text-color: #757575; 2809 --secondary-text-color: #757575;
(...skipping 1093 matching lines...) Expand 10 before | Expand all | Expand 10 after
3909 height: 16px; 3903 height: 16px;
3910 width: 16px; 3904 width: 16px;
3911 } 3905 }
3912 3906
3913 #time-gap-separator { 3907 #time-gap-separator {
3914 -webkit-border-start: 1px solid #888; 3908 -webkit-border-start: 1px solid #888;
3915 -webkit-margin-start: 77px; 3909 -webkit-margin-start: 77px;
3916 height: 15px; 3910 height: 15px;
3917 } 3911 }
3918 3912
3919 #background { 3913 #background-clip {
3920 background: #fff; 3914 bottom: -0.4px;
3921 bottom: -1px; 3915 clip: rect(auto 999px auto -5px);
3922 left: 0; 3916 left: 0;
3923 position: absolute; 3917 position: absolute;
3924 right: 0; 3918 right: 0;
3919 top: 0;
3920 }
3921
3922 :host([is-card-end]) #background-clip {
3923 bottom: 0;
3924 clip: rect(auto 999px 500px -5px);
3925 }
3926
3927 #background {
3928 box-shadow: var(--shadow-elevation-2dp_-_box-shadow);
3929 background: #fff;
3930 bottom: 0;
3931 left: 0;
3932 position: absolute;
3933 right: 0;
3925 top: 0; 3934 top: 0;
3926 z-index: -1; 3935 z-index: -1;
3927 } 3936 }
3928 3937
3929 :host([embedded]) #background { 3938 :host([embedded]) #background {
3930 display: none; 3939 display: none;
3931 } 3940 }
3932 3941
3942 :host(:not([is-card-start])) #background {
3943 top: -5px;
3944 }
3945
3933 :host([is-card-start]) #background { 3946 :host([is-card-start]) #background {
3934 border-radius: 2px 2px 0 0; 3947 border-radius: 2px 2px 0 0;
3935 } 3948 }
3936 3949
3937 :host([is-card-end]) #background { 3950 :host([is-card-end]) #background {
3938 border-radius: 0 0 2px 2px; 3951 border-radius: 0 0 2px 2px;
3939 bottom: 0; 3952 }
3953
3954 :host([is-card-start][is-card-end]) #background {
3955 border-radius: 2px;
3940 } 3956 }
3941 3957
3942 </style> 3958 </style>
3943 3959
3944 <div id="sizing-container"> 3960 <div id="sizing-container">
3945 <div id="main-container"> 3961 <div id="main-container">
3946 <div id="background"></div> 3962 <div id="background-clip">
3963 <div id="background"></div>
3964 </div>
3947 <div id="date-accessed" class="card-title"> 3965 <div id="date-accessed" class="card-title">
3948 [[cardTitle_(numberOfItems, item.dateRelativeDay, searchTerm)]] 3966 [[cardTitle_(numberOfItems, item.dateRelativeDay, searchTerm)]]
3949 </div> 3967 </div>
3950 <div id="item-container"> 3968 <div id="item-container">
3951 <paper-checkbox id="checkbox" on-mousedown="onCheckboxMousedown_" on-c lick="onCheckboxSelected_" checked="{{selected}}" disabled="[[selectionNotAllowe d_()]]" aria-label$="[[getEntrySummary_(item)]]"> 3969 <paper-checkbox id="checkbox" on-mousedown="onCheckboxMousedown_" on-c lick="onCheckboxSelected_" checked="{{selected}}" disabled="[[selectionNotAllowe d_()]]" aria-label$="[[getEntrySummary_(item)]]">
3952 </paper-checkbox> 3970 </paper-checkbox>
3953 <span id="time-accessed">[[item.readableTimestamp]]</span> 3971 <span id="time-accessed">[[item.readableTimestamp]]</span>
3954 <div class="website-icon" id="icon"></div> 3972 <div class="website-icon" id="icon"></div>
3955 <div id="title-and-domain"> 3973 <div id="title-and-domain">
3956 <a href="[[item.url]]" id="title" class="website-title" title="[[cro pItemTitle_(item.title)]]" on-click="onLinkClick_" on-contextmenu="onLinkRightCl ick_"> 3974 <a href="[[item.url]]" id="title" class="website-title" title="[[cro pItemTitle_(item.title)]]" on-click="onLinkClick_" on-contextmenu="onLinkRightCl ick_">
(...skipping 120 matching lines...) Expand 10 before | Expand all | Expand 10 after
4077 .domain-count { 4095 .domain-count {
4078 color: rgb(151, 156, 160); 4096 color: rgb(151, 156, 160);
4079 padding-left: 10px; 4097 padding-left: 10px;
4080 } 4098 }
4081 4099
4082 .domain-heading-text { 4100 .domain-heading-text {
4083 display: flex; 4101 display: flex;
4084 } 4102 }
4085 4103
4086 .group-container { 4104 .group-container {
4087 box-shadow: var(--card-box-shadow_-_box-shadow); 4105 box-shadow: var(--shadow-elevation-2dp_-_box-shadow);
4088 background: #fff; 4106 background: #fff;
4089 border-radius: 2px; 4107 border-radius: 2px;
4090 margin-bottom: var(--card-padding-between); 4108 margin-bottom: var(--card-padding-between);
4091 max-width: var(--card-max-width); 4109 max-width: var(--card-max-width);
4092 min-width: var(--card-min-width); 4110 min-width: var(--card-min-width);
4093 width: 100%; 4111 width: 100%;
4094 } 4112 }
4095 4113
4096 .card-title { 4114 .card-title {
4097 margin-bottom: var(--card-first-last-item-padding); 4115 margin-bottom: var(--card-first-last-item-padding);
(...skipping 182 matching lines...) Expand 10 before | Expand all | Expand 10 after
4280 margin: 1px 10px; 4298 margin: 1px 10px;
4281 pointer-events: none; 4299 pointer-events: none;
4282 transform: scale(0.8); 4300 transform: scale(0.8);
4283 } 4301 }
4284 4302
4285 :host { 4303 :host {
4286 display: block; 4304 display: block;
4287 overflow: auto; 4305 overflow: auto;
4288 } 4306 }
4289 4307
4290 #infinite-list {
4291 filter: var(--card-container-filter_-_filter);
4292 }
4293
4294 history-item { 4308 history-item {
4295 --history-item-padding-side: var(--card-padding-side); 4309 --history-item-padding-side: var(--card-padding-side);
4296 } 4310 }
4297 4311
4298 </style> 4312 </style>
4299 <div id="no-results" class="centered-message" hidden$="[[hasResults(historyD ata_.length)]]"> 4313 <div id="no-results" class="centered-message" hidden$="[[hasResults(historyD ata_.length)]]">
4300 {{noResultsMessage(searchedTerm, querying)}} 4314 {{noResultsMessage(searchedTerm, querying)}}
4301 </div> 4315 </div>
4302 <iron-list items="{{historyData_}}" as="item" id="infinite-list" hidden$="[[ !hasResults(historyData_.length)]]"> 4316 <iron-list items="{{historyData_}}" as="item" id="infinite-list" hidden$="[[ !hasResults(historyData_.length)]]">
4303 <template> 4317 <template>
(...skipping 295 matching lines...) Expand 10 before | Expand all | Expand 10 after
4599 4613
4600 #menu-button { 4614 #menu-button {
4601 -webkit-margin-end: 8px; 4615 -webkit-margin-end: 8px;
4602 } 4616 }
4603 4617
4604 #collapse { 4618 #collapse {
4605 overflow: hidden; 4619 overflow: hidden;
4606 } 4620 }
4607 4621
4608 #history-item-container { 4622 #history-item-container {
4609 box-shadow: var(--card-box-shadow_-_box-shadow); 4623 box-shadow: var(--shadow-elevation-2dp_-_box-shadow);
4610 background: #fff; 4624 background: #fff;
4611 border-radius: 2px; 4625 border-radius: 2px;
4612 } 4626 }
4613 4627
4614 #item-container { 4628 #item-container {
4615 align-items: center; 4629 align-items: center;
4616 display: flex; 4630 display: flex;
4617 margin: 0 20px; 4631 margin: 0 20px;
4618 min-height: var(--item-height); 4632 min-height: var(--item-height);
4619 } 4633 }
(...skipping 599 matching lines...) Expand 10 before | Expand all | Expand 10 after
5219 <history-side-bar id="drawer-side-bar" selected-page="[[selectedPage_]]" route="[[route_]]" show-footer="[[showSidebarFooter]]" drawer=""> 5233 <history-side-bar id="drawer-side-bar" selected-page="[[selectedPage_]]" route="[[route_]]" show-footer="[[showSidebarFooter]]" drawer="">
5220 </history-side-bar> 5234 </history-side-bar>
5221 </app-drawer> 5235 </app-drawer>
5222 </template> 5236 </template>
5223 5237
5224 <iron-media-query query="(max-width: 1023px)" query-matches="{{hasDrawer_}}" > 5238 <iron-media-query query="(max-width: 1023px)" query-matches="{{hasDrawer_}}" >
5225 </iron-media-query> 5239 </iron-media-query>
5226 </template> 5240 </template>
5227 </dom-module> 5241 </dom-module>
5228 <script src="app.crisper.js"></script></body></html> 5242 <script src="app.crisper.js"></script></body></html>
OLDNEW
« no previous file with comments | « chrome/browser/resources/md_history/app.crisper.js ('k') | chrome/browser/resources/md_history/grouped_list.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698