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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: chrome/browser/resources/md_downloads/vulcanized.html

Issue 2562393003: MD WebUI: Simplify cr-toolbar CSS (Closed)
Patch Set: Fix padding, add explanatory comment, revulcanize Created 4 years 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_downloads/toolbar.html ('k') | chrome/browser/resources/md_history/app.vulcanized.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 <!DOCTYPE html><html dir="$i18n{textdirection}" lang="$i18n{language}"><head><!- - 1 <!DOCTYPE html><html dir="$i18n{textdirection}" lang="$i18n{language}"><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 2946 matching lines...) Expand 10 before | Expand all | Expand 10 after
2957 #icon { 2957 #icon {
2958 --paper-icon-button-ink-color: white; 2958 --paper-icon-button-ink-color: white;
2959 transition: margin 150ms, opacity 200ms; 2959 transition: margin 150ms, opacity 200ms;
2960 } 2960 }
2961 2961
2962 #prompt { 2962 #prompt {
2963 opacity: 0; 2963 opacity: 0;
2964 } 2964 }
2965 2965
2966 paper-spinner-lite { 2966 paper-spinner-lite {
2967 --paper-spinner-color: white; 2967 ;
2968 height: 20px; 2968 --paper-spinner-color: white;
2969 margin: 0 6px; 2969 margin: 0 6px;
2970 opacity: 0; 2970 opacity: 0;
2971 padding: 6px; 2971 padding: 6px;
2972 position: absolute; 2972 position: absolute;
2973 width: 20px;
2974 } 2973 }
2975 2974
2976 paper-spinner-lite[active] { 2975 paper-spinner-lite[active] {
2977 opacity: 1; 2976 opacity: 1;
2978 } 2977 }
2979 2978
2980 #prompt, paper-spinner-lite { 2979 #prompt, paper-spinner-lite {
2981 transition: opacity 200ms; 2980 transition: opacity 200ms;
2982 } 2981 }
2983 2982
(...skipping 88 matching lines...) Expand 10 before | Expand all | Expand 10 after
3072 --cr-toolbar-field-width: 580px; 3071 --cr-toolbar-field-width: 580px;
3073 --cr-toolbar-height: 56px; 3072 --cr-toolbar-height: 56px;
3074 align-items: center; 3073 align-items: center;
3075 color: #fff; 3074 color: #fff;
3076 display: flex; 3075 display: flex;
3077 height: var(--cr-toolbar-height); 3076 height: var(--cr-toolbar-height);
3078 } 3077 }
3079 3078
3080 h1 { 3079 h1 {
3081 -webkit-margin-start: 6px; 3080 -webkit-margin-start: 6px;
3082 -webkit-padding-end: 2px; 3081 -webkit-padding-end: 12px;
3083 flex: 1; 3082 flex: 1;
3084 font-size: 123%; 3083 font-size: 123%;
3085 font-weight: 400; 3084 font-weight: 400;
3086 text-overflow: ellipsis; 3085 text-overflow: ellipsis;
3087 overflow: hidden; 3086 overflow: hidden;
3088 white-space: nowrap; 3087 white-space: nowrap;
3089 } 3088 }
3090 3089
3091 #leftContent { 3090 #leftContent {
3092 -webkit-padding-start: 18px; 3091 -webkit-margin-start: 12px;
3093 align-items: center;
3094 box-sizing: border-box;
3095 display: flex;
3096 position: absolute;
3097 transition: opacity 100ms; 3092 transition: opacity 100ms;
3098 } 3093 }
3099 3094
3095 #leftSpacer {
3096 -webkit-margin-start: 6px;
3097 align-items: center;
3098 display: flex;
3099 }
3100
3100 #menuButton { 3101 #menuButton {
3101 height: 32px; 3102 height: 32px;
3102 margin-bottom: 6px; 3103 margin-bottom: 6px;
3103 margin-top: 6px; 3104 margin-top: 6px;
3104 min-width: 32px; 3105 min-width: 32px;
3105 padding: 6px; 3106 padding: 6px;
3106 width: 32px; 3107 width: 32px;
3107 } 3108 }
3108 3109
3109 #centeredContent { 3110 #centeredContent {
3110 display: flex; 3111 display: flex;
3111 flex: 1 1 0; 3112 flex: 1 1 0;
3112 justify-content: center;
3113 } 3113 }
3114 3114
3115 :host([narrow_]) #centeredContent { 3115 #rightContent {
3116 -webkit-padding-end: var(--cr-toolbar-field-end-padding, 12px); 3116 -webkit-margin-end: 12px;
3117 }
3118
3119 :host(:not([narrow_])) h1 {
3120 -webkit-margin-start: var(--cr-toolbar-header-wide_-_-webkit-margin-start); -w ebkit-margin-end: var(--cr-toolbar-header-wide_-_-webkit-margin-end);
3121 }
3122
3123 :host(:not([narrow_])) #leftContent {
3124 max-width: calc((100% - var(--cr-toolbar-field-width)) / 2);
3125 -webkit-padding-start: var(--cr-toolbar-left-content-wide_-_-webkit-padd ing-start); flex: var(--cr-toolbar-left-content-wide_-_flex); max-width: var(--c r-toolbar-left-content-wide_-_max-width, calc((100% - var(--cr-toolbar-field-wid th)) / 2)); position: var(--cr-toolbar-left-content-wide_-_position);
3126 }
3127
3128 :host(:not([narrow_])) #centeredContent {
3129 -webkit-margin-start: var(--cr-toolbar-field-margin, 0);
3130 }
3131
3132 :host(:not([narrow_])) #rightContent {
3133 flex: var(--cr-toolbar-right-content-wide_-_flex); position: var(--cr-toolbar- right-content-wide_-_position);
3134 } 3117 }
3135 3118
3136 :host([narrow_]) #centeredContent { 3119 :host([narrow_]) #centeredContent {
3137 justify-content: flex-end; 3120 justify-content: flex-end;
3138 } 3121 }
3139 3122
3140 :host([narrow_][showing-search_]) #leftContent { 3123 :host([narrow_][showing-search_]) #leftContent {
3141 opacity: 0; 3124 position: absolute;
3125 opacity: 0;
3126 }
3127
3128 :host(:not([narrow_])) #leftContent {
3129 flex: 1 1 var(--cr-toolbar-field-margin, 0);
3130 }
3131
3132 :host(:not([narrow_])) #rightContent {
3133 flex: 1 1 0;
3134 text-align: end;
3142 } 3135 }
3143 3136
3144 #menuPromo { 3137 #menuPromo {
3145 -webkit-padding-end: 12px; 3138 -webkit-padding-end: 12px;
3146 -webkit-padding-start: 8px; 3139 -webkit-padding-start: 8px;
3147 align-items: center; 3140 align-items: center;
3148 background: #616161; 3141 background: #616161;
3149 border-radius: 2px; 3142 border-radius: 2px;
3150 color: white; 3143 color: white;
3151 display: flex; 3144 display: flex;
3152 font-size: 92.3%; 3145 font-size: 92.3%;
3153 font-weight: 500; 3146 font-weight: 500;
3154 opacity: 0; 3147 opacity: 0;
3155 padding-bottom: 6px; 3148 padding-bottom: 6px;
3156 padding-top: 6px; 3149 padding-top: 6px;
3157 position: absolute; 3150 position: absolute;
3158 top: var(--cr-toolbar-height); 3151 top: var(--cr-toolbar-height);
3159 white-space: nowrap; 3152 white-space: nowrap;
3160 z-index: 2; 3153 z-index: 2;
3161 } 3154 }
3162 3155
3163 #menuPromo::before { 3156 #menuPromo::before {
3164 background: inherit; 3157 background: inherit;
3165 3158
3166 clip-path: polygon(0 105%, 100% 105%, 50% 0); 3159 clip-path: polygon(0 105%, 100% 105%, 50% 0);
3167 content: ''; 3160 content: '';
3168 display: block; 3161 display: block;
3169 left: 10px; 3162 left: 10px;
3170 height: 6px; 3163 height: 6px;
3171 position: absolute; 3164 position: absolute;
3172 top: -6px; 3165 top: -6px;
3173 width: 12px; 3166 width: 12px;
3174 } 3167 }
3175 3168
3176 :host-context([dir=rtl]) #menuPromo::before { 3169 :host-context([dir=rtl]) #menuPromo::before {
3177 left: auto; 3170 left: auto;
3178 right: 10px; 3171 right: 10px;
3179 } 3172 }
3180 3173
3181 #closePromo { 3174 #closePromo {
3182 -webkit-appearance: none; 3175 -webkit-appearance: none;
3183 -webkit-margin-start: 12px; 3176 -webkit-margin-start: 12px;
3184 background: none; 3177 background: none;
3185 border: none; 3178 border: none;
3186 color: inherit; 3179 color: inherit;
3187 font-size: 20px; 3180 font-size: 20px;
3188 line-height: 20px; 3181 line-height: 20px;
3189 padding: 0; 3182 padding: 0;
3190 width: 20px; 3183 width: 20px;
3191 } 3184 }
3192 3185
3193 </style> 3186 </style>
3194 <div id="leftContent"> 3187 <div id="leftContent">
3195 3188 <div id="leftSpacer">
3196 <template is="dom-if" if="[[showMenu]]" restamp=""> 3189
3197 <paper-icon-button id="menuButton" icon="cr:menu" on-tap="onMenuTap_" ti tle="[[titleIfNotShowMenuPromo_(menuLabel, showMenuPromo)]]" aria-label$="[[menu Label]]"> 3190 <template is="dom-if" if="[[showMenu]]" restamp="">
3198 </paper-icon-button> 3191 <paper-icon-button id="menuButton" icon="cr:menu" on-tap="onMenuTap_" title="[[titleIfNotShowMenuPromo_(menuLabel, showMenuPromo)]]" aria-label$="[[me nuLabel]]">
3199 <template is="dom-if" if="[[showMenuPromo]]"> 3192 </paper-icon-button>
3200 <div id="menuPromo" role="tooltip"> 3193 <template is="dom-if" if="[[showMenuPromo]]">
3201 [[menuPromo]] 3194 <div id="menuPromo" role="tooltip">
3202 <button id="closePromo" on-tap="onClosePromoTap_" aria-label$="[[clo seMenuPromo]]">✕</button> 3195 [[menuPromo]]
3203 3196 <button id="closePromo" on-tap="onClosePromoTap_" aria-label$="[[c loseMenuPromo]]">✕</button>
3204 </div></template> 3197
3205 </template> 3198 </div></template>
3206 <h1>[[pageName]]</h1> 3199 </template>
3200 <h1>[[pageName]]</h1>
3201 </div>
3207 </div> 3202 </div>
3208 3203
3209 <div id="centeredContent"> 3204 <div id="centeredContent">
3210 <cr-toolbar-search-field id="search" narrow="[[narrow_]]" label="[[searchP rompt]]" clear-label="[[clearLabel]]" spinner-active="[[spinnerActive]]" showing -search="{{showingSearch_}}"> 3205 <cr-toolbar-search-field id="search" narrow="[[narrow_]]" label="[[searchP rompt]]" clear-label="[[clearLabel]]" spinner-active="[[spinnerActive]]" showing -search="{{showingSearch_}}">
3211 </cr-toolbar-search-field> 3206 </cr-toolbar-search-field>
3212 <iron-media-query query="(max-width: 900px)" query-matches="{{narrow_}}"> 3207 <iron-media-query query="(max-width: 900px)" query-matches="{{narrow_}}">
3213 </iron-media-query> 3208 </iron-media-query>
3214 </div> 3209 </div>
3215 3210
3216 <div id="rightContent"> 3211 <div id="rightContent">
3217 <content select=".more-actions"></content> 3212 <content select=".more-actions"></content>
3218 </div> 3213 </div>
3219 </template> 3214 </template>
3220 </dom-module> 3215 </dom-module>
3221 <dom-module id="downloads-toolbar" assetpath="chrome://downloads/" css-build="sh adow"> 3216 <dom-module id="downloads-toolbar" assetpath="chrome://downloads/" css-build="sh adow">
3222 <template> 3217 <template>
3223 <style scope="downloads-toolbar">:host { 3218 <style scope="downloads-toolbar">:host {
3224 align-items: center; 3219 align-items: center;
3225 background: var(--md-toolbar-color); 3220 background: var(--md-toolbar-color);
3226 color: white; 3221 color: white;
3227 display: flex; 3222 display: flex;
3228 min-height: 56px; 3223 min-height: 56px;
3229 } 3224 }
3230 3225
3231 [hidden] { 3226 [hidden] {
3232 display: none !important; 3227 display: none !important;
3233 } 3228 }
3234 3229
3235 #toolbar { 3230 #toolbar {
3236 --cr-toolbar-field-end-padding: 0; 3231 --cr-toolbar-field-width: var(--downloads-card-width);
3237 --cr-toolbar-field-width: var(--downloads-card-width);
3238 --cr-toolbar-header-wide_-_-webkit-margin-start: 24px; --cr-toolbar-hea der-wide_-_-webkit-margin-end: 16px;;
3239 --cr-toolbar-left-content-wide_-_-webkit-padding-start: 0; --cr-toolbar -left-content-wide_-_flex: 1 0 1px; --cr-toolbar-left-content-wide_-_max-width: none; --cr-toolbar-left-content-wide_-_position: static;;
3240 --cr-toolbar-right-content-wide_-_flex: 1 0 1px; --cr-toolbar-right-con tent-wide_-_position: static;;
3241 align-items: center;
3242 flex: 1; 3232 flex: 1;
3243 } 3233 }
3244 3234
3245 paper-icon-button { 3235 paper-icon-button {
3246 --iron-icon-height: 20px; 3236 --iron-icon-height: 20px;
3247 --iron-icon-width: 20px; 3237 --iron-icon-width: 20px;
3248 --paper-icon-button_-_height: 32px; --paper-icon-button_-_padding: 6px ; --paper-icon-button_-_width: 32px;; 3238 --paper-icon-button_-_height: 32px; --paper-icon-button_-_padding: 6px ; --paper-icon-button_-_width: 32px;;
3249 } 3239 }
3250 3240
3251 .more-actions {
3252 -webkit-margin-end: 16px;
3253 -webkit-margin-start: 8px;
3254 text-align: end;
3255 }
3256
3257 #more { 3241 #more {
3258 --paper-menu-button_-_padding: 0;; 3242 --paper-menu-button_-_padding: 6px;;
3259 } 3243 }
3260 3244
3261 paper-menu { 3245 paper-menu {
3262 --paper-menu-selected-item_-_font-weight: normal;; 3246 --paper-menu-selected-item_-_font-weight: normal;;
3263 } 3247 }
3264 3248
3265 paper-item { 3249 paper-item {
3266 -webkit-user-select: none; 3250 -webkit-user-select: none;
3267 cursor: pointer; 3251 cursor: pointer;
3268 font: inherit; 3252 font: inherit;
(...skipping 136 matching lines...) Expand 10 before | Expand all | Expand 10 after
3405 <command id="undo-command" shortcut="Meta|z"></command> 3389 <command id="undo-command" shortcut="Meta|z"></command>
3406 <command id="find-command" shortcut="Meta|f"></command> 3390 <command id="find-command" shortcut="Meta|f"></command>
3407 </if> 3391 </if>
3408 <if expr="not is_macosx"> 3392 <if expr="not is_macosx">
3409 <command id="clear-all-command" shortcut="Alt|c"></command> 3393 <command id="clear-all-command" shortcut="Alt|c"></command>
3410 <command id="undo-command" shortcut="Ctrl|z"></command> 3394 <command id="undo-command" shortcut="Ctrl|z"></command>
3411 <command id="find-command" shortcut="Ctrl|f"></command> 3395 <command id="find-command" shortcut="Ctrl|f"></command>
3412 </if> 3396 </if>
3413 <link rel="import" href="chrome://resources/html/polymer.html"> 3397 <link rel="import" href="chrome://resources/html/polymer.html">
3414 <script src="crisper.js"></script></body></html> 3398 <script src="crisper.js"></script></body></html>
OLDNEW
« no previous file with comments | « chrome/browser/resources/md_downloads/toolbar.html ('k') | chrome/browser/resources/md_history/app.vulcanized.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698